Make data-entering/data-exiting consistent

atomiks · Oct 10, 2024 · 7485733 · 7485733
1 parent 00f84b7
commit 7485733
Show file tree

Hide file tree

Showing 6 changed files with 96 additions and 44 deletions.
diff --git 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<MenuPopup.OwnerState> = {
   ...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<string, string>;
+    }
+    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
@@ -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<PopoverBackdrop.OwnerState> = {
+  ...baseMapping,
+  transitionStatus(value) {
+    if (value === 'entering') {
+      return { 'data-entering': '' } as Record<string, string>;
+    }
+    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
@@ -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<PopoverPopup.OwnerState> = {
   ...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<string, string>;
+    }
+    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
@@ -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<PreviewCardBackdrop.OwnerState> = {
+  ...baseMapping,
+  transitionStatus(value) {
+    if (value === 'entering') {
+      return { 'data-entering': '' } as Record<string, string>;
+    }
+    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
@@ -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<PreviewCardPopup.OwnerState> = {
   ...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<string, string>;
+    }
+    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
@@ -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<TooltipPopup.OwnerState> = {
   ...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<string, string>;
+    }
+    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> {}