@johly/bits-ui 2.18.1

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

@@ -0,0 +1,92 @@
+<script lang="ts">
+	import FloatingLayer from "../../utilities/floating-layer/components/floating-layer.svelte";
+	import { noop } from "../../../internal/noop.js";
+	import { type WritableBox, boxWith } from "svelte-toolbelt";
+	import { SelectRootState } from "../select.svelte.js";
+	import type { SelectRootProps } from "../types.js";
+	import SelectHiddenInput from "./select-hidden-input.svelte";
+	import { watch } from "runed";
+
+	let {
+		value = $bindable(),
+		onValueChange = noop,
+		name = "",
+		disabled = false,
+		type,
+		open = $bindable(false),
+		onOpenChange = noop,
+		onOpenChangeComplete = noop,
+		loop = false,
+		scrollAlignment = "nearest",
+		required = false,
+		items = [],
+		allowDeselect = false,
+		autocomplete,
+		children,
+	}: SelectRootProps = $props();
+
+	function handleDefaultValue() {
+		if (value !== undefined) return;
+		value = type === "single" ? "" : [];
+	}
+
+	// SSR
+	handleDefaultValue();
+
+	watch.pre(
+		() => value,
+		() => {
+			handleDefaultValue();
+		}
+	);
+
+	let inputValue = $state("");
+
+	const rootState = SelectRootState.create({
+		type,
+		value: boxWith(
+			() => value!,
+			(v) => {
+				value = v;
+				// oxlint-disable-next-line no-explicit-any
+				onValueChange(v as any);
+			}
+		) as WritableBox<string> | WritableBox<string[]>,
+		disabled: boxWith(() => disabled),
+		required: boxWith(() => required),
+		open: boxWith(
+			() => open,
+			(v) => {
+				open = v;
+				onOpenChange(v);
+			}
+		),
+		loop: boxWith(() => loop),
+		scrollAlignment: boxWith(() => scrollAlignment),
+		name: boxWith(() => name),
+		isCombobox: false,
+		items: boxWith(() => items),
+		allowDeselect: boxWith(() => allowDeselect),
+		inputValue: boxWith(
+			() => inputValue,
+			(v) => (inputValue = v)
+		),
+		onOpenChangeComplete: boxWith(() => onOpenChangeComplete),
+	});
+</script>
+
+<FloatingLayer>
+	{@render children?.()}
+</FloatingLayer>
+
+{#if Array.isArray(rootState.opts.value.current)}
+	{#if rootState.opts.value.current.length === 0}
+		<SelectHiddenInput {autocomplete} />
+	{:else}
+		{#each rootState.opts.value.current as item (item)}
+			<SelectHiddenInput value={item} {autocomplete} />
+		{/each}
+	{/if}
+{:else}
+	<SelectHiddenInput bind:value={rootState.opts.value.current as string} {autocomplete} />
+{/if}

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

@@ -0,0 +1,3 @@
+declare const Select: import("svelte").Component<import("../types.js").SelectRootPropsWithoutHTML, {}, "value" | "open">;
+type Select = ReturnType<typeof Select>;
+export default Select;

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

@@ -0,0 +1,13 @@
+export { default as Root } from "./components/select.svelte";
+export { default as Value } from "./components/select-value.svelte";
+export { default as Content } from "./components/select-content.svelte";
+export { default as ContentStatic } from "./components/select-content-static.svelte";
+export { default as Item } from "./components/select-item.svelte";
+export { default as Group } from "./components/select-group.svelte";
+export { default as GroupHeading } from "./components/select-group-heading.svelte";
+export { default as Trigger } from "./components/select-trigger.svelte";
+export { default as Portal } from "../utilities/portal/portal.svelte";
+export { default as Viewport } from "./components/select-viewport.svelte";
+export { default as ScrollUpButton } from "./components/select-scroll-up-button.svelte";
+export { default as ScrollDownButton } from "./components/select-scroll-down-button.svelte";
+export type { SelectRootProps as RootProps, SelectValueProps as ValueProps, SelectContentProps as ContentProps, SelectContentStaticProps as ContentStaticProps, SelectItemProps as ItemProps, SelectGroupProps as GroupProps, SelectGroupHeadingProps as GroupHeadingProps, SelectTriggerProps as TriggerProps, SelectViewportProps as ViewportProps, SelectScrollUpButtonProps as ScrollUpButtonProps, SelectScrollDownButtonProps as ScrollDownButtonProps, SelectPortalProps as PortalProps, } from "./types.js";

package/dist/bits/select/exports.js

@@ -0,0 +1,12 @@
+export { default as Root } from "./components/select.svelte";
+export { default as Value } from "./components/select-value.svelte";
+export { default as Content } from "./components/select-content.svelte";
+export { default as ContentStatic } from "./components/select-content-static.svelte";
+export { default as Item } from "./components/select-item.svelte";
+export { default as Group } from "./components/select-group.svelte";
+export { default as GroupHeading } from "./components/select-group-heading.svelte";
+export { default as Trigger } from "./components/select-trigger.svelte";
+export { default as Portal } from "../utilities/portal/portal.svelte";
+export { default as Viewport } from "./components/select-viewport.svelte";
+export { default as ScrollUpButton } from "./components/select-scroll-up-button.svelte";
+export { default as ScrollDownButton } from "./components/select-scroll-down-button.svelte";

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

@@ -0,0 +1 @@
+export * as Select from "./exports.js";

package/dist/bits/select/index.js

@@ -0,0 +1 @@
+export * as Select from "./exports.js";

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

@@ -0,0 +1,456 @@
+import { Previous } from "runed";
+import { DOMContext, type ReadableBoxedValues, type WritableBoxedValues, type Box } from "svelte-toolbelt";
+import type { BitsEvent, BitsFocusEvent, BitsKeyboardEvent, BitsMouseEvent, BitsPointerEvent, OnChangeFn, WithRefOpts, RefAttachment } from "../../internal/types.js";
+import { PresenceManager } from "../../internal/presence-manager.svelte.js";
+import type { SelectValueSnippetProps } from "./types.js";
+export declare const INTERACTION_KEYS: string[];
+export declare const FIRST_KEYS: string[];
+export declare const LAST_KEYS: string[];
+export declare const FIRST_LAST_KEYS: string[];
+export declare const SELECTION_KEYS: string[];
+export declare const CONTENT_MARGIN = 10;
+declare const selectAttrs: import("../../internal/attrs.js").CreateBitsAttrsReturn<readonly ["trigger", "content", "item", "viewport", "scroll-up-button", "scroll-down-button", "group", "group-label", "separator", "arrow", "input", "content-wrapper", "item-text", "value"]>;
+interface SelectBaseRootStateOpts extends ReadableBoxedValues<{
+    disabled: boolean;
+    required: boolean;
+    name: string;
+    loop: boolean;
+    scrollAlignment: "nearest" | "center";
+    items: {
+        value: string;
+        label: string;
+        disabled?: boolean;
+    }[];
+    allowDeselect: boolean;
+    onOpenChangeComplete: OnChangeFn<boolean>;
+}>, WritableBoxedValues<{
+    open: boolean;
+    inputValue: string;
+}> {
+    isCombobox: boolean;
+}
+declare abstract class SelectBaseRootState {
+    readonly opts: SelectBaseRootStateOpts;
+    touchedInput: boolean;
+    inputNode: HTMLElement | null;
+    contentNode: HTMLElement | null;
+    contentPresence: PresenceManager;
+    viewportNode: HTMLElement | null;
+    triggerNode: HTMLElement | null;
+    valueNode: HTMLElement | null;
+    valueId: string;
+    highlightedNode: HTMLElement | null;
+    readonly highlightedValue: string | null;
+    readonly highlightedId: string | undefined;
+    readonly highlightedLabel: string | null;
+    contentIsPositioned: boolean;
+    isUsingKeyboard: boolean;
+    isCombobox: boolean;
+    domContext: DOMContext;
+    constructor(opts: SelectBaseRootStateOpts);
+    setHighlightedNode(node: HTMLElement | null, initial?: boolean): void;
+    scrollHighlightedNodeIntoView(node: HTMLElement): void;
+    getCandidateNodes(): HTMLElement[];
+    setHighlightedToFirstCandidate(initial?: boolean): void;
+    getNodeByValue(value: string): HTMLElement | null;
+    /**
+     * Resolves the display label for a value: `items` entry when present, otherwise the
+     * mounted item's `data-label` or its text content.
+     */
+    getLabelForValue(value: string): string;
+    setOpen(open: boolean): void;
+    toggleOpen(): void;
+    handleOpen(): void;
+    handleClose(): void;
+    toggleMenu(): void;
+    getBitsAttr: typeof selectAttrs.getAttr;
+}
+interface SelectSingleRootStateOpts extends SelectBaseRootStateOpts, WritableBoxedValues<{
+    value: string;
+}> {
+}
+export declare class SelectSingleRootState extends SelectBaseRootState {
+    readonly opts: SelectSingleRootStateOpts;
+    readonly isMulti: false;
+    readonly hasValue: boolean;
+    readonly currentLabel: string;
+    readonly candidateLabels: string[];
+    readonly dataTypeaheadEnabled: boolean;
+    constructor(opts: SelectSingleRootStateOpts);
+    includesItem(itemValue: string): boolean;
+    toggleItem(itemValue: string, itemLabel?: string): void;
+    setInitialHighlightedNode(): void;
+}
+interface SelectMultipleRootStateOpts extends SelectBaseRootStateOpts, WritableBoxedValues<{
+    value: string[];
+}> {
+}
+declare class SelectMultipleRootState extends SelectBaseRootState {
+    readonly opts: SelectMultipleRootStateOpts;
+    readonly isMulti: true;
+    readonly hasValue: boolean;
+    constructor(opts: SelectMultipleRootStateOpts);
+    includesItem(itemValue: string): boolean;
+    toggleItem(itemValue: string, itemLabel?: string): void;
+    setInitialHighlightedNode(): void;
+}
+interface SelectRootStateOpts extends ReadableBoxedValues<{
+    disabled: boolean;
+    required: boolean;
+    loop: boolean;
+    scrollAlignment: "nearest" | "center";
+    name: string;
+    items: {
+        value: string;
+        label: string;
+        disabled?: boolean;
+    }[];
+    allowDeselect: boolean;
+    onOpenChangeComplete: OnChangeFn<boolean>;
+}>, WritableBoxedValues<{
+    open: boolean;
+    inputValue: string;
+}> {
+    isCombobox: boolean;
+    type: "single" | "multiple";
+    value: Box<string> | Box<string[]>;
+}
+export declare class SelectRootState {
+    static create(props: SelectRootStateOpts): SelectRoot;
+}
+type SelectRoot = SelectSingleRootState | SelectMultipleRootState;
+type SelectValueStateProps = WithRefOpts<ReadableBoxedValues<{
+    placeholder: string | null | undefined;
+}>>;
+export declare class SelectValueState {
+    static create(opts: SelectValueStateProps): SelectValueState;
+    readonly root: SelectRoot;
+    readonly opts: SelectValueStateProps;
+    readonly attachment: RefAttachment;
+    constructor(opts: SelectValueStateProps, root: SelectRoot);
+    setValue(value: string | string[]): void;
+    readonly snippetProps: SelectValueSnippetProps;
+    readonly props: {
+        id: string;
+        "data-placeholder": string | undefined;
+        "data-select-value": string;
+    };
+}
+interface SelectInputStateOpts extends WithRefOpts, ReadableBoxedValues<{
+    clearOnDeselect: boolean;
+}> {
+}
+export declare class SelectInputState {
+    static create(opts: SelectInputStateOpts): SelectInputState;
+    readonly opts: SelectInputStateOpts;
+    readonly root: SelectRoot;
+    readonly attachment: RefAttachment;
+    constructor(opts: SelectInputStateOpts, root: SelectRoot);
+    onkeydown(e: BitsKeyboardEvent): void;
+    oninput(e: BitsEvent<Event, HTMLInputElement>): void;
+    readonly props: {
+        readonly id: string;
+        readonly role: "combobox";
+        readonly disabled: true | undefined;
+        readonly "aria-activedescendant": string | undefined;
+        readonly "aria-autocomplete": "list";
+        readonly "aria-expanded": "true" | "false";
+        readonly "data-state": "open" | "closed";
+        readonly "data-disabled": "" | undefined;
+        readonly onkeydown: (e: BitsKeyboardEvent) => void;
+        readonly oninput: (e: BitsEvent<Event, HTMLInputElement>) => void;
+    };
+}
+interface SelectComboTriggerStateOpts extends WithRefOpts {
+}
+export declare class SelectComboTriggerState {
+    static create(opts: SelectComboTriggerStateOpts): SelectComboTriggerState;
+    readonly opts: SelectComboTriggerStateOpts;
+    readonly root: SelectBaseRootState;
+    readonly attachment: RefAttachment;
+    constructor(opts: SelectComboTriggerStateOpts, root: SelectBaseRootState);
+    onkeydown(e: BitsKeyboardEvent): void;
+    /**
+     * `pointerdown` fires before the `focus` event, so we can prevent the default
+     * behavior of focusing the button and keep focus on the input.
+     */
+    onpointerdown(e: BitsPointerEvent): void;
+    readonly props: {
+        readonly id: string;
+        readonly disabled: true | undefined;
+        readonly "aria-haspopup": "listbox";
+        readonly "data-state": "open" | "closed";
+        readonly "data-disabled": "" | undefined;
+        readonly onpointerdown: (e: BitsPointerEvent) => void;
+        readonly onkeydown: (e: BitsKeyboardEvent) => void;
+    };
+}
+interface SelectTriggerStateOpts extends WithRefOpts {
+}
+export declare class SelectTriggerState {
+    #private;
+    static create(opts: SelectTriggerStateOpts): SelectTriggerState;
+    readonly opts: SelectTriggerStateOpts;
+    readonly root: SelectRoot;
+    readonly attachment: RefAttachment;
+    constructor(opts: SelectTriggerStateOpts, root: SelectRoot);
+    onkeydown(e: BitsKeyboardEvent): void;
+    onclick(e: BitsMouseEvent): void;
+    onpointerdown(e: BitsPointerEvent): void;
+    onpointerup(e: BitsPointerEvent): void;
+    readonly props: {
+        readonly id: string;
+        readonly disabled: true | undefined;
+        readonly "aria-haspopup": "listbox";
+        readonly "aria-expanded": "true" | "false";
+        readonly "aria-activedescendant": string | undefined;
+        readonly "data-state": "open" | "closed";
+        readonly "data-disabled": "" | undefined;
+        readonly "data-placeholder": "" | undefined;
+        readonly onpointerdown: (e: BitsPointerEvent) => void;
+        readonly onkeydown: (e: BitsKeyboardEvent) => void;
+        readonly onclick: (e: BitsMouseEvent) => void;
+        readonly onpointerup: (e: BitsPointerEvent) => void;
+    };
+}
+interface SelectContentStateOpts extends WithRefOpts, ReadableBoxedValues<{
+    onInteractOutside: (e: PointerEvent) => void;
+    onEscapeKeydown: (e: KeyboardEvent) => void;
+}> {
+}
+export declare class SelectContentState {
+    #private;
+    static create(opts: SelectContentStateOpts): SelectContentState;
+    readonly opts: SelectContentStateOpts;
+    readonly root: SelectRoot;
+    readonly attachment: RefAttachment;
+    isPositioned: boolean;
+    domContext: DOMContext;
+    constructor(opts: SelectContentStateOpts, root: SelectRoot);
+    onpointermove(_: BitsPointerEvent): void;
+    onInteractOutside: (e: PointerEvent) => void;
+    onEscapeKeydown: (e: KeyboardEvent) => void;
+    onOpenAutoFocus: (e: Event) => void;
+    onCloseAutoFocus: (e: Event) => void;
+    get shouldRender(): boolean;
+    readonly snippetProps: {
+        open: boolean;
+    };
+    readonly props: {
+        readonly style: {
+            readonly display: "flex";
+            readonly flexDirection: "column";
+            readonly outline: "none";
+            readonly boxSizing: "border-box";
+            readonly pointerEvents: "auto";
+        };
+        readonly onpointermove: (_: BitsPointerEvent) => void;
+        readonly "data-starting-style"?: "";
+        readonly "data-ending-style"?: "";
+        readonly id: string;
+        readonly role: "listbox";
+        readonly "aria-multiselectable": "true" | undefined;
+        readonly "data-state": "open" | "closed";
+    };
+    readonly popperProps: {
+        onInteractOutside: (e: PointerEvent) => void;
+        onEscapeKeydown: (e: KeyboardEvent) => void;
+        onOpenAutoFocus: (e: Event) => void;
+        onCloseAutoFocus: (e: Event) => void;
+        trapFocus: boolean;
+        loop: boolean;
+        onPlaced: () => void;
+    };
+}
+interface SelectItemStateOpts extends WithRefOpts, ReadableBoxedValues<{
+    value: string;
+    disabled: boolean;
+    label: string;
+    onHighlight: () => void;
+    onUnhighlight: () => void;
+}> {
+}
+export declare class SelectItemState {
+    static create(opts: SelectItemStateOpts): SelectItemState;
+    readonly opts: SelectItemStateOpts;
+    readonly root: SelectRoot;
+    readonly attachment: RefAttachment;
+    readonly isSelected: boolean;
+    readonly isHighlighted: boolean;
+    readonly prevHighlighted: Previous<boolean>;
+    mounted: boolean;
+    constructor(opts: SelectItemStateOpts, root: SelectRoot);
+    handleSelect(): void;
+    snippetProps: {
+        selected: boolean;
+        highlighted: boolean;
+    };
+    onpointerdown(e: BitsPointerEvent): void;
+    /**
+     * Using `pointerup` instead of `click` allows power users to pointerdown
+     * the trigger, then release pointerup on an item to select it vs having to do
+     * multiple clicks.
+     */
+    onpointerup(e: BitsPointerEvent): void;
+    onpointermove(e: BitsPointerEvent): void;
+    readonly props: {
+        readonly id: string;
+        readonly role: "option";
+        readonly "aria-selected": "true" | undefined;
+        readonly "data-value": string;
+        readonly "data-disabled": "" | undefined;
+        readonly "data-highlighted": "" | undefined;
+        readonly "data-selected": "" | undefined;
+        readonly "data-label": string;
+        readonly onpointermove: (e: BitsPointerEvent) => void;
+        readonly onpointerdown: (e: BitsPointerEvent) => void;
+        readonly onpointerup: (e: BitsPointerEvent) => void;
+    };
+}
+interface SelectGroupStateOpts extends WithRefOpts {
+}
+export declare class SelectGroupState {
+    static create(opts: SelectGroupStateOpts): SelectGroupState;
+    readonly opts: SelectGroupStateOpts;
+    readonly root: SelectBaseRootState;
+    labelNode: HTMLElement | null;
+    readonly attachment: RefAttachment;
+    constructor(opts: SelectGroupStateOpts, root: SelectBaseRootState);
+    readonly props: {
+        readonly id: string;
+        readonly role: "group";
+        readonly "aria-labelledby": string | undefined;
+    };
+}
+interface SelectGroupHeadingStateOpts extends WithRefOpts {
+}
+export declare class SelectGroupHeadingState {
+    static create(opts: SelectGroupHeadingStateOpts): SelectGroupHeadingState;
+    readonly opts: SelectGroupHeadingStateOpts;
+    readonly group: SelectGroupState;
+    readonly attachment: RefAttachment;
+    constructor(opts: SelectGroupHeadingStateOpts, group: SelectGroupState);
+    readonly props: {
+        readonly id: string;
+    };
+}
+interface SelectHiddenInputStateOpts extends ReadableBoxedValues<{
+    value: string | undefined;
+}> {
+}
+export declare class SelectHiddenInputState {
+    static create(opts: SelectHiddenInputStateOpts): SelectHiddenInputState;
+    readonly opts: SelectHiddenInputStateOpts;
+    readonly root: SelectBaseRootState;
+    readonly shouldRender: boolean;
+    constructor(opts: SelectHiddenInputStateOpts, root: SelectBaseRootState);
+    onfocus(e: BitsFocusEvent): void;
+    readonly props: {
+        readonly disabled: true | undefined;
+        readonly required: true | undefined;
+        readonly name: string;
+        readonly value: string | undefined;
+        readonly onfocus: (e: BitsFocusEvent) => void;
+    };
+}
+interface SelectViewportStateOpts extends WithRefOpts {
+}
+export declare class SelectViewportState {
+    static create(opts: SelectViewportStateOpts): SelectViewportState;
+    readonly opts: SelectViewportStateOpts;
+    readonly content: SelectContentState;
+    readonly root: SelectBaseRootState;
+    readonly attachment: RefAttachment;
+    prevScrollTop: number;
+    constructor(opts: SelectViewportStateOpts, content: SelectContentState);
+    readonly props: {
+        readonly id: string;
+        readonly role: "presentation";
+        readonly style: {
+            readonly position: "relative";
+            readonly flex: 1;
+            readonly overflow: "auto";
+        };
+    };
+}
+interface SelectScrollButtonImplStateOpts extends WithRefOpts, ReadableBoxedValues<{
+    delay: (tick: number) => number;
+}> {
+}
+export declare class SelectScrollButtonImplState {
+    readonly opts: SelectScrollButtonImplStateOpts;
+    readonly content: SelectContentState;
+    readonly root: SelectBaseRootState;
+    readonly attachment: RefAttachment;
+    autoScrollTimer: number | null;
+    userScrollTimer: number;
+    isUserScrolling: boolean;
+    onAutoScroll: () => void;
+    mounted: boolean;
+    constructor(opts: SelectScrollButtonImplStateOpts, content: SelectContentState);
+    handleUserScroll(): void;
+    clearAutoScrollInterval(): void;
+    onpointerdown(_: BitsPointerEvent): void;
+    onpointermove(e: BitsPointerEvent): void;
+    onpointerleave(_: BitsPointerEvent): void;
+    readonly props: {
+        readonly id: string;
+        readonly "aria-hidden": "true" | undefined;
+        readonly style: {
+            readonly flexShrink: 0;
+        };
+        readonly onpointerdown: (_: BitsPointerEvent) => void;
+        readonly onpointermove: (e: BitsPointerEvent) => void;
+        readonly onpointerleave: (_: BitsPointerEvent) => void;
+    };
+}
+export declare class SelectScrollDownButtonState {
+    static create(opts: SelectScrollButtonImplStateOpts): SelectScrollDownButtonState;
+    readonly scrollButtonState: SelectScrollButtonImplState;
+    readonly content: SelectContentState;
+    readonly root: SelectBaseRootState;
+    canScrollDown: boolean;
+    scrollIntoViewTimer: ReturnType<typeof globalThis.setTimeout> | null;
+    constructor(scrollButtonState: SelectScrollButtonImplState);
+    /**
+     * @param manual - if true, it means the function was invoked manually outside of an event
+     * listener, so we don't call `handleUserScroll` to prevent the auto scroll from kicking in.
+     */
+    handleScroll: (manual?: boolean) => void;
+    handleAutoScroll: () => void;
+    readonly props: {
+        readonly id: string;
+        readonly "aria-hidden": "true" | undefined;
+        readonly style: {
+            readonly flexShrink: 0;
+        };
+        readonly onpointerdown: (_: BitsPointerEvent) => void;
+        readonly onpointermove: (e: BitsPointerEvent) => void;
+        readonly onpointerleave: (_: BitsPointerEvent) => void;
+    };
+}
+export declare class SelectScrollUpButtonState {
+    static create(opts: SelectScrollButtonImplStateOpts): SelectScrollUpButtonState;
+    readonly scrollButtonState: SelectScrollButtonImplState;
+    readonly content: SelectContentState;
+    readonly root: SelectBaseRootState;
+    canScrollUp: boolean;
+    constructor(scrollButtonState: SelectScrollButtonImplState);
+    /**
+     * @param manual - if true, it means the function was invoked manually outside of an event
+     * listener, so we don't call `handleUserScroll` to prevent the auto scroll from kicking in.
+     */
+    handleScroll: (manual?: boolean) => void;
+    handleAutoScroll: () => void;
+    readonly props: {
+        readonly id: string;
+        readonly "aria-hidden": "true" | undefined;
+        readonly style: {
+            readonly flexShrink: 0;
+        };
+        readonly onpointerdown: (_: BitsPointerEvent) => void;
+        readonly onpointermove: (e: BitsPointerEvent) => void;
+        readonly onpointerleave: (_: BitsPointerEvent) => void;
+    };
+}
+export {};