bits-ui 2.11.7 → 2.12.0

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

@@ -129,8 +129,11 @@ export class CommandRootState {
      */
     #sort() {
         if (!this._commandState.search || this.opts.shouldFilter.current === false) {
-            // If no search and no selection yet, select first item
-            this.#selectFirstItem();
+            // if no search and no initial value set or when clearing search,
+            // we select the first item.
+            if (!this._commandState.value || !this.#isInitialMount) {
+                this.#selectFirstItem();
+            }
             return;
         }
         const scores = this._commandState.filtered.items;

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

@@ -20,10 +20,15 @@ export declare class DialogRootState {
     triggerId: string | undefined;
     descriptionId: string | undefined;
     cancelNode: HTMLElement | null;
-    constructor(opts: DialogRootStateOpts);
+    nestedOpenCount: number;
+    readonly depth: number;
+    readonly parent: DialogRootState | null;
+    constructor(opts: DialogRootStateOpts, parent: DialogRootState | null);
     handleOpen(): void;
     handleClose(): void;
     getBitsAttr: typeof dialogAttrs.getAttr;
+    incrementNested(): void;
+    decrementNested(): void;
     readonly sharedProps: {
         readonly "data-state": "open" | "closed";
     };
@@ -137,8 +142,12 @@ export declare class DialogContentState {
         readonly style: {
             readonly pointerEvents: "auto";
             readonly outline: "none" | undefined;
+            readonly "--bits-dialog-depth": number;
+            readonly "--bits-dialog-nested-count": number;
         };
         readonly tabindex: -1 | undefined;
+        readonly "data-nested-open": "" | undefined;
+        readonly "data-nested": "" | undefined;
     };
 }
 interface DialogOverlayStateOpts extends WithRefOpts {
@@ -157,7 +166,11 @@ export declare class DialogOverlayState {
         readonly id: string;
         readonly style: {
             readonly pointerEvents: "auto";
+            readonly "--bits-dialog-depth": number;
+            readonly "--bits-dialog-nested-count": number;
         };
+        readonly "data-nested-open": "" | undefined;
+        readonly "data-nested": "" | undefined;
     };
 }
 interface AlertDialogCancelStateOpts extends WithRefOpts, ReadableBoxedValues<{

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

@@ -1,6 +1,6 @@
-import { attachRef, boxWith, } from "svelte-toolbelt";
+import { attachRef, boxWith, onDestroyEffect, } from "svelte-toolbelt";
 import { Context, watch } from "runed";
-import { createBitsAttrs, boolToStr, getDataOpenClosed } from "../../internal/attrs.js";
+import { createBitsAttrs, boolToStr, getDataOpenClosed, boolToEmptyStrOrUndef, } from "../../internal/attrs.js";
 import { kbd } from "../../internal/kbd.js";
 import { OpenChangeComplete } from "../../internal/open-change-complete.js";
 const dialogAttrs = createBitsAttrs({
@@ -10,7 +10,8 @@ const dialogAttrs = createBitsAttrs({
 const DialogRootContext = new Context("Dialog.Root | AlertDialog.Root");
 export class DialogRootState {
     static create(opts) {
-        return DialogRootContext.set(new DialogRootState(opts));
+        const parent = DialogRootContext.getOr(null);
+        return DialogRootContext.set(new DialogRootState(opts, parent));
     }
     opts;
     triggerNode = $state(null);
@@ -21,8 +22,13 @@ export class DialogRootState {
     triggerId = $state(undefined);
     descriptionId = $state(undefined);
     cancelNode = $state(null);
-    constructor(opts) {
+    nestedOpenCount = $state(0);
+    depth;
+    parent;
+    constructor(opts, parent) {
         this.opts = opts;
+        this.parent = parent;
+        this.depth = parent ? parent.depth + 1 : 0;
         this.handleOpen = this.handleOpen.bind(this);
         this.handleClose = this.handleClose.bind(this);
         new OpenChangeComplete({
@@ -33,6 +39,21 @@ export class DialogRootState {
                 this.opts.onOpenChangeComplete.current(this.opts.open.current);
             },
         });
+        watch(() => this.opts.open.current, (isOpen) => {
+            if (!this.parent)
+                return;
+            if (isOpen) {
+                this.parent.incrementNested();
+            }
+            else {
+                this.parent.decrementNested();
+            }
+        }, { lazy: true });
+        onDestroyEffect(() => {
+            if (this.opts.open.current) {
+                this.parent?.decrementNested();
+            }
+        });
     }
     handleOpen() {
         if (this.opts.open.current)
@@ -47,6 +68,16 @@ export class DialogRootState {
     getBitsAttr = (part) => {
         return dialogAttrs.getAttr(part, this.opts.variant.current);
     };
+    incrementNested() {
+        this.nestedOpenCount++;
+        this.parent?.incrementNested();
+    }
+    decrementNested() {
+        if (this.nestedOpenCount === 0)
+            return;
+        this.nestedOpenCount--;
+        this.parent?.decrementNested();
+    }
     sharedProps = $derived.by(() => ({
         "data-state": getDataOpenClosed(this.opts.open.current),
     }));
@@ -231,8 +262,12 @@ export class DialogContentState {
         style: {
             pointerEvents: "auto",
             outline: this.root.opts.variant.current === "alert-dialog" ? "none" : undefined,
+            "--bits-dialog-depth": this.root.depth,
+            "--bits-dialog-nested-count": this.root.nestedOpenCount,
         },
         tabindex: this.root.opts.variant.current === "alert-dialog" ? -1 : undefined,
+        "data-nested-open": boolToEmptyStrOrUndef(this.root.nestedOpenCount > 0),
+        "data-nested": boolToEmptyStrOrUndef(this.root.parent !== null),
         ...this.root.sharedProps,
         ...this.attachment,
     }));
@@ -255,7 +290,11 @@ export class DialogOverlayState {
         [this.root.getBitsAttr("overlay")]: "",
         style: {
             pointerEvents: "auto",
+            "--bits-dialog-depth": this.root.depth,
+            "--bits-dialog-nested-count": this.root.nestedOpenCount,
         },
+        "data-nested-open": boolToEmptyStrOrUndef(this.root.nestedOpenCount > 0),
+        "data-nested": boolToEmptyStrOrUndef(this.root.parent !== null),
         ...this.root.sharedProps,
         ...this.attachment,
     }));

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

@@ -32,6 +32,7 @@ declare abstract class SelectBaseRootState {
     touchedInput: boolean;
     inputNode: HTMLElement | null;
     contentNode: HTMLElement | null;
+    viewportNode: HTMLElement | null;
     triggerNode: HTMLElement | null;
     valueId: string;
     highlightedNode: HTMLElement | null;
@@ -44,7 +45,7 @@ declare abstract class SelectBaseRootState {
     constructor(opts: SelectBaseRootStateOpts);
     setHighlightedNode(node: HTMLElement | null, initial?: boolean): void;
     getCandidateNodes(): HTMLElement[];
-    setHighlightedToFirstCandidate(): void;
+    setHighlightedToFirstCandidate(initial?: boolean): void;
     getNodeByValue(value: string): HTMLElement | null;
     setOpen(open: boolean): void;
     toggleOpen(): void;
@@ -195,7 +196,6 @@ export declare class SelectContentState {
     readonly opts: SelectContentStateOpts;
     readonly root: SelectRoot;
     readonly attachment: RefAttachment;
-    viewportNode: HTMLElement | null;
     isPositioned: boolean;
     domContext: DOMContext;
     constructor(opts: SelectContentStateOpts, root: SelectRoot);

package/dist/bits/select/select.svelte.js

@@ -45,6 +45,7 @@ class SelectBaseRootState {
     touchedInput = $state(false);
     inputNode = $state(null);
     contentNode = $state(null);
+    viewportNode = $state(null);
     triggerNode = $state(null);
     valueId = $state("");
     highlightedNode = $state(null);
@@ -94,12 +95,26 @@ class SelectBaseRootState {
             return [];
         return Array.from(node.querySelectorAll(`[${this.getBitsAttr("item")}]:not([data-disabled])`));
     }
-    setHighlightedToFirstCandidate() {
+    setHighlightedToFirstCandidate(initial = false) {
         this.setHighlightedNode(null);
-        const candidateNodes = this.getCandidateNodes();
-        if (!candidateNodes.length)
+        let nodes = this.getCandidateNodes();
+        if (!nodes.length)
             return;
-        this.setHighlightedNode(candidateNodes[0]);
+        // don't consider nodes that aren't visible within the viewport
+        if (this.viewportNode) {
+            const viewportRect = this.viewportNode.getBoundingClientRect();
+            nodes = nodes.filter((node) => {
+                if (!this.viewportNode)
+                    return false;
+                const nodeRect = node.getBoundingClientRect();
+                const isNodeFullyVisible = nodeRect.right < viewportRect.right &&
+                    nodeRect.left > viewportRect.left &&
+                    nodeRect.bottom < viewportRect.bottom &&
+                    nodeRect.top > viewportRect.top;
+                return isNodeFullyVisible;
+            });
+        }
+        this.setHighlightedNode(nodes[0], initial);
     }
     getNodeByValue(value) {
         const candidateNodes = this.getCandidateNodes();
@@ -185,10 +200,7 @@ export class SelectSingleRootState extends SelectBaseRootState {
                 }
             }
             // if no value is set, we want to highlight the first item
-            const firstCandidate = this.getCandidateNodes()[0];
-            if (!firstCandidate)
-                return;
-            this.setHighlightedNode(firstCandidate, true);
+            this.setHighlightedToFirstCandidate(true);
         });
     }
 }
@@ -237,10 +249,7 @@ class SelectMultipleRootState extends SelectBaseRootState {
                 }
             }
             // if no value is set, we want to highlight the first item
-            const firstCandidate = this.getCandidateNodes()[0];
-            if (!firstCandidate)
-                return;
-            this.setHighlightedNode(firstCandidate, true);
+            this.setHighlightedToFirstCandidate(true);
         });
     }
 }
@@ -691,7 +700,6 @@ export class SelectContentState {
     opts;
     root;
     attachment;
-    viewportNode = $state(null);
     isPositioned = $state(false);
     domContext;
     constructor(opts, root) {
@@ -976,7 +984,9 @@ export class SelectViewportState {
         this.opts = opts;
         this.content = content;
         this.root = content.root;
-        this.attachment = attachRef(opts.ref, (v) => (this.content.viewportNode = v));
+        this.attachment = attachRef(opts.ref, (v) => {
+            this.root.viewportNode = v;
+        });
     }
     props = $derived.by(() => ({
         id: this.opts.id.current,
@@ -1079,11 +1089,11 @@ export class SelectScrollDownButtonState {
         this.content = scrollButtonState.content;
         this.root = scrollButtonState.root;
         this.scrollButtonState.onAutoScroll = this.handleAutoScroll;
-        watch([() => this.content.viewportNode, () => this.content.isPositioned], () => {
-            if (!this.content.viewportNode || !this.content.isPositioned)
+        watch([() => this.root.viewportNode, () => this.content.isPositioned], () => {
+            if (!this.root.viewportNode || !this.content.isPositioned)
                 return;
             this.handleScroll(true);
-            return on(this.content.viewportNode, "scroll", () => this.handleScroll());
+            return on(this.root.viewportNode, "scroll", () => this.handleScroll());
         });
         /**
          * If the input value changes, this means that the filtered items may have changed,
@@ -1091,10 +1101,10 @@ export class SelectScrollDownButtonState {
          */
         watch([
             () => this.root.opts.inputValue.current,
-            () => this.content.viewportNode,
+            () => this.root.viewportNode,
             () => this.content.isPositioned,
         ], () => {
-            if (!this.content.viewportNode || !this.content.isPositioned)
+            if (!this.root.viewportNode || !this.content.isPositioned)
                 return;
             this.handleScroll(true);
         });
@@ -1118,15 +1128,14 @@ export class SelectScrollDownButtonState {
         if (!manual) {
             this.scrollButtonState.handleUserScroll();
         }
-        if (!this.content.viewportNode)
+        if (!this.root.viewportNode)
             return;
-        const maxScroll = this.content.viewportNode.scrollHeight - this.content.viewportNode.clientHeight;
-        const paddingTop = Number.parseInt(getComputedStyle(this.content.viewportNode).paddingTop, 10);
-        this.canScrollDown =
-            Math.ceil(this.content.viewportNode.scrollTop) < maxScroll - paddingTop;
+        const maxScroll = this.root.viewportNode.scrollHeight - this.root.viewportNode.clientHeight;
+        const paddingTop = Number.parseInt(getComputedStyle(this.root.viewportNode).paddingTop, 10);
+        this.canScrollDown = Math.ceil(this.root.viewportNode.scrollTop) < maxScroll - paddingTop;
     };
     handleAutoScroll = () => {
-        const viewport = this.content.viewportNode;
+        const viewport = this.root.viewportNode;
         const selectedItem = this.root.highlightedNode;
         if (!viewport || !selectedItem)
             return;
@@ -1150,11 +1159,11 @@ export class SelectScrollUpButtonState {
         this.content = scrollButtonState.content;
         this.root = scrollButtonState.root;
         this.scrollButtonState.onAutoScroll = this.handleAutoScroll;
-        watch([() => this.content.viewportNode, () => this.content.isPositioned], () => {
-            if (!this.content.viewportNode || !this.content.isPositioned)
+        watch([() => this.root.viewportNode, () => this.content.isPositioned], () => {
+            if (!this.root.viewportNode || !this.content.isPositioned)
                 return;
             this.handleScroll(true);
-            return on(this.content.viewportNode, "scroll", () => this.handleScroll());
+            return on(this.root.viewportNode, "scroll", () => this.handleScroll());
         });
     }
     /**
@@ -1165,16 +1174,16 @@ export class SelectScrollUpButtonState {
         if (!manual) {
             this.scrollButtonState.handleUserScroll();
         }
-        if (!this.content.viewportNode)
+        if (!this.root.viewportNode)
             return;
-        const paddingTop = Number.parseInt(getComputedStyle(this.content.viewportNode).paddingTop, 10);
-        this.canScrollUp = this.content.viewportNode.scrollTop - paddingTop > 0.1;
+        const paddingTop = Number.parseInt(getComputedStyle(this.root.viewportNode).paddingTop, 10);
+        this.canScrollUp = this.root.viewportNode.scrollTop - paddingTop > 0.1;
     };
     handleAutoScroll = () => {
-        if (!this.content.viewportNode || !this.root.highlightedNode)
+        if (!this.root.viewportNode || !this.root.highlightedNode)
             return;
-        this.content.viewportNode.scrollTop =
-            this.content.viewportNode.scrollTop - this.root.highlightedNode.offsetHeight;
+        this.root.viewportNode.scrollTop =
+            this.root.viewportNode.scrollTop - this.root.highlightedNode.offsetHeight;
     };
     props = $derived.by(() => ({
         ...this.scrollButtonState.props,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bits-ui",
-  "version": "2.11.7",
+  "version": "2.12.0",
   "license": "MIT",
   "repository": "github:huntabyte/bits-ui",
   "funding": "https://github.com/sponsors/huntabyte",
@@ -41,8 +41,8 @@
     "@floating-ui/core": "^1.7.1",
     "@floating-ui/dom": "^1.7.1",
     "esm-env": "^1.1.2",
-    "runed": "^0.31.1",
-    "svelte-toolbelt": "^0.10.4",
+    "runed": "^0.35.1",
+    "svelte-toolbelt": "^0.10.6",
     "tabbable": "^6.2.0"
   },
   "peerDependencies": {