@rjsf/daisyui 6.0.0-beta.9 → 6.0.1

package/dist/chakra-ui.umd.js

@@ -12,20 +12,16 @@
       hasMoveDown,
       hasMoveUp,
       hasRemove,
-      idSchema,
-      index,
-      onCopyIndexClick,
-      onDropIndexClick,
-      onReorderClick,
+      fieldPathId,
+      onCopyItem,
+      onRemoveItem,
+      onMoveDownItem,
+      onMoveUpItem,
       readonly,
       registry,
       uiSchema
     } = props;
     const { CopyButton: CopyButton2, MoveDownButton: MoveDownButton2, MoveUpButton: MoveUpButton2, RemoveButton: RemoveButton2 } = registry.templates.ButtonTemplates;
-    const onCopyClick = react.useMemo(() => onCopyIndexClick(index), [index, onCopyIndexClick]);
-    const onRemoveClick = react.useMemo(() => onDropIndexClick(index), [index, onDropIndexClick]);
-    const onArrowUpClick = react.useMemo(() => onReorderClick(index, index - 1), [index, onReorderClick]);
-    const onArrowDownClick = 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";
@@ -34,10 +30,10 @@
         /* @__PURE__ */ jsxRuntime.jsx(
           MoveUpButton2,
           {
-            id: utils.buttonId(idSchema, "moveUp"),
+            id: utils.buttonId(fieldPathId, "moveUp"),
             className: `rjsf-array-item-move-up ${btnClass}`,
             disabled: disabled || readonly || !hasMoveUp,
-            onClick: onArrowUpClick,
+            onClick: onMoveUpItem,
             uiSchema,
             registry
           }
@@ -45,10 +41,10 @@
         /* @__PURE__ */ jsxRuntime.jsx(
           MoveDownButton2,
           {
-            id: utils.buttonId(idSchema, "moveDown"),
+            id: utils.buttonId(fieldPathId, "moveDown"),
             className: `rjsf-array-item-move-down ${btnClass}`,
             disabled: disabled || readonly || !hasMoveDown,
-            onClick: onArrowDownClick,
+            onClick: onMoveDownItem,
             uiSchema,
             registry
           }
@@ -57,10 +53,10 @@
       hasCopy && /* @__PURE__ */ jsxRuntime.jsx(
         CopyButton2,
         {
-          id: utils.buttonId(idSchema, "copy"),
+          id: utils.buttonId(fieldPathId, "copy"),
           className: `rjsf-array-item-copy ${btnClass}`,
           disabled: disabled || readonly,
-          onClick: onCopyClick,
+          onClick: onCopyItem,
           uiSchema,
           registry
         }
@@ -68,10 +64,10 @@
       hasRemove && /* @__PURE__ */ jsxRuntime.jsx(
         RemoveButton2,
         {
-          id: utils.buttonId(idSchema, "remove"),
+          id: utils.buttonId(fieldPathId, "remove"),
           className: `rjsf-array-item-remove ${removeBtnClass}`,
           disabled: disabled || readonly,
-          onClick: onRemoveClick,
+          onClick: onRemoveItem,
           uiSchema,
           registry
         }
@@ -102,8 +98,9 @@
       canAdd,
       className,
       disabled,
-      idSchema,
+      fieldPathId,
       items,
+      optionalDataControl,
       onAddClick,
       readonly,
       registry,
@@ -118,16 +115,12 @@
       registry,
       uiOptions
     );
-    const ArrayFieldItemTemplate2 = utils.getTemplate(
-      "ArrayFieldItemTemplate",
-      registry,
-      uiOptions
-    );
     const ArrayFieldTitleTemplate = utils.getTemplate(
       "ArrayFieldTitleTemplate",
       registry,
       uiOptions
     );
+    const showOptionalDataControlInTitle = !readonly && !disabled;
     const {
       ButtonTemplates: { AddButton: AddButton2 }
     } = registry.templates;
@@ -143,18 +136,19 @@
       /* @__PURE__ */ jsxRuntime.jsx(
         ArrayFieldTitleTemplate,
         {
-          idSchema,
+          fieldPathId,
           title: uiOptions.title || title,
           schema,
           uiSchema,
           required,
-          registry
+          registry,
+          optionalDataControl: showOptionalDataControlInTitle ? optionalDataControl : void 0
         }
       ),
       /* @__PURE__ */ jsxRuntime.jsx(
         ArrayFieldDescriptionTemplate,
         {
-          idSchema,
+          fieldPathId,
           description: uiOptions.description || schema.description,
           schema,
           uiSchema,
@@ -162,14 +156,15 @@
         }
       ),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4", children: [
+        !showOptionalDataControlInTitle ? optionalDataControl : void 0,
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rjsf-array-item-list", children: [
-          items && items.map(({ key, ...itemProps }, index) => /* @__PURE__ */ jsxRuntime.jsx(ArrayFieldItemTemplate2, { ...itemProps, index, totalItems: items.length }, key)),
+          items,
           items && items.length === 0 && canAdd && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-center italic text-base-content/70", children: utils.TranslatableString.EmptyArray })
         ] }),
         canAdd && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-end", children: /* @__PURE__ */ jsxRuntime.jsx(
           AddButton2,
           {
-            id: utils.buttonId(idSchema, "add"),
+            id: utils.buttonId(fieldPathId, "add"),
             className: "rjsf-array-item-add btn btn-primary btn-sm",
             onClick: handleAddClick,
             disabled: disabled || readonly,
@@ -183,6 +178,8 @@
   function BaseInputTemplate(props) {
     const {
       id,
+      htmlName,
+      multiple,
       value,
       required,
       disabled,
@@ -199,6 +196,12 @@
       placeholder
     } = props;
     const inputProps = utils.getInputProps(schema, type, options);
+    let className = "input input-bordered";
+    let isMulti = multiple;
+    if (type === "file") {
+      isMulti = schema.type === "array" || Boolean(options.multiple);
+      className = "file-input w-full";
+    }
     const { step, min, max, accept, ...rest } = inputProps;
     const htmlInputProps = { step, min, max, accept, ...schema.examples ? { list: utils.examplesId(id) } : void 0 };
     const _onChange = react.useCallback(
@@ -220,13 +223,14 @@
           "input",
           {
             id,
-            name: id,
+            name: htmlName || id,
             value: value || value === 0 ? value : "",
             placeholder,
             required,
             disabled: disabled || readonly,
             autoFocus: autofocus,
-            className: "input input-bordered",
+            className,
+            multiple: isMulti,
             ...rest,
             ...htmlInputProps,
             onChange: onChangeOverride || _onChange,
@@ -259,11 +263,11 @@
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "row", children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: `col-xs-3 col-xs-offset-9 text-right ${className}`, children: /* @__PURE__ */ jsxRuntime.jsx(
       DaisyUIButton_default,
       {
+        title: translateString(utils.TranslatableString.AddButton),
         ...otherProps,
         iconType: "info",
         icon: freeSolidSvgIcons.faPlus,
         className: "btn-add col-xs-12 btn-primary btn-primary-content",
-        title: translateString(utils.TranslatableString.AddButton),
         onClick,
         disabled,
         registry
@@ -289,7 +293,7 @@
     const {
       registry: { translateString }
     } = props;
-    return /* @__PURE__ */ jsxRuntime.jsx(DaisyUIButton_default, { ...props, title: translateString(utils.TranslatableString.CopyButton), icon: freeSolidSvgIcons.faCopy });
+    return /* @__PURE__ */ jsxRuntime.jsx(DaisyUIButton_default, { title: translateString(utils.TranslatableString.CopyButton), ...props, icon: freeSolidSvgIcons.faCopy });
   }
   function MoveDownButton(props) {
     const {
@@ -298,8 +302,8 @@
     return /* @__PURE__ */ jsxRuntime.jsx(
       DaisyUIButton_default,
       {
-        ...props,
         title: translateString(utils.TranslatableString.MoveDownButton),
+        ...props,
         icon: freeSolidSvgIcons.faArrowDown
       }
     );
@@ -311,8 +315,8 @@
     return /* @__PURE__ */ jsxRuntime.jsx(
       DaisyUIButton_default,
       {
-        ...props,
         title: translateString(utils.TranslatableString.MoveUpButton),
+        ...props,
         icon: freeSolidSvgIcons.faArrowUp
       }
     );
@@ -324,8 +328,8 @@
     return /* @__PURE__ */ jsxRuntime.jsx(
       DaisyUIButton_default,
       {
-        ...props,
         title: translateString(utils.TranslatableString.RemoveButton),
+        ...props,
         iconType: "danger",
         icon: freeSolidSvgIcons.faTrash
       }
@@ -356,37 +360,61 @@
       label,
       children,
       errors,
-      formContext,
       formData,
       help,
       hideError,
       displayLabel,
+      onKeyRename,
+      onKeyRenameBlur,
+      onRemoveProperty,
       classNames,
-      // Destructure props we don't want to pass to div
-      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";
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `field-template mb-3 ${classNames || ""}`, ...divProps, children: [
-      displayLabel && !isCheckbox && /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: id, className: "label", children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "label-text font-medium", children: [
+    const uiOptions = utils.getUiOptions(uiSchema);
+    const WrapIfAdditionalTemplate2 = utils.getTemplate(
+      "WrapIfAdditionalTemplate",
+      registry,
+      uiOptions
+    );
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      WrapIfAdditionalTemplate2,
+      {
+        classNames,
+        disabled: divProps.disabled,
+        id,
         label,
-        required && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-error ml-1", children: "*" })
-      ] }) }),
-      children,
-      errors,
-      help
-    ] });
+        onKeyRename,
+        onKeyRenameBlur,
+        onRemoveProperty,
+        readonly,
+        required,
+        schema,
+        uiSchema,
+        registry,
+        children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `field-template mb-3 ${classNames || ""}`, ...divProps, children: [
+          displayLabel && !isCheckbox && /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: id, className: "label", children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "label-text font-medium", children: [
+            label,
+            required && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-error ml-1", children: "*" })
+          ] }) }),
+          children,
+          errors,
+          help
+        ] })
+      }
+    );
   }
   function GridTemplate(props) {
     const { children, column, ...rest } = props;
@@ -395,6 +423,13 @@
     }
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap gap-4", ...rest, children });
   }
+  function MultiSchemaFieldTemplate(props) {
+    const { optionSchemaField, selector } = props;
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-4 border rounded-sm shadow-sm", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-4", children: selector }),
+      optionSchemaField
+    ] });
+  }
   function ObjectFieldTemplate(props) {
     const {
       description,
@@ -404,10 +439,11 @@
       disabled,
       readonly,
       uiSchema,
-      idSchema,
+      fieldPathId,
       schema,
       formData,
-      onAddClick,
+      optionalDataControl,
+      onAddProperty,
       registry
     } = props;
     const uiOptions = utils.getUiOptions(uiSchema);
@@ -417,26 +453,28 @@
       registry,
       uiOptions
     );
+    const showOptionalDataControlInTitle = !readonly && !disabled;
     const {
       ButtonTemplates: { AddButton: AddButton2 }
     } = registry.templates;
-    const isRoot = idSchema.$id === "root";
+    const isRoot = fieldPathId.$id === "root";
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `form-control ${isRoot ? "bg-base-100 p-6 rounded-xl shadow-lg" : ""}`, children: [
       title && /* @__PURE__ */ jsxRuntime.jsx(
         TitleFieldTemplate,
         {
-          id: utils.titleId(idSchema),
+          id: utils.titleId(fieldPathId),
           title,
           required,
           schema,
           uiSchema,
-          registry
+          registry,
+          optionalDataControl: showOptionalDataControlInTitle ? optionalDataControl : void 0
         }
       ),
       description && /* @__PURE__ */ jsxRuntime.jsx(
         DescriptionFieldTemplate,
         {
-          id: utils.descriptionId(idSchema),
+          id: utils.descriptionId(fieldPathId),
           description,
           schema,
           uiSchema,
@@ -444,22 +482,23 @@
         }
       ),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `grid grid-cols-1 gap-${description ? 3 : 4} ${isRoot ? "" : "mb-4"}`, children: [
+        !showOptionalDataControlInTitle ? optionalDataControl : void 0,
         properties.map(
           (element, index) => element.hidden ? element.content : /* @__PURE__ */ jsxRuntime.jsx(
             "div",
             {
-              className: idSchema.$id === "root" && element.name === "tasks" ? "mt-2" : "",
+              className: fieldPathId.$id === "root" && element.name === "tasks" ? "mt-2" : "",
               children: element.content
             },
-            `${idSchema.$id}-${element.name}-${index}`
+            `${fieldPathId.$id}-${element.name}-${index}`
           )
         ),
         utils.canExpand(schema, uiSchema, formData) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-end", children: /* @__PURE__ */ jsxRuntime.jsx(
           AddButton2,
           {
-            id: utils.buttonId(idSchema, "add"),
+            id: utils.buttonId(fieldPathId, "add"),
             className: "rjsf-object-property-expand btn btn-primary btn-sm",
-            onClick: onAddClick(schema),
+            onClick: onAddProperty,
             disabled: disabled || readonly,
             uiSchema,
             registry
@@ -468,12 +507,48 @@
       ] })
     ] });
   }
+  function OptionalDataControlsTemplate(props) {
+    const { id, registry, label, onAddClick, onRemoveClick } = props;
+    if (onAddClick) {
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        DaisyUIButton_default,
+        {
+          id,
+          registry,
+          iconType: "info",
+          icon: freeSolidSvgIcons.faPlus,
+          className: "rjsf-add-optional-data",
+          onClick: onAddClick,
+          title: label
+        }
+      );
+    } else if (onRemoveClick) {
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        RemoveButton,
+        {
+          id,
+          registry,
+          className: "rjsf-remove-optional-data",
+          onClick: onRemoveClick,
+          title: label
+        }
+      );
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx("em", { id, children: label });
+  }
   function TitleField(props) {
-    const { id, title, uiSchema } = props;
+    const { id, title, uiSchema, optionalDataControl } = props;
     const uiOptions = utils.getUiOptions(uiSchema);
+    let heading = /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-3xl font-bold text-primary mb-2", children: uiOptions.title || title });
+    if (optionalDataControl) {
+      heading = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-auto", children: heading }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-end", children: optionalDataControl })
+      ] });
+    }
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { id, className: "title-field mb-6", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-3xl font-bold text-primary mb-2", children: uiOptions.title || title }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "divider divider-primary" })
+      heading,
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "divider divider-primary my-0" })
     ] });
   }
   function WrapIfAdditionalTemplate(props) {
@@ -486,47 +561,48 @@
       readonly,
       required,
       schema,
-      onKeyChange,
-      onDropPropertyClick,
+      uiSchema,
+      onKeyRename,
+      onKeyRenameBlur,
+      onRemoveProperty,
       registry,
       ...rest
     } = props;
-    const { translateString } = registry;
-    const handleBlur = react.useCallback(
-      (event) => {
-        onKeyChange(event.target.value);
-      },
-      [onKeyChange]
-    );
-    const handleRemove = react.useCallback(() => {
-      onDropPropertyClick(label)();
-    }, [onDropPropertyClick, label]);
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `wrap-if-additional-template ${classNames}`, ...rest, children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center", children: [
+    const additional = utils.ADDITIONAL_PROPERTY_FLAG in schema;
+    const { templates, translateString } = registry;
+    const { RemoveButton: RemoveButton2 } = templates.ButtonTemplates;
+    const keyLabel = translateString(utils.TranslatableString.KeyLabel, [label]);
+    if (!additional) {
+      return /* @__PURE__ */ jsxRuntime.jsx("div", { className: classNames, children });
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `wrap-if-additional-template ${classNames}`, ...rest, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-baseline", style: { justifyContent: "space-between" }, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+        /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: `${id}-key`, className: "label", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "label-text", children: keyLabel }) }),
         /* @__PURE__ */ jsxRuntime.jsx(
           "input",
           {
             type: "text",
             className: "input input-bordered",
             id: `${id}-key`,
-            onBlur: handleBlur,
+            onBlur: onKeyRenameBlur,
             defaultValue: label,
             disabled: disabled || readonly
           }
-        ),
-        schema.additionalProperties && /* @__PURE__ */ jsxRuntime.jsx(
-          "button",
-          {
-            id: utils.buttonId(id, "remove"),
-            className: "rjsf-array-item-remove btn btn-danger ml-2",
-            onClick: handleRemove,
-            disabled: disabled || readonly,
-            children: translateString(utils.TranslatableString.RemoveButton)
-          }
         )
       ] }),
-      children
-    ] });
+      children,
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex self-center", children: /* @__PURE__ */ jsxRuntime.jsx(
+        RemoveButton2,
+        {
+          id: utils.buttonId(id, "remove"),
+          className: "rjsf-object-property-remove",
+          disabled: disabled || readonly,
+          onClick: onRemoveProperty,
+          uiSchema,
+          registry
+        }
+      ) })
+    ] }) });
   }
 
   // src/templates/Templates.tsx
@@ -550,7 +626,9 @@
       FieldHelpTemplate,
       FieldTemplate,
       GridTemplate,
+      MultiSchemaFieldTemplate,
       ObjectFieldTemplate,
+      OptionalDataControlsTemplate,
       TitleFieldTemplate: TitleField,
       WrapIfAdditionalTemplate
     };
@@ -564,154 +642,29 @@
     return /* @__PURE__ */ jsxRuntime.jsx(AltDateWidget2, { time, ...props });
   }
   var AltDateTimeWidget_default = AltDateTimeWidget;
-  function readyForChange(state, time = false) {
-    return state.year && state.month && state.day && (!time || state.hour && state.minute && state.second);
-  }
-  function getDateElementProps(state, time, yearsRange, format3 = "YMD") {
-    const rangeOptions = yearsRange ?? [1900, (/* @__PURE__ */ new Date()).getFullYear() + 2];
-    const formats = {
-      YMD: ["year", "month", "day"],
-      MDY: ["month", "day", "year"],
-      DMY: ["day", "month", "year"]
-    };
-    const dateElements = formats[format3].map((key) => ({
-      type: key,
-      value: state[key],
-      range: key === "year" ? rangeOptions : key === "month" ? [1, 12] : key === "day" ? [1, 31] : [0, 59]
-    }));
-    if (time) {
-      dateElements.push(
-        { type: "hour", value: state.hour, range: [0, 23] },
-        { type: "minute", value: state.minute, range: [0, 59] },
-        { type: "second", value: state.second, range: [0, 59] }
-      );
-    }
-    return dateElements;
-  }
-  function DateElement({
-    type,
-    range,
-    value,
-    select,
-    rootId,
-    name,
-    disabled,
-    readonly,
-    autofocus,
-    registry,
-    onBlur,
-    onFocus
-  }) {
-    const id = `${rootId}_${type}`;
-    const { SelectWidget: SelectWidget2 } = registry.widgets;
-    const handleChange = react.useCallback(
-      (value2) => {
-        select(type, value2);
-      },
-      [select, type]
-    );
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      SelectWidget2,
-      {
-        schema: { type: "integer" },
-        id,
-        name,
-        className: "select select-bordered select-sm w-full",
-        options: { enumOptions: utils.dateRangeOptions(range[0], range[1]) },
-        placeholder: type,
-        value,
-        disabled,
-        readonly,
-        autofocus,
-        onChange: handleChange,
-        onBlur,
-        onFocus,
-        registry,
-        label: "",
-        "aria-describedby": utils.ariaDescribedByIds(rootId),
-        required: false
-      }
-    );
-  }
-  function convertToRJSFDateObject(dateObj) {
-    return {
-      year: dateObj.year ? parseInt(dateObj.year) : 0,
-      month: dateObj.month ? parseInt(dateObj.month) : 0,
-      day: dateObj.day ? parseInt(dateObj.day) : 0,
-      hour: dateObj.hour ? parseInt(dateObj.hour) : 0,
-      minute: dateObj.minute ? parseInt(dateObj.minute) : 0,
-      second: dateObj.second ? parseInt(dateObj.second) : 0
-    };
-  }
-  function AltDateWidget({
-    time = false,
-    disabled = false,
-    readonly = false,
-    autofocus = false,
-    options = {},
-    id,
-    name,
-    registry,
-    onBlur,
-    onFocus,
-    onChange,
-    value
-  }) {
+  function AltDateWidget(props) {
+    const {
+      disabled = false,
+      readonly = false,
+      autofocus = false,
+      options = {},
+      id,
+      name,
+      registry,
+      onBlur,
+      onFocus
+    } = props;
     const { translateString } = registry;
-    const [lastValue, setLastValue] = react.useState(value);
-    const initialState = utils.parseDateString(value, time);
-    const dateReducer = (state2, action) => {
-      return { ...state2, ...action };
-    };
-    const [state, setState] = react.useReducer(dateReducer, initialState);
-    react.useEffect(() => {
-      const rjsfDateObj = convertToRJSFDateObject(state);
-      const stateValue = utils.toDateString(rjsfDateObj, time);
-      if (readyForChange(state, time) && stateValue !== value) {
-        onChange(stateValue);
-      } else if (lastValue !== value) {
-        setLastValue(value);
-        setState(utils.parseDateString(value, time));
-      }
-    }, [time, value, onChange, state, lastValue]);
-    const handleChange = react.useCallback((property, value2) => {
-      setState({ [property]: value2 });
-    }, []);
-    const handleSetNow = react.useCallback(
-      (event) => {
-        event.preventDefault();
-        if (disabled || readonly) {
-          return;
-        }
-        const nextState = utils.parseDateString((/* @__PURE__ */ new Date()).toJSON(), time);
-        const rjsfDateObj = convertToRJSFDateObject(nextState);
-        onChange(utils.toDateString(rjsfDateObj, time));
-      },
-      [disabled, readonly, time, onChange]
-    );
-    const handleClear = react.useCallback(
-      (event) => {
-        event.preventDefault();
-        if (disabled || readonly) {
-          return;
-        }
-        onChange(void 0);
-      },
-      [disabled, readonly, onChange]
-    );
+    const { elements, handleChange, handleClear, handleSetNow } = utils.useAltDateWidgetProps(props);
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-3", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-3 gap-2", children: getDateElementProps(
-        state,
-        time,
-        options.yearsRange,
-        options.format
-      ).map((elemProps, i) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "form-control", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-3 gap-2", children: elements.map((elemProps, i) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "form-control", children: [
         /* @__PURE__ */ jsxRuntime.jsx("label", { className: "label", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "label-text capitalize", children: elemProps.type }) }),
         /* @__PURE__ */ jsxRuntime.jsx(
-          DateElement,
+          utils.DateElement,
           {
             rootId: id,
             name,
+            className: "select select-bordered select-sm",
             select: handleChange,
             type: elemProps.type,
             range: elemProps.range,
@@ -752,6 +705,7 @@
   function CheckboxWidget(props) {
     const {
       id,
+      htmlName,
       value,
       required,
       disabled,
@@ -793,6 +747,7 @@
       {
         type: "checkbox",
         id,
+        name: htmlName || id,
         checked: value,
         required,
         disabled: disabled || readonly,
@@ -824,6 +779,7 @@
   }
   function CheckboxesWidget({
     id,
+    htmlName,
     disabled,
     options,
     value,
@@ -895,7 +851,7 @@
           type: "checkbox",
           id: `${id}-${option.value}`,
           className: "checkbox",
-          name: id,
+          name: htmlName || id,
           checked: isChecked(option),
           required,
           disabled: disabled || readonly,
@@ -1085,7 +1041,7 @@
       };
       document.addEventListener("keydown", handleEscape);
       return () => document.removeEventListener("keydown", handleEscape);
-    }, [id, isOpen, onBlur, value]);
+    }, [id, isOpen, setIsOpen, onBlur, value]);
     const handleDoneClick = react.useCallback(() => {
       setIsOpen(false);
       onChange(localDate ? localDate.toISOString() : "");
@@ -1093,7 +1049,7 @@
         onBlur(id, value);
       }
       inputRef.current?.focus();
-    }, [localDate, onChange, onBlur, id, value]);
+    }, [localDate, onChange, onBlur, id, value, setIsOpen]);
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "form-control my-4 w-full relative", children: /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
@@ -1339,7 +1295,7 @@
       };
       document.addEventListener("keydown", handleEscape);
       return () => document.removeEventListener("keydown", handleEscape);
-    }, [id, isOpen, onBlur, value]);
+    }, [id, isOpen, setIsOpen, onBlur, value]);
     const handleDoneClick = react.useCallback(() => {
       setIsOpen(false);
       onChange(localDate ? localDate.toISOString() : "");
@@ -1347,7 +1303,7 @@
         onBlur(id, value);
       }
       inputRef.current?.focus();
-    }, [localDate, onChange, onBlur, id, value]);
+    }, [localDate, onChange, onBlur, id, value, setIsOpen]);
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "form-control my-4 w-full relative", children: /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
@@ -1406,58 +1362,9 @@
       }
     ) });
   }
-  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 = react.useCallback(
-      (event) => {
-        if (!event.target.files) {
-          return;
-        }
-        const fileList = Array.from(event.target.files);
-        if (isMulti) {
-          onChange(fileList);
-        } else {
-          onChange(fileList[0] || null);
-        }
-      },
-      [onChange, isMulti]
-    );
-    const handleFocus = react.useCallback(
-      (event) => {
-        if (onFocus) {
-          onFocus(id, event.target.files ? Array.from(event.target.files) : null);
-        }
-      },
-      [onFocus, id]
-    );
-    const handleBlur = react.useCallback(
-      (event) => {
-        if (onBlur) {
-          onBlur(id, event.target.files ? Array.from(event.target.files) : null);
-        }
-      },
-      [onBlur, id]
-    );
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      "input",
-      {
-        id,
-        type: "file",
-        className: "file-input w-full",
-        required,
-        disabled: disabled || readonly,
-        onChange: handleChange,
-        onFocus: handleFocus,
-        onBlur: handleBlur,
-        multiple: isMulti,
-        accept
-      }
-    );
-  }
   function RadioWidget({
     id,
+    htmlName,
     options,
     value,
     required,
@@ -1516,7 +1423,7 @@
           type: "radio",
           id: `${id}-${option.value}`,
           className: "radio",
-          name: id,
+          name: htmlName || id,
           value: getValue(option),
           checked: isChecked(option),
           required,
@@ -1760,7 +1667,7 @@
     ] }) });
   }
   function TextareaWidget(props) {
-    const { id, value, required, disabled, readonly, onChange, onFocus, onBlur, options } = props;
+    const { id, htmlName, value, required, disabled, readonly, onChange, onFocus, onBlur, options } = props;
     const handleFocus = react.useCallback(
       (event) => {
         if (onFocus) {
@@ -1788,6 +1695,7 @@
       "textarea",
       {
         id,
+        name: htmlName || id,
         value: value || "",
         required,
         disabled: disabled || readonly,
@@ -1886,7 +1794,6 @@
       CheckboxWidget,
       DateTimeWidget,
       DateWidget,
-      FileWidget,
       RadioWidget,
       RangeWidget,
       RatingWidget,