@rjsf/chakra-ui 6.0.0-beta.6 → 6.0.0-beta.8

package/dist/chakra-ui.esm.js

@@ -7,7 +7,6 @@ import { Button } from "@chakra-ui/react";
 import { PlusIcon } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
 function AddButton({
-  uiSchema,
   registry,
   ...props
 }) {
@@ -133,6 +132,20 @@ var Field = forwardRef(function Field2(props, ref) {
   ] });
 });
 
+// src/utils.ts
+import { defaultSystem } from "@chakra-ui/react";
+import shouldForwardProp from "@emotion/is-prop-valid";
+var { isValidProperty } = defaultSystem;
+function getChakra(uiSchema = {}) {
+  const chakraProps = uiSchema["ui:options"] && uiSchema["ui:options"].chakra || {};
+  Object.keys(chakraProps).forEach((key) => {
+    if (!isValidProperty(key) || shouldForwardProp(key)) {
+      delete chakraProps[key];
+    }
+  });
+  return chakraProps;
+}
+
 // src/BaseInputTemplate/BaseInputTemplate.tsx
 import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
 function BaseInputTemplate(props) {
@@ -153,12 +166,14 @@ function BaseInputTemplate(props) {
     rawErrors,
     autofocus,
     placeholder,
-    disabled
+    disabled,
+    uiSchema
   } = props;
   const inputProps = getInputProps(schema, type, options);
   const _onChange = ({ target: { value: value2 } }) => onChange(value2 === "" ? options.emptyValue : value2);
   const _onBlur = ({ target }) => onBlur(id, target && target.value);
   const _onFocus = ({ target }) => onFocus(id, target && target.value);
+  const chakraProps = getChakra({ uiSchema });
   return /* @__PURE__ */ jsxs5(
     Field,
     {
@@ -168,6 +183,7 @@ function BaseInputTemplate(props) {
       readOnly: readonly,
       invalid: rawErrors && rawErrors.length > 0,
       label: labelValue(label, hideLabel || !label),
+      ...chakraProps,
       children: [
         /* @__PURE__ */ jsx5(
           Input,
@@ -614,7 +630,7 @@ function generateTemplates() {
 var Templates_default = generateTemplates();
 
 // src/AltDateWidget/AltDateWidget.tsx
-import { useEffect, useState } from "react";
+import { Box as Box5, Button as Button3, FieldsetRoot } from "@chakra-ui/react";
 import {
   ariaDescribedByIds as ariaDescribedByIds2,
   dateRangeOptions,
@@ -623,7 +639,7 @@ import {
   toDateString,
   TranslatableString as TranslatableString5
 } from "@rjsf/utils";
-import { Box as Box5, Button as Button3 } from "@chakra-ui/react";
+import { useEffect, useState } from "react";
 import { jsx as jsx20, jsxs as jsxs12 } from "react/jsx-runtime";
 function DateElement(props) {
   const { SelectWidget: SelectWidget2 } = props.registry.widgets;
@@ -681,7 +697,8 @@ function AltDateWidget(props) {
     }
     onChange(void 0);
   };
-  return /* @__PURE__ */ jsxs12(Box5, { children: [
+  const chakraProps = getChakra({ uiSchema: props.uiSchema });
+  return /* @__PURE__ */ jsxs12(FieldsetRoot, { ...chakraProps, children: [
     /* @__PURE__ */ jsx20(Box5, { display: "flex", flexWrap: "wrap", alignItems: "center", children: getDateElementProps(
       state,
       showTime,
@@ -787,7 +804,8 @@ function CheckboxWidget(props) {
   const _onChange = ({ checked }) => onChange(checked);
   const _onBlur = ({ target }) => onBlur(id, target && target.value);
   const _onFocus = ({ target }) => onFocus(id, target && target.value);
-  return /* @__PURE__ */ jsxs14(Field, { mb: 1, required, children: [
+  const chakraProps = getChakra({ uiSchema });
+  return /* @__PURE__ */ jsxs14(Field, { mb: 1, required, ...chakraProps, children: [
     !hideLabel && description && /* @__PURE__ */ jsx23(
       DescriptionFieldTemplate,
       {
@@ -816,7 +834,7 @@ function CheckboxWidget(props) {
 }
 
 // src/CheckboxesWidget/CheckboxesWidget.tsx
-import { CheckboxGroup, FieldsetRoot, Stack, Text as Text5 } from "@chakra-ui/react";
+import { CheckboxGroup, FieldsetRoot as FieldsetRoot2, Stack, Text as Text5 } from "@chakra-ui/react";
 import {
   ariaDescribedByIds as ariaDescribedByIds4,
   enumOptionsIndexForValue,
@@ -838,40 +856,51 @@ function CheckboxesWidget(props) {
     required,
     label,
     hideLabel,
-    rawErrors = []
+    rawErrors = [],
+    uiSchema
   } = props;
   const { enumOptions, enumDisabled, emptyValue } = options;
   const _onBlur = ({ target }) => onBlur(id, enumOptionsValueForIndex(target && target.value, enumOptions, emptyValue));
   const _onFocus = ({ target }) => onFocus(id, enumOptionsValueForIndex(target && target.value, enumOptions, emptyValue));
   const row = options ? options.inline : false;
   const selectedIndexes = enumOptionsIndexForValue(value, enumOptions, true);
-  return /* @__PURE__ */ jsx24(FieldsetRoot, { mb: 1, disabled: disabled || readonly, invalid: rawErrors && rawErrors.length > 0, children: /* @__PURE__ */ jsx24(
-    CheckboxGroup,
+  const chakraProps = getChakra({ uiSchema });
+  return /* @__PURE__ */ jsx24(
+    FieldsetRoot2,
     {
-      onValueChange: (option) => onChange(enumOptionsValueForIndex(option, enumOptions, emptyValue)),
-      value: selectedIndexes,
-      "aria-describedby": ariaDescribedByIds4(id),
-      readOnly: readonly,
-      required,
-      label: labelValue3(label, hideLabel || !label),
-      children: /* @__PURE__ */ jsx24(Stack, { direction: row ? "row" : "column", children: Array.isArray(enumOptions) && enumOptions.map((option, index) => {
-        const itemDisabled = Array.isArray(enumDisabled) && enumDisabled.indexOf(option.value) !== -1;
-        return /* @__PURE__ */ jsx24(
-          Checkbox,
-          {
-            id: optionId(id, index),
-            name: id,
-            value: String(index),
-            disabled: disabled || itemDisabled || readonly,
-            onBlur: _onBlur,
-            onFocus: _onFocus,
-            children: option.label && /* @__PURE__ */ jsx24(Text5, { children: option.label })
-          },
-          index
-        );
-      }) })
+      mb: 1,
+      disabled: disabled || readonly,
+      invalid: rawErrors && rawErrors.length > 0,
+      ...chakraProps,
+      children: /* @__PURE__ */ jsx24(
+        CheckboxGroup,
+        {
+          onValueChange: (option) => onChange(enumOptionsValueForIndex(option, enumOptions, emptyValue)),
+          value: selectedIndexes,
+          "aria-describedby": ariaDescribedByIds4(id),
+          readOnly: readonly,
+          required,
+          label: labelValue3(label, hideLabel || !label),
+          children: /* @__PURE__ */ jsx24(Stack, { direction: row ? "row" : "column", children: Array.isArray(enumOptions) && enumOptions.map((option, index) => {
+            const itemDisabled = Array.isArray(enumDisabled) && enumDisabled.indexOf(option.value) !== -1;
+            return /* @__PURE__ */ jsx24(
+              Checkbox,
+              {
+                id: optionId(id, index),
+                name: id,
+                value: String(index),
+                disabled: disabled || itemDisabled || readonly,
+                onBlur: _onBlur,
+                onFocus: _onFocus,
+                children: option.label && /* @__PURE__ */ jsx24(Text5, { children: option.label })
+              },
+              index
+            );
+          }) })
+        }
+      )
     }
-  ) });
+  );
 }
 
 // src/RadioWidget/RadioWidget.tsx
@@ -911,7 +940,8 @@ function RadioWidget({
   hideLabel,
   onChange,
   onBlur,
-  onFocus
+  onFocus,
+  uiSchema
 }) {
   const { enumOptions, enumDisabled, emptyValue } = options;
   const _onChange = ({ target: { value: value2 } }) => onChange(enumOptionsValueForIndex2(value2, enumOptions, emptyValue));
@@ -919,6 +949,7 @@ function RadioWidget({
   const _onFocus = ({ target: { value: value2 } }) => onFocus(id, enumOptionsValueForIndex2(value2, enumOptions, emptyValue));
   const row = options ? options.inline : false;
   const selectedIndex = enumOptionsIndexForValue2(value, enumOptions) ?? null;
+  const chakraProps = getChakra({ uiSchema });
   return /* @__PURE__ */ jsx26(
     Field,
     {
@@ -927,6 +958,7 @@ function RadioWidget({
       required,
       readOnly: readonly,
       label: labelValue4(label, hideLabel || !label),
+      ...chakraProps,
       children: /* @__PURE__ */ jsx26(
         RadioGroup,
         {
@@ -1017,12 +1049,14 @@ function RangeWidget({
   onChange,
   label,
   hideLabel,
-  id
+  id,
+  uiSchema
 }) {
   const _onChange = ({ value: value2 }) => onChange(value2 === void 0 ? options.emptyValue : value2[0]);
   const _onBlur = ({ target }) => onBlur(id, target && target.value);
   const _onFocus = ({ target }) => onFocus(id, target && target.value);
-  return /* @__PURE__ */ jsx28(Field, { mb: 1, label: labelValue5(label, hideLabel || !label), children: /* @__PURE__ */ jsx28(
+  const chakraProps = getChakra({ uiSchema });
+  return /* @__PURE__ */ jsx28(Field, { mb: 1, label: labelValue5(label, hideLabel || !label), ...chakraProps, children: /* @__PURE__ */ jsx28(
     Slider,
     {
       ...rangeSpec(schema),
@@ -1129,7 +1163,8 @@ function SelectWidget(props) {
     onBlur,
     onFocus,
     rawErrors = [],
-    schema
+    schema,
+    uiSchema
   } = props;
   const { enumOptions, enumDisabled, emptyValue } = options;
   const _onMultiChange = ({ value: value2 }) => {
@@ -1187,6 +1222,7 @@ function SelectWidget(props) {
     items: displayEnumOptions.filter((item) => item.value)
   });
   const containerRef = useRef(null);
+  const chakraProps = getChakra({ uiSchema });
   return /* @__PURE__ */ jsx30(
     Field,
     {
@@ -1198,6 +1234,7 @@ function SelectWidget(props) {
       invalid: rawErrors && rawErrors.length > 0,
       label: labelValue6(label, hideLabel || !label),
       position: "relative",
+      ...chakraProps,
       children: /* @__PURE__ */ jsxs18(
         SelectRoot,
         {
@@ -1253,7 +1290,8 @@ function NativeSelectWidget(props) {
     onBlur,
     onFocus,
     rawErrors = [],
-    schema
+    schema,
+    uiSchema
   } = props;
   const { enumOptions, enumDisabled, emptyValue } = options;
   const _onChange = ({ target }) => {
@@ -1292,6 +1330,7 @@ function NativeSelectWidget(props) {
   const selectOptions = createListCollection2({
     items: displayEnumOptions.filter((item) => item.value)
   });
+  const chakraProps = getChakra({ uiSchema });
   return /* @__PURE__ */ jsx31(
     Field,
     {
@@ -1301,6 +1340,7 @@ function NativeSelectWidget(props) {
       readOnly: readonly,
       invalid: rawErrors && rawErrors.length > 0,
       label: labelValue7(label, hideLabel || !label),
+      ...chakraProps,
       children: /* @__PURE__ */ jsxs19(ChakraSelect3.Root, { children: [
         /* @__PURE__ */ jsx31(
           ChakraSelect3.Field,
@@ -1342,11 +1382,13 @@ function TextareaWidget({
   onChange,
   options,
   required,
-  rawErrors
+  rawErrors,
+  uiSchema
 }) {
   const _onChange = ({ target: { value: value2 } }) => onChange(value2 === "" ? options.emptyValue : value2);
   const _onBlur = ({ target }) => onBlur(id, target && target.value);
   const _onFocus = ({ target }) => onFocus(id, target && target.value);
+  const chakraProps = getChakra({ uiSchema });
   return /* @__PURE__ */ jsx32(
     Field,
     {
@@ -1356,6 +1398,7 @@ function TextareaWidget({
       readOnly: readonly,
       invalid: rawErrors && rawErrors.length > 0,
       label: labelValue8(label, hideLabel || !label),
+      ...chakraProps,
       children: /* @__PURE__ */ jsx32(
         Textarea,
         {
@@ -1408,6 +1451,7 @@ function UpDownWidget(props) {
   const _onChange = ({ value: value2 }) => onChange(value2);
   const _onBlur = ({ target }) => onBlur(id, target && target.value);
   const _onFocus = ({ target }) => onFocus(id, target && target.value);
+  const chakraProps = getChakra({ uiSchema: props.uiSchema });
   return /* @__PURE__ */ jsx34(
     Field,
     {
@@ -1417,6 +1461,7 @@ function UpDownWidget(props) {
       readOnly: readonly,
       invalid: rawErrors && rawErrors.length > 0,
       label: labelValue9(label, hideLabel || !label),
+      ...chakraProps,
       children: /* @__PURE__ */ jsx34(
         NumberInputRoot,
         {
@@ -1469,14 +1514,14 @@ var Form_default = generateForm();
 import { CacheProvider } from "@emotion/react";
 import createCache from "@emotion/cache";
 import weakMemoize from "@emotion/weak-memoize";
-import { ChakraProvider, defaultSystem } from "@chakra-ui/react";
+import { ChakraProvider, defaultSystem as defaultSystem2 } from "@chakra-ui/react";
 import { jsx as jsx35 } from "react/jsx-runtime";
 var memoizedCreateCacheWithContainer = weakMemoize((container) => {
   const newCache = createCache({ container, key: "rjsf" });
   return newCache;
 });
 var __createChakraFrameProvider = (props) => ({ document }) => {
-  return /* @__PURE__ */ jsx35("div", { style: { margin: 2 }, children: /* @__PURE__ */ jsx35(CacheProvider, { value: memoizedCreateCacheWithContainer(document.head), children: /* @__PURE__ */ jsx35(ChakraProvider, { value: defaultSystem, children: props.children }) }) });
+  return /* @__PURE__ */ jsx35("div", { style: { margin: 2 }, children: /* @__PURE__ */ jsx35(CacheProvider, { value: memoizedCreateCacheWithContainer(document.head), children: /* @__PURE__ */ jsx35(ChakraProvider, { value: defaultSystem2, children: props.children }) }) });
 };
 
 // src/index.ts
@@ -1491,6 +1536,7 @@ export {
   generateForm,
   generateTemplates,
   generateTheme,
-  generateWidgets
+  generateWidgets,
+  getChakra
 };
 //# sourceMappingURL=chakra-ui.esm.js.map