@blueprintjs/select
Version:
Components related to selecting items from a list
180 lines • 10.2 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.Select = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
/*
* Copyright 2022 Palantir Technologies, Inc. All rights reserved.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
const classnames_1 = tslib_1.__importDefault(require("classnames"));
const react_1 = require("react");
const core_1 = require("@blueprintjs/core");
const icons_1 = require("@blueprintjs/icons");
const common_1 = require("../../common");
const queryList_1 = require("../query-list/queryList");
/**
* Select component.
*
* @see https://blueprintjs.com/docs/#select/select
*/
class Select extends core_1.AbstractPureComponent {
static displayName = `${core_1.DISPLAYNAME_PREFIX}.Select`;
/** @deprecated no longer necessary now that the TypeScript parser supports type arguments on JSX element tags */
static ofType() {
return Select;
}
state = { isOpen: false };
inputElement = null;
queryList = null;
previousFocusedElement;
handleInputRef = (0, core_1.refHandler)(this, "inputElement", this.props.inputProps?.inputRef);
handleQueryListRef = (ref) => (this.queryList = ref);
listboxId = core_1.Utils.uniqueId("listbox");
render() {
// omit props specific to this component, spread the rest.
const { filterable, inputProps, menuProps, popoverProps, ...restProps } = this.props;
return ((0, jsx_runtime_1.jsx)(queryList_1.QueryList, { ...restProps, listId: this.listboxId, menuProps: { "aria-label": "selectable options", ...menuProps }, onItemSelect: this.handleItemSelect, ref: this.handleQueryListRef, renderer: this.renderQueryList }));
}
componentDidUpdate(prevProps, prevState) {
if (prevProps.inputProps?.inputRef !== this.props.inputProps?.inputRef) {
(0, core_1.setRef)(prevProps.inputProps?.inputRef, null);
this.handleInputRef = (0, core_1.refHandler)(this, "inputElement", this.props.inputProps?.inputRef);
(0, core_1.setRef)(this.props.inputProps?.inputRef, this.inputElement);
}
if (this.state.isOpen && !prevState.isOpen && this.queryList != null) {
this.queryList.scrollActiveItemIntoView();
}
}
renderQueryList = (listProps) => {
// not using defaultProps cuz they're hard to type with generics (can't use <T> on static members)
const { filterable = true, disabled = false, inputProps = {}, placeholder = "Filter...", popoverContentProps = {}, popoverProps = {}, popoverRef, } = this.props;
const input = ((0, jsx_runtime_1.jsx)(core_1.InputGroup, { "aria-activedescendant": listProps.activeItemId, "aria-autocomplete": "list", "aria-expanded": this.state.isOpen, leftIcon: (0, jsx_runtime_1.jsx)(icons_1.Search, {}), placeholder: placeholder, rightElement: this.maybeRenderClearButton(listProps.query), role: "combobox", ...inputProps, inputRef: this.handleInputRef, onChange: listProps.handleQueryChange, value: listProps.query }));
const { handleKeyDown, handleKeyUp } = listProps;
// N.B. no need to set `fill` since that is unused with the `renderTarget` API
return ((0, jsx_runtime_1.jsx)(core_1.Popover, { autoFocus: false, enforceFocus: false, isOpen: this.state.isOpen, disabled: disabled, placement: popoverProps.position || popoverProps.placement ? undefined : "bottom-start", ...popoverProps, className: (0, classnames_1.default)(listProps.className, popoverProps.className), content: (0, jsx_runtime_1.jsxs)("div", { ...popoverContentProps, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp, children: [filterable ? input : undefined, listProps.itemList] }), onClosing: this.handlePopoverClosing, onInteraction: this.handlePopoverInteraction, onOpened: this.handlePopoverOpened, onOpening: this.handlePopoverOpening, popoverClassName: (0, classnames_1.default)(common_1.Classes.SELECT_POPOVER, popoverProps.popoverClassName), popupKind: core_1.PopupKind.LISTBOX, ref: popoverRef, renderTarget: this.getPopoverTargetRenderer(listProps, this.state.isOpen) }));
};
// We use the renderTarget API to flatten the rendered DOM and make it easier to implement features like
// the "fill" prop. Note that we must take `isOpen` as an argument to force this render function to be called
// again after that state changes.
getPopoverTargetRenderer = (listProps, isOpen) =>
// N.B. pull out `isOpen` so that it's not forwarded to the DOM, but remember not to use it directly
// since it may be stale (`renderTarget` is not re-invoked on this.state changes).
// eslint-disable-next-line react/display-name
({ isOpen: _isOpen, ref, ...targetProps }) => {
const { disabled, filterable = true, popoverProps = {}, popoverTargetProps } = this.props;
const { handleKeyDown, handleKeyUp } = listProps;
const { targetTagName = "div" } = popoverProps;
return (0, react_1.createElement)(targetTagName, {
"aria-controls": this.listboxId,
...popoverTargetProps,
...targetProps,
"aria-disabled": disabled,
"aria-expanded": isOpen,
// When filterable, the InputGroup inside is the combobox; this trigger is just a button
// When not filterable, this trigger is the combobox
...(filterable ? { "aria-haspopup": "listbox" } : {}),
// Note that we must set FILL here in addition to children to get the wrapper element to full width
className: (0, classnames_1.default)(targetProps.className, popoverTargetProps?.className, {
[core_1.Classes.FILL]: this.props.fill,
}),
// Normally, Popover would also need to attach its own `onKeyDown` handler via `targetProps`,
// but in our case we fully manage that interaction and listen for key events to open/close
// the popover, so we elide it from the DOM.
onKeyDown: this.withPopoverTargetPropsHandler("keydown", isOpen ? handleKeyDown : this.handleTargetKeyDown),
onKeyUp: this.withPopoverTargetPropsHandler("keyup", isOpen ? handleKeyUp : undefined),
ref,
role: filterable ? undefined : "combobox",
}, this.props.children);
};
maybeRenderClearButton(query) {
return query.length > 0 ? ((0, jsx_runtime_1.jsx)(core_1.Button, { "aria-label": "Clear filter query", icon: (0, jsx_runtime_1.jsx)(icons_1.Cross, {}), onClick: this.resetQuery, title: "Clear filter query", variant: "minimal" })) : undefined;
}
withPopoverTargetPropsHandler = (eventType, handler) => {
switch (eventType) {
case "keydown":
return event => {
handler?.(event);
this.props.popoverTargetProps?.onKeyDown?.(event);
};
case "keyup":
return event => {
handler?.(event);
this.props.popoverTargetProps?.onKeyUp?.(event);
};
}
};
/**
* Target wrapper element "keydown" handler while the popover is closed.
*/
handleTargetKeyDown = (event) => {
// open popover when arrow key pressed on target while closed
if (event.key === "ArrowUp" || event.key === "ArrowDown") {
event.preventDefault();
this.setState({ isOpen: true });
}
else if (core_1.Utils.isKeyboardClick(event)) {
this.setState({ isOpen: true });
}
};
handleItemSelect = (item, event) => {
const target = event?.target;
const menuItem = target?.closest(`.${core_1.Classes.MENU_ITEM}`);
const menuItemDismiss = menuItem?.matches(`.${core_1.Classes.POPOVER_DISMISS}`);
const shouldDismiss = menuItemDismiss ?? true;
this.setState({ isOpen: !shouldDismiss });
this.props.onItemSelect?.(item, event);
};
handlePopoverInteraction = (isOpen, event) => {
this.setState({ isOpen });
this.props.popoverProps?.onInteraction?.(isOpen, event);
};
handlePopoverOpening = (node) => {
// save currently focused element before popover steals focus, so we can restore it when closing.
this.previousFocusedElement = core_1.Utils.getActiveElement(this.inputElement) ?? undefined;
if (this.props.resetOnClose) {
this.resetQuery();
}
this.props.popoverProps?.onOpening?.(node);
};
handlePopoverOpened = (node) => {
// scroll active item into view after popover transition completes and all dimensions are stable.
if (this.queryList != null) {
this.queryList.scrollActiveItemIntoView();
}
this.requestAnimationFrame(() => {
const { inputProps = {} } = this.props;
// autofocus is enabled by default
if (inputProps.autoFocus !== false) {
this.inputElement?.focus();
}
});
this.props.popoverProps?.onOpened?.(node);
};
handlePopoverClosing = (node) => {
// restore focus to saved element.
// timeout allows popover to begin closing and remove focus handlers beforehand.
/* istanbul ignore next */
this.requestAnimationFrame(() => {
if (this.previousFocusedElement !== undefined) {
this.previousFocusedElement.focus();
this.previousFocusedElement = undefined;
}
});
this.props.popoverProps?.onClosing?.(node);
};
resetQuery = () => this.queryList && this.queryList.setQuery("", true);
}
exports.Select = Select;
//# sourceMappingURL=select.js.map