@laerdal/life-react-components 3.5.1-dev.10 → 3.5.1-dev.12

package/dist/Dropdown/DropdownContent.js

@@ -1,605 +1,339 @@
-import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
-import _pt from "prop-types";
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
-function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t["return"] || t["return"](); } finally { if (u) throw o; } } }; }
-function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
-function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
-import React from 'react';
-import styled from 'styled-components';
-import Button from '../Button/Button';
-import { Size } from '../types';
-import { DropdownContentButtonStyling } from './CommonStyling';
-import { ComponentLStyling, ComponentXLStyling, ComponentMStyling, ComponentSStyling, ComponentTextStyle } from '../styles/typography';
-import { COLORS, scrollBarStyling } from '../styles';
-import { Checkbox, RadioButton } from '../InputFields';
-import { Z_INDEXES } from '../styles/z-indexes';
-import MenuItem from '../MenuItem/MenuItem';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Fragment as _Fragment } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-var MAX_MENU_HEIGHT = 240;
-var AVG_OPTION_HEIGHT = 48;
-var OFFSET_BEFORE_SHOW = 1000000;
-export var DropdownContentContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: none;\n  pointer-events: auto;\n  position: absolute;\n  background-color: ", ";\n\n  z-index: ", ";\n  margin: ", ";\n\n  &.show {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    &.down,\n    &.up {\n      ", "\n    }\n  }\n\n  transform: translate(-", "px, -", "px);\n\n  &.outline:focus:after {\n    content: '';\n    pointer-events: none;\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    outline: 4px solid black;\n    outline-offset: 2px;\n    border-radius: 2px;\n  }\n\n  &:focus {\n    outline: none;\n  }\n\n  ", ";\n\n  border: 1px solid ", ";\n  box-sizing: border-box;\n  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15);\n  padding: 4px 0px;\n\n  min-width: ", ";\n  border-radius: ", ";\n\n  max-height: ", ";\n"])), COLORS.white, Z_INDEXES.dropdown, function (props) {
-  return props.isButton ? '-4px' : '4px 0px';
-}, function (props) {
-  return "transform: translate(".concat(props.offsetLeft, ", ").concat(props.offsetTop, ");");
-}, OFFSET_BEFORE_SHOW, OFFSET_BEFORE_SHOW, function (props) {
-  return props.isButton ? DropdownContentButtonStyling : '';
-}, COLORS.neutral_100, function (props) {
-  return props.size == Size.Large ? '320px' : props.size == Size.Medium ? '280px' : '240px';
-}, function (props) {
-  return props.size == Size.Large ? '10px' : props.size == Size.Medium ? '8px' : '6px';
-}, function (props) {
-  return !props.scrollable ? 'auto' : props.maxHeight ? props.maxHeight : props.size == Size.Large ? '320px' : props.size == Size.Medium ? '280px' : '240px';
-});
-export var DropdownContentItemsContainer = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  > *:hover {\n    z-index: ", ";\n  }\n\n  > *:active,\n  > *.active {\n    z-index: ", ";\n  }\n\n  > *:focus {\n    z-index: ", ";\n  }\n"])), Z_INDEXES.hover, Z_INDEXES.active, Z_INDEXES.focus);
-export var DropdownContentListContainer = styled.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    word-break: break-word;\n  }\n\n  *:focus {\n    outline: none !important;\n  }\n\n  ", "\n"])), function (props) {
-  return props.scrollable ? 'overflow-y: scroll;' : '';
-}, function (props) {
-  return props.scrollable ? 'margin-right: 6px;' : '';
-}, function (props) {
-  return props.scrollable ? 'padding-right: 6px;' : '';
-}, function (props) {
-  return props.itemsType != 'normal' ? 'margin-left: 4px;' : '';
-}, DropdownContentItemsContainer, function (props) {
-  return props.size == Size.Large ? '8px' : props.size == Size.Medium ? '4px' : '0px';
-}, function (props) {
-  return props.size == Size.Large ? '8px' : props.size == Size.Medium ? '4px' : '0px';
-}, scrollBarStyling(Size.Small));
-var DropdownContentMenuContentContainer = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  h1,\n  h2,\n  h3 {\n    margin-block-start: 0px;\n    margin-block-end: 0px;\n    ", "\n    ", "\n    ", "\n    padding: ", ";\n  }\n\n  p {\n    margin-block-start: 0px;\n    margin-block-end: 0px;\n    ", "\n    ", "\n    ", "\n    padding: ", ";\n  }\n"])), function (props) {
-  return props.size == Size.Large && ComponentXLStyling(ComponentTextStyle.Bold, COLORS.neutral_500);
-}, function (props) {
-  return props.size == Size.Medium && ComponentLStyling(ComponentTextStyle.Bold, COLORS.neutral_500);
-}, function (props) {
-  return (props.size == Size.Small || !props.size) && ComponentMStyling(ComponentTextStyle.Bold, COLORS.neutral_500);
-}, function (props) {
-  return props.size == Size.Small || !props.size ? '10px 16px 6px' : props.size == Size.Medium ? '16px 24px 8px' : '16px 32px 8px';
-}, function (props) {
-  return props.size == Size.Large && ComponentLStyling(ComponentTextStyle.Regular, COLORS.neutral_500);
-}, function (props) {
-  return props.size == Size.Medium && ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_500);
-}, function (props) {
-  return (props.size == Size.Small || !props.size) && ComponentSStyling(ComponentTextStyle.Regular, COLORS.neutral_500);
-}, function (props) {
-  return props.size == Size.Small || !props.size ? '8px 16px' : props.size == Size.Medium ? '12px 24px' : '16px 32px';
-});
-var DividerContainer = styled.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 == Size.Large ? '16px' : props.size == Size.Medium ? '12px' : props.size == Size.Small || !props.size ? '8px' : '6px';
-});
-var DropdownContentTopItemContainer = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  border-bottom-style: solid;\n  border-bottom-color: ", ";\n  border-bottom-width: 1px;\n  margin-right: 22px;\n"])), COLORS.neutral_200);
-var DropdownContentActionButtonContainer = styled.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  ", "\n  ", "\n\n  padding: ", ";\n\n  button {\n    width: 100%;\n  }\n"])), function (props) {
-  return props.scrollable ? "border-top: 1px solid  ".concat(COLORS.neutral_200, ";") : '';
-}, function (props) {
-  return props.scrollable ? 'margin-top: 4px;' : '';
-}, function (props) {
-  return props.size === Size.Small || !props.size ? '4px 16px 0px' : props.size === Size.Medium ? '12px 16px 8px' : '16px 16px 12px';
-});
-var Overlay = styled.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  pointer-events: none;\n  z-index: ", ";\n"])), Z_INDEXES.modal);
-var DropdownContent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
-  var _ref2, _customizationProps$a;
-  var id = _ref.id,
-    customizationProps = _ref.customizationProps,
-    alignLeft = _ref.alignLeft,
-    isButton = _ref.isButton,
-    size = _ref.size,
-    isOpen = _ref.isOpen,
-    width = _ref.width,
-    setIsOpen = _ref.setIsOpen,
-    filter = _ref.filter,
-    focused = _ref.focused,
-    setFocused = _ref.setFocused,
-    selectedValues = _ref.selectedValues,
-    setSelectedValues = _ref.setSelectedValues,
-    messageOnNoResults = _ref.messageOnNoResults,
-    outline = _ref.outline,
-    containerRef = _ref.containerRef,
-    onActiveDescendantChanged = _ref.onActiveDescendantChanged,
-    _ref$ariaRolesType = _ref.ariaRolesType,
-    ariaRolesType = _ref$ariaRolesType === void 0 ? 'menu' : _ref$ariaRolesType;
-  var _React$useState = React.useState(false),
-    _React$useState2 = _slicedToArray(_React$useState, 2),
-    isUp = _React$useState2[0],
-    setIsUp = _React$useState2[1];
-  var _React$useState3 = React.useState(false),
-    _React$useState4 = _slicedToArray(_React$useState3, 2),
-    locationDefined = _React$useState4[0],
-    setLocationDefined = _React$useState4[1];
-  var _React$useState5 = React.useState({
-      top: '0',
-      left: '0'
-    }),
-    _React$useState6 = _slicedToArray(_React$useState5, 2),
-    offset = _React$useState6[0],
-    setOffset = _React$useState6[1];
-  var dropdownContentRef = (_ref2 = ref) !== null && _ref2 !== void 0 ? _ref2 : React.useRef(null);
-  if (!customizationProps.itemsType) customizationProps.itemsType = 'normal';
-  if (!size) size = Size.Small;
-  var itemsListRef = React.useRef(null);
-  var actionButtonRef = React.useRef(null);
-  var determineDropUp = function determineDropUp() {
-    var options = customizationProps.items;
-    var rect = containerRef.current.getBoundingClientRect();
-    var windowHeight = window.innerHeight;
-    var menuHeight = Math.min(MAX_MENU_HEIGHT, options.length * AVG_OPTION_HEIGHT);
-    var instOffsetWithMenu = rect.top + rect.height + menuHeight;
-    var up = instOffsetWithMenu >= windowHeight;
-    setOffset({
-      top: up ? "calc(-100% - ".concat(rect.height, "px ").concat(isButton ? '' : '- 8px', ")") : '0',
-      left: alignLeft ? "calc(-".concat(rect.width, "px)") : "calc(-100%)"
-    });
-    setIsUp(up);
-    setLocationDefined(true);
-  };
-  var setNewFocusedElement = function setNewFocusedElement(index) {
-    var _dropdownContentRef$c;
-    if (outline) (_dropdownContentRef$c = dropdownContentRef.current) === null || _dropdownContentRef$c === void 0 ? void 0 : _dropdownContentRef$c.focus();
-    var newFocusedElement = elRefs[index];
-    if (onActiveDescendantChanged) onActiveDescendantChanged(index == 0 ? "".concat(id, "_topitem") : "".concat(id, "_").concat(index));
-    var oldFocusedElement = focused || focused === 0 ? elRefs[focused] : null;
-    if (newFocusedElement && newFocusedElement !== oldFocusedElement) {
-      var _oldFocusedElement$cu, _newFocusedElement$cu, _newFocusedElement$cu2;
-      setFocused(index);
-      oldFocusedElement === null || oldFocusedElement === void 0 ? void 0 : (_oldFocusedElement$cu = oldFocusedElement.current) === null || _oldFocusedElement$cu === void 0 ? void 0 : _oldFocusedElement$cu.classList.remove('dropdown-hover');
-      (_newFocusedElement$cu = newFocusedElement.current) === null || _newFocusedElement$cu === void 0 ? void 0 : _newFocusedElement$cu.classList.add('dropdown-hover');
-      (_newFocusedElement$cu2 = newFocusedElement.current) === null || _newFocusedElement$cu2 === void 0 ? void 0 : _newFocusedElement$cu2.scrollIntoView({
-        block: 'nearest',
-        inline: 'nearest'
-      });
-    }
-  };
-  var getFilteredItems = function getFilteredItems() {
-    var filtrationString = (filter !== null && filter !== void 0 ? filter : '').toUpperCase();
-    return customizationProps.items.filter(function (x) {
-      var _x$value, _x$displayLabel;
-      return (x === null || x === void 0 ? void 0 : (_x$value = x.value) === null || _x$value === void 0 ? void 0 : _x$value.toUpperCase().includes(filtrationString)) || (x === null || x === void 0 ? void 0 : (_x$displayLabel = x.displayLabel) === null || _x$displayLabel === void 0 ? void 0 : _x$displayLabel.toUpperCase().includes(filtrationString));
-    });
-  };
-  var findNextActiveIndex = function findNextActiveIndex(index, direction, items) {
-    for (var i = index + direction; i > 0 && i <= items.length; i += direction) {
-      var _items;
-      if (!((_items = items[i - 1]) !== null && _items !== void 0 && _items.disabled)) {
-        return i;
-      }
-    }
-    return index;
-  };
-  var handleKeyDown = function handleKeyDown(e) {
-    if (isOpen) {
-      if (e.key === 'ArrowUp' || e.key === 'Up') {
-        e.preventDefault();
-        var focusedNow = focused || focused === 0 ? focused : arrLength + 1;
-        if (!!focusedNow) {
-          focusedNow = focusedNow === 1 && haveTopItem() ? 0 : findNextActiveIndex(focusedNow, -1, getFilteredItems());
-          setNewFocusedElement(focusedNow);
-        }
-      } else if (e.key === 'ArrowDown' || e.key === 'Down') {
-        e.preventDefault();
-        var _focusedNow = focused;
-        _focusedNow = !!_focusedNow || _focusedNow === 0 ? findNextActiveIndex(_focusedNow, 1, getFilteredItems()) : haveTopItem() ? 0 : 1;
-        setNewFocusedElement(_focusedNow);
-      } else if (e.key === 'Escape' || e.key === 'Esc') {
-        setIsOpen(false);
-        setFocused(null);
-        if (onActiveDescendantChanged) onActiveDescendantChanged(undefined);
-      } else if ((e.key === 'Enter' || e.key === ' ') && focused !== null && e.target !== (actionButtonRef === null || actionButtonRef === void 0 ? void 0 : actionButtonRef.current)) {
-        e.preventDefault();
-        var focusedElement = elRefs[focused];
-        if (focusedElement) {
-          var _focusedElement$curre;
-          (_focusedElement$curre = focusedElement.current) === null || _focusedElement$curre === void 0 ? void 0 : _focusedElement$curre.click();
-        }
-        if (onActiveDescendantChanged) onActiveDescendantChanged(undefined);
-      }
-    }
-  };
-  React.useEffect(function () {
-    document.addEventListener('keydown', handleKeyDown);
-    return function () {
-      document.removeEventListener('keydown', handleKeyDown);
-    };
-  }, []);
-  var scrollPosition = React.useRef(0);
-  var handleScroll = function handleScroll() {
-    var _itemsListRef$current;
-    scrollPosition.current = (_itemsListRef$current = itemsListRef.current) === null || _itemsListRef$current === void 0 ? void 0 : _itemsListRef$current.scrollTop;
-  };
-  React.useLayoutEffect(function () {
-    var _scrollPosition$curre;
-    if (itemsListRef.current) itemsListRef.current.scrollTop = (_scrollPosition$curre = scrollPosition.current) !== null && _scrollPosition$curre !== void 0 ? _scrollPosition$curre : 0;
-  }, [selectedValues]);
-  var getCorrectRef = function getCorrectRef(ref) {
-    switch (customizationProps.itemsType) {
-      case 'normal':
-        return ref || /*#__PURE__*/React.createRef();
-      default:
-        return ref || /*#__PURE__*/React.createRef();
-    }
-  };
-  var arrLength = getFilteredItems().length;
-  var _React$useState7 = React.useState([]),
-    _React$useState8 = _slicedToArray(_React$useState7, 2),
-    elRefs = _React$useState8[0],
-    setElRefs = _React$useState8[1];
-  React.useEffect(function () {
-    if ((elRefs === null || elRefs === void 0 ? void 0 : elRefs.length) !== arrLength) {
-      setFocused(null);
-    }
-    setElRefs(function (elRefs) {
-      return Array(arrLength + 1).fill(null).map(function (_, i) {
-        return getCorrectRef(elRefs[i]);
-      });
-    });
-  }, [isOpen, arrLength]);
-  React.useLayoutEffect(function () {
-    isOpen && !locationDefined && determineDropUp();
-  }, [isOpen, locationDefined]);
-  var haveTopItem = function haveTopItem() {
-    var _getSuggestions;
-    if (!customizationProps.pinTopItem) return false;
-    if (customizationProps.itemsType === 'radio' && selectedValues && (selectedValues === null || selectedValues === void 0 ? void 0 : selectedValues.length) > 0) return true;else if (customizationProps.itemsType === 'checkbox' && (customizationProps.multiSelect || (selectedValues === null || selectedValues === void 0 ? void 0 : selectedValues.length) > 0)) return true;else if (customizationProps.itemsType === 'normal' && ((_getSuggestions = getSuggestions()) === null || _getSuggestions === void 0 ? void 0 : _getSuggestions.length) > 0) return true;
-    return false;
-  };
-  var getSuggestions = function getSuggestions() {
-    return getFilteredItems().filter(function (x) {
-      return x.suggestion;
-    });
-  };
-
-  /**
-   * when dropdown opens set correct position of focused item
-   * */
-  React.useLayoutEffect(function () {
-    if (isOpen && (focused || focused === 0)) {
-      setNewFocusedElement(focused === 0 && !haveTopItem() ? 1 : focused);
-    }
-  }, [isOpen, focused]);
-
-  /**
-   * Reset dropdown content state on close
-   * */
-  React.useEffect(function () {
-    if (!isOpen) {
-      var _dropdownContentRef$c2, _dropdownContentRef$c3;
-      setLocationDefined(false);
-      var _iterator = _createForOfIteratorHelper(elRefs),
-        _step;
-      try {
-        for (_iterator.s(); !(_step = _iterator.n()).done;) {
-          var _elRef$current;
-          var elRef = _step.value;
-          (_elRef$current = elRef.current) === null || _elRef$current === void 0 ? void 0 : _elRef$current.classList.remove('dropdown-hover');
-        }
-      } catch (err) {
-        _iterator.e(err);
-      } finally {
-        _iterator.f();
-      }
-      setFocused(null);
-      if (onActiveDescendantChanged) onActiveDescendantChanged(undefined);
-      (_dropdownContentRef$c2 = dropdownContentRef.current) === null || _dropdownContentRef$c2 === void 0 ? void 0 : _dropdownContentRef$c2.classList.remove('outline');
-      (_dropdownContentRef$c3 = dropdownContentRef.current) === null || _dropdownContentRef$c3 === void 0 ? void 0 : _dropdownContentRef$c3.blur();
-    } else {
-      if (outline) {
-        var _dropdownContentRef$c4, _dropdownContentRef$c5;
-        (_dropdownContentRef$c4 = dropdownContentRef.current) === null || _dropdownContentRef$c4 === void 0 ? void 0 : _dropdownContentRef$c4.classList.add('outline');
-        (_dropdownContentRef$c5 = dropdownContentRef.current) === null || _dropdownContentRef$c5 === void 0 ? void 0 : _dropdownContentRef$c5.focus();
-      }
-    }
-  }, [isOpen, dropdownContentRef, focused, outline]);
-
-  /**
-   * Scroll item container to top when dropdown opens
-   * */
-  React.useEffect(function () {
-    if (isOpen && itemsListRef.current) {
-      itemsListRef.current.scrollTop = 0;
-    }
-  }, [isOpen]);
-  React.useEffect(function () {
-    if (isOpen) {
-      var observer = new IntersectionObserver(function (entries) {
-        if (!entries[0].isIntersecting) {
-          var _document, _document$activeEleme;
-          setIsOpen(false);
-          //@ts-ignore
-          (_document = document) === null || _document === void 0 ? void 0 : (_document$activeEleme = _document.activeElement) === null || _document$activeEleme === void 0 ? void 0 : _document$activeEleme.blur();
-        }
-      }, {
-        threshold: [0],
-        rootMargin: '8px'
-      });
-      observer.observe(containerRef.current);
-      calculateOffset();
-      window.addEventListener('scroll', calculateOffset, true);
-      window.addEventListener('resize', calculateOffset);
-      return function () {
-        observer.disconnect();
-        window.removeEventListener('scroll', calculateOffset, true);
-        window.removeEventListener('resize', calculateOffset);
-      };
-    }
-    return function () {};
-  }, [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__*/_jsxs(DropdownContentTopItemContainer, {
-      size: size,
-      children: [customizationProps.itemsType === 'radio' && /*#__PURE__*/_jsx(RadioButton, {
-        ref: elRefs[0],
-        role: "menuitemradio",
-        iconPointerEventsTransparent: true,
-        onFocus: function onFocus(e) {
-          return onActiveDescendantChanged && onActiveDescendantChanged("".concat(id, "_topitem"));
-        },
-        tabIndexVal: -1,
-        className: "".concat(focused === 0 ? 'dropdown-hover' : ''),
-        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__*/_jsx(Checkbox, {
-        ref: elRefs[0],
-        role: "menuitemcheckbox",
-        tabIndexVal: -1,
-        className: "".concat(focused === 0 ? 'dropdown-hover' : ''),
-        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);
-        },
-        onFocus: function onFocus(e) {
-          return onActiveDescendantChanged && onActiveDescendantChanged("".concat(id, "_topitem"));
-        },
-        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__*/_jsx(_Fragment, {
-        children: suggestions.map(function (x) {
-          return /*#__PURE__*/_jsx(MenuItem, {
-            role: ariaRolesType == 'input' ? 'option' : 'menu',
-            item: x,
-            size: size,
-            active: false,
-            tabIndex: -1,
-            onFocus: function onFocus(e) {
-              return onActiveDescendantChanged && onActiveDescendantChanged("".concat(id, "_topitem"));
-            },
-            className: "".concat(focused === 0 ? 'dropdown-hover' : ''),
-            ref: elRefs[0],
-            id: "".concat(id, "_topitem"),
-            onClickHandler: function onClickHandler(e) {
-              e.stopPropagation();
-              customizationProps.onValueUpdate([x.value]);
-              setSelectedValues([x.value]);
-              setIsOpen(false);
-              setFocused(null);
-            }
-          }, "".concat(id, "_topitem_").concat(x.value));
-        })
-      })]
-    });
-  };
-  var getElements = function getElements(messageOnNoResults, size) {
-    if (getFilteredItems().length === 0) {
-      return /*#__PURE__*/_jsx(MenuItem, {
-        item: {
-          value: messageOnNoResults,
-          disabled: true
-        },
-        size: size,
-        id: "noResultsFound",
-        active: false,
-        onClickHandler: function onClickHandler(e) {}
-      });
-    }
-    return /*#__PURE__*/_jsx(DropdownContentItemsContainer, {
-      size: size,
-      children: getFilteredItems().filter(function (x) {
-        return x && (customizationProps.itemsType != 'normal' || !x.suggestion);
-      }).map(function (item, index) {
-        var _item$displayLabel, _item$displayLabel2;
-        return /*#__PURE__*/_jsxs(React.Fragment, {
-          children: [item.customContent, !item.customContent && customizationProps.itemsType == 'radio' && /*#__PURE__*/_jsx(RadioButton, {
-            role: "menuitemradio",
-            select: function select(selected) {
-              return handleItemClick(selected, item);
-            },
-            ref: elRefs[index + 1],
-            size: size,
-            tabIndexVal: -1,
-            className: "".concat(index + 1 === focused ? 'dropdown-hover' : ''),
-            iconPointerEventsTransparent: true,
-            disabled: item === null || item === void 0 ? void 0 : item.disabled,
-            onFocus: function onFocus(e) {
-              return onActiveDescendantChanged && onActiveDescendantChanged("".concat(id, "_").concat(index + 1));
-            },
-            id: "".concat(id, "_").concat(index + 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)
-          }, "key_".concat(id, "_").concat(index + 1)), !item.customContent && customizationProps.itemsType == 'checkbox' && /*#__PURE__*/_jsx(Checkbox, {
-            role: "menuitemcheckbox",
-            select: function select(selected) {
-              return handleItemClick(selected, item);
-            },
-            iconPointerEventsTransparent: true,
-            disabled: item === null || item === void 0 ? void 0 : item.disabled,
-            className: "".concat(index + 1 === focused ? 'dropdown-hover' : ''),
-            ref: elRefs[index + 1],
-            size: size,
-            tabIndexVal: -1,
-            onFocus: function onFocus(e) {
-              return onActiveDescendantChanged && onActiveDescendantChanged("".concat(id, "_").concat(index + 1));
-            },
-            id: "".concat(id, "_").concat(index + 1),
-            label: (_item$displayLabel2 = item.displayLabel) !== null && _item$displayLabel2 !== void 0 ? _item$displayLabel2 : item.value,
-            selected: selectedValues === null || selectedValues === void 0 ? void 0 : selectedValues.includes(item.value)
-          }, "key_".concat(id, "_").concat(index + 1)), !item.customContent && (customizationProps.itemsType == 'normal' || !customizationProps.itemsType) && /*#__PURE__*/_jsx(MenuItem, {
-            role: ariaRolesType == 'input' ? 'option' : 'menu',
-            id: "".concat(id, "_").concat(index + 1),
-            item: item,
-            tabIndex: -1,
-            className: "".concat(index + 1 === focused ? 'dropdown-hover' : ''),
-            size: size,
-            onFocus: function onFocus(e) {
-              return onActiveDescendantChanged && onActiveDescendantChanged("".concat(id, "_").concat(index + 1));
-            },
-            active: selectedValues === null || selectedValues === void 0 ? void 0 : selectedValues.includes(item.value),
-            ref: elRefs[index + 1],
-            onClickHandler: function onClickHandler(e) {
-              e.stopPropagation();
-              customizationProps.onValueUpdate([item.value]);
-              setSelectedValues([item.value]);
-              setIsOpen(false);
-              setFocused(null);
-            }
-          }, "key_".concat(id, "_").concat(index + 1))]
-        }, "key_".concat(id, "_").concat(item.value));
-      })
-    });
-  };
-  var calculateOffset = function calculateOffset() {
-    var _containerRef$current;
-    var rect = containerRef === null || containerRef === void 0 ? void 0 : (_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.getBoundingClientRect();
-    if (rect) {
-      dropdownContentRef.current.style.left = "".concat(rect.x + rect.width, "px");
-      dropdownContentRef.current.style.top = "".concat(rect.y + rect.height, "px");
-      dropdownContentRef.current.style.width = width !== null && width !== void 0 ? width : "".concat(rect.width, "px");
-    }
-    determineDropUp();
-  };
-  var cls = "".concat(isOpen ? 'show' : '', " ").concat(isOpen && outline ? 'outline' : '', " ").concat(locationDefined ? isUp ? 'up' : 'down' : '');
-  return /*#__PURE__*/_jsx(Overlay, {
-    children: /*#__PURE__*/_jsxs(DropdownContentContainer, {
-      role: ariaRolesType == "menu" ? "menu" : "optionlist",
-      ref: dropdownContentRef,
-      size: size,
-      offsetTop: offset.top,
-      id: id,
-      offsetLeft: offset.left,
-      tabIndex: -1,
-      isButton: isButton,
-      alignLeft: alignLeft,
-      scrollable: customizationProps.scrollable,
-      maxHeight: customizationProps.maxHeight,
-      className: cls,
-      children: [/*#__PURE__*/_jsxs(DropdownContentListContainer, {
-        role: "group",
-        size: size,
-        itemsType: customizationProps.itemsType,
-        onScroll: handleScroll,
-        ref: itemsListRef,
-        outline: outline,
-        scrollable: customizationProps.scrollable,
-        children: [customizationProps.menuContent && /*#__PURE__*/_jsxs(DropdownContentMenuContentContainer, {
-          size: size,
-          children: [customizationProps.menuContent, /*#__PURE__*/_jsx(DividerContainer, {
-            size: size,
-            children: /*#__PURE__*/_jsx("div", {
-              className: "divider"
-            })
-          })]
-        }), customizationProps.pinTopItem && getTopItem(), getElements(messageOnNoResults, size)]
-      }), customizationProps.action && customizationProps.actionLabel && /*#__PURE__*/_jsx(DropdownContentActionButtonContainer, {
-        size: size,
-        scrollable: customizationProps.scrollable,
-        children: /*#__PURE__*/_jsx(Button, {
-          width: "100%",
-          role: "menuitem",
-          icon: customizationProps.actionIcon,
-          ref: actionButtonRef,
-          loading: customizationProps.actionLoading,
-          disabled: customizationProps.actionDisabled,
-          variant: (_customizationProps$a = customizationProps.actionVariant) !== null && _customizationProps$a !== void 0 ? _customizationProps$a : 'primary',
-          size: size,
-          onClick: function onClick() {
-            return customizationProps.action() && setIsOpen(false);
-          },
-          children: customizationProps.actionLabel
-        })
-      })]
-    })
-  });
-});
-DropdownContent.propTypes = {
-  isButton: _pt.bool.isRequired,
-  customizationProps: _pt.shape({
-    itemsType: _pt.oneOf(['radio', 'checkbox', 'normal']),
-    menuContent: _pt.node,
-    scrollable: _pt.bool,
-    multiSelect: _pt.bool,
-    maxHeight: _pt.string,
-    actionLabel: _pt.string,
-    actionIcon: _pt.node,
-    actionLoading: _pt.bool,
-    actionDisabled: _pt.bool,
-    action: _pt.func.isRequired,
-    pinTopItem: _pt.bool,
-    onValueUpdate: _pt.func.isRequired,
-    items: _pt.arrayOf(_pt.shape({
-      value: _pt.string.isRequired,
-      displayLabel: _pt.string,
-      noteLabel: _pt.string,
-      suggestion: _pt.bool,
-      showDividerAbove: _pt.bool,
-      disabled: _pt.bool,
-      locked: _pt.bool,
-      icon: _pt.node,
-      customContent: _pt.node
-    })).isRequired
-  }).isRequired,
-  alignLeft: _pt.bool,
-  isOpen: _pt.bool.isRequired,
-  setIsOpen: _pt.func.isRequired,
-  id: _pt.string.isRequired,
-  filter: _pt.string.isRequired,
-  width: _pt.string,
-  onActiveDescendantChanged: _pt.func,
-  selectedValues: _pt.arrayOf(_pt.string).isRequired,
-  setSelectedValues: _pt.func.isRequired,
-  messageOnNoResults: _pt.string.isRequired,
-  focused: _pt.oneOfType([_pt.number, _pt.oneOf([null])]),
-  setFocused: _pt.func.isRequired,
-  outline: _pt.bool,
-  ariaRolesType: _pt.oneOf(['input', 'menu'])
-};
-export default DropdownContent;
-//# sourceMappingURL=DropdownContent.js.map
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+import React from 'react';
+import styled from 'styled-components';
+import Button from '../Button/Button';
+import { Size } from '../types';
+import { DropdownContentButtonStyling } from './CommonStyling';
+import { ComponentLStyling, ComponentXLStyling, ComponentMStyling, ComponentSStyling, ComponentTextStyle } from '../styles/typography';
+import { COLORS, scrollBarStyling } from '../styles';
+import { Checkbox, RadioButton } from '../InputFields';
+import { Z_INDEXES } from '../styles/z-indexes';
+import MenuItem from '../MenuItem/MenuItem';
+var MAX_MENU_HEIGHT = 240;
+var AVG_OPTION_HEIGHT = 48;
+var OFFSET_BEFORE_SHOW = 1000000;
+export var DropdownContentContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: none;\n  pointer-events: auto;\n  position: absolute;\n  background-color: ", ";\n\n  z-index: ", ";\n  margin: ", ";\n\n  &.show {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    &.down,\n    &.up {\n      ", "\n    }\n  }\n\n  transform: translate(-", "px, -", "px);\n\n  &.outline:focus:after {\n    content: '';\n    pointer-events: none;\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    outline: 4px solid black;\n    outline-offset: 2px;\n    border-radius: 2px;\n  }\n\n  &:focus {\n    outline: none;\n  }\n\n  ", ";\n\n  border: 1px solid ", ";\n  box-sizing: border-box;\n  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15);\n  padding: 4px 0px;\n\n  min-width: ", ";\n  border-radius: ", ";\n\n  max-height: ", ";\n"], ["\n  display: none;\n  pointer-events: auto;\n  position: absolute;\n  background-color: ", ";\n\n  z-index: ", ";\n  margin: ", ";\n\n  &.show {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    &.down,\n    &.up {\n      ", "\n    }\n  }\n\n  transform: translate(-", "px, -", "px);\n\n  &.outline:focus:after {\n    content: '';\n    pointer-events: none;\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    outline: 4px solid black;\n    outline-offset: 2px;\n    border-radius: 2px;\n  }\n\n  &:focus {\n    outline: none;\n  }\n\n  ", ";\n\n  border: 1px solid ", ";\n  box-sizing: border-box;\n  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15);\n  padding: 4px 0px;\n\n  min-width: ", ";\n  border-radius: ", ";\n\n  max-height: ", ";\n"])), COLORS.white, Z_INDEXES.dropdown, function (props) { return (props.isButton ? '-4px' : '4px 0px'); }, function (props) { return "transform: translate(".concat(props.offsetLeft, ", ").concat(props.offsetTop, ");"); }, OFFSET_BEFORE_SHOW, OFFSET_BEFORE_SHOW, function (props) { return (props.isButton ? DropdownContentButtonStyling : ''); }, COLORS.neutral_100, function (props) { return (props.size == Size.Large ? '320px' : props.size == Size.Medium ? '280px' : '240px'); }, function (props) { return (props.size == Size.Large ? '10px' : props.size == Size.Medium ? '8px' : '6px'); }, function (props) { return (!props.scrollable ? 'auto' : props.maxHeight ? props.maxHeight : props.size == Size.Large ? '320px' : props.size == Size.Medium ? '280px' : '240px'); });
+export var DropdownContentItemsContainer = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  > *:hover {\n    z-index: ", ";\n  }\n\n  > *:active,\n  > *.active {\n    z-index: ", ";\n  }\n\n  > *:focus {\n    z-index: ", ";\n  }\n"], ["\n  > *:hover {\n    z-index: ", ";\n  }\n\n  > *:active,\n  > *.active {\n    z-index: ", ";\n  }\n\n  > *:focus {\n    z-index: ", ";\n  }\n"])), Z_INDEXES.hover, Z_INDEXES.active, Z_INDEXES.focus);
+export var DropdownContentListContainer = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  ", "\n  ", "\n  ", "\n  ", "\n  div.divider {\n    display: block;\n    width: calc(100% - 40px);\n    margin-left: 16px;\n    border-top: 1px solid #e5e5e5;\n    position: absolute;\n    top: 0px;\n  }\n\n  ", " {\n    padding-top: ", ";\n    padding-bottom: ", ";\n\n    word-break: break-word;\n  }\n\n  *:focus {\n    outline: none !important;\n  }\n\n  ", "\n"], ["\n  ", "\n  ", "\n  ", "\n  ", "\n  div.divider {\n    display: block;\n    width: calc(100% - 40px);\n    margin-left: 16px;\n    border-top: 1px solid #e5e5e5;\n    position: absolute;\n    top: 0px;\n  }\n\n  ", " {\n    padding-top: ", ";\n    padding-bottom: ", ";\n\n    word-break: break-word;\n  }\n\n  *:focus {\n    outline: none !important;\n  }\n\n  ", "\n"])), function (props) { return (props.scrollable ? 'overflow-y: scroll;' : ''); }, function (props) { return (props.scrollable ? 'margin-right: 6px;' : ''); }, function (props) { return (props.scrollable ? 'padding-right: 6px;' : ''); }, function (props) { return (props.itemsType != 'normal' ? 'margin-left: 4px;' : ''); }, DropdownContentItemsContainer, function (props) { return (props.size == Size.Large ? '8px' : props.size == Size.Medium ? '4px' : '0px'); }, function (props) { return (props.size == Size.Large ? '8px' : props.size == Size.Medium ? '4px' : '0px'); }, scrollBarStyling(Size.Small));
+var DropdownContentMenuContentContainer = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  h1,\n  h2,\n  h3 {\n    margin-block-start: 0px;\n    margin-block-end: 0px;\n    ", "\n    ", "\n    ", "\n    padding: ", ";\n  }\n\n  p {\n    margin-block-start: 0px;\n    margin-block-end: 0px;\n    ", "\n    ", "\n    ", "\n    padding: ", ";\n  }\n"], ["\n  h1,\n  h2,\n  h3 {\n    margin-block-start: 0px;\n    margin-block-end: 0px;\n    ", "\n    ", "\n    ", "\n    padding: ", ";\n  }\n\n  p {\n    margin-block-start: 0px;\n    margin-block-end: 0px;\n    ", "\n    ", "\n    ", "\n    padding: ", ";\n  }\n"])), function (props) { return props.size == Size.Large && ComponentXLStyling(ComponentTextStyle.Bold, COLORS.neutral_500); }, function (props) { return props.size == Size.Medium && ComponentLStyling(ComponentTextStyle.Bold, COLORS.neutral_500); }, function (props) { return (props.size == Size.Small || !props.size) && ComponentMStyling(ComponentTextStyle.Bold, COLORS.neutral_500); }, function (props) { return (props.size == Size.Small || !props.size ? '10px 16px 6px' : props.size == Size.Medium ? '16px 24px 8px' : '16px 32px 8px'); }, function (props) { return props.size == Size.Large && ComponentLStyling(ComponentTextStyle.Regular, COLORS.neutral_500); }, function (props) { return props.size == Size.Medium && ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_500); }, function (props) { return (props.size == Size.Small || !props.size) && ComponentSStyling(ComponentTextStyle.Regular, COLORS.neutral_500); }, function (props) { return (props.size == Size.Small || !props.size ? '8px 16px' : props.size == Size.Medium ? '12px 24px' : '16px 32px'); });
+var DividerContainer = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  position: relative;\n\n  margin-top: ", ";\n\n  div.divider {\n    width: 100%;\n    margin: 0px;\n  }\n"], ["\n  position: relative;\n\n  margin-top: ", ";\n\n  div.divider {\n    width: 100%;\n    margin: 0px;\n  }\n"])), function (props) { return (props.size == Size.Large ? '16px' : props.size == Size.Medium ? '12px' : props.size == Size.Small || !props.size ? '8px' : '6px'); });
+var DropdownContentTopItemContainer = styled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  border-bottom-style: solid;\n  border-bottom-color: ", ";\n  border-bottom-width: 1px;\n  margin-right: 22px;\n"], ["\n  border-bottom-style: solid;\n  border-bottom-color: ", ";\n  border-bottom-width: 1px;\n  margin-right: 22px;\n"])), COLORS.neutral_200);
+var DropdownContentActionButtonContainer = styled.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  ", "\n  ", "\n\n  padding: ", ";\n\n  button {\n    width: 100%;\n  }\n"], ["\n  ", "\n  ", "\n\n  padding: ", ";\n\n  button {\n    width: 100%;\n  }\n"])), function (props) { return (props.scrollable ? "border-top: 1px solid  ".concat(COLORS.neutral_200, ";") : ''); }, function (props) { return (props.scrollable ? 'margin-top: 4px;' : ''); }, function (props) { return (props.size === Size.Small || !props.size ? '4px 16px 0px' : props.size === Size.Medium ? '12px 16px 8px' : '16px 16px 12px'); });
+var Overlay = styled.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  pointer-events: none;\n  z-index: ", ";\n"], ["\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  pointer-events: none;\n  z-index: ", ";\n"])), Z_INDEXES.modal);
+var DropdownContent = React.forwardRef(function (_a, ref) {
+    var _b, _c;
+    var id = _a.id, customizationProps = _a.customizationProps, alignLeft = _a.alignLeft, isButton = _a.isButton, size = _a.size, isOpen = _a.isOpen, width = _a.width, setIsOpen = _a.setIsOpen, filter = _a.filter, focused = _a.focused, setFocused = _a.setFocused, selectedValues = _a.selectedValues, setSelectedValues = _a.setSelectedValues, messageOnNoResults = _a.messageOnNoResults, outline = _a.outline, containerRef = _a.containerRef, onActiveDescendantChanged = _a.onActiveDescendantChanged, _d = _a.ariaRolesType, ariaRolesType = _d === void 0 ? 'menu' : _d;
+    var _e = React.useState(false), isUp = _e[0], setIsUp = _e[1];
+    var _f = React.useState(false), locationDefined = _f[0], setLocationDefined = _f[1];
+    var _g = React.useState({ top: '0', left: '0' }), offset = _g[0], setOffset = _g[1];
+    var dropdownContentRef = (_b = ref) !== null && _b !== void 0 ? _b : React.useRef(null);
+    if (!customizationProps.itemsType)
+        customizationProps.itemsType = 'normal';
+    if (!size)
+        size = Size.Small;
+    var itemsListRef = React.useRef(null);
+    var actionButtonRef = React.useRef(null);
+    var determineDropUp = function () {
+        var options = customizationProps.items;
+        var rect = containerRef.current.getBoundingClientRect();
+        var windowHeight = window.innerHeight;
+        var menuHeight = Math.min(MAX_MENU_HEIGHT, options.length * AVG_OPTION_HEIGHT);
+        var instOffsetWithMenu = rect.top + rect.height + menuHeight;
+        var up = instOffsetWithMenu >= windowHeight;
+        setOffset({
+            top: up ? "calc(-100% - ".concat(rect.height, "px ").concat(isButton ? '' : '- 8px', ")") : '0',
+            left: alignLeft ? "calc(-".concat(rect.width, "px)") : "calc(-100%)",
+        });
+        setIsUp(up);
+        setLocationDefined(true);
+    };
+    var setNewFocusedElement = function (index) {
+        var _a, _b, _c, _d;
+        if (outline)
+            (_a = dropdownContentRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        var newFocusedElement = elRefs[index];
+        if (onActiveDescendantChanged)
+            onActiveDescendantChanged(index == 0 ? "".concat(id, "_topitem") : "".concat(id, "_").concat(index));
+        var oldFocusedElement = focused || focused === 0 ? elRefs[focused] : null;
+        if (newFocusedElement && newFocusedElement !== oldFocusedElement) {
+            setFocused(index);
+            (_b = oldFocusedElement === null || oldFocusedElement === void 0 ? void 0 : oldFocusedElement.current) === null || _b === void 0 ? void 0 : _b.classList.remove('dropdown-hover');
+            (_c = newFocusedElement.current) === null || _c === void 0 ? void 0 : _c.classList.add('dropdown-hover');
+            (_d = newFocusedElement.current) === null || _d === void 0 ? void 0 : _d.scrollIntoView({
+                block: 'nearest',
+                inline: 'nearest',
+            });
+        }
+    };
+    var getFilteredItems = function () {
+        var filtrationString = (filter !== null && filter !== void 0 ? filter : '').toUpperCase();
+        return customizationProps.items.filter(function (x) { var _a, _b; return ((_a = x === null || x === void 0 ? void 0 : x.value) === null || _a === void 0 ? void 0 : _a.toUpperCase().includes(filtrationString)) || ((_b = x === null || x === void 0 ? void 0 : x.displayLabel) === null || _b === void 0 ? void 0 : _b.toUpperCase().includes(filtrationString)); });
+    };
+    var findNextActiveIndex = function (index, direction, items) {
+        var _a;
+        for (var i = index + direction; i > 0 && i <= items.length; i += direction) {
+            if (!((_a = items[i - 1]) === null || _a === void 0 ? void 0 : _a.disabled)) {
+                return i;
+            }
+        }
+        return index;
+    };
+    var handleKeyDown = function (e) {
+        var _a;
+        if (isOpen) {
+            if (e.key === 'ArrowUp' || e.key === 'Up') {
+                e.preventDefault();
+                var focusedNow = focused || focused === 0 ? focused : arrLength + 1;
+                if (!!focusedNow) {
+                    focusedNow = focusedNow === 1 && haveTopItem() ? 0 : findNextActiveIndex(focusedNow, -1, getFilteredItems());
+                    setNewFocusedElement(focusedNow);
+                }
+            }
+            else if (e.key === 'ArrowDown' || e.key === 'Down') {
+                e.preventDefault();
+                var focusedNow = focused;
+                focusedNow = !!focusedNow || focusedNow === 0 ? findNextActiveIndex(focusedNow, 1, getFilteredItems()) : haveTopItem() ? 0 : 1;
+                setNewFocusedElement(focusedNow);
+            }
+            else if (e.key === 'Escape' || e.key === 'Esc') {
+                setIsOpen(false);
+                setFocused(null);
+                if (onActiveDescendantChanged)
+                    onActiveDescendantChanged(undefined);
+            }
+            else if ((e.key === 'Enter' || e.key === ' ') && focused !== null && e.target !== (actionButtonRef === null || actionButtonRef === void 0 ? void 0 : actionButtonRef.current)) {
+                e.preventDefault();
+                var focusedElement = elRefs[focused];
+                if (focusedElement) {
+                    (_a = focusedElement.current) === null || _a === void 0 ? void 0 : _a.click();
+                }
+                if (onActiveDescendantChanged)
+                    onActiveDescendantChanged(undefined);
+            }
+        }
+    };
+    React.useEffect(function () {
+        document.addEventListener('keydown', handleKeyDown);
+        return function () {
+            document.removeEventListener('keydown', handleKeyDown);
+        };
+    }, []);
+    var scrollPosition = React.useRef(0);
+    var handleScroll = function () {
+        var _a;
+        scrollPosition.current = (_a = itemsListRef.current) === null || _a === void 0 ? void 0 : _a.scrollTop;
+    };
+    React.useLayoutEffect(function () {
+        var _a;
+        if (itemsListRef.current)
+            itemsListRef.current.scrollTop = (_a = scrollPosition.current) !== null && _a !== void 0 ? _a : 0;
+    }, [selectedValues]);
+    var getCorrectRef = function (ref) {
+        switch (customizationProps.itemsType) {
+            case 'normal':
+                return ref || React.createRef();
+            default:
+                return ref || React.createRef();
+        }
+    };
+    var arrLength = getFilteredItems().length;
+    var _h = React.useState([]), elRefs = _h[0], setElRefs = _h[1];
+    React.useEffect(function () {
+        if ((elRefs === null || elRefs === void 0 ? void 0 : elRefs.length) !== arrLength) {
+            setFocused(null);
+        }
+        setElRefs(function (elRefs) {
+            return Array(arrLength + 1)
+                .fill(null)
+                .map(function (_, i) { return getCorrectRef(elRefs[i]); });
+        });
+    }, [isOpen, arrLength]);
+    React.useLayoutEffect(function () {
+        isOpen && !locationDefined && determineDropUp();
+    }, [isOpen, locationDefined]);
+    var haveTopItem = function () {
+        var _a;
+        if (!customizationProps.pinTopItem)
+            return false;
+        if (customizationProps.itemsType === 'radio' && selectedValues && (selectedValues === null || selectedValues === void 0 ? void 0 : selectedValues.length) > 0)
+            return true;
+        else if (customizationProps.itemsType === 'checkbox' && (customizationProps.multiSelect || (selectedValues === null || selectedValues === void 0 ? void 0 : selectedValues.length) > 0))
+            return true;
+        else if (customizationProps.itemsType === 'normal' && ((_a = getSuggestions()) === null || _a === void 0 ? void 0 : _a.length) > 0)
+            return true;
+        return false;
+    };
+    var getSuggestions = function () {
+        return getFilteredItems().filter(function (x) { return x.suggestion; });
+    };
+    /**
+     * when dropdown opens set correct position of focused item
+     * */
+    React.useLayoutEffect(function () {
+        if (isOpen && (focused || focused === 0)) {
+            setNewFocusedElement(focused === 0 && !haveTopItem() ? 1 : focused);
+        }
+    }, [isOpen, focused]);
+    /**
+     * Reset dropdown content state on close
+     * */
+    React.useEffect(function () {
+        var _a, _b, _c, _d, _e;
+        if (!isOpen) {
+            setLocationDefined(false);
+            for (var _i = 0, elRefs_1 = elRefs; _i < elRefs_1.length; _i++) {
+                var elRef = elRefs_1[_i];
+                (_a = elRef.current) === null || _a === void 0 ? void 0 : _a.classList.remove('dropdown-hover');
+            }
+            setFocused(null);
+            if (onActiveDescendantChanged)
+                onActiveDescendantChanged(undefined);
+            (_b = dropdownContentRef.current) === null || _b === void 0 ? void 0 : _b.classList.remove('outline');
+            (_c = dropdownContentRef.current) === null || _c === void 0 ? void 0 : _c.blur();
+        }
+        else {
+            if (outline) {
+                (_d = dropdownContentRef.current) === null || _d === void 0 ? void 0 : _d.classList.add('outline');
+                (_e = dropdownContentRef.current) === null || _e === void 0 ? void 0 : _e.focus();
+            }
+        }
+    }, [isOpen, dropdownContentRef, focused, outline]);
+    /**
+     * Scroll item container to top when dropdown opens
+     * */
+    React.useEffect(function () {
+        if (isOpen && itemsListRef.current) {
+            itemsListRef.current.scrollTop = 0;
+        }
+    }, [isOpen]);
+    React.useEffect(function () {
+        if (isOpen) {
+            var observer_1 = new IntersectionObserver(function (entries) {
+                var _a;
+                if (!entries[0].isIntersecting) {
+                    setIsOpen(false);
+                    //@ts-ignore
+                    (_a = document === null || document === void 0 ? void 0 : document.activeElement) === null || _a === void 0 ? void 0 : _a.blur();
+                }
+            }, { threshold: [0], rootMargin: '8px' });
+            observer_1.observe(containerRef.current);
+            calculateOffset();
+            window.addEventListener('scroll', calculateOffset, true);
+            window.addEventListener('resize', calculateOffset);
+            return function () {
+                observer_1.disconnect();
+                window.removeEventListener('scroll', calculateOffset, true);
+                window.removeEventListener('resize', calculateOffset);
+            };
+        }
+        return function () { };
+    }, [isOpen]);
+    var handleItemClick = function (selected, item) {
+        var newValue = [];
+        if (customizationProps.multiSelect) {
+            if (selected)
+                newValue = __spreadArray(__spreadArray([], selectedValues, true), [item.value], false);
+            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 () {
+        var _a, _b, _c, _d;
+        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] ? (_b = (_a = customizationProps.items) === null || _a === void 0 ? void 0 : _a.find(function (c) { return c.value === selectedValues[0]; })) === null || _b === void 0 ? void 0 : _b.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 (React.createElement(DropdownContentTopItemContainer, { size: size },
+            customizationProps.itemsType === 'radio' && (React.createElement(RadioButton, { ref: elRefs[0], role: 'menuitemradio', iconPointerEventsTransparent: true, onFocus: function (e) { return onActiveDescendantChanged && onActiveDescendantChanged("".concat(id, "_topitem")); }, tabIndexVal: -1, className: "".concat(focused === 0 ? 'dropdown-hover' : ''), select: function () { }, label: (_c = selectedFirst === null || selectedFirst === void 0 ? void 0 : selectedFirst.displayLabel) !== null && _c !== void 0 ? _c : selectedFirst === null || selectedFirst === void 0 ? void 0 : selectedFirst.value, size: size, id: "".concat(id, "_topitem"), selected: true })),
+            customizationProps.itemsType === 'checkbox' && (React.createElement(Checkbox, { ref: elRefs[0], role: 'menuitemcheckbox', tabIndexVal: -1, className: "".concat(focused === 0 ? 'dropdown-hover' : ''), select: function (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);
+                }, onFocus: function (e) { return onActiveDescendantChanged && onActiveDescendantChanged("".concat(id, "_topitem")); }, 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' : (_d = selectedFirst === null || selectedFirst === void 0 ? void 0 : selectedFirst.displayLabel) !== null && _d !== void 0 ? _d : selectedFirst === null || selectedFirst === void 0 ? void 0 : selectedFirst.value, selected: !customizationProps.multiSelect || allSelected })),
+            customizationProps.itemsType === 'normal' && (React.createElement(React.Fragment, null, suggestions.map(function (x) { return (React.createElement(MenuItem, { role: ariaRolesType == 'input' ? 'option' : 'menu', key: "".concat(id, "_topitem_").concat(x.value), item: x, size: size, active: false, tabIndex: -1, onFocus: function (e) { return onActiveDescendantChanged && onActiveDescendantChanged("".concat(id, "_topitem")); }, className: "".concat(focused === 0 ? 'dropdown-hover' : ''), ref: elRefs[0], id: "".concat(id, "_topitem"), onClickHandler: function (e) {
+                    e.stopPropagation();
+                    customizationProps.onValueUpdate([x.value]);
+                    setSelectedValues([x.value]);
+                    setIsOpen(false);
+                    setFocused(null);
+                } })); })))));
+    };
+    var getElements = function (messageOnNoResults, size) {
+        if (getFilteredItems().length === 0) {
+            return React.createElement(MenuItem, { item: { value: messageOnNoResults, disabled: true }, size: size, id: "noResultsFound", active: false, onClickHandler: function (e) { } });
+        }
+        return (React.createElement(DropdownContentItemsContainer, { size: size }, getFilteredItems()
+            .filter(function (x) { return x && (customizationProps.itemsType != 'normal' || !x.suggestion); })
+            .map(function (item, index) {
+            var _a, _b;
+            return (React.createElement(React.Fragment, { key: "key_".concat(id, "_").concat(item.value) },
+                item.customContent,
+                !item.customContent && customizationProps.itemsType == 'radio' && (React.createElement(RadioButton, { role: 'menuitemradio', select: function (selected) { return handleItemClick(selected, item); }, ref: elRefs[index + 1], size: size, tabIndexVal: -1, className: "".concat(index + 1 === focused ? 'dropdown-hover' : ''), iconPointerEventsTransparent: true, disabled: item === null || item === void 0 ? void 0 : item.disabled, key: "key_".concat(id, "_").concat(index + 1), onFocus: function (e) { return onActiveDescendantChanged && onActiveDescendantChanged("".concat(id, "_").concat(index + 1)); }, id: "".concat(id, "_").concat(index + 1), label: (_a = item.displayLabel) !== null && _a !== void 0 ? _a : item.value, selected: selectedValues === null || selectedValues === void 0 ? void 0 : selectedValues.includes(item.value) })),
+                !item.customContent && customizationProps.itemsType == 'checkbox' && (React.createElement(Checkbox, { role: 'menuitemcheckbox', select: function (selected) { return handleItemClick(selected, item); }, iconPointerEventsTransparent: true, disabled: item === null || item === void 0 ? void 0 : item.disabled, className: "".concat(index + 1 === focused ? 'dropdown-hover' : ''), ref: elRefs[index + 1], size: size, tabIndexVal: -1, key: "key_".concat(id, "_").concat(index + 1), onFocus: function (e) { return onActiveDescendantChanged && onActiveDescendantChanged("".concat(id, "_").concat(index + 1)); }, id: "".concat(id, "_").concat(index + 1), label: (_b = item.displayLabel) !== null && _b !== void 0 ? _b : item.value, selected: selectedValues === null || selectedValues === void 0 ? void 0 : selectedValues.includes(item.value) })),
+                !item.customContent && (customizationProps.itemsType == 'normal' || !customizationProps.itemsType) && (React.createElement(MenuItem, { role: ariaRolesType == 'input' ? 'option' : 'menu', key: "key_".concat(id, "_").concat(index + 1), id: "".concat(id, "_").concat(index + 1), item: item, tabIndex: -1, className: "".concat(index + 1 === focused ? 'dropdown-hover' : ''), size: size, onFocus: function (e) { return onActiveDescendantChanged && onActiveDescendantChanged("".concat(id, "_").concat(index + 1)); }, active: selectedValues === null || selectedValues === void 0 ? void 0 : selectedValues.includes(item.value), ref: elRefs[index + 1], onClickHandler: function (e) {
+                        e.stopPropagation();
+                        customizationProps.onValueUpdate([item.value]);
+                        setSelectedValues([item.value]);
+                        setIsOpen(false);
+                        setFocused(null);
+                    } }))));
+        })));
+    };
+    var calculateOffset = function () {
+        var _a;
+        var rect = (_a = containerRef === null || containerRef === void 0 ? void 0 : containerRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+        if (rect) {
+            dropdownContentRef.current.style.left = "".concat(rect.x + rect.width, "px");
+            dropdownContentRef.current.style.top = "".concat(rect.y + rect.height, "px");
+            dropdownContentRef.current.style.width = width !== null && width !== void 0 ? width : "".concat(rect.width, "px");
+        }
+        determineDropUp();
+    };
+    var cls = "".concat(isOpen ? 'show' : '', " ").concat(isOpen && outline ? 'outline' : '', " ").concat(locationDefined ? (isUp ? 'up' : 'down') : '');
+    return (React.createElement(Overlay, null,
+        React.createElement(DropdownContentContainer, { role: ariaRolesType == "menu" ? "menu" : "optionlist", ref: dropdownContentRef, size: size, offsetTop: offset.top, id: id, offsetLeft: offset.left, tabIndex: -1, isButton: isButton, alignLeft: alignLeft, scrollable: customizationProps.scrollable, maxHeight: customizationProps.maxHeight, className: cls },
+            React.createElement(DropdownContentListContainer, { role: "group", size: size, itemsType: customizationProps.itemsType, onScroll: handleScroll, ref: itemsListRef, outline: outline, scrollable: customizationProps.scrollable },
+                customizationProps.menuContent && (React.createElement(DropdownContentMenuContentContainer, { size: size },
+                    customizationProps.menuContent,
+                    React.createElement(DividerContainer, { size: size },
+                        React.createElement("div", { className: "divider" })))),
+                customizationProps.pinTopItem && getTopItem(),
+                getElements(messageOnNoResults, size)),
+            customizationProps.action && customizationProps.actionLabel && (React.createElement(DropdownContentActionButtonContainer, { size: size, scrollable: customizationProps.scrollable },
+                React.createElement(Button, { width: "100%", role: "menuitem", icon: customizationProps.actionIcon, ref: actionButtonRef, loading: customizationProps.actionLoading, disabled: customizationProps.actionDisabled, variant: (_c = customizationProps.actionVariant) !== null && _c !== void 0 ? _c : 'primary', size: size, onClick: function () { return customizationProps.action() && setIsOpen(false); } }, customizationProps.actionLabel))))));
+});
+export default DropdownContent;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;