@atlaskit/side-nav-items 1.0.0

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

@@ -0,0 +1,23 @@
+/* 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';
+const styles = {
+  root: "_11c8i4vh _1rjcu2gc _syaz1rpy _bozg12x7"
+};
+
+/**
+ * __MenuSectionHeading__
+ *
+ * The label for the menu section group.
+ */
+export const MenuSectionHeading = ({
+  children
+}) => {
+  const id = useMenuSectionContext();
+  return /*#__PURE__*/React.createElement("p", {
+    id: `${id}-heading`,
+    className: ax([styles.root])
+  }, children);
+};

package/dist/es2019/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 const MenuSection = ({
+  children,
+  testId,
+  isMenuListItem = false
+}) => {
+  const id = useId();
+  const content = /*#__PURE__*/React.createElement(MenuSectionContext.Provider, {
+    value: id
+  }, /*#__PURE__*/React.createElement("div", {
+    role: "group",
+    "aria-labelledby": `${id}-heading`
+  }, children));
+  if (isMenuListItem) {
+    return /*#__PURE__*/React.createElement(MenuListItem, {
+      testId: testId
+    }, content);
+  }
+
+  // Legacy. isMenuListItem should become default.
+  return content;
+};

package/dist/esm/entry-points/button-menu-item.js

@@ -0,0 +1,2 @@
+export { ButtonMenuItem } from '../ui/menu-item/button-menu-item';
+export { COLLAPSE_ELEM_BEFORE } from '../ui/menu-item/menu-item-signals';

package/dist/esm/entry-points/container-avatar.js

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

package/dist/esm/entry-points/drag-and-drop/drag-handle.js

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

package/dist/esm/entry-points/drag-and-drop/drag-preview.js

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

package/dist/esm/entry-points/drag-and-drop/drop-indicator.js

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

package/dist/esm/entry-points/drag-and-drop/group-drop-indicator.js

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

package/dist/esm/entry-points/drag-and-drop/hitbox.js

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

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

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

package/dist/esm/entry-points/expandable-menu-item.js

@@ -0,0 +1,4 @@
+export { ExpandableMenuItem } from '../ui/menu-item/expandable-menu-item/expandable-menu-item';
+export { ExpandableMenuItemTrigger } from '../ui/menu-item/expandable-menu-item/expandable-menu-item-trigger';
+export { ExpandableMenuItemContent } from '../ui/menu-item/expandable-menu-item/expandable-menu-item-content';
+export { useIsExpanded } from '../ui/menu-item/expandable-menu-item/expandable-menu-item-context';

package/dist/esm/entry-points/flyout-menu-item.js

@@ -0,0 +1,7 @@
+export { FlyoutMenuItem } from '../ui/menu-item/flyout-menu-item/flyout-menu-item';
+export { FlyoutBody } from '../ui/menu-item/flyout-menu-item/flyout-body';
+export { FlyoutMenuItemContent } from '../ui/menu-item/flyout-menu-item/flyout-menu-item-content';
+export { FlyoutFooter } from '../ui/menu-item/flyout-menu-item/flyout-footer';
+export { FlyoutHeader } from '../ui/menu-item/flyout-menu-item/flyout-header';
+export { COLLAPSE_ELEM_BEFORE } from '../ui/menu-item/menu-item-signals';
+export { FlyoutMenuItemTrigger } from '../ui/menu-item/flyout-menu-item/flyout-menu-item-trigger';

package/dist/esm/entry-points/link-menu-item.js

@@ -0,0 +1,2 @@
+export { LinkMenuItem } from '../ui/menu-item/link-menu-item';
+export { COLLAPSE_ELEM_BEFORE } from '../ui/menu-item/menu-item-signals';

package/dist/esm/entry-points/menu-list-item.js

@@ -0,0 +1 @@
+export { MenuListItem } from '../ui/menu-item/menu-list-item';

package/dist/esm/entry-points/menu-list.js

@@ -0,0 +1 @@
+export { MenuList } from '../ui/menu-item/menu-list';

package/dist/esm/entry-points/menu-section.js

@@ -0,0 +1,3 @@
+export { MenuSection } from '../ui/menu-section/menu-section';
+export { MenuSectionHeading } from '../ui/menu-section/menu-section-heading';
+export { Divider } from '../ui/menu-section/divider';

package/dist/esm/entry-points/top-level-spacer.js

@@ -0,0 +1 @@
+export { TopLevelSpacer } from '../ui/menu-item/top-level-spacer';

package/dist/esm/index.js

@@ -0,0 +1,3 @@
+// Imports should be from the more granular entrypoints, e.g.
+// import { ButtonMenuItem } from '@atlaskit/side-nav-items/button-menu-item';
+export {};

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

@@ -0,0 +1,58 @@
+import React, { forwardRef } from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { MenuItemBase } from './menu-item';
+import { MenuListItem } from './menu-list-item';
+/**
+ * __ButtonMenuItem__
+ *
+ * A menu item button. It should be used within a `ul`, as it renders a list item.
+ */
+export var ButtonMenuItem = /*#__PURE__*/forwardRef(function (_ref, forwardedRef) {
+  var testId = _ref.testId,
+    actions = _ref.actions,
+    children = _ref.children,
+    description = _ref.description,
+    elemAfter = _ref.elemAfter,
+    isDisabled = _ref.isDisabled,
+    isSelected = _ref.isSelected,
+    elemBefore = _ref.elemBefore,
+    actionsOnHover = _ref.actionsOnHover,
+    onClick = _ref.onClick,
+    ariaControls = _ref['aria-controls'],
+    ariaExpanded = _ref['aria-expanded'],
+    ariaHasPopup = _ref['aria-haspopup'],
+    interactionName = _ref.interactionName,
+    isContentTooltipDisabled = _ref.isContentTooltipDisabled,
+    visualContentRef = _ref.visualContentRef,
+    listItemRef = _ref.listItemRef,
+    isDragging = _ref.isDragging,
+    hasDragIndicator = _ref.hasDragIndicator,
+    dropIndicator = _ref.dropIndicator;
+  return /*#__PURE__*/React.createElement(MenuListItem, {
+    ref: listItemRef
+  }, /*#__PURE__*/React.createElement(MenuItemBase, {
+    testId: testId,
+    description: description,
+    elemAfter: elemAfter,
+    elemBefore: elemBefore,
+    isDisabled: isDisabled
+    /**
+     * Not passing `actions` and `actionsOnHover` to MenuItemBase when `isDisabled`,
+     * so they aren't rendered in the disabled state.
+     */,
+    actions: isDisabled ? undefined : actions,
+    actionsOnHover: isDisabled ? undefined : actionsOnHover,
+    onClick: onClick,
+    ariaControls: fg('platform-dst-buttonmenuitem-selected-state-support') ? ariaControls : undefined,
+    ariaExpanded: fg('platform-dst-buttonmenuitem-selected-state-support') ? ariaExpanded : undefined,
+    ariaHasPopup: fg('platform-dst-buttonmenuitem-selected-state-support') ? ariaHasPopup : undefined,
+    isSelected: fg('platform-dst-buttonmenuitem-selected-state-support') ? isSelected : undefined,
+    ref: forwardedRef,
+    visualContentRef: visualContentRef,
+    interactionName: interactionName,
+    isContentTooltipDisabled: isContentTooltipDisabled,
+    isDragging: isDragging,
+    hasDragIndicator: hasDragIndicator,
+    dropIndicator: dropIndicator
+  }, children));
+});

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

@@ -0,0 +1,15 @@
+/**
+ * _Internally_ shared value for the menu item indentation. Used in:
+ * - Expandable menu item content, to add padding for each expandable level
+ * - The base menu item, to set the negative inset to extend the clickable area of nested menu items
+ * to the root level menu items.
+ *
+ * Internal to the package only. Should not be exported from the package.
+ *
+ * Note: We're unable to use a token() call here, as Compiled complains about function calls in imported
+ * values - it requires statically defined values only.
+ *
+ * @private
+ * @internal
+ */
+export var expandableMenuItemIndentation = '12px';

package/dist/esm/ui/menu-item/container-avatar.compiled.css

@@ -0,0 +1,4 @@
+
+._2rko12b0{border-radius:var(--ds-radius-small,4px)}._1bsbgktf{width:20px}
+._4t3igktf{height:20px}
+._vchhusvi{box-sizing:border-box}

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

@@ -0,0 +1,26 @@
+/* container-avatar.tsx generated by @compiled/babel-plugin v0.38.1 */
+import "./container-avatar.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+var styles = {
+  root: "_2rko12b0 _vchhusvi _4t3igktf _1bsbgktf"
+};
+/**
+ * __Container avatar__
+ *
+ * This component has been introduced specifically for the Nav4 sidebar because the existing Avatar component
+ * did not offer the correct sizes to align with the designs. It was necessary to create a new component rather than
+ * using the ADS image component because that did not allow the ability to set the border and radius and the desired
+ * presentation was not achievable through nesting within another styled component. At some point this component maybe
+ * removed if the Avatar component is updated to allow for the desired presentation.
+ *
+ * A container avatar to be used in sidebar navigation items.
+ */
+export var ContainerAvatar = function ContainerAvatar(_ref) {
+  var src = _ref.src;
+  return /*#__PURE__*/React.createElement("img", {
+    src: src,
+    alt: "",
+    className: ax([styles.root])
+  });
+};

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

@@ -0,0 +1,9 @@
+
+._2rko12b0{border-radius:var(--ds-radius-small,4px)}
+._2rko1qi0{border-radius:var(--ds-radius-medium,6px)}._189ee4h9{border-width:var(--ds-border-width,1px)}
+._1dqonqa1{border-style:solid}
+._1h6d1l7x{border-color:var(--ds-border,#0b120e24)}
+._1ul9uuw1{min-width:200px}
+._bfhkvuon{background-color:var(--ds-surface,#fff)}
+._p12fgx0z{max-width:260px}
+._y4ti1b66{padding-inline-end:var(--ds-space-050,4px)}

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

@@ -0,0 +1,58 @@
+/* drag-preview.tsx generated by @compiled/babel-plugin v0.38.1 */
+import "./drag-preview.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import { fg } from '@atlaskit/platform-feature-flags';
+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: "_2rko12b0 _189ee4h9 _1h6d1l7x _1dqonqa1 _bfhkvuon _y4ti1b66 _p12fgx0z",
+  rootT26Shape: "_2rko1qi0",
+  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, fg('platform-dst-shape-theme-default') && dragPreviewStyles.rootT26Shape, 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.38.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/drag-handle.compiled.css

@@ -0,0 +1,9 @@
+._152tidpf{inset-block-start:0}
+._1bah1h6o{justify-content:center}
+._1e02idpf{inset-inline-start:0}
+._1e0c1i3c{display:var(--drag-handle-display,none)}
+._2lx21bp4{flex-direction:column}
+._ahbqxmi2{margin-inline-start:var(--ds-space-negative-150,-9pt)}
+._kqswstnw{position:absolute}
+._syazazsu{color:var(--ds-text-subtle,#505258)}
+._u7coidpf{inset-block-end:0}

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

@@ -0,0 +1,19 @@
+/* drag-handle.tsx generated by @compiled/babel-plugin v0.38.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: "_syazazsu _1e0c1i3c _2lx21bp4 _1bah1h6o _kqswstnw _152tidpf _u7coidpf _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/drag-handle/lazy-drag-handle.js

@@ -0,0 +1,11 @@
+// Using `lazy` so that only consumers who want drag and drop
+// need to include code for the drag handle.
+import { lazy } from 'react';
+
+/**
+ * Exposing this for use by custom components
+ */
+export var LazyDragHandle = /*#__PURE__*/lazy(function () {
+  return import( /* webpackChunkName: "@atlaskit-internal_nav4-menu-item-drag-handle" */
+  './drag-handle');
+});

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.38.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 { expandableMenuItemIndentation } from '../constants';
+import { List } from '../list';
+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)));
+});