@rjsf/chakra-ui 6.4.2 → 6.5.0

package/dist/chakra-ui.umd.js

@@ -540,7 +540,8 @@
               onBlur: !readonly ? onKeyRenameBlur : void 0,
               type: "text",
               mb: 1
-            }
+            },
+            label
           ) }) }),
           /* @__PURE__ */ jsxRuntime.jsx(react$1.GridItem, { colSpan: 5, children }),
           /* @__PURE__ */ jsxRuntime.jsx(react$1.GridItem, { justifySelf: "flex-end", style: { marginTop: displayLabel ? `${margin}px` : void 0 }, children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -724,10 +725,11 @@
       uiSchema
     } = props;
     const { enumOptions, enumDisabled, emptyValue } = options;
-    const _onBlur = ({ target }) => onBlur(id, utils.enumOptionsValueForIndex(target && target.value, enumOptions, emptyValue));
-    const _onFocus = ({ target }) => onFocus(id, utils.enumOptionsValueForIndex(target && target.value, enumOptions, emptyValue));
+    const optionValueFormat = utils.getOptionValueFormat(options);
+    const _onBlur = ({ target }) => onBlur(id, utils.enumOptionValueDecoder(target && target.value, enumOptions, optionValueFormat, emptyValue));
+    const _onFocus = ({ target }) => onFocus(id, utils.enumOptionValueDecoder(target && target.value, enumOptions, optionValueFormat, emptyValue));
     const row = options ? options.inline : false;
-    const selectedIndexes = utils.enumOptionsIndexForValue(value, enumOptions, true);
+    const selectValue = utils.enumOptionSelectedValue(value, enumOptions, true, optionValueFormat, []);
     const chakraProps = getChakra({ });
     return /* @__PURE__ */ jsxRuntime.jsxs(
       react$1.FieldsetRoot,
@@ -741,11 +743,11 @@
           /* @__PURE__ */ jsxRuntime.jsx(
             react$1.CheckboxGroup,
             {
-              onValueChange: (option) => onChange(utils.enumOptionsValueForIndex(option, enumOptions, emptyValue)),
-              value: selectedIndexes,
+              onValueChange: (option) => onChange(utils.enumOptionValueDecoder(option, enumOptions, optionValueFormat, emptyValue)),
+              value: selectValue,
               "aria-describedby": utils.ariaDescribedByIds(id),
               readOnly: readonly,
-              required,
+              invalid: required && value.length === 0,
               children: /* @__PURE__ */ jsxRuntime.jsx(react$1.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__ */ jsxRuntime.jsx(
@@ -753,7 +755,7 @@
                   {
                     id: utils.optionId(id, index),
                     name: htmlName || id,
-                    value: String(index),
+                    value: utils.enumOptionValueEncoder(option.value, index, optionValueFormat),
                     disabled: disabled || itemDisabled || readonly,
                     onBlur: _onBlur,
                     onFocus: _onFocus,
@@ -793,11 +795,12 @@
     uiSchema
   }) {
     const { enumOptions, enumDisabled, emptyValue } = options;
-    const _onChange = ({ target: { value: value2 } }) => onChange(utils.enumOptionsValueForIndex(value2, enumOptions, emptyValue));
-    const _onBlur = ({ target: { value: value2 } }) => onBlur(id, utils.enumOptionsValueForIndex(value2, enumOptions, emptyValue));
-    const _onFocus = ({ target: { value: value2 } }) => onFocus(id, utils.enumOptionsValueForIndex(value2, enumOptions, emptyValue));
+    const optionValueFormat = utils.getOptionValueFormat(options);
+    const _onChange = ({ target: { value: value2 } }) => onChange(utils.enumOptionValueDecoder(value2, enumOptions, optionValueFormat, emptyValue));
+    const _onBlur = ({ target: { value: value2 } }) => onBlur(id, utils.enumOptionValueDecoder(value2, enumOptions, optionValueFormat, emptyValue));
+    const _onFocus = ({ target: { value: value2 } }) => onFocus(id, utils.enumOptionValueDecoder(value2, enumOptions, optionValueFormat, emptyValue));
     const row = options ? options.inline : false;
-    const selectedIndex = utils.enumOptionsIndexForValue(value, enumOptions) ?? null;
+    const selectValue = utils.enumOptionSelectedValue(value, enumOptions, false, optionValueFormat, null);
     const chakraProps = getChakra({ });
     return /* @__PURE__ */ jsxRuntime.jsx(
       Field,
@@ -814,7 +817,7 @@
             onChange: _onChange,
             onBlur: _onBlur,
             onFocus: _onFocus,
-            value: selectedIndex,
+            value: selectValue,
             name: htmlName || id,
             "aria-describedby": utils.ariaDescribedByIds(id),
             children: /* @__PURE__ */ jsxRuntime.jsx(react$1.Stack, { direction: row ? "row" : "column", children: Array.isArray(enumOptions) && enumOptions.map((option, index) => {
@@ -822,7 +825,7 @@
               return /* @__PURE__ */ jsxRuntime.jsx(
                 Radio,
                 {
-                  value: String(index),
+                  value: utils.enumOptionValueEncoder(option.value, index, optionValueFormat),
                   id: utils.optionId(id, index),
                   disabled: disabled || itemDisabled || readonly,
                   children: option.label
@@ -984,26 +987,25 @@
       uiSchema
     } = props;
     const { enumOptions, enumDisabled, emptyValue } = options;
+    const optionValueFormat = utils.getOptionValueFormat(options);
     const _onMultiChange = ({ value: value2 }) => {
-      return onChange(utils.enumOptionsValueForIndex(value2, enumOptions, emptyValue));
+      return onChange(utils.enumOptionValueDecoder(value2, enumOptions, optionValueFormat, emptyValue));
     };
     const _onSingleChange = ({ value: value2 }) => {
-      const selected = utils.enumOptionsValueForIndex(value2, enumOptions, emptyValue);
+      const selected = utils.enumOptionValueDecoder(value2, enumOptions, optionValueFormat, emptyValue);
       return onChange(Array.isArray(selected) && selected.length === 1 ? selected[0] : selected);
     };
-    const _onBlur = ({ target }) => onBlur(id, utils.enumOptionsValueForIndex(target && target.value, enumOptions, emptyValue));
-    const _onFocus = ({ target }) => onFocus(id, utils.enumOptionsValueForIndex(target && target.value, enumOptions, emptyValue));
+    const _onBlur = ({ target }) => onBlur(id, utils.enumOptionValueDecoder(target && target.value, enumOptions, optionValueFormat, emptyValue));
+    const _onFocus = ({ target }) => onFocus(id, utils.enumOptionValueDecoder(target && target.value, enumOptions, optionValueFormat, emptyValue));
     const showPlaceholderOption = !multiple && schema.default === void 0;
-    const { valueLabelMap, displayEnumOptions } = react.useMemo(() => {
-      const valueLabelMap2 = {};
+    const displayEnumOptions = react.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: utils.enumOptionValueEncoder(value2, index, optionValueFormat),
             disabled: Array.isArray(enumDisabled) && enumDisabled.indexOf(value2) !== -1
           };
         });
@@ -1011,23 +1013,12 @@
           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 = utils.enumOptionsIndexForValue(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 = [
+      utils.enumOptionSelectedValue(value, enumOptions, isMultiple, optionValueFormat, isMultiple ? [] : "")
+    ].flat().filter((v) => v !== "");
     const selectOptions = react$1.createListCollection({
       items: displayEnumOptions.filter((item) => item.value)
     });

package/dist/index.cjs

@@ -697,7 +697,8 @@ function WrapIfAdditionalTemplate(props) {
             onBlur: !readonly ? onKeyRenameBlur : void 0,
             type: "text",
             mb: 1
-          }
+          },
+          label
         ) }) }),
         /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_react25.GridItem, { colSpan: 5, children }),
         /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_react25.GridItem, { justifySelf: "flex-end", style: { marginTop: displayLabel ? `${margin}px` : void 0 }, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
@@ -906,10 +907,11 @@ function CheckboxesWidget(props) {
     uiSchema
   } = props;
   const { enumOptions, enumDisabled, emptyValue } = options;
-  const _onBlur = ({ target }) => onBlur(id, (0, import_utils18.enumOptionsValueForIndex)(target && target.value, enumOptions, emptyValue));
-  const _onFocus = ({ target }) => onFocus(id, (0, import_utils18.enumOptionsValueForIndex)(target && target.value, enumOptions, emptyValue));
+  const optionValueFormat = (0, import_utils18.getOptionValueFormat)(options);
+  const _onBlur = ({ target }) => onBlur(id, (0, import_utils18.enumOptionValueDecoder)(target && target.value, enumOptions, optionValueFormat, emptyValue));
+  const _onFocus = ({ target }) => onFocus(id, (0, import_utils18.enumOptionValueDecoder)(target && target.value, enumOptions, optionValueFormat, emptyValue));
   const row = options ? options.inline : false;
-  const selectedIndexes = (0, import_utils18.enumOptionsIndexForValue)(value, enumOptions, true);
+  const selectValue = (0, import_utils18.enumOptionSelectedValue)(value, enumOptions, true, optionValueFormat, []);
   const chakraProps = getChakra({ uiSchema });
   return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
     import_react30.FieldsetRoot,
@@ -923,11 +925,11 @@ function CheckboxesWidget(props) {
         /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
           import_react30.CheckboxGroup,
           {
-            onValueChange: (option) => onChange((0, import_utils18.enumOptionsValueForIndex)(option, enumOptions, emptyValue)),
-            value: selectedIndexes,
+            onValueChange: (option) => onChange((0, import_utils18.enumOptionValueDecoder)(option, enumOptions, optionValueFormat, emptyValue)),
+            value: selectValue,
             "aria-describedby": (0, import_utils18.ariaDescribedByIds)(id),
             readOnly: readonly,
-            required,
+            invalid: required && value.length === 0,
             children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react30.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__ */ (0, import_jsx_runtime26.jsx)(
@@ -935,7 +937,7 @@ function CheckboxesWidget(props) {
                 {
                   id: (0, import_utils18.optionId)(id, index),
                   name: htmlName || id,
-                  value: String(index),
+                  value: (0, import_utils18.enumOptionValueEncoder)(option.value, index, optionValueFormat),
                   disabled: disabled || itemDisabled || readonly,
                   onBlur: _onBlur,
                   onFocus: _onFocus,
@@ -987,11 +989,12 @@ function RadioWidget({
   uiSchema
 }) {
   const { enumOptions, enumDisabled, emptyValue } = options;
-  const _onChange = ({ target: { value: value2 } }) => onChange((0, import_utils20.enumOptionsValueForIndex)(value2, enumOptions, emptyValue));
-  const _onBlur = ({ target: { value: value2 } }) => onBlur(id, (0, import_utils20.enumOptionsValueForIndex)(value2, enumOptions, emptyValue));
-  const _onFocus = ({ target: { value: value2 } }) => onFocus(id, (0, import_utils20.enumOptionsValueForIndex)(value2, enumOptions, emptyValue));
+  const optionValueFormat = (0, import_utils20.getOptionValueFormat)(options);
+  const _onChange = ({ target: { value: value2 } }) => onChange((0, import_utils20.enumOptionValueDecoder)(value2, enumOptions, optionValueFormat, emptyValue));
+  const _onBlur = ({ target: { value: value2 } }) => onBlur(id, (0, import_utils20.enumOptionValueDecoder)(value2, enumOptions, optionValueFormat, emptyValue));
+  const _onFocus = ({ target: { value: value2 } }) => onFocus(id, (0, import_utils20.enumOptionValueDecoder)(value2, enumOptions, optionValueFormat, emptyValue));
   const row = options ? options.inline : false;
-  const selectedIndex = (0, import_utils20.enumOptionsIndexForValue)(value, enumOptions) ?? null;
+  const selectValue = (0, import_utils20.enumOptionSelectedValue)(value, enumOptions, false, optionValueFormat, null);
   const chakraProps = getChakra({ uiSchema });
   return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
     Field,
@@ -1008,7 +1011,7 @@ function RadioWidget({
           onChange: _onChange,
           onBlur: _onBlur,
           onFocus: _onFocus,
-          value: selectedIndex,
+          value: selectValue,
           name: htmlName || id,
           "aria-describedby": (0, import_utils20.ariaDescribedByIds)(id),
           children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react33.Stack, { direction: row ? "row" : "column", children: Array.isArray(enumOptions) && enumOptions.map((option, index) => {
@@ -1016,7 +1019,7 @@ function RadioWidget({
             return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
               Radio,
               {
-                value: String(index),
+                value: (0, import_utils20.enumOptionValueEncoder)(option.value, index, optionValueFormat),
                 id: (0, import_utils20.optionId)(id, index),
                 disabled: disabled || itemDisabled || readonly,
                 children: option.label
@@ -1202,26 +1205,25 @@ function SelectWidget(props) {
     uiSchema
   } = props;
   const { enumOptions, enumDisabled, emptyValue } = options;
+  const optionValueFormat = (0, import_utils24.getOptionValueFormat)(options);
   const _onMultiChange = ({ value: value2 }) => {
-    return onChange((0, import_utils24.enumOptionsValueForIndex)(value2, enumOptions, emptyValue));
+    return onChange((0, import_utils24.enumOptionValueDecoder)(value2, enumOptions, optionValueFormat, emptyValue));
   };
   const _onSingleChange = ({ value: value2 }) => {
-    const selected = (0, import_utils24.enumOptionsValueForIndex)(value2, enumOptions, emptyValue);
+    const selected = (0, import_utils24.enumOptionValueDecoder)(value2, enumOptions, optionValueFormat, emptyValue);
     return onChange(Array.isArray(selected) && selected.length === 1 ? selected[0] : selected);
   };
-  const _onBlur = ({ target }) => onBlur(id, (0, import_utils24.enumOptionsValueForIndex)(target && target.value, enumOptions, emptyValue));
-  const _onFocus = ({ target }) => onFocus(id, (0, import_utils24.enumOptionsValueForIndex)(target && target.value, enumOptions, emptyValue));
+  const _onBlur = ({ target }) => onBlur(id, (0, import_utils24.enumOptionValueDecoder)(target && target.value, enumOptions, optionValueFormat, emptyValue));
+  const _onFocus = ({ target }) => onFocus(id, (0, import_utils24.enumOptionValueDecoder)(target && target.value, enumOptions, optionValueFormat, emptyValue));
   const showPlaceholderOption = !multiple && schema.default === void 0;
-  const { valueLabelMap, displayEnumOptions } = (0, import_react38.useMemo)(() => {
-    const valueLabelMap2 = {};
+  const displayEnumOptions = (0, import_react38.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: (0, import_utils24.enumOptionValueEncoder)(value2, index, optionValueFormat),
           disabled: Array.isArray(enumDisabled) && enumDisabled.indexOf(value2) !== -1
         };
       });
@@ -1229,23 +1231,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 = (0, import_utils24.enumOptionsIndexForValue)(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 = [
+    (0, import_utils24.enumOptionSelectedValue)(value, enumOptions, isMultiple, optionValueFormat, isMultiple ? [] : "")
+  ].flat().filter((v) => v !== "");
   const selectOptions = (0, import_react39.createListCollection)({
     items: displayEnumOptions.filter((item) => item.value)
   });