[Popper][base] Drop component prop

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

@@ -51,6 +51,30 @@ By default, clicking outside the popper does not hide it.
 If you need this behavior, you can use the [Click-Away Listener](/base/react-click-away-listener/) component.
 :::
 
+### Custom structure
+
+```jsx
+<Popper slots={{ root: 'span' }} />
+```
+
+:::info
+The `slots` prop is available on all non-utility Base components.
+See [Overriding component structure](/base/guides/overriding-component-structure/) for full details.
+
+#### Usage with TypeScript
+
+In TypeScript, you can specify the custom component type used in the `slots.root` as a generic to the unstyled component. This way, you can safely provide the custom component's props directly on the component:
+
+```tsx
+<Popper<typeof CustomComponent> slots={{ root: CustomComponent }} customProp />
+```
+
+The same applies for props specific to custom primitive elements:
+
+```tsx
+<Popper<'button'> slots={{ root: 'button' }} onClick={() => {}} />
+```
+
 ## Customization
 
 ### Placement

docs/pages/material-ui/api/popper.json

@@ -8,6 +8,7 @@
       }
     },
     "children": { "type": { "name": "union", "description": "node<br>&#124;&nbsp;func" } },
+    "component": { "type": { "name": "elementType" } },
     "components": {
       "type": { "name": "shape", "description": "{ Root?: elementType }" },
       "default": "{}"

docs/translations/api-docs-base/popper/popper.json

@@ -3,6 +3,7 @@
   "propDescriptions": {
     "anchorEl": "An HTML element, <a href=\"https://popper.js.org/docs/v2/virtual-elements/\">virtualElement</a>, or a function that returns either. It&#39;s used to set the position of the popper. The return value will passed as the reference object of the Popper instance.",
     "children": "Popper render function or node.",
+    "component": "The component used for the root node. Either a string to use a HTML element or a component.",
     "container": "An HTML element or function that returns one. The <code>container</code> will have the portal children appended to it.<br>By default, it uses the body of the top-level document object, so it&#39;s simply <code>document.body</code> most of the time.",
     "direction": "Direction of the text.",
     "disablePortal": "The <code>children</code> will be under the DOM hierarchy of the parent component.",

packages/mui-base/src/Menu/Menu.tsx

@@ -152,7 +152,7 @@ Menu.propTypes /* remove-proptypes */ = {
    * The props used for each slot inside the Menu.
    * @default {}
    */
-  slotProps: PropTypes.shape({
+  slotProps: PropTypes /* @typescript-to-proptypes-ignore */.shape({
     listbox: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
     root: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
   }),

packages/mui-base/src/Menu/Menu.types.ts

@@ -42,7 +42,7 @@ export interface MenuOwnProps {
    * @default {}
    */
   slotProps?: {
-    root?: SlotComponentProps<typeof Popper, MenuRootSlotPropsOverrides, MenuOwnerState>;
+    root?: SlotComponentProps<React.FC<PopperProps>, MenuRootSlotPropsOverrides, MenuOwnerState>;
     listbox?: SlotComponentProps<'ul', MenuListboxSlotPropsOverrides, MenuOwnerState>;
   };
   /**

packages/mui-base/src/Popper/Popper.spec.tsx

@@ -26,21 +26,43 @@ const polymorphicComponentTest = () => {
       {/* @ts-expect-error */}
       <Popper invalidProp={0} open />
 
-      <Popper open component="a" href="#" />
+      <Popper<'a'>
+        open
+        slots={{
+          root: 'a',
+        }}
+        href="#"
+      />
 
-      <Popper open component={CustomComponent} stringProp="test" numberProp={0} />
+      <Popper<typeof CustomComponent>
+        open
+        slots={{
+          root: CustomComponent,
+        }}
+        stringProp="test"
+        numberProp={0}
+      />
       {/* @ts-expect-error */}
-      <Popper open component={CustomComponent} />
+      <Popper<typeof CustomComponent>
+        open
+        slots={{
+          root: CustomComponent,
+        }}
+      />
 
-      <Popper
+      <Popper<'button'>
         open
-        component="button"
+        slots={{
+          root: 'button',
+        }}
         onClick={(e: React.MouseEvent<HTMLButtonElement>) => e.currentTarget.checkValidity()}
       />
 
       <Popper<'button'>
         open
-        component="button"
+        slots={{
+          root: 'button',
+        }}
         ref={(elem) => {
           expectType<HTMLButtonElement | null, typeof elem>(elem);
         }}

packages/mui-base/src/Popper/Popper.test.tsx

@@ -21,6 +21,7 @@ describe('<Popper />', () => {
     skip: [
       // https://github.com/facebook/react/issues/11565
       'reactTestRenderer',
+      'componentProp',
     ],
     slots: {
       root: {
@@ -34,10 +35,12 @@ describe('<Popper />', () => {
       <div ref={ref} data-testid="foo" id={ownerState.id} />
     ));
     render(
-      <Popper
+      <Popper<typeof CustomComponent>
         anchorEl={() => document.createElement('div')}
         open
-        component={CustomComponent}
+        slots={{
+          root: CustomComponent,
+        }}
         ownerState={{ id: 'id' }}
       />,
     );

packages/mui-base/src/Popper/Popper.tsx

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { OverridableComponent } from '@mui/types';
 import {
   chainPropTypes,
   HTMLElementType,
@@ -13,7 +12,7 @@ import PropTypes from 'prop-types';
 import composeClasses from '../composeClasses';
 import Portal from '../Portal';
 import { getPopperUtilityClass } from './popperClasses';
-import { useSlotProps, WithOptionalOwnerState } from '../utils';
+import { PolymorphicComponent, useSlotProps, WithOptionalOwnerState } from '../utils';
 import {
   PopperPlacementType,
   PopperTooltipProps,
@@ -81,7 +80,6 @@ const PopperTooltip = React.forwardRef(function PopperTooltip<
   const {
     anchorEl,
     children,
-    component,
     direction,
     disablePortal,
     modifiers,
@@ -216,7 +214,7 @@ const PopperTooltip = React.forwardRef(function PopperTooltip<
   }
 
   const classes = useUtilityClasses();
-  const Root = component ?? slots.root ?? 'div';
+  const Root = slots.root ?? 'div';
 
   const rootProps: WithOptionalOwnerState<PopperRootSlotProps> = useSlotProps({
     elementType: Root,
@@ -233,7 +231,7 @@ const PopperTooltip = React.forwardRef(function PopperTooltip<
   return (
     <Root {...rootProps}>{typeof children === 'function' ? children(childProps) : children}</Root>
   );
-}) as OverridableComponent<PopperTooltipTypeMap>;
+}) as PolymorphicComponent<PopperTooltipTypeMap>;
 
 /**
  * Poppers rely on the 3rd party library [Popper.js](https://popper.js.org/docs/v2/) for positioning.
@@ -335,7 +333,7 @@ const Popper = React.forwardRef(function Popper<RootComponentType extends React.
       </PopperTooltip>
     </Portal>
   );
-}) as OverridableComponent<PopperTypeMap>;
+}) as PolymorphicComponent<PopperTypeMap>;
 
 Popper.propTypes /* remove-proptypes */ = {
   // ----------------------------- Warning --------------------------------
@@ -533,10 +531,6 @@ Popper.propTypes /* remove-proptypes */ = {
   slots: PropTypes.shape({
     root: PropTypes.elementType,
   }),
-  /**
-   * @ignore
-   */
-  style: PropTypes.object,
   /**
    * Help supporting a react-transition-group/Transition component.
    * @default false

packages/mui-base/src/Popper/Popper.types.ts

@@ -1,8 +1,7 @@
 import * as React from 'react';
-import { OverrideProps } from '@mui/types';
 import { Instance, Options, OptionsGeneric, VirtualElement } from '@popperjs/core';
 import { PortalProps } from '../Portal';
-import { SlotComponentProps } from '../utils';
+import { PolymorphicProps, SlotComponentProps } from '../utils';
 
 export type PopperPlacementType = Options['placement'];
 
@@ -124,9 +123,7 @@ export interface PopperTypeMap<
 
 export type PopperProps<
   RootComponentType extends React.ElementType = PopperTypeMap['defaultComponent'],
-> = OverrideProps<PopperTypeMap<{}, RootComponentType>, RootComponentType> & {
-  component?: RootComponentType;
-};
+> = PolymorphicProps<PopperTypeMap<{}, RootComponentType>, RootComponentType>;
 
 export type PopperTooltipOwnProps = Omit<
   PopperOwnProps,
@@ -145,9 +142,7 @@ export interface PopperTooltipTypeMap<
 
 export type PopperTooltipProps<
   RootComponentType extends React.ElementType = PopperTooltipTypeMap['defaultComponent'],
-> = OverrideProps<PopperTooltipTypeMap<{}, RootComponentType>, RootComponentType> & {
-  component?: RootComponentType;
-};
+> = PolymorphicProps<PopperTooltipTypeMap<{}, RootComponentType>, RootComponentType>;
 
 export interface PopperRootSlotProps {
   className?: string;

packages/mui-base/src/Select/Select.tsx

@@ -336,7 +336,7 @@ Select.propTypes /* remove-proptypes */ = {
    * The props used for each slot inside the Input.
    * @default {}
    */
-  slotProps: PropTypes.shape({
+  slotProps: PropTypes /* @typescript-to-proptypes-ignore */.shape({
     listbox: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
     popper: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
     root: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),

packages/mui-base/src/Select/Select.types.ts

@@ -100,7 +100,7 @@ export interface SelectOwnProps<OptionValue extends {}, Multiple extends boolean
       SelectOwnerState<OptionValue, Multiple>
     >;
     popper?: SlotComponentProps<
-      typeof Popper,
+      React.FC<PopperProps>,
       SelectPopperSlotPropsOverrides,
       SelectOwnerState<OptionValue, Multiple>
     >;

packages/mui-joy/src/Menu/Menu.tsx

@@ -237,7 +237,7 @@ Menu.propTypes /* remove-proptypes */ = {
    * The component used for the root node.
    * Either a string to use a HTML element or a component.
    */
-  component: PropTypes /* @typescript-to-proptypes-ignore */.elementType,
+  component: PropTypes.elementType,
   /**
    * The `children` will be under the DOM hierarchy of the parent component.
    * @default false

packages/mui-joy/src/Menu/MenuProps.ts

@@ -40,6 +40,11 @@ export interface MenuTypeMap<P = {}, D extends React.ElementType = 'ul'> {
      * @default 'neutral'
      */
     color?: OverridableStringUnion<ColorPaletteProp, MenuPropsColorOverrides>;
+    /**
+     * The component used for the root node.
+     * Either a string to use a HTML element or a component.
+     */
+    component?: React.ElementType;
     /**
      * If `true`, the children with an implicit color prop invert their colors to match the component's variant and color.
      * @default false

packages/mui-joy/src/utils/useSlot.test.tsx

@@ -163,7 +163,9 @@ describe('useSlot', () => {
           anchorEl: () => document.createElement('div'),
         },
         internalForwardedProps: {
-          component: ItemRoot,
+          slots: {
+            root: ItemRoot,
+          },
         },
       });
       return <SlotRoot {...rootProps} />;
@@ -237,7 +239,9 @@ describe('useSlot', () => {
           anchorEl: () => document.createElement('div'),
         },
         internalForwardedProps: {
-          component: ItemListbox,
+          slots: {
+            root: ItemListbox,
+          },
         },
       });
       const [SlotOption, optionProps] = useSlot('option', {

packages/mui-material/src/Popper/Popper.tsx

@@ -121,10 +121,6 @@ Popper.propTypes /* remove-proptypes */ = {
     PropTypes.node,
     PropTypes.func,
   ]),
-  /**
-   * @ignore
-   */
-  component: PropTypes /* @typescript-to-proptypes-ignore */.elementType,
   /**
    * The components used for each slot inside the Popper.
    * Either a string to use a HTML element or a component.