@atlaskit/dropdown-menu
Version:
A dropdown menu displays a list of actions or options to a user.
111 lines (108 loc) • 5.23 kB
JavaScript
/* menu-wrapper.tsx generated by @compiled/babel-plugin v0.36.1 */
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
require("./menu-wrapper.compiled.css");
var _react = _interopRequireWildcard(require("react"));
var React = _react;
var _runtime = require("@compiled/react/runtime");
var _menuGroup = _interopRequireDefault(require("@atlaskit/menu/menu-group"));
var _compiled = require("@atlaskit/primitives/compiled");
var _spinner = _interopRequireDefault(require("@atlaskit/spinner"));
var _isCheckboxItem = _interopRequireDefault(require("../utils/is-checkbox-item"));
var _isRadioItem = _interopRequireDefault(require("../utils/is-radio-item"));
var _focusManager = require("./focus-manager");
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
var styles = {
spinnerContainer: "_1e0c1txw _1ul91lit _1bah1h6o _ca0qv47k _u5f3v47k _n3tdv47k _19bvv47k"
};
var LoadingIndicator = function LoadingIndicator(_ref) {
var _ref$statusLabel = _ref.statusLabel,
statusLabel = _ref$statusLabel === void 0 ? 'Loading' : _ref$statusLabel,
testId = _ref.testId;
return /*#__PURE__*/React.createElement(_compiled.Box, {
xcss: styles.spinnerContainer,
role: "menuitem"
}, /*#__PURE__*/React.createElement(_spinner.default, {
size: "small",
label: statusLabel,
testId: testId
}));
};
/**
*
* MenuWrapper wraps all the menu items.
* It handles the logic to close the menu when a MenuItem is clicked, but leaves it open
* if a CheckboxItem or RadioItem is clicked.
* It also sets focus to the first menu item when opened.
*/
var MenuWrapper = function MenuWrapper(_ref2) {
var children = _ref2.children,
isLoading = _ref2.isLoading,
maxHeight = _ref2.maxHeight,
maxWidth = _ref2.maxWidth,
onClose = _ref2.onClose,
onUpdate = _ref2.onUpdate,
statusLabel = _ref2.statusLabel,
setInitialFocusRef = _ref2.setInitialFocusRef,
shouldRenderToParent = _ref2.shouldRenderToParent,
spacing = _ref2.spacing,
testId = _ref2.testId,
isTriggeredUsingKeyboard = _ref2.isTriggeredUsingKeyboard,
autoFocus = _ref2.autoFocus;
var _useContext = (0, _react.useContext)(_focusManager.FocusManagerContext),
menuItemRefs = _useContext.menuItemRefs;
var closeOnMenuItemClick = function closeOnMenuItemClick(e) {
var isTargetMenuItemOrDescendant = menuItemRefs.some(function (menuItemRef) {
var menuItem = menuItemRef.current;
if (!menuItem) {
return false;
}
var isCheckboxOrRadio = (0, _isCheckboxItem.default)(menuItem) || (0, _isRadioItem.default)(menuItem);
return menuItem.contains(e.target) && !isCheckboxOrRadio;
});
// Close menu if the click is triggered from a MenuItem or
// its descendant. Don't close the menu if the click is triggered
// from a MenuItemRadio or MenuItemCheckbox so that the user can
// select multiple items.
if (isTargetMenuItemOrDescendant && onClose) {
onClose(e);
}
};
// Using useEffect here causes a flicker.
// useLayoutEffect ensures that the update and render happen in the same
// rAF tick.
(0, _react.useLayoutEffect)(function () {
onUpdate();
}, [isLoading, onUpdate]);
(0, _react.useEffect)(function () {
var _menuItemRefs$map$fin;
var firstFocusableRef = (_menuItemRefs$map$fin = menuItemRefs.map(function (_ref3) {
var current = _ref3.current;
return current;
}).find(function (el) {
return !!el && !el.hasAttribute('disabled');
})) !== null && _menuItemRefs$map$fin !== void 0 ? _menuItemRefs$map$fin : null;
if (shouldRenderToParent && (isTriggeredUsingKeyboard || autoFocus)) {
firstFocusableRef === null || firstFocusableRef === void 0 || firstFocusableRef.focus();
}
setInitialFocusRef === null || setInitialFocusRef === void 0 || setInitialFocusRef(firstFocusableRef);
}, [menuItemRefs, setInitialFocusRef, autoFocus, shouldRenderToParent, isTriggeredUsingKeyboard]);
return /*#__PURE__*/React.createElement(_menuGroup.default, {
isLoading: isLoading,
maxHeight: maxHeight,
maxWidth: maxWidth,
onClick: closeOnMenuItemClick,
role: "menu",
spacing: spacing,
testId: testId && "".concat(testId, "--menu-group")
}, isLoading ? /*#__PURE__*/React.createElement(LoadingIndicator, {
statusLabel: statusLabel,
testId: testId && "".concat(testId, "--loading-indicator")
}) : children);
};
var _default = exports.default = MenuWrapper;