diff --git a/packages/x-date-pickers/src/internals/components/PickerPopper/PickerPopper.tsx b/packages/x-date-pickers/src/internals/components/PickerPopper/PickerPopper.tsx index 4ac05765227ba..c9990bb4dbad6 100644 --- a/packages/x-date-pickers/src/internals/components/PickerPopper/PickerPopper.tsx +++ b/packages/x-date-pickers/src/internals/components/PickerPopper/PickerPopper.tsx @@ -67,7 +67,7 @@ export interface PickerPopperSlotProps { /** * Props passed down to [Popper](https://mui.com/material-ui/api/popper/) component. */ - popper?: SlotComponentPropsFromProps; + popper?: SlotComponentPropsFromProps; } export interface ExportedPickerPopperProps { @@ -100,7 +100,7 @@ const useUtilityClasses = (classes: Partial | undefined) => const PickerPopperRoot = styled(MuiPopper, { name: 'MuiPickerPopper', slot: 'Root', -})(({ theme }) => ({ +})<{ ownerState: PickerOwnerState }>(({ theme }) => ({ zIndex: theme.zIndex.modal, })); @@ -368,10 +368,6 @@ export function PickerPopper(inProps: PickerPopperProps) { const classes = useUtilityClasses(classesProp); const { ownerState: pickerOwnerState, rootRefObject } = usePickerPrivateContext(); - const ownerState: PickerPopperOwnerState = { - ...pickerOwnerState, - popperPlacement: placement, - }; const handleClickAway = useEventCallback(() => { if (viewContainerRole === 'tooltip') { @@ -423,9 +419,14 @@ export function PickerPopper(inProps: PickerPopperProps) { onKeyDown: handleKeyDown, }, className: classes.root, - ownerState, + ownerState: pickerOwnerState, }); + const ownerState: PickerPopperOwnerState = React.useMemo( + () => ({ ...pickerOwnerState, popperPlacement: popperProps.placement }), + [pickerOwnerState, popperProps.placement], + ); + return ( {({ TransitionProps }) => (