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

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

@@ -64,15 +64,15 @@ function _objectWithoutPropertiesLoose(source, excluded) {
   return target;
 }
 
-var _excluded$2 = ["uiSchema"];
-var AddButton = function AddButton(_ref) {
+var _excluded$2 = ["uiSchema", "registry"];
+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");
-};
+}
 
-var ArrayFieldItemTemplate = function ArrayFieldItemTemplate(props) {
+function ArrayFieldItemTemplate(props) {
   var children = props.children,
     disabled = props.disabled,
     hasToolbar = props.hasToolbar,
@@ -109,20 +109,23 @@ var ArrayFieldItemTemplate = function ArrayFieldItemTemplate(props) {
   }, (hasMoveUp || hasMoveDown) && React__default["default"].createElement(MoveUpButton, {
     disabled: disabled || readonly || !hasMoveUp,
     onClick: onArrowUpClick,
-    uiSchema: uiSchema
+    uiSchema: uiSchema,
+    registry: registry
   }), (hasMoveUp || hasMoveDown) && React__default["default"].createElement(MoveDownButton, {
     disabled: disabled || readonly || !hasMoveDown,
     onClick: onArrowDownClick,
-    uiSchema: uiSchema
+    uiSchema: uiSchema,
+    registry: registry
   }), hasRemove && React__default["default"].createElement(RemoveButton, {
     disabled: disabled || readonly,
     onClick: onRemoveClick,
-    uiSchema: uiSchema
+    uiSchema: uiSchema,
+    registry: registry
   }))));
-};
+}
 
 var _excluded$1 = ["key"];
-var ArrayFieldTemplate = function ArrayFieldTemplate(props) {
+function ArrayFieldTemplate(props) {
   var canAdd = props.canAdd,
     disabled = props.disabled,
     idSchema = props.idSchema,
@@ -169,9 +172,10 @@ var ArrayFieldTemplate = function ArrayFieldTemplate(props) {
     className: "array-item-add",
     onClick: onAddClick,
     disabled: disabled || readonly,
-    uiSchema: uiSchema
+    uiSchema: uiSchema,
+    registry: registry
   })))));
-};
+}
 
 function getChakra(_ref) {
   var _ref$uiSchema = _ref.uiSchema,
@@ -192,7 +196,7 @@ function getChakra(_ref) {
   return chakraProps;
 }
 
-var BaseInputTemplate = function BaseInputTemplate(props) {
+function BaseInputTemplate(props) {
   var id = props.id,
     type = props.type,
     value = props.value,
@@ -257,9 +261,9 @@ var BaseInputTemplate = function BaseInputTemplate(props) {
       value: example
     });
   })) : null);
-};
+}
 
-var DescriptionField = function DescriptionField(_ref) {
+function DescriptionField(_ref) {
   var description = _ref.description,
     id = _ref.id;
   if (!description) {
@@ -273,9 +277,9 @@ var DescriptionField = function DescriptionField(_ref) {
     }, description);
   }
   return React__default["default"].createElement(React__default["default"].Fragment, null, description);
-};
+}
 
-var ErrorList = function ErrorList(_ref) {
+function ErrorList(_ref) {
   var errors = _ref.errors;
   return React__default["default"].createElement(react.Alert, {
     flexDirection: "column",
@@ -290,14 +294,10 @@ var ErrorList = function ErrorList(_ref) {
       color: "red.500"
     }), error.stack);
   })));
-};
+}
 
-var _excluded = ["icon", "iconType", "uiSchema"];
-/**
- * props used in Template:
- * icon, tabIndex, disabled, onClick
- */
-var ChakraIconButton = /*#__PURE__*/React.memo(function (props) {
+var _excluded = ["icon", "iconType", "uiSchema", "registry"];
+function ChakraIconButton(props) {
   var icon = props.icon,
     otherProps = _objectWithoutPropertiesLoose(props, _excluded);
   return React__default["default"].createElement(react.IconButton, _extends({
@@ -305,24 +305,26 @@ var ChakraIconButton = /*#__PURE__*/React.memo(function (props) {
   }, otherProps, {
     icon: icon
   }));
-});
+}
 ChakraIconButton.displayName = "ChakraIconButton";
+var ChakraIconButton$1 = /*#__PURE__*/React__default["default"].memo(ChakraIconButton);
+
 function MoveDownButton(props) {
-  return React__default["default"].createElement(ChakraIconButton, _extends({
+  return React__default["default"].createElement(ChakraIconButton$1, _extends({
     title: "Move down"
   }, props, {
     icon: React__default["default"].createElement(icons.ArrowDownIcon, null)
   }));
 }
 function MoveUpButton(props) {
-  return React__default["default"].createElement(ChakraIconButton, _extends({
+  return React__default["default"].createElement(ChakraIconButton$1, _extends({
     title: "Move up"
   }, props, {
     icon: React__default["default"].createElement(icons.ArrowUpIcon, null)
   }));
 }
 function RemoveButton(props) {
-  return React__default["default"].createElement(ChakraIconButton, _extends({
+  return React__default["default"].createElement(ChakraIconButton$1, _extends({
     title: "Remove"
   }, props, {
     icon: React__default["default"].createElement(icons.DeleteIcon, null)
@@ -366,7 +368,7 @@ function FieldHelpTemplate(props) {
   }, help);
 }
 
-var FieldTemplate = function FieldTemplate(props) {
+function FieldTemplate(props) {
   var id = props.id,
     children = props.children,
     classNames = props.classNames,
@@ -413,9 +415,9 @@ var FieldTemplate = function FieldTemplate(props) {
   }, children, displayLabel && rawDescription ? React__default["default"].createElement(react.Text, {
     mt: 2
   }, rawDescription) : null, errors, help));
-};
+}
 
-var ObjectFieldTemplate = function ObjectFieldTemplate(props) {
+function ObjectFieldTemplate(props) {
   var description = props.description,
     title = props.title,
     properties = props.properties,
@@ -459,11 +461,12 @@ var ObjectFieldTemplate = function ObjectFieldTemplate(props) {
     className: "object-property-expand",
     onClick: onAddClick(schema),
     disabled: disabled || readonly,
-    uiSchema: uiSchema
+    uiSchema: uiSchema,
+    registry: registry
   }))));
-};
+}
 
-var SubmitButton = function SubmitButton(_ref) {
+function SubmitButton(_ref) {
   var uiSchema = _ref.uiSchema;
   var _getSubmitButtonOptio = utils.getSubmitButtonOptions(uiSchema),
     submitText = _getSubmitButtonOptio.submitText,
@@ -478,9 +481,9 @@ var SubmitButton = function SubmitButton(_ref) {
     type: "submit",
     variant: "solid"
   }, submitButtonProps), submitText));
-};
+}
 
-var TitleField = function TitleField(_ref) {
+function TitleField(_ref) {
   var id = _ref.id,
     title = _ref.title;
   return React__default["default"].createElement(react.Box, {
@@ -490,9 +493,9 @@ var TitleField = function TitleField(_ref) {
   }, React__default["default"].createElement(react.Heading, {
     as: "h5"
   }, title), React__default["default"].createElement(react.Divider, null));
-};
+}
 
-var WrapIfAdditionalTemplate = function WrapIfAdditionalTemplate(props) {
+function WrapIfAdditionalTemplate(props) {
   var children = props.children,
     classNames = props.classNames,
     disabled = props.disabled,
@@ -539,30 +542,34 @@ var WrapIfAdditionalTemplate = function WrapIfAdditionalTemplate(props) {
   }))), 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
+    uiSchema: uiSchema,
+    registry: registry
   })));
-};
+}
 
-var Templates = {
-  ArrayFieldItemTemplate: ArrayFieldItemTemplate,
-  ArrayFieldTemplate: ArrayFieldTemplate,
-  BaseInputTemplate: BaseInputTemplate,
-  ButtonTemplates: {
-    AddButton: AddButton,
-    MoveDownButton: MoveDownButton,
-    MoveUpButton: MoveUpButton,
-    RemoveButton: RemoveButton,
-    SubmitButton: SubmitButton
-  },
-  DescriptionFieldTemplate: DescriptionField,
-  ErrorListTemplate: ErrorList,
-  FieldErrorTemplate: FieldErrorTemplate,
-  FieldHelpTemplate: FieldHelpTemplate,
-  FieldTemplate: FieldTemplate,
-  ObjectFieldTemplate: ObjectFieldTemplate,
-  TitleFieldTemplate: TitleField,
-  WrapIfAdditionalTemplate: WrapIfAdditionalTemplate
-};
+function generateTemplates() {
+  return {
+    ArrayFieldItemTemplate: ArrayFieldItemTemplate,
+    ArrayFieldTemplate: ArrayFieldTemplate,
+    BaseInputTemplate: BaseInputTemplate,
+    ButtonTemplates: {
+      AddButton: AddButton,
+      MoveDownButton: MoveDownButton,
+      MoveUpButton: MoveUpButton,
+      RemoveButton: RemoveButton,
+      SubmitButton: SubmitButton
+    },
+    DescriptionFieldTemplate: DescriptionField,
+    ErrorListTemplate: ErrorList,
+    FieldErrorTemplate: FieldErrorTemplate,
+    FieldHelpTemplate: FieldHelpTemplate,
+    FieldTemplate: FieldTemplate,
+    ObjectFieldTemplate: ObjectFieldTemplate,
+    TitleFieldTemplate: TitleField,
+    WrapIfAdditionalTemplate: WrapIfAdditionalTemplate
+  };
+}
+var Templates = /*#__PURE__*/generateTemplates();
 
 var rangeOptions = function rangeOptions(start, stop) {
   var options = [];
@@ -574,12 +581,31 @@ var rangeOptions = function rangeOptions(start, stop) {
   }
   return options;
 };
+function DateElement(props) {
+  var SelectWidget = props.registry.widgets.SelectWidget;
+  var value = props.value ? props.value : undefined;
+  return React__default["default"].createElement(SelectWidget, _extends({}, props, {
+    label: "",
+    className: "form-control",
+    onChange: function onChange(elemValue) {
+      return props.select(props.type, elemValue);
+    },
+    options: {
+      enumOptions: rangeOptions(props.range[0], props.range[1])
+    },
+    placeholder: props.type,
+    schema: {
+      type: "integer"
+    },
+    value: value
+  }));
+}
 var readyForChange = function readyForChange(state) {
   return Object.keys(state).every(function (key) {
     return typeof state[key] !== "undefined" && state[key] !== -1;
   });
 };
-var AltDateWidget = function AltDateWidget(props) {
+function AltDateWidget(props) {
   var autofocus = props.autofocus,
     disabled = props.disabled,
     id = props.id,
@@ -591,7 +617,6 @@ var AltDateWidget = function AltDateWidget(props) {
     registry = props.registry,
     showTime = props.showTime,
     value = props.value;
-  var SelectWidget = registry.widgets.SelectWidget;
   var _useState = React.useState(utils.parseDateString(value, showTime)),
     state = _useState[0],
     setState = _useState[1];
@@ -659,24 +684,6 @@ var AltDateWidget = function AltDateWidget(props) {
     }
     return data;
   };
-  var renderDateElement = function renderDateElement(elemProps) {
-    var value = elemProps.value ? elemProps.value : undefined;
-    return React__default["default"].createElement(SelectWidget, _extends({}, elemProps, {
-      label: undefined,
-      className: "form-control",
-      onChange: function onChange(elemValue) {
-        return elemProps.select(elemProps.type, elemValue);
-      },
-      options: {
-        enumOptions: rangeOptions(elemProps.range[0], elemProps.range[1])
-      },
-      placeholder: elemProps.type,
-      schema: {
-        type: "integer"
-      },
-      value: value
-    }));
-  };
   return React__default["default"].createElement(react.Box, null, React__default["default"].createElement(react.Box, {
     display: "flex",
     flexWrap: "wrap",
@@ -688,7 +695,7 @@ var AltDateWidget = function AltDateWidget(props) {
       key: elemId,
       mr: "2",
       mb: "2"
-    }, renderDateElement(_extends({}, props, elemProps, {
+    }, React__default["default"].createElement(DateElement, _extends({}, props, elemProps, {
       autofocus: autofocus && i === 0,
       disabled: disabled,
       id: elemId,
@@ -712,7 +719,7 @@ var AltDateWidget = function AltDateWidget(props) {
       return handleClear(e);
     }
   }, "Clear")));
-};
+}
 AltDateWidget.defaultProps = {
   autofocus: false,
   disabled: false,
@@ -723,17 +730,17 @@ AltDateWidget.defaultProps = {
   }
 };
 
-var AltDateTimeWidget = function AltDateTimeWidget(props) {
+function AltDateTimeWidget(props) {
   var AltDateWidget = props.registry.widgets.AltDateWidget;
   return React__default["default"].createElement(AltDateWidget, _extends({}, props, {
     showTime: true
   }));
-};
+}
 AltDateTimeWidget.defaultProps = /*#__PURE__*/_extends({}, AltDateWidget.defaultProps, {
   showTime: true
 });
 
-var CheckboxWidget = function CheckboxWidget(props) {
+function CheckboxWidget(props) {
   var id = props.id,
     value = props.value,
     disabled = props.disabled,
@@ -741,12 +748,16 @@ var CheckboxWidget = function CheckboxWidget(props) {
     onChange = props.onChange,
     onBlur = props.onBlur,
     onFocus = props.onFocus,
-    required = props.required,
     label = props.label,
-    uiSchema = props.uiSchema;
+    uiSchema = props.uiSchema,
+    schema = props.schema;
   var chakraProps = getChakra({
     uiSchema: uiSchema
   });
+  // Because an unchecked checkbox will cause html5 validation to fail, only add
+  // the "required" attribute if the field value must be "true", due to the
+  // "const" or "enum" keywords
+  var required = utils.schemaRequiresTrueValue(schema);
   var _onChange = function _onChange(_ref) {
     var checked = _ref.target.checked;
     return onChange(checked);
@@ -772,19 +783,9 @@ var CheckboxWidget = function CheckboxWidget(props) {
     onBlur: _onBlur,
     onFocus: _onFocus
   }, label && React__default["default"].createElement(react.Text, null, label)));
-};
+}
 
-// const selectValue = (value, selected, all) => {
-//   const at = all.indexOf(value);
-//   const 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((a, b) => all.indexOf(a) > all.indexOf(b));
-// };
-// const deselectValue = (value, selected) => {
-//   return selected.filter((v) => v !== value);
-// };
-var CheckboxesWidget = function CheckboxesWidget(props) {
+function CheckboxesWidget(props) {
   var id = props.id,
     disabled = props.disabled,
     options = props.options,
@@ -804,14 +805,6 @@ var CheckboxesWidget = function CheckboxesWidget(props) {
   var chakraProps = getChakra({
     uiSchema: uiSchema
   });
-  // const _onChange = option => ({ target: { checked } }) => {
-  //   const all = enumOptions.map(({ value }) => value)
-  //   if (checked) {
-  //     onChange(selectValue(option.value, value, all))
-  //   } else {
-  //     onChange(deselectValue(option.value, value))
-  //   }
-  // }
   var _onBlur = function _onBlur(_ref) {
     var value = _ref.target.value;
     return onBlur(id, value);
@@ -852,9 +845,9 @@ var CheckboxesWidget = function CheckboxesWidget(props) {
       onFocus: _onFocus
     }, option.label && React__default["default"].createElement(react.Text, null, option.label));
   }))));
-};
+}
 
-var RadioWidget = function RadioWidget(_ref) {
+function RadioWidget(_ref) {
   var id = _ref.id,
     schema = _ref.schema,
     options = _ref.options,
@@ -907,9 +900,9 @@ var RadioWidget = function RadioWidget(_ref) {
       disabled: disabled || itemDisabled || readonly
     }, "" + option.label);
   }))));
-};
+}
 
-var RangeWidget = function RangeWidget(_ref) {
+function RangeWidget(_ref) {
   var value = _ref.value,
     readonly = _ref.readonly,
     disabled = _ref.disabled,
@@ -955,9 +948,9 @@ var RangeWidget = function RangeWidget(_ref) {
     onBlur: _onBlur,
     onFocus: _onFocus
   }), React__default["default"].createElement(react.SliderTrack, null, React__default["default"].createElement(react.SliderFilledTrack, null)), React__default["default"].createElement(react.SliderThumb, null)));
-};
+}
 
-var SelectWidget = function SelectWidget(props) {
+function SelectWidget(props) {
   var schema = props.schema,
     id = props.id,
     options = props.options,
@@ -1035,9 +1028,9 @@ var SelectWidget = function SelectWidget(props) {
     autoFocus: autofocus,
     value: formValue
   }));
-};
+}
 
-var TextareaWidget = function TextareaWidget(_ref) {
+function TextareaWidget(_ref) {
   var id = _ref.id,
     placeholder = _ref.placeholder,
     value = _ref.value,
@@ -1090,9 +1083,9 @@ var TextareaWidget = function TextareaWidget(_ref) {
     onBlur: _onBlur,
     onFocus: _onFocus
   }));
-};
+}
 
-var UpDownWidget = function UpDownWidget(props) {
+function UpDownWidget(props) {
   var id = props.id,
     schema = props.schema,
     uiSchema = props.uiSchema,
@@ -1140,26 +1133,35 @@ var UpDownWidget = function UpDownWidget(props) {
     id: id,
     name: id
   }), React__default["default"].createElement(react.NumberInputStepper, null, React__default["default"].createElement(react.NumberIncrementStepper, null), React__default["default"].createElement(react.NumberDecrementStepper, null))));
-};
+}
 
-var widgets = {
-  AltDateTimeWidget: AltDateTimeWidget,
-  AltDateWidget: AltDateWidget,
-  CheckboxWidget: CheckboxWidget,
-  CheckboxesWidget: CheckboxesWidget,
-  RadioWidget: RadioWidget,
-  RangeWidget: RangeWidget,
-  SelectWidget: SelectWidget,
-  TextareaWidget: TextareaWidget,
-  UpDownWidget: UpDownWidget
-};
+function generateWidgets() {
+  return {
+    AltDateTimeWidget: AltDateTimeWidget,
+    AltDateWidget: AltDateWidget,
+    CheckboxWidget: CheckboxWidget,
+    CheckboxesWidget: CheckboxesWidget,
+    RadioWidget: RadioWidget,
+    RangeWidget: RangeWidget,
+    SelectWidget: SelectWidget,
+    TextareaWidget: TextareaWidget,
+    UpDownWidget: UpDownWidget
+  };
+}
+var Widgets = /*#__PURE__*/generateWidgets();
 
-var Theme = {
-  templates: Templates,
-  widgets: widgets
-};
+function generateTheme() {
+  return {
+    templates: generateTemplates(),
+    widgets: generateWidgets()
+  };
+}
+var Theme = /*#__PURE__*/generateTheme();
 
-var Form = /*#__PURE__*/core.withTheme(Theme);
+function generateForm() {
+  return core.withTheme(generateTheme());
+}
+var Form = /*#__PURE__*/generateForm();
 
 /**
  *
@@ -1227,7 +1229,11 @@ var __createChakraFrameProvider = function __createChakraFrameProvider(props) {
 exports.Form = Form;
 exports.Templates = Templates;
 exports.Theme = Theme;
-exports.Widgets = widgets;
+exports.Widgets = Widgets;
 exports.__createChakraFrameProvider = __createChakraFrameProvider;
 exports["default"] = Form;
+exports.generateForm = generateForm;
+exports.generateTemplates = generateTemplates;
+exports.generateTheme = generateTheme;
+exports.generateWidgets = generateWidgets;
 //# sourceMappingURL=chakra-ui.cjs.development.js.map