@commercetools-uikit/dropdown-menu 20.2.3 → 20.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/dist/commercetools-uikit-dropdown-menu.cjs.dev.js +22 -13
  2. package/dist/commercetools-uikit-dropdown-menu.cjs.prod.js +22 -13
  3. package/dist/commercetools-uikit-dropdown-menu.esm.js +21 -13
  4. package/package.json +10 -10
package/dist/commercetools-uikit-dropdown-menu.cjs.dev.js CHANGED
@@ -18,6 +18,7 @@ var react = require('react');
18
18
  var utils = require('@commercetools-uikit/utils');
19
19
  var hooks = require('@commercetools-uikit/hooks');
20
20
  var jsxRuntime = require('@emotion/react/jsx-runtime');
21
+ var _concatInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/concat');
21
22
  var _setTimeout = require('@babel/runtime-corejs3/core-js-stable/set-timeout');
22
23
  var react$1 = require('@emotion/react');
23
24
  var designSystem = require('@commercetools-uikit/design-system');
@@ -36,6 +37,7 @@ var _Object$getOwnPropertyDescriptors__default = /*#__PURE__*/_interopDefault(_O
36
37
  var _Object$defineProperties__default = /*#__PURE__*/_interopDefault(_Object$defineProperties);
37
38
  var _Object$defineProperty__default = /*#__PURE__*/_interopDefault(_Object$defineProperty);
38
39
  var _styled__default = /*#__PURE__*/_interopDefault(_styled);
40
+ var _concatInstanceProperty__default = /*#__PURE__*/_interopDefault(_concatInstanceProperty);
39
41
  var _setTimeout__default = /*#__PURE__*/_interopDefault(_setTimeout);
40
42
  var Constraints__default = /*#__PURE__*/_interopDefault(Constraints);
41
43
  var SpacingsStack__default = /*#__PURE__*/_interopDefault(SpacingsStack);
@@ -67,7 +69,7 @@ DropDownTrigger.displayName = 'DropDownTrigger';
67
69
  var DropdownTrigger = DropDownTrigger;
68
70
 
69
71
  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; }
70
- 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; }
72
+ function _objectSpread$2(e) { for (var r = 1; r < arguments.length; r++) { var _context0, _context1; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context0 = ownKeys$2(Object(t), !0)).call(_context0, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context1 = ownKeys$2(Object(t))).call(_context1, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
71
73
  const boxShadowBottomSize = '5px';
72
74
  const outerMargin = designSystem.designTokens.spacing20;
73
75
  function getDropdownMenuBaseStyles(params) {
@@ -88,9 +90,10 @@ function DropdownBaseMenu(props) {
88
90
  // By default, the menu is not exceeding the viewport, this can change though
89
91
  let menuIsExceedingViewport = false;
90
92
  if (menuDOMRect.width >= document.body.scrollWidth) {
93
+ var _context;
91
94
  // If the menu width is greater than the body width, we need to set the width of the menu to the body width
92
95
  // to prevent the menu from overflowing, this happens usually when the horizontalConstraint is set to 'auto'
93
- menuEl.style.width = `calc(${document.body.scrollWidth}px - 2 * ${outerMargin})`;
96
+ menuEl.style.width = _concatInstanceProperty__default["default"](_context = "calc(".concat(document.body.scrollWidth, "px - 2 * ")).call(_context, outerMargin, ")");
94
97
  menuIsExceedingViewport = true;
95
98
  }
96
99
 
@@ -129,36 +132,40 @@ function DropdownBaseMenu(props) {
129
132
  // the trigger
130
133
  const scrollWidthDiff = (document.body.scrollWidth - scrollWidthBefore) * 0.5;
131
134
  if (menuIsExceedingViewport) {
132
- menuEl.style.left = `calc( ${outerMargin} + ${scrollWidthDiff}px)`;
135
+ var _context2;
136
+ menuEl.style.left = _concatInstanceProperty__default["default"](_context2 = "calc( ".concat(outerMargin, " + ")).call(_context2, scrollWidthDiff, "px)");
133
137
  } else if (menuXPosition === 'left') {
134
- menuEl.style.left = `${triggerDOMRect.left + scrollWidthDiff}px`;
138
+ menuEl.style.left = "".concat(triggerDOMRect.left + scrollWidthDiff, "px");
135
139
  menuEl.style.removeProperty('right');
136
140
  } else {
137
- menuEl.style.right = `${window.innerWidth - triggerDOMRect.right - scrollWidthDiff}px`;
141
+ menuEl.style.right = "".concat(window.innerWidth - triggerDOMRect.right - scrollWidthDiff, "px");
138
142
  menuEl.style.removeProperty('left');
139
143
  }
140
144
  if (menuYPosition === 'below') {
141
- menuEl.style.top = `calc(${triggerDOMRect.top + triggerDOMRect.height}px + ${outerMargin})`;
145
+ var _context3;
146
+ menuEl.style.top = _concatInstanceProperty__default["default"](_context3 = "calc(".concat(triggerDOMRect.top + triggerDOMRect.height, "px + ")).call(_context3, outerMargin, ")");
142
147
  } else {
148
+ var _context4;
143
149
  // Need to re-request getBoundingClientRect() because the menu height
144
150
  // might have changed when the dropdown is in 'auto' mode;
145
151
  let desiredMenuHeight = menuMaxHeight || menuEl.getBoundingClientRect().height;
146
- menuEl.style.top = `calc(${triggerDOMRect.top - desiredMenuHeight}px - ${outerMargin})`;
152
+ menuEl.style.top = _concatInstanceProperty__default["default"](_context4 = "calc(".concat(triggerDOMRect.top - desiredMenuHeight, "px - ")).call(_context4, outerMargin, ")");
147
153
  }
148
154
  if (menuMaxHeight) {
149
155
  // Apply the manual max-width
150
156
  menuEl.style.maxHeight = menuMaxHeight + 'px';
151
157
  } else {
158
+ var _context5, _context6, _context7, _context8;
152
159
  // Make sure max-height does not exceed the available top- or bottom-space
153
- menuEl.style.maxHeight = menuYPosition === 'below' ? `calc(${window.innerHeight - triggerDOMRect.bottom}px - ${outerMargin} - ${boxShadowBottomSize})` : `calc(${triggerDOMRect.top}px - ${outerMargin} - ${boxShadowBottomSize})`;
160
+ 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, ")");
154
161
  }
155
162
 
156
163
  // All positioning operations done, make menu visible again
157
164
  menuEl.style.visibility = 'visible';
158
165
  }, 0);
159
166
  return () => {
160
- var _context;
161
- _forEachInstanceProperty__default["default"](_context = ['top', 'left', 'right', 'bottom', 'width', 'height', 'maxHeight', 'visibility']).call(_context, prop => {
167
+ var _context9;
168
+ _forEachInstanceProperty__default["default"](_context9 = ['top', 'left', 'right', 'bottom', 'width', 'height', 'maxHeight', 'visibility']).call(_context9, prop => {
162
169
  menuEl.style.removeProperty(prop);
163
170
  });
164
171
  };
@@ -211,8 +218,9 @@ function DropdownListMenuItem(props) {
211
218
  return jsxRuntime.jsx(AccessibleButton__default["default"], _objectSpread$1(_objectSpread$1({
212
219
  label: props.children,
213
220
  onClick: () => {
221
+ var _props$onClick;
214
222
  toggle();
215
- props.onClick?.();
223
+ (_props$onClick = props.onClick) === null || _props$onClick === void 0 || _props$onClick.call(props);
216
224
  },
217
225
  isDisabled: props.isDisabled,
218
226
  css: getDropdownListMenuItemStyles(props)
@@ -295,8 +303,9 @@ function DropdownMenu(_ref) {
295
303
 
296
304
  // Close the dropdown when clicking outside of it
297
305
  const handleGlobalClick = react.useCallback(event => {
306
+ var _triggerElement$paren;
298
307
  const triggerElement = triggerRef.current;
299
- if (isOpen && triggerElement && event.target !== triggerElement && window.document.contains(event.target) && !triggerElement.parentElement?.contains(event.target)) {
308
+ 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))) {
300
309
  toggle(false);
301
310
  }
302
311
  }, [triggerRef, toggle, isOpen]);
@@ -336,7 +345,7 @@ function DropdownMenu(_ref) {
336
345
  DropdownMenu.ListMenuItem = DropdownListMenuItem;
337
346
 
338
347
  // NOTE: This string will be replaced on build time with the package version.
339
- var version = "20.2.3";
348
+ var version = "20.3.0";
340
349
 
341
350
  exports["default"] = DropdownMenu;
342
351
  exports.useDropdownMenuContext = useDropdownMenuContext;
package/dist/commercetools-uikit-dropdown-menu.cjs.prod.js CHANGED
@@ -18,6 +18,7 @@ var react = require('react');
18
18
  var utils = require('@commercetools-uikit/utils');
19
19
  var hooks = require('@commercetools-uikit/hooks');
20
20
  var jsxRuntime = require('@emotion/react/jsx-runtime');
21
+ var _concatInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/concat');
21
22
  var _setTimeout = require('@babel/runtime-corejs3/core-js-stable/set-timeout');
22
23
  var react$1 = require('@emotion/react');
23
24
  var designSystem = require('@commercetools-uikit/design-system');
@@ -36,6 +37,7 @@ var _Object$getOwnPropertyDescriptors__default = /*#__PURE__*/_interopDefault(_O
36
37
  var _Object$defineProperties__default = /*#__PURE__*/_interopDefault(_Object$defineProperties);
37
38
  var _Object$defineProperty__default = /*#__PURE__*/_interopDefault(_Object$defineProperty);
38
39
  var _styled__default = /*#__PURE__*/_interopDefault(_styled);
40
+ var _concatInstanceProperty__default = /*#__PURE__*/_interopDefault(_concatInstanceProperty);
39
41
  var _setTimeout__default = /*#__PURE__*/_interopDefault(_setTimeout);
40
42
  var Constraints__default = /*#__PURE__*/_interopDefault(Constraints);
41
43
  var SpacingsStack__default = /*#__PURE__*/_interopDefault(SpacingsStack);
@@ -67,7 +69,7 @@ DropDownTrigger.displayName = 'DropDownTrigger';
67
69
  var DropdownTrigger = DropDownTrigger;
68
70
 
69
71
  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; }
70
- 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; }
72
+ function _objectSpread$2(e) { for (var r = 1; r < arguments.length; r++) { var _context0, _context1; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context0 = ownKeys$2(Object(t), !0)).call(_context0, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context1 = ownKeys$2(Object(t))).call(_context1, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
71
73
  const boxShadowBottomSize = '5px';
72
74
  const outerMargin = designSystem.designTokens.spacing20;
73
75
  function getDropdownMenuBaseStyles(params) {
@@ -88,9 +90,10 @@ function DropdownBaseMenu(props) {
88
90
  // By default, the menu is not exceeding the viewport, this can change though
89
91
  let menuIsExceedingViewport = false;
90
92
  if (menuDOMRect.width >= document.body.scrollWidth) {
93
+ var _context;
91
94
  // If the menu width is greater than the body width, we need to set the width of the menu to the body width
92
95
  // to prevent the menu from overflowing, this happens usually when the horizontalConstraint is set to 'auto'
93
- menuEl.style.width = `calc(${document.body.scrollWidth}px - 2 * ${outerMargin})`;
96
+ menuEl.style.width = _concatInstanceProperty__default["default"](_context = "calc(".concat(document.body.scrollWidth, "px - 2 * ")).call(_context, outerMargin, ")");
94
97
  menuIsExceedingViewport = true;
95
98
  }
96
99
 
@@ -129,36 +132,40 @@ function DropdownBaseMenu(props) {
129
132
  // the trigger
130
133
  const scrollWidthDiff = (document.body.scrollWidth - scrollWidthBefore) * 0.5;
131
134
  if (menuIsExceedingViewport) {
132
- menuEl.style.left = `calc( ${outerMargin} + ${scrollWidthDiff}px)`;
135
+ var _context2;
136
+ menuEl.style.left = _concatInstanceProperty__default["default"](_context2 = "calc( ".concat(outerMargin, " + ")).call(_context2, scrollWidthDiff, "px)");
133
137
  } else if (menuXPosition === 'left') {
134
- menuEl.style.left = `${triggerDOMRect.left + scrollWidthDiff}px`;
138
+ menuEl.style.left = "".concat(triggerDOMRect.left + scrollWidthDiff, "px");
135
139
  menuEl.style.removeProperty('right');
136
140
  } else {
137
- menuEl.style.right = `${window.innerWidth - triggerDOMRect.right - scrollWidthDiff}px`;
141
+ menuEl.style.right = "".concat(window.innerWidth - triggerDOMRect.right - scrollWidthDiff, "px");
138
142
  menuEl.style.removeProperty('left');
139
143
  }
140
144
  if (menuYPosition === 'below') {
141
- menuEl.style.top = `calc(${triggerDOMRect.top + triggerDOMRect.height}px + ${outerMargin})`;
145
+ var _context3;
146
+ menuEl.style.top = _concatInstanceProperty__default["default"](_context3 = "calc(".concat(triggerDOMRect.top + triggerDOMRect.height, "px + ")).call(_context3, outerMargin, ")");
142
147
  } else {
148
+ var _context4;
143
149
  // Need to re-request getBoundingClientRect() because the menu height
144
150
  // might have changed when the dropdown is in 'auto' mode;
145
151
  let desiredMenuHeight = menuMaxHeight || menuEl.getBoundingClientRect().height;
146
- menuEl.style.top = `calc(${triggerDOMRect.top - desiredMenuHeight}px - ${outerMargin})`;
152
+ menuEl.style.top = _concatInstanceProperty__default["default"](_context4 = "calc(".concat(triggerDOMRect.top - desiredMenuHeight, "px - ")).call(_context4, outerMargin, ")");
147
153
  }
148
154
  if (menuMaxHeight) {
149
155
  // Apply the manual max-width
150
156
  menuEl.style.maxHeight = menuMaxHeight + 'px';
151
157
  } else {
158
+ var _context5, _context6, _context7, _context8;
152
159
  // Make sure max-height does not exceed the available top- or bottom-space
153
- menuEl.style.maxHeight = menuYPosition === 'below' ? `calc(${window.innerHeight - triggerDOMRect.bottom}px - ${outerMargin} - ${boxShadowBottomSize})` : `calc(${triggerDOMRect.top}px - ${outerMargin} - ${boxShadowBottomSize})`;
160
+ 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, ")");
154
161
  }
155
162
 
156
163
  // All positioning operations done, make menu visible again
157
164
  menuEl.style.visibility = 'visible';
158
165
  }, 0);
159
166
  return () => {
160
- var _context;
161
- _forEachInstanceProperty__default["default"](_context = ['top', 'left', 'right', 'bottom', 'width', 'height', 'maxHeight', 'visibility']).call(_context, prop => {
167
+ var _context9;
168
+ _forEachInstanceProperty__default["default"](_context9 = ['top', 'left', 'right', 'bottom', 'width', 'height', 'maxHeight', 'visibility']).call(_context9, prop => {
162
169
  menuEl.style.removeProperty(prop);
163
170
  });
164
171
  };
@@ -211,8 +218,9 @@ function DropdownListMenuItem(props) {
211
218
  return jsxRuntime.jsx(AccessibleButton__default["default"], _objectSpread$1(_objectSpread$1({
212
219
  label: props.children,
213
220
  onClick: () => {
221
+ var _props$onClick;
214
222
  toggle();
215
- props.onClick?.();
223
+ (_props$onClick = props.onClick) === null || _props$onClick === void 0 || _props$onClick.call(props);
216
224
  },
217
225
  isDisabled: props.isDisabled,
218
226
  css: getDropdownListMenuItemStyles(props)
@@ -287,8 +295,9 @@ function DropdownMenu(_ref) {
287
295
 
288
296
  // Close the dropdown when clicking outside of it
289
297
  const handleGlobalClick = react.useCallback(event => {
298
+ var _triggerElement$paren;
290
299
  const triggerElement = triggerRef.current;
291
- if (isOpen && triggerElement && event.target !== triggerElement && window.document.contains(event.target) && !triggerElement.parentElement?.contains(event.target)) {
300
+ 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))) {
292
301
  toggle(false);
293
302
  }
294
303
  }, [triggerRef, toggle, isOpen]);
@@ -328,7 +337,7 @@ function DropdownMenu(_ref) {
328
337
  DropdownMenu.ListMenuItem = DropdownListMenuItem;
329
338
 
330
339
  // NOTE: This string will be replaced on build time with the package version.
331
- var version = "20.2.3";
340
+ var version = "20.3.0";
332
341
 
333
342
  exports["default"] = DropdownMenu;
334
343
  exports.useDropdownMenuContext = useDropdownMenuContext;
package/dist/commercetools-uikit-dropdown-menu.esm.js CHANGED
@@ -14,6 +14,7 @@ import { useContext, createContext, forwardRef, useRef, useLayoutEffect, useMemo
14
14
  import { filterDataAttributes } from '@commercetools-uikit/utils';
15
15
  import { useToggleState } from '@commercetools-uikit/hooks';
16
16
  import { jsx, jsxs } from '@emotion/react/jsx-runtime';
17
+ import _concatInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/concat';
17
18
  import _setTimeout from '@babel/runtime-corejs3/core-js-stable/set-timeout';
18
19
  import { css } from '@emotion/react';
19
20
  import { designTokens } from '@commercetools-uikit/design-system';
@@ -47,7 +48,7 @@ DropDownTrigger.displayName = 'DropDownTrigger';
47
48
  var DropdownTrigger = DropDownTrigger;
48
49
 
49
50
  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; }
50
- 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; }
51
+ function _objectSpread$2(e) { for (var r = 1; r < arguments.length; r++) { var _context0, _context1; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context0 = ownKeys$2(Object(t), !0)).call(_context0, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context1 = ownKeys$2(Object(t))).call(_context1, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
51
52
  const boxShadowBottomSize = '5px';
52
53
  const outerMargin = designTokens.spacing20;
53
54
  function getDropdownMenuBaseStyles(params) {
@@ -68,9 +69,10 @@ function DropdownBaseMenu(props) {
68
69
  // By default, the menu is not exceeding the viewport, this can change though
69
70
  let menuIsExceedingViewport = false;
70
71
  if (menuDOMRect.width >= document.body.scrollWidth) {
72
+ var _context;
71
73
  // If the menu width is greater than the body width, we need to set the width of the menu to the body width
72
74
  // to prevent the menu from overflowing, this happens usually when the horizontalConstraint is set to 'auto'
73
- menuEl.style.width = `calc(${document.body.scrollWidth}px - 2 * ${outerMargin})`;
75
+ menuEl.style.width = _concatInstanceProperty(_context = "calc(".concat(document.body.scrollWidth, "px - 2 * ")).call(_context, outerMargin, ")");
74
76
  menuIsExceedingViewport = true;
75
77
  }
76
78
 
@@ -109,36 +111,40 @@ function DropdownBaseMenu(props) {
109
111
  // the trigger
110
112
  const scrollWidthDiff = (document.body.scrollWidth - scrollWidthBefore) * 0.5;
111
113
  if (menuIsExceedingViewport) {
112
- menuEl.style.left = `calc( ${outerMargin} + ${scrollWidthDiff}px)`;
114
+ var _context2;
115
+ menuEl.style.left = _concatInstanceProperty(_context2 = "calc( ".concat(outerMargin, " + ")).call(_context2, scrollWidthDiff, "px)");
113
116
  } else if (menuXPosition === 'left') {
114
- menuEl.style.left = `${triggerDOMRect.left + scrollWidthDiff}px`;
117
+ menuEl.style.left = "".concat(triggerDOMRect.left + scrollWidthDiff, "px");
115
118
  menuEl.style.removeProperty('right');
116
119
  } else {
117
- menuEl.style.right = `${window.innerWidth - triggerDOMRect.right - scrollWidthDiff}px`;
120
+ menuEl.style.right = "".concat(window.innerWidth - triggerDOMRect.right - scrollWidthDiff, "px");
118
121
  menuEl.style.removeProperty('left');
119
122
  }
120
123
  if (menuYPosition === 'below') {
121
- menuEl.style.top = `calc(${triggerDOMRect.top + triggerDOMRect.height}px + ${outerMargin})`;
124
+ var _context3;
125
+ menuEl.style.top = _concatInstanceProperty(_context3 = "calc(".concat(triggerDOMRect.top + triggerDOMRect.height, "px + ")).call(_context3, outerMargin, ")");
122
126
  } else {
127
+ var _context4;
123
128
  // Need to re-request getBoundingClientRect() because the menu height
124
129
  // might have changed when the dropdown is in 'auto' mode;
125
130
  let desiredMenuHeight = menuMaxHeight || menuEl.getBoundingClientRect().height;
126
- menuEl.style.top = `calc(${triggerDOMRect.top - desiredMenuHeight}px - ${outerMargin})`;
131
+ menuEl.style.top = _concatInstanceProperty(_context4 = "calc(".concat(triggerDOMRect.top - desiredMenuHeight, "px - ")).call(_context4, outerMargin, ")");
127
132
  }
128
133
  if (menuMaxHeight) {
129
134
  // Apply the manual max-width
130
135
  menuEl.style.maxHeight = menuMaxHeight + 'px';
131
136
  } else {
137
+ var _context5, _context6, _context7, _context8;
132
138
  // Make sure max-height does not exceed the available top- or bottom-space
133
- menuEl.style.maxHeight = menuYPosition === 'below' ? `calc(${window.innerHeight - triggerDOMRect.bottom}px - ${outerMargin} - ${boxShadowBottomSize})` : `calc(${triggerDOMRect.top}px - ${outerMargin} - ${boxShadowBottomSize})`;
139
+ 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, ")");
134
140
  }
135
141
 
136
142
  // All positioning operations done, make menu visible again
137
143
  menuEl.style.visibility = 'visible';
138
144
  }, 0);
139
145
  return () => {
140
- var _context;
141
- _forEachInstanceProperty(_context = ['top', 'left', 'right', 'bottom', 'width', 'height', 'maxHeight', 'visibility']).call(_context, prop => {
146
+ var _context9;
147
+ _forEachInstanceProperty(_context9 = ['top', 'left', 'right', 'bottom', 'width', 'height', 'maxHeight', 'visibility']).call(_context9, prop => {
142
148
  menuEl.style.removeProperty(prop);
143
149
  });
144
150
  };
@@ -191,8 +197,9 @@ function DropdownListMenuItem(props) {
191
197
  return jsx(AccessibleButton, _objectSpread$1(_objectSpread$1({
192
198
  label: props.children,
193
199
  onClick: () => {
200
+ var _props$onClick;
194
201
  toggle();
195
- props.onClick?.();
202
+ (_props$onClick = props.onClick) === null || _props$onClick === void 0 || _props$onClick.call(props);
196
203
  },
197
204
  isDisabled: props.isDisabled,
198
205
  css: getDropdownListMenuItemStyles(props)
@@ -275,8 +282,9 @@ function DropdownMenu(_ref) {
275
282
 
276
283
  // Close the dropdown when clicking outside of it
277
284
  const handleGlobalClick = useCallback(event => {
285
+ var _triggerElement$paren;
278
286
  const triggerElement = triggerRef.current;
279
- if (isOpen && triggerElement && event.target !== triggerElement && window.document.contains(event.target) && !triggerElement.parentElement?.contains(event.target)) {
287
+ 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))) {
280
288
  toggle(false);
281
289
  }
282
290
  }, [triggerRef, toggle, isOpen]);
@@ -316,6 +324,6 @@ function DropdownMenu(_ref) {
316
324
  DropdownMenu.ListMenuItem = DropdownListMenuItem;
317
325
 
318
326
  // NOTE: This string will be replaced on build time with the package version.
319
- var version = "20.2.3";
327
+ var version = "20.3.0";
320
328
 
321
329
  export { DropdownMenu as default, useDropdownMenuContext, version };
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@commercetools-uikit/dropdown-menu",
3
3
  "description": "The Dropdown Menu component represents a component that triggers the rendering of a floating menu.",
4
- "version": "20.2.3",
4
+ "version": "20.3.0",
5
5
  "bugs": "https://github.com/commercetools/ui-kit/issues",
6
6
  "repository": {
7
7
  "type": "git",
@@ -21,20 +21,20 @@
21
21
  "dependencies": {
22
22
  "@babel/runtime": "^7.20.13",
23
23
  "@babel/runtime-corejs3": "^7.20.13",
24
- "@commercetools-uikit/accessible-button": "20.2.3",
25
- "@commercetools-uikit/constraints": "20.2.3",
26
- "@commercetools-uikit/design-system": "20.2.3",
27
- "@commercetools-uikit/hooks": "20.2.3",
28
- "@commercetools-uikit/secondary-button": "20.2.3",
29
- "@commercetools-uikit/spacings-inline": "20.2.3",
30
- "@commercetools-uikit/spacings-stack": "20.2.3",
31
- "@commercetools-uikit/utils": "20.2.3",
24
+ "@commercetools-uikit/accessible-button": "20.3.0",
25
+ "@commercetools-uikit/constraints": "20.3.0",
26
+ "@commercetools-uikit/design-system": "20.3.0",
27
+ "@commercetools-uikit/hooks": "20.3.0",
28
+ "@commercetools-uikit/secondary-button": "20.3.0",
29
+ "@commercetools-uikit/spacings-inline": "20.3.0",
30
+ "@commercetools-uikit/spacings-stack": "20.3.0",
31
+ "@commercetools-uikit/utils": "20.3.0",
32
32
  "@emotion/react": "^11.10.5",
33
33
  "@emotion/styled": "^11.10.5",
34
34
  "react-intl": "^7.1.4"
35
35
  },
36
36
  "devDependencies": {
37
- "react": "19.1.0"
37
+ "react": "19.2.0"
38
38
  },
39
39
  "peerDependencies": {
40
40
  "react": "19.x"