UNPKG

4.47 kBTypeScriptView Raw
1import * as React from "react";
2import { AbstractPureComponent2, TagInputProps } from "@blueprintjs/core";
3import { ListItemsProps, SelectPopoverProps } from "../../common";
4import { QueryList } from "../query-list/queryList";
5export interface MultiSelect2Props<T> extends ListItemsProps<T>, SelectPopoverProps {
6 /**
7 * Whether the component is non-interactive.
8 * If true, the list's item renderer will not be called.
9 *
10 * @default false
11 */
12 disabled?: boolean;
13 /**
14 * Whether the component should take up the full width of its container.
15 */
16 fill?: boolean;
17 /**
18 * Props to spread to the `Menu` listbox containing the selectable options.
19 */
20 menuProps?: React.HTMLAttributes<HTMLUListElement>;
21 /**
22 * If provided, this component will render a "clear" button inside its TagInput.
23 * Clicking that button will invoke this callback to clear all items from the current selection.
24 */
25 onClear?: () => void;
26 /**
27 * Callback invoked when an item is removed from the selection by
28 * removing its tag in the TagInput. This is generally more useful than
29 * `tagInputProps.onRemove` because it receives the removed value instead of
30 * the value's rendered `ReactNode` tag.
31 *
32 * It is not recommended to supply _both_ this prop and `tagInputProps.onRemove`.
33 */
34 onRemove?: (value: T, index: number) => void;
35 /**
36 * If true, the component waits until a keydown event in the TagInput
37 * before opening its popover.
38 *
39 * If false, the popover opens immediately after a mouse click focuses
40 * the component's TagInput.
41 *
42 * N.B. the behavior of this prop differs slightly from the same one
43 * in the Suggest component; see https://github.com/palantir/blueprint/issues/4152.
44 *
45 * @default false
46 */
47 openOnKeyDown?: boolean;
48 /**
49 * Input placeholder text. Shorthand for `tagInputProps.placeholder`.
50 *
51 * @default "Search..."
52 */
53 placeholder?: string;
54 /** Controlled selected values. */
55 selectedItems: T[];
56 /**
57 * Props to pass to the [TagInput component](##core/components/tag-input).
58 *
59 * Some properties are unavailable:
60 * - `tagInputProps.inputValue`: use `query` instead
61 * - `tagInputProps.onInputChange`: use `onQueryChange` instead
62 *
63 * Some properties are available, but discouraged. If you find yourself using these due to a bug in MultiSelect2
64 * or some edge case which is not handled by `onItemSelect`, `onItemsPaste`, `onRemove`, and `onClear`, please
65 * file a bug in the Blueprint repo:
66 * - `tagInputProps.onChange`
67 *
68 * Notes for `tagInputProps.rightElement`:
69 * - you are responsible for disabling any elements you may render here when the overall `MultiSelect2` is disabled
70 * - if the `onClear` prop is defined, this element will override/replace the default rightElement,
71 * which is a "clear" button that removes all items from the current selection.
72 */
73 tagInputProps?: Partial<Omit<TagInputProps, "inputValue" | "onInputChange">>;
74 /** Custom renderer to transform an item into tag content. */
75 tagRenderer: (item: T) => React.ReactNode;
76}
77export interface MultiSelect2State {
78 isOpen: boolean;
79}
80/**
81 * Multi select (v2) component.
82 *
83 * @see https://blueprintjs.com/docs/#select/multi-select2
84 */
85export declare class MultiSelect2<T> extends AbstractPureComponent2<MultiSelect2Props<T>, MultiSelect2State> {
86 static displayName: string;
87 private listboxId;
88 static defaultProps: {
89 disabled: boolean;
90 fill: boolean;
91 placeholder: string;
92 };
93 /** @deprecated no longer necessary now that the TypeScript parser supports type arguments on JSX element tags */
94 static ofType<U>(): new (props: MultiSelect2Props<U>) => MultiSelect2<U>;
95 state: MultiSelect2State;
96 input: HTMLInputElement | null;
97 queryList: QueryList<T> | null;
98 private refHandlers;
99 componentDidUpdate(prevProps: MultiSelect2Props<T>): void;
100 render(): JSX.Element;
101 private renderQueryList;
102 private getPopoverTargetRenderer;
103 private handleItemSelect;
104 private handleQueryChange;
105 private handlePopoverInteraction;
106 private handlePopoverOpened;
107 private handleTagRemove;
108 private getTagInputAddHandler;
109 private getTagInputKeyDownHandler;
110 private getTagInputKeyUpHandler;
111 private handleClearButtonClick;
112}