@atlaskit/top-layer 5.0.1 → 5.0.3

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @atlaskit/top-layer
 
+## 5.0.3
+
+### Patch Changes
+
+- [`c441257918c88`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/c441257918c88) -
+  Extract and document the popover focus restoration fallback without changing behavior.
+
+## 5.0.2
+
+### Patch Changes
+
+- [`e8dcde6cc4e85`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/e8dcde6cc4e85) -
+  Anchored Popovers now always stay visible, even if the element they are anchored to is invisible
+
 ## 5.0.1
 
 ### Patch Changes

package/dist/cjs/dialog/dialog-content.js

@@ -1,4 +1,4 @@
-/* dialog-content.tsx generated by @compiled/babel-plugin v3.0.1 */
+/* dialog-content.tsx generated by @compiled/babel-plugin v3.0.2 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

package/dist/cjs/internal/anchor-positioning/apply-anchor-positioning.js

@@ -57,6 +57,38 @@ function applyAnchorPositioning(_ref) {
       placement: placement
     })
   },
+  /**
+   * **`position-visibility: always`**
+   *
+   * `position-visibility` is used to control the visibility of an anchored
+   * popover based on the visibility of the element being anchored to (the target).
+   *
+   * Default `position-visibility` value: `anchors-visible` → hide the anchored
+   * popover when the target is fully clipped by an ancestor (eg a scroll container)
+   * or is `visibility:hidden`.
+   * Sadly this "automatic hiding" does not actually "close" the popover,
+   * so things like `:popover-open` are still active, even though the popover
+   * is no longer painted and no longer receives pointer input. Chrome keeps it
+   * focusable and in the accessibility tree, so keyboard and screen reader users
+   * can still land inside a surface that is not painted.
+   * Per-engine behaviour: `notes/decisions/position-visibility-always.md`.
+   *
+   * Generally we have not run into issues with the default (`anchors-visible`)
+   *
+   * Exceptions:
+   *  - Target is intentionally not visible (eg `position:absolute` moving it outside of
+   *    its parent's "clipped boundary", or a `visibility:hidden` trigger)
+   *  - A trigger is scrolled out of its scroll container while the popover is open.
+   *
+   * We are switching from `anchors-visible` → `always` _for now_ to force no
+   * automatic hiding of the popover. There seems to be no compelling reason to use
+   * the default value. If one arises in the future, we could look towards making
+   *  this behaviour configurable.
+   */
+  {
+    property: 'position-visibility',
+    value: 'always'
+  },
   // Reset browser default popover positioning that conflicts
   // with anchor positioning (UA: `inset: 0; margin: auto;`)
   {

package/dist/cjs/popover/popover.js

@@ -1,4 +1,4 @@
-/* popover.tsx generated by @compiled/babel-plugin v3.0.1 */
+/* popover.tsx generated by @compiled/babel-plugin v3.0.2 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -21,6 +21,29 @@ var _useAnimatedVisibility = require("../internal/use-animated-visibility");
 var _useFocusWrap = require("../internal/use-focus-wrap");
 var _useInitialFocus = require("../internal/use-initial-focus");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+/**
+ * Native restoration only covers the first popover in an auto/hint stack, not each nested popover.
+ * This fallback also supports manual popovers, which have no native restoration target.
+ * See https://html.spec.whatwg.org/multipage/popover.html#show-popover (step 15.8).
+ */
+function restoreFocus(_ref) {
+  var popover = _ref.popover,
+    focusRestorationTarget = _ref.focusRestorationTarget;
+  if (!focusRestorationTarget) {
+    return;
+  }
+  var ownerDocument = popover.ownerDocument;
+  // Native restoration has finished. Preserve focus moved outside the popover.
+  var activeElementAfterClose = ownerDocument.activeElement;
+  // Before close, we checked that focus was inside. Body can now mean focus was lost during close.
+  if (activeElementAfterClose === ownerDocument.body || popover.contains(activeElementAfterClose)) {
+    // Match native popover restoration, which does not scroll the viewport.
+    focusRestorationTarget.focus({
+      preventScroll: true
+    });
+  }
+}
+
 /**
  * Detects `popover="hint"` support via DOM reflection. SSR-safe, cached.
  */
@@ -123,24 +146,24 @@ var POPUP_ROLES = new Set(['menu', 'listbox', 'dialog', 'alertdialog', 'tree', '
  * should defer the open past the in-flight gesture; see
  * `Select.openMenuAfterPointerUp`.
  */
-var Popover = exports.Popover = /*#__PURE__*/(0, _react.forwardRef)(function Popover(_ref, ref) {
-  var children = _ref.children,
-    _ref$mode = _ref.mode,
-    modeProp = _ref$mode === void 0 ? 'auto' : _ref$mode,
-    onClose = _ref.onClose,
-    onEnterFinish = _ref.onEnterFinish,
-    onExitFinish = _ref.onExitFinish,
-    _ref$shouldAnimate = _ref.shouldAnimate,
-    shouldAnimate = _ref$shouldAnimate === void 0 ? false : _ref$shouldAnimate,
-    placement = _ref.placement,
-    testId = _ref.testId,
-    isOpen = _ref.isOpen,
-    enteringAnimationXcss = _ref.enteringAnimationXcss,
-    exitingAnimationXcss = _ref.exitingAnimationXcss,
-    role = _ref.role,
-    label = _ref.label,
-    labelledBy = _ref.labelledBy,
-    idProp = _ref.id;
+var Popover = exports.Popover = /*#__PURE__*/(0, _react.forwardRef)(function Popover(_ref2, ref) {
+  var children = _ref2.children,
+    _ref2$mode = _ref2.mode,
+    modeProp = _ref2$mode === void 0 ? 'auto' : _ref2$mode,
+    onClose = _ref2.onClose,
+    onEnterFinish = _ref2.onEnterFinish,
+    onExitFinish = _ref2.onExitFinish,
+    _ref2$shouldAnimate = _ref2.shouldAnimate,
+    shouldAnimate = _ref2$shouldAnimate === void 0 ? false : _ref2$shouldAnimate,
+    placement = _ref2.placement,
+    testId = _ref2.testId,
+    isOpen = _ref2.isOpen,
+    enteringAnimationXcss = _ref2.enteringAnimationXcss,
+    exitingAnimationXcss = _ref2.exitingAnimationXcss,
+    role = _ref2.role,
+    label = _ref2.label,
+    labelledBy = _ref2.labelledBy,
+    idProp = _ref2.id;
   var autoId = (0, _react.useId)();
   var ownRef = (0, _react.useRef)(null);
   var combinedRef = (0, _mergeRefs.default)([ownRef, ref].filter(Boolean));
@@ -189,8 +212,7 @@ var Popover = exports.Popover = /*#__PURE__*/(0, _react.forwardRef)(function Pop
   // 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
-  // because the browser only restores the outermost.
+  // Pre-open focus target, cleared before close when restoration is not eligible.
   var focusRestorationTargetRef = (0, _react.useRef)(null);
   var handleBeforeToggle = (0, _react.useCallback)(function (event) {
     var popover = event.currentTarget;
@@ -204,7 +226,11 @@ var Popover = exports.Popover = /*#__PURE__*/(0, _react.forwardRef)(function Pop
       return;
     }
 
-    // Check before closing so focus already on body is not mistaken for focus lost during close.
+    /**
+     * Like native restoration, leave external focus alone and skip light dismiss.
+     * Check before closing so focus already on body is not mistaken for focus lost during close.
+     * See https://html.spec.whatwg.org/multipage/popover.html#hide-popover-algorithm (step 20.2).
+     */
     if (closeReasonRef.current === 'light-dismiss' || !popover.contains(activeElement)) {
       focusRestorationTargetRef.current = null;
     }
@@ -220,17 +246,12 @@ var Popover = exports.Popover = /*#__PURE__*/(0, _react.forwardRef)(function Pop
     // Reset reason so a stale 'escape' from a race with Escape keydown
     // does not corrupt the next browser-dismiss cycle.
     closeReasonRef.current = 'light-dismiss';
-    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
-        });
-      }
-    }
+
+    // Run after native restoration, before notifying the consumer, which may move focus itself.
+    restoreFocus({
+      popover: popover,
+      focusRestorationTarget: focusRestorationTarget
+    });
 
     // Programmatic closes are already known to the consumer.
     if (reason !== 'programmatic') {

package/dist/cjs/popover-surface/popover-surface.js

@@ -1,4 +1,4 @@
-/* popover-surface.tsx generated by @compiled/babel-plugin v3.0.1 */
+/* popover-surface.tsx generated by @compiled/babel-plugin v3.0.2 */
 "use strict";
 
 var _typeof = require("@babel/runtime/helpers/typeof");

package/dist/es2019/dialog/dialog-content.js

@@ -1,4 +1,4 @@
-/* dialog-content.tsx generated by @compiled/babel-plugin v3.0.1 */
+/* dialog-content.tsx generated by @compiled/babel-plugin v3.0.2 */
 import "./dialog-content.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React, { forwardRef, useCallback, useId, useLayoutEffect, useRef } from 'react';

package/dist/es2019/internal/anchor-positioning/apply-anchor-positioning.js

@@ -51,6 +51,38 @@ export function applyAnchorPositioning({
       placement
     })
   },
+  /**
+   * **`position-visibility: always`**
+   *
+   * `position-visibility` is used to control the visibility of an anchored
+   * popover based on the visibility of the element being anchored to (the target).
+   *
+   * Default `position-visibility` value: `anchors-visible` → hide the anchored
+   * popover when the target is fully clipped by an ancestor (eg a scroll container)
+   * or is `visibility:hidden`.
+   * Sadly this "automatic hiding" does not actually "close" the popover,
+   * so things like `:popover-open` are still active, even though the popover
+   * is no longer painted and no longer receives pointer input. Chrome keeps it
+   * focusable and in the accessibility tree, so keyboard and screen reader users
+   * can still land inside a surface that is not painted.
+   * Per-engine behaviour: `notes/decisions/position-visibility-always.md`.
+   *
+   * Generally we have not run into issues with the default (`anchors-visible`)
+   *
+   * Exceptions:
+   *  - Target is intentionally not visible (eg `position:absolute` moving it outside of
+   *    its parent's "clipped boundary", or a `visibility:hidden` trigger)
+   *  - A trigger is scrolled out of its scroll container while the popover is open.
+   *
+   * We are switching from `anchors-visible` → `always` _for now_ to force no
+   * automatic hiding of the popover. There seems to be no compelling reason to use
+   * the default value. If one arises in the future, we could look towards making
+   *  this behaviour configurable.
+   */
+  {
+    property: 'position-visibility',
+    value: 'always'
+  },
   // Reset browser default popover positioning that conflicts
   // with anchor positioning (UA: `inset: 0; margin: auto;`)
   {

package/dist/es2019/popover/popover.js

@@ -1,4 +1,4 @@
-/* popover.tsx generated by @compiled/babel-plugin v3.0.1 */
+/* popover.tsx generated by @compiled/babel-plugin v3.0.2 */
 import "./popover.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React, { forwardRef, useCallback, useId, useLayoutEffect, useMemo, useRef } from 'react';
@@ -12,6 +12,32 @@ import { resolvePlacement } from '../internal/resolve-placement';
 import { useAnimatedVisibility } from '../internal/use-animated-visibility';
 import { useFocusWrap } from '../internal/use-focus-wrap';
 import { useInitialFocus } from '../internal/use-initial-focus';
+/**
+ * Native restoration only covers the first popover in an auto/hint stack, not each nested popover.
+ * This fallback also supports manual popovers, which have no native restoration target.
+ * See https://html.spec.whatwg.org/multipage/popover.html#show-popover (step 15.8).
+ */
+function restoreFocus({
+  popover,
+  focusRestorationTarget
+}) {
+  if (!focusRestorationTarget) {
+    return;
+  }
+  const {
+    ownerDocument
+  } = popover;
+  // Native restoration has finished. Preserve focus moved outside the popover.
+  const activeElementAfterClose = ownerDocument.activeElement;
+  // Before close, we checked that focus was inside. Body can now mean focus was lost during close.
+  if (activeElementAfterClose === ownerDocument.body || popover.contains(activeElementAfterClose)) {
+    // Match native popover restoration, which does not scroll the viewport.
+    focusRestorationTarget.focus({
+      preventScroll: true
+    });
+  }
+}
+
 /**
  * Detects `popover="hint"` support via DOM reflection. SSR-safe, cached.
  */
@@ -181,8 +207,7 @@ export const Popover = /*#__PURE__*/forwardRef(function Popover({
   // 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
-  // because the browser only restores the outermost.
+  // Pre-open focus target, cleared before close when restoration is not eligible.
   const focusRestorationTargetRef = useRef(null);
   const handleBeforeToggle = useCallback(event => {
     const popover = event.currentTarget;
@@ -200,7 +225,11 @@ export const Popover = /*#__PURE__*/forwardRef(function Popover({
       return;
     }
 
-    // Check before closing so focus already on body is not mistaken for focus lost during close.
+    /**
+     * Like native restoration, leave external focus alone and skip light dismiss.
+     * Check before closing so focus already on body is not mistaken for focus lost during close.
+     * See https://html.spec.whatwg.org/multipage/popover.html#hide-popover-algorithm (step 20.2).
+     */
     if (closeReasonRef.current === 'light-dismiss' || !popover.contains(activeElement)) {
       focusRestorationTargetRef.current = null;
     }
@@ -216,19 +245,12 @@ export const Popover = /*#__PURE__*/forwardRef(function Popover({
     // Reset reason so a stale 'escape' from a race with Escape keydown
     // does not corrupt the next browser-dismiss cycle.
     closeReasonRef.current = 'light-dismiss';
-    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
-        });
-      }
-    }
+
+    // Run after native restoration, before notifying the consumer, which may move focus itself.
+    restoreFocus({
+      popover,
+      focusRestorationTarget
+    });
 
     // Programmatic closes are already known to the consumer.
     if (reason !== 'programmatic') {

package/dist/es2019/popover-surface/popover-surface.js

@@ -1,4 +1,4 @@
-/* popover-surface.tsx generated by @compiled/babel-plugin v3.0.1 */
+/* popover-surface.tsx generated by @compiled/babel-plugin v3.0.2 */
 import "./popover-surface.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";

package/dist/esm/dialog/dialog-content.js

@@ -1,4 +1,4 @@
-/* dialog-content.tsx generated by @compiled/babel-plugin v3.0.1 */
+/* dialog-content.tsx generated by @compiled/babel-plugin v3.0.2 */
 import "./dialog-content.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React, { forwardRef, useCallback, useId, useLayoutEffect, useRef } from 'react';

package/dist/esm/internal/anchor-positioning/apply-anchor-positioning.js

@@ -51,6 +51,38 @@ export function applyAnchorPositioning(_ref) {
       placement: placement
     })
   },
+  /**
+   * **`position-visibility: always`**
+   *
+   * `position-visibility` is used to control the visibility of an anchored
+   * popover based on the visibility of the element being anchored to (the target).
+   *
+   * Default `position-visibility` value: `anchors-visible` → hide the anchored
+   * popover when the target is fully clipped by an ancestor (eg a scroll container)
+   * or is `visibility:hidden`.
+   * Sadly this "automatic hiding" does not actually "close" the popover,
+   * so things like `:popover-open` are still active, even though the popover
+   * is no longer painted and no longer receives pointer input. Chrome keeps it
+   * focusable and in the accessibility tree, so keyboard and screen reader users
+   * can still land inside a surface that is not painted.
+   * Per-engine behaviour: `notes/decisions/position-visibility-always.md`.
+   *
+   * Generally we have not run into issues with the default (`anchors-visible`)
+   *
+   * Exceptions:
+   *  - Target is intentionally not visible (eg `position:absolute` moving it outside of
+   *    its parent's "clipped boundary", or a `visibility:hidden` trigger)
+   *  - A trigger is scrolled out of its scroll container while the popover is open.
+   *
+   * We are switching from `anchors-visible` → `always` _for now_ to force no
+   * automatic hiding of the popover. There seems to be no compelling reason to use
+   * the default value. If one arises in the future, we could look towards making
+   *  this behaviour configurable.
+   */
+  {
+    property: 'position-visibility',
+    value: 'always'
+  },
   // Reset browser default popover positioning that conflicts
   // with anchor positioning (UA: `inset: 0; margin: auto;`)
   {

package/dist/esm/popover/popover.js

@@ -1,4 +1,4 @@
-/* popover.tsx generated by @compiled/babel-plugin v3.0.1 */
+/* popover.tsx generated by @compiled/babel-plugin v3.0.2 */
 import "./popover.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React, { forwardRef, useCallback, useId, useLayoutEffect, useMemo, useRef } from 'react';
@@ -12,6 +12,29 @@ import { resolvePlacement } from '../internal/resolve-placement';
 import { useAnimatedVisibility } from '../internal/use-animated-visibility';
 import { useFocusWrap } from '../internal/use-focus-wrap';
 import { useInitialFocus } from '../internal/use-initial-focus';
+/**
+ * Native restoration only covers the first popover in an auto/hint stack, not each nested popover.
+ * This fallback also supports manual popovers, which have no native restoration target.
+ * See https://html.spec.whatwg.org/multipage/popover.html#show-popover (step 15.8).
+ */
+function restoreFocus(_ref) {
+  var popover = _ref.popover,
+    focusRestorationTarget = _ref.focusRestorationTarget;
+  if (!focusRestorationTarget) {
+    return;
+  }
+  var ownerDocument = popover.ownerDocument;
+  // Native restoration has finished. Preserve focus moved outside the popover.
+  var activeElementAfterClose = ownerDocument.activeElement;
+  // Before close, we checked that focus was inside. Body can now mean focus was lost during close.
+  if (activeElementAfterClose === ownerDocument.body || popover.contains(activeElementAfterClose)) {
+    // Match native popover restoration, which does not scroll the viewport.
+    focusRestorationTarget.focus({
+      preventScroll: true
+    });
+  }
+}
+
 /**
  * Detects `popover="hint"` support via DOM reflection. SSR-safe, cached.
  */
@@ -114,24 +137,24 @@ var POPUP_ROLES = new Set(['menu', 'listbox', 'dialog', 'alertdialog', 'tree', '
  * should defer the open past the in-flight gesture; see
  * `Select.openMenuAfterPointerUp`.
  */
-export var Popover = /*#__PURE__*/forwardRef(function Popover(_ref, ref) {
-  var children = _ref.children,
-    _ref$mode = _ref.mode,
-    modeProp = _ref$mode === void 0 ? 'auto' : _ref$mode,
-    onClose = _ref.onClose,
-    onEnterFinish = _ref.onEnterFinish,
-    onExitFinish = _ref.onExitFinish,
-    _ref$shouldAnimate = _ref.shouldAnimate,
-    shouldAnimate = _ref$shouldAnimate === void 0 ? false : _ref$shouldAnimate,
-    placement = _ref.placement,
-    testId = _ref.testId,
-    isOpen = _ref.isOpen,
-    enteringAnimationXcss = _ref.enteringAnimationXcss,
-    exitingAnimationXcss = _ref.exitingAnimationXcss,
-    role = _ref.role,
-    label = _ref.label,
-    labelledBy = _ref.labelledBy,
-    idProp = _ref.id;
+export var Popover = /*#__PURE__*/forwardRef(function Popover(_ref2, ref) {
+  var children = _ref2.children,
+    _ref2$mode = _ref2.mode,
+    modeProp = _ref2$mode === void 0 ? 'auto' : _ref2$mode,
+    onClose = _ref2.onClose,
+    onEnterFinish = _ref2.onEnterFinish,
+    onExitFinish = _ref2.onExitFinish,
+    _ref2$shouldAnimate = _ref2.shouldAnimate,
+    shouldAnimate = _ref2$shouldAnimate === void 0 ? false : _ref2$shouldAnimate,
+    placement = _ref2.placement,
+    testId = _ref2.testId,
+    isOpen = _ref2.isOpen,
+    enteringAnimationXcss = _ref2.enteringAnimationXcss,
+    exitingAnimationXcss = _ref2.exitingAnimationXcss,
+    role = _ref2.role,
+    label = _ref2.label,
+    labelledBy = _ref2.labelledBy,
+    idProp = _ref2.id;
   var autoId = useId();
   var ownRef = useRef(null);
   var combinedRef = mergeRefs([ownRef, ref].filter(Boolean));
@@ -180,8 +203,7 @@ export var Popover = /*#__PURE__*/forwardRef(function Popover(_ref, ref) {
   // 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
-  // because the browser only restores the outermost.
+  // Pre-open focus target, cleared before close when restoration is not eligible.
   var focusRestorationTargetRef = useRef(null);
   var handleBeforeToggle = useCallback(function (event) {
     var popover = event.currentTarget;
@@ -195,7 +217,11 @@ export var Popover = /*#__PURE__*/forwardRef(function Popover(_ref, ref) {
       return;
     }
 
-    // Check before closing so focus already on body is not mistaken for focus lost during close.
+    /**
+     * Like native restoration, leave external focus alone and skip light dismiss.
+     * Check before closing so focus already on body is not mistaken for focus lost during close.
+     * See https://html.spec.whatwg.org/multipage/popover.html#hide-popover-algorithm (step 20.2).
+     */
     if (closeReasonRef.current === 'light-dismiss' || !popover.contains(activeElement)) {
       focusRestorationTargetRef.current = null;
     }
@@ -211,17 +237,12 @@ export var Popover = /*#__PURE__*/forwardRef(function Popover(_ref, ref) {
     // Reset reason so a stale 'escape' from a race with Escape keydown
     // does not corrupt the next browser-dismiss cycle.
     closeReasonRef.current = 'light-dismiss';
-    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
-        });
-      }
-    }
+
+    // Run after native restoration, before notifying the consumer, which may move focus itself.
+    restoreFocus({
+      popover: popover,
+      focusRestorationTarget: focusRestorationTarget
+    });
 
     // Programmatic closes are already known to the consumer.
     if (reason !== 'programmatic') {

package/dist/esm/popover-surface/popover-surface.js

@@ -1,4 +1,4 @@
-/* popover-surface.tsx generated by @compiled/babel-plugin v3.0.1 */
+/* popover-surface.tsx generated by @compiled/babel-plugin v3.0.2 */
 import "./popover-surface.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/top-layer",
-	"version": "5.0.1",
+	"version": "5.0.3",
 	"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",