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

package/dist/mantine.esm.js

@@ -52,11 +52,6 @@ function ArrayFieldTemplate(props) {
     registry,
     uiOptions
   );
-  const ArrayFieldItemTemplate2 = getTemplate2(
-    "ArrayFieldItemTemplate",
-    registry,
-    uiOptions
-  );
   const ArrayFieldTitleTemplate2 = getTemplate2(
     "ArrayFieldTitleTemplate",
     registry,
@@ -91,7 +86,7 @@ function ArrayFieldTemplate(props) {
     ),
     /* @__PURE__ */ jsxs2(Box2, { className: "row rjsf-array-item-list", children: [
       !showOptionalDataControlInTitle ? optionalDataControl : void 0,
-      items.map(({ key, ...itemProps }) => /* @__PURE__ */ jsx2(ArrayFieldItemTemplate2, { ...itemProps }, key))
+      items
     ] }),
     canAdd && /* @__PURE__ */ jsx2(Group2, { justify: "flex-end", children: /* @__PURE__ */ jsx2(
       AddButton2,
@@ -176,6 +171,7 @@ import { Fragment, jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
 function BaseInputTemplate(props) {
   const {
     id,
+    htmlName,
     type,
     schema,
     value,
@@ -221,7 +217,7 @@ function BaseInputTemplate(props) {
     NumberInput,
     {
       id,
-      name: id,
+      name: htmlName || id,
       label: labelValue(label || void 0, hideLabel, false),
       required,
       autoFocus: autofocus,
@@ -243,7 +239,7 @@ function BaseInputTemplate(props) {
     TextInput,
     {
       id,
-      name: id,
+      name: htmlName || id,
       label: labelValue(label || void 0, hideLabel, false),
       required,
       autoFocus: autofocus,
@@ -625,8 +621,11 @@ import { Text as Text2 } from "@mantine/core";
 import { jsx as jsx13 } from "react/jsx-runtime";
 function FieldHelpTemplate(props) {
   const { fieldPathId, help } = props;
+  if (!help) {
+    return null;
+  }
   const id = helpId(fieldPathId);
-  return !help ? null : /* @__PURE__ */ jsx13(Text2, { id, size: "sm", my: "xs", c: "dimmed", children: help });
+  return /* @__PURE__ */ jsx13(Text2, { id, size: "sm", my: "xs", c: "dimmed", children: help });
 }
 
 // src/templates/GridTemplate.tsx
@@ -661,7 +660,7 @@ function ObjectFieldTemplate(props) {
     disabled,
     properties,
     optionalDataControl,
-    onAddClick,
+    onAddProperty,
     readonly,
     required,
     schema,
@@ -725,7 +724,7 @@ function ObjectFieldTemplate(props) {
       {
         id: buttonId2(fieldPathId, "add"),
         disabled: disabled || readonly,
-        onClick: onAddClick(schema),
+        onClick: onAddProperty,
         className: "rjsf-object-property-expand",
         uiSchema,
         registry
@@ -782,7 +781,6 @@ function TitleField(props) {
 }
 
 // src/templates/WrapIfAdditionalTemplate.tsx
-import { useCallback as useCallback2 } from "react";
 import {
   ADDITIONAL_PROPERTY_FLAG,
   UI_OPTIONS_KEY,
@@ -802,8 +800,8 @@ function WrapIfAdditionalTemplate(props) {
     disabled,
     schema,
     uiSchema,
-    onKeyChange,
-    onDropPropertyClick,
+    onKeyRenameBlur,
+    onRemoveProperty,
     registry,
     children
   } = props;
@@ -811,10 +809,6 @@ function WrapIfAdditionalTemplate(props) {
   const { RemoveButton: RemoveButton2 } = templates.ButtonTemplates;
   const keyLabel = translateString(TranslatableString4.KeyLabel, [label]);
   const additional = ADDITIONAL_PROPERTY_FLAG in schema;
-  const handleBlur = useCallback2(
-    ({ target }) => onKeyChange(target && target.value),
-    [onKeyChange]
-  );
   if (!additional) {
     return /* @__PURE__ */ jsx18("div", { className: classNames, style, children });
   }
@@ -835,7 +829,7 @@ function WrapIfAdditionalTemplate(props) {
           disabled: disabled || readonly,
           id: `${id}-key`,
           name: `${id}-key`,
-          onBlur: !readonly ? handleBlur : void 0
+          onBlur: !readonly ? onKeyRenameBlur : void 0
         }
       ) }) }),
       /* @__PURE__ */ jsx18(Grid3.Col, { span: 6, className: "form-additional", children })
@@ -847,7 +841,7 @@ function WrapIfAdditionalTemplate(props) {
         iconType: "sm",
         className: "rjsf-array-item-remove",
         disabled: disabled || readonly,
-        onClick: onDropPropertyClick(label),
+        onClick: onRemoveProperty,
         uiSchema: buttonUiOptions,
         registry
       }
@@ -892,78 +886,33 @@ var templates_default = generateTemplates();
 import dayjs2 from "dayjs";
 import customParseFormat from "dayjs/plugin/customParseFormat";
 
+// src/widgets/DateTime/AltDateTimeWidget.tsx
+import { jsx as jsx19 } from "react/jsx-runtime";
+function AltDateTimeWidget(props) {
+  const { AltDateWidget: AltDateWidget2 } = props.registry.widgets;
+  return /* @__PURE__ */ jsx19(AltDateWidget2, { time: true, ...props });
+}
+
 // src/widgets/DateTime/AltDateWidget.tsx
-import { useCallback as useCallback3, useEffect, useState } from "react";
 import {
   ariaDescribedByIds as ariaDescribedByIds2,
   dateRangeOptions,
-  parseDateString,
-  toDateString,
-  getDateElementProps,
   titleId as titleId3,
-  TranslatableString as TranslatableString5
+  TranslatableString as TranslatableString5,
+  useAltDateWidgetProps
 } from "@rjsf/utils";
 import { Flex as Flex3, Box as Box6, Group as Group4, Button as Button2, Select, Input } from "@mantine/core";
-import { Fragment as Fragment2, jsx as jsx19, jsxs as jsxs10 } from "react/jsx-runtime";
-function readyForChange(state) {
-  return Object.values(state).every((value) => value !== -1);
-}
+import { Fragment as Fragment2, jsx as jsx20, jsxs as jsxs10 } from "react/jsx-runtime";
 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] = useState(parseDateString(value, showTime));
-  useEffect(() => {
-    setState(parseDateString(value, showTime));
-  }, [showTime, value]);
-  const handleChange = useCallback3(
-    (property, nextValue) => {
-      const nextState = {
-        ...state,
-        [property]: typeof nextValue === "undefined" ? -1 : nextValue
-      };
-      if (readyForChange(nextState)) {
-        onChange(toDateString(nextState, showTime));
-      } else {
-        setState(nextState);
-      }
-    },
-    [state, onChange, showTime]
-  );
-  const handleSetNow = useCallback3(() => {
-    if (!disabled && !readonly) {
-      const nextState = parseDateString((/* @__PURE__ */ new Date()).toJSON(), showTime);
-      onChange(toDateString(nextState, showTime));
-    }
-  }, [disabled, readonly, showTime, onChange]);
-  const handleClear = useCallback3(() => {
-    if (!disabled && !readonly) {
-      onChange("");
-    }
-  }, [disabled, readonly, onChange]);
+  const { elements, handleChange, handleClear, handleSetNow } = useAltDateWidgetProps(props);
   return /* @__PURE__ */ jsxs10(Fragment2, { children: [
-    !hideLabel && !!label && /* @__PURE__ */ jsx19(Input.Label, { id: titleId3(id), required, children: label }),
+    !hideLabel && !!label && /* @__PURE__ */ jsx20(Input.Label, { id: titleId3(id), required, children: label }),
     /* @__PURE__ */ jsxs10(Flex3, { gap: "xs", align: "center", wrap: "nowrap", children: [
-      getDateElementProps(
-        state,
-        showTime,
-        options.yearsRange,
-        options.format
-      ).map((elemProps, i) => {
-        const elemId = id + "_" + elemProps.type;
-        return /* @__PURE__ */ jsx19(Box6, { children: /* @__PURE__ */ jsx19(
+      elements.map((elemProps, i) => {
+        const elemId = `${id}_${elemProps.type}`;
+        return /* @__PURE__ */ jsx20(Box6, { children: /* @__PURE__ */ jsx20(
           Select,
           {
             id: elemId,
@@ -972,7 +921,7 @@ function AltDateWidget(props) {
             disabled: disabled || readonly,
             data: 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 },
@@ -981,30 +930,16 @@ function AltDateWidget(props) {
         ) }, i);
       }),
       /* @__PURE__ */ jsxs10(Group4, { wrap: "nowrap", gap: 3, children: [
-        (options.hideNowButton !== "undefined" ? !options.hideNowButton : true) && /* @__PURE__ */ jsx19(Button2, { variant: "subtle", size: "xs", onClick: handleSetNow, children: translateString(TranslatableString5.NowLabel) }),
-        (options.hideClearButton !== "undefined" ? !options.hideClearButton : true) && /* @__PURE__ */ jsx19(Button2, { variant: "subtle", size: "xs", onClick: handleClear, children: translateString(TranslatableString5.ClearLabel) })
+        (options.hideNowButton !== "undefined" ? !options.hideNowButton : true) && /* @__PURE__ */ jsx20(Button2, { variant: "subtle", size: "xs", onClick: handleSetNow, children: translateString(TranslatableString5.NowLabel) }),
+        (options.hideClearButton !== "undefined" ? !options.hideClearButton : true) && /* @__PURE__ */ jsx20(Button2, { variant: "subtle", size: "xs", onClick: handleClear, children: translateString(TranslatableString5.ClearLabel) })
       ] })
     ] }),
-    rawErrors && rawErrors?.length > 0 && rawErrors.map((error, index) => /* @__PURE__ */ jsx19(Input.Error, { children: error }, `alt-date-widget-input-errors-${index}`))
+    rawErrors && rawErrors?.length > 0 && rawErrors.map((error, index) => /* @__PURE__ */ jsx20(Input.Error, { children: error }, `alt-date-widget-input-errors-${index}`))
   ] });
 }
-AltDateWidget.defaultProps = {
-  showTime: false
-};
-
-// src/widgets/DateTime/AltDateTimeWidget.tsx
-import { jsx as jsx20 } from "react/jsx-runtime";
-function AltDateTimeWidget(props) {
-  const { AltDateWidget: AltDateWidget2 } = props.registry.widgets;
-  return /* @__PURE__ */ jsx20(AltDateWidget2, { showTime: true, ...props });
-}
-AltDateTimeWidget.defaultProps = {
-  ...AltDateWidget?.defaultProps,
-  showTime: true
-};
 
 // src/widgets/DateTime/DateTimeInput.tsx
-import { useCallback as useCallback4 } from "react";
+import { useCallback as useCallback2 } from "react";
 import {
   ariaDescribedByIds as ariaDescribedByIds3,
   labelValue as labelValue2
@@ -1045,18 +980,18 @@ function DateTimeInput(props) {
     valueFormat,
     displayFormat
   } = props;
-  const handleChange = useCallback4(
+  const handleChange = useCallback2(
     (nextValue) => {
       onChange(dateFormat(nextValue, valueFormat));
     },
     [onChange, valueFormat]
   );
-  const handleBlur = useCallback4(() => {
+  const handleBlur = useCallback2(() => {
     if (onBlur) {
       onBlur(id, value);
     }
   }, [onBlur, id, value]);
-  const handleFocus = useCallback4(() => {
+  const handleFocus = useCallback2(() => {
     if (onFocus) {
       onFocus(id, value);
     }
@@ -1117,7 +1052,7 @@ function DateTimeWidget(props) {
 }
 
 // src/widgets/DateTime/TimeWidget.tsx
-import { useCallback as useCallback5 } from "react";
+import { useCallback as useCallback3 } from "react";
 import {
   labelValue as labelValue3,
   ariaDescribedByIds as ariaDescribedByIds4
@@ -1143,13 +1078,13 @@ function TimeWidget(props) {
     onFocus
   } = props;
   const emptyValue = options.emptyValue || "";
-  const handleChange = useCallback5(
+  const handleChange = useCallback3(
     (e) => {
       onChange(e.target.value === "" ? emptyValue : e.target.value);
     },
     [onChange, emptyValue]
   );
-  const handleBlur = useCallback5(
+  const handleBlur = useCallback3(
     ({ target }) => {
       if (onBlur) {
         onBlur(id, target && target.value);
@@ -1157,7 +1092,7 @@ function TimeWidget(props) {
     },
     [onBlur, id]
   );
-  const handleFocus = useCallback5(
+  const handleFocus = useCallback3(
     ({ target }) => {
       if (onFocus) {
         onFocus(id, target && target.value);
@@ -1188,7 +1123,7 @@ function TimeWidget(props) {
 }
 
 // src/widgets/CheckboxesWidget.tsx
-import { useCallback as useCallback6 } from "react";
+import { useCallback as useCallback4 } from "react";
 import {
   ariaDescribedByIds as ariaDescribedByIds5,
   enumOptionsValueForIndex,
@@ -1201,6 +1136,7 @@ import { Fragment as Fragment3, jsx as jsx25, jsxs as jsxs11 } from "react/jsx-r
 function CheckboxesWidget(props) {
   const {
     id,
+    htmlName,
     value,
     required,
     disabled,
@@ -1216,7 +1152,7 @@ function CheckboxesWidget(props) {
   } = props;
   const { enumOptions, enumDisabled, inline, emptyValue } = options;
   const themeProps = cleanupOptions(options);
-  const handleChange = useCallback6(
+  const handleChange = useCallback4(
     (nextValue) => {
       if (!disabled && !readonly && onChange) {
         onChange(enumOptionsValueForIndex(nextValue, enumOptions, emptyValue));
@@ -1224,7 +1160,7 @@ function CheckboxesWidget(props) {
     },
     [onChange, disabled, readonly, enumOptions, emptyValue]
   );
-  const handleBlur = useCallback6(
+  const handleBlur = useCallback4(
     ({ target }) => {
       if (onBlur) {
         onBlur(id, enumOptionsValueForIndex(target.value, enumOptions, emptyValue));
@@ -1232,7 +1168,7 @@ function CheckboxesWidget(props) {
     },
     [onBlur, id, enumOptions, emptyValue]
   );
-  const handleFocus = useCallback6(
+  const handleFocus = useCallback4(
     ({ target }) => {
       if (onFocus) {
         onFocus(id, enumOptionsValueForIndex(target.value, enumOptions, emptyValue));
@@ -1258,7 +1194,7 @@ function CheckboxesWidget(props) {
           Checkbox,
           {
             id: optionId(id, i),
-            name: id,
+            name: htmlName || id,
             value: String(i),
             label: option.label,
             disabled: Array.isArray(enumDisabled) && enumDisabled.indexOf(option.value) !== -1,
@@ -1274,7 +1210,7 @@ function CheckboxesWidget(props) {
 }
 
 // src/widgets/CheckboxWidget.tsx
-import { useCallback as useCallback7 } from "react";
+import { useCallback as useCallback5 } from "react";
 import {
   descriptionId as descriptionId2,
   getTemplate as getTemplate5,
@@ -1287,6 +1223,7 @@ function CheckboxWidget(props) {
   const {
     id,
     name,
+    htmlName,
     value = false,
     required,
     disabled,
@@ -1309,7 +1246,7 @@ function CheckboxWidget(props) {
     registry,
     options
   );
-  const handleCheckboxChange = useCallback7(
+  const handleCheckboxChange = useCallback5(
     (e) => {
       if (!disabled && !readonly && onChange) {
         onChange(e.currentTarget.checked);
@@ -1317,7 +1254,7 @@ function CheckboxWidget(props) {
     },
     [onChange, disabled, readonly]
   );
-  const handleBlur = useCallback7(
+  const handleBlur = useCallback5(
     ({ target }) => {
       if (onBlur) {
         onBlur(id, target.checked);
@@ -1325,7 +1262,7 @@ function CheckboxWidget(props) {
     },
     [onBlur, id]
   );
-  const handleFocus = useCallback7(
+  const handleFocus = useCallback5(
     ({ target }) => {
       if (onFocus) {
         onFocus(id, target.checked);
@@ -1349,7 +1286,7 @@ function CheckboxWidget(props) {
       Checkbox2,
       {
         id,
-        name,
+        name: htmlName || name,
         label: labelValue4(label || void 0, hideLabel, false),
         disabled: disabled || readonly,
         required,
@@ -1367,7 +1304,7 @@ function CheckboxWidget(props) {
 }
 
 // src/widgets/ColorWidget.tsx
-import { useCallback as useCallback8 } from "react";
+import { useCallback as useCallback6 } from "react";
 import {
   labelValue as labelValue5,
   ariaDescribedByIds as ariaDescribedByIds7
@@ -1393,13 +1330,13 @@ function ColorWidget(props) {
     onFocus
   } = props;
   const themeProps = cleanupOptions(options);
-  const handleChange = useCallback8(
+  const handleChange = useCallback6(
     (nextValue) => {
       onChange(nextValue);
     },
     [onChange]
   );
-  const handleBlur = useCallback8(
+  const handleBlur = useCallback6(
     ({ target }) => {
       if (onBlur) {
         onBlur(id, target && target.value);
@@ -1407,7 +1344,7 @@ function ColorWidget(props) {
     },
     [onBlur, id]
   );
-  const handleFocus = useCallback8(
+  const handleFocus = useCallback6(
     ({ target }) => {
       if (onFocus) {
         onFocus(id, target && target.value);
@@ -1438,70 +1375,14 @@ function ColorWidget(props) {
 }
 
 // src/widgets/FileWidget.tsx
-import { useCallback as useCallback9 } from "react";
+import { useCallback as useCallback7 } from "react";
 import {
-  dataURItoBlob,
   ariaDescribedByIds as ariaDescribedByIds8,
-  labelValue as labelValue6
+  labelValue as labelValue6,
+  useFileWidgetProps
 } from "@rjsf/utils";
 import { FileInput, Pill } from "@mantine/core";
 import { jsx as jsx28 } from "react/jsx-runtime";
-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 } = dataURItoBlob(dataURL);
-      return [
-        ...acc,
-        {
-          dataURL,
-          name,
-          size: blob.size,
-          type: blob.type
-        }
-      ];
-    } catch (e) {
-      console.log(e);
-      return acc;
-    }
-  }, []);
-}
 function FileWidget(props) {
   const {
     id,
@@ -1519,44 +1400,22 @@ function FileWidget(props) {
     multiple,
     onChange
   } = props;
+  const { filesInfo, handleChange, handleRemove } = useFileWidgetProps(value, onChange, multiple);
   const themeProps = cleanupOptions(options);
-  const handleChange = useCallback9(
+  const handleOnChange = useCallback7(
     (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 = useCallback9(
-    (index) => {
-      if (multiple) {
-        const newValue = value.filter((_, i) => i !== index);
-        onChange(newValue);
-      } else {
-        onChange(void 0);
+        handleChange(files);
       }
     },
-    [multiple, value, onChange]
-  );
-  const ValueComponent = useCallback9(
-    (props2) => {
-      const filesInfo = props2.value ? extractFileInfo(Array.isArray(props2.value) ? props2.value : [props2.value]) : null;
-      if (Array.isArray(filesInfo) && filesInfo.length > 0) {
-        return /* @__PURE__ */ jsx28(Pill.Group, { children: filesInfo.map((file, index) => /* @__PURE__ */ jsx28(Pill, { withRemoveButton: true, onRemove: () => handleRemoveFile(index), children: file.name }, index)) });
-      }
-      return null;
-    },
-    [handleRemoveFile]
+    [handleChange]
   );
+  const ValueComponent = useCallback7(() => {
+    if (Array.isArray(filesInfo) && filesInfo.length > 0) {
+      return /* @__PURE__ */ jsx28(Pill.Group, { children: filesInfo.map((file, index) => /* @__PURE__ */ jsx28(Pill, { withRemoveButton: true, onRemove: () => handleRemove(index), children: file.name }, index)) });
+    }
+    return null;
+  }, [handleRemove, filesInfo]);
   return /* @__PURE__ */ jsx28(
     FileInput,
     {
@@ -1570,7 +1429,7 @@ function FileWidget(props) {
       label: labelValue6(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": ariaDescribedByIds8(id)
@@ -1579,7 +1438,7 @@ function FileWidget(props) {
 }
 
 // src/widgets/PasswordWidget.tsx
-import { useCallback as useCallback10 } from "react";
+import { useCallback as useCallback8 } from "react";
 import {
   ariaDescribedByIds as ariaDescribedByIds9,
   labelValue as labelValue7
@@ -1606,13 +1465,13 @@ function PasswordWidget(props) {
   } = props;
   const emptyValue = options.emptyValue || "";
   const themeProps = cleanupOptions(options);
-  const handleChange = useCallback10(
+  const handleChange = useCallback8(
     (e) => {
       onChange(e.target.value === "" ? emptyValue : e.target.value);
     },
     [onChange, emptyValue]
   );
-  const handleBlur = useCallback10(
+  const handleBlur = useCallback8(
     ({ target }) => {
       if (onBlur) {
         onBlur(id, target && target.value);
@@ -1620,7 +1479,7 @@ function PasswordWidget(props) {
     },
     [onBlur, id]
   );
-  const handleFocus = useCallback10(
+  const handleFocus = useCallback8(
     ({ target }) => {
       if (onFocus) {
         onFocus(id, target && target.value);
@@ -1650,7 +1509,7 @@ function PasswordWidget(props) {
 }
 
 // src/widgets/RadioWidget.tsx
-import { useCallback as useCallback11 } from "react";
+import { useCallback as useCallback9 } from "react";
 import {
   ariaDescribedByIds as ariaDescribedByIds10,
   enumOptionsIndexForValue as enumOptionsIndexForValue2,
@@ -1662,6 +1521,7 @@ import { jsx as jsx30 } from "react/jsx-runtime";
 function RadioWidget(props) {
   const {
     id,
+    htmlName,
     value,
     required,
     disabled,
@@ -1677,7 +1537,7 @@ function RadioWidget(props) {
   } = props;
   const { enumOptions, enumDisabled, inline, emptyValue } = options;
   const themeProps = cleanupOptions(options);
-  const handleChange = useCallback11(
+  const handleChange = useCallback9(
     (nextValue) => {
       if (!disabled && !readonly && onChange) {
         onChange(enumOptionsValueForIndex2(nextValue, enumOptions, emptyValue));
@@ -1685,7 +1545,7 @@ function RadioWidget(props) {
     },
     [onChange, disabled, readonly, enumOptions, emptyValue]
   );
-  const handleBlur = useCallback11(
+  const handleBlur = useCallback9(
     ({ target }) => {
       if (onBlur) {
         onBlur(id, enumOptionsValueForIndex2(target && target.value, enumOptions, emptyValue));
@@ -1693,7 +1553,7 @@ function RadioWidget(props) {
     },
     [onBlur, id, enumOptions, emptyValue]
   );
-  const handleFocus = useCallback11(
+  const handleFocus = useCallback9(
     ({ target }) => {
       if (onFocus) {
         onFocus(id, enumOptionsValueForIndex2(target && target.value, enumOptions, emptyValue));
@@ -1706,7 +1566,7 @@ function RadioWidget(props) {
     Radio.Group,
     {
       id,
-      name: id,
+      name: htmlName || id,
       value: selected,
       label: !hideLabel ? label : void 0,
       onChange: handleChange,
@@ -1733,7 +1593,7 @@ function RadioWidget(props) {
 }
 
 // src/widgets/RangeWidget.tsx
-import { useCallback as useCallback12 } from "react";
+import { useCallback as useCallback10 } from "react";
 import {
   ariaDescribedByIds as ariaDescribedByIds11,
   rangeSpec,
@@ -1761,7 +1621,7 @@ function RangeWidget(props) {
   } = props;
   const themeProps = cleanupOptions(options);
   const { min, max, step } = rangeSpec(schema);
-  const handleChange = useCallback12(
+  const handleChange = useCallback10(
     (nextValue) => {
       if (!disabled && !readonly && onChange) {
         onChange(nextValue);
@@ -1769,12 +1629,12 @@ function RangeWidget(props) {
     },
     [onChange, disabled, readonly]
   );
-  const handleBlur = useCallback12(() => {
+  const handleBlur = useCallback10(() => {
     if (onBlur) {
       onBlur(id, value);
     }
   }, [onBlur, id, value]);
-  const handleFocus = useCallback12(() => {
+  const handleFocus = useCallback10(() => {
     if (onFocus) {
       onFocus(id, value);
     }
@@ -1805,7 +1665,7 @@ function RangeWidget(props) {
 }
 
 // src/widgets/SelectWidget.tsx
-import { useCallback as useCallback13, useMemo } from "react";
+import { useCallback as useCallback11, useMemo } from "react";
 import {
   ariaDescribedByIds as ariaDescribedByIds12,
   enumOptionsIndexForValue as enumOptionsIndexForValue3,
@@ -1817,6 +1677,7 @@ import { jsx as jsx32 } from "react/jsx-runtime";
 function SelectWidget(props) {
   const {
     id,
+    htmlName,
     value,
     placeholder,
     required,
@@ -1834,7 +1695,7 @@ function SelectWidget(props) {
   } = props;
   const { enumOptions, enumDisabled, emptyValue } = options;
   const themeProps = cleanupOptions(options);
-  const handleChange = useCallback13(
+  const handleChange = useCallback11(
     (nextValue) => {
       if (!disabled && !readonly && onChange) {
         onChange(enumOptionsValueForIndex3(nextValue, enumOptions, emptyValue));
@@ -1842,7 +1703,7 @@ function SelectWidget(props) {
     },
     [onChange, disabled, readonly, enumOptions, emptyValue]
   );
-  const handleBlur = useCallback13(
+  const handleBlur = useCallback11(
     ({ target }) => {
       if (onBlur) {
         onBlur(id, enumOptionsValueForIndex3(target && target.value, enumOptions, emptyValue));
@@ -1850,7 +1711,7 @@ function SelectWidget(props) {
     },
     [onBlur, id, enumOptions, emptyValue]
   );
-  const handleFocus = useCallback13(
+  const handleFocus = useCallback11(
     ({ target }) => {
       if (onFocus) {
         onFocus(id, enumOptionsValueForIndex3(target && target.value, enumOptions, emptyValue));
@@ -1875,7 +1736,7 @@ function SelectWidget(props) {
     Component,
     {
       id,
-      name: id,
+      name: htmlName || id,
       label: labelValue8(label || void 0, hideLabel, false),
       data: selectOptions,
       value: multiple ? selectedIndexes : selectedIndexes,
@@ -1896,7 +1757,7 @@ function SelectWidget(props) {
 }
 
 // src/widgets/TextareaWidget.tsx
-import { useCallback as useCallback14 } from "react";
+import { useCallback as useCallback12 } from "react";
 import {
   labelValue as labelValue9,
   ariaDescribedByIds as ariaDescribedByIds13
@@ -1907,6 +1768,7 @@ function TextareaWidget(props) {
   const {
     id,
     name,
+    htmlName,
     value,
     placeholder,
     required,
@@ -1923,13 +1785,13 @@ function TextareaWidget(props) {
   } = props;
   const themeProps = cleanupOptions(options);
   const emptyValue = options?.emptyValue ?? "";
-  const handleChange = useCallback14(
+  const handleChange = useCallback12(
     (e) => {
       onChange(e.target.value === "" ? emptyValue : e.target.value);
     },
     [onChange, emptyValue]
   );
-  const handleBlur = useCallback14(
+  const handleBlur = useCallback12(
     ({ target }) => {
       if (onBlur) {
         onBlur(id, target && target.value);
@@ -1937,7 +1799,7 @@ function TextareaWidget(props) {
     },
     [onBlur, id]
   );
-  const handleFocus = useCallback14(
+  const handleFocus = useCallback12(
     ({ target }) => {
       if (onFocus) {
         onFocus(id, target && target.value);
@@ -1949,7 +1811,7 @@ function TextareaWidget(props) {
     Textarea,
     {
       id,
-      name,
+      name: htmlName || name,
       value: value || "",
       placeholder: placeholder || void 0,
       required,