bits-ui 2.8.0 → 2.8.2

package/dist/bits/utilities/focus-scope/focus-scope-manager.js

@@ -0,0 +1,40 @@
+import { box } from "svelte-toolbelt";
+import { FocusScope } from "./focus-scope.svelte.js";
+export class FocusScopeManager {
+    static instance;
+    #scopeStack = box([]);
+    #focusHistory = new WeakMap();
+    static getInstance() {
+        if (!this.instance) {
+            this.instance = new FocusScopeManager();
+        }
+        return this.instance;
+    }
+    register(scope) {
+        const current = this.getActive();
+        if (current && current !== scope) {
+            current.pause();
+        }
+        this.#scopeStack.current = this.#scopeStack.current.filter((s) => s !== scope);
+        this.#scopeStack.current.unshift(scope);
+    }
+    unregister(scope) {
+        this.#scopeStack.current = this.#scopeStack.current.filter((s) => s !== scope);
+        const next = this.getActive();
+        if (next) {
+            next.resume();
+        }
+    }
+    getActive() {
+        return this.#scopeStack.current[0];
+    }
+    setFocusMemory(scope, element) {
+        this.#focusHistory.set(scope, element);
+    }
+    getFocusMemory(scope) {
+        return this.#focusHistory.get(scope);
+    }
+    isActiveScope(scope) {
+        return this.getActive() === scope;
+    }
+}

package/dist/bits/utilities/focus-scope/focus-scope.svelte

@@ -1,27 +1,25 @@
 <script lang="ts">
 	import { box } from "svelte-toolbelt";
 	import type { FocusScopeImplProps } from "./types.js";
-	import { useFocusScope } from "./use-focus-scope.svelte.js";
 	import { noop } from "../../../internal/noop.js";
+	import { FocusScope } from "./focus-scope.svelte.js";
 
 	let {
-		id,
+		enabled = false,
 		trapFocus = false,
 		loop = false,
 		onCloseAutoFocus = noop,
 		onOpenAutoFocus = noop,
 		focusScope,
-		forceMount = false,
 		ref,
 	}: FocusScopeImplProps = $props();
 
-	const focusScopeState = useFocusScope({
-		enabled: box.with(() => trapFocus),
-		loop: box.with(() => loop),
+	const focusScopeState = FocusScope.use({
+		enabled: box.with(() => enabled),
+		trap: box.with(() => trapFocus),
+		loop: loop,
 		onCloseAutoFocus: box.with(() => onCloseAutoFocus),
 		onOpenAutoFocus: box.with(() => onOpenAutoFocus),
-		id: box.with(() => id),
-		forceMount: box.with(() => forceMount),
 		ref,
 	});
 </script>

package/dist/bits/utilities/focus-scope/focus-scope.svelte.d.ts

@@ -1,4 +1,5 @@
 import type { FocusScopeImplProps } from "./types.js";
+import { FocusScope } from "./focus-scope.svelte.js";
 declare const FocusScope: import("svelte").Component<FocusScopeImplProps, {}, "">;
 type FocusScope = ReturnType<typeof FocusScope>;
 export default FocusScope;

package/dist/bits/utilities/focus-scope/focus-scope.svelte.js

@@ -0,0 +1,204 @@
+import { onDestroyEffect } from "svelte-toolbelt";
+import { FocusScopeManager } from "./focus-scope-manager.js";
+import { focusable, isFocusable, tabbable } from "tabbable";
+import { on } from "svelte/events";
+import { watch } from "runed";
+export class FocusScope {
+    #paused = false;
+    #container = null;
+    #manager = FocusScopeManager.getInstance();
+    #cleanupFns = [];
+    #opts;
+    constructor(opts) {
+        this.#opts = opts;
+    }
+    get paused() {
+        return this.#paused;
+    }
+    pause() {
+        this.#paused = true;
+    }
+    resume() {
+        this.#paused = false;
+    }
+    #cleanup() {
+        for (const fn of this.#cleanupFns) {
+            fn();
+        }
+        this.#cleanupFns = [];
+    }
+    mount(container) {
+        if (this.#container) {
+            this.unmount();
+        }
+        this.#container = container;
+        this.#manager.register(this);
+        this.#setupEventListeners();
+        this.#handleOpenAutoFocus();
+    }
+    unmount() {
+        if (!this.#container)
+            return;
+        this.#cleanup();
+        // handle close auto-focus
+        this.#handleCloseAutoFocus();
+        this.#manager.unregister(this);
+        this.#container = null;
+    }
+    #handleOpenAutoFocus() {
+        if (!this.#container)
+            return;
+        const event = new CustomEvent("focusScope.onOpenAutoFocus", {
+            bubbles: false,
+            cancelable: true,
+        });
+        this.#opts.onOpenAutoFocus.current(event);
+        if (!event.defaultPrevented) {
+            requestAnimationFrame(() => {
+                if (!this.#container)
+                    return;
+                const firstTabbable = this.#getFirstTabbable();
+                if (firstTabbable) {
+                    firstTabbable.focus();
+                    this.#manager.setFocusMemory(this, firstTabbable);
+                }
+                else {
+                    this.#container.focus();
+                }
+            });
+        }
+    }
+    #handleCloseAutoFocus() {
+        const event = new CustomEvent("focusScope.onCloseAutoFocus", {
+            bubbles: false,
+            cancelable: true,
+        });
+        this.#opts.onCloseAutoFocus.current(event);
+        if (!event.defaultPrevented) {
+            // return focus to previously focused element
+            const prevFocused = document.activeElement;
+            if (prevFocused && prevFocused !== document.body) {
+                prevFocused.focus();
+            }
+        }
+    }
+    #setupEventListeners() {
+        if (!this.#container || !this.#opts.trap.current)
+            return;
+        const container = this.#container;
+        const doc = container.ownerDocument;
+        const handleFocus = (e) => {
+            if (this.#paused || !this.#manager.isActiveScope(this))
+                return;
+            const target = e.target;
+            if (!target)
+                return;
+            const isInside = container.contains(target);
+            if (isInside) {
+                // store last focused element
+                this.#manager.setFocusMemory(this, target);
+            }
+            else {
+                // focus escaped - bring it back
+                const lastFocused = this.#manager.getFocusMemory(this);
+                if (lastFocused && container.contains(lastFocused) && isFocusable(lastFocused)) {
+                    e.preventDefault();
+                    lastFocused.focus();
+                }
+                else {
+                    // fallback to first tabbable or first focusable or container
+                    const firstTabbable = this.#getFirstTabbable();
+                    const firstFocusable = this.#getAllFocusables()[0];
+                    (firstTabbable || firstFocusable || container).focus();
+                }
+            }
+        };
+        const handleKeydown = (e) => {
+            if (!this.#opts.loop || this.#paused || e.key !== "Tab")
+                return;
+            if (!this.#manager.isActiveScope(this))
+                return;
+            const tabbables = this.#getTabbables();
+            if (tabbables.length < 2)
+                return;
+            const first = tabbables[0];
+            const last = tabbables[tabbables.length - 1];
+            if (!e.shiftKey && doc.activeElement === last) {
+                e.preventDefault();
+                first.focus();
+            }
+            else if (e.shiftKey && doc.activeElement === first) {
+                e.preventDefault();
+                last.focus();
+            }
+        };
+        this.#cleanupFns.push(on(doc, "focusin", handleFocus, { capture: true }), on(container, "keydown", handleKeydown));
+        const observer = new MutationObserver(() => {
+            const lastFocused = this.#manager.getFocusMemory(this);
+            if (lastFocused && !container.contains(lastFocused)) {
+                // last focused element was removed
+                const firstTabbable = this.#getFirstTabbable();
+                const firstFocusable = this.#getAllFocusables()[0];
+                const elementToFocus = firstTabbable || firstFocusable;
+                if (elementToFocus) {
+                    elementToFocus.focus();
+                    this.#manager.setFocusMemory(this, elementToFocus);
+                }
+                else {
+                    // no focusable elements left, focus container
+                    container.focus();
+                }
+            }
+        });
+        observer.observe(container, {
+            childList: true,
+            subtree: true,
+        });
+        this.#cleanupFns.push(() => observer.disconnect());
+    }
+    #getTabbables() {
+        if (!this.#container)
+            return [];
+        return tabbable(this.#container, {
+            includeContainer: false,
+            getShadowRoot: true,
+        });
+    }
+    #getFirstTabbable() {
+        const tabbables = this.#getTabbables();
+        return tabbables[0] || null;
+    }
+    #getAllFocusables() {
+        if (!this.#container)
+            return [];
+        return focusable(this.#container, {
+            includeContainer: false,
+            getShadowRoot: true,
+        });
+    }
+    static use(opts) {
+        let scope = null;
+        watch([() => opts.ref.current, () => opts.enabled.current], ([ref, enabled]) => {
+            if (ref && enabled) {
+                if (!scope) {
+                    scope = new FocusScope(opts);
+                }
+                scope.mount(ref);
+            }
+            else if (scope) {
+                scope.unmount();
+                scope = null;
+            }
+        });
+        onDestroyEffect(() => {
+            scope?.unmount();
+        });
+        return {
+            get props() {
+                return {
+                    tabindex: -1,
+                };
+            },
+        };
+    }
+}

package/dist/bits/utilities/focus-scope/types.d.ts

@@ -1,5 +1,4 @@
 import type { Snippet } from "svelte";
-import type { FocusScopeContainerProps } from "./use-focus-scope.svelte.js";
 import type { EventCallback } from "../../../internal/events.js";
 import type { ReadableBox } from "svelte-toolbelt";
 export type FocusScopeProps = {
@@ -21,15 +20,11 @@ export type FocusScopeProps = {
     trapFocus?: boolean;
 };
 export type FocusScopeImplProps = {
-    /**
-     * The ID of the focus scope container node.
-     */
-    id: string;
     /**
      * The snippet to render the focus scope container with its props.
      */
     focusScope?: Snippet<[{
-        props: FocusScopeContainerProps;
+        props: Record<string, unknown>;
     }]>;
     /**
      * When `true` will loop through the tabbable elements in the focus scope.
@@ -39,5 +34,6 @@ export type FocusScopeImplProps = {
      * Whether the content within the focus trap is being force mounted or not.
      */
     forceMount?: boolean;
+    enabled: boolean;
     ref: ReadableBox<HTMLElement | null>;
 } & FocusScopeProps;

package/dist/bits/utilities/popper-layer/popper-layer-inner.svelte

@@ -82,11 +82,11 @@
 			<ScrollLock {preventScroll} />
 		{/if}
 		<FocusScope
-			{id}
 			{onOpenAutoFocus}
 			{onCloseAutoFocus}
 			{loop}
-			trapFocus={enabled && trapFocus}
+			{enabled}
+			{trapFocus}
 			forceMount={restProps.forceMount}
 			{ref}
 		>

package/dist/internal/focus.js

@@ -34,7 +34,7 @@ export function focusWithoutScroll(element) {
  * A utility function that focuses an element.
  */
 export function focus(element, { select = false } = {}) {
-    if (!(element && element.focus))
+    if (!element || !element.focus)
         return;
     const doc = getDocument(element);
     if (doc.activeElement === element)

package/dist/internal/should-enable-focus-trap.d.ts

@@ -0,0 +1,5 @@
+export declare function shouldEnableFocusTrap({ forceMount, present, open, }: {
+    forceMount: boolean;
+    present: boolean;
+    open: boolean;
+}): boolean;

package/dist/internal/should-enable-focus-trap.js

@@ -0,0 +1,5 @@
+export function shouldEnableFocusTrap({ forceMount, present, open, }) {
+    if (forceMount)
+        return open;
+    return present && open;
+}

package/dist/internal/types.d.ts

@@ -1,5 +1,5 @@
 import type { Snippet } from "svelte";
-import type { Box, ReadableBoxedValues, WritableBoxedValues } from "svelte-toolbelt";
+import type { attachRef, 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>;
@@ -90,3 +90,4 @@ export type BitsPointerEvent<T extends HTMLElement = HTMLElement> = BitsEvent<Po
 export type BitsKeyboardEvent<T extends HTMLElement = HTMLElement> = BitsEvent<KeyboardEvent, T>;
 export type BitsMouseEvent<T extends HTMLElement = HTMLElement> = BitsEvent<MouseEvent, T>;
 export type BitsFocusEvent<T extends HTMLElement = HTMLElement> = BitsEvent<FocusEvent, T>;
+export type RefAttachment<T extends HTMLElement = HTMLElement> = ReturnType<typeof attachRef<T>>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bits-ui",
-  "version": "2.8.0",
+  "version": "2.8.2",
   "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.9.1",
+    "svelte-toolbelt": "^0.9.2",
     "tabbable": "^6.2.0"
   },
   "peerDependencies": {

package/dist/bits/utilities/focus-scope/focus-scope-stack.svelte.d.ts

@@ -1,14 +0,0 @@
-export interface FocusScopeAPI {
-    id: string;
-    paused: boolean;
-    pause: () => void;
-    resume: () => void;
-    isHandlingFocus: boolean;
-}
-export declare function createFocusScopeStack(): {
-    add(focusScope: FocusScopeAPI): void;
-    remove(focusScope: FocusScopeAPI): void;
-    readonly current: FocusScopeAPI[];
-};
-export declare function createFocusScopeAPI(): FocusScopeAPI;
-export declare function removeLinks(items: HTMLElement[]): HTMLElement[];

package/dist/bits/utilities/focus-scope/focus-scope-stack.svelte.js

@@ -1,50 +0,0 @@
-import { box } from "svelte-toolbelt";
-import { useId } from "../../../internal/use-id.js";
-const focusStack = box([]);
-export function createFocusScopeStack() {
-    return {
-        add(focusScope) {
-            const activeFocusScope = focusStack.current[0];
-            if (activeFocusScope && focusScope.id !== activeFocusScope.id) {
-                activeFocusScope.pause();
-            }
-            focusStack.current = removeFromFocusScopeArray(focusStack.current, focusScope);
-            focusStack.current.unshift(focusScope);
-        },
-        remove(focusScope) {
-            focusStack.current = removeFromFocusScopeArray(focusStack.current, focusScope);
-            focusStack.current[0]?.resume();
-        },
-        get current() {
-            return focusStack.current;
-        },
-    };
-}
-export function createFocusScopeAPI() {
-    let paused = $state(false);
-    let isHandlingFocus = $state(false);
-    return {
-        id: useId(),
-        get paused() {
-            return paused;
-        },
-        get isHandlingFocus() {
-            return isHandlingFocus;
-        },
-        set isHandlingFocus(value) {
-            isHandlingFocus = value;
-        },
-        pause() {
-            paused = true;
-        },
-        resume() {
-            paused = false;
-        },
-    };
-}
-function removeFromFocusScopeArray(arr, item) {
-    return [...arr].filter((i) => i.id !== item.id);
-}
-export function removeLinks(items) {
-    return items.filter((item) => item.tagName !== "A");
-}

package/dist/bits/utilities/focus-scope/use-focus-scope.svelte.d.ts

@@ -1,49 +0,0 @@
-import { type ReadableBoxedValues } from "svelte-toolbelt";
-import { Context } from "runed";
-import { type EventCallback } from "../../../internal/events.js";
-export type FocusScopeContextValue = {
-    ignoreCloseAutoFocus: boolean;
-};
-export declare const FocusScopeContext: Context<FocusScopeContextValue>;
-type UseFocusScopeProps = ReadableBoxedValues<{
-    /**
-     * ID of the focus scope container node.
-     */
-    id: string;
-    /**
-     * When `true` will loop through the tabbable elements in the focus scope.
-     *
-     * @defaultValue false
-     */
-    loop: boolean;
-    /**
-     * Whether focus is trapped within the focus scope.
-     *
-     * @defaultValue false
-     */
-    enabled: boolean;
-    /**
-     * Event handler called when auto-focusing onMount.
-     * Can be prevented.
-     */
-    onOpenAutoFocus: EventCallback;
-    /**
-     * Event handler called when auto-focusing onDestroy.
-     * Can be prevented.
-     */
-    onCloseAutoFocus: EventCallback;
-    /**
-     * Whether force mount is enabled or not
-     */
-    forceMount: boolean;
-    ref: HTMLElement | null;
-}>;
-export type FocusScopeContainerProps = {
-    id: string;
-    tabindex: number;
-    onkeydown: EventCallback<KeyboardEvent>;
-};
-export declare function useFocusScope({ id, loop, enabled, onOpenAutoFocus, onCloseAutoFocus, forceMount, ref, }: UseFocusScopeProps): {
-    readonly props: FocusScopeContainerProps;
-};
-export {};