@johly/bits-ui 2.18.1

package/dist/internal/arrays.js

@@ -0,0 +1,234 @@
+/**
+ * Checks if two arrays are equal by comparing their values.
+ */
+export function arraysAreEqual(arr1, arr2) {
+    if (arr1.length !== arr2.length)
+        return false;
+    return arr1.every((value, index) => isEqual(value, arr2[index]));
+}
+/**
+ * A utility function that compares two values for equality.
+ */
+function isEqual(a, b) {
+    if (Number.isNaN(a) && Number.isNaN(b))
+        return true;
+    if (Array.isArray(a) && Array.isArray(b))
+        return arraysAreEqual(a, b);
+    if (typeof a === "object" && typeof b === "object")
+        return isDeepEqual(a, b);
+    return Object.is(a, b);
+}
+/**
+ * A utility function that compares two values for deep equality.
+ */
+function isDeepEqual(a, b) {
+    if (typeof a !== "object" || typeof b !== "object" || a === null || b === null)
+        return false;
+    const aKeys = Object.keys(a);
+    const bKeys = Object.keys(b);
+    if (aKeys.length !== bKeys.length)
+        return false;
+    for (const key of aKeys) {
+        if (!bKeys.includes(key))
+            return false;
+        if (!isEqual(a[key], b[key])) {
+            return false;
+        }
+    }
+    return true;
+}
+/**
+ * Splits an array into chunks of a given size.
+ * @param arr The array to split.
+ * @param size The size of each chunk.
+ * @returns An array of arrays, where each sub-array has `size` elements from the original array.
+ * @example ```ts
+ * const arr = [1, 2, 3, 4, 5, 6, 7, 8];
+ * const chunks = chunk(arr, 3);
+ * // chunks = [[1, 2, 3], [4, 5, 6], [7, 8]]
+ * ```
+ */
+export function chunk(arr, size) {
+    if (size <= 0)
+        return [];
+    const result = [];
+    for (let i = 0; i < arr.length; i += size) {
+        result.push(arr.slice(i, i + size));
+    }
+    return result;
+}
+/**
+ * Checks if the given index is valid for the given array.
+ *
+ * @param index - The index to check
+ * @param arr - The array to check
+ */
+export function isValidIndex(index, arr) {
+    return index >= 0 && index < arr.length;
+}
+/**
+ * Returns the array element after the given index, or undefined for out-of-bounds or empty arrays.
+ * @param array the array.
+ * @param index the index of the current element.
+ * @param loop loop to the beginning of the array if the next index is out of bounds?
+ */
+/**
+ * Returns the array element after the given index, or undefined for out-of-bounds or empty arrays.
+ * For single-element arrays, returns the element if the index is 0.
+ * @param array the array.
+ * @param index the index of the current element.
+ * @param loop loop to the beginning of the array if the next index is out of bounds?
+ */
+export function next(array, index, loop = true) {
+    if (array.length === 0 || index < 0 || index >= array.length)
+        return;
+    if (array.length === 1 && index === 0)
+        return array[0];
+    if (index === array.length - 1)
+        return loop ? array[0] : undefined;
+    return array[index + 1];
+}
+/**
+ * Returns the array element prior to the given index, or undefined for out-of-bounds or empty arrays.
+ * For single-element arrays, returns the element if the index is 0.
+ * @param array the array.
+ * @param index the index of the current element.
+ * @param loop loop to the end of the array if the previous index is out of bounds?
+ */
+export function prev(array, index, loop = true) {
+    if (array.length === 0 || index < 0 || index >= array.length)
+        return;
+    if (array.length === 1 && index === 0)
+        return array[0];
+    if (index === 0)
+        return loop ? array[array.length - 1] : undefined;
+    return array[index - 1];
+}
+/**
+ * Returns the element some number after the given index. If the target index is out of bounds:
+ *   - If looping is disabled, the first or last element will be returned.
+ *   - If looping is enabled, it will wrap around the array.
+ * Returns undefined for empty arrays or out-of-bounds initial indices.
+ * @param array the array.
+ * @param index the index of the current element.
+ * @param increment the number of elements to move forward (can be negative).
+ * @param loop loop around the array if the target index is out of bounds?
+ */
+export function forward(array, index, increment, loop = true) {
+    if (array.length === 0 || index < 0 || index >= array.length)
+        return;
+    let targetIndex = index + increment;
+    if (loop) {
+        // Ensure positive modulus
+        targetIndex = ((targetIndex % array.length) + array.length) % array.length;
+    }
+    else {
+        // Clamp to array bounds when not looping
+        targetIndex = Math.max(0, Math.min(targetIndex, array.length - 1));
+    }
+    return array[targetIndex];
+}
+/**
+ * Returns the element some number before the given index. If the target index is out of bounds:
+ *   - If looping is disabled, the first or last element will be returned.
+ *   - If looping is enabled, it will wrap around the array.
+ * Returns undefined for empty arrays or out-of-bounds initial indices.
+ * @param array the array.
+ * @param index the index of the current element.
+ * @param decrement the number of elements to move backward (can be negative).
+ * @param loop loop around the array if the target index is out of bounds?
+ */
+export function backward(array, index, decrement, loop = true) {
+    if (array.length === 0 || index < 0 || index >= array.length)
+        return;
+    let targetIndex = index - decrement;
+    if (loop) {
+        // Ensure positive modulus
+        targetIndex = ((targetIndex % array.length) + array.length) % array.length;
+    }
+    else {
+        // Clamp to array bounds when not looping
+        targetIndex = Math.max(0, Math.min(targetIndex, array.length - 1));
+    }
+    return array[targetIndex];
+}
+/**
+ * Finds the next matching item from a list of values based on a search string.
+ *
+ * This function handles several special cases in typeahead behavior:
+ *
+ * 1. Space handling: When a search string ends with a space, it handles it specially:
+ *    - If there's only one match for the text before the space, it ignores the space
+ *    - If there are multiple matches and the current match already starts with the search prefix
+ *      followed by a space, it keeps the current match (doesn't change selection on space)
+ *    - Only after typing characters beyond the space will it move to a more specific match
+ *
+ * 2. Repeated character handling: If a search consists of repeated characters (e.g., "aaa"),
+ *    it treats it as a single character for matching purposes
+ *
+ * 3. Cycling behavior: The function wraps around the values array starting from the current match
+ *    to find the next appropriate match, creating a cycling selection behavior
+ *
+ * @param values - Array of string values to search through (e.g., the text content of menu items)
+ * @param search - The current search string typed by the user
+ * @param currentMatch - The currently selected/matched item, if any
+ * @returns The next matching value that should be selected, or undefined if no match is found
+ */
+export function getNextMatch(values, search, currentMatch) {
+    const lowerSearch = search.toLowerCase();
+    if (lowerSearch.endsWith(" ")) {
+        const searchWithoutSpace = lowerSearch.slice(0, -1);
+        const matchesWithoutSpace = values.filter((value) => value.toLowerCase().startsWith(searchWithoutSpace));
+        /**
+         * If there's only one match for the prefix without space, we don't
+         * watch to match with space.
+         */
+        if (matchesWithoutSpace.length <= 1) {
+            return getNextMatch(values, searchWithoutSpace, currentMatch);
+        }
+        const currentMatchLowercase = currentMatch?.toLowerCase();
+        /**
+         * If the current match already starts with the search prefix and has a space afterward,
+         * and the user has only typed up to that space, keep the current match until they
+         * disambiguate.
+         */
+        if (currentMatchLowercase &&
+            currentMatchLowercase.startsWith(searchWithoutSpace) &&
+            currentMatchLowercase.charAt(searchWithoutSpace.length) === " " &&
+            search.trim() === searchWithoutSpace) {
+            return currentMatch;
+        }
+        /**
+         * With multiple matches, find items that match the full search string with space
+         */
+        const spacedMatches = values.filter((value) => value.toLowerCase().startsWith(lowerSearch));
+        /**
+         * If we found matches with the space, use the first one that's not the current match
+         */
+        if (spacedMatches.length > 0) {
+            const currentMatchIndex = currentMatch ? values.indexOf(currentMatch) : -1;
+            let wrappedMatches = wrapArray(spacedMatches, Math.max(currentMatchIndex, 0));
+            // return the first match that is not the current one.
+            const nextMatch = wrappedMatches.find((match) => match !== currentMatch);
+            // fallback to current if no other is found.
+            return nextMatch || currentMatch;
+        }
+    }
+    const isRepeated = search.length > 1 && Array.from(search).every((char) => char === search[0]);
+    const normalizedSearch = isRepeated ? search[0] : search;
+    const normalizedLowerSearch = normalizedSearch.toLowerCase();
+    const currentMatchIndex = currentMatch ? values.indexOf(currentMatch) : -1;
+    let wrappedValues = wrapArray(values, Math.max(currentMatchIndex, 0));
+    const excludeCurrentMatch = normalizedSearch.length === 1;
+    if (excludeCurrentMatch)
+        wrappedValues = wrappedValues.filter((v) => v !== currentMatch);
+    const nextMatch = wrappedValues.find((value) => value?.toLowerCase().startsWith(normalizedLowerSearch));
+    return nextMatch !== currentMatch ? nextMatch : undefined;
+}
+/**
+ * Wraps an array around itself at a given start index
+ * Example: `wrapArray(['a', 'b', 'c', 'd'], 2) === ['c', 'd', 'a', 'b']`
+ */
+export function wrapArray(array, startIndex) {
+    return array.map((_, index) => array[(startIndex + index) % array.length]);
+}

package/dist/internal/attrs.d.ts

@@ -0,0 +1,33 @@
+export declare function boolToStr(condition: boolean): "true" | "false";
+export declare function boolToStrTrueOrUndef(condition: boolean): "true" | undefined;
+export declare function boolToEmptyStrOrUndef(condition: boolean): "" | undefined;
+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;
+    parts: T;
+    getVariant?: () => string | null;
+};
+export type CreateBitsAttrsReturn<T extends readonly string[]> = {
+    [K in T[number]]: string;
+} & {
+    selector: (part: T[number]) => string;
+    getAttr: (part: T[number], variant?: string) => string;
+};
+export declare class BitsAttrs<T extends readonly string[]> {
+    #private;
+    attrs: Record<T[number], string>;
+    constructor(config: BitsAttrsConfig<T>);
+    getAttr(part: T[number], variantOverride?: string): string;
+    selector(part: T[number], variantOverride?: string): string;
+}
+export declare function createBitsAttrs<const T extends readonly string[]>(config: Omit<BitsAttrsConfig<T>, "parts"> & {
+    parts: T;
+}): CreateBitsAttrsReturn<T>;

package/dist/internal/attrs.js

@@ -0,0 +1,58 @@
+export function boolToStr(condition) {
+    return condition ? "true" : "false";
+}
+export function boolToStrTrueOrUndef(condition) {
+    return condition ? "true" : undefined;
+}
+export function boolToEmptyStrOrUndef(condition) {
+    return condition ? "" : undefined;
+}
+export function boolToTrueOrUndef(condition) {
+    return condition ? true : undefined;
+}
+export function getDataOpenClosed(condition) {
+    return condition ? "open" : "closed";
+}
+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)
+        return "mixed";
+    return checked ? "true" : "false";
+}
+export class BitsAttrs {
+    #variant;
+    #prefix;
+    attrs;
+    constructor(config) {
+        this.#variant = config.getVariant ? config.getVariant() : null;
+        this.#prefix = this.#variant ? `data-${this.#variant}-` : `data-${config.component}-`;
+        this.getAttr = this.getAttr.bind(this);
+        this.selector = this.selector.bind(this);
+        this.attrs = Object.fromEntries(config.parts.map((part) => [part, this.getAttr(part)]));
+    }
+    getAttr(part, variantOverride) {
+        if (variantOverride)
+            return `data-${variantOverride}-${part}`;
+        return `${this.#prefix}${part}`;
+    }
+    selector(part, variantOverride) {
+        return `[${this.getAttr(part, variantOverride)}]`;
+    }
+}
+export function createBitsAttrs(config) {
+    const bitsAttrs = new BitsAttrs(config);
+    return {
+        ...bitsAttrs.attrs,
+        selector: bitsAttrs.selector,
+        getAttr: bitsAttrs.getAttr,
+    };
+}

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

@@ -0,0 +1,10 @@
+import { type Getter, type ReadableBox } from "svelte-toolbelt";
+export interface ScrollBodyOption {
+    padding?: boolean | number;
+    margin?: boolean | number;
+}
+export declare class BodyScrollLock {
+    #private;
+    readonly locked: ReadableBox<boolean> | undefined;
+    constructor(initialState?: boolean | undefined, restoreScrollDelay?: Getter<number | null>);
+}

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

@@ -0,0 +1,196 @@
+import { SvelteMap } from "svelte/reactivity";
+import { afterTick, boxWith, onDestroyEffect, } from "svelte-toolbelt";
+import { isIOS } from "./is.js";
+import { useId } from "./use-id.js";
+import { watch } from "runed";
+import { SharedState } from "./shared-state.svelte.js";
+import { BROWSER } from "esm-env";
+import { on } from "svelte/events";
+/** A map of lock ids to their `locked` state. */
+const lockMap = new SvelteMap();
+let initialBodyStyle = $state(null);
+let stopTouchMoveListener = null;
+let cleanupTimeoutId = null;
+let isInCleanupTransition = false;
+const anyLocked = boxWith(() => {
+    for (const value of lockMap.values()) {
+        if (value)
+            return true;
+    }
+    return false;
+});
+/**
+ * We track the time we scheduled the cleanup to prevent race conditions
+ * when multiple locks are created/destroyed in the same tick, ensuring
+ * only the last one to schedule the cleanup will run.
+ *
+ * reference: https://github.com/huntabyte/bits-ui/issues/1639
+ */
+let cleanupScheduledAt = null;
+const bodyLockStackCount = new SharedState(() => {
+    function resetBodyStyle() {
+        if (!BROWSER)
+            return;
+        document.body.setAttribute("style", initialBodyStyle ?? "");
+        document.body.style.removeProperty("--scrollbar-width");
+        isIOS && stopTouchMoveListener?.();
+        // reset initialBodyStyle so next locker captures the correct styles
+        initialBodyStyle = null;
+    }
+    function cancelPendingCleanup() {
+        if (cleanupTimeoutId === null)
+            return;
+        window.clearTimeout(cleanupTimeoutId);
+        cleanupTimeoutId = null;
+    }
+    function scheduleCleanupIfNoNewLocks(delay, callback) {
+        cancelPendingCleanup();
+        isInCleanupTransition = true;
+        cleanupScheduledAt = Date.now();
+        const currentCleanupId = cleanupScheduledAt;
+        /**
+         * We schedule the cleanup to run after a delay to allow new locks to register
+         * that might have been added in the same tick as the current cleanup.
+         *
+         * If a new lock is added in the same tick, the cleanup will be cancelled and
+         * a new cleanup will be scheduled.
+         *
+         * This is to prevent the cleanup from running too early and resetting the body
+         * style before the new lock has had a chance to apply its styles.
+         */
+        const cleanupFn = () => {
+            cleanupTimeoutId = null;
+            // check if this cleanup is still valid (no newer cleanups scheduled)
+            if (cleanupScheduledAt !== currentCleanupId)
+                return;
+            // ensure no new locks were added during the delay
+            if (!isAnyLocked(lockMap)) {
+                isInCleanupTransition = false;
+                callback();
+            }
+            else {
+                isInCleanupTransition = false;
+            }
+        };
+        const actualDelay = delay === null ? 24 : delay;
+        cleanupTimeoutId = window.setTimeout(cleanupFn, actualDelay);
+    }
+    function ensureInitialStyleCaptured() {
+        // only capture initial style once, when no locks exist and no cleanup is in progress
+        if (initialBodyStyle === null && lockMap.size === 0 && !isInCleanupTransition) {
+            initialBodyStyle = document.body.getAttribute("style");
+        }
+    }
+    watch(() => anyLocked.current, () => {
+        if (!anyLocked.current)
+            return;
+        // ensure we've captured the initial style before applying any lock styles
+        ensureInitialStyleCaptured();
+        // if we're applying lock styles, we're no longer in a cleanup transition
+        isInCleanupTransition = false;
+        const htmlStyle = getComputedStyle(document.documentElement);
+        const bodyStyle = getComputedStyle(document.body);
+        // check if scrollbar-gutter: stable is already handling scrollbar space
+        const hasStableGutter = htmlStyle.scrollbarGutter?.includes("stable") ||
+            bodyStyle.scrollbarGutter?.includes("stable");
+        // 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),
+        };
+        // only add padding compensation if stable gutter isn't handling it
+        if (verticalScrollbarWidth > 0 && !hasStableGutter) {
+            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) {
+            // IOS devices are special and require a touchmove listener to prevent scrolling
+            stopTouchMoveListener = on(document, "touchmove", (e) => {
+                if (e.target !== document.documentElement)
+                    return;
+                if (e.touches.length > 1)
+                    return;
+                e.preventDefault();
+            }, { passive: false });
+        }
+        /**
+         * We ensure pointer-events: none is applied _after_ DOM updates, so that any focus/
+         * interaction changes from opening overlays/menus complete _before_ we block pointer
+         * events.
+         *
+         * this avoids race conditions where pointer-events could be set too early and break
+         * focus/interaction.
+         */
+        afterTick(() => {
+            document.body.style.pointerEvents = "none";
+            document.body.style.overflow = "hidden";
+        });
+    });
+    onDestroyEffect(() => {
+        return () => {
+            stopTouchMoveListener?.();
+        };
+    });
+    return {
+        get lockMap() {
+            return lockMap;
+        },
+        resetBodyStyle,
+        scheduleCleanupIfNoNewLocks,
+        cancelPendingCleanup,
+        ensureInitialStyleCaptured,
+    };
+});
+export class BodyScrollLock {
+    #id = useId();
+    #initialState;
+    #restoreScrollDelay = () => null;
+    #countState;
+    locked;
+    constructor(initialState, restoreScrollDelay = () => null) {
+        this.#initialState = initialState;
+        this.#restoreScrollDelay = restoreScrollDelay;
+        this.#countState = bodyLockStackCount.get();
+        if (!this.#countState)
+            return;
+        /**
+         * Since a new lock is being created, we cancel any pending cleanup to
+         * prevent the cleanup from running too early and resetting the body style
+         * before the new lock has had a chance to apply its styles.
+         *
+         * reference: https://github.com/huntabyte/bits-ui/issues/1639
+         */
+        this.#countState.cancelPendingCleanup();
+        // capture initial style before this lock is registered
+        this.#countState.ensureInitialStyleCaptured();
+        this.#countState.lockMap.set(this.#id, this.#initialState ?? false);
+        this.locked = boxWith(() => this.#countState.lockMap.get(this.#id) ?? false, (v) => this.#countState.lockMap.set(this.#id, v));
+        onDestroyEffect(() => {
+            this.#countState.lockMap.delete(this.#id);
+            // if not the last lock, we don't need to do anything
+            if (isAnyLocked(this.#countState.lockMap))
+                return;
+            const restoreScrollDelay = this.#restoreScrollDelay();
+            /**
+             * We schedule the cleanup to run after a delay to handle same-tick
+             * destroy/create scenarios.
+             *
+             * reference: https://github.com/huntabyte/bits-ui/issues/1639
+             */
+            this.#countState.scheduleCleanupIfNoNewLocks(restoreScrollDelay, () => {
+                this.#countState.resetBodyStyle();
+            });
+        });
+    }
+}
+function isAnyLocked(map) {
+    for (const [_, value] of map) {
+        if (value)
+            return true;
+    }
+    return false;
+}

package/dist/internal/box-auto-reset.svelte.d.ts

@@ -0,0 +1,14 @@
+import { type WritableBox } from "svelte-toolbelt";
+type BoxAutoResetOptions<T> = {
+    afterMs?: number;
+    onChange?: (value: T) => void;
+    getWindow: () => Window & typeof globalThis;
+};
+/**
+ * Creates a box which will be reset to the default value after some time.
+ *
+ * @param defaultValue The value which will be set.
+ * @param afterMs      A zero-or-greater delay in milliseconds.
+ */
+export declare function boxAutoReset<T>(defaultValue: T, options: BoxAutoResetOptions<T>): WritableBox<T>;
+export {};

package/dist/internal/box-auto-reset.svelte.js

@@ -0,0 +1,36 @@
+import { boxWith } from "svelte-toolbelt";
+import { noop } from "./noop.js";
+const defaultOptions = {
+    afterMs: 10000,
+    onChange: noop,
+};
+/**
+ * Creates a box which will be reset to the default value after some time.
+ *
+ * @param defaultValue The value which will be set.
+ * @param afterMs      A zero-or-greater delay in milliseconds.
+ */
+export function boxAutoReset(defaultValue, options) {
+    const { afterMs, onChange, getWindow } = { ...defaultOptions, ...options };
+    let timeout = null;
+    let value = $state(defaultValue);
+    function resetAfter() {
+        return getWindow().setTimeout(() => {
+            value = defaultValue;
+            onChange?.(defaultValue);
+        }, afterMs);
+    }
+    $effect(() => {
+        return () => {
+            if (timeout)
+                getWindow().clearTimeout(timeout);
+        };
+    });
+    return boxWith(() => value, (v) => {
+        value = v;
+        onChange?.(v);
+        if (timeout)
+            getWindow().clearTimeout(timeout);
+        timeout = resetAfter();
+    });
+}

package/dist/internal/clamp.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Clamps a number between a minimum and maximum value.
+ */
+export declare function clamp(n: number, min: number, max: number): number;

package/dist/internal/clamp.js

@@ -0,0 +1,6 @@
+/**
+ * Clamps a number between a minimum and maximum value.
+ */
+export function clamp(n, min, max) {
+    return Math.min(max, Math.max(min, n));
+}

package/dist/internal/create-id.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Creates a unique ID for a given uid and optional prefix.
+ *
+ * @param uid - the uid generated by $props.id()
+ * @param prefix - optional prefix to use for the id (defaults to "bits")
+ */
+export declare function createId(uid: string): string;
+export declare function createId(prefix: string, uid: string): string;

package/dist/internal/create-id.js

@@ -0,0 +1,5 @@
+export function createId(prefixOrUid, uid) {
+    if (uid === undefined)
+        return `bits-${prefixOrUid}`;
+    return `bits-${prefixOrUid}-${uid}`;
+}

package/dist/internal/css-escape.d.ts

@@ -0,0 +1,7 @@
+/**
+ * https://github.com/mathiasbynens/CSS.escape
+ *
+ * @param value - The value to escape for use as a CSS identifier
+ * @returns The escaped CSS identifier string
+ */
+export declare function cssEscape(value: string): string;