bits-ui 2.8.0 → 2.8.1

package/dist/bits/alert-dialog/components/alert-dialog-content.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { afterTick, box, mergeProps } from "svelte-toolbelt";
+	import { afterSleep, box, mergeProps } from "svelte-toolbelt";
 	import type { AlertDialogContentProps } from "../types.js";
 	import DismissibleLayer from "../../utilities/dismissible-layer/dismissible-layer.svelte";
 	import EscapeLayer from "../../utilities/escape-layer/escape-layer.svelte";
@@ -10,7 +10,7 @@
 	import { noop } from "../../../internal/noop.js";
 	import ScrollLock from "../../utilities/scroll-lock/scroll-lock.svelte";
 	import { DialogContentState } from "../../dialog/dialog.svelte.js";
-	import { shouldTrapFocus } from "../../../internal/should-trap-focus.js";
+	import { shouldEnableFocusTrap } from "../../../internal/should-enable-focus-trap.js";
 
 	const uid = $props.id();
 
@@ -51,25 +51,22 @@
 		<FocusScope
 			ref={contentState.opts.ref}
 			loop
-			trapFocus={shouldTrapFocus({
+			{trapFocus}
+			enabled={shouldEnableFocusTrap({
 				forceMount,
 				present: contentState.root.opts.open.current,
-				trapFocus,
 				open: contentState.root.opts.open.current,
 			})}
-			{id}
 			onCloseAutoFocus={(e) => {
 				onCloseAutoFocus(e);
 				if (e.defaultPrevented) return;
-				contentState.root.triggerNode?.focus();
+				afterSleep(0, () => contentState.root.triggerNode?.focus());
 			}}
 			onOpenAutoFocus={(e) => {
 				onOpenAutoFocus(e);
 				if (e.defaultPrevented) return;
 				e.preventDefault();
-				afterTick(() => {
-					contentState.opts.ref.current?.focus();
-				});
+				afterSleep(0, () => contentState.opts.ref.current?.focus());
 			}}
 		>
 			{#snippet focusScope({ props: focusScopeProps })}

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

@@ -11,6 +11,8 @@
 		child,
 		id = createId(uid),
 		ref = $bindable(null),
+		// for safari
+		tabindex = 0,
 		...restProps
 	}: CalendarNextButtonProps = $props();
 
@@ -22,7 +24,7 @@
 		),
 	});
 
-	const mergedProps = $derived(mergeProps(restProps, nextButtonState.props));
+	const mergedProps = $derived(mergeProps(restProps, nextButtonState.props, { tabindex }));
 </script>
 
 {#if child}

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

@@ -11,6 +11,8 @@
 		child,
 		id = createId(uid),
 		ref = $bindable(null),
+		// for safari
+		tabindex = 0,
 		...restProps
 	}: CalendarPrevButtonProps = $props();
 
@@ -22,7 +24,7 @@
 		),
 	});
 
-	const mergedProps = $derived(mergeProps(restProps, prevButtonState.props));
+	const mergedProps = $derived(mergeProps(restProps, prevButtonState.props, { tabindex }));
 </script>
 
 {#if child}

package/dist/bits/context-menu/components/context-menu-content.svelte

@@ -22,7 +22,7 @@
 		// the default menu behavior of handling outside interactions on the trigger
 		onEscapeKeydown = noop,
 		forceMount = false,
-		trapFocus = true,
+		trapFocus = false,
 		...restProps
 	}: ContextMenuContentProps = $props();
 

package/dist/bits/dialog/components/dialog-content.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { box, mergeProps } from "svelte-toolbelt";
+	import { afterSleep, box, mergeProps } from "svelte-toolbelt";
 	import { DialogContentState } from "../dialog.svelte.js";
 	import type { DialogContentProps } from "../types.js";
 	import DismissibleLayer from "../../utilities/dismissible-layer/dismissible-layer.svelte";
@@ -10,8 +10,7 @@
 	import { createId } from "../../../internal/create-id.js";
 	import { noop } from "../../../internal/noop.js";
 	import ScrollLock from "../../utilities/scroll-lock/scroll-lock.svelte";
-	import { shouldTrapFocus } from "../../../internal/should-trap-focus.js";
-
+	import { shouldEnableFocusTrap } from "../../../internal/should-enable-focus-trap.js";
 	const uid = $props.id();
 
 	let {
@@ -51,18 +50,17 @@
 		<FocusScope
 			ref={contentState.opts.ref}
 			loop
-			trapFocus={shouldTrapFocus({
+			{trapFocus}
+			enabled={shouldEnableFocusTrap({
 				forceMount,
 				present: contentState.root.opts.open.current,
-				trapFocus,
 				open: contentState.root.opts.open.current,
 			})}
 			{onOpenAutoFocus}
-			{id}
 			onCloseAutoFocus={(e) => {
 				onCloseAutoFocus(e);
 				if (e.defaultPrevented) return;
-				contentState.root.triggerNode?.focus();
+				afterSleep(1, () => contentState.root.triggerNode?.focus());
 			}}
 		>
 			{#snippet focusScope({ props: focusScopeProps })}

package/dist/bits/dropdown-menu/components/dropdown-menu-content.svelte

@@ -20,6 +20,7 @@
 		onEscapeKeydown = noop,
 		onCloseAutoFocus = noop,
 		forceMount = false,
+		trapFocus = false,
 		...restProps
 	}: DropdownMenuContentProps = $props();
 
@@ -57,7 +58,7 @@
 		enabled={contentState.parentMenu.opts.open.current}
 		onInteractOutside={handleInteractOutside}
 		onEscapeKeydown={handleEscapeKeydown}
-		trapFocus
+		{trapFocus}
 		{loop}
 		forceMount={true}
 		{id}
@@ -85,7 +86,7 @@
 		open={contentState.parentMenu.opts.open.current}
 		onInteractOutside={handleInteractOutside}
 		onEscapeKeydown={handleEscapeKeydown}
-		trapFocus
+		{trapFocus}
 		{loop}
 		forceMount={false}
 		{id}

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

@@ -8,9 +8,7 @@ import { kbd } from "../../internal/kbd.js";
 import { createBitsAttrs, getAriaChecked, getAriaDisabled, getAriaExpanded, getAriaOrientation, getDataDisabled, getDataOpenClosed, } from "../../internal/attrs.js";
 import { IsUsingKeyboard } from "../../index.js";
 import { getTabbableFrom } from "../../internal/tabbable.js";
-import { FocusScopeContext } from "../utilities/focus-scope/use-focus-scope.svelte.js";
 import { isTabbable } from "tabbable";
-import { untrack } from "svelte";
 import { DOMTypeahead } from "../../internal/dom-typeahead.svelte.js";
 import { RovingFocusGroup } from "../../internal/roving-focus-group.js";
 import { GraceArea } from "../../internal/grace-area.svelte.js";
@@ -47,11 +45,6 @@ export const menuAttrs = createBitsAttrs({
 export class MenuRootState {
     static create(opts) {
         const root = new MenuRootState(opts);
-        FocusScopeContext.set({
-            get ignoreCloseAutoFocus() {
-                return root.ignoreCloseAutoFocus;
-            },
-        });
         return MenuRootContext.set(root);
     }
     opts;
@@ -196,9 +189,8 @@ export class MenuContentState {
             rootMenu = rootMenu.parentMenu;
         }
         // if for some unforeseen reason the root menu has no trigger, we bail
-        if (!rootMenu.triggerNode) {
+        if (!rootMenu.triggerNode)
             return;
-        }
         // cancel default tab behavior
         e.preventDefault();
         // find the next/previous tabbable
@@ -328,11 +320,9 @@ export class MenuContentState {
             pointerEvents: "auto",
         },
         ...attachRef(this.opts.ref, (v) => {
-            untrack(() => {
-                if (this.parentMenu.contentNode !== v) {
-                    this.parentMenu.contentNode = v;
-                }
-            });
+            if (this.parentMenu.contentNode !== v) {
+                this.parentMenu.contentNode = v;
+            }
         }),
     }));
     popperProps = {

package/dist/bits/menubar/menubar.svelte.d.ts

@@ -2,7 +2,6 @@ import { type ReadableBox, type ReadableBoxedValues, type WritableBoxedValues }
 import type { InteractOutsideBehaviorType } from "../utilities/dismissible-layer/types.js";
 import type { Direction } from "../../shared/index.js";
 import type { OnChangeFn, WithRefOpts } from "../../internal/types.js";
-import { type FocusScopeContextValue } from "../utilities/focus-scope/use-focus-scope.svelte.js";
 import type { FocusEventHandler, KeyboardEventHandler, PointerEventHandler } from "svelte/elements";
 import { RovingFocusGroup } from "../../internal/roving-focus-group.js";
 interface MenubarRootStateOpts extends WithRefOpts, ReadableBoxedValues<{
@@ -111,7 +110,6 @@ export declare class MenubarContentState {
     readonly opts: MenubarContentStateOpts;
     readonly menu: MenubarMenuState;
     readonly root: MenubarRootState;
-    focusScopeContext: FocusScopeContextValue;
     constructor(opts: MenubarContentStateOpts, menu: MenubarMenuState);
     onCloseAutoFocus: (e: Event) => void;
     onFocusOutside: (e: FocusEvent) => void;

package/dist/bits/menubar/menubar.svelte.js

@@ -3,7 +3,6 @@ import { Context, watch } from "runed";
 import { createBitsAttrs, getAriaExpanded, getDataDisabled, getDataOpenClosed, } from "../../internal/attrs.js";
 import { kbd } from "../../internal/kbd.js";
 import { wrapArray } from "../../internal/arrays.js";
-import { FocusScopeContext, } from "../utilities/focus-scope/use-focus-scope.svelte.js";
 import { onMount } from "svelte";
 import { getFloatingContentCSSVars } from "../../internal/floating-svelte/floating-utils.svelte";
 import { RovingFocusGroup } from "../../internal/roving-focus-group.js";
@@ -215,12 +214,10 @@ export class MenubarContentState {
     opts;
     menu;
     root;
-    focusScopeContext;
     constructor(opts, menu) {
         this.opts = opts;
         this.menu = menu;
         this.root = menu.root;
-        this.focusScopeContext = FocusScopeContext.get();
     }
     onCloseAutoFocus = (e) => {
         this.opts.onCloseAutoFocus.current(e);

package/dist/bits/navigation-menu/components/navigation-menu-link.svelte

@@ -14,6 +14,7 @@
 		children,
 		active = false,
 		onSelect = noop,
+		tabindex = 0,
 		...restProps
 	}: NavigationMenuLinkProps = $props();
 
@@ -27,7 +28,7 @@
 		onSelect: box.with(() => onSelect),
 	});
 
-	const mergedProps = $derived(mergeProps(restProps, linkState.props));
+	const mergedProps = $derived(mergeProps(restProps, linkState.props, { tabindex }));
 </script>
 
 {#if child}

package/dist/bits/navigation-menu/components/navigation-menu-trigger.svelte

@@ -14,6 +14,7 @@
 		children,
 		child,
 		ref = $bindable(null),
+		tabindex = 0,
 		...restProps
 	}: NavigationMenuTriggerProps = $props();
 
@@ -26,7 +27,7 @@
 		),
 	});
 
-	const mergedProps = $derived(mergeProps(restProps, triggerState.props));
+	const mergedProps = $derived(mergeProps(restProps, triggerState.props, { tabindex }));
 </script>
 
 {#if child}

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

@@ -0,0 +1,12 @@
+import { FocusScope } from "./focus-scope.svelte.js";
+export declare class FocusScopeManager {
+    #private;
+    static instance: FocusScopeManager;
+    static getInstance(): FocusScopeManager;
+    register(scope: FocusScope): void;
+    unregister(scope: FocusScope): void;
+    getActive(): FocusScope | undefined;
+    setFocusMemory(scope: FocusScope, element: HTMLElement): void;
+    getFocusMemory(scope: FocusScope): HTMLElement | undefined;
+    isActiveScope(scope: FocusScope): boolean;
+}

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bits-ui",
-  "version": "2.8.0",
+  "version": "2.8.1",
   "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 {};

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

@@ -1,218 +0,0 @@
-import { afterSleep, afterTick, DOMContext, executeCallbacks, } from "svelte-toolbelt";
-import { Context, watch } from "runed";
-import { on } from "svelte/events";
-import { createFocusScopeAPI, createFocusScopeStack, removeLinks, } from "./focus-scope-stack.svelte.js";
-import { focus, focusFirst, getTabbableCandidates, getTabbableEdges } from "../../../internal/focus.js";
-import { CustomEventDispatcher } from "../../../internal/events.js";
-import { isHTMLElement } from "../../../internal/is.js";
-import { kbd } from "../../../internal/kbd.js";
-import { isTabbable } from "tabbable";
-const AutoFocusOnMountEvent = new CustomEventDispatcher("focusScope.autoFocusOnMount", {
-    bubbles: false,
-    cancelable: true,
-});
-const AutoFocusOnDestroyEvent = new CustomEventDispatcher("focusScope.autoFocusOnDestroy", {
-    bubbles: false,
-    cancelable: true,
-});
-export const FocusScopeContext = new Context("FocusScope");
-export function useFocusScope({ id, loop, enabled, onOpenAutoFocus, onCloseAutoFocus, forceMount, ref, }) {
-    const focusScopeStack = createFocusScopeStack();
-    const focusScope = createFocusScopeAPI();
-    const ctx = FocusScopeContext.getOr({ ignoreCloseAutoFocus: false });
-    let lastFocusedElement = null;
-    const domContext = new DOMContext(ref);
-    function manageFocus(event) {
-        if (focusScope.paused || !ref.current || focusScope.isHandlingFocus)
-            return;
-        focusScope.isHandlingFocus = true;
-        try {
-            const target = event.target;
-            if (!isHTMLElement(target))
-                return;
-            const isWithinActiveScope = ref.current.contains(target);
-            if (event.type === "focusin") {
-                if (isWithinActiveScope) {
-                    lastFocusedElement = target;
-                }
-                else {
-                    if (ctx.ignoreCloseAutoFocus)
-                        return;
-                    focus(lastFocusedElement, { select: true });
-                }
-            }
-            else if (event.type === "focusout") {
-                if (!isWithinActiveScope && !ctx.ignoreCloseAutoFocus) {
-                    focus(lastFocusedElement, { select: true });
-                }
-            }
-        }
-        finally {
-            focusScope.isHandlingFocus = false;
-        }
-    }
-    /**
-     * Handles DOM mutations within the container. Specifically checks if the
-     * last known focused element inside the container has been removed. If so,
-     * and focus has escaped the container (likely moved to document.body),
-     * it refocuses the container itself to maintain the trap.
-     */
-    function handleMutations(mutations) {
-        // if there's no record of a last focused el, or container isn't mounted, bail
-        if (!lastFocusedElement || !ref.current)
-            return;
-        // track if the last focused element was removed
-        let elementWasRemoved = false;
-        for (const mutation of mutations) {
-            // we only care about mutations where nodes were removed
-            if (mutation.type === "childList" && mutation.removedNodes.length > 0) {
-                // check if any removed nodes are the last focused element or contain it
-                for (const removedNode of mutation.removedNodes) {
-                    if (removedNode === lastFocusedElement) {
-                        elementWasRemoved = true;
-                        // found it directly
-                        break;
-                    }
-                    // contains() only works on elements, so we need to check nodeType
-                    if (removedNode.nodeType === Node.ELEMENT_NODE &&
-                        removedNode.contains(lastFocusedElement)) {
-                        elementWasRemoved = true;
-                        // descendant found,
-                        break;
-                    }
-                }
-            }
-            // if we've confirmed removal in any mutation, bail
-            if (elementWasRemoved)
-                break;
-        }
-        /**
-         * If the element was removed and focus is now outside the container,
-         * (e.g., browser moved it to body), refocus the container.
-         */
-        if (elementWasRemoved &&
-            ref.current &&
-            !ref.current.contains(domContext.getActiveElement())) {
-            focus(ref.current);
-        }
-    }
-    watch([() => ref.current, () => enabled.current], ([container, enabled]) => {
-        if (!container || !enabled)
-            return;
-        const removeEvents = executeCallbacks(on(domContext.getDocument(), "focusin", manageFocus), on(domContext.getDocument(), "focusout", manageFocus));
-        const mutationObserver = new MutationObserver(handleMutations);
-        mutationObserver.observe(container, {
-            childList: true,
-            subtree: true,
-            attributes: false,
-        });
-        return () => {
-            removeEvents();
-            mutationObserver.disconnect();
-        };
-    });
-    watch([() => forceMount.current, () => ref.current], ([forceMount, container]) => {
-        if (forceMount)
-            return;
-        const prevFocusedElement = domContext.getActiveElement();
-        handleOpen(container, prevFocusedElement);
-        return () => {
-            if (!container)
-                return;
-            handleClose(prevFocusedElement);
-        };
-    });
-    watch([() => forceMount.current, () => ref.current, () => enabled.current], ([forceMount, container]) => {
-        if (!forceMount)
-            return;
-        const prevFocusedElement = domContext.getActiveElement();
-        handleOpen(container, prevFocusedElement);
-        return () => {
-            if (!container)
-                return;
-            handleClose(prevFocusedElement);
-        };
-    });
-    function handleOpen(container, prevFocusedElement) {
-        if (!container)
-            container = domContext.getElementById(id.current);
-        if (!container || !enabled.current)
-            return;
-        focusScopeStack.add(focusScope);
-        const hasFocusedCandidate = container.contains(prevFocusedElement);
-        if (!hasFocusedCandidate) {
-            const mountEvent = AutoFocusOnMountEvent.createEvent();
-            onOpenAutoFocus.current(mountEvent);
-            if (!mountEvent.defaultPrevented) {
-                afterTick(() => {
-                    if (!container)
-                        return;
-                    const result = focusFirst(removeLinks(getTabbableCandidates(container)), {
-                        select: true,
-                    }, () => domContext.getActiveElement());
-                    if (!result)
-                        focus(container);
-                });
-            }
-        }
-    }
-    function handleClose(prevFocusedElement) {
-        const destroyEvent = AutoFocusOnDestroyEvent.createEvent();
-        onCloseAutoFocus.current?.(destroyEvent);
-        const shouldIgnore = ctx.ignoreCloseAutoFocus;
-        afterSleep(0, () => {
-            if (!destroyEvent.defaultPrevented && prevFocusedElement && !shouldIgnore) {
-                focus(isTabbable(prevFocusedElement)
-                    ? prevFocusedElement
-                    : domContext.getDocument().body, {
-                    select: true,
-                });
-            }
-            focusScopeStack.remove(focusScope);
-        });
-    }
-    function handleKeydown(e) {
-        if (!enabled.current)
-            return;
-        if (!loop.current && !enabled.current)
-            return;
-        if (focusScope.paused)
-            return;
-        const isTabKey = e.key === kbd.TAB && !e.ctrlKey && !e.altKey && !e.metaKey;
-        const focusedElement = domContext.getActiveElement();
-        if (!(isTabKey && focusedElement))
-            return;
-        const container = ref.current;
-        if (!container)
-            return;
-        const [first, last] = getTabbableEdges(container);
-        const hasTabbableElementsInside = first && last;
-        if (!hasTabbableElementsInside) {
-            if (focusedElement === container) {
-                e.preventDefault();
-            }
-        }
-        else {
-            if (!e.shiftKey && focusedElement === last) {
-                e.preventDefault();
-                if (loop.current)
-                    focus(first, { select: true });
-            }
-            else if (e.shiftKey && focusedElement === first) {
-                e.preventDefault();
-                if (loop.current)
-                    focus(last, { select: true });
-            }
-        }
-    }
-    const props = $derived.by(() => ({
-        id: id.current,
-        tabindex: -1,
-        onkeydown: handleKeydown,
-    }));
-    return {
-        get props() {
-            return props;
-        },
-    };
-}

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

@@ -1,6 +0,0 @@
-export declare function shouldTrapFocus({ forceMount, present, trapFocus, open, }: {
-    forceMount: boolean;
-    present: boolean;
-    trapFocus: boolean;
-    open: boolean;
-}): boolean;

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

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