npm - @commercetools-uikit/dropdown-menu - Versions diffs - 19.2.0 → 19.3.1 - Mend

@commercetools-uikit/dropdown-menu 19.2.0 → 19.3.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (7) hide show

package/README.md +1 -0
package/dist/commercetools-uikit-dropdown-menu.cjs.dev.js +74 -30
package/dist/commercetools-uikit-dropdown-menu.cjs.prod.js +69 -29
package/dist/commercetools-uikit-dropdown-menu.esm.js +63 -19
package/dist/declarations/src/dropdown-menu.d.ts +1 -0
package/dist/declarations/src/menu/dropdown-menu-menu.d.ts +2 -0
package/package.json +9 -9

package/README.md CHANGED Viewed

@@ -90,6 +90,7 @@ export const CustomDropdownExample = () => {
 | Props                      | Type                                                  | Required | Default     | Description                                                                                                                                                             |
 | -------------------------- | ----------------------------------------------------- | :------: | ----------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | `menuPosition`             | `union`<br/>Possible values:<br/>`'left' , 'right'`   |          | `'left'`    | The position of the menu relative to the trigger element.                                                                                                               |
+| `menuMaxHeight`            | `number`                                              |          |             | The maximum height for the menu in pixels.&#xA;By default, the max height will be the available space between the trigger element and the bottom of the viewport.       |
 | `triggerElement`           | `ReactElement`                                        |    ✅    |             | The element that triggers the dropdown.                                                                                                                                 |
 | `menuType`                 | `union`<br/>Possible values:<br/>`'default' , 'list'` |          | `'default'` | The type of the menu.&#xA;The 'default' type just renders a dropdown container but the 'list' type is intended to be used with the DropdownMenu.ListMenuItem component. |
 | `menuHorizontalConstraint` | `TMaxProp`                                            |          | `'auto'`    | The horizontal constraint of the menu.                                                                                                                                  |

package/dist/commercetools-uikit-dropdown-menu.cjs.dev.js CHANGED Viewed

@@ -5,10 +5,11 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var _slicedToArray = require('@babel/runtime-corejs3/helpers/slicedToArray');
 var _styled = require('@emotion/styled/base');
 var _pt = require('prop-types');
-var React = require('react');
+var react = require('react');
 var hooks = require('@commercetools-uikit/hooks');
 var jsxRuntime = require('@emotion/react/jsx-runtime');
-var react = require('@emotion/react');
+var _concatInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/concat');
+var react$1 = require('@emotion/react');
 var designSystem = require('@commercetools-uikit/design-system');
 var Constraints = require('@commercetools-uikit/constraints');
 var SpacingsStack = require('@commercetools-uikit/spacings-stack');
@@ -18,17 +19,17 @@ function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e };
 var _styled__default = /*#__PURE__*/_interopDefault(_styled);
 var _pt__default = /*#__PURE__*/_interopDefault(_pt);
-var React__default = /*#__PURE__*/_interopDefault(React);
+var _concatInstanceProperty__default = /*#__PURE__*/_interopDefault(_concatInstanceProperty);
 var Constraints__default = /*#__PURE__*/_interopDefault(Constraints);
 var SpacingsStack__default = /*#__PURE__*/_interopDefault(SpacingsStack);
 var AccessibleButton__default = /*#__PURE__*/_interopDefault(AccessibleButton);
-const DropdownMenuContext = /*#__PURE__*/React.createContext({
+const DropdownMenuContext = /*#__PURE__*/react.createContext({
   isOpen: false,
   toggle: () => {}
 });
 function useDropdownMenuContext() {
-  const context = React.useContext(DropdownMenuContext);
+  const context = react.useContext(DropdownMenuContext);
   if (!context) {
     throw new Error('[ui-kit] DropdownMenu context can only be used in DropdownMenu children components.');
   }
@@ -38,7 +39,7 @@ function useDropdownMenuContext() {
   };
 }
-const DropDownTrigger = /*#__PURE__*/React.forwardRef((props, ref) => {
+const DropDownTrigger = /*#__PURE__*/react.forwardRef((props, ref) => {
   return jsxRuntime.jsx("div", {
     onClick: props.onClick,
     ref: ref,
@@ -48,20 +49,29 @@ const DropDownTrigger = /*#__PURE__*/React.forwardRef((props, ref) => {
 DropDownTrigger.displayName = 'DropDownTrigger';
 var DropdownTrigger = DropDownTrigger;
+const boxShadowBottomSize = '5px';
+const marginTop = designSystem.designTokens.spacing20;
 function getDropdownMenuBaseStyles(params) {
-  return /*#__PURE__*/react.css("background-color:", designSystem.designTokens.colorSurface, ";border:1px solid ", designSystem.designTokens.colorSurface, ";border-radius:", designSystem.designTokens.borderRadius4, ";box-shadow:0 2px 5px 0px rgba(0, 0, 0, 0.15);display:", params.isOpen ? 'block' : 'none', ";margin-top:", designSystem.designTokens.spacing20, ";max-width:", Constraints__default["default"].getMaxPropTokenValue(params.horizontalConstraint), ";position:fixed;width:", params.horizontalConstraint === 'auto' ? 'auto' : '100%', ";z-index:5;" + (process.env.NODE_ENV === "production" ? "" : ";label:getDropdownMenuBaseStyles;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImRyb3Bkb3duLW1lbnUtbWVudS50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBZ0JZIiwiZmlsZSI6ImRyb3Bkb3duLW1lbnUtbWVudS50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1xuICBDU1NQcm9wZXJ0aWVzLFxuICBSZWFjdE5vZGUsXG4gIFJlZk9iamVjdCxcbiAgdXNlTGF5b3V0RWZmZWN0LFxuICB1c2VSZWYsXG59IGZyb20gJ3JlYWN0JztcbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCB7IGRlc2lnblRva2VucyB9IGZyb20gJ0Bjb21tZXJjZXRvb2xzLXVpa2l0L2Rlc2lnbi1zeXN0ZW0nO1xuaW1wb3J0IENvbnN0cmFpbnRzLCB7IHR5cGUgVE1heFByb3AgfSBmcm9tICdAY29tbWVyY2V0b29scy11aWtpdC9jb25zdHJhaW50cyc7XG5pbXBvcnQgU3BhY2luZ3NTdGFjayBmcm9tICdAY29tbWVyY2V0b29scy11aWtpdC9zcGFjaW5ncy1zdGFjayc7XG5cbmV4cG9ydCBmdW5jdGlvbiBnZXREcm9wZG93bk1lbnVCYXNlU3R5bGVzKHBhcmFtczoge1xuICBpc09wZW46IGJvb2xlYW47XG4gIGhvcml6b250YWxDb25zdHJhaW50OiBUTWF4UHJvcDtcbn0pIHtcbiAgcmV0dXJuIGNzc2BcbiAgICBiYWNrZ3JvdW5kLWNvbG9yOiAke2Rlc2lnblRva2Vucy5jb2xvclN1cmZhY2V9O1xuICAgIGJvcmRlcjogMXB4IHNvbGlkICR7ZGVzaWduVG9rZW5zLmNvbG9yU3VyZmFjZX07XG4gICAgYm9yZGVyLXJhZGl1czogJHtkZXNpZ25Ub2tlbnMuYm9yZGVyUmFkaXVzNH07XG4gICAgYm94LXNoYWRvdzogMCAycHggNXB4IDBweCByZ2JhKDAsIDAsIDAsIDAuMTUpO1xuICAgIGRpc3BsYXk6ICR7cGFyYW1zLmlzT3BlbiA/ICdibG9jaycgOiAnbm9uZSd9O1xuICAgIG1hcmdpbi10b3A6ICR7ZGVzaWduVG9rZW5zLnNwYWNpbmcyMH07XG4gICAgbWF4LXdpZHRoOiAke0NvbnN0cmFpbnRzLmdldE1heFByb3BUb2tlblZhbHVlKHBhcmFtcy5ob3Jpem9udGFsQ29uc3RyYWludCl9O1xuICAgIHBvc2l0aW9uOiBmaXhlZDtcbiAgICB3aWR0aDogJHtwYXJhbXMuaG9yaXpvbnRhbENvbnN0cmFpbnQgPT09ICdhdXRvJyA/ICdhdXRvJyA6ICcxMDAlJ307XG4gICAgei1pbmRleDogNTtcbiAgYDtcbn1cblxudHlwZSBURHJvcGRvd25CYXNlTWVudVByb3BzID0ge1xuICBjaGlsZHJlbjogUmVhY3ROb2RlO1xuICBjdXN0b21TdHlsZXM/OiBDU1NQcm9wZXJ0aWVzO1xuICBob3Jpem9udGFsQ29uc3RyYWludDogVE1heFByb3A7XG4gIGlzT3BlbjogYm9vbGVhbjtcbiAgbWVudVBvc2l0aW9uOiAnbGVmdCcgfCAncmlnaHQnO1xuICB0cmlnZ2VyRWxlbWVudFJlZjogUmVmT2JqZWN0PEhUTUxFbGVtZW50Pjtcbn07XG5mdW5jdGlvbiBEcm9wZG93bkJhc2VNZW51KHByb3BzOiBURHJvcGRvd25CYXNlTWVudVByb3BzKSB7XG4gIGNvbnN0IG1lbnVSZWYgPSB1c2VSZWY8SFRNTERpdkVsZW1lbnQ+KG51bGwpO1xuXG4gIHVzZUxheW91dEVmZmVjdCgoKSA9PiB7XG4gICAgLy8gVXBkYXRlIHRoZSBwb3NpdGlvbiBvZiB0aGUgbWVudSB3aGVuIGl0IGlzIG9wZW5cbiAgICBpZiAocHJvcHMuaXNPcGVuICYmIHByb3BzLnRyaWdnZXJFbGVtZW50UmVmLmN1cnJlbnQgJiYgbWVudVJlZi5jdXJyZW50KSB7XG4gICAgICBjb25zdCB0cmlnZ2VyRWxlbWVudENvb3JkaW5hdGVzID1cbiAgICAgICAgcHJvcHMudHJpZ2dlckVsZW1lbnRSZWYuY3VycmVudC5nZXRCb3VuZGluZ0NsaWVudFJlY3QoKTtcbiAgICAgIGNvbnN0IG1lbnVFbGVtZW50Q29vcmRpbmF0ZXMgPSBtZW51UmVmLmN1cnJlbnQuZ2V0Qm91bmRpbmdDbGllbnRSZWN0KCk7XG5cbiAgICAgIG1lbnVSZWYuY3VycmVudC5zdHlsZS50b3AgPSBgJHtcbiAgICAgICAgdHJpZ2dlckVsZW1lbnRDb29yZGluYXRlcy50b3AgKyB0cmlnZ2VyRWxlbWVudENvb3JkaW5hdGVzLmhlaWdodFxuICAgICAgfXB4YDtcbiAgICAgIG1lbnVSZWYuY3VycmVudC5zdHlsZS5sZWZ0ID1cbiAgICAgICAgcHJvcHMubWVudVBvc2l0aW9uID09PSAnbGVmdCdcbiAgICAgICAgICA/IGAke3RyaWdnZXJFbGVtZW50Q29vcmRpbmF0ZXMubGVmdH1weGBcbiAgICAgICAgICA6IGAke1xuICAgICAgICAgICAgICB0cmlnZ2VyRWxlbWVudENvb3JkaW5hdGVzLmxlZnQgK1xuICAgICAgICAgICAgICB0cmlnZ2VyRWxlbWVudENvb3JkaW5hdGVzLndpZHRoIC1cbiAgICAgICAgICAgICAgbWVudUVsZW1lbnRDb29yZGluYXRlcy53aWR0aFxuICAgICAgICAgICAgfXB4YDtcbiAgICB9XG4gIH0sIFtwcm9wcy5pc09wZW4sIHByb3BzLm1lbnVQb3NpdGlvbiwgcHJvcHMudHJpZ2dlckVsZW1lbnRSZWZdKTtcblxuICByZXR1cm4gKFxuICAgIDxkaXZcbiAgICAgIGNzcz17Z2V0RHJvcGRvd25NZW51QmFzZVN0eWxlcyhwcm9wcyl9XG4gICAgICBzdHlsZT17cHJvcHMuY3VzdG9tU3R5bGVzfVxuICAgICAgcmVmPXttZW51UmVmfVxuICAgID5cbiAgICAgIHtwcm9wcy5jaGlsZHJlbn1cbiAgICA8L2Rpdj5cbiAgKTtcbn1cblxuZXhwb3J0IHR5cGUgVERyb3Bkb3duQ29udGVudE1lbnVQcm9wcyA9IHtcbiAgY2hpbGRyZW46IFJlYWN0Tm9kZTtcbiAgaG9yaXpvbnRhbENvbnN0cmFpbnQ6IFRNYXhQcm9wO1xuICBtZW51UG9zaXRpb246ICdsZWZ0JyB8ICdyaWdodCc7XG4gIGlzT3BlbjogYm9vbGVhbjtcbiAgdHJpZ2dlckVsZW1lbnRSZWY6IFJlZk9iamVjdDxIVE1MRWxlbWVudD47XG59O1xuZXhwb3J0IGNvbnN0IERyb3Bkb3duQ29udGVudE1lbnUgPSAocHJvcHM6IFREcm9wZG93bkNvbnRlbnRNZW51UHJvcHMpID0+IHtcbiAgcmV0dXJuIChcbiAgICA8RHJvcGRvd25CYXNlTWVudVxuICAgICAgY3VzdG9tU3R5bGVzPXt7XG4gICAgICAgIHBhZGRpbmc6IGRlc2lnblRva2Vucy5zcGFjaW5nMzAsXG4gICAgICB9fVxuICAgICAgaG9yaXpvbnRhbENvbnN0cmFpbnQ9e3Byb3BzLmhvcml6b250YWxDb25zdHJhaW50fVxuICAgICAgaXNPcGVuPXtwcm9wcy5pc09wZW59XG4gICAgICBtZW51UG9zaXRpb249e3Byb3BzLm1lbnVQb3NpdGlvbn1cbiAgICAgIHRyaWdnZXJFbGVtZW50UmVmPXtwcm9wcy50cmlnZ2VyRWxlbWVudFJlZn1cbiAgICA+XG4gICAgICB7cHJvcHMuY2hpbGRyZW59XG4gICAgPC9Ecm9wZG93bkJhc2VNZW51PlxuICApO1xufTtcblxuZXhwb3J0IHR5cGUgVERyb3Bkb3duTGlzdE1lbnVQcm9wcyA9IHtcbiAgY2hpbGRyZW46IFJlYWN0Tm9kZTtcbiAgaG9yaXpvbnRhbENvbnN0cmFpbnQ6IFRNYXhQcm9wO1xuICBtZW51UG9zaXRpb246ICdsZWZ0JyB8ICdyaWdodCc7XG4gIGlzT3BlbjogYm9vbGVhbjtcbiAgdHJpZ2dlckVsZW1lbnRSZWY6IFJlZk9iamVjdDxIVE1MRWxlbWVudD47XG59O1xuZXhwb3J0IGNvbnN0IERyb3Bkb3duTGlzdE1lbnUgPSAocHJvcHM6IFREcm9wZG93bkxpc3RNZW51UHJvcHMpID0+IHtcbiAgcmV0dXJuIChcbiAgICA8RHJvcGRvd25CYXNlTWVudVxuICAgICAgaG9yaXpvbnRhbENvbnN0cmFpbnQ9e3Byb3BzLmhvcml6b250YWxDb25zdHJhaW50fVxuICAgICAgaXNPcGVuPXtwcm9wcy5pc09wZW59XG4gICAgICBtZW51UG9zaXRpb249e3Byb3BzLm1lbnVQb3NpdGlvbn1cbiAgICAgIHRyaWdnZXJFbGVtZW50UmVmPXtwcm9wcy50cmlnZ2VyRWxlbWVudFJlZn1cbiAgICA+XG4gICAgICA8U3BhY2luZ3NTdGFjayBzY2FsZT1cInhzXCI+e3Byb3BzLmNoaWxkcmVufTwvU3BhY2luZ3NTdGFjaz5cbiAgICA8L0Ryb3Bkb3duQmFzZU1lbnU+XG4gICk7XG59O1xuIl19 */");
+  return /*#__PURE__*/react$1.css("background-color:", designSystem.designTokens.colorSurface, ";border:1px solid ", designSystem.designTokens.colorSurface, ";border-radius:", designSystem.designTokens.borderRadius4, ";box-shadow:0 2px ", boxShadowBottomSize, " 0px rgba(0, 0, 0, 0.15);display:", params.isOpen ? 'block' : 'none', ";margin-top:", marginTop, ";max-width:", Constraints__default["default"].getMaxPropTokenValue(params.horizontalConstraint), ";overflow-y:auto;position:fixed;width:", params.horizontalConstraint === 'auto' ? 'auto' : '100%', ";z-index:5;" + (process.env.NODE_ENV === "production" ? "" : ";label:getDropdownMenuBaseStyles;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImRyb3Bkb3duLW1lbnUtbWVudS50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBc0JZIiwiZmlsZSI6ImRyb3Bkb3duLW1lbnUtbWVudS50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1xuICBDU1NQcm9wZXJ0aWVzLFxuICBSZWFjdE5vZGUsXG4gIFJlZk9iamVjdCxcbiAgdXNlTGF5b3V0RWZmZWN0LFxuICB1c2VSZWYsXG59IGZyb20gJ3JlYWN0JztcbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCB7IGRlc2lnblRva2VucyB9IGZyb20gJ0Bjb21tZXJjZXRvb2xzLXVpa2l0L2Rlc2lnbi1zeXN0ZW0nO1xuaW1wb3J0IENvbnN0cmFpbnRzLCB7IHR5cGUgVE1heFByb3AgfSBmcm9tICdAY29tbWVyY2V0b29scy11aWtpdC9jb25zdHJhaW50cyc7XG5pbXBvcnQgU3BhY2luZ3NTdGFjayBmcm9tICdAY29tbWVyY2V0b29scy11aWtpdC9zcGFjaW5ncy1zdGFjayc7XG5cbi8vIFdlIGRlY2xhcmUgdGhpcyBzdHlsZSBwcm9wZXJ0aWVzIGhlcmUgYmVjYXVzZSB3ZSBuZWVkIHRoZW0gYm90aCBmb3IgaW5pdGlhbCBjb21wb25lbnQgc3R5bGluZ1xuLy8gYnV0IGFsc28gZm9yIGNhbGN1bGF0aW5nIHRoZSBkZWZhdWx0IG1heCBoZWlnaHQgb2YgdGhlIGRyb3Bkb3duIG1lbnUgc28gd2UgbWFrZSBzdXJlIGl0IGZpdHNcbi8vIHdpdGhpbiB0aGUgdmlld3BvcnQuXG5jb25zdCBib3hTaGFkb3dCb3R0b21TaXplID0gJzVweCc7XG5jb25zdCBtYXJnaW5Ub3AgPSBkZXNpZ25Ub2tlbnMuc3BhY2luZzIwO1xuXG5leHBvcnQgZnVuY3Rpb24gZ2V0RHJvcGRvd25NZW51QmFzZVN0eWxlcyhwYXJhbXM6IHtcbiAgaXNPcGVuOiBib29sZWFuO1xuICBob3Jpem9udGFsQ29uc3RyYWludDogVE1heFByb3A7XG59KSB7XG4gIHJldHVybiBjc3NgXG4gICAgYmFja2dyb3VuZC1jb2xvcjogJHtkZXNpZ25Ub2tlbnMuY29sb3JTdXJmYWNlfTtcbiAgICBib3JkZXI6IDFweCBzb2xpZCAke2Rlc2lnblRva2Vucy5jb2xvclN1cmZhY2V9O1xuICAgIGJvcmRlci1yYWRpdXM6ICR7ZGVzaWduVG9rZW5zLmJvcmRlclJhZGl1czR9O1xuICAgIGJveC1zaGFkb3c6IDAgMnB4ICR7Ym94U2hhZG93Qm90dG9tU2l6ZX0gMHB4IHJnYmEoMCwgMCwgMCwgMC4xNSk7XG4gICAgZGlzcGxheTogJHtwYXJhbXMuaXNPcGVuID8gJ2Jsb2NrJyA6ICdub25lJ307XG4gICAgbWFyZ2luLXRvcDogJHttYXJnaW5Ub3B9O1xuICAgIG1heC13aWR0aDogJHtDb25zdHJhaW50cy5nZXRNYXhQcm9wVG9rZW5WYWx1ZShwYXJhbXMuaG9yaXpvbnRhbENvbnN0cmFpbnQpfTtcbiAgICBvdmVyZmxvdy15OiBhdXRvO1xuICAgIHBvc2l0aW9uOiBmaXhlZDtcbiAgICB3aWR0aDogJHtwYXJhbXMuaG9yaXpvbnRhbENvbnN0cmFpbnQgPT09ICdhdXRvJyA/ICdhdXRvJyA6ICcxMDAlJ307XG4gICAgei1pbmRleDogNTtcbiAgYDtcbn1cblxudHlwZSBURHJvcGRvd25CYXNlTWVudVByb3BzID0ge1xuICBjaGlsZHJlbjogUmVhY3ROb2RlO1xuICBjdXN0b21TdHlsZXM/OiBDU1NQcm9wZXJ0aWVzO1xuICBob3Jpem9udGFsQ29uc3RyYWludDogVE1heFByb3A7XG4gIGlzT3BlbjogYm9vbGVhbjtcbiAgbWVudVBvc2l0aW9uOiAnbGVmdCcgfCAncmlnaHQnO1xuICBtZW51TWF4SGVpZ2h0PzogbnVtYmVyO1xuICB0cmlnZ2VyRWxlbWVudFJlZjogUmVmT2JqZWN0PEhUTUxFbGVtZW50Pjtcbn07XG5mdW5jdGlvbiBEcm9wZG93bkJhc2VNZW51KHByb3BzOiBURHJvcGRvd25CYXNlTWVudVByb3BzKSB7XG4gIGNvbnN0IG1lbnVSZWYgPSB1c2VSZWY8SFRNTERpdkVsZW1lbnQ+KG51bGwpO1xuXG4gIHVzZUxheW91dEVmZmVjdCgoKSA9PiB7XG4gICAgLy8gVXBkYXRlIHRoZSBwb3NpdGlvbiBvZiB0aGUgbWVudSB3aGVuIGl0IGlzIG9wZW5cbiAgICBpZiAocHJvcHMuaXNPcGVuICYmIHByb3BzLnRyaWdnZXJFbGVtZW50UmVmLmN1cnJlbnQgJiYgbWVudVJlZi5jdXJyZW50KSB7XG4gICAgICBjb25zdCB0cmlnZ2VyRWxlbWVudENvb3JkaW5hdGVzID1cbiAgICAgICAgcHJvcHMudHJpZ2dlckVsZW1lbnRSZWYuY3VycmVudC5nZXRCb3VuZGluZ0NsaWVudFJlY3QoKTtcblxuICAgICAgbWVudVJlZi5jdXJyZW50LnN0eWxlLnRvcCA9IGAke1xuICAgICAgICB0cmlnZ2VyRWxlbWVudENvb3JkaW5hdGVzLnRvcCArIHRyaWdnZXJFbGVtZW50Q29vcmRpbmF0ZXMuaGVpZ2h0XG4gICAgICB9cHhgO1xuICAgICAgaWYgKHByb3BzLm1lbnVQb3NpdGlvbiA9PT0gJ2xlZnQnKSB7XG4gICAgICAgIG1lbnVSZWYuY3VycmVudC5zdHlsZS5sZWZ0ID0gYCR7dHJpZ2dlckVsZW1lbnRDb29yZGluYXRlcy5sZWZ0fXB4YDtcbiAgICAgICAgbWVudVJlZi5jdXJyZW50LnN0eWxlLnJlbW92ZVByb3BlcnR5KCdyaWdodCcpO1xuICAgICAgfSBlbHNlIHtcbiAgICAgICAgbWVudVJlZi5jdXJyZW50LnN0eWxlLnJpZ2h0ID0gYCR7XG4gICAgICAgICAgd2luZG93LmlubmVyV2lkdGggLSB0cmlnZ2VyRWxlbWVudENvb3JkaW5hdGVzLnJpZ2h0XG4gICAgICAgIH1weGA7XG4gICAgICAgIG1lbnVSZWYuY3VycmVudC5zdHlsZS5yZW1vdmVQcm9wZXJ0eSgnbGVmdCcpO1xuICAgICAgfVxuICAgICAgbWVudVJlZi5jdXJyZW50LnN0eWxlLm1heEhlaWdodCA9IHByb3BzLm1lbnVNYXhIZWlnaHRcbiAgICAgICAgPyBgJHtwcm9wcy5tZW51TWF4SGVpZ2h0fXB4YFxuICAgICAgICA6IGBjYWxjKCR7XG4gICAgICAgICAgICB3aW5kb3cuaW5uZXJIZWlnaHQgLVxuICAgICAgICAgICAgKHRyaWdnZXJFbGVtZW50Q29vcmRpbmF0ZXMudG9wICsgdHJpZ2dlckVsZW1lbnRDb29yZGluYXRlcy5oZWlnaHQpXG4gICAgICAgICAgfXB4IC0gJHttYXJnaW5Ub3B9IC0gJHtib3hTaGFkb3dCb3R0b21TaXplfSlgO1xuICAgIH1cbiAgfSwgW1xuICAgIHByb3BzLmlzT3BlbixcbiAgICBwcm9wcy5tZW51UG9zaXRpb24sXG4gICAgcHJvcHMudHJpZ2dlckVsZW1lbnRSZWYsXG4gICAgcHJvcHMubWVudU1heEhlaWdodCxcbiAgXSk7XG5cbiAgcmV0dXJuIChcbiAgICA8ZGl2XG4gICAgICBjc3M9e2dldERyb3Bkb3duTWVudUJhc2VTdHlsZXMocHJvcHMpfVxuICAgICAgc3R5bGU9e3Byb3BzLmN1c3RvbVN0eWxlc31cbiAgICAgIHJlZj17bWVudVJlZn1cbiAgICA+XG4gICAgICB7cHJvcHMuY2hpbGRyZW59XG4gICAgPC9kaXY+XG4gICk7XG59XG5cbmV4cG9ydCB0eXBlIFREcm9wZG93bkNvbnRlbnRNZW51UHJvcHMgPSB7XG4gIGNoaWxkcmVuOiBSZWFjdE5vZGU7XG4gIGhvcml6b250YWxDb25zdHJhaW50OiBUTWF4UHJvcDtcbiAgbWVudVBvc2l0aW9uOiAnbGVmdCcgfCAncmlnaHQnO1xuICBtZW51TWF4SGVpZ2h0PzogbnVtYmVyO1xuICBpc09wZW46IGJvb2xlYW47XG4gIHRyaWdnZXJFbGVtZW50UmVmOiBSZWZPYmplY3Q8SFRNTEVsZW1lbnQ+O1xufTtcbmV4cG9ydCBjb25zdCBEcm9wZG93bkNvbnRlbnRNZW51ID0gKHByb3BzOiBURHJvcGRvd25Db250ZW50TWVudVByb3BzKSA9PiB7XG4gIHJldHVybiAoXG4gICAgPERyb3Bkb3duQmFzZU1lbnVcbiAgICAgIGN1c3RvbVN0eWxlcz17e1xuICAgICAgICBwYWRkaW5nOiBkZXNpZ25Ub2tlbnMuc3BhY2luZzMwLFxuICAgICAgfX1cbiAgICAgIGhvcml6b250YWxDb25zdHJhaW50PXtwcm9wcy5ob3Jpem9udGFsQ29uc3RyYWludH1cbiAgICAgIGlzT3Blbj17cHJvcHMuaXNPcGVufVxuICAgICAgbWVudVBvc2l0aW9uPXtwcm9wcy5tZW51UG9zaXRpb259XG4gICAgICBtZW51TWF4SGVpZ2h0PXtwcm9wcy5tZW51TWF4SGVpZ2h0fVxuICAgICAgdHJpZ2dlckVsZW1lbnRSZWY9e3Byb3BzLnRyaWdnZXJFbGVtZW50UmVmfVxuICAgID5cbiAgICAgIHtwcm9wcy5jaGlsZHJlbn1cbiAgICA8L0Ryb3Bkb3duQmFzZU1lbnU+XG4gICk7XG59O1xuXG5leHBvcnQgdHlwZSBURHJvcGRvd25MaXN0TWVudVByb3BzID0ge1xuICBjaGlsZHJlbjogUmVhY3ROb2RlO1xuICBob3Jpem9udGFsQ29uc3RyYWludDogVE1heFByb3A7XG4gIG1lbnVQb3NpdGlvbjogJ2xlZnQnIHwgJ3JpZ2h0JztcbiAgbWVudU1heEhlaWdodD86IG51bWJlcjtcbiAgaXNPcGVuOiBib29sZWFuO1xuICB0cmlnZ2VyRWxlbWVudFJlZjogUmVmT2JqZWN0PEhUTUxFbGVtZW50Pjtcbn07XG5leHBvcnQgY29uc3QgRHJvcGRvd25MaXN0TWVudSA9IChwcm9wczogVERyb3Bkb3duTGlzdE1lbnVQcm9wcykgPT4ge1xuICByZXR1cm4gKFxuICAgIDxEcm9wZG93bkJhc2VNZW51XG4gICAgICBob3Jpem9udGFsQ29uc3RyYWludD17cHJvcHMuaG9yaXpvbnRhbENvbnN0cmFpbnR9XG4gICAgICBpc09wZW49e3Byb3BzLmlzT3Blbn1cbiAgICAgIG1lbnVQb3NpdGlvbj17cHJvcHMubWVudVBvc2l0aW9ufVxuICAgICAgbWVudU1heEhlaWdodD17cHJvcHMubWVudU1heEhlaWdodH1cbiAgICAgIHRyaWdnZXJFbGVtZW50UmVmPXtwcm9wcy50cmlnZ2VyRWxlbWVudFJlZn1cbiAgICA+XG4gICAgICA8U3BhY2luZ3NTdGFjayBzY2FsZT1cInhzXCI+e3Byb3BzLmNoaWxkcmVufTwvU3BhY2luZ3NTdGFjaz5cbiAgICA8L0Ryb3Bkb3duQmFzZU1lbnU+XG4gICk7XG59O1xuIl19 */");
 }
 function DropdownBaseMenu(props) {
-  const menuRef = React.useRef(null);
-  React.useLayoutEffect(() => {
+  const menuRef = react.useRef(null);
+  react.useLayoutEffect(() => {
     // Update the position of the menu when it is open
     if (props.isOpen && props.triggerElementRef.current && menuRef.current) {
+      var _context, _context2;
       const triggerElementCoordinates = props.triggerElementRef.current.getBoundingClientRect();
-      const menuElementCoordinates = menuRef.current.getBoundingClientRect();
       menuRef.current.style.top = "".concat(triggerElementCoordinates.top + triggerElementCoordinates.height, "px");
-      menuRef.current.style.left = props.menuPosition === 'left' ? "".concat(triggerElementCoordinates.left, "px") : "".concat(triggerElementCoordinates.left + triggerElementCoordinates.width - menuElementCoordinates.width, "px");
+      if (props.menuPosition === 'left') {
+        menuRef.current.style.left = "".concat(triggerElementCoordinates.left, "px");
+        menuRef.current.style.removeProperty('right');
+      } else {
+        menuRef.current.style.right = "".concat(window.innerWidth - triggerElementCoordinates.right, "px");
+        menuRef.current.style.removeProperty('left');
+      }
+      menuRef.current.style.maxHeight = props.menuMaxHeight ? "".concat(props.menuMaxHeight, "px") : _concatInstanceProperty__default["default"](_context = _concatInstanceProperty__default["default"](_context2 = "calc(".concat(window.innerHeight - (triggerElementCoordinates.top + triggerElementCoordinates.height), "px - ")).call(_context2, marginTop, " - ")).call(_context, boxShadowBottomSize, ")");
     }
-  }, [props.isOpen, props.menuPosition, props.triggerElementRef]);
+  }, [props.isOpen, props.menuPosition, props.triggerElementRef, props.menuMaxHeight]);
   return jsxRuntime.jsx("div", {
     css: getDropdownMenuBaseStyles(props),
     style: props.customStyles,
@@ -75,6 +85,7 @@ DropdownBaseMenu.propTypes = process.env.NODE_ENV !== "production" ? {
   horizontalConstraint: _pt__default["default"].any.isRequired,
   isOpen: _pt__default["default"].bool.isRequired,
   menuPosition: _pt__default["default"].oneOf(['left', 'right']).isRequired,
+  menuMaxHeight: _pt__default["default"].number,
   triggerElementRef: _pt__default["default"].any.isRequired
 } : {};
 const DropdownContentMenu = props => {
@@ -85,6 +96,7 @@ const DropdownContentMenu = props => {
     horizontalConstraint: props.horizontalConstraint,
     isOpen: props.isOpen,
     menuPosition: props.menuPosition,
+    menuMaxHeight: props.menuMaxHeight,
     triggerElementRef: props.triggerElementRef,
     children: props.children
   });
@@ -93,6 +105,7 @@ DropdownContentMenu.propTypes = process.env.NODE_ENV !== "production" ? {
   children: _pt__default["default"].node.isRequired,
   horizontalConstraint: _pt__default["default"].any.isRequired,
   menuPosition: _pt__default["default"].oneOf(['left', 'right']).isRequired,
+  menuMaxHeight: _pt__default["default"].number,
   isOpen: _pt__default["default"].bool.isRequired,
   triggerElementRef: _pt__default["default"].any.isRequired
 } : {};
@@ -101,6 +114,7 @@ const DropdownListMenu = props => {
     horizontalConstraint: props.horizontalConstraint,
     isOpen: props.isOpen,
     menuPosition: props.menuPosition,
+    menuMaxHeight: props.menuMaxHeight,
     triggerElementRef: props.triggerElementRef,
     children: jsxRuntime.jsx(SpacingsStack__default["default"], {
       scale: "xs",
@@ -112,12 +126,13 @@ DropdownListMenu.propTypes = process.env.NODE_ENV !== "production" ? {
   children: _pt__default["default"].node.isRequired,
   horizontalConstraint: _pt__default["default"].any.isRequired,
   menuPosition: _pt__default["default"].oneOf(['left', 'right']).isRequired,
+  menuMaxHeight: _pt__default["default"].number,
   isOpen: _pt__default["default"].bool.isRequired,
   triggerElementRef: _pt__default["default"].any.isRequired
 } : {};
 function getDropdownListMenuItemStyles(props) {
-  return [/*#__PURE__*/react.css("display:block;text-align:left;text-wrap:wrap;width:100%;padding:", designSystem.designTokens.spacing20, " ", designSystem.designTokens.spacing30, ";background-color:", designSystem.designTokens.colorSurface, ";&:first-of-type{border-radius:", designSystem.designTokens.borderRadius6, " ", designSystem.designTokens.borderRadius6, " 0 0;}&:last-of-type{border-radius:0 0 ", designSystem.designTokens.borderRadius6, " ", designSystem.designTokens.borderRadius6, ";}&:hover{background-color:", designSystem.designTokens.colorPrimary98, ";}" + (process.env.NODE_ENV === "production" ? "" : ";label:getDropdownListMenuItemStyles;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImRyb3Bkb3duLW1lbnUtbGlzdC1pdGVtLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFPTyIsImZpbGUiOiJkcm9wZG93bi1tZW51LWxpc3QtaXRlbS50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5pbXBvcnQgQWNjZXNzaWJsZUJ1dHRvbiBmcm9tICdAY29tbWVyY2V0b29scy11aWtpdC9hY2Nlc3NpYmxlLWJ1dHRvbic7XG5pbXBvcnQgeyBkZXNpZ25Ub2tlbnMgfSBmcm9tICdAY29tbWVyY2V0b29scy11aWtpdC9kZXNpZ24tc3lzdGVtJztcbmltcG9ydCB7IHVzZURyb3Bkb3duTWVudUNvbnRleHQgfSBmcm9tICcuLi9jb250ZXh0L2Ryb3Bkb3duLW1lbnUtY29udGV4dCc7XG5cbmZ1bmN0aW9uIGdldERyb3Bkb3duTGlzdE1lbnVJdGVtU3R5bGVzKHByb3BzOiBURHJvcGRvd25MaXN0TWVudUl0ZW1Qcm9wcykge1xuICByZXR1cm4gW1xuICAgIGNzc2BcbiAgICAgIGRpc3BsYXk6IGJsb2NrO1xuICAgICAgdGV4dC1hbGlnbjogbGVmdDtcbiAgICAgIHRleHQtd3JhcDogd3JhcDtcbiAgICAgIHdpZHRoOiAxMDAlO1xuICAgICAgcGFkZGluZzogJHtkZXNpZ25Ub2tlbnMuc3BhY2luZzIwfSAke2Rlc2lnblRva2Vucy5zcGFjaW5nMzB9O1xuICAgICAgYmFja2dyb3VuZC1jb2xvcjogJHtkZXNpZ25Ub2tlbnMuY29sb3JTdXJmYWNlfTtcbiAgICAgICY6Zmlyc3Qtb2YtdHlwZSB7XG4gICAgICAgIGJvcmRlci1yYWRpdXM6ICR7ZGVzaWduVG9rZW5zLmJvcmRlclJhZGl1czZ9XG4gICAgICAgICAgJHtkZXNpZ25Ub2tlbnMuYm9yZGVyUmFkaXVzNn0gMCAwO1xuICAgICAgfVxuICAgICAgJjpsYXN0LW9mLXR5cGUge1xuICAgICAgICBib3JkZXItcmFkaXVzOiAwIDAgJHtkZXNpZ25Ub2tlbnMuYm9yZGVyUmFkaXVzNn1cbiAgICAgICAgICAke2Rlc2lnblRva2Vucy5ib3JkZXJSYWRpdXM2fTtcbiAgICAgIH1cbiAgICAgICY6aG92ZXIge1xuICAgICAgICBiYWNrZ3JvdW5kLWNvbG9yOiAke2Rlc2lnblRva2Vucy5jb2xvclByaW1hcnk5OH07XG4gICAgICB9XG4gICAgYCxcbiAgICBwcm9wcy5pc0Rpc2FibGVkICYmXG4gICAgICBjc3NgXG4gICAgICAgIGNvbG9yOiAke2Rlc2lnblRva2Vucy5jb2xvck5ldXRyYWx9O1xuICAgICAgYCxcbiAgXTtcbn1cblxuZXhwb3J0IHR5cGUgVERyb3Bkb3duTGlzdE1lbnVJdGVtUHJvcHMgPSB7XG4gIG9uQ2xpY2s/OiAoKSA9PiB2b2lkO1xuICBpc0Rpc2FibGVkPzogYm9vbGVhbjtcbiAgY2hpbGRyZW46IHN0cmluZztcbn07XG5cbmZ1bmN0aW9uIERyb3Bkb3duTGlzdE1lbnVJdGVtKHByb3BzOiBURHJvcGRvd25MaXN0TWVudUl0ZW1Qcm9wcykge1xuICBjb25zdCB7IHRvZ2dsZSB9ID0gdXNlRHJvcGRvd25NZW51Q29udGV4dCgpO1xuICByZXR1cm4gKFxuICAgIDxBY2Nlc3NpYmxlQnV0dG9uXG4gICAgICBsYWJlbD17cHJvcHMuY2hpbGRyZW59XG4gICAgICBvbkNsaWNrPXsoKSA9PiB7XG4gICAgICAgIHRvZ2dsZSgpO1xuICAgICAgICBwcm9wcy5vbkNsaWNrPy4oKTtcbiAgICAgIH19XG4gICAgICBpc0Rpc2FibGVkPXtwcm9wcy5pc0Rpc2FibGVkfVxuICAgICAgY3NzPXtnZXREcm9wZG93bkxpc3RNZW51SXRlbVN0eWxlcyhwcm9wcyl9XG4gICAgPlxuICAgICAge3Byb3BzLmNoaWxkcmVufVxuICAgIDwvQWNjZXNzaWJsZUJ1dHRvbj5cbiAgKTtcbn1cblxuZXhwb3J0IGRlZmF1bHQgRHJvcGRvd25MaXN0TWVudUl0ZW07XG4iXX0= */"), props.isDisabled && /*#__PURE__*/react.css("color:", designSystem.designTokens.colorNeutral, ";" + (process.env.NODE_ENV === "production" ? "" : ";label:getDropdownListMenuItemStyles;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImRyb3Bkb3duLW1lbnUtbGlzdC1pdGVtLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUEyQlMiLCJmaWxlIjoiZHJvcGRvd24tbWVudS1saXN0LWl0ZW0udHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuaW1wb3J0IEFjY2Vzc2libGVCdXR0b24gZnJvbSAnQGNvbW1lcmNldG9vbHMtdWlraXQvYWNjZXNzaWJsZS1idXR0b24nO1xuaW1wb3J0IHsgZGVzaWduVG9rZW5zIH0gZnJvbSAnQGNvbW1lcmNldG9vbHMtdWlraXQvZGVzaWduLXN5c3RlbSc7XG5pbXBvcnQgeyB1c2VEcm9wZG93bk1lbnVDb250ZXh0IH0gZnJvbSAnLi4vY29udGV4dC9kcm9wZG93bi1tZW51LWNvbnRleHQnO1xuXG5mdW5jdGlvbiBnZXREcm9wZG93bkxpc3RNZW51SXRlbVN0eWxlcyhwcm9wczogVERyb3Bkb3duTGlzdE1lbnVJdGVtUHJvcHMpIHtcbiAgcmV0dXJuIFtcbiAgICBjc3NgXG4gICAgICBkaXNwbGF5OiBibG9jaztcbiAgICAgIHRleHQtYWxpZ246IGxlZnQ7XG4gICAgICB0ZXh0LXdyYXA6IHdyYXA7XG4gICAgICB3aWR0aDogMTAwJTtcbiAgICAgIHBhZGRpbmc6ICR7ZGVzaWduVG9rZW5zLnNwYWNpbmcyMH0gJHtkZXNpZ25Ub2tlbnMuc3BhY2luZzMwfTtcbiAgICAgIGJhY2tncm91bmQtY29sb3I6ICR7ZGVzaWduVG9rZW5zLmNvbG9yU3VyZmFjZX07XG4gICAgICAmOmZpcnN0LW9mLXR5cGUge1xuICAgICAgICBib3JkZXItcmFkaXVzOiAke2Rlc2lnblRva2Vucy5ib3JkZXJSYWRpdXM2fVxuICAgICAgICAgICR7ZGVzaWduVG9rZW5zLmJvcmRlclJhZGl1czZ9IDAgMDtcbiAgICAgIH1cbiAgICAgICY6bGFzdC1vZi10eXBlIHtcbiAgICAgICAgYm9yZGVyLXJhZGl1czogMCAwICR7ZGVzaWduVG9rZW5zLmJvcmRlclJhZGl1czZ9XG4gICAgICAgICAgJHtkZXNpZ25Ub2tlbnMuYm9yZGVyUmFkaXVzNn07XG4gICAgICB9XG4gICAgICAmOmhvdmVyIHtcbiAgICAgICAgYmFja2dyb3VuZC1jb2xvcjogJHtkZXNpZ25Ub2tlbnMuY29sb3JQcmltYXJ5OTh9O1xuICAgICAgfVxuICAgIGAsXG4gICAgcHJvcHMuaXNEaXNhYmxlZCAmJlxuICAgICAgY3NzYFxuICAgICAgICBjb2xvcjogJHtkZXNpZ25Ub2tlbnMuY29sb3JOZXV0cmFsfTtcbiAgICAgIGAsXG4gIF07XG59XG5cbmV4cG9ydCB0eXBlIFREcm9wZG93bkxpc3RNZW51SXRlbVByb3BzID0ge1xuICBvbkNsaWNrPzogKCkgPT4gdm9pZDtcbiAgaXNEaXNhYmxlZD86IGJvb2xlYW47XG4gIGNoaWxkcmVuOiBzdHJpbmc7XG59O1xuXG5mdW5jdGlvbiBEcm9wZG93bkxpc3RNZW51SXRlbShwcm9wczogVERyb3Bkb3duTGlzdE1lbnVJdGVtUHJvcHMpIHtcbiAgY29uc3QgeyB0b2dnbGUgfSA9IHVzZURyb3Bkb3duTWVudUNvbnRleHQoKTtcbiAgcmV0dXJuIChcbiAgICA8QWNjZXNzaWJsZUJ1dHRvblxuICAgICAgbGFiZWw9e3Byb3BzLmNoaWxkcmVufVxuICAgICAgb25DbGljaz17KCkgPT4ge1xuICAgICAgICB0b2dnbGUoKTtcbiAgICAgICAgcHJvcHMub25DbGljaz8uKCk7XG4gICAgICB9fVxuICAgICAgaXNEaXNhYmxlZD17cHJvcHMuaXNEaXNhYmxlZH1cbiAgICAgIGNzcz17Z2V0RHJvcGRvd25MaXN0TWVudUl0ZW1TdHlsZXMocHJvcHMpfVxuICAgID5cbiAgICAgIHtwcm9wcy5jaGlsZHJlbn1cbiAgICA8L0FjY2Vzc2libGVCdXR0b24+XG4gICk7XG59XG5cbmV4cG9ydCBkZWZhdWx0IERyb3Bkb3duTGlzdE1lbnVJdGVtO1xuIl19 */")];
+  return [/*#__PURE__*/react$1.css("display:block;text-align:left;text-wrap:wrap;width:100%;padding:", designSystem.designTokens.spacing20, " ", designSystem.designTokens.spacing30, ";background-color:", designSystem.designTokens.colorSurface, ";&:first-of-type{border-radius:", designSystem.designTokens.borderRadius6, " ", designSystem.designTokens.borderRadius6, " 0 0;}&:last-of-type{border-radius:0 0 ", designSystem.designTokens.borderRadius6, " ", designSystem.designTokens.borderRadius6, ";}&:hover{background-color:", designSystem.designTokens.colorPrimary98, ";}" + (process.env.NODE_ENV === "production" ? "" : ";label:getDropdownListMenuItemStyles;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImRyb3Bkb3duLW1lbnUtbGlzdC1pdGVtLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFPTyIsImZpbGUiOiJkcm9wZG93bi1tZW51LWxpc3QtaXRlbS50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5pbXBvcnQgQWNjZXNzaWJsZUJ1dHRvbiBmcm9tICdAY29tbWVyY2V0b29scy11aWtpdC9hY2Nlc3NpYmxlLWJ1dHRvbic7XG5pbXBvcnQgeyBkZXNpZ25Ub2tlbnMgfSBmcm9tICdAY29tbWVyY2V0b29scy11aWtpdC9kZXNpZ24tc3lzdGVtJztcbmltcG9ydCB7IHVzZURyb3Bkb3duTWVudUNvbnRleHQgfSBmcm9tICcuLi9jb250ZXh0L2Ryb3Bkb3duLW1lbnUtY29udGV4dCc7XG5cbmZ1bmN0aW9uIGdldERyb3Bkb3duTGlzdE1lbnVJdGVtU3R5bGVzKHByb3BzOiBURHJvcGRvd25MaXN0TWVudUl0ZW1Qcm9wcykge1xuICByZXR1cm4gW1xuICAgIGNzc2BcbiAgICAgIGRpc3BsYXk6IGJsb2NrO1xuICAgICAgdGV4dC1hbGlnbjogbGVmdDtcbiAgICAgIHRleHQtd3JhcDogd3JhcDtcbiAgICAgIHdpZHRoOiAxMDAlO1xuICAgICAgcGFkZGluZzogJHtkZXNpZ25Ub2tlbnMuc3BhY2luZzIwfSAke2Rlc2lnblRva2Vucy5zcGFjaW5nMzB9O1xuICAgICAgYmFja2dyb3VuZC1jb2xvcjogJHtkZXNpZ25Ub2tlbnMuY29sb3JTdXJmYWNlfTtcbiAgICAgICY6Zmlyc3Qtb2YtdHlwZSB7XG4gICAgICAgIGJvcmRlci1yYWRpdXM6ICR7ZGVzaWduVG9rZW5zLmJvcmRlclJhZGl1czZ9XG4gICAgICAgICAgJHtkZXNpZ25Ub2tlbnMuYm9yZGVyUmFkaXVzNn0gMCAwO1xuICAgICAgfVxuICAgICAgJjpsYXN0LW9mLXR5cGUge1xuICAgICAgICBib3JkZXItcmFkaXVzOiAwIDAgJHtkZXNpZ25Ub2tlbnMuYm9yZGVyUmFkaXVzNn1cbiAgICAgICAgICAke2Rlc2lnblRva2Vucy5ib3JkZXJSYWRpdXM2fTtcbiAgICAgIH1cbiAgICAgICY6aG92ZXIge1xuICAgICAgICBiYWNrZ3JvdW5kLWNvbG9yOiAke2Rlc2lnblRva2Vucy5jb2xvclByaW1hcnk5OH07XG4gICAgICB9XG4gICAgYCxcbiAgICBwcm9wcy5pc0Rpc2FibGVkICYmXG4gICAgICBjc3NgXG4gICAgICAgIGNvbG9yOiAke2Rlc2lnblRva2Vucy5jb2xvck5ldXRyYWx9O1xuICAgICAgYCxcbiAgXTtcbn1cblxuZXhwb3J0IHR5cGUgVERyb3Bkb3duTGlzdE1lbnVJdGVtUHJvcHMgPSB7XG4gIG9uQ2xpY2s/OiAoKSA9PiB2b2lkO1xuICBpc0Rpc2FibGVkPzogYm9vbGVhbjtcbiAgY2hpbGRyZW46IHN0cmluZztcbn07XG5cbmZ1bmN0aW9uIERyb3Bkb3duTGlzdE1lbnVJdGVtKHByb3BzOiBURHJvcGRvd25MaXN0TWVudUl0ZW1Qcm9wcykge1xuICBjb25zdCB7IHRvZ2dsZSB9ID0gdXNlRHJvcGRvd25NZW51Q29udGV4dCgpO1xuICByZXR1cm4gKFxuICAgIDxBY2Nlc3NpYmxlQnV0dG9uXG4gICAgICBsYWJlbD17cHJvcHMuY2hpbGRyZW59XG4gICAgICBvbkNsaWNrPXsoKSA9PiB7XG4gICAgICAgIHRvZ2dsZSgpO1xuICAgICAgICBwcm9wcy5vbkNsaWNrPy4oKTtcbiAgICAgIH19XG4gICAgICBpc0Rpc2FibGVkPXtwcm9wcy5pc0Rpc2FibGVkfVxuICAgICAgY3NzPXtnZXREcm9wZG93bkxpc3RNZW51SXRlbVN0eWxlcyhwcm9wcyl9XG4gICAgPlxuICAgICAge3Byb3BzLmNoaWxkcmVufVxuICAgIDwvQWNjZXNzaWJsZUJ1dHRvbj5cbiAgKTtcbn1cblxuZXhwb3J0IGRlZmF1bHQgRHJvcGRvd25MaXN0TWVudUl0ZW07XG4iXX0= */"), props.isDisabled && /*#__PURE__*/react$1.css("color:", designSystem.designTokens.colorNeutral, ";" + (process.env.NODE_ENV === "production" ? "" : ";label:getDropdownListMenuItemStyles;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImRyb3Bkb3duLW1lbnUtbGlzdC1pdGVtLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUEyQlMiLCJmaWxlIjoiZHJvcGRvd24tbWVudS1saXN0LWl0ZW0udHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuaW1wb3J0IEFjY2Vzc2libGVCdXR0b24gZnJvbSAnQGNvbW1lcmNldG9vbHMtdWlraXQvYWNjZXNzaWJsZS1idXR0b24nO1xuaW1wb3J0IHsgZGVzaWduVG9rZW5zIH0gZnJvbSAnQGNvbW1lcmNldG9vbHMtdWlraXQvZGVzaWduLXN5c3RlbSc7XG5pbXBvcnQgeyB1c2VEcm9wZG93bk1lbnVDb250ZXh0IH0gZnJvbSAnLi4vY29udGV4dC9kcm9wZG93bi1tZW51LWNvbnRleHQnO1xuXG5mdW5jdGlvbiBnZXREcm9wZG93bkxpc3RNZW51SXRlbVN0eWxlcyhwcm9wczogVERyb3Bkb3duTGlzdE1lbnVJdGVtUHJvcHMpIHtcbiAgcmV0dXJuIFtcbiAgICBjc3NgXG4gICAgICBkaXNwbGF5OiBibG9jaztcbiAgICAgIHRleHQtYWxpZ246IGxlZnQ7XG4gICAgICB0ZXh0LXdyYXA6IHdyYXA7XG4gICAgICB3aWR0aDogMTAwJTtcbiAgICAgIHBhZGRpbmc6ICR7ZGVzaWduVG9rZW5zLnNwYWNpbmcyMH0gJHtkZXNpZ25Ub2tlbnMuc3BhY2luZzMwfTtcbiAgICAgIGJhY2tncm91bmQtY29sb3I6ICR7ZGVzaWduVG9rZW5zLmNvbG9yU3VyZmFjZX07XG4gICAgICAmOmZpcnN0LW9mLXR5cGUge1xuICAgICAgICBib3JkZXItcmFkaXVzOiAke2Rlc2lnblRva2Vucy5ib3JkZXJSYWRpdXM2fVxuICAgICAgICAgICR7ZGVzaWduVG9rZW5zLmJvcmRlclJhZGl1czZ9IDAgMDtcbiAgICAgIH1cbiAgICAgICY6bGFzdC1vZi10eXBlIHtcbiAgICAgICAgYm9yZGVyLXJhZGl1czogMCAwICR7ZGVzaWduVG9rZW5zLmJvcmRlclJhZGl1czZ9XG4gICAgICAgICAgJHtkZXNpZ25Ub2tlbnMuYm9yZGVyUmFkaXVzNn07XG4gICAgICB9XG4gICAgICAmOmhvdmVyIHtcbiAgICAgICAgYmFja2dyb3VuZC1jb2xvcjogJHtkZXNpZ25Ub2tlbnMuY29sb3JQcmltYXJ5OTh9O1xuICAgICAgfVxuICAgIGAsXG4gICAgcHJvcHMuaXNEaXNhYmxlZCAmJlxuICAgICAgY3NzYFxuICAgICAgICBjb2xvcjogJHtkZXNpZ25Ub2tlbnMuY29sb3JOZXV0cmFsfTtcbiAgICAgIGAsXG4gIF07XG59XG5cbmV4cG9ydCB0eXBlIFREcm9wZG93bkxpc3RNZW51SXRlbVByb3BzID0ge1xuICBvbkNsaWNrPzogKCkgPT4gdm9pZDtcbiAgaXNEaXNhYmxlZD86IGJvb2xlYW47XG4gIGNoaWxkcmVuOiBzdHJpbmc7XG59O1xuXG5mdW5jdGlvbiBEcm9wZG93bkxpc3RNZW51SXRlbShwcm9wczogVERyb3Bkb3duTGlzdE1lbnVJdGVtUHJvcHMpIHtcbiAgY29uc3QgeyB0b2dnbGUgfSA9IHVzZURyb3Bkb3duTWVudUNvbnRleHQoKTtcbiAgcmV0dXJuIChcbiAgICA8QWNjZXNzaWJsZUJ1dHRvblxuICAgICAgbGFiZWw9e3Byb3BzLmNoaWxkcmVufVxuICAgICAgb25DbGljaz17KCkgPT4ge1xuICAgICAgICB0b2dnbGUoKTtcbiAgICAgICAgcHJvcHMub25DbGljaz8uKCk7XG4gICAgICB9fVxuICAgICAgaXNEaXNhYmxlZD17cHJvcHMuaXNEaXNhYmxlZH1cbiAgICAgIGNzcz17Z2V0RHJvcGRvd25MaXN0TWVudUl0ZW1TdHlsZXMocHJvcHMpfVxuICAgID5cbiAgICAgIHtwcm9wcy5jaGlsZHJlbn1cbiAgICA8L0FjY2Vzc2libGVCdXR0b24+XG4gICk7XG59XG5cbmV4cG9ydCBkZWZhdWx0IERyb3Bkb3duTGlzdE1lbnVJdGVtO1xuIl19 */")];
 }
 function DropdownListMenuItem(props) {
   const _useDropdownMenuConte = useDropdownMenuContext(),
@@ -136,6 +151,40 @@ function DropdownListMenuItem(props) {
 }
 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)."; }
+function getScrollableParent(element) {
+  if (!element) {
+    return null;
+  }
+  const overflowY = window.getComputedStyle(element).overflowY;
+  const isScrollable = overflowY !== 'visible' && overflowY !== 'hidden';
+  if (isScrollable && element.scrollHeight >= element.clientHeight) {
+    return element;
+  }
+  return getScrollableParent(element.parentElement);
+}
+function useScrollBlock(isOpen, triggerRef) {
+  const scrollableParentRef = react.useRef();
+  react.useEffect(() => {
+    if (!scrollableParentRef.current) {
+      scrollableParentRef.current = getScrollableParent(triggerRef.current);
+    }
+    const scrollableParent = scrollableParentRef.current;
+    if (scrollableParent && isOpen) {
+      scrollableParent.setAttribute('data-prev-scroll', scrollableParent.style.overflowY);
+      scrollableParent.style.overflowY = 'hidden';
+    }
+    return () => {
+      // The cleanup effect runs after the component is unmounted but also everytime
+      // the dependency array changes. We need to manage both to manage opening/closing
+      // the dropdown but also to manage the the dropdown is opened and the component
+      // is unmounted. For instance, when navigating to another page client-side.
+      if (scrollableParent && isOpen) {
+        const prevScroll = scrollableParent.getAttribute('data-prev-scroll');
+        scrollableParent.style.overflowY = prevScroll || '';
+      }
+    };
+  }, [isOpen, scrollableParentRef, triggerRef]);
+}
 const defaultProps = {
   menuHorizontalConstraint: 'auto',
   menuPosition: 'left',
@@ -152,7 +201,7 @@ const Container = /*#__PURE__*/_styled__default["default"]("div", process.env.NO
 } : {
   name: "1nrevy2",
   styles: "position:relative;display:inline-block",
-  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImRyb3Bkb3duLW1lbnUudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQW1ENEIiLCJmaWxlIjoiZHJvcGRvd24tbWVudS50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgUmVhY3QsIHtcbiAgdXNlQ2FsbGJhY2ssXG4gIHVzZUVmZmVjdCxcbiAgdXNlTWVtbyxcbiAgdHlwZSBSZWFjdEVsZW1lbnQsXG4gIHR5cGUgUmVhY3ROb2RlLFxufSBmcm9tICdyZWFjdCc7XG5pbXBvcnQgeyB1c2VUb2dnbGVTdGF0ZSB9IGZyb20gJ0Bjb21tZXJjZXRvb2xzLXVpa2l0L2hvb2tzJztcbmltcG9ydCB7IHR5cGUgVE1heFByb3AgfSBmcm9tICdAY29tbWVyY2V0b29scy11aWtpdC9jb25zdHJhaW50cyc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgRHJvcGRvd25NZW51Q29udGV4dCBmcm9tICcuL2NvbnRleHQnO1xuaW1wb3J0IERyb3Bkb3duVHJpZ2dlciBmcm9tICcuL3RyaWdnZXInO1xuaW1wb3J0IHtcbiAgRHJvcGRvd25Db250ZW50TWVudSxcbiAgRHJvcGRvd25MaXN0TWVudSxcbiAgRHJvcGRvd25MaXN0TWVudUl0ZW0sXG59IGZyb20gJy4vbWVudSc7XG5cbmV4cG9ydCB0eXBlIFREcm9wZG93bk1lbnVQcm9wcyA9IHtcbiAgLyoqXG4gICAqIFRoZSBwb3NpdGlvbiBvZiB0aGUgbWVudSByZWxhdGl2ZSB0byB0aGUgdHJpZ2dlciBlbGVtZW50LlxuICAgKi9cbiAgbWVudVBvc2l0aW9uPzogJ2xlZnQnIHwgJ3JpZ2h0JztcbiAgLyoqXG4gICAqIFRoZSBlbGVtZW50IHRoYXQgdHJpZ2dlcnMgdGhlIGRyb3Bkb3duLlxuICAgKi9cbiAgdHJpZ2dlckVsZW1lbnQ6IFJlYWN0RWxlbWVudDtcbiAgLyoqXG4gICAqIFRoZSB0eXBlIG9mIHRoZSBtZW51LlxuICAgKiBUaGUgJ2RlZmF1bHQnIHR5cGUganVzdCByZW5kZXJzIGEgZHJvcGRvd24gY29udGFpbmVyIGJ1dCB0aGUgJ2xpc3QnIHR5cGUgaXMgaW50ZW5kZWQgdG8gYmUgdXNlZCB3aXRoIHRoZSBEcm9wZG93bk1lbnUuTGlzdE1lbnVJdGVtIGNvbXBvbmVudC5cbiAgICovXG4gIG1lbnVUeXBlPzogJ2RlZmF1bHQnIHwgJ2xpc3QnO1xuICAvKipcbiAgICogVGhlIGhvcml6b250YWwgY29uc3RyYWludCBvZiB0aGUgbWVudS5cbiAgICovXG4gIG1lbnVIb3Jpem9udGFsQ29uc3RyYWludD86IFRNYXhQcm9wO1xuICAvKipcbiAgICogVGhlIGNvbnRlbnQgb2YgdGhlIGRyb3Bkb3duLlxuICAgKi9cbiAgY2hpbGRyZW46IFJlYWN0Tm9kZTtcbn07XG5cbmNvbnN0IGRlZmF1bHRQcm9wczogUGljazxcbiAgVERyb3Bkb3duTWVudVByb3BzLFxuICAnbWVudVBvc2l0aW9uJyB8ICdtZW51VHlwZScgfCAnbWVudUhvcml6b250YWxDb25zdHJhaW50J1xuPiA9IHtcbiAgbWVudUhvcml6b250YWxDb25zdHJhaW50OiAnYXV0bycsXG4gIG1lbnVQb3NpdGlvbjogJ2xlZnQnLFxuICBtZW51VHlwZTogJ2RlZmF1bHQnLFxufTtcblxuY29uc3QgQ29udGFpbmVyID0gc3R5bGVkLmRpdmBcbiAgcG9zaXRpb246IHJlbGF0aXZlO1xuICBkaXNwbGF5OiBpbmxpbmUtYmxvY2s7XG5gO1xuXG5mdW5jdGlvbiBEcm9wZG93bk1lbnUocHJvcHM6IFREcm9wZG93bk1lbnVQcm9wcykge1xuICBjb25zdCBbaXNPcGVuLCB0b2dnbGVdID0gdXNlVG9nZ2xlU3RhdGUoZmFsc2UpO1xuICBjb25zdCB0cmlnZ2VyUmVmID0gUmVhY3QudXNlUmVmPEhUTUxEaXZFbGVtZW50PihudWxsKTtcblxuICAvLyBXZSB1c2UgdGhlIGNvbnRleHQgc28gY2hpbGRyZW4gY2FuIHRvZ2dsZSB0aGUgZHJvcGRvd25cbiAgY29uc3QgY29udGV4dCA9IHVzZU1lbW8oXG4gICAgKCkgPT4gKHtcbiAgICAgIGlzT3BlbixcbiAgICAgIHRvZ2dsZSxcbiAgICB9KSxcbiAgICBbaXNPcGVuLCB0b2dnbGVdXG4gICk7XG4gIGNvbnN0IE1lbnUgPVxuICAgIHByb3BzLm1lbnVUeXBlID09PSAnZGVmYXVsdCcgPyBEcm9wZG93bkNvbnRlbnRNZW51IDogRHJvcGRvd25MaXN0TWVudTtcblxuICAvLyBDbG9zZSB0aGUgZHJvcGRvd24gd2hlbiBjbGlja2luZyBvdXRzaWRlIG9mIGl0XG4gIGNvbnN0IGhhbmRsZUdsb2JhbENsaWNrID0gdXNlQ2FsbGJhY2soXG4gICAgKGV2ZW50KSA9PiB7XG4gICAgICBjb25zdCB0cmlnZ2VyRWxlbWVudCA9IHRyaWdnZXJSZWYuY3VycmVudDtcbiAgICAgIGlmIChcbiAgICAgICAgaXNPcGVuICYmXG4gICAgICAgIHRyaWdnZXJFbGVtZW50ICYmXG4gICAgICAgIGV2ZW50LnRhcmdldCAhPT0gdHJpZ2dlckVsZW1lbnQgJiZcbiAgICAgICAgd2luZG93LmRvY3VtZW50LmNvbnRhaW5zKGV2ZW50LnRhcmdldCkgJiZcbiAgICAgICAgIXRyaWdnZXJFbGVtZW50LnBhcmVudEVsZW1lbnQ/LmNvbnRhaW5zKGV2ZW50LnRhcmdldClcbiAgICAgICkge1xuICAgICAgICB0b2dnbGUoZmFsc2UpO1xuICAgICAgfVxuICAgIH0sXG4gICAgW3RyaWdnZXJSZWYsIHRvZ2dsZSwgaXNPcGVuXVxuICApO1xuICB1c2VFZmZlY3QoKCkgPT4ge1xuICAgIHdpbmRvdy5hZGRFdmVudExpc3RlbmVyKCdjbGljaycsIGhhbmRsZUdsb2JhbENsaWNrKTtcbiAgICByZXR1cm4gKCkgPT4ge1xuICAgICAgd2luZG93LnJlbW92ZUV2ZW50TGlzdGVuZXIoJ2NsaWNrJywgaGFuZGxlR2xvYmFsQ2xpY2spO1xuICAgIH07XG4gIH0sIFtoYW5kbGVHbG9iYWxDbGlja10pO1xuICAvLyBCbG9jayBzY3JvbGxpbmcgd2hlbiB0aGUgZHJvcGRvd24gaXMgb3BlblxuICB1c2VFZmZlY3QoKCkgPT4ge1xuICAgIGlmIChpc09wZW4pIHtcbiAgICAgIHdpbmRvdy5kb2N1bWVudC5ib2R5LnN0eWxlLm92ZXJmbG93ID0gJ2hpZGRlbic7XG4gICAgfSBlbHNlIHtcbiAgICAgIHdpbmRvdy5kb2N1bWVudC5ib2R5LnN0eWxlLm92ZXJmbG93ID0gJ2luaXRpYWwnO1xuICAgIH1cbiAgICByZXR1cm4gKCkgPT4ge1xuICAgICAgd2luZG93LmRvY3VtZW50LmJvZHkuc3R5bGUub3ZlcmZsb3cgPSAnaW5pdGlhbCc7XG4gICAgfTtcbiAgfSwgW2lzT3Blbl0pO1xuXG4gIHJldHVybiAoXG4gICAgPERyb3Bkb3duTWVudUNvbnRleHQuUHJvdmlkZXIgdmFsdWU9e2NvbnRleHR9PlxuICAgICAgPENvbnRhaW5lcj5cbiAgICAgICAgPERyb3Bkb3duVHJpZ2dlciBvbkNsaWNrPXt0b2dnbGV9IHJlZj17dHJpZ2dlclJlZn0+XG4gICAgICAgICAge3Byb3BzLnRyaWdnZXJFbGVtZW50fVxuICAgICAgICA8L0Ryb3Bkb3duVHJpZ2dlcj5cblxuICAgICAgICA8TWVudVxuICAgICAgICAgIGhvcml6b250YWxDb25zdHJhaW50PXtwcm9wcy5tZW51SG9yaXpvbnRhbENvbnN0cmFpbnQhfVxuICAgICAgICAgIGlzT3Blbj17aXNPcGVufVxuICAgICAgICAgIG1lbnVQb3NpdGlvbj17cHJvcHMubWVudVBvc2l0aW9uIX1cbiAgICAgICAgICB0cmlnZ2VyRWxlbWVudFJlZj17dHJpZ2dlclJlZn1cbiAgICAgICAgPlxuICAgICAgICAgIHtwcm9wcy5jaGlsZHJlbn1cbiAgICAgICAgPC9NZW51PlxuICAgICAgPC9Db250YWluZXI+XG4gICAgPC9Ecm9wZG93bk1lbnVDb250ZXh0LlByb3ZpZGVyPlxuICApO1xufVxuRHJvcGRvd25NZW51LmRlZmF1bHRQcm9wcyA9IGRlZmF1bHRQcm9wcztcblxuRHJvcGRvd25NZW51Lkxpc3RNZW51SXRlbSA9IERyb3Bkb3duTGlzdE1lbnVJdGVtO1xuXG5leHBvcnQgZGVmYXVsdCBEcm9wZG93bk1lbnU7XG4iXX0= */",
+  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImRyb3Bkb3duLW1lbnUudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQW9HNEIiLCJmaWxlIjoiZHJvcGRvd24tbWVudS50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1xuICB1c2VDYWxsYmFjayxcbiAgdXNlRWZmZWN0LFxuICB1c2VNZW1vLFxuICB1c2VSZWYsXG4gIHR5cGUgUmVhY3RFbGVtZW50LFxuICB0eXBlIFJlYWN0Tm9kZSxcbiAgdHlwZSBSZWZPYmplY3QsXG59IGZyb20gJ3JlYWN0JztcbmltcG9ydCB7IHVzZVRvZ2dsZVN0YXRlIH0gZnJvbSAnQGNvbW1lcmNldG9vbHMtdWlraXQvaG9va3MnO1xuaW1wb3J0IHsgdHlwZSBUTWF4UHJvcCB9IGZyb20gJ0Bjb21tZXJjZXRvb2xzLXVpa2l0L2NvbnN0cmFpbnRzJztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCBEcm9wZG93bk1lbnVDb250ZXh0IGZyb20gJy4vY29udGV4dCc7XG5pbXBvcnQgRHJvcGRvd25UcmlnZ2VyIGZyb20gJy4vdHJpZ2dlcic7XG5pbXBvcnQge1xuICBEcm9wZG93bkNvbnRlbnRNZW51LFxuICBEcm9wZG93bkxpc3RNZW51LFxuICBEcm9wZG93bkxpc3RNZW51SXRlbSxcbn0gZnJvbSAnLi9tZW51JztcblxuZXhwb3J0IHR5cGUgVERyb3Bkb3duTWVudVByb3BzID0ge1xuICAvKipcbiAgICogVGhlIHBvc2l0aW9uIG9mIHRoZSBtZW51IHJlbGF0aXZlIHRvIHRoZSB0cmlnZ2VyIGVsZW1lbnQuXG4gICAqL1xuICBtZW51UG9zaXRpb24/OiAnbGVmdCcgfCAncmlnaHQnO1xuICAvKipcbiAgICogVGhlIG1heGltdW0gaGVpZ2h0IGZvciB0aGUgbWVudSBpbiBwaXhlbHMuXG4gICAqIEJ5IGRlZmF1bHQsIHRoZSBtYXggaGVpZ2h0IHdpbGwgYmUgdGhlIGF2YWlsYWJsZSBzcGFjZSBiZXR3ZWVuIHRoZSB0cmlnZ2VyIGVsZW1lbnQgYW5kIHRoZSBib3R0b20gb2YgdGhlIHZpZXdwb3J0LlxuICAgKi9cbiAgbWVudU1heEhlaWdodD86IG51bWJlcjtcbiAgLyoqXG4gICAqIFRoZSBlbGVtZW50IHRoYXQgdHJpZ2dlcnMgdGhlIGRyb3Bkb3duLlxuICAgKi9cbiAgdHJpZ2dlckVsZW1lbnQ6IFJlYWN0RWxlbWVudDtcbiAgLyoqXG4gICAqIFRoZSB0eXBlIG9mIHRoZSBtZW51LlxuICAgKiBUaGUgJ2RlZmF1bHQnIHR5cGUganVzdCByZW5kZXJzIGEgZHJvcGRvd24gY29udGFpbmVyIGJ1dCB0aGUgJ2xpc3QnIHR5cGUgaXMgaW50ZW5kZWQgdG8gYmUgdXNlZCB3aXRoIHRoZSBEcm9wZG93bk1lbnUuTGlzdE1lbnVJdGVtIGNvbXBvbmVudC5cbiAgICovXG4gIG1lbnVUeXBlPzogJ2RlZmF1bHQnIHwgJ2xpc3QnO1xuICAvKipcbiAgICogVGhlIGhvcml6b250YWwgY29uc3RyYWludCBvZiB0aGUgbWVudS5cbiAgICovXG4gIG1lbnVIb3Jpem9udGFsQ29uc3RyYWludD86IFRNYXhQcm9wO1xuICAvKipcbiAgICogVGhlIGNvbnRlbnQgb2YgdGhlIGRyb3Bkb3duLlxuICAgKi9cbiAgY2hpbGRyZW46IFJlYWN0Tm9kZTtcbn07XG5cbmZ1bmN0aW9uIGdldFNjcm9sbGFibGVQYXJlbnQoZWxlbWVudDogSFRNTEVsZW1lbnQgfCBudWxsKTogSFRNTEVsZW1lbnQgfCBudWxsIHtcbiAgaWYgKCFlbGVtZW50KSB7XG4gICAgcmV0dXJuIG51bGw7XG4gIH1cbiAgY29uc3Qgb3ZlcmZsb3dZID0gd2luZG93LmdldENvbXB1dGVkU3R5bGUoZWxlbWVudCkub3ZlcmZsb3dZO1xuICBjb25zdCBpc1Njcm9sbGFibGUgPSBvdmVyZmxvd1kgIT09ICd2aXNpYmxlJyAmJiBvdmVyZmxvd1kgIT09ICdoaWRkZW4nO1xuICBpZiAoaXNTY3JvbGxhYmxlICYmIGVsZW1lbnQuc2Nyb2xsSGVpZ2h0ID49IGVsZW1lbnQuY2xpZW50SGVpZ2h0KSB7XG4gICAgcmV0dXJuIGVsZW1lbnQ7XG4gIH1cblxuICByZXR1cm4gZ2V0U2Nyb2xsYWJsZVBhcmVudChlbGVtZW50LnBhcmVudEVsZW1lbnQpO1xufVxuXG5mdW5jdGlvbiB1c2VTY3JvbGxCbG9jayhpc09wZW46IGJvb2xlYW4sIHRyaWdnZXJSZWY6IFJlZk9iamVjdDxIVE1MRWxlbWVudD4pIHtcbiAgY29uc3Qgc2Nyb2xsYWJsZVBhcmVudFJlZiA9IHVzZVJlZjxIVE1MRWxlbWVudCB8IG51bGw+KCk7XG5cbiAgdXNlRWZmZWN0KCgpID0+IHtcbiAgICBpZiAoIXNjcm9sbGFibGVQYXJlbnRSZWYuY3VycmVudCkge1xuICAgICAgc2Nyb2xsYWJsZVBhcmVudFJlZi5jdXJyZW50ID0gZ2V0U2Nyb2xsYWJsZVBhcmVudCh0cmlnZ2VyUmVmLmN1cnJlbnQpO1xuICAgIH1cblxuICAgIGNvbnN0IHsgY3VycmVudDogc2Nyb2xsYWJsZVBhcmVudCB9ID0gc2Nyb2xsYWJsZVBhcmVudFJlZjtcbiAgICBpZiAoc2Nyb2xsYWJsZVBhcmVudCAmJiBpc09wZW4pIHtcbiAgICAgIHNjcm9sbGFibGVQYXJlbnQuc2V0QXR0cmlidXRlKFxuICAgICAgICAnZGF0YS1wcmV2LXNjcm9sbCcsXG4gICAgICAgIHNjcm9sbGFibGVQYXJlbnQuc3R5bGUub3ZlcmZsb3dZXG4gICAgICApO1xuICAgICAgc2Nyb2xsYWJsZVBhcmVudC5zdHlsZS5vdmVyZmxvd1kgPSAnaGlkZGVuJztcbiAgICB9XG4gICAgcmV0dXJuICgpID0+IHtcbiAgICAgIC8vIFRoZSBjbGVhbnVwIGVmZmVjdCBydW5zIGFmdGVyIHRoZSBjb21wb25lbnQgaXMgdW5tb3VudGVkIGJ1dCBhbHNvIGV2ZXJ5dGltZVxuICAgICAgLy8gdGhlIGRlcGVuZGVuY3kgYXJyYXkgY2hhbmdlcy4gV2UgbmVlZCB0byBtYW5hZ2UgYm90aCB0byBtYW5hZ2Ugb3BlbmluZy9jbG9zaW5nXG4gICAgICAvLyB0aGUgZHJvcGRvd24gYnV0IGFsc28gdG8gbWFuYWdlIHRoZSB0aGUgZHJvcGRvd24gaXMgb3BlbmVkIGFuZCB0aGUgY29tcG9uZW50XG4gICAgICAvLyBpcyB1bm1vdW50ZWQuIEZvciBpbnN0YW5jZSwgd2hlbiBuYXZpZ2F0aW5nIHRvIGFub3RoZXIgcGFnZSBjbGllbnQtc2lkZS5cbiAgICAgIGlmIChzY3JvbGxhYmxlUGFyZW50ICYmIGlzT3Blbikge1xuICAgICAgICBjb25zdCBwcmV2U2Nyb2xsID0gc2Nyb2xsYWJsZVBhcmVudC5nZXRBdHRyaWJ1dGUoJ2RhdGEtcHJldi1zY3JvbGwnKTtcbiAgICAgICAgc2Nyb2xsYWJsZVBhcmVudC5zdHlsZS5vdmVyZmxvd1kgPSBwcmV2U2Nyb2xsIHx8ICcnO1xuICAgICAgfVxuICAgIH07XG4gIH0sIFtpc09wZW4sIHNjcm9sbGFibGVQYXJlbnRSZWYsIHRyaWdnZXJSZWZdKTtcbn1cblxuY29uc3QgZGVmYXVsdFByb3BzOiBQaWNrPFxuICBURHJvcGRvd25NZW51UHJvcHMsXG4gICdtZW51UG9zaXRpb24nIHwgJ21lbnVUeXBlJyB8ICdtZW51SG9yaXpvbnRhbENvbnN0cmFpbnQnXG4+ID0ge1xuICBtZW51SG9yaXpvbnRhbENvbnN0cmFpbnQ6ICdhdXRvJyxcbiAgbWVudVBvc2l0aW9uOiAnbGVmdCcsXG4gIG1lbnVUeXBlOiAnZGVmYXVsdCcsXG59O1xuXG5jb25zdCBDb250YWluZXIgPSBzdHlsZWQuZGl2YFxuICBwb3NpdGlvbjogcmVsYXRpdmU7XG4gIGRpc3BsYXk6IGlubGluZS1ibG9jaztcbmA7XG5cbmZ1bmN0aW9uIERyb3Bkb3duTWVudShwcm9wczogVERyb3Bkb3duTWVudVByb3BzKSB7XG4gIGNvbnN0IFtpc09wZW4sIHRvZ2dsZV0gPSB1c2VUb2dnbGVTdGF0ZShmYWxzZSk7XG4gIGNvbnN0IHRyaWdnZXJSZWYgPSB1c2VSZWY8SFRNTERpdkVsZW1lbnQ+KG51bGwpO1xuXG4gIC8vIFdlIHVzZSB0aGUgY29udGV4dCBzbyBjaGlsZHJlbiBjYW4gdG9nZ2xlIHRoZSBkcm9wZG93blxuICBjb25zdCBjb250ZXh0ID0gdXNlTWVtbyhcbiAgICAoKSA9PiAoe1xuICAgICAgaXNPcGVuLFxuICAgICAgdG9nZ2xlLFxuICAgIH0pLFxuICAgIFtpc09wZW4sIHRvZ2dsZV1cbiAgKTtcbiAgY29uc3QgTWVudSA9XG4gICAgcHJvcHMubWVudVR5cGUgPT09ICdkZWZhdWx0JyA/IERyb3Bkb3duQ29udGVudE1lbnUgOiBEcm9wZG93bkxpc3RNZW51O1xuXG4gIC8vIENsb3NlIHRoZSBkcm9wZG93biB3aGVuIGNsaWNraW5nIG91dHNpZGUgb2YgaXRcbiAgY29uc3QgaGFuZGxlR2xvYmFsQ2xpY2sgPSB1c2VDYWxsYmFjayhcbiAgICAoZXZlbnQpID0+IHtcbiAgICAgIGNvbnN0IHRyaWdnZXJFbGVtZW50ID0gdHJpZ2dlclJlZi5jdXJyZW50O1xuICAgICAgaWYgKFxuICAgICAgICBpc09wZW4gJiZcbiAgICAgICAgdHJpZ2dlckVsZW1lbnQgJiZcbiAgICAgICAgZXZlbnQudGFyZ2V0ICE9PSB0cmlnZ2VyRWxlbWVudCAmJlxuICAgICAgICB3aW5kb3cuZG9jdW1lbnQuY29udGFpbnMoZXZlbnQudGFyZ2V0KSAmJlxuICAgICAgICAhdHJpZ2dlckVsZW1lbnQucGFyZW50RWxlbWVudD8uY29udGFpbnMoZXZlbnQudGFyZ2V0KVxuICAgICAgKSB7XG4gICAgICAgIHRvZ2dsZShmYWxzZSk7XG4gICAgICB9XG4gICAgfSxcbiAgICBbdHJpZ2dlclJlZiwgdG9nZ2xlLCBpc09wZW5dXG4gICk7XG4gIHVzZUVmZmVjdCgoKSA9PiB7XG4gICAgd2luZG93LmFkZEV2ZW50TGlzdGVuZXIoJ2NsaWNrJywgaGFuZGxlR2xvYmFsQ2xpY2spO1xuICAgIHJldHVybiAoKSA9PiB7XG4gICAgICB3aW5kb3cucmVtb3ZlRXZlbnRMaXN0ZW5lcignY2xpY2snLCBoYW5kbGVHbG9iYWxDbGljayk7XG4gICAgfTtcbiAgfSwgW2hhbmRsZUdsb2JhbENsaWNrXSk7XG5cbiAgLy8gQmxvY2sgc2Nyb2xsaW5nIHdoZW4gdGhlIGRyb3Bkb3duIGlzIG9wZW4uXG4gIC8vIFdlIGRvIHRoaXMgdG8gYXZvaWQgcmVxdWlyaW5nIGRyb3Bkb3duIHJlcmVuZGVyaW5nIHdoaWxlIHRoZSB1c2VyIHNjcm9sbHMuXG4gIHVzZVNjcm9sbEJsb2NrKGlzT3BlbiwgdHJpZ2dlclJlZik7XG5cbiAgcmV0dXJuIChcbiAgICA8RHJvcGRvd25NZW51Q29udGV4dC5Qcm92aWRlciB2YWx1ZT17Y29udGV4dH0+XG4gICAgICA8Q29udGFpbmVyPlxuICAgICAgICA8RHJvcGRvd25UcmlnZ2VyIG9uQ2xpY2s9e3RvZ2dsZX0gcmVmPXt0cmlnZ2VyUmVmfT5cbiAgICAgICAgICB7cHJvcHMudHJpZ2dlckVsZW1lbnR9XG4gICAgICAgIDwvRHJvcGRvd25UcmlnZ2VyPlxuXG4gICAgICAgIDxNZW51XG4gICAgICAgICAgaG9yaXpvbnRhbENvbnN0cmFpbnQ9e3Byb3BzLm1lbnVIb3Jpem9udGFsQ29uc3RyYWludCF9XG4gICAgICAgICAgaXNPcGVuPXtpc09wZW59XG4gICAgICAgICAgbWVudVBvc2l0aW9uPXtwcm9wcy5tZW51UG9zaXRpb24hfVxuICAgICAgICAgIG1lbnVNYXhIZWlnaHQ9e3Byb3BzLm1lbnVNYXhIZWlnaHR9XG4gICAgICAgICAgdHJpZ2dlckVsZW1lbnRSZWY9e3RyaWdnZXJSZWZ9XG4gICAgICAgID5cbiAgICAgICAgICB7cHJvcHMuY2hpbGRyZW59XG4gICAgICAgIDwvTWVudT5cbiAgICAgIDwvQ29udGFpbmVyPlxuICAgIDwvRHJvcGRvd25NZW51Q29udGV4dC5Qcm92aWRlcj5cbiAgKTtcbn1cbkRyb3Bkb3duTWVudS5kZWZhdWx0UHJvcHMgPSBkZWZhdWx0UHJvcHM7XG5cbkRyb3Bkb3duTWVudS5MaXN0TWVudUl0ZW0gPSBEcm9wZG93bkxpc3RNZW51SXRlbTtcblxuZXhwb3J0IGRlZmF1bHQgRHJvcGRvd25NZW51O1xuIl19 */",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 });
 function DropdownMenu(props) {
@@ -160,40 +209,33 @@ function DropdownMenu(props) {
     _useToggleState2 = _slicedToArray(_useToggleState, 2),
     isOpen = _useToggleState2[0],
     toggle = _useToggleState2[1];
-  const triggerRef = React__default["default"].useRef(null);
+  const triggerRef = react.useRef(null);
   // We use the context so children can toggle the dropdown
-  const context = React.useMemo(() => ({
+  const context = react.useMemo(() => ({
     isOpen,
     toggle
   }), [isOpen, toggle]);
   const Menu = props.menuType === 'default' ? DropdownContentMenu : DropdownListMenu;
   // Close the dropdown when clicking outside of it
-  const handleGlobalClick = React.useCallback(event => {
+  const handleGlobalClick = react.useCallback(event => {
     var _triggerElement$paren;
     const triggerElement = triggerRef.current;
     if (isOpen && triggerElement && event.target !== triggerElement && window.document.contains(event.target) && !((_triggerElement$paren = triggerElement.parentElement) !== null && _triggerElement$paren !== void 0 && _triggerElement$paren.contains(event.target))) {
       toggle(false);
     }
   }, [triggerRef, toggle, isOpen]);
-  React.useEffect(() => {
+  react.useEffect(() => {
     window.addEventListener('click', handleGlobalClick);
     return () => {
       window.removeEventListener('click', handleGlobalClick);
     };
   }, [handleGlobalClick]);
-  // Block scrolling when the dropdown is open
-  React.useEffect(() => {
-    if (isOpen) {
-      window.document.body.style.overflow = 'hidden';
-    } else {
-      window.document.body.style.overflow = 'initial';
-    }
-    return () => {
-      window.document.body.style.overflow = 'initial';
-    };
-  }, [isOpen]);
+  // Block scrolling when the dropdown is open.
+  // We do this to avoid requiring dropdown rerendering while the user scrolls.
+  useScrollBlock(isOpen, triggerRef);
   return jsxRuntime.jsx(DropdownMenuContext.Provider, {
     value: context,
     children: jsxRuntime.jsxs(Container, {
@@ -205,6 +247,7 @@ function DropdownMenu(props) {
         horizontalConstraint: props.menuHorizontalConstraint,
         isOpen: isOpen,
         menuPosition: props.menuPosition,
+        menuMaxHeight: props.menuMaxHeight,
         triggerElementRef: triggerRef,
         children: props.children
       })]
@@ -213,6 +256,7 @@ function DropdownMenu(props) {
 }
 DropdownMenu.propTypes = process.env.NODE_ENV !== "production" ? {
   menuPosition: _pt__default["default"].oneOf(['left', 'right']),
+  menuMaxHeight: _pt__default["default"].number,
   triggerElement: _pt__default["default"].element.isRequired,
   menuType: _pt__default["default"].oneOf(['default', 'list']),
   menuHorizontalConstraint: _pt__default["default"].any,
@@ -222,7 +266,7 @@ DropdownMenu.defaultProps = defaultProps;
 DropdownMenu.ListMenuItem = DropdownListMenuItem;
 // NOTE: This string will be replaced on build time with the package version.
-var version = "19.2.0";
+var version = "19.3.1";
 exports["default"] = DropdownMenu;
 exports.useDropdownMenuContext = useDropdownMenuContext;

package/dist/commercetools-uikit-dropdown-menu.cjs.prod.js CHANGED Viewed

@@ -5,10 +5,11 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var _slicedToArray = require('@babel/runtime-corejs3/helpers/slicedToArray');
 var _styled = require('@emotion/styled/base');
 require('prop-types');
-var React = require('react');
+var react = require('react');
 var hooks = require('@commercetools-uikit/hooks');
 var jsxRuntime = require('@emotion/react/jsx-runtime');
-var react = require('@emotion/react');
+var _concatInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/concat');
+var react$1 = require('@emotion/react');
 var designSystem = require('@commercetools-uikit/design-system');
 var Constraints = require('@commercetools-uikit/constraints');
 var SpacingsStack = require('@commercetools-uikit/spacings-stack');
@@ -17,17 +18,17 @@ var AccessibleButton = require('@commercetools-uikit/accessible-button');
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 var _styled__default = /*#__PURE__*/_interopDefault(_styled);
-var React__default = /*#__PURE__*/_interopDefault(React);
+var _concatInstanceProperty__default = /*#__PURE__*/_interopDefault(_concatInstanceProperty);
 var Constraints__default = /*#__PURE__*/_interopDefault(Constraints);
 var SpacingsStack__default = /*#__PURE__*/_interopDefault(SpacingsStack);
 var AccessibleButton__default = /*#__PURE__*/_interopDefault(AccessibleButton);
-const DropdownMenuContext = /*#__PURE__*/React.createContext({
+const DropdownMenuContext = /*#__PURE__*/react.createContext({
   isOpen: false,
   toggle: () => {}
 });
 function useDropdownMenuContext() {
-  const context = React.useContext(DropdownMenuContext);
+  const context = react.useContext(DropdownMenuContext);
   if (!context) {
     throw new Error('[ui-kit] DropdownMenu context can only be used in DropdownMenu children components.');
   }
@@ -37,7 +38,7 @@ function useDropdownMenuContext() {
   };
 }
-const DropDownTrigger = /*#__PURE__*/React.forwardRef((props, ref) => {
+const DropDownTrigger = /*#__PURE__*/react.forwardRef((props, ref) => {
   return jsxRuntime.jsx("div", {
     onClick: props.onClick,
     ref: ref,
@@ -47,20 +48,29 @@ const DropDownTrigger = /*#__PURE__*/React.forwardRef((props, ref) => {
 DropDownTrigger.displayName = 'DropDownTrigger';
 var DropdownTrigger = DropDownTrigger;
+const boxShadowBottomSize = '5px';
+const marginTop = designSystem.designTokens.spacing20;
 function getDropdownMenuBaseStyles(params) {
-  return /*#__PURE__*/react.css("background-color:", designSystem.designTokens.colorSurface, ";border:1px solid ", designSystem.designTokens.colorSurface, ";border-radius:", designSystem.designTokens.borderRadius4, ";box-shadow:0 2px 5px 0px rgba(0, 0, 0, 0.15);display:", params.isOpen ? 'block' : 'none', ";margin-top:", designSystem.designTokens.spacing20, ";max-width:", Constraints__default["default"].getMaxPropTokenValue(params.horizontalConstraint), ";position:fixed;width:", params.horizontalConstraint === 'auto' ? 'auto' : '100%', ";z-index:5;" + ("" ), "" );
+  return /*#__PURE__*/react$1.css("background-color:", designSystem.designTokens.colorSurface, ";border:1px solid ", designSystem.designTokens.colorSurface, ";border-radius:", designSystem.designTokens.borderRadius4, ";box-shadow:0 2px ", boxShadowBottomSize, " 0px rgba(0, 0, 0, 0.15);display:", params.isOpen ? 'block' : 'none', ";margin-top:", marginTop, ";max-width:", Constraints__default["default"].getMaxPropTokenValue(params.horizontalConstraint), ";overflow-y:auto;position:fixed;width:", params.horizontalConstraint === 'auto' ? 'auto' : '100%', ";z-index:5;" + ("" ), "" );
 }
 function DropdownBaseMenu(props) {
-  const menuRef = React.useRef(null);
-  React.useLayoutEffect(() => {
+  const menuRef = react.useRef(null);
+  react.useLayoutEffect(() => {
     // Update the position of the menu when it is open
     if (props.isOpen && props.triggerElementRef.current && menuRef.current) {
+      var _context, _context2;
       const triggerElementCoordinates = props.triggerElementRef.current.getBoundingClientRect();
-      const menuElementCoordinates = menuRef.current.getBoundingClientRect();
       menuRef.current.style.top = "".concat(triggerElementCoordinates.top + triggerElementCoordinates.height, "px");
-      menuRef.current.style.left = props.menuPosition === 'left' ? "".concat(triggerElementCoordinates.left, "px") : "".concat(triggerElementCoordinates.left + triggerElementCoordinates.width - menuElementCoordinates.width, "px");
+      if (props.menuPosition === 'left') {
+        menuRef.current.style.left = "".concat(triggerElementCoordinates.left, "px");
+        menuRef.current.style.removeProperty('right');
+      } else {
+        menuRef.current.style.right = "".concat(window.innerWidth - triggerElementCoordinates.right, "px");
+        menuRef.current.style.removeProperty('left');
+      }
+      menuRef.current.style.maxHeight = props.menuMaxHeight ? "".concat(props.menuMaxHeight, "px") : _concatInstanceProperty__default["default"](_context = _concatInstanceProperty__default["default"](_context2 = "calc(".concat(window.innerHeight - (triggerElementCoordinates.top + triggerElementCoordinates.height), "px - ")).call(_context2, marginTop, " - ")).call(_context, boxShadowBottomSize, ")");
     }
-  }, [props.isOpen, props.menuPosition, props.triggerElementRef]);
+  }, [props.isOpen, props.menuPosition, props.triggerElementRef, props.menuMaxHeight]);
   return jsxRuntime.jsx("div", {
     css: getDropdownMenuBaseStyles(props),
     style: props.customStyles,
@@ -77,6 +87,7 @@ const DropdownContentMenu = props => {
     horizontalConstraint: props.horizontalConstraint,
     isOpen: props.isOpen,
     menuPosition: props.menuPosition,
+    menuMaxHeight: props.menuMaxHeight,
     triggerElementRef: props.triggerElementRef,
     children: props.children
   });
@@ -87,6 +98,7 @@ const DropdownListMenu = props => {
     horizontalConstraint: props.horizontalConstraint,
     isOpen: props.isOpen,
     menuPosition: props.menuPosition,
+    menuMaxHeight: props.menuMaxHeight,
     triggerElementRef: props.triggerElementRef,
     children: jsxRuntime.jsx(SpacingsStack__default["default"], {
       scale: "xs",
@@ -97,7 +109,7 @@ const DropdownListMenu = props => {
 DropdownListMenu.propTypes = {};
 function getDropdownListMenuItemStyles(props) {
-  return [/*#__PURE__*/react.css("display:block;text-align:left;text-wrap:wrap;width:100%;padding:", designSystem.designTokens.spacing20, " ", designSystem.designTokens.spacing30, ";background-color:", designSystem.designTokens.colorSurface, ";&:first-of-type{border-radius:", designSystem.designTokens.borderRadius6, " ", designSystem.designTokens.borderRadius6, " 0 0;}&:last-of-type{border-radius:0 0 ", designSystem.designTokens.borderRadius6, " ", designSystem.designTokens.borderRadius6, ";}&:hover{background-color:", designSystem.designTokens.colorPrimary98, ";}" + ("" ), "" ), props.isDisabled && /*#__PURE__*/react.css("color:", designSystem.designTokens.colorNeutral, ";" + ("" ), "" )];
+  return [/*#__PURE__*/react$1.css("display:block;text-align:left;text-wrap:wrap;width:100%;padding:", designSystem.designTokens.spacing20, " ", designSystem.designTokens.spacing30, ";background-color:", designSystem.designTokens.colorSurface, ";&:first-of-type{border-radius:", designSystem.designTokens.borderRadius6, " ", designSystem.designTokens.borderRadius6, " 0 0;}&:last-of-type{border-radius:0 0 ", designSystem.designTokens.borderRadius6, " ", designSystem.designTokens.borderRadius6, ";}&:hover{background-color:", designSystem.designTokens.colorPrimary98, ";}" + ("" ), "" ), props.isDisabled && /*#__PURE__*/react$1.css("color:", designSystem.designTokens.colorNeutral, ";" + ("" ), "" )];
 }
 function DropdownListMenuItem(props) {
   const _useDropdownMenuConte = useDropdownMenuContext(),
@@ -115,6 +127,40 @@ function DropdownListMenuItem(props) {
   });
 }
+function getScrollableParent(element) {
+  if (!element) {
+    return null;
+  }
+  const overflowY = window.getComputedStyle(element).overflowY;
+  const isScrollable = overflowY !== 'visible' && overflowY !== 'hidden';
+  if (isScrollable && element.scrollHeight >= element.clientHeight) {
+    return element;
+  }
+  return getScrollableParent(element.parentElement);
+}
+function useScrollBlock(isOpen, triggerRef) {
+  const scrollableParentRef = react.useRef();
+  react.useEffect(() => {
+    if (!scrollableParentRef.current) {
+      scrollableParentRef.current = getScrollableParent(triggerRef.current);
+    }
+    const scrollableParent = scrollableParentRef.current;
+    if (scrollableParent && isOpen) {
+      scrollableParent.setAttribute('data-prev-scroll', scrollableParent.style.overflowY);
+      scrollableParent.style.overflowY = 'hidden';
+    }
+    return () => {
+      // The cleanup effect runs after the component is unmounted but also everytime
+      // the dependency array changes. We need to manage both to manage opening/closing
+      // the dropdown but also to manage the the dropdown is opened and the component
+      // is unmounted. For instance, when navigating to another page client-side.
+      if (scrollableParent && isOpen) {
+        const prevScroll = scrollableParent.getAttribute('data-prev-scroll');
+        scrollableParent.style.overflowY = prevScroll || '';
+      }
+    };
+  }, [isOpen, scrollableParentRef, triggerRef]);
+}
 const defaultProps = {
   menuHorizontalConstraint: 'auto',
   menuPosition: 'left',
@@ -131,40 +177,33 @@ function DropdownMenu(props) {
     _useToggleState2 = _slicedToArray(_useToggleState, 2),
     isOpen = _useToggleState2[0],
     toggle = _useToggleState2[1];
-  const triggerRef = React__default["default"].useRef(null);
+  const triggerRef = react.useRef(null);
   // We use the context so children can toggle the dropdown
-  const context = React.useMemo(() => ({
+  const context = react.useMemo(() => ({
     isOpen,
     toggle
   }), [isOpen, toggle]);
   const Menu = props.menuType === 'default' ? DropdownContentMenu : DropdownListMenu;
   // Close the dropdown when clicking outside of it
-  const handleGlobalClick = React.useCallback(event => {
+  const handleGlobalClick = react.useCallback(event => {
     var _triggerElement$paren;
     const triggerElement = triggerRef.current;
     if (isOpen && triggerElement && event.target !== triggerElement && window.document.contains(event.target) && !((_triggerElement$paren = triggerElement.parentElement) !== null && _triggerElement$paren !== void 0 && _triggerElement$paren.contains(event.target))) {
       toggle(false);
     }
   }, [triggerRef, toggle, isOpen]);
-  React.useEffect(() => {
+  react.useEffect(() => {
     window.addEventListener('click', handleGlobalClick);
     return () => {
       window.removeEventListener('click', handleGlobalClick);
     };
   }, [handleGlobalClick]);
-  // Block scrolling when the dropdown is open
-  React.useEffect(() => {
-    if (isOpen) {
-      window.document.body.style.overflow = 'hidden';
-    } else {
-      window.document.body.style.overflow = 'initial';
-    }
-    return () => {
-      window.document.body.style.overflow = 'initial';
-    };
-  }, [isOpen]);
+  // Block scrolling when the dropdown is open.
+  // We do this to avoid requiring dropdown rerendering while the user scrolls.
+  useScrollBlock(isOpen, triggerRef);
   return jsxRuntime.jsx(DropdownMenuContext.Provider, {
     value: context,
     children: jsxRuntime.jsxs(Container, {
@@ -176,6 +215,7 @@ function DropdownMenu(props) {
         horizontalConstraint: props.menuHorizontalConstraint,
         isOpen: isOpen,
         menuPosition: props.menuPosition,
+        menuMaxHeight: props.menuMaxHeight,
         triggerElementRef: triggerRef,
         children: props.children
       })]
@@ -187,7 +227,7 @@ DropdownMenu.defaultProps = defaultProps;
 DropdownMenu.ListMenuItem = DropdownListMenuItem;
 // NOTE: This string will be replaced on build time with the package version.
-var version = "19.2.0";
+var version = "19.3.1";
 exports["default"] = DropdownMenu;
 exports.useDropdownMenuContext = useDropdownMenuContext;

package/dist/commercetools-uikit-dropdown-menu.esm.js CHANGED Viewed

@@ -1,9 +1,10 @@
 import _slicedToArray from '@babel/runtime-corejs3/helpers/esm/slicedToArray';
 import _styled from '@emotion/styled/base';
 import _pt from 'prop-types';
-import React, { useContext, createContext, forwardRef, useRef, useLayoutEffect, useMemo, useCallback, useEffect } from 'react';
+import { useContext, createContext, forwardRef, useRef, useLayoutEffect, useMemo, useCallback, useEffect } from 'react';
 import { useToggleState } from '@commercetools-uikit/hooks';
 import { jsx, jsxs } from '@emotion/react/jsx-runtime';
+import _concatInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/concat';
 import { css } from '@emotion/react';
 import { designTokens } from '@commercetools-uikit/design-system';
 import Constraints from '@commercetools-uikit/constraints';
@@ -35,20 +36,29 @@ const DropDownTrigger = /*#__PURE__*/forwardRef((props, ref) => {
 DropDownTrigger.displayName = 'DropDownTrigger';
 var DropdownTrigger = DropDownTrigger;
+const boxShadowBottomSize = '5px';
+const marginTop = designTokens.spacing20;
 function getDropdownMenuBaseStyles(params) {
-  return /*#__PURE__*/css("background-color:", designTokens.colorSurface, ";border:1px solid ", designTokens.colorSurface, ";border-radius:", designTokens.borderRadius4, ";box-shadow:0 2px 5px 0px rgba(0, 0, 0, 0.15);display:", params.isOpen ? 'block' : 'none', ";margin-top:", designTokens.spacing20, ";max-width:", Constraints.getMaxPropTokenValue(params.horizontalConstraint), ";position:fixed;width:", params.horizontalConstraint === 'auto' ? 'auto' : '100%', ";z-index:5;" + (process.env.NODE_ENV === "production" ? "" : ";label:getDropdownMenuBaseStyles;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImRyb3Bkb3duLW1lbnUtbWVudS50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBZ0JZIiwiZmlsZSI6ImRyb3Bkb3duLW1lbnUtbWVudS50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1xuICBDU1NQcm9wZXJ0aWVzLFxuICBSZWFjdE5vZGUsXG4gIFJlZk9iamVjdCxcbiAgdXNlTGF5b3V0RWZmZWN0LFxuICB1c2VSZWYsXG59IGZyb20gJ3JlYWN0JztcbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCB7IGRlc2lnblRva2VucyB9IGZyb20gJ0Bjb21tZXJjZXRvb2xzLXVpa2l0L2Rlc2lnbi1zeXN0ZW0nO1xuaW1wb3J0IENvbnN0cmFpbnRzLCB7IHR5cGUgVE1heFByb3AgfSBmcm9tICdAY29tbWVyY2V0b29scy11aWtpdC9jb25zdHJhaW50cyc7XG5pbXBvcnQgU3BhY2luZ3NTdGFjayBmcm9tICdAY29tbWVyY2V0b29scy11aWtpdC9zcGFjaW5ncy1zdGFjayc7XG5cbmV4cG9ydCBmdW5jdGlvbiBnZXREcm9wZG93bk1lbnVCYXNlU3R5bGVzKHBhcmFtczoge1xuICBpc09wZW46IGJvb2xlYW47XG4gIGhvcml6b250YWxDb25zdHJhaW50OiBUTWF4UHJvcDtcbn0pIHtcbiAgcmV0dXJuIGNzc2BcbiAgICBiYWNrZ3JvdW5kLWNvbG9yOiAke2Rlc2lnblRva2Vucy5jb2xvclN1cmZhY2V9O1xuICAgIGJvcmRlcjogMXB4IHNvbGlkICR7ZGVzaWduVG9rZW5zLmNvbG9yU3VyZmFjZX07XG4gICAgYm9yZGVyLXJhZGl1czogJHtkZXNpZ25Ub2tlbnMuYm9yZGVyUmFkaXVzNH07XG4gICAgYm94LXNoYWRvdzogMCAycHggNXB4IDBweCByZ2JhKDAsIDAsIDAsIDAuMTUpO1xuICAgIGRpc3BsYXk6ICR7cGFyYW1zLmlzT3BlbiA/ICdibG9jaycgOiAnbm9uZSd9O1xuICAgIG1hcmdpbi10b3A6ICR7ZGVzaWduVG9rZW5zLnNwYWNpbmcyMH07XG4gICAgbWF4LXdpZHRoOiAke0NvbnN0cmFpbnRzLmdldE1heFByb3BUb2tlblZhbHVlKHBhcmFtcy5ob3Jpem9udGFsQ29uc3RyYWludCl9O1xuICAgIHBvc2l0aW9uOiBmaXhlZDtcbiAgICB3aWR0aDogJHtwYXJhbXMuaG9yaXpvbnRhbENvbnN0cmFpbnQgPT09ICdhdXRvJyA/ICdhdXRvJyA6ICcxMDAlJ307XG4gICAgei1pbmRleDogNTtcbiAgYDtcbn1cblxudHlwZSBURHJvcGRvd25CYXNlTWVudVByb3BzID0ge1xuICBjaGlsZHJlbjogUmVhY3ROb2RlO1xuICBjdXN0b21TdHlsZXM/OiBDU1NQcm9wZXJ0aWVzO1xuICBob3Jpem9udGFsQ29uc3RyYWludDogVE1heFByb3A7XG4gIGlzT3BlbjogYm9vbGVhbjtcbiAgbWVudVBvc2l0aW9uOiAnbGVmdCcgfCAncmlnaHQnO1xuICB0cmlnZ2VyRWxlbWVudFJlZjogUmVmT2JqZWN0PEhUTUxFbGVtZW50Pjtcbn07XG5mdW5jdGlvbiBEcm9wZG93bkJhc2VNZW51KHByb3BzOiBURHJvcGRvd25CYXNlTWVudVByb3BzKSB7XG4gIGNvbnN0IG1lbnVSZWYgPSB1c2VSZWY8SFRNTERpdkVsZW1lbnQ+KG51bGwpO1xuXG4gIHVzZUxheW91dEVmZmVjdCgoKSA9PiB7XG4gICAgLy8gVXBkYXRlIHRoZSBwb3NpdGlvbiBvZiB0aGUgbWVudSB3aGVuIGl0IGlzIG9wZW5cbiAgICBpZiAocHJvcHMuaXNPcGVuICYmIHByb3BzLnRyaWdnZXJFbGVtZW50UmVmLmN1cnJlbnQgJiYgbWVudVJlZi5jdXJyZW50KSB7XG4gICAgICBjb25zdCB0cmlnZ2VyRWxlbWVudENvb3JkaW5hdGVzID1cbiAgICAgICAgcHJvcHMudHJpZ2dlckVsZW1lbnRSZWYuY3VycmVudC5nZXRCb3VuZGluZ0NsaWVudFJlY3QoKTtcbiAgICAgIGNvbnN0IG1lbnVFbGVtZW50Q29vcmRpbmF0ZXMgPSBtZW51UmVmLmN1cnJlbnQuZ2V0Qm91bmRpbmdDbGllbnRSZWN0KCk7XG5cbiAgICAgIG1lbnVSZWYuY3VycmVudC5zdHlsZS50b3AgPSBgJHtcbiAgICAgICAgdHJpZ2dlckVsZW1lbnRDb29yZGluYXRlcy50b3AgKyB0cmlnZ2VyRWxlbWVudENvb3JkaW5hdGVzLmhlaWdodFxuICAgICAgfXB4YDtcbiAgICAgIG1lbnVSZWYuY3VycmVudC5zdHlsZS5sZWZ0ID1cbiAgICAgICAgcHJvcHMubWVudVBvc2l0aW9uID09PSAnbGVmdCdcbiAgICAgICAgICA/IGAke3RyaWdnZXJFbGVtZW50Q29vcmRpbmF0ZXMubGVmdH1weGBcbiAgICAgICAgICA6IGAke1xuICAgICAgICAgICAgICB0cmlnZ2VyRWxlbWVudENvb3JkaW5hdGVzLmxlZnQgK1xuICAgICAgICAgICAgICB0cmlnZ2VyRWxlbWVudENvb3JkaW5hdGVzLndpZHRoIC1cbiAgICAgICAgICAgICAgbWVudUVsZW1lbnRDb29yZGluYXRlcy53aWR0aFxuICAgICAgICAgICAgfXB4YDtcbiAgICB9XG4gIH0sIFtwcm9wcy5pc09wZW4sIHByb3BzLm1lbnVQb3NpdGlvbiwgcHJvcHMudHJpZ2dlckVsZW1lbnRSZWZdKTtcblxuICByZXR1cm4gKFxuICAgIDxkaXZcbiAgICAgIGNzcz17Z2V0RHJvcGRvd25NZW51QmFzZVN0eWxlcyhwcm9wcyl9XG4gICAgICBzdHlsZT17cHJvcHMuY3VzdG9tU3R5bGVzfVxuICAgICAgcmVmPXttZW51UmVmfVxuICAgID5cbiAgICAgIHtwcm9wcy5jaGlsZHJlbn1cbiAgICA8L2Rpdj5cbiAgKTtcbn1cblxuZXhwb3J0IHR5cGUgVERyb3Bkb3duQ29udGVudE1lbnVQcm9wcyA9IHtcbiAgY2hpbGRyZW46IFJlYWN0Tm9kZTtcbiAgaG9yaXpvbnRhbENvbnN0cmFpbnQ6IFRNYXhQcm9wO1xuICBtZW51UG9zaXRpb246ICdsZWZ0JyB8ICdyaWdodCc7XG4gIGlzT3BlbjogYm9vbGVhbjtcbiAgdHJpZ2dlckVsZW1lbnRSZWY6IFJlZk9iamVjdDxIVE1MRWxlbWVudD47XG59O1xuZXhwb3J0IGNvbnN0IERyb3Bkb3duQ29udGVudE1lbnUgPSAocHJvcHM6IFREcm9wZG93bkNvbnRlbnRNZW51UHJvcHMpID0+IHtcbiAgcmV0dXJuIChcbiAgICA8RHJvcGRvd25CYXNlTWVudVxuICAgICAgY3VzdG9tU3R5bGVzPXt7XG4gICAgICAgIHBhZGRpbmc6IGRlc2lnblRva2Vucy5zcGFjaW5nMzAsXG4gICAgICB9fVxuICAgICAgaG9yaXpvbnRhbENvbnN0cmFpbnQ9e3Byb3BzLmhvcml6b250YWxDb25zdHJhaW50fVxuICAgICAgaXNPcGVuPXtwcm9wcy5pc09wZW59XG4gICAgICBtZW51UG9zaXRpb249e3Byb3BzLm1lbnVQb3NpdGlvbn1cbiAgICAgIHRyaWdnZXJFbGVtZW50UmVmPXtwcm9wcy50cmlnZ2VyRWxlbWVudFJlZn1cbiAgICA+XG4gICAgICB7cHJvcHMuY2hpbGRyZW59XG4gICAgPC9Ecm9wZG93bkJhc2VNZW51PlxuICApO1xufTtcblxuZXhwb3J0IHR5cGUgVERyb3Bkb3duTGlzdE1lbnVQcm9wcyA9IHtcbiAgY2hpbGRyZW46IFJlYWN0Tm9kZTtcbiAgaG9yaXpvbnRhbENvbnN0cmFpbnQ6IFRNYXhQcm9wO1xuICBtZW51UG9zaXRpb246ICdsZWZ0JyB8ICdyaWdodCc7XG4gIGlzT3BlbjogYm9vbGVhbjtcbiAgdHJpZ2dlckVsZW1lbnRSZWY6IFJlZk9iamVjdDxIVE1MRWxlbWVudD47XG59O1xuZXhwb3J0IGNvbnN0IERyb3Bkb3duTGlzdE1lbnUgPSAocHJvcHM6IFREcm9wZG93bkxpc3RNZW51UHJvcHMpID0+IHtcbiAgcmV0dXJuIChcbiAgICA8RHJvcGRvd25CYXNlTWVudVxuICAgICAgaG9yaXpvbnRhbENvbnN0cmFpbnQ9e3Byb3BzLmhvcml6b250YWxDb25zdHJhaW50fVxuICAgICAgaXNPcGVuPXtwcm9wcy5pc09wZW59XG4gICAgICBtZW51UG9zaXRpb249e3Byb3BzLm1lbnVQb3NpdGlvbn1cbiAgICAgIHRyaWdnZXJFbGVtZW50UmVmPXtwcm9wcy50cmlnZ2VyRWxlbWVudFJlZn1cbiAgICA+XG4gICAgICA8U3BhY2luZ3NTdGFjayBzY2FsZT1cInhzXCI+e3Byb3BzLmNoaWxkcmVufTwvU3BhY2luZ3NTdGFjaz5cbiAgICA8L0Ryb3Bkb3duQmFzZU1lbnU+XG4gICk7XG59O1xuIl19 */");
+  return /*#__PURE__*/css("background-color:", designTokens.colorSurface, ";border:1px solid ", designTokens.colorSurface, ";border-radius:", designTokens.borderRadius4, ";box-shadow:0 2px ", boxShadowBottomSize, " 0px rgba(0, 0, 0, 0.15);display:", params.isOpen ? 'block' : 'none', ";margin-top:", marginTop, ";max-width:", Constraints.getMaxPropTokenValue(params.horizontalConstraint), ";overflow-y:auto;position:fixed;width:", params.horizontalConstraint === 'auto' ? 'auto' : '100%', ";z-index:5;" + (process.env.NODE_ENV === "production" ? "" : ";label:getDropdownMenuBaseStyles;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImRyb3Bkb3duLW1lbnUtbWVudS50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBc0JZIiwiZmlsZSI6ImRyb3Bkb3duLW1lbnUtbWVudS50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1xuICBDU1NQcm9wZXJ0aWVzLFxuICBSZWFjdE5vZGUsXG4gIFJlZk9iamVjdCxcbiAgdXNlTGF5b3V0RWZmZWN0LFxuICB1c2VSZWYsXG59IGZyb20gJ3JlYWN0JztcbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCB7IGRlc2lnblRva2VucyB9IGZyb20gJ0Bjb21tZXJjZXRvb2xzLXVpa2l0L2Rlc2lnbi1zeXN0ZW0nO1xuaW1wb3J0IENvbnN0cmFpbnRzLCB7IHR5cGUgVE1heFByb3AgfSBmcm9tICdAY29tbWVyY2V0b29scy11aWtpdC9jb25zdHJhaW50cyc7XG5pbXBvcnQgU3BhY2luZ3NTdGFjayBmcm9tICdAY29tbWVyY2V0b29scy11aWtpdC9zcGFjaW5ncy1zdGFjayc7XG5cbi8vIFdlIGRlY2xhcmUgdGhpcyBzdHlsZSBwcm9wZXJ0aWVzIGhlcmUgYmVjYXVzZSB3ZSBuZWVkIHRoZW0gYm90aCBmb3IgaW5pdGlhbCBjb21wb25lbnQgc3R5bGluZ1xuLy8gYnV0IGFsc28gZm9yIGNhbGN1bGF0aW5nIHRoZSBkZWZhdWx0IG1heCBoZWlnaHQgb2YgdGhlIGRyb3Bkb3duIG1lbnUgc28gd2UgbWFrZSBzdXJlIGl0IGZpdHNcbi8vIHdpdGhpbiB0aGUgdmlld3BvcnQuXG5jb25zdCBib3hTaGFkb3dCb3R0b21TaXplID0gJzVweCc7XG5jb25zdCBtYXJnaW5Ub3AgPSBkZXNpZ25Ub2tlbnMuc3BhY2luZzIwO1xuXG5leHBvcnQgZnVuY3Rpb24gZ2V0RHJvcGRvd25NZW51QmFzZVN0eWxlcyhwYXJhbXM6IHtcbiAgaXNPcGVuOiBib29sZWFuO1xuICBob3Jpem9udGFsQ29uc3RyYWludDogVE1heFByb3A7XG59KSB7XG4gIHJldHVybiBjc3NgXG4gICAgYmFja2dyb3VuZC1jb2xvcjogJHtkZXNpZ25Ub2tlbnMuY29sb3JTdXJmYWNlfTtcbiAgICBib3JkZXI6IDFweCBzb2xpZCAke2Rlc2lnblRva2Vucy5jb2xvclN1cmZhY2V9O1xuICAgIGJvcmRlci1yYWRpdXM6ICR7ZGVzaWduVG9rZW5zLmJvcmRlclJhZGl1czR9O1xuICAgIGJveC1zaGFkb3c6IDAgMnB4ICR7Ym94U2hhZG93Qm90dG9tU2l6ZX0gMHB4IHJnYmEoMCwgMCwgMCwgMC4xNSk7XG4gICAgZGlzcGxheTogJHtwYXJhbXMuaXNPcGVuID8gJ2Jsb2NrJyA6ICdub25lJ307XG4gICAgbWFyZ2luLXRvcDogJHttYXJnaW5Ub3B9O1xuICAgIG1heC13aWR0aDogJHtDb25zdHJhaW50cy5nZXRNYXhQcm9wVG9rZW5WYWx1ZShwYXJhbXMuaG9yaXpvbnRhbENvbnN0cmFpbnQpfTtcbiAgICBvdmVyZmxvdy15OiBhdXRvO1xuICAgIHBvc2l0aW9uOiBmaXhlZDtcbiAgICB3aWR0aDogJHtwYXJhbXMuaG9yaXpvbnRhbENvbnN0cmFpbnQgPT09ICdhdXRvJyA/ICdhdXRvJyA6ICcxMDAlJ307XG4gICAgei1pbmRleDogNTtcbiAgYDtcbn1cblxudHlwZSBURHJvcGRvd25CYXNlTWVudVByb3BzID0ge1xuICBjaGlsZHJlbjogUmVhY3ROb2RlO1xuICBjdXN0b21TdHlsZXM/OiBDU1NQcm9wZXJ0aWVzO1xuICBob3Jpem9udGFsQ29uc3RyYWludDogVE1heFByb3A7XG4gIGlzT3BlbjogYm9vbGVhbjtcbiAgbWVudVBvc2l0aW9uOiAnbGVmdCcgfCAncmlnaHQnO1xuICBtZW51TWF4SGVpZ2h0PzogbnVtYmVyO1xuICB0cmlnZ2VyRWxlbWVudFJlZjogUmVmT2JqZWN0PEhUTUxFbGVtZW50Pjtcbn07XG5mdW5jdGlvbiBEcm9wZG93bkJhc2VNZW51KHByb3BzOiBURHJvcGRvd25CYXNlTWVudVByb3BzKSB7XG4gIGNvbnN0IG1lbnVSZWYgPSB1c2VSZWY8SFRNTERpdkVsZW1lbnQ+KG51bGwpO1xuXG4gIHVzZUxheW91dEVmZmVjdCgoKSA9PiB7XG4gICAgLy8gVXBkYXRlIHRoZSBwb3NpdGlvbiBvZiB0aGUgbWVudSB3aGVuIGl0IGlzIG9wZW5cbiAgICBpZiAocHJvcHMuaXNPcGVuICYmIHByb3BzLnRyaWdnZXJFbGVtZW50UmVmLmN1cnJlbnQgJiYgbWVudVJlZi5jdXJyZW50KSB7XG4gICAgICBjb25zdCB0cmlnZ2VyRWxlbWVudENvb3JkaW5hdGVzID1cbiAgICAgICAgcHJvcHMudHJpZ2dlckVsZW1lbnRSZWYuY3VycmVudC5nZXRCb3VuZGluZ0NsaWVudFJlY3QoKTtcblxuICAgICAgbWVudVJlZi5jdXJyZW50LnN0eWxlLnRvcCA9IGAke1xuICAgICAgICB0cmlnZ2VyRWxlbWVudENvb3JkaW5hdGVzLnRvcCArIHRyaWdnZXJFbGVtZW50Q29vcmRpbmF0ZXMuaGVpZ2h0XG4gICAgICB9cHhgO1xuICAgICAgaWYgKHByb3BzLm1lbnVQb3NpdGlvbiA9PT0gJ2xlZnQnKSB7XG4gICAgICAgIG1lbnVSZWYuY3VycmVudC5zdHlsZS5sZWZ0ID0gYCR7dHJpZ2dlckVsZW1lbnRDb29yZGluYXRlcy5sZWZ0fXB4YDtcbiAgICAgICAgbWVudVJlZi5jdXJyZW50LnN0eWxlLnJlbW92ZVByb3BlcnR5KCdyaWdodCcpO1xuICAgICAgfSBlbHNlIHtcbiAgICAgICAgbWVudVJlZi5jdXJyZW50LnN0eWxlLnJpZ2h0ID0gYCR7XG4gICAgICAgICAgd2luZG93LmlubmVyV2lkdGggLSB0cmlnZ2VyRWxlbWVudENvb3JkaW5hdGVzLnJpZ2h0XG4gICAgICAgIH1weGA7XG4gICAgICAgIG1lbnVSZWYuY3VycmVudC5zdHlsZS5yZW1vdmVQcm9wZXJ0eSgnbGVmdCcpO1xuICAgICAgfVxuICAgICAgbWVudVJlZi5jdXJyZW50LnN0eWxlLm1heEhlaWdodCA9IHByb3BzLm1lbnVNYXhIZWlnaHRcbiAgICAgICAgPyBgJHtwcm9wcy5tZW51TWF4SGVpZ2h0fXB4YFxuICAgICAgICA6IGBjYWxjKCR7XG4gICAgICAgICAgICB3aW5kb3cuaW5uZXJIZWlnaHQgLVxuICAgICAgICAgICAgKHRyaWdnZXJFbGVtZW50Q29vcmRpbmF0ZXMudG9wICsgdHJpZ2dlckVsZW1lbnRDb29yZGluYXRlcy5oZWlnaHQpXG4gICAgICAgICAgfXB4IC0gJHttYXJnaW5Ub3B9IC0gJHtib3hTaGFkb3dCb3R0b21TaXplfSlgO1xuICAgIH1cbiAgfSwgW1xuICAgIHByb3BzLmlzT3BlbixcbiAgICBwcm9wcy5tZW51UG9zaXRpb24sXG4gICAgcHJvcHMudHJpZ2dlckVsZW1lbnRSZWYsXG4gICAgcHJvcHMubWVudU1heEhlaWdodCxcbiAgXSk7XG5cbiAgcmV0dXJuIChcbiAgICA8ZGl2XG4gICAgICBjc3M9e2dldERyb3Bkb3duTWVudUJhc2VTdHlsZXMocHJvcHMpfVxuICAgICAgc3R5bGU9e3Byb3BzLmN1c3RvbVN0eWxlc31cbiAgICAgIHJlZj17bWVudVJlZn1cbiAgICA+XG4gICAgICB7cHJvcHMuY2hpbGRyZW59XG4gICAgPC9kaXY+XG4gICk7XG59XG5cbmV4cG9ydCB0eXBlIFREcm9wZG93bkNvbnRlbnRNZW51UHJvcHMgPSB7XG4gIGNoaWxkcmVuOiBSZWFjdE5vZGU7XG4gIGhvcml6b250YWxDb25zdHJhaW50OiBUTWF4UHJvcDtcbiAgbWVudVBvc2l0aW9uOiAnbGVmdCcgfCAncmlnaHQnO1xuICBtZW51TWF4SGVpZ2h0PzogbnVtYmVyO1xuICBpc09wZW46IGJvb2xlYW47XG4gIHRyaWdnZXJFbGVtZW50UmVmOiBSZWZPYmplY3Q8SFRNTEVsZW1lbnQ+O1xufTtcbmV4cG9ydCBjb25zdCBEcm9wZG93bkNvbnRlbnRNZW51ID0gKHByb3BzOiBURHJvcGRvd25Db250ZW50TWVudVByb3BzKSA9PiB7XG4gIHJldHVybiAoXG4gICAgPERyb3Bkb3duQmFzZU1lbnVcbiAgICAgIGN1c3RvbVN0eWxlcz17e1xuICAgICAgICBwYWRkaW5nOiBkZXNpZ25Ub2tlbnMuc3BhY2luZzMwLFxuICAgICAgfX1cbiAgICAgIGhvcml6b250YWxDb25zdHJhaW50PXtwcm9wcy5ob3Jpem9udGFsQ29uc3RyYWludH1cbiAgICAgIGlzT3Blbj17cHJvcHMuaXNPcGVufVxuICAgICAgbWVudVBvc2l0aW9uPXtwcm9wcy5tZW51UG9zaXRpb259XG4gICAgICBtZW51TWF4SGVpZ2h0PXtwcm9wcy5tZW51TWF4SGVpZ2h0fVxuICAgICAgdHJpZ2dlckVsZW1lbnRSZWY9e3Byb3BzLnRyaWdnZXJFbGVtZW50UmVmfVxuICAgID5cbiAgICAgIHtwcm9wcy5jaGlsZHJlbn1cbiAgICA8L0Ryb3Bkb3duQmFzZU1lbnU+XG4gICk7XG59O1xuXG5leHBvcnQgdHlwZSBURHJvcGRvd25MaXN0TWVudVByb3BzID0ge1xuICBjaGlsZHJlbjogUmVhY3ROb2RlO1xuICBob3Jpem9udGFsQ29uc3RyYWludDogVE1heFByb3A7XG4gIG1lbnVQb3NpdGlvbjogJ2xlZnQnIHwgJ3JpZ2h0JztcbiAgbWVudU1heEhlaWdodD86IG51bWJlcjtcbiAgaXNPcGVuOiBib29sZWFuO1xuICB0cmlnZ2VyRWxlbWVudFJlZjogUmVmT2JqZWN0PEhUTUxFbGVtZW50Pjtcbn07XG5leHBvcnQgY29uc3QgRHJvcGRvd25MaXN0TWVudSA9IChwcm9wczogVERyb3Bkb3duTGlzdE1lbnVQcm9wcykgPT4ge1xuICByZXR1cm4gKFxuICAgIDxEcm9wZG93bkJhc2VNZW51XG4gICAgICBob3Jpem9udGFsQ29uc3RyYWludD17cHJvcHMuaG9yaXpvbnRhbENvbnN0cmFpbnR9XG4gICAgICBpc09wZW49e3Byb3BzLmlzT3Blbn1cbiAgICAgIG1lbnVQb3NpdGlvbj17cHJvcHMubWVudVBvc2l0aW9ufVxuICAgICAgbWVudU1heEhlaWdodD17cHJvcHMubWVudU1heEhlaWdodH1cbiAgICAgIHRyaWdnZXJFbGVtZW50UmVmPXtwcm9wcy50cmlnZ2VyRWxlbWVudFJlZn1cbiAgICA+XG4gICAgICA8U3BhY2luZ3NTdGFjayBzY2FsZT1cInhzXCI+e3Byb3BzLmNoaWxkcmVufTwvU3BhY2luZ3NTdGFjaz5cbiAgICA8L0Ryb3Bkb3duQmFzZU1lbnU+XG4gICk7XG59O1xuIl19 */");
 }
 function DropdownBaseMenu(props) {
   const menuRef = useRef(null);
   useLayoutEffect(() => {
     // Update the position of the menu when it is open
     if (props.isOpen && props.triggerElementRef.current && menuRef.current) {
+      var _context, _context2;
       const triggerElementCoordinates = props.triggerElementRef.current.getBoundingClientRect();
-      const menuElementCoordinates = menuRef.current.getBoundingClientRect();
       menuRef.current.style.top = "".concat(triggerElementCoordinates.top + triggerElementCoordinates.height, "px");
-      menuRef.current.style.left = props.menuPosition === 'left' ? "".concat(triggerElementCoordinates.left, "px") : "".concat(triggerElementCoordinates.left + triggerElementCoordinates.width - menuElementCoordinates.width, "px");
+      if (props.menuPosition === 'left') {
+        menuRef.current.style.left = "".concat(triggerElementCoordinates.left, "px");
+        menuRef.current.style.removeProperty('right');
+      } else {
+        menuRef.current.style.right = "".concat(window.innerWidth - triggerElementCoordinates.right, "px");
+        menuRef.current.style.removeProperty('left');
+      }
+      menuRef.current.style.maxHeight = props.menuMaxHeight ? "".concat(props.menuMaxHeight, "px") : _concatInstanceProperty(_context = _concatInstanceProperty(_context2 = "calc(".concat(window.innerHeight - (triggerElementCoordinates.top + triggerElementCoordinates.height), "px - ")).call(_context2, marginTop, " - ")).call(_context, boxShadowBottomSize, ")");
     }
-  }, [props.isOpen, props.menuPosition, props.triggerElementRef]);
+  }, [props.isOpen, props.menuPosition, props.triggerElementRef, props.menuMaxHeight]);
   return jsx("div", {
     css: getDropdownMenuBaseStyles(props),
     style: props.customStyles,
@@ -62,6 +72,7 @@ DropdownBaseMenu.propTypes = process.env.NODE_ENV !== "production" ? {
   horizontalConstraint: _pt.any.isRequired,
   isOpen: _pt.bool.isRequired,
   menuPosition: _pt.oneOf(['left', 'right']).isRequired,
+  menuMaxHeight: _pt.number,
   triggerElementRef: _pt.any.isRequired
 } : {};
 const DropdownContentMenu = props => {
@@ -72,6 +83,7 @@ const DropdownContentMenu = props => {
     horizontalConstraint: props.horizontalConstraint,
     isOpen: props.isOpen,
     menuPosition: props.menuPosition,
+    menuMaxHeight: props.menuMaxHeight,
     triggerElementRef: props.triggerElementRef,
     children: props.children
   });
@@ -80,6 +92,7 @@ DropdownContentMenu.propTypes = process.env.NODE_ENV !== "production" ? {
   children: _pt.node.isRequired,
   horizontalConstraint: _pt.any.isRequired,
   menuPosition: _pt.oneOf(['left', 'right']).isRequired,
+  menuMaxHeight: _pt.number,
   isOpen: _pt.bool.isRequired,
   triggerElementRef: _pt.any.isRequired
 } : {};
@@ -88,6 +101,7 @@ const DropdownListMenu = props => {
     horizontalConstraint: props.horizontalConstraint,
     isOpen: props.isOpen,
     menuPosition: props.menuPosition,
+    menuMaxHeight: props.menuMaxHeight,
     triggerElementRef: props.triggerElementRef,
     children: jsx(SpacingsStack, {
       scale: "xs",
@@ -99,6 +113,7 @@ DropdownListMenu.propTypes = process.env.NODE_ENV !== "production" ? {
   children: _pt.node.isRequired,
   horizontalConstraint: _pt.any.isRequired,
   menuPosition: _pt.oneOf(['left', 'right']).isRequired,
+  menuMaxHeight: _pt.number,
   isOpen: _pt.bool.isRequired,
   triggerElementRef: _pt.any.isRequired
 } : {};
@@ -123,6 +138,40 @@ function DropdownListMenuItem(props) {
 }
 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)."; }
+function getScrollableParent(element) {
+  if (!element) {
+    return null;
+  }
+  const overflowY = window.getComputedStyle(element).overflowY;
+  const isScrollable = overflowY !== 'visible' && overflowY !== 'hidden';
+  if (isScrollable && element.scrollHeight >= element.clientHeight) {
+    return element;
+  }
+  return getScrollableParent(element.parentElement);
+}
+function useScrollBlock(isOpen, triggerRef) {
+  const scrollableParentRef = useRef();
+  useEffect(() => {
+    if (!scrollableParentRef.current) {
+      scrollableParentRef.current = getScrollableParent(triggerRef.current);
+    }
+    const scrollableParent = scrollableParentRef.current;
+    if (scrollableParent && isOpen) {
+      scrollableParent.setAttribute('data-prev-scroll', scrollableParent.style.overflowY);
+      scrollableParent.style.overflowY = 'hidden';
+    }
+    return () => {
+      // The cleanup effect runs after the component is unmounted but also everytime
+      // the dependency array changes. We need to manage both to manage opening/closing
+      // the dropdown but also to manage the the dropdown is opened and the component
+      // is unmounted. For instance, when navigating to another page client-side.
+      if (scrollableParent && isOpen) {
+        const prevScroll = scrollableParent.getAttribute('data-prev-scroll');
+        scrollableParent.style.overflowY = prevScroll || '';
+      }
+    };
+  }, [isOpen, scrollableParentRef, triggerRef]);
+}
 const defaultProps = {
   menuHorizontalConstraint: 'auto',
   menuPosition: 'left',
@@ -139,7 +188,7 @@ const Container = /*#__PURE__*/_styled("div", process.env.NODE_ENV === "producti
 } : {
   name: "1nrevy2",
   styles: "position:relative;display:inline-block",
-  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImRyb3Bkb3duLW1lbnUudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQW1ENEIiLCJmaWxlIjoiZHJvcGRvd24tbWVudS50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgUmVhY3QsIHtcbiAgdXNlQ2FsbGJhY2ssXG4gIHVzZUVmZmVjdCxcbiAgdXNlTWVtbyxcbiAgdHlwZSBSZWFjdEVsZW1lbnQsXG4gIHR5cGUgUmVhY3ROb2RlLFxufSBmcm9tICdyZWFjdCc7XG5pbXBvcnQgeyB1c2VUb2dnbGVTdGF0ZSB9IGZyb20gJ0Bjb21tZXJjZXRvb2xzLXVpa2l0L2hvb2tzJztcbmltcG9ydCB7IHR5cGUgVE1heFByb3AgfSBmcm9tICdAY29tbWVyY2V0b29scy11aWtpdC9jb25zdHJhaW50cyc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgRHJvcGRvd25NZW51Q29udGV4dCBmcm9tICcuL2NvbnRleHQnO1xuaW1wb3J0IERyb3Bkb3duVHJpZ2dlciBmcm9tICcuL3RyaWdnZXInO1xuaW1wb3J0IHtcbiAgRHJvcGRvd25Db250ZW50TWVudSxcbiAgRHJvcGRvd25MaXN0TWVudSxcbiAgRHJvcGRvd25MaXN0TWVudUl0ZW0sXG59IGZyb20gJy4vbWVudSc7XG5cbmV4cG9ydCB0eXBlIFREcm9wZG93bk1lbnVQcm9wcyA9IHtcbiAgLyoqXG4gICAqIFRoZSBwb3NpdGlvbiBvZiB0aGUgbWVudSByZWxhdGl2ZSB0byB0aGUgdHJpZ2dlciBlbGVtZW50LlxuICAgKi9cbiAgbWVudVBvc2l0aW9uPzogJ2xlZnQnIHwgJ3JpZ2h0JztcbiAgLyoqXG4gICAqIFRoZSBlbGVtZW50IHRoYXQgdHJpZ2dlcnMgdGhlIGRyb3Bkb3duLlxuICAgKi9cbiAgdHJpZ2dlckVsZW1lbnQ6IFJlYWN0RWxlbWVudDtcbiAgLyoqXG4gICAqIFRoZSB0eXBlIG9mIHRoZSBtZW51LlxuICAgKiBUaGUgJ2RlZmF1bHQnIHR5cGUganVzdCByZW5kZXJzIGEgZHJvcGRvd24gY29udGFpbmVyIGJ1dCB0aGUgJ2xpc3QnIHR5cGUgaXMgaW50ZW5kZWQgdG8gYmUgdXNlZCB3aXRoIHRoZSBEcm9wZG93bk1lbnUuTGlzdE1lbnVJdGVtIGNvbXBvbmVudC5cbiAgICovXG4gIG1lbnVUeXBlPzogJ2RlZmF1bHQnIHwgJ2xpc3QnO1xuICAvKipcbiAgICogVGhlIGhvcml6b250YWwgY29uc3RyYWludCBvZiB0aGUgbWVudS5cbiAgICovXG4gIG1lbnVIb3Jpem9udGFsQ29uc3RyYWludD86IFRNYXhQcm9wO1xuICAvKipcbiAgICogVGhlIGNvbnRlbnQgb2YgdGhlIGRyb3Bkb3duLlxuICAgKi9cbiAgY2hpbGRyZW46IFJlYWN0Tm9kZTtcbn07XG5cbmNvbnN0IGRlZmF1bHRQcm9wczogUGljazxcbiAgVERyb3Bkb3duTWVudVByb3BzLFxuICAnbWVudVBvc2l0aW9uJyB8ICdtZW51VHlwZScgfCAnbWVudUhvcml6b250YWxDb25zdHJhaW50J1xuPiA9IHtcbiAgbWVudUhvcml6b250YWxDb25zdHJhaW50OiAnYXV0bycsXG4gIG1lbnVQb3NpdGlvbjogJ2xlZnQnLFxuICBtZW51VHlwZTogJ2RlZmF1bHQnLFxufTtcblxuY29uc3QgQ29udGFpbmVyID0gc3R5bGVkLmRpdmBcbiAgcG9zaXRpb246IHJlbGF0aXZlO1xuICBkaXNwbGF5OiBpbmxpbmUtYmxvY2s7XG5gO1xuXG5mdW5jdGlvbiBEcm9wZG93bk1lbnUocHJvcHM6IFREcm9wZG93bk1lbnVQcm9wcykge1xuICBjb25zdCBbaXNPcGVuLCB0b2dnbGVdID0gdXNlVG9nZ2xlU3RhdGUoZmFsc2UpO1xuICBjb25zdCB0cmlnZ2VyUmVmID0gUmVhY3QudXNlUmVmPEhUTUxEaXZFbGVtZW50PihudWxsKTtcblxuICAvLyBXZSB1c2UgdGhlIGNvbnRleHQgc28gY2hpbGRyZW4gY2FuIHRvZ2dsZSB0aGUgZHJvcGRvd25cbiAgY29uc3QgY29udGV4dCA9IHVzZU1lbW8oXG4gICAgKCkgPT4gKHtcbiAgICAgIGlzT3BlbixcbiAgICAgIHRvZ2dsZSxcbiAgICB9KSxcbiAgICBbaXNPcGVuLCB0b2dnbGVdXG4gICk7XG4gIGNvbnN0IE1lbnUgPVxuICAgIHByb3BzLm1lbnVUeXBlID09PSAnZGVmYXVsdCcgPyBEcm9wZG93bkNvbnRlbnRNZW51IDogRHJvcGRvd25MaXN0TWVudTtcblxuICAvLyBDbG9zZSB0aGUgZHJvcGRvd24gd2hlbiBjbGlja2luZyBvdXRzaWRlIG9mIGl0XG4gIGNvbnN0IGhhbmRsZUdsb2JhbENsaWNrID0gdXNlQ2FsbGJhY2soXG4gICAgKGV2ZW50KSA9PiB7XG4gICAgICBjb25zdCB0cmlnZ2VyRWxlbWVudCA9IHRyaWdnZXJSZWYuY3VycmVudDtcbiAgICAgIGlmIChcbiAgICAgICAgaXNPcGVuICYmXG4gICAgICAgIHRyaWdnZXJFbGVtZW50ICYmXG4gICAgICAgIGV2ZW50LnRhcmdldCAhPT0gdHJpZ2dlckVsZW1lbnQgJiZcbiAgICAgICAgd2luZG93LmRvY3VtZW50LmNvbnRhaW5zKGV2ZW50LnRhcmdldCkgJiZcbiAgICAgICAgIXRyaWdnZXJFbGVtZW50LnBhcmVudEVsZW1lbnQ/LmNvbnRhaW5zKGV2ZW50LnRhcmdldClcbiAgICAgICkge1xuICAgICAgICB0b2dnbGUoZmFsc2UpO1xuICAgICAgfVxuICAgIH0sXG4gICAgW3RyaWdnZXJSZWYsIHRvZ2dsZSwgaXNPcGVuXVxuICApO1xuICB1c2VFZmZlY3QoKCkgPT4ge1xuICAgIHdpbmRvdy5hZGRFdmVudExpc3RlbmVyKCdjbGljaycsIGhhbmRsZUdsb2JhbENsaWNrKTtcbiAgICByZXR1cm4gKCkgPT4ge1xuICAgICAgd2luZG93LnJlbW92ZUV2ZW50TGlzdGVuZXIoJ2NsaWNrJywgaGFuZGxlR2xvYmFsQ2xpY2spO1xuICAgIH07XG4gIH0sIFtoYW5kbGVHbG9iYWxDbGlja10pO1xuICAvLyBCbG9jayBzY3JvbGxpbmcgd2hlbiB0aGUgZHJvcGRvd24gaXMgb3BlblxuICB1c2VFZmZlY3QoKCkgPT4ge1xuICAgIGlmIChpc09wZW4pIHtcbiAgICAgIHdpbmRvdy5kb2N1bWVudC5ib2R5LnN0eWxlLm92ZXJmbG93ID0gJ2hpZGRlbic7XG4gICAgfSBlbHNlIHtcbiAgICAgIHdpbmRvdy5kb2N1bWVudC5ib2R5LnN0eWxlLm92ZXJmbG93ID0gJ2luaXRpYWwnO1xuICAgIH1cbiAgICByZXR1cm4gKCkgPT4ge1xuICAgICAgd2luZG93LmRvY3VtZW50LmJvZHkuc3R5bGUub3ZlcmZsb3cgPSAnaW5pdGlhbCc7XG4gICAgfTtcbiAgfSwgW2lzT3Blbl0pO1xuXG4gIHJldHVybiAoXG4gICAgPERyb3Bkb3duTWVudUNvbnRleHQuUHJvdmlkZXIgdmFsdWU9e2NvbnRleHR9PlxuICAgICAgPENvbnRhaW5lcj5cbiAgICAgICAgPERyb3Bkb3duVHJpZ2dlciBvbkNsaWNrPXt0b2dnbGV9IHJlZj17dHJpZ2dlclJlZn0+XG4gICAgICAgICAge3Byb3BzLnRyaWdnZXJFbGVtZW50fVxuICAgICAgICA8L0Ryb3Bkb3duVHJpZ2dlcj5cblxuICAgICAgICA8TWVudVxuICAgICAgICAgIGhvcml6b250YWxDb25zdHJhaW50PXtwcm9wcy5tZW51SG9yaXpvbnRhbENvbnN0cmFpbnQhfVxuICAgICAgICAgIGlzT3Blbj17aXNPcGVufVxuICAgICAgICAgIG1lbnVQb3NpdGlvbj17cHJvcHMubWVudVBvc2l0aW9uIX1cbiAgICAgICAgICB0cmlnZ2VyRWxlbWVudFJlZj17dHJpZ2dlclJlZn1cbiAgICAgICAgPlxuICAgICAgICAgIHtwcm9wcy5jaGlsZHJlbn1cbiAgICAgICAgPC9NZW51PlxuICAgICAgPC9Db250YWluZXI+XG4gICAgPC9Ecm9wZG93bk1lbnVDb250ZXh0LlByb3ZpZGVyPlxuICApO1xufVxuRHJvcGRvd25NZW51LmRlZmF1bHRQcm9wcyA9IGRlZmF1bHRQcm9wcztcblxuRHJvcGRvd25NZW51Lkxpc3RNZW51SXRlbSA9IERyb3Bkb3duTGlzdE1lbnVJdGVtO1xuXG5leHBvcnQgZGVmYXVsdCBEcm9wZG93bk1lbnU7XG4iXX0= */",
+  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImRyb3Bkb3duLW1lbnUudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQW9HNEIiLCJmaWxlIjoiZHJvcGRvd24tbWVudS50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1xuICB1c2VDYWxsYmFjayxcbiAgdXNlRWZmZWN0LFxuICB1c2VNZW1vLFxuICB1c2VSZWYsXG4gIHR5cGUgUmVhY3RFbGVtZW50LFxuICB0eXBlIFJlYWN0Tm9kZSxcbiAgdHlwZSBSZWZPYmplY3QsXG59IGZyb20gJ3JlYWN0JztcbmltcG9ydCB7IHVzZVRvZ2dsZVN0YXRlIH0gZnJvbSAnQGNvbW1lcmNldG9vbHMtdWlraXQvaG9va3MnO1xuaW1wb3J0IHsgdHlwZSBUTWF4UHJvcCB9IGZyb20gJ0Bjb21tZXJjZXRvb2xzLXVpa2l0L2NvbnN0cmFpbnRzJztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCBEcm9wZG93bk1lbnVDb250ZXh0IGZyb20gJy4vY29udGV4dCc7XG5pbXBvcnQgRHJvcGRvd25UcmlnZ2VyIGZyb20gJy4vdHJpZ2dlcic7XG5pbXBvcnQge1xuICBEcm9wZG93bkNvbnRlbnRNZW51LFxuICBEcm9wZG93bkxpc3RNZW51LFxuICBEcm9wZG93bkxpc3RNZW51SXRlbSxcbn0gZnJvbSAnLi9tZW51JztcblxuZXhwb3J0IHR5cGUgVERyb3Bkb3duTWVudVByb3BzID0ge1xuICAvKipcbiAgICogVGhlIHBvc2l0aW9uIG9mIHRoZSBtZW51IHJlbGF0aXZlIHRvIHRoZSB0cmlnZ2VyIGVsZW1lbnQuXG4gICAqL1xuICBtZW51UG9zaXRpb24/OiAnbGVmdCcgfCAncmlnaHQnO1xuICAvKipcbiAgICogVGhlIG1heGltdW0gaGVpZ2h0IGZvciB0aGUgbWVudSBpbiBwaXhlbHMuXG4gICAqIEJ5IGRlZmF1bHQsIHRoZSBtYXggaGVpZ2h0IHdpbGwgYmUgdGhlIGF2YWlsYWJsZSBzcGFjZSBiZXR3ZWVuIHRoZSB0cmlnZ2VyIGVsZW1lbnQgYW5kIHRoZSBib3R0b20gb2YgdGhlIHZpZXdwb3J0LlxuICAgKi9cbiAgbWVudU1heEhlaWdodD86IG51bWJlcjtcbiAgLyoqXG4gICAqIFRoZSBlbGVtZW50IHRoYXQgdHJpZ2dlcnMgdGhlIGRyb3Bkb3duLlxuICAgKi9cbiAgdHJpZ2dlckVsZW1lbnQ6IFJlYWN0RWxlbWVudDtcbiAgLyoqXG4gICAqIFRoZSB0eXBlIG9mIHRoZSBtZW51LlxuICAgKiBUaGUgJ2RlZmF1bHQnIHR5cGUganVzdCByZW5kZXJzIGEgZHJvcGRvd24gY29udGFpbmVyIGJ1dCB0aGUgJ2xpc3QnIHR5cGUgaXMgaW50ZW5kZWQgdG8gYmUgdXNlZCB3aXRoIHRoZSBEcm9wZG93bk1lbnUuTGlzdE1lbnVJdGVtIGNvbXBvbmVudC5cbiAgICovXG4gIG1lbnVUeXBlPzogJ2RlZmF1bHQnIHwgJ2xpc3QnO1xuICAvKipcbiAgICogVGhlIGhvcml6b250YWwgY29uc3RyYWludCBvZiB0aGUgbWVudS5cbiAgICovXG4gIG1lbnVIb3Jpem9udGFsQ29uc3RyYWludD86IFRNYXhQcm9wO1xuICAvKipcbiAgICogVGhlIGNvbnRlbnQgb2YgdGhlIGRyb3Bkb3duLlxuICAgKi9cbiAgY2hpbGRyZW46IFJlYWN0Tm9kZTtcbn07XG5cbmZ1bmN0aW9uIGdldFNjcm9sbGFibGVQYXJlbnQoZWxlbWVudDogSFRNTEVsZW1lbnQgfCBudWxsKTogSFRNTEVsZW1lbnQgfCBudWxsIHtcbiAgaWYgKCFlbGVtZW50KSB7XG4gICAgcmV0dXJuIG51bGw7XG4gIH1cbiAgY29uc3Qgb3ZlcmZsb3dZID0gd2luZG93LmdldENvbXB1dGVkU3R5bGUoZWxlbWVudCkub3ZlcmZsb3dZO1xuICBjb25zdCBpc1Njcm9sbGFibGUgPSBvdmVyZmxvd1kgIT09ICd2aXNpYmxlJyAmJiBvdmVyZmxvd1kgIT09ICdoaWRkZW4nO1xuICBpZiAoaXNTY3JvbGxhYmxlICYmIGVsZW1lbnQuc2Nyb2xsSGVpZ2h0ID49IGVsZW1lbnQuY2xpZW50SGVpZ2h0KSB7XG4gICAgcmV0dXJuIGVsZW1lbnQ7XG4gIH1cblxuICByZXR1cm4gZ2V0U2Nyb2xsYWJsZVBhcmVudChlbGVtZW50LnBhcmVudEVsZW1lbnQpO1xufVxuXG5mdW5jdGlvbiB1c2VTY3JvbGxCbG9jayhpc09wZW46IGJvb2xlYW4sIHRyaWdnZXJSZWY6IFJlZk9iamVjdDxIVE1MRWxlbWVudD4pIHtcbiAgY29uc3Qgc2Nyb2xsYWJsZVBhcmVudFJlZiA9IHVzZVJlZjxIVE1MRWxlbWVudCB8IG51bGw+KCk7XG5cbiAgdXNlRWZmZWN0KCgpID0+IHtcbiAgICBpZiAoIXNjcm9sbGFibGVQYXJlbnRSZWYuY3VycmVudCkge1xuICAgICAgc2Nyb2xsYWJsZVBhcmVudFJlZi5jdXJyZW50ID0gZ2V0U2Nyb2xsYWJsZVBhcmVudCh0cmlnZ2VyUmVmLmN1cnJlbnQpO1xuICAgIH1cblxuICAgIGNvbnN0IHsgY3VycmVudDogc2Nyb2xsYWJsZVBhcmVudCB9ID0gc2Nyb2xsYWJsZVBhcmVudFJlZjtcbiAgICBpZiAoc2Nyb2xsYWJsZVBhcmVudCAmJiBpc09wZW4pIHtcbiAgICAgIHNjcm9sbGFibGVQYXJlbnQuc2V0QXR0cmlidXRlKFxuICAgICAgICAnZGF0YS1wcmV2LXNjcm9sbCcsXG4gICAgICAgIHNjcm9sbGFibGVQYXJlbnQuc3R5bGUub3ZlcmZsb3dZXG4gICAgICApO1xuICAgICAgc2Nyb2xsYWJsZVBhcmVudC5zdHlsZS5vdmVyZmxvd1kgPSAnaGlkZGVuJztcbiAgICB9XG4gICAgcmV0dXJuICgpID0+IHtcbiAgICAgIC8vIFRoZSBjbGVhbnVwIGVmZmVjdCBydW5zIGFmdGVyIHRoZSBjb21wb25lbnQgaXMgdW5tb3VudGVkIGJ1dCBhbHNvIGV2ZXJ5dGltZVxuICAgICAgLy8gdGhlIGRlcGVuZGVuY3kgYXJyYXkgY2hhbmdlcy4gV2UgbmVlZCB0byBtYW5hZ2UgYm90aCB0byBtYW5hZ2Ugb3BlbmluZy9jbG9zaW5nXG4gICAgICAvLyB0aGUgZHJvcGRvd24gYnV0IGFsc28gdG8gbWFuYWdlIHRoZSB0aGUgZHJvcGRvd24gaXMgb3BlbmVkIGFuZCB0aGUgY29tcG9uZW50XG4gICAgICAvLyBpcyB1bm1vdW50ZWQuIEZvciBpbnN0YW5jZSwgd2hlbiBuYXZpZ2F0aW5nIHRvIGFub3RoZXIgcGFnZSBjbGllbnQtc2lkZS5cbiAgICAgIGlmIChzY3JvbGxhYmxlUGFyZW50ICYmIGlzT3Blbikge1xuICAgICAgICBjb25zdCBwcmV2U2Nyb2xsID0gc2Nyb2xsYWJsZVBhcmVudC5nZXRBdHRyaWJ1dGUoJ2RhdGEtcHJldi1zY3JvbGwnKTtcbiAgICAgICAgc2Nyb2xsYWJsZVBhcmVudC5zdHlsZS5vdmVyZmxvd1kgPSBwcmV2U2Nyb2xsIHx8ICcnO1xuICAgICAgfVxuICAgIH07XG4gIH0sIFtpc09wZW4sIHNjcm9sbGFibGVQYXJlbnRSZWYsIHRyaWdnZXJSZWZdKTtcbn1cblxuY29uc3QgZGVmYXVsdFByb3BzOiBQaWNrPFxuICBURHJvcGRvd25NZW51UHJvcHMsXG4gICdtZW51UG9zaXRpb24nIHwgJ21lbnVUeXBlJyB8ICdtZW51SG9yaXpvbnRhbENvbnN0cmFpbnQnXG4+ID0ge1xuICBtZW51SG9yaXpvbnRhbENvbnN0cmFpbnQ6ICdhdXRvJyxcbiAgbWVudVBvc2l0aW9uOiAnbGVmdCcsXG4gIG1lbnVUeXBlOiAnZGVmYXVsdCcsXG59O1xuXG5jb25zdCBDb250YWluZXIgPSBzdHlsZWQuZGl2YFxuICBwb3NpdGlvbjogcmVsYXRpdmU7XG4gIGRpc3BsYXk6IGlubGluZS1ibG9jaztcbmA7XG5cbmZ1bmN0aW9uIERyb3Bkb3duTWVudShwcm9wczogVERyb3Bkb3duTWVudVByb3BzKSB7XG4gIGNvbnN0IFtpc09wZW4sIHRvZ2dsZV0gPSB1c2VUb2dnbGVTdGF0ZShmYWxzZSk7XG4gIGNvbnN0IHRyaWdnZXJSZWYgPSB1c2VSZWY8SFRNTERpdkVsZW1lbnQ+KG51bGwpO1xuXG4gIC8vIFdlIHVzZSB0aGUgY29udGV4dCBzbyBjaGlsZHJlbiBjYW4gdG9nZ2xlIHRoZSBkcm9wZG93blxuICBjb25zdCBjb250ZXh0ID0gdXNlTWVtbyhcbiAgICAoKSA9PiAoe1xuICAgICAgaXNPcGVuLFxuICAgICAgdG9nZ2xlLFxuICAgIH0pLFxuICAgIFtpc09wZW4sIHRvZ2dsZV1cbiAgKTtcbiAgY29uc3QgTWVudSA9XG4gICAgcHJvcHMubWVudVR5cGUgPT09ICdkZWZhdWx0JyA/IERyb3Bkb3duQ29udGVudE1lbnUgOiBEcm9wZG93bkxpc3RNZW51O1xuXG4gIC8vIENsb3NlIHRoZSBkcm9wZG93biB3aGVuIGNsaWNraW5nIG91dHNpZGUgb2YgaXRcbiAgY29uc3QgaGFuZGxlR2xvYmFsQ2xpY2sgPSB1c2VDYWxsYmFjayhcbiAgICAoZXZlbnQpID0+IHtcbiAgICAgIGNvbnN0IHRyaWdnZXJFbGVtZW50ID0gdHJpZ2dlclJlZi5jdXJyZW50O1xuICAgICAgaWYgKFxuICAgICAgICBpc09wZW4gJiZcbiAgICAgICAgdHJpZ2dlckVsZW1lbnQgJiZcbiAgICAgICAgZXZlbnQudGFyZ2V0ICE9PSB0cmlnZ2VyRWxlbWVudCAmJlxuICAgICAgICB3aW5kb3cuZG9jdW1lbnQuY29udGFpbnMoZXZlbnQudGFyZ2V0KSAmJlxuICAgICAgICAhdHJpZ2dlckVsZW1lbnQucGFyZW50RWxlbWVudD8uY29udGFpbnMoZXZlbnQudGFyZ2V0KVxuICAgICAgKSB7XG4gICAgICAgIHRvZ2dsZShmYWxzZSk7XG4gICAgICB9XG4gICAgfSxcbiAgICBbdHJpZ2dlclJlZiwgdG9nZ2xlLCBpc09wZW5dXG4gICk7XG4gIHVzZUVmZmVjdCgoKSA9PiB7XG4gICAgd2luZG93LmFkZEV2ZW50TGlzdGVuZXIoJ2NsaWNrJywgaGFuZGxlR2xvYmFsQ2xpY2spO1xuICAgIHJldHVybiAoKSA9PiB7XG4gICAgICB3aW5kb3cucmVtb3ZlRXZlbnRMaXN0ZW5lcignY2xpY2snLCBoYW5kbGVHbG9iYWxDbGljayk7XG4gICAgfTtcbiAgfSwgW2hhbmRsZUdsb2JhbENsaWNrXSk7XG5cbiAgLy8gQmxvY2sgc2Nyb2xsaW5nIHdoZW4gdGhlIGRyb3Bkb3duIGlzIG9wZW4uXG4gIC8vIFdlIGRvIHRoaXMgdG8gYXZvaWQgcmVxdWlyaW5nIGRyb3Bkb3duIHJlcmVuZGVyaW5nIHdoaWxlIHRoZSB1c2VyIHNjcm9sbHMuXG4gIHVzZVNjcm9sbEJsb2NrKGlzT3BlbiwgdHJpZ2dlclJlZik7XG5cbiAgcmV0dXJuIChcbiAgICA8RHJvcGRvd25NZW51Q29udGV4dC5Qcm92aWRlciB2YWx1ZT17Y29udGV4dH0+XG4gICAgICA8Q29udGFpbmVyPlxuICAgICAgICA8RHJvcGRvd25UcmlnZ2VyIG9uQ2xpY2s9e3RvZ2dsZX0gcmVmPXt0cmlnZ2VyUmVmfT5cbiAgICAgICAgICB7cHJvcHMudHJpZ2dlckVsZW1lbnR9XG4gICAgICAgIDwvRHJvcGRvd25UcmlnZ2VyPlxuXG4gICAgICAgIDxNZW51XG4gICAgICAgICAgaG9yaXpvbnRhbENvbnN0cmFpbnQ9e3Byb3BzLm1lbnVIb3Jpem9udGFsQ29uc3RyYWludCF9XG4gICAgICAgICAgaXNPcGVuPXtpc09wZW59XG4gICAgICAgICAgbWVudVBvc2l0aW9uPXtwcm9wcy5tZW51UG9zaXRpb24hfVxuICAgICAgICAgIG1lbnVNYXhIZWlnaHQ9e3Byb3BzLm1lbnVNYXhIZWlnaHR9XG4gICAgICAgICAgdHJpZ2dlckVsZW1lbnRSZWY9e3RyaWdnZXJSZWZ9XG4gICAgICAgID5cbiAgICAgICAgICB7cHJvcHMuY2hpbGRyZW59XG4gICAgICAgIDwvTWVudT5cbiAgICAgIDwvQ29udGFpbmVyPlxuICAgIDwvRHJvcGRvd25NZW51Q29udGV4dC5Qcm92aWRlcj5cbiAgKTtcbn1cbkRyb3Bkb3duTWVudS5kZWZhdWx0UHJvcHMgPSBkZWZhdWx0UHJvcHM7XG5cbkRyb3Bkb3duTWVudS5MaXN0TWVudUl0ZW0gPSBEcm9wZG93bkxpc3RNZW51SXRlbTtcblxuZXhwb3J0IGRlZmF1bHQgRHJvcGRvd25NZW51O1xuIl19 */",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 });
 function DropdownMenu(props) {
@@ -147,7 +196,7 @@ function DropdownMenu(props) {
     _useToggleState2 = _slicedToArray(_useToggleState, 2),
     isOpen = _useToggleState2[0],
     toggle = _useToggleState2[1];
-  const triggerRef = React.useRef(null);
+  const triggerRef = useRef(null);
   // We use the context so children can toggle the dropdown
   const context = useMemo(() => ({
@@ -170,17 +219,10 @@ function DropdownMenu(props) {
       window.removeEventListener('click', handleGlobalClick);
     };
   }, [handleGlobalClick]);
-  // Block scrolling when the dropdown is open
-  useEffect(() => {
-    if (isOpen) {
-      window.document.body.style.overflow = 'hidden';
-    } else {
-      window.document.body.style.overflow = 'initial';
-    }
-    return () => {
-      window.document.body.style.overflow = 'initial';
-    };
-  }, [isOpen]);
+  // Block scrolling when the dropdown is open.
+  // We do this to avoid requiring dropdown rerendering while the user scrolls.
+  useScrollBlock(isOpen, triggerRef);
   return jsx(DropdownMenuContext.Provider, {
     value: context,
     children: jsxs(Container, {
@@ -192,6 +234,7 @@ function DropdownMenu(props) {
         horizontalConstraint: props.menuHorizontalConstraint,
         isOpen: isOpen,
         menuPosition: props.menuPosition,
+        menuMaxHeight: props.menuMaxHeight,
         triggerElementRef: triggerRef,
         children: props.children
       })]
@@ -200,6 +243,7 @@ function DropdownMenu(props) {
 }
 DropdownMenu.propTypes = process.env.NODE_ENV !== "production" ? {
   menuPosition: _pt.oneOf(['left', 'right']),
+  menuMaxHeight: _pt.number,
   triggerElement: _pt.element.isRequired,
   menuType: _pt.oneOf(['default', 'list']),
   menuHorizontalConstraint: _pt.any,
@@ -209,6 +253,6 @@ DropdownMenu.defaultProps = defaultProps;
 DropdownMenu.ListMenuItem = DropdownListMenuItem;
 // NOTE: This string will be replaced on build time with the package version.
-var version = "19.2.0";
+var version = "19.3.1";
 export { DropdownMenu as default, useDropdownMenuContext, version };

package/dist/declarations/src/dropdown-menu.d.ts CHANGED Viewed

@@ -3,6 +3,7 @@ import { type TMaxProp } from '@commercetools-uikit/constraints';
 import { DropdownListMenuItem } from "./menu/index.js";
 export type TDropdownMenuProps = {
     menuPosition?: 'left' | 'right';
+    menuMaxHeight?: number;
     triggerElement: ReactElement;
     menuType?: 'default' | 'list';
     menuHorizontalConstraint?: TMaxProp;

package/dist/declarations/src/menu/dropdown-menu-menu.d.ts CHANGED Viewed

@@ -8,6 +8,7 @@ export type TDropdownContentMenuProps = {
     children: ReactNode;
     horizontalConstraint: TMaxProp;
     menuPosition: 'left' | 'right';
+    menuMaxHeight?: number;
     isOpen: boolean;
     triggerElementRef: RefObject<HTMLElement>;
 };
@@ -16,6 +17,7 @@ export type TDropdownListMenuProps = {
     children: ReactNode;
     horizontalConstraint: TMaxProp;
     menuPosition: 'left' | 'right';
+    menuMaxHeight?: number;
     isOpen: boolean;
     triggerElementRef: RefObject<HTMLElement>;
 };

package/package.json CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "name": "@commercetools-uikit/dropdown-menu",
   "description": "The Dropdown Menu component represents a component that triggers the rendering of a floating menu.",
-  "version": "19.2.0",
+  "version": "19.3.1",
   "bugs": "https://github.com/commercetools/ui-kit/issues",
   "repository": {
     "type": "git",
@@ -21,14 +21,14 @@
   "dependencies": {
     "@babel/runtime": "^7.20.13",
     "@babel/runtime-corejs3": "^7.20.13",
-    "@commercetools-uikit/accessible-button": "19.2.0",
-    "@commercetools-uikit/constraints": "19.2.0",
-    "@commercetools-uikit/design-system": "19.2.0",
-    "@commercetools-uikit/hooks": "19.2.0",
-    "@commercetools-uikit/secondary-button": "19.2.0",
-    "@commercetools-uikit/spacings-inline": "19.2.0",
-    "@commercetools-uikit/spacings-stack": "19.2.0",
-    "@commercetools-uikit/utils": "19.2.0",
+    "@commercetools-uikit/accessible-button": "19.3.1",
+    "@commercetools-uikit/constraints": "19.3.1",
+    "@commercetools-uikit/design-system": "19.3.1",
+    "@commercetools-uikit/hooks": "19.3.1",
+    "@commercetools-uikit/secondary-button": "19.3.1",
+    "@commercetools-uikit/spacings-inline": "19.3.1",
+    "@commercetools-uikit/spacings-stack": "19.3.1",
+    "@commercetools-uikit/utils": "19.3.1",
     "@emotion/react": "^11.10.5",
     "@emotion/styled": "^11.10.5",
     "prop-types": "15.8.1",