@jsonforms/material-renderers 3.0.0-beta.4 → 3.0.0-rc.1

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/datejs.d.ts

@@ -1,3 +1,19 @@
+import { TextFieldProps } from '@mui/material';
 import dayjs from 'dayjs';
-export declare const createOnChangeHandler: (path: string, handleChange: (path: string, value: any) => void, saveFormat: string | undefined) => (time: dayjs.Dayjs) => void;
+import React from 'react';
+export declare const createOnChangeHandler: (path: string, handleChange: (path: string, value: any) => void, saveFormat: string | undefined) => (time: dayjs.Dayjs, textInputValue: string) => void;
 export declare const getData: (data: any, saveFormat: string | undefined) => dayjs.Dayjs | null;
+declare type ResettableTextFieldProps = TextFieldProps & {
+    rawValue: any;
+    dayjsValueIsValid: boolean;
+    valueInInputFormat: string;
+    focused: boolean;
+};
+/**
+ * The dayjs formatter/parser is very lenient and for example ignores additional digits and/or characters.
+ * In these cases the input text can look vastly different than the actual value stored in the data.
+ * The 'ResettableTextField' component adjusts the text field to reflect the actual value stored in the data
+ * once it's no longer 'focused', i.e. when the user stops editing.
+ */
+export declare const ResettableTextField: React.FC<ResettableTextFieldProps>;
+export {};

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.4",
+  "version": "3.0.0-rc.1",
   "description": "Material Renderer Set for JSON Forms",
   "repository": "https://github.com/eclipsesource/jsonforms",
   "bugs": "https://github.com/eclipsesource/jsonforms/issues",
@@ -76,20 +76,20 @@
   "peerDependencies": {
     "@emotion/react": "^11.4.1",
     "@emotion/styled": "^11.3.0",
-    "@jsonforms/core": "3.0.0-beta.4",
-    "@jsonforms/react": "3.0.0-beta.4",
+    "@jsonforms/core": "3.0.0-rc.1",
+    "@jsonforms/react": "3.0.0-rc.1",
     "@mui/icons-material": "^5.0.0",
-    "@mui/lab": "^5.0.0-alpha.54",
-    "@mui/material": "^5.0.0"
+    "@mui/material": "^5.0.0",
+    "@mui/x-date-pickers": "^5.0.0-beta.5"
   },
   "devDependencies": {
     "@emotion/react": "^11.5.0",
     "@emotion/styled": "^11.3.0",
-    "@jsonforms/core": "^3.0.0-beta.4",
-    "@jsonforms/react": "^3.0.0-beta.4",
+    "@jsonforms/core": "^3.0.0-rc.1",
+    "@jsonforms/react": "^3.0.0-rc.1",
     "@mui/icons-material": "^5.2.0",
-    "@mui/lab": "^5.0.0-alpha.58",
     "@mui/material": "^5.2.2",
+    "@mui/x-date-pickers": "^5.0.0-beta.5",
     "@types/enzyme": "^3.10.3",
     "@types/react-dom": "^17.0.9",
     "@wojtekmaj/enzyme-adapter-react-17": "^0.6.3",
@@ -114,5 +114,5 @@
     "webpack-cli": "^3.2.1",
     "webpack-dev-server": "^3.9.0"
   },
-  "gitHead": "413b9767ea8e2c0b6adb3919f5e6b76263d4be31"
+  "gitHead": "852057ca1706007bee24bcb1b53b88c7231628a0"
 }

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/additional/MaterialListWithDetailRenderer.tsx

@@ -98,6 +98,10 @@ export const MaterialListWithDetailRenderer = ({
   );
   const appliedUiSchemaOptions = merge({}, config, uischema.options);
 
+  React.useEffect(() => {
+    setSelectedIndex(undefined);
+  }, [schema]);
+
   return (
     <Hidden xsUp={!visible}>
       <ArrayLayoutToolbar

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/MaterialDateControl.tsx

@@ -32,13 +32,18 @@ import {
   rankWith,
 } from '@jsonforms/core';
 import { withJsonFormsControlProps } from '@jsonforms/react';
-import { FormHelperText, Hidden, TextField } from '@mui/material';
+import { FormHelperText, Hidden } from '@mui/material';
 import {
   DatePicker,
   LocalizationProvider 
-} from '@mui/lab';
-import AdapterDayjs from '@mui/lab/AdapterDayjs';
-import { createOnChangeHandler, getData, useFocus } from '../util';
+} from '@mui/x-date-pickers';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import {
+  createOnChangeHandler,
+  getData,
+  ResettableTextField,
+  useFocus,
+} from '../util';
 
 export const MaterialDateControl = (props: ControlProps)=> {
   const [focused, onFocus, onBlur] = useFocus();
@@ -68,6 +73,8 @@ export const MaterialDateControl = (props: ControlProps)=> {
   const format = appliedUiSchemaOptions.dateFormat ?? 'YYYY-MM-DD';
   const saveFormat = appliedUiSchemaOptions.dateSaveFormat ?? 'YYYY-MM-DD';
 
+  const views = appliedUiSchemaOptions.views ?? ['year', 'day'];
+
   const firstFormHelperText = showDescription
     ? description
     : !isValid
@@ -80,30 +87,41 @@ export const MaterialDateControl = (props: ControlProps)=> {
     saveFormat
   ),[path, handleChange, saveFormat]);
 
+  const value = getData(data, saveFormat);
+  const valueInInputFormat = value ? value.format(format) : '';
+
   return (
     <Hidden xsUp={!visible}>
       <LocalizationProvider dateAdapter={AdapterDayjs}>
         <DatePicker
           label={label}
-          value={getData(data, saveFormat)}
-          clearable
+          value={value}
           onChange={onChange}
           inputFormat={format}
           disableMaskedInput
-          views={appliedUiSchemaOptions.views}
+          views={views}
           disabled={!enabled}
-          cancelText={appliedUiSchemaOptions.cancelLabel}
-          clearText={appliedUiSchemaOptions.clearLabel}
-          okText={appliedUiSchemaOptions.okLabel}
+          componentsProps={{
+            actionBar: {
+              actions: (variant) => (variant === 'desktop' ? [] : ['clear', 'cancel', 'accept'])
+            }
+          }}
           renderInput={params => (
-            <TextField 
+            <ResettableTextField 
               {...params}
+              rawValue={data}
+              dayjsValueIsValid={value !== null}
+              valueInInputFormat={valueInInputFormat}
+              focused={focused}
               id={id + '-input'}
               required={required && !appliedUiSchemaOptions.hideRequiredAsterisk}
               autoFocus={appliedUiSchemaOptions.focus}
               error={!isValid}
               fullWidth={!appliedUiSchemaOptions.trim}
-              inputProps={{ ...params.inputProps, type: 'text' }}
+              inputProps={{
+                ...params.inputProps,
+                type: 'text',
+              }}
               InputLabelProps={data ? { shrink: true } : undefined}
               onFocus={onFocus}
               onBlur={onBlur}

package/src/controls/MaterialDateTimeControl.tsx

@@ -32,13 +32,18 @@ import {
   rankWith
 } from '@jsonforms/core';
 import { withJsonFormsControlProps } from '@jsonforms/react';
-import { FormHelperText, Hidden, TextField } from '@mui/material';
+import { FormHelperText, Hidden } from '@mui/material';
 import {
   DateTimePicker,
   LocalizationProvider 
-} from '@mui/lab';
-import AdapterDayjs from '@mui/lab/AdapterDayjs';
-import { createOnChangeHandler, getData, useFocus } from '../util';
+} from '@mui/x-date-pickers';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import {
+  createOnChangeHandler,
+  getData,
+  ResettableTextField,
+  useFocus
+} from '../util';
 
 export const MaterialDateTimeControl = (props: ControlProps) => {
   const [focused, onFocus, onBlur] = useFocus();
@@ -69,6 +74,8 @@ export const MaterialDateTimeControl = (props: ControlProps) => {
   const format = appliedUiSchemaOptions.dateTimeFormat ?? 'YYYY-MM-DD HH:mm';
   const saveFormat = appliedUiSchemaOptions.dateTimeSaveFormat ?? undefined;
 
+  const views = appliedUiSchemaOptions.views ?? ['year', 'day', 'hours', 'minutes'];
+
   const firstFormHelperText = showDescription
     ? description
     : !isValid
@@ -82,37 +89,49 @@ export const MaterialDateTimeControl = (props: ControlProps) => {
     saveFormat
   ),[path, handleChange, saveFormat]);
 
+  const value = getData(data, saveFormat);
+  const valueInInputFormat = value ? value.format(format) : '';
+
   return (
     <Hidden xsUp={!visible}>
       <LocalizationProvider dateAdapter={AdapterDayjs}>
         <DateTimePicker
           label={label}
-          value={getData(data, saveFormat)}
-          clearable
+          value={value}
           onChange={onChange}
           inputFormat={format}
           disableMaskedInput
           ampm={!!appliedUiSchemaOptions.ampm}
-          views={appliedUiSchemaOptions.views}
+          views={views}
           disabled={!enabled}
-          cancelText={appliedUiSchemaOptions.cancelLabel}
-          clearText={appliedUiSchemaOptions.clearLabel}
-          okText={appliedUiSchemaOptions.okLabel}
+          componentsProps={{
+            actionBar: {
+              actions: (variant) => (variant === 'desktop' ? [] : ['clear', 'cancel', 'accept'])
+            }
+          }}
           renderInput={params => (
-            <TextField 
+            <ResettableTextField 
               {...params}
+              rawValue={data}
+              dayjsValueIsValid={value !== null}
+              valueInInputFormat={valueInInputFormat}
+              focused={focused}
               id={id + '-input'}
               required={required && !appliedUiSchemaOptions.hideRequiredAsterisk}
               autoFocus={appliedUiSchemaOptions.focus}
               error={!isValid}
               fullWidth={!appliedUiSchemaOptions.trim}
-              inputProps={{ ...params.inputProps, type: 'text' }}
+              inputProps={{
+                ...params.inputProps,
+                type: 'text',
+              }}
               InputLabelProps={data ? { shrink: true } : undefined}
               onFocus={onFocus}
               onBlur={onBlur}
               variant={'standard'}
             />
-          )}
+          )
+          }
         />
         <FormHelperText error={!isValid && !showDescription}>
           {firstFormHelperText}

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/controls/MaterialRadioGroup.tsx

@@ -90,7 +90,7 @@ export const MaterialRadioGroup = (props: ControlProps & OwnPropsOfEnum) => {
         </FormLabel>
 
         <RadioGroup
-          value={props.data}
+          value={props.data ?? ''}
           onChange={onChange}
           row={true}
         >

package/src/controls/MaterialTimeControl.tsx

@@ -32,13 +32,18 @@ import {
   rankWith
 } from '@jsonforms/core';
 import { withJsonFormsControlProps } from '@jsonforms/react';
-import { FormHelperText, Hidden, TextField } from '@mui/material';
+import { FormHelperText, Hidden } from '@mui/material';
 import {
   TimePicker,
   LocalizationProvider 
-} from '@mui/lab';
-import AdapterDayjs from '@mui/lab/AdapterDayjs';
-import { createOnChangeHandler, getData, useFocus } from '../util';
+} from '@mui/x-date-pickers';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import {
+  createOnChangeHandler,
+  getData,
+  ResettableTextField,
+  useFocus
+} from '../util';
 
 export const MaterialTimeControl = (props: ControlProps) => {
   const [focused, onFocus, onBlur] = useFocus();
@@ -67,7 +72,9 @@ export const MaterialTimeControl = (props: ControlProps) => {
   );
 
   const format = appliedUiSchemaOptions.timeFormat ?? 'HH:mm';
-    const saveFormat = appliedUiSchemaOptions.timeSaveFormat ?? 'HH:mm:ss';
+  const saveFormat = appliedUiSchemaOptions.timeSaveFormat ?? 'HH:mm:ss';
+
+  const views = appliedUiSchemaOptions.views ?? ['hours', 'minutes'];
 
   const firstFormHelperText = showDescription
     ? description
@@ -82,31 +89,42 @@ export const MaterialTimeControl = (props: ControlProps) => {
     saveFormat
   ),[path, handleChange, saveFormat]);
 
+  const value = getData(data, saveFormat);
+  const valueInInputFormat = value ? value.format(format) : '';
+
   return (
     <Hidden xsUp={!visible}>
       <LocalizationProvider dateAdapter={AdapterDayjs}>
         <TimePicker
           label={label}
-          value={getData(data, saveFormat)}
-          clearable
+          value={value}
           onChange={onChange}
           inputFormat={format}
           disableMaskedInput
           ampm={!!appliedUiSchemaOptions.ampm}
-          views={appliedUiSchemaOptions.views}
+          views={views}
           disabled={!enabled}
-          cancelText={appliedUiSchemaOptions.cancelLabel}
-          clearText={appliedUiSchemaOptions.clearLabel}
-          okText={appliedUiSchemaOptions.okLabel}
+          componentsProps={{
+            actionBar: {
+              actions: (variant) => (variant === 'desktop' ? [] : ['clear', 'cancel', 'accept'])
+            }
+          }}
           renderInput={params => (
-            <TextField 
+            <ResettableTextField 
               {...params}
+              rawValue={data}
+              dayjsValueIsValid={value !== null}
+              valueInInputFormat={valueInInputFormat}
+              focused={focused}
               id={id + '-input'}
               required={required && !appliedUiSchemaOptions.hideRequiredAsterisk}
               autoFocus={appliedUiSchemaOptions.focus}
               error={!isValid}
               fullWidth={!appliedUiSchemaOptions.trim}
-              inputProps={{ ...params.inputProps, type: 'text' }}
+              inputProps={{
+                ...params.inputProps,
+                type: 'text'
+              }}
               InputLabelProps={data ? { shrink: true } : undefined}
               onFocus={onFocus}
               onBlur={onBlur}