@laerdal/life-react-components 2.0.1-dev.9 → 2.1.0-dev.3

package/dist/Dropdown/DropdownContent.cjs

@@ -1,54 +1,32 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.DDContainer = void 0;
-
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _react = _interopRequireDefault(require("react"));
-
 var _styledComponents = _interopRequireDefault(require("styled-components"));
-
 var _Button = _interopRequireDefault(require("../Button/Button"));
-
 var _types = require("../types");
-
 var _CommonStyling = require("./CommonStyling");
-
 var _typography = require("../styles/typography");
-
 var _styles = require("../styles");
-
 var _InputFields = require("../InputFields");
-
 var _zIndexes = require("../styles/z-indexes");
-
 var _MenuItem = _interopRequireDefault(require("../MenuItem/MenuItem"));
-
 var _jsxRuntime = require("react/jsx-runtime");
-
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
-
 function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
-
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
-
 var MAX_MENU_HEIGHT = 240;
 var AVG_OPTION_HEIGHT = 48;
 var OFFSET_BEFORE_SHOW = 1000000;
-
 var DDContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: none;\n  pointer-events: auto;\n  position: absolute;\n  background-color: ", ";\n\n  z-index: ", ";\n  margin: ", ";\n\n  &.show {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    &.down,\n    &.up {\n      ", "\n    }\n  }\n\n  transform: translate(-", "px, -", "px);\n\n  &.outline:focus:after {\n    content: '';\n    pointer-events: none;\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    outline: 4px solid black;\n    outline-offset: 2px;\n    border-radius: 2px;\n  }\n\n  &:focus {\n    outline: none;\n  }\n\n  ", ";\n\n  border: 1px solid ", ";\n  box-sizing: border-box;\n  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15);\n  padding: 4px 0px;\n\n  min-width: ", ";\n  border-radius: ", ";\n\n  max-height: ", ";\n"])), _styles.COLORS.white, _zIndexes.Z_INDEXES.dropdown, function (props) {
   return props.isButton ? '-4px' : '4px 0px';
 }, function (props) {
@@ -62,11 +40,8 @@ var DDContainer = _styledComponents.default.div(_templateObject || (_templateObj
 }, function (props) {
   return !props.scrollable ? 'auto' : props.maxHeight ? props.maxHeight : props.size == _types.Size.Large ? '320px' : props.size == _types.Size.Medium ? '280px' : '240px';
 });
-
 exports.DDContainer = DDContainer;
-
 var ItemsContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  > *:hover {\n    z-index: ", ";\n  }\n\n  > *:active,\n  > *.active {\n    z-index: ", ";\n  }\n\n  > *:focus {\n    z-index: ", ";\n  }\n"])), _zIndexes.Z_INDEXES.hover, _zIndexes.Z_INDEXES.active, _zIndexes.Z_INDEXES.focus);
-
 var ListContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  ", "\n  ", "\n  ", "\n  div.divider {\n    display: block;\n    width: calc(100% - 40px);\n    margin-left: 16px;\n    border-top: 1px solid #e5e5e5;\n    position: absolute;\n    top: 0px;\n  }\n\n  ", " {\n    padding-top: ", ";\n    padding-bottom: ", ";\n\n    word-break: break-word;\n  }\n\n  *:focus {\n    outline: none !important;\n  }\n\n  ", "\n"])), function (props) {
   return props.scrollable ? 'overflow-y: scroll;' : '';
 }, function (props) {
@@ -80,7 +55,6 @@ var ListContainer = _styledComponents.default.div(_templateObject3 || (_template
 }, function (props) {
   return props.size == _types.Size.Large ? '8px' : props.size == _types.Size.Medium ? '4px' : '0px';
 }, (0, _styles.scrollBarStyling)(_types.Size.Small));
-
 var MenuContentContainer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  h1,\n  h2,\n  h3 {\n    margin-block-start: 0px;\n    margin-block-end: 0px;\n    ", "\n    ", "\n    ", "\n    padding: ", ";\n  }\n\n  p {\n    margin-block-start: 0px;\n    margin-block-end: 0px;\n    ", "\n    ", "\n    ", "\n    padding: ", ";\n  }\n"])), function (props) {
   return props.size == _types.Size.Large && (0, _typography.ComponentXLStyling)(_typography.ComponentTextStyle.Bold, _styles.COLORS.neutral_500);
 }, function (props) {
@@ -98,13 +72,10 @@ var MenuContentContainer = _styledComponents.default.div(_templateObject4 || (_t
 }, function (props) {
   return props.size == _types.Size.Small || !props.size ? '8px 16px' : props.size == _types.Size.Medium ? '12px 24px' : '16px 32px';
 });
-
 var DividerContainer = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n\n  margin-top: ", ";\n\n  div.divider {\n    width: 100%;\n    margin: 0px;\n  }\n"])), function (props) {
   return props.size == _types.Size.Large ? '16px' : props.size == _types.Size.Medium ? '12px' : props.size == _types.Size.Small || !props.size ? '8px' : '6px';
 });
-
 var TopItemContainer = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  border-bottom-style: solid;\n  border-bottom-color: ", ";\n  border-bottom-width: 1px;\n  margin-right: 22px;\n"])), _styles.COLORS.neutral_200);
-
 var ActionButtonContainer = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  ", "\n\n  padding: ", ";\n\n  button {\n    width: 100%;\n  }\n"])), function (props) {
   return props.scrollable ? "border-top: 1px solid  ".concat(_styles.COLORS.neutral_200, ";") : '';
 }, function (props) {
@@ -112,58 +83,48 @@ var ActionButtonContainer = _styledComponents.default.div(_templateObject7 || (_
 }, function (props) {
   return props.size === _types.Size.Small || !props.size ? '4px 16px 0px' : props.size === _types.Size.Medium ? '12px 16px 8px' : '16px 16px 12px';
 });
-
 var Overlay = _styledComponents.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  pointer-events: none;\n  z-index: ", ";\n"])), _zIndexes.Z_INDEXES.modal);
-
 var DropdownContent = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
   var _ref2, _customizationProps$a;
-
   var id = _ref.id,
-      customizationProps = _ref.customizationProps,
-      alignLeft = _ref.alignLeft,
-      isButton = _ref.isButton,
-      size = _ref.size,
-      isOpen = _ref.isOpen,
-      width = _ref.width,
-      setIsOpen = _ref.setIsOpen,
-      filter = _ref.filter,
-      focused = _ref.focused,
-      setFocused = _ref.setFocused,
-      selectedValues = _ref.selectedValues,
-      setSelectedValues = _ref.setSelectedValues,
-      messageOnNoResults = _ref.messageOnNoResults,
-      outline = _ref.outline,
-      containerRef = _ref.containerRef,
-      onActiveDescendantChanged = _ref.onActiveDescendantChanged,
-      _ref$ariaRolesType = _ref.ariaRolesType,
-      ariaRolesType = _ref$ariaRolesType === void 0 ? 'menu' : _ref$ariaRolesType;
-
+    customizationProps = _ref.customizationProps,
+    alignLeft = _ref.alignLeft,
+    isButton = _ref.isButton,
+    size = _ref.size,
+    isOpen = _ref.isOpen,
+    width = _ref.width,
+    setIsOpen = _ref.setIsOpen,
+    filter = _ref.filter,
+    focused = _ref.focused,
+    setFocused = _ref.setFocused,
+    selectedValues = _ref.selectedValues,
+    setSelectedValues = _ref.setSelectedValues,
+    messageOnNoResults = _ref.messageOnNoResults,
+    outline = _ref.outline,
+    containerRef = _ref.containerRef,
+    onActiveDescendantChanged = _ref.onActiveDescendantChanged,
+    _ref$ariaRolesType = _ref.ariaRolesType,
+    ariaRolesType = _ref$ariaRolesType === void 0 ? 'menu' : _ref$ariaRolesType;
   var _React$useState = _react.default.useState(false),
-      _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
-      isUp = _React$useState2[0],
-      setIsUp = _React$useState2[1];
-
+    _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
+    isUp = _React$useState2[0],
+    setIsUp = _React$useState2[1];
   var _React$useState3 = _react.default.useState(false),
-      _React$useState4 = (0, _slicedToArray2.default)(_React$useState3, 2),
-      locationDefined = _React$useState4[0],
-      setLocationDefined = _React$useState4[1];
-
+    _React$useState4 = (0, _slicedToArray2.default)(_React$useState3, 2),
+    locationDefined = _React$useState4[0],
+    setLocationDefined = _React$useState4[1];
   var _React$useState5 = _react.default.useState({
-    top: '0',
-    left: '0'
-  }),
-      _React$useState6 = (0, _slicedToArray2.default)(_React$useState5, 2),
-      offset = _React$useState6[0],
-      setOffset = _React$useState6[1];
-
+      top: '0',
+      left: '0'
+    }),
+    _React$useState6 = (0, _slicedToArray2.default)(_React$useState5, 2),
+    offset = _React$useState6[0],
+    setOffset = _React$useState6[1];
   var dropdownContentRef = (_ref2 = ref) !== null && _ref2 !== void 0 ? _ref2 : _react.default.useRef(null);
   if (!customizationProps.itemsType) customizationProps.itemsType = 'normal';
   if (!size) size = _types.Size.Small;
-
   var itemsListRef = _react.default.useRef(null);
-
   var actionButtonRef = _react.default.useRef(null);
-
   var determineDropUp = function determineDropUp() {
     var options = customizationProps.items;
     var rect = containerRef.current.getBoundingClientRect();
@@ -178,18 +139,14 @@ var DropdownContent = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref
     setIsUp(up);
     setLocationDefined(true);
   };
-
   var setNewFocusedElement = function setNewFocusedElement(index) {
     var _dropdownContentRef$c;
-
     if (outline) (_dropdownContentRef$c = dropdownContentRef.current) === null || _dropdownContentRef$c === void 0 ? void 0 : _dropdownContentRef$c.focus();
     var newFocusedElement = elRefs[index];
     if (onActiveDescendantChanged) onActiveDescendantChanged(index == 0 ? "".concat(id, "_topitem") : "".concat(id, "_").concat(index));
     var oldFocusedElement = focused || focused === 0 ? elRefs[focused] : null;
-
     if (newFocusedElement && newFocusedElement !== oldFocusedElement) {
       var _oldFocusedElement$cu, _newFocusedElement$cu, _newFocusedElement$cu2;
-
       setFocused(index);
       oldFocusedElement === null || oldFocusedElement === void 0 ? void 0 : (_oldFocusedElement$cu = oldFocusedElement.current) === null || _oldFocusedElement$cu === void 0 ? void 0 : _oldFocusedElement$cu.classList.remove('dropdown-hover');
       (_newFocusedElement$cu = newFocusedElement.current) === null || _newFocusedElement$cu === void 0 ? void 0 : _newFocusedElement$cu.classList.add('dropdown-hover');
@@ -199,34 +156,27 @@ var DropdownContent = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref
       });
     }
   };
-
   var getFilteredItems = function getFilteredItems() {
     var filtrationString = (filter !== null && filter !== void 0 ? filter : '').toUpperCase();
     return customizationProps.items.filter(function (x) {
       var _x$value, _x$displayLabel;
-
       return (x === null || x === void 0 ? void 0 : (_x$value = x.value) === null || _x$value === void 0 ? void 0 : _x$value.toUpperCase().includes(filtrationString)) || (x === null || x === void 0 ? void 0 : (_x$displayLabel = x.displayLabel) === null || _x$displayLabel === void 0 ? void 0 : _x$displayLabel.toUpperCase().includes(filtrationString));
     });
   };
-
   var findNextActiveIndex = function findNextActiveIndex(index, direction, items) {
     for (var i = index + direction; i > 0 && i <= items.length; i += direction) {
       var _items;
-
       if (!((_items = items[i - 1]) !== null && _items !== void 0 && _items.disabled)) {
         return i;
       }
     }
-
     return index;
   };
-
   var handleKeyDown = function handleKeyDown(e) {
     if (isOpen) {
       if (e.key === 'ArrowUp' || e.key === 'Up') {
         e.preventDefault();
         var focusedNow = focused || focused === 0 ? focused : arrLength + 1;
-
         if (!!focusedNow) {
           focusedNow = focusedNow === 1 && haveTopItem() ? 0 : findNextActiveIndex(focusedNow, -1, getFilteredItems());
           setNewFocusedElement(focusedNow);
@@ -243,113 +193,88 @@ var DropdownContent = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref
       } else if ((e.key === 'Enter' || e.key === ' ') && focused !== null && e.target !== (actionButtonRef === null || actionButtonRef === void 0 ? void 0 : actionButtonRef.current)) {
         e.preventDefault();
         var focusedElement = elRefs[focused];
-
         if (focusedElement) {
           var _focusedElement$curre;
-
           (_focusedElement$curre = focusedElement.current) === null || _focusedElement$curre === void 0 ? void 0 : _focusedElement$curre.click();
         }
-
         if (onActiveDescendantChanged) onActiveDescendantChanged(undefined);
       }
     }
   };
-
   _react.default.useEffect(function () {
     document.addEventListener('keydown', handleKeyDown);
     return function () {
       document.removeEventListener('keydown', handleKeyDown);
     };
   }, []);
-
   var scrollPosition = _react.default.useRef(0);
-
   var handleScroll = function handleScroll() {
     var _itemsListRef$current;
-
     scrollPosition.current = (_itemsListRef$current = itemsListRef.current) === null || _itemsListRef$current === void 0 ? void 0 : _itemsListRef$current.scrollTop;
   };
-
   _react.default.useLayoutEffect(function () {
     var _scrollPosition$curre;
-
     if (itemsListRef.current) itemsListRef.current.scrollTop = (_scrollPosition$curre = scrollPosition.current) !== null && _scrollPosition$curre !== void 0 ? _scrollPosition$curre : 0;
   }, [selectedValues]);
-
   var getCorrectRef = function getCorrectRef(ref) {
     switch (customizationProps.itemsType) {
       case 'normal':
         return ref || /*#__PURE__*/_react.default.createRef();
-
       default:
         return ref || /*#__PURE__*/_react.default.createRef();
     }
   };
-
   var arrLength = getFilteredItems().length;
-
   var _React$useState7 = _react.default.useState([]),
-      _React$useState8 = (0, _slicedToArray2.default)(_React$useState7, 2),
-      elRefs = _React$useState8[0],
-      setElRefs = _React$useState8[1];
-
+    _React$useState8 = (0, _slicedToArray2.default)(_React$useState7, 2),
+    elRefs = _React$useState8[0],
+    setElRefs = _React$useState8[1];
   _react.default.useEffect(function () {
     if ((elRefs === null || elRefs === void 0 ? void 0 : elRefs.length) !== arrLength) {
       setFocused(null);
     }
-
     setElRefs(function (elRefs) {
       return Array(arrLength + 1).fill(null).map(function (_, i) {
         return getCorrectRef(elRefs[i]);
       });
     });
   }, [isOpen, arrLength]);
-
   _react.default.useLayoutEffect(function () {
     isOpen && !locationDefined && determineDropUp();
   }, [isOpen, locationDefined]);
-
   var haveTopItem = function haveTopItem() {
     var _getSuggestions;
-
     if (!customizationProps.pinTopItem) return false;
     if (customizationProps.itemsType === 'radio' && selectedValues && (selectedValues === null || selectedValues === void 0 ? void 0 : selectedValues.length) > 0) return true;else if (customizationProps.itemsType === 'checkbox' && (customizationProps.multiSelect || (selectedValues === null || selectedValues === void 0 ? void 0 : selectedValues.length) > 0)) return true;else if (customizationProps.itemsType === 'normal' && ((_getSuggestions = getSuggestions()) === null || _getSuggestions === void 0 ? void 0 : _getSuggestions.length) > 0) return true;
     return false;
   };
-
   var getSuggestions = function getSuggestions() {
     return getFilteredItems().filter(function (x) {
       return x.suggestion;
     });
   };
+
   /**
    * when dropdown opens set correct position of focused item
    * */
-
-
   _react.default.useLayoutEffect(function () {
     if (isOpen && (focused || focused === 0)) {
       setNewFocusedElement(focused === 0 && !haveTopItem() ? 1 : focused);
     }
   }, [isOpen, focused]);
+
   /**
    * Reset dropdown content state on close
    * */
-
-
   _react.default.useEffect(function () {
     if (!isOpen) {
       var _dropdownContentRef$c2, _dropdownContentRef$c3;
-
       setLocationDefined(false);
-
       var _iterator = _createForOfIteratorHelper(elRefs),
-          _step;
-
+        _step;
       try {
         for (_iterator.s(); !(_step = _iterator.n()).done;) {
           var _elRef$current;
-
           var elRef = _step.value;
           (_elRef$current = elRef.current) === null || _elRef$current === void 0 ? void 0 : _elRef$current.classList.remove('dropdown-hover');
         }
@@ -358,7 +283,6 @@ var DropdownContent = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref
       } finally {
         _iterator.f();
       }
-
       setFocused(null);
       if (onActiveDescendantChanged) onActiveDescendantChanged(undefined);
       (_dropdownContentRef$c2 = dropdownContentRef.current) === null || _dropdownContentRef$c2 === void 0 ? void 0 : _dropdownContentRef$c2.classList.remove('outline');
@@ -366,55 +290,45 @@ var DropdownContent = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref
     } else {
       if (outline) {
         var _dropdownContentRef$c4, _dropdownContentRef$c5;
-
         (_dropdownContentRef$c4 = dropdownContentRef.current) === null || _dropdownContentRef$c4 === void 0 ? void 0 : _dropdownContentRef$c4.classList.add('outline');
         (_dropdownContentRef$c5 = dropdownContentRef.current) === null || _dropdownContentRef$c5 === void 0 ? void 0 : _dropdownContentRef$c5.focus();
       }
     }
   }, [isOpen, dropdownContentRef, focused, outline]);
+
   /**
    * Scroll item container to top when dropdown opens
    * */
-
-
   _react.default.useEffect(function () {
     if (isOpen && itemsListRef.current) {
       itemsListRef.current.scrollTop = 0;
     }
   }, [isOpen]);
-
   _react.default.useEffect(function () {
     if (isOpen) {
       calculateOffset();
       window.addEventListener('scroll', calculateOffset);
       window.addEventListener('resize', calculateOffset);
     }
-
     return function () {
       window.removeEventListener('scroll', calculateOffset);
       window.removeEventListener('resize', calculateOffset);
     };
   }, [isOpen]);
-
   var handleItemClick = function handleItemClick(selected, item) {
     var newValue = [];
-
     if (customizationProps.multiSelect) {
       if (selected) newValue = [].concat((0, _toConsumableArray2.default)(selectedValues), [item.value]);else newValue = selectedValues.filter(function (x) {
         return x != item.value;
       });
     } else newValue = selected ? [item.value] : [];
-
     setSelectedValues(newValue);
-
     if (customizationProps.onValueUpdate && customizationProps.onValueUpdate(newValue)) {
       setIsOpen(false);
     }
   };
-
   var getTopItem = function getTopItem() {
     var _customizationProps$i, _customizationProps$i2, _selectedFirst$displa, _selectedFirst$displa2;
-
     if (!customizationProps.pinTopItem) return;
     var visibleItems = getFilteredItems();
     var allSelected = (selectedValues === null || selectedValues === void 0 ? void 0 : selectedValues.filter(function (x) {
@@ -496,7 +410,6 @@ var DropdownContent = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref
       })]
     });
   };
-
   var getElements = function getElements(messageOnNoResults, size) {
     if (getFilteredItems().length === 0) {
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(_MenuItem.default, {
@@ -510,14 +423,12 @@ var DropdownContent = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref
         onClickHandler: function onClickHandler(e) {}
       });
     }
-
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(ItemsContainer, {
       size: size,
       children: getFilteredItems().filter(function (x) {
         return x && (customizationProps.itemsType != 'normal' || !x.suggestion);
       }).map(function (item, index) {
         var _item$displayLabel, _item$displayLabel2;
-
         return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.default.Fragment, {
           children: [item.customContent, !item.customContent && customizationProps.itemsType == 'radio' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_InputFields.RadioButton, {
             role: "menuitemradio",
@@ -577,19 +488,15 @@ var DropdownContent = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref
       })
     });
   };
-
   var calculateOffset = function calculateOffset() {
     var _containerRef$current;
-
     var rect = containerRef === null || containerRef === void 0 ? void 0 : (_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.getBoundingClientRect();
-
     if (rect) {
       dropdownContentRef.current.style.left = "".concat(rect.x + rect.width, "px");
       dropdownContentRef.current.style.top = "".concat(rect.y + rect.height, "px");
       dropdownContentRef.current.style.width = width !== null && width !== void 0 ? width : "".concat(rect.width, "px");
     }
   };
-
   var cls = "".concat(isOpen ? 'show' : '', " ").concat(isOpen && outline ? 'outline' : '', " ").concat(locationDefined ? isUp ? 'up' : 'down' : '');
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(Overlay, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(DDContainer, {
@@ -643,7 +550,6 @@ var DropdownContent = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref
     })
   });
 });
-
 DropdownContent.propTypes = {
   isButton: _propTypes.default.bool.isRequired,
   customizationProps: _propTypes.default.shape({