@blueprintjs/select
Version:
Components related to selecting items from a list
246 lines • 17.8 kB
JavaScript
;
/*
* 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.
*/
Object.defineProperty(exports, "__esModule", { value: true });
exports.MultiSelect = void 0;
var tslib_1 = require("tslib");
var classnames_1 = tslib_1.__importDefault(require("classnames"));
var React = tslib_1.__importStar(require("react"));
var core_1 = require("@blueprintjs/core");
var icons_1 = require("@blueprintjs/icons");
var common_1 = require("../../common");
var queryList_1 = require("../query-list/queryList");
/**
* Multi select component.
*
* @see https://blueprintjs.com/docs/#select/multi-select
*/
var MultiSelect = /** @class */ (function (_super) {
tslib_1.__extends(MultiSelect, _super);
function MultiSelect() {
var _a;
var _this = _super.apply(this, arguments) || this;
_this.listboxId = core_1.Utils.uniqueId("listbox");
_this.state = {
isOpen: (_this.props.popoverProps && _this.props.popoverProps.isOpen) || false,
};
_this.input = null;
_this.queryList = null;
_this.refHandlers = {
input: (0, core_1.refHandler)(_this, "input", (_a = _this.props.tagInputProps) === null || _a === void 0 ? void 0 : _a.inputRef),
popover: React.createRef(),
queryList: function (ref) { return (_this.queryList = ref); },
};
_this.renderQueryList = function (listProps) {
var _a;
var _b = _this.props, disabled = _b.disabled, _c = _b.popoverContentProps, popoverContentProps = _c === void 0 ? {} : _c, _d = _b.popoverProps, popoverProps = _d === void 0 ? {} : _d;
var handleKeyDown = listProps.handleKeyDown, handleKeyUp = listProps.handleKeyUp;
// N.B. no need to set `popoverProps.fill` since that is unused with the `renderTarget` API
return (React.createElement(core_1.Popover, tslib_1.__assign({ 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: React.createElement("div", tslib_1.__assign({
// 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 && !((_a = _this.props.popoverProps) === null || _a === void 0 ? void 0 : _a.matchTargetWidth)
? common_1.Classes.MULTISELECT_POPOVER_DEFAULT_WIDTH
: undefined }, popoverContentProps, { onKeyDown: handleKeyDown, onKeyUp: handleKeyUp }),
_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.
_this.getPopoverTargetRenderer = function (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
return function (_a) {
var _b;
var _isOpen = _a.isOpen, ref = _a.ref, targetProps = tslib_1.__rest(_a, ["isOpen", "ref"]);
var _c = _this.props, disabled = _c.disabled, fill = _c.fill, selectedItems = _c.selectedItems, _d = _c.popoverProps, popoverProps = _d === void 0 ? {} : _d, _e = _c.popoverTargetProps, popoverTargetProps = _e === void 0 ? {} : _e;
var handleKeyDown = listProps.handleKeyDown, handleKeyUp = listProps.handleKeyUp;
var _f = popoverProps.targetTagName, targetTagName = _f === void 0 ? "div" : _f;
return React.createElement(targetTagName, tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({ "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, (_b = {},
_b[core_1.Classes.FILL] = fill,
_b)),
// 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: ref, role: "combobox" }), _this.props.customTarget != null
? _this.props.customTarget(selectedItems, isOpen)
: _this.getTagInput(listProps));
};
};
_this.getTagInput = function (listProps, className) {
var _a;
var _b = _this.props, disabled = _b.disabled, fill = _b.fill, onClear = _b.onClear, placeholder = _b.placeholder, selectedItems = _b.selectedItems, _c = _b.tagInputProps, tagInputProps = _c === void 0 ? {} : _c;
var maybeClearButton = onClear !== undefined && selectedItems.length > 0 ? (
// use both aria-label and title a11y attributes here, for screen readers
// and mouseover interactions respectively
React.createElement(core_1.Button, { "aria-label": "Clear selected items", disabled: disabled, icon: React.createElement(icons_1.Cross, null), minimal: true, onClick: _this.handleClearButtonClick, title: "Clear selected items" })) : undefined;
// add our own inputProps.className so that we can reference it in event handlers
var inputProps = tslib_1.__assign(tslib_1.__assign({}, tagInputProps.inputProps), { className: (0, classnames_1.default)((_a = tagInputProps.inputProps) === null || _a === void 0 ? void 0 : _a.className, common_1.Classes.MULTISELECT_TAG_INPUT_INPUT) });
return (React.createElement(core_1.TagInput, tslib_1.__assign({ 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) })));
};
_this.handleItemSelect = function (item, evt) {
var _a, _b, _c;
if (_this.input != null) {
_this.input.focus();
}
(_b = (_a = _this.props).onItemSelect) === null || _b === void 0 ? void 0 : _b.call(_a, item, evt);
(_c = _this.refHandlers.popover.current) === null || _c === void 0 ? void 0 : _c.reposition(); // reposition when size of input changes
};
_this.handleQueryChange = function (query, evt) {
var _a, _b;
_this.setState({ isOpen: query.length > 0 || (_this.props.customTarget == null && !_this.props.openOnKeyDown) });
(_b = (_a = _this.props).onQueryChange) === null || _b === void 0 ? void 0 : _b.call(_a, 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
_this.handlePopoverInteraction = function (nextOpenState, evt) {
var _a, _b;
if (_this.props.customTarget != null) {
_this.setState({ isOpen: nextOpenState });
(_b = (_a = _this.props.popoverProps) === null || _a === void 0 ? void 0 : _a.onInteraction) === null || _b === void 0 ? void 0 : _b.call(_a, nextOpenState, evt);
return;
}
_this.requestAnimationFrame(function () {
var _a, _b;
var 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 });
}
(_b = (_a = _this.props.popoverProps) === null || _a === void 0 ? void 0 : _a.onInteraction) === null || _b === void 0 ? void 0 : _b.call(_a, nextOpenState, evt);
});
};
_this.handlePopoverOpened = function (node) {
var _a, _b, _c, _d;
if (_this.queryList != null) {
// scroll active item into view after popover transition completes and all dimensions are stable.
_this.queryList.scrollActiveItemIntoView();
}
var hasCustomTarget = _this.props.customTarget != null;
if (hasCustomTarget && _this.input != null) {
var shouldAutofocus = ((_b = (_a = _this.props.tagInputProps) === null || _a === void 0 ? void 0 : _a.inputProps) === null || _b === void 0 ? void 0 : _b.autoFocus) !== false;
if (shouldAutofocus) {
_this.input.focus();
}
}
(_d = (_c = _this.props.popoverProps) === null || _c === void 0 ? void 0 : _c.onOpened) === null || _d === void 0 ? void 0 : _d.call(_c, node);
};
_this.handleTagRemove = function (tag, index) {
var _a, _b;
var _c = _this.props, selectedItems = _c.selectedItems, onRemove = _c.onRemove, tagInputProps = _c.tagInputProps;
onRemove === null || onRemove === void 0 ? void 0 : onRemove(selectedItems[index], index);
(_a = tagInputProps === null || tagInputProps === void 0 ? void 0 : tagInputProps.onRemove) === null || _a === void 0 ? void 0 : _a.call(tagInputProps, tag, index);
(_b = _this.refHandlers.popover.current) === null || _b === void 0 ? void 0 : _b.reposition(); // reposition when size of input changes
};
_this.getTagInputAddHandler = function (listProps) { return function (values, method) {
if (method === "paste") {
listProps.handlePaste(values);
}
}; };
_this.getTagInputKeyDownHandler = function (handleQueryListKeyDown) {
return function (e) {
var _a, _b, _c;
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") {
(_a = _this.input) === null || _a === void 0 ? void 0 : _a.blur();
}
_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 });
}
}
var isTargetingTagRemoveButton = e.target.closest(".".concat(core_1.Classes.TAG_REMOVE)) != null;
if (_this.state.isOpen && !isTargetingTagRemoveButton) {
handleQueryListKeyDown === null || handleQueryListKeyDown === void 0 ? void 0 : handleQueryListKeyDown(e);
}
(_c = (_b = _this.props.popoverTargetProps) === null || _b === void 0 ? void 0 : _b.onKeyDown) === null || _c === void 0 ? void 0 : _c.call(_b, e);
};
};
_this.getTagInputKeyUpHandler = function (handleQueryListKeyUp) {
return function (e) {
var _a, _b;
var 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 === null || handleQueryListKeyUp === void 0 ? void 0 : handleQueryListKeyUp(e);
}
(_b = (_a = _this.props.popoverTargetProps) === null || _a === void 0 ? void 0 : _a.onKeyDown) === null || _b === void 0 ? void 0 : _b.call(_a, e);
};
};
_this.handleClearButtonClick = function () {
var _a, _b, _c;
(_b = (_a = _this.props).onClear) === null || _b === void 0 ? void 0 : _b.call(_a);
(_c = _this.refHandlers.popover.current) === null || _c === void 0 ? void 0 : _c.reposition(); // reposition when size of input changes
};
return _this;
}
/** @deprecated no longer necessary now that the TypeScript parser supports type arguments on JSX element tags */
MultiSelect.ofType = function () {
return MultiSelect;
};
MultiSelect.prototype.componentDidUpdate = function (prevProps) {
var _a, _b, _c, _d, _e;
if (((_a = prevProps.tagInputProps) === null || _a === void 0 ? void 0 : _a.inputRef) !== ((_b = this.props.tagInputProps) === null || _b === void 0 ? void 0 : _b.inputRef)) {
(0, core_1.setRef)((_c = prevProps.tagInputProps) === null || _c === void 0 ? void 0 : _c.inputRef, null);
this.refHandlers.input = (0, core_1.refHandler)(this, "input", (_d = this.props.tagInputProps) === null || _d === void 0 ? void 0 : _d.inputRef);
(0, core_1.setRef)((_e = this.props.tagInputProps) === null || _e === void 0 ? void 0 : _e.inputRef, this.input);
}
if ((prevProps.onClear === undefined && this.props.onClear !== undefined) ||
(prevProps.onClear !== undefined && this.props.onClear === undefined)) {
this.forceUpdate();
}
};
MultiSelect.prototype.render = function () {
// omit props specific to this component, spread the rest.
var _a = this.props, menuProps = _a.menuProps, openOnKeyDown = _a.openOnKeyDown, popoverProps = _a.popoverProps, tagInputProps = _a.tagInputProps, customTarget = _a.customTarget, restProps = tslib_1.__rest(_a, ["menuProps", "openOnKeyDown", "popoverProps", "tagInputProps", "customTarget"]);
return (React.createElement(queryList_1.QueryList, tslib_1.__assign({}, restProps, { menuProps: tslib_1.__assign(tslib_1.__assign({ "aria-label": "selectable options" }, menuProps), { "aria-multiselectable": true, id: this.listboxId }), onItemSelect: this.handleItemSelect, onQueryChange: this.handleQueryChange, ref: this.refHandlers.queryList, renderer: this.renderQueryList })));
};
MultiSelect.displayName = "".concat(core_1.DISPLAYNAME_PREFIX, ".MultiSelect");
MultiSelect.defaultProps = {
disabled: false,
fill: false,
placeholder: "Search...",
};
return MultiSelect;
}(core_1.AbstractPureComponent));
exports.MultiSelect = MultiSelect;
//# sourceMappingURL=multiSelect.js.map