bits-ui 1.8.0 → 2.2.0

package/dist/bits/navigation-menu/navigation-menu.svelte.js

@@ -2,7 +2,7 @@
  * Based on Radix UI's Navigation Menu
  * https://www.radix-ui.com/docs/primitives/components/navigation-menu
  */
-import { afterSleep, afterTick, box, useRefById, } from "svelte-toolbelt";
+import { afterSleep, afterTick, box, attachRef, DOMContext, getWindow, } from "svelte-toolbelt";
 import { Context, useDebounce, watch } from "runed";
 import { untrack } from "svelte";
 import { SvelteMap } from "svelte/reactivity";
@@ -71,8 +71,10 @@ class NavigationMenuRootState {
     });
     constructor(opts) {
         this.opts = opts;
-        this.isDelaySkipped = boxAutoReset(false, this.opts.skipDelayDuration.current);
-        useRefById(opts);
+        this.isDelaySkipped = boxAutoReset(false, {
+            afterMs: this.opts.skipDelayDuration.current,
+            getWindow: () => getWindow(opts.ref.current),
+        });
         this.provider = useNavigationMenuProvider({
             value: this.opts.value,
             previousValue: this.previousValue,
@@ -135,6 +137,7 @@ class NavigationMenuRootState {
         dir: this.opts.dir.current,
         [NAVIGATION_MENU_ROOT_ATTR]: "",
         [NAVIGATION_MENU_ATTR]: "",
+        ...attachRef(this.opts.ref),
     }));
 }
 class NavigationMenuSubState {
@@ -145,7 +148,6 @@ class NavigationMenuSubState {
     constructor(opts, context) {
         this.opts = opts;
         this.context = context;
-        useRefById(opts);
         this.subProvider = useNavigationMenuProvider({
             isRootMenu: false,
             value: this.opts.value,
@@ -173,6 +175,7 @@ class NavigationMenuSubState {
         "data-orientation": getDataOrientation(this.opts.orientation.current),
         [NAVIGATION_MENU_SUB_ATTR]: "",
         [NAVIGATION_MENU_ATTR]: "",
+        ...attachRef(this.opts.ref),
     }));
 }
 class NavigationMenuListState {
@@ -186,17 +189,8 @@ class NavigationMenuListState {
     constructor(opts, context) {
         this.opts = opts;
         this.context = context;
-        useRefById(opts);
-        useRefById({
-            id: this.wrapperId,
-            ref: this.wrapperRef,
-            onRefChange: (node) => {
-                this.context.indicatorTrackRef.current = node;
-            },
-            deps: () => this.wrapperMounted,
-        });
         this.rovingFocusGroup = useRovingFocus({
-            rootNodeId: opts.id,
+            rootNode: opts.ref,
             candidateSelector: `[${NAVIGATION_MENU_TRIGGER_ATTR}]:not([data-disabled]), [${NAVIGATION_MENU_LINK_ATTR}]:not([data-disabled])`,
             loop: box.with(() => false),
             orientation: this.context.opts.orientation,
@@ -211,11 +205,13 @@ class NavigationMenuListState {
     }
     wrapperProps = $derived.by(() => ({
         id: this.wrapperId.current,
+        ...attachRef(this.wrapperRef, (v) => (this.context.indicatorTrackRef.current = v)),
     }));
     props = $derived.by(() => ({
         id: this.opts.id.current,
         "data-orientation": getDataOrientation(this.context.opts.orientation.current),
         [NAVIGATION_MENU_LIST_ATTR]: "",
+        ...attachRef(this.opts.ref),
     }));
 }
 export class NavigationMenuItemState {
@@ -231,9 +227,11 @@ export class NavigationMenuItemState {
     contentChildren = box(undefined);
     contentChild = box(undefined);
     contentProps = box({});
+    domContext;
     constructor(opts, listContext) {
         this.opts = opts;
         this.listContext = listContext;
+        this.domContext = new DOMContext(opts.ref);
     }
     #handleContentEntry = (side = "start") => {
         if (!this.contentNode)
@@ -241,7 +239,7 @@ export class NavigationMenuItemState {
         this.restoreContentTabOrder();
         const candidates = getTabbableCandidates(this.contentNode);
         if (candidates.length)
-            focusFirst(side === "start" ? candidates : candidates.reverse());
+            focusFirst(side === "start" ? candidates : candidates.reverse(), () => this.domContext.getActiveElement());
     };
     #handleContentExit = () => {
         if (!this.contentNode)
@@ -272,24 +270,13 @@ class NavigationMenuTriggerState {
     focusProxyMounted = $state(false);
     constructor(opts, context) {
         this.opts = opts;
-        this.hasPointerMoveOpened = boxAutoReset(false, 300);
+        this.hasPointerMoveOpened = boxAutoReset(false, {
+            afterMs: 300,
+            getWindow: () => getWindow(opts.ref.current),
+        });
         this.context = context.provider;
         this.itemContext = context.item;
         this.listContext = context.list;
-        useRefById({
-            ...opts,
-            onRefChange: (node) => {
-                this.itemContext.triggerNode = node;
-            },
-        });
-        useRefById({
-            id: this.focusProxyId,
-            ref: this.focusProxyRef,
-            onRefChange: (node) => {
-                this.itemContext.focusProxyNode = node;
-            },
-            deps: () => this.focusProxyMounted,
-        });
         watch(() => this.opts.ref.current, () => {
             const node = this.opts.ref.current;
             if (!node)
@@ -366,11 +353,13 @@ class NavigationMenuTriggerState {
         onpointerenter: this.onpointerenter,
         onclick: this.onclick,
         onkeydown: this.onkeydown,
+        ...attachRef(this.opts.ref, (v) => (this.itemContext.triggerNode = v)),
     }));
     focusProxyProps = $derived.by(() => ({
         id: this.focusProxyId.current,
         tabindex: 0,
         onfocus: this.focusProxyOnFocus,
+        ...attachRef(this.focusProxyRef, (v) => (this.itemContext.focusProxyNode = v)),
     }));
     restructureSpanProps = $derived.by(() => ({
         "aria-owns": this.itemContext.contentId,
@@ -391,7 +380,6 @@ class NavigationMenuLinkState {
     constructor(opts, context) {
         this.opts = opts;
         this.context = context;
-        useRefById(opts);
     }
     onclick = (e) => {
         const currTarget = e.currentTarget;
@@ -441,6 +429,7 @@ class NavigationMenuLinkState {
         onpointerenter: this.onpointerenter,
         onpointermove: this.onpointermove,
         [NAVIGATION_MENU_LINK_ATTR]: "",
+        ...attachRef(this.opts.ref),
     }));
 }
 class NavigationMenuIndicatorState {
@@ -469,10 +458,6 @@ class NavigationMenuIndicatorImplState {
         this.listContext = context.list;
         useResizeObserver(() => this.activeTrigger, this.handlePositionChange);
         useResizeObserver(() => this.context.indicatorTrackRef.current, this.handlePositionChange);
-        useRefById({
-            ...opts,
-            deps: () => this.context.opts.value.current,
-        });
     }
     handlePositionChange = () => {
         if (!this.activeTrigger)
@@ -505,6 +490,7 @@ class NavigationMenuIndicatorImplState {
                 }),
         },
         [NAVIGATION_MENU_INDICATOR_ATTR]: "",
+        ...attachRef(this.opts.ref),
     }));
 }
 class NavigationMenuContentState {
@@ -530,13 +516,6 @@ class NavigationMenuContentState {
         this.context = context.provider;
         this.itemContext = context.item;
         this.listContext = context.list;
-        useRefById({
-            ...opts,
-            onRefChange: (node) => {
-                this.itemContext.contentNode = node;
-            },
-            deps: () => this.mounted,
-        });
     }
     onpointerenter = (_) => {
         this.context.onContentEnter();
@@ -550,6 +529,7 @@ class NavigationMenuContentState {
         id: this.opts.id.current,
         onpointerenter: this.onpointerenter,
         onpointerleave: this.onpointerleave,
+        ...attachRef(this.opts.ref, (v) => (this.itemContext.contentNode = v)),
     }));
 }
 class NavigationMenuContentImplState {
@@ -593,15 +573,13 @@ class NavigationMenuContentImplState {
         untrack(() => (this.prevMotionAttribute = attribute));
         return attribute;
     });
+    domContext;
     constructor(opts, itemContext) {
         this.opts = opts;
         this.itemContext = itemContext;
         this.listContext = itemContext.listContext;
         this.context = itemContext.listContext.context;
-        useRefById({
-            ...opts,
-            deps: () => this.context.opts.value.current,
-        });
+        this.domContext = new DOMContext(opts.ref);
         watch([
             () => this.itemContext.opts.value.current,
             () => this.itemContext.triggerNode,
@@ -613,7 +591,7 @@ class NavigationMenuContentImplState {
             const handleClose = () => {
                 this.context.onItemDismiss();
                 this.itemContext.onRootContentClose();
-                if (content.contains(document.activeElement)) {
+                if (content.contains(this.domContext.getActiveElement())) {
                     this.itemContext.triggerNode?.focus();
                 }
             };
@@ -661,13 +639,13 @@ class NavigationMenuContentImplState {
         const isTabKey = e.key === kbd.TAB && !isMetaKey;
         const candidates = getTabbableCandidates(e.currentTarget);
         if (isTabKey) {
-            const focusedElement = document.activeElement;
+            const focusedElement = this.domContext.getActiveElement();
             const index = candidates.findIndex((candidate) => candidate === focusedElement);
             const isMovingBackwards = e.shiftKey;
             const nextCandidates = isMovingBackwards
                 ? candidates.slice(0, index).reverse()
                 : candidates.slice(index + 1, candidates.length);
-            if (focusFirst(nextCandidates)) {
+            if (focusFirst(nextCandidates, () => this.domContext.getActiveElement())) {
                 // prevent browser tab keydown because we've handled focus
                 e.preventDefault();
                 return;
@@ -680,7 +658,7 @@ class NavigationMenuContentImplState {
                 return;
             }
         }
-        let activeEl = document.activeElement;
+        let activeEl = this.domContext.getActiveElement();
         if (this.itemContext.contentNode) {
             const focusedNode = this.itemContext.contentNode.querySelector("[data-focused]");
             if (focusedNode) {
@@ -711,6 +689,7 @@ class NavigationMenuContentImplState {
         "data-state": getDataOpenClosed(this.context.opts.value.current === this.itemContext.opts.value.current),
         onkeydown: this.onkeydown,
         [NAVIGATION_MENU_CONTENT_ATTR]: "",
+        ...attachRef(this.opts.ref),
     }));
 }
 class NavigationMenuViewportState {
@@ -726,13 +705,6 @@ class NavigationMenuViewportState {
     constructor(opts, context) {
         this.opts = opts;
         this.context = context;
-        useRefById({
-            ...opts,
-            onRefChange: (node) => {
-                this.context.viewportRef.current = node;
-            },
-            deps: () => this.open,
-        });
         watch([() => this.activeContentValue, () => this.open], () => {
             afterTick(() => {
                 const currNode = this.context.viewportRef.current;
@@ -776,6 +748,7 @@ class NavigationMenuViewportState {
         [NAVIGATION_MENU_VIEWPORT_ATTR]: "",
         onpointerenter: this.context.onContentEnter,
         onpointerleave: this.context.onContentLeave,
+        ...attachRef(this.opts.ref, (v) => (this.context.viewportRef.current = v)),
     }));
 }
 const NavigationMenuProviderContext = new Context("NavigationMenu.Root");
@@ -835,14 +808,14 @@ export function useNavigationMenuIndicator() {
     return new NavigationMenuIndicatorState(NavigationMenuProviderContext.get());
 }
 //
-function focusFirst(candidates) {
-    const previouslyFocusedElement = document.activeElement;
+function focusFirst(candidates, getActiveElement) {
+    const previouslyFocusedElement = getActiveElement();
     return candidates.some((candidate) => {
         // if focus is already where we want to go, we don't want to keep going through the candidates
         if (candidate === previouslyFocusedElement)
             return true;
         candidate.focus();
-        return document.activeElement !== previouslyFocusedElement;
+        return getActiveElement() !== previouslyFocusedElement;
     });
 }
 function removeFromTabOrder(candidates) {

package/dist/bits/pagination/components/pagination-next-button.svelte

@@ -2,10 +2,12 @@
 	import { box, mergeProps } from "svelte-toolbelt";
 	import type { PaginationNextButtonProps } from "../types.js";
 	import { usePaginationButton } from "../pagination.svelte.js";
-	import { useId } from "../../../internal/use-id.js";
+	import { createId } from "../../../internal/create-id.js";
+
+	const uid = $props.id();
 
 	let {
-		id = useId(),
+		id = createId(uid),
 		child,
 		children,
 		ref = $bindable(null),

package/dist/bits/pagination/components/pagination-page.svelte

@@ -2,10 +2,12 @@
 	import { box, mergeProps } from "svelte-toolbelt";
 	import type { PaginationPageProps } from "../types.js";
 	import { usePaginationPage } from "../pagination.svelte.js";
-	import { useId } from "../../../internal/use-id.js";
+	import { createId } from "../../../internal/create-id.js";
+
+	const uid = $props.id();
 
 	let {
-		id = useId(),
+		id = createId(uid),
 		page,
 		child,
 		children,

package/dist/bits/pagination/components/pagination-prev-button.svelte

@@ -2,10 +2,12 @@
 	import { box, mergeProps } from "svelte-toolbelt";
 	import type { PaginationPrevButtonProps } from "../types.js";
 	import { usePaginationButton } from "../pagination.svelte.js";
-	import { useId } from "../../../internal/use-id.js";
+	import { createId } from "../../../internal/create-id.js";
+
+	const uid = $props.id();
 
 	let {
-		id = useId(),
+		id = createId(uid),
 		child,
 		children,
 		ref = $bindable(null),

package/dist/bits/pagination/components/pagination.svelte

@@ -2,11 +2,13 @@
 	import { box, mergeProps } from "svelte-toolbelt";
 	import type { PaginationRootProps } from "../types.js";
 	import { usePaginationRoot } from "../pagination.svelte.js";
-	import { useId } from "../../../internal/use-id.js";
 	import { noop } from "../../../internal/noop.js";
+	import { createId } from "../../../internal/create-id.js";
+
+	const uid = $props.id();
 
 	let {
-		id = useId(),
+		id = createId(uid),
 		count,
 		perPage = 1,
 		page = $bindable(1),

package/dist/bits/pagination/pagination.svelte.js

@@ -1,4 +1,4 @@
-import { useRefById } from "svelte-toolbelt";
+import { attachRef } from "svelte-toolbelt";
 import { Context } from "runed";
 import { getDataOrientation } from "../../internal/attrs.js";
 import { getElemDirection } from "../../internal/locale.js";
@@ -28,7 +28,6 @@ class PaginationRootState {
     }));
     constructor(opts) {
         this.opts = opts;
-        useRefById(opts);
     }
     setPage(page) {
         this.opts.page.current = page;
@@ -62,6 +61,7 @@ class PaginationRootState {
         id: this.opts.id.current,
         "data-orientation": getDataOrientation(this.opts.orientation.current),
         [PAGINATION_ROOT_ATTR]: "",
+        ...attachRef(this.opts.ref),
     }));
 }
 class PaginationPageState {
@@ -71,7 +71,6 @@ class PaginationPageState {
     constructor(opts, root) {
         this.opts = opts;
         this.root = root;
-        useRefById(opts);
         this.onclick = this.onclick.bind(this);
         this.onkeydown = this.onkeydown.bind(this);
     }
@@ -100,6 +99,7 @@ class PaginationPageState {
         //
         onclick: this.onclick,
         onkeydown: this.onkeydown,
+        ...attachRef(this.opts.ref),
     }));
 }
 class PaginationButtonState {
@@ -108,7 +108,6 @@ class PaginationButtonState {
     constructor(opts, root) {
         this.opts = opts;
         this.root = root;
-        useRefById(opts);
         this.onclick = this.onclick.bind(this);
         this.onkeydown = this.onkeydown.bind(this);
     }
@@ -148,6 +147,7 @@ class PaginationButtonState {
         //
         onclick: this.onclick,
         onkeydown: this.onkeydown,
+        ...attachRef(this.opts.ref),
     }));
 }
 //

package/dist/bits/pin-input/components/pin-input-cell.svelte

@@ -2,10 +2,12 @@
 	import { box, mergeProps } from "svelte-toolbelt";
 	import type { PinInputCellProps } from "../types.js";
 	import { usePinInputCell } from "../pin-input.svelte.js";
-	import { useId } from "../../../internal/use-id.js";
+	import { createId } from "../../../internal/create-id.js";
+
+	const uid = $props.id();
 
 	let {
-		id = useId(),
+		id = createId(uid),
 		ref = $bindable(null),
 		cell,
 		child,

package/dist/bits/pin-input/components/pin-input.svelte

@@ -2,12 +2,14 @@
 	import { box, mergeProps } from "svelte-toolbelt";
 	import type { PinInputRootProps } from "../types.js";
 	import { usePinInput } from "../pin-input.svelte.js";
-	import { useId } from "../../../internal/use-id.js";
+	import { createId } from "../../../internal/create-id.js";
 	import { noop } from "../../../internal/noop.js";
 
+	const uid = $props.id();
+
 	let {
-		id = useId(),
-		inputId = useId(),
+		id = createId(uid),
+		inputId = `${createId(uid)}-input`,
 		ref = $bindable(null),
 		maxlength = 6,
 		textalign = "left",

package/dist/bits/pin-input/pin-input.svelte.d.ts

@@ -1,3 +1,4 @@
+import { DOMContext } from "svelte-toolbelt";
 import type { PinInputCell, PinInputRootProps as RootComponentProps } from "./types.js";
 import type { ReadableBoxedValues, WritableBoxedValues } from "../../internal/box.svelte.js";
 import type { BitsEvent, BitsFocusEvent, BitsKeyboardEvent, BitsMouseEvent, WithRefProps } from "../../internal/types.js";
@@ -21,6 +22,7 @@ type PinInputRootStateProps = WithRefProps<WritableBoxedValues<{
 declare class PinInputRootState {
     #private;
     readonly opts: PinInputRootStateProps;
+    domContext: DOMContext;
     constructor(opts: PinInputRootStateProps);
     onkeydown: (e: BitsKeyboardEvent) => void;
     rootProps: {
@@ -75,7 +77,7 @@ declare class PinInputRootState {
         "data-pin-input-input": string;
         "data-pin-input-input-mss": number | null;
         "data-pin-input-input-mse": number | null;
-        inputmode: "none" | "search" | "text" | "email" | "tel" | "url" | "numeric" | "decimal" | null | undefined;
+        inputmode: "none" | "email" | "tel" | "url" | "text" | "numeric" | "decimal" | "search" | null | undefined;
         pattern: any;
         maxlength: number;
         value: string;
@@ -111,7 +113,7 @@ declare class PinInputCellState {
         readonly "data-inactive": "" | undefined;
     };
 }
-export declare function syncTimeouts(cb: (...args: any[]) => unknown): number[];
+export declare function syncTimeouts(cb: (...args: any[]) => unknown, domContext: DOMContext): number[];
 export declare function usePinInput(props: PinInputRootStateProps): PinInputRootState;
 export declare function usePinInputCell(props: PinInputCellStateProps): PinInputCellState;
 export {};

package/dist/bits/pin-input/pin-input.svelte.js

@@ -1,6 +1,6 @@
 import { Previous, watch } from "runed";
 import { onMount } from "svelte";
-import { box, useRefById } from "svelte-toolbelt";
+import { box, attachRef, DOMContext } from "svelte-toolbelt";
 import { usePasswordManagerBadge } from "./usePasswordManager.svelte.js";
 import { getDisabled } from "../../internal/attrs.js";
 import { on } from "svelte/events";
@@ -47,8 +47,10 @@ class PinInputRootState {
     });
     #pwmb;
     #initialLoad;
+    domContext;
     constructor(opts) {
         this.opts = opts;
+        this.domContext = new DOMContext(opts.ref);
         this.#initialLoad = {
             value: this.opts.value,
             isIOS: typeof window !== "undefined" &&
@@ -59,11 +61,7 @@ class PinInputRootState {
             inputRef: this.#inputRef,
             isFocused: this.#isFocused,
             pushPasswordManagerStrategy: this.opts.pushPasswordManagerStrategy,
-        });
-        useRefById(opts);
-        useRefById({
-            id: this.opts.inputId,
-            ref: this.#inputRef,
+            domContext: this.domContext,
         });
         onMount(() => {
             const input = this.#inputRef.current;
@@ -78,14 +76,14 @@ class PinInputRootState {
                 input.selectionEnd,
                 input.selectionDirection ?? "none",
             ];
-            const unsub = on(document, "selectionchange", this.#onDocumentSelectionChange, {
+            const unsub = on(this.domContext.getDocument(), "selectionchange", this.#onDocumentSelectionChange, {
                 capture: true,
             });
             this.#onDocumentSelectionChange();
-            if (document.activeElement === input) {
+            if (this.domContext.getActiveElement() === input) {
                 this.#isFocused.current = true;
             }
-            if (!document.getElementById("pin-input-style")) {
+            if (!this.domContext.getElementById("pin-input-style")) {
                 this.#applyStyles();
             }
             const updateRootHeight = () => {
@@ -117,7 +115,7 @@ class PinInputRootState {
                     this.#mirrorSelectionEnd = end;
                     this.#prevInputMetadata.prev = [start, end, dir];
                 }
-            });
+            }, this.domContext);
         });
         $effect(() => {
             // invoke `onComplete` when the input is completely filled.
@@ -155,6 +153,7 @@ class PinInputRootState {
         id: this.opts.id.current,
         [ROOT_ATTR]: "",
         style: this.#rootStyles,
+        ...attachRef(this.opts.ref),
     }));
     inputWrapperProps = $derived.by(() => ({
         style: {
@@ -190,9 +189,10 @@ class PinInputRootState {
         fontVariantNumeric: "tabular-nums",
     }));
     #applyStyles() {
-        const styleEl = document.createElement("style");
+        const doc = this.domContext.getDocument();
+        const styleEl = doc.createElement("style");
         styleEl.id = "pin-input-style";
-        document.head.appendChild(styleEl);
+        doc.head.appendChild(styleEl);
         if (styleEl.sheet) {
             const autoFillStyles = "background: transparent !important; color: transparent !important; border-color: transparent !important; opacity: 0 !important; box-shadow: none !important; -webkit-box-shadow: none !important; -webkit-text-fill-color: transparent !important;";
             safeInsertRule(styleEl.sheet, "[data-pin-input-input]::selection { background: transparent !important; color: transparent !important; }");
@@ -209,7 +209,7 @@ class PinInputRootState {
         const container = this.opts.ref.current;
         if (!input || !container)
             return;
-        if (document.activeElement !== input) {
+        if (this.domContext.getActiveElement() !== input) {
             this.#mirrorSelectionStart = null;
             this.#mirrorSelectionEnd = null;
             return;
@@ -276,7 +276,7 @@ class PinInputRootState {
             // selectionchange event, we'll have to dispatch it manually.
             // NOTE: The following line also triggers when cmd+A then pasting
             // a value with smaller length, which is not ideal for performance.
-            document.dispatchEvent(new Event("selectionchange"));
+            this.domContext.getDocument().dispatchEvent(new Event("selectionchange"));
         }
         this.opts.value.current = newValue;
     };
@@ -365,6 +365,7 @@ class PinInputRootState {
         onmouseleave: this.onmouseleave,
         onfocus: this.onfocus,
         onblur: this.onblur,
+        ...attachRef(this.#inputRef),
     }));
     #cells = $derived.by(() => Array.from({ length: this.opts.maxLength.current }).map((_, idx) => {
         const isActive = this.#isFocused.current &&
@@ -390,23 +391,20 @@ class PinInputCellState {
     opts;
     constructor(opts) {
         this.opts = opts;
-        useRefById({
-            id: this.opts.id,
-            ref: this.opts.ref,
-        });
     }
     props = $derived.by(() => ({
         id: this.opts.id.current,
         [CELL_ATTR]: "",
         "data-active": this.opts.cell.current.isActive ? "" : undefined,
         "data-inactive": !this.opts.cell.current.isActive ? "" : undefined,
+        ...attachRef(this.opts.ref),
     }));
 }
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-export function syncTimeouts(cb) {
-    const t1 = setTimeout(cb, 0); // For faster machines
-    const t2 = setTimeout(cb, 1_0);
-    const t3 = setTimeout(cb, 5_0);
+export function syncTimeouts(cb, domContext) {
+    const t1 = domContext.setTimeout(cb, 0); // For faster machines
+    const t2 = domContext.setTimeout(cb, 1_0);
+    const t3 = domContext.setTimeout(cb, 5_0);
     return [t1, t2, t3];
 }
 function safeInsertRule(sheet, rule) {

package/dist/bits/pin-input/usePasswordManager.svelte.d.ts

@@ -1,12 +1,13 @@
-import type { ReadableBox, WritableBox } from "svelte-toolbelt";
+import { type DOMContext, type ReadableBox, type WritableBox } from "svelte-toolbelt";
 import type { PinInputRootPropsWithoutHTML } from "./types.js";
 type UsePasswordManagerBadgeProps = {
     containerRef: WritableBox<HTMLElement | null>;
     inputRef: WritableBox<HTMLInputElement | null>;
     pushPasswordManagerStrategy: ReadableBox<PinInputRootPropsWithoutHTML["pushPasswordManagerStrategy"]>;
     isFocused: ReadableBox<boolean>;
+    domContext: DOMContext;
 };
-export declare function usePasswordManagerBadge({ containerRef, inputRef, pushPasswordManagerStrategy, isFocused, }: UsePasswordManagerBadgeProps): {
+export declare function usePasswordManagerBadge({ containerRef, inputRef, pushPasswordManagerStrategy, isFocused, domContext, }: UsePasswordManagerBadgeProps): {
     readonly hasPwmBadge: boolean;
     readonly willPushPwmBadge: boolean;
     PWM_BADGE_SPACE_WIDTH: "40px";

package/dist/bits/pin-input/usePasswordManager.svelte.js

@@ -1,3 +1,4 @@
+import { getWindow } from "svelte-toolbelt";
 const PWM_BADGE_MARGIN_RIGHT = 18;
 const PWM_BADGE_SPACE_WIDTH_PX = 40;
 const PWM_BADGE_SPACE_WIDTH = `${PWM_BADGE_SPACE_WIDTH_PX}px`;
@@ -7,7 +8,7 @@ const PASSWORD_MANAGER_SELECTORS = [
     "[data-dashlanecreated]", // Dashlane,
     '[style$="2147483647 !important;"]', // Bitwarden
 ].join(",");
-export function usePasswordManagerBadge({ containerRef, inputRef, pushPasswordManagerStrategy, isFocused, }) {
+export function usePasswordManagerBadge({ containerRef, inputRef, pushPasswordManagerStrategy, isFocused, domContext, }) {
     let hasPwmBadge = $state(false);
     let hasPwmBadgeSpace = $state(false);
     let done = $state(false);
@@ -31,11 +32,11 @@ export function usePasswordManagerBadge({ containerRef, inputRef, pushPasswordMa
         const x = rightCornerX - PWM_BADGE_MARGIN_RIGHT;
         const y = centeredY;
         // do an extra search to check for all the password manager badges
-        const passwordManagerStrategy = document.querySelectorAll(PASSWORD_MANAGER_SELECTORS);
+        const passwordManagerStrategy = domContext.querySelectorAll(PASSWORD_MANAGER_SELECTORS);
         // if no password manager is detected, dispatch document.elementFromPoint to
         // identify the badges
         if (passwordManagerStrategy.length === 0) {
-            const maybeBadgeEl = document.elementFromPoint(x, y);
+            const maybeBadgeEl = domContext.getDocument().elementFromPoint(x, y);
             // if the found element is the container,
             // then it is not a badge, most times there is no badge in this case
             if (maybeBadgeEl === container)
@@ -50,7 +51,7 @@ export function usePasswordManagerBadge({ containerRef, inputRef, pushPasswordMa
             return;
         // check if the pwm area is fully visible
         function checkHasSpace() {
-            const viewportWidth = window.innerWidth;
+            const viewportWidth = getWindow(container).innerWidth;
             const distanceToRightEdge = viewportWidth - container.getBoundingClientRect().right;
             hasPwmBadgeSpace = distanceToRightEdge >= PWM_BADGE_SPACE_WIDTH_PX;
         }
@@ -61,7 +62,7 @@ export function usePasswordManagerBadge({ containerRef, inputRef, pushPasswordMa
         };
     });
     $effect(() => {
-        const focused = isFocused.current || document.activeElement === inputRef.current;
+        const focused = isFocused.current || domContext.getActiveElement() === inputRef.current;
         if (pushPasswordManagerStrategy.current === "none" || !focused)
             return;
         const t1 = setTimeout(trackPwmBadge, 0);