@spark-web/combobox/dist/declarations/src/combobox.d.ts

--- title: Combobox storybookPath: forms-combobox--default isExperimentalPackage: true ---

/// <reference types="react" />
import type { DataAttributeMap } from '@spark-web/utils/internal';
import type { GetOptionLabel, GetOptionValue, GroupBase } from 'react-select';
declare type Nullable<T> = T | null;
declare type Awaitable<T> = T | Promise<T>;
declare type DefaultOption<Item = unknown> = {
    option: Item;
    position?: 'start' | 'end';
};
export declare type ComboboxProps<Item = unknown> = {
    /** Sets data attributes on the component. */
    data?: DataAttributeMap;
    /**
     * Resolves option data to a string to be displayed as the label by components.
     *
     * Note: Failure to resolve to a string type can interfere with filtering and
     * screen reader support.
     */
    getOptionLabel?: GetOptionLabel<Item>;
    /** Resolves option data to a string to compare options and specify value attributes. */
    getOptionValue?: GetOptionValue<Item>;
    /** The value of the input. */
    inputValue?: string;
    /** When true, shows a loading indicator in the dropdown instead of results. */
    isLoading?: boolean;
    /** Array of items for the user to select from. */
    items: Awaitable<(Item | GroupBase<Item>)[]>;
    /** Whether the menu should use a portal, and where it should attach. */
    menuPortalTarget?: HTMLElement | null;
    /** Called when an item is selected. */
    onChange?: (value: Nullable<Item>) => void;
    /** Called whenever the input value changes. Use to filter the items. */
    onInputChange?: (inputValue: string) => void;
    /** The text that appears in the form control when it has no value set. */
    placeholder?: string;
    /** The selected item. */
    value?: Nullable<Item>;
    /** Option that will be displayed regardless of filter results */
    defaultOption?: DefaultOption<Item>;
    /** Disable filtering of options when options is controlled */
    disableFilter?: boolean;
    /**
     * Element to display at the start of the input, similar to TextInput's startAdornment.
     */
    startAdornment?: React.ReactNode;
    /** Support for multi-value select. When enabled, selected options are rendered as tags. */
    isMulti?: boolean;
};
export declare const useAwaitableItems: <Item>(awaitableItems: Awaitable<Item[]>) => {
    loading: boolean;
    items: Item[];
};
export declare const Combobox: <Item>({ data, getOptionLabel, getOptionValue, inputValue, isLoading, items: _items, menuPortalTarget, onChange, onInputChange, placeholder, value, defaultOption, disableFilter, startAdornment, isMulti, }: ComboboxProps<Item>) => import("@emotion/react/jsx-runtime").JSX.Element;
export {};