@rjsf/chakra-ui 6.4.1 → 6.5.0

package/dist/chakra-ui.esm.js

@@ -677,7 +677,8 @@ function WrapIfAdditionalTemplate(props) {
             onBlur: !readonly ? onKeyRenameBlur : void 0,
             type: "text",
             mb: 1
-          }
+          },
+          label
         ) }) }),
         /* @__PURE__ */ jsx21(GridItem4, { colSpan: 5, children }),
         /* @__PURE__ */ jsx21(GridItem4, { justifySelf: "flex-end", style: { marginTop: displayLabel ? `${margin}px` : void 0 }, children: /* @__PURE__ */ jsx21(
@@ -879,8 +880,10 @@ function CheckboxWidget(props) {
 import { CheckboxGroup, FieldsetRoot as FieldsetRoot2, Stack, Text as Text4, FieldsetLegend } from "@chakra-ui/react";
 import {
   ariaDescribedByIds as ariaDescribedByIds3,
-  enumOptionsIndexForValue,
-  enumOptionsValueForIndex,
+  enumOptionSelectedValue,
+  enumOptionValueDecoder,
+  enumOptionValueEncoder,
+  getOptionValueFormat,
   optionId,
   labelValue as labelValue3
 } from "@rjsf/utils";
@@ -903,10 +906,11 @@ function CheckboxesWidget(props) {
     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 optionValueFormat = getOptionValueFormat(options);
+  const _onBlur = ({ target }) => onBlur(id, enumOptionValueDecoder(target && target.value, enumOptions, optionValueFormat, emptyValue));
+  const _onFocus = ({ target }) => onFocus(id, enumOptionValueDecoder(target && target.value, enumOptions, optionValueFormat, emptyValue));
   const row = options ? options.inline : false;
-  const selectedIndexes = enumOptionsIndexForValue(value, enumOptions, true);
+  const selectValue = enumOptionSelectedValue(value, enumOptions, true, optionValueFormat, []);
   const chakraProps = getChakra({ uiSchema });
   return /* @__PURE__ */ jsxs15(
     FieldsetRoot2,
@@ -920,11 +924,11 @@ function CheckboxesWidget(props) {
         /* @__PURE__ */ jsx26(
           CheckboxGroup,
           {
-            onValueChange: (option) => onChange(enumOptionsValueForIndex(option, enumOptions, emptyValue)),
-            value: selectedIndexes,
+            onValueChange: (option) => onChange(enumOptionValueDecoder(option, enumOptions, optionValueFormat, emptyValue)),
+            value: selectValue,
             "aria-describedby": ariaDescribedByIds3(id),
             readOnly: readonly,
-            required,
+            invalid: required && value.length === 0,
             children: /* @__PURE__ */ jsx26(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__ */ jsx26(
@@ -932,7 +936,7 @@ function CheckboxesWidget(props) {
                 {
                   id: optionId(id, index),
                   name: htmlName || id,
-                  value: String(index),
+                  value: enumOptionValueEncoder(option.value, index, optionValueFormat),
                   disabled: disabled || itemDisabled || readonly,
                   onBlur: _onBlur,
                   onFocus: _onFocus,
@@ -952,8 +956,10 @@ function CheckboxesWidget(props) {
 import { Stack as Stack2 } from "@chakra-ui/react";
 import {
   ariaDescribedByIds as ariaDescribedByIds4,
-  enumOptionsIndexForValue as enumOptionsIndexForValue2,
-  enumOptionsValueForIndex as enumOptionsValueForIndex2,
+  enumOptionSelectedValue as enumOptionSelectedValue2,
+  enumOptionValueDecoder as enumOptionValueDecoder2,
+  enumOptionValueEncoder as enumOptionValueEncoder2,
+  getOptionValueFormat as getOptionValueFormat2,
   labelValue as labelValue4,
   optionId as optionId2
 } from "@rjsf/utils";
@@ -990,11 +996,12 @@ function RadioWidget({
   uiSchema
 }) {
   const { enumOptions, enumDisabled, emptyValue } = options;
-  const _onChange = ({ target: { value: value2 } }) => onChange(enumOptionsValueForIndex2(value2, enumOptions, emptyValue));
-  const _onBlur = ({ target: { value: value2 } }) => onBlur(id, enumOptionsValueForIndex2(value2, enumOptions, emptyValue));
-  const _onFocus = ({ target: { value: value2 } }) => onFocus(id, enumOptionsValueForIndex2(value2, enumOptions, emptyValue));
+  const optionValueFormat = getOptionValueFormat2(options);
+  const _onChange = ({ target: { value: value2 } }) => onChange(enumOptionValueDecoder2(value2, enumOptions, optionValueFormat, emptyValue));
+  const _onBlur = ({ target: { value: value2 } }) => onBlur(id, enumOptionValueDecoder2(value2, enumOptions, optionValueFormat, emptyValue));
+  const _onFocus = ({ target: { value: value2 } }) => onFocus(id, enumOptionValueDecoder2(value2, enumOptions, optionValueFormat, emptyValue));
   const row = options ? options.inline : false;
-  const selectedIndex = enumOptionsIndexForValue2(value, enumOptions) ?? null;
+  const selectValue = enumOptionSelectedValue2(value, enumOptions, false, optionValueFormat, null);
   const chakraProps = getChakra({ uiSchema });
   return /* @__PURE__ */ jsx28(
     Field,
@@ -1011,7 +1018,7 @@ function RadioWidget({
           onChange: _onChange,
           onBlur: _onBlur,
           onFocus: _onFocus,
-          value: selectedIndex,
+          value: selectValue,
           name: htmlName || id,
           "aria-describedby": ariaDescribedByIds4(id),
           children: /* @__PURE__ */ jsx28(Stack2, { direction: row ? "row" : "column", children: Array.isArray(enumOptions) && enumOptions.map((option, index) => {
@@ -1019,7 +1026,7 @@ function RadioWidget({
             return /* @__PURE__ */ jsx28(
               Radio,
               {
-                value: String(index),
+                value: enumOptionValueEncoder2(option.value, index, optionValueFormat),
                 id: optionId2(id, index),
                 disabled: disabled || itemDisabled || readonly,
                 children: option.label
@@ -1122,8 +1129,10 @@ function RangeWidget({
 import { useMemo, useRef } from "react";
 import {
   ariaDescribedByIds as ariaDescribedByIds6,
-  enumOptionsIndexForValue as enumOptionsIndexForValue3,
-  enumOptionsValueForIndex as enumOptionsValueForIndex3,
+  enumOptionSelectedValue as enumOptionSelectedValue3,
+  enumOptionValueDecoder as enumOptionValueDecoder3,
+  enumOptionValueEncoder as enumOptionValueEncoder3,
+  getOptionValueFormat as getOptionValueFormat3,
   labelValue as labelValue6
 } from "@rjsf/utils";
 import { createListCollection, Select as ChakraSelect2 } from "@chakra-ui/react";
@@ -1214,26 +1223,25 @@ function SelectWidget(props) {
     uiSchema
   } = props;
   const { enumOptions, enumDisabled, emptyValue } = options;
+  const optionValueFormat = getOptionValueFormat3(options);
   const _onMultiChange = ({ value: value2 }) => {
-    return onChange(enumOptionsValueForIndex3(value2, enumOptions, emptyValue));
+    return onChange(enumOptionValueDecoder3(value2, enumOptions, optionValueFormat, emptyValue));
   };
   const _onSingleChange = ({ value: value2 }) => {
-    const selected = enumOptionsValueForIndex3(value2, enumOptions, emptyValue);
+    const selected = enumOptionValueDecoder3(value2, enumOptions, optionValueFormat, 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 _onBlur = ({ target }) => onBlur(id, enumOptionValueDecoder3(target && target.value, enumOptions, optionValueFormat, emptyValue));
+  const _onFocus = ({ target }) => onFocus(id, enumOptionValueDecoder3(target && target.value, enumOptions, optionValueFormat, emptyValue));
   const showPlaceholderOption = !multiple && schema.default === void 0;
-  const { valueLabelMap, displayEnumOptions } = useMemo(() => {
-    const valueLabelMap2 = {};
+  const displayEnumOptions = useMemo(() => {
     let displayEnumOptions2 = [];
     if (Array.isArray(enumOptions)) {
       displayEnumOptions2 = enumOptions.map((option, index) => {
         const { value: value2, label: label2 } = option;
-        valueLabelMap2[index] = label2 || String(value2);
         return {
           label: label2,
-          value: String(index),
+          value: enumOptionValueEncoder3(value2, index, optionValueFormat),
           disabled: Array.isArray(enumDisabled) && enumDisabled.indexOf(value2) !== -1
         };
       });
@@ -1241,23 +1249,12 @@ function SelectWidget(props) {
         displayEnumOptions2.unshift({ value: "", label: placeholder || "" });
       }
     }
-    return { valueLabelMap: valueLabelMap2, displayEnumOptions: displayEnumOptions2 };
-  }, [enumDisabled, enumOptions, placeholder, showPlaceholderOption]);
+    return displayEnumOptions2;
+  }, [enumDisabled, enumOptions, placeholder, showPlaceholderOption, optionValueFormat]);
   const isMultiple = typeof multiple !== "undefined" && multiple !== false && Boolean(enumOptions);
-  const selectedIndex = enumOptionsIndexForValue3(value, enumOptions, isMultiple);
-  const getMultiValue = () => (selectedIndex || []).map((i) => {
-    return {
-      label: valueLabelMap[i],
-      value: i.toString()
-    };
-  });
-  const getSingleValue = () => typeof selectedIndex !== "undefined" ? [
-    {
-      label: valueLabelMap[selectedIndex] || "",
-      value: selectedIndex.toString()
-    }
-  ] : [];
-  const formValue = (isMultiple ? getMultiValue() : getSingleValue()).map((item) => item.value);
+  const formValue = [
+    enumOptionSelectedValue3(value, enumOptions, isMultiple, optionValueFormat, isMultiple ? [] : "")
+  ].flat().filter((v) => v !== "");
   const selectOptions = createListCollection({
     items: displayEnumOptions.filter((item) => item.value)
   });
@@ -1307,8 +1304,8 @@ function SelectWidget(props) {
 import { useMemo as useMemo2 } from "react";
 import {
   ariaDescribedByIds as ariaDescribedByIds7,
-  enumOptionsIndexForValue as enumOptionsIndexForValue4,
-  enumOptionsValueForIndex as enumOptionsValueForIndex4,
+  enumOptionsIndexForValue,
+  enumOptionsValueForIndex,
   labelValue as labelValue7
 } from "@rjsf/utils";
 import { createListCollection as createListCollection2, NativeSelect } from "@chakra-ui/react";
@@ -1335,10 +1332,10 @@ function NativeSelectWidget(props) {
   } = props;
   const { enumOptions, enumDisabled, emptyValue } = options;
   const _onChange = ({ target }) => {
-    return onChange(enumOptionsValueForIndex4(target && target.value, enumOptions, emptyValue));
+    return onChange(enumOptionsValueForIndex(target && target.value, enumOptions, emptyValue));
   };
-  const _onBlur = ({ target }) => onBlur(id, enumOptionsValueForIndex4(target && target.value, enumOptions, emptyValue));
-  const _onFocus = ({ target }) => onFocus(id, enumOptionsValueForIndex4(target && target.value, enumOptions, emptyValue));
+  const _onBlur = ({ target }) => onBlur(id, enumOptionsValueForIndex(target && target.value, enumOptions, emptyValue));
+  const _onFocus = ({ target }) => onFocus(id, enumOptionsValueForIndex(target && target.value, enumOptions, emptyValue));
   const showPlaceholderOption = !multiple && schema.default === void 0;
   const { valueLabelMap, displayEnumOptions } = useMemo2(() => {
     const valueLabelMap2 = {};
@@ -1356,7 +1353,7 @@ function NativeSelectWidget(props) {
     }
     return { valueLabelMap: valueLabelMap2, displayEnumOptions: displayEnumOptions2 };
   }, [enumDisabled, enumOptions]);
-  const selectedIndex = enumOptionsIndexForValue4(value, enumOptions, false);
+  const selectedIndex = enumOptionsIndexForValue(value, enumOptions, false);
   const getSingleValue = () => typeof selectedIndex !== "undefined" ? [
     {
       label: valueLabelMap[selectedIndex] || "",