@commercetools-frontend/application-components 21.3.2 → 21.3.5

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

@@ -41,6 +41,7 @@ var CommercetoolsLogoSvg = require('@commercetools-frontend/assets/logos/commerc
 var Constraints = require('@commercetools-uikit/constraints');
 var PageNotFoundSVG = require('@commercetools-frontend/assets/images/desert-fox.svg');
 var FailedAuthorizationSVG = require('@commercetools-frontend/assets/images/folder-full-locked.svg');
+var useResizeObserver = require('@react-hook/resize-observer');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 
@@ -71,9 +72,10 @@ var CommercetoolsLogoSvg__default = /*#__PURE__*/_interopDefault(CommercetoolsLo
 var Constraints__default = /*#__PURE__*/_interopDefault(Constraints);
 var PageNotFoundSVG__default = /*#__PURE__*/_interopDefault(PageNotFoundSVG);
 var FailedAuthorizationSVG__default = /*#__PURE__*/_interopDefault(FailedAuthorizationSVG);
+var useResizeObserver__default = /*#__PURE__*/_interopDefault(useResizeObserver);
 
 // NOTE: This string will be replaced on build time with the package version.
-var version = "21.3.2";
+var version = "21.3.5";
 
 function _EMOTION_STRINGIFIED_CSS_ERROR__$a() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
 
@@ -170,14 +172,14 @@ TabHeader.propTypes = process.env.NODE_ENV !== "production" ? {
   exactPathMatch: _pt__default["default"].bool.isRequired
 } : {};
 TabHeader.displayName = 'TabHeader';
-var defaultProps$d = {
+var defaultProps$e = {
   isDisabled: false,
   exactPathMatch: false
 };
-TabHeader.defaultProps = defaultProps$d;
+TabHeader.defaultProps = defaultProps$e;
 
 function _EMOTION_STRINGIFIED_CSS_ERROR__$9() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
-var defaultProps$c = {
+var defaultProps$d = {
   titleSize: 'small',
   truncate: false
 };
@@ -264,7 +266,7 @@ PageHeaderTitle.propTypes = process.env.NODE_ENV !== "production" ? {
   subtitle: _pt__default["default"].oneOfType([_pt__default["default"].string, _pt__default["default"].element])
 } : {};
 PageHeaderTitle.displayName = 'PageHeaderTitle';
-PageHeaderTitle.defaultProps = defaultProps$c;
+PageHeaderTitle.defaultProps = defaultProps$d;
 
 function _EMOTION_STRINGIFIED_CSS_ERROR__$8() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
 
@@ -313,10 +315,10 @@ TabularPageContainer.propTypes = process.env.NODE_ENV !== "production" ? {
   color: _pt__default["default"].oneOf(['surface', 'neutral']).isRequired
 } : {};
 TabularPageContainer.displayName = 'TabularPageContainer';
-var defaultProps$b = {
+var defaultProps$c = {
   color: 'surface'
 };
-TabularPageContainer.defaultProps = defaultProps$b;
+TabularPageContainer.defaultProps = defaultProps$c;
 
 var FormControlsContainer = _styled__default["default"]("div", process.env.NODE_ENV === "production" ? {
   target: "elpldre0"
@@ -444,7 +446,7 @@ FormDeleteButton.propTypes = process.env.NODE_ENV !== "production" ? {
 FormDeleteButton.displayName = 'FormDeleteButton';
 FormDeleteButton.defaultProps = deleteDefaultProps;
 
-var defaultProps$a = {
+var defaultProps$b = {
   hideControls: false
 };
 
@@ -487,7 +489,7 @@ TabularMainPage.propTypes = process.env.NODE_ENV !== "production" ? {
   hideControls: _pt__default["default"].bool.isRequired
 } : {};
 TabularMainPage.displayName = 'TabularMainPage';
-TabularMainPage.defaultProps = defaultProps$a; // Static export of pre-configured form control buttons to easily re-use
+TabularMainPage.defaultProps = defaultProps$b; // Static export of pre-configured form control buttons to easily re-use
 // them in the custom controls.
 
 TabularMainPage.FormPrimaryButton = FormPrimaryButton;
@@ -510,7 +512,7 @@ var messages$2 = reactIntl.defineMessages({
   }
 });
 
-var defaultProps$9 = {
+var defaultProps$a = {
   color: 'surface',
   previousPathLabel: messages$2.back
 };
@@ -542,9 +544,9 @@ PageTopBar.propTypes = process.env.NODE_ENV !== "production" ? {
   onClick: _pt__default["default"].func.isRequired
 } : {};
 PageTopBar.displayName = 'PageTopBar';
-PageTopBar.defaultProps = defaultProps$9;
+PageTopBar.defaultProps = defaultProps$a;
 
-var defaultProps$8 = {
+var defaultProps$9 = {
   hideControls: false
 };
 
@@ -597,7 +599,7 @@ TabularDetailPage.propTypes = process.env.NODE_ENV !== "production" ? {
   onPreviousPathClick: _pt__default["default"].func.isRequired
 } : {};
 TabularDetailPage.displayName = 'TabularDetailPage';
-TabularDetailPage.defaultProps = defaultProps$8; // Static export of pre-configured form control buttons to easily re-use
+TabularDetailPage.defaultProps = defaultProps$9; // Static export of pre-configured form control buttons to easily re-use
 // them in the custom controls.
 
 TabularDetailPage.FormPrimaryButton = FormPrimaryButton;
@@ -664,7 +666,7 @@ var getDefaultParentSelector$1 = function getDefaultParentSelector() {
   return process.env.NODE_ENV === 'test' ? document.body : document.querySelector("#".concat(constants.PORTALS_CONTAINER_ID));
 };
 
-var defaultProps$7 = {
+var defaultProps$8 = {
   size: 10,
   zIndex: 1000,
   getParentSelector: getDefaultParentSelector$1
@@ -761,7 +763,7 @@ DialogContainer.propTypes = process.env.NODE_ENV !== "production" ? {
   getParentSelector: _pt__default["default"].any.isRequired
 } : {};
 DialogContainer.displayName = 'DialogContainer';
-DialogContainer.defaultProps = defaultProps$7;
+DialogContainer.defaultProps = defaultProps$8;
 
 function _EMOTION_STRINGIFIED_CSS_ERROR__$4() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
 
@@ -842,7 +844,7 @@ InfoDialog.displayName = 'InfoDialog';
 function ownKeys$3(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); enumerableOnly && (symbols = _filterInstanceProperty__default["default"](symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor__default["default"](object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
 function _objectSpread$3(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$3(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$3(Object(source))).call(_context2, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
-var defaultProps$6 = {
+var defaultProps$7 = {
   isPrimaryButtonDisabled: false,
   dataAttributesPrimaryButton: {},
   dataAttributesSecondaryButton: {}
@@ -887,9 +889,9 @@ DialogFooter.propTypes = process.env.NODE_ENV !== "production" ? {
   dataAttributesSecondaryButton: _pt__default["default"].objectOf(_pt__default["default"].string).isRequired
 } : {};
 DialogFooter.displayName = 'DialogFooter';
-DialogFooter.defaultProps = defaultProps$6;
+DialogFooter.defaultProps = defaultProps$7;
 
-var defaultProps$5 = {
+var defaultProps$6 = {
   labelSecondary: i18n.sharedMessages.cancel,
   labelPrimary: i18n.sharedMessages.confirm
 };
@@ -944,12 +946,12 @@ ConfirmationDialog.propTypes = process.env.NODE_ENV !== "production" ? {
   getParentSelector: _pt__default["default"].func
 } : {};
 ConfirmationDialog.displayName = 'ConfirmationDialog';
-ConfirmationDialog.defaultProps = defaultProps$5; // This is a convenience proxy export to expose pre-defined Intl messages defined in the `@commercetools-frontend/i18n` package.
+ConfirmationDialog.defaultProps = defaultProps$6; // This is a convenience proxy export to expose pre-defined Intl messages defined in the `@commercetools-frontend/i18n` package.
 // The Intl messages can be used for button labels.
 
 ConfirmationDialog.Intl = i18n.sharedMessages;
 
-var defaultProps$4 = {
+var defaultProps$5 = {
   labelSecondary: i18n.sharedMessages.cancel,
   labelPrimary: i18n.sharedMessages.save
 };
@@ -1004,7 +1006,7 @@ FormDialog.propTypes = process.env.NODE_ENV !== "production" ? {
   getParentSelector: _pt__default["default"].func
 } : {};
 FormDialog.displayName = 'FormDialog';
-FormDialog.defaultProps = defaultProps$4; // This is a convenience proxy export to expose pre-defined Intl messages defined in the `@commercetools-frontend/i18n` package.
+FormDialog.defaultProps = defaultProps$5; // This is a convenience proxy export to expose pre-defined Intl messages defined in the `@commercetools-frontend/i18n` package.
 // The Intl messages can be used for button labels.
 
 FormDialog.Intl = i18n.sharedMessages;
@@ -1094,7 +1096,7 @@ var LargeIconWrapper = _styled__default["default"]("span", process.env.NODE_ENV
 // does not recognize the object shape.
 
 
-var defaultProps$3 = {
+var defaultProps$4 = {
   color: 'surface',
   previousPathLabel: messages$2.back
 };
@@ -1157,7 +1159,7 @@ ModalPageTopBar.propTypes = process.env.NODE_ENV !== "production" ? {
   onClose: _pt__default["default"].func.isRequired
 } : {};
 ModalPageTopBar.displayName = 'ModalPageTopBar';
-ModalPageTopBar.defaultProps = defaultProps$3;
+ModalPageTopBar.defaultProps = defaultProps$4;
 
 var getDefaultParentSelector = function getDefaultParentSelector() {
   return process.env.NODE_ENV === 'test' ? document.body : document.querySelector("#".concat(constants.PORTALS_CONTAINER_ID));
@@ -1166,7 +1168,7 @@ var getDefaultParentSelector = function getDefaultParentSelector() {
 // does not recognize the object shape.
 
 
-var defaultProps$2 = {
+var defaultProps$3 = {
   level: 1,
   baseZIndex: 1000,
   getParentSelector: getDefaultParentSelector,
@@ -1265,7 +1267,7 @@ ModalPage.propTypes = process.env.NODE_ENV !== "production" ? {
   })])
 } : {};
 ModalPage.displayName = 'ModalPage';
-ModalPage.defaultProps = defaultProps$2;
+ModalPage.defaultProps = defaultProps$3;
 
 var PageHeader = function PageHeader(props) {
   return jsxRuntime.jsxs("div", {
@@ -1385,7 +1387,7 @@ CustomFormModalPage.FormDeleteButton = FormDeleteButton; // This is a convenienc
 
 CustomFormModalPage.Intl = i18n.sharedMessages;
 
-var defaultProps$1 = {
+var defaultProps$2 = {
   hideControls: false
 };
 
@@ -1458,12 +1460,12 @@ FormModalPage.propTypes = process.env.NODE_ENV !== "production" ? {
   hideControls: _pt__default["default"].bool.isRequired
 } : {};
 FormModalPage.displayName = 'FormModalPage';
-FormModalPage.defaultProps = defaultProps$1; // This is a convenience proxy export to expose pre-defined Intl messages defined in the `@commercetools-frontend/i18n` package.
+FormModalPage.defaultProps = defaultProps$2; // This is a convenience proxy export to expose pre-defined Intl messages defined in the `@commercetools-frontend/i18n` package.
 // The Intl messages can be used for button labels.
 
 FormModalPage.Intl = i18n.sharedMessages;
 
-var defaultProps = {
+var defaultProps$1 = {
   hideControls: false
 };
 
@@ -1528,7 +1530,7 @@ TabularModalPage.propTypes = process.env.NODE_ENV !== "production" ? {
   hideControls: _pt__default["default"].bool.isRequired
 } : {};
 TabularModalPage.displayName = 'TabularModalPage';
-TabularModalPage.defaultProps = defaultProps; // Static export of pre-configured form control buttons to easily re-use
+TabularModalPage.defaultProps = defaultProps$1; // Static export of pre-configured form control buttons to easily re-use
 // them in the custom controls.
 
 TabularModalPage.FormPrimaryButton = FormPrimaryButton;
@@ -1778,6 +1780,32 @@ var PageUnauthorized = function PageUnauthorized() {
 PageUnauthorized.displayName = 'PageUnauthorized';
 
 function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+var defaultProps = {
+  offsetTop: '0px',
+  offsetLeft: '0px',
+  offsetLeftOnExpandedMenu: '0px',
+  containerSelectorToPreventScrollingOnOpen: 'main',
+  zIndex: 10000
+};
+
+var useObserverElementDimensions = function useObserverElementDimensions(element) {
+  var _useState = react$1.useState({
+    height: 0,
+    width: 0
+  }),
+      _useState2 = _slicedToArray(_useState, 2),
+      dimensions = _useState2[0],
+      setDimensions = _useState2[1];
+
+  useResizeObserver__default["default"](element, function (entry) {
+    setDimensions({
+      height: entry.contentRect.height,
+      width: entry.contentRect.width
+    });
+  });
+  return dimensions;
+}; // All modal components expect to be rendered inside this container.
+
 
 var _ref = process.env.NODE_ENV === "production" ? {
   name: "qk9kof",
@@ -1785,19 +1813,28 @@ var _ref = process.env.NODE_ENV === "production" ? {
 } : {
   name: "14eqpg3-PortalsContainer",
   styles: "display:flex;height:1px;margin-top:-1px;label:PortalsContainer;",
-  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInBvcnRhbHMtY29udGFpbmVyLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFRWSIsImZpbGUiOiJwb3J0YWxzLWNvbnRhaW5lci50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5pbXBvcnQgeyBQT1JUQUxTX0NPTlRBSU5FUl9JRCB9IGZyb20gJ0Bjb21tZXJjZXRvb2xzLWZyb250ZW5kL2NvbnN0YW50cyc7XG5cbi8vIEFsbCBtb2RhbCBjb21wb25lbnRzIGV4cGVjdCB0byBiZSByZW5kZXJlZCBpbnNpZGUgdGhpcyBjb250YWluZXIuXG5jb25zdCBQb3J0YWxzQ29udGFpbmVyID0gKCkgPT4gKFxuICA8ZGl2XG4gICAgaWQ9e1BPUlRBTFNfQ09OVEFJTkVSX0lEfVxuICAgIC8vIFRoZSBjb250YWluZXIgbmVlZHMgYSBoZWlnaHQgaW4gb3JkZXIgdG8gYmUgdGFiYmFibGU6IGh0dHBzOi8vcmVhY3Rqcy9yZWFjdC1tb2RhbCM3NzRcbiAgICBjc3M9e2Nzc2BcbiAgICAgIGRpc3BsYXk6IGZsZXg7XG4gICAgICBoZWlnaHQ6IDFweDtcbiAgICAgIG1hcmdpbi10b3A6IC0xcHg7XG4gICAgYH1cbiAgLz5cbik7XG5Qb3J0YWxzQ29udGFpbmVyLmRpc3BsYXlOYW1lID0gJ1BvcnRhbHNDb250YWluZXInO1xuXG5leHBvcnQgZGVmYXVsdCBQb3J0YWxzQ29udGFpbmVyO1xuIl19 */",
+  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInBvcnRhbHMtY29udGFpbmVyLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUE0SGtCIiwiZmlsZSI6InBvcnRhbHMtY29udGFpbmVyLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7XG4gIHR5cGUgTXV0YWJsZVJlZk9iamVjdCxcbiAgdHlwZSBSZWZPYmplY3QsXG4gIGZvcndhcmRSZWYsXG4gIHVzZVN0YXRlLFxufSBmcm9tICdyZWFjdCc7XG5pbXBvcnQgeyBjc3MsIEdsb2JhbCB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCB1c2VSZXNpemVPYnNlcnZlciBmcm9tICdAcmVhY3QtaG9vay9yZXNpemUtb2JzZXJ2ZXInO1xuaW1wb3J0IHsgUE9SVEFMU19DT05UQUlORVJfSUQgfSBmcm9tICdAY29tbWVyY2V0b29scy1mcm9udGVuZC9jb25zdGFudHMnO1xuXG50eXBlIFRMYXlvdXRSZWZzID0ge1xuICBub3RpZmljYXRpb25zR2xvYmFsUmVmOiBNdXRhYmxlUmVmT2JqZWN0PEhUTUxEaXZFbGVtZW50PjtcbiAgbm90aWZpY2F0aW9uc1BhZ2VSZWY6IE11dGFibGVSZWZPYmplY3Q8SFRNTERpdkVsZW1lbnQ+O1xufTtcbnR5cGUgVE9ic2VydmFibGVFbGVtZW50RGltZW5zaW9ucyA9IHtcbiAgaGVpZ2h0OiBudW1iZXI7XG4gIHdpZHRoOiBudW1iZXI7XG59O1xudHlwZSBUUG9ydGFsc0NvbnRhaW5lclByb3BzID0ge1xuICAvKipcbiAgICogVGhlIG9mZnNldCB2YWx1ZSBmb3IgcG9zaXRpb25pbmcgdGhlIGNvbnRhaW5lciBmcm9tIHRoZSB0b3AsIHdoZW4gb3BlbmVkLlxuICAgKiBVc3VhbGx5IHRoaXMgY29ycmVzcG9uZHMgdG8gdGhlIGhlaWdodCBvZiB0aGUgaGVhZGVyIHNlY3Rpb24uXG4gICAqL1xuICBvZmZzZXRUb3A6IHN0cmluZztcbiAgLyoqXG4gICAqIFRoZSBvZmZzZXQgdmFsdWUgZm9yIHBvc2l0aW9uaW5nIHRoZSBjb250YWluZXIgZnJvbSB0aGUgbGVmdCwgd2hlbiBvcGVuZWQuXG4gICAqIFVzdWFsbHkgdGhpcyBjb3JyZXNwb25kcyB0byB0aGUgbWluIHdpZHRoIG9mIHRoZSBuYXYgbWVudS5cbiAgICovXG4gIG9mZnNldExlZnQ6IHN0cmluZztcbiAgLyoqXG4gICAqIFRoZSBvZmZzZXQgdmFsdWUgZm9yIHBvc2l0aW9uaW5nIHRoZSBjb250YWluZXIgZnJvbSB0aGUgbGVmdCwgd2hlbiBvcGVuZWQuXG4gICAqIFRoZSB2YWx1ZSBpcyBvbmx5IGFwcGxpZWQgd2hlbiB0aGUgYC5ib2R5X19tZW51LW9wZW5gIGdsb2JhbCBjbGFzcyBpcyBhZGRlZCB0byB0aGUgRE9NLlxuICAgKiBVc3VhbGx5IHRoaXMgY29ycmVzcG9uZHMgdG8gdGhlIHdpZHRoIG9mIHRoZSBleHBhbmRlZCBuYXYgbWVudS5cbiAgICovXG4gIG9mZnNldExlZnRPbkV4cGFuZGVkTWVudTogc3RyaW5nO1xuICAvKipcbiAgICogVGhlIENTUyBzZWxlY3RvciB0byBhcHBseSB0aGUgYG92ZXJmbG93OiBoaWRkZW5gIHN0eWxlIHRvIChwcmV2ZW50aW5nIHNjcm9sbGluZylcbiAgICogd2hlbiBhIG1vZGFsIGNvbnRhaW5lciBpcyBvcGVuLlxuICAgKi9cbiAgY29udGFpbmVyU2VsZWN0b3JUb1ByZXZlbnRTY3JvbGxpbmdPbk9wZW46IHN0cmluZztcbiAgLyoqXG4gICAqIFRoZSBgei1pbmRleGAgdmFsdWUgdG8gYXBwbHkgdG8gdGhlIHBvcnRhbCBjb250YWluZXIuIERlZmF1bHQgdG8gYDEwMDAwYC5cbiAgICovXG4gIHpJbmRleDogbnVtYmVyO1xufTtcbmNvbnN0IGRlZmF1bHRQcm9wczogUGljazxcbiAgVFBvcnRhbHNDb250YWluZXJQcm9wcyxcbiAgfCAnb2Zmc2V0VG9wJ1xuICB8ICdvZmZzZXRMZWZ0J1xuICB8ICdvZmZzZXRMZWZ0T25FeHBhbmRlZE1lbnUnXG4gIHwgJ2NvbnRhaW5lclNlbGVjdG9yVG9QcmV2ZW50U2Nyb2xsaW5nT25PcGVuJ1xuICB8ICd6SW5kZXgnXG4+ID0ge1xuICBvZmZzZXRUb3A6ICcwcHgnLFxuICBvZmZzZXRMZWZ0OiAnMHB4JyxcbiAgb2Zmc2V0TGVmdE9uRXhwYW5kZWRNZW51OiAnMHB4JyxcbiAgY29udGFpbmVyU2VsZWN0b3JUb1ByZXZlbnRTY3JvbGxpbmdPbk9wZW46ICdtYWluJyxcbiAgekluZGV4OiAxMDAwMCxcbn07XG5cbmNvbnN0IHVzZU9ic2VydmVyRWxlbWVudERpbWVuc2lvbnMgPSAoXG4gIGVsZW1lbnQ6IFJlZk9iamVjdDxIVE1MRGl2RWxlbWVudD4gfCBudWxsXG4pOiBUT2JzZXJ2YWJsZUVsZW1lbnREaW1lbnNpb25zID0+IHtcbiAgY29uc3QgW2RpbWVuc2lvbnMsIHNldERpbWVuc2lvbnNdID0gdXNlU3RhdGU8VE9ic2VydmFibGVFbGVtZW50RGltZW5zaW9ucz4oe1xuICAgIGhlaWdodDogMCxcbiAgICB3aWR0aDogMCxcbiAgfSk7XG5cbiAgdXNlUmVzaXplT2JzZXJ2ZXI8SFRNTERpdkVsZW1lbnQ+KGVsZW1lbnQsIChlbnRyeSkgPT4ge1xuICAgIHNldERpbWVuc2lvbnMoe1xuICAgICAgaGVpZ2h0OiBlbnRyeS5jb250ZW50UmVjdC5oZWlnaHQsXG4gICAgICB3aWR0aDogZW50cnkuY29udGVudFJlY3Qud2lkdGgsXG4gICAgfSk7XG4gIH0pO1xuXG4gIHJldHVybiBkaW1lbnNpb25zO1xufTtcblxuLy8gQWxsIG1vZGFsIGNvbXBvbmVudHMgZXhwZWN0IHRvIGJlIHJlbmRlcmVkIGluc2lkZSB0aGlzIGNvbnRhaW5lci5cbmNvbnN0IFBvcnRhbHNDb250YWluZXIgPSBmb3J3YXJkUmVmPFRMYXlvdXRSZWZzLCBUUG9ydGFsc0NvbnRhaW5lclByb3BzPihcbiAgKHByb3BzLCByZWYpID0+IHtcbiAgICBjb25zdCBnbG9iYWxOb3RpZmljYXRpb25zRWxlbWVudERpbWVuc2lvbnMgPSB1c2VPYnNlcnZlckVsZW1lbnREaW1lbnNpb25zKFxuICAgICAgKHJlZiBhcyBNdXRhYmxlUmVmT2JqZWN0PFRMYXlvdXRSZWZzPik/LmN1cnJlbnQ/Lm5vdGlmaWNhdGlvbnNHbG9iYWxSZWZcbiAgICApO1xuICAgIGNvbnN0IHBhZ2VOb3RpZmljYXRpb25zRWxlbWVudERpbWVuc2lvbnMgPSB1c2VPYnNlcnZlckVsZW1lbnREaW1lbnNpb25zKFxuICAgICAgKHJlZiBhcyBNdXRhYmxlUmVmT2JqZWN0PFRMYXlvdXRSZWZzPik/LmN1cnJlbnQ/Lm5vdGlmaWNhdGlvbnNQYWdlUmVmXG4gICAgKTtcblxuICAgIHJldHVybiAoXG4gICAgICA8PlxuICAgICAgICA8R2xvYmFsXG4gICAgICAgICAgLy8gQXBwbHkgc29tZSBnbG9iYWwgc3R5bGVzLCBiYXNlZCBvbiB0aGUgYC5SZWFjdE1vZGFsX19Cb2R5LS1vcGVuYCBjbGFzcy5cbiAgICAgICAgICBzdHlsZXM9e2Nzc2BcbiAgICAgICAgICAgIC5SZWFjdE1vZGFsX19Cb2R5LS1vcGVuXG4gICAgICAgICAgICAgICR7cHJvcHMuY29udGFpbmVyU2VsZWN0b3JUb1ByZXZlbnRTY3JvbGxpbmdPbk9wZW59IHtcbiAgICAgICAgICAgICAgb3ZlcmZsb3c6IGhpZGRlbjtcbiAgICAgICAgICAgIH1cblxuICAgICAgICAgICAgLlJlYWN0TW9kYWxfX0JvZHktLW9wZW4gIyR7UE9SVEFMU19DT05UQUlORVJfSUR9IHtcbiAgICAgICAgICAgICAgcG9zaXRpb246IGZpeGVkO1xuICAgICAgICAgICAgICBoZWlnaHQ6IGNhbGMoXG4gICAgICAgICAgICAgICAgMTAwJSAtICR7cHJvcHMub2Zmc2V0VG9wfSAtXG4gICAgICAgICAgICAgICAgICAke2dsb2JhbE5vdGlmaWNhdGlvbnNFbGVtZW50RGltZW5zaW9ucy5oZWlnaHR9cHggLVxuICAgICAgICAgICAgICAgICAgJHtwYWdlTm90aWZpY2F0aW9uc0VsZW1lbnREaW1lbnNpb25zLmhlaWdodH1weFxuICAgICAgICAgICAgICApO1xuICAgICAgICAgICAgICB3aWR0aDogY2FsYygxMDAlIC0gJHtwcm9wcy5vZmZzZXRMZWZ0fSk7XG4gICAgICAgICAgICAgIHRvcDogY2FsYyhcbiAgICAgICAgICAgICAgICAke3Byb3BzLm9mZnNldFRvcH0gK1xuICAgICAgICAgICAgICAgICAgJHtnbG9iYWxOb3RpZmljYXRpb25zRWxlbWVudERpbWVuc2lvbnMuaGVpZ2h0fXB4ICtcbiAgICAgICAgICAgICAgICAgICR7cGFnZU5vdGlmaWNhdGlvbnNFbGVtZW50RGltZW5zaW9ucy5oZWlnaHR9cHhcbiAgICAgICAgICAgICAgKTtcbiAgICAgICAgICAgICAgcmlnaHQ6IDA7XG4gICAgICAgICAgICAgIGJvdHRvbTogMDtcbiAgICAgICAgICAgICAgei1pbmRleDogJHtwcm9wcy56SW5kZXh9O1xuICAgICAgICAgICAgfVxuXG4gICAgICAgICAgICAuUmVhY3RNb2RhbF9fQm9keS0tb3Blbi5ib2R5X19tZW51LW9wZW4gIyR7UE9SVEFMU19DT05UQUlORVJfSUR9IHtcbiAgICAgICAgICAgICAgd2lkdGg6IGNhbGMoMTAwJSAtICR7cHJvcHMub2Zmc2V0TGVmdE9uRXhwYW5kZWRNZW51fSk7XG4gICAgICAgICAgICB9XG4gICAgICAgICAgYH1cbiAgICAgICAgLz5cbiAgICAgICAgPGRpdlxuICAgICAgICAgIGlkPXtQT1JUQUxTX0NPTlRBSU5FUl9JRH1cbiAgICAgICAgICAvLyBUaGUgY29udGFpbmVyIG5lZWRzIGEgaGVpZ2h0IGluIG9yZGVyIHRvIGJlIHRhYmJhYmxlOiBodHRwczovL3JlYWN0anMvcmVhY3QtbW9kYWwjNzc0XG4gICAgICAgICAgY3NzPXtjc3NgXG4gICAgICAgICAgICBkaXNwbGF5OiBmbGV4O1xuICAgICAgICAgICAgaGVpZ2h0OiAxcHg7XG4gICAgICAgICAgICBtYXJnaW4tdG9wOiAtMXB4O1xuICAgICAgICAgIGB9XG4gICAgICAgIC8+XG4gICAgICA8Lz5cbiAgICApO1xuICB9XG4pO1xuUG9ydGFsc0NvbnRhaW5lci5kaXNwbGF5TmFtZSA9ICdQb3J0YWxzQ29udGFpbmVyJztcblBvcnRhbHNDb250YWluZXIuZGVmYXVsdFByb3BzID0gZGVmYXVsdFByb3BzO1xuXG5leHBvcnQgZGVmYXVsdCBQb3J0YWxzQ29udGFpbmVyO1xuIl19 */",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
 
-var PortalsContainer = function PortalsContainer() {
-  return jsxRuntime.jsx("div", {
-    id: constants.PORTALS_CONTAINER_ID // The container needs a height in order to be tabbable: https://reactjs/react-modal#774
-    ,
-    css: _ref
-  });
-};
+var PortalsContainer = /*#__PURE__*/react$1.forwardRef(function (props, ref) {
+  var _current, _current2;
 
+  var globalNotificationsElementDimensions = useObserverElementDimensions(ref === null || ref === void 0 ? void 0 : (_current = ref.current) === null || _current === void 0 ? void 0 : _current.notificationsGlobalRef);
+  var pageNotificationsElementDimensions = useObserverElementDimensions(ref === null || ref === void 0 ? void 0 : (_current2 = ref.current) === null || _current2 === void 0 ? void 0 : _current2.notificationsPageRef);
+  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 ", props.containerSelectorToPreventScrollingOnOpen, "{overflow:hidden;}.ReactModal__Body--open #", constants.PORTALS_CONTAINER_ID, "{position:fixed;height:calc(\n                100% - ", props.offsetTop, " -\n                  ", globalNotificationsElementDimensions.height, "px -\n                  ", pageNotificationsElementDimensions.height, "px\n              );width:calc(100% - ", props.offsetLeft, ");top:calc(\n                ", props.offsetTop, " +\n                  ", globalNotificationsElementDimensions.height, "px +\n                  ", pageNotificationsElementDimensions.height, "px\n              );right:0;bottom:0;z-index:", props.zIndex, ";}.ReactModal__Body--open.body__menu-open #", constants.PORTALS_CONTAINER_ID, "{width:calc(100% - ", props.offsetLeftOnExpandedMenu, ");}" + (process.env.NODE_ENV === "production" ? "" : ";label:PortalsContainer;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInBvcnRhbHMtY29udGFpbmVyLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUE0RnFCIiwiZmlsZSI6InBvcnRhbHMtY29udGFpbmVyLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7XG4gIHR5cGUgTXV0YWJsZVJlZk9iamVjdCxcbiAgdHlwZSBSZWZPYmplY3QsXG4gIGZvcndhcmRSZWYsXG4gIHVzZVN0YXRlLFxufSBmcm9tICdyZWFjdCc7XG5pbXBvcnQgeyBjc3MsIEdsb2JhbCB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCB1c2VSZXNpemVPYnNlcnZlciBmcm9tICdAcmVhY3QtaG9vay9yZXNpemUtb2JzZXJ2ZXInO1xuaW1wb3J0IHsgUE9SVEFMU19DT05UQUlORVJfSUQgfSBmcm9tICdAY29tbWVyY2V0b29scy1mcm9udGVuZC9jb25zdGFudHMnO1xuXG50eXBlIFRMYXlvdXRSZWZzID0ge1xuICBub3RpZmljYXRpb25zR2xvYmFsUmVmOiBNdXRhYmxlUmVmT2JqZWN0PEhUTUxEaXZFbGVtZW50PjtcbiAgbm90aWZpY2F0aW9uc1BhZ2VSZWY6IE11dGFibGVSZWZPYmplY3Q8SFRNTERpdkVsZW1lbnQ+O1xufTtcbnR5cGUgVE9ic2VydmFibGVFbGVtZW50RGltZW5zaW9ucyA9IHtcbiAgaGVpZ2h0OiBudW1iZXI7XG4gIHdpZHRoOiBudW1iZXI7XG59O1xudHlwZSBUUG9ydGFsc0NvbnRhaW5lclByb3BzID0ge1xuICAvKipcbiAgICogVGhlIG9mZnNldCB2YWx1ZSBmb3IgcG9zaXRpb25pbmcgdGhlIGNvbnRhaW5lciBmcm9tIHRoZSB0b3AsIHdoZW4gb3BlbmVkLlxuICAgKiBVc3VhbGx5IHRoaXMgY29ycmVzcG9uZHMgdG8gdGhlIGhlaWdodCBvZiB0aGUgaGVhZGVyIHNlY3Rpb24uXG4gICAqL1xuICBvZmZzZXRUb3A6IHN0cmluZztcbiAgLyoqXG4gICAqIFRoZSBvZmZzZXQgdmFsdWUgZm9yIHBvc2l0aW9uaW5nIHRoZSBjb250YWluZXIgZnJvbSB0aGUgbGVmdCwgd2hlbiBvcGVuZWQuXG4gICAqIFVzdWFsbHkgdGhpcyBjb3JyZXNwb25kcyB0byB0aGUgbWluIHdpZHRoIG9mIHRoZSBuYXYgbWVudS5cbiAgICovXG4gIG9mZnNldExlZnQ6IHN0cmluZztcbiAgLyoqXG4gICAqIFRoZSBvZmZzZXQgdmFsdWUgZm9yIHBvc2l0aW9uaW5nIHRoZSBjb250YWluZXIgZnJvbSB0aGUgbGVmdCwgd2hlbiBvcGVuZWQuXG4gICAqIFRoZSB2YWx1ZSBpcyBvbmx5IGFwcGxpZWQgd2hlbiB0aGUgYC5ib2R5X19tZW51LW9wZW5gIGdsb2JhbCBjbGFzcyBpcyBhZGRlZCB0byB0aGUgRE9NLlxuICAgKiBVc3VhbGx5IHRoaXMgY29ycmVzcG9uZHMgdG8gdGhlIHdpZHRoIG9mIHRoZSBleHBhbmRlZCBuYXYgbWVudS5cbiAgICovXG4gIG9mZnNldExlZnRPbkV4cGFuZGVkTWVudTogc3RyaW5nO1xuICAvKipcbiAgICogVGhlIENTUyBzZWxlY3RvciB0byBhcHBseSB0aGUgYG92ZXJmbG93OiBoaWRkZW5gIHN0eWxlIHRvIChwcmV2ZW50aW5nIHNjcm9sbGluZylcbiAgICogd2hlbiBhIG1vZGFsIGNvbnRhaW5lciBpcyBvcGVuLlxuICAgKi9cbiAgY29udGFpbmVyU2VsZWN0b3JUb1ByZXZlbnRTY3JvbGxpbmdPbk9wZW46IHN0cmluZztcbiAgLyoqXG4gICAqIFRoZSBgei1pbmRleGAgdmFsdWUgdG8gYXBwbHkgdG8gdGhlIHBvcnRhbCBjb250YWluZXIuIERlZmF1bHQgdG8gYDEwMDAwYC5cbiAgICovXG4gIHpJbmRleDogbnVtYmVyO1xufTtcbmNvbnN0IGRlZmF1bHRQcm9wczogUGljazxcbiAgVFBvcnRhbHNDb250YWluZXJQcm9wcyxcbiAgfCAnb2Zmc2V0VG9wJ1xuICB8ICdvZmZzZXRMZWZ0J1xuICB8ICdvZmZzZXRMZWZ0T25FeHBhbmRlZE1lbnUnXG4gIHwgJ2NvbnRhaW5lclNlbGVjdG9yVG9QcmV2ZW50U2Nyb2xsaW5nT25PcGVuJ1xuICB8ICd6SW5kZXgnXG4+ID0ge1xuICBvZmZzZXRUb3A6ICcwcHgnLFxuICBvZmZzZXRMZWZ0OiAnMHB4JyxcbiAgb2Zmc2V0TGVmdE9uRXhwYW5kZWRNZW51OiAnMHB4JyxcbiAgY29udGFpbmVyU2VsZWN0b3JUb1ByZXZlbnRTY3JvbGxpbmdPbk9wZW46ICdtYWluJyxcbiAgekluZGV4OiAxMDAwMCxcbn07XG5cbmNvbnN0IHVzZU9ic2VydmVyRWxlbWVudERpbWVuc2lvbnMgPSAoXG4gIGVsZW1lbnQ6IFJlZk9iamVjdDxIVE1MRGl2RWxlbWVudD4gfCBudWxsXG4pOiBUT2JzZXJ2YWJsZUVsZW1lbnREaW1lbnNpb25zID0+IHtcbiAgY29uc3QgW2RpbWVuc2lvbnMsIHNldERpbWVuc2lvbnNdID0gdXNlU3RhdGU8VE9ic2VydmFibGVFbGVtZW50RGltZW5zaW9ucz4oe1xuICAgIGhlaWdodDogMCxcbiAgICB3aWR0aDogMCxcbiAgfSk7XG5cbiAgdXNlUmVzaXplT2JzZXJ2ZXI8SFRNTERpdkVsZW1lbnQ+KGVsZW1lbnQsIChlbnRyeSkgPT4ge1xuICAgIHNldERpbWVuc2lvbnMoe1xuICAgICAgaGVpZ2h0OiBlbnRyeS5jb250ZW50UmVjdC5oZWlnaHQsXG4gICAgICB3aWR0aDogZW50cnkuY29udGVudFJlY3Qud2lkdGgsXG4gICAgfSk7XG4gIH0pO1xuXG4gIHJldHVybiBkaW1lbnNpb25zO1xufTtcblxuLy8gQWxsIG1vZGFsIGNvbXBvbmVudHMgZXhwZWN0IHRvIGJlIHJlbmRlcmVkIGluc2lkZSB0aGlzIGNvbnRhaW5lci5cbmNvbnN0IFBvcnRhbHNDb250YWluZXIgPSBmb3J3YXJkUmVmPFRMYXlvdXRSZWZzLCBUUG9ydGFsc0NvbnRhaW5lclByb3BzPihcbiAgKHByb3BzLCByZWYpID0+IHtcbiAgICBjb25zdCBnbG9iYWxOb3RpZmljYXRpb25zRWxlbWVudERpbWVuc2lvbnMgPSB1c2VPYnNlcnZlckVsZW1lbnREaW1lbnNpb25zKFxuICAgICAgKHJlZiBhcyBNdXRhYmxlUmVmT2JqZWN0PFRMYXlvdXRSZWZzPik/LmN1cnJlbnQ/Lm5vdGlmaWNhdGlvbnNHbG9iYWxSZWZcbiAgICApO1xuICAgIGNvbnN0IHBhZ2VOb3RpZmljYXRpb25zRWxlbWVudERpbWVuc2lvbnMgPSB1c2VPYnNlcnZlckVsZW1lbnREaW1lbnNpb25zKFxuICAgICAgKHJlZiBhcyBNdXRhYmxlUmVmT2JqZWN0PFRMYXlvdXRSZWZzPik/LmN1cnJlbnQ/Lm5vdGlmaWNhdGlvbnNQYWdlUmVmXG4gICAgKTtcblxuICAgIHJldHVybiAoXG4gICAgICA8PlxuICAgICAgICA8R2xvYmFsXG4gICAgICAgICAgLy8gQXBwbHkgc29tZSBnbG9iYWwgc3R5bGVzLCBiYXNlZCBvbiB0aGUgYC5SZWFjdE1vZGFsX19Cb2R5LS1vcGVuYCBjbGFzcy5cbiAgICAgICAgICBzdHlsZXM9e2Nzc2BcbiAgICAgICAgICAgIC5SZWFjdE1vZGFsX19Cb2R5LS1vcGVuXG4gICAgICAgICAgICAgICR7cHJvcHMuY29udGFpbmVyU2VsZWN0b3JUb1ByZXZlbnRTY3JvbGxpbmdPbk9wZW59IHtcbiAgICAgICAgICAgICAgb3ZlcmZsb3c6IGhpZGRlbjtcbiAgICAgICAgICAgIH1cblxuICAgICAgICAgICAgLlJlYWN0TW9kYWxfX0JvZHktLW9wZW4gIyR7UE9SVEFMU19DT05UQUlORVJfSUR9IHtcbiAgICAgICAgICAgICAgcG9zaXRpb246IGZpeGVkO1xuICAgICAgICAgICAgICBoZWlnaHQ6IGNhbGMoXG4gICAgICAgICAgICAgICAgMTAwJSAtICR7cHJvcHMub2Zmc2V0VG9wfSAtXG4gICAgICAgICAgICAgICAgICAke2dsb2JhbE5vdGlmaWNhdGlvbnNFbGVtZW50RGltZW5zaW9ucy5oZWlnaHR9cHggLVxuICAgICAgICAgICAgICAgICAgJHtwYWdlTm90aWZpY2F0aW9uc0VsZW1lbnREaW1lbnNpb25zLmhlaWdodH1weFxuICAgICAgICAgICAgICApO1xuICAgICAgICAgICAgICB3aWR0aDogY2FsYygxMDAlIC0gJHtwcm9wcy5vZmZzZXRMZWZ0fSk7XG4gICAgICAgICAgICAgIHRvcDogY2FsYyhcbiAgICAgICAgICAgICAgICAke3Byb3BzLm9mZnNldFRvcH0gK1xuICAgICAgICAgICAgICAgICAgJHtnbG9iYWxOb3RpZmljYXRpb25zRWxlbWVudERpbWVuc2lvbnMuaGVpZ2h0fXB4ICtcbiAgICAgICAgICAgICAgICAgICR7cGFnZU5vdGlmaWNhdGlvbnNFbGVtZW50RGltZW5zaW9ucy5oZWlnaHR9cHhcbiAgICAgICAgICAgICAgKTtcbiAgICAgICAgICAgICAgcmlnaHQ6IDA7XG4gICAgICAgICAgICAgIGJvdHRvbTogMDtcbiAgICAgICAgICAgICAgei1pbmRleDogJHtwcm9wcy56SW5kZXh9O1xuICAgICAgICAgICAgfVxuXG4gICAgICAgICAgICAuUmVhY3RNb2RhbF9fQm9keS0tb3Blbi5ib2R5X19tZW51LW9wZW4gIyR7UE9SVEFMU19DT05UQUlORVJfSUR9IHtcbiAgICAgICAgICAgICAgd2lkdGg6IGNhbGMoMTAwJSAtICR7cHJvcHMub2Zmc2V0TGVmdE9uRXhwYW5kZWRNZW51fSk7XG4gICAgICAgICAgICB9XG4gICAgICAgICAgYH1cbiAgICAgICAgLz5cbiAgICAgICAgPGRpdlxuICAgICAgICAgIGlkPXtQT1JUQUxTX0NPTlRBSU5FUl9JRH1cbiAgICAgICAgICAvLyBUaGUgY29udGFpbmVyIG5lZWRzIGEgaGVpZ2h0IGluIG9yZGVyIHRvIGJlIHRhYmJhYmxlOiBodHRwczovL3JlYWN0anMvcmVhY3QtbW9kYWwjNzc0XG4gICAgICAgICAgY3NzPXtjc3NgXG4gICAgICAgICAgICBkaXNwbGF5OiBmbGV4O1xuICAgICAgICAgICAgaGVpZ2h0OiAxcHg7XG4gICAgICAgICAgICBtYXJnaW4tdG9wOiAtMXB4O1xuICAgICAgICAgIGB9XG4gICAgICAgIC8+XG4gICAgICA8Lz5cbiAgICApO1xuICB9XG4pO1xuUG9ydGFsc0NvbnRhaW5lci5kaXNwbGF5TmFtZSA9ICdQb3J0YWxzQ29udGFpbmVyJztcblBvcnRhbHNDb250YWluZXIuZGVmYXVsdFByb3BzID0gZGVmYXVsdFByb3BzO1xuXG5leHBvcnQgZGVmYXVsdCBQb3J0YWxzQ29udGFpbmVyO1xuIl19 */")
+    }), jsxRuntime.jsx("div", {
+      id: constants.PORTALS_CONTAINER_ID // The container needs a height in order to be tabbable: https://reactjs/react-modal#774
+      ,
+      css: _ref
+    })]
+  });
+});
 PortalsContainer.displayName = 'PortalsContainer';
+PortalsContainer.defaultProps = defaultProps;
 
 var useModalState = function useModalState() {
   var isInitiallyOpen = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;

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

@@ -41,6 +41,7 @@ var CommercetoolsLogoSvg = require('@commercetools-frontend/assets/logos/commerc
 var Constraints = require('@commercetools-uikit/constraints');
 var PageNotFoundSVG = require('@commercetools-frontend/assets/images/desert-fox.svg');
 var FailedAuthorizationSVG = require('@commercetools-frontend/assets/images/folder-full-locked.svg');
+var useResizeObserver = require('@react-hook/resize-observer');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 
@@ -70,9 +71,10 @@ var CommercetoolsLogoSvg__default = /*#__PURE__*/_interopDefault(CommercetoolsLo
 var Constraints__default = /*#__PURE__*/_interopDefault(Constraints);
 var PageNotFoundSVG__default = /*#__PURE__*/_interopDefault(PageNotFoundSVG);
 var FailedAuthorizationSVG__default = /*#__PURE__*/_interopDefault(FailedAuthorizationSVG);
+var useResizeObserver__default = /*#__PURE__*/_interopDefault(useResizeObserver);
 
 // NOTE: This string will be replaced on build time with the package version.
-var version = "21.3.2";
+var version = "21.3.5";
 
 var getBottomBorderStyles = function getBottomBorderStyles(background) {
   return /*#__PURE__*/react.css(":after{content:'';position:absolute;bottom:0;left:0;right:0;height:4px;border-radius:", designSystem.customProperties.borderRadius2, ";background-color:", background, ";transition:background-color ", designSystem.customProperties.transitionEaseinout150Ms, ";}" + ("" ), "" );
@@ -153,13 +155,13 @@ var TabHeader = function TabHeader(props) {
 };
 TabHeader.propTypes = {};
 TabHeader.displayName = 'TabHeader';
-var defaultProps$d = {
+var defaultProps$e = {
   isDisabled: false,
   exactPathMatch: false
 };
-TabHeader.defaultProps = defaultProps$d;
+TabHeader.defaultProps = defaultProps$e;
 
-var defaultProps$c = {
+var defaultProps$d = {
   titleSize: 'small',
   truncate: false
 };
@@ -233,7 +235,7 @@ var PageHeaderTitle = function PageHeaderTitle(props) {
 
 PageHeaderTitle.propTypes = {};
 PageHeaderTitle.displayName = 'PageHeaderTitle';
-PageHeaderTitle.defaultProps = defaultProps$c;
+PageHeaderTitle.defaultProps = defaultProps$d;
 
 var TabControls = _styled__default["default"]("div", {
   target: "elpldre1"
@@ -266,10 +268,10 @@ var TabularPageContainer = function TabularPageContainer(props) {
 
 TabularPageContainer.propTypes = {};
 TabularPageContainer.displayName = 'TabularPageContainer';
-var defaultProps$b = {
+var defaultProps$c = {
   color: 'surface'
 };
-TabularPageContainer.defaultProps = defaultProps$b;
+TabularPageContainer.defaultProps = defaultProps$c;
 
 var FormControlsContainer = _styled__default["default"]("div", {
   target: "elpldre0"
@@ -355,7 +357,7 @@ FormDeleteButton.propTypes = {};
 FormDeleteButton.displayName = 'FormDeleteButton';
 FormDeleteButton.defaultProps = deleteDefaultProps;
 
-var defaultProps$a = {
+var defaultProps$b = {
   hideControls: false
 };
 
@@ -388,7 +390,7 @@ var TabularMainPage = function TabularMainPage(props) {
 
 TabularMainPage.propTypes = {};
 TabularMainPage.displayName = 'TabularMainPage';
-TabularMainPage.defaultProps = defaultProps$a; // Static export of pre-configured form control buttons to easily re-use
+TabularMainPage.defaultProps = defaultProps$b; // Static export of pre-configured form control buttons to easily re-use
 // them in the custom controls.
 
 TabularMainPage.FormPrimaryButton = FormPrimaryButton;
@@ -411,7 +413,7 @@ var messages$2 = reactIntl.defineMessages({
   }
 });
 
-var defaultProps$9 = {
+var defaultProps$a = {
   color: 'surface',
   previousPathLabel: messages$2.back
 };
@@ -434,9 +436,9 @@ var PageTopBar = function PageTopBar(props) {
 
 PageTopBar.propTypes = {};
 PageTopBar.displayName = 'PageTopBar';
-PageTopBar.defaultProps = defaultProps$9;
+PageTopBar.defaultProps = defaultProps$a;
 
-var defaultProps$8 = {
+var defaultProps$9 = {
   hideControls: false
 };
 
@@ -472,7 +474,7 @@ var TabularDetailPage = function TabularDetailPage(props) {
 
 TabularDetailPage.propTypes = {};
 TabularDetailPage.displayName = 'TabularDetailPage';
-TabularDetailPage.defaultProps = defaultProps$8; // Static export of pre-configured form control buttons to easily re-use
+TabularDetailPage.defaultProps = defaultProps$9; // Static export of pre-configured form control buttons to easily re-use
 // them in the custom controls.
 
 TabularDetailPage.FormPrimaryButton = FormPrimaryButton;
@@ -530,7 +532,7 @@ var getDefaultParentSelector$1 = function getDefaultParentSelector() {
   return document.querySelector("#".concat(constants.PORTALS_CONTAINER_ID));
 };
 
-var defaultProps$7 = {
+var defaultProps$8 = {
   size: 10,
   zIndex: 1000,
   getParentSelector: getDefaultParentSelector$1
@@ -606,7 +608,7 @@ var DialogContainer = function DialogContainer(props) {
 
 DialogContainer.propTypes = {};
 DialogContainer.displayName = 'DialogContainer';
-DialogContainer.defaultProps = defaultProps$7;
+DialogContainer.defaultProps = defaultProps$8;
 
 var _ref$4 = {
   name: "o5s7gs",
@@ -666,7 +668,7 @@ InfoDialog.displayName = 'InfoDialog';
 function ownKeys$3(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); enumerableOnly && (symbols = _filterInstanceProperty__default["default"](symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor__default["default"](object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
 function _objectSpread$3(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$3(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$3(Object(source))).call(_context2, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
-var defaultProps$6 = {
+var defaultProps$7 = {
   isPrimaryButtonDisabled: false,
   dataAttributesPrimaryButton: {},
   dataAttributesSecondaryButton: {}
@@ -695,9 +697,9 @@ var DialogFooter = function DialogFooter(props) {
 
 DialogFooter.propTypes = {};
 DialogFooter.displayName = 'DialogFooter';
-DialogFooter.defaultProps = defaultProps$6;
+DialogFooter.defaultProps = defaultProps$7;
 
-var defaultProps$5 = {
+var defaultProps$6 = {
   labelSecondary: i18n.sharedMessages.cancel,
   labelPrimary: i18n.sharedMessages.confirm
 };
@@ -729,12 +731,12 @@ var ConfirmationDialog = function ConfirmationDialog(props) {
 
 ConfirmationDialog.propTypes = {};
 ConfirmationDialog.displayName = 'ConfirmationDialog';
-ConfirmationDialog.defaultProps = defaultProps$5; // This is a convenience proxy export to expose pre-defined Intl messages defined in the `@commercetools-frontend/i18n` package.
+ConfirmationDialog.defaultProps = defaultProps$6; // This is a convenience proxy export to expose pre-defined Intl messages defined in the `@commercetools-frontend/i18n` package.
 // The Intl messages can be used for button labels.
 
 ConfirmationDialog.Intl = i18n.sharedMessages;
 
-var defaultProps$4 = {
+var defaultProps$5 = {
   labelSecondary: i18n.sharedMessages.cancel,
   labelPrimary: i18n.sharedMessages.save
 };
@@ -766,7 +768,7 @@ var FormDialog = function FormDialog(props) {
 
 FormDialog.propTypes = {};
 FormDialog.displayName = 'FormDialog';
-FormDialog.defaultProps = defaultProps$4; // This is a convenience proxy export to expose pre-defined Intl messages defined in the `@commercetools-frontend/i18n` package.
+FormDialog.defaultProps = defaultProps$5; // This is a convenience proxy export to expose pre-defined Intl messages defined in the `@commercetools-frontend/i18n` package.
 // The Intl messages can be used for button labels.
 
 FormDialog.Intl = i18n.sharedMessages;
@@ -825,7 +827,7 @@ var LargeIconWrapper = _styled__default["default"]("span", {
 // does not recognize the object shape.
 
 
-var defaultProps$3 = {
+var defaultProps$4 = {
   color: 'surface',
   previousPathLabel: messages$2.back
 };
@@ -874,7 +876,7 @@ var ModalPageTopBar = function ModalPageTopBar(props) {
 
 ModalPageTopBar.propTypes = {};
 ModalPageTopBar.displayName = 'ModalPageTopBar';
-ModalPageTopBar.defaultProps = defaultProps$3;
+ModalPageTopBar.defaultProps = defaultProps$4;
 
 var getDefaultParentSelector = function getDefaultParentSelector() {
   return document.querySelector("#".concat(constants.PORTALS_CONTAINER_ID));
@@ -883,7 +885,7 @@ var getDefaultParentSelector = function getDefaultParentSelector() {
 // does not recognize the object shape.
 
 
-var defaultProps$2 = {
+var defaultProps$3 = {
   level: 1,
   baseZIndex: 1000,
   getParentSelector: getDefaultParentSelector,
@@ -964,7 +966,7 @@ var ModalPage = function ModalPage(props) {
 
 ModalPage.propTypes = {};
 ModalPage.displayName = 'ModalPage';
-ModalPage.defaultProps = defaultProps$2;
+ModalPage.defaultProps = defaultProps$3;
 
 var PageHeader = function PageHeader(props) {
   return jsxRuntime.jsxs("div", {
@@ -1042,7 +1044,7 @@ CustomFormModalPage.FormDeleteButton = FormDeleteButton; // This is a convenienc
 
 CustomFormModalPage.Intl = i18n.sharedMessages;
 
-var defaultProps$1 = {
+var defaultProps$2 = {
   hideControls: false
 };
 
@@ -1080,12 +1082,12 @@ var FormModalPage = function FormModalPage(props) {
 
 FormModalPage.propTypes = {};
 FormModalPage.displayName = 'FormModalPage';
-FormModalPage.defaultProps = defaultProps$1; // This is a convenience proxy export to expose pre-defined Intl messages defined in the `@commercetools-frontend/i18n` package.
+FormModalPage.defaultProps = defaultProps$2; // This is a convenience proxy export to expose pre-defined Intl messages defined in the `@commercetools-frontend/i18n` package.
 // The Intl messages can be used for button labels.
 
 FormModalPage.Intl = i18n.sharedMessages;
 
-var defaultProps = {
+var defaultProps$1 = {
   hideControls: false
 };
 
@@ -1128,7 +1130,7 @@ var TabularModalPage = function TabularModalPage(props) {
 
 TabularModalPage.propTypes = {};
 TabularModalPage.displayName = 'TabularModalPage';
-TabularModalPage.defaultProps = defaultProps; // Static export of pre-configured form control buttons to easily re-use
+TabularModalPage.defaultProps = defaultProps$1; // Static export of pre-configured form control buttons to easily re-use
 // them in the custom controls.
 
 TabularModalPage.FormPrimaryButton = FormPrimaryButton;
@@ -1339,20 +1341,56 @@ var PageUnauthorized = function PageUnauthorized() {
 };
 PageUnauthorized.displayName = 'PageUnauthorized';
 
+var defaultProps = {
+  offsetTop: '0px',
+  offsetLeft: '0px',
+  offsetLeftOnExpandedMenu: '0px',
+  containerSelectorToPreventScrollingOnOpen: 'main',
+  zIndex: 10000
+};
+
+var useObserverElementDimensions = function useObserverElementDimensions(element) {
+  var _useState = react$1.useState({
+    height: 0,
+    width: 0
+  }),
+      _useState2 = _slicedToArray(_useState, 2),
+      dimensions = _useState2[0],
+      setDimensions = _useState2[1];
+
+  useResizeObserver__default["default"](element, function (entry) {
+    setDimensions({
+      height: entry.contentRect.height,
+      width: entry.contentRect.width
+    });
+  });
+  return dimensions;
+}; // All modal components expect to be rendered inside this container.
+
+
 var _ref = {
   name: "qk9kof",
   styles: "display:flex;height:1px;margin-top:-1px"
 } ;
 
-var PortalsContainer = function PortalsContainer() {
-  return jsxRuntime.jsx("div", {
-    id: constants.PORTALS_CONTAINER_ID // The container needs a height in order to be tabbable: https://reactjs/react-modal#774
-    ,
-    css: _ref
+var PortalsContainer = /*#__PURE__*/react$1.forwardRef(function (props, ref) {
+  var _current, _current2;
+
+  var globalNotificationsElementDimensions = useObserverElementDimensions(ref === null || ref === void 0 ? void 0 : (_current = ref.current) === null || _current === void 0 ? void 0 : _current.notificationsGlobalRef);
+  var pageNotificationsElementDimensions = useObserverElementDimensions(ref === null || ref === void 0 ? void 0 : (_current2 = ref.current) === null || _current2 === void 0 ? void 0 : _current2.notificationsPageRef);
+  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 ", props.containerSelectorToPreventScrollingOnOpen, "{overflow:hidden;}.ReactModal__Body--open #", constants.PORTALS_CONTAINER_ID, "{position:fixed;height:calc(\n                100% - ", props.offsetTop, " -\n                  ", globalNotificationsElementDimensions.height, "px -\n                  ", pageNotificationsElementDimensions.height, "px\n              );width:calc(100% - ", props.offsetLeft, ");top:calc(\n                ", props.offsetTop, " +\n                  ", globalNotificationsElementDimensions.height, "px +\n                  ", pageNotificationsElementDimensions.height, "px\n              );right:0;bottom:0;z-index:", props.zIndex, ";}.ReactModal__Body--open.body__menu-open #", constants.PORTALS_CONTAINER_ID, "{width:calc(100% - ", props.offsetLeftOnExpandedMenu, ");}" + ("" ), "" )
+    }), jsxRuntime.jsx("div", {
+      id: constants.PORTALS_CONTAINER_ID // The container needs a height in order to be tabbable: https://reactjs/react-modal#774
+      ,
+      css: _ref
+    })]
   });
-};
-
+});
 PortalsContainer.displayName = 'PortalsContainer';
+PortalsContainer.defaultProps = defaultProps;
 
 var useModalState = function useModalState() {
   var isInitiallyOpen = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;

package/dist/commercetools-frontend-application-components.esm.js

@@ -13,13 +13,13 @@ import startCase from 'lodash/startCase';
 import { useIntl, defineMessages, FormattedMessage } from 'react-intl';
 import { warning } from '@commercetools-uikit/utils';
 import Text from '@commercetools-uikit/text';
-import { css, ClassNames } from '@emotion/react';
+import { css, ClassNames, Global } from '@emotion/react';
 import { customProperties } from '@commercetools-uikit/design-system';
 import { jsx, jsxs, Fragment } from '@emotion/react/jsx-runtime';
 import Spacings from '@commercetools-uikit/spacings';
 import { sharedMessages } from '@commercetools-frontend/i18n';
 import _styled from '@emotion/styled/base';
-import { isValidElement, useState, useRef, useEffect, useCallback } from 'react';
+import { isValidElement, useState, useRef, useEffect, useCallback, forwardRef } from 'react';
 import PrimaryButton from '@commercetools-uikit/primary-button';
 import SecondaryButton from '@commercetools-uikit/secondary-button';
 import IconButton from '@commercetools-uikit/icon-button';
@@ -37,9 +37,10 @@ import CommercetoolsLogoSvg from '@commercetools-frontend/assets/logos/commercet
 import Constraints from '@commercetools-uikit/constraints';
 import PageNotFoundSVG from '@commercetools-frontend/assets/images/desert-fox.svg';
 import FailedAuthorizationSVG from '@commercetools-frontend/assets/images/folder-full-locked.svg';
+import useResizeObserver from '@react-hook/resize-observer';
 
 // NOTE: This string will be replaced on build time with the package version.
-var version = "21.3.2";
+var version = "21.3.5";
 
 function _EMOTION_STRINGIFIED_CSS_ERROR__$a() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
 
@@ -136,14 +137,14 @@ TabHeader.propTypes = process.env.NODE_ENV !== "production" ? {
   exactPathMatch: _pt.bool.isRequired
 } : {};
 TabHeader.displayName = 'TabHeader';
-var defaultProps$d = {
+var defaultProps$e = {
   isDisabled: false,
   exactPathMatch: false
 };
-TabHeader.defaultProps = defaultProps$d;
+TabHeader.defaultProps = defaultProps$e;
 
 function _EMOTION_STRINGIFIED_CSS_ERROR__$9() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
-var defaultProps$c = {
+var defaultProps$d = {
   titleSize: 'small',
   truncate: false
 };
@@ -230,7 +231,7 @@ PageHeaderTitle.propTypes = process.env.NODE_ENV !== "production" ? {
   subtitle: _pt.oneOfType([_pt.string, _pt.element])
 } : {};
 PageHeaderTitle.displayName = 'PageHeaderTitle';
-PageHeaderTitle.defaultProps = defaultProps$c;
+PageHeaderTitle.defaultProps = defaultProps$d;
 
 function _EMOTION_STRINGIFIED_CSS_ERROR__$8() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
 
@@ -279,10 +280,10 @@ TabularPageContainer.propTypes = process.env.NODE_ENV !== "production" ? {
   color: _pt.oneOf(['surface', 'neutral']).isRequired
 } : {};
 TabularPageContainer.displayName = 'TabularPageContainer';
-var defaultProps$b = {
+var defaultProps$c = {
   color: 'surface'
 };
-TabularPageContainer.defaultProps = defaultProps$b;
+TabularPageContainer.defaultProps = defaultProps$c;
 
 var FormControlsContainer = _styled("div", process.env.NODE_ENV === "production" ? {
   target: "elpldre0"
@@ -410,7 +411,7 @@ FormDeleteButton.propTypes = process.env.NODE_ENV !== "production" ? {
 FormDeleteButton.displayName = 'FormDeleteButton';
 FormDeleteButton.defaultProps = deleteDefaultProps;
 
-var defaultProps$a = {
+var defaultProps$b = {
   hideControls: false
 };
 
@@ -453,7 +454,7 @@ TabularMainPage.propTypes = process.env.NODE_ENV !== "production" ? {
   hideControls: _pt.bool.isRequired
 } : {};
 TabularMainPage.displayName = 'TabularMainPage';
-TabularMainPage.defaultProps = defaultProps$a; // Static export of pre-configured form control buttons to easily re-use
+TabularMainPage.defaultProps = defaultProps$b; // Static export of pre-configured form control buttons to easily re-use
 // them in the custom controls.
 
 TabularMainPage.FormPrimaryButton = FormPrimaryButton;
@@ -476,7 +477,7 @@ var messages$2 = defineMessages({
   }
 });
 
-var defaultProps$9 = {
+var defaultProps$a = {
   color: 'surface',
   previousPathLabel: messages$2.back
 };
@@ -508,9 +509,9 @@ PageTopBar.propTypes = process.env.NODE_ENV !== "production" ? {
   onClick: _pt.func.isRequired
 } : {};
 PageTopBar.displayName = 'PageTopBar';
-PageTopBar.defaultProps = defaultProps$9;
+PageTopBar.defaultProps = defaultProps$a;
 
-var defaultProps$8 = {
+var defaultProps$9 = {
   hideControls: false
 };
 
@@ -563,7 +564,7 @@ TabularDetailPage.propTypes = process.env.NODE_ENV !== "production" ? {
   onPreviousPathClick: _pt.func.isRequired
 } : {};
 TabularDetailPage.displayName = 'TabularDetailPage';
-TabularDetailPage.defaultProps = defaultProps$8; // Static export of pre-configured form control buttons to easily re-use
+TabularDetailPage.defaultProps = defaultProps$9; // Static export of pre-configured form control buttons to easily re-use
 // them in the custom controls.
 
 TabularDetailPage.FormPrimaryButton = FormPrimaryButton;
@@ -630,7 +631,7 @@ var getDefaultParentSelector$1 = function getDefaultParentSelector() {
   return process.env.NODE_ENV === 'test' ? document.body : document.querySelector("#".concat(PORTALS_CONTAINER_ID));
 };
 
-var defaultProps$7 = {
+var defaultProps$8 = {
   size: 10,
   zIndex: 1000,
   getParentSelector: getDefaultParentSelector$1
@@ -727,7 +728,7 @@ DialogContainer.propTypes = process.env.NODE_ENV !== "production" ? {
   getParentSelector: _pt.any.isRequired
 } : {};
 DialogContainer.displayName = 'DialogContainer';
-DialogContainer.defaultProps = defaultProps$7;
+DialogContainer.defaultProps = defaultProps$8;
 
 function _EMOTION_STRINGIFIED_CSS_ERROR__$4() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
 
@@ -808,7 +809,7 @@ InfoDialog.displayName = 'InfoDialog';
 function ownKeys$3(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
 function _objectSpread$3(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys$3(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys$3(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
-var defaultProps$6 = {
+var defaultProps$7 = {
   isPrimaryButtonDisabled: false,
   dataAttributesPrimaryButton: {},
   dataAttributesSecondaryButton: {}
@@ -853,9 +854,9 @@ DialogFooter.propTypes = process.env.NODE_ENV !== "production" ? {
   dataAttributesSecondaryButton: _pt.objectOf(_pt.string).isRequired
 } : {};
 DialogFooter.displayName = 'DialogFooter';
-DialogFooter.defaultProps = defaultProps$6;
+DialogFooter.defaultProps = defaultProps$7;
 
-var defaultProps$5 = {
+var defaultProps$6 = {
   labelSecondary: sharedMessages.cancel,
   labelPrimary: sharedMessages.confirm
 };
@@ -910,12 +911,12 @@ ConfirmationDialog.propTypes = process.env.NODE_ENV !== "production" ? {
   getParentSelector: _pt.func
 } : {};
 ConfirmationDialog.displayName = 'ConfirmationDialog';
-ConfirmationDialog.defaultProps = defaultProps$5; // This is a convenience proxy export to expose pre-defined Intl messages defined in the `@commercetools-frontend/i18n` package.
+ConfirmationDialog.defaultProps = defaultProps$6; // This is a convenience proxy export to expose pre-defined Intl messages defined in the `@commercetools-frontend/i18n` package.
 // The Intl messages can be used for button labels.
 
 ConfirmationDialog.Intl = sharedMessages;
 
-var defaultProps$4 = {
+var defaultProps$5 = {
   labelSecondary: sharedMessages.cancel,
   labelPrimary: sharedMessages.save
 };
@@ -970,7 +971,7 @@ FormDialog.propTypes = process.env.NODE_ENV !== "production" ? {
   getParentSelector: _pt.func
 } : {};
 FormDialog.displayName = 'FormDialog';
-FormDialog.defaultProps = defaultProps$4; // This is a convenience proxy export to expose pre-defined Intl messages defined in the `@commercetools-frontend/i18n` package.
+FormDialog.defaultProps = defaultProps$5; // This is a convenience proxy export to expose pre-defined Intl messages defined in the `@commercetools-frontend/i18n` package.
 // The Intl messages can be used for button labels.
 
 FormDialog.Intl = sharedMessages;
@@ -1060,7 +1061,7 @@ var LargeIconWrapper = _styled("span", process.env.NODE_ENV === "production" ? {
 // does not recognize the object shape.
 
 
-var defaultProps$3 = {
+var defaultProps$4 = {
   color: 'surface',
   previousPathLabel: messages$2.back
 };
@@ -1123,7 +1124,7 @@ ModalPageTopBar.propTypes = process.env.NODE_ENV !== "production" ? {
   onClose: _pt.func.isRequired
 } : {};
 ModalPageTopBar.displayName = 'ModalPageTopBar';
-ModalPageTopBar.defaultProps = defaultProps$3;
+ModalPageTopBar.defaultProps = defaultProps$4;
 
 var getDefaultParentSelector = function getDefaultParentSelector() {
   return process.env.NODE_ENV === 'test' ? document.body : document.querySelector("#".concat(PORTALS_CONTAINER_ID));
@@ -1132,7 +1133,7 @@ var getDefaultParentSelector = function getDefaultParentSelector() {
 // does not recognize the object shape.
 
 
-var defaultProps$2 = {
+var defaultProps$3 = {
   level: 1,
   baseZIndex: 1000,
   getParentSelector: getDefaultParentSelector,
@@ -1231,7 +1232,7 @@ ModalPage.propTypes = process.env.NODE_ENV !== "production" ? {
   })])
 } : {};
 ModalPage.displayName = 'ModalPage';
-ModalPage.defaultProps = defaultProps$2;
+ModalPage.defaultProps = defaultProps$3;
 
 var PageHeader = function PageHeader(props) {
   return jsxs("div", {
@@ -1351,7 +1352,7 @@ CustomFormModalPage.FormDeleteButton = FormDeleteButton; // This is a convenienc
 
 CustomFormModalPage.Intl = sharedMessages;
 
-var defaultProps$1 = {
+var defaultProps$2 = {
   hideControls: false
 };
 
@@ -1424,12 +1425,12 @@ FormModalPage.propTypes = process.env.NODE_ENV !== "production" ? {
   hideControls: _pt.bool.isRequired
 } : {};
 FormModalPage.displayName = 'FormModalPage';
-FormModalPage.defaultProps = defaultProps$1; // This is a convenience proxy export to expose pre-defined Intl messages defined in the `@commercetools-frontend/i18n` package.
+FormModalPage.defaultProps = defaultProps$2; // This is a convenience proxy export to expose pre-defined Intl messages defined in the `@commercetools-frontend/i18n` package.
 // The Intl messages can be used for button labels.
 
 FormModalPage.Intl = sharedMessages;
 
-var defaultProps = {
+var defaultProps$1 = {
   hideControls: false
 };
 
@@ -1494,7 +1495,7 @@ TabularModalPage.propTypes = process.env.NODE_ENV !== "production" ? {
   hideControls: _pt.bool.isRequired
 } : {};
 TabularModalPage.displayName = 'TabularModalPage';
-TabularModalPage.defaultProps = defaultProps; // Static export of pre-configured form control buttons to easily re-use
+TabularModalPage.defaultProps = defaultProps$1; // Static export of pre-configured form control buttons to easily re-use
 // them in the custom controls.
 
 TabularModalPage.FormPrimaryButton = FormPrimaryButton;
@@ -1744,6 +1745,32 @@ var PageUnauthorized = function PageUnauthorized() {
 PageUnauthorized.displayName = 'PageUnauthorized';
 
 function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+var defaultProps = {
+  offsetTop: '0px',
+  offsetLeft: '0px',
+  offsetLeftOnExpandedMenu: '0px',
+  containerSelectorToPreventScrollingOnOpen: 'main',
+  zIndex: 10000
+};
+
+var useObserverElementDimensions = function useObserverElementDimensions(element) {
+  var _useState = useState({
+    height: 0,
+    width: 0
+  }),
+      _useState2 = _slicedToArray(_useState, 2),
+      dimensions = _useState2[0],
+      setDimensions = _useState2[1];
+
+  useResizeObserver(element, function (entry) {
+    setDimensions({
+      height: entry.contentRect.height,
+      width: entry.contentRect.width
+    });
+  });
+  return dimensions;
+}; // All modal components expect to be rendered inside this container.
+
 
 var _ref = process.env.NODE_ENV === "production" ? {
   name: "qk9kof",
@@ -1751,19 +1778,28 @@ var _ref = process.env.NODE_ENV === "production" ? {
 } : {
   name: "14eqpg3-PortalsContainer",
   styles: "display:flex;height:1px;margin-top:-1px;label:PortalsContainer;",
-  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInBvcnRhbHMtY29udGFpbmVyLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFRWSIsImZpbGUiOiJwb3J0YWxzLWNvbnRhaW5lci50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5pbXBvcnQgeyBQT1JUQUxTX0NPTlRBSU5FUl9JRCB9IGZyb20gJ0Bjb21tZXJjZXRvb2xzLWZyb250ZW5kL2NvbnN0YW50cyc7XG5cbi8vIEFsbCBtb2RhbCBjb21wb25lbnRzIGV4cGVjdCB0byBiZSByZW5kZXJlZCBpbnNpZGUgdGhpcyBjb250YWluZXIuXG5jb25zdCBQb3J0YWxzQ29udGFpbmVyID0gKCkgPT4gKFxuICA8ZGl2XG4gICAgaWQ9e1BPUlRBTFNfQ09OVEFJTkVSX0lEfVxuICAgIC8vIFRoZSBjb250YWluZXIgbmVlZHMgYSBoZWlnaHQgaW4gb3JkZXIgdG8gYmUgdGFiYmFibGU6IGh0dHBzOi8vcmVhY3Rqcy9yZWFjdC1tb2RhbCM3NzRcbiAgICBjc3M9e2Nzc2BcbiAgICAgIGRpc3BsYXk6IGZsZXg7XG4gICAgICBoZWlnaHQ6IDFweDtcbiAgICAgIG1hcmdpbi10b3A6IC0xcHg7XG4gICAgYH1cbiAgLz5cbik7XG5Qb3J0YWxzQ29udGFpbmVyLmRpc3BsYXlOYW1lID0gJ1BvcnRhbHNDb250YWluZXInO1xuXG5leHBvcnQgZGVmYXVsdCBQb3J0YWxzQ29udGFpbmVyO1xuIl19 */",
+  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInBvcnRhbHMtY29udGFpbmVyLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUE0SGtCIiwiZmlsZSI6InBvcnRhbHMtY29udGFpbmVyLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7XG4gIHR5cGUgTXV0YWJsZVJlZk9iamVjdCxcbiAgdHlwZSBSZWZPYmplY3QsXG4gIGZvcndhcmRSZWYsXG4gIHVzZVN0YXRlLFxufSBmcm9tICdyZWFjdCc7XG5pbXBvcnQgeyBjc3MsIEdsb2JhbCB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCB1c2VSZXNpemVPYnNlcnZlciBmcm9tICdAcmVhY3QtaG9vay9yZXNpemUtb2JzZXJ2ZXInO1xuaW1wb3J0IHsgUE9SVEFMU19DT05UQUlORVJfSUQgfSBmcm9tICdAY29tbWVyY2V0b29scy1mcm9udGVuZC9jb25zdGFudHMnO1xuXG50eXBlIFRMYXlvdXRSZWZzID0ge1xuICBub3RpZmljYXRpb25zR2xvYmFsUmVmOiBNdXRhYmxlUmVmT2JqZWN0PEhUTUxEaXZFbGVtZW50PjtcbiAgbm90aWZpY2F0aW9uc1BhZ2VSZWY6IE11dGFibGVSZWZPYmplY3Q8SFRNTERpdkVsZW1lbnQ+O1xufTtcbnR5cGUgVE9ic2VydmFibGVFbGVtZW50RGltZW5zaW9ucyA9IHtcbiAgaGVpZ2h0OiBudW1iZXI7XG4gIHdpZHRoOiBudW1iZXI7XG59O1xudHlwZSBUUG9ydGFsc0NvbnRhaW5lclByb3BzID0ge1xuICAvKipcbiAgICogVGhlIG9mZnNldCB2YWx1ZSBmb3IgcG9zaXRpb25pbmcgdGhlIGNvbnRhaW5lciBmcm9tIHRoZSB0b3AsIHdoZW4gb3BlbmVkLlxuICAgKiBVc3VhbGx5IHRoaXMgY29ycmVzcG9uZHMgdG8gdGhlIGhlaWdodCBvZiB0aGUgaGVhZGVyIHNlY3Rpb24uXG4gICAqL1xuICBvZmZzZXRUb3A6IHN0cmluZztcbiAgLyoqXG4gICAqIFRoZSBvZmZzZXQgdmFsdWUgZm9yIHBvc2l0aW9uaW5nIHRoZSBjb250YWluZXIgZnJvbSB0aGUgbGVmdCwgd2hlbiBvcGVuZWQuXG4gICAqIFVzdWFsbHkgdGhpcyBjb3JyZXNwb25kcyB0byB0aGUgbWluIHdpZHRoIG9mIHRoZSBuYXYgbWVudS5cbiAgICovXG4gIG9mZnNldExlZnQ6IHN0cmluZztcbiAgLyoqXG4gICAqIFRoZSBvZmZzZXQgdmFsdWUgZm9yIHBvc2l0aW9uaW5nIHRoZSBjb250YWluZXIgZnJvbSB0aGUgbGVmdCwgd2hlbiBvcGVuZWQuXG4gICAqIFRoZSB2YWx1ZSBpcyBvbmx5IGFwcGxpZWQgd2hlbiB0aGUgYC5ib2R5X19tZW51LW9wZW5gIGdsb2JhbCBjbGFzcyBpcyBhZGRlZCB0byB0aGUgRE9NLlxuICAgKiBVc3VhbGx5IHRoaXMgY29ycmVzcG9uZHMgdG8gdGhlIHdpZHRoIG9mIHRoZSBleHBhbmRlZCBuYXYgbWVudS5cbiAgICovXG4gIG9mZnNldExlZnRPbkV4cGFuZGVkTWVudTogc3RyaW5nO1xuICAvKipcbiAgICogVGhlIENTUyBzZWxlY3RvciB0byBhcHBseSB0aGUgYG92ZXJmbG93OiBoaWRkZW5gIHN0eWxlIHRvIChwcmV2ZW50aW5nIHNjcm9sbGluZylcbiAgICogd2hlbiBhIG1vZGFsIGNvbnRhaW5lciBpcyBvcGVuLlxuICAgKi9cbiAgY29udGFpbmVyU2VsZWN0b3JUb1ByZXZlbnRTY3JvbGxpbmdPbk9wZW46IHN0cmluZztcbiAgLyoqXG4gICAqIFRoZSBgei1pbmRleGAgdmFsdWUgdG8gYXBwbHkgdG8gdGhlIHBvcnRhbCBjb250YWluZXIuIERlZmF1bHQgdG8gYDEwMDAwYC5cbiAgICovXG4gIHpJbmRleDogbnVtYmVyO1xufTtcbmNvbnN0IGRlZmF1bHRQcm9wczogUGljazxcbiAgVFBvcnRhbHNDb250YWluZXJQcm9wcyxcbiAgfCAnb2Zmc2V0VG9wJ1xuICB8ICdvZmZzZXRMZWZ0J1xuICB8ICdvZmZzZXRMZWZ0T25FeHBhbmRlZE1lbnUnXG4gIHwgJ2NvbnRhaW5lclNlbGVjdG9yVG9QcmV2ZW50U2Nyb2xsaW5nT25PcGVuJ1xuICB8ICd6SW5kZXgnXG4+ID0ge1xuICBvZmZzZXRUb3A6ICcwcHgnLFxuICBvZmZzZXRMZWZ0OiAnMHB4JyxcbiAgb2Zmc2V0TGVmdE9uRXhwYW5kZWRNZW51OiAnMHB4JyxcbiAgY29udGFpbmVyU2VsZWN0b3JUb1ByZXZlbnRTY3JvbGxpbmdPbk9wZW46ICdtYWluJyxcbiAgekluZGV4OiAxMDAwMCxcbn07XG5cbmNvbnN0IHVzZU9ic2VydmVyRWxlbWVudERpbWVuc2lvbnMgPSAoXG4gIGVsZW1lbnQ6IFJlZk9iamVjdDxIVE1MRGl2RWxlbWVudD4gfCBudWxsXG4pOiBUT2JzZXJ2YWJsZUVsZW1lbnREaW1lbnNpb25zID0+IHtcbiAgY29uc3QgW2RpbWVuc2lvbnMsIHNldERpbWVuc2lvbnNdID0gdXNlU3RhdGU8VE9ic2VydmFibGVFbGVtZW50RGltZW5zaW9ucz4oe1xuICAgIGhlaWdodDogMCxcbiAgICB3aWR0aDogMCxcbiAgfSk7XG5cbiAgdXNlUmVzaXplT2JzZXJ2ZXI8SFRNTERpdkVsZW1lbnQ+KGVsZW1lbnQsIChlbnRyeSkgPT4ge1xuICAgIHNldERpbWVuc2lvbnMoe1xuICAgICAgaGVpZ2h0OiBlbnRyeS5jb250ZW50UmVjdC5oZWlnaHQsXG4gICAgICB3aWR0aDogZW50cnkuY29udGVudFJlY3Qud2lkdGgsXG4gICAgfSk7XG4gIH0pO1xuXG4gIHJldHVybiBkaW1lbnNpb25zO1xufTtcblxuLy8gQWxsIG1vZGFsIGNvbXBvbmVudHMgZXhwZWN0IHRvIGJlIHJlbmRlcmVkIGluc2lkZSB0aGlzIGNvbnRhaW5lci5cbmNvbnN0IFBvcnRhbHNDb250YWluZXIgPSBmb3J3YXJkUmVmPFRMYXlvdXRSZWZzLCBUUG9ydGFsc0NvbnRhaW5lclByb3BzPihcbiAgKHByb3BzLCByZWYpID0+IHtcbiAgICBjb25zdCBnbG9iYWxOb3RpZmljYXRpb25zRWxlbWVudERpbWVuc2lvbnMgPSB1c2VPYnNlcnZlckVsZW1lbnREaW1lbnNpb25zKFxuICAgICAgKHJlZiBhcyBNdXRhYmxlUmVmT2JqZWN0PFRMYXlvdXRSZWZzPik/LmN1cnJlbnQ/Lm5vdGlmaWNhdGlvbnNHbG9iYWxSZWZcbiAgICApO1xuICAgIGNvbnN0IHBhZ2VOb3RpZmljYXRpb25zRWxlbWVudERpbWVuc2lvbnMgPSB1c2VPYnNlcnZlckVsZW1lbnREaW1lbnNpb25zKFxuICAgICAgKHJlZiBhcyBNdXRhYmxlUmVmT2JqZWN0PFRMYXlvdXRSZWZzPik/LmN1cnJlbnQ/Lm5vdGlmaWNhdGlvbnNQYWdlUmVmXG4gICAgKTtcblxuICAgIHJldHVybiAoXG4gICAgICA8PlxuICAgICAgICA8R2xvYmFsXG4gICAgICAgICAgLy8gQXBwbHkgc29tZSBnbG9iYWwgc3R5bGVzLCBiYXNlZCBvbiB0aGUgYC5SZWFjdE1vZGFsX19Cb2R5LS1vcGVuYCBjbGFzcy5cbiAgICAgICAgICBzdHlsZXM9e2Nzc2BcbiAgICAgICAgICAgIC5SZWFjdE1vZGFsX19Cb2R5LS1vcGVuXG4gICAgICAgICAgICAgICR7cHJvcHMuY29udGFpbmVyU2VsZWN0b3JUb1ByZXZlbnRTY3JvbGxpbmdPbk9wZW59IHtcbiAgICAgICAgICAgICAgb3ZlcmZsb3c6IGhpZGRlbjtcbiAgICAgICAgICAgIH1cblxuICAgICAgICAgICAgLlJlYWN0TW9kYWxfX0JvZHktLW9wZW4gIyR7UE9SVEFMU19DT05UQUlORVJfSUR9IHtcbiAgICAgICAgICAgICAgcG9zaXRpb246IGZpeGVkO1xuICAgICAgICAgICAgICBoZWlnaHQ6IGNhbGMoXG4gICAgICAgICAgICAgICAgMTAwJSAtICR7cHJvcHMub2Zmc2V0VG9wfSAtXG4gICAgICAgICAgICAgICAgICAke2dsb2JhbE5vdGlmaWNhdGlvbnNFbGVtZW50RGltZW5zaW9ucy5oZWlnaHR9cHggLVxuICAgICAgICAgICAgICAgICAgJHtwYWdlTm90aWZpY2F0aW9uc0VsZW1lbnREaW1lbnNpb25zLmhlaWdodH1weFxuICAgICAgICAgICAgICApO1xuICAgICAgICAgICAgICB3aWR0aDogY2FsYygxMDAlIC0gJHtwcm9wcy5vZmZzZXRMZWZ0fSk7XG4gICAgICAgICAgICAgIHRvcDogY2FsYyhcbiAgICAgICAgICAgICAgICAke3Byb3BzLm9mZnNldFRvcH0gK1xuICAgICAgICAgICAgICAgICAgJHtnbG9iYWxOb3RpZmljYXRpb25zRWxlbWVudERpbWVuc2lvbnMuaGVpZ2h0fXB4ICtcbiAgICAgICAgICAgICAgICAgICR7cGFnZU5vdGlmaWNhdGlvbnNFbGVtZW50RGltZW5zaW9ucy5oZWlnaHR9cHhcbiAgICAgICAgICAgICAgKTtcbiAgICAgICAgICAgICAgcmlnaHQ6IDA7XG4gICAgICAgICAgICAgIGJvdHRvbTogMDtcbiAgICAgICAgICAgICAgei1pbmRleDogJHtwcm9wcy56SW5kZXh9O1xuICAgICAgICAgICAgfVxuXG4gICAgICAgICAgICAuUmVhY3RNb2RhbF9fQm9keS0tb3Blbi5ib2R5X19tZW51LW9wZW4gIyR7UE9SVEFMU19DT05UQUlORVJfSUR9IHtcbiAgICAgICAgICAgICAgd2lkdGg6IGNhbGMoMTAwJSAtICR7cHJvcHMub2Zmc2V0TGVmdE9uRXhwYW5kZWRNZW51fSk7XG4gICAgICAgICAgICB9XG4gICAgICAgICAgYH1cbiAgICAgICAgLz5cbiAgICAgICAgPGRpdlxuICAgICAgICAgIGlkPXtQT1JUQUxTX0NPTlRBSU5FUl9JRH1cbiAgICAgICAgICAvLyBUaGUgY29udGFpbmVyIG5lZWRzIGEgaGVpZ2h0IGluIG9yZGVyIHRvIGJlIHRhYmJhYmxlOiBodHRwczovL3JlYWN0anMvcmVhY3QtbW9kYWwjNzc0XG4gICAgICAgICAgY3NzPXtjc3NgXG4gICAgICAgICAgICBkaXNwbGF5OiBmbGV4O1xuICAgICAgICAgICAgaGVpZ2h0OiAxcHg7XG4gICAgICAgICAgICBtYXJnaW4tdG9wOiAtMXB4O1xuICAgICAgICAgIGB9XG4gICAgICAgIC8+XG4gICAgICA8Lz5cbiAgICApO1xuICB9XG4pO1xuUG9ydGFsc0NvbnRhaW5lci5kaXNwbGF5TmFtZSA9ICdQb3J0YWxzQ29udGFpbmVyJztcblBvcnRhbHNDb250YWluZXIuZGVmYXVsdFByb3BzID0gZGVmYXVsdFByb3BzO1xuXG5leHBvcnQgZGVmYXVsdCBQb3J0YWxzQ29udGFpbmVyO1xuIl19 */",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
 
-var PortalsContainer = function PortalsContainer() {
-  return jsx("div", {
-    id: PORTALS_CONTAINER_ID // The container needs a height in order to be tabbable: https://reactjs/react-modal#774
-    ,
-    css: _ref
-  });
-};
+var PortalsContainer = /*#__PURE__*/forwardRef(function (props, ref) {
+  var _current, _current2;
 
+  var globalNotificationsElementDimensions = useObserverElementDimensions(ref === null || ref === void 0 ? void 0 : (_current = ref.current) === null || _current === void 0 ? void 0 : _current.notificationsGlobalRef);
+  var pageNotificationsElementDimensions = useObserverElementDimensions(ref === null || ref === void 0 ? void 0 : (_current2 = ref.current) === null || _current2 === void 0 ? void 0 : _current2.notificationsPageRef);
+  return jsxs(Fragment, {
+    children: [jsx(Global // Apply some global styles, based on the `.ReactModal__Body--open` class.
+    , {
+      styles: /*#__PURE__*/css(".ReactModal__Body--open ", props.containerSelectorToPreventScrollingOnOpen, "{overflow:hidden;}.ReactModal__Body--open #", PORTALS_CONTAINER_ID, "{position:fixed;height:calc(\n                100% - ", props.offsetTop, " -\n                  ", globalNotificationsElementDimensions.height, "px -\n                  ", pageNotificationsElementDimensions.height, "px\n              );width:calc(100% - ", props.offsetLeft, ");top:calc(\n                ", props.offsetTop, " +\n                  ", globalNotificationsElementDimensions.height, "px +\n                  ", pageNotificationsElementDimensions.height, "px\n              );right:0;bottom:0;z-index:", props.zIndex, ";}.ReactModal__Body--open.body__menu-open #", PORTALS_CONTAINER_ID, "{width:calc(100% - ", props.offsetLeftOnExpandedMenu, ");}" + (process.env.NODE_ENV === "production" ? "" : ";label:PortalsContainer;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInBvcnRhbHMtY29udGFpbmVyLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUE0RnFCIiwiZmlsZSI6InBvcnRhbHMtY29udGFpbmVyLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7XG4gIHR5cGUgTXV0YWJsZVJlZk9iamVjdCxcbiAgdHlwZSBSZWZPYmplY3QsXG4gIGZvcndhcmRSZWYsXG4gIHVzZVN0YXRlLFxufSBmcm9tICdyZWFjdCc7XG5pbXBvcnQgeyBjc3MsIEdsb2JhbCB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCB1c2VSZXNpemVPYnNlcnZlciBmcm9tICdAcmVhY3QtaG9vay9yZXNpemUtb2JzZXJ2ZXInO1xuaW1wb3J0IHsgUE9SVEFMU19DT05UQUlORVJfSUQgfSBmcm9tICdAY29tbWVyY2V0b29scy1mcm9udGVuZC9jb25zdGFudHMnO1xuXG50eXBlIFRMYXlvdXRSZWZzID0ge1xuICBub3RpZmljYXRpb25zR2xvYmFsUmVmOiBNdXRhYmxlUmVmT2JqZWN0PEhUTUxEaXZFbGVtZW50PjtcbiAgbm90aWZpY2F0aW9uc1BhZ2VSZWY6IE11dGFibGVSZWZPYmplY3Q8SFRNTERpdkVsZW1lbnQ+O1xufTtcbnR5cGUgVE9ic2VydmFibGVFbGVtZW50RGltZW5zaW9ucyA9IHtcbiAgaGVpZ2h0OiBudW1iZXI7XG4gIHdpZHRoOiBudW1iZXI7XG59O1xudHlwZSBUUG9ydGFsc0NvbnRhaW5lclByb3BzID0ge1xuICAvKipcbiAgICogVGhlIG9mZnNldCB2YWx1ZSBmb3IgcG9zaXRpb25pbmcgdGhlIGNvbnRhaW5lciBmcm9tIHRoZSB0b3AsIHdoZW4gb3BlbmVkLlxuICAgKiBVc3VhbGx5IHRoaXMgY29ycmVzcG9uZHMgdG8gdGhlIGhlaWdodCBvZiB0aGUgaGVhZGVyIHNlY3Rpb24uXG4gICAqL1xuICBvZmZzZXRUb3A6IHN0cmluZztcbiAgLyoqXG4gICAqIFRoZSBvZmZzZXQgdmFsdWUgZm9yIHBvc2l0aW9uaW5nIHRoZSBjb250YWluZXIgZnJvbSB0aGUgbGVmdCwgd2hlbiBvcGVuZWQuXG4gICAqIFVzdWFsbHkgdGhpcyBjb3JyZXNwb25kcyB0byB0aGUgbWluIHdpZHRoIG9mIHRoZSBuYXYgbWVudS5cbiAgICovXG4gIG9mZnNldExlZnQ6IHN0cmluZztcbiAgLyoqXG4gICAqIFRoZSBvZmZzZXQgdmFsdWUgZm9yIHBvc2l0aW9uaW5nIHRoZSBjb250YWluZXIgZnJvbSB0aGUgbGVmdCwgd2hlbiBvcGVuZWQuXG4gICAqIFRoZSB2YWx1ZSBpcyBvbmx5IGFwcGxpZWQgd2hlbiB0aGUgYC5ib2R5X19tZW51LW9wZW5gIGdsb2JhbCBjbGFzcyBpcyBhZGRlZCB0byB0aGUgRE9NLlxuICAgKiBVc3VhbGx5IHRoaXMgY29ycmVzcG9uZHMgdG8gdGhlIHdpZHRoIG9mIHRoZSBleHBhbmRlZCBuYXYgbWVudS5cbiAgICovXG4gIG9mZnNldExlZnRPbkV4cGFuZGVkTWVudTogc3RyaW5nO1xuICAvKipcbiAgICogVGhlIENTUyBzZWxlY3RvciB0byBhcHBseSB0aGUgYG92ZXJmbG93OiBoaWRkZW5gIHN0eWxlIHRvIChwcmV2ZW50aW5nIHNjcm9sbGluZylcbiAgICogd2hlbiBhIG1vZGFsIGNvbnRhaW5lciBpcyBvcGVuLlxuICAgKi9cbiAgY29udGFpbmVyU2VsZWN0b3JUb1ByZXZlbnRTY3JvbGxpbmdPbk9wZW46IHN0cmluZztcbiAgLyoqXG4gICAqIFRoZSBgei1pbmRleGAgdmFsdWUgdG8gYXBwbHkgdG8gdGhlIHBvcnRhbCBjb250YWluZXIuIERlZmF1bHQgdG8gYDEwMDAwYC5cbiAgICovXG4gIHpJbmRleDogbnVtYmVyO1xufTtcbmNvbnN0IGRlZmF1bHRQcm9wczogUGljazxcbiAgVFBvcnRhbHNDb250YWluZXJQcm9wcyxcbiAgfCAnb2Zmc2V0VG9wJ1xuICB8ICdvZmZzZXRMZWZ0J1xuICB8ICdvZmZzZXRMZWZ0T25FeHBhbmRlZE1lbnUnXG4gIHwgJ2NvbnRhaW5lclNlbGVjdG9yVG9QcmV2ZW50U2Nyb2xsaW5nT25PcGVuJ1xuICB8ICd6SW5kZXgnXG4+ID0ge1xuICBvZmZzZXRUb3A6ICcwcHgnLFxuICBvZmZzZXRMZWZ0OiAnMHB4JyxcbiAgb2Zmc2V0TGVmdE9uRXhwYW5kZWRNZW51OiAnMHB4JyxcbiAgY29udGFpbmVyU2VsZWN0b3JUb1ByZXZlbnRTY3JvbGxpbmdPbk9wZW46ICdtYWluJyxcbiAgekluZGV4OiAxMDAwMCxcbn07XG5cbmNvbnN0IHVzZU9ic2VydmVyRWxlbWVudERpbWVuc2lvbnMgPSAoXG4gIGVsZW1lbnQ6IFJlZk9iamVjdDxIVE1MRGl2RWxlbWVudD4gfCBudWxsXG4pOiBUT2JzZXJ2YWJsZUVsZW1lbnREaW1lbnNpb25zID0+IHtcbiAgY29uc3QgW2RpbWVuc2lvbnMsIHNldERpbWVuc2lvbnNdID0gdXNlU3RhdGU8VE9ic2VydmFibGVFbGVtZW50RGltZW5zaW9ucz4oe1xuICAgIGhlaWdodDogMCxcbiAgICB3aWR0aDogMCxcbiAgfSk7XG5cbiAgdXNlUmVzaXplT2JzZXJ2ZXI8SFRNTERpdkVsZW1lbnQ+KGVsZW1lbnQsIChlbnRyeSkgPT4ge1xuICAgIHNldERpbWVuc2lvbnMoe1xuICAgICAgaGVpZ2h0OiBlbnRyeS5jb250ZW50UmVjdC5oZWlnaHQsXG4gICAgICB3aWR0aDogZW50cnkuY29udGVudFJlY3Qud2lkdGgsXG4gICAgfSk7XG4gIH0pO1xuXG4gIHJldHVybiBkaW1lbnNpb25zO1xufTtcblxuLy8gQWxsIG1vZGFsIGNvbXBvbmVudHMgZXhwZWN0IHRvIGJlIHJlbmRlcmVkIGluc2lkZSB0aGlzIGNvbnRhaW5lci5cbmNvbnN0IFBvcnRhbHNDb250YWluZXIgPSBmb3J3YXJkUmVmPFRMYXlvdXRSZWZzLCBUUG9ydGFsc0NvbnRhaW5lclByb3BzPihcbiAgKHByb3BzLCByZWYpID0+IHtcbiAgICBjb25zdCBnbG9iYWxOb3RpZmljYXRpb25zRWxlbWVudERpbWVuc2lvbnMgPSB1c2VPYnNlcnZlckVsZW1lbnREaW1lbnNpb25zKFxuICAgICAgKHJlZiBhcyBNdXRhYmxlUmVmT2JqZWN0PFRMYXlvdXRSZWZzPik/LmN1cnJlbnQ/Lm5vdGlmaWNhdGlvbnNHbG9iYWxSZWZcbiAgICApO1xuICAgIGNvbnN0IHBhZ2VOb3RpZmljYXRpb25zRWxlbWVudERpbWVuc2lvbnMgPSB1c2VPYnNlcnZlckVsZW1lbnREaW1lbnNpb25zKFxuICAgICAgKHJlZiBhcyBNdXRhYmxlUmVmT2JqZWN0PFRMYXlvdXRSZWZzPik/LmN1cnJlbnQ/Lm5vdGlmaWNhdGlvbnNQYWdlUmVmXG4gICAgKTtcblxuICAgIHJldHVybiAoXG4gICAgICA8PlxuICAgICAgICA8R2xvYmFsXG4gICAgICAgICAgLy8gQXBwbHkgc29tZSBnbG9iYWwgc3R5bGVzLCBiYXNlZCBvbiB0aGUgYC5SZWFjdE1vZGFsX19Cb2R5LS1vcGVuYCBjbGFzcy5cbiAgICAgICAgICBzdHlsZXM9e2Nzc2BcbiAgICAgICAgICAgIC5SZWFjdE1vZGFsX19Cb2R5LS1vcGVuXG4gICAgICAgICAgICAgICR7cHJvcHMuY29udGFpbmVyU2VsZWN0b3JUb1ByZXZlbnRTY3JvbGxpbmdPbk9wZW59IHtcbiAgICAgICAgICAgICAgb3ZlcmZsb3c6IGhpZGRlbjtcbiAgICAgICAgICAgIH1cblxuICAgICAgICAgICAgLlJlYWN0TW9kYWxfX0JvZHktLW9wZW4gIyR7UE9SVEFMU19DT05UQUlORVJfSUR9IHtcbiAgICAgICAgICAgICAgcG9zaXRpb246IGZpeGVkO1xuICAgICAgICAgICAgICBoZWlnaHQ6IGNhbGMoXG4gICAgICAgICAgICAgICAgMTAwJSAtICR7cHJvcHMub2Zmc2V0VG9wfSAtXG4gICAgICAgICAgICAgICAgICAke2dsb2JhbE5vdGlmaWNhdGlvbnNFbGVtZW50RGltZW5zaW9ucy5oZWlnaHR9cHggLVxuICAgICAgICAgICAgICAgICAgJHtwYWdlTm90aWZpY2F0aW9uc0VsZW1lbnREaW1lbnNpb25zLmhlaWdodH1weFxuICAgICAgICAgICAgICApO1xuICAgICAgICAgICAgICB3aWR0aDogY2FsYygxMDAlIC0gJHtwcm9wcy5vZmZzZXRMZWZ0fSk7XG4gICAgICAgICAgICAgIHRvcDogY2FsYyhcbiAgICAgICAgICAgICAgICAke3Byb3BzLm9mZnNldFRvcH0gK1xuICAgICAgICAgICAgICAgICAgJHtnbG9iYWxOb3RpZmljYXRpb25zRWxlbWVudERpbWVuc2lvbnMuaGVpZ2h0fXB4ICtcbiAgICAgICAgICAgICAgICAgICR7cGFnZU5vdGlmaWNhdGlvbnNFbGVtZW50RGltZW5zaW9ucy5oZWlnaHR9cHhcbiAgICAgICAgICAgICAgKTtcbiAgICAgICAgICAgICAgcmlnaHQ6IDA7XG4gICAgICAgICAgICAgIGJvdHRvbTogMDtcbiAgICAgICAgICAgICAgei1pbmRleDogJHtwcm9wcy56SW5kZXh9O1xuICAgICAgICAgICAgfVxuXG4gICAgICAgICAgICAuUmVhY3RNb2RhbF9fQm9keS0tb3Blbi5ib2R5X19tZW51LW9wZW4gIyR7UE9SVEFMU19DT05UQUlORVJfSUR9IHtcbiAgICAgICAgICAgICAgd2lkdGg6IGNhbGMoMTAwJSAtICR7cHJvcHMub2Zmc2V0TGVmdE9uRXhwYW5kZWRNZW51fSk7XG4gICAgICAgICAgICB9XG4gICAgICAgICAgYH1cbiAgICAgICAgLz5cbiAgICAgICAgPGRpdlxuICAgICAgICAgIGlkPXtQT1JUQUxTX0NPTlRBSU5FUl9JRH1cbiAgICAgICAgICAvLyBUaGUgY29udGFpbmVyIG5lZWRzIGEgaGVpZ2h0IGluIG9yZGVyIHRvIGJlIHRhYmJhYmxlOiBodHRwczovL3JlYWN0anMvcmVhY3QtbW9kYWwjNzc0XG4gICAgICAgICAgY3NzPXtjc3NgXG4gICAgICAgICAgICBkaXNwbGF5OiBmbGV4O1xuICAgICAgICAgICAgaGVpZ2h0OiAxcHg7XG4gICAgICAgICAgICBtYXJnaW4tdG9wOiAtMXB4O1xuICAgICAgICAgIGB9XG4gICAgICAgIC8+XG4gICAgICA8Lz5cbiAgICApO1xuICB9XG4pO1xuUG9ydGFsc0NvbnRhaW5lci5kaXNwbGF5TmFtZSA9ICdQb3J0YWxzQ29udGFpbmVyJztcblBvcnRhbHNDb250YWluZXIuZGVmYXVsdFByb3BzID0gZGVmYXVsdFByb3BzO1xuXG5leHBvcnQgZGVmYXVsdCBQb3J0YWxzQ29udGFpbmVyO1xuIl19 */")
+    }), jsx("div", {
+      id: PORTALS_CONTAINER_ID // The container needs a height in order to be tabbable: https://reactjs/react-modal#774
+      ,
+      css: _ref
+    })]
+  });
+});
 PortalsContainer.displayName = 'PortalsContainer';
+PortalsContainer.defaultProps = defaultProps;
 
 var useModalState = function useModalState() {
   var isInitiallyOpen = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;

package/dist/declarations/src/components/portals-container/portals-container.d.ts

@@ -1,5 +1,14 @@
-declare const PortalsContainer: {
-    (): import("@emotion/react/jsx-runtime").JSX.Element;
-    displayName: string;
+import { type MutableRefObject } from 'react';
+declare type TLayoutRefs = {
+    notificationsGlobalRef: MutableRefObject<HTMLDivElement>;
+    notificationsPageRef: MutableRefObject<HTMLDivElement>;
 };
+declare type TPortalsContainerProps = {
+    offsetTop: string;
+    offsetLeft: string;
+    offsetLeftOnExpandedMenu: string;
+    containerSelectorToPreventScrollingOnOpen: string;
+    zIndex: number;
+};
+declare const PortalsContainer: import("react").ForwardRefExoticComponent<TPortalsContainerProps & import("react").RefAttributes<TLayoutRefs>>;
 export default PortalsContainer;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@commercetools-frontend/application-components",
-  "version": "21.3.2",
+  "version": "21.3.5",
   "description": "Generic components for building Merchant Center applications",
   "bugs": "https://github.com/commercetools/merchant-center-application-kit/issues",
   "repository": {
@@ -27,33 +27,34 @@
     "README.md"
   ],
   "dependencies": {
-    "@babel/runtime": "^7.17.8",
-    "@babel/runtime-corejs3": "^7.17.8",
-    "@commercetools-frontend/application-shell-connectors": "21.3.0",
+    "@babel/runtime": "^7.17.9",
+    "@babel/runtime-corejs3": "^7.17.9",
+    "@commercetools-frontend/application-shell-connectors": "21.3.4",
     "@commercetools-frontend/assets": "21.0.0",
-    "@commercetools-frontend/constants": "21.3.0",
-    "@commercetools-frontend/i18n": "21.3.0",
-    "@commercetools-frontend/l10n": "21.3.0",
+    "@commercetools-frontend/constants": "21.3.4",
+    "@commercetools-frontend/i18n": "21.3.4",
+    "@commercetools-frontend/l10n": "21.3.4",
     "@commercetools-uikit/card": "^14.0.1",
     "@commercetools-uikit/constraints": "^14.0.1",
     "@commercetools-uikit/design-system": "^14.0.0",
-    "@commercetools-uikit/flat-button": "^14.0.2",
-    "@commercetools-uikit/icon-button": "^14.0.2",
+    "@commercetools-uikit/flat-button": "^14.0.6",
+    "@commercetools-uikit/icon-button": "^14.0.6",
     "@commercetools-uikit/icons": "^14.0.1",
     "@commercetools-uikit/messages": "^14.0.1",
-    "@commercetools-uikit/primary-button": "^14.0.1",
-    "@commercetools-uikit/secondary-button": "^14.0.2",
-    "@commercetools-uikit/secondary-icon-button": "^14.0.2",
-    "@commercetools-uikit/spacings": "^14.0.1",
+    "@commercetools-uikit/primary-button": "^14.0.6",
+    "@commercetools-uikit/secondary-button": "^14.0.6",
+    "@commercetools-uikit/secondary-icon-button": "^14.0.6",
+    "@commercetools-uikit/spacings": "^14.0.6",
     "@commercetools-uikit/text": "^14.0.1",
     "@commercetools-uikit/utils": "^14.0.1",
-    "@emotion/react": "11.8.2",
+    "@emotion/react": "11.9.0",
     "@emotion/styled": "11.8.1",
+    "@react-hook/resize-observer": "1.2.5",
     "@types/history": "4.7.11",
     "@types/lodash": "^4.14.181",
-    "@types/prop-types": "^15.7.4",
-    "@types/react": "^17.0.43",
-    "@types/react-dom": "^17.0.14",
+    "@types/prop-types": "^15.7.5",
+    "@types/react": "^17.0.44",
+    "@types/react-dom": "^17.0.15",
     "@types/react-modal": "^3.13.1",
     "history": "4.10.1",
     "lodash": "4.17.21",