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

package/dist/chakra-ui.esm.js

@@ -2,11 +2,10 @@
 import { withTheme as withTheme2 } from "@rjsf/core";
 
 // src/theme/Theme.tsx
-import { createContext, useCallback as useCallback17, useContext, useState as useState4 } from "react";
+import { createContext, useCallback as useCallback16, useContext, useState as useState4 } from "react";
 import { getDefaultRegistry } from "@rjsf/core";
 
 // src/templates/ArrayFieldItemButtonsTemplate/ArrayFieldItemButtonsTemplate.tsx
-import { useMemo } from "react";
 import {
   buttonId
 } from "@rjsf/utils";
@@ -19,19 +18,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 = useMemo(() => onCopyIndexClick(index), [index, onCopyIndexClick]);
-  const onRemoveClick = useMemo(() => onDropIndexClick(index), [index, onDropIndexClick]);
-  const onArrowUpClick = useMemo(() => onReorderClick(index, index - 1), [index, onReorderClick]);
-  const onArrowDownClick = 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";
@@ -43,7 +38,7 @@ function ArrayFieldItemButtonsTemplate(props) {
           id: buttonId(fieldPathId, "moveUp"),
           className: `rjsf-array-item-move-up ${btnClass}`,
           disabled: disabled || readonly || !hasMoveUp,
-          onClick: onArrowUpClick,
+          onClick: onMoveUpItem,
           uiSchema,
           registry
         }
@@ -54,7 +49,7 @@ function ArrayFieldItemButtonsTemplate(props) {
           id: buttonId(fieldPathId, "moveDown"),
           className: `rjsf-array-item-move-down ${btnClass}`,
           disabled: disabled || readonly || !hasMoveDown,
-          onClick: onArrowDownClick,
+          onClick: onMoveDownItem,
           uiSchema,
           registry
         }
@@ -66,7 +61,7 @@ function ArrayFieldItemButtonsTemplate(props) {
         id: buttonId(fieldPathId, "copy"),
         className: `rjsf-array-item-copy ${btnClass}`,
         disabled: disabled || readonly,
-        onClick: onCopyClick,
+        onClick: onCopyItem,
         uiSchema,
         registry
       }
@@ -77,7 +72,7 @@ function ArrayFieldItemButtonsTemplate(props) {
         id: buttonId(fieldPathId, "remove"),
         className: `rjsf-array-item-remove ${removeBtnClass}`,
         disabled: disabled || readonly,
-        onClick: onRemoveClick,
+        onClick: onRemoveItem,
         uiSchema,
         registry
       }
@@ -142,11 +137,6 @@ function ArrayFieldTemplate(props) {
     registry,
     uiOptions
   );
-  const ArrayFieldItemTemplate2 = getTemplate2(
-    "ArrayFieldItemTemplate",
-    registry,
-    uiOptions
-  );
   const ArrayFieldTitleTemplate = getTemplate2(
     "ArrayFieldTitleTemplate",
     registry,
@@ -190,7 +180,7 @@ function ArrayFieldTemplate(props) {
     /* @__PURE__ */ jsxs3("div", { className: "flex flex-col gap-4", children: [
       !showOptionalDataControlInTitle ? optionalDataControl : void 0,
       /* @__PURE__ */ jsxs3("div", { className: "rjsf-array-item-list", children: [
-        items.map(({ key, ...itemProps }, index) => /* @__PURE__ */ jsx3(ArrayFieldItemTemplate2, { ...itemProps, index, totalItems: items.length }, key)),
+        items,
         items && items.length === 0 && canAdd && /* @__PURE__ */ jsx3("div", { className: "text-center italic text-base-content/70", children: TranslatableString.EmptyArray })
       ] }),
       canAdd && /* @__PURE__ */ jsx3("div", { className: "flex justify-end", children: /* @__PURE__ */ jsx3(
@@ -219,6 +209,7 @@ import { Fragment as Fragment2, jsx as jsx4, jsxs as jsxs4 } from "react/jsx-run
 function BaseInputTemplate(props) {
   const {
     id,
+    htmlName,
     value,
     required,
     disabled,
@@ -256,7 +247,7 @@ function BaseInputTemplate(props) {
         "input",
         {
           id,
-          name: id,
+          name: htmlName || id,
           value: value || value === 0 ? value : "",
           placeholder,
           required,
@@ -438,21 +429,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";
@@ -469,8 +461,9 @@ function FieldTemplate(props) {
       disabled: divProps.disabled,
       id,
       label,
-      onDropPropertyClick,
-      onKeyChange,
+      onKeyRename,
+      onKeyRenameBlur,
+      onRemoveProperty,
       readonly,
       required,
       schema,
@@ -532,7 +525,7 @@ function ObjectFieldTemplate(props) {
     schema,
     formData,
     optionalDataControl,
-    onAddClick,
+    onAddProperty,
     registry
   } = props;
   const uiOptions = getUiOptions4(uiSchema);
@@ -587,7 +580,7 @@ function ObjectFieldTemplate(props) {
         {
           id: buttonId3(fieldPathId, "add"),
           className: "rjsf-object-property-expand btn btn-primary btn-sm",
-          onClick: onAddClick(schema),
+          onClick: onAddProperty,
           disabled: disabled || readonly,
           uiSchema,
           registry
@@ -650,7 +643,6 @@ function TitleField(props) {
 }
 
 // src/templates/WrapIfAdditionalTemplate/WrapIfAdditionalTemplate.tsx
-import { useCallback as useCallback3 } from "react";
 import {
   buttonId as buttonId4,
   ADDITIONAL_PROPERTY_FLAG,
@@ -668,8 +660,9 @@ function WrapIfAdditionalTemplate(props) {
     required,
     schema,
     uiSchema,
-    onKeyChange,
-    onDropPropertyClick,
+    onKeyRename,
+    onKeyRenameBlur,
+    onRemoveProperty,
     registry,
     ...rest
   } = props;
@@ -677,15 +670,6 @@ function WrapIfAdditionalTemplate(props) {
   const { templates, translateString } = registry;
   const { RemoveButton: RemoveButton2 } = templates.ButtonTemplates;
   const keyLabel = translateString(TranslatableString4.KeyLabel, [label]);
-  const handleBlur = useCallback3(
-    (event) => {
-      onKeyChange(event.target.value);
-    },
-    [onKeyChange]
-  );
-  const handleRemove = useCallback3(() => {
-    onDropPropertyClick(label)();
-  }, [onDropPropertyClick, label]);
   if (!additional) {
     return /* @__PURE__ */ jsx19("div", { className: classNames, children });
   }
@@ -698,7 +682,7 @@ function WrapIfAdditionalTemplate(props) {
           type: "text",
           className: "input input-bordered",
           id: `${id}-key`,
-          onBlur: handleBlur,
+          onBlur: onKeyRenameBlur,
           defaultValue: label,
           disabled: disabled || readonly
         }
@@ -711,7 +695,7 @@ function WrapIfAdditionalTemplate(props) {
         id: buttonId4(id, "remove"),
         className: "rjsf-object-property-remove",
         disabled: disabled || readonly,
-        onClick: handleRemove,
+        onClick: onRemoveProperty,
         uiSchema,
         registry
       }
@@ -761,7 +745,7 @@ function AltDateTimeWidget({
 var AltDateTimeWidget_default = AltDateTimeWidget;
 
 // src/widgets/AltDateWidget/AltDateWidget.tsx
-import { useCallback as useCallback4, useEffect, useReducer, useState } from "react";
+import { useCallback as useCallback3, useEffect, useReducer, useState } from "react";
 import {
   ariaDescribedByIds as ariaDescribedByIds2,
   TranslatableString as TranslatableString5,
@@ -810,7 +794,7 @@ function DateElement({
 }) {
   const id = `${rootId}_${type}`;
   const { SelectWidget: SelectWidget2 } = registry.widgets;
-  const handleChange = useCallback4(
+  const handleChange = useCallback3(
     (value2) => {
       select(type, value2);
     },
@@ -880,10 +864,10 @@ function AltDateWidget({
       setState(parseDateString(value, time));
     }
   }, [time, value, onChange, state, lastValue]);
-  const handleChange = useCallback4((property, value2) => {
+  const handleChange = useCallback3((property, value2) => {
     setState({ [property]: value2 });
   }, []);
-  const handleSetNow = useCallback4(
+  const handleSetNow = useCallback3(
     (event) => {
       event.preventDefault();
       if (disabled || readonly) {
@@ -895,7 +879,7 @@ function AltDateWidget({
     },
     [disabled, readonly, time, onChange]
   );
-  const handleClear = useCallback4(
+  const handleClear = useCallback3(
     (event) => {
       event.preventDefault();
       if (disabled || readonly) {
@@ -957,12 +941,13 @@ function AltDateWidget({
 }
 
 // src/widgets/CheckboxWidget/CheckboxWidget.tsx
-import { useCallback as useCallback5 } from "react";
+import { useCallback as useCallback4 } from "react";
 import { getTemplate as getTemplate5, descriptionId as descriptionId2 } from "@rjsf/utils";
 import { jsx as jsx22, jsxs as jsxs11 } from "react/jsx-runtime";
 function CheckboxWidget(props) {
   const {
     id,
+    htmlName,
     value,
     required,
     disabled,
@@ -983,17 +968,17 @@ function CheckboxWidget(props) {
     options
   );
   const description = options.description || schema.description;
-  const handleFocus = useCallback5(() => {
+  const handleFocus = useCallback4(() => {
     if (onFocus) {
       onFocus(id, value);
     }
   }, [onFocus, id, value]);
-  const handleBlur = useCallback5(() => {
+  const handleBlur = useCallback4(() => {
     if (onBlur) {
       onBlur(id, value);
     }
   }, [onBlur, id, value]);
-  const handleChange = useCallback5(
+  const handleChange = useCallback4(
     (event) => {
       onChange(event.target.checked);
     },
@@ -1004,6 +989,7 @@ function CheckboxWidget(props) {
     {
       type: "checkbox",
       id,
+      name: htmlName || id,
       checked: value,
       required,
       disabled: disabled || readonly,
@@ -1035,10 +1021,11 @@ function CheckboxWidget(props) {
 }
 
 // src/widgets/CheckboxesWidget/CheckboxesWidget.tsx
-import { useCallback as useCallback6 } from "react";
+import { useCallback as useCallback5 } from "react";
 import { jsx as jsx23, jsxs as jsxs12 } from "react/jsx-runtime";
 function CheckboxesWidget({
   id,
+  htmlName,
   disabled,
   options,
   value,
@@ -1050,7 +1037,7 @@ function CheckboxesWidget({
 }) {
   const { enumOptions } = options;
   const isEnumeratedObject = enumOptions && enumOptions[0]?.value && typeof enumOptions[0].value === "object";
-  const isChecked = useCallback6(
+  const isChecked = useCallback5(
     (option) => {
       if (!Array.isArray(value)) {
         return false;
@@ -1062,7 +1049,7 @@ function CheckboxesWidget({
     },
     [value, isEnumeratedObject]
   );
-  const handleChange = useCallback6(
+  const handleChange = useCallback5(
     (event) => {
       const index = Number(event.target.dataset.index);
       const option = enumOptions?.[index];
@@ -1079,7 +1066,7 @@ function CheckboxesWidget({
     },
     [onChange, value, isChecked, isEnumeratedObject, enumOptions]
   );
-  const handleFocus = useCallback6(
+  const handleFocus = useCallback5(
     (event) => {
       if (onFocus) {
         const index = Number(event.target.dataset.index);
@@ -1091,7 +1078,7 @@ function CheckboxesWidget({
     },
     [onFocus, id, enumOptions]
   );
-  const handleBlur = useCallback6(
+  const handleBlur = useCallback5(
     (event) => {
       if (onBlur) {
         const index = Number(event.target.dataset.index);
@@ -1110,7 +1097,7 @@ function CheckboxesWidget({
         type: "checkbox",
         id: `${id}-${option.value}`,
         className: "checkbox",
-        name: id,
+        name: htmlName || id,
         checked: isChecked(option),
         required,
         disabled: disabled || readonly,
@@ -1125,7 +1112,7 @@ function CheckboxesWidget({
 }
 
 // src/widgets/DateTimeWidget/DateTimeWidget.tsx
-import { memo as memo2, useCallback as useCallback7, useEffect as useEffect2, useMemo as useMemo2, useRef, useState as useState2 } from "react";
+import { memo as memo2, useCallback as useCallback6, useEffect as useEffect2, useMemo, useRef, useState as useState2 } from "react";
 import { faCalendar } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon as FontAwesomeIcon2 } from "@fortawesome/react-fontawesome";
 import { format, isSameDay, isToday, isValid } from "date-fns";
@@ -1183,7 +1170,7 @@ function DateTimePickerPopup({ selectedDate, month, onMonthChange, onSelect, onT
     ...dayPickerStyles.modifiers,
     "custom-today": "btn btn-outline btn-info min-h-0 h-full"
   };
-  const handleClick = useCallback7((e) => {
+  const handleClick = useCallback6((e) => {
     e.stopPropagation();
   }, []);
   return /* @__PURE__ */ jsxs13("div", { className: "p-3", children: [
@@ -1222,7 +1209,7 @@ function DateTimePickerPopup({ selectedDate, month, onMonthChange, onSelect, onT
 var MemoizedDateTimePickerPopup = memo2(DateTimePickerPopup);
 function DateTimeWidget(props) {
   const { id, value, onChange, onFocus, onBlur, schema } = props;
-  const initialDate = useMemo2(() => value ? new Date(value) : void 0, [value]);
+  const initialDate = useMemo(() => value ? new Date(value) : void 0, [value]);
   const [localDate, setLocalDate] = useState2(initialDate);
   useEffect2(() => {
     setLocalDate(initialDate);
@@ -1244,8 +1231,8 @@ function DateTimeWidget(props) {
       setMonth(localDate);
     }
   }, [localDate, setMonth]);
-  const handleMonthChange = useCallback7((date) => setMonth(date), [setMonth]);
-  const handleSelect = useCallback7(
+  const handleMonthChange = useCallback6((date) => setMonth(date), [setMonth]);
+  const handleSelect = useCallback6(
     (date) => {
       if (date) {
         if (localDate) {
@@ -1256,7 +1243,7 @@ function DateTimeWidget(props) {
     },
     [localDate]
   );
-  const handleTimeChange = useCallback7(
+  const handleTimeChange = useCallback6(
     (e) => {
       if (localDate) {
         const [hours, minutes] = e.target.value.split(":");
@@ -1267,7 +1254,7 @@ function DateTimeWidget(props) {
     },
     [localDate]
   );
-  const togglePicker = useCallback7(
+  const togglePicker = useCallback6(
     (e) => {
       e.stopPropagation();
       setIsOpen((prev) => !prev);
@@ -1277,17 +1264,17 @@ function DateTimeWidget(props) {
     },
     [isOpen, id, onFocus, setIsOpen, value]
   );
-  const handleFocus = useCallback7(() => {
+  const handleFocus = useCallback6(() => {
     if (onFocus) {
       onFocus(id, value);
     }
   }, [id, onFocus, value]);
-  const handleBlur = useCallback7(() => {
+  const handleBlur = useCallback6(() => {
     if (!isOpen && onBlur) {
       onBlur(id, value);
     }
   }, [id, onBlur, value, isOpen]);
-  const handleKeyDown = useCallback7(
+  const handleKeyDown = useCallback6(
     (e) => {
       if (e.key === "Enter" || e.key === " ") {
         togglePicker(e);
@@ -1295,7 +1282,7 @@ function DateTimeWidget(props) {
     },
     [togglePicker]
   );
-  const handleContainerClick = useCallback7((e) => {
+  const handleContainerClick = useCallback6((e) => {
     e.stopPropagation();
   }, []);
   useEffect2(() => {
@@ -1310,7 +1297,7 @@ function DateTimeWidget(props) {
     document.addEventListener("keydown", handleEscape);
     return () => document.removeEventListener("keydown", handleEscape);
   }, [id, isOpen, setIsOpen, onBlur, value]);
-  const handleDoneClick = useCallback7(() => {
+  const handleDoneClick = useCallback6(() => {
     setIsOpen(false);
     onChange(localDate ? localDate.toISOString() : "");
     if (onBlur) {
@@ -1371,7 +1358,7 @@ function DateTimeWidget(props) {
 }
 
 // src/widgets/DateWidget/DateWidget.tsx
-import { memo as memo3, useCallback as useCallback8, useEffect as useEffect3, useMemo as useMemo3, useRef as useRef2, useState as useState3 } from "react";
+import { memo as memo3, useCallback as useCallback7, useEffect as useEffect3, useMemo as useMemo2, useRef as useRef2, useState as useState3 } from "react";
 import { faCalendar as faCalendar2 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon as FontAwesomeIcon3 } from "@fortawesome/react-fontawesome";
 import { format as format2, isSameDay as isSameDay2, isToday as isToday2, isValid as isValid2 } from "date-fns";
@@ -1450,7 +1437,7 @@ function DatePickerPopup({ selectedDate, month, onMonthChange, onSelect }) {
 var MemoizedDatePickerPopup = memo3(DatePickerPopup);
 function DateWidget(props) {
   const { id, value, onChange, onFocus, onBlur, schema } = props;
-  const initialDate = useMemo3(() => value ? new Date(value) : void 0, [value]);
+  const initialDate = useMemo2(() => value ? new Date(value) : void 0, [value]);
   const [localDate, setLocalDate] = useState3(initialDate);
   useEffect3(() => {
     setLocalDate(initialDate);
@@ -1472,8 +1459,8 @@ function DateWidget(props) {
       setMonth(localDate);
     }
   }, [localDate, setMonth]);
-  const handleMonthChange = useCallback8((date) => setMonth(date), [setMonth]);
-  const handleSelect = useCallback8((date) => {
+  const handleMonthChange = useCallback7((date) => setMonth(date), [setMonth]);
+  const handleSelect = useCallback7((date) => {
     if (date) {
       date.setHours(0, 0, 0, 0);
       setLocalDate(date);
@@ -1511,7 +1498,7 @@ function DateWidget(props) {
     }
     return { doc, win };
   };
-  const renderCalendar = useCallback8(() => {
+  const renderCalendar = useCallback7(() => {
     if (!containerRef.current || !inputRef.current) {
       return;
     }
@@ -1541,7 +1528,7 @@ function DateWidget(props) {
       window.removeEventListener("scroll", renderCalendar);
     };
   }, [isOpen, renderCalendar]);
-  const togglePicker = useCallback8(
+  const togglePicker = useCallback7(
     (e) => {
       e.stopPropagation();
       setIsOpen((prev) => !prev);
@@ -1551,12 +1538,12 @@ function DateWidget(props) {
     },
     [isOpen, id, onFocus, setIsOpen, value]
   );
-  const handleFocus = useCallback8(() => {
+  const handleFocus = useCallback7(() => {
     if (onFocus) {
       onFocus(id, value);
     }
   }, [id, onFocus, value]);
-  const handleBlur = useCallback8(() => {
+  const handleBlur = useCallback7(() => {
     if (!isOpen && onBlur) {
       onBlur(id, value);
     }
@@ -1573,7 +1560,7 @@ function DateWidget(props) {
     document.addEventListener("keydown", handleEscape);
     return () => document.removeEventListener("keydown", handleEscape);
   }, [id, isOpen, setIsOpen, onBlur, value]);
-  const handleDoneClick = useCallback8(() => {
+  const handleDoneClick = useCallback7(() => {
     setIsOpen(false);
     onChange(localDate ? localDate.toISOString() : "");
     if (onBlur) {
@@ -1641,13 +1628,13 @@ function DateWidget(props) {
 }
 
 // src/widgets/FileWidget/FileWidget.tsx
-import { useCallback as useCallback9 } from "react";
+import { useCallback as useCallback8 } from "react";
 import { jsx as jsx26 } from "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 = useCallback9(
+  const handleChange = useCallback8(
     (event) => {
       if (!event.target.files) {
         return;
@@ -1661,7 +1648,7 @@ function FileWidget(props) {
     },
     [onChange, isMulti]
   );
-  const handleFocus = useCallback9(
+  const handleFocus = useCallback8(
     (event) => {
       if (onFocus) {
         onFocus(id, event.target.files ? Array.from(event.target.files) : null);
@@ -1669,7 +1656,7 @@ function FileWidget(props) {
     },
     [onFocus, id]
   );
-  const handleBlur = useCallback9(
+  const handleBlur = useCallback8(
     (event) => {
       if (onBlur) {
         onBlur(id, event.target.files ? Array.from(event.target.files) : null);
@@ -1695,10 +1682,11 @@ function FileWidget(props) {
 }
 
 // src/widgets/RadioWidget/RadioWidget.tsx
-import { useCallback as useCallback10 } from "react";
+import { useCallback as useCallback9 } from "react";
 import { jsx as jsx27, jsxs as jsxs15 } from "react/jsx-runtime";
 function RadioWidget({
   id,
+  htmlName,
   options,
   value,
   required,
@@ -1719,7 +1707,7 @@ function RadioWidget({
     }
     return value === option.value;
   };
-  const handleFocus = useCallback10(
+  const handleFocus = useCallback9(
     (event) => {
       if (onFocus) {
         const index = Number(event.target.dataset.index);
@@ -1729,7 +1717,7 @@ function RadioWidget({
     },
     [onFocus, id, enumOptions]
   );
-  const handleBlur = useCallback10(
+  const handleBlur = useCallback9(
     (event) => {
       if (onBlur) {
         const index = Number(event.target.dataset.index);
@@ -1739,7 +1727,7 @@ function RadioWidget({
     },
     [onBlur, id, enumOptions]
   );
-  const handleChange = useCallback10(
+  const handleChange = useCallback9(
     (event) => {
       const index = Number(event.target.dataset.index);
       const option = enumOptions?.[index];
@@ -1757,7 +1745,7 @@ function RadioWidget({
         type: "radio",
         id: `${id}-${option.value}`,
         className: "radio",
-        name: id,
+        name: htmlName || id,
         value: getValue(option),
         checked: isChecked(option),
         required,
@@ -1773,7 +1761,7 @@ function RadioWidget({
 }
 
 // src/widgets/RangeWidget/RangeWidget.tsx
-import { useCallback as useCallback11 } from "react";
+import { useCallback as useCallback10 } from "react";
 import { jsx as jsx28, jsxs as jsxs16 } from "react/jsx-runtime";
 function RangeWidget({
   id,
@@ -1796,7 +1784,7 @@ function RangeWidget({
       onBlur(id, event.target.value);
     }
   };
-  const handleChange = useCallback11(
+  const handleChange = useCallback10(
     (event) => {
       onChange(event.target.value);
     },
@@ -1825,7 +1813,7 @@ function RangeWidget({
 }
 
 // src/widgets/RatingWidget/RatingWidget.tsx
-import { useCallback as useCallback12 } from "react";
+import { useCallback as useCallback11 } from "react";
 import { jsx as jsx29 } from "react/jsx-runtime";
 function RatingWidget({
   id,
@@ -1845,13 +1833,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 = useCallback12(
+  const _onChange = useCallback11(
     ({ target: { value: value2 } }) => {
       onChange(parseInt(value2));
     },
     [onChange]
   );
-  const handleFocus = useCallback12(
+  const handleFocus = useCallback11(
     (event) => {
       if (onFocus) {
         const starValue = Number(event.target.value);
@@ -1860,7 +1848,7 @@ function RatingWidget({
     },
     [onFocus, id]
   );
-  const handleBlur = useCallback12(
+  const handleBlur = useCallback11(
     (event) => {
       if (onBlur) {
         const starValue = Number(event.target.value);
@@ -1901,7 +1889,7 @@ function RatingWidget({
 }
 
 // src/widgets/SelectWidget/SelectWidget.tsx
-import { useCallback as useCallback13 } from "react";
+import { useCallback as useCallback12 } from "react";
 import {
   enumOptionsIndexForValue,
   enumOptionsValueForIndex
@@ -1936,7 +1924,7 @@ function SelectWidget({
     return String(val);
   };
   const isEnumeratedObject = enumOptions && enumOptions[0]?.value && typeof enumOptions[0].value === "object";
-  const handleOptionClick = useCallback13(
+  const handleOptionClick = useCallback12(
     (event) => {
       const index = Number(event.currentTarget.dataset.value);
       if (isNaN(index)) {
@@ -1955,7 +1943,7 @@ function SelectWidget({
     },
     [value, multiple, isEnumeratedObject, enumOptions, optEmptyVal, onChange]
   );
-  const _onBlur = useCallback13(
+  const _onBlur = useCallback12(
     ({ target }) => {
       const dataValue = target?.getAttribute("data-value");
       if (dataValue !== null) {
@@ -1964,7 +1952,7 @@ function SelectWidget({
     },
     [onBlur, id, enumOptions, optEmptyVal]
   );
-  const _onFocus = useCallback13(
+  const _onFocus = useCallback12(
     ({ target }) => {
       const dataValue = target?.getAttribute("data-value");
       if (dataValue !== null) {
@@ -2018,11 +2006,11 @@ function SelectWidget({
 }
 
 // src/widgets/TextareaWidget/TextareaWidget.tsx
-import { useCallback as useCallback14 } from "react";
+import { useCallback as useCallback13 } from "react";
 import { jsx as jsx31 } from "react/jsx-runtime";
 function TextareaWidget(props) {
-  const { id, value, required, disabled, readonly, onChange, onFocus, onBlur, options } = props;
-  const handleFocus = useCallback14(
+  const { id, htmlName, value, required, disabled, readonly, onChange, onFocus, onBlur, options } = props;
+  const handleFocus = useCallback13(
     (event) => {
       if (onFocus) {
         onFocus(id, event.target.value);
@@ -2030,7 +2018,7 @@ function TextareaWidget(props) {
     },
     [onFocus, id]
   );
-  const handleBlur = useCallback14(
+  const handleBlur = useCallback13(
     (event) => {
       if (onBlur) {
         onBlur(id, event.target.value);
@@ -2038,7 +2026,7 @@ function TextareaWidget(props) {
     },
     [onBlur, id]
   );
-  const handleChange = useCallback14(
+  const handleChange = useCallback13(
     (event) => {
       onChange(event.target.value);
     },
@@ -2049,6 +2037,7 @@ function TextareaWidget(props) {
     "textarea",
     {
       id,
+      name: htmlName || id,
       value: value || "",
       required,
       disabled: disabled || readonly,
@@ -2063,11 +2052,11 @@ function TextareaWidget(props) {
 }
 
 // src/widgets/TimeWidget/TimeWidget.tsx
-import { useCallback as useCallback15 } from "react";
+import { useCallback as useCallback14 } from "react";
 import { jsx as jsx32 } from "react/jsx-runtime";
 function TimeWidget(props) {
   const { id, value, onChange, onFocus, onBlur, required, disabled, readonly } = props;
-  const handleFocus = useCallback15(
+  const handleFocus = useCallback14(
     (event) => {
       if (onFocus) {
         onFocus(id, event.target.value);
@@ -2075,7 +2064,7 @@ function TimeWidget(props) {
     },
     [onFocus, id]
   );
-  const handleBlur = useCallback15(
+  const handleBlur = useCallback14(
     (event) => {
       if (onBlur) {
         onBlur(id, event.target.value);
@@ -2083,7 +2072,7 @@ function TimeWidget(props) {
     },
     [onBlur, id]
   );
-  const handleChange = useCallback15(
+  const handleChange = useCallback14(
     (event) => {
       onChange(event.target.value);
     },
@@ -2107,19 +2096,19 @@ function TimeWidget(props) {
 }
 
 // src/widgets/ToggleWidget/ToggleWidget.tsx
-import { useCallback as useCallback16 } from "react";
+import { useCallback as useCallback15 } from "react";
 import { jsx as jsx33, jsxs as jsxs18 } from "react/jsx-runtime";
 function ToggleWidget({ id, value, required, disabled, readonly, autofocus, onChange, onFocus, onBlur, options }) {
-  const _onChange = useCallback16(
+  const _onChange = useCallback15(
     ({ target: { checked } }) => onChange(checked),
     [onChange]
   );
-  const handleFocus = useCallback16(() => {
+  const handleFocus = useCallback15(() => {
     if (onFocus) {
       onFocus(id, value);
     }
   }, [onFocus, id, value]);
-  const handleBlur = useCallback16(() => {
+  const handleBlur = useCallback15(() => {
     if (onBlur) {
       onBlur(id, value);
     }
@@ -2197,7 +2186,7 @@ function ThemeProvider({ children }) {
       return "cupcake";
     }
   });
-  const handleSetTheme = useCallback17((newTheme) => {
+  const handleSetTheme = useCallback16((newTheme) => {
     try {
       localStorage.setItem("daisyui-theme", newTheme);
       setTheme(newTheme);