@elastic/eui
Version:
Elastic UI Component Library
457 lines (445 loc) • 23.8 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.EuiContextMenuPanelClass = exports.EuiContextMenuPanel = void 0;
var _react = _interopRequireWildcard(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _classnames = _interopRequireDefault(require("classnames"));
var _tabbable = require("tabbable");
var _services = require("../../services");
var _resize_observer = require("../observer/resize_observer");
var _context_menu_item = require("./context_menu_item");
var _context_menu_panel = require("./context_menu_panel.styles");
var _context_menu_panel_title = require("./context_menu_panel_title");
var _react2 = require("@emotion/react");
var _excluded = ["stylesMemoizer", "children", "className", "onClose", "title", "onHeightChange", "transitionType", "transitionDirection", "onTransitionComplete", "onUseKeyboardToNavigate", "items", "initialFocusedItemIndex", "showNextPanel", "showPreviousPanel"];
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
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 _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], t.indexOf(o) >= 0 || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }
function _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function"); }
function _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, "value" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }
function _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, "prototype", { writable: !1 }), e; }
function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
function _possibleConstructorReturn(t, e) { if (e && ("object" == _typeof(e) || "function" == typeof e)) return e; if (void 0 !== e) throw new TypeError("Derived constructors may only return object or undefined"); return _assertThisInitialized(t); }
function _assertThisInitialized(e) { if (void 0 === e) throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); return e; }
function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
function _getPrototypeOf(t) { return _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function (t) { return t.__proto__ || Object.getPrototypeOf(t); }, _getPrototypeOf(t); }
function _inherits(t, e) { if ("function" != typeof e && null !== e) throw new TypeError("Super expression must either be null or a function"); t.prototype = Object.create(e && e.prototype, { constructor: { value: t, writable: !0, configurable: !0 } }), Object.defineProperty(t, "prototype", { writable: !1 }), e && _setPrototypeOf(t, e); }
function _setPrototypeOf(t, e) { return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) { return t.__proto__ = e, t; }, _setPrototypeOf(t, e); }
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(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 EuiContextMenuPanelClass = exports.EuiContextMenuPanelClass = /*#__PURE__*/function (_Component) {
function EuiContextMenuPanelClass(props) {
var _this;
_classCallCheck(this, EuiContextMenuPanelClass);
_this = _callSuper(this, EuiContextMenuPanelClass, [props]);
_defineProperty(_this, "_isMounted", false);
_defineProperty(_this, "backButton", null);
_defineProperty(_this, "panel", null);
_defineProperty(_this, "initialPopoverParent", null);
// Find all tabbable menu items on both panel init and
// whenever `menuItems` resets when `props.items` changes
_defineProperty(_this, "findMenuItems", function () {
var _this$props$items;
if (!_this.panel) return;
if (!((_this$props$items = _this.props.items) !== null && _this$props$items !== void 0 && _this$props$items.length)) return; // We only need menu items/arrow key navigation for the `items` API
if (_this.state.menuItems.length) return; // If we already have menu items, no need to continue
var tabbableItems = (0, _tabbable.tabbable)(_this.panel);
if (tabbableItems.length) {
_this.setState({
menuItems: tabbableItems
});
}
});
_defineProperty(_this, "focusMenuItem", function (direction) {
var _this$state$menuItems;
var indexOffset = direction === 'up' ? -1 : 1;
var nextFocusedItemIndex;
if (_this.state.focusedItemIndex === undefined) {
// If this is the beginning of the user's keyboard navigation of the menu, then we'll focus
// either the first or last item.
nextFocusedItemIndex = direction === 'up' ? _this.state.menuItems.length - 1 : 0;
} else {
nextFocusedItemIndex = _this.state.focusedItemIndex + indexOffset;
if (nextFocusedItemIndex < 0) {
nextFocusedItemIndex = _this.state.menuItems.length - 1;
} else if (nextFocusedItemIndex === _this.state.menuItems.length) {
nextFocusedItemIndex = 0;
}
}
_this.setState({
focusedItemIndex: nextFocusedItemIndex
});
(_this$state$menuItems = _this.state.menuItems[nextFocusedItemIndex]) === null || _this$state$menuItems === void 0 || _this$state$menuItems.focus();
});
/* Ensures that on initial focus of a menuitem the index is updated.
Otherwise `focusMenuItem()`is not initialized when pressing a key as `onKeyDown`
only fires on key press after the focus moved into the component */
_defineProperty(_this, "setInitialFocusedItemIndex", function (event) {
var _this$props$items2;
if (!((_this$props$items2 = _this.props.items) !== null && _this$props$items2 !== void 0 && _this$props$items2.length) || !_this.state.menuItems.length || _this.state.focusedItemIndex !== undefined) return;
var target = event.target;
var currentIndex = _this.state.menuItems.indexOf(target);
if (currentIndex >= 0) {
_this.setState({
focusedItemIndex: currentIndex
});
}
});
_defineProperty(_this, "onKeyDown", function (event) {
// If this panel contains items you can use the left arrow key to go back at any time.
// But if it doesn't contain items, then you have to focus on the back button specifically,
// since there could be content inside the panel which requires use of the left arrow key,
// e.g. text inputs.
var _this$props = _this.props,
items = _this$props.items,
onClose = _this$props.onClose,
showPreviousPanel = _this$props.showPreviousPanel;
if (onClose && (items !== null && items !== void 0 && items.length || document.activeElement === _this.backButton || document.activeElement === _this.panel)) {
if (event.key === _services.keys.ARROW_LEFT) {
if (showPreviousPanel) {
event.preventDefault();
event.stopPropagation();
showPreviousPanel();
if (_this.props.onUseKeyboardToNavigate) {
_this.props.onUseKeyboardToNavigate();
}
}
}
}
if (items !== null && items !== void 0 && items.length) {
switch (event.key) {
case _services.keys.TAB:
requestAnimationFrame(function () {
// NOTE: document.activeElement is stale if not wrapped in requestAnimationFrame
var focusedItemIndex = _this.state.menuItems.indexOf(document.activeElement);
// We need to sync our internal state with the user tabbing through items
_this.setState({
focusedItemIndex: focusedItemIndex >= 0 && focusedItemIndex < _this.state.menuItems.length ? focusedItemIndex : undefined
});
});
break;
case _services.keys.ARROW_UP:
event.preventDefault();
_this.focusMenuItem('up');
if (_this.props.onUseKeyboardToNavigate) {
_this.props.onUseKeyboardToNavigate();
}
break;
case _services.keys.ARROW_DOWN:
event.preventDefault();
_this.focusMenuItem('down');
if (_this.props.onUseKeyboardToNavigate) {
_this.props.onUseKeyboardToNavigate();
}
break;
case _services.keys.ARROW_RIGHT:
if (_this.props.showNextPanel) {
event.preventDefault();
_this.props.showNextPanel(onClose && _this.state.focusedItemIndex ? _this.state.focusedItemIndex - 1 // Account for panel title back button
: _this.state.focusedItemIndex);
if (_this.props.onUseKeyboardToNavigate) {
_this.props.onUseKeyboardToNavigate();
}
}
break;
default:
break;
}
}
});
_defineProperty(_this, "reclaimPopoverFocus", function () {
_this.setState({
waitingForInitialPopover: false
});
_this.takeInitialFocus();
});
_defineProperty(_this, "onTransitionComplete", function () {
if (_this.props.onTransitionComplete) {
_this.props.onTransitionComplete();
}
});
_defineProperty(_this, "panelRef", function (node) {
_this.panel = node;
_this.updateHeight();
_this.getInitialPopoverParent();
_this.findMenuItems();
});
_defineProperty(_this, "rootId", (0, _services.htmlIdGenerator)());
_this.state = {
prevProps: {
items: _this.props.items
},
menuItems: [],
focusedItemIndex: props.onClose && props.initialFocusedItemIndex != null && props.initialFocusedItemIndex !== -1 ? props.initialFocusedItemIndex + 1 // Account for panel title back button
: props.initialFocusedItemIndex,
currentHeight: undefined,
waitingForInitialPopover: false,
tookInitialFocus: false
};
return _this;
}
_inherits(EuiContextMenuPanelClass, _Component);
return _createClass(EuiContextMenuPanelClass, [{
key: "takeInitialFocus",
value: function takeInitialFocus() {
var _this2 = this;
// Give positioning time to render before focus is applied. Otherwise page jumps.
requestAnimationFrame(function () {
if (!_this2._isMounted) {
return;
}
// Don't take focus yet if EuiContextMenu is in a popover
// and the popover is initially opening/transitioning in
if (_this2.initialPopoverParent && _this2.state.waitingForInitialPopover) {
return;
}
// Setting focus while transitioning causes the animation to glitch, so we have to wait
// until it's finished before we focus anything.
if (_this2.props.transitionType) {
var _this2$panel;
// If the panel is transitioning, set focus to the panel so that users using
// arrow keys that are fast clickers don't accidentally get stranded focus
// or trigger keystrokes when it shouldn't
(_this2$panel = _this2.panel) === null || _this2$panel === void 0 || _this2$panel.focus({
preventScroll: true
});
return;
}
// Initial focus has already been handled, no need to continue and potentially hijack/focus fight
if (_this2.state.tookInitialFocus) {
return;
}
// `initialFocusedItemIndex={-1}` should only be used when preventing initial item focus is desired
if (_this2.state.focusedItemIndex === -1) {
// Resetting the focusedItemIndex to 0 allows keyboard up/down behavior to
// still work correctly later if the panel is manually tabbed into
return _this2.setState({
tookInitialFocus: true,
focusedItemIndex: 0
});
}
// If an item should be focused, focus it (if it exists)
if (_this2.state.focusedItemIndex != null && _this2.state.menuItems.length) {
var focusedItem = _this2.state.menuItems[_this2.state.focusedItemIndex];
if (focusedItem) {
focusedItem.focus();
return _this2.setState({
tookInitialFocus: true
});
}
}
// Otherwise, if the back button panel title is present, focus it
if (_this2.backButton) {
// Focus the back button for both `items` and `children` APIs
_this2.backButton.focus();
// If `items`, ensure our focused item index is correct
if (_this2.state.menuItems.length) {
_this2.setState({
focusedItemIndex: 0
});
}
return _this2.setState({
tookInitialFocus: true
});
}
// Focus on the panel as a last resort.
if (_this2.panel && !_this2.panel.contains(document.activeElement)) {
_this2.panel.focus();
_this2.setState({
tookInitialFocus: true
});
}
});
}
}, {
key: "componentDidUpdate",
value: function componentDidUpdate(prevProps) {
if (prevProps.items !== this.props.items) {
this.findMenuItems();
}
// Focus isn't always ready to be taken on mount, so we need to call it
// on update as well just in case
this.takeInitialFocus();
}
}, {
key: "componentDidMount",
value: function componentDidMount() {
// If EuiContextMenu is used within an EuiPopover, we need to wait for EuiPopover to:
// 1. Correctly set its `returnFocus` to the toggling button,
// so focus is correctly restored to the popover toggle on close
// 2. Finish its react-focus-on `autoFocus` behavior after transitioning in,
// so the panel can handle its own focus without focus fighting
if (this.initialPopoverParent) {
this.initialPopoverParent.addEventListener('focus', this.reclaimPopoverFocus, {
once: true
});
} else {
this.takeInitialFocus();
}
this._isMounted = true;
}
}, {
key: "componentWillUnmount",
value: function componentWillUnmount() {
var _this$initialPopoverP;
(_this$initialPopoverP = this.initialPopoverParent) === null || _this$initialPopoverP === void 0 || _this$initialPopoverP.removeEventListener('focus', this.reclaimPopoverFocus);
this._isMounted = false;
}
}, {
key: "updateHeight",
value: function updateHeight() {
var currentHeight = this.panel ? this.panel.clientHeight : 0;
if (this.state.height !== currentHeight) {
if (this.props.onHeightChange) {
this.props.onHeightChange(currentHeight);
this.setState({
height: currentHeight
});
}
}
}
}, {
key: "getInitialPopoverParent",
value: function getInitialPopoverParent() {
var _parent$parentNode;
// If `transitionType` exists, that means we're navigating between panels
// and the initial popover has already loaded, so we shouldn't need this logic
if (this.props.transitionType) return;
if (!this.panel) return;
var parent = this.panel.parentNode;
if (!parent) return;
var hasEuiContextMenuParent = parent.classList.contains('euiContextMenu');
// It's possible to use an EuiContextMenuPanel directly in a popover without
// an EuiContextMenu, so we need to account for that when searching parent nodes
var popoverParent = hasEuiContextMenuParent ? parent === null || parent === void 0 || (_parent$parentNode = parent.parentNode) === null || _parent$parentNode === void 0 ? void 0 : _parent$parentNode.parentNode : parent === null || parent === void 0 ? void 0 : parent.parentNode;
if (!popoverParent) return;
var hasPopoverParent = !!popoverParent.dataset.popoverPanel;
if (!hasPopoverParent) return;
this.initialPopoverParent = popoverParent;
this.setState({
waitingForInitialPopover: true
});
}
}, {
key: "render",
value: function render() {
var _this3 = this;
var _this$props2 = this.props,
stylesMemoizer = _this$props2.stylesMemoizer,
children = _this$props2.children,
className = _this$props2.className,
onClose = _this$props2.onClose,
title = _this$props2.title,
onHeightChange = _this$props2.onHeightChange,
transitionType = _this$props2.transitionType,
transitionDirection = _this$props2.transitionDirection,
onTransitionComplete = _this$props2.onTransitionComplete,
onUseKeyboardToNavigate = _this$props2.onUseKeyboardToNavigate,
items = _this$props2.items,
initialFocusedItemIndex = _this$props2.initialFocusedItemIndex,
showNextPanel = _this$props2.showNextPanel,
showPreviousPanel = _this$props2.showPreviousPanel,
rest = _objectWithoutProperties(_this$props2, _excluded);
var titleId = this.rootId('euiContextMenuPanelTitle');
var classes = (0, _classnames.default)('euiContextMenuPanel', className);
var styles = stylesMemoizer(_context_menu_panel.euiContextMenuPanelStyles);
var cssStyles = [styles.euiContextMenuPanel, transitionDirection && transitionType && styles[transitionDirection][transitionType]];
var panelTitle = title && (0, _react2.jsx)(_context_menu_panel_title.EuiContextMenuPanelTitle, {
title: title,
id: titleId,
className: "euiContextMenuPanel__title",
onClose: onClose,
buttonRef: function buttonRef(node) {
_this3.backButton = node;
}
});
var isMenu = !!(items && items.length);
var content = items && items.length ? items.map(function (MenuItem) {
var _MenuItem$props$role, _MenuItem$props;
var cloneProps = {
role: (_MenuItem$props$role = (_MenuItem$props = MenuItem.props) === null || _MenuItem$props === void 0 ? void 0 : _MenuItem$props.role) !== null && _MenuItem$props$role !== void 0 ? _MenuItem$props$role : 'menuitem'
};
return MenuItem.type === _context_menu_item.EuiContextMenuItem ? /*#__PURE__*/(0, _react.cloneElement)(MenuItem, cloneProps) : MenuItem;
}) : children;
return (0, _react2.jsx)("div", _extends({
ref: this.panelRef,
css: cssStyles,
className: classes,
onKeyDown: this.onKeyDown,
tabIndex: -1,
onAnimationEnd: this.onTransitionComplete
}, rest), panelTitle, (0, _react2.jsx)(_resize_observer.EuiResizeObserver, {
onResize: function onResize() {
return _this3.updateHeight();
}
}, function (resizeRef) {
return (0, _react2.jsx)("div", {
ref: resizeRef,
role: isMenu ? 'menu' : undefined,
className: "euiContextMenuPanel__list",
"aria-labelledby": title ? titleId : undefined,
onFocus: _this3.setInitialFocusedItemIndex
}, content);
}));
}
}], [{
key: "getDerivedStateFromProps",
value: function getDerivedStateFromProps(nextProps, prevState) {
var needsUpdate = false;
var nextState = {};
// Clear refs to menuItems if we're getting new ones.
if (nextProps.items !== prevState.prevProps.items) {
needsUpdate = true;
nextState.menuItems = [];
nextState.prevProps = {
items: nextProps.items
};
}
if (needsUpdate) {
return nextState;
}
return null;
}
}]);
}(_react.Component);
_defineProperty(EuiContextMenuPanelClass, "defaultProps", {
items: []
});
EuiContextMenuPanelClass.propTypes = {
className: _propTypes.default.string,
"aria-label": _propTypes.default.string,
"data-test-subj": _propTypes.default.string,
css: _propTypes.default.any,
/**
* Determines the initially focused menu item for keyboard and screen reader users.
*
* Can be set to `-1` to prevent autofocus (an uncommon case that must have
* keyboard accessibility accounted for manually if used)
*/
initialFocusedItemIndex: _propTypes.default.number,
items: _propTypes.default.arrayOf(_propTypes.default.element.isRequired),
onClose: _propTypes.default.func,
onHeightChange: _propTypes.default.func,
onTransitionComplete: _propTypes.default.func,
onUseKeyboardToNavigate: _propTypes.default.func,
showNextPanel: _propTypes.default.func,
showPreviousPanel: _propTypes.default.func,
title: _propTypes.default.node,
transitionDirection: _propTypes.default.oneOf(["next", "previous"]),
transitionType: _propTypes.default.oneOf(["in", "out"]),
height: _propTypes.default.any
};
var EuiContextMenuPanel = exports.EuiContextMenuPanel = (0, _services.withEuiStylesMemoizer)(EuiContextMenuPanelClass);