@atlaskit/navigation-system 11.3.2 → 11.3.4

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @atlassian/navigation-system
 
+## 11.3.4
+
+### Patch Changes
+
+- [`0cc2e73141eea`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/0cc2e73141eea) -
+  Behind the `platform-dst-top-layer` feature gate, no longer uses `@atlaskit/layering`. Open
+  overlays are found with the `@atlaskit/top-layer/page-surface` entry points instead
+  (`platform-dst-top-layer-tooltip` for tooltip). Behaviour with the gate off is unchanged.
+- Updated dependencies
+
+## 11.3.3
+
+### Patch Changes
+
+- [`7ddc892892fda`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/7ddc892892fda) -
+  Gate panel content-switch motion behind platform-dst-motion-uplift-panel-content independently of
+  panel open/close motion, and retain the navigation panel motion boundary when its content key is
+  cleared.
+- Updated dependencies
+
 ## 11.3.2
 
 ### Patch Changes

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

@@ -31,6 +31,7 @@ var _disableNativeDragPreview = require("@atlaskit/pragmatic-drag-and-drop/utils
 var _preventUnhandled = require("@atlaskit/pragmatic-drag-and-drop/utils/prevent-unhandled");
 var _Tooltip = _interopRequireDefault(require("@atlaskit/tooltip/Tooltip"));
 var _TooltipContainer = _interopRequireDefault(require("@atlaskit/tooltip/TooltipContainer"));
+var _requestClosePopovers = require("@atlaskit/top-layer/page-surface/request-close-popovers");
 var _visuallyHidden = _interopRequireDefault(require("@atlaskit/visually-hidden/visually-hidden"));
 var _constants = require("../constants");
 var _convertResizeBoundToPixels = require("./convert-resize-bound-to-pixels");
@@ -177,7 +178,9 @@ var PortaledPanelSplitter = function PortaledPanelSplitter(_ref3) {
     _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
     rangeInputBounds = _useState4[0],
     setRangeInputBounds = _useState4[1];
-  var openLayerObserver = (0, _useOpenLayerObserver.useOpenLayerObserver)();
+  var openLayerObserver = (0, _useOpenLayerObserver.useOpenLayerObserver)({
+    isEnabled: !(0, _fg.fg)('platform-dst-top-layer')
+  });
 
   /**
    * This is a temporary workaround to enable the `SideNavPanelSplitter` component
@@ -268,6 +271,8 @@ var PortaledPanelSplitter = function PortaledPanelSplitter(_ref3) {
         onResizeStart === null || onResizeStart === void 0 || onResizeStart(resizeStartData);
 
         // Close any open layers when the user starts resizing
+        // Not gated. Top-layer tooltips (`platform-dst-top-layer-tooltip`) are not known to the observer.
+        (0, _requestClosePopovers.requestClosePopovers)();
         openLayerObserver === null || openLayerObserver === void 0 || openLayerObserver.closeLayers();
       },
       onDrag: function onDrag(_ref6) {
@@ -383,6 +388,8 @@ var PortaledPanelSplitter = function PortaledPanelSplitter(_ref3) {
         onResizeStart: function onResizeStart() {
           var _onResizeStartStableR;
           // Close any open layers when the user starts resizing with keyboard
+          // Not gated. Top-layer tooltips (`platform-dst-top-layer-tooltip`) are not known to the observer.
+          (0, _requestClosePopovers.requestClosePopovers)();
           openLayerObserver === null || openLayerObserver === void 0 || openLayerObserver.closeLayers();
           for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
             args[_key] = arguments[_key];

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

@@ -88,6 +88,13 @@ function Panel(_ref2) {
     providedId: providedId
   });
   var isMotionUpliftEnabled = (0, _fg.fg)('platform-dst-motion-uplift-panel');
+  var isContentMotionEnabled = (0, _fg.fg)('platform-dst-motion-uplift-panel-content');
+  var prevContentKeyRef = (0, _react.useRef)(contentKey);
+  (0, _react.useEffect)(function () {
+    if (isContentMotionEnabled && contentKey !== undefined) {
+      prevContentKeyRef.current = contentKey;
+    }
+  }, [contentKey, isContentMotionEnabled]);
   var defaultWidth = (0, _useSafeDefaultWidth.useSafeDefaultWidth)({
     defaultWidthProp: defaultWidthProp,
     fallbackDefaultWidth: fallbackDefaultWidth,
@@ -238,9 +245,9 @@ function Panel(_ref2) {
     position: "start"
   }, /*#__PURE__*/React.createElement("div", {
     className: (0, _runtime.ax)([styles.scrollContainer, isMotionUpliftEnabled && state === 'entering' && styles.contentEntering, isMotionUpliftEnabled && state === 'exiting' && styles.contentExiting])
-  }, isMotionUpliftEnabled && contentKey !== undefined ? /*#__PURE__*/React.createElement(_exitingPersistence.default, {
-    exitThenEnter: true
+  }, isContentMotionEnabled ? /*#__PURE__*/React.createElement(_exitingPersistence.default, {
+    exitThenEnter: contentKey !== undefined
   }, /*#__PURE__*/React.createElement(PanelContentMotion, {
-    key: contentKey
+    key: contentKey === undefined ? prevContentKeyRef.current : contentKey
   }, children)) : children)));
 }

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

@@ -77,6 +77,8 @@ function Root(_ref2) {
   var isChatPanelLayoutEnabled = (0, _fg.fg)('platform-dst-chat-panel-layout');
   var LayoutProvider = isChatPanelLayoutEnabled ? _layoutAreaSizingProvider.LayoutAreaSizingProvider : _react.default.Fragment;
   var WidthContainer = isChatPanelLayoutEnabled ? LayoutFitContainers : _react.default.Fragment;
+  // Top-layer surfaces are found through the DOM, so the observer is only needed when the gate is off.
+  var LayerObserverProvider = (0, _fg.fg)('platform-dst-top-layer') ? _react.default.Fragment : _openLayerObserver.OpenLayerObserver;
   (0, _react.useEffect)(function () {
     if (process.env.NODE_ENV !== 'production') {
       var IGNORED_ELEMENTS = ['SCRIPT', 'STYLE'];
@@ -99,7 +101,7 @@ function Root(_ref2) {
     isSideNavShortcutEnabled: isSideNavShortcutEnabled
   }, /*#__PURE__*/_react.default.createElement(_topNavStartContextProvider.TopNavStartProvider, null, /*#__PURE__*/_react.default.createElement(LayoutProvider, isChatPanelLayoutEnabled ? {
     layoutRef: ref
-  } : {}, /*#__PURE__*/_react.default.createElement(_openLayerObserver.OpenLayerObserver, null, /*#__PURE__*/_react.default.createElement(_hoistSlotSizesContext.DangerouslyHoistSlotSizes.Provider, {
+  } : {}, /*#__PURE__*/_react.default.createElement(LayerObserverProvider, null, /*#__PURE__*/_react.default.createElement(_hoistSlotSizesContext.DangerouslyHoistSlotSizes.Provider, {
     value: UNSAFE_dangerouslyHoistSlotSizes
   }, /*#__PURE__*/_react.default.createElement(_skipLinksProvider.SkipLinksProvider, {
     label: skipLinksLabel,

package/dist/cjs/ui/page-layout/side-nav/bind-open-layer-change.js

@@ -0,0 +1,56 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.bindOpenLayerChange = bindOpenLayerChange;
+var _bindEventListener = require("bind-event-listener");
+/**
+ * Calls `onChange` after any popover or dialog inside `within` opens or closes.
+ * Read the new state with `hasOpenDialogOrPopover`.
+ *
+ * `beforetoggle`, `toggle` and `close` do not bubble, so they are observed in the capture phase.
+ *
+ * `toggle` and `close` are queued tasks. When a surface closes because it unmounts,
+ * they fire after the element has left the DOM, so they never reach `within`.
+ * `beforetoggle` fires synchronously while the element is still inside `within`,
+ * so it also schedules `onChange` in a microtask, after the state has changed.
+ */
+function bindOpenLayerChange(_ref) {
+  var within = _ref.within,
+    onChange = _ref.onChange;
+  var isBound = true;
+  function listener() {
+    onChange();
+  }
+  function deferredListener() {
+    queueMicrotask(function () {
+      if (isBound) {
+        onChange();
+      }
+    });
+  }
+  var unbind = (0, _bindEventListener.bindAll)(within, [{
+    type: 'beforetoggle',
+    listener: deferredListener,
+    options: {
+      capture: true
+    }
+  }, {
+    type: 'toggle',
+    listener: listener,
+    options: {
+      capture: true
+    }
+  }, {
+    type: 'close',
+    listener: listener,
+    options: {
+      capture: true
+    }
+  }]);
+  return function cleanup() {
+    isBound = false;
+    unbind();
+  };
+}

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

@@ -23,6 +23,7 @@ var _openLayerObserverNamespaceProvider = require("@atlaskit/layering/open-layer
 var _useOpenLayerObserver = require("@atlaskit/layering/use-open-layer-observer");
 var _fg = require("@atlaskit/platform-feature-flags/fg");
 var _elementAdapter = require("@atlaskit/pragmatic-drag-and-drop/adapter/element-adapter");
+var _hasOpenDialogOrPopover = require("@atlaskit/top-layer/page-surface/has-open-dialog-or-popover");
 var _useSkipLinkInternal = require("../../../context/skip-links/use-skip-link-internal");
 var _topNavStartElement = require("../../../context/top-nav-start/top-nav-start-element");
 var _constants = require("../constants");
@@ -36,6 +37,7 @@ var _useLayoutAreaSizing2 = require("../use-layout-area-sizing");
 var _useLayoutId = require("../use-layout-id");
 var _useResizingWidthCssVarOnRootElement = require("../use-resizing-width-css-var-on-root-element");
 var _useSafeDefaultWidth = require("../use-safe-default-width");
+var _bindOpenLayerChange = require("./bind-open-layer-change");
 var _flyoutCloseDelayMs = require("./flyout-close-delay-ms");
 var _setSideNavVisibilityState = require("./set-side-nav-visibility-state");
 var _sideNavToggleButtonElement = require("./side-nav-toggle-button-element");
@@ -65,6 +67,51 @@ function getPixelCustomProperty(element, propertyName, fallback) {
  * Avoiding nesting the `@supports` at-rule inside of `@media` means Compiled can remove duplicate styles from the generated CSS.
  */
 var isFirefox = typeof navigator !== 'undefined' && navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
+var textEntryInputTypes = new Set(['text', 'search', 'email', 'url', 'tel', 'password', 'number']);
+function isEditableContent(_ref) {
+  var element = _ref.element;
+  if (element instanceof HTMLElement && typeof element.isContentEditable === 'boolean') {
+    return element.isContentEditable;
+  }
+  // Fallback for DOM implementations without `isContentEditable`.
+  var editingHost = element.closest('[contenteditable]');
+  return editingHost !== null && editingHost.getAttribute('contenteditable') !== 'false';
+}
+
+/**
+ * Returns `true` for an element that the user can type text into.
+ */
+function isTextEntryElement(_ref2) {
+  var element = _ref2.element;
+  if (element instanceof HTMLInputElement) {
+    return textEntryInputTypes.has(element.type) && !element.readOnly && !element.disabled;
+  }
+  if (element instanceof HTMLTextAreaElement) {
+    return !element.readOnly && !element.disabled;
+  }
+  return isEditableContent({
+    element: element
+  });
+}
+
+/**
+ * Used when the `platform-dst-top-layer` gate is on.
+ *
+ * The flyout stays open while a layer opened from the side nav is open, or while the user
+ * is typing in a text field inside the side nav (for example while renaming an item inline).
+ */
+function isFlyoutHeldOpen(_ref3) {
+  var nav = _ref3.nav;
+  if ((0, _hasOpenDialogOrPopover.hasOpenDialogOrPopover)({
+    within: nav
+  })) {
+    return true;
+  }
+  var activeElement = nav.ownerDocument.activeElement;
+  return activeElement !== null && nav.contains(activeElement) && isTextEntryElement({
+    element: activeElement
+  });
+}
 var styles = {
   root: "_191wglyw _t51zglyw _bfhk1bhr _16qs130s _vchhusvi _4t3ieqxy _152timx3 _kqsw1if8 _1bsb1ego _1pbycs5v _14b5hc79 _qilnk0mc _p5clia51 _4ap3vuon _scbpglyw _89fi1b6c",
   chatPanelSizing: "_1bsbhc79",
@@ -106,26 +153,26 @@ var onPeekStartDelayMs = exports.onPeekStartDelayMs = 500;
  * We need an additional component layer so we can wrap the side nav in a `OpenLayerObserver` and have access to the
  * context value.
  */
-function SideNavInternal(_ref) {
+function SideNavInternal(_ref4) {
   var _managedSizing$mode, _managedSizing$width, _sideNavState$lastTri;
-  var children = _ref.children,
-    defaultCollapsed = _ref.defaultCollapsed,
-    _ref$defaultWidth = _ref.defaultWidth,
-    defaultWidthProp = _ref$defaultWidth === void 0 ? fallbackDefaultWidth : _ref$defaultWidth,
-    _ref$minWidth = _ref.minWidth,
-    minWidth = _ref$minWidth === void 0 ? fallbackMinWidth : _ref$minWidth,
-    maxWidth = _ref.maxWidth,
-    testId = _ref.testId,
-    _ref$label = _ref.label,
-    label = _ref$label === void 0 ? 'Sidebar' : _ref$label,
-    _ref$skipLinkLabel = _ref.skipLinkLabel,
-    skipLinkLabel = _ref$skipLinkLabel === void 0 ? label : _ref$skipLinkLabel,
-    onExpand = _ref.onExpand,
-    onCollapse = _ref.onCollapse,
-    onPeekStart = _ref.onPeekStart,
-    onPeekEnd = _ref.onPeekEnd,
-    providedId = _ref.id,
-    canToggleWithShortcut = _ref.canToggleWithShortcut;
+  var children = _ref4.children,
+    defaultCollapsed = _ref4.defaultCollapsed,
+    _ref4$defaultWidth = _ref4.defaultWidth,
+    defaultWidthProp = _ref4$defaultWidth === void 0 ? fallbackDefaultWidth : _ref4$defaultWidth,
+    _ref4$minWidth = _ref4.minWidth,
+    minWidth = _ref4$minWidth === void 0 ? fallbackMinWidth : _ref4$minWidth,
+    maxWidth = _ref4.maxWidth,
+    testId = _ref4.testId,
+    _ref4$label = _ref4.label,
+    label = _ref4$label === void 0 ? 'Sidebar' : _ref4$label,
+    _ref4$skipLinkLabel = _ref4.skipLinkLabel,
+    skipLinkLabel = _ref4$skipLinkLabel === void 0 ? label : _ref4$skipLinkLabel,
+    onExpand = _ref4.onExpand,
+    onCollapse = _ref4.onCollapse,
+    onPeekStart = _ref4.onPeekStart,
+    onPeekEnd = _ref4.onPeekEnd,
+    providedId = _ref4.id,
+    canToggleWithShortcut = _ref4.canToggleWithShortcut;
   var isChatPanelLayoutEnabled = (0, _fg.fg)('platform-dst-chat-panel-layout');
   var id = (0, _useLayoutId.useLayoutId)({
     providedId: providedId
@@ -351,7 +398,9 @@ function SideNavInternal(_ref) {
   var toggleButtonElement = (0, _react.useContext)(_sideNavToggleButtonElement.SideNavToggleButtonElement);
   var topNavStartElement = (0, _react.useContext)(_topNavStartElement.TopNavStartElement);
   var devTimeOnlyAttributes = {};
-  var openLayerObserver = (0, _useOpenLayerObserver.useOpenLayerObserver)();
+  var openLayerObserver = (0, _useOpenLayerObserver.useOpenLayerObserver)({
+    isEnabled: !(0, _fg.fg)('platform-dst-top-layer')
+  });
   var flyoutStateRef = (0, _react.useRef)({
     type: 'not-active'
   });
@@ -429,6 +478,17 @@ function SideNavInternal(_ref) {
         });
       }
     }
+    function canClose() {
+      if (!(0, _fg.fg)('platform-dst-top-layer')) {
+        return (openLayerObserver === null || openLayerObserver === void 0 ? void 0 : openLayerObserver.getCount({
+          namespace: _constants.openLayerObserverSideNavNamespace
+        })) === 0;
+      }
+      var nav = navRef.current;
+      return !(nav && isFlyoutHeldOpen({
+        nav: nav
+      }));
+    }
     return function onAction(action) {
       if (action === 'drag-from-flyout-started') {
         open();
@@ -470,9 +530,7 @@ function SideNavInternal(_ref) {
       }
       if (action === 'ready-to-close') {
         // If there are no open layers, we can close the flyout.
-        if ((openLayerObserver === null || openLayerObserver === void 0 ? void 0 : openLayerObserver.getCount({
-          namespace: _constants.openLayerObserverSideNavNamespace
-        })) === 0) {
+        if (canClose()) {
           close();
           return;
         }
@@ -513,9 +571,9 @@ function SideNavInternal(_ref) {
       });
     });
   }, [initialDefaultCollapsed, setSideNavState, sideNavState]);
-  var handleExpand = (0, _react.useCallback)(function (_ref2) {
-    var screen = _ref2.screen,
-      trigger = _ref2.trigger;
+  var handleExpand = (0, _react.useCallback)(function (_ref5) {
+    var screen = _ref5.screen,
+      trigger = _ref5.trigger;
     onExpand === null || onExpand === void 0 || onExpand({
       screen: screen,
       trigger: trigger
@@ -535,9 +593,9 @@ function SideNavInternal(_ref) {
     // This prevents the flyout from staying open and ensures we are respecting the user's intent to expand.
     updateFlyoutState('force-close');
   }, [onExpand, updateFlyoutState, createAnalyticsEvent]);
-  var handleCollapse = (0, _react.useCallback)(function (_ref3) {
-    var screen = _ref3.screen,
-      trigger = _ref3.trigger;
+  var handleCollapse = (0, _react.useCallback)(function (_ref6) {
+    var screen = _ref6.screen,
+      trigger = _ref6.trigger;
     onCollapse === null || onCollapse === void 0 || onCollapse({
       screen: screen,
       trigger: trigger
@@ -730,15 +788,15 @@ function SideNavInternal(_ref) {
     //   we are just interested in listening to events within an element
     // - We do not want to impact `location.{*}.dropTargets` in events
     return (0, _elementAdapter.monitorForElements)({
-      canMonitor: function canMonitor(_ref4) {
-        var source = _ref4.source;
+      canMonitor: function canMonitor(_ref7) {
+        var source = _ref7.source;
         return nav.contains(source.element);
       },
       onGenerateDragPreview: function onGenerateDragPreview() {
         updateFlyoutState('drag-from-flyout-started');
       },
-      onDrop: function onDrop(_ref5) {
-        var location = _ref5.location;
+      onDrop: function onDrop(_ref8) {
+        var location = _ref8.location;
         // Always marking the drag and done
         updateFlyoutState('drag-from-flyout-finished');
 
@@ -799,8 +857,8 @@ 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 === null || openLayerObserver === void 0 ? void 0 : openLayerObserver.onChange(function (_ref6) {
-      var count = _ref6.count;
+    return openLayerObserver === null || openLayerObserver === void 0 ? void 0 : openLayerObserver.onChange(function (_ref9) {
+      var count = _ref9.count;
       if (flyoutStateRef.current.type === 'ready-to-close' && count === 0) {
         updateFlyoutState('force-close');
       }
@@ -808,6 +866,52 @@ function SideNavInternal(_ref) {
       namespace: _constants.openLayerObserverSideNavNamespace
     });
   }, [openLayerObserver, updateFlyoutState]);
+  var focusOutTimeoutIdRef = (0, _react.useRef)(undefined);
+  (0, _react.useEffect)(function () {
+    // The same as the open layer observer `onChange` above, for when the `platform-dst-top-layer`
+    // gate is on. Top-layer surfaces opened from the side nav are DOM descendants of it.
+    var nav = navRef.current;
+    if (!nav || !(0, _fg.fg)('platform-dst-top-layer')) {
+      return;
+    }
+    function closeIfReady() {
+      if (flyoutStateRef.current.type !== 'ready-to-close' || !nav) {
+        return;
+      }
+      if (isFlyoutHeldOpen({
+        nav: nav
+      })) {
+        return;
+      }
+      updateFlyoutState('force-close');
+    }
+    var unbindLayerChange = (0, _bindOpenLayerChange.bindOpenLayerChange)({
+      within: nav,
+      onChange: closeIfReady
+    });
+    var unbindFocusOut = (0, _bindEventListener.bind)(nav, {
+      type: 'focusout',
+      listener: function listener() {
+        // Wait for focus to move before checking where it went.
+        clearTimeout(focusOutTimeoutIdRef.current);
+        focusOutTimeoutIdRef.current = setTimeout(closeIfReady, 0);
+      }
+    });
+
+    // Removing the focused text field (for example when an inline rename ends) fires no
+    // `focusout` in some browsers, so also check again when content inside the side nav changes.
+    var removalObserver = new MutationObserver(closeIfReady);
+    removalObserver.observe(nav, {
+      childList: true,
+      subtree: true
+    });
+    return function cleanup() {
+      unbindLayerChange();
+      unbindFocusOut();
+      removalObserver.disconnect();
+      clearTimeout(focusOutTimeoutIdRef.current);
+    };
+  }, [updateFlyoutState]);
   (0, _react.useEffect)(function () {
     // Clear flyout close timer if being unmounted
     return function cleanupPendingFlyoutClose() {
@@ -944,26 +1048,24 @@ function SideNavInternal(_ref) {
  *
  * You can optionally render a `PanelSplitter` as a child to make the side navigation slot resizable.
  */
-function SideNav(_ref8) {
-  var children = _ref8.children,
-    defaultCollapsed = _ref8.defaultCollapsed,
-    _ref8$defaultWidth = _ref8.defaultWidth,
-    defaultWidth = _ref8$defaultWidth === void 0 ? 320 : _ref8$defaultWidth,
-    minWidth = _ref8.minWidth,
-    maxWidth = _ref8.maxWidth,
-    testId = _ref8.testId,
-    label = _ref8.label,
-    _ref8$skipLinkLabel = _ref8.skipLinkLabel,
-    skipLinkLabel = _ref8$skipLinkLabel === void 0 ? label : _ref8$skipLinkLabel,
-    onExpand = _ref8.onExpand,
-    onCollapse = _ref8.onCollapse,
-    onPeekStart = _ref8.onPeekStart,
-    onPeekEnd = _ref8.onPeekEnd,
-    canToggleWithShortcut = _ref8.canToggleWithShortcut,
-    id = _ref8.id;
-  return /*#__PURE__*/_react.default.createElement(_openLayerObserverNamespaceProvider.OpenLayerObserverNamespaceProvider, {
-    namespace: _constants.openLayerObserverSideNavNamespace
-  }, /*#__PURE__*/_react.default.createElement(SideNavInternal, {
+function SideNav(_ref1) {
+  var children = _ref1.children,
+    defaultCollapsed = _ref1.defaultCollapsed,
+    _ref1$defaultWidth = _ref1.defaultWidth,
+    defaultWidth = _ref1$defaultWidth === void 0 ? 320 : _ref1$defaultWidth,
+    minWidth = _ref1.minWidth,
+    maxWidth = _ref1.maxWidth,
+    testId = _ref1.testId,
+    label = _ref1.label,
+    _ref1$skipLinkLabel = _ref1.skipLinkLabel,
+    skipLinkLabel = _ref1$skipLinkLabel === void 0 ? label : _ref1$skipLinkLabel,
+    onExpand = _ref1.onExpand,
+    onCollapse = _ref1.onCollapse,
+    onPeekStart = _ref1.onPeekStart,
+    onPeekEnd = _ref1.onPeekEnd,
+    canToggleWithShortcut = _ref1.canToggleWithShortcut,
+    id = _ref1.id;
+  var sideNav = /*#__PURE__*/_react.default.createElement(SideNavInternal, {
     defaultCollapsed: defaultCollapsed,
     defaultWidth: defaultWidth,
     minWidth: minWidth,
@@ -977,5 +1079,13 @@ function SideNav(_ref8) {
     onPeekEnd: onPeekEnd,
     id: id,
     canToggleWithShortcut: canToggleWithShortcut
-  }, children));
+  }, children);
+
+  // Top-layer surfaces are found through the DOM, so the namespace is only needed when the gate is off.
+  if ((0, _fg.fg)('platform-dst-top-layer')) {
+    return sideNav;
+  }
+  return /*#__PURE__*/_react.default.createElement(_openLayerObserverNamespaceProvider.OpenLayerObserverNamespaceProvider, {
+    namespace: _constants.openLayerObserverSideNavNamespace
+  }, sideNav);
 }

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

@@ -17,6 +17,8 @@ var _useAnalyticsEvents2 = require("@atlaskit/analytics-next/useAnalyticsEvents"
 var _sidebarCollapse = _interopRequireDefault(require("@atlaskit/icon/core/sidebar-collapse"));
 var _sidebarExpand = _interopRequireDefault(require("@atlaskit/icon/core/sidebar-expand"));
 var _useOpenLayerObserver = require("@atlaskit/layering/use-open-layer-observer");
+var _fg = require("@atlaskit/platform-feature-flags/fg");
+var _requestClosePopovers = require("@atlaskit/top-layer/page-surface/request-close-popovers");
 var _iconButton = require("../../top-nav-items/themed/icon-button");
 var _sideNavToggleButtonAttachRef = require("./side-nav-toggle-button-attach-ref");
 var _sideNavToggleTooltipKeyboardShortcut = require("./side-nav-toggle-tooltip-keyboard-shortcut");
@@ -102,12 +104,17 @@ var SideNavToggleButton = exports.SideNavToggleButton = function SideNavToggleBu
   });
   var _useAnalyticsEvents = (0, _useAnalyticsEvents2.useAnalyticsEvents)(),
     createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
-  var openLayerObserver = (0, _useOpenLayerObserver.useOpenLayerObserver)();
+  var openLayerObserver = (0, _useOpenLayerObserver.useOpenLayerObserver)({
+    isEnabled: !(0, _fg.fg)('platform-dst-top-layer')
+  });
   var handleClick = (0, _react.useCallback)(function (event, analyticsEvent) {
     onClick === null || onClick === void 0 || onClick(event, analyticsEvent, {
       isSideNavVisible: isSideNavExpanded
     });
     toggleVisibility();
+
+    // Not gated. Top-layer tooltips (`platform-dst-top-layer-tooltip`) are not known to the observer.
+    (0, _requestClosePopovers.requestClosePopovers)();
     openLayerObserver === null || openLayerObserver === void 0 || openLayerObserver.closeLayers();
   }, [isSideNavExpanded, onClick, openLayerObserver, toggleVisibility]);
   var handlePointerEnter = (0, _react.useCallback)(function () {

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

@@ -9,6 +9,9 @@ var _react = require("react");
 var _bindEventListener = require("bind-event-listener");
 var _useStableRef = _interopRequireDefault(require("@atlaskit/ds-lib/use-stable-ref"));
 var _useOpenLayerObserver = require("@atlaskit/layering/use-open-layer-observer");
+var _fg = require("@atlaskit/platform-feature-flags/fg");
+var _hasOpenDialogOrPopover = require("@atlaskit/top-layer/page-surface/has-open-dialog-or-popover");
+var _requestClosePopovers = require("@atlaskit/top-layer/page-surface/request-close-popovers");
 var _useIsSideNavShortcutEnabled = require("./use-is-side-nav-shortcut-enabled");
 var _useToggleSideNav = require("./use-toggle-side-nav");
 /**
@@ -16,7 +19,9 @@ var _useToggleSideNav = require("./use-toggle-side-nav");
  */
 function useSideNavToggleKeyboardShortcut(_ref) {
   var canToggleWithShortcut = _ref.canToggleWithShortcut;
-  var openLayerObserver = (0, _useOpenLayerObserver.useOpenLayerObserver)();
+  var openLayerObserver = (0, _useOpenLayerObserver.useOpenLayerObserver)({
+    isEnabled: !(0, _fg.fg)('platform-dst-top-layer')
+  });
   var toggleVisibilityByShortcut = (0, _useToggleSideNav.useToggleSideNav)({
     trigger: 'keyboard'
   });
@@ -39,12 +44,21 @@ function useSideNavToggleKeyboardShortcut(_ref) {
             // Ignore repeated keydown events from holding down the keys
             return;
           }
+          if ((0, _fg.fg)('platform-dst-top-layer') && (0, _hasOpenDialogOrPopover.hasOpenDialogOrPopover)({
+            type: 'modal'
+          })) {
+            // Return early if there are any open modal dialogs
+            return;
+          }
           if (openLayerObserver && openLayerObserver.getCount({
             type: 'modal'
           }) > 0) {
             // Return early if there are any open modals
             return;
           }
+
+          // Not gated. Top-layer tooltips (`platform-dst-top-layer-tooltip`) are not known to the observer.
+          (0, _requestClosePopovers.requestClosePopovers)();
           openLayerObserver === null || openLayerObserver === void 0 || openLayerObserver.closeLayers();
           toggleVisibilityByShortcut();
         }

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

@@ -75,7 +75,8 @@ function TopNavEnd(_ref) {
 
   // The shared provider also covers the mobile overflow popup itself. Keep the
   // previous content-only namespace coverage when the layout gate is disabled.
-  var actions = (0, _fg.fg)('platform-dst-chat-panel-layout') ? children : /*#__PURE__*/_react.default.createElement(_openLayerObserverNamespaceProvider.OpenLayerObserverNamespaceProvider, {
+  // The observer is not used when the top-layer gate is on, so no provider is needed.
+  var actions = (0, _fg.fg)('platform-dst-chat-panel-layout') || (0, _fg.fg)('platform-dst-top-layer') ? children : /*#__PURE__*/_react.default.createElement(_openLayerObserverNamespaceProvider.OpenLayerObserverNamespaceProvider, {
     namespace: _constants.openLayerObserverTopNavEndNamespace
   }, children);
   var content = /*#__PURE__*/_react.default.createElement("nav", {
@@ -113,7 +114,7 @@ function TopNavEnd(_ref) {
   }) : /*#__PURE__*/_react.default.createElement(_list.List, {
     xcss: (0, _react2.cx)(listStyles.root, listStyles.hideOnSmallViewport)
   }, actions), hasPersistentItems && persistentItems);
-  return (0, _fg.fg)('platform-dst-chat-panel-layout') ? /*#__PURE__*/_react.default.createElement(_openLayerObserverNamespaceProvider.OpenLayerObserverNamespaceProvider, {
+  return (0, _fg.fg)('platform-dst-chat-panel-layout') && !(0, _fg.fg)('platform-dst-top-layer') ? /*#__PURE__*/_react.default.createElement(_openLayerObserverNamespaceProvider.OpenLayerObserverNamespaceProvider, {
     namespace: _constants.openLayerObserverTopNavEndNamespace
   }, content) : content;
 }

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

@@ -10,6 +10,7 @@ require("./top-nav-middle.compiled.css");
 var _runtime = require("@compiled/react/runtime");
 var _react = _interopRequireDefault(require("react"));
 var _openLayerObserverNamespaceProvider = require("@atlaskit/layering/open-layer-observer-namespace-provider");
+var _fg = require("@atlaskit/platform-feature-flags/fg");
 var _constants = require("../constants");
 var styles = {
   root: "_zulpu2gc _yyhycs5v _1bsb1osq _4cvr1h6o _1e0c1txw _1bahh9n0 _181n11p5 _1j8b15b0 _lagd1bp4 _1t4c1ris _12e8h9n0"
@@ -27,7 +28,7 @@ function TopNavMiddle(_ref) {
   var children = _ref.children;
   return /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _runtime.ax)([styles.root])
-  }, /*#__PURE__*/_react.default.createElement(_openLayerObserverNamespaceProvider.OpenLayerObserverNamespaceProvider, {
+  }, (0, _fg.fg)('platform-dst-top-layer') ? children : /*#__PURE__*/_react.default.createElement(_openLayerObserverNamespaceProvider.OpenLayerObserverNamespaceProvider, {
     namespace: _constants.openLayerObserverTopNavMiddleNamespace
   }, children));
 }