@atlaskit/popup 4.16.6 → 4.18.0

package/dist/esm/popper-wrapper.js

@@ -1,4 +1,5 @@
 /* popper-wrapper.tsx generated by @compiled/babel-plugin v0.39.1 */
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _extends from "@babel/runtime/helpers/extends";
@@ -6,6 +7,8 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
 var _excluded = ["shouldRenderToParent", "shouldFitContainer", "children", "appearance", "className", "isReferenceHidden", "shouldFitViewport"];
 import "./popper-wrapper.compiled.css";
 import * as React from 'react';
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import { forwardRef, Fragment, useMemo, useState } from 'react';
 import { ax, ix } from '@compiled/react/runtime';
 import { useLayering } from '@atlaskit/layering';
@@ -20,7 +23,6 @@ var fullWidthStyles = null;
 var wrapperStyles = {
   root: "_2rko12b0 _1e0c1ule _vchhusvi _1pby1nn1 _bfhk1bhr _16qs130s _syazi7uo _1q1l1bhr _nt751r31 _49pcglyw _1hvw1o36",
   rootT26Shape: "_2rko1mok",
-  rootLayer: "_1pby1nn1",
   fullWidth: "_1bsb1osq"
 };
 var scrollableStyles = null;
@@ -93,7 +95,7 @@ var DefaultPopupComponent = /*#__PURE__*/forwardRef(function (props, ref) {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
     className: ax([wrapperStyles.root, fg('platform-dst-shape-theme-default') && wrapperStyles.rootT26Shape, appearance === 'UNSAFE_modal-below-sm' && !fg('platform_dst_nav4_flyout_menu_slots_close_button') && "_dk5d1b66 _c71ldtre _kqsw1n9t _152t1b66", appearance === 'UNSAFE_modal-below-sm' && fg('platform_dst_nav4_flyout_menu_slots_close_button') && "_dk5d1b66 _c71l1ei0 _kqsw1n9t _152t1b66", (!shouldRenderToParent || shouldFitViewport) && "_1reo1wug _18m91wug", shouldFitContainer && "_1bsb1osq", className])
   }, htmlAttributes, {
-    ref: !fg('platform-dst-motion-uplift') ? ref : undefined
+    ref: !fg('platform-dst-motion-uplift-popup') ? ref : undefined
   }), children);
 });
 function PopperWrapper(_ref) {
@@ -128,7 +130,8 @@ function PopperWrapper(_ref) {
     modifiers = _ref.modifiers,
     shouldFitViewport = _ref.shouldFitViewport,
     _ref$appearance = _ref.appearance,
-    appearance = _ref$appearance === void 0 ? 'default' : _ref$appearance;
+    appearance = _ref$appearance === void 0 ? 'default' : _ref$appearance,
+    zIndex = _ref.zIndex;
   var _useState = useState(null),
     _useState2 = _slicedToArray(_useState, 2),
     popupRef = _useState2[0],
@@ -199,7 +202,7 @@ function PopperWrapper(_ref) {
       role: role,
       "aria-label": label,
       "aria-labelledby": titleId,
-      ref: !fg('platform-dst-motion-uplift') ? function (node) {
+      ref: !fg('platform-dst-motion-uplift-popup') ? function (node) {
         if (node) {
           if (typeof _ref3 === 'function') {
             _ref3(node);
@@ -211,7 +214,7 @@ function PopperWrapper(_ref) {
       } : undefined
       // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
       ,
-      style: fg('platform-dst-motion-uplift') || appearance === 'UNSAFE_modal-below-sm' ? {} : style
+      style: fg('platform-dst-motion-uplift-popup') || appearance === 'UNSAFE_modal-below-sm' ? {} : style
       // using tabIndex={-1} would cause a bug where Safari focuses
       // first on the browser address bar when using keyboard
       ,
@@ -230,7 +233,9 @@ function PopperWrapper(_ref) {
     })));
     var container = /*#__PURE__*/React.createElement("div", {
       // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
-      style: style,
+      style: _objectSpread(_objectSpread({}, style), {}, {
+        zIndex: zIndex
+      }),
       // using tabIndex={-1} would cause a bug where Safari focuses
       // first on the browser address bar when using keyboard
       ref: function ref(node) {
@@ -244,12 +249,12 @@ function PopperWrapper(_ref) {
         }
       },
       "data-testid": "".concat(testId, "--container"),
-      className: ax([wrapperStyles.rootLayer, shouldFitContainer && wrapperStyles.fullWidth])
+      className: ax([shouldFitContainer && wrapperStyles.fullWidth])
     }, placement === 'auto' || placement === 'auto-start' || placement === 'auto-end' ? popupContainer : /*#__PURE__*/React.createElement(Motion, {
       enteringAnimation: placementMap[placement].enter,
       exitingAnimation: placementMap[placement].exit
     }, popupContainer));
-    return /*#__PURE__*/React.createElement(Fragment, null, fg('platform-dst-motion-uplift') ? container : popupContainer, appearance === 'UNSAFE_modal-below-sm' && /*#__PURE__*/React.createElement("div", {
+    return /*#__PURE__*/React.createElement(Fragment, null, fg('platform-dst-motion-uplift-popup') ? container : popupContainer, appearance === 'UNSAFE_modal-below-sm' && /*#__PURE__*/React.createElement("div", {
       className: ax(["_1r04idpf _kqsw1n9t _bfhk1i5c"])
     }));
   });

package/dist/esm/popup-top-layer.compiled.css

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

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

@@ -0,0 +1,176 @@
+/* popup-top-layer.tsx generated by @compiled/babel-plugin v0.39.1 */
+import _extends from "@babel/runtime/helpers/extends";
+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 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';
+var contentOverflowStyles = {
+  fitViewport: "_1reo1wug _18m91wug",
+  default: ""
+};
+var animation = 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.
+ */
+export var PopupTopLayer = /*#__PURE__*/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 = useRef(null);
+  var popupContainerRef = useRef(null);
+  var _useState = useState(null),
+    _useState2 = _slicedToArray(_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 = useMemo(function () {
+    return 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 = useCallback(function (_ref2) {
+    var reason = _ref2.reason;
+    if (!onClose) {
+      return;
+    }
+    onClose(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 = useMemo(function () {
+    return {
+      isOpen: isOpen,
+      update: noop,
+      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 = 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, {
+    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': 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.Content, _extends({}, 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.Surface, null, /*#__PURE__*/React.createElement("div", {
+    className: ax([contentOverflowStyles[shouldFitViewport ? 'fitViewport' : 'default']])
+  }, content(contentProps)))));
+});

package/dist/esm/popup.js

@@ -15,6 +15,7 @@ import { Manager, Reference } from '@atlaskit/popper';
 import Portal from '@atlaskit/portal';
 import { Box } from '@atlaskit/primitives/compiled';
 import PopperWrapper from './popper-wrapper';
+import { PopupTopLayer } from './popup-top-layer';
 import { usePopupAppearance } from './use-appearance';
 import { useGetMemoizedMergedTriggerRef } from './use-get-memoized-merged-trigger-ref';
 import { useGetMemoizedMergedTriggerRefNew } from './use-get-memoized-merged-trigger-ref-new';
@@ -22,46 +23,46 @@ var defaultLayer = 400;
 var wrapperStyles = {
   root: "_kqswh2mm"
 };
-export var Popup = /*#__PURE__*/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;
+export var Popup = /*#__PURE__*/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 = useState(null),
     _useState2 = _slicedToArray(_useState, 2),
     triggerRef = _useState2[0],
@@ -84,10 +85,26 @@ export var Popup = /*#__PURE__*/memo(function (_ref) {
     onClose: handleOpenLayerObserverCloseSignal,
     type: 'popup'
   });
+
+  // Top-layer rendering path: native Popover API via @atlaskit/top-layer
+  if (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, 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, {
     isDisabled: false
   }, /*#__PURE__*/React.createElement(PopperWrapper, {
-    xcss: xcss,
+    xcss: xcssPassthrough.value,
     appearance: appearance,
     content: content,
     isOpen: isOpen,
@@ -108,6 +125,7 @@ export var Popup = /*#__PURE__*/memo(function (_ref) {
     shouldDisableFocusLock: shouldDisableFocusLock,
     shouldReturnFocus: shouldReturnFocus,
     triggerRef: triggerRef,
+    zIndex: zIndex,
     strategy: shouldFitContainer ? 'absolute' : strategy,
     role: role,
     label: label,
@@ -115,17 +133,17 @@ export var Popup = /*#__PURE__*/memo(function (_ref) {
     modifiers: modifiers,
     shouldFitViewport: shouldFitViewport
   }));
-  var popupContent = /*#__PURE__*/React.createElement(Manager, null, /*#__PURE__*/React.createElement(Reference, null, function (_ref2) {
-    var ref = _ref2.ref;
+  var popupContent = /*#__PURE__*/React.createElement(Manager, null, /*#__PURE__*/React.createElement(Reference, null, function (_ref) {
+    var ref = _ref.ref;
     return trigger({
       ref: !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' && fg('platform_dst_popup-disable-focuslock') ? 'dialog' : true
     });
-  }), !fg('platform-dst-motion-uplift') && isOpen && (shouldRenderToParent || shouldFitContainer ? renderPopperWrapper : /*#__PURE__*/React.createElement(Portal, {
+  }), !fg('platform-dst-motion-uplift-popup') && isOpen && (shouldRenderToParent || shouldFitContainer ? renderPopperWrapper : /*#__PURE__*/React.createElement(Portal, {
     zIndex: zIndex
-  }, renderPopperWrapper)), fg('platform-dst-motion-uplift') && /*#__PURE__*/React.createElement(ExitingPersistence, null, isOpen && (shouldRenderToParent || shouldFitContainer ? renderPopperWrapper : /*#__PURE__*/React.createElement(Portal, {
+  }, renderPopperWrapper)), fg('platform-dst-motion-uplift-popup') && /*#__PURE__*/React.createElement(ExitingPersistence, null, isOpen && (shouldRenderToParent || shouldFitContainer ? renderPopperWrapper : /*#__PURE__*/React.createElement(Portal, {
     zIndex: zIndex
   }, renderPopperWrapper))));
   if (shouldFitContainer) {

package/dist/types/compositional/popup-content-top-layer.d.ts

@@ -0,0 +1,21 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import { type ReactNode } from 'react';
+import { type ContentProps, type PopupProps } from '../types';
+/**
+ * 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 declare function PopupContentTopLayer({ xcss, children, offset: offsetProp, onClose, testId, placement, fallbackPlacements: _fallbackPlacements, popupComponent: PopupContainer, autoFocus, shouldFitContainer, shouldFitViewport, role, label, titleId, isOpen, id: providedId, zIndex: _zIndex, shouldRenderToParent: _shouldRenderToParent, strategy: _strategy, boundary: _boundary, rootBoundary: _rootBoundary, shouldUseCaptureOnOutsideClick: _shouldUseCaptureOnOutsideClick, shouldDisableFocusLock: _shouldDisableFocusLock, shouldFlip: _shouldFlip, appearance: _appearance, shouldDisableGpuAcceleration: _shouldDisableGpuAcceleration, }: Omit<PopupProps, 'content' | 'trigger'> & {
+    children: (props: ContentProps) => ReactNode;
+    shouldDisableGpuAcceleration?: boolean;
+    isOpen: boolean;
+    id: string | undefined;
+    triggerRef: HTMLElement | null;
+}): ReactNode;

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { type ContentProps, type PopupProps as LegacyPopupProps } from '../types';
-type CommonContentPopupProps = Pick<LegacyPopupProps, 'xcss' | 'appearance' | 'boundary' | 'offset' | 'onClose' | 'testId' | 'placement' | 'fallbackPlacements' | 'popupComponent' | 'shouldFlip' | 'rootBoundary' | 'autoFocus' | 'shouldRenderToParent' | 'shouldUseCaptureOnOutsideClick' | 'shouldDisableFocusLock' | 'strategy' | 'zIndex' | 'shouldFitViewport' | 'role' | 'titleId'> & {
+type CommonContentPopupProps = Pick<LegacyPopupProps, 'xcss' | 'appearance' | 'boundary' | 'offset' | 'onClose' | 'testId' | 'placement' | 'fallbackPlacements' | 'popupComponent' | 'shouldFlip' | 'rootBoundary' | 'autoFocus' | 'shouldRenderToParent' | 'shouldUseCaptureOnOutsideClick' | 'shouldDisableFocusLock' | 'strategy' | 'zIndex' | 'shouldFitViewport' | 'role' | 'label' | 'titleId'> & {
     children: (props: ContentProps) => React.ReactNode;
     /**
      * ___Use with caution___
@@ -31,5 +31,5 @@ export type PopupContentProps = ShouldFitContainerContentPopupProps | StandardPo
  *
  * It must be a child of the Popup component.
  */
-export declare const PopupContent: ({ xcss, appearance: inAppearance, children, boundary, offset, strategy, onClose, testId, rootBoundary, shouldFlip, placement, fallbackPlacements, popupComponent, autoFocus, zIndex, shouldUseCaptureOnOutsideClick, shouldRenderToParent: inShouldRenderToParent, shouldDisableFocusLock, shouldFitContainer, shouldFitViewport, shouldDisableGpuAcceleration, role, titleId, }: PopupContentProps) => React.JSX.Element | null;
+export declare const PopupContent: ({ xcss, appearance: inAppearance, children, boundary, offset, strategy, onClose, testId, rootBoundary, shouldFlip, placement, fallbackPlacements, popupComponent, autoFocus, zIndex, shouldUseCaptureOnOutsideClick, shouldRenderToParent: inShouldRenderToParent, shouldDisableFocusLock, shouldFitContainer, shouldFitViewport, shouldDisableGpuAcceleration, role, label, titleId, }: PopupContentProps) => React.JSX.Element | null;
 export {};

package/dist/types/entry-points/compositional-popup-content.d.ts

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

package/dist/types/entry-points/compositional-popup-trigger.d.ts

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

package/dist/types/entry-points/compositional-popup.d.ts

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

package/dist/types/entry-points/popup.d.ts

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

package/dist/types/entry-points/types.d.ts

@@ -0,0 +1 @@
+export type { ContentProps, PopupComponentProps, PopupProps, TriggerProps } from '../types';

package/dist/types/internal/top-layer-bridge.d.ts

@@ -0,0 +1,29 @@
+type TRestrictedDialogRole = 'dialog' | 'alertdialog' | 'menu';
+type TWcagSupplementalRole = 'tooltip' | 'listbox' | 'tree' | 'grid' | 'note' | 'status' | 'alert' | 'log';
+/**
+ * Props shape passed from legacy `role` / `label` / `titleId` into `@atlaskit/top-layer` `Popup.Content`.
+ */
+export type TUseRolePropsResult = {
+    role: TRestrictedDialogRole;
+    labelledBy: string;
+} | {
+    role: TRestrictedDialogRole;
+    label: string;
+} | {
+    role: TWcagSupplementalRole;
+    label: string | undefined;
+};
+/**
+ * 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 declare function useRoleProps({ role, label, titleId, }: {
+    role: string | undefined;
+    label: string | undefined;
+    titleId: string | undefined;
+}): TUseRolePropsResult;
+export {};

package/dist/types/popper-wrapper.d.ts

@@ -1,3 +1,3 @@
 import { type PopperWrapperProps } from './types';
-declare function PopperWrapper({ xcss, isOpen, id, offset, testId, content, fallbackPlacements, onClose, boundary, rootBoundary, shouldFlip, placement, popupComponent: PopupContainer, autoFocus, triggerRef, shouldUseCaptureOnOutsideClick, shouldRenderToParent, shouldFitContainer, shouldDisableFocusLock, shouldReturnFocus, strategy, role, label, titleId, modifiers, shouldFitViewport, appearance, }: PopperWrapperProps): JSX.Element;
+declare function PopperWrapper({ xcss, isOpen, id, offset, testId, content, fallbackPlacements, onClose, boundary, rootBoundary, shouldFlip, placement, popupComponent: PopupContainer, autoFocus, triggerRef, shouldUseCaptureOnOutsideClick, shouldRenderToParent, shouldFitContainer, shouldDisableFocusLock, shouldReturnFocus, strategy, role, label, titleId, modifiers, shouldFitViewport, appearance, zIndex, }: PopperWrapperProps): JSX.Element;
 export default PopperWrapper;

package/dist/types/popup-top-layer.d.ts

@@ -0,0 +1,16 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import { type FC } from 'react';
+import { type PopupProps } from './types';
+/**
+ * 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.
+ */
+export declare const PopupTopLayer: FC<PopupProps>;

package/dist/types/types.d.ts

@@ -139,6 +139,11 @@ interface BaseProps {
      * The distance the popup should be offset from the reference in the format of [along, away] (units in px).
      * The default is `[0, 8]`, which means the popup will be `8px` away from the edge of the reference specified
      * by the `placement` prop.
+     *
+     * @private
+     * Note: when `platform-dst-top-layer` is enabled, both the `along` and `away`
+     * values are passed through to the top-layer placement (via `fromLegacyPlacement`),
+     * matching the legacy popper-js behaviour.
      */
     offset?: [number, number];
     /**
@@ -151,22 +156,38 @@ interface BaseProps {
      * When the preferred placement doesn't have enough space,
      * the modifier will test the ones provided in the list, and use the first suitable one.
      * If no fallback placements are suitable, it reverts back to the original placement.
+     *
+     * @private
+     * @deprecated No-op when `platform-dst-top-layer` is enabled — CSS Anchor Positioning
+     * generates fallbacks automatically via `position-try-fallbacks`.
      */
     fallbackPlacements?: Placement[];
     /**
      * The boundary element that the popup will check for overflow.
      * The default is `"clippingParents"` which are parent scroll containers,
      * but can be set to any element.
+     *
+     * @private
+     * @deprecated No-op when `platform-dst-top-layer` is enabled — the viewport
+     * is the natural boundary for top-layer elements.
      */
     boundary?: 'clippingParents' | HTMLElement;
     /**
      * The root boundary that the popup will check for overflow.
      * The default is `"viewport"` but it can be set to `"document"`.
+     *
+     * @private
+     * @deprecated No-op when `platform-dst-top-layer` is enabled — the viewport
+     * is the natural boundary for top-layer elements.
      */
     rootBoundary?: 'viewport' | 'document';
     /**
      * Allows the popup to be placed on the opposite side of its trigger if it doesn't fit in the viewport.
      * The default is `true`.
+     *
+     * @private
+     * @deprecated No-op when `platform-dst-top-layer` is enabled — CSS Anchor Positioning
+     * handles flipping natively via `position-try-fallbacks`.
      */
     shouldFlip?: boolean;
     /**
@@ -210,6 +231,10 @@ interface BaseProps {
     /**
      * The root element where the popup should be rendered.
      * Defaults to `false`.
+     *
+     * @private
+     * @deprecated No-op when `platform-dst-top-layer` is enabled — content always
+     * renders in the browser's top layer.
      */
     shouldRenderToParent?: boolean;
     /**
@@ -222,6 +247,10 @@ interface BaseProps {
     /**
      * This makes the popup close on Tab key press. It will only work when `shouldRenderToParent` is `true`.
      * The default is `false`.
+     *
+     * @private
+     * @deprecated No-op when `platform-dst-top-layer` is enabled — focus trapping
+     * is role-based in the top-layer path.
      */
     shouldDisableFocusLock?: boolean;
     /**
@@ -232,6 +261,10 @@ interface BaseProps {
     /**
      * This controls the positioning strategy to use. Can vary between `absolute` and `fixed`.
      * The default is `fixed`.
+     *
+     * @private
+     * @deprecated No-op when `platform-dst-top-layer` is enabled — CSS Anchor Positioning
+     * replaces Popper's positioning strategy.
      */
     strategy?: 'absolute' | 'fixed';
     /**
@@ -272,6 +305,10 @@ interface InternalPopupProps extends BaseProps {
      * Z-index that the popup should be displayed in.
      * This is passed to the portal component.
      * The default is 400.
+     *
+     * @private
+     * @deprecated No-op when `platform-dst-top-layer` is enabled — the browser's
+     * top layer manages stacking without z-index.
      */
     zIndex?: number;
 }
@@ -285,6 +322,7 @@ type ShouldFitContainerPopupProps = InternalPopupProps & {
 };
 export type PopupProps = StandardPopupProps | ShouldFitContainerPopupProps;
 export interface PopperWrapperProps extends BaseProps {
+    zIndex?: number;
     triggerRef: TriggerRef;
 }
 export type CloseManagerHook = Pick<PopupProps, 'isOpen' | 'onClose'> & {