bits-ui 2.11.8 → 2.13.0

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/menu/components/menu-sub-trigger.svelte

@@ -15,6 +15,7 @@
 		children,
 		child,
 		onSelect = noop,
+		openDelay = 100,
 		...restProps
 	}: MenuSubTriggerProps = $props();
 
@@ -26,6 +27,7 @@
 			() => ref,
 			(v) => (ref = v)
 		),
+		openDelay: boxWith(() => openDelay),
 	});
 
 	const mergedProps = $derived(mergeProps(restProps, subTriggerState.props));

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

@@ -1,4 +1,4 @@
-import { DOMContext, type ReadableBoxedValues, type WritableBoxedValues } from "svelte-toolbelt";
+import { DOMContext, type ReadableBoxedValues, type WritableBoxedValues, type ReadableBox } from "svelte-toolbelt";
 import { Context } from "runed";
 import { CustomEventDispatcher } from "../../internal/events.js";
 import type { AnyFn, BitsFocusEvent, BitsKeyboardEvent, BitsMouseEvent, BitsPointerEvent, OnChangeFn, RefAttachment, WithRefOpts } from "../../internal/types.js";
@@ -38,7 +38,7 @@ export declare class MenuMenuState {
     readonly opts: MenuMenuStateOpts;
     readonly root: MenuRootState;
     readonly parentMenu: MenuMenuState | null;
-    contentId: import("svelte-toolbelt").ReadableBox<string>;
+    contentId: ReadableBox<string>;
     contentNode: HTMLElement | null;
     triggerNode: HTMLElement | null;
     constructor(opts: MenuMenuStateOpts, root: MenuRootState, parentMenu: MenuMenuState | null);
@@ -157,6 +157,7 @@ export declare class MenuItemState {
     };
 }
 interface MenuSubTriggerStateOpts extends MenuItemSharedStateOpts, Pick<MenuItemStateOpts, "onSelect"> {
+    openDelay: ReadableBox<number>;
 }
 export declare class MenuSubTriggerState {
     #private;

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

@@ -510,7 +510,7 @@ export class MenuSubTriggerState {
             this.#openTimer = this.content.domContext.setTimeout(() => {
                 this.submenu.onOpen();
                 this.#clearOpenTimer();
-            }, 100);
+            }, this.opts.openDelay.current);
         }
     }
     onpointerleave(e) {

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

@@ -149,8 +149,20 @@ export type MenuSubContentPropsWithoutHTML = Expand<WithChildNoChildrenSnippetPr
 export type MenuSubContentProps = MenuSubContentPropsWithoutHTML & Without<BitsPrimitiveDivAttributes, MenuSubContentPropsWithoutHTML>;
 export type MenuSubContentStaticPropsWithoutHTML = Expand<WithChildNoChildrenSnippetProps<Omit<PopperLayerStaticProps, "content" | "preventScroll"> & _SharedMenuContentProps, StaticContentSnippetProps>>;
 export type MenuSubContentStaticProps = MenuSubContentStaticPropsWithoutHTML & Without<BitsPrimitiveDivAttributes, MenuSubContentStaticPropsWithoutHTML>;
-export type MenuSubTriggerPropsWithoutHTML = Omit<MenuItemPropsWithoutHTML, "closeOnSelect">;
-export type MenuSubTriggerProps = Omit<MenuItemProps, "closeOnSelect">;
+export type MenuSubTriggerPropsWithoutHTML = Omit<MenuItemPropsWithoutHTML, "closeOnSelect"> & {
+    /**
+     * The amount of time in ms from when the mouse enters the subtrigger until
+     * the submenu opens. This is useful for preventing the submenu from opening
+     * as a user is moving their mouse through the menu without a true intention to open that
+     * submenu.
+     *
+     * To disable the behavior, set it to `0`.
+     *
+     * @default 100
+     */
+    openDelay?: number;
+};
+export type MenuSubTriggerProps = MenuSubTriggerPropsWithoutHTML & Without<BitsPrimitiveDivAttributes, MenuSubTriggerPropsWithoutHTML>;
 export type MenuSeparatorPropsWithoutHTML = WithChild;
 export type MenuSeparatorProps = MenuSeparatorPropsWithoutHTML & Without<BitsPrimitiveDivAttributes, MenuSeparatorPropsWithoutHTML>;
 export type MenuArrowPropsWithoutHTML = ArrowPropsWithoutHTML;

package/package.json

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