bits-ui 2.6.2 → 2.8.0

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

@@ -0,0 +1,44 @@
+import { getNextMatch } from "./arrays.js";
+import { boxAutoReset } from "./box-auto-reset.svelte.js";
+export class DOMTypeahead {
+    #opts;
+    #search;
+    #onMatch = $derived.by(() => {
+        if (this.#opts.onMatch)
+            return this.#opts.onMatch;
+        return (node) => node.focus();
+    });
+    #getCurrentItem = $derived.by(() => {
+        if (this.#opts.getCurrentItem)
+            return this.#opts.getCurrentItem;
+        return this.#opts.getActiveElement;
+    });
+    constructor(opts) {
+        this.#opts = opts;
+        this.#search = boxAutoReset("", {
+            afterMs: 1000,
+            getWindow: opts.getWindow,
+        });
+        this.handleTypeaheadSearch = this.handleTypeaheadSearch.bind(this);
+        this.resetTypeahead = this.resetTypeahead.bind(this);
+    }
+    handleTypeaheadSearch(key, candidates) {
+        if (!candidates.length)
+            return;
+        this.#search.current = this.#search.current + key;
+        const currentItem = this.#getCurrentItem();
+        const currentMatch = candidates.find((item) => item === currentItem)?.textContent?.trim() ?? "";
+        const values = candidates.map((item) => item.textContent?.trim() ?? "");
+        const nextMatch = getNextMatch(values, this.#search.current, currentMatch);
+        const newItem = candidates.find((item) => item.textContent?.trim() === nextMatch);
+        if (newItem)
+            this.#onMatch(newItem);
+        return newItem;
+    }
+    resetTypeahead() {
+        this.#search.current = "";
+    }
+    get search() {
+        return this.#search.current;
+    }
+}

package/dist/internal/dom.d.ts

@@ -1,4 +1,3 @@
-export declare function activeElement(doc: Document): Element | null;
 export declare function getFirstNonCommentChild(element: HTMLElement | null): ChildNode | null;
 /**
  * Determines if the click event truly occurred outside the content node.
@@ -6,4 +5,3 @@ export declare function getFirstNonCommentChild(element: HTMLElement | null): Ch
  * into the DOM but visually appear inside the content.
  */
 export declare function isClickTrulyOutside(event: PointerEvent, contentNode: HTMLElement): boolean;
-export declare function getTarget(event: Event): EventTarget | null | undefined;

package/dist/internal/dom.js

@@ -1,10 +1,3 @@
-export function activeElement(doc) {
-    let activeElement = doc.activeElement;
-    while (activeElement?.shadowRoot?.activeElement != null) {
-        activeElement = activeElement.shadowRoot.activeElement;
-    }
-    return activeElement;
-}
 export function getFirstNonCommentChild(element) {
     if (!element)
         return null;
@@ -25,11 +18,3 @@ export function isClickTrulyOutside(event, contentNode) {
     const rect = contentNode.getBoundingClientRect();
     return (clientX < rect.left || clientX > rect.right || clientY < rect.top || clientY > rect.bottom);
 }
-export function getTarget(event) {
-    if ("composedPath" in event) {
-        return event.composedPath()[0];
-    }
-    // TS thinks `event` is of type never as it assumes all browsers support
-    // `composedPath()`, but browsers without shadow DOM don't.
-    return event.target;
-}

package/dist/internal/{use-grace-area.svelte.d.ts → grace-area.svelte.d.ts}

@@ -1,5 +1,5 @@
 import { type Getter } from "svelte-toolbelt";
-interface UseGraceAreaOpts {
+interface GraceAreaOptions {
     enabled: Getter<boolean>;
     triggerNode: Getter<HTMLElement | null>;
     contentNode: Getter<HTMLElement | null>;
@@ -7,7 +7,8 @@ interface UseGraceAreaOpts {
     setIsPointerInTransit?: (value: boolean) => void;
     transitTimeout?: number;
 }
-export declare function useGraceArea(opts: UseGraceAreaOpts): {
-    isPointerInTransit: import("svelte-toolbelt").WritableBox<boolean>;
-};
+export declare class GraceArea {
+    #private;
+    constructor(opts: GraceAreaOptions);
+}
 export {};

package/dist/internal/{use-grace-area.svelte.js → grace-area.svelte.js}

@@ -1,25 +1,66 @@
-import { executeCallbacks, getDocument, getWindow } from "svelte-toolbelt";
+import { executeCallbacks, getDocument, getWindow, } from "svelte-toolbelt";
 import { on } from "svelte/events";
 import { watch } from "runed";
 import { boxAutoReset } from "./box-auto-reset.svelte.js";
 import { isElement, isHTMLElement } from "./is.js";
-export function useGraceArea(opts) {
-    const enabled = $derived(opts.enabled());
-    const isPointerInTransit = boxAutoReset(false, {
-        afterMs: opts.transitTimeout ?? 300,
-        onChange: (value) => {
-            if (enabled) {
-                opts.setIsPointerInTransit?.(value);
-            }
-        },
-        getWindow: () => getWindow(opts.triggerNode()),
-    });
-    let pointerGraceArea = $state(null);
-    function handleRemoveGraceArea() {
-        pointerGraceArea = null;
-        isPointerInTransit.current = false;
+export class GraceArea {
+    #opts;
+    #enabled;
+    #isPointerInTransit;
+    #pointerGraceArea = $state(null);
+    constructor(opts) {
+        this.#opts = opts;
+        this.#enabled = $derived(this.#opts.enabled());
+        this.#isPointerInTransit = boxAutoReset(false, {
+            afterMs: opts.transitTimeout ?? 300,
+            onChange: (value) => {
+                if (!this.#enabled)
+                    return;
+                this.#opts.setIsPointerInTransit?.(value);
+            },
+            getWindow: () => getWindow(this.#opts.triggerNode()),
+        });
+        watch([opts.triggerNode, opts.contentNode, opts.enabled], ([triggerNode, contentNode, enabled]) => {
+            if (!triggerNode || !contentNode || !enabled)
+                return;
+            const handleTriggerLeave = (e) => {
+                this.#createGraceArea(e, contentNode);
+            };
+            const handleContentLeave = (e) => {
+                this.#createGraceArea(e, triggerNode);
+            };
+            return executeCallbacks(on(triggerNode, "pointerleave", handleTriggerLeave), on(contentNode, "pointerleave", handleContentLeave));
+        });
+        watch(() => this.#pointerGraceArea, () => {
+            const handleTrackPointerGrace = (e) => {
+                if (!this.#pointerGraceArea)
+                    return;
+                const target = e.target;
+                if (!isElement(target))
+                    return;
+                const pointerPosition = { x: e.clientX, y: e.clientY };
+                const hasEnteredTarget = opts.triggerNode()?.contains(target) ||
+                    opts.contentNode()?.contains(target);
+                const isPointerOutsideGraceArea = !isPointInPolygon(pointerPosition, this.#pointerGraceArea);
+                if (hasEnteredTarget) {
+                    this.#removeGraceArea();
+                }
+                else if (isPointerOutsideGraceArea) {
+                    this.#removeGraceArea();
+                    opts.onPointerExit();
+                }
+            };
+            const doc = getDocument(opts.triggerNode() ?? opts.contentNode());
+            if (!doc)
+                return;
+            return on(doc, "pointermove", handleTrackPointerGrace);
+        });
     }
-    function handleCreateGraceArea(e, hoverTarget) {
+    #removeGraceArea() {
+        this.#pointerGraceArea = null;
+        this.#isPointerInTransit.current = false;
+    }
+    #createGraceArea(e, hoverTarget) {
         const currentTarget = e.currentTarget;
         if (!isHTMLElement(currentTarget))
             return;
@@ -28,46 +69,9 @@ export function useGraceArea(opts) {
         const paddedExitPoints = getPaddedExitPoints(exitPoint, exitSide);
         const hoverTargetPoints = getPointsFromRect(hoverTarget.getBoundingClientRect());
         const graceArea = getHull([...paddedExitPoints, ...hoverTargetPoints]);
-        pointerGraceArea = graceArea;
-        isPointerInTransit.current = true;
+        this.#pointerGraceArea = graceArea;
+        this.#isPointerInTransit.current = true;
     }
-    watch([opts.triggerNode, opts.contentNode, opts.enabled], ([triggerNode, contentNode, enabled]) => {
-        if (!triggerNode || !contentNode || !enabled)
-            return;
-        const handleTriggerLeave = (e) => {
-            handleCreateGraceArea(e, contentNode);
-        };
-        const handleContentLeave = (e) => {
-            handleCreateGraceArea(e, triggerNode);
-        };
-        return executeCallbacks(on(triggerNode, "pointerleave", handleTriggerLeave), on(contentNode, "pointerleave", handleContentLeave));
-    });
-    watch(() => pointerGraceArea, () => {
-        const handleTrackPointerGrace = (e) => {
-            if (!pointerGraceArea)
-                return;
-            const target = e.target;
-            if (!isElement(target))
-                return;
-            const pointerPosition = { x: e.clientX, y: e.clientY };
-            const hasEnteredTarget = opts.triggerNode()?.contains(target) || opts.contentNode()?.contains(target);
-            const isPointerOutsideGraceArea = !isPointInPolygon(pointerPosition, pointerGraceArea);
-            if (hasEnteredTarget) {
-                handleRemoveGraceArea();
-            }
-            else if (isPointerOutsideGraceArea) {
-                handleRemoveGraceArea();
-                opts.onPointerExit();
-            }
-        };
-        const doc = getDocument(opts.triggerNode() ?? opts.contentNode());
-        if (!doc)
-            return;
-        return on(doc, "pointermove", handleTrackPointerGrace);
-    });
-    return {
-        isPointerInTransit,
-    };
 }
 function getExitSideFromRect(point, rect) {
     const top = Math.abs(rect.top - point.y);

package/dist/internal/open-change-complete.d.ts

@@ -0,0 +1,13 @@
+import type { ReadableBoxedValues } from "svelte-toolbelt";
+interface OpenChangeCompleteOpts extends ReadableBoxedValues<{
+    open: boolean;
+    ref: HTMLElement | null;
+}> {
+    onComplete: () => void;
+    enabled?: boolean;
+}
+export declare class OpenChangeComplete {
+    #private;
+    constructor(opts: OpenChangeCompleteOpts);
+}
+export {};

package/dist/internal/open-change-complete.js

@@ -0,0 +1,24 @@
+import { watch } from "runed";
+import { AnimationsComplete } from "./animations-complete.js";
+export class OpenChangeComplete {
+    #opts;
+    #enabled;
+    #afterAnimations;
+    constructor(opts) {
+        this.#opts = opts;
+        this.#enabled = opts.enabled ?? true;
+        this.#afterAnimations = new AnimationsComplete({
+            ref: this.#opts.ref,
+            afterTick: this.#opts.open,
+        });
+        watch([() => this.#opts.open.current], ([open]) => {
+            if (!this.#enabled)
+                return;
+            this.#afterAnimations.run(() => {
+                if (open === this.#opts.open.current) {
+                    this.#opts.onComplete();
+                }
+            });
+        });
+    }
+}

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.6.2",
+  "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;
-};