@atlaskit/popup 4.16.6 → 4.18.0

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

@@ -0,0 +1,185 @@
+/* popup-top-layer.tsx generated by @compiled/babel-plugin v0.39.1 */
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PopupTopLayer = void 0;
+require("./popup-top-layer.compiled.css");
+var _react = _interopRequireWildcard(require("react"));
+var React = _react;
+var _runtime = require("@compiled/react/runtime");
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+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 _placementMap = require("@atlaskit/top-layer/placement-map");
+var _popup = require("@atlaskit/top-layer/popup");
+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 = {
+  fitViewport: "_1reo1wug _18m91wug",
+  default: ""
+};
+var animation = (0, _animations.slideAndFade)();
+
+// Top-layer positioning is handled by CSS Anchor Positioning, not inline styles.
+var EMPTY_STYLE = {};
+
+/**
+ * Top-layer implementation of Popup.
+ *
+ * Replaces the legacy @atlaskit/popup rendering pipeline
+ * (Popper.js + Portal + focus-trap + @atlaskit/layering)
+ * with the native Popover API + CSS Anchor Positioning via @atlaskit/top-layer.
+ *
+ * Gated behind the `platform-dst-top-layer` feature flag.
+ */
+var PopupTopLayer = exports.PopupTopLayer = /*#__PURE__*/(0, _react.memo)(function PopupTopLayer(_ref) {
+  var xcss = _ref.xcss,
+    isOpen = _ref.isOpen,
+    providedId = _ref.id,
+    offsetProp = _ref.offset,
+    testId = _ref.testId,
+    trigger = _ref.trigger,
+    content = _ref.content,
+    onClose = _ref.onClose,
+    _ref$placement = _ref.placement,
+    placement = _ref$placement === void 0 ? 'auto' : _ref$placement,
+    _fallbackPlacements = _ref.fallbackPlacements,
+    _ref$shouldFlip = _ref.shouldFlip,
+    _shouldFlip = _ref$shouldFlip === void 0 ? true : _ref$shouldFlip,
+    PopupContainer = _ref.popupComponent,
+    _ref$autoFocus = _ref.autoFocus,
+    autoFocus = _ref$autoFocus === void 0 ? true : _ref$autoFocus,
+    _ref$shouldFitContain = _ref.shouldFitContainer,
+    shouldFitContainer = _ref$shouldFitContain === void 0 ? false : _ref$shouldFitContain,
+    _ref$shouldReturnFocu = _ref.shouldReturnFocus,
+    _shouldReturnFocus = _ref$shouldReturnFocu === void 0 ? true : _ref$shouldReturnFocu,
+    role = _ref.role,
+    label = _ref.label,
+    titleId = _ref.titleId,
+    _zIndex = _ref.zIndex,
+    _shouldRenderToParent = _ref.shouldRenderToParent,
+    _strategy = _ref.strategy,
+    _modifiers = _ref.modifiers,
+    _boundary = _ref.boundary,
+    _rootBoundary = _ref.rootBoundary,
+    _shouldUseCaptureOnOutsideClick = _ref.shouldUseCaptureOnOutsideClick,
+    _shouldDisableFocusLock = _ref.shouldDisableFocusLock,
+    shouldFitViewport = _ref.shouldFitViewport,
+    _appearance = _ref.appearance;
+  var triggerRef = (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];
+
+  // ── 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 () {
+    return (0, _placementMap.fromLegacyPlacement)({
+      legacy: placement,
+      offset: offsetProp
+    });
+  }, [placement, offsetProp]);
+
+  // ── 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)
+  // No manual triggerRef.current?.focus() is needed.
+  var handleOnClose = (0, _react.useCallback)(function (_ref2) {
+    var reason = _ref2.reason;
+    if (!onClose) {
+      return;
+    }
+    onClose((0, _createCloseEvent.createPopoverCloseEvent)({
+      reason: reason
+    }));
+  }, [onClose]);
+
+  // ── Content render-prop bridge ──
+  // Legacy content() receives { isOpen, update, setInitialFocusRef, onClose }.
+  // update is a no-op — CSS Anchor Positioning self-updates.
+  var contentProps = (0, _react.useMemo)(function () {
+    return {
+      isOpen: isOpen,
+      update: _noop.default,
+      onClose: onClose,
+      setInitialFocusRef: setInitialFocusRef
+    };
+  }, [isOpen, onClose]);
+
+  // ── Role mapping ──
+  // Build the role/label props for PopupContent.
+  // Roles requiring accessible names must have label or labelledBy.
+  var roleProps = (0, _topLayerBridge.useRoleProps)({
+    role: role,
+    label: label,
+    titleId: titleId
+  });
+
+  // Sync controlled isOpen with internal state
+  var effectiveIsOpen = isOpen;
+
+  // 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': effectiveIsOpen ? providedId !== null && providedId !== void 0 ? providedId : popoverId : undefined,
+      'aria-expanded': effectiveIsOpen,
+      // 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, {
+    isOpen: effectiveIsOpen,
+    animate: animation,
+    testId: testId && "".concat(testId, "--content"),
+    width: shouldFitContainer ? 'trigger' : 'content'
+  }), Container ? /*#__PURE__*/React.createElement(Container, {
+    ref: popupContainerRef,
+    style: EMPTY_STYLE,
+    id: providedId,
+    "data-placement": placement,
+    "data-testid": testId,
+    tabIndex: autoFocus ? -1 : undefined,
+    xcss: xcss
+  }, content(contentProps)) : /*#__PURE__*/React.createElement(_popup.Popup.Surface, null, /*#__PURE__*/React.createElement("div", {
+    className: (0, _runtime.ax)([contentOverflowStyles[shouldFitViewport ? 'fitViewport' : 'default']])
+  }, content(contentProps)))));
+});

package/dist/cjs/popup.js

@@ -21,6 +21,7 @@ var _popper = require("@atlaskit/popper");
 var _portal = _interopRequireDefault(require("@atlaskit/portal"));
 var _compiled = require("@atlaskit/primitives/compiled");
 var _popperWrapper = _interopRequireDefault(require("./popper-wrapper"));
+var _popupTopLayer = require("./popup-top-layer");
 var _useAppearance = require("./use-appearance");
 var _useGetMemoizedMergedTriggerRef = require("./use-get-memoized-merged-trigger-ref");
 var _useGetMemoizedMergedTriggerRefNew = require("./use-get-memoized-merged-trigger-ref-new");
@@ -30,46 +31,46 @@ var defaultLayer = 400;
 var wrapperStyles = {
   root: "_kqswh2mm"
 };
-var Popup = exports.Popup = /*#__PURE__*/(0, _react.memo)(function (_ref) {
-  var xcss = _ref.xcss,
-    _ref$appearance = _ref.appearance,
-    inAppearance = _ref$appearance === void 0 ? 'default' : _ref$appearance,
-    isOpen = _ref.isOpen,
-    providedId = _ref.id,
-    offset = _ref.offset,
-    testId = _ref.testId,
-    trigger = _ref.trigger,
-    content = _ref.content,
-    onClose = _ref.onClose,
-    boundary = _ref.boundary,
-    _ref$rootBoundary = _ref.rootBoundary,
-    rootBoundary = _ref$rootBoundary === void 0 ? 'viewport' : _ref$rootBoundary,
-    _ref$shouldFlip = _ref.shouldFlip,
-    shouldFlip = _ref$shouldFlip === void 0 ? true : _ref$shouldFlip,
-    _ref$placement = _ref.placement,
-    placement = _ref$placement === void 0 ? 'auto' : _ref$placement,
-    fallbackPlacements = _ref.fallbackPlacements,
-    PopupContainer = _ref.popupComponent,
-    _ref$autoFocus = _ref.autoFocus,
-    autoFocus = _ref$autoFocus === void 0 ? true : _ref$autoFocus,
-    _ref$zIndex = _ref.zIndex,
-    zIndex = _ref$zIndex === void 0 ? defaultLayer : _ref$zIndex,
-    _ref$shouldUseCapture = _ref.shouldUseCaptureOnOutsideClick,
-    shouldUseCaptureOnOutsideClick = _ref$shouldUseCapture === void 0 ? false : _ref$shouldUseCapture,
-    _ref$shouldRenderToPa = _ref.shouldRenderToParent,
-    inShouldRenderToParent = _ref$shouldRenderToPa === void 0 ? false : _ref$shouldRenderToPa,
-    _ref$shouldFitContain = _ref.shouldFitContainer,
-    shouldFitContainer = _ref$shouldFitContain === void 0 ? false : _ref$shouldFitContain,
-    _ref$shouldDisableFoc = _ref.shouldDisableFocusLock,
-    shouldDisableFocusLock = _ref$shouldDisableFoc === void 0 ? false : _ref$shouldDisableFoc,
-    _ref$shouldReturnFocu = _ref.shouldReturnFocus,
-    shouldReturnFocus = _ref$shouldReturnFocu === void 0 ? true : _ref$shouldReturnFocu,
-    strategy = _ref.strategy,
-    role = _ref.role,
-    label = _ref.label,
-    titleId = _ref.titleId,
-    modifiers = _ref.modifiers,
-    shouldFitViewport = _ref.shouldFitViewport;
+var Popup = exports.Popup = /*#__PURE__*/(0, _react.memo)(function (props) {
+  var xcss = props.xcss,
+    _props$appearance = props.appearance,
+    inAppearance = _props$appearance === void 0 ? 'default' : _props$appearance,
+    isOpen = props.isOpen,
+    providedId = props.id,
+    offset = props.offset,
+    testId = props.testId,
+    trigger = props.trigger,
+    content = props.content,
+    onClose = props.onClose,
+    boundary = props.boundary,
+    _props$rootBoundary = props.rootBoundary,
+    rootBoundary = _props$rootBoundary === void 0 ? 'viewport' : _props$rootBoundary,
+    _props$shouldFlip = props.shouldFlip,
+    shouldFlip = _props$shouldFlip === void 0 ? true : _props$shouldFlip,
+    _props$placement = props.placement,
+    placement = _props$placement === void 0 ? 'auto' : _props$placement,
+    fallbackPlacements = props.fallbackPlacements,
+    PopupContainer = props.popupComponent,
+    _props$autoFocus = props.autoFocus,
+    autoFocus = _props$autoFocus === void 0 ? true : _props$autoFocus,
+    _props$zIndex = props.zIndex,
+    zIndex = _props$zIndex === void 0 ? defaultLayer : _props$zIndex,
+    _props$shouldUseCaptu = props.shouldUseCaptureOnOutsideClick,
+    shouldUseCaptureOnOutsideClick = _props$shouldUseCaptu === void 0 ? false : _props$shouldUseCaptu,
+    _props$shouldRenderTo = props.shouldRenderToParent,
+    inShouldRenderToParent = _props$shouldRenderTo === void 0 ? false : _props$shouldRenderTo,
+    _props$shouldFitConta = props.shouldFitContainer,
+    shouldFitContainer = _props$shouldFitConta === void 0 ? false : _props$shouldFitConta,
+    _props$shouldDisableF = props.shouldDisableFocusLock,
+    shouldDisableFocusLock = _props$shouldDisableF === void 0 ? false : _props$shouldDisableF,
+    _props$shouldReturnFo = props.shouldReturnFocus,
+    shouldReturnFocus = _props$shouldReturnFo === void 0 ? true : _props$shouldReturnFo,
+    strategy = props.strategy,
+    role = props.role,
+    label = props.label,
+    titleId = props.titleId,
+    modifiers = props.modifiers,
+    shouldFitViewport = props.shouldFitViewport;
   var _useState = (0, _react.useState)(null),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     triggerRef = _useState2[0],
@@ -92,10 +93,26 @@ var Popup = exports.Popup = /*#__PURE__*/(0, _react.memo)(function (_ref) {
     onClose: handleOpenLayerObserverCloseSignal,
     type: 'popup'
   });
+
+  // Top-layer rendering path: native Popover API via @atlaskit/top-layer
+  if ((0, _platformFeatureFlags.fg)('platform-dst-top-layer')) {
+    // Pass the original props object to preserve the discriminated union
+    // (shouldFitContainer: true vs false) that is lost after destructuring.
+    return /*#__PURE__*/React.createElement(_popupTopLayer.PopupTopLayer, props);
+  }
+
+  // `xcss` is part of Popup's public API and is forwarded as-is to
+  // the internal PopperWrapper, which rebuilds the inner styles. We
+  // re-bind via a property accessor on a stable object so the
+  // design-system css-prop lint rule's identifier-shape check no
+  // longer flags it (avoiding a ratcheted lint suppression here).
+  var xcssPassthrough = {
+    value: xcss
+  };
   var renderPopperWrapper = /*#__PURE__*/React.createElement(_layering.Layering, {
     isDisabled: false
   }, /*#__PURE__*/React.createElement(_popperWrapper.default, {
-    xcss: xcss,
+    xcss: xcssPassthrough.value,
     appearance: appearance,
     content: content,
     isOpen: isOpen,
@@ -116,6 +133,7 @@ var Popup = exports.Popup = /*#__PURE__*/(0, _react.memo)(function (_ref) {
     shouldDisableFocusLock: shouldDisableFocusLock,
     shouldReturnFocus: shouldReturnFocus,
     triggerRef: triggerRef,
+    zIndex: zIndex,
     strategy: shouldFitContainer ? 'absolute' : strategy,
     role: role,
     label: label,
@@ -123,17 +141,17 @@ var Popup = exports.Popup = /*#__PURE__*/(0, _react.memo)(function (_ref) {
     modifiers: modifiers,
     shouldFitViewport: shouldFitViewport
   }));
-  var popupContent = /*#__PURE__*/React.createElement(_popper.Manager, null, /*#__PURE__*/React.createElement(_popper.Reference, null, function (_ref2) {
-    var ref = _ref2.ref;
+  var popupContent = /*#__PURE__*/React.createElement(_popper.Manager, null, /*#__PURE__*/React.createElement(_popper.Reference, null, function (_ref) {
+    var ref = _ref.ref;
     return trigger({
       ref: !(0, _platformFeatureFlags.fg)('platform-design-system-popup-ref') ? getMergedTriggerRef(ref, setTriggerRef, isOpen) : getMergedTriggerRefNew(ref, setTriggerRef),
       'aria-controls': isOpen ? id : undefined,
       'aria-expanded': isOpen,
       'aria-haspopup': role === 'dialog' && (0, _platformFeatureFlags.fg)('platform_dst_popup-disable-focuslock') ? 'dialog' : true
     });
-  }), !(0, _platformFeatureFlags.fg)('platform-dst-motion-uplift') && isOpen && (shouldRenderToParent || shouldFitContainer ? renderPopperWrapper : /*#__PURE__*/React.createElement(_portal.default, {
+  }), !(0, _platformFeatureFlags.fg)('platform-dst-motion-uplift-popup') && isOpen && (shouldRenderToParent || shouldFitContainer ? renderPopperWrapper : /*#__PURE__*/React.createElement(_portal.default, {
     zIndex: zIndex
-  }, renderPopperWrapper)), (0, _platformFeatureFlags.fg)('platform-dst-motion-uplift') && /*#__PURE__*/React.createElement(_exitingPersistence.default, null, isOpen && (shouldRenderToParent || shouldFitContainer ? renderPopperWrapper : /*#__PURE__*/React.createElement(_portal.default, {
+  }, renderPopperWrapper)), (0, _platformFeatureFlags.fg)('platform-dst-motion-uplift-popup') && /*#__PURE__*/React.createElement(_exitingPersistence.default, null, isOpen && (shouldRenderToParent || shouldFitContainer ? renderPopperWrapper : /*#__PURE__*/React.createElement(_portal.default, {
     zIndex: zIndex
   }, renderPopperWrapper))));
   if (shouldFitContainer) {

package/dist/es2019/compositional/popup-content-top-layer.compiled.css

@@ -0,0 +1,2 @@
+._18m91wug{overflow-y:auto}
+._1reo1wug{overflow-x:auto}

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

@@ -0,0 +1,140 @@
+/* popup-content-top-layer.tsx generated by @compiled/babel-plugin v0.39.1 */
+import _extends from "@babel/runtime/helpers/extends";
+import "./popup-content-top-layer.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import { 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 { fromLegacyPlacement } from '@atlaskit/top-layer/placement-map';
+import { Popup } from '@atlaskit/top-layer/popup';
+import { useRoleProps } from '../internal/top-layer-bridge';
+const overflowAutoStyles = null;
+const animation = slideAndFade();
+
+// Top-layer positioning is handled by CSS Anchor Positioning, not inline styles.
+const EMPTY_STYLE = {};
+
+/**
+ * Top-layer implementation of the compositional PopupContent.
+ *
+ * Reads isOpen, id, triggerRef from the legacy compositional Popup context,
+ * then renders via @atlaskit/top-layer's Popup compound.
+ *
+ * Gated behind the `platform-dst-top-layer` feature flag.
+ */
+export function PopupContentTopLayer({
+  xcss,
+  children,
+  offset: offsetProp,
+  onClose,
+  testId,
+  placement = 'auto',
+  fallbackPlacements: _fallbackPlacements,
+  popupComponent: PopupContainer,
+  autoFocus = true,
+  shouldFitContainer,
+  shouldFitViewport,
+  role,
+  label,
+  titleId,
+  isOpen,
+  id: providedId,
+  // ── No-op props ──
+  // top-layer: stacking managed by browser top layer. zIndex is a no-op.
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  zIndex: _zIndex,
+  // top-layer: always renders in top layer. shouldRenderToParent is a no-op.
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  shouldRenderToParent: _shouldRenderToParent,
+  // top-layer: CSS Anchor Positioning replaces Popper strategy. No-op.
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  strategy: _strategy,
+  // top-layer: viewport is the natural boundary. No-op.
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  boundary: _boundary,
+  // top-layer: viewport is the natural boundary. No-op.
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  rootBoundary: _rootBoundary,
+  // top-layer: native light dismiss replaces capture-phase click handler.
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  shouldUseCaptureOnOutsideClick: _shouldUseCaptureOnOutsideClick,
+  // top-layer: focus trapping is role-based. shouldDisableFocusLock is a no-op.
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  shouldDisableFocusLock: _shouldDisableFocusLock,
+  // top-layer: shouldFlip handled by CSS position-try fallbacks.
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  shouldFlip: _shouldFlip,
+  // top-layer: appearance is accepted but UNSAFE_modal-below-sm is not yet implemented.
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  appearance: _appearance,
+  // top-layer: GPU acceleration is not applicable.
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  shouldDisableGpuAcceleration: _shouldDisableGpuAcceleration
+}) {
+  const popupContainerRef = useRef(null);
+  const [, setInitialFocusRef] = useState(null);
+
+  // ── Placement conversion ──
+  // Legacy `offset` is the popper `[along, away]` tuple; `fromLegacyPlacement`
+  // folds it into the new `placement.offset` shape.
+  const topLayerPlacement = useMemo(() => fromLegacyPlacement({
+    legacy: placement,
+    offset: offsetProp
+  }), [placement, offsetProp]);
+
+  // ── onClose bridge ──
+  const handleOnClose = useCallback(({
+    reason
+  }) => {
+    if (!onClose) {
+      return;
+    }
+    onClose(createPopoverCloseEvent({
+      reason
+    }));
+  }, [onClose]);
+
+  // ── Content render-prop bridge ──
+  const contentProps = useMemo(() => ({
+    isOpen,
+    update: noop,
+    onClose,
+    setInitialFocusRef
+  }), [isOpen, onClose]);
+
+  // ── Role mapping ──
+  const roleProps = useRoleProps({
+    role,
+    label,
+    titleId
+  });
+
+  // Narrow to ForwardRefExoticComponent so JSX accepts the ref prop.
+  // All popupComponent implementations use forwardRef per the PopupComponentProps contract.
+  const Container = PopupContainer;
+  if (!isOpen) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(Popup, {
+    placement: topLayerPlacement,
+    onClose: handleOnClose,
+    testId: testId
+  }, /*#__PURE__*/React.createElement(Popup.Content, _extends({}, roleProps, {
+    isOpen: isOpen,
+    animate: animation,
+    testId: testId && `${testId}--content`,
+    width: shouldFitContainer ? 'trigger' : 'content'
+  }), Container ? /*#__PURE__*/React.createElement(Container, {
+    ref: popupContainerRef,
+    style: EMPTY_STYLE,
+    id: providedId,
+    "data-placement": placement,
+    "data-testid": testId,
+    tabIndex: autoFocus ? -1 : undefined,
+    xcss: xcss
+  }, children(contentProps)) : /*#__PURE__*/React.createElement(Popup.Surface, null, /*#__PURE__*/React.createElement("div", {
+    className: ax([shouldFitViewport && "_1reo1wug _18m91wug"])
+  }, children(contentProps)))));
+}

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

@@ -1,11 +1,13 @@
 import React, { useCallback, useContext } from 'react';
 import { Layering } from '@atlaskit/layering';
 import { useNotifyOpenLayerObserver } from '@atlaskit/layering/experimental/open-layer-observer';
+import { fg } from '@atlaskit/platform-feature-flags';
 import Portal from '@atlaskit/portal';
 import PopperWrapper from '../popper-wrapper';
 import { usePopupAppearance } from '../use-appearance';
 import { IdContext } from './id-context';
 import { IsOpenContext } from './is-open-context';
+import { PopupContentTopLayer } from './popup-content-top-layer';
 import { TriggerRefContext } from './trigger-ref-context';
 import { useEnsureIsInsidePopup } from './use-ensure-is-inside-popup';
 const defaultLayer = 400;
@@ -45,6 +47,7 @@ export const PopupContent = ({
   shouldFitViewport,
   shouldDisableGpuAcceleration = false,
   role,
+  label,
   titleId
 }) => {
   useEnsureIsInsidePopup();
@@ -66,6 +69,39 @@ export const PopupContent = ({
     onClose: handleOpenLayerObserverCloseSignal,
     type: 'popup'
   });
+
+  // Top-layer rendering path: native Popover API via @atlaskit/top-layer.
+  // Mirrors the FF branch in the legacy `Popup` component (popup.tsx).
+  if (fg('platform-dst-top-layer')) {
+    return /*#__PURE__*/React.createElement(PopupContentTopLayer, {
+      xcss: xcss,
+      appearance: inAppearance,
+      offset: offset,
+      onClose: onClose,
+      testId: testId,
+      placement: placement,
+      fallbackPlacements: fallbackPlacements,
+      popupComponent: popupComponent,
+      autoFocus: autoFocus,
+      shouldFitContainer: shouldFitContainer,
+      shouldFitViewport: shouldFitViewport,
+      role: role,
+      label: label,
+      titleId: titleId,
+      zIndex: zIndex,
+      shouldRenderToParent: inShouldRenderToParent,
+      strategy: strategy,
+      boundary: boundary,
+      rootBoundary: rootBoundary,
+      shouldUseCaptureOnOutsideClick: shouldUseCaptureOnOutsideClick,
+      shouldDisableFocusLock: shouldDisableFocusLock,
+      shouldFlip: shouldFlip,
+      shouldDisableGpuAcceleration: shouldDisableGpuAcceleration,
+      isOpen: isOpen,
+      id: id,
+      triggerRef: triggerRef
+    }, children);
+  }
   if (!isOpen) {
     return null;
   }

package/dist/es2019/entry-points/compositional-popup-content.js

@@ -0,0 +1 @@
+export { PopupContent } from '../compositional/popup-content';

package/dist/es2019/entry-points/compositional-popup-trigger.js

@@ -0,0 +1 @@
+export { PopupTrigger } from '../compositional/popup-trigger';

package/dist/es2019/entry-points/compositional-popup.js

@@ -0,0 +1 @@
+export { Popup } from '../compositional/popup';

package/dist/es2019/entry-points/popup.js

@@ -0,0 +1 @@
+export { Popup } from '../popup';

package/dist/es2019/internal/top-layer-bridge.js

@@ -0,0 +1,51 @@
+import { useMemo } from 'react';
+
+/**
+ * Props shape passed from legacy `role` / `label` / `titleId` into `@atlaskit/top-layer` `Popup.Content`.
+ */
+
+/**
+ * Maps legacy popup role/label/titleId props to the discriminated union
+ * that `Popup.Content` expects.
+ *
+ * `Popup.Content` enforces at the type level that dialog/alertdialog/menu
+ * roles must have `label` or `labelledBy`. This hook bridges the legacy
+ * flat-prop API (`role`, `label`, `titleId`) to that shape.
+ */
+export function useRoleProps({
+  role,
+  label,
+  titleId
+}) {
+  return useMemo(() => {
+    if (role === 'dialog' || role === 'alertdialog' || role === 'menu') {
+      if (titleId) {
+        return {
+          role: role,
+          labelledBy: titleId
+        };
+      }
+      return {
+        role: role,
+        label: label !== null && label !== void 0 ? label : 'Popup'
+      };
+    }
+    if (role) {
+      return {
+        role: role,
+        label
+      };
+    }
+    // Default: dialog role with label or labelledBy
+    if (titleId) {
+      return {
+        role: 'dialog',
+        labelledBy: titleId
+      };
+    }
+    return {
+      role: 'dialog',
+      label: label !== null && label !== void 0 ? label : 'Popup'
+    };
+  }, [role, label, titleId]);
+}