From 78a377b85253c5fa58d9397c7592bf24ddae47b5 Mon Sep 17 00:00:00 2001
From: Benny Joo <sldisek783@gmail.com>
Date: Thu, 27 Apr 2023 10:38:27 +0100
Subject: [PATCH 1/4] [Option][base] Drop component prop

---
 docs/pages/base/api/option.json               |  1 -
 .../api-docs-base/option/option.json          |  1 -
 packages/mui-base/src/Option/Option.spec.tsx  | 34 +++++++++++++++----
 packages/mui-base/src/Option/Option.test.tsx  |  1 +
 packages/mui-base/src/Option/Option.tsx       | 18 ++--------
 packages/mui-base/src/Option/Option.types.ts  | 16 +++------
 6 files changed, 35 insertions(+), 36 deletions(-)

diff --git a/docs/pages/base/api/option.json b/docs/pages/base/api/option.json
index b88094c4f9055f..3c5bfc442c44e2 100644
--- 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
index 9242960c42375e..934b7f4c1c0387 100644
--- 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
index c8e7aeaa33a537..ea49a8871a5782 100644
--- 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
index 16fa74a8dfac3a..f65273850d9279 100644
--- 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
index 7ecb1ef8091662..08329e81ddf542 100644
--- 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
index c87e9f911d39be..7d8d8f94d50d96 100644
--- 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 { DefaultComponentProps, Simplify } from '@mui/types';
 import { UseOptionRootSlotProps } from '../useOption';
-import { SlotComponentProps } from '../utils';
+import { PolymorphicProps, SlotComponentProps } from '../utils';
 
 export interface OptionRootSlotPropsOverrides {}
 
@@ -57,19 +57,11 @@ 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>,
+    props: PolymorphicProps<OptionTypeMap<OptionValue>, RootComponentType>,
   ): JSX.Element | null;
   <OptionValue>(props: DefaultComponentProps<OptionTypeMap<OptionValue>>): JSX.Element | null;
   propTypes?: any;

From 16deb0f1ae18f72c7f9d872e9240f41306970006 Mon Sep 17 00:00:00 2001
From: Benny Joo <sldisek783@gmail.com>
Date: Fri, 28 Apr 2023 17:09:28 +0100
Subject: [PATCH 2/4] address comment

---
 packages/mui-base/src/Option/Option.types.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/mui-base/src/Option/Option.types.ts b/packages/mui-base/src/Option/Option.types.ts
index 7d8d8f94d50d96..b8ca4978e41ab2 100644
--- a/packages/mui-base/src/Option/Option.types.ts
+++ b/packages/mui-base/src/Option/Option.types.ts
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { DefaultComponentProps, Simplify } from '@mui/types';
+import { Simplify } from '@mui/types';
 import { UseOptionRootSlotProps } from '../useOption';
 import { PolymorphicProps, SlotComponentProps } from '../utils';
 
@@ -63,8 +63,8 @@ export interface OptionType {
   <OptionValue, RootComponentType extends React.ElementType>(
     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<

From c0827c4e7c7cafa8b6f5db1b6227195e4ab0e9dd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Dudak?= <michal@dudak.me>
Date: Sat, 29 Apr 2023 22:00:40 +0200
Subject: [PATCH 3/4] Code style

---
 packages/mui-base/src/Option/Option.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/mui-base/src/Option/Option.tsx b/packages/mui-base/src/Option/Option.tsx
index 08329e81ddf542..b699bd184e658a 100644
--- a/packages/mui-base/src/Option/Option.tsx
+++ b/packages/mui-base/src/Option/Option.tsx
@@ -27,7 +27,7 @@ const Option = React.forwardRef(function Option<
 >(props: OptionProps<OptionValue, RootComponentType>, forwardedRef: React.ForwardedRef<Element>) {
   const { children, disabled = false, label, slotProps = {}, slots = {}, value, ...other } = props;
 
-  const Root = slots.root || 'li';
+  const Root = slots.root ?? 'li';
 
   const optionRef = React.useRef<HTMLElement>(null);
   const combinedRef = useForkRef(optionRef, forwardedRef);

From 7c71aeed859d2974f595df6d0040f6d79ae2ca9b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Dudak?= <michal@dudak.me>
Date: Sat, 29 Apr 2023 22:14:46 +0200
Subject: [PATCH 4/4] Add default value to the generic parameter

---
 packages/mui-base/src/Option/Option.types.ts | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/mui-base/src/Option/Option.types.ts b/packages/mui-base/src/Option/Option.types.ts
index b8ca4978e41ab2..b0ee3028d4babf 100644
--- a/packages/mui-base/src/Option/Option.types.ts
+++ b/packages/mui-base/src/Option/Option.types.ts
@@ -60,7 +60,10 @@ export type OptionProps<
 > = PolymorphicProps<OptionTypeMap<OptionValue, {}, RootComponentType>, RootComponentType>;
 
 export interface OptionType {
-  <OptionValue, RootComponentType extends React.ElementType>(
+  <
+    OptionValue,
+    RootComponentType extends React.ElementType = OptionTypeMap<OptionValue>['defaultComponent'],
+  >(
     props: PolymorphicProps<OptionTypeMap<OptionValue>, RootComponentType>,
   ): JSX.Element | null;
   propTypes?: any;