@atlaskit/navigation-system 11.3.2 → 11.3.4

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

@@ -18,6 +18,7 @@ import { disableNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/util
 import { preventUnhandled } from '@atlaskit/pragmatic-drag-and-drop/utils/prevent-unhandled';
 import Tooltip from '@atlaskit/tooltip/Tooltip';
 import TooltipContainer from '@atlaskit/tooltip/TooltipContainer';
+import { requestClosePopovers } from '@atlaskit/top-layer/page-surface/request-close-popovers';
 import VisuallyHidden from '@atlaskit/visually-hidden/visually-hidden';
 import { contentInsetBlockStart } from '../constants';
 import { convertResizeBoundToPixels } from './convert-resize-bound-to-pixels';
@@ -159,7 +160,9 @@ const PortaledPanelSplitter = ({
     min: 200,
     max: 500
   });
-  const openLayerObserver = useOpenLayerObserver();
+  const openLayerObserver = useOpenLayerObserver({
+    isEnabled: !fg('platform-dst-top-layer')
+  });
 
   /**
    * This is a temporary workaround to enable the `SideNavPanelSplitter` component
@@ -250,6 +253,8 @@ const PortaledPanelSplitter = ({
         onResizeStart === null || onResizeStart === void 0 ? 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.
+        requestClosePopovers();
         openLayerObserver === null || openLayerObserver === void 0 ? void 0 : openLayerObserver.closeLayers();
       },
       onDrag({
@@ -339,6 +344,8 @@ const PortaledPanelSplitter = ({
     onResizeStart: (...args) => {
       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.
+      requestClosePopovers();
       openLayerObserver === null || openLayerObserver === void 0 ? void 0 : openLayerObserver.closeLayers();
       (_onResizeStartStableR = onResizeStartStableRef.current) === null || _onResizeStartStableR === void 0 ? void 0 : _onResizeStartStableR.call(onResizeStartStableRef, ...args);
     },

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

@@ -77,6 +77,13 @@ export function Panel({
     providedId
   });
   const isMotionUpliftEnabled = fg('platform-dst-motion-uplift-panel');
+  const isContentMotionEnabled = fg('platform-dst-motion-uplift-panel-content');
+  const prevContentKeyRef = useRef(contentKey);
+  useEffect(() => {
+    if (isContentMotionEnabled && contentKey !== undefined) {
+      prevContentKeyRef.current = contentKey;
+    }
+  }, [contentKey, isContentMotionEnabled]);
   const defaultWidth = useSafeDefaultWidth({
     defaultWidthProp,
     fallbackDefaultWidth,
@@ -227,9 +234,9 @@ export function Panel({
     position: "start"
   }, /*#__PURE__*/React.createElement("div", {
     className: ax([styles.scrollContainer, isMotionUpliftEnabled && state === 'entering' && styles.contentEntering, isMotionUpliftEnabled && state === 'exiting' && styles.contentExiting])
-  }, isMotionUpliftEnabled && contentKey !== undefined ? /*#__PURE__*/React.createElement(ExitingPersistence, {
-    exitThenEnter: true
+  }, isContentMotionEnabled ? /*#__PURE__*/React.createElement(ExitingPersistence, {
+    exitThenEnter: contentKey !== undefined
   }, /*#__PURE__*/React.createElement(PanelContentMotion, {
-    key: contentKey
+    key: contentKey === undefined ? prevContentKeyRef.current : contentKey
   }, children)) : children)));
 }

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

@@ -67,6 +67,8 @@ export function Root({
   const isChatPanelLayoutEnabled = fg('platform-dst-chat-panel-layout');
   const LayoutProvider = isChatPanelLayoutEnabled ? LayoutAreaSizingProvider : React.Fragment;
   const WidthContainer = isChatPanelLayoutEnabled ? LayoutFitContainers : React.Fragment;
+  // Top-layer surfaces are found through the DOM, so the observer is only needed when the gate is off.
+  const LayerObserverProvider = fg('platform-dst-top-layer') ? React.Fragment : OpenLayerObserver;
   useEffect(() => {
     if (process.env.NODE_ENV !== 'production') {
       const IGNORED_ELEMENTS = ['SCRIPT', 'STYLE'];
@@ -98,7 +100,7 @@ This message will not be displayed in production.
     isSideNavShortcutEnabled: isSideNavShortcutEnabled
   }, /*#__PURE__*/React.createElement(TopNavStartProvider, null, /*#__PURE__*/React.createElement(LayoutProvider, isChatPanelLayoutEnabled ? {
     layoutRef: ref
-  } : {}, /*#__PURE__*/React.createElement(OpenLayerObserver, null, /*#__PURE__*/React.createElement(DangerouslyHoistSlotSizes.Provider, {
+  } : {}, /*#__PURE__*/React.createElement(LayerObserverProvider, null, /*#__PURE__*/React.createElement(DangerouslyHoistSlotSizes.Provider, {
     value: UNSAFE_dangerouslyHoistSlotSizes
   }, /*#__PURE__*/React.createElement(SkipLinksProvider, {
     label: skipLinksLabel,

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

@@ -0,0 +1,51 @@
+import { bindAll } from '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.
+ */
+export function bindOpenLayerChange({
+  within,
+  onChange
+}) {
+  let isBound = true;
+  function listener() {
+    onChange();
+  }
+  function deferredListener() {
+    queueMicrotask(() => {
+      if (isBound) {
+        onChange();
+      }
+    });
+  }
+  const unbind = bindAll(within, [{
+    type: 'beforetoggle',
+    listener: deferredListener,
+    options: {
+      capture: true
+    }
+  }, {
+    type: 'toggle',
+    listener,
+    options: {
+      capture: true
+    }
+  }, {
+    type: 'close',
+    listener,
+    options: {
+      capture: true
+    }
+  }]);
+  return function cleanup() {
+    isBound = false;
+    unbind();
+  };
+}

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

@@ -14,6 +14,7 @@ import { fg } from '@atlaskit/platform-feature-flags/fg';
 import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/adapter/element-adapter';
 // eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- TODO: migrate to @atlaskit/primitives/compiled
 
+import { hasOpenDialogOrPopover } from '@atlaskit/top-layer/page-surface/has-open-dialog-or-popover';
 import { useSkipLinkInternal } from '../../../context/skip-links/use-skip-link-internal';
 import { TopNavStartElement } from '../../../context/top-nav-start/top-nav-start-element';
 import { UNSAFE_sideNavLayoutVar, mainMinimumWidthVar, openLayerObserverSideNavNamespace, sideNavLiveWidthVar, sideNavPanelSplitterId, sideNavVar } from '../constants';
@@ -27,6 +28,7 @@ import { useLayoutAreaSizing } from '../use-layout-area-sizing';
 import { useLayoutId } from '../use-layout-id';
 import { useResizingWidthCssVarOnRootElement } from '../use-resizing-width-css-var-on-root-element';
 import { useSafeDefaultWidth } from '../use-safe-default-width';
+import { bindOpenLayerChange } from './bind-open-layer-change';
 import { sideNavFlyoutCloseDelayMs } from './flyout-close-delay-ms';
 import { SetSideNavVisibilityState } from './set-side-nav-visibility-state';
 import { SideNavToggleButtonElement } from './side-nav-toggle-button-element';
@@ -53,6 +55,54 @@ function getPixelCustomProperty(element, propertyName, fallback) {
  * Avoiding nesting the `@supports` at-rule inside of `@media` means Compiled can remove duplicate styles from the generated CSS.
  */
 const isFirefox = typeof navigator !== 'undefined' && navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
+const textEntryInputTypes = new Set(['text', 'search', 'email', 'url', 'tel', 'password', 'number']);
+function isEditableContent({
+  element
+}) {
+  if (element instanceof HTMLElement && typeof element.isContentEditable === 'boolean') {
+    return element.isContentEditable;
+  }
+  // Fallback for DOM implementations without `isContentEditable`.
+  const 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({
+  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
+  });
+}
+
+/**
+ * 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({
+  nav
+}) {
+  if (hasOpenDialogOrPopover({
+    within: nav
+  })) {
+    return true;
+  }
+  const activeElement = nav.ownerDocument.activeElement;
+  return activeElement !== null && nav.contains(activeElement) && isTextEntryElement({
+    element: activeElement
+  });
+}
 const styles = {
   root: "_191wglyw _t51zglyw _bfhk1bhr _16qs130s _vchhusvi _4t3ieqxy _152timx3 _kqsw1if8 _1bsb1ego _1pbycs5v _14b5hc79 _qilnk0mc _p5clia51 _4ap3vuon _scbpglyw _89fi1b6c",
   chatPanelSizing: "_1bsbhc79",
@@ -322,7 +372,9 @@ function SideNavInternal({
   const toggleButtonElement = useContext(SideNavToggleButtonElement);
   const topNavStartElement = useContext(TopNavStartElement);
   const devTimeOnlyAttributes = {};
-  const openLayerObserver = useOpenLayerObserver();
+  const openLayerObserver = useOpenLayerObserver({
+    isEnabled: !fg('platform-dst-top-layer')
+  });
   const flyoutStateRef = useRef({
     type: 'not-active'
   });
@@ -402,6 +454,17 @@ function SideNavInternal({
         });
       }
     }
+    function canClose() {
+      if (!fg('platform-dst-top-layer')) {
+        return (openLayerObserver === null || openLayerObserver === void 0 ? void 0 : openLayerObserver.getCount({
+          namespace: openLayerObserverSideNavNamespace
+        })) === 0;
+      }
+      const nav = navRef.current;
+      return !(nav && isFlyoutHeldOpen({
+        nav
+      }));
+    }
     return function onAction(action) {
       if (action === 'drag-from-flyout-started') {
         open();
@@ -443,9 +506,7 @@ function SideNavInternal({
       }
       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: openLayerObserverSideNavNamespace
-        })) === 0) {
+        if (canClose()) {
           close();
           return;
         }
@@ -787,6 +848,52 @@ function SideNavInternal({
       namespace: openLayerObserverSideNavNamespace
     });
   }, [openLayerObserver, updateFlyoutState]);
+  const focusOutTimeoutIdRef = useRef(undefined);
+  useEffect(() => {
+    // 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.
+    const nav = navRef.current;
+    if (!nav || !fg('platform-dst-top-layer')) {
+      return;
+    }
+    function closeIfReady() {
+      if (flyoutStateRef.current.type !== 'ready-to-close' || !nav) {
+        return;
+      }
+      if (isFlyoutHeldOpen({
+        nav
+      })) {
+        return;
+      }
+      updateFlyoutState('force-close');
+    }
+    const unbindLayerChange = bindOpenLayerChange({
+      within: nav,
+      onChange: closeIfReady
+    });
+    const unbindFocusOut = bind(nav, {
+      type: 'focusout',
+      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.
+    const removalObserver = new MutationObserver(closeIfReady);
+    removalObserver.observe(nav, {
+      childList: true,
+      subtree: true
+    });
+    return function cleanup() {
+      unbindLayerChange();
+      unbindFocusOut();
+      removalObserver.disconnect();
+      clearTimeout(focusOutTimeoutIdRef.current);
+    };
+  }, [updateFlyoutState]);
   useEffect(() => {
     // Clear flyout close timer if being unmounted
     return function cleanupPendingFlyoutClose() {
@@ -953,9 +1060,7 @@ export function SideNav({
   canToggleWithShortcut,
   id
 }) {
-  return /*#__PURE__*/React.createElement(OpenLayerObserverNamespaceProvider, {
-    namespace: openLayerObserverSideNavNamespace
-  }, /*#__PURE__*/React.createElement(SideNavInternal, {
+  const sideNav = /*#__PURE__*/React.createElement(SideNavInternal, {
     defaultCollapsed: defaultCollapsed,
     defaultWidth: defaultWidth,
     minWidth: minWidth,
@@ -969,5 +1074,13 @@ export function SideNav({
     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 (fg('platform-dst-top-layer')) {
+    return sideNav;
+  }
+  return /*#__PURE__*/React.createElement(OpenLayerObserverNamespaceProvider, {
+    namespace: openLayerObserverSideNavNamespace
+  }, sideNav);
 }

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

@@ -7,6 +7,8 @@ import { useAnalyticsEvents } from '@atlaskit/analytics-next/useAnalyticsEvents'
 import SidebarCollapseIcon from '@atlaskit/icon/core/sidebar-collapse';
 import SidebarExpandIcon from '@atlaskit/icon/core/sidebar-expand';
 import { useOpenLayerObserver } from '@atlaskit/layering/use-open-layer-observer';
+import { fg } from '@atlaskit/platform-feature-flags/fg';
+import { requestClosePopovers } from '@atlaskit/top-layer/page-surface/request-close-popovers';
 import { IconButton } from '../../top-nav-items/themed/icon-button';
 import { SideNavToggleButtonAttachRef } from './side-nav-toggle-button-attach-ref';
 import { sideNavToggleTooltipKeyboardShortcut } from './side-nav-toggle-tooltip-keyboard-shortcut';
@@ -86,12 +88,17 @@ export const SideNavToggleButton = ({
   const {
     createAnalyticsEvent
   } = useAnalyticsEvents();
-  const openLayerObserver = useOpenLayerObserver();
+  const openLayerObserver = useOpenLayerObserver({
+    isEnabled: !fg('platform-dst-top-layer')
+  });
   const handleClick = useCallback((event, analyticsEvent) => {
     onClick === null || onClick === void 0 ? void 0 : onClick(event, analyticsEvent, {
       isSideNavVisible: isSideNavExpanded
     });
     toggleVisibility();
+
+    // Not gated. Top-layer tooltips (`platform-dst-top-layer-tooltip`) are not known to the observer.
+    requestClosePopovers();
     openLayerObserver === null || openLayerObserver === void 0 ? void 0 : openLayerObserver.closeLayers();
   }, [isSideNavExpanded, onClick, openLayerObserver, toggleVisibility]);
   const handlePointerEnter = useCallback(() => {

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

@@ -2,6 +2,9 @@ import { useEffect } from 'react';
 import { bind } from 'bind-event-listener';
 import useStableRef from '@atlaskit/ds-lib/use-stable-ref';
 import { useOpenLayerObserver } from '@atlaskit/layering/use-open-layer-observer';
+import { fg } from '@atlaskit/platform-feature-flags/fg';
+import { hasOpenDialogOrPopover } from '@atlaskit/top-layer/page-surface/has-open-dialog-or-popover';
+import { requestClosePopovers } from '@atlaskit/top-layer/page-surface/request-close-popovers';
 import { useIsSideNavShortcutEnabled } from './use-is-side-nav-shortcut-enabled';
 import { useToggleSideNav } from './use-toggle-side-nav';
 
@@ -11,7 +14,9 @@ import { useToggleSideNav } from './use-toggle-side-nav';
 export function useSideNavToggleKeyboardShortcut({
   canToggleWithShortcut
 }) {
-  const openLayerObserver = useOpenLayerObserver();
+  const openLayerObserver = useOpenLayerObserver({
+    isEnabled: !fg('platform-dst-top-layer')
+  });
   const toggleVisibilityByShortcut = useToggleSideNav({
     trigger: 'keyboard'
   });
@@ -34,12 +39,21 @@ export function useSideNavToggleKeyboardShortcut({
             // Ignore repeated keydown events from holding down the keys
             return;
           }
+          if (fg('platform-dst-top-layer') && 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.
+          requestClosePopovers();
           openLayerObserver === null || openLayerObserver === void 0 ? void 0 : openLayerObserver.closeLayers();
           toggleVisibilityByShortcut();
         }

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

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

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

@@ -3,6 +3,7 @@ import "./top-nav-middle.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React from 'react';
 import { OpenLayerObserverNamespaceProvider } from '@atlaskit/layering/open-layer-observer-namespace-provider';
+import { fg } from '@atlaskit/platform-feature-flags/fg';
 import { openLayerObserverTopNavMiddleNamespace } from '../constants';
 const styles = {
   root: "_zulpu2gc _yyhycs5v _1bsb1osq _4cvr1h6o _1e0c1txw _1bahh9n0 _181n11p5 _1j8b15b0 _lagd1bp4 _1t4c1ris _12e8h9n0"
@@ -21,7 +22,7 @@ export function TopNavMiddle({
 }) {
   return /*#__PURE__*/React.createElement("div", {
     className: ax([styles.root])
-  }, /*#__PURE__*/React.createElement(OpenLayerObserverNamespaceProvider, {
+  }, fg('platform-dst-top-layer') ? children : /*#__PURE__*/React.createElement(OpenLayerObserverNamespaceProvider, {
     namespace: openLayerObserverTopNavMiddleNamespace
   }, children));
 }

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

@@ -26,6 +26,7 @@ import { disableNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/util
 import { preventUnhandled } from '@atlaskit/pragmatic-drag-and-drop/utils/prevent-unhandled';
 import Tooltip from '@atlaskit/tooltip/Tooltip';
 import TooltipContainer from '@atlaskit/tooltip/TooltipContainer';
+import { requestClosePopovers } from '@atlaskit/top-layer/page-surface/request-close-popovers';
 import VisuallyHidden from '@atlaskit/visually-hidden/visually-hidden';
 import { contentInsetBlockStart } from '../constants';
 import { convertResizeBoundToPixels } from './convert-resize-bound-to-pixels';
@@ -168,7 +169,9 @@ var PortaledPanelSplitter = function PortaledPanelSplitter(_ref3) {
     _useState4 = _slicedToArray(_useState3, 2),
     rangeInputBounds = _useState4[0],
     setRangeInputBounds = _useState4[1];
-  var openLayerObserver = useOpenLayerObserver();
+  var openLayerObserver = useOpenLayerObserver({
+    isEnabled: !fg('platform-dst-top-layer')
+  });
 
   /**
    * This is a temporary workaround to enable the `SideNavPanelSplitter` component
@@ -259,6 +262,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.
+        requestClosePopovers();
         openLayerObserver === null || openLayerObserver === void 0 || openLayerObserver.closeLayers();
       },
       onDrag: function onDrag(_ref6) {
@@ -374,6 +379,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.
+          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/esm/ui/page-layout/panel.js

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

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

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

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

@@ -0,0 +1,50 @@
+import { bindAll } from '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.
+ */
+export 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 = 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();
+  };
+}