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

package/dist/mantine.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
   typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@rjsf/core'), require('@rjsf/utils'), require('@mantine/core'), require('react/jsx-runtime'), require('react'), require('dayjs'), require('dayjs/plugin/customParseFormat'), require('@mantine/dates')) :
   typeof define === 'function' && define.amd ? define(['exports', '@rjsf/core', '@rjsf/utils', '@mantine/core', 'react/jsx-runtime', 'react', 'dayjs', 'dayjs/plugin/customParseFormat', '@mantine/dates'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global["@rjsf/mantine"] = {}, global.core$1, global.utils, global.core, global.jsxRuntime, global.react, global.dayjs, global.customParseFormat, global.dates));
-})(this, (function (exports, core$1, utils, core, jsxRuntime, react, dayjs, customParseFormat, dates) { 'use strict';
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global["@rjsf/mantine"] = {}, global.core, global.utils, global.core$1, global.jsxRuntime, global.react, global.dayjs, global.customParseFormat, global.dates));
+})(this, (function (exports, core, utils, core$1, jsxRuntime, react, dayjs, customParseFormat, dates) { 'use strict';
 
   // src/Form/index.ts
   function ArrayFieldItemTemplate(props) {
@@ -13,9 +13,9 @@
       registry,
       uiOptions
     );
-    return /* @__PURE__ */ jsxRuntime.jsx(core.Box, { className: className || "rjsf-array-item", mb: "xs", children: /* @__PURE__ */ jsxRuntime.jsxs(core.Flex, { gap: "xs", align: "end", justify: "center", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(core.Box, { w: "100%", children }),
-      hasToolbar && /* @__PURE__ */ jsxRuntime.jsx(core.Group, { wrap: "nowrap", gap: 2, mb: 7, children: /* @__PURE__ */ jsxRuntime.jsx(ArrayFieldItemButtonsTemplate, { ...buttonsProps }) })
+    return /* @__PURE__ */ jsxRuntime.jsx(core$1.Box, { className: className || "rjsf-array-item", mb: "xs", children: /* @__PURE__ */ jsxRuntime.jsxs(core$1.Flex, { gap: "xs", align: "end", justify: "center", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(core$1.Box, { w: "100%", children }),
+      hasToolbar && /* @__PURE__ */ jsxRuntime.jsx(core$1.Group, { wrap: "nowrap", gap: 2, mb: 7, children: /* @__PURE__ */ jsxRuntime.jsx(ArrayFieldItemButtonsTemplate, { ...buttonsProps }) })
     ] }) }, `array-item-${index}`);
   }
   function ArrayFieldTemplate(props) {
@@ -40,11 +40,6 @@
       registry,
       uiOptions
     );
-    const ArrayFieldItemTemplate2 = utils.getTemplate(
-      "ArrayFieldItemTemplate",
-      registry,
-      uiOptions
-    );
     const ArrayFieldTitleTemplate2 = utils.getTemplate(
       "ArrayFieldTitleTemplate",
       registry,
@@ -66,7 +61,7 @@
         optionalDataControl: showOptionalDataControlInTitle ? optionalDataControl : void 0
       }
     );
-    return /* @__PURE__ */ jsxRuntime.jsxs(core.Fieldset, { legend, className, id: fieldPathId.$id, children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs(core$1.Fieldset, { legend, className, id: fieldPathId.$id, children: [
       (uiOptions.description || schema.description) && /* @__PURE__ */ jsxRuntime.jsx(
         ArrayFieldDescriptionTemplate,
         {
@@ -77,11 +72,11 @@
           registry
         }
       ),
-      /* @__PURE__ */ jsxRuntime.jsxs(core.Box, { className: "row rjsf-array-item-list", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(core$1.Box, { className: "row rjsf-array-item-list", children: [
         !showOptionalDataControlInTitle ? optionalDataControl : void 0,
-        items.map(({ key, ...itemProps }) => /* @__PURE__ */ jsxRuntime.jsx(ArrayFieldItemTemplate2, { ...itemProps }, key))
+        items
       ] }),
-      canAdd && /* @__PURE__ */ jsxRuntime.jsx(core.Group, { justify: "flex-end", children: /* @__PURE__ */ jsxRuntime.jsx(
+      canAdd && /* @__PURE__ */ jsxRuntime.jsx(core$1.Group, { justify: "flex-end", children: /* @__PURE__ */ jsxRuntime.jsx(
         AddButton2,
         {
           id: utils.buttonId(fieldPathId, "add"),
@@ -102,7 +97,7 @@
     if (!title || !displayLabel) {
       return null;
     }
-    return /* @__PURE__ */ jsxRuntime.jsx(core.Title, { id: utils.titleId(fieldPathId), order: 4, fw: "normal", children: title });
+    return /* @__PURE__ */ jsxRuntime.jsx(core$1.Title, { id: utils.titleId(fieldPathId), order: 4, fw: "normal", children: title });
   }
 
   // src/utils.ts
@@ -143,6 +138,7 @@
   function BaseInputTemplate(props) {
     const {
       id,
+      htmlName,
       type,
       schema,
       value,
@@ -185,10 +181,10 @@
       [onFocus, id]
     );
     const input = inputProps.type === "number" || inputProps.type === "integer" ? /* @__PURE__ */ jsxRuntime.jsx(
-      core.NumberInput,
+      core$1.NumberInput,
       {
         id,
-        name: id,
+        name: htmlName || id,
         label: utils.labelValue(label || void 0, hideLabel, false),
         required,
         autoFocus: autofocus,
@@ -207,10 +203,10 @@
         "aria-describedby": utils.ariaDescribedByIds(id, !!schema.examples)
       }
     ) : /* @__PURE__ */ jsxRuntime.jsx(
-      core.TextInput,
+      core$1.TextInput,
       {
         id,
-        name: id,
+        name: htmlName || id,
         label: utils.labelValue(label || void 0, hideLabel, false),
         required,
         autoFocus: autofocus,
@@ -238,7 +234,7 @@
   function DescriptionField(props) {
     const { id, description, registry, uiSchema } = props;
     if (description) {
-      return /* @__PURE__ */ jsxRuntime.jsx(core.Text, { id, mt: 3, mb: "sm", children: /* @__PURE__ */ jsxRuntime.jsx(core$1.RichDescription, { description, registry, uiSchema }) });
+      return /* @__PURE__ */ jsxRuntime.jsx(core$1.Text, { id, mt: 3, mb: "sm", children: /* @__PURE__ */ jsxRuntime.jsx(core.RichDescription, { description, registry, uiSchema }) });
     }
     return null;
   }
@@ -390,13 +386,13 @@
   }) {
     const { translateString } = registry;
     return /* @__PURE__ */ jsxRuntime.jsx(
-      core.Alert,
+      core$1.Alert,
       {
         color: "red",
         variant: "transparent",
-        title: /* @__PURE__ */ jsxRuntime.jsx(core.Title, { order: 5, fw: "normal", children: translateString(utils.TranslatableString.ErrorsLabel) }),
+        title: /* @__PURE__ */ jsxRuntime.jsx(core$1.Title, { order: 5, fw: "normal", children: translateString(utils.TranslatableString.ErrorsLabel) }),
         icon: /* @__PURE__ */ jsxRuntime.jsx(ExclamationCircle, {}),
-        children: /* @__PURE__ */ jsxRuntime.jsx(core.List, { children: errors.map((error, index) => /* @__PURE__ */ jsxRuntime.jsx(core.List.Item, { c: "red", children: error.stack }, `error-${index}`)) })
+        children: /* @__PURE__ */ jsxRuntime.jsx(core$1.List, { children: errors.map((error, index) => /* @__PURE__ */ jsxRuntime.jsx(core$1.List.Item, { c: "red", children: error.stack }, `error-${index}`)) })
       }
     );
   }
@@ -405,12 +401,12 @@
     if (norender) {
       return null;
     }
-    return /* @__PURE__ */ jsxRuntime.jsx(core.Button, { type: "submit", variant: "filled", ...submitButtonProps, children: submitText });
+    return /* @__PURE__ */ jsxRuntime.jsx(core$1.Button, { type: "submit", variant: "filled", ...submitButtonProps, children: submitText });
   }
   function IconButton(props) {
     const { icon, iconType = "sm", color, onClick, uiSchema, registry, ...otherProps } = props;
     return /* @__PURE__ */ jsxRuntime.jsx(
-      core.ActionIcon,
+      core$1.ActionIcon,
       {
         size: iconType,
         color,
@@ -493,7 +489,7 @@
       return null;
     }
     const id = utils.errorId(fieldPathId);
-    return /* @__PURE__ */ jsxRuntime.jsx(core.Box, { id, c: "red", display: "none", children: /* @__PURE__ */ jsxRuntime.jsx(core.List, { children: errors.map((error, index) => /* @__PURE__ */ jsxRuntime.jsx(core.List.Item, { children: error }, `field-error-${index}`)) }) });
+    return /* @__PURE__ */ jsxRuntime.jsx(core$1.Box, { id, c: "red", display: "none", children: /* @__PURE__ */ jsxRuntime.jsx(core$1.List, { children: errors.map((error, index) => /* @__PURE__ */ jsxRuntime.jsx(core$1.List.Item, { children: error }, `field-error-${index}`)) }) });
   }
   function FieldTemplate(props) {
     const {
@@ -520,7 +516,7 @@
       uiOptions
     );
     if (hidden) {
-      return /* @__PURE__ */ jsxRuntime.jsx(core.Box, { display: "none", children });
+      return /* @__PURE__ */ jsxRuntime.jsx(core$1.Box, { display: "none", children });
     }
     return /* @__PURE__ */ jsxRuntime.jsxs(
       WrapIfAdditionalTemplate2,
@@ -543,18 +539,21 @@
   }
   function FieldHelpTemplate(props) {
     const { fieldPathId, help } = props;
+    if (!help) {
+      return null;
+    }
     const id = utils.helpId(fieldPathId);
-    return !help ? null : /* @__PURE__ */ jsxRuntime.jsx(core.Text, { id, size: "sm", my: "xs", c: "dimmed", children: help });
+    return /* @__PURE__ */ jsxRuntime.jsx(core$1.Text, { id, size: "sm", my: "xs", c: "dimmed", children: help });
   }
   function GridTemplate(props) {
     const { children, column, fluid = true, ...rest } = props;
     if (column) {
-      return /* @__PURE__ */ jsxRuntime.jsx(core.Grid.Col, { ...rest, children });
+      return /* @__PURE__ */ jsxRuntime.jsx(core$1.Grid.Col, { ...rest, children });
     }
     if (fluid) {
-      return /* @__PURE__ */ jsxRuntime.jsx(core.Container, { p: "4", mx: 0, w: "100%", children: /* @__PURE__ */ jsxRuntime.jsx(core.Grid, { ...rest, children }) });
+      return /* @__PURE__ */ jsxRuntime.jsx(core$1.Container, { p: "4", mx: 0, w: "100%", children: /* @__PURE__ */ jsxRuntime.jsx(core$1.Grid, { ...rest, children }) });
     }
-    return /* @__PURE__ */ jsxRuntime.jsx(core.Grid, { grow: true, ...rest, children });
+    return /* @__PURE__ */ jsxRuntime.jsx(core$1.Grid, { grow: true, ...rest, children });
   }
   function ObjectFieldTemplate(props) {
     const {
@@ -563,7 +562,7 @@
       disabled,
       properties,
       optionalDataControl,
-      onAddClick,
+      onAddProperty,
       readonly,
       required,
       schema,
@@ -586,7 +585,7 @@
     const gridCols = typeof uiOptions?.gridCols === "number" && uiOptions?.gridCols || void 0;
     const gridSpacing = uiOptions?.gridSpacing;
     const gridVerticalSpacing = uiOptions?.gridVerticalSpacing;
-    return /* @__PURE__ */ jsxRuntime.jsxs(core.Container, { id: fieldPathId.$id, p: 0, children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs(core$1.Container, { id: fieldPathId.$id, p: 0, children: [
       title && /* @__PURE__ */ jsxRuntime.jsx(
         TitleFieldTemplate,
         {
@@ -610,7 +609,7 @@
         }
       ),
       /* @__PURE__ */ jsxRuntime.jsxs(
-        core.SimpleGrid,
+        core$1.SimpleGrid,
         {
           cols: gridCols,
           spacing: gridSpacing,
@@ -618,16 +617,16 @@
           mb: "sm",
           children: [
             !showOptionalDataControlInTitle ? optionalDataControl : void 0,
-            properties.filter((e) => !e.hidden).map((element) => /* @__PURE__ */ jsxRuntime.jsx(core.Box, { children: element.content }, element.name))
+            properties.filter((e) => !e.hidden).map((element) => /* @__PURE__ */ jsxRuntime.jsx(core$1.Box, { children: element.content }, element.name))
           ]
         }
       ),
-      utils.canExpand(schema, uiSchema, formData) && /* @__PURE__ */ jsxRuntime.jsx(core.Group, { mt: "xs", justify: "flex-end", children: /* @__PURE__ */ jsxRuntime.jsx(
+      utils.canExpand(schema, uiSchema, formData) && /* @__PURE__ */ jsxRuntime.jsx(core$1.Group, { mt: "xs", justify: "flex-end", children: /* @__PURE__ */ jsxRuntime.jsx(
         AddButton2,
         {
           id: utils.buttonId(fieldPathId, "add"),
           disabled: disabled || readonly,
-          onClick: onAddClick(schema),
+          onClick: onAddProperty,
           className: "rjsf-object-property-expand",
           uiSchema,
           registry
@@ -666,11 +665,11 @@
   }
   function TitleField(props) {
     const { id, title, optionalDataControl } = props;
-    let heading = title ? /* @__PURE__ */ jsxRuntime.jsx(core.Title, { id, order: 3, fw: "normal", children: title }) : null;
+    let heading = title ? /* @__PURE__ */ jsxRuntime.jsx(core$1.Title, { id, order: 3, fw: "normal", children: title }) : null;
     if (optionalDataControl) {
-      heading = /* @__PURE__ */ jsxRuntime.jsxs(core.Grid, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(core.Grid.Col, { span: "auto", children: heading }),
-        /* @__PURE__ */ jsxRuntime.jsx(core.Grid.Col, { span: "content", children: optionalDataControl })
+      heading = /* @__PURE__ */ jsxRuntime.jsxs(core$1.Grid, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(core$1.Grid.Col, { span: "auto", children: heading }),
+        /* @__PURE__ */ jsxRuntime.jsx(core$1.Grid.Col, { span: "content", children: optionalDataControl })
       ] });
     }
     return heading;
@@ -686,8 +685,8 @@
       disabled,
       schema,
       uiSchema,
-      onKeyChange,
-      onDropPropertyClick,
+      onKeyRenameBlur,
+      onRemoveProperty,
       registry,
       children
     } = props;
@@ -695,10 +694,6 @@
     const { RemoveButton: RemoveButton2 } = templates.ButtonTemplates;
     const keyLabel = translateString(utils.TranslatableString.KeyLabel, [label]);
     const additional = utils.ADDITIONAL_PROPERTY_FLAG in schema;
-    const handleBlur = react.useCallback(
-      ({ target }) => onKeyChange(target && target.value),
-      [onKeyChange]
-    );
     if (!additional) {
       return /* @__PURE__ */ jsxRuntime.jsx("div", { className: classNames, style, children });
     }
@@ -707,10 +702,10 @@
       ...uiSchema,
       [utils.UI_OPTIONS_KEY]: { ...uiOptions, block: true }
     };
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: classNames, style, children: /* @__PURE__ */ jsxRuntime.jsxs(core.Flex, { gap: "xs", align: "end", justify: "center", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs(core.Grid, { w: "100%", align: "center", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(core.Grid.Col, { span: 6, className: "form-additional", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "form-group", children: /* @__PURE__ */ jsxRuntime.jsx(
-          core.TextInput,
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: classNames, style, children: /* @__PURE__ */ jsxRuntime.jsxs(core$1.Flex, { gap: "xs", align: "end", justify: "center", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(core$1.Grid, { w: "100%", align: "center", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(core$1.Grid.Col, { span: 6, className: "form-additional", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "form-group", children: /* @__PURE__ */ jsxRuntime.jsx(
+          core$1.TextInput,
           {
             className: "form-group",
             label: keyLabel,
@@ -719,10 +714,10 @@
             disabled: disabled || readonly,
             id: `${id}-key`,
             name: `${id}-key`,
-            onBlur: !readonly ? handleBlur : void 0
+            onBlur: !readonly ? onKeyRenameBlur : void 0
           }
         ) }) }),
-        /* @__PURE__ */ jsxRuntime.jsx(core.Grid.Col, { span: 6, className: "form-additional", children })
+        /* @__PURE__ */ jsxRuntime.jsx(core$1.Grid.Col, { span: 6, className: "form-additional", children })
       ] }),
       /* @__PURE__ */ jsxRuntime.jsx(
         RemoveButton2,
@@ -731,7 +726,7 @@
           iconType: "sm",
           className: "rjsf-array-item-remove",
           disabled: disabled || readonly,
-          onClick: onDropPropertyClick(label),
+          onClick: onRemoveProperty,
           uiSchema: buttonUiOptions,
           registry
         }
@@ -739,7 +734,7 @@
     ] }) });
   }
   function MultiSchemaFieldTemplate({ selector, optionSchemaField }) {
-    return /* @__PURE__ */ jsxRuntime.jsxs(core.Stack, { style: { marginBottom: "1rem" }, children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs(core$1.Stack, { style: { marginBottom: "1rem" }, children: [
       selector,
       optionSchemaField
     ] });
@@ -767,66 +762,21 @@
     };
   }
   var templates_default = generateTemplates();
-  function readyForChange(state) {
-    return Object.values(state).every((value) => value !== -1);
+  function AltDateTimeWidget(props) {
+    const { AltDateWidget: AltDateWidget2 } = props.registry.widgets;
+    return /* @__PURE__ */ jsxRuntime.jsx(AltDateWidget2, { time: true, ...props });
   }
   function AltDateWidget(props) {
-    const {
-      id,
-      value,
-      required,
-      disabled,
-      readonly,
-      label,
-      hideLabel,
-      rawErrors,
-      options,
-      onChange,
-      showTime = false,
-      registry
-    } = props;
+    const { id, required, disabled, readonly, label, hideLabel, rawErrors, options, registry } = props;
     const { translateString } = registry;
-    const [state, setState] = react.useState(utils.parseDateString(value, showTime));
-    react.useEffect(() => {
-      setState(utils.parseDateString(value, showTime));
-    }, [showTime, value]);
-    const handleChange = react.useCallback(
-      (property, nextValue) => {
-        const nextState = {
-          ...state,
-          [property]: typeof nextValue === "undefined" ? -1 : nextValue
-        };
-        if (readyForChange(nextState)) {
-          onChange(utils.toDateString(nextState, showTime));
-        } else {
-          setState(nextState);
-        }
-      },
-      [state, onChange, showTime]
-    );
-    const handleSetNow = react.useCallback(() => {
-      if (!disabled && !readonly) {
-        const nextState = utils.parseDateString((/* @__PURE__ */ new Date()).toJSON(), showTime);
-        onChange(utils.toDateString(nextState, showTime));
-      }
-    }, [disabled, readonly, showTime, onChange]);
-    const handleClear = react.useCallback(() => {
-      if (!disabled && !readonly) {
-        onChange("");
-      }
-    }, [disabled, readonly, onChange]);
+    const { elements, handleChange, handleClear, handleSetNow } = utils.useAltDateWidgetProps(props);
     return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      !hideLabel && !!label && /* @__PURE__ */ jsxRuntime.jsx(core.Input.Label, { id: utils.titleId(id), required, children: label }),
-      /* @__PURE__ */ jsxRuntime.jsxs(core.Flex, { gap: "xs", align: "center", wrap: "nowrap", children: [
-        utils.getDateElementProps(
-          state,
-          showTime,
-          options.yearsRange,
-          options.format
-        ).map((elemProps, i) => {
-          const elemId = id + "_" + elemProps.type;
-          return /* @__PURE__ */ jsxRuntime.jsx(core.Box, { children: /* @__PURE__ */ jsxRuntime.jsx(
-            core.Select,
+      !hideLabel && !!label && /* @__PURE__ */ jsxRuntime.jsx(core$1.Input.Label, { id: utils.titleId(id), required, children: label }),
+      /* @__PURE__ */ jsxRuntime.jsxs(core$1.Flex, { gap: "xs", align: "center", wrap: "nowrap", children: [
+        elements.map((elemProps, i) => {
+          const elemId = `${id}_${elemProps.type}`;
+          return /* @__PURE__ */ jsxRuntime.jsx(core$1.Box, { children: /* @__PURE__ */ jsxRuntime.jsx(
+            core$1.Select,
             {
               id: elemId,
               name: elemId,
@@ -834,7 +784,7 @@
               disabled: disabled || readonly,
               data: utils.dateRangeOptions(elemProps.range[0], elemProps.range[1]).map((item) => item.value.toString()),
               value: !elemProps.value || elemProps.value < 0 ? null : elemProps.value.toString(),
-              onChange: (v) => handleChange(elemProps.type, v),
+              onChange: (v) => handleChange(elemProps.type, v || void 0),
               searchable: false,
               allowDeselect: false,
               comboboxProps: { withinPortal: false },
@@ -842,25 +792,14 @@
             }
           ) }, i);
         }),
-        /* @__PURE__ */ jsxRuntime.jsxs(core.Group, { wrap: "nowrap", gap: 3, children: [
-          (options.hideNowButton !== "undefined" ? !options.hideNowButton : true) && /* @__PURE__ */ jsxRuntime.jsx(core.Button, { variant: "subtle", size: "xs", onClick: handleSetNow, children: translateString(utils.TranslatableString.NowLabel) }),
-          (options.hideClearButton !== "undefined" ? !options.hideClearButton : true) && /* @__PURE__ */ jsxRuntime.jsx(core.Button, { variant: "subtle", size: "xs", onClick: handleClear, children: translateString(utils.TranslatableString.ClearLabel) })
+        /* @__PURE__ */ jsxRuntime.jsxs(core$1.Group, { wrap: "nowrap", gap: 3, children: [
+          (options.hideNowButton !== "undefined" ? !options.hideNowButton : true) && /* @__PURE__ */ jsxRuntime.jsx(core$1.Button, { variant: "subtle", size: "xs", onClick: handleSetNow, children: translateString(utils.TranslatableString.NowLabel) }),
+          (options.hideClearButton !== "undefined" ? !options.hideClearButton : true) && /* @__PURE__ */ jsxRuntime.jsx(core$1.Button, { variant: "subtle", size: "xs", onClick: handleClear, children: translateString(utils.TranslatableString.ClearLabel) })
         ] })
       ] }),
-      rawErrors && rawErrors?.length > 0 && rawErrors.map((error, index) => /* @__PURE__ */ jsxRuntime.jsx(core.Input.Error, { children: error }, `alt-date-widget-input-errors-${index}`))
+      rawErrors && rawErrors?.length > 0 && rawErrors.map((error, index) => /* @__PURE__ */ jsxRuntime.jsx(core$1.Input.Error, { children: error }, `alt-date-widget-input-errors-${index}`))
     ] });
   }
-  AltDateWidget.defaultProps = {
-    showTime: false
-  };
-  function AltDateTimeWidget(props) {
-    const { AltDateWidget: AltDateWidget2 } = props.registry.widgets;
-    return /* @__PURE__ */ jsxRuntime.jsx(AltDateWidget2, { showTime: true, ...props });
-  }
-  AltDateTimeWidget.defaultProps = {
-    ...AltDateWidget?.defaultProps,
-    showTime: true
-  };
   var dateParser = (input, format) => {
     if (!input) {
       return null;
@@ -1023,6 +962,7 @@
   function CheckboxesWidget(props) {
     const {
       id,
+      htmlName,
       value,
       required,
       disabled,
@@ -1064,9 +1004,9 @@
     );
     const selectedIndexes = utils.enumOptionsIndexForValue(value, enumOptions, true);
     return Array.isArray(enumOptions) && enumOptions.length > 0 ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      !hideLabel && !!label && /* @__PURE__ */ jsxRuntime.jsx(core.Input.Label, { id: utils.titleId(id), required, children: label }),
+      !hideLabel && !!label && /* @__PURE__ */ jsxRuntime.jsx(core$1.Input.Label, { id: utils.titleId(id), required, children: label }),
       /* @__PURE__ */ jsxRuntime.jsx(
-        core.Checkbox.Group,
+        core$1.Checkbox.Group,
         {
           id,
           value: selectedIndexes,
@@ -1076,11 +1016,11 @@
           error: rawErrors && rawErrors.length > 0 ? rawErrors.join("\n") : void 0,
           "aria-describedby": utils.ariaDescribedByIds(id),
           ...themeProps,
-          children: Array.isArray(enumOptions) ? /* @__PURE__ */ jsxRuntime.jsx(core.Flex, { mt: "xs", direction: inline ? "row" : "column", gap: "xs", wrap: "wrap", children: enumOptions.map((option, i) => /* @__PURE__ */ jsxRuntime.jsx(
-            core.Checkbox,
+          children: Array.isArray(enumOptions) ? /* @__PURE__ */ jsxRuntime.jsx(core$1.Flex, { mt: "xs", direction: inline ? "row" : "column", gap: "xs", wrap: "wrap", children: enumOptions.map((option, i) => /* @__PURE__ */ jsxRuntime.jsx(
+            core$1.Checkbox,
             {
               id: utils.optionId(id, i),
-              name: id,
+              name: htmlName || id,
               value: String(i),
               label: option.label,
               disabled: Array.isArray(enumDisabled) && enumDisabled.indexOf(option.value) !== -1,
@@ -1098,6 +1038,7 @@
     const {
       id,
       name,
+      htmlName,
       value = false,
       required,
       disabled,
@@ -1157,10 +1098,10 @@
         }
       ),
       /* @__PURE__ */ jsxRuntime.jsx(
-        core.Checkbox,
+        core$1.Checkbox,
         {
           id,
-          name,
+          name: htmlName || name,
           label: utils.labelValue(label || void 0, hideLabel, false),
           disabled: disabled || readonly,
           required,
@@ -1218,7 +1159,7 @@
       [onFocus, id]
     );
     return /* @__PURE__ */ jsxRuntime.jsx(
-      core.ColorInput,
+      core$1.ColorInput,
       {
         id,
         name,
@@ -1238,62 +1179,6 @@
       }
     );
   }
-  function addNameToDataURL(dataURL, name) {
-    if (dataURL === null) {
-      return null;
-    }
-    return dataURL.replace(";base64", `;name=${encodeURIComponent(name)};base64`);
-  }
-  function processFile(file) {
-    const { name, size, type } = file;
-    return new Promise((resolve, reject) => {
-      const reader = new window.FileReader();
-      reader.onerror = reject;
-      reader.onload = (event) => {
-        if (typeof event.target?.result === "string") {
-          resolve({
-            dataURL: addNameToDataURL(event.target.result, name),
-            name,
-            size,
-            type
-          });
-        } else {
-          resolve({
-            dataURL: null,
-            name,
-            size,
-            type
-          });
-        }
-      };
-      reader.readAsDataURL(file);
-    });
-  }
-  function processFiles(files) {
-    return Promise.all(Array.from(files).map(processFile));
-  }
-  function extractFileInfo(dataURLs) {
-    return dataURLs.reduce((acc, dataURL) => {
-      if (!dataURL) {
-        return acc;
-      }
-      try {
-        const { blob, name } = utils.dataURItoBlob(dataURL);
-        return [
-          ...acc,
-          {
-            dataURL,
-            name,
-            size: blob.size,
-            type: blob.type
-          }
-        ];
-      } catch (e) {
-        console.log(e);
-        return acc;
-      }
-    }, []);
-  }
   function FileWidget(props) {
     const {
       id,
@@ -1311,46 +1196,24 @@
       multiple,
       onChange
     } = props;
+    const { filesInfo, handleChange, handleRemove } = utils.useFileWidgetProps(value, onChange, multiple);
     const themeProps = cleanupOptions(options);
-    const handleChange = react.useCallback(
+    const handleOnChange = react.useCallback(
       (files) => {
         if (typeof files === "object") {
-          processFiles(multiple ? files : [files]).then((filesInfoEvent) => {
-            const newValue = filesInfoEvent.map((fileInfo) => fileInfo.dataURL);
-            if (multiple) {
-              onChange(value.concat(newValue));
-            } else {
-              onChange(newValue[0]);
-            }
-          });
-        }
-        return;
-      },
-      [multiple, value, onChange]
-    );
-    const handleRemoveFile = react.useCallback(
-      (index) => {
-        if (multiple) {
-          const newValue = value.filter((_, i) => i !== index);
-          onChange(newValue);
-        } else {
-          onChange(void 0);
+          handleChange(files);
         }
       },
-      [multiple, value, onChange]
-    );
-    const ValueComponent = react.useCallback(
-      (props2) => {
-        const filesInfo = props2.value ? extractFileInfo(Array.isArray(props2.value) ? props2.value : [props2.value]) : null;
-        if (Array.isArray(filesInfo) && filesInfo.length > 0) {
-          return /* @__PURE__ */ jsxRuntime.jsx(core.Pill.Group, { children: filesInfo.map((file, index) => /* @__PURE__ */ jsxRuntime.jsx(core.Pill, { withRemoveButton: true, onRemove: () => handleRemoveFile(index), children: file.name }, index)) });
-        }
-        return null;
-      },
-      [handleRemoveFile]
+      [handleChange]
     );
+    const ValueComponent = react.useCallback(() => {
+      if (Array.isArray(filesInfo) && filesInfo.length > 0) {
+        return /* @__PURE__ */ jsxRuntime.jsx(core$1.Pill.Group, { children: filesInfo.map((file, index) => /* @__PURE__ */ jsxRuntime.jsx(core$1.Pill, { withRemoveButton: true, onRemove: () => handleRemove(index), children: file.name }, index)) });
+      }
+      return null;
+    }, [handleRemove, filesInfo]);
     return /* @__PURE__ */ jsxRuntime.jsx(
-      core.FileInput,
+      core$1.FileInput,
       {
         id,
         name,
@@ -1362,7 +1225,7 @@
         label: utils.labelValue(label || void 0, hideLabel, false),
         multiple: !!multiple,
         valueComponent: ValueComponent,
-        onChange: handleChange,
+        onChange: handleOnChange,
         error: rawErrors && rawErrors.length > 0 ? rawErrors.join("\n") : void 0,
         ...themeProps,
         "aria-describedby": utils.ariaDescribedByIds(id)
@@ -1412,7 +1275,7 @@
       [onFocus, id]
     );
     return /* @__PURE__ */ jsxRuntime.jsx(
-      core.PasswordInput,
+      core$1.PasswordInput,
       {
         id,
         name,
@@ -1434,6 +1297,7 @@
   function RadioWidget(props) {
     const {
       id,
+      htmlName,
       value,
       required,
       disabled,
@@ -1475,10 +1339,10 @@
     );
     const selected = utils.enumOptionsIndexForValue(value, enumOptions);
     return /* @__PURE__ */ jsxRuntime.jsx(
-      core.Radio.Group,
+      core$1.Radio.Group,
       {
         id,
-        name: id,
+        name: htmlName || id,
         value: selected,
         label: !hideLabel ? label : void 0,
         onChange: handleChange,
@@ -1487,8 +1351,8 @@
         error: rawErrors && rawErrors.length > 0 ? rawErrors.join("\n") : void 0,
         "aria-describedby": utils.ariaDescribedByIds(id),
         ...themeProps,
-        children: Array.isArray(enumOptions) ? /* @__PURE__ */ jsxRuntime.jsx(core.Flex, { mt: "xs", direction: inline ? "row" : "column", gap: "xs", wrap: "wrap", children: enumOptions.map((option, i) => /* @__PURE__ */ jsxRuntime.jsx(
-          core.Radio,
+        children: Array.isArray(enumOptions) ? /* @__PURE__ */ jsxRuntime.jsx(core$1.Flex, { mt: "xs", direction: inline ? "row" : "column", gap: "xs", wrap: "wrap", children: enumOptions.map((option, i) => /* @__PURE__ */ jsxRuntime.jsx(
+          core$1.Radio,
           {
             id: utils.optionId(id, i),
             value: String(i),
@@ -1542,10 +1406,10 @@
       }
     }, [onFocus, id, value]);
     return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      !hideLabel && !!label && /* @__PURE__ */ jsxRuntime.jsx(core.Input.Label, { id: utils.titleId(id), required, children: label }),
-      options?.description && /* @__PURE__ */ jsxRuntime.jsx(core.Input.Description, { children: options.description }),
+      !hideLabel && !!label && /* @__PURE__ */ jsxRuntime.jsx(core$1.Input.Label, { id: utils.titleId(id), required, children: label }),
+      options?.description && /* @__PURE__ */ jsxRuntime.jsx(core$1.Input.Description, { children: options.description }),
       /* @__PURE__ */ jsxRuntime.jsx(
-        core.Slider,
+        core$1.Slider,
         {
           id,
           name,
@@ -1562,12 +1426,13 @@
           "aria-describedby": utils.ariaDescribedByIds(id)
         }
       ),
-      rawErrors && rawErrors?.length > 0 && rawErrors.map((error, index) => /* @__PURE__ */ jsxRuntime.jsx(core.Input.Error, { children: error }, `range-widget-input-errors-${index}`))
+      rawErrors && rawErrors?.length > 0 && rawErrors.map((error, index) => /* @__PURE__ */ jsxRuntime.jsx(core$1.Input.Error, { children: error }, `range-widget-input-errors-${index}`))
     ] });
   }
   function SelectWidget(props) {
     const {
       id,
+      htmlName,
       value,
       placeholder,
       required,
@@ -1621,12 +1486,12 @@
       }
       return [];
     }, [enumDisabled, enumOptions]);
-    const Component = multiple ? core.MultiSelect : core.Select;
+    const Component = multiple ? core$1.MultiSelect : core$1.Select;
     return /* @__PURE__ */ jsxRuntime.jsx(
       Component,
       {
         id,
-        name: id,
+        name: htmlName || id,
         label: utils.labelValue(label || void 0, hideLabel, false),
         data: selectOptions,
         value: multiple ? selectedIndexes : selectedIndexes,
@@ -1649,6 +1514,7 @@
     const {
       id,
       name,
+      htmlName,
       value,
       placeholder,
       required,
@@ -1688,10 +1554,10 @@
       [onFocus, id]
     );
     return /* @__PURE__ */ jsxRuntime.jsx(
-      core.Textarea,
+      core$1.Textarea,
       {
         id,
-        name,
+        name: htmlName || name,
         value: value || "",
         placeholder: placeholder || void 0,
         required,
@@ -1741,7 +1607,7 @@
 
   // src/Form/index.ts
   function generateForm() {
-    return core$1.withTheme(generateTheme());
+    return core.withTheme(generateTheme());
   }
   var Form_default = generateForm();