@atlaskit/top-layer 4.2.0 → 4.2.2

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/top-layer
 
+## 4.2.2
+
+### Patch Changes
+
+- [`c3cae446aea72`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/c3cae446aea72) -
+  Only set `aria-controls` while popup content is mounted and clarify the top-layer trigger helper
+  documentation.
+
+## 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

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

@@ -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/get-aria-for-trigger.js

@@ -50,9 +50,8 @@ var roleToAriaHasPopup = {
  *   `menu → "menu"`, `tooltip → undefined`). React omits the attribute when
  *   the value is `undefined`.
  * - `aria-expanded` - reflects the current open state.
- * - `aria-controls` - references the popover element by its id, even
- *   while the popover is closed. The relationship is stable; `aria-expanded`
- *   carries the current visibility state.
+ * - `aria-controls` - references the popover element by its id while the
+ *   popover is open, and is omitted while the popover is closed and unmounted.
  *
  * **This function is for click/keyboard-activated popovers only.** For
  * hover-driven tooltips, the trigger should use `aria-describedby` instead.

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.js

@@ -139,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.js

@@ -80,7 +80,6 @@ export const Dialog = /*#__PURE__*/forwardRef(function Dialog({
     onToggle
   } = useAnimatedVisibility({
     isOpen,
-    animationKind: 'dialog',
     shouldAnimate,
     elementRef: ownRef,
     onEnterFinish,

package/dist/es2019/internal/get-aria-for-trigger.js

@@ -44,9 +44,8 @@ const roleToAriaHasPopup = {
  *   `menu → "menu"`, `tooltip → undefined`). React omits the attribute when
  *   the value is `undefined`.
  * - `aria-expanded` - reflects the current open state.
- * - `aria-controls` - references the popover element by its id, even
- *   while the popover is closed. The relationship is stable; `aria-expanded`
- *   carries the current visibility state.
+ * - `aria-controls` - references the popover element by its id while the
+ *   popover is open, and is omitted while the popover is closed and unmounted.
  *
  * **This function is for click/keyboard-activated popovers only.** For
  * hover-driven tooltips, the trigger should use `aria-describedby` instead.

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.js

@@ -133,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.js

@@ -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/get-aria-for-trigger.js

@@ -44,9 +44,8 @@ var roleToAriaHasPopup = {
  *   `menu → "menu"`, `tooltip → undefined`). React omits the attribute when
  *   the value is `undefined`.
  * - `aria-expanded` - reflects the current open state.
- * - `aria-controls` - references the popover element by its id, even
- *   while the popover is closed. The relationship is stable; `aria-expanded`
- *   carries the current visibility state.
+ * - `aria-controls` - references the popover element by its id while the
+ *   popover is open, and is omitted while the popover is closed and unmounted.
  *
  * **This function is for click/keyboard-activated popovers only.** For
  * hover-driven tooltips, the trigger should use `aria-describedby` instead.

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.js

@@ -130,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/get-aria-for-trigger.d.ts

@@ -65,9 +65,8 @@ type TAriaForTrigger = {
  *   `menu → "menu"`, `tooltip → undefined`). React omits the attribute when
  *   the value is `undefined`.
  * - `aria-expanded` - reflects the current open state.
- * - `aria-controls` - references the popover element by its id, even
- *   while the popover is closed. The relationship is stable; `aria-expanded`
- *   carries the current visibility state.
+ * - `aria-controls` - references the popover element by its id while the
+ *   popover is open, and is omitted while the popover is closed and unmounted.
  *
  * **This function is for click/keyboard-activated popovers only.** For
  * hover-driven tooltips, the trigger should use `aria-describedby` instead.

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.2.0",
+	"version": "4.2.2",
 	"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",