@atlaskit/top-layer 0.15.0 → 0.17.0

package/CHANGELOG.md

@@ -1,5 +1,50 @@
 # @atlaskit/top-layer
 
+## 0.17.0
+
+### Minor Changes
+
+- [`2fd74328732bf`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/2fd74328732bf) -
+  Add dialogMotion animation preset with token-based motion values and backdrop animation
+
+## 0.16.0
+
+### Minor Changes
+
+- [`6d0485dce81c4`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/6d0485dce81c4) -
+  `Popover` and `Dialog` now unmount their host element after the exit animation completes, instead
+  of leaving an empty `role` / `aria-*` element in the accessibility tree.
+
+  Other small changes that fall out of this:
+  - The popover/dialog `id` stays stable across opens.
+  - `ref.current` is only populated while the host element is rendered. Read the ref inside
+    `onOpenChange` / `onEnterFinish`, or gate the read on `isOpen`.
+  - `onEnterFinish` and `onExitFinish` now fire before the internal phase transition that drives the
+    unmount, so consumers reading the host element (or a forwarded ref) inside those callbacks
+    always see it attached to the DOM, regardless of React batching semantics.
+  - `getAriaForTrigger` returns `aria-controls: undefined` while `isOpen` is `false`; spreading the
+    result onto a JSX element strips the attribute from the DOM and avoids a dangling reference.
+  - `useAnchorPosition`, `useAnchorPositionAtPoint`, and `useWidthFromAnchor` now require `isOpen`
+    so positioning re-runs against the freshly mounted host element on each open.
+    `useWidthFromAnchor` also requires `anchorRef`.
+  - `DialogScrollLock` now requires an `isOpen` prop so the scroll lock is released the moment
+    `isOpen` flips to `false`, regardless of React's unmount timing.
+  - `useInitialFocus` now follows the WAI-ARIA APG Combobox Pattern: when a `menu` or `listbox`
+    popup is controlled by a focused combobox-like textbox whose `aria-controls` (or legacy
+    `aria-owns`) references the popup, initial focus stays on the textbox instead of moving into the
+    popup. Navigation is expected to be proxied via `aria-activedescendant`. Both variants are
+    detected:
+    - **In-popup combobox**: the focused textbox lives inside the popup.
+    - **External combobox**: the focused textbox is rendered OUTSIDE the popup (for example
+      `react-select`-style menus that portal the listbox). The carve-out also accepts the case where
+      the textbox's `aria-controls` references a DESCENDANT of the popup host (such as
+      react-select's inner `MenuList` element). Without this carve-out, moving focus into the
+      listbox would blur the external textbox and cause libraries like `react-select` to close the
+      menu on the same interaction that opened it.
+
+    Popups that are not opened from a combobox-like trigger continue to receive their
+    role-appropriate initial focus.
+
 ## 0.15.0
 
 ### Minor Changes

package/README.md

@@ -55,8 +55,8 @@ function MyPopup({ isOpen, onClose }: { isOpen: boolean; onClose: () => void })
 }
 ```
 
-- Focus restoration is automatic. The browser handles it for outermost popovers; `Popover`
-  snapshots `document.activeElement` on open and restores it on close for nested cases.
+- Focus restoration is automatic. The browser handles it for outermost popovers; `Popover` snapshots
+  `document.activeElement` on open and restores it on close for nested cases.
 - For default overlay styling (background, shadow, border-radius), wrap content in `PopoverSurface`
   from `@atlaskit/top-layer/popover-surface`.
 - For trigger-less or custom-positioned UI (flag, tooltip, react-select menu portal), use `Popover`
@@ -88,8 +88,8 @@ Compound component for modal dialogs using the native `<dialog>` element with `.
 ## Animations
 
 Both `Popover` and `Dialog` support CSS-based entry/exit animations via the `animate` prop.
-Animations use
-[`@starting-style`](https://developer.mozilla.org/en-US/docs/Web/CSS/@starting-style) for entry and
+Animations use [`@starting-style`](https://developer.mozilla.org/en-US/docs/Web/CSS/@starting-style)
+for entry and
 [`allow-discrete`](https://developer.mozilla.org/en-US/docs/Web/CSS/transition-behavior) on
 `display`/`overlay` for exit — no JavaScript animation coordination required.
 

package/dist/cjs/animations/presets.js

@@ -4,23 +4,80 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.dialogFade = dialogFade;
+exports.dialogMotion = dialogMotion;
 exports.dialogSlideUpAndFade = dialogSlideUpAndFade;
 exports.fade = fade;
+exports.popupMotion = popupMotion;
 exports.scaleAndFade = scaleAndFade;
 exports.slideAndFade = slideAndFade;
 var _resolvePlacement = require("../internal/resolve-placement");
-// slideAndFade
+// ══════════════════════════════════════════════════════════════════════════════
+// Popover presets
+// ══════════════════════════════════════════════════════════════════════════════
 
-function getSlideAndFadeProperties(_ref) {
-  var placement = _ref.placement,
-    distance = _ref.distance;
-  var pos = "".concat(distance, "px");
-  var neg = "-".concat(distance, "px");
+// ── popupMotion ──
+
+var POPUP_MOTION_CSS = "\n  [data-ds-popover-popup-motion] {\n    animation: var(--ds-popover-motion-exit);\n    animation-fill-mode: forwards;\n    transition:\n      overlay 150ms allow-discrete,\n      display 150ms allow-discrete;\n  }\n\n  [data-ds-popover-popup-motion]:popover-open {\n    animation: var(--ds-popover-motion-enter);\n    animation-fill-mode: backwards;\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    [data-ds-popover-popup-motion],\n    [data-ds-popover-popup-motion]:popover-open {\n      animation: none;\n      transition-duration: 0s;\n    }\n  }\n";
+function getPopupMotionProperties(_ref) {
+  var placement = _ref.placement;
   var _getPlacement = (0, _resolvePlacement.getPlacement)({
       placement: placement
     }),
     axis = _getPlacement.axis,
     edge = _getPlacement.edge;
+  if (axis === 'block' && edge === 'start') {
+    return {
+      '--ds-popover-motion-enter': "var(--ds-popup-enter-top, 150ms cubic-bezier(0.4, 1, 0.6, 1) SlideInTop8px, 150ms cubic-bezier(0.4, 1, 0.6, 1) FadeIn0to100)",
+      '--ds-popover-motion-exit': "var(--ds-popup-exit-top, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) SlideOutTop8px, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut100to0)"
+    };
+  }
+  if (axis === 'inline' && edge === 'start') {
+    return {
+      '--ds-popover-motion-enter': "var(--ds-popup-enter-left, 150ms cubic-bezier(0.4, 1, 0.6, 1) SlideInLeft8px, 150ms cubic-bezier(0.4, 1, 0.6, 1) FadeIn0to100)",
+      '--ds-popover-motion-exit': "var(--ds-popup-exit-left, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) SlideOutLeft8px, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut100to0)"
+    };
+  }
+  if (axis === 'inline' && edge === 'end') {
+    return {
+      '--ds-popover-motion-enter': "var(--ds-popup-enter-right, 150ms cubic-bezier(0.4, 1, 0.6, 1) SlideInRight8px, 150ms cubic-bezier(0.4, 1, 0.6, 1) FadeIn0to100)",
+      '--ds-popover-motion-exit': "var(--ds-popup-exit-right, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) SlideOutRight8px, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut100to0)"
+    };
+  }
+  // Default: block/end (popover below trigger)
+  return {
+    '--ds-popover-motion-enter': "var(--ds-popup-enter-bottom, 150ms cubic-bezier(0.4, 1, 0.6, 1) SlideInBottom8px, 150ms cubic-bezier(0.4, 1, 0.6, 1) FadeIn0to100)",
+    '--ds-popover-motion-exit': "var(--ds-popup-exit-bottom, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) SlideOutBottom8px, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut100to0)"
+  };
+}
+
+// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
+function popupMotion() {
+  return {
+    name: 'popup-motion',
+    css: POPUP_MOTION_CSS,
+    enterDurationMs: 150,
+    exitDurationMs: 100,
+    getProperties: function getProperties(_ref2) {
+      var placement = _ref2.placement;
+      return getPopupMotionProperties({
+        placement: placement
+      });
+    }
+  };
+}
+
+// ── slideAndFade ──
+
+function getSlideAndFadeProperties(_ref3) {
+  var placement = _ref3.placement,
+    distance = _ref3.distance;
+  var pos = "".concat(distance, "px");
+  var neg = "-".concat(distance, "px");
+  var _getPlacement2 = (0, _resolvePlacement.getPlacement)({
+      placement: placement
+    }),
+    axis = _getPlacement2.axis,
+    edge = _getPlacement2.edge;
   if (axis === 'block' && edge === 'start') {
     return {
       '--ds-popover-tx': '0',
@@ -73,14 +130,15 @@ var SLIDE_AND_FADE_CSS = "\n[data-ds-popover-slide-and-fade] {\n  opacity: 0;\n
  * <Popover animate={slideAndFade({ distance: 8 })} />
  * ```
  */
+// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
 function slideAndFade(options) {
   var _options$distance;
   var distance = (_options$distance = options === null || options === void 0 ? void 0 : options.distance) !== null && _options$distance !== void 0 ? _options$distance : 4;
   return {
     name: 'slide-and-fade',
     css: SLIDE_AND_FADE_CSS,
-    getProperties: function getProperties(_ref2) {
-      var placement = _ref2.placement;
+    getProperties: function getProperties(_ref4) {
+      var placement = _ref4.placement;
       return getSlideAndFadeProperties({
         placement: placement,
         distance: distance
@@ -147,7 +205,36 @@ function scaleAndFade() {
 // Dialog presets
 // ══════════════════════════════════════════════════════════════════════════════
 
-// dialogSlideUpAndFade
+// ── dialogMotion ──
+
+var DIALOG_MOTION_CSS = "\n  [data-ds-dialog-motion] {\n    animation: ".concat("var(--ds-modal-exit, 200ms cubic-bezier(0.6, 0, 0.8, 0.6) ScaleOut100to95)", ";\n    animation-fill-mode: forwards;\n    transition:\n      overlay 200ms allow-discrete,\n      display 200ms allow-discrete;\n  }\n\n  [data-ds-dialog-motion][open] {\n    animation: ", "var(--ds-modal-enter, 250ms cubic-bezier(0.4, 0, 0, 1) ScaleIn95to100)", ";\n    animation-fill-mode: backwards;\n  }\n\n  [data-ds-dialog-motion]::backdrop {\n    animation: ", "var(--ds-blanket-exit, 200ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut100to0)", ";\n    animation-fill-mode: forwards;\n    background-color: var(--ds-blanket, #050C1F75);\n    transition:\n      overlay 200ms allow-discrete,\n      display 200ms allow-discrete;\n  }\n\n  [data-ds-dialog-motion][open]::backdrop {\n    animation: ", "var(--ds-blanket-enter, 250ms cubic-bezier(0.4, 0, 0, 1) FadeIn0to100)", ";\n    animation-fill-mode: backwards;\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    [data-ds-dialog-motion],\n    [data-ds-dialog-motion][open],\n    [data-ds-dialog-motion]::backdrop,\n    [data-ds-dialog-motion][open]::backdrop {\n      animation: none;\n      transition-duration: 0s;\n    }\n  }\n");
+
+/**
+ * Dialog motion animation.
+ *
+ * Includes backdrop fade animation.
+ *
+ * @example
+ * ```tsx
+ * import { dialogMotion } from '@atlaskit/top-layer/animations';
+ *
+ * <Dialog animate={dialogMotion()} isOpen={isOpen} onClose={handleClose} label="...">
+ *   ...
+ * </Dialog>
+ * ```
+ */
+// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
+function dialogMotion() {
+  // Bare preset name; `Dialog` prefixes it via `data-ds-dialog-{name}`.
+  return {
+    name: 'motion',
+    css: DIALOG_MOTION_CSS,
+    enterDurationMs: 250,
+    exitDurationMs: 200
+  };
+}
+
+// ── dialogSlideUpAndFade ──
 
 var DIALOG_SLIDE_UP_AND_FADE_CSS = "\n[data-ds-dialog-slide-up-and-fade] {\n  opacity: 0;\n  transform: translateY(calc(-1 * var(--ds-dialog-ty, 12px)));\n  transition:\n    opacity 175ms cubic-bezier(0.15, 1, 0.3, 1),\n    transform 175ms cubic-bezier(0.15, 1, 0.3, 1),\n    overlay 175ms allow-discrete,\n    display 175ms allow-discrete;\n}\n\n[data-ds-dialog-slide-up-and-fade][open] {\n  opacity: 1;\n  transform: none;\n  transition-duration: 350ms;\n}\n\n@starting-style {\n  [data-ds-dialog-slide-up-and-fade][open] {\n    opacity: 0;\n    transform: translateY(var(--ds-dialog-ty, 12px));\n  }\n}\n\n[data-ds-dialog-slide-up-and-fade]::backdrop {\n  background-color: transparent;\n  transition:\n    background-color 175ms cubic-bezier(0.15, 1, 0.3, 1),\n    overlay 175ms allow-discrete,\n    display 175ms allow-discrete;\n}\n\n[data-ds-dialog-slide-up-and-fade][open]::backdrop {\n  background-color: var(--ds-blanket, #050C1F75);\n  transition-duration: 350ms;\n}\n\n@starting-style {\n  [data-ds-dialog-slide-up-and-fade][open]::backdrop {\n    background-color: transparent;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  [data-ds-dialog-slide-up-and-fade],\n  [data-ds-dialog-slide-up-and-fade][open],\n  [data-ds-dialog-slide-up-and-fade]::backdrop,\n  [data-ds-dialog-slide-up-and-fade][open]::backdrop {\n    transition-duration: 0s;\n  }\n}\n";
 

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

@@ -65,16 +65,30 @@ var Dialog = exports.Dialog = /*#__PURE__*/(0, _react.forwardRef)(function Dialo
       elementRef: ownRef,
       onExitFinish: onExitFinish
     }),
-    showChildren = _useAnimatedVisibilit.showChildren,
+    phase = _useAnimatedVisibilit.phase,
     preset = _useAnimatedVisibilit.preset;
 
+  // Pre-computed phase predicate. `isVisible` means "host element is
+  // mounted and on screen" (any phase except `closed`), used as a dep
+  // signal for the backdrop-click rebind effect so it re-attaches to
+  // the fresh <dialog> element after a close → reopen unmount/remount
+  // cycle.
+  var isVisible = phase !== 'closed';
+
   // Focus wrap
   // Native <dialog>.showModal() traps focus but wraps through <body> at
   // the boundary (A → B → C → body → A). This hook intercepts Tab to
   // wrap directly (A → B → C → A), matching the WAI-ARIA APG pattern.
+  //
+  // Takes `phase` directly: the listener stays attached while
+  // `phase !== 'closed'`, i.e. through the animated-exit window.
+  // Gating on `isOpen` would unbind the listener at the start of an
+  // exit animation while the dialog is still visible, letting focus
+  // escape (WCAG 2.4.3 Focus Order regression).
   (0, _useFocusWrap.useFocusWrap)({
     elementRef: ownRef,
-    role: 'dialog'
+    role: 'dialog',
+    phase: phase
   });
 
   // Open layer observer registration
@@ -120,6 +134,8 @@ var Dialog = exports.Dialog = /*#__PURE__*/(0, _react.forwardRef)(function Dialo
   // Attached via bind-event-listener rather than a React prop so we avoid
   // a11y lint suppressions on the <dialog> element.
   // Keyboard dismiss is already handled natively (Escape → onCancel above).
+  // `isVisible` is in deps so the listener re-binds to the new <dialog>
+  // element after a host unmount / remount cycle.
   (0, _react.useEffect)(function () {
     var dialog = ownRef.current;
     if (!dialog) {
@@ -135,13 +151,26 @@ var Dialog = exports.Dialog = /*#__PURE__*/(0, _react.forwardRef)(function Dialo
         }
       }
     });
-  }, [onClose]);
+  }, [onClose, isVisible]);
 
   // Atomic CSS (Compiled) deduplicates ::backdrop { background-color }
   // into a single class, making it impossible to toggle between two values
   // via cssMap entries. An ID-scoped <style> has higher specificity than
   // any atomic class, so the override always wins.
   var escapedId = CSS.escape(dialogId);
+
+  // The `<dialog>` host element is only rendered while open or its exit
+  // animation is playing. After exit completes the phase returns to
+  // `closed` and we unmount the dialog entirely so it does not leave an
+  // empty `role="dialog"` element in the accessibility tree. The element
+  // re-mounts on the next `isOpen=true` commit; `showModal()` is called
+  // from the existing `useLayoutEffect([isOpen])` on that same commit,
+  // and listeners (cancel, click) re-bind via the `[onClose, isVisible]`
+  // effect re-running after remount (React clears the ref on unmount, so
+  // we need the listener effect to re-run with the fresh element).
+  if (!isVisible) {
+    return null;
+  }
   return /*#__PURE__*/_react.default.createElement("dialog", (0, _extends2.default)({
     ref: combinedRef,
     id: dialogId
@@ -162,5 +191,5 @@ var Dialog = exports.Dialog = /*#__PURE__*/(0, _react.forwardRef)(function Dialo
   }), shouldHideBackdrop &&
   /*#__PURE__*/
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-global-styles
-  _react.default.createElement("style", null, "#".concat(escapedId, "::backdrop{background-color:transparent}")), showChildren ? children : null);
+  _react.default.createElement("style", null, "#".concat(escapedId, "::backdrop{background-color:transparent}")), children);
 });

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

@@ -9,14 +9,20 @@ var _browserApis = require("@atlaskit/browser-apis");
 /**
  * __DialogScrollLock__
  *
- * Prevents background page scrolling while mounted. Designed to be rendered
- * inside a `Dialog` so that the scroll lock is automatically removed when the
- * dialog closes (unmounts its children).
+ * Prevents background page scrolling while a dialog is open. Designed to be
+ * rendered inside a `Dialog` and given the same `isOpen` value.
  *
  * Native `<dialog>.showModal()` makes background content _inert_ (not
  * focusable/clickable), but does **not** prevent scroll events from reaching
  * the document body. This component fills that gap by setting
- * `overflow: hidden` on `document.body`.
+ * `overflow: hidden` on `document.body` while `isOpen` is `true`.
+ *
+ * The lock is driven by `isOpen` rather than by mount/unmount so that release
+ * happens synchronously in the same commit that flips `isOpen` to `false`.
+ * Relying on unmount alone was racy: `Dialog` defers the unmount of its
+ * children until the host element's close/toggle event fires, which can be
+ * after a consumer or test observes the dialog as hidden, leading to a
+ * stale `overflow: hidden` window.
  *
  * @example
  * ```tsx
@@ -24,14 +30,18 @@ var _browserApis = require("@atlaskit/browser-apis");
  * import { DialogScrollLock } from '@atlaskit/top-layer/dialog-scroll-lock';
  *
  * <Dialog isOpen={isOpen} onClose={onClose}>
- *   <DialogScrollLock />
+ *   <DialogScrollLock isOpen={isOpen} />
  *   {children}
  * </Dialog>
  * ```
  */
-function DialogScrollLock() {
+function DialogScrollLock(_ref) {
+  var isOpen = _ref.isOpen;
   (0, _react.useLayoutEffect)(function () {
     var _getDocument;
+    if (!isOpen) {
+      return;
+    }
     var body = (_getDocument = (0, _browserApis.getDocument)()) === null || _getDocument === void 0 ? void 0 : _getDocument.body;
     if (!body) {
       return;
@@ -41,6 +51,6 @@ function DialogScrollLock() {
     return function () {
       body.style.overflow = previousOverflow;
     };
-  }, []);
+  }, [isOpen]);
   return null;
 }

package/dist/cjs/entry-points/animations.js

@@ -9,6 +9,12 @@ Object.defineProperty(exports, "dialogFade", {
     return _presets.dialogFade;
   }
 });
+Object.defineProperty(exports, "dialogMotion", {
+  enumerable: true,
+  get: function get() {
+    return _presets.dialogMotion;
+  }
+});
 Object.defineProperty(exports, "dialogSlideUpAndFade", {
   enumerable: true,
   get: function get() {
@@ -21,6 +27,12 @@ Object.defineProperty(exports, "fade", {
     return _presets.fade;
   }
 });
+Object.defineProperty(exports, "popupMotion", {
+  enumerable: true,
+  get: function get() {
+    return _presets.popupMotion;
+  }
+});
 Object.defineProperty(exports, "scaleAndFade", {
   enumerable: true,
   get: function get() {

package/dist/cjs/entry-points/use-popover-id.js

@@ -16,6 +16,8 @@ var _useId = require("@atlaskit/ds-lib/use-id");
  * own `anchor-name` on the trigger element.
  */
 function usePopoverId() {
-  // prefixing for debug clarity in the DOM
+  // `@atlaskit/ds-lib/use-id` already strips characters that React's
+  // `useId` produces (`:`, `«`, `»`) which are invalid in HTML ID
+  // tokens. The `popover-` prefix is purely for DOM debug clarity.
   return "popover-".concat((0, _useId.useId)());
 }

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

@@ -78,11 +78,16 @@ function getAriaForTrigger(_ref) {
   var ariaHasPopup = (0, _roleToAriaHasPopup.roleToAriaHasPopup)({
     role: role
   });
+  // `aria-controls` is set to `undefined` while closed. The `Popover` /
+  // `Dialog` primitives unmount their host element after the exit
+  // animation finishes, so a closed-state `aria-controls` would point
+  // at a node that is not in the DOM. Returning `undefined` here means
+  // JSX spread renders no `aria-controls` attribute on the trigger
+  // until the target exists, avoiding the dangling reference while
+  // keeping the relationship live whenever it is meaningful.
   return {
     'aria-haspopup': ariaHasPopup,
     'aria-expanded': isOpen,
-    // Keep the trigger-to-popover relationship stable. `aria-expanded`
-    // tells assistive technology whether the controlled popover is visible.
-    'aria-controls': popoverId
+    'aria-controls': isOpen ? popoverId : undefined
   };
 }

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

@@ -75,7 +75,8 @@ function useAnchorPositionAtPoint(_ref) {
     placement = _ref.placement,
     getPoint = _ref.getPoint,
     _ref$isEnabled = _ref.isEnabled,
-    isEnabled = _ref$isEnabled === void 0 ? true : _ref$isEnabled;
+    isEnabled = _ref$isEnabled === void 0 ? true : _ref$isEnabled,
+    isOpen = _ref.isOpen;
   var syntheticAnchorRef = (0, _react.useRef)(null);
 
   // `getPoint` is kept in a ref so the layout effect can call the
@@ -122,6 +123,7 @@ function useAnchorPositionAtPoint(_ref) {
     anchorRef: syntheticAnchorRef,
     popoverRef: popoverRef,
     placement: placement,
-    isEnabled: isEnabled
+    isEnabled: isEnabled,
+    isOpen: isOpen
   });
 }

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

@@ -221,7 +221,8 @@ function useAnchorPosition(_ref3) {
     _ref3$forceFallbackPo = _ref3.forceFallbackPositioning,
     forceFallbackPositioning = _ref3$forceFallbackPo === void 0 ? false : _ref3$forceFallbackPo,
     _ref3$isEnabled = _ref3.isEnabled,
-    isEnabled = _ref3$isEnabled === void 0 ? true : _ref3$isEnabled;
+    isEnabled = _ref3$isEnabled === void 0 ? true : _ref3$isEnabled,
+    isOpen = _ref3.isOpen;
   var id = (0, _react.useId)();
   // Stabilize `placement` object so the same object literal
   // value returns an object with the same reference
@@ -481,5 +482,5 @@ function useAnchorPosition(_ref3) {
       popover.style.removeProperty('opacity');
     });
     return undoPositioning;
-  }, [anchorRef, popoverRef, stablePlacement, forceFallbackPositioning, isEnabled, id]);
+  }, [anchorRef, popoverRef, stablePlacement, forceFallbackPositioning, isEnabled, id, isOpen]);
 }