bits-ui 2.7.0 → 2.8.1

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,
-    };
-}