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

package/dist/Dropdown/DropdownContent.js

@@ -1,339 +1,605 @@
-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;
+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