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

package/README.md

@@ -64,11 +64,11 @@ Exports `chakra-ui` theme, fields and widgets for `react-jsonschema-form`.
 
 ### Prerequisites
 
-- `@chakra-ui/react >= 1.7.0`
-- `chakra-react-select >= 3.3.8`
-- `react >= 17.0.0`
-- `framer-motion >= 5.0.0`
-- `@rjsf/core >= 2.0.0`
+- `@chakra-ui/react >= 3`
+- `chakra-react-select >= 6`
+- `@rjsf/core >= 6`
+- `@rjsf/utils >= 6`
+- `@rjsf/validator-ajv8 >= 6`
 
 Refer to the [rjsf installation guide](https://rjsf-team.github.io/react-jsonschema-form/docs/#installation) and [chakra-ui installation guide](https://chakra-ui.com/docs/getting-started#installation) and for more details.
 
@@ -77,17 +77,17 @@ Refer to the [rjsf installation guide](https://rjsf-team.github.io/react-jsonsch
 ### Installation
 
 ```bash
-yarn add @chakra-ui/react@^1.7 @emotion/react@^11 @emotion/styled@^11 framer-motion@^5
+yarn add @chakra-ui/react chakra-react-select @rjsf/core @rjsf/utils @rjsf/validator-ajv8
 ```
 
+## Usage
+
 ```bash
-yarn add @rjsf/chakra-ui @rjsf/core
+yarn add @rjsf/chakra-ui
 ```
 
 <!-- USAGE EXAMPLES -->
 
-## Usage
-
 ```js
 import Form from '@rjsf/chakra-ui';
 ```

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,
@@ -194,16 +210,14 @@ function BaseInputTemplate(props) {
 }
 
 // src/DescriptionField/DescriptionField.tsx
+import { RichDescription } from "@rjsf/core";
 import { Text } from "@chakra-ui/react";
-import { Fragment, jsx as jsx6 } from "react/jsx-runtime";
-function DescriptionField({ description, id }) {
+import { jsx as jsx6 } from "react/jsx-runtime";
+function DescriptionField({ description, id, registry, uiSchema }) {
   if (!description) {
     return null;
   }
-  if (typeof description === "string") {
-    return /* @__PURE__ */ jsx6(Text, { as: "sup", fontSize: "md", id, children: description });
-  }
-  return /* @__PURE__ */ jsx6(Fragment, { children: description });
+  return /* @__PURE__ */ jsx6(Text, { as: "sup", fontSize: "md", id, children: /* @__PURE__ */ jsx6(RichDescription, { description, registry, uiSchema }) });
 }
 
 // src/ErrorList/ErrorList.tsx
@@ -436,7 +450,7 @@ import {
   getUiOptions as getUiOptions4,
   titleId
 } from "@rjsf/utils";
-import { Fragment as Fragment2, jsx as jsx16, jsxs as jsxs9 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx16, jsxs as jsxs9 } from "react/jsx-runtime";
 function ObjectFieldTemplate(props) {
   const {
     description,
@@ -462,7 +476,7 @@ function ObjectFieldTemplate(props) {
   const {
     ButtonTemplates: { AddButton: AddButton2 }
   } = registry.templates;
-  return /* @__PURE__ */ jsxs9(Fragment2, { children: [
+  return /* @__PURE__ */ jsxs9(Fragment, { children: [
     title && /* @__PURE__ */ jsx16(
       TitleFieldTemplate,
       {
@@ -616,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,
@@ -625,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;
@@ -683,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,
@@ -789,8 +804,9 @@ 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: [
-    !hideLabel && !!description && /* @__PURE__ */ jsx23(
+  const chakraProps = getChakra({ uiSchema });
+  return /* @__PURE__ */ jsxs14(Field, { mb: 1, required, ...chakraProps, children: [
+    !hideLabel && description && /* @__PURE__ */ jsx23(
       DescriptionFieldTemplate,
       {
         id: descriptionId2(id),
@@ -818,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,
@@ -840,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
@@ -913,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));
@@ -921,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,
     {
@@ -929,6 +958,7 @@ function RadioWidget({
       required,
       readOnly: readonly,
       label: labelValue4(label, hideLabel || !label),
+      ...chakraProps,
       children: /* @__PURE__ */ jsx26(
         RadioGroup,
         {
@@ -967,7 +997,7 @@ import {
 // src/components/ui/slider.tsx
 import { forwardRef as forwardRef6 } from "react";
 import { Slider as ChakraSlider, HStack as HStack2 } from "@chakra-ui/react";
-import { Fragment as Fragment3, jsx as jsx27, jsxs as jsxs16 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx27, jsxs as jsxs16 } from "react/jsx-runtime";
 var Slider = forwardRef6(function Slider2(props, ref) {
   const { marks: marksProp, showValue, ...rest } = props;
   const value = props.defaultValue ?? props.value;
@@ -989,7 +1019,7 @@ var Slider = forwardRef6(function Slider2(props, ref) {
 });
 function SliderThumbs(props) {
   const { value } = props;
-  return /* @__PURE__ */ jsx27(Fragment3, { children: value?.map((_, index) => /* @__PURE__ */ jsx27(ChakraSlider.Thumb, { index, children: /* @__PURE__ */ jsx27(ChakraSlider.HiddenInput, {}) }, index)) });
+  return /* @__PURE__ */ jsx27(Fragment2, { children: value?.map((_, index) => /* @__PURE__ */ jsx27(ChakraSlider.Thumb, { index, children: /* @__PURE__ */ jsx27(ChakraSlider.HiddenInput, {}) }, index)) });
 }
 var SliderMarks = forwardRef6(function SliderMarks2(props, ref) {
   const { marks } = props;
@@ -1019,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),
@@ -1053,7 +1085,7 @@ import { createListCollection, Select as ChakraSelect2 } from "@chakra-ui/react"
 // src/components/ui/select.tsx
 import { forwardRef as forwardRef7 } from "react";
 import { Select as ChakraSelect, Portal } from "@chakra-ui/react";
-import { Fragment as Fragment4, jsx as jsx29, jsxs as jsxs17 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx29, jsxs as jsxs17 } from "react/jsx-runtime";
 var SelectTrigger = forwardRef7(function SelectTrigger2(props, ref) {
   const { children, clearable, ...rest } = props;
   return /* @__PURE__ */ jsxs17(ChakraSelect.Control, { ...rest, children: [
@@ -1097,7 +1129,7 @@ var SelectValueText = forwardRef7(function SelectValueText2(props, ref) {
   } }) });
 });
 var SelectRoot = forwardRef7(function SelectRoot2(props, ref) {
-  return /* @__PURE__ */ jsx29(ChakraSelect.Root, { ...props, ref, positioning: { sameWidth: true, ...props.positioning }, children: props.asChild ? props.children : /* @__PURE__ */ jsxs17(Fragment4, { children: [
+  return /* @__PURE__ */ jsx29(ChakraSelect.Root, { ...props, ref, positioning: { sameWidth: true, ...props.positioning }, children: props.asChild ? props.children : /* @__PURE__ */ jsxs17(Fragment3, { children: [
     /* @__PURE__ */ jsx29(ChakraSelect.HiddenSelect, {}),
     props.children
   ] }) });
@@ -1131,23 +1163,17 @@ function SelectWidget(props) {
     onBlur,
     onFocus,
     rawErrors = [],
-    schema
+    schema,
+    uiSchema
   } = props;
   const { enumOptions, enumDisabled, emptyValue } = options;
   const _onMultiChange = ({ value: value2 }) => {
-    return onChange(
-      enumOptionsValueForIndex3(
-        value2.map((item) => {
-          return item;
-        }),
-        enumOptions,
-        emptyValue
-      )
-    );
-  };
-  const _onChange = ({ value: value2 }) => {
     return onChange(enumOptionsValueForIndex3(value2, enumOptions, emptyValue));
   };
+  const _onSingleChange = ({ value: value2 }) => {
+    const selected = enumOptionsValueForIndex3(value2, enumOptions, emptyValue);
+    return onChange(Array.isArray(selected) && selected.length === 1 ? selected[0] : selected);
+  };
   const _onBlur = ({ target }) => onBlur(id, enumOptionsValueForIndex3(target && target.value, enumOptions, emptyValue));
   const _onFocus = ({ target }) => onFocus(id, enumOptionsValueForIndex3(target && target.value, enumOptions, emptyValue));
   const showPlaceholderOption = !multiple && schema.default === void 0;
@@ -1189,6 +1215,7 @@ function SelectWidget(props) {
     items: displayEnumOptions.filter((item) => item.value)
   });
   const containerRef = useRef(null);
+  const chakraProps = getChakra({ uiSchema });
   return /* @__PURE__ */ jsx30(
     Field,
     {
@@ -1200,6 +1227,7 @@ function SelectWidget(props) {
       invalid: rawErrors && rawErrors.length > 0,
       label: labelValue6(label, hideLabel || !label),
       position: "relative",
+      ...chakraProps,
       children: /* @__PURE__ */ jsxs18(
         SelectRoot,
         {
@@ -1209,7 +1237,7 @@ function SelectWidget(props) {
           multiple: isMultiple,
           closeOnSelect: !isMultiple,
           onBlur: _onBlur,
-          onValueChange: isMultiple ? _onMultiChange : _onChange,
+          onValueChange: isMultiple ? _onMultiChange : _onSingleChange,
           onFocus: _onFocus,
           autoFocus: autofocus,
           value: formValue,
@@ -1255,7 +1283,8 @@ function NativeSelectWidget(props) {
     onBlur,
     onFocus,
     rawErrors = [],
-    schema
+    schema,
+    uiSchema
   } = props;
   const { enumOptions, enumDisabled, emptyValue } = options;
   const _onChange = ({ target }) => {
@@ -1294,6 +1323,7 @@ function NativeSelectWidget(props) {
   const selectOptions = createListCollection2({
     items: displayEnumOptions.filter((item) => item.value)
   });
+  const chakraProps = getChakra({ uiSchema });
   return /* @__PURE__ */ jsx31(
     Field,
     {
@@ -1303,6 +1333,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,
@@ -1344,11 +1375,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,
     {
@@ -1358,6 +1391,7 @@ function TextareaWidget({
       readOnly: readonly,
       invalid: rawErrors && rawErrors.length > 0,
       label: labelValue8(label, hideLabel || !label),
+      ...chakraProps,
       children: /* @__PURE__ */ jsx32(
         Textarea,
         {
@@ -1410,6 +1444,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,
     {
@@ -1419,6 +1454,7 @@ function UpDownWidget(props) {
       readOnly: readonly,
       invalid: rawErrors && rawErrors.length > 0,
       label: labelValue9(label, hideLabel || !label),
+      ...chakraProps,
       children: /* @__PURE__ */ jsx34(
         NumberInputRoot,
         {
@@ -1471,14 +1507,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
@@ -1493,6 +1529,7 @@ export {
   generateForm,
   generateTemplates,
   generateTheme,
-  generateWidgets
+  generateWidgets,
+  getChakra
 };
 //# sourceMappingURL=chakra-ui.esm.js.map