@elastic/eui
Version:
Elastic UI Component Library
311 lines (307 loc) • 14.8 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.EuiSuperSelect = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _react = _interopRequireWildcard(require("react"));
var _classnames = _interopRequireDefault(require("classnames"));
var _services = require("../../../services");
var _i18n = require("../../i18n");
var _accessibility = require("../../accessibility");
var _popover = require("../../popover");
var _super_select_control = require("./super_select_control");
var _super_select_item = require("./super_select_item");
var _super_select = require("./super_select.styles");
var _react2 = require("@emotion/react");
var _excluded = ["className", "options", "valueOfSelected", "placeholder", "onChange", "isOpen", "isInvalid", "itemClassName", "fullWidth", "popoverProps", "compressed"],
_excluded2 = ["value", "dropdownDisplay", "inputDisplay", "disabled"];
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(t).constructor) : o.apply(t, e)); }
function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); } /*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License
* 2.0 and the Server Side Public License, v 1; you may not use this file except
* in compliance with, at your election, the Elastic License 2.0 or the Server
* Side Public License, v 1.
*/
var ShiftDirection = /*#__PURE__*/function (ShiftDirection) {
ShiftDirection["BACK"] = "back";
ShiftDirection["FORWARD"] = "forward";
return ShiftDirection;
}(ShiftDirection || {});
var EuiSuperSelect = exports.EuiSuperSelect = /*#__PURE__*/function (_Component) {
function EuiSuperSelect() {
var _this;
(0, _classCallCheck2.default)(this, EuiSuperSelect);
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
_this = _callSuper(this, EuiSuperSelect, [].concat(args));
(0, _defineProperty2.default)(_this, "itemNodes", []);
(0, _defineProperty2.default)(_this, "_isMounted", false);
(0, _defineProperty2.default)(_this, "controlButtonRef", /*#__PURE__*/(0, _react.createRef)());
(0, _defineProperty2.default)(_this, "describedById", (0, _services.htmlIdGenerator)('euiSuperSelect_')('_screenreaderDescribeId'));
(0, _defineProperty2.default)(_this, "state", {
isPopoverOpen: _this.props.isOpen || false,
currentIndex: 0
});
(0, _defineProperty2.default)(_this, "setItemNode", function (node, index) {
_this.itemNodes[index] = node;
});
(0, _defineProperty2.default)(_this, "openPopover", function () {
var _this$props = _this.props,
options = _this$props.options,
valueOfSelected = _this$props.valueOfSelected;
var indexOfSelected = options.findIndex(function (option) {
return (option === null || option === void 0 ? void 0 : option.value) === valueOfSelected;
});
var candidateIndex = valueOfSelected != null && indexOfSelected >= 0 ? indexOfSelected : 0;
var initialIndex = candidateIndex;
// If the item is disabled, find the first focusable item going forward
while (initialIndex < options.length && (_options$initialIndex = options[initialIndex]) !== null && _options$initialIndex !== void 0 && _options$initialIndex.disabled) {
var _options$initialIndex;
initialIndex++;
}
if (initialIndex >= options.length) {
initialIndex = candidateIndex;
}
_this.setState({
isPopoverOpen: options.length > 0,
currentIndex: initialIndex
});
requestAnimationFrame(function () {
requestAnimationFrame(function () {
if (!_this._isMounted) {
return;
}
_this.focusItemAt(initialIndex);
if (_this.props.onFocus) {
_this.props.onFocus();
}
});
});
});
(0, _defineProperty2.default)(_this, "closePopover", function () {
_this.setState({
isPopoverOpen: false,
currentIndex: -1
});
// Refocus back to the toggling control button on popover close
requestAnimationFrame(function () {
var _this$controlButtonRe;
(_this$controlButtonRe = _this.controlButtonRef.current) === null || _this$controlButtonRe === void 0 || _this$controlButtonRe.focus();
});
if (_this.props.onBlur) {
_this.props.onBlur();
}
});
(0, _defineProperty2.default)(_this, "itemClicked", function (value) {
_this.closePopover();
if (_this.props.onChange) {
_this.props.onChange(value);
}
});
(0, _defineProperty2.default)(_this, "onSelectKeyDown", function (event) {
// Mimic the ways native `<select>`s can be opened via keypress
if (event.key === _services.keys.ARROW_UP || event.key === _services.keys.ARROW_DOWN || event.key === _services.keys.SPACE) {
event.preventDefault();
event.stopPropagation();
_this.openPopover();
}
});
(0, _defineProperty2.default)(_this, "onItemKeyDown", function (event) {
switch (event.key) {
case _services.keys.ESCAPE:
// close the popover and prevent ancestors from handling
event.preventDefault();
event.stopPropagation();
_this.closePopover();
break;
case _services.keys.TAB:
// Mimic native `<select>` behavior, which selects an item on tab press
event.preventDefault();
event.stopPropagation();
event.target.click();
break;
case _services.keys.ARROW_UP:
event.preventDefault();
event.stopPropagation();
_this.shiftFocus(ShiftDirection.BACK);
break;
case _services.keys.ARROW_DOWN:
event.preventDefault();
event.stopPropagation();
_this.shiftFocus(ShiftDirection.FORWARD);
break;
}
});
return _this;
}
(0, _inherits2.default)(EuiSuperSelect, _Component);
return (0, _createClass2.default)(EuiSuperSelect, [{
key: "componentDidMount",
value: function componentDidMount() {
this._isMounted = true;
if (this.props.isOpen) {
this.openPopover();
}
}
}, {
key: "componentWillUnmount",
value: function componentWillUnmount() {
this._isMounted = false;
}
}, {
key: "focusItemAt",
value: function focusItemAt(index) {
var _this$itemNodes$index;
(_this$itemNodes$index = this.itemNodes[index]) === null || _this$itemNodes$index === void 0 || _this$itemNodes$index.focus();
}
}, {
key: "shiftFocus",
value: function shiftFocus(direction) {
var options = this.props.options;
var currentIndex = this.state.currentIndex;
if (currentIndex === -1) {
// somehow the select options has lost focus
this.focusItemAt(0);
this.setState({
currentIndex: 0
});
return;
}
// Note: this component purposely does not cycle arrow key navigation
// to match native <select> elements
var step = direction === ShiftDirection.BACK ? -1 : 1;
var nextIndex = currentIndex + step;
while (nextIndex >= 0 && nextIndex < options.length) {
var _options$nextIndex;
if (!((_options$nextIndex = options[nextIndex]) !== null && _options$nextIndex !== void 0 && _options$nextIndex.disabled)) {
this.focusItemAt(nextIndex);
this.setState({
currentIndex: nextIndex
});
return;
}
nextIndex += step;
}
}
}, {
key: "render",
value: function render() {
var _this2 = this,
_options$this$state$c;
var _this$props2 = this.props,
className = _this$props2.className,
options = _this$props2.options,
valueOfSelected = _this$props2.valueOfSelected,
placeholder = _this$props2.placeholder,
onChange = _this$props2.onChange,
isOpen = _this$props2.isOpen,
isInvalid = _this$props2.isInvalid,
itemClassName = _this$props2.itemClassName,
fullWidth = _this$props2.fullWidth,
popoverProps = _this$props2.popoverProps,
compressed = _this$props2.compressed,
rest = (0, _objectWithoutProperties2.default)(_this$props2, _excluded);
var popoverClasses = (0, _classnames.default)('euiSuperSelect', popoverProps === null || popoverProps === void 0 ? void 0 : popoverProps.className);
var button = (0, _react2.jsx)(_super_select_control.EuiSuperSelectControl, (0, _extends2.default)({
options: options,
value: valueOfSelected,
placeholder: placeholder,
onClick: this.state.isPopoverOpen ? this.closePopover : this.openPopover,
onKeyDown: this.onSelectKeyDown,
className: className,
fullWidth: fullWidth,
isInvalid: isInvalid,
compressed: compressed
}, rest, {
buttonRef: this.controlButtonRef,
isDropdownOpen: this.state.isPopoverOpen
}));
var items = options.map(function (option, index) {
var value = option.value,
dropdownDisplay = option.dropdownDisplay,
inputDisplay = option.inputDisplay,
disabled = option.disabled,
optionRest = (0, _objectWithoutProperties2.default)(option, _excluded2);
if (value == null) return;
return (0, _react2.jsx)(_super_select_item.EuiSuperSelectItem, (0, _extends2.default)({
key: index
/* NOTE: This should rather use "li" to align select-like behavior. But the current
implementation relies on the interactive and focusable item for the navigation.
This will require additional refactoring to adjust but we might want to decide first
if the effort is worth it, considering the unification plans for selection components
as part of OneSelect (https://github.com/elastic/eui/issues/8808).
*/,
element: "button",
id: String(value),
className: itemClassName,
checked: valueOfSelected === value ? 'on' : undefined,
isSelected: valueOfSelected === value,
isFocused: _this2.state.currentIndex === index,
isSingleSelection: true,
isDisabled: disabled,
textWrap: "wrap",
onClick: function onClick() {
return _this2.itemClicked(value);
},
onKeyDown: _this2.onItemKeyDown,
ref: function ref(node) {
return _this2.setItemNode(node, index);
},
"aria-selected": valueOfSelected === value
}, optionRest), dropdownDisplay || inputDisplay);
});
var ariaActiveDescendant = ((_options$this$state$c = options[this.state.currentIndex]) === null || _options$this$state$c === void 0 ? void 0 : _options$this$state$c.value) != null ? String(options[this.state.currentIndex].value) : undefined;
return (0, _react2.jsx)(_services.RenderWithEuiStylesMemoizer, null, function (stylesMemoizer) {
var styles = stylesMemoizer(_super_select.euiSuperSelectStyles);
return (0, _react2.jsx)(_popover.EuiInputPopover, (0, _extends2.default)({
closePopover: _this2.closePopover,
panelPaddingSize: "none"
}, popoverProps, {
className: popoverClasses,
isOpen: isOpen || _this2.state.isPopoverOpen,
input: button,
fullWidth: fullWidth,
disableFocusTrap: true // This component handles its own focus manually
}), (0, _react2.jsx)(_accessibility.EuiScreenReaderOnly, null, (0, _react2.jsx)("p", {
id: _this2.describedById
}, (0, _react2.jsx)(_i18n.EuiI18n, {
token: "euiSuperSelect.screenReaderAnnouncement",
default: "You are in a form selector and must select a single option. Use the Up and Down arrow keys to navigate or Escape to close."
}))), (0, _react2.jsx)(_i18n.EuiI18n, {
token: "euiSuperSelect.ariaLabel",
default: "Select listbox"
}, function (ariaLabel) {
return (0, _react2.jsx)("div", {
"aria-label": ariaLabel,
"aria-describedby": _this2.describedById,
css: styles.euiSuperSelect__listbox,
className: "euiSuperSelect__listbox eui-scrollBar",
role: "listbox",
"aria-activedescendant": ariaActiveDescendant,
tabIndex: 0
}, items);
}));
});
}
}]);
}(_react.Component);
(0, _defineProperty2.default)(EuiSuperSelect, "defaultProps", {
fullWidth: false,
compressed: false,
isInvalid: false,
isLoading: false
});