@atlaskit/navigation-system 5.17.0 → 5.18.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @atlassian/navigation-system
 
+## 5.18.0
+
+### Minor Changes
+
+- [`67509a09876ad`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/67509a09876ad) -
+  The side nav will no longer peek when a popup is open in `TopNavStart`, such as the app switcher.
+
+  This change is behind the `platform_dst_nav4_side_nav_resize_tooltip_feedback` and
+  `platform-dst-side-nav-layering-fixes` feature flags, when full height sidebar is enabled.
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 5.17.0
 
 ### Minor Changes

package/dist/cjs/ui/page-layout/constants.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.topNavMountedVar = exports.sideNavVar = exports.sideNavPanelSplitterId = exports.sideNavLiveWidthVar = exports.sideNavContentScrollTimelineVar = exports.panelVar = exports.panelPanelSplitterId = exports.openLayerObserverTopNavNamespace = exports.openLayerObserverSideNavNamespace = exports.localSlotLayers = exports.contentInsetBlockStart = exports.contentHeightWhenFixed = exports.bannerMountedVar = exports.asideVar = exports.asidePanelSplitterId = exports.UNSAFE_topNavVar = exports.UNSAFE_sideNavLayoutVar = exports.UNSAFE_panelLayoutVar = exports.UNSAFE_bannerVar = exports.UNSAFE_asideLayoutVar = exports.UNSAFE_MAIN_INLINE_START_FOR_LEGACY_PAGES_ONLY = exports.UNSAFE_MAIN_INLINE_END_FOR_LEGACY_PAGES_ONLY = exports.UNSAFE_MAIN_BLOCK_START_FOR_LEGACY_PAGES_ONLY = void 0;
+exports.topNavMountedVar = exports.sideNavVar = exports.sideNavPanelSplitterId = exports.sideNavLiveWidthVar = exports.sideNavContentScrollTimelineVar = exports.panelVar = exports.panelPanelSplitterId = exports.openLayerObserverTopNavStartNamespace = exports.openLayerObserverTopNavMiddleNamespace = exports.openLayerObserverTopNavEndNamespace = exports.openLayerObserverSideNavNamespace = exports.localSlotLayers = exports.contentInsetBlockStart = exports.contentHeightWhenFixed = exports.bannerMountedVar = exports.asideVar = exports.asidePanelSplitterId = exports.UNSAFE_topNavVar = exports.UNSAFE_sideNavLayoutVar = exports.UNSAFE_panelLayoutVar = exports.UNSAFE_bannerVar = exports.UNSAFE_asideLayoutVar = exports.UNSAFE_MAIN_INLINE_START_FOR_LEGACY_PAGES_ONLY = exports.UNSAFE_MAIN_INLINE_END_FOR_LEGACY_PAGES_ONLY = exports.UNSAFE_MAIN_BLOCK_START_FOR_LEGACY_PAGES_ONLY = void 0;
 /**
  * These variables are shared across the different page layout slots.
  * This violates the [UI styling standard](https://atlassian.design/components/eslint-plugin-ui-styling-standard/no-imported-style-values/usage).
@@ -66,7 +66,13 @@ var localSlotLayers = exports.localSlotLayers = {
   panelSmallViewports: 1
 };
 var openLayerObserverSideNavNamespace = exports.openLayerObserverSideNavNamespace = 'side-nav';
-var openLayerObserverTopNavNamespace = exports.openLayerObserverTopNavNamespace = 'top-nav';
+// We have separate OpenLayerObserver namespaces for each top nav layout area, instead of a single namespace for the entire top nav,
+// as we need to know if there are open layers in TopNavStart specifically to prevent the side nav from peeking.
+// The OpenLayerObserver doesn't support nested namespaces. We could update it, but for now it's simple enough to just have separate
+// namespaces.
+var openLayerObserverTopNavStartNamespace = exports.openLayerObserverTopNavStartNamespace = 'top-nav-start';
+var openLayerObserverTopNavMiddleNamespace = exports.openLayerObserverTopNavMiddleNamespace = 'top-nav-middle';
+var openLayerObserverTopNavEndNamespace = exports.openLayerObserverTopNavEndNamespace = 'top-nav-end';
 
 /**
  * CSS scroll timeline variable for the side nav content scroll indicator.

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

@@ -6,17 +6,30 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.SideNavPanelSplitter = void 0;
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
 var _tinyInvariant = _interopRequireDefault(require("tiny-invariant"));
-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 _constants = require("../constants");
 var _useToggleSideNav = require("../side-nav/use-toggle-side-nav");
+var _useOpenLayerCount = require("../use-open-layer-count");
 var _context = require("./context");
 var _panelSplitter = require("./panel-splitter");
 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); }
+/**
+ * Namespaces to check for open layers that would interfere with the panel splitter.
+ *
+ * Placed outside the component for stability, as the list is used as an effect dependency.
+ */
+var openLayerNamespacesToCheck = [
+// We don't technically need to check the side nav for open layers, as they wouldn't overlay the
+// panel splitter, as it sits within the same stacking context as the side nav. For consistency however,
+// we check it as well.
+_constants.openLayerObserverSideNavNamespace,
+// When there is an open layer in the top nav, the top nav is given a higher z-index than the side nav.
+// This means the part of the side nav panel splitter that was sitting above the top nav will no longer
+// be interactive (as it is now behind the top nav). So, we need to disable the entire panel splitter.
+_constants.openLayerObserverTopNavStartNamespace, _constants.openLayerObserverTopNavMiddleNamespace, _constants.openLayerObserverTopNavEndNamespace];
 /**
  * _SideNavPanelSplitter_
  *
@@ -48,54 +61,11 @@ var SideNavPanelSplitter = exports.SideNavPanelSplitter = function SideNavPanelS
   // The logic and state for disabling the panel splitter when there are open popups
   // in the side nav or top nav is being placed here, instead of in `SideNav`, to prevent
   // re-rendering the side nav anytime the number of open popups changes.
-  var _useState = (0, _react.useState)(true),
-    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    isEnabled = _useState2[0],
-    setIsEnabled = _useState2[1];
-  var openLayerObserver = (0, _openLayerObserver.useOpenLayerObserver)();
-  (0, _react.useEffect)(function () {
-    if (!openLayerObserver || !isFhsEnabled || !(0, _platformFeatureFlags.fg)('platform-dst-side-nav-layering-fixes')) {
-      return;
-    }
-    function checkAndSetState() {
-      if (!openLayerObserver) {
-        return;
-      }
-
-      // We don't technically need to check the side nav for open layers, as they wouldn't overlay the
-      // panel splitter, as it sits within the same stacking context as the side nav. For consistency however,
-      // we check it as well.
-      var openPopupsInSideNav = openLayerObserver.getCount({
-        namespace: _constants.openLayerObserverSideNavNamespace,
-        type: 'popup'
-      });
-
-      // When there is an open layer in the top nav, the top nav is given a higher z-index than the side nav.
-      // This means the part of the side nav panel splitter that was sitting above the top nav will no longer
-      // be interactive (as it is now behind the top nav). So, we need to disable the entire panel splitter.
-      var openPopupsInTopNav = openLayerObserver.getCount({
-        namespace: _constants.openLayerObserverTopNavNamespace,
-        type: 'popup'
-      });
-      setIsEnabled(openPopupsInSideNav + openPopupsInTopNav === 0);
-    }
-
-    // Initial check, in case the app has loaded with an open popup.
-    checkAndSetState();
-
-    // Creating separate listeners for each namespace, to avoid running them when layers in other parts of the app change.
-    var cleanupSideNavListener = openLayerObserver.onChange(checkAndSetState, {
-      namespace: _constants.openLayerObserverSideNavNamespace
-    });
-    var cleanupTopNavListener = openLayerObserver.onChange(checkAndSetState, {
-      namespace: _constants.openLayerObserverTopNavNamespace
-    });
-    return function cleanup() {
-      cleanupSideNavListener();
-      cleanupTopNavListener();
-    };
-  }, [isFhsEnabled, openLayerObserver]);
-  if (!isEnabled && isFhsEnabled && (0, _platformFeatureFlags.fg)('platform-dst-side-nav-layering-fixes')) {
+  var hasOpenLayers = (0, _useOpenLayerCount.useHasOpenLayers)({
+    namespaces: openLayerNamespacesToCheck,
+    type: 'popup'
+  });
+  if (hasOpenLayers && isFhsEnabled && (0, _platformFeatureFlags.fg)('platform-dst-side-nav-layering-fixes')) {
     return null;
   }
   return /*#__PURE__*/_react.default.createElement(_context.OnDoubleClickContext.Provider, {

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

@@ -220,6 +220,13 @@ function SideNavInternal(_ref) {
       }
     }
     function open() {
+      // Prevent the flyout from being opened if there are any open layers in the top nav start
+      if (openLayerObserver && openLayerObserver.getCount({
+        namespace: 'top-nav-start',
+        type: 'popup'
+      }) > 0 && (0, _platformFeatureFlags.fg)('platform_dst_nav4_side_nav_resize_tooltip_feedback')) {
+        return;
+      }
       var prevFlyoutState = flyoutStateRef.current;
       tryAbortPendingClose();
       flyoutStateRef.current = {

package/dist/cjs/ui/page-layout/top-nav/top-nav-end.js

@@ -15,6 +15,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _react2 = require("@compiled/react");
 var _useLayoutEffect = require("@atlaskit/ds-lib/use-layout-effect");
 var _showMoreHorizontal = _interopRequireDefault(require("@atlaskit/icon/core/show-more-horizontal"));
+var _openLayerObserver = require("@atlaskit/layering/experimental/open-layer-observer");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _popup = _interopRequireDefault(require("@atlaskit/popup"));
 var _compiled = require("@atlaskit/primitives/compiled");
@@ -22,6 +23,7 @@ var _list = require("../../../components/list");
 var _useIsFhsEnabled = require("../../fhs-rollout/use-is-fhs-enabled");
 var _hasCustomThemeContext = require("../../top-nav-items/themed/has-custom-theme-context");
 var _migration = require("../../top-nav-items/themed/migration");
+var _constants = require("../constants");
 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 containerStyles = {
   root: "_yyhy11wp _1e0c1txw _1bahh9n0 _1ul9zwfg _1d2y1ris _glte1ris _15ri1mjv _1gs5usvi _ndwch9n0",
@@ -34,6 +36,12 @@ var listStyles = {
   hideOnSmallViewport: "_1e0cglyw _181n1txw",
   popupContainer: "_1yt4u2gc"
 };
+function OpenLayerObserverNamespaceProviderBehindFG(_ref) {
+  var children = _ref.children;
+  return (0, _platformFeatureFlags.fg)('platform-dst-side-nav-layering-fixes') ? /*#__PURE__*/_react.default.createElement(_openLayerObserver.OpenLayerObserverNamespaceProvider, {
+    namespace: _constants.openLayerObserverTopNavEndNamespace
+  }, children) : children;
+}
 
 /**
  * __TopNavEnd__
@@ -43,12 +51,12 @@ var listStyles = {
  * On small viewports, the children will be placed inside a popup, and a button will be rendered to open the popup.
  * This is to prevent the actions from overflowing the top navigation.
  */
-function TopNavEnd(_ref) {
-  var children = _ref.children,
-    _ref$label = _ref.label,
-    label = _ref$label === void 0 ? 'Actions' : _ref$label,
-    _ref$showMoreButtonLa = _ref.showMoreButtonLabel,
-    showMoreButtonLabel = _ref$showMoreButtonLa === void 0 ? 'Show more' : _ref$showMoreButtonLa;
+function TopNavEnd(_ref2) {
+  var children = _ref2.children,
+    _ref2$label = _ref2.label,
+    label = _ref2$label === void 0 ? 'Actions' : _ref2$label,
+    _ref2$showMoreButtonL = _ref2.showMoreButtonLabel,
+    showMoreButtonLabel = _ref2$showMoreButtonL === void 0 ? 'Show more' : _ref2$showMoreButtonL;
   var isFhsEnabled = (0, _useIsFhsEnabled.useIsFhsEnabled)();
   var _useState = (0, _react.useState)(false),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
@@ -87,7 +95,7 @@ function TopNavEnd(_ref) {
         value: false
       }, /*#__PURE__*/_react.default.createElement(_list.List, {
         xcss: (0, _react2.cx)(listStyles.root, listStyles.popupContainer)
-      }, children));
+      }, /*#__PURE__*/_react.default.createElement(OpenLayerObserverNamespaceProviderBehindFG, null, children)));
     },
     trigger: function trigger(triggerProps) {
       return /*#__PURE__*/_react.default.createElement(_migration.IconButton, (0, _extends2.default)({}, triggerProps, {
@@ -102,5 +110,5 @@ function TopNavEnd(_ref) {
     }
   }) : /*#__PURE__*/_react.default.createElement(_list.List, {
     xcss: (0, _react2.cx)(listStyles.root, listStyles.hideOnSmallViewport)
-  }, children));
+  }, /*#__PURE__*/_react.default.createElement(OpenLayerObserverNamespaceProviderBehindFG, null, children)));
 }

package/dist/cjs/ui/page-layout/top-nav/top-nav-middle.js

@@ -9,8 +9,10 @@ exports.TopNavMiddle = TopNavMiddle;
 require("./top-nav-middle.compiled.css");
 var _runtime = require("@compiled/react/runtime");
 var _react = _interopRequireDefault(require("react"));
+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 _constants = require("../constants");
 var styles = {
   root: "_zulpu2gc _yyhycs5v _1bsb1osq _4cvr1h6o _1e0c1txw _1bahh9n0 _181n11p5 _1j8b15b0 _lagd1bp4 _1t4c1ris _12e8h9n0",
   fullHeightSidebar: "_lcxv1wug"
@@ -29,5 +31,7 @@ function TopNavMiddle(_ref) {
   var isFhsEnabled = (0, _useIsFhsEnabled.useIsFhsEnabled)();
   return /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _runtime.ax)([styles.root, isFhsEnabled && !(0, _platformFeatureFlags.fg)('platform-dst-side-nav-layering-fixes') && styles.fullHeightSidebar])
-  }, children);
+  }, (0, _platformFeatureFlags.fg)('platform-dst-side-nav-layering-fixes') ? /*#__PURE__*/_react.default.createElement(_openLayerObserver.OpenLayerObserverNamespaceProvider, {
+    namespace: _constants.openLayerObserverTopNavMiddleNamespace
+  }, children) : children);
 }

package/dist/cjs/ui/page-layout/top-nav/top-nav-start.js

@@ -12,6 +12,7 @@ var _runtime = require("@compiled/react/runtime");
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
 var _useStableRef = _interopRequireDefault(require("@atlaskit/ds-lib/use-stable-ref"));
+var _openLayerObserver = require("@atlaskit/layering/experimental/open-layer-observer");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _compiled = require("@atlaskit/primitives/compiled");
 var _topNavStartContext = require("../../../context/top-nav-start/top-nav-start-context");
@@ -153,7 +154,9 @@ var TopNavStartInnerFHS = /*#__PURE__*/(0, _react.forwardRef)(function TopNavSta
     ref: ref,
     "data-testid": testId,
     className: (0, _runtime.ax)([innerStyles.root, !(0, _platformFeatureFlags.fg)('platform-dst-side-nav-layering-fixes') && innerStyles.fullHeightSidebar, (0, _platformFeatureFlags.fg)('team25-eu-jira-logo-updates-csm-jsm') && innerStyles.jiraProductLogoUpdate, isExpandedOnDesktop && innerStyles.fullHeightSidebarExpanded])
-  }, children));
+  }, (0, _platformFeatureFlags.fg)('platform-dst-side-nav-layering-fixes') ? /*#__PURE__*/_react.default.createElement(_openLayerObserver.OpenLayerObserverNamespaceProvider, {
+    namespace: _constants.openLayerObserverTopNavStartNamespace
+  }, children) : children));
 });
 
 /**

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

@@ -11,9 +11,7 @@ require("./top-nav.compiled.css");
 var _react = _interopRequireWildcard(require("react"));
 var React = _react;
 var _runtime = require("@compiled/react/runtime");
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _openLayerObserver = require("@atlaskit/layering/experimental/open-layer-observer");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _skipLinksContext = require("../../../context/skip-links/skip-links-context");
 var _useIsFhsEnabled = require("../../fhs-rollout/use-is-fhs-enabled");
@@ -24,6 +22,7 @@ var _hoistSlotSizesContext = require("../hoist-slot-sizes-context");
 var _hoistUtils = require("../hoist-utils");
 var _idUtils = require("../id-utils");
 var _useSideNavVisibility2 = require("../side-nav/use-side-nav-visibility");
+var _useOpenLayerCount = require("../use-open-layer-count");
 var _excluded = ["backgroundColor"];
 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); }
 /**
@@ -52,6 +51,14 @@ var backgroundStyles = {
   sideNavExpanded: "_hyzqcs5v"
 };
 
+/**
+ * Namespaces to check for open layers within the top nav.
+ * When there is an open layer in the top nav, the top nav is given a higher z-index than the side nav.
+ *
+ * Placed outside the component for stability, as the list is used as an effect dependency.
+ */
+var topNavOpenLayerNamespaces = [_constants.openLayerObserverTopNavStartNamespace, _constants.openLayerObserverTopNavMiddleNamespace, _constants.openLayerObserverTopNavEndNamespace];
+
 /**
  * The top nav layout area. It will display at the top of the screen, below the banner if one is present.
  */
@@ -103,34 +110,10 @@ function TopNav(_ref) {
     foregroundStyle = _useMemo.foregroundStyle;
   var _useSideNavVisibility = (0, _useSideNavVisibility2.useSideNavVisibility)(),
     isExpandedOnDesktop = _useSideNavVisibility.isExpandedOnDesktop;
-  var openLayerObserver = (0, _openLayerObserver.useOpenLayerObserver)();
-  // Setting the initial state to false, as it is unlikely that the top nav would have an open popup when the app starts.
-  var _useState = (0, _react.useState)(false),
-    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    hasOpenPopup = _useState2[0],
-    setHasOpenPopup = _useState2[1];
-  (0, _react.useLayoutEffect)(function () {
-    if (!openLayerObserver || !isFhsEnabled || !(0, _platformFeatureFlags.fg)('platform-dst-side-nav-layering-fixes')) {
-      return;
-    }
-    function checkAndSetState() {
-      if (!openLayerObserver) {
-        return;
-      }
-      setHasOpenPopup(openLayerObserver.getCount({
-        namespace: _constants.openLayerObserverTopNavNamespace,
-        type: 'popup'
-      }) > 0);
-    }
-
-    // Initial check
-    checkAndSetState();
-
-    // Check again whenever number of layers in the top nav change
-    return openLayerObserver.onChange(checkAndSetState, {
-      namespace: _constants.openLayerObserverTopNavNamespace
-    });
-  }, [isFhsEnabled, openLayerObserver]);
+  var hasOpenPopup = (0, _useOpenLayerCount.useHasOpenLayers)({
+    namespaces: topNavOpenLayerNamespaces,
+    type: 'popup'
+  });
   return /*#__PURE__*/React.createElement(_hasCustomThemeContext.HasCustomThemeContext.Provider, {
     value: customTheme.isEnabled
   }, isFhsEnabled && !(0, _platformFeatureFlags.fg)('platform-dst-side-nav-layering-fixes') && /*#__PURE__*/React.createElement("div", {
@@ -163,7 +146,5 @@ function TopNav(_ref) {
     value: height
   })
   // ------ END UNSAFE STYLES ------
-  , (0, _platformFeatureFlags.fg)('platform-dst-side-nav-layering-fixes') ? /*#__PURE__*/React.createElement(_openLayerObserver.OpenLayerObserverNamespaceProvider, {
-    namespace: _constants.openLayerObserverTopNavNamespace
-  }, children) : children));
+  , children));
 }

package/dist/cjs/ui/page-layout/use-open-layer-count.js

@@ -0,0 +1,59 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useHasOpenLayers = useHasOpenLayers;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = require("react");
+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");
+/**
+ * Returns whether there are any open layers across the specified namespaces, optionally filtered by type.
+ */
+function useHasOpenLayers(_ref) {
+  var namespaces = _ref.namespaces,
+    type = _ref.type;
+  var isFhsEnabled = (0, _useIsFhsEnabled.useIsFhsEnabled)();
+  var openLayerObserver = (0, _openLayerObserver.useOpenLayerObserver)();
+  // Setting the initial state to false, as it is unlikely that there would be any open layers when the app starts.
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    hasOpenLayers = _useState2[0],
+    setHasOpenLayers = _useState2[1];
+  (0, _react.useEffect)(function () {
+    if (!openLayerObserver || !isFhsEnabled || !(0, _platformFeatureFlags.fg)('platform-dst-side-nav-layering-fixes')) {
+      return;
+    }
+    function updateState() {
+      if (!openLayerObserver) {
+        return;
+      }
+      var hasAnyOpenLayers = namespaces.some(function (namespace) {
+        return openLayerObserver.getCount({
+          namespace: namespace,
+          type: type
+        }) > 0;
+      });
+      setHasOpenLayers(hasAnyOpenLayers);
+    }
+
+    // Initial check
+    updateState();
+
+    // Subscribe to each namespace
+    var cleanups = namespaces.map(function (namespace) {
+      return openLayerObserver.onChange(updateState, {
+        namespace: namespace
+      });
+    });
+    return function cleanupHook() {
+      cleanups.forEach(function (cleanup) {
+        return cleanup();
+      });
+    };
+  }, [isFhsEnabled, openLayerObserver, namespaces, type]);
+  return hasOpenLayers;
+}

package/dist/es2019/ui/page-layout/constants.js

@@ -60,7 +60,13 @@ export const localSlotLayers = {
   panelSmallViewports: 1
 };
 export const openLayerObserverSideNavNamespace = 'side-nav';
-export const openLayerObserverTopNavNamespace = 'top-nav';
+// We have separate OpenLayerObserver namespaces for each top nav layout area, instead of a single namespace for the entire top nav,
+// as we need to know if there are open layers in TopNavStart specifically to prevent the side nav from peeking.
+// The OpenLayerObserver doesn't support nested namespaces. We could update it, but for now it's simple enough to just have separate
+// namespaces.
+export const openLayerObserverTopNavStartNamespace = 'top-nav-start';
+export const openLayerObserverTopNavMiddleNamespace = 'top-nav-middle';
+export const openLayerObserverTopNavEndNamespace = 'top-nav-end';
 
 /**
  * CSS scroll timeline variable for the side nav content scroll indicator.

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

@@ -1,12 +1,27 @@
-import React, { useContext, useEffect, useState } from 'react';
+import React, { useContext } from 'react';
 import invariant from 'tiny-invariant';
-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 { openLayerObserverSideNavNamespace, openLayerObserverTopNavNamespace, sideNavPanelSplitterId } from '../constants';
+import { openLayerObserverSideNavNamespace, openLayerObserverTopNavEndNamespace, openLayerObserverTopNavMiddleNamespace, openLayerObserverTopNavStartNamespace, sideNavPanelSplitterId } from '../constants';
 import { useToggleSideNav } from '../side-nav/use-toggle-side-nav';
+import { useHasOpenLayers } from '../use-open-layer-count';
 import { OnDoubleClickContext, PanelSplitterContext } from './context';
 import { PanelSplitter } from './panel-splitter';
+
+/**
+ * Namespaces to check for open layers that would interfere with the panel splitter.
+ *
+ * Placed outside the component for stability, as the list is used as an effect dependency.
+ */
+const openLayerNamespacesToCheck = [
+// We don't technically need to check the side nav for open layers, as they wouldn't overlay the
+// panel splitter, as it sits within the same stacking context as the side nav. For consistency however,
+// we check it as well.
+openLayerObserverSideNavNamespace,
+// When there is an open layer in the top nav, the top nav is given a higher z-index than the side nav.
+// This means the part of the side nav panel splitter that was sitting above the top nav will no longer
+// be interactive (as it is now behind the top nav). So, we need to disable the entire panel splitter.
+openLayerObserverTopNavStartNamespace, openLayerObserverTopNavMiddleNamespace, openLayerObserverTopNavEndNamespace];
 /**
  * _SideNavPanelSplitter_
  *
@@ -38,51 +53,11 @@ export const SideNavPanelSplitter = ({
   // The logic and state for disabling the panel splitter when there are open popups
   // in the side nav or top nav is being placed here, instead of in `SideNav`, to prevent
   // re-rendering the side nav anytime the number of open popups changes.
-  const [isEnabled, setIsEnabled] = useState(true);
-  const openLayerObserver = useOpenLayerObserver();
-  useEffect(() => {
-    if (!openLayerObserver || !isFhsEnabled || !fg('platform-dst-side-nav-layering-fixes')) {
-      return;
-    }
-    function checkAndSetState() {
-      if (!openLayerObserver) {
-        return;
-      }
-
-      // We don't technically need to check the side nav for open layers, as they wouldn't overlay the
-      // panel splitter, as it sits within the same stacking context as the side nav. For consistency however,
-      // we check it as well.
-      const openPopupsInSideNav = openLayerObserver.getCount({
-        namespace: openLayerObserverSideNavNamespace,
-        type: 'popup'
-      });
-
-      // When there is an open layer in the top nav, the top nav is given a higher z-index than the side nav.
-      // This means the part of the side nav panel splitter that was sitting above the top nav will no longer
-      // be interactive (as it is now behind the top nav). So, we need to disable the entire panel splitter.
-      const openPopupsInTopNav = openLayerObserver.getCount({
-        namespace: openLayerObserverTopNavNamespace,
-        type: 'popup'
-      });
-      setIsEnabled(openPopupsInSideNav + openPopupsInTopNav === 0);
-    }
-
-    // Initial check, in case the app has loaded with an open popup.
-    checkAndSetState();
-
-    // Creating separate listeners for each namespace, to avoid running them when layers in other parts of the app change.
-    const cleanupSideNavListener = openLayerObserver.onChange(checkAndSetState, {
-      namespace: openLayerObserverSideNavNamespace
-    });
-    const cleanupTopNavListener = openLayerObserver.onChange(checkAndSetState, {
-      namespace: openLayerObserverTopNavNamespace
-    });
-    return function cleanup() {
-      cleanupSideNavListener();
-      cleanupTopNavListener();
-    };
-  }, [isFhsEnabled, openLayerObserver]);
-  if (!isEnabled && isFhsEnabled && fg('platform-dst-side-nav-layering-fixes')) {
+  const hasOpenLayers = useHasOpenLayers({
+    namespaces: openLayerNamespacesToCheck,
+    type: 'popup'
+  });
+  if (hasOpenLayers && isFhsEnabled && fg('platform-dst-side-nav-layering-fixes')) {
     return null;
   }
   return /*#__PURE__*/React.createElement(OnDoubleClickContext.Provider, {

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

@@ -199,6 +199,13 @@ function SideNavInternal({
       }
     }
     function open() {
+      // Prevent the flyout from being opened if there are any open layers in the top nav start
+      if (openLayerObserver && openLayerObserver.getCount({
+        namespace: 'top-nav-start',
+        type: 'popup'
+      }) > 0 && fg('platform_dst_nav4_side_nav_resize_tooltip_feedback')) {
+        return;
+      }
       const prevFlyoutState = flyoutStateRef.current;
       tryAbortPendingClose();
       flyoutStateRef.current = {

package/dist/es2019/ui/page-layout/top-nav/top-nav-end.js

@@ -6,6 +6,7 @@ import React, { useState } from 'react';
 import { cx } from '@compiled/react';
 import { useLayoutEffect } from '@atlaskit/ds-lib/use-layout-effect';
 import ShowMoreHorizontalIcon from '@atlaskit/icon/core/show-more-horizontal';
+import { OpenLayerObserverNamespaceProvider } from '@atlaskit/layering/experimental/open-layer-observer';
 import { fg } from '@atlaskit/platform-feature-flags';
 import Popup from '@atlaskit/popup';
 import { UNSAFE_useMediaQuery as useMediaQuery } from '@atlaskit/primitives/compiled';
@@ -13,6 +14,7 @@ import { List } from '../../../components/list';
 import { useIsFhsEnabled } from '../../fhs-rollout/use-is-fhs-enabled';
 import { HasCustomThemeContext } from '../../top-nav-items/themed/has-custom-theme-context';
 import { IconButton } from '../../top-nav-items/themed/migration';
+import { openLayerObserverTopNavEndNamespace } from '../constants';
 const containerStyles = {
   root: "_yyhy11wp _1e0c1txw _1bahh9n0 _1ul9zwfg _1d2y1ris _glte1ris _15ri1mjv _1gs5usvi _ndwch9n0",
   jiraProductLogoUpdate: "_15rip2n4",
@@ -24,6 +26,13 @@ const listStyles = {
   hideOnSmallViewport: "_1e0cglyw _181n1txw",
   popupContainer: "_1yt4u2gc"
 };
+function OpenLayerObserverNamespaceProviderBehindFG({
+  children
+}) {
+  return fg('platform-dst-side-nav-layering-fixes') ? /*#__PURE__*/React.createElement(OpenLayerObserverNamespaceProvider, {
+    namespace: openLayerObserverTopNavEndNamespace
+  }, children) : children;
+}
 
 /**
  * __TopNavEnd__
@@ -67,7 +76,7 @@ export function TopNavEnd({
       value: false
     }, /*#__PURE__*/React.createElement(List, {
       xcss: cx(listStyles.root, listStyles.popupContainer)
-    }, children)),
+    }, /*#__PURE__*/React.createElement(OpenLayerObserverNamespaceProviderBehindFG, null, children))),
     trigger: triggerProps => /*#__PURE__*/React.createElement(IconButton, _extends({}, triggerProps, {
       label: showMoreButtonLabel,
       isSelected: isOpen,
@@ -77,5 +86,5 @@ export function TopNavEnd({
     }))
   }) : /*#__PURE__*/React.createElement(List, {
     xcss: cx(listStyles.root, listStyles.hideOnSmallViewport)
-  }, children));
+  }, /*#__PURE__*/React.createElement(OpenLayerObserverNamespaceProviderBehindFG, null, children)));
 }

package/dist/es2019/ui/page-layout/top-nav/top-nav-middle.js

@@ -2,8 +2,10 @@
 import "./top-nav-middle.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React from 'react';
+import { OpenLayerObserverNamespaceProvider } from '@atlaskit/layering/experimental/open-layer-observer';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { useIsFhsEnabled } from '../../fhs-rollout/use-is-fhs-enabled';
+import { openLayerObserverTopNavMiddleNamespace } from '../constants';
 const styles = {
   root: "_zulpu2gc _yyhycs5v _1bsb1osq _4cvr1h6o _1e0c1txw _1bahh9n0 _181n11p5 _1j8b15b0 _lagd1bp4 _1t4c1ris _12e8h9n0",
   fullHeightSidebar: "_lcxv1wug"
@@ -23,5 +25,7 @@ export function TopNavMiddle({
   const isFhsEnabled = useIsFhsEnabled();
   return /*#__PURE__*/React.createElement("div", {
     className: ax([styles.root, isFhsEnabled && !fg('platform-dst-side-nav-layering-fixes') && styles.fullHeightSidebar])
-  }, children);
+  }, fg('platform-dst-side-nav-layering-fixes') ? /*#__PURE__*/React.createElement(OpenLayerObserverNamespaceProvider, {
+    namespace: openLayerObserverTopNavMiddleNamespace
+  }, children) : children);
 }

package/dist/es2019/ui/page-layout/top-nav/top-nav-start.js

@@ -3,11 +3,12 @@ import "./top-nav-start.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React, { forwardRef, useContext, useEffect, useLayoutEffect, useRef, useState } from 'react';
 import useStableRef from '@atlaskit/ds-lib/use-stable-ref';
+import { OpenLayerObserverNamespaceProvider } from '@atlaskit/layering/experimental/open-layer-observer';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { UNSAFE_useMediaQuery } from '@atlaskit/primitives/compiled';
 import { TopNavStartAttachRef } from '../../../context/top-nav-start/top-nav-start-context';
 import { useIsFhsEnabled } from '../../fhs-rollout/use-is-fhs-enabled';
-import { sideNavContentScrollTimelineVar } from '../constants';
+import { openLayerObserverTopNavStartNamespace, sideNavContentScrollTimelineVar } from '../constants';
 import { useSideNavVisibility } from '../side-nav/use-side-nav-visibility';
 import { SideNavVisibilityState } from '../side-nav/visibility-context';
 
@@ -147,7 +148,9 @@ const TopNavStartInnerFHS = /*#__PURE__*/forwardRef(function TopNavStartInnerFHS
     ref: ref,
     "data-testid": testId,
     className: ax([innerStyles.root, !fg('platform-dst-side-nav-layering-fixes') && innerStyles.fullHeightSidebar, fg('team25-eu-jira-logo-updates-csm-jsm') && innerStyles.jiraProductLogoUpdate, isExpandedOnDesktop && innerStyles.fullHeightSidebarExpanded])
-  }, children));
+  }, fg('platform-dst-side-nav-layering-fixes') ? /*#__PURE__*/React.createElement(OpenLayerObserverNamespaceProvider, {
+    namespace: openLayerObserverTopNavStartNamespace
+  }, children) : children));
 });
 
 /**

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

@@ -2,18 +2,19 @@
 import "./top-nav.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
-import { useContext, useLayoutEffect, useMemo, useState } from 'react';
-import { OpenLayerObserverNamespaceProvider, useOpenLayerObserver } from '@atlaskit/layering/experimental/open-layer-observer';
+import { useContext, useMemo } from 'react';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { useSkipLink } from '../../../context/skip-links/skip-links-context';
 import { useIsFhsEnabled } from '../../fhs-rollout/use-is-fhs-enabled';
 import { HasCustomThemeContext } from '../../top-nav-items/themed/has-custom-theme-context';
 import { useCustomTheme } from '../../top-nav-items/themed/use-custom-theme';
-import { bannerMountedVar, localSlotLayers, openLayerObserverTopNavNamespace, sideNavLiveWidthVar, topNavMountedVar, UNSAFE_topNavVar } from '../constants';
+import { bannerMountedVar, localSlotLayers, openLayerObserverTopNavEndNamespace, openLayerObserverTopNavMiddleNamespace, openLayerObserverTopNavStartNamespace, sideNavLiveWidthVar, topNavMountedVar, UNSAFE_topNavVar } from '../constants';
 import { DangerouslyHoistSlotSizes } from '../hoist-slot-sizes-context';
 import { DangerouslyHoistCssVarToDocumentRoot, HoistCssVarToLocalGrid } from '../hoist-utils';
 import { useLayoutId } from '../id-utils';
 import { useSideNavVisibility } from '../side-nav/use-side-nav-visibility';
+import { useHasOpenLayers } from '../use-open-layer-count';
+
 /**
  * Styles for the container for the top nav items.
  *
@@ -40,6 +41,14 @@ const backgroundStyles = {
   sideNavExpanded: "_hyzqcs5v"
 };
 
+/**
+ * Namespaces to check for open layers within the top nav.
+ * When there is an open layer in the top nav, the top nav is given a higher z-index than the side nav.
+ *
+ * Placed outside the component for stability, as the list is used as an effect dependency.
+ */
+const topNavOpenLayerNamespaces = [openLayerObserverTopNavStartNamespace, openLayerObserverTopNavMiddleNamespace, openLayerObserverTopNavEndNamespace];
+
 /**
  * The top nav layout area. It will display at the top of the screen, below the banner if one is present.
  */
@@ -93,31 +102,10 @@ export function TopNav({
   const {
     isExpandedOnDesktop
   } = useSideNavVisibility();
-  const openLayerObserver = useOpenLayerObserver();
-  // Setting the initial state to false, as it is unlikely that the top nav would have an open popup when the app starts.
-  const [hasOpenPopup, setHasOpenPopup] = useState(false);
-  useLayoutEffect(() => {
-    if (!openLayerObserver || !isFhsEnabled || !fg('platform-dst-side-nav-layering-fixes')) {
-      return;
-    }
-    function checkAndSetState() {
-      if (!openLayerObserver) {
-        return;
-      }
-      setHasOpenPopup(openLayerObserver.getCount({
-        namespace: openLayerObserverTopNavNamespace,
-        type: 'popup'
-      }) > 0);
-    }
-
-    // Initial check
-    checkAndSetState();
-
-    // Check again whenever number of layers in the top nav change
-    return openLayerObserver.onChange(checkAndSetState, {
-      namespace: openLayerObserverTopNavNamespace
-    });
-  }, [isFhsEnabled, openLayerObserver]);
+  const hasOpenPopup = useHasOpenLayers({
+    namespaces: topNavOpenLayerNamespaces,
+    type: 'popup'
+  });
   return /*#__PURE__*/React.createElement(HasCustomThemeContext.Provider, {
     value: customTheme.isEnabled
   }, isFhsEnabled && !fg('platform-dst-side-nav-layering-fixes') && /*#__PURE__*/React.createElement("div", {
@@ -150,7 +138,5 @@ export function TopNav({
     value: height
   })
   // ------ END UNSAFE STYLES ------
-  , fg('platform-dst-side-nav-layering-fixes') ? /*#__PURE__*/React.createElement(OpenLayerObserverNamespaceProvider, {
-    namespace: openLayerObserverTopNavNamespace
-  }, children) : children));
+  , children));
 }

package/dist/es2019/ui/page-layout/use-open-layer-count.js

@@ -0,0 +1,44 @@
+import { useEffect, useState } from 'react';
+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';
+
+/**
+ * Returns whether there are any open layers across the specified namespaces, optionally filtered by type.
+ */
+export function useHasOpenLayers({
+  namespaces,
+  type
+}) {
+  const isFhsEnabled = useIsFhsEnabled();
+  const openLayerObserver = useOpenLayerObserver();
+  // Setting the initial state to false, as it is unlikely that there would be any open layers when the app starts.
+  const [hasOpenLayers, setHasOpenLayers] = useState(false);
+  useEffect(() => {
+    if (!openLayerObserver || !isFhsEnabled || !fg('platform-dst-side-nav-layering-fixes')) {
+      return;
+    }
+    function updateState() {
+      if (!openLayerObserver) {
+        return;
+      }
+      const hasAnyOpenLayers = namespaces.some(namespace => openLayerObserver.getCount({
+        namespace,
+        type
+      }) > 0);
+      setHasOpenLayers(hasAnyOpenLayers);
+    }
+
+    // Initial check
+    updateState();
+
+    // Subscribe to each namespace
+    const cleanups = namespaces.map(namespace => openLayerObserver.onChange(updateState, {
+      namespace
+    }));
+    return function cleanupHook() {
+      cleanups.forEach(cleanup => cleanup());
+    };
+  }, [isFhsEnabled, openLayerObserver, namespaces, type]);
+  return hasOpenLayers;
+}

package/dist/esm/ui/page-layout/constants.js

@@ -60,7 +60,13 @@ export var localSlotLayers = {
   panelSmallViewports: 1
 };
 export var openLayerObserverSideNavNamespace = 'side-nav';
-export var openLayerObserverTopNavNamespace = 'top-nav';
+// We have separate OpenLayerObserver namespaces for each top nav layout area, instead of a single namespace for the entire top nav,
+// as we need to know if there are open layers in TopNavStart specifically to prevent the side nav from peeking.
+// The OpenLayerObserver doesn't support nested namespaces. We could update it, but for now it's simple enough to just have separate
+// namespaces.
+export var openLayerObserverTopNavStartNamespace = 'top-nav-start';
+export var openLayerObserverTopNavMiddleNamespace = 'top-nav-middle';
+export var openLayerObserverTopNavEndNamespace = 'top-nav-end';
 
 /**
  * CSS scroll timeline variable for the side nav content scroll indicator.

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

@@ -1,13 +1,27 @@
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import React, { useContext, useEffect, useState } from 'react';
+import React, { useContext } from 'react';
 import invariant from 'tiny-invariant';
-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 { openLayerObserverSideNavNamespace, openLayerObserverTopNavNamespace, sideNavPanelSplitterId } from '../constants';
+import { openLayerObserverSideNavNamespace, openLayerObserverTopNavEndNamespace, openLayerObserverTopNavMiddleNamespace, openLayerObserverTopNavStartNamespace, sideNavPanelSplitterId } from '../constants';
 import { useToggleSideNav } from '../side-nav/use-toggle-side-nav';
+import { useHasOpenLayers } from '../use-open-layer-count';
 import { OnDoubleClickContext, PanelSplitterContext } from './context';
 import { PanelSplitter } from './panel-splitter';
+
+/**
+ * Namespaces to check for open layers that would interfere with the panel splitter.
+ *
+ * Placed outside the component for stability, as the list is used as an effect dependency.
+ */
+var openLayerNamespacesToCheck = [
+// We don't technically need to check the side nav for open layers, as they wouldn't overlay the
+// panel splitter, as it sits within the same stacking context as the side nav. For consistency however,
+// we check it as well.
+openLayerObserverSideNavNamespace,
+// When there is an open layer in the top nav, the top nav is given a higher z-index than the side nav.
+// This means the part of the side nav panel splitter that was sitting above the top nav will no longer
+// be interactive (as it is now behind the top nav). So, we need to disable the entire panel splitter.
+openLayerObserverTopNavStartNamespace, openLayerObserverTopNavMiddleNamespace, openLayerObserverTopNavEndNamespace];
 /**
  * _SideNavPanelSplitter_
  *
@@ -39,54 +53,11 @@ export var SideNavPanelSplitter = function SideNavPanelSplitter(_ref) {
   // The logic and state for disabling the panel splitter when there are open popups
   // in the side nav or top nav is being placed here, instead of in `SideNav`, to prevent
   // re-rendering the side nav anytime the number of open popups changes.
-  var _useState = useState(true),
-    _useState2 = _slicedToArray(_useState, 2),
-    isEnabled = _useState2[0],
-    setIsEnabled = _useState2[1];
-  var openLayerObserver = useOpenLayerObserver();
-  useEffect(function () {
-    if (!openLayerObserver || !isFhsEnabled || !fg('platform-dst-side-nav-layering-fixes')) {
-      return;
-    }
-    function checkAndSetState() {
-      if (!openLayerObserver) {
-        return;
-      }
-
-      // We don't technically need to check the side nav for open layers, as they wouldn't overlay the
-      // panel splitter, as it sits within the same stacking context as the side nav. For consistency however,
-      // we check it as well.
-      var openPopupsInSideNav = openLayerObserver.getCount({
-        namespace: openLayerObserverSideNavNamespace,
-        type: 'popup'
-      });
-
-      // When there is an open layer in the top nav, the top nav is given a higher z-index than the side nav.
-      // This means the part of the side nav panel splitter that was sitting above the top nav will no longer
-      // be interactive (as it is now behind the top nav). So, we need to disable the entire panel splitter.
-      var openPopupsInTopNav = openLayerObserver.getCount({
-        namespace: openLayerObserverTopNavNamespace,
-        type: 'popup'
-      });
-      setIsEnabled(openPopupsInSideNav + openPopupsInTopNav === 0);
-    }
-
-    // Initial check, in case the app has loaded with an open popup.
-    checkAndSetState();
-
-    // Creating separate listeners for each namespace, to avoid running them when layers in other parts of the app change.
-    var cleanupSideNavListener = openLayerObserver.onChange(checkAndSetState, {
-      namespace: openLayerObserverSideNavNamespace
-    });
-    var cleanupTopNavListener = openLayerObserver.onChange(checkAndSetState, {
-      namespace: openLayerObserverTopNavNamespace
-    });
-    return function cleanup() {
-      cleanupSideNavListener();
-      cleanupTopNavListener();
-    };
-  }, [isFhsEnabled, openLayerObserver]);
-  if (!isEnabled && isFhsEnabled && fg('platform-dst-side-nav-layering-fixes')) {
+  var hasOpenLayers = useHasOpenLayers({
+    namespaces: openLayerNamespacesToCheck,
+    type: 'popup'
+  });
+  if (hasOpenLayers && isFhsEnabled && fg('platform-dst-side-nav-layering-fixes')) {
     return null;
   }
   return /*#__PURE__*/React.createElement(OnDoubleClickContext.Provider, {

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

@@ -210,6 +210,13 @@ function SideNavInternal(_ref) {
       }
     }
     function open() {
+      // Prevent the flyout from being opened if there are any open layers in the top nav start
+      if (openLayerObserver && openLayerObserver.getCount({
+        namespace: 'top-nav-start',
+        type: 'popup'
+      }) > 0 && fg('platform_dst_nav4_side_nav_resize_tooltip_feedback')) {
+        return;
+      }
       var prevFlyoutState = flyoutStateRef.current;
       tryAbortPendingClose();
       flyoutStateRef.current = {

package/dist/esm/ui/page-layout/top-nav/top-nav-end.js

@@ -7,6 +7,7 @@ import React, { useState } from 'react';
 import { cx } from '@compiled/react';
 import { useLayoutEffect } from '@atlaskit/ds-lib/use-layout-effect';
 import ShowMoreHorizontalIcon from '@atlaskit/icon/core/show-more-horizontal';
+import { OpenLayerObserverNamespaceProvider } from '@atlaskit/layering/experimental/open-layer-observer';
 import { fg } from '@atlaskit/platform-feature-flags';
 import Popup from '@atlaskit/popup';
 import { UNSAFE_useMediaQuery as useMediaQuery } from '@atlaskit/primitives/compiled';
@@ -14,6 +15,7 @@ import { List } from '../../../components/list';
 import { useIsFhsEnabled } from '../../fhs-rollout/use-is-fhs-enabled';
 import { HasCustomThemeContext } from '../../top-nav-items/themed/has-custom-theme-context';
 import { IconButton } from '../../top-nav-items/themed/migration';
+import { openLayerObserverTopNavEndNamespace } from '../constants';
 var containerStyles = {
   root: "_yyhy11wp _1e0c1txw _1bahh9n0 _1ul9zwfg _1d2y1ris _glte1ris _15ri1mjv _1gs5usvi _ndwch9n0",
   jiraProductLogoUpdate: "_15rip2n4",
@@ -25,6 +27,12 @@ var listStyles = {
   hideOnSmallViewport: "_1e0cglyw _181n1txw",
   popupContainer: "_1yt4u2gc"
 };
+function OpenLayerObserverNamespaceProviderBehindFG(_ref) {
+  var children = _ref.children;
+  return fg('platform-dst-side-nav-layering-fixes') ? /*#__PURE__*/React.createElement(OpenLayerObserverNamespaceProvider, {
+    namespace: openLayerObserverTopNavEndNamespace
+  }, children) : children;
+}
 
 /**
  * __TopNavEnd__
@@ -34,12 +42,12 @@ var listStyles = {
  * On small viewports, the children will be placed inside a popup, and a button will be rendered to open the popup.
  * This is to prevent the actions from overflowing the top navigation.
  */
-export function TopNavEnd(_ref) {
-  var children = _ref.children,
-    _ref$label = _ref.label,
-    label = _ref$label === void 0 ? 'Actions' : _ref$label,
-    _ref$showMoreButtonLa = _ref.showMoreButtonLabel,
-    showMoreButtonLabel = _ref$showMoreButtonLa === void 0 ? 'Show more' : _ref$showMoreButtonLa;
+export function TopNavEnd(_ref2) {
+  var children = _ref2.children,
+    _ref2$label = _ref2.label,
+    label = _ref2$label === void 0 ? 'Actions' : _ref2$label,
+    _ref2$showMoreButtonL = _ref2.showMoreButtonLabel,
+    showMoreButtonLabel = _ref2$showMoreButtonL === void 0 ? 'Show more' : _ref2$showMoreButtonL;
   var isFhsEnabled = useIsFhsEnabled();
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
@@ -78,7 +86,7 @@ export function TopNavEnd(_ref) {
         value: false
       }, /*#__PURE__*/React.createElement(List, {
         xcss: cx(listStyles.root, listStyles.popupContainer)
-      }, children));
+      }, /*#__PURE__*/React.createElement(OpenLayerObserverNamespaceProviderBehindFG, null, children)));
     },
     trigger: function trigger(triggerProps) {
       return /*#__PURE__*/React.createElement(IconButton, _extends({}, triggerProps, {
@@ -93,5 +101,5 @@ export function TopNavEnd(_ref) {
     }
   }) : /*#__PURE__*/React.createElement(List, {
     xcss: cx(listStyles.root, listStyles.hideOnSmallViewport)
-  }, children));
+  }, /*#__PURE__*/React.createElement(OpenLayerObserverNamespaceProviderBehindFG, null, children)));
 }

package/dist/esm/ui/page-layout/top-nav/top-nav-middle.js

@@ -2,8 +2,10 @@
 import "./top-nav-middle.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React from 'react';
+import { OpenLayerObserverNamespaceProvider } from '@atlaskit/layering/experimental/open-layer-observer';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { useIsFhsEnabled } from '../../fhs-rollout/use-is-fhs-enabled';
+import { openLayerObserverTopNavMiddleNamespace } from '../constants';
 var styles = {
   root: "_zulpu2gc _yyhycs5v _1bsb1osq _4cvr1h6o _1e0c1txw _1bahh9n0 _181n11p5 _1j8b15b0 _lagd1bp4 _1t4c1ris _12e8h9n0",
   fullHeightSidebar: "_lcxv1wug"
@@ -22,5 +24,7 @@ export function TopNavMiddle(_ref) {
   var isFhsEnabled = useIsFhsEnabled();
   return /*#__PURE__*/React.createElement("div", {
     className: ax([styles.root, isFhsEnabled && !fg('platform-dst-side-nav-layering-fixes') && styles.fullHeightSidebar])
-  }, children);
+  }, fg('platform-dst-side-nav-layering-fixes') ? /*#__PURE__*/React.createElement(OpenLayerObserverNamespaceProvider, {
+    namespace: openLayerObserverTopNavMiddleNamespace
+  }, children) : children);
 }

package/dist/esm/ui/page-layout/top-nav/top-nav-start.js

@@ -4,11 +4,12 @@ import "./top-nav-start.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React, { forwardRef, useContext, useEffect, useLayoutEffect, useRef, useState } from 'react';
 import useStableRef from '@atlaskit/ds-lib/use-stable-ref';
+import { OpenLayerObserverNamespaceProvider } from '@atlaskit/layering/experimental/open-layer-observer';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { UNSAFE_useMediaQuery } from '@atlaskit/primitives/compiled';
 import { TopNavStartAttachRef } from '../../../context/top-nav-start/top-nav-start-context';
 import { useIsFhsEnabled } from '../../fhs-rollout/use-is-fhs-enabled';
-import { sideNavContentScrollTimelineVar } from '../constants';
+import { openLayerObserverTopNavStartNamespace, sideNavContentScrollTimelineVar } from '../constants';
 import { useSideNavVisibility } from '../side-nav/use-side-nav-visibility';
 import { SideNavVisibilityState } from '../side-nav/visibility-context';
 
@@ -145,7 +146,9 @@ var TopNavStartInnerFHS = /*#__PURE__*/forwardRef(function TopNavStartInnerFHS(_
     ref: ref,
     "data-testid": testId,
     className: ax([innerStyles.root, !fg('platform-dst-side-nav-layering-fixes') && innerStyles.fullHeightSidebar, fg('team25-eu-jira-logo-updates-csm-jsm') && innerStyles.jiraProductLogoUpdate, isExpandedOnDesktop && innerStyles.fullHeightSidebarExpanded])
-  }, children));
+  }, fg('platform-dst-side-nav-layering-fixes') ? /*#__PURE__*/React.createElement(OpenLayerObserverNamespaceProvider, {
+    namespace: openLayerObserverTopNavStartNamespace
+  }, children) : children));
 });
 
 /**

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

@@ -1,22 +1,22 @@
 /* top-nav.tsx generated by @compiled/babel-plugin v0.38.1 */
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["backgroundColor"];
 import "./top-nav.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
-import { useContext, useLayoutEffect, useMemo, useState } from 'react';
-import { OpenLayerObserverNamespaceProvider, useOpenLayerObserver } from '@atlaskit/layering/experimental/open-layer-observer';
+import { useContext, useMemo } from 'react';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { useSkipLink } from '../../../context/skip-links/skip-links-context';
 import { useIsFhsEnabled } from '../../fhs-rollout/use-is-fhs-enabled';
 import { HasCustomThemeContext } from '../../top-nav-items/themed/has-custom-theme-context';
 import { useCustomTheme } from '../../top-nav-items/themed/use-custom-theme';
-import { bannerMountedVar, localSlotLayers, openLayerObserverTopNavNamespace, sideNavLiveWidthVar, topNavMountedVar, UNSAFE_topNavVar } from '../constants';
+import { bannerMountedVar, localSlotLayers, openLayerObserverTopNavEndNamespace, openLayerObserverTopNavMiddleNamespace, openLayerObserverTopNavStartNamespace, sideNavLiveWidthVar, topNavMountedVar, UNSAFE_topNavVar } from '../constants';
 import { DangerouslyHoistSlotSizes } from '../hoist-slot-sizes-context';
 import { DangerouslyHoistCssVarToDocumentRoot, HoistCssVarToLocalGrid } from '../hoist-utils';
 import { useLayoutId } from '../id-utils';
 import { useSideNavVisibility } from '../side-nav/use-side-nav-visibility';
+import { useHasOpenLayers } from '../use-open-layer-count';
+
 /**
  * Styles for the container for the top nav items.
  *
@@ -43,6 +43,14 @@ var backgroundStyles = {
   sideNavExpanded: "_hyzqcs5v"
 };
 
+/**
+ * Namespaces to check for open layers within the top nav.
+ * When there is an open layer in the top nav, the top nav is given a higher z-index than the side nav.
+ *
+ * Placed outside the component for stability, as the list is used as an effect dependency.
+ */
+var topNavOpenLayerNamespaces = [openLayerObserverTopNavStartNamespace, openLayerObserverTopNavMiddleNamespace, openLayerObserverTopNavEndNamespace];
+
 /**
  * The top nav layout area. It will display at the top of the screen, below the banner if one is present.
  */
@@ -94,34 +102,10 @@ export function TopNav(_ref) {
     foregroundStyle = _useMemo.foregroundStyle;
   var _useSideNavVisibility = useSideNavVisibility(),
     isExpandedOnDesktop = _useSideNavVisibility.isExpandedOnDesktop;
-  var openLayerObserver = useOpenLayerObserver();
-  // Setting the initial state to false, as it is unlikely that the top nav would have an open popup when the app starts.
-  var _useState = useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    hasOpenPopup = _useState2[0],
-    setHasOpenPopup = _useState2[1];
-  useLayoutEffect(function () {
-    if (!openLayerObserver || !isFhsEnabled || !fg('platform-dst-side-nav-layering-fixes')) {
-      return;
-    }
-    function checkAndSetState() {
-      if (!openLayerObserver) {
-        return;
-      }
-      setHasOpenPopup(openLayerObserver.getCount({
-        namespace: openLayerObserverTopNavNamespace,
-        type: 'popup'
-      }) > 0);
-    }
-
-    // Initial check
-    checkAndSetState();
-
-    // Check again whenever number of layers in the top nav change
-    return openLayerObserver.onChange(checkAndSetState, {
-      namespace: openLayerObserverTopNavNamespace
-    });
-  }, [isFhsEnabled, openLayerObserver]);
+  var hasOpenPopup = useHasOpenLayers({
+    namespaces: topNavOpenLayerNamespaces,
+    type: 'popup'
+  });
   return /*#__PURE__*/React.createElement(HasCustomThemeContext.Provider, {
     value: customTheme.isEnabled
   }, isFhsEnabled && !fg('platform-dst-side-nav-layering-fixes') && /*#__PURE__*/React.createElement("div", {
@@ -154,7 +138,5 @@ export function TopNav(_ref) {
     value: height
   })
   // ------ END UNSAFE STYLES ------
-  , fg('platform-dst-side-nav-layering-fixes') ? /*#__PURE__*/React.createElement(OpenLayerObserverNamespaceProvider, {
-    namespace: openLayerObserverTopNavNamespace
-  }, children) : children));
+  , children));
 }

package/dist/esm/ui/page-layout/use-open-layer-count.js

@@ -0,0 +1,53 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import { useEffect, useState } from 'react';
+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';
+
+/**
+ * Returns whether there are any open layers across the specified namespaces, optionally filtered by type.
+ */
+export function useHasOpenLayers(_ref) {
+  var namespaces = _ref.namespaces,
+    type = _ref.type;
+  var isFhsEnabled = useIsFhsEnabled();
+  var openLayerObserver = useOpenLayerObserver();
+  // Setting the initial state to false, as it is unlikely that there would be any open layers when the app starts.
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    hasOpenLayers = _useState2[0],
+    setHasOpenLayers = _useState2[1];
+  useEffect(function () {
+    if (!openLayerObserver || !isFhsEnabled || !fg('platform-dst-side-nav-layering-fixes')) {
+      return;
+    }
+    function updateState() {
+      if (!openLayerObserver) {
+        return;
+      }
+      var hasAnyOpenLayers = namespaces.some(function (namespace) {
+        return openLayerObserver.getCount({
+          namespace: namespace,
+          type: type
+        }) > 0;
+      });
+      setHasOpenLayers(hasAnyOpenLayers);
+    }
+
+    // Initial check
+    updateState();
+
+    // Subscribe to each namespace
+    var cleanups = namespaces.map(function (namespace) {
+      return openLayerObserver.onChange(updateState, {
+        namespace: namespace
+      });
+    });
+    return function cleanupHook() {
+      cleanups.forEach(function (cleanup) {
+        return cleanup();
+      });
+    };
+  }, [isFhsEnabled, openLayerObserver, namespaces, type]);
+  return hasOpenLayers;
+}

package/dist/types/ui/page-layout/constants.d.ts

@@ -42,7 +42,9 @@ export declare const localSlotLayers: {
     panelSmallViewports: number;
 };
 export declare const openLayerObserverSideNavNamespace = "side-nav";
-export declare const openLayerObserverTopNavNamespace = "top-nav";
+export declare const openLayerObserverTopNavStartNamespace = "top-nav-start";
+export declare const openLayerObserverTopNavMiddleNamespace = "top-nav-middle";
+export declare const openLayerObserverTopNavEndNamespace = "top-nav-end";
 /**
  * CSS scroll timeline variable for the side nav content scroll indicator.
  * The scroll timeline is created in SideNavContent, and then used by TopNavStart to apply the scroll indicator line.

package/dist/types/ui/page-layout/use-open-layer-count.d.ts

@@ -0,0 +1,8 @@
+import { type LayerType } from '@atlaskit/layering/experimental/open-layer-observer';
+/**
+ * Returns whether there are any open layers across the specified namespaces, optionally filtered by type.
+ */
+export declare function useHasOpenLayers({ namespaces, type, }: {
+    namespaces: string[];
+    type?: LayerType;
+}): boolean;

package/dist/types-ts4.5/ui/page-layout/constants.d.ts

@@ -42,7 +42,9 @@ export declare const localSlotLayers: {
     panelSmallViewports: number;
 };
 export declare const openLayerObserverSideNavNamespace = "side-nav";
-export declare const openLayerObserverTopNavNamespace = "top-nav";
+export declare const openLayerObserverTopNavStartNamespace = "top-nav-start";
+export declare const openLayerObserverTopNavMiddleNamespace = "top-nav-middle";
+export declare const openLayerObserverTopNavEndNamespace = "top-nav-end";
 /**
  * CSS scroll timeline variable for the side nav content scroll indicator.
  * The scroll timeline is created in SideNavContent, and then used by TopNavStart to apply the scroll indicator line.

package/dist/types-ts4.5/ui/page-layout/use-open-layer-count.d.ts

@@ -0,0 +1,8 @@
+import { type LayerType } from '@atlaskit/layering/experimental/open-layer-observer';
+/**
+ * Returns whether there are any open layers across the specified namespaces, optionally filtered by type.
+ */
+export declare function useHasOpenLayers({ namespaces, type, }: {
+    namespaces: string[];
+    type?: LayerType;
+}): boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/navigation-system",
-	"version": "5.17.0",
+	"version": "5.18.0",
 	"description": "The latest navigation system for Atlassian apps.",
 	"repository": "https://bitbucket.org/atlassian/atlassian-frontend-mirror",
 	"author": "Atlassian Pty Ltd",
@@ -73,15 +73,15 @@
 		"@atlaskit/ds-lib": "^5.3.0",
 		"@atlaskit/heading": "^5.2.0",
 		"@atlaskit/icon": "^29.3.0",
-		"@atlaskit/layering": "^3.5.0",
+		"@atlaskit/layering": "^3.6.0",
 		"@atlaskit/logo": "^19.9.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
-		"@atlaskit/popup": "^4.11.0",
+		"@atlaskit/popup": "^4.12.0",
 		"@atlaskit/pragmatic-drag-and-drop": "^1.7.0",
 		"@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.1.0",
 		"@atlaskit/pragmatic-drag-and-drop-react-drop-indicator": "^3.2.0",
 		"@atlaskit/primitives": "^17.0.0",
-		"@atlaskit/tokens": "^9.0.0",
+		"@atlaskit/tokens": "^9.1.0",
 		"@atlaskit/tooltip": "^20.11.0",
 		"@atlaskit/visually-hidden": "^3.0.0",
 		"@babel/runtime": "^7.0.0",
@@ -148,6 +148,9 @@
 		}
 	},
 	"platform-feature-flags": {
+		"platform_dst_nav4_side_nav_resize_tooltip_feedback": {
+			"type": "boolean"
+		},
 		"platform_dst_nav4_fhs_instrumentation_1": {
 			"type": "boolean"
 		},