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

package/lib/controls/MaterialBooleanControl.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { RankedTester, ControlProps } from '@jsonforms/core';
-export declare const MaterialBooleanControl: ({ data, visible, label, id, enabled, uischema, schema, rootSchema, handleChange, errors, path, config }: ControlProps) => JSX.Element;
+export declare const MaterialBooleanControl: ({ data, visible, label, id, enabled, uischema, schema, rootSchema, handleChange, errors, path, config, description }: ControlProps) => JSX.Element;
 export declare const materialBooleanControlTester: RankedTester;
 declare const _default: React.ComponentType<import("@jsonforms/core").OwnPropsOfControl>;
 export default _default;

package/lib/controls/MaterialBooleanToggleControl.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { RankedTester, ControlProps } from '@jsonforms/core';
-export declare const MaterialBooleanToggleControl: ({ data, visible, label, id, enabled, uischema, schema, rootSchema, handleChange, errors, path, config }: ControlProps) => JSX.Element;
+export declare const MaterialBooleanToggleControl: ({ data, visible, label, id, enabled, uischema, schema, rootSchema, handleChange, errors, path, config, description }: ControlProps) => JSX.Element;
 export declare const materialBooleanToggleControlTester: RankedTester;
 declare const _default: React.ComponentType<import("@jsonforms/core").OwnPropsOfControl>;
 export default _default;

package/lib/controls/index.d.ts

@@ -15,8 +15,8 @@ import MaterialAnyOfStringOrEnumControl, { materialAnyOfStringOrEnumControlTeste
 import MaterialOneOfEnumControl, { materialOneOfEnumControlTester } from './MaterialOneOfEnumControl';
 import MaterialOneOfRadioGroupControl, { materialOneOfRadioGroupControlTester } from './MaterialOneOfRadioGroupControl';
 export declare const Unwrapped: {
-    MaterialBooleanControl: ({ data, visible, label, id, enabled, uischema, schema, rootSchema, handleChange, errors, path, config }: import("@jsonforms/core").ControlProps) => JSX.Element;
-    MaterialBooleanToggleControl: ({ data, visible, label, id, enabled, uischema, schema, rootSchema, handleChange, errors, path, config }: import("@jsonforms/core").ControlProps) => JSX.Element;
+    MaterialBooleanControl: ({ data, visible, label, id, enabled, uischema, schema, rootSchema, handleChange, errors, path, config, description }: import("@jsonforms/core").ControlProps) => JSX.Element;
+    MaterialBooleanToggleControl: ({ data, visible, label, id, enabled, uischema, schema, rootSchema, handleChange, errors, path, config, description }: import("@jsonforms/core").ControlProps) => JSX.Element;
     MaterialEnumControl: (props: import("@jsonforms/core").ControlProps & import("@jsonforms/core").OwnPropsOfEnum & import("../mui-controls/MuiAutocomplete").WithOptionLabel & import("@jsonforms/react").TranslateProps) => JSX.Element;
     MaterialNativeControl: (props: import("@jsonforms/core").ControlProps) => JSX.Element;
     MaterialDateControl: (props: import("@jsonforms/core").ControlProps) => JSX.Element;

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

@@ -52,7 +52,7 @@ var get__default = /*#__PURE__*/_interopDefaultLegacy(get);
 var ExpandMoreIcon__default = /*#__PURE__*/_interopDefaultLegacy(ExpandMoreIcon);
 var Input__default = /*#__PURE__*/_interopDefaultLegacy(Input);
 
-/*! *****************************************************************************
+/******************************************************************************
 Copyright (c) Microsoft Corporation.
 
 Permission to use, copy, modify, and/or distribute this software for any
@@ -138,10 +138,9 @@ var TableToolbar = React__default["default"].memo(function (_a) {
             React__default["default"].createElement(material.Grid, { container: true, justifyContent: 'flex-start', alignItems: 'center', spacing: 2 },
                 React__default["default"].createElement(material.Grid, { item: true },
                     React__default["default"].createElement(material.Typography, { variant: 'h6' }, label)),
-                React__default["default"].createElement(material.Grid, { item: true },
-                    React__default["default"].createElement(material.Hidden, { smUp: errors.length === 0 },
-                        React__default["default"].createElement(material.Grid, { item: true },
-                            React__default["default"].createElement(ValidationIcon, { id: 'tooltip-validation', errorMessages: errors })))))),
+                React__default["default"].createElement(material.Grid, { item: true }, errors.length !== 0 &&
+                    React__default["default"].createElement(material.Grid, { item: true },
+                        React__default["default"].createElement(ValidationIcon, { id: 'tooltip-validation', errorMessages: errors }))))),
         enabled ? (React__default["default"].createElement(NoBorderTableCell, { align: 'right', style: fixedCellSmall },
             React__default["default"].createElement(material.Tooltip, { id: 'tooltip-add', title: "Add to " + label, placement: 'bottom' },
                 React__default["default"].createElement(material.IconButton, { "aria-label": "Add to " + label, onClick: addItem(path, core.createDefaultValue(schema)), size: 'large' },
@@ -440,11 +439,13 @@ var materialOneOfControlTester = core.rankWith(3, core.isOneOfControl);
 var MaterialOneOfRenderer$1 = react.withJsonFormsOneOfProps(MaterialOneOfRenderer);
 
 var MuiCheckbox = React__default["default"].memo(function (props) {
-    var data = props.data, className = props.className, id = props.id, enabled = props.enabled, uischema = props.uischema, path = props.path, handleChange = props.handleChange, config = props.config;
+    var data = props.data, className = props.className, id = props.id, enabled = props.enabled, uischema = props.uischema, path = props.path, handleChange = props.handleChange, config = props.config, inputProps = props.inputProps;
     var appliedUiSchemaOptions = merge__default["default"]({}, config, uischema.options);
-    var inputProps = { autoFocus: !!appliedUiSchemaOptions.focus };
+    var inputPropsMerged = merge__default["default"]({}, inputProps, {
+        autoFocus: !!appliedUiSchemaOptions.focus
+    });
     var checked = !!data;
-    return (React__default["default"].createElement(material.Checkbox, { checked: checked, onChange: function (_ev, isChecked) { return handleChange(path, isChecked); }, className: className, id: id, disabled: !enabled, inputProps: inputProps }));
+    return (React__default["default"].createElement(material.Checkbox, { checked: checked, onChange: function (_ev, isChecked) { return handleChange(path, isChecked); }, className: className, id: id, disabled: !enabled, inputProps: inputPropsMerged }));
 });
 
 dayjs__default["default"].extend(customParsing__default["default"]);
@@ -679,9 +680,9 @@ var ArrayLayoutToolbar = React__default["default"].memo(function (_a) {
         React__default["default"].createElement(material.Grid, { container: true, alignItems: 'center', justifyContent: 'space-between' },
             React__default["default"].createElement(material.Grid, { item: true },
                 React__default["default"].createElement(material.Typography, { variant: 'h6' }, label)),
-            React__default["default"].createElement(material.Hidden, { smUp: errors.length === 0 },
+            errors.length !== 0 &&
                 React__default["default"].createElement(material.Grid, { item: true },
-                    React__default["default"].createElement(ValidationIcon, { id: 'tooltip-validation', errorMessages: errors }))),
+                    React__default["default"].createElement(ValidationIcon, { id: 'tooltip-validation', errorMessages: errors })),
             React__default["default"].createElement(material.Grid, { item: true },
                 React__default["default"].createElement(material.Grid, { container: true },
                     React__default["default"].createElement(material.Grid, { item: true },
@@ -734,25 +735,91 @@ var materialListWithDetailTester = core.rankWith(4, core.and(core.uiTypeIs('List
 var MaterialListWithDetailRenderer$1 = react.withJsonFormsArrayLayoutProps(MaterialListWithDetailRenderer);
 
 var MaterialBooleanControl = function (_a) {
-    var data = _a.data, visible = _a.visible, label = _a.label, id = _a.id, enabled = _a.enabled, uischema = _a.uischema, schema = _a.schema, rootSchema = _a.rootSchema, handleChange = _a.handleChange, errors = _a.errors, path = _a.path, config = _a.config;
+    var data = _a.data, visible = _a.visible, label = _a.label, id = _a.id, enabled = _a.enabled, uischema = _a.uischema, schema = _a.schema, rootSchema = _a.rootSchema, handleChange = _a.handleChange, errors = _a.errors, path = _a.path, config = _a.config, description = _a.description;
+    var isValid = errors.length === 0;
+    var appliedUiSchemaOptions = merge__default["default"]({}, config, uischema.options);
+    var showDescription = !core.isDescriptionHidden(visible, description,
+    false, appliedUiSchemaOptions.showUnfocusedDescription);
+    var showTooltip = !showDescription && !core.isDescriptionHidden(visible, description,
+    true,
+    true);
+    var firstFormHelperText = showDescription
+        ? description
+        : !isValid
+            ? errors
+            : null;
+    var secondFormHelperText = showDescription && !isValid ? errors : null;
+    var descriptionIds = [];
+    var tooltipId = id + "-tip";
+    var helpId1 = id + "-help1";
+    var helpId2 = id + "-help2";
+    if (showTooltip) {
+        descriptionIds.push(tooltipId);
+    }
+    if (firstFormHelperText) {
+        descriptionIds.push(helpId1);
+    }
+    if (secondFormHelperText) {
+        descriptionIds.push(helpId2);
+    }
+    var ariaDescribedBy = descriptionIds.join(' ');
     return (React__default["default"].createElement(material.Hidden, { xsUp: !visible },
-        React__default["default"].createElement(material.FormControlLabel, { label: label, id: id, control: React__default["default"].createElement(MuiCheckbox, { id: id + "-input", isValid: isEmpty__default["default"](errors), data: data, enabled: enabled, visible: visible, path: path, uischema: uischema, schema: schema, rootSchema: rootSchema, handleChange: handleChange, errors: errors, config: config }) })));
+        React__default["default"].createElement(material.Tooltip, { id: tooltipId, title: (showTooltip) ? description : '' },
+            React__default["default"].createElement(material.FormControlLabel, { label: label, id: id, control: React__default["default"].createElement(MuiCheckbox, { id: id + "-input", isValid: isEmpty__default["default"](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__default["default"].createElement(material.FormHelperText, { id: helpId1, error: !isValid && !showDescription }, firstFormHelperText),
+        React__default["default"].createElement(material.FormHelperText, { id: helpId2, error: !isValid }, secondFormHelperText)));
 };
 var materialBooleanControlTester = core.rankWith(2, core.isBooleanControl);
 var MaterialBooleanControl$1 = react.withJsonFormsControlProps(MaterialBooleanControl);
 
 var MuiToggle = React__default["default"].memo(function (props) {
-    var data = props.data, className = props.className, id = props.id, enabled = props.enabled, uischema = props.uischema, path = props.path, handleChange = props.handleChange, config = props.config;
+    var data = props.data, className = props.className, id = props.id, enabled = props.enabled, uischema = props.uischema, path = props.path, handleChange = props.handleChange, config = props.config, inputProps = props.inputProps;
     var appliedUiSchemaOptions = merge__default["default"]({}, config, uischema.options);
-    var inputProps = { autoFocus: !!appliedUiSchemaOptions.focus };
+    var inputPropsMerged = merge__default["default"]({}, inputProps, {
+        autoFocus: !!appliedUiSchemaOptions.focus
+    });
     var checked = !!data;
-    return (React__default["default"].createElement(material.Switch, { checked: checked, onChange: function (_ev, isChecked) { return handleChange(path, isChecked); }, className: className, id: id, disabled: !enabled, inputProps: inputProps }));
+    return (React__default["default"].createElement(material.Switch, { checked: checked, onChange: function (_ev, isChecked) { return handleChange(path, isChecked); }, className: className, id: id, disabled: !enabled, inputProps: inputPropsMerged }));
 });
 
 var MaterialBooleanToggleControl = function (_a) {
-    var data = _a.data, visible = _a.visible, label = _a.label, id = _a.id, enabled = _a.enabled, uischema = _a.uischema, schema = _a.schema, rootSchema = _a.rootSchema, handleChange = _a.handleChange, errors = _a.errors, path = _a.path, config = _a.config;
+    var data = _a.data, visible = _a.visible, label = _a.label, id = _a.id, enabled = _a.enabled, uischema = _a.uischema, schema = _a.schema, rootSchema = _a.rootSchema, handleChange = _a.handleChange, errors = _a.errors, path = _a.path, config = _a.config, description = _a.description;
+    var isValid = errors.length === 0;
+    var appliedUiSchemaOptions = merge__default["default"]({}, config, uischema.options);
+    var showDescription = !core.isDescriptionHidden(visible, description,
+    false, appliedUiSchemaOptions.showUnfocusedDescription);
+    var showTooltip = !showDescription && !core.isDescriptionHidden(visible, description,
+    true,
+    true);
+    var firstFormHelperText = showDescription
+        ? description
+        : !isValid
+            ? errors
+            : null;
+    var secondFormHelperText = showDescription && !isValid ? errors : null;
+    var descriptionIds = [];
+    var tooltipId = id + "-tip";
+    var helpId1 = id + "-help1";
+    var helpId2 = id + "-help2";
+    if (showTooltip) {
+        descriptionIds.push(tooltipId);
+    }
+    if (firstFormHelperText) {
+        descriptionIds.push(helpId1);
+    }
+    if (secondFormHelperText) {
+        descriptionIds.push(helpId2);
+    }
+    var ariaDescribedBy = descriptionIds.join(' ');
     return (React__default["default"].createElement(material.Hidden, { xsUp: !visible },
-        React__default["default"].createElement(material.FormControlLabel, { label: label, id: id, control: React__default["default"].createElement(MuiToggle, { id: id + "-input", isValid: isEmpty__default["default"](errors), data: data, enabled: enabled, visible: visible, path: path, uischema: uischema, schema: schema, rootSchema: rootSchema, handleChange: handleChange, errors: errors, config: config }) })));
+        React__default["default"].createElement(material.Tooltip, { id: tooltipId, title: (showTooltip) ? description : '' },
+            React__default["default"].createElement(material.FormControlLabel, { label: label, id: id, control: React__default["default"].createElement(MuiToggle, { id: id + "-input", isValid: isEmpty__default["default"](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__default["default"].createElement(material.FormHelperText, { id: helpId1, error: !isValid && !showDescription }, firstFormHelperText),
+        React__default["default"].createElement(material.FormHelperText, { id: helpId2, error: !isValid }, secondFormHelperText)));
 };
 var materialBooleanToggleControlTester = core.rankWith(3, core.and(core.isBooleanControl, core.optionIs('toggle', true)));
 var MaterialBooleanToggleControl$1 = react.withJsonFormsControlProps(MaterialBooleanToggleControl);