@atlaskit/popup 4.23.1 → 4.23.2

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/popup
 
+## 4.23.2
+
+### Patch Changes
+
+- [`021a645c6f39a`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/021a645c6f39a) -
+  Update internal top-layer adopter code paths behind `platform-dst-top-layer`.
+- Updated dependencies
+
 ## 4.23.1
 
 ### Patch Changes

package/dist/cjs/compositional/popup-content-top-layer.js

@@ -18,7 +18,7 @@ var _animations = require("@atlaskit/top-layer/animations");
 var _createCloseEvent = require("@atlaskit/top-layer/create-close-event");
 var _placementMap = require("@atlaskit/top-layer/placement-map");
 var _popover = require("@atlaskit/top-layer/popover");
-var _popupSurface = require("@atlaskit/top-layer/popup-surface");
+var _popoverSurface = require("@atlaskit/top-layer/popover-surface");
 var _useAnchorPosition = require("@atlaskit/top-layer/use-anchor-position");
 var _useWidthFromAnchor = require("@atlaskit/top-layer/use-width-from-anchor");
 var _topLayerBridge = require("../internal/top-layer-bridge");
@@ -139,7 +139,7 @@ function PopupContentTopLayer(_ref) {
     "data-testid": testId,
     tabIndex: autoFocus ? -1 : undefined,
     xcss: xcss
-  }, children(contentProps)) : /*#__PURE__*/React.createElement(_popupSurface.PopupSurface, null, /*#__PURE__*/React.createElement("div", {
+  }, children(contentProps)) : /*#__PURE__*/React.createElement(_popoverSurface.PopoverSurface, null, /*#__PURE__*/React.createElement("div", {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
     className: (0, _runtime.ax)([shouldFitViewport && "_1reo1wug _18m91wug", (0, _runtime.ax)([xcss])])
   }, children(contentProps))));

package/dist/cjs/popup-top-layer.js

@@ -16,8 +16,13 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
 var _animations = require("@atlaskit/top-layer/animations");
 var _createCloseEvent = require("@atlaskit/top-layer/create-close-event");
+var _getAriaForTrigger = require("@atlaskit/top-layer/get-aria-for-trigger");
 var _placementMap = require("@atlaskit/top-layer/placement-map");
-var _popup = require("@atlaskit/top-layer/popup");
+var _popover = require("@atlaskit/top-layer/popover");
+var _popoverSurface = require("@atlaskit/top-layer/popover-surface");
+var _useAnchorPosition = require("@atlaskit/top-layer/use-anchor-position");
+var _usePopoverId = require("@atlaskit/top-layer/use-popover-id");
+var _useWidthFromAnchor = require("@atlaskit/top-layer/use-width-from-anchor");
 var _topLayerBridge = require("./internal/top-layer-bridge");
 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); }
 var contentOverflowStyles = {
@@ -39,6 +44,7 @@ var EMPTY_STYLE = {};
  * Gated behind the `platform-dst-top-layer` feature flag.
  */
 var PopupTopLayer = exports.PopupTopLayer = /*#__PURE__*/(0, _react.memo)(function PopupTopLayer(_ref) {
+  var _roleProps$role;
   var xcss = _ref.xcss,
     isOpen = _ref.isOpen,
     providedId = _ref.id,
@@ -73,12 +79,14 @@ var PopupTopLayer = exports.PopupTopLayer = /*#__PURE__*/(0, _react.memo)(functi
     shouldFitViewport = _ref.shouldFitViewport,
     _appearance = _ref.appearance;
   var triggerRef = (0, _react.useRef)(null);
+  var popoverRef = (0, _react.useRef)(null);
   var popupContainerRef = (0, _react.useRef)(null);
   var _useState = (0, _react.useState)(null),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     setInitialFocusRef = _useState2[1];
+  var popoverId = (0, _usePopoverId.usePopoverId)();
 
-  // ── Placement conversion ──
+  // Placement conversion.
   // Legacy `offset` is the popper `[along, away]` tuple; `fromLegacyPlacement`
   // folds it into the new `placement.offset` shape so it travels with placement.
   var topLayerPlacement = (0, _react.useMemo)(function () {
@@ -87,14 +95,24 @@ var PopupTopLayer = exports.PopupTopLayer = /*#__PURE__*/(0, _react.memo)(functi
       offset: offsetProp
     });
   }, [placement, offsetProp]);
+  (0, _useAnchorPosition.useAnchorPosition)({
+    anchorRef: triggerRef,
+    popoverRef: popoverRef,
+    placement: topLayerPlacement
+  });
+  (0, _useWidthFromAnchor.useWidthFromAnchor)({
+    mode: shouldFitContainer ? 'match-anchor' : 'none',
+    popoverRef: popoverRef,
+    anchorRef: triggerRef
+  });
 
-  // ── onClose bridge ──
+  // onClose bridge.
   // Translates top-layer's { reason: TPopoverCloseReason } into legacy
   // onClose(event, currentLevel?) by synthesizing DOM events.
   //
   // Focus restoration is handled natively by the Popover API:
-  //   - Escape → browser restores focus to the trigger automatically
-  //   - Click-outside → browser does NOT restore (correct behavior)
+  //   - Escape: browser restores focus to the trigger automatically
+  //   - Click-outside: browser does NOT restore (correct behavior)
   // No manual triggerRef.current?.focus() is needed.
   var handleOnClose = (0, _react.useCallback)(function (_ref2) {
     var reason = _ref2.reason;
@@ -106,9 +124,9 @@ var PopupTopLayer = exports.PopupTopLayer = /*#__PURE__*/(0, _react.memo)(functi
     }));
   }, [onClose]);
 
-  // ── Content render-prop bridge ──
+  // Content render-prop bridge.
   // Legacy content() receives { isOpen, update, setInitialFocusRef, onClose }.
-  // update is a no-op — CSS Anchor Positioning self-updates.
+  // update is a no-op because CSS Anchor Positioning self-updates.
   var contentProps = (0, _react.useMemo)(function () {
     return {
       isOpen: isOpen,
@@ -118,62 +136,50 @@ var PopupTopLayer = exports.PopupTopLayer = /*#__PURE__*/(0, _react.memo)(functi
     };
   }, [isOpen, onClose]);
 
-  // ── Role mapping ──
-  // Build the role/label props for PopupContent.
+  // Role mapping.
+  // Build the role/label props for Popover.
   // Roles requiring accessible names must have label or labelledBy.
   var roleProps = (0, _topLayerBridge.useRoleProps)({
     role: role,
     label: label,
     titleId: titleId
   });
+  var ariaAttributes = (0, _getAriaForTrigger.getAriaForTrigger)({
+    role: (_roleProps$role = roleProps.role) !== null && _roleProps$role !== void 0 ? _roleProps$role : 'dialog',
+    isOpen: isOpen,
+    popoverId: popoverId
+  });
 
   // Narrow to ForwardRefExoticComponent so JSX accepts the ref prop.
   // All popupComponent implementations use forwardRef per the PopupComponentProps contract.
   var Container = PopupContainer;
-  return /*#__PURE__*/React.createElement(_popup.Popup, {
-    placement: topLayerPlacement,
-    onClose: handleOnClose,
-    testId: testId
-  }, /*#__PURE__*/React.createElement(_popup.Popup.TriggerFunction, null, function (_ref3) {
-    var _ref4 = _ref3.ref,
-      _toggle = _ref3.toggle,
-      ariaAttributes = _ref3.ariaAttributes,
-      popoverId = _ref3.popoverId;
-    // Map to legacy TriggerProps
-    var triggerProps = {
-      ref: function ref(node) {
-        triggerRef.current = node;
-        if (typeof _ref4 === 'function') {
-          _ref4(node);
-        }
-      },
-      'aria-controls': isOpen ? providedId !== null && providedId !== void 0 ? providedId : popoverId : undefined,
-      // Use ariaAttributes['aria-expanded'] (which comes from `@atlaskit/top-layer`), rather than
-      // `isOpen` directly. `@atlaskit/top-layer` tracks the full animation lifecycle via
-      // TPopupState and only goes false after the exit animation completes, so:
-      //   - Screen readers don't announce the popup as closed while it is still visible.
-      //   - Consumers relying on aria-expanded to show/hide trigger UI don't lose the
-      //     trigger (popup anchor) before the animation finishes.
-      'aria-expanded': ariaAttributes['aria-expanded'],
-      // FUDGE(top-layer-api): cast to the narrow public TriggerProps['aria-haspopup'] union.
-      // `@atlaskit/top-layer` derives `aria-haspopup` from the content's role and types it
-      // as the wider WAI-ARIA union (boolean | 'dialog' | 'menu' | 'listbox' | 'tree' | 'grid').
-      // We keep the public popup TriggerProps narrow (boolean | 'dialog') because the
-      // top-layer API surface is not yet settled. Widening adopter types now would commit
-      // us to a public surface we may revisit. The runtime value is unchanged; only the
-      // TypeScript-visible type is narrowed at this boundary.
-      // REMOVE WHEN: the top-layer public API is committed (see
-      // packages/design-system/top-layer/notes/decisions/migration-roadmap.md "Open API
-      // decisions deferred to a follow-up PR") and a follow-up `minor` PR widens
-      // `TriggerProps['aria-haspopup']` to match.
-      'aria-haspopup': ariaAttributes['aria-haspopup']
-    };
-    return trigger(triggerProps);
-  }), /*#__PURE__*/React.createElement(_popup.Popup.Content, (0, _extends2.default)({}, roleProps, {
+
+  // Map to legacy TriggerProps.
+  var triggerProps = {
+    ref: function ref(node) {
+      triggerRef.current = node;
+    },
+    'aria-controls': providedId !== null && providedId !== void 0 ? providedId : popoverId,
+    // `aria-expanded` reflects current open state.
+    'aria-expanded': ariaAttributes['aria-expanded'],
+    // FUDGE(top-layer-api): cast to the narrow public TriggerProps['aria-haspopup'] union.
+    // `getAriaForTrigger` derives `aria-haspopup` from the content's role and types it
+    // as the wider WAI-ARIA union (boolean | 'dialog' | 'menu' | 'listbox' | 'tree' | 'grid').
+    // We keep the public popup TriggerProps narrow (boolean | 'dialog') because the
+    // top-layer API surface is not yet settled. Widening adopter types now would commit
+    // us to a public surface we may revisit. The runtime value is unchanged; only the
+    // TypeScript-visible type is narrowed at this boundary.
+    'aria-haspopup': ariaAttributes['aria-haspopup']
+  };
+  return /*#__PURE__*/React.createElement(_react.Fragment, null, trigger(triggerProps), /*#__PURE__*/React.createElement(_popover.Popover, (0, _extends2.default)({
+    ref: popoverRef,
+    id: providedId !== null && providedId !== void 0 ? providedId : popoverId
+  }, roleProps, {
     isOpen: isOpen,
+    onClose: handleOnClose,
     animate: animation,
-    testId: testId && "".concat(testId, "--content"),
-    widthFromAnchor: shouldFitContainer ? 'match-anchor' : 'none'
+    placement: topLayerPlacement,
+    testId: testId && "".concat(testId, "--content")
   }), Container ? /*#__PURE__*/React.createElement(Container, {
     ref: popupContainerRef,
     style: EMPTY_STYLE,
@@ -182,7 +188,7 @@ var PopupTopLayer = exports.PopupTopLayer = /*#__PURE__*/(0, _react.memo)(functi
     "data-testid": testId,
     tabIndex: autoFocus ? -1 : undefined,
     xcss: xcss
-  }, content(contentProps)) : /*#__PURE__*/React.createElement(_popup.Popup.Surface, null, /*#__PURE__*/React.createElement("div", {
+  }, content(contentProps)) : /*#__PURE__*/React.createElement(_popoverSurface.PopoverSurface, null, /*#__PURE__*/React.createElement("div", {
     className: (0, _runtime.ax)([contentOverflowStyles[shouldFitViewport ? 'fitViewport' : 'default']])
   }, content(contentProps)))));
 });

package/dist/es2019/compositional/popup-content-top-layer.js

@@ -9,7 +9,7 @@ import { slideAndFade } from '@atlaskit/top-layer/animations';
 import { createPopoverCloseEvent } from '@atlaskit/top-layer/create-close-event';
 import { fromLegacyPlacement } from '@atlaskit/top-layer/placement-map';
 import { Popover } from '@atlaskit/top-layer/popover';
-import { PopupSurface } from '@atlaskit/top-layer/popup-surface';
+import { PopoverSurface } from '@atlaskit/top-layer/popover-surface';
 import { useAnchorPosition } from '@atlaskit/top-layer/use-anchor-position';
 import { useWidthFromAnchor } from '@atlaskit/top-layer/use-width-from-anchor';
 import { useRoleProps } from '../internal/top-layer-bridge';
@@ -144,7 +144,7 @@ export function PopupContentTopLayer({
     "data-testid": testId,
     tabIndex: autoFocus ? -1 : undefined,
     xcss: xcss
-  }, children(contentProps)) : /*#__PURE__*/React.createElement(PopupSurface, null, /*#__PURE__*/React.createElement("div", {
+  }, children(contentProps)) : /*#__PURE__*/React.createElement(PopoverSurface, null, /*#__PURE__*/React.createElement("div", {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
     className: ax([shouldFitViewport && "_1reo1wug _18m91wug", ax([xcss])])
   }, children(contentProps))));

package/dist/es2019/popup-top-layer.js

@@ -3,12 +3,17 @@ import _extends from "@babel/runtime/helpers/extends";
 import "./popup-top-layer.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
-import { memo, useCallback, useMemo, useRef, useState } from 'react';
+import { Fragment, memo, useCallback, useMemo, useRef, useState } from 'react';
 import noop from '@atlaskit/ds-lib/noop';
 import { slideAndFade } from '@atlaskit/top-layer/animations';
 import { createPopoverCloseEvent } from '@atlaskit/top-layer/create-close-event';
+import { getAriaForTrigger } from '@atlaskit/top-layer/get-aria-for-trigger';
 import { fromLegacyPlacement } from '@atlaskit/top-layer/placement-map';
-import { Popup } from '@atlaskit/top-layer/popup';
+import { Popover } from '@atlaskit/top-layer/popover';
+import { PopoverSurface } from '@atlaskit/top-layer/popover-surface';
+import { useAnchorPosition } from '@atlaskit/top-layer/use-anchor-position';
+import { usePopoverId } from '@atlaskit/top-layer/use-popover-id';
+import { useWidthFromAnchor } from '@atlaskit/top-layer/use-width-from-anchor';
 import { useRoleProps } from './internal/top-layer-bridge';
 const contentOverflowStyles = {
   fitViewport: "_1reo1wug _18m91wug",
@@ -49,9 +54,9 @@ export const PopupTopLayer = /*#__PURE__*/memo(function PopupTopLayer({
   role,
   label,
   titleId,
-  // ── No-op props ──
+  // No-op props.
   // These props are accepted for API compatibility but have no effect
-  // in the top-layer path. Each is documented with why it's unnecessary.
+  // in the top-layer path. Each is documented with why it is unnecessary.
 
   // top-layer: stacking managed by browser top layer. zIndex is a no-op.
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -84,25 +89,38 @@ export const PopupTopLayer = /*#__PURE__*/memo(function PopupTopLayer({
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   appearance: _appearance
 }) {
+  var _roleProps$role;
   const triggerRef = useRef(null);
+  const popoverRef = useRef(null);
   const popupContainerRef = useRef(null);
   const [, setInitialFocusRef] = useState(null);
+  const popoverId = usePopoverId();
 
-  // ── Placement conversion ──
+  // Placement conversion.
   // Legacy `offset` is the popper `[along, away]` tuple; `fromLegacyPlacement`
   // folds it into the new `placement.offset` shape so it travels with placement.
   const topLayerPlacement = useMemo(() => fromLegacyPlacement({
     legacy: placement,
     offset: offsetProp
   }), [placement, offsetProp]);
+  useAnchorPosition({
+    anchorRef: triggerRef,
+    popoverRef,
+    placement: topLayerPlacement
+  });
+  useWidthFromAnchor({
+    mode: shouldFitContainer ? 'match-anchor' : 'none',
+    popoverRef,
+    anchorRef: triggerRef
+  });
 
-  // ── onClose bridge ──
+  // onClose bridge.
   // Translates top-layer's { reason: TPopoverCloseReason } into legacy
   // onClose(event, currentLevel?) by synthesizing DOM events.
   //
   // Focus restoration is handled natively by the Popover API:
-  //   - Escape → browser restores focus to the trigger automatically
-  //   - Click-outside → browser does NOT restore (correct behavior)
+  //   - Escape: browser restores focus to the trigger automatically
+  //   - Click-outside: browser does NOT restore (correct behavior)
   // No manual triggerRef.current?.focus() is needed.
   const handleOnClose = useCallback(({
     reason
@@ -115,9 +133,9 @@ export const PopupTopLayer = /*#__PURE__*/memo(function PopupTopLayer({
     }));
   }, [onClose]);
 
-  // ── Content render-prop bridge ──
+  // Content render-prop bridge.
   // Legacy content() receives { isOpen, update, setInitialFocusRef, onClose }.
-  // update is a no-op — CSS Anchor Positioning self-updates.
+  // update is a no-op because CSS Anchor Positioning self-updates.
   const contentProps = useMemo(() => ({
     isOpen: isOpen,
     update: noop,
@@ -125,63 +143,50 @@ export const PopupTopLayer = /*#__PURE__*/memo(function PopupTopLayer({
     setInitialFocusRef
   }), [isOpen, onClose]);
 
-  // ── Role mapping ──
-  // Build the role/label props for PopupContent.
+  // Role mapping.
+  // Build the role/label props for Popover.
   // Roles requiring accessible names must have label or labelledBy.
   const roleProps = useRoleProps({
     role,
     label,
     titleId
   });
+  const ariaAttributes = getAriaForTrigger({
+    role: (_roleProps$role = roleProps.role) !== null && _roleProps$role !== void 0 ? _roleProps$role : 'dialog',
+    isOpen,
+    popoverId
+  });
 
   // Narrow to ForwardRefExoticComponent so JSX accepts the ref prop.
   // All popupComponent implementations use forwardRef per the PopupComponentProps contract.
   const Container = PopupContainer;
-  return /*#__PURE__*/React.createElement(Popup, {
-    placement: topLayerPlacement,
-    onClose: handleOnClose,
-    testId: testId
-  }, /*#__PURE__*/React.createElement(Popup.TriggerFunction, null, ({
-    ref,
-    toggle: _toggle,
-    ariaAttributes,
-    popoverId
-  }) => {
-    // Map to legacy TriggerProps
-    const triggerProps = {
-      ref: node => {
-        triggerRef.current = node;
-        if (typeof ref === 'function') {
-          ref(node);
-        }
-      },
-      'aria-controls': isOpen ? providedId !== null && providedId !== void 0 ? providedId : popoverId : undefined,
-      // Use ariaAttributes['aria-expanded'] (which comes from `@atlaskit/top-layer`), rather than
-      // `isOpen` directly. `@atlaskit/top-layer` tracks the full animation lifecycle via
-      // TPopupState and only goes false after the exit animation completes, so:
-      //   - Screen readers don't announce the popup as closed while it is still visible.
-      //   - Consumers relying on aria-expanded to show/hide trigger UI don't lose the
-      //     trigger (popup anchor) before the animation finishes.
-      'aria-expanded': ariaAttributes['aria-expanded'],
-      // FUDGE(top-layer-api): cast to the narrow public TriggerProps['aria-haspopup'] union.
-      // `@atlaskit/top-layer` derives `aria-haspopup` from the content's role and types it
-      // as the wider WAI-ARIA union (boolean | 'dialog' | 'menu' | 'listbox' | 'tree' | 'grid').
-      // We keep the public popup TriggerProps narrow (boolean | 'dialog') because the
-      // top-layer API surface is not yet settled. Widening adopter types now would commit
-      // us to a public surface we may revisit. The runtime value is unchanged; only the
-      // TypeScript-visible type is narrowed at this boundary.
-      // REMOVE WHEN: the top-layer public API is committed (see
-      // packages/design-system/top-layer/notes/decisions/migration-roadmap.md "Open API
-      // decisions deferred to a follow-up PR") and a follow-up `minor` PR widens
-      // `TriggerProps['aria-haspopup']` to match.
-      'aria-haspopup': ariaAttributes['aria-haspopup']
-    };
-    return trigger(triggerProps);
-  }), /*#__PURE__*/React.createElement(Popup.Content, _extends({}, roleProps, {
+
+  // Map to legacy TriggerProps.
+  const triggerProps = {
+    ref: node => {
+      triggerRef.current = node;
+    },
+    'aria-controls': providedId !== null && providedId !== void 0 ? providedId : popoverId,
+    // `aria-expanded` reflects current open state.
+    'aria-expanded': ariaAttributes['aria-expanded'],
+    // FUDGE(top-layer-api): cast to the narrow public TriggerProps['aria-haspopup'] union.
+    // `getAriaForTrigger` derives `aria-haspopup` from the content's role and types it
+    // as the wider WAI-ARIA union (boolean | 'dialog' | 'menu' | 'listbox' | 'tree' | 'grid').
+    // We keep the public popup TriggerProps narrow (boolean | 'dialog') because the
+    // top-layer API surface is not yet settled. Widening adopter types now would commit
+    // us to a public surface we may revisit. The runtime value is unchanged; only the
+    // TypeScript-visible type is narrowed at this boundary.
+    'aria-haspopup': ariaAttributes['aria-haspopup']
+  };
+  return /*#__PURE__*/React.createElement(Fragment, null, trigger(triggerProps), /*#__PURE__*/React.createElement(Popover, _extends({
+    ref: popoverRef,
+    id: providedId !== null && providedId !== void 0 ? providedId : popoverId
+  }, roleProps, {
     isOpen: isOpen,
+    onClose: handleOnClose,
     animate: animation,
-    testId: testId && `${testId}--content`,
-    widthFromAnchor: shouldFitContainer ? 'match-anchor' : 'none'
+    placement: topLayerPlacement,
+    testId: testId && `${testId}--content`
   }), Container ? /*#__PURE__*/React.createElement(Container, {
     ref: popupContainerRef,
     style: EMPTY_STYLE,
@@ -190,7 +195,7 @@ export const PopupTopLayer = /*#__PURE__*/memo(function PopupTopLayer({
     "data-testid": testId,
     tabIndex: autoFocus ? -1 : undefined,
     xcss: xcss
-  }, content(contentProps)) : /*#__PURE__*/React.createElement(Popup.Surface, null, /*#__PURE__*/React.createElement("div", {
+  }, content(contentProps)) : /*#__PURE__*/React.createElement(PopoverSurface, null, /*#__PURE__*/React.createElement("div", {
     className: ax([contentOverflowStyles[shouldFitViewport ? 'fitViewport' : 'default']])
   }, content(contentProps)))));
 });

package/dist/esm/compositional/popup-content-top-layer.js

@@ -10,7 +10,7 @@ import { slideAndFade } from '@atlaskit/top-layer/animations';
 import { createPopoverCloseEvent } from '@atlaskit/top-layer/create-close-event';
 import { fromLegacyPlacement } from '@atlaskit/top-layer/placement-map';
 import { Popover } from '@atlaskit/top-layer/popover';
-import { PopupSurface } from '@atlaskit/top-layer/popup-surface';
+import { PopoverSurface } from '@atlaskit/top-layer/popover-surface';
 import { useAnchorPosition } from '@atlaskit/top-layer/use-anchor-position';
 import { useWidthFromAnchor } from '@atlaskit/top-layer/use-width-from-anchor';
 import { useRoleProps } from '../internal/top-layer-bridge';
@@ -130,7 +130,7 @@ export function PopupContentTopLayer(_ref) {
     "data-testid": testId,
     tabIndex: autoFocus ? -1 : undefined,
     xcss: xcss
-  }, children(contentProps)) : /*#__PURE__*/React.createElement(PopupSurface, null, /*#__PURE__*/React.createElement("div", {
+  }, children(contentProps)) : /*#__PURE__*/React.createElement(PopoverSurface, null, /*#__PURE__*/React.createElement("div", {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
     className: ax([shouldFitViewport && "_1reo1wug _18m91wug", ax([xcss])])
   }, children(contentProps))));

package/dist/esm/popup-top-layer.js

@@ -4,12 +4,17 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import "./popup-top-layer.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
-import { memo, useCallback, useMemo, useRef, useState } from 'react';
+import { Fragment, memo, useCallback, useMemo, useRef, useState } from 'react';
 import noop from '@atlaskit/ds-lib/noop';
 import { slideAndFade } from '@atlaskit/top-layer/animations';
 import { createPopoverCloseEvent } from '@atlaskit/top-layer/create-close-event';
+import { getAriaForTrigger } from '@atlaskit/top-layer/get-aria-for-trigger';
 import { fromLegacyPlacement } from '@atlaskit/top-layer/placement-map';
-import { Popup } from '@atlaskit/top-layer/popup';
+import { Popover } from '@atlaskit/top-layer/popover';
+import { PopoverSurface } from '@atlaskit/top-layer/popover-surface';
+import { useAnchorPosition } from '@atlaskit/top-layer/use-anchor-position';
+import { usePopoverId } from '@atlaskit/top-layer/use-popover-id';
+import { useWidthFromAnchor } from '@atlaskit/top-layer/use-width-from-anchor';
 import { useRoleProps } from './internal/top-layer-bridge';
 var contentOverflowStyles = {
   fitViewport: "_1reo1wug _18m91wug",
@@ -30,6 +35,7 @@ var EMPTY_STYLE = {};
  * Gated behind the `platform-dst-top-layer` feature flag.
  */
 export var PopupTopLayer = /*#__PURE__*/memo(function PopupTopLayer(_ref) {
+  var _roleProps$role;
   var xcss = _ref.xcss,
     isOpen = _ref.isOpen,
     providedId = _ref.id,
@@ -64,12 +70,14 @@ export var PopupTopLayer = /*#__PURE__*/memo(function PopupTopLayer(_ref) {
     shouldFitViewport = _ref.shouldFitViewport,
     _appearance = _ref.appearance;
   var triggerRef = useRef(null);
+  var popoverRef = useRef(null);
   var popupContainerRef = useRef(null);
   var _useState = useState(null),
     _useState2 = _slicedToArray(_useState, 2),
     setInitialFocusRef = _useState2[1];
+  var popoverId = usePopoverId();
 
-  // ── Placement conversion ──
+  // Placement conversion.
   // Legacy `offset` is the popper `[along, away]` tuple; `fromLegacyPlacement`
   // folds it into the new `placement.offset` shape so it travels with placement.
   var topLayerPlacement = useMemo(function () {
@@ -78,14 +86,24 @@ export var PopupTopLayer = /*#__PURE__*/memo(function PopupTopLayer(_ref) {
       offset: offsetProp
     });
   }, [placement, offsetProp]);
+  useAnchorPosition({
+    anchorRef: triggerRef,
+    popoverRef: popoverRef,
+    placement: topLayerPlacement
+  });
+  useWidthFromAnchor({
+    mode: shouldFitContainer ? 'match-anchor' : 'none',
+    popoverRef: popoverRef,
+    anchorRef: triggerRef
+  });
 
-  // ── onClose bridge ──
+  // onClose bridge.
   // Translates top-layer's { reason: TPopoverCloseReason } into legacy
   // onClose(event, currentLevel?) by synthesizing DOM events.
   //
   // Focus restoration is handled natively by the Popover API:
-  //   - Escape → browser restores focus to the trigger automatically
-  //   - Click-outside → browser does NOT restore (correct behavior)
+  //   - Escape: browser restores focus to the trigger automatically
+  //   - Click-outside: browser does NOT restore (correct behavior)
   // No manual triggerRef.current?.focus() is needed.
   var handleOnClose = useCallback(function (_ref2) {
     var reason = _ref2.reason;
@@ -97,9 +115,9 @@ export var PopupTopLayer = /*#__PURE__*/memo(function PopupTopLayer(_ref) {
     }));
   }, [onClose]);
 
-  // ── Content render-prop bridge ──
+  // Content render-prop bridge.
   // Legacy content() receives { isOpen, update, setInitialFocusRef, onClose }.
-  // update is a no-op — CSS Anchor Positioning self-updates.
+  // update is a no-op because CSS Anchor Positioning self-updates.
   var contentProps = useMemo(function () {
     return {
       isOpen: isOpen,
@@ -109,62 +127,50 @@ export var PopupTopLayer = /*#__PURE__*/memo(function PopupTopLayer(_ref) {
     };
   }, [isOpen, onClose]);
 
-  // ── Role mapping ──
-  // Build the role/label props for PopupContent.
+  // Role mapping.
+  // Build the role/label props for Popover.
   // Roles requiring accessible names must have label or labelledBy.
   var roleProps = useRoleProps({
     role: role,
     label: label,
     titleId: titleId
   });
+  var ariaAttributes = getAriaForTrigger({
+    role: (_roleProps$role = roleProps.role) !== null && _roleProps$role !== void 0 ? _roleProps$role : 'dialog',
+    isOpen: isOpen,
+    popoverId: popoverId
+  });
 
   // Narrow to ForwardRefExoticComponent so JSX accepts the ref prop.
   // All popupComponent implementations use forwardRef per the PopupComponentProps contract.
   var Container = PopupContainer;
-  return /*#__PURE__*/React.createElement(Popup, {
-    placement: topLayerPlacement,
-    onClose: handleOnClose,
-    testId: testId
-  }, /*#__PURE__*/React.createElement(Popup.TriggerFunction, null, function (_ref3) {
-    var _ref4 = _ref3.ref,
-      _toggle = _ref3.toggle,
-      ariaAttributes = _ref3.ariaAttributes,
-      popoverId = _ref3.popoverId;
-    // Map to legacy TriggerProps
-    var triggerProps = {
-      ref: function ref(node) {
-        triggerRef.current = node;
-        if (typeof _ref4 === 'function') {
-          _ref4(node);
-        }
-      },
-      'aria-controls': isOpen ? providedId !== null && providedId !== void 0 ? providedId : popoverId : undefined,
-      // Use ariaAttributes['aria-expanded'] (which comes from `@atlaskit/top-layer`), rather than
-      // `isOpen` directly. `@atlaskit/top-layer` tracks the full animation lifecycle via
-      // TPopupState and only goes false after the exit animation completes, so:
-      //   - Screen readers don't announce the popup as closed while it is still visible.
-      //   - Consumers relying on aria-expanded to show/hide trigger UI don't lose the
-      //     trigger (popup anchor) before the animation finishes.
-      'aria-expanded': ariaAttributes['aria-expanded'],
-      // FUDGE(top-layer-api): cast to the narrow public TriggerProps['aria-haspopup'] union.
-      // `@atlaskit/top-layer` derives `aria-haspopup` from the content's role and types it
-      // as the wider WAI-ARIA union (boolean | 'dialog' | 'menu' | 'listbox' | 'tree' | 'grid').
-      // We keep the public popup TriggerProps narrow (boolean | 'dialog') because the
-      // top-layer API surface is not yet settled. Widening adopter types now would commit
-      // us to a public surface we may revisit. The runtime value is unchanged; only the
-      // TypeScript-visible type is narrowed at this boundary.
-      // REMOVE WHEN: the top-layer public API is committed (see
-      // packages/design-system/top-layer/notes/decisions/migration-roadmap.md "Open API
-      // decisions deferred to a follow-up PR") and a follow-up `minor` PR widens
-      // `TriggerProps['aria-haspopup']` to match.
-      'aria-haspopup': ariaAttributes['aria-haspopup']
-    };
-    return trigger(triggerProps);
-  }), /*#__PURE__*/React.createElement(Popup.Content, _extends({}, roleProps, {
+
+  // Map to legacy TriggerProps.
+  var triggerProps = {
+    ref: function ref(node) {
+      triggerRef.current = node;
+    },
+    'aria-controls': providedId !== null && providedId !== void 0 ? providedId : popoverId,
+    // `aria-expanded` reflects current open state.
+    'aria-expanded': ariaAttributes['aria-expanded'],
+    // FUDGE(top-layer-api): cast to the narrow public TriggerProps['aria-haspopup'] union.
+    // `getAriaForTrigger` derives `aria-haspopup` from the content's role and types it
+    // as the wider WAI-ARIA union (boolean | 'dialog' | 'menu' | 'listbox' | 'tree' | 'grid').
+    // We keep the public popup TriggerProps narrow (boolean | 'dialog') because the
+    // top-layer API surface is not yet settled. Widening adopter types now would commit
+    // us to a public surface we may revisit. The runtime value is unchanged; only the
+    // TypeScript-visible type is narrowed at this boundary.
+    'aria-haspopup': ariaAttributes['aria-haspopup']
+  };
+  return /*#__PURE__*/React.createElement(Fragment, null, trigger(triggerProps), /*#__PURE__*/React.createElement(Popover, _extends({
+    ref: popoverRef,
+    id: providedId !== null && providedId !== void 0 ? providedId : popoverId
+  }, roleProps, {
     isOpen: isOpen,
+    onClose: handleOnClose,
     animate: animation,
-    testId: testId && "".concat(testId, "--content"),
-    widthFromAnchor: shouldFitContainer ? 'match-anchor' : 'none'
+    placement: topLayerPlacement,
+    testId: testId && "".concat(testId, "--content")
   }), Container ? /*#__PURE__*/React.createElement(Container, {
     ref: popupContainerRef,
     style: EMPTY_STYLE,
@@ -173,7 +179,7 @@ export var PopupTopLayer = /*#__PURE__*/memo(function PopupTopLayer(_ref) {
     "data-testid": testId,
     tabIndex: autoFocus ? -1 : undefined,
     xcss: xcss
-  }, content(contentProps)) : /*#__PURE__*/React.createElement(Popup.Surface, null, /*#__PURE__*/React.createElement("div", {
+  }, content(contentProps)) : /*#__PURE__*/React.createElement(PopoverSurface, null, /*#__PURE__*/React.createElement("div", {
     className: ax([contentOverflowStyles[shouldFitViewport ? 'fitViewport' : 'default']])
   }, content(contentProps)))));
 });

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/popup",
-	"version": "4.23.1",
+	"version": "4.23.2",
 	"description": "A popup displays brief content in an overlay.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -41,14 +41,14 @@
 	"dependencies": {
 		"@atlaskit/css": "^0.19.0",
 		"@atlaskit/ds-lib": "^7.0.0",
-		"@atlaskit/layering": "^3.7.0",
+		"@atlaskit/layering": "^3.8.0",
 		"@atlaskit/motion": "^6.2.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/popper": "^7.2.0",
 		"@atlaskit/portal": "^5.5.0",
 		"@atlaskit/primitives": "^19.0.0",
-		"@atlaskit/tokens": "^13.1.0",
-		"@atlaskit/top-layer": "^0.13.0",
+		"@atlaskit/tokens": "^13.3.0",
+		"@atlaskit/top-layer": "^0.14.0",
 		"@babel/runtime": "^7.0.0",
 		"@compiled/react": "^0.20.0",
 		"bind-event-listener": "^3.0.0",