import * as React from "react"; import { AbstractPureComponent, type TagInputProps } from "@blueprintjs/core"; import { type ListItemsProps, type SelectPopoverProps } from "../../common"; import { QueryList } from "../query-list/queryList"; export interface MultiSelectProps extends ListItemsProps, SelectPopoverProps { /** * Element which triggers the multiselect popover. Providing this prop will replace the default TagInput * target thats rendered and move the search functionality to within the Popover. */ customTarget?: (selectedItems: T[], isOpen: boolean) => React.ReactNode; /** * Whether the component is non-interactive. * If true, the list's item renderer will not be called. * * @default false */ disabled?: boolean; /** * Whether the component should take up the full width of its container. */ fill?: boolean; /** * Props to spread to the `Menu` listbox containing the selectable options. */ menuProps?: React.HTMLAttributes; /** * If provided, this component will render a "clear" button inside its TagInput. * Clicking that button will invoke this callback to clear all items from the current selection. */ onClear?: () => void; /** * Callback invoked when an item is removed from the selection by * removing its tag in the TagInput. This is generally more useful than * `tagInputProps.onRemove` because it receives the removed value instead of * the value's rendered `ReactNode` tag. * * It is not recommended to supply _both_ this prop and `tagInputProps.onRemove`. */ onRemove?: (value: T, index: number) => void; /** * If true, the component waits until a keydown event in the TagInput * before opening its popover. * * If false, the popover opens immediately after a mouse click focuses * the component's TagInput. * * N.B. the behavior of this prop differs slightly from the same one * in the Suggest component; see https://github.com/palantir/blueprint/issues/4152. * * Ignored is customTarget prop is supplied. * * @default false */ openOnKeyDown?: boolean; /** * Input placeholder text. Shorthand for `tagInputProps.placeholder`. * * @default "Search..." */ placeholder?: string; /** Controlled selected values. */ selectedItems: T[]; /** * Props to pass to the [TagInput component](##core/components/tag-input). * * Some properties are unavailable: * - `tagInputProps.inputValue`: use `query` instead * - `tagInputProps.onInputChange`: use `onQueryChange` instead * * Some properties are available, but discouraged. If you find yourself using these due to a bug in MultiSelect * or some edge case which is not handled by `onItemSelect`, `onItemsPaste`, `onRemove`, and `onClear`, please * file a bug in the Blueprint repo: * - `tagInputProps.onChange` * * Notes for `tagInputProps.rightElement`: * - you are responsible for disabling any elements you may render here when the overall `MultiSelect` is disabled * - if the `onClear` prop is defined, this element will override/replace the default rightElement, * which is a "clear" button that removes all items from the current selection. * * This prop is passed to either the default `TagInput` or the `TagInput` rendered within the Popover * depending on whether `customTarget` is supplied. */ tagInputProps?: Partial>; /** Custom renderer to transform an item into tag content. */ tagRenderer: (item: T) => React.ReactNode; } /** Exported for testing, not part of public API */ export interface MultiSelectState { isOpen: boolean; } /** * Multi select component. * * @see https://blueprintjs.com/docs/#select/multi-select */ export declare class MultiSelect extends AbstractPureComponent, MultiSelectState> { static displayName: string; private listboxId; static defaultProps: { disabled: boolean; fill: boolean; placeholder: string; }; /** @deprecated no longer necessary now that the TypeScript parser supports type arguments on JSX element tags */ static ofType(): new (props: MultiSelectProps) => MultiSelect; state: MultiSelectState; input: HTMLInputElement | null; queryList: QueryList | null; private refHandlers; componentDidUpdate(prevProps: MultiSelectProps): void; render(): React.JSX.Element; private renderQueryList; private getPopoverTargetRenderer; private getTagInput; private handleItemSelect; private handleQueryChange; private handlePopoverInteraction; private handlePopoverOpened; private handleTagRemove; private getTagInputAddHandler; private getTagInputKeyDownHandler; private getTagInputKeyUpHandler; private handleClearButtonClick; }