From 3e660c2591cac54b3301023cf0ea51706849ce41 Mon Sep 17 00:00:00 2001 From: sai6855 Date: Fri, 24 May 2024 11:06:05 +0530 Subject: [PATCH 1/6] paper slot --- .../mui-material/src/Popover/Popover.d.ts | 37 ++++++++----------- packages/mui-material/src/Popover/Popover.js | 35 +++++++++++------- 2 files changed, 38 insertions(+), 34 deletions(-) diff --git a/packages/mui-material/src/Popover/Popover.d.ts b/packages/mui-material/src/Popover/Popover.d.ts index d8308b68ac7a5b..6106e5ef9bd848 100644 --- a/packages/mui-material/src/Popover/Popover.d.ts +++ b/packages/mui-material/src/Popover/Popover.d.ts @@ -1,12 +1,25 @@ import * as React from 'react'; import { SxProps } from '@mui/system'; -import { SlotComponentProps } from '@mui/base'; import { InternalStandardProps as StandardProps } from '..'; import Paper, { PaperProps } from '../Paper'; import Modal, { ModalOwnerState, ModalProps } from '../Modal'; import { Theme } from '../styles'; import { TransitionProps } from '../transitions/transition'; import { PopoverClasses } from './popoverClasses'; +import { CreateSlotsAndSlotProps, SlotProps } from '../utils/types'; + +export interface PopoverSlots { + root?: React.ElementType; + paper?: React.ElementType; +} + +export type PopoverSlotsAndSlotProps = CreateSlotsAndSlotProps< + PopoverSlots, + { + root: SlotProps; + paper: SlotProps; + } +>; export interface PopoverOrigin { vertical: 'top' | 'center' | 'bottom' | number; @@ -26,7 +39,8 @@ interface PopoverVirtualElement { } export interface PopoverProps - extends StandardProps, 'children'> { + extends StandardProps, 'children'>, + PopoverSlotsAndSlotProps { /** * A ref for imperative actions. * It currently only supports updatePosition() action. @@ -109,25 +123,6 @@ export interface PopoverProps * @default {} */ PaperProps?: Partial>; - /** - * The components used for each slot inside. - * - * @default {} - */ - slots?: { - root?: React.ElementType; - paper?: React.ElementType; - }; - /** - * The extra props for the slot components. - * You can override the existing props or add new ones. - * - * @default {} - */ - slotProps?: { - root?: SlotComponentProps; - paper?: SlotComponentProps; - }; /** * The system prop that allows defining system overrides as well as additional CSS styles. */ diff --git a/packages/mui-material/src/Popover/Popover.js b/packages/mui-material/src/Popover/Popover.js index 0dfe594895c8a9..317077322c473d 100644 --- a/packages/mui-material/src/Popover/Popover.js +++ b/packages/mui-material/src/Popover/Popover.js @@ -18,6 +18,7 @@ import Grow from '../Grow'; import Modal from '../Modal'; import PaperBase from '../Paper'; import { getPopoverUtilityClass } from './popoverClasses'; +import useSlot from '../utils/useSlot'; const useThemeProps = createUseThemeProps('MuiPopover'); @@ -112,8 +113,8 @@ const Popover = React.forwardRef(function Popover(inProps, ref) { marginThreshold = 16, open, PaperProps: PaperPropsProp = {}, - slots, - slotProps, + slots = {}, + slotProps = {}, transformOrigin = { vertical: 'top', horizontal: 'left', @@ -378,19 +379,25 @@ const Popover = React.forwardRef(function Popover(inProps, ref) { containerProp || (anchorEl ? ownerDocument(resolveAnchorEl(anchorEl)).body : undefined); const RootSlot = slots?.root ?? PopoverRoot; - const PaperSlot = slots?.paper ?? PopoverPaper; - - const paperProps = useSlotProps({ - elementType: PaperSlot, - externalSlotProps: { - ...externalPaperSlotProps, - style: isPositioned - ? externalPaperSlotProps.style - : { ...externalPaperSlotProps.style, opacity: 0 }, + + const externalForwardedProps = { + slots, + slotProps: { + ...slotProps, + paper: { + ...externalPaperSlotProps, + style: isPositioned + ? externalPaperSlotProps.style + : { ...externalPaperSlotProps.style, opacity: 0 }, + }, }, + }; + + const [PaperSlot, paperProps] = useSlot('paper', { + elementType: PopoverPaper, + externalForwardedProps, additionalProps: { elevation, - ref: handlePaperRef, }, ownerState, className: clsx(classes.paper, externalPaperSlotProps?.className), @@ -423,7 +430,9 @@ const Popover = React.forwardRef(function Popover(inProps, ref) { timeout={transitionDuration} {...TransitionProps} > - {children} + + {children} + ); From 6ca11ffc15977b51d9ff35af45d5a1c25b96c791 Mon Sep 17 00:00:00 2001 From: sai6855 Date: Fri, 24 May 2024 11:14:53 +0530 Subject: [PATCH 2/6] root slot setup --- packages/mui-material/src/Popover/Popover.js | 14 +++++--------- packages/mui-material/src/Popover/Popover.test.js | 2 +- 2 files changed, 6 insertions(+), 10 deletions(-) diff --git a/packages/mui-material/src/Popover/Popover.js b/packages/mui-material/src/Popover/Popover.js index 317077322c473d..777fa3f0674b0f 100644 --- a/packages/mui-material/src/Popover/Popover.js +++ b/packages/mui-material/src/Popover/Popover.js @@ -2,7 +2,7 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import clsx from 'clsx'; -import { useSlotProps, isHostComponent } from '@mui/base/utils'; +import { isHostComponent } from '@mui/base/utils'; import composeClasses from '@mui/utils/composeClasses'; import HTMLElementType from '@mui/utils/HTMLElementType'; import refType from '@mui/utils/refType'; @@ -123,7 +123,6 @@ const Popover = React.forwardRef(function Popover(inProps, ref) { transitionDuration: transitionDurationProp = 'auto', TransitionProps: { onEntering, ...TransitionProps } = {}, disableScrollLock = false, - ...other } = props; const externalPaperSlotProps = slotProps?.paper ?? PaperPropsProp; @@ -378,8 +377,6 @@ const Popover = React.forwardRef(function Popover(inProps, ref) { const container = containerProp || (anchorEl ? ownerDocument(resolveAnchorEl(anchorEl)).body : undefined); - const RootSlot = slots?.root ?? PopoverRoot; - const externalForwardedProps = { slots, slotProps: { @@ -403,12 +400,10 @@ const Popover = React.forwardRef(function Popover(inProps, ref) { className: clsx(classes.paper, externalPaperSlotProps?.className), }); - const { slotProps: rootSlotPropsProp, ...rootProps } = useSlotProps({ - elementType: RootSlot, - externalSlotProps: slotProps?.root || {}, - externalForwardedProps: other, + const [RootSlot, { slotProps: rootSlotPropsProp, ...rootProps }] = useSlot('root', { + elementType: PopoverRoot, + externalForwardedProps, additionalProps: { - ref, slotProps: { backdrop: { invisible: true } }, container, open, @@ -417,6 +412,7 @@ const Popover = React.forwardRef(function Popover(inProps, ref) { className: clsx(classes.root, className), }); + console.log(rootSlotPropsProp); return ( ', () => { }); }); - it('should pass through container prop if container and anchorEl props are provided', () => { + it.only('should pass through container prop if container and anchorEl props are provided', () => { const container = document.createElement('div'); const anchorEl = document.createElement('div'); render(); From 2ecc8bcd349bfdff40f261047de9314e7aa6522f Mon Sep 17 00:00:00 2001 From: sai6855 Date: Fri, 24 May 2024 11:26:24 +0530 Subject: [PATCH 3/6] fix --- packages/mui-material/src/Popover/Popover.js | 4 +++- packages/mui-material/src/Popover/Popover.test.js | 2 +- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/packages/mui-material/src/Popover/Popover.js b/packages/mui-material/src/Popover/Popover.js index 777fa3f0674b0f..fc14fa704b492d 100644 --- a/packages/mui-material/src/Popover/Popover.js +++ b/packages/mui-material/src/Popover/Popover.js @@ -123,6 +123,7 @@ const Popover = React.forwardRef(function Popover(inProps, ref) { transitionDuration: transitionDurationProp = 'auto', TransitionProps: { onEntering, ...TransitionProps } = {}, disableScrollLock = false, + ...other } = props; const externalPaperSlotProps = slotProps?.paper ?? PaperPropsProp; @@ -412,11 +413,12 @@ const Popover = React.forwardRef(function Popover(inProps, ref) { className: clsx(classes.root, className), }); - console.log(rootSlotPropsProp); return ( ', () => { }); }); - it.only('should pass through container prop if container and anchorEl props are provided', () => { + it('should pass through container prop if container and anchorEl props are provided', () => { const container = document.createElement('div'); const anchorEl = document.createElement('div'); render(); From d810330b5b87f29bc0c24f6d53f9443760f9db38 Mon Sep 17 00:00:00 2001 From: sai6855 Date: Fri, 24 May 2024 11:27:58 +0530 Subject: [PATCH 4/6] fix --- packages/mui-material/src/Popover/Popover.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/mui-material/src/Popover/Popover.js b/packages/mui-material/src/Popover/Popover.js index fc14fa704b492d..f142f753b27241 100644 --- a/packages/mui-material/src/Popover/Popover.js +++ b/packages/mui-material/src/Popover/Popover.js @@ -129,7 +129,6 @@ const Popover = React.forwardRef(function Popover(inProps, ref) { const externalPaperSlotProps = slotProps?.paper ?? PaperPropsProp; const paperRef = React.useRef(); - const handlePaperRef = useForkRef(paperRef, externalPaperSlotProps.ref); const ownerState = { ...props, @@ -413,6 +412,8 @@ const Popover = React.forwardRef(function Popover(inProps, ref) { className: clsx(classes.root, className), }); + const handlePaperRef = useForkRef(paperRef, paperProps.ref); + return ( Date: Fri, 24 May 2024 11:33:23 +0530 Subject: [PATCH 5/6] docs:api --- docs/pages/material-ui/api/popover.json | 17 ++++------------- docs/translations/api-docs/menu/menu.json | 4 +--- docs/translations/api-docs/popover/popover.json | 13 +++---------- packages/mui-material/src/Menu/Menu.js | 5 +---- packages/mui-material/src/Popover/Popover.js | 5 +---- .../mui-material/src/Popover/Popover.test.js | 1 - 6 files changed, 10 insertions(+), 35 deletions(-) diff --git a/docs/pages/material-ui/api/popover.json b/docs/pages/material-ui/api/popover.json index 9356e9c6f495dd..f7785d7add6e68 100644 --- a/docs/pages/material-ui/api/popover.json +++ b/docs/pages/material-ui/api/popover.json @@ -73,20 +73,11 @@ "import Popover from '@mui/material/Popover';", "import { Popover } from '@mui/material';" ], - "classes": [ - { - "key": "paper", - "className": "MuiPopover-paper", - "description": "Styles applied to the Paper component.", - "isGlobal": false - }, - { - "key": "root", - "className": "MuiPopover-root", - "description": "Styles applied to the root element.", - "isGlobal": false - } + "slots": [ + { "name": "root", "description": "", "class": "MuiPopover-root" }, + { "name": "paper", "description": "", "class": "MuiPopover-paper" } ], + "classes": [], "spread": true, "themeDefaultProps": false, "muiName": "MuiPopover", diff --git a/docs/translations/api-docs/menu/menu.json b/docs/translations/api-docs/menu/menu.json index 44fdf2c56de693..9379f92a5f1503 100644 --- a/docs/translations/api-docs/menu/menu.json +++ b/docs/translations/api-docs/menu/menu.json @@ -26,9 +26,7 @@ "PopoverClasses": { "description": "classes prop applied to the Popover element." }, - "slotProps": { - "description": "The extra props for the slot components. You can override the existing props or add new ones." - }, + "slotProps": { "description": "The props used for each slot inside." }, "slots": { "description": "The components used for each slot inside." }, "sx": { "description": "The system prop that allows defining system overrides as well as additional CSS styles." diff --git a/docs/translations/api-docs/popover/popover.json b/docs/translations/api-docs/popover/popover.json index 081a32941cb56f..74868af1093e8e 100644 --- a/docs/translations/api-docs/popover/popover.json +++ b/docs/translations/api-docs/popover/popover.json @@ -33,9 +33,7 @@ "PaperProps": { "description": "Props applied to the Paper element.
This prop is an alias for slotProps.paper and will be overriden by it if both are used." }, - "slotProps": { - "description": "The extra props for the slot components. You can override the existing props or add new ones." - }, + "slotProps": { "description": "The props used for each slot inside." }, "slots": { "description": "The components used for each slot inside." }, "sx": { "description": "The system prop that allows defining system overrides as well as additional CSS styles." @@ -53,11 +51,6 @@ "description": "Props applied to the transition element. By default, the element is based on this Transition component." } }, - "classDescriptions": { - "paper": { - "description": "Styles applied to {{nodeName}}.", - "nodeName": "the Paper component" - }, - "root": { "description": "Styles applied to the root element." } - } + "classDescriptions": {}, + "slotDescriptions": { "paper": "", "root": "" } } diff --git a/packages/mui-material/src/Menu/Menu.js b/packages/mui-material/src/Menu/Menu.js index edf4fe4f7dec34..19269471b5d609 100644 --- a/packages/mui-material/src/Menu/Menu.js +++ b/packages/mui-material/src/Menu/Menu.js @@ -285,9 +285,7 @@ Menu.propTypes /* remove-proptypes */ = { */ PopoverClasses: PropTypes.object, /** - * The extra props for the slot components. - * You can override the existing props or add new ones. - * + * The props used for each slot inside. * @default {} */ slotProps: PropTypes.shape({ @@ -296,7 +294,6 @@ Menu.propTypes /* remove-proptypes */ = { }), /** * The components used for each slot inside. - * * @default {} */ slots: PropTypes.shape({ diff --git a/packages/mui-material/src/Popover/Popover.js b/packages/mui-material/src/Popover/Popover.js index f142f753b27241..666a095889c389 100644 --- a/packages/mui-material/src/Popover/Popover.js +++ b/packages/mui-material/src/Popover/Popover.js @@ -581,9 +581,7 @@ Popover.propTypes /* remove-proptypes */ = { component: elementTypeAcceptingRef, }), /** - * The extra props for the slot components. - * You can override the existing props or add new ones. - * + * The props used for each slot inside. * @default {} */ slotProps: PropTypes.shape({ @@ -592,7 +590,6 @@ Popover.propTypes /* remove-proptypes */ = { }), /** * The components used for each slot inside. - * * @default {} */ slots: PropTypes.shape({ diff --git a/packages/mui-material/src/Popover/Popover.test.js b/packages/mui-material/src/Popover/Popover.test.js index 656e70e2b1919b..13cee18ecf63c6 100644 --- a/packages/mui-material/src/Popover/Popover.test.js +++ b/packages/mui-material/src/Popover/Popover.test.js @@ -74,7 +74,6 @@ describe('', () => { 'themeStyleOverrides', // portal, can't determine the root 'themeVariants', 'reactTestRenderer', // react-transition-group issue - 'slotPropsCallback', // not supported yet ], })); From 93b32c497edff16838a2b6d70b889720506e2581 Mon Sep 17 00:00:00 2001 From: sai6855 Date: Fri, 24 May 2024 12:45:28 +0530 Subject: [PATCH 6/6] fix test --- packages/mui-material/src/Popover/Popover.js | 12 +++++------- 1 file changed, 5 insertions(+), 7 deletions(-) diff --git a/packages/mui-material/src/Popover/Popover.js b/packages/mui-material/src/Popover/Popover.js index 666a095889c389..b0594958bf0595 100644 --- a/packages/mui-material/src/Popover/Popover.js +++ b/packages/mui-material/src/Popover/Popover.js @@ -381,12 +381,7 @@ const Popover = React.forwardRef(function Popover(inProps, ref) { slots, slotProps: { ...slotProps, - paper: { - ...externalPaperSlotProps, - style: isPositioned - ? externalPaperSlotProps.style - : { ...externalPaperSlotProps.style, opacity: 0 }, - }, + paper: externalPaperSlotProps, }, }; @@ -395,9 +390,12 @@ const Popover = React.forwardRef(function Popover(inProps, ref) { externalForwardedProps, additionalProps: { elevation, + className: clsx(classes.paper, externalPaperSlotProps?.className), + style: isPositioned + ? externalPaperSlotProps.style + : { ...externalPaperSlotProps.style, opacity: 0 }, }, ownerState, - className: clsx(classes.paper, externalPaperSlotProps?.className), }); const [RootSlot, { slotProps: rootSlotPropsProp, ...rootProps }] = useSlot('root', {