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

package/dist/chakra-ui.umd.js

@@ -13,19 +13,15 @@
       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 = 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";
@@ -37,7 +33,7 @@
             id: utils.buttonId(fieldPathId, "moveUp"),
             className: `rjsf-array-item-move-up ${btnClass}`,
             disabled: disabled || readonly || !hasMoveUp,
-            onClick: onArrowUpClick,
+            onClick: onMoveUpItem,
             uiSchema,
             registry
           }
@@ -48,7 +44,7 @@
             id: utils.buttonId(fieldPathId, "moveDown"),
             className: `rjsf-array-item-move-down ${btnClass}`,
             disabled: disabled || readonly || !hasMoveDown,
-            onClick: onArrowDownClick,
+            onClick: onMoveDownItem,
             uiSchema,
             registry
           }
@@ -60,7 +56,7 @@
           id: utils.buttonId(fieldPathId, "copy"),
           className: `rjsf-array-item-copy ${btnClass}`,
           disabled: disabled || readonly,
-          onClick: onCopyClick,
+          onClick: onCopyItem,
           uiSchema,
           registry
         }
@@ -71,7 +67,7 @@
           id: utils.buttonId(fieldPathId, "remove"),
           className: `rjsf-array-item-remove ${removeBtnClass}`,
           disabled: disabled || readonly,
-          onClick: onRemoveClick,
+          onClick: onRemoveItem,
           uiSchema,
           registry
         }
@@ -119,11 +115,6 @@
       registry,
       uiOptions
     );
-    const ArrayFieldItemTemplate2 = utils.getTemplate(
-      "ArrayFieldItemTemplate",
-      registry,
-      uiOptions
-    );
     const ArrayFieldTitleTemplate = utils.getTemplate(
       "ArrayFieldTitleTemplate",
       registry,
@@ -167,7 +158,7 @@
       /* @__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.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(
@@ -187,6 +178,8 @@
   function BaseInputTemplate(props) {
     const {
       id,
+      htmlName,
+      multiple,
       value,
       required,
       disabled,
@@ -203,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(
@@ -224,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,
@@ -364,21 +364,22 @@
       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";
@@ -395,8 +396,9 @@
         disabled: divProps.disabled,
         id,
         label,
-        onDropPropertyClick,
-        onKeyChange,
+        onKeyRename,
+        onKeyRenameBlur,
+        onRemoveProperty,
         readonly,
         required,
         schema,
@@ -441,7 +443,7 @@
       schema,
       formData,
       optionalDataControl,
-      onAddClick,
+      onAddProperty,
       registry
     } = props;
     const uiOptions = utils.getUiOptions(uiSchema);
@@ -496,7 +498,7 @@
           {
             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
@@ -560,8 +562,9 @@
       required,
       schema,
       uiSchema,
-      onKeyChange,
-      onDropPropertyClick,
+      onKeyRename,
+      onKeyRenameBlur,
+      onRemoveProperty,
       registry,
       ...rest
     } = props;
@@ -569,15 +572,6 @@
     const { templates, translateString } = registry;
     const { RemoveButton: RemoveButton2 } = templates.ButtonTemplates;
     const keyLabel = translateString(utils.TranslatableString.KeyLabel, [label]);
-    const handleBlur = react.useCallback(
-      (event) => {
-        onKeyChange(event.target.value);
-      },
-      [onKeyChange]
-    );
-    const handleRemove = react.useCallback(() => {
-      onDropPropertyClick(label)();
-    }, [onDropPropertyClick, label]);
     if (!additional) {
       return /* @__PURE__ */ jsxRuntime.jsx("div", { className: classNames, children });
     }
@@ -590,7 +584,7 @@
             type: "text",
             className: "input input-bordered",
             id: `${id}-key`,
-            onBlur: handleBlur,
+            onBlur: onKeyRenameBlur,
             defaultValue: label,
             disabled: disabled || readonly
           }
@@ -603,7 +597,7 @@
           id: utils.buttonId(id, "remove"),
           className: "rjsf-object-property-remove",
           disabled: disabled || readonly,
-          onClick: handleRemove,
+          onClick: onRemoveProperty,
           uiSchema,
           registry
         }
@@ -648,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,
@@ -836,6 +705,7 @@
   function CheckboxWidget(props) {
     const {
       id,
+      htmlName,
       value,
       required,
       disabled,
@@ -877,6 +747,7 @@
       {
         type: "checkbox",
         id,
+        name: htmlName || id,
         checked: value,
         required,
         disabled: disabled || readonly,
@@ -908,6 +779,7 @@
   }
   function CheckboxesWidget({
     id,
+    htmlName,
     disabled,
     options,
     value,
@@ -979,7 +851,7 @@
           type: "checkbox",
           id: `${id}-${option.value}`,
           className: "checkbox",
-          name: id,
+          name: htmlName || id,
           checked: isChecked(option),
           required,
           disabled: disabled || readonly,
@@ -1490,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,
@@ -1600,7 +1423,7 @@
           type: "radio",
           id: `${id}-${option.value}`,
           className: "radio",
-          name: id,
+          name: htmlName || id,
           value: getValue(option),
           checked: isChecked(option),
           required,
@@ -1844,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) {
@@ -1872,6 +1695,7 @@
       "textarea",
       {
         id,
+        name: htmlName || id,
         value: value || "",
         required,
         disabled: disabled || readonly,
@@ -1970,7 +1794,6 @@
       CheckboxWidget,
       DateTimeWidget,
       DateWidget,
-      FileWidget,
       RadioWidget,
       RangeWidget,
       RatingWidget,