@atlaskit/atlassian-navigation
Version:
A horizontal navigation component for Atlassian apps.
117 lines (113 loc) • 5.18 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.PrimaryItemsContainer = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _react = _interopRequireWildcard(require("react"));
var _react2 = require("@emotion/react");
var _popup = _interopRequireDefault(require("@atlaskit/popup"));
var _widthDetector = require("@atlaskit/width-detector");
var _overflowProvider = require("../../controllers/overflow/overflow-provider");
var _useOverflowController = require("../../controllers/overflow/use-overflow-controller");
var _PrimaryDropdownButton = require("../PrimaryDropdownButton");
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); }
/**
* @jsxRuntime classic
* @jsx jsx
*/
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
var containerStyles = (0, _react2.css)({
display: 'flex',
height: '100%',
position: 'relative',
alignItems: 'stretch',
flexBasis: 0,
flexGrow: 1,
flexShrink: 0,
// eslint-disable-next-line @atlaskit/design-system/no-nested-styles, @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
'& > *': {
margin: "0 ".concat("var(--ds-space-050, 4px)"),
flexShrink: 0
}
});
var widthObserverContainerStyles = (0, _react2.css)({
width: '100%',
minWidth: '1px',
margin: '0px',
position: 'relative',
flexShrink: 1
});
var overflowItemsStyles = (0, _react2.css)({
color: "var(--ds-text, #292A2E)"
});
// Internal only
// eslint-disable-next-line @repo/internal/react/require-jsdoc
var PrimaryItemsContainer = exports.PrimaryItemsContainer = function PrimaryItemsContainer(_ref) {
var moreLabel = _ref.moreLabel,
items = _ref.items,
Create = _ref.create,
testId = _ref.testId;
var _useState = (0, _react.useState)(false),
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
isMoreOpen = _useState2[0],
setIsMoreOpen = _useState2[1];
var _useOverflowControlle = (0, _useOverflowController.useOverflowController)(items),
updateWidth = _useOverflowControlle.updateWidth,
visibleItems = _useOverflowControlle.visibleItems,
overflowItems = _useOverflowControlle.overflowItems;
var onMoreClick = (0, _react.useCallback)(function () {
setIsMoreOpen(!isMoreOpen);
}, [isMoreOpen, setIsMoreOpen]);
var onMoreClose = (0, _react.useCallback)(function () {
setIsMoreOpen(false);
}, []);
var openOverflowMenu = (0, _react.useCallback)(function () {
setIsMoreOpen(true);
}, []);
var trigger = (0, _react.useCallback)(function (triggerProps) {
return (0, _react2.jsx)(_PrimaryDropdownButton.PrimaryDropdownButton, (0, _extends2.default)({
onClick: onMoreClick,
isSelected: isMoreOpen,
testId: testId ? "".concat(testId, "-overflow-menu-trigger") : 'overflow-menu-trigger'
}, triggerProps), moreLabel);
}, [moreLabel, onMoreClick, isMoreOpen, testId]);
var content = (0, _react.useCallback)(function () {
return (0, _react2.jsx)(_overflowProvider.OverflowProvider, {
isVisible: false,
openOverflowMenu: openOverflowMenu,
closeOverflowMenu: onMoreClose
}, (0, _react2.jsx)("div", {
css: overflowItemsStyles
}, overflowItems));
},
// Overflow items has an unstable reference - so we will only recalculate
// content if `overflowItems` length changes.
// eslint-disable-next-line react-hooks/exhaustive-deps
[overflowItems.length, openOverflowMenu, onMoreClose]);
return (0, _react2.jsx)("div", {
css: containerStyles,
"data-testid": testId && "".concat(testId, "-primary-actions"),
role: "list"
}, (0, _react2.jsx)(_overflowProvider.OverflowProvider, {
isVisible: true,
openOverflowMenu: openOverflowMenu,
closeOverflowMenu: onMoreClose
}, visibleItems), overflowItems.length > 0 && (0, _react2.jsx)(_popup.default, {
shouldRenderToParent: true,
placement: "bottom-start",
content: content,
isOpen: isMoreOpen,
onClose: onMoreClose,
trigger: trigger,
testId: testId ? "".concat(testId, "-overflow-menu-popup") : 'overflow-menu-popup'
}), Create && (0, _react2.jsx)(Create, null), (0, _react2.jsx)("div", {
css: widthObserverContainerStyles
}, (0, _react2.jsx)(_widthDetector.WidthObserver, {
offscreen: true,
setWidth: updateWidth
})));
};