@rjsf/mui 5.0.0-beta.16 → 5.0.0-beta.18

package/dist/mui.cjs.development.js

@@ -95,11 +95,11 @@ function _objectWithoutPropertiesLoose(source, excluded) {
   return target;
 }
 
-var _excluded$3 = ["uiSchema", "registry"];
+var _excluded$4 = ["uiSchema", "registry"];
 /** The `AddButton` renders a button that represent the `Add` action on a form
  */
 function AddButton(_ref) {
-  var props = _objectWithoutPropertiesLoose(_ref, _excluded$3);
+  var props = _objectWithoutPropertiesLoose(_ref, _excluded$4);
   return /*#__PURE__*/React__default["default"].createElement(IconButton__default["default"], _extends({
     title: "Add Item"
   }, props, {
@@ -173,7 +173,7 @@ function ArrayFieldItemTemplate(props) {
   })));
 }
 
-var _excluded$2 = ["key"];
+var _excluded$3 = ["key"];
 /** The `ArrayFieldTemplate` component is the template used to render all items in an array.
  *
  * @param props - The `ArrayFieldTemplateItemType` props for the component
@@ -218,7 +218,7 @@ function ArrayFieldTemplate(props) {
     key: "array-item-list-" + idSchema.$id
   }, items && items.map(function (_ref) {
     var key = _ref.key,
-      itemProps = _objectWithoutPropertiesLoose(_ref, _excluded$2);
+      itemProps = _objectWithoutPropertiesLoose(_ref, _excluded$3);
     return /*#__PURE__*/React__default["default"].createElement(ArrayFieldItemTemplate, _extends({
       key: key
     }, itemProps));
@@ -238,7 +238,7 @@ function ArrayFieldTemplate(props) {
   })))))));
 }
 
-var _excluded$1 = ["id", "placeholder", "required", "readonly", "disabled", "type", "label", "value", "onChange", "onBlur", "onFocus", "autofocus", "options", "schema", "uiSchema", "rawErrors", "formContext", "registry"],
+var _excluded$2 = ["id", "placeholder", "required", "readonly", "disabled", "type", "label", "value", "onChange", "onBlur", "onFocus", "autofocus", "options", "schema", "uiSchema", "rawErrors", "formContext", "registry"],
   _excluded2$1 = ["step", "min", "max"];
 /** The `BaseInputTemplate` is the template to use to render the basic `<input>` component for the `core` theme.
  * It is used as the template for rendering many of the <input> based widgets that differ by `type` and callbacks only.
@@ -265,7 +265,7 @@ function BaseInputTemplate(props) {
     _props$rawErrors = props.rawErrors,
     rawErrors = _props$rawErrors === void 0 ? [] : _props$rawErrors,
     registry = props.registry,
-    textFieldProps = _objectWithoutPropertiesLoose(props, _excluded$1);
+    textFieldProps = _objectWithoutPropertiesLoose(props, _excluded$2);
   var inputProps = utils.getInputProps(schema, type, options);
   // Now we need to pull out the step, min, max into an inner `inputProps` for material-ui
   var step = inputProps.step,
@@ -278,7 +278,7 @@ function BaseInputTemplate(props) {
       min: min,
       max: max
     }, schema.examples ? {
-      list: "examples_" + id
+      list: utils.examplesId(id)
     } : undefined)
   }, rest);
   var _onChange = function _onChange(_ref) {
@@ -309,8 +309,10 @@ function BaseInputTemplate(props) {
     onChange: _onChange,
     onBlur: _onBlur,
     onFocus: _onFocus
-  }, textFieldProps)), schema.examples && /*#__PURE__*/React__default["default"].createElement("datalist", {
-    id: "examples_" + id
+  }, textFieldProps, {
+    "aria-describedby": utils.ariaDescribedByIds(id, !!schema.examples)
+  })), schema.examples && /*#__PURE__*/React__default["default"].createElement("datalist", {
+    id: utils.examplesId(id)
   }, schema.examples.concat(schema["default"] ? [schema["default"]] : []).map(function (example) {
     return /*#__PURE__*/React__default["default"].createElement("option", {
       key: example,
@@ -364,12 +366,12 @@ function ErrorList(_ref) {
   }))));
 }
 
-var _excluded = ["icon", "color", "uiSchema", "registry"],
+var _excluded$1 = ["icon", "color", "uiSchema", "registry"],
   _excluded2 = ["iconType"];
 function MuiIconButton(props) {
   var icon = props.icon,
     color = props.color,
-    otherProps = _objectWithoutPropertiesLoose(props, _excluded);
+    otherProps = _objectWithoutPropertiesLoose(props, _excluded$1);
   return /*#__PURE__*/React__default["default"].createElement(IconButton__default["default"], _extends({}, otherProps, {
     size: "small",
     color: color
@@ -417,7 +419,7 @@ function FieldErrorTemplate(props) {
   if (errors.length === 0) {
     return null;
   }
-  var id = idSchema.$id + "__error";
+  var id = utils.errorId(idSchema);
   return /*#__PURE__*/React__default["default"].createElement(List__default["default"], {
     dense: true,
     disablePadding: true
@@ -441,7 +443,7 @@ function FieldHelpTemplate(props) {
   if (!help) {
     return null;
   }
-  var id = idSchema.$id + "__help";
+  var id = utils.helpId(idSchema);
   return /*#__PURE__*/React__default["default"].createElement(FormHelperText__default["default"], {
     id: id
   }, help);
@@ -456,6 +458,7 @@ function FieldTemplate(props) {
   var id = props.id,
     children = props.children,
     classNames = props.classNames,
+    style = props.style,
     disabled = props.disabled,
     displayLabel = props.displayLabel,
     hidden = props.hidden,
@@ -483,6 +486,7 @@ function FieldTemplate(props) {
   }
   return /*#__PURE__*/React__default["default"].createElement(WrapIfAdditionalTemplate, {
     classNames: classNames,
+    style: style,
     disabled: disabled,
     id: id,
     label: label,
@@ -528,14 +532,14 @@ function ObjectFieldTemplate(props) {
   // Button templates are not overridden in the uiSchema
   var AddButton = registry.templates.ButtonTemplates.AddButton;
   return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, (uiOptions.title || title) && /*#__PURE__*/React__default["default"].createElement(TitleFieldTemplate, {
-    id: idSchema.$id + "-title",
+    id: utils.titleId(idSchema),
     title: title,
     required: required,
     schema: schema,
     uiSchema: uiSchema,
     registry: registry
   }), (uiOptions.description || description) && /*#__PURE__*/React__default["default"].createElement(DescriptionFieldTemplate, {
-    id: idSchema.$id + "-description",
+    id: utils.descriptionId(idSchema),
     description: uiOptions.description || description,
     schema: schema,
     uiSchema: uiSchema,
@@ -618,6 +622,7 @@ function TitleField(_ref) {
 function WrapIfAdditionalTemplate(props) {
   var children = props.children,
     classNames = props.classNames,
+    style = props.style,
     disabled = props.disabled,
     id = props.id,
     label = props.label,
@@ -640,7 +645,8 @@ function WrapIfAdditionalTemplate(props) {
   };
   if (!additional) {
     return /*#__PURE__*/React__default["default"].createElement("div", {
-      className: classNames
+      className: classNames,
+      style: style
     }, children);
   }
   var handleBlur = function handleBlur(_ref) {
@@ -652,7 +658,8 @@ function WrapIfAdditionalTemplate(props) {
     key: id + "-key",
     alignItems: "center",
     spacing: 2,
-    className: classNames
+    className: classNames,
+    style: style
   }, /*#__PURE__*/React__default["default"].createElement(Grid__default["default"], {
     item: true,
     xs: true
@@ -746,26 +753,13 @@ function CheckboxWidget(props) {
       autoFocus: autofocus,
       onChange: _onChange,
       onBlur: _onBlur,
-      onFocus: _onFocus
+      onFocus: _onFocus,
+      "aria-describedby": utils.ariaDescribedByIds(id)
     }),
     label: label || ""
   });
 }
 
-var selectValue = function selectValue(value, selected, all) {
-  var at = all.indexOf(value);
-  var updated = selected.slice(0, at).concat(value, selected.slice(at));
-  // As inserting values at predefined index positions doesn't work with empty
-  // arrays, we need to reorder the updated selection to match the initial order
-  return updated.sort(function (a, b) {
-    return all.indexOf(a) > all.indexOf(b);
-  });
-};
-var deselectValue = function deselectValue(value, selected) {
-  return selected.filter(function (v) {
-    return v !== value;
-  });
-};
 /** The `CheckboxesWidget` is a widget for rendering checkbox groups.
  *  It is typically used to represent an array of enums.
  *
@@ -787,26 +781,23 @@ function CheckboxesWidget(_ref) {
   var enumOptions = options.enumOptions,
     enumDisabled = options.enumDisabled,
     inline = options.inline;
+  var checkboxesValues = Array.isArray(value) ? value : [value];
   var _onChange = function _onChange(option) {
     return function (_ref2) {
       var checked = _ref2.target.checked;
-      var all = enumOptions.map(function (_ref3) {
-        var value = _ref3.value;
-        return value;
-      });
       if (checked) {
-        onChange(selectValue(option.value, value, all));
+        onChange(utils.enumOptionsSelectValue(option.value, checkboxesValues, enumOptions));
       } else {
-        onChange(deselectValue(option.value, value));
+        onChange(utils.enumOptionsDeselectValue(option.value, checkboxesValues));
       }
     };
   };
-  var _onBlur = function _onBlur(_ref4) {
-    var value = _ref4.target.value;
+  var _onBlur = function _onBlur(_ref3) {
+    var value = _ref3.target.value;
     return onBlur(id, value);
   };
-  var _onFocus = function _onFocus(_ref5) {
-    var value = _ref5.target.value;
+  var _onFocus = function _onFocus(_ref4) {
+    var value = _ref4.target.value;
     return onFocus(id, value);
   };
   return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(FormLabel__default["default"], {
@@ -816,17 +807,18 @@ function CheckboxesWidget(_ref) {
     id: id,
     row: !!inline
   }, Array.isArray(enumOptions) && enumOptions.map(function (option, index) {
-    var checked = value.indexOf(option.value) !== -1;
+    var checked = checkboxesValues.includes(option.value);
     var itemDisabled = Array.isArray(enumDisabled) && enumDisabled.indexOf(option.value) !== -1;
     var checkbox = /*#__PURE__*/React__default["default"].createElement(Checkbox__default["default"], {
-      id: id + "-" + option.value,
+      id: utils.optionId(id, option),
       name: id,
       checked: checked,
       disabled: disabled || itemDisabled || readonly,
       autoFocus: autofocus && index === 0,
       onChange: _onChange(option),
       onBlur: _onBlur,
-      onFocus: _onFocus
+      onFocus: _onFocus,
+      "aria-describedby": utils.ariaDescribedByIds(id)
     });
     return /*#__PURE__*/React__default["default"].createElement(FormControlLabel__default["default"], {
       control: checkbox,
@@ -918,13 +910,14 @@ function RadioWidget(_ref) {
     row: row,
     onChange: _onChange,
     onBlur: _onBlur,
-    onFocus: _onFocus
+    onFocus: _onFocus,
+    "aria-describedby": utils.ariaDescribedByIds(id)
   }, Array.isArray(enumOptions) && enumOptions.map(function (option) {
     var itemDisabled = Array.isArray(enumDisabled) && enumDisabled.indexOf(option.value) !== -1;
     var radio = /*#__PURE__*/React__default["default"].createElement(FormControlLabel__default["default"], {
       control: /*#__PURE__*/React__default["default"].createElement(Radio__default["default"], {
         name: id,
-        id: id + "-" + option.value,
+        id: utils.optionId(id, option),
         color: "primary"
       }),
       label: "" + option.label,
@@ -979,9 +972,12 @@ function RangeWidget(props) {
     onBlur: _onBlur,
     onFocus: _onFocus,
     valueLabelDisplay: "auto"
-  }, sliderProps)));
+  }, sliderProps, {
+    "aria-describedby": utils.ariaDescribedByIds(id)
+  })));
 }
 
+var _excluded = ["schema", "id", "options", "label", "required", "disabled", "placeholder", "readonly", "value", "multiple", "autofocus", "onChange", "onBlur", "onFocus", "rawErrors", "registry", "uiSchema", "hideError", "formContext"];
 /** The `SelectWidget` is a widget for rendering dropdowns.
  *  It is typically used with string properties constrained with enum options.
  *
@@ -994,6 +990,7 @@ function SelectWidget(_ref) {
     label = _ref.label,
     required = _ref.required,
     disabled = _ref.disabled,
+    placeholder = _ref.placeholder,
     readonly = _ref.readonly,
     value = _ref.value,
     multiple = _ref.multiple,
@@ -1002,10 +999,13 @@ function SelectWidget(_ref) {
     onBlur = _ref.onBlur,
     onFocus = _ref.onFocus,
     _ref$rawErrors = _ref.rawErrors,
-    rawErrors = _ref$rawErrors === void 0 ? [] : _ref$rawErrors;
+    rawErrors = _ref$rawErrors === void 0 ? [] : _ref$rawErrors,
+    textFieldProps = _objectWithoutPropertiesLoose(_ref, _excluded);
   var enumOptions = options.enumOptions,
     enumDisabled = options.enumDisabled;
+  multiple = typeof multiple === "undefined" ? false : !!multiple;
   var emptyValue = multiple ? [] : "";
+  var isEmpty = typeof value === "undefined" || multiple && value.length < 1 || !multiple && value === emptyValue;
   var _onChange = function _onChange(_ref2) {
     var value = _ref2.target.value;
     return onChange(utils.processSelectValue(schema, value, options));
@@ -1018,26 +1018,30 @@ function SelectWidget(_ref) {
     var value = _ref4.target.value;
     return onFocus(id, utils.processSelectValue(schema, value, options));
   };
-  return /*#__PURE__*/React__default["default"].createElement(TextField__default["default"], {
+  return /*#__PURE__*/React__default["default"].createElement(TextField__default["default"], _extends({
     id: id,
     name: id,
     label: label || schema.title,
-    select: true,
-    value: typeof value === "undefined" ? emptyValue : value,
+    value: isEmpty ? emptyValue : value,
     required: required,
     disabled: disabled || readonly,
     autoFocus: autofocus,
+    placeholder: placeholder,
     error: rawErrors.length > 0,
     onChange: _onChange,
     onBlur: _onBlur,
-    onFocus: _onFocus,
-    InputLabelProps: {
-      shrink: true
-    },
-    SelectProps: {
-      multiple: typeof multiple === "undefined" ? false : multiple
-    }
-  }, enumOptions.map(function (_ref5, i) {
+    onFocus: _onFocus
+  }, textFieldProps, {
+    select // Apply this and the following props after the potential overrides defined in textFieldProps
+    : true,
+    InputLabelProps: _extends({}, textFieldProps.InputLabelProps, {
+      shrink: !isEmpty
+    }),
+    SelectProps: _extends({}, textFieldProps.SelectProps, {
+      multiple: multiple
+    }),
+    "aria-describedby": utils.ariaDescribedByIds(id)
+  }), enumOptions.map(function (_ref5, i) {
     var value = _ref5.value,
       label = _ref5.label;
     var disabled = enumDisabled && enumDisabled.indexOf(value) != -1;