bits-ui 1.0.0-next.92 → 1.0.0-next.94

package/dist/bits/command/command.svelte.js

@@ -44,7 +44,7 @@ class CommandRootState {
     // internal state that we mutate in batches and publish to the `state` at once
     _commandState = $state(null);
     #snapshot() {
-        return this._commandState;
+        return $state.snapshot(this._commandState);
     }
     #scheduleUpdate() {
         if (this.#updateScheduled)
@@ -56,7 +56,7 @@ class CommandRootState {
             const hasStateChanged = !Object.is(this.commandState, currentState);
             if (hasStateChanged) {
                 this.commandState = currentState;
-                this.opts.onStateChange?.current?.($state.snapshot(currentState));
+                this.opts.onStateChange?.current?.(currentState);
             }
         });
     }

package/dist/bits/navigation-menu/navigation-menu.svelte.d.ts

@@ -319,6 +319,7 @@ declare class NavigationMenuViewportState {
             readonly "--bits-navigation-menu-viewport-width": string | undefined;
             readonly "--bits-navigation-menu-viewport-height": string | undefined;
         };
+        readonly "data-navigation-menu-viewport": "";
         readonly onpointerenter: () => void;
         readonly onpointerleave: () => void;
     };

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

@@ -26,6 +26,7 @@ const NAVIGATION_MENU_LIST_ATTR = "data-navigation-menu-list";
 const NAVIGATION_MENU_TRIGGER_ATTR = "data-navigation-menu-trigger";
 const NAVIGATION_MENU_CONTENT_ATTR = "data-navigation-menu-content";
 const NAVIGATION_MENU_LINK_ATTR = "data-navigation-menu-link";
+const NAVIGATION_MENU_VIEWPORT_ATTR = "data-navigation-menu-viewport";
 class NavigationMenuProviderState {
     opts;
     indicatorTrackRef = box(null);
@@ -704,6 +705,7 @@ class NavigationMenuViewportState {
             "--bits-navigation-menu-viewport-width": this.viewportWidth,
             "--bits-navigation-menu-viewport-height": this.viewportHeight,
         },
+        [NAVIGATION_MENU_VIEWPORT_ATTR]: "",
         onpointerenter: this.context.onContentEnter,
         onpointerleave: this.context.onContentLeave,
     }));

package/dist/bits/tooltip/tooltip.svelte.js

@@ -207,7 +207,7 @@ class TooltipContentState {
         useGraceArea({
             triggerNode: () => this.root.triggerNode,
             contentNode: () => this.root.contentNode,
-            enabled: () => this.root.opts.open.current && this.root.disableHoverableContent,
+            enabled: () => this.root.opts.open.current && !this.root.disableHoverableContent,
             onPointerExit: () => {
                 this.root.handleClose();
             },

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

@@ -1,12 +1,14 @@
-export type FocusScopeAPI = {
+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

@@ -2,31 +2,38 @@ import { box } from "svelte-toolbelt";
 import { useId } from "../../../internal/use-id.js";
 const focusStack = box([]);
 export function createFocusScopeStack() {
-    const stack = focusStack;
     return {
         add(focusScope) {
-            // pause the currently active focus scope (top of the stack)
-            const activeFocusScope = stack.current[0];
-            if (focusScope.id !== activeFocusScope?.id) {
-                activeFocusScope?.pause();
+            const activeFocusScope = focusStack.current[0];
+            if (activeFocusScope && focusScope.id !== activeFocusScope.id) {
+                activeFocusScope.pause();
             }
-            // remove in case it already exists because it'll be added to the top
-            stack.current = removeFromFocusScopeArray(stack.current, focusScope);
-            stack.current.unshift(focusScope);
+            focusStack.current = removeFromFocusScopeArray(focusStack.current, focusScope);
+            focusStack.current.unshift(focusScope);
         },
         remove(focusScope) {
-            stack.current = removeFromFocusScopeArray(stack.current, focusScope);
-            stack.current[0]?.resume();
+            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;
         },

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

@@ -21,69 +21,57 @@ export function useFocusScope({ id, loop, enabled, onOpenAutoFocus, onCloseAutoF
     const focusScope = createFocusScopeAPI();
     const ref = box(null);
     const ctx = FocusScopeContext.getOr({ ignoreCloseAutoFocus: false });
+    let lastFocusedElement = null;
     useRefById({
         id,
         ref,
         deps: () => enabled.current,
     });
-    let lastFocusedElement = null;
-    watch([() => ref.current, () => enabled.current], ([container, enabled]) => {
-        if (!container || !enabled)
+    function manageFocus(event) {
+        if (focusScope.paused || !ref.current || focusScope.isHandlingFocus)
             return;
-        const handleFocusIn = (event) => {
-            if (focusScope.paused || !container)
-                return;
+        focusScope.isHandlingFocus = true;
+        try {
             const target = event.target;
             if (!isHTMLElement(target))
                 return;
-            if (container.contains(target)) {
-                lastFocusedElement = target;
-            }
-            else {
-                if (ctx.ignoreCloseAutoFocus)
-                    return;
-                focus(lastFocusedElement, { select: true });
-            }
-        };
-        const handleFocusOut = (event) => {
-            if (focusScope.paused || !container || ctx.ignoreCloseAutoFocus) {
-                return;
-            }
-            const relatedTarget = event.relatedTarget;
-            if (!isHTMLElement(relatedTarget))
-                return;
-            // A `focusout` event with a `null` `relatedTarget` will happen in at least two cases:
-            //
-            // 1. When the user switches app/tabs/windows/the browser itself loses focus.
-            // 2. In Google Chrome, when the focused element is removed from the DOM.
-            //
-            // We let the browser do its thing here because:
-            //
-            // 1. The browser already keeps a memory of what's focused for when the
-            // page gets refocused.
-            // 2. In Google Chrome, if we try to focus the deleted focused element it throws
-            // the CPU to 100%, so we avoid doing anything for this reason here too.
-            if (relatedTarget === null)
-                return;
-            // If the focus has moved to an actual legitimate element (`relatedTarget !== null`)
-            // that is outside the container, we move focus to the last valid focused element inside.
-            if (!container.contains(relatedTarget)) {
-                focus(lastFocusedElement, { select: true });
+            const isWithinActiveScope = ref.current.contains(target);
+            if (event.type === "focusin") {
+                if (isWithinActiveScope) {
+                    lastFocusedElement = target;
+                }
+                else {
+                    if (ctx.ignoreCloseAutoFocus)
+                        return;
+                    focus(lastFocusedElement, { select: true });
+                }
             }
-        };
-        // When the focused element gets removed from the DOM, browsers move focus
-        // back to the document.body. In this case, we move focus to the container
-        // to keep focus trapped correctly.
-        // instead of leaning on document.activeElement, we use lastFocusedElement to check
-        // if the element still exists inside the container,
-        // if not then we focus to the container
-        const handleMutations = (_) => {
-            const lastFocusedElementExists = container?.contains(lastFocusedElement);
-            if (!lastFocusedElementExists) {
-                focus(container);
+            else if (event.type === "focusout") {
+                if (!isWithinActiveScope && !ctx.ignoreCloseAutoFocus) {
+                    focus(lastFocusedElement, { select: true });
+                }
             }
-        };
-        const removeEvents = executeCallbacks(on(document, "focusin", handleFocusIn), on(document, "focusout", handleFocusOut));
+        }
+        finally {
+            focusScope.isHandlingFocus = false;
+        }
+    }
+    // When the focused element gets removed from the DOM, browsers move focus
+    // back to the document.body. In this case, we move focus to the container
+    // to keep focus trapped correctly.
+    // instead of leaning on document.activeElement, we use lastFocusedElement to check
+    // if the element still exists inside the container,
+    // if not then we focus to the container
+    function handleMutations(_) {
+        const lastFocusedElementExists = ref.current?.contains(lastFocusedElement);
+        if (!lastFocusedElementExists && ref.current) {
+            focus(ref.current);
+        }
+    }
+    watch([() => ref.current, () => enabled.current], ([container, enabled]) => {
+        if (!container || !enabled)
+            return;
+        const removeEvents = executeCallbacks(on(document, "focusin", manageFocus), on(document, "focusout", manageFocus));
         const mutationObserver = new MutationObserver(handleMutations);
         mutationObserver.observe(container, { childList: true, subtree: true });
         return () => {

package/dist/internal/focus.js

@@ -33,6 +33,8 @@ export function focusWithoutScroll(element) {
 export function focus(element, { select = false } = {}) {
     if (!(element && element.focus))
         return;
+    if (document.activeElement === element)
+        return;
     const previouslyFocusedElement = document.activeElement;
     // prevent scroll on focus
     element.focus({ preventScroll: true });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bits-ui",
-  "version": "1.0.0-next.92",
+  "version": "1.0.0-next.94",
   "license": "MIT",
   "repository": "github:huntabyte/bits-ui",
   "funding": "https://github.com/sponsors/huntabyte",