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

Grafana Components Library

export interface CascaderProps {
    /** The separator between levels in the search */
    separator?: string;
    placeholder?: string;
    /** As the onSelect handler reports only the leaf node selected, the leaf nodes should have unique value. */
    options: CascaderOption[];
    /** Changes the value for every selection, including branch nodes. Defaults to true. */
    changeOnSelect?: boolean;
    onSelect(val: string): void;
    /** Sets the width to a multiple of 8px. Should only be used with inline forms. Setting width of the container is preferred in other cases.*/
    width?: number;
    /** Single string that needs to be the same as value of the last item in the selection chain. */
    initialValue?: string;
    allowCustomValue?: boolean;
    /** A function for formatting the message for custom value creation. Only applies when allowCustomValue is set to true*/
    formatCreateLabel?: (val: string) => string;
    /** If true all levels are shown in the input by simple concatenating the labels */
    displayAllSelectedLevels?: boolean;
    onBlur?: () => void;
    /** When mounted focus automatically on the input */
    autoFocus?: boolean;
    /** Keep the dropdown open all the time, useful in case whole cascader visibility is controlled by the parent */
    alwaysOpen?: boolean;
    /** Don't show what is selected in the cascader input/search. Useful when input is used just as search and the
        cascader is hidden after selection. */
    hideActiveLevelLabel?: boolean;
    disabled?: boolean;
    /** ID for the underlying Select/Cascader component */
    id?: string;
    /** Whether you can clear the selected value or not */
    isClearable?: boolean;
    'data-testid'?: string;
}
export interface CascaderOption {
    /**
     *  The value used under the hood
     */
    value: string;
    /**
     *  The label to display in the UI
     */
    label: string;
    /** Items will be just flattened into the main list of items recursively. */
    items?: CascaderOption[];
    disabled?: boolean;
    /** Avoid using */
    title?: string;
    /**  Children will be shown in a submenu. Use 'items' instead, as 'children' exist to ensure backwards compatibility.*/
    children?: CascaderOption[];
}
/**
 * The cascader component is a Select with a cascading flyout menu. When you have lots of options in your select, they can be hard to navigate from a regular dropdown list. In that case you can use the cascader to organize your options into groups hierarchically. Just like in the Select component, the cascader input doubles as a search field to quickly jump to a selection without navigating the list.
 *
 * https://developers.grafana.com/ui/latest/index.html?path=/docs/inputs-cascader--docs
 */
export declare const Cascader: import("react").MemoExoticComponent<({ separator, placeholder, options, changeOnSelect, onSelect, width, initialValue, allowCustomValue, formatCreateLabel, displayAllSelectedLevels, onBlur, autoFocus, alwaysOpen, hideActiveLevelLabel, disabled, id, isClearable, "data-testid": dataTestId, }: CascaderProps) => import("react/jsx-runtime").JSX.Element>;