@rjsf/mantine 6.0.0-beta.20 → 6.0.0-beta.22

package/dist/mantine.esm.js

@@ -37,6 +37,7 @@ function ArrayFieldTemplate(props) {
     disabled,
     fieldPathId,
     items,
+    optionalDataControl,
     onAddClick,
     readonly,
     required,
@@ -51,16 +52,12 @@ function ArrayFieldTemplate(props) {
     registry,
     uiOptions
   );
-  const ArrayFieldItemTemplate2 = getTemplate2(
-    "ArrayFieldItemTemplate",
-    registry,
-    uiOptions
-  );
   const ArrayFieldTitleTemplate2 = getTemplate2(
     "ArrayFieldTitleTemplate",
     registry,
     uiOptions
   );
+  const showOptionalDataControlInTitle = !readonly && !disabled;
   const {
     ButtonTemplates: { AddButton: AddButton2 }
   } = registry.templates;
@@ -72,7 +69,8 @@ function ArrayFieldTemplate(props) {
       title: uiOptions.title || title,
       schema,
       uiSchema,
-      registry
+      registry,
+      optionalDataControl: showOptionalDataControlInTitle ? optionalDataControl : void 0
     }
   );
   return /* @__PURE__ */ jsxs2(Fieldset, { legend, className, id: fieldPathId.$id, children: [
@@ -86,7 +84,10 @@ function ArrayFieldTemplate(props) {
         registry
       }
     ),
-    /* @__PURE__ */ jsx2(Box2, { className: "row rjsf-array-item-list", children: items && items.map(({ key, ...itemProps }) => /* @__PURE__ */ jsx2(ArrayFieldItemTemplate2, { ...itemProps }, key)) }),
+    /* @__PURE__ */ jsxs2(Box2, { className: "row rjsf-array-item-list", children: [
+      !showOptionalDataControlInTitle ? optionalDataControl : void 0,
+      items
+    ] }),
     canAdd && /* @__PURE__ */ jsx2(Group2, { justify: "flex-end", children: /* @__PURE__ */ jsx2(
       AddButton2,
       {
@@ -170,6 +171,7 @@ import { Fragment, jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
 function BaseInputTemplate(props) {
   const {
     id,
+    htmlName,
     type,
     schema,
     value,
@@ -215,7 +217,7 @@ function BaseInputTemplate(props) {
     NumberInput,
     {
       id,
-      name: id,
+      name: htmlName || id,
       label: labelValue(label || void 0, hideLabel, false),
       required,
       autoFocus: autofocus,
@@ -237,7 +239,7 @@ function BaseInputTemplate(props) {
     TextInput,
     {
       id,
-      name: id,
+      name: htmlName || id,
       label: labelValue(label || void 0, hideLabel, false),
       required,
       autoFocus: autofocus,
@@ -654,7 +656,8 @@ function ObjectFieldTemplate(props) {
     description,
     disabled,
     properties,
-    onAddClick,
+    optionalDataControl,
+    onAddProperty,
     readonly,
     required,
     schema,
@@ -670,6 +673,7 @@ function ObjectFieldTemplate(props) {
     registry,
     uiOptions
   );
+  const showOptionalDataControlInTitle = !readonly && !disabled;
   const {
     ButtonTemplates: { AddButton: AddButton2 }
   } = registry.templates;
@@ -685,7 +689,8 @@ function ObjectFieldTemplate(props) {
         required,
         schema,
         uiSchema,
-        registry
+        registry,
+        optionalDataControl: showOptionalDataControlInTitle ? optionalDataControl : void 0
       }
     ),
     description && /* @__PURE__ */ jsx15(
@@ -698,14 +703,17 @@ function ObjectFieldTemplate(props) {
         registry
       }
     ),
-    /* @__PURE__ */ jsx15(
+    /* @__PURE__ */ jsxs6(
       SimpleGrid,
       {
         cols: gridCols,
         spacing: gridSpacing,
         verticalSpacing: gridVerticalSpacing,
         mb: "sm",
-        children: properties.filter((e) => !e.hidden).map((element) => /* @__PURE__ */ jsx15(Box5, { children: element.content }, element.name))
+        children: [
+          !showOptionalDataControlInTitle ? optionalDataControl : void 0,
+          properties.filter((e) => !e.hidden).map((element) => /* @__PURE__ */ jsx15(Box5, { children: element.content }, element.name))
+        ]
       }
     ),
     canExpand(schema, uiSchema, formData) && /* @__PURE__ */ jsx15(Group3, { mt: "xs", justify: "flex-end", children: /* @__PURE__ */ jsx15(
@@ -713,7 +721,7 @@ function ObjectFieldTemplate(props) {
       {
         id: buttonId2(fieldPathId, "add"),
         disabled: disabled || readonly,
-        onClick: onAddClick(schema),
+        onClick: onAddProperty,
         className: "rjsf-object-property-expand",
         uiSchema,
         registry
@@ -722,24 +730,62 @@ function ObjectFieldTemplate(props) {
   ] });
 }
 
-// src/templates/TitleField.tsx
-import { Title as Title3 } from "@mantine/core";
+// src/templates/OptionalDataControlsTemplate.tsx
 import { jsx as jsx16 } from "react/jsx-runtime";
+function OptionalDataControlsTemplate(props) {
+  const { id, registry, label, onAddClick, onRemoveClick } = props;
+  if (onAddClick) {
+    return /* @__PURE__ */ jsx16(
+      AddButton,
+      {
+        id,
+        registry,
+        icon: "plus",
+        className: "rjsf-add-optional-data",
+        onClick: onAddClick,
+        title: label
+      }
+    );
+  } else if (onRemoveClick) {
+    return /* @__PURE__ */ jsx16(
+      RemoveButton,
+      {
+        id,
+        registry,
+        icon: "remove",
+        className: "rjsf-remove-optional-data",
+        onClick: onRemoveClick,
+        title: label
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx16("em", { id, children: label });
+}
+
+// src/templates/TitleField.tsx
+import { Grid as Grid2, Title as Title3 } from "@mantine/core";
+import { jsx as jsx17, jsxs as jsxs7 } from "react/jsx-runtime";
 function TitleField(props) {
-  const { id, title } = props;
-  return title ? /* @__PURE__ */ jsx16(Title3, { id, order: 3, fw: "normal", children: title }) : null;
+  const { id, title, optionalDataControl } = props;
+  let heading = title ? /* @__PURE__ */ jsx17(Title3, { id, order: 3, fw: "normal", children: title }) : null;
+  if (optionalDataControl) {
+    heading = /* @__PURE__ */ jsxs7(Grid2, { children: [
+      /* @__PURE__ */ jsx17(Grid2.Col, { span: "auto", children: heading }),
+      /* @__PURE__ */ jsx17(Grid2.Col, { span: "content", children: optionalDataControl })
+    ] });
+  }
+  return heading;
 }
 
 // src/templates/WrapIfAdditionalTemplate.tsx
-import { useCallback as useCallback2 } from "react";
 import {
   ADDITIONAL_PROPERTY_FLAG,
   UI_OPTIONS_KEY,
   buttonId as buttonId3,
   TranslatableString as TranslatableString4
 } from "@rjsf/utils";
-import { Flex as Flex2, Grid as Grid2, TextInput as TextInput2 } from "@mantine/core";
-import { jsx as jsx17, jsxs as jsxs7 } from "react/jsx-runtime";
+import { Flex as Flex2, Grid as Grid3, TextInput as TextInput2 } from "@mantine/core";
+import { jsx as jsx18, jsxs as jsxs8 } from "react/jsx-runtime";
 function WrapIfAdditionalTemplate(props) {
   const {
     id,
@@ -751,8 +797,8 @@ function WrapIfAdditionalTemplate(props) {
     disabled,
     schema,
     uiSchema,
-    onKeyChange,
-    onDropPropertyClick,
+    onKeyRenameBlur,
+    onRemoveProperty,
     registry,
     children
   } = props;
@@ -760,21 +806,17 @@ 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__ */ jsx17("div", { className: classNames, style, children });
+    return /* @__PURE__ */ jsx18("div", { className: classNames, style, children });
   }
   const uiOptions = uiSchema ? uiSchema[UI_OPTIONS_KEY] : {};
   const buttonUiOptions = {
     ...uiSchema,
     [UI_OPTIONS_KEY]: { ...uiOptions, block: true }
   };
-  return /* @__PURE__ */ jsx17("div", { className: classNames, style, children: /* @__PURE__ */ jsxs7(Flex2, { gap: "xs", align: "end", justify: "center", children: [
-    /* @__PURE__ */ jsxs7(Grid2, { w: "100%", align: "center", children: [
-      /* @__PURE__ */ jsx17(Grid2.Col, { span: 6, className: "form-additional", children: /* @__PURE__ */ jsx17("div", { className: "form-group", children: /* @__PURE__ */ jsx17(
+  return /* @__PURE__ */ jsx18("div", { className: classNames, style, children: /* @__PURE__ */ jsxs8(Flex2, { gap: "xs", align: "end", justify: "center", children: [
+    /* @__PURE__ */ jsxs8(Grid3, { w: "100%", align: "center", children: [
+      /* @__PURE__ */ jsx18(Grid3.Col, { span: 6, className: "form-additional", children: /* @__PURE__ */ jsx18("div", { className: "form-group", children: /* @__PURE__ */ jsx18(
         TextInput2,
         {
           className: "form-group",
@@ -784,19 +826,19 @@ function WrapIfAdditionalTemplate(props) {
           disabled: disabled || readonly,
           id: `${id}-key`,
           name: `${id}-key`,
-          onBlur: !readonly ? handleBlur : void 0
+          onBlur: !readonly ? onKeyRenameBlur : void 0
         }
       ) }) }),
-      /* @__PURE__ */ jsx17(Grid2.Col, { span: 6, className: "form-additional", children })
+      /* @__PURE__ */ jsx18(Grid3.Col, { span: 6, className: "form-additional", children })
     ] }),
-    /* @__PURE__ */ jsx17(
+    /* @__PURE__ */ jsx18(
       RemoveButton2,
       {
         id: buttonId3(id, "remove"),
         iconType: "sm",
         className: "rjsf-array-item-remove",
         disabled: disabled || readonly,
-        onClick: onDropPropertyClick(label),
+        onClick: onRemoveProperty,
         uiSchema: buttonUiOptions,
         registry
       }
@@ -806,9 +848,9 @@ function WrapIfAdditionalTemplate(props) {
 
 // src/templates/MultiSchemaFieldTemplate.tsx
 import { Stack } from "@mantine/core";
-import { jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsxs as jsxs9 } from "react/jsx-runtime";
 function MultiSchemaFieldTemplate({ selector, optionSchemaField }) {
-  return /* @__PURE__ */ jsxs8(Stack, { style: { marginBottom: "1rem" }, children: [
+  return /* @__PURE__ */ jsxs9(Stack, { style: { marginBottom: "1rem" }, children: [
     selector,
     optionSchemaField
   ] });
@@ -829,6 +871,7 @@ function generateTemplates() {
     FieldHelpTemplate,
     GridTemplate,
     ObjectFieldTemplate,
+    OptionalDataControlsTemplate,
     TitleFieldTemplate: TitleField,
     WrapIfAdditionalTemplate,
     MultiSchemaFieldTemplate
@@ -841,7 +884,7 @@ import dayjs2 from "dayjs";
 import customParseFormat from "dayjs/plugin/customParseFormat";
 
 // src/widgets/DateTime/AltDateWidget.tsx
-import { useCallback as useCallback3, useEffect, useState } from "react";
+import { useCallback as useCallback2, useEffect, useState } from "react";
 import {
   ariaDescribedByIds as ariaDescribedByIds2,
   dateRangeOptions,
@@ -852,7 +895,7 @@ import {
   TranslatableString as TranslatableString5
 } 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 jsx18, jsxs as jsxs9 } from "react/jsx-runtime";
+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);
 }
@@ -876,7 +919,7 @@ function AltDateWidget(props) {
   useEffect(() => {
     setState(parseDateString(value, showTime));
   }, [showTime, value]);
-  const handleChange = useCallback3(
+  const handleChange = useCallback2(
     (property, nextValue) => {
       const nextState = {
         ...state,
@@ -890,20 +933,20 @@ function AltDateWidget(props) {
     },
     [state, onChange, showTime]
   );
-  const handleSetNow = useCallback3(() => {
+  const handleSetNow = useCallback2(() => {
     if (!disabled && !readonly) {
       const nextState = parseDateString((/* @__PURE__ */ new Date()).toJSON(), showTime);
       onChange(toDateString(nextState, showTime));
     }
   }, [disabled, readonly, showTime, onChange]);
-  const handleClear = useCallback3(() => {
+  const handleClear = useCallback2(() => {
     if (!disabled && !readonly) {
       onChange("");
     }
   }, [disabled, readonly, onChange]);
-  return /* @__PURE__ */ jsxs9(Fragment2, { children: [
-    !hideLabel && !!label && /* @__PURE__ */ jsx18(Input.Label, { id: titleId3(id), required, children: label }),
-    /* @__PURE__ */ jsxs9(Flex3, { gap: "xs", align: "center", wrap: "nowrap", children: [
+  return /* @__PURE__ */ jsxs10(Fragment2, { children: [
+    !hideLabel && !!label && /* @__PURE__ */ jsx19(Input.Label, { id: titleId3(id), required, children: label }),
+    /* @__PURE__ */ jsxs10(Flex3, { gap: "xs", align: "center", wrap: "nowrap", children: [
       getDateElementProps(
         state,
         showTime,
@@ -911,7 +954,7 @@ function AltDateWidget(props) {
         options.format
       ).map((elemProps, i) => {
         const elemId = id + "_" + elemProps.type;
-        return /* @__PURE__ */ jsx18(Box6, { children: /* @__PURE__ */ jsx18(
+        return /* @__PURE__ */ jsx19(Box6, { children: /* @__PURE__ */ jsx19(
           Select,
           {
             id: elemId,
@@ -928,12 +971,12 @@ function AltDateWidget(props) {
           }
         ) }, i);
       }),
-      /* @__PURE__ */ jsxs9(Group4, { wrap: "nowrap", gap: 3, children: [
-        (options.hideNowButton !== "undefined" ? !options.hideNowButton : true) && /* @__PURE__ */ jsx18(Button2, { variant: "subtle", size: "xs", onClick: handleSetNow, children: translateString(TranslatableString5.NowLabel) }),
-        (options.hideClearButton !== "undefined" ? !options.hideClearButton : true) && /* @__PURE__ */ jsx18(Button2, { variant: "subtle", size: "xs", onClick: handleClear, children: translateString(TranslatableString5.ClearLabel) })
+      /* @__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) })
       ] })
     ] }),
-    rawErrors && rawErrors?.length > 0 && rawErrors.map((error, index) => /* @__PURE__ */ jsx18(Input.Error, { children: error }, `alt-date-widget-input-errors-${index}`))
+    rawErrors && rawErrors?.length > 0 && rawErrors.map((error, index) => /* @__PURE__ */ jsx19(Input.Error, { children: error }, `alt-date-widget-input-errors-${index}`))
   ] });
 }
 AltDateWidget.defaultProps = {
@@ -941,10 +984,10 @@ AltDateWidget.defaultProps = {
 };
 
 // src/widgets/DateTime/AltDateTimeWidget.tsx
-import { jsx as jsx19 } from "react/jsx-runtime";
+import { jsx as jsx20 } from "react/jsx-runtime";
 function AltDateTimeWidget(props) {
   const { AltDateWidget: AltDateWidget2 } = props.registry.widgets;
-  return /* @__PURE__ */ jsx19(AltDateWidget2, { showTime: true, ...props });
+  return /* @__PURE__ */ jsx20(AltDateWidget2, { showTime: true, ...props });
 }
 AltDateTimeWidget.defaultProps = {
   ...AltDateWidget?.defaultProps,
@@ -952,14 +995,14 @@ AltDateTimeWidget.defaultProps = {
 };
 
 // src/widgets/DateTime/DateTimeInput.tsx
-import { useCallback as useCallback4 } from "react";
+import { useCallback as useCallback3 } from "react";
 import {
   ariaDescribedByIds as ariaDescribedByIds3,
   labelValue as labelValue2
 } from "@rjsf/utils";
 import dayjs from "dayjs";
 import { DateInput } from "@mantine/dates";
-import { jsx as jsx20 } from "react/jsx-runtime";
+import { jsx as jsx21 } from "react/jsx-runtime";
 var dateParser = (input, format) => {
   if (!input) {
     return null;
@@ -993,23 +1036,23 @@ function DateTimeInput(props) {
     valueFormat,
     displayFormat
   } = props;
-  const handleChange = useCallback4(
+  const handleChange = useCallback3(
     (nextValue) => {
       onChange(dateFormat(nextValue, valueFormat));
     },
     [onChange, valueFormat]
   );
-  const handleBlur = useCallback4(() => {
+  const handleBlur = useCallback3(() => {
     if (onBlur) {
       onBlur(id, value);
     }
   }, [onBlur, id, value]);
-  const handleFocus = useCallback4(() => {
+  const handleFocus = useCallback3(() => {
     if (onFocus) {
       onFocus(id, value);
     }
   }, [onFocus, id, value]);
-  return /* @__PURE__ */ jsx20(
+  return /* @__PURE__ */ jsx21(
     DateInput,
     {
       id,
@@ -1035,10 +1078,10 @@ function DateTimeInput(props) {
 }
 
 // src/widgets/DateTime/DateWidget.tsx
-import { jsx as jsx21 } from "react/jsx-runtime";
+import { jsx as jsx22 } from "react/jsx-runtime";
 function DateWidget(props) {
   const { valueFormat = "YYYY-MM-DD", displayFormat, ...otherOptions } = props.options;
-  return /* @__PURE__ */ jsx21(
+  return /* @__PURE__ */ jsx22(
     DateTimeInput,
     {
       ...props,
@@ -1050,10 +1093,10 @@ function DateWidget(props) {
 }
 
 // src/widgets/DateTime/DateTimeWidget.tsx
-import { jsx as jsx22 } from "react/jsx-runtime";
+import { jsx as jsx23 } from "react/jsx-runtime";
 function DateTimeWidget(props) {
   const { valueFormat = "YYYY-MM-DD HH:mm:ss", displayFormat, ...otherOptions } = props.options;
-  return /* @__PURE__ */ jsx22(
+  return /* @__PURE__ */ jsx23(
     DateTimeInput,
     {
       ...props,
@@ -1065,13 +1108,13 @@ function DateTimeWidget(props) {
 }
 
 // src/widgets/DateTime/TimeWidget.tsx
-import { useCallback as useCallback5 } from "react";
+import { useCallback as useCallback4 } from "react";
 import {
   labelValue as labelValue3,
   ariaDescribedByIds as ariaDescribedByIds4
 } from "@rjsf/utils";
 import { TimeInput } from "@mantine/dates";
-import { jsx as jsx23 } from "react/jsx-runtime";
+import { jsx as jsx24 } from "react/jsx-runtime";
 function TimeWidget(props) {
   const {
     id,
@@ -1091,13 +1134,13 @@ function TimeWidget(props) {
     onFocus
   } = props;
   const emptyValue = options.emptyValue || "";
-  const handleChange = useCallback5(
+  const handleChange = useCallback4(
     (e) => {
       onChange(e.target.value === "" ? emptyValue : e.target.value);
     },
     [onChange, emptyValue]
   );
-  const handleBlur = useCallback5(
+  const handleBlur = useCallback4(
     ({ target }) => {
       if (onBlur) {
         onBlur(id, target && target.value);
@@ -1105,7 +1148,7 @@ function TimeWidget(props) {
     },
     [onBlur, id]
   );
-  const handleFocus = useCallback5(
+  const handleFocus = useCallback4(
     ({ target }) => {
       if (onFocus) {
         onFocus(id, target && target.value);
@@ -1113,7 +1156,7 @@ function TimeWidget(props) {
     },
     [onFocus, id]
   );
-  return /* @__PURE__ */ jsx23(
+  return /* @__PURE__ */ jsx24(
     TimeInput,
     {
       id,
@@ -1136,7 +1179,7 @@ function TimeWidget(props) {
 }
 
 // src/widgets/CheckboxesWidget.tsx
-import { useCallback as useCallback6 } from "react";
+import { useCallback as useCallback5 } from "react";
 import {
   ariaDescribedByIds as ariaDescribedByIds5,
   enumOptionsValueForIndex,
@@ -1145,10 +1188,11 @@ import {
   titleId as titleId4
 } from "@rjsf/utils";
 import { Checkbox, Flex as Flex4, Input as Input2 } from "@mantine/core";
-import { Fragment as Fragment3, jsx as jsx24, jsxs as jsxs10 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx25, jsxs as jsxs11 } from "react/jsx-runtime";
 function CheckboxesWidget(props) {
   const {
     id,
+    htmlName,
     value,
     required,
     disabled,
@@ -1164,7 +1208,7 @@ function CheckboxesWidget(props) {
   } = props;
   const { enumOptions, enumDisabled, inline, emptyValue } = options;
   const themeProps = cleanupOptions(options);
-  const handleChange = useCallback6(
+  const handleChange = useCallback5(
     (nextValue) => {
       if (!disabled && !readonly && onChange) {
         onChange(enumOptionsValueForIndex(nextValue, enumOptions, emptyValue));
@@ -1172,7 +1216,7 @@ function CheckboxesWidget(props) {
     },
     [onChange, disabled, readonly, enumOptions, emptyValue]
   );
-  const handleBlur = useCallback6(
+  const handleBlur = useCallback5(
     ({ target }) => {
       if (onBlur) {
         onBlur(id, enumOptionsValueForIndex(target.value, enumOptions, emptyValue));
@@ -1180,7 +1224,7 @@ function CheckboxesWidget(props) {
     },
     [onBlur, id, enumOptions, emptyValue]
   );
-  const handleFocus = useCallback6(
+  const handleFocus = useCallback5(
     ({ target }) => {
       if (onFocus) {
         onFocus(id, enumOptionsValueForIndex(target.value, enumOptions, emptyValue));
@@ -1189,9 +1233,9 @@ function CheckboxesWidget(props) {
     [onFocus, id, enumOptions, emptyValue]
   );
   const selectedIndexes = enumOptionsIndexForValue(value, enumOptions, true);
-  return Array.isArray(enumOptions) && enumOptions.length > 0 ? /* @__PURE__ */ jsxs10(Fragment3, { children: [
-    !hideLabel && !!label && /* @__PURE__ */ jsx24(Input2.Label, { id: titleId4(id), required, children: label }),
-    /* @__PURE__ */ jsx24(
+  return Array.isArray(enumOptions) && enumOptions.length > 0 ? /* @__PURE__ */ jsxs11(Fragment3, { children: [
+    !hideLabel && !!label && /* @__PURE__ */ jsx25(Input2.Label, { id: titleId4(id), required, children: label }),
+    /* @__PURE__ */ jsx25(
       Checkbox.Group,
       {
         id,
@@ -1202,11 +1246,11 @@ function CheckboxesWidget(props) {
         error: rawErrors && rawErrors.length > 0 ? rawErrors.join("\n") : void 0,
         "aria-describedby": ariaDescribedByIds5(id),
         ...themeProps,
-        children: Array.isArray(enumOptions) ? /* @__PURE__ */ jsx24(Flex4, { mt: "xs", direction: inline ? "row" : "column", gap: "xs", wrap: "wrap", children: enumOptions.map((option, i) => /* @__PURE__ */ jsx24(
+        children: Array.isArray(enumOptions) ? /* @__PURE__ */ jsx25(Flex4, { mt: "xs", direction: inline ? "row" : "column", gap: "xs", wrap: "wrap", children: enumOptions.map((option, i) => /* @__PURE__ */ jsx25(
           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,
@@ -1222,7 +1266,7 @@ function CheckboxesWidget(props) {
 }
 
 // src/widgets/CheckboxWidget.tsx
-import { useCallback as useCallback7 } from "react";
+import { useCallback as useCallback6 } from "react";
 import {
   descriptionId as descriptionId2,
   getTemplate as getTemplate5,
@@ -1230,11 +1274,12 @@ import {
   ariaDescribedByIds as ariaDescribedByIds6
 } from "@rjsf/utils";
 import { Checkbox as Checkbox2 } from "@mantine/core";
-import { Fragment as Fragment4, jsx as jsx25, jsxs as jsxs11 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx26, jsxs as jsxs12 } from "react/jsx-runtime";
 function CheckboxWidget(props) {
   const {
     id,
     name,
+    htmlName,
     value = false,
     required,
     disabled,
@@ -1257,7 +1302,7 @@ function CheckboxWidget(props) {
     registry,
     options
   );
-  const handleCheckboxChange = useCallback7(
+  const handleCheckboxChange = useCallback6(
     (e) => {
       if (!disabled && !readonly && onChange) {
         onChange(e.currentTarget.checked);
@@ -1265,7 +1310,7 @@ function CheckboxWidget(props) {
     },
     [onChange, disabled, readonly]
   );
-  const handleBlur = useCallback7(
+  const handleBlur = useCallback6(
     ({ target }) => {
       if (onBlur) {
         onBlur(id, target.checked);
@@ -1273,7 +1318,7 @@ function CheckboxWidget(props) {
     },
     [onBlur, id]
   );
-  const handleFocus = useCallback7(
+  const handleFocus = useCallback6(
     ({ target }) => {
       if (onFocus) {
         onFocus(id, target.checked);
@@ -1282,8 +1327,8 @@ function CheckboxWidget(props) {
     [onFocus, id]
   );
   const description = options.description || schema.description;
-  return /* @__PURE__ */ jsxs11(Fragment4, { children: [
-    !hideLabel && !!description && /* @__PURE__ */ jsx25(
+  return /* @__PURE__ */ jsxs12(Fragment4, { children: [
+    !hideLabel && !!description && /* @__PURE__ */ jsx26(
       DescriptionFieldTemplate,
       {
         id: descriptionId2(id),
@@ -1293,11 +1338,11 @@ function CheckboxWidget(props) {
         registry
       }
     ),
-    /* @__PURE__ */ jsx25(
+    /* @__PURE__ */ jsx26(
       Checkbox2,
       {
         id,
-        name,
+        name: htmlName || name,
         label: labelValue4(label || void 0, hideLabel, false),
         disabled: disabled || readonly,
         required,
@@ -1315,13 +1360,13 @@ function CheckboxWidget(props) {
 }
 
 // src/widgets/ColorWidget.tsx
-import { useCallback as useCallback8 } from "react";
+import { useCallback as useCallback7 } from "react";
 import {
   labelValue as labelValue5,
   ariaDescribedByIds as ariaDescribedByIds7
 } from "@rjsf/utils";
 import { ColorInput } from "@mantine/core";
-import { jsx as jsx26 } from "react/jsx-runtime";
+import { jsx as jsx27 } from "react/jsx-runtime";
 function ColorWidget(props) {
   const {
     id,
@@ -1341,13 +1386,13 @@ function ColorWidget(props) {
     onFocus
   } = props;
   const themeProps = cleanupOptions(options);
-  const handleChange = useCallback8(
+  const handleChange = useCallback7(
     (nextValue) => {
       onChange(nextValue);
     },
     [onChange]
   );
-  const handleBlur = useCallback8(
+  const handleBlur = useCallback7(
     ({ target }) => {
       if (onBlur) {
         onBlur(id, target && target.value);
@@ -1355,7 +1400,7 @@ function ColorWidget(props) {
     },
     [onBlur, id]
   );
-  const handleFocus = useCallback8(
+  const handleFocus = useCallback7(
     ({ target }) => {
       if (onFocus) {
         onFocus(id, target && target.value);
@@ -1363,7 +1408,7 @@ function ColorWidget(props) {
     },
     [onFocus, id]
   );
-  return /* @__PURE__ */ jsx26(
+  return /* @__PURE__ */ jsx27(
     ColorInput,
     {
       id,
@@ -1386,14 +1431,14 @@ function ColorWidget(props) {
 }
 
 // src/widgets/FileWidget.tsx
-import { useCallback as useCallback9 } from "react";
+import { useCallback as useCallback8 } from "react";
 import {
   dataURItoBlob,
   ariaDescribedByIds as ariaDescribedByIds8,
   labelValue as labelValue6
 } from "@rjsf/utils";
 import { FileInput, Pill } from "@mantine/core";
-import { jsx as jsx27 } from "react/jsx-runtime";
+import { jsx as jsx28 } from "react/jsx-runtime";
 function addNameToDataURL(dataURL, name) {
   if (dataURL === null) {
     return null;
@@ -1468,7 +1513,7 @@ function FileWidget(props) {
     onChange
   } = props;
   const themeProps = cleanupOptions(options);
-  const handleChange = useCallback9(
+  const handleChange = useCallback8(
     (files) => {
       if (typeof files === "object") {
         processFiles(multiple ? files : [files]).then((filesInfoEvent) => {
@@ -1484,7 +1529,7 @@ function FileWidget(props) {
     },
     [multiple, value, onChange]
   );
-  const handleRemoveFile = useCallback9(
+  const handleRemoveFile = useCallback8(
     (index) => {
       if (multiple) {
         const newValue = value.filter((_, i) => i !== index);
@@ -1495,17 +1540,17 @@ function FileWidget(props) {
     },
     [multiple, value, onChange]
   );
-  const ValueComponent = useCallback9(
+  const ValueComponent = useCallback8(
     (props2) => {
       const filesInfo = props2.value ? extractFileInfo(Array.isArray(props2.value) ? props2.value : [props2.value]) : null;
       if (Array.isArray(filesInfo) && filesInfo.length > 0) {
-        return /* @__PURE__ */ jsx27(Pill.Group, { children: filesInfo.map((file, index) => /* @__PURE__ */ jsx27(Pill, { withRemoveButton: true, onRemove: () => handleRemoveFile(index), children: file.name }, index)) });
+        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]
   );
-  return /* @__PURE__ */ jsx27(
+  return /* @__PURE__ */ jsx28(
     FileInput,
     {
       id,
@@ -1527,13 +1572,13 @@ function FileWidget(props) {
 }
 
 // src/widgets/PasswordWidget.tsx
-import { useCallback as useCallback10 } from "react";
+import { useCallback as useCallback9 } from "react";
 import {
   ariaDescribedByIds as ariaDescribedByIds9,
   labelValue as labelValue7
 } from "@rjsf/utils";
 import { PasswordInput } from "@mantine/core";
-import { jsx as jsx28 } from "react/jsx-runtime";
+import { jsx as jsx29 } from "react/jsx-runtime";
 function PasswordWidget(props) {
   const {
     id,
@@ -1554,13 +1599,13 @@ function PasswordWidget(props) {
   } = props;
   const emptyValue = options.emptyValue || "";
   const themeProps = cleanupOptions(options);
-  const handleChange = useCallback10(
+  const handleChange = useCallback9(
     (e) => {
       onChange(e.target.value === "" ? emptyValue : e.target.value);
     },
     [onChange, emptyValue]
   );
-  const handleBlur = useCallback10(
+  const handleBlur = useCallback9(
     ({ target }) => {
       if (onBlur) {
         onBlur(id, target && target.value);
@@ -1568,7 +1613,7 @@ function PasswordWidget(props) {
     },
     [onBlur, id]
   );
-  const handleFocus = useCallback10(
+  const handleFocus = useCallback9(
     ({ target }) => {
       if (onFocus) {
         onFocus(id, target && target.value);
@@ -1576,7 +1621,7 @@ function PasswordWidget(props) {
     },
     [onFocus, id]
   );
-  return /* @__PURE__ */ jsx28(
+  return /* @__PURE__ */ jsx29(
     PasswordInput,
     {
       id,
@@ -1598,7 +1643,7 @@ function PasswordWidget(props) {
 }
 
 // src/widgets/RadioWidget.tsx
-import { useCallback as useCallback11 } from "react";
+import { useCallback as useCallback10 } from "react";
 import {
   ariaDescribedByIds as ariaDescribedByIds10,
   enumOptionsIndexForValue as enumOptionsIndexForValue2,
@@ -1606,10 +1651,11 @@ import {
   optionId as optionId2
 } from "@rjsf/utils";
 import { Radio, Flex as Flex5 } from "@mantine/core";
-import { jsx as jsx29 } from "react/jsx-runtime";
+import { jsx as jsx30 } from "react/jsx-runtime";
 function RadioWidget(props) {
   const {
     id,
+    htmlName,
     value,
     required,
     disabled,
@@ -1625,7 +1671,7 @@ function RadioWidget(props) {
   } = props;
   const { enumOptions, enumDisabled, inline, emptyValue } = options;
   const themeProps = cleanupOptions(options);
-  const handleChange = useCallback11(
+  const handleChange = useCallback10(
     (nextValue) => {
       if (!disabled && !readonly && onChange) {
         onChange(enumOptionsValueForIndex2(nextValue, enumOptions, emptyValue));
@@ -1633,7 +1679,7 @@ function RadioWidget(props) {
     },
     [onChange, disabled, readonly, enumOptions, emptyValue]
   );
-  const handleBlur = useCallback11(
+  const handleBlur = useCallback10(
     ({ target }) => {
       if (onBlur) {
         onBlur(id, enumOptionsValueForIndex2(target && target.value, enumOptions, emptyValue));
@@ -1641,7 +1687,7 @@ function RadioWidget(props) {
     },
     [onBlur, id, enumOptions, emptyValue]
   );
-  const handleFocus = useCallback11(
+  const handleFocus = useCallback10(
     ({ target }) => {
       if (onFocus) {
         onFocus(id, enumOptionsValueForIndex2(target && target.value, enumOptions, emptyValue));
@@ -1650,11 +1696,11 @@ function RadioWidget(props) {
     [onFocus, id, enumOptions, emptyValue]
   );
   const selected = enumOptionsIndexForValue2(value, enumOptions);
-  return /* @__PURE__ */ jsx29(
+  return /* @__PURE__ */ jsx30(
     Radio.Group,
     {
       id,
-      name: id,
+      name: htmlName || id,
       value: selected,
       label: !hideLabel ? label : void 0,
       onChange: handleChange,
@@ -1663,7 +1709,7 @@ function RadioWidget(props) {
       error: rawErrors && rawErrors.length > 0 ? rawErrors.join("\n") : void 0,
       "aria-describedby": ariaDescribedByIds10(id),
       ...themeProps,
-      children: Array.isArray(enumOptions) ? /* @__PURE__ */ jsx29(Flex5, { mt: "xs", direction: inline ? "row" : "column", gap: "xs", wrap: "wrap", children: enumOptions.map((option, i) => /* @__PURE__ */ jsx29(
+      children: Array.isArray(enumOptions) ? /* @__PURE__ */ jsx30(Flex5, { mt: "xs", direction: inline ? "row" : "column", gap: "xs", wrap: "wrap", children: enumOptions.map((option, i) => /* @__PURE__ */ jsx30(
         Radio,
         {
           id: optionId2(id, i),
@@ -1681,14 +1727,14 @@ function RadioWidget(props) {
 }
 
 // src/widgets/RangeWidget.tsx
-import { useCallback as useCallback12 } from "react";
+import { useCallback as useCallback11 } from "react";
 import {
   ariaDescribedByIds as ariaDescribedByIds11,
   rangeSpec,
   titleId as titleId5
 } from "@rjsf/utils";
 import { Slider, Input as Input3 } from "@mantine/core";
-import { Fragment as Fragment5, jsx as jsx30, jsxs as jsxs12 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx31, jsxs as jsxs13 } from "react/jsx-runtime";
 function RangeWidget(props) {
   const {
     id,
@@ -1709,7 +1755,7 @@ function RangeWidget(props) {
   } = props;
   const themeProps = cleanupOptions(options);
   const { min, max, step } = rangeSpec(schema);
-  const handleChange = useCallback12(
+  const handleChange = useCallback11(
     (nextValue) => {
       if (!disabled && !readonly && onChange) {
         onChange(nextValue);
@@ -1717,20 +1763,20 @@ function RangeWidget(props) {
     },
     [onChange, disabled, readonly]
   );
-  const handleBlur = useCallback12(() => {
+  const handleBlur = useCallback11(() => {
     if (onBlur) {
       onBlur(id, value);
     }
   }, [onBlur, id, value]);
-  const handleFocus = useCallback12(() => {
+  const handleFocus = useCallback11(() => {
     if (onFocus) {
       onFocus(id, value);
     }
   }, [onFocus, id, value]);
-  return /* @__PURE__ */ jsxs12(Fragment5, { children: [
-    !hideLabel && !!label && /* @__PURE__ */ jsx30(Input3.Label, { id: titleId5(id), required, children: label }),
-    options?.description && /* @__PURE__ */ jsx30(Input3.Description, { children: options.description }),
-    /* @__PURE__ */ jsx30(
+  return /* @__PURE__ */ jsxs13(Fragment5, { children: [
+    !hideLabel && !!label && /* @__PURE__ */ jsx31(Input3.Label, { id: titleId5(id), required, children: label }),
+    options?.description && /* @__PURE__ */ jsx31(Input3.Description, { children: options.description }),
+    /* @__PURE__ */ jsx31(
       Slider,
       {
         id,
@@ -1748,12 +1794,12 @@ function RangeWidget(props) {
         "aria-describedby": ariaDescribedByIds11(id)
       }
     ),
-    rawErrors && rawErrors?.length > 0 && rawErrors.map((error, index) => /* @__PURE__ */ jsx30(Input3.Error, { children: error }, `range-widget-input-errors-${index}`))
+    rawErrors && rawErrors?.length > 0 && rawErrors.map((error, index) => /* @__PURE__ */ jsx31(Input3.Error, { children: error }, `range-widget-input-errors-${index}`))
   ] });
 }
 
 // src/widgets/SelectWidget.tsx
-import { useCallback as useCallback13, useMemo } from "react";
+import { useCallback as useCallback12, useMemo } from "react";
 import {
   ariaDescribedByIds as ariaDescribedByIds12,
   enumOptionsIndexForValue as enumOptionsIndexForValue3,
@@ -1761,10 +1807,11 @@ import {
   labelValue as labelValue8
 } from "@rjsf/utils";
 import { Select as Select2, MultiSelect } from "@mantine/core";
-import { jsx as jsx31 } from "react/jsx-runtime";
+import { jsx as jsx32 } from "react/jsx-runtime";
 function SelectWidget(props) {
   const {
     id,
+    htmlName,
     value,
     placeholder,
     required,
@@ -1782,7 +1829,7 @@ function SelectWidget(props) {
   } = props;
   const { enumOptions, enumDisabled, emptyValue } = options;
   const themeProps = cleanupOptions(options);
-  const handleChange = useCallback13(
+  const handleChange = useCallback12(
     (nextValue) => {
       if (!disabled && !readonly && onChange) {
         onChange(enumOptionsValueForIndex3(nextValue, enumOptions, emptyValue));
@@ -1790,7 +1837,7 @@ function SelectWidget(props) {
     },
     [onChange, disabled, readonly, enumOptions, emptyValue]
   );
-  const handleBlur = useCallback13(
+  const handleBlur = useCallback12(
     ({ target }) => {
       if (onBlur) {
         onBlur(id, enumOptionsValueForIndex3(target && target.value, enumOptions, emptyValue));
@@ -1798,7 +1845,7 @@ function SelectWidget(props) {
     },
     [onBlur, id, enumOptions, emptyValue]
   );
-  const handleFocus = useCallback13(
+  const handleFocus = useCallback12(
     ({ target }) => {
       if (onFocus) {
         onFocus(id, enumOptionsValueForIndex3(target && target.value, enumOptions, emptyValue));
@@ -1819,11 +1866,11 @@ function SelectWidget(props) {
     return [];
   }, [enumDisabled, enumOptions]);
   const Component = multiple ? MultiSelect : Select2;
-  return /* @__PURE__ */ jsx31(
+  return /* @__PURE__ */ jsx32(
     Component,
     {
       id,
-      name: id,
+      name: htmlName || id,
       label: labelValue8(label || void 0, hideLabel, false),
       data: selectOptions,
       value: multiple ? selectedIndexes : selectedIndexes,
@@ -1844,17 +1891,18 @@ function SelectWidget(props) {
 }
 
 // src/widgets/TextareaWidget.tsx
-import { useCallback as useCallback14 } from "react";
+import { useCallback as useCallback13 } from "react";
 import {
   labelValue as labelValue9,
   ariaDescribedByIds as ariaDescribedByIds13
 } from "@rjsf/utils";
 import { Textarea } from "@mantine/core";
-import { jsx as jsx32 } from "react/jsx-runtime";
+import { jsx as jsx33 } from "react/jsx-runtime";
 function TextareaWidget(props) {
   const {
     id,
     name,
+    htmlName,
     value,
     placeholder,
     required,
@@ -1871,13 +1919,13 @@ function TextareaWidget(props) {
   } = props;
   const themeProps = cleanupOptions(options);
   const emptyValue = options?.emptyValue ?? "";
-  const handleChange = useCallback14(
+  const handleChange = useCallback13(
     (e) => {
       onChange(e.target.value === "" ? emptyValue : e.target.value);
     },
     [onChange, emptyValue]
   );
-  const handleBlur = useCallback14(
+  const handleBlur = useCallback13(
     ({ target }) => {
       if (onBlur) {
         onBlur(id, target && target.value);
@@ -1885,7 +1933,7 @@ function TextareaWidget(props) {
     },
     [onBlur, id]
   );
-  const handleFocus = useCallback14(
+  const handleFocus = useCallback13(
     ({ target }) => {
       if (onFocus) {
         onFocus(id, target && target.value);
@@ -1893,11 +1941,11 @@ function TextareaWidget(props) {
     },
     [onFocus, id]
   );
-  return /* @__PURE__ */ jsx32(
+  return /* @__PURE__ */ jsx33(
     Textarea,
     {
       id,
-      name,
+      name: htmlName || name,
       value: value || "",
       placeholder: placeholder || void 0,
       required,