@atlaskit/navigation-system 5.6.0 → 5.7.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @atlassian/navigation-system
 
+## 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/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/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/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/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/navigation-system",
-	"version": "5.6.0",
+	"version": "5.7.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",
@@ -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",