melt/dist/builders/Select.svelte.d.ts

The next generation of Melt UI. Built for Svelte 5.

import type { MaybeGetter } from "../types";
import { type MaybeMultiple, type OnMultipleChange } from "../utils/selection-state.svelte";
import { BasePopover, type PopoverProps } from "./Popover.svelte";
declare const createIds: () => {
    option: string;
    trigger: string;
    content: string;
};
export type SelectProps<T, Multiple extends boolean = false> = Omit<PopoverProps, "sameWidth"> & {
    /**
     * If `true`, multiple options can be selected at the same time.
     *
     * @default false
     */
    multiple?: MaybeGetter<Multiple | undefined>;
    /**
     * The value for the Select.
     *
     * 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 currently highlighted value.
     */
    highlighted?: MaybeGetter<T | null | undefined>;
    /**
     * Called when the highlighted value changes.
     */
    onHighlightChange?: (highlighted: T | null) => void;
    /**
     * How many time (in ms) the typeahead string is held before it is cleared
     * @default 500
     */
    typeaheadTimeout?: MaybeGetter<number | undefined>;
    /**
     * If the content should have the same width as the trigger
     *
     * @default true
     */
    sameWidth?: MaybeGetter<boolean | undefined>;
    /**
     * 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>;
};
export declare class Select<T, Multiple extends boolean = false> extends BasePopover {
    #private;
    multiple: Multiple;
    scrollAlignment: "center" | "nearest" | null;
    ids: ReturnType<typeof createIds> & BasePopover["ids"];
    readonly typeaheadTimeout: number;
    readonly typeahead: (letter: string) => {
        value: any;
        typeahead: string;
        current: boolean;
    } | undefined;
    constructor(props?: SelectProps<T, Multiple>);
    getOptionLabel: (value: T) => string;
    get value(): import("../utils/selection-state.svelte").SelectionStateValue<T, Multiple>;
    set value(value: import("../utils/selection-state.svelte").SelectionStateValue<T, Multiple>);
    get highlighted(): T | null;
    set highlighted(v: T | null);
    get valueAsString(): string;
    isSelected: (value: T) => boolean;
    select: (value: T) => void;
    get label(): {
        for: string;
        onclick: (e: MouseEvent & {
            currentTarget: EventTarget & HTMLLabelElement;
        }) => void;
    };
    get trigger(): {
        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;
        readonly onclick: (e: Event) => void;
    } & {
        "data-melt-select-trigger": string;
        id: string;
        role: string;
        "aria-expanded": boolean;
        "aria-controls": string;
        "aria-owns": string;
        onkeydown: (e: KeyboardEvent) => 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-select-content": "";
        readonly role: "listbox";
        readonly "aria-expanded": boolean;
        readonly "aria-activedescendant": string | undefined;
        readonly onkeydown: (e: KeyboardEvent) => void;
    };
    getOptionId(value: T): string;
    getOption(value: T, label?: string): {
        readonly "data-melt-select-option": "";
        readonly "data-value": string;
        readonly "data-label": string;
        readonly "aria-hidden": true | undefined;
        readonly "aria-selected": boolean;
        readonly "data-highlighted": "" | undefined;
        readonly role: "option";
        readonly tabindex: -1;
        readonly onmouseover: () => void;
        readonly onclick: () => void;
    };
}
export {};