[base] Override the types of slotProps per slot

[hbjORbj]

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

Closes #34906

This PR goes with option 1 described in the issue above

1. Have a separate type for each slot override (see [POC] slot overrides: interface per slot #35662)

export interface BadgeUnstyledRootSlotPropsOverrides {}
export interface BadgeUnstyledBadgeSlotPropsOverrides {}

export interface BadgeUnstyledOwnProps {
  // ...
  slotProps?: {
    root?: SlotComponentProps<
      'span',
      BadgeUnstyledRootSlotPropsOverrides,
      BadgeUnstyledOwnerState
    >;
    badge?: SlotComponentProps<
      'span',
      BadgeUnstyledBadgeSlotPropsOverrides,
      BadgeUnstyledOwnerState
    >;
  };
}

This could be slightly easier to use for developers. They would augment the required interface and the changes will apply only to one slot.
It would be slightly more cumbersome to implement, though, and would create many new types (up to 8 in case of SliderUnstyled).

---

Note to be added to CHANGELOG in the upcoming release

Breaking Changes for MUI Base:

• The way of overriding the types of slotProps prop has changed. Developers can now override them per slot.
• The naming convention of ${ComponentName}ComponentsPropsOverrides is replaced with ${ComponentName}${SlotName}SlotPropsOverrides.

 declare module '@mui/base/SwitchUnstyled' {
-  interface SwitchUnstyledComponentsPropsOverrides {
+  interface SwitchUnstyledRootSlotPropsOverrides {
     'data-a'?: string;
+  }
+
+  interface SwitchUnstyledInputSlotPropsOverrides {
     'data-b'?: string;
+  }
+
+  interface SwitchUnstyledThumbSlotPropsOverrides {
     'data-c'?: string;
+  }
+
+  interface SwitchUnstyledTrackSlotPropsOverrides {
     'data-d'?: string;
   }
 }

[mui-bot]

Netlify deploy preview

No updates.

Bundle size report

No bundle size changes

Generated by 🚫 dangerJS against 40d5b49

[michaldudak]

Looks good! As this is a breaking change, could you please add a short description of changes that need to be done by developers after updating to this version?

[hbjORbj]

Sure, I will try writing a Codemod script as well for this breaking change.

[michaldudak]

The codemod could be tricky (if not impossible) to get right. It's hard to know which slots a developer wants to override (unless you create overrides for all of them, for example copying the shape of InputUnstyledComponentsPropsOverrides to both InputUnstyledRootSlotOverrides and InputUnstyledInputSlotOverrides)

[hbjORbj]

(unless you create overrides for all of them, for example copying the shape of InputUnstyledComponentsPropsOverrides to both InputUnstyledRootSlotOverrides and InputUnstyledInputSlotOverrides)

Yes, this was my idea. So developers can clean it up afterwards. I thought it's still useful as it reduces lots of manual work for those who have many of these type declarations. Let me know if you think it's not worth the effort.

e.g.,

actual.ts:
declare module '@mui/base/SwitchUnstyled' {
  interface SwitchUnstyledComponentsPropsOverrides {
    'data-a'?: string;
    'data-b'?: string;
    'data-c'?: string;
    'data-d'?: string;
  }
}

to

expected.ts:
declare module '@mui/base/SwitchUnstyled' {
  interface SwitchUnstyledRootSlotOverrides {
    'data-a'?: string;
    'data-b'?: string;
    'data-c'?: string;
    'data-d'?: string;
  }

  interface SwitchUnstyledInputSlotOverrides {
    'data-a'?: string;
    'data-b'?: string;
    'data-c'?: string;
    'data-d'?: string;
  }

  interface SwitchUnstyledThumbSlotOverrides {
    'data-a'?: string;
    'data-b'?: string;
    'data-c'?: string;
    'data-d'?: string;
  }

  interface SwitchUnstyledTrackSlotOverrides {
    'data-a'?: string;
    'data-b'?: string;
    'data-c'?: string;
    'data-d'?: string;
  }
}

Jscodeshift supports something like root.find(j.DeclareInterface) or root.find(j.declareModule), so I thought it parses type declarations, but maybe not, because when I run the code above, it throws a syntax error saying semicolon is missing. I've been trying to figure this out. Do you have any clues?

[michaldudak]

OK, it makes sense as it'll make the code run at least.
As for the error you're seeing - I see a similar one when the babel/eslint-parser is used (https://astexplorer.net/#/gist/ad6d997d4aa84bb76027304d5d23ab79/d86b107bf5fcb06c55c1603b1a808a55cb75af44). Changing the parser to typescript does solve the issue. See if changing jscodeshift config does help.

[hbjORbj]

The codemod's taking way longer than I expected. I will drop it. I reverted codemod-related changes and added a note to the description of the PR, which should be added to the CHANGELOG of the upcoming release.

[michaldudak]

In SelectUnstyled.spec.tsx and MultiSelectUnstyled.spec.tsx there are tests with names containing ComponentsPropsOverrides. Could you rename them as well? Aside from that, it's good to be merged.

[hbjORbj]

Thanks. Done in this commit: Rename some functions in type tests.

[cherniavskii]

Not sure if it's related to this PR, but shouldn't this interface be exported?

We've encountered an issue when upgrading MUI Core packages in mui/mui-x#7905:
https://ci.codesandbox.io/status/mui/mui-x/pr/7905/builds/349844

cmd: 'yarn tsc -b /tmp/fad0ee40/packages/grid/x-data-grid-generator/tsconfig.build.json',
  stdout: '$ /tmp/fad0ee40/node_modules/.bin/tsc -b /tmp/fad0ee40/packages/grid/x-data-grid-generator/tsconfig.build.json\n' +
    `../x-data-grid/src/components/panel/GridPanel.tsx(38,7): error TS4023: Exported variable 'GridPanelRoot' has or is using name 'PopperUnstyledRootSlotPropsOverrides' from external module "/tmp/fad0ee40/node_modules/@mui/base/PopperUnstyled/PopperUnstyled.types" but cannot be named.\n` +

cc @michaldudak

[michaldudak]

Yes, absolutely. Thanks for letting me know. I'll review other cases and fix it right away.