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

package/dist/index.cjs

@@ -74,6 +74,7 @@ function ArrayFieldTemplate(props) {
     disabled,
     fieldPathId,
     items,
+    optionalDataControl,
     onAddClick,
     readonly,
     required,
@@ -88,16 +89,12 @@ function ArrayFieldTemplate(props) {
     registry,
     uiOptions
   );
-  const ArrayFieldItemTemplate2 = (0, import_utils2.getTemplate)(
-    "ArrayFieldItemTemplate",
-    registry,
-    uiOptions
-  );
   const ArrayFieldTitleTemplate2 = (0, import_utils2.getTemplate)(
     "ArrayFieldTitleTemplate",
     registry,
     uiOptions
   );
+  const showOptionalDataControlInTitle = !readonly && !disabled;
   const {
     ButtonTemplates: { AddButton: AddButton2 }
   } = registry.templates;
@@ -109,7 +106,8 @@ function ArrayFieldTemplate(props) {
       title: uiOptions.title || title,
       schema,
       uiSchema,
-      registry
+      registry,
+      optionalDataControl: showOptionalDataControlInTitle ? optionalDataControl : void 0
     }
   );
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_core2.Fieldset, { legend, className, id: fieldPathId.$id, children: [
@@ -123,7 +121,10 @@ function ArrayFieldTemplate(props) {
         registry
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_core2.Box, { className: "row rjsf-array-item-list", children: items && items.map(({ key, ...itemProps }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ArrayFieldItemTemplate2, { ...itemProps }, key)) }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_core2.Box, { className: "row rjsf-array-item-list", children: [
+      !showOptionalDataControlInTitle ? optionalDataControl : void 0,
+      items
+    ] }),
     canAdd && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_core2.Group, { justify: "flex-end", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
       AddButton2,
       {
@@ -199,6 +200,7 @@ var import_jsx_runtime4 = require("react/jsx-runtime");
 function BaseInputTemplate(props) {
   const {
     id,
+    htmlName,
     type,
     schema,
     value,
@@ -244,7 +246,7 @@ function BaseInputTemplate(props) {
     import_core4.NumberInput,
     {
       id,
-      name: id,
+      name: htmlName || id,
       label: (0, import_utils4.labelValue)(label || void 0, hideLabel, false),
       required,
       autoFocus: autofocus,
@@ -266,7 +268,7 @@ function BaseInputTemplate(props) {
     import_core4.TextInput,
     {
       id,
-      name: id,
+      name: htmlName || id,
       label: (0, import_utils4.labelValue)(label || void 0, hideLabel, false),
       required,
       autoFocus: autofocus,
@@ -673,7 +675,8 @@ function ObjectFieldTemplate(props) {
     description,
     disabled,
     properties,
-    onAddClick,
+    optionalDataControl,
+    onAddProperty,
     readonly,
     required,
     schema,
@@ -689,6 +692,7 @@ function ObjectFieldTemplate(props) {
     registry,
     uiOptions
   );
+  const showOptionalDataControlInTitle = !readonly && !disabled;
   const {
     ButtonTemplates: { AddButton: AddButton2 }
   } = registry.templates;
@@ -704,7 +708,8 @@ function ObjectFieldTemplate(props) {
         required,
         schema,
         uiSchema,
-        registry
+        registry,
+        optionalDataControl: showOptionalDataControlInTitle ? optionalDataControl : void 0
       }
     ),
     description && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
@@ -717,14 +722,17 @@ function ObjectFieldTemplate(props) {
         registry
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
       import_core14.SimpleGrid,
       {
         cols: gridCols,
         spacing: gridSpacing,
         verticalSpacing: gridVerticalSpacing,
         mb: "sm",
-        children: properties.filter((e) => !e.hidden).map((element) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_core14.Box, { children: element.content }, element.name))
+        children: [
+          !showOptionalDataControlInTitle ? optionalDataControl : void 0,
+          properties.filter((e) => !e.hidden).map((element) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_core14.Box, { children: element.content }, element.name))
+        ]
       }
     ),
     (0, import_utils13.canExpand)(schema, uiSchema, formData) && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_core14.Group, { mt: "xs", justify: "flex-end", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
@@ -732,7 +740,7 @@ function ObjectFieldTemplate(props) {
       {
         id: (0, import_utils13.buttonId)(fieldPathId, "add"),
         disabled: disabled || readonly,
-        onClick: onAddClick(schema),
+        onClick: onAddProperty,
         className: "rjsf-object-property-expand",
         uiSchema,
         registry
@@ -741,19 +749,57 @@ function ObjectFieldTemplate(props) {
   ] });
 }
 
+// src/templates/OptionalDataControlsTemplate.tsx
+var import_jsx_runtime16 = require("react/jsx-runtime");
+function OptionalDataControlsTemplate(props) {
+  const { id, registry, label, onAddClick, onRemoveClick } = props;
+  if (onAddClick) {
+    return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+      AddButton,
+      {
+        id,
+        registry,
+        icon: "plus",
+        className: "rjsf-add-optional-data",
+        onClick: onAddClick,
+        title: label
+      }
+    );
+  } else if (onRemoveClick) {
+    return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+      RemoveButton,
+      {
+        id,
+        registry,
+        icon: "remove",
+        className: "rjsf-remove-optional-data",
+        onClick: onRemoveClick,
+        title: label
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("em", { id, children: label });
+}
+
 // src/templates/TitleField.tsx
 var import_core15 = require("@mantine/core");
-var import_jsx_runtime16 = require("react/jsx-runtime");
+var import_jsx_runtime17 = require("react/jsx-runtime");
 function TitleField(props) {
-  const { id, title } = props;
-  return title ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_core15.Title, { id, order: 3, fw: "normal", children: title }) : null;
+  const { id, title, optionalDataControl } = props;
+  let heading = title ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_core15.Title, { id, order: 3, fw: "normal", children: title }) : null;
+  if (optionalDataControl) {
+    heading = /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_core15.Grid, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_core15.Grid.Col, { span: "auto", children: heading }),
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_core15.Grid.Col, { span: "content", children: optionalDataControl })
+    ] });
+  }
+  return heading;
 }
 
 // src/templates/WrapIfAdditionalTemplate.tsx
-var import_react2 = require("react");
 var import_utils14 = require("@rjsf/utils");
 var import_core16 = require("@mantine/core");
-var import_jsx_runtime17 = require("react/jsx-runtime");
+var import_jsx_runtime18 = require("react/jsx-runtime");
 function WrapIfAdditionalTemplate(props) {
   const {
     id,
@@ -765,8 +811,8 @@ function WrapIfAdditionalTemplate(props) {
     disabled,
     schema,
     uiSchema,
-    onKeyChange,
-    onDropPropertyClick,
+    onKeyRenameBlur,
+    onRemoveProperty,
     registry,
     children
   } = props;
@@ -774,21 +820,17 @@ function WrapIfAdditionalTemplate(props) {
   const { RemoveButton: RemoveButton2 } = templates.ButtonTemplates;
   const keyLabel = translateString(import_utils14.TranslatableString.KeyLabel, [label]);
   const additional = import_utils14.ADDITIONAL_PROPERTY_FLAG in schema;
-  const handleBlur = (0, import_react2.useCallback)(
-    ({ target }) => onKeyChange(target && target.value),
-    [onKeyChange]
-  );
   if (!additional) {
-    return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: classNames, style, children });
+    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: classNames, style, children });
   }
   const uiOptions = uiSchema ? uiSchema[import_utils14.UI_OPTIONS_KEY] : {};
   const buttonUiOptions = {
     ...uiSchema,
     [import_utils14.UI_OPTIONS_KEY]: { ...uiOptions, block: true }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: classNames, style, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_core16.Flex, { gap: "xs", align: "end", justify: "center", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_core16.Grid, { w: "100%", align: "center", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_core16.Grid.Col, { span: 6, className: "form-additional", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "form-group", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: classNames, style, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_core16.Flex, { gap: "xs", align: "end", justify: "center", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_core16.Grid, { w: "100%", align: "center", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_core16.Grid.Col, { span: 6, className: "form-additional", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "form-group", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
         import_core16.TextInput,
         {
           className: "form-group",
@@ -798,19 +840,19 @@ function WrapIfAdditionalTemplate(props) {
           disabled: disabled || readonly,
           id: `${id}-key`,
           name: `${id}-key`,
-          onBlur: !readonly ? handleBlur : void 0
+          onBlur: !readonly ? onKeyRenameBlur : void 0
         }
       ) }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_core16.Grid.Col, { span: 6, className: "form-additional", children })
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_core16.Grid.Col, { span: 6, className: "form-additional", children })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
       RemoveButton2,
       {
         id: (0, import_utils14.buttonId)(id, "remove"),
         iconType: "sm",
         className: "rjsf-array-item-remove",
         disabled: disabled || readonly,
-        onClick: onDropPropertyClick(label),
+        onClick: onRemoveProperty,
         uiSchema: buttonUiOptions,
         registry
       }
@@ -820,9 +862,9 @@ function WrapIfAdditionalTemplate(props) {
 
 // src/templates/MultiSchemaFieldTemplate.tsx
 var import_core17 = require("@mantine/core");
-var import_jsx_runtime18 = require("react/jsx-runtime");
+var import_jsx_runtime19 = require("react/jsx-runtime");
 function MultiSchemaFieldTemplate({ selector, optionSchemaField }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_core17.Stack, { style: { marginBottom: "1rem" }, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_core17.Stack, { style: { marginBottom: "1rem" }, children: [
     selector,
     optionSchemaField
   ] });
@@ -843,6 +885,7 @@ function generateTemplates() {
     FieldHelpTemplate,
     GridTemplate,
     ObjectFieldTemplate,
+    OptionalDataControlsTemplate,
     TitleFieldTemplate: TitleField,
     WrapIfAdditionalTemplate,
     MultiSchemaFieldTemplate
@@ -855,10 +898,10 @@ var import_dayjs2 = __toESM(require("dayjs"), 1);
 var import_customParseFormat = __toESM(require("dayjs/plugin/customParseFormat"), 1);
 
 // src/widgets/DateTime/AltDateWidget.tsx
-var import_react3 = require("react");
+var import_react2 = require("react");
 var import_utils15 = require("@rjsf/utils");
 var import_core18 = require("@mantine/core");
-var import_jsx_runtime19 = require("react/jsx-runtime");
+var import_jsx_runtime20 = require("react/jsx-runtime");
 function readyForChange(state) {
   return Object.values(state).every((value) => value !== -1);
 }
@@ -878,11 +921,11 @@ function AltDateWidget(props) {
     registry
   } = props;
   const { translateString } = registry;
-  const [state, setState] = (0, import_react3.useState)((0, import_utils15.parseDateString)(value, showTime));
-  (0, import_react3.useEffect)(() => {
+  const [state, setState] = (0, import_react2.useState)((0, import_utils15.parseDateString)(value, showTime));
+  (0, import_react2.useEffect)(() => {
     setState((0, import_utils15.parseDateString)(value, showTime));
   }, [showTime, value]);
-  const handleChange = (0, import_react3.useCallback)(
+  const handleChange = (0, import_react2.useCallback)(
     (property, nextValue) => {
       const nextState = {
         ...state,
@@ -896,20 +939,20 @@ function AltDateWidget(props) {
     },
     [state, onChange, showTime]
   );
-  const handleSetNow = (0, import_react3.useCallback)(() => {
+  const handleSetNow = (0, import_react2.useCallback)(() => {
     if (!disabled && !readonly) {
       const nextState = (0, import_utils15.parseDateString)((/* @__PURE__ */ new Date()).toJSON(), showTime);
       onChange((0, import_utils15.toDateString)(nextState, showTime));
     }
   }, [disabled, readonly, showTime, onChange]);
-  const handleClear = (0, import_react3.useCallback)(() => {
+  const handleClear = (0, import_react2.useCallback)(() => {
     if (!disabled && !readonly) {
       onChange("");
     }
   }, [disabled, readonly, onChange]);
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_jsx_runtime19.Fragment, { children: [
-    !hideLabel && !!label && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_core18.Input.Label, { id: (0, import_utils15.titleId)(id), required, children: label }),
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_core18.Flex, { gap: "xs", align: "center", wrap: "nowrap", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_jsx_runtime20.Fragment, { children: [
+    !hideLabel && !!label && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_core18.Input.Label, { id: (0, import_utils15.titleId)(id), required, children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_core18.Flex, { gap: "xs", align: "center", wrap: "nowrap", children: [
       (0, import_utils15.getDateElementProps)(
         state,
         showTime,
@@ -917,7 +960,7 @@ function AltDateWidget(props) {
         options.format
       ).map((elemProps, i) => {
         const elemId = id + "_" + elemProps.type;
-        return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_core18.Box, { children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_core18.Box, { children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
           import_core18.Select,
           {
             id: elemId,
@@ -934,12 +977,12 @@ function AltDateWidget(props) {
           }
         ) }, i);
       }),
-      /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_core18.Group, { wrap: "nowrap", gap: 3, children: [
-        (options.hideNowButton !== "undefined" ? !options.hideNowButton : true) && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_core18.Button, { variant: "subtle", size: "xs", onClick: handleSetNow, children: translateString(import_utils15.TranslatableString.NowLabel) }),
-        (options.hideClearButton !== "undefined" ? !options.hideClearButton : true) && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_core18.Button, { variant: "subtle", size: "xs", onClick: handleClear, children: translateString(import_utils15.TranslatableString.ClearLabel) })
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_core18.Group, { wrap: "nowrap", gap: 3, children: [
+        (options.hideNowButton !== "undefined" ? !options.hideNowButton : true) && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_core18.Button, { variant: "subtle", size: "xs", onClick: handleSetNow, children: translateString(import_utils15.TranslatableString.NowLabel) }),
+        (options.hideClearButton !== "undefined" ? !options.hideClearButton : true) && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_core18.Button, { variant: "subtle", size: "xs", onClick: handleClear, children: translateString(import_utils15.TranslatableString.ClearLabel) })
       ] })
     ] }),
-    rawErrors && rawErrors?.length > 0 && rawErrors.map((error, index) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_core18.Input.Error, { children: error }, `alt-date-widget-input-errors-${index}`))
+    rawErrors && rawErrors?.length > 0 && rawErrors.map((error, index) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_core18.Input.Error, { children: error }, `alt-date-widget-input-errors-${index}`))
   ] });
 }
 AltDateWidget.defaultProps = {
@@ -947,10 +990,10 @@ AltDateWidget.defaultProps = {
 };
 
 // src/widgets/DateTime/AltDateTimeWidget.tsx
-var import_jsx_runtime20 = require("react/jsx-runtime");
+var import_jsx_runtime21 = require("react/jsx-runtime");
 function AltDateTimeWidget(props) {
   const { AltDateWidget: AltDateWidget2 } = props.registry.widgets;
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(AltDateWidget2, { showTime: true, ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(AltDateWidget2, { showTime: true, ...props });
 }
 AltDateTimeWidget.defaultProps = {
   ...AltDateWidget?.defaultProps,
@@ -958,11 +1001,11 @@ AltDateTimeWidget.defaultProps = {
 };
 
 // src/widgets/DateTime/DateTimeInput.tsx
-var import_react4 = require("react");
+var import_react3 = require("react");
 var import_utils16 = require("@rjsf/utils");
 var import_dayjs = __toESM(require("dayjs"), 1);
 var import_dates = require("@mantine/dates");
-var import_jsx_runtime21 = require("react/jsx-runtime");
+var import_jsx_runtime22 = require("react/jsx-runtime");
 var dateParser = (input, format) => {
   if (!input) {
     return null;
@@ -996,23 +1039,23 @@ function DateTimeInput(props) {
     valueFormat,
     displayFormat
   } = props;
-  const handleChange = (0, import_react4.useCallback)(
+  const handleChange = (0, import_react3.useCallback)(
     (nextValue) => {
       onChange(dateFormat(nextValue, valueFormat));
     },
     [onChange, valueFormat]
   );
-  const handleBlur = (0, import_react4.useCallback)(() => {
+  const handleBlur = (0, import_react3.useCallback)(() => {
     if (onBlur) {
       onBlur(id, value);
     }
   }, [onBlur, id, value]);
-  const handleFocus = (0, import_react4.useCallback)(() => {
+  const handleFocus = (0, import_react3.useCallback)(() => {
     if (onFocus) {
       onFocus(id, value);
     }
   }, [onFocus, id, value]);
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
     import_dates.DateInput,
     {
       id,
@@ -1038,10 +1081,10 @@ function DateTimeInput(props) {
 }
 
 // src/widgets/DateTime/DateWidget.tsx
-var import_jsx_runtime22 = require("react/jsx-runtime");
+var import_jsx_runtime23 = require("react/jsx-runtime");
 function DateWidget(props) {
   const { valueFormat = "YYYY-MM-DD", displayFormat, ...otherOptions } = props.options;
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
     DateTimeInput,
     {
       ...props,
@@ -1053,10 +1096,10 @@ function DateWidget(props) {
 }
 
 // src/widgets/DateTime/DateTimeWidget.tsx
-var import_jsx_runtime23 = require("react/jsx-runtime");
+var import_jsx_runtime24 = require("react/jsx-runtime");
 function DateTimeWidget(props) {
   const { valueFormat = "YYYY-MM-DD HH:mm:ss", displayFormat, ...otherOptions } = props.options;
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
     DateTimeInput,
     {
       ...props,
@@ -1068,10 +1111,10 @@ function DateTimeWidget(props) {
 }
 
 // src/widgets/DateTime/TimeWidget.tsx
-var import_react5 = require("react");
+var import_react4 = require("react");
 var import_utils17 = require("@rjsf/utils");
 var import_dates2 = require("@mantine/dates");
-var import_jsx_runtime24 = require("react/jsx-runtime");
+var import_jsx_runtime25 = require("react/jsx-runtime");
 function TimeWidget(props) {
   const {
     id,
@@ -1091,13 +1134,13 @@ function TimeWidget(props) {
     onFocus
   } = props;
   const emptyValue = options.emptyValue || "";
-  const handleChange = (0, import_react5.useCallback)(
+  const handleChange = (0, import_react4.useCallback)(
     (e) => {
       onChange(e.target.value === "" ? emptyValue : e.target.value);
     },
     [onChange, emptyValue]
   );
-  const handleBlur = (0, import_react5.useCallback)(
+  const handleBlur = (0, import_react4.useCallback)(
     ({ target }) => {
       if (onBlur) {
         onBlur(id, target && target.value);
@@ -1105,7 +1148,7 @@ function TimeWidget(props) {
     },
     [onBlur, id]
   );
-  const handleFocus = (0, import_react5.useCallback)(
+  const handleFocus = (0, import_react4.useCallback)(
     ({ target }) => {
       if (onFocus) {
         onFocus(id, target && target.value);
@@ -1113,7 +1156,7 @@ function TimeWidget(props) {
     },
     [onFocus, id]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
     import_dates2.TimeInput,
     {
       id,
@@ -1136,13 +1179,14 @@ function TimeWidget(props) {
 }
 
 // src/widgets/CheckboxesWidget.tsx
-var import_react6 = require("react");
+var import_react5 = require("react");
 var import_utils18 = require("@rjsf/utils");
 var import_core19 = require("@mantine/core");
-var import_jsx_runtime25 = require("react/jsx-runtime");
+var import_jsx_runtime26 = require("react/jsx-runtime");
 function CheckboxesWidget(props) {
   const {
     id,
+    htmlName,
     value,
     required,
     disabled,
@@ -1158,7 +1202,7 @@ function CheckboxesWidget(props) {
   } = props;
   const { enumOptions, enumDisabled, inline, emptyValue } = options;
   const themeProps = cleanupOptions(options);
-  const handleChange = (0, import_react6.useCallback)(
+  const handleChange = (0, import_react5.useCallback)(
     (nextValue) => {
       if (!disabled && !readonly && onChange) {
         onChange((0, import_utils18.enumOptionsValueForIndex)(nextValue, enumOptions, emptyValue));
@@ -1166,7 +1210,7 @@ function CheckboxesWidget(props) {
     },
     [onChange, disabled, readonly, enumOptions, emptyValue]
   );
-  const handleBlur = (0, import_react6.useCallback)(
+  const handleBlur = (0, import_react5.useCallback)(
     ({ target }) => {
       if (onBlur) {
         onBlur(id, (0, import_utils18.enumOptionsValueForIndex)(target.value, enumOptions, emptyValue));
@@ -1174,7 +1218,7 @@ function CheckboxesWidget(props) {
     },
     [onBlur, id, enumOptions, emptyValue]
   );
-  const handleFocus = (0, import_react6.useCallback)(
+  const handleFocus = (0, import_react5.useCallback)(
     ({ target }) => {
       if (onFocus) {
         onFocus(id, (0, import_utils18.enumOptionsValueForIndex)(target.value, enumOptions, emptyValue));
@@ -1183,9 +1227,9 @@ function CheckboxesWidget(props) {
     [onFocus, id, enumOptions, emptyValue]
   );
   const selectedIndexes = (0, import_utils18.enumOptionsIndexForValue)(value, enumOptions, true);
-  return Array.isArray(enumOptions) && enumOptions.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_jsx_runtime25.Fragment, { children: [
-    !hideLabel && !!label && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_core19.Input.Label, { id: (0, import_utils18.titleId)(id), required, children: label }),
-    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+  return Array.isArray(enumOptions) && enumOptions.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_jsx_runtime26.Fragment, { children: [
+    !hideLabel && !!label && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_core19.Input.Label, { id: (0, import_utils18.titleId)(id), required, children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
       import_core19.Checkbox.Group,
       {
         id,
@@ -1196,11 +1240,11 @@ function CheckboxesWidget(props) {
         error: rawErrors && rawErrors.length > 0 ? rawErrors.join("\n") : void 0,
         "aria-describedby": (0, import_utils18.ariaDescribedByIds)(id),
         ...themeProps,
-        children: Array.isArray(enumOptions) ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_core19.Flex, { mt: "xs", direction: inline ? "row" : "column", gap: "xs", wrap: "wrap", children: enumOptions.map((option, i) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+        children: Array.isArray(enumOptions) ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_core19.Flex, { mt: "xs", direction: inline ? "row" : "column", gap: "xs", wrap: "wrap", children: enumOptions.map((option, i) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
           import_core19.Checkbox,
           {
             id: (0, import_utils18.optionId)(id, i),
-            name: id,
+            name: htmlName || id,
             value: String(i),
             label: option.label,
             disabled: Array.isArray(enumDisabled) && enumDisabled.indexOf(option.value) !== -1,
@@ -1216,14 +1260,15 @@ function CheckboxesWidget(props) {
 }
 
 // src/widgets/CheckboxWidget.tsx
-var import_react7 = require("react");
+var import_react6 = require("react");
 var import_utils20 = require("@rjsf/utils");
 var import_core20 = require("@mantine/core");
-var import_jsx_runtime26 = require("react/jsx-runtime");
+var import_jsx_runtime27 = require("react/jsx-runtime");
 function CheckboxWidget(props) {
   const {
     id,
     name,
+    htmlName,
     value = false,
     required,
     disabled,
@@ -1246,7 +1291,7 @@ function CheckboxWidget(props) {
     registry,
     options
   );
-  const handleCheckboxChange = (0, import_react7.useCallback)(
+  const handleCheckboxChange = (0, import_react6.useCallback)(
     (e) => {
       if (!disabled && !readonly && onChange) {
         onChange(e.currentTarget.checked);
@@ -1254,7 +1299,7 @@ function CheckboxWidget(props) {
     },
     [onChange, disabled, readonly]
   );
-  const handleBlur = (0, import_react7.useCallback)(
+  const handleBlur = (0, import_react6.useCallback)(
     ({ target }) => {
       if (onBlur) {
         onBlur(id, target.checked);
@@ -1262,7 +1307,7 @@ function CheckboxWidget(props) {
     },
     [onBlur, id]
   );
-  const handleFocus = (0, import_react7.useCallback)(
+  const handleFocus = (0, import_react6.useCallback)(
     ({ target }) => {
       if (onFocus) {
         onFocus(id, target.checked);
@@ -1271,8 +1316,8 @@ function CheckboxWidget(props) {
     [onFocus, id]
   );
   const description = options.description || schema.description;
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_jsx_runtime26.Fragment, { children: [
-    !hideLabel && !!description && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_jsx_runtime27.Fragment, { children: [
+    !hideLabel && !!description && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
       DescriptionFieldTemplate,
       {
         id: (0, import_utils20.descriptionId)(id),
@@ -1282,11 +1327,11 @@ function CheckboxWidget(props) {
         registry
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
       import_core20.Checkbox,
       {
         id,
-        name,
+        name: htmlName || name,
         label: (0, import_utils20.labelValue)(label || void 0, hideLabel, false),
         disabled: disabled || readonly,
         required,
@@ -1304,10 +1349,10 @@ function CheckboxWidget(props) {
 }
 
 // src/widgets/ColorWidget.tsx
-var import_react8 = require("react");
+var import_react7 = require("react");
 var import_utils22 = require("@rjsf/utils");
 var import_core21 = require("@mantine/core");
-var import_jsx_runtime27 = require("react/jsx-runtime");
+var import_jsx_runtime28 = require("react/jsx-runtime");
 function ColorWidget(props) {
   const {
     id,
@@ -1327,13 +1372,13 @@ function ColorWidget(props) {
     onFocus
   } = props;
   const themeProps = cleanupOptions(options);
-  const handleChange = (0, import_react8.useCallback)(
+  const handleChange = (0, import_react7.useCallback)(
     (nextValue) => {
       onChange(nextValue);
     },
     [onChange]
   );
-  const handleBlur = (0, import_react8.useCallback)(
+  const handleBlur = (0, import_react7.useCallback)(
     ({ target }) => {
       if (onBlur) {
         onBlur(id, target && target.value);
@@ -1341,7 +1386,7 @@ function ColorWidget(props) {
     },
     [onBlur, id]
   );
-  const handleFocus = (0, import_react8.useCallback)(
+  const handleFocus = (0, import_react7.useCallback)(
     ({ target }) => {
       if (onFocus) {
         onFocus(id, target && target.value);
@@ -1349,7 +1394,7 @@ function ColorWidget(props) {
     },
     [onFocus, id]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
     import_core21.ColorInput,
     {
       id,
@@ -1372,10 +1417,10 @@ function ColorWidget(props) {
 }
 
 // src/widgets/FileWidget.tsx
-var import_react9 = require("react");
+var import_react8 = require("react");
 var import_utils24 = require("@rjsf/utils");
 var import_core22 = require("@mantine/core");
-var import_jsx_runtime28 = require("react/jsx-runtime");
+var import_jsx_runtime29 = require("react/jsx-runtime");
 function addNameToDataURL(dataURL, name) {
   if (dataURL === null) {
     return null;
@@ -1450,7 +1495,7 @@ function FileWidget(props) {
     onChange
   } = props;
   const themeProps = cleanupOptions(options);
-  const handleChange = (0, import_react9.useCallback)(
+  const handleChange = (0, import_react8.useCallback)(
     (files) => {
       if (typeof files === "object") {
         processFiles(multiple ? files : [files]).then((filesInfoEvent) => {
@@ -1466,7 +1511,7 @@ function FileWidget(props) {
     },
     [multiple, value, onChange]
   );
-  const handleRemoveFile = (0, import_react9.useCallback)(
+  const handleRemoveFile = (0, import_react8.useCallback)(
     (index) => {
       if (multiple) {
         const newValue = value.filter((_, i) => i !== index);
@@ -1477,17 +1522,17 @@ function FileWidget(props) {
     },
     [multiple, value, onChange]
   );
-  const ValueComponent = (0, import_react9.useCallback)(
+  const ValueComponent = (0, import_react8.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__ */ (0, import_jsx_runtime28.jsx)(import_core22.Pill.Group, { children: filesInfo.map((file, index) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_core22.Pill, { withRemoveButton: true, onRemove: () => handleRemoveFile(index), children: file.name }, index)) });
+        return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_core22.Pill.Group, { children: filesInfo.map((file, index) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_core22.Pill, { withRemoveButton: true, onRemove: () => handleRemoveFile(index), children: file.name }, index)) });
       }
       return null;
     },
     [handleRemoveFile]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
     import_core22.FileInput,
     {
       id,
@@ -1509,10 +1554,10 @@ function FileWidget(props) {
 }
 
 // src/widgets/PasswordWidget.tsx
-var import_react10 = require("react");
+var import_react9 = require("react");
 var import_utils26 = require("@rjsf/utils");
 var import_core23 = require("@mantine/core");
-var import_jsx_runtime29 = require("react/jsx-runtime");
+var import_jsx_runtime30 = require("react/jsx-runtime");
 function PasswordWidget(props) {
   const {
     id,
@@ -1533,13 +1578,13 @@ function PasswordWidget(props) {
   } = props;
   const emptyValue = options.emptyValue || "";
   const themeProps = cleanupOptions(options);
-  const handleChange = (0, import_react10.useCallback)(
+  const handleChange = (0, import_react9.useCallback)(
     (e) => {
       onChange(e.target.value === "" ? emptyValue : e.target.value);
     },
     [onChange, emptyValue]
   );
-  const handleBlur = (0, import_react10.useCallback)(
+  const handleBlur = (0, import_react9.useCallback)(
     ({ target }) => {
       if (onBlur) {
         onBlur(id, target && target.value);
@@ -1547,7 +1592,7 @@ function PasswordWidget(props) {
     },
     [onBlur, id]
   );
-  const handleFocus = (0, import_react10.useCallback)(
+  const handleFocus = (0, import_react9.useCallback)(
     ({ target }) => {
       if (onFocus) {
         onFocus(id, target && target.value);
@@ -1555,7 +1600,7 @@ function PasswordWidget(props) {
     },
     [onFocus, id]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
     import_core23.PasswordInput,
     {
       id,
@@ -1577,13 +1622,14 @@ function PasswordWidget(props) {
 }
 
 // src/widgets/RadioWidget.tsx
-var import_react11 = require("react");
+var import_react10 = require("react");
 var import_utils28 = require("@rjsf/utils");
 var import_core24 = require("@mantine/core");
-var import_jsx_runtime30 = require("react/jsx-runtime");
+var import_jsx_runtime31 = require("react/jsx-runtime");
 function RadioWidget(props) {
   const {
     id,
+    htmlName,
     value,
     required,
     disabled,
@@ -1599,7 +1645,7 @@ function RadioWidget(props) {
   } = props;
   const { enumOptions, enumDisabled, inline, emptyValue } = options;
   const themeProps = cleanupOptions(options);
-  const handleChange = (0, import_react11.useCallback)(
+  const handleChange = (0, import_react10.useCallback)(
     (nextValue) => {
       if (!disabled && !readonly && onChange) {
         onChange((0, import_utils28.enumOptionsValueForIndex)(nextValue, enumOptions, emptyValue));
@@ -1607,7 +1653,7 @@ function RadioWidget(props) {
     },
     [onChange, disabled, readonly, enumOptions, emptyValue]
   );
-  const handleBlur = (0, import_react11.useCallback)(
+  const handleBlur = (0, import_react10.useCallback)(
     ({ target }) => {
       if (onBlur) {
         onBlur(id, (0, import_utils28.enumOptionsValueForIndex)(target && target.value, enumOptions, emptyValue));
@@ -1615,7 +1661,7 @@ function RadioWidget(props) {
     },
     [onBlur, id, enumOptions, emptyValue]
   );
-  const handleFocus = (0, import_react11.useCallback)(
+  const handleFocus = (0, import_react10.useCallback)(
     ({ target }) => {
       if (onFocus) {
         onFocus(id, (0, import_utils28.enumOptionsValueForIndex)(target && target.value, enumOptions, emptyValue));
@@ -1624,11 +1670,11 @@ function RadioWidget(props) {
     [onFocus, id, enumOptions, emptyValue]
   );
   const selected = (0, import_utils28.enumOptionsIndexForValue)(value, enumOptions);
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
     import_core24.Radio.Group,
     {
       id,
-      name: id,
+      name: htmlName || id,
       value: selected,
       label: !hideLabel ? label : void 0,
       onChange: handleChange,
@@ -1637,7 +1683,7 @@ function RadioWidget(props) {
       error: rawErrors && rawErrors.length > 0 ? rawErrors.join("\n") : void 0,
       "aria-describedby": (0, import_utils28.ariaDescribedByIds)(id),
       ...themeProps,
-      children: Array.isArray(enumOptions) ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_core24.Flex, { mt: "xs", direction: inline ? "row" : "column", gap: "xs", wrap: "wrap", children: enumOptions.map((option, i) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+      children: Array.isArray(enumOptions) ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_core24.Flex, { mt: "xs", direction: inline ? "row" : "column", gap: "xs", wrap: "wrap", children: enumOptions.map((option, i) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
         import_core24.Radio,
         {
           id: (0, import_utils28.optionId)(id, i),
@@ -1655,10 +1701,10 @@ function RadioWidget(props) {
 }
 
 // src/widgets/RangeWidget.tsx
-var import_react12 = require("react");
+var import_react11 = require("react");
 var import_utils30 = require("@rjsf/utils");
 var import_core25 = require("@mantine/core");
-var import_jsx_runtime31 = require("react/jsx-runtime");
+var import_jsx_runtime32 = require("react/jsx-runtime");
 function RangeWidget(props) {
   const {
     id,
@@ -1679,7 +1725,7 @@ function RangeWidget(props) {
   } = props;
   const themeProps = cleanupOptions(options);
   const { min, max, step } = (0, import_utils30.rangeSpec)(schema);
-  const handleChange = (0, import_react12.useCallback)(
+  const handleChange = (0, import_react11.useCallback)(
     (nextValue) => {
       if (!disabled && !readonly && onChange) {
         onChange(nextValue);
@@ -1687,20 +1733,20 @@ function RangeWidget(props) {
     },
     [onChange, disabled, readonly]
   );
-  const handleBlur = (0, import_react12.useCallback)(() => {
+  const handleBlur = (0, import_react11.useCallback)(() => {
     if (onBlur) {
       onBlur(id, value);
     }
   }, [onBlur, id, value]);
-  const handleFocus = (0, import_react12.useCallback)(() => {
+  const handleFocus = (0, import_react11.useCallback)(() => {
     if (onFocus) {
       onFocus(id, value);
     }
   }, [onFocus, id, value]);
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_jsx_runtime31.Fragment, { children: [
-    !hideLabel && !!label && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_core25.Input.Label, { id: (0, import_utils30.titleId)(id), required, children: label }),
-    options?.description && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_core25.Input.Description, { children: options.description }),
-    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_jsx_runtime32.Fragment, { children: [
+    !hideLabel && !!label && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_core25.Input.Label, { id: (0, import_utils30.titleId)(id), required, children: label }),
+    options?.description && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_core25.Input.Description, { children: options.description }),
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
       import_core25.Slider,
       {
         id,
@@ -1718,18 +1764,19 @@ function RangeWidget(props) {
         "aria-describedby": (0, import_utils30.ariaDescribedByIds)(id)
       }
     ),
-    rawErrors && rawErrors?.length > 0 && rawErrors.map((error, index) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_core25.Input.Error, { children: error }, `range-widget-input-errors-${index}`))
+    rawErrors && rawErrors?.length > 0 && rawErrors.map((error, index) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_core25.Input.Error, { children: error }, `range-widget-input-errors-${index}`))
   ] });
 }
 
 // src/widgets/SelectWidget.tsx
-var import_react13 = require("react");
+var import_react12 = require("react");
 var import_utils32 = require("@rjsf/utils");
 var import_core26 = require("@mantine/core");
-var import_jsx_runtime32 = require("react/jsx-runtime");
+var import_jsx_runtime33 = require("react/jsx-runtime");
 function SelectWidget(props) {
   const {
     id,
+    htmlName,
     value,
     placeholder,
     required,
@@ -1747,7 +1794,7 @@ function SelectWidget(props) {
   } = props;
   const { enumOptions, enumDisabled, emptyValue } = options;
   const themeProps = cleanupOptions(options);
-  const handleChange = (0, import_react13.useCallback)(
+  const handleChange = (0, import_react12.useCallback)(
     (nextValue) => {
       if (!disabled && !readonly && onChange) {
         onChange((0, import_utils32.enumOptionsValueForIndex)(nextValue, enumOptions, emptyValue));
@@ -1755,7 +1802,7 @@ function SelectWidget(props) {
     },
     [onChange, disabled, readonly, enumOptions, emptyValue]
   );
-  const handleBlur = (0, import_react13.useCallback)(
+  const handleBlur = (0, import_react12.useCallback)(
     ({ target }) => {
       if (onBlur) {
         onBlur(id, (0, import_utils32.enumOptionsValueForIndex)(target && target.value, enumOptions, emptyValue));
@@ -1763,7 +1810,7 @@ function SelectWidget(props) {
     },
     [onBlur, id, enumOptions, emptyValue]
   );
-  const handleFocus = (0, import_react13.useCallback)(
+  const handleFocus = (0, import_react12.useCallback)(
     ({ target }) => {
       if (onFocus) {
         onFocus(id, (0, import_utils32.enumOptionsValueForIndex)(target && target.value, enumOptions, emptyValue));
@@ -1772,7 +1819,7 @@ function SelectWidget(props) {
     [onFocus, id, enumOptions, emptyValue]
   );
   const selectedIndexes = (0, import_utils32.enumOptionsIndexForValue)(value, enumOptions, multiple);
-  const selectOptions = (0, import_react13.useMemo)(() => {
+  const selectOptions = (0, import_react12.useMemo)(() => {
     if (Array.isArray(enumOptions)) {
       return enumOptions.map((option, index) => ({
         key: String(index),
@@ -1784,11 +1831,11 @@ function SelectWidget(props) {
     return [];
   }, [enumDisabled, enumOptions]);
   const Component = multiple ? import_core26.MultiSelect : import_core26.Select;
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
     Component,
     {
       id,
-      name: id,
+      name: htmlName || id,
       label: (0, import_utils32.labelValue)(label || void 0, hideLabel, false),
       data: selectOptions,
       value: multiple ? selectedIndexes : selectedIndexes,
@@ -1809,14 +1856,15 @@ function SelectWidget(props) {
 }
 
 // src/widgets/TextareaWidget.tsx
-var import_react14 = require("react");
+var import_react13 = require("react");
 var import_utils34 = require("@rjsf/utils");
 var import_core27 = require("@mantine/core");
-var import_jsx_runtime33 = require("react/jsx-runtime");
+var import_jsx_runtime34 = require("react/jsx-runtime");
 function TextareaWidget(props) {
   const {
     id,
     name,
+    htmlName,
     value,
     placeholder,
     required,
@@ -1833,13 +1881,13 @@ function TextareaWidget(props) {
   } = props;
   const themeProps = cleanupOptions(options);
   const emptyValue = options?.emptyValue ?? "";
-  const handleChange = (0, import_react14.useCallback)(
+  const handleChange = (0, import_react13.useCallback)(
     (e) => {
       onChange(e.target.value === "" ? emptyValue : e.target.value);
     },
     [onChange, emptyValue]
   );
-  const handleBlur = (0, import_react14.useCallback)(
+  const handleBlur = (0, import_react13.useCallback)(
     ({ target }) => {
       if (onBlur) {
         onBlur(id, target && target.value);
@@ -1847,7 +1895,7 @@ function TextareaWidget(props) {
     },
     [onBlur, id]
   );
-  const handleFocus = (0, import_react14.useCallback)(
+  const handleFocus = (0, import_react13.useCallback)(
     ({ target }) => {
       if (onFocus) {
         onFocus(id, target && target.value);
@@ -1855,11 +1903,11 @@ function TextareaWidget(props) {
     },
     [onFocus, id]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
     import_core27.Textarea,
     {
       id,
-      name,
+      name: htmlName || name,
       value: value || "",
       placeholder: placeholder || void 0,
       required,