@atlaskit/side-nav-items 1.0.0

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

@@ -0,0 +1,385 @@
+/* menu-item.tsx generated by @compiled/babel-plugin v0.38.1 */
+import _extends from "@babel/runtime/helpers/extends";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import "./menu-item.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
+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) { _defineProperty(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; }
+import React, { Suspense, useCallback, useRef } from 'react';
+import { cx } from '@compiled/react';
+import { AvatarContext } from '@atlaskit/avatar';
+import forwardRefWithGeneric from '@atlaskit/ds-lib/forward-ref-with-generic';
+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 from '@atlaskit/tooltip';
+import { expandableMenuItemIndentation } from './constants';
+import { LazyDragHandle } from './drag-handle/lazy-drag-handle';
+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';
+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).
+ */
+export var 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 = useLevel();
+  var setFlyoutMenuOpen = useSetFlyoutMenuOpen();
+  var isFlyoutMenuOpen = useFlyoutMenuOpen();
+  var isLink = typeof href !== 'undefined';
+  var labelRef = useRef(null);
+  var descriptionRef = useRef(null);
+  var tooltipOnClick = useRef(null);
+  var handleClick = 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 = 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 !== COLLAPSE_ELEM_BEFORE;
+  var 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 * ".concat(level, " * ").concat(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: isDisabled,
+      isSelected: isSelected
+    }),
+    ref: labelRef
+  }, children), description && /*#__PURE__*/React.createElement(Text, {
+    color: 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.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`
+   */
+  var showHoverActionsWhenNotHovered = Boolean(ariaExpanded && actionsOnHover);
+  return /*#__PURE__*/React.createElement(AvatarContext.Provider, {
+    value: defaultAvatarValues
+  }, /*#__PURE__*/React.createElement("div", {
+    ref: visualContentRef,
+    "data-testid": testId ? "".concat(testId, "-container") : undefined,
+    "data-selected": isSelected,
+    className: ax([containerStyles.root, 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.createElement(Tooltip, {
+    content: function content() {
+      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", null, children), description ? /*#__PURE__*/React.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: mergeRefs([forwardedRef, tooltipProps.ref]),
+      id: id,
+      testId: testId,
+      interactionName: interactionName
+    });
+    return isLink ? /*#__PURE__*/React.createElement(Anchor, _extends({}, sharedProps, {
+      onClick: handleClick,
+      xcss: cx(buttonOrAnchorStyles.root, 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.createElement("div", {
+      "aria-hidden": "true",
+      className: ax([notchStyles.root])
+    }), interactiveElemContent) : /*#__PURE__*/React.createElement(Pressable, _extends({}, sharedProps, {
+      onClick: handleClick,
+      xcss: cx(buttonOrAnchorStyles.root, 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.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 var MenuItemBase = forwardRefWithGeneric(MenuItemBaseNoRef);

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

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

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

@@ -0,0 +1,9 @@
+import { List } from './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 var MenuList = List;

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

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

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

@@ -0,0 +1,38 @@
+/* top-level-spacer.tsx generated by @compiled/babel-plugin v0.38.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';
+var 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() {
+  var level = useLevel();
+  useEffect(function () {
+    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/esm/ui/menu-item/types.js

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

package/dist/esm/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).
+   */
+  var elementWithScrollMethod = element;
+  if (typeof elementWithScrollMethod.scrollIntoViewIfNeeded === 'function') {
+    elementWithScrollMethod.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 || _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(_ref) {
+  var elementRef = _ref.elementRef,
+    isSelected = _ref.isSelected;
+  var areAllAncestorsExpanded = useAreAllAncestorsExpanded();
+  var waitingStateRef = useRef({
+    type: 'waiting-to-be-selected-and-all-ancestors-expanded'
+  });
+  useEffect(function () {
+    if (waitingStateRef.current.type === 'waiting-to-be-selected-and-all-ancestors-expanded') {
+      var shouldScroll = areAllAncestorsExpanded && isSelected;
+      if (!shouldScroll) {
+        return;
+      }
+      var 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/esm/ui/menu-section/divider.compiled.css

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

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

@@ -0,0 +1,24 @@
+/* divider.tsx generated by @compiled/babel-plugin v0.38.1 */
+import "./divider.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+var styles = null;
+
+/**
+ * __Divider__
+ *
+ * A divider for use between menu sections.
+ */
+export var Divider = function Divider() {
+  return /*#__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 _mqm2ia51 _1bsb1osq"])
+  });
+};

package/dist/esm/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 var MenuSectionContext = /*#__PURE__*/createContext(null);
+export var useMenuSectionContext = function useMenuSectionContext() {
+  var context = useContext(MenuSectionContext);
+  invariant(context, 'useMenuSectionContext must be used within a MenuSection');
+  return context;
+};

package/dist/esm/ui/menu-section/menu-section-heading.compiled.css

@@ -0,0 +1,4 @@
+._11c8i4vh{font:var(--ds-font-heading-xxsmall,normal 653 9pt/1pc "Atlassian Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
+._1rjcu2gc{padding-block:var(--ds-space-100,8px)}
+._bozg12x7{padding-inline-start:var(--ds-space-075,6px)}
+._syaz1rpy{color:var(--ds-text-subtlest,#6b6e76)}

package/dist/esm/ui/menu-section/menu-section-heading.js

@@ -0,0 +1,22 @@
+/* menu-section-heading.tsx generated by @compiled/babel-plugin v0.38.1 */
+import "./menu-section-heading.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import { useMenuSectionContext } from './menu-section-context';
+var styles = {
+  root: "_11c8i4vh _1rjcu2gc _syaz1rpy _bozg12x7"
+};
+
+/**
+ * __MenuSectionHeading__
+ *
+ * The label for the menu section group.
+ */
+export var MenuSectionHeading = function MenuSectionHeading(_ref) {
+  var children = _ref.children;
+  var id = useMenuSectionContext();
+  return /*#__PURE__*/React.createElement("p", {
+    id: "".concat(id, "-heading"),
+    className: ax([styles.root])
+  }, children);
+};

package/dist/esm/ui/menu-section/menu-section.js

@@ -0,0 +1,42 @@
+import React from 'react';
+import { useId } from '@atlaskit/ds-lib/use-id';
+import { MenuListItem } from '../menu-item/menu-list-item';
+import { MenuSectionContext } from './menu-section-context';
+/**
+ * __MenuSection__
+ *
+ * A composable component for grouping menu items, along with a heading (`MenuSectionHeading`) and a divider (`Divider`).
+ *
+ * Usage example:
+ * ```tsx
+ * <MenuSection>
+ *   <MenuSectionHeading>Section heading</MenuSectionHeading>
+ *   <MenuList>
+ *     <MenuItem>Item 1</MenuItem>
+ *     <MenuItem>Item 2</MenuItem>
+ *   </MenuList>
+ *   <Divider />
+ * </MenuSection>
+ * ```
+ */
+export var MenuSection = function MenuSection(_ref) {
+  var children = _ref.children,
+    testId = _ref.testId,
+    _ref$isMenuListItem = _ref.isMenuListItem,
+    isMenuListItem = _ref$isMenuListItem === void 0 ? false : _ref$isMenuListItem;
+  var id = useId();
+  var content = /*#__PURE__*/React.createElement(MenuSectionContext.Provider, {
+    value: id
+  }, /*#__PURE__*/React.createElement("div", {
+    role: "group",
+    "aria-labelledby": "".concat(id, "-heading")
+  }, children));
+  if (isMenuListItem) {
+    return /*#__PURE__*/React.createElement(MenuListItem, {
+      testId: testId
+    }, content);
+  }
+
+  // Legacy. isMenuListItem should become default.
+  return content;
+};

package/dist/types/entry-points/button-menu-item.d.ts

@@ -0,0 +1,3 @@
+export { ButtonMenuItem, type ButtonMenuItemProps } from '../ui/menu-item/button-menu-item';
+export { COLLAPSE_ELEM_BEFORE } from '../ui/menu-item/menu-item-signals';
+export type { MenuItemOnClick } from '../ui/menu-item/types';

package/dist/types/entry-points/container-avatar.d.ts

@@ -0,0 +1 @@
+export { ContainerAvatar, type ContainerAvatarProps } from '../ui/menu-item/container-avatar';

package/dist/types/entry-points/drag-and-drop/drag-handle.d.ts

@@ -0,0 +1 @@
+export { LazyDragHandle } from '../../ui/menu-item/drag-handle/lazy-drag-handle';

package/dist/types/entry-points/drag-and-drop/drag-preview.d.ts

@@ -0,0 +1 @@
+export { DragPreview } from '../../ui/menu-item/drag-and-drop/drag-preview';

package/dist/types/entry-points/drag-and-drop/drop-indicator.d.ts

@@ -0,0 +1 @@
+export { DropIndicator, type Instruction, type Operation, } from '../../ui/menu-item/drag-and-drop/drop-indicator';

package/dist/types/entry-points/drag-and-drop/group-drop-indicator.d.ts

@@ -0,0 +1 @@
+export { GroupDropIndicator } from '../../ui/menu-item/drag-and-drop/group-drop-indicator';

package/dist/types/entry-points/drag-and-drop/hitbox.d.ts

@@ -0,0 +1 @@
+export { attachInstruction, extractInstruction, type Availability, type Operation, type Instruction, } from '../../ui/menu-item/drag-and-drop/hitbox';

package/dist/types/entry-points/drag-and-drop/use-menu-item-drag-and-drop.d.ts

@@ -0,0 +1 @@
+export { useMenuItemDragAndDrop, type TMenuItemDragAndDropState, } from '../../ui/menu-item/drag-and-drop/use-menu-item-drag-and-drop';