bits-ui 1.8.0 → 2.2.0

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

@@ -1,4 +1,4 @@
-import { afterTick, box, mergeProps, onDestroyEffect, useRefById } from "svelte-toolbelt";
+import { afterTick, box, mergeProps, onDestroyEffect, attachRef, DOMContext, getWindow, } from "svelte-toolbelt";
 import { Context, watch } from "runed";
 import { FIRST_LAST_KEYS, LAST_KEYS, SELECTION_KEYS, SUB_OPEN_KEYS, getCheckedState, isMouseEvent, } from "./utils.js";
 import { focusFirst } from "../../internal/focus.js";
@@ -13,6 +13,7 @@ import { useGraceArea } from "../../internal/use-grace-area.svelte.js";
 import { getTabbableFrom } from "../../internal/tabbable.js";
 import { FocusScopeContext } from "../utilities/focus-scope/use-focus-scope.svelte.js";
 import { isTabbable } from "tabbable";
+import { untrack } from "svelte";
 export const CONTEXT_MENU_TRIGGER_ATTR = "data-context-menu-trigger";
 const MenuRootContext = new Context("Menu.Root");
 const MenuMenuContext = new Context("Menu.Root | Menu.Sub");
@@ -74,24 +75,17 @@ class MenuContentState {
     rovingFocusGroup;
     mounted = $state(false);
     #isSub;
+    domContext;
     constructor(opts, parentMenu) {
         this.opts = opts;
         this.parentMenu = parentMenu;
+        this.domContext = new DOMContext(opts.ref);
         parentMenu.contentId = opts.id;
         this.#isSub = opts.isSub ?? false;
         this.onkeydown = this.onkeydown.bind(this);
         this.onblur = this.onblur.bind(this);
         this.onfocus = this.onfocus.bind(this);
         this.handleInteractOutside = this.handleInteractOutside.bind(this);
-        useRefById({
-            ...opts,
-            deps: () => this.parentMenu.opts.open.current,
-            onRefChange: (node) => {
-                if (this.parentMenu.contentNode !== node) {
-                    this.parentMenu.contentNode = node;
-                }
-            },
-        });
         useGraceArea({
             contentNode: () => this.parentMenu.contentNode,
             triggerNode: () => this.parentMenu.triggerNode,
@@ -104,9 +98,12 @@ class MenuContentState {
                 this.parentMenu.root.isPointerInTransit = value;
             },
         });
-        this.#handleTypeaheadSearch = useDOMTypeahead().handleTypeaheadSearch;
+        this.#handleTypeaheadSearch = useDOMTypeahead({
+            getActiveElement: () => this.domContext.getActiveElement(),
+            getWindow: () => this.domContext.getWindow(),
+        }).handleTypeaheadSearch;
         this.rovingFocusGroup = useRovingFocus({
-            rootNodeId: this.parentMenu.contentId,
+            rootNode: box.with(() => this.parentMenu.contentNode),
             candidateAttr: this.parentMenu.root.getAttr("item"),
             loop: this.opts.loop,
             orientation: box.with(() => "vertical"),
@@ -125,7 +122,7 @@ class MenuContentState {
         });
         $effect(() => {
             if (!this.parentMenu.opts.open.current) {
-                window.clearTimeout(this.#timer);
+                this.domContext.getWindow().clearTimeout(this.#timer);
             }
         });
     }
@@ -182,7 +179,7 @@ class MenuContentState {
             });
         }
         else {
-            document.body.focus();
+            this.domContext.getDocument().body.focus();
         }
     }
     onkeydown(e) {
@@ -221,7 +218,7 @@ class MenuContentState {
         if (LAST_KEYS.includes(e.key)) {
             candidateNodes.reverse();
         }
-        focusFirst(candidateNodes);
+        focusFirst(candidateNodes, { select: false }, () => this.domContext.getActiveElement());
     }
     onblur(e) {
         if (!isElement(e.currentTarget))
@@ -230,7 +227,7 @@ class MenuContentState {
             return;
         // clear search buffer when leaving the menu
         if (!e.currentTarget.contains?.(e.target)) {
-            window.clearTimeout(this.#timer);
+            this.domContext.getWindow().clearTimeout(this.#timer);
             this.search = "";
         }
     }
@@ -289,6 +286,13 @@ class MenuContentState {
         style: {
             pointerEvents: "auto",
         },
+        ...attachRef(this.opts.ref, (v) => {
+            untrack(() => {
+                if (this.parentMenu.contentNode !== v) {
+                    this.parentMenu.contentNode = v;
+                }
+            });
+        }),
     }));
     popperProps = {
         onCloseAutoFocus: (e) => this.onCloseAutoFocus(e),
@@ -305,10 +309,6 @@ class MenuItemSharedState {
         this.onpointerleave = this.onpointerleave.bind(this);
         this.onfocus = this.onfocus.bind(this);
         this.onblur = this.onblur.bind(this);
-        useRefById({
-            ...opts,
-            deps: () => this.content.mounted,
-        });
     }
     onpointermove(e) {
         if (e.defaultPrevented)
@@ -362,6 +362,7 @@ class MenuItemSharedState {
         onpointerleave: this.onpointerleave,
         onfocus: this.onfocus,
         onblur: this.onblur,
+        ...attachRef(this.opts.ref),
     }));
 }
 class MenuItemState {
@@ -452,17 +453,11 @@ class MenuSubTriggerState {
         onDestroyEffect(() => {
             this.#clearOpenTimer();
         });
-        useRefById({
-            ...item.opts,
-            onRefChange: (node) => {
-                this.submenu.triggerNode = node;
-            },
-        });
     }
     #clearOpenTimer() {
         if (this.#openTimer === null)
             return;
-        window.clearTimeout(this.#openTimer);
+        this.content.domContext.getWindow().clearTimeout(this.#openTimer);
         this.#openTimer = null;
     }
     onpointermove(e) {
@@ -472,7 +467,7 @@ class MenuSubTriggerState {
             !this.submenu.opts.open.current &&
             !this.#openTimer &&
             !this.content.parentMenu.root.isPointerInTransit) {
-            this.#openTimer = window.setTimeout(() => {
+            this.#openTimer = this.content.domContext.setTimeout(() => {
                 this.submenu.onOpen();
                 this.#clearOpenTimer();
             }, 100);
@@ -530,6 +525,7 @@ class MenuSubTriggerState {
         onpointermove: this.onpointermove,
         onpointerleave: this.onpointerleave,
         onkeydown: this.onkeydown,
+        ...attachRef(this.opts.ref, (v) => (this.submenu.triggerNode = v)),
     }, this.item.props));
 }
 class MenuCheckboxItemState {
@@ -584,13 +580,13 @@ class MenuGroupState {
     constructor(opts, root) {
         this.opts = opts;
         this.root = root;
-        useRefById(this.opts);
     }
     props = $derived.by(() => ({
         id: this.opts.id.current,
         role: "group",
         "aria-labelledby": this.groupHeadingId,
         [this.root.getAttr("group")]: "",
+        ...attachRef(this.opts.ref),
     }));
 }
 class MenuGroupHeadingState {
@@ -599,17 +595,12 @@ class MenuGroupHeadingState {
     constructor(opts, group) {
         this.opts = opts;
         this.group = group;
-        useRefById({
-            ...opts,
-            onRefChange: (node) => {
-                this.group.groupHeadingId = node?.id;
-            },
-        });
     }
     props = $derived.by(() => ({
         id: this.opts.id.current,
         role: "group",
         [this.group.root.getAttr("group-heading")]: "",
+        ...attachRef(this.opts.ref, (v) => (this.group.groupHeadingId = v?.id)),
     }));
 }
 class MenuSeparatorState {
@@ -618,12 +609,12 @@ class MenuSeparatorState {
     constructor(opts, root) {
         this.opts = opts;
         this.root = root;
-        useRefById(opts);
     }
     props = $derived.by(() => ({
         id: this.opts.id.current,
         role: "group",
         [this.root.getAttr("separator")]: "",
+        ...attachRef(this.opts.ref),
     }));
 }
 class MenuArrowState {
@@ -644,7 +635,6 @@ class MenuRadioGroupState {
         this.opts = opts;
         this.content = content;
         this.root = content.parentMenu.root;
-        useRefById(opts);
     }
     setValue(v) {
         this.opts.value.current = v;
@@ -654,6 +644,7 @@ class MenuRadioGroupState {
         [this.root.getAttr("radio-group")]: "",
         role: "group",
         "aria-labelledby": this.groupHeadingId,
+        ...attachRef(this.opts.ref),
     }));
 }
 class MenuRadioItemState {
@@ -665,7 +656,6 @@ class MenuRadioItemState {
         this.opts = opts;
         this.item = item;
         this.group = group;
-        useRefById(opts);
     }
     selectValue() {
         this.group.setValue(this.opts.value.current);
@@ -676,6 +666,7 @@ class MenuRadioItemState {
         role: "menuitemradio",
         "aria-checked": getAriaChecked(this.isChecked, false),
         "data-state": getCheckedState(this.isChecked),
+        ...attachRef(this.opts.ref),
     }));
 }
 class DropdownMenuTriggerState {
@@ -684,17 +675,8 @@ class DropdownMenuTriggerState {
     constructor(opts, parentMenu) {
         this.opts = opts;
         this.parentMenu = parentMenu;
-        this.onpointerdown = this.onpointerdown.bind(this);
-        this.onpointerup = this.onpointerup.bind(this);
-        this.onkeydown = this.onkeydown.bind(this);
-        useRefById({
-            ...opts,
-            onRefChange: (ref) => {
-                this.parentMenu.triggerNode = ref;
-            },
-        });
     }
-    onpointerdown(e) {
+    onpointerdown = (e) => {
         if (this.opts.disabled.current)
             return;
         if (e.pointerType === "touch")
@@ -706,16 +688,16 @@ class DropdownMenuTriggerState {
             if (!this.parentMenu.opts.open.current)
                 e.preventDefault();
         }
-    }
-    onpointerup(e) {
+    };
+    onpointerup = (e) => {
         if (this.opts.disabled.current)
             return;
         if (e.pointerType === "touch") {
             e.preventDefault();
             this.parentMenu.toggleOpen();
         }
-    }
-    onkeydown(e) {
+    };
+    onkeydown = (e) => {
         if (this.opts.disabled.current)
             return;
         if (e.key === kbd.SPACE || e.key === kbd.ENTER) {
@@ -727,7 +709,7 @@ class DropdownMenuTriggerState {
             this.parentMenu.onOpen();
             e.preventDefault();
         }
-    }
+    };
     #ariaControls = $derived.by(() => {
         if (this.parentMenu.opts.open.current && this.parentMenu.contentId.current)
             return this.parentMenu.contentId.current;
@@ -746,6 +728,7 @@ class DropdownMenuTriggerState {
         onpointerdown: this.onpointerdown,
         onpointerup: this.onpointerup,
         onkeydown: this.onkeydown,
+        ...attachRef(this.opts.ref, (v) => (this.parentMenu.triggerNode = v)),
     }));
 }
 class ContextMenuTriggerState {
@@ -764,13 +747,6 @@ class ContextMenuTriggerState {
         this.onpointermove = this.onpointermove.bind(this);
         this.onpointercancel = this.onpointercancel.bind(this);
         this.onpointerup = this.onpointerup.bind(this);
-        useRefById({
-            ...opts,
-            onRefChange: (node) => {
-                this.parentMenu.triggerNode = node;
-            },
-            deps: () => this.parentMenu.opts.open.current,
-        });
         watch(() => this.#point, (point) => {
             this.virtualElement.current = {
                 getBoundingClientRect: () => DOMRect.fromRect({ width: 0, height: 0, ...point }),
@@ -786,7 +762,7 @@ class ContextMenuTriggerState {
     #clearLongPressTimer() {
         if (this.#longPressTimer === null)
             return;
-        window.clearTimeout(this.#longPressTimer);
+        getWindow(this.opts.ref.current).clearTimeout(this.#longPressTimer);
     }
     #handleOpen(e) {
         this.#point = { x: e.clientX, y: e.clientY };
@@ -804,7 +780,7 @@ class ContextMenuTriggerState {
         if (this.opts.disabled.current || isMouseEvent(e))
             return;
         this.#clearLongPressTimer();
-        this.#longPressTimer = window.setTimeout(() => this.#handleOpen(e), 700);
+        this.#longPressTimer = getWindow(this.opts.ref.current).setTimeout(() => this.#handleOpen(e), 700);
     }
     onpointermove(e) {
         if (this.opts.disabled.current || isMouseEvent(e))
@@ -834,6 +810,7 @@ class ContextMenuTriggerState {
         onpointercancel: this.onpointercancel,
         onpointerup: this.onpointerup,
         oncontextmenu: this.oncontextmenu,
+        ...attachRef(this.opts.ref, (v) => (this.parentMenu.triggerNode = v)),
     }));
 }
 class MenuCheckboxGroupState {
@@ -845,7 +822,6 @@ class MenuCheckboxGroupState {
         this.opts = opts;
         this.content = content;
         this.root = content.parentMenu.root;
-        useRefById(opts);
     }
     addValue(checkboxValue) {
         if (!checkboxValue)
@@ -871,6 +847,7 @@ class MenuCheckboxGroupState {
         [this.root.getAttr("checkbox-group")]: "",
         role: "group",
         "aria-labelledby": this.groupHeadingId,
+        ...attachRef(this.opts.ref),
     }));
 }
 export function useMenuRoot(props) {

package/dist/bits/menubar/components/menubar-content-static.svelte

@@ -2,14 +2,16 @@
 	import { box, mergeProps } from "svelte-toolbelt";
 	import type { MenubarContentStaticProps } from "../types.js";
 	import { useMenubarContent } from "../menubar.svelte.js";
-	import { useId } from "../../../internal/use-id.js";
+	import { createId } from "../../../internal/create-id.js";
 	import MenuContentStatic from "../../menu/components/menu-content-static.svelte";
 	import { noop } from "../../../internal/noop.js";
 
+	const uid = $props.id();
+
 	let {
 		ref = $bindable(null),
 		interactOutsideBehavior = "close",
-		id = useId(),
+		id = createId(uid),
 		onInteractOutside = noop,
 		onCloseAutoFocus = noop,
 		onFocusOutside = noop,

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

@@ -3,13 +3,15 @@
 	import type { MenubarContentProps } from "../types.js";
 	import { useMenubarContent } from "../menubar.svelte.js";
 	import MenuContent from "../../menu/components/menu-content.svelte";
-	import { useId } from "../../../internal/use-id.js";
+	import { createId } from "../../../internal/create-id.js";
 	import { noop } from "../../../internal/noop.js";
 
+	const uid = $props.id();
+
 	let {
 		ref = $bindable(null),
 		interactOutsideBehavior = "close",
-		id = useId(),
+		id = createId(uid),
 		onInteractOutside = noop,
 		onFocusOutside = noop,
 		onCloseAutoFocus = noop,

package/dist/bits/menubar/components/menubar-menu.svelte

@@ -3,10 +3,12 @@
 	import type { MenubarMenuProps } from "../types.js";
 	import { useMenubarMenu } from "../menubar.svelte.js";
 	import Menu from "../../menu/components/menu.svelte";
-	import { useId } from "../../../internal/use-id.js";
 	import { noop } from "../../../internal/noop.js";
+	import { createId } from "../../../internal/create-id.js";
 
-	let { value = useId(), onOpenChange = noop, ...restProps }: MenubarMenuProps = $props();
+	const uid = $props.id();
+
+	let { value = createId(uid), onOpenChange = noop, ...restProps }: MenubarMenuProps = $props();
 
 	const menuState = useMenubarMenu({
 		value: box.with(() => value),

package/dist/bits/menubar/components/menubar-trigger.svelte

@@ -1,13 +1,15 @@
 <script lang="ts">
-	import { box, mergeProps } from "svelte-toolbelt";
+	import { attachRef, box, mergeProps } from "svelte-toolbelt";
 	import type { MenubarTriggerProps } from "../types.js";
 	import { useMenubarTrigger } from "../menubar.svelte.js";
-	import { useId } from "../../../internal/use-id.js";
+	import { createId } from "../../../internal/create-id.js";
 	import FloatingLayerAnchor from "../../utilities/floating-layer/components/floating-layer-anchor.svelte";
 	import { useMenuDropdownTrigger } from "../../menu/menu.svelte.js";
 
+	const uid = $props.id();
+
 	let {
-		id = useId(),
+		id = createId(uid),
 		disabled = false,
 		children,
 		child,
@@ -24,12 +26,18 @@
 		),
 	});
 
-	useMenuDropdownTrigger(triggerState.opts);
+	const dropdownTriggerState = useMenuDropdownTrigger(triggerState.opts);
 
-	const mergedProps = $derived(mergeProps(restProps, triggerState.props));
+	const mergedProps = $derived(
+		mergeProps(restProps, triggerState.props, {
+			...attachRef(
+				(v: HTMLElement | null) => (dropdownTriggerState.parentMenu.triggerNode = v)
+			),
+		})
+	);
 </script>
 
-<FloatingLayerAnchor {id}>
+<FloatingLayerAnchor {id} ref={triggerState.opts.ref}>
 	{#if child}
 		{@render child({ props: mergedProps })}
 	{:else}

package/dist/bits/menubar/components/menubar.svelte

@@ -2,11 +2,13 @@
 	import { box, mergeProps } from "svelte-toolbelt";
 	import type { MenubarRootProps } from "../types.js";
 	import { useMenubarRoot } from "../menubar.svelte.js";
-	import { useId } from "../../../internal/use-id.js";
+	import { createId } from "../../../internal/create-id.js";
 	import { noop } from "../../../internal/noop.js";
 
+	const uid = $props.id();
+
 	let {
-		id = useId(),
+		id = createId(uid),
 		children,
 		child,
 		ref = $bindable(null),

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

@@ -3,8 +3,9 @@ import type { InteractOutsideBehaviorType } from "../utilities/dismissible-layer
 import type { ReadableBoxedValues, WritableBoxedValues } from "../../internal/box.svelte.js";
 import { type UseRovingFocusReturn } from "../../internal/use-roving-focus.svelte.js";
 import type { Direction } from "../../shared/index.js";
-import type { BitsFocusEvent, BitsKeyboardEvent, BitsPointerEvent, OnChangeFn, WithRefProps } from "../../internal/types.js";
+import type { OnChangeFn, WithRefProps } from "../../internal/types.js";
 import { type FocusScopeContextValue } from "../utilities/focus-scope/use-focus-scope.svelte.js";
+import type { FocusEventHandler, KeyboardEventHandler, PointerEventHandler } from "svelte/elements";
 type MenubarRootStateProps = WithRefProps<ReadableBoxedValues<{
     dir: Direction;
     loop: boolean;
@@ -22,18 +23,18 @@ declare class MenubarRootState {
      * @param id - the id of the trigger to register
      * @returns - a function to de-register the trigger
      */
-    registerTrigger(id: string): () => void;
+    registerTrigger: (id: string) => () => void;
     /**
      * @param value - the value of the menu to register
      * @param contentId - the content id to associate with the value
      * @returns - a function to de-register the menu
      */
-    registerMenu(value: string, onOpenChange: ReadableBox<OnChangeFn<boolean>>): () => void;
-    updateValue(value: string): void;
-    getTriggers(): HTMLButtonElement[];
-    onMenuOpen(id: string, triggerId: string): void;
-    onMenuClose(): void;
-    onMenuToggle(id: string): void;
+    registerMenu: (value: string, onOpenChange: ReadableBox<OnChangeFn<boolean>>) => () => void;
+    updateValue: (value: string) => void;
+    getTriggers: () => HTMLButtonElement[];
+    onMenuOpen: (id: string, triggerId: string) => void;
+    onMenuClose: () => void;
+    onMenuToggle: (id: string) => void;
     props: {
         readonly id: string;
         readonly role: "menubar";
@@ -50,9 +51,12 @@ declare class MenubarMenuState {
     open: boolean;
     wasOpenedByKeyboard: boolean;
     triggerNode: HTMLElement | null;
+    triggerId: string | undefined;
+    contentId: string | undefined;
     contentNode: HTMLElement | null;
     constructor(opts: MenubarMenuStateProps, root: MenubarRootState);
     getTriggerNode(): HTMLElement | null;
+    toggleMenu(): void;
     openMenu(): void;
 }
 type MenubarTriggerStateProps = WithRefProps<ReadableBoxedValues<{
@@ -65,11 +69,11 @@ declare class MenubarTriggerState {
     root: MenubarRootState;
     isFocused: boolean;
     constructor(opts: MenubarTriggerStateProps, menu: MenubarMenuState);
-    onpointerdown(e: BitsPointerEvent): void;
-    onpointerenter(_: BitsPointerEvent): void;
-    onkeydown(e: BitsKeyboardEvent): void;
-    onfocus(_: BitsFocusEvent): void;
-    onblur(_: BitsFocusEvent): void;
+    onpointerdown: PointerEventHandler<HTMLElement>;
+    onpointerenter: PointerEventHandler<HTMLElement>;
+    onkeydown: KeyboardEventHandler<HTMLElement>;
+    onfocus: FocusEventHandler<HTMLElement>;
+    onblur: FocusEventHandler<HTMLElement>;
     props: {
         readonly type: "button";
         readonly role: "menuitem";
@@ -84,11 +88,11 @@ declare class MenubarTriggerState {
         readonly disabled: true | undefined;
         readonly tabindex: number;
         readonly "data-menubar-trigger": "";
-        readonly onpointerdown: (e: BitsPointerEvent) => void;
-        readonly onpointerenter: (_: BitsPointerEvent) => void;
-        readonly onkeydown: (e: BitsKeyboardEvent) => void;
-        readonly onfocus: (_: BitsFocusEvent) => void;
-        readonly onblur: (_: BitsFocusEvent) => void;
+        readonly onpointerdown: PointerEventHandler<HTMLElement>;
+        readonly onpointerenter: PointerEventHandler<HTMLElement>;
+        readonly onkeydown: KeyboardEventHandler<HTMLElement>;
+        readonly onfocus: FocusEventHandler<HTMLElement>;
+        readonly onblur: FocusEventHandler<HTMLElement>;
     };
 }
 type MenubarContentStateProps = WithRefProps<ReadableBoxedValues<{
@@ -108,7 +112,7 @@ declare class MenubarContentState {
     onFocusOutside: (e: FocusEvent) => void;
     onInteractOutside: (e: PointerEvent) => void;
     onOpenAutoFocus: (e: Event) => void;
-    onkeydown(e: BitsKeyboardEvent): void;
+    onkeydown: KeyboardEventHandler<HTMLElement>;
     props: {
         readonly id: string;
         readonly "aria-labelledby": string | undefined;
@@ -119,7 +123,7 @@ declare class MenubarContentState {
             readonly "--bits-menubar-anchor-width": "var(--bits-floating-anchor-width)";
             readonly "--bits-menubar-anchor-height": "var(--bits-floating-anchor-height)";
         };
-        readonly onkeydown: (e: BitsKeyboardEvent) => void;
+        readonly onkeydown: KeyboardEventHandler<HTMLElement>;
         readonly "data-menu-content": "";
     };
     popperProps: {