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

package/dist/antd.cjs.development.js

@@ -290,9 +290,10 @@ function BaseInputTemplate(props) {
     onFocus: !readonly ? handleFocus : undefined,
     placeholder: placeholder,
     style: INPUT_STYLE$2,
-    list: schema.examples ? "examples_" + id : undefined
+    list: schema.examples ? utils.examplesId(id) : undefined
   }, inputProps, {
-    value: value
+    value: value,
+    "aria-describedby": utils.ariaDescribedByIds(id, !!schema.examples)
   })) : /*#__PURE__*/React__default["default"].createElement(Input__default["default"], _extends({
     disabled: disabled || readonlyAsDisabled && readonly,
     id: id,
@@ -302,12 +303,13 @@ function BaseInputTemplate(props) {
     onFocus: !readonly ? handleFocus : undefined,
     placeholder: placeholder,
     style: INPUT_STYLE$2,
-    list: schema.examples ? "examples_" + id : undefined
+    list: schema.examples ? utils.examplesId(id) : undefined
   }, inputProps, {
-    value: value
+    value: value,
+    "aria-describedby": utils.ariaDescribedByIds(id, !!schema.examples)
   }));
   return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, input, 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,
@@ -413,7 +415,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("div", {
     id: id
   }, errors.map(function (error) {
@@ -437,6 +439,7 @@ var VERTICAL_WRAPPER_COL$1 = {
 function FieldTemplate(props) {
   var children = props.children,
     classNames = props.classNames,
+    style = props.style,
     description = props.description,
     disabled = props.disabled,
     displayLabel = props.displayLabel,
@@ -471,6 +474,7 @@ function FieldTemplate(props) {
   }
   return /*#__PURE__*/React__default["default"].createElement(WrapIfAdditionalTemplate, {
     classNames: classNames,
+    style: style,
     disabled: disabled,
     id: id,
     label: label,
@@ -585,9 +589,9 @@ function ObjectFieldTemplate(props) {
       className: labelColClassName,
       span: 24
     }, /*#__PURE__*/React__default["default"].createElement(TitleFieldTemplate, {
-      id: idSchema.$id + "-title",
-      required: required,
+      id: utils.titleId(idSchema),
       title: uiOptions.title || title,
+      required: required,
       schema: schema,
       uiSchema: uiSchema,
       registry: registry
@@ -595,8 +599,8 @@ function ObjectFieldTemplate(props) {
       span: 24,
       style: DESCRIPTION_COL_STYLE
     }, /*#__PURE__*/React__default["default"].createElement(DescriptionFieldTemplate, {
+      id: utils.descriptionId(idSchema),
       description: uiOptions.description || description,
-      id: idSchema.$id + "-description",
       schema: schema,
       uiSchema: uiSchema,
       registry: registry
@@ -699,6 +703,7 @@ function WrapIfAdditionalTemplate(props) {
   var _extends2;
   var children = props.children,
     classNames = props.classNames,
+    style = props.style,
     disabled = props.disabled,
     id = props.id,
     label = props.label,
@@ -728,7 +733,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) {
@@ -741,7 +747,8 @@ function WrapIfAdditionalTemplate(props) {
     block: true
   }), _extends2));
   return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames
+    className: classNames,
+    style: style
   }, /*#__PURE__*/React__default["default"].createElement(Row__default["default"], {
     align: toolbarAlign,
     gutter: rowGutter
@@ -929,7 +936,8 @@ function AltDateWidget(props) {
       },
       value: elemProps.value,
       registry: registry,
-      label: ""
+      label: "",
+      "aria-describedby": utils.ariaDescribedByIds(id)
     });
   };
   return /*#__PURE__*/React__default["default"].createElement(Row__default["default"], {
@@ -1034,18 +1042,18 @@ function CheckboxesWidget(_ref) {
     name: id,
     onChange: !readonly ? handleChange : undefined,
     value: value
-  }, extraProps), Array.isArray(enumOptions) && enumOptions.map(function (_ref4, i) {
-    var optionValue = _ref4.value,
-      optionLabel = _ref4.label;
+  }, extraProps, {
+    "aria-describedby": utils.ariaDescribedByIds(id)
+  }), Array.isArray(enumOptions) && enumOptions.map(function (option, i) {
     return /*#__PURE__*/React__default["default"].createElement("span", {
-      key: optionValue
+      key: option.value
     }, /*#__PURE__*/React__default["default"].createElement(Checkbox__default["default"], {
-      id: id + "-" + optionValue,
+      id: utils.optionId(id, option),
       name: id,
       autoFocus: i === 0 ? autofocus : false,
       disabled: Array.isArray(enumDisabled) && enumDisabled.indexOf(value) !== -1,
-      value: optionValue
-    }, optionLabel), !inline && /*#__PURE__*/React__default["default"].createElement("br", null));
+      value: option.value
+    }, option.label), !inline && /*#__PURE__*/React__default["default"].createElement("br", null));
   })) : null;
 }
 
@@ -1092,7 +1100,9 @@ function CheckboxWidget(props) {
     id: id,
     name: id,
     onChange: !readonly ? handleChange : undefined
-  }, extraProps), label);
+  }, extraProps, {
+    "aria-describedby": utils.ariaDescribedByIds(id)
+  }), label);
 }
 
 var DatePicker = /*#__PURE__*/generatePicker__default["default"](dayjsGenerateConfig__default["default"]);
@@ -1140,7 +1150,8 @@ function DateTimeWidget(props) {
     placeholder: placeholder,
     showTime: true,
     style: DATE_PICKER_STYLE$1,
-    value: value && dayjs__default["default"](value)
+    value: value && dayjs__default["default"](value),
+    "aria-describedby": utils.ariaDescribedByIds(id)
   });
 }
 
@@ -1187,7 +1198,8 @@ function DateWidget(props) {
     placeholder: placeholder,
     showTime: false,
     style: DATE_PICKER_STYLE,
-    value: value && dayjs__default["default"](value)
+    value: value && dayjs__default["default"](value),
+    "aria-describedby": utils.ariaDescribedByIds(id)
   });
 }
 
@@ -1229,7 +1241,8 @@ function PasswordWidget(props) {
     onChange: !readonly ? handleChange : undefined,
     onFocus: !readonly ? handleFocus : undefined,
     placeholder: placeholder,
-    value: value || ""
+    value: value || "",
+    "aria-describedby": utils.ariaDescribedByIds(id)
   });
 }
 
@@ -1273,18 +1286,17 @@ function RadioWidget(_ref) {
     onChange: !readonly ? handleChange : undefined,
     onBlur: !readonly ? handleBlur : undefined,
     onFocus: !readonly ? handleFocus : undefined,
-    value: "" + value
-  }, Array.isArray(enumOptions) && enumOptions.map(function (_ref5, i) {
-    var optionValue = _ref5.value,
-      optionLabel = _ref5.label;
+    value: "" + value,
+    "aria-describedby": utils.ariaDescribedByIds(id)
+  }, Array.isArray(enumOptions) && enumOptions.map(function (option, i) {
     return /*#__PURE__*/React__default["default"].createElement(Radio__default["default"], {
-      id: id + "-" + optionValue,
+      id: utils.optionId(id, option),
       name: id,
       autoFocus: i === 0 ? autofocus : false,
       disabled: Array.isArray(enumDisabled) && enumDisabled.indexOf(value) !== -1,
-      key: optionValue,
-      value: "" + optionValue
-    }, optionLabel);
+      key: option.value,
+      value: "" + option.value
+    }, option.label);
   }));
 }
 
@@ -1339,7 +1351,9 @@ function RangeWidget(props) {
     range: false,
     step: step,
     value: value
-  }, extraProps));
+  }, extraProps, {
+    "aria-describedby": utils.ariaDescribedByIds(id)
+  }));
 }
 
 var SELECT_STYLE = {
@@ -1378,6 +1392,13 @@ function SelectWidget(_ref) {
   var handleFocus = function handleFocus() {
     return onFocus(id, utils.processSelectValue(schema, value, options));
   };
+  var filterOption = function filterOption(input, option) {
+    if (option && isString__default["default"](option.label)) {
+      // labels are strings in this context
+      return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0;
+    }
+    return false;
+  };
   var getPopupContainer = function getPopupContainer(node) {
     return node.parentNode;
   };
@@ -1401,7 +1422,10 @@ function SelectWidget(_ref) {
     placeholder: placeholder,
     style: SELECT_STYLE,
     value: typeof value !== "undefined" ? stringify(value) : undefined
-  }, extraProps), Array.isArray(enumOptions) && enumOptions.map(function (_ref2) {
+  }, extraProps, {
+    filterOption: filterOption,
+    "aria-describedby": utils.ariaDescribedByIds(id)
+  }), Array.isArray(enumOptions) && enumOptions.map(function (_ref2) {
     var optionValue = _ref2.value,
       optionLabel = _ref2.label;
     return /*#__PURE__*/React__default["default"].createElement(Select__default["default"].Option, {
@@ -1460,7 +1484,9 @@ function TextareaWidget(_ref) {
     rows: options.rows || 4,
     style: INPUT_STYLE,
     value: value
-  }, extraProps));
+  }, extraProps, {
+    "aria-describedby": utils.ariaDescribedByIds(id)
+  }));
 }
 
 function generateWidgets() {