From 80c1f3e820ed450f069bb93e89a62ab9e2ab9c4f Mon Sep 17 00:00:00 2001 From: Benny Joo Date: Fri, 28 Apr 2023 17:37:48 +0100 Subject: [PATCH 01/15] [Popper][base] Drop component prop --- packages/mui-base/src/Menu/Menu.tsx | 2 +- packages/mui-base/src/Popper/Popper.spec.tsx | 15 ++++++++++----- packages/mui-base/src/Popper/Popper.test.tsx | 3 +-- packages/mui-base/src/Popper/Popper.tsx | 14 ++++---------- packages/mui-base/src/Popper/Popper.types.ts | 11 +++-------- packages/mui-joy/src/Menu/Menu.tsx | 2 +- packages/mui-joy/src/Menu/MenuProps.ts | 5 +++++ packages/mui-material/src/Popper/Popper.tsx | 6 ------ 8 files changed, 25 insertions(+), 33 deletions(-) diff --git a/packages/mui-base/src/Menu/Menu.tsx b/packages/mui-base/src/Menu/Menu.tsx index 13bf5156b62582..be2cf8f8e43024 100644 --- a/packages/mui-base/src/Menu/Menu.tsx +++ b/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]), }), diff --git a/packages/mui-base/src/Popper/Popper.spec.tsx b/packages/mui-base/src/Popper/Popper.spec.tsx index 92be9af3c4782f..4b8f363526a1ed 100644 --- a/packages/mui-base/src/Popper/Popper.spec.tsx +++ b/packages/mui-base/src/Popper/Popper.spec.tsx @@ -26,21 +26,26 @@ const polymorphicComponentTest = () => { {/* @ts-expect-error */} - + open slots={{ root: 'a' }} href="#" /> - + + open + slots={{ root: CustomComponent }} + stringProp="test" + numberProp={0} + /> {/* @ts-expect-error */} - open - component="button" + slots={{ root: 'button' }} onClick={(e: React.MouseEvent) => e.currentTarget.checkValidity()} /> open - component="button" + slots={{ root: 'button' }} ref={(elem) => { expectType(elem); }} diff --git a/packages/mui-base/src/Popper/Popper.test.tsx b/packages/mui-base/src/Popper/Popper.test.tsx index 32ba2cb6ad2592..3697eac56de7f8 100644 --- a/packages/mui-base/src/Popper/Popper.test.tsx +++ b/packages/mui-base/src/Popper/Popper.test.tsx @@ -37,8 +37,7 @@ describe('', () => { document.createElement('div')} open - component={CustomComponent} - ownerState={{ id: 'id' }} + slots={{ root: CustomComponent }} />, ); diff --git a/packages/mui-base/src/Popper/Popper.tsx b/packages/mui-base/src/Popper/Popper.tsx index 95208a0e67771d..ced7791f52031f 100644 --- a/packages/mui-base/src/Popper/Popper.tsx +++ b/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 = useSlotProps({ elementType: Root, @@ -233,7 +231,7 @@ const PopperTooltip = React.forwardRef(function PopperTooltip< return ( {typeof children === 'function' ? children(childProps) : children} ); -}) as OverridableComponent; +}) as PolymorphicComponent; /** * 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 ); -}) as OverridableComponent; +}) as PolymorphicComponent; 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 diff --git a/packages/mui-base/src/Popper/Popper.types.ts b/packages/mui-base/src/Popper/Popper.types.ts index 9a7e1df513b8f7..f5c100dea6ce3e 100644 --- a/packages/mui-base/src/Popper/Popper.types.ts +++ b/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, RootComponentType> & { - component?: RootComponentType; -}; +> = PolymorphicProps, RootComponentType>; export type PopperTooltipOwnProps = Omit< PopperOwnProps, @@ -145,9 +142,7 @@ export interface PopperTooltipTypeMap< export type PopperTooltipProps< RootComponentType extends React.ElementType = PopperTooltipTypeMap['defaultComponent'], -> = OverrideProps, RootComponentType> & { - component?: RootComponentType; -}; +> = PolymorphicProps, RootComponentType>; export interface PopperRootSlotProps { className?: string; diff --git a/packages/mui-joy/src/Menu/Menu.tsx b/packages/mui-joy/src/Menu/Menu.tsx index b3f1b534ed9937..9d4691d59fda0e 100644 --- a/packages/mui-joy/src/Menu/Menu.tsx +++ b/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 diff --git a/packages/mui-joy/src/Menu/MenuProps.ts b/packages/mui-joy/src/Menu/MenuProps.ts index 57aab64d26856e..05dd5a0cda9760 100644 --- a/packages/mui-joy/src/Menu/MenuProps.ts +++ b/packages/mui-joy/src/Menu/MenuProps.ts @@ -40,6 +40,11 @@ export interface MenuTypeMap

{ * @default 'neutral' */ color?: OverridableStringUnion; + /** + * 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 diff --git a/packages/mui-material/src/Popper/Popper.tsx b/packages/mui-material/src/Popper/Popper.tsx index 4276a639b10257..a23b90f98090da 100644 --- a/packages/mui-material/src/Popper/Popper.tsx +++ b/packages/mui-material/src/Popper/Popper.tsx @@ -55,7 +55,6 @@ const Popper = React.forwardRef(function Popper( const { anchorEl, - component, components, componentsProps, container, @@ -75,7 +74,6 @@ const Popper = React.forwardRef(function Popper( const RootComponent = slots?.root ?? components?.Root; const otherProps = { anchorEl, - component, container, disablePortal, keepMounted, @@ -121,10 +119,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. From df8f15bb09bb7352224cb6d45d592318a672359f Mon Sep 17 00:00:00 2001 From: Benny Joo Date: Sun, 30 Apr 2023 15:10:26 +0100 Subject: [PATCH 02/15] fix material popper --- docs/pages/material-ui/api/popper.json | 1 + docs/translations/api-docs/popper/popper.json | 1 + packages/mui-material/src/Popper/Popper.tsx | 12 ++++++++++++ 3 files changed, 14 insertions(+) diff --git a/docs/pages/material-ui/api/popper.json b/docs/pages/material-ui/api/popper.json index 37022ca054859a..36b3a8fa00dab3 100644 --- a/docs/pages/material-ui/api/popper.json +++ b/docs/pages/material-ui/api/popper.json @@ -8,6 +8,7 @@ } }, "children": { "type": { "name": "union", "description": "node
| func" } }, + "component": { "type": { "name": "elementType" } }, "components": { "type": { "name": "shape", "description": "{ Root?: elementType }" }, "default": "{}" diff --git a/docs/translations/api-docs/popper/popper.json b/docs/translations/api-docs/popper/popper.json index b6533b390e8cf1..5743b7afdac16c 100644 --- a/docs/translations/api-docs/popper/popper.json +++ b/docs/translations/api-docs/popper/popper.json @@ -3,6 +3,7 @@ "propDescriptions": { "anchorEl": "An HTML element, virtualElement, or a function that returns either. It'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 container will have the portal children appended to it.
By default, it uses the body of the top-level document object, so it's simply document.body most of the time.", diff --git a/packages/mui-material/src/Popper/Popper.tsx b/packages/mui-material/src/Popper/Popper.tsx index a23b90f98090da..93b16040179781 100644 --- a/packages/mui-material/src/Popper/Popper.tsx +++ b/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 & { + /** + * 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. @@ -55,6 +60,7 @@ const Popper = React.forwardRef(function Popper( const { anchorEl, + component, components, componentsProps, container, @@ -74,6 +80,7 @@ const Popper = React.forwardRef(function Popper( const RootComponent = slots?.root ?? components?.Root; const otherProps = { anchorEl, + component, container, disablePortal, keepMounted, @@ -119,6 +126,11 @@ Popper.propTypes /* remove-proptypes */ = { PropTypes.node, PropTypes.func, ]), + /** + * The component used for the root node. + * Either a string to use a HTML element or a component. + */ + component: PropTypes.elementType, /** * The components used for each slot inside the Popper. * Either a string to use a HTML element or a component. From 0b09986736f6faa1149d0a673ad2864a39f75186 Mon Sep 17 00:00:00 2001 From: Benny Joo Date: Sun, 30 Apr 2023 15:22:53 +0100 Subject: [PATCH 03/15] fix menu type --- packages/mui-base/src/Menu/Menu.types.ts | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/packages/mui-base/src/Menu/Menu.types.ts b/packages/mui-base/src/Menu/Menu.types.ts index fa8ccca77518c8..1a48a9074eaaf2 100644 --- a/packages/mui-base/src/Menu/Menu.types.ts +++ b/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, RootComponentType> & { - component?: RootComponentType; -}; +> = PolymorphicProps, RootComponentType>; export type MenuOwnerState = Simplify< MenuOwnProps & { From 62339b5045dd11b5dbc4a8077cda7ef92a7cc0b9 Mon Sep 17 00:00:00 2001 From: Benny Joo Date: Sun, 30 Apr 2023 15:30:02 +0100 Subject: [PATCH 04/15] finalise --- packages/mui-base/src/Menu/Menu.tsx | 2 +- packages/mui-base/src/Menu/Menu.types.ts | 4 ++-- packages/mui-base/src/Select/Select.types.ts | 4 ++-- packages/mui-joy/src/utils/useSlot.test.tsx | 4 ++-- 4 files changed, 7 insertions(+), 7 deletions(-) diff --git a/packages/mui-base/src/Menu/Menu.tsx b/packages/mui-base/src/Menu/Menu.tsx index be2cf8f8e43024..13bf5156b62582 100644 --- a/packages/mui-base/src/Menu/Menu.tsx +++ b/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 /* @typescript-to-proptypes-ignore */.shape({ + slotProps: PropTypes.shape({ listbox: PropTypes.oneOfType([PropTypes.func, PropTypes.object]), root: PropTypes.oneOfType([PropTypes.func, PropTypes.object]), }), diff --git a/packages/mui-base/src/Menu/Menu.types.ts b/packages/mui-base/src/Menu/Menu.types.ts index 1a48a9074eaaf2..a3f02d5b7463a3 100644 --- a/packages/mui-base/src/Menu/Menu.types.ts +++ b/packages/mui-base/src/Menu/Menu.types.ts @@ -1,6 +1,6 @@ import * as React from 'react'; import { Simplify } from '@mui/types'; -import Popper, { PopperProps } from '../Popper'; +import { PopperProps } from '../Popper'; import { PolymorphicProps, SlotComponentProps } from '../utils'; import { UseMenuListboxSlotProps } from '../useMenu'; import { ListAction } from '../useList'; @@ -42,7 +42,7 @@ export interface MenuOwnProps { * @default {} */ slotProps?: { - root?: SlotComponentProps; + root?: SlotComponentProps<'div', MenuRootSlotPropsOverrides, MenuOwnerState>; listbox?: SlotComponentProps<'ul', MenuListboxSlotPropsOverrides, MenuOwnerState>; }; /** diff --git a/packages/mui-base/src/Select/Select.types.ts b/packages/mui-base/src/Select/Select.types.ts index 6df6757d786460..9139e3547ccb35 100644 --- a/packages/mui-base/src/Select/Select.types.ts +++ b/packages/mui-base/src/Select/Select.types.ts @@ -2,7 +2,7 @@ import * as React from 'react'; import { Simplify } from '@mui/types'; import { SelectValue, UseSelectButtonSlotProps, UseSelectListboxSlotProps } from '../useSelect'; import { SelectOption } from '../useOption'; -import Popper, { PopperProps } from '../Popper'; +import { PopperProps } from '../Popper'; import { PolymorphicProps, SlotComponentProps, WithOptionalOwnerState } from '../utils'; export interface SelectRootSlotPropsOverrides {} @@ -100,7 +100,7 @@ export interface SelectOwnProps >; popper?: SlotComponentProps< - typeof Popper, + 'div', SelectPopperSlotPropsOverrides, SelectOwnerState >; diff --git a/packages/mui-joy/src/utils/useSlot.test.tsx b/packages/mui-joy/src/utils/useSlot.test.tsx index 60c9ea2990677b..65feac082c6593 100644 --- a/packages/mui-joy/src/utils/useSlot.test.tsx +++ b/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 ; @@ -237,7 +237,7 @@ describe('useSlot', () => { anchorEl: () => document.createElement('div'), }, internalForwardedProps: { - component: ItemListbox, + slots: { root: ItemListbox }, }, }); const [SlotOption, optionProps] = useSlot('option', { From a9907280ef84c7110c6d5f363c483b6f851f6cee Mon Sep 17 00:00:00 2001 From: Benny Joo Date: Mon, 1 May 2023 09:50:41 +0100 Subject: [PATCH 05/15] Skip componentProp test --- packages/mui-base/src/Popper/Popper.test.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/mui-base/src/Popper/Popper.test.tsx b/packages/mui-base/src/Popper/Popper.test.tsx index 3697eac56de7f8..5d7205871c7f4b 100644 --- a/packages/mui-base/src/Popper/Popper.test.tsx +++ b/packages/mui-base/src/Popper/Popper.test.tsx @@ -21,6 +21,7 @@ describe('', () => { skip: [ // https://github.com/facebook/react/issues/11565 'reactTestRenderer', + 'componentProp', ], slots: { root: { From ecb2979083e31d7f6b2453d835aaba15002ab9b4 Mon Sep 17 00:00:00 2001 From: Benny Joo Date: Mon, 1 May 2023 10:43:25 +0100 Subject: [PATCH 06/15] revert replacing typeof Popper --- packages/mui-base/src/Menu/Menu.types.ts | 3 ++- packages/mui-base/src/Select/Select.types.ts | 3 ++- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/packages/mui-base/src/Menu/Menu.types.ts b/packages/mui-base/src/Menu/Menu.types.ts index a3f02d5b7463a3..c62b16868b625c 100644 --- a/packages/mui-base/src/Menu/Menu.types.ts +++ b/packages/mui-base/src/Menu/Menu.types.ts @@ -4,6 +4,7 @@ import { PopperProps } from '../Popper'; import { PolymorphicProps, SlotComponentProps } from '../utils'; import { UseMenuListboxSlotProps } from '../useMenu'; import { ListAction } from '../useList'; +import Popper from '../Popper/Popper'; export interface MenuRootSlotPropsOverrides {} export interface MenuListboxSlotPropsOverrides {} @@ -42,7 +43,7 @@ export interface MenuOwnProps { * @default {} */ slotProps?: { - root?: SlotComponentProps<'div', MenuRootSlotPropsOverrides, MenuOwnerState>; + root?: SlotComponentProps; listbox?: SlotComponentProps<'ul', MenuListboxSlotPropsOverrides, MenuOwnerState>; }; /** diff --git a/packages/mui-base/src/Select/Select.types.ts b/packages/mui-base/src/Select/Select.types.ts index 9139e3547ccb35..cdf4c90e6fedeb 100644 --- a/packages/mui-base/src/Select/Select.types.ts +++ b/packages/mui-base/src/Select/Select.types.ts @@ -4,6 +4,7 @@ import { SelectValue, UseSelectButtonSlotProps, UseSelectListboxSlotProps } from import { SelectOption } from '../useOption'; import { PopperProps } from '../Popper'; import { PolymorphicProps, SlotComponentProps, WithOptionalOwnerState } from '../utils'; +import Popper from '../Popper/Popper'; export interface SelectRootSlotPropsOverrides {} export interface SelectListboxSlotPropsOverrides {} @@ -100,7 +101,7 @@ export interface SelectOwnProps >; popper?: SlotComponentProps< - 'div', + typeof Popper, SelectPopperSlotPropsOverrides, SelectOwnerState >; From 1644381aa39c7967b6aa8fe451e293410dd1f6a0 Mon Sep 17 00:00:00 2001 From: Benny Joo Date: Mon, 1 May 2023 11:33:10 +0100 Subject: [PATCH 07/15] fix implementation in Material Popper --- packages/mui-material/src/Popper/Popper.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/mui-material/src/Popper/Popper.tsx b/packages/mui-material/src/Popper/Popper.tsx index 93b16040179781..7410aa97a8ae77 100644 --- a/packages/mui-material/src/Popper/Popper.tsx +++ b/packages/mui-material/src/Popper/Popper.tsx @@ -77,10 +77,9 @@ const Popper = React.forwardRef(function Popper( ...other } = props; - const RootComponent = slots?.root ?? components?.Root; + const RootComponent = component ?? slots?.root ?? components?.Root; const otherProps = { anchorEl, - component, container, disablePortal, keepMounted, From 9a3a04e12b049cedffd5d0357d73f19b2a28acca Mon Sep 17 00:00:00 2001 From: Benny Joo Date: Mon, 1 May 2023 11:43:14 +0100 Subject: [PATCH 08/15] update menu / select api and proptypes --- docs/pages/base/api/menu.json | 2 +- docs/pages/base/api/select.json | 2 +- packages/mui-base/src/Menu/Menu.tsx | 103 +++++++++++++++++++++++- packages/mui-base/src/Select/Select.tsx | 103 +++++++++++++++++++++++- 4 files changed, 206 insertions(+), 4 deletions(-) diff --git a/docs/pages/base/api/menu.json b/docs/pages/base/api/menu.json index ce527b89a2f5a8..c3316f98f172db 100644 --- a/docs/pages/base/api/menu.json +++ b/docs/pages/base/api/menu.json @@ -12,7 +12,7 @@ "slotProps": { "type": { "name": "shape", - "description": "{ listbox?: func
| object, root?: func
| object }" + "description": "{ listbox?: func
| object, root?: func
| { anchorEl?: func
| object, children?: element
| func
| number
| { __@iterator@94: func }
| string
| bool, container?: element
| func, direction?: 'ltr'
| 'rtl', disablePortal?: bool, keepMounted?: bool, modifiers?: Array<{ data?: object, effect?: func, enabled?: bool, fn?: func, name?: any, options?: object, phase?: 'afterMain'
| 'afterRead'
| 'afterWrite'
| 'beforeMain'
| 'beforeRead'
| 'beforeWrite'
| 'main'
| 'read'
| 'write', requires?: Array<string>, requiresIfExists?: Array<string> }>, open?: bool, placement?: 'auto-end'
| 'auto-start'
| 'auto'
| 'bottom-end'
| 'bottom-start'
| 'bottom'
| 'left-end'
| 'left-start'
| 'left'
| 'right-end'
| 'right-start'
| 'right'
| 'top-end'
| 'top-start'
| 'top', popperOptions?: { modifiers?: array, onFirstUpdate?: func, placement?: 'auto-end'
| 'auto-start'
| 'auto'
| 'bottom-end'
| 'bottom-start'
| 'bottom'
| 'left-end'
| 'left-start'
| 'left'
| 'right-end'
| 'right-start'
| 'right'
| 'top-end'
| 'top-start'
| 'top', strategy?: 'absolute'
| 'fixed' }, popperRef?: func
| { current?: object }, slotProps?: { root?: func
| object }, slots?: { root?: elementType }, transition?: bool } }" }, "default": "{}" }, diff --git a/docs/pages/base/api/select.json b/docs/pages/base/api/select.json index e1a504d980046d..74f76b543edcdf 100644 --- a/docs/pages/base/api/select.json +++ b/docs/pages/base/api/select.json @@ -16,7 +16,7 @@ "slotProps": { "type": { "name": "shape", - "description": "{ listbox?: func
| object, popper?: func
| object, root?: func
| object }" + "description": "{ listbox?: func
| object, popper?: func
| { anchorEl?: func
| object, children?: element
| func
| number
| { __@iterator@94: func }
| string
| bool, container?: element
| func, direction?: 'ltr'
| 'rtl', disablePortal?: bool, keepMounted?: bool, modifiers?: Array<{ data?: object, effect?: func, enabled?: bool, fn?: func, name?: any, options?: object, phase?: 'afterMain'
| 'afterRead'
| 'afterWrite'
| 'beforeMain'
| 'beforeRead'
| 'beforeWrite'
| 'main'
| 'read'
| 'write', requires?: Array<string>, requiresIfExists?: Array<string> }>, open?: bool, placement?: 'auto-end'
| 'auto-start'
| 'auto'
| 'bottom-end'
| 'bottom-start'
| 'bottom'
| 'left-end'
| 'left-start'
| 'left'
| 'right-end'
| 'right-start'
| 'right'
| 'top-end'
| 'top-start'
| 'top', popperOptions?: { modifiers?: array, onFirstUpdate?: func, placement?: 'auto-end'
| 'auto-start'
| 'auto'
| 'bottom-end'
| 'bottom-start'
| 'bottom'
| 'left-end'
| 'left-start'
| 'left'
| 'right-end'
| 'right-start'
| 'right'
| 'top-end'
| 'top-start'
| 'top', strategy?: 'absolute'
| 'fixed' }, popperRef?: func
| { current?: object }, slotProps?: { root?: func
| object }, slots?: { root?: elementType }, transition?: bool }, root?: func
| object }" }, "default": "{}" }, diff --git a/packages/mui-base/src/Menu/Menu.tsx b/packages/mui-base/src/Menu/Menu.tsx index 13bf5156b62582..0289383e9fe339 100644 --- a/packages/mui-base/src/Menu/Menu.tsx +++ b/packages/mui-base/src/Menu/Menu.tsx @@ -148,7 +148,108 @@ Menu.propTypes /* remove-proptypes */ = { */ slotProps: PropTypes.shape({ listbox: PropTypes.oneOfType([PropTypes.func, PropTypes.object]), - root: PropTypes.oneOfType([PropTypes.func, PropTypes.object]), + root: PropTypes.oneOfType([ + PropTypes.func, + PropTypes.shape({ + anchorEl: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([ + PropTypes.func, + PropTypes.object, + ]), + children: PropTypes.oneOfType([ + PropTypes.element, + PropTypes.func, + PropTypes.number, + PropTypes.shape({ + '__@iterator@94': PropTypes.func.isRequired, + }), + PropTypes.string, + PropTypes.bool, + ]), + container: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([ + PropTypes.element, + PropTypes.func, + ]), + direction: PropTypes.oneOf(['ltr', 'rtl']), + disablePortal: PropTypes.bool, + keepMounted: PropTypes.bool, + modifiers: PropTypes.arrayOf( + PropTypes.shape({ + data: PropTypes.object, + effect: PropTypes.func, + enabled: PropTypes.bool, + fn: PropTypes.func, + name: PropTypes.any, + options: PropTypes.object, + phase: PropTypes.oneOf([ + 'afterMain', + 'afterRead', + 'afterWrite', + 'beforeMain', + 'beforeRead', + 'beforeWrite', + 'main', + 'read', + 'write', + ]), + requires: PropTypes.arrayOf(PropTypes.string), + requiresIfExists: PropTypes.arrayOf(PropTypes.string), + }), + ), + open: PropTypes.bool, + placement: PropTypes.oneOf([ + 'auto-end', + 'auto-start', + 'auto', + 'bottom-end', + 'bottom-start', + 'bottom', + 'left-end', + 'left-start', + 'left', + 'right-end', + 'right-start', + 'right', + 'top-end', + 'top-start', + 'top', + ]), + popperOptions: PropTypes.shape({ + modifiers: PropTypes.array, + onFirstUpdate: PropTypes.func, + placement: PropTypes.oneOf([ + 'auto-end', + 'auto-start', + 'auto', + 'bottom-end', + 'bottom-start', + 'bottom', + 'left-end', + 'left-start', + 'left', + 'right-end', + 'right-start', + 'right', + 'top-end', + 'top-start', + 'top', + ]), + strategy: PropTypes.oneOf(['absolute', 'fixed']), + }), + popperRef: PropTypes.oneOfType([ + PropTypes.func, + PropTypes.shape({ + current: PropTypes.object, + }), + ]), + slotProps: PropTypes.shape({ + root: PropTypes.oneOfType([PropTypes.func, PropTypes.object]), + }), + slots: PropTypes.shape({ + root: PropTypes.elementType, + }), + transition: PropTypes.bool, + }), + ]), }), /** * The components used for each slot inside the Menu. diff --git a/packages/mui-base/src/Select/Select.tsx b/packages/mui-base/src/Select/Select.tsx index 8fdf9b4a3c55f8..da51409b98bb07 100644 --- a/packages/mui-base/src/Select/Select.tsx +++ b/packages/mui-base/src/Select/Select.tsx @@ -332,7 +332,108 @@ Select.propTypes /* remove-proptypes */ = { */ slotProps: PropTypes.shape({ listbox: PropTypes.oneOfType([PropTypes.func, PropTypes.object]), - popper: PropTypes.oneOfType([PropTypes.func, PropTypes.object]), + popper: PropTypes.oneOfType([ + PropTypes.func, + PropTypes.shape({ + anchorEl: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([ + PropTypes.func, + PropTypes.object, + ]), + children: PropTypes.oneOfType([ + PropTypes.element, + PropTypes.func, + PropTypes.number, + PropTypes.shape({ + '__@iterator@94': PropTypes.func.isRequired, + }), + PropTypes.string, + PropTypes.bool, + ]), + container: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([ + PropTypes.element, + PropTypes.func, + ]), + direction: PropTypes.oneOf(['ltr', 'rtl']), + disablePortal: PropTypes.bool, + keepMounted: PropTypes.bool, + modifiers: PropTypes.arrayOf( + PropTypes.shape({ + data: PropTypes.object, + effect: PropTypes.func, + enabled: PropTypes.bool, + fn: PropTypes.func, + name: PropTypes.any, + options: PropTypes.object, + phase: PropTypes.oneOf([ + 'afterMain', + 'afterRead', + 'afterWrite', + 'beforeMain', + 'beforeRead', + 'beforeWrite', + 'main', + 'read', + 'write', + ]), + requires: PropTypes.arrayOf(PropTypes.string), + requiresIfExists: PropTypes.arrayOf(PropTypes.string), + }), + ), + open: PropTypes.bool, + placement: PropTypes.oneOf([ + 'auto-end', + 'auto-start', + 'auto', + 'bottom-end', + 'bottom-start', + 'bottom', + 'left-end', + 'left-start', + 'left', + 'right-end', + 'right-start', + 'right', + 'top-end', + 'top-start', + 'top', + ]), + popperOptions: PropTypes.shape({ + modifiers: PropTypes.array, + onFirstUpdate: PropTypes.func, + placement: PropTypes.oneOf([ + 'auto-end', + 'auto-start', + 'auto', + 'bottom-end', + 'bottom-start', + 'bottom', + 'left-end', + 'left-start', + 'left', + 'right-end', + 'right-start', + 'right', + 'top-end', + 'top-start', + 'top', + ]), + strategy: PropTypes.oneOf(['absolute', 'fixed']), + }), + popperRef: PropTypes.oneOfType([ + PropTypes.func, + PropTypes.shape({ + current: PropTypes.object, + }), + ]), + slotProps: PropTypes.shape({ + root: PropTypes.oneOfType([PropTypes.func, PropTypes.object]), + }), + slots: PropTypes.shape({ + root: PropTypes.elementType, + }), + transition: PropTypes.bool, + }), + ]), root: PropTypes.oneOfType([PropTypes.func, PropTypes.object]), }), /** From 37823c5315c2a528d03878d5ed64c2eaa5eda9fb Mon Sep 17 00:00:00 2001 From: Benny Joo Date: Mon, 1 May 2023 12:13:48 +0100 Subject: [PATCH 09/15] clean import --- packages/mui-base/src/Select/Select.types.ts | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/mui-base/src/Select/Select.types.ts b/packages/mui-base/src/Select/Select.types.ts index cdf4c90e6fedeb..6df6757d786460 100644 --- a/packages/mui-base/src/Select/Select.types.ts +++ b/packages/mui-base/src/Select/Select.types.ts @@ -2,9 +2,8 @@ import * as React from 'react'; import { Simplify } from '@mui/types'; import { SelectValue, UseSelectButtonSlotProps, UseSelectListboxSlotProps } from '../useSelect'; import { SelectOption } from '../useOption'; -import { PopperProps } from '../Popper'; +import Popper, { PopperProps } from '../Popper'; import { PolymorphicProps, SlotComponentProps, WithOptionalOwnerState } from '../utils'; -import Popper from '../Popper/Popper'; export interface SelectRootSlotPropsOverrides {} export interface SelectListboxSlotPropsOverrides {} From c74d98e9b174971d23e5081c33d2cafb3df2d60b Mon Sep 17 00:00:00 2001 From: Benny Joo Date: Mon, 1 May 2023 14:43:39 +0100 Subject: [PATCH 10/15] Ignore UnstyledSelectIntroduction demo for prop type generation --- docs/scripts/formattedTSDemos.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/docs/scripts/formattedTSDemos.js b/docs/scripts/formattedTSDemos.js index 17e2f55f913162..eb1d5ef79267a6 100644 --- a/docs/scripts/formattedTSDemos.js +++ b/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'); From 036907198837b73981ae5e2303c954099f1af7a0 Mon Sep 17 00:00:00 2001 From: Benny Joo Date: Mon, 1 May 2023 14:45:44 +0100 Subject: [PATCH 11/15] fix proptypes for menu / select --- packages/mui-base/src/Menu/Menu.tsx | 102 +----------------------- packages/mui-base/src/Select/Select.tsx | 102 +----------------------- 2 files changed, 4 insertions(+), 200 deletions(-) diff --git a/packages/mui-base/src/Menu/Menu.tsx b/packages/mui-base/src/Menu/Menu.tsx index 0289383e9fe339..81ad1bbed7e59c 100644 --- a/packages/mui-base/src/Menu/Menu.tsx +++ b/packages/mui-base/src/Menu/Menu.tsx @@ -148,107 +148,9 @@ Menu.propTypes /* remove-proptypes */ = { */ slotProps: PropTypes.shape({ listbox: PropTypes.oneOfType([PropTypes.func, PropTypes.object]), - root: PropTypes.oneOfType([ + root: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([ PropTypes.func, - PropTypes.shape({ - anchorEl: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([ - PropTypes.func, - PropTypes.object, - ]), - children: PropTypes.oneOfType([ - PropTypes.element, - PropTypes.func, - PropTypes.number, - PropTypes.shape({ - '__@iterator@94': PropTypes.func.isRequired, - }), - PropTypes.string, - PropTypes.bool, - ]), - container: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([ - PropTypes.element, - PropTypes.func, - ]), - direction: PropTypes.oneOf(['ltr', 'rtl']), - disablePortal: PropTypes.bool, - keepMounted: PropTypes.bool, - modifiers: PropTypes.arrayOf( - PropTypes.shape({ - data: PropTypes.object, - effect: PropTypes.func, - enabled: PropTypes.bool, - fn: PropTypes.func, - name: PropTypes.any, - options: PropTypes.object, - phase: PropTypes.oneOf([ - 'afterMain', - 'afterRead', - 'afterWrite', - 'beforeMain', - 'beforeRead', - 'beforeWrite', - 'main', - 'read', - 'write', - ]), - requires: PropTypes.arrayOf(PropTypes.string), - requiresIfExists: PropTypes.arrayOf(PropTypes.string), - }), - ), - open: PropTypes.bool, - placement: PropTypes.oneOf([ - 'auto-end', - 'auto-start', - 'auto', - 'bottom-end', - 'bottom-start', - 'bottom', - 'left-end', - 'left-start', - 'left', - 'right-end', - 'right-start', - 'right', - 'top-end', - 'top-start', - 'top', - ]), - popperOptions: PropTypes.shape({ - modifiers: PropTypes.array, - onFirstUpdate: PropTypes.func, - placement: PropTypes.oneOf([ - 'auto-end', - 'auto-start', - 'auto', - 'bottom-end', - 'bottom-start', - 'bottom', - 'left-end', - 'left-start', - 'left', - 'right-end', - 'right-start', - 'right', - 'top-end', - 'top-start', - 'top', - ]), - strategy: PropTypes.oneOf(['absolute', 'fixed']), - }), - popperRef: PropTypes.oneOfType([ - PropTypes.func, - PropTypes.shape({ - current: PropTypes.object, - }), - ]), - slotProps: PropTypes.shape({ - root: PropTypes.oneOfType([PropTypes.func, PropTypes.object]), - }), - slots: PropTypes.shape({ - root: PropTypes.elementType, - }), - transition: PropTypes.bool, - }), + PropTypes.object, ]), }), /** diff --git a/packages/mui-base/src/Select/Select.tsx b/packages/mui-base/src/Select/Select.tsx index da51409b98bb07..b521d1ed6ccade 100644 --- a/packages/mui-base/src/Select/Select.tsx +++ b/packages/mui-base/src/Select/Select.tsx @@ -332,107 +332,9 @@ Select.propTypes /* remove-proptypes */ = { */ slotProps: PropTypes.shape({ listbox: PropTypes.oneOfType([PropTypes.func, PropTypes.object]), - popper: PropTypes.oneOfType([ + popper: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([ PropTypes.func, - PropTypes.shape({ - anchorEl: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([ - PropTypes.func, - PropTypes.object, - ]), - children: PropTypes.oneOfType([ - PropTypes.element, - PropTypes.func, - PropTypes.number, - PropTypes.shape({ - '__@iterator@94': PropTypes.func.isRequired, - }), - PropTypes.string, - PropTypes.bool, - ]), - container: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([ - PropTypes.element, - PropTypes.func, - ]), - direction: PropTypes.oneOf(['ltr', 'rtl']), - disablePortal: PropTypes.bool, - keepMounted: PropTypes.bool, - modifiers: PropTypes.arrayOf( - PropTypes.shape({ - data: PropTypes.object, - effect: PropTypes.func, - enabled: PropTypes.bool, - fn: PropTypes.func, - name: PropTypes.any, - options: PropTypes.object, - phase: PropTypes.oneOf([ - 'afterMain', - 'afterRead', - 'afterWrite', - 'beforeMain', - 'beforeRead', - 'beforeWrite', - 'main', - 'read', - 'write', - ]), - requires: PropTypes.arrayOf(PropTypes.string), - requiresIfExists: PropTypes.arrayOf(PropTypes.string), - }), - ), - open: PropTypes.bool, - placement: PropTypes.oneOf([ - 'auto-end', - 'auto-start', - 'auto', - 'bottom-end', - 'bottom-start', - 'bottom', - 'left-end', - 'left-start', - 'left', - 'right-end', - 'right-start', - 'right', - 'top-end', - 'top-start', - 'top', - ]), - popperOptions: PropTypes.shape({ - modifiers: PropTypes.array, - onFirstUpdate: PropTypes.func, - placement: PropTypes.oneOf([ - 'auto-end', - 'auto-start', - 'auto', - 'bottom-end', - 'bottom-start', - 'bottom', - 'left-end', - 'left-start', - 'left', - 'right-end', - 'right-start', - 'right', - 'top-end', - 'top-start', - 'top', - ]), - strategy: PropTypes.oneOf(['absolute', 'fixed']), - }), - popperRef: PropTypes.oneOfType([ - PropTypes.func, - PropTypes.shape({ - current: PropTypes.object, - }), - ]), - slotProps: PropTypes.shape({ - root: PropTypes.oneOfType([PropTypes.func, PropTypes.object]), - }), - slots: PropTypes.shape({ - root: PropTypes.elementType, - }), - transition: PropTypes.bool, - }), + PropTypes.object, ]), root: PropTypes.oneOfType([PropTypes.func, PropTypes.object]), }), From 71d32cea4a75b209ad3b52d286ef341320eab4f5 Mon Sep 17 00:00:00 2001 From: Benny Joo Date: Mon, 1 May 2023 14:48:02 +0100 Subject: [PATCH 12/15] update api docs for base menu / select --- docs/pages/base/api/menu.json | 2 +- docs/pages/base/api/select.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/pages/base/api/menu.json b/docs/pages/base/api/menu.json index c3316f98f172db..ce527b89a2f5a8 100644 --- a/docs/pages/base/api/menu.json +++ b/docs/pages/base/api/menu.json @@ -12,7 +12,7 @@ "slotProps": { "type": { "name": "shape", - "description": "{ listbox?: func
| object, root?: func
| { anchorEl?: func
| object, children?: element
| func
| number
| { __@iterator@94: func }
| string
| bool, container?: element
| func, direction?: 'ltr'
| 'rtl', disablePortal?: bool, keepMounted?: bool, modifiers?: Array<{ data?: object, effect?: func, enabled?: bool, fn?: func, name?: any, options?: object, phase?: 'afterMain'
| 'afterRead'
| 'afterWrite'
| 'beforeMain'
| 'beforeRead'
| 'beforeWrite'
| 'main'
| 'read'
| 'write', requires?: Array<string>, requiresIfExists?: Array<string> }>, open?: bool, placement?: 'auto-end'
| 'auto-start'
| 'auto'
| 'bottom-end'
| 'bottom-start'
| 'bottom'
| 'left-end'
| 'left-start'
| 'left'
| 'right-end'
| 'right-start'
| 'right'
| 'top-end'
| 'top-start'
| 'top', popperOptions?: { modifiers?: array, onFirstUpdate?: func, placement?: 'auto-end'
| 'auto-start'
| 'auto'
| 'bottom-end'
| 'bottom-start'
| 'bottom'
| 'left-end'
| 'left-start'
| 'left'
| 'right-end'
| 'right-start'
| 'right'
| 'top-end'
| 'top-start'
| 'top', strategy?: 'absolute'
| 'fixed' }, popperRef?: func
| { current?: object }, slotProps?: { root?: func
| object }, slots?: { root?: elementType }, transition?: bool } }" + "description": "{ listbox?: func
| object, root?: func
| object }" }, "default": "{}" }, diff --git a/docs/pages/base/api/select.json b/docs/pages/base/api/select.json index 74f76b543edcdf..e1a504d980046d 100644 --- a/docs/pages/base/api/select.json +++ b/docs/pages/base/api/select.json @@ -16,7 +16,7 @@ "slotProps": { "type": { "name": "shape", - "description": "{ listbox?: func
| object, popper?: func
| { anchorEl?: func
| object, children?: element
| func
| number
| { __@iterator@94: func }
| string
| bool, container?: element
| func, direction?: 'ltr'
| 'rtl', disablePortal?: bool, keepMounted?: bool, modifiers?: Array<{ data?: object, effect?: func, enabled?: bool, fn?: func, name?: any, options?: object, phase?: 'afterMain'
| 'afterRead'
| 'afterWrite'
| 'beforeMain'
| 'beforeRead'
| 'beforeWrite'
| 'main'
| 'read'
| 'write', requires?: Array<string>, requiresIfExists?: Array<string> }>, open?: bool, placement?: 'auto-end'
| 'auto-start'
| 'auto'
| 'bottom-end'
| 'bottom-start'
| 'bottom'
| 'left-end'
| 'left-start'
| 'left'
| 'right-end'
| 'right-start'
| 'right'
| 'top-end'
| 'top-start'
| 'top', popperOptions?: { modifiers?: array, onFirstUpdate?: func, placement?: 'auto-end'
| 'auto-start'
| 'auto'
| 'bottom-end'
| 'bottom-start'
| 'bottom'
| 'left-end'
| 'left-start'
| 'left'
| 'right-end'
| 'right-start'
| 'right'
| 'top-end'
| 'top-start'
| 'top', strategy?: 'absolute'
| 'fixed' }, popperRef?: func
| { current?: object }, slotProps?: { root?: func
| object }, slots?: { root?: elementType }, transition?: bool }, root?: func
| object }" + "description": "{ listbox?: func
| object, popper?: func
| object, root?: func
| object }" }, "default": "{}" }, From cc9178b0f51bae4165339eec5c5f85ed3bc49660 Mon Sep 17 00:00:00 2001 From: Benny Joo Date: Mon, 1 May 2023 14:48:33 +0100 Subject: [PATCH 13/15] clean import --- packages/mui-base/src/Menu/Menu.types.ts | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/mui-base/src/Menu/Menu.types.ts b/packages/mui-base/src/Menu/Menu.types.ts index c62b16868b625c..1a48a9074eaaf2 100644 --- a/packages/mui-base/src/Menu/Menu.types.ts +++ b/packages/mui-base/src/Menu/Menu.types.ts @@ -1,10 +1,9 @@ import * as React from 'react'; import { Simplify } from '@mui/types'; -import { PopperProps } from '../Popper'; +import Popper, { PopperProps } from '../Popper'; import { PolymorphicProps, SlotComponentProps } from '../utils'; import { UseMenuListboxSlotProps } from '../useMenu'; import { ListAction } from '../useList'; -import Popper from '../Popper/Popper'; export interface MenuRootSlotPropsOverrides {} export interface MenuListboxSlotPropsOverrides {} From e610d0571b804200bfb3a7a7fb0a58e00ba21cc0 Mon Sep 17 00:00:00 2001 From: Benny Joo Date: Mon, 1 May 2023 15:22:02 +0100 Subject: [PATCH 14/15] final --- packages/mui-base/src/Menu/Menu.tsx | 7 ++----- packages/mui-base/src/Select/Select.tsx | 7 ++----- 2 files changed, 4 insertions(+), 10 deletions(-) diff --git a/packages/mui-base/src/Menu/Menu.tsx b/packages/mui-base/src/Menu/Menu.tsx index 81ad1bbed7e59c..be2cf8f8e43024 100644 --- a/packages/mui-base/src/Menu/Menu.tsx +++ b/packages/mui-base/src/Menu/Menu.tsx @@ -146,12 +146,9 @@ 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 /* @typescript-to-proptypes-ignore */.oneOfType([ - PropTypes.func, - PropTypes.object, - ]), + root: PropTypes.oneOfType([PropTypes.func, PropTypes.object]), }), /** * The components used for each slot inside the Menu. diff --git a/packages/mui-base/src/Select/Select.tsx b/packages/mui-base/src/Select/Select.tsx index b521d1ed6ccade..1e53d24570b912 100644 --- a/packages/mui-base/src/Select/Select.tsx +++ b/packages/mui-base/src/Select/Select.tsx @@ -330,12 +330,9 @@ 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 /* @typescript-to-proptypes-ignore */.oneOfType([ - PropTypes.func, - PropTypes.object, - ]), + popper: PropTypes.oneOfType([PropTypes.func, PropTypes.object]), root: PropTypes.oneOfType([PropTypes.func, PropTypes.object]), }), /** From c46495a875699d52d3cc948e6cda006af4e368ee Mon Sep 17 00:00:00 2001 From: Benny Joo Date: Tue, 2 May 2023 10:05:55 +0100 Subject: [PATCH 15/15] address comment --- packages/mui-material/src/Popper/Popper.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/mui-material/src/Popper/Popper.tsx b/packages/mui-material/src/Popper/Popper.tsx index 7410aa97a8ae77..98894d76e8a99c 100644 --- a/packages/mui-material/src/Popper/Popper.tsx +++ b/packages/mui-material/src/Popper/Popper.tsx @@ -77,7 +77,7 @@ const Popper = React.forwardRef(function Popper( ...other } = props; - const RootComponent = component ?? slots?.root ?? components?.Root; + const RootComponent = slots?.root ?? components?.Root; const otherProps = { anchorEl, container, @@ -93,6 +93,7 @@ const Popper = React.forwardRef(function Popper( }; return (