@rjsf/daisyui 6.0.0-beta.21 → 6.0.0-beta.22

package/dist/index.cjs

@@ -34,11 +34,10 @@ module.exports = __toCommonJS(index_exports);
 var import_core4 = require("@rjsf/core");
 
 // src/theme/Theme.tsx
-var import_react19 = require("react");
+var import_react17 = require("react");
 var import_core2 = require("@rjsf/core");
 
 // src/templates/ArrayFieldItemButtonsTemplate/ArrayFieldItemButtonsTemplate.tsx
-var import_react = require("react");
 var import_utils = require("@rjsf/utils");
 var import_jsx_runtime = require("react/jsx-runtime");
 function ArrayFieldItemButtonsTemplate(props) {
@@ -49,19 +48,15 @@ function ArrayFieldItemButtonsTemplate(props) {
     hasMoveUp,
     hasRemove,
     fieldPathId,
-    index,
-    onCopyIndexClick,
-    onDropIndexClick,
-    onReorderClick,
+    onCopyItem,
+    onRemoveItem,
+    onMoveDownItem,
+    onMoveUpItem,
     readonly,
     registry,
     uiSchema
   } = props;
   const { CopyButton: CopyButton2, MoveDownButton: MoveDownButton2, MoveUpButton: MoveUpButton2, RemoveButton: RemoveButton2 } = registry.templates.ButtonTemplates;
-  const onCopyClick = (0, import_react.useMemo)(() => onCopyIndexClick(index), [index, onCopyIndexClick]);
-  const onRemoveClick = (0, import_react.useMemo)(() => onDropIndexClick(index), [index, onDropIndexClick]);
-  const onArrowUpClick = (0, import_react.useMemo)(() => onReorderClick(index, index - 1), [index, onReorderClick]);
-  const onArrowDownClick = (0, import_react.useMemo)(() => onReorderClick(index, index + 1), [index, onReorderClick]);
   const renderMany = [hasMoveUp || hasMoveDown, hasCopy, hasRemove].filter(Boolean).length > 1;
   const btnClass = renderMany ? "join-item btn btn-sm px-2" : "btn btn-sm px-2 rounded-sm";
   const removeBtnClass = renderMany ? "join-item btn btn-sm btn-error px-2" : "btn btn-sm btn-error px-2 rounded-sm";
@@ -73,7 +68,7 @@ function ArrayFieldItemButtonsTemplate(props) {
           id: (0, import_utils.buttonId)(fieldPathId, "moveUp"),
           className: `rjsf-array-item-move-up ${btnClass}`,
           disabled: disabled || readonly || !hasMoveUp,
-          onClick: onArrowUpClick,
+          onClick: onMoveUpItem,
           uiSchema,
           registry
         }
@@ -84,7 +79,7 @@ function ArrayFieldItemButtonsTemplate(props) {
           id: (0, import_utils.buttonId)(fieldPathId, "moveDown"),
           className: `rjsf-array-item-move-down ${btnClass}`,
           disabled: disabled || readonly || !hasMoveDown,
-          onClick: onArrowDownClick,
+          onClick: onMoveDownItem,
           uiSchema,
           registry
         }
@@ -96,7 +91,7 @@ function ArrayFieldItemButtonsTemplate(props) {
         id: (0, import_utils.buttonId)(fieldPathId, "copy"),
         className: `rjsf-array-item-copy ${btnClass}`,
         disabled: disabled || readonly,
-        onClick: onCopyClick,
+        onClick: onCopyItem,
         uiSchema,
         registry
       }
@@ -107,7 +102,7 @@ function ArrayFieldItemButtonsTemplate(props) {
         id: (0, import_utils.buttonId)(fieldPathId, "remove"),
         className: `rjsf-array-item-remove ${removeBtnClass}`,
         disabled: disabled || readonly,
-        onClick: onRemoveClick,
+        onClick: onRemoveItem,
         uiSchema,
         registry
       }
@@ -139,7 +134,7 @@ function ArrayFieldItemTemplate(props) {
 }
 
 // src/templates/ArrayFieldTemplate/ArrayFieldTemplate.tsx
-var import_react2 = require("react");
+var import_react = require("react");
 var import_utils3 = require("@rjsf/utils");
 var import_jsx_runtime3 = require("react/jsx-runtime");
 function ArrayFieldTemplate(props) {
@@ -164,11 +159,6 @@ function ArrayFieldTemplate(props) {
     registry,
     uiOptions
   );
-  const ArrayFieldItemTemplate2 = (0, import_utils3.getTemplate)(
-    "ArrayFieldItemTemplate",
-    registry,
-    uiOptions
-  );
   const ArrayFieldTitleTemplate = (0, import_utils3.getTemplate)(
     "ArrayFieldTitleTemplate",
     registry,
@@ -178,7 +168,7 @@ function ArrayFieldTemplate(props) {
   const {
     ButtonTemplates: { AddButton: AddButton2 }
   } = registry.templates;
-  const handleAddClick = (0, import_react2.useCallback)(
+  const handleAddClick = (0, import_react.useCallback)(
     (e) => {
       e.preventDefault();
       e.stopPropagation();
@@ -212,7 +202,7 @@ function ArrayFieldTemplate(props) {
     /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex flex-col gap-4", children: [
       !showOptionalDataControlInTitle ? optionalDataControl : void 0,
       /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "rjsf-array-item-list", children: [
-        items.map(({ key, ...itemProps }, index) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ArrayFieldItemTemplate2, { ...itemProps, index, totalItems: items.length }, key)),
+        items,
         items && items.length === 0 && canAdd && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "text-center italic text-base-content/70", children: import_utils3.TranslatableString.EmptyArray })
       ] }),
       canAdd && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "flex justify-end", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
@@ -231,12 +221,13 @@ function ArrayFieldTemplate(props) {
 }
 
 // src/templates/BaseInputTemplate/BaseInputTemplate.tsx
-var import_react3 = require("react");
+var import_react2 = require("react");
 var import_utils4 = require("@rjsf/utils");
 var import_jsx_runtime4 = require("react/jsx-runtime");
 function BaseInputTemplate(props) {
   const {
     id,
+    htmlName,
     value,
     required,
     disabled,
@@ -255,15 +246,15 @@ function BaseInputTemplate(props) {
   const inputProps = (0, import_utils4.getInputProps)(schema, type, options);
   const { step, min, max, accept, ...rest } = inputProps;
   const htmlInputProps = { step, min, max, accept, ...schema.examples ? { list: (0, import_utils4.examplesId)(id) } : void 0 };
-  const _onChange = (0, import_react3.useCallback)(
+  const _onChange = (0, import_react2.useCallback)(
     ({ target: { value: value2 } }) => onChange(value2 === "" ? options.emptyValue : value2),
     [onChange, options]
   );
-  const _onBlur = (0, import_react3.useCallback)(
+  const _onBlur = (0, import_react2.useCallback)(
     ({ target }) => onBlur && onBlur(id, target.value),
     [onBlur, id]
   );
-  const _onFocus = (0, import_react3.useCallback)(
+  const _onFocus = (0, import_react2.useCallback)(
     ({ target }) => onFocus && onFocus(id, target.value),
     [onFocus, id]
   );
@@ -274,7 +265,7 @@ function BaseInputTemplate(props) {
         "input",
         {
           id,
-          name: id,
+          name: htmlName || id,
           value: value || value === 0 ? value : "",
           placeholder,
           required,
@@ -302,7 +293,7 @@ var import_fontawesome_svg_core = require("@fortawesome/fontawesome-svg-core");
 var import_free_solid_svg_icons = require("@fortawesome/free-solid-svg-icons");
 
 // src/templates/ButtonTemplates/DaisyUIButton.tsx
-var import_react4 = require("react");
+var import_react3 = require("react");
 var import_react_fontawesome = require("@fortawesome/react-fontawesome");
 var import_jsx_runtime5 = require("react/jsx-runtime");
 function DaisyUIButton(props) {
@@ -310,7 +301,7 @@ function DaisyUIButton(props) {
   return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("button", { type: "button", className, "aria-label": props.title, ...otherProps, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_fontawesome.FontAwesomeIcon, { icon, className: "h-5 w-5" }) });
 }
 DaisyUIButton.displayName = "DaisyUIButton";
-var DaisyUIButton_default = (0, import_react4.memo)(DaisyUIButton);
+var DaisyUIButton_default = (0, import_react3.memo)(DaisyUIButton);
 
 // src/templates/ButtonTemplates/AddButton.tsx
 var import_jsx_runtime6 = require("react/jsx-runtime");
@@ -453,21 +444,22 @@ function FieldTemplate(props) {
     help,
     hideError,
     displayLabel,
+    onKeyRename,
+    onKeyRenameBlur,
+    onRemoveProperty,
     classNames,
-    // Destructure props we don't want to pass to div
-    description,
-    onKeyChange,
-    onDropPropertyClick,
     uiSchema,
     schema,
     readonly,
     required,
+    registry,
+    // Destructure props we don't want to pass to div
+    description,
     rawErrors,
     rawHelp,
     rawDescription,
     hidden,
     onChange,
-    registry,
     ...divProps
   } = props;
   const isCheckbox = schema.type === "boolean";
@@ -484,8 +476,9 @@ function FieldTemplate(props) {
       disabled: divProps.disabled,
       id,
       label,
-      onDropPropertyClick,
-      onKeyChange,
+      onKeyRename,
+      onKeyRenameBlur,
+      onRemoveProperty,
       readonly,
       required,
       schema,
@@ -540,7 +533,7 @@ function ObjectFieldTemplate(props) {
     schema,
     formData,
     optionalDataControl,
-    onAddClick,
+    onAddProperty,
     registry
   } = props;
   const uiOptions = (0, import_utils9.getUiOptions)(uiSchema);
@@ -595,7 +588,7 @@ function ObjectFieldTemplate(props) {
         {
           id: (0, import_utils9.buttonId)(fieldPathId, "add"),
           className: "rjsf-object-property-expand btn btn-primary btn-sm",
-          onClick: onAddClick(schema),
+          onClick: onAddProperty,
           disabled: disabled || readonly,
           uiSchema,
           registry
@@ -658,7 +651,6 @@ function TitleField(props) {
 }
 
 // src/templates/WrapIfAdditionalTemplate/WrapIfAdditionalTemplate.tsx
-var import_react5 = require("react");
 var import_utils11 = require("@rjsf/utils");
 var import_jsx_runtime19 = require("react/jsx-runtime");
 function WrapIfAdditionalTemplate(props) {
@@ -672,8 +664,9 @@ function WrapIfAdditionalTemplate(props) {
     required,
     schema,
     uiSchema,
-    onKeyChange,
-    onDropPropertyClick,
+    onKeyRename,
+    onKeyRenameBlur,
+    onRemoveProperty,
     registry,
     ...rest
   } = props;
@@ -681,15 +674,6 @@ function WrapIfAdditionalTemplate(props) {
   const { templates, translateString } = registry;
   const { RemoveButton: RemoveButton2 } = templates.ButtonTemplates;
   const keyLabel = translateString(import_utils11.TranslatableString.KeyLabel, [label]);
-  const handleBlur = (0, import_react5.useCallback)(
-    (event) => {
-      onKeyChange(event.target.value);
-    },
-    [onKeyChange]
-  );
-  const handleRemove = (0, import_react5.useCallback)(() => {
-    onDropPropertyClick(label)();
-  }, [onDropPropertyClick, label]);
   if (!additional) {
     return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: classNames, children });
   }
@@ -702,7 +686,7 @@ function WrapIfAdditionalTemplate(props) {
           type: "text",
           className: "input input-bordered",
           id: `${id}-key`,
-          onBlur: handleBlur,
+          onBlur: onKeyRenameBlur,
           defaultValue: label,
           disabled: disabled || readonly
         }
@@ -715,7 +699,7 @@ function WrapIfAdditionalTemplate(props) {
         id: (0, import_utils11.buttonId)(id, "remove"),
         className: "rjsf-object-property-remove",
         disabled: disabled || readonly,
-        onClick: handleRemove,
+        onClick: onRemoveProperty,
         uiSchema,
         registry
       }
@@ -765,7 +749,7 @@ function AltDateTimeWidget({
 var AltDateTimeWidget_default = AltDateTimeWidget;
 
 // src/widgets/AltDateWidget/AltDateWidget.tsx
-var import_react6 = require("react");
+var import_react4 = require("react");
 var import_utils12 = require("@rjsf/utils");
 var import_jsx_runtime21 = require("react/jsx-runtime");
 function readyForChange(state, time = false) {
@@ -808,7 +792,7 @@ function DateElement({
 }) {
   const id = `${rootId}_${type}`;
   const { SelectWidget: SelectWidget2 } = registry.widgets;
-  const handleChange = (0, import_react6.useCallback)(
+  const handleChange = (0, import_react4.useCallback)(
     (value2) => {
       select(type, value2);
     },
@@ -862,13 +846,13 @@ function AltDateWidget({
   value
 }) {
   const { translateString } = registry;
-  const [lastValue, setLastValue] = (0, import_react6.useState)(value);
+  const [lastValue, setLastValue] = (0, import_react4.useState)(value);
   const initialState = (0, import_utils12.parseDateString)(value, time);
   const dateReducer = (state2, action) => {
     return { ...state2, ...action };
   };
-  const [state, setState] = (0, import_react6.useReducer)(dateReducer, initialState);
-  (0, import_react6.useEffect)(() => {
+  const [state, setState] = (0, import_react4.useReducer)(dateReducer, initialState);
+  (0, import_react4.useEffect)(() => {
     const rjsfDateObj = convertToRJSFDateObject(state);
     const stateValue = (0, import_utils12.toDateString)(rjsfDateObj, time);
     if (readyForChange(state, time) && stateValue !== value) {
@@ -878,10 +862,10 @@ function AltDateWidget({
       setState((0, import_utils12.parseDateString)(value, time));
     }
   }, [time, value, onChange, state, lastValue]);
-  const handleChange = (0, import_react6.useCallback)((property, value2) => {
+  const handleChange = (0, import_react4.useCallback)((property, value2) => {
     setState({ [property]: value2 });
   }, []);
-  const handleSetNow = (0, import_react6.useCallback)(
+  const handleSetNow = (0, import_react4.useCallback)(
     (event) => {
       event.preventDefault();
       if (disabled || readonly) {
@@ -893,7 +877,7 @@ function AltDateWidget({
     },
     [disabled, readonly, time, onChange]
   );
-  const handleClear = (0, import_react6.useCallback)(
+  const handleClear = (0, import_react4.useCallback)(
     (event) => {
       event.preventDefault();
       if (disabled || readonly) {
@@ -955,12 +939,13 @@ function AltDateWidget({
 }
 
 // src/widgets/CheckboxWidget/CheckboxWidget.tsx
-var import_react7 = require("react");
+var import_react5 = require("react");
 var import_utils13 = require("@rjsf/utils");
 var import_jsx_runtime22 = require("react/jsx-runtime");
 function CheckboxWidget(props) {
   const {
     id,
+    htmlName,
     value,
     required,
     disabled,
@@ -981,17 +966,17 @@ function CheckboxWidget(props) {
     options
   );
   const description = options.description || schema.description;
-  const handleFocus = (0, import_react7.useCallback)(() => {
+  const handleFocus = (0, import_react5.useCallback)(() => {
     if (onFocus) {
       onFocus(id, value);
     }
   }, [onFocus, id, value]);
-  const handleBlur = (0, import_react7.useCallback)(() => {
+  const handleBlur = (0, import_react5.useCallback)(() => {
     if (onBlur) {
       onBlur(id, value);
     }
   }, [onBlur, id, value]);
-  const handleChange = (0, import_react7.useCallback)(
+  const handleChange = (0, import_react5.useCallback)(
     (event) => {
       onChange(event.target.checked);
     },
@@ -1002,6 +987,7 @@ function CheckboxWidget(props) {
     {
       type: "checkbox",
       id,
+      name: htmlName || id,
       checked: value,
       required,
       disabled: disabled || readonly,
@@ -1033,10 +1019,11 @@ function CheckboxWidget(props) {
 }
 
 // src/widgets/CheckboxesWidget/CheckboxesWidget.tsx
-var import_react8 = require("react");
+var import_react6 = require("react");
 var import_jsx_runtime23 = require("react/jsx-runtime");
 function CheckboxesWidget({
   id,
+  htmlName,
   disabled,
   options,
   value,
@@ -1048,7 +1035,7 @@ function CheckboxesWidget({
 }) {
   const { enumOptions } = options;
   const isEnumeratedObject = enumOptions && enumOptions[0]?.value && typeof enumOptions[0].value === "object";
-  const isChecked = (0, import_react8.useCallback)(
+  const isChecked = (0, import_react6.useCallback)(
     (option) => {
       if (!Array.isArray(value)) {
         return false;
@@ -1060,7 +1047,7 @@ function CheckboxesWidget({
     },
     [value, isEnumeratedObject]
   );
-  const handleChange = (0, import_react8.useCallback)(
+  const handleChange = (0, import_react6.useCallback)(
     (event) => {
       const index = Number(event.target.dataset.index);
       const option = enumOptions?.[index];
@@ -1077,7 +1064,7 @@ function CheckboxesWidget({
     },
     [onChange, value, isChecked, isEnumeratedObject, enumOptions]
   );
-  const handleFocus = (0, import_react8.useCallback)(
+  const handleFocus = (0, import_react6.useCallback)(
     (event) => {
       if (onFocus) {
         const index = Number(event.target.dataset.index);
@@ -1089,7 +1076,7 @@ function CheckboxesWidget({
     },
     [onFocus, id, enumOptions]
   );
-  const handleBlur = (0, import_react8.useCallback)(
+  const handleBlur = (0, import_react6.useCallback)(
     (event) => {
       if (onBlur) {
         const index = Number(event.target.dataset.index);
@@ -1108,7 +1095,7 @@ function CheckboxesWidget({
         type: "checkbox",
         id: `${id}-${option.value}`,
         className: "checkbox",
-        name: id,
+        name: htmlName || id,
         checked: isChecked(option),
         required,
         disabled: disabled || readonly,
@@ -1123,7 +1110,7 @@ function CheckboxesWidget({
 }
 
 // src/widgets/DateTimeWidget/DateTimeWidget.tsx
-var import_react9 = require("react");
+var import_react7 = require("react");
 var import_free_solid_svg_icons4 = require("@fortawesome/free-solid-svg-icons");
 var import_react_fontawesome2 = require("@fortawesome/react-fontawesome");
 var import_date_fns = require("date-fns");
@@ -1131,12 +1118,12 @@ var import_react_day_picker = require("react-day-picker");
 var import_style = require("react-day-picker/dist/style.css");
 var import_jsx_runtime24 = require("react/jsx-runtime");
 function useDatePickerState(initialDate) {
-  const [isOpen, setIsOpen] = (0, import_react9.useState)(false);
-  const [month, setMonth] = (0, import_react9.useState)(initialDate ?? /* @__PURE__ */ new Date());
+  const [isOpen, setIsOpen] = (0, import_react7.useState)(false);
+  const [month, setMonth] = (0, import_react7.useState)(initialDate ?? /* @__PURE__ */ new Date());
   return { isOpen, setIsOpen, month, setMonth };
 }
 function useClickOutside(ref, callback) {
-  (0, import_react9.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     const handleClickOutside = (event) => {
       if (ref.current && !ref.current.contains(event.target)) {
         callback();
@@ -1181,7 +1168,7 @@ function DateTimePickerPopup({ selectedDate, month, onMonthChange, onSelect, onT
     ...dayPickerStyles.modifiers,
     "custom-today": "btn btn-outline btn-info min-h-0 h-full"
   };
-  const handleClick = (0, import_react9.useCallback)((e) => {
+  const handleClick = (0, import_react7.useCallback)((e) => {
     e.stopPropagation();
   }, []);
   return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "p-3", children: [
@@ -1217,17 +1204,17 @@ function DateTimePickerPopup({ selectedDate, month, onMonthChange, onSelect, onT
     ] }) })
   ] });
 }
-var MemoizedDateTimePickerPopup = (0, import_react9.memo)(DateTimePickerPopup);
+var MemoizedDateTimePickerPopup = (0, import_react7.memo)(DateTimePickerPopup);
 function DateTimeWidget(props) {
   const { id, value, onChange, onFocus, onBlur, schema } = props;
-  const initialDate = (0, import_react9.useMemo)(() => value ? new Date(value) : void 0, [value]);
-  const [localDate, setLocalDate] = (0, import_react9.useState)(initialDate);
-  (0, import_react9.useEffect)(() => {
+  const initialDate = (0, import_react7.useMemo)(() => value ? new Date(value) : void 0, [value]);
+  const [localDate, setLocalDate] = (0, import_react7.useState)(initialDate);
+  (0, import_react7.useEffect)(() => {
     setLocalDate(initialDate);
   }, [initialDate]);
   const { isOpen, setIsOpen, month, setMonth } = useDatePickerState(initialDate);
-  const containerRef = (0, import_react9.useRef)(null);
-  const inputRef = (0, import_react9.useRef)(null);
+  const containerRef = (0, import_react7.useRef)(null);
+  const inputRef = (0, import_react7.useRef)(null);
   useClickOutside(containerRef, () => {
     if (isOpen) {
       setIsOpen(false);
@@ -1237,13 +1224,13 @@ function DateTimeWidget(props) {
       }
     }
   });
-  (0, import_react9.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     if (localDate) {
       setMonth(localDate);
     }
   }, [localDate, setMonth]);
-  const handleMonthChange = (0, import_react9.useCallback)((date) => setMonth(date), [setMonth]);
-  const handleSelect = (0, import_react9.useCallback)(
+  const handleMonthChange = (0, import_react7.useCallback)((date) => setMonth(date), [setMonth]);
+  const handleSelect = (0, import_react7.useCallback)(
     (date) => {
       if (date) {
         if (localDate) {
@@ -1254,7 +1241,7 @@ function DateTimeWidget(props) {
     },
     [localDate]
   );
-  const handleTimeChange = (0, import_react9.useCallback)(
+  const handleTimeChange = (0, import_react7.useCallback)(
     (e) => {
       if (localDate) {
         const [hours, minutes] = e.target.value.split(":");
@@ -1265,7 +1252,7 @@ function DateTimeWidget(props) {
     },
     [localDate]
   );
-  const togglePicker = (0, import_react9.useCallback)(
+  const togglePicker = (0, import_react7.useCallback)(
     (e) => {
       e.stopPropagation();
       setIsOpen((prev) => !prev);
@@ -1275,17 +1262,17 @@ function DateTimeWidget(props) {
     },
     [isOpen, id, onFocus, setIsOpen, value]
   );
-  const handleFocus = (0, import_react9.useCallback)(() => {
+  const handleFocus = (0, import_react7.useCallback)(() => {
     if (onFocus) {
       onFocus(id, value);
     }
   }, [id, onFocus, value]);
-  const handleBlur = (0, import_react9.useCallback)(() => {
+  const handleBlur = (0, import_react7.useCallback)(() => {
     if (!isOpen && onBlur) {
       onBlur(id, value);
     }
   }, [id, onBlur, value, isOpen]);
-  const handleKeyDown = (0, import_react9.useCallback)(
+  const handleKeyDown = (0, import_react7.useCallback)(
     (e) => {
       if (e.key === "Enter" || e.key === " ") {
         togglePicker(e);
@@ -1293,10 +1280,10 @@ function DateTimeWidget(props) {
     },
     [togglePicker]
   );
-  const handleContainerClick = (0, import_react9.useCallback)((e) => {
+  const handleContainerClick = (0, import_react7.useCallback)((e) => {
     e.stopPropagation();
   }, []);
-  (0, import_react9.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     const handleEscape = (e) => {
       if (e.key === "Escape" && isOpen) {
         setIsOpen(false);
@@ -1308,7 +1295,7 @@ function DateTimeWidget(props) {
     document.addEventListener("keydown", handleEscape);
     return () => document.removeEventListener("keydown", handleEscape);
   }, [id, isOpen, setIsOpen, onBlur, value]);
-  const handleDoneClick = (0, import_react9.useCallback)(() => {
+  const handleDoneClick = (0, import_react7.useCallback)(() => {
     setIsOpen(false);
     onChange(localDate ? localDate.toISOString() : "");
     if (onBlur) {
@@ -1369,7 +1356,7 @@ function DateTimeWidget(props) {
 }
 
 // src/widgets/DateWidget/DateWidget.tsx
-var import_react10 = require("react");
+var import_react8 = require("react");
 var import_free_solid_svg_icons5 = require("@fortawesome/free-solid-svg-icons");
 var import_react_fontawesome3 = require("@fortawesome/react-fontawesome");
 var import_date_fns2 = require("date-fns");
@@ -1377,12 +1364,12 @@ var import_react_day_picker2 = require("react-day-picker");
 var import_style2 = require("react-day-picker/dist/style.css");
 var import_jsx_runtime25 = require("react/jsx-runtime");
 function useDatePickerState2(initialDate) {
-  const [isOpen, setIsOpen] = (0, import_react10.useState)(false);
-  const [month, setMonth] = (0, import_react10.useState)(initialDate ?? /* @__PURE__ */ new Date());
+  const [isOpen, setIsOpen] = (0, import_react8.useState)(false);
+  const [month, setMonth] = (0, import_react8.useState)(initialDate ?? /* @__PURE__ */ new Date());
   return { isOpen, setIsOpen, month, setMonth };
 }
 function useClickOutside2(ref, callback) {
-  (0, import_react10.useEffect)(() => {
+  (0, import_react8.useEffect)(() => {
     const handleClickOutside = (event) => {
       if (ref.current && !ref.current.contains(event.target)) {
         callback();
@@ -1445,17 +1432,17 @@ function DatePickerPopup({ selectedDate, month, onMonthChange, onSelect }) {
     }
   ) });
 }
-var MemoizedDatePickerPopup = (0, import_react10.memo)(DatePickerPopup);
+var MemoizedDatePickerPopup = (0, import_react8.memo)(DatePickerPopup);
 function DateWidget(props) {
   const { id, value, onChange, onFocus, onBlur, schema } = props;
-  const initialDate = (0, import_react10.useMemo)(() => value ? new Date(value) : void 0, [value]);
-  const [localDate, setLocalDate] = (0, import_react10.useState)(initialDate);
-  (0, import_react10.useEffect)(() => {
+  const initialDate = (0, import_react8.useMemo)(() => value ? new Date(value) : void 0, [value]);
+  const [localDate, setLocalDate] = (0, import_react8.useState)(initialDate);
+  (0, import_react8.useEffect)(() => {
     setLocalDate(initialDate);
   }, [initialDate]);
   const { isOpen, setIsOpen, month, setMonth } = useDatePickerState2(initialDate);
-  const containerRef = (0, import_react10.useRef)(null);
-  const inputRef = (0, import_react10.useRef)(null);
+  const containerRef = (0, import_react8.useRef)(null);
+  const inputRef = (0, import_react8.useRef)(null);
   useClickOutside2(containerRef, () => {
     if (isOpen) {
       setIsOpen(false);
@@ -1465,19 +1452,19 @@ function DateWidget(props) {
       }
     }
   });
-  (0, import_react10.useEffect)(() => {
+  (0, import_react8.useEffect)(() => {
     if (localDate) {
       setMonth(localDate);
     }
   }, [localDate, setMonth]);
-  const handleMonthChange = (0, import_react10.useCallback)((date) => setMonth(date), [setMonth]);
-  const handleSelect = (0, import_react10.useCallback)((date) => {
+  const handleMonthChange = (0, import_react8.useCallback)((date) => setMonth(date), [setMonth]);
+  const handleSelect = (0, import_react8.useCallback)((date) => {
     if (date) {
       date.setHours(0, 0, 0, 0);
       setLocalDate(date);
     }
   }, []);
-  (0, import_react10.useEffect)(() => {
+  (0, import_react8.useEffect)(() => {
     let portalContainer = document.getElementById("date-picker-portal");
     if (!portalContainer) {
       portalContainer = document.createElement("div");
@@ -1509,7 +1496,7 @@ function DateWidget(props) {
     }
     return { doc, win };
   };
-  const renderCalendar = (0, import_react10.useCallback)(() => {
+  const renderCalendar = (0, import_react8.useCallback)(() => {
     if (!containerRef.current || !inputRef.current) {
       return;
     }
@@ -1527,7 +1514,7 @@ function DateWidget(props) {
     }
     containerRef.current.style.zIndex = "99999";
   }, [containerRef, inputRef]);
-  (0, import_react10.useEffect)(() => {
+  (0, import_react8.useEffect)(() => {
     if (!isOpen) {
       return;
     }
@@ -1539,7 +1526,7 @@ function DateWidget(props) {
       window.removeEventListener("scroll", renderCalendar);
     };
   }, [isOpen, renderCalendar]);
-  const togglePicker = (0, import_react10.useCallback)(
+  const togglePicker = (0, import_react8.useCallback)(
     (e) => {
       e.stopPropagation();
       setIsOpen((prev) => !prev);
@@ -1549,17 +1536,17 @@ function DateWidget(props) {
     },
     [isOpen, id, onFocus, setIsOpen, value]
   );
-  const handleFocus = (0, import_react10.useCallback)(() => {
+  const handleFocus = (0, import_react8.useCallback)(() => {
     if (onFocus) {
       onFocus(id, value);
     }
   }, [id, onFocus, value]);
-  const handleBlur = (0, import_react10.useCallback)(() => {
+  const handleBlur = (0, import_react8.useCallback)(() => {
     if (!isOpen && onBlur) {
       onBlur(id, value);
     }
   }, [id, onBlur, value, isOpen]);
-  (0, import_react10.useEffect)(() => {
+  (0, import_react8.useEffect)(() => {
     const handleEscape = (e) => {
       if (e.key === "Escape" && isOpen) {
         setIsOpen(false);
@@ -1571,7 +1558,7 @@ function DateWidget(props) {
     document.addEventListener("keydown", handleEscape);
     return () => document.removeEventListener("keydown", handleEscape);
   }, [id, isOpen, setIsOpen, onBlur, value]);
-  const handleDoneClick = (0, import_react10.useCallback)(() => {
+  const handleDoneClick = (0, import_react8.useCallback)(() => {
     setIsOpen(false);
     onChange(localDate ? localDate.toISOString() : "");
     if (onBlur) {
@@ -1639,13 +1626,13 @@ function DateWidget(props) {
 }
 
 // src/widgets/FileWidget/FileWidget.tsx
-var import_react11 = require("react");
+var import_react9 = require("react");
 var import_jsx_runtime26 = require("react/jsx-runtime");
 function FileWidget(props) {
   const { id, required, disabled, readonly, schema, onChange, onFocus, onBlur, options = {} } = props;
   const isMulti = schema.type === "array" || Boolean(options.multiple);
   const accept = typeof options.accept === "string" ? options.accept : void 0;
-  const handleChange = (0, import_react11.useCallback)(
+  const handleChange = (0, import_react9.useCallback)(
     (event) => {
       if (!event.target.files) {
         return;
@@ -1659,7 +1646,7 @@ function FileWidget(props) {
     },
     [onChange, isMulti]
   );
-  const handleFocus = (0, import_react11.useCallback)(
+  const handleFocus = (0, import_react9.useCallback)(
     (event) => {
       if (onFocus) {
         onFocus(id, event.target.files ? Array.from(event.target.files) : null);
@@ -1667,7 +1654,7 @@ function FileWidget(props) {
     },
     [onFocus, id]
   );
-  const handleBlur = (0, import_react11.useCallback)(
+  const handleBlur = (0, import_react9.useCallback)(
     (event) => {
       if (onBlur) {
         onBlur(id, event.target.files ? Array.from(event.target.files) : null);
@@ -1693,10 +1680,11 @@ function FileWidget(props) {
 }
 
 // src/widgets/RadioWidget/RadioWidget.tsx
-var import_react12 = require("react");
+var import_react10 = require("react");
 var import_jsx_runtime27 = require("react/jsx-runtime");
 function RadioWidget({
   id,
+  htmlName,
   options,
   value,
   required,
@@ -1717,7 +1705,7 @@ function RadioWidget({
     }
     return value === option.value;
   };
-  const handleFocus = (0, import_react12.useCallback)(
+  const handleFocus = (0, import_react10.useCallback)(
     (event) => {
       if (onFocus) {
         const index = Number(event.target.dataset.index);
@@ -1727,7 +1715,7 @@ function RadioWidget({
     },
     [onFocus, id, enumOptions]
   );
-  const handleBlur = (0, import_react12.useCallback)(
+  const handleBlur = (0, import_react10.useCallback)(
     (event) => {
       if (onBlur) {
         const index = Number(event.target.dataset.index);
@@ -1737,7 +1725,7 @@ function RadioWidget({
     },
     [onBlur, id, enumOptions]
   );
-  const handleChange = (0, import_react12.useCallback)(
+  const handleChange = (0, import_react10.useCallback)(
     (event) => {
       const index = Number(event.target.dataset.index);
       const option = enumOptions?.[index];
@@ -1755,7 +1743,7 @@ function RadioWidget({
         type: "radio",
         id: `${id}-${option.value}`,
         className: "radio",
-        name: id,
+        name: htmlName || id,
         value: getValue(option),
         checked: isChecked(option),
         required,
@@ -1771,7 +1759,7 @@ function RadioWidget({
 }
 
 // src/widgets/RangeWidget/RangeWidget.tsx
-var import_react13 = require("react");
+var import_react11 = require("react");
 var import_jsx_runtime28 = require("react/jsx-runtime");
 function RangeWidget({
   id,
@@ -1794,7 +1782,7 @@ function RangeWidget({
       onBlur(id, event.target.value);
     }
   };
-  const handleChange = (0, import_react13.useCallback)(
+  const handleChange = (0, import_react11.useCallback)(
     (event) => {
       onChange(event.target.value);
     },
@@ -1823,7 +1811,7 @@ function RangeWidget({
 }
 
 // src/widgets/RatingWidget/RatingWidget.tsx
-var import_react14 = require("react");
+var import_react12 = require("react");
 var import_jsx_runtime29 = require("react/jsx-runtime");
 function RatingWidget({
   id,
@@ -1843,13 +1831,13 @@ function RatingWidget({
   const min = schema.minimum || 0;
   const maskClass = shape === "heart" ? "mask-heart" : "mask-star-2";
   const sizeClass = size === "md" ? "" : `rating-${size}`;
-  const _onChange = (0, import_react14.useCallback)(
+  const _onChange = (0, import_react12.useCallback)(
     ({ target: { value: value2 } }) => {
       onChange(parseInt(value2));
     },
     [onChange]
   );
-  const handleFocus = (0, import_react14.useCallback)(
+  const handleFocus = (0, import_react12.useCallback)(
     (event) => {
       if (onFocus) {
         const starValue = Number(event.target.value);
@@ -1858,7 +1846,7 @@ function RatingWidget({
     },
     [onFocus, id]
   );
-  const handleBlur = (0, import_react14.useCallback)(
+  const handleBlur = (0, import_react12.useCallback)(
     (event) => {
       if (onBlur) {
         const starValue = Number(event.target.value);
@@ -1899,7 +1887,7 @@ function RatingWidget({
 }
 
 // src/widgets/SelectWidget/SelectWidget.tsx
-var import_react15 = require("react");
+var import_react13 = require("react");
 var import_utils14 = require("@rjsf/utils");
 var import_jsx_runtime30 = require("react/jsx-runtime");
 function SelectWidget({
@@ -1931,7 +1919,7 @@ function SelectWidget({
     return String(val);
   };
   const isEnumeratedObject = enumOptions && enumOptions[0]?.value && typeof enumOptions[0].value === "object";
-  const handleOptionClick = (0, import_react15.useCallback)(
+  const handleOptionClick = (0, import_react13.useCallback)(
     (event) => {
       const index = Number(event.currentTarget.dataset.value);
       if (isNaN(index)) {
@@ -1950,7 +1938,7 @@ function SelectWidget({
     },
     [value, multiple, isEnumeratedObject, enumOptions, optEmptyVal, onChange]
   );
-  const _onBlur = (0, import_react15.useCallback)(
+  const _onBlur = (0, import_react13.useCallback)(
     ({ target }) => {
       const dataValue = target?.getAttribute("data-value");
       if (dataValue !== null) {
@@ -1959,7 +1947,7 @@ function SelectWidget({
     },
     [onBlur, id, enumOptions, optEmptyVal]
   );
-  const _onFocus = (0, import_react15.useCallback)(
+  const _onFocus = (0, import_react13.useCallback)(
     ({ target }) => {
       const dataValue = target?.getAttribute("data-value");
       if (dataValue !== null) {
@@ -2013,11 +2001,11 @@ function SelectWidget({
 }
 
 // src/widgets/TextareaWidget/TextareaWidget.tsx
-var import_react16 = require("react");
+var import_react14 = require("react");
 var import_jsx_runtime31 = require("react/jsx-runtime");
 function TextareaWidget(props) {
-  const { id, value, required, disabled, readonly, onChange, onFocus, onBlur, options } = props;
-  const handleFocus = (0, import_react16.useCallback)(
+  const { id, htmlName, value, required, disabled, readonly, onChange, onFocus, onBlur, options } = props;
+  const handleFocus = (0, import_react14.useCallback)(
     (event) => {
       if (onFocus) {
         onFocus(id, event.target.value);
@@ -2025,7 +2013,7 @@ function TextareaWidget(props) {
     },
     [onFocus, id]
   );
-  const handleBlur = (0, import_react16.useCallback)(
+  const handleBlur = (0, import_react14.useCallback)(
     (event) => {
       if (onBlur) {
         onBlur(id, event.target.value);
@@ -2033,7 +2021,7 @@ function TextareaWidget(props) {
     },
     [onBlur, id]
   );
-  const handleChange = (0, import_react16.useCallback)(
+  const handleChange = (0, import_react14.useCallback)(
     (event) => {
       onChange(event.target.value);
     },
@@ -2044,6 +2032,7 @@ function TextareaWidget(props) {
     "textarea",
     {
       id,
+      name: htmlName || id,
       value: value || "",
       required,
       disabled: disabled || readonly,
@@ -2058,11 +2047,11 @@ function TextareaWidget(props) {
 }
 
 // src/widgets/TimeWidget/TimeWidget.tsx
-var import_react17 = require("react");
+var import_react15 = require("react");
 var import_jsx_runtime32 = require("react/jsx-runtime");
 function TimeWidget(props) {
   const { id, value, onChange, onFocus, onBlur, required, disabled, readonly } = props;
-  const handleFocus = (0, import_react17.useCallback)(
+  const handleFocus = (0, import_react15.useCallback)(
     (event) => {
       if (onFocus) {
         onFocus(id, event.target.value);
@@ -2070,7 +2059,7 @@ function TimeWidget(props) {
     },
     [onFocus, id]
   );
-  const handleBlur = (0, import_react17.useCallback)(
+  const handleBlur = (0, import_react15.useCallback)(
     (event) => {
       if (onBlur) {
         onBlur(id, event.target.value);
@@ -2078,7 +2067,7 @@ function TimeWidget(props) {
     },
     [onBlur, id]
   );
-  const handleChange = (0, import_react17.useCallback)(
+  const handleChange = (0, import_react15.useCallback)(
     (event) => {
       onChange(event.target.value);
     },
@@ -2102,19 +2091,19 @@ function TimeWidget(props) {
 }
 
 // src/widgets/ToggleWidget/ToggleWidget.tsx
-var import_react18 = require("react");
+var import_react16 = require("react");
 var import_jsx_runtime33 = require("react/jsx-runtime");
 function ToggleWidget({ id, value, required, disabled, readonly, autofocus, onChange, onFocus, onBlur, options }) {
-  const _onChange = (0, import_react18.useCallback)(
+  const _onChange = (0, import_react16.useCallback)(
     ({ target: { checked } }) => onChange(checked),
     [onChange]
   );
-  const handleFocus = (0, import_react18.useCallback)(() => {
+  const handleFocus = (0, import_react16.useCallback)(() => {
     if (onFocus) {
       onFocus(id, value);
     }
   }, [onFocus, id, value]);
-  const handleBlur = (0, import_react18.useCallback)(() => {
+  const handleBlur = (0, import_react16.useCallback)(() => {
     if (onBlur) {
       onBlur(id, value);
     }
@@ -2179,20 +2168,20 @@ function generateTheme() {
 }
 var Theme = generateTheme();
 var Theme_default = Theme;
-var ThemeContext = (0, import_react19.createContext)({
+var ThemeContext = (0, import_react17.createContext)({
   theme: "night",
   setTheme: () => {
   }
 });
 function ThemeProvider({ children }) {
-  const [theme, setTheme] = (0, import_react19.useState)(() => {
+  const [theme, setTheme] = (0, import_react17.useState)(() => {
     try {
       return localStorage.getItem("daisyui-theme") || "cupcake";
     } catch {
       return "cupcake";
     }
   });
-  const handleSetTheme = (0, import_react19.useCallback)((newTheme) => {
+  const handleSetTheme = (0, import_react17.useCallback)((newTheme) => {
     try {
       localStorage.setItem("daisyui-theme", newTheme);
       setTheme(newTheme);
@@ -2201,7 +2190,7 @@ function ThemeProvider({ children }) {
   }, []);
   return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(ThemeContext.Provider, { value: { theme, setTheme: handleSetTheme }, children });
 }
-var useTheme = () => (0, import_react19.useContext)(ThemeContext);
+var useTheme = () => (0, import_react17.useContext)(ThemeContext);
 
 // src/DaisyUIForm.tsx
 var import_core3 = require("@rjsf/core");
@@ -2209,7 +2198,7 @@ var DaisyUIForm = (0, import_core3.withTheme)(Theme_default);
 var DaisyUIForm_default = DaisyUIForm;
 
 // src/DaisyUIFrameProvider.tsx
-var import_react20 = require("react");
+var import_react18 = require("react");
 var import_jsx_runtime35 = require("react/jsx-runtime");
 function DaisyUIFrameComponent(props) {
   const { children, subtheme = {}, document: document2 } = props;
@@ -2224,7 +2213,7 @@ function DaisyUIFrameComponent(props) {
       return "cupcake";
     }
   })();
-  (0, import_react20.useEffect)(() => {
+  (0, import_react18.useEffect)(() => {
     if (document2) {
       const configScript = document2.createElement("script");
       configScript.textContent = `