wip

mui · Apr 17, 2024 · 4966245 · 4966245
1 parent 9c32a90
commit 4966245
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 30 deletions.
diff --git 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
@@ -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
@@ -18,15 +18,15 @@ export function useTransitionStatus(trigger: boolean) {
       setStatus('initial');
 
       const frame = requestAnimationFrame(() => {
-        setStatus('open');
+        setStatus('opening');
       });
 
       return () => {
         cancelAnimationFrame(frame);
       };
     }
 
-    setStatus('closed');
+    setStatus('closing');
 
     return undefined;
   }, [trigger]);