import { default as React } from 'react';
import { SelectOption } from './BaseSelectDropdown';
import { WithFeedbackAndAddonProps } from './WithFeedbackAndAddon';
export type MultiselectCounterMessage = {
    /**
     * Text that will be used when a single item is selected.
     */
    one: string | React.ReactNode;
    /**
     * Text that will be used when multiple item are selected.
     */
    many: string | React.ReactNode;
};
export type MultiselectOption = SelectOption & {};
export type MultiselectProps<T extends MultiselectOption> = Omit<WithFeedbackAndAddonProps, 'bsSize'> & {
    /**
     * Passed through as HTML attribute to the toggle button.
     */
    name?: string;
    /**
     * Passed as HTML attribute to the toggle button.
     *
     * @default Uses the value given to `name` if not provided explicitly.
     */
    id?: string;
    /**
     * Items to display in the dropdown menu.
     *
     * @default []
     */
    options?: T[];
    /**
     * Sets the ids of the selected options when the component is already mounted.
     */
    value?: string[];
    /**
     * Callback function triggered when an item is selected.
     *
     * @param selectedItemIds Array containing all the IDs that have been selected.
     *
     * @default () => {}
     */
    onChange?: (selectedItemIds: string[]) => void;
    /**
     * Text to display when nothing is selected.
     */
    placeholder?: string | React.ReactNode;
    /**
     * Defines whether the dropdown opens upwards.
     *
     * Set to `true` additionally disables autoDrop feature.
     *
     * @default false
     */
    dropup?: boolean;
    /**
     * Defines whether the dropdown opens right aligned to the dropdown toggle.
     *
     * Set to 'true' additionally disables autoDrop feature.
     *
     * @default false
     */
    pullRight?: boolean;
    /**
     * Enables or disables the autoDrop positioning feature.
     *
     * When enabled, the option list opens below or above the input depending on the surrounding space.
     *
     * @default true
     */
    autoDropDirection?: boolean;
    /**
     * Shows a loading spinner instead of the menu items if set to true.
     * @default false
     */
    isLoading?: boolean;
    /**
     * Defines the size of the select to be rendered.
     *
     * @default 'md'
     */
    bsSize?: 'sm' | 'md' | 'lg';
    /**
     * Defines the visual variant of the select.
     *
     * @default 'default'
     */
    variant?: 'default' | 'blank';
    /**
     * Option to disable the opening of the option list.
     *
     * @default false
     */
    disabled?: boolean;
    /**
     * Sets the input's tabindex attribute.
     *
     * The tabindex attribute allows developers to make HTML elements focusable, allow or prevent them from being
     * sequentially focusable (usually with the Tab key, hence the name) and determine their relative ordering for
     * sequential focus navigation.
     *
     * @default 0
     */
    tabIndex?: number;
    /**
     * Defines whether the Bootstrap error classes shall be added to the toggle element.
     *
     * @default false
     */
    hasError?: boolean;
    /**
     * Defines whether the selected items wrap around within the dropdown toggle.
     *
     * @default false
     */
    multiline?: boolean;
    /**
     * Defines whether the component should be filterable.
     *
     * @default false
     */
    useFilter?: boolean;
    /**
     * Set to show a clear button.
     *
     * @default false
     */
    useClear?: boolean;
    /**
     * Text that shall be shown when not match was found when filtering.
     */
    noItemMessage?: string | React.ReactNode;
    /**
     * Object that will render the number of selected items instead of individual items.
     *
     * Using this prop will disable the filter functionality.
     */
    counterMessage?: MultiselectCounterMessage;
    /**
     * Optional render function that is used to render the message how many items have been selected.
     *
     * Using this prop will disable the filter functionality.
     *
     * @param selectedAmount The total amount of selected items.
     */
    renderCounterMessage?: (selectedAmount: number) => React.ReactNode;
    /**
     * Set to show only the icon and not the label of selected item.
     *
     * @default false
     */
    showSelectedItemIcon?: boolean;
    /**
     * Set to show all item icons within the toggle element.
     *
     * Selected items are highlighted and unselected items are shown as inactive.
     *
     * @default false
     */
    showUnselectedItemIcons?: boolean;
    /**
     * Additional classes to be set to the dropdown.
     */
    dropdownClassName?: string;
    /**
     * Additional classes to be set to the select/input.
     */
    btnClassName?: string;
    /**
     * Additional classes to be set to the select wrapper
     */
    className?: string;
};
declare const Multiselect: (props: MultiselectProps<MultiselectOption>) => import("react/jsx-runtime").JSX.Element;
export default Multiselect;
