bits-ui 2.16.4 → 2.17.0

package/dist/bits/utilities/presence-layer/presence.svelte.js

@@ -1,158 +1,61 @@
-import { executeCallbacks } from "svelte-toolbelt";
-import { Previous, watch } from "runed";
-import { on } from "svelte/events";
-import { StateMachine } from "../../../internal/state-machine.js";
-/**
- * Cache for animation names with TTL to reduce getComputedStyle calls.
- * Uses WeakMap to avoid memory leaks when elements are removed.
- */
-const animationNameCache = new WeakMap();
-const ANIMATION_NAME_CACHE_TTL_MS = 16; // One frame at 60fps
-const presenceMachine = {
-    mounted: {
-        UNMOUNT: "unmounted",
-        ANIMATION_OUT: "unmountSuspended",
-    },
-    unmountSuspended: {
-        MOUNT: "mounted",
-        ANIMATION_END: "unmounted",
-    },
-    unmounted: {
-        MOUNT: "mounted",
-    },
-};
+import { onDestroyEffect } from "svelte-toolbelt";
+import { watch } from "runed";
+import { AnimationsComplete } from "../../../internal/animations-complete.js";
 export class Presence {
     opts;
-    prevAnimationNameState = $state("none");
-    styles = $state({ display: "", animationName: "none" });
-    initialStatus;
-    previousPresent;
-    machine;
     present;
+    #afterAnimations;
+    #isPresent = $state(false);
+    #hasMounted = false;
+    #transitionStatus = $state(undefined);
+    #transitionFrame = null;
     constructor(opts) {
         this.opts = opts;
         this.present = this.opts.open;
-        this.initialStatus = opts.open.current ? "mounted" : "unmounted";
-        this.previousPresent = new Previous(() => this.present.current);
-        this.machine = new StateMachine(this.initialStatus, presenceMachine);
-        this.handleAnimationEnd = this.handleAnimationEnd.bind(this);
-        this.handleAnimationStart = this.handleAnimationStart.bind(this);
-        watchPresenceChange(this);
-        watchStatusChange(this);
-        watchRefChange(this);
-    }
-    /**
-     * Triggering an ANIMATION_OUT during an ANIMATION_IN will fire an `animationcancel`
-     * event for ANIMATION_IN after we have entered `unmountSuspended` state. So, we
-     * make sure we only trigger ANIMATION_END for the currently active animation.
-     */
-    handleAnimationEnd(event) {
-        if (!this.opts.ref.current)
-            return;
-        // Use cached animation name from styles when available to avoid getComputedStyle
-        const currAnimationName = this.styles.animationName || getAnimationName(this.opts.ref.current);
-        const isCurrentAnimation = currAnimationName.includes(event.animationName) || currAnimationName === "none";
-        if (event.target === this.opts.ref.current && isCurrentAnimation) {
-            this.machine.dispatch("ANIMATION_END");
-        }
-    }
-    handleAnimationStart(event) {
-        if (!this.opts.ref.current)
-            return;
-        if (event.target === this.opts.ref.current) {
-            // Force refresh cache on animation start to get accurate animation name
-            const animationName = getAnimationName(this.opts.ref.current, true);
-            this.prevAnimationNameState = animationName;
-            // Update styles cache for subsequent reads
-            this.styles.animationName = animationName;
-        }
-    }
-    isPresent = $derived.by(() => {
-        return ["mounted", "unmountSuspended"].includes(this.machine.state.current);
-    });
-}
-function watchPresenceChange(state) {
-    watch(() => state.present.current, () => {
-        if (!state.opts.ref.current)
-            return;
-        const hasPresentChanged = state.present.current !== state.previousPresent.current;
-        if (!hasPresentChanged)
-            return;
-        const prevAnimationName = state.prevAnimationNameState;
-        // Force refresh on state change to get accurate current animation
-        const currAnimationName = getAnimationName(state.opts.ref.current, true);
-        // Update styles cache for subsequent reads
-        state.styles.animationName = currAnimationName;
-        if (state.present.current) {
-            state.machine.dispatch("MOUNT");
-        }
-        else if (currAnimationName === "none" || state.styles.display === "none") {
-            // If there is no exit animation or the element is hidden, animations won't run
-            // so we unmount instantly
-            state.machine.dispatch("UNMOUNT");
-        }
-        else {
-            /**
-             * When `present` changes to `false`, we check changes to animation-name to
-             * determine whether an animation has started. We chose this approach (reading
-             * computed styles) because there is no `animationrun` event and `animationstart`
-             * fires after `animation-delay` has expired which would be too late.
-             */
-            const isAnimating = prevAnimationName !== currAnimationName;
-            if (state.previousPresent.current && isAnimating) {
-                state.machine.dispatch("ANIMATION_OUT");
+        this.#isPresent = opts.open.current;
+        this.#afterAnimations = new AnimationsComplete({
+            ref: this.opts.ref,
+            afterTick: this.opts.open,
+        });
+        onDestroyEffect(() => this.#clearTransitionFrame());
+        watch(() => this.present.current, (isOpen) => {
+            if (!this.#hasMounted) {
+                this.#hasMounted = true;
+                return;
             }
-            else {
-                state.machine.dispatch("UNMOUNT");
+            this.#clearTransitionFrame();
+            if (isOpen) {
+                this.#isPresent = true;
             }
-        }
-    });
-}
-function watchStatusChange(state) {
-    watch(() => state.machine.state.current, () => {
-        if (!state.opts.ref.current)
-            return;
-        // Use cached animation name first, only force refresh if needed for mounted state
-        const currAnimationName = state.machine.state.current === "mounted"
-            ? getAnimationName(state.opts.ref.current, true)
-            : "none";
-        state.prevAnimationNameState = currAnimationName;
-        // Update styles cache
-        state.styles.animationName = currAnimationName;
+            this.#transitionStatus = isOpen ? "starting" : "ending";
+            if (isOpen) {
+                this.#transitionFrame = window.requestAnimationFrame(() => {
+                    this.#transitionFrame = null;
+                    if (this.present.current) {
+                        this.#transitionStatus = undefined;
+                    }
+                });
+            }
+            this.#afterAnimations.run(() => {
+                if (isOpen !== this.present.current)
+                    return;
+                if (!isOpen) {
+                    this.#isPresent = false;
+                }
+                this.#transitionStatus = undefined;
+            });
+        });
+    }
+    isPresent = $derived.by(() => {
+        return this.#isPresent;
     });
-}
-function watchRefChange(state) {
-    watch(() => state.opts.ref.current, () => {
-        if (!state.opts.ref.current)
+    get transitionStatus() {
+        return this.#transitionStatus;
+    }
+    #clearTransitionFrame() {
+        if (this.#transitionFrame === null)
             return;
-        // Snapshot only needed style properties instead of storing live CSSStyleDeclaration
-        // This avoids triggering style recalculations when accessing the cached object
-        const computed = getComputedStyle(state.opts.ref.current);
-        state.styles = {
-            display: computed.display,
-            animationName: computed.animationName || "none",
-        };
-        return executeCallbacks(on(state.opts.ref.current, "animationstart", state.handleAnimationStart), on(state.opts.ref.current, "animationcancel", state.handleAnimationEnd), on(state.opts.ref.current, "animationend", state.handleAnimationEnd));
-    });
-}
-/**
- * Gets the animation name from computed styles with optional caching.
- *
- * @param node - The HTML element to get animation name from
- * @param forceRefresh - If true, bypasses the cache and forces a fresh getComputedStyle call
- * @returns The animation name or "none" if not animating
- */
-function getAnimationName(node, forceRefresh = false) {
-    if (!node)
-        return "none";
-    const now = performance.now();
-    const cached = animationNameCache.get(node);
-    // Return cached value if still valid and not forced to refresh
-    if (!forceRefresh && cached && now - cached.timestamp < ANIMATION_NAME_CACHE_TTL_MS) {
-        return cached.value;
+        window.cancelAnimationFrame(this.#transitionFrame);
+        this.#transitionFrame = null;
     }
-    // Compute and cache the new value
-    const value = getComputedStyle(node).animationName || "none";
-    animationNameCache.set(node, { value, timestamp: now });
-    return value;
 }

package/dist/bits/utilities/presence-layer/types.d.ts

@@ -1,5 +1,6 @@
 import type { Snippet } from "svelte";
 import type { ReadableBox } from "svelte-toolbelt";
+import type { TransitionState } from "../../../internal/attrs.js";
 export type PresenceLayerProps = {
     /**
      * Whether to force mount the component.
@@ -11,8 +12,11 @@ export type PresenceLayerImplProps = PresenceLayerProps & {
      * The open state of the component.
      */
     open: boolean;
-    presence?: Snippet<[{
-        present: boolean;
-    }]>;
+    presence?: Snippet<[
+        {
+            present: boolean;
+            transitionStatus: TransitionState;
+        }
+    ]>;
     ref: ReadableBox<HTMLElement | null>;
 };

package/dist/internal/animations-complete.js

@@ -2,18 +2,22 @@ import { afterTick, onDestroyEffect } from "svelte-toolbelt";
 export class AnimationsComplete {
     #opts;
     #currentFrame = null;
+    #observer = null;
+    #runId = 0;
     constructor(opts) {
         this.#opts = opts;
         onDestroyEffect(() => this.#cleanup());
     }
     #cleanup() {
-        if (!this.#currentFrame)
-            return;
-        window.cancelAnimationFrame(this.#currentFrame);
-        this.#currentFrame = null;
+        if (this.#currentFrame !== null) {
+            window.cancelAnimationFrame(this.#currentFrame);
+            this.#currentFrame = null;
+        }
+        this.#observer?.disconnect();
+        this.#observer = null;
+        this.#runId++;
     }
     run(fn) {
-        // if already running, cleanup and restart
         this.#cleanup();
         const node = this.#opts.ref.current;
         if (!node)
@@ -22,14 +26,65 @@ export class AnimationsComplete {
             this.#executeCallback(fn);
             return;
         }
-        this.#currentFrame = window.requestAnimationFrame(() => {
+        const runId = this.#runId;
+        const executeIfCurrent = () => {
+            if (runId !== this.#runId)
+                return;
+            this.#executeCallback(fn);
+        };
+        const waitForAnimations = () => {
+            if (runId !== this.#runId)
+                return;
             const animations = node.getAnimations();
             if (animations.length === 0) {
-                this.#executeCallback(fn);
+                executeIfCurrent();
                 return;
             }
-            Promise.allSettled(animations.map((animation) => animation.finished)).then(() => {
-                this.#executeCallback(fn);
+            Promise.all(animations.map((animation) => animation.finished))
+                .then(() => {
+                executeIfCurrent();
+            })
+                .catch(() => {
+                if (runId !== this.#runId)
+                    return;
+                const currentAnimations = node.getAnimations();
+                const hasRunningAnimations = currentAnimations.some((animation) => animation.pending || animation.playState !== "finished");
+                if (hasRunningAnimations) {
+                    waitForAnimations();
+                    return;
+                }
+                executeIfCurrent();
+            });
+        };
+        const requestWaitForAnimations = () => {
+            this.#currentFrame = window.requestAnimationFrame(() => {
+                this.#currentFrame = null;
+                waitForAnimations();
+            });
+        };
+        if (!this.#opts.afterTick.current) {
+            requestWaitForAnimations();
+            return;
+        }
+        this.#currentFrame = window.requestAnimationFrame(() => {
+            this.#currentFrame = null;
+            const startingStyleAttr = "data-starting-style";
+            if (!node.hasAttribute(startingStyleAttr)) {
+                requestWaitForAnimations();
+                return;
+            }
+            this.#observer = new MutationObserver(() => {
+                if (runId !== this.#runId)
+                    return;
+                if (node.hasAttribute(startingStyleAttr))
+                    return;
+                this.#observer?.disconnect();
+                this.#observer = null;
+                requestWaitForAnimations();
+            });
+            this.#observer.observe(node, {
+                attributes: true,
+                attributeFilter: [startingStyleAttr],
             });
         });
     }

package/dist/internal/attrs.d.ts

@@ -4,6 +4,11 @@ export declare function boolToEmptyStrOrUndef(condition: boolean): "" | undefine
 export declare function boolToTrueOrUndef(condition: boolean): true | undefined;
 export declare function getDataOpenClosed(condition: boolean): "open" | "closed";
 export declare function getDataChecked(condition: boolean): "checked" | "unchecked";
+export type TransitionState = "starting" | "ending" | "idle" | undefined;
+export declare function getDataTransitionAttrs(state: TransitionState): {
+    "data-starting-style"?: "";
+    "data-ending-style"?: "";
+};
 export declare function getAriaChecked(checked: boolean, indeterminate: boolean): "true" | "false" | "mixed";
 export type BitsAttrsConfig<T extends readonly string[]> = {
     component: string;

package/dist/internal/attrs.js

@@ -16,10 +16,16 @@ export function getDataOpenClosed(condition) {
 export function getDataChecked(condition) {
     return condition ? "checked" : "unchecked";
 }
+export function getDataTransitionAttrs(state) {
+    if (state === "starting")
+        return { "data-starting-style": "" };
+    if (state === "ending")
+        return { "data-ending-style": "" };
+    return {};
+}
 export function getAriaChecked(checked, indeterminate) {
-    if (indeterminate) {
+    if (indeterminate)
         return "mixed";
-    }
     return checked ? "true" : "false";
 }
 export class BitsAttrs {

package/dist/internal/presence-manager.svelte.d.ts

@@ -1,14 +1,17 @@
-import type { ReadableBoxedValues } from "svelte-toolbelt";
+import { type ReadableBoxedValues } from "svelte-toolbelt";
+import type { TransitionState } from "./attrs.js";
 interface PresenceManagerOpts extends ReadableBoxedValues<{
     open: boolean;
     ref: HTMLElement | null;
 }> {
     onComplete?: () => void;
     enabled?: boolean;
+    shouldSkipExitAnimation?: () => boolean;
 }
 export declare class PresenceManager {
     #private;
     constructor(opts: PresenceManagerOpts);
     get shouldRender(): boolean;
+    get transitionStatus(): TransitionState;
 }
 export {};

package/dist/internal/presence-manager.svelte.js

@@ -1,10 +1,14 @@
 import { watch } from "runed";
+import { onDestroyEffect } from "svelte-toolbelt";
 import { AnimationsComplete } from "./animations-complete.js";
 export class PresenceManager {
     #opts;
     #enabled;
     #afterAnimations;
     #shouldRender = $state(false);
+    #transitionStatus = $state(undefined);
+    #hasMounted = false;
+    #transitionFrame = null;
     constructor(opts) {
         this.#opts = opts;
         this.#shouldRender = opts.open.current;
@@ -13,16 +17,44 @@ export class PresenceManager {
             ref: this.#opts.ref,
             afterTick: this.#opts.open,
         });
+        onDestroyEffect(() => this.#clearTransitionFrame());
         watch(() => this.#opts.open.current, (isOpen) => {
+            if (!this.#hasMounted) {
+                this.#hasMounted = true;
+                return;
+            }
+            this.#clearTransitionFrame();
+            if (!isOpen && this.#opts.shouldSkipExitAnimation?.()) {
+                this.#shouldRender = false;
+                this.#transitionStatus = undefined;
+                this.#opts.onComplete?.();
+                return;
+            }
             if (isOpen)
                 this.#shouldRender = true;
-            if (!this.#enabled)
+            this.#transitionStatus = isOpen ? "starting" : "ending";
+            if (isOpen) {
+                this.#transitionFrame = window.requestAnimationFrame(() => {
+                    this.#transitionFrame = null;
+                    if (this.#opts.open.current) {
+                        this.#transitionStatus = undefined;
+                    }
+                });
+            }
+            if (!this.#enabled) {
+                if (!isOpen) {
+                    this.#shouldRender = false;
+                }
+                this.#transitionStatus = undefined;
+                this.#opts.onComplete?.();
                 return;
+            }
             this.#afterAnimations.run(() => {
                 if (isOpen === this.#opts.open.current) {
                     if (!this.#opts.open.current) {
                         this.#shouldRender = false;
                     }
+                    this.#transitionStatus = undefined;
                     this.#opts.onComplete?.();
                 }
             });
@@ -31,4 +63,13 @@ export class PresenceManager {
     get shouldRender() {
         return this.#shouldRender;
     }
+    get transitionStatus() {
+        return this.#transitionStatus;
+    }
+    #clearTransitionFrame() {
+        if (this.#transitionFrame === null)
+            return;
+        window.cancelAnimationFrame(this.#transitionFrame);
+        this.#transitionFrame = null;
+    }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bits-ui",
-  "version": "2.16.4",
+  "version": "2.17.0",
   "license": "MIT",
   "repository": "github:huntabyte/bits-ui",
   "funding": "https://github.com/sponsors/huntabyte",