bits-ui 2.1.0 → 2.2.0

package/dist/internal/date-time/field/time-helpers.js

@@ -245,19 +245,19 @@ export function isFirstTimeSegment(id, fieldNode) {
  * so it can be associated via `aria-describedby` and read by
  * screen readers as the user interacts with the date field.
  */
-export function setTimeDescription(id, formatter, value) {
+export function setTimeDescription(props) {
     if (!isBrowser)
         return;
-    const valueString = formatter.selectedTime(value);
-    const el = document.getElementById(id);
+    const valueString = props.formatter.selectedTime(props.value);
+    const el = props.doc.getElementById(props.id);
     if (!el) {
-        const div = document.createElement("div");
+        const div = props.doc.createElement("div");
         div.style.cssText = styleToString({
             display: "none",
         });
-        div.id = id;
+        div.id = props.id;
         div.innerText = `Selected Time: ${valueString}`;
-        document.body.appendChild(div);
+        props.doc.body.appendChild(div);
     }
     else {
         el.innerText = `Selected Time: ${valueString}`;
@@ -268,13 +268,13 @@ export function setTimeDescription(id, formatter, value) {
  * the provided ID. This function should be called when the
  * date field is unmounted.
  */
-export function removeTimeDescriptionElement(id) {
+export function removeTimeDescriptionElement(id, doc) {
     if (!isBrowser)
         return;
-    const el = document.getElementById(id);
+    const el = doc.getElementById(id);
     if (!el)
         return;
-    document.body.removeChild(el);
+    doc.body.removeChild(el);
 }
 export function convertTimeValueToDateValue(time) {
     if (time instanceof Time) {

package/dist/internal/dom.d.ts

@@ -1,4 +1,3 @@
-export declare function getDocument(element?: Element | null): Document;
 export declare function activeElement(doc: Document): Element | null;
 export declare function getFirstNonCommentChild(element: HTMLElement | null): ChildNode | null;
 /**

package/dist/internal/dom.js

@@ -1,6 +1,3 @@
-export function getDocument(element) {
-    return element?.ownerDocument ?? document;
-}
 export function activeElement(doc) {
     let activeElement = doc.activeElement;
     while (activeElement?.shadowRoot?.activeElement != null) {

package/dist/internal/focus.d.ts

@@ -20,9 +20,9 @@ export declare function focus(element?: FocusableTarget | null, { select }?: {
  * Attempts to focus the first element in a list of candidates.
  * Stops when focus is successful.
  */
-export declare function focusFirst(candidates: HTMLElement[], { select }?: {
+export declare function focusFirst(candidates: HTMLElement[], { select }: {
     select?: boolean | undefined;
-}): true | undefined;
+} | undefined, getActiveElement: () => HTMLElement | null): true | undefined;
 /**
  * Returns the first visible element in a list.
  * NOTE: Only checks visibility up to the `container`.

package/dist/internal/focus.js

@@ -1,3 +1,4 @@
+import { getDocument, getWindow } from "svelte-toolbelt";
 import { isBrowser, isElementHidden, isSelectableInput } from "./is.js";
 /**
  * Handles `initialFocus` prop behavior for the
@@ -20,12 +21,14 @@ export function handleCalendarInitialFocus(calendar) {
  * A utility function that focuses an element without scrolling.
  */
 export function focusWithoutScroll(element) {
+    const doc = getDocument(element);
+    const win = getWindow(element);
     const scrollPosition = {
-        x: window.pageXOffset || document.documentElement.scrollLeft,
-        y: window.pageYOffset || document.documentElement.scrollTop,
+        x: win.pageXOffset || doc.documentElement.scrollLeft,
+        y: win.pageYOffset || doc.documentElement.scrollTop,
     };
     element.focus();
-    window.scrollTo(scrollPosition.x, scrollPosition.y);
+    win.scrollTo(scrollPosition.x, scrollPosition.y);
 }
 /**
  * A utility function that focuses an element.
@@ -33,9 +36,10 @@ export function focusWithoutScroll(element) {
 export function focus(element, { select = false } = {}) {
     if (!(element && element.focus))
         return;
-    if (document.activeElement === element)
+    const doc = getDocument(element);
+    if (doc.activeElement === element)
         return;
-    const previouslyFocusedElement = document.activeElement;
+    const previouslyFocusedElement = doc.activeElement;
     // prevent scroll on focus
     element.focus({ preventScroll: true });
     // only elect if its not the same element, it supports selection, and we need to select it
@@ -47,11 +51,11 @@ export function focus(element, { select = false } = {}) {
  * Attempts to focus the first element in a list of candidates.
  * Stops when focus is successful.
  */
-export function focusFirst(candidates, { select = false } = {}) {
-    const previouslyFocusedElement = document.activeElement;
+export function focusFirst(candidates, { select = false } = {}, getActiveElement) {
+    const previouslyFocusedElement = getActiveElement();
     for (const candidate of candidates) {
         focus(candidate, { select });
-        if (document.activeElement !== previouslyFocusedElement)
+        if (getActiveElement() !== previouslyFocusedElement)
             return true;
     }
 }
@@ -78,7 +82,8 @@ export function findVisible(elements, container) {
  */
 export function getTabbableCandidates(container) {
     const nodes = [];
-    const walker = document.createTreeWalker(container, NodeFilter.SHOW_ELEMENT, {
+    const doc = getDocument(container);
+    const walker = doc.createTreeWalker(container, NodeFilter.SHOW_ELEMENT, {
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         acceptNode: (node) => {
             const isHiddenInput = node.tagName === "INPUT" && node.type === "hidden";

package/dist/internal/math.d.ts

@@ -1,5 +1 @@
-/**
- * From https://github.com/melt-ui/melt-ui/blob/main/packages/svelte/src/lib/internal/math.ts
- */
-export declare function snapValueToStep(value: number, min: number, max: number, step: number): number;
 export declare function linearScale(domain: [number, number], range: [number, number], clamp?: boolean): (x: number) => number;

package/dist/internal/math.js

@@ -1,31 +1,3 @@
-/**
- * From https://github.com/melt-ui/melt-ui/blob/main/packages/svelte/src/lib/internal/math.ts
- */
-export function snapValueToStep(value, min, max, step) {
-    const remainder = (value - (Number.isNaN(min) ? 0 : min)) % step;
-    let snappedValue = Math.abs(remainder) * 2 >= step
-        ? value + Math.sign(remainder) * (step - Math.abs(remainder))
-        : value - remainder;
-    if (!Number.isNaN(min)) {
-        if (snappedValue < min) {
-            snappedValue = min;
-        }
-        else if (!Number.isNaN(max) && snappedValue > max) {
-            snappedValue = min + Math.floor((max - min) / step) * step;
-        }
-    }
-    else if (!Number.isNaN(max) && snappedValue > max) {
-        snappedValue = Math.floor(max / step) * step;
-    }
-    const string = step.toString();
-    const index = string.indexOf(".");
-    const precision = index >= 0 ? string.length - index : 0;
-    if (precision > 0) {
-        const pow = 10 ** precision;
-        snappedValue = Math.round(snappedValue * pow) / pow;
-    }
-    return snappedValue;
-}
 export function linearScale(domain, range, clamp = true) {
     const [d0, d1] = domain;
     const [r0, r1] = range;

package/dist/internal/tabbable.d.ts

@@ -6,5 +6,3 @@ export declare function getTabbableIn(container: HTMLElement, direction: "next"
  */
 export declare function getTabbableFrom(currentNode: HTMLElement, direction: "next" | "prev"): import("tabbable").FocusableElement | undefined;
 export declare function getTabbableFromFocusable(currentNode: HTMLElement, direction: "next" | "prev"): import("tabbable").FocusableElement;
-export declare function getNextTabbable(): import("tabbable").FocusableElement | undefined;
-export declare function getPreviousTabbable(): import("tabbable").FocusableElement | undefined;

package/dist/internal/tabbable.js

@@ -1,5 +1,6 @@
 import { focusable, isFocusable, isTabbable, tabbable } from "tabbable";
-import { activeElement, getDocument } from "./dom.js";
+import { activeElement } from "./dom.js";
+import { getDocument } from "svelte-toolbelt";
 function getTabbableOptions() {
     return {
         getShadowRoot: true,
@@ -32,35 +33,30 @@ export function getTabbableFrom(currentNode, direction) {
     if (!isTabbable(currentNode, getTabbableOptions())) {
         return getTabbableFromFocusable(currentNode, direction);
     }
-    const allTabbable = tabbable(getDocument(currentNode).body, getTabbableOptions());
+    const doc = getDocument(currentNode);
+    const allTabbable = tabbable(doc.body, getTabbableOptions());
     if (direction === "prev")
         allTabbable.reverse();
     const activeIndex = allTabbable.indexOf(currentNode);
     if (activeIndex === -1)
-        return document.body;
+        return doc.body;
     const nextTabbableElements = allTabbable.slice(activeIndex + 1);
     return nextTabbableElements[0];
 }
 export function getTabbableFromFocusable(currentNode, direction) {
+    const doc = getDocument(currentNode);
     if (!isFocusable(currentNode, getTabbableOptions()))
-        return document.body;
+        return doc.body;
     // find all focusable nodes, since some elements may be focusable but not tabbable
     // such as context menu triggers
-    const allFocusable = focusable(getDocument(currentNode).body, getTabbableOptions());
+    const allFocusable = focusable(doc.body, getTabbableOptions());
     // find index of current node among focusable siblings
     if (direction === "prev")
         allFocusable.reverse();
     const activeIndex = allFocusable.indexOf(currentNode);
     if (activeIndex === -1)
-        return document.body;
+        return doc.body;
     const nextFocusableElements = allFocusable.slice(activeIndex + 1);
     // find the next focusable node that is also tabbable
-    return (nextFocusableElements.find((node) => isTabbable(node, getTabbableOptions())) ??
-        document.body);
-}
-export function getNextTabbable() {
-    return getTabbableIn(document.body, "next");
-}
-export function getPreviousTabbable() {
-    return getTabbableIn(document.body, "prev");
+    return nextFocusableElements.find((node) => isTabbable(node, getTabbableOptions())) ?? doc.body;
 }

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

@@ -5,6 +5,7 @@ type UseDataTypeaheadOpts = {
     getCurrentItem: () => string;
     candidateValues: Getter<string[]>;
     enabled: boolean;
+    getWindow: () => Window & typeof globalThis;
 };
 export declare function useDataTypeahead(opts: UseDataTypeaheadOpts): {
     search: import("svelte-toolbelt").WritableBox<string>;

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

@@ -2,7 +2,10 @@ 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("", 1000);
+    const search = boxAutoReset("", {
+        afterMs: 1000,
+        getWindow: opts.getWindow,
+    });
     const candidateValues = $derived(opts.candidateValues());
     function handleTypeaheadSearch(key) {
         if (!opts.enabled)

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

@@ -2,8 +2,10 @@ 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): {
+export declare function useDOMTypeahead(opts: UseDOMTypeaheadOpts): {
     search: import("svelte-toolbelt").WritableBox<string>;
     handleTypeaheadSearch: (key: string, candidates: HTMLElement[]) => HTMLElement | undefined;
     resetTypeahead: () => void;

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

@@ -2,9 +2,12 @@ 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("", 1000);
+    const search = boxAutoReset("", {
+        afterMs: 1000,
+        getWindow: opts.getWindow,
+    });
     const onMatch = opts?.onMatch ?? ((node) => node.focus());
-    const getCurrentItem = opts?.getCurrentItem ?? (() => document.activeElement);
+    const getCurrentItem = opts?.getCurrentItem ?? (() => opts?.getActiveElement());
     function handleTypeaheadSearch(key, candidates) {
         if (!candidates.length)
             return;

package/dist/internal/use-grace-area.svelte.js

@@ -1,14 +1,18 @@
-import { executeCallbacks } from "svelte-toolbelt";
+import { executeCallbacks, 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, opts.transitTimeout ?? 300, (value) => {
-        if (enabled) {
-            opts.setIsPointerInTransit?.(value);
-        }
+    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() {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bits-ui",
-  "version": "2.1.0",
+  "version": "2.2.0",
   "license": "MIT",
   "repository": "github:huntabyte/bits-ui",
   "funding": "https://github.com/sponsors/huntabyte",
@@ -46,7 +46,7 @@
     "css.escape": "^1.5.1",
     "esm-env": "^1.1.2",
     "runed": "^0.28.0",
-    "svelte-toolbelt": "^0.8.2",
+    "svelte-toolbelt": "^0.9.1",
     "tabbable": "^6.2.0"
   },
   "peerDependencies": {

package/dist/internal/dom-context.svelte.d.ts

@@ -1,9 +0,0 @@
-import type { Box } from "svelte-toolbelt";
-export declare class DOMContext {
-    readonly element: Box<HTMLElement | null>;
-    readonly root: Document | ShadowRoot | null;
-    constructor(element: Box<HTMLElement | null>);
-    querySelector: (selector: string) => Element | null;
-    querySelectorAll: (selector: string) => NodeListOf<Element>;
-    getElementById: (id: string) => HTMLElement | null;
-}

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

@@ -1,26 +0,0 @@
-export class DOMContext {
-    element;
-    root = $derived.by(() => {
-        if (!this.element.current)
-            return null;
-        return this.element.current.getRootNode();
-    });
-    constructor(element) {
-        this.element = element;
-    }
-    querySelector = (selector) => {
-        if (!this.root)
-            return null;
-        return this.root.querySelector(selector);
-    };
-    querySelectorAll = (selector) => {
-        if (!this.root)
-            return [];
-        return this.root.querySelectorAll(selector);
-    };
-    getElementById = (id) => {
-        if (!this.root)
-            return null;
-        return this.root.getElementById(id);
-    };
-}

package/dist/internal/use-size.svelte.d.ts

@@ -1,7 +0,0 @@
-import { type WritableBox } from "svelte-toolbelt";
-export declare function useSize(node: WritableBox<HTMLElement | null>): {
-    readonly value: {
-        width: number;
-        height: number;
-    } | undefined;
-};

package/dist/internal/use-size.svelte.js

@@ -1,54 +0,0 @@
-/// <reference types="resize-observer-browser" />
-import { untrack } from "svelte";
-import { afterTick } from "svelte-toolbelt";
-export function useSize(node) {
-    let size = $state(undefined);
-    $effect(() => {
-        const currNode = node.current;
-        if (!currNode) {
-            size = undefined;
-            return;
-        }
-        afterTick(() => {
-            if (!currNode)
-                return;
-            size = {
-                width: currNode.offsetWidth,
-                height: currNode.offsetHeight,
-            };
-        });
-        const resizeObserver = new ResizeObserver((entries) => {
-            if (!Array.isArray(entries) || !entries.length)
-                return;
-            const entry = entries[0];
-            if (!entry)
-                return;
-            let width;
-            let height;
-            if ("borderBoxSize" in entry) {
-                const borderSizeEntry = entry.borderBoxSize;
-                const borderSize = Array.isArray(borderSizeEntry)
-                    ? borderSizeEntry[0]
-                    : borderSizeEntry;
-                width = borderSize.inlineSize;
-                height = borderSize.blockSize;
-            }
-            else {
-                width = currNode.offsetWidth;
-                height = currNode.offsetHeight;
-            }
-            untrack(() => (size = { width, height }));
-        });
-        resizeObserver.observe(currNode, { box: "border-box" });
-        return () => {
-            if (!currNode)
-                return;
-            resizeObserver.unobserve(currNode);
-        };
-    });
-    return {
-        get value() {
-            return size;
-        },
-    };
-}