@jsonforms/material-renderers 3.0.0-beta.5 → 3.0.0-rc.0

package/lib/layouts/MaterialCategorizationLayout.d.ts

@@ -1,17 +1,18 @@
-import React from 'react';
+/// <reference types="react" />
 import { RankedTester, StatePropsOfLayout, Tester } from '@jsonforms/core';
+import { TranslateProps } from '@jsonforms/react';
 import { AjvProps } from '../util/layout';
 export declare const isSingleLevelCategorization: Tester;
 export declare const materialCategorizationTester: RankedTester;
 export interface CategorizationState {
     activeCategory: number;
 }
-export interface MaterialCategorizationLayoutRendererProps extends StatePropsOfLayout, AjvProps {
+export interface MaterialCategorizationLayoutRendererProps extends StatePropsOfLayout, AjvProps, TranslateProps {
     selected?: number;
     ownState?: boolean;
     data?: any;
     onChange?(selected: number, prevSelected: number): void;
 }
 export declare const MaterialCategorizationLayoutRenderer: (props: MaterialCategorizationLayoutRendererProps) => JSX.Element;
-declare const _default: React.ComponentType<import("@jsonforms/core").OwnPropsOfLayout>;
+declare const _default: (props: MaterialCategorizationLayoutRendererProps & import("@jsonforms/core").OwnPropsOfLayout) => JSX.Element;
 export default _default;

package/lib/layouts/MaterialCategorizationStepperLayout.d.ts

@@ -1,13 +1,14 @@
-import React from 'react';
+/// <reference types="react" />
 import { RankedTester, StatePropsOfLayout } from '@jsonforms/core';
+import { TranslateProps } from '@jsonforms/react';
 import { AjvProps } from '../util/layout';
 export declare const materialCategorizationStepperTester: RankedTester;
 export interface CategorizationStepperState {
     activeCategory: number;
 }
-export interface MaterialCategorizationStepperLayoutRendererProps extends StatePropsOfLayout, AjvProps {
+export interface MaterialCategorizationStepperLayoutRendererProps extends StatePropsOfLayout, AjvProps, TranslateProps {
     data: any;
 }
 export declare const MaterialCategorizationStepperLayoutRenderer: (props: MaterialCategorizationStepperLayoutRendererProps) => JSX.Element;
-declare const _default: React.ComponentType<import("@jsonforms/core").OwnPropsOfLayout>;
+declare const _default: (props: MaterialCategorizationStepperLayoutRendererProps & import("@jsonforms/core").OwnPropsOfLayout) => JSX.Element;
 export default _default;

package/lib/layouts/MaterialGroupLayout.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { LayoutProps, RankedTester } from '@jsonforms/core';
 export declare const groupTester: RankedTester;
-export declare const MaterializedGroupLayoutRenderer: ({ uischema, schema, path, visible, enabled, renderers, cells, direction }: LayoutProps) => JSX.Element;
-declare const _default: React.ComponentType<import("@jsonforms/core").OwnPropsOfLayout>;
+export declare const MaterializedGroupLayoutRenderer: ({ uischema, schema, path, visible, enabled, renderers, cells, direction, label }: LayoutProps) => JSX.Element;
+declare const _default: React.ComponentType<LayoutProps & import("@jsonforms/core").OwnPropsOfLayout>;
 export default _default;
 export declare const materialGroupTester: RankedTester;

package/lib/layouts/MaterialHorizontalLayout.d.ts

@@ -6,5 +6,5 @@ import { LayoutProps, RankedTester } from '@jsonforms/core';
  */
 export declare const materialHorizontalLayoutTester: RankedTester;
 export declare const MaterialHorizontalLayoutRenderer: ({ uischema, renderers, cells, schema, path, enabled, visible }: LayoutProps) => JSX.Element;
-declare const _default: React.ComponentType<import("@jsonforms/core").OwnPropsOfLayout>;
+declare const _default: React.ComponentType<LayoutProps & import("@jsonforms/core").OwnPropsOfLayout>;
 export default _default;

package/lib/layouts/MaterialVerticalLayout.d.ts

@@ -6,5 +6,5 @@ import { LayoutProps, RankedTester } from '@jsonforms/core';
  */
 export declare const materialVerticalLayoutTester: RankedTester;
 export declare const MaterialVerticalLayoutRenderer: ({ uischema, schema, path, enabled, visible, renderers, cells }: LayoutProps) => JSX.Element;
-declare const _default: React.ComponentType<import("@jsonforms/core").OwnPropsOfLayout>;
+declare const _default: React.ComponentType<LayoutProps & import("@jsonforms/core").OwnPropsOfLayout>;
 export default _default;

package/lib/mui-controls/MuiAutocomplete.d.ts

@@ -1,9 +1,9 @@
 import React, { ReactNode } from 'react';
-import { EnumCellProps, EnumOption, WithClassname } from '@jsonforms/core';
+import { ControlProps, EnumCellProps, EnumOption, WithClassname } from '@jsonforms/core';
 import { AutocompleteRenderOptionState, FilterOptionsState } from '@mui/material';
 export interface WithOptionLabel {
     getOptionLabel?(option: EnumOption): string;
     renderOption?(props: React.HTMLAttributes<HTMLLIElement>, option: EnumOption, state: AutocompleteRenderOptionState): ReactNode;
     filterOptions?(options: EnumOption[], state: FilterOptionsState<EnumOption>): EnumOption[];
 }
-export declare const MuiAutocomplete: (props: EnumCellProps & WithClassname & WithOptionLabel) => JSX.Element;
+export declare const MuiAutocomplete: (props: ControlProps & EnumCellProps & WithClassname & WithOptionLabel) => JSX.Element;

package/lib/mui-controls/MuiSelect.d.ts

@@ -1,3 +1,4 @@
 import React from 'react';
 import { EnumCellProps, WithClassname } from '@jsonforms/core';
-export declare const MuiSelect: React.MemoExoticComponent<(props: EnumCellProps & WithClassname) => JSX.Element>;
+import { TranslateProps } from '@jsonforms/react';
+export declare const MuiSelect: React.MemoExoticComponent<(props: EnumCellProps & WithClassname & TranslateProps) => JSX.Element>;

package/lib/util/i18nDefaults.d.ts

@@ -0,0 +1,3 @@
+export declare const i18nDefaults: {
+    'enum.none': string;
+};

package/lib/util/index.d.ts

@@ -3,3 +3,4 @@ export * from './layout';
 export * from './theme';
 export * from './debounce';
 export * from './focus';
+export * from './i18nDefaults';

package/lib/util/layout.d.ts

@@ -13,3 +13,6 @@ export interface AjvProps {
     ajv: Ajv;
 }
 export declare const withAjvProps: <P extends {}>(Component: React.ComponentType<AjvProps & P>) => (props: P) => JSX.Element;
+export interface MaterialLabelableLayoutRendererProps extends MaterialLayoutRendererProps {
+    label?: string;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jsonforms/material-renderers",
-  "version": "3.0.0-beta.5",
+  "version": "3.0.0-rc.0",
   "description": "Material Renderer Set for JSON Forms",
   "repository": "https://github.com/eclipsesource/jsonforms",
   "bugs": "https://github.com/eclipsesource/jsonforms/issues",
@@ -76,8 +76,8 @@
   "peerDependencies": {
     "@emotion/react": "^11.4.1",
     "@emotion/styled": "^11.3.0",
-    "@jsonforms/core": "3.0.0-beta.5",
-    "@jsonforms/react": "3.0.0-beta.5",
+    "@jsonforms/core": "3.0.0-rc.0",
+    "@jsonforms/react": "3.0.0-rc.0",
     "@mui/icons-material": "^5.0.0",
     "@mui/lab": "^5.0.0-alpha.54",
     "@mui/material": "^5.0.0"
@@ -85,8 +85,8 @@
   "devDependencies": {
     "@emotion/react": "^11.5.0",
     "@emotion/styled": "^11.3.0",
-    "@jsonforms/core": "^3.0.0-beta.5",
-    "@jsonforms/react": "^3.0.0-beta.5",
+    "@jsonforms/core": "^3.0.0-rc.0",
+    "@jsonforms/react": "^3.0.0-rc.0",
     "@mui/icons-material": "^5.2.0",
     "@mui/lab": "^5.0.0-alpha.58",
     "@mui/material": "^5.2.2",
@@ -114,5 +114,5 @@
     "webpack-cli": "^3.2.1",
     "webpack-dev-server": "^3.9.0"
   },
-  "gitHead": "b66023cf081e56baa3194ac3d6658e23fd267bf9"
+  "gitHead": "5ef030e8b3f91bcdc3e6b8d232a0b191bf1195ce"
 }

package/src/additional/MaterialLabelRenderer.tsx

@@ -24,13 +24,12 @@
 */
 import React from 'react';
 import {
-  LabelElement,
-  OwnPropsOfRenderer,
+  LabelProps,
   RankedTester,
   rankWith,
   uiTypeIs,
 } from '@jsonforms/core';
-import { withJsonFormsLayoutProps } from '@jsonforms/react';
+import { withJsonFormsLabelProps } from '@jsonforms/react';
 import {
   Hidden,
   Typography
@@ -45,15 +44,14 @@ export const materialLabelRendererTester: RankedTester = rankWith(1, uiTypeIs('L
 /**
  * Default renderer for a label.
  */
-export const MaterialLabelRenderer = ({ uischema, visible }: OwnPropsOfRenderer) => {
-  const labelElement: LabelElement = uischema as LabelElement;
+export const MaterialLabelRenderer = ({ text, visible }: LabelProps ) => {
   return (
     <Hidden xsUp={!visible}>
       <Typography variant='h6'>
-        {labelElement.text !== undefined && labelElement.text !== null && labelElement.text}
+        {text}
       </Typography>
     </Hidden>
   );
 };
 
-export default withJsonFormsLayoutProps(MaterialLabelRenderer);
+export default withJsonFormsLabelProps(MaterialLabelRenderer);

package/src/cells/MaterialEnumCell.tsx

@@ -30,10 +30,10 @@ import {
   rankWith,
   WithClassname
 } from '@jsonforms/core';
-import { withJsonFormsEnumCellProps } from '@jsonforms/react';
+import { TranslateProps, withJsonFormsEnumCellProps, withTranslateProps } from '@jsonforms/react';
 import { MuiSelect } from '../mui-controls/MuiSelect';
 
-export const MaterialEnumCell = (props: EnumCellProps & WithClassname) => (
+export const MaterialEnumCell = (props: EnumCellProps & WithClassname & TranslateProps) => (
   <MuiSelect {...props} />
 );
 
@@ -43,4 +43,5 @@ export const MaterialEnumCell = (props: EnumCellProps & WithClassname) => (
  */
 export const materialEnumCellTester: RankedTester = rankWith(2, isEnumControl);
 
-export default withJsonFormsEnumCellProps(MaterialEnumCell);
+// HOC order can be reversed with https://github.com/eclipsesource/jsonforms/issues/1987
+export default withJsonFormsEnumCellProps(withTranslateProps(React.memo(MaterialEnumCell)), false);

package/src/cells/MaterialOneOfEnumCell.tsx

@@ -30,10 +30,10 @@ import {
   rankWith,
   WithClassname
 } from '@jsonforms/core';
-import { withJsonFormsOneOfEnumCellProps } from '@jsonforms/react';
+import { TranslateProps, withJsonFormsOneOfEnumCellProps, withTranslateProps } from '@jsonforms/react';
 import { MuiSelect } from '../mui-controls/MuiSelect';
 
-export const MaterialOneOfEnumCell = (props: EnumCellProps & WithClassname) => (
+export const MaterialOneOfEnumCell = (props: EnumCellProps & WithClassname & TranslateProps) => (
   <MuiSelect {...props} />
 );
 
@@ -43,4 +43,4 @@ export const MaterialOneOfEnumCell = (props: EnumCellProps & WithClassname) => (
  */
 export const materialOneOfEnumCellTester: RankedTester = rankWith(2, isOneOfEnumControl);
 
-export default withJsonFormsOneOfEnumCellProps(MaterialOneOfEnumCell);
+export default withJsonFormsOneOfEnumCellProps(withTranslateProps(React.memo(MaterialOneOfEnumCell)), false);

package/src/controls/MaterialEnumControl.tsx

@@ -30,19 +30,25 @@ import {
   RankedTester,
   rankWith,
 } from '@jsonforms/core';
-import { withJsonFormsEnumProps } from '@jsonforms/react';
+import { TranslateProps, withJsonFormsEnumProps, withTranslateProps } from '@jsonforms/react';
 import { MuiSelect } from '../mui-controls/MuiSelect';
 import merge from 'lodash/merge';
 import { MaterialInputControl } from './MaterialInputControl';
 import { MuiAutocomplete, WithOptionLabel } from '../mui-controls/MuiAutocomplete';
 
-export const MaterialEnumControl = (props: ControlProps & OwnPropsOfEnum & WithOptionLabel) => {
-  const {config, uischema} = props;
+export const MaterialEnumControl = (props: ControlProps & OwnPropsOfEnum & WithOptionLabel & TranslateProps) => {
+  const {config, uischema, errors} = props;
   const appliedUiSchemaOptions = merge({}, config, uischema.options);
+  const isValid = errors.length === 0;
   return (
+    appliedUiSchemaOptions.autocomplete === false ?
     <MaterialInputControl
       {...props}
-      input={appliedUiSchemaOptions.autocomplete === false ? MuiSelect : MuiAutocomplete}
+      input={MuiSelect}
+    />:
+    <MuiAutocomplete
+      {...props}
+      isValid={isValid}
     />
   );
 };
@@ -52,4 +58,5 @@ export const materialEnumControlTester: RankedTester = rankWith(
   isEnumControl
 );
 
-export default withJsonFormsEnumProps(MaterialEnumControl);
+// HOC order can be reversed with https://github.com/eclipsesource/jsonforms/issues/1987
+export default withJsonFormsEnumProps(withTranslateProps(React.memo(MaterialEnumControl)), false);

package/src/controls/MaterialOneOfEnumControl.tsx

@@ -30,19 +30,26 @@ import {
   RankedTester,
   rankWith,
 } from '@jsonforms/core';
-import { withJsonFormsOneOfEnumProps } from '@jsonforms/react';
+import { TranslateProps, withJsonFormsOneOfEnumProps, withTranslateProps } from '@jsonforms/react';
 import { MuiAutocomplete, WithOptionLabel } from '../mui-controls/MuiAutocomplete';
 import { MuiSelect } from '../mui-controls/MuiSelect';
 import { MaterialInputControl } from '../controls/MaterialInputControl';
 import merge from 'lodash/merge';
 
-export const MaterialOneOfEnumControl = (props: ControlProps & OwnPropsOfEnum & WithOptionLabel) => {
-  const {config, uischema} = props;
+export const MaterialOneOfEnumControl = (props: ControlProps & OwnPropsOfEnum & WithOptionLabel & TranslateProps) => {
+  const {config, uischema, errors} = props;
   const appliedUiSchemaOptions = merge({}, config, uischema.options);
+  const isValid = errors.length === 0;
+
   return (
+    appliedUiSchemaOptions.autocomplete === false ?
     <MaterialInputControl
       {...props}
-      input={appliedUiSchemaOptions.autocomplete === false ? MuiSelect : MuiAutocomplete}
+      input={MuiSelect}
+    />:
+    <MuiAutocomplete
+      {...props}
+      isValid={isValid}
     />
   );
 };
@@ -52,4 +59,5 @@ export const materialOneOfEnumControlTester: RankedTester = rankWith(
   isOneOfEnumControl
 );
 
-export default withJsonFormsOneOfEnumProps(MaterialOneOfEnumControl);
+// HOC order can be reversed with https://github.com/eclipsesource/jsonforms/issues/1987
+export default withJsonFormsOneOfEnumProps(withTranslateProps(React.memo(MaterialOneOfEnumControl)), false);

package/src/layouts/MaterialCategorizationLayout.tsx

@@ -22,12 +22,13 @@
   OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
   THE SOFTWARE.
 */
-import React, {useState} from 'react';
+import React, {useState, useMemo} from 'react';
 import { AppBar, Hidden, Tab, Tabs } from '@mui/material';
 import {
   and,
   Categorization,
   Category,
+  deriveLabelForUISchemaElement,
   isVisible,
   RankedTester,
   rankWith,
@@ -36,7 +37,7 @@ import {
   UISchemaElement,
   uiTypeIs
 } from '@jsonforms/core';
-import { withJsonFormsLayoutProps } from '@jsonforms/react';
+import { TranslateProps, withJsonFormsLayoutProps, withTranslateProps } from '@jsonforms/react';
 import {
   AjvProps,
   MaterialLayoutRenderer,
@@ -68,7 +69,7 @@ export interface CategorizationState {
 }
 
 export interface MaterialCategorizationLayoutRendererProps
-  extends StatePropsOfLayout, AjvProps {
+  extends StatePropsOfLayout, AjvProps, TranslateProps {
   selected?: number;
   ownState?: boolean;
   data?: any;
@@ -87,13 +88,14 @@ export const MaterialCategorizationLayoutRenderer = (props: MaterialCategorizati
     enabled,
     selected,
     onChange,
-    ajv
+    ajv,
+    t
   } = props;
   const categorization = uischema as Categorization;
   const [activeCategory, setActiveCategory]= useState<number|undefined>(selected??0);
-  const categories = categorization.elements.filter((category: Category) =>
+  const categories = useMemo(() => categorization.elements.filter((category: Category) =>
     isVisible(category, data, undefined, ajv)
-  );
+  ),[categorization, data, ajv]);
   const childProps: MaterialLayoutRendererProps = {
     elements: categories[activeCategory].elements,
     schema,
@@ -110,12 +112,19 @@ export const MaterialCategorizationLayoutRenderer = (props: MaterialCategorizati
     }
     setActiveCategory(value);
   };
+
+  const tabLabels = useMemo(() => {
+    return categories.map((e: Category) => 
+      deriveLabelForUISchemaElement(e, t)
+    )
+  }, [categories, t])
+
   return (
     <Hidden xsUp={!visible}>
       <AppBar position='static'>
         <Tabs value={activeCategory} onChange={onTabChange} textColor='inherit' indicatorColor='secondary' variant='scrollable'>
-          {categories.map((e: Category, idx: number) => (
-            <Tab key={idx} label={e.label} />
+          {categories.map((_, idx: number) => (
+            <Tab key={idx} label={tabLabels[idx]} />
           ))}
         </Tabs>
       </AppBar>
@@ -126,4 +135,4 @@ export const MaterialCategorizationLayoutRenderer = (props: MaterialCategorizati
   );
 };
 
-export default withJsonFormsLayoutProps(withAjvProps(MaterialCategorizationLayoutRenderer));
+export default withAjvProps(withTranslateProps(withJsonFormsLayoutProps(MaterialCategorizationLayoutRenderer)));

package/src/layouts/MaterialCategorizationStepperLayout.tsx

@@ -22,7 +22,7 @@
   OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
   THE SOFTWARE.
 */
-import React, {useState} from 'react';
+import React, {useState, useMemo} from 'react';
 import merge from 'lodash/merge';
 import { Button, Hidden, Step, StepButton, Stepper } from '@mui/material';
 import {
@@ -30,6 +30,7 @@ import {
   Categorization,
   categorizationHasCategory,
   Category,
+  deriveLabelForUISchemaElement,
   isVisible,
   optionIs,
   RankedTester,
@@ -37,7 +38,7 @@ import {
   StatePropsOfLayout,
   uiTypeIs
 } from '@jsonforms/core';
-import { withJsonFormsLayoutProps } from '@jsonforms/react';
+import { TranslateProps, withJsonFormsLayoutProps, withTranslateProps } from '@jsonforms/react';
 import {
   AjvProps,
   MaterialLayoutRenderer,
@@ -59,7 +60,7 @@ export interface CategorizationStepperState {
 }
 
 export interface MaterialCategorizationStepperLayoutRendererProps
-  extends StatePropsOfLayout, AjvProps {
+  extends StatePropsOfLayout, AjvProps, TranslateProps {
     data: any;
 }
 
@@ -79,7 +80,8 @@ export const MaterialCategorizationStepperLayoutRenderer = (props: MaterialCateg
     visible,
     cells,
     config,
-    ajv
+    ajv,
+    t
   } = props;
   const categorization = uischema as Categorization;
   const appliedUiSchemaOptions = merge({}, config, uischema.options);
@@ -94,9 +96,9 @@ export const MaterialCategorizationStepperLayoutRenderer = (props: MaterialCateg
   const buttonStyle = {
     marginRight: '1em'
   };
-  const categories = categorization.elements.filter((category: Category) =>
+  const categories = useMemo(() => categorization.elements.filter((category: Category) =>
     isVisible(category, data, undefined, ajv)
-  );
+  ),[categorization, data, ajv]);
   const childProps: MaterialLayoutRendererProps = {
     elements: categories[activeCategory].elements,
     schema,
@@ -106,13 +108,18 @@ export const MaterialCategorizationStepperLayoutRenderer = (props: MaterialCateg
     renderers,
     cells
   };
+  const tabLabels = useMemo(() => {
+    return categories.map((e: Category) => 
+      deriveLabelForUISchemaElement(e, t)
+    )
+  }, [categories, t])
   return (
     <Hidden xsUp={!visible}>
       <Stepper activeStep={activeCategory} nonLinear>
-        {categories.map((e: Category, idx: number) => (
-          <Step key={e.label}>
+        {categories.map((_: Category, idx: number) => (
+          <Step key={tabLabels[idx]}>
             <StepButton onClick={() => handleStep(idx)}>
-              {e.label}
+              {tabLabels[idx]}
             </StepButton>
           </Step>
         ))}
@@ -144,6 +151,6 @@ export const MaterialCategorizationStepperLayoutRenderer = (props: MaterialCateg
   );
 };
 
-export default withJsonFormsLayoutProps(withAjvProps(
-  MaterialCategorizationStepperLayoutRenderer
-));
+export default withAjvProps(withTranslateProps(
+  withJsonFormsLayoutProps(MaterialCategorizationStepperLayoutRenderer
+)));

package/src/layouts/MaterialGroupLayout.tsx

@@ -34,21 +34,21 @@ import {
   withIncreasedRank,
 } from '@jsonforms/core';
 import {
+  MaterialLabelableLayoutRendererProps,
   MaterialLayoutRenderer,
-  MaterialLayoutRendererProps
 } from '../util/layout';
 import { withJsonFormsLayoutProps } from '@jsonforms/react';
 
 export const groupTester: RankedTester = rankWith(1, uiTypeIs('Group'));
 const style: { [x: string]: any } = { marginBottom: '10px' };
 
-const GroupComponent = React.memo(({ visible, enabled, uischema, ...props }: MaterialLayoutRendererProps) => {
+const GroupComponent = React.memo(({ visible, enabled, uischema, label, ...props }: MaterialLabelableLayoutRendererProps) => {
   const groupLayout = uischema as GroupLayout;
   return (
     <Hidden xsUp={!visible}>
       <Card style={style}>
-        {!isEmpty(groupLayout.label) && (
-          <CardHeader title={groupLayout.label} />
+        {!isEmpty(label) && (
+          <CardHeader title={label} />
         )}
         <CardContent>
           <MaterialLayoutRenderer {...props} visible={visible} enabled={enabled} elements={groupLayout.elements} />
@@ -58,7 +58,7 @@ const GroupComponent = React.memo(({ visible, enabled, uischema, ...props }: Mat
   );
 });
 
-export const MaterializedGroupLayoutRenderer = ({ uischema, schema, path, visible, enabled, renderers, cells, direction }: LayoutProps) => {
+export const MaterializedGroupLayoutRenderer = ({ uischema, schema, path, visible, enabled, renderers, cells, direction, label }: LayoutProps) => {
   const groupLayout = uischema as GroupLayout;
 
   return (
@@ -72,6 +72,7 @@ export const MaterializedGroupLayoutRenderer = ({ uischema, schema, path, visibl
       uischema={uischema}
       renderers={renderers}
       cells={cells}
+      label={label}
     />
   );
 };

package/src/mui-controls/MuiAutocomplete.tsx

@@ -23,15 +23,18 @@
   THE SOFTWARE.
 */
 import React, { ReactNode } from 'react';
-import { EnumCellProps, EnumOption, WithClassname } from '@jsonforms/core';
+import { ControlProps, EnumCellProps, EnumOption, isDescriptionHidden, WithClassname } from '@jsonforms/core';
 
 import {
   Autocomplete,
   AutocompleteRenderOptionState,
-  Input,
-  FilterOptionsState
+  FilterOptionsState,
+  FormHelperText,
+  Hidden,
+  TextField
 } from '@mui/material';
 import merge from 'lodash/merge';
+import { useFocus } from '../util/focus';
 
 export interface WithOptionLabel {
   getOptionLabel?(option: EnumOption) : string;
@@ -39,8 +42,13 @@ export interface WithOptionLabel {
   filterOptions?(options: EnumOption[], state: FilterOptionsState<EnumOption>) : EnumOption[];
 }
 
-export const MuiAutocomplete = (props: EnumCellProps & WithClassname & WithOptionLabel) => {
+export const MuiAutocomplete = (props: ControlProps & EnumCellProps & WithClassname & WithOptionLabel) => {
   const {
+    description,
+    errors,
+    visible,
+    required,
+    label,
     data,
     className,
     id,
@@ -52,45 +60,80 @@ export const MuiAutocomplete = (props: EnumCellProps & WithClassname & WithOptio
     config,
     getOptionLabel,
     renderOption,
-    filterOptions
+    filterOptions,
+    isValid
   } = props;
   const appliedUiSchemaOptions = merge({}, config, uischema.options);
   const [inputValue, setInputValue] = React.useState(data ?? '');
+  const [focused, onFocus, onBlur] = useFocus();
 
   const findOption = options.find(o => o.value === data) ?? null;
+  
+  const showDescription = !isDescriptionHidden(
+    visible,
+    description,
+    focused,
+    appliedUiSchemaOptions.showUnfocusedDescription
+  );
+  
+  const firstFormHelperText = showDescription
+    ? description
+    : !isValid
+    ? errors
+    : null;
+  const secondFormHelperText = showDescription && !isValid ? errors : null;
+
   return (
-    <Autocomplete
-      className={className}
-      id={id}
-      disabled={!enabled}
-      value={findOption}
-      onChange={(_event: any, newValue: EnumOption | null) => {
-        handleChange(path, newValue?.value);
-      }}
-      inputValue={inputValue}
-      onInputChange={(_event, newInputValue) => {
-        setInputValue(newInputValue);
-      }}
-      autoHighlight
-      autoSelect
-      autoComplete
-      fullWidth
-      options={options}
-      getOptionLabel={getOptionLabel || (option => option?.label)}
-      freeSolo={false}
-      style={{ marginTop: 16 }}
-      renderInput={params => (
-        <Input
-          style={{ width: '100%' }}
-          type='text'
-          inputProps={params.inputProps}
-          inputRef={params.InputProps.ref}
-          autoFocus={appliedUiSchemaOptions.focus}
-          disabled={!enabled}
-        />
-      )}
-      renderOption={renderOption}
-      filterOptions={filterOptions}
-    />
+    <Hidden xsUp={!visible}>
+      <Autocomplete
+        className={className}
+        id={id}
+        disabled={!enabled}
+        value={findOption}
+        onChange={(_event: any, newValue: EnumOption | null) => {
+          handleChange(path, newValue?.value);
+        }}
+        inputValue={inputValue}
+        onInputChange={(_event, newInputValue) => {
+          setInputValue(newInputValue);
+        }}
+        autoHighlight
+        autoSelect
+        autoComplete
+        fullWidth
+        options={options}
+        getOptionLabel={getOptionLabel || (option => option?.label)}
+        freeSolo={false}
+        renderInput={params => { 
+          return(
+          <TextField
+            label={label} 
+            variant={'standard'}
+            type='text'
+            inputProps={params.inputProps}
+            inputRef={params.InputProps.ref}
+            autoFocus={appliedUiSchemaOptions.focus}
+            disabled={!enabled}
+            {...params}
+            id={id + '-input'}
+            required={required && !appliedUiSchemaOptions.hideRequiredAsterisk}
+            error={!isValid}
+            fullWidth={!appliedUiSchemaOptions.trim}
+            InputLabelProps={data ? { shrink: true } : undefined}
+            onFocus={onFocus}
+            onBlur={onBlur}
+            focused={focused}
+          />
+        )}}
+        renderOption={renderOption}
+        filterOptions={filterOptions}
+      />
+      <FormHelperText error={!isValid && !showDescription}>
+        {firstFormHelperText}
+      </FormHelperText>
+      <FormHelperText error={!isValid}>
+        {secondFormHelperText}
+      </FormHelperText>
+    </Hidden>
   );
 };