bits-ui 2.6.2 → 2.8.0

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;

package/dist/internal/use-body-scroll-lock.svelte.js

@@ -1,106 +0,0 @@
-import { SvelteMap } from "svelte/reactivity";
-import { afterSleep, afterTick, box } from "svelte-toolbelt";
-import { untrack } from "svelte";
-import { isBrowser, isIOS } from "./is.js";
-import { addEventListener } from "./events.js";
-import { useId } from "./use-id.js";
-import { createSharedHook } from "./create-shared-hook.svelte.js";
-const useBodyLockStackCount = createSharedHook(() => {
-    const map = new SvelteMap();
-    const locked = $derived.by(() => {
-        for (const value of map.values()) {
-            if (value) {
-                return true;
-            }
-        }
-        return false;
-    });
-    let initialBodyStyle = $state(null);
-    let stopTouchMoveListener = null;
-    function resetBodyStyle() {
-        if (!isBrowser)
-            return;
-        document.body.setAttribute("style", initialBodyStyle ?? "");
-        document.body.style.removeProperty("--scrollbar-width");
-        isIOS && stopTouchMoveListener?.();
-    }
-    $effect(() => {
-        const curr = locked;
-        return untrack(() => {
-            if (!curr) {
-                return;
-            }
-            initialBodyStyle = document.body.getAttribute("style");
-            const bodyStyle = getComputedStyle(document.body);
-            // TODO: account for RTL direction, etc.
-            const verticalScrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
-            const paddingRight = Number.parseInt(bodyStyle.paddingRight ?? "0", 10);
-            const config = {
-                padding: paddingRight + verticalScrollbarWidth,
-                margin: Number.parseInt(bodyStyle.marginRight ?? "0", 10),
-            };
-            if (verticalScrollbarWidth > 0) {
-                document.body.style.paddingRight = `${config.padding}px`;
-                document.body.style.marginRight = `${config.margin}px`;
-                document.body.style.setProperty("--scrollbar-width", `${verticalScrollbarWidth}px`);
-                document.body.style.overflow = "hidden";
-            }
-            if (isIOS) {
-                stopTouchMoveListener = addEventListener(document, "touchmove", (e) => {
-                    if (e.target !== document.documentElement)
-                        return;
-                    if (e.touches.length > 1)
-                        return;
-                    e.preventDefault();
-                }, { passive: false });
-            }
-            afterTick(() => {
-                document.body.style.pointerEvents = "none";
-                document.body.style.overflow = "hidden";
-            });
-        });
-    });
-    $effect(() => {
-        return () => {
-            stopTouchMoveListener?.();
-        };
-    });
-    return {
-        get map() {
-            return map;
-        },
-        resetBodyStyle,
-    };
-});
-export function useBodyScrollLock(initialState, restoreScrollDelay = () => null) {
-    const id = useId();
-    const countState = useBodyLockStackCount();
-    if (!countState)
-        return;
-    const _restoreScrollDelay = $derived(restoreScrollDelay());
-    countState.map.set(id, initialState ?? false);
-    const locked = box.with(() => countState.map.get(id) ?? false, (v) => countState.map.set(id, v));
-    $effect(() => {
-        return () => {
-            countState.map.delete(id);
-            // if any locks are still active, we don't reset the body style
-            if (isAnyLocked(countState.map))
-                return;
-            // if no locks are active (meaning this was the last lock), we reset the body style
-            if (_restoreScrollDelay === null) {
-                requestAnimationFrame(() => countState.resetBodyStyle());
-            }
-            else {
-                afterSleep(_restoreScrollDelay, () => countState.resetBodyStyle());
-            }
-        };
-    });
-    return locked;
-}
-function isAnyLocked(map) {
-    for (const [_, value] of map) {
-        if (value)
-            return true;
-    }
-    return false;
-}

package/dist/internal/use-data-typeahead.svelte.d.ts

@@ -1,15 +0,0 @@
-import type { Getter } from "svelte-toolbelt";
-export type DataTypeahead = ReturnType<typeof useDataTypeahead>;
-type UseDataTypeaheadOpts = {
-    onMatch: (value: string) => void;
-    getCurrentItem: () => string;
-    candidateValues: Getter<string[]>;
-    enabled: Getter<boolean>;
-    getWindow: () => Window & typeof globalThis;
-};
-export declare function useDataTypeahead(opts: UseDataTypeaheadOpts): {
-    search: import("svelte-toolbelt").WritableBox<string>;
-    handleTypeaheadSearch: (key: string) => string | undefined;
-    resetTypeahead: () => void;
-};
-export {};

package/dist/internal/use-data-typeahead.svelte.js

@@ -1,34 +0,0 @@
-import { getNextMatch } from "./arrays.js";
-import { boxAutoReset } from "./box-auto-reset.svelte.js";
-export function useDataTypeahead(opts) {
-    // Reset `search` 1 second after it was last updated
-    const search = boxAutoReset("", {
-        afterMs: 1000,
-        getWindow: opts.getWindow,
-    });
-    const candidateValues = $derived(opts.candidateValues());
-    function handleTypeaheadSearch(key) {
-        if (!opts.enabled())
-            return;
-        if (!candidateValues.length)
-            return;
-        search.current = search.current + key;
-        const currentItem = opts.getCurrentItem();
-        const currentMatch = candidateValues.find((item) => item === currentItem) ?? "";
-        const values = candidateValues.map((item) => item ?? "");
-        const nextMatch = getNextMatch(values, search.current, currentMatch);
-        const newItem = candidateValues.find((item) => item === nextMatch);
-        if (newItem) {
-            opts.onMatch(newItem);
-        }
-        return newItem;
-    }
-    function resetTypeahead() {
-        search.current = "";
-    }
-    return {
-        search,
-        handleTypeaheadSearch,
-        resetTypeahead,
-    };
-}

package/dist/internal/use-dom-typeahead.svelte.d.ts

@@ -1,13 +0,0 @@
-export type DOMTypeahead = ReturnType<typeof useDOMTypeahead>;
-type UseDOMTypeaheadOpts = {
-    onMatch?: (item: HTMLElement) => void;
-    getCurrentItem?: () => HTMLElement | null;
-    getActiveElement: () => HTMLElement | null;
-    getWindow: () => Window & typeof globalThis;
-};
-export declare function useDOMTypeahead(opts: UseDOMTypeaheadOpts): {
-    search: import("svelte-toolbelt").WritableBox<string>;
-    handleTypeaheadSearch: (key: string, candidates: HTMLElement[]) => HTMLElement | undefined;
-    resetTypeahead: () => void;
-};
-export {};

package/dist/internal/use-dom-typeahead.svelte.js

@@ -1,32 +0,0 @@
-import { getNextMatch } from "./arrays.js";
-import { boxAutoReset } from "./box-auto-reset.svelte.js";
-export function useDOMTypeahead(opts) {
-    // Reset `search` 1 second after it was last updated
-    const search = boxAutoReset("", {
-        afterMs: 1000,
-        getWindow: opts.getWindow,
-    });
-    const onMatch = opts?.onMatch ?? ((node) => node.focus());
-    const getCurrentItem = opts?.getCurrentItem ?? (() => opts?.getActiveElement());
-    function handleTypeaheadSearch(key, candidates) {
-        if (!candidates.length)
-            return;
-        search.current = search.current + key;
-        const currentItem = getCurrentItem();
-        const currentMatch = candidates.find((item) => item === currentItem)?.textContent?.trim() ?? "";
-        const values = candidates.map((item) => item.textContent?.trim() ?? "");
-        const nextMatch = getNextMatch(values, search.current, currentMatch);
-        const newItem = candidates.find((item) => item.textContent?.trim() === nextMatch);
-        if (newItem)
-            onMatch(newItem);
-        return newItem;
-    }
-    function resetTypeahead() {
-        search.current = "";
-    }
-    return {
-        search,
-        handleTypeaheadSearch,
-        resetTypeahead,
-    };
-}

package/dist/internal/use-form-control.svelte.d.ts

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

package/dist/internal/use-form-control.svelte.js

@@ -1,16 +0,0 @@
-import { isBrowser } from "./is.js";
-export function useFormControl(getNode) {
-    const isInForm = $derived.by(() => {
-        if (!isBrowser)
-            return false;
-        const node = getNode();
-        if (!node)
-            return false;
-        return Boolean(node.closest("form"));
-    });
-    return {
-        get current() {
-            return isInForm;
-        },
-    };
-}

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

@@ -1,2 +0,0 @@
-import type { Getter } from "svelte-toolbelt";
-export declare function useResizeObserver(node: Getter<HTMLElement | null>, onResize: () => void): void;

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

@@ -1,17 +0,0 @@
-export function useResizeObserver(node, onResize) {
-    $effect(() => {
-        let rAF = 0;
-        const _node = node();
-        if (!_node)
-            return;
-        const resizeObserver = new ResizeObserver(() => {
-            cancelAnimationFrame(rAF);
-            rAF = window.requestAnimationFrame(onResize);
-        });
-        resizeObserver.observe(_node);
-        return () => {
-            window.cancelAnimationFrame(rAF);
-            resizeObserver.unobserve(_node);
-        };
-    });
-}

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

@@ -1,24 +0,0 @@
-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;
-/**
- * The `useStateMachine` function is a TypeScript function that creates a state machine and returns the
- * current state and a dispatch function to update the state based on events.
- * @param initialState - The `initialState` parameter is the initial state of the state machine. It
- * represents the starting point of the state machine's state.
- * @param machine - The `machine` parameter is an object that represents a state machine. It should
- * have keys that correspond to the possible states of the machine, and the values should be objects
- * that represent the possible events and their corresponding next states.
- * @returns The `useStateMachine` function returns an object with two properties: `state` and
- * `dispatch`.
- */
-export declare function useStateMachine<M>(initialState: MachineState<M>, machine: M & Machine<MachineState<M>>): {
-    state: import("svelte-toolbelt").WritableBox<keyof M>;
-    dispatch: (event: MachineEvent<M>) => void;
-};
-export {};

package/dist/internal/use-state-machine.svelte.js

@@ -1,28 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import { box } from "svelte-toolbelt";
-/**
- * The `useStateMachine` function is a TypeScript function that creates a state machine and returns the
- * current state and a dispatch function to update the state based on events.
- * @param initialState - The `initialState` parameter is the initial state of the state machine. It
- * represents the starting point of the state machine's state.
- * @param machine - The `machine` parameter is an object that represents a state machine. It should
- * have keys that correspond to the possible states of the machine, and the values should be objects
- * that represent the possible events and their corresponding next states.
- * @returns The `useStateMachine` function returns an object with two properties: `state` and
- * `dispatch`.
- */
-export function useStateMachine(initialState, machine) {
-    const state = box(initialState);
-    function reducer(event) {
-        // @ts-expect-error  state.value is keyof M
-        const nextState = machine[state.current][event];
-        return nextState ?? state.current;
-    }
-    const dispatch = (event) => {
-        state.current = reducer(event);
-    };
-    return {
-        state,
-        dispatch,
-    };
-}

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

@@ -1,25 +0,0 @@
-import type { Box } from "./box.svelte.js";
-import type { AnyFn, Fn } from "./types.js";
-export type UseTimeoutFnOptions = {
-    /**
-     * Start the timer immediate after calling this function
-     *
-     * @default true
-     */
-    immediate?: boolean;
-};
-export type Stoppable<StartFnArgs extends unknown[] = unknown[]> = {
-    /**
-     * A ref indicate whether a stoppable instance is executing
-     */
-    isPending: Readonly<Box<boolean>>;
-    /**
-     * Stop the effect from executing
-     */
-    stop: Fn;
-    /**
-     * Start the effects
-     */
-    start: (...args: StartFnArgs) => void;
-};
-export declare function useTimeoutFn<T extends AnyFn>(cb: T, interval: number, options?: UseTimeoutFnOptions): Stoppable<Parameters<T> | []>;

package/dist/internal/use-timeout-fn.svelte.js

@@ -1,39 +0,0 @@
-import { box, onDestroyEffect } from "svelte-toolbelt";
-import { isBrowser } from "./is.js";
-export function useTimeoutFn(cb, interval, options = {}) {
-    const { immediate = true } = options;
-    const isPending = box(false);
-    let timer;
-    function clear() {
-        if (timer) {
-            clearTimeout(timer);
-            timer = null;
-        }
-    }
-    function stop() {
-        isPending.current = false;
-        clear();
-    }
-    function start(...args) {
-        clear();
-        isPending.current = true;
-        timer = setTimeout(() => {
-            isPending.current = false;
-            timer = null;
-            cb(...args);
-        }, interval);
-    }
-    if (immediate) {
-        isPending.current = true;
-        if (isBrowser)
-            start();
-    }
-    onDestroyEffect(() => {
-        stop();
-    });
-    return {
-        isPending: box.readonly(isPending),
-        start,
-        stop,
-    };
-}