@mantine/core/lib/components/ComboboxPopover/ComboboxPopover.d.ts

React components library focused on usability, accessibility and developer experience

import { Factory, Primitive, StylesApiProps } from '../../core';
import { ComboboxData, ComboboxItem, ComboboxLikeRenderOptionInput, ComboboxLikeStylesNames, ComboboxProps, OptionsFilter } from '../Combobox';
import { ScrollAreaProps } from '../ScrollArea';
import { ComboboxPopoverValue } from './ComboboxPopover.types';
import { ComboboxPopoverTarget } from './ComboboxPopoverTarget';
export type ComboboxPopoverStylesNames = ComboboxLikeStylesNames;
export interface ComboboxPopoverProps<Multiple extends boolean = false, Value extends Primitive = string> extends StylesApiProps<ComboboxPopoverFactory> {
    /** If set, multiple items can be selected at the same time */
    multiple?: Multiple;
    /** Controlled component value */
    value?: ComboboxPopoverValue<Multiple, Value>;
    /** Uncontrolled component default value */
    defaultValue?: ComboboxPopoverValue<Multiple, Value>;
    /** Called when value changes */
    onChange?: (value: ComboboxPopoverValue<Multiple, Value>) => void;
    /** Data used to generate options */
    data?: ComboboxData<Value>;
    /** Controlled dropdown opened state */
    dropdownOpened?: boolean;
    /** Uncontrolled dropdown initial opened state */
    defaultDropdownOpened?: boolean;
    /** Called when dropdown opens */
    onDropdownOpen?: () => void;
    /** Called when dropdown closes */
    onDropdownClose?: () => void;
    /** Called when option is submitted from dropdown with mouse click or Enter key */
    onOptionSubmit?: (value: Value) => void;
    /** Props passed down to Combobox component */
    comboboxProps?: ComboboxProps;
    /** Function based on which items are filtered and sorted */
    filter?: OptionsFilter<Value>;
    /** Maximum number of options displayed at a time @default Infinity */
    limit?: number;
    /** Determines whether the options should be wrapped with ScrollArea.AutoSize @default true */
    withScrollArea?: boolean;
    /** max-height of the dropdown @default 250 */
    maxDropdownHeight?: number | string;
    /** If set, the first option is selected when dropdown opens @default false */
    selectFirstOptionOnDropdownOpen?: boolean;
    /** Displays check icon near the selected option label @default true */
    withCheckIcon?: boolean;
    /** Aligns unchecked labels with the checked one @default false */
    withAlignedLabels?: boolean;
    /** Position of the check icon relative to the option label @default 'left' */
    checkIconPosition?: 'left' | 'right';
    /** Message displayed when no options match the search query or when there is no data */
    nothingFoundMessage?: React.ReactNode;
    /** Allows searching through options @default false */
    searchable?: boolean;
    /** Controlled search value */
    searchValue?: string;
    /** Default search value */
    defaultSearchValue?: string;
    /** Called when search changes */
    onSearchChange?: (value: string) => void;
    /** Allows deselecting the selected option by clicking it (only for single mode) @default true */
    allowDeselect?: boolean;
    /** A function to render content of the option, replaces the default content of the option */
    renderOption?: (item: ComboboxLikeRenderOptionInput<ComboboxItem>) => React.ReactNode;
    /** Props passed down to the underlying ScrollArea component in the dropdown */
    scrollAreaProps?: ScrollAreaProps;
    /** Props passed down to the hidden input */
    hiddenInputProps?: Omit<React.ComponentProps<'input'>, 'value'>;
    /** Hidden input name for form submission */
    name?: string;
    /** Hidden input form for form submission */
    form?: string;
    /** Content of the component */
    children?: React.ReactNode;
    /** Divider used to separate values in the hidden input value attribute @default ',' */
    hiddenInputValuesDivider?: string;
}
export type ComboboxPopoverFactory = Factory<{
    props: ComboboxPopoverProps;
    ref: HTMLDivElement;
    stylesNames: ComboboxPopoverStylesNames;
    signature: <Multiple extends boolean = false, Value extends Primitive = string>(props: ComboboxPopoverProps<Multiple, Value>) => React.JSX.Element;
    staticComponents: {
        Target: typeof ComboboxPopoverTarget;
    };
}>;
export declare const ComboboxPopover: (<Multiple extends boolean = false, Value extends Primitive = string>(props: ComboboxPopoverProps<Multiple, Value>) => React.JSX.Element) & import("../..").ThemeExtend<{
    props: ComboboxPopoverProps;
    ref: HTMLDivElement;
    stylesNames: ComboboxPopoverStylesNames;
    signature: <Multiple extends boolean = false, Value extends Primitive = string>(props: ComboboxPopoverProps<Multiple, Value>) => React.JSX.Element;
    staticComponents: {
        Target: typeof ComboboxPopoverTarget;
    };
}> & import("../..").ComponentClasses<{
    props: ComboboxPopoverProps;
    ref: HTMLDivElement;
    stylesNames: ComboboxPopoverStylesNames;
    signature: <Multiple extends boolean = false, Value extends Primitive = string>(props: ComboboxPopoverProps<Multiple, Value>) => React.JSX.Element;
    staticComponents: {
        Target: typeof ComboboxPopoverTarget;
    };
}> & {
    Target: typeof ComboboxPopoverTarget;
} & import("../..").FactoryComponentWithProps<{
    props: ComboboxPopoverProps;
    ref: HTMLDivElement;
    stylesNames: ComboboxPopoverStylesNames;
    signature: <Multiple extends boolean = false, Value extends Primitive = string>(props: ComboboxPopoverProps<Multiple, Value>) => React.JSX.Element;
    staticComponents: {
        Target: typeof ComboboxPopoverTarget;
    };
}> & {
    displayName?: string;
};