melt
Version:
The next generation of Melt UI. Built for Svelte 5.
169 lines (168 loc) • 6.66 kB
TypeScript
import type { MaybeGetter, Setter } from "../types";
import { type MaybeMultiple, type OnMultipleChange } from "../utils/selection-state.svelte";
import { BasePopover, type PopoverProps } from "./Popover.svelte";
declare const createIds: () => {
option: string;
input: string;
trigger: string;
content: string;
};
export type ComboboxProps<T, Multiple extends boolean = false> = Omit<PopoverProps, "closeOnEscape" | "closeOnOutsideClick" | "sameWidth"> & {
/**
* If `true`, multiple options can be selected at the same time.
*
* @default false
*/
multiple?: MaybeGetter<Multiple | undefined>;
/**
* The value for the Combobox.
*
* When passing a getter, it will be used as source of truth,
* meaning that the value only changes when the getter returns a new value.
*
* Otherwise, if passing a static value, it'll serve as the default value.
*
*
* @default false
*/
value?: MaybeMultiple<T, Multiple>;
/**
* Called when the value is supposed to change.
*/
onValueChange?: OnMultipleChange<T, Multiple>;
/**
* The inputValue for the Combobox.
*
* When passing a getter, it will be used as source of truth,
* meaning that the value only changes when the getter returns a new value.
*
* Otherwise, if passing a static value, it'll serve as the default value.
*
*
* @default false
*/
inputValue?: MaybeGetter<string | undefined>;
/**
* Called when the value is supposed to change.
*/
onInputValueChange?: Setter<string>;
/**
* The currently highlighted value.
*/
highlighted?: MaybeGetter<T | null | undefined>;
/**
* Called when the highlighted value changes.
*/
onHighlightChange?: (highlighted: T | null) => void;
/**
* Determines behavior when scrolling items into view.
* Set to null to disable auto-scrolling.
*
* @default "nearest"
* @see https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView#block
*/
scrollAlignment?: MaybeGetter<"nearest" | "center" | null | undefined>;
/**
* If the content should have the same width as the trigger
*
* @default true
*/
sameWidth?: MaybeGetter<boolean | undefined>;
};
export declare class Combobox<T, Multiple extends boolean = false> extends BasePopover {
#private;
multiple: Multiple;
scrollAlignment: "center" | "nearest" | null;
touched: boolean;
onSelectMap: Map<T, () => void>;
ids: ReturnType<typeof createIds> & BasePopover["ids"];
constructor(props?: ComboboxProps<T, Multiple>);
get value(): import("../utils/selection-state.svelte").SelectionStateValue<T, Multiple>;
set value(value: import("../utils/selection-state.svelte").SelectionStateValue<T, Multiple>);
get inputValue(): string;
set inputValue(v: string);
get highlighted(): T | null;
set highlighted(v: T | null);
isSelected: (value: T) => boolean;
select(value: T): void;
get label(): {
for: string;
onclick: (e: MouseEvent & {
currentTarget: EventTarget & HTMLLabelElement;
}) => void;
};
get input(): {
readonly "data-melt-combobox-input": "";
readonly id: string;
readonly role: "combobox";
readonly "aria-expanded": boolean;
readonly "aria-controls": string;
readonly "aria-owns": string;
readonly onclick: () => void;
readonly value: string;
readonly oninput: (e: Event) => void;
readonly onkeydown: (e: KeyboardEvent) => void;
readonly onfocus: (event: FocusEvent) => void;
readonly onfocusout: (event: FocusEvent) => Promise<void>;
readonly style: `--melt-invoker-width: ${string}; --melt-invoker-height: ${string}; --melt-invoker-x: ${string}; --melt-invoker-y: ${string}; --melt-popover-available-width: ${string}; --melt-popover-available-height: ${string}`;
readonly popovertarget: string;
};
get trigger(): {
onfocus: (event: FocusEvent) => void;
onfocusout: (event: FocusEvent) => Promise<void>;
style: `--melt-invoker-width: ${string}; --melt-invoker-height: ${string}; --melt-invoker-x: ${string}; --melt-invoker-y: ${string}; --melt-popover-available-width: ${string}; --melt-popover-available-height: ${string}`;
"data-melt-combobox-trigger": string;
id: string;
onclick: () => void;
};
get content(): {
readonly onfocus: (event: FocusEvent) => void;
readonly onfocusout: (event: FocusEvent) => Promise<void>;
readonly style: `--melt-invoker-width: ${string}; --melt-invoker-height: ${string}; --melt-invoker-x: ${string}; --melt-invoker-y: ${string}; --melt-popover-available-width: ${string}; --melt-popover-available-height: ${string}`;
readonly id: string;
readonly popover: "manual";
readonly ontoggle: (e: ToggleEvent & {
currentTarget: EventTarget & HTMLElement;
}) => void;
readonly tabindex: -1;
readonly inert: boolean;
readonly "data-open": "" | undefined;
} & {
readonly "data-melt-combobox-content": "";
readonly role: "listbox";
readonly "aria-expanded": boolean;
readonly "aria-activedescendant": string | undefined;
};
scrollIntoView(value?: T): void;
getOptionId(value: T): string;
get valueAsString(): string;
getOptionLabel: (value: T) => string;
/**
* Gets the attributes for the option element.
* @param value The value of the option.
* @param label The label to display for the option. If not provided, the value will be stringified.
* @param onSelect An optional callback to call when the option is selected, overriding the default behavior.
* @returns The attributes for the option element.
*/
getOption(value: T, label?: string, onSelect?: () => void): {
readonly id: string;
readonly "data-melt-combobox-option": "";
readonly "data-value": string;
readonly "data-label": string;
readonly "aria-hidden": true | undefined;
readonly "aria-selected": boolean;
readonly "data-highlighted": "" | undefined;
readonly tabindex: -1;
readonly role: "option";
readonly onmouseover: () => void;
readonly onclick: () => void;
};
getOptionsEls(): HTMLElement[];
getOptions(): T[];
highlight(value: T): void;
highlightNext(): void;
highlightPrev(): void;
highlightFirst(): void;
highlightLast(): void;
}
export {};