@atlaskit/popup 1.25.0 → 1.27.0

package/CHANGELOG.md

@@ -1,5 +1,31 @@
 # @atlaskit/popup
 
+## 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
+
+- [#142538](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/142538)
+  [`3979d0196514a`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/3979d0196514a) -
+  [ux] We are testing focus ring for popup wrapper `onKeyDown`. Changes are implemented behind
+  feature flag. If this fix is successful, it will be available in a later release.
+
 ## 1.25.0
 
 ### Minor Changes

package/dist/cjs/compositional/popup.js

@@ -16,9 +16,10 @@ 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 && Object.prototype.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; }
+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; }
 var IsOpenContext = /*#__PURE__*/(0, _react.createContext)(false);
 var IdContext = /*#__PURE__*/(0, _react.createContext)(undefined);
 var TriggerRefContext = /*#__PURE__*/(0, _react.createContext)(null);
@@ -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

@@ -12,7 +12,9 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("react");
 var _react2 = require("@emotion/react");
+var _focusRing = _interopRequireDefault(require("@atlaskit/focus-ring"));
 var _layering = require("@atlaskit/layering");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _popper = require("@atlaskit/popper");
 var _colors = require("@atlaskit/theme/colors");
 var _constants = require("@atlaskit/theme/constants");
@@ -20,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), ")"),
@@ -44,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,
@@ -87,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],
@@ -96,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)({
@@ -145,7 +163,11 @@ function PopperWrapper(_ref) {
       style = _ref2.style,
       placement = _ref2.placement,
       update = _ref2.update;
-    return (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,
@@ -165,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
       ,
@@ -180,6 +202,11 @@ function PopperWrapper(_ref) {
       onClose: onClose,
       setInitialFocusRef: setInitialFocusRef
     })));
+    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/reposition-on-update.js

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.RepositionOnUpdate = void 0;
 var _react = _interopRequireWildcard(require("react"));
 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 && Object.prototype.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; }
+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; }
 // eslint-disable-next-line @repo/internal/react/require-jsdoc
 var RepositionOnUpdate = exports.RepositionOnUpdate = function RepositionOnUpdate(_ref) {
   var children = _ref.children,

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-close-manager.js

@@ -49,10 +49,12 @@ var useCloseManager = exports.useCloseManager = function useCloseManager(_ref) {
       }
       if (shouldDisableFocusTrap && (0, _platformFeatureFlags.fg)('platform_dst_popup-disable-focuslock')) {
         // Restoring the normal focus order for trigger.
-        triggerRef === null || triggerRef === void 0 || triggerRef.setAttribute('tabindex', '0');
-        if (popupRef && autoFocus) {
-          popupRef.setAttribute('tabindex', '0');
-        }
+        requestFrame(function () {
+          triggerRef === null || triggerRef === void 0 || triggerRef.setAttribute('tabindex', '0');
+          if (popupRef && autoFocus) {
+            popupRef.setAttribute('tabindex', '0');
+          }
+        });
       }
     };
 

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,9 +3,11 @@ 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';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { Popper } from '@atlaskit/popper';
 import { N0, N50A, N60A } from '@atlaskit/theme/colors';
 import { layers } from '@atlaskit/theme/constants';
@@ -13,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}`})`,
@@ -33,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,
@@ -75,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({
@@ -128,7 +145,11 @@ function PopperWrapper({
     placement,
     update
   }) => {
-    return 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,
@@ -148,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
       ,
@@ -163,6 +184,11 @@ function PopperWrapper({
       onClose,
       setInitialFocusRef
     })));
+    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-close-manager.js

@@ -44,10 +44,12 @@ export const useCloseManager = ({
       }
       if (shouldDisableFocusTrap && fg('platform_dst_popup-disable-focuslock')) {
         // Restoring the normal focus order for trigger.
-        triggerRef === null || triggerRef === void 0 ? void 0 : triggerRef.setAttribute('tabindex', '0');
-        if (popupRef && autoFocus) {
-          popupRef.setAttribute('tabindex', '0');
-        }
+        requestFrame(() => {
+          triggerRef === null || triggerRef === void 0 ? void 0 : triggerRef.setAttribute('tabindex', '0');
+          if (popupRef && autoFocus) {
+            popupRef.setAttribute('tabindex', '0');
+          }
+        });
       }
     };
 

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,15 +3,17 @@ 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';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { Popper } from '@atlaskit/popper';
 import { N0, N50A, N60A } from '@atlaskit/theme/colors';
 import { layers } from '@atlaskit/theme/constants';
@@ -19,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), ")"),
@@ -37,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,
@@ -80,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],
@@ -89,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({
@@ -138,7 +156,11 @@ function PopperWrapper(_ref) {
       style = _ref2.style,
       placement = _ref2.placement,
       update = _ref2.update;
-    return 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,
@@ -158,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
       ,
@@ -173,6 +195,11 @@ function PopperWrapper(_ref) {
       onClose: onClose,
       setInitialFocusRef: setInitialFocusRef
     })));
+    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-close-manager.js

@@ -41,10 +41,12 @@ export var useCloseManager = function useCloseManager(_ref) {
       }
       if (shouldDisableFocusTrap && fg('platform_dst_popup-disable-focuslock')) {
         // Restoring the normal focus order for trigger.
-        triggerRef === null || triggerRef === void 0 || triggerRef.setAttribute('tabindex', '0');
-        if (popupRef && autoFocus) {
-          popupRef.setAttribute('tabindex', '0');
-        }
+        requestFrame(function () {
+          triggerRef === null || triggerRef === void 0 || triggerRef.setAttribute('tabindex', '0');
+          if (popupRef && autoFocus) {
+            popupRef.setAttribute('tabindex', '0');
+          }
+        });
       }
     };
 

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.

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-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.

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/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/popup",
-	"version": "1.25.0",
+	"version": "1.27.0",
 	"description": "A popup displays brief content in an overlay.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -36,14 +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.59.0",
+		"@atlaskit/tokens": "^1.60.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",
 		"bind-event-listener": "^3.0.0",
@@ -60,14 +62,16 @@
 		"@af/integration-testing": "*",
 		"@af/visual-regression": "*",
 		"@atlaskit/button": "^20.1.0",
-		"@atlaskit/icon": "^22.16.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",
@@ -114,6 +118,9 @@
 		},
 		"sibling-dropdown-close-issue": {
 			"type": "boolean"
+		},
+		"platform-design-system-apply-popup-wrapper-focus": {
+			"type": "boolean"
 		}
 	},
 	"homepage": "https://atlassian.design/components/popup/"