@atlaskit/top-layer 5.0.2 → 5.0.4

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @atlaskit/top-layer
 
+## 5.0.4
+
+### Patch Changes
+
+- Updated dependencies
+
+## 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

package/dist/cjs/popover/popover.js

@@ -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/es2019/popover/popover.js

@@ -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/esm/popover/popover.js

@@ -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/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/top-layer",
-	"version": "5.0.2",
+	"version": "5.0.4",
 	"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": "^17.0.0",
+		"@atlaskit/tokens": "^18.0.0",
 		"@babel/runtime": "^7.0.0",
 		"@compiled/react": "^1.0.2",
 		"bind-event-listener": "^3.0.0",