@atlaskit/top-layer 6.2.3 → 6.2.5

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlaskit/top-layer
 
+## 6.2.5
+
+### Patch Changes
+
+- [`b82a5dc33d636`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/b82a5dc33d636) -
+  The testing polyfill now fires a cancelable cancel event when Escape targets a dialog. Unless
+  keydown or cancel is prevented, the dialog closes and emits its existing closing beforetoggle,
+  toggle and close events. Escape respects closedby and dialog/popover opening order.
+
+## 6.2.4
+
+### Patch Changes
+
+- [`4247678302a95`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/4247678302a95) -
+  Fixed server-side rendering errors and warnings in the top-layer popover, dialog and popper paths
+  (`platform-dst-top-layer`).
+- Updated dependencies
+
 ## 6.2.3
 
 ### Patch Changes

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

@@ -14,6 +14,7 @@ var _react2 = require("@compiled/react");
 var _bindEventListener = require("bind-event-listener");
 var _mergeRefs = _interopRequireDefault(require("@atlaskit/ds-lib/merge-refs"));
 var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
+var _useLayoutEffect = require("@atlaskit/ds-lib/use-layout-effect");
 var _useNotifyOpenLayerObserver = require("@atlaskit/layering/use-notify-open-layer-observer");
 var _useAnimatedVisibility = require("../internal/use-animated-visibility");
 var _useFocusWrap = require("../internal/use-focus-wrap");
@@ -83,7 +84,7 @@ var Dialog = exports.Dialog = /*#__PURE__*/(0, _react.forwardRef)(function Dialo
   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 () {
+  (0, _useLayoutEffect.useLayoutEffect)(function () {
     dismissedByRef.current = dismissedBy;
     onCloseRef.current = onClose;
   }, [dismissedBy, onClose]);
@@ -102,7 +103,7 @@ var Dialog = exports.Dialog = /*#__PURE__*/(0, _react.forwardRef)(function Dialo
   // 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 () {
+  (0, _useLayoutEffect.useLayoutEffect)(function () {
     if (!isMounted) {
       return;
     }
@@ -161,7 +162,7 @@ var Dialog = exports.Dialog = /*#__PURE__*/(0, _react.forwardRef)(function Dialo
     // No-op: no current use case for programmatic close via OpenLayerObserver.
     onClose: _noop.default
   });
-  (0, _react.useLayoutEffect)(function () {
+  (0, _useLayoutEffect.useLayoutEffect)(function () {
     var dialog = ownRef.current;
     if (!dialog) {
       return;

package/dist/cjs/dialog-scroll-lock/index.js

@@ -4,8 +4,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.DialogScrollLock = DialogScrollLock;
-var _react = require("react");
 var _browserApis = require("@atlaskit/browser-apis");
+var _useLayoutEffect = require("@atlaskit/ds-lib/use-layout-effect");
 /**
  * __DialogScrollLock__
  *
@@ -37,7 +37,7 @@ var _browserApis = require("@atlaskit/browser-apis");
  */
 function DialogScrollLock(_ref) {
   var isOpen = _ref.isOpen;
-  (0, _react.useLayoutEffect)(function () {
+  (0, _useLayoutEffect.useLayoutEffect)(function () {
     var _getDocument;
     if (!isOpen) {
       return;

package/dist/cjs/internal/use-anchored-popover-at-point.js

@@ -8,6 +8,7 @@ exports.useAnchoredPopoverAtPoint = useAnchoredPopoverAtPoint;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = require("react");
+var _useLayoutEffect = require("@atlaskit/ds-lib/use-layout-effect");
 var _useAnchoredPopover = require("./use-anchored-popover");
 var _excluded = ["getPoint", "isEnabled"];
 /**
@@ -97,7 +98,7 @@ function useAnchoredPopoverAtPoint(_ref2) {
   // effect must not depend on anything the delegated effect does not: a dependency
   // here alone re-creates the element without that hook writing an `anchor-name`
   // onto it, and positioning silently dies.
-  (0, _react.useLayoutEffect)(function () {
+  (0, _useLayoutEffect.useLayoutEffect)(function () {
     if (!isEnabled) {
       return;
     }

package/dist/cjs/internal/use-anchored-popover.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.useAnchoredPopover = useAnchoredPopover;
 var _react = require("react");
 var _useId = require("@atlaskit/ds-lib/use-id");
+var _useLayoutEffect = require("@atlaskit/ds-lib/use-layout-effect");
 var _applyAnchorPositioning = require("./anchor-positioning/apply-anchor-positioning");
 var _anchoredPopoverSize = require("./anchored-popover-size");
 var _applyJavascriptFallbackPositioning = require("./javascript-fallback/apply-javascript-fallback-positioning");
@@ -214,7 +215,7 @@ function useAnchoredPopover(_ref3) {
   // element (the point hook remounts its `<div>`).
   var fallbackAnchorName = useNewAnchorName();
   var stablePlacement = useStablePlacement(placement);
-  (0, _react.useLayoutEffect)(function () {
+  (0, _useLayoutEffect.useLayoutEffect)(function () {
     if (!isEnabled) {
       return;
     }

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 _useLayoutEffect = require("@atlaskit/ds-lib/use-layout-effect");
 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; }
@@ -208,7 +209,7 @@ function useAnimatedVisibility(_ref4) {
   var onEnterFinishRef = (0, _react.useRef)(onEnterFinish);
   var onExitFinishRef = (0, _react.useRef)(onExitFinish);
   var willAnimateRef = (0, _react.useRef)(willAnimate);
-  (0, _react.useLayoutEffect)(function () {
+  (0, _useLayoutEffect.useLayoutEffect)(function () {
     onEnterFinishRef.current = onEnterFinish;
     onExitFinishRef.current = onExitFinish;
     willAnimateRef.current = willAnimate;
@@ -324,7 +325,7 @@ function useAnimatedVisibility(_ref4) {
       onSettled: settleExit
     });
   }, [elementRef, settleExit]);
-  (0, _react.useLayoutEffect)(function () {
+  (0, _useLayoutEffect.useLayoutEffect)(function () {
     return function () {
       // Prevent a pending animation or microtask from notifying after unmount.
       cancelExitSettlementRef.current();

package/dist/cjs/popover/popover.js

@@ -14,6 +14,7 @@ var _react2 = require("@compiled/react");
 var _bindEventListener = require("bind-event-listener");
 var _mergeRefs = _interopRequireDefault(require("@atlaskit/ds-lib/merge-refs"));
 var _once = _interopRequireDefault(require("@atlaskit/ds-lib/once"));
+var _useLayoutEffect = require("@atlaskit/ds-lib/use-layout-effect");
 var _useNotifyOpenLayerObserver = require("@atlaskit/layering/use-notify-open-layer-observer");
 var _isNativeElementOpen = require("../internal/is-native-element-open");
 var _resolvePlacement2 = require("../internal/resolve-placement");
@@ -172,7 +173,7 @@ var Popover = exports.Popover = /*#__PURE__*/(0, _react.forwardRef)(function Pop
   // Keep the semantic callback current without rebinding native lifecycle
   // listeners during the same commit that calls showPopover()/hidePopover().
   var onCloseRef = (0, _react.useRef)(onClose);
-  (0, _react.useLayoutEffect)(function () {
+  (0, _useLayoutEffect.useLayoutEffect)(function () {
     onCloseRef.current = onClose;
   }, [onClose]);
 
@@ -295,7 +296,7 @@ var Popover = exports.Popover = /*#__PURE__*/(0, _react.forwardRef)(function Pop
   // 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 () {
+  (0, _useLayoutEffect.useLayoutEffect)(function () {
     var element = ownRef.current;
     if (!element) {
       return;
@@ -344,7 +345,7 @@ var Popover = exports.Popover = /*#__PURE__*/(0, _react.forwardRef)(function Pop
   // Show/hide based on isOpen. `showPopover`/`hidePopover` are no-ops when
   // already in the target state. Try/catch guards `InvalidStateError` on
   // disconnected elements (StrictMode/concurrent/unmount edge cases).
-  (0, _react.useLayoutEffect)(function () {
+  (0, _useLayoutEffect.useLayoutEffect)(function () {
     var element = ownRef.current;
     if (!element) {
       return;

package/dist/cjs/testing/polyfill.js

@@ -1,6 +1,8 @@
 "use strict";
 
 var _bindEventListener = require("bind-event-listener");
+// Node supports findLast, but the package defaults to older array type declarations.
+/// <reference lib="es2023.array" />
 /* eslint-disable compat/compat */
 /**
  * Popover API & HTMLDialogElement polyfills for jsdom.
@@ -482,40 +484,133 @@ function handleDocumentPointerup(event) {
   });
 }
 
-// Topmost still-connected popover in `stack`, pruning disconnected entries
-// (test pollution where a popover was removed from the DOM without hidePopover).
-// Polyfill-only defensive cleanup; not in the spec.
-function topmostConnected(_ref18) {
-  var stack = _ref18.stack;
-  while (stack.length > 0) {
-    var candidate = stack[stack.length - 1];
-    if (candidate.isConnected) {
-      return candidate;
-    }
-    stack.pop();
+/**
+ * Represents one dialog or popover opening so queued Escape requests cannot close a later opening.
+ */
+
+/**
+ * Tracks dialog and popover Escape targets in opening order.
+ */
+var escapeLayers = [];
+
+/**
+ * Removes an opening from Escape tracking so it cannot receive a later dismissal request.
+ */
+function unregisterEscapeLayer(_ref18) {
+  var element = _ref18.element;
+  var index = escapeLayers.findIndex(function (layer) {
+    return layer.element === element;
+  });
+  if (index !== -1) {
+    escapeLayers.splice(index, 1);
   }
-  return null;
 }
 
-// Escape closes the topmost open popover. Hints are dismissed before autos.
-// Spec: https://html.spec.whatwg.org/multipage/popover.html#close-watcher
+/**
+ * Records a new opening, replacing any stale registration for the same element.
+ */
+function registerEscapeLayer(_ref19) {
+  var layer = _ref19.layer;
+  unregisterEscapeLayer({
+    element: layer.element
+  });
+  escapeLayers.push(layer);
+}
+
+/**
+ * Checks whether a tracked element is still connected and open, including direct DOM changes.
+ */
+function isEscapeLayerOpen(_ref20) {
+  var layer = _ref20.layer;
+  return layer.element.isConnected && (layer.type === 'dialog' ? layer.element.open : isPopoverOpen({
+    element: layer.element
+  }));
+}
+
+/**
+ * Removes registrations for closed or disconnected elements before choosing an Escape target.
+ */
+function pruneClosedEscapeLayers() {
+  escapeLayers.filter(function (layer) {
+    return !isEscapeLayerOpen({
+      layer: layer
+    });
+  }).forEach(function (layer) {
+    return unregisterEscapeLayer({
+      element: layer.element
+    });
+  });
+}
+
+/**
+ * Checks whether a layer accepts Escape, using closedby and modality for dialogs.
+ * Spec: https://html.spec.whatwg.org/multipage/interactive-elements.html#computed-closed-by-state
+ */
+function acceptsEscape(_ref21) {
+  var _layer$element$getAtt;
+  var layer = _ref21.layer;
+  if (layer.type === 'popover') {
+    return true;
+  }
+  var closedBy = (_layer$element$getAtt = layer.element.getAttribute('closedby')) === null || _layer$element$getAtt === void 0 ? void 0 : _layer$element$getAtt.toLowerCase();
+  if (closedBy === 'none') {
+    return false;
+  }
+  if (closedBy === 'any' || closedBy === 'closerequest') {
+    return true;
+  }
+  // Missing or invalid closedby enables Escape for modal dialogs only.
+  return Boolean(layer.element._isModal);
+}
+
+/**
+ * Dismisses the latest eligible Escape target, allowing application handlers to prevent dialog cancellation.
+ * Spec: https://html.spec.whatwg.org/multipage/interactive-elements.html#set-up-the-dialog-close-watcher
+ */
 function handleDocumentKeydown(event) {
-  if (event.key !== 'Escape') {
+  // A prevented key event must not invoke its default dismissal action.
+  if (event.key !== 'Escape' || event.defaultPrevented) {
     return;
   }
-  var topHint = topmostConnected({
-    stack: openHintStack
+  pruneClosedEscapeLayers();
+
+  // Capture this opening so handlers cannot redirect the same Escape to another layer.
+  var layer = escapeLayers.findLast(function (candidate) {
+    return acceptsEscape({
+      layer: candidate
+    });
   });
-  if (topHint) {
-    topHint.hidePopover();
+  if (!layer) {
     return;
   }
-  var topAuto = topmostConnected({
-    stack: openAutoStack
-  });
-  if (topAuto) {
-    topAuto.hidePopover();
+  if (layer.type === 'popover') {
+    // Popover dismissal is synchronous.
+    layer.element.hidePopover();
+    return;
   }
+
+  // Defer the dialog default action until application keydown listeners have run.
+  setTimeout(function () {
+    // Handlers may prevent Escape, change eligibility, or close and reopen the target.
+    if (event.defaultPrevented || !escapeLayers.includes(layer) || !isEscapeLayerOpen({
+      layer: layer
+    }) || !acceptsEscape({
+      layer: layer
+    })) {
+      return;
+    }
+    var allowed = layer.element.dispatchEvent(new Event('cancel', {
+      cancelable: true,
+      bubbles: false
+    }));
+    // The cancel handler can close or reopen the dialog; only close the original opening.
+    if (allowed && escapeLayers.includes(layer) && isEscapeLayerOpen({
+      layer: layer
+    })) {
+      // close() dispatches beforetoggle and queues toggle and close notifications.
+      layer.element.close();
+    }
+  }, 0);
 }
 if (typeof HTMLElement !== 'undefined') {
   var schedulePopoverToggle = createToggleScheduler();
@@ -597,6 +692,12 @@ if (typeof HTMLElement !== 'undefined') {
       });
       if (stack && !stack.includes(this)) {
         stack.push(this);
+        registerEscapeLayer({
+          layer: {
+            type: 'popover',
+            element: this
+          }
+        });
       }
       clearOpacityOnOpenToggle({
         element: this
@@ -632,6 +733,9 @@ if (typeof HTMLElement !== 'undefined') {
         cancelable: false
       });
       this.removeAttribute('data-popover-open');
+      unregisterEscapeLayer({
+        element: this
+      });
       var stack = stackForMode({
         mode: getPopoverMode({
           element: this
@@ -763,6 +867,12 @@ if (typeof HTMLDialogElement !== 'undefined') {
       });
       this.setAttribute('open', '');
       this._isModal = true;
+      registerEscapeLayer({
+        layer: {
+          type: 'dialog',
+          element: this
+        }
+      });
       scheduleDialogToggle({
         dialog: this,
         newState: 'open',
@@ -785,6 +895,13 @@ if (typeof HTMLDialogElement !== 'undefined') {
       });
       this.setAttribute('open', '');
       this._isModal = false;
+      // Non-modal dialogs can opt into Escape through closedby.
+      registerEscapeLayer({
+        layer: {
+          type: 'dialog',
+          element: this
+        }
+      });
       scheduleDialogToggle({
         dialog: this,
         newState: 'open',
@@ -808,6 +925,9 @@ if (typeof HTMLDialogElement !== 'undefined') {
         cancelable: false
       });
       this.removeAttribute('open');
+      unregisterEscapeLayer({
+        element: this
+      });
       this._isModal = false;
       if (returnValue !== undefined) {
         this.returnValue = returnValue;

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

@@ -1,11 +1,12 @@
 /* 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';
+import React, { forwardRef, useCallback, useId, useRef } from 'react';
 import { cx } from '@compiled/react';
 import { bindAll } from 'bind-event-listener';
 import mergeRefs from '@atlaskit/ds-lib/merge-refs';
 import noop from '@atlaskit/ds-lib/noop';
+import { useLayoutEffect } from '@atlaskit/ds-lib/use-layout-effect';
 import { useNotifyOpenLayerObserver } from '@atlaskit/layering/use-notify-open-layer-observer';
 import { useAnimatedVisibility } from '../internal/use-animated-visibility';
 import { useFocusWrap } from '../internal/use-focus-wrap';

package/dist/es2019/dialog-scroll-lock/index.js

@@ -1,5 +1,5 @@
-import { useLayoutEffect } from 'react';
 import { getDocument } from '@atlaskit/browser-apis';
+import { useLayoutEffect } from '@atlaskit/ds-lib/use-layout-effect';
 /**
  * __DialogScrollLock__
  *

package/dist/es2019/internal/use-anchored-popover-at-point.js

@@ -7,7 +7,8 @@
  * See `notes/decisions/anchored-popover-at-point.md` for why this is a sibling
  * hook instead of an anchor union inside `useAnchoredPopover`.
  */
-import { useLayoutEffect, useRef } from 'react';
+import { useRef } from 'react';
+import { useLayoutEffect } from '@atlaskit/ds-lib/use-layout-effect';
 import { useAnchoredPopover } from './use-anchored-popover';
 
 /**

package/dist/es2019/internal/use-anchored-popover.js

@@ -10,8 +10,9 @@
  * See `notes/architecture/positioning.md` and
  * `notes/decisions/fit-available-space.md`.
  */
-import { useLayoutEffect, useMemo } from 'react';
+import { useMemo } from 'react';
 import { useId } from '@atlaskit/ds-lib/use-id';
+import { useLayoutEffect } from '@atlaskit/ds-lib/use-layout-effect';
 import { applyAnchorPositioning } from './anchor-positioning/apply-anchor-positioning';
 import { getAnchoredPopoverSizeDeclarations } from './anchored-popover-size';
 import { applyJavaScriptFallbackPositioning } from './javascript-fallback/apply-javascript-fallback-positioning';

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

@@ -1,4 +1,5 @@
-import { useCallback, useEffect, useLayoutEffect, useReducer, useRef } from 'react';
+import { useCallback, useEffect, useReducer, useRef } from 'react';
+import { useLayoutEffect } from '@atlaskit/ds-lib/use-layout-effect';
 import { isNativeElementOpen } from './is-native-element-open';
 import { prefersReducedMotion } from './reduced-motion';
 function runCancellableSettlement({

package/dist/es2019/popover/popover.js

@@ -1,11 +1,12 @@
 /* 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';
+import React, { forwardRef, useCallback, useId, useMemo, useRef } from 'react';
 import { cx } from '@compiled/react';
 import { bind } from 'bind-event-listener';
 import mergeRefs from '@atlaskit/ds-lib/merge-refs';
 import once from '@atlaskit/ds-lib/once';
+import { useLayoutEffect } from '@atlaskit/ds-lib/use-layout-effect';
 import { useNotifyOpenLayerObserver } from '@atlaskit/layering/use-notify-open-layer-observer';
 import { isNativeElementOpen } from '../internal/is-native-element-open';
 import { resolvePlacement } from '../internal/resolve-placement';

package/dist/es2019/testing/polyfill.js

@@ -1,3 +1,5 @@
+// Node supports findLast, but the package defaults to older array type declarations.
+/// <reference lib="es2023.array" />
 /* eslint-disable compat/compat */
 /**
  * Popover API & HTMLDialogElement polyfills for jsdom.
@@ -495,41 +497,129 @@ function handleDocumentPointerup(event) {
   });
 }
 
-// Topmost still-connected popover in `stack`, pruning disconnected entries
-// (test pollution where a popover was removed from the DOM without hidePopover).
-// Polyfill-only defensive cleanup; not in the spec.
-function topmostConnected({
-  stack
+/**
+ * Represents one dialog or popover opening so queued Escape requests cannot close a later opening.
+ */
+
+/**
+ * Tracks dialog and popover Escape targets in opening order.
+ */
+const escapeLayers = [];
+
+/**
+ * Removes an opening from Escape tracking so it cannot receive a later dismissal request.
+ */
+function unregisterEscapeLayer({
+  element
 }) {
-  while (stack.length > 0) {
-    const candidate = stack[stack.length - 1];
-    if (candidate.isConnected) {
-      return candidate;
-    }
-    stack.pop();
+  const index = escapeLayers.findIndex(layer => layer.element === element);
+  if (index !== -1) {
+    escapeLayers.splice(index, 1);
   }
-  return null;
 }
 
-// Escape closes the topmost open popover. Hints are dismissed before autos.
-// Spec: https://html.spec.whatwg.org/multipage/popover.html#close-watcher
+/**
+ * Records a new opening, replacing any stale registration for the same element.
+ */
+function registerEscapeLayer({
+  layer
+}) {
+  unregisterEscapeLayer({
+    element: layer.element
+  });
+  escapeLayers.push(layer);
+}
+
+/**
+ * Checks whether a tracked element is still connected and open, including direct DOM changes.
+ */
+function isEscapeLayerOpen({
+  layer
+}) {
+  return layer.element.isConnected && (layer.type === 'dialog' ? layer.element.open : isPopoverOpen({
+    element: layer.element
+  }));
+}
+
+/**
+ * Removes registrations for closed or disconnected elements before choosing an Escape target.
+ */
+function pruneClosedEscapeLayers() {
+  escapeLayers.filter(layer => !isEscapeLayerOpen({
+    layer
+  })).forEach(layer => unregisterEscapeLayer({
+    element: layer.element
+  }));
+}
+
+/**
+ * Checks whether a layer accepts Escape, using closedby and modality for dialogs.
+ * Spec: https://html.spec.whatwg.org/multipage/interactive-elements.html#computed-closed-by-state
+ */
+function acceptsEscape({
+  layer
+}) {
+  var _layer$element$getAtt;
+  if (layer.type === 'popover') {
+    return true;
+  }
+  const closedBy = (_layer$element$getAtt = layer.element.getAttribute('closedby')) === null || _layer$element$getAtt === void 0 ? void 0 : _layer$element$getAtt.toLowerCase();
+  if (closedBy === 'none') {
+    return false;
+  }
+  if (closedBy === 'any' || closedBy === 'closerequest') {
+    return true;
+  }
+  // Missing or invalid closedby enables Escape for modal dialogs only.
+  return Boolean(layer.element._isModal);
+}
+
+/**
+ * Dismisses the latest eligible Escape target, allowing application handlers to prevent dialog cancellation.
+ * Spec: https://html.spec.whatwg.org/multipage/interactive-elements.html#set-up-the-dialog-close-watcher
+ */
 function handleDocumentKeydown(event) {
-  if (event.key !== 'Escape') {
+  // A prevented key event must not invoke its default dismissal action.
+  if (event.key !== 'Escape' || event.defaultPrevented) {
     return;
   }
-  const topHint = topmostConnected({
-    stack: openHintStack
-  });
-  if (topHint) {
-    topHint.hidePopover();
+  pruneClosedEscapeLayers();
+
+  // Capture this opening so handlers cannot redirect the same Escape to another layer.
+  const layer = escapeLayers.findLast(candidate => acceptsEscape({
+    layer: candidate
+  }));
+  if (!layer) {
     return;
   }
-  const topAuto = topmostConnected({
-    stack: openAutoStack
-  });
-  if (topAuto) {
-    topAuto.hidePopover();
+  if (layer.type === 'popover') {
+    // Popover dismissal is synchronous.
+    layer.element.hidePopover();
+    return;
   }
+
+  // Defer the dialog default action until application keydown listeners have run.
+  setTimeout(() => {
+    // Handlers may prevent Escape, change eligibility, or close and reopen the target.
+    if (event.defaultPrevented || !escapeLayers.includes(layer) || !isEscapeLayerOpen({
+      layer
+    }) || !acceptsEscape({
+      layer
+    })) {
+      return;
+    }
+    const allowed = layer.element.dispatchEvent(new Event('cancel', {
+      cancelable: true,
+      bubbles: false
+    }));
+    // The cancel handler can close or reopen the dialog; only close the original opening.
+    if (allowed && escapeLayers.includes(layer) && isEscapeLayerOpen({
+      layer
+    })) {
+      // close() dispatches beforetoggle and queues toggle and close notifications.
+      layer.element.close();
+    }
+  }, 0);
 }
 if (typeof HTMLElement !== 'undefined') {
   const schedulePopoverToggle = createToggleScheduler();
@@ -611,6 +701,12 @@ if (typeof HTMLElement !== 'undefined') {
       });
       if (stack && !stack.includes(this)) {
         stack.push(this);
+        registerEscapeLayer({
+          layer: {
+            type: 'popover',
+            element: this
+          }
+        });
       }
       clearOpacityOnOpenToggle({
         element: this
@@ -646,6 +742,9 @@ if (typeof HTMLElement !== 'undefined') {
         cancelable: false
       });
       this.removeAttribute('data-popover-open');
+      unregisterEscapeLayer({
+        element: this
+      });
       const stack = stackForMode({
         mode: getPopoverMode({
           element: this
@@ -773,6 +872,12 @@ if (typeof HTMLDialogElement !== 'undefined') {
       });
       this.setAttribute('open', '');
       this._isModal = true;
+      registerEscapeLayer({
+        layer: {
+          type: 'dialog',
+          element: this
+        }
+      });
       scheduleDialogToggle({
         dialog: this,
         newState: 'open',
@@ -795,6 +900,13 @@ if (typeof HTMLDialogElement !== 'undefined') {
       });
       this.setAttribute('open', '');
       this._isModal = false;
+      // Non-modal dialogs can opt into Escape through closedby.
+      registerEscapeLayer({
+        layer: {
+          type: 'dialog',
+          element: this
+        }
+      });
       scheduleDialogToggle({
         dialog: this,
         newState: 'open',
@@ -818,6 +930,9 @@ if (typeof HTMLDialogElement !== 'undefined') {
         cancelable: false
       });
       this.removeAttribute('open');
+      unregisterEscapeLayer({
+        element: this
+      });
       this._isModal = false;
       if (returnValue !== undefined) {
         this.returnValue = returnValue;

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

@@ -1,11 +1,12 @@
 /* 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';
+import React, { forwardRef, useCallback, useId, useRef } from 'react';
 import { cx } from '@compiled/react';
 import { bindAll } from 'bind-event-listener';
 import mergeRefs from '@atlaskit/ds-lib/merge-refs';
 import noop from '@atlaskit/ds-lib/noop';
+import { useLayoutEffect } from '@atlaskit/ds-lib/use-layout-effect';
 import { useNotifyOpenLayerObserver } from '@atlaskit/layering/use-notify-open-layer-observer';
 import { useAnimatedVisibility } from '../internal/use-animated-visibility';
 import { useFocusWrap } from '../internal/use-focus-wrap';

package/dist/esm/dialog-scroll-lock/index.js

@@ -1,5 +1,5 @@
-import { useLayoutEffect } from 'react';
 import { getDocument } from '@atlaskit/browser-apis';
+import { useLayoutEffect } from '@atlaskit/ds-lib/use-layout-effect';
 /**
  * __DialogScrollLock__
  *

package/dist/esm/internal/use-anchored-popover-at-point.js

@@ -12,7 +12,8 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
  * See `notes/decisions/anchored-popover-at-point.md` for why this is a sibling
  * hook instead of an anchor union inside `useAnchoredPopover`.
  */
-import { useLayoutEffect, useRef } from 'react';
+import { useRef } from 'react';
+import { useLayoutEffect } from '@atlaskit/ds-lib/use-layout-effect';
 import { useAnchoredPopover } from './use-anchored-popover';
 
 /**

package/dist/esm/internal/use-anchored-popover.js

@@ -10,8 +10,9 @@
  * See `notes/architecture/positioning.md` and
  * `notes/decisions/fit-available-space.md`.
  */
-import { useLayoutEffect, useMemo } from 'react';
+import { useMemo } from 'react';
 import { useId } from '@atlaskit/ds-lib/use-id';
+import { useLayoutEffect } from '@atlaskit/ds-lib/use-layout-effect';
 import { applyAnchorPositioning } from './anchor-positioning/apply-anchor-positioning';
 import { getAnchoredPopoverSizeDeclarations } from './anchored-popover-size';
 import { applyJavaScriptFallbackPositioning } from './javascript-fallback/apply-javascript-fallback-positioning';

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

@@ -2,7 +2,8 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 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 { useCallback, useEffect, useReducer, useRef } from 'react';
+import { useLayoutEffect } from '@atlaskit/ds-lib/use-layout-effect';
 import { isNativeElementOpen } from './is-native-element-open';
 import { prefersReducedMotion } from './reduced-motion';
 function runCancellableSettlement(_ref) {

package/dist/esm/popover/popover.js

@@ -1,11 +1,12 @@
 /* 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';
+import React, { forwardRef, useCallback, useId, useMemo, useRef } from 'react';
 import { cx } from '@compiled/react';
 import { bind } from 'bind-event-listener';
 import mergeRefs from '@atlaskit/ds-lib/merge-refs';
 import once from '@atlaskit/ds-lib/once';
+import { useLayoutEffect } from '@atlaskit/ds-lib/use-layout-effect';
 import { useNotifyOpenLayerObserver } from '@atlaskit/layering/use-notify-open-layer-observer';
 import { isNativeElementOpen } from '../internal/is-native-element-open';
 import { resolvePlacement } from '../internal/resolve-placement';

package/dist/esm/testing/polyfill.js

@@ -1,3 +1,5 @@
+// Node supports findLast, but the package defaults to older array type declarations.
+/// <reference lib="es2023.array" />
 /* eslint-disable compat/compat */
 /**
  * Popover API & HTMLDialogElement polyfills for jsdom.
@@ -480,40 +482,133 @@ function handleDocumentPointerup(event) {
   });
 }
 
-// Topmost still-connected popover in `stack`, pruning disconnected entries
-// (test pollution where a popover was removed from the DOM without hidePopover).
-// Polyfill-only defensive cleanup; not in the spec.
-function topmostConnected(_ref18) {
-  var stack = _ref18.stack;
-  while (stack.length > 0) {
-    var candidate = stack[stack.length - 1];
-    if (candidate.isConnected) {
-      return candidate;
-    }
-    stack.pop();
+/**
+ * Represents one dialog or popover opening so queued Escape requests cannot close a later opening.
+ */
+
+/**
+ * Tracks dialog and popover Escape targets in opening order.
+ */
+var escapeLayers = [];
+
+/**
+ * Removes an opening from Escape tracking so it cannot receive a later dismissal request.
+ */
+function unregisterEscapeLayer(_ref18) {
+  var element = _ref18.element;
+  var index = escapeLayers.findIndex(function (layer) {
+    return layer.element === element;
+  });
+  if (index !== -1) {
+    escapeLayers.splice(index, 1);
   }
-  return null;
 }
 
-// Escape closes the topmost open popover. Hints are dismissed before autos.
-// Spec: https://html.spec.whatwg.org/multipage/popover.html#close-watcher
+/**
+ * Records a new opening, replacing any stale registration for the same element.
+ */
+function registerEscapeLayer(_ref19) {
+  var layer = _ref19.layer;
+  unregisterEscapeLayer({
+    element: layer.element
+  });
+  escapeLayers.push(layer);
+}
+
+/**
+ * Checks whether a tracked element is still connected and open, including direct DOM changes.
+ */
+function isEscapeLayerOpen(_ref20) {
+  var layer = _ref20.layer;
+  return layer.element.isConnected && (layer.type === 'dialog' ? layer.element.open : isPopoverOpen({
+    element: layer.element
+  }));
+}
+
+/**
+ * Removes registrations for closed or disconnected elements before choosing an Escape target.
+ */
+function pruneClosedEscapeLayers() {
+  escapeLayers.filter(function (layer) {
+    return !isEscapeLayerOpen({
+      layer: layer
+    });
+  }).forEach(function (layer) {
+    return unregisterEscapeLayer({
+      element: layer.element
+    });
+  });
+}
+
+/**
+ * Checks whether a layer accepts Escape, using closedby and modality for dialogs.
+ * Spec: https://html.spec.whatwg.org/multipage/interactive-elements.html#computed-closed-by-state
+ */
+function acceptsEscape(_ref21) {
+  var _layer$element$getAtt;
+  var layer = _ref21.layer;
+  if (layer.type === 'popover') {
+    return true;
+  }
+  var closedBy = (_layer$element$getAtt = layer.element.getAttribute('closedby')) === null || _layer$element$getAtt === void 0 ? void 0 : _layer$element$getAtt.toLowerCase();
+  if (closedBy === 'none') {
+    return false;
+  }
+  if (closedBy === 'any' || closedBy === 'closerequest') {
+    return true;
+  }
+  // Missing or invalid closedby enables Escape for modal dialogs only.
+  return Boolean(layer.element._isModal);
+}
+
+/**
+ * Dismisses the latest eligible Escape target, allowing application handlers to prevent dialog cancellation.
+ * Spec: https://html.spec.whatwg.org/multipage/interactive-elements.html#set-up-the-dialog-close-watcher
+ */
 function handleDocumentKeydown(event) {
-  if (event.key !== 'Escape') {
+  // A prevented key event must not invoke its default dismissal action.
+  if (event.key !== 'Escape' || event.defaultPrevented) {
     return;
   }
-  var topHint = topmostConnected({
-    stack: openHintStack
+  pruneClosedEscapeLayers();
+
+  // Capture this opening so handlers cannot redirect the same Escape to another layer.
+  var layer = escapeLayers.findLast(function (candidate) {
+    return acceptsEscape({
+      layer: candidate
+    });
   });
-  if (topHint) {
-    topHint.hidePopover();
+  if (!layer) {
     return;
   }
-  var topAuto = topmostConnected({
-    stack: openAutoStack
-  });
-  if (topAuto) {
-    topAuto.hidePopover();
+  if (layer.type === 'popover') {
+    // Popover dismissal is synchronous.
+    layer.element.hidePopover();
+    return;
   }
+
+  // Defer the dialog default action until application keydown listeners have run.
+  setTimeout(function () {
+    // Handlers may prevent Escape, change eligibility, or close and reopen the target.
+    if (event.defaultPrevented || !escapeLayers.includes(layer) || !isEscapeLayerOpen({
+      layer: layer
+    }) || !acceptsEscape({
+      layer: layer
+    })) {
+      return;
+    }
+    var allowed = layer.element.dispatchEvent(new Event('cancel', {
+      cancelable: true,
+      bubbles: false
+    }));
+    // The cancel handler can close or reopen the dialog; only close the original opening.
+    if (allowed && escapeLayers.includes(layer) && isEscapeLayerOpen({
+      layer: layer
+    })) {
+      // close() dispatches beforetoggle and queues toggle and close notifications.
+      layer.element.close();
+    }
+  }, 0);
 }
 if (typeof HTMLElement !== 'undefined') {
   var schedulePopoverToggle = createToggleScheduler();
@@ -595,6 +690,12 @@ if (typeof HTMLElement !== 'undefined') {
       });
       if (stack && !stack.includes(this)) {
         stack.push(this);
+        registerEscapeLayer({
+          layer: {
+            type: 'popover',
+            element: this
+          }
+        });
       }
       clearOpacityOnOpenToggle({
         element: this
@@ -630,6 +731,9 @@ if (typeof HTMLElement !== 'undefined') {
         cancelable: false
       });
       this.removeAttribute('data-popover-open');
+      unregisterEscapeLayer({
+        element: this
+      });
       var stack = stackForMode({
         mode: getPopoverMode({
           element: this
@@ -761,6 +865,12 @@ if (typeof HTMLDialogElement !== 'undefined') {
       });
       this.setAttribute('open', '');
       this._isModal = true;
+      registerEscapeLayer({
+        layer: {
+          type: 'dialog',
+          element: this
+        }
+      });
       scheduleDialogToggle({
         dialog: this,
         newState: 'open',
@@ -783,6 +893,13 @@ if (typeof HTMLDialogElement !== 'undefined') {
       });
       this.setAttribute('open', '');
       this._isModal = false;
+      // Non-modal dialogs can opt into Escape through closedby.
+      registerEscapeLayer({
+        layer: {
+          type: 'dialog',
+          element: this
+        }
+      });
       scheduleDialogToggle({
         dialog: this,
         newState: 'open',
@@ -806,6 +923,9 @@ if (typeof HTMLDialogElement !== 'undefined') {
         cancelable: false
       });
       this.removeAttribute('open');
+      unregisterEscapeLayer({
+        element: this
+      });
       this._isModal = false;
       if (returnValue !== undefined) {
         this.returnValue = returnValue;

package/package.json

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