@laerdal/life-react-components 1.1.2-dev.8 → 1.2.1-dev.2

package/dist/js/Dropdown/DropdownContent.js

@@ -19,11 +19,13 @@ var _types = require("../types");
 
 var _CommonStyling = require("./CommonStyling");
 
+var _typography = require("../styles/typography");
+
 var _styles = require("../styles");
 
 var _InputFields = require("../InputFields");
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -53,7 +55,7 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 
-var DDContainer = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: none;\n  position: absolute;\n  background-color: ", ";\n  \n  width: ", ";\n  z-index: 1;\n  margin: ", ";\n\n  &.show {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n  }\n\n  &.up {\n    top: auto;\n    bottom: 100%;\n  }\n\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-top: 4px;\n  padding-right: 0px;\n  padding-bottom: 4px;\n  padding-left: 0px;\n\n  min-width: ", ";\n  border-radius: ", ";\n\n  max-height: ", ";\n"])), _styles.COLORS.white, function (props) {
+var DDContainer = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: none;\n  position: absolute;\n  background-color: ", ";\n\n  width: ", ";\n  z-index: 1;\n  margin: ", ";\n\n  &.show {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n  }\n\n  &.up {\n    top: auto;\n    bottom: 100%;\n  }\n\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-top: 4px;\n  padding-right: 0px;\n  padding-bottom: 4px;\n  padding-left: 0px;\n\n  min-width: ", ";\n  border-radius: ", ";\n\n  max-height: ", ";\n"])), _styles.COLORS.white, function (props) {
   return props.width ? props.width : '100%';
 }, function (props) {
   return props.isButton ? '-4px' : '4px 0px';
@@ -71,26 +73,56 @@ var DDContainer = _styledComponents.default.div(_templateObject || (_templateObj
 
 exports.DDContainer = DDContainer;
 
-var ListContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  ", "\n  ", "\n\n  div {\n    padding-top: ", ";\n    padding-bottom: ", ";\n  }\n\n  /* width */\n  ::-webkit-scrollbar {\n    width: 4px;\n    margin: 0 6px;\n    cursor: pointer;\n  }\n\n  /* Track */\n  ::-webkit-scrollbar-track {\n    background: ", ";\n    border-radius: 8px;\n  }\n\n  /* Handle */\n  ::-webkit-scrollbar-thumb {\n    background: ", ";\n    border-radius: 8px;\n  }\n\n  /* Handle on hover */\n  ::-webkit-scrollbar-thumb:hover {\n    background: ", ";\n  }\n"])), function (props) {
+var ItemsContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  button.dropdownButton {\n    ", "\n  }"])), function (props) {
+  return (0, _CommonStyling.DropdownButtonCSS)(props.size);
+});
+
+var ListContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\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\n  /* width */\n  ::-webkit-scrollbar {\n    width: 4px;\n    margin: 0 6px;\n    cursor: pointer;\n  }\n\n  /* Track */\n  ::-webkit-scrollbar-track {\n    background: ", ";\n    border-radius: 8px;\n  }\n\n  /* Handle */\n  ::-webkit-scrollbar-thumb {\n    background: ", ";\n    border-radius: 8px;\n  }\n\n  /* Handle on hover */\n  ::-webkit-scrollbar-thumb:hover {\n    background: ", ";\n  }\n"])), function (props) {
   return props.scrollable ? 'overflow-y: scroll;' : '';
 }, function (props) {
   return props.itemsType != 'normal' ? 'margin-left: 4px;' : '';
-}, function (props) {
+}, ItemsContainer, function (props) {
   return props.size == _types.Size.Large ? '8px' : props.size == _types.Size.Medium ? '4px' : '0px';
 }, function (props) {
   return props.size == _types.Size.Large ? '8px' : props.size == _types.Size.Medium ? '4px' : '0px';
 }, _styles.COLORS.neutral_100, _styles.COLORS.neutral_600, _styles.COLORS.neutral_500);
 
-var ItemsContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n"])));
+var MenuContentContainer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  h1, h2, 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) {
+  return props.size == _types.Size.Medium && (0, _typography.ComponentLStyling)(_typography.ComponentTextStyle.Bold, _styles.COLORS.neutral_500);
+}, function (props) {
+  return (props.size == _types.Size.Small || !props.size) && (0, _typography.ComponentMStyling)(_typography.ComponentTextStyle.Bold, _styles.COLORS.neutral_500);
+}, 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);
+}, function (props) {
+  return props.size == _types.Size.Medium && (0, _typography.ComponentMStyling)(_typography.ComponentTextStyle.Regular, _styles.COLORS.neutral_500);
+}, function (props) {
+  return (props.size == _types.Size.Small || !props.size) && (0, _typography.ComponentSStyling)(_typography.ComponentTextStyle.Regular, _styles.COLORS.neutral_500);
+}, function (props) {
+  return props.size == _types.Size.Small || !props.size ? '8px 16px' : props.size == _types.Size.Medium ? '12px 24px' : '16px 32px';
+});
 
-var TopItemContainer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  border-bottom-style: solid;\n  border-bottom-color: ", ";\n  border-bottom-width: 1px;\n  margin-right: 22px;  \n"])), _styles.COLORS.neutral_200);
+var DividerContainer = _styledComponents.default.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\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 = _taggedTemplateLiteral(["\n  border-bottom-style: solid;\n  border-bottom-color: ", ";\n  border-bottom-width: 1px;\n  margin-right: 22px;\n\n  button {\n    ", "\n  }\n"])), _styles.COLORS.neutral_200, function (props) {
+  return (0, _CommonStyling.DropdownButtonCSS)(props.size);
+});
 
-var ActionButtonContainer = _styledComponents.default.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  border-top-style: solid;\n  border-top-color: ", ";\n  border-top-width: 1px;\n  padding: 0px 16px 4px 16px;\n\n  button {\n    width: 100%;\n  }\n"])), _styles.COLORS.neutral_200);
+var ActionButtonContainer = _styledComponents.default.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  border-top-style: solid;\n  border-top-color: ", ";\n  border-top-width: 1px;\n  \n  padding: ", ";\n\n  button {\n    width: 100%;\n  }\n"])), _styles.COLORS.neutral_200, function (props) {
+  return props.size == _types.Size.Small || !props.size ? '0px 16px' : '8px 16px';
+});
 
 var MAX_MENU_HEIGHT = 240;
 var AVG_OPTION_HEIGHT = 48;
 
 var DropdownContent = function DropdownContent(_ref) {
+  var _customizationProps$a;
+
   var id = _ref.id,
       customizationProps = _ref.customizationProps,
       alignLeft = _ref.alignLeft,
@@ -140,6 +172,15 @@ var DropdownContent = function DropdownContent(_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 handleKeyDown = function handleKeyDown(e) {
     if (isOpen) {
       if (e.keyCode === 38) {
@@ -147,7 +188,17 @@ var DropdownContent = function DropdownContent(_ref) {
         var focusedNow = focused;
 
         if (focusedNow !== undefined && focusedNow !== null && focusedNow > 0) {
-          focusedNow -= 1;
+          var filtered = getFilteredItems();
+
+          for (var i = focusedNow - 1; i > 0; i--) {
+            var _filtered;
+
+            if (!((_filtered = filtered[i - 1]) !== null && _filtered !== void 0 && _filtered.disabled)) {
+              focusedNow = i;
+              break;
+            }
+          }
+
           setNewFocusedElement(focusedNow);
         }
       } else if (e.keyCode === 40) {
@@ -155,9 +206,18 @@ var DropdownContent = function DropdownContent(_ref) {
         var focusedNow = focused;
 
         if (focusedNow !== undefined && focusedNow !== null) {
-          focusedNow++;
+          var _filtered2 = getFilteredItems();
+
+          for (var _i2 = focusedNow + 1; _i2 <= _filtered2.length; _i2++) {
+            var _filtered3;
+
+            if (!((_filtered3 = _filtered2[_i2 - 1]) !== null && _filtered3 !== void 0 && _filtered3.disabled)) {
+              focusedNow = _i2;
+              break;
+            }
+          }
         } else {
-          focusedNow = 0;
+          focusedNow = haveTopItem() ? 0 : 1;
         }
 
         setNewFocusedElement(focusedNow);
@@ -227,15 +287,6 @@ var DropdownContent = function DropdownContent(_ref) {
     if (itemsListRef.current) itemsListRef.current.scrollTop = (_scrollPosition$curre = scrollPosition.current) !== null && _scrollPosition$curre !== void 0 ? _scrollPosition$curre : 0;
   }, [selectedValues]);
 
-  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 getCorrectRef = function getCorrectRef(ref) {
     switch (customizationProps.itemsType) {
       case 'normal':
@@ -291,6 +342,8 @@ var DropdownContent = function DropdownContent(_ref) {
   }, [isOpen]);
 
   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) {
@@ -300,15 +353,23 @@ var DropdownContent = function DropdownContent(_ref) {
     }).length) == visibleItems.length;
     var showTopItem = false;
     var suggestions = getSuggestions();
+    var displayLabel = selectedValues[0] ? (_customizationProps$i = customizationProps.items) === null || _customizationProps$i === void 0 ? void 0 : (_customizationProps$i2 = _customizationProps$i.find(function (c) {
+      return c.value === selectedValues[0];
+    })) === null || _customizationProps$i2 === void 0 ? void 0 : _customizationProps$i2.displayLabel : undefined;
     if (customizationProps.itemsType == 'radio' && selectedValues && (selectedValues === null || selectedValues === void 0 ? void 0 : selectedValues.length) > 0) showTopItem = true;else if (customizationProps.itemsType == 'checkbox' && (customizationProps.multiSelect || (selectedValues === null || selectedValues === void 0 ? void 0 : selectedValues.length) > 0)) showTopItem = true;else if (customizationProps.itemsType == 'normal' && suggestions.length > 0) showTopItem = true;
     if (!showTopItem) return;
-    return /*#__PURE__*/_react.default.createElement(TopItemContainer, null, customizationProps.itemsType == 'radio' && /*#__PURE__*/_react.default.createElement(_InputFields.RadioButton, {
+    var selectedFirst = selectedValues.length > 0 ? visibleItems.find(function (x) {
+      return x.value == selectedValues[0];
+    }) : null;
+    return /*#__PURE__*/_react.default.createElement(TopItemContainer, {
+      size: size
+    }, customizationProps.itemsType == 'radio' && /*#__PURE__*/_react.default.createElement(_InputFields.RadioButton, {
       ref: elRefs[0],
       iconPointerEventsTransparent: true,
       select: function select() {},
+      label: (_selectedFirst$displa = selectedFirst === null || selectedFirst === void 0 ? void 0 : selectedFirst.displayLabel) !== null && _selectedFirst$displa !== void 0 ? _selectedFirst$displa : selectedFirst === null || selectedFirst === void 0 ? void 0 : selectedFirst.value,
       size: size,
       id: "".concat(id, "_topitem"),
-      label: selectedValues[0],
       selected: true
     }), customizationProps.itemsType == 'checkbox' && /*#__PURE__*/_react.default.createElement(_InputFields.Checkbox, {
       ref: elRefs[0],
@@ -324,15 +385,16 @@ var DropdownContent = function DropdownContent(_ref) {
       semiSelected: customizationProps.multiSelect && !allSelected && (selectedValues === null || selectedValues === void 0 ? void 0 : selectedValues.length) > 0,
       size: size,
       id: "".concat(id, "_checkbox_selectall"),
-      label: customizationProps.multiSelect ? 'Select all' : selectedValues[0],
+      label: customizationProps.multiSelect ? 'Select all' : (_selectedFirst$displa2 = selectedFirst === null || selectedFirst === void 0 ? void 0 : selectedFirst.displayLabel) !== null && _selectedFirst$displa2 !== void 0 ? _selectedFirst$displa2 : selectedFirst === null || selectedFirst === void 0 ? void 0 : selectedFirst.value,
       selected: !customizationProps.multiSelect || allSelected
     }), customizationProps.itemsType == 'normal' && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, suggestions.map(function (x) {
       var _x$displayLabel2;
 
-      return /*#__PURE__*/_react.default.createElement(_CommonStyling.DropdownButton, {
+      return /*#__PURE__*/_react.default.createElement("button", {
         ref: elRefs[0],
         type: "button",
         id: "".concat(id, "_topitem"),
+        key: "".concat(id, "_topitem_").concat(x.value),
         onClick: function onClick(e) {
           customizationProps.onValueUpdate([x.value]);
           setSelectedValues([x.value]);
@@ -355,18 +417,25 @@ var DropdownContent = function DropdownContent(_ref) {
 
   var getElements = function getElements() {
     if (getFilteredItems().length === 0) {
-      return /*#__PURE__*/_react.default.createElement(ItemsContainer, null, /*#__PURE__*/_react.default.createElement(_CommonStyling.DropdownButton, {
+      return /*#__PURE__*/_react.default.createElement(ItemsContainer, {
+        size: size
+      }, /*#__PURE__*/_react.default.createElement("button", {
+        className: "dropdownButton",
         disabled: true
       }, /*#__PURE__*/_react.default.createElement("span", null, messageOnNoResults)));
     }
 
     var number = 0;
-    return /*#__PURE__*/_react.default.createElement(ItemsContainer, null, getFilteredItems().filter(function (x) {
+    return /*#__PURE__*/_react.default.createElement(ItemsContainer, {
+      size: size
+    }, getFilteredItems().filter(function (x) {
       return x && (customizationProps.itemsType != 'normal' || !x.suggestion);
     }).map(function (item) {
-      var _item$displayLabel;
+      var _item$displayLabel, _item$displayLabel2, _item$displayLabel3;
 
-      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, customizationProps.itemsType == 'radio' && /*#__PURE__*/_react.default.createElement(_InputFields.RadioButton, {
+      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, {
+        key: "key_".concat(id, "_").concat(item.value)
+      }, item.customContent, !item.customContent && customizationProps.itemsType == 'radio' && /*#__PURE__*/_react.default.createElement(_InputFields.RadioButton, {
         select: function select(selected) {
           if (!selected) return;
           customizationProps.onValueUpdate && customizationProps.onValueUpdate([item.value]);
@@ -378,9 +447,9 @@ var DropdownContent = function DropdownContent(_ref) {
         disabled: item === null || item === void 0 ? void 0 : item.disabled,
         key: "key_".concat(id, "_").concat(number++),
         id: "".concat(id, "_").concat(number + 1),
-        label: item.value,
+        label: (_item$displayLabel = item.displayLabel) !== null && _item$displayLabel !== void 0 ? _item$displayLabel : item.value,
         selected: selectedValues === null || selectedValues === void 0 ? void 0 : selectedValues.includes(item.value)
-      }), customizationProps.itemsType == 'checkbox' && /*#__PURE__*/_react.default.createElement(_InputFields.Checkbox, {
+      }), !item.customContent && customizationProps.itemsType == 'checkbox' && /*#__PURE__*/_react.default.createElement(_InputFields.Checkbox, {
         select: function select(selected) {
           var newValue = [];
 
@@ -399,11 +468,10 @@ var DropdownContent = function DropdownContent(_ref) {
         size: size,
         key: "key_".concat(id, "_").concat(number++),
         id: "".concat(id, "_").concat(number + 1),
-        label: item.value,
+        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)
-      }), (customizationProps.itemsType == 'normal' || !customizationProps.itemsType) && /*#__PURE__*/_react.default.createElement(_CommonStyling.DropdownButton, {
+      }), !item.customContent && (customizationProps.itemsType == 'normal' || !customizationProps.itemsType) && /*#__PURE__*/_react.default.createElement("button", {
         type: "button",
-        size: size,
         disabled: item === null || item === void 0 ? void 0 : item.disabled,
         ref: elRefs[number + 1],
         onClick: function onClick(e) {
@@ -412,7 +480,7 @@ var DropdownContent = function DropdownContent(_ref) {
           setIsOpen(false);
           setFocused(null);
         },
-        className: (item.showDividerAbove ? 'show-divider-above' : '') + ' ' + (selectedValues !== null && selectedValues !== void 0 && selectedValues.includes(item.value) ? 'active' : ''),
+        className: 'dropdownButton ' + (item.showDividerAbove ? 'show-divider-above' : '') + ' ' + (selectedValues !== null && selectedValues !== void 0 && selectedValues.includes(item.value) ? 'active' : ''),
         key: "key_".concat(id, "_").concat(number++),
         id: "".concat(id, "_").concat(number + 1)
       }, item.showDividerAbove && /*#__PURE__*/_react.default.createElement("div", {
@@ -423,7 +491,7 @@ var DropdownContent = function DropdownContent(_ref) {
         className: "item-icon"
       }, item.icon), /*#__PURE__*/_react.default.createElement("div", {
         className: "item-label"
-      }, (_item$displayLabel = item.displayLabel) !== null && _item$displayLabel !== void 0 ? _item$displayLabel : item.value, item.noteLabel && /*#__PURE__*/_react.default.createElement("div", {
+      }, (_item$displayLabel3 = item.displayLabel) !== null && _item$displayLabel3 !== void 0 ? _item$displayLabel3 : item.value, item.noteLabel && /*#__PURE__*/_react.default.createElement("div", {
         style: {
           fontSize: '12px'
         }
@@ -448,12 +516,21 @@ var DropdownContent = function DropdownContent(_ref) {
     onScroll: handleScroll,
     ref: itemsListRef,
     scrollable: customizationProps.scrollable
-  }, customizationProps.pinTopItem && getTopItem(), getElements()), customizationProps.action && customizationProps.actionLabel && /*#__PURE__*/_react.default.createElement(ActionButtonContainer, null, /*#__PURE__*/_react.default.createElement(_Button.default, {
+  }, customizationProps.menuContent && /*#__PURE__*/_react.default.createElement(MenuContentContainer, {
+    size: size
+  }, customizationProps.menuContent, /*#__PURE__*/_react.default.createElement(DividerContainer, {
+    size: size
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "divider"
+  }))), customizationProps.pinTopItem && getTopItem(), getElements()), customizationProps.action && customizationProps.actionLabel && /*#__PURE__*/_react.default.createElement(ActionButtonContainer, {
+    size: size
+  }, /*#__PURE__*/_react.default.createElement(_Button.default, {
     width: "100%",
-    variant: "primary",
+    variant: (_customizationProps$a = customizationProps.actionVariant) !== null && _customizationProps$a !== void 0 ? _customizationProps$a : 'primary',
     size: size,
     onClick: function onClick() {
-      return customizationProps.action();
+      if (customizationProps.action()) //closing the dropdown if action returns 'true'
+        setIsOpen(false);
     }
   }, customizationProps.actionLabel)));
   /*  ),
@@ -473,6 +550,7 @@ 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,
@@ -487,7 +565,8 @@ DropdownContent.propTypes = {
       suggestion: _propTypes.default.bool,
       showDividerAbove: _propTypes.default.bool,
       disabled: _propTypes.default.bool,
-      icon: _propTypes.default.node
+      icon: _propTypes.default.node,
+      customContent: _propTypes.default.node
     })).isRequired
   }).isRequired,
   alignLeft: _propTypes.default.bool,

package/dist/js/Dropdown/DropdownContent.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Dropdown/DropdownContent.tsx"],"names":["DDContainer","styled","div","COLORS","white","props","width","isButton","alignLeft","ButtonDropdownContentStyling","neutral_100","size","Size","Large","Medium","scrollable","maxHeight","ListContainer","itemsType","neutral_600","neutral_500","ItemsContainer","TopItemContainer","neutral_200","ActionButtonContainer","MAX_MENU_HEIGHT","AVG_OPTION_HEIGHT","DropdownContent","id","customizationProps","isOpen","hideOnClickOutside","setIsOpen","filter","focused","setFocused","selectedValues","setSelectedValues","messageOnNoResults","React","useState","isUp","setIsUp","dropdownContentRef","useRef","Small","itemsListRef","determineDropUp","options","items","node","current","windowHeight","window","innerHeight","menuHeight","Math","min","length","instOffsetWithMenu","getBoundingClientRect","top","setNewFocusedElement","index","newFocusedElement","elRefs","focus","handleKeyDown","e","keyCode","preventDefault","focusedNow","undefined","document","getElementById","handleClickOutside","contains","target","some","x","useEffect","addEventListener","removeEventListener","scrollPosition","handleScroll","scrollTop","getFilteredItems","filtrationString","toUpperCase","value","includes","displayLabel","getCorrectRef","ref","arrLength","setElRefs","Array","fill","map","_","i","haveTopItem","multiSelect","getSuggestions","suggestion","useLayoutEffect","focusThis","getTopItem","pinTopItem","visibleItems","allSelected","y","showTopItem","suggestions","selected","newValues","onValueUpdate","icon","noteLabel","fontSize","getElements","number","item","disabled","newValue","showDividerAbove","join","action","actionLabel"],"mappings":";;;;;;;;;;;AAAA;;AACA;;AAEA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEO,IAAMA,WAAW,GAAGC,0BAAOC,GAAV,knBAGFC,eAAOC,KAHL,EAKb,UAAAC,KAAK;AAAA,SAAIA,KAAK,CAACC,KAAN,GAAcD,KAAK,CAACC,KAApB,GAA4B,MAAhC;AAAA,CALQ,EAOZ,UAAAD,KAAK;AAAA,SAAKA,KAAK,CAACE,QAAN,GAAiB,MAAjB,GAA0B,SAA/B;AAAA,CAPO,EAoBpB,UAAAF,KAAK;AAAA,SAAKA,KAAK,CAACG,SAAN,GAAkB,YAAlB,GAAiC,EAAtC;AAAA,CApBe,EAsBpB,UAAAH,KAAK;AAAA,SAAKA,KAAK,CAACE,QAAN,GAAiBE,2CAAjB,GAAgD,EAArD;AAAA,CAtBe,EAwBFN,eAAOO,WAxBL,EAgCT,UAAAL,KAAK;AAAA,SAAKA,KAAK,CAACM,IAAN,IAAcC,YAAKC,KAAnB,GAA2B,OAA3B,GAAqCR,KAAK,CAACM,IAAN,IAAcC,YAAKE,MAAnB,GAA4B,OAA5B,GAAsC,OAAhF;AAAA,CAhCI,EAiCL,UAAAT,KAAK;AAAA,SAAKA,KAAK,CAACM,IAAN,IAAcC,YAAKC,KAAnB,GAA2B,MAA3B,GAAoCR,KAAK,CAACM,IAAN,IAAcC,YAAKE,MAAnB,GAA4B,KAA5B,GAAoC,KAA7E;AAAA,CAjCA,EAmCR,UAAAT,KAAK;AAAA,SAAK,CAACA,KAAK,CAACU,UAAP,GAAoB,MAApB,GAA6BV,KAAK,CAACW,SAAN,GAAkBX,KAAK,CAACW,SAAxB,GAAoCX,KAAK,CAACM,IAAN,IAAcC,YAAKC,KAAnB,GAA2B,OAA3B,GAAqCR,KAAK,CAACM,IAAN,IAAcC,YAAKE,MAAnB,GAA4B,OAA5B,GAAsC,OAAjJ;AAAA,CAnCG,CAAjB;;;;AAsCP,IAAMG,aAAa,GAAGhB,0BAAOC,GAAV,8iBACf,UAAAG,KAAK;AAAA,SAAKA,KAAK,CAACU,UAAN,GAAmB,qBAAnB,GAA2C,EAAhD;AAAA,CADU,EAEf,UAAAV,KAAK;AAAA,SAAKA,KAAK,CAACa,SAAN,IAAmB,QAAnB,GAA8B,mBAA9B,GAAoD,EAAzD;AAAA,CAFU,EAKA,UAAAb,KAAK;AAAA,SAAIA,KAAK,CAACM,IAAN,IAAcC,YAAKC,KAAnB,GAA2B,KAA3B,GAAmCR,KAAK,CAACM,IAAN,IAAcC,YAAKE,MAAnB,GAA4B,KAA5B,GAAoC,KAA3E;AAAA,CALL,EAMG,UAAAT,KAAK;AAAA,SAAIA,KAAK,CAACM,IAAN,IAAcC,YAAKC,KAAnB,GAA2B,KAA3B,GAAmCR,KAAK,CAACM,IAAN,IAAcC,YAAKE,MAAnB,GAA4B,KAA5B,GAAoC,KAA3E;AAAA,CANR,EAkBDX,eAAOO,WAlBN,EAwBDP,eAAOgB,WAxBN,EA8BDhB,eAAOiB,WA9BN,CAAnB;;AAkCA,IAAMC,cAAc,GAAGpB,0BAAOC,GAAV,yEAApB;;AAIA,IAAMoB,gBAAgB,GAAGrB,0BAAOC,GAAV,6LAEGC,eAAOoB,WAFV,CAAtB;;AAOA,IAAMC,qBAAqB,GAAGvB,0BAAOC,GAAV,+NAELC,eAAOoB,WAFF,CAA3B;;AAWA,IAAME,eAAe,GAAG,GAAxB;AACA,IAAMC,iBAAiB,GAAG,EAA1B;;AA0CA,IAAMC,eAAuD,GAAG,SAA1DA,eAA0D,OAgB1D;AAAA,MAfJC,EAeI,QAfJA,EAeI;AAAA,MAdJC,kBAcI,QAdJA,kBAcI;AAAA,MAbJrB,SAaI,QAbJA,SAaI;AAAA,MAZJD,QAYI,QAZJA,QAYI;AAAA,MAXJI,IAWI,QAXJA,IAWI;AAAA,MAVJmB,MAUI,QAVJA,MAUI;AAAA,MATJC,kBASI,QATJA,kBASI;AAAA,MARJzB,KAQI,QARJA,KAQI;AAAA,MAPJ0B,SAOI,QAPJA,SAOI;AAAA,MANJC,MAMI,QANJA,MAMI;AAAA,MALJC,OAKI,QALJA,OAKI;AAAA,MAJJC,UAII,QAJJA,UAII;AAAA,MAHJC,cAGI,QAHJA,cAGI;AAAA,MAFJC,iBAEI,QAFJA,iBAEI;AAAA,MADJC,kBACI,QADJA,kBACI;;AACJ,wBAAwBC,eAAMC,QAAN,CAAwB,KAAxB,CAAxB;AAAA;AAAA,MAAOC,IAAP;AAAA,MAAaC,OAAb;;AACA,MAAMC,kBAAkB,GAAGJ,eAAMK,MAAN,CAA6B,IAA7B,CAA3B;;AAEA,MAAG,CAACf,kBAAkB,CAACX,SAAvB,EAAkCW,kBAAkB,CAACX,SAAnB,GAA+B,QAA/B;AAClC,MAAG,CAACP,IAAJ,EAAUA,IAAI,GAAGC,YAAKiC,KAAZ;;AAEV,MAAMC,YAAY,GAAGP,eAAMK,MAAN,CAA6B,IAA7B,CAArB;;AAEA,MAAMG,eAAe,GAAG,SAAlBA,eAAkB,GAAM;AAC5B,QAAMC,OAAO,GAAGnB,kBAAkB,CAACoB,KAAnC;AACA,QAAMC,IAAI,GAAGP,kBAAkB,CAACQ,OAAhC;AAEA,QAAI,CAACD,IAAL,EAAW;AAEX,QAAME,YAAY,GAAGC,MAAM,CAACC,WAA5B;AACA,QAAMC,UAAU,GAAGC,IAAI,CAACC,GAAL,CAAShC,eAAT,EAA0BuB,OAAO,CAACU,MAAR,GAAiBhC,iBAA3C,CAAnB;AACA,QAAMiC,kBAAkB,GAAGT,IAAI,CAACU,qBAAL,GAA6BC,GAA7B,GAAmCN,UAA9D;AACAb,IAAAA,OAAO,CAACiB,kBAAkB,IAAIP,YAAvB,CAAP;AACD,GAVD;;AAYA,MAAMU,oBAAoB,GAAG,SAAvBA,oBAAuB,CAACC,KAAD,EAAmB;AAC9C,QAAMC,iBAAiB,GAAGC,MAAM,CAACF,KAAD,CAAhC;;AACA,QAAIC,iBAAJ,EAAuB;AAAA;;AACrB7B,MAAAA,UAAU,CAAC4B,KAAD,CAAV;AACAC,MAAAA,iBAAiB,SAAjB,IAAAA,iBAAiB,WAAjB,qCAAAA,iBAAiB,CAAEb,OAAnB,gFAA4Be,KAA5B;AACD;AACF,GAND;;AAQA,MAAMC,aAAa,GAAG,SAAhBA,aAAgB,CAACC,CAAD,EAAY;AAChC,QAAItC,MAAJ,EAAY;AACV,UAAIsC,CAAC,CAACC,OAAF,KAAc,EAAlB,EAAsB;AACpBD,QAAAA,CAAC,CAACE,cAAF;AACA,YAAIC,UAAU,GAAGrC,OAAjB;;AACA,YAAIqC,UAAU,KAAKC,SAAf,IAA4BD,UAAU,KAAK,IAA3C,IAAmDA,UAAU,GAAG,CAApE,EAAuE;AACrEA,UAAAA,UAAU,IAAI,CAAd;AACAT,UAAAA,oBAAoB,CAACS,UAAD,CAApB;AACD;AACF,OAPD,MAOO,IAAIH,CAAC,CAACC,OAAF,KAAc,EAAlB,EAAsB;AAC3BD,QAAAA,CAAC,CAACE,cAAF;AACA,YAAIC,UAAU,GAAGrC,OAAjB;;AACA,YAAIqC,UAAU,KAAKC,SAAf,IAA4BD,UAAU,KAAK,IAA/C,EAAqD;AACnDA,UAAAA,UAAU;AACX,SAFD,MAEO;AACLA,UAAAA,UAAU,GAAG,CAAb;AACD;;AACDT,QAAAA,oBAAoB,CAACS,UAAD,CAApB;AACD,OATM,MASA,IAAIH,CAAC,CAACC,OAAF,KAAc,CAAlB,EAAqB;AAC1BD,QAAAA,CAAC,CAACE,cAAF;AACA,YAAIC,UAAU,GAAGrC,OAAjB;;AACA,YAAIqC,UAAU,KAAKC,SAAf,IAA4BD,UAAU,KAAK,IAA/C,EAAqD;AACnDA,UAAAA,UAAU;AACV,cAAMP,iBAAiB,GAAGS,QAAQ,CAACC,cAAT,WAA2B9C,EAA3B,cAAiC2C,UAAjC,EAA1B;;AACA,cAAI,CAACP,iBAAL,EAAwB;AACtBF,YAAAA,oBAAoB,CAAC,CAAD,CAApB;AACD,WAFD,MAEO;AACLA,YAAAA,oBAAoB,CAACS,UAAD,CAApB;AACD;AACF,SARD,MAQO;AACLpC,UAAAA,UAAU,CAAC,IAAD,CAAV;AACD;AACF,OAdM,MAcA,IAAIiC,CAAC,CAACC,OAAF,KAAc,EAAlB,EAAsB;AAC3BrC,QAAAA,SAAS,CAAC,KAAD,CAAT;AACAG,QAAAA,UAAU,CAAC,IAAD,CAAV,CAF2B,CAI3B;;AACA;AACR;AACA;AACA;AACA;AACA;AACO;AACF;AACF,GA7CD;;AA+CA,MAAMwC,kBAAkB,GAAG,SAArBA,kBAAqB,CAACP,CAAD,EAAY;AACrC,QAAIrC,kBAAkB,IAAIY,kBAAJ,aAAIA,kBAAJ,eAAIA,kBAAkB,CAAEQ,OAA1C,IAAqD,CAACR,kBAAkB,CAACQ,OAAnB,CAA2ByB,QAA3B,CAAoCR,CAAC,CAACS,MAAtC,CAAtD,IAAuG,CAACZ,MAAM,CAACa,IAAP,CAAY,UAAAC,CAAC;AAAA;;AAAA,aAAIA,CAAJ,aAAIA,CAAJ,qCAAIA,CAAC,CAAE5B,OAAP,+CAAI,WAAYyB,QAAZ,CAAqBR,CAAC,CAACS,MAAvB,CAAJ;AAAA,KAAb,CAA5G,EAA8J;AAC5J,UAAI/C,MAAJ,EAAY;AACVE,QAAAA,SAAS,CAAC,KAAD,CAAT;AACAG,QAAAA,UAAU,CAAC,IAAD,CAAV;AACD;AACF;AACF,GAPD;;AASAI,iBAAMyC,SAAN,CAAgB,YAAM;AACpBP,IAAAA,QAAQ,CAACQ,gBAAT,CAA0B,SAA1B,EAAqCd,aAArC;AACAM,IAAAA,QAAQ,CAACQ,gBAAT,CAA0B,OAA1B,EAAmCN,kBAAnC;AACA,WAAO,YAAM;AACXF,MAAAA,QAAQ,CAACS,mBAAT,CAA6B,SAA7B,EAAwCf,aAAxC;AACAM,MAAAA,QAAQ,CAACS,mBAAT,CAA6B,OAA7B,EAAsCP,kBAAtC;AACD,KAHD;AAID,GAPD;;AASA,MAAMQ,cAAc,GAAG5C,eAAMK,MAAN,CAAiC,CAAjC,CAAvB;;AACA,MAAMwC,YAAY,GAAG,SAAfA,YAAe,GAAM;AAAA;;AACzBD,IAAAA,cAAc,CAAChC,OAAf,4BAAyBL,YAAY,CAACK,OAAtC,0DAAyB,sBAAsBkC,SAA/C;AACD,GAFD;;AAGA,8BAAgB,YAAM;AAAA;;AACpB,QAAIvC,YAAY,CAACK,OAAjB,EAA0BL,YAAY,CAACK,OAAb,CAAqBkC,SAArB,4BAAiCF,cAAc,CAAChC,OAAhD,yEAA2D,CAA3D;AAC3B,GAFD,EAEG,CAACf,cAAD,CAFH;;AAIA,MAAMkD,gBAAgB,GAAG,SAAnBA,gBAAmB,GAAM;AAC7B,QAAMC,gBAAgB,GAAG,CAACtD,MAAD,aAACA,MAAD,cAACA,MAAD,GAAW,EAAX,EAAeuD,WAAf,EAAzB;AACA,WAAO3D,kBAAkB,CAACoB,KAAnB,CACLhB,MADK,CACE,UAAA8C,CAAC;AAAA;;AAAA,aAAI,CAAAA,CAAC,SAAD,IAAAA,CAAC,WAAD,wBAAAA,CAAC,CAAEU,KAAH,sDAAUD,WAAV,GAAwBE,QAAxB,CAAiCH,gBAAjC,OAAsDR,CAAtD,aAAsDA,CAAtD,0CAAsDA,CAAC,CAAEY,YAAzD,oDAAsD,gBAAiBH,WAAjB,GAA+BE,QAA/B,CAAwCH,gBAAxC,CAAtD,CAAJ;AAAA,KADH,CAAP;AAED,GAJD;;AAMA,MAAMK,aAAa,GAAG,SAAhBA,aAAgB,CAACC,GAAD,EAAqE;AACzF,YAAOhE,kBAAkB,CAACX,SAA1B;AAEE,WAAK,QAAL;AACE,eAAO2E,GAAG,iBAA0C,uBAApD;;AACF;AACE,eAAOA,GAAG,iBAAuC,uBAAjD;AALJ;AAOD,GARD;;AAUA,MAAMC,SAAS,GAAGR,gBAAgB,GAAG5B,MAArC;;AACA,yBAA4BnB,eAAMC,QAAN,CAA+C,EAA/C,CAA5B;AAAA;AAAA,MAAOyB,MAAP;AAAA,MAAe8B,SAAf;;AAEAxD,iBAAMyC,SAAN,CAAgB,YAAM;AACpBe,IAAAA,SAAS,CAAC,UAAA9B,MAAM;AAAA,aACd+B,KAAK,CAACF,SAAS,GAAG,CAAb,CAAL,CAAqBG,IAArB,CAA0B,IAA1B,EACGC,GADH,CACO,UAACC,CAAD,EAAIC,CAAJ;AAAA,eAAUR,aAAa,CAAC3B,MAAM,CAACmC,CAAD,CAAP,CAAvB;AAAA,OADP,CADc;AAAA,KAAP,CAAT;AAGD,GAJD,EAIG,CAACtE,MAAD,EAASgE,SAAT,EAAoB1D,cAApB,CAJH;;AAMAG,iBAAMyC,SAAN,CAAgB,YAAM;AACpBjC,IAAAA,eAAe;AAChB,GAFD,EAEG,CAACjB,MAAD,CAFH;;AAKA,MAAMuE,WAAW,GAAG,SAAdA,WAAc,GAAM;AAAA;;AACxB,QAAIxE,kBAAkB,CAACX,SAAnB,IAAgC,OAAhC,IAA2CkB,cAA3C,IAA6D,CAAAA,cAAc,SAAd,IAAAA,cAAc,WAAd,YAAAA,cAAc,CAAEsB,MAAhB,IAAyB,CAA1F,EAA6F,OAAO,IAAP,CAA7F,KACK,IAAI7B,kBAAkB,CAACX,SAAnB,IAAgC,UAAhC,KAA+CW,kBAAkB,CAACyE,WAAnB,IAAkC,CAAAlE,cAAc,SAAd,IAAAA,cAAc,WAAd,YAAAA,cAAc,CAAEsB,MAAhB,IAAyB,CAA1G,CAAJ,EAAkH,OAAO,IAAP,CAAlH,KACA,IAAI7B,kBAAkB,CAACX,SAAnB,IAAgC,QAAhC,IAA4C,oBAAAqF,cAAc,YAAd,0DAAkB7C,MAAlB,IAA2B,CAA3E,EAA8E,OAAO,IAAP;AACnF,WAAO,KAAP;AACD,GALD;;AAOA,MAAM6C,cAAc,GAAG,SAAjBA,cAAiB,GAAM;AAC3B,WAAOjB,gBAAgB,GAAGrD,MAAnB,CAA0B,UAAA8C,CAAC;AAAA,aAAIA,CAAC,CAACyB,UAAN;AAAA,KAA3B,CAAP;AACD,GAFD;;AAIAjE,iBAAMkE,eAAN,CAAsB,YAAM;AAC1B,QAAI3E,MAAM,KAAKI,OAAO,IAAIA,OAAO,IAAI,CAA3B,CAAV,EAAyC;AAAA;;AACvC,UAAMwE,SAAS,GAAGxE,OAAO,IAAI,CAAX,IAAgB,CAACmE,WAAW,EAA5B,GAAiC,CAAjC,GAAqCnE,OAAvD;AACA,UAAGwE,SAAS,IAAIxE,OAAhB,EACEC,UAAU,CAACuE,SAAD,CAAV;AACF,UAAM1C,iBAAiB,GAAGC,MAAM,CAACyC,SAAD,CAAhC;AACA1C,MAAAA,iBAAiB,SAAjB,IAAAA,iBAAiB,WAAjB,sCAAAA,iBAAiB,CAAEb,OAAnB,kFAA4Be,KAA5B;AACD,KAND,MAQE/B,UAAU,CAAC,IAAD,CAAV,CATwB,CASN;;AACrB,GAVD,EAUG,CAACL,MAAD,CAVH;;AAcA,MAAM6E,UAAU,GAAG,SAAbA,UAAa,GAAM;AACvB,QAAI,CAAC9E,kBAAkB,CAAC+E,UAAxB,EAAoC;AACpC,QAAMC,YAAY,GAAGvB,gBAAgB,EAArC;AACA,QAAMwB,WAAW,GAAG,CAAA1E,cAAc,SAAd,IAAAA,cAAc,WAAd,YAAAA,cAAc,CAAEH,MAAhB,CAAuB,UAAA8C,CAAC;AAAA,aAAI8B,YAAY,CAAC/B,IAAb,CAAkB,UAAAiC,CAAC;AAAA,eAAIA,CAAC,CAACtB,KAAF,IAAWV,CAAf;AAAA,OAAnB,CAAJ;AAAA,KAAxB,EAAkErB,MAAlE,KAA4EmD,YAAY,CAACnD,MAA7G;AACA,QAAIsD,WAAW,GAAG,KAAlB;AACA,QAAMC,WAAW,GAAGV,cAAc,EAAlC;AAEA,QAAI1E,kBAAkB,CAACX,SAAnB,IAAgC,OAAhC,IAA2CkB,cAA3C,IAA6D,CAAAA,cAAc,SAAd,IAAAA,cAAc,WAAd,YAAAA,cAAc,CAAEsB,MAAhB,IAAyB,CAA1F,EAA6FsD,WAAW,GAAG,IAAd,CAA7F,KACK,IAAInF,kBAAkB,CAACX,SAAnB,IAAgC,UAAhC,KAA+CW,kBAAkB,CAACyE,WAAnB,IAAkC,CAAAlE,cAAc,SAAd,IAAAA,cAAc,WAAd,YAAAA,cAAc,CAAEsB,MAAhB,IAAyB,CAA1G,CAAJ,EAAkHsD,WAAW,GAAG,IAAd,CAAlH,KACA,IAAInF,kBAAkB,CAACX,SAAnB,IAAgC,QAAhC,IAA4C+F,WAAW,CAACvD,MAAZ,GAAqB,CAArE,EAAwEsD,WAAW,GAAG,IAAd;AAE7E,QAAI,CAACA,WAAL,EAAkB;AAElB,wBACE,6BAAC,gBAAD,QACGnF,kBAAkB,CAACX,SAAnB,IAAgC,OAAhC,iBACC,6BAAC,wBAAD;AACE,MAAA,GAAG,EAAE+C,MAAM,CAAC,CAAD,CADb;AAEE,MAAA,4BAA4B,EAAE,IAFhC;AAGE,MAAA,MAAM,EAAE,kBAAM,CAAE,CAHlB;AAGoB,MAAA,IAAI,EAAEtD,IAH1B;AAGgC,MAAA,EAAE,YAAKiB,EAAL,aAHlC;AAGqD,MAAA,KAAK,EAAEQ,cAAc,CAAC,CAAD,CAH1E;AAG+E,MAAA,QAAQ,EAAE;AAHzF,MAFJ,EAOGP,kBAAkB,CAACX,SAAnB,IAAgC,UAAhC,iBACC,6BAAC,qBAAD;AACE,MAAA,GAAG,EAAE+C,MAAM,CAAC,CAAD,CADb;AAEE,MAAA,MAAM,EAAE,gBAACiD,QAAD,EAAuB;AAC7B,YAAI,CAACrF,kBAAkB,CAACyE,WAAxB,EAAqC;AAErC,YAAMa,SAAS,GAAGD,QAAQ,GAAGL,YAAY,CAACX,GAAb,CAAiB,UAAAnB,CAAC;AAAA,iBAAIA,CAAC,CAACU,KAAN;AAAA,SAAlB,CAAH,GAAoC,EAA9D;AACApD,QAAAA,iBAAiB,CAAC8E,SAAD,CAAjB;AACAtF,QAAAA,kBAAkB,CAACuF,aAAnB,IAAoCvF,kBAAkB,CAACuF,aAAnB,CAAiCD,SAAjC,CAApC;AACD,OARH;AASE,MAAA,4BAA4B,EAAE,IAThC;AAUE,MAAA,YAAY,EAAEtF,kBAAkB,CAACyE,WAAnB,IAAkC,CAACQ,WAAnC,IAAkD,CAAA1E,cAAc,SAAd,IAAAA,cAAc,WAAd,YAAAA,cAAc,CAAEsB,MAAhB,IAAyB,CAV3F;AAWE,MAAA,IAAI,EAAE/C,IAXR;AAYE,MAAA,EAAE,YAAKiB,EAAL,wBAZJ;AAaE,MAAA,KAAK,EAAEC,kBAAkB,CAACyE,WAAnB,GAAiC,YAAjC,GAAgDlE,cAAc,CAAC,CAAD,CAbvE;AAcE,MAAA,QAAQ,EAAE,CAACP,kBAAkB,CAACyE,WAApB,IAAmCQ;AAd/C,MARJ,EAyBGjF,kBAAkB,CAACX,SAAnB,IAAgC,QAAhC,iBACC,4DACC+F,WAAW,CAACf,GAAZ,CAAgB,UAAAnB,CAAC;AAAA;;AAAA,0BAChB,6BAAC,6BAAD;AAAgB,QAAA,GAAG,EAAEd,MAAM,CAAC,CAAD,CAA3B;AAAsE,QAAA,IAAI,EAAC,QAA3E;AAAoF,QAAA,EAAE,YAAKrC,EAAL,aAAtF;AACE,QAAA,OAAO,EAAE,iBAACwC,CAAD,EAAY;AACnBvC,UAAAA,kBAAkB,CAACuF,aAAnB,CAAiC,CAACrC,CAAC,CAACU,KAAH,CAAjC;AACApD,UAAAA,iBAAiB,CAAC,CAAC0C,CAAC,CAACU,KAAH,CAAD,CAAjB;AACAzD,UAAAA,SAAS,CAAC,KAAD,CAAT;AACAG,UAAAA,UAAU,CAAC,IAAD,CAAV;AACD;AANH,sBAOE;AAAK,QAAA,SAAS,EAAC;AAAf,SACG,CAAA4C,CAAC,SAAD,IAAAA,CAAC,WAAD,YAAAA,CAAC,CAAEsC,IAAH,kBAAW;AAAK,QAAA,SAAS,EAAC;AAAf,SAA4BtC,CAA5B,aAA4BA,CAA5B,uBAA4BA,CAAC,CAAEsC,IAA/B,CADd,eAEE;AAAK,QAAA,SAAS,EAAC;AAAf,6BACGtC,CADH,aACGA,CADH,uBACGA,CAAC,CAAEY,YADN,+DACsBZ,CADtB,aACsBA,CADtB,uBACsBA,CAAC,CAAEU,KADzB,EAEG,CAAAV,CAAC,SAAD,IAAAA,CAAC,WAAD,YAAAA,CAAC,CAAEuC,SAAH,kBAAgB;AAAK,QAAA,KAAK,EAAE;AAACC,UAAAA,QAAQ,EAAE;AAAX;AAAZ,SAAiCxC,CAAC,CAACuC,SAAnC,CAFnB,CAFF,CAPF,CADgB;AAAA,KAAjB,CADD,CA1BJ,CADF;AAgDD,GA7DD;;AA+DA,MAAME,WAAW,GAAG,SAAdA,WAAc,GAAM;AACxB,QAAIlC,gBAAgB,GAAG5B,MAAnB,KAA8B,CAAlC,EAAqC;AACnC,0BACE,6BAAC,cAAD,qBACE,6BAAC,6BAAD;AAAgB,QAAA,QAAQ;AAAxB,sBACE,2CAAOpB,kBAAP,CADF,CADF,CADF;AAOD;;AACD,QAAImF,MAAM,GAAG,CAAb;AACA,wBACE,6BAAC,cAAD,QACGnC,gBAAgB,GAAGrD,MAAnB,CAA0B,UAAA8C,CAAC;AAAA,aAAIA,CAAC,KAAKlD,kBAAkB,CAACX,SAAnB,IAAgC,QAAhC,IAA4C,CAAC6D,CAAC,CAACyB,UAApD,CAAL;AAAA,KAA3B,EAAiGN,GAAjG,CAAqG,UAAAwB,IAAI,EAAI;AAAA;;AAC5G,0BACE,4DACG7F,kBAAkB,CAACX,SAAnB,IAAgC,OAAhC,iBACC,6BAAC,wBAAD;AACE,QAAA,MAAM,EAAE,gBAACgG,QAAD,EAAuB;AAC7B,cAAI,CAACA,QAAL,EAAe;AACfrF,UAAAA,kBAAkB,CAACuF,aAAnB,IAAoCvF,kBAAkB,CAACuF,aAAnB,CAAiC,CAACM,IAAI,CAACjC,KAAN,CAAjC,CAApC;AACApD,UAAAA,iBAAiB,CAAC,CAACqF,IAAI,CAACjC,KAAN,CAAD,CAAjB;AACD,SALH;AAME,QAAA,GAAG,EAAExB,MAAM,CAACwD,MAAM,GAAG,CAAV,CANb;AAOE,QAAA,IAAI,EAAE9G,IAPR;AAQE,QAAA,4BAA4B,EAAE,IARhC;AASE,QAAA,QAAQ,EAAE+G,IAAF,aAAEA,IAAF,uBAAEA,IAAI,CAAEC,QATlB;AAUE,QAAA,GAAG,gBAAS/F,EAAT,cAAe6F,MAAM,EAArB,CAVL;AAWE,QAAA,EAAE,YAAK7F,EAAL,cAAW6F,MAAM,GAAG,CAApB,CAXJ;AAYE,QAAA,KAAK,EAAEC,IAAI,CAACjC,KAZd;AAaE,QAAA,QAAQ,EAAErD,cAAF,aAAEA,cAAF,uBAAEA,cAAc,CAAEsD,QAAhB,CAAyBgC,IAAI,CAACjC,KAA9B;AAbZ,QAFJ,EAkBG5D,kBAAkB,CAACX,SAAnB,IAAgC,UAAhC,iBACC,6BAAC,qBAAD;AACE,QAAA,MAAM,EAAE,gBAACgG,QAAD,EAAuB;AAC7B,cAAIU,QAAkB,GAAG,EAAzB;;AACA,cAAI/F,kBAAkB,CAACyE,WAAvB,EAAoC;AAClC,gBAAIY,QAAJ,EAAcU,QAAQ,gCAAOxF,cAAP,IAAuBsF,IAAI,CAACjC,KAA5B,EAAR,CAAd,KACKmC,QAAQ,GAAGxF,cAAc,CAACH,MAAf,CAAsB,UAAA8C,CAAC;AAAA,qBAAIA,CAAC,IAAI2C,IAAI,CAACjC,KAAd;AAAA,aAAvB,CAAX;AACN,WAHD,MAGOmC,QAAQ,GAAGV,QAAQ,GAAG,CAACQ,IAAI,CAACjC,KAAN,CAAH,GAAkB,EAArC;;AAEPpD,UAAAA,iBAAiB,CAACuF,QAAD,CAAjB;AACA/F,UAAAA,kBAAkB,CAACuF,aAAnB,CAAiCQ,QAAjC;AACD,SAVH;AAWE,QAAA,4BAA4B,EAAE,IAXhC;AAYE,QAAA,QAAQ,EAAEF,IAAF,aAAEA,IAAF,uBAAEA,IAAI,CAAEC,QAZlB;AAaE,QAAA,GAAG,EAAE1D,MAAM,CAACwD,MAAM,GAAG,CAAV,CAbb;AAcE,QAAA,IAAI,EAAE9G,IAdR;AAeE,QAAA,GAAG,gBAASiB,EAAT,cAAe6F,MAAM,EAArB,CAfL;AAgBE,QAAA,EAAE,YAAK7F,EAAL,cAAW6F,MAAM,GAAG,CAApB,CAhBJ;AAiBE,QAAA,KAAK,EAAEC,IAAI,CAACjC,KAjBd;AAkBE,QAAA,QAAQ,EAAErD,cAAF,aAAEA,cAAF,uBAAEA,cAAc,CAAEsD,QAAhB,CAAyBgC,IAAI,CAACjC,KAA9B;AAlBZ,QAnBJ,EAwCG,CAAC5D,kBAAkB,CAACX,SAAnB,IAAgC,QAAhC,IAA4C,CAACW,kBAAkB,CAACX,SAAjE,kBACG,6BAAC,6BAAD;AACE,QAAA,IAAI,EAAC,QADP;AAEE,QAAA,IAAI,EAAEP,IAFR;AAGE,QAAA,QAAQ,EAAE+G,IAAF,aAAEA,IAAF,uBAAEA,IAAI,CAAEC,QAHlB;AAIE,QAAA,GAAG,EAAE1D,MAAM,CAACwD,MAAM,GAAG,CAAV,CAJb;AAKE,QAAA,OAAO,EAAE,iBAACrD,CAAD,EAAY;AACnBvC,UAAAA,kBAAkB,CAACuF,aAAnB,CAAiC,CAACM,IAAI,CAACjC,KAAN,CAAjC;AACApD,UAAAA,iBAAiB,CAAC,CAACqF,IAAI,CAACjC,KAAN,CAAD,CAAjB;AACAzD,UAAAA,SAAS,CAAC,KAAD,CAAT;AACAG,UAAAA,UAAU,CAAC,IAAD,CAAV;AACD,SAVH;AAWE,QAAA,SAAS,EAAG,CAACuF,IAAI,CAACG,gBAAL,GAAwB,oBAAxB,GAA+C,EAAhD,IAAsD,GAAtD,IAA6DzF,cAAc,SAAd,IAAAA,cAAc,WAAd,IAAAA,cAAc,CAAEsD,QAAhB,CAAyBgC,IAAI,CAACjC,KAA9B,IAAuC,QAAvC,GAAkD,EAA/G,CAXd;AAYE,QAAA,GAAG,gBAAS7D,EAAT,cAAe6F,MAAM,EAArB,CAZL;AAaE,QAAA,EAAE,YAAK7F,EAAL,cAAW6F,MAAM,GAAG,CAApB;AAbJ,SAcKC,IAAI,CAACG,gBAAL,iBAAyB;AAAK,QAAA,SAAS,EAAC;AAAf,QAd9B,eAeI;AAAK,QAAA,SAAS,EAAC;AAAf,SACGH,IAAI,CAACL,IAAL,iBAAa;AAAK,QAAA,SAAS,EAAC;AAAf,SAA4BK,IAAI,CAACL,IAAjC,CADhB,eAEE;AAAK,QAAA,SAAS,EAAC;AAAf,+BACGK,IAAI,CAAC/B,YADR,mEACwB+B,IAAI,CAACjC,KAD7B,EAEGiC,IAAI,CAACJ,SAAL,iBAAkB;AAAK,QAAA,KAAK,EAAE;AAACC,UAAAA,QAAQ,EAAE;AAAX;AAAZ,SAAiCG,IAAI,CAACJ,SAAtC,CAFrB,CAFF,CAfJ,CAzCN,CADF;AAoED,KArEA,CADH,CADF;AA0ED,GArFD;;AAuFA,sBAAO,6BAAC,WAAD;AACC,IAAA,GAAG,EAAE3E,kBADN;AAEC,IAAA,IAAI,EAAEhC,IAFP;AAGC,IAAA,KAAK,EAAEL,KAHR;AAIC,IAAA,QAAQ,EAAEC,QAJX;AAKC,IAAA,SAAS,EAAEC,SALZ;AAMC,IAAA,UAAU,EAAEqB,kBAAkB,CAACd,UANhC;AAOC,IAAA,SAAS,EAAEc,kBAAkB,CAACb,SAP/B;AAQC,IAAA,SAAS,EAAE,CAACc,MAAM,IAAI,MAAX,EAAmBW,IAAI,IAAI,IAA3B,EAAiCR,MAAjC,CAAwC,UAAAmC,CAAC;AAAA,aAAI,CAAC,CAACA,CAAN;AAAA,KAAzC,EAAkD0D,IAAlD,CAAuD,GAAvD;AARZ,kBASC,6BAAC,aAAD;AAAe,IAAA,IAAI,EAAEnH,IAArB;AAA2B,IAAA,SAAS,EAAEkB,kBAAkB,CAACX,SAAzD;AAAoE,IAAA,QAAQ,EAAEkE,YAA9E;AAA4F,IAAA,GAAG,EAAEtC,YAAjG;AAA+G,IAAA,UAAU,EAAEjB,kBAAkB,CAACd;AAA9I,KACGc,kBAAkB,CAAC+E,UAAnB,IAAiCD,UAAU,EAD9C,EAEGa,WAAW,EAFd,CATD,EAaE3F,kBAAkB,CAACkG,MAAnB,IAA6BlG,kBAAkB,CAACmG,WAAhD,iBACC,6BAAC,qBAAD,qBACE,6BAAC,eAAD;AAAQ,IAAA,KAAK,EAAC,MAAd;AAAqB,IAAA,OAAO,EAAC,SAA7B;AAAuC,IAAA,IAAI,EAAErH,IAA7C;AAAmD,IAAA,OAAO,EAAE;AAAA,aAAMkB,kBAAkB,CAACkG,MAAnB,EAAN;AAAA;AAA5D,KACGlG,kBAAkB,CAACmG,WADtB,CADF,CAdH,CAAP;AAqBA;AACF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEC,CApWD;;;AAjBEzH,EAAAA,Q;AACAsB,EAAAA,kB;AAbAX,IAAAA,S,4BAAY,O,EAAU,U,EAAa,Q;AACnCH,IAAAA,U;AACAuF,IAAAA,W;AACAtF,IAAAA,S;AACAgH,IAAAA,W;AACAD,IAAAA,M;AACAnB,IAAAA,U;AACAQ,IAAAA,a;AACAnE,IAAAA,K;AAlBAwC,MAAAA,K;AACAE,MAAAA,Y;AACA2B,MAAAA,S;AACAd,MAAAA,U;AACAqB,MAAAA,gB;AACAF,MAAAA,Q;AACAN,MAAAA,I;;;AAkBA7G,EAAAA,S;AACAsB,EAAAA,M;AACAE,EAAAA,S;AAEAJ,EAAAA,E;AACAK,EAAAA,M;AACA3B,EAAAA,K;AACAyB,EAAAA,kB;AACAK,EAAAA,c;AACAC,EAAAA,iB;AACAC,EAAAA,kB;AACAJ,EAAAA,O;AACAC,EAAAA,U;;eAyWaR,e","sourcesContent":["import React, { useLayoutEffect, useMemo, createRef } from 'react';\nimport styled, { css } from 'styled-components';\nimport { CommonInteractionStyling } from '../common';\nimport Button from '../Button/Button';\nimport { Size } from '../types';\nimport { ButtonDropdownContentStyling, DropdownButton } from './CommonStyling';\nimport { BREAKPOINTS, COLORS } from '../styles';\nimport { Checkbox, RadioButton } from '../InputFields';\n\nexport const DDContainer = styled.div<{ isButton: boolean; width?: string; alignLeft?: boolean; size?: Size; scrollable?: boolean; maxHeight?: string }>`\n  display: none;\n  position: absolute;\n  background-color: ${COLORS.white};\n  \n  width: ${props => props.width ? props.width : '100%'};\n  z-index: 1;\n  margin: ${props => (props.isButton ? '-4px' : '4px 0px')};\n\n  &.show {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n  }\n\n  &.up {\n    top: auto;\n    bottom: 100%;\n  }\n\n  ${props => (props.alignLeft ? 'left: 0px;' : '')}\n\n  ${props => (props.isButton ? ButtonDropdownContentStyling : '')};\n\n  border: 1px solid ${COLORS.neutral_100};\n  box-sizing: border-box;\n  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15);\n  padding-top: 4px;\n  padding-right: 0px;\n  padding-bottom: 4px;\n  padding-left: 0px;\n\n  min-width: ${props => (props.size == Size.Large ? '320px' : props.size == Size.Medium ? '280px' : '240px')};\n  border-radius: ${props => (props.size == Size.Large ? '10px' : props.size == Size.Medium ? '8px' : '6px')};\n\n  max-height: ${props => (!props.scrollable ? 'auto' : props.maxHeight ? props.maxHeight : props.size == Size.Large ? '320px' : props.size == Size.Medium ? '280px' : '240px')};\n`;\n\nconst ListContainer = styled.div<{ scrollable?: boolean, size? : Size, itemsType?: string }>`\n  ${props => (props.scrollable ? 'overflow-y: scroll;' : '')}\n  ${props => (props.itemsType != 'normal' ? 'margin-left: 4px;' : '')}\n\n  div {\n    padding-top: ${props => props.size == Size.Large ? '8px' : props.size == Size.Medium ? '4px' : '0px' };\n    padding-bottom: ${props => props.size == Size.Large ? '8px' : props.size == Size.Medium ? '4px' : '0px' };\n  }\n\n  /* width */\n  ::-webkit-scrollbar {\n    width: 4px;\n    margin: 0 6px;\n    cursor: pointer;\n  }\n\n  /* Track */\n  ::-webkit-scrollbar-track {\n    background: ${COLORS.neutral_100};\n    border-radius: 8px;\n  }\n\n  /* Handle */\n  ::-webkit-scrollbar-thumb {\n    background: ${COLORS.neutral_600};\n    border-radius: 8px;\n  }\n\n  /* Handle on hover */\n  ::-webkit-scrollbar-thumb:hover {\n    background: ${COLORS.neutral_500};\n  }\n`;\n\nconst ItemsContainer = styled.div`\n`;\n\n\nconst TopItemContainer = styled.div`\n  border-bottom-style: solid;\n  border-bottom-color: ${COLORS.neutral_200};\n  border-bottom-width: 1px;\n  margin-right: 22px;  \n`;\n\nconst ActionButtonContainer = styled.div`\n  border-top-style: solid;\n  border-top-color: ${COLORS.neutral_200};\n  border-top-width: 1px;\n  padding: 0px 16px 4px 16px;\n\n  button {\n    width: 100%;\n  }\n`;\n\nconst MAX_MENU_HEIGHT = 240;\nconst AVG_OPTION_HEIGHT = 48;\n\nexport interface DropdownItem {\n  value: string;\n  displayLabel?: string;\n  noteLabel?: string;\n  suggestion?: boolean;\n  showDividerAbove?: boolean;\n  disabled?: boolean;\n  icon?: React.ReactNode;\n}\n\nexport interface DropdownCustomizationProps {\n  itemsType?: 'radio' | 'checkbox' | 'normal';\n  scrollable?: boolean;\n  multiSelect?: boolean;\n  maxHeight?: string;\n  actionLabel?: string;\n  action: () => void;\n  pinTopItem?: boolean;\n  onValueUpdate: (values: string[]) => void;\n  items: DropdownItem[];\n}\n\nexport interface DropdownProps {\n  isButton: boolean;\n  customizationProps: DropdownCustomizationProps;\n  alignLeft?: boolean;\n  isOpen: boolean;\n  setIsOpen: (open: boolean) => void;\n  size?: Size;\n  id: string;\n  filter: string;\n  width?: string;\n  hideOnClickOutside: boolean;\n  selectedValues: string[];\n  setSelectedValues: (val: string[]) => void;\n  messageOnNoResults: string;\n  focused: number | null;\n  setFocused: (focused: number | null) => void;\n}\n\nconst DropdownContent: React.FunctionComponent<DropdownProps> = ({\n  id,\n  customizationProps,\n  alignLeft,\n  isButton,\n  size,\n  isOpen,\n  hideOnClickOutside,\n  width,\n  setIsOpen,\n  filter,\n  focused, \n  setFocused,\n  selectedValues,\n  setSelectedValues,\n  messageOnNoResults\n}) => {\n  const [isUp, setIsUp] = React.useState<boolean>(false);\n  const dropdownContentRef = React.useRef<HTMLDivElement>(null);\n\n  if(!customizationProps.itemsType) customizationProps.itemsType = 'normal';\n  if(!size) size = Size.Small;\n\n  const itemsListRef = React.useRef<HTMLDivElement>(null);\n\n  const determineDropUp = () => {\n    const options = customizationProps.items;\n    const node = dropdownContentRef.current;\n\n    if (!node) return;\n\n    const windowHeight = window.innerHeight;\n    const menuHeight = Math.min(MAX_MENU_HEIGHT, options.length * AVG_OPTION_HEIGHT);\n    const instOffsetWithMenu = node.getBoundingClientRect().top + menuHeight;\n    setIsUp(instOffsetWithMenu >= windowHeight);\n  };\n\n  const setNewFocusedElement = (index: number) => {\n    const newFocusedElement = elRefs[index];\n    if (newFocusedElement) {\n      setFocused(index);\n      newFocusedElement?.current?.focus();\n    }\n  };\n  \n  const handleKeyDown = (e: any) => {\n    if (isOpen) {\n      if (e.keyCode === 38) {\n        e.preventDefault();\n        var focusedNow = focused;\n        if (focusedNow !== undefined && focusedNow !== null && focusedNow > 0) {\n          focusedNow -= 1;\n          setNewFocusedElement(focusedNow);\n        }\n      } else if (e.keyCode === 40) {\n        e.preventDefault();\n        var focusedNow = focused;\n        if (focusedNow !== undefined && focusedNow !== null) {\n          focusedNow++;\n        } else {\n          focusedNow = 0;\n        }\n        setNewFocusedElement(focusedNow);\n      } else if (e.keyCode === 9) {\n        e.preventDefault();\n        var focusedNow = focused;\n        if (focusedNow !== undefined && focusedNow !== null) {\n          focusedNow++;\n          const newFocusedElement = document.getElementById(`${id}_${focusedNow}`);\n          if (!newFocusedElement) {\n            setNewFocusedElement(0);\n          } else {\n            setNewFocusedElement(focusedNow);\n          }\n        } else {\n          setFocused(null);\n        }\n      } else if (e.keyCode === 27) {\n        setIsOpen(false);\n        setFocused(null);\n\n        //TODO: add onEscapehandler\n        /*\n        if (!list.includes(input)) {\n          setInput('');\n          setPlaceholderSearch(placeholder || '');\n        }\n        styledFieldRef.current?.focus(); */\n      }\n    }\n  };\n\n  const handleClickOutside = (e: any) => {\n    if (hideOnClickOutside && dropdownContentRef?.current && !dropdownContentRef.current.contains(e.target) && !elRefs.some(x => x?.current?.contains(e.target))) {\n      if (isOpen) {\n        setIsOpen(false);\n        setFocused(null);\n      }\n    }\n  };\n\n  React.useEffect(() => {\n    document.addEventListener('keydown', handleKeyDown);\n    document.addEventListener('click', handleClickOutside);\n    return () => {\n      document.removeEventListener('keydown', handleKeyDown);\n      document.removeEventListener('click', handleClickOutside);\n    };\n  });\n\n  const scrollPosition = React.useRef<number | undefined>(0); \n  const handleScroll = () => {\n    scrollPosition.current = itemsListRef.current?.scrollTop;\n  }\n  useLayoutEffect(() => {\n    if (itemsListRef.current) itemsListRef.current.scrollTop = scrollPosition.current ?? 0;\n  }, [selectedValues]);\n\n  const getFilteredItems = () => {\n    const filtrationString = (filter ?? '').toUpperCase();\n    return customizationProps.items.\n      filter(x => x?.value?.toUpperCase().includes(filtrationString) || x?.displayLabel?.toUpperCase().includes(filtrationString));\n  };\n\n  const getCorrectRef = (ref: React.RefObject<HTMLElement>): React.RefObject<HTMLElement> => {\n    switch(customizationProps.itemsType)\n    {\n      case 'normal':\n        return ref as React.RefObject<HTMLButtonElement> || createRef<HTMLButtonElement>();\n      default:\n        return ref as React.RefObject<HTMLDivElement> || createRef<HTMLDivElement>();\n    }\n  }\n\n  const arrLength = getFilteredItems().length;\n  const [elRefs, setElRefs] = React.useState<React.RefObject<HTMLElement>[]>([]);\n\n  React.useEffect(() => {\n    setElRefs(elRefs => \n      Array(arrLength + 1).fill(null)\n        .map((_, i) => getCorrectRef(elRefs[i])));\n  }, [isOpen, arrLength, selectedValues]);\n    \n  React.useEffect(() => {\n    determineDropUp();\n  }, [isOpen]);\n\n\n  const haveTopItem = () => {\n    if (customizationProps.itemsType == 'radio' && selectedValues && selectedValues?.length > 0) return true;\n    else if (customizationProps.itemsType == 'checkbox' && (customizationProps.multiSelect || selectedValues?.length > 0)) return true;\n    else if (customizationProps.itemsType == 'normal' && getSuggestions()?.length > 0) return true;\n    return false;\n  };\n  \n  const getSuggestions = () => {\n    return getFilteredItems().filter(x => x.suggestion);\n  }\n\n  React.useLayoutEffect(() => {\n    if (isOpen && (focused || focused == 0)) {\n      const focusThis = focused == 0 && !haveTopItem() ? 1 : focused;\n      if(focusThis != focused)\n        setFocused(focusThis);\n      const newFocusedElement = elRefs[focusThis];\n      newFocusedElement?.current?.focus();\n    }\n    else\n      setFocused(null); //if the dropdown is closed, we don't to keep saved the focused item\n  }, [isOpen]);\n\n  \n\n  const getTopItem = () => {\n    if (!customizationProps.pinTopItem) return;\n    const visibleItems = getFilteredItems();\n    const allSelected = selectedValues?.filter(x => visibleItems.some(y => y.value == x)).length == visibleItems.length;\n    let showTopItem = false;\n    const suggestions = getSuggestions();\n\n    if (customizationProps.itemsType == 'radio' && selectedValues && selectedValues?.length > 0) showTopItem = true;\n    else if (customizationProps.itemsType == 'checkbox' && (customizationProps.multiSelect || selectedValues?.length > 0)) showTopItem = true;\n    else if (customizationProps.itemsType == 'normal' && suggestions.length > 0) showTopItem = true;\n\n    if (!showTopItem) return;\n   \n    return (\n      <TopItemContainer>\n        {customizationProps.itemsType == 'radio' && (\n          <RadioButton\n            ref={elRefs[0] as React.RefObject<HTMLDivElement>}\n            iconPointerEventsTransparent={true}\n            select={() => {}} size={size} id={`${id}_topitem`} label={selectedValues[0]} selected={true} />\n        )}\n        {customizationProps.itemsType == 'checkbox' && (\n          <Checkbox\n            ref={elRefs[0] as React.RefObject<HTMLDivElement>}\n            select={(selected: boolean) => {\n              if (!customizationProps.multiSelect) return;\n\n              const newValues = selected ? visibleItems.map(x => x.value) : [];\n              setSelectedValues(newValues);\n              customizationProps.onValueUpdate && customizationProps.onValueUpdate(newValues);\n            }}\n            iconPointerEventsTransparent={true}\n            semiSelected={customizationProps.multiSelect && !allSelected && selectedValues?.length > 0}\n            size={size}\n            id={`${id}_checkbox_selectall`}\n            label={customizationProps.multiSelect ? 'Select all' : selectedValues[0]}\n            selected={!customizationProps.multiSelect || allSelected}\n          />\n        )}\n        {customizationProps.itemsType == 'normal' && (\n          <>\n          {suggestions.map(x => \n            <DropdownButton ref={elRefs[0] as React.RefObject<HTMLButtonElement>} type=\"button\" id={`${id}_topitem`}\n              onClick={(e: any) => {\n                customizationProps.onValueUpdate([x.value]);\n                setSelectedValues([x.value]);\n                setIsOpen(false);\n                setFocused(null);\n              }}>\n              <div className=\"item-content\">\n                {x?.icon && <div className=\"item-icon\">{x?.icon}</div>}\n                <div className=\"item-label\">\n                  {x?.displayLabel ?? x?.value}\n                  {x?.noteLabel && <div style={{fontSize: '12px'}}>{x.noteLabel}</div>}\n                </div>\n              </div>\n            </DropdownButton>)}\n          </>\n        )}\n      </TopItemContainer>\n    );\n  };\n\n  const getElements = () => {\n    if (getFilteredItems().length === 0) {\n      return (\n        <ItemsContainer>\n          <DropdownButton disabled>\n            <span>{messageOnNoResults}</span>\n          </DropdownButton>\n        </ItemsContainer>\n      );\n    }\n    let number = 0;\n    return (\n      <ItemsContainer>\n        {getFilteredItems().filter(x => x && (customizationProps.itemsType != 'normal' || !x.suggestion)).map(item => {\n          return (\n            <>\n              {customizationProps.itemsType == 'radio' && (\n                <RadioButton\n                  select={(selected: boolean) => {\n                    if (!selected) return;\n                    customizationProps.onValueUpdate && customizationProps.onValueUpdate([item.value]);\n                    setSelectedValues([item.value]);\n                  }}\n                  ref={elRefs[number + 1] as React.RefObject<HTMLDivElement>}\n                  size={size}\n                  iconPointerEventsTransparent={true}\n                  disabled={item?.disabled}\n                  key={`key_${id}_${number++}`}\n                  id={`${id}_${number + 1}`}\n                  label={item.value}\n                  selected={selectedValues?.includes(item.value)}\n                />\n              )}\n              {customizationProps.itemsType == 'checkbox' && (\n                <Checkbox\n                  select={(selected: boolean) => {\n                    let newValue: string[] = [];\n                    if (customizationProps.multiSelect) {\n                      if (selected) newValue = [...selectedValues, item.value];\n                      else newValue = selectedValues.filter(x => x != item.value);\n                    } else newValue = selected ? [item.value] : [];\n\n                    setSelectedValues(newValue);\n                    customizationProps.onValueUpdate(newValue);\n                  }}\n                  iconPointerEventsTransparent={true}\n                  disabled={item?.disabled} \n                  ref={elRefs[number + 1] as React.RefObject<HTMLDivElement>}\n                  size={size}\n                  key={`key_${id}_${number++}`}\n                  id={`${id}_${number + 1}`}\n                  label={item.value}\n                  selected={selectedValues?.includes(item.value)}\n                />\n              )}\n              {(customizationProps.itemsType == 'normal' || !customizationProps.itemsType) && (\n                  <DropdownButton\n                    type=\"button\"\n                    size={size}\n                    disabled={item?.disabled}\n                    ref={elRefs[number + 1] as React.RefObject<HTMLButtonElement>}\n                    onClick={(e: any) => {\n                      customizationProps.onValueUpdate([item.value]);\n                      setSelectedValues([item.value]);\n                      setIsOpen(false);\n                      setFocused(null);\n                    }}\n                    className={ (item.showDividerAbove ? 'show-divider-above' : '') + ' ' + (selectedValues?.includes(item.value) ? 'active' : '')}\n                    key={`key_${id}_${number++}`}\n                    id={`${id}_${number + 1}`}>\n                      {item.showDividerAbove && <div className=\"divider\"/>}\n                      <div className=\"item-content\">\n                        {item.icon && <div className=\"item-icon\">{item.icon}</div>}\n                        <div className=\"item-label\">\n                          {item.displayLabel ?? item.value}\n                          {item.noteLabel && <div style={{fontSize: '12px'}}>{item.noteLabel}</div>}\n                        </div>\n                      </div>\n                  </DropdownButton>\n              )}\n            </>\n          );\n        })}\n      </ItemsContainer>\n    );\n  };\n\n  return <DDContainer\n          ref={dropdownContentRef}\n          size={size}\n          width={width}\n          isButton={isButton}\n          alignLeft={alignLeft}\n          scrollable={customizationProps.scrollable}\n          maxHeight={customizationProps.maxHeight}\n          className={[isOpen && 'show', isUp && 'up'].filter(e => !!e).join(' ')}>\n          <ListContainer size={size} itemsType={customizationProps.itemsType} onScroll={handleScroll} ref={itemsListRef} scrollable={customizationProps.scrollable}>\n            {customizationProps.pinTopItem && getTopItem()}\n            {getElements()}\n          </ListContainer>\n          {customizationProps.action && customizationProps.actionLabel && (\n            <ActionButtonContainer>\n              <Button width=\"100%\" variant=\"primary\" size={size} onClick={() => customizationProps.action()}>\n                {customizationProps.actionLabel}\n              </Button>\n            </ActionButtonContainer>\n          )}\n        </DDContainer>;\n  /*  ),\n    {\n      handleClickOutside: () => () => {\n        if (isOpen) {\n          setIsOpen(false);\n          setFocused(null);\n        }\n      },\n    },\n  );\n\n  return <Wrapped />; */\n};\n\nexport default DropdownContent;\n"],"file":"DropdownContent.js"}
+{"version":3,"sources":["../../../src/Dropdown/DropdownContent.tsx"],"names":["DDContainer","styled","div","COLORS","white","props","width","isButton","alignLeft","ButtonDropdownContentStyling","neutral_100","size","Size","Large","Medium","scrollable","maxHeight","ItemsContainer","ListContainer","itemsType","neutral_600","neutral_500","MenuContentContainer","ComponentTextStyle","Bold","Small","Regular","DividerContainer","TopItemContainer","neutral_200","ActionButtonContainer","MAX_MENU_HEIGHT","AVG_OPTION_HEIGHT","DropdownContent","id","customizationProps","isOpen","hideOnClickOutside","setIsOpen","filter","focused","setFocused","selectedValues","setSelectedValues","messageOnNoResults","React","useState","isUp","setIsUp","dropdownContentRef","useRef","itemsListRef","determineDropUp","options","items","node","current","windowHeight","window","innerHeight","menuHeight","Math","min","length","instOffsetWithMenu","getBoundingClientRect","top","setNewFocusedElement","index","newFocusedElement","elRefs","focus","getFilteredItems","filtrationString","toUpperCase","x","value","includes","displayLabel","handleKeyDown","e","keyCode","preventDefault","focusedNow","undefined","filtered","i","disabled","haveTopItem","document","getElementById","handleClickOutside","contains","target","some","useEffect","addEventListener","removeEventListener","scrollPosition","handleScroll","scrollTop","getCorrectRef","ref","arrLength","setElRefs","Array","fill","map","_","multiSelect","getSuggestions","suggestion","useLayoutEffect","focusThis","getTopItem","pinTopItem","visibleItems","allSelected","y","showTopItem","suggestions","find","c","selectedFirst","selected","newValues","onValueUpdate","icon","noteLabel","fontSize","getElements","number","item","customContent","newValue","showDividerAbove","join","menuContent","action","actionLabel","actionVariant"],"mappings":"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","sourcesContent":["import React, { useLayoutEffect, useMemo, createRef } from 'react';\nimport styled, { css } from 'styled-components';\nimport { CommonInteractionStyling } from '../common';\nimport Button from '../Button/Button';\nimport { Size } from '../types';\nimport { ButtonDropdownContentStyling, DropdownButtonCSS } from './CommonStyling';\nimport { ComponentLStyling, ComponentXLStyling, ComponentMStyling, ComponentSStyling, ComponentTextStyle } from '../styles/typography';\nimport { COLORS } from '../styles';\nimport { Checkbox, RadioButton } from '../InputFields';\n\nexport const DDContainer = styled.div<{ isButton: boolean; width?: string; alignLeft?: boolean; size?: Size; scrollable?: boolean; maxHeight?: string }>`\n  display: none;\n  position: absolute;\n  background-color: ${COLORS.white};\n\n  width: ${(props) => (props.width ? props.width : '100%')};\n  z-index: 1;\n  margin: ${(props) => (props.isButton ? '-4px' : '4px 0px')};\n\n  &.show {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n  }\n\n  &.up {\n    top: auto;\n    bottom: 100%;\n  }\n\n  ${(props) => (props.alignLeft ? 'left: 0px;' : '')}\n\n  ${(props) => (props.isButton ? ButtonDropdownContentStyling : '')};\n\n  border: 1px solid ${COLORS.neutral_100};\n  box-sizing: border-box;\n  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15);\n  padding-top: 4px;\n  padding-right: 0px;\n  padding-bottom: 4px;\n  padding-left: 0px;\n\n  min-width: ${(props) => (props.size == Size.Large ? '320px' : props.size == Size.Medium ? '280px' : '240px')};\n  border-radius: ${(props) => (props.size == Size.Large ? '10px' : props.size == Size.Medium ? '8px' : '6px')};\n\n  max-height: ${(props) => (!props.scrollable ? 'auto' : props.maxHeight ? props.maxHeight : props.size == Size.Large ? '320px' : props.size == Size.Medium ? '280px' : '240px')};\n`;\n\nconst ItemsContainer = styled.div<{size? : Size}>`\n  button.dropdownButton {\n    ${props => DropdownButtonCSS(props.size)}\n  }`;\n  \nconst ListContainer = styled.div<{ scrollable?: boolean; size?: Size; itemsType?: string }>`\n  ${(props) => (props.scrollable ? 'overflow-y: scroll;' : '')}\n  ${(props) => (props.itemsType != 'normal' ? 'margin-left: 4px;' : '')}\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  ${ItemsContainer} {\n    padding-top: ${props => props.size == Size.Large ? '8px' : props.size == Size.Medium ? '4px' : '0px' };\n    padding-bottom: ${props => props.size == Size.Large ? '8px' : props.size == Size.Medium ? '4px' : '0px' };\n  }\n\n  /* width */\n  ::-webkit-scrollbar {\n    width: 4px;\n    margin: 0 6px;\n    cursor: pointer;\n  }\n\n  /* Track */\n  ::-webkit-scrollbar-track {\n    background: ${COLORS.neutral_100};\n    border-radius: 8px;\n  }\n\n  /* Handle */\n  ::-webkit-scrollbar-thumb {\n    background: ${COLORS.neutral_600};\n    border-radius: 8px;\n  }\n\n  /* Handle on hover */\n  ::-webkit-scrollbar-thumb:hover {\n    background: ${COLORS.neutral_500};\n  }\n`;\n\n\nconst MenuContentContainer = styled.div<{size? : Size}>`\n  h1, h2, h3 {\n    margin-block-start: 0px;\n    margin-block-end: 0px;\n    ${props => props.size == Size.Large && ComponentXLStyling(ComponentTextStyle.Bold, COLORS.neutral_500)}\n    ${props => props.size == Size.Medium && ComponentLStyling(ComponentTextStyle.Bold, COLORS.neutral_500)}\n    ${props => (props.size == Size.Small || !props.size) && ComponentMStyling(ComponentTextStyle.Bold, COLORS.neutral_500)}\n    padding: ${props => props.size == Size.Small || !props.size ? '10px 16px 6px' :\n      props.size == Size.Medium ? '16px 24px 8px' : '16px 32px 8px'};\n  }\n\n  p {\n    margin-block-start: 0px;\n    margin-block-end: 0px;\n    ${props => props.size == Size.Large && ComponentLStyling(ComponentTextStyle.Regular, COLORS.neutral_500)}\n    ${props => props.size == Size.Medium && ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_500)}\n    ${props => (props.size == Size.Small || !props.size) && ComponentSStyling(ComponentTextStyle.Regular, COLORS.neutral_500)}\n    padding: ${props => props.size == Size.Small || !props.size ? '8px 16px' :\n      props.size == Size.Medium ? '12px 24px' : '16px 32px'};\n  }\n`;\n\nconst DividerContainer = styled.div<{size? : Size}>`\n  position: relative;\n\n  margin-top: ${props => props.size == Size.Large ? '16px' : \n      props.size == Size.Medium ? '12px' : \n      (props.size == Size.Small || !props.size) ? '8px' : '6px'};\n\n  div.divider {\n    width: 100%;\n    margin: 0px;\n  }\n`;\n\nconst TopItemContainer = styled.div<{size?:Size}>`\n  border-bottom-style: solid;\n  border-bottom-color: ${COLORS.neutral_200};\n  border-bottom-width: 1px;\n  margin-right: 22px;\n\n  button {\n    ${props => DropdownButtonCSS(props.size)}\n  }\n`;\n\nconst ActionButtonContainer = styled.div<{size?:Size}>`\n  border-top-style: solid;\n  border-top-color: ${COLORS.neutral_200};\n  border-top-width: 1px;\n  \n  padding: ${props => props.size == Size.Small || !props.size ? '0px 16px' : '8px 16px'};\n\n  button {\n    width: 100%;\n  }\n`;\n\nconst MAX_MENU_HEIGHT = 240;\nconst AVG_OPTION_HEIGHT = 48;\n\nexport interface DropdownItem {\n  value: string;\n  displayLabel?: string;\n  noteLabel?: string;\n  suggestion?: boolean;\n  showDividerAbove?: boolean;\n  disabled?: boolean;\n  icon?: React.ReactNode;\n  customContent?: React.ReactNode;\n}\n\nexport interface DropdownCustomizationProps {\n  itemsType?: 'radio' | 'checkbox' | 'normal';\n  menuContent?: React.ReactNode;\n  scrollable?: boolean;\n  multiSelect?: boolean;\n  maxHeight?: string;\n  actionLabel?: string;\n  actionVariant?: 'primary' | 'secondary' | 'tertiary' | undefined;\n  action: () => boolean | void | undefined;\n  pinTopItem?: boolean;\n  onValueUpdate: (values: string[]) => void;\n  items: DropdownItem[];\n}\n\nexport interface DropdownProps {\n  isButton: boolean;\n  customizationProps: DropdownCustomizationProps;\n  alignLeft?: boolean;\n  isOpen: boolean;\n  setIsOpen: (open: boolean) => void;\n  size?: Size;\n  id: string;\n  filter: string;\n  width?: string;\n  hideOnClickOutside: boolean;\n  selectedValues: string[];\n  setSelectedValues: (val: string[]) => void;\n  messageOnNoResults: string;\n  focused: number | null;\n  setFocused: (focused: number | null) => void;\n}\n\nconst DropdownContent: React.FunctionComponent<DropdownProps> = ({\n  id,\n  customizationProps,\n  alignLeft,\n  isButton,\n  size,\n  isOpen,\n  hideOnClickOutside,\n  width,\n  setIsOpen,\n  filter,\n  focused,\n  setFocused,\n  selectedValues,\n  setSelectedValues,\n  messageOnNoResults,\n}) => {\n  const [isUp, setIsUp] = React.useState<boolean>(false);\n  const dropdownContentRef = React.useRef<HTMLDivElement>(null);\n\n  if (!customizationProps.itemsType) customizationProps.itemsType = 'normal';\n  if (!size) size = Size.Small;\n\n  const itemsListRef = React.useRef<HTMLDivElement>(null);\n\n  const determineDropUp = () => {\n    const options = customizationProps.items;\n    const node = dropdownContentRef.current;\n\n    if (!node) return;\n\n    const windowHeight = window.innerHeight;\n    const menuHeight = Math.min(MAX_MENU_HEIGHT, options.length * AVG_OPTION_HEIGHT);\n    const instOffsetWithMenu = node.getBoundingClientRect().top + menuHeight;\n    setIsUp(instOffsetWithMenu >= windowHeight);\n  };\n\n  const setNewFocusedElement = (index: number) => {\n    const newFocusedElement = elRefs[index];\n    if (newFocusedElement) {\n      setFocused(index);\n      newFocusedElement?.current?.focus();\n    }\n  };\n\n  const getFilteredItems = () => {\n    const filtrationString = (filter ?? '').toUpperCase();\n    return customizationProps.items.filter((x) => x?.value?.toUpperCase().includes(filtrationString) || x?.displayLabel?.toUpperCase().includes(filtrationString));\n  };\n\n  const handleKeyDown = (e: any) => {\n    if (isOpen) {\n      if (e.keyCode === 38) {\n        e.preventDefault();\n        var focusedNow = focused;\n        if (focusedNow !== undefined && focusedNow !== null && focusedNow > 0) {\n          const filtered = getFilteredItems();\n          for (let i = focusedNow - 1; i > 0; i--) {\n            if (!filtered[i - 1]?.disabled) {\n              focusedNow = i;\n              break;\n            }\n          }\n          setNewFocusedElement(focusedNow);\n        }\n      } else if (e.keyCode === 40) {\n        e.preventDefault();\n        var focusedNow = focused;\n        if (focusedNow !== undefined && focusedNow !== null) {\n          const filtered = getFilteredItems();\n          for (let i = focusedNow + 1; i <= filtered.length; i++) {\n            if (!filtered[i - 1]?.disabled) {\n              focusedNow = i;\n              break;\n            }\n          }\n        } else {\n          focusedNow = haveTopItem() ? 0 : 1;\n        }\n        setNewFocusedElement(focusedNow);\n      } else if (e.keyCode === 9) {\n        e.preventDefault();\n        var focusedNow = focused;\n        if (focusedNow !== undefined && focusedNow !== null) {\n          focusedNow++;\n          const newFocusedElement = document.getElementById(`${id}_${focusedNow}`);\n          if (!newFocusedElement) {\n            setNewFocusedElement(0);\n          } else {\n            setNewFocusedElement(focusedNow);\n          }\n        } else {\n          setFocused(null);\n        }\n      } else if (e.keyCode === 27) {\n        setIsOpen(false);\n        setFocused(null);\n\n        //TODO: add onEscapehandler\n        /*\n        if (!list.includes(input)) {\n          setInput('');\n          setPlaceholderSearch(placeholder || '');\n        }\n        styledFieldRef.current?.focus(); */\n      }\n    }\n  };\n\n  const handleClickOutside = (e: any) => {\n    if (hideOnClickOutside && dropdownContentRef?.current && !dropdownContentRef.current.contains(e.target) && !elRefs.some((x) => x?.current?.contains(e.target))) {\n      if (isOpen) {\n        setIsOpen(false);\n        setFocused(null);\n      }\n    }\n  };\n\n  React.useEffect(() => {\n    document.addEventListener('keydown', handleKeyDown);\n    document.addEventListener('click', handleClickOutside);\n    return () => {\n      document.removeEventListener('keydown', handleKeyDown);\n      document.removeEventListener('click', handleClickOutside);\n    };\n  });\n\n  const scrollPosition = React.useRef<number | undefined>(0);\n  const handleScroll = () => {\n    scrollPosition.current = itemsListRef.current?.scrollTop;\n  };\n  useLayoutEffect(() => {\n    if (itemsListRef.current) itemsListRef.current.scrollTop = scrollPosition.current ?? 0;\n  }, [selectedValues]);\n\n  const getCorrectRef = (ref: React.RefObject<HTMLElement>): React.RefObject<HTMLElement> => {\n    switch (customizationProps.itemsType) {\n      case 'normal':\n        return (ref as React.RefObject<HTMLButtonElement>) || createRef<HTMLButtonElement>();\n      default:\n        return (ref as React.RefObject<HTMLDivElement>) || createRef<HTMLDivElement>();\n    }\n  };\n\n  const arrLength = getFilteredItems().length;\n  const [elRefs, setElRefs] = React.useState<React.RefObject<HTMLElement>[]>([]);\n\n  React.useEffect(() => {\n    setElRefs((elRefs) =>\n      Array(arrLength + 1)\n        .fill(null)\n        .map((_, i) => getCorrectRef(elRefs[i])),\n    );\n  }, [isOpen, arrLength, selectedValues]);\n\n  React.useEffect(() => {\n    determineDropUp();\n  }, [isOpen]);\n\n  const haveTopItem = () => {\n    if (customizationProps.itemsType == 'radio' && selectedValues && selectedValues?.length > 0) return true;\n    else if (customizationProps.itemsType == 'checkbox' && (customizationProps.multiSelect || selectedValues?.length > 0)) return true;\n    else if (customizationProps.itemsType == 'normal' && getSuggestions()?.length > 0) return true;\n    return false;\n  };\n\n  const getSuggestions = () => {\n    return getFilteredItems().filter((x) => x.suggestion);\n  };\n\n  React.useLayoutEffect(() => {\n    if (isOpen && (focused || focused == 0)) {\n      const focusThis = focused == 0 && !haveTopItem() ? 1 : focused;\n      if (focusThis != focused) setFocused(focusThis);\n      const newFocusedElement = elRefs[focusThis];\n      newFocusedElement?.current?.focus();\n    } else setFocused(null); //if the dropdown is closed, we don't to keep saved the focused item\n  }, [isOpen]);\n\n  const getTopItem = () => {\n    if (!customizationProps.pinTopItem) return;\n    const visibleItems = getFilteredItems();\n    const allSelected = selectedValues?.filter((x) => visibleItems.some((y) => y.value == x)).length == visibleItems.length;\n    let showTopItem = false;\n    const suggestions = getSuggestions();\n    const displayLabel = selectedValues[0] ? customizationProps.items?.find((c) => c.value === selectedValues[0])?.displayLabel : undefined;\n    if (customizationProps.itemsType == 'radio' && selectedValues && selectedValues?.length > 0) showTopItem = true;\n    else if (customizationProps.itemsType == 'checkbox' && (customizationProps.multiSelect || selectedValues?.length > 0)) showTopItem = true;\n    else if (customizationProps.itemsType == 'normal' && suggestions.length > 0) showTopItem = true;\n\n    if (!showTopItem) return;\n\n    const selectedFirst = selectedValues.length > 0 ? visibleItems.find(x => x.value == selectedValues[0]) : null;\n   \n    return (\n      <TopItemContainer size={size}>\n        {customizationProps.itemsType == 'radio' && (\n          <RadioButton\n            ref={elRefs[0] as React.RefObject<HTMLDivElement>}\n            iconPointerEventsTransparent={true}\n            select={() => {}} label={selectedFirst?.displayLabel ?? selectedFirst?.value} \n            size={size}\n            id={`${id}_topitem`}\n            selected={true}\n          />\n        )}\n        {customizationProps.itemsType == 'checkbox' && (\n          <Checkbox\n            ref={elRefs[0] as React.RefObject<HTMLDivElement>}\n            select={(selected: boolean) => {\n              if (!customizationProps.multiSelect) return;\n\n              const newValues = selected ? visibleItems.map((x) => x.value) : [];\n              setSelectedValues(newValues);\n              customizationProps.onValueUpdate && customizationProps.onValueUpdate(newValues);\n            }}\n            iconPointerEventsTransparent={true}\n            semiSelected={customizationProps.multiSelect && !allSelected && selectedValues?.length > 0}\n            size={size}\n            id={`${id}_checkbox_selectall`}\n            label={customizationProps.multiSelect ? 'Select all' : (selectedFirst?.displayLabel ?? selectedFirst?.value)}\n            selected={!customizationProps.multiSelect || allSelected}\n          />\n        )}\n        {customizationProps.itemsType == 'normal' && (\n          <>\n            {suggestions.map((x) => (\n            <button\n                ref={elRefs[0] as React.RefObject<HTMLButtonElement>}\n                type=\"button\"\n                id={`${id}_topitem`}\n                key={`${id}_topitem_${x.value}`}\n                onClick={(e: any) => {\n                  customizationProps.onValueUpdate([x.value]);\n                  setSelectedValues([x.value]);\n                  setIsOpen(false);\n                  setFocused(null);\n                }}>\n                <div className=\"item-content\">\n                  {x?.icon && <div className=\"item-icon\">{x?.icon}</div>}\n                  <div className=\"item-label\">\n                    {x?.displayLabel ?? x?.value}\n                    {x?.noteLabel && <div style={{ fontSize: '12px' }}>{x.noteLabel}</div>}\n                  </div>\n                </div>\n            </button>))}\n          </>\n        )}\n      </TopItemContainer>\n    );\n  };\n\n  const getElements = () => {\n    if (getFilteredItems().length === 0) {\n      return (\n        <ItemsContainer size={size}>\n          <button className=\"dropdownButton\" disabled>\n            <span>{messageOnNoResults}</span>\n          </button>\n        </ItemsContainer>\n      );\n    }\n    let number = 0;\n    return (\n      <ItemsContainer size={size}>\n        {getFilteredItems()\n          .filter((x) => x && (customizationProps.itemsType != 'normal' || !x.suggestion))\n          .map((item) => {\n            return (\n              <React.Fragment key={`key_${id}_${item.value}`}>\n              {item.customContent}\n              {!item.customContent && customizationProps.itemsType == 'radio' && (\n                  <RadioButton\n                    select={(selected: boolean) => {\n                      if (!selected) return;\n                      customizationProps.onValueUpdate && customizationProps.onValueUpdate([item.value]);\n                      setSelectedValues([item.value]);\n                    }}\n                    ref={elRefs[number + 1] as React.RefObject<HTMLDivElement>}\n                    size={size}\n                    iconPointerEventsTransparent={true}\n                    disabled={item?.disabled}\n                    key={`key_${id}_${number++}`}\n                    id={`${id}_${number + 1}`}\n                    label={item.displayLabel ?? item.value}\n                    selected={selectedValues?.includes(item.value)}\n                  />\n                )}\n              {!item.customContent && customizationProps.itemsType == 'checkbox' && (\n                  <Checkbox\n                    select={(selected: boolean) => {\n                      let newValue: string[] = [];\n                      if (customizationProps.multiSelect) {\n                        if (selected) newValue = [...selectedValues, item.value];\n                        else newValue = selectedValues.filter((x) => x != item.value);\n                      } else newValue = selected ? [item.value] : [];\n\n                      setSelectedValues(newValue);\n                      customizationProps.onValueUpdate(newValue);\n                    }}\n                    iconPointerEventsTransparent={true}\n                    disabled={item?.disabled}\n                    ref={elRefs[number + 1] as React.RefObject<HTMLDivElement>}\n                    size={size}\n                    key={`key_${id}_${number++}`}\n                    id={`${id}_${number + 1}`}\n                    label={item.displayLabel ?? item.value}\n                    selected={selectedValues?.includes(item.value)}\n                  />\n                )}\n              {!item.customContent && (customizationProps.itemsType == 'normal' || !customizationProps.itemsType) && (\n                  <button\n                    type=\"button\"\n                    disabled={item?.disabled}\n                    ref={elRefs[number + 1] as React.RefObject<HTMLButtonElement>}\n                    onClick={(e: any) => {\n                      customizationProps.onValueUpdate([item.value]);\n                      setSelectedValues([item.value]);\n                      setIsOpen(false);\n                      setFocused(null);\n                    }}\n                    className={ 'dropdownButton ' + (item.showDividerAbove ? 'show-divider-above' : '') + ' ' + (selectedValues?.includes(item.value) ? 'active' : '')}\n                    key={`key_${id}_${number++}`}\n                    id={`${id}_${number + 1}`}>\n                    {item.showDividerAbove && <div className=\"divider\" />}\n                    <div className=\"item-content\">\n                      {item.icon && <div className=\"item-icon\">{item.icon}</div>}\n                      <div className=\"item-label\">\n                        {item.displayLabel ?? item.value}\n                        {item.noteLabel && <div style={{ fontSize: '12px' }}>{item.noteLabel}</div>}\n                      </div>\n                    </div>\n                  </button>\n                )}\n              </React.Fragment>\n            );\n          })}\n      </ItemsContainer>\n    );\n  };\n\n  return (\n    <DDContainer\n      ref={dropdownContentRef}\n      size={size}\n      width={width}\n      isButton={isButton}\n      alignLeft={alignLeft}\n      scrollable={customizationProps.scrollable}\n      maxHeight={customizationProps.maxHeight}\n      className={[isOpen && 'show', isUp && 'up'].filter((e) => !!e).join(' ')}>\n      <ListContainer size={size} itemsType={customizationProps.itemsType} onScroll={handleScroll} ref={itemsListRef} scrollable={customizationProps.scrollable}>\n            {customizationProps.menuContent &&\n              <MenuContentContainer size={size}>\n                {customizationProps.menuContent}\n                <DividerContainer size={size}>\n                  <div className=\"divider\" />\n                </DividerContainer>\n              </MenuContentContainer>}\n        {customizationProps.pinTopItem && getTopItem()}\n        {getElements()}\n      </ListContainer>\n      {customizationProps.action && customizationProps.actionLabel && (\n        <ActionButtonContainer size={size}>\n              <Button width=\"100%\" variant={customizationProps.actionVariant ?? 'primary'} size={size} onClick={() => \n                {\n                  if(customizationProps.action()) //closing the dropdown if action returns 'true'\n                    setIsOpen(false);\n                }}>\n            {customizationProps.actionLabel}\n          </Button>\n        </ActionButtonContainer>\n      )}\n    </DDContainer>\n  );\n  /*  ),\n    {\n      handleClickOutside: () => () => {\n        if (isOpen) {\n          setIsOpen(false);\n          setFocused(null);\n        }\n      },\n    },\n  );\n\n  return <Wrapped />; */\n};\n\nexport default DropdownContent;\n"],"file":"DropdownContent.js"}

package/dist/js/GlobalNavigationBar/RightSideNav.js

@@ -33,7 +33,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 
-var NavContainer = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  margin: auto 0 auto auto;\n  align-items: center;\n  height: 48px;\n\n  ", " {\n    height: 56px;\n  }\n  ", " {\n    height: 64px;\n  }\n\n  button,\n  div {\n    &:hover {\n      cursor: pointer;\n    }\n  }\n"])), _styles.BREAKPOINTS.SMALL, _styles.BREAKPOINTS.MEDIUM);
+var NavContainer = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  margin: auto 0 auto auto;\n  align-items: center;\n  height: 48px;\n  \n  a {\n    text-decoration: none;\n  }\n\n  ", " {\n    height: 56px;\n  }\n  ", " {\n    height: 64px;\n  }\n\n  button,\n  div {\n    &:hover {\n      cursor: pointer;\n    }\n  }\n"])), _styles.BREAKPOINTS.SMALL, _styles.BREAKPOINTS.MEDIUM);
 
 var SecondaryButton = (0, _styledComponents.default)(_Button.Button)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  height: 40px;\n  margin: 0 8px;\n\n  ", "\n"])), (0, _typography.ComponentMStyling)(_styles.ComponentTextStyle.Bold, 'unset'));
 

package/dist/js/GlobalNavigationBar/RightSideNav.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/GlobalNavigationBar/RightSideNav.tsx"],"names":["NavContainer","styled","div","BREAKPOINTS","SMALL","MEDIUM","SecondaryButton","Button","ComponentTextStyle","Bold","RightSideNav","navigationOptions","secondaryButton","preventFocusOnClick","e","preventDefault","getNavItem","navOption","disabled","label","NavLink","exact","to","onClick","reverse","map","no","action"],"mappings":";;;;;;;;;;;AAAA;;AACA;;AACA;;AAEA;;AAEA;;AACA;;AACA;;;;;;;;;;;;AAEA,IAAMA,YAAY,GAAGC,0BAAOC,GAAV,+SAMdC,oBAAYC,KANE,EASdD,oBAAYE,MATE,CAAlB;;AAqBA,IAAMC,eAAe,GAAG,+BAAOC,cAAP,CAAH,uHAIjB,mCAAkBC,2BAAmBC,IAArC,EAA2C,OAA3C,CAJiB,CAArB;;AAYA,IAAMC,YAAY,GAAG,SAAfA,YAAe,OAA8E;AAAA,MAA3EC,iBAA2E,QAA3EA,iBAA2E;AAAA,MAAxDC,eAAwD,QAAxDA,eAAwD;;AACjG,MAAMC,mBAAmB,GAAG,SAAtBA,mBAAsB,CAACC,CAAD,EAAY;AACtCA,IAAAA,CAAC,CAACC,cAAF;AACD,GAFD;;AAGA,MAAMC,UAAU,GAAG,SAAbA,UAAa,CAACC,SAAD,EAA0B;AAC3C,QAAIA,SAAJ,aAAIA,SAAJ,eAAIA,SAAS,CAAEC,QAAf,EAAyB;AACvB,0BACE,oBAAC,gBAAD;AAAS,QAAA,EAAE,EAAEX,cAAb;AAAqB,QAAA,SAAS,EAAC,UAA/B;AAA0C,QAAA,GAAG,EAAEU,SAAF,aAAEA,SAAF,uBAAEA,SAAS,CAAEE;AAA1D,SACGF,SADH,aACGA,SADH,uBACGA,SAAS,CAAEE,KADd,CADF;AAKD,KAND,MAMO;AACL,0BACE,oBAAC,gBAAD;AACE,QAAA,EAAE,EAAEC,uBADN;AAEE,QAAA,KAAK,EAAEH,SAAF,aAAEA,SAAF,uBAAEA,SAAS,CAAEI,KAFpB;AAGE,QAAA,EAAE,EAAE,CAAAJ,SAAS,SAAT,IAAAA,SAAS,WAAT,YAAAA,SAAS,CAAEK,EAAX,KAAiB,EAHvB;AAIE,QAAA,GAAG,EAAEL,SAAF,aAAEA,SAAF,uBAAEA,SAAS,CAAEE,KAJlB;AAKE,QAAA,WAAW,EAAEN,mBALf;AAME,QAAA,OAAO,EAAE,mBAAM;AACb,cAAII,SAAJ,aAAIA,SAAJ,eAAIA,SAAS,CAAEM,OAAf,EAAwB;AACtBN,YAAAA,SAAS,SAAT,IAAAA,SAAS,WAAT,YAAAA,SAAS,CAAEM,OAAX;AACD;AACF;AAVH,SAWGN,SAXH,aAWGA,SAXH,uBAWGA,SAAS,CAAEE,KAXd,CADF;AAeD;AACF,GAxBD;;AAyBA,sBACE,oBAAC,YAAD,QACGR,iBADH,aACGA,iBADH,uBACGA,iBAAiB,CAAEa,OAAnB,GAA6BC,GAA7B,CAAiC,UAAAC,EAAE;AAAA,WAAIV,UAAU,CAACU,EAAD,CAAd;AAAA,GAAnC,CADH,EAGGd,eAAe,iBACd,oBAAC,eAAD;AAAiB,IAAA,OAAO,EAAC,WAAzB;AAAqC,IAAA,OAAO,EAAEA,eAAF,aAAEA,eAAF,uBAAEA,eAAe,CAAEe;AAA/D,KACGf,eAAe,CAACO,KADnB,CAJJ,CADF;AAWD,CAxCD;;;AAJER,EAAAA,iB;;eA8CaD,Y","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {NavLink} from 'react-router-dom';\n\nimport {NavItem} from '../NavItem';\nimport {NavButton, NavOption} from '../types';\nimport {BREAKPOINTS, ComponentTextStyle} from '../styles';\nimport {Button} from '../Button';\nimport {ComponentMStyling} from '../styles/typography';\n\nconst NavContainer = styled.div`\n  display: flex;\n  margin: auto 0 auto auto;\n  align-items: center;\n  height: 48px;\n\n  ${BREAKPOINTS.SMALL} {\n    height: 56px;\n  }\n  ${BREAKPOINTS.MEDIUM} {\n    height: 64px;\n  }\n\n  button,\n  div {\n    &:hover {\n      cursor: pointer;\n    }\n  }\n`;\n\nconst SecondaryButton = styled(Button)`\n  height: 40px;\n  margin: 0 8px;\n\n  ${ComponentMStyling(ComponentTextStyle.Bold, 'unset')}\n`;\n\ntype Props = {\n  navigationOptions?: NavOption[];\n  secondaryButton?: NavButton;\n};\n\nconst RightSideNav = ({ navigationOptions, secondaryButton }: Props): React.ReactElement<Props> => {\n  const preventFocusOnClick = (e: any) => {\n    e.preventDefault();\n  };\n  const getNavItem = (navOption: NavOption) => {\n    if (navOption?.disabled) {\n      return (\n        <NavItem as={Button} className=\"disabled\" key={navOption?.label}>\n          {navOption?.label}\n        </NavItem>\n      );\n    } else {\n      return (\n        <NavItem\n          as={NavLink}\n          exact={navOption?.exact}\n          to={navOption?.to || ''}\n          key={navOption?.label}\n          onMouseDown={preventFocusOnClick}\n          onClick={() => {\n            if (navOption?.onClick) {\n              navOption?.onClick();\n            }\n          }}>\n          {navOption?.label}\n        </NavItem>\n      );\n    }\n  };\n  return (\n    <NavContainer>\n      {navigationOptions?.reverse().map(no => getNavItem(no))}\n\n      {secondaryButton && (\n        <SecondaryButton variant=\"secondary\" onClick={secondaryButton?.action}>\n          {secondaryButton.label}\n        </SecondaryButton>\n      )}\n    </NavContainer>\n  );\n};\n\nexport default RightSideNav;\n"],"file":"RightSideNav.js"}
+{"version":3,"sources":["../../../src/GlobalNavigationBar/RightSideNav.tsx"],"names":["NavContainer","styled","div","BREAKPOINTS","SMALL","MEDIUM","SecondaryButton","Button","ComponentTextStyle","Bold","RightSideNav","navigationOptions","secondaryButton","preventFocusOnClick","e","preventDefault","getNavItem","navOption","disabled","label","NavLink","exact","to","onClick","reverse","map","no","action"],"mappings":";;;;;;;;;;;AAAA;;AACA;;AACA;;AAEA;;AAEA;;AACA;;AACA;;;;;;;;;;;;AAEA,IAAMA,YAAY,GAAGC,0BAAOC,GAAV,2VAUdC,oBAAYC,KAVE,EAadD,oBAAYE,MAbE,CAAlB;;AAyBA,IAAMC,eAAe,GAAG,+BAAOC,cAAP,CAAH,uHAIjB,mCAAkBC,2BAAmBC,IAArC,EAA2C,OAA3C,CAJiB,CAArB;;AAYA,IAAMC,YAAY,GAAG,SAAfA,YAAe,OAA8E;AAAA,MAA3EC,iBAA2E,QAA3EA,iBAA2E;AAAA,MAAxDC,eAAwD,QAAxDA,eAAwD;;AACjG,MAAMC,mBAAmB,GAAG,SAAtBA,mBAAsB,CAACC,CAAD,EAAY;AACtCA,IAAAA,CAAC,CAACC,cAAF;AACD,GAFD;;AAGA,MAAMC,UAAU,GAAG,SAAbA,UAAa,CAACC,SAAD,EAA0B;AAC3C,QAAIA,SAAJ,aAAIA,SAAJ,eAAIA,SAAS,CAAEC,QAAf,EAAyB;AACvB,0BACE,oBAAC,gBAAD;AAAS,QAAA,EAAE,EAAEX,cAAb;AAAqB,QAAA,SAAS,EAAC,UAA/B;AAA0C,QAAA,GAAG,EAAEU,SAAF,aAAEA,SAAF,uBAAEA,SAAS,CAAEE;AAA1D,SACGF,SADH,aACGA,SADH,uBACGA,SAAS,CAAEE,KADd,CADF;AAKD,KAND,MAMO;AACL,0BACE,oBAAC,gBAAD;AACE,QAAA,EAAE,EAAEC,uBADN;AAEE,QAAA,KAAK,EAAEH,SAAF,aAAEA,SAAF,uBAAEA,SAAS,CAAEI,KAFpB;AAGE,QAAA,EAAE,EAAE,CAAAJ,SAAS,SAAT,IAAAA,SAAS,WAAT,YAAAA,SAAS,CAAEK,EAAX,KAAiB,EAHvB;AAIE,QAAA,GAAG,EAAEL,SAAF,aAAEA,SAAF,uBAAEA,SAAS,CAAEE,KAJlB;AAKE,QAAA,WAAW,EAAEN,mBALf;AAME,QAAA,OAAO,EAAE,mBAAM;AACb,cAAII,SAAJ,aAAIA,SAAJ,eAAIA,SAAS,CAAEM,OAAf,EAAwB;AACtBN,YAAAA,SAAS,SAAT,IAAAA,SAAS,WAAT,YAAAA,SAAS,CAAEM,OAAX;AACD;AACF;AAVH,SAWGN,SAXH,aAWGA,SAXH,uBAWGA,SAAS,CAAEE,KAXd,CADF;AAeD;AACF,GAxBD;;AAyBA,sBACE,oBAAC,YAAD,QACGR,iBADH,aACGA,iBADH,uBACGA,iBAAiB,CAAEa,OAAnB,GAA6BC,GAA7B,CAAiC,UAAAC,EAAE;AAAA,WAAIV,UAAU,CAACU,EAAD,CAAd;AAAA,GAAnC,CADH,EAGGd,eAAe,iBACd,oBAAC,eAAD;AAAiB,IAAA,OAAO,EAAC,WAAzB;AAAqC,IAAA,OAAO,EAAEA,eAAF,aAAEA,eAAF,uBAAEA,eAAe,CAAEe;AAA/D,KACGf,eAAe,CAACO,KADnB,CAJJ,CADF;AAWD,CAxCD;;;AAJER,EAAAA,iB;;eA8CaD,Y","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {NavLink} from 'react-router-dom';\n\nimport {NavItem} from '../NavItem';\nimport {NavButton, NavOption} from '../types';\nimport {BREAKPOINTS, ComponentTextStyle} from '../styles';\nimport {Button} from '../Button';\nimport {ComponentMStyling} from '../styles/typography';\n\nconst NavContainer = styled.div`\n  display: flex;\n  margin: auto 0 auto auto;\n  align-items: center;\n  height: 48px;\n  \n  a {\n    text-decoration: none;\n  }\n\n  ${BREAKPOINTS.SMALL} {\n    height: 56px;\n  }\n  ${BREAKPOINTS.MEDIUM} {\n    height: 64px;\n  }\n\n  button,\n  div {\n    &:hover {\n      cursor: pointer;\n    }\n  }\n`;\n\nconst SecondaryButton = styled(Button)`\n  height: 40px;\n  margin: 0 8px;\n\n  ${ComponentMStyling(ComponentTextStyle.Bold, 'unset')}\n`;\n\ntype Props = {\n  navigationOptions?: NavOption[];\n  secondaryButton?: NavButton;\n};\n\nconst RightSideNav = ({ navigationOptions, secondaryButton }: Props): React.ReactElement<Props> => {\n  const preventFocusOnClick = (e: any) => {\n    e.preventDefault();\n  };\n  const getNavItem = (navOption: NavOption) => {\n    if (navOption?.disabled) {\n      return (\n        <NavItem as={Button} className=\"disabled\" key={navOption?.label}>\n          {navOption?.label}\n        </NavItem>\n      );\n    } else {\n      return (\n        <NavItem\n          as={NavLink}\n          exact={navOption?.exact}\n          to={navOption?.to || ''}\n          key={navOption?.label}\n          onMouseDown={preventFocusOnClick}\n          onClick={() => {\n            if (navOption?.onClick) {\n              navOption?.onClick();\n            }\n          }}>\n          {navOption?.label}\n        </NavItem>\n      );\n    }\n  };\n  return (\n    <NavContainer>\n      {navigationOptions?.reverse().map(no => getNavItem(no))}\n\n      {secondaryButton && (\n        <SecondaryButton variant=\"secondary\" onClick={secondaryButton?.action}>\n          {secondaryButton.label}\n        </SecondaryButton>\n      )}\n    </NavContainer>\n  );\n};\n\nexport default RightSideNav;\n"],"file":"RightSideNav.js"}

package/dist/js/List/ListRow.d.ts

@@ -1,11 +1,18 @@
 import * as React from 'react';
-import { ListRowDropdownOption } from '../types';
+import { DropdownButtonProps } from '../Dropdown/DropdownButtonTypes';
+import { Size } from '../types';
 declare type Props = {
     key?: string;
-    Icon?: any;
-    mainInfo: any;
-    dropdownOptions: ListRowDropdownOption[];
-    disableDifferentBackgroundforEvenNumbers?: boolean;
+    size?: Size;
+    variant?: 'normal' | 'overlay';
+    icon?: React.ReactNode;
+    mainText: string;
+    secondaryText?: string;
+    dropdown?: Pick<DropdownButtonProps, 'items' | 'onClick' | 'disabled' | 'width'>;
+    note?: string;
+    noteTooltip?: string;
+    disabled?: boolean;
+    action?: () => void;
 };
 declare const ListRow: React.FunctionComponent<Props>;
 export default ListRow;