bits-ui

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"; 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 { #private; readonly opts: SelectBaseRootStateOpts; touchedInput: boolean; inputNode: HTMLElement | null; contentNode: HTMLElement | null; triggerNode: HTMLElement | null; valueId: string; highlightedNode: HTMLElement | null; readonly highlightedValue: string | null; readonly highlightedId: string | undefined; readonly highlightedLabel: string | null; isUsingKeyboard: boolean; isCombobox: boolean; domContext: DOMContext; constructor(opts: SelectBaseRootStateOpts); setHighlightedNode(node: HTMLElement | null, initial?: boolean): void; getCandidateNodes(): HTMLElement[]; setHighlightedToFirstCandidate(options?: { debounced: boolean; }): void; getNodeByValue(value: string): HTMLElement | null; 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; 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; viewportNode: HTMLElement | null; 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; readonly snippetProps: { open: boolean; }; readonly props: { readonly id: string; readonly role: "listbox"; readonly "aria-multiselectable": "true" | undefined; readonly "data-state": "open" | "closed"; readonly style: { readonly display: "flex"; readonly flexDirection: "column"; readonly outline: "none"; readonly boxSizing: "border-box"; readonly pointerEvents: "auto"; }; readonly onpointermove: (_: BitsPointerEvent) => void; }; 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; }> { } 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; 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 {};