@blueprintjs/select
Version:
Components related to selecting items from a list
101 lines (100 loc) • 3.83 kB
TypeScript
import * as React from "react";
import { AbstractPureComponent, type InputGroupProps } from "@blueprintjs/core";
import { type ListItemsProps, type SelectPopoverProps } from "../../common";
export interface SuggestProps<T> extends ListItemsProps<T>, Omit<SelectPopoverProps, "popoverTargetProps"> {
/**
* Whether the popover should close after selecting an item.
*
* @default true
*/
closeOnSelect?: boolean;
/** Whether the input field should be disabled. */
disabled?: boolean;
/**
* Whether the component should take up the full width of its container.
*/
fill?: boolean;
/**
* Props to pass to the query [InputGroup component](#core/components/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
*/
inputProps?: Partial<Omit<InputGroupProps, "disabled" | "fill" | "value" | "onChange">>;
/** Custom renderer to transform an item into a string for the input value. */
inputValueRenderer: (item: T) => string;
/**
* The uncontrolled default selected item.
* This prop is ignored if `selectedItem` is used to control the state.
*/
defaultSelectedItem?: T;
/**
* 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.
*/
selectedItem?: T | null;
/**
* HTML attributes to add to the `Menu` listbox containing the selectable options.
*/
menuProps?: React.HTMLAttributes<HTMLUListElement>;
/**
* 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.
*
* @default false
*/
openOnKeyDown?: 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.
*
* @default false
*/
resetOnClose?: boolean;
}
export interface SuggestState<T> {
isOpen: boolean;
selectedItem: T | null;
}
/**
* Suggest component.
*
* @see https://blueprintjs.com/docs/#select/suggest
*/
export declare class Suggest<T> extends AbstractPureComponent<SuggestProps<T>, SuggestState<T>> {
static displayName: string;
static defaultProps: Partial<SuggestProps<any>>;
/** @deprecated no longer necessary now that the TypeScript parser supports type arguments on JSX element tags */
static ofType<U>(): new (props: SuggestProps<U>) => Suggest<U>;
state: SuggestState<T>;
inputElement: HTMLInputElement | null;
private queryList;
private handleInputRef;
private handleQueryListRef;
private listboxId;
render(): React.JSX.Element;
componentDidUpdate(prevProps: SuggestProps<T>, prevState: SuggestState<T>): void;
private renderQueryList;
private getPopoverTargetRenderer;
private selectText;
private handleInputFocus;
private handleItemSelect;
private getInitialSelectedItem;
private handlePopoverInteraction;
private handlePopoverOpening;
private handlePopoverOpened;
private getTargetKeyDownHandler;
private getTargetKeyUpHandler;
private maybeResetActiveItemToSelectedItem;
}