@commercetools-frontend/application-components 22.40.0 → 22.41.0

package/dist/commercetools-frontend-application-components.cjs.prod.js

@@ -20,9 +20,10 @@ var utils = require('@commercetools-uikit/utils');
 var react = require('@emotion/react');
 var designSystem = require('@commercetools-uikit/design-system');
 var jsxRuntime = require('@emotion/react/jsx-runtime');
-var react$1 = require('react');
+var _slicedToArray = require('@babel/runtime-corejs3/helpers/slicedToArray');
 var _styled = require('@emotion/styled/base');
-var Modal = require('react-modal');
+var react$1 = require('react');
+var reactDialog = require('@radix-ui/react-dialog');
 var constants = require('@commercetools-frontend/constants');
 var Card = require('@commercetools-uikit/card');
 var icons = require('@commercetools-uikit/icons');
@@ -34,7 +35,6 @@ var SecondaryButton = require('@commercetools-uikit/secondary-button');
 var _startsWithInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/starts-with');
 var omitBy = require('lodash/omitBy');
 var _Promise = require('@babel/runtime-corejs3/core-js-stable/promise');
-var _slicedToArray = require('@babel/runtime-corejs3/helpers/slicedToArray');
 var _setTimeout = require('@babel/runtime-corejs3/core-js-stable/set-timeout');
 var FlatButton = require('@commercetools-uikit/flat-button');
 var IconButton = require('@commercetools-uikit/icon-button');
@@ -63,7 +63,6 @@ var _Object$defineProperties__default = /*#__PURE__*/_interopDefault(_Object$def
 var _Object$defineProperty__default = /*#__PURE__*/_interopDefault(_Object$defineProperty);
 var Text__default = /*#__PURE__*/_interopDefault(Text);
 var _styled__default = /*#__PURE__*/_interopDefault(_styled);
-var Modal__default = /*#__PURE__*/_interopDefault(Modal);
 var Card__default = /*#__PURE__*/_interopDefault(Card);
 var SecondaryIconButton__default = /*#__PURE__*/_interopDefault(SecondaryIconButton);
 var Spacings__default = /*#__PURE__*/_interopDefault(Spacings);
@@ -84,7 +83,7 @@ var _mapInstanceProperty__default = /*#__PURE__*/_interopDefault(_mapInstancePro
 var useResizeObserver__default = /*#__PURE__*/_interopDefault(useResizeObserver);
 
 // NOTE: This string will be replaced on build time with the package version.
-var version = "22.40.0";
+var version = "22.41.0";
 
 // We keep these tokens as they are related to page layout components which should have
 // a slightly different layout (margins/paddings) when used within a Custom View panel.
@@ -106,15 +105,15 @@ const designTokens = designSystem.transformTokensToCssVarsReferences(themesOverr
 });
 
 const getBottomBorderStyles = background => /*#__PURE__*/react.css(":after{content:'';position:absolute;bottom:0;left:0;right:0;height:2px;border-radius:", designSystem.designTokens.borderRadius2, ";background-color:", background, ";transition:background-color ", designSystem.designTokens.transitionEaseinout150Ms, ";}" + ("" ), "" );
-var _ref$8 = {
+var _ref$7 = {
   name: "1u0tiat",
   styles: "&[aria-disabled='true']{cursor:not-allowed;opacity:0.5;&:active{pointer-events:none;}}"
 } ;
-const getLinkStyles = (isActive, isDisabled) => [/*#__PURE__*/react.css("font-size:", designSystem.designTokens.fontSize30, ";padding:", designSystem.designTokens.spacingS, " ", designSystem.designTokens.spacingM, ";position:relative;text-align:center;display:inline-block;color:inherit;text-decoration:inherit;&:first-of-type{padding-left:", designSystem.designTokens.spacing30, ";}", getBottomBorderStyles('transparent'), ";" + ("" ), "" ), isActive && /*#__PURE__*/react.css(getBottomBorderStyles(designSystem.designTokens.colorPrimary), " & h3{color:", designTokens.fontColorForTabLabelWhenActive, "!important;}" + ("" ), "" ), isDisabled && _ref$8, !isActive && !isDisabled && /*#__PURE__*/react.css(":hover,:focus,:active{& h3{color:", designTokens.fontColorForTabLabelWhenActive, "!important;}}" + ("" ), "" )];
+const getLinkStyles = (isActive, isDisabled) => [/*#__PURE__*/react.css("font-size:", designSystem.designTokens.fontSize30, ";padding:", designSystem.designTokens.spacingS, " ", designSystem.designTokens.spacingM, ";position:relative;text-align:center;display:inline-block;color:inherit;text-decoration:inherit;&:first-of-type{padding-left:", designSystem.designTokens.spacing30, ";}", getBottomBorderStyles('transparent'), ";" + ("" ), "" ), isActive && /*#__PURE__*/react.css(getBottomBorderStyles(designSystem.designTokens.colorPrimary), " & h3{color:", designTokens.fontColorForTabLabelWhenActive, "!important;}" + ("" ), "" ), isDisabled && _ref$7, !isActive && !isDisabled && /*#__PURE__*/react.css(":hover,:focus,:active{& h3{color:", designTokens.fontColorForTabLabelWhenActive, "!important;}}" + ("" ), "" )];
 
 const _excluded$k = ["isDisabled", "exactPathMatch"];
-function ownKeys$7(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$7(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$7(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$7(Object(t))).call(_context2, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
+function ownKeys$5(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$5(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$5(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$5(Object(t))).call(_context2, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
 const pathWithoutSearch = path => typeof path === 'string' ? path.split('?')[0] : path.pathname;
 const warnIfMissingContent = props => {
   Boolean(props.intlMessage) || Boolean(props.label);
@@ -149,11 +148,11 @@ const TabHeader = _ref2 => {
   if (props.intlMessage) {
     label = intl.formatMessage(props.intlMessage);
   }
-  warnIfMissingContent(_objectSpread$7({
+  warnIfMissingContent(_objectSpread$5({
     exactPathMatch,
     isDisabled
   }, props));
-  return jsxRuntime.jsx(reactRouterDom.Link, _objectSpread$7(_objectSpread$7({
+  return jsxRuntime.jsx(reactRouterDom.Link, _objectSpread$5(_objectSpread$5({
     role: "tab",
     "aria-selected": isActive,
     to: props.to,
@@ -199,32 +198,42 @@ const getModalContentStyles = props => {
 
   // To ensure that the mouse click on the overlay surface goes "through"
   // and triggers the modal to close, we need to turn off the pointer events.
-  const baseStyles = /*#__PURE__*/react.css("display:grid;height:100%;width:100%;outline:none;pointer-events:none;", gridStyle, ";" + ("" ), "" );
+  const baseStyles = /*#__PURE__*/react.css("display:grid;height:100%;width:100%;outline:none;position:relative;pointer-events:none;z-index:", typeof props.zIndex === 'number' ?
+  // Use `!important` to overwrite the default value assigned by the Stacking Layer System.
+  // We're assigning value 1 unit higher than the overlay to ensure the content is on top.
+  // It's safe to do that since the modal is topmost in the stacking layer.
+  `${props.zIndex + 1} !important` : 'auto', ";", gridStyle, ";" + ("" ), "" );
   return baseStyles;
 };
-const getOverlayStyles$1 = props => /*#__PURE__*/react.css("display:flex;position:absolute;z-index:", typeof props.zIndex === 'number' ?
-// Use `!important` to overwrite the default value assigned by the Stacking Layer System.
-`${props.zIndex} !important` : 'auto', ";top:0;width:100%;height:100%;background-color:rgba(32, 62, 72, 0.5);opacity:1;" + ("" ), "" );
+const ClickableDialogContent = /*#__PURE__*/_styled__default["default"](reactDialog.Content, {
+  target: "e1nocpaa2"
+} )(props => getModalContentStyles(props), ";" + ("" ));
+const DialogOverlay = /*#__PURE__*/_styled__default["default"]("div", {
+  target: "e1nocpaa1"
+} )("display:flex;position:absolute;z-index:", _ref => {
+  let zIndex = _ref.zIndex;
+  return (
+    // Use `!important` to overwrite the default value assigned by the Stacking Layer System.
+    typeof zIndex === 'number' ? `${zIndex} !important` : 'auto'
+  );
+}, ";top:0;width:100%;height:100%;background-color:rgba(32, 62, 72, 0.5);opacity:1;" + ("" ));
+const DialogContent$1 = /*#__PURE__*/_styled__default["default"]("div", {
+  target: "e1nocpaa0"
+} )({
+  name: "vyh6ik",
+  styles: "position:absolute;width:100%;height:100%;top:0"
+} );
 
 const _excluded$j = ["size", "getParentSelector"];
-function ownKeys$6(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$6(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$6(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$6(Object(t))).call(_context2, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
 const getDefaultParentSelector$1 = () => document.querySelector(`#${constants.PORTALS_CONTAINER_ID}`);
-const getOverlayElement$1 = (props, contentElement) =>
-// Assign the `data-role` to the overlay container, which is used as
-// the CSS selector in the `<PortalsContainer>`.
-jsxRuntime.jsx("div", _objectSpread$6(_objectSpread$6({}, props), {}, {
-  "data-role": "dialog-overlay",
-  children: contentElement
-}));
 const GridArea = /*#__PURE__*/_styled__default["default"]("div", {
   target: "elx55gk0"
 } )("grid-area:", props => props.name, ";" + ("" ));
-var _ref$7 = {
+var _ref$6 = {
   name: "1daj17f",
   styles: "display:flex;flex-direction:column;align-items:stretch;height:100%;min-height:0"
 } ;
-var _ref2$3 = {
+var _ref2$2 = {
   name: "1187q51",
   styles: "display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;overflow:hidden"
 } ;
@@ -235,48 +244,59 @@ const DialogContainer = _ref3 => {
     getParentSelector = _ref3$getParentSelect === void 0 ? getDefaultParentSelector$1 : _ref3$getParentSelect,
     props = _objectWithoutProperties(_ref3, _excluded$j);
   utils.useWarning(typeof props.title === 'string' || typeof props.title !== 'string' && Boolean(props['aria-label']), 'app-kit/DialogHeader: "aria-label" prop is required when the "title" prop is not a string.');
-  return jsxRuntime.jsx(react.ClassNames, {
-    children: _ref4 => {
-      let makeClassName = _ref4.css;
-      return jsxRuntime.jsxs(Modal__default["default"], {
-        isOpen: props.isOpen,
-        onRequestClose: props.onClose,
-        shouldCloseOnOverlayClick: Boolean(props.onClose),
-        shouldCloseOnEsc: Boolean(props.onClose),
-        overlayElement: getOverlayElement$1,
-        overlayClassName: makeClassName(getOverlayStyles$1(_objectSpread$6({
-          size
-        }, props))),
-        className: makeClassName(getModalContentStyles(_objectSpread$6({
-          size
-        }, props))),
-        contentLabel: typeof props.title === 'string' ? props.title : props['aria-label'],
-        parentSelector: getParentSelector,
-        ariaHideApp: false,
-        children: [jsxRuntime.jsx(GridArea, {
-          name: "top"
-        }), jsxRuntime.jsx(GridArea, {
-          name: "left"
-        }), jsxRuntime.jsx(GridArea, {
-          name: "right"
-        }), jsxRuntime.jsx(GridArea, {
-          name: "bottom"
-        }), jsxRuntime.jsx(GridArea, {
-          name: "main",
-          css: _ref2$3,
-          children: jsxRuntime.jsx(Card__default["default"]
-          // 1. For the min-height: https://stackoverflow.com/questions/28636832/firefox-overflow-y-not-working-with-nested-flexbox/28639686#28639686
-          // 2. For the actual "> div" container with the content, we need to use normal pointer events so that clicking on it does not close the dialog.
-          , {
-            css: /*#__PURE__*/react.css("min-height:0;padding:", designSystem.designTokens.spacing20, " ", designSystem.designTokens.spacing30, ";>div{display:flex;flex-direction:column;height:100%;pointer-events:auto;min-height:0;}" + ("" ), "" ),
-            children: jsxRuntime.jsx("div", {
-              css: _ref$7,
-              children: props.children
-            })
-          })
-        })]
-      });
+  const _useState = react$1.useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    portalContainer = _useState2[0],
+    setPortalContainer = _useState2[1];
+  react$1.useEffect(() => {
+    const container = getParentSelector();
+    if (container) {
+      setPortalContainer(container);
     }
+  }, []);
+  const dialogAccessibleLabel = typeof props.title === 'string' ? props.title : props['aria-label'];
+  return jsxRuntime.jsx(reactDialog.Root, {
+    open: props.isOpen,
+    modal: false,
+    children: jsxRuntime.jsx(reactDialog.Portal, {
+      container: portalContainer,
+      children: jsxRuntime.jsx(DialogOverlay, {
+        "data-role": "dialog-overlay",
+        zIndex: props.zIndex,
+        children: jsxRuntime.jsx(DialogContent$1, {
+          children: jsxRuntime.jsxs(ClickableDialogContent, {
+            size: size,
+            onEscapeKeyDown: props.onClose,
+            onPointerDownOutside: props.onClose,
+            "aria-describedby": undefined,
+            "aria-labelledby": "",
+            "aria-label": dialogAccessibleLabel,
+            children: [jsxRuntime.jsx(GridArea, {
+              name: "top"
+            }), jsxRuntime.jsx(GridArea, {
+              name: "left"
+            }), jsxRuntime.jsx(GridArea, {
+              name: "right"
+            }), jsxRuntime.jsx(GridArea, {
+              name: "bottom"
+            }), jsxRuntime.jsx(GridArea, {
+              name: "main",
+              css: _ref2$2,
+              children: jsxRuntime.jsx(Card__default["default"]
+              // 1. For the min-height: https://stackoverflow.com/questions/28636832/firefox-overflow-y-not-working-with-nested-flexbox/28639686#28639686
+              // 2. For the actual "> div" container with the content, we need to use normal pointer events so that clicking on it does not close the dialog.
+              , {
+                css: /*#__PURE__*/react.css("min-height:0;padding:", designSystem.designTokens.spacing20, " ", designSystem.designTokens.spacing30, ";>div{display:flex;flex-direction:column;height:100%;pointer-events:auto;min-height:0;}" + ("" ), "" ),
+                children: jsxRuntime.jsx("div", {
+                  css: _ref$6,
+                  children: props.children
+                })
+              })
+            })]
+          })
+        })
+      })
+    })
   });
 };
 DialogContainer.propTypes = {};
@@ -294,16 +314,19 @@ const TextTitle = props => jsxRuntime.jsx(Text__default["default"].Headline, {
   children: props.title
 });
 TextTitle.propTypes = {};
+const HiddenEmptyDialogTitle$1 = () => jsxRuntime.jsx("div", {
+  "aria-hidden": true,
+  style: {
+    display: 'none'
+  },
+  children: jsxRuntime.jsx(reactDialog.Title, {})
+});
 const Title$1 = props => {
-  if (typeof props.title === 'string') {
-    return jsxRuntime.jsx(TextTitle, {
+  return jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [typeof props.title === 'string' ? jsxRuntime.jsx(TextTitle, {
       title: props.title
-    });
-  } else {
-    return jsxRuntime.jsx(jsxRuntime.Fragment, {
-      children: props.title
-    });
-  }
+    }) : props.title, jsxRuntime.jsx(HiddenEmptyDialogTitle$1, {})]
+  });
 };
 const DialogHeader = props => jsxRuntime.jsx("div", {
   css: /*#__PURE__*/react.css("flex:0 1 auto;display:flex;flex-direction:column;margin-bottom:", designSystem.designTokens.spacing30, ";" + ("" ), "" ),
@@ -351,8 +374,8 @@ function filterDataAttributes(obj) {
 }
 
 const _excluded$i = ["isPrimaryButtonDisabled", "dataAttributesPrimaryButton", "dataAttributesSecondaryButton"];
-function ownKeys$5(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$5(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$5(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$5(Object(t))).call(_context2, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
+function ownKeys$4(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$4(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$4(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$4(Object(t))).call(_context2, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
 const getFormattedLabel = (label, intl) => typeof label === 'string' ? label : intl.formatMessage(label);
 const DialogFooter = _ref => {
   let _ref$isPrimaryButtonD = _ref.isPrimaryButtonDisabled,
@@ -374,11 +397,11 @@ const DialogFooter = _ref => {
         scale: "m",
         alignItems: "center",
         justifyContent: "flex-end",
-        children: [jsxRuntime.jsx(SecondaryButton__default["default"], _objectSpread$5({
+        children: [jsxRuntime.jsx(SecondaryButton__default["default"], _objectSpread$4({
           label: getFormattedLabel(props.labelSecondary, intl),
           onClick: props.onCancel,
           iconLeft: props.iconLeftSecondaryButton
-        }, filterDataAttributes(dataAttributesSecondaryButton))), jsxRuntime.jsx(PrimaryButton__default["default"], _objectSpread$5({
+        }, filterDataAttributes(dataAttributesSecondaryButton))), jsxRuntime.jsx(PrimaryButton__default["default"], _objectSpread$4({
           label: getFormattedLabel(props.labelPrimary, intl),
           onClick: props.onConfirm,
           isDisabled: isPrimaryButtonDisabled
@@ -474,7 +497,7 @@ FormDialog.TextTitle = TextTitle;
 
 const CustomViewSelector = /*#__PURE__*/react$1.lazy(() => {
   if (typeof window !== 'undefined' && typeof window.app !== 'undefined') {
-    return Promise.resolve().then(function () { return require('./custom-views-selector-36368b71.cjs.prod.js' /* webpackChunkName: "custom-views-selector" */); });
+    return Promise.resolve().then(function () { return require('./custom-views-selector-4a4c5740.cjs.prod.js' /* webpackChunkName: "custom-views-selector" */); });
   }
   return _Promise__default["default"].resolve({
     default: () => null
@@ -533,7 +556,7 @@ const Subtitle = _ref2 => {
   });
 };
 Subtitle.propTypes = {};
-var _ref$6 = {
+var _ref$5 = {
   name: "d3v9zr",
   styles: "overflow:hidden"
 } ;
@@ -544,7 +567,7 @@ const PageHeaderTitle = _ref3 => {
     truncate = _ref3$truncate === void 0 ? false : _ref3$truncate,
     props = _objectWithoutProperties(_ref3, _excluded2$1);
   return jsxRuntime.jsxs("div", {
-    css: _ref$6,
+    css: _ref$5,
     children: [jsxRuntime.jsx(Title, {
       title: props.title,
       titleSize: titleSize,
@@ -604,12 +627,12 @@ const messages$4 = reactIntl.defineMessages({
 
 const _excluded$e = ["color", "previousPathLabel", "hidePathLabel"];
 // Component to have a larger clickable surface
-var _ref2$2 = {
+var _ref2$1 = {
   name: "1rxhroq",
   styles: "display:flex;align-items:center;justify-content:center;&::after{content:'';position:absolute;height:35px;width:48px;top:0;right:0;}"
 } ;
 const LargeIconWrapper = props => jsxRuntime.jsx("span", {
-  css: _ref2$2,
+  css: _ref2$1,
   children: /*#__PURE__*/react$1.cloneElement(props.children, {
     size: props.size
   })
@@ -619,7 +642,7 @@ const LargeIconWrapper = props => jsxRuntime.jsx("span", {
 // However, we need to explicitly define this otherwise the prop-types babel plugin
 // does not recognize the object shape.
 LargeIconWrapper.propTypes = {};
-var _ref$5 = {
+var _ref$4 = {
   name: "uvw8rn",
   styles: "display:flex;overflow:hidden;button:first-of-type svg{height:12px!important;width:12px!important;}"
 } ;
@@ -634,7 +657,7 @@ const ModalPageTopBar = _ref3 => {
   return jsxRuntime.jsxs("div", {
     css: /*#__PURE__*/react.css("position:relative;display:flex;align-items:center;justify-content:space-between;padding:", designSystem.designTokens.spacing40, " ", designSystem.designTokens.spacing55, " 0;background-color:", designSystem.designTokens.colorSurface, ";border-bottom:1px solid ", designSystem.designTokens.colorSurface, ";& *+*{margin-left:", designSystem.designTokens.spacingS, ";}p{font-size:12px!important;}" + ("" ), "" ),
     children: [jsxRuntime.jsxs("div", {
-      css: _ref$5,
+      css: _ref$4,
       children: [!hidePathLabel && jsxRuntime.jsx(FlatButton__default["default"], {
         tone: "primary",
         label: typeof previousPathLabel === 'string' ? previousPathLabel : intl.formatMessage(previousPathLabel),
@@ -685,41 +708,89 @@ const stylesBySize = {
     transitionTime: 300
   }
 };
-const getContainerStyles = props => /*#__PURE__*/react.css("position:absolute;top:0;right:0;height:100%;width:", props.size !== 'scale' ?
-// In case we're using a specific size, we want it to be used until there's no space left.
-// In such scenario, we want the modal to be as wide as possible, but using the shared indentation width size.
-`min(${stylesBySize[props.size].width}, calc(100% - ${constants.PORTALS_CONTAINER_INDENTATION_SIZE})) !important` : stylesBySize.scale.width, ";display:flex;flex-direction:column;background-color:", designSystem.customProperties.colorSurface, ";box-shadow:0px 0px 40px 0px rgba(0, 0, 0, 0.1);outline:0;transform:translate3d(\n    ", props.size !== 'scale' ? stylesBySize[props.size].width : '30px', ",\n    0,\n    0\n  );transition:transform ", stylesBySize[props.size].transitionTime, "ms ease;" + ("" ), "" );
-const getOverlayStyles = props => /*#__PURE__*/react.css("position:absolute;z-index:", typeof props.zIndex === 'number' ?
-// Use `!important` to overwrite the default value assigned by the Stacking Layer System.
-`${props.zIndex} !important` : 'auto', ";top:0;left:0;width:100%;height:100%;background-color:hsla(195, 35%, 20%, 0.05);opacity:0;transition:transform ", stylesBySize[props.size].transitionTime, "ms ease;" + ("" ), "" );
-var _ref3 = {
-  name: "1ffv7m4",
-  styles: "transform:translate3d(0, 0, 0)!important"
-} ;
-const getAfterOpenContainerAnimation = () => _ref3;
-var _ref2$1 = {
-  name: "1d9ftqx",
-  styles: "opacity:1!important"
-} ;
-const getAfterOpenOverlayAnimation = () => _ref2$1;
-const getBeforeCloseContainerAnimation = props => /*#__PURE__*/react.css("transform:translate3d(\n    ", props.size !== 'scale' ? stylesBySize[props.size].width : '30px', ",\n    ,\n    0,\n    0\n  )!important;" + ("" ), "" );
-var _ref$4 = {
-  name: "728dx5",
-  styles: "opacity:0!important"
-} ;
-const getBeforeCloseOverlayAnimation = () => _ref$4;
+const overlayShow = react.keyframes`
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+`;
+
+// we can't use Overlay from Radix-ui because it doesn't appear in DOM when Dialog.Root is rendered with `modal={false}`
+const ModalOverlay = /*#__PURE__*/_styled__default["default"]("div", {
+  target: "e1jbmsa1"
+} )("position:absolute;top:0;left:0;width:100%;height:100%;background-color:hsla(195, 35%, 20%, 0.05);z-index:", _ref => {
+  let zIndex = _ref.zIndex;
+  return (
+    // Use `!important` to overwrite the default value assigned by the Stacking Layer System.
+    typeof zIndex === 'number' ? `${zIndex} !important` : 'inherit'
+  );
+}, ";opacity:0;", _ref2 => {
+  let size = _ref2.size;
+  const transitionDuration = stylesBySize[size].transitionTime;
+  return /*#__PURE__*/react.css("animation:", overlayShow, " ", transitionDuration, "ms ease-out forwards;" + ("" ), "" );
+}, ";" + ("" ));
+const getContentShowAnimation = size => react.keyframes({
+  '0%': {
+    opacity: 0,
+    transform: `translate3d(${size !== 'scale' ? stylesBySize[size].width : '30px'}, 0, 0)`
+  },
+  '100%': {
+    opacity: 1,
+    transform: `translate3d(0, 0, 0)`
+  }
+});
+const getContentHideAnimation = size => react.keyframes({
+  '0%': {
+    opacity: 1,
+    transform: `translate3d(0, 0, 0)`
+  },
+  '100%': {
+    opacity: 0,
+    transform: `translate3d(${size !== 'scale' ? stylesBySize[size].width : '30px'}, 0, 0)`
+  }
+});
+const ModalContent = /*#__PURE__*/_styled__default["default"](reactDialog.Content, {
+  shouldForwardProp: prop => prop !== 'size',
+  target: "e1jbmsa0"
+} )("position:absolute;top:0;right:0;height:100%;width:", _ref3 => {
+  let size = _ref3.size;
+  return size !== 'scale' ?
+  // In case we're using a specific size, we want it to be used until there's no space left.
+  // In such scenario, we want the modal to be as wide as possible, but using the shared indentation width size.
+  `min(${stylesBySize[size].width}, calc(100% - ${constants.PORTALS_CONTAINER_INDENTATION_SIZE})) !important` : stylesBySize.scale.width;
+}, ";display:flex;flex-direction:column;background-color:", designSystem.designTokens.colorSurface, ";box-shadow:0px 0px 40px 0px rgba(0, 0, 0, 0.1);outline:0;z-index:inherit;&[data-state='open']{animation:", _ref4 => {
+  let size = _ref4.size;
+  return getContentShowAnimation(size);
+}, " 300ms ease forwards;}&[data-state='closed']{animation:", _ref5 => {
+  let size = _ref5.size;
+  return getContentHideAnimation(size);
+}, " 300ms ease forwards;}" + ("" ));
 
 const _excluded$d = ["size", "getParentSelector", "shouldDelayOnClose"];
-function ownKeys$4(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$4(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$4(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$4(Object(t))).call(_context2, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
+const HiddenEmptyDialogTitle = () => jsxRuntime.jsx("div", {
+  "aria-hidden": true,
+  style: {
+    display: 'none'
+  },
+  children: jsxRuntime.jsx(reactDialog.Title, {})
+});
+
+// When running tests, we don't render the AppShell. Instead we mock the
+// application context to make the data available to the application under
+// test. However, this also means that the AppShell tree is not rendered,
+// which contains among other things the <div id="portals-container" />
+// element, used to render the modal content.
+// Apparently though, when the <Modal> component unmounts between tests, it
+// tries to remove the child elements within the parent selector
+// ("portals-container") which may have been cleaned up by another test,
+// resulting in the <Modal> to throw an NotFoundError.
+// To solve this, we can simply use "document.body" as the parent selector
+// instead of a specific element that will be cleaned up, resulting in
+// console errors (even though the test passes). We only need to to this in
+// test environment.
 const getDefaultParentSelector = () => document.querySelector(`#${constants.PORTALS_CONTAINER_ID}`);
-const getOverlayElement = (props, contentElement) =>
-// Assign the `data-role` to the overlay container, which is used as
-// the CSS selector in the `<PortalsContainer>`.
-jsxRuntime.jsx("div", _objectSpread$4(_objectSpread$4({}, props), {}, {
-  "data-role": "modal-overlay",
-  children: contentElement
-}));
 
 // NOTE: the `MessageDescriptor` type is exposed by `react-intl`.
 // However, we need to explicitly define this otherwise the prop-types babel plugin
@@ -737,7 +808,8 @@ const ModalPage = _ref => {
     _useState2 = _slicedToArray(_useState, 2),
     forceClose = _useState2[0],
     setForceClose = _useState2[1];
-  const closingTimer = react$1.useRef();
+  const closingTimer = react$1.useRef(undefined);
+  const TRANSITION_DURATION = stylesBySize[size].transitionTime;
   react$1.useEffect(() => {
     if (props.isOpen === true) setForceClose(false);
     return () => {
@@ -747,7 +819,6 @@ const ModalPage = _ref => {
     };
   }, [props.isOpen]);
   const onClose = props.onClose;
-  const TRANSITION_DURATION = stylesBySize[size].transitionTime;
   const handleClose = react$1.useCallback(event => {
     if (shouldDelayOnClose) {
       // In this case we want the closing animation to be shown
@@ -761,52 +832,53 @@ const ModalPage = _ref => {
     }
     onClose && onClose(event);
   }, [onClose, shouldDelayOnClose, TRANSITION_DURATION]);
-  return jsxRuntime.jsx(react.ClassNames, {
-    children: _ref2 => {
-      let makeClassName = _ref2.css;
-      return jsxRuntime.jsxs(Modal__default["default"], {
-        isOpen: forceClose === true ? false : props.isOpen,
-        onRequestClose: handleClose,
-        shouldCloseOnOverlayClick: Boolean(props.onClose),
-        shouldCloseOnEsc: Boolean(props.onClose),
-        overlayElement: getOverlayElement,
-        overlayClassName: {
-          base: makeClassName(getOverlayStyles(_objectSpread$4({
-            size
-          }, props))),
-          afterOpen: makeClassName(getAfterOpenOverlayAnimation()),
-          beforeClose: makeClassName(getBeforeCloseOverlayAnimation())
-        },
-        className: {
-          base: makeClassName(getContainerStyles(_objectSpread$4({
-            size
-          }, props))),
-          afterOpen: typeof props.afterOpenStyles === 'string' ? props.afterOpenStyles : makeClassName(props.afterOpenStyles ?? getAfterOpenContainerAnimation()),
-          beforeClose: makeClassName(getBeforeCloseContainerAnimation(_objectSpread$4({
-            size
-          }, props)))
-        },
-        contentLabel: props.title,
-        parentSelector: getParentSelector,
-        ariaHideApp: false
-        // Adjust this value if the (beforeClose) animation duration is changed
-        ,
-        closeTimeoutMS: TRANSITION_DURATION,
-        style: {
-          // stylelint-disable-next-line selector-type-no-unknown
-          overlay: {
-            zIndex: props.zIndex
-          }
-        },
-        children: [!props.hideTopBar && jsxRuntime.jsx(ModalPageTopBar, {
-          color: props.topBarColor,
-          onClose: handleClose,
-          currentPathLabel: props.currentPathLabel,
-          previousPathLabel: props.previousPathLabel,
-          hidePathLabel: props.hidePathLabel
-        }), props.children]
-      });
+  const _useState3 = react$1.useState(null),
+    _useState4 = _slicedToArray(_useState3, 2),
+    portalContainer = _useState4[0],
+    setPortalContainer = _useState4[1];
+  react$1.useEffect(() => {
+    const container = getParentSelector();
+    if (container) {
+      setPortalContainer(container);
     }
+  }, []);
+  return jsxRuntime.jsx(reactDialog.Root, {
+    open: props.isOpen && !forceClose,
+    onOpenChange: handleClose,
+    modal: false // `true` would apply aria-hidden to all other elements when the modal is open
+    ,
+    children: jsxRuntime.jsx(reactDialog.Portal, {
+      container: portalContainer,
+      children: jsxRuntime.jsxs("div", {
+        // Assign the `data-role` to the overlay container, which is used as
+        // the CSS selector in the `<PortalsContainer>`.
+        "data-role": "modal-overlay",
+        children: [jsxRuntime.jsx(ModalOverlay, {
+          size: size,
+          "data-role": "modal-overlay-clickable",
+          onClick: handleClose
+        }), jsxRuntime.jsxs(ModalContent, {
+          size: size,
+          "aria-describedby": undefined,
+          onInteractOutside: e => {
+            // Prevent only the modal from closing, handle all other events
+            const overlay = document.querySelector('[data-role="modal-overlay-clickable"]');
+            if (!overlay?.contains(e.target)) {
+              e.preventDefault();
+            }
+          },
+          "aria-labelledby": "",
+          "aria-label": props.title,
+          children: [jsxRuntime.jsx(HiddenEmptyDialogTitle, {}), !props.hideTopBar && jsxRuntime.jsx(ModalPageTopBar, {
+            color: props.topBarColor,
+            onClose: handleClose,
+            currentPathLabel: props.currentPathLabel,
+            previousPathLabel: props.previousPathLabel,
+            hidePathLabel: props.hidePathLabel
+          }), props.children]
+        })]
+      })
+    })
   });
 };
 ModalPage.propTypes = {};
@@ -1951,11 +2023,8 @@ const PortalsContainer = /*#__PURE__*/react$1.forwardRef((props, ref) => {
       if (node instanceof HTMLElement) {
         const stackingLevel = index + 1;
         node.dataset.level = String(stackingLevel);
-        const overlayNode = node.firstChild;
-        if (overlayNode instanceof HTMLElement) {
-          if (overlayNode.dataset.role === 'modal-overlay') {
-            indentationLevel += 1;
-          }
+        if (node.dataset.role === 'modal-overlay') {
+          indentationLevel += 1;
         }
         nextStackingLevels.push({
           stackingLevel,
@@ -1968,11 +2037,10 @@ const PortalsContainer = /*#__PURE__*/react$1.forwardRef((props, ref) => {
     // Only subscribe to changes to the child nodes of the portals container.
     childList: true
   });
+  const isModalOpen = stackingLayers.length > 0;
   return jsxRuntime.jsxs(jsxRuntime.Fragment, {
-    children: [jsxRuntime.jsx(react.Global
-    // Apply some global styles, based on the `.ReactModal__Body--open` class.
-    , {
-      styles: [/*#__PURE__*/react.css(".ReactModal__Body--open ", containerSelectorToPreventScrollingOnOpen, "{overflow:hidden;}.ReactModal__Body--open #", constants.PORTALS_CONTAINER_ID, "{position:fixed;height:calc(\n                  100% - ", offsetTop, " -\n                    ", globalNotificationsElementDimensions.height, "px -\n                    ", pageNotificationsElementDimensions.height, "px\n                );width:calc(100% - ", offsetLeft, ");top:calc(\n                  ", offsetTop, " +\n                    ", globalNotificationsElementDimensions.height, "px +\n                    ", pageNotificationsElementDimensions.height, "px\n                );right:0;bottom:0;z-index:", zIndex, ";transition:", modalWidthTransition, ";}.ReactModal__Body--open.body__menu-open #", constants.PORTALS_CONTAINER_ID, "{width:calc(100% - ", offsetLeftOnExpandedMenu, ");transition:", modalWidthTransition, ";}" + ("" ), "" ),
+    children: [jsxRuntime.jsx(react.Global, {
+      styles: [isModalOpen && /*#__PURE__*/react.css(containerSelectorToPreventScrollingOnOpen, "{overflow:hidden!important;}#", constants.PORTALS_CONTAINER_ID, "{position:fixed;height:calc(\n                    100% - ", offsetTop, " -\n                      ", globalNotificationsElementDimensions.height, "px -\n                      ", pageNotificationsElementDimensions.height, "px\n                  );width:calc(100% - ", offsetLeft, ");top:calc(\n                    ", offsetTop, " +\n                      ", globalNotificationsElementDimensions.height, "px +\n                      ", pageNotificationsElementDimensions.height, "px\n                  );right:0;bottom:0;z-index:", zIndex, ";transition:", modalWidthTransition, ";}.body__menu-open #", constants.PORTALS_CONTAINER_ID, "{width:calc(100% - ", offsetLeftOnExpandedMenu, ");transition:", modalWidthTransition, ";}" + ("" ), "" ),
       // Apply styles for stacking layers.
       ..._mapInstanceProperty__default["default"](stackingLayers).call(stackingLayers,
       /**
@@ -1980,7 +2048,7 @@ const PortalsContainer = /*#__PURE__*/react$1.forwardRef((props, ref) => {
        * Furthermore, the "modal overlay" containers (not "dialog") get assigned
        * the correct indentation level width.
        */
-      stackingLayer => /*#__PURE__*/react.css("#", constants.PORTALS_CONTAINER_ID, " .ReactModalPortal[data-level='", stackingLayer.stackingLevel, "'] [data-role$='overlay']{z-index:calc(\n                    ", baseModalZIndex, " + ", stackingLayer.stackingLevel, "\n                  );}#", constants.PORTALS_CONTAINER_ID, " .ReactModalPortal[data-level='", stackingLayer.stackingLevel, "'] [data-role='modal-overlay'] [role='dialog']{width:calc(\n                    100% -\n                      (\n                        ", constants.PORTALS_CONTAINER_INDENTATION_SIZE, " *\n                          ", stackingLayer.indentationLevel, "\n                      )\n                  );}" + ("" ), "" )), "" ]
+      stackingLayer => /*#__PURE__*/react.css("#", constants.PORTALS_CONTAINER_ID, " [data-level='", stackingLayer.stackingLevel, "'][data-role$='overlay']{z-index:calc(\n                    ", baseModalZIndex, " + ", stackingLayer.stackingLevel, "\n                  );}#", constants.PORTALS_CONTAINER_ID, " [data-level='", stackingLayer.stackingLevel, "'][data-role='modal-overlay'] [role='dialog']{width:calc(\n                    100% -\n                      (\n                        ", constants.PORTALS_CONTAINER_INDENTATION_SIZE, " *\n                          ", stackingLayer.indentationLevel, "\n                      )\n                  );}" + ("" ), "" )), "" ]
     }), jsxRuntime.jsx("div", {
       id: constants.PORTALS_CONTAINER_ID,
       ref: portalsContainerRef