@atlaskit/top-layer 0.11.0 → 0.12.1

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # @atlaskit/top-layer
 
+## 0.12.1
+
+### Patch Changes
+
+- [`c3913985e2415`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/c3913985e2415) -
+  Internal: remove unused `src/arrow/` module. The `arrow()` preset and `TArrowPreset` type were
+  never exported from `package.json` and had no consumers in the codebase.
+
+## 0.12.0
+
+### Minor Changes
+
+- [`cc76d2e733b71`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/cc76d2e733b71) - -
+  The prop `onEnterFinish` has been added to `Popup.Content` and `Popover`, for lifecycle
+  coordination after the entry animation completes.
+  - The prop `onExitFinish` has been added to `Popup.Content`, for lifecycle coordination after the
+    exit animation completes. `Popover` already exposed this prop.
+
+  - Updates the popup trigger's `aria-expanded` attribute, so it stays `"true"` for the full
+    duration of the popup's open and close animations, only going `false` after the exit animation
+    completes.
+
+  - Internal refactor to the popup context to use a string union for state.
+
 ## 0.11.0
 
 ### Minor Changes

package/dist/cjs/animations/presets.js

@@ -86,6 +86,7 @@ function slideAndFade(options) {
         distance: distance
       });
     },
+    enterDurationMs: 350,
     exitDurationMs: 175
   };
 }
@@ -111,6 +112,7 @@ function fade() {
   return {
     name: 'fade',
     css: FADE_CSS,
+    enterDurationMs: 350,
     exitDurationMs: 175
   };
 }
@@ -136,6 +138,7 @@ function scaleAndFade() {
   return {
     name: 'scale-and-fade',
     css: SCALE_AND_FADE_CSS,
+    enterDurationMs: 350,
     exitDurationMs: 175
   };
 }
@@ -175,6 +178,7 @@ function dialogSlideUpAndFade(options) {
   return {
     name: distance === 12 ? 'slide-up-and-fade' : "slide-up-and-fade-".concat(distance),
     css: distance === 12 ? DIALOG_SLIDE_UP_AND_FADE_CSS : DIALOG_SLIDE_UP_AND_FADE_CSS.replace(/12px/g, "".concat(distance, "px")),
+    enterDurationMs: 350,
     exitDurationMs: 175
   };
 }
@@ -203,6 +207,7 @@ function dialogFade() {
   return {
     name: 'fade',
     css: DIALOG_FADE_CSS,
+    enterDurationMs: 350,
     exitDurationMs: 175
   };
 }

package/dist/cjs/entry-points/use-arrow-navigation.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "isAtCurrentMenuLevel", {
   enumerable: true,
   get: function get() {
-    return _useArrowNavigation.isAtCurrentMenuLevel;
+    return _isAtCurrentMenuLevel.isAtCurrentMenuLevel;
   }
 });
 Object.defineProperty(exports, "useArrowNavigation", {
@@ -15,4 +15,5 @@ Object.defineProperty(exports, "useArrowNavigation", {
     return _useArrowNavigation.useArrowNavigation;
   }
 });
-var _useArrowNavigation = require("../use-arrow-navigation");
+var _useArrowNavigation = require("../use-arrow-navigation");
+var _isAtCurrentMenuLevel = require("../use-arrow-navigation/is-at-current-menu-level");

package/dist/cjs/internal/placement-to-position-area.js

@@ -0,0 +1,43 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.placementToPositionArea = placementToPositionArea;
+var _resolvePlacement = require("./resolve-placement");
+/**
+ * Resolves placement options to CSS `position-area` syntax.
+ *
+ * The `align` field represents the *visual* alignment:
+ * - `align: 'start'` means "aligned to the trigger's start edge" (left in LTR for block axis)
+ * - `align: 'end'` means "aligned to the trigger's end edge"
+ * - `align: 'center'` means centered (single-axis position-area)
+ *
+ * CSS `position-area` uses `span-*` keywords which indicate the *expansion direction*.
+ * Visual start-alignment requires `span-{cross-axis}-end` (expand toward end = start-aligned).
+ * This function handles the inversion internally.
+ *
+ * @example
+ * placementToPositionArea({ placement: { axis: 'block', edge: 'end', align: 'center' } }) // → 'block-end'
+ * placementToPositionArea({ placement: { axis: 'block', edge: 'end', align: 'start' } }) // → 'block-end span-inline-end'
+ * placementToPositionArea({ placement: { axis: 'block', edge: 'end', align: 'end' } })   // → 'block-end span-inline-start'
+ */
+function placementToPositionArea(_ref) {
+  var placement = _ref.placement;
+  var _getPlacement = (0, _resolvePlacement.getPlacement)({
+      placement: placement
+    }),
+    axis = _getPlacement.axis,
+    edge = _getPlacement.edge,
+    align = _getPlacement.align;
+  var edgeValue = "".concat(axis, "-").concat(edge);
+  if (align === 'center') {
+    return edgeValue;
+  }
+
+  // Cross-axis name: block ↔ inline
+  var crossAxis = axis === 'block' ? 'inline' : 'block';
+  // Invert align → CSS span direction: visual 'start' → span toward 'end'
+  var spanDir = align === 'start' ? 'end' : 'start';
+  return "".concat(edgeValue, " span-").concat(crossAxis, "-").concat(spanDir);
+}

package/dist/cjs/internal/placement-to-try-fallbacks.js

@@ -0,0 +1,82 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.placementToTryFallbacks = placementToTryFallbacks;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _resolvePlacement = require("./resolve-placement");
+/**
+ * Returns `position-try-fallbacks` value based on placement.
+ *
+ * For centered placements, includes cross-axis aligned position-area
+ * values so the browser can shift the popover along the cross-axis
+ * when the centered position would overflow the viewport edge.
+ *
+ * Fallback order for centered placements (e.g. `block-end`):
+ * 1. Same edge, start-aligned (shift for near-edge overflow)
+ * 2. Same edge, end-aligned (shift for far-edge overflow)
+ * 3. Flipped edge, centered
+ * 4. Flipped edge, start-aligned
+ * 5. Flipped edge, end-aligned
+ *
+ * For aligned placements (start/end), includes the same-edge centered
+ * position as fallbacks so the browser can try centering when the aligned
+ * position would overflow, before flipping to the opposite edge.
+ *
+ * **Why `flip-inline flip-block` (or `flip-block flip-inline`) is included:**
+ *
+ * When a popup is in a viewport corner (e.g. inline-end align-end at the
+ * top-right), flipping only the primary axis (`flip-inline`) moves the popup
+ * to the left but keeps the same cross-axis span direction (e.g. upward),
+ * which is still off-screen. The combined keyword `flip-inline flip-block`
+ * mirrors the popup diagonally. It flips BOTH the position-area AND both
+ * inline and block margins simultaneously, placing the popup at the
+ * diagonally opposite corner where there is always space.
+ *
+ * Named `position-area` entries (e.g. `inline-start span-block-end`) in
+ * `position-try-fallbacks` do NOT update margins, so only the `flip-*`
+ * tactic keywords correctly flip the gap margin along with the position.
+ */
+function placementToTryFallbacks(_ref) {
+  var placement = _ref.placement;
+  var _getPlacement = (0, _resolvePlacement.getPlacement)({
+      placement: placement
+    }),
+    axis = _getPlacement.axis,
+    edge = _getPlacement.edge,
+    align = _getPlacement.align;
+  var crossAxis = axis === 'block' ? 'inline' : 'block';
+  var flippedEdge = edge === 'start' ? 'end' : 'start';
+  var sameEdge = "".concat(axis, "-").concat(edge);
+  var oppositeEdge = "".concat(axis, "-").concat(flippedEdge);
+  var flipKeyword = axis === 'block' ? 'flip-block' : 'flip-inline';
+  var flipCrossKeyword = axis === 'block' ? 'flip-inline' : 'flip-block';
+
+  // Single algorithm: produce the shift list against any base alignment.
+  // For `align: 'start'` the "near" shift expands toward `end`; for
+  // `align: 'end'` it expands toward `start`; for `align: 'center'`
+  // either order is symmetric (we use end-then-start to match the
+  // historical fallback list).
+  function shifts(baseAlign, edgeKey) {
+    if (baseAlign === 'center') {
+      return ["".concat(edgeKey, " span-").concat(crossAxis, "-end"), "".concat(edgeKey, " span-").concat(crossAxis, "-start")];
+    }
+    var near = baseAlign === 'start' ? 'end' : 'start';
+    var far = baseAlign === 'start' ? 'start' : 'end';
+    return ["".concat(edgeKey, " span-").concat(crossAxis, "-").concat(near), edgeKey, "".concat(edgeKey, " span-").concat(crossAxis, "-").concat(far)];
+  }
+  if (align !== 'center') {
+    // Aligned (start/end): try same-edge shifts, then single-axis flip,
+    // then diagonal flip for corner overflow, then opposite-edge shifts.
+    // Legacy Popper fallback ordering for e.g. bottom-start:
+    // [bottom, bottom-end, top-start, top, top-end, auto].
+    return [].concat((0, _toConsumableArray2.default)(shifts(align, sameEdge)), [flipKeyword, "".concat(flipKeyword, " ").concat(flipCrossKeyword)], (0, _toConsumableArray2.default)(shifts(align, oppositeEdge))).join(', ');
+  }
+
+  // Centered: same-edge shifts, single-axis flip, opposite-edge shifts.
+  // Diagonal flip is unnecessary because centered placements expand
+  // equally in both cross-axis directions.
+  return [].concat((0, _toConsumableArray2.default)(shifts('center', sameEdge)), [flipKeyword], (0, _toConsumableArray2.default)(shifts('center', oppositeEdge))).join(', ');
+}

package/dist/cjs/internal/use-anchor-position.js

@@ -4,10 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.placementToPositionArea = placementToPositionArea;
-exports.placementToTryFallbacks = placementToTryFallbacks;
 exports.useAnchorPosition = useAnchorPosition;
-var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 var _react = require("react");
@@ -16,6 +13,8 @@ var _rafSchd = _interopRequireDefault(require("raf-schd"));
 var _once = _interopRequireDefault(require("@atlaskit/ds-lib/once"));
 var _anchorPositioningFallback = require("./anchor-positioning-fallback");
 var _combine = require("./combine");
+var _placementToPositionArea = require("./placement-to-position-area");
+var _placementToTryFallbacks = require("./placement-to-try-fallbacks");
 var _resolveCssLengthToPixels = require("./resolve-css-length-to-pixels");
 var _resolvePlacement = require("./resolve-placement");
 var _setStyle = require("./set-style");
@@ -58,118 +57,6 @@ var NoopResizeObserver = /*#__PURE__*/function () {
   }]);
 }();
 
-/**
- * Resolves placement options to CSS `position-area` syntax.
- *
- * The `align` field represents the *visual* alignment:
- * - `align: 'start'` means "aligned to the trigger's start edge" (left in LTR for block axis)
- * - `align: 'end'` means "aligned to the trigger's end edge"
- * - `align: 'center'` means centered (single-axis position-area)
- *
- * CSS `position-area` uses `span-*` keywords which indicate the *expansion direction*.
- * Visual start-alignment requires `span-{cross-axis}-end` (expand toward end = start-aligned).
- * This function handles the inversion internally.
- *
- * @example
- * placementToPositionArea({ placement: { axis: 'block', edge: 'end', align: 'center' } }) // → 'block-end'
- * placementToPositionArea({ placement: { axis: 'block', edge: 'end', align: 'start' } }) // → 'block-end span-inline-end'
- * placementToPositionArea({ placement: { axis: 'block', edge: 'end', align: 'end' } })   // → 'block-end span-inline-start'
- */
-function placementToPositionArea(_ref) {
-  var placement = _ref.placement;
-  var _getPlacement = (0, _resolvePlacement.getPlacement)({
-      placement: placement
-    }),
-    axis = _getPlacement.axis,
-    edge = _getPlacement.edge,
-    align = _getPlacement.align;
-  var edgeValue = "".concat(axis, "-").concat(edge);
-  if (align === 'center') {
-    return edgeValue;
-  }
-
-  // Cross-axis name: block ↔ inline
-  var crossAxis = axis === 'block' ? 'inline' : 'block';
-  // Invert align → CSS span direction: visual 'start' → span toward 'end'
-  var spanDir = align === 'start' ? 'end' : 'start';
-  return "".concat(edgeValue, " span-").concat(crossAxis, "-").concat(spanDir);
-}
-
-/**
- * Returns `position-try-fallbacks` value based on placement.
- *
- * For centered placements, includes cross-axis aligned position-area
- * values so the browser can shift the popover along the cross-axis
- * when the centered position would overflow the viewport edge.
- *
- * Fallback order for centered placements (e.g. `block-end`):
- * 1. Same edge, start-aligned (shift for near-edge overflow)
- * 2. Same edge, end-aligned (shift for far-edge overflow)
- * 3. Flipped edge, centered
- * 4. Flipped edge, start-aligned
- * 5. Flipped edge, end-aligned
- *
- * For aligned placements (start/end), includes the same-edge centered
- * position as fallbacks so the browser can try centering when the aligned
- * position would overflow, before flipping to the opposite edge.
- *
- * **Why `flip-inline flip-block` (or `flip-block flip-inline`) is included:**
- *
- * When a popup is in a viewport corner (e.g. inline-end align-end at the
- * top-right), flipping only the primary axis (`flip-inline`) moves the popup
- * to the left but keeps the same cross-axis span direction (e.g. upward),
- * which is still off-screen. The combined keyword `flip-inline flip-block`
- * mirrors the popup diagonally. It flips BOTH the position-area AND both
- * inline and block margins simultaneously, placing the popup at the
- * diagonally opposite corner where there is always space.
- *
- * Named `position-area` entries (e.g. `inline-start span-block-end`) in
- * `position-try-fallbacks` do NOT update margins, so only the `flip-*`
- * tactic keywords correctly flip the gap margin along with the position.
- */
-// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
-function placementToTryFallbacks(_ref2) {
-  var placement = _ref2.placement;
-  var _getPlacement2 = (0, _resolvePlacement.getPlacement)({
-      placement: placement
-    }),
-    axis = _getPlacement2.axis,
-    edge = _getPlacement2.edge,
-    align = _getPlacement2.align;
-  var crossAxis = axis === 'block' ? 'inline' : 'block';
-  var flippedEdge = edge === 'start' ? 'end' : 'start';
-  var sameEdge = "".concat(axis, "-").concat(edge);
-  var oppositeEdge = "".concat(axis, "-").concat(flippedEdge);
-  var flipKeyword = axis === 'block' ? 'flip-block' : 'flip-inline';
-  var flipCrossKeyword = axis === 'block' ? 'flip-inline' : 'flip-block';
-
-  // Single algorithm: produce the shift list against any base alignment.
-  // For `align: 'start'` the "near" shift expands toward `end`; for
-  // `align: 'end'` it expands toward `start`; for `align: 'center'`
-  // either order is symmetric (we use end-then-start to match the
-  // historical fallback list).
-  function shifts(baseAlign, edgeKey) {
-    if (baseAlign === 'center') {
-      return ["".concat(edgeKey, " span-").concat(crossAxis, "-end"), "".concat(edgeKey, " span-").concat(crossAxis, "-start")];
-    }
-    var near = baseAlign === 'start' ? 'end' : 'start';
-    var far = baseAlign === 'start' ? 'start' : 'end';
-    return ["".concat(edgeKey, " span-").concat(crossAxis, "-").concat(near), edgeKey, "".concat(edgeKey, " span-").concat(crossAxis, "-").concat(far)];
-  }
-  if (align !== 'center') {
-    // Aligned (start/end): try same-edge shifts, then single-axis flip,
-    // then diagonal flip for corner overflow, then opposite-edge shifts.
-    // Legacy Popper fallback ordering for e.g. bottom-start:
-    // [bottom, bottom-end, top-start, top, top-end, auto].
-    return [].concat((0, _toConsumableArray2.default)(shifts(align, sameEdge)), [flipKeyword, "".concat(flipKeyword, " ").concat(flipCrossKeyword)], (0, _toConsumableArray2.default)(shifts(align, oppositeEdge))).join(', ');
-  }
-
-  // Centered: same-edge shifts, single-axis flip, opposite-edge shifts.
-  // Diagonal flip is unnecessary because centered placements expand
-  // equally in both cross-axis directions.
-  return [].concat((0, _toConsumableArray2.default)(shifts('center', sameEdge)), [flipKeyword], (0, _toConsumableArray2.default)(shifts('center', oppositeEdge))).join(', ');
-}
-
 /**
  * Returns true when the popover is currently open. Wrapped because the
  * `:popover-open` pseudo-class is not implemented in some test environments
@@ -201,9 +88,9 @@ var supportsAnchorPositioning = (0, _once.default)(function () {
  * For example, a `block-end` placement (popover below) gets
  * `margin-block-start: 8px` to push it away from the trigger's bottom edge.
  */
-function edgeMargin(_ref3) {
-  var placement = _ref3.placement,
-    offset = _ref3.offset;
+function edgeMargin(_ref) {
+  var placement = _ref.placement,
+    offset = _ref.offset;
   var axis = placement.axis,
     edge = placement.edge;
   var value = offset;
@@ -244,10 +131,10 @@ function edgeMargin(_ref3) {
  * positive), `align: 'center'` uses START. Margin on the un-anchored side
  * has no effect under CSS Anchor Positioning.
  */
-function crossAxisShiftMargin(_ref4) {
-  var placement = _ref4.placement,
-    crossAxisShiftCssValue = _ref4.crossAxisShiftCssValue,
-    direction = _ref4.direction;
+function crossAxisShiftMargin(_ref2) {
+  var placement = _ref2.placement,
+    crossAxisShiftCssValue = _ref2.crossAxisShiftCssValue,
+    direction = _ref2.direction;
   var axis = placement.axis,
     align = placement.align;
   var directionSign = direction === 'forwards' ? 1 : -1;
@@ -326,13 +213,13 @@ function useStablePlacement(placement) {
  * placement shape is unchanged.
  */
 // eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
-function useAnchorPosition(_ref5) {
-  var anchorRef = _ref5.anchorRef,
-    popoverRef = _ref5.popoverRef,
-    _ref5$placement = _ref5.placement,
-    placement = _ref5$placement === void 0 ? {} : _ref5$placement,
-    _ref5$forceFallbackPo = _ref5.forceFallbackPositioning,
-    forceFallbackPositioning = _ref5$forceFallbackPo === void 0 ? false : _ref5$forceFallbackPo;
+function useAnchorPosition(_ref3) {
+  var anchorRef = _ref3.anchorRef,
+    popoverRef = _ref3.popoverRef,
+    _ref3$placement = _ref3.placement,
+    placement = _ref3$placement === void 0 ? {} : _ref3$placement,
+    _ref3$forceFallbackPo = _ref3.forceFallbackPositioning,
+    forceFallbackPositioning = _ref3$forceFallbackPo === void 0 ? false : _ref3$forceFallbackPo;
   var id = (0, _react.useId)();
   // Stabilize `placement` object so the same object literal
   // value returns an object with the same reference
@@ -367,12 +254,12 @@ function useAnchorPosition(_ref5) {
         value: anchorName
       }, {
         property: 'position-area',
-        value: placementToPositionArea({
+        value: (0, _placementToPositionArea.placementToPositionArea)({
           placement: stablePlacement
         })
       }, {
         property: 'position-try-fallbacks',
-        value: placementToTryFallbacks({
+        value: (0, _placementToTryFallbacks.placementToTryFallbacks)({
           placement: stablePlacement
         })
       },

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

@@ -51,6 +51,7 @@ function useAnimatedVisibility(_ref) {
   var isOpen = _ref.isOpen,
     animate = _ref.animate,
     elementRef = _ref.elementRef,
+    onEnterFinish = _ref.onEnterFinish,
     onExitFinish = _ref.onExitFinish;
   // Resolve the animation preset and inject its CSS (idempotent).
   // Returns `null` when `animate` is falsy.
@@ -87,13 +88,76 @@ function useAnimatedVisibility(_ref) {
     setShowChildren(false);
   }
 
-  // Keep a stable ref to the latest `onExitFinish` so the effect and
-  // timeout closures below always call the current callback without
-  // needing `onExitFinish` in dependency arrays (which would reset
-  // the timeout on every new closure).
+  // Keep stable refs to the latest callbacks so effects and timeout closures
+  // 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 effect ──
+  //
+  // Fires `onEnterFinish` after the entry transition completes.
+  // When there is no animation, fires it immediately via a separate effect.
+  //
+  // A fallback timeout (enterDurationMs + 50ms buffer) ensures it always
+  // fires even if `transitionend` is never emitted (e.g. zero-duration,
+  // browser quirk, or reduced motion).
+  (0, _react.useEffect)(function () {
+    var _preset$enterDuration;
+    if (!isOpen || !showChildren || !willAnimate) {
+      return;
+    }
+    var element = elementRef.current;
+    if (!element) {
+      return;
+    }
+
+    // Both the transitionend listener and the fallback timeout are guarded by
+    // a shared `hasFired` flag to prevent double-firing. This handles the race
+    // where the 350ms transition finishes after the 400ms fallback fires
+    // (or vice versa): whichever fires first sets `hasFired = true`, and the
+    // second path becomes a no-op.
+    var hasFired = false;
+    function handleTransitionEnd() {
+      var _onEnterFinishRef$cur;
+      if (hasFired) {
+        return;
+      }
+      hasFired = true;
+      clearTimeout(fallbackId);
+      unbind();
+      (_onEnterFinishRef$cur = onEnterFinishRef.current) === null || _onEnterFinishRef$cur === void 0 || _onEnterFinishRef$cur.call(onEnterFinishRef);
+    }
+    var fallbackId = setTimeout(handleTransitionEnd, ((_preset$enterDuration = preset === null || preset === void 0 ? void 0 : preset.enterDurationMs) !== null && _preset$enterDuration !== void 0 ? _preset$enterDuration : 0) + 50);
+    var unbind = (0, _bindEventListener.bind)(element, {
+      type: 'transitionend',
+      listener: handleTransitionEnd,
+      options: {
+        once: true
+      }
+    });
+    return function () {
+      hasFired = true;
+      clearTimeout(fallbackId);
+      unbind();
+    };
+  }, [isOpen, showChildren, willAnimate, preset === null || preset === void 0 ? void 0 : preset.enterDurationMs, elementRef]);
+
+  // ── Non-animated entry callback ──
+  //
+  // When there is no animation, fire `onEnterFinish` immediately on mount and after `isOpen` goes false->true.
+  // The initial value is false to make sure it fires on mount if the current `isOpen` is true.
+  var prevIsOpenForEntryRef = (0, _react.useRef)(false);
+  (0, _react.useEffect)(function () {
+    var prevIsOpen = prevIsOpenForEntryRef.current;
+    prevIsOpenForEntryRef.current = isOpen;
+    if (!prevIsOpen && isOpen && !willAnimate) {
+      var _onEnterFinishRef$cur2;
+      (_onEnterFinishRef$cur2 = onEnterFinishRef.current) === null || _onEnterFinishRef$cur2 === void 0 || _onEnterFinishRef$cur2.call(onEnterFinishRef);
+    }
+  }, [isOpen, willAnimate]);
+
   // ── Animated exit effect ──
   //
   // Runs when all three conditions are true:
@@ -118,20 +182,32 @@ function useAnimatedVisibility(_ref) {
     if (!element) {
       return;
     }
-    function finish() {
+
+    // Both the transitionend listener and the fallback timeout are guarded by
+    // a shared `hasFired` flag to prevent double-firing. This handles the race
+    // where the 350ms transition finishes after the 400ms fallback fires
+    // (or vice versa): whichever fires first sets `hasFired = true`, and the
+    // second path becomes a no-op.
+    var hasFired = false;
+    function handleTransitionEnd() {
       var _onExitFinishRef$curr;
+      if (hasFired) {
+        return;
+      }
+      hasFired = true;
       clearTimeout(fallbackId);
+      unbind();
       setShowChildren(false);
       (_onExitFinishRef$curr = onExitFinishRef.current) === null || _onExitFinishRef$curr === void 0 || _onExitFinishRef$curr.call(onExitFinishRef);
     }
 
     // Fallback: unmount even if transitionend never fires
-    var fallbackId = setTimeout(finish, ((_preset$exitDurationM = preset === null || preset === void 0 ? void 0 : preset.exitDurationMs) !== null && _preset$exitDurationM !== void 0 ? _preset$exitDurationM : 0) + 50);
+    var fallbackId = setTimeout(handleTransitionEnd, ((_preset$exitDurationM = preset === null || preset === void 0 ? void 0 : preset.exitDurationMs) !== null && _preset$exitDurationM !== void 0 ? _preset$exitDurationM : 0) + 50);
 
     // Primary: listen for the CSS transition to complete
     var unbind = (0, _bindEventListener.bind)(element, {
       type: 'transitionend',
-      listener: finish,
+      listener: handleTransitionEnd,
       options: {
         once: true
       }
@@ -139,6 +215,7 @@ function useAnimatedVisibility(_ref) {
 
     // Cleanup on re-render or unmount: cancel pending timeout and listener
     return function () {
+      hasFired = true;
       clearTimeout(fallbackId);
       unbind();
     };

package/dist/cjs/popover/popover.js

@@ -75,6 +75,7 @@ var Popover = exports.Popover = /*#__PURE__*/(0, _react.forwardRef)(function Pop
     modeProp = _ref$mode === void 0 ? 'auto' : _ref$mode,
     onClose = _ref.onClose,
     onOpenChange = _ref.onOpenChange,
+    onEnterFinish = _ref.onEnterFinish,
     onExitFinish = _ref.onExitFinish,
     animate = _ref.animate,
     placement = _ref.placement,
@@ -98,6 +99,7 @@ var Popover = exports.Popover = /*#__PURE__*/(0, _react.forwardRef)(function Pop
       isOpen: isOpen,
       animate: animate,
       elementRef: ownRef,
+      onEnterFinish: onEnterFinish,
       onExitFinish: onExitFinish
     }),
     showChildren = _useAnimatedVisibilit.showChildren,