@laerdal/life-react-components 5.1.0 → 6.0.0-dev.1.full

package/dist/Dropdown/DropdownContent.js

@@ -1,6 +1,4 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
 import _pt from "prop-types";
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
 import React from 'react';
 import styled from 'styled-components';
 import Button from '../Button/Button';
@@ -15,16 +13,154 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 const MAX_MENU_HEIGHT = 240;
 const AVG_OPTION_HEIGHT = 48;
 const OFFSET_BEFORE_SHOW = 1000000;
-export const 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  inset: 0px auto auto 100%;\n\n  &.show {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    &.down,\n    &.up {\n      ", "\n    }\n  }\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"])), props => COLORS.getColor('white', props.theme), Z_INDEXES.dropdown, props => props.$isButton ? '-4px' : '4px 0px', props => "transform: translate(".concat(props.$offsetLeft, ", ").concat(props.$offsetTop, ");"), props => props.$isButton ? DropdownContentButtonStyling : '', props => COLORS.getColor('neutral_100', props.theme), props => props.$size == Size.Large ? '320px' : props.$size == Size.Medium ? '280px' : '240px', props => props.$size == Size.Large ? '10px' : props.$size == Size.Medium ? '8px' : '6px', props => !props.$scrollable ? 'auto' : props.$maxHeight ? props.$maxHeight : props.$size == Size.Large ? '320px' : props.$size == Size.Medium ? '280px' : '240px');
-export const 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 const 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"])), props => props.$scrollable ? 'overflow-y: scroll;' : '', props => props.$scrollable ? 'margin-right: 6px;' : '', props => props.$scrollable ? 'padding-right: 6px;' : '', props => props.$itemsType != 'normal' ? 'margin-left: 4px;' : '', DropdownContentItemsContainer, props => props.$size == Size.Large ? '8px' : props.$size == Size.Medium ? '4px' : '0px', props => props.$size == Size.Large ? '8px' : props.$size == Size.Medium ? '4px' : '0px', scrollBarStyling(Size.Small));
-const 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"])), props => props.$size == Size.Large && ComponentXLStyling(ComponentTextStyle.Bold, COLORS.getColor('neutral_500', props.theme)), props => props.$size == Size.Medium && ComponentLStyling(ComponentTextStyle.Bold, COLORS.getColor('neutral_500', props.theme)), props => (props.$size == Size.Small || !props.$size) && ComponentMStyling(ComponentTextStyle.Bold, COLORS.getColor('neutral_500', props.theme)), props => props.$size == Size.Small || !props.$size ? '10px 16px 6px' : props.$size == Size.Medium ? '16px 24px 8px' : '16px 32px 8px', props => props.$size == Size.Large && ComponentLStyling(ComponentTextStyle.Regular, COLORS.getColor('neutral_500', props.theme)), props => props.$size == Size.Medium && ComponentMStyling(ComponentTextStyle.Regular, COLORS.getColor('neutral_500', props.theme)), props => (props.$size == Size.Small || !props.$size) && ComponentSStyling(ComponentTextStyle.Regular, COLORS.getColor('neutral_500', props.theme)), props => props.$size == Size.Small || !props.$size ? '8px 16px' : props.$size == Size.Medium ? '12px 24px' : '16px 32px');
-const 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"])), props => props.$size == Size.Large ? '16px' : props.$size == Size.Medium ? '12px' : props.$size == Size.Small || !props.$size ? '8px' : '6px');
-const 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"])), props => COLORS.getColor('neutral_200', props.theme));
-const DropdownContentActionButtonContainer = styled.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  ", "\n  ", "\n\n  padding: ", ";\n\n  button {\n    width: 100%;\n  }\n"])), props => props.$scrollable ? "border-top: 1px solid  ".concat(COLORS.getColor('neutral_200', props.theme), ";") : '', props => props.$scrollable ? 'margin-top: 4px;' : '', props => props.$size === Size.Small || !props.$size ? '4px 16px 0px' : props.$size === Size.Medium ? '12px 16px 8px' : '16px 16px 12px');
-const Overlay = styled.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  position: relative;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  pointer-events: none;\n  z-index: ", ";\n"])), Z_INDEXES.modal);
+export const DropdownContentContainer = styled.div`
+  display: none;
+  pointer-events: auto;
+  position: absolute;
+  background-color: ${props => COLORS.getColor('white', props.theme)};
+
+  z-index: ${Z_INDEXES.dropdown};
+  margin: ${props => props.$isButton ? '-4px' : '4px 0px'};
+
+  inset: 0px auto auto 100%;
+
+  &.show {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    &.down,
+    &.up {
+      ${props => `transform: translate(${props.$offsetLeft}, ${props.$offsetTop});`}
+    }
+  }
+
+  &.outline:focus:after {
+    content: '';
+    pointer-events: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    outline: 4px solid black;
+    outline-offset: 2px;
+    border-radius: 2px;
+  }
+
+  &:focus {
+    outline: none;
+  }
+
+  ${props => props.$isButton ? DropdownContentButtonStyling : ''};
+
+  border: 1px solid ${props => COLORS.getColor('neutral_100', props.theme)};
+  box-sizing: border-box;
+  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15);
+  padding: 4px 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'};
+`;
+export const DropdownContentItemsContainer = styled.div`
+  > *:hover {
+    z-index: ${Z_INDEXES.hover};
+  }
+
+  > *:active,
+  > *.active {
+    z-index: ${Z_INDEXES.active};
+  }
+
+  > *:focus {
+    z-index: ${Z_INDEXES.focus};
+  }
+`;
+export const DropdownContentListContainer = styled.div`
+  ${props => props.$scrollable ? 'overflow-y: scroll;' : ''}
+  ${props => props.$scrollable ? 'margin-right: 6px;' : ''}
+  ${props => props.$scrollable ? 'padding-right: 6px;' : ''}
+  ${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;
+  }
+
+  ${DropdownContentItemsContainer} {
+    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'};
+
+    word-break: break-word;
+  }
+
+  *:focus {
+    outline: none !important;
+  }
+
+  ${scrollBarStyling(Size.Small)}
+`;
+const DropdownContentMenuContentContainer = styled.div`
+  h1,
+  h2,
+  h3 {
+    margin-block-start: 0px;
+    margin-block-end: 0px;
+    ${props => props.$size == Size.Large && ComponentXLStyling(ComponentTextStyle.Bold, COLORS.getColor('neutral_500', props.theme))}
+    ${props => props.$size == Size.Medium && ComponentLStyling(ComponentTextStyle.Bold, COLORS.getColor('neutral_500', props.theme))}
+    ${props => (props.$size == Size.Small || !props.$size) && ComponentMStyling(ComponentTextStyle.Bold, COLORS.getColor('neutral_500', props.theme))}
+    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.getColor('neutral_500', props.theme))}
+    ${props => props.$size == Size.Medium && ComponentMStyling(ComponentTextStyle.Regular, COLORS.getColor('neutral_500', props.theme))}
+    ${props => (props.$size == Size.Small || !props.$size) && ComponentSStyling(ComponentTextStyle.Regular, COLORS.getColor('neutral_500', props.theme))}
+    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 DropdownContentTopItemContainer = styled.div`
+  border-bottom-style: solid;
+  border-bottom-color: ${props => COLORS.getColor('neutral_200', props.theme)};
+  border-bottom-width: 1px;
+  margin-right: 22px;
+`;
+const DropdownContentActionButtonContainer = styled.div`
+  ${props => props.$scrollable ? `border-top: 1px solid  ${COLORS.getColor('neutral_200', props.theme)};` : ''}
+  ${props => props.$scrollable ? 'margin-top: 4px;' : ''}
+
+  padding: ${props => props.$size === Size.Small || !props.$size ? '4px 16px 0px' : props.$size === Size.Medium ? '12px 16px 8px' : '16px 16px 12px'};
+
+  button {
+    width: 100%;
+  }
+`;
+const Overlay = styled.div`
+  position: relative;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  z-index: ${Z_INDEXES.modal};
+`;
 const DropdownContent = /*#__PURE__*/React.forwardRef((_ref, ref) => {
-  var _ref2, _customizationProps$a;
   let {
     id,
     customizationProps,
@@ -51,7 +187,7 @@ const DropdownContent = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     top: '0',
     left: '0'
   });
-  const dropdownContentRef = (_ref2 = ref) !== null && _ref2 !== void 0 ? _ref2 : React.useRef(null);
+  const dropdownContentRef = ref ?? React.useRef(null);
   if (!customizationProps.itemsType) customizationProps.itemsType = 'normal';
   if (!size) size = Size.Small;
   const itemsListRef = React.useRef(null);
@@ -64,40 +200,34 @@ const DropdownContent = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     const instOffsetWithMenu = rect.top + rect.height + menuHeight;
     const 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%)"
+      top: up ? `calc(-100% - ${rect.height}px ${isButton ? '' : '- 8px'})` : '0',
+      left: alignLeft ? `calc(-${rect.width}px)` : `calc(-100%)`
     });
     setIsUp(up);
     setLocationDefined(true);
   };
   const setNewFocusedElement = index => {
-    var _dropdownContentRef$c;
-    if (outline) (_dropdownContentRef$c = dropdownContentRef.current) === null || _dropdownContentRef$c === void 0 || _dropdownContentRef$c.focus();
+    if (outline) dropdownContentRef.current?.focus();
     const newFocusedElement = elRefs[index];
-    if (onActiveDescendantChanged) onActiveDescendantChanged(index == 0 ? "".concat(id, "_topitem") : "".concat(id, "_").concat(index));
+    if (onActiveDescendantChanged) onActiveDescendantChanged(index == 0 ? `${id}_topitem` : `${id}_${index}`);
     const 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 || (_oldFocusedElement$cu = oldFocusedElement.current) === null || _oldFocusedElement$cu === void 0 || _oldFocusedElement$cu.classList.remove('dropdown-hover');
-      (_newFocusedElement$cu = newFocusedElement.current) === null || _newFocusedElement$cu === void 0 || _newFocusedElement$cu.classList.add('dropdown-hover');
-      (_newFocusedElement$cu2 = newFocusedElement.current) === null || _newFocusedElement$cu2 === void 0 || _newFocusedElement$cu2.scrollIntoView({
+      oldFocusedElement?.current?.classList.remove('dropdown-hover');
+      newFocusedElement.current?.classList.add('dropdown-hover');
+      newFocusedElement.current?.scrollIntoView({
         block: 'nearest',
         inline: 'nearest'
       });
     }
   };
   const getFilteredItems = () => {
-    const filtrationString = (filter !== null && filter !== void 0 ? filter : '').toUpperCase();
-    return customizationProps.items.filter(x => {
-      var _x$value, _x$displayLabel;
-      return (x === null || x === void 0 || (_x$value = x.value) === null || _x$value === void 0 ? void 0 : _x$value.toUpperCase().includes(filtrationString)) || (x === null || x === void 0 || (_x$displayLabel = x.displayLabel) === null || _x$displayLabel === void 0 ? void 0 : _x$displayLabel.toUpperCase().includes(filtrationString));
-    });
+    const filtrationString = (filter ?? '').toUpperCase();
+    return customizationProps.items.filter(x => x?.value?.toUpperCase().includes(filtrationString) || x?.displayLabel?.toUpperCase().includes(filtrationString));
   };
   const findNextActiveIndex = (index, direction, items) => {
     for (let i = index + direction; i > 0 && i <= items.length; i += direction) {
-      var _items;
-      if (!((_items = items[i - 1]) !== null && _items !== void 0 && _items.disabled)) {
+      if (!items[i - 1]?.disabled) {
         return i;
       }
     }
@@ -121,12 +251,11 @@ const DropdownContent = /*#__PURE__*/React.forwardRef((_ref, ref) => {
         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)) {
+      } else if ((e.key === 'Enter' || e.key === ' ') && focused !== null && e.target !== actionButtonRef?.current) {
         e.preventDefault();
         const focusedElement = elRefs[focused];
         if (focusedElement) {
-          var _focusedElement$curre;
-          (_focusedElement$curre = focusedElement.current) === null || _focusedElement$curre === void 0 || _focusedElement$curre.click();
+          focusedElement.current?.click();
         }
         if (onActiveDescendantChanged) onActiveDescendantChanged(undefined);
       }
@@ -140,12 +269,10 @@ const DropdownContent = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   });
   const scrollPosition = React.useRef(0);
   const handleScroll = () => {
-    var _itemsListRef$current;
-    scrollPosition.current = (_itemsListRef$current = itemsListRef.current) === null || _itemsListRef$current === void 0 ? void 0 : _itemsListRef$current.scrollTop;
+    scrollPosition.current = itemsListRef.current?.scrollTop;
   };
   React.useLayoutEffect(() => {
-    var _scrollPosition$curre;
-    if (itemsListRef.current) itemsListRef.current.scrollTop = (_scrollPosition$curre = scrollPosition.current) !== null && _scrollPosition$curre !== void 0 ? _scrollPosition$curre : 0;
+    if (itemsListRef.current) itemsListRef.current.scrollTop = scrollPosition.current ?? 0;
   }, [selectedValues]);
   const getCorrectRef = ref => {
     switch (customizationProps.itemsType) {
@@ -158,7 +285,7 @@ const DropdownContent = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   const arrLength = getFilteredItems().length;
   const [elRefs, setElRefs] = React.useState([]);
   React.useEffect(() => {
-    if ((elRefs === null || elRefs === void 0 ? void 0 : elRefs.length) !== arrLength) {
+    if (elRefs?.length !== arrLength) {
       setFocused(null);
     }
     setElRefs(elRefs => Array(arrLength + 1).fill(null).map((_, i) => getCorrectRef(elRefs[i])));
@@ -167,9 +294,8 @@ const DropdownContent = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     isOpen && !locationDefined && determineDropUp();
   }, [isOpen, locationDefined]);
   const 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;
+    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;
     return false;
   };
   const getSuggestions = () => {
@@ -190,21 +316,18 @@ const DropdownContent = /*#__PURE__*/React.forwardRef((_ref, ref) => {
    * */
   React.useEffect(() => {
     if (!isOpen) {
-      var _dropdownContentRef$c2, _dropdownContentRef$c3;
       setLocationDefined(false);
       for (let elRef of elRefs) {
-        var _elRef$current;
-        (_elRef$current = elRef.current) === null || _elRef$current === void 0 || _elRef$current.classList.remove('dropdown-hover');
+        elRef.current?.classList.remove('dropdown-hover');
       }
       setFocused(null);
       if (onActiveDescendantChanged) onActiveDescendantChanged(undefined);
-      (_dropdownContentRef$c2 = dropdownContentRef.current) === null || _dropdownContentRef$c2 === void 0 || _dropdownContentRef$c2.classList.remove('outline');
-      (_dropdownContentRef$c3 = dropdownContentRef.current) === null || _dropdownContentRef$c3 === void 0 || _dropdownContentRef$c3.blur();
+      dropdownContentRef.current?.classList.remove('outline');
+      dropdownContentRef.current?.blur();
     } else {
       if (outline) {
-        var _dropdownContentRef$c4, _dropdownContentRef$c5;
-        (_dropdownContentRef$c4 = dropdownContentRef.current) === null || _dropdownContentRef$c4 === void 0 || _dropdownContentRef$c4.classList.add('outline');
-        (_dropdownContentRef$c5 = dropdownContentRef.current) === null || _dropdownContentRef$c5 === void 0 || _dropdownContentRef$c5.focus();
+        dropdownContentRef.current?.classList.add('outline');
+        dropdownContentRef.current?.focus();
       }
     }
   }, [isOpen, dropdownContentRef, focused, outline]);
@@ -221,10 +344,9 @@ const DropdownContent = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     if (isOpen) {
       const observer = new IntersectionObserver(function (entries) {
         if (!entries[0].isIntersecting) {
-          var _document;
           setIsOpen(false);
           //@ts-ignore
-          (_document = document) === null || _document === void 0 || (_document = _document.activeElement) === null || _document === void 0 || _document.blur();
+          document?.activeElement?.blur();
         }
       }, {
         threshold: [0],
@@ -253,14 +375,13 @@ const DropdownContent = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     }
   };
   const getTopItem = () => {
-    var _customizationProps$i, _selectedFirst$displa, _selectedFirst$displa2;
     if (!customizationProps.pinTopItem) return;
     const visibleItems = getFilteredItems();
-    const allSelected = (selectedValues === null || selectedValues === void 0 ? void 0 : selectedValues.filter(x => visibleItems.some(y => y.value == x)).length) == visibleItems.length;
+    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$i = customizationProps.items) === null || _customizationProps$i === void 0 || (_customizationProps$i = _customizationProps$i.find(c => c.value === selectedValues[0])) === null || _customizationProps$i === void 0 ? void 0 : _customizationProps$i.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;
+    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;
     if (!showTopItem) return;
     const selectedFirst = selectedValues.length > 0 ? visibleItems.find(x => x.value == selectedValues[0]) : null;
     return /*#__PURE__*/_jsxs(DropdownContentTopItemContainer, {
@@ -269,31 +390,31 @@ const DropdownContent = /*#__PURE__*/React.forwardRef((_ref, ref) => {
         ref: elRefs[0],
         role: "menuitemradio",
         iconPointerEventsTransparent: true,
-        onFocus: e => onActiveDescendantChanged && onActiveDescendantChanged("".concat(id, "_topitem")),
+        onFocus: e => onActiveDescendantChanged && onActiveDescendantChanged(`${id}_topitem`),
         tabIndexVal: -1,
-        className: "".concat(focused === 0 ? 'dropdown-hover' : ''),
+        className: `${focused === 0 ? 'dropdown-hover' : ''}`,
         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,
+        label: selectedFirst?.displayLabel ?? selectedFirst?.value,
         size: size,
-        id: "".concat(id, "_topitem"),
+        id: `${id}_topitem`,
         selected: true
       }), customizationProps.itemsType === 'checkbox' && /*#__PURE__*/_jsx(Checkbox, {
         ref: elRefs[0],
         role: "menuitemcheckbox",
         tabIndexVal: -1,
-        className: "".concat(focused === 0 ? 'dropdown-hover' : ''),
+        className: `${focused === 0 ? 'dropdown-hover' : ''}`,
         select: selected => {
           if (!customizationProps.multiSelect) return;
           const newValues = selected ? visibleItems.map(x => x.value) : [];
           setSelectedValues(newValues);
           if (customizationProps.onValueUpdate && customizationProps.onValueUpdate(newValues)) setIsOpen(false);
         },
-        onFocus: e => onActiveDescendantChanged && onActiveDescendantChanged("".concat(id, "_topitem")),
+        onFocus: e => onActiveDescendantChanged && onActiveDescendantChanged(`${id}_topitem`),
         iconPointerEventsTransparent: true,
-        semiSelected: customizationProps.multiSelect && !allSelected && (selectedValues === null || selectedValues === void 0 ? void 0 : selectedValues.length) > 0,
+        semiSelected: customizationProps.multiSelect && !allSelected && 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,
+        id: `${id}_checkbox_selectall`,
+        label: customizationProps.multiSelect ? 'Select all' : selectedFirst?.displayLabel ?? selectedFirst?.value,
         selected: !customizationProps.multiSelect || allSelected
       }), customizationProps.itemsType === 'normal' && /*#__PURE__*/_jsx(_Fragment, {
         children: suggestions.map(x => /*#__PURE__*/_jsx(MenuItem, {
@@ -302,10 +423,10 @@ const DropdownContent = /*#__PURE__*/React.forwardRef((_ref, ref) => {
           size: size,
           active: false,
           tabIndex: -1,
-          onFocus: e => onActiveDescendantChanged && onActiveDescendantChanged("".concat(id, "_topitem")),
-          className: "".concat(focused === 0 ? 'dropdown-hover' : ''),
+          onFocus: e => onActiveDescendantChanged && onActiveDescendantChanged(`${id}_topitem`),
+          className: `${focused === 0 ? 'dropdown-hover' : ''}`,
           ref: elRefs[0],
-          id: "".concat(id, "_topitem"),
+          id: `${id}_topitem`,
           onClickHandler: e => {
             e.stopPropagation();
             customizationProps.onValueUpdate([x.value]);
@@ -313,7 +434,7 @@ const DropdownContent = /*#__PURE__*/React.forwardRef((_ref, ref) => {
             setIsOpen(false);
             setFocused(null);
           }
-        }, "".concat(id, "_topitem_").concat(x.value)))
+        }, `${id}_topitem_${x.value}`))
       })]
     });
   };
@@ -333,7 +454,6 @@ const DropdownContent = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     return /*#__PURE__*/_jsx(DropdownContentItemsContainer, {
       $size: size,
       children: getFilteredItems().filter(x => x && (customizationProps.itemsType != 'normal' || !x.suggestion)).map((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",
@@ -341,35 +461,35 @@ const DropdownContent = /*#__PURE__*/React.forwardRef((_ref, ref) => {
             ref: elRefs[index + 1],
             size: size,
             tabIndexVal: -1,
-            className: "".concat(index + 1 === focused ? 'dropdown-hover' : ''),
+            className: `${index + 1 === focused ? 'dropdown-hover' : ''}`,
             iconPointerEventsTransparent: true,
-            disabled: item === null || item === void 0 ? void 0 : item.disabled,
-            onFocus: e => 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, {
+            disabled: item?.disabled,
+            onFocus: e => onActiveDescendantChanged && onActiveDescendantChanged(`${id}_${index + 1}`),
+            id: `${id}_${index + 1}`,
+            label: item.displayLabel ?? item.value,
+            selected: selectedValues?.includes(item.value)
+          }, `key_${id}_${index + 1}`), !item.customContent && customizationProps.itemsType == 'checkbox' && /*#__PURE__*/_jsx(Checkbox, {
             role: "menuitemcheckbox",
             select: selected => handleItemClick(selected, item),
             iconPointerEventsTransparent: true,
-            disabled: item === null || item === void 0 ? void 0 : item.disabled,
-            className: "".concat(index + 1 === focused ? 'dropdown-hover' : ''),
+            disabled: item?.disabled,
+            className: `${index + 1 === focused ? 'dropdown-hover' : ''}`,
             ref: elRefs[index + 1],
             size: size,
             tabIndexVal: -1,
-            onFocus: e => 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, {
+            onFocus: e => onActiveDescendantChanged && onActiveDescendantChanged(`${id}_${index + 1}`),
+            id: `${id}_${index + 1}`,
+            label: item.displayLabel ?? item.value,
+            selected: selectedValues?.includes(item.value)
+          }, `key_${id}_${index + 1}`), !item.customContent && (customizationProps.itemsType == 'normal' || !customizationProps.itemsType) && /*#__PURE__*/_jsx(MenuItem, {
             role: ariaRolesType == 'input' ? 'option' : 'menu',
-            id: "".concat(id, "_").concat(index + 1),
+            id: `${id}_${index + 1}`,
             item: item,
             tabIndex: -1,
-            className: "".concat(index + 1 === focused ? 'dropdown-hover' : ''),
+            className: `${index + 1 === focused ? 'dropdown-hover' : ''}`,
             size: size,
-            onFocus: e => onActiveDescendantChanged && onActiveDescendantChanged("".concat(id, "_").concat(index + 1)),
-            active: selectedValues === null || selectedValues === void 0 ? void 0 : selectedValues.includes(item.value),
+            onFocus: e => onActiveDescendantChanged && onActiveDescendantChanged(`${id}_${index + 1}`),
+            active: selectedValues?.includes(item.value),
             ref: elRefs[index + 1],
             onClickHandler: e => {
               e.stopPropagation();
@@ -378,20 +498,19 @@ const DropdownContent = /*#__PURE__*/React.forwardRef((_ref, ref) => {
               setIsOpen(false);
               setFocused(null);
             }
-          }, "key_".concat(id, "_").concat(index + 1))]
-        }, "key_".concat(id, "_").concat(item.value));
+          }, `key_${id}_${index + 1}`)]
+        }, `key_${id}_${item.value}`);
       })
     });
   };
   const calculateOffset = () => {
-    var _containerRef$current;
-    const rect = containerRef === null || containerRef === void 0 || (_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.getBoundingClientRect();
+    const rect = containerRef?.current?.getBoundingClientRect();
     if (rect) {
-      dropdownContentRef.current.style.width = width !== null && width !== void 0 ? width : "".concat(rect.width, "px");
+      dropdownContentRef.current.style.width = width ?? `${rect.width}px`;
     }
     determineDropUp();
   };
-  const cls = "".concat(isOpen ? 'show' : '', " ").concat(isOpen && outline ? 'outline' : '', " ").concat(locationDefined ? isUp ? 'up' : 'down' : '');
+  const cls = `${isOpen ? 'show' : ''} ${isOpen && outline ? 'outline' : ''} ${locationDefined ? isUp ? 'up' : 'down' : ''}`;
   return /*#__PURE__*/_jsx(Overlay, {
     children: /*#__PURE__*/_jsxs(DropdownContentContainer, {
       role: ariaRolesType == "menu" ? "menu" : "optionlist",
@@ -407,6 +526,7 @@ const DropdownContent = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       $maxHeight: customizationProps.maxHeight,
       className: cls,
       children: [/*#__PURE__*/_jsxs(DropdownContentListContainer, {
+        tabIndex: -1,
         role: "group",
         $size: size,
         $itemsType: customizationProps.itemsType,
@@ -433,7 +553,7 @@ const DropdownContent = /*#__PURE__*/React.forwardRef((_ref, ref) => {
           ref: actionButtonRef,
           loading: customizationProps.actionLoading,
           disabled: customizationProps.actionDisabled,
-          variant: (_customizationProps$a = customizationProps.actionVariant) !== null && _customizationProps$a !== void 0 ? _customizationProps$a : 'primary',
+          variant: customizationProps.actionVariant ?? 'primary',
           size: size,
           onClick: () => customizationProps.action() && setIsOpen(false),
           children: customizationProps.actionLabel