@rjsf/mui 6.4.1 → 6.5.0

package/src/SubmitButton/SubmitButton.tsx

@@ -1,6 +1,26 @@
-import Box from '@mui/material/Box';
-import Button from '@mui/material/Button';
-import { getSubmitButtonOptions, FormContextType, RJSFSchema, StrictRJSFSchema, SubmitButtonProps } from '@rjsf/utils';
+import Box, { BoxProps } from '@mui/material/Box';
+import Button, { ButtonProps } from '@mui/material/Button';
+import {
+  getSubmitButtonOptions,
+  GenericObjectType,
+  FormContextType,
+  RJSFSchema,
+  StrictRJSFSchema,
+  SubmitButtonProps,
+  getUiOptions,
+} from '@rjsf/utils';
+import { getMuiProps } from '../util';
+
+/** Properties available for the `rjsfSlotProps` target of the SubmitButton. */
+export interface SubmitButtonMuiProps extends GenericObjectType {
+  /** RJSF-specific slot props for targeting child elements of the SubmitButton. */
+  rjsfSlotProps?: {
+    /** Props applied to the `Box` wrapper. */
+    submitBox?: BoxProps;
+    /** Props applied to the `Button` element. */
+    submitButton?: ButtonProps;
+  };
+}
 
 /** The `SubmitButton` renders a button that represent the `Submit` action on a form
  */
@@ -13,9 +33,20 @@ export default function SubmitButton<
   if (norender) {
     return null;
   }
+
+  const uiOptions = getUiOptions<T, S, F>(uiSchema);
+  const { rjsfSlotProps: muiSlotProps, ...otherMuiProps } = getMuiProps<T, S, F, SubmitButtonMuiProps>(uiOptions);
+
   return (
-    <Box marginTop={3}>
-      <Button type='submit' variant='contained' color='primary' {...submitButtonProps}>
+    <Box marginTop={3} {...muiSlotProps?.submitBox}>
+      <Button
+        type='submit'
+        variant='contained'
+        color='primary'
+        {...submitButtonProps}
+        {...otherMuiProps}
+        {...muiSlotProps?.submitButton}
+      >
         {submitText}
       </Button>
     </Box>

package/src/TitleField/TitleField.tsx

@@ -1,31 +1,69 @@
-import Box from '@mui/material/Box';
-import Divider from '@mui/material/Divider';
-import Grid from '@mui/material/Grid';
-import Typography from '@mui/material/Typography';
-import { FormContextType, TitleFieldProps, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
+import Box, { BoxProps } from '@mui/material/Box';
+import Divider, { DividerProps } from '@mui/material/Divider';
+import Grid, { GridProps } from '@mui/material/Grid';
+import Typography, { TypographyProps } from '@mui/material/Typography';
+import {
+  FormContextType,
+  GenericObjectType,
+  TitleFieldProps,
+  RJSFSchema,
+  StrictRJSFSchema,
+  getUiOptions,
+} from '@rjsf/utils';
+import { getMuiProps } from '../util';
+
+/** Properties available for the `rjsfSlotProps` target of the TitleField. */
+export interface TitleFieldMuiProps extends GenericObjectType {
+  /** RJSF-specific slot props for targeting child elements of the TitleField. */
+  rjsfSlotProps?: {
+    /** Props applied to the `Box` wrapper. */
+    titleBox?: BoxProps;
+    /** Props applied to the `Divider` element. */
+    titleDivider?: DividerProps;
+    /** Props applied to the `Typography` element used for the title. */
+    titleTypography?: TypographyProps;
+    /** Props applied to the `Grid` container used when `optionalDataControl` is present. */
+    titleGridContainer?: GridProps;
+    /** Props applied to the `Grid` item containing the title. */
+    titleGridItem?: GridProps;
+    /** Props applied to the `Grid` item containing the `optionalDataControl`. */
+    titleOptionalDataGridItem?: GridProps;
+  };
+}
 
 /** The `TitleField` is the template to use to render the title of a field
  *
  * @param props - The `TitleFieldProps` for this component
  */
-export default function TitleField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>({
-  id,
-  title,
-  optionalDataControl,
-}: TitleFieldProps<T, S, F>) {
-  let heading = <Typography variant='h5'>{title}</Typography>;
+export default function TitleField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
+  props: TitleFieldProps<T, S, F>,
+) {
+  const { id, title, optionalDataControl, uiSchema } = props;
+
+  const uiOptions = getUiOptions<T, S, F>(uiSchema);
+  const { rjsfSlotProps: muiSlotProps } = getMuiProps<T, S, F, TitleFieldMuiProps>(uiOptions);
+
+  let heading = (
+    <Typography variant='h5' {...muiSlotProps?.titleTypography}>
+      {title}
+    </Typography>
+  );
   if (optionalDataControl) {
     heading = (
-      <Grid container={true} spacing={0}>
-        <Grid size='grow'>{heading}</Grid>
-        <Grid justifyContent='flex-end'>{optionalDataControl}</Grid>
+      <Grid container={true} spacing={0} {...muiSlotProps?.titleGridContainer}>
+        <Grid size='grow' {...muiSlotProps?.titleGridItem}>
+          {heading}
+        </Grid>
+        <Grid justifyContent='flex-end' {...muiSlotProps?.titleOptionalDataGridItem}>
+          {optionalDataControl}
+        </Grid>
       </Grid>
     );
   }
   return (
-    <Box id={id} mb={1} mt={1}>
+    <Box id={id} mb={1} mt={1} {...muiSlotProps?.titleBox}>
       {heading}
-      <Divider />
+      <Divider {...muiSlotProps?.titleDivider} />
     </Box>
   );
 }

package/src/WrapIfAdditionalTemplate/WrapIfAdditionalTemplate.tsx

@@ -1,15 +1,32 @@
 import { CSSProperties } from 'react';
-import Grid from '@mui/material/Grid';
+import Grid, { GridProps } from '@mui/material/Grid';
 import TextField from '@mui/material/TextField';
 import {
   ADDITIONAL_PROPERTY_FLAG,
+  GenericObjectType,
   buttonId,
   FormContextType,
   RJSFSchema,
   StrictRJSFSchema,
   TranslatableString,
   WrapIfAdditionalTemplateProps,
+  getUiOptions,
 } from '@rjsf/utils';
+import { getMuiProps } from '../util';
+/** Properties available for the `rjsfSlotProps` target of the WrapIfAdditionalTemplate. */
+export interface WrapIfAdditionalTemplateMuiProps extends GenericObjectType {
+  /** RJSF-specific slot props for targeting child elements of the WrapIfAdditionalTemplate. */
+  rjsfSlotProps?: {
+    /** Props applied to the outermost `Grid` container. */
+    wrapGridContainer?: GridProps;
+    /** Props applied to the `Grid` item containing the key TextField. */
+    wrapKeyGridItem?: GridProps;
+    /** Props applied to the `Grid` item containing the field children. */
+    wrapChildrenGridItem?: GridProps;
+    /** Props applied to the `Grid` item containing the remove button. */
+    wrapRemoveButtonGridItem?: GridProps;
+  };
+}
 
 /** The `WrapIfAdditional` component is used by the `FieldTemplate` to rename, or remove properties that are
  * part of an `additionalProperties` part of a schema.
@@ -49,6 +66,10 @@ export default function WrapIfAdditionalTemplate<
     fontWeight: 'bold',
   };
 
+  const uiOptions = getUiOptions<T, S, F>(uiSchema);
+  const { rjsfSlotProps } = getMuiProps<T, S, F, WrapIfAdditionalTemplateMuiProps>(uiOptions);
+  const muiSlotProps = rjsfSlotProps;
+
   if (!additional) {
     return (
       <div className={classNames} style={style}>
@@ -57,10 +78,21 @@ export default function WrapIfAdditionalTemplate<
     );
   }
 
+  const { wrapGridContainer, wrapKeyGridItem, wrapChildrenGridItem, wrapRemoveButtonGridItem } = muiSlotProps || {};
+
   return (
-    <Grid container key={`${id}-key`} alignItems='flex-start' spacing={2} className={classNames} style={style}>
-      <Grid size={5.5}>
+    <Grid
+      container
+      key={`${id}-key`}
+      alignItems='flex-start'
+      spacing={2}
+      className={classNames}
+      style={style}
+      {...wrapGridContainer}
+    >
+      <Grid size={5.5} {...wrapKeyGridItem}>
         <TextField
+          key={label}
           fullWidth={true}
           required={required}
           label={displayLabel ? keyLabel : undefined}
@@ -72,8 +104,10 @@ export default function WrapIfAdditionalTemplate<
           type='text'
         />
       </Grid>
-      <Grid size={5.5}>{children}</Grid>
-      <Grid sx={{ mt: 1.5 }}>
+      <Grid size={5.5} {...wrapChildrenGridItem}>
+        {children}
+      </Grid>
+      <Grid sx={{ mt: 1.5 }} {...wrapRemoveButtonGridItem}>
         <RemoveButton
           id={buttonId(id, 'remove')}
           className='rjsf-object-property-remove'

package/src/util.ts

@@ -0,0 +1,30 @@
+import { FormContextType, RJSFSchema, StrictRJSFSchema, UIOptionsType, GenericObjectType } from '@rjsf/utils';
+
+/**
+ * Extract props meant for MUI components from the `options` field of the `uiSchema`.
+ * @param {UIOptionsType} options - The options from the uiSchema
+ * @param {string[]} [propsToFilter] - An optional allowlist of props to return (used by button/icon components)
+ * @param {boolean} [rjsfSlotPropsOnly] - If true, returns only `rjsfSlotProps`, preventing root-level prop bleeding
+ * @returns {P}
+ */
+export function getMuiProps<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any,
+  P extends GenericObjectType = GenericObjectType,
+>(options: UIOptionsType<T, S, F>, propsToFilter?: string[], rjsfSlotPropsOnly?: boolean): P {
+  const muiProps = (options?.mui as P) || ({} as P);
+  if (rjsfSlotPropsOnly) {
+    const { rjsfSlotProps } = muiProps as any;
+    return { rjsfSlotProps } as unknown as P;
+  }
+  if (propsToFilter) {
+    return Object.keys(muiProps)
+      .filter((key) => propsToFilter.includes(key))
+      .reduce((obj, key) => {
+        obj[key as keyof P] = muiProps[key as keyof P];
+        return obj;
+      }, {} as P);
+  }
+  return muiProps;
+}