bits-ui 2.6.2 → 2.8.0

package/dist/bits/select/select.svelte.js

@@ -1,15 +1,16 @@
 import { Context, Previous, watch } from "runed";
-import { afterSleep, afterTick, onDestroyEffect, attachRef, DOMContext } from "svelte-toolbelt";
+import { afterSleep, afterTick, onDestroyEffect, attachRef, DOMContext, box, } from "svelte-toolbelt";
 import { on } from "svelte/events";
 import { backward, forward, next, prev } from "../../internal/arrays.js";
 import { getAriaExpanded, getAriaHidden, getDataDisabled, getDataOpenClosed, getDisabled, getRequired, } from "../../internal/attrs.js";
 import { kbd } from "../../internal/kbd.js";
 import { noop } from "../../internal/noop.js";
-import { useDOMTypeahead } from "../../internal/use-dom-typeahead.svelte.js";
-import { useDataTypeahead } from "../../internal/use-data-typeahead.svelte.js";
 import { isIOS } from "../../internal/is.js";
 import { createBitsAttrs } from "../../internal/attrs.js";
 import { getFloatingContentCSSVars } from "../../internal/floating-svelte/floating-utils.svelte.js";
+import { DataTypeahead } from "../../internal/data-typeahead.svelte.js";
+import { DOMTypeahead } from "../../internal/dom-typeahead.svelte.js";
+import { OpenChangeComplete } from "../../internal/open-change-complete.js";
 // prettier-ignore
 export const INTERACTION_KEYS = [kbd.ARROW_LEFT, kbd.ESCAPE, kbd.ARROW_RIGHT, kbd.SHIFT, kbd.CAPS_LOCK, kbd.CONTROL, kbd.ALT, kbd.META, kbd.ENTER, kbd.F1, kbd.F2, kbd.F3, kbd.F4, kbd.F5, kbd.F6, kbd.F7, kbd.F8, kbd.F9, kbd.F10, kbd.F11, kbd.F12];
 export const FIRST_KEYS = [kbd.ARROW_DOWN, kbd.PAGE_UP, kbd.HOME];
@@ -36,6 +37,9 @@ const selectAttrs = createBitsAttrs({
         "value",
     ],
 });
+const SelectRootContext = new Context("Select.Root | Combobox.Root");
+const SelectGroupContext = new Context("Select.Group | Combobox.Group");
+const SelectContentContext = new Context("Select.Content | Combobox.Content");
 class SelectBaseRootState {
     opts;
     touchedInput = $state(false);
@@ -65,6 +69,13 @@ class SelectBaseRootState {
     constructor(opts) {
         this.opts = opts;
         this.isCombobox = opts.isCombobox;
+        new OpenChangeComplete({
+            ref: box.with(() => this.contentNode),
+            open: this.opts.open,
+            onComplete: () => {
+                this.opts.onOpenChangeComplete.current(this.opts.open.current);
+            },
+        });
         $effect.pre(() => {
             if (!this.opts.open.current) {
                 this.setHighlightedNode(null);
@@ -114,7 +125,7 @@ class SelectBaseRootState {
         return selectAttrs.getAttr(part, this.isCombobox ? "combobox" : undefined);
     };
 }
-class SelectSingleRootState extends SelectBaseRootState {
+export class SelectSingleRootState extends SelectBaseRootState {
     opts;
     isMulti = false;
     hasValue = $derived.by(() => this.opts.value.current !== "");
@@ -230,7 +241,19 @@ class SelectMultipleRootState extends SelectBaseRootState {
         });
     }
 }
-class SelectInputState {
+export class SelectRootState {
+    static create(props) {
+        const { type, ...rest } = props;
+        const rootState = type === "single"
+            ? new SelectSingleRootState(rest)
+            : new SelectMultipleRootState(rest);
+        return SelectRootContext.set(rootState);
+    }
+}
+export class SelectInputState {
+    static create(opts) {
+        return new SelectInputState(opts, SelectRootContext.get());
+    }
     opts;
     root;
     constructor(opts, root) {
@@ -364,7 +387,10 @@ class SelectInputState {
         ...attachRef(this.opts.ref, (v) => (this.root.inputNode = v)),
     }));
 }
-class SelectComboTriggerState {
+export class SelectComboTriggerState {
+    static create(opts) {
+        return new SelectComboTriggerState(opts, SelectRootContext.get());
+    }
     opts;
     root;
     constructor(opts, root) {
@@ -409,7 +435,10 @@ class SelectComboTriggerState {
         ...attachRef(this.opts.ref),
     }));
 }
-class SelectTriggerState {
+export class SelectTriggerState {
+    static create(opts) {
+        return new SelectTriggerState(opts, SelectRootContext.get());
+    }
     opts;
     root;
     #domTypeahead;
@@ -418,7 +447,7 @@ class SelectTriggerState {
         this.opts = opts;
         this.root = root;
         this.root.domContext = new DOMContext(opts.ref);
-        this.#domTypeahead = useDOMTypeahead({
+        this.#domTypeahead = new DOMTypeahead({
             getCurrentItem: () => this.root.highlightedNode,
             onMatch: (node) => {
                 this.root.setHighlightedNode(node);
@@ -426,7 +455,7 @@ class SelectTriggerState {
             getActiveElement: () => this.root.domContext.getActiveElement(),
             getWindow: () => this.root.domContext.getWindow(),
         });
-        this.#dataTypeahead = useDataTypeahead({
+        this.#dataTypeahead = new DataTypeahead({
             getCurrentItem: () => {
                 if (this.root.isMulti)
                     return "";
@@ -523,7 +552,7 @@ class SelectTriggerState {
             // if we're currently "typing ahead", we don't want to select the item
             // just yet as the item the user is trying to get to may have a space in it,
             // so we defer handling the close for this case until further down
-            (e.key === kbd.SPACE && this.#domTypeahead.search.current === "")) &&
+            (e.key === kbd.SPACE && this.#domTypeahead.search === "")) &&
             !e.isComposing) {
             e.preventDefault();
             const shouldReturn = this.#handleKeyboardSelection();
@@ -615,6 +644,8 @@ class SelectTriggerState {
         }
     }
     onpointerup(e) {
+        if (this.root.opts.disabled.current)
+            return;
         e.preventDefault();
         if (e.pointerType === "touch") {
             if (this.root.opts.open.current === false) {
@@ -642,7 +673,10 @@ class SelectTriggerState {
         ...attachRef(this.opts.ref, (v) => (this.root.triggerNode = v)),
     }));
 }
-class SelectContentState {
+export class SelectContentState {
+    static create(opts) {
+        return SelectContentContext.set(new SelectContentState(opts, SelectRootContext.get()));
+    }
     opts;
     root;
     viewportNode = $state(null);
@@ -728,7 +762,10 @@ class SelectContentState {
         },
     };
 }
-class SelectItemState {
+export class SelectItemState {
+    static create(opts) {
+        return new SelectItemState(opts, SelectRootContext.get());
+    }
     opts;
     root;
     isSelected = $derived.by(() => this.root.includesItem(this.opts.value.current));
@@ -844,7 +881,10 @@ class SelectItemState {
         ...attachRef(this.opts.ref),
     }));
 }
-class SelectGroupState {
+export class SelectGroupState {
+    static create(opts) {
+        return SelectGroupContext.set(new SelectGroupState(opts, SelectRootContext.get()));
+    }
     opts;
     root;
     labelNode = $state(null);
@@ -860,7 +900,10 @@ class SelectGroupState {
         ...attachRef(this.opts.ref),
     }));
 }
-class SelectGroupHeadingState {
+export class SelectGroupHeadingState {
+    static create(opts) {
+        return new SelectGroupHeadingState(opts, SelectGroupContext.get());
+    }
     opts;
     group;
     constructor(opts, group) {
@@ -873,7 +916,10 @@ class SelectGroupHeadingState {
         ...attachRef(this.opts.ref, (v) => (this.group.labelNode = v)),
     }));
 }
-class SelectHiddenInputState {
+export class SelectHiddenInputState {
+    static create(opts) {
+        return new SelectHiddenInputState(opts, SelectRootContext.get());
+    }
     opts;
     root;
     shouldRender = $derived.by(() => this.root.opts.name.current !== "");
@@ -899,7 +945,10 @@ class SelectHiddenInputState {
         onfocus: this.onfocus,
     }));
 }
-class SelectViewportState {
+export class SelectViewportState {
+    static create(opts) {
+        return new SelectViewportState(opts, SelectContentContext.get());
+    }
     opts;
     content;
     root;
@@ -924,7 +973,7 @@ class SelectViewportState {
         ...attachRef(this.opts.ref, (v) => (this.content.viewportNode = v)),
     }));
 }
-class SelectScrollButtonImplState {
+export class SelectScrollButtonImplState {
     opts;
     content;
     root;
@@ -994,7 +1043,10 @@ class SelectScrollButtonImplState {
         ...attachRef(this.opts.ref),
     }));
 }
-class SelectScrollDownButtonState {
+export class SelectScrollDownButtonState {
+    static create(opts) {
+        return new SelectScrollDownButtonState(new SelectScrollButtonImplState(opts, SelectContentContext.get()));
+    }
     scrollButtonState;
     content;
     root;
@@ -1050,7 +1102,10 @@ class SelectScrollDownButtonState {
         [this.root.getBitsAttr("scroll-down-button")]: "",
     }));
 }
-class SelectScrollUpButtonState {
+export class SelectScrollUpButtonState {
+    static create(opts) {
+        return new SelectScrollUpButtonState(new SelectScrollButtonImplState(opts, SelectContentContext.get()));
+    }
     scrollButtonState;
     content;
     root;
@@ -1091,46 +1146,3 @@ class SelectScrollUpButtonState {
         [this.root.getBitsAttr("scroll-up-button")]: "",
     }));
 }
-const SelectRootContext = new Context("Select.Root | Combobox.Root");
-const SelectGroupContext = new Context("Select.Group | Combobox.Group");
-const SelectContentContext = new Context("Select.Content | Combobox.Content");
-export function useSelectRoot(props) {
-    const { type, ...rest } = props;
-    const rootState = type === "single"
-        ? new SelectSingleRootState(rest)
-        : new SelectMultipleRootState(rest);
-    return SelectRootContext.set(rootState);
-}
-export function useSelectInput(props) {
-    return new SelectInputState(props, SelectRootContext.get());
-}
-export function useSelectContent(props) {
-    return SelectContentContext.set(new SelectContentState(props, SelectRootContext.get()));
-}
-export function useSelectTrigger(props) {
-    return new SelectTriggerState(props, SelectRootContext.get());
-}
-export function useSelectComboTrigger(props) {
-    return new SelectComboTriggerState(props, SelectRootContext.get());
-}
-export function useSelectItem(props) {
-    return new SelectItemState(props, SelectRootContext.get());
-}
-export function useSelectViewport(props) {
-    return new SelectViewportState(props, SelectContentContext.get());
-}
-export function useSelectScrollUpButton(props) {
-    return new SelectScrollUpButtonState(new SelectScrollButtonImplState(props, SelectContentContext.get()));
-}
-export function useSelectScrollDownButton(props) {
-    return new SelectScrollDownButtonState(new SelectScrollButtonImplState(props, SelectContentContext.get()));
-}
-export function useSelectGroup(props) {
-    return SelectGroupContext.set(new SelectGroupState(props, SelectRootContext.get()));
-}
-export function useSelectGroupHeading(props) {
-    return new SelectGroupHeadingState(props, SelectGroupContext.get());
-}
-export function useSelectHiddenInput(props) {
-    return new SelectHiddenInputState(props, SelectRootContext.get());
-}

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

@@ -35,6 +35,10 @@ export type SelectBaseRootPropsWithoutHTML = WithChildren<{
      * A callback function called when the open state changes.
      */
     onOpenChange?: OnChangeFn<boolean>;
+    /**
+     * A callback function called when the open state changes and the animation is complete.
+     */
+    onOpenChangeComplete?: OnChangeFn<boolean>;
     /**
      * Whether or not the combobox menu should loop through the items when navigating with the keyboard.
      *

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

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { box, mergeProps } from "svelte-toolbelt";
-	import { useSeparatorRoot } from "../separator.svelte.js";
+	import { SeparatorRootState } from "../separator.svelte.js";
 	import type { SeparatorRootProps } from "../types.js";
 	import { createId } from "../../../internal/create-id.js";
 
@@ -16,7 +16,7 @@
 		...restProps
 	}: SeparatorRootProps = $props();
 
-	const rootState = useSeparatorRoot({
+	const rootState = SeparatorRootState.create({
 		ref: box.with(
 			() => ref,
 			(v) => (ref = v)

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

@@ -1,13 +1,15 @@
-import type { ReadableBoxedValues } from "../../internal/box.svelte.js";
-import type { WithRefProps } from "../../internal/types.js";
+import { type ReadableBoxedValues } from "svelte-toolbelt";
+import type { WithRefOpts } from "../../internal/types.js";
 import type { Orientation } from "../../shared/index.js";
-type SeparatorRootStateProps = WithRefProps<ReadableBoxedValues<{
+interface SeparatorRootStateOpts extends WithRefOpts, ReadableBoxedValues<{
     orientation: Orientation;
     decorative: boolean;
-}>>;
-declare class SeparatorRootState {
-    readonly opts: SeparatorRootStateProps;
-    constructor(opts: SeparatorRootStateProps);
+}> {
+}
+export declare class SeparatorRootState {
+    static create(opts: SeparatorRootStateOpts): SeparatorRootState;
+    readonly opts: SeparatorRootStateOpts;
+    constructor(opts: SeparatorRootStateOpts);
     readonly props: {
         readonly id: string;
         readonly role: "none" | "separator";
@@ -16,5 +18,4 @@ declare class SeparatorRootState {
         readonly "data-orientation": "horizontal" | "vertical";
     };
 }
-export declare function useSeparatorRoot(props: SeparatorRootStateProps): SeparatorRootState;
 export {};

package/dist/bits/separator/separator.svelte.js

@@ -4,7 +4,10 @@ const separatorAttrs = createBitsAttrs({
     component: "separator",
     parts: ["root"],
 });
-class SeparatorRootState {
+export class SeparatorRootState {
+    static create(opts) {
+        return new SeparatorRootState(opts);
+    }
     opts;
     constructor(opts) {
         this.opts = opts;
@@ -19,6 +22,3 @@ class SeparatorRootState {
         ...attachRef(this.opts.ref),
     }));
 }
-export function useSeparatorRoot(props) {
-    return new SeparatorRootState(props);
-}

package/dist/bits/slider/components/slider-range.svelte

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

package/dist/bits/slider/components/slider-thumb-label.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { box, mergeProps } from "svelte-toolbelt";
 	import type { SliderThumbLabelProps } from "../types.js";
-	import { SliderRootContext, useSliderThumbLabel } from "../slider.svelte.js";
+	import { SliderRootContext, SliderThumbLabelState } from "../slider.svelte.js";
 	import { createId } from "../../../internal/create-id.js";
 
 	const uid = $props.id();
@@ -30,7 +30,7 @@
 		}
 	});
 
-	const tickLabelState = useSliderThumbLabel({
+	const tickLabelState = SliderThumbLabelState.create({
 		id: box.with(() => id),
 		ref: box.with(
 			() => ref,

package/dist/bits/slider/components/slider-thumb.svelte

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

package/dist/bits/slider/components/slider-tick-label.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { box, mergeProps } from "svelte-toolbelt";
 	import type { SliderTickLabelProps } from "../types.js";
-	import { SliderRootContext, useSliderTickLabel } from "../slider.svelte.js";
+	import { SliderRootContext, SliderTickLabelState } from "../slider.svelte.js";
 	import { createId } from "../../../internal/create-id.js";
 
 	const uid = $props.id();
@@ -30,7 +30,7 @@
 		}
 	});
 
-	const tickLabelState = useSliderTickLabel({
+	const tickLabelState = SliderTickLabelState.create({
 		id: box.with(() => id),
 		ref: box.with(
 			() => ref,

package/dist/bits/slider/components/slider-tick.svelte

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

package/dist/bits/slider/components/slider.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { box, mergeProps, type WritableBox } from "svelte-toolbelt";
 	import type { SliderRootProps } from "../types.js";
-	import { useSliderRoot } from "../slider.svelte.js";
+	import { SliderRootState } from "../slider.svelte.js";
 	import { createId } from "../../../internal/create-id.js";
 	import { noop } from "../../../internal/noop.js";
 	import { watch } from "runed";
@@ -59,7 +59,7 @@
 		}
 	);
 
-	const rootState = useSliderRoot({
+	const rootState = SliderRootState.create({
 		id: box.with(() => id),
 		ref: box.with(
 			() => ref,