add-slots

sai6855 · Nov 27, 2024 · 8c5161e · 8c5161e
1 parent 418e888
commit 8c5161e
Show file tree

Hide file tree

Showing 2 changed files with 58 additions and 8 deletions.
diff --git a/packages/mui-material/src/ListItemText/ListItemText.d.ts b/packages/mui-material/src/ListItemText/ListItemText.d.ts
@@ -3,11 +3,36 @@ import { SxProps } from '@mui/system';
 import { InternalStandardProps as StandardProps, Theme } from '..';
 import { TypographyProps } from '../Typography';
 import { ListItemTextClasses } from './listItemTextClasses';
+import { CreateSlotsAndSlotProps, SlotProps } from '../utils/types';
+
+export interface ListItemTextSlots {
+  /**
+   * The component that renders the main content.
+   * @default span
+   */
+  primary?: React.ElementType;
+  /**
+   * The component that renders the main content.
+   * @default p
+   */
+  secondary?: React.ElementType;
+}
+
+export type ListItemTextSlotsAndSlotProps = CreateSlotsAndSlotProps<
+  ListItemTextSlots,
+  {
+    primary: SlotProps<React.ElementType<HTMLSpanElement>, {}, ListItemTextOwnerState>;
+    secondary: SlotProps<React.ElementType<HTMLParagraphElement>, {}, ListItemTextOwnerState>;
+  }
+>;
+
+export interface ListItemTextOwnerState extends ListItemTextProps {}
 
 export interface ListItemTextProps<
   PrimaryTypographyComponent extends React.ElementType = 'span',
   SecondaryTypographyComponent extends React.ElementType = 'p',
-> extends StandardProps<React.HTMLAttributes<HTMLDivElement>> {
+> extends StandardProps<React.HTMLAttributes<HTMLDivElement>>,
+    ListItemTextSlotsAndSlotProps {
   /**
    * Alias for the `primary` prop.
    */
@@ -37,6 +62,7 @@ export interface ListItemTextProps<
   /**
    * These props will be forwarded to the primary typography component
    * (as long as disableTypography is not `true`).
+   * @deprecated Use `slotProps.primary` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
   primaryTypographyProps?: TypographyProps<
     PrimaryTypographyComponent,
@@ -49,6 +75,7 @@ export interface ListItemTextProps<
   /**
    * These props will be forwarded to the secondary typography component
    * (as long as disableTypography is not `true`).
+   * @deprecated Use `slotProps.secondary` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
   secondaryTypographyProps?: TypographyProps<
     SecondaryTypographyComponent,

diff --git a/packages/mui-material/src/ListItemText/ListItemText.js b/packages/mui-material/src/ListItemText/ListItemText.js
@@ -8,6 +8,7 @@ import ListContext from '../List/ListContext';
 import { styled } from '../zero-styled';
 import { useDefaultProps } from '../DefaultPropsProvider';
 import listItemTextClasses, { getListItemTextUtilityClass } from './listItemTextClasses';
+import useSlot from '../utils/useSlot';
 
 const useUtilityClasses = (ownerState) => {
   const { classes, inset, primary, secondary, dense } = ownerState;
@@ -75,6 +76,8 @@ const ListItemText = React.forwardRef(function ListItemText(inProps, ref) {
     primaryTypographyProps,
     secondary: secondaryProp,
     secondaryTypographyProps,
+    slots = {},
+    slotProps = {},
     ...other
   } = props;
   const { dense } = React.useContext(ListContext);
@@ -93,29 +96,49 @@ const ListItemText = React.forwardRef(function ListItemText(inProps, ref) {
 
   const classes = useUtilityClasses(ownerState);
 
+  const externalForwardedProps = {
+    slots,
+    slotProps: {
+      primary: primaryTypographyProps,
+      secondary: secondaryTypographyProps,
+      ...slotProps,
+    },
+  };
+
+  const [PrimarySlot, primarySlotProps] = useSlot('primary', {
+    elementType: Typography,
+    externalForwardedProps,
+    ownerState,
+  });
+  const [SecondarySlot, secondarySlotProps] = useSlot('secondary', {
+    elementType: Typography,
+    externalForwardedProps,
+    ownerState,
+  });
+
   if (primary != null && primary.type !== Typography && !disableTypography) {
     primary = (
-      <Typography
+      <PrimarySlot
         variant={dense ? 'body2' : 'body1'}
         className={classes.primary}
-        component={primaryTypographyProps?.variant ? undefined : 'span'}
-        {...primaryTypographyProps}
+        component={primarySlotProps?.variant ? undefined : 'span'}
+        {...primarySlotProps}
       >
         {primary}
-      </Typography>
+      </PrimarySlot>
     );
   }
 
   if (secondary != null && secondary.type !== Typography && !disableTypography) {
     secondary = (
-      <Typography
+      <SecondarySlot
         variant="body2"
         className={classes.secondary}
         color="textSecondary"
-        {...secondaryTypographyProps}
+        {...secondarySlotProps}
       >
         {secondary}
-      </Typography>
+      </SecondarySlot>
     );
   }