@atlaskit/top-layer 4.1.0 → 4.2.1

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/top-layer
 
+## 4.2.1
+
+### Patch Changes
+
+- [`b348503c8c9cb`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/b348503c8c9cb) -
+  Use the Web Animations API to wait for all active top-layer animations before completing
+  visibility callbacks.
+
+## 4.2.0
+
+### Minor Changes
+
+- [`e825821c5493d`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/e825821c5493d) -
+  Reset inherited `pointer-events` on Dialog and Popover top-layer surfaces so their content remains
+  interactive inside non-interactive overlay containers.
+
 ## 4.1.0
 
 ### Minor Changes

package/dist/cjs/dialog/dialog-content.compiled.css

@@ -24,6 +24,7 @@
 ._bozgze3t{padding-inline-start:var(--ds-space-0,0)}
 ._c71lglyw{max-height:none}
 ._k8m011k7{transition-property:overlay,display}
+._lcxv1wug{pointer-events:auto}
 ._o5724jg8{white-space:normal}
 ._otyr1wug{margin-bottom:auto}
 ._p12fglyw{max-width:none}

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

@@ -20,16 +20,16 @@ var _useFocusWrap = require("../internal/use-focus-wrap");
 var _useSafariEscapeFix2 = require("../internal/use-safari-escape-fix");
 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); }
 // Surface reset — see the rationale on `surfaceResetStyles` in `popover/popover.tsx`.
-// Neutralises inherited text-layout properties (e.g. `white-space: nowrap`) that leak
-// into the top-layer surface. Excludes `color`/`font` (theming) and
-// `direction`/`unicode-bidi` (RTL must inherit). Pure layout reset with no box
-// side-effects, so it does not reintroduce the `margin: auto` centering problem that
-// kept `height: auto` off `Dialog`.
+// Neutralises inherited interaction and text-layout properties (e.g.
+// `pointer-events: none` and `white-space: nowrap`) that leak into the top-layer
+// surface. Excludes `color`/`font` (theming) and `direction`/`unicode-bidi` (RTL
+// must inherit). The reset has no box side-effects, so it does not reintroduce
+// the `margin: auto` centering problem that kept `height: auto` off `Dialog`.
 //
 // KEEP IN SYNC with the identical `surfaceResetStyles` in `popover/popover.tsx`
 // (ADS forbids sharing styles across files, so it is co-located and duplicated).
 var surfaceResetStyles = {
-  root: "_o5724jg8 _1nmz4jg8 _1i4q4jg8 _y3gnv2br _azhwidpf _1p1dglyw"
+  root: "_lcxv1wug _o5724jg8 _1nmz4jg8 _1i4q4jg8 _y3gnv2br _azhwidpf _1p1dglyw"
 };
 var dialogStyles = {
   root: "_19itglyw _19pk1wug _2hwx1wug _otyr1wug _18u01wug _1q51ze3t _y4tize3t _85i5ze3t _bozgze3t _p12fglyw _c71lglyw _bfhk1j28",
@@ -87,7 +87,6 @@ var Dialog = exports.Dialog = /*#__PURE__*/(0, _react.forwardRef)(function Dialo
   var closeReasonRef = (0, _react.useRef)(null);
   var _useAnimatedVisibilit = (0, _useAnimatedVisibility.useAnimatedVisibility)({
       isOpen: isOpen,
-      animationKind: 'dialog',
       shouldAnimate: shouldAnimate,
       elementRef: ownRef,
       onEnterFinish: onEnterFinish,

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

@@ -7,64 +7,39 @@ Object.defineProperty(exports, "__esModule", {
 exports.useAnimatedVisibility = useAnimatedVisibility;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = require("react");
-var _bindEventListener = require("bind-event-listener");
 var _reducedMotion = require("./reduced-motion");
-/**
- * Using the recommended motion timings for safety net.
- *
- * Not setting these timings on the preset config because they're defined in the CSS,
- * so configuring it in the preset doesn't achieve anything except introduce a potential
- * source of drift.
- *
- * TODO: figure out a way to not need to redeclare these in the future,
- * and keep CSS and JS timings in sync always.
- */
-var safetyNetMsMap = {
-  dialog: {
-    enter: 250,
-    // Corresponds to `motion.duration.long`
-    exit: 200 // Corresponds to `motion.duration.medium`
-  },
-  popover: {
-    enter: 150,
-    // Corresponds to `motion.duration.short`
-    exit: 100 // Corresponds to `motion.duration.xshort`
-  }
-};
-
-/**
- * Fires `onSettled` once when `transitionend` fires on `element`, or after
- * `safetyNetMs` if the event is swallowed (mid-transition unmount, CSS
- * mismatch, browser quirks). Returns a cleanup that cancels both paths.
- */
-function runOnTransitionEndOrTimeout(_ref) {
-  var element = _ref.element,
-    safetyNetMs = _ref.safetyNetMs,
+function runCancellableSettlement(_ref) {
+  var schedule = _ref.schedule,
     onSettled = _ref.onSettled;
-  var state = {
-    isSettled: false
-  };
-  function teardown() {
-    state.isSettled = true;
-    clearTimeout(safetyNetId);
-    unbind();
-  }
-  function settle() {
-    if (state.isSettled) {
+  var isCancelled = false;
+  schedule(function () {
+    if (isCancelled) {
       return;
     }
-    teardown();
     onSettled();
-  }
-  var unbind = (0, _bindEventListener.bind)(element, {
-    type: 'transitionend',
-    listener: settle,
-    options: {
-      once: true
+  });
+  return function () {
+    isCancelled = true;
+  };
+}
+
+/**
+ * Fires `onSettled` once all animations currently applied to `element`
+ * finish or are cancelled. Returns a cleanup that prevents stale settlement.
+ */
+function runOnAnimationsSettled(_ref2) {
+  var element = _ref2.element,
+    onSettled = _ref2.onSettled;
+  return runCancellableSettlement({
+    onSettled: onSettled,
+    schedule: function schedule(settle) {
+      var _element$getAnimation, _element$getAnimation2;
+      var animations = (_element$getAnimation = (_element$getAnimation2 = element.getAnimations) === null || _element$getAnimation2 === void 0 ? void 0 : _element$getAnimation2.call(element)) !== null && _element$getAnimation !== void 0 ? _element$getAnimation : [];
+      Promise.allSettled(animations.map(function (animation) {
+        return animation.finished;
+      })).then(settle);
     }
   });
-  var safetyNetId = setTimeout(settle, safetyNetMs);
-  return teardown;
 }
 
 /**
@@ -128,13 +103,12 @@ function runOnTransitionEndOrTimeout(_ref) {
  * Every effect dispatches on the single `phase` value instead of a
  * cross-product of booleans.
  */
-function useAnimatedVisibility(_ref2) {
-  var isOpen = _ref2.isOpen,
-    animationKind = _ref2.animationKind,
-    shouldAnimate = _ref2.shouldAnimate,
-    elementRef = _ref2.elementRef,
-    onEnterFinish = _ref2.onEnterFinish,
-    onExitFinish = _ref2.onExitFinish;
+function useAnimatedVisibility(_ref3) {
+  var isOpen = _ref3.isOpen,
+    shouldAnimate = _ref3.shouldAnimate,
+    elementRef = _ref3.elementRef,
+    onEnterFinish = _ref3.onEnterFinish,
+    onExitFinish = _ref3.onExitFinish;
   var willAnimate = shouldAnimate && !(0, _reducedMotion.prefersReducedMotion)();
   var isNativeClosedRef = (0, _react.useRef)(false);
 
@@ -175,16 +149,14 @@ function useAnimatedVisibility(_ref2) {
     setPhase(willAnimate ? 'entering' : 'open');
   }
 
-  // Keep stable refs to the latest callbacks so effects and timeout closures
+  // Keep stable refs to the latest callbacks so effects and promise callbacks
   // always call the current callback without needing them in dependency arrays.
   var onEnterFinishRef = (0, _react.useRef)(onEnterFinish);
   onEnterFinishRef.current = onEnterFinish;
   var onExitFinishRef = (0, _react.useRef)(onExitFinish);
   onExitFinishRef.current = onExitFinish;
 
-  // Animated entry: wait for `transitionend` (or a safety-net timeout) and
-  // move to `open`. The fallback guarantees settle on swallowed events
-  // (zero-duration, browser quirk, mid-transition unmount).
+  // Animated entry: wait for all active animations and move to `open`.
   (0, _react.useEffect)(function () {
     if (phase !== 'entering') {
       return;
@@ -193,9 +165,8 @@ function useAnimatedVisibility(_ref2) {
     if (!element) {
       return;
     }
-    return runOnTransitionEndOrTimeout({
+    return runOnAnimationsSettled({
       element: element,
-      safetyNetMs: safetyNetMsMap[animationKind].enter + 50,
       onSettled: function onSettled() {
         var _onEnterFinishRef$cur;
         // Fire the consumer callback before transitioning phase so any
@@ -208,7 +179,7 @@ function useAnimatedVisibility(_ref2) {
         });
       }
     });
-  }, [phase, animationKind, elementRef]);
+  }, [phase, elementRef]);
 
   // Non-animated entry callback. The lifecycle goes `closed → open`
   // directly with no `entering` phase; fire `onEnterFinish` on that jump.
@@ -226,8 +197,8 @@ function useAnimatedVisibility(_ref2) {
     }
   }, [phase]);
 
-  // Animated exit: wait for `transitionend` (or a safety-net timeout),
-  // fire `onExitFinish`, then move to `closed` to unmount the host.
+  // Animated exit: wait for all active animations, fire `onExitFinish`,
+  // then move to `closed` to unmount the host.
   (0, _react.useEffect)(function () {
     if (phase !== 'exiting' || !willAnimate) {
       return;
@@ -236,9 +207,8 @@ function useAnimatedVisibility(_ref2) {
     if (!element) {
       return;
     }
-    return runOnTransitionEndOrTimeout({
+    return runOnAnimationsSettled({
       element: element,
-      safetyNetMs: safetyNetMsMap[animationKind].exit + 50,
       onSettled: function onSettled() {
         var _onExitFinishRef$curr;
         // Fire the consumer callback before transitioning phase to
@@ -253,7 +223,7 @@ function useAnimatedVisibility(_ref2) {
         });
       }
     });
-  }, [phase, willAnimate, animationKind, elementRef]);
+  }, [phase, willAnimate, elementRef]);
 
   // Native dismissal is authoritative. Its toggle can arrive while controlled
   // state still says open, so remember that native state and do not
@@ -283,7 +253,7 @@ function useAnimatedVisibility(_ref2) {
     });
   }, [willAnimate]);
 
-  // Non-animated exit callback. No `transitionend` to wait for, so fire
+  // Non-animated exit callback. There are no animations to wait for, so fire
   // `onExitFinish` on the transition into `exiting` (the unmount itself
   // is gated by the closing toggle handshake above).
   var prevPhaseForExitRef = (0, _react.useRef)('closed');
@@ -293,7 +263,7 @@ function useAnimatedVisibility(_ref2) {
 
     // Only fire on the non-animated transition into `exiting`. The
     // animated path's `exiting → closed` settle already fires
-    // `onExitFinish` from `runOnTransitionEndOrTimeout`.
+    // `onExitFinish` from `runOnAnimationsSettled`.
     if (prevPhase !== 'exiting' && phase === 'exiting' && !willAnimate) {
       var _onExitFinishRef$curr2;
       (_onExitFinishRef$curr2 = onExitFinishRef.current) === null || _onExitFinishRef$curr2 === void 0 || _onExitFinishRef$curr2.call(onExitFinishRef);

package/dist/cjs/popover/popover.compiled.css

@@ -18,6 +18,7 @@
 ._bfhk1j28{background-color:transparent}
 ._ca0qidpf{padding-top:0}
 ._k8m011k7{transition-property:overlay,display}
+._lcxv1wug{pointer-events:auto}
 ._n3tdidpf{padding-bottom:0}
 ._o5724jg8{white-space:normal}
 ._otyridpf{margin-bottom:0}

package/dist/cjs/popover/popover.js

@@ -34,7 +34,8 @@ var supportsPopoverHint = (0, _once.default)(function () {
   return element.popover === 'hint';
 });
 
-// Surface reset — neutralises inherited text-layout properties (e.g.
+// Surface reset — neutralises inherited interaction and text-layout properties
+// (e.g. `pointer-events: none` from an overlaid controls container and
 // `white-space: nowrap` from an `@atlaskit/select` option) that leak into a
 // top-layer element because, for CSS inheritance, it is still a DOM child of its
 // trigger (top-layer promotion is paint/stacking only; the legacy portal path
@@ -46,7 +47,7 @@ var supportsPopoverHint = (0, _once.default)(function () {
 // `no-imported-style-values` — Compiled styles are null at runtime), so the reset is
 // co-located and duplicated deliberately.
 var surfaceResetStyles = {
-  root: "_o5724jg8 _1nmz4jg8 _1i4q4jg8 _y3gnv2br _azhwidpf _1p1dglyw"
+  root: "_lcxv1wug _o5724jg8 _1nmz4jg8 _1i4q4jg8 _y3gnv2br _azhwidpf _1p1dglyw"
 };
 var styles = {
   root: "_19itglyw _ca0qidpf _u5f3idpf _n3tdidpf _19bvidpf _19pkidpf _2hwxidpf _otyridpf _18u0idpf _1r041wug _1reoewfl _18m9ewfl _bfhk1j28 _4t3i1wug",
@@ -138,7 +139,6 @@ var Popover = exports.Popover = /*#__PURE__*/(0, _react.forwardRef)(function Pop
   var popoverId = idProp !== null && idProp !== void 0 ? idProp : "popover-".concat(autoId.replace(/:/g, ''));
   var _useAnimatedVisibilit = (0, _useAnimatedVisibility.useAnimatedVisibility)({
       isOpen: isOpen,
-      animationKind: 'popover',
       shouldAnimate: shouldAnimate,
       elementRef: ownRef,
       onEnterFinish: onEnterFinish,

package/dist/es2019/dialog/dialog-content.compiled.css

@@ -24,6 +24,7 @@
 ._bozgze3t{padding-inline-start:var(--ds-space-0,0)}
 ._c71lglyw{max-height:none}
 ._k8m011k7{transition-property:overlay,display}
+._lcxv1wug{pointer-events:auto}
 ._o5724jg8{white-space:normal}
 ._otyr1wug{margin-bottom:auto}
 ._p12fglyw{max-width:none}

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

@@ -11,16 +11,16 @@ import { useAnimatedVisibility } from '../internal/use-animated-visibility';
 import { useFocusWrap } from '../internal/use-focus-wrap';
 import { useSafariEscapeFix } from '../internal/use-safari-escape-fix';
 // Surface reset — see the rationale on `surfaceResetStyles` in `popover/popover.tsx`.
-// Neutralises inherited text-layout properties (e.g. `white-space: nowrap`) that leak
-// into the top-layer surface. Excludes `color`/`font` (theming) and
-// `direction`/`unicode-bidi` (RTL must inherit). Pure layout reset with no box
-// side-effects, so it does not reintroduce the `margin: auto` centering problem that
-// kept `height: auto` off `Dialog`.
+// Neutralises inherited interaction and text-layout properties (e.g.
+// `pointer-events: none` and `white-space: nowrap`) that leak into the top-layer
+// surface. Excludes `color`/`font` (theming) and `direction`/`unicode-bidi` (RTL
+// must inherit). The reset has no box side-effects, so it does not reintroduce
+// the `margin: auto` centering problem that kept `height: auto` off `Dialog`.
 //
 // KEEP IN SYNC with the identical `surfaceResetStyles` in `popover/popover.tsx`
 // (ADS forbids sharing styles across files, so it is co-located and duplicated).
 const surfaceResetStyles = {
-  root: "_o5724jg8 _1nmz4jg8 _1i4q4jg8 _y3gnv2br _azhwidpf _1p1dglyw"
+  root: "_lcxv1wug _o5724jg8 _1nmz4jg8 _1i4q4jg8 _y3gnv2br _azhwidpf _1p1dglyw"
 };
 const dialogStyles = {
   root: "_19itglyw _19pk1wug _2hwx1wug _otyr1wug _18u01wug _1q51ze3t _y4tize3t _85i5ze3t _bozgze3t _p12fglyw _c71lglyw _bfhk1j28",
@@ -80,7 +80,6 @@ export const Dialog = /*#__PURE__*/forwardRef(function Dialog({
     onToggle
   } = useAnimatedVisibility({
     isOpen,
-    animationKind: 'dialog',
     shouldAnimate,
     elementRef: ownRef,
     onEnterFinish,

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

@@ -1,63 +1,37 @@
 import { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
-import { bind } from 'bind-event-listener';
 import { prefersReducedMotion } from './reduced-motion';
-/**
- * Using the recommended motion timings for safety net.
- *
- * Not setting these timings on the preset config because they're defined in the CSS,
- * so configuring it in the preset doesn't achieve anything except introduce a potential
- * source of drift.
- *
- * TODO: figure out a way to not need to redeclare these in the future,
- * and keep CSS and JS timings in sync always.
- */
-const safetyNetMsMap = {
-  dialog: {
-    enter: 250,
-    // Corresponds to `motion.duration.long`
-    exit: 200 // Corresponds to `motion.duration.medium`
-  },
-  popover: {
-    enter: 150,
-    // Corresponds to `motion.duration.short`
-    exit: 100 // Corresponds to `motion.duration.xshort`
-  }
-};
+function runCancellableSettlement({
+  schedule,
+  onSettled
+}) {
+  let isCancelled = false;
+  schedule(() => {
+    if (isCancelled) {
+      return;
+    }
+    onSettled();
+  });
+  return () => {
+    isCancelled = true;
+  };
+}
 
 /**
- * Fires `onSettled` once when `transitionend` fires on `element`, or after
- * `safetyNetMs` if the event is swallowed (mid-transition unmount, CSS
- * mismatch, browser quirks). Returns a cleanup that cancels both paths.
+ * Fires `onSettled` once all animations currently applied to `element`
+ * finish or are cancelled. Returns a cleanup that prevents stale settlement.
  */
-function runOnTransitionEndOrTimeout({
+function runOnAnimationsSettled({
   element,
-  safetyNetMs,
   onSettled
 }) {
-  const state = {
-    isSettled: false
-  };
-  function teardown() {
-    state.isSettled = true;
-    clearTimeout(safetyNetId);
-    unbind();
-  }
-  function settle() {
-    if (state.isSettled) {
-      return;
-    }
-    teardown();
-    onSettled();
-  }
-  const unbind = bind(element, {
-    type: 'transitionend',
-    listener: settle,
-    options: {
-      once: true
+  return runCancellableSettlement({
+    onSettled,
+    schedule: settle => {
+      var _element$getAnimation, _element$getAnimation2;
+      const animations = (_element$getAnimation = (_element$getAnimation2 = element.getAnimations) === null || _element$getAnimation2 === void 0 ? void 0 : _element$getAnimation2.call(element)) !== null && _element$getAnimation !== void 0 ? _element$getAnimation : [];
+      Promise.allSettled(animations.map(animation => animation.finished)).then(settle);
     }
   });
-  const safetyNetId = setTimeout(settle, safetyNetMs);
-  return teardown;
 }
 
 /**
@@ -123,7 +97,6 @@ function runOnTransitionEndOrTimeout({
  */
 export function useAnimatedVisibility({
   isOpen,
-  animationKind,
   shouldAnimate,
   elementRef,
   onEnterFinish,
@@ -166,16 +139,14 @@ export function useAnimatedVisibility({
     setPhase(willAnimate ? 'entering' : 'open');
   }
 
-  // Keep stable refs to the latest callbacks so effects and timeout closures
+  // Keep stable refs to the latest callbacks so effects and promise callbacks
   // always call the current callback without needing them in dependency arrays.
   const onEnterFinishRef = useRef(onEnterFinish);
   onEnterFinishRef.current = onEnterFinish;
   const onExitFinishRef = useRef(onExitFinish);
   onExitFinishRef.current = onExitFinish;
 
-  // Animated entry: wait for `transitionend` (or a safety-net timeout) and
-  // move to `open`. The fallback guarantees settle on swallowed events
-  // (zero-duration, browser quirk, mid-transition unmount).
+  // Animated entry: wait for all active animations and move to `open`.
   useEffect(() => {
     if (phase !== 'entering') {
       return;
@@ -184,9 +155,8 @@ export function useAnimatedVisibility({
     if (!element) {
       return;
     }
-    return runOnTransitionEndOrTimeout({
+    return runOnAnimationsSettled({
       element,
-      safetyNetMs: safetyNetMsMap[animationKind].enter + 50,
       onSettled: () => {
         var _onEnterFinishRef$cur;
         // Fire the consumer callback before transitioning phase so any
@@ -197,7 +167,7 @@ export function useAnimatedVisibility({
         setPhase(current => current === 'entering' ? 'open' : current);
       }
     });
-  }, [phase, animationKind, elementRef]);
+  }, [phase, elementRef]);
 
   // Non-animated entry callback. The lifecycle goes `closed → open`
   // directly with no `entering` phase; fire `onEnterFinish` on that jump.
@@ -215,8 +185,8 @@ export function useAnimatedVisibility({
     }
   }, [phase]);
 
-  // Animated exit: wait for `transitionend` (or a safety-net timeout),
-  // fire `onExitFinish`, then move to `closed` to unmount the host.
+  // Animated exit: wait for all active animations, fire `onExitFinish`,
+  // then move to `closed` to unmount the host.
   useEffect(() => {
     if (phase !== 'exiting' || !willAnimate) {
       return;
@@ -225,9 +195,8 @@ export function useAnimatedVisibility({
     if (!element) {
       return;
     }
-    return runOnTransitionEndOrTimeout({
+    return runOnAnimationsSettled({
       element,
-      safetyNetMs: safetyNetMsMap[animationKind].exit + 50,
       onSettled: () => {
         var _onExitFinishRef$curr;
         // Fire the consumer callback before transitioning phase to
@@ -240,7 +209,7 @@ export function useAnimatedVisibility({
         setPhase(current => current === 'exiting' ? 'closed' : current);
       }
     });
-  }, [phase, willAnimate, animationKind, elementRef]);
+  }, [phase, willAnimate, elementRef]);
 
   // Native dismissal is authoritative. Its toggle can arrive while controlled
   // state still says open, so remember that native state and do not
@@ -270,7 +239,7 @@ export function useAnimatedVisibility({
     });
   }, [willAnimate]);
 
-  // Non-animated exit callback. No `transitionend` to wait for, so fire
+  // Non-animated exit callback. There are no animations to wait for, so fire
   // `onExitFinish` on the transition into `exiting` (the unmount itself
   // is gated by the closing toggle handshake above).
   const prevPhaseForExitRef = useRef('closed');
@@ -280,7 +249,7 @@ export function useAnimatedVisibility({
 
     // Only fire on the non-animated transition into `exiting`. The
     // animated path's `exiting → closed` settle already fires
-    // `onExitFinish` from `runOnTransitionEndOrTimeout`.
+    // `onExitFinish` from `runOnAnimationsSettled`.
     if (prevPhase !== 'exiting' && phase === 'exiting' && !willAnimate) {
       var _onExitFinishRef$curr2;
       (_onExitFinishRef$curr2 = onExitFinishRef.current) === null || _onExitFinishRef$curr2 === void 0 ? void 0 : _onExitFinishRef$curr2.call(onExitFinishRef);

package/dist/es2019/popover/popover.compiled.css

@@ -18,6 +18,7 @@
 ._bfhk1j28{background-color:transparent}
 ._ca0qidpf{padding-top:0}
 ._k8m011k7{transition-property:overlay,display}
+._lcxv1wug{pointer-events:auto}
 ._n3tdidpf{padding-bottom:0}
 ._o5724jg8{white-space:normal}
 ._otyridpf{margin-bottom:0}

package/dist/es2019/popover/popover.js

@@ -25,7 +25,8 @@ const supportsPopoverHint = once(() => {
   return element.popover === 'hint';
 });
 
-// Surface reset — neutralises inherited text-layout properties (e.g.
+// Surface reset — neutralises inherited interaction and text-layout properties
+// (e.g. `pointer-events: none` from an overlaid controls container and
 // `white-space: nowrap` from an `@atlaskit/select` option) that leak into a
 // top-layer element because, for CSS inheritance, it is still a DOM child of its
 // trigger (top-layer promotion is paint/stacking only; the legacy portal path
@@ -37,7 +38,7 @@ const supportsPopoverHint = once(() => {
 // `no-imported-style-values` — Compiled styles are null at runtime), so the reset is
 // co-located and duplicated deliberately.
 const surfaceResetStyles = {
-  root: "_o5724jg8 _1nmz4jg8 _1i4q4jg8 _y3gnv2br _azhwidpf _1p1dglyw"
+  root: "_lcxv1wug _o5724jg8 _1nmz4jg8 _1i4q4jg8 _y3gnv2br _azhwidpf _1p1dglyw"
 };
 const styles = {
   root: "_19itglyw _ca0qidpf _u5f3idpf _n3tdidpf _19bvidpf _19pkidpf _2hwxidpf _otyridpf _18u0idpf _1r041wug _1reoewfl _18m9ewfl _bfhk1j28 _4t3i1wug",
@@ -132,7 +133,6 @@ export const Popover = /*#__PURE__*/forwardRef(function Popover({
     onToggle
   } = useAnimatedVisibility({
     isOpen,
-    animationKind: 'popover',
     shouldAnimate,
     elementRef: ownRef,
     onEnterFinish,

package/dist/esm/dialog/dialog-content.compiled.css

@@ -24,6 +24,7 @@
 ._bozgze3t{padding-inline-start:var(--ds-space-0,0)}
 ._c71lglyw{max-height:none}
 ._k8m011k7{transition-property:overlay,display}
+._lcxv1wug{pointer-events:auto}
 ._o5724jg8{white-space:normal}
 ._otyr1wug{margin-bottom:auto}
 ._p12fglyw{max-width:none}

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

@@ -11,16 +11,16 @@ import { useAnimatedVisibility } from '../internal/use-animated-visibility';
 import { useFocusWrap } from '../internal/use-focus-wrap';
 import { useSafariEscapeFix } from '../internal/use-safari-escape-fix';
 // Surface reset — see the rationale on `surfaceResetStyles` in `popover/popover.tsx`.
-// Neutralises inherited text-layout properties (e.g. `white-space: nowrap`) that leak
-// into the top-layer surface. Excludes `color`/`font` (theming) and
-// `direction`/`unicode-bidi` (RTL must inherit). Pure layout reset with no box
-// side-effects, so it does not reintroduce the `margin: auto` centering problem that
-// kept `height: auto` off `Dialog`.
+// Neutralises inherited interaction and text-layout properties (e.g.
+// `pointer-events: none` and `white-space: nowrap`) that leak into the top-layer
+// surface. Excludes `color`/`font` (theming) and `direction`/`unicode-bidi` (RTL
+// must inherit). The reset has no box side-effects, so it does not reintroduce
+// the `margin: auto` centering problem that kept `height: auto` off `Dialog`.
 //
 // KEEP IN SYNC with the identical `surfaceResetStyles` in `popover/popover.tsx`
 // (ADS forbids sharing styles across files, so it is co-located and duplicated).
 var surfaceResetStyles = {
-  root: "_o5724jg8 _1nmz4jg8 _1i4q4jg8 _y3gnv2br _azhwidpf _1p1dglyw"
+  root: "_lcxv1wug _o5724jg8 _1nmz4jg8 _1i4q4jg8 _y3gnv2br _azhwidpf _1p1dglyw"
 };
 var dialogStyles = {
   root: "_19itglyw _19pk1wug _2hwx1wug _otyr1wug _18u01wug _1q51ze3t _y4tize3t _85i5ze3t _bozgze3t _p12fglyw _c71lglyw _bfhk1j28",
@@ -78,7 +78,6 @@ export var Dialog = /*#__PURE__*/forwardRef(function Dialog(_ref, ref) {
   var closeReasonRef = useRef(null);
   var _useAnimatedVisibilit = useAnimatedVisibility({
       isOpen: isOpen,
-      animationKind: 'dialog',
       shouldAnimate: shouldAnimate,
       elementRef: ownRef,
       onEnterFinish: onEnterFinish,

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

@@ -1,63 +1,38 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
-import { bind } from 'bind-event-listener';
 import { prefersReducedMotion } from './reduced-motion';
-/**
- * Using the recommended motion timings for safety net.
- *
- * Not setting these timings on the preset config because they're defined in the CSS,
- * so configuring it in the preset doesn't achieve anything except introduce a potential
- * source of drift.
- *
- * TODO: figure out a way to not need to redeclare these in the future,
- * and keep CSS and JS timings in sync always.
- */
-var safetyNetMsMap = {
-  dialog: {
-    enter: 250,
-    // Corresponds to `motion.duration.long`
-    exit: 200 // Corresponds to `motion.duration.medium`
-  },
-  popover: {
-    enter: 150,
-    // Corresponds to `motion.duration.short`
-    exit: 100 // Corresponds to `motion.duration.xshort`
-  }
-};
-
-/**
- * Fires `onSettled` once when `transitionend` fires on `element`, or after
- * `safetyNetMs` if the event is swallowed (mid-transition unmount, CSS
- * mismatch, browser quirks). Returns a cleanup that cancels both paths.
- */
-function runOnTransitionEndOrTimeout(_ref) {
-  var element = _ref.element,
-    safetyNetMs = _ref.safetyNetMs,
+function runCancellableSettlement(_ref) {
+  var schedule = _ref.schedule,
     onSettled = _ref.onSettled;
-  var state = {
-    isSettled: false
-  };
-  function teardown() {
-    state.isSettled = true;
-    clearTimeout(safetyNetId);
-    unbind();
-  }
-  function settle() {
-    if (state.isSettled) {
+  var isCancelled = false;
+  schedule(function () {
+    if (isCancelled) {
       return;
     }
-    teardown();
     onSettled();
-  }
-  var unbind = bind(element, {
-    type: 'transitionend',
-    listener: settle,
-    options: {
-      once: true
+  });
+  return function () {
+    isCancelled = true;
+  };
+}
+
+/**
+ * Fires `onSettled` once all animations currently applied to `element`
+ * finish or are cancelled. Returns a cleanup that prevents stale settlement.
+ */
+function runOnAnimationsSettled(_ref2) {
+  var element = _ref2.element,
+    onSettled = _ref2.onSettled;
+  return runCancellableSettlement({
+    onSettled: onSettled,
+    schedule: function schedule(settle) {
+      var _element$getAnimation, _element$getAnimation2;
+      var animations = (_element$getAnimation = (_element$getAnimation2 = element.getAnimations) === null || _element$getAnimation2 === void 0 ? void 0 : _element$getAnimation2.call(element)) !== null && _element$getAnimation !== void 0 ? _element$getAnimation : [];
+      Promise.allSettled(animations.map(function (animation) {
+        return animation.finished;
+      })).then(settle);
     }
   });
-  var safetyNetId = setTimeout(settle, safetyNetMs);
-  return teardown;
 }
 
 /**
@@ -121,13 +96,12 @@ function runOnTransitionEndOrTimeout(_ref) {
  * Every effect dispatches on the single `phase` value instead of a
  * cross-product of booleans.
  */
-export function useAnimatedVisibility(_ref2) {
-  var isOpen = _ref2.isOpen,
-    animationKind = _ref2.animationKind,
-    shouldAnimate = _ref2.shouldAnimate,
-    elementRef = _ref2.elementRef,
-    onEnterFinish = _ref2.onEnterFinish,
-    onExitFinish = _ref2.onExitFinish;
+export function useAnimatedVisibility(_ref3) {
+  var isOpen = _ref3.isOpen,
+    shouldAnimate = _ref3.shouldAnimate,
+    elementRef = _ref3.elementRef,
+    onEnterFinish = _ref3.onEnterFinish,
+    onExitFinish = _ref3.onExitFinish;
   var willAnimate = shouldAnimate && !prefersReducedMotion();
   var isNativeClosedRef = useRef(false);
 
@@ -168,16 +142,14 @@ export function useAnimatedVisibility(_ref2) {
     setPhase(willAnimate ? 'entering' : 'open');
   }
 
-  // Keep stable refs to the latest callbacks so effects and timeout closures
+  // Keep stable refs to the latest callbacks so effects and promise callbacks
   // always call the current callback without needing them in dependency arrays.
   var onEnterFinishRef = useRef(onEnterFinish);
   onEnterFinishRef.current = onEnterFinish;
   var onExitFinishRef = useRef(onExitFinish);
   onExitFinishRef.current = onExitFinish;
 
-  // Animated entry: wait for `transitionend` (or a safety-net timeout) and
-  // move to `open`. The fallback guarantees settle on swallowed events
-  // (zero-duration, browser quirk, mid-transition unmount).
+  // Animated entry: wait for all active animations and move to `open`.
   useEffect(function () {
     if (phase !== 'entering') {
       return;
@@ -186,9 +158,8 @@ export function useAnimatedVisibility(_ref2) {
     if (!element) {
       return;
     }
-    return runOnTransitionEndOrTimeout({
+    return runOnAnimationsSettled({
       element: element,
-      safetyNetMs: safetyNetMsMap[animationKind].enter + 50,
       onSettled: function onSettled() {
         var _onEnterFinishRef$cur;
         // Fire the consumer callback before transitioning phase so any
@@ -201,7 +172,7 @@ export function useAnimatedVisibility(_ref2) {
         });
       }
     });
-  }, [phase, animationKind, elementRef]);
+  }, [phase, elementRef]);
 
   // Non-animated entry callback. The lifecycle goes `closed → open`
   // directly with no `entering` phase; fire `onEnterFinish` on that jump.
@@ -219,8 +190,8 @@ export function useAnimatedVisibility(_ref2) {
     }
   }, [phase]);
 
-  // Animated exit: wait for `transitionend` (or a safety-net timeout),
-  // fire `onExitFinish`, then move to `closed` to unmount the host.
+  // Animated exit: wait for all active animations, fire `onExitFinish`,
+  // then move to `closed` to unmount the host.
   useEffect(function () {
     if (phase !== 'exiting' || !willAnimate) {
       return;
@@ -229,9 +200,8 @@ export function useAnimatedVisibility(_ref2) {
     if (!element) {
       return;
     }
-    return runOnTransitionEndOrTimeout({
+    return runOnAnimationsSettled({
       element: element,
-      safetyNetMs: safetyNetMsMap[animationKind].exit + 50,
       onSettled: function onSettled() {
         var _onExitFinishRef$curr;
         // Fire the consumer callback before transitioning phase to
@@ -246,7 +216,7 @@ export function useAnimatedVisibility(_ref2) {
         });
       }
     });
-  }, [phase, willAnimate, animationKind, elementRef]);
+  }, [phase, willAnimate, elementRef]);
 
   // Native dismissal is authoritative. Its toggle can arrive while controlled
   // state still says open, so remember that native state and do not
@@ -276,7 +246,7 @@ export function useAnimatedVisibility(_ref2) {
     });
   }, [willAnimate]);
 
-  // Non-animated exit callback. No `transitionend` to wait for, so fire
+  // Non-animated exit callback. There are no animations to wait for, so fire
   // `onExitFinish` on the transition into `exiting` (the unmount itself
   // is gated by the closing toggle handshake above).
   var prevPhaseForExitRef = useRef('closed');
@@ -286,7 +256,7 @@ export function useAnimatedVisibility(_ref2) {
 
     // Only fire on the non-animated transition into `exiting`. The
     // animated path's `exiting → closed` settle already fires
-    // `onExitFinish` from `runOnTransitionEndOrTimeout`.
+    // `onExitFinish` from `runOnAnimationsSettled`.
     if (prevPhase !== 'exiting' && phase === 'exiting' && !willAnimate) {
       var _onExitFinishRef$curr2;
       (_onExitFinishRef$curr2 = onExitFinishRef.current) === null || _onExitFinishRef$curr2 === void 0 || _onExitFinishRef$curr2.call(onExitFinishRef);

package/dist/esm/popover/popover.compiled.css

@@ -18,6 +18,7 @@
 ._bfhk1j28{background-color:transparent}
 ._ca0qidpf{padding-top:0}
 ._k8m011k7{transition-property:overlay,display}
+._lcxv1wug{pointer-events:auto}
 ._n3tdidpf{padding-bottom:0}
 ._o5724jg8{white-space:normal}
 ._otyridpf{margin-bottom:0}

package/dist/esm/popover/popover.js

@@ -25,7 +25,8 @@ var supportsPopoverHint = once(function () {
   return element.popover === 'hint';
 });
 
-// Surface reset — neutralises inherited text-layout properties (e.g.
+// Surface reset — neutralises inherited interaction and text-layout properties
+// (e.g. `pointer-events: none` from an overlaid controls container and
 // `white-space: nowrap` from an `@atlaskit/select` option) that leak into a
 // top-layer element because, for CSS inheritance, it is still a DOM child of its
 // trigger (top-layer promotion is paint/stacking only; the legacy portal path
@@ -37,7 +38,7 @@ var supportsPopoverHint = once(function () {
 // `no-imported-style-values` — Compiled styles are null at runtime), so the reset is
 // co-located and duplicated deliberately.
 var surfaceResetStyles = {
-  root: "_o5724jg8 _1nmz4jg8 _1i4q4jg8 _y3gnv2br _azhwidpf _1p1dglyw"
+  root: "_lcxv1wug _o5724jg8 _1nmz4jg8 _1i4q4jg8 _y3gnv2br _azhwidpf _1p1dglyw"
 };
 var styles = {
   root: "_19itglyw _ca0qidpf _u5f3idpf _n3tdidpf _19bvidpf _19pkidpf _2hwxidpf _otyridpf _18u0idpf _1r041wug _1reoewfl _18m9ewfl _bfhk1j28 _4t3i1wug",
@@ -129,7 +130,6 @@ export var Popover = /*#__PURE__*/forwardRef(function Popover(_ref, ref) {
   var popoverId = idProp !== null && idProp !== void 0 ? idProp : "popover-".concat(autoId.replace(/:/g, ''));
   var _useAnimatedVisibilit = useAnimatedVisibility({
       isOpen: isOpen,
-      animationKind: 'popover',
       shouldAnimate: shouldAnimate,
       elementRef: ownRef,
       onEnterFinish: onEnterFinish,

package/dist/types/internal/use-animated-visibility.d.ts

@@ -1,14 +1,9 @@
 import { type RefObject } from 'react';
-type TAnimationKind = 'dialog' | 'popover';
 type TUseAnimatedVisibilityArgs = {
     /**
      * Whether the element is logically open.
      */
     isOpen: boolean;
-    /**
-     * Animation kind used to select default safety-net timings.
-     */
-    animationKind: TAnimationKind;
     /**
      * Animation config for entry/exit transitions.
      * Pass `false` or `undefined` to disable animation.
@@ -16,7 +11,7 @@ type TUseAnimatedVisibilityArgs = {
     shouldAnimate: boolean;
     /**
      * Ref to the DOM element that plays the entry/exit transitions.
-     * Used to listen for `transitionend`.
+     * Used to inspect active animations.
      */
     elementRef: RefObject<HTMLElement | null>;
     /**
@@ -110,5 +105,5 @@ export type TPhase = 'closed' | 'entering' | 'open' | 'exiting';
  * Every effect dispatches on the single `phase` value instead of a
  * cross-product of booleans.
  */
-export declare function useAnimatedVisibility({ isOpen, animationKind, shouldAnimate, elementRef, onEnterFinish, onExitFinish, }: TUseAnimatedVisibilityArgs): TUseAnimatedVisibilityResult;
+export declare function useAnimatedVisibility({ isOpen, shouldAnimate, elementRef, onEnterFinish, onExitFinish, }: TUseAnimatedVisibilityArgs): TUseAnimatedVisibilityResult;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/top-layer",
-	"version": "4.1.0",
+	"version": "4.2.1",
 	"description": "Low-level layering primitives based on popover and dialog",
 	"homepage": "https://atlassian.design/components/top-layer",
 	"repository": "https://bitbucket.org/atlassian/atlassian-frontend-mirror",
@@ -55,7 +55,7 @@
 		"@af/visual-regression": "workspace:^",
 		"@atlaskit/button": "^25.0.0",
 		"@atlaskit/heading": "^7.0.0",
-		"@atlaskit/lozenge": "^15.0.0",
+		"@atlaskit/lozenge": "^15.1.0",
 		"@atlaskit/primitives": "^22.2.0",
 		"@atlaskit/ssr": "workspace:^",
 		"@atlaskit/textfield": "^10.0.0",