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

package/lib/jsonforms-react-material.esm.js

@@ -19,8 +19,8 @@ import customParsing from 'dayjs/plugin/customParseFormat';
 import debounce from 'lodash/debounce';
 import Close from '@mui/icons-material/Close';
 import map from 'lodash/map';
-import { LocalizationProvider, DatePicker, DateTimePicker, TimePicker } from '@mui/lab';
-import AdapterDayjs from '@mui/lab/AdapterDayjs';
+import { LocalizationProvider, DatePicker, DateTimePicker, TimePicker } from '@mui/x-date-pickers';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
 import get from 'lodash/get';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import Input$1 from '@mui/material/Input';
@@ -574,6 +574,9 @@ const MaterialListWithDetailRenderer = ({ uischemas, schema, uischema, path, err
     const handleCreateDefaultValue = useCallback(() => createDefaultValue(schema), [createDefaultValue]);
     const foundUISchema = useMemo(() => findUISchema(uischemas, schema, uischema.scope, path, undefined, uischema, rootSchema), [uischemas, schema, uischema.scope, path, uischema, rootSchema]);
     const appliedUiSchemaOptions = merge({}, config, uischema.options);
+    React.useEffect(() => {
+        setSelectedIndex(undefined);
+    }, [schema]);
     return (React.createElement(Hidden, { xsUp: !visible },
         React.createElement(ArrayLayoutToolbar, { label: computeLabel(label, required, appliedUiSchemaOptions.hideRequiredAsterisk), errors: errors, path: path, addItem: addItem, createDefault: handleCreateDefaultValue }),
         React.createElement(Grid, { container: true, direction: 'row', spacing: 2 },
@@ -697,7 +700,11 @@ const MaterialDateControl = (props) => {
     const valueInInputFormat = value ? value.format(format) : '';
     return (React.createElement(Hidden, { xsUp: !visible },
         React.createElement(LocalizationProvider, { dateAdapter: AdapterDayjs },
-            React.createElement(DatePicker, { label: label, value: value, clearable: true, onChange: onChange, inputFormat: format, disableMaskedInput: true, views: views, disabled: !enabled, cancelText: appliedUiSchemaOptions.cancelLabel, clearText: appliedUiSchemaOptions.clearLabel, okText: appliedUiSchemaOptions.okLabel, renderInput: params => (React.createElement(ResettableTextField, Object.assign({}, 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: {
+            React.createElement(DatePicker, { label: label, value: value, onChange: onChange, inputFormat: format, disableMaskedInput: true, views: views, disabled: !enabled, componentsProps: {
+                    actionBar: {
+                        actions: (variant) => (variant === 'desktop' ? [] : ['clear', 'cancel', 'accept'])
+                    }
+                }, renderInput: params => (React.createElement(ResettableTextField, Object.assign({}, 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',
                     }, InputLabelProps: data ? { shrink: true } : undefined, onFocus: onFocus, onBlur: onBlur, variant: 'standard' }))) }),
@@ -727,7 +734,11 @@ const MaterialDateTimeControl = (props) => {
     const valueInInputFormat = value ? value.format(format) : '';
     return (React.createElement(Hidden, { xsUp: !visible },
         React.createElement(LocalizationProvider, { dateAdapter: AdapterDayjs },
-            React.createElement(DateTimePicker, { label: label, value: value, clearable: true, onChange: onChange, inputFormat: format, disableMaskedInput: true, ampm: !!appliedUiSchemaOptions.ampm, views: views, disabled: !enabled, cancelText: appliedUiSchemaOptions.cancelLabel, clearText: appliedUiSchemaOptions.clearLabel, okText: appliedUiSchemaOptions.okLabel, renderInput: params => (React.createElement(ResettableTextField, Object.assign({}, 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: {
+            React.createElement(DateTimePicker, { label: label, value: value, onChange: onChange, inputFormat: format, disableMaskedInput: true, ampm: !!appliedUiSchemaOptions.ampm, views: views, disabled: !enabled, componentsProps: {
+                    actionBar: {
+                        actions: (variant) => (variant === 'desktop' ? [] : ['clear', 'cancel', 'accept'])
+                    }
+                }, renderInput: params => (React.createElement(ResettableTextField, Object.assign({}, 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',
                     }, InputLabelProps: data ? { shrink: true } : undefined, onFocus: onFocus, onBlur: onBlur, variant: 'standard' }))) }),
@@ -757,7 +768,11 @@ const MaterialTimeControl = (props) => {
     const valueInInputFormat = value ? value.format(format) : '';
     return (React.createElement(Hidden, { xsUp: !visible },
         React.createElement(LocalizationProvider, { dateAdapter: AdapterDayjs },
-            React.createElement(TimePicker, { label: label, value: value, clearable: true, onChange: onChange, inputFormat: format, disableMaskedInput: true, ampm: !!appliedUiSchemaOptions.ampm, views: views, disabled: !enabled, cancelText: appliedUiSchemaOptions.cancelLabel, clearText: appliedUiSchemaOptions.clearLabel, okText: appliedUiSchemaOptions.okLabel, renderInput: params => (React.createElement(ResettableTextField, Object.assign({}, 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: {
+            React.createElement(TimePicker, { label: label, value: value, onChange: onChange, inputFormat: format, disableMaskedInput: true, ampm: !!appliedUiSchemaOptions.ampm, views: views, disabled: !enabled, componentsProps: {
+                    actionBar: {
+                        actions: (variant) => (variant === 'desktop' ? [] : ['clear', 'cancel', 'accept'])
+                    }
+                }, renderInput: params => (React.createElement(ResettableTextField, Object.assign({}, 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'
                     }, InputLabelProps: data ? { shrink: true } : undefined, onFocus: onFocus, onBlur: onBlur, variant: 'standard' }))) }),
@@ -812,7 +827,7 @@ const MaterialRadioGroup = (props) => {
     return (React.createElement(Hidden, { xsUp: !visible },
         React.createElement(FormControl, { component: 'fieldset', fullWidth: !appliedUiSchemaOptions.trim, onFocus: onFocus, onBlur: onBlur },
             React.createElement(FormLabel, { htmlFor: id, error: !isValid, component: 'legend', required: showAsRequired(required, appliedUiSchemaOptions.hideRequiredAsterisk) }, label),
-            React.createElement(RadioGroup, { value: props.data, onChange: onChange, row: true }, options.map(option => (React.createElement(FormControlLabel, { value: option.value, key: option.label, control: React.createElement(Radio, { checked: data === option.value }), label: option.label, disabled: !enabled })))),
+            React.createElement(RadioGroup, { value: props.data ?? '', onChange: onChange, row: true }, options.map(option => (React.createElement(FormControlLabel, { value: option.value, key: option.label, control: React.createElement(Radio, { checked: data === option.value }), label: option.label, disabled: !enabled })))),
             React.createElement(FormHelperText, { error: !isValid }, !isValid ? errors : showDescription ? description : null))));
 };
 
@@ -1001,7 +1016,7 @@ const ExpandPanelRendererComponent = (props) => {
             removeId(labelHtmlId);
         };
     }, [labelHtmlId]);
-    const { childLabel, childPath, index, expanded, moveDown, moveUp, enableMoveDown, enableMoveUp, handleExpansion, removeItems, path, rootSchema, schema, uischema, uischemas, renderers, cells, config } = props;
+    const { enabled, childLabel, childPath, index, expanded, moveDown, moveUp, enableMoveDown, enableMoveUp, handleExpansion, removeItems, path, rootSchema, schema, uischema, uischemas, renderers, cells, config } = props;
     const foundUISchema = useMemo(() => findUISchema(uischemas, schema, uischema.scope, path, undefined, uischema, rootSchema), [uischemas, schema, uischema.scope, path, uischema, rootSchema]);
     const appliedUiSchemaOptions = merge({}, config, uischema.options);
     const showSortButtons = appliedUiSchemaOptions.showSortButtons || appliedUiSchemaOptions.showArrayLayoutSortButtons;
@@ -1029,7 +1044,7 @@ const ExpandPanelRendererComponent = (props) => {
                                     React.createElement(IconButton, { onClick: removeItems(path, [index]), style: iconStyle, "aria-label": `Delete`, size: 'large' },
                                         React.createElement(DeleteIcon, null))))))))),
         React.createElement(AccordionDetails, null,
-            React.createElement(JsonFormsDispatch, { schema: schema, uischema: foundUISchema, path: childPath, key: childPath, renderers: renderers, cells: cells }))));
+            React.createElement(JsonFormsDispatch, { enabled: enabled, schema: schema, uischema: foundUISchema, path: childPath, key: childPath, renderers: renderers, cells: cells }))));
 };
 const ExpandPanelRenderer = React.memo(ExpandPanelRendererComponent);
 const ctxDispatchToExpandPanelProps = dispatch => ({
@@ -1078,12 +1093,12 @@ const MaterialArrayLayoutComponent = (props) => {
         setExpanded(expandedPanel ? panel : false);
     }, []);
     const isExpanded = (index) => expanded === composePaths(props.path, `${index}`);
-    const { data, path, schema, uischema, errors, addItem, renderers, cells, label, required, rootSchema, config, uischemas } = props;
+    const { enabled, data, path, schema, uischema, errors, addItem, renderers, cells, label, required, rootSchema, config, uischemas } = props;
     const appliedUiSchemaOptions = merge({}, config, props.uischema.options);
     return (React.createElement("div", null,
         React.createElement(ArrayLayoutToolbar, { label: computeLabel(label, required, appliedUiSchemaOptions.hideRequiredAsterisk), errors: errors, path: path, addItem: addItem, createDefault: innerCreateDefaultValue }),
         React.createElement("div", null, data > 0 ? (map(range(data), index => {
-            return (React.createElement(ExpandPanelRenderer$1, { index: index, expanded: isExpanded(index), schema: schema, path: path, handleExpansion: handleChange, uischema: uischema, renderers: renderers, cells: cells, key: index, rootSchema: rootSchema, enableMoveUp: index != 0, enableMoveDown: index < data - 1, config: config, childLabelProp: appliedUiSchemaOptions.elementLabelProp, uischemas: uischemas }));
+            return (React.createElement(ExpandPanelRenderer$1, { enabled: enabled, index: index, expanded: isExpanded(index), schema: schema, path: path, handleExpansion: handleChange, uischema: uischema, renderers: renderers, cells: cells, key: index, rootSchema: rootSchema, enableMoveUp: index != 0, enableMoveDown: index < data - 1, config: config, childLabelProp: appliedUiSchemaOptions.elementLabelProp, uischemas: uischemas }));
         })) : (React.createElement("p", null, "No data")))));
 };
 const MaterialArrayLayout$1 = React.memo(MaterialArrayLayoutComponent);