@atlaskit/top-layer 5.0.0 → 5.0.1

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @atlaskit/top-layer
 
+## 5.0.1
+
+### Patch Changes
+
+- [`7ab1bd8a22db7`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/7ab1bd8a22db7) -
+  Preserve focus moved outside a popover before or during closing. Restore focus based on whether
+  the popover held focus, rather than its role.
+- Updated dependencies
+
 ## 5.0.0
 
 ### Major Changes

package/dist/cjs/internal/is-native-element-open.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isNativeElementOpen = isNativeElementOpen;
+function isNativeElementOpen(_ref) {
+  var element = _ref.element;
+  if (element instanceof HTMLDialogElement) {
+    return element.open;
+  }
+
+  // Some DOM implementations throw for unsupported pseudo-classes.
+  try {
+    return element.matches(':popover-open');
+  } catch (_unused) {
+    return false;
+  }
+}

package/dist/cjs/internal/use-animated-visibility.js

@@ -8,6 +8,7 @@ exports.useAnimatedVisibility = useAnimatedVisibility;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("react");
+var _isNativeElementOpen = require("./is-native-element-open");
 var _reducedMotion = require("./reduced-motion");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -45,19 +46,6 @@ function runOnAnimationsSettled(_ref2) {
     }
   });
 }
-function isNativeElementOpen(_ref3) {
-  var element = _ref3.element;
-  if (element instanceof HTMLDialogElement) {
-    return element.open;
-  }
-
-  // Some DOM implementations throw for unsupported pseudo-classes.
-  try {
-    return element.matches(':popover-open');
-  } catch (_unused) {
-    return false;
-  }
-}
 
 /**
  * Visibility lifecycle phase shared between `useAnimatedVisibility`,
@@ -86,9 +74,9 @@ function isNativeElementOpen(_ref3) {
  * ```
  */
 
-function getInitialVisibilityState(_ref4) {
-  var isOpen = _ref4.isOpen,
-    willAnimate = _ref4.willAnimate;
+function getInitialVisibilityState(_ref3) {
+  var isOpen = _ref3.isOpen,
+    willAnimate = _ref3.willAnimate;
   if (!isOpen) {
     return {
       phase: 'closed',
@@ -184,12 +172,12 @@ function getNextVisibilityState(state, action) {
  * phase:   open ──────────────── exiting ─── (exit settle) ─── closed
  * ```
  */
-function useAnimatedVisibility(_ref5) {
-  var isOpen = _ref5.isOpen,
-    shouldAnimate = _ref5.shouldAnimate,
-    elementRef = _ref5.elementRef,
-    onEnterFinish = _ref5.onEnterFinish,
-    onExitFinish = _ref5.onExitFinish;
+function useAnimatedVisibility(_ref4) {
+  var isOpen = _ref4.isOpen,
+    shouldAnimate = _ref4.shouldAnimate,
+    elementRef = _ref4.elementRef,
+    onEnterFinish = _ref4.onEnterFinish,
+    onExitFinish = _ref4.onExitFinish;
   var willAnimate = shouldAnimate && !(0, _reducedMotion.prefersReducedMotion)();
   var _useReducer = (0, _react.useReducer)(getNextVisibilityState, {
       isOpen: isOpen,
@@ -274,7 +262,7 @@ function useAnimatedVisibility(_ref5) {
         queueMicrotask(function () {
           // A controlled close can be interrupted by isOpen changing back to true,
           // which reopens the element before this microtask runs.
-          if (isNativeElementOpen({
+          if ((0, _isNativeElementOpen.isNativeElementOpen)({
             element: element
           })) {
             return;

package/dist/cjs/popover/popover.js

@@ -15,8 +15,8 @@ var _bindEventListener = require("bind-event-listener");
 var _mergeRefs = _interopRequireDefault(require("@atlaskit/ds-lib/merge-refs"));
 var _once = _interopRequireDefault(require("@atlaskit/ds-lib/once"));
 var _useNotifyOpenLayerObserver = require("@atlaskit/layering/use-notify-open-layer-observer");
+var _isNativeElementOpen = require("../internal/is-native-element-open");
 var _resolvePlacement2 = require("../internal/resolve-placement");
-var _shouldFocusIntoPopover = require("../internal/should-focus-into-popover");
 var _useAnimatedVisibility = require("../internal/use-animated-visibility");
 var _useFocusWrap = require("../internal/use-focus-wrap");
 var _useInitialFocus = require("../internal/use-initial-focus");
@@ -147,14 +147,12 @@ var Popover = exports.Popover = /*#__PURE__*/(0, _react.forwardRef)(function Pop
   // `useId()` colons are invalid in CSS selectors and popover target attributes.
   var popoverId = idProp !== null && idProp !== void 0 ? idProp : "popover-".concat(autoId.replace(/:/g, ''));
 
-  // Keep semantic callbacks current without rebinding native lifecycle
+  // Keep the semantic callback current without rebinding native lifecycle
   // listeners during the same commit that calls showPopover()/hidePopover().
   var onCloseRef = (0, _react.useRef)(onClose);
-  var roleRef = (0, _react.useRef)(role);
   (0, _react.useLayoutEffect)(function () {
     onCloseRef.current = onClose;
-    roleRef.current = role;
-  }, [onClose, role]);
+  }, [onClose]);
 
   // Register with open layer observer so `closeLayers()` and open-count
   // subscriptions work. Only popup-like roles register as `popup`; passive
@@ -188,65 +186,60 @@ var Popover = exports.Popover = /*#__PURE__*/(0, _react.forwardRef)(function Pop
     return popupMotionStyles[axis][edge];
   }, [placement, shouldAnimate]);
 
-  // Prevents toggle handler from calling onClose for our own hidePopover() calls.
-  var programmaticCloseRef = (0, _react.useRef)(false);
-
-  // Set in capture-phase keydown so the toggle handler knows close reason.
+  // Tracks the close reason, including our own hidePopover() calls.
   var closeReasonRef = (0, _react.useRef)('light-dismiss');
 
   // Snapshot of pre-open focus, used to restore focus for nested popovers
-  // with focus-capturing roles (browser only restores the outermost).
-  var previouslyFocusedElementRef = (0, _react.useRef)(null);
+  // because the browser only restores the outermost.
+  var focusRestorationTargetRef = (0, _react.useRef)(null);
   var handleBeforeToggle = (0, _react.useCallback)(function (event) {
-    if (event.newState !== 'open') {
+    var popover = event.currentTarget;
+    if (!(popover instanceof HTMLElement)) {
       return;
     }
-    // eslint-disable-next-line @atlaskit/platform/no-direct-document-usage -- need active element snapshot
-    var active = document.activeElement;
-    previouslyFocusedElementRef.current = active instanceof HTMLElement ? active : null;
-  }, []);
-  var restorePreviouslyFocusedElement = (0, _react.useCallback)(function () {
-    var previouslyFocused = previouslyFocusedElementRef.current;
-    previouslyFocusedElementRef.current = null;
-    if (previouslyFocused !== null && previouslyFocused.isConnected && (0, _shouldFocusIntoPopover.shouldFocusIntoPopover)({
-      role: roleRef.current
-    })) {
-      previouslyFocused.focus({
-        preventScroll: true
-      });
+    var ownerDocument = popover.ownerDocument;
+    var activeElement = ownerDocument.activeElement;
+    if (event.newState === 'open') {
+      focusRestorationTargetRef.current = activeElement instanceof HTMLElement ? activeElement : null;
+      return;
+    }
+
+    // Check before closing so focus already on body is not mistaken for focus lost during close.
+    if (closeReasonRef.current === 'light-dismiss' || !popover.contains(activeElement)) {
+      focusRestorationTargetRef.current = null;
     }
   }, []);
-  var handleToggleClosed = (0, _react.useCallback)(function (_event) {
-    var _onCloseRef$current2;
-    // Nested-popover focus restoration fallback (browser only
-    // restores outermost; Firefox skips nested entirely).
-    // Restore only when the role moved focus in on open AND the
-    // close was Escape/programmatic. For light dismiss, the
-    // click target keeps focus per HTML spec
-    // (`focusPreviousElement=false`).
-    var reason = closeReasonRef.current;
-    var isProgrammatic = programmaticCloseRef.current;
-    if (reason === 'escape' || isProgrammatic) {
-      restorePreviouslyFocusedElement();
-    } else {
-      previouslyFocusedElementRef.current = null;
+  var handleToggleClosed = (0, _react.useCallback)(function (event) {
+    var popover = event.currentTarget;
+    if (!(popover instanceof HTMLElement)) {
+      return;
     }
-
+    var focusRestorationTarget = focusRestorationTargetRef.current;
+    focusRestorationTargetRef.current = null;
+    var reason = closeReasonRef.current;
     // Reset reason so a stale 'escape' from a race with Escape keydown
     // does not corrupt the next browser-dismiss cycle.
     closeReasonRef.current = 'light-dismiss';
-
-    // Programmatic close: consumer already knows.
-    if (isProgrammatic) {
-      return;
+    if (focusRestorationTarget) {
+      var ownerDocument = popover.ownerDocument;
+      // Native restoration has finished. Preserve focus moved outside the popover.
+      var activeElementAfterClose = ownerDocument.activeElement;
+      if (activeElementAfterClose === ownerDocument.body || popover.contains(activeElementAfterClose)) {
+        // Match native popover restoration, which does not scroll the viewport.
+        focusRestorationTarget.focus({
+          preventScroll: true
+        });
+      }
     }
 
-    // Browser dismiss (Escape/click-outside).
-    // Optional: `manual` mode has no `onClose` in the forwarded type.
-    (_onCloseRef$current2 = onCloseRef.current) === null || _onCloseRef$current2 === void 0 || _onCloseRef$current2.call(onCloseRef, {
-      reason: reason
-    });
-  }, [restorePreviouslyFocusedElement]);
+    // Programmatic closes are already known to the consumer.
+    if (reason !== 'programmatic') {
+      var _onCloseRef$current2;
+      (_onCloseRef$current2 = onCloseRef.current) === null || _onCloseRef$current2 === void 0 || _onCloseRef$current2.call(onCloseRef, {
+        reason: reason
+      });
+    }
+  }, []);
   var _useAnimatedVisibilit = (0, _useAnimatedVisibility.useAnimatedVisibility)({
       isOpen: isOpen,
       shouldAnimate: shouldAnimate,
@@ -261,7 +254,7 @@ var Popover = exports.Popover = /*#__PURE__*/(0, _react.forwardRef)(function Pop
 
   // Focus management: initial focus on entry (role-dependent), Tab cycling
   // for dialog roles. Restoration is native for outermost popovers; nested
-  // focus-capturing roles are handled above via the `beforetoggle` snapshot.
+  // popovers are handled above via the `beforetoggle` snapshot.
   // Passing `phase` keeps `useFocusWrap` attached through the animated-exit
   // window (WCAG 2.4.3 guard). See notes/architecture/focus.md.
   (0, _useFocusWrap.useFocusWrap)({
@@ -278,7 +271,7 @@ var Popover = exports.Popover = /*#__PURE__*/(0, _react.forwardRef)(function Pop
   // Bind via `useLayoutEffect`, and BEFORE the show/hide layout effect
   // below, so listeners are attached when `showPopover()` synchronously
   // dispatches `beforetoggle`. A regular `useEffect` would miss that
-  // first dispatch, dropping the `previouslyFocusedElementRef` snapshot
+  // first dispatch, dropping the `focusRestorationTargetRef` snapshot
   // and breaking nested-popover focus restoration on close. React runs
   // layout effects in source order on the same commit.
   (0, _react.useLayoutEffect)(function () {
@@ -291,7 +284,10 @@ var Popover = exports.Popover = /*#__PURE__*/(0, _react.forwardRef)(function Pop
     var unbindEscape = (0, _bindEventListener.bind)(element, {
       type: 'keydown',
       listener: function listener(event) {
-        if (event.key === 'Escape') {
+        // Ignore Escape events dispatched after native close.
+        if (event.key === 'Escape' && (0, _isNativeElementOpen.isNativeElementOpen)({
+          element: element
+        })) {
           closeReasonRef.current = 'escape';
         }
       },
@@ -308,7 +304,7 @@ var Popover = exports.Popover = /*#__PURE__*/(0, _react.forwardRef)(function Pop
         onToggle(event);
       }
     });
-    // Snapshot `document.activeElement` before `useInitialFocus` moves it,
+    // Snapshot the active element before `useInitialFocus` moves it,
     // then advance the shared visibility lifecycle.
     var unbindBeforeToggle = (0, _bindEventListener.bind)(element, {
       type: 'beforetoggle',
@@ -333,7 +329,6 @@ var Popover = exports.Popover = /*#__PURE__*/(0, _react.forwardRef)(function Pop
       return;
     }
     if (isOpen) {
-      programmaticCloseRef.current = false;
       // Clear stale 'escape' from a prior cycle: the ref outlives
       // the host element, and interrupted close lifecycles may not reach
       // `handleToggleClosed` to reset it.
@@ -342,13 +337,13 @@ var Popover = exports.Popover = /*#__PURE__*/(0, _react.forwardRef)(function Pop
         element.showPopover();
       } catch (_unused) {}
       return function () {
-        programmaticCloseRef.current = true;
+        closeReasonRef.current = 'programmatic';
         try {
           element.hidePopover();
         } catch (_unused2) {}
       };
     }
-    programmaticCloseRef.current = true;
+    closeReasonRef.current = 'programmatic';
     try {
       element.hidePopover();
     } catch (_unused3) {}

package/dist/es2019/internal/is-native-element-open.js

@@ -0,0 +1,14 @@
+export function isNativeElementOpen({
+  element
+}) {
+  if (element instanceof HTMLDialogElement) {
+    return element.open;
+  }
+
+  // Some DOM implementations throw for unsupported pseudo-classes.
+  try {
+    return element.matches(':popover-open');
+  } catch {
+    return false;
+  }
+}

package/dist/es2019/internal/use-animated-visibility.js

@@ -1,4 +1,5 @@
 import { useCallback, useEffect, useLayoutEffect, useReducer, useRef } from 'react';
+import { isNativeElementOpen } from './is-native-element-open';
 import { prefersReducedMotion } from './reduced-motion';
 function runCancellableSettlement({
   schedule,
@@ -34,20 +35,6 @@ function runOnAnimationsSettled({
     }
   });
 }
-function isNativeElementOpen({
-  element
-}) {
-  if (element instanceof HTMLDialogElement) {
-    return element.open;
-  }
-
-  // Some DOM implementations throw for unsupported pseudo-classes.
-  try {
-    return element.matches(':popover-open');
-  } catch {
-    return false;
-  }
-}
 
 /**
  * Visibility lifecycle phase shared between `useAnimatedVisibility`,

package/dist/es2019/popover/popover.js

@@ -7,8 +7,8 @@ import { bind } from 'bind-event-listener';
 import mergeRefs from '@atlaskit/ds-lib/merge-refs';
 import once from '@atlaskit/ds-lib/once';
 import { useNotifyOpenLayerObserver } from '@atlaskit/layering/use-notify-open-layer-observer';
+import { isNativeElementOpen } from '../internal/is-native-element-open';
 import { resolvePlacement } from '../internal/resolve-placement';
-import { shouldFocusIntoPopover } from '../internal/should-focus-into-popover';
 import { useAnimatedVisibility } from '../internal/use-animated-visibility';
 import { useFocusWrap } from '../internal/use-focus-wrap';
 import { useInitialFocus } from '../internal/use-initial-focus';
@@ -138,14 +138,12 @@ export const Popover = /*#__PURE__*/forwardRef(function Popover({
   // `useId()` colons are invalid in CSS selectors and popover target attributes.
   const popoverId = idProp !== null && idProp !== void 0 ? idProp : `popover-${autoId.replace(/:/g, '')}`;
 
-  // Keep semantic callbacks current without rebinding native lifecycle
+  // Keep the semantic callback current without rebinding native lifecycle
   // listeners during the same commit that calls showPopover()/hidePopover().
   const onCloseRef = useRef(onClose);
-  const roleRef = useRef(role);
   useLayoutEffect(() => {
     onCloseRef.current = onClose;
-    roleRef.current = role;
-  }, [onClose, role]);
+  }, [onClose]);
 
   // Register with open layer observer so `closeLayers()` and open-count
   // subscriptions work. Only popup-like roles register as `popup`; passive
@@ -180,65 +178,66 @@ export const Popover = /*#__PURE__*/forwardRef(function Popover({
     return popupMotionStyles[axis][edge];
   }, [placement, shouldAnimate]);
 
-  // Prevents toggle handler from calling onClose for our own hidePopover() calls.
-  const programmaticCloseRef = useRef(false);
-
-  // Set in capture-phase keydown so the toggle handler knows close reason.
+  // Tracks the close reason, including our own hidePopover() calls.
   const closeReasonRef = useRef('light-dismiss');
 
   // Snapshot of pre-open focus, used to restore focus for nested popovers
-  // with focus-capturing roles (browser only restores the outermost).
-  const previouslyFocusedElementRef = useRef(null);
+  // because the browser only restores the outermost.
+  const focusRestorationTargetRef = useRef(null);
   const handleBeforeToggle = useCallback(event => {
-    if (event.newState !== 'open') {
+    const popover = event.currentTarget;
+    if (!(popover instanceof HTMLElement)) {
       return;
     }
-    // eslint-disable-next-line @atlaskit/platform/no-direct-document-usage -- need active element snapshot
-    const active = document.activeElement;
-    previouslyFocusedElementRef.current = active instanceof HTMLElement ? active : null;
-  }, []);
-  const restorePreviouslyFocusedElement = useCallback(() => {
-    const previouslyFocused = previouslyFocusedElementRef.current;
-    previouslyFocusedElementRef.current = null;
-    if (previouslyFocused !== null && previouslyFocused.isConnected && shouldFocusIntoPopover({
-      role: roleRef.current
-    })) {
-      previouslyFocused.focus({
-        preventScroll: true
-      });
+    const {
+      ownerDocument
+    } = popover;
+    const {
+      activeElement
+    } = ownerDocument;
+    if (event.newState === 'open') {
+      focusRestorationTargetRef.current = activeElement instanceof HTMLElement ? activeElement : null;
+      return;
+    }
+
+    // Check before closing so focus already on body is not mistaken for focus lost during close.
+    if (closeReasonRef.current === 'light-dismiss' || !popover.contains(activeElement)) {
+      focusRestorationTargetRef.current = null;
     }
   }, []);
-  const handleToggleClosed = useCallback(_event => {
-    var _onCloseRef$current2;
-    // Nested-popover focus restoration fallback (browser only
-    // restores outermost; Firefox skips nested entirely).
-    // Restore only when the role moved focus in on open AND the
-    // close was Escape/programmatic. For light dismiss, the
-    // click target keeps focus per HTML spec
-    // (`focusPreviousElement=false`).
-    const reason = closeReasonRef.current;
-    const isProgrammatic = programmaticCloseRef.current;
-    if (reason === 'escape' || isProgrammatic) {
-      restorePreviouslyFocusedElement();
-    } else {
-      previouslyFocusedElementRef.current = null;
+  const handleToggleClosed = useCallback(event => {
+    const popover = event.currentTarget;
+    if (!(popover instanceof HTMLElement)) {
+      return;
     }
-
+    const focusRestorationTarget = focusRestorationTargetRef.current;
+    focusRestorationTargetRef.current = null;
+    const reason = closeReasonRef.current;
     // Reset reason so a stale 'escape' from a race with Escape keydown
     // does not corrupt the next browser-dismiss cycle.
     closeReasonRef.current = 'light-dismiss';
-
-    // Programmatic close: consumer already knows.
-    if (isProgrammatic) {
-      return;
+    if (focusRestorationTarget) {
+      const {
+        ownerDocument
+      } = popover;
+      // Native restoration has finished. Preserve focus moved outside the popover.
+      const activeElementAfterClose = ownerDocument.activeElement;
+      if (activeElementAfterClose === ownerDocument.body || popover.contains(activeElementAfterClose)) {
+        // Match native popover restoration, which does not scroll the viewport.
+        focusRestorationTarget.focus({
+          preventScroll: true
+        });
+      }
     }
 
-    // Browser dismiss (Escape/click-outside).
-    // Optional: `manual` mode has no `onClose` in the forwarded type.
-    (_onCloseRef$current2 = onCloseRef.current) === null || _onCloseRef$current2 === void 0 ? void 0 : _onCloseRef$current2.call(onCloseRef, {
-      reason
-    });
-  }, [restorePreviouslyFocusedElement]);
+    // Programmatic closes are already known to the consumer.
+    if (reason !== 'programmatic') {
+      var _onCloseRef$current2;
+      (_onCloseRef$current2 = onCloseRef.current) === null || _onCloseRef$current2 === void 0 ? void 0 : _onCloseRef$current2.call(onCloseRef, {
+        reason
+      });
+    }
+  }, []);
   const {
     phase,
     isMounted,
@@ -254,7 +253,7 @@ export const Popover = /*#__PURE__*/forwardRef(function Popover({
 
   // Focus management: initial focus on entry (role-dependent), Tab cycling
   // for dialog roles. Restoration is native for outermost popovers; nested
-  // focus-capturing roles are handled above via the `beforetoggle` snapshot.
+  // popovers are handled above via the `beforetoggle` snapshot.
   // Passing `phase` keeps `useFocusWrap` attached through the animated-exit
   // window (WCAG 2.4.3 guard). See notes/architecture/focus.md.
   useFocusWrap({
@@ -271,7 +270,7 @@ export const Popover = /*#__PURE__*/forwardRef(function Popover({
   // Bind via `useLayoutEffect`, and BEFORE the show/hide layout effect
   // below, so listeners are attached when `showPopover()` synchronously
   // dispatches `beforetoggle`. A regular `useEffect` would miss that
-  // first dispatch, dropping the `previouslyFocusedElementRef` snapshot
+  // first dispatch, dropping the `focusRestorationTargetRef` snapshot
   // and breaking nested-popover focus restoration on close. React runs
   // layout effects in source order on the same commit.
   useLayoutEffect(() => {
@@ -284,7 +283,10 @@ export const Popover = /*#__PURE__*/forwardRef(function Popover({
     const unbindEscape = bind(element, {
       type: 'keydown',
       listener: event => {
-        if (event.key === 'Escape') {
+        // Ignore Escape events dispatched after native close.
+        if (event.key === 'Escape' && isNativeElementOpen({
+          element
+        })) {
           closeReasonRef.current = 'escape';
         }
       },
@@ -301,7 +303,7 @@ export const Popover = /*#__PURE__*/forwardRef(function Popover({
         onToggle(event);
       }
     });
-    // Snapshot `document.activeElement` before `useInitialFocus` moves it,
+    // Snapshot the active element before `useInitialFocus` moves it,
     // then advance the shared visibility lifecycle.
     const unbindBeforeToggle = bind(element, {
       type: 'beforetoggle',
@@ -326,7 +328,6 @@ export const Popover = /*#__PURE__*/forwardRef(function Popover({
       return;
     }
     if (isOpen) {
-      programmaticCloseRef.current = false;
       // Clear stale 'escape' from a prior cycle: the ref outlives
       // the host element, and interrupted close lifecycles may not reach
       // `handleToggleClosed` to reset it.
@@ -335,13 +336,13 @@ export const Popover = /*#__PURE__*/forwardRef(function Popover({
         element.showPopover();
       } catch {}
       return () => {
-        programmaticCloseRef.current = true;
+        closeReasonRef.current = 'programmatic';
         try {
           element.hidePopover();
         } catch {}
       };
     }
-    programmaticCloseRef.current = true;
+    closeReasonRef.current = 'programmatic';
     try {
       element.hidePopover();
     } catch {}

package/dist/esm/internal/is-native-element-open.js

@@ -0,0 +1,13 @@
+export function isNativeElementOpen(_ref) {
+  var element = _ref.element;
+  if (element instanceof HTMLDialogElement) {
+    return element.open;
+  }
+
+  // Some DOM implementations throw for unsupported pseudo-classes.
+  try {
+    return element.matches(':popover-open');
+  } catch (_unused) {
+    return false;
+  }
+}

package/dist/esm/internal/use-animated-visibility.js

@@ -3,6 +3,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import { useCallback, useEffect, useLayoutEffect, useReducer, useRef } from 'react';
+import { isNativeElementOpen } from './is-native-element-open';
 import { prefersReducedMotion } from './reduced-motion';
 function runCancellableSettlement(_ref) {
   var schedule = _ref.schedule,
@@ -38,19 +39,6 @@ function runOnAnimationsSettled(_ref2) {
     }
   });
 }
-function isNativeElementOpen(_ref3) {
-  var element = _ref3.element;
-  if (element instanceof HTMLDialogElement) {
-    return element.open;
-  }
-
-  // Some DOM implementations throw for unsupported pseudo-classes.
-  try {
-    return element.matches(':popover-open');
-  } catch (_unused) {
-    return false;
-  }
-}
 
 /**
  * Visibility lifecycle phase shared between `useAnimatedVisibility`,
@@ -79,9 +67,9 @@ function isNativeElementOpen(_ref3) {
  * ```
  */
 
-function getInitialVisibilityState(_ref4) {
-  var isOpen = _ref4.isOpen,
-    willAnimate = _ref4.willAnimate;
+function getInitialVisibilityState(_ref3) {
+  var isOpen = _ref3.isOpen,
+    willAnimate = _ref3.willAnimate;
   if (!isOpen) {
     return {
       phase: 'closed',
@@ -177,12 +165,12 @@ function getNextVisibilityState(state, action) {
  * phase:   open ──────────────── exiting ─── (exit settle) ─── closed
  * ```
  */
-export function useAnimatedVisibility(_ref5) {
-  var isOpen = _ref5.isOpen,
-    shouldAnimate = _ref5.shouldAnimate,
-    elementRef = _ref5.elementRef,
-    onEnterFinish = _ref5.onEnterFinish,
-    onExitFinish = _ref5.onExitFinish;
+export function useAnimatedVisibility(_ref4) {
+  var isOpen = _ref4.isOpen,
+    shouldAnimate = _ref4.shouldAnimate,
+    elementRef = _ref4.elementRef,
+    onEnterFinish = _ref4.onEnterFinish,
+    onExitFinish = _ref4.onExitFinish;
   var willAnimate = shouldAnimate && !prefersReducedMotion();
   var _useReducer = useReducer(getNextVisibilityState, {
       isOpen: isOpen,

package/dist/esm/popover/popover.js

@@ -7,8 +7,8 @@ import { bind } from 'bind-event-listener';
 import mergeRefs from '@atlaskit/ds-lib/merge-refs';
 import once from '@atlaskit/ds-lib/once';
 import { useNotifyOpenLayerObserver } from '@atlaskit/layering/use-notify-open-layer-observer';
+import { isNativeElementOpen } from '../internal/is-native-element-open';
 import { resolvePlacement } from '../internal/resolve-placement';
-import { shouldFocusIntoPopover } from '../internal/should-focus-into-popover';
 import { useAnimatedVisibility } from '../internal/use-animated-visibility';
 import { useFocusWrap } from '../internal/use-focus-wrap';
 import { useInitialFocus } from '../internal/use-initial-focus';
@@ -138,14 +138,12 @@ export var Popover = /*#__PURE__*/forwardRef(function Popover(_ref, ref) {
   // `useId()` colons are invalid in CSS selectors and popover target attributes.
   var popoverId = idProp !== null && idProp !== void 0 ? idProp : "popover-".concat(autoId.replace(/:/g, ''));
 
-  // Keep semantic callbacks current without rebinding native lifecycle
+  // Keep the semantic callback current without rebinding native lifecycle
   // listeners during the same commit that calls showPopover()/hidePopover().
   var onCloseRef = useRef(onClose);
-  var roleRef = useRef(role);
   useLayoutEffect(function () {
     onCloseRef.current = onClose;
-    roleRef.current = role;
-  }, [onClose, role]);
+  }, [onClose]);
 
   // Register with open layer observer so `closeLayers()` and open-count
   // subscriptions work. Only popup-like roles register as `popup`; passive
@@ -179,65 +177,60 @@ export var Popover = /*#__PURE__*/forwardRef(function Popover(_ref, ref) {
     return popupMotionStyles[axis][edge];
   }, [placement, shouldAnimate]);
 
-  // Prevents toggle handler from calling onClose for our own hidePopover() calls.
-  var programmaticCloseRef = useRef(false);
-
-  // Set in capture-phase keydown so the toggle handler knows close reason.
+  // Tracks the close reason, including our own hidePopover() calls.
   var closeReasonRef = useRef('light-dismiss');
 
   // Snapshot of pre-open focus, used to restore focus for nested popovers
-  // with focus-capturing roles (browser only restores the outermost).
-  var previouslyFocusedElementRef = useRef(null);
+  // because the browser only restores the outermost.
+  var focusRestorationTargetRef = useRef(null);
   var handleBeforeToggle = useCallback(function (event) {
-    if (event.newState !== 'open') {
+    var popover = event.currentTarget;
+    if (!(popover instanceof HTMLElement)) {
       return;
     }
-    // eslint-disable-next-line @atlaskit/platform/no-direct-document-usage -- need active element snapshot
-    var active = document.activeElement;
-    previouslyFocusedElementRef.current = active instanceof HTMLElement ? active : null;
-  }, []);
-  var restorePreviouslyFocusedElement = useCallback(function () {
-    var previouslyFocused = previouslyFocusedElementRef.current;
-    previouslyFocusedElementRef.current = null;
-    if (previouslyFocused !== null && previouslyFocused.isConnected && shouldFocusIntoPopover({
-      role: roleRef.current
-    })) {
-      previouslyFocused.focus({
-        preventScroll: true
-      });
+    var ownerDocument = popover.ownerDocument;
+    var activeElement = ownerDocument.activeElement;
+    if (event.newState === 'open') {
+      focusRestorationTargetRef.current = activeElement instanceof HTMLElement ? activeElement : null;
+      return;
+    }
+
+    // Check before closing so focus already on body is not mistaken for focus lost during close.
+    if (closeReasonRef.current === 'light-dismiss' || !popover.contains(activeElement)) {
+      focusRestorationTargetRef.current = null;
     }
   }, []);
-  var handleToggleClosed = useCallback(function (_event) {
-    var _onCloseRef$current2;
-    // Nested-popover focus restoration fallback (browser only
-    // restores outermost; Firefox skips nested entirely).
-    // Restore only when the role moved focus in on open AND the
-    // close was Escape/programmatic. For light dismiss, the
-    // click target keeps focus per HTML spec
-    // (`focusPreviousElement=false`).
-    var reason = closeReasonRef.current;
-    var isProgrammatic = programmaticCloseRef.current;
-    if (reason === 'escape' || isProgrammatic) {
-      restorePreviouslyFocusedElement();
-    } else {
-      previouslyFocusedElementRef.current = null;
+  var handleToggleClosed = useCallback(function (event) {
+    var popover = event.currentTarget;
+    if (!(popover instanceof HTMLElement)) {
+      return;
     }
-
+    var focusRestorationTarget = focusRestorationTargetRef.current;
+    focusRestorationTargetRef.current = null;
+    var reason = closeReasonRef.current;
     // Reset reason so a stale 'escape' from a race with Escape keydown
     // does not corrupt the next browser-dismiss cycle.
     closeReasonRef.current = 'light-dismiss';
-
-    // Programmatic close: consumer already knows.
-    if (isProgrammatic) {
-      return;
+    if (focusRestorationTarget) {
+      var ownerDocument = popover.ownerDocument;
+      // Native restoration has finished. Preserve focus moved outside the popover.
+      var activeElementAfterClose = ownerDocument.activeElement;
+      if (activeElementAfterClose === ownerDocument.body || popover.contains(activeElementAfterClose)) {
+        // Match native popover restoration, which does not scroll the viewport.
+        focusRestorationTarget.focus({
+          preventScroll: true
+        });
+      }
     }
 
-    // Browser dismiss (Escape/click-outside).
-    // Optional: `manual` mode has no `onClose` in the forwarded type.
-    (_onCloseRef$current2 = onCloseRef.current) === null || _onCloseRef$current2 === void 0 || _onCloseRef$current2.call(onCloseRef, {
-      reason: reason
-    });
-  }, [restorePreviouslyFocusedElement]);
+    // Programmatic closes are already known to the consumer.
+    if (reason !== 'programmatic') {
+      var _onCloseRef$current2;
+      (_onCloseRef$current2 = onCloseRef.current) === null || _onCloseRef$current2 === void 0 || _onCloseRef$current2.call(onCloseRef, {
+        reason: reason
+      });
+    }
+  }, []);
   var _useAnimatedVisibilit = useAnimatedVisibility({
       isOpen: isOpen,
       shouldAnimate: shouldAnimate,
@@ -252,7 +245,7 @@ export var Popover = /*#__PURE__*/forwardRef(function Popover(_ref, ref) {
 
   // Focus management: initial focus on entry (role-dependent), Tab cycling
   // for dialog roles. Restoration is native for outermost popovers; nested
-  // focus-capturing roles are handled above via the `beforetoggle` snapshot.
+  // popovers are handled above via the `beforetoggle` snapshot.
   // Passing `phase` keeps `useFocusWrap` attached through the animated-exit
   // window (WCAG 2.4.3 guard). See notes/architecture/focus.md.
   useFocusWrap({
@@ -269,7 +262,7 @@ export var Popover = /*#__PURE__*/forwardRef(function Popover(_ref, ref) {
   // Bind via `useLayoutEffect`, and BEFORE the show/hide layout effect
   // below, so listeners are attached when `showPopover()` synchronously
   // dispatches `beforetoggle`. A regular `useEffect` would miss that
-  // first dispatch, dropping the `previouslyFocusedElementRef` snapshot
+  // first dispatch, dropping the `focusRestorationTargetRef` snapshot
   // and breaking nested-popover focus restoration on close. React runs
   // layout effects in source order on the same commit.
   useLayoutEffect(function () {
@@ -282,7 +275,10 @@ export var Popover = /*#__PURE__*/forwardRef(function Popover(_ref, ref) {
     var unbindEscape = bind(element, {
       type: 'keydown',
       listener: function listener(event) {
-        if (event.key === 'Escape') {
+        // Ignore Escape events dispatched after native close.
+        if (event.key === 'Escape' && isNativeElementOpen({
+          element: element
+        })) {
           closeReasonRef.current = 'escape';
         }
       },
@@ -299,7 +295,7 @@ export var Popover = /*#__PURE__*/forwardRef(function Popover(_ref, ref) {
         onToggle(event);
       }
     });
-    // Snapshot `document.activeElement` before `useInitialFocus` moves it,
+    // Snapshot the active element before `useInitialFocus` moves it,
     // then advance the shared visibility lifecycle.
     var unbindBeforeToggle = bind(element, {
       type: 'beforetoggle',
@@ -324,7 +320,6 @@ export var Popover = /*#__PURE__*/forwardRef(function Popover(_ref, ref) {
       return;
     }
     if (isOpen) {
-      programmaticCloseRef.current = false;
       // Clear stale 'escape' from a prior cycle: the ref outlives
       // the host element, and interrupted close lifecycles may not reach
       // `handleToggleClosed` to reset it.
@@ -333,13 +328,13 @@ export var Popover = /*#__PURE__*/forwardRef(function Popover(_ref, ref) {
         element.showPopover();
       } catch (_unused) {}
       return function () {
-        programmaticCloseRef.current = true;
+        closeReasonRef.current = 'programmatic';
         try {
           element.hidePopover();
         } catch (_unused2) {}
       };
     }
-    programmaticCloseRef.current = true;
+    closeReasonRef.current = 'programmatic';
     try {
       element.hidePopover();
     } catch (_unused3) {}

package/dist/types/internal/is-native-element-open.d.ts

@@ -0,0 +1,3 @@
+export declare function isNativeElementOpen({ element }: {
+    element: HTMLElement;
+}): boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/top-layer",
-	"version": "5.0.0",
+	"version": "5.0.1",
 	"description": "Low-level layering primitives based on popover and dialog",
 	"homepage": "https://atlassian.design/components/top-layer",
 	"repository": "https://bitbucket.org/atlassian/atlassian-frontend-mirror",
@@ -40,7 +40,7 @@
 		"@atlaskit/ds-lib": "^8.0.0",
 		"@atlaskit/layering": "^5.2.0",
 		"@atlaskit/react-compiler-gating": "^0.2.0",
-		"@atlaskit/tokens": "^16.12.0",
+		"@atlaskit/tokens": "^17.0.0",
 		"@babel/runtime": "^7.0.0",
 		"@compiled/react": "^1.0.2",
 		"bind-event-listener": "^3.0.0",