@atlaskit/popup 4.17.0 → 4.19.0

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

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

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

@@ -0,0 +1,193 @@
+/* popup-top-layer.tsx generated by @compiled/babel-plugin v0.39.1 */
+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 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 contentOverflowStyles = {
+  fitViewport: "_1reo1wug _18m91wug",
+  default: ""
+};
+const animation = slideAndFade();
+
+// Top-layer positioning is handled by CSS Anchor Positioning, not inline styles.
+const 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 const PopupTopLayer = /*#__PURE__*/memo(function PopupTopLayer({
+  xcss,
+  isOpen,
+  id: providedId,
+  offset: offsetProp,
+  testId,
+  trigger,
+  content,
+  onClose,
+  placement = 'auto',
+  fallbackPlacements: _fallbackPlacements,
+  shouldFlip: _shouldFlip = true,
+  popupComponent: PopupContainer,
+  autoFocus = true,
+  shouldFitContainer = false,
+  // top-layer: focus restoration is handled natively by the Popover API. No-op.
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  shouldReturnFocus: _shouldReturnFocus = true,
+  role,
+  label,
+  titleId,
+  // ── 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.
+
+  // 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: Popper.js modifiers not applicable. No-op.
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  modifiers: _modifiers,
+  // 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.
+  // Could add mousedown drag guard later if needed.
+  // 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: shouldFitViewport is handled via overflow on content wrapper.
+  shouldFitViewport,
+  // 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
+}) {
+  const triggerRef = useRef(null);
+  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 so it travels with placement.
+  const topLayerPlacement = useMemo(() => 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.
+  const handleOnClose = useCallback(({
+    reason
+  }) => {
+    if (!onClose) {
+      return;
+    }
+    onClose(createPopoverCloseEvent({
+      reason
+    }));
+  }, [onClose]);
+
+  // ── Content render-prop bridge ──
+  // Legacy content() receives { isOpen, update, setInitialFocusRef, onClose }.
+  // update is a no-op — CSS Anchor Positioning self-updates.
+  const contentProps = useMemo(() => ({
+    isOpen: isOpen,
+    update: noop,
+    onClose,
+    setInitialFocusRef
+  }), [isOpen, onClose]);
+
+  // ── Role mapping ──
+  // Build the role/label props for PopupContent.
+  // Roles requiring accessible names must have label or labelledBy.
+  const roleProps = useRoleProps({
+    role,
+    label,
+    titleId
+  });
+
+  // Sync controlled isOpen with internal state
+  const effectiveIsOpen = isOpen;
+
+  // 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': 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 && `${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/es2019/popup.js

@@ -13,6 +13,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';
@@ -20,36 +21,37 @@ const defaultLayer = 400;
 const wrapperStyles = {
   root: "_kqswh2mm"
 };
-export const Popup = /*#__PURE__*/memo(({
-  xcss,
-  appearance: inAppearance = 'default',
-  isOpen,
-  id: providedId,
-  offset,
-  testId,
-  trigger,
-  content,
-  onClose,
-  boundary,
-  rootBoundary = 'viewport',
-  shouldFlip = true,
-  placement = 'auto',
-  fallbackPlacements,
-  popupComponent: PopupContainer,
-  autoFocus = true,
-  zIndex = defaultLayer,
-  shouldUseCaptureOnOutsideClick = false,
-  shouldRenderToParent: inShouldRenderToParent = false,
-  shouldFitContainer = false,
-  shouldDisableFocusLock = false,
-  shouldReturnFocus = true,
-  strategy,
-  role,
-  label,
-  titleId,
-  modifiers,
-  shouldFitViewport
-}) => {
+export const Popup = /*#__PURE__*/memo(props => {
+  const {
+    xcss,
+    appearance: inAppearance = 'default',
+    isOpen,
+    id: providedId,
+    offset,
+    testId,
+    trigger,
+    content,
+    onClose,
+    boundary,
+    rootBoundary = 'viewport',
+    shouldFlip = true,
+    placement = 'auto',
+    fallbackPlacements,
+    popupComponent: PopupContainer,
+    autoFocus = true,
+    zIndex = defaultLayer,
+    shouldUseCaptureOnOutsideClick = false,
+    shouldRenderToParent: inShouldRenderToParent = false,
+    shouldFitContainer = false,
+    shouldDisableFocusLock = false,
+    shouldReturnFocus = true,
+    strategy,
+    role,
+    label,
+    titleId,
+    modifiers,
+    shouldFitViewport
+  } = props;
   const [triggerRef, setTriggerRef] = useState(null);
   const getMergedTriggerRef = useGetMemoizedMergedTriggerRef();
   const getMergedTriggerRefNew = useGetMemoizedMergedTriggerRefNew();
@@ -70,10 +72,26 @@ export const Popup = /*#__PURE__*/memo(({
     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).
+  const xcssPassthrough = {
+    value: xcss
+  };
   const renderPopperWrapper = /*#__PURE__*/React.createElement(Layering, {
     isDisabled: false
   }, /*#__PURE__*/React.createElement(PopperWrapper, {
-    xcss: xcss,
+    xcss: xcssPassthrough.value,
     appearance: appearance,
     content: content,
     isOpen: isOpen,
@@ -94,6 +112,7 @@ export const Popup = /*#__PURE__*/memo(({
     shouldDisableFocusLock: shouldDisableFocusLock,
     shouldReturnFocus: shouldReturnFocus,
     triggerRef: triggerRef,
+    zIndex: zIndex,
     strategy: shouldFitContainer ? 'absolute' : strategy,
     role: role,
     label: label,
@@ -110,9 +129,9 @@ export const Popup = /*#__PURE__*/memo(({
       '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/esm/compositional/popup-content-top-layer.compiled.css

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

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

@@ -0,0 +1,126 @@
+/* popup-content-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-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';
+var overflowAutoStyles = null;
+var animation = slideAndFade();
+
+// Top-layer positioning is handled by CSS Anchor Positioning, not inline styles.
+var 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(_ref) {
+  var xcss = _ref.xcss,
+    children = _ref.children,
+    offsetProp = _ref.offset,
+    onClose = _ref.onClose,
+    testId = _ref.testId,
+    _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,
+    shouldFitContainer = _ref.shouldFitContainer,
+    shouldFitViewport = _ref.shouldFitViewport,
+    role = _ref.role,
+    label = _ref.label,
+    titleId = _ref.titleId,
+    isOpen = _ref.isOpen,
+    providedId = _ref.id,
+    _zIndex = _ref.zIndex,
+    _shouldRenderToParent = _ref.shouldRenderToParent,
+    _strategy = _ref.strategy,
+    _boundary = _ref.boundary,
+    _rootBoundary = _ref.rootBoundary,
+    _shouldUseCaptureOnOutsideClick = _ref.shouldUseCaptureOnOutsideClick,
+    _shouldDisableFocusLock = _ref.shouldDisableFocusLock,
+    _shouldFlip = _ref.shouldFlip,
+    _appearance = _ref.appearance,
+    _shouldDisableGpuAcceleration = _ref.shouldDisableGpuAcceleration;
+  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.
+  var topLayerPlacement = useMemo(function () {
+    return fromLegacyPlacement({
+      legacy: placement,
+      offset: offsetProp
+    });
+  }, [placement, offsetProp]);
+
+  // ── onClose bridge ──
+  var handleOnClose = useCallback(function (_ref2) {
+    var reason = _ref2.reason;
+    if (!onClose) {
+      return;
+    }
+    onClose(createPopoverCloseEvent({
+      reason: reason
+    }));
+  }, [onClose]);
+
+  // ── Content render-prop bridge ──
+  var contentProps = useMemo(function () {
+    return {
+      isOpen: isOpen,
+      update: noop,
+      onClose: onClose,
+      setInitialFocusRef: setInitialFocusRef
+    };
+  }, [isOpen, onClose]);
+
+  // ── Role mapping ──
+  var roleProps = useRoleProps({
+    role: role,
+    label: label,
+    titleId: titleId
+  });
+
+  // Narrow to ForwardRefExoticComponent so JSX accepts the ref prop.
+  // All popupComponent implementations use forwardRef per the PopupComponentProps contract.
+  var 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 && "".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
+  }, children(contentProps)) : /*#__PURE__*/React.createElement(Popup.Surface, null, /*#__PURE__*/React.createElement("div", {
+    className: ax([shouldFitViewport && "_1reo1wug _18m91wug"])
+  }, children(contentProps)))));
+}

package/dist/esm/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';
 var defaultLayer = 400;
@@ -54,6 +56,7 @@ export var PopupContent = function PopupContent(_ref) {
     _ref$shouldDisableGpu = _ref.shouldDisableGpuAcceleration,
     shouldDisableGpuAcceleration = _ref$shouldDisableGpu === void 0 ? false : _ref$shouldDisableGpu,
     role = _ref.role,
+    label = _ref.label,
     titleId = _ref.titleId;
   useEnsureIsInsidePopup();
   var isOpen = useContext(IsOpenContext);
@@ -73,6 +76,39 @@ export var PopupContent = function PopupContent(_ref) {
     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/esm/internal/top-layer-bridge.js

@@ -0,0 +1,50 @@
+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(_ref) {
+  var role = _ref.role,
+    label = _ref.label,
+    titleId = _ref.titleId;
+  return useMemo(function () {
+    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: 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]);
+}

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}