@jsonforms/material-renderers 3.5.1 → 3.6.0-alpha.1

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

@@ -1,7 +1,7 @@
 import React, { useState, useCallback, useMemo, Fragment, useEffect } from 'react';
 import { rankWith, isAllOfControl, findMatchingUISchema, createCombinatorRenderInfos, Generate, isLayout, isAnyOfControl, createDefaultValue, Resolve, encode, Paths, formatErrorMessage, errorAt, or, isObjectArrayControl, isPrimitiveArrayControl, isDescriptionHidden, getAjv, and, uiTypeIs, schemaMatches, hasType, schemaSubPathMatches, resolveSchema, showAsRequired, isObjectControl, findUISchema, isOneOfControl, isObjectArray, computeLabel, composePaths, isBooleanControl, optionIs, isDateControl, defaultDateFormat, isDateTimeControl, defaultDateTimeFormat, isEnumControl, isIntegerControl, isTimeControl, isNumberControl, isOneOfEnumControl, isRangeControl, isStringControl, defaultTimeFormat, createId, removeId, update, moveUp, moveDown, computeChildLabel, withIncreasedRank, isVisible, deriveLabelForUISchemaElement, isObjectArrayWithNesting, isNumberFormatControl, categorizationHasCategory } from '@jsonforms/core';
 import { withJsonFormsAllOfProps, JsonFormsDispatch, withJsonFormsAnyOfProps, DispatchCell, useJsonForms, withJsonFormsArrayLayoutProps, withTranslateProps, withArrayTranslationProps, withJsonFormsMultiEnumProps, withJsonFormsDetailProps, withJsonFormsOneOfProps, withJsonFormsLabelProps, withJsonFormsMasterListItemProps, withJsonFormsControlProps, Control, withJsonFormsEnumProps, withJsonFormsOneOfEnumProps, withJsonFormsContext, withJsonFormsLayoutProps, withJsonFormsCellProps, withJsonFormsEnumCellProps, withJsonFormsOneOfEnumCellProps } from '@jsonforms/react';
-import { Dialog, DialogTitle, DialogContent, DialogContentText, DialogActions, Button, Tabs, Tab, TableCell, styled as styled$1, Badge, Tooltip, TableRow, Stack, Grid, Typography, FormHelperText, IconButton, Table, TableHead, TableBody, Autocomplete, TextField, Checkbox, useThemeProps, Input, FilledInput, OutlinedInput, useTheme, InputAdornment, Select, MenuItem, Switch, FormControl, FormLabel, FormGroup, FormControlLabel, Toolbar, ListItem, ListItemAvatar, Avatar, ListItemText, ListItemSecondaryAction, List, InputLabel, RadioGroup, Radio, Slider, Accordion, AccordionSummary, AccordionDetails, Card, CardHeader, CardContent, AppBar, Stepper, Step, StepButton } from '@mui/material';
+import { Dialog, DialogTitle, DialogContent, DialogContentText, DialogActions, Button, Tabs, Tab, TableCell, styled as styled$1, Badge, Tooltip, TableRow, Stack, Grid, Typography, FormHelperText, IconButton, Table, TableHead, TableBody, Autocomplete, TextField, Checkbox, useThemeProps, Input, FilledInput, OutlinedInput, useTheme, InputAdornment, Select, MenuItem, Switch, FormControl, FormLabel, FormGroup, FormControlLabel, Toolbar, ListItemButton, ListItemAvatar, Avatar, ListItemText, ListItemSecondaryAction, List, InputLabel, RadioGroup, Radio, Slider, Accordion, AccordionSummary, AccordionDetails, Card, CardHeader, CardContent, AppBar, Stepper, Step, StepButton } from '@mui/material';
 import omit from 'lodash/omit';
 import isEmpty from 'lodash/isEmpty';
 import union from 'lodash/union';
@@ -481,23 +481,23 @@ const i18nDefaults = {
 const toNumber$1 = (value) => value === '' ? undefined : parseInt(value, 10);
 const eventToValue$2 = (ev) => toNumber$1(ev.target.value);
 const MuiInputInteger = React.memo(function MuiInputInteger(props) {
-    const { data, className, id, enabled, uischema, path, handleChange, config, label, } = props;
+    const { data, className, id, enabled, uischema, isValid, path, handleChange, config, label, } = props;
     const InputComponent = useInputComponent();
     const inputProps = { step: '1' };
     const appliedUiSchemaOptions = merge({}, config, uischema.options);
     const [inputValue, onChange] = useDebouncedChange(handleChange, '', data, path, eventToValue$2);
-    return (React.createElement(InputComponent, { label: label, type: 'number', value: inputValue, onChange: onChange, className: className, id: id, disabled: !enabled, autoFocus: appliedUiSchemaOptions.focus, inputProps: inputProps, fullWidth: true }));
+    return (React.createElement(InputComponent, { label: label, type: 'number', value: inputValue, onChange: onChange, className: className, id: id, disabled: !enabled, autoFocus: appliedUiSchemaOptions.focus, inputProps: inputProps, fullWidth: true, error: !isValid }));
 });
 
 const toNumber = (value) => value === '' ? undefined : parseFloat(value);
 const eventToValue$1 = (ev) => toNumber(ev.target.value);
 const MuiInputNumber = React.memo(function MuiInputNumber(props) {
-    const { data, className, id, enabled, uischema, path, handleChange, config, label, } = props;
+    const { data, className, id, enabled, uischema, isValid, path, handleChange, config, label, } = props;
     const InputComponent = useInputComponent();
     const inputProps = { step: '0.1' };
     const appliedUiSchemaOptions = merge({}, config, uischema.options);
     const [inputValue, onChange] = useDebouncedChange(handleChange, '', data, path, eventToValue$1);
-    return (React.createElement(InputComponent, { type: 'number', label: label, value: inputValue, onChange: onChange, className: className, id: id, disabled: !enabled, autoFocus: appliedUiSchemaOptions.focus, inputProps: inputProps, fullWidth: true }));
+    return (React.createElement(InputComponent, { type: 'number', label: label, value: inputValue, onChange: onChange, className: className, id: id, disabled: !enabled, autoFocus: appliedUiSchemaOptions.focus, inputProps: inputProps, fullWidth: true, error: !isValid }));
 });
 
 const MuiInputNumberFormat = React.memo(function MuiInputNumberFormat(props) {
@@ -557,18 +557,18 @@ const MuiInputText = React.memo(function MuiInputText(props) {
 });
 
 const MuiInputTime = React.memo(function MuiInputTime(props) {
-    const { data, className, id, enabled, uischema, path, handleChange, config, label, } = props;
+    const { data, className, id, enabled, uischema, isValid, path, handleChange, config, label, } = props;
     const InputComponent = useInputComponent();
     const appliedUiSchemaOptions = merge({}, config, uischema.options);
     const [inputValue, onChange] = useDebouncedChange(handleChange, '', data, path);
-    return (React.createElement(InputComponent, { type: 'time', value: inputValue, onChange: onChange, className: className, id: id, label: label, disabled: !enabled, autoFocus: appliedUiSchemaOptions.focus, fullWidth: true }));
+    return (React.createElement(InputComponent, { type: 'time', value: inputValue, onChange: onChange, className: className, id: id, label: label, disabled: !enabled, autoFocus: appliedUiSchemaOptions.focus, fullWidth: true, error: !isValid }));
 });
 
 const MuiSelect = React.memo(function MuiSelect(props) {
-    const { data, className, id, enabled, schema, uischema, path, handleChange, options, config, label, t, multiple, } = props;
+    const { data, className, id, enabled, schema, uischema, isValid, path, handleChange, options, config, label, t, multiple, } = props;
     const appliedUiSchemaOptions = merge({}, config, uischema.options);
     const noneOptionLabel = useMemo(() => t('enum.none', i18nDefaults['enum.none'], { schema, uischema, path }), [t, schema, uischema, path]);
-    return (React.createElement(Select, { className: className, id: id, label: label, disabled: !enabled, autoFocus: appliedUiSchemaOptions.focus, value: data !== undefined ? data : '', onChange: (ev) => handleChange(path, ev.target.value || undefined), fullWidth: true, multiple: multiple || false }, [
+    return (React.createElement(Select, { className: className, id: id, label: label, disabled: !enabled, autoFocus: appliedUiSchemaOptions.focus, value: data !== undefined ? data : '', onChange: (ev) => handleChange(path, ev.target.value || undefined), fullWidth: true, multiple: multiple || false, error: !isValid }, [
         React.createElement(MenuItem, { value: '', key: 'jsonforms.enum.none' },
             React.createElement("em", null, noneOptionLabel)),
     ].concat(options.map((optionValue) => (React.createElement(MenuItem, { value: optionValue.value, key: optionValue.value }, optionValue.label))))));
@@ -703,7 +703,7 @@ const ArrayLayoutToolbar = React.memo(function ArrayLayoutToolbar({ label, descr
 });
 
 const ListWithDetailMasterItem = ({ index, childLabel, selected, enabled, handleSelect, removeItem, path, translations, disableRemove, }) => {
-    return (React.createElement(ListItem, { button: true, selected: selected, onClick: handleSelect(index) },
+    return (React.createElement(ListItemButton, { selected: selected, onClick: handleSelect(index) },
         React.createElement(ListItemAvatar, null,
             React.createElement(Avatar, { "aria-label": 'Index' }, index + 1)),
         React.createElement(ListItemText, { primary: childLabel }),