bits-ui 1.4.1 → 1.4.2

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

@@ -54,7 +54,7 @@
 				trapFocus,
 				open: contentState.root.opts.open.current,
 			})}
-			{...mergedProps}
+			{id}
 			onCloseAutoFocus={(e) => {
 				onCloseAutoFocus(e);
 				if (e.defaultPrevented) return;

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

@@ -28,7 +28,6 @@ declare class CommandRootState {
     labelNode: HTMLElement | null;
     commandState: CommandState;
     _commandState: CommandState;
-    searchHasHadValue: boolean;
     setState<K extends keyof CommandState>(key: K, value: CommandState[K], opts?: boolean): void;
     constructor(opts: CommandRootStateProps);
     /**
@@ -104,7 +103,7 @@ declare class CommandRootState {
      * @param keywords - Optional search boost terms
      * @returns Cleanup function
      */
-    registerValue(id: string, value: string, keywords?: string[]): () => void;
+    registerValue(value: string, keywords?: string[]): () => void;
     /**
      * Registers item in command list and its group.
      * Handles filtering, sorting and selection updates.
@@ -153,8 +152,8 @@ declare class CommandGroupContainerState {
     readonly opts: CommandGroupContainerStateProps;
     readonly root: CommandRootState;
     headingNode: HTMLElement | null;
-    shouldRender: boolean;
     trueValue: string;
+    shouldRender: boolean;
     constructor(opts: CommandGroupContainerStateProps, root: CommandRootState);
     props: {
         readonly id: string;

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

@@ -5,7 +5,6 @@ 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";
-import { noop } from "../../internal/noop.js";
 // attributes
 const COMMAND_ROOT_ATTR = "data-command-root";
 const COMMAND_LIST_ATTR = "data-command-list";
@@ -60,8 +59,6 @@ class CommandRootState {
     commandState = $state.raw(defaultState);
     // internal state that we mutate in batches and publish to the `state` at once
     _commandState = $state(defaultState);
-    // whether the search has had a value other than ""
-    searchHasHadValue = $state(false);
     #snapshot() {
         return $state.snapshot(this._commandState);
     }
@@ -87,10 +84,6 @@ class CommandRootState {
             // Filter synchronously before emitting back to children
             this.#filterItems();
             this.#sort();
-            this.#selectFirstItem();
-            afterTick(() => {
-                this.#selectFirstItem();
-            });
         }
         else if (key === "value") {
             // opts is a boolean referring to whether it should NOT be scrolled into view
@@ -108,11 +101,6 @@ class CommandRootState {
         this.commandState = defaults;
         useRefById(opts);
         this.onkeydown = this.onkeydown.bind(this);
-        $effect(() => {
-            if (this._commandState.search !== "") {
-                this.searchHasHadValue = true;
-            }
-        });
     }
     /**
      * Calculates score for an item based on search text and keywords.
@@ -135,8 +123,10 @@ class CommandRootState {
     #sort() {
         if (!this._commandState.search || this.opts.shouldFilter.current === false) {
             // If no search and no selection yet, select first item
-            if (!this.commandState.value)
-                this.#selectFirstItem();
+            this.#selectFirstItem();
+            // if (!this.commandState.value) {
+            // this.#selectFirstItem();
+            // }
             return;
         }
         const scores = this._commandState.filtered.items;
@@ -161,8 +151,8 @@ class CommandRootState {
         // Sort groups to bottom (pushes all non-grouped items to the top)
         const listInsertionElement = this.viewportNode;
         const sorted = this.getValidItems().sort((a, b) => {
-            const valueA = a.getAttribute("id");
-            const valueB = b.getAttribute("id");
+            const valueA = a.getAttribute("data-value");
+            const valueB = b.getAttribute("data-value");
             const scoresA = scores.get(valueA) ?? 0;
             const scoresB = scores.get(valueB) ?? 0;
             return scoresB - scoresA;
@@ -191,6 +181,7 @@ class CommandRootState {
             const element = listInsertionElement?.querySelector(`${COMMAND_GROUP_SELECTOR}[${COMMAND_VALUE_ATTR}="${encodeURIComponent(group[0])}"]`);
             element?.parentElement?.appendChild(element);
         }
+        this.#selectFirstItem();
     }
     /**
      * Sets current value and triggers re-render if cleared.
@@ -399,11 +390,11 @@ class CommandRootState {
      * @param keywords - Optional search boost terms
      * @returns Cleanup function
      */
-    registerValue(id, value, keywords) {
-        if (value === this.allIds.get(id)?.value)
-            return noop;
-        this.allIds.set(id, { value, keywords });
-        this._commandState.filtered.items.set(id, this.#score(value, keywords));
+    registerValue(value, keywords) {
+        if (!(value && value === this.allIds.get(value)?.value)) {
+            this.allIds.set(value, { value, keywords });
+        }
+        this._commandState.filtered.items.set(value, this.#score(value, keywords));
         // Schedule sorting to run after this tick when all items are added not each time an item is added
         if (!this.sortAfterTick) {
             this.sortAfterTick = true;
@@ -413,7 +404,7 @@ class CommandRootState {
             });
         }
         return () => {
-            this.allIds.delete(id);
+            this.allIds.delete(value);
         };
     }
     /**
@@ -587,9 +578,7 @@ class CommandEmptyState {
     root;
     #isInitialRender = true;
     shouldRender = $derived.by(() => {
-        return ((this.root._commandState.filtered.count === 0 &&
-            this.#isInitialRender === false &&
-            this.root.searchHasHadValue) ||
+        return ((this.root._commandState.filtered.count === 0 && this.#isInitialRender === false) ||
             this.opts.forceMount.current);
     });
     constructor(opts, root) {
@@ -613,6 +602,7 @@ class CommandGroupContainerState {
     opts;
     root;
     headingNode = $state(null);
+    trueValue = $state("");
     shouldRender = $derived.by(() => {
         if (this.opts.forceMount.current)
             return true;
@@ -620,9 +610,8 @@ class CommandGroupContainerState {
             return true;
         if (!this.root.commandState.search)
             return true;
-        return this.root.commandState.filtered.groups.has(this.opts.id.current);
+        return this.root._commandState.filtered.groups.has(this.trueValue);
     });
-    trueValue = $state("");
     constructor(opts, root) {
         this.opts = opts;
         this.root = root;
@@ -631,21 +620,21 @@ class CommandGroupContainerState {
             ...opts,
             deps: () => this.shouldRender,
         });
-        watch(() => this.opts.id.current, () => {
-            return this.root.registerGroup(this.opts.id.current);
+        watch(() => this.trueValue, () => {
+            return this.root.registerGroup(this.trueValue);
         });
         $effect(() => {
             if (this.opts.value.current) {
                 this.trueValue = this.opts.value.current;
-                return this.root.registerValue(this.opts.id.current, this.opts.value.current);
+                return this.root.registerValue(this.opts.value.current);
             }
             else if (this.headingNode && this.headingNode.textContent) {
                 this.trueValue = this.headingNode.textContent.trim().toLowerCase();
-                return this.root.registerValue(this.opts.id.current, this.trueValue);
+                return this.root.registerValue(this.trueValue);
             }
             else if (this.opts.ref.current?.textContent) {
                 this.trueValue = this.opts.ref.current.textContent.trim().toLowerCase();
-                return this.root.registerValue(this.opts.id.current, this.trueValue);
+                return this.root.registerValue(this.trueValue);
             }
         });
     }
@@ -750,7 +739,7 @@ class CommandItemState {
             !this.root.commandState.search) {
             return true;
         }
-        const currentScore = this.root.commandState.filtered.items.get(this.opts.id.current);
+        const currentScore = this.root.commandState.filtered.items.get(this.trueValue);
         if (currentScore === undefined)
             return false;
         return currentScore > 0;
@@ -766,23 +755,20 @@ class CommandItemState {
             deps: () => Boolean(this.root.commandState.search),
         });
         watch([
-            () => this.opts.id.current,
-            () => this.#group?.opts.id.current,
+            () => this.trueValue,
+            () => this.#group?.trueValue,
             () => this.opts.forceMount.current,
-            () => this.opts.ref.current,
         ], () => {
             if (this.opts.forceMount.current)
                 return;
-            return this.root.registerItem(this.opts.id.current, this.#group?.opts.id.current);
+            return this.root.registerItem(this.trueValue, this.#group?.trueValue);
         });
         watch([() => this.opts.value.current, () => this.opts.ref.current], () => {
-            if (!this.opts.ref.current)
-                return;
-            if (!this.opts.value.current && this.opts.ref.current.textContent) {
+            if (!this.opts.value.current && this.opts.ref.current?.textContent) {
                 this.trueValue = this.opts.ref.current.textContent.trim();
             }
-            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);
+            this.root.registerValue(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/types.d.ts

@@ -8,7 +8,7 @@ export type CommandState = {
     filtered: {
         /** The count of all visible items. */
         count: number;
-        /** Map from visible item id to its search store. */
+        /** Map from visible item value to its search store. */
         items: Map<string, number>;
         /** Set of groups with at least one visible item. */
         groups: Set<string>;

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

@@ -19,6 +19,7 @@
 		ref = $bindable(null),
 		forceMount = false,
 		onCloseAutoFocus = noop,
+		onOpenAutoFocus = noop,
 		onEscapeKeydown = noop,
 		onInteractOutside = noop,
 		trapFocus = true,
@@ -52,7 +53,8 @@
 				trapFocus,
 				open: contentState.root.opts.open.current,
 			})}
-			{...mergedProps}
+			{onOpenAutoFocus}
+			{id}
 			onCloseAutoFocus={(e) => {
 				onCloseAutoFocus(e);
 				if (e.defaultPrevented) return;

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

@@ -9,7 +9,6 @@ type DialogRootStateProps = WritableBoxedValues<{
 declare class DialogRootState {
     readonly opts: DialogRootStateProps;
     triggerNode: HTMLElement | null;
-    titleNode: HTMLElement | null;
     contentNode: HTMLElement | null;
     descriptionNode: HTMLElement | null;
     contentId: string | undefined;
@@ -95,7 +94,6 @@ declare class DialogTitleState {
     props: {
         readonly "data-state": "open" | "closed";
         readonly id: string;
-        readonly role: "heading";
         readonly "aria-level": 1 | 2 | 3 | 4 | 5 | 6;
     };
 }

package/dist/bits/dialog/dialog.svelte.js

@@ -17,7 +17,6 @@ function createAttrs(variant) {
 class DialogRootState {
     opts;
     triggerNode = $state(null);
-    titleNode = $state(null);
     contentNode = $state(null);
     descriptionNode = $state(null);
     contentId = $state(undefined);
@@ -151,7 +150,6 @@ class DialogTitleState {
         useRefById({
             ...opts,
             onRefChange: (node) => {
-                this.root.titleNode = node;
                 this.root.titleId = node?.id;
             },
             deps: () => this.root.opts.open.current,
@@ -159,7 +157,7 @@ class DialogTitleState {
     }
     props = $derived.by(() => ({
         id: this.opts.id.current,
-        role: "heading",
+        // role: "heading",
         "aria-level": this.opts.level.current,
         [this.root.attrs.title]: "",
         ...this.root.sharedProps,

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

@@ -56,15 +56,46 @@ export function useFocusScope({ id, loop, enabled, onOpenAutoFocus, onCloseAutoF
             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) {
+    /**
+     * 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(document.activeElement)) {
             focus(ref.current);
         }
     }
@@ -73,7 +104,11 @@ export function useFocusScope({ id, loop, enabled, onOpenAutoFocus, onCloseAutoF
             return;
         const removeEvents = executeCallbacks(on(document, "focusin", manageFocus), on(document, "focusout", manageFocus));
         const mutationObserver = new MutationObserver(handleMutations);
-        mutationObserver.observe(container, { childList: true, subtree: true });
+        mutationObserver.observe(container, {
+            childList: true,
+            subtree: true,
+            attributes: false,
+        });
         return () => {
             removeEvents();
             mutationObserver.disconnect();
@@ -115,10 +150,11 @@ export function useFocusScope({ id, loop, enabled, onOpenAutoFocus, onCloseAutoF
                 afterTick(() => {
                     if (!container)
                         return;
-                    focusFirst(removeLinks(getTabbableCandidates(container)), { select: true });
-                    if (document.activeElement === prevFocusedElement) {
+                    const result = focusFirst(removeLinks(getTabbableCandidates(container)), {
+                        select: true,
+                    });
+                    if (!result)
                         focus(container);
-                    }
                 });
             }
         }

package/dist/internal/focus.js

@@ -51,9 +51,8 @@ export function focusFirst(candidates, { select = false } = {}) {
     const previouslyFocusedElement = document.activeElement;
     for (const candidate of candidates) {
         focus(candidate, { select });
-        if (document.activeElement !== previouslyFocusedElement) {
+        if (document.activeElement !== previouslyFocusedElement)
             return true;
-        }
     }
 }
 /**

package/package.json

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