bits-ui 2.8.1 → 2.8.3

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

@@ -105,6 +105,7 @@ export class MenuContentState {
     parentMenu;
     rovingFocusGroup;
     domContext;
+    attachment;
     search = $state("");
     #timer = 0;
     #handleTypeaheadSearch;
@@ -114,6 +115,11 @@ export class MenuContentState {
         this.opts = opts;
         this.parentMenu = parentMenu;
         this.domContext = new DOMContext(opts.ref);
+        this.attachment = attachRef(this.opts.ref, (v) => {
+            if (this.parentMenu.contentNode !== v) {
+                this.parentMenu.contentNode = v;
+            }
+        });
         parentMenu.contentId = opts.id;
         this.#isSub = opts.isSub ?? false;
         this.onkeydown = this.onkeydown.bind(this);
@@ -319,11 +325,7 @@ export class MenuContentState {
         style: {
             pointerEvents: "auto",
         },
-        ...attachRef(this.opts.ref, (v) => {
-            if (this.parentMenu.contentNode !== v) {
-                this.parentMenu.contentNode = v;
-            }
-        }),
+        ...this.attachment,
     }));
     popperProps = {
         onCloseAutoFocus: (e) => this.onCloseAutoFocus(e),
@@ -332,10 +334,12 @@ export class MenuContentState {
 class MenuItemSharedState {
     opts;
     content;
+    attachment;
     #isFocused = $state(false);
     constructor(opts, content) {
         this.opts = opts;
         this.content = content;
+        this.attachment = attachRef(this.opts.ref);
         this.onpointermove = this.onpointermove.bind(this);
         this.onpointerleave = this.onpointerleave.bind(this);
         this.onfocus = this.onfocus.bind(this);
@@ -393,7 +397,7 @@ class MenuItemSharedState {
         onpointerleave: this.onpointerleave,
         onfocus: this.onfocus,
         onblur: this.onblur,
-        ...attachRef(this.opts.ref),
+        ...this.attachment,
     }));
 }
 export class MenuItemState {
@@ -481,12 +485,14 @@ export class MenuSubTriggerState {
     item;
     content;
     submenu;
+    attachment;
     #openTimer = null;
     constructor(opts, item, content, submenu) {
         this.opts = opts;
         this.item = item;
         this.content = content;
         this.submenu = submenu;
+        this.attachment = attachRef(this.opts.ref, (v) => (this.submenu.triggerNode = v));
         this.onpointerleave = this.onpointerleave.bind(this);
         this.onpointermove = this.onpointermove.bind(this);
         this.onkeydown = this.onkeydown.bind(this);
@@ -566,7 +572,7 @@ export class MenuSubTriggerState {
         onpointermove: this.onpointermove,
         onpointerleave: this.onpointerleave,
         onkeydown: this.onkeydown,
-        ...attachRef(this.opts.ref, (v) => (this.submenu.triggerNode = v)),
+        ...this.attachment,
     }, this.item.props));
 }
 export class MenuCheckboxItemState {
@@ -624,17 +630,19 @@ export class MenuGroupState {
     }
     opts;
     root;
+    attachment;
     groupHeadingId = $state(undefined);
     constructor(opts, root) {
         this.opts = opts;
         this.root = root;
+        this.attachment = attachRef(this.opts.ref);
     }
     props = $derived.by(() => ({
         id: this.opts.id.current,
         role: "group",
         "aria-labelledby": this.groupHeadingId,
         [this.root.getBitsAttr("group")]: "",
-        ...attachRef(this.opts.ref),
+        ...this.attachment,
     }));
 }
 export class MenuGroupHeadingState {
@@ -650,15 +658,17 @@ export class MenuGroupHeadingState {
     }
     opts;
     group;
+    attachment;
     constructor(opts, group) {
         this.opts = opts;
         this.group = group;
+        this.attachment = attachRef(this.opts.ref, (v) => (this.group.groupHeadingId = v?.id));
     }
     props = $derived.by(() => ({
         id: this.opts.id.current,
         role: "group",
         [this.group.root.getBitsAttr("group-heading")]: "",
-        ...attachRef(this.opts.ref, (v) => (this.group.groupHeadingId = v?.id)),
+        ...this.attachment,
     }));
 }
 export class MenuSeparatorState {
@@ -667,15 +677,17 @@ export class MenuSeparatorState {
     }
     opts;
     root;
+    attachment;
     constructor(opts, root) {
         this.opts = opts;
         this.root = root;
+        this.attachment = attachRef(this.opts.ref);
     }
     props = $derived.by(() => ({
         id: this.opts.id.current,
         role: "group",
         [this.root.getBitsAttr("separator")]: "",
-        ...attachRef(this.opts.ref),
+        ...this.attachment,
     }));
 }
 export class MenuArrowState {
@@ -696,12 +708,14 @@ export class MenuRadioGroupState {
     }
     opts;
     content;
+    attachment;
     groupHeadingId = $state(null);
     root;
     constructor(opts, content) {
         this.opts = opts;
         this.content = content;
         this.root = content.parentMenu.root;
+        this.attachment = attachRef(this.opts.ref);
     }
     setValue(v) {
         this.opts.value.current = v;
@@ -711,7 +725,7 @@ export class MenuRadioGroupState {
         [this.root.getBitsAttr("radio-group")]: "",
         role: "group",
         "aria-labelledby": this.groupHeadingId,
-        ...attachRef(this.opts.ref),
+        ...this.attachment,
     }));
 }
 export class MenuRadioItemState {
@@ -724,11 +738,13 @@ export class MenuRadioItemState {
     opts;
     item;
     group;
+    attachment;
     isChecked = $derived.by(() => this.group.opts.value.current === this.opts.value.current);
     constructor(opts, item, group) {
         this.opts = opts;
         this.item = item;
         this.group = group;
+        this.attachment = attachRef(this.opts.ref);
     }
     selectValue() {
         this.group.setValue(this.opts.value.current);
@@ -739,7 +755,7 @@ export class MenuRadioItemState {
         role: "menuitemradio",
         "aria-checked": getAriaChecked(this.isChecked, false),
         "data-state": getCheckedState(this.isChecked),
-        ...attachRef(this.opts.ref),
+        ...this.attachment,
     }));
 }
 export class DropdownMenuTriggerState {
@@ -748,9 +764,11 @@ export class DropdownMenuTriggerState {
     }
     opts;
     parentMenu;
+    attachment;
     constructor(opts, parentMenu) {
         this.opts = opts;
         this.parentMenu = parentMenu;
+        this.attachment = attachRef(this.opts.ref, (v) => (this.parentMenu.triggerNode = v));
     }
     onpointerdown = (e) => {
         if (this.opts.disabled.current)
@@ -804,7 +822,7 @@ export class DropdownMenuTriggerState {
         onpointerdown: this.onpointerdown,
         onpointerup: this.onpointerup,
         onkeydown: this.onkeydown,
-        ...attachRef(this.opts.ref, (v) => (this.parentMenu.triggerNode = v)),
+        ...this.attachment,
     }));
 }
 export class ContextMenuTriggerState {
@@ -813,6 +831,7 @@ export class ContextMenuTriggerState {
     }
     opts;
     parentMenu;
+    attachment;
     #point = $state({ x: 0, y: 0 });
     virtualElement = box({
         getBoundingClientRect: () => DOMRect.fromRect({ width: 0, height: 0, ...this.#point }),
@@ -821,6 +840,7 @@ export class ContextMenuTriggerState {
     constructor(opts, parentMenu) {
         this.opts = opts;
         this.parentMenu = parentMenu;
+        this.attachment = attachRef(this.opts.ref, (v) => (this.parentMenu.triggerNode = v));
         this.oncontextmenu = this.oncontextmenu.bind(this);
         this.onpointerdown = this.onpointerdown.bind(this);
         this.onpointermove = this.onpointermove.bind(this);
@@ -889,7 +909,7 @@ export class ContextMenuTriggerState {
         onpointercancel: this.onpointercancel,
         onpointerup: this.onpointerup,
         oncontextmenu: this.oncontextmenu,
-        ...attachRef(this.opts.ref, (v) => (this.parentMenu.triggerNode = v)),
+        ...this.attachment,
     }));
 }
 export class MenuCheckboxGroupState {
@@ -899,11 +919,13 @@ export class MenuCheckboxGroupState {
     opts;
     content;
     root;
+    attachment;
     groupHeadingId = $state(null);
     constructor(opts, content) {
         this.opts = opts;
         this.content = content;
         this.root = content.parentMenu.root;
+        this.attachment = attachRef(this.opts.ref);
     }
     addValue(checkboxValue) {
         if (!checkboxValue)
@@ -929,7 +951,7 @@ export class MenuCheckboxGroupState {
         [this.root.getBitsAttr("checkbox-group")]: "",
         role: "group",
         "aria-labelledby": this.groupHeadingId,
-        ...attachRef(this.opts.ref),
+        ...this.attachment,
     }));
 }
 export class MenuSubmenuState {

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

@@ -27,12 +27,13 @@
 	});
 
 	const dropdownTriggerState = DropdownMenuTriggerState.create(triggerState.opts);
+	const triggerAttachment = attachRef(
+		(v: HTMLElement | null) => (dropdownTriggerState.parentMenu.triggerNode = v)
+	);
 
 	const mergedProps = $derived(
 		mergeProps(restProps, triggerState.props, {
-			...attachRef(
-				(v: HTMLElement | null) => (dropdownTriggerState.parentMenu.triggerNode = v)
-			),
+			...triggerAttachment,
 		})
 	);
 </script>

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

@@ -1,7 +1,7 @@
 import { type ReadableBox, type ReadableBoxedValues, type WritableBoxedValues } from "svelte-toolbelt";
 import type { InteractOutsideBehaviorType } from "../utilities/dismissible-layer/types.js";
 import type { Direction } from "../../shared/index.js";
-import type { OnChangeFn, WithRefOpts } from "../../internal/types.js";
+import type { OnChangeFn, RefAttachment, WithRefOpts } from "../../internal/types.js";
 import type { FocusEventHandler, KeyboardEventHandler, PointerEventHandler } from "svelte/elements";
 import { RovingFocusGroup } from "../../internal/roving-focus-group.js";
 interface MenubarRootStateOpts extends WithRefOpts, ReadableBoxedValues<{
@@ -15,6 +15,7 @@ export declare class MenubarRootState {
     static create(opts: MenubarRootStateOpts): MenubarRootState;
     readonly opts: MenubarRootStateOpts;
     readonly rovingFocusGroup: RovingFocusGroup;
+    readonly attachment: RefAttachment;
     wasOpenedByKeyboard: boolean;
     triggerIds: string[];
     valueToChangeHandler: Map<string, ReadableBox<OnChangeFn<boolean>>>;
@@ -70,6 +71,7 @@ export declare class MenubarTriggerState {
     readonly opts: MenubarTriggerStateOpts;
     readonly menu: MenubarMenuState;
     readonly root: MenubarRootState;
+    readonly attachment: RefAttachment;
     isFocused: boolean;
     constructor(opts: MenubarTriggerStateOpts, menu: MenubarMenuState);
     onpointerdown: PointerEventHandler<HTMLElement>;
@@ -110,6 +112,7 @@ export declare class MenubarContentState {
     readonly opts: MenubarContentStateOpts;
     readonly menu: MenubarMenuState;
     readonly root: MenubarRootState;
+    readonly attachment: RefAttachment;
     constructor(opts: MenubarContentStateOpts, menu: MenubarMenuState);
     onCloseAutoFocus: (e: Event) => void;
     onFocusOutside: (e: FocusEvent) => void;

package/dist/bits/menubar/menubar.svelte.js

@@ -18,11 +18,13 @@ export class MenubarRootState {
     }
     opts;
     rovingFocusGroup;
+    attachment;
     wasOpenedByKeyboard = $state(false);
     triggerIds = $state([]);
     valueToChangeHandler = new Map();
     constructor(opts) {
         this.opts = opts;
+        this.attachment = attachRef(this.opts.ref);
         this.rovingFocusGroup = new RovingFocusGroup({
             rootNode: this.opts.ref,
             candidateAttr: menubarAttrs.trigger,
@@ -83,7 +85,7 @@ export class MenubarRootState {
         id: this.opts.id.current,
         role: "menubar",
         [menubarAttrs.root]: "",
-        ...attachRef(this.opts.ref),
+        ...this.attachment,
     }));
 }
 export class MenubarMenuState {
@@ -127,12 +129,14 @@ export class MenubarTriggerState {
     opts;
     menu;
     root;
+    attachment;
     isFocused = $state(false);
     #tabIndex = $state(0);
     constructor(opts, menu) {
         this.opts = opts;
         this.menu = menu;
         this.root = menu.root;
+        this.attachment = attachRef(this.opts.ref, (v) => (this.menu.triggerNode = v));
         onMount(() => {
             return this.root.registerTrigger(opts.id.current);
         });
@@ -204,7 +208,7 @@ export class MenubarTriggerState {
         onkeydown: this.onkeydown,
         onfocus: this.onfocus,
         onblur: this.onblur,
-        ...attachRef(this.opts.ref, (v) => (this.menu.triggerNode = v)),
+        ...this.attachment,
     }));
 }
 export class MenubarContentState {
@@ -214,10 +218,12 @@ export class MenubarContentState {
     opts;
     menu;
     root;
+    attachment;
     constructor(opts, menu) {
         this.opts = opts;
         this.menu = menu;
         this.root = menu.root;
+        this.attachment = attachRef(this.opts.ref, (v) => (this.menu.contentNode = v));
     }
     onCloseAutoFocus = (e) => {
         this.opts.onCloseAutoFocus.current(e);
@@ -280,7 +286,7 @@ export class MenubarContentState {
         onkeydown: this.onkeydown,
         "data-menu-content": "",
         [menubarAttrs.content]: "",
-        ...attachRef(this.opts.ref, (v) => (this.menu.contentNode = v)),
+        ...this.attachment,
     }));
     popperProps = {
         onCloseAutoFocus: this.onCloseAutoFocus,

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

@@ -1,5 +1,5 @@
 import { type ReadableBoxedValues } from "svelte-toolbelt";
-import type { WithRefOpts } from "../../internal/types.js";
+import type { RefAttachment, WithRefOpts } from "../../internal/types.js";
 interface MeterRootStateOpts extends WithRefOpts, ReadableBoxedValues<{
     value: number;
     max: number;
@@ -9,6 +9,7 @@ interface MeterRootStateOpts extends WithRefOpts, ReadableBoxedValues<{
 export declare class MeterRootState {
     static create(opts: MeterRootStateOpts): MeterRootState;
     readonly opts: MeterRootStateOpts;
+    readonly attachment: RefAttachment;
     constructor(opts: MeterRootStateOpts);
     readonly props: {
         readonly role: "meter";

package/dist/bits/meter/meter.svelte.js

@@ -9,8 +9,10 @@ export class MeterRootState {
         return new MeterRootState(opts);
     }
     opts;
+    attachment;
     constructor(opts) {
         this.opts = opts;
+        this.attachment = attachRef(this.opts.ref);
     }
     props = $derived.by(() => ({
         role: "meter",
@@ -22,6 +24,6 @@ export class MeterRootState {
         "data-max": this.opts.max.current,
         "data-min": this.opts.min.current,
         [meterAttrs.root]: "",
-        ...attachRef(this.opts.ref),
+        ...this.attachment,
     }));
 }

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

@@ -7,7 +7,7 @@ import { Context } from "runed";
 import { type Snippet } from "svelte";
 import { SvelteMap } from "svelte/reactivity";
 import { type Direction, type Orientation } from "../../shared/index.js";
-import type { BitsFocusEvent, BitsKeyboardEvent, BitsMouseEvent, BitsPointerEvent } from "../../internal/types.js";
+import type { BitsFocusEvent, BitsKeyboardEvent, BitsMouseEvent, BitsPointerEvent, RefAttachment } from "../../internal/types.js";
 import type { FocusEventHandler, KeyboardEventHandler, MouseEventHandler, PointerEventHandler } from "svelte/elements";
 import { RovingFocusGroup } from "../../internal/roving-focus-group.js";
 declare const navigationMenuAttrs: import("../../internal/attrs.js").CreateBitsAttrsReturn<readonly ["root", "sub", "item", "list", "trigger", "content", "link", "viewport", "menu", "indicator"]>;
@@ -58,6 +58,7 @@ export declare class NavigationMenuRootState {
     #private;
     static create(opts: NavigationMenuRootStateOpts): NavigationMenuRootState;
     readonly opts: NavigationMenuRootStateOpts;
+    readonly attachment: RefAttachment;
     provider: NavigationMenuProviderState;
     previousValue: WritableBox<string>;
     isDelaySkipped: WritableBox<boolean>;
@@ -81,6 +82,7 @@ export declare class NavigationMenuSubState {
     readonly context: NavigationMenuProviderState;
     previousValue: WritableBox<string>;
     readonly subProvider: NavigationMenuProviderState;
+    readonly attachment: RefAttachment;
     constructor(opts: NavigationMenuSubStateOpts, context: NavigationMenuProviderState);
     setValue: (newValue: string, itemState: NavigationMenuItemState | null) => void;
     readonly props: {
@@ -92,10 +94,12 @@ interface NavigationMenuListStateOpts extends WithRefProps {
 }
 export declare class NavigationMenuListState {
     static create(opts: NavigationMenuListStateOpts): NavigationMenuListState;
-    readonly opts: NavigationMenuListStateOpts;
-    readonly context: NavigationMenuProviderState;
     wrapperId: WritableBox<string>;
     wrapperRef: WritableBox<HTMLElement | null>;
+    readonly opts: NavigationMenuListStateOpts;
+    readonly context: NavigationMenuProviderState;
+    readonly attachment: RefAttachment;
+    readonly wrapperAttachment: RefAttachment;
     listTriggers: HTMLElement[];
     readonly rovingFocusGroup: RovingFocusGroup;
     wrapperMounted: boolean;
@@ -149,8 +153,10 @@ interface NavigationMenuTriggerStateOpts extends WithRefProps, ReadableBoxedValu
 export declare class NavigationMenuTriggerState {
     static create(opts: NavigationMenuTriggerStateOpts): NavigationMenuTriggerState;
     readonly opts: NavigationMenuTriggerStateOpts;
+    readonly attachment: RefAttachment;
     focusProxyId: WritableBox<string>;
     focusProxyRef: WritableBox<HTMLElement | null>;
+    readonly focusProxyAttachment: RefAttachment;
     context: NavigationMenuProviderState;
     itemContext: NavigationMenuItemState;
     listContext: NavigationMenuListState;
@@ -203,6 +209,7 @@ export declare class NavigationMenuLinkState {
         provider: NavigationMenuProviderState;
         item: NavigationMenuItemState;
     };
+    readonly attachment: RefAttachment;
     isFocused: boolean;
     constructor(opts: NavigationMenuLinkStateOpts, context: {
         provider: NavigationMenuProviderState;
@@ -238,6 +245,7 @@ export declare class NavigationMenuIndicatorState {
 export declare class NavigationMenuIndicatorImplState {
     static create(opts: NavigationMenuIndicatorStateOpts): NavigationMenuIndicatorImplState;
     readonly opts: NavigationMenuIndicatorStateOpts;
+    readonly attachment: RefAttachment;
     context: NavigationMenuProviderState;
     listContext: NavigationMenuListState;
     position: {
@@ -278,6 +286,7 @@ export declare class NavigationMenuContentState {
     readonly context: NavigationMenuProviderState;
     readonly itemContext: NavigationMenuItemState;
     readonly listContext: NavigationMenuListState;
+    readonly attachment: RefAttachment;
     mounted: boolean;
     readonly open: boolean;
     readonly value: string;
@@ -304,6 +313,7 @@ export declare class NavigationMenuContentImplState {
     readonly itemContext: NavigationMenuItemState;
     readonly context: NavigationMenuProviderState;
     readonly listContext: NavigationMenuListState;
+    readonly attachment: RefAttachment;
     prevMotionAttribute: MotionAttribute | null;
     readonly motionAttribute: MotionAttribute | null;
     domContext: DOMContext;
@@ -327,6 +337,7 @@ export declare class NavigationMenuViewportState {
     static create(opts: NavigationMenuViewportStateOpts): NavigationMenuViewportState;
     readonly opts: NavigationMenuViewportStateOpts;
     readonly context: NavigationMenuProviderState;
+    readonly attachment: RefAttachment;
     readonly open: boolean;
     readonly viewportWidth: string | undefined;
     readonly viewportHeight: string | undefined;