@atlaskit/navigation-system 0.166.0

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

@@ -0,0 +1,95 @@
+._11c8dcr7{font:var(--ds-font-body-UNSAFE_small,normal 400 9pt/1pc ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
+._1r04ze3t{inset:var(--ds-space-0,0)}
+._2rkoglpi{border-radius:var(--ds-border-radius,4px)}
+._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}
+._14iu19ru:active:not(:disabled){background-color:var(--ds-background-selected-pressed,#85b8ff)}
+._14iu1ji5:active:not(:disabled){background-color:var(--ds-surface-pressed,#dcdfe4)}
+._152t1ssb{inset-block-start:50%}
+._152tze3t{inset-block-start:var(--ds-space-0,0)}
+._18m915vq{overflow-y:hidden}
+._18ukglyw:not(:has(button,a)){pointer-events:none}
+._1bah1h6o{justify-content:center}
+._1bsb1tcg{width:24px}
+._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)}
+._1e0c1c3z{display:var(--actions-on-hover-display)}
+._1e0c1txw{display:flex}
+._1i4q1hna{overflow-wrap:break-word}
+._1ifmglyw{-webkit-touch-callout:none}
+._1lmcu4vt{grid-template-areas:"elem-before interactive elem-after actions"}
+._1o9zidpf{flex-shrink:0}
+._1ojv1txw:has([aria-expanded=true][aria-haspopup=true]){--actions-on-hover-display:flex}
+._1q511b66{padding-block-start:var(--ds-space-050,4px)}
+._1q51v77o{padding-block-start:var(--ds-space-025,2px)}
+._1reo15vq{overflow-x:hidden}
+._1swv108i:has([aria-expanded=true][aria-haspopup=true]){background-color:var(--ds-surface-hovered,#f1f2f4)}
+._1swvi1yw:has([aria-expanded=true][aria-haspopup=true]){background-color:var(--ds-background-selected-hovered,#cce0ff)}
+._1tkezwfg{min-height:2pc}
+._1ul91c9m{min-width:1ch}
+._1ul9t9kd{min-width:72px}
+._1yyu1fvw{--notch-color:var(--ds-background-selected-bold,#0c66e4)}
+._1yyu1j28{--notch-color:transparent}
+._2lx21bp4{flex-direction:column}
+._2z05hkll{grid-template-rows:1fr}
+._2z05nbh3{grid-template-rows:subgrid}
+._4cvr1h6o{align-items:center}
+._4t3i1crf{height:9pt}
+._4t3i1tcg{height:24px}
+._4t3ickbl{height:3pc}
+._4t3izwfg{height:2pc}
+._85i51b66{padding-block-end:var(--ds-space-050,4px)}
+._85i5v77o{padding-block-end:var(--ds-space-025,2px)}
+._91ju1txw{--elem-after-display:flex}
+._91juglyw{--elem-after-display:none}
+._ae4v1h6o{align-content:center}
+._bfhk1j28{background-color:transparent}
+._bfhk1o0g{background-color:var(--notch-color)}
+._bfhkcdhy{background-color:var(--ds-background-neutral-bold,#44546f)}
+._bfhkfg4m{background-color:var(--ds-background-selected,#e9f2ff)}
+._bozg12x7{padding-inline-start:var(--ds-space-075,6px)}
+._bozg1b66{padding-inline-start:var(--ds-space-050,4px)}
+._ek6g1txw{--actions-on-hover-display:flex}
+._ek6gglyw{--actions-on-hover-display:none}
+._kqswh2mm{position:relative}
+._kqswstnw{position:absolute}
+._p12f1pna{max-width:420px}
+._slp31hna{word-wrap:break-word}
+._syaz15cr{color:var(--ds-text-inverse,#fff)}
+._syaz1gjq{color:var(--ds-text-subtle,#44546f)}
+._syaz1lh4{color:var(--ds-text-disabled,#091e424f)}
+._syazaqb7{color:var(--ds-text-selected,#0c66e4)}
+._t9ec1i34{transform:translateY(-50%)}
+._tzy41ou4{opacity:.4}
+._uiztglyw{-webkit-user-select:none;-ms-user-select:none;user-select:none}
+._vchh1ntv{box-sizing:content-box}
+._vchhusvi{box-sizing:border-box}
+._y3gnv2br{text-align:start}
+._y4ti12x7{padding-inline-end:var(--ds-space-075,6px)}
+._y4ti1b66{padding-inline-end:var(--ds-space-050,4px)}
+._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}
+._1brr1txw:focus-within, ._109x1txw:hover{--actions-on-hover-display:flex}
+._1guo18uv:focus-within{overflow-x:initial}
+._1mfcglyw:focus-within, ._1sjuglyw:hover{--elem-after-display:none}
+._11om6b4r:hover{animation-name:k1xyysw3}
+._1uy01amc:hover{animation-delay:.8s}
+._30l3aqb7:hover{color:var(--ds-text-selected,#0c66e4)}
+._7psyru3m:hover{animation-duration:0s}
+._bir2q7pw:hover{animation-fill-mode:forwards}
+._irr3108i:hover{background-color:var(--ds-surface-hovered,#f1f2f4)}
+._irr3i1yw:hover{background-color:var(--ds-background-selected-hovered,#cce0ff)}
+._irr3n7od:hover{background-color:unset}
+._x0kw1txw:hover{--drag-handle-display:flex}
+@keyframes k1xyysw3{to{cursor:grab}}

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

@@ -0,0 +1,406 @@
+/* menu-item.tsx generated by @compiled/babel-plugin v0.36.1 */
+import _extends from "@babel/runtime/helpers/extends";
+import "./menu-item.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
+import React, { forwardRef, lazy, Suspense, useCallback, useRef } from 'react';
+import { cx } from '@compiled/react';
+import { AvatarContext } from '@atlaskit/avatar';
+import mergeRefs from '@atlaskit/ds-lib/merge-refs';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { Anchor, Pressable, Text } from '@atlaskit/primitives/compiled';
+import Tooltip, { TooltipPrimitive } from '@atlaskit/tooltip';
+import { forwardRefWithGeneric } from '../../components/forward-ref-with-generic';
+import { expandableMenuItemIndentation } from './constants';
+import { useLevel } from './expandable-menu-item/expandable-menu-item-context';
+import { useFlyoutMenuOpen, useSetFlyoutMenuOpen } from './flyout-menu-item/flyout-menu-item-context';
+import { COLLAPSE_ELEM_BEFORE } from './menu-item-signals';
+// Using `lazy` so that only consumers who want drag and drop
+// need to include code for the drag handle.
+const LazyDragHandle = /*#__PURE__*/lazy(() => import( /* webpackChunkName: "@atlaskit-internal_nav4-menu-item-drag-handle" */
+'./drag-handle'));
+const tooltipStyles = {
+  root: "_2rkoglpi _11c8dcr7 _1e0c1txw _2lx21bp4 _1bah1h6o _1tkezwfg _p12f1pna _vchhusvi _1q51v77o _y4ti12x7 _85i5v77o _bozg12x7 _bfhkcdhy _syaz15cr _152tze3t _1e02ze3t _1i4q1hna _slp31hna"
+};
+const MenuItemTooltip = /*#__PURE__*/forwardRef(function MenuItemTooltip({
+  children,
+  className,
+  ...rest
+}, ref) {
+  return /*#__PURE__*/React.createElement(TooltipPrimitive, _extends({}, rest, {
+    // Manually passing on `className` so it gets merged correctly in the build output.
+    // The passed classname is mostly used for integration testing (`.Tooltip`)
+    // eslint-disable-next-line @atlaskit/design-system/no-unsafe-style-overrides, @atlaskit/ui-styling-standard/no-classname-prop
+    className: ax([tooltipStyles.root, className])
+    // "css" does not "exist" - it gets transformed into "className" by compiled
+    ,
+
+    ref: ref
+  }), children);
+});
+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;
+}
+const defaultAvatarValues = {
+  size: 'small'
+};
+const elemAfterDisplayVar = '--elem-after-display';
+const actionsOnHoverDisplayVar = '--actions-on-hover-display';
+const notchColorVar = '--notch-color';
+
+// Note: this is also used in `drag-handle.tsx`
+const dragHandleDisplayVar = '--drag-handle-display';
+const 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.
+ */
+const 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.
+ */
+const 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).
+ */
+export const nestedOpenPopupCSSSelector = '&:has([aria-expanded="true"][aria-haspopup="true"])';
+const containerStyles = {
+  root: "_2rkoglpi _vchhusvi _1e0c11p5 _yv0e7dup _2z05hkll _1lmcu4vt _1ul9t9kd _4t3izwfg _4cvr1h6o _uiztglyw _syaz1gjq _ek6gglyw _1yyu1j28 _91ju1txw _1swv108i _1ojv1txw _irr3108i _1brr1txw _109x1txw",
+  removeElemAfter: "_91juglyw",
+  showHoverActions: "_ek6g1txw",
+  removeElemAfterOnHover: "_1mfcglyw _1sjuglyw",
+  removeElemAfterOnHoverOrOpenNestedPopup: "_1djyglyw _1mfcglyw _1sjuglyw",
+  selected: "_bfhkfg4m _syazaqb7 _1yyu1fvw _1swvi1yw _30l3aqb7 _irr3i1yw",
+  disabled: "_syaz1lh4 _irr3n7od",
+  hasDescription: "_4t3ickbl",
+  dragging: "_tzy41ou4"
+};
+const buttonOrAnchorStyles = {
+  root: "_2rkoglpi _yyhyjvu9 _1ii7kb7n _1e0c11p5 _yv0enbh3 _2z05nbh3 _y4ti1b66 _bozg1b66 _1q511b66 _85i51b66 _bfhk1j28 _syaz1gjq _4cvr1h6o _y3gnv2br _14iu1ji5",
+  selected: "_syazaqb7 _14iu19ru",
+  hasDragIndicator: "_1ifmglyw _1cykglyw _x0kw1txw _7psyru3m _11om6b4r _1uy01amc _bir2q7pw"
+};
+const extendButtonOrAnchorStyles = {
+  root: "_1r04ze3t _kqswstnw"
+};
+const notchStyles = {
+  root: "_kqswstnw _152t1ssb _1e02ze3t _1bsbyh40 _4t3i1crf _t9ec1i34 _bfhk1o0g"
+};
+const actionStyles = {
+  root: "_zulp1b66 _nd5lbc26 _1reo15vq _18m915vq _1e0c1txw _4cvr1h6o _y4ti1b66 _1guo18uv _12s918uv"
+};
+const actionsOnHoverStyles = {
+  root: "_nd5l16dh _zulp1b66 _1reo15vq _18m915vq _1e0c1c3z _4cvr1h6o _y4ti1b66 _1guo18uv _12s918uv"
+};
+const textStyles = {
+  root: "_zulpv77o _1reo15vq _18m915vq _y4ti1b66 _bozg1b66 _1e0c1txw _2lx21bp4 _1ul91c9m _1guo18uv _12s918uv",
+  noElemBeforeIndent: "_bozg12x7"
+};
+const elemBeforeStyles = {
+  root: "_nd5l17zh _1reo15vq _18m915vq _1e0c1txw _1o9zidpf _1bsb1tcg _4t3i1tcg _4cvr1h6o _1bah1h6o _bozg1b66 _vchh1ntv _1guo18uv _12s918uv"
+};
+const 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
+ */
+const interactiveContentStyles = {
+  root: "_nd5l19l3 _1e0c1txw _2lx21bp4 _ae4v1h6o"
+};
+function getTextColor({
+  isDisabled,
+  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.
+ */
+const MenuItemBaseNoRef = ({
+  testId,
+  actions,
+  actionsOnHover,
+  children,
+  description,
+  elemAfter,
+  elemBefore,
+  href,
+  target,
+  isDisabled,
+  isSelected,
+  onClick,
+  ariaControls,
+  ariaExpanded,
+  ariaHasPopup,
+  interactionName,
+  isContentTooltipDisabled,
+  visualContentRef,
+  isDragging,
+  hasDragIndicator,
+  dropIndicator
+}, forwardedRef) => {
+  const level = useLevel();
+  const setFlyoutMenuOpen = useSetFlyoutMenuOpen();
+  const isFlyoutMenuOpen = useFlyoutMenuOpen();
+  const isLink = typeof href !== 'undefined';
+  const labelRef = useRef(null);
+  const descriptionRef = useRef(null);
+  const tooltipOnClick = useRef(null);
+  const handleClick = useCallback((event, analyticsEvent) => {
+    var _tooltipOnClick$curre;
+    onClick === null || onClick === void 0 ? 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 ? void 0 : _tooltipOnClick$curre.call(tooltipOnClick, event);
+  }, [onClick, setFlyoutMenuOpen, isFlyoutMenuOpen]);
+
+  /**
+   * Show the tooltip if _either_ label or description is truncated
+   */
+  const canTooltipAppear = useCallback(() => {
+    if (isContentTooltipDisabled) {
+      return false;
+    }
+
+    // Show tooltip if _either_ label or description are clamped
+
+    const label = labelRef.current;
+    const 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).
+  const showElemBefore = elemBefore !== COLLAPSE_ELEM_BEFORE;
+  const interactiveElemContent = /*#__PURE__*/React.createElement("div", {
+    className: ax([interactiveContentStyles.root])
+  }, /*#__PURE__*/React.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 * ${level} * ${expandableMenuItemIndentation})`
+    },
+    "aria-hidden": "true",
+    className: ax([extendButtonOrAnchorStyles.root])
+  }), /*#__PURE__*/React.createElement("div", {
+    className: ax([textStyles.root, !showElemBefore && textStyles.noElemBeforeIndent])
+  }, /*#__PURE__*/React.createElement(Text, {
+    weight: "medium",
+    maxLines: 1,
+    color: getTextColor({
+      isDisabled,
+      isSelected
+    }),
+    ref: labelRef
+  }, children), description && /*#__PURE__*/React.createElement(Text, {
+    color: isDisabled ? 'color.text.disabled' : 'color.text.subtle',
+    size: "small",
+    maxLines: 1,
+    ref: descriptionRef
+  }, description)), hasDragIndicator ? /*#__PURE__*/React.createElement(Suspense, {
+    fallback: null
+  }, /*#__PURE__*/React.createElement(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`
+   */
+  const showHoverActionsWhenNotHovered = Boolean(ariaExpanded && actionsOnHover);
+  return /*#__PURE__*/React.createElement(AvatarContext.Provider, {
+    value: defaultAvatarValues
+  }, /*#__PURE__*/React.createElement("div", {
+    ref: visualContentRef,
+    "data-testid": testId ? `${testId}-container` : undefined,
+    "data-selected": isSelected,
+    className: ax([containerStyles.root, 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.createElement(Tooltip, {
+    content: () => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", null, children), description ? /*#__PURE__*/React.createElement("div", null, description) : null),
+    position: "right"
+    // NOTE: Types in React 18 have changed and `forwardRef(() => <TooltipPrimitive>)` no longer appears to match 100%
+    ,
+    component: MenuItemTooltip,
+    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
+  }, 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;
+    const sharedProps = {
+      ...tooltipProps,
+      'aria-controls': ariaControls,
+      'aria-haspopup': ariaHasPopup,
+      ref: mergeRefs([forwardedRef, tooltipProps.ref]),
+      testId,
+      interactionName
+    };
+    return isLink ? /*#__PURE__*/React.createElement(Anchor, _extends({}, sharedProps, {
+      onClick: handleClick,
+      xcss: cx(buttonOrAnchorStyles.root, 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: (() => {
+        if (fg('platform_design_system_nav4_menu_item_anchor_dnd')) {
+          return hasDragIndicator === true ? undefined : false;
+        }
+        // legacy behaviour
+        return undefined;
+      })()
+    }), /*#__PURE__*/React.createElement("div", {
+      "aria-hidden": "true",
+      className: ax([notchStyles.root])
+    }), interactiveElemContent) : /*#__PURE__*/React.createElement(Pressable, _extends({}, sharedProps, {
+      onClick: handleClick,
+      xcss: cx(buttonOrAnchorStyles.root, topLevelSiblingStyles.root, isSelected && buttonOrAnchorStyles.selected, hasDragIndicator && buttonOrAnchorStyles.hasDragIndicator),
+      "aria-expanded": ariaExpanded,
+      isDisabled: isDisabled
+    }), interactiveElemContent);
+  }), showElemBefore && /*#__PURE__*/React.createElement("div", {
+    className: ax([elemBeforeStyles.root, topLevelSiblingStyles.root, onTopOfButtonOrAnchorStyles.root])
+  }, elemBefore), actionsOnHover && /*#__PURE__*/React.createElement("div", {
+    className: ax([actionsOnHoverStyles.root])
+  }, actionsOnHover), elemAfter && /*#__PURE__*/React.createElement("div", {
+    className: ax([elemAfterStyles.root, topLevelSiblingStyles.root, onTopOfButtonOrAnchorStyles.root])
+  }, elemAfter), actions && /*#__PURE__*/React.createElement("div", {
+    className: 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.
+ */
+export const MenuItemBase = forwardRefWithGeneric(MenuItemBaseNoRef);

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

@@ -0,0 +1,12 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import { ListItem } from '../../components/list-item';
+
+/**
+ * __Menu list item__
+ *
+ * A [list item](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/li) with visual styles removed.
+ */
+export const MenuListItem = ListItem;

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

@@ -0,0 +1,9 @@
+import { List } from '../../components/list';
+
+/**
+ * __Menu list__
+ *
+ * An [unordered list](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul) with visual styles removed,
+ * for semantically grouping list items.
+ */
+export const MenuList = List;

package/dist/es2019/ui/menu-item/top-level-spacer.compiled.css

@@ -0,0 +1 @@
+._4t3iutpp{height:var(--ds-space-150,9pt)}

package/dist/es2019/ui/menu-item/top-level-spacer.js

@@ -0,0 +1,38 @@
+/* top-level-spacer.tsx generated by @compiled/babel-plugin v0.36.1 */
+import "./top-level-spacer.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import { useEffect } from 'react';
+import { useLevel } from './expandable-menu-item/expandable-menu-item-context';
+const styles = {
+  root: "_4t3iutpp"
+};
+
+/**
+ * Use this component to create visual separation between the:
+ *
+ * - global app shortcut section
+ * - 'more' button menu item
+ * - starred spaces (in Confluence)
+ *
+ * Only use this component in the top level of the menu,
+ * and exercise caution when using it in new situations.
+ *
+ * This component exists to fulfil product design requirements but has not yet
+ * been consolidated into the wider navigation system.
+ *
+ * It may not exist in the future when global apps are no longer in the side navigation.
+ */
+export function TopLevelSpacer() {
+  const level = useLevel();
+  useEffect(() => {
+    if (process.env.NODE_ENV !== 'production') {
+      if (level !== 0) {
+        throw new Error('TopLevelSpacer should only be used in the top level of the menu. Please speak with DST if you have a novel use case.');
+      }
+    }
+  }, [level]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: ax([styles.root])
+  });
+}

package/dist/es2019/ui/menu-item/types.js

@@ -0,0 +1 @@
+export {};

package/dist/es2019/ui/menu-item/use-scroll-menu-item-into-view.js

@@ -0,0 +1,63 @@
+import { useEffect, useRef } from 'react';
+import invariant from 'tiny-invariant';
+import { useAreAllAncestorsExpanded } from './expandable-menu-item/expandable-menu-item-context';
+function scrollMenuItemIntoView(element) {
+  var _element$scrollIntoVi;
+  /**
+   * If [scrollIntoViewIfNeeded](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoViewIfNeeded) is available,
+   * we are using it to scroll the element into view _in the center_ of the scroll container. Because it is a non-standard method
+   * and not available on all browsers (currently not supported in Firefox), we are using it for progressive enhancement.
+   *
+   * Otherwise, we are falling back to [scrollIntoView](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView).
+   */
+  if (typeof element.scrollIntoViewIfNeeded === 'function') {
+    element.scrollIntoViewIfNeeded(true);
+    return;
+  }
+
+  // JSDOM does not support scrollIntoView, so defensively using it (see https://github.com/jsdom/jsdom/issues/1695)
+  (_element$scrollIntoVi = element.scrollIntoView) === null || _element$scrollIntoVi === void 0 ? void 0 : _element$scrollIntoVi.call(element, {
+    // We are using `nearest` to prevent scrolling on user interaction when the menu item is already in view.
+    block: 'nearest'
+  });
+}
+
+/**
+ * Scrolls the element into view once it is selected, and once all its ancestors (expandable
+ * parent menu items) are expanded.
+ *
+ * Once that has happened, we don't want to scroll it into view again until it has been unselected.
+ * This is to prevent the menu item from being scrolled into view again if the user collapses a
+ * parent and then expands it again, without changing what menu item is selected.
+ */
+export function useScrollMenuItemIntoView({
+  elementRef,
+  isSelected
+}) {
+  const areAllAncestorsExpanded = useAreAllAncestorsExpanded();
+  const waitingStateRef = useRef({
+    type: 'waiting-to-be-selected-and-all-ancestors-expanded'
+  });
+  useEffect(() => {
+    if (waitingStateRef.current.type === 'waiting-to-be-selected-and-all-ancestors-expanded') {
+      const shouldScroll = areAllAncestorsExpanded && isSelected;
+      if (!shouldScroll) {
+        return;
+      }
+      const element = elementRef.current;
+      invariant(element, 'Element ref must be set');
+      scrollMenuItemIntoView(element);
+
+      // Now that we are scrolled the menu item into view, we need to wait for the menu item to
+      // be unselected before checking again.
+      waitingStateRef.current.type = 'waiting-to-be-unselected';
+      return;
+    }
+    if (waitingStateRef.current.type === 'waiting-to-be-unselected') {
+      if (!isSelected) {
+        waitingStateRef.current.type = 'waiting-to-be-selected-and-all-ancestors-expanded';
+      }
+      return;
+    }
+  }, [areAllAncestorsExpanded, elementRef, isSelected]);
+}

package/dist/es2019/ui/menu-section/divider.compiled.css

@@ -0,0 +1,4 @@
+
+._h7alglyw{border-inline:none}._179rglyw{border-block-end:none}
+._mqm2zgxb{border-block-start:1px solid var(--ds-border,#091e4224)}
+._1bsb1osq{width:100%}

package/dist/es2019/ui/menu-section/divider.js

@@ -0,0 +1,22 @@
+/* divider.tsx generated by @compiled/babel-plugin v0.36.1 */
+import "./divider.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+const styles = null;
+
+/**
+ * __Divider__
+ *
+ * A divider for use between menu sections.
+ */
+export const Divider = () => /*#__PURE__*/React.createElement("hr", {
+  /**
+   * The existing usage of these dividers is presentational,
+   * so we are removing the separator semantics by default.
+   *
+   * In the future we may consider allowing opt-in separator semantics,
+   * but it probably isn't necessary.
+   */
+  role: "none",
+  className: ax(["_h7alglyw _179rglyw _mqm2zgxb _1bsb1osq"])
+});

package/dist/es2019/ui/menu-section/menu-section-context.js

@@ -0,0 +1,13 @@
+import { createContext, useContext } from 'react';
+import invariant from 'tiny-invariant';
+
+/**
+ * Context for the current menu section. It holds a unique ID for the section, used for associating the section heading
+ * as an accessible label for the group.
+ */
+export const MenuSectionContext = /*#__PURE__*/createContext(null);
+export const useMenuSectionContext = () => {
+  const context = useContext(MenuSectionContext);
+  invariant(context, 'useMenuSectionContext must be used within a MenuSection');
+  return context;
+};