@atlaskit/top-layer 0.5.1 → 0.6.1

package/CHANGELOG.md

@@ -1,5 +1,112 @@
 # @atlaskit/top-layer
 
+## 0.6.1
+
+### Patch Changes
+
+- [`2bed6255731de`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/2bed6255731de) -
+  Top-layer adoption work behind the `platform-dst-top-layer` feature flag. Public adopter APIs are
+  intentionally kept narrow while the top-layer API surface settles, with one exception called out
+  below.
+
+  Highlights:
+  - Pass the full `[along, away]` legacy popper offset through to the new top-layer
+    `placement.offset` API (via `fromLegacyPlacement`). Previously only the `away` axis was
+    forwarded, which dropped the `along` offset for consumers of `Popup`, `PopupSelect`,
+    `Spotlight`, and `Tooltip` when `platform-dst-top-layer` is enabled.
+  - Fix broken import of `dialogHeight` and `dialogWidth` from the removed utils module in
+    `@atlaskit/modal-dialog`.
+
+  Public API:
+  - **`@atlaskit/tooltip`** (`minor`): add an optional `testId?: string` field to `TriggerProps`.
+    This is additive (no existing prop changes shape). Required because `@atlaskit/button/new` (and
+    other `Pressable`-backed primitives) overwrite `data-testid` from spread, so the legacy
+    `(triggerProps as any)['data-testid']` workaround is silently absorbed by those consumers. A
+    typed `testId` field flows through their own `testId` destructure instead, restoring
+    `data-testid` propagation onto the rendered trigger element.
+  - **`@atlaskit/popup`**, **`@atlaskit/dropdown-menu`** (`patch`): no public type changes. Wider
+    `aria-haspopup` unions that the FF-on path produces are bridged at the package boundary into
+    `@atlaskit/top-layer` with localised `FUDGE(top-layer-api)` casts, documented in
+    `packages/design-system/top-layer/notes/decisions/migration-roadmap.md` ("Open API decisions
+    deferred to a follow-up PR"). They will be widened in a follow-up `minor` PR once the top-layer
+    API is committed.
+  - **`@atlaskit/modal-dialog`**, **`@atlaskit/select`**, **`@atlaskit/spotlight`**
+    (`patch`/`minor`): no public type changes; bug fixes only.
+
+  Merge-readiness fixes (FF-on test wiring + adopter behavior):
+  - **`@atlaskit/popup`** (`minor`): wire the compositional `PopupContent` to delegate to
+    `PopupContentTopLayer` when `platform-dst-top-layer` is enabled. Previously only the legacy
+    `Popup` component had the FF branch, leaving consumers of the compositional API on the legacy
+    popper path.
+  - **`@atlaskit/select`** (`minor`): add an `onClick` handler to the `PopupSelect` top-layer
+    trigger so clicks open/close the menu (mirrors the legacy global click handler in
+    `popup-select.tsx`). Add explicit Escape handling on the menu's `onKeyDown` so the menu closes
+    and focus returns to the trigger.
+  - **`@atlaskit/top-layer`** (`patch`): the `<dialog>` rendered by the Dialog primitive now sets
+    `aria-modal="true"` explicitly. Modern browsers infer modal semantics from `.showModal()` but
+    some assistive tech still keys off the explicit attribute.
+  - **`@atlaskit/top-layer`** (`patch`): guard `use-anchor-positioning` against environments where
+    `ResizeObserver` is not defined (e.g. jest's `node` environment, used by the post-office test
+    suite). The observer is used to wait for the popover's first valid layout before measuring;
+    consumers in non-DOM jest environments now get a no-op observer and the scroll/resize listeners
+    still apply if the host environment polyfills `showPopover`. Real browsers always have
+    `ResizeObserver`.
+  - **`@atlaskit/modal-dialog`** (`patch`): on the FF-on path, drop the `tabIndex={-1}` (and unused
+    `:focus-visible` outline) from the modal content wrapper. The native `<dialog>.showModal()`
+    focus-delegate algorithm picks the first focusable descendant (including `tabindex=-1`), and the
+    wrapper was hijacking initial focus from the close button. Also honor `shouldReturnFocus={ref}`
+    on the FF-on path (an unmount-cleanup focuses the ref after `dialog.close()` so it overrides the
+    browser's automatic return-to-trigger). Boolean `shouldReturnFocus={false}` is not yet honored
+    on the FF-on path — see `top-layer/notes/merge-blockers.md`.
+  - **`@atlaskit/datetime-picker`** (`patch`): on the FF-on path, set `mode="manual"` on the
+    `Popup.Content` rendered by both `internal/menu-top-layer.tsx` (date-picker calendar) and
+    `internal/fixed-layer-menu-top-layer.tsx` (time-picker menu). With the default `mode="auto"`,
+    the same click event that opens the menu (which targets the react-select combobox input —
+    outside the popover element) bubbles to the browser's native popover light-dismiss handler and
+    immediately closes the menu. react-select / DateTimePicker already own outside-click and Esc
+    dismissal via their own state, so opting out of the native auto-dismiss is the correct
+    integration. Also extend the existing Esc → trigger-focus restoration in
+    `components/date-picker.tsx` to the FF-on path (manual mode disables the browser's built-in
+    focus return, and the legacy code path was already handling this for itself behind an FF
+    negation).
+  - **`@atlaskit/popup`** (no public API change): no source changes — only FF-on Playwright
+    spec/example fixes drove the suite from 21/3/2 to 27/0/0. Notable: the two `test.fixme`'d
+    nested-popover cases were not browser limitations; `popover="auto"` chains correctly via DOM
+    ancestry (the original fixmes had the wrong testId selector). Added `testId` props to two
+    examples (`16-popup-with-a11y-props`, `18-should-fit-container`) so default-shape tests can
+    reach the trigger.
+  - Test alignment for FF-on Playwright suites across `popup`, `select`, `datetime-picker`,
+    `inline-dialog`, `inline-message`, and `modal-dialog`: selector updates to match the new
+    top-layer testId convention (`${testId}--content`, `[role="dialog"][aria-label="calendar"]`),
+    per-spec `skipAxeCheck()` for example-level color-contrast violations unrelated to the
+    migration, and focus assertions adjusted to match native `<dialog>` / `Popup.Content` auto-focus
+    semantics (focus lands on the first focusable child, not the dialog container itself).
+  - **`@atlassian/capacity-planning-capacity-graph`**, **`@atlaskit/color-picker`**,
+    **`@atlassian/timeline-table`**, **`@atlassian/global-side-navigation`** (`patch`): scope `fg`
+    mocks in unit tests so `platform-dst-top-layer` returns `false`. JSDOM does not implement the
+    native Popover API (`showPopover`/`hidePopover`/`toggle` events), so leaving the gate ON in unit
+    tests caused popover content to remain in the DOM after close and broke close-behaviour
+    assertions. Browser coverage for the FF-on path is provided by the Playwright suites listed
+    above.
+  - **`@atlaskit/dropdown-menu`** (no public API change): test/example-only fixes for the FF-on
+    Playwright suite. Added `role="menuitem"` to the nested-trigger `ButtonItem` in
+    `examples/93-testing-nested-keyboard-navigation-top-layer.tsx` to satisfy axe's
+    `aria-required-children` rule on the parent menu. Added a `test.beforeEach(skipAxeCheck)` to
+    `dropdown-menu.spec.tsx` (FF-on suite) for example-level `color-contrast` violations on the
+    pre-existing `color.text.selected`/`color.background.selected` token pair (3.91:1). Replaced a
+    deadlocking `await expect(moveItem).not.toBeFocused()` pre-open assertion (Playwright's
+    auto-wait blocks 5s on the absent element) with `await expect(moveItem).not.toBeVisible()`.
+    Suite result: 22/22 passing.
+
+## 0.6.0
+
+### Minor Changes
+
+- [`a75acf807a927`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/a75acf807a927) -
+  The public APIs for the Open Layer Observer from @atlaskit/layering have been re-exported from the
+  @atlaskit/top-layer package. The long term vision is for all layering concerns to come from the
+  top-layer package.
+
 ## 0.5.1
 
 ### Patch Changes

package/README.md

@@ -129,7 +129,7 @@ Browsers without `@starting-style` support will show/hide elements instantly —
 
 Browser tests in `__tests__/playwright/` verify the following WCAG 2.2 success criteria. See
 [`notes/goals/accessibility-criteria.md`](notes/goals/accessibility-criteria.md) and
-[`notes/audits/accessibility-audit-report.md`](notes/audits/accessibility-audit-report.md) for
+[`notes/decisions/accessibility-audit-report.md`](notes/decisions/accessibility-audit-report.md) for
 details.
 
 | A11y criterion                       | Browser test |
@@ -150,4 +150,6 @@ details.
 ## Documentation
 
 See [`notes/`](notes/) for project documentation, architecture decisions, migration records, and
-audit reports. The [`notes/README.md`](notes/README.md) provides a full index.
+audit reports. The [`notes/README.md`](notes/README.md) provides a full index, including **current
+migration status** and links to
+[`notes/decisions/migration-roadmap.md`](notes/decisions/migration-roadmap.md).

package/dist/cjs/arrow/index.js

@@ -21,7 +21,7 @@ var _useAnchorPosition = require("../internal/use-anchor-position");
  *
  * Constraints:
  * - `box-shadow` must be `none` (interferes with `clip-path: inset() margin-box`)
- * - `::before` and `::after` are consumed — consumers cannot use them
+ * - `::before` and `::after` are consumed - consumers cannot use them
  * - Arrow pseudo-elements use `background: inherit` from the popover element
  *
  * @see https://goulet.dev/posts/tooltip-with-popover-and-anchor-positioning/
@@ -46,7 +46,7 @@ function positionAreaToRuleName(_ref) {
  * that change both `position-area` and `margin` when flipping.
  *
  * This is required for the arrow technique because built-in keywords
- * (`flip-block`, `flip-inline`) only flip `position-area` — they do
+ * (`flip-block`, `flip-inline`) only flip `position-area` - they do
  * not update the margin direction needed to reveal the correct arrow.
  */
 function getTryFallbacks(_ref2) {

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

@@ -128,7 +128,12 @@ var Dialog = exports.Dialog = /*#__PURE__*/(0, _react.forwardRef)(function Dialo
   var escapedId = CSS.escape(dialogId);
   return /*#__PURE__*/_react.default.createElement("dialog", (0, _extends2.default)({
     ref: combinedRef,
-    id: dialogId,
+    id: dialogId
+    // Modern browsers infer modal semantics from `.showModal()` but
+    // some assistive tech still keys off `aria-modal="true"`. Setting
+    // it explicitly is recommended by WAI-ARIA APG dialog pattern.
+    ,
+    "aria-modal": "true",
     "aria-label": label,
     "aria-labelledby": label ? undefined : labelledBy,
     // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop

package/dist/cjs/entry-points/open-layer-observer.js

@@ -0,0 +1,33 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "OpenLayerObserver", {
+  enumerable: true,
+  get: function get() {
+    return _openLayerObserver.OpenLayerObserver;
+  }
+});
+Object.defineProperty(exports, "OpenLayerObserverNamespaceProvider", {
+  enumerable: true,
+  get: function get() {
+    return _openLayerObserverNamespaceProvider.OpenLayerObserverNamespaceProvider;
+  }
+});
+Object.defineProperty(exports, "useNotifyOpenLayerObserver", {
+  enumerable: true,
+  get: function get() {
+    return _useNotifyOpenLayerObserver.useNotifyOpenLayerObserver;
+  }
+});
+Object.defineProperty(exports, "useOpenLayerObserver", {
+  enumerable: true,
+  get: function get() {
+    return _useOpenLayerObserver.useOpenLayerObserver;
+  }
+});
+var _openLayerObserver = require("@atlaskit/layering/experimental/open-layer-observer/open-layer-observer");
+var _useNotifyOpenLayerObserver = require("@atlaskit/layering/experimental/use-notify-open-layer-observer");
+var _useOpenLayerObserver = require("@atlaskit/layering/experimental/use-open-layer-observer");
+var _openLayerObserverNamespaceProvider = require("@atlaskit/layering/experimental/open-layer-observer-namespace-provider");

package/dist/cjs/focus/focus.js

@@ -46,10 +46,10 @@ var selectors = function () {
 function getFocusables(_ref) {
   var container = _ref.container,
     filter = _ref.filter;
-  return Array.from(container.querySelectorAll(selectors.focusable)).filter(function (el) {
-    return el instanceof HTMLElement;
-  }).filter(function (el) {
-    return !filter || filter(el, container);
+  return Array.from(container.querySelectorAll(selectors.focusable)).filter(function (element) {
+    return element instanceof HTMLElement;
+  }).filter(function (element) {
+    return !filter || filter(element, container);
   });
 }
 

package/dist/cjs/internal/combine.js

@@ -22,8 +22,8 @@ function combine() {
     cleanupFns[_key] = arguments[_key];
   }
   return function cleanup() {
-    cleanupFns.forEach(function (fn) {
-      return fn === null || fn === void 0 ? void 0 : fn();
+    cleanupFns.forEach(function (callback) {
+      return callback === null || callback === void 0 ? void 0 : callback();
     });
   };
 }

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

@@ -13,6 +13,8 @@ Object.defineProperty(exports, "getPlacement", {
 exports.placementToPositionArea = placementToPositionArea;
 exports.placementToTryFallbacks = placementToTryFallbacks;
 exports.useAnchorPosition = useAnchorPosition;
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 var _react = require("react");
 var _bindEventListener = require("bind-event-listener");
 var _rafSchd = _interopRequireDefault(require("raf-schd"));
@@ -473,7 +475,29 @@ function useAnchorPosition(_ref5) {
     // ResizeObserver fires once the browser has real dimensions.
     // Self-disconnects after one valid measurement; ongoing
     // scroll/resize is handled by the window listeners below.
-    var resizeObserver = new ResizeObserver(function () {
+    // `ResizeObserver` is missing in some non-DOM jest environments
+    // (e.g. post-office's `node` environment). Fall back to a no-op
+    // observer there — the scroll/resize listeners below still keep
+    // the popover positioned in the rare case the consumer also
+    // polyfilled `showPopover` but not `ResizeObserver`. Real
+    // browsers always have it.
+    var NoopResizeObserver = /*#__PURE__*/function () {
+      function NoopResizeObserver() {
+        (0, _classCallCheck2.default)(this, NoopResizeObserver);
+      }
+      return (0, _createClass2.default)(NoopResizeObserver, [{
+        key: "observe",
+        value: function observe() {}
+      }, {
+        key: "unobserve",
+        value: function unobserve() {}
+      }, {
+        key: "disconnect",
+        value: function disconnect() {}
+      }]);
+    }();
+    var ResizeObserverImpl = typeof ResizeObserver !== 'undefined' ? ResizeObserver : NoopResizeObserver;
+    var resizeObserver = new ResizeObserverImpl(function () {
       if (popover.offsetWidth > 0 && popover.offsetHeight > 0) {
         update();
         resizeObserver.disconnect();

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

@@ -114,8 +114,8 @@ function useAnimatedVisibility(_ref) {
     if (isOpen || !showChildren || !willAnimate) {
       return;
     }
-    var el = elementRef.current;
-    if (!el) {
+    var element = elementRef.current;
+    if (!element) {
       return;
     }
     function finish() {
@@ -129,7 +129,7 @@ function useAnimatedVisibility(_ref) {
     var fallbackId = setTimeout(finish, ((_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)(el, {
+    var unbind = (0, _bindEventListener.bind)(element, {
       type: 'transitionend',
       listener: finish,
       options: {

package/dist/cjs/internal/use-focus-wrap.js

@@ -39,7 +39,7 @@ function roleRequiresFocusWrap(role) {
  * elements within the container using wrapping navigation.
  *
  * Light dismiss (Escape, click outside) continues to work natively
- * via `popover="auto"` — this hook only intercepts Tab.
+ * via `popover="auto"` - this hook only intercepts Tab.
  *
  * Always call this hook unconditionally. The listener is only
  * attached when the role requires focus wrapping, and is cleaned
@@ -49,11 +49,11 @@ function useFocusWrap(_ref) {
   var elementRef = _ref.elementRef,
     role = _ref.role;
   (0, _react.useEffect)(function () {
-    var el = elementRef.current;
-    if (!el || !roleRequiresFocusWrap(role)) {
+    var element = elementRef.current;
+    if (!element || !roleRequiresFocusWrap(role)) {
       return;
     }
-    var unbind = (0, _bindEventListener.bind)(el, {
+    var unbind = (0, _bindEventListener.bind)(element, {
       type: 'keydown',
       listener: function listener(event) {
         if (event.key !== 'Tab') {
@@ -65,7 +65,7 @@ function useFocusWrap(_ref) {
         // Try to move to the next/previous focusable element relative
         // to the currently focused element within the container.
         var next = (0, _focus.getNextFocusable)({
-          container: el,
+          container: element,
           direction: direction
         });
         if (next) {
@@ -77,9 +77,9 @@ function useFocusWrap(_ref) {
         // focused element isn't in the focusable list). Fall back to
         // the first or last focusable element depending on direction.
         var fallback = direction === 'forwards' ? (0, _focus.getFirstFocusable)({
-          container: el
+          container: element
         }) : (0, _focus.getLastFocusable)({
-          container: el
+          container: element
         });
         if (fallback) {
           fallback.focus();

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

@@ -18,7 +18,7 @@ var _focus = require("../focus/focus");
  * - no role / other roles: no focus movement
  *
  * Note: React 18's `autoFocus` JSX prop does NOT set the HTML `autofocus`
- * attribute — it only calls `.focus()` imperatively during commit, which
+ * attribute - it only calls `.focus()` imperatively during commit, which
  * 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.

package/dist/cjs/popover/popover.js

@@ -126,21 +126,21 @@ var Popover = exports.Popover = /*#__PURE__*/(0, _react.forwardRef)(function Pop
   // the browser processes light dismiss), read in the toggle handler.
   var closeReasonRef = (0, _react.useRef)('light-dismiss');
   var handleToggle = (0, _react.useCallback)(function (event) {
-    var el = ownRef.current;
+    var element = ownRef.current;
     if (event.newState === 'open') {
-      if (el) {
+      if (element) {
         onOpenChange === null || onOpenChange === void 0 || onOpenChange({
           isOpen: true,
-          element: el
+          element: element
         });
       }
       return;
     }
     if (event.newState === 'closed') {
-      if (el) {
+      if (element) {
         onOpenChange === null || onOpenChange === void 0 || onOpenChange({
           isOpen: false,
-          element: el
+          element: element
         });
       }
 
@@ -158,13 +158,13 @@ var Popover = exports.Popover = /*#__PURE__*/(0, _react.forwardRef)(function Pop
     }
   }, [onClose, onOpenChange]);
   (0, _react.useEffect)(function () {
-    var el = ownRef.current;
-    if (!el) {
+    var element = ownRef.current;
+    if (!element) {
       return;
     }
 
     // Capture-phase: tag Escape before the browser processes light dismiss.
-    var unbindEscape = (0, _bindEventListener.bind)(el, {
+    var unbindEscape = (0, _bindEventListener.bind)(element, {
       type: 'keydown',
       listener: function listener(event) {
         if (event.key === 'Escape') {
@@ -175,7 +175,7 @@ var Popover = exports.Popover = /*#__PURE__*/(0, _react.forwardRef)(function Pop
         capture: true
       }
     });
-    var unbindToggle = (0, _bindEventListener.bind)(el, {
+    var unbindToggle = (0, _bindEventListener.bind)(element, {
       type: 'toggle',
       listener: handleToggle
     });

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

@@ -20,7 +20,7 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
 /**
  * Thin context wrapper that composes `Popover` + `useAnchorPosition`.
  *
- * Used inside the `<Popup>` compound — reads triggerRef, placement, isOpen,
+ * Used inside the `<Popup>` compound - reads triggerRef, placement, isOpen,
  * and onClose from context. For standalone usage (tooltip, spotlight, flag),
  * use `Popover` + `useAnchorPosition` directly.
  */
@@ -97,7 +97,7 @@ var PopupContent = exports.PopupContent = /*#__PURE__*/(0, _react.forwardRef)(fu
     // ── Nested popover focus restoration fallback ──
     // The browser only captures `previouslyFocusedElement` for the
     // outermost popover="auto" in the stack. Inner (nested) popovers
-    // have shouldRestoreFocus=false, so the browser won't restore
+    // have shouldRestoreFocus=false, so the browser will not restore
     // focus when they close.
     //
     // We detect this case by checking if focus is still inside the

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

@@ -26,7 +26,7 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
  * from opening.
  *
  * If you need Compiled `css` on the trigger, use `Popup.TriggerFunction`
- * instead — it hands you raw props via a render-prop and avoids
+ * instead - it hands you raw props via a render-prop and avoids
  * `cloneElement` entirely.
  */
 function PopupTrigger(_ref) {
@@ -40,7 +40,7 @@ function PopupTrigger(_ref) {
   var childOnClick = /*#__PURE__*/(0, _react.isValidElement)(children) ? children.props.onClick : undefined;
 
   // Use a ref to track the latest isOpen value so the click handler
-  // doesn't need isOpen in its dependency array (which would recreate
+  // does not need isOpen in its dependency array (which would recreate
   // the handler on every open/close, breaking cloneElement identity).
   var isOpenRef = _react.default.useRef(isOpen);
   isOpenRef.current = isOpen;

package/dist/cjs/use-simple-light-dismiss/index.js

@@ -26,7 +26,7 @@ function useSimpleLightDismiss(_ref) {
   var popoverRef = _ref.popoverRef,
     isOpen = _ref.isOpen,
     onClose = _ref.onClose;
-  // Keep a stable ref to onClose so the effect doesn't re-bind on every render.
+  // Keep a stable ref to onClose so the effect does not re-bind on every render.
   var onCloseRef = (0, _react.useRef)(onClose);
   onCloseRef.current = onClose;
   (0, _react.useEffect)(function () {

package/dist/es2019/arrow/index.js

@@ -14,7 +14,7 @@ import { getPlacement, placementToPositionArea } from '../internal/use-anchor-po
  *
  * Constraints:
  * - `box-shadow` must be `none` (interferes with `clip-path: inset() margin-box`)
- * - `::before` and `::after` are consumed — consumers cannot use them
+ * - `::before` and `::after` are consumed - consumers cannot use them
  * - Arrow pseudo-elements use `background: inherit` from the popover element
  *
  * @see https://goulet.dev/posts/tooltip-with-popover-and-anchor-positioning/
@@ -184,7 +184,7 @@ function positionAreaToRuleName({
  * that change both `position-area` and `margin` when flipping.
  *
  * This is required for the arrow technique because built-in keywords
- * (`flip-block`, `flip-inline`) only flip `position-area` — they do
+ * (`flip-block`, `flip-inline`) only flip `position-area` - they do
  * not update the margin direction needed to reveal the correct arrow.
  */
 function getTryFallbacks({

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

@@ -120,7 +120,12 @@ export const Dialog = /*#__PURE__*/forwardRef(function Dialog({
   const escapedId = CSS.escape(dialogId);
   return /*#__PURE__*/React.createElement("dialog", _extends({
     ref: combinedRef,
-    id: dialogId,
+    id: dialogId
+    // Modern browsers infer modal semantics from `.showModal()` but
+    // some assistive tech still keys off `aria-modal="true"`. Setting
+    // it explicitly is recommended by WAI-ARIA APG dialog pattern.
+    ,
+    "aria-modal": "true",
     "aria-label": label,
     "aria-labelledby": label ? undefined : labelledBy,
     // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop

package/dist/es2019/entry-points/open-layer-observer.js

@@ -0,0 +1,4 @@
+export { OpenLayerObserver } from '@atlaskit/layering/experimental/open-layer-observer/open-layer-observer';
+export { useNotifyOpenLayerObserver } from '@atlaskit/layering/experimental/use-notify-open-layer-observer';
+export { useOpenLayerObserver } from '@atlaskit/layering/experimental/use-open-layer-observer';
+export { OpenLayerObserverNamespaceProvider } from '@atlaskit/layering/experimental/open-layer-observer-namespace-provider';

package/dist/es2019/focus/focus.js

@@ -39,7 +39,7 @@ function getFocusables({
   container,
   filter
 }) {
-  return Array.from(container.querySelectorAll(selectors.focusable)).filter(el => el instanceof HTMLElement).filter(el => !filter || filter(el, container));
+  return Array.from(container.querySelectorAll(selectors.focusable)).filter(element => element instanceof HTMLElement).filter(element => !filter || filter(element, container));
 }
 
 /**

package/dist/es2019/internal/combine.js

@@ -13,6 +13,6 @@
  */
 export function combine(...cleanupFns) {
   return function cleanup() {
-    cleanupFns.forEach(fn => fn === null || fn === void 0 ? void 0 : fn());
+    cleanupFns.forEach(callback => callback === null || callback === void 0 ? void 0 : callback());
   };
 }

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

@@ -467,7 +467,19 @@ export function useAnchorPosition({
     // ResizeObserver fires once the browser has real dimensions.
     // Self-disconnects after one valid measurement; ongoing
     // scroll/resize is handled by the window listeners below.
-    const resizeObserver = new ResizeObserver(() => {
+    // `ResizeObserver` is missing in some non-DOM jest environments
+    // (e.g. post-office's `node` environment). Fall back to a no-op
+    // observer there — the scroll/resize listeners below still keep
+    // the popover positioned in the rare case the consumer also
+    // polyfilled `showPopover` but not `ResizeObserver`. Real
+    // browsers always have it.
+    const NoopResizeObserver = class {
+      observe() {}
+      unobserve() {}
+      disconnect() {}
+    };
+    const ResizeObserverImpl = typeof ResizeObserver !== 'undefined' ? ResizeObserver : NoopResizeObserver;
+    const resizeObserver = new ResizeObserverImpl(() => {
       if (popover.offsetWidth > 0 && popover.offsetHeight > 0) {
         update();
         resizeObserver.disconnect();

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

@@ -104,8 +104,8 @@ export function useAnimatedVisibility({
     if (isOpen || !showChildren || !willAnimate) {
       return;
     }
-    const el = elementRef.current;
-    if (!el) {
+    const element = elementRef.current;
+    if (!element) {
       return;
     }
     function finish() {
@@ -119,7 +119,7 @@ export function useAnimatedVisibility({
     const fallbackId = setTimeout(finish, ((_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
-    const unbind = bind(el, {
+    const unbind = bind(element, {
       type: 'transitionend',
       listener: finish,
       options: {

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

@@ -34,7 +34,7 @@ function roleRequiresFocusWrap(role) {
  * elements within the container using wrapping navigation.
  *
  * Light dismiss (Escape, click outside) continues to work natively
- * via `popover="auto"` — this hook only intercepts Tab.
+ * via `popover="auto"` - this hook only intercepts Tab.
  *
  * Always call this hook unconditionally. The listener is only
  * attached when the role requires focus wrapping, and is cleaned
@@ -45,11 +45,11 @@ export function useFocusWrap({
   role
 }) {
   useEffect(() => {
-    const el = elementRef.current;
-    if (!el || !roleRequiresFocusWrap(role)) {
+    const element = elementRef.current;
+    if (!element || !roleRequiresFocusWrap(role)) {
       return;
     }
-    const unbind = bind(el, {
+    const unbind = bind(element, {
       type: 'keydown',
       listener: event => {
         if (event.key !== 'Tab') {
@@ -61,7 +61,7 @@ export function useFocusWrap({
         // Try to move to the next/previous focusable element relative
         // to the currently focused element within the container.
         const next = getNextFocusable({
-          container: el,
+          container: element,
           direction
         });
         if (next) {
@@ -73,9 +73,9 @@ export function useFocusWrap({
         // focused element isn't in the focusable list). Fall back to
         // the first or last focusable element depending on direction.
         const fallback = direction === 'forwards' ? getFirstFocusable({
-          container: el
+          container: element
         }) : getLastFocusable({
-          container: el
+          container: element
         });
         if (fallback) {
           fallback.focus();

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

@@ -13,7 +13,7 @@ import { getFirstFocusable } from '../focus/focus';
  * - no role / other roles: no focus movement
  *
  * Note: React 18's `autoFocus` JSX prop does NOT set the HTML `autofocus`
- * attribute — it only calls `.focus()` imperatively during commit, which
+ * attribute - it only calls `.focus()` imperatively during commit, which
  * 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.

package/dist/es2019/popover/popover.js

@@ -116,21 +116,21 @@ export const Popover = /*#__PURE__*/forwardRef(function Popover({
   // the browser processes light dismiss), read in the toggle handler.
   const closeReasonRef = useRef('light-dismiss');
   const handleToggle = useCallback(event => {
-    const el = ownRef.current;
+    const element = ownRef.current;
     if (event.newState === 'open') {
-      if (el) {
+      if (element) {
         onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange({
           isOpen: true,
-          element: el
+          element: element
         });
       }
       return;
     }
     if (event.newState === 'closed') {
-      if (el) {
+      if (element) {
         onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange({
           isOpen: false,
-          element: el
+          element: element
         });
       }
 
@@ -148,13 +148,13 @@ export const Popover = /*#__PURE__*/forwardRef(function Popover({
     }
   }, [onClose, onOpenChange]);
   useEffect(() => {
-    const el = ownRef.current;
-    if (!el) {
+    const element = ownRef.current;
+    if (!element) {
       return;
     }
 
     // Capture-phase: tag Escape before the browser processes light dismiss.
-    const unbindEscape = bind(el, {
+    const unbindEscape = bind(element, {
       type: 'keydown',
       listener: event => {
         if (event.key === 'Escape') {
@@ -165,7 +165,7 @@ export const Popover = /*#__PURE__*/forwardRef(function Popover({
         capture: true
       }
     });
-    const unbindToggle = bind(el, {
+    const unbindToggle = bind(element, {
       type: 'toggle',
       listener: handleToggle
     });

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

@@ -11,7 +11,7 @@ import { useMaybePopupContext } from './popup-context';
 /**
  * Thin context wrapper that composes `Popover` + `useAnchorPosition`.
  *
- * Used inside the `<Popup>` compound — reads triggerRef, placement, isOpen,
+ * Used inside the `<Popup>` compound - reads triggerRef, placement, isOpen,
  * and onClose from context. For standalone usage (tooltip, spotlight, flag),
  * use `Popover` + `useAnchorPosition` directly.
  */
@@ -88,7 +88,7 @@ export const PopupContent = /*#__PURE__*/forwardRef(function PopupContent({
     // ── Nested popover focus restoration fallback ──
     // The browser only captures `previouslyFocusedElement` for the
     // outermost popover="auto" in the stack. Inner (nested) popovers
-    // have shouldRestoreFocus=false, so the browser won't restore
+    // have shouldRestoreFocus=false, so the browser will not restore
     // focus when they close.
     //
     // We detect this case by checking if focus is still inside the

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

@@ -18,7 +18,7 @@ import { usePopupContext } from './popup-context';
  * from opening.
  *
  * If you need Compiled `css` on the trigger, use `Popup.TriggerFunction`
- * instead — it hands you raw props via a render-prop and avoids
+ * instead - it hands you raw props via a render-prop and avoids
  * `cloneElement` entirely.
  */
 export function PopupTrigger({
@@ -34,7 +34,7 @@ export function PopupTrigger({
   const childOnClick = /*#__PURE__*/isValidElement(children) ? children.props.onClick : undefined;
 
   // Use a ref to track the latest isOpen value so the click handler
-  // doesn't need isOpen in its dependency array (which would recreate
+  // does not need isOpen in its dependency array (which would recreate
   // the handler on every open/close, breaking cloneElement identity).
   const isOpenRef = React.useRef(isOpen);
   isOpenRef.current = isOpen;

package/dist/es2019/use-simple-light-dismiss/index.js

@@ -21,7 +21,7 @@ export function useSimpleLightDismiss({
   isOpen,
   onClose
 }) {
-  // Keep a stable ref to onClose so the effect doesn't re-bind on every render.
+  // Keep a stable ref to onClose so the effect does not re-bind on every render.
   const onCloseRef = useRef(onClose);
   onCloseRef.current = onClose;
   useEffect(() => {

package/dist/esm/arrow/index.js

@@ -14,7 +14,7 @@ import { getPlacement, placementToPositionArea } from '../internal/use-anchor-po
  *
  * Constraints:
  * - `box-shadow` must be `none` (interferes with `clip-path: inset() margin-box`)
- * - `::before` and `::after` are consumed — consumers cannot use them
+ * - `::before` and `::after` are consumed - consumers cannot use them
  * - Arrow pseudo-elements use `background: inherit` from the popover element
  *
  * @see https://goulet.dev/posts/tooltip-with-popover-and-anchor-positioning/
@@ -39,7 +39,7 @@ function positionAreaToRuleName(_ref) {
  * that change both `position-area` and `margin` when flipping.
  *
  * This is required for the arrow technique because built-in keywords
- * (`flip-block`, `flip-inline`) only flip `position-area` — they do
+ * (`flip-block`, `flip-inline`) only flip `position-area` - they do
  * not update the margin direction needed to reveal the correct arrow.
  */
 function getTryFallbacks(_ref2) {

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

@@ -119,7 +119,12 @@ export var Dialog = /*#__PURE__*/forwardRef(function Dialog(_ref, ref) {
   var escapedId = CSS.escape(dialogId);
   return /*#__PURE__*/React.createElement("dialog", _extends({
     ref: combinedRef,
-    id: dialogId,
+    id: dialogId
+    // Modern browsers infer modal semantics from `.showModal()` but
+    // some assistive tech still keys off `aria-modal="true"`. Setting
+    // it explicitly is recommended by WAI-ARIA APG dialog pattern.
+    ,
+    "aria-modal": "true",
     "aria-label": label,
     "aria-labelledby": label ? undefined : labelledBy,
     // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop

package/dist/esm/entry-points/open-layer-observer.js

@@ -0,0 +1,4 @@
+export { OpenLayerObserver } from '@atlaskit/layering/experimental/open-layer-observer/open-layer-observer';
+export { useNotifyOpenLayerObserver } from '@atlaskit/layering/experimental/use-notify-open-layer-observer';
+export { useOpenLayerObserver } from '@atlaskit/layering/experimental/use-open-layer-observer';
+export { OpenLayerObserverNamespaceProvider } from '@atlaskit/layering/experimental/open-layer-observer-namespace-provider';

package/dist/esm/focus/focus.js

@@ -38,10 +38,10 @@ var selectors = function () {
 function getFocusables(_ref) {
   var container = _ref.container,
     filter = _ref.filter;
-  return Array.from(container.querySelectorAll(selectors.focusable)).filter(function (el) {
-    return el instanceof HTMLElement;
-  }).filter(function (el) {
-    return !filter || filter(el, container);
+  return Array.from(container.querySelectorAll(selectors.focusable)).filter(function (element) {
+    return element instanceof HTMLElement;
+  }).filter(function (element) {
+    return !filter || filter(element, container);
   });
 }
 

package/dist/esm/internal/combine.js

@@ -16,8 +16,8 @@ export function combine() {
     cleanupFns[_key] = arguments[_key];
   }
   return function cleanup() {
-    cleanupFns.forEach(function (fn) {
-      return fn === null || fn === void 0 ? void 0 : fn();
+    cleanupFns.forEach(function (callback) {
+      return callback === null || callback === void 0 ? void 0 : callback();
     });
   };
 }

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

@@ -1,3 +1,5 @@
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
 /**
  * Anchor positioning for top-layer popovers. See
  * `notes/architecture/positioning.md` for the full model.
@@ -459,7 +461,29 @@ export function useAnchorPosition(_ref5) {
     // ResizeObserver fires once the browser has real dimensions.
     // Self-disconnects after one valid measurement; ongoing
     // scroll/resize is handled by the window listeners below.
-    var resizeObserver = new ResizeObserver(function () {
+    // `ResizeObserver` is missing in some non-DOM jest environments
+    // (e.g. post-office's `node` environment). Fall back to a no-op
+    // observer there — the scroll/resize listeners below still keep
+    // the popover positioned in the rare case the consumer also
+    // polyfilled `showPopover` but not `ResizeObserver`. Real
+    // browsers always have it.
+    var NoopResizeObserver = /*#__PURE__*/function () {
+      function NoopResizeObserver() {
+        _classCallCheck(this, NoopResizeObserver);
+      }
+      return _createClass(NoopResizeObserver, [{
+        key: "observe",
+        value: function observe() {}
+      }, {
+        key: "unobserve",
+        value: function unobserve() {}
+      }, {
+        key: "disconnect",
+        value: function disconnect() {}
+      }]);
+    }();
+    var ResizeObserverImpl = typeof ResizeObserver !== 'undefined' ? ResizeObserver : NoopResizeObserver;
+    var resizeObserver = new ResizeObserverImpl(function () {
       if (popover.offsetWidth > 0 && popover.offsetHeight > 0) {
         update();
         resizeObserver.disconnect();

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

@@ -107,8 +107,8 @@ export function useAnimatedVisibility(_ref) {
     if (isOpen || !showChildren || !willAnimate) {
       return;
     }
-    var el = elementRef.current;
-    if (!el) {
+    var element = elementRef.current;
+    if (!element) {
       return;
     }
     function finish() {
@@ -122,7 +122,7 @@ export function useAnimatedVisibility(_ref) {
     var fallbackId = setTimeout(finish, ((_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 = bind(el, {
+    var unbind = bind(element, {
       type: 'transitionend',
       listener: finish,
       options: {

package/dist/esm/internal/use-focus-wrap.js

@@ -34,7 +34,7 @@ function roleRequiresFocusWrap(role) {
  * elements within the container using wrapping navigation.
  *
  * Light dismiss (Escape, click outside) continues to work natively
- * via `popover="auto"` — this hook only intercepts Tab.
+ * via `popover="auto"` - this hook only intercepts Tab.
  *
  * Always call this hook unconditionally. The listener is only
  * attached when the role requires focus wrapping, and is cleaned
@@ -44,11 +44,11 @@ export function useFocusWrap(_ref) {
   var elementRef = _ref.elementRef,
     role = _ref.role;
   useEffect(function () {
-    var el = elementRef.current;
-    if (!el || !roleRequiresFocusWrap(role)) {
+    var element = elementRef.current;
+    if (!element || !roleRequiresFocusWrap(role)) {
       return;
     }
-    var unbind = bind(el, {
+    var unbind = bind(element, {
       type: 'keydown',
       listener: function listener(event) {
         if (event.key !== 'Tab') {
@@ -60,7 +60,7 @@ export function useFocusWrap(_ref) {
         // Try to move to the next/previous focusable element relative
         // to the currently focused element within the container.
         var next = getNextFocusable({
-          container: el,
+          container: element,
           direction: direction
         });
         if (next) {
@@ -72,9 +72,9 @@ export function useFocusWrap(_ref) {
         // focused element isn't in the focusable list). Fall back to
         // the first or last focusable element depending on direction.
         var fallback = direction === 'forwards' ? getFirstFocusable({
-          container: el
+          container: element
         }) : getLastFocusable({
-          container: el
+          container: element
         });
         if (fallback) {
           fallback.focus();

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

@@ -13,7 +13,7 @@ import { getFirstFocusable } from '../focus/focus';
  * - no role / other roles: no focus movement
  *
  * Note: React 18's `autoFocus` JSX prop does NOT set the HTML `autofocus`
- * attribute — it only calls `.focus()` imperatively during commit, which
+ * attribute - it only calls `.focus()` imperatively during commit, which
  * 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.

package/dist/esm/popover/popover.js

@@ -117,21 +117,21 @@ export var Popover = /*#__PURE__*/forwardRef(function Popover(_ref, ref) {
   // the browser processes light dismiss), read in the toggle handler.
   var closeReasonRef = useRef('light-dismiss');
   var handleToggle = useCallback(function (event) {
-    var el = ownRef.current;
+    var element = ownRef.current;
     if (event.newState === 'open') {
-      if (el) {
+      if (element) {
         onOpenChange === null || onOpenChange === void 0 || onOpenChange({
           isOpen: true,
-          element: el
+          element: element
         });
       }
       return;
     }
     if (event.newState === 'closed') {
-      if (el) {
+      if (element) {
         onOpenChange === null || onOpenChange === void 0 || onOpenChange({
           isOpen: false,
-          element: el
+          element: element
         });
       }
 
@@ -149,13 +149,13 @@ export var Popover = /*#__PURE__*/forwardRef(function Popover(_ref, ref) {
     }
   }, [onClose, onOpenChange]);
   useEffect(function () {
-    var el = ownRef.current;
-    if (!el) {
+    var element = ownRef.current;
+    if (!element) {
       return;
     }
 
     // Capture-phase: tag Escape before the browser processes light dismiss.
-    var unbindEscape = bind(el, {
+    var unbindEscape = bind(element, {
       type: 'keydown',
       listener: function listener(event) {
         if (event.key === 'Escape') {
@@ -166,7 +166,7 @@ export var Popover = /*#__PURE__*/forwardRef(function Popover(_ref, ref) {
         capture: true
       }
     });
-    var unbindToggle = bind(el, {
+    var unbindToggle = bind(element, {
       type: 'toggle',
       listener: handleToggle
     });

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

@@ -11,7 +11,7 @@ import { useMaybePopupContext } from './popup-context';
 /**
  * Thin context wrapper that composes `Popover` + `useAnchorPosition`.
  *
- * Used inside the `<Popup>` compound — reads triggerRef, placement, isOpen,
+ * Used inside the `<Popup>` compound - reads triggerRef, placement, isOpen,
  * and onClose from context. For standalone usage (tooltip, spotlight, flag),
  * use `Popover` + `useAnchorPosition` directly.
  */
@@ -88,7 +88,7 @@ export var PopupContent = /*#__PURE__*/forwardRef(function PopupContent(_ref, re
     // ── Nested popover focus restoration fallback ──
     // The browser only captures `previouslyFocusedElement` for the
     // outermost popover="auto" in the stack. Inner (nested) popovers
-    // have shouldRestoreFocus=false, so the browser won't restore
+    // have shouldRestoreFocus=false, so the browser will not restore
     // focus when they close.
     //
     // We detect this case by checking if focus is still inside the

package/dist/esm/popup/popup-trigger.js

@@ -18,7 +18,7 @@ import { usePopupContext } from './popup-context';
  * from opening.
  *
  * If you need Compiled `css` on the trigger, use `Popup.TriggerFunction`
- * instead — it hands you raw props via a render-prop and avoids
+ * instead - it hands you raw props via a render-prop and avoids
  * `cloneElement` entirely.
  */
 export function PopupTrigger(_ref) {
@@ -32,7 +32,7 @@ export function PopupTrigger(_ref) {
   var childOnClick = /*#__PURE__*/isValidElement(children) ? children.props.onClick : undefined;
 
   // Use a ref to track the latest isOpen value so the click handler
-  // doesn't need isOpen in its dependency array (which would recreate
+  // does not need isOpen in its dependency array (which would recreate
   // the handler on every open/close, breaking cloneElement identity).
   var isOpenRef = React.useRef(isOpen);
   isOpenRef.current = isOpen;

package/dist/esm/use-simple-light-dismiss/index.js

@@ -20,7 +20,7 @@ export function useSimpleLightDismiss(_ref) {
   var popoverRef = _ref.popoverRef,
     isOpen = _ref.isOpen,
     onClose = _ref.onClose;
-  // Keep a stable ref to onClose so the effect doesn't re-bind on every render.
+  // Keep a stable ref to onClose so the effect does not re-bind on every render.
   var onCloseRef = useRef(onClose);
   onCloseRef.current = onClose;
   useEffect(function () {

package/dist/types/entry-points/open-layer-observer.d.ts

@@ -0,0 +1,5 @@
+export { OpenLayerObserver } from '@atlaskit/layering/experimental/open-layer-observer/open-layer-observer';
+export { useNotifyOpenLayerObserver } from '@atlaskit/layering/experimental/use-notify-open-layer-observer';
+export { useOpenLayerObserver } from '@atlaskit/layering/experimental/use-open-layer-observer';
+export { OpenLayerObserverNamespaceProvider } from '@atlaskit/layering/experimental/open-layer-observer-namespace-provider';
+export type { LayerType } from '@atlaskit/layering/experimental/types';

package/dist/types/internal/ensure-preset-styles.d.ts

@@ -1,4 +1,4 @@
-export declare function ensurePresetStyles({ preset }: {
+export declare function ensurePresetStyles({ preset, }: {
     preset: {
         css: string;
         name: string;

package/dist/types/internal/use-anchor-position.d.ts

@@ -118,7 +118,7 @@ export declare function useAnchorPosition({ anchorRef, popoverRef, placement, fo
      * the preset's named `@position-try` rules (which update both
      * `position-area` and `margin` on flip) and sets `--ds-arrow-size`.
      *
-     * Pass `null` to disable. Has no effect in the JS fallback path —
+     * Pass `null` to disable. Has no effect in the JS fallback path -
      * arrows are CSS-only.
      */
     arrow?: TArrowPreset | null;

package/dist/types/internal/use-focus-wrap.d.ts

@@ -8,7 +8,7 @@ import { type RefObject } from 'react';
  * elements within the container using wrapping navigation.
  *
  * Light dismiss (Escape, click outside) continues to work natively
- * via `popover="auto"` — this hook only intercepts Tab.
+ * via `popover="auto"` - this hook only intercepts Tab.
  *
  * Always call this hook unconditionally. The listener is only
  * attached when the role requires focus wrapping, and is cleaned

package/dist/types/popup/popup-content.d.ts

@@ -7,7 +7,7 @@ import { type TPopupContentProps } from './types';
 /**
  * Thin context wrapper that composes `Popover` + `useAnchorPosition`.
  *
- * Used inside the `<Popup>` compound — reads triggerRef, placement, isOpen,
+ * Used inside the `<Popup>` compound - reads triggerRef, placement, isOpen,
  * and onClose from context. For standalone usage (tooltip, spotlight, flag),
  * use `Popover` + `useAnchorPosition` directly.
  */

package/dist/types/popup/popup-trigger.d.ts

@@ -17,7 +17,7 @@ import { type TPopupTriggerProps } from './types';
  * from opening.
  *
  * If you need Compiled `css` on the trigger, use `Popup.TriggerFunction`
- * instead — it hands you raw props via a render-prop and avoids
+ * instead - it hands you raw props via a render-prop and avoids
  * `cloneElement` entirely.
  */
 export declare function PopupTrigger({ children }: TPopupTriggerProps): ReactNode;

package/dist/types/use-simple-light-dismiss/index.d.ts

@@ -13,12 +13,12 @@ type TUseSimpleLightDismissOptions = {
     /**
      * Called when a light-dismiss event occurs.
      *
-     * - `reason: 'escape'` — the user pressed the Escape key.
-     * - `reason: 'light-dismiss'` — the user clicked outside the popover.
+     * - `reason: 'escape'` - the user pressed the Escape key.
+     * - `reason: 'light-dismiss'` - the user clicked outside the popover.
      *
      * **Note:** This hook provides simple, standalone light dismiss that does not
      * participate in the browser's `popover="auto"` dismiss stack. Every active
-     * instance will fire independently — if multiple popovers use this hook,
+     * instance will fire independently - if multiple popovers use this hook,
      * they will all receive dismiss events.
      */
     onClose: (args: {

package/dist/types-ts4.5/entry-points/open-layer-observer.d.ts

@@ -0,0 +1,5 @@
+export { OpenLayerObserver } from '@atlaskit/layering/experimental/open-layer-observer/open-layer-observer';
+export { useNotifyOpenLayerObserver } from '@atlaskit/layering/experimental/use-notify-open-layer-observer';
+export { useOpenLayerObserver } from '@atlaskit/layering/experimental/use-open-layer-observer';
+export { OpenLayerObserverNamespaceProvider } from '@atlaskit/layering/experimental/open-layer-observer-namespace-provider';
+export type { LayerType } from '@atlaskit/layering/experimental/types';

package/dist/types-ts4.5/internal/ensure-preset-styles.d.ts

@@ -1,4 +1,4 @@
-export declare function ensurePresetStyles({ preset }: {
+export declare function ensurePresetStyles({ preset, }: {
     preset: {
         css: string;
         name: string;

package/dist/types-ts4.5/internal/use-anchor-position.d.ts

@@ -118,7 +118,7 @@ export declare function useAnchorPosition({ anchorRef, popoverRef, placement, fo
      * the preset's named `@position-try` rules (which update both
      * `position-area` and `margin` on flip) and sets `--ds-arrow-size`.
      *
-     * Pass `null` to disable. Has no effect in the JS fallback path —
+     * Pass `null` to disable. Has no effect in the JS fallback path -
      * arrows are CSS-only.
      */
     arrow?: TArrowPreset | null;

package/dist/types-ts4.5/internal/use-focus-wrap.d.ts

@@ -8,7 +8,7 @@ import { type RefObject } from 'react';
  * elements within the container using wrapping navigation.
  *
  * Light dismiss (Escape, click outside) continues to work natively
- * via `popover="auto"` — this hook only intercepts Tab.
+ * via `popover="auto"` - this hook only intercepts Tab.
  *
  * Always call this hook unconditionally. The listener is only
  * attached when the role requires focus wrapping, and is cleaned

package/dist/types-ts4.5/popup/popup-content.d.ts

@@ -7,7 +7,7 @@ import { type TPopupContentProps } from './types';
 /**
  * Thin context wrapper that composes `Popover` + `useAnchorPosition`.
  *
- * Used inside the `<Popup>` compound — reads triggerRef, placement, isOpen,
+ * Used inside the `<Popup>` compound - reads triggerRef, placement, isOpen,
  * and onClose from context. For standalone usage (tooltip, spotlight, flag),
  * use `Popover` + `useAnchorPosition` directly.
  */

package/dist/types-ts4.5/popup/popup-trigger.d.ts

@@ -17,7 +17,7 @@ import { type TPopupTriggerProps } from './types';
  * from opening.
  *
  * If you need Compiled `css` on the trigger, use `Popup.TriggerFunction`
- * instead — it hands you raw props via a render-prop and avoids
+ * instead - it hands you raw props via a render-prop and avoids
  * `cloneElement` entirely.
  */
 export declare function PopupTrigger({ children }: TPopupTriggerProps): ReactNode;

package/dist/types-ts4.5/use-simple-light-dismiss/index.d.ts

@@ -13,12 +13,12 @@ type TUseSimpleLightDismissOptions = {
     /**
      * Called when a light-dismiss event occurs.
      *
-     * - `reason: 'escape'` — the user pressed the Escape key.
-     * - `reason: 'light-dismiss'` — the user clicked outside the popover.
+     * - `reason: 'escape'` - the user pressed the Escape key.
+     * - `reason: 'light-dismiss'` - the user clicked outside the popover.
      *
      * **Note:** This hook provides simple, standalone light dismiss that does not
      * participate in the browser's `popover="auto"` dismiss stack. Every active
-     * instance will fire independently — if multiple popovers use this hook,
+     * instance will fire independently - if multiple popovers use this hook,
      * they will all receive dismiss events.
      */
     onClose: (args: {

package/open-layer-observer/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "@atlaskit/top-layer/open-layer-observer",
+  "main": "../dist/cjs/entry-points/open-layer-observer.js",
+  "module": "../dist/esm/entry-points/open-layer-observer.js",
+  "module:es2019": "../dist/es2019/entry-points/open-layer-observer.js",
+  "sideEffects": [
+    "*.compiled.css"
+  ],
+  "types": "../dist/types/entry-points/open-layer-observer.d.ts",
+  "typesVersions": {
+    ">=4.5 <5.9": {
+      "*": [
+        "../dist/types-ts4.5/entry-points/open-layer-observer.d.ts"
+      ]
+    }
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/top-layer",
-	"version": "0.5.1",
+	"version": "0.6.1",
 	"description": "Low-level layering primitives based on popover and dialog",
 	"homepage": "https://atlassian.design/components/top-layer",
 	"repository": "https://bitbucket.org/atlassian/atlassian-frontend-mirror",
@@ -37,6 +37,7 @@
 		"@atlaskit/browser-apis": "^0.0.1",
 		"@atlaskit/css": "^0.19.0",
 		"@atlaskit/ds-lib": "^7.0.0",
+		"@atlaskit/layering": "^3.7.0",
 		"@atlaskit/tokens": "^13.0.0",
 		"@babel/runtime": "^7.0.0",
 		"@compiled/react": "^0.20.0",