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

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,
@@ -661,7 +657,7 @@ function ObjectFieldTemplate(props) {
     disabled,
     properties,
     optionalDataControl,
-    onAddClick,
+    onAddProperty,
     readonly,
     required,
     schema,
@@ -725,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
@@ -782,7 +778,6 @@ function TitleField(props) {
 }
 
 // src/templates/WrapIfAdditionalTemplate.tsx
-import { useCallback as useCallback2 } from "react";
 import {
   ADDITIONAL_PROPERTY_FLAG,
   UI_OPTIONS_KEY,
@@ -802,8 +797,8 @@ function WrapIfAdditionalTemplate(props) {
     disabled,
     schema,
     uiSchema,
-    onKeyChange,
-    onDropPropertyClick,
+    onKeyRenameBlur,
+    onRemoveProperty,
     registry,
     children
   } = props;
@@ -811,10 +806,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 +826,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 +838,7 @@ function WrapIfAdditionalTemplate(props) {
         iconType: "sm",
         className: "rjsf-array-item-remove",
         disabled: disabled || readonly,
-        onClick: onDropPropertyClick(label),
+        onClick: onRemoveProperty,
         uiSchema: buttonUiOptions,
         registry
       }
@@ -893,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,
@@ -928,7 +919,7 @@ function AltDateWidget(props) {
   useEffect(() => {
     setState(parseDateString(value, showTime));
   }, [showTime, value]);
-  const handleChange = useCallback3(
+  const handleChange = useCallback2(
     (property, nextValue) => {
       const nextState = {
         ...state,
@@ -942,13 +933,13 @@ 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("");
     }
@@ -1004,7 +995,7 @@ 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
@@ -1045,18 +1036,18 @@ 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);
     }
@@ -1117,7 +1108,7 @@ 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
@@ -1143,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);
@@ -1157,7 +1148,7 @@ function TimeWidget(props) {
     },
     [onBlur, id]
   );
-  const handleFocus = useCallback5(
+  const handleFocus = useCallback4(
     ({ target }) => {
       if (onFocus) {
         onFocus(id, target && target.value);
@@ -1188,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,
@@ -1201,6 +1192,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 +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));
@@ -1224,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));
@@ -1232,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));
@@ -1258,7 +1250,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 +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,
@@ -1287,6 +1279,7 @@ function CheckboxWidget(props) {
   const {
     id,
     name,
+    htmlName,
     value = false,
     required,
     disabled,
@@ -1309,7 +1302,7 @@ function CheckboxWidget(props) {
     registry,
     options
   );
-  const handleCheckboxChange = useCallback7(
+  const handleCheckboxChange = useCallback6(
     (e) => {
       if (!disabled && !readonly && onChange) {
         onChange(e.currentTarget.checked);
@@ -1317,7 +1310,7 @@ function CheckboxWidget(props) {
     },
     [onChange, disabled, readonly]
   );
-  const handleBlur = useCallback7(
+  const handleBlur = useCallback6(
     ({ target }) => {
       if (onBlur) {
         onBlur(id, target.checked);
@@ -1325,7 +1318,7 @@ function CheckboxWidget(props) {
     },
     [onBlur, id]
   );
-  const handleFocus = useCallback7(
+  const handleFocus = useCallback6(
     ({ target }) => {
       if (onFocus) {
         onFocus(id, target.checked);
@@ -1349,7 +1342,7 @@ function CheckboxWidget(props) {
       Checkbox2,
       {
         id,
-        name,
+        name: htmlName || name,
         label: labelValue4(label || void 0, hideLabel, false),
         disabled: disabled || readonly,
         required,
@@ -1367,7 +1360,7 @@ 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
@@ -1393,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);
@@ -1407,7 +1400,7 @@ function ColorWidget(props) {
     },
     [onBlur, id]
   );
-  const handleFocus = useCallback8(
+  const handleFocus = useCallback7(
     ({ target }) => {
       if (onFocus) {
         onFocus(id, target && target.value);
@@ -1438,7 +1431,7 @@ function ColorWidget(props) {
 }
 
 // src/widgets/FileWidget.tsx
-import { useCallback as useCallback9 } from "react";
+import { useCallback as useCallback8 } from "react";
 import {
   dataURItoBlob,
   ariaDescribedByIds as ariaDescribedByIds8,
@@ -1520,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) => {
@@ -1536,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);
@@ -1547,7 +1540,7 @@ 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) {
@@ -1579,7 +1572,7 @@ 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
@@ -1606,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);
@@ -1620,7 +1613,7 @@ function PasswordWidget(props) {
     },
     [onBlur, id]
   );
-  const handleFocus = useCallback10(
+  const handleFocus = useCallback9(
     ({ target }) => {
       if (onFocus) {
         onFocus(id, target && target.value);
@@ -1650,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,
@@ -1662,6 +1655,7 @@ import { jsx as jsx30 } from "react/jsx-runtime";
 function RadioWidget(props) {
   const {
     id,
+    htmlName,
     value,
     required,
     disabled,
@@ -1677,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));
@@ -1685,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));
@@ -1693,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));
@@ -1706,7 +1700,7 @@ function RadioWidget(props) {
     Radio.Group,
     {
       id,
-      name: id,
+      name: htmlName || id,
       value: selected,
       label: !hideLabel ? label : void 0,
       onChange: handleChange,
@@ -1733,7 +1727,7 @@ function RadioWidget(props) {
 }
 
 // src/widgets/RangeWidget.tsx
-import { useCallback as useCallback12 } from "react";
+import { useCallback as useCallback11 } from "react";
 import {
   ariaDescribedByIds as ariaDescribedByIds11,
   rangeSpec,
@@ -1761,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);
@@ -1769,12 +1763,12 @@ 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);
     }
@@ -1805,7 +1799,7 @@ function RangeWidget(props) {
 }
 
 // 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,
@@ -1817,6 +1811,7 @@ import { jsx as jsx32 } from "react/jsx-runtime";
 function SelectWidget(props) {
   const {
     id,
+    htmlName,
     value,
     placeholder,
     required,
@@ -1834,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));
@@ -1842,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));
@@ -1850,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));
@@ -1875,7 +1870,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 +1891,7 @@ 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
@@ -1907,6 +1902,7 @@ function TextareaWidget(props) {
   const {
     id,
     name,
+    htmlName,
     value,
     placeholder,
     required,
@@ -1923,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);
@@ -1937,7 +1933,7 @@ function TextareaWidget(props) {
     },
     [onBlur, id]
   );
-  const handleFocus = useCallback14(
+  const handleFocus = useCallback13(
     ({ target }) => {
       if (onFocus) {
         onFocus(id, target && target.value);
@@ -1949,7 +1945,7 @@ function TextareaWidget(props) {
     Textarea,
     {
       id,
-      name,
+      name: htmlName || name,
       value: value || "",
       placeholder: placeholder || void 0,
       required,