@zvk/ui 0.1.7 → 0.1.9

package/dist/components/tooltip/tooltip.js

@@ -4,6 +4,7 @@ import * as React from "react";
 import { Portal } from "../../internal/portal/index.js";
 import { useFloatingPosition } from "../../internal/floating/index.js";
 import { placementFromSideAlign } from "../../internal/floating/placement-aliases.js";
+import { usePresence } from "../../internal/presence/index.js";
 import { useControllableState } from "../../hooks/use-controllable-state.js";
 import { composeEventHandlers } from "../../utils/compose-event-handlers.js";
 import { cn } from "../../utils/cn.js";
@@ -12,6 +13,7 @@ const defaultContentPositioning = {
     alignOffset: 0,
     collisionPadding: 0
 };
+const tooltipExitDurationMs = 80;
 const TooltipProviderContext = React.createContext({
     delayDuration: 0
 });
@@ -167,8 +169,11 @@ function TooltipTrigger({ children, asChild: _asChild = false }) {
         }, { checkDefaultPrevented: false })
     });
 }
-function TooltipContent({ align, alignOffset = defaultContentPositioning.alignOffset, children, className, collisionPadding = defaultContentPositioning.collisionPadding, container, forceMount = false, placement, ref, side, sideOffset = defaultContentPositioning.sideOffset, style, ...props }) {
+function TooltipContent({ align, alignOffset = defaultContentPositioning.alignOffset, children, className, collisionPadding = defaultContentPositioning.collisionPadding, container, forceMount = false, onAnimationEnd, placement, ref, side, sideOffset = defaultContentPositioning.sideOffset, style, ...props }) {
     const context = useTooltipRootContext("Tooltip.Content");
+    const presence = usePresence({ open: context.open, forceMount, exitDurationMs: tooltipExitDurationMs });
+    const wasOpenRef = React.useRef(context.open);
+    const isClosing = wasOpenRef.current && !context.open;
     React.useEffect(() => {
         const resolvedPlacement = side === undefined ? placement : placementFromSideAlign(side, align, placement ?? "bottom");
         context.setContentPositioning({
@@ -179,11 +184,15 @@ function TooltipContent({ align, alignOffset = defaultContentPositioning.alignOf
         });
         return () => context.setContentPositioning(defaultContentPositioning);
     }, [align, alignOffset, collisionPadding, context, placement, side, sideOffset]);
-    if (!context.open && !forceMount) {
+    React.useEffect(() => {
+        wasOpenRef.current = context.open;
+    }, [context.open]);
+    if (!presence.present) {
         return null;
     }
     const placementParts = getPlacementParts(context.resolvedPlacement);
-    const content = (_jsx("span", { ...props, ref: composeRefs(ref, context.floatingRef), id: context.contentId, className: cn("zvk-ui-tooltip", className), "data-align": placementParts.align, "data-side": placementParts.side, hidden: context.open ? undefined : true, role: "tooltip", style: { ...context.floatingStyle, ...style }, children: children }));
+    const hidden = presence.inert && !isClosing && presence.motionState !== "exiting" ? true : undefined;
+    const content = (_jsx("span", { ...props, ref: composeRefs(ref, context.floatingRef), "aria-hidden": presence.inert ? true : undefined, id: context.contentId, inert: presence.inert ? true : undefined, className: cn("zvk-ui-tooltip", className), "data-align": placementParts.align, "data-side": placementParts.side, "data-state": presence.state, hidden: hidden, onAnimationEnd: composeEventHandlers(onAnimationEnd, presence.onExitComplete), role: "tooltip", style: { ...context.floatingStyle, ...style }, children: children }));
     return (_jsx(Portal, { ...(container === undefined ? {} : { container }), children: content }));
 }
 function TooltipWrapper({ children, content, delay = 0, disabled = false, placement = "bottom" }) {

package/dist/internal/floating/transform-origin.d.ts

@@ -0,0 +1,2 @@
+import type { FloatingPlacement } from "./floating-types.js";
+export declare function getFloatingTransformOrigin(placement: FloatingPlacement): string;

package/dist/internal/floating/transform-origin.js

@@ -0,0 +1,22 @@
+import { getOppositeSide } from "./middleware.js";
+import { placementParts } from "./placement-aliases.js";
+export function getFloatingTransformOrigin(placement) {
+    const { side, align } = placementParts(placement);
+    const anchor = getOppositeSide(side);
+    if (side === "top" || side === "bottom") {
+        if (align === "start") {
+            return `${anchor} left`;
+        }
+        if (align === "end") {
+            return `${anchor} right`;
+        }
+        return `${anchor} center`;
+    }
+    if (align === "start") {
+        return `${anchor} top`;
+    }
+    if (align === "end") {
+        return `${anchor} bottom`;
+    }
+    return `${anchor} center`;
+}

package/dist/internal/presence/index.d.ts

@@ -0,0 +1,2 @@
+export { usePresence } from "./use-presence.js";
+export type { PresenceExitEvent, PresenceMotionState, PresenceState, UsePresenceOptions, UsePresenceResult } from "./use-presence.js";

package/dist/internal/presence/index.js

@@ -0,0 +1,2 @@
+"use client";
+export { usePresence } from "./use-presence.js";

package/dist/internal/presence/use-presence.d.ts

@@ -0,0 +1,18 @@
+import * as React from "react";
+export type PresenceState = "open" | "closed";
+export type PresenceMotionState = "idle" | "entering" | "exiting";
+export type PresenceExitEvent = React.AnimationEvent<HTMLElement> | React.TransitionEvent<HTMLElement>;
+export interface UsePresenceOptions {
+    open: boolean;
+    forceMount?: boolean;
+    exitDurationMs?: number;
+    disabled?: boolean;
+}
+export interface UsePresenceResult {
+    present: boolean;
+    state: PresenceState;
+    motionState: PresenceMotionState;
+    inert: boolean;
+    onExitComplete: (event: PresenceExitEvent) => void;
+}
+export declare function usePresence({ open, forceMount, exitDurationMs, disabled }: UsePresenceOptions): UsePresenceResult;

package/dist/internal/presence/use-presence.js

@@ -0,0 +1,119 @@
+"use client";
+import * as React from "react";
+const defaultExitDurationMs = 180;
+function normalizeDuration(durationMs) {
+    return Math.max(0, durationMs ?? defaultExitDurationMs);
+}
+export function usePresence({ open, forceMount = false, exitDurationMs, disabled = false }) {
+    const [present, setPresentState] = React.useState(() => open || forceMount);
+    const [motionState, setMotionState] = React.useState(() => open && !disabled ? "entering" : "idle");
+    const exitTimerRef = React.useRef(null);
+    const enterTimerRef = React.useRef(null);
+    const mountedRef = React.useRef(false);
+    const openRef = React.useRef(open);
+    const forceMountRef = React.useRef(forceMount);
+    const wasOpenRef = React.useRef(open);
+    const motionStateRef = React.useRef(motionState);
+    openRef.current = open;
+    forceMountRef.current = forceMount;
+    motionStateRef.current = motionState;
+    const clearExitTimer = React.useCallback(() => {
+        if (exitTimerRef.current !== null) {
+            clearTimeout(exitTimerRef.current);
+            exitTimerRef.current = null;
+        }
+    }, []);
+    const clearEnterTimer = React.useCallback(() => {
+        if (enterTimerRef.current !== null) {
+            clearTimeout(enterTimerRef.current);
+            enterTimerRef.current = null;
+        }
+    }, []);
+    const setPresent = React.useCallback((nextPresent) => {
+        if (!mountedRef.current) {
+            return;
+        }
+        setPresentState(nextPresent);
+    }, []);
+    const setSafeMotionState = React.useCallback((nextMotionState) => {
+        if (!mountedRef.current) {
+            return;
+        }
+        motionStateRef.current = nextMotionState;
+        setMotionState(nextMotionState);
+    }, []);
+    const completeExit = React.useCallback(() => {
+        if (openRef.current) {
+            return;
+        }
+        clearExitTimer();
+        setPresent(forceMountRef.current);
+        setSafeMotionState("idle");
+    }, [clearExitTimer, setPresent, setSafeMotionState]);
+    React.useEffect(() => {
+        mountedRef.current = true;
+        return () => {
+            mountedRef.current = false;
+            clearEnterTimer();
+            clearExitTimer();
+        };
+    }, [clearEnterTimer, clearExitTimer]);
+    React.useEffect(() => {
+        const durationMs = normalizeDuration(exitDurationMs);
+        clearEnterTimer();
+        clearExitTimer();
+        if (open) {
+            wasOpenRef.current = true;
+            setPresent(true);
+            if (disabled) {
+                setSafeMotionState("idle");
+                return;
+            }
+            setSafeMotionState("entering");
+            enterTimerRef.current = setTimeout(() => {
+                enterTimerRef.current = null;
+                if (openRef.current) {
+                    setSafeMotionState("idle");
+                }
+            }, 0);
+            return;
+        }
+        if (!wasOpenRef.current) {
+            setPresent(forceMount);
+            setSafeMotionState("idle");
+            return;
+        }
+        wasOpenRef.current = false;
+        if (disabled || durationMs === 0) {
+            setPresent(forceMount);
+            setSafeMotionState("idle");
+            return;
+        }
+        setPresent(true);
+        setSafeMotionState("exiting");
+        exitTimerRef.current = setTimeout(completeExit, durationMs);
+    }, [
+        clearEnterTimer,
+        clearExitTimer,
+        completeExit,
+        disabled,
+        exitDurationMs,
+        forceMount,
+        open,
+        setPresent,
+        setSafeMotionState
+    ]);
+    const onExitComplete = React.useCallback((event) => {
+        if (event.currentTarget !== event.target || motionStateRef.current !== "exiting") {
+            return;
+        }
+        completeExit();
+    }, [completeExit]);
+    return {
+        present,
+        state: open ? "open" : "closed",
+        motionState,
+        inert: present && !open,
+        onExitComplete
+    };
+}