@jsonforms/material-renderers 3.7.0-alpha.1 → 3.7.0-alpha.2

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

@@ -903,6 +903,7 @@ var MaterialBooleanToggleControl$1 = withJsonFormsControlProps(MaterialBooleanTo
 
 const MaterialDateControl = (props) => {
     const [focused, onFocus, onBlur] = useFocus();
+    const inputVariant = useInputVariant();
     const { description, id, errors, label, uischema, visible, enabled, required, path, handleChange, data, config, } = props;
     const isValid = errors.length === 0;
     const appliedUiSchemaOptions = merge({}, config, uischema.options);
@@ -912,6 +913,7 @@ const MaterialDateControl = (props) => {
     const format = appliedUiSchemaOptions.dateFormat ?? 'YYYY-MM-DD';
     const saveFormat = appliedUiSchemaOptions.dateSaveFormat ?? defaultDateFormat;
     const views = appliedUiSchemaOptions.views ?? ['year', 'day'];
+    const closeOnSelect = appliedUiSchemaOptions.closeOnSelect ?? true;
     const firstFormHelperText = showDescription
         ? description
         : !isValid
@@ -920,28 +922,29 @@ const MaterialDateControl = (props) => {
     const secondFormHelperText = showDescription && !isValid ? errors : null;
     const updateChild = useCallback(() => setKey((key) => key + 1), []);
     const onChange = useMemo(() => createOnChangeHandler(path, handleChange, saveFormat), [path, handleChange, saveFormat]);
-    const onBlurHandler = useMemo(() => createOnBlurHandler(path, handleChange, format, saveFormat, updateChild, onBlur), [path, handleChange, format, saveFormat, updateChild]);
+    const onBlurHandler = useMemo(() => createOnBlurHandler(path, handleChange, format, saveFormat, updateChild, onBlur), [path, handleChange, format, saveFormat, updateChild, onBlur]);
     const value = getData(data, saveFormat);
     if (!visible) {
         return null;
     }
     return (React.createElement(LocalizationProvider, { dateAdapter: AdapterDayjs },
-        React.createElement(DatePicker, { open: open, onOpen: () => setOpen(true), onClose: () => setOpen(false), key: key, label: label, value: value, onAccept: onChange, format: format, views: views, disabled: !enabled, slotProps: {
-                actionBar: ({ wrapperVariant }) => ({
-                    actions: wrapperVariant === 'desktop' ? [] : ['clear', 'cancel', 'accept'],
+        React.createElement(DatePicker, { open: open, onOpen: () => setOpen(true), onClose: () => setOpen(false), key: key, label: label, value: value, onAccept: onChange, format: format, views: views, disabled: !enabled, closeOnSelect: closeOnSelect, slotProps: {
+                actionBar: ({ pickerVariant }) => ({
+                    actions: pickerVariant === 'desktop' ? [] : ['clear', 'cancel', 'accept'],
                 }),
                 textField: {
                     id: id + '-input',
                     required: required && !appliedUiSchemaOptions.hideRequiredAsterisk,
-                    autoFocus: appliedUiSchemaOptions.focus,
                     error: !isValid,
                     fullWidth: !appliedUiSchemaOptions.trim,
+                    variant: inputVariant,
                     inputProps: {
+                        autoFocus: appliedUiSchemaOptions.focus,
                         type: 'text',
+                        onFocus: onFocus,
+                        onBlur: onBlurHandler,
                     },
                     InputLabelProps: data ? { shrink: true } : undefined,
-                    onFocus: onFocus,
-                    onBlur: onBlurHandler,
                 },
             } }),
         React.createElement(FormHelperText, { error: !isValid && !showDescription }, firstFormHelperText),
@@ -952,6 +955,7 @@ var MaterialDateControl$1 = withJsonFormsControlProps(MaterialDateControl);
 
 const MaterialDateTimeControl = (props) => {
     const [focused, onFocus, onBlur] = useFocus();
+    const inputVariant = useInputVariant();
     const { id, description, errors, label, uischema, visible, enabled, required, path, handleChange, data, config, } = props;
     const appliedUiSchemaOptions = merge({}, config, uischema.options);
     const isValid = errors.length === 0;
@@ -966,6 +970,7 @@ const MaterialDateTimeControl = (props) => {
         'hours',
         'minutes',
     ];
+    const closeOnSelect = appliedUiSchemaOptions.closeOnSelect ?? true;
     const firstFormHelperText = showDescription
         ? description
         : !isValid
@@ -980,22 +985,23 @@ const MaterialDateTimeControl = (props) => {
         return null;
     }
     return (React.createElement(LocalizationProvider, { dateAdapter: AdapterDayjs },
-        React.createElement(DateTimePicker, { open: open, onOpen: () => setOpen(true), onClose: () => setOpen(false), key: key, label: label, value: value, onAccept: onChange, format: format, ampm: !!appliedUiSchemaOptions.ampm, views: views, disabled: !enabled, slotProps: {
-                actionBar: ({ wrapperVariant }) => ({
-                    actions: wrapperVariant === 'desktop' ? [] : ['clear', 'cancel', 'accept'],
+        React.createElement(DateTimePicker, { open: open, onOpen: () => setOpen(true), onClose: () => setOpen(false), key: key, label: label, value: value, onAccept: onChange, onChange: onChange, format: format, ampm: !!appliedUiSchemaOptions.ampm, views: views, closeOnSelect: closeOnSelect, disabled: !enabled, slotProps: {
+                actionBar: ({ pickerVariant }) => ({
+                    actions: pickerVariant === 'desktop' ? [] : ['clear', 'cancel', 'accept'],
                 }),
                 textField: {
                     id: id + '-input',
                     required: required && !appliedUiSchemaOptions.hideRequiredAsterisk,
-                    autoFocus: appliedUiSchemaOptions.focus,
                     error: !isValid,
                     fullWidth: !appliedUiSchemaOptions.trim,
+                    variant: inputVariant,
                     inputProps: {
+                        autoFocus: appliedUiSchemaOptions.focus,
                         type: 'text',
+                        onFocus: onFocus,
+                        onBlur: onBlurHandler,
                     },
                     InputLabelProps: data ? { shrink: true } : undefined,
-                    onFocus: onFocus,
-                    onBlur: onBlurHandler,
                 },
             } }),
         React.createElement(FormHelperText, { error: !isValid && !showDescription }, firstFormHelperText),
@@ -1116,6 +1122,7 @@ var MaterialTextControl$1 = withJsonFormsControlProps(MaterialTextControl);
 
 const MaterialTimeControl = (props) => {
     const [focused, onFocus, onBlur] = useFocus();
+    const inputVariant = useInputVariant();
     const { id, description, errors, label, uischema, visible, enabled, required, path, handleChange, data, config, } = props;
     const appliedUiSchemaOptions = merge({}, config, uischema.options);
     const isValid = errors.length === 0;
@@ -1125,6 +1132,7 @@ const MaterialTimeControl = (props) => {
     const format = appliedUiSchemaOptions.timeFormat ?? 'HH:mm';
     const saveFormat = appliedUiSchemaOptions.timeSaveFormat ?? defaultTimeFormat;
     const views = appliedUiSchemaOptions.views ?? ['hours', 'minutes'];
+    const closeOnSelect = appliedUiSchemaOptions.closeOnSelect ?? true;
     const firstFormHelperText = showDescription
         ? description
         : !isValid
@@ -1139,22 +1147,23 @@ const MaterialTimeControl = (props) => {
         return null;
     }
     return (React.createElement(LocalizationProvider, { dateAdapter: AdapterDayjs },
-        React.createElement(TimePicker, { open: open, onOpen: () => setOpen(true), onClose: () => setOpen(false), key: key, label: label, value: value, onAccept: onChange, format: format, ampm: !!appliedUiSchemaOptions.ampm, views: views, disabled: !enabled, slotProps: {
-                actionBar: ({ wrapperVariant }) => ({
-                    actions: wrapperVariant === 'desktop' ? [] : ['clear', 'cancel', 'accept'],
+        React.createElement(TimePicker, { open: open, onOpen: () => setOpen(true), onClose: () => setOpen(false), key: key, label: label, value: value, onAccept: onChange, onChange: onChange, format: format, ampm: !!appliedUiSchemaOptions.ampm, views: views, closeOnSelect: closeOnSelect, disabled: !enabled, slotProps: {
+                actionBar: ({ pickerVariant }) => ({
+                    actions: pickerVariant === 'desktop' ? [] : ['clear', 'cancel', 'accept'],
                 }),
                 textField: {
                     id: id + '-input',
                     required: required && !appliedUiSchemaOptions.hideRequiredAsterisk,
-                    autoFocus: appliedUiSchemaOptions.focus,
                     error: !isValid,
                     fullWidth: !appliedUiSchemaOptions.trim,
+                    variant: inputVariant,
                     inputProps: {
+                        autoFocus: appliedUiSchemaOptions.focus,
                         type: 'text',
+                        onBlur: onBlurHandler,
+                        onFocus: onFocus,
                     },
                     InputLabelProps: data ? { shrink: true } : undefined,
-                    onFocus: onFocus,
-                    onBlur: onBlurHandler,
                 },
             } }),
         React.createElement(FormHelperText, { error: !isValid && !showDescription }, firstFormHelperText),
@@ -1323,11 +1332,11 @@ const isSingleLevelCategorization = and(uiTypeIs('Categorization'), (uischema) =
 });
 const materialCategorizationTester = rankWith(1, isSingleLevelCategorization);
 const MaterialCategorizationLayoutRenderer = (props) => {
-    const { data, path, renderers, cells, schema, uischema, visible, enabled, selected, onChange, ajv, t, } = props;
+    const { data, path, renderers, cells, schema, uischema, visible, enabled, selected, onChange, config, ajv, t, } = props;
     const categorization = uischema;
     const [previousCategorization, setPreviousCategorization] = useState(uischema);
     const [activeCategory, setActiveCategory] = useState(selected ?? 0);
-    const categories = useMemo(() => categorization.elements.filter((category) => isVisible(category, data, undefined, ajv)), [categorization, data, ajv]);
+    const categories = useMemo(() => categorization.elements.filter((category) => isVisible(category, data, undefined, ajv, config)), [categorization, data, ajv, config]);
     if (categorization !== previousCategorization) {
         setActiveCategory(0);
         setPreviousCategorization(categorization);
@@ -1474,7 +1483,7 @@ const MaterialCategorizationStepperLayoutRenderer = (props) => {
     const buttonStyle = {
         marginRight: '1em',
     };
-    const categories = useMemo(() => categorization.elements.filter((category) => isVisible(category, data, undefined, ajv)), [categorization, data, ajv]);
+    const categories = useMemo(() => categorization.elements.filter((category) => isVisible(category, data, undefined, ajv, config)), [categorization, data, ajv, config]);
     const childProps = {
         elements: categories[activeCategory].elements,
         schema,