import { ComponentProps } from 'react'; import { Icon } from '../Icon/Icon'; import { Props as InputProps } from '../Input/Input'; import { ComboboxOption } from './types'; interface ComboboxStaticProps extends Pick { /** * Allows the user to set a value which is not in the list of options. */ createCustomValue?: boolean; /** * Custom description text for the "create custom value" option. * Defaults to "Use custom value". */ customValueDescription?: string; /** * Custom container for rendering the dropdown menu via Portal */ portalContainer?: HTMLElement; /** * An array of options, or a function that returns a promise resolving to an array of options. * If a function, it will be called when the menu is opened and on keypress with the current search query. */ options: Array> | ((inputValue: string) => Promise>>); /** * Current selected value. Most consumers should pass a scalar value (string | number). However, sometimes with Async * it may be better to pass in an Option with a label to display. */ value?: T | ComboboxOption | null; /** * Defaults to full width of container. Number is a multiple of the spacing unit. 'auto' will size the input to the content. * */ width?: number | 'auto'; ['data-testid']?: string; /** * Called when the input loses focus. */ onBlur?: () => void; /** * Icon to display at the start of the ComboBox input */ prefixIcon?: ComponentProps['name']; } interface ClearableProps { /** * An `X` appears in the UI, which clears the input and sets the value to `null`. Do not use if you have no `null` case. */ isClearable: true; /** * onChange handler is called with the newly selected option. */ onChange: (option: ComboboxOption | null) => void; } interface NotClearableProps { /** * An `X` appears in the UI, which clears the input and sets the value to `null`. Do not use if you have no `null` case. */ isClearable?: false; /** * onChange handler is called with the newly selected option. */ onChange: (option: ComboboxOption) => void; } export type ComboboxBaseProps = (ClearableProps | NotClearableProps) & ComboboxStaticProps; export type AutoSizeConditionals = { width: 'auto'; /** * Needs to be set when width is 'auto' to prevent the input from shrinking too much */ minWidth: number; /** * Recommended to set when width is 'auto' to prevent the input from growing too much. */ maxWidth?: number; } | { width?: number; minWidth?: never; maxWidth?: never; }; export type ComboboxProps = ComboboxBaseProps & AutoSizeConditionals; export declare const VIRTUAL_OVERSCAN_ITEMS = 4; /** * A performant and accessible combobox component that supports both synchronous and asynchronous options loading. It provides type-ahead filtering, keyboard navigation, and virtual scrolling for handling large datasets efficiently. * Replaces the Select component, and has better performance. * * https://developers.grafana.com/ui/latest/index.html?path=/docs/inputs-combobox--docs * @alpha */ export declare const Combobox: (props: ComboboxProps) => import("react/jsx-runtime").JSX.Element; export {};