@rjsf/daisyui 6.4.2 → 6.5.0

package/dist/chakra-ui.umd.js

@@ -628,7 +628,8 @@
             onBlur: onKeyRenameBlur,
             defaultValue: label,
             disabled: disabled || readonly
-          }
+          },
+          label
         )
       ] }),
       children,
@@ -831,7 +832,8 @@
     onFocus,
     onBlur
   }) {
-    const { enumOptions } = options;
+    const { enumOptions, emptyValue } = options;
+    const optionValueFormat = utils.getOptionValueFormat(options);
     const isEnumeratedObject = enumOptions && enumOptions[0]?.value && typeof enumOptions[0].value === "object";
     const isChecked = react.useCallback(
       (option) => {
@@ -865,26 +867,18 @@
     const handleFocus = react.useCallback(
       (event) => {
         if (onFocus) {
-          const index = Number(event.target.dataset.index);
-          const option = enumOptions?.[index];
-          if (option) {
-            onFocus(id, option.value);
-          }
+          onFocus(id, utils.enumOptionValueDecoder(event.target.value, enumOptions, optionValueFormat, emptyValue));
         }
       },
-      [onFocus, id, enumOptions]
+      [onFocus, id, enumOptions, optionValueFormat, emptyValue]
     );
     const handleBlur = react.useCallback(
       (event) => {
         if (onBlur) {
-          const index = Number(event.target.dataset.index);
-          const option = enumOptions?.[index];
-          if (option) {
-            onBlur(id, option.value);
-          }
+          onBlur(id, utils.enumOptionValueDecoder(event.target.value, enumOptions, optionValueFormat, emptyValue));
         }
       },
-      [onBlur, id, enumOptions]
+      [onBlur, id, enumOptions, optionValueFormat, emptyValue]
     );
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "form-control", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-2 mt-1", children: enumOptions?.map((option, index) => /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "flex items-center cursor-pointer gap-2", children: [
       /* @__PURE__ */ jsxRuntime.jsx(
@@ -894,6 +888,7 @@
           id: `${id}-${option.value}`,
           className: "checkbox",
           name: htmlName || id,
+          value: utils.enumOptionValueEncoder(option.value, index, optionValueFormat),
           checked: isChecked(option),
           required,
           disabled: disabled || readonly,
@@ -1416,11 +1411,9 @@
     onFocus,
     onBlur
   }) {
-    const { enumOptions } = options;
+    const { enumOptions, emptyValue } = options;
+    const optionValueFormat = utils.getOptionValueFormat(options);
     const isEnumeratedObject = enumOptions && enumOptions[0]?.value && typeof enumOptions[0].value === "object";
-    const getValue = (option) => {
-      return option.value;
-    };
     const isChecked = (option) => {
       if (isEnumeratedObject) {
         return value && value.name === option.value.name;
@@ -1430,33 +1423,28 @@
     const handleFocus = react.useCallback(
       (event) => {
         if (onFocus) {
-          const index = Number(event.target.dataset.index);
-          const optionValue = enumOptions?.[index]?.value;
-          onFocus(id, optionValue);
+          onFocus(id, utils.enumOptionValueDecoder(event.target.value, enumOptions, optionValueFormat, emptyValue));
         }
       },
-      [onFocus, id, enumOptions]
+      [onFocus, id, enumOptions, optionValueFormat, emptyValue]
     );
     const handleBlur = react.useCallback(
       (event) => {
         if (onBlur) {
-          const index = Number(event.target.dataset.index);
-          const optionValue = enumOptions?.[index]?.value;
-          onBlur(id, optionValue);
+          onBlur(id, utils.enumOptionValueDecoder(event.target.value, enumOptions, optionValueFormat, emptyValue));
         }
       },
-      [onBlur, id, enumOptions]
+      [onBlur, id, enumOptions, optionValueFormat, emptyValue]
     );
     const handleChange = react.useCallback(
       (event) => {
-        const index = Number(event.target.dataset.index);
-        const option = enumOptions?.[index];
-        if (option) {
-          onChange(isEnumeratedObject ? option.value : option.value);
+        const decoded = utils.enumOptionValueDecoder(event.target.value, enumOptions, optionValueFormat, emptyValue);
+        if (decoded !== void 0) {
+          onChange(decoded);
           event.target.blur();
         }
       },
-      [onChange, isEnumeratedObject, enumOptions]
+      [onChange, enumOptions, optionValueFormat, emptyValue]
     );
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "form-control", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-2 mt-1", children: enumOptions?.map((option, index) => /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "flex items-center cursor-pointer gap-2", children: [
       /* @__PURE__ */ jsxRuntime.jsx(
@@ -1466,7 +1454,7 @@
           id: `${id}-${option.value}`,
           className: "radio",
           name: htmlName || id,
-          value: getValue(option),
+          value: utils.enumOptionValueEncoder(option.value, index, optionValueFormat),
           checked: isChecked(option),
           required,
           disabled: disabled || readonly,
@@ -1614,6 +1602,7 @@
     onFocus
   }) {
     const { enumOptions, emptyValue: optEmptyVal } = options;
+    const optionValueFormat = utils.getOptionValueFormat(options);
     multiple = typeof multiple === "undefined" ? false : !!multiple;
     const getDisplayValue = (val) => {
       if (!val) {
@@ -1636,37 +1625,38 @@
         }
         if (multiple) {
           const currentValue = Array.isArray(value) ? value : [];
-          const optionValue = isEnumeratedObject ? enumOptions[index].value : utils.enumOptionsValueForIndex(String(index), enumOptions, optEmptyVal);
+          const optionValue = isEnumeratedObject ? enumOptions[index].value : utils.enumOptionValueDecoder(String(index), enumOptions, optionValueFormat, optEmptyVal);
           const newValue = currentValue.includes(optionValue) ? currentValue.filter((v) => v !== optionValue) : [...currentValue, optionValue];
           onChange(newValue);
         } else {
           onChange(
-            isEnumeratedObject ? enumOptions[index].value : utils.enumOptionsValueForIndex(String(index), enumOptions, optEmptyVal)
+            isEnumeratedObject ? enumOptions[index].value : utils.enumOptionValueDecoder(String(index), enumOptions, optionValueFormat, optEmptyVal)
           );
         }
       },
-      [value, multiple, isEnumeratedObject, enumOptions, optEmptyVal, onChange]
+      [value, multiple, isEnumeratedObject, enumOptions, optEmptyVal, optionValueFormat, onChange]
     );
     const _onBlur = react.useCallback(
       ({ target }) => {
         const dataValue = target?.getAttribute("data-value");
         if (dataValue !== null) {
-          onBlur(id, utils.enumOptionsValueForIndex(dataValue, enumOptions, optEmptyVal));
+          onBlur(id, utils.enumOptionValueDecoder(dataValue, enumOptions, optionValueFormat, optEmptyVal));
         }
       },
-      [onBlur, id, enumOptions, optEmptyVal]
+      [onBlur, id, enumOptions, optEmptyVal, optionValueFormat]
     );
     const _onFocus = react.useCallback(
       ({ target }) => {
         const dataValue = target?.getAttribute("data-value");
         if (dataValue !== null) {
-          onFocus(id, utils.enumOptionsValueForIndex(dataValue, enumOptions, optEmptyVal));
+          onFocus(id, utils.enumOptionValueDecoder(dataValue, enumOptions, optionValueFormat, optEmptyVal));
         }
       },
-      [onFocus, id, enumOptions, optEmptyVal]
+      [onFocus, id, enumOptions, optEmptyVal, optionValueFormat]
     );
-    const selectedIndexes = utils.enumOptionsIndexForValue(value, enumOptions, multiple);
-    const selectedValues = Array.isArray(selectedIndexes) ? selectedIndexes : [selectedIndexes];
+    const selectedValues = [
+      utils.enumOptionSelectedValue(value, enumOptions, !!multiple, optionValueFormat, multiple ? [] : "")
+    ].flat().filter((v) => v !== "");
     const optionsList = enumOptions || (Array.isArray(schema.examples) ? schema.examples.map((example) => ({ value: example, label: example })) : []);
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "form-control w-full", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "dropdown w-full", children: [
       /* @__PURE__ */ jsxRuntime.jsxs(
@@ -1683,29 +1673,32 @@
           ]
         }
       ),
-      /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "dropdown-content z-[1] bg-base-100 w-full max-h-60 overflow-auto rounded-box shadow-lg", children: optionsList.map(({ label: label2 }, i) => /* @__PURE__ */ jsxRuntime.jsx(
-        "li",
-        {
-          role: "button",
-          tabIndex: 0,
-          className: `px-4 py-2 hover:bg-base-200 cursor-pointer ${selectedValues.includes(String(i)) ? "bg-primary/10" : ""}`,
-          onClick: handleOptionClick,
-          "data-value": i,
-          children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
-            multiple && /* @__PURE__ */ jsxRuntime.jsx(
-              "input",
-              {
-                type: "checkbox",
-                className: "checkbox checkbox-sm",
-                checked: selectedValues.includes(String(i)),
-                readOnly: true
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { children: isEnumeratedObject ? label2 : getDisplayValue(label2) })
-          ] })
-        },
-        i
-      )) })
+      /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "dropdown-content z-[1] bg-base-100 w-full max-h-60 overflow-auto rounded-box shadow-lg", children: optionsList.map(({ value: optValue, label: label2 }, i) => {
+        const encodedValue = utils.enumOptionValueEncoder(optValue, i, optionValueFormat);
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          "li",
+          {
+            role: "button",
+            tabIndex: 0,
+            className: `px-4 py-2 hover:bg-base-200 cursor-pointer ${selectedValues.includes(encodedValue) ? "bg-primary/10" : ""}`,
+            onClick: handleOptionClick,
+            "data-value": i,
+            children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+              multiple && /* @__PURE__ */ jsxRuntime.jsx(
+                "input",
+                {
+                  type: "checkbox",
+                  className: "checkbox checkbox-sm",
+                  checked: selectedValues.includes(encodedValue),
+                  readOnly: true
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { children: isEnumeratedObject ? label2 : getDisplayValue(label2) })
+            ] })
+          },
+          i
+        );
+      }) })
     ] }) });
   }
   function TextareaWidget(props) {

package/dist/index.cjs

@@ -741,7 +741,8 @@ function WrapIfAdditionalTemplate(props) {
           onBlur: onKeyRenameBlur,
           defaultValue: label,
           disabled: disabled || readonly
-        }
+        },
+        label
       )
     ] }),
     children,
@@ -947,6 +948,7 @@ function CheckboxWidget(props) {
 
 // src/widgets/CheckboxesWidget/CheckboxesWidget.tsx
 var import_react5 = require("react");
+var import_utils15 = require("@rjsf/utils");
 var import_jsx_runtime23 = require("react/jsx-runtime");
 function CheckboxesWidget({
   id,
@@ -960,7 +962,8 @@ function CheckboxesWidget({
   onFocus,
   onBlur
 }) {
-  const { enumOptions } = options;
+  const { enumOptions, emptyValue } = options;
+  const optionValueFormat = (0, import_utils15.getOptionValueFormat)(options);
   const isEnumeratedObject = enumOptions && enumOptions[0]?.value && typeof enumOptions[0].value === "object";
   const isChecked = (0, import_react5.useCallback)(
     (option) => {
@@ -994,26 +997,18 @@ function CheckboxesWidget({
   const handleFocus = (0, import_react5.useCallback)(
     (event) => {
       if (onFocus) {
-        const index = Number(event.target.dataset.index);
-        const option = enumOptions?.[index];
-        if (option) {
-          onFocus(id, option.value);
-        }
+        onFocus(id, (0, import_utils15.enumOptionValueDecoder)(event.target.value, enumOptions, optionValueFormat, emptyValue));
       }
     },
-    [onFocus, id, enumOptions]
+    [onFocus, id, enumOptions, optionValueFormat, emptyValue]
   );
   const handleBlur = (0, import_react5.useCallback)(
     (event) => {
       if (onBlur) {
-        const index = Number(event.target.dataset.index);
-        const option = enumOptions?.[index];
-        if (option) {
-          onBlur(id, option.value);
-        }
+        onBlur(id, (0, import_utils15.enumOptionValueDecoder)(event.target.value, enumOptions, optionValueFormat, emptyValue));
       }
     },
-    [onBlur, id, enumOptions]
+    [onBlur, id, enumOptions, optionValueFormat, emptyValue]
   );
   return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "form-control", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "flex flex-col gap-2 mt-1", children: enumOptions?.map((option, index) => /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("label", { className: "flex items-center cursor-pointer gap-2", children: [
     /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
@@ -1023,6 +1018,7 @@ function CheckboxesWidget({
         id: `${id}-${option.value}`,
         className: "checkbox",
         name: htmlName || id,
+        value: (0, import_utils15.enumOptionValueEncoder)(option.value, index, optionValueFormat),
         checked: isChecked(option),
         required,
         disabled: disabled || readonly,
@@ -1554,6 +1550,7 @@ function DateWidget(props) {
 
 // src/widgets/RadioWidget/RadioWidget.tsx
 var import_react8 = require("react");
+var import_utils16 = require("@rjsf/utils");
 var import_jsx_runtime26 = require("react/jsx-runtime");
 function RadioWidget({
   id,
@@ -1567,11 +1564,9 @@ function RadioWidget({
   onFocus,
   onBlur
 }) {
-  const { enumOptions } = options;
+  const { enumOptions, emptyValue } = options;
+  const optionValueFormat = (0, import_utils16.getOptionValueFormat)(options);
   const isEnumeratedObject = enumOptions && enumOptions[0]?.value && typeof enumOptions[0].value === "object";
-  const getValue = (option) => {
-    return option.value;
-  };
   const isChecked = (option) => {
     if (isEnumeratedObject) {
       return value && value.name === option.value.name;
@@ -1581,33 +1576,28 @@ function RadioWidget({
   const handleFocus = (0, import_react8.useCallback)(
     (event) => {
       if (onFocus) {
-        const index = Number(event.target.dataset.index);
-        const optionValue = enumOptions?.[index]?.value;
-        onFocus(id, optionValue);
+        onFocus(id, (0, import_utils16.enumOptionValueDecoder)(event.target.value, enumOptions, optionValueFormat, emptyValue));
       }
     },
-    [onFocus, id, enumOptions]
+    [onFocus, id, enumOptions, optionValueFormat, emptyValue]
   );
   const handleBlur = (0, import_react8.useCallback)(
     (event) => {
       if (onBlur) {
-        const index = Number(event.target.dataset.index);
-        const optionValue = enumOptions?.[index]?.value;
-        onBlur(id, optionValue);
+        onBlur(id, (0, import_utils16.enumOptionValueDecoder)(event.target.value, enumOptions, optionValueFormat, emptyValue));
       }
     },
-    [onBlur, id, enumOptions]
+    [onBlur, id, enumOptions, optionValueFormat, emptyValue]
   );
   const handleChange = (0, import_react8.useCallback)(
     (event) => {
-      const index = Number(event.target.dataset.index);
-      const option = enumOptions?.[index];
-      if (option) {
-        onChange(isEnumeratedObject ? option.value : option.value);
+      const decoded = (0, import_utils16.enumOptionValueDecoder)(event.target.value, enumOptions, optionValueFormat, emptyValue);
+      if (decoded !== void 0) {
+        onChange(decoded);
         event.target.blur();
       }
     },
-    [onChange, isEnumeratedObject, enumOptions]
+    [onChange, enumOptions, optionValueFormat, emptyValue]
   );
   return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "form-control", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "flex flex-col gap-2 mt-1", children: enumOptions?.map((option, index) => /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("label", { className: "flex items-center cursor-pointer gap-2", children: [
     /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
@@ -1617,7 +1607,7 @@ function RadioWidget({
         id: `${id}-${option.value}`,
         className: "radio",
         name: htmlName || id,
-        value: getValue(option),
+        value: (0, import_utils16.enumOptionValueEncoder)(option.value, index, optionValueFormat),
         checked: isChecked(option),
         required,
         disabled: disabled || readonly,
@@ -1761,7 +1751,7 @@ function RatingWidget({
 
 // src/widgets/SelectWidget/SelectWidget.tsx
 var import_react11 = require("react");
-var import_utils15 = require("@rjsf/utils");
+var import_utils17 = require("@rjsf/utils");
 var import_jsx_runtime29 = require("react/jsx-runtime");
 function SelectWidget({
   schema,
@@ -1778,6 +1768,7 @@ function SelectWidget({
   onFocus
 }) {
   const { enumOptions, emptyValue: optEmptyVal } = options;
+  const optionValueFormat = (0, import_utils17.getOptionValueFormat)(options);
   multiple = typeof multiple === "undefined" ? false : !!multiple;
   const getDisplayValue = (val) => {
     if (!val) {
@@ -1800,37 +1791,38 @@ function SelectWidget({
       }
       if (multiple) {
         const currentValue = Array.isArray(value) ? value : [];
-        const optionValue = isEnumeratedObject ? enumOptions[index].value : (0, import_utils15.enumOptionsValueForIndex)(String(index), enumOptions, optEmptyVal);
+        const optionValue = isEnumeratedObject ? enumOptions[index].value : (0, import_utils17.enumOptionValueDecoder)(String(index), enumOptions, optionValueFormat, optEmptyVal);
         const newValue = currentValue.includes(optionValue) ? currentValue.filter((v) => v !== optionValue) : [...currentValue, optionValue];
         onChange(newValue);
       } else {
         onChange(
-          isEnumeratedObject ? enumOptions[index].value : (0, import_utils15.enumOptionsValueForIndex)(String(index), enumOptions, optEmptyVal)
+          isEnumeratedObject ? enumOptions[index].value : (0, import_utils17.enumOptionValueDecoder)(String(index), enumOptions, optionValueFormat, optEmptyVal)
         );
       }
     },
-    [value, multiple, isEnumeratedObject, enumOptions, optEmptyVal, onChange]
+    [value, multiple, isEnumeratedObject, enumOptions, optEmptyVal, optionValueFormat, onChange]
   );
   const _onBlur = (0, import_react11.useCallback)(
     ({ target }) => {
       const dataValue = target?.getAttribute("data-value");
       if (dataValue !== null) {
-        onBlur(id, (0, import_utils15.enumOptionsValueForIndex)(dataValue, enumOptions, optEmptyVal));
+        onBlur(id, (0, import_utils17.enumOptionValueDecoder)(dataValue, enumOptions, optionValueFormat, optEmptyVal));
       }
     },
-    [onBlur, id, enumOptions, optEmptyVal]
+    [onBlur, id, enumOptions, optEmptyVal, optionValueFormat]
   );
   const _onFocus = (0, import_react11.useCallback)(
     ({ target }) => {
       const dataValue = target?.getAttribute("data-value");
       if (dataValue !== null) {
-        onFocus(id, (0, import_utils15.enumOptionsValueForIndex)(dataValue, enumOptions, optEmptyVal));
+        onFocus(id, (0, import_utils17.enumOptionValueDecoder)(dataValue, enumOptions, optionValueFormat, optEmptyVal));
       }
     },
-    [onFocus, id, enumOptions, optEmptyVal]
+    [onFocus, id, enumOptions, optEmptyVal, optionValueFormat]
   );
-  const selectedIndexes = (0, import_utils15.enumOptionsIndexForValue)(value, enumOptions, multiple);
-  const selectedValues = Array.isArray(selectedIndexes) ? selectedIndexes : [selectedIndexes];
+  const selectedValues = [
+    (0, import_utils17.enumOptionSelectedValue)(value, enumOptions, !!multiple, optionValueFormat, multiple ? [] : "")
+  ].flat().filter((v) => v !== "");
   const optionsList = enumOptions || (Array.isArray(schema.examples) ? schema.examples.map((example) => ({ value: example, label: example })) : []);
   return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "form-control w-full", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "dropdown w-full", children: [
     /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
@@ -1847,29 +1839,32 @@ function SelectWidget({
         ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("ul", { className: "dropdown-content z-[1] bg-base-100 w-full max-h-60 overflow-auto rounded-box shadow-lg", children: optionsList.map(({ label: label2 }, i) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
-      "li",
-      {
-        role: "button",
-        tabIndex: 0,
-        className: `px-4 py-2 hover:bg-base-200 cursor-pointer ${selectedValues.includes(String(i)) ? "bg-primary/10" : ""}`,
-        onClick: handleOptionClick,
-        "data-value": i,
-        children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "flex items-center gap-2", children: [
-          multiple && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
-            "input",
-            {
-              type: "checkbox",
-              className: "checkbox checkbox-sm",
-              checked: selectedValues.includes(String(i)),
-              readOnly: true
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { children: isEnumeratedObject ? label2 : getDisplayValue(label2) })
-        ] })
-      },
-      i
-    )) })
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("ul", { className: "dropdown-content z-[1] bg-base-100 w-full max-h-60 overflow-auto rounded-box shadow-lg", children: optionsList.map(({ value: optValue, label: label2 }, i) => {
+      const encodedValue = (0, import_utils17.enumOptionValueEncoder)(optValue, i, optionValueFormat);
+      return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+        "li",
+        {
+          role: "button",
+          tabIndex: 0,
+          className: `px-4 py-2 hover:bg-base-200 cursor-pointer ${selectedValues.includes(encodedValue) ? "bg-primary/10" : ""}`,
+          onClick: handleOptionClick,
+          "data-value": i,
+          children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "flex items-center gap-2", children: [
+            multiple && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+              "input",
+              {
+                type: "checkbox",
+                className: "checkbox checkbox-sm",
+                checked: selectedValues.includes(encodedValue),
+                readOnly: true
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { children: isEnumeratedObject ? label2 : getDisplayValue(label2) })
+          ] })
+        },
+        i
+      );
+    }) })
   ] }) });
 }