@rjsf/semantic-ui 5.0.0-beta.16 → 5.0.0-beta.18

package/dist/semantic-ui.cjs.development.js

@@ -368,15 +368,16 @@ function BaseInputTemplate(props) {
     required: required,
     autoFocus: autofocus,
     disabled: disabled || readonly,
-    list: schema.examples ? "examples_" + id : undefined
+    list: schema.examples ? utils.examplesId(id) : undefined
   }, semanticProps, {
     value: value || value === 0 ? value : "",
     error: rawErrors.length > 0,
     onChange: _onChange,
     onBlur: _onBlur,
-    onFocus: _onFocus
+    onFocus: _onFocus,
+    "aria-describedby": utils.ariaDescribedByIds(id, !!schema.examples)
   })), schema.examples && /*#__PURE__*/React__default["default"].createElement("datalist", {
-    id: "examples_" + id
+    id: utils.examplesId(id)
   }, schema.examples.concat(schema["default"] ? [schema["default"]] : []).map(function (example) {
     return /*#__PURE__*/React__default["default"].createElement("option", {
       key: example,
@@ -513,7 +514,7 @@ function FieldHelpTemplate(props) {
   return null;
 }
 
-var _excluded = ["id", "children", "classNames", "displayLabel", "label", "errors", "help", "hidden", "rawDescription", "registry", "schema", "uiSchema"];
+var _excluded = ["id", "children", "classNames", "style", "displayLabel", "label", "errors", "help", "hidden", "rawDescription", "registry", "schema", "uiSchema"];
 /** The `FieldTemplate` component is the template used by `SchemaField` to render any field. It renders the field
  * content, (label, description, children, errors and help) inside of a `WrapIfAdditional` component.
  *
@@ -523,6 +524,7 @@ function FieldTemplate(props) {
   var id = props.id,
     children = props.children,
     classNames = props.classNames,
+    style = props.style,
     displayLabel = props.displayLabel,
     label = props.label,
     errors = props.errors,
@@ -548,6 +550,7 @@ function FieldTemplate(props) {
   }
   return /*#__PURE__*/React__default["default"].createElement(WrapIfAdditionalTemplate, _extends({
     classNames: classNames,
+    style: style,
     id: id,
     label: label,
     registry: registry,
@@ -564,7 +567,7 @@ function FieldTemplate(props) {
     wrap: wrapLabel,
     className: "sui-field-label"
   }, rawDescription && /*#__PURE__*/React__default["default"].createElement(DescriptionFieldTemplate, {
-    id: id + "-description",
+    id: utils.descriptionId(id),
     description: rawDescription,
     schema: schema,
     uiSchema: uiSchema,
@@ -599,14 +602,14 @@ function ObjectFieldTemplate(props) {
   var fieldTitle = uiOptions.title || title;
   var fieldDescription = uiOptions.description || description;
   return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, fieldTitle && /*#__PURE__*/React__default["default"].createElement(TitleFieldTemplate, {
-    id: idSchema.$id + "-title",
+    id: utils.titleId(idSchema),
     title: fieldTitle,
     required: required,
     schema: schema,
     uiSchema: uiSchema,
     registry: registry
   }), fieldDescription && /*#__PURE__*/React__default["default"].createElement(DescriptionFieldTemplate, {
-    id: idSchema.$id + "-description",
+    id: utils.descriptionId(idSchema),
     description: fieldDescription,
     schema: schema,
     uiSchema: uiSchema,
@@ -682,6 +685,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,
@@ -702,7 +706,8 @@ function WrapIfAdditionalTemplate(props) {
   var additional = (utils.ADDITIONAL_PROPERTY_FLAG in schema);
   if (!additional) {
     return /*#__PURE__*/React__default["default"].createElement("div", {
-      className: classNames
+      className: classNames,
+      style: style
     }, children);
   }
   var handleBlur = function handleBlur(_ref) {
@@ -711,6 +716,7 @@ function WrapIfAdditionalTemplate(props) {
   };
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: classNames,
+    style: style,
     key: id + "-key"
   }, /*#__PURE__*/React__default["default"].createElement(semanticUiReact.Grid, {
     columns: "equal"
@@ -825,24 +831,11 @@ function CheckboxWidget(props) {
     onBlur: _onBlur,
     onFocus: _onFocus,
     required: required,
-    label: label || ""
+    label: label || "",
+    "aria-describedby": utils.ariaDescribedByIds(id)
   }));
 }
 
-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);
-  });
-}
-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.
  *
@@ -868,6 +861,7 @@ function CheckboxesWidget(props) {
   var enumOptions = options.enumOptions,
     enumDisabled = options.enumDisabled,
     inline = options.inline;
+  var checkboxesValues = Array.isArray(value) ? value : [value];
   var title = schema.title;
   var semanticProps = getSemanticProps({
     options: options,
@@ -881,14 +875,10 @@ function CheckboxesWidget(props) {
     return function (_ref) {
       var checked = _ref.target.checked;
       // eslint-disable-next-line no-shadow
-      var all = enumOptions ? enumOptions.map(function (_ref2) {
-        var value = _ref2.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));
       }
     };
   };
@@ -904,7 +894,7 @@ function CheckboxesWidget(props) {
     grouped: true
   };
   return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, title && /*#__PURE__*/React__default["default"].createElement(TitleFieldTemplate, {
-    id: id + "-title",
+    id: utils.titleId(id),
     title: title,
     schema: schema,
     uiSchema: uiSchema,
@@ -913,10 +903,10 @@ function CheckboxesWidget(props) {
     id: id,
     name: id
   }, inlineOption), 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;
     return /*#__PURE__*/React__default["default"].createElement(semanticUiReact.Form.Checkbox, _extends({
-      id: id + "-" + option.value,
+      id: utils.optionId(id, option),
       name: id,
       key: option.value,
       label: option.label
@@ -927,7 +917,8 @@ function CheckboxesWidget(props) {
       autoFocus: autofocus && index === 0,
       onChange: _onChange(option),
       onBlur: _onBlur,
-      onFocus: _onFocus
+      onFocus: _onFocus,
+      "aria-describedby": utils.ariaDescribedByIds(id)
     }));
   })));
 }
@@ -980,7 +971,7 @@ function RadioWidget(props) {
     return /*#__PURE__*/React__default["default"].createElement(semanticUiReact.Form.Field, _extends({
       required: required,
       control: semanticUiReact.Radio,
-      id: id + "-" + option.value,
+      id: utils.optionId(id, option),
       name: id
     }, semanticProps, {
       onFocus: _onFocus,
@@ -991,7 +982,8 @@ function RadioWidget(props) {
       key: option.value,
       checked: value == option.value,
       onChange: _onChange,
-      disabled: disabled || itemDisabled || readonly
+      disabled: disabled || itemDisabled || readonly,
+      "aria-describedby": utils.ariaDescribedByIds(id)
     }));
   }));
 }
@@ -1047,7 +1039,8 @@ function RangeWidget(props) {
     error: rawErrors.length > 0,
     onChange: _onChange,
     onBlur: _onBlur,
-    onFocus: _onFocus
+    onFocus: _onFocus,
+    "aria-describedby": utils.ariaDescribedByIds(id)
   })), /*#__PURE__*/React__default["default"].createElement("span", null, value));
 }
 
@@ -1141,7 +1134,8 @@ function SelectWidget(props) {
     options: dropdownOptions,
     onChange: _onChange,
     onBlur: _onBlur,
-    onFocus: _onFocus
+    onFocus: _onFocus,
+    "aria-describedby": utils.ariaDescribedByIds(id)
   }));
 }
 
@@ -1203,7 +1197,8 @@ function TextareaWidget(props) {
     rows: options.rows || 5,
     onChange: _onChange,
     onBlur: _onBlur,
-    onFocus: _onFocus
+    onFocus: _onFocus,
+    "aria-describedby": utils.ariaDescribedByIds(id)
   }));
 }