[MenuItem][base] Drop component prop

mui · Apr 26, 2023 · cb3fea7 · cb3fea7
1 parent a5d1893
commit cb3fea7
Show file tree

Hide file tree

Showing 5 changed files with 31 additions and 18 deletions.
diff --git a/docs/pages/base/api/menu-item.json b/docs/pages/base/api/menu-item.json
@@ -1,6 +1,5 @@
 {
   "props": {
-    "component": { "type": { "name": "elementType" } },
     "label": { "type": { "name": "string" } },
     "slotProps": {
       "type": { "name": "shape", "description": "{ root?: func<br>&#124;&nbsp;object }" },

diff --git a/docs/translations/api-docs-base/menu-item/menu-item.json b/docs/translations/api-docs-base/menu-item/menu-item.json
@@ -1,7 +1,6 @@
 {
   "componentDescription": "",
   "propDescriptions": {
-    "component": "The component used for the root node. Either a string to use a HTML element or a component.",
     "label": "A text representation of the menu item&#39;s content. Used for keyboard text navigation matching.",
     "slotProps": "The props used for each slot inside the MenuItem.",
     "slots": "The components used for each slot inside the MenuItem. Either a string to use a HTML element or a component. See <a href=\"#slots\">Slots API</a> below for more details."

diff --git a/packages/mui-base/src/MenuItem/MenuItem.spec.tsx b/packages/mui-base/src/MenuItem/MenuItem.spec.tsx
@@ -13,19 +13,39 @@ const polymorphicComponentTest = () => {
       {/* @ts-expect-error */}
       <MenuItem invalidProp={0} />
 
-      <MenuItem component="a" href="#" />
+      <MenuItem<'a'>
+        slots={{
+          root: 'a',
+        }}
+        href="#"
+      />
 
-      <MenuItem component={CustomComponent} stringProp="test" numberProp={0} />
-      {/* @ts-expect-error */}
-      <MenuItem component={CustomComponent} />
+      <MenuItem<typeof CustomComponent>
+        slots={{
+          root: CustomComponent,
+        }}
+        stringProp="test"
+        numberProp={0}
+      />
 
-      <MenuItem
-        component="button"
+      {/* @ts-expect-error required props not specified */}
+      <MenuItem<typeof CustomComponent>
+        slots={{
+          root: CustomComponent,
+        }}
+      />
+
+      <MenuItem<'button'>
+        slots={{
+          root: 'button',
+        }}
         onClick={(e: React.MouseEvent<HTMLButtonElement>) => e.currentTarget.checkValidity()}
       />
 
       <MenuItem<'button'>
-        component="button"
+        slots={{
+          root: 'button',
+        }}
         ref={(elem) => {
           expectType<HTMLButtonElement | null, typeof elem>(elem);
         }}

diff --git a/packages/mui-base/src/MenuItem/MenuItem.test.tsx b/packages/mui-base/src/MenuItem/MenuItem.test.tsx
@@ -45,6 +45,7 @@ describe('<MenuItem />', () => {
       },
     },
     skip: [
+      'componentProp',
       'reactTestRenderer', // Need to be wrapped in MenuContext
     ],
   }));

diff --git a/packages/mui-base/src/MenuItem/MenuItem.tsx b/packages/mui-base/src/MenuItem/MenuItem.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { OverridableComponent } from '@mui/types';
+import { PolymorphicComponent } from '../utils/PolymorphicComponent';
 import { MenuItemOwnerState, MenuItemProps, MenuItemTypeMap } from './MenuItem.types';
 import { getMenuItemUtilityClass } from './menuItemClasses';
 import useMenuItem from '../useMenuItem';
@@ -35,7 +35,6 @@ const MenuItem = React.forwardRef(function MenuItem<RootComponentType extends Re
   const {
     children,
     disabled: disabledProp = false,
-    component,
     label,
     slotProps = {},
     slots = {},
@@ -52,7 +51,7 @@ const MenuItem = React.forwardRef(function MenuItem<RootComponentType extends Re
 
   const classes = useUtilityClasses(ownerState);
 
-  const Root = component ?? slots.root ?? 'li';
+  const Root = slots.root ?? 'li';
   const rootProps = useSlotProps({
     elementType: Root,
     getSlotProps: getRootProps,
@@ -63,7 +62,7 @@ const MenuItem = React.forwardRef(function MenuItem<RootComponentType extends Re
   });
 
   return <Root {...rootProps}>{children}</Root>;
-}) as OverridableComponent<MenuItemTypeMap>;
+}) as PolymorphicComponent<MenuItemTypeMap>;
 
 MenuItem.propTypes /* remove-proptypes */ = {
   // ----------------------------- Warning --------------------------------
@@ -74,11 +73,6 @@ MenuItem.propTypes /* remove-proptypes */ = {
    * @ignore
    */
   children: PropTypes.node,
-  /**
-   * The component used for the root node.
-   * Either a string to use a HTML element or a component.
-   */
-  component: PropTypes.elementType,
   /**
    * @ignore
    */