@blueprintjs/select

  • Version 4.8.12
  • Published
  • 1.06 MB
  • 4 dependencies
  • Apache-2.0 license

Install

npm i @blueprintjs/select
yarn add @blueprintjs/select
pnpm add @blueprintjs/select

Overview

Components related to selecting items from a list

Index

Functions

Classes

Interfaces

Type Aliases

Namespaces

Functions

function executeItemsEqual

executeItemsEqual: <T>(
itemsEqualProp: ItemsEqualProp<T> | undefined,
itemA: T | null | undefined,
itemB: T | null | undefined
) => boolean;
  • Utility function for executing the ListItemsProps#itemsEqual prop to test for equality between two items.

    true if the two items are equivalent according to itemsEqualProp.

function getActiveItem

getActiveItem: <T>(activeItem: T | CreateNewItem | null | undefined) => T | null;
  • Returns the type of the the current active item. This will be a no-op unless the activeItem is undefined or a "Create Item" option, in which case null will be returned instead.

function getCreateNewItem

getCreateNewItem: () => CreateNewItem;
  • Returns an instance of a "Create Item" object.

function getFirstEnabledItem

getFirstEnabledItem: <T>(
items: T[],
itemDisabled?: keyof T | ((item: T, index: number) => boolean),
direction?: number,
startIndex?: number
) => T | CreateNewItem | null;
  • Get the next enabled item, moving in the given direction from the start index. A null return value means no suitable item was found.

    Parameter items

    the list of items

    Parameter itemDisabled

    callback to determine if a given item is disabled

    Parameter direction

    amount to move in each iteration, typically +/-1

    Parameter startIndex

    which index to begin moving from

function isCreateNewItem

isCreateNewItem: <T>(
item: T | CreateNewItem | null | undefined
) => item is CreateNewItem;
  • Type guard returning true if the provided item (e.g. the current activeItem) is a "Create Item" option.

function renderFilteredItems

renderFilteredItems: (
props: ItemListRendererProps<any>,
noResults?: React.ReactNode,
initialContent?: React.ReactNode | null
) => React.ReactNode;
  • ItemListRenderer helper method for rendering each item in filteredItems, with optional support for noResults (when filtered items is empty) and initialContent (when query is empty).

Classes

class MultiSelect

class MultiSelect<T> extends AbstractPureComponent2<
MultiSelectProps<T>,
IMultiSelectState
> {}
  • Multi select component.

    See Also

    • https://blueprintjs.com/docs/#select/multi-select

    Deprecated

    use { MultiSelect2 } from "@blueprintjs/select"

property defaultProps

static defaultProps: { fill: boolean; placeholder: string };

    property displayName

    static displayName: string;

      property input

      input: HTMLInputElement;

        property queryList

        queryList: QueryList<T>;

          property state

          state: IMultiSelectState;

            method componentDidUpdate

            componentDidUpdate: (prevProps: MultiSelectProps<T>) => void;

              method ofType

              static ofType: <U>() => new (props: MultiSelectProps<U>) => MultiSelect<U>;

                method render

                render: () => JSX.Element;

                  class MultiSelect2

                  class MultiSelect2<T> extends AbstractPureComponent2<
                  MultiSelect2Props<T>,
                  MultiSelect2State
                  > {}
                  • Multi select (v2) component.

                    See Also

                    • https://blueprintjs.com/docs/#select/multi-select2

                  property defaultProps

                  static defaultProps: { disabled: boolean; fill: boolean; placeholder: string };

                    property displayName

                    static displayName: string;

                      property input

                      input: HTMLInputElement;

                        property queryList

                        queryList: QueryList<T>;

                          property state

                          state: MultiSelect2State;

                            method componentDidUpdate

                            componentDidUpdate: (prevProps: MultiSelect2Props<T>) => void;

                              method ofType

                              static ofType: <U>() => new (props: MultiSelect2Props<U>) => MultiSelect2<U>;
                              • Deprecated

                                no longer necessary now that the TypeScript parser supports type arguments on JSX element tags

                              method render

                              render: () => JSX.Element;

                                class Omnibar

                                class Omnibar<T> extends React.PureComponent<OmnibarProps<T>> {}
                                • Omnibar component.

                                  See Also

                                  • https://blueprintjs.com/docs/#select/omnibar

                                property displayName

                                static displayName: string;

                                  method ofType

                                  static ofType: <U>() => new (props: OmnibarProps<U>) => Omnibar<U>;

                                    method render

                                    render: () => JSX.Element;

                                      class QueryList

                                      class QueryList<T> extends AbstractComponent2<
                                      QueryListProps<T>,
                                      IQueryListState<T>
                                      > {}
                                      • Query list component.

                                        See Also

                                        • https://blueprintjs.com/docs/#select/query-list

                                      constructor

                                      constructor(props: QueryListProps<T>, context?: any);

                                        property defaultProps

                                        static defaultProps: { disabled: boolean; resetOnQuery: boolean };

                                          property displayName

                                          static displayName: string;

                                            method componentDidUpdate

                                            componentDidUpdate: (prevProps: QueryListProps<T>) => void;

                                              method ofType

                                              static ofType: <U>() => new (props: QueryListProps<U>) => QueryList<U>;
                                              • Deprecated

                                                no longer necessary now that the TypeScript parser supports type arguments on JSX element tags

                                              method render

                                              render: () => JSX.Element;

                                                method scrollActiveItemIntoView

                                                scrollActiveItemIntoView: () => void;

                                                  method setActiveItem

                                                  setActiveItem: (activeItem: T | CreateNewItem | null) => void;

                                                    method setQuery

                                                    setQuery: (
                                                    query: string,
                                                    resetActiveItem?: boolean | undefined,
                                                    props?: Readonly<QueryListProps<T>> &
                                                    Readonly<{ children?: React.ReactNode }>
                                                    ) => void;

                                                      class Select

                                                      class Select<T> extends AbstractPureComponent2<SelectProps<T>, ISelectState> {}
                                                      • Select component.

                                                        See Also

                                                        • https://blueprintjs.com/docs/#select/select-component

                                                        Deprecated

                                                        use { Select2 } from "@blueprintjs/select"

                                                      property displayName

                                                      static displayName: string;

                                                        property inputElement

                                                        inputElement: HTMLInputElement;

                                                          property state

                                                          state: ISelectState;

                                                            method componentDidUpdate

                                                            componentDidUpdate: (prevProps: SelectProps<T>, prevState: ISelectState) => void;

                                                              method ofType

                                                              static ofType: <U>() => new (props: SelectProps<U>) => Select<U>;

                                                                method render

                                                                render: () => JSX.Element;

                                                                  class Select2

                                                                  class Select2<T> extends AbstractPureComponent2<Select2Props<T>, Select2State> {}
                                                                  • Select (v2) component.

                                                                    See Also

                                                                    • https://blueprintjs.com/docs/#select/select2

                                                                  property displayName

                                                                  static displayName: string;

                                                                    property inputElement

                                                                    inputElement: HTMLInputElement;

                                                                      property state

                                                                      state: Select2State;

                                                                        method componentDidUpdate

                                                                        componentDidUpdate: (
                                                                        prevProps: Select2Props<T>,
                                                                        prevState: Select2State
                                                                        ) => void;

                                                                          method ofType

                                                                          static ofType: <U>() => new (props: Select2Props<U>) => Select2<U>;
                                                                          • Deprecated

                                                                            no longer necessary now that the TypeScript parser supports type arguments on JSX element tags

                                                                          method render

                                                                          render: () => JSX.Element;

                                                                            class Suggest

                                                                            class Suggest<T> extends AbstractPureComponent2<SuggestProps<T>, ISuggestState<T>> {}
                                                                            • Suggest component.

                                                                              See Also

                                                                              • https://blueprintjs.com/docs/#select/suggest

                                                                              Deprecated

                                                                              use { Suggest2 } from "@blueprintjs/select"

                                                                            property defaultProps

                                                                            static defaultProps: Partial<SuggestProps<any>>;

                                                                              property displayName

                                                                              static displayName: string;

                                                                                property inputElement

                                                                                inputElement: HTMLInputElement;

                                                                                  property state

                                                                                  state: ISuggestState<T>;

                                                                                    method componentDidUpdate

                                                                                    componentDidUpdate: (
                                                                                    prevProps: SuggestProps<T>,
                                                                                    prevState: ISuggestState<T>
                                                                                    ) => void;

                                                                                      method ofType

                                                                                      static ofType: <U>() => new (props: SuggestProps<U>) => Suggest<U>;

                                                                                        method render

                                                                                        render: () => JSX.Element;

                                                                                          class Suggest2

                                                                                          class Suggest2<T> extends AbstractPureComponent2<
                                                                                          Suggest2Props<T>,
                                                                                          Suggest2State<T>
                                                                                          > {}
                                                                                          • Suggest (v2) component.

                                                                                            See Also

                                                                                            • https://blueprintjs.com/docs/#select/suggest2

                                                                                          property defaultProps

                                                                                          static defaultProps: Partial<Suggest2Props<any>>;

                                                                                            property displayName

                                                                                            static displayName: string;

                                                                                              property inputElement

                                                                                              inputElement: HTMLInputElement;

                                                                                                property state

                                                                                                state: Suggest2State<T>;

                                                                                                  method componentDidUpdate

                                                                                                  componentDidUpdate: (
                                                                                                  prevProps: Suggest2Props<T>,
                                                                                                  prevState: Suggest2State<T>
                                                                                                  ) => void;

                                                                                                    method ofType

                                                                                                    static ofType: <U>() => new (props: Suggest2Props<U>) => Suggest2<U>;
                                                                                                    • Deprecated

                                                                                                      no longer necessary now that the TypeScript parser supports type arguments on JSX element tags

                                                                                                    method render

                                                                                                    render: () => JSX.Element;

                                                                                                      Interfaces

                                                                                                      interface CreateNewItem

                                                                                                      interface CreateNewItem {}
                                                                                                      • The reserved type of the "Create Item" option in item lists. This is intended not to conflict with any custom item type T that might be used in item list.

                                                                                                      interface IMultiSelectProps

                                                                                                      interface IMultiSelectProps<T> extends ListItemsProps<T> {}
                                                                                                      • Deprecated

                                                                                                        use MultiSelectProps

                                                                                                      property fill

                                                                                                      fill?: boolean;
                                                                                                      • Whether the component should take up the full width of its container. This overrides popoverProps.fill and tagInputProps.fill.

                                                                                                      property onRemove

                                                                                                      onRemove?: (value: T, index: number) => 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.

                                                                                                      property openOnKeyDown

                                                                                                      openOnKeyDown?: boolean;
                                                                                                      • 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.

                                                                                                        false

                                                                                                      property placeholder

                                                                                                      placeholder?: string;
                                                                                                      • Input placeholder text. Shorthand for tagInputProps.placeholder.

                                                                                                        "Search..."

                                                                                                      property popoverProps

                                                                                                      popoverProps?: Partial<IPopoverProps> & object;
                                                                                                      • Props to spread to Popover. Note that content cannot be changed.

                                                                                                      property selectedItems

                                                                                                      selectedItems?: T[];
                                                                                                      • Controlled selected values.

                                                                                                      property tagInputProps

                                                                                                      tagInputProps?: Partial<TagInputProps> & object;
                                                                                                      • Props to spread to TagInput. Use query and onQueryChange to control the input.

                                                                                                      property tagRenderer

                                                                                                      tagRenderer: (item: T) => React.ReactNode;
                                                                                                      • Custom renderer to transform an item into tag content.

                                                                                                      interface IMultiSelectState

                                                                                                      interface IMultiSelectState {}

                                                                                                        property isOpen

                                                                                                        isOpen: boolean;

                                                                                                          interface IOmnibarProps

                                                                                                          interface IOmnibarProps<T> extends ListItemsProps<T> {}
                                                                                                          • Deprecated

                                                                                                            use OmnibarProps

                                                                                                          property inputProps

                                                                                                          inputProps?: InputGroupProps2;
                                                                                                          • Props to spread to the query InputGroup. Use query and onQueryChange instead of inputProps.value and inputProps.onChange to control this input.

                                                                                                          property isOpen

                                                                                                          isOpen: boolean;
                                                                                                          • Toggles the visibility of the omnibar. This prop is required because the component is controlled.

                                                                                                          property onClose

                                                                                                          onClose?: (event?: React.SyntheticEvent<HTMLElement>) => void;
                                                                                                          • A callback that is invoked when user interaction causes the omnibar to close, such as clicking on the overlay or pressing the esc key (if enabled). Receives the event from the user's interaction, if there was an event (generally either a mouse or key event).

                                                                                                            Note that due to controlled usage, this component will not actually close itself until the isOpen prop becomes false. .

                                                                                                          property overlayProps

                                                                                                          overlayProps?: Partial<OverlayProps>;
                                                                                                          • Props to spread to Overlay.

                                                                                                          interface IQueryListProps

                                                                                                          interface IQueryListProps<T> extends ListItemsProps<T> {}
                                                                                                          • Deprecated

                                                                                                            use QueryListProps

                                                                                                          property disabled

                                                                                                          disabled?: boolean;
                                                                                                          • Whether the list is disabled.

                                                                                                            false

                                                                                                          property initialActiveItem

                                                                                                          initialActiveItem?: T;
                                                                                                          • Initial active item, useful if the parent component is controlling its selectedItem but not activeItem.

                                                                                                          property menuProps

                                                                                                          menuProps?: React.HTMLAttributes<HTMLUListElement>;
                                                                                                          • Additional props to apply to the Menu that is created within the QueryList

                                                                                                          property onKeyDown

                                                                                                          onKeyDown?: React.KeyboardEventHandler<HTMLElement>;
                                                                                                          • Callback invoked when user presses a key, after processing QueryList's own key events (up/down to navigate active item). This callback is passed to renderer and (along with onKeyUp) can be attached to arbitrary content elements to support keyboard selection.

                                                                                                          property onKeyUp

                                                                                                          onKeyUp?: React.KeyboardEventHandler<HTMLElement>;
                                                                                                          • Callback invoked when user releases a key, after processing QueryList's own key events (enter to select active item). This callback is passed to renderer and (along with onKeyDown) can be attached to arbitrary content elements to support keyboard selection.

                                                                                                          property renderer

                                                                                                          renderer: (listProps: QueryListRendererProps<T>) => JSX.Element;
                                                                                                          • Customize rendering of the component. Receives an object with props that should be applied to elements as necessary.

                                                                                                          interface IQueryListRendererProps

                                                                                                          interface IQueryListRendererProps<T>
                                                                                                          extends Pick<IQueryListState<T>, 'activeItem' | 'filteredItems' | 'query'>,
                                                                                                          Props {}
                                                                                                          • An object describing how to render a QueryList. A QueryList renderer receives this object as its sole argument.

                                                                                                            Deprecated

                                                                                                            use QueryListRendererProps

                                                                                                          property handleItemSelect

                                                                                                          handleItemSelect: (item: T, event?: React.SyntheticEvent<HTMLElement>) => void;
                                                                                                          • Selection handler that should be invoked when a new item has been chosen, perhaps because the user clicked it.

                                                                                                          property handleKeyDown

                                                                                                          handleKeyDown: React.KeyboardEventHandler<HTMLElement>;
                                                                                                          • Keyboard handler for up/down arrow keys to shift the active item. Attach this handler to any element that should support this interaction.

                                                                                                          property handleKeyUp

                                                                                                          handleKeyUp: React.KeyboardEventHandler<HTMLElement>;
                                                                                                          • Keyboard handler for enter key to select the active item. Attach this handler to any element that should support this interaction.

                                                                                                          property handlePaste

                                                                                                          handlePaste: (queries: string[]) => void;
                                                                                                          • Handler that should be invoked when the user pastes one or more values.

                                                                                                            This callback will use itemPredicate with exactMatch=true to find a subset of items exactly matching the pasted values provided, then it will invoke onItemsPaste with those found items. Each pasted value that does not exactly match an item will be ignored.

                                                                                                            If creating items is enabled (by providing both createNewItemFromQuery and createNewItemRenderer), then pasted values that do not exactly match an existing item will emit a new item as created via createNewItemFromQuery.

                                                                                                            If itemPredicate returns multiple matching items for a particular query in queries, then only the first matching item will be emitted.

                                                                                                          property handleQueryChange

                                                                                                          handleQueryChange: React.ChangeEventHandler<HTMLInputElement>;
                                                                                                          • Change handler for query string. Attach this to an input element to allow QueryList to control the query.

                                                                                                          property itemList

                                                                                                          itemList: React.ReactNode;
                                                                                                          • Rendered elements returned from itemListRenderer prop.

                                                                                                          interface IQueryListState

                                                                                                          interface IQueryListState<T> {}

                                                                                                            property activeItem

                                                                                                            activeItem: T | CreateNewItem | null;
                                                                                                            • The currently focused item (for keyboard interactions).

                                                                                                            property createNewItem

                                                                                                            createNewItem: T | T[] | undefined;
                                                                                                            • The item returned from createNewItemFromQuery(this.state.query), cached to avoid continuous reinstantions within isCreateItemRendered, where this element will be used to hide the "Create Item" option if its value matches the current query.

                                                                                                            property filteredItems

                                                                                                            filteredItems: T[];
                                                                                                            • The original items array filtered by itemListPredicate or itemPredicate.

                                                                                                            property query

                                                                                                            query: string;
                                                                                                            • The current query string.

                                                                                                            interface ISelectProps

                                                                                                            interface ISelectProps<T> extends ListItemsProps<T> {}
                                                                                                            • Deprecated

                                                                                                              use SelectProps

                                                                                                            property children

                                                                                                            children?: React.ReactNode;

                                                                                                              property disabled

                                                                                                              disabled?: boolean;
                                                                                                              • Whether the component is non-interactive. If true, the list's item renderer will not be called. Note that you'll also need to disable the component's children, if appropriate.

                                                                                                                false

                                                                                                              property fill

                                                                                                              fill?: boolean;
                                                                                                              • Whether the component should take up the full width of its container. This overrides popoverProps.fill. You also have to ensure that the child component has fill set to true or is styled appropriately.

                                                                                                              property filterable

                                                                                                              filterable?: boolean;
                                                                                                              • Whether the dropdown list can be filtered. Disabling this option will remove the InputGroup and ignore inputProps.

                                                                                                                true

                                                                                                              property inputProps

                                                                                                              inputProps?: InputGroupProps2;
                                                                                                              • Props to spread to the query InputGroup. Use query and onQueryChange instead of inputProps.value and inputProps.onChange to control this input.

                                                                                                              property matchTargetWidth

                                                                                                              matchTargetWidth?: boolean;
                                                                                                              • Whether the select popover should be styled so that it matches the width of the target. This is done using a popper.js modifier passed through popoverProps.

                                                                                                                Note that setting matchTargetWidth={true} will also set popoverProps.usePortal={false} and popoverProps.wrapperTagName="div".

                                                                                                                false

                                                                                                              property popoverProps

                                                                                                              popoverProps?: Partial<IPopoverProps> & object;
                                                                                                              • Props to spread to Popover. Note that content cannot be changed.

                                                                                                              property resetOnClose

                                                                                                              resetOnClose?: boolean;
                                                                                                              • Whether the active item should be reset to the first matching item _when the popover closes_. The query will also be reset to the empty string.

                                                                                                                false

                                                                                                              interface ISelectState

                                                                                                              interface ISelectState {}

                                                                                                                property isOpen

                                                                                                                isOpen: boolean;

                                                                                                                  interface ISuggestProps

                                                                                                                  interface ISuggestProps<T> extends ListItemsProps<T> {}
                                                                                                                  • Deprecated

                                                                                                                    use SuggestProps

                                                                                                                  property closeOnSelect

                                                                                                                  closeOnSelect?: boolean;
                                                                                                                  • Whether the popover should close after selecting an item.

                                                                                                                    true

                                                                                                                  property defaultSelectedItem

                                                                                                                  defaultSelectedItem?: T;
                                                                                                                  • The uncontrolled default selected item. This prop is ignored if selectedItem is used to control the state.

                                                                                                                  property disabled

                                                                                                                  disabled?: boolean;
                                                                                                                  • Whether the input field should be disabled.

                                                                                                                  property fill

                                                                                                                  fill?: boolean;
                                                                                                                  • Whether the component should take up the full width of its container. This overrides popoverProps.fill and inputProps.fill.

                                                                                                                  property inputProps

                                                                                                                  inputProps?: InputGroupProps2;
                                                                                                                  • Props to spread to the query InputGroup. To control this input, use query and onQueryChange instead of inputProps.value and inputProps.onChange.

                                                                                                                  property inputValueRenderer

                                                                                                                  inputValueRenderer: (item: T) => string;
                                                                                                                  • Custom renderer to transform an item into a string for the input value.

                                                                                                                  property openOnKeyDown

                                                                                                                  openOnKeyDown?: boolean;
                                                                                                                  • 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 or TAB key interaction focuses the component's TagInput.

                                                                                                                    false

                                                                                                                  property popoverProps

                                                                                                                  popoverProps?: Partial<IPopoverProps> & object;
                                                                                                                  • Props to spread to Popover. Note that content cannot be changed.

                                                                                                                  property resetOnClose

                                                                                                                  resetOnClose?: boolean;
                                                                                                                  • Whether the active item should be reset to the first matching item _when the popover closes_. The query will also be reset to the empty string.

                                                                                                                    false

                                                                                                                  property selectedItem

                                                                                                                  selectedItem?: T | null;
                                                                                                                  • The currently selected item, or null to indicate that no item is selected. If omitted or undefined, this prop will be uncontrolled (managed by the component's state). Use onItemSelect to listen for updates.

                                                                                                                  interface ISuggestState

                                                                                                                  interface ISuggestState<T> {}

                                                                                                                    property isOpen

                                                                                                                    isOpen: boolean;

                                                                                                                      property selectedItem

                                                                                                                      selectedItem: T | null;

                                                                                                                        interface ItemListRendererProps

                                                                                                                        interface ItemListRendererProps<T> {}
                                                                                                                        • An object describing how to render the list of items. An itemListRenderer receives this object as its sole argument.

                                                                                                                        property activeItem

                                                                                                                        activeItem: T | CreateNewItem | null;
                                                                                                                        • The currently focused item (for keyboard interactions), or null to indicate that no item is active.

                                                                                                                        property filteredItems

                                                                                                                        filteredItems: T[];
                                                                                                                        • Array of items filtered by itemListPredicate or itemPredicate. See items for the full list of items.

                                                                                                                          Use renderFilteredItems() utility function from this library to map each item in this array through renderItem, with support for optional noResults and initialContent states.

                                                                                                                        property items

                                                                                                                        items: T[];
                                                                                                                        • Array of all items in the list. See filteredItems for a filtered array based on query and predicate props.

                                                                                                                        property itemsParentRef

                                                                                                                        itemsParentRef: React.Ref<HTMLUListElement>;
                                                                                                                        • A ref handler that should be attached to the parent HTML element of the menu items. This is required for the active item to scroll into view automatically.

                                                                                                                        property menuProps

                                                                                                                        menuProps?: React.HTMLAttributes<HTMLUListElement>;
                                                                                                                        • Props to apply to the Menu created within the itemListRenderer

                                                                                                                        property query

                                                                                                                        query: string;
                                                                                                                        • The current query string.

                                                                                                                        property renderCreateItem

                                                                                                                        renderCreateItem: () => JSX.Element | null | undefined;
                                                                                                                        • Call this function to render the "create new item" view component.

                                                                                                                          Returns

                                                                                                                          null when creating a new item is not available, and undefined if the createNewItemRenderer returns undefined

                                                                                                                        property renderItem

                                                                                                                        renderItem: (item: T, index: number) => JSX.Element | null;
                                                                                                                        • Call this function to render an item. This retrieves the modifiers for the item and delegates actual rendering to the owner component's itemRenderer prop.

                                                                                                                        interface ItemModifiers

                                                                                                                        interface ItemModifiers {}

                                                                                                                          property active

                                                                                                                          active: boolean;
                                                                                                                          • Whether this is the "active" (focused) item, meaning keyboard interactions will act upon it.

                                                                                                                          property disabled

                                                                                                                          disabled: boolean;
                                                                                                                          • Whether this item is disabled and should ignore interactions.

                                                                                                                          property matchesPredicate

                                                                                                                          matchesPredicate: boolean;
                                                                                                                          • Whether this item matches the predicate. A typical renderer could hide false values.

                                                                                                                          interface ItemRendererProps

                                                                                                                          interface ItemRendererProps {}
                                                                                                                          • An object describing how to render a particular item. An itemRenderer receives the item as its first argument, and this object as its second argument.

                                                                                                                          property handleClick

                                                                                                                          handleClick: MouseEventHandler<HTMLElement>;
                                                                                                                          • Click event handler to select this item.

                                                                                                                          property handleFocus

                                                                                                                          handleFocus?: () => void;
                                                                                                                          • Focus event handler to set this as the "active" item.

                                                                                                                            N.B. this is optional to preserve back-compat; it will become required in the next major version.

                                                                                                                          property index

                                                                                                                          index?: number;

                                                                                                                            property modifiers

                                                                                                                            modifiers: ItemModifiers;
                                                                                                                            • Modifiers that describe how to render this item, such as active or disabled.

                                                                                                                            property query

                                                                                                                            query: string;
                                                                                                                            • The current query string used to filter the items.

                                                                                                                            interface ListItemsProps

                                                                                                                            interface ListItemsProps<T> extends Props {}
                                                                                                                            • Reusable generic props for a component that operates on a filterable, selectable list of items.

                                                                                                                            property activeItem

                                                                                                                            activeItem?: T | CreateNewItem | null;
                                                                                                                            • The currently focused item for keyboard interactions, or null to indicate that no item is active. If omitted or undefined, this prop will be uncontrolled (managed by the component's state). Use onActiveItemChange to listen for updates.

                                                                                                                            property createNewItemFromQuery

                                                                                                                            createNewItemFromQuery?: (query: string) => T | T[];
                                                                                                                            • If provided, allows new items to be created using the current query string. This is invoked when user interaction causes one or many items to be created, either by pressing the Enter key or by clicking on the "Create Item" option. It transforms a query string into one or many items type.

                                                                                                                            property createNewItemPosition

                                                                                                                            createNewItemPosition?: 'first' | 'last';
                                                                                                                            • Determines the position of the createNewItem within the list: first or last. Only relevant when createNewItemRenderer is defined.

                                                                                                                              'last'

                                                                                                                            property createNewItemRenderer

                                                                                                                            createNewItemRenderer?: (
                                                                                                                            query: string,
                                                                                                                            active: boolean,
                                                                                                                            handleClick: React.MouseEventHandler<HTMLElement>
                                                                                                                            ) => JSX.Element | undefined;
                                                                                                                            • Custom renderer to transform the current query string into a selectable "Create Item" option. If this function is provided, a "Create Item" option will be rendered at the end of the list of items. If this function is not provided, a "Create Item" option will not be displayed.

                                                                                                                            property initialContent

                                                                                                                            initialContent?: React.ReactNode | null;
                                                                                                                            • React content to render when query is empty. If omitted, all items will be rendered (or result of itemListPredicate with empty query). If explicit null, nothing will be rendered when query is empty.

                                                                                                                              This prop is ignored if a custom itemListRenderer is supplied.

                                                                                                                            property itemDisabled

                                                                                                                            itemDisabled?: keyof T | ((item: T, index: number) => boolean);
                                                                                                                            • Determine if the given item is disabled. Provide a callback function, or simply provide the name of a boolean property on the item that exposes its disabled state.

                                                                                                                            property itemListPredicate

                                                                                                                            itemListPredicate?: ItemListPredicate<T>;
                                                                                                                            • Customize querying of entire items array. Return new list of items. This method can reorder, add, or remove items at will. (Supports filter algorithms that operate on the entire set, rather than individual items.)

                                                                                                                              If itemPredicate is also defined, this prop takes priority and the other will be ignored.

                                                                                                                            property itemListRenderer

                                                                                                                            itemListRenderer?: ItemListRenderer<T>;
                                                                                                                            • Custom renderer for the contents of the dropdown.

                                                                                                                              The default implementation invokes itemRenderer for each item that passes the predicate and wraps them all in a Menu element. If the query is empty then initialContent is returned, and if there are no items that match the predicate then noResults is returned.

                                                                                                                            property itemPredicate

                                                                                                                            itemPredicate?: ItemPredicate<T>;
                                                                                                                            • Customize querying of individual items.

                                                                                                                              __Filtering a list of items.__ This function is invoked to filter the list of items as a query is typed. Return true to keep the item, or false to hide. This method is invoked once for each item, so it should be performant. For more complex queries, use itemListPredicate to operate once on the entire array. For the purposes of filtering the list, this prop is ignored if itemListPredicate is also defined.

                                                                                                                              __Matching a pasted value to an item.__ This function is also invoked to match a pasted value to an existing item if possible. In this case, the function will receive exactMatch=true, and the function should return true only if the item _exactly_ matches the query. For the purposes of matching pasted values, this prop will be invoked even if itemListPredicate is defined.

                                                                                                                            property itemRenderer

                                                                                                                            itemRenderer: ItemRenderer<T>;
                                                                                                                            • Custom renderer for an item in the dropdown list. Receives a boolean indicating whether this item is active (selected by keyboard arrows) and an onClick event handler that should be attached to the returned element.

                                                                                                                            property items

                                                                                                                            items: T[];
                                                                                                                            • Array of items in the list.

                                                                                                                            property itemsEqual

                                                                                                                            itemsEqual?: ItemsEqualProp<T>;
                                                                                                                            • Specifies how to test if two items are equal. By default, simple strict equality (===) is used to compare two items.

                                                                                                                              If your items have a unique identifier field, simply provide the name of a property on the item that can be compared with strict equality to determine equivalence: itemsEqual="id" will check a.id === b.id.

                                                                                                                              If more complex comparison logic is required, provide an equality comparator function that returns true if the two items are equal. The arguments to this function will never be null or undefined, as those values are handled before calling the function.

                                                                                                                            property noResults

                                                                                                                            noResults?: React.ReactNode;
                                                                                                                            • React content to render when filtering items returns zero results. If omitted, nothing will be rendered in this case.

                                                                                                                              This prop is ignored if a custom itemListRenderer is supplied.

                                                                                                                              NOTE: if passing a MenuItem, ensure it has roleStructure="listoption" prop.

                                                                                                                            property onActiveItemChange

                                                                                                                            onActiveItemChange?: (activeItem: T | null, isCreateNewItem: boolean) => void;
                                                                                                                            • Invoked when user interaction should change the active item: arrow keys move it up/down in the list, selecting an item makes it active, and changing the query may reset it to the first item in the list if it no longer matches the filter.

                                                                                                                              If the "Create Item" option is displayed and currently active, then isCreateNewItem will be true and activeItem will be null. In this case, you should provide a valid CreateNewItem object to the activeItem _prop_ in order for the "Create Item" option to appear as active.

                                                                                                                              __Note:__ You can instantiate a CreateNewItem object using the getCreateNewItem() utility exported from this package.

                                                                                                                            property onItemSelect

                                                                                                                            onItemSelect: (item: T, event?: React.SyntheticEvent<HTMLElement>) => void;
                                                                                                                            • Callback invoked when an item from the list is selected, typically by clicking or pressing enter key.

                                                                                                                            property onItemsPaste

                                                                                                                            onItemsPaste?: (items: T[]) => void;
                                                                                                                            • Callback invoked when multiple items are selected at once via pasting.

                                                                                                                            property onQueryChange

                                                                                                                            onQueryChange?: (
                                                                                                                            query: string,
                                                                                                                            event?: React.ChangeEvent<HTMLInputElement>
                                                                                                                            ) => void;
                                                                                                                            • Callback invoked when the query string changes.

                                                                                                                            property query

                                                                                                                            query?: string;
                                                                                                                            • Query string passed to itemListPredicate or itemPredicate to filter items. This value is controlled: its state must be managed externally by attaching an onChange handler to the relevant element in your renderer implementation.

                                                                                                                            property resetOnQuery

                                                                                                                            resetOnQuery?: boolean;
                                                                                                                            • Whether the active item should be reset to the first matching item _every time the query changes_ (via prop or by user input).

                                                                                                                              true

                                                                                                                            property resetOnSelect

                                                                                                                            resetOnSelect?: boolean;
                                                                                                                            • Whether the active item should be reset to the first matching item _when an item is selected_. The query will also be reset to the empty string.

                                                                                                                              false

                                                                                                                            property scrollToActiveItem

                                                                                                                            scrollToActiveItem?: boolean;
                                                                                                                            • When activeItem is controlled, whether the active item should _always_ be scrolled into view when the prop changes. If false, only changes that result from built-in interactions (clicking, querying, or using arrow keys) will scroll the active item into view. Ignored if the activeItem prop is omitted (uncontrolled behavior).

                                                                                                                              true

                                                                                                                            interface MultiSelect2Props

                                                                                                                            interface MultiSelect2Props<T> extends ListItemsProps<T>, SelectPopoverProps {}

                                                                                                                              property disabled

                                                                                                                              disabled?: boolean;
                                                                                                                              • Whether the component is non-interactive. If true, the list's item renderer will not be called.

                                                                                                                                false

                                                                                                                              property fill

                                                                                                                              fill?: boolean;
                                                                                                                              • Whether the component should take up the full width of its container.

                                                                                                                              property menuProps

                                                                                                                              menuProps?: React.HTMLAttributes<HTMLUListElement>;
                                                                                                                              • Props to spread to the Menu listbox containing the selectable options.

                                                                                                                              property onClear

                                                                                                                              onClear?: () => void;
                                                                                                                              • 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.

                                                                                                                              property onRemove

                                                                                                                              onRemove?: (value: T, index: number) => 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.

                                                                                                                              property openOnKeyDown

                                                                                                                              openOnKeyDown?: boolean;
                                                                                                                              • 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.

                                                                                                                                false

                                                                                                                              property placeholder

                                                                                                                              placeholder?: string;
                                                                                                                              • Input placeholder text. Shorthand for tagInputProps.placeholder.

                                                                                                                                "Search..."

                                                                                                                              property selectedItems

                                                                                                                              selectedItems: T[];
                                                                                                                              • Controlled selected values.

                                                                                                                              property tagInputProps

                                                                                                                              tagInputProps?: Partial<Omit<TagInputProps, 'inputValue' | 'onInputChange'>>;
                                                                                                                              • 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 MultiSelect2 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 MultiSelect2 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.

                                                                                                                              property tagRenderer

                                                                                                                              tagRenderer: (item: T) => React.ReactNode;
                                                                                                                              • Custom renderer to transform an item into tag content.

                                                                                                                              interface MultiSelect2State

                                                                                                                              interface MultiSelect2State {}

                                                                                                                                property isOpen

                                                                                                                                isOpen: boolean;

                                                                                                                                  interface Select2Props

                                                                                                                                  interface Select2Props<T> extends ListItemsProps<T>, SelectPopoverProps {}

                                                                                                                                    property children

                                                                                                                                    children?: React.ReactNode;
                                                                                                                                    • Element which triggers the select popover. In most cases, you should display the name or label of the curently selected item here.

                                                                                                                                    property disabled

                                                                                                                                    disabled?: boolean;
                                                                                                                                    • Whether the component is non-interactive. If true, the list's item renderer will not be called. Note that you'll also need to disable the component's children, if appropriate.

                                                                                                                                      false

                                                                                                                                    property fill

                                                                                                                                    fill?: boolean;
                                                                                                                                    • Whether the component should take up the full width of its container. You also have to ensure that the child component has fill set to true or is styled appropriately.

                                                                                                                                    property filterable

                                                                                                                                    filterable?: boolean;
                                                                                                                                    • Whether the dropdown list can be filtered. Disabling this option will remove the InputGroup and ignore inputProps.

                                                                                                                                      true

                                                                                                                                    property inputProps

                                                                                                                                    inputProps?: Partial<Omit<InputGroupProps2, 'value' | 'onChange'>>;
                                                                                                                                    • Props to pass to the query [InputGroup component](#core/components/text-inputs.input-group).

                                                                                                                                      Some properties are unavailable: - inputProps.value: use query instead - inputProps.onChange: use onQueryChange instead

                                                                                                                                    property menuProps

                                                                                                                                    menuProps?: React.HTMLAttributes<HTMLUListElement>;
                                                                                                                                    • HTML attributes to add to the Menu listbox containing the selectable options.

                                                                                                                                    property resetOnClose

                                                                                                                                    resetOnClose?: boolean;
                                                                                                                                    • Whether the active item should be reset to the first matching item _when the popover closes_. The query will also be reset to the empty string.

                                                                                                                                      false

                                                                                                                                    interface Select2State

                                                                                                                                    interface Select2State {}

                                                                                                                                      property isOpen

                                                                                                                                      isOpen: boolean;

                                                                                                                                        interface SelectPopoverProps

                                                                                                                                        interface SelectPopoverProps {}
                                                                                                                                        • Reusable collection of props for components in this package which render a Popover2 and need to provide some degree of customization for that popover.

                                                                                                                                        property popoverContentProps

                                                                                                                                        popoverContentProps?: React.HTMLAttributes<HTMLDivElement>;
                                                                                                                                        • HTML attributes to spread to the popover content container element.

                                                                                                                                        property popoverProps

                                                                                                                                        popoverProps?: Partial<
                                                                                                                                        Omit<Popover2Props, 'content' | 'defaultIsOpen' | 'fill' | 'renderTarget'>
                                                                                                                                        >;
                                                                                                                                        • Props to spread to Popover2.

                                                                                                                                          Note that content cannot be changed, but you may apply some props to the content wrapper element with popoverContentProps. Likewise, targetProps is no longer supported as it was in Blueprint v4, but you may use popoverTargetProps instead.

                                                                                                                                          N.B. disabled is supported here, as this can be distinct from disabling the entire select button / input control element. There are some cases where we only want to disable the popover interaction.

                                                                                                                                        property popoverRef

                                                                                                                                        popoverRef?: React.RefObject<Popover2<DefaultPopover2TargetHTMLProps>>;
                                                                                                                                        • Optional ref for the Popover2 component instance. This is sometimes useful to reposition the popover.

                                                                                                                                          Note that this is defined as a specific kind of Popover2 which should be compatible with most use cases, since it uses the default target props interface.

                                                                                                                                        property popoverTargetProps

                                                                                                                                        popoverTargetProps?: React.HTMLAttributes<HTMLElement>;
                                                                                                                                        • HTML attributes to add to the popover target element.

                                                                                                                                        interface Suggest2Props

                                                                                                                                        interface Suggest2Props<T>
                                                                                                                                        extends ListItemsProps<T>,
                                                                                                                                        Omit<SelectPopoverProps, 'popoverTargetProps'> {}

                                                                                                                                          property closeOnSelect

                                                                                                                                          closeOnSelect?: boolean;
                                                                                                                                          • Whether the popover should close after selecting an item.

                                                                                                                                            true

                                                                                                                                          property defaultSelectedItem

                                                                                                                                          defaultSelectedItem?: T;
                                                                                                                                          • The uncontrolled default selected item. This prop is ignored if selectedItem is used to control the state.

                                                                                                                                          property disabled

                                                                                                                                          disabled?: boolean;
                                                                                                                                          • Whether the input field should be disabled.

                                                                                                                                          property fill

                                                                                                                                          fill?: boolean;
                                                                                                                                          • Whether the component should take up the full width of its container.

                                                                                                                                          property inputProps

                                                                                                                                          inputProps?: Partial<
                                                                                                                                          Omit<InputGroupProps2, 'disabled' | 'fill' | 'value' | 'onChange'>
                                                                                                                                          >;
                                                                                                                                          • Props to pass to the query [InputGroup component](#core/components/text-inputs.input-group).

                                                                                                                                            Some properties are unavailable: - inputProps.value: use query instead - inputProps.onChange: use onQueryChange instead - inputProps.disabled: use disabled instead - inputProps.fill: use fill instead

                                                                                                                                            Other notes: - inputProps.tagName will override popoverProps.targetTagName - inputProps.className will work as expected, but this is redundant with the simpler className prop

                                                                                                                                          property inputValueRenderer

                                                                                                                                          inputValueRenderer: (item: T) => string;
                                                                                                                                          • Custom renderer to transform an item into a string for the input value.

                                                                                                                                          property menuProps

                                                                                                                                          menuProps?: React.HTMLAttributes<HTMLUListElement>;
                                                                                                                                          • HTML attributes to add to the Menu listbox containing the selectable options.

                                                                                                                                          property openOnKeyDown

                                                                                                                                          openOnKeyDown?: boolean;
                                                                                                                                          • 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 or TAB key interaction focuses the component's TagInput.

                                                                                                                                            false

                                                                                                                                          property resetOnClose

                                                                                                                                          resetOnClose?: boolean;
                                                                                                                                          • Whether the active item should be reset to the first matching item _when the popover closes_. The query will also be reset to the empty string.

                                                                                                                                            false

                                                                                                                                          property selectedItem

                                                                                                                                          selectedItem?: T | null;
                                                                                                                                          • The currently selected item, or null to indicate that no item is selected. If omitted or undefined, this prop will be uncontrolled (managed by the component's state). Use onItemSelect to listen for updates.

                                                                                                                                          interface Suggest2State

                                                                                                                                          interface Suggest2State<T> {}

                                                                                                                                            property isOpen

                                                                                                                                            isOpen: boolean;

                                                                                                                                              property selectedItem

                                                                                                                                              selectedItem: T | null;

                                                                                                                                                Type Aliases

                                                                                                                                                type ICreateNewItem

                                                                                                                                                type ICreateNewItem = CreateNewItem;
                                                                                                                                                • Deprecated

                                                                                                                                                  use CreateNewItem

                                                                                                                                                type IItemListRendererProps

                                                                                                                                                type IItemListRendererProps<T> = ItemListRendererProps<T>;
                                                                                                                                                • Deprecated

                                                                                                                                                  use ItemListRendererProps

                                                                                                                                                type IItemModifiers

                                                                                                                                                type IItemModifiers = ItemModifiers;
                                                                                                                                                • Deprecated

                                                                                                                                                  use ItemModifiers

                                                                                                                                                type IItemRendererProps

                                                                                                                                                type IItemRendererProps = ItemRendererProps;
                                                                                                                                                • Deprecated

                                                                                                                                                  use ItemRendererProps

                                                                                                                                                type IListItemsProps

                                                                                                                                                type IListItemsProps<T> = ListItemsProps<T>;
                                                                                                                                                • Deprecated

                                                                                                                                                  use ListItemsProps

                                                                                                                                                type ItemListPredicate

                                                                                                                                                type ItemListPredicate<T> = (query: string, items: T[]) => T[];
                                                                                                                                                • A custom predicate for returning an entirely new items array based on the provided query. See usage sites in ListItemsProps.

                                                                                                                                                type ItemListRenderer

                                                                                                                                                type ItemListRenderer<T> = (
                                                                                                                                                itemListProps: ItemListRendererProps<T>
                                                                                                                                                ) => JSX.Element | null;
                                                                                                                                                • Type alias for a function that renders the list of items.

                                                                                                                                                type ItemPredicate

                                                                                                                                                type ItemPredicate<T> = (
                                                                                                                                                query: string,
                                                                                                                                                item: T,
                                                                                                                                                index?: number,
                                                                                                                                                exactMatch?: boolean
                                                                                                                                                ) => boolean;
                                                                                                                                                • A custom predicate for filtering items based on the provided query. See usage sites in ListItemsProps.

                                                                                                                                                type ItemRenderer

                                                                                                                                                type ItemRenderer<T> = (item: T, itemProps: ItemRendererProps) => JSX.Element | null;
                                                                                                                                                • Type alias for a function that receives an item and props and renders a JSX element (or null).

                                                                                                                                                type ItemsEqualComparator

                                                                                                                                                type ItemsEqualComparator<T> = (itemA: T, itemB: T) => boolean;
                                                                                                                                                • Equality test comparator to determine if two ListItemsProps items are equivalent.

                                                                                                                                                  true if the two items are equivalent.

                                                                                                                                                type ItemsEqualProp

                                                                                                                                                type ItemsEqualProp<T> = ItemsEqualComparator<T> | keyof T;

                                                                                                                                                type MultiSelectProps

                                                                                                                                                type MultiSelectProps<T> = IMultiSelectProps<T>;

                                                                                                                                                  type OmnibarProps

                                                                                                                                                  type OmnibarProps<T> = IOmnibarProps<T>;

                                                                                                                                                    type QueryListProps

                                                                                                                                                    type QueryListProps<T> = IQueryListProps<T>;

                                                                                                                                                      type QueryListRendererProps

                                                                                                                                                      type QueryListRendererProps<T> = IQueryListRendererProps<T>;

                                                                                                                                                        type SelectProps

                                                                                                                                                        type SelectProps<T> = ISelectProps<T>;

                                                                                                                                                          type SuggestProps

                                                                                                                                                          type SuggestProps<T> = ISuggestProps<T>;

                                                                                                                                                            Namespaces

                                                                                                                                                            namespace Classes

                                                                                                                                                            module 'lib/esm/common/classes.d.ts' {}
                                                                                                                                                            • Deprecated

                                                                                                                                                              this class name is not rendered by any component in this package

                                                                                                                                                            variable MULTISELECT

                                                                                                                                                            const MULTISELECT: string;

                                                                                                                                                              variable MULTISELECT_POPOVER

                                                                                                                                                              const MULTISELECT_POPOVER: string;

                                                                                                                                                                variable MULTISELECT_TAG_INPUT_INPUT

                                                                                                                                                                const MULTISELECT_TAG_INPUT_INPUT: string;

                                                                                                                                                                  variable OMNIBAR

                                                                                                                                                                  const OMNIBAR: string;

                                                                                                                                                                    variable OMNIBAR_OVERLAY

                                                                                                                                                                    const OMNIBAR_OVERLAY: string;

                                                                                                                                                                      variable SELECT

                                                                                                                                                                      const SELECT: string;
                                                                                                                                                                      • Deprecated

                                                                                                                                                                        this class name is not rendered by any component in this package

                                                                                                                                                                      variable SELECT_MATCH_TARGET_WIDTH

                                                                                                                                                                      const SELECT_MATCH_TARGET_WIDTH: string;

                                                                                                                                                                        variable SELECT_POPOVER

                                                                                                                                                                        const SELECT_POPOVER: string;

                                                                                                                                                                          variable SUGGEST_POPOVER

                                                                                                                                                                          const SUGGEST_POPOVER: string;

                                                                                                                                                                            Package Files (16)

                                                                                                                                                                            Dependencies (4)

                                                                                                                                                                            Dev Dependencies (11)

                                                                                                                                                                            Peer Dependencies (3)

                                                                                                                                                                            Badge

                                                                                                                                                                            To add a badge like this onejsDocs.io badgeto your package's README, use the codes available below.

                                                                                                                                                                            You may also use Shields.io to create a custom badge linking to https://www.jsdocs.io/package/@blueprintjs/select.

                                                                                                                                                                            • Markdown
                                                                                                                                                                              [![jsDocs.io](https://img.shields.io/badge/jsDocs.io-reference-blue)](https://www.jsdocs.io/package/@blueprintjs/select)
                                                                                                                                                                            • HTML
                                                                                                                                                                              <a href="https://www.jsdocs.io/package/@blueprintjs/select"><img src="https://img.shields.io/badge/jsDocs.io-reference-blue" alt="jsDocs.io"></a>