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

React components library focused on usability, accessibility and developer experience

import { ExtendComponent, Factory, MantineSize, MantineThemeComponent, StylesApiProps } from '../../core';
import { __PopoverProps } from '../Popover';
import { ComboboxChevron, ComboboxChevronProps } from './ComboboxChevron/ComboboxChevron';
import { ComboboxClearButton, ComboboxClearButtonProps } from './ComboboxClearButton/ComboboxClearButton';
import { ComboboxDropdown, ComboboxDropdownProps } from './ComboboxDropdown/ComboboxDropdown';
import { ComboboxDropdownTarget, ComboboxDropdownTargetProps } from './ComboboxDropdownTarget/ComboboxDropdownTarget';
import { ComboboxEmpty, ComboboxEmptyProps } from './ComboboxEmpty/ComboboxEmpty';
import { ComboboxEventsTarget, ComboboxEventsTargetProps } from './ComboboxEventsTarget/ComboboxEventsTarget';
import { ComboboxFooter, ComboboxFooterProps } from './ComboboxFooter/ComboboxFooter';
import { ComboboxGroup, ComboboxGroupProps } from './ComboboxGroup/ComboboxGroup';
import { ComboboxHeader, ComboboxHeaderProps } from './ComboboxHeader/ComboboxHeader';
import { ComboboxHiddenInput, ComboboxHiddenInputProps } from './ComboboxHiddenInput/ComboboxHiddenInput';
import { ComboboxOption, ComboboxOptionProps } from './ComboboxOption/ComboboxOption';
import { ComboboxOptions, ComboboxOptionsProps } from './ComboboxOptions/ComboboxOptions';
import { ComboboxSearch, ComboboxSearchProps } from './ComboboxSearch/ComboboxSearch';
import { ComboboxTarget, ComboboxTargetProps } from './ComboboxTarget/ComboboxTarget';
import { ComboboxStore } from './use-combobox/use-combobox';
export type ComboboxStylesNames = 'options' | 'dropdown' | 'option' | 'search' | 'empty' | 'footer' | 'header' | 'group' | 'groupLabel';
export type ComboboxCSSVariables = {
    options: '--combobox-option-fz' | '--combobox-option-padding';
    dropdown: '--combobox-padding' | '--combobox-option-fz' | '--combobox-option-padding';
};
export interface ComboboxProps extends __PopoverProps, StylesApiProps<ComboboxFactory> {
    __staticSelector?: string;
    /** Combobox content */
    children?: React.ReactNode;
    /** Combobox store, can be used to control combobox state */
    store?: ComboboxStore;
    /** Called when item is selected with the `Enter` key or by clicking it */
    onOptionSubmit?: (value: string, optionProps: ComboboxOptionProps) => void;
    /** Controls items `font-size` and `padding` @default 'sm' */
    size?: MantineSize | (string & {});
    /** Controls `padding` of the dropdown @default 4 */
    dropdownPadding?: React.CSSProperties['padding'];
    /** Determines whether selection should be reset when option is hovered @default false */
    resetSelectionOnOptionHover?: boolean;
    /** Determines whether the `Combobox` value can be changed */
    readOnly?: boolean;
}
export type ComboboxFactory = Factory<{
    props: ComboboxProps;
    ref: HTMLDivElement;
    stylesNames: ComboboxStylesNames;
    vars: ComboboxCSSVariables;
    staticComponents: {
        Target: typeof ComboboxTarget;
        Dropdown: typeof ComboboxDropdown;
        Options: typeof ComboboxOptions;
        Option: typeof ComboboxOption;
        Search: typeof ComboboxSearch;
        Empty: typeof ComboboxEmpty;
        Chevron: typeof ComboboxChevron;
        Footer: typeof ComboboxFooter;
        Header: typeof ComboboxHeader;
        EventsTarget: typeof ComboboxEventsTarget;
        DropdownTarget: typeof ComboboxDropdownTarget;
        Group: typeof ComboboxGroup;
        ClearButton: typeof ComboboxClearButton;
        HiddenInput: typeof ComboboxHiddenInput;
    };
}>;
export declare const Combobox: {
    (_props: ComboboxProps): import("react/jsx-runtime").JSX.Element;
    extend: (c: ExtendComponent<ComboboxFactory>) => MantineThemeComponent;
    classes: any;
    varsResolver: import("../..").VarsResolver<{
        props: ComboboxProps;
        ref: HTMLDivElement;
        stylesNames: ComboboxStylesNames;
        vars: ComboboxCSSVariables;
        staticComponents: {
            Target: typeof ComboboxTarget;
            Dropdown: typeof ComboboxDropdown;
            Options: typeof ComboboxOptions;
            Option: typeof ComboboxOption;
            Search: typeof ComboboxSearch;
            Empty: typeof ComboboxEmpty;
            Chevron: typeof ComboboxChevron;
            Footer: typeof ComboboxFooter;
            Header: typeof ComboboxHeader;
            EventsTarget: typeof ComboboxEventsTarget;
            DropdownTarget: typeof ComboboxDropdownTarget;
            Group: typeof ComboboxGroup;
            ClearButton: typeof ComboboxClearButton;
            HiddenInput: typeof ComboboxHiddenInput;
        };
    }>;
    displayName: string;
    Target: import("../..").MantineComponent<{
        props: ComboboxTargetProps;
        ref: HTMLElement;
        compound: true;
    }>;
    Dropdown: import("../..").MantineComponent<{
        props: ComboboxDropdownProps;
        ref: HTMLDivElement;
        stylesNames: import("./ComboboxDropdown/ComboboxDropdown").ComboboxDropdownStylesNames;
        compound: true;
    }>;
    Options: import("../..").MantineComponent<{
        props: ComboboxOptionsProps;
        ref: HTMLDivElement;
        stylesNames: import("./ComboboxOptions/ComboboxOptions").ComboboxOptionsStylesNames;
        compound: true;
    }>;
    Option: import("../..").MantineComponent<{
        props: ComboboxOptionProps;
        ref: HTMLDivElement;
        stylesNames: import("./ComboboxOption/ComboboxOption").ComboboxOptionStylesNames;
        compound: true;
    }>;
    Search: import("../..").MantineComponent<{
        props: ComboboxSearchProps;
        ref: HTMLInputElement;
        stylesNames: import("./ComboboxSearch/ComboboxSearch").ComboboxSearchStylesNames;
    }>;
    Empty: import("../..").MantineComponent<{
        props: ComboboxEmptyProps;
        ref: HTMLDivElement;
        stylesNames: import("./ComboboxEmpty/ComboboxEmpty").ComboboxEmptyStylesNames;
        compound: true;
    }>;
    Chevron: import("../..").MantineComponent<{
        props: ComboboxChevronProps;
        ref: SVGSVGElement;
        stylesNames: import("./ComboboxChevron/ComboboxChevron").ComboboxChevronStylesNames;
        vars: import("./ComboboxChevron/ComboboxChevron").ComboboxChevronCSSVariables;
    }>;
    Footer: import("../..").MantineComponent<{
        props: ComboboxFooterProps;
        ref: HTMLDivElement;
        stylesNames: import("./ComboboxFooter/ComboboxFooter").ComboboxFooterStylesNames;
        compound: true;
    }>;
    Header: import("../..").MantineComponent<{
        props: ComboboxHeaderProps;
        ref: HTMLDivElement;
        stylesNames: import("./ComboboxHeader/ComboboxHeader").ComboboxHeaderStylesNames;
        compound: true;
    }>;
    EventsTarget: import("../..").MantineComponent<{
        props: ComboboxEventsTargetProps;
        ref: HTMLElement;
        compound: true;
    }>;
    DropdownTarget: import("../..").MantineComponent<{
        props: ComboboxDropdownTargetProps;
        ref: HTMLElement;
        compound: true;
    }>;
    Group: import("../..").MantineComponent<{
        props: ComboboxGroupProps;
        ref: HTMLDivElement;
        stylesNames: import("./ComboboxGroup/ComboboxGroup").ComboboxGroupStylesNames;
        compound: true;
    }>;
    ClearButton: typeof ComboboxClearButton;
    HiddenInput: typeof ComboboxHiddenInput;
};
export declare namespace Combobox {
    type Props = ComboboxProps;
    type StylesNames = ComboboxStylesNames;
    type Factory = ComboboxFactory;
    namespace Dropdown {
        type Props = ComboboxDropdownProps;
    }
    namespace Options {
        type Props = ComboboxOptionsProps;
    }
    namespace Option {
        type Props = ComboboxOptionProps;
    }
    namespace Target {
        type Props = ComboboxTargetProps;
    }
    namespace Chevron {
        type Props = ComboboxChevronProps;
    }
    namespace Empty {
        type Props = ComboboxEmptyProps;
    }
    namespace Search {
        type Props = ComboboxSearchProps;
    }
    namespace Footer {
        type Props = ComboboxFooterProps;
    }
    namespace Header {
        type Props = ComboboxHeaderProps;
    }
    namespace DropdownTarget {
        type Props = ComboboxDropdownTargetProps;
    }
    namespace EventsTarget {
        type Props = ComboboxEventsTargetProps;
    }
    namespace Group {
        type Props = ComboboxGroupProps;
    }
    namespace ClearButton {
        type Props = ComboboxClearButtonProps;
    }
    namespace HiddenInput {
        type Props = ComboboxHiddenInputProps;
    }
}