[Popper][base] Drop component prop

[nicolas-ot]

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

BREAKING CHANGE

part of #36679
It will be covered by codemod, see #36831

For Base UI components, the component prop value should be moved to slots.root:

<Popper
-  component="span"
+  slots={{ root: "span" }}
 />

If using TypeScript, you should add the custom component type as a generic on the TabsList component.

-<Popper
+<Popper<typeof CustomComponent>
   slots={{ root: CustomComponent }}
   customProp
 />

[mui-bot]

Netlify deploy preview

• docs/data/base/components/popper/popper.md

Bundle size report

Bundle size will be reported once CircleCI build #515804 finishes.

Generated by 🚫 dangerJS against 68c3f82

[nicolas-ot]

@michaldudak this change seems to make yarn proptypes change the proptypes of Menu.tsx and Select.tsx (both use Popper as default Root component) like in the picture. Any idea what might causes this?

[hbjORbj]

You can add /* @typescript-to-proptypes-ignore */ before running yarn proptypes to prevent that change

  container: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([
    HTMLElementType,
    PropTypes.func,
  ]),

[nicolas-ot]

Thank you!

ps: would be cool if you can add this PR to #36679

[hbjORbj]

In fact, ignore my comment above, that's not how we should handle it

[nicolas-ot]

have you found another way to deal with the problem?

[nicolas-ot]

one problem left unsolved, running yarn docs:typescript:formatted changes Button.proptypes like the image below. Adding /* @typescript-to-proptypes-ignore */ doesn't seem to solve the issue. Will try to fix in the following days.

[hbjORbj]

Suggested change

	> = PolymorphicProps<PopperTypeMap<{}, RootComponentType>, RootComponentType> & {
	component?: RootComponentType;
	};
	> = PolymorphicProps<PopperTypeMap<{}, RootComponentType>, RootComponentType>;

[nicolas-ot]

this Props also describe Popper from mui-material. Since we don't remove component prop from that Popper, this component props can't be removed here. Typescript will give error on the Popper.tsx (packages/mui-material/src/Popper/Popper.tsx)

...or is that not a problem?

[hbjORbj]

Suggested change

	> = PolymorphicProps<PopperTooltipTypeMap<{}, RootComponentType>, RootComponentType> & {
	component?: RootComponentType;
	};
	> = PolymorphicProps<PopperTooltipTypeMap<{}, RootComponentType>, RootComponentType>;

[hbjORbj]

why are you doing this change?

[nicolas-ot]

that is a test that use base Popper as describeb here elementType: Popper as unknown as 'ul',. I believe internalForwardedProps is a prop that is forwarded to the Popper, hence the change.

[hbjORbj]

Thanks a lot for your contribution. @nicolas-ot We need to support dropping component prop throught all Base UI components in today's release, and as you know, Popper is the only remaining component left. Because Base UI Popper is used in some of Joy UI and Material components, we need to do a little more work for it.. Because of the time constraint we have, I will close this PR. Again, thanks for your hard work.