@rjsf/chakra-ui 5.0.0-beta.1 → 5.0.0-beta.10

package/README.md

@@ -38,6 +38,8 @@
   - [Prerequisites](#prerequisites)
   - [Installation](#installation)
 - [Usage](#usage)
+- [Optional Chakra UI Theme properties](#optional-chakra-ui-theme-properties)
+    - [Custom Chakra uiSchema Chakra Property](#custom-chakra-uischema-chakra-property)
 - [Roadmap](#roadmap)
 - [Contributing](#contributing)
 - [Contact](#contact)

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

@@ -69,7 +69,11 @@ function _objectWithoutPropertiesLoose(source, excluded) {
   return target;
 }
 
-var AddButton = function AddButton(props) {
+var _excluded$2 = ["uiSchema"];
+
+var AddButton = function AddButton(_ref) {
+  var props = _objectWithoutPropertiesLoose(_ref, _excluded$2);
+
   return React__default["default"].createElement(react.Button, _extends({
     leftIcon: React__default["default"].createElement(icons.AddIcon, null)
   }, props), "Add Item");
@@ -86,6 +90,7 @@ var ArrayFieldItemTemplate = function ArrayFieldItemTemplate(props) {
       onDropIndexClick = props.onDropIndexClick,
       onReorderClick = props.onReorderClick,
       readonly = props.readonly,
+      uiSchema = props.uiSchema,
       registry = props.registry;
   var _registry$templates$B = registry.templates.ButtonTemplates,
       MoveDownButton = _registry$templates$B.MoveDownButton,
@@ -110,13 +115,16 @@ var ArrayFieldItemTemplate = function ArrayFieldItemTemplate(props) {
     mb: 1
   }, (hasMoveUp || hasMoveDown) && React__default["default"].createElement(MoveUpButton, {
     disabled: disabled || readonly || !hasMoveUp,
-    onClick: onArrowUpClick
+    onClick: onArrowUpClick,
+    uiSchema: uiSchema
   }), (hasMoveUp || hasMoveDown) && React__default["default"].createElement(MoveDownButton, {
     disabled: disabled || readonly || !hasMoveDown,
-    onClick: onArrowDownClick
+    onClick: onArrowDownClick,
+    uiSchema: uiSchema
   }), hasRemove && React__default["default"].createElement(RemoveButton, {
     disabled: disabled || readonly,
-    onClick: onRemoveClick
+    onClick: onRemoveClick,
+    uiSchema: uiSchema
   }))));
 };
 
@@ -167,7 +175,8 @@ var ArrayFieldTemplate = function ArrayFieldTemplate(props) {
   }, React__default["default"].createElement(AddButton, {
     className: "array-item-add",
     onClick: onAddClick,
-    disabled: disabled || readonly
+    disabled: disabled || readonly,
+    uiSchema: uiSchema
   })))));
 };
 
@@ -297,7 +306,7 @@ var ErrorList = function ErrorList(_ref) {
   })));
 };
 
-var _excluded = ["icon", "iconType"];
+var _excluded = ["icon", "iconType", "uiSchema"];
 /**
  * props used in Template:
  * icon, tabIndex, disabled, onClick
@@ -336,57 +345,48 @@ function RemoveButton(props) {
   }));
 }
 
-var WrapIfAdditional = function WrapIfAdditional(props) {
-  var children = props.children,
-      classNames = props.classNames,
-      disabled = props.disabled,
-      id = props.id,
-      label = props.label,
-      onDropPropertyClick = props.onDropPropertyClick,
-      onKeyChange = props.onKeyChange,
-      readonly = props.readonly,
-      registry = props.registry,
-      required = props.required,
-      schema = props.schema;
-  var RemoveButton = registry.templates.ButtonTemplates.RemoveButton;
-  var additional = (utils.ADDITIONAL_PROPERTY_FLAG in schema);
+/** The `FieldErrorTemplate` component renders the errors local to the particular field
+ *
+ * @param props - The `FieldErrorProps` for the errors being rendered
+ */
 
-  if (!additional) {
-    return React__default["default"].createElement("div", {
-      className: classNames
-    }, children);
+function FieldErrorTemplate(props) {
+  var _props$errors = props.errors,
+      errors = _props$errors === void 0 ? [] : _props$errors,
+      idSchema = props.idSchema;
+
+  if (errors.length === 0) {
+    return null;
   }
 
-  var keyLabel = label + " Key";
+  var id = idSchema.$id + "__error";
+  return React__default["default"].createElement(react.List, null, errors.map(function (error, i) {
+    return React__default["default"].createElement(react.ListItem, {
+      key: i
+    }, React__default["default"].createElement(react.FormErrorMessage, {
+      id: id
+    }, error));
+  }));
+}
 
-  var handleBlur = function handleBlur(_ref) {
-    var target = _ref.target;
-    return onKeyChange(target.value);
-  };
+/** The `FieldHelpTemplate` component renders any help desired for a field
+ *
+ * @param props - The `FieldHelpProps` to be rendered
+ */
 
-  return React__default["default"].createElement(react.Grid, {
-    key: id + "-key",
-    className: classNames,
-    alignItems: "center",
-    gap: 2
-  }, React__default["default"].createElement(react.GridItem, null, React__default["default"].createElement(react.FormControl, {
-    isRequired: required
-  }, React__default["default"].createElement(react.FormLabel, {
-    htmlFor: id + "-key",
-    id: id + "-key-label"
-  }, keyLabel), React__default["default"].createElement(react.Input, {
-    defaultValue: label,
-    disabled: disabled || readonly,
-    id: id + "-key",
-    name: id + "-key",
-    onBlur: !readonly ? handleBlur : undefined,
-    type: "text",
-    mb: 1
-  }))), React__default["default"].createElement(react.GridItem, null, children), React__default["default"].createElement(react.GridItem, null, React__default["default"].createElement(RemoveButton, {
-    disabled: disabled || readonly,
-    onClick: onDropPropertyClick(label)
-  })));
-};
+function FieldHelpTemplate(props) {
+  var idSchema = props.idSchema,
+      help = props.help;
+
+  if (!help) {
+    return null;
+  }
+
+  var id = idSchema.$id + "__help";
+  return React__default["default"].createElement(react.FormHelperText, {
+    id: id
+  }, help);
+}
 
 var FieldTemplate = function FieldTemplate(props) {
   var id = props.id,
@@ -403,9 +403,13 @@ var FieldTemplate = function FieldTemplate(props) {
       required = props.required,
       _props$rawErrors = props.rawErrors,
       rawErrors = _props$rawErrors === void 0 ? [] : _props$rawErrors,
-      rawHelp = props.rawHelp,
+      errors = props.errors,
+      help = props.help,
       rawDescription = props.rawDescription,
-      schema = props.schema;
+      schema = props.schema,
+      uiSchema = props.uiSchema;
+  var uiOptions = utils.getUiOptions(uiSchema);
+  var WrapIfAdditionalTemplate = utils.getTemplate("WrapIfAdditionalTemplate", registry, uiOptions);
 
   if (hidden) {
     return React__default["default"].createElement("div", {
@@ -415,7 +419,7 @@ var FieldTemplate = function FieldTemplate(props) {
     }, children);
   }
 
-  return React__default["default"].createElement(WrapIfAdditional, {
+  return React__default["default"].createElement(WrapIfAdditionalTemplate, {
     classNames: classNames,
     disabled: disabled,
     id: id,
@@ -425,21 +429,14 @@ var FieldTemplate = function FieldTemplate(props) {
     readonly: readonly,
     required: required,
     schema: schema,
+    uiSchema: uiSchema,
     registry: registry
   }, React__default["default"].createElement(react.FormControl, {
     isRequired: required,
     isInvalid: rawErrors && rawErrors.length > 0
   }, children, displayLabel && rawDescription ? React__default["default"].createElement(react.Text, {
     mt: 2
-  }, rawDescription) : null, rawErrors && rawErrors.length > 0 && React__default["default"].createElement(react.List, null, rawErrors.map(function (error, i) {
-    return React__default["default"].createElement(react.ListItem, {
-      key: i
-    }, React__default["default"].createElement(react.FormErrorMessage, {
-      id: id
-    }, error));
-  })), rawHelp && React__default["default"].createElement(react.FormHelperText, {
-    id: id
-  }, rawHelp)));
+  }, rawDescription) : null, errors, help));
 };
 
 var ObjectFieldTemplate = function ObjectFieldTemplate(props) {
@@ -482,7 +479,8 @@ var ObjectFieldTemplate = function ObjectFieldTemplate(props) {
   }, React__default["default"].createElement(AddButton, {
     className: "object-property-expand",
     onClick: onAddClick(schema),
-    disabled: disabled || readonly
+    disabled: disabled || readonly,
+    uiSchema: uiSchema
   }))));
 };
 
@@ -518,6 +516,61 @@ var TitleField = function TitleField(_ref) {
   }, title), React__default["default"].createElement(react.Divider, null));
 };
 
+var WrapIfAdditionalTemplate = function WrapIfAdditionalTemplate(props) {
+  var children = props.children,
+      classNames = props.classNames,
+      disabled = props.disabled,
+      id = props.id,
+      label = props.label,
+      onDropPropertyClick = props.onDropPropertyClick,
+      onKeyChange = props.onKeyChange,
+      readonly = props.readonly,
+      registry = props.registry,
+      required = props.required,
+      schema = props.schema,
+      uiSchema = props.uiSchema; // Button templates are not overridden in the uiSchema
+
+  var RemoveButton = registry.templates.ButtonTemplates.RemoveButton;
+  var additional = (utils.ADDITIONAL_PROPERTY_FLAG in schema);
+
+  if (!additional) {
+    return React__default["default"].createElement("div", {
+      className: classNames
+    }, children);
+  }
+
+  var keyLabel = label + " Key";
+
+  var handleBlur = function handleBlur(_ref) {
+    var target = _ref.target;
+    return onKeyChange(target.value);
+  };
+
+  return React__default["default"].createElement(react.Grid, {
+    key: id + "-key",
+    className: classNames,
+    alignItems: "center",
+    gap: 2
+  }, React__default["default"].createElement(react.GridItem, null, React__default["default"].createElement(react.FormControl, {
+    isRequired: required
+  }, React__default["default"].createElement(react.FormLabel, {
+    htmlFor: id + "-key",
+    id: id + "-key-label"
+  }, keyLabel), React__default["default"].createElement(react.Input, {
+    defaultValue: label,
+    disabled: disabled || readonly,
+    id: id + "-key",
+    name: id + "-key",
+    onBlur: !readonly ? handleBlur : undefined,
+    type: "text",
+    mb: 1
+  }))), React__default["default"].createElement(react.GridItem, null, children), React__default["default"].createElement(react.GridItem, null, React__default["default"].createElement(RemoveButton, {
+    disabled: disabled || readonly,
+    onClick: onDropPropertyClick(label),
+    uiSchema: uiSchema
+  })));
+};
+
 var Templates = {
   ArrayFieldItemTemplate: ArrayFieldItemTemplate,
   ArrayFieldTemplate: ArrayFieldTemplate,
@@ -531,9 +584,12 @@ var Templates = {
   },
   DescriptionFieldTemplate: DescriptionField,
   ErrorListTemplate: ErrorList,
+  FieldErrorTemplate: FieldErrorTemplate,
+  FieldHelpTemplate: FieldHelpTemplate,
   FieldTemplate: FieldTemplate,
   ObjectFieldTemplate: ObjectFieldTemplate,
-  TitleFieldTemplate: TitleField
+  TitleFieldTemplate: TitleField,
+  WrapIfAdditionalTemplate: WrapIfAdditionalTemplate
 };
 
 var rangeOptions = function rangeOptions(start, stop) {
@@ -684,6 +740,7 @@ var AltDateWidget = function AltDateWidget(props) {
       autofocus: autofocus && i === 0,
       disabled: disabled,
       id: elemId,
+      name: id,
       onBlur: onBlur,
       onFocus: onFocus,
       readonly: readonly,
@@ -837,12 +894,13 @@ var CheckboxesWidget = function CheckboxesWidget(props) {
     defaultValue: value
   }, React__default["default"].createElement(react.Stack, {
     direction: row ? "row" : "column"
-  }, enumOptions.map(function (option, index) {
+  }, Array.isArray(enumOptions) && enumOptions.map(function (option) {
     var checked = value.indexOf(option.value) !== -1;
-    var itemDisabled = enumDisabled && enumDisabled.indexOf(option.value) !== -1;
+    var itemDisabled = Array.isArray(enumDisabled) && enumDisabled.indexOf(option.value) !== -1;
     return React__default["default"].createElement(react.Checkbox, {
-      key: id + "_" + index,
-      id: id + "_" + index,
+      key: option.value,
+      id: id + "-" + option.value,
+      name: id,
       value: option.value,
       isChecked: checked,
       isDisabled: disabled || itemDisabled || readonly,
@@ -899,12 +957,12 @@ var RadioWidget = function RadioWidget(_ref) {
     name: id
   }, React__default["default"].createElement(react.Stack, {
     direction: row ? "row" : "column"
-  }, enumOptions.map(function (option, i) {
-    var itemDisabled = Boolean(enumDisabled && enumDisabled.indexOf(option.value) != -1);
+  }, Array.isArray(enumOptions) && enumOptions.map(function (option) {
+    var itemDisabled = Array.isArray(enumDisabled) && enumDisabled.indexOf(option.value) !== -1;
     return React__default["default"].createElement(react.Radio, {
       value: "" + option.value,
-      key: i,
-      id: id + "-radio-" + option.value,
+      key: option.value,
+      id: id + "-" + option.value,
       disabled: disabled || itemDisabled || readonly
     }, "" + option.label);
   }))));