@atlaskit/navigation-system 5.6.0 → 5.8.0

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @atlassian/navigation-system
 
+## 5.8.0
+
+### Minor Changes
+
+- [`6a51c2d83eea1`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/6a51c2d83eea1) -
+  Export LazyDragHandle for use by custom menu items that wish to implement drag and drop.
+
+## 5.7.0
+
+### Minor Changes
+
+- [`8b3783c70ef57`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/8b3783c70ef57) -
+  Clicking on the side nav toggle button will now close any open layers such as tooltips. This
+  ensures tooltips don't linger on the screen when the buttons inside `TopNavStart` are reordered.
+
+  This change is behind the feature flag `navx-full-height-sidebar`.
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 5.6.0
 
 ### Minor Changes

package/dist/cjs/entry-points/side-nav-items/drag-and-drop/drag-handle.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "LazyDragHandle", {
+  enumerable: true,
+  get: function get() {
+    return _lazyDragHandle.LazyDragHandle;
+  }
+});
+var _lazyDragHandle = require("../../../ui/menu-item/drag-handle/lazy-drag-handle");

package/dist/cjs/ui/menu-item/{drag-handle.compiled.css → drag-handle/drag-handle.compiled.css}

@@ -1,9 +1,9 @@
-._154iidpf{top:0}
+._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}
-._94n5idpf{bottom:0}
 ._ahbqxmi2{margin-inline-start:var(--ds-space-negative-150,-9pt)}
 ._kqswstnw{position:absolute}
-._syazazsu{color:var(--ds-text-subtle,#505258)}
+._syazazsu{color:var(--ds-text-subtle,#505258)}
+._u7coidpf{inset-block-end:0}

package/dist/cjs/ui/menu-item/{drag-handle.js → drag-handle/drag-handle.js}

@@ -13,7 +13,7 @@ var _runtime = require("@compiled/react/runtime");
 var _dragHandleVertical = _interopRequireDefault(require("@atlaskit/icon/core/drag-handle-vertical"));
 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: "_syazazsu _1e0c1i3c _2lx21bp4 _1bah1h6o _kqswstnw _154iidpf _94n5idpf _1e02idpf _ahbqxmi2"
+  root: "_syazazsu _1e0c1i3c _2lx21bp4 _1bah1h6o _kqswstnw _152tidpf _u7coidpf _1e02idpf _ahbqxmi2"
 };
 
 // Using default export to play well with React.lazy

package/dist/cjs/ui/menu-item/drag-handle/lazy-drag-handle.js

@@ -0,0 +1,20 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.LazyDragHandle = void 0;
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+var _react = require("react");
+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" != (0, _typeof2.default)(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); } // Using `lazy` so that only consumers who want drag and drop
+// need to include code for the drag handle.
+/**
+ * Exposing this for use by custom components
+ */
+var LazyDragHandle = exports.LazyDragHandle = /*#__PURE__*/(0, _react.lazy)(function () {
+  return Promise.resolve().then(function () {
+    return _interopRequireWildcard(require( /* webpackChunkName: "@atlaskit-internal_nav4-menu-item-drag-handle" */
+    './drag-handle'));
+  });
+});

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

@@ -2,13 +2,13 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.nestedOpenPopupCSSSelector = exports.MenuItemBase = void 0;
 require("./menu-item.compiled.css");
 var _runtime = require("@compiled/react/runtime");
-var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireWildcard(require("react"));
@@ -19,20 +19,13 @@ var _mergeRefs = _interopRequireDefault(require("@atlaskit/ds-lib/merge-refs"));
 var _compiled = require("@atlaskit/primitives/compiled");
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 var _constants = require("./constants");
+var _lazyDragHandle = require("./drag-handle/lazy-drag-handle");
 var _expandableMenuItemContext = require("./expandable-menu-item/expandable-menu-item-context");
 var _flyoutMenuItemContext = require("./flyout-menu-item/flyout-menu-item-context");
 var _menuItemSignals = require("./menu-item-signals");
+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); }
 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) { (0, _defineProperty2.default)(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; }
-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" != (0, _typeof2.default)(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); }
-// Using `lazy` so that only consumers who want drag and drop
-// need to include code for the drag handle.
-var LazyDragHandle = /*#__PURE__*/(0, _react.lazy)(function () {
-  return Promise.resolve().then(function () {
-    return _interopRequireWildcard(require( /* webpackChunkName: "@atlaskit-internal_nav4-menu-item-drag-handle" */
-    './drag-handle'));
-  });
-});
 function isTextClamped(element) {
   // Checking for vertical height rather than horizontal height.
   // When text is "clamped", it's technically being clamped vertically! 🤯
@@ -291,7 +284,7 @@ var MenuItemBaseNoRef = function MenuItemBaseNoRef(_ref2, forwardedRef) {
     ref: descriptionRef
   }, description)), hasDragIndicator ? /*#__PURE__*/_react.default.createElement(_react.Suspense, {
     fallback: null
-  }, /*#__PURE__*/_react.default.createElement(LazyDragHandle, null)) : null, dropIndicator);
+  }, /*#__PURE__*/_react.default.createElement(_lazyDragHandle.LazyDragHandle, null)) : null, dropIndicator);
 
   /**
    *  If the [expandable] menu item is expanded, show hover actions even when *not* hovered.

package/dist/cjs/ui/page-layout/side-nav/side-nav.js

@@ -314,9 +314,9 @@ function SideNavInternal(_ref) {
       }
       if (action === 'ready-to-close') {
         // If there are no open layers, we can close the flyout.
-        if (openLayerObserver.getCount({
+        if ((openLayerObserver === null || openLayerObserver === void 0 ? void 0 : openLayerObserver.getCount({
           namespace: openLayerObserverSideNavNamespace
-        }) === 0) {
+        })) === 0) {
           close();
           return;
         }
@@ -672,7 +672,7 @@ function SideNavInternal(_ref) {
     // Close the flyout if there are no more layers open and the user is not mousing over the
     // flyout areas (side nav, TopNavStart element)
 
-    return openLayerObserver.onChange(function (_ref6) {
+    return openLayerObserver === null || openLayerObserver === void 0 ? void 0 : openLayerObserver.onChange(function (_ref6) {
       var count = _ref6.count;
       if (flyoutStateRef.current.type === 'ready-to-close' && count === 0) {
         updateFlyoutState('force-close');

package/dist/cjs/ui/page-layout/side-nav/toggle-button.js

@@ -16,6 +16,7 @@ var _bindEventListener = require("bind-event-listener");
 var _analyticsNext = require("@atlaskit/analytics-next");
 var _sidebarCollapse = _interopRequireDefault(require("@atlaskit/icon/core/sidebar-collapse"));
 var _sidebarExpand = _interopRequireDefault(require("@atlaskit/icon/core/sidebar-expand"));
+var _openLayerObserver = require("@atlaskit/layering/experimental/open-layer-observer");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _useIsFhsEnabled = require("../../fhs-rollout/use-is-fhs-enabled");
 var _migration = require("../../top-nav-items/themed/migration");
@@ -112,12 +113,16 @@ var SideNavToggleButton = exports.SideNavToggleButton = function SideNavToggleBu
   });
   var _useAnalyticsEvents = (0, _analyticsNext.useAnalyticsEvents)(),
     createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
+  var openLayerObserver = (0, _openLayerObserver.useOpenLayerObserver)();
   var handleClick = (0, _react.useCallback)(function (event, analyticsEvent) {
     onClick === null || onClick === void 0 || onClick(event, analyticsEvent, {
       isSideNavVisible: isSideNavExpanded
     });
     toggleVisibility();
-  }, [onClick, isSideNavExpanded, toggleVisibility]);
+    if ((0, _platformFeatureFlags.fg)('navx-full-height-sidebar')) {
+      openLayerObserver === null || openLayerObserver === void 0 || openLayerObserver.closeLayers();
+    }
+  }, [onClick, isSideNavExpanded, toggleVisibility, openLayerObserver]);
   var handlePointerEnter = (0, _react.useCallback)(function () {
     if (!(0, _platformFeatureFlags.fg)('platform_dst_nav4_fhs_instrumentation_1')) {
       return;

package/dist/cjs/ui/page-layout/side-nav/use-side-nav-toggle-keyboard-shortcut.js

@@ -47,7 +47,7 @@ function useSideNavToggleKeyboardShortcut(_ref) {
             // Ignore repeated keydown events from holding down the keys
             return;
           }
-          if (openLayerObserver.getCount({
+          if (openLayerObserver && openLayerObserver.getCount({
             type: 'modal'
           }) > 0) {
             // Return early if there are any open modals

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

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

package/dist/{esm/ui/menu-item → es2019/ui/menu-item/drag-handle}/drag-handle.compiled.css

@@ -1,9 +1,9 @@
-._154iidpf{top:0}
+._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}
-._94n5idpf{bottom:0}
 ._ahbqxmi2{margin-inline-start:var(--ds-space-negative-150,-9pt)}
 ._kqswstnw{position:absolute}
-._syazazsu{color:var(--ds-text-subtle,#505258)}
+._syazazsu{color:var(--ds-text-subtle,#505258)}
+._u7coidpf{inset-block-end:0}

package/dist/es2019/ui/menu-item/{drag-handle.js → drag-handle/drag-handle.js}

@@ -4,7 +4,7 @@ import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import DragHandleVerticalIcon from '@atlaskit/icon/core/drag-handle-vertical';
 const styles = {
-  root: "_syazazsu _1e0c1i3c _2lx21bp4 _1bah1h6o _kqswstnw _154iidpf _94n5idpf _1e02idpf _ahbqxmi2"
+  root: "_syazazsu _1e0c1i3c _2lx21bp4 _1bah1h6o _kqswstnw _152tidpf _u7coidpf _1e02idpf _ahbqxmi2"
 };
 
 // Using default export to play well with React.lazy

package/dist/es2019/ui/menu-item/drag-handle/lazy-drag-handle.js

@@ -0,0 +1,9 @@
+// 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 const LazyDragHandle = /*#__PURE__*/lazy(() => import( /* webpackChunkName: "@atlaskit-internal_nav4-menu-item-drag-handle" */
+'./drag-handle'));

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

@@ -2,7 +2,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import "./menu-item.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
-import React, { lazy, Suspense, useCallback, useRef } from 'react';
+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';
@@ -10,13 +10,10 @@ import mergeRefs from '@atlaskit/ds-lib/merge-refs';
 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';
-// Using `lazy` so that only consumers who want drag and drop
-// need to include code for the drag handle.
-const LazyDragHandle = /*#__PURE__*/lazy(() => import( /* webpackChunkName: "@atlaskit-internal_nav4-menu-item-drag-handle" */
-'./drag-handle'));
 function isTextClamped(element) {
   // Checking for vertical height rather than horizontal height.
   // When text is "clamped", it's technically being clamped vertically! 🤯

package/dist/es2019/ui/page-layout/side-nav/side-nav.js

@@ -295,9 +295,9 @@ function SideNavInternal({
       }
       if (action === 'ready-to-close') {
         // If there are no open layers, we can close the flyout.
-        if (openLayerObserver.getCount({
+        if ((openLayerObserver === null || openLayerObserver === void 0 ? void 0 : openLayerObserver.getCount({
           namespace: openLayerObserverSideNavNamespace
-        }) === 0) {
+        })) === 0) {
           close();
           return;
         }
@@ -658,7 +658,7 @@ function SideNavInternal({
     // Close the flyout if there are no more layers open and the user is not mousing over the
     // flyout areas (side nav, TopNavStart element)
 
-    return openLayerObserver.onChange(({
+    return openLayerObserver === null || openLayerObserver === void 0 ? void 0 : openLayerObserver.onChange(({
       count
     }) => {
       if (flyoutStateRef.current.type === 'ready-to-close' && count === 0) {

package/dist/es2019/ui/page-layout/side-nav/toggle-button.js

@@ -6,6 +6,7 @@ import { bind } from 'bind-event-listener';
 import { useAnalyticsEvents } from '@atlaskit/analytics-next';
 import SidebarCollapseIcon from '@atlaskit/icon/core/sidebar-collapse';
 import SidebarExpandIcon from '@atlaskit/icon/core/sidebar-expand';
+import { useOpenLayerObserver } from '@atlaskit/layering/experimental/open-layer-observer';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { useIsFhsEnabled } from '../../fhs-rollout/use-is-fhs-enabled';
 import { IconButton } from '../../top-nav-items/themed/migration';
@@ -96,12 +97,16 @@ export const SideNavToggleButton = ({
   const {
     createAnalyticsEvent
   } = useAnalyticsEvents();
+  const openLayerObserver = useOpenLayerObserver();
   const handleClick = useCallback((event, analyticsEvent) => {
     onClick === null || onClick === void 0 ? void 0 : onClick(event, analyticsEvent, {
       isSideNavVisible: isSideNavExpanded
     });
     toggleVisibility();
-  }, [onClick, isSideNavExpanded, toggleVisibility]);
+    if (fg('navx-full-height-sidebar')) {
+      openLayerObserver === null || openLayerObserver === void 0 ? void 0 : openLayerObserver.closeLayers();
+    }
+  }, [onClick, isSideNavExpanded, toggleVisibility, openLayerObserver]);
   const handlePointerEnter = useCallback(() => {
     if (!fg('platform_dst_nav4_fhs_instrumentation_1')) {
       return;

package/dist/es2019/ui/page-layout/side-nav/use-side-nav-toggle-keyboard-shortcut.js

@@ -42,7 +42,7 @@ export function useSideNavToggleKeyboardShortcut({
             // Ignore repeated keydown events from holding down the keys
             return;
           }
-          if (openLayerObserver.getCount({
+          if (openLayerObserver && openLayerObserver.getCount({
             type: 'modal'
           }) > 0) {
             // Return early if there are any open modals

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

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

package/dist/{es2019/ui/menu-item → esm/ui/menu-item/drag-handle}/drag-handle.compiled.css

@@ -1,9 +1,9 @@
-._154iidpf{top:0}
+._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}
-._94n5idpf{bottom:0}
 ._ahbqxmi2{margin-inline-start:var(--ds-space-negative-150,-9pt)}
 ._kqswstnw{position:absolute}
-._syazazsu{color:var(--ds-text-subtle,#505258)}
+._syazazsu{color:var(--ds-text-subtle,#505258)}
+._u7coidpf{inset-block-end:0}

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

@@ -4,7 +4,7 @@ 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 _154iidpf _94n5idpf _1e02idpf _ahbqxmi2"
+  root: "_syazazsu _1e0c1i3c _2lx21bp4 _1bah1h6o _kqswstnw _152tidpf _u7coidpf _1e02idpf _ahbqxmi2"
 };
 
 // Using default export to play well with React.lazy

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/menu-item.js

@@ -5,7 +5,7 @@ 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, { lazy, Suspense, useCallback, useRef } from 'react';
+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';
@@ -13,15 +13,10 @@ import mergeRefs from '@atlaskit/ds-lib/merge-refs';
 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';
-// Using `lazy` so that only consumers who want drag and drop
-// need to include code for the drag handle.
-var LazyDragHandle = /*#__PURE__*/lazy(function () {
-  return import( /* webpackChunkName: "@atlaskit-internal_nav4-menu-item-drag-handle" */
-  './drag-handle');
-});
 function isTextClamped(element) {
   // Checking for vertical height rather than horizontal height.
   // When text is "clamped", it's technically being clamped vertically! 🤯

package/dist/esm/ui/page-layout/side-nav/side-nav.js

@@ -304,9 +304,9 @@ function SideNavInternal(_ref) {
       }
       if (action === 'ready-to-close') {
         // If there are no open layers, we can close the flyout.
-        if (openLayerObserver.getCount({
+        if ((openLayerObserver === null || openLayerObserver === void 0 ? void 0 : openLayerObserver.getCount({
           namespace: openLayerObserverSideNavNamespace
-        }) === 0) {
+        })) === 0) {
           close();
           return;
         }
@@ -662,7 +662,7 @@ function SideNavInternal(_ref) {
     // Close the flyout if there are no more layers open and the user is not mousing over the
     // flyout areas (side nav, TopNavStart element)
 
-    return openLayerObserver.onChange(function (_ref6) {
+    return openLayerObserver === null || openLayerObserver === void 0 ? void 0 : openLayerObserver.onChange(function (_ref6) {
       var count = _ref6.count;
       if (flyoutStateRef.current.type === 'ready-to-close' && count === 0) {
         updateFlyoutState('force-close');

package/dist/esm/ui/page-layout/side-nav/toggle-button.js

@@ -10,6 +10,7 @@ import { bind } from 'bind-event-listener';
 import { useAnalyticsEvents } from '@atlaskit/analytics-next';
 import SidebarCollapseIcon from '@atlaskit/icon/core/sidebar-collapse';
 import SidebarExpandIcon from '@atlaskit/icon/core/sidebar-expand';
+import { useOpenLayerObserver } from '@atlaskit/layering/experimental/open-layer-observer';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { useIsFhsEnabled } from '../../fhs-rollout/use-is-fhs-enabled';
 import { IconButton } from '../../top-nav-items/themed/migration';
@@ -103,12 +104,16 @@ export var SideNavToggleButton = function SideNavToggleButton(_ref) {
   });
   var _useAnalyticsEvents = useAnalyticsEvents(),
     createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
+  var openLayerObserver = useOpenLayerObserver();
   var handleClick = useCallback(function (event, analyticsEvent) {
     onClick === null || onClick === void 0 || onClick(event, analyticsEvent, {
       isSideNavVisible: isSideNavExpanded
     });
     toggleVisibility();
-  }, [onClick, isSideNavExpanded, toggleVisibility]);
+    if (fg('navx-full-height-sidebar')) {
+      openLayerObserver === null || openLayerObserver === void 0 || openLayerObserver.closeLayers();
+    }
+  }, [onClick, isSideNavExpanded, toggleVisibility, openLayerObserver]);
   var handlePointerEnter = useCallback(function () {
     if (!fg('platform_dst_nav4_fhs_instrumentation_1')) {
       return;

package/dist/esm/ui/page-layout/side-nav/use-side-nav-toggle-keyboard-shortcut.js

@@ -41,7 +41,7 @@ export function useSideNavToggleKeyboardShortcut(_ref) {
             // Ignore repeated keydown events from holding down the keys
             return;
           }
-          if (openLayerObserver.getCount({
+          if (openLayerObserver && openLayerObserver.getCount({
             type: 'modal'
           }) > 0) {
             // Return early if there are any open modals

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

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

package/dist/types/ui/menu-item/drag-handle/lazy-drag-handle.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Exposing this for use by custom components
+ */
+export declare const LazyDragHandle: import("react").LazyExoticComponent<typeof import("./drag-handle").default>;

package/dist/types-ts4.5/entry-points/side-nav-items/drag-and-drop/drag-handle.d.ts

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

package/dist/types-ts4.5/ui/menu-item/drag-handle/lazy-drag-handle.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Exposing this for use by custom components
+ */
+export declare const LazyDragHandle: import("react").LazyExoticComponent<typeof import("./drag-handle").default>;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/navigation-system",
-	"version": "5.6.0",
+	"version": "5.8.0",
 	"description": "The latest navigation system for Atlassian apps.",
 	"repository": "https://bitbucket.org/atlassian/atlassian-frontend-mirror",
 	"author": "Atlassian Pty Ltd",
@@ -72,7 +72,7 @@
 		"@atlaskit/css": "^0.15.0",
 		"@atlaskit/ds-lib": "^5.2.0",
 		"@atlaskit/icon": "^29.0.0",
-		"@atlaskit/layering": "^3.3.0",
+		"@atlaskit/layering": "^3.4.0",
 		"@atlaskit/logo": "^19.9.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/popup": "^4.6.0",
@@ -81,7 +81,7 @@
 		"@atlaskit/pragmatic-drag-and-drop-react-drop-indicator": "^3.2.0",
 		"@atlaskit/primitives": "^16.1.0",
 		"@atlaskit/tokens": "^8.0.0",
-		"@atlaskit/tooltip": "^20.9.0",
+		"@atlaskit/tooltip": "^20.10.0",
 		"@atlaskit/visually-hidden": "^3.0.0",
 		"@babel/runtime": "^7.0.0",
 		"@compiled/react": "^0.18.6",
@@ -116,7 +116,7 @@
 		"@atlaskit/skeleton": "^2.1.0",
 		"@atlaskit/textfield": "^8.1.0",
 		"@atlassian/feature-flags-test-utils": "^1.0.0",
-		"@atlassian/gemini": "^1.20.0",
+		"@atlassian/gemini": "^1.21.0",
 		"@atlassian/search-dialog": "^9.9.0",
 		"@atlassian/ssr-tests": "workspace:^",
 		"@atlassian/test-utils": "^1.0.0",

package/side-nav-items/drag-and-drop/drag-handle/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "@atlaskit/navigation-system/side-nav-items/drag-and-drop/drag-handle",
+  "main": "../../../dist/cjs/entry-points/side-nav-items/drag-and-drop/drag-handle.js",
+  "module": "../../../dist/esm/entry-points/side-nav-items/drag-and-drop/drag-handle.js",
+  "module:es2019": "../../../dist/es2019/entry-points/side-nav-items/drag-and-drop/drag-handle.js",
+  "sideEffects": [
+    "*.compiled.css"
+  ],
+  "types": "../../../dist/types/entry-points/side-nav-items/drag-and-drop/drag-handle.d.ts",
+  "typesVersions": {
+    ">=4.5 <5.9": {
+      "*": [
+        "../../../dist/types-ts4.5/entry-points/side-nav-items/drag-and-drop/drag-handle.d.ts"
+      ]
+    }
+  }
+}