bits-ui 2.7.0 → 2.8.0

package/dist/internal/{use-roving-focus.svelte.d.ts → roving-focus-group.d.ts}

@@ -1,6 +1,6 @@
 import { type Box, type ReadableBox } from "svelte-toolbelt";
 import type { Orientation } from "../shared/index.js";
-type UseRovingFocusProps = ({
+type RovingFocusGroupOptions = ({
     /**
      * The selector used to find the focusable candidates.
      */
@@ -31,12 +31,13 @@ type UseRovingFocusProps = ({
      */
     onCandidateFocus?: (node: HTMLElement) => void;
 };
-export type UseRovingFocusReturn = ReturnType<typeof useRovingFocus>;
-export declare function useRovingFocus(opts: UseRovingFocusProps): {
+export declare class RovingFocusGroup {
+    #private;
+    constructor(opts: RovingFocusGroupOptions);
+    getCandidateNodes(): HTMLElement[];
+    focusFirstCandidate(): void;
+    handleKeydown(node: HTMLElement | null | undefined, e: KeyboardEvent, both?: boolean): HTMLElement | undefined;
+    getTabIndex(node: HTMLElement | null | undefined): 0 | -1;
     setCurrentTabStopId(id: string): void;
-    getTabIndex: (node: HTMLElement | null | undefined) => 0 | -1;
-    handleKeydown: (node: HTMLElement | null | undefined, e: KeyboardEvent, both?: boolean) => HTMLElement | undefined;
-    focusFirstCandidate: () => void;
-    currentTabStopId: import("svelte-toolbelt").WritableBox<string | null>;
-};
+}
 export {};

package/dist/internal/{use-roving-focus.svelte.js → roving-focus-group.js}

@@ -2,41 +2,43 @@ import { box } from "svelte-toolbelt";
 import { getElemDirection } from "./locale.js";
 import { getDirectionalKeys } from "./get-directional-keys.js";
 import { kbd } from "./kbd.js";
-import { isBrowser } from "./is.js";
-export function useRovingFocus(opts) {
-    const currentTabStopId = box(null);
-    function getCandidateNodes() {
-        if (!isBrowser)
-            return [];
-        if (!opts.rootNode.current)
+import { BROWSER } from "esm-env";
+export class RovingFocusGroup {
+    #opts;
+    #currentTabStopId = box(null);
+    constructor(opts) {
+        this.#opts = opts;
+    }
+    getCandidateNodes() {
+        if (!BROWSER || !this.#opts.rootNode.current)
             return [];
-        if (opts.candidateSelector) {
-            const candidates = Array.from(opts.rootNode.current.querySelectorAll(opts.candidateSelector));
+        if (this.#opts.candidateSelector) {
+            const candidates = Array.from(this.#opts.rootNode.current.querySelectorAll(this.#opts.candidateSelector));
             return candidates;
         }
-        else if (opts.candidateAttr) {
-            const candidates = Array.from(opts.rootNode.current.querySelectorAll(`[${opts.candidateAttr}]:not([data-disabled])`));
+        else if (this.#opts.candidateAttr) {
+            const candidates = Array.from(this.#opts.rootNode.current.querySelectorAll(`[${this.#opts.candidateAttr}]:not([data-disabled])`));
             return candidates;
         }
         return [];
     }
-    function focusFirstCandidate() {
-        const items = getCandidateNodes();
+    focusFirstCandidate() {
+        const items = this.getCandidateNodes();
         if (!items.length)
             return;
         items[0]?.focus();
     }
-    function handleKeydown(node, e, both = false) {
-        const rootNode = opts.rootNode.current;
+    handleKeydown(node, e, both = false) {
+        const rootNode = this.#opts.rootNode.current;
         if (!rootNode || !node)
             return;
-        const items = getCandidateNodes();
+        const items = this.getCandidateNodes();
         if (!items.length)
             return;
         const currentIndex = items.indexOf(node);
         const dir = getElemDirection(rootNode);
-        const { nextKey, prevKey } = getDirectionalKeys(dir, opts.orientation.current);
-        const loop = opts.loop.current;
+        const { nextKey, prevKey } = getDirectionalKeys(dir, this.#opts.orientation.current);
+        const loop = this.#opts.loop.current;
         const keyToIndex = {
             [nextKey]: currentIndex + 1,
             [prevKey]: currentIndex - 1,
@@ -63,29 +65,23 @@ export function useRovingFocus(opts) {
         if (!itemToFocus)
             return;
         itemToFocus.focus();
-        currentTabStopId.current = itemToFocus.id;
-        opts.onCandidateFocus?.(itemToFocus);
+        this.#currentTabStopId.current = itemToFocus.id;
+        this.#opts.onCandidateFocus?.(itemToFocus);
         return itemToFocus;
     }
-    function getTabIndex(node) {
-        const items = getCandidateNodes();
-        const anyActive = currentTabStopId.current !== null;
+    getTabIndex(node) {
+        const items = this.getCandidateNodes();
+        const anyActive = this.#currentTabStopId.current !== null;
         if (node && !anyActive && items[0] === node) {
-            currentTabStopId.current = node.id;
+            this.#currentTabStopId.current = node.id;
             return 0;
         }
-        else if (node?.id === currentTabStopId.current) {
+        else if (node?.id === this.#currentTabStopId.current) {
             return 0;
         }
         return -1;
     }
-    return {
-        setCurrentTabStopId(id) {
-            currentTabStopId.current = id;
-        },
-        getTabIndex,
-        handleKeydown,
-        focusFirstCandidate,
-        currentTabStopId,
-    };
+    setCurrentTabStopId(id) {
+        this.#currentTabStopId.current = id;
+    }
 }

package/dist/internal/shared-state.svelte.d.ts

@@ -0,0 +1,6 @@
+import type { AnyFn } from "./types.js";
+export declare class SharedState<T extends AnyFn> {
+    #private;
+    constructor(factory: T);
+    get(...args: Parameters<T>): ReturnType<T>;
+}

package/dist/internal/shared-state.svelte.js

@@ -0,0 +1,31 @@
+export class SharedState {
+    #factory;
+    #subscribers = 0;
+    #state = $state();
+    #scope;
+    constructor(factory) {
+        this.#factory = factory;
+    }
+    #dispose() {
+        this.#subscribers -= 1;
+        if (this.#scope && this.#subscribers <= 0) {
+            this.#scope();
+            this.#state = undefined;
+            this.#scope = undefined;
+        }
+    }
+    get(...args) {
+        this.#subscribers += 1;
+        if (this.#state === undefined) {
+            this.#scope = $effect.root(() => {
+                this.#state = this.#factory(...args);
+            });
+        }
+        $effect(() => {
+            return () => {
+                this.#dispose();
+            };
+        });
+        return this.#state;
+    }
+}

package/dist/internal/should-trap-focus.js

@@ -1,6 +1,5 @@
 export function shouldTrapFocus({ forceMount, present, trapFocus, open, }) {
-    if (forceMount) {
+    if (forceMount)
         return open && trapFocus;
-    }
     return present && trapFocus && open;
 }

package/dist/internal/state-machine.d.ts

@@ -0,0 +1,16 @@
+import { type WritableBox } from "svelte-toolbelt";
+interface Machine<S> {
+    [k: string]: {
+        [k: string]: S;
+    };
+}
+type MachineState<T> = keyof T;
+type MachineEvent<T> = keyof UnionToIntersection<T[keyof T]>;
+type UnionToIntersection<T> = (T extends any ? (x: T) => any : never) extends (x: infer R) => any ? R : never;
+export declare class StateMachine<M> {
+    #private;
+    readonly state: WritableBox<MachineState<M>>;
+    constructor(initialState: MachineState<M>, machine: M & Machine<MachineState<M>>);
+    dispatch(event: MachineEvent<M>): void;
+}
+export {};

package/dist/internal/state-machine.js

@@ -0,0 +1,18 @@
+import { box } from "svelte-toolbelt";
+export class StateMachine {
+    state;
+    #machine;
+    constructor(initialState, machine) {
+        this.state = box(initialState);
+        this.#machine = machine;
+        this.dispatch = this.dispatch.bind(this);
+    }
+    #reducer(event) {
+        // @ts-expect-error  state.current is keyof M
+        const nextState = this.#machine[this.state.current][event];
+        return nextState ?? this.state.current;
+    }
+    dispatch(event) {
+        this.state.current = this.#reducer(event);
+    }
+}

package/dist/internal/svelte-resize-observer.svelte.d.ts

@@ -0,0 +1,6 @@
+import type { Getter } from "svelte-toolbelt";
+export declare class SvelteResizeObserver {
+    #private;
+    constructor(node: Getter<HTMLElement | null>, onResize: () => void);
+    handler(): (() => void) | undefined;
+}

package/dist/internal/svelte-resize-observer.svelte.js

@@ -0,0 +1,25 @@
+export class SvelteResizeObserver {
+    #node;
+    #onResize;
+    constructor(node, onResize) {
+        this.#node = node;
+        this.#onResize = onResize;
+        this.handler = this.handler.bind(this);
+        $effect(this.handler);
+    }
+    handler() {
+        let rAF = 0;
+        const _node = this.#node();
+        if (!_node)
+            return;
+        const resizeObserver = new ResizeObserver(() => {
+            cancelAnimationFrame(rAF);
+            rAF = window.requestAnimationFrame(this.#onResize);
+        });
+        resizeObserver.observe(_node);
+        return () => {
+            window.cancelAnimationFrame(rAF);
+            resizeObserver.unobserve(_node);
+        };
+    }
+}

package/dist/internal/tabbable.d.ts

@@ -1,4 +1,3 @@
-export declare function getTabbableIn(container: HTMLElement, direction: "next" | "prev"): import("tabbable").FocusableElement | undefined;
 /**
  * Gets all tabbable elements in the body and finds the next/previous tabbable element
  * from the `currentNode` based on the `direction` provided.

package/dist/internal/tabbable.js

@@ -1,5 +1,4 @@
 import { focusable, isFocusable, isTabbable, tabbable } from "tabbable";
-import { activeElement } from "./dom.js";
 import { getDocument } from "svelte-toolbelt";
 function getTabbableOptions() {
     return {
@@ -14,16 +13,6 @@ function getTabbableOptions() {
             : "none",
     };
 }
-export function getTabbableIn(container, direction) {
-    const allTabbable = tabbable(container, getTabbableOptions());
-    if (direction === "prev") {
-        allTabbable.reverse();
-    }
-    const activeEl = activeElement(getDocument(container));
-    const activeIndex = allTabbable.indexOf(activeEl);
-    const nextTabbableElements = allTabbable.slice(activeIndex + 1);
-    return nextTabbableElements[0];
-}
 /**
  * Gets all tabbable elements in the body and finds the next/previous tabbable element
  * from the `currentNode` based on the `direction` provided.

package/dist/internal/timeout-fn.d.ts

@@ -0,0 +1,16 @@
+import type { AnyFn } from "./types.js";
+type TimeoutFnOptions = {
+    /**
+     * Start the timer immediate after calling this function
+     *
+     * @default true
+     */
+    immediate?: boolean;
+};
+export declare class TimeoutFn<T extends AnyFn> {
+    #private;
+    constructor(cb: T, interval: number, opts?: TimeoutFnOptions);
+    stop(): void;
+    start(...args: Parameters<T> | []): void;
+}
+export {};

package/dist/internal/timeout-fn.js

@@ -0,0 +1,38 @@
+import { onDestroyEffect } from "svelte-toolbelt";
+import { BROWSER } from "esm-env";
+const defaultOpts = {
+    immediate: true,
+};
+export class TimeoutFn {
+    #opts;
+    #interval;
+    #cb;
+    #timer = null;
+    constructor(cb, interval, opts = {}) {
+        this.#cb = cb;
+        this.#interval = interval;
+        this.#opts = { ...defaultOpts, ...opts };
+        this.stop = this.stop.bind(this);
+        this.start = this.start.bind(this);
+        if (this.#opts.immediate && BROWSER) {
+            this.start();
+        }
+        onDestroyEffect(this.stop);
+    }
+    #clear() {
+        if (this.#timer !== null) {
+            window.clearTimeout(this.#timer);
+            this.#timer = null;
+        }
+    }
+    stop() {
+        this.#clear();
+    }
+    start(...args) {
+        this.#clear();
+        this.#timer = window.setTimeout(() => {
+            this.#timer = null;
+            this.#cb(...args);
+        }, this.#interval);
+    }
+}

package/dist/internal/types.d.ts

@@ -1,5 +1,5 @@
 import type { Snippet } from "svelte";
-import type { Box, ReadableBoxedValues, WritableBoxedValues } from "./box.svelte.js";
+import type { Box, ReadableBoxedValues, WritableBoxedValues } from "svelte-toolbelt";
 import type { StyleProperties } from "../shared/index.js";
 export type OnChangeFn<T> = (value: T) => void;
 export type ElementRef = Box<HTMLElement | null>;
@@ -78,7 +78,7 @@ export type Without<T extends object, U extends object> = Omit<T, keyof U>;
 export type Arrayable<T> = T[] | T;
 export type Fn = () => void;
 export type AnyFn = (...args: any[]) => any;
-export type WithRefProps<T = {}> = T & ReadableBoxedValues<{
+export type WithRefOpts<T = {}> = T & ReadableBoxedValues<{
     id: string;
 }> & WritableBoxedValues<{
     ref: HTMLElement | null;

package/package.json

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

package/dist/bits/utilities/presence-layer/use-presence.svelte.d.ts

@@ -1,4 +0,0 @@
-import { type ReadableBox } from "svelte-toolbelt";
-export declare function usePresence(present: ReadableBox<boolean>, ref: ReadableBox<HTMLElement | null>): {
-    readonly current: boolean;
-};

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

@@ -1,97 +0,0 @@
-import { executeCallbacks } from "svelte-toolbelt";
-import { Previous, watch } from "runed";
-import { on } from "svelte/events";
-import { useStateMachine } from "../../../internal/use-state-machine.svelte.js";
-export function usePresence(present, ref) {
-    let styles = $state({});
-    let prevAnimationNameState = $state("none");
-    const initialState = present.current ? "mounted" : "unmounted";
-    const prevPresent = new Previous(() => present.current);
-    const { state, dispatch } = useStateMachine(initialState, {
-        mounted: {
-            UNMOUNT: "unmounted",
-            ANIMATION_OUT: "unmountSuspended",
-        },
-        unmountSuspended: {
-            MOUNT: "mounted",
-            ANIMATION_END: "unmounted",
-        },
-        unmounted: {
-            MOUNT: "mounted",
-        },
-    });
-    watch(() => present.current, () => {
-        if (!ref.current)
-            return;
-        const hasPresentChanged = present.current !== prevPresent.current;
-        if (!hasPresentChanged)
-            return;
-        const prevAnimationName = prevAnimationNameState;
-        const currAnimationName = getAnimationName(ref.current);
-        if (present.current) {
-            dispatch("MOUNT");
-        }
-        else if (currAnimationName === "none" || styles.display === "none") {
-            // If there is no exit animation or the element is hidden, animations won't run
-            // so we unmount instantly
-            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 (prevPresent && isAnimating) {
-                dispatch("ANIMATION_OUT");
-            }
-            else {
-                dispatch("UNMOUNT");
-            }
-        }
-    });
-    /**
-     * 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.
-     */
-    function handleAnimationEnd(event) {
-        if (!ref.current)
-            return;
-        const currAnimationName = getAnimationName(ref.current);
-        const isCurrentAnimation = currAnimationName.includes(event.animationName) || currAnimationName === "none";
-        if (event.target === ref.current && isCurrentAnimation) {
-            dispatch("ANIMATION_END");
-        }
-    }
-    function handleAnimationStart(event) {
-        if (!ref.current)
-            return;
-        if (event.target === ref.current) {
-            prevAnimationNameState = getAnimationName(ref.current);
-        }
-    }
-    watch(() => state.current, () => {
-        if (!ref.current)
-            return;
-        const currAnimationName = getAnimationName(ref.current);
-        prevAnimationNameState = state.current === "mounted" ? currAnimationName : "none";
-    });
-    watch(() => ref.current, () => {
-        if (!ref.current)
-            return;
-        styles = getComputedStyle(ref.current);
-        return executeCallbacks(on(ref.current, "animationstart", handleAnimationStart), on(ref.current, "animationcancel", handleAnimationEnd), on(ref.current, "animationend", handleAnimationEnd));
-    });
-    const isPresentDerived = $derived(["mounted", "unmountSuspended"].includes(state.current));
-    return {
-        get current() {
-            return isPresentDerived;
-        },
-    };
-}
-function getAnimationName(node) {
-    return node ? getComputedStyle(node).animationName || "none" : "none";
-}

package/dist/internal/box.svelte.d.ts

@@ -1,21 +0,0 @@
-import type { ReadableBox, WritableBox } from "svelte-toolbelt";
-export type Box<T> = ReadableBox<T> | WritableBox<T>;
-export type WritableBoxedValues<T> = {
-    [K in keyof T]: WritableBox<T[K]>;
-};
-export type ReadableBoxedValues<T> = {
-    [K in keyof T]: ReadableBox<T[K]>;
-};
-type WatcherCallback<T> = (curr: T, prev: T) => void | Promise<void> | (() => void) | (() => Promise<void>);
-type WatchOptions = {
-    /**
-     * Whether to eagerly run the watcher before the state is updated.
-     */
-    immediate?: boolean;
-    /**
-     * Whether to run the watcher only once.
-     */
-    once?: boolean;
-};
-export declare function watch<T>(box: Box<T>, callback: WatcherCallback<T>, options?: WatchOptions): () => void;
-export {};

package/dist/internal/box.svelte.js

@@ -1,26 +0,0 @@
-import { untrack } from "svelte";
-export function watch(box, callback, options = {}) {
-    let prev = $state(box.current);
-    let ranOnce = false;
-    const watchEffect = $effect.root(() => {
-        $effect.pre(() => {
-            if (prev === box.current || !options.immediate)
-                return;
-            if (options.once && ranOnce)
-                return;
-            callback(box.current, untrack(() => prev));
-            untrack(() => (prev = box.current));
-            ranOnce = true;
-        });
-        $effect(() => {
-            if (prev === box.current || options.immediate)
-                return;
-            if (options.once && ranOnce)
-                return;
-            callback(box.current, untrack(() => prev));
-            untrack(() => (prev = box.current));
-            ranOnce = true;
-        });
-    });
-    return watchEffect;
-}

package/dist/internal/create-event-hook.svelte.d.ts

@@ -1,18 +0,0 @@
-export type IfAny<T, Y, N> = 0 extends 1 & T ? Y : N;
-/**
- * will return `true` if `T` is `any`, or `false` otherwise
- */
-export type IsAny<T> = IfAny<T, true, false>;
-type Callback<T> = IsAny<T> extends true ? (param: any) => void : [T] extends [void] ? () => void : (param: T) => void;
-export type EventHookOn<T = unknown> = (fn: Callback<T>) => {
-    off: () => void;
-};
-export type EventHookOff<T = unknown> = (fn: Callback<T>) => void;
-export type EventHookTrigger<T = unknown> = (param?: T) => Promise<unknown[]>;
-export interface EventHook<T = unknown> {
-    on: EventHookOn<T>;
-    off: EventHookOff<T>;
-    trigger: EventHookTrigger<T>;
-}
-export declare function createEventHook<T = unknown>(): EventHook<T>;
-export {};

package/dist/internal/create-event-hook.svelte.js

@@ -1,29 +0,0 @@
-import { executeCallbacks } from "svelte-toolbelt";
-export function createEventHook() {
-    const callbacks = new Set();
-    const callbacksToDispose = [];
-    function off(cb) {
-        callbacks.delete(cb);
-    }
-    function on(cb) {
-        callbacks.add(cb);
-        const offFn = () => off(cb);
-        callbacksToDispose.push(offFn);
-        return { off: offFn };
-    }
-    const trigger = (...args) => {
-        return Promise.all(Array.from(callbacks).map((cb) => {
-            return Promise.resolve(cb(...args));
-        }));
-    };
-    $effect(() => {
-        return () => {
-            executeCallbacks(callbacksToDispose);
-        };
-    });
-    return {
-        on,
-        off,
-        trigger,
-    };
-}

package/dist/internal/create-shared-hook.svelte.d.ts

@@ -1,2 +0,0 @@
-import type { AnyFn } from "./types.js";
-export declare function createSharedHook<T extends AnyFn>(factory: T): T;

package/dist/internal/create-shared-hook.svelte.js

@@ -1,27 +0,0 @@
-export function createSharedHook(factory) {
-    let subscribers = 0;
-    let state = $state();
-    let scope;
-    function dispose() {
-        subscribers -= 1;
-        if (scope && subscribers <= 0) {
-            scope();
-            state = undefined;
-            scope = undefined;
-        }
-    }
-    return ((...args) => {
-        subscribers += 1;
-        if (state === undefined) {
-            scope = $effect.root(() => {
-                state = factory(...args);
-            });
-        }
-        $effect(() => {
-            return () => {
-                dispose();
-            };
-        });
-        return state;
-    });
-}

package/dist/internal/sleep.d.ts

@@ -1 +0,0 @@
-export declare function sleep(ms: number): Promise<unknown>;

package/dist/internal/sleep.js

@@ -1,3 +0,0 @@
-export function sleep(ms) {
-    return new Promise((resolve) => setTimeout(resolve, ms));
-}

package/dist/internal/use-after-animations.svelte.d.ts

@@ -1,5 +0,0 @@
-import type { Getter } from "svelte-toolbelt";
-/**
- * Calls a function the next frame after all animations have finished.
- */
-export declare function useAfterAnimations(getNode: Getter<HTMLElement | null>): (fn: () => void) => void;

package/dist/internal/use-after-animations.svelte.js

@@ -1,27 +0,0 @@
-import { flushSync } from "svelte";
-/**
- * Calls a function the next frame after all animations have finished.
- */
-export function useAfterAnimations(getNode) {
-    let frame = -1;
-    function cancelFrame() {
-        cancelAnimationFrame(frame);
-    }
-    $effect(() => cancelFrame);
-    return (fn) => {
-        cancelFrame();
-        const node = getNode();
-        if (!node)
-            return;
-        if (typeof node.getAnimations !== "function" || globalThis.bitsAnimationsDisabled) {
-            fn();
-        }
-        else {
-            frame = requestAnimationFrame(() => {
-                Promise.allSettled(node.getAnimations().map((anim) => anim.finished)).then(() => {
-                    flushSync(fn);
-                });
-            });
-        }
-    };
-}

package/dist/internal/use-body-scroll-lock.svelte.d.ts

@@ -1,6 +0,0 @@
-import { type Getter } from "svelte-toolbelt";
-export type ScrollBodyOption = {
-    padding?: boolean | number;
-    margin?: boolean | number;
-};
-export declare function useBodyScrollLock(initialState?: boolean | undefined, restoreScrollDelay?: Getter<number | null>): import("svelte-toolbelt").WritableBox<boolean> | undefined;