[Option][base] Drop component prop (mui#37052)

binh1298 · May 17, 2023 · b72e867 · b72e867
1 parent 82c5f90
commit b72e867
Show file tree

Hide file tree

Showing 6 changed files with 40 additions and 38 deletions.
diff --git a/docs/pages/base/api/option.json b/docs/pages/base/api/option.json
@@ -1,7 +1,6 @@
 {
   "props": {
     "value": { "type": { "name": "any" }, "required": true },
-    "component": { "type": { "name": "elementType" } },
     "disabled": { "type": { "name": "bool" }, "default": "false" },
     "label": { "type": { "name": "string" } },
     "slotProps": {

diff --git a/docs/translations/api-docs-base/option/option.json b/docs/translations/api-docs-base/option/option.json
@@ -1,7 +1,6 @@
 {
   "componentDescription": "An unstyled option to be used within a Select.",
   "propDescriptions": {
-    "component": "The component used for the root node. Either a string to use a HTML element or a component.",
     "disabled": "If <code>true</code>, the option will be disabled.",
     "label": "A text representation of the option&#39;s content. Used for keyboard text navigation matching.",
     "slotProps": "The props used for each slot inside the Option.",

diff --git a/packages/mui-base/src/Option/Option.spec.tsx b/packages/mui-base/src/Option/Option.spec.tsx
@@ -24,21 +24,43 @@ const polymorphicComponentTest = () => {
       {/* @ts-expect-error */}
       <Option invalidProp={0} />
 
-      <Option value={1} component="a" href="#" />
+      <Option<number, 'a'>
+        value={1}
+        slots={{
+          root: 'a',
+        }}
+        href="#"
+      />
 
-      <Option value={1} component={CustomComponent} stringProp="test" numberProp={0} />
+      <Option<number, typeof CustomComponent>
+        value={1}
+        slots={{
+          root: CustomComponent,
+        }}
+        stringProp="test"
+        numberProp={0}
+      />
       {/* @ts-expect-error */}
-      <Option value={1} component={CustomComponent} />
+      <Option<number, typeof CustomComponent>
+        value={1}
+        slots={{
+          root: CustomComponent,
+        }}
+      />
 
-      <Option
+      <Option<number, 'button'>
         value={1}
-        component="button"
+        slots={{
+          root: 'button',
+        }}
         onClick={(e: React.MouseEvent<HTMLButtonElement>) => e.currentTarget.checkValidity()}
       />
 
       <Option<number, 'button'>
         value={1}
-        component="button"
+        slots={{
+          root: 'button',
+        }}
         ref={(elem) => {
           expectType<HTMLButtonElement | null, typeof elem>(elem);
         }}

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

diff --git a/packages/mui-base/src/Option/Option.tsx b/packages/mui-base/src/Option/Option.tsx
@@ -25,18 +25,9 @@ const Option = React.forwardRef(function Option<
   OptionValue,
   RootComponentType extends React.ElementType,
 >(props: OptionProps<OptionValue, RootComponentType>, forwardedRef: React.ForwardedRef<Element>) {
-  const {
-    children,
-    component,
-    disabled = false,
-    label,
-    slotProps = {},
-    slots = {},
-    value,
-    ...other
-  } = props;
+  const { children, disabled = false, label, slotProps = {}, slots = {}, value, ...other } = props;
 
-  const Root = component || slots.root || 'li';
+  const Root = slots.root ?? 'li';
 
   const optionRef = React.useRef<HTMLElement>(null);
   const combinedRef = useForkRef(optionRef, forwardedRef);
@@ -84,11 +75,6 @@ Option.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,
   /**
    * If `true`, the option will be disabled.
    * @default false

diff --git a/packages/mui-base/src/Option/Option.types.ts b/packages/mui-base/src/Option/Option.types.ts
@@ -1,7 +1,7 @@
 import * as React from 'react';
-import { DefaultComponentProps, OverrideProps, Simplify } from '@mui/types';
+import { Simplify } from '@mui/types';
 import { UseOptionRootSlotProps } from '../useOption';
-import { SlotComponentProps } from '../utils';
+import { PolymorphicProps, SlotComponentProps } from '../utils';
 
 export interface OptionRootSlotPropsOverrides {}
 
@@ -57,22 +57,17 @@ export interface OptionTypeMap<
 export type OptionProps<
   OptionValue,
   RootComponentType extends React.ElementType = OptionTypeMap<OptionValue>['defaultComponent'],
-> = OverrideProps<OptionTypeMap<OptionValue, {}, RootComponentType>, RootComponentType> & {
-  component?: RootComponentType;
-};
+> = PolymorphicProps<OptionTypeMap<OptionValue, {}, RootComponentType>, RootComponentType>;
 
 export interface OptionType {
-  <OptionValue, RootComponentType extends React.ElementType>(
-    props: {
-      /**
-       * The component used for the root node.
-       * Either a string to use a HTML element or a component.
-       */
-      component: RootComponentType;
-    } & OverrideProps<OptionTypeMap<OptionValue>, RootComponentType>,
+  <
+    OptionValue,
+    RootComponentType extends React.ElementType = OptionTypeMap<OptionValue>['defaultComponent'],
+  >(
+    props: PolymorphicProps<OptionTypeMap<OptionValue>, RootComponentType>,
   ): JSX.Element | null;
-  <OptionValue>(props: DefaultComponentProps<OptionTypeMap<OptionValue>>): JSX.Element | null;
   propTypes?: any;
+  displayName?: string | undefined;
 }
 
 export type OptionOwnerState<OptionValue> = Simplify<
-Original file line number
+Diff line change
@@ Expand Up / @@ -61,6 +61,7 @@ describe('<Option />', () => { @@
           },
         },
         skip: [
+          'componentProp',
           'reactTestRenderer', // Need to be wrapped in SelectContext
         ],
       }));
@@ Expand Down @@