bits-ui 2.16.5 → 2.17.1

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.5",
+  "version": "2.17.1",
   "license": "MIT",
   "repository": "github:huntabyte/bits-ui",
   "funding": "https://github.com/sponsors/huntabyte",