bits-ui 2.7.0 → 2.8.1

package/dist/bits/utilities/focus-scope/focus-scope-stack.svelte.d.ts

@@ -1,14 +0,0 @@
-export interface FocusScopeAPI {
-    id: string;
-    paused: boolean;
-    pause: () => void;
-    resume: () => void;
-    isHandlingFocus: boolean;
-}
-export declare function createFocusScopeStack(): {
-    add(focusScope: FocusScopeAPI): void;
-    remove(focusScope: FocusScopeAPI): void;
-    readonly current: FocusScopeAPI[];
-};
-export declare function createFocusScopeAPI(): FocusScopeAPI;
-export declare function removeLinks(items: HTMLElement[]): HTMLElement[];

package/dist/bits/utilities/focus-scope/focus-scope-stack.svelte.js

@@ -1,50 +0,0 @@
-import { box } from "svelte-toolbelt";
-import { useId } from "../../../internal/use-id.js";
-const focusStack = box([]);
-export function createFocusScopeStack() {
-    return {
-        add(focusScope) {
-            const activeFocusScope = focusStack.current[0];
-            if (activeFocusScope && focusScope.id !== activeFocusScope.id) {
-                activeFocusScope.pause();
-            }
-            focusStack.current = removeFromFocusScopeArray(focusStack.current, focusScope);
-            focusStack.current.unshift(focusScope);
-        },
-        remove(focusScope) {
-            focusStack.current = removeFromFocusScopeArray(focusStack.current, focusScope);
-            focusStack.current[0]?.resume();
-        },
-        get current() {
-            return focusStack.current;
-        },
-    };
-}
-export function createFocusScopeAPI() {
-    let paused = $state(false);
-    let isHandlingFocus = $state(false);
-    return {
-        id: useId(),
-        get paused() {
-            return paused;
-        },
-        get isHandlingFocus() {
-            return isHandlingFocus;
-        },
-        set isHandlingFocus(value) {
-            isHandlingFocus = value;
-        },
-        pause() {
-            paused = true;
-        },
-        resume() {
-            paused = false;
-        },
-    };
-}
-function removeFromFocusScopeArray(arr, item) {
-    return [...arr].filter((i) => i.id !== item.id);
-}
-export function removeLinks(items) {
-    return items.filter((item) => item.tagName !== "A");
-}

package/dist/bits/utilities/focus-scope/use-focus-scope.svelte.d.ts

@@ -1,49 +0,0 @@
-import { Context } from "runed";
-import type { ReadableBoxedValues } from "../../../internal/box.svelte.js";
-import { type EventCallback } from "../../../internal/events.js";
-export type FocusScopeContextValue = {
-    ignoreCloseAutoFocus: boolean;
-};
-export declare const FocusScopeContext: Context<FocusScopeContextValue>;
-type UseFocusScopeProps = ReadableBoxedValues<{
-    /**
-     * ID of the focus scope container node.
-     */
-    id: string;
-    /**
-     * When `true` will loop through the tabbable elements in the focus scope.
-     *
-     * @defaultValue false
-     */
-    loop: boolean;
-    /**
-     * Whether focus is trapped within the focus scope.
-     *
-     * @defaultValue false
-     */
-    enabled: boolean;
-    /**
-     * Event handler called when auto-focusing onMount.
-     * Can be prevented.
-     */
-    onOpenAutoFocus: EventCallback;
-    /**
-     * Event handler called when auto-focusing onDestroy.
-     * Can be prevented.
-     */
-    onCloseAutoFocus: EventCallback;
-    /**
-     * Whether force mount is enabled or not
-     */
-    forceMount: boolean;
-    ref: HTMLElement | null;
-}>;
-export type FocusScopeContainerProps = {
-    id: string;
-    tabindex: number;
-    onkeydown: EventCallback<KeyboardEvent>;
-};
-export declare function useFocusScope({ id, loop, enabled, onOpenAutoFocus, onCloseAutoFocus, forceMount, ref, }: UseFocusScopeProps): {
-    readonly props: FocusScopeContainerProps;
-};
-export {};

package/dist/bits/utilities/focus-scope/use-focus-scope.svelte.js

@@ -1,218 +0,0 @@
-import { afterSleep, afterTick, DOMContext, executeCallbacks } from "svelte-toolbelt";
-import { Context, watch } from "runed";
-import { on } from "svelte/events";
-import { createFocusScopeAPI, createFocusScopeStack, removeLinks, } from "./focus-scope-stack.svelte.js";
-import { focus, focusFirst, getTabbableCandidates, getTabbableEdges } from "../../../internal/focus.js";
-import { CustomEventDispatcher } from "../../../internal/events.js";
-import { isHTMLElement } from "../../../internal/is.js";
-import { kbd } from "../../../internal/kbd.js";
-import { isTabbable } from "tabbable";
-const AutoFocusOnMountEvent = new CustomEventDispatcher("focusScope.autoFocusOnMount", {
-    bubbles: false,
-    cancelable: true,
-});
-const AutoFocusOnDestroyEvent = new CustomEventDispatcher("focusScope.autoFocusOnDestroy", {
-    bubbles: false,
-    cancelable: true,
-});
-export const FocusScopeContext = new Context("FocusScope");
-export function useFocusScope({ id, loop, enabled, onOpenAutoFocus, onCloseAutoFocus, forceMount, ref, }) {
-    const focusScopeStack = createFocusScopeStack();
-    const focusScope = createFocusScopeAPI();
-    const ctx = FocusScopeContext.getOr({ ignoreCloseAutoFocus: false });
-    let lastFocusedElement = null;
-    const domContext = new DOMContext(ref);
-    function manageFocus(event) {
-        if (focusScope.paused || !ref.current || focusScope.isHandlingFocus)
-            return;
-        focusScope.isHandlingFocus = true;
-        try {
-            const target = event.target;
-            if (!isHTMLElement(target))
-                return;
-            const isWithinActiveScope = ref.current.contains(target);
-            if (event.type === "focusin") {
-                if (isWithinActiveScope) {
-                    lastFocusedElement = target;
-                }
-                else {
-                    if (ctx.ignoreCloseAutoFocus)
-                        return;
-                    focus(lastFocusedElement, { select: true });
-                }
-            }
-            else if (event.type === "focusout") {
-                if (!isWithinActiveScope && !ctx.ignoreCloseAutoFocus) {
-                    focus(lastFocusedElement, { select: true });
-                }
-            }
-        }
-        finally {
-            focusScope.isHandlingFocus = false;
-        }
-    }
-    /**
-     * Handles DOM mutations within the container. Specifically checks if the
-     * last known focused element inside the container has been removed. If so,
-     * and focus has escaped the container (likely moved to document.body),
-     * it refocuses the container itself to maintain the trap.
-     */
-    function handleMutations(mutations) {
-        // if there's no record of a last focused el, or container isn't mounted, bail
-        if (!lastFocusedElement || !ref.current)
-            return;
-        // track if the last focused element was removed
-        let elementWasRemoved = false;
-        for (const mutation of mutations) {
-            // we only care about mutations where nodes were removed
-            if (mutation.type === "childList" && mutation.removedNodes.length > 0) {
-                // check if any removed nodes are the last focused element or contain it
-                for (const removedNode of mutation.removedNodes) {
-                    if (removedNode === lastFocusedElement) {
-                        elementWasRemoved = true;
-                        // found it directly
-                        break;
-                    }
-                    // contains() only works on elements, so we need to check nodeType
-                    if (removedNode.nodeType === Node.ELEMENT_NODE &&
-                        removedNode.contains(lastFocusedElement)) {
-                        elementWasRemoved = true;
-                        // descendant found,
-                        break;
-                    }
-                }
-            }
-            // if we've confirmed removal in any mutation, bail
-            if (elementWasRemoved)
-                break;
-        }
-        /**
-         * If the element was removed and focus is now outside the container,
-         * (e.g., browser moved it to body), refocus the container.
-         */
-        if (elementWasRemoved &&
-            ref.current &&
-            !ref.current.contains(domContext.getActiveElement())) {
-            focus(ref.current);
-        }
-    }
-    watch([() => ref.current, () => enabled.current], ([container, enabled]) => {
-        if (!container || !enabled)
-            return;
-        const removeEvents = executeCallbacks(on(domContext.getDocument(), "focusin", manageFocus), on(domContext.getDocument(), "focusout", manageFocus));
-        const mutationObserver = new MutationObserver(handleMutations);
-        mutationObserver.observe(container, {
-            childList: true,
-            subtree: true,
-            attributes: false,
-        });
-        return () => {
-            removeEvents();
-            mutationObserver.disconnect();
-        };
-    });
-    watch([() => forceMount.current, () => ref.current], ([forceMount, container]) => {
-        if (forceMount)
-            return;
-        const prevFocusedElement = domContext.getActiveElement();
-        handleOpen(container, prevFocusedElement);
-        return () => {
-            if (!container)
-                return;
-            handleClose(prevFocusedElement);
-        };
-    });
-    watch([() => forceMount.current, () => ref.current, () => enabled.current], ([forceMount, container]) => {
-        if (!forceMount)
-            return;
-        const prevFocusedElement = domContext.getActiveElement();
-        handleOpen(container, prevFocusedElement);
-        return () => {
-            if (!container)
-                return;
-            handleClose(prevFocusedElement);
-        };
-    });
-    function handleOpen(container, prevFocusedElement) {
-        if (!container)
-            container = domContext.getElementById(id.current);
-        if (!container || !enabled.current)
-            return;
-        focusScopeStack.add(focusScope);
-        const hasFocusedCandidate = container.contains(prevFocusedElement);
-        if (!hasFocusedCandidate) {
-            const mountEvent = AutoFocusOnMountEvent.createEvent();
-            onOpenAutoFocus.current(mountEvent);
-            if (!mountEvent.defaultPrevented) {
-                afterTick(() => {
-                    if (!container)
-                        return;
-                    const result = focusFirst(removeLinks(getTabbableCandidates(container)), {
-                        select: true,
-                    }, () => domContext.getActiveElement());
-                    if (!result)
-                        focus(container);
-                });
-            }
-        }
-    }
-    function handleClose(prevFocusedElement) {
-        const destroyEvent = AutoFocusOnDestroyEvent.createEvent();
-        onCloseAutoFocus.current?.(destroyEvent);
-        const shouldIgnore = ctx.ignoreCloseAutoFocus;
-        afterSleep(0, () => {
-            if (!destroyEvent.defaultPrevented && prevFocusedElement && !shouldIgnore) {
-                focus(isTabbable(prevFocusedElement)
-                    ? prevFocusedElement
-                    : domContext.getDocument().body, {
-                    select: true,
-                });
-            }
-            focusScopeStack.remove(focusScope);
-        });
-    }
-    function handleKeydown(e) {
-        if (!enabled.current)
-            return;
-        if (!loop.current && !enabled.current)
-            return;
-        if (focusScope.paused)
-            return;
-        const isTabKey = e.key === kbd.TAB && !e.ctrlKey && !e.altKey && !e.metaKey;
-        const focusedElement = domContext.getActiveElement();
-        if (!(isTabKey && focusedElement))
-            return;
-        const container = ref.current;
-        if (!container)
-            return;
-        const [first, last] = getTabbableEdges(container);
-        const hasTabbableElementsInside = first && last;
-        if (!hasTabbableElementsInside) {
-            if (focusedElement === container) {
-                e.preventDefault();
-            }
-        }
-        else {
-            if (!e.shiftKey && focusedElement === last) {
-                e.preventDefault();
-                if (loop.current)
-                    focus(first, { select: true });
-            }
-            else if (e.shiftKey && focusedElement === first) {
-                e.preventDefault();
-                if (loop.current)
-                    focus(last, { select: true });
-            }
-        }
-    }
-    const props = $derived.by(() => ({
-        id: id.current,
-        tabindex: -1,
-        onkeydown: handleKeydown,
-    }));
-    return {
-        get props() {
-            return props;
-        },
-    };
-}

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/should-trap-focus.d.ts

@@ -1,6 +0,0 @@
-export declare function shouldTrapFocus({ forceMount, present, trapFocus, open, }: {
-    forceMount: boolean;
-    present: boolean;
-    trapFocus: boolean;
-    open: boolean;
-}): boolean;

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

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

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;