@atlaskit/popup 1.26.0 → 1.27.1

package/CHANGELOG.md

@@ -1,5 +1,31 @@
 # @atlaskit/popup
 
+## 1.27.1
+
+### Patch Changes
+
+- [#144902](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/144902)
+  [`16cce78563062`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/16cce78563062) -
+  Fixes a bug that caused the trigger to lose the ability to have focus after closing a dropdown
+  menu using the Escape key inside the popup content.
+
+## 1.27.0
+
+### Minor Changes
+
+- [#143323](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/143323)
+  [`4fdf6347eb506`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/4fdf6347eb506) -
+  Popup and compositional popup now take an xcss prop that can adjust the popup contents padding and
+  width.
+- [#143323](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/143323)
+  [`4fdf6347eb506`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/4fdf6347eb506) -
+  Popup and compositional popup now have a new appearance prop. Pass it "modal" to enable the popup
+  to appear as a modal on small viewports.
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 1.26.0
 
 ### Minor Changes

package/dist/cjs/compositional/popup.js

@@ -16,6 +16,7 @@ var _popper = require("@atlaskit/popper");
 var _portal = _interopRequireDefault(require("@atlaskit/portal"));
 var _constants = require("@atlaskit/theme/constants");
 var _popperWrapper = _interopRequireDefault(require("../popper-wrapper"));
+var _useAppearance = require("../use-appearance");
 var _useGetMemoizedMergedTriggerRef = require("../use-get-memoized-merged-trigger-ref");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -106,7 +107,10 @@ var defaultLayer = _constants.layers.layer();
  * It must be a child of the Popup component.
  */
 var PopupContent = exports.PopupContent = function PopupContent(_ref4) {
-  var children = _ref4.children,
+  var xcss = _ref4.xcss,
+    _ref4$appearance = _ref4.appearance,
+    inAppearance = _ref4$appearance === void 0 ? 'default' : _ref4$appearance,
+    children = _ref4.children,
     boundary = _ref4.boundary,
     offset = _ref4.offset,
     strategy = _ref4.strategy,
@@ -126,7 +130,7 @@ var PopupContent = exports.PopupContent = function PopupContent(_ref4) {
     zIndex = _ref4$zIndex === void 0 ? defaultLayer : _ref4$zIndex,
     _ref4$shouldUseCaptur = _ref4.shouldUseCaptureOnOutsideClick,
     shouldUseCaptureOnOutsideClick = _ref4$shouldUseCaptur === void 0 ? false : _ref4$shouldUseCaptur,
-    shouldRenderToParent = _ref4.shouldRenderToParent,
+    inShouldRenderToParent = _ref4.shouldRenderToParent,
     _ref4$shouldDisableFo = _ref4.shouldDisableFocusLock,
     shouldDisableFocusLock = _ref4$shouldDisableFo === void 0 ? false : _ref4$shouldDisableFo,
     shouldFitContainer = _ref4.shouldFitContainer,
@@ -135,12 +139,22 @@ var PopupContent = exports.PopupContent = function PopupContent(_ref4) {
   var isOpen = (0, _react.useContext)(IsOpenContext);
   var id = (0, _react.useContext)(IdContext);
   var triggerRef = (0, _react.useContext)(TriggerRefContext);
+  var _usePopupAppearance = (0, _useAppearance.usePopupAppearance)({
+      appearance: inAppearance,
+      shouldRenderToParent: inShouldRenderToParent
+    }),
+    appearance = _usePopupAppearance.appearance,
+    shouldRenderToParent = _usePopupAppearance.shouldRenderToParent;
   if (!isOpen) {
     return null;
   }
   var popperWrapper = /*#__PURE__*/_react.default.createElement(_layering.UNSAFE_LAYERING, {
     isDisabled: false
-  }, /*#__PURE__*/_react.default.createElement(_popperWrapper.default, {
+  }, /*#__PURE__*/_react.default.createElement(_popperWrapper.default
+  // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+  , {
+    xcss: xcss,
+    appearance: appearance,
     content: children,
     isOpen: isOpen,
     placement: placement,

package/dist/cjs/popper-wrapper.js

@@ -22,20 +22,19 @@ var _tokens = require("@atlaskit/tokens");
 var _repositionOnUpdate = require("./reposition-on-update");
 var _useCloseManager = require("./use-close-manager");
 var _useFocusManager = require("./use-focus-manager");
-var _excluded = ["shouldRenderToParent", "shouldFitContainer", "children"];
+var _excluded = ["shouldRenderToParent", "shouldFitContainer", "children", "appearance", "xcss"];
 var _css;
 /**
  * @jsxRuntime classic
  * @jsx jsx
  */
-var popupFullWidthStyles = (0, _react2.css)({
+var fullWidthStyles = (0, _react2.css)({
   width: '100%'
 });
-var popupStyles = (0, _react2.css)((_css = {
+var rootStyles = (0, _react2.css)((_css = {
   display: 'block',
   boxSizing: 'border-box',
   zIndex: _constants.layers.layer(),
-  flex: '1 1 auto',
   backgroundColor: "var(--ds-surface-overlay, ".concat(_colors.N0, ")"),
   borderRadius: "var(--ds-border-radius, 3px)",
   boxShadow: "var(--ds-shadow-overlay, ".concat("0 4px 8px -2px ".concat(_colors.N50A, ", 0 0 1px ").concat(_colors.N60A), ")"),
@@ -46,22 +45,39 @@ var popupStyles = (0, _react2.css)((_css = {
 }, (0, _defineProperty2.default)(_css, _tokens.CURRENT_SURFACE_CSS_VAR, "var(--ds-surface-overlay, ".concat(_colors.N0, ")")), (0, _defineProperty2.default)(_css, '&:focus', {
   outline: 'none'
 }), _css));
-var popupOverflowStyles = (0, _react2.css)({
+var scrollableStyles = (0, _react2.css)({
   overflow: 'auto'
 });
+var blanketStyles = (0, _react2.css)({
+  position: 'fixed',
+  inset: 0,
+  backgroundColor: "var(--ds-blanket, #091E427D)"
+});
+var modalStyles = (0, _react2.css)({
+  maxHeight: '50vh',
+  position: 'fixed',
+  insetBlockStart: "var(--ds-space-050, 4px)",
+  insetInline: "var(--ds-space-050, 4px)"
+});
 var DefaultPopupComponent = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var shouldRenderToParent = props.shouldRenderToParent,
     shouldFitContainer = props.shouldFitContainer,
     children = props.children,
+    appearance = props.appearance,
+    xcss = props.xcss,
     htmlAttributes = (0, _objectWithoutProperties2.default)(props, _excluded);
   return (0, _react2.jsx)("div", (0, _extends2.default)({
-    css: [popupStyles, !shouldRenderToParent && popupOverflowStyles, shouldFitContainer && popupFullWidthStyles]
+    // We suppress this for now as we can't use the Compiled pragma until this module has migrated to Compiled.
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop, @compiled/jsx-pragma
+    className: xcss,
+    css: [rootStyles, appearance === 'UNSAFE_modal-below-sm' && modalStyles, !shouldRenderToParent && scrollableStyles, shouldFitContainer && fullWidthStyles]
   }, htmlAttributes, {
     ref: ref
   }), children);
 });
 function PopperWrapper(_ref) {
-  var isOpen = _ref.isOpen,
+  var xcss = _ref.xcss,
+    isOpen = _ref.isOpen,
     id = _ref.id,
     offset = _ref.offset,
     testId = _ref.testId,
@@ -89,7 +105,9 @@ function PopperWrapper(_ref) {
     label = _ref.label,
     titleId = _ref.titleId,
     modifiers = _ref.modifiers,
-    shouldFitViewport = _ref.shouldFitViewport;
+    shouldFitViewport = _ref.shouldFitViewport,
+    _ref$appearance = _ref.appearance,
+    appearance = _ref$appearance === void 0 ? 'default' : _ref$appearance;
   var _useState = (0, _react.useState)(null),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     popupRef = _useState2[0],
@@ -98,9 +116,7 @@ function PopperWrapper(_ref) {
     _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
     initialFocusRef = _useState4[0],
     setInitialFocusRef = _useState4[1];
-
-  // We have cases where we need to close the Popup on Tab press.
-  // Example: DropdownMenu
+  // We have cases where we need to close the Popup on Tab press, e.g. DropdownMenu
   var shouldCloseOnTab = shouldRenderToParent && shouldDisableFocusLock;
   var shouldDisableFocusTrap = role !== 'dialog';
   (0, _useFocusManager.useFocusManager)({
@@ -147,7 +163,11 @@ function PopperWrapper(_ref) {
       style = _ref2.style,
       placement = _ref2.placement,
       update = _ref2.update;
-    var popupContainer = (0, _react2.jsx)(PopupContainer, {
+    var popupContainer = (0, _react2.jsx)(PopupContainer
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+    , {
+      xcss: xcss,
+      appearance: appearance,
       id: id,
       "data-ds--level": currentLevel,
       "data-placement": placement,
@@ -167,7 +187,7 @@ function PopperWrapper(_ref) {
       }
       // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
       ,
-      style: style
+      style: 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
       ,
@@ -182,7 +202,11 @@ function PopperWrapper(_ref) {
       onClose: onClose,
       setInitialFocusRef: setInitialFocusRef
     })));
-    return !initialFocusRef && (0, _platformFeatureFlags.fg)('platform-design-system-apply-popup-wrapper-focus') ? (0, _react2.jsx)(_focusRing.default, null, popupContainer) : popupContainer;
+    return !initialFocusRef && (0, _platformFeatureFlags.fg)('platform-design-system-apply-popup-wrapper-focus') ? (0, _react2.jsx)(_react.Fragment, null, (0, _react2.jsx)(_focusRing.default, null, popupContainer), appearance === 'UNSAFE_modal-below-sm' && (0, _react2.jsx)("div", {
+      css: blanketStyles
+    })) : (0, _react2.jsx)(_react.Fragment, null, popupContainer, appearance === 'UNSAFE_modal-below-sm' && (0, _react2.jsx)("div", {
+      css: blanketStyles
+    }));
   });
 }
 

package/dist/cjs/popup.js

@@ -16,6 +16,7 @@ var _portal = _interopRequireDefault(require("@atlaskit/portal"));
 var _primitives = require("@atlaskit/primitives");
 var _constants = require("@atlaskit/theme/constants");
 var _popperWrapper = _interopRequireDefault(require("./popper-wrapper"));
+var _useAppearance = require("./use-appearance");
 var _useGetMemoizedMergedTriggerRef = require("./use-get-memoized-merged-trigger-ref");
 var _useGetMemoizedMergedTriggerRefNew = require("./use-get-memoized-merged-trigger-ref-new");
 /* eslint-disable @repo/internal/react/require-jsdoc */
@@ -31,7 +32,10 @@ var wrapperStyles = (0, _primitives.xcss)({
   position: 'relative'
 });
 var Popup = exports.Popup = /*#__PURE__*/(0, _react.memo)(function (_ref) {
-  var isOpen = _ref.isOpen,
+  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,
@@ -54,7 +58,7 @@ var Popup = exports.Popup = /*#__PURE__*/(0, _react.memo)(function (_ref) {
     _ref$shouldUseCapture = _ref.shouldUseCaptureOnOutsideClick,
     shouldUseCaptureOnOutsideClick = _ref$shouldUseCapture === void 0 ? false : _ref$shouldUseCapture,
     _ref$shouldRenderToPa = _ref.shouldRenderToParent,
-    shouldRenderToParent = _ref$shouldRenderToPa === void 0 ? false : _ref$shouldRenderToPa,
+    inShouldRenderToParent = _ref$shouldRenderToPa === void 0 ? false : _ref$shouldRenderToPa,
     _ref$shouldFitContain = _ref.shouldFitContainer,
     shouldFitContainer = _ref$shouldFitContain === void 0 ? false : _ref$shouldFitContain,
     _ref$shouldDisableFoc = _ref.shouldDisableFocusLock,
@@ -74,10 +78,20 @@ var Popup = exports.Popup = /*#__PURE__*/(0, _react.memo)(function (_ref) {
   var getMergedTriggerRef = (0, _useGetMemoizedMergedTriggerRef.useGetMemoizedMergedTriggerRef)();
   var getMergedTriggerRefNew = (0, _useGetMemoizedMergedTriggerRefNew.useGetMemoizedMergedTriggerRefNew)();
   var generatedId = (0, _reactUid.useId)();
+  var _usePopupAppearance = (0, _useAppearance.usePopupAppearance)({
+      appearance: inAppearance,
+      shouldRenderToParent: inShouldRenderToParent
+    }),
+    appearance = _usePopupAppearance.appearance,
+    shouldRenderToParent = _usePopupAppearance.shouldRenderToParent;
   var id = providedId || generatedId;
   var renderPopperWrapper = (0, _react2.jsx)(_layering.UNSAFE_LAYERING, {
     isDisabled: false
-  }, (0, _react2.jsx)(_popperWrapper.default, {
+  }, (0, _react2.jsx)(_popperWrapper.default
+  // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+  , {
+    xcss: xcss,
+    appearance: appearance,
     content: content,
     isOpen: isOpen,
     placement: placement,

package/dist/cjs/use-appearance.js

@@ -0,0 +1,35 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.usePopupAppearance = usePopupAppearance;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = require("react");
+var _responsive = require("@atlaskit/primitives/responsive");
+/**
+ * **usePopupAppearance()**
+ *
+ * Abstracts away calculating the appearance for a popup including if it should
+ * be portalled or not, this is done to ensure that if the popup needs to render
+ * as a modal that it is also forcibly portalled. If it's not portalled when rendering
+ * as a modal it will appear below the top bar.
+ */
+function usePopupAppearance(_ref) {
+  var _appearance = _ref.appearance,
+    _shouldRenderToParent = _ref.shouldRenderToParent;
+  var mq = (0, _responsive.UNSAFE_useMediaQuery)('below.sm', function (e) {
+    setIsSmallViewport(!!e.matches);
+  });
+  var _useState = (0, _react.useState)(!!(mq !== null && mq !== void 0 && mq.matches)),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    isSmallViewport = _useState2[0],
+    setIsSmallViewport = _useState2[1];
+  var appearance = _appearance === 'UNSAFE_modal-below-sm' && isSmallViewport ? 'UNSAFE_modal-below-sm' : 'default';
+  var shouldRenderToParent = _shouldRenderToParent && appearance === 'default';
+  return {
+    appearance: appearance,
+    shouldRenderToParent: shouldRenderToParent
+  };
+}

package/dist/cjs/use-focus-manager.js

@@ -8,6 +8,7 @@ exports.useFocusManager = void 0;
 var _react = require("react");
 var _focusTrap = _interopRequireDefault(require("focus-trap"));
 var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
+var _layering = require("@atlaskit/layering");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _useAnimationFrame2 = require("./utils/use-animation-frame");
 var useFocusManager = exports.useFocusManager = function useFocusManager(_ref) {
@@ -17,25 +18,32 @@ var useFocusManager = exports.useFocusManager = function useFocusManager(_ref) {
     autoFocus = _ref.autoFocus,
     shouldCloseOnTab = _ref.shouldCloseOnTab,
     shouldDisableFocusTrap = _ref.shouldDisableFocusTrap,
-    shouldReturnFocus = _ref.shouldReturnFocus;
+    shouldReturnFocus = _ref.shouldReturnFocus,
+    shouldRenderToParent = _ref.shouldRenderToParent;
   var _useAnimationFrame = (0, _useAnimationFrame2.useAnimationFrame)(),
     requestFrame = _useAnimationFrame.requestFrame,
     cancelAllFrames = _useAnimationFrame.cancelAllFrames;
+  var _UNSAFE_useLayering = (0, _layering.UNSAFE_useLayering)(),
+    currentLevel = _UNSAFE_useLayering.currentLevel;
   (0, _react.useEffect)(function () {
     if (!popupRef || shouldCloseOnTab) {
       return _noop.default;
     }
     if (shouldDisableFocusTrap && (0, _platformFeatureFlags.fg)('platform_dst_popup-disable-focuslock')) {
-      // Plucking trigger & popup content container from the tab order so that
-      // when we Shift+Tab, the focus moves to the element before trigger
-      requestFrame(function () {
-        triggerRef === null || triggerRef === void 0 || triggerRef.setAttribute('tabindex', '-1');
-        if (popupRef && autoFocus) {
-          popupRef.setAttribute('tabindex', '-1');
-        }
-        (initialFocusRef || popupRef).focus();
-      });
-      return _noop.default;
+      var isDropdown = popupRef.matches('[id^=ds--dropdown--]');
+      var popups = document.querySelectorAll("[data-ds--level=\"".concat(currentLevel - 1, "\"]"));
+      if (!(popups[popups.length - 1] && !shouldRenderToParent && isDropdown)) {
+        // Plucking trigger & popup content container from the tab order so that
+        // when we Shift+Tab, the focus moves to the element before trigger
+        requestFrame(function () {
+          triggerRef === null || triggerRef === void 0 || triggerRef.setAttribute('tabindex', '-1');
+          if (popupRef && autoFocus) {
+            popupRef.setAttribute('tabindex', '-1');
+          }
+          (initialFocusRef || popupRef).focus();
+        });
+        return _noop.default;
+      }
     }
     var trapConfig = {
       clickOutsideDeactivates: true,
@@ -54,5 +62,5 @@ var useFocusManager = exports.useFocusManager = function useFocusManager(_ref) {
       cancelAllFrames();
       focusTrap.deactivate();
     };
-  }, [popupRef, triggerRef, autoFocus, initialFocusRef, shouldCloseOnTab, shouldDisableFocusTrap, requestFrame, cancelAllFrames, shouldReturnFocus]);
+  }, [popupRef, triggerRef, autoFocus, initialFocusRef, shouldCloseOnTab, shouldDisableFocusTrap, requestFrame, cancelAllFrames, shouldReturnFocus, shouldRenderToParent, currentLevel]);
 };

package/dist/es2019/compositional/popup.js

@@ -7,6 +7,7 @@ import { Manager, Reference } from '@atlaskit/popper';
 import Portal from '@atlaskit/portal';
 import { layers } from '@atlaskit/theme/constants';
 import PopperWrapper from '../popper-wrapper';
+import { usePopupAppearance } from '../use-appearance';
 import { useGetMemoizedMergedTriggerRef } from '../use-get-memoized-merged-trigger-ref';
 const IsOpenContext = /*#__PURE__*/createContext(false);
 const IdContext = /*#__PURE__*/createContext(undefined);
@@ -92,6 +93,8 @@ const defaultLayer = layers.layer();
  * It must be a child of the Popup component.
  */
 export const PopupContent = ({
+  xcss,
+  appearance: inAppearance = 'default',
   children,
   boundary,
   offset,
@@ -106,7 +109,7 @@ export const PopupContent = ({
   autoFocus = true,
   zIndex = defaultLayer,
   shouldUseCaptureOnOutsideClick = false,
-  shouldRenderToParent,
+  shouldRenderToParent: inShouldRenderToParent,
   shouldDisableFocusLock = false,
   shouldFitContainer,
   shouldFitViewport
@@ -115,12 +118,23 @@ export const PopupContent = ({
   const isOpen = useContext(IsOpenContext);
   const id = useContext(IdContext);
   const triggerRef = useContext(TriggerRefContext);
+  const {
+    appearance,
+    shouldRenderToParent
+  } = usePopupAppearance({
+    appearance: inAppearance,
+    shouldRenderToParent: inShouldRenderToParent
+  });
   if (!isOpen) {
     return null;
   }
   const popperWrapper = /*#__PURE__*/React.createElement(UNSAFE_LAYERING, {
     isDisabled: false
-  }, /*#__PURE__*/React.createElement(PopperWrapper, {
+  }, /*#__PURE__*/React.createElement(PopperWrapper
+  // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+  , {
+    xcss: xcss,
+    appearance: appearance,
     content: children,
     isOpen: isOpen,
     placement: placement,

package/dist/es2019/popper-wrapper.js

@@ -3,7 +3,7 @@ import _extends from "@babel/runtime/helpers/extends";
  * @jsxRuntime classic
  * @jsx jsx
  */
-import { forwardRef, useMemo, useState } from 'react';
+import { forwardRef, Fragment, useMemo, useState } from 'react';
 import { css, jsx } from '@emotion/react';
 import FocusRing from '@atlaskit/focus-ring';
 import { UNSAFE_useLayering } from '@atlaskit/layering';
@@ -15,14 +15,13 @@ import { CURRENT_SURFACE_CSS_VAR } from '@atlaskit/tokens';
 import { RepositionOnUpdate } from './reposition-on-update';
 import { useCloseManager } from './use-close-manager';
 import { useFocusManager } from './use-focus-manager';
-const popupFullWidthStyles = css({
+const fullWidthStyles = css({
   width: '100%'
 });
-const popupStyles = css({
+const rootStyles = css({
   display: 'block',
   boxSizing: 'border-box',
   zIndex: layers.layer(),
-  flex: '1 1 auto',
   backgroundColor: `var(--ds-surface-overlay, ${N0})`,
   borderRadius: "var(--ds-border-radius, 3px)",
   boxShadow: `var(--ds-shadow-overlay, ${`0 4px 8px -2px ${N50A}, 0 0 1px ${N60A}`})`,
@@ -35,23 +34,40 @@ const popupStyles = css({
     outline: 'none'
   }
 });
-const popupOverflowStyles = css({
+const scrollableStyles = css({
   overflow: 'auto'
 });
+const blanketStyles = css({
+  position: 'fixed',
+  inset: 0,
+  backgroundColor: "var(--ds-blanket, #091E427D)"
+});
+const modalStyles = css({
+  maxHeight: '50vh',
+  position: 'fixed',
+  insetBlockStart: "var(--ds-space-050, 4px)",
+  insetInline: "var(--ds-space-050, 4px)"
+});
 const DefaultPopupComponent = /*#__PURE__*/forwardRef((props, ref) => {
   const {
     shouldRenderToParent,
     shouldFitContainer,
     children,
+    appearance,
+    xcss,
     ...htmlAttributes
   } = props;
   return jsx("div", _extends({
-    css: [popupStyles, !shouldRenderToParent && popupOverflowStyles, shouldFitContainer && popupFullWidthStyles]
+    // We suppress this for now as we can't use the Compiled pragma until this module has migrated to Compiled.
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop, @compiled/jsx-pragma
+    className: xcss,
+    css: [rootStyles, appearance === 'UNSAFE_modal-below-sm' && modalStyles, !shouldRenderToParent && scrollableStyles, shouldFitContainer && fullWidthStyles]
   }, htmlAttributes, {
     ref: ref
   }), children);
 });
 function PopperWrapper({
+  xcss,
   isOpen,
   id,
   offset,
@@ -77,13 +93,12 @@ function PopperWrapper({
   label,
   titleId,
   modifiers,
-  shouldFitViewport
+  shouldFitViewport,
+  appearance = 'default'
 }) {
   const [popupRef, setPopupRef] = useState(null);
   const [initialFocusRef, setInitialFocusRef] = useState(null);
-
-  // We have cases where we need to close the Popup on Tab press.
-  // Example: DropdownMenu
+  // We have cases where we need to close the Popup on Tab press, e.g. DropdownMenu
   const shouldCloseOnTab = shouldRenderToParent && shouldDisableFocusLock;
   const shouldDisableFocusTrap = role !== 'dialog';
   useFocusManager({
@@ -130,7 +145,11 @@ function PopperWrapper({
     placement,
     update
   }) => {
-    const popupContainer = jsx(PopupContainer, {
+    const popupContainer = jsx(PopupContainer
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+    , {
+      xcss: xcss,
+      appearance: appearance,
       id: id,
       "data-ds--level": currentLevel,
       "data-placement": placement,
@@ -150,7 +169,7 @@ function PopperWrapper({
       }
       // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
       ,
-      style: style
+      style: 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
       ,
@@ -165,7 +184,11 @@ function PopperWrapper({
       onClose,
       setInitialFocusRef
     })));
-    return !initialFocusRef && fg('platform-design-system-apply-popup-wrapper-focus') ? jsx(FocusRing, null, popupContainer) : popupContainer;
+    return !initialFocusRef && fg('platform-design-system-apply-popup-wrapper-focus') ? jsx(Fragment, null, jsx(FocusRing, null, popupContainer), appearance === 'UNSAFE_modal-below-sm' && jsx("div", {
+      css: blanketStyles
+    })) : jsx(Fragment, null, popupContainer, appearance === 'UNSAFE_modal-below-sm' && jsx("div", {
+      css: blanketStyles
+    }));
   });
 }
 

package/dist/es2019/popup.js

@@ -15,6 +15,7 @@ import Portal from '@atlaskit/portal';
 import { Box, xcss } from '@atlaskit/primitives';
 import { layers } from '@atlaskit/theme/constants';
 import PopperWrapper from './popper-wrapper';
+import { usePopupAppearance } from './use-appearance';
 import { useGetMemoizedMergedTriggerRef } from './use-get-memoized-merged-trigger-ref';
 import { useGetMemoizedMergedTriggerRefNew } from './use-get-memoized-merged-trigger-ref-new';
 const defaultLayer = layers.layer();
@@ -22,6 +23,8 @@ const wrapperStyles = xcss({
   position: 'relative'
 });
 export const Popup = /*#__PURE__*/memo(({
+  xcss,
+  appearance: inAppearance = 'default',
   isOpen,
   id: providedId,
   offset,
@@ -38,7 +41,7 @@ export const Popup = /*#__PURE__*/memo(({
   autoFocus = true,
   zIndex = defaultLayer,
   shouldUseCaptureOnOutsideClick = false,
-  shouldRenderToParent = false,
+  shouldRenderToParent: inShouldRenderToParent = false,
   shouldFitContainer = false,
   shouldDisableFocusLock = false,
   shouldReturnFocus = true,
@@ -53,10 +56,21 @@ export const Popup = /*#__PURE__*/memo(({
   const getMergedTriggerRef = useGetMemoizedMergedTriggerRef();
   const getMergedTriggerRefNew = useGetMemoizedMergedTriggerRefNew();
   const generatedId = useId();
+  const {
+    appearance,
+    shouldRenderToParent
+  } = usePopupAppearance({
+    appearance: inAppearance,
+    shouldRenderToParent: inShouldRenderToParent
+  });
   const id = providedId || generatedId;
   const renderPopperWrapper = jsx(UNSAFE_LAYERING, {
     isDisabled: false
-  }, jsx(PopperWrapper, {
+  }, jsx(PopperWrapper
+  // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+  , {
+    xcss: xcss,
+    appearance: appearance,
     content: content,
     isOpen: isOpen,
     placement: placement,

package/dist/es2019/use-appearance.js

@@ -0,0 +1,26 @@
+import { useState } from 'react';
+import { UNSAFE_useMediaQuery as useMediaQuery } from '@atlaskit/primitives/responsive';
+
+/**
+ * **usePopupAppearance()**
+ *
+ * Abstracts away calculating the appearance for a popup including if it should
+ * be portalled or not, this is done to ensure that if the popup needs to render
+ * as a modal that it is also forcibly portalled. If it's not portalled when rendering
+ * as a modal it will appear below the top bar.
+ */
+export function usePopupAppearance({
+  appearance: _appearance,
+  shouldRenderToParent: _shouldRenderToParent
+}) {
+  const mq = useMediaQuery('below.sm', e => {
+    setIsSmallViewport(!!e.matches);
+  });
+  const [isSmallViewport, setIsSmallViewport] = useState(!!(mq !== null && mq !== void 0 && mq.matches));
+  const appearance = _appearance === 'UNSAFE_modal-below-sm' && isSmallViewport ? 'UNSAFE_modal-below-sm' : 'default';
+  const shouldRenderToParent = _shouldRenderToParent && appearance === 'default';
+  return {
+    appearance,
+    shouldRenderToParent
+  };
+}

package/dist/es2019/use-focus-manager.js

@@ -1,6 +1,7 @@
 import { useEffect } from 'react';
 import createFocusTrap from 'focus-trap';
 import noop from '@atlaskit/ds-lib/noop';
+import { UNSAFE_useLayering } from '@atlaskit/layering';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { useAnimationFrame } from './utils/use-animation-frame';
 export const useFocusManager = ({
@@ -10,27 +11,35 @@ export const useFocusManager = ({
   autoFocus,
   shouldCloseOnTab,
   shouldDisableFocusTrap,
-  shouldReturnFocus
+  shouldReturnFocus,
+  shouldRenderToParent
 }) => {
   const {
     requestFrame,
     cancelAllFrames
   } = useAnimationFrame();
+  const {
+    currentLevel
+  } = UNSAFE_useLayering();
   useEffect(() => {
     if (!popupRef || shouldCloseOnTab) {
       return noop;
     }
     if (shouldDisableFocusTrap && fg('platform_dst_popup-disable-focuslock')) {
-      // Plucking trigger & popup content container from the tab order so that
-      // when we Shift+Tab, the focus moves to the element before trigger
-      requestFrame(() => {
-        triggerRef === null || triggerRef === void 0 ? void 0 : triggerRef.setAttribute('tabindex', '-1');
-        if (popupRef && autoFocus) {
-          popupRef.setAttribute('tabindex', '-1');
-        }
-        (initialFocusRef || popupRef).focus();
-      });
-      return noop;
+      const isDropdown = popupRef.matches('[id^=ds--dropdown--]');
+      const popups = document.querySelectorAll(`[data-ds--level="${currentLevel - 1}"]`);
+      if (!(popups[popups.length - 1] && !shouldRenderToParent && isDropdown)) {
+        // Plucking trigger & popup content container from the tab order so that
+        // when we Shift+Tab, the focus moves to the element before trigger
+        requestFrame(() => {
+          triggerRef === null || triggerRef === void 0 ? void 0 : triggerRef.setAttribute('tabindex', '-1');
+          if (popupRef && autoFocus) {
+            popupRef.setAttribute('tabindex', '-1');
+          }
+          (initialFocusRef || popupRef).focus();
+        });
+        return noop;
+      }
     }
     const trapConfig = {
       clickOutsideDeactivates: true,
@@ -49,5 +58,5 @@ export const useFocusManager = ({
       cancelAllFrames();
       focusTrap.deactivate();
     };
-  }, [popupRef, triggerRef, autoFocus, initialFocusRef, shouldCloseOnTab, shouldDisableFocusTrap, requestFrame, cancelAllFrames, shouldReturnFocus]);
+  }, [popupRef, triggerRef, autoFocus, initialFocusRef, shouldCloseOnTab, shouldDisableFocusTrap, requestFrame, cancelAllFrames, shouldReturnFocus, shouldRenderToParent, currentLevel]);
 };

package/dist/esm/compositional/popup.js

@@ -8,6 +8,7 @@ import { Manager, Reference } from '@atlaskit/popper';
 import Portal from '@atlaskit/portal';
 import { layers } from '@atlaskit/theme/constants';
 import PopperWrapper from '../popper-wrapper';
+import { usePopupAppearance } from '../use-appearance';
 import { useGetMemoizedMergedTriggerRef } from '../use-get-memoized-merged-trigger-ref';
 var IsOpenContext = /*#__PURE__*/createContext(false);
 var IdContext = /*#__PURE__*/createContext(undefined);
@@ -96,7 +97,10 @@ var defaultLayer = layers.layer();
  * It must be a child of the Popup component.
  */
 export var PopupContent = function PopupContent(_ref4) {
-  var children = _ref4.children,
+  var xcss = _ref4.xcss,
+    _ref4$appearance = _ref4.appearance,
+    inAppearance = _ref4$appearance === void 0 ? 'default' : _ref4$appearance,
+    children = _ref4.children,
     boundary = _ref4.boundary,
     offset = _ref4.offset,
     strategy = _ref4.strategy,
@@ -116,7 +120,7 @@ export var PopupContent = function PopupContent(_ref4) {
     zIndex = _ref4$zIndex === void 0 ? defaultLayer : _ref4$zIndex,
     _ref4$shouldUseCaptur = _ref4.shouldUseCaptureOnOutsideClick,
     shouldUseCaptureOnOutsideClick = _ref4$shouldUseCaptur === void 0 ? false : _ref4$shouldUseCaptur,
-    shouldRenderToParent = _ref4.shouldRenderToParent,
+    inShouldRenderToParent = _ref4.shouldRenderToParent,
     _ref4$shouldDisableFo = _ref4.shouldDisableFocusLock,
     shouldDisableFocusLock = _ref4$shouldDisableFo === void 0 ? false : _ref4$shouldDisableFo,
     shouldFitContainer = _ref4.shouldFitContainer,
@@ -125,12 +129,22 @@ export var PopupContent = function PopupContent(_ref4) {
   var isOpen = useContext(IsOpenContext);
   var id = useContext(IdContext);
   var triggerRef = useContext(TriggerRefContext);
+  var _usePopupAppearance = usePopupAppearance({
+      appearance: inAppearance,
+      shouldRenderToParent: inShouldRenderToParent
+    }),
+    appearance = _usePopupAppearance.appearance,
+    shouldRenderToParent = _usePopupAppearance.shouldRenderToParent;
   if (!isOpen) {
     return null;
   }
   var popperWrapper = /*#__PURE__*/React.createElement(UNSAFE_LAYERING, {
     isDisabled: false
-  }, /*#__PURE__*/React.createElement(PopperWrapper, {
+  }, /*#__PURE__*/React.createElement(PopperWrapper
+  // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+  , {
+    xcss: xcss,
+    appearance: appearance,
     content: children,
     isOpen: isOpen,
     placement: placement,

package/dist/esm/popper-wrapper.js

@@ -3,13 +3,13 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-var _excluded = ["shouldRenderToParent", "shouldFitContainer", "children"];
+var _excluded = ["shouldRenderToParent", "shouldFitContainer", "children", "appearance", "xcss"];
 var _css;
 /**
  * @jsxRuntime classic
  * @jsx jsx
  */
-import { forwardRef, useMemo, useState } from 'react';
+import { forwardRef, Fragment, useMemo, useState } from 'react';
 import { css, jsx } from '@emotion/react';
 import FocusRing from '@atlaskit/focus-ring';
 import { UNSAFE_useLayering } from '@atlaskit/layering';
@@ -21,14 +21,13 @@ import { CURRENT_SURFACE_CSS_VAR } from '@atlaskit/tokens';
 import { RepositionOnUpdate } from './reposition-on-update';
 import { useCloseManager } from './use-close-manager';
 import { useFocusManager } from './use-focus-manager';
-var popupFullWidthStyles = css({
+var fullWidthStyles = css({
   width: '100%'
 });
-var popupStyles = css((_css = {
+var rootStyles = css((_css = {
   display: 'block',
   boxSizing: 'border-box',
   zIndex: layers.layer(),
-  flex: '1 1 auto',
   backgroundColor: "var(--ds-surface-overlay, ".concat(N0, ")"),
   borderRadius: "var(--ds-border-radius, 3px)",
   boxShadow: "var(--ds-shadow-overlay, ".concat("0 4px 8px -2px ".concat(N50A, ", 0 0 1px ").concat(N60A), ")"),
@@ -39,22 +38,39 @@ var popupStyles = css((_css = {
 }, _defineProperty(_css, CURRENT_SURFACE_CSS_VAR, "var(--ds-surface-overlay, ".concat(N0, ")")), _defineProperty(_css, '&:focus', {
   outline: 'none'
 }), _css));
-var popupOverflowStyles = css({
+var scrollableStyles = css({
   overflow: 'auto'
 });
+var blanketStyles = css({
+  position: 'fixed',
+  inset: 0,
+  backgroundColor: "var(--ds-blanket, #091E427D)"
+});
+var modalStyles = css({
+  maxHeight: '50vh',
+  position: 'fixed',
+  insetBlockStart: "var(--ds-space-050, 4px)",
+  insetInline: "var(--ds-space-050, 4px)"
+});
 var DefaultPopupComponent = /*#__PURE__*/forwardRef(function (props, ref) {
   var shouldRenderToParent = props.shouldRenderToParent,
     shouldFitContainer = props.shouldFitContainer,
     children = props.children,
+    appearance = props.appearance,
+    xcss = props.xcss,
     htmlAttributes = _objectWithoutProperties(props, _excluded);
   return jsx("div", _extends({
-    css: [popupStyles, !shouldRenderToParent && popupOverflowStyles, shouldFitContainer && popupFullWidthStyles]
+    // We suppress this for now as we can't use the Compiled pragma until this module has migrated to Compiled.
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop, @compiled/jsx-pragma
+    className: xcss,
+    css: [rootStyles, appearance === 'UNSAFE_modal-below-sm' && modalStyles, !shouldRenderToParent && scrollableStyles, shouldFitContainer && fullWidthStyles]
   }, htmlAttributes, {
     ref: ref
   }), children);
 });
 function PopperWrapper(_ref) {
-  var isOpen = _ref.isOpen,
+  var xcss = _ref.xcss,
+    isOpen = _ref.isOpen,
     id = _ref.id,
     offset = _ref.offset,
     testId = _ref.testId,
@@ -82,7 +98,9 @@ function PopperWrapper(_ref) {
     label = _ref.label,
     titleId = _ref.titleId,
     modifiers = _ref.modifiers,
-    shouldFitViewport = _ref.shouldFitViewport;
+    shouldFitViewport = _ref.shouldFitViewport,
+    _ref$appearance = _ref.appearance,
+    appearance = _ref$appearance === void 0 ? 'default' : _ref$appearance;
   var _useState = useState(null),
     _useState2 = _slicedToArray(_useState, 2),
     popupRef = _useState2[0],
@@ -91,9 +109,7 @@ function PopperWrapper(_ref) {
     _useState4 = _slicedToArray(_useState3, 2),
     initialFocusRef = _useState4[0],
     setInitialFocusRef = _useState4[1];
-
-  // We have cases where we need to close the Popup on Tab press.
-  // Example: DropdownMenu
+  // We have cases where we need to close the Popup on Tab press, e.g. DropdownMenu
   var shouldCloseOnTab = shouldRenderToParent && shouldDisableFocusLock;
   var shouldDisableFocusTrap = role !== 'dialog';
   useFocusManager({
@@ -140,7 +156,11 @@ function PopperWrapper(_ref) {
       style = _ref2.style,
       placement = _ref2.placement,
       update = _ref2.update;
-    var popupContainer = jsx(PopupContainer, {
+    var popupContainer = jsx(PopupContainer
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+    , {
+      xcss: xcss,
+      appearance: appearance,
       id: id,
       "data-ds--level": currentLevel,
       "data-placement": placement,
@@ -160,7 +180,7 @@ function PopperWrapper(_ref) {
       }
       // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
       ,
-      style: style
+      style: 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
       ,
@@ -175,7 +195,11 @@ function PopperWrapper(_ref) {
       onClose: onClose,
       setInitialFocusRef: setInitialFocusRef
     })));
-    return !initialFocusRef && fg('platform-design-system-apply-popup-wrapper-focus') ? jsx(FocusRing, null, popupContainer) : popupContainer;
+    return !initialFocusRef && fg('platform-design-system-apply-popup-wrapper-focus') ? jsx(Fragment, null, jsx(FocusRing, null, popupContainer), appearance === 'UNSAFE_modal-below-sm' && jsx("div", {
+      css: blanketStyles
+    })) : jsx(Fragment, null, popupContainer, appearance === 'UNSAFE_modal-below-sm' && jsx("div", {
+      css: blanketStyles
+    }));
   });
 }
 

package/dist/esm/popup.js

@@ -16,6 +16,7 @@ import Portal from '@atlaskit/portal';
 import { Box, xcss } from '@atlaskit/primitives';
 import { layers } from '@atlaskit/theme/constants';
 import PopperWrapper from './popper-wrapper';
+import { usePopupAppearance } from './use-appearance';
 import { useGetMemoizedMergedTriggerRef } from './use-get-memoized-merged-trigger-ref';
 import { useGetMemoizedMergedTriggerRefNew } from './use-get-memoized-merged-trigger-ref-new';
 var defaultLayer = layers.layer();
@@ -23,7 +24,10 @@ var wrapperStyles = xcss({
   position: 'relative'
 });
 export var Popup = /*#__PURE__*/memo(function (_ref) {
-  var isOpen = _ref.isOpen,
+  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,
@@ -46,7 +50,7 @@ export var Popup = /*#__PURE__*/memo(function (_ref) {
     _ref$shouldUseCapture = _ref.shouldUseCaptureOnOutsideClick,
     shouldUseCaptureOnOutsideClick = _ref$shouldUseCapture === void 0 ? false : _ref$shouldUseCapture,
     _ref$shouldRenderToPa = _ref.shouldRenderToParent,
-    shouldRenderToParent = _ref$shouldRenderToPa === void 0 ? false : _ref$shouldRenderToPa,
+    inShouldRenderToParent = _ref$shouldRenderToPa === void 0 ? false : _ref$shouldRenderToPa,
     _ref$shouldFitContain = _ref.shouldFitContainer,
     shouldFitContainer = _ref$shouldFitContain === void 0 ? false : _ref$shouldFitContain,
     _ref$shouldDisableFoc = _ref.shouldDisableFocusLock,
@@ -66,10 +70,20 @@ export var Popup = /*#__PURE__*/memo(function (_ref) {
   var getMergedTriggerRef = useGetMemoizedMergedTriggerRef();
   var getMergedTriggerRefNew = useGetMemoizedMergedTriggerRefNew();
   var generatedId = useId();
+  var _usePopupAppearance = usePopupAppearance({
+      appearance: inAppearance,
+      shouldRenderToParent: inShouldRenderToParent
+    }),
+    appearance = _usePopupAppearance.appearance,
+    shouldRenderToParent = _usePopupAppearance.shouldRenderToParent;
   var id = providedId || generatedId;
   var renderPopperWrapper = jsx(UNSAFE_LAYERING, {
     isDisabled: false
-  }, jsx(PopperWrapper, {
+  }, jsx(PopperWrapper
+  // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+  , {
+    xcss: xcss,
+    appearance: appearance,
     content: content,
     isOpen: isOpen,
     placement: placement,

package/dist/esm/use-appearance.js

@@ -0,0 +1,29 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import { useState } from 'react';
+import { UNSAFE_useMediaQuery as useMediaQuery } from '@atlaskit/primitives/responsive';
+
+/**
+ * **usePopupAppearance()**
+ *
+ * Abstracts away calculating the appearance for a popup including if it should
+ * be portalled or not, this is done to ensure that if the popup needs to render
+ * as a modal that it is also forcibly portalled. If it's not portalled when rendering
+ * as a modal it will appear below the top bar.
+ */
+export function usePopupAppearance(_ref) {
+  var _appearance = _ref.appearance,
+    _shouldRenderToParent = _ref.shouldRenderToParent;
+  var mq = useMediaQuery('below.sm', function (e) {
+    setIsSmallViewport(!!e.matches);
+  });
+  var _useState = useState(!!(mq !== null && mq !== void 0 && mq.matches)),
+    _useState2 = _slicedToArray(_useState, 2),
+    isSmallViewport = _useState2[0],
+    setIsSmallViewport = _useState2[1];
+  var appearance = _appearance === 'UNSAFE_modal-below-sm' && isSmallViewport ? 'UNSAFE_modal-below-sm' : 'default';
+  var shouldRenderToParent = _shouldRenderToParent && appearance === 'default';
+  return {
+    appearance: appearance,
+    shouldRenderToParent: shouldRenderToParent
+  };
+}

package/dist/esm/use-focus-manager.js

@@ -1,6 +1,7 @@
 import { useEffect } from 'react';
 import createFocusTrap from 'focus-trap';
 import noop from '@atlaskit/ds-lib/noop';
+import { UNSAFE_useLayering } from '@atlaskit/layering';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { useAnimationFrame } from './utils/use-animation-frame';
 export var useFocusManager = function useFocusManager(_ref) {
@@ -10,25 +11,32 @@ export var useFocusManager = function useFocusManager(_ref) {
     autoFocus = _ref.autoFocus,
     shouldCloseOnTab = _ref.shouldCloseOnTab,
     shouldDisableFocusTrap = _ref.shouldDisableFocusTrap,
-    shouldReturnFocus = _ref.shouldReturnFocus;
+    shouldReturnFocus = _ref.shouldReturnFocus,
+    shouldRenderToParent = _ref.shouldRenderToParent;
   var _useAnimationFrame = useAnimationFrame(),
     requestFrame = _useAnimationFrame.requestFrame,
     cancelAllFrames = _useAnimationFrame.cancelAllFrames;
+  var _UNSAFE_useLayering = UNSAFE_useLayering(),
+    currentLevel = _UNSAFE_useLayering.currentLevel;
   useEffect(function () {
     if (!popupRef || shouldCloseOnTab) {
       return noop;
     }
     if (shouldDisableFocusTrap && fg('platform_dst_popup-disable-focuslock')) {
-      // Plucking trigger & popup content container from the tab order so that
-      // when we Shift+Tab, the focus moves to the element before trigger
-      requestFrame(function () {
-        triggerRef === null || triggerRef === void 0 || triggerRef.setAttribute('tabindex', '-1');
-        if (popupRef && autoFocus) {
-          popupRef.setAttribute('tabindex', '-1');
-        }
-        (initialFocusRef || popupRef).focus();
-      });
-      return noop;
+      var isDropdown = popupRef.matches('[id^=ds--dropdown--]');
+      var popups = document.querySelectorAll("[data-ds--level=\"".concat(currentLevel - 1, "\"]"));
+      if (!(popups[popups.length - 1] && !shouldRenderToParent && isDropdown)) {
+        // Plucking trigger & popup content container from the tab order so that
+        // when we Shift+Tab, the focus moves to the element before trigger
+        requestFrame(function () {
+          triggerRef === null || triggerRef === void 0 || triggerRef.setAttribute('tabindex', '-1');
+          if (popupRef && autoFocus) {
+            popupRef.setAttribute('tabindex', '-1');
+          }
+          (initialFocusRef || popupRef).focus();
+        });
+        return noop;
+      }
     }
     var trapConfig = {
       clickOutsideDeactivates: true,
@@ -47,5 +55,5 @@ export var useFocusManager = function useFocusManager(_ref) {
       cancelAllFrames();
       focusTrap.deactivate();
     };
-  }, [popupRef, triggerRef, autoFocus, initialFocusRef, shouldCloseOnTab, shouldDisableFocusTrap, requestFrame, cancelAllFrames, shouldReturnFocus]);
+  }, [popupRef, triggerRef, autoFocus, initialFocusRef, shouldCloseOnTab, shouldDisableFocusTrap, requestFrame, cancelAllFrames, shouldReturnFocus, shouldRenderToParent, currentLevel]);
 };

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

@@ -36,7 +36,7 @@ export type PopupTriggerProps = {
  * It must be a child of the Popup component.
  */
 export declare const PopupTrigger: ({ children }: PopupTriggerProps) => JSX.Element;
-type CommonContentPopupProps = Pick<LegacyPopupProps, 'boundary' | 'offset' | 'onClose' | 'testId' | 'placement' | 'fallbackPlacements' | 'popupComponent' | 'shouldFlip' | 'rootBoundary' | 'autoFocus' | 'shouldRenderToParent' | 'shouldUseCaptureOnOutsideClick' | 'shouldDisableFocusLock' | 'strategy' | 'zIndex' | 'shouldFitViewport'> & {
+type CommonContentPopupProps = Pick<LegacyPopupProps, 'xcss' | 'appearance' | 'boundary' | 'offset' | 'onClose' | 'testId' | 'placement' | 'fallbackPlacements' | 'popupComponent' | 'shouldFlip' | 'rootBoundary' | 'autoFocus' | 'shouldRenderToParent' | 'shouldUseCaptureOnOutsideClick' | 'shouldDisableFocusLock' | 'strategy' | 'zIndex' | 'shouldFitViewport'> & {
     children: (props: ContentProps) => React.ReactNode;
 };
 type ShouldFitContainerContentPopupProps = CommonContentPopupProps & {
@@ -55,5 +55,5 @@ export type PopupContentProps = ShouldFitContainerContentPopupProps | StandardPo
  *
  * It must be a child of the Popup component.
  */
-export declare const PopupContent: ({ children, boundary, offset, strategy, onClose, testId, rootBoundary, shouldFlip, placement, fallbackPlacements, popupComponent, autoFocus, zIndex, shouldUseCaptureOnOutsideClick, shouldRenderToParent, shouldDisableFocusLock, shouldFitContainer, shouldFitViewport, }: PopupContentProps) => 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, }: PopupContentProps) => JSX.Element | null;
 export {};

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

@@ -1,4 +1,4 @@
 import { jsx } from '@emotion/react';
 import { type PopperWrapperProps } from './types';
-declare function PopperWrapper({ 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, }: PopperWrapperProps): jsx.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, }: PopperWrapperProps): jsx.JSX.Element;
 export default PopperWrapper;

package/dist/types/types.d.ts

@@ -1,4 +1,5 @@
 import { type ComponentType, type CSSProperties, type Dispatch, type PropsWithChildren, type default as React, type ReactNode, type Ref, type SetStateAction } from 'react';
+import { type StrictXCSSProp } from '@atlaskit/css';
 import { type Modifier, type Placement, type PopperChildrenProps } from '@atlaskit/popper';
 export interface TriggerProps {
     ref: Ref<any>;
@@ -53,6 +54,7 @@ export interface PopupComponentProps {
      * Style that should be assigned to the root element.
      */
     style: CSSProperties;
+    xcss?: StrictXCSSProp<'padding' | 'paddingInline' | 'paddingBlock' | 'width', never>;
     /**
      * Tab index passed through by the parent popup.
      */
@@ -69,6 +71,11 @@ export interface PopupComponentProps {
      * The default is `false`.
      */
     shouldFitContainer?: boolean;
+    /**
+     * The "default" appearance is used for standard popups.
+     * The "UNSAFE_modal-below-sm" appearance makes the popup appear as a modal when the viewport is smaller than "sm".
+     */
+    appearance?: 'default' | 'UNSAFE_modal-below-sm';
     /**
      * Use this to set the accessibility role for the popup.
      * We strongly recommend using only `menu` or `dialog`.
@@ -76,6 +83,12 @@ export interface PopupComponentProps {
     role?: string;
 }
 interface BaseProps {
+    /**
+     * The "default" appearance is used for standard popups.
+     * The "UNSAFE_modal-below-sm" appearance makes the popup appear as a modal when the viewport is smaller than "sm".
+     */
+    appearance?: 'default' | 'UNSAFE_modal-below-sm';
+    xcss?: StrictXCSSProp<'padding' | 'paddingInline' | 'paddingBlock' | 'width', never>;
     /**
      * Use this to either show or hide the popup.
      * When set to `false` the popup will not render anything to the DOM.
@@ -249,6 +262,7 @@ export type FocusManagerHook = {
     autoFocus: boolean;
     shouldDisableFocusTrap: boolean;
     shouldReturnFocus: boolean;
+    shouldRenderToParent?: boolean;
 };
 export type RepositionOnUpdateProps = PropsWithChildren<{
     update: PopperChildrenProps['update'];

package/dist/types/use-appearance.d.ts

@@ -0,0 +1,15 @@
+/**
+ * **usePopupAppearance()**
+ *
+ * Abstracts away calculating the appearance for a popup including if it should
+ * be portalled or not, this is done to ensure that if the popup needs to render
+ * as a modal that it is also forcibly portalled. If it's not portalled when rendering
+ * as a modal it will appear below the top bar.
+ */
+export declare function usePopupAppearance({ appearance: _appearance, shouldRenderToParent: _shouldRenderToParent, }: {
+    appearance: 'default' | 'UNSAFE_modal-below-sm';
+    shouldRenderToParent?: boolean;
+}): {
+    appearance: "default" | "UNSAFE_modal-below-sm";
+    shouldRenderToParent: boolean | undefined;
+};

package/dist/types/use-focus-manager.d.ts

@@ -1,2 +1,2 @@
 import { type FocusManagerHook } from './types';
-export declare const useFocusManager: ({ initialFocusRef, popupRef, triggerRef, autoFocus, shouldCloseOnTab, shouldDisableFocusTrap, shouldReturnFocus, }: FocusManagerHook) => void;
+export declare const useFocusManager: ({ initialFocusRef, popupRef, triggerRef, autoFocus, shouldCloseOnTab, shouldDisableFocusTrap, shouldReturnFocus, shouldRenderToParent, }: FocusManagerHook) => void;

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

@@ -36,7 +36,7 @@ export type PopupTriggerProps = {
  * It must be a child of the Popup component.
  */
 export declare const PopupTrigger: ({ children }: PopupTriggerProps) => JSX.Element;
-type CommonContentPopupProps = Pick<LegacyPopupProps, 'boundary' | 'offset' | 'onClose' | 'testId' | 'placement' | 'fallbackPlacements' | 'popupComponent' | 'shouldFlip' | 'rootBoundary' | 'autoFocus' | 'shouldRenderToParent' | 'shouldUseCaptureOnOutsideClick' | 'shouldDisableFocusLock' | 'strategy' | 'zIndex' | 'shouldFitViewport'> & {
+type CommonContentPopupProps = Pick<LegacyPopupProps, 'xcss' | 'appearance' | 'boundary' | 'offset' | 'onClose' | 'testId' | 'placement' | 'fallbackPlacements' | 'popupComponent' | 'shouldFlip' | 'rootBoundary' | 'autoFocus' | 'shouldRenderToParent' | 'shouldUseCaptureOnOutsideClick' | 'shouldDisableFocusLock' | 'strategy' | 'zIndex' | 'shouldFitViewport'> & {
     children: (props: ContentProps) => React.ReactNode;
 };
 type ShouldFitContainerContentPopupProps = CommonContentPopupProps & {
@@ -55,5 +55,5 @@ export type PopupContentProps = ShouldFitContainerContentPopupProps | StandardPo
  *
  * It must be a child of the Popup component.
  */
-export declare const PopupContent: ({ children, boundary, offset, strategy, onClose, testId, rootBoundary, shouldFlip, placement, fallbackPlacements, popupComponent, autoFocus, zIndex, shouldUseCaptureOnOutsideClick, shouldRenderToParent, shouldDisableFocusLock, shouldFitContainer, shouldFitViewport, }: PopupContentProps) => 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, }: PopupContentProps) => JSX.Element | null;
 export {};

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

@@ -1,4 +1,4 @@
 import { jsx } from '@emotion/react';
 import { type PopperWrapperProps } from './types';
-declare function PopperWrapper({ 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, }: PopperWrapperProps): jsx.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, }: PopperWrapperProps): jsx.JSX.Element;
 export default PopperWrapper;

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

@@ -1,4 +1,5 @@
 import { type ComponentType, type CSSProperties, type Dispatch, type PropsWithChildren, type default as React, type ReactNode, type Ref, type SetStateAction } from 'react';
+import { type StrictXCSSProp } from '@atlaskit/css';
 import { type Modifier, type Placement, type PopperChildrenProps } from '@atlaskit/popper';
 export interface TriggerProps {
     ref: Ref<any>;
@@ -53,6 +54,7 @@ export interface PopupComponentProps {
      * Style that should be assigned to the root element.
      */
     style: CSSProperties;
+    xcss?: StrictXCSSProp<'padding' | 'paddingInline' | 'paddingBlock' | 'width', never>;
     /**
      * Tab index passed through by the parent popup.
      */
@@ -69,6 +71,11 @@ export interface PopupComponentProps {
      * The default is `false`.
      */
     shouldFitContainer?: boolean;
+    /**
+     * The "default" appearance is used for standard popups.
+     * The "UNSAFE_modal-below-sm" appearance makes the popup appear as a modal when the viewport is smaller than "sm".
+     */
+    appearance?: 'default' | 'UNSAFE_modal-below-sm';
     /**
      * Use this to set the accessibility role for the popup.
      * We strongly recommend using only `menu` or `dialog`.
@@ -76,6 +83,12 @@ export interface PopupComponentProps {
     role?: string;
 }
 interface BaseProps {
+    /**
+     * The "default" appearance is used for standard popups.
+     * The "UNSAFE_modal-below-sm" appearance makes the popup appear as a modal when the viewport is smaller than "sm".
+     */
+    appearance?: 'default' | 'UNSAFE_modal-below-sm';
+    xcss?: StrictXCSSProp<'padding' | 'paddingInline' | 'paddingBlock' | 'width', never>;
     /**
      * Use this to either show or hide the popup.
      * When set to `false` the popup will not render anything to the DOM.
@@ -252,6 +265,7 @@ export type FocusManagerHook = {
     autoFocus: boolean;
     shouldDisableFocusTrap: boolean;
     shouldReturnFocus: boolean;
+    shouldRenderToParent?: boolean;
 };
 export type RepositionOnUpdateProps = PropsWithChildren<{
     update: PopperChildrenProps['update'];

package/dist/types-ts4.5/use-appearance.d.ts

@@ -0,0 +1,15 @@
+/**
+ * **usePopupAppearance()**
+ *
+ * Abstracts away calculating the appearance for a popup including if it should
+ * be portalled or not, this is done to ensure that if the popup needs to render
+ * as a modal that it is also forcibly portalled. If it's not portalled when rendering
+ * as a modal it will appear below the top bar.
+ */
+export declare function usePopupAppearance({ appearance: _appearance, shouldRenderToParent: _shouldRenderToParent, }: {
+    appearance: 'default' | 'UNSAFE_modal-below-sm';
+    shouldRenderToParent?: boolean;
+}): {
+    appearance: "default" | "UNSAFE_modal-below-sm";
+    shouldRenderToParent: boolean | undefined;
+};

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

@@ -1,2 +1,2 @@
 import { type FocusManagerHook } from './types';
-export declare const useFocusManager: ({ initialFocusRef, popupRef, triggerRef, autoFocus, shouldCloseOnTab, shouldDisableFocusTrap, shouldReturnFocus, }: FocusManagerHook) => void;
+export declare const useFocusManager: ({ initialFocusRef, popupRef, triggerRef, autoFocus, shouldCloseOnTab, shouldDisableFocusTrap, shouldReturnFocus, shouldRenderToParent, }: FocusManagerHook) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/popup",
-	"version": "1.26.0",
+	"version": "1.27.1",
 	"description": "A popup displays brief content in an overlay.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -36,15 +36,16 @@
 		}
 	},
 	"dependencies": {
-		"@atlaskit/ds-lib": "^2.5.0",
+		"@atlaskit/css": "^0.5.0",
+		"@atlaskit/ds-lib": "^2.6.0",
 		"@atlaskit/focus-ring": "^1.6.0",
 		"@atlaskit/layering": "^0.4.0",
 		"@atlaskit/platform-feature-flags": "^0.3.0",
 		"@atlaskit/popper": "^6.3.0",
 		"@atlaskit/portal": "^4.9.0",
-		"@atlaskit/primitives": "^12.1.0",
+		"@atlaskit/primitives": "^12.2.0",
 		"@atlaskit/theme": "^13.0.0",
-		"@atlaskit/tokens": "^1.60.0",
+		"@atlaskit/tokens": "^1.61.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",
 		"bind-event-listener": "^3.0.0",
@@ -60,15 +61,17 @@
 		"@af/accessibility-testing": "*",
 		"@af/integration-testing": "*",
 		"@af/visual-regression": "*",
-		"@atlaskit/button": "^20.1.0",
+		"@atlaskit/button": "^20.2.0",
 		"@atlaskit/icon": "^22.18.0",
 		"@atlaskit/ssr": "*",
 		"@atlaskit/textfield": "^6.5.0",
 		"@atlaskit/toggle": "^13.4.0",
 		"@atlaskit/visual-regression": "*",
 		"@atlassian/feature-flags-test-utils": "*",
+		"@compiled/react": "^0.17.3",
 		"@testing-library/dom": "^10.1.0",
 		"@testing-library/react": "^12.1.5",
+		"@testing-library/react-hooks": "^8.0.1",
 		"@testing-library/user-event": "^14.4.3",
 		"ast-types": "^0.13.3",
 		"jscodeshift": "^0.13.0",