[Tooltip] Deprecate *Component and *Props for v6

[siriwatknp]

A continuation from #42120

• I have followed (at least) the PR section of the contributing guide.

[mui-bot]

Netlify deploy preview

• docs/data/material/migration/migrating-from-deprecated-apis/migrating-from-deprecated-apis.md

SpeedDialAction: parsed: +0.75% , gzip: +0.66%
Tooltip: parsed: +0.87% , gzip: +0.73%
@material-ui/core: parsed: +0.08% , gzip: +0.06%
@material-ui/lab: parsed: +0.14% , gzip: +0.09%

Bundle size report

Details of bundle changes (Toolpad)
Details of bundle changes

Generated by 🚫 dangerJS against 2fcd5a2

[DiegoAndai]

Hey! I gave it another review

Sorry I didn't catch these in the previous review 😓 my bad

[DiegoAndai]

🚀 ⭐

[arishoham]

This pr broke the types on our tooltip wrapper:

import { Box, BoxProps, Tooltip as MuiTooltip, TooltipProps as MuiTooltipsProps } from '@mui/material';

export type TooltipProps = MuiTooltipsProps & { p?: BoxProps['p'] };

export const Tooltip = (props: TooltipProps) => {
  const { children, p = 4, title, sx: sxProps, slotProps = {} } = props;
  const { popper, ...slotPropsRest } = slotProps;

  return (
    <MuiTooltip
      {...props}
      title={<Box p={p}>{title}</Box>}
      sx={sxProps}
      slotProps={{
        ...slotPropsRest,
        popper: {
          ...popper,
          sx: popper?.sx,
          			^-- error
        },
      }}
    >
      {children}
    </MuiTooltip>
  );
};

Property 'sx' does not exist on type 'SlotProps<ElementType<PopperProps, keyof IntrinsicElements>, TooltipPopperSlotPropsOverrides, TooltipOwnerState>'.

@siriwatknp would you be able to help me fix this? switching slotProps for componentsProps works for now (but is deprecated)

[DiegoAndai]

Hey @arishoham, thanks for reaching out!

This is happening because slotProps can be functions, and now the updated Tooltip supports this.

You can support slotProps as functions following this example:

import {
  Box,
  BoxProps,
  Tooltip as MuiTooltip,
  TooltipProps as MuiTooltipsProps,
  TooltipOwnerState as MuiTooltipOwnerState,
} from '@mui/material';

export type TooltipProps = MuiTooltipsProps & { p?: BoxProps['p'] };

export const Tooltip = (props: TooltipProps) => {
  const { children, p = 4, title, sx: sxProps, slotProps = {} } = props;
  const { popper, ...slotPropsRest } = slotProps;

  return (
    <MuiTooltip
      {...props}
      title={<Box p={p}>{title}</Box>}
      sx={sxProps}
      slotProps={{
        ...slotPropsRest,
        popper: (ownerState: MuiTooltipOwnerState) => {
          const resolvedPopperProps = typeof popper === 'function' ? popper(ownerState) : popper;
          return {
            ...resolvedPopperProps,
            sx: resolvedPopperProps?.sx,
          };
        },
      }}
    >
      {children}
    </MuiTooltip>
  );
};

Let me know if this works for you.