@jsonforms/material-renderers 3.1.0-alpha.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
@@ -439,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"]);
@@ -733,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);