bits-ui 1.8.0 → 2.1.0

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

@@ -2,16 +2,18 @@
 	import { box, mergeProps } from "svelte-toolbelt";
 	import type { TooltipContentStaticProps } from "../types.js";
 	import { useTooltipContent } from "../tooltip.svelte.js";
-	import { useId } from "../../../internal/use-id.js";
+	import { createId } from "../../../internal/create-id.js";
 	import PopperLayer from "../../utilities/popper-layer/popper-layer.svelte";
 	import { getFloatingContentCSSVars } from "../../../internal/floating-svelte/floating-utils.svelte.js";
 	import PopperLayerForceMount from "../../utilities/popper-layer/popper-layer-force-mount.svelte";
 	import { noop } from "../../../internal/noop.js";
 
+	const uid = $props.id();
+
 	let {
 		children,
 		child,
-		id = useId(),
+		id = createId(uid),
 		ref = $bindable(null),
 		onInteractOutside = noop,
 		onEscapeKeydown = noop,
@@ -43,6 +45,7 @@
 		loop={false}
 		preventScroll={false}
 		forceMount={true}
+		ref={contentState.opts.ref}
 	>
 		{#snippet popper({ props })}
 			{@const mergedProps = mergeProps(props, {
@@ -68,6 +71,7 @@
 		loop={false}
 		preventScroll={false}
 		forceMount={false}
+		ref={contentState.opts.ref}
 	>
 		{#snippet popper({ props })}
 			{@const mergedProps = mergeProps(props, {

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

@@ -2,16 +2,18 @@
 	import { box, mergeProps } from "svelte-toolbelt";
 	import type { TooltipContentProps } from "../types.js";
 	import { useTooltipContent } from "../tooltip.svelte.js";
-	import { useId } from "../../../internal/use-id.js";
+	import { createId } from "../../../internal/create-id.js";
 	import PopperLayer from "../../utilities/popper-layer/popper-layer.svelte";
 	import { getFloatingContentCSSVars } from "../../../internal/floating-svelte/floating-utils.svelte.js";
 	import PopperLayerForceMount from "../../utilities/popper-layer/popper-layer-force-mount.svelte";
 	import { noop } from "../../../internal/noop.js";
 
+	const uid = $props.id();
+
 	let {
 		children,
 		child,
-		id = useId(),
+		id = createId(uid),
 		ref = $bindable(null),
 		side = "top",
 		sideOffset = 0,
@@ -61,6 +63,7 @@
 		loop={false}
 		preventScroll={false}
 		forceMount={true}
+		ref={contentState.opts.ref}
 	>
 		{#snippet popper({ props, wrapperProps })}
 			{@const mergedProps = mergeProps(props, {
@@ -87,6 +90,7 @@
 		loop={false}
 		preventScroll={false}
 		forceMount={false}
+		ref={contentState.opts.ref}
 	>
 		{#snippet popper({ props, wrapperProps })}
 			{@const mergedProps = mergeProps(props, {

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

@@ -2,13 +2,15 @@
 	import { box, mergeProps } from "svelte-toolbelt";
 	import type { TooltipTriggerProps } from "../types.js";
 	import { useTooltipTrigger } from "../tooltip.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";
 
+	const uid = $props.id();
+
 	let {
 		children,
 		child,
-		id = useId(),
+		id = createId(uid),
 		disabled = false,
 		type = "button",
 		ref = $bindable(null),
@@ -27,7 +29,7 @@
 	const mergedProps = $derived(mergeProps(restProps, triggerState.props, { type }));
 </script>
 
-<FloatingLayerAnchor {id}>
+<FloatingLayerAnchor {id} ref={triggerState.opts.ref}>
 	{#if child}
 		{@render child({ props: mergedProps })}
 	{:else}

package/dist/bits/tooltip/tooltip.svelte.js

@@ -1,4 +1,4 @@
-import { box, onMountEffect, useRefById } from "svelte-toolbelt";
+import { box, onMountEffect, attachRef } from "svelte-toolbelt";
 import { on } from "svelte/events";
 import { Context, watch } from "runed";
 import { useTimeoutFn } from "../../internal/use-timeout-fn.svelte.js";
@@ -138,12 +138,6 @@ class TooltipTriggerState {
     constructor(opts, root) {
         this.opts = opts;
         this.root = root;
-        useRefById({
-            ...opts,
-            onRefChange: (node) => {
-                this.root.triggerNode = node;
-            },
-        });
     }
     handlePointerUp = () => {
         this.#isPointerDown.current = false;
@@ -212,6 +206,7 @@ class TooltipTriggerState {
         onfocus: this.#onfocus,
         onblur: this.#onblur,
         onclick: this.#onclick,
+        ...attachRef(this.opts.ref, (v) => (this.root.triggerNode = v)),
     }));
 }
 class TooltipContentState {
@@ -220,13 +215,6 @@ class TooltipContentState {
     constructor(opts, root) {
         this.opts = opts;
         this.root = root;
-        useRefById({
-            ...opts,
-            onRefChange: (node) => {
-                this.root.contentNode = node;
-            },
-            deps: () => this.root.opts.open.current,
-        });
         useGraceArea({
             triggerNode: () => this.root.triggerNode,
             contentNode: () => this.root.contentNode,
@@ -284,6 +272,7 @@ class TooltipContentState {
             outline: "none",
         },
         [TOOLTIP_CONTENT_ATTR]: "",
+        ...attachRef(this.opts.ref, (v) => (this.root.contentNode = v)),
     }));
     popperProps = {
         onInteractOutside: this.onInteractOutside,

package/dist/bits/utilities/dismissible-layer/dismissible-layer.svelte

@@ -12,6 +12,7 @@
 		children,
 		enabled,
 		isValidEvent = () => false,
+		ref,
 	}: DismissibleLayerImplProps = $props();
 
 	const dismissibleLayerState = useDismissibleLayer({
@@ -21,6 +22,7 @@
 		enabled: box.with(() => enabled),
 		onFocusOutside: box.with(() => onFocusOutside),
 		isValidEvent: box.with(() => isValidEvent),
+		ref,
 	});
 </script>
 

package/dist/bits/utilities/dismissible-layer/types.d.ts

@@ -1,4 +1,5 @@
 import type { Snippet } from "svelte";
+import type { WritableBox } from "svelte-toolbelt";
 export type InteractOutsideEvent = PointerEvent;
 export type InteractOutsideEventHandler = (e: PointerEvent) => void;
 export type InteractOutsideBehaviorType = "close" | "defer-otherwise-close" | "defer-otherwise-ignore" | "ignore";
@@ -44,4 +45,5 @@ export type DismissibleLayerImplProps = {
     children?: Snippet<[{
         props: Record<string, unknown>;
     }]>;
+    ref: WritableBox<HTMLElement | null>;
 } & DismissibleLayerProps;

package/dist/bits/utilities/dismissible-layer/use-dismissable-layer.svelte.d.ts

@@ -1,12 +1,12 @@
 import { type WritableBox } from "svelte-toolbelt";
 import type { DismissibleLayerImplProps } from "./types.js";
 import type { ReadableBoxedValues } from "../../../internal/box.svelte.js";
-type DismissibleLayerStateProps = ReadableBoxedValues<Required<Omit<DismissibleLayerImplProps, "children">>>;
+type DismissibleLayerStateProps = ReadableBoxedValues<Required<Omit<DismissibleLayerImplProps, "children" | "ref">>> & {
+    ref: WritableBox<HTMLElement | null>;
+};
 export declare class DismissibleLayerState {
     #private;
     readonly opts: DismissibleLayerStateProps;
-    node: WritableBox<HTMLElement | null>;
-    currNode: HTMLElement | null;
     constructor(opts: DismissibleLayerStateProps);
     props: {
         onfocuscapture: () => void;

package/dist/bits/utilities/dismissible-layer/use-dismissable-layer.svelte.js

@@ -1,4 +1,4 @@
-import { afterSleep, afterTick, box, executeCallbacks, onDestroyEffect, useRefById, } from "svelte-toolbelt";
+import { afterSleep, afterTick, executeCallbacks, onDestroyEffect, } from "svelte-toolbelt";
 import { watch } from "runed";
 import { on } from "svelte/events";
 import { addEventListener } from "../../../internal/events.js";
@@ -17,26 +17,16 @@ export class DismissibleLayerState {
     };
     #isResponsibleLayer = false;
     #isFocusInsideDOMTree = false;
-    node = box(null);
     #documentObj = undefined;
     #onFocusOutside;
-    currNode = $state(null);
     #unsubClickListener = noop;
     constructor(opts) {
         this.opts = opts;
-        useRefById({
-            id: opts.id,
-            ref: this.node,
-            deps: () => opts.enabled.current,
-            onRefChange: (node) => {
-                this.currNode = node;
-            },
-        });
         this.#behaviorType = opts.interactOutsideBehavior;
         this.#interactOutsideProp = opts.onInteractOutside;
         this.#onFocusOutside = opts.onFocusOutside;
         $effect(() => {
-            this.#documentObj = getOwnerDocument(this.currNode);
+            this.#documentObj = getOwnerDocument(this.opts.ref.current);
         });
         let unsubEvents = noop;
         const cleanup = () => {
@@ -45,11 +35,11 @@ export class DismissibleLayerState {
             this.#handleInteractOutside.destroy();
             unsubEvents();
         };
-        watch([() => this.opts.enabled.current, () => this.currNode], ([enabled, currNode]) => {
-            if (!enabled || !currNode)
+        watch([() => this.opts.enabled.current, () => this.opts.ref.current], () => {
+            if (!this.opts.enabled.current || !this.opts.ref.current)
                 return;
             afterSleep(1, () => {
-                if (!this.currNode)
+                if (!this.opts.ref.current)
                     return;
                 globalThis.bitsDismissableLayers.set(this, this.#behaviorType);
                 unsubEvents();
@@ -68,10 +58,10 @@ export class DismissibleLayerState {
     #handleFocus = (event) => {
         if (event.defaultPrevented)
             return;
-        if (!this.currNode)
+        if (!this.opts.ref.current)
             return;
         afterTick(() => {
-            if (!this.currNode || this.#isTargetWithinLayer(event.target))
+            if (!this.opts.ref.current || this.#isTargetWithinLayer(event.target))
                 return;
             if (event.target && !this.#isFocusInsideDOMTree) {
                 this.#onFocusOutside.current?.(event);
@@ -107,11 +97,12 @@ export class DismissibleLayerState {
         this.#interactOutsideProp.current(e);
     };
     #handleInteractOutside = debounce((e) => {
-        if (!this.currNode) {
+        if (!this.opts.ref.current) {
             this.#unsubClickListener();
             return;
         }
-        const isEventValid = this.opts.isValidEvent.current(e, this.currNode) || isValidEvent(e, this.currNode);
+        const isEventValid = this.opts.isValidEvent.current(e, this.opts.ref.current) ||
+            isValidEvent(e, this.opts.ref.current);
         if (!this.#isResponsibleLayer || this.#isAnyEventIntercepted() || !isEventValid) {
             this.#unsubClickListener();
             return;
@@ -141,14 +132,14 @@ export class DismissibleLayerState {
         this.#interceptedEvents[e.type] = false;
     };
     #markResponsibleLayer = () => {
-        if (!this.node.current)
+        if (!this.opts.ref.current)
             return;
-        this.#isResponsibleLayer = isResponsibleLayer(this.node.current);
+        this.#isResponsibleLayer = isResponsibleLayer(this.opts.ref.current);
     };
     #isTargetWithinLayer = (target) => {
-        if (!this.node.current)
+        if (!this.opts.ref.current)
             return false;
-        return isOrContainsTarget(this.node.current, target);
+        return isOrContainsTarget(this.opts.ref.current, target);
     };
     #resetState = debounce(() => {
         for (const eventType in this.#interceptedEvents) {
@@ -187,9 +178,9 @@ function isResponsibleLayer(node) {
      */
     const topMostLayer = getTopMostLayer(layersArr);
     if (topMostLayer)
-        return topMostLayer[0].node.current === node;
+        return topMostLayer[0].opts.ref.current === node;
     const [firstLayerNode] = layersArr[0];
-    return firstLayerNode.node.current === node;
+    return firstLayerNode.opts.ref.current === node;
 }
 function isValidEvent(e, node) {
     if ("button" in e && e.button > 0)

package/dist/bits/utilities/floating-layer/components/floating-layer-anchor.svelte

@@ -4,11 +4,12 @@
 	import type { AnchorProps } from "./index.js";
 	import type { Measurable } from "../../../../internal/floating-svelte/types.js";
 
-	let { id, children, virtualEl }: AnchorProps = $props();
+	let { id, children, virtualEl, ref }: AnchorProps = $props();
 
 	useFloatingAnchorState({
 		id: box.with(() => id),
 		virtualEl: box.with(() => virtualEl as unknown as Measurable | null),
+		ref,
 	});
 </script>
 

package/dist/bits/utilities/floating-layer/types.d.ts

@@ -112,4 +112,5 @@ export type FloatingLayerAnchorProps = {
     id: string;
     children?: Snippet;
     virtualEl?: ReadableBox<Measurable | null>;
+    ref: ReadableBox<HTMLElement | null>;
 };

package/dist/bits/utilities/floating-layer/use-floating-layer.svelte.d.ts

@@ -1,4 +1,5 @@
 import { type Middleware, type Placement } from "@floating-ui/dom";
+import { type ReadableBox } from "svelte-toolbelt";
 import type { Arrayable, WithRefProps } from "../../../internal/types.js";
 import type { Box, ReadableBoxedValues } from "../../../internal/box.svelte.js";
 import type { Measurable, UseFloatingReturn } from "../../../internal/floating-svelte/types.js";
@@ -11,7 +12,7 @@ export type Boundary = Element | null;
 declare class FloatingRootState {
     anchorNode: import("svelte-toolbelt").WritableBox<HTMLElement | Measurable | null>;
     customAnchorNode: import("svelte-toolbelt").WritableBox<string | HTMLElement | Measurable | null>;
-    triggerNode: import("svelte-toolbelt").WritableBox<HTMLElement | Measurable | null>;
+    triggerNode: ReadableBox<Measurable | HTMLElement | null>;
     constructor();
 }
 export type FloatingContentStateProps = ReadableBoxedValues<{
@@ -934,11 +935,11 @@ declare class FloatingArrowState {
 type FloatingAnchorStateProps = ReadableBoxedValues<{
     id: string;
     virtualEl?: Measurable | null;
+    ref: Measurable | HTMLElement | null;
 }>;
 declare class FloatingAnchorState {
     readonly opts: FloatingAnchorStateProps;
     readonly root: FloatingRootState;
-    ref: import("svelte-toolbelt").WritableBox<HTMLElement | null>;
     constructor(opts: FloatingAnchorStateProps, root: FloatingRootState);
 }
 export declare function useFloatingRootState(): FloatingRootState;

package/dist/bits/utilities/floating-layer/use-floating-layer.svelte.js

@@ -1,5 +1,5 @@
 import { arrow, autoUpdate, flip, hide, limitShift, offset, shift, size, } from "@floating-ui/dom";
-import { box, cssToStyleObj, styleToString, useRefById } from "svelte-toolbelt";
+import { attachRef, box, cssToStyleObj, styleToString } from "svelte-toolbelt";
 import { Context, ElementSize, watch } from "runed";
 import { isNotNull } from "../../../internal/is.js";
 import { useId } from "../../../internal/use-id.js";
@@ -133,6 +133,7 @@ class FloatingContentState {
         },
         // Floating UI calculates logical alignment based the `dir` attribute
         dir: this.opts.dir.current,
+        ...attachRef(this.wrapperRef),
     }));
     props = $derived.by(() => ({
         "data-side": this.placedSide,
@@ -143,6 +144,7 @@ class FloatingContentState {
             // we prevent animations so that users's animation don't kick in too early referring wrong sides
             // animation: !this.floating.isPositioned ? "none" : undefined,
         }),
+        ...attachRef(this.contentRef),
     }));
     arrowStyle = $derived({
         position: "absolute",
@@ -172,16 +174,6 @@ class FloatingContentState {
         watch(() => opts.customAnchor.current, (customAnchor) => {
             this.root.customAnchorNode.current = customAnchor;
         });
-        useRefById({
-            id: this.opts.wrapperId,
-            ref: this.wrapperRef,
-            deps: () => this.opts.enabled.current,
-        });
-        useRefById({
-            id: this.opts.id,
-            ref: this.contentRef,
-            deps: () => this.opts.enabled.current,
-        });
         this.floating = useFloating({
             strategy: () => this.opts.strategy.current,
             placement: () => this.#desiredPlacement,
@@ -216,24 +208,17 @@ class FloatingArrowState {
     constructor(opts, content) {
         this.opts = opts;
         this.content = content;
-        useRefById({
-            ...opts,
-            onRefChange: (node) => {
-                this.content.arrowRef.current = node;
-            },
-            deps: () => this.content.opts.enabled.current,
-        });
     }
     props = $derived.by(() => ({
         id: this.opts.id.current,
         style: this.content.arrowStyle,
         "data-side": this.content.placedSide,
+        ...attachRef(this.content.arrowRef),
     }));
 }
 class FloatingAnchorState {
     opts;
     root;
-    ref = box(null);
     constructor(opts, root) {
         this.opts = opts;
         this.root = root;
@@ -241,13 +226,7 @@ class FloatingAnchorState {
             root.triggerNode = box.from(opts.virtualEl.current);
         }
         else {
-            useRefById({
-                id: opts.id,
-                ref: this.ref,
-                onRefChange: (node) => {
-                    root.triggerNode.current = node;
-                },
-            });
+            root.triggerNode = opts.ref;
         }
     }
 }

package/dist/bits/utilities/focus-scope/focus-scope.svelte

@@ -12,6 +12,7 @@
 		onOpenAutoFocus = noop,
 		focusScope,
 		forceMount = false,
+		ref,
 	}: FocusScopeImplProps = $props();
 
 	const focusScopeState = useFocusScope({
@@ -21,6 +22,7 @@
 		onOpenAutoFocus: box.with(() => onOpenAutoFocus),
 		id: box.with(() => id),
 		forceMount: box.with(() => forceMount),
+		ref,
 	});
 </script>
 

package/dist/bits/utilities/focus-scope/types.d.ts

@@ -1,6 +1,7 @@
 import type { Snippet } from "svelte";
 import type { FocusScopeContainerProps } from "./use-focus-scope.svelte.js";
 import type { EventCallback } from "../../../internal/events.js";
+import type { ReadableBox } from "svelte-toolbelt";
 export type FocusScopeProps = {
     /**
      * Event handler called when auto-focusing on open.
@@ -38,4 +39,5 @@ export type FocusScopeImplProps = {
      * Whether the content within the focus trap is being force mounted or not.
      */
     forceMount?: boolean;
+    ref: ReadableBox<HTMLElement | null>;
 } & FocusScopeProps;

package/dist/bits/utilities/focus-scope/use-focus-scope.svelte.d.ts

@@ -36,13 +36,14 @@ type UseFocusScopeProps = ReadableBoxedValues<{
      * Whether force mount is enabled or not
      */
     forceMount: boolean;
+    ref: HTMLElement | null;
 }>;
 export type FocusScopeContainerProps = {
     id: string;
     tabindex: number;
     onkeydown: EventCallback<KeyboardEvent>;
 };
-export declare function useFocusScope({ id, loop, enabled, onOpenAutoFocus, onCloseAutoFocus, forceMount, }: UseFocusScopeProps): {
+export declare function useFocusScope({ id, loop, enabled, onOpenAutoFocus, onCloseAutoFocus, forceMount, ref, }: UseFocusScopeProps): {
     readonly props: FocusScopeContainerProps;
 };
 export {};

package/dist/bits/utilities/focus-scope/use-focus-scope.svelte.js

@@ -1,4 +1,4 @@
-import { afterSleep, afterTick, box, executeCallbacks, useRefById } from "svelte-toolbelt";
+import { afterSleep, afterTick, executeCallbacks } from "svelte-toolbelt";
 import { Context, watch } from "runed";
 import { on } from "svelte/events";
 import { createFocusScopeAPI, createFocusScopeStack, removeLinks, } from "./focus-scope-stack.svelte.js";
@@ -16,17 +16,11 @@ const AutoFocusOnDestroyEvent = new CustomEventDispatcher("focusScope.autoFocusO
     cancelable: true,
 });
 export const FocusScopeContext = new Context("FocusScope");
-export function useFocusScope({ id, loop, enabled, onOpenAutoFocus, onCloseAutoFocus, forceMount, }) {
+export function useFocusScope({ id, loop, enabled, onOpenAutoFocus, onCloseAutoFocus, forceMount, ref, }) {
     const focusScopeStack = createFocusScopeStack();
     const focusScope = createFocusScopeAPI();
-    const ref = box(null);
     const ctx = FocusScopeContext.getOr({ ignoreCloseAutoFocus: false });
     let lastFocusedElement = null;
-    useRefById({
-        id,
-        ref,
-        deps: () => enabled.current,
-    });
     function manageFocus(event) {
         if (focusScope.paused || !ref.current || focusScope.isHandlingFocus)
             return;

package/dist/bits/utilities/popper-layer/popper-layer-inner.svelte

@@ -44,6 +44,7 @@
 		customAnchor = null,
 		isStatic = false,
 		enabled,
+		ref,
 		...restProps
 	}: Omit<PopperLayerImplProps, "present" | "children"> & {
 		enabled: boolean;
@@ -85,6 +86,7 @@
 			{loop}
 			trapFocus={enabled && trapFocus}
 			forceMount={restProps.forceMount}
+			{ref}
 		>
 			{#snippet focusScope({ props: focusScopeProps })}
 				<EscapeLayer {onEscapeKeydown} {escapeKeydownBehavior} {enabled}>
@@ -95,6 +97,7 @@
 						{interactOutsideBehavior}
 						{isValidEvent}
 						{enabled}
+						{ref}
 					>
 						{#snippet children({ props: dismissibleProps })}
 							<TextSelectionLayer
@@ -103,6 +106,7 @@
 								{onPointerDown}
 								{onPointerUp}
 								{enabled}
+								{ref}
 							>
 								{@render popper?.({
 									props: mergeProps(

package/dist/bits/utilities/popper-layer/popper-layer.svelte

@@ -39,11 +39,12 @@
 		isValidEvent = () => false,
 		customAnchor = null,
 		isStatic = false,
+		ref,
 		...restProps
 	}: PopperLayerImplProps = $props();
 </script>
 
-<PresenceLayer {id} {present} {...restProps}>
+<PresenceLayer {present} {ref}>
 	{#snippet presence()}
 		<PopperLayerInner
 			{popper}
@@ -82,6 +83,7 @@
 			{isValidEvent}
 			{onFocusOutside}
 			forceMount={false}
+			{ref}
 			{...restProps}
 		/>
 	{/snippet}

package/dist/bits/utilities/presence-layer/presence-layer.svelte

@@ -3,11 +3,11 @@
 	import type { PresenceLayerImplProps } from "./types.js";
 	import { usePresence } from "./use-presence.svelte.js";
 
-	let { present, forceMount, presence, id }: PresenceLayerImplProps = $props();
+	let { present, forceMount, presence, ref }: PresenceLayerImplProps = $props();
 
 	const isPresent = usePresence(
 		box.with(() => present),
-		box.with(() => id)
+		ref
 	);
 </script>
 

package/dist/bits/utilities/presence-layer/types.d.ts

@@ -1,4 +1,5 @@
 import type { Snippet } from "svelte";
+import type { ReadableBox } from "svelte-toolbelt";
 export type PresenceLayerProps = {
     /**
      * Whether to force mount the component.
@@ -6,7 +7,6 @@ export type PresenceLayerProps = {
     forceMount?: boolean;
 };
 export type PresenceLayerImplProps = PresenceLayerProps & {
-    id: string;
     /**
      * The presence status.
      */
@@ -16,4 +16,5 @@ export type PresenceLayerImplProps = PresenceLayerProps & {
             current: boolean;
         };
     }]>;
+    ref: ReadableBox<HTMLElement | null>;
 };

package/dist/bits/utilities/presence-layer/use-presence.svelte.d.ts

@@ -1,4 +1,4 @@
 import { type ReadableBox } from "svelte-toolbelt";
-export declare function usePresence(present: ReadableBox<boolean>, id: ReadableBox<string>): {
+export declare function usePresence(present: ReadableBox<boolean>, ref: ReadableBox<HTMLElement | null>): {
     readonly current: boolean;
 };