@laerdal/life-react-components 3.5.3 → 3.6.0-dev.1.full

package/dist/Dropdown/DropdownContent.cjs

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.DropdownContentListContainer = exports.DropdownContentItemsContainer = exports.DropdownContentContainer = void 0;
+exports["default"] = exports.DropdownContentListContainer = exports.DropdownContentItemsContainer = exports.DropdownContentContainer = 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"));
@@ -21,19 +21,23 @@ 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; }
+function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, 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 o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t["return"] || t["return"](); } finally { if (u) throw o; } } }; }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
 var MAX_MENU_HEIGHT = 240;
 var AVG_OPTION_HEIGHT = 48;
 var OFFSET_BEFORE_SHOW = 1000000;
-var DropdownContentContainer = _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) {
+var DropdownContentContainer = _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"])), function (props) {
+  return _styles.COLORS.getColor('white', props.theme);
+}, _zIndexes.Z_INDEXES.dropdown, function (props) {
   return props.isButton ? '-4px' : '4px 0px';
 }, function (props) {
   return "transform: translate(".concat(props.offsetLeft, ", ").concat(props.offsetTop, ");");
 }, OFFSET_BEFORE_SHOW, OFFSET_BEFORE_SHOW, function (props) {
   return props.isButton ? _CommonStyling.DropdownContentButtonStyling : '';
-}, _styles.COLORS.neutral_100, function (props) {
+}, function (props) {
+  return _styles.COLORS.getColor('neutral_100', props.theme);
+}, function (props) {
   return props.size == _types.Size.Large ? '320px' : props.size == _types.Size.Medium ? '280px' : '240px';
 }, function (props) {
   return props.size == _types.Size.Large ? '10px' : props.size == _types.Size.Medium ? '8px' : '6px';
@@ -41,9 +45,9 @@ var DropdownContentContainer = _styledComponents.default.div(_templateObject ||
   return !props.scrollable ? 'auto' : props.maxHeight ? props.maxHeight : props.size == _types.Size.Large ? '320px' : props.size == _types.Size.Medium ? '280px' : '240px';
 });
 exports.DropdownContentContainer = DropdownContentContainer;
-var DropdownContentItemsContainer = _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 DropdownContentItemsContainer = _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);
 exports.DropdownContentItemsContainer = DropdownContentItemsContainer;
-var DropdownContentListContainer = _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) {
+var DropdownContentListContainer = _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) {
   return props.scrollable ? 'margin-right: 6px;' : '';
@@ -57,36 +61,38 @@ var DropdownContentListContainer = _styledComponents.default.div(_templateObject
   return props.size == _types.Size.Large ? '8px' : props.size == _types.Size.Medium ? '4px' : '0px';
 }, (0, _styles.scrollBarStyling)(_types.Size.Small));
 exports.DropdownContentListContainer = DropdownContentListContainer;
-var DropdownContentMenuContentContainer = _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);
+var DropdownContentMenuContentContainer = _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.getColor('neutral_500', props.theme));
 }, function (props) {
-  return props.size == _types.Size.Medium && (0, _typography.ComponentLStyling)(_typography.ComponentTextStyle.Bold, _styles.COLORS.neutral_500);
+  return props.size == _types.Size.Medium && (0, _typography.ComponentLStyling)(_typography.ComponentTextStyle.Bold, _styles.COLORS.getColor('neutral_500', props.theme));
 }, function (props) {
-  return (props.size == _types.Size.Small || !props.size) && (0, _typography.ComponentMStyling)(_typography.ComponentTextStyle.Bold, _styles.COLORS.neutral_500);
+  return (props.size == _types.Size.Small || !props.size) && (0, _typography.ComponentMStyling)(_typography.ComponentTextStyle.Bold, _styles.COLORS.getColor('neutral_500', props.theme));
 }, function (props) {
   return props.size == _types.Size.Small || !props.size ? '10px 16px 6px' : props.size == _types.Size.Medium ? '16px 24px 8px' : '16px 32px 8px';
 }, function (props) {
-  return props.size == _types.Size.Large && (0, _typography.ComponentLStyling)(_typography.ComponentTextStyle.Regular, _styles.COLORS.neutral_500);
+  return props.size == _types.Size.Large && (0, _typography.ComponentLStyling)(_typography.ComponentTextStyle.Regular, _styles.COLORS.getColor('neutral_500', props.theme));
 }, function (props) {
-  return props.size == _types.Size.Medium && (0, _typography.ComponentMStyling)(_typography.ComponentTextStyle.Regular, _styles.COLORS.neutral_500);
+  return props.size == _types.Size.Medium && (0, _typography.ComponentMStyling)(_typography.ComponentTextStyle.Regular, _styles.COLORS.getColor('neutral_500', props.theme));
 }, function (props) {
-  return (props.size == _types.Size.Small || !props.size) && (0, _typography.ComponentSStyling)(_typography.ComponentTextStyle.Regular, _styles.COLORS.neutral_500);
+  return (props.size == _types.Size.Small || !props.size) && (0, _typography.ComponentSStyling)(_typography.ComponentTextStyle.Regular, _styles.COLORS.getColor('neutral_500', props.theme));
 }, 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) {
+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 DropdownContentTopItemContainer = _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 DropdownContentActionButtonContainer = _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, ";") : '';
+var DropdownContentTopItemContainer = _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"])), function (props) {
+  return _styles.COLORS.getColor('neutral_200', props.theme);
+});
+var DropdownContentActionButtonContainer = _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.getColor('neutral_200', props.theme), ";") : '';
 }, function (props) {
   return props.scrollable ? 'margin-top: 4px;' : '';
 }, 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 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,
@@ -107,26 +113,26 @@ var DropdownContent = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref
     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),
+  var _React$useState = _react["default"].useState(false),
+    _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),
+  var _React$useState3 = _react["default"].useState(false),
+    _React$useState4 = (0, _slicedToArray2["default"])(_React$useState3, 2),
     locationDefined = _React$useState4[0],
     setLocationDefined = _React$useState4[1];
-  var _React$useState5 = _react.default.useState({
+  var _React$useState5 = _react["default"].useState({
       top: '0',
       left: '0'
     }),
-    _React$useState6 = (0, _slicedToArray2.default)(_React$useState5, 2),
+    _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);
+  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 itemsListRef = _react["default"].useRef(null);
+  var actionButtonRef = _react["default"].useRef(null);
   var determineDropUp = function determineDropUp() {
     var options = customizationProps.items;
     var rect = containerRef.current.getBoundingClientRect();
@@ -203,35 +209,35 @@ var DropdownContent = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref
       }
     }
   };
-  _react.default.useEffect(function () {
+  _react["default"].useEffect(function () {
     document.addEventListener('keydown', handleKeyDown);
     return function () {
       document.removeEventListener('keydown', handleKeyDown);
     };
-  }, []);
-  var scrollPosition = _react.default.useRef(0);
+  });
+  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 () {
+  _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();
+        return ref || /*#__PURE__*/_react["default"].createRef();
       default:
-        return ref || /*#__PURE__*/_react.default.createRef();
+        return ref || /*#__PURE__*/_react["default"].createRef();
     }
   };
   var arrLength = getFilteredItems().length;
-  var _React$useState7 = _react.default.useState([]),
-    _React$useState8 = (0, _slicedToArray2.default)(_React$useState7, 2),
+  var _React$useState7 = _react["default"].useState([]),
+    _React$useState8 = (0, _slicedToArray2["default"])(_React$useState7, 2),
     elRefs = _React$useState8[0],
     setElRefs = _React$useState8[1];
-  _react.default.useEffect(function () {
+  _react["default"].useEffect(function () {
     if ((elRefs === null || elRefs === void 0 ? void 0 : elRefs.length) !== arrLength) {
       setFocused(null);
     }
@@ -241,7 +247,7 @@ var DropdownContent = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref
       });
     });
   }, [isOpen, arrLength]);
-  _react.default.useLayoutEffect(function () {
+  _react["default"].useLayoutEffect(function () {
     isOpen && !locationDefined && determineDropUp();
   }, [isOpen, locationDefined]);
   var haveTopItem = function haveTopItem() {
@@ -259,7 +265,7 @@ var DropdownContent = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref
   /**
    * when dropdown opens set correct position of focused item
    * */
-  _react.default.useLayoutEffect(function () {
+  _react["default"].useLayoutEffect(function () {
     if (isOpen && (focused || focused === 0)) {
       setNewFocusedElement(focused === 0 && !haveTopItem() ? 1 : focused);
     }
@@ -268,7 +274,7 @@ var DropdownContent = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref
   /**
    * Reset dropdown content state on close
    * */
-  _react.default.useEffect(function () {
+  _react["default"].useEffect(function () {
     if (!isOpen) {
       var _dropdownContentRef$c2, _dropdownContentRef$c3;
       setLocationDefined(false);
@@ -301,12 +307,12 @@ var DropdownContent = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref
   /**
    * Scroll item container to top when dropdown opens
    * */
-  _react.default.useEffect(function () {
+  _react["default"].useEffect(function () {
     if (isOpen && itemsListRef.current) {
       itemsListRef.current.scrollTop = 0;
     }
   }, [isOpen]);
-  _react.default.useEffect(function () {
+  _react["default"].useEffect(function () {
     if (isOpen) {
       var observer = new IntersectionObserver(function (entries) {
         if (!entries[0].isIntersecting) {
@@ -334,7 +340,7 @@ var DropdownContent = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref
   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) {
+      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] : [];
@@ -402,7 +408,7 @@ var DropdownContent = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref
         selected: !customizationProps.multiSelect || allSelected
       }), customizationProps.itemsType === 'normal' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
         children: suggestions.map(function (x) {
-          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_MenuItem.default, {
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_MenuItem["default"], {
             role: ariaRolesType == 'input' ? 'option' : 'menu',
             item: x,
             size: size,
@@ -428,7 +434,7 @@ 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, {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_MenuItem["default"], {
         item: {
           value: messageOnNoResults,
           disabled: true
@@ -445,7 +451,7 @@ var DropdownContent = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref
         return x && (customizationProps.itemsType != 'normal' || !x.suggestion);
       }).map(function (item, index) {
         var _item$displayLabel, _item$displayLabel2;
-        return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.default.Fragment, {
+        return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react["default"].Fragment, {
           children: [item.customContent, !item.customContent && customizationProps.itemsType == 'radio' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_InputFields.RadioButton, {
             role: "menuitemradio",
             select: function select(selected) {
@@ -480,7 +486,7 @@ var DropdownContent = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref
             id: "".concat(id, "_").concat(index + 1),
             label: (_item$displayLabel2 = item.displayLabel) !== null && _item$displayLabel2 !== void 0 ? _item$displayLabel2 : item.value,
             selected: selectedValues === null || selectedValues === void 0 ? void 0 : selectedValues.includes(item.value)
-          }, "key_".concat(id, "_").concat(index + 1)), !item.customContent && (customizationProps.itemsType == 'normal' || !customizationProps.itemsType) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_MenuItem.default, {
+          }, "key_".concat(id, "_").concat(index + 1)), !item.customContent && (customizationProps.itemsType == 'normal' || !customizationProps.itemsType) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_MenuItem["default"], {
             role: ariaRolesType == 'input' ? 'option' : 'menu',
             id: "".concat(id, "_").concat(index + 1),
             item: item,
@@ -549,7 +555,7 @@ var DropdownContent = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref
       }), customizationProps.action && customizationProps.actionLabel && /*#__PURE__*/(0, _jsxRuntime.jsx)(DropdownContentActionButtonContainer, {
         size: size,
         scrollable: customizationProps.scrollable,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button["default"], {
           width: "100%",
           role: "menuitem",
           icon: customizationProps.actionIcon,
@@ -568,47 +574,47 @@ var DropdownContent = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref
   });
 });
 DropdownContent.propTypes = {
-  isButton: _propTypes.default.bool.isRequired,
-  customizationProps: _propTypes.default.shape({
-    itemsType: _propTypes.default.oneOf(['radio', 'checkbox', 'normal']),
-    menuContent: _propTypes.default.node,
-    scrollable: _propTypes.default.bool,
-    multiSelect: _propTypes.default.bool,
-    maxHeight: _propTypes.default.string,
-    actionLabel: _propTypes.default.string,
-    actionIcon: _propTypes.default.node,
-    actionLoading: _propTypes.default.bool,
-    actionDisabled: _propTypes.default.bool,
-    action: _propTypes.default.func.isRequired,
-    pinTopItem: _propTypes.default.bool,
-    onValueUpdate: _propTypes.default.func.isRequired,
-    items: _propTypes.default.arrayOf(_propTypes.default.shape({
-      value: _propTypes.default.string.isRequired,
-      displayLabel: _propTypes.default.string,
-      noteLabel: _propTypes.default.string,
-      suggestion: _propTypes.default.bool,
-      showDividerAbove: _propTypes.default.bool,
-      disabled: _propTypes.default.bool,
-      locked: _propTypes.default.bool,
-      icon: _propTypes.default.node,
-      customContent: _propTypes.default.node
+  isButton: _propTypes["default"].bool.isRequired,
+  customizationProps: _propTypes["default"].shape({
+    itemsType: _propTypes["default"].oneOf(['radio', 'checkbox', 'normal']),
+    menuContent: _propTypes["default"].node,
+    scrollable: _propTypes["default"].bool,
+    multiSelect: _propTypes["default"].bool,
+    maxHeight: _propTypes["default"].string,
+    actionLabel: _propTypes["default"].string,
+    actionIcon: _propTypes["default"].node,
+    actionLoading: _propTypes["default"].bool,
+    actionDisabled: _propTypes["default"].bool,
+    action: _propTypes["default"].func.isRequired,
+    pinTopItem: _propTypes["default"].bool,
+    onValueUpdate: _propTypes["default"].func.isRequired,
+    items: _propTypes["default"].arrayOf(_propTypes["default"].shape({
+      value: _propTypes["default"].string.isRequired,
+      displayLabel: _propTypes["default"].string,
+      noteLabel: _propTypes["default"].string,
+      suggestion: _propTypes["default"].bool,
+      showDividerAbove: _propTypes["default"].bool,
+      disabled: _propTypes["default"].bool,
+      locked: _propTypes["default"].bool,
+      icon: _propTypes["default"].node,
+      customContent: _propTypes["default"].node
     })).isRequired
   }).isRequired,
-  alignLeft: _propTypes.default.bool,
-  isOpen: _propTypes.default.bool.isRequired,
-  setIsOpen: _propTypes.default.func.isRequired,
-  id: _propTypes.default.string.isRequired,
-  filter: _propTypes.default.string.isRequired,
-  width: _propTypes.default.string,
-  onActiveDescendantChanged: _propTypes.default.func,
-  selectedValues: _propTypes.default.arrayOf(_propTypes.default.string).isRequired,
-  setSelectedValues: _propTypes.default.func.isRequired,
-  messageOnNoResults: _propTypes.default.string.isRequired,
-  focused: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.oneOf([null])]),
-  setFocused: _propTypes.default.func.isRequired,
-  outline: _propTypes.default.bool,
-  ariaRolesType: _propTypes.default.oneOf(['input', 'menu'])
+  alignLeft: _propTypes["default"].bool,
+  isOpen: _propTypes["default"].bool.isRequired,
+  setIsOpen: _propTypes["default"].func.isRequired,
+  id: _propTypes["default"].string.isRequired,
+  filter: _propTypes["default"].string.isRequired,
+  width: _propTypes["default"].string,
+  onActiveDescendantChanged: _propTypes["default"].func,
+  selectedValues: _propTypes["default"].arrayOf(_propTypes["default"].string).isRequired,
+  setSelectedValues: _propTypes["default"].func.isRequired,
+  messageOnNoResults: _propTypes["default"].string.isRequired,
+  focused: _propTypes["default"].oneOfType([_propTypes["default"].number, _propTypes["default"].oneOf([null])]),
+  setFocused: _propTypes["default"].func.isRequired,
+  outline: _propTypes["default"].bool,
+  ariaRolesType: _propTypes["default"].oneOf(['input', 'menu'])
 };
 var _default = DropdownContent;
-exports.default = _default;
+exports["default"] = _default;
 //# sourceMappingURL=DropdownContent.cjs.map