@rjsf/mui 6.5.0 → 6.5.2

package/dist/mui.esm.js

@@ -24,6 +24,15 @@ function getMuiProps(options, propsToFilter, rjsfSlotPropsOnly) {
   }
   return muiProps;
 }
+function computeSxProps(sxProps, muiProps) {
+  if (!muiProps) {
+    return sxProps;
+  }
+  if (Array.isArray(muiProps?.sx)) {
+    return [sxProps, ...muiProps.sx];
+  }
+  return { ...sxProps, ...muiProps?.sx };
+}
 
 // src/AddButton/AddButton.tsx
 import { jsx } from "react/jsx-runtime";
@@ -69,19 +78,43 @@ function ArrayFieldItemTemplate(props) {
     fontWeight: "bold",
     minWidth: 0
   };
-  const { rjsfSlotProps: muiSlotProps } = getMuiProps(uiOptions);
-  return /* @__PURE__ */ jsxs(Grid, { container: true, alignItems: "center", ...muiSlotProps?.arrayItemGridContainer, children: [
-    /* @__PURE__ */ jsx2(
-      Grid,
-      {
-        size: { xs: 8, sm: 9, md: 10, lg: 11, xl: 11.25 },
-        style: { overflow: "auto" },
-        ...muiSlotProps?.arrayItemGridItem,
-        children: /* @__PURE__ */ jsx2(Box, { mb: 2, ...muiSlotProps?.arrayItemOuterBox, children: /* @__PURE__ */ jsx2(Paper, { elevation: 2, ...muiSlotProps?.arrayItemPaper, children: /* @__PURE__ */ jsx2(Box, { p: 2, ...muiSlotProps?.arrayItemInnerBox, children }) }) })
-      }
-    ),
-    hasToolbar && /* @__PURE__ */ jsx2(Grid, { sx: { mt: hasDescription ? -5 : -1.5 }, ...muiSlotProps?.arrayItemToolbarGrid, children: /* @__PURE__ */ jsx2(ArrayFieldItemButtonsTemplate, { ...buttonsProps, style: btnStyle }) })
-  ] });
+  const {
+    rjsfSlotProps: {
+      arrayItemGridContainer,
+      arrayItemGridItem,
+      arrayItemInnerBox,
+      arrayItemOuterBox,
+      arrayItemPaper,
+      arrayItemToolbarGrid
+    } = {}
+  } = getMuiProps(uiOptions);
+  return /* @__PURE__ */ jsxs(
+    Grid,
+    {
+      container: true,
+      ...arrayItemGridContainer,
+      sx: computeSxProps({ alignItems: "center" }, arrayItemGridContainer),
+      children: [
+        /* @__PURE__ */ jsx2(
+          Grid,
+          {
+            size: { xs: 8, sm: 9, md: 10, lg: 11, xl: 11.25 },
+            ...arrayItemGridItem,
+            sx: computeSxProps({ overflow: "auto" }, arrayItemGridItem),
+            children: /* @__PURE__ */ jsx2(Box, { ...arrayItemOuterBox, sx: computeSxProps({ mb: 2 }, arrayItemOuterBox), children: /* @__PURE__ */ jsx2(Paper, { elevation: 2, ...arrayItemPaper, children: /* @__PURE__ */ jsx2(Box, { ...arrayItemInnerBox, sx: computeSxProps({ p: 2 }, arrayItemInnerBox), children }) }) })
+          }
+        ),
+        hasToolbar && /* @__PURE__ */ jsx2(
+          Grid,
+          {
+            ...arrayItemToolbarGrid,
+            sx: computeSxProps({ mt: hasDescription ? -5 : -1.5 }, arrayItemToolbarGrid),
+            children: /* @__PURE__ */ jsx2(ArrayFieldItemButtonsTemplate, { ...buttonsProps, style: btnStyle })
+          }
+        )
+      ]
+    }
+  );
 }
 
 // src/ArrayFieldTemplate/ArrayFieldTemplate.tsx
@@ -124,8 +157,16 @@ function ArrayFieldTemplate(props) {
   const {
     ButtonTemplates: { AddButton: AddButton2 }
   } = registry.templates;
-  const { rjsfSlotProps: muiSlotProps } = getMuiProps(uiOptions);
-  return /* @__PURE__ */ jsx3(Paper2, { elevation: 2, ...muiSlotProps?.arrayPaper, children: /* @__PURE__ */ jsxs2(Box2, { p: 2, ...muiSlotProps?.arrayBox, children: [
+  const {
+    rjsfSlotProps: {
+      arrayPaper,
+      arrayBox,
+      arrayAddButtonGridContainer,
+      arrayAddButtonGridItem,
+      arrayAddButtonBox
+    } = {}
+  } = getMuiProps(uiOptions);
+  return /* @__PURE__ */ jsx3(Paper2, { elevation: 2, ...arrayPaper, children: /* @__PURE__ */ jsxs2(Box2, { ...arrayBox, sx: computeSxProps({ p: 2 }, arrayBox), children: [
     /* @__PURE__ */ jsx3(
       ArrayFieldTitleTemplate,
       {
@@ -150,17 +191,25 @@ function ArrayFieldTemplate(props) {
     ),
     !showOptionalDataControlInTitle ? optionalDataControl : void 0,
     items,
-    canAdd && /* @__PURE__ */ jsx3(Grid2, { container: true, justifyContent: "flex-end", ...muiSlotProps?.arrayAddButtonGridContainer, children: /* @__PURE__ */ jsx3(Grid2, { ...muiSlotProps?.arrayAddButtonGridItem, children: /* @__PURE__ */ jsx3(Box2, { mt: 2, ...muiSlotProps?.arrayAddButtonBox, children: /* @__PURE__ */ jsx3(
-      AddButton2,
+    canAdd && /* @__PURE__ */ jsx3(
+      Grid2,
       {
-        id: buttonId(fieldPathId, "add"),
-        className: "rjsf-array-item-add",
-        onClick: onAddClick,
-        disabled: disabled || readonly,
-        uiSchema,
-        registry
+        container: true,
+        ...arrayAddButtonGridContainer,
+        sx: computeSxProps({ justifyContent: "flex-end" }, arrayAddButtonGridContainer),
+        children: /* @__PURE__ */ jsx3(Grid2, { ...arrayAddButtonGridItem, children: /* @__PURE__ */ jsx3(Box2, { ...arrayAddButtonBox, sx: computeSxProps({ mt: 2 }, arrayAddButtonBox), children: /* @__PURE__ */ jsx3(
+          AddButton2,
+          {
+            id: buttonId(fieldPathId, "add"),
+            className: "rjsf-array-item-add",
+            onClick: onAddClick,
+            disabled: disabled || readonly,
+            uiSchema,
+            registry
+          }
+        ) }) })
       }
-    ) }) }) })
+    )
   ] }) });
 }
 
@@ -283,10 +332,18 @@ import { jsx as jsx5 } from "react/jsx-runtime";
 function DescriptionField(props) {
   const { id, description, registry, uiSchema } = props;
   const uiOptions = getUiOptions4(uiSchema);
-  const muiProps = getMuiProps(uiOptions);
-  const { rjsfSlotProps: muiSlotProps } = muiProps;
+  const { rjsfSlotProps: { descTypography } = {} } = getMuiProps(uiOptions);
   if (description) {
-    return /* @__PURE__ */ jsx5(Typography, { id, variant: "subtitle2", style: { marginTop: "5px" }, ...muiSlotProps?.descTypography, children: /* @__PURE__ */ jsx5(RichDescription, { description, registry, uiSchema }) });
+    return /* @__PURE__ */ jsx5(
+      Typography,
+      {
+        id,
+        variant: "subtitle2",
+        ...descTypography,
+        sx: computeSxProps({ mt: 0.625 }, descTypography),
+        children: /* @__PURE__ */ jsx5(RichDescription, { description, registry, uiSchema })
+      }
+    );
   }
   return null;
 }
@@ -312,13 +369,23 @@ function ErrorList({
 }) {
   const { translateString } = registry;
   const uiOptions = getUiOptions5(uiSchema);
-  const { rjsfSlotProps: muiSlotProps } = getMuiProps(uiOptions);
-  return /* @__PURE__ */ jsx6(Paper3, { elevation: 2, ...muiSlotProps?.errorPaper, children: /* @__PURE__ */ jsxs4(Box3, { mb: 2, p: 2, ...muiSlotProps?.errorBox, children: [
-    /* @__PURE__ */ jsx6(Typography2, { variant: "h6", ...muiSlotProps?.errorTypography, children: translateString(TranslatableString2.ErrorsLabel) }),
-    /* @__PURE__ */ jsx6(List, { dense: true, ...muiSlotProps?.errorList, children: errors.map((error, i) => {
-      return /* @__PURE__ */ jsxs4(ListItem, { ...muiSlotProps?.errorListItem, children: [
-        /* @__PURE__ */ jsx6(ListItemIcon, { ...muiSlotProps?.errorListItemIcon, children: /* @__PURE__ */ jsx6(ErrorIcon, { color: "error" }) }),
-        /* @__PURE__ */ jsx6(ListItemText, { primary: error.stack, ...muiSlotProps?.errorListItemText })
+  const {
+    rjsfSlotProps: {
+      errorPaper,
+      errorBox,
+      errorTypography,
+      errorList,
+      errorListItem,
+      errorListItemIcon,
+      errorListItemText
+    } = {}
+  } = getMuiProps(uiOptions);
+  return /* @__PURE__ */ jsx6(Paper3, { elevation: 2, ...errorPaper, children: /* @__PURE__ */ jsxs4(Box3, { ...errorBox, sx: computeSxProps({ mb: 2, p: 2 }, errorBox), children: [
+    /* @__PURE__ */ jsx6(Typography2, { variant: "h6", ...errorTypography, children: translateString(TranslatableString2.ErrorsLabel) }),
+    /* @__PURE__ */ jsx6(List, { dense: true, ...errorList, children: errors.map((error, i) => {
+      return /* @__PURE__ */ jsxs4(ListItem, { ...errorListItem, children: [
+        /* @__PURE__ */ jsx6(ListItemIcon, { ...errorListItemIcon, children: /* @__PURE__ */ jsx6(ErrorIcon, { color: "error" }) }),
+        /* @__PURE__ */ jsx6(ListItemText, { primary: error.stack, ...errorListItemText })
       ] }, i);
     }) })
   ] }) });
@@ -455,15 +522,14 @@ function FieldHelpTemplate(props) {
     return null;
   }
   const uiOptions = getUiOptions8(uiSchema);
-  const muiProps = getMuiProps(uiOptions);
-  const { rjsfSlotProps: muiSlotProps } = muiProps;
+  const { rjsfSlotProps: { helpFormHelperText } = {} } = getMuiProps(uiOptions);
   return /* @__PURE__ */ jsx9(
     FormHelperText2,
     {
       component: "div",
       id: helpId(fieldPathId),
-      style: { marginTop: "5px" },
-      ...muiSlotProps?.helpFormHelperText,
+      ...helpFormHelperText,
+      sx: computeSxProps({ mt: 0.625 }, helpFormHelperText),
       children: /* @__PURE__ */ jsx9(RichHelp, { help, registry, uiSchema })
     }
   );
@@ -614,7 +680,9 @@ function ObjectFieldTemplate(props) {
   const {
     ButtonTemplates: { AddButton: AddButton2 }
   } = registry.templates;
-  const { rjsfSlotProps: muiSlotProps } = getMuiProps(uiOptions);
+  const {
+    rjsfSlotProps: { objectGridContainer, objectGridItem, objectAddButtonGridContainer, objectAddButtonGridItem } = {}
+  } = getMuiProps(uiOptions);
   return /* @__PURE__ */ jsxs7(Fragment2, { children: [
     title && /* @__PURE__ */ jsx13(
       TitleFieldTemplate,
@@ -638,27 +706,53 @@ function ObjectFieldTemplate(props) {
         registry
       }
     ),
-    /* @__PURE__ */ jsxs7(Grid4, { container: true, spacing: 2, style: { marginTop: "10px" }, ...muiSlotProps?.objectGridContainer, children: [
-      !showOptionalDataControlInTitle ? optionalDataControl : void 0,
-      properties.map(
-        (element, index) => (
-          // Remove the <Grid> if the inner element is hidden as the <Grid>
-          // itself would otherwise still take up space.
-          element.hidden ? element.content : /* @__PURE__ */ jsx13(Grid4, { size: { xs: 12 }, style: { marginBottom: "10px" }, ...muiSlotProps?.objectGridItem, children: element.content }, index)
-        )
-      )
-    ] }),
-    canExpand(schema, uiSchema, formData) && /* @__PURE__ */ jsx13(Grid4, { container: true, justifyContent: "flex-end", ...muiSlotProps?.objectAddButtonGridContainer, children: /* @__PURE__ */ jsx13(Grid4, { ...muiSlotProps?.objectAddButtonGridItem, children: /* @__PURE__ */ jsx13(
-      AddButton2,
+    /* @__PURE__ */ jsxs7(
+      Grid4,
       {
-        id: buttonId2(fieldPathId, "add"),
-        className: "rjsf-object-property-expand",
-        onClick: onAddProperty,
-        disabled: disabled || readonly,
-        uiSchema,
-        registry
+        container: true,
+        spacing: 2,
+        ...objectGridContainer,
+        sx: computeSxProps({ mt: 1.25 }, objectGridContainer),
+        children: [
+          !showOptionalDataControlInTitle ? optionalDataControl : void 0,
+          properties.map(
+            (element, index) => (
+              // Remove the <Grid> if the inner element is hidden as the <Grid>
+              // itself would otherwise still take up space.
+              element.hidden ? element.content : /* @__PURE__ */ jsx13(
+                Grid4,
+                {
+                  size: { xs: 12 },
+                  ...objectGridItem,
+                  sx: computeSxProps({ mb: 1.25 }, objectGridItem),
+                  children: element.content
+                },
+                index
+              )
+            )
+          )
+        ]
       }
-    ) }) })
+    ),
+    canExpand(schema, uiSchema, formData) && /* @__PURE__ */ jsx13(
+      Grid4,
+      {
+        container: true,
+        ...objectAddButtonGridContainer,
+        sx: computeSxProps({ justifyContent: "flex-end" }, objectAddButtonGridContainer),
+        children: /* @__PURE__ */ jsx13(Grid4, { ...objectAddButtonGridItem, children: /* @__PURE__ */ jsx13(
+          AddButton2,
+          {
+            id: buttonId2(fieldPathId, "add"),
+            className: "rjsf-object-property-expand",
+            onClick: onAddProperty,
+            disabled: disabled || readonly,
+            uiSchema,
+            registry
+          }
+        ) })
+      }
+    )
   ] });
 }
 
@@ -710,8 +804,8 @@ function SubmitButton({ uiSchema }) {
     return null;
   }
   const uiOptions = getUiOptions12(uiSchema);
-  const { rjsfSlotProps: muiSlotProps, ...otherMuiProps } = getMuiProps(uiOptions);
-  return /* @__PURE__ */ jsx15(Box5, { marginTop: 3, ...muiSlotProps?.submitBox, children: /* @__PURE__ */ jsx15(
+  const { rjsfSlotProps: { submitBox, submitButton } = {}, ...otherMuiProps } = getMuiProps(uiOptions);
+  return /* @__PURE__ */ jsx15(Box5, { ...submitBox, sx: computeSxProps({ mt: 3 }, submitBox), children: /* @__PURE__ */ jsx15(
     Button,
     {
       type: "submit",
@@ -719,7 +813,7 @@ function SubmitButton({ uiSchema }) {
       color: "primary",
       ...submitButtonProps,
       ...otherMuiProps,
-      ...muiSlotProps?.submitButton,
+      ...submitButton,
       children: submitText
     }
   ) });
@@ -737,17 +831,33 @@ import { jsx as jsx16, jsxs as jsxs8 } from "react/jsx-runtime";
 function TitleField(props) {
   const { id, title, optionalDataControl, uiSchema } = props;
   const uiOptions = getUiOptions13(uiSchema);
-  const { rjsfSlotProps: muiSlotProps } = getMuiProps(uiOptions);
-  let heading = /* @__PURE__ */ jsx16(Typography4, { variant: "h5", ...muiSlotProps?.titleTypography, children: title });
+  const {
+    rjsfSlotProps: {
+      titleBox,
+      titleDivider,
+      titleTypography,
+      titleGridContainer,
+      titleGridItem,
+      titleOptionalDataGridItem
+    } = {}
+  } = getMuiProps(uiOptions);
+  let heading = /* @__PURE__ */ jsx16(Typography4, { variant: "h5", ...titleTypography, children: title });
   if (optionalDataControl) {
-    heading = /* @__PURE__ */ jsxs8(Grid5, { container: true, spacing: 0, ...muiSlotProps?.titleGridContainer, children: [
-      /* @__PURE__ */ jsx16(Grid5, { size: "grow", ...muiSlotProps?.titleGridItem, children: heading }),
-      /* @__PURE__ */ jsx16(Grid5, { justifyContent: "flex-end", ...muiSlotProps?.titleOptionalDataGridItem, children: optionalDataControl })
+    heading = /* @__PURE__ */ jsxs8(Grid5, { container: true, spacing: 0, ...titleGridContainer, children: [
+      /* @__PURE__ */ jsx16(Grid5, { size: "grow", ...titleGridItem, children: heading }),
+      /* @__PURE__ */ jsx16(
+        Grid5,
+        {
+          ...titleOptionalDataGridItem,
+          sx: computeSxProps({ justifyContent: "flex-end" }, titleOptionalDataGridItem),
+          children: optionalDataControl
+        }
+      )
     ] });
   }
-  return /* @__PURE__ */ jsxs8(Box6, { id, mb: 1, mt: 1, ...muiSlotProps?.titleBox, children: [
+  return /* @__PURE__ */ jsxs8(Box6, { id, ...titleBox, sx: computeSxProps({ mb: 1, mt: 1 }, titleBox), children: [
     heading,
-    /* @__PURE__ */ jsx16(Divider, { ...muiSlotProps?.titleDivider })
+    /* @__PURE__ */ jsx16(Divider, { ...titleDivider })
   ] });
 }
 
@@ -789,21 +899,19 @@ function WrapIfAdditionalTemplate(props) {
     fontWeight: "bold"
   };
   const uiOptions = getUiOptions14(uiSchema);
-  const { rjsfSlotProps } = getMuiProps(uiOptions);
-  const muiSlotProps = rjsfSlotProps;
+  const { rjsfSlotProps: { wrapGridContainer, wrapKeyGridItem, wrapChildrenGridItem, wrapRemoveButtonGridItem } = {} } = getMuiProps(uiOptions);
   if (!additional) {
     return /* @__PURE__ */ jsx17("div", { className: classNames, style, children });
   }
-  const { wrapGridContainer, wrapKeyGridItem, wrapChildrenGridItem, wrapRemoveButtonGridItem } = muiSlotProps || {};
   return /* @__PURE__ */ jsxs9(
     Grid6,
     {
       container: true,
-      alignItems: "flex-start",
       spacing: 2,
       className: classNames,
       style,
       ...wrapGridContainer,
+      sx: computeSxProps({ alignItems: "flex-start" }, wrapGridContainer),
       children: [
         /* @__PURE__ */ jsx17(Grid6, { size: 5.5, ...wrapKeyGridItem, children: /* @__PURE__ */ jsx17(
           TextField2,
@@ -821,7 +929,7 @@ function WrapIfAdditionalTemplate(props) {
           label
         ) }),
         /* @__PURE__ */ jsx17(Grid6, { size: 5.5, ...wrapChildrenGridItem, children }),
-        /* @__PURE__ */ jsx17(Grid6, { sx: { mt: 1.5 }, ...wrapRemoveButtonGridItem, children: /* @__PURE__ */ jsx17(
+        /* @__PURE__ */ jsx17(Grid6, { ...wrapRemoveButtonGridItem, sx: computeSxProps({ mt: 1.5 }, wrapRemoveButtonGridItem), children: /* @__PURE__ */ jsx17(
           RemoveButton2,
           {
             id: buttonId3(id, "remove"),