bits-ui 1.8.0 → 2.2.0

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

@@ -1,4 +1,4 @@
-import { afterTick, box, useRefById } from "svelte-toolbelt";
+import { afterTick, box, attachRef } from "svelte-toolbelt";
 import { Context, watch } from "runed";
 import { useRovingFocus, } from "../../internal/use-roving-focus.svelte.js";
 import { getAriaExpanded, getDataDisabled, getDataOpenClosed } from "../../internal/attrs.js";
@@ -16,40 +16,35 @@ class MenubarRootState {
     valueToChangeHandler = new Map();
     constructor(opts) {
         this.opts = opts;
-        useRefById(opts);
         this.rovingFocusGroup = useRovingFocus({
-            rootNodeId: this.opts.id,
+            rootNode: this.opts.ref,
             candidateAttr: MENUBAR_TRIGGER_ATTR,
             loop: this.opts.loop,
             orientation: box.with(() => "horizontal"),
         });
-        this.onMenuClose = this.onMenuClose.bind(this);
-        this.onMenuOpen = this.onMenuOpen.bind(this);
-        this.onMenuToggle = this.onMenuToggle.bind(this);
-        this.registerTrigger = this.registerTrigger.bind(this);
     }
     /**
      * @param id - the id of the trigger to register
      * @returns - a function to de-register the trigger
      */
-    registerTrigger(id) {
+    registerTrigger = (id) => {
         this.triggerIds.push(id);
         return () => {
             this.triggerIds = this.triggerIds.filter((triggerId) => triggerId !== id);
         };
-    }
+    };
     /**
      * @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, onOpenChange) {
+    registerMenu = (value, onOpenChange) => {
         this.valueToChangeHandler.set(value, onOpenChange);
         return () => {
             this.valueToChangeHandler.delete(value);
         };
-    }
-    updateValue(value) {
+    };
+    updateValue = (value) => {
         const currValue = this.opts.value.current;
         const currHandler = this.valueToChangeHandler.get(currValue)?.current;
         const nextHandler = this.valueToChangeHandler.get(value)?.current;
@@ -60,35 +55,38 @@ class MenubarRootState {
         if (nextHandler) {
             nextHandler(true);
         }
-    }
-    getTriggers() {
+    };
+    getTriggers = () => {
         const node = this.opts.ref.current;
         if (!node)
             return [];
         return Array.from(node.querySelectorAll(`[${MENUBAR_TRIGGER_ATTR}]`));
-    }
-    onMenuOpen(id, triggerId) {
+    };
+    onMenuOpen = (id, triggerId) => {
         this.updateValue(id);
         this.rovingFocusGroup.setCurrentTabStopId(triggerId);
-    }
-    onMenuClose() {
+    };
+    onMenuClose = () => {
         this.updateValue("");
-    }
-    onMenuToggle(id) {
+    };
+    onMenuToggle = (id) => {
         this.updateValue(this.opts.value.current ? "" : id);
-    }
+    };
     props = $derived.by(() => ({
         id: this.opts.id.current,
         role: "menubar",
         [MENUBAR_ROOT_ATTR]: "",
+        ...attachRef(this.opts.ref),
     }));
 }
 class MenubarMenuState {
     opts;
     root;
     open = $derived.by(() => this.root.opts.value.current === this.opts.value.current);
-    wasOpenedByKeyboard = $state(false);
+    wasOpenedByKeyboard = false;
     triggerNode = $state(null);
+    triggerId = $derived.by(() => this.triggerNode?.id);
+    contentId = $derived.by(() => this.contentNode?.id);
     contentNode = $state(null);
     constructor(opts, root) {
         this.opts = opts;
@@ -105,6 +103,9 @@ class MenubarMenuState {
     getTriggerNode() {
         return this.triggerNode;
     }
+    toggleMenu() {
+        this.root.onMenuToggle(this.opts.value.current);
+    }
     openMenu() {
         this.root.onMenuOpen(this.opts.value.current, this.triggerNode?.id ?? "");
     }
@@ -119,17 +120,6 @@ class MenubarTriggerState {
         this.opts = opts;
         this.menu = menu;
         this.root = menu.root;
-        this.onpointerdown = this.onpointerdown.bind(this);
-        this.onpointerenter = this.onpointerenter.bind(this);
-        this.onkeydown = this.onkeydown.bind(this);
-        this.onfocus = this.onfocus.bind(this);
-        this.onblur = this.onblur.bind(this);
-        useRefById({
-            ...opts,
-            onRefChange: (node) => {
-                this.menu.triggerNode = node;
-            },
-        });
         onMount(() => {
             return this.root.registerTrigger(opts.id.current);
         });
@@ -139,7 +129,7 @@ class MenubarTriggerState {
             }
         });
     }
-    onpointerdown(e) {
+    onpointerdown = (e) => {
         // only call if the left button but not when the CTRL key is pressed
         if (!this.opts.disabled.current && e.button === 0 && e.ctrlKey === false) {
             // prevent trigger from focusing when opening
@@ -147,17 +137,17 @@ class MenubarTriggerState {
             if (!this.menu.open) {
                 e.preventDefault();
             }
-            this.menu.openMenu();
+            this.menu.toggleMenu();
         }
-    }
-    onpointerenter(_) {
+    };
+    onpointerenter = () => {
         const isMenubarOpen = Boolean(this.root.opts.value.current);
         if (isMenubarOpen && !this.menu.open) {
             this.menu.openMenu();
             this.menu.getTriggerNode()?.focus();
         }
-    }
-    onkeydown(e) {
+    };
+    onkeydown = (e) => {
         if (this.opts.disabled.current)
             return;
         if (e.key === kbd.TAB)
@@ -175,20 +165,20 @@ class MenubarTriggerState {
             e.preventDefault();
         }
         this.root.rovingFocusGroup.handleKeydown(this.menu.getTriggerNode(), e);
-    }
-    onfocus(_) {
+    };
+    onfocus = () => {
         this.isFocused = true;
-    }
-    onblur(_) {
+    };
+    onblur = () => {
         this.isFocused = false;
-    }
+    };
     props = $derived.by(() => ({
         type: "button",
         role: "menuitem",
         id: this.opts.id.current,
         "aria-haspopup": "menu",
         "aria-expanded": getAriaExpanded(this.menu.open),
-        "aria-controls": this.menu.open ? this.menu.contentNode?.id : undefined,
+        "aria-controls": this.menu.open ? this.menu.contentId : undefined,
         "data-highlighted": this.isFocused ? "" : undefined,
         "data-state": getDataOpenClosed(this.menu.open),
         "data-disabled": getDataDisabled(this.opts.disabled.current),
@@ -201,6 +191,7 @@ class MenubarTriggerState {
         onkeydown: this.onkeydown,
         onfocus: this.onfocus,
         onblur: this.onblur,
+        ...attachRef(this.opts.ref, (v) => (this.menu.triggerNode = v)),
     }));
 }
 class MenubarContentState {
@@ -213,14 +204,6 @@ class MenubarContentState {
         this.menu = menu;
         this.root = menu.root;
         this.focusScopeContext = FocusScopeContext.get();
-        this.onkeydown = this.onkeydown.bind(this);
-        useRefById({
-            ...opts,
-            onRefChange: (node) => {
-                this.menu.contentNode = node;
-            },
-            deps: () => this.menu.open,
-        });
     }
     onCloseAutoFocus = (e) => {
         this.opts.onCloseAutoFocus.current(e);
@@ -245,7 +228,7 @@ class MenubarContentState {
             return;
         afterTick(() => this.opts.ref.current?.focus());
     };
-    onkeydown(e) {
+    onkeydown = (e) => {
         if (e.key !== kbd.ARROW_LEFT && e.key !== kbd.ARROW_RIGHT)
             return;
         const target = e.target;
@@ -275,10 +258,10 @@ class MenubarContentState {
         const [nextValue] = candidates;
         if (nextValue)
             this.menu.root.onMenuOpen(nextValue.value, nextValue.triggerId);
-    }
+    };
     props = $derived.by(() => ({
         id: this.opts.id.current,
-        "aria-labelledby": this.menu.triggerNode?.id,
+        "aria-labelledby": this.menu.triggerId,
         style: {
             "--bits-menubar-content-transform-origin": "var(--bits-floating-transform-origin)",
             "--bits-menubar-content-available-width": "var(--bits-floating-available-width)",
@@ -288,6 +271,7 @@ class MenubarContentState {
         },
         onkeydown: this.onkeydown,
         "data-menu-content": "",
+        ...attachRef(this.opts.ref, (v) => (this.menu.contentNode = v)),
     }));
     popperProps = {
         onCloseAutoFocus: this.onCloseAutoFocus,

package/dist/bits/meter/components/meter.svelte

@@ -2,7 +2,9 @@
 	import { box, mergeProps } from "svelte-toolbelt";
 	import type { MeterRootProps } from "../types.js";
 	import { useMeterRootState } from "../meter.svelte.js";
-	import { useId } from "../../../internal/use-id.js";
+	import { createId } from "../../../internal/create-id.js";
+
+	const uid = $props.id();
 
 	let {
 		child,
@@ -10,7 +12,7 @@
 		value = 0,
 		max = 100,
 		min = 0,
-		id = useId(),
+		id = createId(uid),
 		ref = $bindable(null),
 		...restProps
 	}: MeterRootProps = $props();

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

@@ -1,10 +1,9 @@
-import { useRefById } from "svelte-toolbelt";
+import { attachRef } from "svelte-toolbelt";
 const METER_ROOT_ATTR = "data-meter-root";
 class MeterRootState {
     opts;
     constructor(opts) {
         this.opts = opts;
-        useRefById(opts);
     }
     props = $derived.by(() => ({
         role: "meter",
@@ -16,6 +15,7 @@ class MeterRootState {
         "data-max": this.opts.max.current,
         "data-min": this.opts.min.current,
         [METER_ROOT_ATTR]: "",
+        ...attachRef(this.opts.ref),
     }));
 }
 export function useMeterRootState(props) {

package/dist/bits/navigation-menu/components/navigation-menu-content-impl.svelte

@@ -8,13 +8,15 @@
 		useNavigationMenuContentImpl,
 	} from "../navigation-menu.svelte.js";
 	import { noop } from "../../../internal/noop.js";
-	import { useId } from "../../../internal/use-id.js";
+	import { createId } from "../../../internal/create-id.js";
 	import DismissibleLayer from "../../utilities/dismissible-layer/dismissible-layer.svelte";
 	import EscapeLayer from "../../utilities/escape-layer/escape-layer.svelte";
 
+	const uid = $props.id();
+
 	let {
 		ref = $bindable(null),
-		id = useId(),
+		id = createId(uid),
 		child: childProp,
 		children: childrenProp,
 		onInteractOutside = noop,
@@ -54,6 +56,7 @@
 
 <DismissibleLayer
 	{id}
+	ref={contentImplState.opts.ref}
 	enabled={true}
 	onInteractOutside={(e) => {
 		onInteractOutside(e);

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

@@ -2,15 +2,17 @@
 	import { box, mergeProps } from "svelte-toolbelt";
 	import { useNavigationMenuContent } from "../navigation-menu.svelte.js";
 	import NavigationMenuContentImpl from "./navigation-menu-content-impl.svelte";
-	import { useId } from "../../../internal/use-id.js";
+	import { createId } from "../../../internal/create-id.js";
 	import type { NavigationMenuContentProps } from "../../../types.js";
 	import Portal from "../../utilities/portal/portal.svelte";
 	import PresenceLayer from "../../utilities/presence-layer/presence-layer.svelte";
 	import Mounted from "../../utilities/mounted.svelte";
 
+	const uid = $props.id();
+
 	let {
 		ref = $bindable(null),
-		id = useId(),
+		id = createId(uid),
 		children,
 		child,
 		forceMount = false,
@@ -32,7 +34,10 @@
 	to={contentState.context.viewportRef.current || undefined}
 	disabled={!contentState.context.viewportRef.current}
 >
-	<PresenceLayer {id} present={forceMount || contentState.open || contentState.isLastActiveValue}>
+	<PresenceLayer
+		present={forceMount || contentState.open || contentState.isLastActiveValue}
+		ref={contentState.opts.ref}
+	>
 		{#snippet presence()}
 			<NavigationMenuContentImpl {...mergedProps} {children} {child} />
 			<Mounted bind:mounted={contentState.mounted} />

package/dist/bits/navigation-menu/components/navigation-menu-indicator-impl.svelte

@@ -2,10 +2,12 @@
 	import { box, mergeProps } from "svelte-toolbelt";
 	import type { NavigationMenuIndicatorProps } from "../types.js";
 	import { useNavigationMenuIndicatorImpl } from "../navigation-menu.svelte.js";
-	import { useId } from "../../../internal/use-id.js";
+	import { createId } from "../../../internal/create-id.js";
+
+	const uid = $props.id();
 
 	let {
-		id = useId(),
+		id = createId(uid),
 		ref = $bindable(null),
 		children,
 		child,

package/dist/bits/navigation-menu/components/navigation-menu-indicator.svelte

@@ -1,14 +1,16 @@
 <script lang="ts">
-	import { mergeProps } from "svelte-toolbelt";
+	import { box, mergeProps } from "svelte-toolbelt";
 	import type { NavigationMenuIndicatorProps } from "../types.js";
 	import { useNavigationMenuIndicator } from "../navigation-menu.svelte.js";
 	import NavigationMenuIndicatorImpl from "./navigation-menu-indicator-impl.svelte";
-	import { useId } from "../../../internal/use-id.js";
+	import { createId } from "../../../internal/create-id.js";
 	import PresenceLayer from "../../utilities/presence-layer/presence-layer.svelte";
 	import Portal from "../../utilities/portal/portal.svelte";
 
+	const uid = $props.id();
+
 	let {
-		id = useId(),
+		id = createId(uid),
 		ref = $bindable(null),
 		children,
 		child,
@@ -22,7 +24,7 @@
 
 {#if indicatorState.context.indicatorTrackRef.current}
 	<Portal to={indicatorState.context.indicatorTrackRef.current}>
-		<PresenceLayer {id} present={forceMount || indicatorState.isVisible}>
+		<PresenceLayer present={forceMount || indicatorState.isVisible} ref={box.with(() => ref)}>
 			{#snippet presence()}
 				<NavigationMenuIndicatorImpl {...mergedProps} {children} {child} {id} bind:ref />
 			{/snippet}

package/dist/bits/navigation-menu/components/navigation-menu-item.svelte

@@ -2,11 +2,14 @@
 	import { box, mergeProps } from "svelte-toolbelt";
 	import type { NavigationMenuItemProps } from "../types.js";
 	import { useNavigationMenuItem } from "../navigation-menu.svelte.js";
-	import { useId } from "../../../internal/use-id.js";
+	import { createId } from "../../../internal/create-id.js";
+
+	const uid = $props.id();
+	const defaultId = createId(uid);
 
 	let {
-		id = useId(),
-		value = useId(),
+		id = defaultId,
+		value = defaultId,
 		ref = $bindable(null),
 		child,
 		children,

package/dist/bits/navigation-menu/components/navigation-menu-link.svelte

@@ -2,11 +2,13 @@
 	import { box, mergeProps } from "svelte-toolbelt";
 	import type { NavigationMenuLinkProps } from "../types.js";
 	import { useNavigationMenuLink } from "../navigation-menu.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),
 		ref = $bindable(null),
 		child,
 		children,

package/dist/bits/navigation-menu/components/navigation-menu-list.svelte

@@ -2,11 +2,13 @@
 	import { box, mergeProps } from "svelte-toolbelt";
 	import type { NavigationMenuListProps } from "../types.js";
 	import { useNavigationMenuList } from "../navigation-menu.svelte.js";
-	import { useId } from "../../../internal/use-id.js";
+	import { createId } from "../../../internal/create-id.js";
 	import Mounted from "../../utilities/mounted.svelte";
 
+	const uid = $props.id();
+
 	let {
-		id = useId(),
+		id = createId(uid),
 		children,
 		child,
 		ref = $bindable(null),

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

@@ -2,13 +2,15 @@
 	import { box, mergeProps } from "svelte-toolbelt";
 	import type { NavigationMenuSubProps } from "../types.js";
 	import { useNavigationMenuSub } from "../navigation-menu.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 {
 		child,
 		children,
-		id = useId(),
+		id = createId(uid),
 		ref = $bindable(null),
 		value = $bindable(""),
 		onValueChange = noop,

package/dist/bits/navigation-menu/components/navigation-menu-trigger.svelte

@@ -2,12 +2,14 @@
 	import { box, mergeProps } from "svelte-toolbelt";
 	import type { NavigationMenuTriggerProps } from "../types.js";
 	import { useNavigationMenuTrigger } from "../navigation-menu.svelte.js";
-	import { useId } from "../../../internal/use-id.js";
+	import { createId } from "../../../internal/create-id.js";
 	import VisuallyHidden from "../../utilities/visually-hidden/visually-hidden.svelte";
 	import Mounted from "../../utilities/mounted.svelte";
 
+	const uid = $props.id();
+
 	let {
-		id = useId(),
+		id = createId(uid),
 		disabled = false,
 		children,
 		child,

package/dist/bits/navigation-menu/components/navigation-menu-viewport.svelte

@@ -1,13 +1,15 @@
 <script lang="ts">
 	import type { NavigationMenuViewportProps } from "../types.js";
 	import { useNavigationMenuViewport } from "../navigation-menu.svelte.js";
-	import { useId } from "../../../internal/use-id.js";
+	import { createId } from "../../../internal/create-id.js";
 	import PresenceLayer from "../../utilities/presence-layer/presence-layer.svelte";
 	import { box, mergeProps } from "svelte-toolbelt";
 	import { Mounted } from "../../utilities/index.js";
 
+	const uid = $props.id();
+
 	let {
-		id = useId(),
+		id = createId(uid),
 		ref = $bindable(null),
 		forceMount = false,
 		child,
@@ -26,7 +28,7 @@
 	const mergedProps = $derived(mergeProps(restProps, viewportState.props));
 </script>
 
-<PresenceLayer {id} present={forceMount || viewportState.open}>
+<PresenceLayer present={forceMount || viewportState.open} ref={viewportState.opts.ref}>
 	{#snippet presence()}
 		{#if child}
 			{@render child({ props: mergedProps })}

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

@@ -2,13 +2,15 @@
 	import { box, mergeProps } from "svelte-toolbelt";
 	import type { NavigationMenuRootProps } from "../types.js";
 	import { useNavigationMenuRoot } from "../navigation-menu.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 {
 		child,
 		children,
-		id = useId(),
+		id = createId(uid),
 		ref = $bindable(null),
 		value = $bindable(""),
 		onValueChange = noop,

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

@@ -2,7 +2,7 @@
  * Based on Radix UI's Navigation Menu
  * https://www.radix-ui.com/docs/primitives/components/navigation-menu
  */
-import { type AnyFn, type ReadableBox, type ReadableBoxedValues, type WithRefProps, type WritableBox, type WritableBoxedValues } from "svelte-toolbelt";
+import { type AnyFn, type ReadableBox, type ReadableBoxedValues, type WithRefProps, type WritableBox, type WritableBoxedValues, DOMContext } from "svelte-toolbelt";
 import { Context } from "runed";
 import { type Snippet } from "svelte";
 import { SvelteMap } from "svelte/reactivity";
@@ -125,6 +125,7 @@ export declare class NavigationMenuItemState {
         props: Record<string, unknown>;
     }]> | undefined>;
     contentProps: ReadableBox<Record<string, unknown>>;
+    domContext: DOMContext;
     constructor(opts: NavigationMenuItemStateProps, listContext: NavigationMenuListState);
     onEntryKeydown: (side?: "start" | "end") => void;
     onFocusProxyEnter: (side?: "start" | "end") => void;
@@ -294,6 +295,7 @@ declare class NavigationMenuContentImplState {
     listContext: NavigationMenuListState;
     prevMotionAttribute: MotionAttribute | null;
     motionAttribute: MotionAttribute | null;
+    domContext: DOMContext;
     constructor(opts: NavigationMenuContentImplStateProps, itemContext: NavigationMenuItemState);
     onFocusOutside: (e: Event) => void;
     onInteractOutside: (e: PointerEvent) => void;