@atlaskit/popup 3.0.0 → 4.0.0

package/CHANGELOG.md

@@ -1,5 +1,39 @@
 # @atlaskit/popup
 
+## 4.0.0
+
+### Major Changes
+
+- [#137034](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/137034)
+  [`a832dd489aab3`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/a832dd489aab3) - -
+  Migrated from `@emotion/react` to `@compiled/react` in order to improve performance, align with
+  the rest of the Atlaskit techstack, and support React 18 Streaming SSR.
+
+  - Added a `className` prop for applying a focus ring to the custom popup container (Currently
+    controlled by the feature flag `platform-design-system-apply-popup-wrapper-focus`). See usage
+    example [here](https://atlassian.design/components/popup/examples#customization).
+
+  Please note, in order to use this version of `@atlaskit/popup`, you will need to ensure that your
+  bundler is configured to handle `.css` imports correctly.
+
+  Most bundlers come with built-in support for `.css` imports, so you may not need to do anything.
+  If you are using a different bundler, please refer to the documentation for that bundler to
+  understand how to handle `.css` imports. For more information on the migration, please refer to
+  [RFC-73 Migrating our components to Compiled CSS-in-JS](https://community.developer.atlassian.com/t/rfc-73-migrating-our-components-to-compiled-css-in-js/85953).
+
+### Patch Changes
+
+- Updated dependencies
+
+## 3.0.1
+
+### Patch Changes
+
+- [#134955](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/134955)
+  [`ba294ad0536de`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/ba294ad0536de) -
+  An onClose listener is being provided to the experimental open layer observer.
+- Updated dependencies
+
 ## 3.0.0
 
 ### Major Changes

package/dist/cjs/compositional/popup.js

@@ -15,7 +15,6 @@ var _layering = require("@atlaskit/layering");
 var _openLayerObserver = require("@atlaskit/layering/experimental/open-layer-observer");
 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");
@@ -99,7 +98,7 @@ var PopupTrigger = exports.PopupTrigger = function PopupTrigger(_ref2) {
     });
   });
 };
-var defaultLayer = _constants.layers.layer();
+var defaultLayer = 400;
 /**
  * Disables popper.js GPU acceleration for this popup.
  * This means only positioning will be used, without any transforms.
@@ -161,8 +160,12 @@ var PopupContent = exports.PopupContent = function PopupContent(_ref4) {
     }),
     appearance = _usePopupAppearance.appearance,
     shouldRenderToParent = _usePopupAppearance.shouldRenderToParent;
+  var handleOpenLayerObserverCloseSignal = (0, _react.useCallback)(function () {
+    onClose === null || onClose === void 0 || onClose(null);
+  }, [onClose]);
   (0, _openLayerObserver.useNotifyOpenLayerObserver)({
-    isOpen: isOpen
+    isOpen: isOpen,
+    onClose: handleOpenLayerObserverCloseSignal
   });
   if (!isOpen) {
     return null;

package/dist/cjs/popper-wrapper.compiled.css

@@ -0,0 +1,20 @@
+
+._1r04idpf{inset:0}
+._2rkoglpi{border-radius:var(--ds-border-radius,4px)}
+._dk5d1b66{inset-inline:var(--ds-space-050,4px)}._152t1b66{inset-block-start:var(--ds-space-050,4px)}
+._16qs1cd0{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #091e4226,0 0 1px #091e424f)}
+._18m91wug{overflow-y:auto}
+._1bsb1osq{width:100%}
+._1e0c1ule{display:block}
+._1pby1nn1{z-index:400}
+._1q1l1bhr{--ds-elevation-surface-current:var(--ds-surface-overlay,#fff)}
+._1reo1wug{overflow-x:auto}
+._bfhk10xm{background-color:var(--ds-blanket,#091e427d)}
+._bfhk1bhr{background-color:var(--ds-surface-overlay,#fff)}
+._c71ldtre{max-height:50vh}
+._kqsw1n9t{position:fixed}
+._syaz1fxt{color:var(--ds-text,#172b4d)}
+._vchhusvi{box-sizing:border-box}
+._1hvw1o36:focus{outline-width:medium}
+._49pcglyw:focus{outline-style:none}
+._nt751r31:focus{outline-color:currentColor}

package/dist/cjs/popper-wrapper.js

@@ -1,76 +1,50 @@
+/* popper-wrapper.tsx generated by @compiled/babel-plugin v0.36.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+require("./popper-wrapper.compiled.css");
+var _react = _interopRequireWildcard(require("react"));
+var React = _react;
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-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 _runtime = require("@compiled/react/runtime");
 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");
-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", "appearance", "xcss"];
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-var fullWidthStyles = (0, _react2.css)({
-  width: '100%'
-});
-var rootStyles = (0, _react2.css)((0, _defineProperty2.default)((0, _defineProperty2.default)({
-  display: 'block',
-  boxSizing: 'border-box',
-  zIndex: _constants.layers.layer(),
-  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), ")"),
-  // Resetting text color for portal content.
-  // Otherwise, when rendering into the parent (not using a portal),
-  // the text color can be inherited from the parent.
-  color: "var(--ds-text, #172B4D)"
-}, _tokens.CURRENT_SURFACE_CSS_VAR, "var(--ds-surface-overlay, ".concat(_colors.N0, ")")), '&:focus', {
-  outline: 'none'
-}));
-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 _excluded = ["shouldRenderToParent", "shouldFitContainer", "children", "appearance", "className"];
+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; }
+var LOCAL_CURRENT_SURFACE_CSS_VAR = '--ds-elevation-surface-current';
+var fullWidthStyles = null;
+var wrapperStyles = {
+  root: "_2rkoglpi _1e0c1ule _vchhusvi _1pby1nn1 _bfhk1bhr _16qs1cd0 _syaz1fxt _1q1l1bhr _nt751r31 _49pcglyw _1hvw1o36"
+};
+var scrollableStyles = null;
+var blanketStyles = null;
+var modalStyles = null;
+var focusRingStyles = {
+  root: "_mizu194a _1ah31bk5 _ra3xnqa1 _128m1bk5 _1cvmnqa1 _4davt94y"
+};
 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,
+    className = props.className,
     htmlAttributes = (0, _objectWithoutProperties2.default)(props, _excluded);
-  return (0, _react2.jsx)("div", (0, _extends2.default)({
-    // Because we're using Emotion local jsx namespace we have to coerce xcss prop to a string.
-    // When we're fully on Compiled its local jsx namespace accepts the output of xcss prop.
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- This rule still fails because of the TS assertion
-    className: xcss,
-    css: [rootStyles, appearance === 'UNSAFE_modal-below-sm' && modalStyles, !shouldRenderToParent && scrollableStyles, shouldFitContainer && fullWidthStyles]
+  return /*#__PURE__*/React.createElement("div", (0, _extends2.default)({
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
+    className: (0, _runtime.ax)([wrapperStyles.root, appearance === 'UNSAFE_modal-below-sm' && "_dk5d1b66 _c71ldtre _kqsw1n9t _152t1b66", !shouldRenderToParent && "_1reo1wug _18m91wug", shouldFitContainer && "_1bsb1osq", className])
   }, htmlAttributes, {
     ref: ref
   }), children);
@@ -152,7 +126,7 @@ function PopperWrapper(_ref) {
       }
     }].concat((0, _toConsumableArray2.default)(modifiers || []));
   }, [shouldFlip, rootBoundary, boundary, fallbackPlacements, modifiers]);
-  return (0, _react2.jsx)(_popper.Popper, {
+  return /*#__PURE__*/React.createElement(_popper.Popper, {
     placement: placement,
     offset: offset,
     modifiers: mergedModifiers,
@@ -163,8 +137,14 @@ function PopperWrapper(_ref) {
       style = _ref2.style,
       placement = _ref2.placement,
       update = _ref2.update;
-    var popupContainer = (0, _react2.jsx)(PopupContainer, {
-      xcss: xcss,
+    var popupContainer = /*#__PURE__*/React.createElement(PopupContainer
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
+    , {
+      className: (0, _runtime.ax)([xcss,
+      // @ts-expect-error: `ax` is not typed correctly
+      !initialFocusRef &&
+      // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
+      (0, _platformFeatureFlags.fg)('platform-design-system-apply-popup-wrapper-focus') && focusRingStyles.root]),
       appearance: appearance,
       id: id,
       "data-ds--level": currentLevel,
@@ -192,7 +172,7 @@ function PopperWrapper(_ref) {
       tabIndex: autoFocus ? 0 : undefined,
       shouldRenderToParent: shouldRenderToParent,
       shouldFitContainer: shouldFitContainer
-    }, (0, _react2.jsx)(_repositionOnUpdate.RepositionOnUpdate, {
+    }, /*#__PURE__*/React.createElement(_repositionOnUpdate.RepositionOnUpdate, {
       update: update
     }, content({
       update: update,
@@ -200,10 +180,8 @@ 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
+    return /*#__PURE__*/React.createElement(_react.Fragment, null, popupContainer, appearance === 'UNSAFE_modal-below-sm' && /*#__PURE__*/React.createElement("div", {
+      className: (0, _runtime.ax)(["_1r04idpf _kqsw1n9t _bfhk10xm"])
     }));
   });
 }

package/dist/cjs/popup.compiled.css

@@ -0,0 +1 @@
+._kqswh2mm{position:relative}

package/dist/cjs/popup.js

@@ -1,37 +1,35 @@
+/* popup.tsx generated by @compiled/babel-plugin v0.36.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Popup = void 0;
+require("./popup.compiled.css");
+var _react = _interopRequireWildcard(require("react"));
+var React = _react;
+var _runtime = require("@compiled/react/runtime");
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _react = require("react");
-var _react2 = require("@emotion/react");
 var _useId = require("@atlaskit/ds-lib/use-id");
 var _layering = require("@atlaskit/layering");
 var _openLayerObserver = require("@atlaskit/layering/experimental/open-layer-observer");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _popper = require("@atlaskit/popper");
 var _portal = _interopRequireDefault(require("@atlaskit/portal"));
-var _primitives = require("@atlaskit/primitives");
-var _constants = require("@atlaskit/theme/constants");
+var _compiled = require("@atlaskit/primitives/compiled");
 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");
+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; }
 /* eslint-disable @repo/internal/react/require-jsdoc */
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-
-var defaultLayer = _constants.layers.layer();
-var wrapperStyles = (0, _primitives.xcss)({
-  position: 'relative'
-});
+var defaultLayer = 400;
+var wrapperStyles = {
+  root: "_kqswh2mm"
+};
 var Popup = exports.Popup = /*#__PURE__*/(0, _react.memo)(function (_ref) {
   var xcss = _ref.xcss,
     _ref$appearance = _ref.appearance,
@@ -86,12 +84,16 @@ var Popup = exports.Popup = /*#__PURE__*/(0, _react.memo)(function (_ref) {
     appearance = _usePopupAppearance.appearance,
     shouldRenderToParent = _usePopupAppearance.shouldRenderToParent;
   var id = providedId || generatedId;
+  var handleOpenLayerObserverCloseSignal = (0, _react.useCallback)(function () {
+    onClose === null || onClose === void 0 || onClose(null);
+  }, [onClose]);
   (0, _openLayerObserver.useNotifyOpenLayerObserver)({
-    isOpen: isOpen
+    isOpen: isOpen,
+    onClose: handleOpenLayerObserverCloseSignal
   });
-  var renderPopperWrapper = (0, _react2.jsx)(_layering.Layering, {
+  var renderPopperWrapper = /*#__PURE__*/React.createElement(_layering.Layering, {
     isDisabled: false
-  }, (0, _react2.jsx)(_popperWrapper.default, {
+  }, /*#__PURE__*/React.createElement(_popperWrapper.default, {
     xcss: xcss,
     appearance: appearance,
     content: content,
@@ -120,7 +122,7 @@ var Popup = exports.Popup = /*#__PURE__*/(0, _react.memo)(function (_ref) {
     modifiers: modifiers,
     shouldFitViewport: shouldFitViewport
   }));
-  var popupContent = (0, _react2.jsx)(_popper.Manager, null, (0, _react2.jsx)(_popper.Reference, null, function (_ref2) {
+  var popupContent = /*#__PURE__*/React.createElement(_popper.Manager, null, /*#__PURE__*/React.createElement(_popper.Reference, null, function (_ref2) {
     var ref = _ref2.ref;
     return trigger({
       ref: !(0, _platformFeatureFlags.fg)('platform-design-system-popup-ref') ? getMergedTriggerRef(ref, setTriggerRef, isOpen) : getMergedTriggerRefNew(ref, setTriggerRef),
@@ -128,12 +130,12 @@ var Popup = exports.Popup = /*#__PURE__*/(0, _react.memo)(function (_ref) {
       'aria-expanded': isOpen,
       'aria-haspopup': role === 'dialog' && (0, _platformFeatureFlags.fg)('platform_dst_popup-disable-focuslock') ? 'dialog' : true
     });
-  }), isOpen && (shouldRenderToParent || shouldFitContainer ? renderPopperWrapper : (0, _react2.jsx)(_portal.default, {
+  }), isOpen && (shouldRenderToParent || shouldFitContainer ? renderPopperWrapper : /*#__PURE__*/React.createElement(_portal.default, {
     zIndex: zIndex
   }, renderPopperWrapper)));
   if (shouldFitContainer) {
-    return (0, _react2.jsx)(_primitives.Box, {
-      xcss: wrapperStyles
+    return /*#__PURE__*/React.createElement(_compiled.Box, {
+      xcss: wrapperStyles.root
     }, popupContent);
   }
   return popupContent;

package/dist/cjs/use-appearance.js

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.usePopupAppearance = usePopupAppearance;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = require("react");
-var _responsive = require("@atlaskit/primitives/responsive");
+var _compiled = require("@atlaskit/primitives/compiled");
 /**
  * **usePopupAppearance()**
  *
@@ -19,7 +19,7 @@ var _responsive = require("@atlaskit/primitives/responsive");
 function usePopupAppearance(_ref) {
   var _appearance = _ref.appearance,
     _shouldRenderToParent = _ref.shouldRenderToParent;
-  var mq = (0, _responsive.UNSAFE_useMediaQuery)('below.sm', function (e) {
+  var mq = (0, _compiled.UNSAFE_useMediaQuery)('below.sm', function (e) {
     setIsSmallViewport(!!e.matches);
   });
   var _useState = (0, _react.useState)(!!(mq !== null && mq !== void 0 && mq.matches)),

package/dist/es2019/compositional/popup.js

@@ -1,4 +1,4 @@
-import React, { createContext, useContext, useState } from 'react';
+import React, { createContext, useCallback, useContext, useState } from 'react';
 import invariant from 'tiny-invariant';
 import noop from '@atlaskit/ds-lib/noop';
 import { useId } from '@atlaskit/ds-lib/use-id';
@@ -6,7 +6,6 @@ import { Layering } from '@atlaskit/layering';
 import { useNotifyOpenLayerObserver } from '@atlaskit/layering/experimental/open-layer-observer';
 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';
@@ -85,7 +84,7 @@ export const PopupTrigger = ({
     'aria-haspopup': true
   }));
 };
-const defaultLayer = layers.layer();
+const defaultLayer = 400;
 /**
  * Disables popper.js GPU acceleration for this popup.
  * This means only positioning will be used, without any transforms.
@@ -140,8 +139,12 @@ export const PopupContent = ({
     appearance: inAppearance,
     shouldRenderToParent: inShouldRenderToParent
   });
+  const handleOpenLayerObserverCloseSignal = useCallback(() => {
+    onClose === null || onClose === void 0 ? void 0 : onClose(null);
+  }, [onClose]);
   useNotifyOpenLayerObserver({
-    isOpen
+    isOpen,
+    onClose: handleOpenLayerObserverCloseSignal
   });
   if (!isOpen) {
     return null;

package/dist/es2019/popper-wrapper.compiled.css

@@ -0,0 +1,20 @@
+
+._1r04idpf{inset:0}
+._2rkoglpi{border-radius:var(--ds-border-radius,4px)}
+._dk5d1b66{inset-inline:var(--ds-space-050,4px)}._152t1b66{inset-block-start:var(--ds-space-050,4px)}
+._16qs1cd0{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #091e4226,0 0 1px #091e424f)}
+._18m91wug{overflow-y:auto}
+._1bsb1osq{width:100%}
+._1e0c1ule{display:block}
+._1pby1nn1{z-index:400}
+._1q1l1bhr{--ds-elevation-surface-current:var(--ds-surface-overlay,#fff)}
+._1reo1wug{overflow-x:auto}
+._bfhk10xm{background-color:var(--ds-blanket,#091e427d)}
+._bfhk1bhr{background-color:var(--ds-surface-overlay,#fff)}
+._c71ldtre{max-height:50vh}
+._kqsw1n9t{position:fixed}
+._syaz1fxt{color:var(--ds-text,#172b4d)}
+._vchhusvi{box-sizing:border-box}
+._1hvw1o36:focus{outline-width:medium}
+._49pcglyw:focus{outline-style:none}
+._nt751r31:focus{outline-color:currentColor}

package/dist/es2019/popper-wrapper.js

@@ -1,68 +1,38 @@
+/* popper-wrapper.tsx generated by @compiled/babel-plugin v0.36.1 */
 import _extends from "@babel/runtime/helpers/extends";
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
+import "./popper-wrapper.compiled.css";
+import * as React from 'react';
 import { forwardRef, Fragment, useMemo, useState } from 'react';
-import { css, jsx } from '@emotion/react';
-import FocusRing from '@atlaskit/focus-ring';
+import { ax, ix } from '@compiled/react/runtime';
 import { 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';
-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 fullWidthStyles = css({
-  width: '100%'
-});
-const rootStyles = css({
-  display: 'block',
-  boxSizing: 'border-box',
-  zIndex: layers.layer(),
-  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}`})`,
-  // Resetting text color for portal content.
-  // Otherwise, when rendering into the parent (not using a portal),
-  // the text color can be inherited from the parent.
-  color: "var(--ds-text, #172B4D)",
-  [CURRENT_SURFACE_CSS_VAR]: `var(--ds-surface-overlay, ${N0})`,
-  '&:focus': {
-    outline: 'none'
-  }
-});
-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 LOCAL_CURRENT_SURFACE_CSS_VAR = '--ds-elevation-surface-current';
+const fullWidthStyles = null;
+const wrapperStyles = {
+  root: "_2rkoglpi _1e0c1ule _vchhusvi _1pby1nn1 _bfhk1bhr _16qs1cd0 _syaz1fxt _1q1l1bhr _nt751r31 _49pcglyw _1hvw1o36"
+};
+const scrollableStyles = null;
+const blanketStyles = null;
+const modalStyles = null;
+const focusRingStyles = {
+  root: "_mizu194a _1ah31bk5 _ra3xnqa1 _128m1bk5 _1cvmnqa1 _4davt94y"
+};
 const DefaultPopupComponent = /*#__PURE__*/forwardRef((props, ref) => {
   const {
     shouldRenderToParent,
     shouldFitContainer,
     children,
     appearance,
-    xcss,
+    className,
     ...htmlAttributes
   } = props;
-  return jsx("div", _extends({
-    // Because we're using Emotion local jsx namespace we have to coerce xcss prop to a string.
-    // When we're fully on Compiled its local jsx namespace accepts the output of xcss prop.
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- This rule still fails because of the TS assertion
-    className: xcss,
-    css: [rootStyles, appearance === 'UNSAFE_modal-below-sm' && modalStyles, !shouldRenderToParent && scrollableStyles, shouldFitContainer && fullWidthStyles]
+  return /*#__PURE__*/React.createElement("div", _extends({
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
+    className: ax([wrapperStyles.root, appearance === 'UNSAFE_modal-below-sm' && "_dk5d1b66 _c71ldtre _kqsw1n9t _152t1b66", !shouldRenderToParent && "_1reo1wug _18m91wug", shouldFitContainer && "_1bsb1osq", className])
   }, htmlAttributes, {
     ref: ref
   }), children);
@@ -134,7 +104,7 @@ function PopperWrapper({
       fallbackPlacements
     }
   }, ...(modifiers || [])], [shouldFlip, rootBoundary, boundary, fallbackPlacements, modifiers]);
-  return jsx(Popper, {
+  return /*#__PURE__*/React.createElement(Popper, {
     placement: placement,
     offset: offset,
     modifiers: mergedModifiers,
@@ -146,8 +116,14 @@ function PopperWrapper({
     placement,
     update
   }) => {
-    const popupContainer = jsx(PopupContainer, {
-      xcss: xcss,
+    const popupContainer = /*#__PURE__*/React.createElement(PopupContainer
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
+    , {
+      className: ax([xcss,
+      // @ts-expect-error: `ax` is not typed correctly
+      !initialFocusRef &&
+      // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
+      fg('platform-design-system-apply-popup-wrapper-focus') && focusRingStyles.root]),
       appearance: appearance,
       id: id,
       "data-ds--level": currentLevel,
@@ -175,7 +151,7 @@ function PopperWrapper({
       tabIndex: autoFocus ? 0 : undefined,
       shouldRenderToParent: shouldRenderToParent,
       shouldFitContainer: shouldFitContainer
-    }, jsx(RepositionOnUpdate, {
+    }, /*#__PURE__*/React.createElement(RepositionOnUpdate, {
       update: update
     }, content({
       update,
@@ -183,10 +159,8 @@ 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
+    return /*#__PURE__*/React.createElement(Fragment, null, popupContainer, appearance === 'UNSAFE_modal-below-sm' && /*#__PURE__*/React.createElement("div", {
+      className: ax(["_1r04idpf _kqsw1n9t _bfhk10xm"])
     }));
   });
 }

package/dist/es2019/popup.compiled.css

@@ -0,0 +1 @@
+._kqswh2mm{position:relative}

package/dist/es2019/popup.js

@@ -1,28 +1,24 @@
+/* popup.tsx generated by @compiled/babel-plugin v0.36.1 */
 /* eslint-disable @repo/internal/react/require-jsdoc */
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-import { memo, useState } from 'react';
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { jsx } from '@emotion/react';
+import "./popup.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import { memo, useCallback, useState } from 'react';
 import { useId } from '@atlaskit/ds-lib/use-id';
 import { Layering } from '@atlaskit/layering';
 import { useNotifyOpenLayerObserver } from '@atlaskit/layering/experimental/open-layer-observer';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { Manager, Reference } from '@atlaskit/popper';
 import Portal from '@atlaskit/portal';
-import { Box, xcss } from '@atlaskit/primitives';
-import { layers } from '@atlaskit/theme/constants';
+import { Box } from '@atlaskit/primitives/compiled';
 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();
-const wrapperStyles = xcss({
-  position: 'relative'
-});
+const defaultLayer = 400;
+const wrapperStyles = {
+  root: "_kqswh2mm"
+};
 export const Popup = /*#__PURE__*/memo(({
   xcss,
   appearance: inAppearance = 'default',
@@ -65,12 +61,16 @@ export const Popup = /*#__PURE__*/memo(({
     shouldRenderToParent: inShouldRenderToParent
   });
   const id = providedId || generatedId;
+  const handleOpenLayerObserverCloseSignal = useCallback(() => {
+    onClose === null || onClose === void 0 ? void 0 : onClose(null);
+  }, [onClose]);
   useNotifyOpenLayerObserver({
-    isOpen
+    isOpen,
+    onClose: handleOpenLayerObserverCloseSignal
   });
-  const renderPopperWrapper = jsx(Layering, {
+  const renderPopperWrapper = /*#__PURE__*/React.createElement(Layering, {
     isDisabled: false
-  }, jsx(PopperWrapper, {
+  }, /*#__PURE__*/React.createElement(PopperWrapper, {
     xcss: xcss,
     appearance: appearance,
     content: content,
@@ -99,7 +99,7 @@ export const Popup = /*#__PURE__*/memo(({
     modifiers: modifiers,
     shouldFitViewport: shouldFitViewport
   }));
-  const popupContent = jsx(Manager, null, jsx(Reference, null, ({
+  const popupContent = /*#__PURE__*/React.createElement(Manager, null, /*#__PURE__*/React.createElement(Reference, null, ({
     ref
   }) => {
     return trigger({
@@ -108,12 +108,12 @@ export const Popup = /*#__PURE__*/memo(({
       'aria-expanded': isOpen,
       'aria-haspopup': role === 'dialog' && fg('platform_dst_popup-disable-focuslock') ? 'dialog' : true
     });
-  }), isOpen && (shouldRenderToParent || shouldFitContainer ? renderPopperWrapper : jsx(Portal, {
+  }), isOpen && (shouldRenderToParent || shouldFitContainer ? renderPopperWrapper : /*#__PURE__*/React.createElement(Portal, {
     zIndex: zIndex
   }, renderPopperWrapper)));
   if (shouldFitContainer) {
-    return jsx(Box, {
-      xcss: wrapperStyles
+    return /*#__PURE__*/React.createElement(Box, {
+      xcss: wrapperStyles.root
     }, popupContent);
   }
   return popupContent;

package/dist/es2019/use-appearance.js

@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { UNSAFE_useMediaQuery as useMediaQuery } from '@atlaskit/primitives/responsive';
+import { UNSAFE_useMediaQuery as useMediaQuery } from '@atlaskit/primitives/compiled';
 
 /**
  * **usePopupAppearance()**

package/dist/esm/compositional/popup.js

@@ -1,5 +1,5 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import React, { createContext, useContext, useState } from 'react';
+import React, { createContext, useCallback, useContext, useState } from 'react';
 import invariant from 'tiny-invariant';
 import noop from '@atlaskit/ds-lib/noop';
 import { useId } from '@atlaskit/ds-lib/use-id';
@@ -7,7 +7,6 @@ import { Layering } from '@atlaskit/layering';
 import { useNotifyOpenLayerObserver } from '@atlaskit/layering/experimental/open-layer-observer';
 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';
@@ -89,7 +88,7 @@ export var PopupTrigger = function PopupTrigger(_ref2) {
     });
   });
 };
-var defaultLayer = layers.layer();
+var defaultLayer = 400;
 /**
  * Disables popper.js GPU acceleration for this popup.
  * This means only positioning will be used, without any transforms.
@@ -151,8 +150,12 @@ export var PopupContent = function PopupContent(_ref4) {
     }),
     appearance = _usePopupAppearance.appearance,
     shouldRenderToParent = _usePopupAppearance.shouldRenderToParent;
+  var handleOpenLayerObserverCloseSignal = useCallback(function () {
+    onClose === null || onClose === void 0 || onClose(null);
+  }, [onClose]);
   useNotifyOpenLayerObserver({
-    isOpen: isOpen
+    isOpen: isOpen,
+    onClose: handleOpenLayerObserverCloseSignal
   });
   if (!isOpen) {
     return null;

package/dist/esm/popper-wrapper.compiled.css

@@ -0,0 +1,20 @@
+
+._1r04idpf{inset:0}
+._2rkoglpi{border-radius:var(--ds-border-radius,4px)}
+._dk5d1b66{inset-inline:var(--ds-space-050,4px)}._152t1b66{inset-block-start:var(--ds-space-050,4px)}
+._16qs1cd0{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #091e4226,0 0 1px #091e424f)}
+._18m91wug{overflow-y:auto}
+._1bsb1osq{width:100%}
+._1e0c1ule{display:block}
+._1pby1nn1{z-index:400}
+._1q1l1bhr{--ds-elevation-surface-current:var(--ds-surface-overlay,#fff)}
+._1reo1wug{overflow-x:auto}
+._bfhk10xm{background-color:var(--ds-blanket,#091e427d)}
+._bfhk1bhr{background-color:var(--ds-surface-overlay,#fff)}
+._c71ldtre{max-height:50vh}
+._kqsw1n9t{position:fixed}
+._syaz1fxt{color:var(--ds-text,#172b4d)}
+._vchhusvi{box-sizing:border-box}
+._1hvw1o36:focus{outline-width:medium}
+._49pcglyw:focus{outline-style:none}
+._nt751r31:focus{outline-color:currentColor}

package/dist/esm/popper-wrapper.js

@@ -1,69 +1,40 @@
+/* popper-wrapper.tsx generated by @compiled/babel-plugin v0.36.1 */
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 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", "appearance", "xcss"];
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
+var _excluded = ["shouldRenderToParent", "shouldFitContainer", "children", "appearance", "className"];
+import "./popper-wrapper.compiled.css";
+import * as React from 'react';
 import { forwardRef, Fragment, useMemo, useState } from 'react';
-import { css, jsx } from '@emotion/react';
-import FocusRing from '@atlaskit/focus-ring';
+import { ax, ix } from '@compiled/react/runtime';
 import { 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';
-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 fullWidthStyles = css({
-  width: '100%'
-});
-var rootStyles = css(_defineProperty(_defineProperty({
-  display: 'block',
-  boxSizing: 'border-box',
-  zIndex: layers.layer(),
-  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), ")"),
-  // Resetting text color for portal content.
-  // Otherwise, when rendering into the parent (not using a portal),
-  // the text color can be inherited from the parent.
-  color: "var(--ds-text, #172B4D)"
-}, CURRENT_SURFACE_CSS_VAR, "var(--ds-surface-overlay, ".concat(N0, ")")), '&:focus', {
-  outline: 'none'
-}));
-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 LOCAL_CURRENT_SURFACE_CSS_VAR = '--ds-elevation-surface-current';
+var fullWidthStyles = null;
+var wrapperStyles = {
+  root: "_2rkoglpi _1e0c1ule _vchhusvi _1pby1nn1 _bfhk1bhr _16qs1cd0 _syaz1fxt _1q1l1bhr _nt751r31 _49pcglyw _1hvw1o36"
+};
+var scrollableStyles = null;
+var blanketStyles = null;
+var modalStyles = null;
+var focusRingStyles = {
+  root: "_mizu194a _1ah31bk5 _ra3xnqa1 _128m1bk5 _1cvmnqa1 _4davt94y"
+};
 var DefaultPopupComponent = /*#__PURE__*/forwardRef(function (props, ref) {
   var shouldRenderToParent = props.shouldRenderToParent,
     shouldFitContainer = props.shouldFitContainer,
     children = props.children,
     appearance = props.appearance,
-    xcss = props.xcss,
+    className = props.className,
     htmlAttributes = _objectWithoutProperties(props, _excluded);
-  return jsx("div", _extends({
-    // Because we're using Emotion local jsx namespace we have to coerce xcss prop to a string.
-    // When we're fully on Compiled its local jsx namespace accepts the output of xcss prop.
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- This rule still fails because of the TS assertion
-    className: xcss,
-    css: [rootStyles, appearance === 'UNSAFE_modal-below-sm' && modalStyles, !shouldRenderToParent && scrollableStyles, shouldFitContainer && fullWidthStyles]
+  return /*#__PURE__*/React.createElement("div", _extends({
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
+    className: ax([wrapperStyles.root, appearance === 'UNSAFE_modal-below-sm' && "_dk5d1b66 _c71ldtre _kqsw1n9t _152t1b66", !shouldRenderToParent && "_1reo1wug _18m91wug", shouldFitContainer && "_1bsb1osq", className])
   }, htmlAttributes, {
     ref: ref
   }), children);
@@ -145,7 +116,7 @@ function PopperWrapper(_ref) {
       }
     }].concat(_toConsumableArray(modifiers || []));
   }, [shouldFlip, rootBoundary, boundary, fallbackPlacements, modifiers]);
-  return jsx(Popper, {
+  return /*#__PURE__*/React.createElement(Popper, {
     placement: placement,
     offset: offset,
     modifiers: mergedModifiers,
@@ -156,8 +127,14 @@ function PopperWrapper(_ref) {
       style = _ref2.style,
       placement = _ref2.placement,
       update = _ref2.update;
-    var popupContainer = jsx(PopupContainer, {
-      xcss: xcss,
+    var popupContainer = /*#__PURE__*/React.createElement(PopupContainer
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
+    , {
+      className: ax([xcss,
+      // @ts-expect-error: `ax` is not typed correctly
+      !initialFocusRef &&
+      // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
+      fg('platform-design-system-apply-popup-wrapper-focus') && focusRingStyles.root]),
       appearance: appearance,
       id: id,
       "data-ds--level": currentLevel,
@@ -185,7 +162,7 @@ function PopperWrapper(_ref) {
       tabIndex: autoFocus ? 0 : undefined,
       shouldRenderToParent: shouldRenderToParent,
       shouldFitContainer: shouldFitContainer
-    }, jsx(RepositionOnUpdate, {
+    }, /*#__PURE__*/React.createElement(RepositionOnUpdate, {
       update: update
     }, content({
       update: update,
@@ -193,10 +170,8 @@ 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
+    return /*#__PURE__*/React.createElement(Fragment, null, popupContainer, appearance === 'UNSAFE_modal-below-sm' && /*#__PURE__*/React.createElement("div", {
+      className: ax(["_1r04idpf _kqsw1n9t _bfhk10xm"])
     }));
   });
 }

package/dist/esm/popup.compiled.css

@@ -0,0 +1 @@
+._kqswh2mm{position:relative}

package/dist/esm/popup.js

@@ -1,29 +1,26 @@
+/* popup.tsx generated by @compiled/babel-plugin v0.36.1 */
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import "./popup.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
 /* eslint-disable @repo/internal/react/require-jsdoc */
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-import { memo, useState } from 'react';
 
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { jsx } from '@emotion/react';
+import { memo, useCallback, useState } from 'react';
 import { useId } from '@atlaskit/ds-lib/use-id';
 import { Layering } from '@atlaskit/layering';
 import { useNotifyOpenLayerObserver } from '@atlaskit/layering/experimental/open-layer-observer';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { Manager, Reference } from '@atlaskit/popper';
 import Portal from '@atlaskit/portal';
-import { Box, xcss } from '@atlaskit/primitives';
-import { layers } from '@atlaskit/theme/constants';
+import { Box } from '@atlaskit/primitives/compiled';
 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();
-var wrapperStyles = xcss({
-  position: 'relative'
-});
+var defaultLayer = 400;
+var wrapperStyles = {
+  root: "_kqswh2mm"
+};
 export var Popup = /*#__PURE__*/memo(function (_ref) {
   var xcss = _ref.xcss,
     _ref$appearance = _ref.appearance,
@@ -78,12 +75,16 @@ export var Popup = /*#__PURE__*/memo(function (_ref) {
     appearance = _usePopupAppearance.appearance,
     shouldRenderToParent = _usePopupAppearance.shouldRenderToParent;
   var id = providedId || generatedId;
+  var handleOpenLayerObserverCloseSignal = useCallback(function () {
+    onClose === null || onClose === void 0 || onClose(null);
+  }, [onClose]);
   useNotifyOpenLayerObserver({
-    isOpen: isOpen
+    isOpen: isOpen,
+    onClose: handleOpenLayerObserverCloseSignal
   });
-  var renderPopperWrapper = jsx(Layering, {
+  var renderPopperWrapper = /*#__PURE__*/React.createElement(Layering, {
     isDisabled: false
-  }, jsx(PopperWrapper, {
+  }, /*#__PURE__*/React.createElement(PopperWrapper, {
     xcss: xcss,
     appearance: appearance,
     content: content,
@@ -112,7 +113,7 @@ export var Popup = /*#__PURE__*/memo(function (_ref) {
     modifiers: modifiers,
     shouldFitViewport: shouldFitViewport
   }));
-  var popupContent = jsx(Manager, null, jsx(Reference, null, function (_ref2) {
+  var popupContent = /*#__PURE__*/React.createElement(Manager, null, /*#__PURE__*/React.createElement(Reference, null, function (_ref2) {
     var ref = _ref2.ref;
     return trigger({
       ref: !fg('platform-design-system-popup-ref') ? getMergedTriggerRef(ref, setTriggerRef, isOpen) : getMergedTriggerRefNew(ref, setTriggerRef),
@@ -120,12 +121,12 @@ export var Popup = /*#__PURE__*/memo(function (_ref) {
       'aria-expanded': isOpen,
       'aria-haspopup': role === 'dialog' && fg('platform_dst_popup-disable-focuslock') ? 'dialog' : true
     });
-  }), isOpen && (shouldRenderToParent || shouldFitContainer ? renderPopperWrapper : jsx(Portal, {
+  }), isOpen && (shouldRenderToParent || shouldFitContainer ? renderPopperWrapper : /*#__PURE__*/React.createElement(Portal, {
     zIndex: zIndex
   }, renderPopperWrapper)));
   if (shouldFitContainer) {
-    return jsx(Box, {
-      xcss: wrapperStyles
+    return /*#__PURE__*/React.createElement(Box, {
+      xcss: wrapperStyles.root
     }, popupContent);
   }
   return popupContent;

package/dist/esm/use-appearance.js

@@ -1,6 +1,6 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import { useState } from 'react';
-import { UNSAFE_useMediaQuery as useMediaQuery } from '@atlaskit/primitives/responsive';
+import { UNSAFE_useMediaQuery as useMediaQuery } from '@atlaskit/primitives/compiled';
 
 /**
  * **usePopupAppearance()**

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

@@ -1,4 +1,4 @@
-import { jsx } from '@emotion/react';
+/// <reference types="react" />
 import { type PopperWrapperProps } from './types';
-declare function PopperWrapper({ xcss, isOpen, id, offset, testId, content, fallbackPlacements, onClose, boundary, rootBoundary, shouldFlip, placement, popupComponent: PopupContainer, autoFocus, triggerRef, shouldUseCaptureOnOutsideClick, shouldRenderToParent, shouldFitContainer, shouldDisableFocusLock, shouldReturnFocus, strategy, role, label, titleId, modifiers, shouldFitViewport, appearance, }: PopperWrapperProps): jsx.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.Element;
 export default PopperWrapper;

package/dist/types/types.d.ts

@@ -81,6 +81,10 @@ export interface PopupComponentProps {
      * We strongly recommend using only `menu` or `dialog`.
      */
     role?: string;
+    /**
+     * Class name to apply to the popup container element.
+     */
+    className?: string;
 }
 interface BaseProps {
     /**
@@ -238,7 +242,7 @@ interface InternalPopupProps extends BaseProps {
     /**
      * Z-index that the popup should be displayed in.
      * This is passed to the portal component.
-     * The default is `layers.layer()` from `@atlaskit/theme`.
+     * The default is 400.
      */
     zIndex?: number;
 }

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

@@ -1,4 +1,4 @@
-import { jsx } from '@emotion/react';
+/// <reference types="react" />
 import { type PopperWrapperProps } from './types';
-declare function PopperWrapper({ xcss, isOpen, id, offset, testId, content, fallbackPlacements, onClose, boundary, rootBoundary, shouldFlip, placement, popupComponent: PopupContainer, autoFocus, triggerRef, shouldUseCaptureOnOutsideClick, shouldRenderToParent, shouldFitContainer, shouldDisableFocusLock, shouldReturnFocus, strategy, role, label, titleId, modifiers, shouldFitViewport, appearance, }: PopperWrapperProps): jsx.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.Element;
 export default PopperWrapper;

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

@@ -81,6 +81,10 @@ export interface PopupComponentProps {
      * We strongly recommend using only `menu` or `dialog`.
      */
     role?: string;
+    /**
+     * Class name to apply to the popup container element.
+     */
+    className?: string;
 }
 interface BaseProps {
     /**
@@ -241,7 +245,7 @@ interface InternalPopupProps extends BaseProps {
     /**
      * Z-index that the popup should be displayed in.
      * This is passed to the portal component.
-     * The default is `layers.layer()` from `@atlaskit/theme`.
+     * The default is 400.
      */
     zIndex?: number;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/popup",
-	"version": "3.0.0",
+	"version": "4.0.0",
 	"description": "A popup displays brief content in an overlay.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -40,16 +40,14 @@
 	"dependencies": {
 		"@atlaskit/css": "^0.10.0",
 		"@atlaskit/ds-lib": "^4.0.0",
-		"@atlaskit/focus-ring": "^3.0.0",
-		"@atlaskit/layering": "^2.0.0",
+		"@atlaskit/layering": "^2.1.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/popper": "^7.0.0",
 		"@atlaskit/portal": "^5.1.0",
-		"@atlaskit/primitives": "^14.2.0",
-		"@atlaskit/theme": "^18.0.0",
-		"@atlaskit/tokens": "^4.5.0",
+		"@atlaskit/primitives": "^14.3.0",
+		"@atlaskit/tokens": "^4.7.0",
 		"@babel/runtime": "^7.0.0",
-		"@emotion/react": "^11.7.1",
+		"@compiled/react": "^0.18.3",
 		"bind-event-listener": "^3.0.0",
 		"focus-trap": "^2.4.5",
 		"memoize-one": "^6.0.0",
@@ -63,21 +61,21 @@
 		"@af/accessibility-testing": "^2.0.0",
 		"@af/integration-testing": "^0.5.0",
 		"@af/visual-regression": "^1.3.0",
-		"@atlaskit/button": "^21.1.0",
-		"@atlaskit/code": "^16.1.0",
+		"@atlaskit/button": "^23.0.0",
+		"@atlaskit/code": "^17.0.0",
 		"@atlaskit/docs": "^10.0.0",
 		"@atlaskit/form": "^12.0.0",
 		"@atlaskit/heading": "^5.1.0",
-		"@atlaskit/icon": "^25.2.0",
-		"@atlaskit/link": "^3.0.0",
-		"@atlaskit/modal-dialog": "^14.0.0",
+		"@atlaskit/icon": "^25.5.0",
+		"@atlaskit/link": "^3.1.0",
+		"@atlaskit/modal-dialog": "^14.1.0",
 		"@atlaskit/section-message": "^8.2.0",
 		"@atlaskit/ssr": "^0.4.0",
 		"@atlaskit/textfield": "^8.0.0",
 		"@atlaskit/toggle": "^15.0.0",
 		"@atlaskit/visual-regression": "^0.10.0",
 		"@atlassian/feature-flags-test-utils": "^0.3.0",
-		"@compiled/react": "^0.18.3",
+		"@atlassian/ssr-tests": "^0.2.0",
 		"@testing-library/react": "^13.4.0",
 		"@testing-library/react-hooks": "^8.0.1",
 		"@testing-library/user-event": "^14.4.3",