@atlaskit/side-nav-items 1.0.0

package/dist/cjs/ui/menu-item/link-menu-item.js

@@ -0,0 +1,81 @@
+/* link-menu-item.tsx generated by @compiled/babel-plugin v0.38.1 */
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.LinkMenuItem = void 0;
+require("./link-menu-item.compiled.css");
+var _react = _interopRequireWildcard(require("react"));
+var React = _react;
+var _runtime = require("@compiled/react/runtime");
+var _forwardRefWithGeneric = _interopRequireDefault(require("@atlaskit/ds-lib/forward-ref-with-generic"));
+var _mergeRefs = _interopRequireDefault(require("@atlaskit/ds-lib/merge-refs"));
+var _listItem = require("./list-item");
+var _menuItem = require("./menu-item");
+var _useScrollMenuItemIntoView = require("./use-scroll-menu-item-into-view");
+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 listItemStyles = {
+  root: "_10m98stt"
+};
+var LinkMenuItemNoRef = function LinkMenuItemNoRef(_ref, forwardedRef) {
+  var testId = _ref.testId,
+    actions = _ref.actions,
+    children = _ref.children,
+    description = _ref.description,
+    elemAfter = _ref.elemAfter,
+    elemBefore = _ref.elemBefore,
+    href = _ref.href,
+    target = _ref.target,
+    actionsOnHover = _ref.actionsOnHover,
+    isSelected = _ref.isSelected,
+    onClick = _ref.onClick,
+    interactionName = _ref.interactionName,
+    isContentTooltipDisabled = _ref.isContentTooltipDisabled,
+    visualContentRef = _ref.visualContentRef,
+    listItemRef = _ref.listItemRef,
+    isDragging = _ref.isDragging,
+    hasDragIndicator = _ref.hasDragIndicator,
+    dropIndicator = _ref.dropIndicator;
+  var itemRef = (0, _react.useRef)(null);
+  (0, _useScrollMenuItemIntoView.useScrollMenuItemIntoView)({
+    elementRef: itemRef,
+    isSelected: isSelected !== null && isSelected !== void 0 ? isSelected : false
+  });
+  var ref = (0, _react.useMemo)(function () {
+    return (0, _mergeRefs.default)([itemRef, listItemRef !== null && listItemRef !== void 0 ? listItemRef : null]);
+  }, [itemRef, listItemRef]);
+  return /*#__PURE__*/React.createElement(_listItem.ListItem, {
+    ref: ref,
+    xcss: listItemStyles.root
+  }, /*#__PURE__*/React.createElement(_menuItem.MenuItemBase, {
+    testId: testId,
+    description: description,
+    actions: actions,
+    elemAfter: elemAfter
+    // TODO Always use "open in new window" icon when `openInNewWindow` prop is true
+    ,
+    elemBefore: elemBefore,
+    href: href,
+    target: target,
+    actionsOnHover: actionsOnHover,
+    isSelected: isSelected,
+    onClick: onClick,
+    ref: forwardedRef,
+    visualContentRef: visualContentRef,
+    interactionName: interactionName,
+    isContentTooltipDisabled: isContentTooltipDisabled,
+    isDragging: isDragging,
+    hasDragIndicator: hasDragIndicator,
+    dropIndicator: dropIndicator
+  }, children));
+};
+
+/**
+ * LinkMenuItem
+ *
+ * A menu item link. It should be used within a `ul`.
+ */
+var LinkMenuItem = exports.LinkMenuItem = (0, _forwardRefWithGeneric.default)(LinkMenuItemNoRef);

package/dist/cjs/ui/menu-item/list-item.js

@@ -0,0 +1,30 @@
+/* list-item.tsx generated by @compiled/babel-plugin v0.38.1 */
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ListItem = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var React = _react;
+var _runtime = require("@compiled/react/runtime");
+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); }
+function _ListItem(_ref, ref) {
+  var children = _ref.children,
+    testId = _ref.testId,
+    xcss = _ref.xcss;
+  return /*#__PURE__*/React.createElement("div", {
+    role: "listitem",
+    ref: ref,
+    className: xcss,
+    "data-testid": testId
+  }, children);
+}
+
+/**
+ * __List item__
+ *
+ * A [list item](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/li) with visual styles removed.
+ */
+var ListItem = exports.ListItem = /*#__PURE__*/(0, _react.forwardRef)(_ListItem);

package/dist/cjs/ui/menu-item/list.js

@@ -0,0 +1,40 @@
+/* list.tsx generated by @compiled/babel-plugin v0.38.1 */
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.List = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var React = _react;
+var _runtime = require("@compiled/react/runtime");
+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); }
+function _List(_ref, forwardedRef) {
+  var children = _ref.children,
+    testId = _ref.testId,
+    xcss = _ref.xcss;
+  return (
+    /*#__PURE__*/
+    /**
+     * We are using `role="list"` instead of a `ul` element to enable more flexible
+     * composition. By using ARIA roles we can validly have elements between a list
+     * and list items, as long as those in-between elements have no semantics.
+     */
+    React.createElement("div", {
+      role: "list",
+      ref: forwardedRef,
+      className: xcss,
+      "data-testid": testId
+    }, children)
+  );
+}
+
+/**
+ * __List__
+ *
+ * A an element with the role of `list` for semantically grouping list items.
+ *
+ * This is the internal primitive used by other external components in the navigation system.
+ */
+var List = exports.List = /*#__PURE__*/(0, _react.forwardRef)(_List);

package/dist/cjs/ui/menu-item/menu-item-signals.js

@@ -0,0 +1,11 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.COLLAPSE_ELEM_BEFORE = void 0;
+/**
+ * A symbol to collapse the `elemBefore` slot.
+ * This should be placed in the `elemBefore` prop of supported menu items.
+ */
+var COLLAPSE_ELEM_BEFORE = exports.COLLAPSE_ELEM_BEFORE = Symbol('collapse-elem-before');

package/dist/cjs/ui/menu-item/menu-item.compiled.css

@@ -0,0 +1,101 @@
+
+._1r04ze3t{inset:var(--ds-space-0,0)}
+._2rko12b0{border-radius:var(--ds-radius-small,4px)}
+._2rko1qi0{border-radius:var(--ds-radius-medium,6px)}
+._nd5l16dh{grid-area:elem-after}
+._nd5l17zh{grid-area:elem-before}
+._nd5l19l3{grid-area:interactive}
+._nd5lbc26{grid-area:actions}
+._zulp1b66{gap:var(--ds-space-050,4px)}
+._zulpv77o{gap:var(--ds-space-025,2px)}
+._1ii7kb7n{grid-row:1}
+._yyhyjvu9{grid-column:1/-1}
+._14iu13ro:active:not(:disabled){background-color:var(--ds-surface-pressed,#dddee1)}
+._14iunozp:active:not(:disabled){background-color:var(--ds-background-selected-pressed,#8fb8f6)}
+._152t1ssb{inset-block-start:50%}
+._18m915vq{overflow-y:hidden}
+._18ukglyw:not(:has(button,a)){pointer-events:none}
+._1bah1h6o{justify-content:center}
+._1bsb1tcg{width:24px}
+._1bsbty16{width:var(--actions-on-hover-width)}
+._1bsbyh40{width:2px}
+._1cykglyw{--drag-handle-display:none}
+._1djyglyw:has([aria-expanded=true][aria-haspopup=true]){--elem-after-display:none}
+._1e02ze3t{inset-inline-start:var(--ds-space-0,0)}
+._1e0c11p5{display:grid}
+._1e0c13yo{display:var(--elem-after-display)}
+._1e0c1txw{display:flex}
+._1ifmglyw{-webkit-touch-callout:none}
+._1lmcu4vt{grid-template-areas:"elem-before interactive elem-after actions"}
+._1o9zidpf{flex-shrink:0}
+._1q511b66{padding-block-start:var(--ds-space-050,4px)}
+._1rbv1wug:has([aria-expanded=true][aria-haspopup=true]){--actions-on-hover-width:auto}
+._1reo15vq{overflow-x:hidden}
+._1swv19i6:has([aria-expanded=true][aria-haspopup=true]){background-color:var(--ds-surface-hovered,#f0f1f2)}
+._1swvufnl:has([aria-expanded=true][aria-haspopup=true]){background-color:var(--ds-background-selected-hovered,#cfe1fd)}
+._1ul91c9m{min-width:1ch}
+._1ul9t9kd{min-width:72px}
+._1yyu1j28{--notch-color:transparent}
+._1yyujmqp{--notch-color:var(--ds-background-selected-bold,#1868db)}
+._2lx21bp4{flex-direction:column}
+._2z05hkll{grid-template-rows:1fr}
+._2z05nbh3{grid-template-rows:subgrid}
+._4cvr1h6o{align-items:center}
+._4t3i1crf{height:9pt}
+._4t3i1tcg{height:24px}
+._4t3i1wto{height:3rem}
+._4t3iviql{height:2rem}
+._85i51b66{padding-block-end:var(--ds-space-050,4px)}
+._91ju1txw{--elem-after-display:flex}
+._91juglyw{--elem-after-display:none}
+._ae4v1h6o{align-content:center}
+._bfhk15s3{background-color:var(--ds-background-selected,#e9f2fe)}
+._bfhk1j28{background-color:transparent}
+._bfhk1o0g{background-color:var(--notch-color)}
+._bfhkn7od{background-color:unset}
+._bozg12x7{padding-inline-start:var(--ds-space-075,6px)}
+._bozg1b66{padding-inline-start:var(--ds-space-050,4px)}
+._db801b66{--actions-on-hover-padding:var(--ds-space-050,4px)}
+._db80idpf{--actions-on-hover-padding:0}
+._kqswh2mm{position:relative}
+._kqswstnw{position:absolute}
+._kwq51b66:has([aria-expanded=true][aria-haspopup=true]){--actions-on-hover-padding:var(--ds-space-050,4px)}
+._pmxp1wug{--actions-on-hover-width:auto}
+._pmxpidpf{--actions-on-hover-width:0}
+._qxq9kb7n:has([aria-expanded=true][aria-haspopup=true]){--actions-on-hover-opacity:1}
+._syaz1gmx{color:var(--ds-text-disabled,#080f214a)}
+._syaz6x5g{color:var(--ds-text-selected,#1868db)}
+._syazazsu{color:var(--ds-text-subtle,#505258)}
+._t9ec1i34{transform:translateY(-50%)}
+._tzy41ou4{opacity:.4}
+._tzy4pnc3{opacity:var(--actions-on-hover-opacity)}
+._uiztglyw{-webkit-user-select:none;-ms-user-select:none;user-select:none}
+._uomdidpf{--actions-on-hover-opacity:0}
+._uomdkb7n{--actions-on-hover-opacity:1}
+._vchh1ntv{box-sizing:content-box}
+._vchhusvi{box-sizing:border-box}
+._y3gnv2br{text-align:start}
+._y4ti1b66{padding-inline-end:var(--ds-space-050,4px)}
+._y4tidria{padding-inline-end:var(--actions-on-hover-padding)}
+._yv0e7dup{grid-template-columns:minmax(0,auto) 1fr minmax(0,auto) minmax(0,auto)}
+._yv0enbh3{grid-template-columns:subgrid}
+._12s918uv:focus-within{overflow-y:initial}
+._1guo18uv:focus-within{overflow-x:initial}
+._1mfcglyw:focus-within{--elem-after-display:none}
+._91nl1wug:focus-within{--actions-on-hover-width:auto}
+._iy5o1b66:focus-within{--actions-on-hover-padding:var(--ds-space-050,4px)}
+._t7p8kb7n:focus-within{--actions-on-hover-opacity:1}._11om6b4r:hover{animation-name:k1xyysw3}
+._1sjuglyw:hover{--elem-after-display:none}
+._1uy01amc:hover{animation-delay:.8s}
+._30l31gmx:hover{color:var(--ds-text-disabled,#080f214a)}
+._30l36x5g:hover{color:var(--ds-text-selected,#1868db)}
+._7psyru3m:hover{animation-duration:0s}
+._bir2q7pw:hover{animation-fill-mode:forwards}
+._g4kikb7n:hover{--actions-on-hover-opacity:1}
+._irr319i6:hover{background-color:var(--ds-surface-hovered,#f0f1f2)}
+._irr3n7od:hover{background-color:unset}
+._irr3ufnl:hover{background-color:var(--ds-background-selected-hovered,#cfe1fd)}
+._v4o21b66:hover{--actions-on-hover-padding:var(--ds-space-050,4px)}
+._x0kw1txw:hover{--drag-handle-display:flex}
+._ynyi1wug:hover{--actions-on-hover-width:auto}
+@keyframes k1xyysw3{to{cursor:grab}}

package/dist/cjs/ui/menu-item/menu-item.js

@@ -0,0 +1,394 @@
+/* menu-item.tsx generated by @compiled/babel-plugin v0.38.1 */
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.nestedOpenPopupCSSSelector = exports.MenuItemBase = void 0;
+require("./menu-item.compiled.css");
+var _runtime = require("@compiled/react/runtime");
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireWildcard(require("react"));
+var _react2 = require("@compiled/react");
+var _avatar = require("@atlaskit/avatar");
+var _forwardRefWithGeneric = _interopRequireDefault(require("@atlaskit/ds-lib/forward-ref-with-generic"));
+var _mergeRefs = _interopRequireDefault(require("@atlaskit/ds-lib/merge-refs"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _compiled = require("@atlaskit/primitives/compiled");
+var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
+var _constants = require("./constants");
+var _lazyDragHandle = require("./drag-handle/lazy-drag-handle");
+var _expandableMenuItemContext = require("./expandable-menu-item/expandable-menu-item-context");
+var _flyoutMenuItemContext = require("./flyout-menu-item/flyout-menu-item-context");
+var _menuItemSignals = require("./menu-item-signals");
+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); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function isTextClamped(element) {
+  // Checking for vertical height rather than horizontal height.
+  // When text is "clamped", it's technically being clamped vertically! 🤯
+  return element.scrollHeight > element.clientHeight;
+}
+var defaultAvatarValues = {
+  size: 'small'
+};
+var elemAfterDisplayVar = '--elem-after-display';
+var actionsOnHoverOpacityVar = '--actions-on-hover-opacity';
+var actionsOnHoverWidthVar = '--actions-on-hover-width';
+var actionsOnHoverPaddingInlineEndVar = '--actions-on-hover-padding';
+var notchColorVar = '--notch-color';
+
+// Note: this is also used in `drag-handle.tsx`
+var dragHandleDisplayVar = '--drag-handle-display';
+var dragCursorAnimation = null;
+
+/**
+ * ## 🤹 `position:relative`
+ *
+ * We need `position:relative` on an element that takes
+ * up the full size of the interactive element so we
+ * can correctly use `position:absolute` to place:
+ * 1. the notch for links
+ * 2. drop indicators for drag and drop
+ * 3. a child of button / anchor to stretch it out to
+ *    increase it's pressable area.
+ *
+ * ⛔️ We cannot add `position:relative` _only_ on the
+ * button / anchor as that will cause sibling elements
+ * to be rendered under the button / anchor when setting
+ * a background color on the button / anchor.
+ *
+ * 📖 Note: `position:relative` elements are painted after
+ * elements with `position:static` (the default)
+ * https://drafts.csswg.org/css-position-4/#painting-order
+ *
+ * ⛔️ We cannot add `position:relative` to the container
+ * element, as then the `:focus` ring styles on the
+ * button / anchor can be cut off by the next sibling if it has
+ * has a background color set (eg when selected)
+ *
+ * ✅ Add `position:relative` to all first level descendants
+ * of the container element so that we don't impact DOM ordered
+ * paint ordering within the item and the button / anchor focus
+ * ring can still bleed over siblings
+ *
+ * 📖 We could use `> * { position: relative; }` on the container,
+ * but that would violate our styling standard.
+ */
+var topLevelSiblingStyles = {
+  root: "_kqswh2mm"
+};
+
+/**
+ * All slots on the menu item (eg `elemBefore`) are rendered as siblings
+ * of our main button / anchor element and they are visually placed on
+ * top of the main button / anchor.
+ *
+ * 📖 This is done so that we don't nest interactive elements in our markup.
+ *
+ * ✅ This is great when element in the slot is an interactive element
+ * as we don't want the main menu item button / anchor to be triggered
+ * when interacting with the element in the slot.
+ *
+ * ⛔️ When the element in the slot is static content (eg an `<Icon>`) it will
+ * prevent the main button / anchor (that is visually behind the element in
+ * the slot) from being clicked. The element in the slot is a sibling of our
+ * main button / anchor (not a child of it) so clicking on the element in the
+ * slot will not bubble up to the button / anchor.
+ *
+ * 🚀 We set `pointer-events:none` on a slot if it does not contain and interactive
+ * element so that static content in a slot does not prevent clicking on the main
+ * button / anchor.
+ */
+var onTopOfButtonOrAnchorStyles = {
+  root: "_18ukglyw"
+};
+
+/**
+ * This is being _internally_ exported so it can be used in other menu item wrapper components, like
+ * ExpandableMenuItemTrigger.
+ *
+ * This selector is used to apply hover styling on the menu item if it contains an open nested popup.
+ * It's looking for a popup trigger with `aria-hasexpanded` and `aria-haspopup` attributes. The
+ * reason for targeting the _trigger_ instead of the popup itself, is the popup might be rendered
+ * outside the menu item, e.g. if rendered in a portal.
+ *
+ * An alternative solution might involve wrapping it with a popup context and listening to the popup
+ * events through it (and applying the hover style when the popup is open). Exploring this has been
+ * captured in [BLU-3354](https://jplat.atlassian.net/browse/BLU-3354).
+ */
+var nestedOpenPopupCSSSelector = exports.nestedOpenPopupCSSSelector = '&:has([aria-expanded="true"][aria-haspopup="true"])';
+var containerStyles = {
+  root: "_2rko12b0 _vchhusvi _1e0c11p5 _yv0e7dup _2z05hkll _1lmcu4vt _1ul9t9kd _4t3iviql _4cvr1h6o _uiztglyw _syazazsu _1yyu1j28 _91ju1txw _uomdidpf _pmxpidpf _db80idpf _qxq9kb7n _1rbv1wug _kwq51b66 _1swv19i6 _irr319i6 _t7p8kb7n _g4kikb7n _91nl1wug _ynyi1wug _iy5o1b66 _v4o21b66",
+  rootT26Shape: "_2rko1qi0",
+  removeElemAfter: "_91juglyw",
+  showHoverActions: "_uomdkb7n _pmxp1wug _db801b66",
+  removeElemAfterOnHoverOrOpenNestedPopup: "_1djyglyw _1mfcglyw _1sjuglyw",
+  selected: "_bfhk15s3 _syaz6x5g _1yyujmqp _1swvufnl _30l36x5g _irr3ufnl",
+  disabled: "_syaz1gmx _bfhkn7od _irr3n7od _30l31gmx",
+  hasDescription: "_4t3i1wto",
+  dragging: "_tzy41ou4"
+};
+var buttonOrAnchorStyles = {
+  root: "_2rko12b0 _yyhyjvu9 _1ii7kb7n _1e0c11p5 _yv0enbh3 _2z05nbh3 _y4ti1b66 _bozg1b66 _1q511b66 _85i51b66 _bfhk1j28 _syazazsu _4cvr1h6o _y3gnv2br _14iu13ro",
+  rootT26Shape: "_2rko1qi0",
+  selected: "_syaz6x5g _14iunozp",
+  hasDragIndicator: "_1ifmglyw _1cykglyw _x0kw1txw _11om6b4r _7psyru3m _1uy01amc _bir2q7pw"
+};
+var extendButtonOrAnchorStyles = {
+  root: "_1r04ze3t _kqswstnw"
+};
+var notchStyles = {
+  root: "_kqswstnw _152t1ssb _1e02ze3t _1bsbyh40 _4t3i1crf _t9ec1i34 _bfhk1o0g"
+};
+var actionStyles = {
+  root: "_zulp1b66 _nd5lbc26 _1reo15vq _18m915vq _1e0c1txw _4cvr1h6o _y4ti1b66 _1guo18uv _12s918uv"
+};
+var actionsOnHoverStyles = {
+  root: "_nd5l16dh _zulp1b66 _1reo15vq _18m915vq _4cvr1h6o _1e0c1txw _tzy4pnc3 _1bsbty16 _y4tidria _1guo18uv _12s918uv"
+};
+var textStyles = {
+  root: "_zulpv77o _1reo15vq _18m915vq _y4ti1b66 _bozg1b66 _1e0c1txw _2lx21bp4 _1ul91c9m _1guo18uv _12s918uv",
+  noElemBeforeIndent: "_bozg12x7"
+};
+var elemBeforeStyles = {
+  root: "_nd5l17zh _1reo15vq _18m915vq _1e0c1txw _1o9zidpf _1bsb1tcg _4t3i1tcg _4cvr1h6o _1bah1h6o _bozg1b66 _vchh1ntv _1guo18uv _12s918uv"
+};
+var elemAfterStyles = {
+  root: "_nd5l16dh _1reo15vq _18m915vq _1e0c13yo _1o9zidpf _4t3i1tcg _4cvr1h6o _y4ti1b66 _1guo18uv _12s918uv"
+};
+
+/**
+ * We are using a wrapping element for our interactive content
+ * even though only the `Text` element is the only thing not using `position:absolute`
+ *
+ * Rationale:
+ * - Super clear that everything inside the interactive content should be in a specific slot in the grid
+ * - To work around a browser bug in Safari where it does not work well with `position:absolute`
+ *   on a subgrid child.
+ *   Safari bug: https://bugs.webkit.org/show_bug.cgi?id=292516
+ */
+var interactiveContentStyles = {
+  root: "_nd5l19l3 _1e0c1txw _2lx21bp4 _ae4v1h6o"
+};
+function getTextColor(_ref) {
+  var isDisabled = _ref.isDisabled,
+    isSelected = _ref.isSelected;
+  if (isDisabled) {
+    return 'color.text.disabled';
+  }
+  if (isSelected) {
+    return 'color.text.selected';
+  }
+  return 'color.text.subtle';
+}
+
+/**
+ * Includes all props that are used by any menu item, as MenuItembase is the base component for all menu item components.
+ *
+ * We also include additional `aria` props to support the menu item being a trigger for the FlyoutMenuItem popup and for the
+ * expanded content for ExpandableMenuItem.
+ */
+
+/**
+ * This is the internal version of the component, to be passed into `forwardRef`.
+ *
+ * It contains a type argument `<T>`, to specify the type of the interactive element (`button` or `a`).
+ * This can be inferred from the type of the `onClick` prop.
+ */
+var MenuItemBaseNoRef = function MenuItemBaseNoRef(_ref2, forwardedRef) {
+  var id = _ref2.id,
+    testId = _ref2.testId,
+    actions = _ref2.actions,
+    actionsOnHover = _ref2.actionsOnHover,
+    children = _ref2.children,
+    description = _ref2.description,
+    elemAfter = _ref2.elemAfter,
+    elemBefore = _ref2.elemBefore,
+    href = _ref2.href,
+    target = _ref2.target,
+    isDisabled = _ref2.isDisabled,
+    isSelected = _ref2.isSelected,
+    onClick = _ref2.onClick,
+    ariaControls = _ref2.ariaControls,
+    ariaExpanded = _ref2.ariaExpanded,
+    ariaHasPopup = _ref2.ariaHasPopup,
+    interactionName = _ref2.interactionName,
+    isContentTooltipDisabled = _ref2.isContentTooltipDisabled,
+    visualContentRef = _ref2.visualContentRef,
+    isDragging = _ref2.isDragging,
+    hasDragIndicator = _ref2.hasDragIndicator,
+    dropIndicator = _ref2.dropIndicator;
+  var level = (0, _expandableMenuItemContext.useLevel)();
+  var setFlyoutMenuOpen = (0, _flyoutMenuItemContext.useSetFlyoutMenuOpen)();
+  var isFlyoutMenuOpen = (0, _flyoutMenuItemContext.useFlyoutMenuOpen)();
+  var isLink = typeof href !== 'undefined';
+  var labelRef = (0, _react.useRef)(null);
+  var descriptionRef = (0, _react.useRef)(null);
+  var tooltipOnClick = (0, _react.useRef)(null);
+  var handleClick = (0, _react.useCallback)(function (event, analyticsEvent) {
+    var _tooltipOnClick$curre;
+    onClick === null || onClick === void 0 || onClick(event, analyticsEvent);
+    // Toggle flyout menu open state when inside a flyout context provider
+    setFlyoutMenuOpen(!isFlyoutMenuOpen);
+    (_tooltipOnClick$curre = tooltipOnClick.current) === null || _tooltipOnClick$curre === void 0 || _tooltipOnClick$curre.call(tooltipOnClick, event);
+  }, [onClick, setFlyoutMenuOpen, isFlyoutMenuOpen]);
+
+  /**
+   * Show the tooltip if _either_ label or description is truncated
+   */
+  var canTooltipAppear = (0, _react.useCallback)(function () {
+    if (isContentTooltipDisabled) {
+      return false;
+    }
+
+    // Show tooltip if _either_ label or description are clamped
+
+    var label = labelRef.current;
+    var description = descriptionRef.current;
+    if (label && isTextClamped(label)) {
+      return true;
+    }
+    return Boolean(description && isTextClamped(description));
+  }, [isContentTooltipDisabled]);
+
+  // By default provide the spacing for `elemBefore` to have good
+  // vertical alignment of labels and to give clear indentation between levels
+  // in the side navigation (even when items don't use elemBefore).
+  var showElemBefore = elemBefore !== _menuItemSignals.COLLAPSE_ELEM_BEFORE;
+  var interactiveElemContent = /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _runtime.ax)([interactiveContentStyles.root])
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    // This extends the clickable area of nested menu items to the width
+    // of the root level menu items, while being visually indented.
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    style: {
+      insetInlineStart: "calc(-1 * ".concat(level, " * ").concat(_constants.expandableMenuItemIndentation, ")")
+    },
+    "aria-hidden": "true",
+    className: (0, _runtime.ax)([extendButtonOrAnchorStyles.root])
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _runtime.ax)([textStyles.root, !showElemBefore && textStyles.noElemBeforeIndent])
+  }, /*#__PURE__*/_react.default.createElement(_compiled.Text, {
+    weight: "medium",
+    maxLines: 1,
+    color: getTextColor({
+      isDisabled: isDisabled,
+      isSelected: isSelected
+    }),
+    ref: labelRef
+  }, children), description && /*#__PURE__*/_react.default.createElement(_compiled.Text, {
+    color: (0, _platformFeatureFlags.fg)('platform-dst-menu-item-description-selected') ? getTextColor({
+      isDisabled: isDisabled,
+      isSelected: isSelected
+    }) : isDisabled ? 'color.text.disabled' : 'color.text.subtle',
+    size: "small",
+    maxLines: 1,
+    ref: descriptionRef
+  }, description)), hasDragIndicator ? /*#__PURE__*/_react.default.createElement(_react.Suspense, {
+    fallback: null
+  }, /*#__PURE__*/_react.default.createElement(_lazyDragHandle.LazyDragHandle, null)) : null, dropIndicator);
+
+  /**
+   *  If the [expandable] menu item is expanded, show hover actions even when *not* hovered.
+   *
+   * Note: we also remove the `elemAfter` when showing `actionsOnHover`
+   */
+  var showHoverActionsWhenNotHovered = Boolean(ariaExpanded && actionsOnHover);
+  return /*#__PURE__*/_react.default.createElement(_avatar.AvatarContext.Provider, {
+    value: defaultAvatarValues
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    ref: visualContentRef,
+    "data-testid": testId ? "".concat(testId, "-container") : undefined,
+    "data-selected": isSelected,
+    className: (0, _runtime.ax)([containerStyles.root, (0, _platformFeatureFlags.fg)('platform-dst-shape-theme-default') && containerStyles.rootT26Shape, isSelected && containerStyles.selected, isDragging && containerStyles.dragging, description && containerStyles.hasDescription, showHoverActionsWhenNotHovered && containerStyles.showHoverActions, showHoverActionsWhenNotHovered && elemAfter && containerStyles.removeElemAfter, actionsOnHover && elemAfter && containerStyles.removeElemAfterOnHoverOrOpenNestedPopup, isDisabled && containerStyles.disabled])
+  }, /*#__PURE__*/_react.default.createElement(_tooltip.default, {
+    content: function content() {
+      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", null, children), description ? /*#__PURE__*/_react.default.createElement("div", null, description) : null);
+    },
+    position: "right-start",
+    ignoreTooltipPointerEvents: true,
+    hideTooltipOnMouseDown: true
+    // We don't need a duplicate hidden element containing tooltip content
+    // as the content of the tooltip matches what is rendered for the menu item.
+    ,
+    isScreenReaderAnnouncementDisabled: true,
+    canAppear: canTooltipAppear
+  }, function (tooltipProps) {
+    // Putting the tooltip onClick into a ref.
+    // This way we don't need to create a new `onClick` function on each
+    // render (as we would need to merge `tooltipProps.onClick` and our `handleClick`)
+    tooltipOnClick.current = tooltipProps.onClick;
+    var sharedProps = _objectSpread(_objectSpread({}, tooltipProps), {}, {
+      'aria-controls': ariaControls,
+      'aria-haspopup': ariaHasPopup,
+      ref: (0, _mergeRefs.default)([forwardedRef, tooltipProps.ref]),
+      id: id,
+      testId: testId,
+      interactionName: interactionName
+    });
+    return isLink ? /*#__PURE__*/_react.default.createElement(_compiled.Anchor, (0, _extends2.default)({}, sharedProps, {
+      onClick: handleClick,
+      xcss: (0, _react2.cx)(buttonOrAnchorStyles.root, (0, _platformFeatureFlags.fg)('platform-dst-shape-theme-default') && buttonOrAnchorStyles.rootT26Shape, topLevelSiblingStyles.root, isSelected && buttonOrAnchorStyles.selected, hasDragIndicator && buttonOrAnchorStyles.hasDragIndicator)
+      // Needed to override Anchor style due to a compiled/emotion conflict
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
+      ,
+      style: {
+        textDecoration: 'none'
+      },
+      "aria-current": isSelected ? 'page' : undefined,
+      href: href,
+      target: target
+      /**
+       * For anchors we don't want to have the standard drag and drop behaviour.
+       *
+       * Thinking on the topic:
+       *
+       * - Anchors look visually similar to buttons in the sidenav
+       * - Why should some menu items be natively draggable, while others are not?
+       * - A user cannot know which menu items are "natively" draggable (ie anchors)
+       * - If you wire up an anchor to be draggable using our standard affordances
+       *   it will have a different preview experience to native anchor dragging.
+       *
+       * To promote consistency, all elements need to use the same visual affordances.
+       *
+       * Anchor elements will automatically attach URL information
+       * to the native data store.
+       *
+       * When `hasDragIndicator` is `true` we are expecting consumers to register
+       * the element as draggable through the `draggable()` Pragmatic drag and drop function.
+       * The `draggable()` function will add `draggable="true"` to the element.
+       */,
+      draggable: hasDragIndicator ? undefined : false
+    }), /*#__PURE__*/_react.default.createElement("div", {
+      "aria-hidden": "true",
+      className: (0, _runtime.ax)([notchStyles.root])
+    }), interactiveElemContent) : /*#__PURE__*/_react.default.createElement(_compiled.Pressable, (0, _extends2.default)({}, sharedProps, {
+      onClick: handleClick,
+      xcss: (0, _react2.cx)(buttonOrAnchorStyles.root, (0, _platformFeatureFlags.fg)('platform-dst-shape-theme-default') && buttonOrAnchorStyles.rootT26Shape, topLevelSiblingStyles.root, isSelected && buttonOrAnchorStyles.selected, hasDragIndicator && buttonOrAnchorStyles.hasDragIndicator),
+      "aria-expanded": ariaExpanded,
+      isDisabled: isDisabled
+    }), interactiveElemContent);
+  }), showElemBefore && /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _runtime.ax)([elemBeforeStyles.root, topLevelSiblingStyles.root, onTopOfButtonOrAnchorStyles.root])
+  }, elemBefore), actionsOnHover && /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _runtime.ax)([actionsOnHoverStyles.root])
+  }, actionsOnHover), elemAfter && /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _runtime.ax)([elemAfterStyles.root, topLevelSiblingStyles.root, onTopOfButtonOrAnchorStyles.root])
+  }, elemAfter), actions && /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _runtime.ax)([actionStyles.root, topLevelSiblingStyles.root, onTopOfButtonOrAnchorStyles.root])
+  }, actions)));
+};
+
+/**
+ * __MenuItemBase__
+ *
+ * The base menu item component used to compose ButtonMenuItem and LinkMenuItem.
+ *
+ * It contains a type argument `<T>`, to specify the type of the interactive element (`button` or `a`).
+ * This can be inferred from the type of the `onClick` prop.
+ */
+var MenuItemBase = exports.MenuItemBase = (0, _forwardRefWithGeneric.default)(MenuItemBaseNoRef);