@jsonforms/material-renderers 3.0.0 → 3.1.0-alpha.1

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

@@ -1,11 +1,11 @@
-import { createDefaultValue, Resolve, encode, Paths, formatErrorMessage, errorsAt, rankWith, isObjectControl, findUISchema, Generate, isAllOfControl, findMatchingUISchema, createCombinatorRenderInfos, isAnyOfControl, isOneOfControl, getAjv, and, uiTypeIs, schemaMatches, hasType, schemaSubPathMatches, or, isObjectArrayControl, isPrimitiveArrayControl, isObjectArray, computeLabel, composePaths, isBooleanControl, optionIs, isDescriptionHidden, showAsRequired, isEnumControl, isDateControl, isTimeControl, isDateTimeControl, isRangeControl, isIntegerControl, isNumberControl, isStringControl, isOneOfEnumControl, withIncreasedRank, isVisible, deriveLabelForUISchemaElement, update, moveUp, moveDown, getFirstPrimitiveProp, createId, removeId, isObjectArrayWithNesting, isNumberFormatControl, categorizationHasCategory } from '@jsonforms/core';
+import { createDefaultValue, Resolve, encode, Paths, formatErrorMessage, errorsAt, rankWith, isObjectControl, findUISchema, Generate, isAllOfControl, findMatchingUISchema, createCombinatorRenderInfos, isAnyOfControl, isOneOfControl, getAjv, and, uiTypeIs, schemaMatches, hasType, schemaSubPathMatches, or, isObjectArrayControl, isPrimitiveArrayControl, isObjectArray, computeLabel, composePaths, isBooleanControl, isDescriptionHidden, optionIs, showAsRequired, isEnumControl, isDateControl, isTimeControl, isDateTimeControl, isRangeControl, isIntegerControl, isNumberControl, isStringControl, isOneOfEnumControl, withIncreasedRank, isVisible, deriveLabelForUISchemaElement, createId, removeId, getFirstPrimitiveProp, update, moveUp, moveDown, isObjectArrayWithNesting, isNumberFormatControl, categorizationHasCategory } from '@jsonforms/core';
 import React, { useMemo, Fragment, useState, useCallback, useRef, useEffect } from 'react';
 import { DispatchCell, useJsonForms, withJsonFormsArrayLayoutProps, withJsonFormsDetailProps, JsonFormsDispatch, withJsonFormsAllOfProps, withJsonFormsAnyOfProps, withJsonFormsOneOfProps, withJsonFormsMultiEnumProps, withJsonFormsLabelProps, withJsonFormsMasterListItemProps, withJsonFormsControlProps, withJsonFormsEnumProps, withTranslateProps, Control, withJsonFormsOneOfEnumProps, withJsonFormsLayoutProps, withJsonFormsContext, withJsonFormsCellProps, withJsonFormsEnumCellProps, withJsonFormsOneOfEnumCellProps } from '@jsonforms/react';
 import isEmpty from 'lodash/isEmpty';
 import union from 'lodash/union';
 import startCase from 'lodash/startCase';
 import range from 'lodash/range';
-import { TableCell, styled as styled$1, Badge, Tooltip, TableRow, Grid, Typography, Hidden, IconButton, FormHelperText, Table, TableHead, TableBody, Dialog, DialogTitle, DialogContent, DialogContentText, DialogActions, Button, Tabs, Tab, Checkbox, TextField, Select, MenuItem, Input, useTheme, InputAdornment, FormControl, FormGroup, FormControlLabel, Toolbar, ListItem, ListItemAvatar, Avatar, ListItemText, ListItemSecondaryAction, List, Switch, InputLabel, Autocomplete, FormLabel, Slider, RadioGroup, Radio, Card, CardHeader, CardContent, AppBar, Accordion, AccordionSummary, AccordionDetails, Stepper, Step, StepButton } from '@mui/material';
+import { TableCell, styled as styled$1, Badge, Tooltip, TableRow, Grid, Typography, IconButton, FormHelperText, Hidden, Table, TableHead, TableBody, Dialog, DialogTitle, DialogContent, DialogContentText, DialogActions, Button, Tabs, Tab, Checkbox, TextField, Select, MenuItem, Input, useTheme, InputAdornment, FormControl, FormGroup, FormControlLabel, Toolbar, ListItem, ListItemAvatar, Avatar, ListItemText, ListItemSecondaryAction, List, Switch, InputLabel, Autocomplete, FormLabel, Slider, RadioGroup, Radio, Card, CardHeader, CardContent, AppBar, Accordion, AccordionSummary, AccordionDetails, Stepper, Step, StepButton } from '@mui/material';
 import DeleteIcon from '@mui/icons-material/Delete';
 import ArrowDownward from '@mui/icons-material/ArrowDownward';
 import ArrowUpward from '@mui/icons-material/ArrowUpward';
@@ -48,10 +48,9 @@ const TableToolbar = React.memo(({ numColumns, errors, label, path, addItem, sch
         React.createElement(Grid, { container: true, justifyContent: 'flex-start', alignItems: 'center', spacing: 2 },
             React.createElement(Grid, { item: true },
                 React.createElement(Typography, { variant: 'h6' }, label)),
-            React.createElement(Grid, { item: true },
-                React.createElement(Hidden, { smUp: errors.length === 0 },
-                    React.createElement(Grid, { item: true },
-                        React.createElement(ValidationIcon, { id: 'tooltip-validation', errorMessages: errors })))))),
+            React.createElement(Grid, { item: true }, errors.length !== 0 &&
+                React.createElement(Grid, { item: true },
+                    React.createElement(ValidationIcon, { id: 'tooltip-validation', errorMessages: errors }))))),
     enabled ? (React.createElement(NoBorderTableCell, { align: 'right', style: fixedCellSmall },
         React.createElement(Tooltip, { id: 'tooltip-add', title: `Add to ${label}`, placement: 'bottom' },
             React.createElement(IconButton, { "aria-label": `Add to ${label}`, onClick: addItem(path, createDefaultValue(schema)), size: 'large' },
@@ -320,11 +319,13 @@ const materialOneOfControlTester = rankWith(3, isOneOfControl);
 var MaterialOneOfRenderer$1 = withJsonFormsOneOfProps(MaterialOneOfRenderer);
 
 const MuiCheckbox = React.memo((props) => {
-    const { data, className, id, enabled, uischema, path, handleChange, config } = props;
+    const { data, className, id, enabled, uischema, path, handleChange, config, inputProps } = props;
     const appliedUiSchemaOptions = merge({}, config, uischema.options);
-    const inputProps = { autoFocus: !!appliedUiSchemaOptions.focus };
+    const inputPropsMerged = merge({}, inputProps, {
+        autoFocus: !!appliedUiSchemaOptions.focus
+    });
     const checked = !!data;
-    return (React.createElement(Checkbox, { checked: checked, onChange: (_ev, isChecked) => handleChange(path, isChecked), className: className, id: id, disabled: !enabled, inputProps: inputProps }));
+    return (React.createElement(Checkbox, { checked: checked, onChange: (_ev, isChecked) => handleChange(path, isChecked), className: className, id: id, disabled: !enabled, inputProps: inputPropsMerged }));
 });
 
 dayjs.extend(customParsing);
@@ -537,9 +538,9 @@ const ArrayLayoutToolbar = React.memo(({ label, errors, addItem, path, createDef
         React.createElement(Grid, { container: true, alignItems: 'center', justifyContent: 'space-between' },
             React.createElement(Grid, { item: true },
                 React.createElement(Typography, { variant: 'h6' }, label)),
-            React.createElement(Hidden, { smUp: errors.length === 0 },
+            errors.length !== 0 &&
                 React.createElement(Grid, { item: true },
-                    React.createElement(ValidationIcon, { id: 'tooltip-validation', errorMessages: errors }))),
+                    React.createElement(ValidationIcon, { id: 'tooltip-validation', errorMessages: errors })),
             React.createElement(Grid, { item: true },
                 React.createElement(Grid, { container: true },
                     React.createElement(Grid, { item: true },
@@ -587,24 +588,90 @@ const MaterialListWithDetailRenderer = ({ uischemas, schema, uischema, path, err
 const materialListWithDetailTester = rankWith(4, and(uiTypeIs('ListWithDetail'), isObjectArray));
 var MaterialListWithDetailRenderer$1 = withJsonFormsArrayLayoutProps(MaterialListWithDetailRenderer);
 
-const MaterialBooleanControl = ({ data, visible, label, id, enabled, uischema, schema, rootSchema, handleChange, errors, path, config }) => {
+const MaterialBooleanControl = ({ data, visible, label, id, enabled, uischema, schema, rootSchema, handleChange, errors, path, config, description }) => {
+    const isValid = errors.length === 0;
+    const appliedUiSchemaOptions = merge({}, config, uischema.options);
+    const showDescription = !isDescriptionHidden(visible, description,
+    false, appliedUiSchemaOptions.showUnfocusedDescription);
+    const showTooltip = !showDescription && !isDescriptionHidden(visible, description,
+    true,
+    true);
+    const firstFormHelperText = showDescription
+        ? description
+        : !isValid
+            ? errors
+            : null;
+    const secondFormHelperText = showDescription && !isValid ? errors : null;
+    const descriptionIds = [];
+    const tooltipId = `${id}-tip`;
+    const helpId1 = `${id}-help1`;
+    const helpId2 = `${id}-help2`;
+    if (showTooltip) {
+        descriptionIds.push(tooltipId);
+    }
+    if (firstFormHelperText) {
+        descriptionIds.push(helpId1);
+    }
+    if (secondFormHelperText) {
+        descriptionIds.push(helpId2);
+    }
+    const ariaDescribedBy = descriptionIds.join(' ');
     return (React.createElement(Hidden, { xsUp: !visible },
-        React.createElement(FormControlLabel, { label: label, id: id, control: React.createElement(MuiCheckbox, { id: `${id}-input`, isValid: isEmpty(errors), data: data, enabled: enabled, visible: visible, path: path, uischema: uischema, schema: schema, rootSchema: rootSchema, handleChange: handleChange, errors: errors, config: config }) })));
+        React.createElement(Tooltip, { id: tooltipId, title: (showTooltip) ? description : '' },
+            React.createElement(FormControlLabel, { label: label, id: id, control: React.createElement(MuiCheckbox, { id: `${id}-input`, isValid: isEmpty(errors), data: data, enabled: enabled, visible: visible, path: path, uischema: uischema, schema: schema, rootSchema: rootSchema, handleChange: handleChange, errors: errors, config: config, inputProps: {
+                        'aria-describedby': ariaDescribedBy
+                    } }) })),
+        React.createElement(FormHelperText, { id: helpId1, error: !isValid && !showDescription }, firstFormHelperText),
+        React.createElement(FormHelperText, { id: helpId2, error: !isValid }, secondFormHelperText)));
 };
 const materialBooleanControlTester = rankWith(2, isBooleanControl);
 var MaterialBooleanControl$1 = withJsonFormsControlProps(MaterialBooleanControl);
 
 const MuiToggle = React.memo((props) => {
-    const { data, className, id, enabled, uischema, path, handleChange, config } = props;
+    const { data, className, id, enabled, uischema, path, handleChange, config, inputProps } = props;
     const appliedUiSchemaOptions = merge({}, config, uischema.options);
-    const inputProps = { autoFocus: !!appliedUiSchemaOptions.focus };
+    const inputPropsMerged = merge({}, inputProps, {
+        autoFocus: !!appliedUiSchemaOptions.focus
+    });
     const checked = !!data;
-    return (React.createElement(Switch, { checked: checked, onChange: (_ev, isChecked) => handleChange(path, isChecked), className: className, id: id, disabled: !enabled, inputProps: inputProps }));
+    return (React.createElement(Switch, { checked: checked, onChange: (_ev, isChecked) => handleChange(path, isChecked), className: className, id: id, disabled: !enabled, inputProps: inputPropsMerged }));
 });
 
-const MaterialBooleanToggleControl = ({ data, visible, label, id, enabled, uischema, schema, rootSchema, handleChange, errors, path, config }) => {
+const MaterialBooleanToggleControl = ({ data, visible, label, id, enabled, uischema, schema, rootSchema, handleChange, errors, path, config, description }) => {
+    const isValid = errors.length === 0;
+    const appliedUiSchemaOptions = merge({}, config, uischema.options);
+    const showDescription = !isDescriptionHidden(visible, description,
+    false, appliedUiSchemaOptions.showUnfocusedDescription);
+    const showTooltip = !showDescription && !isDescriptionHidden(visible, description,
+    true,
+    true);
+    const firstFormHelperText = showDescription
+        ? description
+        : !isValid
+            ? errors
+            : null;
+    const secondFormHelperText = showDescription && !isValid ? errors : null;
+    const descriptionIds = [];
+    const tooltipId = `${id}-tip`;
+    const helpId1 = `${id}-help1`;
+    const helpId2 = `${id}-help2`;
+    if (showTooltip) {
+        descriptionIds.push(tooltipId);
+    }
+    if (firstFormHelperText) {
+        descriptionIds.push(helpId1);
+    }
+    if (secondFormHelperText) {
+        descriptionIds.push(helpId2);
+    }
+    const ariaDescribedBy = descriptionIds.join(' ');
     return (React.createElement(Hidden, { xsUp: !visible },
-        React.createElement(FormControlLabel, { label: label, id: id, control: React.createElement(MuiToggle, { id: `${id}-input`, isValid: isEmpty(errors), data: data, enabled: enabled, visible: visible, path: path, uischema: uischema, schema: schema, rootSchema: rootSchema, handleChange: handleChange, errors: errors, config: config }) })));
+        React.createElement(Tooltip, { id: tooltipId, title: (showTooltip) ? description : '' },
+            React.createElement(FormControlLabel, { label: label, id: id, control: React.createElement(MuiToggle, { id: `${id}-input`, isValid: isEmpty(errors), data: data, enabled: enabled, visible: visible, path: path, uischema: uischema, schema: schema, rootSchema: rootSchema, handleChange: handleChange, errors: errors, config: config, inputProps: {
+                        'aria-describedby': ariaDescribedBy
+                    } }) })),
+        React.createElement(FormHelperText, { id: helpId1, error: !isValid && !showDescription }, firstFormHelperText),
+        React.createElement(FormHelperText, { id: helpId2, error: !isValid }, secondFormHelperText)));
 };
 const materialBooleanToggleControlTester = rankWith(3, and(isBooleanControl, optionIs('toggle', true)));
 var MaterialBooleanToggleControl$1 = withJsonFormsControlProps(MaterialBooleanToggleControl);