@blueprintjs/select
Version:
Components related to selecting items from a list
245 lines • 14 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.MultiSelect = 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");
/**
* Multi select component.
*
* @see https://blueprintjs.com/docs/#select/multi-select
*/
class MultiSelect extends core_1.AbstractPureComponent {
static displayName = `${core_1.DISPLAYNAME_PREFIX}.MultiSelect`;
listboxId = core_1.Utils.uniqueId("listbox");
static defaultProps = {
disabled: false,
fill: false,
placeholder: "Search...",
};
/** @deprecated no longer necessary now that the TypeScript parser supports type arguments on JSX element tags */
static ofType() {
return MultiSelect;
}
state = {
isOpen: (this.props.popoverProps && this.props.popoverProps.isOpen) || false,
};
input = null;
queryList = null;
refHandlers = {
input: (0, core_1.refHandler)(this, "input", this.props.tagInputProps?.inputRef),
popover: (0, react_1.createRef)(),
queryList: (ref) => (this.queryList = ref),
};
componentDidUpdate(prevProps) {
if (prevProps.tagInputProps?.inputRef !== this.props.tagInputProps?.inputRef) {
(0, core_1.setRef)(prevProps.tagInputProps?.inputRef, null);
this.refHandlers.input = (0, core_1.refHandler)(this, "input", this.props.tagInputProps?.inputRef);
(0, core_1.setRef)(this.props.tagInputProps?.inputRef, this.input);
}
if ((prevProps.onClear === undefined && this.props.onClear !== undefined) ||
(prevProps.onClear !== undefined && this.props.onClear === undefined)) {
this.forceUpdate();
}
}
render() {
// omit props specific to this component, spread the rest.
const { menuProps, openOnKeyDown, popoverProps, tagInputProps, customTarget, ...restProps } = this.props;
return ((0, jsx_runtime_1.jsx)(queryList_1.QueryList, { ...restProps, menuProps: {
"aria-label": "selectable options",
...menuProps,
"aria-multiselectable": true,
id: this.listboxId,
}, onItemSelect: this.handleItemSelect, onQueryChange: this.handleQueryChange, ref: this.refHandlers.queryList, renderer: this.renderQueryList }));
}
renderQueryList = (listProps) => {
const { disabled, popoverContentProps = {}, popoverProps = {} } = this.props;
const { handleKeyDown, handleKeyUp } = listProps;
// N.B. no need to set `popoverProps.fill` since that is unused with the `renderTarget` API
return ((0, jsx_runtime_1.jsx)(core_1.Popover, { autoFocus: false, canEscapeKeyClose: true, disabled: disabled, enforceFocus: false, isOpen: this.state.isOpen, 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", {
// In the case where customTarget is supplied and the TagInput is rendered within the Popover,
// without matchTargetWidth there is no width defined in any of TagInput's
// grandparents when it's rendered through usePortal, so it will never flex-wrap
// and infinitely grow horizontally. To address this, if there is no width guidance
// from matchTargetWidth, explicitly set a default width to so Tags will flex-wrap.
className: this.props.customTarget != null && !this.props.popoverProps?.matchTargetWidth
? common_1.Classes.MULTISELECT_POPOVER_DEFAULT_WIDTH
: undefined, ...popoverContentProps, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp, children: [this.props.customTarget != null &&
this.getTagInput(listProps, (0, classnames_1.default)(core_1.Classes.FILL, common_1.Classes.MULTISELECT_POPOVER_TAG_INPUT_MARGIN)), listProps.itemList] }), interactionKind: "click", onInteraction: this.handlePopoverInteraction, onOpened: this.handlePopoverOpened, popoverClassName: (0, classnames_1.default)(common_1.Classes.MULTISELECT_POPOVER, popoverProps.popoverClassName), popupKind: core_1.PopupKind.LISTBOX, ref: (0, core_1.mergeRefs)(this.refHandlers.popover, this.props.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, fill, selectedItems, popoverProps = {}, popoverTargetProps = {} } = this.props;
const { handleKeyDown, handleKeyUp } = listProps;
const { targetTagName = "div" } = popoverProps;
return (0, react_1.createElement)(targetTagName, {
"aria-autocomplete": "list",
"aria-controls": this.listboxId,
...popoverTargetProps,
...targetProps,
"aria-disabled": disabled,
"aria-expanded": isOpen,
// Note that we must set FILL here in addition to TagInput to get the wrapper element to full width
className: (0, classnames_1.default)(targetProps.className, popoverTargetProps.className, {
[core_1.Classes.FILL]: 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.getTagInputKeyDownHandler(handleKeyDown),
onKeyUp: this.getTagInputKeyUpHandler(handleKeyUp),
ref,
role: "combobox",
}, this.props.customTarget != null
? this.props.customTarget(selectedItems, isOpen)
: this.getTagInput(listProps));
};
getTagInput = (listProps, className) => {
const { disabled, fill, onClear, placeholder, selectedItems, tagInputProps = {} } = this.props;
const maybeClearButton = onClear !== undefined && selectedItems.length > 0 ? (
// use both aria-label and title a11y attributes here, for screen readers
// and mouseover interactions respectively
(0, jsx_runtime_1.jsx)(core_1.Button, { "aria-label": "Clear selected items", disabled: disabled, icon: (0, jsx_runtime_1.jsx)(icons_1.Cross, {}), onClick: this.handleClearButtonClick, title: "Clear selected items", variant: "minimal" })) : undefined;
// add our own inputProps.className so that we can reference it in event handlers
const inputProps = {
...tagInputProps.inputProps,
className: (0, classnames_1.default)(tagInputProps.inputProps?.className, common_1.Classes.MULTISELECT_TAG_INPUT_INPUT),
};
return ((0, jsx_runtime_1.jsx)(core_1.TagInput, { placeholder: placeholder, rightElement: maybeClearButton, ...tagInputProps, className: (0, classnames_1.default)(className, common_1.Classes.MULTISELECT, tagInputProps.className), disabled: disabled, fill: fill, inputRef: this.refHandlers.input, inputProps: inputProps, inputValue: listProps.query, onAdd: this.getTagInputAddHandler(listProps), onInputChange: listProps.handleQueryChange, onRemove: this.handleTagRemove, values: selectedItems.map(this.props.tagRenderer) }));
};
handleItemSelect = (item, evt) => {
if (this.input != null) {
this.input.focus();
}
this.props.onItemSelect?.(item, evt);
this.refHandlers.popover.current?.reposition(); // reposition when size of input changes
};
handleQueryChange = (query, evt) => {
this.setState({ isOpen: query.length > 0 || (this.props.customTarget == null && !this.props.openOnKeyDown) });
this.props.onQueryChange?.(query, evt);
};
// Popover interaction kind is CLICK, so this only handles click events.
// Note that we defer to the next animation frame in order to get the latest activeElement
handlePopoverInteraction = (nextOpenState, evt) => {
if (this.props.customTarget != null) {
this.setState({ isOpen: nextOpenState });
this.props.popoverProps?.onInteraction?.(nextOpenState, evt);
return;
}
this.requestAnimationFrame(() => {
const isInputFocused = this.input === core_1.Utils.getActiveElement(this.input);
if (this.input != null && !isInputFocused) {
// input is no longer focused, we should close the popover
this.setState({ isOpen: false });
}
else if (!this.props.openOnKeyDown) {
// we should open immediately on click focus events
this.setState({ isOpen: true });
}
this.props.popoverProps?.onInteraction?.(nextOpenState, evt);
});
};
handlePopoverOpened = (node) => {
if (this.queryList != null) {
// scroll active item into view after popover transition completes and all dimensions are stable.
this.queryList.scrollActiveItemIntoView();
}
const hasCustomTarget = this.props.customTarget != null;
if (hasCustomTarget && this.input != null) {
const shouldAutofocus = this.props.tagInputProps?.inputProps?.autoFocus !== false;
if (shouldAutofocus) {
this.input.focus();
}
}
this.props.popoverProps?.onOpened?.(node);
};
handleTagRemove = (tag, index) => {
const { selectedItems, onRemove, tagInputProps } = this.props;
onRemove?.(selectedItems[index], index);
tagInputProps?.onRemove?.(tag, index);
this.refHandlers.popover.current?.reposition(); // reposition when size of input changes
};
getTagInputAddHandler = (listProps) => (values, method) => {
if (method === "paste") {
listProps.handlePaste(values);
}
};
getTagInputKeyDownHandler = (handleQueryListKeyDown) => {
return (e) => {
if (e.key === "Escape" || e.key === "Tab") {
// By default the escape key will not trigger a blur on the
// input element. It must be done explicitly.
if (e.key === "Escape") {
this.input?.blur();
// prevent other overlays from closing
e.stopPropagation();
// prevent browser-specific escape key behavior (Safari exits fullscreen)
e.preventDefault();
}
this.setState({ isOpen: false });
}
else if (!(e.key === "Backspace" || e.key === "ArrowLeft" || e.key === "ArrowRight")) {
// Custom target might not be an input, so certain keystrokes might have other effects (space pushing the scrollview down)
if (this.props.customTarget != null) {
if (e.key === " ") {
e.preventDefault();
this.setState({ isOpen: true });
}
else if (e.key === "Enter") {
this.setState({ isOpen: true });
}
}
else {
this.setState({ isOpen: true });
}
}
const isTargetingTagRemoveButton = e.target.closest(`.${core_1.Classes.TAG_REMOVE}`) != null;
if (this.state.isOpen && !isTargetingTagRemoveButton) {
handleQueryListKeyDown?.(e);
}
this.props.popoverTargetProps?.onKeyDown?.(e);
};
};
getTagInputKeyUpHandler = (handleQueryListKeyUp) => {
return (e) => {
const isTargetingInput = e.target.classList.contains(common_1.Classes.MULTISELECT_TAG_INPUT_INPUT);
// only handle events when the focus is on the actual <input> inside the TagInput, as that's
// what QueryList is designed to do
if (this.state.isOpen && isTargetingInput) {
handleQueryListKeyUp?.(e);
}
this.props.popoverTargetProps?.onKeyDown?.(e);
};
};
handleClearButtonClick = () => {
this.props.onClear?.();
this.refHandlers.popover.current?.reposition(); // reposition when size of input changes
};
}
exports.MultiSelect = MultiSelect;
//# sourceMappingURL=multiSelect.js.map