bits-ui 2.6.2 → 2.8.0

package/dist/bits/collapsible/collapsible.svelte.js

@@ -1,17 +1,29 @@
-import { afterTick, attachRef } from "svelte-toolbelt";
+import { afterTick, attachRef, box, } from "svelte-toolbelt";
 import { Context, watch } from "runed";
 import { createBitsAttrs, getAriaExpanded, getDataDisabled, getDataOpenClosed, } from "../../internal/attrs.js";
 import { kbd } from "../../internal/kbd.js";
+import { OpenChangeComplete } from "../../internal/open-change-complete.js";
 const collapsibleAttrs = createBitsAttrs({
     component: "collapsible",
     parts: ["root", "content", "trigger"],
 });
-class CollapsibleRootState {
+const CollapsibleRootContext = new Context("Collapsible.Root");
+export class CollapsibleRootState {
+    static create(opts) {
+        return CollapsibleRootContext.set(new CollapsibleRootState(opts));
+    }
     opts;
     contentNode = $state(null);
     constructor(opts) {
         this.opts = opts;
         this.toggleOpen = this.toggleOpen.bind(this);
+        new OpenChangeComplete({
+            ref: box.with(() => this.contentNode),
+            open: this.opts.open,
+            onComplete: () => {
+                this.opts.onOpenChangeComplete.current(this.opts.open.current);
+            },
+        });
     }
     toggleOpen() {
         this.opts.open.current = !this.opts.open.current;
@@ -24,14 +36,17 @@ class CollapsibleRootState {
         ...attachRef(this.opts.ref),
     }));
 }
-class CollapsibleContentState {
+export class CollapsibleContentState {
+    static create(opts) {
+        return new CollapsibleContentState(opts, CollapsibleRootContext.get());
+    }
     opts;
     root;
+    present = $derived.by(() => this.opts.forceMount.current || this.root.opts.open.current);
     #originalStyles;
     #isMountAnimationPrevented = $state(false);
     #width = $state(0);
     #height = $state(0);
-    present = $derived.by(() => this.opts.forceMount.current || this.root.opts.open.current);
     constructor(opts, root) {
         this.opts = opts;
         this.root = root;
@@ -89,7 +104,10 @@ class CollapsibleContentState {
         ...attachRef(this.opts.ref, (v) => (this.root.contentNode = v)),
     }));
 }
-class CollapsibleTriggerState {
+export class CollapsibleTriggerState {
+    static create(opts) {
+        return new CollapsibleTriggerState(opts, CollapsibleRootContext.get());
+    }
     opts;
     root;
     #isDisabled = $derived.by(() => this.opts.disabled.current || this.root.opts.disabled.current);
@@ -129,13 +147,3 @@ class CollapsibleTriggerState {
         ...attachRef(this.opts.ref),
     }));
 }
-const CollapsibleRootContext = new Context("Collapsible.Root");
-export function useCollapsibleRoot(props) {
-    return CollapsibleRootContext.set(new CollapsibleRootState(props));
-}
-export function useCollapsibleTrigger(props) {
-    return new CollapsibleTriggerState(props, CollapsibleRootContext.get());
-}
-export function useCollapsibleContent(props) {
-    return new CollapsibleContentState(props, CollapsibleRootContext.get());
-}

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

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { box, mergeProps } from "svelte-toolbelt";
-	import { useCollapsibleContent } from "../collapsible.svelte.js";
+	import { CollapsibleContentState } from "../collapsible.svelte.js";
 	import type { CollapsibleContentProps } from "../types.js";
 	import { PresenceLayer } from "../../utilities/presence-layer/index.js";
 	import { createId } from "../../../internal/create-id.js";
@@ -14,9 +14,9 @@
 		children,
 		id = createId(uid),
 		...restProps
-	}: CollapsibleContentProps & { forceMount?: boolean } = $props();
+	}: CollapsibleContentProps = $props();
 
-	const contentState = useCollapsibleContent({
+	const contentState = CollapsibleContentState.create({
 		id: box.with(() => id),
 		forceMount: box.with(() => forceMount),
 		ref: box.with(
@@ -26,10 +26,10 @@
 	});
 </script>
 
-<PresenceLayer forceMount={true} present={contentState.present} ref={contentState.opts.ref}>
+<PresenceLayer forceMount={true} open={contentState.present} ref={contentState.opts.ref}>
 	{#snippet presence({ present })}
 		{@const mergedProps = mergeProps(restProps, contentState.props, {
-			hidden: forceMount ? undefined : !present.current,
+			hidden: forceMount ? undefined : !present,
 		})}
 		{#if child}
 			{@render child({

package/dist/bits/collapsible/components/collapsible-content.svelte.d.ts

@@ -1,7 +1,4 @@
 import type { CollapsibleContentProps } from "../types.js";
-type $$ComponentProps = CollapsibleContentProps & {
-    forceMount?: boolean;
-};
-declare const CollapsibleContent: import("svelte").Component<$$ComponentProps, {}, "ref">;
+declare const CollapsibleContent: import("svelte").Component<CollapsibleContentProps, {}, "ref">;
 type CollapsibleContent = ReturnType<typeof CollapsibleContent>;
 export default CollapsibleContent;

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

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

package/dist/bits/collapsible/components/collapsible.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { box, mergeProps } from "svelte-toolbelt";
 	import type { CollapsibleRootProps } from "../types.js";
-	import { useCollapsibleRoot } from "../collapsible.svelte.js";
+	import { CollapsibleRootState } from "../collapsible.svelte.js";
 	import { createId } from "../../../internal/create-id.js";
 	import { noop } from "../../../internal/noop.js";
 
@@ -15,10 +15,11 @@
 		open = $bindable(false),
 		disabled = false,
 		onOpenChange = noop,
+		onOpenChangeComplete = noop,
 		...restProps
 	}: CollapsibleRootProps = $props();
 
-	const rootState = useCollapsibleRoot({
+	const rootState = CollapsibleRootState.create({
 		open: box.with(
 			() => open,
 			(v) => {
@@ -32,6 +33,7 @@
 			() => ref,
 			(v) => (ref = v)
 		),
+		onOpenChangeComplete: box.with(() => onOpenChangeComplete),
 	});
 
 	const mergedProps = $derived(mergeProps(restProps, rootState.props));

package/dist/bits/collapsible/types.d.ts

@@ -17,6 +17,10 @@ export type CollapsibleRootPropsWithoutHTML = WithChild<{
      * A callback function called when the open state changes.
      */
     onOpenChange?: OnChangeFn<boolean>;
+    /**
+     * A callback function called when the open state changes complete.
+     */
+    onOpenChangeComplete?: OnChangeFn<boolean>;
 }>;
 export type CollapsibleRootProps = CollapsibleRootPropsWithoutHTML & Without<BitsPrimitiveDivAttributes, CollapsibleRootPropsWithoutHTML>;
 export type CollapsibleContentSnippetProps = {

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

@@ -3,7 +3,7 @@
 	import type { ComboboxInputProps } from "../types.js";
 	import { useId } from "../../../internal/use-id.js";
 	import { FloatingLayer } from "../../utilities/floating-layer/index.js";
-	import { useSelectInput } from "../../select/select.svelte.js";
+	import { SelectInputState } from "../../select/select.svelte.js";
 
 	let {
 		id = useId(),
@@ -14,7 +14,7 @@
 		...restProps
 	}: ComboboxInputProps = $props();
 
-	const inputState = useSelectInput({
+	const inputState = SelectInputState.create({
 		id: box.with(() => id),
 		ref: box.with(
 			() => ref,

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

@@ -2,7 +2,7 @@
 	import { box, mergeProps } from "svelte-toolbelt";
 	import type { ComboboxTriggerProps } from "../types.js";
 	import { useId } from "../../../internal/use-id.js";
-	import { useSelectComboTrigger } from "../../select/select.svelte.js";
+	import { SelectComboTriggerState } from "../../select/select.svelte.js";
 
 	let {
 		id = useId(),
@@ -13,7 +13,7 @@
 		...restProps
 	}: ComboboxTriggerProps = $props();
 
-	const triggerState = useSelectComboTrigger({
+	const triggerState = SelectComboTriggerState.create({
 		id: box.with(() => id),
 		ref: box.with(
 			() => ref,

package/dist/bits/combobox/components/combobox.svelte

@@ -3,7 +3,7 @@
 	import type { ComboboxRootProps } from "../types.js";
 	import { noop } from "../../../internal/noop.js";
 	import FloatingLayer from "../../utilities/floating-layer/components/floating-layer.svelte";
-	import { useSelectRoot } from "../../select/select.svelte.js";
+	import { SelectRootState } from "../../select/select.svelte.js";
 	import ListboxHiddenInput from "../../select/components/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,
@@ -37,7 +38,7 @@
 		}
 	);
 
-	const rootState = useSelectRoot({
+	const rootState = SelectRootState.create({
 		type,
 		value: box.with(
 			() => value!,
@@ -66,6 +67,7 @@
 			() => inputValue,
 			(v) => (inputValue = v)
 		),
+		onOpenChangeComplete: box.with(() => onOpenChangeComplete),
 	});
 </script>
 

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

@@ -1,13 +1,13 @@
+import { type WritableBoxedValues, type ReadableBoxedValues } from "svelte-toolbelt";
 import type { CommandState } from "./types.js";
-import type { BitsKeyboardEvent, BitsMouseEvent, BitsPointerEvent, WithRefProps } from "../../internal/types.js";
-import type { ReadableBoxedValues, WritableBoxedValues } from "../../internal/box.svelte.js";
-type GridItem = {
+import type { BitsKeyboardEvent, BitsMouseEvent, BitsPointerEvent, WithRefOpts } from "../../internal/types.js";
+interface GridItem {
     index: number;
     firstRowOfGroup: boolean;
     ref: HTMLElement;
-};
+}
 type ItemsGrid = GridItem[][];
-type CommandRootStateProps = WithRefProps<ReadableBoxedValues<{
+interface CommandRootStateOpts extends WithRefOpts, ReadableBoxedValues<{
     filter: (value: string, search: string, keywords?: string[]) => number;
     shouldFilter: boolean;
     loop: boolean;
@@ -16,12 +16,14 @@ type CommandRootStateProps = WithRefProps<ReadableBoxedValues<{
     disablePointerSelection: boolean;
     disableInitialScroll: boolean;
     onStateChange?: (state: Readonly<CommandState>) => void;
-}> & WritableBoxedValues<{
+}>, WritableBoxedValues<{
     value: string;
-}>>;
-declare class CommandRootState {
+}> {
+}
+export declare class CommandRootState {
     #private;
-    readonly opts: CommandRootStateProps;
+    static create(opts: CommandRootStateOpts): CommandRootState;
+    readonly opts: CommandRootStateOpts;
     sortAfterTick: boolean;
     sortAndFilterAfterTick: boolean;
     allItems: Set<string>;
@@ -37,7 +39,7 @@ declare class CommandRootState {
     commandState: CommandState;
     _commandState: CommandState;
     setState<K extends keyof CommandState>(key: K, value: CommandState[K], preventScroll?: boolean): void;
-    constructor(opts: CommandRootStateProps);
+    constructor(opts: CommandRootStateOpts);
     /**
      * Sets current value and triggers re-render if cleared.
      *
@@ -151,69 +153,79 @@ declare class CommandRootState {
         readonly onkeydown: (e: BitsKeyboardEvent) => void;
     };
 }
-type CommandEmptyStateProps = WithRefProps & ReadableBoxedValues<{
+interface CommandEmptyStateOpts extends WithRefOpts, ReadableBoxedValues<{
     forceMount: boolean;
-}>;
-declare class CommandEmptyState {
+}> {
+}
+export declare class CommandEmptyState {
     #private;
-    readonly opts: CommandEmptyStateProps;
+    static create(opts: CommandEmptyStateOpts): CommandEmptyState;
+    readonly opts: CommandEmptyStateOpts;
     readonly root: CommandRootState;
-    shouldRender: boolean;
-    constructor(opts: CommandEmptyStateProps, root: CommandRootState);
-    props: {
+    readonly shouldRender: boolean;
+    constructor(opts: CommandEmptyStateOpts, root: CommandRootState);
+    readonly props: {
         readonly id: string;
         readonly role: "presentation";
     };
 }
-type CommandGroupContainerStateProps = WithRefProps<ReadableBoxedValues<{
+interface CommandGroupContainerStateOpts extends WithRefOpts, ReadableBoxedValues<{
     value: string;
     forceMount: boolean;
-}>>;
-declare class CommandGroupContainerState {
-    readonly opts: CommandGroupContainerStateProps;
+}> {
+}
+export declare class CommandGroupContainerState {
+    static create(opts: CommandGroupContainerStateOpts): CommandGroupContainerState;
+    readonly opts: CommandGroupContainerStateOpts;
     readonly root: CommandRootState;
+    readonly shouldRender: boolean;
     headingNode: HTMLElement | null;
     trueValue: string;
-    shouldRender: boolean;
-    constructor(opts: CommandGroupContainerStateProps, root: CommandRootState);
-    props: {
+    constructor(opts: CommandGroupContainerStateOpts, root: CommandRootState);
+    readonly props: {
         readonly id: string;
         readonly role: "presentation";
         readonly hidden: true | undefined;
         readonly "data-value": string;
     };
 }
-type CommandGroupHeadingStateProps = WithRefProps;
-declare class CommandGroupHeadingState {
-    readonly opts: CommandGroupHeadingStateProps;
+interface CommandGroupHeadingStateOpts extends WithRefOpts {
+}
+export declare class CommandGroupHeadingState {
+    static create(opts: CommandGroupHeadingStateOpts): CommandGroupHeadingState;
+    readonly opts: CommandGroupHeadingStateOpts;
     readonly group: CommandGroupContainerState;
-    constructor(opts: CommandGroupHeadingStateProps, group: CommandGroupContainerState);
-    props: {
+    constructor(opts: CommandGroupHeadingStateOpts, group: CommandGroupContainerState);
+    readonly props: {
         readonly id: string;
     };
 }
-type CommandGroupItemsStateProps = WithRefProps;
-declare class CommandGroupItemsState {
-    readonly opts: CommandGroupItemsStateProps;
+interface CommandGroupItemsStateOpts extends WithRefOpts {
+}
+export declare class CommandGroupItemsState {
+    static create(opts: CommandGroupItemsStateOpts): CommandGroupItemsState;
+    readonly opts: CommandGroupItemsStateOpts;
     readonly group: CommandGroupContainerState;
-    constructor(opts: CommandGroupItemsStateProps, group: CommandGroupContainerState);
-    props: {
+    constructor(opts: CommandGroupItemsStateOpts, group: CommandGroupContainerState);
+    readonly props: {
         readonly id: string;
         readonly role: "group";
         readonly "aria-labelledby": string | undefined;
     };
 }
-type CommandInputStateProps = WithRefProps<WritableBoxedValues<{
+interface CommandInputStateOpts extends WithRefOpts, WritableBoxedValues<{
     value: string;
-}> & ReadableBoxedValues<{
+}>, ReadableBoxedValues<{
     autofocus: boolean;
-}>>;
-declare class CommandInputState {
+}> {
+}
+export declare class CommandInputState {
     #private;
-    readonly opts: CommandInputStateProps;
+    static create(opts: CommandInputStateOpts): CommandInputState;
+    readonly opts: CommandInputStateOpts;
     readonly root: CommandRootState;
-    constructor(opts: CommandInputStateProps, root: CommandRootState);
-    props: {
+    constructor(opts: CommandInputStateOpts, root: CommandRootState);
+    readonly props: {
         readonly id: string;
         readonly type: "text";
         readonly autocomplete: "off";
@@ -227,26 +239,27 @@ declare class CommandInputState {
         readonly "aria-activedescendant": string | undefined;
     };
 }
-type CommandItemStateProps = WithRefProps<ReadableBoxedValues<{
+interface CommandItemStateOpts extends WithRefOpts, ReadableBoxedValues<{
     value: string;
     disabled: boolean;
     onSelect: () => void;
     forceMount: boolean;
     keywords: string[];
-}> & {
+}> {
     group: CommandGroupContainerState | null;
-}>;
-declare class CommandItemState {
+}
+export declare class CommandItemState {
     #private;
-    readonly opts: CommandItemStateProps;
+    static create(opts: Omit<CommandItemStateOpts, "group">): CommandItemState;
+    readonly opts: CommandItemStateOpts;
     readonly root: CommandRootState;
+    readonly shouldRender: boolean;
+    readonly isSelected: boolean;
     trueValue: string;
-    shouldRender: boolean;
-    isSelected: boolean;
-    constructor(opts: CommandItemStateProps, root: CommandRootState);
+    constructor(opts: CommandItemStateOpts, root: CommandRootState);
     onpointermove(_: BitsPointerEvent): void;
     onclick(_: BitsMouseEvent): void;
-    props: {
+    readonly props: {
         readonly id: string;
         readonly "aria-disabled": "true" | "false";
         readonly "aria-selected": "true" | "false";
@@ -259,13 +272,15 @@ declare class CommandItemState {
         readonly onclick: (_: BitsMouseEvent) => void;
     };
 }
-type CommandLoadingStateProps = WithRefProps<ReadableBoxedValues<{
+interface CommandLoadingStateOpts extends WithRefOpts, ReadableBoxedValues<{
     progress: number;
-}>>;
-declare class CommandLoadingState {
-    readonly opts: CommandLoadingStateProps;
-    constructor(opts: CommandLoadingStateProps);
-    props: {
+}> {
+}
+export declare class CommandLoadingState {
+    static create(opts: CommandLoadingStateOpts): CommandLoadingState;
+    readonly opts: CommandLoadingStateOpts;
+    constructor(opts: CommandLoadingStateOpts);
+    readonly props: {
         readonly id: string;
         readonly role: "progressbar";
         readonly "aria-valuenow": number;
@@ -274,64 +289,60 @@ declare class CommandLoadingState {
         readonly "aria-label": "Loading...";
     };
 }
-type CommandSeparatorStateProps = WithRefProps & ReadableBoxedValues<{
+interface CommandSeparatorStateOpts extends WithRefOpts, ReadableBoxedValues<{
     forceMount: boolean;
-}>;
-declare class CommandSeparatorState {
-    readonly opts: CommandSeparatorStateProps;
+}> {
+}
+export declare class CommandSeparatorState {
+    static create(opts: CommandSeparatorStateOpts): CommandSeparatorState;
+    readonly opts: CommandSeparatorStateOpts;
     readonly root: CommandRootState;
-    shouldRender: boolean;
-    constructor(opts: CommandSeparatorStateProps, root: CommandRootState);
-    props: {
+    readonly shouldRender: boolean;
+    constructor(opts: CommandSeparatorStateOpts, root: CommandRootState);
+    readonly props: {
         readonly id: string;
         readonly "aria-hidden": "true";
     };
 }
-type CommandListStateProps = WithRefProps & ReadableBoxedValues<{
+interface CommandListStateOpts extends WithRefOpts, ReadableBoxedValues<{
     ariaLabel: string;
-}>;
-declare class CommandListState {
-    readonly opts: CommandListStateProps;
+}> {
+}
+export declare class CommandListState {
+    static create(opts: CommandListStateOpts): CommandListState;
+    readonly opts: CommandListStateOpts;
     readonly root: CommandRootState;
-    constructor(opts: CommandListStateProps, root: CommandRootState);
-    props: {
+    constructor(opts: CommandListStateOpts, root: CommandRootState);
+    readonly props: {
         readonly id: string;
         readonly role: "listbox";
         readonly "aria-label": string;
     };
 }
-type CommandLabelStateProps = WithRefProps<ReadableBoxedValues<{
+interface CommandLabelStateOpts extends WithRefOpts, ReadableBoxedValues<{
     for?: string;
-}>>;
-declare class CommandLabelState {
-    readonly opts: CommandLabelStateProps;
+}> {
+}
+export declare class CommandLabelState {
+    static create(opts: CommandLabelStateOpts): CommandLabelState;
+    readonly opts: CommandLabelStateOpts;
     readonly root: CommandRootState;
-    constructor(opts: CommandLabelStateProps, root: CommandRootState);
-    props: {
+    constructor(opts: CommandLabelStateOpts, root: CommandRootState);
+    readonly props: {
         readonly id: string;
         readonly for: string | undefined;
         readonly style: import("svelte-toolbelt").StyleProperties;
     };
 }
-type CommandViewportStateProps = WithRefProps;
-declare class CommandViewportState {
-    readonly opts: CommandViewportStateProps;
+interface CommandViewportStateOpts extends WithRefOpts {
+}
+export declare class CommandViewportState {
+    static create(opts: CommandViewportStateOpts): CommandViewportState;
+    readonly opts: CommandViewportStateOpts;
     readonly list: CommandListState;
-    constructor(opts: CommandViewportStateProps, list: CommandListState);
-    props: {
+    constructor(opts: CommandViewportStateOpts, list: CommandListState);
+    readonly props: {
         readonly id: string;
     };
 }
-export declare function useCommandRoot(props: CommandRootStateProps): CommandRootState;
-export declare function useCommandEmpty(props: CommandEmptyStateProps): CommandEmptyState;
-export declare function useCommandItem(props: Omit<CommandItemStateProps, "group">): CommandItemState;
-export declare function useCommandGroupContainer(props: CommandGroupContainerStateProps): CommandGroupContainerState;
-export declare function useCommandGroupHeading(props: CommandGroupHeadingStateProps): CommandGroupHeadingState;
-export declare function useCommandGroupItems(props: CommandGroupItemsStateProps): CommandGroupItemsState;
-export declare function useCommandInput(props: CommandInputStateProps): CommandInputState;
-export declare function useCommandLoading(props: CommandLoadingStateProps): CommandLoadingState;
-export declare function useCommandSeparator(props: CommandSeparatorStateProps): CommandSeparatorState;
-export declare function useCommandList(props: CommandListStateProps): CommandListState;
-export declare function useCommandViewport(props: CommandViewportStateProps): CommandViewportState;
-export declare function useCommandLabel(props: CommandLabelStateProps): CommandLabelState;
 export {};