@atlaskit/top-layer 0.7.1 → 0.9.0

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @atlaskit/top-layer
 
+## 0.9.0
+
+### Minor Changes
+
+- [`8e9ab10567283`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/8e9ab10567283) -
+  When `platform-dst-top-layer` is enabled, the open layer observer registration now happens inside
+  the `Dialog` and `Popover` primitives directly, so `popup`, `modal-dialog`, and `tooltip` no
+  longer register with the open layer observer separately (avoiding double-counting).
+  - `Dialog` registers as `type: 'modal'`, with a no-op `onClose`, as there is no current use case
+    for programmatic close of modals via the open layer observer.
+  - `Popover` registers as `type: 'popup'` for interactive overlay roles (`dialog`, `alertdialog`,
+    `menu`, `listbox`, `tree`, `grid`) and omits `type` for other roles (e.g. `tooltip`).
+  - A new `programmatic` value has been added to `TPopoverCloseReason` to distinguish programmatic
+    closes, such as those from the open layer observer's `closeLayers()` calls.
+
+## 0.8.0
+
+### Minor Changes
+
+- [`cce485619197c`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/cce485619197c) -
+  Remove arrow() implementation, as there are currently no consumers of it.
+
 ## 0.7.1
 
 ### Patch Changes

package/dist/cjs/animations/presets.js

@@ -104,6 +104,7 @@ var FADE_CSS = "\n[data-ds-popover-fade] {\n  opacity: 0;\n  transition:\n    op
  * <Popup.Content animate={fade()} />
  * ```
  */
+// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
 function fade() {
   return {
     name: 'fade',
@@ -128,6 +129,7 @@ var SCALE_AND_FADE_CSS = "\n[data-ds-popover-scale-and-fade] {\n  opacity: 0;\n
  * <Popup.Content animate={scaleAndFade()} />
  * ```
  */
+// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
 function scaleAndFade() {
   return {
     name: 'scale-and-fade',
@@ -162,6 +164,7 @@ var DIALOG_SLIDE_UP_AND_FADE_CSS = "\n[data-ds-dialog-slide-up-and-fade] {\n  op
  * </Dialog>
  * ```
  */
+// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
 function dialogSlideUpAndFade(options) {
   var _options$distance2;
   var distance = (_options$distance2 = options === null || options === void 0 ? void 0 : options.distance) !== null && _options$distance2 !== void 0 ? _options$distance2 : 12;
@@ -190,6 +193,7 @@ var DIALOG_FADE_CSS = "\n[data-ds-dialog-fade] {\n  opacity: 0;\n  transition:\n
  * </Dialog>
  * ```
  */
+// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
 function dialogFade() {
   return {
     name: 'dialog-fade',

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

@@ -14,6 +14,8 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _react = _interopRequireWildcard(require("react"));
 var _bindEventListener = require("bind-event-listener");
 var _mergeRefs = _interopRequireDefault(require("@atlaskit/ds-lib/merge-refs"));
+var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
+var _openLayerObserver = require("@atlaskit/layering/experimental/open-layer-observer");
 var _useAnimatedVisibility = require("../internal/use-animated-visibility");
 var _useFocusWrap = require("../internal/use-focus-wrap");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
@@ -71,6 +73,16 @@ var Dialog = exports.Dialog = /*#__PURE__*/(0, _react.forwardRef)(function Dialo
     role: 'dialog'
   });
 
+  // ── Open layer observer registration ──
+  // Notifies the open layer observer so app-coordination features
+  // (open-count subscriptions) work with top-layer dialogs.
+  (0, _openLayerObserver.useNotifyOpenLayerObserver)({
+    type: 'modal',
+    isOpen: isOpen,
+    // No-op: no current use case for programmatic close via OpenLayerObserver.
+    onClose: _noop.default
+  });
+
   // Show/hide the dialog in response to isOpen changes.
   (0, _react.useLayoutEffect)(function () {
     var dialog = ownRef.current;

package/dist/cjs/focus/focus.js

@@ -69,6 +69,7 @@ function getFirstFocusable(_ref2) {
 /**
  * Returns the last focusable element within the container.
  */
+// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
 function getLastFocusable(_ref3) {
   var container = _ref3.container,
     filter = _ref3.filter;
@@ -86,6 +87,7 @@ function getLastFocusable(_ref3) {
  * Returns `null` if there is no focused element within the container or if
  * the focused element is not in the list of focusable elements.
  */
+// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
 function getNextFocusable(_ref4) {
   var _all$nextIndex;
   var container = _ref4.container,

package/dist/cjs/internal/ensure-preset-styles.js

@@ -12,7 +12,7 @@ exports.ensurePresetStyles = ensurePresetStyles;
  *
  * Note: injected `<style>` elements and the tracking Set are append-only —
  * they are never removed. This is intentional: the number of distinct
- * presets is bounded (handful of animation + arrow presets), so the
+ * presets is bounded (handful of animation presets), so the
  * memory footprint is negligible. Removing styles would risk breaking
  * other instances of the same preset that are still mounted.
  *

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

@@ -108,6 +108,7 @@ function placementToPositionArea(_ref) {
  * `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)({
@@ -271,14 +272,14 @@ function isResolvedPlacementEqual(a, b) {
  * comparison is used internally so re-runs are skipped when the resolved
  * 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,
-    arrow = _ref5.arrow;
+    forceFallbackPositioning = _ref5$forceFallbackPo === void 0 ? false : _ref5$forceFallbackPo;
   var id = (0, _react.useId)();
   // Stabilize `placement` object so the same object literal
   // value returns an object with the same reference
@@ -315,9 +316,7 @@ function useAnchorPosition(_ref5) {
         })
       }, {
         property: 'position-try-fallbacks',
-        value: arrow ? arrow.getTryFallbacks({
-          placement: stablePlacement
-        }) : placementToTryFallbacks({
+        value: placementToTryFallbacks({
           placement: stablePlacement
         })
       },
@@ -380,19 +379,6 @@ function useAnchorPosition(_ref5) {
           value: crossAxisShiftActive.value
         });
       }
-      if (arrow) {
-        // Set the arrow size variable used by the injected arrow CSS
-        // and the @position-try rules for margin values.
-        popoverStyles.push({
-          property: '--ds-arrow-size',
-          value: gapCssValue
-        });
-        // Mark the popover root as the arrow host. The ARROW_CSS targets
-        // [data-ds-popover-arrow] to apply clip-path: inset(0) margin-box
-        // and box-shadow: none. Must be on the popover root (not a child)
-        // because that's where useAnchorPosition sets the margin gap.
-        popover.setAttribute('data-ds-popover-arrow', '');
-      }
 
       /**
        * **We are never cleaning up anchor names**
@@ -415,9 +401,7 @@ function useAnchorPosition(_ref5) {
       var _undoPositioning = (0, _combine.combine)((0, _setStyle.setStyle)({
         el: popover,
         styles: popoverStyles
-      }), arrow ? function () {
-        return popover.removeAttribute('data-ds-popover-arrow');
-      } : function () {});
+      }));
       return _undoPositioning;
     }
 
@@ -566,5 +550,5 @@ function useAnchorPosition(_ref5) {
       popover.style.removeProperty('opacity');
     });
     return undoPositioning;
-  }, [anchorRef, popoverRef, stablePlacement, forceFallbackPositioning, arrow, id]);
+  }, [anchorRef, popoverRef, stablePlacement, forceFallbackPositioning, id]);
 }

package/dist/cjs/internal/use-preset-styles.js

@@ -11,7 +11,7 @@ var _ensurePresetStyles = require("./ensure-preset-styles");
  * is injected once into `document.head`.
  *
  * Works with any preset that has `{ css, name }` — animation presets
- * (TAnimationPreset) and arrow presets (TArrowPreset) both satisfy this shape.
+ * (TAnimationPreset) satisfies this shape.
  */
 function usePresetStyles(_ref) {
   var preset = _ref.preset;

package/dist/cjs/placement-map/index.js

@@ -172,4 +172,5 @@ function fromLegacyPlacement(_ref) {
 
 /**
  * The full mapping record, exposed for consumers that need to iterate or introspect.
- */
+ */
+// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports

package/dist/cjs/popover/popover.js

@@ -17,6 +17,7 @@ var _bindEventListener = require("bind-event-listener");
 var _mergeRefs = _interopRequireDefault(require("@atlaskit/ds-lib/merge-refs"));
 var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
 var _once = _interopRequireDefault(require("@atlaskit/ds-lib/once"));
+var _openLayerObserver = require("@atlaskit/layering/experimental/open-layer-observer");
 var _useAnimatedVisibility = require("../internal/use-animated-visibility");
 var _useFocusWrap = require("../internal/use-focus-wrap");
 var _useInitialFocus = require("../internal/use-initial-focus");
@@ -40,6 +41,18 @@ var supportsPopoverHint = (0, _once.default)(function () {
 var styles = {
   root: "_19itglyw _ca0qidpf _u5f3idpf _n3tdidpf _19bvidpf _19pkidpf _2hwxidpf _otyridpf _18u0idpf _1r041wug _1reoewfl _18m9ewfl _bfhk1j28"
 };
+/**
+ * ARIA roles on the Popover primitive that register with the open layer observer
+ * as LayerType 'popup'. These are interactive overlays that should be tracked
+ * and dismissed when closeLayers() is called (e.g. when the side nav resizes).
+ *
+ * Note on open layer observer types not included here:
+ * - 'modal' only ever comes from the Dialog primitive, not Popover.
+ * - Other layer types (e.g. 'tooltip') do not yet exist in LayerType because
+ *   there is no current use case for distinguishing them in the observer.
+ */
+var POPUP_ROLES = new Set(['menu', 'listbox', 'dialog', 'alertdialog', 'tree', 'grid']);
+
 /**
  * Unopinionated top-layer primitive.
  *
@@ -108,6 +121,24 @@ var Popover = exports.Popover = /*#__PURE__*/(0, _react.forwardRef)(function Pop
     role: role
   });
 
+  // ── Open layer observer registration ──
+  // Notifies the open layer observer so app-coordination features
+  // (closeLayers(), open-count subscriptions) work with top-layer popovers.
+  //
+  // Only set type: 'popup' for roles that are interactive overlay popups.
+  // Passive/informational roles (tooltip, note, status, alert, log) and
+  // no-role cases do not map to LayerType 'popup', so type is left undefined.
+  var handleObserverClose = (0, _react.useCallback)(function () {
+    onClose({
+      reason: 'programmatic'
+    });
+  }, [onClose]);
+  (0, _openLayerObserver.useNotifyOpenLayerObserver)({
+    type: role && POPUP_ROLES.has(role) ? 'popup' : undefined,
+    isOpen: isOpen,
+    onClose: handleObserverClose
+  });
+
   // Hint mode fallback: "hint" downgrades to "auto" if unsupported.
   //
   // Decision (2026-03-17 audit): We keep "auto" as the fallback (not "manual")

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

@@ -13,7 +13,6 @@ var _react = _interopRequireWildcard(require("react"));
 var _mergeRefs = _interopRequireDefault(require("@atlaskit/ds-lib/merge-refs"));
 var _roleTypes = require("../internal/role-types");
 var _useAnchorPosition = require("../internal/use-anchor-position");
-var _usePresetStyles = require("../internal/use-preset-styles");
 var _useWidthFromAnchor = require("../internal/use-width-from-anchor");
 var _popover = require("../popover/popover");
 var _popupContext = require("./popup-context");
@@ -32,7 +31,6 @@ var PopupContent = exports.PopupContent = /*#__PURE__*/(0, _react.forwardRef)(fu
     label = _ref.label,
     labelledBy = _ref.labelledBy,
     animate = _ref.animate,
-    arrow = _ref.arrow,
     mode = _ref.mode,
     _ref$widthFromAnchor = _ref.widthFromAnchor,
     widthFromAnchor = _ref$widthFromAnchor === void 0 ? 'none' : _ref$widthFromAnchor,
@@ -129,17 +127,13 @@ var PopupContent = exports.PopupContent = /*#__PURE__*/(0, _react.forwardRef)(fu
   // reach the same DOM element for togglePopover). Otherwise use a local ref.
   var localRef = (0, _react.useRef)(null);
   var popoverRef = (_ctx$popoverRef = ctx === null || ctx === void 0 ? void 0 : ctx.popoverRef) !== null && _ctx$popoverRef !== void 0 ? _ctx$popoverRef : localRef;
-  var arrowPreset = (0, _usePresetStyles.usePresetStyles)({
-    preset: arrow
-  });
   (0, _useAnchorPosition.useAnchorPosition)({
     anchorRef: triggerRef !== null && triggerRef !== void 0 ? triggerRef : {
       current: null
     },
     popoverRef: popoverRef,
     placement: placement,
-    forceFallbackPositioning: forceFallbackPositioning,
-    arrow: arrowPreset !== null && arrowPreset !== void 0 ? arrowPreset : undefined
+    forceFallbackPositioning: forceFallbackPositioning
   });
   (0, _useWidthFromAnchor.useWidthFromAnchor)({
     mode: widthFromAnchor,

package/dist/cjs/popup/popup-context.js

@@ -23,6 +23,7 @@ var PopupProvider = exports.PopupProvider = PopupContext.Provider;
  *
  * Throws if called outside of a `<Popup>` compound component.
  */
+// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
 function usePopupContext() {
   var ctx = (0, _react.useContext)(PopupContext);
   if (ctx === null) {
@@ -37,6 +38,7 @@ function usePopupContext() {
  * Used by `PopupContent` to support standalone usage (e.g. tooltip)
  * where values are passed as props instead of coming from a compound component.
  */
+// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
 function useMaybePopupContext() {
   return (0, _react.useContext)(PopupContext);
 }

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

@@ -126,6 +126,7 @@ function isAtCurrentMenuLevel(element, container) {
  * });
  * ```
  */
+// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
 function useArrowNavigation(_ref) {
   var containerRef = _ref.containerRef,
     onClose = _ref.onClose,

package/dist/es2019/animations/presets.js

@@ -152,6 +152,7 @@ const FADE_CSS = `
  * <Popup.Content animate={fade()} />
  * ```
  */
+// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
 export function fade() {
   return {
     name: 'fade',
@@ -206,6 +207,7 @@ const SCALE_AND_FADE_CSS = `
  * <Popup.Content animate={scaleAndFade()} />
  * ```
  */
+// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
 export function scaleAndFade() {
   return {
     name: 'scale-and-fade',
@@ -291,6 +293,7 @@ const DIALOG_SLIDE_UP_AND_FADE_CSS = `
  * </Dialog>
  * ```
  */
+// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
 export function dialogSlideUpAndFade(options) {
   var _options$distance2;
   const distance = (_options$distance2 = options === null || options === void 0 ? void 0 : options.distance) !== null && _options$distance2 !== void 0 ? _options$distance2 : 12;
@@ -366,6 +369,7 @@ const DIALOG_FADE_CSS = `
  * </Dialog>
  * ```
  */
+// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
 export function dialogFade() {
   return {
     name: 'dialog-fade',

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

@@ -5,6 +5,8 @@ import { ax, ix } from "@compiled/react/runtime";
 import React, { forwardRef, useCallback, useEffect, useId, useLayoutEffect, useRef } from 'react';
 import { bind } from 'bind-event-listener';
 import mergeRefs from '@atlaskit/ds-lib/merge-refs';
+import noop from '@atlaskit/ds-lib/noop';
+import { useNotifyOpenLayerObserver } from '@atlaskit/layering/experimental/open-layer-observer';
 import { useAnimatedVisibility } from '../internal/use-animated-visibility';
 import { useFocusWrap } from '../internal/use-focus-wrap';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- dialog reset requires values not in cssMap's type union
@@ -63,6 +65,16 @@ export const Dialog = /*#__PURE__*/forwardRef(function Dialog({
     role: 'dialog'
   });
 
+  // ── Open layer observer registration ──
+  // Notifies the open layer observer so app-coordination features
+  // (open-count subscriptions) work with top-layer dialogs.
+  useNotifyOpenLayerObserver({
+    type: 'modal',
+    isOpen,
+    // No-op: no current use case for programmatic close via OpenLayerObserver.
+    onClose: noop
+  });
+
   // Show/hide the dialog in response to isOpen changes.
   useLayoutEffect(() => {
     const dialog = ownRef.current;

package/dist/es2019/focus/focus.js

@@ -59,6 +59,7 @@ export function getFirstFocusable({
 /**
  * Returns the last focusable element within the container.
  */
+// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
 export function getLastFocusable({
   container,
   filter
@@ -77,6 +78,7 @@ export function getLastFocusable({
  * Returns `null` if there is no focused element within the container or if
  * the focused element is not in the list of focusable elements.
  */
+// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
 export function getNextFocusable({
   container,
   direction,

package/dist/es2019/internal/ensure-preset-styles.js

@@ -6,7 +6,7 @@
  *
  * Note: injected `<style>` elements and the tracking Set are append-only —
  * they are never removed. This is intentional: the number of distinct
- * presets is bounded (handful of animation + arrow presets), so the
+ * presets is bounded (handful of animation presets), so the
  * memory footprint is negligible. Removing styles would risk breaking
  * other instances of the same preset that are still mounted.
  *

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

@@ -94,6 +94,7 @@ export function placementToPositionArea({
  * `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
 export function placementToTryFallbacks({
   placement
 }) {
@@ -265,12 +266,12 @@ function isResolvedPlacementEqual(a, b) {
  * comparison is used internally so re-runs are skipped when the resolved
  * placement shape is unchanged.
  */
+// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
 export function useAnchorPosition({
   anchorRef,
   popoverRef,
   placement = {},
-  forceFallbackPositioning = false,
-  arrow
+  forceFallbackPositioning = false
 }) {
   const id = useId();
   // Stabilize `placement` object so the same object literal
@@ -308,9 +309,7 @@ export function useAnchorPosition({
         })
       }, {
         property: 'position-try-fallbacks',
-        value: arrow ? arrow.getTryFallbacks({
-          placement: stablePlacement
-        }) : placementToTryFallbacks({
+        value: placementToTryFallbacks({
           placement: stablePlacement
         })
       },
@@ -373,19 +372,6 @@ export function useAnchorPosition({
           value: crossAxisShiftActive.value
         });
       }
-      if (arrow) {
-        // Set the arrow size variable used by the injected arrow CSS
-        // and the @position-try rules for margin values.
-        popoverStyles.push({
-          property: '--ds-arrow-size',
-          value: gapCssValue
-        });
-        // Mark the popover root as the arrow host. The ARROW_CSS targets
-        // [data-ds-popover-arrow] to apply clip-path: inset(0) margin-box
-        // and box-shadow: none. Must be on the popover root (not a child)
-        // because that's where useAnchorPosition sets the margin gap.
-        popover.setAttribute('data-ds-popover-arrow', '');
-      }
 
       /**
        * **We are never cleaning up anchor names**
@@ -408,7 +394,7 @@ export function useAnchorPosition({
       const undoPositioning = combine(setStyle({
         el: popover,
         styles: popoverStyles
-      }), arrow ? () => popover.removeAttribute('data-ds-popover-arrow') : () => {});
+      }));
       return undoPositioning;
     }
 
@@ -546,5 +532,5 @@ export function useAnchorPosition({
       popover.style.removeProperty('opacity');
     });
     return undoPositioning;
-  }, [anchorRef, popoverRef, stablePlacement, forceFallbackPositioning, arrow, id]);
+  }, [anchorRef, popoverRef, stablePlacement, forceFallbackPositioning, id]);
 }

package/dist/es2019/internal/use-preset-styles.js

@@ -5,7 +5,7 @@ import { ensurePresetStyles } from './ensure-preset-styles';
  * is injected once into `document.head`.
  *
  * Works with any preset that has `{ css, name }` — animation presets
- * (TAnimationPreset) and arrow presets (TArrowPreset) both satisfy this shape.
+ * (TAnimationPreset) satisfies this shape.
  */
 export function usePresetStyles({
   preset

package/dist/es2019/placement-map/index.js

@@ -161,4 +161,5 @@ export function fromLegacyPlacement({
 /**
  * The full mapping record, exposed for consumers that need to iterate or introspect.
  */
+// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
 export { placementMapping };

package/dist/es2019/popover/popover.js

@@ -7,6 +7,7 @@ import { bind } from 'bind-event-listener';
 import mergeRefs from '@atlaskit/ds-lib/merge-refs';
 import noop from '@atlaskit/ds-lib/noop';
 import once from '@atlaskit/ds-lib/once';
+import { useNotifyOpenLayerObserver } from '@atlaskit/layering/experimental/open-layer-observer';
 import { useAnimatedVisibility } from '../internal/use-animated-visibility';
 import { useFocusWrap } from '../internal/use-focus-wrap';
 import { useInitialFocus } from '../internal/use-initial-focus';
@@ -29,6 +30,18 @@ const supportsPopoverHint = once(() => {
 const styles = {
   root: "_19itglyw _ca0qidpf _u5f3idpf _n3tdidpf _19bvidpf _19pkidpf _2hwxidpf _otyridpf _18u0idpf _1r041wug _1reoewfl _18m9ewfl _bfhk1j28"
 };
+/**
+ * ARIA roles on the Popover primitive that register with the open layer observer
+ * as LayerType 'popup'. These are interactive overlays that should be tracked
+ * and dismissed when closeLayers() is called (e.g. when the side nav resizes).
+ *
+ * Note on open layer observer types not included here:
+ * - 'modal' only ever comes from the Dialog primitive, not Popover.
+ * - Other layer types (e.g. 'tooltip') do not yet exist in LayerType because
+ *   there is no current use case for distinguishing them in the observer.
+ */
+const POPUP_ROLES = new Set(['menu', 'listbox', 'dialog', 'alertdialog', 'tree', 'grid']);
+
 /**
  * Unopinionated top-layer primitive.
  *
@@ -98,6 +111,24 @@ export const Popover = /*#__PURE__*/forwardRef(function Popover({
     role
   });
 
+  // ── Open layer observer registration ──
+  // Notifies the open layer observer so app-coordination features
+  // (closeLayers(), open-count subscriptions) work with top-layer popovers.
+  //
+  // Only set type: 'popup' for roles that are interactive overlay popups.
+  // Passive/informational roles (tooltip, note, status, alert, log) and
+  // no-role cases do not map to LayerType 'popup', so type is left undefined.
+  const handleObserverClose = useCallback(() => {
+    onClose({
+      reason: 'programmatic'
+    });
+  }, [onClose]);
+  useNotifyOpenLayerObserver({
+    type: role && POPUP_ROLES.has(role) ? 'popup' : undefined,
+    isOpen,
+    onClose: handleObserverClose
+  });
+
   // Hint mode fallback: "hint" downgrades to "auto" if unsupported.
   //
   // Decision (2026-03-17 audit): We keep "auto" as the fallback (not "manual")

package/dist/es2019/popup/popup-content.js

@@ -5,7 +5,6 @@ import React, { forwardRef, useCallback, useLayoutEffect, useRef } from 'react';
 import mergeRefs from '@atlaskit/ds-lib/merge-refs';
 import { roleToAriaHasPopup } from '../internal/role-types';
 import { useAnchorPosition } from '../internal/use-anchor-position';
-import { usePresetStyles } from '../internal/use-preset-styles';
 import { useWidthFromAnchor } from '../internal/use-width-from-anchor';
 import { Popover } from '../popover/popover';
 import { useMaybePopupContext } from './popup-context';
@@ -22,7 +21,6 @@ export const PopupContent = /*#__PURE__*/forwardRef(function PopupContent({
   label,
   labelledBy,
   animate,
-  arrow,
   mode,
   widthFromAnchor = 'none',
   xcss,
@@ -120,17 +118,13 @@ export const PopupContent = /*#__PURE__*/forwardRef(function PopupContent({
   // reach the same DOM element for togglePopover). Otherwise use a local ref.
   const localRef = useRef(null);
   const popoverRef = (_ctx$popoverRef = ctx === null || ctx === void 0 ? void 0 : ctx.popoverRef) !== null && _ctx$popoverRef !== void 0 ? _ctx$popoverRef : localRef;
-  const arrowPreset = usePresetStyles({
-    preset: arrow
-  });
   useAnchorPosition({
     anchorRef: triggerRef !== null && triggerRef !== void 0 ? triggerRef : {
       current: null
     },
     popoverRef,
     placement,
-    forceFallbackPositioning,
-    arrow: arrowPreset !== null && arrowPreset !== void 0 ? arrowPreset : undefined
+    forceFallbackPositioning
   });
   useWidthFromAnchor({
     mode: widthFromAnchor,

package/dist/es2019/popup/popup-context.js

@@ -15,6 +15,7 @@ export const PopupProvider = PopupContext.Provider;
  *
  * Throws if called outside of a `<Popup>` compound component.
  */
+// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
 export function usePopupContext() {
   const ctx = useContext(PopupContext);
   if (ctx === null) {
@@ -29,6 +30,7 @@ export function usePopupContext() {
  * Used by `PopupContent` to support standalone usage (e.g. tooltip)
  * where values are passed as props instead of coming from a compound component.
  */
+// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
 export function useMaybePopupContext() {
   return useContext(PopupContext);
 }

package/dist/es2019/use-arrow-navigation/use-arrow-navigation.js

@@ -119,6 +119,7 @@ export function isAtCurrentMenuLevel(element, container) {
  * });
  * ```
  */
+// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
 export function useArrowNavigation({
   containerRef,
   onClose,

package/dist/esm/animations/presets.js

@@ -95,6 +95,7 @@ var FADE_CSS = "\n[data-ds-popover-fade] {\n  opacity: 0;\n  transition:\n    op
  * <Popup.Content animate={fade()} />
  * ```
  */
+// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
 export function fade() {
   return {
     name: 'fade',
@@ -119,6 +120,7 @@ var SCALE_AND_FADE_CSS = "\n[data-ds-popover-scale-and-fade] {\n  opacity: 0;\n
  * <Popup.Content animate={scaleAndFade()} />
  * ```
  */
+// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
 export function scaleAndFade() {
   return {
     name: 'scale-and-fade',
@@ -153,6 +155,7 @@ var DIALOG_SLIDE_UP_AND_FADE_CSS = "\n[data-ds-dialog-slide-up-and-fade] {\n  op
  * </Dialog>
  * ```
  */
+// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
 export function dialogSlideUpAndFade(options) {
   var _options$distance2;
   var distance = (_options$distance2 = options === null || options === void 0 ? void 0 : options.distance) !== null && _options$distance2 !== void 0 ? _options$distance2 : 12;
@@ -181,6 +184,7 @@ var DIALOG_FADE_CSS = "\n[data-ds-dialog-fade] {\n  opacity: 0;\n  transition:\n
  * </Dialog>
  * ```
  */
+// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
 export function dialogFade() {
   return {
     name: 'dialog-fade',