[Popper][base] Drop component prop

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/scripts/formattedTSDemos.js

@@ -9,7 +9,11 @@
  * List of demos or folders to ignore when transpiling
  * Example: "app-bar/BottomAppBar.tsx"
  */
-const ignoreList = ['/pages.ts', 'docs/data/joy/getting-started/templates'];
+const ignoreList = [
+  '/pages.ts',
+  'docs/data/joy/getting-started/templates',
+  'docs/data/base/components/select/UnstyledSelectIntroduction.tsx',
+];
 
 const fse = require('fs-extra');
 const path = require('path');

docs/translations/api-docs/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.",
     "components": "The components used for each slot inside the Popper. Either a string to use a HTML element or a component.",
     "componentsProps": "The props used for each slot inside the Popper.",
     "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.",

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

@@ -146,7 +146,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

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import { OverrideProps, Simplify } from '@mui/types';
+import { Simplify } from '@mui/types';
 import Popper, { PopperProps } from '../Popper';
-import { SlotComponentProps } from '../utils';
+import { PolymorphicProps, SlotComponentProps } from '../utils';
 import { UseMenuListboxSlotProps } from '../useMenu';
 import { ListAction } from '../useList';
 
@@ -76,9 +76,7 @@ export interface MenuTypeMap<
 
 export type MenuProps<
   RootComponentType extends React.ElementType = MenuTypeMap['defaultComponent'],
-> = OverrideProps<MenuTypeMap<{}, RootComponentType>, RootComponentType> & {
-  component?: RootComponentType;
-};
+> = PolymorphicProps<MenuTypeMap<{}, RootComponentType>, RootComponentType>;
 
 export type MenuOwnerState = Simplify<
   MenuOwnProps & {

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

@@ -26,21 +26,26 @@ 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
+      <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: {
@@ -37,8 +38,7 @@ describe('<Popper />', () => {
       <Popper
         anchorEl={() => document.createElement('div')}
         open
-        component={CustomComponent}
-        ownerState={{ id: 'id' }}
+        slots={{ root: CustomComponent }}
       />,
     );
 

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

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

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

@@ -6,6 +6,11 @@ import * as React from 'react';
 import { styled, Theme, useThemeProps } from '../styles';
 
 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.
@@ -75,7 +80,6 @@ const Popper = React.forwardRef(function Popper(
   const RootComponent = slots?.root ?? components?.Root;
   const otherProps = {
     anchorEl,
-    component,
     container,
     disablePortal,
     keepMounted,
@@ -89,6 +93,7 @@ const Popper = React.forwardRef(function Popper(
   };
   return (
     <PopperRoot
+      as={component}
       direction={theme?.direction}
       slots={{ root: RootComponent }}
       slotProps={slotProps ?? componentsProps}
@@ -122,9 +127,10 @@ Popper.propTypes /* remove-proptypes */ = {
     PropTypes.func,
   ]),
   /**
-   * @ignore
+   * 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 components used for each slot inside the Popper.
    * Either a string to use a HTML element or a component.