From 4966245ca16e7d3e148139e87a22675a7c544adf Mon Sep 17 00:00:00 2001
From: atomiks <cc.glows@gmail.com>
Date: Tue, 16 Apr 2024 20:44:18 +1000
Subject: [PATCH] wip

---
 docs/pages/experiments/tooltip.tsx            | 53 +++++++++----------
 .../mui-base/src/Tooltip/Tooltip.types.ts     |  2 +-
 .../src/Tooltip/useTransitionStatus.ts        |  4 +-
 3 files changed, 29 insertions(+), 30 deletions(-)

diff --git a/docs/pages/experiments/tooltip.tsx b/docs/pages/experiments/tooltip.tsx
index f4333be0b..67fb09588 100644
--- a/docs/pages/experiments/tooltip.tsx
+++ b/docs/pages/experiments/tooltip.tsx
@@ -35,23 +35,20 @@ export const TooltipContent = styled(Tooltip.Content)`
 
     &[data-transition] {
       transition-property: opacity, transform;
+      transition-duration: 0.15s;
+      opacity: 0;
+      transform: scale(0.9);
 
-      &[data-status='open'],
-      &[data-status='closed'] {
-        transition-duration: 0.2s;
-      }
-
-      &[data-status='initial'],
-      &[data-status='closed'] {
-        opacity: 0;
-        transform: scale(0.9);
+      &[data-status='opening'] {
+        opacity: 1;
+        transform: scale(1);
       }
     }
 
     &[data-animation] {
       animation: ${scaleIn} 0.2s;
 
-      &[data-status='closed'] {
+      &[data-status='closing'] {
         animation: ${scaleOut} 0.2s forwards;
       }
     }
@@ -88,23 +85,25 @@ export default function TooltipTransitionExperiment() {
       }}
     >
       <h2>Transition</h2>
-      <Tooltip.Root>
-        <Tooltip.AnchorFragment>
-          <AnchorButton>Anchor</AnchorButton>
-        </Tooltip.AnchorFragment>
-        <TooltipContent data-transition sideOffset={7} arrowPadding={3}>
-          Tooltip
-        </TooltipContent>
-      </Tooltip.Root>
-      <h2>Animation</h2>
-      <Tooltip.Root>
-        <Tooltip.AnchorFragment>
-          <AnchorButton>Anchor</AnchorButton>
-        </Tooltip.AnchorFragment>
-        <TooltipContent data-animation sideOffset={7} arrowPadding={3}>
-          Tooltip
-        </TooltipContent>
-      </Tooltip.Root>
+      <Tooltip.Group>
+        <Tooltip.Root>
+          <Tooltip.AnchorFragment>
+            <AnchorButton>Anchor</AnchorButton>
+          </Tooltip.AnchorFragment>
+          <TooltipContent data-transition sideOffset={7}>
+            Tooltip
+          </TooltipContent>
+        </Tooltip.Root>
+        <h2>Animation</h2>
+        <Tooltip.Root>
+          <Tooltip.AnchorFragment>
+            <AnchorButton>Anchor</AnchorButton>
+          </Tooltip.AnchorFragment>
+          <TooltipContent data-animation sideOffset={7}>
+            Tooltip
+          </TooltipContent>
+        </Tooltip.Root>
+      </Tooltip.Group>
     </div>
   );
 }
diff --git a/packages/mui-base/src/Tooltip/Tooltip.types.ts b/packages/mui-base/src/Tooltip/Tooltip.types.ts
index a757056e7..e184fc0be 100644
--- a/packages/mui-base/src/Tooltip/Tooltip.types.ts
+++ b/packages/mui-base/src/Tooltip/Tooltip.types.ts
@@ -3,7 +3,7 @@ import type { FloatingArrowProps, FloatingContext, OpenChangeReason } from '@flo
 import type { BaseUIComponentProps, GenericHTMLProps } from '../utils/BaseUI.types';
 import type { TooltipContentParameters } from '../useTooltip';
 
-export type Status = 'unmounted' | 'initial' | 'open' | 'closed';
+export type Status = 'unmounted' | 'initial' | 'opening' | 'closing';
 
 export interface ContextValue {
   open: boolean;
diff --git a/packages/mui-base/src/Tooltip/useTransitionStatus.ts b/packages/mui-base/src/Tooltip/useTransitionStatus.ts
index a59dc3396..355cb1ad0 100644
--- a/packages/mui-base/src/Tooltip/useTransitionStatus.ts
+++ b/packages/mui-base/src/Tooltip/useTransitionStatus.ts
@@ -18,7 +18,7 @@ export function useTransitionStatus(trigger: boolean) {
       setStatus('initial');
 
       const frame = requestAnimationFrame(() => {
-        setStatus('open');
+        setStatus('opening');
       });
 
       return () => {
@@ -26,7 +26,7 @@ export function useTransitionStatus(trigger: boolean) {
       };
     }
 
-    setStatus('closed');
+    setStatus('closing');
 
     return undefined;
   }, [trigger]);