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

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

@@ -252,9 +252,10 @@ function BaseInputTemplate(props) {
     autoFocus: autofocus,
     placeholder: placeholder
   }, inputProps, {
-    list: schema.examples ? "examples_" + id : undefined
+    list: schema.examples ? utils.examplesId(id) : undefined,
+    "aria-describedby": utils.ariaDescribedByIds(id, !!schema.examples)
   })), schema.examples ? React__namespace.createElement("datalist", {
-    id: "examples_" + id
+    id: utils.examplesId(id)
   }, schema.examples.concat(schema["default"] ? [schema["default"]] : []).map(function (example) {
     return React__namespace.createElement("option", {
       key: example,
@@ -342,7 +343,7 @@ function FieldErrorTemplate(props) {
   if (errors.length === 0) {
     return null;
   }
-  var id = idSchema.$id + "__error";
+  var id = utils.errorId(idSchema);
   return React__default["default"].createElement(react.List, null, errors.map(function (error, i) {
     return React__default["default"].createElement(react.ListItem, {
       key: i
@@ -362,7 +363,7 @@ function FieldHelpTemplate(props) {
   if (!help) {
     return null;
   }
-  var id = idSchema.$id + "__help";
+  var id = utils.helpId(idSchema);
   return React__default["default"].createElement(react.FormHelperText, {
     id: id
   }, help);
@@ -372,6 +373,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,
@@ -399,6 +401,7 @@ function FieldTemplate(props) {
   }
   return React__default["default"].createElement(WrapIfAdditionalTemplate, {
     classNames: classNames,
+    style: style,
     disabled: disabled,
     id: id,
     label: label,
@@ -436,14 +439,14 @@ function ObjectFieldTemplate(props) {
   // Button templates are not overridden in the uiSchema
   var AddButton = registry.templates.ButtonTemplates.AddButton;
   return React__default["default"].createElement(React__default["default"].Fragment, null, (uiOptions.title || title) && React__default["default"].createElement(TitleFieldTemplate, {
-    id: idSchema.$id + "-title",
+    id: utils.titleId(idSchema),
     title: uiOptions.title || title,
     required: required,
     schema: schema,
     uiSchema: uiSchema,
     registry: registry
   }), (uiOptions.description || description) && React__default["default"].createElement(DescriptionFieldTemplate, {
-    id: idSchema.$id + "-description",
+    id: utils.descriptionId(idSchema),
     description: uiOptions.description || description,
     schema: schema,
     uiSchema: uiSchema,
@@ -498,6 +501,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,
@@ -513,7 +517,8 @@ function WrapIfAdditionalTemplate(props) {
   var additional = (utils.ADDITIONAL_PROPERTY_FLAG in schema);
   if (!additional) {
     return React__default["default"].createElement("div", {
-      className: classNames
+      className: classNames,
+      style: style
     }, children);
   }
   var keyLabel = label + " Key";
@@ -524,6 +529,7 @@ function WrapIfAdditionalTemplate(props) {
   return React__default["default"].createElement(react.Grid, {
     key: id + "-key",
     className: classNames,
+    style: style,
     alignItems: "center",
     gap: 2
   }, React__default["default"].createElement(react.GridItem, null, React__default["default"].createElement(react.FormControl, {
@@ -597,7 +603,8 @@ function DateElement(props) {
     schema: {
       type: "integer"
     },
-    value: value
+    value: value,
+    "aria-describedby": utils.ariaDescribedByIds(props.name)
   }));
 }
 var readyForChange = function readyForChange(state) {
@@ -781,7 +788,8 @@ function CheckboxWidget(props) {
     isDisabled: disabled || readonly,
     onChange: _onChange,
     onBlur: _onBlur,
-    onFocus: _onFocus
+    onFocus: _onFocus,
+    "aria-describedby": utils.ariaDescribedByIds(id)
   }, label && React__default["default"].createElement(react.Text, null, label)));
 }
 
@@ -805,6 +813,7 @@ function CheckboxesWidget(props) {
   var chakraProps = getChakra({
     uiSchema: uiSchema
   });
+  var checkboxesValues = Array.isArray(value) ? value : [value];
   var _onBlur = function _onBlur(_ref) {
     var value = _ref.target.value;
     return onBlur(id, value);
@@ -828,15 +837,16 @@ function CheckboxesWidget(props) {
     onChange: function onChange(option) {
       return _onChange(option);
     },
-    defaultValue: value
+    defaultValue: value,
+    "aria-describedby": utils.ariaDescribedByIds(id)
   }, React__default["default"].createElement(react.Stack, {
     direction: row ? "row" : "column"
   }, Array.isArray(enumOptions) && enumOptions.map(function (option) {
-    var checked = value.indexOf(option.value) !== -1;
+    var checked = checkboxesValues.includes(option.value);
     var itemDisabled = Array.isArray(enumDisabled) && enumDisabled.indexOf(option.value) !== -1;
     return React__default["default"].createElement(react.Checkbox, {
       key: option.value,
-      id: id + "-" + option.value,
+      id: utils.optionId(id, option),
       name: id,
       value: option.value,
       isChecked: checked,
@@ -888,7 +898,8 @@ function RadioWidget(_ref) {
     onBlur: _onBlur,
     onFocus: _onFocus,
     value: "" + value,
-    name: id
+    name: id,
+    "aria-describedby": utils.ariaDescribedByIds(id)
   }, React__default["default"].createElement(react.Stack, {
     direction: row ? "row" : "column"
   }, Array.isArray(enumOptions) && enumOptions.map(function (option) {
@@ -896,7 +907,7 @@ function RadioWidget(_ref) {
     return React__default["default"].createElement(react.Radio, {
       value: "" + option.value,
       key: option.value,
-      id: id + "-" + option.value,
+      id: utils.optionId(id, option),
       disabled: disabled || itemDisabled || readonly
     }, "" + option.label);
   }))));
@@ -946,7 +957,8 @@ function RangeWidget(_ref) {
     isDisabled: disabled || readonly,
     onChange: _onChange,
     onBlur: _onBlur,
-    onFocus: _onFocus
+    onFocus: _onFocus,
+    "aria-describedby": utils.ariaDescribedByIds(id)
   }), React__default["default"].createElement(react.SliderTrack, null, React__default["default"].createElement(react.SliderFilledTrack, null)), React__default["default"].createElement(react.SliderThumb, null)));
 }
 
@@ -1026,7 +1038,8 @@ function SelectWidget(props) {
     onChange: isMultiple ? _onMultiChange : _onChange,
     onFocus: _onFocus,
     autoFocus: autofocus,
-    value: formValue
+    value: formValue,
+    "aria-describedby": utils.ariaDescribedByIds(id)
   }));
 }
 
@@ -1081,7 +1094,8 @@ function TextareaWidget(_ref) {
     autoFocus: autofocus,
     onChange: _onChange,
     onBlur: _onBlur,
-    onFocus: _onFocus
+    onFocus: _onFocus,
+    "aria-describedby": utils.ariaDescribedByIds(id)
   }));
 }
 
@@ -1128,7 +1142,8 @@ function UpDownWidget(props) {
     value: value != null ? value : "",
     onChange: _onChange,
     onBlur: _onBlur,
-    onFocus: _onFocus
+    onFocus: _onFocus,
+    "aria-describedby": utils.ariaDescribedByIds(id)
   }, React__default["default"].createElement(react.NumberInputField, {
     id: id,
     name: id