monday-ui-react-core/dist/esm/components/Combobox/Combobox.d.ts

Official monday.com UI resources for application development in React.js

import React from "react";
import { BASE_SIZES } from "../../constants";
import { ElementContent, SubIcon, VibeComponentProps } from "../../types";
import { IComboboxCategoryMap, IComboboxOption } from "./components/ComboboxConstants";
import IconButton from "../IconButton/IconButton";
import MenuButton from "../MenuButton/MenuButton";
export interface ComboboxProps extends VibeComponentProps {
    className?: string;
    optionClassName?: string;
    searchWrapperClassName?: string;
    /**
     * Placeholder to show when no value was selected
     */
    placeholder?: string;
    /**
     * Unique element id
     */
    id?: string;
    /**
     * A message that will be displayed inside the combo box when no results are found
     */
    noResultsMessage?: string;
    disabled?: boolean;
    options?: IComboboxOption[];
    categories?: IComboboxCategoryMap;
    /**
     * Divider between categories sections
     */
    withCategoriesDivider?: boolean;
    size?: (typeof BASE_SIZES)[keyof typeof BASE_SIZES];
    optionLineHeight?: number;
    optionsListHeight?: number;
    autoFocus?: boolean;
    /**
     * Callback that called after clicking on the add new combo box button.
     * @param {string} _filterValue
     */
    onAddNew?: (value: string) => void;
    /**
     * The label of the button that appears at the end of the combo box when the search does not return appropriate options
     */
    addNewLabel?: ((label: string) => ElementContent) | string;
    filter?: (filterValue: string, options: IComboboxOption[]) => IComboboxOption[];
    /**
     * Default search input
     */
    defaultFilter?: string;
    disableFilter?: boolean;
    /**
     * For controlled search input. If provided, `defaultFilter` will be ignored
     */
    filterValue?: string;
    onFilterChanged?: (value: string) => void;
    /**
     * Display the combo box with loading state
     */
    loading?: boolean;
    /**
     * on mouse hover callback for option
     */
    onOptionHover?: (event: React.MouseEvent, index: number, option: IComboboxOption) => void;
    /**
     * on mouse leave callback for option
     */
    onOptionLeave?: () => void;
    /**
     * Allowed to the following behavior: scrolling automatically to the combo box's selected option
     */
    shouldScrollToSelectedItem?: boolean;
    noResultsRenderer?: () => JSX.Element;
    stickyCategories?: boolean;
    /** By default, the first option will be selected, when focusing selecting the first option, or when changing items */
    defaultVisualFocusFirstIndex?: boolean;
    /** Clear the filter/search on selection (click or enter) */
    clearFilterOnSelection?: boolean;
    /** Replace the regular appearance of combo box option with custom renderer. */
    optionRenderer?: (option: IComboboxOption) => JSX.Element;
    /** Maximum options count without scroll */
    maxOptionsWithoutScroll?: number;
    /**
     * Using virtualized list for rendering only the items which visible to the user in any given user (performance optimization)
     */
    renderOnlyVisibleOptions?: boolean;
    /**
     * On option click callback
     */
    onClick?: (optionData: IComboboxOption) => void;
    /**
     * Custom search icon
     */
    searchIcon?: SubIcon;
    searchInputAriaLabel?: string;
    debounceRate?: number;
    searchInputRef?: React.RefObject<HTMLInputElement>;
    /**
     * Render additional action within the right section of search component.
     */
    renderAction?: React.ReactElement<typeof IconButton | typeof MenuButton>;
    /**
     * If true, hides the additional action when the user types in the search input.
     */
    hideRenderActionOnInput?: boolean;
}
declare const _default: ((import("../../types/VibeComponent").default<ComboboxProps, unknown> & Partial<{
    sizes: {
        readonly SMALL: "small";
        readonly MEDIUM: "medium";
        readonly LARGE: "large";
    };
    iconTypes: typeof import("./components/ComboboxConstants").ComboboxOptionIconType;
}>) | (React.FC<ComboboxProps> & Partial<{
    sizes: {
        readonly SMALL: "small";
        readonly MEDIUM: "medium";
        readonly LARGE: "large";
    };
    iconTypes: typeof import("./components/ComboboxConstants").ComboboxOptionIconType;
}>)) & {
    sizes: {
        readonly SMALL: "small";
        readonly MEDIUM: "medium";
        readonly LARGE: "large";
    };
    iconTypes: typeof import("./components/ComboboxConstants").ComboboxOptionIconType;
};
export default _default;