bits-ui 2.6.2 → 2.8.0

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

@@ -4,21 +4,29 @@
  * Credit to Jenna Smith (@jjenzz) for the original implementation.
  * Incredible thought must have went into solving all the intricacies of this component.
  */
-import { Context, useDebounce } from "runed";
+import { Context, useDebounce, watch } from "runed";
 import { untrack } from "svelte";
-import { box, executeCallbacks, attachRef, DOMContext, getWindow } 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";
 import { clamp } from "../../internal/clamp.js";
-import { useResizeObserver } from "../../internal/use-resize-observer.svelte.js";
 import { on } from "svelte/events";
 import { createBitsAttrs } from "../../internal/attrs.js";
+import { StateMachine } from "../../internal/state-machine.js";
+import { SvelteResizeObserver } from "../../internal/svelte-resize-observer.svelte.js";
 const scrollAreaAttrs = createBitsAttrs({
     component: "scroll-area",
     parts: ["root", "viewport", "corner", "thumb", "scrollbar"],
 });
-class ScrollAreaRootState {
+export const ScrollAreaRootContext = new Context("ScrollArea.Root");
+export const ScrollAreaScrollbarContext = new Context("ScrollArea.Scrollbar");
+export const ScrollAreaScrollbarVisibleContext = new Context("ScrollArea.ScrollbarVisible");
+export const ScrollAreaScrollbarAxisContext = new Context("ScrollArea.ScrollbarAxis");
+export const ScrollAreaScrollbarSharedContext = new Context("ScrollArea.ScrollbarShared");
+export class ScrollAreaRootState {
+    static create(opts) {
+        return ScrollAreaRootContext.set(new ScrollAreaRootState(opts));
+    }
     opts;
     scrollAreaNode = $state(null);
     viewportNode = $state(null);
@@ -46,7 +54,10 @@ class ScrollAreaRootState {
         ...attachRef(this.opts.ref, (v) => (this.scrollAreaNode = v)),
     }));
 }
-class ScrollAreaViewportState {
+export class ScrollAreaViewportState {
+    static create(opts) {
+        return new ScrollAreaViewportState(opts, ScrollAreaRootContext.get());
+    }
     opts;
     root;
     #contentId = box(useId());
@@ -78,7 +89,10 @@ class ScrollAreaViewportState {
         ...attachRef(this.#contentRef, (v) => (this.root.contentNode = v)),
     }));
 }
-class ScrollAreaScrollbarState {
+export class ScrollAreaScrollbarState {
+    static create(opts) {
+        return ScrollAreaScrollbarContext.set(new ScrollAreaScrollbarState(opts, ScrollAreaRootContext.get()));
+    }
     opts;
     root;
     isHorizontal = $derived.by(() => this.opts.orientation.current === "horizontal");
@@ -86,19 +100,26 @@ class ScrollAreaScrollbarState {
     constructor(opts, root) {
         this.opts = opts;
         this.root = root;
-        $effect(() => {
-            this.isHorizontal
-                ? (this.root.scrollbarXEnabled = true)
-                : (this.root.scrollbarYEnabled = true);
-            return () => {
-                this.isHorizontal
-                    ? (this.root.scrollbarXEnabled = false)
-                    : (this.root.scrollbarYEnabled = false);
-            };
+        watch(() => this.isHorizontal, (isHorizontal) => {
+            if (isHorizontal) {
+                this.root.scrollbarXEnabled = true;
+                return () => {
+                    this.root.scrollbarXEnabled = false;
+                };
+            }
+            else {
+                this.root.scrollbarYEnabled = true;
+                return () => {
+                    this.root.scrollbarYEnabled = false;
+                };
+            }
         });
     }
 }
-class ScrollAreaScrollbarHoverState {
+export class ScrollAreaScrollbarHoverState {
+    static create() {
+        return new ScrollAreaScrollbarHoverState(ScrollAreaScrollbarContext.get());
+    }
     scrollbar;
     root;
     isVisible = $state(false);
@@ -136,10 +157,13 @@ class ScrollAreaScrollbarHoverState {
         "data-state": this.isVisible ? "visible" : "hidden",
     }));
 }
-class ScrollAreaScrollbarScrollState {
+export class ScrollAreaScrollbarScrollState {
+    static create() {
+        return new ScrollAreaScrollbarScrollState(ScrollAreaScrollbarContext.get());
+    }
     scrollbar;
     root;
-    machine = useStateMachine("hidden", {
+    machine = new StateMachine("hidden", {
         hidden: {
             SCROLL: "scrolling",
         },
@@ -203,7 +227,10 @@ class ScrollAreaScrollbarScrollState {
         onpointerleave: this.onpointerleave,
     }));
 }
-class ScrollAreaScrollbarAutoState {
+export class ScrollAreaScrollbarAutoState {
+    static create() {
+        return new ScrollAreaScrollbarAutoState(ScrollAreaScrollbarContext.get());
+    }
     scrollbar;
     root;
     isVisible = $state(false);
@@ -218,14 +245,17 @@ class ScrollAreaScrollbarAutoState {
             const isOverflowY = viewportNode.offsetHeight < viewportNode.scrollHeight;
             this.isVisible = this.scrollbar.isHorizontal ? isOverflowX : isOverflowY;
         }, 10);
-        useResizeObserver(() => this.root.viewportNode, handleResize);
-        useResizeObserver(() => this.root.contentNode, handleResize);
+        new SvelteResizeObserver(() => this.root.viewportNode, handleResize);
+        new SvelteResizeObserver(() => this.root.contentNode, handleResize);
     }
     props = $derived.by(() => ({
         "data-state": this.isVisible ? "visible" : "hidden",
     }));
 }
-class ScrollAreaScrollbarVisibleState {
+export class ScrollAreaScrollbarVisibleState {
+    static create() {
+        return ScrollAreaScrollbarVisibleContext.set(new ScrollAreaScrollbarVisibleState(ScrollAreaScrollbarContext.get()));
+    }
     scrollbar;
     root;
     thumbNode = $state(null);
@@ -313,12 +343,15 @@ class ScrollAreaScrollbarVisibleState {
         this.root.viewportNode.scrollTop = this.getScrollPosition(pointerPos, this.root.opts.dir.current);
     }
 }
-class ScrollAreaScrollbarXState {
+export class ScrollAreaScrollbarXState {
+    static create(opts) {
+        return ScrollAreaScrollbarAxisContext.set(new ScrollAreaScrollbarXState(opts, ScrollAreaScrollbarVisibleContext.get()));
+    }
     opts;
     scrollbarVis;
     root;
-    computedStyle = $state();
     scrollbar;
+    computedStyle = $state();
     constructor(opts, scrollbarVis) {
         this.opts = opts;
         this.scrollbarVis = scrollbarVis;
@@ -391,7 +424,10 @@ class ScrollAreaScrollbarXState {
         ...attachRef(this.scrollbar.opts.ref, (v) => (this.root.scrollbarXNode = v)),
     }));
 }
-class ScrollAreaScrollbarYState {
+export class ScrollAreaScrollbarYState {
+    static create(opts) {
+        return ScrollAreaScrollbarAxisContext.set(new ScrollAreaScrollbarYState(opts, ScrollAreaScrollbarVisibleContext.get()));
+    }
     opts;
     scrollbarVis;
     root;
@@ -472,7 +508,10 @@ class ScrollAreaScrollbarYState {
         ...attachRef(this.scrollbar.opts.ref, (v) => (this.root.scrollbarYNode = v)),
     }));
 }
-class ScrollAreaScrollbarSharedState {
+export class ScrollAreaScrollbarSharedState {
+    static create() {
+        return ScrollAreaScrollbarSharedContext.set(new ScrollAreaScrollbarSharedState(ScrollAreaScrollbarAxisContext.get()));
+    }
     scrollbarState;
     root;
     scrollbarVis;
@@ -519,8 +558,8 @@ class ScrollAreaScrollbarSharedState {
         // $effect.pre(() => {
         // 	this.handleThumbPositionChange();
         // });
-        useResizeObserver(() => this.scrollbar.opts.ref.current, this.handleResize);
-        useResizeObserver(() => this.root.contentNode, this.handleResize);
+        new SvelteResizeObserver(() => this.scrollbar.opts.ref.current, this.handleResize);
+        new SvelteResizeObserver(() => this.root.contentNode, this.handleResize);
         this.onpointerdown = this.onpointerdown.bind(this);
         this.onpointermove = this.onpointermove.bind(this);
         this.onpointerup = this.onpointerup.bind(this);
@@ -571,7 +610,10 @@ class ScrollAreaScrollbarSharedState {
         onpointerup: this.onpointerup,
     }));
 }
-class ScrollAreaThumbImplState {
+export class ScrollAreaThumbImplState {
+    static create(opts) {
+        return new ScrollAreaThumbImplState(opts, ScrollAreaScrollbarSharedContext.get());
+    }
     opts;
     scrollbarState;
     #root;
@@ -631,7 +673,10 @@ class ScrollAreaThumbImplState {
         ...attachRef(this.opts.ref, (v) => (this.scrollbarState.scrollbarVis.thumbNode = v)),
     }));
 }
-class ScrollAreaCornerImplState {
+export class ScrollAreaCornerImplState {
+    static create(opts) {
+        return new ScrollAreaCornerImplState(opts, ScrollAreaRootContext.get());
+    }
     opts;
     root;
     #width = $state(0);
@@ -640,12 +685,12 @@ class ScrollAreaCornerImplState {
     constructor(opts, root) {
         this.opts = opts;
         this.root = root;
-        useResizeObserver(() => this.root.scrollbarXNode, () => {
+        new SvelteResizeObserver(() => this.root.scrollbarXNode, () => {
             const height = this.root.scrollbarXNode?.offsetHeight || 0;
             this.root.cornerHeight = height;
             this.#height = height;
         });
-        useResizeObserver(() => this.root.scrollbarYNode, () => {
+        new SvelteResizeObserver(() => this.root.scrollbarYNode, () => {
             const width = this.root.scrollbarYNode?.offsetWidth || 0;
             this.root.cornerWidth = width;
             this.#width = width;
@@ -665,47 +710,6 @@ class ScrollAreaCornerImplState {
         ...attachRef(this.opts.ref),
     }));
 }
-export const ScrollAreaRootContext = new Context("ScrollArea.Root");
-export const ScrollAreaScrollbarContext = new Context("ScrollArea.Scrollbar");
-export const ScrollAreaScrollbarVisibleContext = new Context("ScrollArea.ScrollbarVisible");
-export const ScrollAreaScrollbarAxisContext = new Context("ScrollArea.ScrollbarAxis");
-export const ScrollAreaScrollbarSharedContext = new Context("ScrollArea.ScrollbarShared");
-export function useScrollAreaRoot(props) {
-    return ScrollAreaRootContext.set(new ScrollAreaRootState(props));
-}
-export function useScrollAreaViewport(props) {
-    return new ScrollAreaViewportState(props, ScrollAreaRootContext.get());
-}
-export function useScrollAreaScrollbar(props) {
-    return ScrollAreaScrollbarContext.set(new ScrollAreaScrollbarState(props, ScrollAreaRootContext.get()));
-}
-export function useScrollAreaScrollbarVisible() {
-    return ScrollAreaScrollbarVisibleContext.set(new ScrollAreaScrollbarVisibleState(ScrollAreaScrollbarContext.get()));
-}
-export function useScrollAreaScrollbarAuto() {
-    return new ScrollAreaScrollbarAutoState(ScrollAreaScrollbarContext.get());
-}
-export function useScrollAreaScrollbarScroll() {
-    return new ScrollAreaScrollbarScrollState(ScrollAreaScrollbarContext.get());
-}
-export function useScrollAreaScrollbarHover() {
-    return new ScrollAreaScrollbarHoverState(ScrollAreaScrollbarContext.get());
-}
-export function useScrollAreaScrollbarX(props) {
-    return ScrollAreaScrollbarAxisContext.set(new ScrollAreaScrollbarXState(props, ScrollAreaScrollbarVisibleContext.get()));
-}
-export function useScrollAreaScrollbarY(props) {
-    return ScrollAreaScrollbarAxisContext.set(new ScrollAreaScrollbarYState(props, ScrollAreaScrollbarVisibleContext.get()));
-}
-export function useScrollAreaScrollbarShared() {
-    return ScrollAreaScrollbarSharedContext.set(new ScrollAreaScrollbarSharedState(ScrollAreaScrollbarAxisContext.get()));
-}
-export function useScrollAreaThumb(props) {
-    return new ScrollAreaThumbImplState(props, ScrollAreaScrollbarSharedContext.get());
-}
-export function useScrollAreaCorner(props) {
-    return new ScrollAreaCornerImplState(props, ScrollAreaRootContext.get());
-}
 function toInt(value) {
     return value ? Number.parseInt(value, 10) : 0;
 }

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

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { box, mergeProps } from "svelte-toolbelt";
 	import type { SelectContentStaticProps } from "../types.js";
-	import { useSelectContent } from "../select.svelte.js";
+	import { SelectContentState } from "../select.svelte.js";
 	import PopperLayer from "../../utilities/popper-layer/popper-layer.svelte";
 	import { createId } from "../../../internal/create-id.js";
 	import { noop } from "../../../internal/noop.js";
@@ -21,7 +21,7 @@
 		...restProps
 	}: SelectContentStaticProps = $props();
 
-	const contentState = useSelectContent({
+	const contentState = SelectContentState.create({
 		id: box.with(() => id),
 		ref: box.with(
 			() => ref,
@@ -62,7 +62,7 @@
 		{...contentState.popperProps}
 		ref={contentState.opts.ref}
 		isStatic
-		present={contentState.root.opts.open.current}
+		open={contentState.root.opts.open.current}
 		{id}
 		{preventScroll}
 		forceMount={false}

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

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { box, mergeProps } from "svelte-toolbelt";
 	import type { SelectContentProps } from "../types.js";
-	import { useSelectContent } from "../select.svelte.js";
+	import { SelectContentState } from "../select.svelte.js";
 	import PopperLayer from "../../utilities/popper-layer/popper-layer.svelte";
 	import { noop } from "../../../internal/noop.js";
 	import PopperLayerForceMount from "../../utilities/popper-layer/popper-layer-force-mount.svelte";
@@ -22,7 +22,7 @@
 		...restProps
 	}: SelectContentProps = $props();
 
-	const contentState = useSelectContent({
+	const contentState = SelectContentState.create({
 		id: box.with(() => id),
 		ref: box.with(
 			() => ref,
@@ -65,7 +65,7 @@
 		{...contentState.popperProps}
 		ref={contentState.opts.ref}
 		{side}
-		present={contentState.root.opts.open.current}
+		open={contentState.root.opts.open.current}
 		{id}
 		{preventScroll}
 		forceMount={false}

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

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { box, mergeProps } from "svelte-toolbelt";
 	import type { SelectGroupHeadingProps } from "../types.js";
-	import { useSelectGroupHeading } from "../select.svelte.js";
+	import { SelectGroupHeadingState } from "../select.svelte.js";
 	import { createId } from "../../../internal/create-id.js";
 
 	const uid = $props.id();
@@ -13,7 +13,7 @@
 		...restProps
 	}: SelectGroupHeadingProps = $props();
 
-	const groupHeadingState = useSelectGroupHeading({
+	const groupHeadingState = SelectGroupHeadingState.create({
 		id: box.with(() => id),
 		ref: box.with(
 			() => ref,

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

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { box, mergeProps } from "svelte-toolbelt";
-	import { useSelectGroup } from "../select.svelte.js";
+	import { SelectGroupState } from "../select.svelte.js";
 	import type { SelectGroupProps } from "../types.js";
 	import { createId } from "../../../internal/create-id.js";
 
@@ -14,7 +14,7 @@
 		...restProps
 	}: SelectGroupProps = $props();
 
-	const groupState = useSelectGroup({
+	const groupState = SelectGroupState.create({
 		id: box.with(() => id),
 		ref: box.with(
 			() => ref,

package/dist/bits/select/components/select-hidden-input.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { box } from "svelte-toolbelt";
-	import { useSelectHiddenInput } from "../select.svelte.js";
+	import { SelectHiddenInputState } from "../select.svelte.js";
 	import type { HTMLInputAttributes } from "svelte/elements";
 	import HiddenInput from "../../utilities/hidden-input.svelte";
 
@@ -9,7 +9,7 @@
 		autocomplete,
 	}: { value?: string } & Omit<HTMLInputAttributes, "value"> = $props();
 
-	const hiddenInputState = useSelectHiddenInput({
+	const hiddenInputState = SelectHiddenInputState.create({
 		value: box.with(() => value),
 	});
 </script>

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

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { box, mergeProps } from "svelte-toolbelt";
-	import { useSelectItem } from "../select.svelte.js";
+	import { SelectItemState } from "../select.svelte.js";
 	import type { SelectItemProps } from "../types.js";
 	import { createId } from "../../../internal/create-id.js";
 	import { noop } from "../../../internal/noop.js";
@@ -21,7 +21,7 @@
 		...restProps
 	}: SelectItemProps = $props();
 
-	const itemState = useSelectItem({
+	const itemState = SelectItemState.create({
 		id: box.with(() => id),
 		ref: box.with(
 			() => ref,

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

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { box, mergeProps } from "svelte-toolbelt";
 	import type { SelectScrollDownButtonProps } from "../types.js";
-	import { useSelectScrollDownButton } from "../select.svelte.js";
+	import { SelectScrollDownButtonState } from "../select.svelte.js";
 	import { createId } from "../../../internal/create-id.js";
 	import { Mounted } from "../../utilities/index.js";
 
@@ -16,7 +16,7 @@
 		...restProps
 	}: SelectScrollDownButtonProps = $props();
 
-	const scrollButtonState = useSelectScrollDownButton({
+	const scrollButtonState = SelectScrollDownButtonState.create({
 		id: box.with(() => id),
 		ref: box.with(
 			() => ref,

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

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { box, mergeProps } from "svelte-toolbelt";
 	import type { SelectScrollUpButtonProps } from "../types.js";
-	import { useSelectScrollUpButton } from "../select.svelte.js";
+	import { SelectScrollUpButtonState } from "../select.svelte.js";
 	import { createId } from "../../../internal/create-id.js";
 	import { Mounted } from "../../utilities/index.js";
 
@@ -16,7 +16,7 @@
 		...restProps
 	}: SelectScrollUpButtonProps = $props();
 
-	const scrollButtonState = useSelectScrollUpButton({
+	const scrollButtonState = SelectScrollUpButtonState.create({
 		id: box.with(() => id),
 		ref: box.with(
 			() => ref,

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

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { box, mergeProps } from "svelte-toolbelt";
-	import { useSelectTrigger } from "../select.svelte.js";
+	import { SelectTriggerState } from "../select.svelte.js";
 	import type { SelectTriggerProps } from "../types.js";
 	import { createId } from "../../../internal/create-id.js";
 	import { FloatingLayer } from "../../utilities/floating-layer/index.js";
@@ -16,7 +16,7 @@
 		...restProps
 	}: SelectTriggerProps = $props();
 
-	const triggerState = useSelectTrigger({
+	const triggerState = SelectTriggerState.create({
 		id: box.with(() => id),
 		ref: box.with(
 			() => ref,

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

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { box, mergeProps } from "svelte-toolbelt";
 	import type { SelectViewportProps } from "../types.js";
-	import { useSelectViewport } from "../select.svelte.js";
+	import { SelectViewportState } from "../select.svelte.js";
 	import { createId } from "../../../internal/create-id.js";
 
 	const uid = $props.id();
@@ -14,7 +14,7 @@
 		...restProps
 	}: SelectViewportProps = $props();
 
-	const viewportState = useSelectViewport({
+	const viewportState = SelectViewportState.create({
 		id: box.with(() => id),
 		ref: box.with(
 			() => ref,

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

@@ -2,7 +2,7 @@
 	import FloatingLayer from "../../utilities/floating-layer/components/floating-layer.svelte";
 	import { noop } from "../../../internal/noop.js";
 	import { type WritableBox, box } from "svelte-toolbelt";
-	import { useSelectRoot } from "../select.svelte.js";
+	import { SelectRootState } from "../select.svelte.js";
 	import type { SelectRootProps } from "../types.js";
 	import SelectHiddenInput from "./select-hidden-input.svelte";
 	import { watch } from "runed";
@@ -15,6 +15,7 @@
 		type,
 		open = $bindable(false),
 		onOpenChange = noop,
+		onOpenChangeComplete = noop,
 		loop = false,
 		scrollAlignment = "nearest",
 		required = false,
@@ -41,7 +42,7 @@
 
 	let inputValue = $state("");
 
-	const rootState = useSelectRoot({
+	const rootState = SelectRootState.create({
 		type,
 		value: box.with(
 			() => value!,
@@ -70,6 +71,7 @@
 			() => inputValue,
 			(v) => (inputValue = v)
 		),
+		onOpenChangeComplete: box.with(() => onOpenChangeComplete),
 	});
 </script>