@atlaskit/top-layer 0.15.0 → 0.17.0

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

@@ -1 +1 @@
-export { slideAndFade, fade, scaleAndFade, dialogSlideUpAndFade, dialogFade } from '../animations/presets';
+export { dialogMotion, popupMotion, slideAndFade, fade, scaleAndFade, dialogSlideUpAndFade, dialogFade } from '../animations/presets';

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]);
 }