@laerdal/life-react-components 3.4.2 → 3.5.0

package/dist/js/Dropdown/DropdownContent.js

@@ -0,0 +1,597 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.DDContainer = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _Button = _interopRequireDefault(require("../Button/Button"));
+
+var _types = require("../types");
+
+var _CommonStyling = require("./CommonStyling");
+
+var _typography = require("../styles/typography");
+
+var _styles = require("../styles");
+
+var _InputFields = require("../InputFields");
+
+var _zIndexes = require("../styles/z-indexes");
+
+var _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); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+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: ", ";\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%';
+}, _zIndexes.Z_INDEXES.dropdown, function (props) {
+  return props.isButton ? '-4px' : '4px 0px';
+}, function (props) {
+  return props.alignLeft ? 'left: 0px;' : '';
+}, function (props) {
+  return props.isButton ? _CommonStyling.ButtonDropdownContentStyling : '';
+}, _styles.COLORS.neutral_100, function (props) {
+  return props.size == _types.Size.Large ? '320px' : props.size == _types.Size.Medium ? '280px' : '240px';
+}, function (props) {
+  return props.size == _types.Size.Large ? '10px' : props.size == _types.Size.Medium ? '8px' : '6px';
+}, function (props) {
+  return !props.scrollable ? 'auto' : props.maxHeight ? props.maxHeight : props.size == _types.Size.Large ? '320px' : props.size == _types.Size.Medium ? '280px' : '240px';
+});
+
+exports.DDContainer = DDContainer;
+
+var ItemsContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  > *:hover {\n    z-index: ", ";\n  }\n  > *:active,\n  > *.active{\n    z-index: ", ";\n  }\n  > *:focus {\n    z-index: ", ";\n  }\n  \n  button.dropdownButton {\n    ", "\n  }"])), _zIndexes.Z_INDEXES.hover, _zIndexes.Z_INDEXES.active, _zIndexes.Z_INDEXES.focus, 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;' : '';
+}, 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 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 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(_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,
+      isButton = _ref.isButton,
+      size = _ref.size,
+      isOpen = _ref.isOpen,
+      hideOnClickOutside = _ref.hideOnClickOutside,
+      width = _ref.width,
+      setIsOpen = _ref.setIsOpen,
+      filter = _ref.filter,
+      focused = _ref.focused,
+      setFocused = _ref.setFocused,
+      selectedValues = _ref.selectedValues,
+      setSelectedValues = _ref.setSelectedValues,
+      messageOnNoResults = _ref.messageOnNoResults;
+
+  var _React$useState = _react.default.useState(false),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      isUp = _React$useState2[0],
+      setIsUp = _React$useState2[1];
+
+  var dropdownContentRef = _react.default.useRef(null);
+
+  if (!customizationProps.itemsType) customizationProps.itemsType = 'normal';
+  if (!size) size = _types.Size.Small;
+
+  var itemsListRef = _react.default.useRef(null);
+
+  var determineDropUp = function determineDropUp() {
+    var options = customizationProps.items;
+    var node = dropdownContentRef.current;
+    if (!node) return;
+    var windowHeight = window.innerHeight;
+    var menuHeight = Math.min(MAX_MENU_HEIGHT, options.length * AVG_OPTION_HEIGHT);
+    var instOffsetWithMenu = node.getBoundingClientRect().top + menuHeight;
+    setIsUp(instOffsetWithMenu >= windowHeight);
+  };
+
+  var setNewFocusedElement = function setNewFocusedElement(index) {
+    var newFocusedElement = elRefs[index];
+
+    if (newFocusedElement) {
+      var _newFocusedElement$cu;
+
+      setFocused(index);
+      newFocusedElement === null || newFocusedElement === void 0 ? void 0 : (_newFocusedElement$cu = newFocusedElement.current) === null || _newFocusedElement$cu === void 0 ? void 0 : _newFocusedElement$cu.focus();
+    }
+  };
+
+  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) {
+        e.preventDefault();
+        var focusedNow = focused;
+
+        if (focusedNow !== undefined && focusedNow !== null && focusedNow > 0) {
+          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) {
+        e.preventDefault();
+        var focusedNow = focused;
+
+        if (focusedNow !== undefined && focusedNow !== null) {
+          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 = haveTopItem() ? 0 : 1;
+        }
+
+        setNewFocusedElement(focusedNow);
+      } else if (e.keyCode === 9) {
+        e.preventDefault();
+        var focusedNow = focused;
+
+        if (focusedNow !== undefined && focusedNow !== null) {
+          focusedNow++;
+          var newFocusedElement = document.getElementById("".concat(id, "_").concat(focusedNow));
+
+          if (!newFocusedElement) {
+            setNewFocusedElement(0);
+          } else {
+            setNewFocusedElement(focusedNow);
+          }
+        } else {
+          setFocused(null);
+        }
+      } else if (e.keyCode === 27) {
+        setIsOpen(false);
+        setFocused(null); //TODO: add onEscapehandler
+
+        /*
+        if (!list.includes(input)) {
+          setInput('');
+          setPlaceholderSearch(placeholder || '');
+        }
+        styledFieldRef.current?.focus(); */
+      }
+    }
+  };
+
+  var handleClickOutside = function handleClickOutside(e) {
+    if (hideOnClickOutside && dropdownContentRef !== null && dropdownContentRef !== void 0 && dropdownContentRef.current && !dropdownContentRef.current.contains(e.target) && !elRefs.some(function (x) {
+      var _x$current;
+
+      return x === null || x === void 0 ? void 0 : (_x$current = x.current) === null || _x$current === void 0 ? void 0 : _x$current.contains(e.target);
+    })) {
+      if (isOpen) {
+        setIsOpen(false);
+        setFocused(null);
+      }
+    }
+  };
+
+  _react.default.useEffect(function () {
+    document.addEventListener('keydown', handleKeyDown);
+    document.addEventListener('click', handleClickOutside);
+    return function () {
+      document.removeEventListener('keydown', handleKeyDown);
+      document.removeEventListener('click', handleClickOutside);
+    };
+  });
+
+  var scrollPosition = _react.default.useRef(0);
+
+  var handleScroll = function handleScroll() {
+    var _itemsListRef$current;
+
+    scrollPosition.current = (_itemsListRef$current = itemsListRef.current) === null || _itemsListRef$current === void 0 ? void 0 : _itemsListRef$current.scrollTop;
+  };
+
+  (0, _react.useLayoutEffect)(function () {
+    var _scrollPosition$curre;
+
+    if (itemsListRef.current) itemsListRef.current.scrollTop = (_scrollPosition$curre = scrollPosition.current) !== null && _scrollPosition$curre !== void 0 ? _scrollPosition$curre : 0;
+  }, [selectedValues]);
+
+  var getCorrectRef = function getCorrectRef(ref) {
+    switch (customizationProps.itemsType) {
+      case 'normal':
+        return ref || /*#__PURE__*/(0, _react.createRef)();
+
+      default:
+        return ref || /*#__PURE__*/(0, _react.createRef)();
+    }
+  };
+
+  var arrLength = getFilteredItems().length;
+
+  var _React$useState3 = _react.default.useState([]),
+      _React$useState4 = _slicedToArray(_React$useState3, 2),
+      elRefs = _React$useState4[0],
+      setElRefs = _React$useState4[1];
+
+  _react.default.useEffect(function () {
+    setElRefs(function (elRefs) {
+      return Array(arrLength + 1).fill(null).map(function (_, i) {
+        return getCorrectRef(elRefs[i]);
+      });
+    });
+  }, [isOpen, arrLength, selectedValues]);
+
+  _react.default.useEffect(function () {
+    determineDropUp();
+  }, [isOpen]);
+
+  var haveTopItem = function haveTopItem() {
+    var _getSuggestions;
+
+    if (customizationProps.itemsType == 'radio' && selectedValues && (selectedValues === null || selectedValues === void 0 ? void 0 : selectedValues.length) > 0) return true;else if (customizationProps.itemsType == 'checkbox' && (customizationProps.multiSelect || (selectedValues === null || selectedValues === void 0 ? void 0 : selectedValues.length) > 0)) return true;else if (customizationProps.itemsType == 'normal' && ((_getSuggestions = getSuggestions()) === null || _getSuggestions === void 0 ? void 0 : _getSuggestions.length) > 0) return true;
+    return false;
+  };
+
+  var getSuggestions = function getSuggestions() {
+    return getFilteredItems().filter(function (x) {
+      return x.suggestion;
+    });
+  };
+
+  _react.default.useLayoutEffect(function () {
+    if (isOpen && (focused || focused == 0)) {
+      var _newFocusedElement$cu2;
+
+      var focusThis = focused == 0 && !haveTopItem() ? 1 : focused;
+      if (focusThis != focused) setFocused(focusThis);
+      var newFocusedElement = elRefs[focusThis];
+      newFocusedElement === null || newFocusedElement === void 0 ? void 0 : (_newFocusedElement$cu2 = newFocusedElement.current) === null || _newFocusedElement$cu2 === void 0 ? void 0 : _newFocusedElement$cu2.focus();
+    } else setFocused(null); //if the dropdown is closed, we don't to keep saved the focused item
+
+  }, [isOpen]);
+
+  var handleItemClick = function handleItemClick(selected, item) {
+    var newValue = [];
+
+    if (customizationProps.multiSelect) {
+      if (selected) newValue = [].concat(_toConsumableArray(selectedValues), [item.value]);else newValue = selectedValues.filter(function (x) {
+        return x != item.value;
+      });
+    } else newValue = selected ? [item.value] : [];
+
+    setSelectedValues(newValue);
+    if (customizationProps.onValueUpdate && customizationProps.onValueUpdate(newValue)) setIsOpen(false);
+  };
+
+  var getTopItem = function getTopItem() {
+    var _customizationProps$i, _customizationProps$i2, _selectedFirst$displa, _selectedFirst$displa2;
+
+    if (!customizationProps.pinTopItem) return;
+    var visibleItems = getFilteredItems();
+    var allSelected = (selectedValues === null || selectedValues === void 0 ? void 0 : selectedValues.filter(function (x) {
+      return visibleItems.some(function (y) {
+        return y.value == x;
+      });
+    }).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;
+    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"),
+      selected: true
+    }), customizationProps.itemsType == 'checkbox' && /*#__PURE__*/_react.default.createElement(_InputFields.Checkbox, {
+      ref: elRefs[0],
+      select: function select(selected) {
+        if (!customizationProps.multiSelect) return;
+        var newValues = selected ? visibleItems.map(function (x) {
+          return x.value;
+        }) : [];
+        setSelectedValues(newValues);
+        if (customizationProps.onValueUpdate && customizationProps.onValueUpdate(newValues)) setIsOpen(false);
+      },
+      iconPointerEventsTransparent: true,
+      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' : (_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("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]);
+          setIsOpen(false);
+          setFocused(null);
+        }
+      }, /*#__PURE__*/_react.default.createElement("div", {
+        className: "item-content"
+      }, (x === null || x === void 0 ? void 0 : x.icon) && /*#__PURE__*/_react.default.createElement("div", {
+        className: "item-icon"
+      }, x === null || x === void 0 ? void 0 : x.icon), /*#__PURE__*/_react.default.createElement("div", {
+        className: "item-label"
+      }, (_x$displayLabel2 = x === null || x === void 0 ? void 0 : x.displayLabel) !== null && _x$displayLabel2 !== void 0 ? _x$displayLabel2 : x === null || x === void 0 ? void 0 : x.value, (x === null || x === void 0 ? void 0 : x.noteLabel) && /*#__PURE__*/_react.default.createElement("div", {
+        style: {
+          fontSize: '12px'
+        }
+      }, x.noteLabel))));
+    })));
+  };
+
+  var getElements = function getElements() {
+    if (getFilteredItems().length === 0) {
+      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, {
+      size: size
+    }, getFilteredItems().filter(function (x) {
+      return x && (customizationProps.itemsType != 'normal' || !x.suggestion);
+    }).map(function (item) {
+      var _item$displayLabel, _item$displayLabel2, _item$displayLabel3;
+
+      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) {
+          return handleItemClick(selected, item);
+        },
+        ref: elRefs[number + 1],
+        size: size,
+        iconPointerEventsTransparent: true,
+        disabled: item === null || item === void 0 ? void 0 : item.disabled,
+        key: "key_".concat(id, "_").concat(number++),
+        id: "".concat(id, "_").concat(number + 1),
+        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)
+      }), !item.customContent && customizationProps.itemsType == 'checkbox' && /*#__PURE__*/_react.default.createElement(_InputFields.Checkbox, {
+        select: function select(selected) {
+          return handleItemClick(selected, item);
+        },
+        iconPointerEventsTransparent: true,
+        disabled: item === null || item === void 0 ? void 0 : item.disabled,
+        ref: elRefs[number + 1],
+        size: size,
+        key: "key_".concat(id, "_").concat(number++),
+        id: "".concat(id, "_").concat(number + 1),
+        label: (_item$displayLabel2 = item.displayLabel) !== null && _item$displayLabel2 !== void 0 ? _item$displayLabel2 : item.value,
+        selected: selectedValues === null || selectedValues === void 0 ? void 0 : selectedValues.includes(item.value)
+      }), !item.customContent && (customizationProps.itemsType == 'normal' || !customizationProps.itemsType) && /*#__PURE__*/_react.default.createElement("button", {
+        type: "button",
+        disabled: item === null || item === void 0 ? void 0 : item.disabled,
+        ref: elRefs[number + 1],
+        onClick: function onClick(e) {
+          customizationProps.onValueUpdate([item.value]);
+          setSelectedValues([item.value]);
+          setIsOpen(false);
+          setFocused(null);
+        },
+        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", {
+        className: "divider"
+      }), /*#__PURE__*/_react.default.createElement("div", {
+        className: "item-content"
+      }, item.icon && /*#__PURE__*/_react.default.createElement("div", {
+        className: "item-icon"
+      }, item.icon), /*#__PURE__*/_react.default.createElement("div", {
+        className: "item-label"
+      }, (_item$displayLabel3 = item.displayLabel) !== null && _item$displayLabel3 !== void 0 ? _item$displayLabel3 : item.value, item.noteLabel && /*#__PURE__*/_react.default.createElement("div", {
+        style: {
+          fontSize: '12px'
+        }
+      }, item.noteLabel)))));
+    }));
+  };
+
+  return /*#__PURE__*/_react.default.createElement(DDContainer, {
+    ref: dropdownContentRef,
+    size: size,
+    width: width,
+    isButton: isButton,
+    alignLeft: alignLeft,
+    scrollable: customizationProps.scrollable,
+    maxHeight: customizationProps.maxHeight,
+    className: [isOpen && 'show', isUp && 'up'].filter(function (e) {
+      return !!e;
+    }).join(' ')
+  }, /*#__PURE__*/_react.default.createElement(ListContainer, {
+    size: size,
+    itemsType: customizationProps.itemsType,
+    onScroll: handleScroll,
+    ref: itemsListRef,
+    scrollable: customizationProps.scrollable
+  }, 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%",
+    icon: customizationProps.actionIcon,
+    loading: customizationProps.actionLoading,
+    disabled: customizationProps.actionDisabled,
+    variant: (_customizationProps$a = customizationProps.actionVariant) !== null && _customizationProps$a !== void 0 ? _customizationProps$a : 'primary',
+    size: size,
+    onClick: function onClick() {
+      if (customizationProps.action()) //closing the dropdown if action returns 'true'
+        setIsOpen(false);
+    }
+  }, customizationProps.actionLabel)));
+  /*  ),
+    {
+      handleClickOutside: () => () => {
+        if (isOpen) {
+          setIsOpen(false);
+          setFocused(null);
+        }
+      },
+    },
+  );
+    return <Wrapped />; */
+};
+
+DropdownContent.propTypes = {
+  isButton: _propTypes.default.bool.isRequired,
+  customizationProps: _propTypes.default.shape({
+    itemsType: _propTypes.default.oneOf(['radio', 'checkbox', 'normal']),
+    menuContent: _propTypes.default.node,
+    scrollable: _propTypes.default.bool,
+    multiSelect: _propTypes.default.bool,
+    maxHeight: _propTypes.default.string,
+    actionLabel: _propTypes.default.string,
+    actionIcon: _propTypes.default.node,
+    actionLoading: _propTypes.default.bool,
+    actionDisabled: _propTypes.default.bool,
+    action: _propTypes.default.func.isRequired,
+    pinTopItem: _propTypes.default.bool,
+    onValueUpdate: _propTypes.default.func.isRequired,
+    items: _propTypes.default.arrayOf(_propTypes.default.shape({
+      value: _propTypes.default.string.isRequired,
+      displayLabel: _propTypes.default.string,
+      noteLabel: _propTypes.default.string,
+      suggestion: _propTypes.default.bool,
+      showDividerAbove: _propTypes.default.bool,
+      disabled: _propTypes.default.bool,
+      icon: _propTypes.default.node,
+      customContent: _propTypes.default.node
+    })).isRequired
+  }).isRequired,
+  alignLeft: _propTypes.default.bool,
+  isOpen: _propTypes.default.bool.isRequired,
+  setIsOpen: _propTypes.default.func.isRequired,
+  id: _propTypes.default.string.isRequired,
+  filter: _propTypes.default.string.isRequired,
+  width: _propTypes.default.string,
+  hideOnClickOutside: _propTypes.default.bool.isRequired,
+  selectedValues: _propTypes.default.arrayOf(_propTypes.default.string).isRequired,
+  setSelectedValues: _propTypes.default.func.isRequired,
+  messageOnNoResults: _propTypes.default.string.isRequired,
+  focused: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.oneOf([null])]),
+  setFocused: _propTypes.default.func.isRequired
+};
+var _default = DropdownContent;
+exports.default = _default;
+//# sourceMappingURL=DropdownContent.js.map