@rjsf/mui 6.5.0 → 6.5.2

package/dist/index.cjs

@@ -65,6 +65,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
 var import_jsx_runtime = require("react/jsx-runtime");
@@ -107,19 +116,43 @@ function ArrayFieldItemTemplate(props) {
     fontWeight: "bold",
     minWidth: 0
   };
-  const { rjsfSlotProps: muiSlotProps } = getMuiProps(uiOptions);
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_Grid.default, { container: true, alignItems: "center", ...muiSlotProps?.arrayItemGridContainer, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-      import_Grid.default,
-      {
-        size: { xs: 8, sm: 9, md: 10, lg: 11, xl: 11.25 },
-        style: { overflow: "auto" },
-        ...muiSlotProps?.arrayItemGridItem,
-        children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_Box.default, { mb: 2, ...muiSlotProps?.arrayItemOuterBox, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_Paper.default, { elevation: 2, ...muiSlotProps?.arrayItemPaper, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_Box.default, { p: 2, ...muiSlotProps?.arrayItemInnerBox, children }) }) })
-      }
-    ),
-    hasToolbar && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_Grid.default, { sx: { mt: hasDescription ? -5 : -1.5 }, ...muiSlotProps?.arrayItemToolbarGrid, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ArrayFieldItemButtonsTemplate, { ...buttonsProps, style: btnStyle }) })
-  ] });
+  const {
+    rjsfSlotProps: {
+      arrayItemGridContainer,
+      arrayItemGridItem,
+      arrayItemInnerBox,
+      arrayItemOuterBox,
+      arrayItemPaper,
+      arrayItemToolbarGrid
+    } = {}
+  } = getMuiProps(uiOptions);
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+    import_Grid.default,
+    {
+      container: true,
+      ...arrayItemGridContainer,
+      sx: computeSxProps({ alignItems: "center" }, arrayItemGridContainer),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          import_Grid.default,
+          {
+            size: { xs: 8, sm: 9, md: 10, lg: 11, xl: 11.25 },
+            ...arrayItemGridItem,
+            sx: computeSxProps({ overflow: "auto" }, arrayItemGridItem),
+            children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_Box.default, { ...arrayItemOuterBox, sx: computeSxProps({ mb: 2 }, arrayItemOuterBox), children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_Paper.default, { elevation: 2, ...arrayItemPaper, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_Box.default, { ...arrayItemInnerBox, sx: computeSxProps({ p: 2 }, arrayItemInnerBox), children }) }) })
+          }
+        ),
+        hasToolbar && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          import_Grid.default,
+          {
+            ...arrayItemToolbarGrid,
+            sx: computeSxProps({ mt: hasDescription ? -5 : -1.5 }, arrayItemToolbarGrid),
+            children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ArrayFieldItemButtonsTemplate, { ...buttonsProps, style: btnStyle })
+          }
+        )
+      ]
+    }
+  );
 }
 
 // src/ArrayFieldTemplate/ArrayFieldTemplate.tsx
@@ -158,8 +191,16 @@ function ArrayFieldTemplate(props) {
   const {
     ButtonTemplates: { AddButton: AddButton2 }
   } = registry.templates;
-  const { rjsfSlotProps: muiSlotProps } = getMuiProps(uiOptions);
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_Paper2.default, { elevation: 2, ...muiSlotProps?.arrayPaper, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_Box2.default, { p: 2, ...muiSlotProps?.arrayBox, children: [
+  const {
+    rjsfSlotProps: {
+      arrayPaper,
+      arrayBox,
+      arrayAddButtonGridContainer,
+      arrayAddButtonGridItem,
+      arrayAddButtonBox
+    } = {}
+  } = getMuiProps(uiOptions);
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_Paper2.default, { elevation: 2, ...arrayPaper, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_Box2.default, { ...arrayBox, sx: computeSxProps({ p: 2 }, arrayBox), children: [
     /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
       ArrayFieldTitleTemplate,
       {
@@ -184,17 +225,25 @@ function ArrayFieldTemplate(props) {
     ),
     !showOptionalDataControlInTitle ? optionalDataControl : void 0,
     items,
-    canAdd && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_Grid2.default, { container: true, justifyContent: "flex-end", ...muiSlotProps?.arrayAddButtonGridContainer, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_Grid2.default, { ...muiSlotProps?.arrayAddButtonGridItem, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_Box2.default, { mt: 2, ...muiSlotProps?.arrayAddButtonBox, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-      AddButton2,
+    canAdd && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      import_Grid2.default,
       {
-        id: (0, import_utils3.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__ */ (0, import_jsx_runtime3.jsx)(import_Grid2.default, { ...arrayAddButtonGridItem, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_Box2.default, { ...arrayAddButtonBox, sx: computeSxProps({ mt: 2 }, arrayAddButtonBox), children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          AddButton2,
+          {
+            id: (0, import_utils3.buttonId)(fieldPathId, "add"),
+            className: "rjsf-array-item-add",
+            onClick: onAddClick,
+            disabled: disabled || readonly,
+            uiSchema,
+            registry
+          }
+        ) }) })
       }
-    ) }) }) })
+    )
   ] }) });
 }
 
@@ -310,10 +359,18 @@ var import_jsx_runtime5 = require("react/jsx-runtime");
 function DescriptionField(props) {
   const { id, description, registry, uiSchema } = props;
   const uiOptions = (0, import_utils5.getUiOptions)(uiSchema);
-  const muiProps = getMuiProps(uiOptions);
-  const { rjsfSlotProps: muiSlotProps } = muiProps;
+  const { rjsfSlotProps: { descTypography } = {} } = getMuiProps(uiOptions);
   if (description) {
-    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_Typography.default, { id, variant: "subtitle2", style: { marginTop: "5px" }, ...muiSlotProps?.descTypography, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_core2.RichDescription, { description, registry, uiSchema }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      import_Typography.default,
+      {
+        id,
+        variant: "subtitle2",
+        ...descTypography,
+        sx: computeSxProps({ mt: 0.625 }, descTypography),
+        children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_core2.RichDescription, { description, registry, uiSchema })
+      }
+    );
   }
   return null;
 }
@@ -336,13 +393,23 @@ function ErrorList({
 }) {
   const { translateString } = registry;
   const uiOptions = (0, import_utils6.getUiOptions)(uiSchema);
-  const { rjsfSlotProps: muiSlotProps } = getMuiProps(uiOptions);
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_Paper3.default, { elevation: 2, ...muiSlotProps?.errorPaper, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_Box3.default, { mb: 2, p: 2, ...muiSlotProps?.errorBox, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_Typography2.default, { variant: "h6", ...muiSlotProps?.errorTypography, children: translateString(import_utils6.TranslatableString.ErrorsLabel) }),
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_List.default, { dense: true, ...muiSlotProps?.errorList, children: errors.map((error, i) => {
-      return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_ListItem.default, { ...muiSlotProps?.errorListItem, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_ListItemIcon.default, { ...muiSlotProps?.errorListItemIcon, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_Error.default, { color: "error" }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_ListItemText.default, { primary: error.stack, ...muiSlotProps?.errorListItemText })
+  const {
+    rjsfSlotProps: {
+      errorPaper,
+      errorBox,
+      errorTypography,
+      errorList,
+      errorListItem,
+      errorListItemIcon,
+      errorListItemText
+    } = {}
+  } = getMuiProps(uiOptions);
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_Paper3.default, { elevation: 2, ...errorPaper, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_Box3.default, { ...errorBox, sx: computeSxProps({ mb: 2, p: 2 }, errorBox), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_Typography2.default, { variant: "h6", ...errorTypography, children: translateString(import_utils6.TranslatableString.ErrorsLabel) }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_List.default, { dense: true, ...errorList, children: errors.map((error, i) => {
+      return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_ListItem.default, { ...errorListItem, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_ListItemIcon.default, { ...errorListItemIcon, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_Error.default, { color: "error" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_ListItemText.default, { primary: error.stack, ...errorListItemText })
       ] }, i);
     }) })
   ] }) });
@@ -470,15 +537,14 @@ function FieldHelpTemplate(props) {
     return null;
   }
   const uiOptions = (0, import_utils9.getUiOptions)(uiSchema);
-  const muiProps = getMuiProps(uiOptions);
-  const { rjsfSlotProps: muiSlotProps } = muiProps;
+  const { rjsfSlotProps: { helpFormHelperText } = {} } = getMuiProps(uiOptions);
   return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
     import_FormHelperText2.default,
     {
       component: "div",
       id: (0, import_utils9.helpId)(fieldPathId),
-      style: { marginTop: "5px" },
-      ...muiSlotProps?.helpFormHelperText,
+      ...helpFormHelperText,
+      sx: computeSxProps({ mt: 0.625 }, helpFormHelperText),
       children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_core3.RichHelp, { help, registry, uiSchema })
     }
   );
@@ -617,7 +683,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__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
     title && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
       TitleFieldTemplate,
@@ -641,27 +709,53 @@ function ObjectFieldTemplate(props) {
         registry
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_Grid4.default, { 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__ */ (0, import_jsx_runtime13.jsx)(import_Grid4.default, { size: { xs: 12 }, style: { marginBottom: "10px" }, ...muiSlotProps?.objectGridItem, children: element.content }, index)
-        )
-      )
-    ] }),
-    (0, import_utils12.canExpand)(schema, uiSchema, formData) && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_Grid4.default, { container: true, justifyContent: "flex-end", ...muiSlotProps?.objectAddButtonGridContainer, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_Grid4.default, { ...muiSlotProps?.objectAddButtonGridItem, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-      AddButton2,
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+      import_Grid4.default,
       {
-        id: (0, import_utils12.buttonId)(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__ */ (0, import_jsx_runtime13.jsx)(
+                import_Grid4.default,
+                {
+                  size: { xs: 12 },
+                  ...objectGridItem,
+                  sx: computeSxProps({ mb: 1.25 }, objectGridItem),
+                  children: element.content
+                },
+                index
+              )
+            )
+          )
+        ]
       }
-    ) }) })
+    ),
+    (0, import_utils12.canExpand)(schema, uiSchema, formData) && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+      import_Grid4.default,
+      {
+        container: true,
+        ...objectAddButtonGridContainer,
+        sx: computeSxProps({ justifyContent: "flex-end" }, objectAddButtonGridContainer),
+        children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_Grid4.default, { ...objectAddButtonGridItem, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+          AddButton2,
+          {
+            id: (0, import_utils12.buttonId)(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 = (0, import_utils13.getUiOptions)(uiSchema);
-  const { rjsfSlotProps: muiSlotProps, ...otherMuiProps } = getMuiProps(uiOptions);
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_Box5.default, { marginTop: 3, ...muiSlotProps?.submitBox, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+  const { rjsfSlotProps: { submitBox, submitButton } = {}, ...otherMuiProps } = getMuiProps(uiOptions);
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_Box5.default, { ...submitBox, sx: computeSxProps({ mt: 3 }, submitBox), children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
     import_Button.default,
     {
       type: "submit",
@@ -719,7 +813,7 @@ function SubmitButton({ uiSchema }) {
       color: "primary",
       ...submitButtonProps,
       ...otherMuiProps,
-      ...muiSlotProps?.submitButton,
+      ...submitButton,
       children: submitText
     }
   ) });
@@ -735,17 +829,33 @@ var import_jsx_runtime16 = require("react/jsx-runtime");
 function TitleField(props) {
   const { id, title, optionalDataControl, uiSchema } = props;
   const uiOptions = (0, import_utils14.getUiOptions)(uiSchema);
-  const { rjsfSlotProps: muiSlotProps } = getMuiProps(uiOptions);
-  let heading = /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_Typography4.default, { variant: "h5", ...muiSlotProps?.titleTypography, children: title });
+  const {
+    rjsfSlotProps: {
+      titleBox,
+      titleDivider,
+      titleTypography,
+      titleGridContainer,
+      titleGridItem,
+      titleOptionalDataGridItem
+    } = {}
+  } = getMuiProps(uiOptions);
+  let heading = /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_Typography4.default, { variant: "h5", ...titleTypography, children: title });
   if (optionalDataControl) {
-    heading = /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_Grid5.default, { container: true, spacing: 0, ...muiSlotProps?.titleGridContainer, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_Grid5.default, { size: "grow", ...muiSlotProps?.titleGridItem, children: heading }),
-      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_Grid5.default, { justifyContent: "flex-end", ...muiSlotProps?.titleOptionalDataGridItem, children: optionalDataControl })
+    heading = /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_Grid5.default, { container: true, spacing: 0, ...titleGridContainer, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_Grid5.default, { size: "grow", ...titleGridItem, children: heading }),
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+        import_Grid5.default,
+        {
+          ...titleOptionalDataGridItem,
+          sx: computeSxProps({ justifyContent: "flex-end" }, titleOptionalDataGridItem),
+          children: optionalDataControl
+        }
+      )
     ] });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_Box6.default, { id, mb: 1, mt: 1, ...muiSlotProps?.titleBox, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_Box6.default, { id, ...titleBox, sx: computeSxProps({ mb: 1, mt: 1 }, titleBox), children: [
     heading,
-    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_Divider.default, { ...muiSlotProps?.titleDivider })
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_Divider.default, { ...titleDivider })
   ] });
 }
 
@@ -782,21 +892,19 @@ function WrapIfAdditionalTemplate(props) {
     fontWeight: "bold"
   };
   const uiOptions = (0, import_utils15.getUiOptions)(uiSchema);
-  const { rjsfSlotProps } = getMuiProps(uiOptions);
-  const muiSlotProps = rjsfSlotProps;
+  const { rjsfSlotProps: { wrapGridContainer, wrapKeyGridItem, wrapChildrenGridItem, wrapRemoveButtonGridItem } = {} } = getMuiProps(uiOptions);
   if (!additional) {
     return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: classNames, style, children });
   }
-  const { wrapGridContainer, wrapKeyGridItem, wrapChildrenGridItem, wrapRemoveButtonGridItem } = muiSlotProps || {};
   return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
     import_Grid6.default,
     {
       container: true,
-      alignItems: "flex-start",
       spacing: 2,
       className: classNames,
       style,
       ...wrapGridContainer,
+      sx: computeSxProps({ alignItems: "flex-start" }, wrapGridContainer),
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_Grid6.default, { size: 5.5, ...wrapKeyGridItem, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
           import_TextField2.default,
@@ -814,7 +922,7 @@ function WrapIfAdditionalTemplate(props) {
           label
         ) }),
         /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_Grid6.default, { size: 5.5, ...wrapChildrenGridItem, children }),
-        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_Grid6.default, { sx: { mt: 1.5 }, ...wrapRemoveButtonGridItem, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_Grid6.default, { ...wrapRemoveButtonGridItem, sx: computeSxProps({ mt: 1.5 }, wrapRemoveButtonGridItem), children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
           RemoveButton2,
           {
             id: (0, import_utils15.buttonId)(id, "remove"),