Migrating from 'TransitionProps' to 'slotProps.transition' cause TS type inference error

[destegabry]

Steps to reproduce

1. Working demo (using deprecated "TransitionProps'): https://codesandbox.io/p/sandbox/pedantic-bush-t73799?file=%2Fsrc%2FDemo.tsx
2. Demo showing type issues (using "slotProps"): https://codesandbox.io/p/sandbox/suspicious-bhaskara-tr2ptv?file=%2Fsrc%2FDemo.tsx

Current behavior

I have a very bad TS error in my local VSCode instance:

TS error

 Type '{ onExited: (node: HTMLElement) => void; } | { onExited: (node: HTMLElement) => void; ref?: Ref<HTMLDivElement> | undefined; key?: Key | ... 1 more ... | undefined; ... 277 more ...; sx?: SxProps<...> | undefined; } | ... 69 more ... | { ...; }' is not assignable to type 'SlotProps<ElementType<TransitionProps, keyof IntrinsicElements>, DialogTransitionSlotPropsOverrides, DialogOwnerState> | undefined'.
  Object literal may only specify known properties, and 'onExited' does not exist in type '(Partial<DetailedHTMLProps<ObjectHTMLAttributes<HTMLObjectElement>, HTMLObjectElement>> & SlotCommonProps & DialogTransitionSlotPropsOverrides) | ... 9 more ... | (Partial<...> & ... 1 more ... & DialogTransitionSlotPropsOverrides)'.ts(2322)

Expected behavior

TypeScript shouldn't complain about types if I convert this code:

import Dialog, { type DialogProps } from '@mui/material/Dialog';

export function CustomDialog(props: DialogProps) {
  const { children, TransitionProps, ...dialogProps } = props;
  return (
    <Dialog
      TransitionProps={{
        ...TransitionProps,
        onExited: (node) => {
          console.log('Dialog exited!');
          TransitionProps?.onExited?.(node);
        },
      }}
      {...dialogProps}
    >
      {children}
    </Dialog>
  );
}

To this:

import Dialog, { type DialogProps } from '@mui/material/Dialog';

export function CustomDialog(props: DialogProps) {
  const { children, slotProps, ...dialogProps } = props;
  return (
    <Dialog
      slotProps={{
        ...slotProps,
        transition: {
          ...slotProps?.transition,
          onExited: (node) => {
            console.log('Dialog exited!');
            slotProps?.onExited?.(node);
          },
        },
      }}
      {...dialogProps}
    >
      {children}
    </Dialog>
  );
}

Context

I'm upgrading MUI from v5 to v6.

According to the migration docs TransitionProps are deprecated, so I should move to slotProps:

Your environment

npx @mui/envinfo

  System:
    OS: macOS 15.2
  Binaries:
    Node: 23.7.0 - /opt/homebrew/bin/node
    npm: 10.9.2 - /opt/homebrew/bin/npm
    pnpm: Not Found
  Browsers:
    Chrome: Not Found
    Edge: 127.0.2651.105
    Safari: 18.2
  npmPackages:
    @emotion/react: ^11.14.0 => 11.14.0 
    @emotion/styled: ^11.14.0 => 11.14.0 
    @mui/core-downloads-tracker:  6.4.2 
    @mui/material: ^6.4.2 => 6.4.2 
    @mui/private-theming:  6.4.2 
    @mui/styled-engine:  6.4.2 
    @mui/system:  6.4.2 
    @mui/types:  7.2.21 
    @mui/utils:  6.4.2 
    @mui/x-data-grid:  7.25.0 
    @mui/x-data-grid-premium: ^7.25.0 => 7.25.0 
    @mui/x-data-grid-pro:  7.25.0 
    @mui/x-date-pickers:  7.25.0 
    @mui/x-date-pickers-pro: ^7.25.0 => 7.25.0 
    @mui/x-internals:  7.25.0 
    @mui/x-license:  7.25.0 
    @types/react: ^19.0.8 => 19.0.8 
    react: ^19.0.0 => 19.0.0 
    react-dom: ^19.0.0 => 19.0.0 
    typescript: ^5.7.3 => 5.7.3 

tsconfig.json

 {
  "compilerOptions": {
    "target": "ESNext",
    "useDefineForClassFields": true,
    "lib": [
      "DOM",
      "DOM.Iterable",
      "ESNext"
    ],
    "types": [
      "vite/client",
      "vite-plugin-svgr/client"
    ],
    "allowJs": false,
    "skipLibCheck": true,
    "esModuleInterop": false,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "ESNext",
    "moduleResolution": "Node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",
    "noErrorTruncation": true
  },
  "include": [
    "src",
    "tests"
  ],
  "references": [
    {
      "path": "./tsconfig.node.json"
    }
  ]
}

tsconfig.node.json

 {
  "compilerOptions": {
    "composite": true,
    "module": "ESNext",
    "moduleResolution": "Node",
    "allowSyntheticDefaultImports": true
  },
  "include": ["vite.config.ts"]
}

Search keywords: TransitionProps migration, slotProps transition