@atlaskit/top-layer 4.4.2 → 4.4.4

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/top-layer
 
+## 4.4.4
+
+### Patch Changes
+
+- [`610d564dbc5dd`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/610d564dbc5dd) -
+  Behind `platform-dst-top-layer`, harden the Popover and Dialog animation lifecycle state machine
+  and completion callbacks, restore focus before controlled Popover closure removes native
+  listeners, and preserve Modal Dialog open-complete callbacks across reopen cycles.
+
+## 4.4.3
+
+### Patch Changes
+
+- [`25d19b9cc0200`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/25d19b9cc0200) -
+  Handle non-tabbable focus origins and skip hidden, disabled, or inert elements when wrapping focus
+
 ## 4.4.2
 
 ### Patch Changes

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

@@ -1,4 +1,4 @@
-/* dialog-content.tsx generated by @compiled/babel-plugin v2.0.0 */
+/* dialog-content.tsx generated by @compiled/babel-plugin v3.0.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -85,6 +85,13 @@ var Dialog = exports.Dialog = /*#__PURE__*/(0, _react.forwardRef)(function Dialo
   var ownRef = (0, _react.useRef)(null);
   var combinedRef = (0, _mergeRefs.default)([ownRef, ref]);
   var closeReasonRef = (0, _react.useRef)(null);
+  var dismissedByRef = (0, _react.useRef)(dismissedBy);
+  var onCloseRef = (0, _react.useRef)(onClose);
+  // Keep native event handlers stable while ensuring they read the latest committed props.
+  (0, _react.useLayoutEffect)(function () {
+    dismissedByRef.current = dismissedBy;
+    onCloseRef.current = onClose;
+  }, [dismissedBy, onClose]);
   var _useAnimatedVisibilit = (0, _useAnimatedVisibility.useAnimatedVisibility)({
       isOpen: isOpen,
       shouldAnimate: shouldAnimate,
@@ -93,11 +100,52 @@ var Dialog = exports.Dialog = /*#__PURE__*/(0, _react.forwardRef)(function Dialo
       onExitFinish: onExitFinish
     }),
     phase = _useAnimatedVisibilit.phase,
+    isMounted = _useAnimatedVisibilit.isMounted,
+    onBeforeToggle = _useAnimatedVisibilit.onBeforeToggle,
     onToggle = _useAnimatedVisibilit.onToggle;
 
-  // True while the host element is mounted (any phase except `closed`).
-  // Used as a dep so listener-rebind effects re-attach after a remount.
-  var isVisible = phase !== 'closed';
+  // Ordering is important: bind native lifecycle listeners before the later
+  // layout effect calls showModal() or close(), because `beforetoggle` fires
+  // synchronously during those calls.
+  (0, _react.useLayoutEffect)(function () {
+    if (!isMounted) {
+      return;
+    }
+    var dialog = ownRef.current;
+    if (!dialog) {
+      return;
+    }
+    return (0, _bindEventListener.bindAll)(dialog, [{
+      type: 'beforetoggle',
+      listener: onBeforeToggle
+    }, {
+      // Browsers retarget clicks on ::backdrop to the <dialog> element.
+      // Close on backdrop click when outside-click dismissal is enabled.
+      type: 'click',
+      listener: function listener(event) {
+        if (event.target === event.currentTarget && dismissedByRef.current === 'escape-and-outside-click') {
+          closeReasonRef.current = 'overlay-click';
+          dialog.close();
+        }
+      }
+    }, {
+      type: 'toggle',
+      listener: function listener(event) {
+        if (event.newState === 'closed') {
+          var reason = closeReasonRef.current;
+          closeReasonRef.current = null;
+          // A reason is only set for user-initiated closes. When React closes the
+          // dialog because isOpen changed, the consumer already knows.
+          if (reason) {
+            onCloseRef.current({
+              reason: reason
+            });
+          }
+        }
+        onToggle(event);
+      }
+    }]);
+  }, [isMounted, onBeforeToggle, onToggle]);
 
   // Native `<dialog>.showModal()` traps focus but wraps through `<body>` at
   // the boundary (A → B → C → body → A). This hook intercepts Tab to wrap
@@ -143,7 +191,7 @@ var Dialog = exports.Dialog = /*#__PURE__*/(0, _react.forwardRef)(function Dialo
   // See notes/decisions/safari-escape-nested-popover-in-dialog.md
   var _useSafariEscapeFix = (0, _useSafariEscapeFix2.useSafariEscapeFix)({
       dialogRef: ownRef,
-      isVisible: isVisible
+      isVisible: isMounted
     }),
     shouldIgnoreEscape = _useSafariEscapeFix.shouldIgnoreEscape;
 
@@ -176,49 +224,11 @@ var Dialog = exports.Dialog = /*#__PURE__*/(0, _react.forwardRef)(function Dialo
     closeReasonRef.current = 'escape';
   }, [dismissedBy, shouldIgnoreEscape]);
 
-  // Handle backdrop interaction
-  // Attached via bind-event-listener rather than a React prop so we avoid
-  // a11y lint suppressions on the <dialog> element.
-  // The click listener provides light dismiss consistently across browsers.
-  // `isVisible` is in deps so the listener re-binds to the new <dialog>
-  // element after a host unmount / remount cycle.
-  (0, _react.useLayoutEffect)(function () {
-    var dialog = ownRef.current;
-    if (!dialog) {
-      return;
-    }
-    return (0, _bindEventListener.bindAll)(dialog, [{
-      type: 'click',
-      listener: function listener(event) {
-        if (event.target === event.currentTarget && dismissedBy === 'escape-and-outside-click') {
-          closeReasonRef.current = 'overlay-click';
-          // Calls native close because this is emulating the native light-dismiss behavior
-          dialog.close();
-        }
-      }
-    }, {
-      type: 'toggle',
-      listener: function listener(event) {
-        if (event.newState === 'closed') {
-          var reason = closeReasonRef.current;
-          closeReasonRef.current = null;
-          if (reason) {
-            onClose({
-              reason: reason
-            });
-          }
-        }
-
-        // Visibility cleanup runs after close-reason handling.
-        onToggle(event);
-      }
-    }]);
-  }, [dismissedBy, onClose, onToggle, isVisible]);
-
   // Unmount the `<dialog>` once exit completes so it does not leave an
-  // empty `role="dialog"` element in the accessibility tree. On the next
-  // open the element remounts and its effects run against the fresh element.
-  if (!isVisible) {
+  // empty `role="dialog"` element in the accessibility tree. A later open
+  // remounts a fresh element, so the listener-binding and native-visibility
+  // effects run against that element.
+  if (!isMounted) {
     return null;
   }
   var shouldAnimateBackdrop = !shouldHideBackdrop && shouldAnimate;

package/dist/cjs/focus/get-closest-layer.js

@@ -0,0 +1,10 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getClosestLayer = getClosestLayer;
+function getClosestLayer(_ref) {
+  var element = _ref.element;
+  return element.closest('[popover], dialog');
+}

package/dist/cjs/focus/get-focusables.js

@@ -4,10 +4,35 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.getFocusables = getFocusables;
-var _isInSameLayer = require("./is-in-same-layer");
-var _selectors = require("./selectors");
+var _getClosestLayer = require("./get-closest-layer");
+var focusableExclusions = ['[tabindex="-1"]', ':disabled', '[aria-disabled="true"]', '[aria-hidden="true"]'];
+var exclusionSelector = focusableExclusions.map(function (selector) {
+  return ":not(".concat(selector, ")");
+}).join('');
+var focusableSelector = ['a[href]', 'area[href]', 'input:not([type="hidden"])', 'select', 'textarea', 'button', 'iframe', 'audio[controls]', 'video[controls]', '[contenteditable]:not([contenteditable="false"])', '[tabindex]'].map(function (selector) {
+  return "".concat(selector).concat(exclusionSelector);
+}).join(',');
+function isVisible(element) {
+  // Visibility filtering must not break focus navigation when the API is unsupported.
+  if (typeof element.checkVisibility !== 'function') {
+    return true;
+  }
+  try {
+    // Exclude elements hidden by display, content-visibility or visibility because
+    // they cannot receive focus. Offscreen, occluded and opacity-zero elements can
+    // receive focus, so they intentionally remain included.
+    return element.checkVisibility({
+      checkVisibilityCSS: true
+    });
+  } catch (_unused) {
+    return true;
+  }
+}
+
 /**
  * Returns all focusable HTMLElements within the container, optionally filtered.
+ * Elements with `tabindex="-1"` are excluded because they can be focused
+ * programmatically but are not sequential focus navigation destinations.
  *
  * Focusables that belong to a nested top-layer scope (a `[popover]` or
  * `<dialog>` descendant of the container) are excluded - those elements
@@ -17,14 +42,24 @@ var _selectors = require("./selectors");
 function getFocusables(_ref) {
   var container = _ref.container,
     filter = _ref.filter;
-  return Array.from(container.querySelectorAll(_selectors.selectors.focusable)).filter(function (element) {
-    return element instanceof HTMLElement;
-  }).filter(function (element) {
-    return (0, _isInSameLayer.isInSameLayer)({
-      element: element,
-      container: container
-    });
-  }).filter(function (element) {
+  var containerLayer = (0, _getClosestLayer.getClosestLayer)({
+    element: container
+  });
+  return Array.from(container.querySelectorAll(focusableSelector)).filter(function (element) {
+    if (!(element instanceof HTMLElement)) {
+      return false;
+    }
+    if ((0, _getClosestLayer.getClosestLayer)({
+      element: element
+    }) !== containerLayer) {
+      return false;
+    }
+    if (element.closest('[inert]')) {
+      return false;
+    }
+    if (!isVisible(element)) {
+      return false;
+    }
     return !filter || filter(element, container);
   });
 }

package/dist/cjs/focus/get-next-focusable.js

@@ -5,17 +5,20 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.getNextFocusable = getNextFocusable;
 var _getFocusables = require("./get-focusables");
-var _selectors = require("./selectors");
 /**
  * Returns the next focusable element in the given direction relative to the
  * currently focused element within the container. Wraps around at both ends.
  *
- * Returns `null` if there is no focused element within the container or if
- * the focused element is not in the list of focusable elements.
+ * The currently focused element does not need to be tabbable. This prevents
+ * navigation from getting stuck on an element that was programmatically or
+ * pointer focused with `tabindex="-1"`. Negative-tab-index elements remain
+ * excluded as destinations.
+ *
+ * Returns `null` if there is no focused element within the container.
  */
 
 function getNextFocusable(_ref) {
-  var _all$nextIndex;
+  var _all3;
   var container = _ref.container,
     direction = _ref.direction,
     filter = _ref.filter;
@@ -23,21 +26,43 @@ function getNextFocusable(_ref) {
     container: container,
     filter: filter
   });
-  var current = container.querySelector(_selectors.selectors.focused);
-  if (!(current instanceof HTMLElement)) {
+  var first = all[0];
+  var last = all[all.length - 1];
+
+  // Checking the elements directly narrows types from `HTMLElement | undefined`.
+  if (!first || !last) {
     return null;
   }
-  var index = all.indexOf(current);
-  if (index === -1) {
+  var current = container.ownerDocument.activeElement;
+  if (!(current instanceof HTMLElement) || !container.contains(current)) {
     return null;
   }
-  var nextIndex = function () {
+  var index = all.indexOf(current);
+
+  // The focused element can be absent from `all` when it is non-tabbable or
+  // excluded by the filter. Find the first focusable element that follows it in
+  // the DOM, which identifies the nearest focusable destination in either direction.
+  if (index === -1) {
+    var _all;
+    var followingIndex = all.findIndex(function (element) {
+      return Boolean(current.compareDocumentPosition(element) & current.DOCUMENT_POSITION_FOLLOWING);
+    });
     if (direction === 'forwards') {
-      return (index + 1) % all.length;
+      var _all$followingIndex;
+      // If nothing follows the current element, then wrap to the start.
+      return (_all$followingIndex = all[followingIndex]) !== null && _all$followingIndex !== void 0 ? _all$followingIndex : first;
     }
-    var proposed = index - 1;
-    // if going into negative numbers, loop back to the last item
-    return proposed < 0 ? all.length - 1 : proposed;
-  }();
-  return (_all$nextIndex = all[nextIndex]) !== null && _all$nextIndex !== void 0 ? _all$nextIndex : null;
+
+    // The closest preceding element is immediately before the first following one.
+    // A missing adjacent entry means the backward sequence wraps to the end.
+    return (_all = all[followingIndex - 1]) !== null && _all !== void 0 ? _all : last;
+  }
+
+  // The current element is tabbable, so use its adjacent list entry and wrap
+  // when it is already at the boundary.
+  if (direction === 'forwards') {
+    var _all2;
+    return (_all2 = all[index + 1]) !== null && _all2 !== void 0 ? _all2 : first;
+  }
+  return (_all3 = all[index - 1]) !== null && _all3 !== void 0 ? _all3 : last;
 }

package/dist/cjs/focus/is-nested-layer-focused.js

@@ -4,17 +4,15 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.isNestedLayerFocused = isNestedLayerFocused;
-var _browserApis = require("@atlaskit/browser-apis");
-var _isInSameLayer = require("./is-in-same-layer");
+var _getClosestLayer = require("./get-closest-layer");
 /**
  * Returns `true` when `document.activeElement` is inside a nested top-layer
- * descendant of `container` (a `[popover]`, `<dialog>`, `[role="dialog"]` or
- * `[role="alertdialog"]` that is itself a descendant of `container`).
+ * descendant of `container` (a `[popover]` or `<dialog>` that is itself a
+ * descendant of `container`).
  */
 function isNestedLayerFocused(_ref) {
-  var _getDocument;
   var container = _ref.container;
-  var focused = (_getDocument = (0, _browserApis.getDocument)()) === null || _getDocument === void 0 ? void 0 : _getDocument.activeElement;
+  var focused = container.ownerDocument.activeElement;
   if (!(focused instanceof HTMLElement)) {
     return false;
   }
@@ -25,8 +23,9 @@ function isNestedLayerFocused(_ref) {
   }
 
   // If not in the same layer, must be in a nested layer
-  return !(0, _isInSameLayer.isInSameLayer)({
-    element: focused,
-    container: container
+  return (0, _getClosestLayer.getClosestLayer)({
+    element: focused
+  }) !== (0, _getClosestLayer.getClosestLayer)({
+    element: container
   });
 }