@commercetools-uikit/dropdown-menu 19.11.0 → 19.12.1

package/README.md

@@ -11,10 +11,7 @@ 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:
-
-- 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
+Something to bear in mind is that, when the panel is open, the document scroll is blocked.
 
 ## Installation
 

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

@@ -18,7 +18,6 @@ var react = require('react');
 var utils = require('@commercetools-uikit/utils');
 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 react$1 = require('@emotion/react');
 var designSystem = require('@commercetools-uikit/design-system');
@@ -38,7 +37,6 @@ var _Object$defineProperties__default = /*#__PURE__*/_interopDefault(_Object$def
 var _Object$defineProperty__default = /*#__PURE__*/_interopDefault(_Object$defineProperty);
 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 Constraints__default = /*#__PURE__*/_interopDefault(Constraints);
 var SpacingsStack__default = /*#__PURE__*/_interopDefault(SpacingsStack);
@@ -70,7 +68,7 @@ DropDownTrigger.displayName = 'DropDownTrigger';
 var DropdownTrigger = DropDownTrigger;
 
 function ownKeys$2(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$2(e) { for (var r = 1; r < arguments.length; r++) { var _context10, _context11; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context10 = ownKeys$2(Object(t), !0)).call(_context10, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context11 = ownKeys$2(Object(t))).call(_context11, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
+function _objectSpread$2(e) { for (var r = 1; r < arguments.length; r++) { var _context2, _context3; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context2 = ownKeys$2(Object(t), !0)).call(_context2, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context3 = ownKeys$2(Object(t))).call(_context3, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
 const boxShadowBottomSize = '5px';
 const outerMargin = designSystem.designTokens.spacing20;
 function getDropdownMenuBaseStyles(params) {
@@ -91,10 +89,9 @@ function DropdownBaseMenu(props) {
     // 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, ")");
+      menuEl.style.width = `calc(${document.body.scrollWidth}px - 2 * ${outerMargin})`;
       menuIsExceedingViewport = true;
     }
 
@@ -133,40 +130,36 @@ function DropdownBaseMenu(props) {
       // 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)");
+        menuEl.style.left = `calc( ${outerMargin} + ${scrollWidthDiff}px)`;
       } else if (menuXPosition === 'left') {
-        menuEl.style.left = "".concat(triggerDOMRect.left + scrollWidthDiff, "px");
+        menuEl.style.left = `${triggerDOMRect.left + scrollWidthDiff}px`;
         menuEl.style.removeProperty('right');
       } else {
-        menuEl.style.right = "".concat(window.innerWidth - triggerDOMRect.right - scrollWidthDiff, "px");
+        menuEl.style.right = `${window.innerWidth - triggerDOMRect.right - scrollWidthDiff}px`;
         menuEl.style.removeProperty('left');
       }
       if (menuYPosition === 'below') {
-        var _context3;
-        menuEl.style.top = _concatInstanceProperty__default["default"](_context3 = "calc(".concat(triggerDOMRect.top + triggerDOMRect.height, "px + ")).call(_context3, outerMargin, ")");
+        menuEl.style.top = `calc(${triggerDOMRect.top + triggerDOMRect.height}px + ${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, ")");
+        menuEl.style.top = `calc(${triggerDOMRect.top - desiredMenuHeight}px - ${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, ")");
+        menuEl.style.maxHeight = menuYPosition === 'below' ? `calc(${window.innerHeight - triggerDOMRect.bottom}px - ${outerMargin} - ${boxShadowBottomSize})` : `calc(${triggerDOMRect.top}px - ${outerMargin} - ${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 => {
+      var _context;
+      _forEachInstanceProperty__default["default"](_context = ['top', 'left', 'right', 'bottom', 'width', 'height', 'maxHeight', 'visibility']).call(_context, prop => {
         menuEl.style.removeProperty(prop);
       });
     };
@@ -244,9 +237,8 @@ function DropdownListMenuItem(props) {
   return jsxRuntime.jsx(AccessibleButton__default["default"], _objectSpread$1(_objectSpread$1({
     label: props.children,
     onClick: () => {
-      var _props$onClick;
       toggle();
-      (_props$onClick = props.onClick) === null || _props$onClick === void 0 || _props$onClick.call(props);
+      props.onClick?.();
     },
     isDisabled: props.isDisabled,
     css: getDropdownListMenuItemStyles(props)
@@ -327,9 +319,8 @@ function DropdownMenu(props) {
 
   // Close the dropdown when clicking outside of it
   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))) {
+    if (isOpen && triggerElement && event.target !== triggerElement && window.document.contains(event.target) && !triggerElement.parentElement?.contains(event.target)) {
       toggle(false);
     }
   }, [triggerRef, toggle, isOpen]);
@@ -374,7 +365,7 @@ DropdownMenu.defaultProps = defaultProps;
 DropdownMenu.ListMenuItem = DropdownListMenuItem;
 
 // NOTE: This string will be replaced on build time with the package version.
-var version = "19.11.0";
+var version = "19.12.1";
 
 exports["default"] = DropdownMenu;
 exports.useDropdownMenuContext = useDropdownMenuContext;

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

@@ -18,7 +18,6 @@ var react = require('react');
 var utils = require('@commercetools-uikit/utils');
 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 react$1 = require('@emotion/react');
 var designSystem = require('@commercetools-uikit/design-system');
@@ -37,7 +36,6 @@ var _Object$getOwnPropertyDescriptors__default = /*#__PURE__*/_interopDefault(_O
 var _Object$defineProperties__default = /*#__PURE__*/_interopDefault(_Object$defineProperties);
 var _Object$defineProperty__default = /*#__PURE__*/_interopDefault(_Object$defineProperty);
 var _styled__default = /*#__PURE__*/_interopDefault(_styled);
-var _concatInstanceProperty__default = /*#__PURE__*/_interopDefault(_concatInstanceProperty);
 var _setTimeout__default = /*#__PURE__*/_interopDefault(_setTimeout);
 var Constraints__default = /*#__PURE__*/_interopDefault(Constraints);
 var SpacingsStack__default = /*#__PURE__*/_interopDefault(SpacingsStack);
@@ -69,7 +67,7 @@ DropDownTrigger.displayName = 'DropDownTrigger';
 var DropdownTrigger = DropDownTrigger;
 
 function ownKeys$2(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$2(e) { for (var r = 1; r < arguments.length; r++) { var _context10, _context11; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context10 = ownKeys$2(Object(t), !0)).call(_context10, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context11 = ownKeys$2(Object(t))).call(_context11, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
+function _objectSpread$2(e) { for (var r = 1; r < arguments.length; r++) { var _context2, _context3; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context2 = ownKeys$2(Object(t), !0)).call(_context2, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context3 = ownKeys$2(Object(t))).call(_context3, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
 const boxShadowBottomSize = '5px';
 const outerMargin = designSystem.designTokens.spacing20;
 function getDropdownMenuBaseStyles(params) {
@@ -90,10 +88,9 @@ function DropdownBaseMenu(props) {
     // 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, ")");
+      menuEl.style.width = `calc(${document.body.scrollWidth}px - 2 * ${outerMargin})`;
       menuIsExceedingViewport = true;
     }
 
@@ -132,40 +129,36 @@ function DropdownBaseMenu(props) {
       // 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)");
+        menuEl.style.left = `calc( ${outerMargin} + ${scrollWidthDiff}px)`;
       } else if (menuXPosition === 'left') {
-        menuEl.style.left = "".concat(triggerDOMRect.left + scrollWidthDiff, "px");
+        menuEl.style.left = `${triggerDOMRect.left + scrollWidthDiff}px`;
         menuEl.style.removeProperty('right');
       } else {
-        menuEl.style.right = "".concat(window.innerWidth - triggerDOMRect.right - scrollWidthDiff, "px");
+        menuEl.style.right = `${window.innerWidth - triggerDOMRect.right - scrollWidthDiff}px`;
         menuEl.style.removeProperty('left');
       }
       if (menuYPosition === 'below') {
-        var _context3;
-        menuEl.style.top = _concatInstanceProperty__default["default"](_context3 = "calc(".concat(triggerDOMRect.top + triggerDOMRect.height, "px + ")).call(_context3, outerMargin, ")");
+        menuEl.style.top = `calc(${triggerDOMRect.top + triggerDOMRect.height}px + ${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, ")");
+        menuEl.style.top = `calc(${triggerDOMRect.top - desiredMenuHeight}px - ${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, ")");
+        menuEl.style.maxHeight = menuYPosition === 'below' ? `calc(${window.innerHeight - triggerDOMRect.bottom}px - ${outerMargin} - ${boxShadowBottomSize})` : `calc(${triggerDOMRect.top}px - ${outerMargin} - ${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 => {
+      var _context;
+      _forEachInstanceProperty__default["default"](_context = ['top', 'left', 'right', 'bottom', 'width', 'height', 'maxHeight', 'visibility']).call(_context, prop => {
         menuEl.style.removeProperty(prop);
       });
     };
@@ -221,9 +214,8 @@ function DropdownListMenuItem(props) {
   return jsxRuntime.jsx(AccessibleButton__default["default"], _objectSpread$1(_objectSpread$1({
     label: props.children,
     onClick: () => {
-      var _props$onClick;
       toggle();
-      (_props$onClick = props.onClick) === null || _props$onClick === void 0 || _props$onClick.call(props);
+      props.onClick?.();
     },
     isDisabled: props.isDisabled,
     css: getDropdownListMenuItemStyles(props)
@@ -295,9 +287,8 @@ function DropdownMenu(props) {
 
   // Close the dropdown when clicking outside of it
   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))) {
+    if (isOpen && triggerElement && event.target !== triggerElement && window.document.contains(event.target) && !triggerElement.parentElement?.contains(event.target)) {
       toggle(false);
     }
   }, [triggerRef, toggle, isOpen]);
@@ -335,7 +326,7 @@ DropdownMenu.defaultProps = defaultProps;
 DropdownMenu.ListMenuItem = DropdownListMenuItem;
 
 // NOTE: This string will be replaced on build time with the package version.
-var version = "19.11.0";
+var version = "19.12.1";
 
 exports["default"] = DropdownMenu;
 exports.useDropdownMenuContext = useDropdownMenuContext;

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

@@ -14,7 +14,6 @@ import { useContext, createContext, forwardRef, useRef, useLayoutEffect, useMemo
 import { filterDataAttributes } from '@commercetools-uikit/utils';
 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 { css } from '@emotion/react';
 import { designTokens } from '@commercetools-uikit/design-system';
@@ -48,7 +47,7 @@ DropDownTrigger.displayName = 'DropDownTrigger';
 var DropdownTrigger = DropDownTrigger;
 
 function ownKeys$2(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$2(e) { for (var r = 1; r < arguments.length; r++) { var _context10, _context11; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context10 = ownKeys$2(Object(t), !0)).call(_context10, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context11 = ownKeys$2(Object(t))).call(_context11, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _objectSpread$2(e) { for (var r = 1; r < arguments.length; r++) { var _context2, _context3; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context2 = ownKeys$2(Object(t), !0)).call(_context2, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context3 = ownKeys$2(Object(t))).call(_context3, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
 const boxShadowBottomSize = '5px';
 const outerMargin = designTokens.spacing20;
 function getDropdownMenuBaseStyles(params) {
@@ -69,10 +68,9 @@ function DropdownBaseMenu(props) {
     // 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, ")");
+      menuEl.style.width = `calc(${document.body.scrollWidth}px - 2 * ${outerMargin})`;
       menuIsExceedingViewport = true;
     }
 
@@ -111,40 +109,36 @@ function DropdownBaseMenu(props) {
       // 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)");
+        menuEl.style.left = `calc( ${outerMargin} + ${scrollWidthDiff}px)`;
       } else if (menuXPosition === 'left') {
-        menuEl.style.left = "".concat(triggerDOMRect.left + scrollWidthDiff, "px");
+        menuEl.style.left = `${triggerDOMRect.left + scrollWidthDiff}px`;
         menuEl.style.removeProperty('right');
       } else {
-        menuEl.style.right = "".concat(window.innerWidth - triggerDOMRect.right - scrollWidthDiff, "px");
+        menuEl.style.right = `${window.innerWidth - triggerDOMRect.right - scrollWidthDiff}px`;
         menuEl.style.removeProperty('left');
       }
       if (menuYPosition === 'below') {
-        var _context3;
-        menuEl.style.top = _concatInstanceProperty(_context3 = "calc(".concat(triggerDOMRect.top + triggerDOMRect.height, "px + ")).call(_context3, outerMargin, ")");
+        menuEl.style.top = `calc(${triggerDOMRect.top + triggerDOMRect.height}px + ${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, ")");
+        menuEl.style.top = `calc(${triggerDOMRect.top - desiredMenuHeight}px - ${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, ")");
+        menuEl.style.maxHeight = menuYPosition === 'below' ? `calc(${window.innerHeight - triggerDOMRect.bottom}px - ${outerMargin} - ${boxShadowBottomSize})` : `calc(${triggerDOMRect.top}px - ${outerMargin} - ${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 => {
+      var _context;
+      _forEachInstanceProperty(_context = ['top', 'left', 'right', 'bottom', 'width', 'height', 'maxHeight', 'visibility']).call(_context, prop => {
         menuEl.style.removeProperty(prop);
       });
     };
@@ -222,9 +216,8 @@ function DropdownListMenuItem(props) {
   return jsx(AccessibleButton, _objectSpread$1(_objectSpread$1({
     label: props.children,
     onClick: () => {
-      var _props$onClick;
       toggle();
-      (_props$onClick = props.onClick) === null || _props$onClick === void 0 || _props$onClick.call(props);
+      props.onClick?.();
     },
     isDisabled: props.isDisabled,
     css: getDropdownListMenuItemStyles(props)
@@ -305,9 +298,8 @@ function DropdownMenu(props) {
 
   // Close the dropdown when clicking outside of it
   const handleGlobalClick = 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))) {
+    if (isOpen && triggerElement && event.target !== triggerElement && window.document.contains(event.target) && !triggerElement.parentElement?.contains(event.target)) {
       toggle(false);
     }
   }, [triggerRef, toggle, isOpen]);
@@ -352,6 +344,6 @@ DropdownMenu.defaultProps = defaultProps;
 DropdownMenu.ListMenuItem = DropdownListMenuItem;
 
 // NOTE: This string will be replaced on build time with the package version.
-var version = "19.11.0";
+var version = "19.12.1";
 
 export { DropdownMenu as default, useDropdownMenuContext, version };

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

@@ -3,7 +3,7 @@ import { type TMaxProp } from '@commercetools-uikit/constraints';
 export declare function getDropdownMenuBaseStyles(params: {
     isOpen: boolean;
     horizontalConstraint: TMaxProp;
-}): import("@emotion/utils").SerializedStyles;
+}): import("@emotion/react").SerializedStyles;
 export type TDropdownContentMenuProps = {
     children: ReactNode;
     horizontalConstraint: TMaxProp;

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