import { AsyncTermSearcher, Key, Keyed } from '@synnaxlabs/x';
import { ReactElement, ReactNode } from 'react';
import { Color } from '../color';
import { Dropdown } from '../dropdown';
import { Input } from '../input';
import { List as CoreList } from '../list';
import { UseSelectMultipleProps } from '../list/useSelect';
import { RenderProp } from '../util/renderProp';
export interface MultipleProps<K extends Key = Key, E extends Keyed<K> = Keyed<K>> extends Omit<Dropdown.DialogProps, "visible" | "onChange" | "children" | "close">, Omit<UseSelectMultipleProps<K, E>, "data">, Omit<CoreList.ListProps<K, E>, "children">, Pick<Input.TextProps, "placeholder">, Partial<Pick<CoreList.VirtualCoreProps<K, E>, "itemHeight">> {
    columns?: Array<CoreList.ColumnSpec<K, E>>;
    searcher?: AsyncTermSearcher<string, K, E>;
    entryRenderKey?: keyof E | ((e: E) => string | number);
    renderTag?: RenderProp<MultipleTagProps<K, E>>;
    onTagDragStart?: (e: React.DragEvent<HTMLDivElement>, key: K) => void;
    onTagDragEnd?: (e: React.DragEvent<HTMLDivElement>, key: K) => void;
    children?: CoreList.VirtualCoreProps<K, E>["children"];
    dropdownVariant?: Dropdown.Variant;
    addPlaceholder?: ReactNode;
    actions?: Input.ExtensionProps["children"];
}
/**
 * Allows a user to browse, search for, and select multiple values from a list of
 * options. It's important to note that Select maintains no internal selection state.
 * The caller must provide the selected value via the `value` prop and handle any
 * changes via the `onChange` prop.
 *
 * @param props - The props for the component. Any additional props will be passed to
 * the input group containing the selection input and the selected tags.
 * @param props.data - The data to be used to populate the select options.
 * @param props.columns - The columns to be used to render the select options in the
 * dropdown. See the {@link ListColumn} type for more details on how to configure
 * columns.
 * @param props.entryRenderKey - The option field rendered for each tag when selected in the
 * input group. Defaults to "key".
 * @param props.location - Whether to render the dropdown above or below the select
 * component. Defaults to "below".
 * @param props.onChange - The callback to be invoked when the selected value changes.
 * @param props.value - The currently selected value.
 */
export declare const Multiple: <K extends Key = Key, E extends Keyed<K> = Keyed<K>>({ onChange, value, className, data, columns, entryRenderKey, emptyContent, searcher, renderTag, placeholder, onTagDragStart, allowMultiple, allowNone, replaceOnSingle, onTagDragEnd, style, addPlaceholder, children, dropdownVariant, actions, ...props }: MultipleProps<K, E>) => ReactElement;
export interface MultipleTagProps<K extends Key, E extends Keyed<K>> {
    key: K;
    entryKey: K;
    entryRenderKey: keyof E | ((e: E) => string | number);
    entry?: E;
    color?: Color.Crude;
    loading: boolean;
    onClose?: () => void;
    onDragStart: (e: React.DragEvent<HTMLDivElement>) => void;
    onDragEnd?: (e: React.DragEvent<HTMLDivElement>) => void;
}
export declare const MultipleTag: <K extends Key, E extends Keyed<K>>({ entryKey, entryRenderKey, entry, loading, ...props }: MultipleTagProps<K, E>) => ReactElement;
//# sourceMappingURL=Multiple.d.ts.map