bits-ui 1.8.0 → 2.2.0

package/dist/bits/scroll-area/scroll-area.svelte.js

@@ -6,7 +6,7 @@
  */
 import { Context, useDebounce } from "runed";
 import { untrack } from "svelte";
-import { box, executeCallbacks, useRefById } from "svelte-toolbelt";
+import { box, executeCallbacks, attachRef, DOMContext, getWindow } from "svelte-toolbelt";
 import { addEventListener } from "../../internal/events.js";
 import { mergeProps, useId } from "../../shared/index.js";
 import { useStateMachine } from "../../internal/use-state-machine.svelte.js";
@@ -29,14 +29,10 @@ class ScrollAreaRootState {
     cornerHeight = $state(0);
     scrollbarXEnabled = $state(false);
     scrollbarYEnabled = $state(false);
+    domContext;
     constructor(opts) {
         this.opts = opts;
-        useRefById({
-            ...opts,
-            onRefChange: (node) => {
-                this.scrollAreaNode = node;
-            },
-        });
+        this.domContext = new DOMContext(opts.ref);
     }
     props = $derived.by(() => ({
         id: this.opts.id.current,
@@ -47,6 +43,7 @@ class ScrollAreaRootState {
             "--bits-scroll-area-corner-width": `${this.cornerWidth}px`,
         },
         [SCROLL_AREA_ROOT_ATTR]: "",
+        ...attachRef(this.opts.ref, (v) => (this.scrollAreaNode = v)),
     }));
 }
 class ScrollAreaViewportState {
@@ -57,19 +54,6 @@ class ScrollAreaViewportState {
     constructor(opts, root) {
         this.opts = opts;
         this.root = root;
-        useRefById({
-            ...opts,
-            onRefChange: (node) => {
-                this.root.viewportNode = node;
-            },
-        });
-        useRefById({
-            id: this.#contentId,
-            ref: this.#contentRef,
-            onRefChange: (node) => {
-                this.root.contentNode = node;
-            },
-        });
     }
     props = $derived.by(() => ({
         id: this.opts.id.current,
@@ -78,6 +62,7 @@ class ScrollAreaViewportState {
             overflowY: this.root.scrollbarYEnabled ? "scroll" : "hidden",
         },
         [SCROLL_AREA_VIEWPORT_ATTR]: "",
+        ...attachRef(this.opts.ref, (v) => (this.root.viewportNode = v)),
     }));
     contentProps = $derived.by(() => ({
         id: this.#contentId.current,
@@ -90,6 +75,7 @@ class ScrollAreaViewportState {
          * be constrained by the parent container to enable `text-overflow: ellipsis`
          */
         style: { minWidth: this.root.scrollbarXEnabled ? "fit-content" : undefined },
+        ...attachRef(this.#contentRef, (v) => (this.root.contentNode = v)),
     }));
 }
 class ScrollAreaScrollbarState {
@@ -126,13 +112,13 @@ class ScrollAreaScrollbarHoverState {
             if (!scrollAreaNode)
                 return;
             const handlePointerEnter = () => {
-                window.clearTimeout(hideTimer);
+                this.root.domContext.clearTimeout(hideTimer);
                 untrack(() => (this.isVisible = true));
             };
             const handlePointerLeave = () => {
                 if (hideTimer)
-                    window.clearTimeout(hideTimer);
-                hideTimer = window.setTimeout(() => {
+                    this.root.domContext.clearTimeout(hideTimer);
+                hideTimer = this.root.domContext.setTimeout(() => {
                     untrack(() => {
                         this.scrollbar.hasThumb = false;
                         this.isVisible = false;
@@ -141,7 +127,7 @@ class ScrollAreaScrollbarHoverState {
             };
             const unsubListeners = executeCallbacks(on(scrollAreaNode, "pointerenter", handlePointerEnter), on(scrollAreaNode, "pointerleave", handlePointerLeave));
             return () => {
-                window.clearTimeout(hideTimer);
+                this.root.domContext.getWindow().clearTimeout(hideTimer);
                 unsubListeners();
             };
         });
@@ -180,8 +166,8 @@ class ScrollAreaScrollbarScrollState {
             const _state = this.machine.state.current;
             const scrollHideDelay = this.root.opts.scrollHideDelay.current;
             if (_state === "idle") {
-                const hideTimer = window.setTimeout(() => this.machine.dispatch("HIDE"), scrollHideDelay);
-                return () => window.clearTimeout(hideTimer);
+                const hideTimer = this.root.domContext.setTimeout(() => this.machine.dispatch("HIDE"), scrollHideDelay);
+                return () => this.root.domContext.clearTimeout(hideTimer);
             }
         });
         $effect(() => {
@@ -261,7 +247,7 @@ class ScrollAreaScrollbarVisibleState {
         $effect(() => {
             this.scrollbar.hasThumb = this.hasThumb;
         });
-        $effect.pre(() => {
+        $effect(() => {
             if (!this.scrollbar.hasThumb && this.thumbNode) {
                 this.prevTransformStyle = this.thumbNode.style.transform;
             }
@@ -338,13 +324,6 @@ class ScrollAreaScrollbarXState {
         this.scrollbarVis = scrollbarVis;
         this.root = scrollbarVis.root;
         this.scrollbar = scrollbarVis.scrollbar;
-        useRefById({
-            ...this.scrollbar.opts,
-            onRefChange: (node) => {
-                this.root.scrollbarXNode = node;
-            },
-            deps: () => this.opts.mounted.current,
-        });
         $effect(() => {
             if (!this.scrollbar.opts.ref.current)
                 return;
@@ -409,6 +388,7 @@ class ScrollAreaScrollbarXState {
                 : 0,
             "--bits-scroll-area-thumb-width": `${this.thumbSize}px`,
         },
+        ...attachRef(this.scrollbar.opts.ref, (v) => (this.root.scrollbarXNode = v)),
     }));
 }
 class ScrollAreaScrollbarYState {
@@ -422,13 +402,6 @@ class ScrollAreaScrollbarYState {
         this.scrollbarVis = scrollbarVis;
         this.root = scrollbarVis.root;
         this.scrollbar = scrollbarVis.scrollbar;
-        useRefById({
-            ...this.scrollbar.opts,
-            onRefChange: (node) => {
-                this.root.scrollbarYNode = node;
-            },
-            deps: () => this.opts.mounted.current,
-        });
         $effect(() => {
             if (!this.scrollbar.opts.ref.current)
                 return;
@@ -496,6 +469,7 @@ class ScrollAreaScrollbarYState {
             bottom: "var(--bits-scroll-area-corner-height)",
             "--bits-scroll-area-thumb-height": `${this.thumbSize}px`,
         },
+        ...attachRef(this.scrollbar.opts.ref, (v) => (this.root.scrollbarYNode = v)),
     }));
 }
 class ScrollAreaScrollbarSharedState {
@@ -542,9 +516,9 @@ class ScrollAreaScrollbarSharedState {
             this.scrollbarVis.sizes;
             untrack(() => this.handleThumbPositionChange());
         });
-        $effect.pre(() => {
-            this.handleThumbPositionChange();
-        });
+        // $effect.pre(() => {
+        // 	this.handleThumbPositionChange();
+        // });
         useResizeObserver(() => this.scrollbar.opts.ref.current, this.handleResize);
         useResizeObserver(() => this.root.contentNode, this.handleResize);
         this.onpointerdown = this.onpointerdown.bind(this);
@@ -566,8 +540,8 @@ class ScrollAreaScrollbarSharedState {
         this.rect = this.scrollbar.opts.ref.current?.getBoundingClientRect() ?? null;
         // pointer capture doesn't prevent text selection in Safari
         // so we remove text selection manually when scrolling
-        this.prevWebkitUserSelect = document.body.style.webkitUserSelect;
-        document.body.style.webkitUserSelect = "none";
+        this.prevWebkitUserSelect = this.root.domContext.getDocument().body.style.webkitUserSelect;
+        this.root.domContext.getDocument().body.style.webkitUserSelect = "none";
         if (this.root.viewportNode)
             this.root.viewportNode.style.scrollBehavior = "auto";
         this.handleDragScroll(e);
@@ -580,7 +554,7 @@ class ScrollAreaScrollbarSharedState {
         if (target.hasPointerCapture(e.pointerId)) {
             target.releasePointerCapture(e.pointerId);
         }
-        document.body.style.webkitUserSelect = this.prevWebkitUserSelect;
+        this.root.domContext.getDocument().body.style.webkitUserSelect = this.prevWebkitUserSelect;
         if (this.root.viewportNode)
             this.root.viewportNode.style.scrollBehavior = "";
         this.rect = null;
@@ -612,13 +586,6 @@ class ScrollAreaThumbImplState {
         this.opts = opts;
         this.scrollbarState = scrollbarState;
         this.#root = scrollbarState.root;
-        useRefById({
-            ...opts,
-            onRefChange: (node) => {
-                this.scrollbarState.scrollbarVis.thumbNode = node;
-            },
-            deps: () => this.opts.mounted.current,
-        });
         $effect(() => {
             const viewportNode = this.#root.viewportNode;
             if (!viewportNode)
@@ -631,7 +598,7 @@ class ScrollAreaThumbImplState {
                     this.scrollbarState.handleThumbPositionChange();
                 }
             };
-            this.scrollbarState.handleThumbPositionChange();
+            untrack(() => this.scrollbarState.handleThumbPositionChange());
             const unsubListener = addEventListener(viewportNode, "scroll", handleScroll);
             return unsubListener;
         });
@@ -661,6 +628,7 @@ class ScrollAreaThumbImplState {
         onpointerdowncapture: this.onpointerdowncapture,
         onpointerup: this.onpointerup,
         [SCROLL_AREA_THUMB_ATTR]: "",
+        ...attachRef(this.opts.ref, (v) => (this.scrollbarState.scrollbarVis.thumbNode = v)),
     }));
 }
 class ScrollAreaCornerImplState {
@@ -682,7 +650,6 @@ class ScrollAreaCornerImplState {
             this.root.cornerWidth = width;
             this.#width = width;
         });
-        useRefById(opts);
     }
     props = $derived.by(() => ({
         id: this.opts.id.current,
@@ -695,6 +662,7 @@ class ScrollAreaCornerImplState {
             bottom: 0,
         },
         [SCROLL_AREA_CORNER_ATTR]: "",
+        ...attachRef(this.opts.ref),
     }));
 }
 export const ScrollAreaRootContext = new Context("ScrollArea.Root");
@@ -789,6 +757,7 @@ function isScrollingWithinScrollbarBounds(scrollPos, maxScrollPos) {
 function addUnlinkedScrollListener(node, handler) {
     let prevPosition = { left: node.scrollLeft, top: node.scrollTop };
     let rAF = 0;
+    const win = getWindow(node);
     (function loop() {
         const position = { left: node.scrollLeft, top: node.scrollTop };
         const isHorizontalScroll = prevPosition.left !== position.left;
@@ -796,7 +765,7 @@ function addUnlinkedScrollListener(node, handler) {
         if (isHorizontalScroll || isVerticalScroll)
             handler();
         prevPosition = position;
-        rAF = window.requestAnimationFrame(loop);
+        rAF = win.requestAnimationFrame(loop);
     })();
-    return () => window.cancelAnimationFrame(rAF);
+    return () => win.cancelAnimationFrame(rAF);
 }

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

@@ -3,12 +3,14 @@
 	import type { SelectContentStaticProps } from "../types.js";
 	import { useSelectContent } from "../select.svelte.js";
 	import PopperLayer from "../../utilities/popper-layer/popper-layer.svelte";
-	import { useId } from "../../../internal/use-id.js";
+	import { createId } from "../../../internal/create-id.js";
 	import { noop } from "../../../internal/noop.js";
 	import PopperLayerForceMount from "../../utilities/popper-layer/popper-layer-force-mount.svelte";
 
+	const uid = $props.id();
+
 	let {
-		id = useId(),
+		id = createId(uid),
 		ref = $bindable(null),
 		forceMount = false,
 		onInteractOutside = noop,
@@ -36,6 +38,7 @@
 	<PopperLayerForceMount
 		{...mergedProps}
 		{...contentState.popperProps}
+		ref={contentState.opts.ref}
 		isStatic
 		enabled={contentState.root.opts.open.current}
 		{id}
@@ -57,6 +60,7 @@
 	<PopperLayer
 		{...mergedProps}
 		{...contentState.popperProps}
+		ref={contentState.opts.ref}
 		isStatic
 		present={contentState.root.opts.open.current}
 		{id}

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

@@ -3,12 +3,14 @@
 	import type { SelectContentProps } from "../types.js";
 	import { useSelectContent } from "../select.svelte.js";
 	import PopperLayer from "../../utilities/popper-layer/popper-layer.svelte";
-	import { useId } from "../../../internal/use-id.js";
 	import { noop } from "../../../internal/noop.js";
 	import PopperLayerForceMount from "../../utilities/popper-layer/popper-layer-force-mount.svelte";
+	import { createId } from "../../../internal/create-id.js";
+
+	const uid = $props.id();
 
 	let {
-		id = useId(),
+		id = createId(uid),
 		ref = $bindable(null),
 		forceMount = false,
 		side = "bottom",
@@ -37,6 +39,7 @@
 	<PopperLayerForceMount
 		{...mergedProps}
 		{...contentState.popperProps}
+		ref={contentState.opts.ref}
 		{side}
 		enabled={contentState.root.opts.open.current}
 		{id}
@@ -60,6 +63,7 @@
 	<PopperLayer
 		{...mergedProps}
 		{...contentState.popperProps}
+		ref={contentState.opts.ref}
 		{side}
 		present={contentState.root.opts.open.current}
 		{id}

package/dist/bits/select/components/select-group-heading.svelte

@@ -2,10 +2,11 @@
 	import { box, mergeProps } from "svelte-toolbelt";
 	import type { SelectGroupHeadingProps } from "../types.js";
 	import { useSelectGroupHeading } from "../select.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),
 		child,
 		children,

package/dist/bits/select/components/select-group.svelte

@@ -2,10 +2,12 @@
 	import { box, mergeProps } from "svelte-toolbelt";
 	import { useSelectGroup } from "../select.svelte.js";
 	import type { SelectGroupProps } from "../types.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/select/components/select-item.svelte

@@ -2,12 +2,14 @@
 	import { box, mergeProps } from "svelte-toolbelt";
 	import { useSelectItem } from "../select.svelte.js";
 	import type { SelectItemProps } from "../types.js";
-	import { useId } from "../../../internal/use-id.js";
+	import { createId } from "../../../internal/create-id.js";
 	import { noop } from "../../../internal/noop.js";
 	import Mounted from "../../utilities/mounted.svelte";
 
+	const uid = $props.id();
+
 	let {
-		id = useId(),
+		id = createId(uid),
 		ref = $bindable(null),
 		value,
 		label = value,

package/dist/bits/select/components/select-scroll-down-button.svelte

@@ -2,11 +2,13 @@
 	import { box, mergeProps } from "svelte-toolbelt";
 	import type { SelectScrollDownButtonProps } from "../types.js";
 	import { useSelectScrollDownButton } from "../select.svelte.js";
-	import { useId } from "../../../internal/use-id.js";
+	import { createId } from "../../../internal/create-id.js";
 	import { Mounted } from "../../utilities/index.js";
 
+	const uid = $props.id();
+
 	let {
-		id = useId(),
+		id = createId(uid),
 		ref = $bindable(null),
 		delay = () => 50,
 		child,

package/dist/bits/select/components/select-scroll-up-button.svelte

@@ -2,11 +2,13 @@
 	import { box, mergeProps } from "svelte-toolbelt";
 	import type { SelectScrollUpButtonProps } from "../types.js";
 	import { useSelectScrollUpButton } from "../select.svelte.js";
-	import { useId } from "../../../internal/use-id.js";
+	import { createId } from "../../../internal/create-id.js";
 	import { Mounted } from "../../utilities/index.js";
 
+	const uid = $props.id();
+
 	let {
-		id = useId(),
+		id = createId(uid),
 		ref = $bindable(null),
 		delay = () => 50,
 		child,

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

@@ -2,11 +2,13 @@
 	import { box, mergeProps } from "svelte-toolbelt";
 	import { useSelectTrigger } from "../select.svelte.js";
 	import type { SelectTriggerProps } from "../types.js";
-	import { useId } from "../../../internal/use-id.js";
+	import { createId } from "../../../internal/create-id.js";
 	import { FloatingLayer } from "../../utilities/floating-layer/index.js";
 
+	const uid = $props.id();
+
 	let {
-		id = useId(),
+		id = createId(uid),
 		ref = $bindable(null),
 		child,
 		children,
@@ -25,7 +27,7 @@
 	const mergedProps = $derived(mergeProps(restProps, triggerState.props, { type }));
 </script>
 
-<FloatingLayer.Anchor {id}>
+<FloatingLayer.Anchor {id} ref={triggerState.opts.ref}>
 	{#if child}
 		{@render child({ props: mergedProps })}
 	{:else}

package/dist/bits/select/components/select-viewport.svelte

@@ -2,10 +2,12 @@
 	import { box, mergeProps } from "svelte-toolbelt";
 	import type { SelectViewportProps } from "../types.js";
 	import { useSelectViewport } from "../select.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/select/components/select.svelte

@@ -38,6 +38,8 @@
 		}
 	);
 
+	let inputValue = $state("");
+
 	const rootState = useSelectRoot({
 		type,
 		value: box.with(
@@ -63,6 +65,10 @@
 		isCombobox: false,
 		items: box.with(() => items),
 		allowDeselect: box.with(() => allowDeselect),
+		inputValue: box.with(
+			() => inputValue,
+			(v) => (inputValue = v)
+		),
 	});
 </script>
 
@@ -72,7 +78,7 @@
 
 {#if Array.isArray(rootState.opts.value.current)}
 	{#if rootState.opts.value.current.length}
-		{#each rootState.opts.value.current as item}
+		{#each rootState.opts.value.current as item (item)}
 			<SelectHiddenInput value={item} />
 		{/each}
 	{/if}

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

@@ -1,4 +1,5 @@
 import { Previous } from "runed";
+import { DOMContext } from "svelte-toolbelt";
 import type { Box, ReadableBoxedValues, WritableBoxedValues } from "../../internal/box.svelte.js";
 import type { BitsEvent, BitsFocusEvent, BitsKeyboardEvent, BitsMouseEvent, BitsPointerEvent, WithRefProps } from "../../internal/types.js";
 export declare const INTERACTION_KEYS: string[];
@@ -21,13 +22,13 @@ type SelectBaseRootStateProps = ReadableBoxedValues<{
     allowDeselect: boolean;
 }> & WritableBoxedValues<{
     open: boolean;
+    inputValue: string;
 }> & {
     isCombobox: boolean;
 };
 declare class SelectBaseRootState {
     readonly opts: SelectBaseRootStateProps;
     touchedInput: boolean;
-    inputValue: string;
     inputNode: HTMLElement | null;
     contentNode: HTMLElement | null;
     triggerNode: HTMLElement | null;
@@ -39,6 +40,7 @@ declare class SelectBaseRootState {
     isUsingKeyboard: boolean;
     isCombobox: boolean;
     bitsAttrs: SelectBitsAttrs;
+    domContext: DOMContext;
     constructor(opts: SelectBaseRootStateProps);
     setHighlightedNode(node: HTMLElement | null, initial?: boolean): void;
     getCandidateNodes(): HTMLElement[];
@@ -88,7 +90,6 @@ declare class SelectInputState {
     onkeydown(e: BitsKeyboardEvent): void;
     oninput(e: BitsEvent<Event, HTMLInputElement>): void;
     props: {
-        readonly [x: string]: string | true | ((e: BitsKeyboardEvent) => void) | ((e: BitsEvent<Event, HTMLInputElement>) => void) | undefined;
         readonly id: string;
         readonly role: "combobox";
         readonly disabled: true | undefined;
@@ -113,7 +114,6 @@ declare class SelectComboTriggerState {
      */
     onpointerdown(e: BitsPointerEvent): void;
     props: {
-        readonly [x: string]: string | true | ((e: BitsKeyboardEvent) => void) | ((e: BitsPointerEvent) => void) | undefined;
         readonly id: string;
         readonly disabled: true | undefined;
         readonly "aria-haspopup": "listbox";
@@ -134,7 +134,6 @@ declare class SelectTriggerState {
     onpointerdown(e: BitsPointerEvent): void;
     onpointerup(e: BitsPointerEvent): void;
     props: {
-        readonly [x: string]: string | true | ((e: BitsKeyboardEvent) => void) | ((e: BitsPointerEvent) => void) | undefined;
         readonly id: string;
         readonly disabled: true | undefined;
         readonly "aria-haspopup": "listbox";
@@ -159,6 +158,7 @@ declare class SelectContentState {
     readonly root: SelectRootState;
     viewportNode: HTMLElement | null;
     isPositioned: boolean;
+    domContext: DOMContext;
     constructor(opts: SelectContentStateProps, root: SelectRootState);
     onpointermove(_: BitsPointerEvent): void;
     onInteractOutside: (e: PointerEvent) => void;
@@ -169,13 +169,6 @@ declare class SelectContentState {
         open: boolean;
     };
     props: {
-        readonly [x: string]: string | ((_: BitsPointerEvent) => void) | {
-            readonly display: "flex";
-            readonly flexDirection: "column";
-            readonly outline: "none";
-            readonly boxSizing: "border-box";
-            readonly pointerEvents: "auto";
-        } | undefined;
         readonly id: string;
         readonly role: "listbox";
         readonly "aria-multiselectable": "true" | undefined;
@@ -228,7 +221,6 @@ declare class SelectItemState {
     onpointerup(e: BitsPointerEvent): void;
     onpointermove(e: BitsPointerEvent): void;
     props: {
-        readonly [x: string]: string | ((e: BitsPointerEvent) => void) | undefined;
         readonly id: string;
         readonly role: "option";
         readonly "aria-selected": "true" | undefined;
@@ -249,7 +241,6 @@ declare class SelectGroupState {
     labelNode: HTMLElement | null;
     constructor(opts: SelectGroupStateProps, root: SelectBaseRootState);
     props: {
-        readonly [x: string]: string | undefined;
         readonly id: string;
         readonly role: "group";
         readonly "aria-labelledby": string | undefined;
@@ -261,7 +252,6 @@ declare class SelectGroupHeadingState {
     readonly group: SelectGroupState;
     constructor(opts: SelectGroupHeadingStateProps, group: SelectGroupState);
     props: {
-        readonly [x: string]: string;
         readonly id: string;
     };
 }
@@ -290,11 +280,6 @@ declare class SelectViewportState {
     prevScrollTop: number;
     constructor(opts: SelectViewportStateProps, content: SelectContentState);
     props: {
-        readonly [x: string]: string | {
-            readonly position: "relative";
-            readonly flex: 1;
-            readonly overflow: "auto";
-        };
         readonly id: string;
         readonly role: "presentation";
         readonly style: {
@@ -397,6 +382,7 @@ type InitSelectProps = {
     allowDeselect: boolean;
 }> & WritableBoxedValues<{
     open: boolean;
+    inputValue: string;
 }> & {
     isCombobox: boolean;
 };