@atlaskit/navigation-system 0.166.0

package/dist/esm/ui/menu-item/drag-and-drop/drag-preview.js

@@ -0,0 +1,56 @@
+/* drag-preview.tsx generated by @compiled/babel-plugin v0.36.1 */
+import "./drag-preview.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import { ExpandableMenuItemLevelContext } from '../expandable-menu-item/expandable-menu-item-level-context';
+import { MenuItemBase } from '../menu-item';
+import { COLLAPSE_ELEM_BEFORE } from '../menu-item-signals';
+
+// Using JavaScript for detecting Safari, as I could not find a reliable way to do it with CSS.
+function isSafari() {
+  if (process.env.NODE_ENV === 'test') {
+    return false;
+  }
+  if (typeof window === 'undefined') {
+    return false;
+  }
+  var _navigator = navigator,
+    userAgent = _navigator.userAgent;
+  return userAgent.includes('AppleWebKit') && !userAgent.includes('Chrome');
+}
+var dragPreviewStyles = {
+  root: "_2rkoglpi _189ee4h9 _1h6dmuej _1dqonqa1 _bfhkvuon _y4ti1b66 _p12fgx0z",
+  safariFix: "_1ul9uuw1"
+};
+
+/**
+ * A drag preview for sidebar menu items.
+ *
+ * The limited API corresponds with the limited amount of information we
+ * want to show in drag previews.
+ *
+ * If no `elemBefore` is provided, then the `elemBefore` will automatically collapse.
+ * There is no need to pass in `COLLAPSE_ELEM_BEFORE`. We do this as there is no
+ * need to maintain vertical side navigation vertical alignment in the drag preview.
+ *
+ * Please ensure the drag preview is pushed away from the users pointer
+ * (with `pointerOutsideOfPreview()` from Pragmatic drag and drop) by our
+ * standard amount (`{x: token('space.200'), y: token('space.100')`)
+ */
+export function DragPreview(_ref) {
+  var elemBefore = _ref.elemBefore,
+    children = _ref.children;
+  return (
+    /*#__PURE__*/
+    // Resetting the expandable menu items to 0.
+    // This is to prevent our hidden element from pushing
+    // the drag preview further away from the users pointer
+    React.createElement(ExpandableMenuItemLevelContext.Provider, {
+      value: 0
+    }, /*#__PURE__*/React.createElement("div", {
+      className: ax([dragPreviewStyles.root, isSafari() && dragPreviewStyles.safariFix])
+    }, /*#__PURE__*/React.createElement(MenuItemBase, {
+      elemBefore: elemBefore !== null && elemBefore !== void 0 ? elemBefore : COLLAPSE_ELEM_BEFORE
+    }, children)))
+  );
+}

package/dist/esm/ui/menu-item/drag-and-drop/drop-indicator.js

@@ -0,0 +1,7 @@
+/**
+ * These outputs where originally created within nav4, but have since moved out into
+ * pragmatic drag and drop itself for broader usage. Now this file simply re-exports
+ * the pdnd outputs
+ */
+
+export { DropIndicator } from '@atlaskit/pragmatic-drag-and-drop-react-drop-indicator/list-item';

package/dist/esm/ui/menu-item/drag-and-drop/group-drop-indicator.js

@@ -0,0 +1,7 @@
+/**
+ * These outputs where originally created within nav4, but have since moved out into
+ * pragmatic drag and drop itself for broader usage. Now this file simply re-exports
+ * the pdnd outputs
+ */
+
+export { GroupDropIndicator } from '@atlaskit/pragmatic-drag-and-drop-react-drop-indicator/group';

package/dist/esm/ui/menu-item/drag-and-drop/hitbox.js

@@ -0,0 +1,7 @@
+/**
+ * These outputs where originally created within nav4, but have since moved out into
+ * pragmatic drag and drop itself for broader usage. Now this file simply re-exports
+ * the pdnd outputs
+ */
+
+export { attachInstruction, extractInstruction } from '@atlaskit/pragmatic-drag-and-drop-hitbox/list-item';

package/dist/esm/ui/menu-item/drag-and-drop/use-menu-item-drag-and-drop.js

@@ -0,0 +1,193 @@
+/* use-menu-item-drag-and-drop.tsx generated by @compiled/babel-plugin v0.36.1 */
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import * as React from 'react';
+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 { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+import invariant from 'tiny-invariant';
+import { draggable, dropTargetForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
+import { pointerOutsideOfPreview } from '@atlaskit/pragmatic-drag-and-drop/element/pointer-outside-of-preview';
+import { setCustomNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/element/set-custom-native-drag-preview';
+import { DragPreview } from './drag-preview';
+import { DropIndicator } from './drop-indicator';
+import { attachInstruction, extractInstruction } from './hitbox';
+var idle = {
+  type: 'idle'
+};
+/**
+ * A convenience helper for setting up drag and drop for menu items
+ *
+ * - Don't include the `draggable` property if you don't want the menu item to be a draggable
+ * - Don't include the `dropTarget` property if you don't want the menu item to be a drop target
+ */
+export function useMenuItemDragAndDrop(_ref) {
+  var draggableArgs = _ref.draggable,
+    dropTargetArgs = _ref.dropTarget;
+  var draggableAnchorRef = useRef(null);
+  var draggableButtonRef = useRef(null);
+  var dropTargetRef = useRef(null);
+  var _useState = useState(idle),
+    _useState2 = _slicedToArray(_useState, 2),
+    internalState = _useState2[0],
+    setInternalState = _useState2[1];
+  var getDraggableElement = useCallback(function () {
+    var _ref2, _draggableAnchorRef$c;
+    return (_ref2 = (_draggableAnchorRef$c = draggableAnchorRef.current) !== null && _draggableAnchorRef$c !== void 0 ? _draggableAnchorRef$c : draggableButtonRef.current) !== null && _ref2 !== void 0 ? _ref2 : null;
+  }, []);
+
+  // Set up draggable
+  useEffect(function () {
+    // Don't set up a draggable if there are no draggable args
+    if (!draggableArgs) {
+      return;
+    }
+    var element = getDraggableElement();
+    invariant(element, "draggableAnchorRef or draggableButtonRef not set");
+    return draggable({
+      element: element,
+      getInitialData: draggableArgs.getInitialData,
+      canDrag: draggableArgs.canDrag,
+      onGenerateDragPreview: function onGenerateDragPreview(_ref3) {
+        var nativeSetDragImage = _ref3.nativeSetDragImage,
+          source = _ref3.source,
+          location = _ref3.location;
+        setCustomNativeDragPreview({
+          nativeSetDragImage: nativeSetDragImage,
+          getOffset: pointerOutsideOfPreview({
+            x: "var(--ds-space-200, 16px)",
+            y: "var(--ds-space-100, 8px)"
+          }),
+          render: function render(_ref4) {
+            var container = _ref4.container;
+            var args = {
+              dragHandle: source.dragHandle,
+              element: source.element,
+              input: location.current.input
+            };
+            setInternalState({
+              type: 'preview',
+              container: container,
+              ui: draggableArgs.getDragPreviewPieces(args)
+            });
+          }
+        });
+      },
+      onDragStart: function onDragStart() {
+        setInternalState({
+          type: 'dragging'
+        });
+      },
+      onDrop: function onDrop() {
+        setInternalState(idle);
+      }
+    });
+  }, [draggableArgs, getDraggableElement]);
+
+  // Set up drop target
+  useEffect(function () {
+    if (!dropTargetArgs) {
+      return;
+    }
+
+    // Don't need to provide a draggable element to have a drop target.
+    // Using this element in our `canDrop` check
+    var draggableElement = getDraggableElement();
+    var dropTarget = dropTargetRef.current;
+    invariant(dropTarget, "dropTargetRef was not set");
+    return dropTargetForElements({
+      element: dropTarget,
+      // cannot drop on self
+      canDrop: function canDrop(args) {
+        // cannot drop on self
+        if (args.source.element === draggableElement) {
+          return false;
+        }
+        if (dropTargetArgs.canDrop) {
+          return dropTargetArgs.canDrop(args);
+        }
+        return true;
+      },
+      // menu items are always sticky, and the GroupDropIndicator should clear stickiness
+      getIsSticky: function getIsSticky() {
+        return true;
+      },
+      getData: function getData(args) {
+        var _dropTargetArgs$getDa, _dropTargetArgs$getDa2;
+        var data = (_dropTargetArgs$getDa = (_dropTargetArgs$getDa2 = dropTargetArgs.getData) === null || _dropTargetArgs$getDa2 === void 0 ? void 0 : _dropTargetArgs$getDa2.call(dropTargetArgs, args)) !== null && _dropTargetArgs$getDa !== void 0 ? _dropTargetArgs$getDa : {};
+        var operations = dropTargetArgs.getOperations(args);
+        return attachInstruction(data, {
+          input: args.input,
+          element: args.element,
+          operations: operations
+        });
+      },
+      onDragStart: function onDragStart(_ref5) {
+        var self = _ref5.self;
+        var instruction = extractInstruction(self.data);
+        setInternalState({
+          type: 'is-over',
+          instruction: instruction
+        });
+      },
+      onDrag: function onDrag(_ref6) {
+        var self = _ref6.self;
+        var instruction = extractInstruction(self.data);
+        setInternalState(function (current) {
+          var _current$instruction, _current$instruction2;
+          if (current.type === 'is-over' && (instruction === null || instruction === void 0 ? void 0 : instruction.operation) === ((_current$instruction = current.instruction) === null || _current$instruction === void 0 ? void 0 : _current$instruction.operation) && (instruction === null || instruction === void 0 ? void 0 : instruction.blocked) === ((_current$instruction2 = current.instruction) === null || _current$instruction2 === void 0 ? void 0 : _current$instruction2.blocked)) {
+            return current;
+          }
+          return {
+            type: 'is-over',
+            instruction: instruction
+          };
+        });
+      },
+      onDragLeave: function onDragLeave() {
+        setInternalState(idle);
+      },
+      onDrop: function onDrop() {
+        setInternalState(idle);
+      },
+      onDragEnter: function onDragEnter(_ref7) {
+        var self = _ref7.self;
+        var instruction = extractInstruction(self.data);
+        setInternalState({
+          type: 'is-over',
+          instruction: instruction
+        });
+      }
+    });
+  }, [dropTargetArgs, getDraggableElement]);
+  var dragPreview = function () {
+    if (internalState.type !== 'preview') {
+      return null;
+    }
+    return /*#__PURE__*/createPortal( /*#__PURE__*/React.createElement(DragPreview, {
+      elemBefore: internalState.ui.elemBefore
+    }, internalState.ui.content), internalState.container);
+  }();
+  var dropIndicator = internalState.type === 'is-over' && internalState.instruction && /*#__PURE__*/React.createElement(DropIndicator, {
+    instruction: internalState.instruction
+  });
+  var state = useMemo(function () {
+    if (internalState.type === 'preview') {
+      return {
+        type: 'preview'
+      };
+    }
+    // returning a new object to avoid modification of our `internalState` object
+    return _objectSpread({}, internalState);
+  }, [internalState]);
+  return {
+    state: state,
+    draggableButtonRef: draggableButtonRef,
+    dropTargetRef: dropTargetRef,
+    draggableAnchorRef: draggableAnchorRef,
+    dragPreview: dragPreview,
+    dropIndicator: dropIndicator
+  };
+}

package/dist/esm/ui/menu-item/drag-handle.compiled.css

@@ -0,0 +1,9 @@
+._154iidpf{top:0}
+._1bah1h6o{justify-content:center}
+._1e02idpf{inset-inline-start:0}
+._1e0c1i3c{display:var(--drag-handle-display,none)}
+._2lx21bp4{flex-direction:column}
+._94n5idpf{bottom:0}
+._ahbqxmi2{margin-inline-start:var(--ds-space-negative-150,-9pt)}
+._kqswstnw{position:absolute}
+._syaz1gjq{color:var(--ds-text-subtle,#44546f)}

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

@@ -0,0 +1,19 @@
+/* drag-handle.tsx generated by @compiled/babel-plugin v0.36.1 */
+import "./drag-handle.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import DragHandleVerticalIcon from '@atlaskit/icon/core/drag-handle-vertical';
+var styles = {
+  root: "_syaz1gjq _1e0c1i3c _2lx21bp4 _1bah1h6o _kqswstnw _154iidpf _94n5idpf _1e02idpf _ahbqxmi2"
+};
+
+// Using default export to play well with React.lazy
+export default function DragHandle() {
+  return /*#__PURE__*/React.createElement("div", {
+    "aria-hidden": "true",
+    className: ax([styles.root])
+  }, /*#__PURE__*/React.createElement(DragHandleVerticalIcon, {
+    label: "",
+    size: "small"
+  }));
+}

package/dist/esm/ui/menu-item/expandable-menu-item/expandable-menu-item-content.compiled.css

@@ -0,0 +1,2 @@
+._1e0cglyw{display:none}
+._bozg1crf{padding-inline-start:9pt}

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

@@ -0,0 +1,42 @@
+/* expandable-menu-item-content.tsx generated by @compiled/babel-plugin v0.36.1 */
+import "./expandable-menu-item-content.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import { forwardRef, useRef } from 'react';
+import { cx } from '@compiled/react';
+import { List } from '../../../components/list';
+import { expandableMenuItemIndentation } from '../constants';
+import { AreAllAncestorsExpandedContext, LevelContext, useAreAllAncestorsExpanded, useIsExpanded, useLevel } from './expandable-menu-item-context';
+var styles = {
+  content: "_bozg1crf",
+  collapsedContent: "_1e0cglyw"
+};
+/**
+ * __ExpandableMenuItemContent__
+ *
+ * The expandable and collapsable section of the expandable menu item. It should contain the nested menu items.
+ */
+export var ExpandableMenuItemContent = /*#__PURE__*/forwardRef(function (_ref, forwardedRef) {
+  var children = _ref.children;
+  var isExpanded = useIsExpanded();
+  var level = useLevel();
+  var hasExpanded = useRef(false);
+  var areAllAncestorsExpanded = useAreAllAncestorsExpanded();
+  if (!isExpanded && !hasExpanded.current) {
+    return null;
+  }
+  hasExpanded.current = true;
+  return /*#__PURE__*/React.createElement(LevelContext.Provider, {
+    value: level + 1
+  }, /*#__PURE__*/React.createElement(AreAllAncestorsExpandedContext.Provider, {
+    value:
+    /**
+     * By combining the current ancestor and with the current menu item's state, all nested menu items will know if their
+     * ancestor menu items are all expanded.
+     */
+    areAllAncestorsExpanded && isExpanded
+  }, /*#__PURE__*/React.createElement(List, {
+    ref: forwardedRef,
+    xcss: cx(styles.content, !isExpanded && styles.collapsedContent)
+  }, children)));
+});

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

@@ -0,0 +1,57 @@
+import { createContext, useContext } from 'react';
+import invariant from 'tiny-invariant';
+import { ExpandableMenuItemLevelContext } from './expandable-menu-item-level-context';
+/**
+ * Whether all ancestor menu items of the current menu item are expanded. Used to know if the current menu item is
+ * shown within the menu item tree.
+ */
+export var AreAllAncestorsExpandedContext = /*#__PURE__*/createContext(null);
+
+/**
+ * A context for storing the isExpanded value of the ExpandableMenuItem.
+ */
+export var IsExpandedContext = /*#__PURE__*/createContext(null);
+
+/**
+ * A context for storing a function that sets isExpanded value of the ExpandableMenuItem.
+ */
+export var SetIsExpandedContext = /*#__PURE__*/createContext(null);
+
+/**
+ * A context for storing a function that triggers when isExpanded value of the ExpandableMenuItem is changed.
+ */
+export var OnExpansionToggleContext = /*#__PURE__*/createContext(null);
+
+/**
+ * A context for storing the level value of the ExpandableMenuItem.
+ */
+export var LevelContext = ExpandableMenuItemLevelContext;
+export var useIsExpanded = function useIsExpanded() {
+  var context = useContext(IsExpandedContext);
+  invariant(context !== null, 'useIsExpanded must be used within an ExpandableMenuItem');
+  return context;
+};
+export var useSetIsExpanded = function useSetIsExpanded() {
+  var context = useContext(SetIsExpandedContext);
+  invariant(context !== null, 'useSetIsExpanded must be used within an ExpandableMenuItem');
+  return context;
+};
+export var useOnExpansionToggle = function useOnExpansionToggle() {
+  return useContext(OnExpansionToggleContext);
+};
+export var useLevel = function useLevel() {
+  return useContext(LevelContext);
+};
+
+/**
+ * Whether all ancestor menu items of the current menu item are expanded. Used to know if the current menu item is
+ * shown within the menu item tree.
+ *
+ * It works by combining (using &&) all the expansion states of the current menu item's ancestors.
+ *
+ * Using `true` as the fallback for cases when the menu item does not have ancestors.
+ */
+export var useAreAllAncestorsExpanded = function useAreAllAncestorsExpanded() {
+  var _useContext;
+  return (_useContext = useContext(AreAllAncestorsExpandedContext)) !== null && _useContext !== void 0 ? _useContext : true;
+};

package/dist/esm/ui/menu-item/expandable-menu-item/expandable-menu-item-level-context.js

@@ -0,0 +1,9 @@
+import { createContext } from 'react';
+
+// Note: this context value is in a seperate file as it is consumed
+// by our drag and drop drag preview
+
+/**
+ * A context for storing the level value of the ExpandableMenuItem.
+ */
+export var ExpandableMenuItemLevelContext = /*#__PURE__*/createContext(0);

package/dist/esm/ui/menu-item/expandable-menu-item/expandable-menu-item-trigger.compiled.css

@@ -0,0 +1,11 @@
+._12xsglyw:has(:focus-visible), ._p8btglyw:hover{--expandable-provided-elembefore-display:none}
+._165n1bgi{--expandable-provided-elembefore-display:contents}
+._165nglyw{--expandable-provided-elembefore-display:none}
+._1e0c1xb2{display:var(--expandable-provided-elembefore-display)}
+._1e0ciw0t{display:var(--expandable-chevron-display)}
+._1hl9glyw:has([aria-expanded=true][aria-haspopup=true]){--expandable-provided-elembefore-display:none}
+._1mmi1txw{--expandable-chevron-display:flex}
+._1mmiglyw{--expandable-chevron-display:none}
+._b31z1txw:has(:focus-visible), ._1vnl1txw:hover{--expandable-chevron-display:flex}
+._v9u71txw:has([aria-expanded=true][aria-haspopup=true]){--expandable-chevron-display:flex}
+[dir=rtl] ._1tz3r0mg{transform:scaleX(-1)}

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

@@ -0,0 +1,127 @@
+/* expandable-menu-item-trigger.tsx generated by @compiled/babel-plugin v0.36.1 */
+import _extends from "@babel/runtime/helpers/extends";
+import "./expandable-menu-item-trigger.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
+import React, { forwardRef, useCallback, useRef } from 'react';
+import { IconButton } from '@atlaskit/button/new';
+import ChevronDownIcon from '@atlaskit/icon/core/chevron-down';
+import ChevronRightIcon from '@atlaskit/icon/core/chevron-right';
+import { MenuItemBase, nestedOpenPopupCSSSelector } from '../menu-item';
+import { useScrollMenuItemIntoView } from '../use-scroll-menu-item-into-view';
+import { useIsExpanded, useOnExpansionToggle, useSetIsExpanded } from './expandable-menu-item-context';
+// Widening type to `string` to side-step Compiled cssMap typescript warnings with unknown properties
+var chevronDisplayCssVar = '--expandable-chevron-display';
+var providedElemBeforeDisplayCssVar = '--expandable-provided-elembefore-display';
+var wrapperStyles = {
+  root: "_1mmi1txw _165nglyw",
+  showProvidedElemBefore: "_1mmiglyw _165n1bgi _v9u71txw _1hl9glyw _b31z1txw _1vnl1txw _12xsglyw _p8btglyw"
+};
+var iconStyles = {
+  chevron: "_1e0ciw0t _1tz3r0mg",
+  providedElemBefore: "_1e0c1xb2"
+};
+var ExpandableMenuItemIcon = function ExpandableMenuItemIcon(_ref) {
+  var iconProps = _ref.iconProps,
+    isExpanded = _ref.isExpanded,
+    isSelected = _ref.isSelected,
+    providedElemBefore = _ref.providedElemBefore;
+  var ChevronIcon = isExpanded ? ChevronDownIcon : ChevronRightIcon;
+  var chevronElem = /*#__PURE__*/React.createElement(ChevronIcon, _extends({}, iconProps, {
+    label: "",
+    color: isSelected ? "var(--ds-icon-selected, #0C66E4)" : undefined,
+    size: "small"
+  }));
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: ax([iconStyles.chevron])
+  }, chevronElem), providedElemBefore && /*#__PURE__*/React.createElement("div", {
+    className: ax([iconStyles.providedElemBefore])
+  }, providedElemBefore));
+};
+/**
+ * __ExpandableMenuItemTrigger__
+ *
+ * The trigger component for an `ExpandableMenuItem`. Interacting with it will expand or collapse the expandable.
+ */
+export var ExpandableMenuItemTrigger = /*#__PURE__*/forwardRef(function (_ref2, forwardedRef) {
+  var actions = _ref2.actions,
+    isSelected = _ref2.isSelected,
+    href = _ref2.href,
+    providedElemBefore = _ref2.elemBefore,
+    elemAfter = _ref2.elemAfter,
+    actionsOnHover = _ref2.actionsOnHover,
+    onClick = _ref2.onClick,
+    children = _ref2.children,
+    testId = _ref2.testId,
+    interactionName = _ref2.interactionName,
+    isContentTooltipDisabled = _ref2.isContentTooltipDisabled,
+    visualContentRef = _ref2.visualContentRef,
+    isDragging = _ref2.isDragging,
+    hasDragIndicator = _ref2.hasDragIndicator,
+    dropIndicator = _ref2.dropIndicator;
+  var onExpansionToggle = useOnExpansionToggle();
+  var isExpanded = useIsExpanded();
+  var setIsExpanded = useSetIsExpanded();
+  var itemRef = useRef(null);
+  var handleIconClick = useCallback(function () {
+    onExpansionToggle === null || onExpansionToggle === void 0 || onExpansionToggle(!isExpanded);
+    setIsExpanded(!isExpanded);
+  }, [isExpanded, onExpansionToggle, setIsExpanded]);
+  var handleMenuContentClick = useCallback(function (event, analyticsEvent) {
+    var newValue = !isExpanded;
+    onClick === null || onClick === void 0 || onClick(event, analyticsEvent, {
+      isExpanded: newValue
+    });
+    onExpansionToggle === null || onExpansionToggle === void 0 || onExpansionToggle(newValue);
+    setIsExpanded(newValue);
+  }, [onClick, onExpansionToggle, isExpanded, setIsExpanded]);
+  var isSelectable = typeof href !== 'undefined';
+  useScrollMenuItemIntoView({
+    elementRef: itemRef,
+    isSelected: Boolean(isSelectable && isSelected)
+  });
+
+  // Wrapped in an IconButton if the expandable menu item trigger is selectable
+  var elemBefore = isSelectable ? /*#__PURE__*/React.createElement(IconButton, {
+    icon: function icon(iconProps) {
+      return /*#__PURE__*/React.createElement(ExpandableMenuItemIcon, {
+        iconProps: iconProps,
+        isExpanded: isExpanded,
+        isSelected: isSelected,
+        providedElemBefore: providedElemBefore
+      });
+    },
+    "aria-expanded": isExpanded,
+    label: isExpanded ? 'Collapse' : 'Expand',
+    appearance: "subtle",
+    spacing: "compact",
+    onClick: handleIconClick,
+    interactionName: interactionName
+  }) : /*#__PURE__*/React.createElement(ExpandableMenuItemIcon, {
+    isExpanded: isExpanded,
+    isSelected: isSelected,
+    providedElemBefore: providedElemBefore
+  });
+
+  // For expandable menu items, we shouldn't wrap in a `li` here. The `li` is instead at a higher level (`ExpandableMenuItem`), grouping the expandable menu item trigger and its content
+  return /*#__PURE__*/React.createElement("div", {
+    ref: itemRef,
+    className: ax([wrapperStyles.root, providedElemBefore && wrapperStyles.showProvidedElemBefore])
+  }, /*#__PURE__*/React.createElement(MenuItemBase, {
+    actions: actions,
+    actionsOnHover: actionsOnHover,
+    elemBefore: elemBefore,
+    ariaExpanded: isExpanded,
+    elemAfter: elemAfter,
+    href: href,
+    isSelected: isSelected,
+    onClick: handleMenuContentClick,
+    ref: forwardedRef,
+    visualContentRef: visualContentRef,
+    testId: testId,
+    interactionName: interactionName,
+    isContentTooltipDisabled: isContentTooltipDisabled,
+    isDragging: isDragging,
+    hasDragIndicator: hasDragIndicator,
+    dropIndicator: dropIndicator
+  }, children));
+});

package/dist/esm/ui/menu-item/expandable-menu-item/expandable-menu-item.compiled.css

@@ -0,0 +1 @@
+._kqswh2mm{position:relative}

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

@@ -0,0 +1,58 @@
+/* expandable-menu-item.tsx generated by @compiled/babel-plugin v0.36.1 */
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import "./expandable-menu-item.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import { forwardRef } from 'react';
+import useControlled from '@atlaskit/ds-lib/use-controlled';
+import { MenuListItem } from '../menu-list-item';
+import { IsExpandedContext, OnExpansionToggleContext, SetIsExpandedContext } from './expandable-menu-item-context';
+var relativeStyles = {
+  root: "_kqswh2mm"
+};
+
+/**
+ * __ExpandableMenuItem__
+ *
+ * A composable component for nested menu items that can be revealed and hidden by interacting witih the parent menu item.
+ *
+ * Follows the [disclosure pattern](https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/).
+ *
+ * Should be used with `ExpandableMenuItemTrigger` as the parent menu item, and children menu items should be wrapped in a `ExpandableMenuItemContent`.
+ *
+ * Usage example:
+ * ```jsx
+ * <ExpandableMenuItem>
+ *   <ExpandableMenuItemTrigger>Parent menu item</ExpandableMenuItemTrigger>
+ *   <ExpandableMenuItemContent>
+ *     <ButtonMenuItem>Item 1</ButtonMenuItem>
+ *     <ButtonMenuItem>Item 2</ButtonMenuItem>
+ *   </ExpandableMenuItemContent>
+ * </ExpandableMenuItem>
+ * ```
+ */
+export var ExpandableMenuItem = /*#__PURE__*/forwardRef(function (_ref, forwardedRef) {
+  var isExpandedControlled = _ref.isExpanded,
+    _ref$isDefaultExpande = _ref.isDefaultExpanded,
+    isDefaultExpanded = _ref$isDefaultExpande === void 0 ? false : _ref$isDefaultExpande,
+    onExpansionToggle = _ref.onExpansionToggle,
+    children = _ref.children,
+    dropIndicator = _ref.dropIndicator;
+  var _useControlled = useControlled(isExpandedControlled, function () {
+      return isDefaultExpanded;
+    }),
+    _useControlled2 = _slicedToArray(_useControlled, 2),
+    isExpanded = _useControlled2[0],
+    setIsExpanded = _useControlled2[1];
+  return /*#__PURE__*/React.createElement(IsExpandedContext.Provider, {
+    value: isExpanded
+  }, /*#__PURE__*/React.createElement(SetIsExpandedContext.Provider, {
+    value: setIsExpanded
+  }, /*#__PURE__*/React.createElement(OnExpansionToggleContext.Provider, {
+    value: onExpansionToggle !== null && onExpansionToggle !== void 0 ? onExpansionToggle : null
+  }, /*#__PURE__*/React.createElement(MenuListItem, {
+    ref: forwardedRef
+  }, /*#__PURE__*/React.createElement("div", {
+    className: ax([dropIndicator && relativeStyles.root])
+  }, children, dropIndicator)))));
+});

package/dist/esm/ui/menu-item/flyout-menu-item/flyout-menu-item-content.compiled.css

@@ -0,0 +1,5 @@
+._1q51u2gc{padding-block-start:var(--ds-space-100,8px)}
+._85i5u2gc{padding-block-end:var(--ds-space-100,8px)}
+._bozgu2gc{padding-inline-start:var(--ds-space-100,8px)}
+._y4tiu2gc{padding-inline-end:var(--ds-space-100,8px)}
+@media (min-width:48rem){._14b51kdj{width:25pc}}