@atlaskit/side-nav-items 1.0.0

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

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MenuListItem = void 0;
+var _listItem = require("./list-item");
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+
+/**
+ * __Menu list item__
+ *
+ * A [list item](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/li) with visual styles removed.
+ */
+var MenuListItem = exports.MenuListItem = _listItem.ListItem;

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

@@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MenuList = void 0;
+var _list = require("./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.
+ */
+var MenuList = exports.MenuList = _list.List;

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

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

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

@@ -0,0 +1,46 @@
+/* top-level-spacer.tsx generated by @compiled/babel-plugin v0.38.1 */
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TopLevelSpacer = TopLevelSpacer;
+require("./top-level-spacer.compiled.css");
+var _react = _interopRequireWildcard(require("react"));
+var React = _react;
+var _runtime = require("@compiled/react/runtime");
+var _expandableMenuItemContext = require("./expandable-menu-item/expandable-menu-item-context");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+var 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.
+ */
+function TopLevelSpacer() {
+  var level = (0, _expandableMenuItemContext.useLevel)();
+  (0, _react.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: (0, _runtime.ax)([styles.root])
+  });
+}

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

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

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

@@ -0,0 +1,70 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useScrollMenuItemIntoView = useScrollMenuItemIntoView;
+var _react = require("react");
+var _tinyInvariant = _interopRequireDefault(require("tiny-invariant"));
+var _expandableMenuItemContext = require("./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.
+ */
+function useScrollMenuItemIntoView(_ref) {
+  var elementRef = _ref.elementRef,
+    isSelected = _ref.isSelected;
+  var areAllAncestorsExpanded = (0, _expandableMenuItemContext.useAreAllAncestorsExpanded)();
+  var waitingStateRef = (0, _react.useRef)({
+    type: 'waiting-to-be-selected-and-all-ancestors-expanded'
+  });
+  (0, _react.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;
+      (0, _tinyInvariant.default)(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/cjs/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/cjs/ui/menu-section/divider.js

@@ -0,0 +1,32 @@
+/* divider.tsx generated by @compiled/babel-plugin v0.38.1 */
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Divider = void 0;
+require("./divider.compiled.css");
+var React = _interopRequireWildcard(require("react"));
+var _runtime = require("@compiled/react/runtime");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+var styles = null;
+
+/**
+ * __Divider__
+ *
+ * A divider for use between menu sections.
+ */
+var Divider = exports.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: (0, _runtime.ax)(["_h7alglyw _179rglyw _mqm2ia51 _1bsb1osq"])
+  });
+};

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

@@ -0,0 +1,19 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useMenuSectionContext = exports.MenuSectionContext = void 0;
+var _react = require("react");
+var _tinyInvariant = _interopRequireDefault(require("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.
+ */
+var MenuSectionContext = exports.MenuSectionContext = /*#__PURE__*/(0, _react.createContext)(null);
+var useMenuSectionContext = exports.useMenuSectionContext = function useMenuSectionContext() {
+  var context = (0, _react.useContext)(MenuSectionContext);
+  (0, _tinyInvariant.default)(context, 'useMenuSectionContext must be used within a MenuSection');
+  return context;
+};

package/dist/cjs/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/cjs/ui/menu-section/menu-section-heading.js

@@ -0,0 +1,30 @@
+/* menu-section-heading.tsx generated by @compiled/babel-plugin v0.38.1 */
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MenuSectionHeading = void 0;
+require("./menu-section-heading.compiled.css");
+var React = _interopRequireWildcard(require("react"));
+var _runtime = require("@compiled/react/runtime");
+var _menuSectionContext = require("./menu-section-context");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+var styles = {
+  root: "_11c8i4vh _1rjcu2gc _syaz1rpy _bozg12x7"
+};
+
+/**
+ * __MenuSectionHeading__
+ *
+ * The label for the menu section group.
+ */
+var MenuSectionHeading = exports.MenuSectionHeading = function MenuSectionHeading(_ref) {
+  var children = _ref.children;
+  var id = (0, _menuSectionContext.useMenuSectionContext)();
+  return /*#__PURE__*/React.createElement("p", {
+    id: "".concat(id, "-heading"),
+    className: (0, _runtime.ax)([styles.root])
+  }, children);
+};

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

@@ -0,0 +1,49 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MenuSection = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _useId = require("@atlaskit/ds-lib/use-id");
+var _menuListItem = require("../menu-item/menu-list-item");
+var _menuSectionContext = require("./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>
+ * ```
+ */
+var MenuSection = exports.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 = (0, _useId.useId)();
+  var content = /*#__PURE__*/_react.default.createElement(_menuSectionContext.MenuSectionContext.Provider, {
+    value: id
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    role: "group",
+    "aria-labelledby": "".concat(id, "-heading")
+  }, children));
+  if (isMenuListItem) {
+    return /*#__PURE__*/_react.default.createElement(_menuListItem.MenuListItem, {
+      testId: testId
+    }, content);
+  }
+
+  // Legacy. isMenuListItem should become default.
+  return content;
+};

package/dist/es2019/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/es2019/entry-points/container-avatar.js

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

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

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

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

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

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

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

package/dist/es2019/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/es2019/entry-points/drag-and-drop/hitbox.js

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

package/dist/es2019/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/es2019/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/es2019/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/es2019/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/es2019/entry-points/menu-list-item.js

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

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

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

package/dist/es2019/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/es2019/entry-points/top-level-spacer.js

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

package/dist/es2019/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/es2019/ui/menu-item/button-menu-item.js

@@ -0,0 +1,59 @@
+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 const ButtonMenuItem = /*#__PURE__*/forwardRef(({
+  testId,
+  actions,
+  children,
+  description,
+  elemAfter,
+  isDisabled,
+  isSelected,
+  elemBefore,
+  actionsOnHover,
+  onClick,
+  'aria-controls': ariaControls,
+  'aria-expanded': ariaExpanded,
+  'aria-haspopup': ariaHasPopup,
+  interactionName,
+  isContentTooltipDisabled,
+  visualContentRef,
+  listItemRef,
+  isDragging,
+  hasDragIndicator,
+  dropIndicator
+}, forwardedRef) => {
+  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/es2019/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 const expandableMenuItemIndentation = '12px';

package/dist/es2019/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/es2019/ui/menu-item/container-avatar.js

@@ -0,0 +1,25 @@
+/* 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";
+const 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 const ContainerAvatar = ({
+  src
+}) => /*#__PURE__*/React.createElement("img", {
+  src: src,
+  alt: "",
+  className: ax([styles.root])
+});

package/dist/es2019/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/es2019/ui/menu-item/drag-and-drop/drag-preview.js

@@ -0,0 +1,60 @@
+/* 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;
+  }
+  const {
+    userAgent
+  } = navigator;
+  return userAgent.includes('AppleWebKit') && !userAgent.includes('Chrome');
+}
+const 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({
+  elemBefore,
+  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/es2019/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/es2019/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/es2019/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';