[material-ui] Use interface instead of type for props

[siriwatknp]

fixes #40427

Material UI Popper

build before: PopperProps usage is replaced by its value with React.ElementType<...>

export type PopperProps = Omit<BasePopperProps, 'direction'> & {
    /**
     * The component used for the root node.
     * Either a string to use a HTML element or a component.
     */
    component?: React.ElementType;
    /**
     * The components used for each slot inside the Popper.
     * Either a string to use a HTML element or a component.
     * @default {}
     */
    components?: {
        Root?: React.ElementType;
    };
    /**
     * The props used for each slot inside the Popper.
     * @default {}
     */
    componentsProps?: BasePopperProps['slotProps'];
    /**
     * The system prop that allows defining system overrides as well as additional CSS styles.
     */
    sx?: SxProps<Theme>;
};
declare const Popper: React.ForwardRefExoticComponent<Omit<BasePopperProps, "direction"> & {
    /**
     * The component used for the root node.
     * Either a string to use a HTML element or a component.
     */
    component?: React.ElementType<any, keyof React.JSX.IntrinsicElements> | undefined;
    /**
     * The components used for each slot inside the Popper.
     * Either a string to use a HTML element or a component.
     * @default {}
     */
    components?: {
        Root?: React.ElementType<any, keyof React.JSX.IntrinsicElements> | undefined;
    } | undefined;
    /**
     * The props used for each slot inside the Popper.
     * @default {}
     */
    componentsProps?: BasePopperProps['slotProps'];
    /**
     * The system prop that allows defining system overrides as well as additional CSS styles.
     */
    sx?: SxProps<Theme> | undefined;
} & React.RefAttributes<HTMLDivElement>>;

build after: PopperProps is used, no usage of React.ElementType<...>.

export interface PopperProps extends Omit<BasePopperProps, 'direction'> {
    /**
     * The component used for the root node.
     * Either a string to use a HTML element or a component.
     */
    component?: React.ElementType;
    /**
     * The components used for each slot inside the Popper.
     * Either a string to use a HTML element or a component.
     * @default {}
     */
    components?: {
        Root?: React.ElementType;
    };
    /**
     * The props used for each slot inside the Popper.
     * @default {}
     */
    componentsProps?: BasePopperProps['slotProps'];
    /**
     * The system prop that allows defining system overrides as well as additional CSS styles.
     */
    sx?: SxProps<Theme>;
}
declare const Popper: React.ForwardRefExoticComponent<PopperProps & React.RefAttributes<HTMLDivElement>>;
export default Popper;

Base UI Popup

Before:

declare const Popup: React.ForwardRefExoticComponent<Omit<PopupProps<React.ElementType<any, keyof React.JSX.IntrinsicElements>>, "ref"> & React.RefAttributes<Element>>;

After:

declare const Popup: PolymorphicComponent<PopupTypeMap<{}, "div">>;

---

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

[mui-bot]

Netlify deploy preview

https://deploy-preview-41500--material-ui.netlify.app/

Bundle size report

No bundle size changes (Toolpad)
No bundle size changes

Generated by 🚫 dangerJS against 06bd85e

[Janpot]

Thanks for looking into it. I suppose there is no straightforward way to add a test for this, right?

[siriwatknp]

Thanks for looking into it. I suppose there is no straightforward way to add a test for this, right?

I guess there is but it would require some amount of effort. The idea is to use the build and run tsc against both React v17 and v18.

[Janpot]

The idea is to use the build and run tsc against both React v17 and v18.

Yep, that doesn't fall under what I meant with "straightforward" 😄