@jsonforms/material-renderers 3.2.0-alpha.1 → 3.2.0-alpha.3

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

@@ -1,6 +1,6 @@
 import React, { useState, useCallback, useMemo, Fragment, useEffect } from 'react';
 import { Hidden, Dialog, DialogTitle, DialogContent, DialogContentText, DialogActions, Button, Tabs, Tab, TableCell, styled as styled$1, Badge, Tooltip, TableRow, Grid, Typography, IconButton, FormHelperText, Table, TableHead, TableBody, Autocomplete, TextField, Checkbox, useThemeProps, Input, FilledInput, OutlinedInput, useTheme, InputAdornment, Select, MenuItem, Switch, FormControl, FormGroup, FormControlLabel, Toolbar, ListItem, ListItemAvatar, Avatar, ListItemText, ListItemSecondaryAction, List, InputLabel, FormLabel, RadioGroup, Radio, Slider, Accordion, AccordionSummary, AccordionDetails, Card, CardHeader, CardContent, AppBar, Stepper, Step, StepButton } from '@mui/material';
-import { rankWith, isAllOfControl, findMatchingUISchema, createCombinatorRenderInfos, Generate, isLayout, isAnyOfControl, createDefaultValue, Resolve, encode, Paths, formatErrorMessage, errorsAt, or, isObjectArrayControl, isPrimitiveArrayControl, isDescriptionHidden, getAjv, and, uiTypeIs, schemaMatches, hasType, schemaSubPathMatches, isObjectControl, findUISchema, isOneOfControl, isObjectArray, computeLabel, composePaths, showAsRequired, isBooleanControl, optionIs, isDateControl, isDateTimeControl, isEnumControl, isIntegerControl, isTimeControl, isNumberControl, isOneOfEnumControl, isRangeControl, isStringControl, createId, removeId, update, moveUp, moveDown, getFirstPrimitiveProp, withIncreasedRank, isVisible, deriveLabelForUISchemaElement, isObjectArrayWithNesting, isNumberFormatControl, categorizationHasCategory } from '@jsonforms/core';
+import { rankWith, isAllOfControl, findMatchingUISchema, createCombinatorRenderInfos, Generate, isLayout, isAnyOfControl, createDefaultValue, Resolve, encode, Paths, formatErrorMessage, errorsAt, or, isObjectArrayControl, isPrimitiveArrayControl, isDescriptionHidden, getAjv, and, uiTypeIs, schemaMatches, hasType, schemaSubPathMatches, resolveSchema, isObjectControl, findUISchema, isOneOfControl, isObjectArray, computeLabel, composePaths, showAsRequired, isBooleanControl, optionIs, isDateControl, isDateTimeControl, isEnumControl, isIntegerControl, isTimeControl, isNumberControl, isOneOfEnumControl, isRangeControl, isStringControl, createId, removeId, update, moveUp, moveDown, getFirstPrimitiveProp, withIncreasedRank, isVisible, deriveLabelForUISchemaElement, isObjectArrayWithNesting, isNumberFormatControl, categorizationHasCategory } from '@jsonforms/core';
 import { withJsonFormsAllOfProps, JsonFormsDispatch, withJsonFormsAnyOfProps, DispatchCell, useJsonForms, withJsonFormsArrayLayoutProps, withJsonFormsMultiEnumProps, withJsonFormsDetailProps, withJsonFormsOneOfProps, withJsonFormsLabelProps, withJsonFormsMasterListItemProps, withJsonFormsControlProps, Control, withJsonFormsEnumProps, withTranslateProps, withJsonFormsOneOfEnumProps, withJsonFormsContext, withJsonFormsLayoutProps, withJsonFormsCellProps, withJsonFormsEnumCellProps, withJsonFormsOneOfEnumCellProps } from '@jsonforms/react';
 import omit from 'lodash/omit';
 import isEmpty from 'lodash/isEmpty';
@@ -38,9 +38,9 @@ var MaterialAllOfRenderer$1 = withJsonFormsAllOfProps(MaterialAllOfRenderer);
 
 class CombinatorProperties extends React.Component {
     render() {
-        const { schema, combinatorKeyword, path } = this.props;
+        const { schema, combinatorKeyword, path, rootSchema } = this.props;
         const otherProps = omit(schema, combinatorKeyword);
-        const foundUISchema = Generate.uiSchema(otherProps, 'VerticalLayout');
+        const foundUISchema = Generate.uiSchema(otherProps, 'VerticalLayout', undefined, rootSchema);
         let isLayoutWithElements = false;
         if (foundUISchema !== null && isLayout(foundUISchema)) {
             isLayoutWithElements = foundUISchema.elements.length > 0;
@@ -70,7 +70,7 @@ const MaterialAnyOfRenderer = ({ handleChange, schema, rootSchema, indexOfFittin
     const handleTabChange = useCallback((_event, newIndex) => {
         if (isEmpty(data) ||
             typeof data ===
-                typeof createDefaultValue(anyOfRenderInfos[newIndex].schema)) {
+                typeof createDefaultValue(anyOfRenderInfos[newIndex].schema, rootSchema)) {
             setSelectedAnyOf(newIndex);
         }
         else {
@@ -79,7 +79,7 @@ const MaterialAnyOfRenderer = ({ handleChange, schema, rootSchema, indexOfFittin
         }
     }, [setConfirmDialogOpen, setSelectedAnyOf, data]);
     const openNewTab = (newIndex) => {
-        handleChange(path, createDefaultValue(anyOfRenderInfos[newIndex].schema));
+        handleChange(path, createDefaultValue(anyOfRenderInfos[newIndex].schema, rootSchema));
         setSelectedAnyOf(newIndex);
     };
     const confirm = useCallback(() => {
@@ -89,7 +89,7 @@ const MaterialAnyOfRenderer = ({ handleChange, schema, rootSchema, indexOfFittin
     const anyOf = 'anyOf';
     const anyOfRenderInfos = createCombinatorRenderInfos(schema.anyOf, rootSchema, anyOf, uischema, path, uischemas);
     return (React.createElement(Hidden, { xsUp: !visible },
-        React.createElement(CombinatorProperties, { schema: schema, combinatorKeyword: anyOf, path: path }),
+        React.createElement(CombinatorProperties, { schema: schema, combinatorKeyword: anyOf, path: path, rootSchema: rootSchema }),
         React.createElement(Tabs, { value: selectedAnyOf, onChange: handleTabChange }, anyOfRenderInfos.map((anyOfRenderInfo) => (React.createElement(Tab, { key: anyOfRenderInfo.label, label: anyOfRenderInfo.label })))),
         anyOfRenderInfos.map((anyOfRenderInfo, anyOfIndex) => selectedAnyOf === anyOfIndex && (React.createElement(JsonFormsDispatch, { key: anyOfIndex, schema: anyOfRenderInfo.schema, uischema: anyOfRenderInfo.uischema, path: path, renderers: renderers, cells: cells }))),
         React.createElement(TabSwitchConfirmDialog, { cancel: handleClose, confirm: confirm, id: 'anyOf-' + id, open: confirmDialogOpen, handleClose: handleClose })));
@@ -115,7 +115,7 @@ const fixedCellSmall = {
     paddingLeft: 0,
     paddingRight: 0,
 };
-const TableToolbar = React.memo(function TableToolbar({ numColumns, errors, label, path, addItem, schema, enabled, translations, }) {
+const TableToolbar = React.memo(function TableToolbar({ numColumns, errors, label, path, addItem, schema, enabled, translations, rootSchema, }) {
     return (React.createElement(TableRow, null,
         React.createElement(NoBorderTableCell, { colSpan: numColumns },
             React.createElement(Grid, { container: true, justifyContent: 'flex-start', alignItems: 'center', spacing: 2 },
@@ -125,7 +125,7 @@ const TableToolbar = React.memo(function TableToolbar({ numColumns, errors, labe
                     React.createElement(ValidationIcon, { id: 'tooltip-validation', errorMessages: errors })))))),
         enabled ? (React.createElement(NoBorderTableCell, { align: 'right', style: fixedCellSmall },
             React.createElement(Tooltip, { id: 'tooltip-add', title: translations.addTooltip, placement: 'bottom' },
-                React.createElement(IconButton, { "aria-label": translations.addAriaLabel, onClick: addItem(path, createDefaultValue(schema)), size: 'large' },
+                React.createElement(IconButton, { "aria-label": translations.addAriaLabel, onClick: addItem(path, createDefaultValue(schema, rootSchema)), size: 'large' },
                     React.createElement(AddIcon, null))))) : null));
 });
 
@@ -331,7 +331,7 @@ const MuiAutocomplete = (props) => {
             }, inputValue: inputValue, onInputChange: (_event, newInputValue) => {
                 setInputValue(newInputValue);
             }, autoHighlight: true, autoSelect: true, autoComplete: true, fullWidth: true, options: options, getOptionLabel: getOptionLabel || ((option) => option?.label), freeSolo: false, renderInput: (params) => {
-                return (React.createElement(TextField, Object.assign({ label: label, 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 })));
+                return (React.createElement(TextField, Object.assign({ label: label, type: 'text', inputProps: params.inputProps, inputRef: params.InputProps.ref, autoFocus: appliedUiSchemaOptions.focus, disabled: !enabled }, params, { id: id, required: required && !appliedUiSchemaOptions.hideRequiredAsterisk, error: !isValid, fullWidth: !appliedUiSchemaOptions.trim, InputLabelProps: data ? { shrink: true } : undefined, onFocus: onFocus, onBlur: onBlur, focused: focused })));
             }, renderOption: renderOption, filterOptions: filterOptions }),
         React.createElement(FormHelperText, { error: !isValid && !showDescription }, firstFormHelperText),
         React.createElement(FormHelperText, { error: !isValid }, secondFormHelperText)));
@@ -556,15 +556,21 @@ const hasOneOfItems = (schema) => schema.oneOf !== undefined &&
 const hasEnumItems = (schema) => schema.type === 'string' && schema.enum !== undefined;
 const materialEnumArrayRendererTester = rankWith(5, and(uiTypeIs('Control'), and(schemaMatches((schema) => hasType(schema, 'array') &&
     !Array.isArray(schema.items) &&
-    schema.uniqueItems === true), schemaSubPathMatches('items', (schema) => {
-    return hasOneOfItems(schema) || hasEnumItems(schema);
+    schema.uniqueItems === true), schemaSubPathMatches('items', (schema, rootSchema) => {
+    const resolvedSchema = schema.$ref
+        ? resolveSchema(rootSchema, schema.$ref, rootSchema)
+        : schema;
+    return hasOneOfItems(resolvedSchema) || hasEnumItems(resolvedSchema);
 }))));
 var MaterialEnumArrayRenderer$1 = withJsonFormsMultiEnumProps(MaterialEnumArrayRenderer);
 
 const MaterialObjectRenderer = ({ renderers, cells, uischemas, schema, label, path, visible, enabled, uischema, rootSchema, }) => {
     const detailUiSchema = useMemo(() => findUISchema(uischemas, schema, uischema.scope, path, () => isEmpty(path)
-        ? Generate.uiSchema(schema, 'VerticalLayout')
-        : { ...Generate.uiSchema(schema, 'Group'), label }, uischema, rootSchema), [uischemas, schema, uischema.scope, path, label, uischema, rootSchema]);
+        ? Generate.uiSchema(schema, 'VerticalLayout', undefined, rootSchema)
+        : {
+            ...Generate.uiSchema(schema, 'Group', undefined, rootSchema),
+            label,
+        }, uischema, rootSchema), [uischemas, schema, uischema.scope, path, label, uischema, rootSchema]);
     return (React.createElement(Hidden, { xsUp: !visible },
         React.createElement(JsonFormsDispatch, { visible: visible, enabled: enabled, schema: schema, uischema: detailUiSchema, path: path, renderers: renderers, cells: cells })));
 };
@@ -581,7 +587,7 @@ const MaterialOneOfRenderer = ({ handleChange, schema, path, renderers, cells, r
     }, [setConfirmDialogOpen]);
     const oneOfRenderInfos = createCombinatorRenderInfos(schema.oneOf, rootSchema, 'oneOf', uischema, path, uischemas);
     const openNewTab = (newIndex) => {
-        handleChange(path, createDefaultValue(oneOfRenderInfos[newIndex].schema));
+        handleChange(path, createDefaultValue(oneOfRenderInfos[newIndex].schema, rootSchema));
         setSelectedIndex(newIndex);
     };
     const confirm = useCallback(() => {
@@ -598,7 +604,7 @@ const MaterialOneOfRenderer = ({ handleChange, schema, path, renderers, cells, r
         }
     }, [setConfirmDialogOpen, setSelectedIndex, data]);
     return (React.createElement(Hidden, { xsUp: !visible },
-        React.createElement(CombinatorProperties, { schema: schema, combinatorKeyword: 'oneOf', path: path }),
+        React.createElement(CombinatorProperties, { schema: schema, combinatorKeyword: 'oneOf', path: path, rootSchema: rootSchema }),
         React.createElement(Tabs, { value: selectedIndex, onChange: handleTabChange }, oneOfRenderInfos.map((oneOfRenderInfo) => (React.createElement(Tab, { key: oneOfRenderInfo.label, label: oneOfRenderInfo.label })))),
         oneOfRenderInfos.map((oneOfRenderInfo, oneOfIndex) => selectedIndex === oneOfIndex && (React.createElement(JsonFormsDispatch, { key: oneOfIndex, schema: oneOfRenderInfo.schema, uischema: oneOfRenderInfo.uischema, path: path, renderers: renderers, cells: cells }))),
         React.createElement(TabSwitchConfirmDialog, { cancel: cancel, confirm: confirm, id: 'oneOf-' + id, open: confirmDialogOpen, handleClose: handleClose })));
@@ -653,7 +659,7 @@ const MaterialListWithDetailRenderer = ({ uischemas, schema, uischema, path, ena
         }
     }, [removeItems, setSelectedIndex]);
     const handleListItemClick = useCallback((index) => () => setSelectedIndex(index), [setSelectedIndex]);
-    const handleCreateDefaultValue = useCallback(() => createDefaultValue(schema), [createDefaultValue]);
+    const handleCreateDefaultValue = useCallback(() => createDefaultValue(schema, rootSchema), [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(() => {
@@ -953,11 +959,10 @@ const MaterialRadioGroup = (props) => {
     const isValid = errors.length === 0;
     const appliedUiSchemaOptions = merge({}, config, props.uischema.options);
     const showDescription = !isDescriptionHidden(visible, description, focused, appliedUiSchemaOptions.showUnfocusedDescription);
-    const onChange = (_ev, value) => handleChange(path, value);
     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 ?? '', row: true }, options.map((option) => (React.createElement(FormControlLabel, { value: option.value, key: option.label, control: React.createElement(Radio, { checked: data === option.value, onChange: () => handleChange(path, option.value) }), label: option.label, disabled: !enabled })))),
             React.createElement(FormHelperText, { error: !isValid }, !isValid ? errors : showDescription ? description : null))));
 };
 
@@ -1229,7 +1234,7 @@ var MaterialCategorizationLayout = withAjvProps(withTranslateProps(withJsonForms
 
 const MaterialArrayLayoutComponent = (props) => {
     const [expanded, setExpanded] = useState(false);
-    const innerCreateDefaultValue = useCallback(() => createDefaultValue(props.schema), [props.schema]);
+    const innerCreateDefaultValue = useCallback(() => createDefaultValue(props.schema, props.rootSchema), [props.schema]);
     const handleChange = useCallback((panel) => (_event, expandedPanel) => {
         setExpanded(expandedPanel ? panel : false);
     }, []);