bits-ui 1.0.0-next.91 → 1.0.0-next.93

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

@@ -1,7 +1,6 @@
 import type { CommandState } from "./types.js";
 import type { BitsKeyboardEvent, BitsMouseEvent, BitsPointerEvent, WithRefProps } from "../../internal/types.js";
 import type { ReadableBoxedValues, WritableBoxedValues } from "../../internal/box.svelte.js";
-export declare function defaultFilter(value: string, search: string, keywords?: string[]): number;
 type CommandRootStateProps = WithRefProps<ReadableBoxedValues<{
     filter: (value: string, search: string, keywords?: string[]) => number;
     shouldFilter: boolean;

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

@@ -1,11 +1,11 @@
-import { untrack } from "svelte";
 import { afterSleep, afterTick, srOnlyStyles, useRefById } from "svelte-toolbelt";
-import { Context } from "runed";
+import { Context, watch } from "runed";
 import { findNextSibling, findPreviousSibling } from "./utils.js";
-import { commandScore } from "./command-score.js";
 import { kbd } from "../../internal/kbd.js";
 import { getAriaDisabled, getAriaExpanded, getAriaSelected, getDataDisabled, getDataSelected, } from "../../internal/attrs.js";
 import { getFirstNonCommentChild } from "../../internal/dom.js";
+import { computeCommandScore } from "./index.js";
+// attributes
 const COMMAND_ROOT_ATTR = "data-command-root";
 const COMMAND_LIST_ATTR = "data-command-list";
 const COMMAND_INPUT_ATTR = "data-command-input";
@@ -18,15 +18,13 @@ const COMMAND_GROUP_HEADING_ATTR = "data-command-group-heading";
 const COMMAND_ITEM_ATTR = "data-command-item";
 const COMMAND_VIEWPORT_ATTR = "data-command-viewport";
 const COMMAND_INPUT_LABEL_ATTR = "data-command-input-label";
-const VALUE_ATTR = `data-value`;
-const GROUP_SELECTOR = `[${COMMAND_GROUP_ATTR}]`;
-const GROUP_ITEMS_SELECTOR = `[${COMMAND_GROUP_ITEMS_ATTR}]`;
-const GROUP_HEADING_SELECTOR = `[${COMMAND_GROUP_HEADING_ATTR}]`;
-const ITEM_SELECTOR = `[${COMMAND_ITEM_ATTR}]`;
-const VALID_ITEM_SELECTOR = `${ITEM_SELECTOR}:not([aria-disabled="true"])`;
-export function defaultFilter(value, search, keywords) {
-    return commandScore(value, search, keywords);
-}
+const COMMAND_VALUE_ATTR = "data-value";
+// selectors
+const COMMAND_GROUP_SELECTOR = `[${COMMAND_GROUP_ATTR}]`;
+const COMMAND_GROUP_ITEMS_SELECTOR = `[${COMMAND_GROUP_ITEMS_ATTR}]`;
+const COMMAND_GROUP_HEADING_SELECTOR = `[${COMMAND_GROUP_HEADING_ATTR}]`;
+const COMMAND_ITEM_SELECTOR = `[${COMMAND_ITEM_ATTR}]`;
+const COMMAND_VALID_ITEM_SELECTOR = `${COMMAND_ITEM_SELECTOR}:not([aria-disabled="true"])`;
 const CommandRootContext = new Context("Command.Root");
 const CommandListContext = new Context("Command.List");
 const CommandGroupContainerContext = new Context("Command.Group");
@@ -103,7 +101,7 @@ class CommandRootState {
         this.onkeydown = this.onkeydown.bind(this);
     }
     #score(value, keywords) {
-        const filter = this.opts.filter.current ?? defaultFilter;
+        const filter = this.opts.filter.current ?? computeCommandScore;
         const score = value ? filter(value, this._commandState.search, keywords) : 0;
         return score;
     }
@@ -143,11 +141,11 @@ class CommandRootState {
             return scoresB - scoresA;
         });
         for (const item of sorted) {
-            const group = item.closest(GROUP_ITEMS_SELECTOR);
+            const group = item.closest(COMMAND_GROUP_ITEMS_SELECTOR);
             if (group) {
                 const itemToAppend = item.parentElement === group
                     ? item
-                    : item.closest(`${GROUP_ITEMS_SELECTOR} > *`);
+                    : item.closest(`${COMMAND_GROUP_ITEMS_SELECTOR} > *`);
                 if (itemToAppend) {
                     group.appendChild(itemToAppend);
                 }
@@ -155,7 +153,7 @@ class CommandRootState {
             else {
                 const itemToAppend = item.parentElement === listInsertionElement
                     ? item
-                    : item.closest(`${GROUP_ITEMS_SELECTOR} > *`);
+                    : item.closest(`${COMMAND_GROUP_ITEMS_SELECTOR} > *`);
                 if (itemToAppend) {
                     listInsertionElement?.appendChild(itemToAppend);
                 }
@@ -163,7 +161,7 @@ class CommandRootState {
         }
         const sortedGroups = groups.sort((a, b) => b[1] - a[1]);
         for (const group of sortedGroups) {
-            const element = listInsertionElement?.querySelector(`${GROUP_SELECTOR}[${VALUE_ATTR}="${encodeURIComponent(group[0])}"]`);
+            const element = listInsertionElement?.querySelector(`${COMMAND_GROUP_SELECTOR}[${COMMAND_VALUE_ATTR}="${encodeURIComponent(group[0])}"]`);
             element?.parentElement?.appendChild(element);
         }
     }
@@ -179,7 +177,7 @@ class CommandRootState {
     #selectFirstItem() {
         afterTick(() => {
             const item = this.#getValidItems().find((item) => item.getAttribute("aria-disabled") !== "true");
-            const value = item?.getAttribute(VALUE_ATTR);
+            const value = item?.getAttribute(COMMAND_VALUE_ATTR);
             this.setValue(value || "");
         });
     }
@@ -216,14 +214,14 @@ class CommandRootState {
         const node = this.opts.ref.current;
         if (!node)
             return [];
-        const validItems = Array.from(node.querySelectorAll(VALID_ITEM_SELECTOR)).filter((el) => !!el);
+        const validItems = Array.from(node.querySelectorAll(COMMAND_VALID_ITEM_SELECTOR)).filter((el) => !!el);
         return validItems;
     }
     #getSelectedItem() {
         const node = this.opts.ref.current;
         if (!node)
             return;
-        const selectedNode = node.querySelector(`${VALID_ITEM_SELECTOR}[aria-selected="true"]`);
+        const selectedNode = node.querySelector(`${COMMAND_VALID_ITEM_SELECTOR}[aria-selected="true"]`);
         if (!selectedNode)
             return;
         return selectedNode;
@@ -239,8 +237,8 @@ class CommandRootState {
             const firstChildOfParent = getFirstNonCommentChild(grandparent);
             if (firstChildOfParent && firstChildOfParent.dataset?.value === item.dataset?.value) {
                 item
-                    ?.closest(GROUP_SELECTOR)
-                    ?.querySelector(GROUP_HEADING_SELECTOR)
+                    ?.closest(COMMAND_GROUP_SELECTOR)
+                    ?.querySelector(COMMAND_GROUP_HEADING_SELECTOR)
                     ?.scrollIntoView({ block: "nearest" });
                 return;
             }
@@ -251,7 +249,7 @@ class CommandRootState {
         const items = this.#getValidItems();
         const item = items[index];
         if (item) {
-            this.setValue(item.getAttribute(VALUE_ATTR) ?? "");
+            this.setValue(item.getAttribute(COMMAND_VALUE_ATTR) ?? "");
         }
     }
     #updateSelectedByItem(change) {
@@ -269,22 +267,22 @@ class CommandRootState {
                         : items[index + change];
         }
         if (newSelected) {
-            this.setValue(newSelected.getAttribute(VALUE_ATTR) ?? "");
+            this.setValue(newSelected.getAttribute(COMMAND_VALUE_ATTR) ?? "");
         }
     }
     #updateSelectedByGroup(change) {
         const selected = this.#getSelectedItem();
-        let group = selected?.closest(GROUP_SELECTOR);
+        let group = selected?.closest(COMMAND_GROUP_SELECTOR);
         let item;
         while (group && !item) {
             group =
                 change > 0
-                    ? findNextSibling(group, GROUP_SELECTOR)
-                    : findPreviousSibling(group, GROUP_SELECTOR);
-            item = group?.querySelector(VALID_ITEM_SELECTOR);
+                    ? findNextSibling(group, COMMAND_GROUP_SELECTOR)
+                    : findPreviousSibling(group, COMMAND_GROUP_SELECTOR);
+            item = group?.querySelector(COMMAND_VALID_ITEM_SELECTOR);
         }
         if (item) {
-            this.setValue(item.getAttribute(VALUE_ATTR) ?? "");
+            this.setValue(item.getAttribute(COMMAND_VALUE_ATTR) ?? "");
         }
         else {
             this.#updateSelectedByItem(change);
@@ -534,7 +532,7 @@ class CommandInputState {
     opts;
     root;
     #selectedItemId = $derived.by(() => {
-        const item = this.root.viewportNode?.querySelector(`${ITEM_SELECTOR}[${VALUE_ATTR}="${encodeURIComponent(this.opts.value.current)}"]`);
+        const item = this.root.viewportNode?.querySelector(`${COMMAND_ITEM_SELECTOR}[${COMMAND_VALUE_ATTR}="${encodeURIComponent(this.opts.value.current)}"]`);
         if (!item)
             return;
         return item?.getAttribute("id") ?? undefined;
@@ -548,21 +546,16 @@ class CommandInputState {
                 this.root.inputNode = node;
             },
         });
-        $effect(() => {
+        watch(() => this.opts.ref.current, () => {
             const node = this.opts.ref.current;
-            untrack(() => {
-                if (node && this.opts.autofocus.current) {
-                    afterSleep(10, () => node.focus());
-                }
-            });
+            if (node && this.opts.autofocus.current) {
+                afterSleep(10, () => node.focus());
+            }
         });
-        $effect(() => {
-            this.opts.value.current;
-            untrack(() => {
-                if (this.root.commandState.search !== this.opts.value.current) {
-                    this.root.setState("search", this.opts.value.current);
-                }
-            });
+        watch(() => this.opts.value.current, () => {
+            if (this.root.commandState.search !== this.opts.value.current) {
+                this.root.setState("search", this.opts.value.current);
+            }
         });
     }
     props = $derived.by(() => ({
@@ -609,27 +602,23 @@ class CommandItemState {
             ...opts,
             deps: () => Boolean(this.root.commandState.search),
         });
-        $effect(() => {
-            this.opts.id.current;
-            this.#group?.opts.id.current;
-            if (!this.opts.forceMount.current) {
-                return untrack(() => {
-                    return this.root.registerItem(this.opts.id.current, this.#group?.opts.id.current);
-                });
-            }
+        watch([
+            () => this.opts.id.current,
+            () => this.#group?.opts.id.current,
+            () => this.opts.forceMount.current,
+        ], () => {
+            if (this.opts.forceMount.current)
+                return;
+            return this.root.registerItem(this.opts.id.current, this.#group?.opts.id.current);
         });
-        $effect(() => {
-            const value = this.opts.value.current;
-            const node = this.opts.ref.current;
-            if (!node)
+        watch([() => this.opts.value.current, () => this.opts.ref.current], () => {
+            if (!this.opts.ref.current)
                 return;
-            if (!value && node.textContent) {
-                this.trueValue = node.textContent.trim();
+            if (!this.opts.value.current && this.opts.ref.current.textContent) {
+                this.trueValue = this.opts.ref.current.textContent.trim();
             }
-            untrack(() => {
-                this.root.registerValue(this.opts.id.current, this.trueValue, opts.keywords.current.map((keyword) => keyword.trim()));
-                node.setAttribute(VALUE_ATTR, this.trueValue);
-            });
+            this.root.registerValue(this.opts.id.current, this.trueValue, opts.keywords.current.map((kw) => kw.trim()));
+            this.opts.ref.current.setAttribute(COMMAND_VALUE_ATTR, this.trueValue);
         });
         // bindings
         this.onclick = this.onclick.bind(this);

package/dist/bits/command/components/command.svelte

@@ -1,10 +1,11 @@
 <script lang="ts">
 	import { box, mergeProps } from "svelte-toolbelt";
-	import { defaultFilter, useCommandRoot } from "../command.svelte.js";
+	import { useCommandRoot } from "../command.svelte.js";
 	import type { CommandRootProps } from "../types.js";
 	import CommandLabel from "./_command-label.svelte";
 	import { noop } from "../../../internal/noop.js";
 	import { useId } from "../../../internal/use-id.js";
+	import { computeCommandScore } from "../index.js";
 
 	let {
 		id = useId(),
@@ -14,7 +15,7 @@
 		onStateChange = noop,
 		loop = false,
 		shouldFilter = true,
-		filter = defaultFilter,
+		filter = computeCommandScore,
 		label = "",
 		vimBindings = true,
 		disablePointerSelection = false,

package/dist/bits/command/compute-command-score.d.ts

@@ -0,0 +1,26 @@
+/**
+ * Given a command, a search query, and (optionally) a list of keywords for the command,
+ * computes a score between 0 and 1 that represents how well the search query matches the
+ * abbreviation and keywords. 1 is a perfect match, 0 is no match.
+ *
+ * The score is calculated based on the following rules:
+ * - The scores are arranged so that a continuous match of characters will result in a total
+ * score of 1. The best case, this character is a match, and either this is the start of the string
+ * or the previous character was also a match.
+ * - A new match at the start of a word scores better than a new match elsewhere as it's more likely
+ * that the user will type the starts of fragments.
+ * - Word jumps between spaces are scored slightly higher than slashes, brackets, hyphens, etc.
+ * - A continuous match of characters will result in a total score of 1.
+ * - A new match at the start of a word scores better than a new match elsewhere as it's more likely that the user will type the starts of fragments.
+ * - Any other match isn't ideal, but we include it for completeness.
+ * - If the user transposed two letters, it should be significantly penalized.
+ * - The goodness of a match should decay slightly with each missing character.
+ * - Match higher for letters closer to the beginning of the word.
+ *
+ * @param command - The value to score against the search string (e.g. a command name like "Calculator")
+ * @param search - The search string to score against the value/aliases
+ * @param commandKeywords - An optional list of aliases/keywords to score against the search string - e.g. ["math", "add", "divide", "multiply", "subtract"]
+ * @returns A score between 0 and 1 that represents how well the search string matches the
+ * command (and keywords)
+ */
+export declare function computeCommandScore(command: string, search: string, commandKeywords?: string[]): number;

package/dist/bits/command/{command-score.js → compute-command-score.js}

@@ -37,7 +37,7 @@ const PENALTY_SKIPPED = 0.999;
 const PENALTY_CASE_MISMATCH = 0.9999;
 // Match higher for letters closer to the beginning of the word
 // If the word has more characters than the user typed, it should
-// be penalised slightly.
+// be penalized slightly.
 //
 // i.e. "html" is more likely than "html5" if I type "html".
 //
@@ -50,23 +50,21 @@ const IS_GAP_REGEXP = /[\\/_+.#"@[({&]/;
 const COUNT_GAPS_REGEXP = /[\\/_+.#"@[({&]/g;
 const IS_SPACE_REGEXP = /[\s-]/;
 const COUNT_SPACE_REGEXP = /[\s-]/g;
-function commandScoreInner(string, abbreviation, lowerString, lowerAbbreviation, stringIndex, abbreviationIndex, memoizedResults) {
+function computeCommandScoreInner(string, abbreviation, lowerString, lowerAbbreviation, stringIndex, abbreviationIndex, memoizedResults) {
     if (abbreviationIndex === abbreviation.length) {
-        if (stringIndex === string.length) {
+        if (stringIndex === string.length)
             return SCORE_CONTINUE_MATCH;
-        }
         return PENALTY_NOT_COMPLETE;
     }
     const memoizeKey = `${stringIndex},${abbreviationIndex}`;
-    if (memoizedResults[memoizeKey] !== undefined) {
+    if (memoizedResults[memoizeKey] !== undefined)
         return memoizedResults[memoizeKey];
-    }
     const abbreviationChar = lowerAbbreviation.charAt(abbreviationIndex);
     let index = lowerString.indexOf(abbreviationChar, stringIndex);
     let highScore = 0;
     let score, transposedScore, wordBreaks, spaceBreaks;
     while (index >= 0) {
-        score = commandScoreInner(string, abbreviation, lowerString, lowerAbbreviation, index + 1, abbreviationIndex + 1, memoizedResults);
+        score = computeCommandScoreInner(string, abbreviation, lowerString, lowerAbbreviation, index + 1, abbreviationIndex + 1, memoizedResults);
         if (score > highScore) {
             if (index === stringIndex) {
                 score *= SCORE_CONTINUE_MATCH;
@@ -99,9 +97,9 @@ function commandScoreInner(string, abbreviation, lowerString, lowerAbbreviation,
             lowerString.charAt(index - 1) ===
                 lowerAbbreviation.charAt(abbreviationIndex + 1)) ||
             (lowerAbbreviation.charAt(abbreviationIndex + 1) ===
-                lowerAbbreviation.charAt(abbreviationIndex) && // allow duplicate letters. Ref #7428
+                lowerAbbreviation.charAt(abbreviationIndex) &&
                 lowerString.charAt(index - 1) !== lowerAbbreviation.charAt(abbreviationIndex))) {
-            transposedScore = commandScoreInner(string, abbreviation, lowerString, lowerAbbreviation, index + 1, abbreviationIndex + 2, memoizedResults);
+            transposedScore = computeCommandScoreInner(string, abbreviation, lowerString, lowerAbbreviation, index + 1, abbreviationIndex + 2, memoizedResults);
             if (transposedScore * SCORE_TRANSPOSITION > score) {
                 score = transposedScore * SCORE_TRANSPOSITION;
             }
@@ -114,15 +112,49 @@ function commandScoreInner(string, abbreviation, lowerString, lowerAbbreviation,
     memoizedResults[memoizeKey] = highScore;
     return highScore;
 }
+/**
+ *
+ * @param string
+ * @returns
+ */
 function formatInput(string) {
     // convert all valid space characters to space so they match each other
     return string.toLowerCase().replace(COUNT_SPACE_REGEXP, " ");
 }
-export function commandScore(string, abbreviation, aliases) {
-    /* NOTE:
-     * in the original, we used to do the lower-casing on each recursive call, but this meant that toLowerCase()
-     * was the dominating cost in the algorithm, passing both is a little ugly, but considerably faster.
+/**
+ * Given a command, a search query, and (optionally) a list of keywords for the command,
+ * computes a score between 0 and 1 that represents how well the search query matches the
+ * abbreviation and keywords. 1 is a perfect match, 0 is no match.
+ *
+ * The score is calculated based on the following rules:
+ * - The scores are arranged so that a continuous match of characters will result in a total
+ * score of 1. The best case, this character is a match, and either this is the start of the string
+ * or the previous character was also a match.
+ * - A new match at the start of a word scores better than a new match elsewhere as it's more likely
+ * that the user will type the starts of fragments.
+ * - Word jumps between spaces are scored slightly higher than slashes, brackets, hyphens, etc.
+ * - A continuous match of characters will result in a total score of 1.
+ * - A new match at the start of a word scores better than a new match elsewhere as it's more likely that the user will type the starts of fragments.
+ * - Any other match isn't ideal, but we include it for completeness.
+ * - If the user transposed two letters, it should be significantly penalized.
+ * - The goodness of a match should decay slightly with each missing character.
+ * - Match higher for letters closer to the beginning of the word.
+ *
+ * @param command - The value to score against the search string (e.g. a command name like "Calculator")
+ * @param search - The search string to score against the value/aliases
+ * @param commandKeywords - An optional list of aliases/keywords to score against the search string - e.g. ["math", "add", "divide", "multiply", "subtract"]
+ * @returns A score between 0 and 1 that represents how well the search string matches the
+ * command (and keywords)
+ */
+export function computeCommandScore(command, search, commandKeywords) {
+    /**
+     * NOTE: We used to do lower-casing on each recursive call, but this meant that `toLowerCase()`
+     * was the dominating cost in the algorithm. Passing both is a little ugly, but considerably
+     * faster.
      */
-    string = aliases && aliases.length > 0 ? `${`${string} ${aliases?.join(" ")}`}` : string;
-    return commandScoreInner(string, abbreviation, formatInput(string), formatInput(abbreviation), 0, 0, {});
+    command =
+        commandKeywords && commandKeywords.length > 0
+            ? `${`${command} ${commandKeywords?.join(" ")}`}`
+            : command;
+    return computeCommandScoreInner(command, search, formatInput(command), formatInput(search), 0, 0, {});
 }

package/dist/bits/command/index.d.ts

@@ -1 +1,2 @@
 export * as Command from "./exports.js";
+export { computeCommandScore } from "./compute-command-score.js";

package/dist/bits/command/index.js

@@ -1 +1,2 @@
 export * as Command from "./exports.js";
+export { computeCommandScore } from "./compute-command-score.js";

package/dist/bits/command/types.d.ts

@@ -32,7 +32,8 @@ export type CommandRootPropsWithoutHTML = WithChild<{
      * with `1` being a perfect match, and `0` being no match, resulting
      * in the item being hidden entirely.
      *
-     * By default, it will use the `command-score` package to score.
+     * By default, it will use the `computeCommandScore` function exported
+     * by this package to compute the score.
      */
     filter?: (value: string, search: string, keywords?: string[]) => number;
     /**

package/dist/bits/index.d.ts

@@ -7,7 +7,7 @@ export { Calendar } from "./calendar/index.js";
 export { Checkbox } from "./checkbox/index.js";
 export { Collapsible } from "./collapsible/index.js";
 export { Combobox } from "./combobox/index.js";
-export { Command } from "./command/index.js";
+export { Command, computeCommandScore } from "./command/index.js";
 export { ContextMenu } from "./context-menu/index.js";
 export { DateField } from "./date-field/index.js";
 export { DatePicker } from "./date-picker/index.js";

package/dist/bits/index.js

@@ -7,7 +7,7 @@ export { Calendar } from "./calendar/index.js";
 export { Checkbox } from "./checkbox/index.js";
 export { Collapsible } from "./collapsible/index.js";
 export { Combobox } from "./combobox/index.js";
-export { Command } from "./command/index.js";
+export { Command, computeCommandScore } from "./command/index.js";
 export { ContextMenu } from "./context-menu/index.js";
 export { DateField } from "./date-field/index.js";
 export { DatePicker } from "./date-picker/index.js";

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/index.d.ts

@@ -1,4 +1,4 @@
-export { Accordion, AlertDialog, AspectRatio, Avatar, Button, Calendar, Checkbox, Collapsible, Combobox, Command, ContextMenu, DateField, DatePicker, DateRangeField, DateRangePicker, Dialog, DropdownMenu, Label, LinkPreview, Menubar, NavigationMenu, Pagination, PinInput, Popover, Progress, RadioGroup, RangeCalendar, ScrollArea, Select, Separator, Slider, Switch, Tabs, Toggle, ToggleGroup, Toolbar, Tooltip, Portal, IsUsingKeyboard, } from "./bits/index.js";
+export { Accordion, AlertDialog, AspectRatio, Avatar, Button, Calendar, Checkbox, Collapsible, Combobox, Command, ContextMenu, DateField, DatePicker, DateRangeField, DateRangePicker, Dialog, DropdownMenu, Label, LinkPreview, Menubar, NavigationMenu, Pagination, PinInput, Popover, Progress, RadioGroup, RangeCalendar, ScrollArea, Select, Separator, Slider, Switch, Tabs, Toggle, ToggleGroup, Toolbar, Tooltip, Portal, IsUsingKeyboard, computeCommandScore, } from "./bits/index.js";
 export * from "./shared/index.js";
 export type * from "./shared/index.js";
 export * from "./types.js";

package/dist/index.js

@@ -1,3 +1,3 @@
-export { Accordion, AlertDialog, AspectRatio, Avatar, Button, Calendar, Checkbox, Collapsible, Combobox, Command, ContextMenu, DateField, DatePicker, DateRangeField, DateRangePicker, Dialog, DropdownMenu, Label, LinkPreview, Menubar, NavigationMenu, Pagination, PinInput, Popover, Progress, RadioGroup, RangeCalendar, ScrollArea, Select, Separator, Slider, Switch, Tabs, Toggle, ToggleGroup, Toolbar, Tooltip, Portal, IsUsingKeyboard, } from "./bits/index.js";
+export { Accordion, AlertDialog, AspectRatio, Avatar, Button, Calendar, Checkbox, Collapsible, Combobox, Command, ContextMenu, DateField, DatePicker, DateRangeField, DateRangePicker, Dialog, DropdownMenu, Label, LinkPreview, Menubar, NavigationMenu, Pagination, PinInput, Popover, Progress, RadioGroup, RangeCalendar, ScrollArea, Select, Separator, Slider, Switch, Tabs, Toggle, ToggleGroup, Toolbar, Tooltip, Portal, IsUsingKeyboard, computeCommandScore, } from "./bits/index.js";
 export * from "./shared/index.js";
 export * from "./types.js";

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.91",
+  "version": "1.0.0-next.93",
   "license": "MIT",
   "repository": "github:huntabyte/bits-ui",
   "funding": "https://github.com/sponsors/huntabyte",

package/dist/bits/command/command-score.d.ts

@@ -1 +0,0 @@
-export declare function commandScore(string: string, abbreviation: string, aliases?: string[]): number;