bits-ui 2.6.2 → 2.8.0

package/dist/bits/command/command.svelte.js

@@ -1,4 +1,4 @@
-import { afterSleep, afterTick, srOnlyStyles, attachRef } from "svelte-toolbelt";
+import { afterSleep, afterTick, srOnlyStyles, attachRef, } from "svelte-toolbelt";
 import { Context, watch } from "runed";
 import { findNextSibling, findPreviousSibling } from "./utils.js";
 import { kbd } from "../../internal/kbd.js";
@@ -47,7 +47,10 @@ const defaultState = {
         groups: new Set(),
     },
 };
-class CommandRootState {
+export class CommandRootState {
+    static create(opts) {
+        return CommandRootContext.set(new CommandRootState(opts));
+    }
     opts;
     #updateScheduled = false;
     #isInitialMount = true;
@@ -928,14 +931,17 @@ class CommandRootState {
 function itemIsDisabled(item) {
     return item.getAttribute("aria-disabled") === "true";
 }
-class CommandEmptyState {
+export class CommandEmptyState {
+    static create(opts) {
+        return new CommandEmptyState(opts, CommandRootContext.get());
+    }
     opts;
     root;
-    #isInitialRender = true;
     shouldRender = $derived.by(() => {
         return ((this.root._commandState.filtered.count === 0 && this.#isInitialRender === false) ||
             this.opts.forceMount.current);
     });
+    #isInitialRender = true;
     constructor(opts, root) {
         this.opts = opts;
         this.root = root;
@@ -950,11 +956,12 @@ class CommandEmptyState {
         ...attachRef(this.opts.ref),
     }));
 }
-class CommandGroupContainerState {
+export class CommandGroupContainerState {
+    static create(opts) {
+        return CommandGroupContainerContext.set(new CommandGroupContainerState(opts, CommandRootContext.get()));
+    }
     opts;
     root;
-    headingNode = $state(null);
-    trueValue = $state("");
     shouldRender = $derived.by(() => {
         if (this.opts.forceMount.current)
             return true;
@@ -964,6 +971,8 @@ class CommandGroupContainerState {
             return true;
         return this.root._commandState.filtered.groups.has(this.trueValue);
     });
+    headingNode = $state(null);
+    trueValue = $state("");
     constructor(opts, root) {
         this.opts = opts;
         this.root = root;
@@ -995,7 +1004,10 @@ class CommandGroupContainerState {
         ...attachRef(this.opts.ref),
     }));
 }
-class CommandGroupHeadingState {
+export class CommandGroupHeadingState {
+    static create(opts) {
+        return new CommandGroupHeadingState(opts, CommandGroupContainerContext.get());
+    }
     opts;
     group;
     constructor(opts, group) {
@@ -1008,7 +1020,10 @@ class CommandGroupHeadingState {
         ...attachRef(this.opts.ref, (v) => (this.group.headingNode = v)),
     }));
 }
-class CommandGroupItemsState {
+export class CommandGroupItemsState {
+    static create(opts) {
+        return new CommandGroupItemsState(opts, CommandGroupContainerContext.get());
+    }
     opts;
     group;
     constructor(opts, group) {
@@ -1023,7 +1038,10 @@ class CommandGroupItemsState {
         ...attachRef(this.opts.ref),
     }));
 }
-class CommandInputState {
+export class CommandInputState {
+    static create(opts) {
+        return new CommandInputState(opts, CommandRootContext.get());
+    }
     opts;
     root;
     #selectedItemId = $derived.by(() => {
@@ -1063,14 +1081,17 @@ class CommandInputState {
         ...attachRef(this.opts.ref, (v) => (this.root.inputNode = v)),
     }));
 }
-class CommandItemState {
+export class CommandItemState {
+    static create(opts) {
+        const group = CommandGroupContainerContext.getOr(null);
+        return new CommandItemState({ ...opts, group }, CommandRootContext.get());
+    }
     opts;
     root;
     #group = null;
     #trueForceMount = $derived.by(() => {
         return this.opts.forceMount.current || this.#group?.opts.forceMount.current === true;
     });
-    trueValue = $state("");
     shouldRender = $derived.by(() => {
         this.opts.ref.current;
         if (this.#trueForceMount ||
@@ -1084,6 +1105,7 @@ class CommandItemState {
         return currentScore > 0;
     });
     isSelected = $derived.by(() => this.root.opts.value.current === this.trueValue && this.trueValue !== "");
+    trueValue = $state("");
     constructor(opts, root) {
         this.opts = opts;
         this.root = root;
@@ -1145,7 +1167,10 @@ class CommandItemState {
         ...attachRef(this.opts.ref),
     }));
 }
-class CommandLoadingState {
+export class CommandLoadingState {
+    static create(opts) {
+        return new CommandLoadingState(opts);
+    }
     opts;
     constructor(opts) {
         this.opts = opts;
@@ -1161,7 +1186,10 @@ class CommandLoadingState {
         ...attachRef(this.opts.ref),
     }));
 }
-class CommandSeparatorState {
+export class CommandSeparatorState {
+    static create(opts) {
+        return new CommandSeparatorState(opts, CommandRootContext.get());
+    }
     opts;
     root;
     shouldRender = $derived.by(() => !this.root._commandState.search || this.opts.forceMount.current);
@@ -1177,7 +1205,10 @@ class CommandSeparatorState {
         ...attachRef(this.opts.ref),
     }));
 }
-class CommandListState {
+export class CommandListState {
+    static create(opts) {
+        return CommandListContext.set(new CommandListState(opts, CommandRootContext.get()));
+    }
     opts;
     root;
     constructor(opts, root) {
@@ -1192,7 +1223,10 @@ class CommandListState {
         ...attachRef(this.opts.ref),
     }));
 }
-class CommandLabelState {
+export class CommandLabelState {
+    static create(opts) {
+        return new CommandLabelState(opts, CommandRootContext.get());
+    }
     opts;
     root;
     constructor(opts, root) {
@@ -1207,15 +1241,16 @@ class CommandLabelState {
         ...attachRef(this.opts.ref, (v) => (this.root.labelNode = v)),
     }));
 }
-class CommandViewportState {
+export class CommandViewportState {
+    static create(opts) {
+        return new CommandViewportState(opts, CommandListContext.get());
+    }
     opts;
     list;
     constructor(opts, list) {
         this.opts = opts;
         this.list = list;
-        $effect(() => {
-            const node = this.opts.ref.current;
-            const listNode = this.list.opts.ref.current;
+        watch([() => this.opts.ref.current, () => this.list.opts.ref.current], ([node, listNode]) => {
             if (node === null || listNode === null)
                 return;
             let aF;
@@ -1238,40 +1273,3 @@ class CommandViewportState {
         ...attachRef(this.opts.ref, (v) => (this.list.root.viewportNode = v)),
     }));
 }
-export function useCommandRoot(props) {
-    return CommandRootContext.set(new CommandRootState(props));
-}
-export function useCommandEmpty(props) {
-    return new CommandEmptyState(props, CommandRootContext.get());
-}
-export function useCommandItem(props) {
-    const group = CommandGroupContainerContext.getOr(null);
-    return new CommandItemState({ ...props, group }, CommandRootContext.get());
-}
-export function useCommandGroupContainer(props) {
-    return CommandGroupContainerContext.set(new CommandGroupContainerState(props, CommandRootContext.get()));
-}
-export function useCommandGroupHeading(props) {
-    return new CommandGroupHeadingState(props, CommandGroupContainerContext.get());
-}
-export function useCommandGroupItems(props) {
-    return new CommandGroupItemsState(props, CommandGroupContainerContext.get());
-}
-export function useCommandInput(props) {
-    return new CommandInputState(props, CommandRootContext.get());
-}
-export function useCommandLoading(props) {
-    return new CommandLoadingState(props);
-}
-export function useCommandSeparator(props) {
-    return new CommandSeparatorState(props, CommandRootContext.get());
-}
-export function useCommandList(props) {
-    return CommandListContext.set(new CommandListState(props, CommandRootContext.get()));
-}
-export function useCommandViewport(props) {
-    return new CommandViewportState(props, CommandListContext.get());
-}
-export function useCommandLabel(props) {
-    return new CommandLabelState(props, CommandRootContext.get());
-}

package/dist/bits/command/components/_command-label.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { box } from "svelte-toolbelt";
-	import { useCommandLabel } from "../command.svelte.js";
+	import { CommandLabelState } from "../command.svelte.js";
 
 	import type { WithChildren } from "../../../internal/types.js";
 	import { createId } from "../../../internal/create-id.js";
@@ -15,7 +15,7 @@
 		...restProps
 	}: WithChildren<WithElementRef<BitsPrimitiveLabelAttributes>> = $props();
 
-	const labelState = useCommandLabel({
+	const labelState = CommandLabelState.create({
 		id: box.with(() => id),
 		ref: box.with(
 			() => ref,

package/dist/bits/command/components/command-empty.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { box, mergeProps } from "svelte-toolbelt";
 	import type { CommandEmptyProps } from "../types.js";
-	import { useCommandEmpty } from "../command.svelte.js";
+	import { CommandEmptyState } from "../command.svelte.js";
 	import { createId } from "../../../internal/create-id.js";
 
 	const uid = $props.id();
@@ -15,7 +15,7 @@
 		...restProps
 	}: CommandEmptyProps = $props();
 
-	const emptyState = useCommandEmpty({
+	const emptyState = CommandEmptyState.create({
 		id: box.with(() => id),
 		ref: box.with(
 			() => ref,

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

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

package/dist/bits/command/components/command-group-items.svelte

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

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

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { box, mergeProps } from "svelte-toolbelt";
 	import type { CommandGroupProps } from "../types.js";
-	import { useCommandGroupContainer } from "../command.svelte.js";
+	import { CommandGroupContainerState } from "../command.svelte.js";
 	import { createId } from "../../../internal/create-id.js";
 
 	const uid = $props.id();
@@ -16,7 +16,7 @@
 		...restProps
 	}: CommandGroupProps = $props();
 
-	const groupState = useCommandGroupContainer({
+	const groupState = CommandGroupContainerState.create({
 		id: box.with(() => id),
 		ref: box.with(
 			() => ref,

package/dist/bits/command/components/command-input.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { box, mergeProps } from "svelte-toolbelt";
 	import type { CommandInputProps } from "../types.js";
-	import { useCommandInput } from "../command.svelte.js";
+	import { CommandInputState } from "../command.svelte.js";
 	import { createId } from "../../../internal/create-id.js";
 
 	const uid = $props.id();
@@ -15,7 +15,7 @@
 		...restProps
 	}: CommandInputProps = $props();
 
-	const inputState = useCommandInput({
+	const inputState = CommandInputState.create({
 		id: box.with(() => id),
 		ref: box.with(
 			() => ref,

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

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { box, mergeProps } from "svelte-toolbelt";
 	import type { CommandItemProps } from "../types.js";
-	import { useCommandItem } from "../command.svelte.js";
+	import { CommandItemState } from "../command.svelte.js";
 	import { noop } from "../../../internal/noop.js";
 	import { createId } from "../../../internal/create-id.js";
 
@@ -20,7 +20,7 @@
 		...restProps
 	}: CommandItemProps = $props();
 
-	const itemState = useCommandItem({
+	const itemState = CommandItemState.create({
 		id: box.with(() => id),
 		ref: box.with(
 			() => ref,

package/dist/bits/command/components/command-link-item.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { box, mergeProps } from "svelte-toolbelt";
 	import type { CommandLinkItemProps } from "../types.js";
-	import { useCommandItem } from "../command.svelte.js";
+	import { CommandItemState } from "../command.svelte.js";
 	import { noop } from "../../../internal/noop.js";
 	import { createId } from "../../../internal/create-id.js";
 
@@ -20,7 +20,7 @@
 		...restProps
 	}: CommandLinkItemProps = $props();
 
-	const itemState = useCommandItem({
+	const itemState = CommandItemState.create({
 		id: box.with(() => id),
 		ref: box.with(
 			() => ref,

package/dist/bits/command/components/command-list.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { box, mergeProps } from "svelte-toolbelt";
 	import type { CommandListProps } from "../types.js";
-	import { useCommandList } from "../command.svelte.js";
+	import { CommandListState } from "../command.svelte.js";
 	import { createId } from "../../../internal/create-id.js";
 
 	const uid = $props.id();
@@ -15,7 +15,7 @@
 		...restProps
 	}: CommandListProps = $props();
 
-	const listState = useCommandList({
+	const listState = CommandListState.create({
 		id: box.with(() => id),
 		ref: box.with(
 			() => ref,

package/dist/bits/command/components/command-loading.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { box, mergeProps } from "svelte-toolbelt";
 	import type { CommandLoadingProps } from "../types.js";
-	import { useCommandLoading } from "../command.svelte.js";
+	import { CommandLoadingState } from "../command.svelte.js";
 	import { createId } from "../../../internal/create-id.js";
 
 	const uid = $props.id();
@@ -15,7 +15,7 @@
 		...restProps
 	}: CommandLoadingProps = $props();
 
-	const loadingState = useCommandLoading({
+	const loadingState = CommandLoadingState.create({
 		id: box.with(() => id),
 		ref: box.with(
 			() => ref,

package/dist/bits/command/components/command-separator.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { box, mergeProps } from "svelte-toolbelt";
 	import type { CommandSeparatorProps } from "../types.js";
-	import { useCommandSeparator } from "../command.svelte.js";
+	import { CommandSeparatorState } from "../command.svelte.js";
 	import { createId } from "../../../internal/create-id.js";
 
 	const uid = $props.id();
@@ -15,7 +15,7 @@
 		...restProps
 	}: CommandSeparatorProps = $props();
 
-	const separatorState = useCommandSeparator({
+	const separatorState = CommandSeparatorState.create({
 		id: box.with(() => id),
 		ref: box.with(
 			() => ref,

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

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

package/dist/bits/command/components/command.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { box, mergeProps } from "svelte-toolbelt";
-	import { useCommandRoot } from "../command.svelte.js";
+	import { CommandRootState } from "../command.svelte.js";
 	import type { CommandRootProps } from "../types.js";
 	import CommandLabel from "./_command-label.svelte";
 	import { noop } from "../../../internal/noop.js";
@@ -28,7 +28,7 @@
 		...restProps
 	}: CommandRootProps = $props();
 
-	const rootState = useCommandRoot({
+	const rootState = CommandRootState.create({
 		id: box.with(() => id),
 		ref: box.with(
 			() => ref,

package/dist/bits/context-menu/components/context-menu-content-static.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { box, mergeProps } from "svelte-toolbelt";
 	import type { ContextMenuContentStaticProps } from "../types.js";
-	import { CONTEXT_MENU_TRIGGER_ATTR, useMenuContent } from "../../menu/menu.svelte.js";
+	import { CONTEXT_MENU_TRIGGER_ATTR, MenuContentState } from "../../menu/menu.svelte.js";
 	import { useId } from "../../../internal/use-id.js";
 	import { noop } from "../../../internal/noop.js";
 	import PopperLayer from "../../utilities/popper-layer/popper-layer.svelte";
@@ -24,7 +24,7 @@
 		...restProps
 	}: ContextMenuContentStaticProps = $props();
 
-	const contentState = useMenuContent({
+	const contentState = MenuContentState.create({
 		id: box.with(() => id),
 		loop: box.with(() => loop),
 		ref: box.with(
@@ -102,7 +102,7 @@
 		side="right"
 		sideOffset={2}
 		align="start"
-		present={contentState.parentMenu.opts.open.current}
+		open={contentState.parentMenu.opts.open.current}
 		{preventScroll}
 		onInteractOutside={handleInteractOutside}
 		onEscapeKeydown={handleEscapeKeydown}

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

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { box, mergeProps } from "svelte-toolbelt";
 	import type { ContextMenuContentProps } from "../types.js";
-	import { CONTEXT_MENU_TRIGGER_ATTR, useMenuContent } from "../../menu/menu.svelte.js";
+	import { CONTEXT_MENU_TRIGGER_ATTR, MenuContentState } from "../../menu/menu.svelte.js";
 	import { useId } from "../../../internal/use-id.js";
 	import { noop } from "../../../internal/noop.js";
 	import PopperLayer from "../../utilities/popper-layer/popper-layer.svelte";
@@ -26,7 +26,7 @@
 		...restProps
 	}: ContextMenuContentProps = $props();
 
-	const contentState = useMenuContent({
+	const contentState = MenuContentState.create({
 		id: box.with(() => id),
 		loop: box.with(() => loop),
 		ref: box.with(
@@ -104,7 +104,7 @@
 		side="right"
 		sideOffset={2}
 		align="start"
-		present={contentState.parentMenu.opts.open.current}
+		open={contentState.parentMenu.opts.open.current}
 		{preventScroll}
 		onInteractOutside={handleInteractOutside}
 		onEscapeKeydown={handleEscapeKeydown}

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

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { box, mergeProps } from "svelte-toolbelt";
 	import type { ContextMenuTriggerProps } from "../types.js";
-	import { useMenuContextTrigger } from "../../menu/menu.svelte.js";
+	import { ContextMenuTriggerState } from "../../menu/menu.svelte.js";
 	import { useId } from "../../../internal/use-id.js";
 	import { FloatingLayer } from "../../utilities/floating-layer/index.js";
 
@@ -14,7 +14,7 @@
 		...restProps
 	}: ContextMenuTriggerProps = $props();
 
-	const triggerState = useMenuContextTrigger({
+	const triggerState = ContextMenuTriggerState.create({
 		id: box.with(() => id),
 		disabled: box.with(() => disabled),
 		ref: box.with(

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

@@ -3,16 +3,17 @@
 	import type { ContextMenuRootProps } from "../types.js";
 	import FloatingLayer from "../../utilities/floating-layer/components/floating-layer.svelte";
 	import { noop } from "../../../internal/noop.js";
-	import { useMenuMenu, useMenuRoot } from "../../menu/menu.svelte.js";
+	import { MenuMenuState, MenuRootState } from "../../menu/menu.svelte.js";
 
 	let {
 		open = $bindable(false),
 		dir = "ltr",
 		onOpenChange = noop,
+		onOpenChangeComplete = noop,
 		children,
 	}: ContextMenuRootProps = $props();
 
-	const root = useMenuRoot({
+	const root = MenuRootState.create({
 		variant: box.with(() => "context-menu"),
 		dir: box.with(() => dir),
 		onClose: () => {
@@ -21,15 +22,19 @@
 		},
 	});
 
-	useMenuMenu(root, {
-		open: box.with(
-			() => open,
-			(v) => {
-				open = v;
-				onOpenChange(v);
-			}
-		),
-	});
+	MenuMenuState.create(
+		{
+			open: box.with(
+				() => open,
+				(v) => {
+					open = v;
+					onOpenChange(v);
+				}
+			),
+			onOpenChangeComplete: box.with(() => onOpenChangeComplete),
+		},
+		root
+	);
 </script>
 
 <FloatingLayer>

package/dist/bits/date-field/components/date-field-hidden-input.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
-	import { useDateFieldHiddenInput } from "../date-field.svelte.js";
+	import { DateFieldHiddenInputState } from "../date-field.svelte.js";
 	import HiddenInput from "../../utilities/hidden-input.svelte";
 
-	const hiddenInputState = useDateFieldHiddenInput();
+	const hiddenInputState = DateFieldHiddenInputState.create();
 </script>
 
 {#if hiddenInputState.shouldRender}

package/dist/bits/date-field/components/date-field-input.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { box, mergeProps } from "svelte-toolbelt";
-	import { useDateFieldInput } from "../date-field.svelte.js";
+	import { DateFieldInputState } from "../date-field.svelte.js";
 	import type { DateFieldInputProps } from "../types.js";
 	import DateFieldHiddenInput from "./date-field-hidden-input.svelte";
 	import { createId } from "../../../internal/create-id.js";
@@ -16,7 +16,7 @@
 		...restProps
 	}: DateFieldInputProps = $props();
 
-	const inputState = useDateFieldInput({
+	const inputState = DateFieldInputState.create({
 		id: box.with(() => id),
 		ref: box.with(
 			() => ref,

package/dist/bits/date-field/components/date-field-label.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { box, mergeProps } from "svelte-toolbelt";
-	import { useDateFieldLabel } from "../date-field.svelte.js";
+	import { DateFieldLabelState } from "../date-field.svelte.js";
 	import type { DateFieldLabelProps } from "../types.js";
 	import { createId } from "../../../internal/create-id.js";
 
@@ -14,7 +14,7 @@
 		...restProps
 	}: DateFieldLabelProps = $props();
 
-	const labelState = useDateFieldLabel({
+	const labelState = DateFieldLabelState.create({
 		id: box.with(() => id),
 		ref: box.with(
 			() => ref,

package/dist/bits/date-field/components/date-field-segment.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { box, mergeProps } from "svelte-toolbelt";
-	import { useDateFieldSegment } from "../date-field.svelte.js";
+	import { DateFieldSegmentState } from "../date-field.svelte.js";
 	import type { DateFieldSegmentProps } from "../types.js";
 	import { createId } from "../../../internal/create-id.js";
 
@@ -15,7 +15,7 @@
 		...restProps
 	}: DateFieldSegmentProps = $props();
 
-	const segmentState = useDateFieldSegment(part, {
+	const segmentState = DateFieldSegmentState.create(part, {
 		id: box.with(() => id),
 		ref: box.with(
 			() => ref,