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

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

@@ -1,4 +1,4 @@
-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';
@@ -319,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);
@@ -586,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);