@rjsf/mantine 6.0.1 → 6.1.0

package/dist/mantine.esm.js

@@ -108,16 +108,23 @@ import {
   getUiOptions as getUiOptions3,
   titleId
 } from "@rjsf/utils";
-import { Title } from "@mantine/core";
-import { jsx as jsx3 } from "react/jsx-runtime";
+import { Grid, Title } from "@mantine/core";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
 function ArrayFieldTitleTemplate(props) {
-  const { fieldPathId, title, uiSchema, registry } = props;
+  const { fieldPathId, title, uiSchema, registry, optionalDataControl } = props;
   const options = getUiOptions3(uiSchema, registry.globalUiOptions);
   const { label: displayLabel = true } = options;
   if (!title || !displayLabel) {
     return null;
   }
-  return /* @__PURE__ */ jsx3(Title, { id: titleId(fieldPathId), order: 4, fw: "normal", children: title });
+  let heading = title ? /* @__PURE__ */ jsx3(Title, { id: titleId(fieldPathId), order: 4, fw: "normal", children: title }) : null;
+  if (optionalDataControl) {
+    heading = /* @__PURE__ */ jsxs3(Grid, { children: [
+      /* @__PURE__ */ jsx3(Grid.Col, { span: "auto", children: heading }),
+      /* @__PURE__ */ jsx3(Grid.Col, { span: "content", children: optionalDataControl })
+    ] });
+  }
+  return heading;
 }
 
 // src/templates/BaseInputTemplate.tsx
@@ -135,6 +142,7 @@ var uiOptionsKeys = [
   "emptyValue",
   "classNames",
   "title",
+  "label",
   "help",
   "autocomplete",
   "disabled",
@@ -167,7 +175,7 @@ function cleanupOptions(options) {
 }
 
 // src/templates/BaseInputTemplate.tsx
-import { Fragment, jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
 function BaseInputTemplate(props) {
   const {
     id,
@@ -191,6 +199,7 @@ function BaseInputTemplate(props) {
     children
   } = props;
   const inputProps = getInputProps(schema, type, options, false);
+  const description = hideLabel ? void 0 : options.description || schema.description;
   const themeProps = cleanupOptions(options);
   const handleNumberChange = useCallback((value2) => onChange(value2), [onChange]);
   const handleChange = useCallback(
@@ -213,50 +222,45 @@ function BaseInputTemplate(props) {
     },
     [onFocus, id]
   );
+  const componentProps = {
+    id,
+    name: htmlName || id,
+    label: labelValue(label || void 0, hideLabel, false),
+    required,
+    autoFocus: autofocus,
+    disabled: disabled || readonly,
+    onBlur: !readonly ? handleBlur : void 0,
+    onFocus: !readonly ? handleFocus : void 0,
+    placeholder,
+    error: rawErrors && rawErrors.length > 0 ? rawErrors.join("\n") : void 0,
+    list: schema.examples ? examplesId(id) : void 0
+  };
   const input = inputProps.type === "number" || inputProps.type === "integer" ? /* @__PURE__ */ jsx4(
     NumberInput,
     {
-      id,
-      name: htmlName || id,
-      label: labelValue(label || void 0, hideLabel, false),
-      required,
-      autoFocus: autofocus,
-      disabled: disabled || readonly,
-      onBlur: !readonly ? handleBlur : void 0,
       onChange: !readonly ? handleNumberChange : void 0,
-      onFocus: !readonly ? handleFocus : void 0,
-      placeholder,
-      error: rawErrors && rawErrors.length > 0 ? rawErrors.join("\n") : void 0,
-      list: schema.examples ? examplesId(id) : void 0,
+      ...componentProps,
       ...inputProps,
       ...themeProps,
       step: typeof inputProps.step === "number" ? inputProps.step : 1,
       type: "text",
+      description,
       value,
       "aria-describedby": ariaDescribedByIds(id, !!schema.examples)
     }
   ) : /* @__PURE__ */ jsx4(
     TextInput,
     {
-      id,
-      name: htmlName || id,
-      label: labelValue(label || void 0, hideLabel, false),
-      required,
-      autoFocus: autofocus,
-      disabled: disabled || readonly,
-      onBlur: !readonly ? handleBlur : void 0,
       onChange: !readonly ? handleChange : void 0,
-      onFocus: !readonly ? handleFocus : void 0,
-      placeholder,
-      error: rawErrors && rawErrors.length > 0 ? rawErrors.join("\n") : void 0,
-      list: schema.examples ? examplesId(id) : void 0,
+      ...componentProps,
       ...inputProps,
       ...themeProps,
+      description,
       value,
       "aria-describedby": ariaDescribedByIds(id, !!schema.examples)
     }
   );
-  return /* @__PURE__ */ jsxs3(Fragment, { children: [
+  return /* @__PURE__ */ jsxs4(Fragment, { children: [
     input,
     children,
     Array.isArray(schema.examples) && /* @__PURE__ */ jsx4("datalist", { id: examplesId(id), children: schema.examples.concat(schema.default && !schema.examples.includes(schema.default) ? [schema.default] : []).map((example) => {
@@ -282,9 +286,9 @@ import { TranslatableString } from "@rjsf/utils";
 import { Alert, Title as Title2, List } from "@mantine/core";
 
 // src/templates/icons.tsx
-import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
 function Plus({ size, style, ...others }) {
-  return /* @__PURE__ */ jsxs4(
+  return /* @__PURE__ */ jsxs5(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
@@ -308,7 +312,7 @@ function Plus({ size, style, ...others }) {
   );
 }
 function Copy({ size, style, ...others }) {
-  return /* @__PURE__ */ jsxs4(
+  return /* @__PURE__ */ jsxs5(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
@@ -332,7 +336,7 @@ function Copy({ size, style, ...others }) {
   );
 }
 function ChevronDown({ size, style, ...others }) {
-  return /* @__PURE__ */ jsxs4(
+  return /* @__PURE__ */ jsxs5(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
@@ -355,7 +359,7 @@ function ChevronDown({ size, style, ...others }) {
   );
 }
 function ChevronUp({ size, style, ...others }) {
-  return /* @__PURE__ */ jsxs4(
+  return /* @__PURE__ */ jsxs5(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
@@ -378,7 +382,7 @@ function ChevronUp({ size, style, ...others }) {
   );
 }
 function X({ size, style, ...others }) {
-  return /* @__PURE__ */ jsxs4(
+  return /* @__PURE__ */ jsxs5(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
@@ -402,7 +406,7 @@ function X({ size, style, ...others }) {
   );
 }
 function ExclamationCircle({ size, style, ...others }) {
-  return /* @__PURE__ */ jsxs4(
+  return /* @__PURE__ */ jsxs5(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
@@ -567,7 +571,7 @@ import {
   getTemplate as getTemplate3,
   getUiOptions as getUiOptions4
 } from "@rjsf/utils";
-import { jsx as jsx12, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx12, jsxs as jsxs6 } from "react/jsx-runtime";
 function FieldTemplate(props) {
   const {
     id,
@@ -595,13 +599,15 @@ function FieldTemplate(props) {
   if (hidden) {
     return /* @__PURE__ */ jsx12(Box4, { display: "none", children });
   }
-  return /* @__PURE__ */ jsxs5(
+  return /* @__PURE__ */ jsxs6(
     WrapIfAdditionalTemplate2,
     {
       id,
       classNames,
       style,
       label,
+      displayLabel,
+      rawDescription,
       schema,
       uiSchema,
       registry,
@@ -618,28 +624,28 @@ function FieldTemplate(props) {
 // src/templates/FieldHelpTemplate.tsx
 import { helpId } from "@rjsf/utils";
 import { Text as Text2 } from "@mantine/core";
+import { RichHelp } from "@rjsf/core";
 import { jsx as jsx13 } from "react/jsx-runtime";
 function FieldHelpTemplate(props) {
-  const { fieldPathId, help } = props;
+  const { fieldPathId, help, uiSchema, registry } = props;
   if (!help) {
     return null;
   }
-  const id = helpId(fieldPathId);
-  return /* @__PURE__ */ jsx13(Text2, { id, size: "sm", my: "xs", c: "dimmed", children: help });
+  return /* @__PURE__ */ jsx13(Text2, { id: helpId(fieldPathId), size: "sm", my: "xs", c: "dimmed", children: /* @__PURE__ */ jsx13(RichHelp, { help, registry, uiSchema }) });
 }
 
 // src/templates/GridTemplate.tsx
-import { Container, Grid } from "@mantine/core";
+import { Container, Grid as Grid2 } from "@mantine/core";
 import { jsx as jsx14 } from "react/jsx-runtime";
 function GridTemplate(props) {
   const { children, column, fluid = true, ...rest } = props;
   if (column) {
-    return /* @__PURE__ */ jsx14(Grid.Col, { ...rest, children });
+    return /* @__PURE__ */ jsx14(Grid2.Col, { ...rest, children });
   }
   if (fluid) {
-    return /* @__PURE__ */ jsx14(Container, { p: "4", mx: 0, w: "100%", children: /* @__PURE__ */ jsx14(Grid, { ...rest, children }) });
+    return /* @__PURE__ */ jsx14(Container, { p: "4", mx: 0, w: "100%", children: /* @__PURE__ */ jsx14(Grid2, { ...rest, children }) });
   }
-  return /* @__PURE__ */ jsx14(Grid, { grow: true, ...rest, children });
+  return /* @__PURE__ */ jsx14(Grid2, { grow: true, ...rest, children });
 }
 
 // src/templates/ObjectFieldTemplate.tsx
@@ -652,7 +658,7 @@ import {
   getUiOptions as getUiOptions5,
   titleId as titleId2
 } from "@rjsf/utils";
-import { jsx as jsx15, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx15, jsxs as jsxs7 } from "react/jsx-runtime";
 function ObjectFieldTemplate(props) {
   const {
     title,
@@ -683,7 +689,7 @@ function ObjectFieldTemplate(props) {
   const gridCols = typeof uiOptions?.gridCols === "number" && uiOptions?.gridCols || void 0;
   const gridSpacing = uiOptions?.gridSpacing;
   const gridVerticalSpacing = uiOptions?.gridVerticalSpacing;
-  return /* @__PURE__ */ jsxs6(Container2, { id: fieldPathId.$id, p: 0, children: [
+  return /* @__PURE__ */ jsxs7(Container2, { id: fieldPathId.$id, p: 0, children: [
     title && /* @__PURE__ */ jsx15(
       TitleFieldTemplate,
       {
@@ -706,7 +712,7 @@ function ObjectFieldTemplate(props) {
         registry
       }
     ),
-    /* @__PURE__ */ jsxs6(
+    /* @__PURE__ */ jsxs7(
       SimpleGrid,
       {
         cols: gridCols,
@@ -766,15 +772,15 @@ function OptionalDataControlsTemplate(props) {
 }
 
 // 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";
+import { Grid as Grid3, Title as Title3 } from "@mantine/core";
+import { jsx as jsx17, jsxs as jsxs8 } from "react/jsx-runtime";
 function TitleField(props) {
   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 })
+    heading = /* @__PURE__ */ jsxs8(Grid3, { children: [
+      /* @__PURE__ */ jsx17(Grid3.Col, { span: "auto", children: heading }),
+      /* @__PURE__ */ jsx17(Grid3.Col, { span: "content", children: optionalDataControl })
     ] });
   }
   return heading;
@@ -787,14 +793,16 @@ import {
   buttonId as buttonId3,
   TranslatableString as TranslatableString4
 } from "@rjsf/utils";
-import { Flex as Flex2, Grid as Grid3, TextInput as TextInput2 } from "@mantine/core";
-import { jsx as jsx18, jsxs as jsxs8 } from "react/jsx-runtime";
+import { Flex as Flex2, Grid as Grid4, TextInput as TextInput2 } from "@mantine/core";
+import { jsx as jsx18, jsxs as jsxs9 } from "react/jsx-runtime";
 function WrapIfAdditionalTemplate(props) {
   const {
     id,
     classNames,
     style,
     label,
+    displayLabel,
+    rawDescription,
     required,
     readonly,
     disabled,
@@ -817,24 +825,25 @@ function WrapIfAdditionalTemplate(props) {
     ...uiSchema,
     [UI_OPTIONS_KEY]: { ...uiOptions, block: true }
   };
-  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(
+  return /* @__PURE__ */ jsx18("div", { className: classNames, style, children: /* @__PURE__ */ jsxs9(Flex2, { gap: "xs", align: "end", justify: "center", children: [
+    /* @__PURE__ */ jsxs9(Grid4, { w: "100%", align: "center", children: [
+      /* @__PURE__ */ jsx18(Grid4.Col, { span: 6, className: "form-additional", children: /* @__PURE__ */ jsx18(
         TextInput2,
         {
           className: "form-group",
-          label: keyLabel,
+          label: displayLabel ? keyLabel : void 0,
           defaultValue: label,
           required,
+          description: rawDescription ? "\xA0" : void 0,
           disabled: disabled || readonly,
           id: `${id}-key`,
           name: `${id}-key`,
           onBlur: !readonly ? onKeyRenameBlur : void 0
         }
-      ) }) }),
-      /* @__PURE__ */ jsx18(Grid3.Col, { span: 6, className: "form-additional", children })
+      ) }),
+      /* @__PURE__ */ jsx18(Grid4.Col, { span: 6, className: "form-additional", children })
     ] }),
-    /* @__PURE__ */ jsx18(
+    /* @__PURE__ */ jsx18("div", { children: /* @__PURE__ */ jsx18(
       RemoveButton2,
       {
         id: buttonId3(id, "remove"),
@@ -845,15 +854,15 @@ function WrapIfAdditionalTemplate(props) {
         uiSchema: buttonUiOptions,
         registry
       }
-    )
+    ) })
   ] }) });
 }
 
 // src/templates/MultiSchemaFieldTemplate.tsx
 import { Stack } from "@mantine/core";
-import { jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsxs as jsxs10 } from "react/jsx-runtime";
 function MultiSchemaFieldTemplate({ selector, optionSchemaField }) {
-  return /* @__PURE__ */ jsxs9(Stack, { style: { marginBottom: "1rem" }, children: [
+  return /* @__PURE__ */ jsxs10(Stack, { style: { marginBottom: "1rem" }, children: [
     selector,
     optionSchemaField
   ] });
@@ -902,14 +911,14 @@ import {
   useAltDateWidgetProps
 } from "@rjsf/utils";
 import { Flex as Flex3, Box as Box6, Group as Group4, Button as Button2, Select, Input } from "@mantine/core";
-import { Fragment as Fragment2, jsx as jsx20, jsxs as jsxs10 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx20, jsxs as jsxs11 } from "react/jsx-runtime";
 function AltDateWidget(props) {
   const { id, required, disabled, readonly, label, hideLabel, rawErrors, options, registry } = props;
   const { translateString } = registry;
   const { elements, handleChange, handleClear, handleSetNow } = useAltDateWidgetProps(props);
-  return /* @__PURE__ */ jsxs10(Fragment2, { children: [
+  return /* @__PURE__ */ jsxs11(Fragment2, { children: [
     !hideLabel && !!label && /* @__PURE__ */ jsx20(Input.Label, { id: titleId3(id), required, children: label }),
-    /* @__PURE__ */ jsxs10(Flex3, { gap: "xs", align: "center", wrap: "nowrap", children: [
+    /* @__PURE__ */ jsxs11(Flex3, { gap: "xs", align: "center", wrap: "nowrap", children: [
       elements.map((elemProps, i) => {
         const elemId = `${id}_${elemProps.type}`;
         return /* @__PURE__ */ jsx20(Box6, { children: /* @__PURE__ */ jsx20(
@@ -929,7 +938,7 @@ function AltDateWidget(props) {
           }
         ) }, i);
       }),
-      /* @__PURE__ */ jsxs10(Group4, { wrap: "nowrap", gap: 3, children: [
+      /* @__PURE__ */ jsxs11(Group4, { wrap: "nowrap", gap: 3, children: [
         (options.hideNowButton !== "undefined" ? !options.hideNowButton : true) && /* @__PURE__ */ jsx20(Button2, { variant: "subtle", size: "xs", onClick: handleSetNow, children: translateString(TranslatableString5.NowLabel) }),
         (options.hideClearButton !== "undefined" ? !options.hideClearButton : true) && /* @__PURE__ */ jsx20(Button2, { variant: "subtle", size: "xs", onClick: handleClear, children: translateString(TranslatableString5.ClearLabel) })
       ] })
@@ -1132,7 +1141,7 @@ import {
   titleId as titleId4
 } from "@rjsf/utils";
 import { Checkbox, Flex as Flex4, Input as Input2 } from "@mantine/core";
-import { Fragment as Fragment3, jsx as jsx25, jsxs as jsxs11 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx25, jsxs as jsxs12 } from "react/jsx-runtime";
 function CheckboxesWidget(props) {
   const {
     id,
@@ -1177,7 +1186,7 @@ function CheckboxesWidget(props) {
     [onFocus, id, enumOptions, emptyValue]
   );
   const selectedIndexes = enumOptionsIndexForValue(value, enumOptions, true);
-  return Array.isArray(enumOptions) && enumOptions.length > 0 ? /* @__PURE__ */ jsxs11(Fragment3, { children: [
+  return Array.isArray(enumOptions) && enumOptions.length > 0 ? /* @__PURE__ */ jsxs12(Fragment3, { children: [
     !hideLabel && !!label && /* @__PURE__ */ jsx25(Input2.Label, { id: titleId4(id), required, children: label }),
     /* @__PURE__ */ jsx25(
       Checkbox.Group,
@@ -1218,7 +1227,7 @@ import {
   ariaDescribedByIds as ariaDescribedByIds6
 } from "@rjsf/utils";
 import { Checkbox as Checkbox2 } from "@mantine/core";
-import { Fragment as Fragment4, jsx as jsx26, jsxs as jsxs12 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx26, jsxs as jsxs13 } from "react/jsx-runtime";
 function CheckboxWidget(props) {
   const {
     id,
@@ -1240,7 +1249,6 @@ function CheckboxWidget(props) {
     registry,
     uiSchema
   } = props;
-  const themeProps = cleanupOptions(options);
   const DescriptionFieldTemplate = getTemplate5(
     "DescriptionFieldTemplate",
     registry,
@@ -1271,7 +1279,7 @@ function CheckboxWidget(props) {
     [onFocus, id]
   );
   const description = options.description || schema.description;
-  return /* @__PURE__ */ jsxs12(Fragment4, { children: [
+  return /* @__PURE__ */ jsxs13(Fragment4, { children: [
     !hideLabel && !!description && /* @__PURE__ */ jsx26(
       DescriptionFieldTemplate,
       {
@@ -1296,8 +1304,7 @@ function CheckboxWidget(props) {
         onBlur: handleBlur,
         onFocus: handleFocus,
         error: rawErrors && rawErrors.length > 0 ? rawErrors.join("\n") : void 0,
-        "aria-describedby": ariaDescribedByIds6(id),
-        ...themeProps
+        "aria-describedby": ariaDescribedByIds6(id)
       }
     )
   ] });
@@ -1600,7 +1607,7 @@ import {
   titleId as titleId5
 } from "@rjsf/utils";
 import { Slider, Input as Input3 } from "@mantine/core";
-import { Fragment as Fragment5, jsx as jsx31, jsxs as jsxs13 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx31, jsxs as jsxs14 } from "react/jsx-runtime";
 function RangeWidget(props) {
   const {
     id,
@@ -1639,7 +1646,7 @@ function RangeWidget(props) {
       onFocus(id, value);
     }
   }, [onFocus, id, value]);
-  return /* @__PURE__ */ jsxs13(Fragment5, { children: [
+  return /* @__PURE__ */ jsxs14(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(