@grafana/ui/dist/types/components/Combobox/Combobox.d.ts

Grafana Components Library

import { type ComponentProps } from 'react';
import { Icon } from '../Icon/Icon';
import { type Props as InputProps } from '../Input/Input';
import { type ComboboxOption } from './types';
interface ComboboxStaticProps<T extends string | number> extends Pick<InputProps, 'placeholder' | 'autoFocus' | 'id' | 'aria-labelledby' | 'disabled' | 'loading' | 'invalid'> {
    /**
     * 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;
    /**
     * 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<ComboboxOption<T>> | ((inputValue: string) => Promise<Array<ComboboxOption<T>>>);
    /**
     * 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<T> | 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<typeof Icon>['name'];
    /**
     * Message to display when there are no options found. Defaults to "No options found."
     */
    noOptionsMessage?: string;
    /**
     * When set, the dropdown open state is fully controlled by the parent. Use with {@link onIsOpenChange}
     * (e.g. open the list after a tab click or other user action). Omit for normal uncontrolled behavior.
     */
    isOpen?: boolean;
    /**
     * Called whenever the menu opens or closes. Use with {@link isOpen} for controlled mode, or alone to
     * observe open state.
     */
    onIsOpenChange?: (isOpen: boolean) => void;
}
interface ClearableProps<T extends string | number> {
    /**
     * 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<T> | null) => void;
}
interface NotClearableProps<T extends string | number> {
    /**
     * 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<T>) => void;
}
export type ComboboxBaseProps<T extends string | number> = (ClearableProps<T> | NotClearableProps<T>) & ComboboxStaticProps<T>;
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<T extends string | number> = ComboboxBaseProps<T> & AutoSizeConditionals;
/**
 * 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: <T extends string | number>(props: ComboboxProps<T>) => import("react/jsx-runtime").JSX.Element;
export {};