@laerdal/life-react-components 1.4.0 → 1.4.1-dev.11

package/dist/esm/Dropdown/DropdownContent.js

@@ -1,5 +1,11 @@
+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";
-import React, { useLayoutEffect, createRef } from 'react';
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
+
+import React from 'react';
 import styled from 'styled-components';
 import Button from '../Button/Button';
 import { Size } from '../types';
@@ -8,217 +14,142 @@ import { ComponentLStyling, ComponentXLStyling, ComponentMStyling, ComponentSSty
 import { COLORS } from '../styles';
 import { Checkbox, RadioButton } from '../InputFields';
 import { Z_INDEXES } from '../styles/z-indexes';
-export const DDContainer = styled.div`
-  display: none;
-  position: absolute;
-  background-color: ${COLORS.white};
-
-  width: ${props => props.width ? props.width : '100%'};
-  z-index: ${Z_INDEXES.dropdown};
-  margin: ${props => props.isButton ? '-4px' : '4px 0px'};
-
-  &.show {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-  }
-
-  &.up {
-    top: auto;
-    bottom: 100%;
-  }
-
-  ${props => props.alignLeft ? 'left: 0px;' : ''}
-
-  ${props => props.isButton ? ButtonDropdownContentStyling : ''};
-
-  border: 1px solid ${COLORS.neutral_100};
-  box-sizing: border-box;
-  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15);
-  padding-top: 4px;
-  padding-right: 0px;
-  padding-bottom: 4px;
-  padding-left: 0px;
-
-  min-width: ${props => props.size == Size.Large ? '320px' : props.size == Size.Medium ? '280px' : '240px'};
-  border-radius: ${props => props.size == Size.Large ? '10px' : props.size == Size.Medium ? '8px' : '6px'};
-
-  max-height: ${props => !props.scrollable ? 'auto' : props.maxHeight ? props.maxHeight : props.size == Size.Large ? '320px' : props.size == Size.Medium ? '280px' : '240px'};
-`;
-const ItemsContainer = styled.div`
-  > *:hover {
-    z-index: ${Z_INDEXES.hover};
-  }
-  > *:active,
-  > *.active{
-    z-index: ${Z_INDEXES.active};
-  }
-  > *:focus {
-    z-index: ${Z_INDEXES.focus};
-  }
-  
-  button.dropdownButton {
-    ${props => DropdownButtonCSS(props.size)}
-  }`;
-const ListContainer = styled.div`
-  ${props => props.scrollable ? 'overflow-y: scroll;' : ''}
-  ${props => props.itemsType != 'normal' ? 'margin-left: 4px;' : ''}
-
-
-  div.divider  {
-    display: block;
-    width: calc(100% - 40px);
-    margin-left: 16px;
-    border-top: 1px solid #e5e5e5;
-    position: absolute;
-    top: 0px;
-  }
-
-  ${ItemsContainer} {
-    padding-top: ${props => props.size == Size.Large ? '8px' : props.size == Size.Medium ? '4px' : '0px'};
-    padding-bottom: ${props => props.size == Size.Large ? '8px' : props.size == Size.Medium ? '4px' : '0px'};
-  }
-
-  /* width */
-  ::-webkit-scrollbar {
-    width: 4px;
-    margin: 0 6px;
-    cursor: pointer;
-  }
-
-  /* Track */
-  ::-webkit-scrollbar-track {
-    background: ${COLORS.neutral_100};
-    border-radius: 8px;
-  }
-
-  /* Handle */
-  ::-webkit-scrollbar-thumb {
-    background: ${COLORS.neutral_600};
-    border-radius: 8px;
-  }
-
-  /* Handle on hover */
-  ::-webkit-scrollbar-thumb:hover {
-    background: ${COLORS.neutral_500};
-  }
-`;
-const MenuContentContainer = styled.div`
-  h1, h2, h3 {
-    margin-block-start: 0px;
-    margin-block-end: 0px;
-    ${props => props.size == Size.Large && ComponentXLStyling(ComponentTextStyle.Bold, COLORS.neutral_500)}
-    ${props => props.size == Size.Medium && ComponentLStyling(ComponentTextStyle.Bold, COLORS.neutral_500)}
-    ${props => (props.size == Size.Small || !props.size) && ComponentMStyling(ComponentTextStyle.Bold, COLORS.neutral_500)}
-    padding: ${props => props.size == Size.Small || !props.size ? '10px 16px 6px' : props.size == Size.Medium ? '16px 24px 8px' : '16px 32px 8px'};
-  }
-
-  p {
-    margin-block-start: 0px;
-    margin-block-end: 0px;
-    ${props => props.size == Size.Large && ComponentLStyling(ComponentTextStyle.Regular, COLORS.neutral_500)}
-    ${props => props.size == Size.Medium && ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_500)}
-    ${props => (props.size == Size.Small || !props.size) && ComponentSStyling(ComponentTextStyle.Regular, COLORS.neutral_500)}
-    padding: ${props => props.size == Size.Small || !props.size ? '8px 16px' : props.size == Size.Medium ? '12px 24px' : '16px 32px'};
-  }
-`;
-const DividerContainer = styled.div`
-  position: relative;
-
-  margin-top: ${props => props.size == Size.Large ? '16px' : props.size == Size.Medium ? '12px' : props.size == Size.Small || !props.size ? '8px' : '6px'};
-
-  div.divider {
-    width: 100%;
-    margin: 0px;
-  }
-`;
-const TopItemContainer = styled.div`
-  border-bottom-style: solid;
-  border-bottom-color: ${COLORS.neutral_200};
-  border-bottom-width: 1px;
-  margin-right: 22px;
-
-  button {
-    ${props => DropdownButtonCSS(props.size)}
-  }
-`;
-const ActionButtonContainer = styled.div`
-  border-top-style: solid;
-  border-top-color: ${COLORS.neutral_200};
-  border-top-width: 1px;
-  
-  padding: ${props => props.size == Size.Small || !props.size ? '0px 16px' : '8px 16px'};
-
-  button {
-    width: 100%;
-  }
-`;
-const MAX_MENU_HEIGHT = 240;
-const AVG_OPTION_HEIGHT = 48;
-
-const DropdownContent = ({
-  id,
-  customizationProps,
-  alignLeft,
-  isButton,
-  size,
-  isOpen,
-  hideOnClickOutside,
-  width,
-  setIsOpen,
-  filter,
-  focused,
-  setFocused,
-  selectedValues,
-  setSelectedValues,
-  messageOnNoResults
-}) => {
-  const [isUp, setIsUp] = React.useState(false);
-  const dropdownContentRef = React.useRef(null);
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+export var DDContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: none;\n  position: absolute;\n  background-color: ", ";\n\n  width: ", ";\n  z-index: ", ";\n  margin: ", ";\n\n  &.show {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n  }\n\n  &.up {\n    top: auto;\n    bottom: 100%;\n  }\n\n  ", "\n\n  ", ";\n\n  border: 1px solid ", ";\n  box-sizing: border-box;\n  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15);\n  padding-top: 4px;\n  padding-right: 0px;\n  padding-bottom: 4px;\n  padding-left: 0px;\n\n  min-width: ", ";\n  border-radius: ", ";\n\n  max-height: ", ";\n"])), COLORS.white, function (props) {
+  return props.width ? props.width : '100%';
+}, Z_INDEXES.dropdown, function (props) {
+  return props.isButton ? '-4px' : '4px 0px';
+}, function (props) {
+  return props.alignLeft ? 'left: 0px;' : '';
+}, function (props) {
+  return props.isButton ? ButtonDropdownContentStyling : '';
+}, 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';
+});
+var ItemsContainer = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  > *:hover {\n    z-index: ", ";\n  }\n  > *:active,\n  > *.active{\n    z-index: ", ";\n  }\n  > *:focus {\n    z-index: ", ";\n  }\n  \n  button.dropdownButton {\n    ", "\n  }"])), Z_INDEXES.hover, Z_INDEXES.active, Z_INDEXES.focus, function (props) {
+  return DropdownButtonCSS(props.size);
+});
+var ListContainer = 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\n  /* width */\n  ::-webkit-scrollbar {\n    width: 4px;\n    margin: 0 6px;\n    cursor: pointer;\n  }\n\n  /* Track */\n  ::-webkit-scrollbar-track {\n    background: ", ";\n    border-radius: 8px;\n  }\n\n  /* Handle */\n  ::-webkit-scrollbar-thumb {\n    background: ", ";\n    border-radius: 8px;\n  }\n\n  /* Handle on hover */\n  ::-webkit-scrollbar-thumb:hover {\n    background: ", ";\n  }\n"])), function (props) {
+  return props.scrollable ? 'overflow-y: scroll;' : '';
+}, function (props) {
+  return props.itemsType != 'normal' ? 'margin-left: 4px;' : '';
+}, ItemsContainer, function (props) {
+  return props.size == Size.Large ? '8px' : props.size == Size.Medium ? '4px' : '0px';
+}, function (props) {
+  return props.size == Size.Large ? '8px' : props.size == Size.Medium ? '4px' : '0px';
+}, COLORS.neutral_100, COLORS.neutral_600, COLORS.neutral_500);
+var MenuContentContainer = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  h1, h2, h3 {\n    margin-block-start: 0px;\n    margin-block-end: 0px;\n    ", "\n    ", "\n    ", "\n    padding: ", ";\n  }\n\n  p {\n    margin-block-start: 0px;\n    margin-block-end: 0px;\n    ", "\n    ", "\n    ", "\n    padding: ", ";\n  }\n"])), function (props) {
+  return props.size == 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 TopItemContainer = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  border-bottom-style: solid;\n  border-bottom-color: ", ";\n  border-bottom-width: 1px;\n  margin-right: 22px;\n\n  button {\n    ", "\n  }\n"])), COLORS.neutral_200, function (props) {
+  return DropdownButtonCSS(props.size);
+});
+var ActionButtonContainer = styled.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  border-top-style: solid;\n  border-top-color: ", ";\n  border-top-width: 1px;\n  \n  padding: ", ";\n\n  button {\n    width: 100%;\n  }\n"])), COLORS.neutral_200, function (props) {
+  return props.size == Size.Small || !props.size ? '0px 16px' : '8px 16px';
+});
+var MAX_MENU_HEIGHT = 240;
+var AVG_OPTION_HEIGHT = 48;
+
+var DropdownContent = function DropdownContent(_ref) {
+  var _customizationProps$a;
+
+  var id = _ref.id,
+      customizationProps = _ref.customizationProps,
+      alignLeft = _ref.alignLeft,
+      isButton = _ref.isButton,
+      size = _ref.size,
+      isOpen = _ref.isOpen,
+      hideOnClickOutside = _ref.hideOnClickOutside,
+      width = _ref.width,
+      setIsOpen = _ref.setIsOpen,
+      filter = _ref.filter,
+      focused = _ref.focused,
+      setFocused = _ref.setFocused,
+      selectedValues = _ref.selectedValues,
+      setSelectedValues = _ref.setSelectedValues,
+      messageOnNoResults = _ref.messageOnNoResults;
+
+  var _React$useState = React.useState(false),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      isUp = _React$useState2[0],
+      setIsUp = _React$useState2[1];
+
+  var dropdownContentRef = React.useRef(null);
   if (!customizationProps.itemsType) customizationProps.itemsType = 'normal';
   if (!size) size = Size.Small;
-  const itemsListRef = React.useRef(null);
+  var itemsListRef = React.useRef(null);
 
-  const determineDropUp = () => {
-    const options = customizationProps.items;
-    const node = dropdownContentRef.current;
+  var determineDropUp = function determineDropUp() {
+    var options = customizationProps.items;
+    var node = dropdownContentRef.current;
     if (!node) return;
-    const windowHeight = window.innerHeight;
-    const menuHeight = Math.min(MAX_MENU_HEIGHT, options.length * AVG_OPTION_HEIGHT);
-    const instOffsetWithMenu = node.getBoundingClientRect().top + menuHeight;
+    var windowHeight = window.innerHeight;
+    var menuHeight = Math.min(MAX_MENU_HEIGHT, options.length * AVG_OPTION_HEIGHT);
+    var instOffsetWithMenu = node.getBoundingClientRect().top + menuHeight;
     setIsUp(instOffsetWithMenu >= windowHeight);
   };
 
-  const setNewFocusedElement = index => {
-    const newFocusedElement = elRefs[index];
+  var setNewFocusedElement = function setNewFocusedElement(index) {
+    var newFocusedElement = elRefs[index];
 
     if (newFocusedElement) {
+      var _newFocusedElement$cu;
+
       setFocused(index);
-      newFocusedElement?.current?.focus();
+      newFocusedElement === null || newFocusedElement === void 0 ? void 0 : (_newFocusedElement$cu = newFocusedElement.current) === null || _newFocusedElement$cu === void 0 ? void 0 : _newFocusedElement$cu.focus();
     }
   };
 
-  const getFilteredItems = () => {
-    const filtrationString = (filter ?? '').toUpperCase();
-    return customizationProps.items.filter(x => x?.value?.toUpperCase().includes(filtrationString) || x?.displayLabel?.toUpperCase().includes(filtrationString));
+  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));
+    });
   };
 
-  const handleKeyDown = e => {
+  var handleKeyDown = function handleKeyDown(e) {
     if (isOpen) {
       if (e.keyCode === 38) {
         e.preventDefault();
         var focusedNow = focused;
 
         if (focusedNow !== undefined && focusedNow !== null && focusedNow > 0) {
-          const filtered = getFilteredItems();
-
-          for (let i = focusedNow - 1; i > 0; i--) {
-            if (!filtered[i - 1]?.disabled) {
-              focusedNow = i;
-              break;
+          var filtered = getFilteredItems();
+          if (focusedNow == 1 && haveTopItem()) focusedNow = 0;else {
+            for (var i = focusedNow - 1; i > 0; i--) {
+              var _filtered;
+
+              if (!((_filtered = filtered[i - 1]) !== null && _filtered !== void 0 && _filtered.disabled)) {
+                focusedNow = i;
+                break;
+              }
             }
           }
-
           setNewFocusedElement(focusedNow);
         }
       } else if (e.keyCode === 40) {
@@ -226,11 +157,13 @@ const DropdownContent = ({
         var focusedNow = focused;
 
         if (focusedNow !== undefined && focusedNow !== null) {
-          const filtered = getFilteredItems();
+          var _filtered2 = getFilteredItems();
 
-          for (let i = focusedNow + 1; i <= filtered.length; i++) {
-            if (!filtered[i - 1]?.disabled) {
-              focusedNow = i;
+          for (var _i = focusedNow + 1; _i <= _filtered2.length; _i++) {
+            var _filtered3;
+
+            if (!((_filtered3 = _filtered2[_i - 1]) !== null && _filtered3 !== void 0 && _filtered3.disabled)) {
+              focusedNow = _i;
               break;
             }
           }
@@ -245,7 +178,7 @@ const DropdownContent = ({
 
         if (focusedNow !== undefined && focusedNow !== null) {
           focusedNow++;
-          const newFocusedElement = document.getElementById(`${id}_${focusedNow}`);
+          var newFocusedElement = document.getElementById("".concat(id, "_").concat(focusedNow));
 
           if (!newFocusedElement) {
             setNewFocusedElement(0);
@@ -269,8 +202,12 @@ const DropdownContent = ({
     }
   };
 
-  const handleClickOutside = e => {
-    if (hideOnClickOutside && dropdownContentRef?.current && !dropdownContentRef.current.contains(e.target) && !elRefs.some(x => x?.current?.contains(e.target))) {
+  var handleClickOutside = function handleClickOutside(e) {
+    if (hideOnClickOutside && dropdownContentRef !== null && dropdownContentRef !== void 0 && dropdownContentRef.current && !dropdownContentRef.current.contains(e.target) && !elRefs.some(function (x) {
+      var _x$current;
+
+      return x === null || x === void 0 ? void 0 : (_x$current = x.current) === null || _x$current === void 0 ? void 0 : _x$current.contains(e.target);
+    })) {
       if (isOpen) {
         setIsOpen(false);
         setFocused(null);
@@ -278,197 +215,259 @@ const DropdownContent = ({
     }
   };
 
-  React.useEffect(() => {
+  React.useEffect(function () {
     document.addEventListener('keydown', handleKeyDown);
     document.addEventListener('click', handleClickOutside);
-    return () => {
+    return function () {
       document.removeEventListener('keydown', handleKeyDown);
       document.removeEventListener('click', handleClickOutside);
     };
   });
-  const scrollPosition = React.useRef(0);
+  var scrollPosition = React.useRef(0);
+
+  var handleScroll = function handleScroll() {
+    var _itemsListRef$current;
 
-  const handleScroll = () => {
-    scrollPosition.current = itemsListRef.current?.scrollTop;
+    scrollPosition.current = (_itemsListRef$current = itemsListRef.current) === null || _itemsListRef$current === void 0 ? void 0 : _itemsListRef$current.scrollTop;
   };
 
-  useLayoutEffect(() => {
-    if (itemsListRef.current) itemsListRef.current.scrollTop = scrollPosition.current ?? 0;
+  React.useLayoutEffect(function () {
+    var _scrollPosition$curre;
+
+    if (itemsListRef.current) itemsListRef.current.scrollTop = (_scrollPosition$curre = scrollPosition.current) !== null && _scrollPosition$curre !== void 0 ? _scrollPosition$curre : 0;
   }, [selectedValues]);
 
-  const getCorrectRef = ref => {
+  var getCorrectRef = function getCorrectRef(ref) {
     switch (customizationProps.itemsType) {
       case 'normal':
-        return ref || /*#__PURE__*/createRef();
+        return ref || /*#__PURE__*/React.createRef();
 
       default:
-        return ref || /*#__PURE__*/createRef();
+        return ref || /*#__PURE__*/React.createRef();
     }
   };
 
-  const arrLength = getFilteredItems().length;
-  const [elRefs, setElRefs] = React.useState([]);
-  React.useEffect(() => {
-    setElRefs(elRefs => Array(arrLength + 1).fill(null).map((_, i) => getCorrectRef(elRefs[i])));
+  var arrLength = getFilteredItems().length;
+
+  var _React$useState3 = React.useState([]),
+      _React$useState4 = _slicedToArray(_React$useState3, 2),
+      elRefs = _React$useState4[0],
+      setElRefs = _React$useState4[1];
+
+  React.useEffect(function () {
+    setElRefs(function (elRefs) {
+      return Array(arrLength + 1).fill(null).map(function (_, i) {
+        return getCorrectRef(elRefs[i]);
+      });
+    });
   }, [isOpen, arrLength, selectedValues]);
-  React.useEffect(() => {
+  React.useEffect(function () {
     determineDropUp();
   }, [isOpen]);
 
-  const haveTopItem = () => {
-    if (customizationProps.itemsType == 'radio' && selectedValues && selectedValues?.length > 0) return true;else if (customizationProps.itemsType == 'checkbox' && (customizationProps.multiSelect || selectedValues?.length > 0)) return true;else if (customizationProps.itemsType == 'normal' && getSuggestions()?.length > 0) return true;
+  var haveTopItem = function haveTopItem() {
+    var _getSuggestions;
+
+    if (customizationProps.itemsType === 'radio' && selectedValues && (selectedValues === null || selectedValues === void 0 ? void 0 : selectedValues.length) > 0) return true;else if (customizationProps.itemsType === 'checkbox' && (customizationProps.multiSelect || (selectedValues === null || selectedValues === void 0 ? void 0 : selectedValues.length) > 0)) return true;else if (customizationProps.itemsType === 'normal' && ((_getSuggestions = getSuggestions()) === null || _getSuggestions === void 0 ? void 0 : _getSuggestions.length) > 0) return true;
     return false;
   };
 
-  const getSuggestions = () => {
-    return getFilteredItems().filter(x => x.suggestion);
+  var getSuggestions = function getSuggestions() {
+    return getFilteredItems().filter(function (x) {
+      return x.suggestion;
+    });
   };
 
-  React.useLayoutEffect(() => {
-    if (isOpen && (focused || focused == 0)) {
-      const focusThis = focused == 0 && !haveTopItem() ? 1 : focused;
+  React.useLayoutEffect(function () {
+    if (isOpen && (focused || focused === 0)) {
+      var _newFocusedElement$cu2;
+
+      var focusThis = focused == 0 && !haveTopItem() ? 1 : focused;
       if (focusThis != focused) setFocused(focusThis);
-      const newFocusedElement = elRefs[focusThis];
-      newFocusedElement?.current?.focus();
+      var newFocusedElement = elRefs[focusThis];
+      newFocusedElement === null || newFocusedElement === void 0 ? void 0 : (_newFocusedElement$cu2 = newFocusedElement.current) === null || _newFocusedElement$cu2 === void 0 ? void 0 : _newFocusedElement$cu2.focus();
     } else setFocused(null); //if the dropdown is closed, we don't to keep saved the focused item
 
   }, [isOpen]);
 
-  const handleItemClick = (selected, item) => {
-    let newValue = [];
+  var handleItemClick = function handleItemClick(selected, item) {
+    var newValue = [];
 
     if (customizationProps.multiSelect) {
-      if (selected) newValue = [...selectedValues, item.value];else newValue = selectedValues.filter(x => x != item.value);
+      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);
+
+    if (customizationProps.onValueUpdate && customizationProps.onValueUpdate(newValue)) {
+      setIsOpen(false);
+    }
   };
 
-  const getTopItem = () => {
+  var getTopItem = function getTopItem() {
+    var _customizationProps$i, _customizationProps$i2, _selectedFirst$displa, _selectedFirst$displa2;
+
     if (!customizationProps.pinTopItem) return;
-    const visibleItems = getFilteredItems();
-    const allSelected = selectedValues?.filter(x => visibleItems.some(y => y.value == x)).length == visibleItems.length;
-    let showTopItem = false;
-    const suggestions = getSuggestions();
-    const displayLabel = selectedValues[0] ? customizationProps.items?.find(c => c.value === selectedValues[0])?.displayLabel : undefined;
-    if (customizationProps.itemsType == 'radio' && selectedValues && selectedValues?.length > 0) showTopItem = true;else if (customizationProps.itemsType == 'checkbox' && (customizationProps.multiSelect || selectedValues?.length > 0)) showTopItem = true;else if (customizationProps.itemsType == 'normal' && suggestions.length > 0) showTopItem = true;
+    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;
-    const selectedFirst = selectedValues.length > 0 ? visibleItems.find(x => x.value == selectedValues[0]) : null;
-    return /*#__PURE__*/React.createElement(TopItemContainer, {
-      size: size
-    }, customizationProps.itemsType == 'radio' && /*#__PURE__*/React.createElement(RadioButton, {
-      ref: elRefs[0],
-      iconPointerEventsTransparent: true,
-      select: () => {},
-      label: selectedFirst?.displayLabel ?? selectedFirst?.value,
-      size: size,
-      id: `${id}_topitem`,
-      selected: true
-    }), customizationProps.itemsType == 'checkbox' && /*#__PURE__*/React.createElement(Checkbox, {
-      ref: elRefs[0],
-      select: selected => {
-        if (!customizationProps.multiSelect) return;
-        const newValues = selected ? visibleItems.map(x => x.value) : [];
-        setSelectedValues(newValues);
-        if (customizationProps.onValueUpdate && customizationProps.onValueUpdate(newValues)) setIsOpen(false);
-      },
-      iconPointerEventsTransparent: true,
-      semiSelected: customizationProps.multiSelect && !allSelected && selectedValues?.length > 0,
+    var selectedFirst = selectedValues.length > 0 ? visibleItems.find(function (x) {
+      return x.value == selectedValues[0];
+    }) : null;
+    return /*#__PURE__*/_jsxs(TopItemContainer, {
       size: size,
-      id: `${id}_checkbox_selectall`,
-      label: customizationProps.multiSelect ? 'Select all' : selectedFirst?.displayLabel ?? selectedFirst?.value,
-      selected: !customizationProps.multiSelect || allSelected
-    }), customizationProps.itemsType == 'normal' && /*#__PURE__*/React.createElement(React.Fragment, null, suggestions.map(x => /*#__PURE__*/React.createElement("button", {
-      ref: elRefs[0],
-      type: "button",
-      id: `${id}_topitem`,
-      key: `${id}_topitem_${x.value}`,
-      onClick: e => {
-        customizationProps.onValueUpdate([x.value]);
-        setSelectedValues([x.value]);
-        setIsOpen(false);
-        setFocused(null);
-      }
-    }, /*#__PURE__*/React.createElement("div", {
-      className: "item-content"
-    }, x?.icon && /*#__PURE__*/React.createElement("div", {
-      className: "item-icon"
-    }, x?.icon), /*#__PURE__*/React.createElement("div", {
-      className: "item-label"
-    }, x?.displayLabel ?? x?.value, x?.noteLabel && /*#__PURE__*/React.createElement("div", {
-      style: {
-        fontSize: '12px'
-      }
-    }, x.noteLabel)))))));
+      children: [customizationProps.itemsType == 'radio' && /*#__PURE__*/_jsx(RadioButton, {
+        ref: elRefs[0],
+        iconPointerEventsTransparent: true,
+        select: function select() {},
+        label: (_selectedFirst$displa = selectedFirst === null || selectedFirst === void 0 ? void 0 : selectedFirst.displayLabel) !== null && _selectedFirst$displa !== void 0 ? _selectedFirst$displa : selectedFirst === null || selectedFirst === void 0 ? void 0 : selectedFirst.value,
+        size: size,
+        id: "".concat(id, "_topitem"),
+        selected: true
+      }), customizationProps.itemsType == 'checkbox' && /*#__PURE__*/_jsx(Checkbox, {
+        ref: elRefs[0],
+        select: function select(selected) {
+          if (!customizationProps.multiSelect) return;
+          var newValues = selected ? visibleItems.map(function (x) {
+            return x.value;
+          }) : [];
+          setSelectedValues(newValues);
+          if (customizationProps.onValueUpdate && customizationProps.onValueUpdate(newValues)) setIsOpen(false);
+        },
+        iconPointerEventsTransparent: true,
+        semiSelected: customizationProps.multiSelect && !allSelected && (selectedValues === null || selectedValues === void 0 ? void 0 : selectedValues.length) > 0,
+        size: size,
+        id: "".concat(id, "_checkbox_selectall"),
+        label: customizationProps.multiSelect ? 'Select all' : (_selectedFirst$displa2 = selectedFirst === null || selectedFirst === void 0 ? void 0 : selectedFirst.displayLabel) !== null && _selectedFirst$displa2 !== void 0 ? _selectedFirst$displa2 : selectedFirst === null || selectedFirst === void 0 ? void 0 : selectedFirst.value,
+        selected: !customizationProps.multiSelect || allSelected
+      }), customizationProps.itemsType == 'normal' && /*#__PURE__*/_jsx(_Fragment, {
+        children: suggestions.map(function (x) {
+          var _x$displayLabel2;
+
+          return /*#__PURE__*/_jsx("button", {
+            ref: elRefs[0],
+            type: "button",
+            id: "".concat(id, "_topitem"),
+            onClick: function onClick(e) {
+              customizationProps.onValueUpdate([x.value]);
+              setSelectedValues([x.value]);
+              setIsOpen(false);
+              setFocused(null);
+            },
+            children: /*#__PURE__*/_jsxs("div", {
+              className: "item-content",
+              children: [(x === null || x === void 0 ? void 0 : x.icon) && /*#__PURE__*/_jsx("div", {
+                className: "item-icon",
+                children: x === null || x === void 0 ? void 0 : x.icon
+              }), /*#__PURE__*/_jsxs("div", {
+                className: "item-label",
+                children: [(_x$displayLabel2 = x === null || x === void 0 ? void 0 : x.displayLabel) !== null && _x$displayLabel2 !== void 0 ? _x$displayLabel2 : x === null || x === void 0 ? void 0 : x.value, (x === null || x === void 0 ? void 0 : x.noteLabel) && /*#__PURE__*/_jsx("div", {
+                  style: {
+                    fontSize: '12px'
+                  },
+                  children: x.noteLabel
+                })]
+              })]
+            })
+          }, "".concat(id, "_topitem_").concat(x.value));
+        })
+      })]
+    });
   };
 
-  const getElements = () => {
+  var getElements = function getElements() {
     if (getFilteredItems().length === 0) {
-      return /*#__PURE__*/React.createElement(ItemsContainer, {
-        size: size
-      }, /*#__PURE__*/React.createElement("button", {
-        className: "dropdownButton",
-        disabled: true
-      }, /*#__PURE__*/React.createElement("span", null, messageOnNoResults)));
+      return /*#__PURE__*/_jsx(ItemsContainer, {
+        size: size,
+        children: /*#__PURE__*/_jsx("button", {
+          className: "dropdownButton",
+          disabled: true,
+          children: /*#__PURE__*/_jsx("span", {
+            children: messageOnNoResults
+          })
+        })
+      });
     }
 
-    let number = 0;
-    return /*#__PURE__*/React.createElement(ItemsContainer, {
-      size: size
-    }, getFilteredItems().filter(x => x && (customizationProps.itemsType != 'normal' || !x.suggestion)).map(item => {
-      return /*#__PURE__*/React.createElement(React.Fragment, {
-        key: `key_${id}_${item.value}`
-      }, item.customContent, !item.customContent && customizationProps.itemsType == 'radio' && /*#__PURE__*/React.createElement(RadioButton, {
-        select: selected => handleItemClick(selected, item),
-        ref: elRefs[number + 1],
-        size: size,
-        iconPointerEventsTransparent: true,
-        disabled: item?.disabled,
-        key: `key_${id}_${number++}`,
-        id: `${id}_${number + 1}`,
-        label: item.displayLabel ?? item.value,
-        selected: selectedValues?.includes(item.value)
-      }), !item.customContent && customizationProps.itemsType == 'checkbox' && /*#__PURE__*/React.createElement(Checkbox, {
-        select: selected => handleItemClick(selected, item),
-        iconPointerEventsTransparent: true,
-        disabled: item?.disabled,
-        ref: elRefs[number + 1],
-        size: size,
-        key: `key_${id}_${number++}`,
-        id: `${id}_${number + 1}`,
-        label: item.displayLabel ?? item.value,
-        selected: selectedValues?.includes(item.value)
-      }), !item.customContent && (customizationProps.itemsType == 'normal' || !customizationProps.itemsType) && /*#__PURE__*/React.createElement("button", {
-        type: "button",
-        disabled: item?.disabled,
-        ref: elRefs[number + 1],
-        onClick: e => {
-          customizationProps.onValueUpdate([item.value]);
-          setSelectedValues([item.value]);
-          setIsOpen(false);
-          setFocused(null);
-        },
-        className: 'dropdownButton ' + (item.showDividerAbove ? 'show-divider-above' : '') + ' ' + (selectedValues?.includes(item.value) ? 'active' : ''),
-        key: `key_${id}_${number++}`,
-        id: `${id}_${number + 1}`
-      }, item.showDividerAbove && /*#__PURE__*/React.createElement("div", {
-        className: "divider"
-      }), /*#__PURE__*/React.createElement("div", {
-        className: "item-content"
-      }, item.icon && /*#__PURE__*/React.createElement("div", {
-        className: "item-icon"
-      }, item.icon), /*#__PURE__*/React.createElement("div", {
-        className: "item-label"
-      }, item.displayLabel ?? item.value, item.noteLabel && /*#__PURE__*/React.createElement("div", {
-        style: {
-          fontSize: '12px'
-        }
-      }, item.noteLabel)))));
-    }));
+    var number = 0;
+    return /*#__PURE__*/_jsx(ItemsContainer, {
+      size: size,
+      children: getFilteredItems().filter(function (x) {
+        return x && (customizationProps.itemsType != 'normal' || !x.suggestion);
+      }).map(function (item) {
+        var _item$displayLabel, _item$displayLabel2, _item$displayLabel3;
+
+        return /*#__PURE__*/_jsxs(React.Fragment, {
+          children: [item.customContent, !item.customContent && customizationProps.itemsType == 'radio' && /*#__PURE__*/_jsx(RadioButton, {
+            select: function select(selected) {
+              return handleItemClick(selected, item);
+            },
+            ref: elRefs[number + 1],
+            size: size,
+            iconPointerEventsTransparent: true,
+            disabled: item === null || item === void 0 ? void 0 : item.disabled,
+            id: "".concat(id, "_").concat(number + 1),
+            label: (_item$displayLabel = item.displayLabel) !== null && _item$displayLabel !== void 0 ? _item$displayLabel : item.value,
+            selected: selectedValues === null || selectedValues === void 0 ? void 0 : selectedValues.includes(item.value)
+          }, "key_".concat(id, "_").concat(number++)), !item.customContent && customizationProps.itemsType == 'checkbox' && /*#__PURE__*/_jsx(Checkbox, {
+            select: function select(selected) {
+              return handleItemClick(selected, item);
+            },
+            iconPointerEventsTransparent: true,
+            disabled: item === null || item === void 0 ? void 0 : item.disabled,
+            ref: elRefs[number + 1],
+            size: size,
+            id: "".concat(id, "_").concat(number + 1),
+            label: (_item$displayLabel2 = item.displayLabel) !== null && _item$displayLabel2 !== void 0 ? _item$displayLabel2 : item.value,
+            selected: selectedValues === null || selectedValues === void 0 ? void 0 : selectedValues.includes(item.value)
+          }, "key_".concat(id, "_").concat(number++)), !item.customContent && (customizationProps.itemsType == 'normal' || !customizationProps.itemsType) && /*#__PURE__*/_jsxs("button", {
+            type: "button",
+            disabled: item === null || item === void 0 ? void 0 : item.disabled,
+            ref: elRefs[number + 1],
+            onClick: function onClick(e) {
+              customizationProps.onValueUpdate([item.value]);
+              setSelectedValues([item.value]);
+              setIsOpen(false);
+              setFocused(null);
+            },
+            className: 'dropdownButton ' + (item.showDividerAbove ? 'show-divider-above' : '') + ' ' + (selectedValues !== null && selectedValues !== void 0 && selectedValues.includes(item.value) ? 'active' : ''),
+            id: "".concat(id, "_").concat(number + 1),
+            children: [item.showDividerAbove && /*#__PURE__*/_jsx("div", {
+              className: "divider"
+            }), /*#__PURE__*/_jsxs("div", {
+              className: "item-content",
+              children: [item.icon && /*#__PURE__*/_jsx("div", {
+                className: "item-icon",
+                children: item.icon
+              }), /*#__PURE__*/_jsxs("div", {
+                className: "item-label",
+                children: [(_item$displayLabel3 = item.displayLabel) !== null && _item$displayLabel3 !== void 0 ? _item$displayLabel3 : item.value, item.noteLabel && /*#__PURE__*/_jsx("div", {
+                  style: {
+                    fontSize: '12px'
+                  },
+                  children: item.noteLabel
+                })]
+              })]
+            })]
+          }, "key_".concat(id, "_").concat(number++))]
+        }, "key_".concat(id, "_").concat(item.value));
+      })
+    });
   };
 
-  return /*#__PURE__*/React.createElement(DDContainer, {
+  return /*#__PURE__*/_jsxs(DDContainer, {
     ref: dropdownContentRef,
     size: size,
     width: width,
@@ -476,33 +475,41 @@ const DropdownContent = ({
     alignLeft: alignLeft,
     scrollable: customizationProps.scrollable,
     maxHeight: customizationProps.maxHeight,
-    className: [isOpen && 'show', isUp && 'up'].filter(e => !!e).join(' ')
-  }, /*#__PURE__*/React.createElement(ListContainer, {
-    size: size,
-    itemsType: customizationProps.itemsType,
-    onScroll: handleScroll,
-    ref: itemsListRef,
-    scrollable: customizationProps.scrollable
-  }, customizationProps.menuContent && /*#__PURE__*/React.createElement(MenuContentContainer, {
-    size: size
-  }, customizationProps.menuContent, /*#__PURE__*/React.createElement(DividerContainer, {
-    size: size
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "divider"
-  }))), customizationProps.pinTopItem && getTopItem(), getElements()), customizationProps.action && customizationProps.actionLabel && /*#__PURE__*/React.createElement(ActionButtonContainer, {
-    size: size
-  }, /*#__PURE__*/React.createElement(Button, {
-    width: "100%",
-    icon: customizationProps.actionIcon,
-    loading: customizationProps.actionLoading,
-    disabled: customizationProps.actionDisabled,
-    variant: customizationProps.actionVariant ?? 'primary',
-    size: size,
-    onClick: () => {
-      if (customizationProps.action()) //closing the dropdown if action returns 'true'
-        setIsOpen(false);
-    }
-  }, customizationProps.actionLabel)));
+    className: [isOpen && 'show', isUp && 'up'].filter(function (e) {
+      return !!e;
+    }).join(' '),
+    children: [/*#__PURE__*/_jsxs(ListContainer, {
+      size: size,
+      itemsType: customizationProps.itemsType,
+      onScroll: handleScroll,
+      ref: itemsListRef,
+      scrollable: customizationProps.scrollable,
+      children: [customizationProps.menuContent && /*#__PURE__*/_jsxs(MenuContentContainer, {
+        size: size,
+        children: [customizationProps.menuContent, /*#__PURE__*/_jsx(DividerContainer, {
+          size: size,
+          children: /*#__PURE__*/_jsx("div", {
+            className: "divider"
+          })
+        })]
+      }), customizationProps.pinTopItem && getTopItem(), getElements()]
+    }), customizationProps.action && customizationProps.actionLabel && /*#__PURE__*/_jsx(ActionButtonContainer, {
+      size: size,
+      children: /*#__PURE__*/_jsx(Button, {
+        width: "100%",
+        icon: customizationProps.actionIcon,
+        loading: customizationProps.actionLoading,
+        disabled: customizationProps.actionDisabled,
+        variant: (_customizationProps$a = customizationProps.actionVariant) !== null && _customizationProps$a !== void 0 ? _customizationProps$a : 'primary',
+        size: size,
+        onClick: function onClick() {
+          if (customizationProps.action()) //closing the dropdown if action returns 'true'
+            setIsOpen(false);
+        },
+        children: customizationProps.actionLabel
+      })
+    })]
+  });
   /*  ),
     {
       handleClickOutside: () => () => {