@commercetools-uikit/dropdown-menu 19.4.0 → 19.6.0

package/README.md

@@ -11,7 +11,10 @@ It allows to use any component as the element used to trigger the floating panel
 
 The panel can be customized to render whatever is needed. However, as a common use case would be to render a list of elements and select one of them, this component provides some helpers to easily implement such use case.
 
-Something to bear in mind is that, when the panel is open, the document scroll is blocked.
+Something to bear in mind:
+
+- when the panel is open, the document scroll is blocked
+- if there is limited screen estate, the `menuPosition` may be adjusted to ensure the menu is displayed properly
 
 ## Installation
 

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

@@ -9,6 +9,8 @@ var react = require('react');
 var hooks = require('@commercetools-uikit/hooks');
 var jsxRuntime = require('@emotion/react/jsx-runtime');
 var _concatInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/concat');
+var _setTimeout = require('@babel/runtime-corejs3/core-js-stable/set-timeout');
+var _forEachInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/for-each');
 var react$1 = require('@emotion/react');
 var designSystem = require('@commercetools-uikit/design-system');
 var Constraints = require('@commercetools-uikit/constraints');
@@ -20,6 +22,8 @@ function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e };
 var _styled__default = /*#__PURE__*/_interopDefault(_styled);
 var _pt__default = /*#__PURE__*/_interopDefault(_pt);
 var _concatInstanceProperty__default = /*#__PURE__*/_interopDefault(_concatInstanceProperty);
+var _setTimeout__default = /*#__PURE__*/_interopDefault(_setTimeout);
+var _forEachInstanceProperty__default = /*#__PURE__*/_interopDefault(_forEachInstanceProperty);
 var Constraints__default = /*#__PURE__*/_interopDefault(Constraints);
 var SpacingsStack__default = /*#__PURE__*/_interopDefault(SpacingsStack);
 var AccessibleButton__default = /*#__PURE__*/_interopDefault(AccessibleButton);
@@ -50,27 +54,104 @@ DropDownTrigger.displayName = 'DropDownTrigger';
 var DropdownTrigger = DropDownTrigger;
 
 const boxShadowBottomSize = '5px';
-const marginTop = designSystem.designTokens.spacing20;
+const outerMargin = designSystem.designTokens.spacing20;
 function getDropdownMenuBaseStyles(params) {
-  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 */");
+  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', ";max-width:", Constraints__default["default"].getMaxPropTokenValue(params.horizontalConstraint), ";overflow-y:auto;position:fixed;visibility:hidden;width:", params.horizontalConstraint === 'auto' ? 'auto' : '100%', ";z-index:1;" + (process.env.NODE_ENV === "production" ? "" : ";label:getDropdownMenuBaseStyles;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImRyb3Bkb3duLW1lbnUtbWVudS50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBc0JZIiwiZmlsZSI6ImRyb3Bkb3duLW1lbnUtbWVudS50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1xuICBDU1NQcm9wZXJ0aWVzLFxuICBSZWFjdE5vZGUsXG4gIFJlZk9iamVjdCxcbiAgdXNlTGF5b3V0RWZmZWN0LFxuICB1c2VSZWYsXG59IGZyb20gJ3JlYWN0JztcbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCB7IGRlc2lnblRva2VucyB9IGZyb20gJ0Bjb21tZXJjZXRvb2xzLXVpa2l0L2Rlc2lnbi1zeXN0ZW0nO1xuaW1wb3J0IENvbnN0cmFpbnRzLCB7IHR5cGUgVE1heFByb3AgfSBmcm9tICdAY29tbWVyY2V0b29scy11aWtpdC9jb25zdHJhaW50cyc7XG5pbXBvcnQgU3BhY2luZ3NTdGFjayBmcm9tICdAY29tbWVyY2V0b29scy11aWtpdC9zcGFjaW5ncy1zdGFjayc7XG5cbi8vIFdlIGRlY2xhcmUgdGhpcyBzdHlsZSBwcm9wZXJ0aWVzIGhlcmUgYmVjYXVzZSB3ZSBuZWVkIHRoZW0gYm90aCBmb3IgaW5pdGlhbCBjb21wb25lbnQgc3R5bGluZ1xuLy8gYnV0IGFsc28gZm9yIGNhbGN1bGF0aW5nIHRoZSBkZWZhdWx0IG1heCBoZWlnaHQgb2YgdGhlIGRyb3Bkb3duIG1lbnUgc28gd2UgbWFrZSBzdXJlIGl0IGZpdHNcbi8vIHdpdGhpbiB0aGUgdmlld3BvcnQuXG5jb25zdCBib3hTaGFkb3dCb3R0b21TaXplID0gJzVweCc7XG5jb25zdCBvdXRlck1hcmdpbiA9IGRlc2lnblRva2Vucy5zcGFjaW5nMjA7XG5cbmV4cG9ydCBmdW5jdGlvbiBnZXREcm9wZG93bk1lbnVCYXNlU3R5bGVzKHBhcmFtczoge1xuICBpc09wZW46IGJvb2xlYW47XG4gIGhvcml6b250YWxDb25zdHJhaW50OiBUTWF4UHJvcDtcbn0pIHtcbiAgcmV0dXJuIGNzc2BcbiAgICBiYWNrZ3JvdW5kLWNvbG9yOiAke2Rlc2lnblRva2Vucy5jb2xvclN1cmZhY2V9O1xuICAgIGJvcmRlcjogMXB4IHNvbGlkICR7ZGVzaWduVG9rZW5zLmNvbG9yU3VyZmFjZX07XG4gICAgYm9yZGVyLXJhZGl1czogJHtkZXNpZ25Ub2tlbnMuYm9yZGVyUmFkaXVzNH07XG4gICAgYm94LXNoYWRvdzogMCAycHggJHtib3hTaGFkb3dCb3R0b21TaXplfSAwcHggcmdiYSgwLCAwLCAwLCAwLjE1KTtcbiAgICBkaXNwbGF5OiAke3BhcmFtcy5pc09wZW4gPyAnYmxvY2snIDogJ25vbmUnfTtcbiAgICBtYXgtd2lkdGg6ICR7Q29uc3RyYWludHMuZ2V0TWF4UHJvcFRva2VuVmFsdWUocGFyYW1zLmhvcml6b250YWxDb25zdHJhaW50KX07XG4gICAgb3ZlcmZsb3cteTogYXV0bztcbiAgICBwb3NpdGlvbjogZml4ZWQ7XG4gICAgdmlzaWJpbGl0eTogaGlkZGVuO1xuICAgIHdpZHRoOiAke3BhcmFtcy5ob3Jpem9udGFsQ29uc3RyYWludCA9PT0gJ2F1dG8nID8gJ2F1dG8nIDogJzEwMCUnfTtcbiAgICB6LWluZGV4OiAxO1xuICBgO1xufVxuXG50eXBlIFREcm9wZG93bkJhc2VNZW51UHJvcHMgPSB7XG4gIGNoaWxkcmVuOiBSZWFjdE5vZGU7XG4gIGN1c3RvbVN0eWxlcz86IENTU1Byb3BlcnRpZXM7XG4gIGhvcml6b250YWxDb25zdHJhaW50OiBUTWF4UHJvcDtcbiAgaXNPcGVuOiBib29sZWFuO1xuICBtZW51UG9zaXRpb246ICdsZWZ0JyB8ICdyaWdodCc7XG4gIG1lbnVNYXhIZWlnaHQ/OiBudW1iZXI7XG4gIHRyaWdnZXJFbGVtZW50UmVmOiBSZWZPYmplY3Q8SFRNTEVsZW1lbnQ+O1xufTtcbmZ1bmN0aW9uIERyb3Bkb3duQmFzZU1lbnUocHJvcHM6IFREcm9wZG93bkJhc2VNZW51UHJvcHMpIHtcbiAgY29uc3QgbWVudVJlZiA9IHVzZVJlZjxIVE1MRGl2RWxlbWVudD4obnVsbCk7XG5cbiAgdXNlTGF5b3V0RWZmZWN0KCgpID0+IHtcbiAgICBpZiAoIXByb3BzLmlzT3BlbiB8fCAhcHJvcHMudHJpZ2dlckVsZW1lbnRSZWYuY3VycmVudCB8fCAhbWVudVJlZi5jdXJyZW50KSB7XG4gICAgICByZXR1cm47XG4gICAgfVxuXG4gICAgY29uc3QgbWVudU1heEhlaWdodCA9IHByb3BzLm1lbnVNYXhIZWlnaHQ7XG4gICAgY29uc3QgbWVudUVsID0gbWVudVJlZi5jdXJyZW50O1xuICAgIGNvbnN0IG1lbnVUcmlnZ2VyRWwgPSBwcm9wcy50cmlnZ2VyRWxlbWVudFJlZi5jdXJyZW50O1xuXG4gICAgY29uc3QgbWVudURPTVJlY3QgPSBtZW51RWwuZ2V0Qm91bmRpbmdDbGllbnRSZWN0KCk7XG4gICAgY29uc3QgdHJpZ2dlckRPTVJlY3QgPSBtZW51VHJpZ2dlckVsLmdldEJvdW5kaW5nQ2xpZW50UmVjdCgpO1xuXG4gICAgLy8gQnkgZGVmYXVsdCwgdGhlIG1lbnUgaXMgbm90IGV4Y2VlZGluZyB0aGUgdmlld3BvcnQsIHRoaXMgY2FuIGNoYW5nZSB0aG91Z2hcbiAgICBsZXQgbWVudUlzRXhjZWVkaW5nVmlld3BvcnQgPSBmYWxzZTtcblxuICAgIGlmIChtZW51RE9NUmVjdC53aWR0aCA+PSBkb2N1bWVudC5ib2R5LnNjcm9sbFdpZHRoKSB7XG4gICAgICAvLyBJZiB0aGUgbWVudSB3aWR0aCBpcyBncmVhdGVyIHRoYW4gdGhlIGJvZHkgd2lkdGgsIHdlIG5lZWQgdG8gc2V0IHRoZSB3aWR0aCBvZiB0aGUgbWVudSB0byB0aGUgYm9keSB3aWR0aFxuICAgICAgLy8gdG8gcHJldmVudCB0aGUgbWVudSBmcm9tIG92ZXJmbG93aW5nLCB0aGlzIGhhcHBlbnMgdXN1YWxseSB3aGVuIHRoZSBob3Jpem9udGFsQ29uc3RyYWludCBpcyBzZXQgdG8gJ2F1dG8nXG4gICAgICBtZW51RWwuc3R5bGUud2lkdGggPSBgY2FsYygke2RvY3VtZW50LmJvZHkuc2Nyb2xsV2lkdGh9cHggLSAyICogJHtvdXRlck1hcmdpbn0pYDtcbiAgICAgIG1lbnVJc0V4Y2VlZGluZ1ZpZXdwb3J0ID0gdHJ1ZTtcbiAgICB9XG5cbiAgICAvLyBUaGUgcHJlZmVycmVkL2lkZWFsIGhlaWdodCBvZiB0aGUgbWVudSAod2hpY2ggbWlnaHQgY2hhbmdlIGxhdGVyIGlmIHRoZXJlIGlzXG4gICAgLy8gbm90IGVub3VnaCBzY3JlZW4gZXN0YXRlKVxuICAgIGxldCBkZXNpcmVkTWVudUhlaWdodCA9IG1lbnVNYXhIZWlnaHQgfHwgbWVudURPTVJlY3QuaGVpZ2h0O1xuICAgIGNvbnN0IG1lbnVXaWR0aCA9IG1lbnVET01SZWN0LndpZHRoO1xuXG4gICAgY29uc3QgYXZhaWxhYmxlU3BhY2VUb3AgPSB0cmlnZ2VyRE9NUmVjdC50b3A7XG4gICAgY29uc3QgYXZhaWxhYmxlU3BhY2VCb3R0b20gPSB3aW5kb3cuaW5uZXJIZWlnaHQgLSB0cmlnZ2VyRE9NUmVjdC5ib3R0b207XG5cbiAgICAvLyBQcmVmZXIgcmVuZGVyaW5nIGJlbG93IHRoZSB0cmlnZ2VyIGVsZW1lbnQgaWYgdGhlcmUgaXMgZW5vdWdoIHNwYWNlXG4gICAgLy8gdG8gZGlzcGxheSB0aGUgd2hvbGUgbWVudSwgb3RoZXJ3aXNlIHJlbmRlciB3aGVyZXZlciB0aGVyZSBpcyBtb3JlIHNwYWNlXG4gICAgY29uc3QgbWVudVlQb3NpdGlvbiA9XG4gICAgICBhdmFpbGFibGVTcGFjZUJvdHRvbSA+PSBkZXNpcmVkTWVudUhlaWdodFxuICAgICAgICA/ICdiZWxvdydcbiAgICAgICAgOiBhdmFpbGFibGVTcGFjZUJvdHRvbSA+IGF2YWlsYWJsZVNwYWNlVG9wXG4gICAgICAgID8gJ2JlbG93J1xuICAgICAgICA6ICdhYm92ZSc7XG5cbiAgICBsZXQgbWVudVhQb3NpdGlvbjogJ2xlZnQnIHwgJ3JpZ2h0JztcblxuICAgIGlmIChwcm9wcy5tZW51UG9zaXRpb24gPT09ICdsZWZ0Jykge1xuICAgICAgY29uc3QgZGlzdGFuY2VUb1JpZ2h0RWRnZSA9IHdpbmRvdy5pbm5lcldpZHRoIC0gdHJpZ2dlckRPTVJlY3QubGVmdDtcbiAgICAgIG1lbnVYUG9zaXRpb24gPSBkaXN0YW5jZVRvUmlnaHRFZGdlID49IG1lbnVXaWR0aCA/ICdsZWZ0JyA6ICdyaWdodCc7XG4gICAgfVxuXG4gICAgaWYgKHByb3BzLm1lbnVQb3NpdGlvbiA9PT0gJ3JpZ2h0Jykge1xuICAgICAgY29uc3QgZGlzdGFuY2VUb0xlZnRFZGdlID0gdHJpZ2dlckRPTVJlY3QubGVmdCArIHRyaWdnZXJET01SZWN0LndpZHRoO1xuICAgICAgbWVudVhQb3NpdGlvbiA9IGRpc3RhbmNlVG9MZWZ0RWRnZSA+PSBtZW51V2lkdGggPyAncmlnaHQnIDogJ2xlZnQnO1xuICAgIH1cbiAgICAvLyBTaW5jZSBzY3JvbGxpbmcgd2lsbCBiZSBkaXNhYmxlZCBieSBhIGhvb2ssIHBvc3NpYmx5IG9uIHRoZSBib2R5LWVsZW1lbnQsXG4gICAgLy8gdGhlIGF2YWlsYWJsZSB2aWV3cG9ydC13aWR0aCBtaWdodCBjaGFuZ2UsIHRodXMsIHRoZSBwb3NpdGlvbmluZyBvZiB0aGVcbiAgICAvLyBtZW51IHdvdWxkIGJlIGFmZmVjdGVkLCBoZW5jZSB3ZSBuZWVkIHRvIGdldCB0aGUgc2Nyb2xsLXdpZHRoIGJlZm9yZSB0aGVcbiAgICAvLyBtZW51IHJlbmRlcnNcbiAgICBjb25zdCBzY3JvbGxXaWR0aEJlZm9yZSA9IGRvY3VtZW50LmJvZHkuc2Nyb2xsV2lkdGg7XG5cbiAgICAvLyBVc2luZyBzZXRUaW1lb3V0IGFsbG93cyB1cyB0byBnZXQgdGhlIGNvcnJlY3QgZGltZW5zaW9ucyAmIHBvc2l0aW9uc1xuICAgIC8vIG9mIHRoZSB0cmlnZ2VyLSAmIG1lbnUtZWxlbWVudCBmaXJzdCBiZWZvcmUgZG9pbmcgdGhlIGNhbGN1bGF0aW9ucyBmb3JcbiAgICAvLyBwb3NpdGlvbmluZyB0aGUgbWVudSBjb3JyZWN0bHlcbiAgICBzZXRUaW1lb3V0KCgpID0+IHtcbiAgICAgIC8vIElmIHRoZXJlIGlzIGEgc2Nyb2xsV2lkdGhEaWZmLCBpdCBtZWFucyB0aGF0IHRoZSB3aWR0aCBvZiB0aGVcbiAgICAgIC8vIHZpZXdwb3J0cyBoYXMgY2hhbmdlZCBkdWUgdG8gcmVtb3ZlZCBzY3JvbGxiYXJzLCBhbmQgd2UgbmVlZCB0b1xuICAgICAgLy8gYWRqdXN0IHRoZSBwb3NpdGlvbiBvZiB0aGUgbWVudSB0byBiZSBzdGlsbCBwcm9wZXJseSBhbGlnbmVkIHdpdGhcbiAgICAgIC8vIHRoZSB0cmlnZ2VyXG4gICAgICBjb25zdCBzY3JvbGxXaWR0aERpZmYgPVxuICAgICAgICAoZG9jdW1lbnQuYm9keS5zY3JvbGxXaWR0aCAtIHNjcm9sbFdpZHRoQmVmb3JlKSAqIDAuNTtcblxuICAgICAgaWYgKG1lbnVJc0V4Y2VlZGluZ1ZpZXdwb3J0KSB7XG4gICAgICAgIG1lbnVFbC5zdHlsZS5sZWZ0ID0gYGNhbGMoICR7b3V0ZXJNYXJnaW59ICsgJHtzY3JvbGxXaWR0aERpZmZ9cHgpYDtcbiAgICAgIH0gZWxzZSBpZiAobWVudVhQb3NpdGlvbiA9PT0gJ2xlZnQnKSB7XG4gICAgICAgIG1lbnVFbC5zdHlsZS5sZWZ0ID0gYCR7dHJpZ2dlckRPTVJlY3QubGVmdCArIHNjcm9sbFdpZHRoRGlmZn1weGA7XG4gICAgICAgIG1lbnVFbC5zdHlsZS5yZW1vdmVQcm9wZXJ0eSgncmlnaHQnKTtcbiAgICAgIH0gZWxzZSB7XG4gICAgICAgIG1lbnVFbC5zdHlsZS5yaWdodCA9IGAke1xuICAgICAgICAgIHdpbmRvdy5pbm5lcldpZHRoIC0gdHJpZ2dlckRPTVJlY3QucmlnaHQgLSBzY3JvbGxXaWR0aERpZmZcbiAgICAgICAgfXB4YDtcbiAgICAgICAgbWVudUVsLnN0eWxlLnJlbW92ZVByb3BlcnR5KCdsZWZ0Jyk7XG4gICAgICB9XG5cbiAgICAgIGlmIChtZW51WVBvc2l0aW9uID09PSAnYmVsb3cnKSB7XG4gICAgICAgIG1lbnVFbC5zdHlsZS50b3AgPSBgY2FsYygke1xuICAgICAgICAgIHRyaWdnZXJET01SZWN0LnRvcCArIHRyaWdnZXJET01SZWN0LmhlaWdodFxuICAgICAgICB9cHggKyAke291dGVyTWFyZ2lufSlgO1xuICAgICAgfSBlbHNlIHtcbiAgICAgICAgLy8gTmVlZCB0byByZS1yZXF1ZXN0IGdldEJvdW5kaW5nQ2xpZW50UmVjdCgpIGJlY2F1c2UgdGhlIG1lbnUgaGVpZ2h0XG4gICAgICAgIC8vIG1pZ2h0IGhhdmUgY2hhbmdlZCB3aGVuIHRoZSBkcm9wZG93biBpcyBpbiAnYXV0bycgbW9kZTtcbiAgICAgICAgbGV0IGRlc2lyZWRNZW51SGVpZ2h0ID1cbiAgICAgICAgICBtZW51TWF4SGVpZ2h0IHx8IG1lbnVFbC5nZXRCb3VuZGluZ0NsaWVudFJlY3QoKS5oZWlnaHQ7XG5cbiAgICAgICAgbWVudUVsLnN0eWxlLnRvcCA9IGBjYWxjKCR7XG4gICAgICAgICAgdHJpZ2dlckRPTVJlY3QudG9wIC0gZGVzaXJlZE1lbnVIZWlnaHRcbiAgICAgICAgfXB4IC0gJHtvdXRlck1hcmdpbn0pYDtcbiAgICAgIH1cblxuICAgICAgaWYgKG1lbnVNYXhIZWlnaHQpIHtcbiAgICAgICAgLy8gQXBwbHkgdGhlIG1hbnVhbCBtYXgtd2lkdGhcbiAgICAgICAgbWVudUVsLnN0eWxlLm1heEhlaWdodCA9IG1lbnVNYXhIZWlnaHQgKyAncHgnO1xuICAgICAgfSBlbHNlIHtcbiAgICAgICAgLy8gTWFrZSBzdXJlIG1heC1oZWlnaHQgZG9lcyBub3QgZXhjZWVkIHRoZSBhdmFpbGFibGUgdG9wLSBvciBib3R0b20tc3BhY2VcbiAgICAgICAgbWVudUVsLnN0eWxlLm1heEhlaWdodCA9XG4gICAgICAgICAgbWVudVlQb3NpdGlvbiA9PT0gJ2JlbG93J1xuICAgICAgICAgICAgPyBgY2FsYygke1xuICAgICAgICAgICAgICAgIHdpbmRvdy5pbm5lckhlaWdodCAtIHRyaWdnZXJET01SZWN0LmJvdHRvbVxuICAgICAgICAgICAgICB9cHggLSAke291dGVyTWFyZ2lufSAtICR7Ym94U2hhZG93Qm90dG9tU2l6ZX0pYFxuICAgICAgICAgICAgOiBgY2FsYygke3RyaWdnZXJET01SZWN0LnRvcH1weCAtICR7b3V0ZXJNYXJnaW59IC0gJHtib3hTaGFkb3dCb3R0b21TaXplfSlgO1xuICAgICAgfVxuXG4gICAgICAvLyBBbGwgcG9zaXRpb25pbmcgb3BlcmF0aW9ucyBkb25lLCBtYWtlIG1lbnUgdmlzaWJsZSBhZ2FpblxuICAgICAgbWVudUVsLnN0eWxlLnZpc2liaWxpdHkgPSAndmlzaWJsZSc7XG4gICAgfSwgMCk7XG5cbiAgICByZXR1cm4gKCkgPT4ge1xuICAgICAgW1xuICAgICAgICAndG9wJyxcbiAgICAgICAgJ2xlZnQnLFxuICAgICAgICAncmlnaHQnLFxuICAgICAgICAnYm90dG9tJyxcbiAgICAgICAgJ3dpZHRoJyxcbiAgICAgICAgJ2hlaWdodCcsXG4gICAgICAgICdtYXhIZWlnaHQnLFxuICAgICAgICAndmlzaWJpbGl0eScsXG4gICAgICBdLmZvckVhY2goKHByb3ApID0+IHtcbiAgICAgICAgbWVudUVsLnN0eWxlLnJlbW92ZVByb3BlcnR5KHByb3ApO1xuICAgICAgfSk7XG4gICAgfTtcbiAgfSwgW1xuICAgIHByb3BzLmlzT3BlbixcbiAgICBwcm9wcy5tZW51UG9zaXRpb24sXG4gICAgcHJvcHMudHJpZ2dlckVsZW1lbnRSZWYsXG4gICAgcHJvcHMubWVudU1heEhlaWdodCxcbiAgXSk7XG5cbiAgcmV0dXJuIChcbiAgICA8ZGl2XG4gICAgICBjc3M9e2dldERyb3Bkb3duTWVudUJhc2VTdHlsZXMocHJvcHMpfVxuICAgICAgc3R5bGU9e3Byb3BzLmN1c3RvbVN0eWxlc31cbiAgICAgIHJlZj17bWVudVJlZn1cbiAgICA+XG4gICAgICB7cHJvcHMuY2hpbGRyZW59XG4gICAgPC9kaXY+XG4gICk7XG59XG5cbmV4cG9ydCB0eXBlIFREcm9wZG93bkNvbnRlbnRNZW51UHJvcHMgPSB7XG4gIGNoaWxkcmVuOiBSZWFjdE5vZGU7XG4gIGhvcml6b250YWxDb25zdHJhaW50OiBUTWF4UHJvcDtcbiAgbWVudVBvc2l0aW9uOiAnbGVmdCcgfCAncmlnaHQnO1xuICBtZW51TWF4SGVpZ2h0PzogbnVtYmVyO1xuICBpc09wZW46IGJvb2xlYW47XG4gIHRyaWdnZXJFbGVtZW50UmVmOiBSZWZPYmplY3Q8SFRNTEVsZW1lbnQ+O1xufTtcbmV4cG9ydCBjb25zdCBEcm9wZG93bkNvbnRlbnRNZW51ID0gKHByb3BzOiBURHJvcGRvd25Db250ZW50TWVudVByb3BzKSA9PiB7XG4gIHJldHVybiAoXG4gICAgPERyb3Bkb3duQmFzZU1lbnVcbiAgICAgIGN1c3RvbVN0eWxlcz17e1xuICAgICAgICBwYWRkaW5nOiBkZXNpZ25Ub2tlbnMuc3BhY2luZzMwLFxuICAgICAgfX1cbiAgICAgIGhvcml6b250YWxDb25zdHJhaW50PXtwcm9wcy5ob3Jpem9udGFsQ29uc3RyYWludH1cbiAgICAgIGlzT3Blbj17cHJvcHMuaXNPcGVufVxuICAgICAgbWVudVBvc2l0aW9uPXtwcm9wcy5tZW51UG9zaXRpb259XG4gICAgICBtZW51TWF4SGVpZ2h0PXtwcm9wcy5tZW51TWF4SGVpZ2h0fVxuICAgICAgdHJpZ2dlckVsZW1lbnRSZWY9e3Byb3BzLnRyaWdnZXJFbGVtZW50UmVmfVxuICAgID5cbiAgICAgIHtwcm9wcy5jaGlsZHJlbn1cbiAgICA8L0Ryb3Bkb3duQmFzZU1lbnU+XG4gICk7XG59O1xuXG5leHBvcnQgdHlwZSBURHJvcGRvd25MaXN0TWVudVByb3BzID0ge1xuICBjaGlsZHJlbjogUmVhY3ROb2RlO1xuICBob3Jpem9udGFsQ29uc3RyYWludDogVE1heFByb3A7XG4gIG1lbnVQb3NpdGlvbjogJ2xlZnQnIHwgJ3JpZ2h0JztcbiAgbWVudU1heEhlaWdodD86IG51bWJlcjtcbiAgaXNPcGVuOiBib29sZWFuO1xuICB0cmlnZ2VyRWxlbWVudFJlZjogUmVmT2JqZWN0PEhUTUxFbGVtZW50Pjtcbn07XG5leHBvcnQgY29uc3QgRHJvcGRvd25MaXN0TWVudSA9IChwcm9wczogVERyb3Bkb3duTGlzdE1lbnVQcm9wcykgPT4ge1xuICByZXR1cm4gKFxuICAgIDxEcm9wZG93bkJhc2VNZW51XG4gICAgICBob3Jpem9udGFsQ29uc3RyYWludD17cHJvcHMuaG9yaXpvbnRhbENvbnN0cmFpbnR9XG4gICAgICBpc09wZW49e3Byb3BzLmlzT3Blbn1cbiAgICAgIG1lbnVQb3NpdGlvbj17cHJvcHMubWVudVBvc2l0aW9ufVxuICAgICAgbWVudU1heEhlaWdodD17cHJvcHMubWVudU1heEhlaWdodH1cbiAgICAgIHRyaWdnZXJFbGVtZW50UmVmPXtwcm9wcy50cmlnZ2VyRWxlbWVudFJlZn1cbiAgICA+XG4gICAgICA8U3BhY2luZ3NTdGFjayBzY2FsZT1cInhzXCI+e3Byb3BzLmNoaWxkcmVufTwvU3BhY2luZ3NTdGFjaz5cbiAgICA8L0Ryb3Bkb3duQmFzZU1lbnU+XG4gICk7XG59O1xuIl19 */");
 }
 function DropdownBaseMenu(props) {
   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();
-      menuRef.current.style.top = "".concat(triggerElementCoordinates.top + triggerElementCoordinates.height, "px");
-      if (props.menuPosition === 'left') {
-        menuRef.current.style.left = "".concat(triggerElementCoordinates.left, "px");
-        menuRef.current.style.removeProperty('right');
+    if (!props.isOpen || !props.triggerElementRef.current || !menuRef.current) {
+      return;
+    }
+    const menuMaxHeight = props.menuMaxHeight;
+    const menuEl = menuRef.current;
+    const menuTriggerEl = props.triggerElementRef.current;
+    const menuDOMRect = menuEl.getBoundingClientRect();
+    const triggerDOMRect = menuTriggerEl.getBoundingClientRect();
+
+    // By default, the menu is not exceeding the viewport, this can change though
+    let menuIsExceedingViewport = false;
+    if (menuDOMRect.width >= document.body.scrollWidth) {
+      var _context;
+      // If the menu width is greater than the body width, we need to set the width of the menu to the body width
+      // to prevent the menu from overflowing, this happens usually when the horizontalConstraint is set to 'auto'
+      menuEl.style.width = _concatInstanceProperty__default["default"](_context = "calc(".concat(document.body.scrollWidth, "px - 2 * ")).call(_context, outerMargin, ")");
+      menuIsExceedingViewport = true;
+    }
+
+    // The preferred/ideal height of the menu (which might change later if there is
+    // not enough screen estate)
+    let desiredMenuHeight = menuMaxHeight || menuDOMRect.height;
+    const menuWidth = menuDOMRect.width;
+    const availableSpaceTop = triggerDOMRect.top;
+    const availableSpaceBottom = window.innerHeight - triggerDOMRect.bottom;
+
+    // Prefer rendering below the trigger element if there is enough space
+    // to display the whole menu, otherwise render wherever there is more space
+    const menuYPosition = availableSpaceBottom >= desiredMenuHeight ? 'below' : availableSpaceBottom > availableSpaceTop ? 'below' : 'above';
+    let menuXPosition;
+    if (props.menuPosition === 'left') {
+      const distanceToRightEdge = window.innerWidth - triggerDOMRect.left;
+      menuXPosition = distanceToRightEdge >= menuWidth ? 'left' : 'right';
+    }
+    if (props.menuPosition === 'right') {
+      const distanceToLeftEdge = triggerDOMRect.left + triggerDOMRect.width;
+      menuXPosition = distanceToLeftEdge >= menuWidth ? 'right' : 'left';
+    }
+    // Since scrolling will be disabled by a hook, possibly on the body-element,
+    // the available viewport-width might change, thus, the positioning of the
+    // menu would be affected, hence we need to get the scroll-width before the
+    // menu renders
+    const scrollWidthBefore = document.body.scrollWidth;
+
+    // Using setTimeout allows us to get the correct dimensions & positions
+    // of the trigger- & menu-element first before doing the calculations for
+    // positioning the menu correctly
+    _setTimeout__default["default"](() => {
+      // If there is a scrollWidthDiff, it means that the width of the
+      // viewports has changed due to removed scrollbars, and we need to
+      // adjust the position of the menu to be still properly aligned with
+      // the trigger
+      const scrollWidthDiff = (document.body.scrollWidth - scrollWidthBefore) * 0.5;
+      if (menuIsExceedingViewport) {
+        var _context2;
+        menuEl.style.left = _concatInstanceProperty__default["default"](_context2 = "calc( ".concat(outerMargin, " + ")).call(_context2, scrollWidthDiff, "px)");
+      } else if (menuXPosition === 'left') {
+        menuEl.style.left = "".concat(triggerDOMRect.left + scrollWidthDiff, "px");
+        menuEl.style.removeProperty('right');
       } else {
-        menuRef.current.style.right = "".concat(window.innerWidth - triggerElementCoordinates.right, "px");
-        menuRef.current.style.removeProperty('left');
+        menuEl.style.right = "".concat(window.innerWidth - triggerDOMRect.right - scrollWidthDiff, "px");
+        menuEl.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, ")");
-    }
+      if (menuYPosition === 'below') {
+        var _context3;
+        menuEl.style.top = _concatInstanceProperty__default["default"](_context3 = "calc(".concat(triggerDOMRect.top + triggerDOMRect.height, "px + ")).call(_context3, outerMargin, ")");
+      } else {
+        var _context4;
+        // Need to re-request getBoundingClientRect() because the menu height
+        // might have changed when the dropdown is in 'auto' mode;
+        let desiredMenuHeight = menuMaxHeight || menuEl.getBoundingClientRect().height;
+        menuEl.style.top = _concatInstanceProperty__default["default"](_context4 = "calc(".concat(triggerDOMRect.top - desiredMenuHeight, "px - ")).call(_context4, outerMargin, ")");
+      }
+      if (menuMaxHeight) {
+        // Apply the manual max-width
+        menuEl.style.maxHeight = menuMaxHeight + 'px';
+      } else {
+        var _context5, _context6, _context7, _context8;
+        // Make sure max-height does not exceed the available top- or bottom-space
+        menuEl.style.maxHeight = menuYPosition === 'below' ? _concatInstanceProperty__default["default"](_context5 = _concatInstanceProperty__default["default"](_context6 = "calc(".concat(window.innerHeight - triggerDOMRect.bottom, "px - ")).call(_context6, outerMargin, " - ")).call(_context5, boxShadowBottomSize, ")") : _concatInstanceProperty__default["default"](_context7 = _concatInstanceProperty__default["default"](_context8 = "calc(".concat(triggerDOMRect.top, "px - ")).call(_context8, outerMargin, " - ")).call(_context7, boxShadowBottomSize, ")");
+      }
+
+      // All positioning operations done, make menu visible again
+      menuEl.style.visibility = 'visible';
+    }, 0);
+    return () => {
+      var _context9;
+      _forEachInstanceProperty__default["default"](_context9 = ['top', 'left', 'right', 'bottom', 'width', 'height', 'maxHeight', 'visibility']).call(_context9, prop => {
+        menuEl.style.removeProperty(prop);
+      });
+    };
   }, [props.isOpen, props.menuPosition, props.triggerElementRef, props.menuMaxHeight]);
   return jsxRuntime.jsx("div", {
     css: getDropdownMenuBaseStyles(props),
@@ -266,7 +347,7 @@ DropdownMenu.defaultProps = defaultProps;
 DropdownMenu.ListMenuItem = DropdownListMenuItem;
 
 // NOTE: This string will be replaced on build time with the package version.
-var version = "19.4.0";
+var version = "19.6.0";
 
 exports["default"] = DropdownMenu;
 exports.useDropdownMenuContext = useDropdownMenuContext;

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

@@ -9,6 +9,8 @@ var react = require('react');
 var hooks = require('@commercetools-uikit/hooks');
 var jsxRuntime = require('@emotion/react/jsx-runtime');
 var _concatInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/concat');
+var _setTimeout = require('@babel/runtime-corejs3/core-js-stable/set-timeout');
+var _forEachInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/for-each');
 var react$1 = require('@emotion/react');
 var designSystem = require('@commercetools-uikit/design-system');
 var Constraints = require('@commercetools-uikit/constraints');
@@ -19,6 +21,8 @@ function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e };
 
 var _styled__default = /*#__PURE__*/_interopDefault(_styled);
 var _concatInstanceProperty__default = /*#__PURE__*/_interopDefault(_concatInstanceProperty);
+var _setTimeout__default = /*#__PURE__*/_interopDefault(_setTimeout);
+var _forEachInstanceProperty__default = /*#__PURE__*/_interopDefault(_forEachInstanceProperty);
 var Constraints__default = /*#__PURE__*/_interopDefault(Constraints);
 var SpacingsStack__default = /*#__PURE__*/_interopDefault(SpacingsStack);
 var AccessibleButton__default = /*#__PURE__*/_interopDefault(AccessibleButton);
@@ -49,27 +53,104 @@ DropDownTrigger.displayName = 'DropDownTrigger';
 var DropdownTrigger = DropDownTrigger;
 
 const boxShadowBottomSize = '5px';
-const marginTop = designSystem.designTokens.spacing20;
+const outerMargin = designSystem.designTokens.spacing20;
 function getDropdownMenuBaseStyles(params) {
-  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;" + ("" ), "" );
+  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', ";max-width:", Constraints__default["default"].getMaxPropTokenValue(params.horizontalConstraint), ";overflow-y:auto;position:fixed;visibility:hidden;width:", params.horizontalConstraint === 'auto' ? 'auto' : '100%', ";z-index:1;" + ("" ), "" );
 }
 function DropdownBaseMenu(props) {
   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();
-      menuRef.current.style.top = "".concat(triggerElementCoordinates.top + triggerElementCoordinates.height, "px");
-      if (props.menuPosition === 'left') {
-        menuRef.current.style.left = "".concat(triggerElementCoordinates.left, "px");
-        menuRef.current.style.removeProperty('right');
+    if (!props.isOpen || !props.triggerElementRef.current || !menuRef.current) {
+      return;
+    }
+    const menuMaxHeight = props.menuMaxHeight;
+    const menuEl = menuRef.current;
+    const menuTriggerEl = props.triggerElementRef.current;
+    const menuDOMRect = menuEl.getBoundingClientRect();
+    const triggerDOMRect = menuTriggerEl.getBoundingClientRect();
+
+    // By default, the menu is not exceeding the viewport, this can change though
+    let menuIsExceedingViewport = false;
+    if (menuDOMRect.width >= document.body.scrollWidth) {
+      var _context;
+      // If the menu width is greater than the body width, we need to set the width of the menu to the body width
+      // to prevent the menu from overflowing, this happens usually when the horizontalConstraint is set to 'auto'
+      menuEl.style.width = _concatInstanceProperty__default["default"](_context = "calc(".concat(document.body.scrollWidth, "px - 2 * ")).call(_context, outerMargin, ")");
+      menuIsExceedingViewport = true;
+    }
+
+    // The preferred/ideal height of the menu (which might change later if there is
+    // not enough screen estate)
+    let desiredMenuHeight = menuMaxHeight || menuDOMRect.height;
+    const menuWidth = menuDOMRect.width;
+    const availableSpaceTop = triggerDOMRect.top;
+    const availableSpaceBottom = window.innerHeight - triggerDOMRect.bottom;
+
+    // Prefer rendering below the trigger element if there is enough space
+    // to display the whole menu, otherwise render wherever there is more space
+    const menuYPosition = availableSpaceBottom >= desiredMenuHeight ? 'below' : availableSpaceBottom > availableSpaceTop ? 'below' : 'above';
+    let menuXPosition;
+    if (props.menuPosition === 'left') {
+      const distanceToRightEdge = window.innerWidth - triggerDOMRect.left;
+      menuXPosition = distanceToRightEdge >= menuWidth ? 'left' : 'right';
+    }
+    if (props.menuPosition === 'right') {
+      const distanceToLeftEdge = triggerDOMRect.left + triggerDOMRect.width;
+      menuXPosition = distanceToLeftEdge >= menuWidth ? 'right' : 'left';
+    }
+    // Since scrolling will be disabled by a hook, possibly on the body-element,
+    // the available viewport-width might change, thus, the positioning of the
+    // menu would be affected, hence we need to get the scroll-width before the
+    // menu renders
+    const scrollWidthBefore = document.body.scrollWidth;
+
+    // Using setTimeout allows us to get the correct dimensions & positions
+    // of the trigger- & menu-element first before doing the calculations for
+    // positioning the menu correctly
+    _setTimeout__default["default"](() => {
+      // If there is a scrollWidthDiff, it means that the width of the
+      // viewports has changed due to removed scrollbars, and we need to
+      // adjust the position of the menu to be still properly aligned with
+      // the trigger
+      const scrollWidthDiff = (document.body.scrollWidth - scrollWidthBefore) * 0.5;
+      if (menuIsExceedingViewport) {
+        var _context2;
+        menuEl.style.left = _concatInstanceProperty__default["default"](_context2 = "calc( ".concat(outerMargin, " + ")).call(_context2, scrollWidthDiff, "px)");
+      } else if (menuXPosition === 'left') {
+        menuEl.style.left = "".concat(triggerDOMRect.left + scrollWidthDiff, "px");
+        menuEl.style.removeProperty('right');
       } else {
-        menuRef.current.style.right = "".concat(window.innerWidth - triggerElementCoordinates.right, "px");
-        menuRef.current.style.removeProperty('left');
+        menuEl.style.right = "".concat(window.innerWidth - triggerDOMRect.right - scrollWidthDiff, "px");
+        menuEl.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, ")");
-    }
+      if (menuYPosition === 'below') {
+        var _context3;
+        menuEl.style.top = _concatInstanceProperty__default["default"](_context3 = "calc(".concat(triggerDOMRect.top + triggerDOMRect.height, "px + ")).call(_context3, outerMargin, ")");
+      } else {
+        var _context4;
+        // Need to re-request getBoundingClientRect() because the menu height
+        // might have changed when the dropdown is in 'auto' mode;
+        let desiredMenuHeight = menuMaxHeight || menuEl.getBoundingClientRect().height;
+        menuEl.style.top = _concatInstanceProperty__default["default"](_context4 = "calc(".concat(triggerDOMRect.top - desiredMenuHeight, "px - ")).call(_context4, outerMargin, ")");
+      }
+      if (menuMaxHeight) {
+        // Apply the manual max-width
+        menuEl.style.maxHeight = menuMaxHeight + 'px';
+      } else {
+        var _context5, _context6, _context7, _context8;
+        // Make sure max-height does not exceed the available top- or bottom-space
+        menuEl.style.maxHeight = menuYPosition === 'below' ? _concatInstanceProperty__default["default"](_context5 = _concatInstanceProperty__default["default"](_context6 = "calc(".concat(window.innerHeight - triggerDOMRect.bottom, "px - ")).call(_context6, outerMargin, " - ")).call(_context5, boxShadowBottomSize, ")") : _concatInstanceProperty__default["default"](_context7 = _concatInstanceProperty__default["default"](_context8 = "calc(".concat(triggerDOMRect.top, "px - ")).call(_context8, outerMargin, " - ")).call(_context7, boxShadowBottomSize, ")");
+      }
+
+      // All positioning operations done, make menu visible again
+      menuEl.style.visibility = 'visible';
+    }, 0);
+    return () => {
+      var _context9;
+      _forEachInstanceProperty__default["default"](_context9 = ['top', 'left', 'right', 'bottom', 'width', 'height', 'maxHeight', 'visibility']).call(_context9, prop => {
+        menuEl.style.removeProperty(prop);
+      });
+    };
   }, [props.isOpen, props.menuPosition, props.triggerElementRef, props.menuMaxHeight]);
   return jsxRuntime.jsx("div", {
     css: getDropdownMenuBaseStyles(props),
@@ -227,7 +308,7 @@ DropdownMenu.defaultProps = defaultProps;
 DropdownMenu.ListMenuItem = DropdownListMenuItem;
 
 // NOTE: This string will be replaced on build time with the package version.
-var version = "19.4.0";
+var version = "19.6.0";
 
 exports["default"] = DropdownMenu;
 exports.useDropdownMenuContext = useDropdownMenuContext;

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

@@ -5,6 +5,8 @@ import { useContext, createContext, forwardRef, useRef, useLayoutEffect, useMemo
 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 _setTimeout from '@babel/runtime-corejs3/core-js-stable/set-timeout';
+import _forEachInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/for-each';
 import { css } from '@emotion/react';
 import { designTokens } from '@commercetools-uikit/design-system';
 import Constraints from '@commercetools-uikit/constraints';
@@ -37,27 +39,104 @@ DropDownTrigger.displayName = 'DropDownTrigger';
 var DropdownTrigger = DropDownTrigger;
 
 const boxShadowBottomSize = '5px';
-const marginTop = designTokens.spacing20;
+const outerMargin = 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 ", 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 */");
+  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', ";max-width:", Constraints.getMaxPropTokenValue(params.horizontalConstraint), ";overflow-y:auto;position:fixed;visibility:hidden;width:", params.horizontalConstraint === 'auto' ? 'auto' : '100%', ";z-index:1;" + (process.env.NODE_ENV === "production" ? "" : ";label:getDropdownMenuBaseStyles;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImRyb3Bkb3duLW1lbnUtbWVudS50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBc0JZIiwiZmlsZSI6ImRyb3Bkb3duLW1lbnUtbWVudS50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1xuICBDU1NQcm9wZXJ0aWVzLFxuICBSZWFjdE5vZGUsXG4gIFJlZk9iamVjdCxcbiAgdXNlTGF5b3V0RWZmZWN0LFxuICB1c2VSZWYsXG59IGZyb20gJ3JlYWN0JztcbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCB7IGRlc2lnblRva2VucyB9IGZyb20gJ0Bjb21tZXJjZXRvb2xzLXVpa2l0L2Rlc2lnbi1zeXN0ZW0nO1xuaW1wb3J0IENvbnN0cmFpbnRzLCB7IHR5cGUgVE1heFByb3AgfSBmcm9tICdAY29tbWVyY2V0b29scy11aWtpdC9jb25zdHJhaW50cyc7XG5pbXBvcnQgU3BhY2luZ3NTdGFjayBmcm9tICdAY29tbWVyY2V0b29scy11aWtpdC9zcGFjaW5ncy1zdGFjayc7XG5cbi8vIFdlIGRlY2xhcmUgdGhpcyBzdHlsZSBwcm9wZXJ0aWVzIGhlcmUgYmVjYXVzZSB3ZSBuZWVkIHRoZW0gYm90aCBmb3IgaW5pdGlhbCBjb21wb25lbnQgc3R5bGluZ1xuLy8gYnV0IGFsc28gZm9yIGNhbGN1bGF0aW5nIHRoZSBkZWZhdWx0IG1heCBoZWlnaHQgb2YgdGhlIGRyb3Bkb3duIG1lbnUgc28gd2UgbWFrZSBzdXJlIGl0IGZpdHNcbi8vIHdpdGhpbiB0aGUgdmlld3BvcnQuXG5jb25zdCBib3hTaGFkb3dCb3R0b21TaXplID0gJzVweCc7XG5jb25zdCBvdXRlck1hcmdpbiA9IGRlc2lnblRva2Vucy5zcGFjaW5nMjA7XG5cbmV4cG9ydCBmdW5jdGlvbiBnZXREcm9wZG93bk1lbnVCYXNlU3R5bGVzKHBhcmFtczoge1xuICBpc09wZW46IGJvb2xlYW47XG4gIGhvcml6b250YWxDb25zdHJhaW50OiBUTWF4UHJvcDtcbn0pIHtcbiAgcmV0dXJuIGNzc2BcbiAgICBiYWNrZ3JvdW5kLWNvbG9yOiAke2Rlc2lnblRva2Vucy5jb2xvclN1cmZhY2V9O1xuICAgIGJvcmRlcjogMXB4IHNvbGlkICR7ZGVzaWduVG9rZW5zLmNvbG9yU3VyZmFjZX07XG4gICAgYm9yZGVyLXJhZGl1czogJHtkZXNpZ25Ub2tlbnMuYm9yZGVyUmFkaXVzNH07XG4gICAgYm94LXNoYWRvdzogMCAycHggJHtib3hTaGFkb3dCb3R0b21TaXplfSAwcHggcmdiYSgwLCAwLCAwLCAwLjE1KTtcbiAgICBkaXNwbGF5OiAke3BhcmFtcy5pc09wZW4gPyAnYmxvY2snIDogJ25vbmUnfTtcbiAgICBtYXgtd2lkdGg6ICR7Q29uc3RyYWludHMuZ2V0TWF4UHJvcFRva2VuVmFsdWUocGFyYW1zLmhvcml6b250YWxDb25zdHJhaW50KX07XG4gICAgb3ZlcmZsb3cteTogYXV0bztcbiAgICBwb3NpdGlvbjogZml4ZWQ7XG4gICAgdmlzaWJpbGl0eTogaGlkZGVuO1xuICAgIHdpZHRoOiAke3BhcmFtcy5ob3Jpem9udGFsQ29uc3RyYWludCA9PT0gJ2F1dG8nID8gJ2F1dG8nIDogJzEwMCUnfTtcbiAgICB6LWluZGV4OiAxO1xuICBgO1xufVxuXG50eXBlIFREcm9wZG93bkJhc2VNZW51UHJvcHMgPSB7XG4gIGNoaWxkcmVuOiBSZWFjdE5vZGU7XG4gIGN1c3RvbVN0eWxlcz86IENTU1Byb3BlcnRpZXM7XG4gIGhvcml6b250YWxDb25zdHJhaW50OiBUTWF4UHJvcDtcbiAgaXNPcGVuOiBib29sZWFuO1xuICBtZW51UG9zaXRpb246ICdsZWZ0JyB8ICdyaWdodCc7XG4gIG1lbnVNYXhIZWlnaHQ/OiBudW1iZXI7XG4gIHRyaWdnZXJFbGVtZW50UmVmOiBSZWZPYmplY3Q8SFRNTEVsZW1lbnQ+O1xufTtcbmZ1bmN0aW9uIERyb3Bkb3duQmFzZU1lbnUocHJvcHM6IFREcm9wZG93bkJhc2VNZW51UHJvcHMpIHtcbiAgY29uc3QgbWVudVJlZiA9IHVzZVJlZjxIVE1MRGl2RWxlbWVudD4obnVsbCk7XG5cbiAgdXNlTGF5b3V0RWZmZWN0KCgpID0+IHtcbiAgICBpZiAoIXByb3BzLmlzT3BlbiB8fCAhcHJvcHMudHJpZ2dlckVsZW1lbnRSZWYuY3VycmVudCB8fCAhbWVudVJlZi5jdXJyZW50KSB7XG4gICAgICByZXR1cm47XG4gICAgfVxuXG4gICAgY29uc3QgbWVudU1heEhlaWdodCA9IHByb3BzLm1lbnVNYXhIZWlnaHQ7XG4gICAgY29uc3QgbWVudUVsID0gbWVudVJlZi5jdXJyZW50O1xuICAgIGNvbnN0IG1lbnVUcmlnZ2VyRWwgPSBwcm9wcy50cmlnZ2VyRWxlbWVudFJlZi5jdXJyZW50O1xuXG4gICAgY29uc3QgbWVudURPTVJlY3QgPSBtZW51RWwuZ2V0Qm91bmRpbmdDbGllbnRSZWN0KCk7XG4gICAgY29uc3QgdHJpZ2dlckRPTVJlY3QgPSBtZW51VHJpZ2dlckVsLmdldEJvdW5kaW5nQ2xpZW50UmVjdCgpO1xuXG4gICAgLy8gQnkgZGVmYXVsdCwgdGhlIG1lbnUgaXMgbm90IGV4Y2VlZGluZyB0aGUgdmlld3BvcnQsIHRoaXMgY2FuIGNoYW5nZSB0aG91Z2hcbiAgICBsZXQgbWVudUlzRXhjZWVkaW5nVmlld3BvcnQgPSBmYWxzZTtcblxuICAgIGlmIChtZW51RE9NUmVjdC53aWR0aCA+PSBkb2N1bWVudC5ib2R5LnNjcm9sbFdpZHRoKSB7XG4gICAgICAvLyBJZiB0aGUgbWVudSB3aWR0aCBpcyBncmVhdGVyIHRoYW4gdGhlIGJvZHkgd2lkdGgsIHdlIG5lZWQgdG8gc2V0IHRoZSB3aWR0aCBvZiB0aGUgbWVudSB0byB0aGUgYm9keSB3aWR0aFxuICAgICAgLy8gdG8gcHJldmVudCB0aGUgbWVudSBmcm9tIG92ZXJmbG93aW5nLCB0aGlzIGhhcHBlbnMgdXN1YWxseSB3aGVuIHRoZSBob3Jpem9udGFsQ29uc3RyYWludCBpcyBzZXQgdG8gJ2F1dG8nXG4gICAgICBtZW51RWwuc3R5bGUud2lkdGggPSBgY2FsYygke2RvY3VtZW50LmJvZHkuc2Nyb2xsV2lkdGh9cHggLSAyICogJHtvdXRlck1hcmdpbn0pYDtcbiAgICAgIG1lbnVJc0V4Y2VlZGluZ1ZpZXdwb3J0ID0gdHJ1ZTtcbiAgICB9XG5cbiAgICAvLyBUaGUgcHJlZmVycmVkL2lkZWFsIGhlaWdodCBvZiB0aGUgbWVudSAod2hpY2ggbWlnaHQgY2hhbmdlIGxhdGVyIGlmIHRoZXJlIGlzXG4gICAgLy8gbm90IGVub3VnaCBzY3JlZW4gZXN0YXRlKVxuICAgIGxldCBkZXNpcmVkTWVudUhlaWdodCA9IG1lbnVNYXhIZWlnaHQgfHwgbWVudURPTVJlY3QuaGVpZ2h0O1xuICAgIGNvbnN0IG1lbnVXaWR0aCA9IG1lbnVET01SZWN0LndpZHRoO1xuXG4gICAgY29uc3QgYXZhaWxhYmxlU3BhY2VUb3AgPSB0cmlnZ2VyRE9NUmVjdC50b3A7XG4gICAgY29uc3QgYXZhaWxhYmxlU3BhY2VCb3R0b20gPSB3aW5kb3cuaW5uZXJIZWlnaHQgLSB0cmlnZ2VyRE9NUmVjdC5ib3R0b207XG5cbiAgICAvLyBQcmVmZXIgcmVuZGVyaW5nIGJlbG93IHRoZSB0cmlnZ2VyIGVsZW1lbnQgaWYgdGhlcmUgaXMgZW5vdWdoIHNwYWNlXG4gICAgLy8gdG8gZGlzcGxheSB0aGUgd2hvbGUgbWVudSwgb3RoZXJ3aXNlIHJlbmRlciB3aGVyZXZlciB0aGVyZSBpcyBtb3JlIHNwYWNlXG4gICAgY29uc3QgbWVudVlQb3NpdGlvbiA9XG4gICAgICBhdmFpbGFibGVTcGFjZUJvdHRvbSA+PSBkZXNpcmVkTWVudUhlaWdodFxuICAgICAgICA/ICdiZWxvdydcbiAgICAgICAgOiBhdmFpbGFibGVTcGFjZUJvdHRvbSA+IGF2YWlsYWJsZVNwYWNlVG9wXG4gICAgICAgID8gJ2JlbG93J1xuICAgICAgICA6ICdhYm92ZSc7XG5cbiAgICBsZXQgbWVudVhQb3NpdGlvbjogJ2xlZnQnIHwgJ3JpZ2h0JztcblxuICAgIGlmIChwcm9wcy5tZW51UG9zaXRpb24gPT09ICdsZWZ0Jykge1xuICAgICAgY29uc3QgZGlzdGFuY2VUb1JpZ2h0RWRnZSA9IHdpbmRvdy5pbm5lcldpZHRoIC0gdHJpZ2dlckRPTVJlY3QubGVmdDtcbiAgICAgIG1lbnVYUG9zaXRpb24gPSBkaXN0YW5jZVRvUmlnaHRFZGdlID49IG1lbnVXaWR0aCA/ICdsZWZ0JyA6ICdyaWdodCc7XG4gICAgfVxuXG4gICAgaWYgKHByb3BzLm1lbnVQb3NpdGlvbiA9PT0gJ3JpZ2h0Jykge1xuICAgICAgY29uc3QgZGlzdGFuY2VUb0xlZnRFZGdlID0gdHJpZ2dlckRPTVJlY3QubGVmdCArIHRyaWdnZXJET01SZWN0LndpZHRoO1xuICAgICAgbWVudVhQb3NpdGlvbiA9IGRpc3RhbmNlVG9MZWZ0RWRnZSA+PSBtZW51V2lkdGggPyAncmlnaHQnIDogJ2xlZnQnO1xuICAgIH1cbiAgICAvLyBTaW5jZSBzY3JvbGxpbmcgd2lsbCBiZSBkaXNhYmxlZCBieSBhIGhvb2ssIHBvc3NpYmx5IG9uIHRoZSBib2R5LWVsZW1lbnQsXG4gICAgLy8gdGhlIGF2YWlsYWJsZSB2aWV3cG9ydC13aWR0aCBtaWdodCBjaGFuZ2UsIHRodXMsIHRoZSBwb3NpdGlvbmluZyBvZiB0aGVcbiAgICAvLyBtZW51IHdvdWxkIGJlIGFmZmVjdGVkLCBoZW5jZSB3ZSBuZWVkIHRvIGdldCB0aGUgc2Nyb2xsLXdpZHRoIGJlZm9yZSB0aGVcbiAgICAvLyBtZW51IHJlbmRlcnNcbiAgICBjb25zdCBzY3JvbGxXaWR0aEJlZm9yZSA9IGRvY3VtZW50LmJvZHkuc2Nyb2xsV2lkdGg7XG5cbiAgICAvLyBVc2luZyBzZXRUaW1lb3V0IGFsbG93cyB1cyB0byBnZXQgdGhlIGNvcnJlY3QgZGltZW5zaW9ucyAmIHBvc2l0aW9uc1xuICAgIC8vIG9mIHRoZSB0cmlnZ2VyLSAmIG1lbnUtZWxlbWVudCBmaXJzdCBiZWZvcmUgZG9pbmcgdGhlIGNhbGN1bGF0aW9ucyBmb3JcbiAgICAvLyBwb3NpdGlvbmluZyB0aGUgbWVudSBjb3JyZWN0bHlcbiAgICBzZXRUaW1lb3V0KCgpID0+IHtcbiAgICAgIC8vIElmIHRoZXJlIGlzIGEgc2Nyb2xsV2lkdGhEaWZmLCBpdCBtZWFucyB0aGF0IHRoZSB3aWR0aCBvZiB0aGVcbiAgICAgIC8vIHZpZXdwb3J0cyBoYXMgY2hhbmdlZCBkdWUgdG8gcmVtb3ZlZCBzY3JvbGxiYXJzLCBhbmQgd2UgbmVlZCB0b1xuICAgICAgLy8gYWRqdXN0IHRoZSBwb3NpdGlvbiBvZiB0aGUgbWVudSB0byBiZSBzdGlsbCBwcm9wZXJseSBhbGlnbmVkIHdpdGhcbiAgICAgIC8vIHRoZSB0cmlnZ2VyXG4gICAgICBjb25zdCBzY3JvbGxXaWR0aERpZmYgPVxuICAgICAgICAoZG9jdW1lbnQuYm9keS5zY3JvbGxXaWR0aCAtIHNjcm9sbFdpZHRoQmVmb3JlKSAqIDAuNTtcblxuICAgICAgaWYgKG1lbnVJc0V4Y2VlZGluZ1ZpZXdwb3J0KSB7XG4gICAgICAgIG1lbnVFbC5zdHlsZS5sZWZ0ID0gYGNhbGMoICR7b3V0ZXJNYXJnaW59ICsgJHtzY3JvbGxXaWR0aERpZmZ9cHgpYDtcbiAgICAgIH0gZWxzZSBpZiAobWVudVhQb3NpdGlvbiA9PT0gJ2xlZnQnKSB7XG4gICAgICAgIG1lbnVFbC5zdHlsZS5sZWZ0ID0gYCR7dHJpZ2dlckRPTVJlY3QubGVmdCArIHNjcm9sbFdpZHRoRGlmZn1weGA7XG4gICAgICAgIG1lbnVFbC5zdHlsZS5yZW1vdmVQcm9wZXJ0eSgncmlnaHQnKTtcbiAgICAgIH0gZWxzZSB7XG4gICAgICAgIG1lbnVFbC5zdHlsZS5yaWdodCA9IGAke1xuICAgICAgICAgIHdpbmRvdy5pbm5lcldpZHRoIC0gdHJpZ2dlckRPTVJlY3QucmlnaHQgLSBzY3JvbGxXaWR0aERpZmZcbiAgICAgICAgfXB4YDtcbiAgICAgICAgbWVudUVsLnN0eWxlLnJlbW92ZVByb3BlcnR5KCdsZWZ0Jyk7XG4gICAgICB9XG5cbiAgICAgIGlmIChtZW51WVBvc2l0aW9uID09PSAnYmVsb3cnKSB7XG4gICAgICAgIG1lbnVFbC5zdHlsZS50b3AgPSBgY2FsYygke1xuICAgICAgICAgIHRyaWdnZXJET01SZWN0LnRvcCArIHRyaWdnZXJET01SZWN0LmhlaWdodFxuICAgICAgICB9cHggKyAke291dGVyTWFyZ2lufSlgO1xuICAgICAgfSBlbHNlIHtcbiAgICAgICAgLy8gTmVlZCB0byByZS1yZXF1ZXN0IGdldEJvdW5kaW5nQ2xpZW50UmVjdCgpIGJlY2F1c2UgdGhlIG1lbnUgaGVpZ2h0XG4gICAgICAgIC8vIG1pZ2h0IGhhdmUgY2hhbmdlZCB3aGVuIHRoZSBkcm9wZG93biBpcyBpbiAnYXV0bycgbW9kZTtcbiAgICAgICAgbGV0IGRlc2lyZWRNZW51SGVpZ2h0ID1cbiAgICAgICAgICBtZW51TWF4SGVpZ2h0IHx8IG1lbnVFbC5nZXRCb3VuZGluZ0NsaWVudFJlY3QoKS5oZWlnaHQ7XG5cbiAgICAgICAgbWVudUVsLnN0eWxlLnRvcCA9IGBjYWxjKCR7XG4gICAgICAgICAgdHJpZ2dlckRPTVJlY3QudG9wIC0gZGVzaXJlZE1lbnVIZWlnaHRcbiAgICAgICAgfXB4IC0gJHtvdXRlck1hcmdpbn0pYDtcbiAgICAgIH1cblxuICAgICAgaWYgKG1lbnVNYXhIZWlnaHQpIHtcbiAgICAgICAgLy8gQXBwbHkgdGhlIG1hbnVhbCBtYXgtd2lkdGhcbiAgICAgICAgbWVudUVsLnN0eWxlLm1heEhlaWdodCA9IG1lbnVNYXhIZWlnaHQgKyAncHgnO1xuICAgICAgfSBlbHNlIHtcbiAgICAgICAgLy8gTWFrZSBzdXJlIG1heC1oZWlnaHQgZG9lcyBub3QgZXhjZWVkIHRoZSBhdmFpbGFibGUgdG9wLSBvciBib3R0b20tc3BhY2VcbiAgICAgICAgbWVudUVsLnN0eWxlLm1heEhlaWdodCA9XG4gICAgICAgICAgbWVudVlQb3NpdGlvbiA9PT0gJ2JlbG93J1xuICAgICAgICAgICAgPyBgY2FsYygke1xuICAgICAgICAgICAgICAgIHdpbmRvdy5pbm5lckhlaWdodCAtIHRyaWdnZXJET01SZWN0LmJvdHRvbVxuICAgICAgICAgICAgICB9cHggLSAke291dGVyTWFyZ2lufSAtICR7Ym94U2hhZG93Qm90dG9tU2l6ZX0pYFxuICAgICAgICAgICAgOiBgY2FsYygke3RyaWdnZXJET01SZWN0LnRvcH1weCAtICR7b3V0ZXJNYXJnaW59IC0gJHtib3hTaGFkb3dCb3R0b21TaXplfSlgO1xuICAgICAgfVxuXG4gICAgICAvLyBBbGwgcG9zaXRpb25pbmcgb3BlcmF0aW9ucyBkb25lLCBtYWtlIG1lbnUgdmlzaWJsZSBhZ2FpblxuICAgICAgbWVudUVsLnN0eWxlLnZpc2liaWxpdHkgPSAndmlzaWJsZSc7XG4gICAgfSwgMCk7XG5cbiAgICByZXR1cm4gKCkgPT4ge1xuICAgICAgW1xuICAgICAgICAndG9wJyxcbiAgICAgICAgJ2xlZnQnLFxuICAgICAgICAncmlnaHQnLFxuICAgICAgICAnYm90dG9tJyxcbiAgICAgICAgJ3dpZHRoJyxcbiAgICAgICAgJ2hlaWdodCcsXG4gICAgICAgICdtYXhIZWlnaHQnLFxuICAgICAgICAndmlzaWJpbGl0eScsXG4gICAgICBdLmZvckVhY2goKHByb3ApID0+IHtcbiAgICAgICAgbWVudUVsLnN0eWxlLnJlbW92ZVByb3BlcnR5KHByb3ApO1xuICAgICAgfSk7XG4gICAgfTtcbiAgfSwgW1xuICAgIHByb3BzLmlzT3BlbixcbiAgICBwcm9wcy5tZW51UG9zaXRpb24sXG4gICAgcHJvcHMudHJpZ2dlckVsZW1lbnRSZWYsXG4gICAgcHJvcHMubWVudU1heEhlaWdodCxcbiAgXSk7XG5cbiAgcmV0dXJuIChcbiAgICA8ZGl2XG4gICAgICBjc3M9e2dldERyb3Bkb3duTWVudUJhc2VTdHlsZXMocHJvcHMpfVxuICAgICAgc3R5bGU9e3Byb3BzLmN1c3RvbVN0eWxlc31cbiAgICAgIHJlZj17bWVudVJlZn1cbiAgICA+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();
-      menuRef.current.style.top = "".concat(triggerElementCoordinates.top + triggerElementCoordinates.height, "px");
-      if (props.menuPosition === 'left') {
-        menuRef.current.style.left = "".concat(triggerElementCoordinates.left, "px");
-        menuRef.current.style.removeProperty('right');
+    if (!props.isOpen || !props.triggerElementRef.current || !menuRef.current) {
+      return;
+    }
+    const menuMaxHeight = props.menuMaxHeight;
+    const menuEl = menuRef.current;
+    const menuTriggerEl = props.triggerElementRef.current;
+    const menuDOMRect = menuEl.getBoundingClientRect();
+    const triggerDOMRect = menuTriggerEl.getBoundingClientRect();
+
+    // By default, the menu is not exceeding the viewport, this can change though
+    let menuIsExceedingViewport = false;
+    if (menuDOMRect.width >= document.body.scrollWidth) {
+      var _context;
+      // If the menu width is greater than the body width, we need to set the width of the menu to the body width
+      // to prevent the menu from overflowing, this happens usually when the horizontalConstraint is set to 'auto'
+      menuEl.style.width = _concatInstanceProperty(_context = "calc(".concat(document.body.scrollWidth, "px - 2 * ")).call(_context, outerMargin, ")");
+      menuIsExceedingViewport = true;
+    }
+
+    // The preferred/ideal height of the menu (which might change later if there is
+    // not enough screen estate)
+    let desiredMenuHeight = menuMaxHeight || menuDOMRect.height;
+    const menuWidth = menuDOMRect.width;
+    const availableSpaceTop = triggerDOMRect.top;
+    const availableSpaceBottom = window.innerHeight - triggerDOMRect.bottom;
+
+    // Prefer rendering below the trigger element if there is enough space
+    // to display the whole menu, otherwise render wherever there is more space
+    const menuYPosition = availableSpaceBottom >= desiredMenuHeight ? 'below' : availableSpaceBottom > availableSpaceTop ? 'below' : 'above';
+    let menuXPosition;
+    if (props.menuPosition === 'left') {
+      const distanceToRightEdge = window.innerWidth - triggerDOMRect.left;
+      menuXPosition = distanceToRightEdge >= menuWidth ? 'left' : 'right';
+    }
+    if (props.menuPosition === 'right') {
+      const distanceToLeftEdge = triggerDOMRect.left + triggerDOMRect.width;
+      menuXPosition = distanceToLeftEdge >= menuWidth ? 'right' : 'left';
+    }
+    // Since scrolling will be disabled by a hook, possibly on the body-element,
+    // the available viewport-width might change, thus, the positioning of the
+    // menu would be affected, hence we need to get the scroll-width before the
+    // menu renders
+    const scrollWidthBefore = document.body.scrollWidth;
+
+    // Using setTimeout allows us to get the correct dimensions & positions
+    // of the trigger- & menu-element first before doing the calculations for
+    // positioning the menu correctly
+    _setTimeout(() => {
+      // If there is a scrollWidthDiff, it means that the width of the
+      // viewports has changed due to removed scrollbars, and we need to
+      // adjust the position of the menu to be still properly aligned with
+      // the trigger
+      const scrollWidthDiff = (document.body.scrollWidth - scrollWidthBefore) * 0.5;
+      if (menuIsExceedingViewport) {
+        var _context2;
+        menuEl.style.left = _concatInstanceProperty(_context2 = "calc( ".concat(outerMargin, " + ")).call(_context2, scrollWidthDiff, "px)");
+      } else if (menuXPosition === 'left') {
+        menuEl.style.left = "".concat(triggerDOMRect.left + scrollWidthDiff, "px");
+        menuEl.style.removeProperty('right');
       } else {
-        menuRef.current.style.right = "".concat(window.innerWidth - triggerElementCoordinates.right, "px");
-        menuRef.current.style.removeProperty('left');
+        menuEl.style.right = "".concat(window.innerWidth - triggerDOMRect.right - scrollWidthDiff, "px");
+        menuEl.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, ")");
-    }
+      if (menuYPosition === 'below') {
+        var _context3;
+        menuEl.style.top = _concatInstanceProperty(_context3 = "calc(".concat(triggerDOMRect.top + triggerDOMRect.height, "px + ")).call(_context3, outerMargin, ")");
+      } else {
+        var _context4;
+        // Need to re-request getBoundingClientRect() because the menu height
+        // might have changed when the dropdown is in 'auto' mode;
+        let desiredMenuHeight = menuMaxHeight || menuEl.getBoundingClientRect().height;
+        menuEl.style.top = _concatInstanceProperty(_context4 = "calc(".concat(triggerDOMRect.top - desiredMenuHeight, "px - ")).call(_context4, outerMargin, ")");
+      }
+      if (menuMaxHeight) {
+        // Apply the manual max-width
+        menuEl.style.maxHeight = menuMaxHeight + 'px';
+      } else {
+        var _context5, _context6, _context7, _context8;
+        // Make sure max-height does not exceed the available top- or bottom-space
+        menuEl.style.maxHeight = menuYPosition === 'below' ? _concatInstanceProperty(_context5 = _concatInstanceProperty(_context6 = "calc(".concat(window.innerHeight - triggerDOMRect.bottom, "px - ")).call(_context6, outerMargin, " - ")).call(_context5, boxShadowBottomSize, ")") : _concatInstanceProperty(_context7 = _concatInstanceProperty(_context8 = "calc(".concat(triggerDOMRect.top, "px - ")).call(_context8, outerMargin, " - ")).call(_context7, boxShadowBottomSize, ")");
+      }
+
+      // All positioning operations done, make menu visible again
+      menuEl.style.visibility = 'visible';
+    }, 0);
+    return () => {
+      var _context9;
+      _forEachInstanceProperty(_context9 = ['top', 'left', 'right', 'bottom', 'width', 'height', 'maxHeight', 'visibility']).call(_context9, prop => {
+        menuEl.style.removeProperty(prop);
+      });
+    };
   }, [props.isOpen, props.menuPosition, props.triggerElementRef, props.menuMaxHeight]);
   return jsx("div", {
     css: getDropdownMenuBaseStyles(props),
@@ -253,6 +332,6 @@ DropdownMenu.defaultProps = defaultProps;
 DropdownMenu.ListMenuItem = DropdownListMenuItem;
 
 // NOTE: This string will be replaced on build time with the package version.
-var version = "19.4.0";
+var version = "19.6.0";
 
 export { DropdownMenu as default, useDropdownMenuContext, version };

package/dist/declarations/src/context/dropdown-menu-context.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export type TDropdownMenuContextProps = {
     isOpen: boolean;
     toggle: () => void;

package/package.json

@@ -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.4.0",
+  "version": "19.6.0",
   "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.4.0",
-    "@commercetools-uikit/constraints": "19.4.0",
-    "@commercetools-uikit/design-system": "19.4.0",
-    "@commercetools-uikit/hooks": "19.4.0",
-    "@commercetools-uikit/secondary-button": "19.4.0",
-    "@commercetools-uikit/spacings-inline": "19.4.0",
-    "@commercetools-uikit/spacings-stack": "19.4.0",
-    "@commercetools-uikit/utils": "19.4.0",
+    "@commercetools-uikit/accessible-button": "19.6.0",
+    "@commercetools-uikit/constraints": "19.6.0",
+    "@commercetools-uikit/design-system": "19.6.0",
+    "@commercetools-uikit/hooks": "19.6.0",
+    "@commercetools-uikit/secondary-button": "19.6.0",
+    "@commercetools-uikit/spacings-inline": "19.6.0",
+    "@commercetools-uikit/spacings-stack": "19.6.0",
+    "@commercetools-uikit/utils": "19.6.0",
     "@emotion/react": "^11.10.5",
     "@emotion/styled": "^11.10.5",
     "prop-types": "15.8.1",