@atlaskit/top-layer 0.15.0 → 0.16.0

package/dist/es2019/internal/use-initial-focus.js

@@ -1,6 +1,5 @@
 import { useEffect, useRef } from 'react';
 import { getFirstFocusable } from '../focus/get-first-focusable';
-
 /**
  * Determines the correct element to receive initial focus within a popover,
  * based on its ARIA role.
@@ -17,7 +16,102 @@ import { getFirstFocusable } from '../focus/get-first-focusable';
  * has no effect on hidden popover content. Consumers must set the native
  * attribute via a ref callback (e.g. `node.setAttribute('autofocus', '')`).
  * React 19+ reflects the JSX prop as the HTML attribute automatically.
+ *
+ * Combobox pattern exception: if the popup is controlled by a focused
+ * combobox-like trigger (its `aria-controls` references this popup),
+ * focus stays on the textbox regardless of role. See
+ * `isComboboxControllingPopup`.
+ */
+
+/**
+ * WAI-ARIA APG Combobox Pattern: when a combobox controls a popup (listbox,
+ * grid, tree, or menu), DOM focus must remain on the textbox. Subsequent
+ * navigation through popup items uses `aria-activedescendant` (or proxied
+ * keyboard events), never DOM focus movement.
+ *
+ * Detects both variants in a single pass:
+ * - In-popup combobox: the textbox lives inside the popup `container`
+ *   (the popup is rendered as a child of the combobox wrapper).
+ * - External combobox: the textbox is rendered OUTSIDE the popup
+ *   (`react-select` pattern, where the listbox is portalled separately
+ *   from the textbox).
+ *
+ * Acceptance criteria for the active element:
+ * - Role / element-type filter: `role="combobox"`, `role="textbox"`,
+ *   `TEXTAREA`, `contentEditable`, or `INPUT` of text-like type
+ *   (`text`, `search`, `email`, `url`, `tel`, `password`, or
+ *   unspecified). Non-text input types (`button`, `checkbox`, etc.)
+ *   are rejected.
+ * - Reference filter: `aria-controls` (or legacy `aria-owns`) IDREFS
+ *   must resolve to an element that IS or CONTAINS the popup container.
+ *
+ * See: https://www.w3.org/WAI/ARIA/apg/patterns/combobox/
  */
+// `<input>` types treated as text-like for combobox detection.
+// Non-text input types (`button`, `checkbox`, `submit`, etc.) are rejected.
+// A missing `type` attribute defaults to `text` per the HTML spec, so we
+// normalize that case before lookup rather than including an empty string here.
+const TEXT_LIKE_INPUT_TYPES = new Set(['text', 'search', 'email', 'url', 'tel', 'password']);
+function isTextboxLikeElement(element) {
+  const role = element.getAttribute('role');
+  if (role === 'combobox' || role === 'textbox') {
+    return true;
+  }
+  // `tagName` is uppercase for HTML elements but can be mixed-case for
+  // XML/SVG. Normalize once so downstream comparisons stay lowercase.
+  const tag = element.tagName.toLowerCase();
+  if (tag === 'textarea') {
+    return true;
+  }
+  if (element.isContentEditable) {
+    return true;
+  }
+  if (tag === 'input') {
+    var _element$getAttribute;
+    const type = ((_element$getAttribute = element.getAttribute('type')) !== null && _element$getAttribute !== void 0 ? _element$getAttribute : 'text').toLowerCase();
+    return TEXT_LIKE_INPUT_TYPES.has(type);
+  }
+  return false;
+}
+function isComboboxControllingPopup({
+  container
+}) {
+  var _active$getAttribute;
+  const ownerDocument = container.ownerDocument;
+  const active = ownerDocument.activeElement;
+  if (!(active instanceof HTMLElement)) {
+    return false;
+  }
+  if (!isTextboxLikeElement(active)) {
+    return false;
+  }
+
+  // Accept legacy `aria-owns` in addition to `aria-controls`.
+  // `aria-controls` / `aria-owns` are IDREFS (space-separated list of IDs)
+  // per the WAI-ARIA spec, so we must split and check membership rather
+  // than comparing with strict equality. A combobox that controls both
+  // this popup and another element (e.g. a results status region) must
+  // still be recognised as controlling this popup.
+  const idRefs = (_active$getAttribute = active.getAttribute('aria-controls')) !== null && _active$getAttribute !== void 0 ? _active$getAttribute : active.getAttribute('aria-owns');
+  if (!idRefs) {
+    return false;
+  }
+
+  // Match if any referenced element IS, CONTAINS, or IS CONTAINED BY the
+  // popup container. The "contained by" case covers wrapper-style adopters
+  // like react-select, where the combobox input's `aria-controls` points at
+  // a listbox element that is a descendant of the Popover host (the
+  // listbox role lives on a child the wrapped library owns, not on the
+  // host we render).
+  const referencedIds = idRefs.split(/\s+/).filter(id => id !== '');
+  return referencedIds.some(id => {
+    const referenced = ownerDocument.getElementById(id);
+    if (!referenced) {
+      return false;
+    }
+    return referenced === container || referenced.contains(container) || container.contains(referenced);
+  });
+}
 function getInitialFocusTarget({
   container,
   role
@@ -34,6 +128,13 @@ function getInitialFocusTarget({
     });
   }
   if (role === 'menu') {
+    // ARIA Combobox Pattern: if the popup is owned by a focused combobox,
+    // leave focus on the textbox. Navigation is proxied via the combobox.
+    if (isComboboxControllingPopup({
+      container
+    })) {
+      return null;
+    }
     // Initial focus placement is the extent of what top-layer provides
     // for menus. All subsequent keyboard navigation (arrow keys, Home/End,
     // type-ahead, Enter/Space, submenu coordination) is the responsibility
@@ -45,11 +146,31 @@ function getInitialFocusTarget({
     });
   }
   if (role === 'listbox') {
-    // Prefer selected option, fall back to first focusable
+    // ARIA Combobox Pattern: if the popup is owned by a focused
+    // combobox-like textbox (in-popup or external e.g. react-select),
+    // leave focus on the textbox. Navigation is proxied via the combobox.
+    if (isComboboxControllingPopup({
+      container
+    })) {
+      return null;
+    }
+    // Prefer the selected option, then fall back to the first option.
+    // We intentionally match by `[role="option"]` rather than by
+    // `getFirstFocusable`. The standard WAI-ARIA APG listbox pattern
+    // renders options with `tabindex="-1"` (managed via roving
+    // tabindex); `getFirstFocusable` excludes `tabindex="-1"` elements
+    // and would silently lose initial focus for spec-conformant
+    // listboxes. Options remain programmatically focusable.
     const selectedOption = container.querySelector('[role="option"][aria-selected="true"]');
     if (selectedOption) {
       return selectedOption;
     }
+    const firstOption = container.querySelector('[role="option"]');
+    if (firstOption) {
+      return firstOption;
+    }
+    // Last resort for non-standard listboxes that render no options
+    // but do contain a focusable element (e.g. an empty-state action).
     return getFirstFocusable({
       container
     });
@@ -72,59 +193,82 @@ function getInitialFocusTarget({
  * Role is taken from the typed `role` prop - this is the consumer's contract
  * and is not subject to drift from a directly-mutated DOM attribute.
  *
- * Always call this hook unconditionally. Focus is only moved when `isOpen`
- * transitions to `true` and the role requires it.
+ * Always call this hook unconditionally. Focus is moved on each transition
+ * into a visible phase, the moment the host element first becomes visible
+ * for that open intent:
+ *
+ * - Animated path: on `closed → entering`. The host has just been mounted
+ *   and the layout effect that calls `showPopover()` / `showModal()` has
+ *   already run, so the element is in the top layer. We focus before the
+ *   entry transition settles to match the WAI-ARIA APG expectation that
+ *   focus lands on the new menu / dialog the instant it opens, not after
+ *   the CSS finishes animating.
+ * - Non-animated path: on `closed → open` (the entering phase is skipped).
+ * - Reopen mid-exit: on `exiting → entering`. When a user dismisses the
+ *   popup (Escape, close button, light dismiss) the browser natively
+ *   restores focus to the trigger as part of `hidePopover()` /
+ *   `<dialog>.close()`. If the consumer reopens before the exit transition
+ *   has settled, the phase machine jumps `exiting → entering` without
+ *   passing through `closed`, so without this branch the popup would be
+ *   visible again with focus stranded on the trigger — a keyboard usability
+ *   gap for menu/dialog/listbox roles.
+ *
+ * Note: there is a rare programmatic path where a consumer flips `isOpen`
+ * false → true without any user-initiated close gesture and had moved focus
+ * to a non-default target inside the popup. In that scenario this hook
+ * re-focuses the role-appropriate default (e.g. first menu item) rather
+ * than preserving the consumer-chosen target. This matches the documented
+ * `closed → entering` behavior and is considered acceptable given how
+ * abstract the scenario is. See `notes/architecture/focus.md`.
+ *
+ * Pure `entering → exiting → entering` stutters where the popup never
+ * reaches `closed` and the consumer toggles in the same frame are still
+ * collapsed: the `prevPhase` ref guard rejects any transition whose
+ * previous phase was not `closed` or `exiting`.
+ *
+ * Tradeoff vs the previous `requestAnimationFrame` based approach: we no
+ * longer wait one paint before focusing. The element is already attached
+ * and in the top layer when this effect runs (the show / hide layout
+ * effect runs first), so screen-reader announcement and visible focus
+ * land together. If a regression appears that needs the extra paint
+ * (e.g. browsers that require a layout pass before `focus()` works on a
+ * freshly promoted top-layer element), wrap the `focus()` call in a
+ * single `requestAnimationFrame` here and re-add a same-element ref
+ * check inside the RAF callback.
  */
 export function useInitialFocus({
   elementRef,
-  isOpen,
+  phase,
   role
 }) {
-  // Track the most recently scheduled RAF so a rapid `isOpen → false → true`
-  // transition can cancel the previous frame before its closure runs against
-  // a stale popover element. Without this, the RAF queued during the first
-  // open could fire after the second open had begun and focus the wrong
-  // instance.
-  const pendingRafRef = useRef(null);
+  // Track the previous phase so we only focus on transitions into a
+  // visible phase from either `'closed'` (fresh mount) or `'exiting'`
+  // (mid-exit reopen where the browser has already restored focus to
+  // the trigger). Pure `entering → exiting → entering` stutters where
+  // the consumer toggles in the same frame are still collapsed.
+  const prevPhaseRef = useRef('closed');
   useEffect(() => {
-    if (!isOpen) {
+    var _getInitialFocusTarge;
+    const prevPhase = prevPhaseRef.current;
+    prevPhaseRef.current = phase;
+
+    // Skip the `phase === 'closed'` transitions (host is going away,
+    // nothing to focus) and any transition whose previous phase was
+    // neither `'closed'` (fresh open) nor `'exiting'` (mid-exit
+    // reopen, focus already on the trigger).
+    if (phase === 'closed') {
+      return;
+    }
+    if (prevPhase !== 'closed' && prevPhase !== 'exiting') {
       return;
     }
     const el = elementRef.current;
     if (!el) {
       return;
     }
-
-    // Cancel any RAF queued by the previous open cycle.
-    if (pendingRafRef.current !== null) {
-      cancelAnimationFrame(pendingRafRef.current);
-    }
-
-    // Use requestAnimationFrame to ensure the popover is fully rendered
-    // and visible in the top layer before attempting to move focus.
-    // showPopover() is called in useLayoutEffect (which runs before this
-    // useEffect), so by the time the RAF fires after the next paint the
-    // element is guaranteed to be in the top layer.
-    const rafId = requestAnimationFrame(() => {
-      var _getInitialFocusTarge;
-      pendingRafRef.current = null;
-      // Verify the element we captured is still the live popover. In
-      // rapid-toggle scenarios the ref may already point to a different
-      // instance - skip rather than focus the wrong popover.
-      if (elementRef.current !== el) {
-        return;
-      }
-      (_getInitialFocusTarge = getInitialFocusTarget({
-        container: el,
-        role
-      })) === null || _getInitialFocusTarge === void 0 ? void 0 : _getInitialFocusTarge.focus();
-    });
-    pendingRafRef.current = rafId;
-    return () => {
-      cancelAnimationFrame(rafId);
-      if (pendingRafRef.current === rafId) {
-        pendingRafRef.current = null;
-      }
-    };
-  }, [elementRef, isOpen, role]);
+    (_getInitialFocusTarge = getInitialFocusTarget({
+      container: el,
+      role
+    })) === null || _getInitialFocusTarge === void 0 ? void 0 : _getInitialFocusTarge.focus();
+  }, [elementRef, phase, role]);
 }

package/dist/es2019/internal/use-width-from-anchor.js

@@ -17,7 +17,8 @@ import { setStyle } from './set-style';
 export function useWidthFromAnchor({
   mode,
   popoverRef,
-  anchorRef
+  anchorRef,
+  isOpen
 }) {
   useLayoutEffect(() => {
     const node = popoverRef.current;
@@ -44,7 +45,7 @@ export function useWidthFromAnchor({
       }
 
       // JS fallback: one-off read of the anchor's width.
-      const anchor = anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.current;
+      const anchor = anchorRef.current;
       if (anchor) {
         return setStyle({
           el: node,
@@ -76,7 +77,7 @@ export function useWidthFromAnchor({
           }]
         });
       }
-      const anchor = anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.current;
+      const anchor = anchorRef.current;
       if (anchor) {
         return setStyle({
           el: node,
@@ -99,5 +100,5 @@ export function useWidthFromAnchor({
       el: node,
       styles: [minInlineSizeStyle]
     });
-  }, [mode, popoverRef, anchorRef]);
+  }, [mode, popoverRef, anchorRef, isOpen]);
 }

package/dist/es2019/popover/popover.js

@@ -2,7 +2,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import "./popover.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
-import React, { forwardRef, useCallback, useEffect, useId, useLayoutEffect, useRef } from 'react';
+import React, { forwardRef, useCallback, useId, useLayoutEffect, useRef } from 'react';
 import { bind } from 'bind-event-listener';
 import mergeRefs from '@atlaskit/ds-lib/merge-refs';
 import once from '@atlaskit/ds-lib/once';
@@ -70,7 +70,7 @@ export const Popover = /*#__PURE__*/forwardRef(function Popover({
   // dropped (React 19.2 uses underscores).
   const popoverId = idProp !== null && idProp !== void 0 ? idProp : `popover-${autoId.replace(/:/g, '')}`;
   const {
-    showChildren,
+    phase,
     preset
   } = useAnimatedVisibility({
     isOpen,
@@ -80,17 +80,29 @@ export const Popover = /*#__PURE__*/forwardRef(function Popover({
     onExitFinish
   });
 
-  // Focus management: initial focus on open (role-dependent), Tab cycling
+  // Pre-computed phase predicate. `isVisible` mirrors "host element is
+  // mounted and on screen" (any phase except `closed`); used as a dep
+  // signal for listener-re-bind effects so they re-attach to the fresh
+  // host element after a close → reopen unmount/remount cycle.
+  const isVisible = phase !== 'closed';
+
+  // Focus management: initial focus on entry (role-dependent), Tab cycling
   // for dialog roles. Restoration is native for outermost popovers; nested
   // focus-capturing roles are handled below via `beforetoggle` snapshot.
   // See: notes/architecture/focus-restoration.md
+  //
+  // Both hooks take `phase` directly: `useFocusWrap` keeps its listener
+  // attached while `phase !== 'closed'` (so focus stays trapped through
+  // the animated-exit window — WCAG 2.4.3 regression guard);
+  // `useInitialFocus` moves focus on the transition into `'open'`.
   useFocusWrap({
     elementRef: ownRef,
-    role
+    role,
+    phase
   });
   useInitialFocus({
     elementRef: ownRef,
-    isOpen,
+    phase,
     role
   });
 
@@ -187,7 +199,23 @@ export const Popover = /*#__PURE__*/forwardRef(function Popover({
       });
     }
   }, [onClose, onOpenChange, role]);
-  useEffect(() => {
+
+  // Bind toggle/beforetoggle/keydown listeners via `useLayoutEffect` so
+  // they are attached BEFORE the show/hide layout effect calls
+  // `el.showPopover()`. `showPopover()` dispatches `beforetoggle`
+  // synchronously; binding the listener in a regular `useEffect`
+  // (which runs after layout effects) misses that first dispatch and
+  // the `previouslyFocusedElementRef` snapshot never gets taken — which
+  // breaks nested-popover focus restoration on close.
+  //
+  // `isVisible` is in deps so the listeners re-bind to the new host
+  // element after a host unmount/remount cycle. The cleanup detaches
+  // the old listeners.
+  //
+  // This layout effect MUST appear in the file before the show/hide
+  // layout effect — React runs layout effects in source order on the
+  // same commit, and we need listeners attached first.
+  useLayoutEffect(() => {
     const element = ownRef.current;
     if (!element) {
       return;
@@ -219,10 +247,13 @@ export const Popover = /*#__PURE__*/forwardRef(function Popover({
       unbindToggle();
       unbindBeforeToggle();
     };
-  }, [handleToggle, handleBeforeToggle]);
+  }, [handleToggle, handleBeforeToggle, isVisible]);
 
   // Placement-dependent animation CSS vars. Kept separate from show/hide
-  // so preset reference changes do not re-trigger visibility.
+  // so preset reference changes do not re-trigger visibility. `isVisible`
+  // is in deps so the CSS vars are re-applied to the new host element after
+  // a remount cycle (otherwise the freshly mounted element would have no
+  // transform / placement vars set).
   useLayoutEffect(() => {
     const el = ownRef.current;
     if (!el || !(preset !== null && preset !== void 0 && preset.getProperties) || !placement) {
@@ -234,7 +265,7 @@ export const Popover = /*#__PURE__*/forwardRef(function Popover({
     Object.entries(props).forEach(([key, value]) => {
       el.style.setProperty(key, String(value));
     });
-  }, [preset, placement]);
+  }, [preset, placement, isVisible]);
 
   // Show/hide based on isOpen. `showPopover`/`hidePopover` are no-ops when
   // already in the target state. Try/catch guards `InvalidStateError` on
@@ -246,6 +277,13 @@ export const Popover = /*#__PURE__*/forwardRef(function Popover({
     }
     if (isOpen) {
       programmaticCloseRef.current = false;
+      // Reset the close-reason snapshot at the start of every open
+      // cycle. The ref outlives the host element (lives on the
+      // component, not the DOM), so a stale 'escape' from a prior
+      // cycle would otherwise leak into the next close — especially
+      // in the no-animation path where the host unmounts before
+      // `handleToggle` has a chance to reset the ref itself.
+      closeReasonRef.current = 'light-dismiss';
       try {
         el.showPopover();
       } catch {}
@@ -261,6 +299,17 @@ export const Popover = /*#__PURE__*/forwardRef(function Popover({
       el.hidePopover();
     } catch {}
   }, [isOpen]);
+
+  // The host element is only rendered while the popover is open or its exit
+  // animation is playing. Once the phase returns to `closed`, we unmount
+  // the host entirely so it does not leave an empty `role="..."` /
+  // `popover` element in the accessibility tree. The element re-mounts on
+  // the next `isOpen=true` commit; refs and event listeners re-bind via
+  // the existing layout effect and `useEffect`. The popover `id` is stable
+  // across opens (derived from `useId()` or the consumer-supplied `idProp`).
+  if (!isVisible) {
+    return null;
+  }
   return /*#__PURE__*/React.createElement("div", _extends({
     ref: combinedRef,
     id: popoverId
@@ -277,5 +326,5 @@ export const Popover = /*#__PURE__*/forwardRef(function Popover({
   } : undefined, {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- xcss prop passes compiled atomic class names
     className: ax([styles.root, xcssFromProps])
-  }), showChildren ? children : null);
+  }), children);
 });

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

@@ -56,16 +56,30 @@ export var Dialog = /*#__PURE__*/forwardRef(function Dialog(_ref, ref) {
       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).
   useFocusWrap({
     elementRef: ownRef,
-    role: 'dialog'
+    role: 'dialog',
+    phase: phase
   });
 
   // Open layer observer registration
@@ -111,6 +125,8 @@ export var Dialog = /*#__PURE__*/forwardRef(function Dialog(_ref, ref) {
   // 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.
   useEffect(function () {
     var dialog = ownRef.current;
     if (!dialog) {
@@ -126,13 +142,26 @@ export var Dialog = /*#__PURE__*/forwardRef(function Dialog(_ref, ref) {
         }
       }
     });
-  }, [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.createElement("dialog", _extends({
     ref: combinedRef,
     id: dialogId
@@ -153,5 +182,5 @@ export var Dialog = /*#__PURE__*/forwardRef(function Dialog(_ref, ref) {
   }), shouldHideBackdrop &&
   /*#__PURE__*/
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-global-styles
-  React.createElement("style", null, "#".concat(escapedId, "::backdrop{background-color:transparent}")), showChildren ? children : null);
+  React.createElement("style", null, "#".concat(escapedId, "::backdrop{background-color:transparent}")), children);
 });

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

@@ -1,17 +1,22 @@
 import { useLayoutEffect } from 'react';
 import { getDocument } from '@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
@@ -19,14 +24,18 @@ import { getDocument } from '@atlaskit/browser-apis';
  * import { DialogScrollLock } from '@atlaskit/top-layer/dialog-scroll-lock';
  *
  * <Dialog isOpen={isOpen} onClose={onClose}>
- *   <DialogScrollLock />
+ *   <DialogScrollLock isOpen={isOpen} />
  *   {children}
  * </Dialog>
  * ```
  */
-export function DialogScrollLock() {
+export function DialogScrollLock(_ref) {
+  var isOpen = _ref.isOpen;
   useLayoutEffect(function () {
     var _getDocument;
+    if (!isOpen) {
+      return;
+    }
     var body = (_getDocument = getDocument()) === null || _getDocument === void 0 ? void 0 : _getDocument.body;
     if (!body) {
       return;
@@ -36,6 +45,6 @@ export function DialogScrollLock() {
     return function () {
       body.style.overflow = previousOverflow;
     };
-  }, []);
+  }, [isOpen]);
   return null;
 }

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

@@ -10,6 +10,8 @@ import { useId } from '@atlaskit/ds-lib/use-id';
  * own `anchor-name` on the trigger element.
  */
 export 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(useId());
 }

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

@@ -73,11 +73,16 @@ export function getAriaForTrigger(_ref) {
   var ariaHasPopup = 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/esm/internal/use-anchor-position-at-point.js

@@ -70,7 +70,8 @@ export 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 = useRef(null);
 
   // `getPoint` is kept in a ref so the layout effect can call the
@@ -117,6 +118,7 @@ export function useAnchorPositionAtPoint(_ref) {
     anchorRef: syntheticAnchorRef,
     popoverRef: popoverRef,
     placement: placement,
-    isEnabled: isEnabled
+    isEnabled: isEnabled,
+    isOpen: isOpen
   });
 }

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

@@ -214,7 +214,8 @@ export 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 = useId();
   // Stabilize `placement` object so the same object literal
   // value returns an object with the same reference
@@ -474,5 +475,5 @@ export function useAnchorPosition(_ref3) {
       popover.style.removeProperty('opacity');
     });
     return undoPositioning;
-  }, [anchorRef, popoverRef, stablePlacement, forceFallbackPositioning, isEnabled, id]);
+  }, [anchorRef, popoverRef, stablePlacement, forceFallbackPositioning, isEnabled, id, isOpen]);
 }