From 7485733340b1a366244e6eb9c8fd641fad8c08e6 Mon Sep 17 00:00:00 2001 From: atomiks Date: Thu, 10 Oct 2024 16:38:38 +1100 Subject: [PATCH] Make data-entering/data-exiting consistent --- .../mui-base/src/Menu/Popup/MenuPopup.tsx | 20 +++++++------ .../src/Popover/Backdrop/PopoverBackdrop.tsx | 30 ++++++++++++++++--- .../src/Popover/Popup/PopoverPopup.tsx | 20 +++++++------ .../Backdrop/PreviewCardBackdrop.tsx | 30 ++++++++++++++++--- .../PreviewCard/Popup/PreviewCardPopup.tsx | 20 +++++++------ .../src/Tooltip/Popup/TooltipPopup.tsx | 20 +++++++------ 6 files changed, 96 insertions(+), 44 deletions(-) diff --git a/packages/mui-base/src/Menu/Popup/MenuPopup.tsx b/packages/mui-base/src/Menu/Popup/MenuPopup.tsx index a0cedcee7..ec85814f3 100644 --- a/packages/mui-base/src/Menu/Popup/MenuPopup.tsx +++ b/packages/mui-base/src/Menu/Popup/MenuPopup.tsx @@ -9,15 +9,19 @@ import { useComponentRenderer } from '../../utils/useComponentRenderer'; import { useForkRef } from '../../utils/useForkRef'; import type { BaseUIComponentProps } from '../../utils/types'; import type { CustomStyleHookMapping } from '../../utils/getStyleHookProps'; +import type { TransitionStatus } from '../../utils/useTransitionStatus'; import { popupOpenStateMapping as baseMapping } from '../../utils/popupOpenStateMapping'; const customStyleHookMapping: CustomStyleHookMapping = { ...baseMapping, - entering(value) { - return value ? { 'data-entering': '' } : null; - }, - exiting(value) { - return value ? { 'data-exiting': '' } : null; + transitionStatus(value) { + if (value === 'entering') { + return { 'data-entering': '' } as Record; + } + if (value === 'exiting') { + return { 'data-exiting': '' }; + } + return null; }, }; @@ -49,8 +53,7 @@ const MenuPopup = React.forwardRef(function MenuPopup( const ownerState: MenuPopup.OwnerState = React.useMemo( () => ({ - entering: transitionStatus === 'entering', - exiting: transitionStatus === 'exiting', + transitionStatus, side, alignment, open, @@ -80,8 +83,7 @@ namespace MenuPopup { } export type OwnerState = { - entering: boolean; - exiting: boolean; + transitionStatus: TransitionStatus; side: Side; alignment: 'start' | 'end' | 'center'; open: boolean; diff --git a/packages/mui-base/src/Popover/Backdrop/PopoverBackdrop.tsx b/packages/mui-base/src/Popover/Backdrop/PopoverBackdrop.tsx index 0e001891e..429d6be4f 100644 --- a/packages/mui-base/src/Popover/Backdrop/PopoverBackdrop.tsx +++ b/packages/mui-base/src/Popover/Backdrop/PopoverBackdrop.tsx @@ -7,7 +7,22 @@ import { useComponentRenderer } from '../../utils/useComponentRenderer'; import { HTMLElementType } from '../../utils/proptypes'; import { usePopoverBackdrop } from './usePopoverBackdrop'; import type { BaseUIComponentProps } from '../../utils/types'; -import { popupOpenStateMapping } from '../../utils/popupOpenStateMapping'; +import { type CustomStyleHookMapping } from '../../utils/getStyleHookProps'; +import { popupOpenStateMapping as baseMapping } from '../../utils/popupOpenStateMapping'; +import type { TransitionStatus } from '../../utils/useTransitionStatus'; + +const customStyleHookMapping: CustomStyleHookMapping = { + ...baseMapping, + transitionStatus(value) { + if (value === 'entering') { + return { 'data-entering': '' } as Record; + } + if (value === 'exiting') { + return { 'data-exiting': '' }; + } + return null; + }, +}; /** * Renders a backdrop for the popover. @@ -26,11 +41,17 @@ const PopoverBackdrop = React.forwardRef(function PopoverBackdrop( ) { const { className, render, keepMounted = false, container, ...otherProps } = props; - const { open, mounted } = usePopoverRootContext(); + const { open, mounted, transitionStatus } = usePopoverRootContext(); const { getBackdropProps } = usePopoverBackdrop(); - const ownerState = React.useMemo(() => ({ open }), [open]); + const ownerState = React.useMemo( + () => ({ + open, + transitionStatus, + }), + [open, transitionStatus], + ); const { renderElement } = useComponentRenderer({ propGetter: getBackdropProps, @@ -39,7 +60,7 @@ const PopoverBackdrop = React.forwardRef(function PopoverBackdrop( ownerState, ref: forwardedRef, extraProps: otherProps, - customStyleHookMapping: popupOpenStateMapping, + customStyleHookMapping, }); const shouldRender = keepMounted || mounted; @@ -53,6 +74,7 @@ const PopoverBackdrop = React.forwardRef(function PopoverBackdrop( namespace PopoverBackdrop { export interface OwnerState { open: boolean; + transitionStatus: TransitionStatus; } export interface Props extends BaseUIComponentProps<'div', OwnerState> { diff --git a/packages/mui-base/src/Popover/Popup/PopoverPopup.tsx b/packages/mui-base/src/Popover/Popup/PopoverPopup.tsx index 7cbd876a6..d919d9994 100644 --- a/packages/mui-base/src/Popover/Popup/PopoverPopup.tsx +++ b/packages/mui-base/src/Popover/Popup/PopoverPopup.tsx @@ -9,15 +9,19 @@ import { useForkRef } from '../../utils/useForkRef'; import type { Side, Alignment } from '../../utils/useAnchorPositioning'; import type { BaseUIComponentProps } from '../../utils/types'; import type { CustomStyleHookMapping } from '../../utils/getStyleHookProps'; +import type { TransitionStatus } from '../../utils/useTransitionStatus'; import { popupOpenStateMapping as baseMapping } from '../../utils/popupOpenStateMapping'; const customStyleHookMapping: CustomStyleHookMapping = { ...baseMapping, - entering(value) { - return value ? { 'data-entering': '' } : null; - }, - exiting(value) { - return value ? { 'data-exiting': '' } : null; + transitionStatus(value) { + if (value === 'entering') { + return { 'data-entering': '' } as Record; + } + if (value === 'exiting') { + return { 'data-exiting': '' }; + } + return null; }, }; @@ -61,8 +65,7 @@ const PopoverPopup = React.forwardRef(function PopoverPopup( side, alignment, instant: instantType, - entering: transitionStatus === 'entering', - exiting: transitionStatus === 'exiting', + transitionStatus, }), [open, side, alignment, instantType, transitionStatus], ); @@ -87,8 +90,7 @@ namespace PopoverPopup { open: boolean; side: Side; alignment: Alignment; - entering: boolean; - exiting: boolean; + transitionStatus: TransitionStatus; } export interface Props extends BaseUIComponentProps<'div', OwnerState> {} diff --git a/packages/mui-base/src/PreviewCard/Backdrop/PreviewCardBackdrop.tsx b/packages/mui-base/src/PreviewCard/Backdrop/PreviewCardBackdrop.tsx index 9a901f6c7..fea035ea5 100644 --- a/packages/mui-base/src/PreviewCard/Backdrop/PreviewCardBackdrop.tsx +++ b/packages/mui-base/src/PreviewCard/Backdrop/PreviewCardBackdrop.tsx @@ -7,7 +7,22 @@ import { usePreviewCardRootContext } from '../Root/PreviewCardContext'; import { usePreviewCardBackdrop } from './usePreviewCardBackdrop'; import { HTMLElementType } from '../../utils/proptypes'; import type { BaseUIComponentProps } from '../../utils/types'; -import { popupOpenStateMapping } from '../../utils/popupOpenStateMapping'; +import { type CustomStyleHookMapping } from '../../utils/getStyleHookProps'; +import { popupOpenStateMapping as baseMapping } from '../../utils/popupOpenStateMapping'; +import type { TransitionStatus } from '../../utils/useTransitionStatus'; + +const customStyleHookMapping: CustomStyleHookMapping = { + ...baseMapping, + transitionStatus(value) { + if (value === 'entering') { + return { 'data-entering': '' } as Record; + } + if (value === 'exiting') { + return { 'data-exiting': '' }; + } + return null; + }, +}; /** * @@ -25,10 +40,16 @@ const PreviewCardBackdrop = React.forwardRef(function PreviewCardBackdrop( ) { const { render, className, keepMounted = false, container, ...otherProps } = props; - const { open, mounted } = usePreviewCardRootContext(); + const { open, mounted, transitionStatus } = usePreviewCardRootContext(); const { getBackdropProps } = usePreviewCardBackdrop(); - const ownerState: PreviewCardBackdrop.OwnerState = React.useMemo(() => ({ open }), [open]); + const ownerState: PreviewCardBackdrop.OwnerState = React.useMemo( + () => ({ + open, + transitionStatus, + }), + [open, transitionStatus], + ); const { renderElement } = useComponentRenderer({ propGetter: getBackdropProps, @@ -37,7 +58,7 @@ const PreviewCardBackdrop = React.forwardRef(function PreviewCardBackdrop( ownerState, ref: forwardedRef, extraProps: otherProps, - customStyleHookMapping: popupOpenStateMapping, + customStyleHookMapping, }); const shouldRender = keepMounted || mounted; @@ -51,6 +72,7 @@ const PreviewCardBackdrop = React.forwardRef(function PreviewCardBackdrop( namespace PreviewCardBackdrop { export interface OwnerState { open: boolean; + transitionStatus: TransitionStatus; } export interface Props extends BaseUIComponentProps<'div', OwnerState> { diff --git a/packages/mui-base/src/PreviewCard/Popup/PreviewCardPopup.tsx b/packages/mui-base/src/PreviewCard/Popup/PreviewCardPopup.tsx index 1e39bcf87..606c8575a 100644 --- a/packages/mui-base/src/PreviewCard/Popup/PreviewCardPopup.tsx +++ b/packages/mui-base/src/PreviewCard/Popup/PreviewCardPopup.tsx @@ -10,14 +10,18 @@ import type { CustomStyleHookMapping } from '../../utils/getStyleHookProps'; import type { Alignment, Side } from '../../utils/useAnchorPositioning'; import type { BaseUIComponentProps } from '../../utils/types'; import { popupOpenStateMapping as baseMapping } from '../../utils/popupOpenStateMapping'; +import type { TransitionStatus } from '../../utils/useTransitionStatus'; const customStyleHookMapping: CustomStyleHookMapping = { ...baseMapping, - entering(value) { - return value ? { 'data-entering': '' } : null; - }, - exiting(value) { - return value ? { 'data-exiting': '' } : null; + transitionStatus(value) { + if (value === 'entering') { + return { 'data-entering': '' } as Record; + } + if (value === 'exiting') { + return { 'data-exiting': '' }; + } + return null; }, }; @@ -49,8 +53,7 @@ const PreviewCardPopup = React.forwardRef(function PreviewCardPopup( open, side, alignment, - entering: transitionStatus === 'entering', - exiting: transitionStatus === 'exiting', + transitionStatus, }), [open, side, alignment, transitionStatus], ); @@ -75,8 +78,7 @@ namespace PreviewCardPopup { open: boolean; side: Side; alignment: Alignment; - entering: boolean; - exiting: boolean; + transitionStatus: TransitionStatus; } export interface Props extends BaseUIComponentProps<'div', OwnerState> {} diff --git a/packages/mui-base/src/Tooltip/Popup/TooltipPopup.tsx b/packages/mui-base/src/Tooltip/Popup/TooltipPopup.tsx index 8fae1b70e..7c062a8f8 100644 --- a/packages/mui-base/src/Tooltip/Popup/TooltipPopup.tsx +++ b/packages/mui-base/src/Tooltip/Popup/TooltipPopup.tsx @@ -9,14 +9,18 @@ import type { BaseUIComponentProps } from '../../utils/types'; import type { Alignment, Side } from '../../utils/useAnchorPositioning'; import type { CustomStyleHookMapping } from '../../utils/getStyleHookProps'; import { popupOpenStateMapping as baseMapping } from '../../utils/popupOpenStateMapping'; +import type { TransitionStatus } from '../../utils/useTransitionStatus'; const customStyleHookMapping: CustomStyleHookMapping = { ...baseMapping, - entering(value) { - return value ? { 'data-entering': '' } : null; - }, - exiting(value) { - return value ? { 'data-exiting': '' } : null; + transitionStatus(value) { + if (value === 'entering') { + return { 'data-entering': '' } as Record; + } + if (value === 'exiting') { + return { 'data-exiting': '' }; + } + return null; }, }; @@ -47,8 +51,7 @@ const TooltipPopup = React.forwardRef(function TooltipPopup( side, alignment, instant: instantType, - entering: transitionStatus === 'entering', - exiting: transitionStatus === 'exiting', + transitionStatus, }), [open, side, alignment, instantType, transitionStatus], ); @@ -76,8 +79,7 @@ namespace TooltipPopup { side: Side; alignment: Alignment; instant: 'delay' | 'focus' | 'dismiss' | undefined; - entering: boolean; - exiting: boolean; + transitionStatus: TransitionStatus; } export interface Props extends BaseUIComponentProps<'div', OwnerState> {}