bits-ui 1.3.11 → 1.3.13

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

@@ -26,6 +26,7 @@ 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);
     /**
@@ -266,7 +267,7 @@ declare class CommandSeparatorState {
     constructor(opts: CommandSeparatorStateProps, root: CommandRootState);
     props: {
         readonly id: string;
-        readonly role: "separator";
+        readonly "aria-hidden": "true";
         readonly "data-command-separator": "";
     };
 }

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

@@ -44,6 +44,8 @@ class CommandRootState {
     commandState = $state.raw(null);
     // internal state that we mutate in batches and publish to the `state` at once
     _commandState = $state(null);
+    // whether the search has had a value other than ""
+    searchHasHadValue = $state(false);
     #snapshot() {
         return $state.snapshot(this._commandState);
     }
@@ -70,6 +72,9 @@ class CommandRootState {
             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
@@ -100,6 +105,11 @@ class CommandRootState {
         this.commandState = defaultState;
         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.
@@ -268,7 +278,7 @@ class CommandRootState {
      * Special handling for first items in groups.
      */
     #scrollSelectedIntoView() {
-        afterSleep(1, () => {
+        afterTick(() => {
             const item = this.#getSelectedItem();
             if (!item)
                 return;
@@ -277,10 +287,10 @@ class CommandRootState {
                 return;
             const firstChildOfParent = getFirstNonCommentChild(grandparent);
             if (firstChildOfParent && firstChildOfParent.dataset?.value === item.dataset?.value) {
-                item
+                const closestGroupHeader = item
                     ?.closest(COMMAND_GROUP_SELECTOR)
-                    ?.querySelector(COMMAND_GROUP_HEADING_SELECTOR)
-                    ?.scrollIntoView({ block: "nearest" });
+                    ?.querySelector(COMMAND_GROUP_HEADING_SELECTOR);
+                closestGroupHeader?.scrollIntoView({ block: "nearest" });
                 return;
             }
             item.scrollIntoView({ block: "nearest" });
@@ -419,15 +429,16 @@ class CommandRootState {
         this.#sort();
         this.#scheduleUpdate();
         return () => {
+            const selectedItem = this.#getSelectedItem();
             this.allIds.delete(id);
             this.allItems.delete(id);
             this.commandState.filtered.items.delete(id);
-            const selectedItem = this.#getSelectedItem();
             this.#filterItems();
             // The item removed have been the selected one,
             // so selection should be moved to the first
-            if (selectedItem?.getAttribute("id") === id)
+            if (selectedItem?.getAttribute("id") === id) {
                 this.#selectFirstItem();
+            }
             this.#scheduleUpdate();
         };
     }
@@ -558,12 +569,16 @@ class CommandEmptyState {
     opts;
     root;
     #isInitialRender = true;
-    shouldRender = $derived.by(() => (this.root._commandState.filtered.count === 0 && this.#isInitialRender === false) ||
-        this.opts.forceMount.current);
+    shouldRender = $derived.by(() => {
+        return ((this.root._commandState.filtered.count === 0 &&
+            this.#isInitialRender === false &&
+            this.root.searchHasHadValue) ||
+            this.opts.forceMount.current);
+    });
     constructor(opts, root) {
         this.opts = opts;
         this.root = root;
-        $effect(() => {
+        $effect.pre(() => {
             this.#isInitialRender = false;
         });
         useRefById({
@@ -599,7 +614,7 @@ class CommandGroupContainerState {
             ...opts,
             deps: () => this.shouldRender,
         });
-        $effect(() => {
+        watch(() => this.opts.id.current, () => {
             return this.root.registerGroup(this.opts.id.current);
         });
         $effect(() => {
@@ -712,6 +727,7 @@ class CommandItemState {
     });
     trueValue = $state("");
     shouldRender = $derived.by(() => {
+        this.opts.ref.current;
         if (this.#trueForceMount ||
             this.root.opts.shouldFilter.current === false ||
             !this.root.commandState.search) {
@@ -736,6 +752,7 @@ class CommandItemState {
             () => this.opts.id.current,
             () => this.#group?.opts.id.current,
             () => this.opts.forceMount.current,
+            () => this.opts.ref.current,
         ], () => {
             if (this.opts.forceMount.current)
                 return;
@@ -807,7 +824,7 @@ class CommandLoadingState {
 class CommandSeparatorState {
     opts;
     root;
-    shouldRender = $derived.by(() => !this.root.commandState.search || this.opts.forceMount.current);
+    shouldRender = $derived.by(() => !this.root._commandState.search || this.opts.forceMount.current);
     constructor(opts, root) {
         this.opts = opts;
         this.root = root;
@@ -818,7 +835,8 @@ class CommandSeparatorState {
     }
     props = $derived.by(() => ({
         id: this.opts.id.current,
-        role: "separator",
+        // role="separator" cannot belong to a role="listbox"
+        "aria-hidden": "true",
         [COMMAND_SEPARATOR_ATTR]: "",
     }));
 }

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

@@ -35,7 +35,7 @@
 </script>
 
 {#key itemState.root.key}
-	<div style="display: contents;" data-item-wrapper data-value={value}>
+	<div style="display: contents;" data-item-wrapper data-value={itemState.trueValue}>
 		{#if itemState.shouldRender}
 			{#if child}
 				{@render child({ props: mergedProps })}

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

@@ -25,10 +25,12 @@
 	const mergedProps = $derived(mergeProps(restProps, listState.props));
 </script>
 
-{#if child}
-	{@render child({ props: mergedProps })}
-{:else}
-	<div {...mergedProps}>
-		{@render children?.()}
-	</div>
-{/if}
+{#key listState.root._commandState.search === ""}
+	{#if child}
+		{@render child({ props: mergedProps })}
+	{:else}
+		<div {...mergedProps}>
+			{@render children?.()}
+		</div>
+	{/if}
+{/key}

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

@@ -23,6 +23,7 @@
 		// the default menu behavior of handling outside interactions on the trigger
 		onEscapeKeydown = noop,
 		forceMount = false,
+		trapFocus = true,
 		...restProps
 	}: ContextMenuContentProps = $props();
 
@@ -76,7 +77,7 @@
 		onEscapeKeydown={handleEscapeKeydown}
 		{onOpenAutoFocus}
 		{isValidEvent}
-		trapFocus
+		{trapFocus}
 		{loop}
 		{id}
 	>
@@ -109,7 +110,7 @@
 		onEscapeKeydown={handleEscapeKeydown}
 		{onOpenAutoFocus}
 		{isValidEvent}
-		trapFocus
+		{trapFocus}
 		{loop}
 		{id}
 	>

package/dist/bits/menu/components/menu-sub-content-static.svelte

@@ -25,6 +25,7 @@
 		onOpenAutoFocus: onOpenAutoFocusProp = noop,
 		onCloseAutoFocus: onCloseAutoFocusProp = noop,
 		onFocusOutside = noop,
+		trapFocus = false,
 		...restProps
 	}: MenuSubContentStaticProps = $props();
 
@@ -115,7 +116,7 @@
 		onFocusOutside={handleOnFocusOutside}
 		preventScroll={false}
 		{loop}
-		trapFocus={false}
+		{trapFocus}
 		isStatic
 	>
 		{#snippet popper({ props })}
@@ -145,7 +146,7 @@
 		onFocusOutside={handleOnFocusOutside}
 		preventScroll={false}
 		{loop}
-		trapFocus={false}
+		{trapFocus}
 		isStatic
 	>
 		{#snippet popper({ props })}

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

@@ -26,6 +26,7 @@
 		onCloseAutoFocus: onCloseAutoFocusProp = noop,
 		onFocusOutside = noop,
 		side = "right",
+		trapFocus = false,
 		...restProps
 	}: MenuSubContentProps = $props();
 
@@ -117,7 +118,7 @@
 		onFocusOutside={handleOnFocusOutside}
 		preventScroll={false}
 		{loop}
-		trapFocus={false}
+		{trapFocus}
 	>
 		{#snippet popper({ props, wrapperProps })}
 			{@const finalProps = mergeProps(props, mergedProps, {
@@ -152,7 +153,7 @@
 		onFocusOutside={handleOnFocusOutside}
 		preventScroll={false}
 		{loop}
-		trapFocus={false}
+		{trapFocus}
 	>
 		{#snippet popper({ props, wrapperProps })}
 			{@const finalProps = mergeProps(props, mergedProps, {

package/dist/bits/radio-group/radio-group.svelte.js

@@ -1,5 +1,5 @@
 import { useRefById } from "svelte-toolbelt";
-import { Context } from "runed";
+import { Context, watch } from "runed";
 import { getAriaChecked, getAriaRequired, getDataDisabled } from "../../internal/attrs.js";
 import { useRovingFocus, } from "../../internal/use-roving-focus.svelte.js";
 import { kbd } from "../../internal/kbd.js";
@@ -43,6 +43,7 @@ class RadioGroupItemState {
     checked = $derived.by(() => this.root.opts.value.current === this.opts.value.current);
     #isDisabled = $derived.by(() => this.opts.disabled.current || this.root.opts.disabled.current);
     #isChecked = $derived.by(() => this.root.isChecked(this.opts.value.current));
+    #tabIndex = $state(-1);
     constructor(opts, root) {
         this.opts = opts;
         this.root = root;
@@ -57,6 +58,12 @@ class RadioGroupItemState {
         $effect(() => {
             this.#tabIndex = this.root.rovingFocusGroup.getTabIndex(this.opts.ref.current);
         });
+        watch([() => this.opts.value.current, () => this.root.opts.value.current], () => {
+            if (this.opts.value.current === this.root.opts.value.current) {
+                this.root.rovingFocusGroup.setCurrentTabStopId(this.opts.id.current);
+                this.#tabIndex = 0;
+            }
+        });
         this.onclick = this.onclick.bind(this);
         this.onkeydown = this.onkeydown.bind(this);
         this.onfocus = this.onfocus.bind(this);
@@ -81,7 +88,6 @@ class RadioGroupItemState {
         }
         this.root.rovingFocusGroup.handleKeydown(this.opts.ref.current, e, true);
     }
-    #tabIndex = $state(-1);
     snippetProps = $derived.by(() => ({ checked: this.#isChecked }));
     props = $derived.by(() => ({
         id: this.opts.id.current,

package/package.json

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