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

package/dist/Dropdown/DropdownContent.cjs

@@ -4,10 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.DropdownContentListContainer = exports.DropdownContentItemsContainer = exports.DropdownContentContainer = void 0;
-var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+exports.default = exports.DropdownContentListContainer = exports.DropdownContentItemsContainer = exports.DropdownContentContainer = void 0;
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _react = _interopRequireDefault(require("react"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
@@ -20,252 +17,302 @@ var _InputFields = require("../InputFields");
 var _zIndexes = require("../styles/z-indexes");
 var _MenuItem = _interopRequireDefault(require("../MenuItem/MenuItem"));
 var _jsxRuntime = require("react/jsx-runtime");
-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; }
-var MAX_MENU_HEIGHT = 240;
-var AVG_OPTION_HEIGHT = 48;
-var OFFSET_BEFORE_SHOW = 1000000;
-var DropdownContentContainer = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\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"])), function (props) {
-  return _styles.COLORS.getColor('white', props.theme);
-}, _zIndexes.Z_INDEXES.dropdown, function (props) {
-  return props.$isButton ? '-4px' : '4px 0px';
-}, function (props) {
-  return "transform: translate(".concat(props.$offsetLeft, ", ").concat(props.$offsetTop, ");");
-}, function (props) {
-  return props.$isButton ? _CommonStyling.DropdownContentButtonStyling : '';
-}, function (props) {
-  return _styles.COLORS.getColor('neutral_100', props.theme);
-}, function (props) {
-  return props.$size == _types.Size.Large ? '320px' : props.$size == _types.Size.Medium ? '280px' : '240px';
-}, function (props) {
-  return props.$size == _types.Size.Large ? '10px' : props.$size == _types.Size.Medium ? '8px' : '6px';
-}, function (props) {
-  return !props.$scrollable ? 'auto' : props.$maxHeight ? props.$maxHeight : props.$size == _types.Size.Large ? '320px' : props.$size == _types.Size.Medium ? '280px' : '240px';
-});
-exports.DropdownContentContainer = DropdownContentContainer;
-var DropdownContentItemsContainer = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  > *:hover {\n    z-index: ", ";\n  }\n\n  > *:active,\n  > *.active {\n    z-index: ", ";\n  }\n\n  > *:focus {\n    z-index: ", ";\n  }\n"])), _zIndexes.Z_INDEXES.hover, _zIndexes.Z_INDEXES.active, _zIndexes.Z_INDEXES.focus);
-exports.DropdownContentItemsContainer = DropdownContentItemsContainer;
-var DropdownContentListContainer = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\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 == _types.Size.Large ? '8px' : props.$size == _types.Size.Medium ? '4px' : '0px';
-}, function (props) {
-  return props.$size == _types.Size.Large ? '8px' : props.$size == _types.Size.Medium ? '4px' : '0px';
-}, (0, _styles.scrollBarStyling)(_types.Size.Small));
-exports.DropdownContentListContainer = DropdownContentListContainer;
-var DropdownContentMenuContentContainer = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\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 == _types.Size.Large && (0, _typography.ComponentXLStyling)(_typography.ComponentTextStyle.Bold, _styles.COLORS.getColor('neutral_500', props.theme));
-}, function (props) {
-  return props.$size == _types.Size.Medium && (0, _typography.ComponentLStyling)(_typography.ComponentTextStyle.Bold, _styles.COLORS.getColor('neutral_500', props.theme));
-}, function (props) {
-  return (props.$size == _types.Size.Small || !props.$size) && (0, _typography.ComponentMStyling)(_typography.ComponentTextStyle.Bold, _styles.COLORS.getColor('neutral_500', props.theme));
-}, function (props) {
-  return props.$size == _types.Size.Small || !props.$size ? '10px 16px 6px' : props.$size == _types.Size.Medium ? '16px 24px 8px' : '16px 32px 8px';
-}, function (props) {
-  return props.$size == _types.Size.Large && (0, _typography.ComponentLStyling)(_typography.ComponentTextStyle.Regular, _styles.COLORS.getColor('neutral_500', props.theme));
-}, function (props) {
-  return props.$size == _types.Size.Medium && (0, _typography.ComponentMStyling)(_typography.ComponentTextStyle.Regular, _styles.COLORS.getColor('neutral_500', props.theme));
-}, function (props) {
-  return (props.$size == _types.Size.Small || !props.$size) && (0, _typography.ComponentSStyling)(_typography.ComponentTextStyle.Regular, _styles.COLORS.getColor('neutral_500', props.theme));
-}, function (props) {
-  return props.$size == _types.Size.Small || !props.$size ? '8px 16px' : props.$size == _types.Size.Medium ? '12px 24px' : '16px 32px';
-});
-var DividerContainer = _styledComponents["default"].div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n  position: relative;\n\n  margin-top: ", ";\n\n  div.divider {\n    width: 100%;\n    margin: 0px;\n  }\n"])), function (props) {
-  return props.$size == _types.Size.Large ? '16px' : props.$size == _types.Size.Medium ? '12px' : props.$size == _types.Size.Small || !props.$size ? '8px' : '6px';
-});
-var DropdownContentTopItemContainer = _styledComponents["default"].div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["\n  border-bottom-style: solid;\n  border-bottom-color: ", ";\n  border-bottom-width: 1px;\n  margin-right: 22px;\n"])), function (props) {
-  return _styles.COLORS.getColor('neutral_200', props.theme);
-});
-var DropdownContentActionButtonContainer = _styledComponents["default"].div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["\n  ", "\n  ", "\n\n  padding: ", ";\n\n  button {\n    width: 100%;\n  }\n"])), function (props) {
-  return props.$scrollable ? "border-top: 1px solid  ".concat(_styles.COLORS.getColor('neutral_200', props.theme), ";") : '';
-}, function (props) {
-  return props.$scrollable ? 'margin-top: 4px;' : '';
-}, function (props) {
-  return props.$size === _types.Size.Small || !props.$size ? '4px 16px 0px' : props.$size === _types.Size.Medium ? '12px 16px 8px' : '16px 16px 12px';
-});
-var Overlay = _styledComponents["default"].div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["\n  position: relative;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  pointer-events: none;\n  z-index: ", ";\n"])), _zIndexes.Z_INDEXES.modal);
-var DropdownContent = /*#__PURE__*/_react["default"].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["default"].useState(false),
-    _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
-    isUp = _React$useState2[0],
-    setIsUp = _React$useState2[1];
-  var _React$useState3 = _react["default"].useState(false),
-    _React$useState4 = (0, _slicedToArray2["default"])(_React$useState3, 2),
-    locationDefined = _React$useState4[0],
-    setLocationDefined = _React$useState4[1];
-  var _React$useState5 = _react["default"].useState({
-      top: '0',
-      left: '0'
-    }),
-    _React$useState6 = (0, _slicedToArray2["default"])(_React$useState5, 2),
-    offset = _React$useState6[0],
-    setOffset = _React$useState6[1];
-  var dropdownContentRef = (_ref2 = ref) !== null && _ref2 !== void 0 ? _ref2 : _react["default"].useRef(null);
+const MAX_MENU_HEIGHT = 240;
+const AVG_OPTION_HEIGHT = 48;
+const OFFSET_BEFORE_SHOW = 1000000;
+const DropdownContentContainer = exports.DropdownContentContainer = _styledComponents.default.div`
+  display: none;
+  pointer-events: auto;
+  position: absolute;
+  background-color: ${props => _styles.COLORS.getColor('white', props.theme)};
+
+  z-index: ${_zIndexes.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 ? _CommonStyling.DropdownContentButtonStyling : ''};
+
+  border: 1px solid ${props => _styles.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 == _types.Size.Large ? '320px' : props.$size == _types.Size.Medium ? '280px' : '240px'};
+  border-radius: ${props => props.$size == _types.Size.Large ? '10px' : props.$size == _types.Size.Medium ? '8px' : '6px'};
+
+  max-height: ${props => !props.$scrollable ? 'auto' : props.$maxHeight ? props.$maxHeight : props.$size == _types.Size.Large ? '320px' : props.$size == _types.Size.Medium ? '280px' : '240px'};
+`;
+const DropdownContentItemsContainer = exports.DropdownContentItemsContainer = _styledComponents.default.div`
+  > *:hover {
+    z-index: ${_zIndexes.Z_INDEXES.hover};
+  }
+
+  > *:active,
+  > *.active {
+    z-index: ${_zIndexes.Z_INDEXES.active};
+  }
+
+  > *:focus {
+    z-index: ${_zIndexes.Z_INDEXES.focus};
+  }
+`;
+const DropdownContentListContainer = exports.DropdownContentListContainer = _styledComponents.default.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 == _types.Size.Large ? '8px' : props.$size == _types.Size.Medium ? '4px' : '0px'};
+    padding-bottom: ${props => props.$size == _types.Size.Large ? '8px' : props.$size == _types.Size.Medium ? '4px' : '0px'};
+
+    word-break: break-word;
+  }
+
+  *:focus {
+    outline: none !important;
+  }
+
+  ${(0, _styles.scrollBarStyling)(_types.Size.Small)}
+`;
+const DropdownContentMenuContentContainer = _styledComponents.default.div`
+  h1,
+  h2,
+  h3 {
+    margin-block-start: 0px;
+    margin-block-end: 0px;
+    ${props => props.$size == _types.Size.Large && (0, _typography.ComponentXLStyling)(_typography.ComponentTextStyle.Bold, _styles.COLORS.getColor('neutral_500', props.theme))}
+    ${props => props.$size == _types.Size.Medium && (0, _typography.ComponentLStyling)(_typography.ComponentTextStyle.Bold, _styles.COLORS.getColor('neutral_500', props.theme))}
+    ${props => (props.$size == _types.Size.Small || !props.$size) && (0, _typography.ComponentMStyling)(_typography.ComponentTextStyle.Bold, _styles.COLORS.getColor('neutral_500', props.theme))}
+    padding: ${props => props.$size == _types.Size.Small || !props.$size ? '10px 16px 6px' : props.$size == _types.Size.Medium ? '16px 24px 8px' : '16px 32px 8px'};
+  }
+
+  p {
+    margin-block-start: 0px;
+    margin-block-end: 0px;
+    ${props => props.$size == _types.Size.Large && (0, _typography.ComponentLStyling)(_typography.ComponentTextStyle.Regular, _styles.COLORS.getColor('neutral_500', props.theme))}
+    ${props => props.$size == _types.Size.Medium && (0, _typography.ComponentMStyling)(_typography.ComponentTextStyle.Regular, _styles.COLORS.getColor('neutral_500', props.theme))}
+    ${props => (props.$size == _types.Size.Small || !props.$size) && (0, _typography.ComponentSStyling)(_typography.ComponentTextStyle.Regular, _styles.COLORS.getColor('neutral_500', props.theme))}
+    padding: ${props => props.$size == _types.Size.Small || !props.$size ? '8px 16px' : props.$size == _types.Size.Medium ? '12px 24px' : '16px 32px'};
+  }
+`;
+const DividerContainer = _styledComponents.default.div`
+  position: relative;
+
+  margin-top: ${props => props.$size == _types.Size.Large ? '16px' : props.$size == _types.Size.Medium ? '12px' : props.$size == _types.Size.Small || !props.$size ? '8px' : '6px'};
+
+  div.divider {
+    width: 100%;
+    margin: 0px;
+  }
+`;
+const DropdownContentTopItemContainer = _styledComponents.default.div`
+  border-bottom-style: solid;
+  border-bottom-color: ${props => _styles.COLORS.getColor('neutral_200', props.theme)};
+  border-bottom-width: 1px;
+  margin-right: 22px;
+`;
+const DropdownContentActionButtonContainer = _styledComponents.default.div`
+  ${props => props.$scrollable ? `border-top: 1px solid  ${_styles.COLORS.getColor('neutral_200', props.theme)};` : ''}
+  ${props => props.$scrollable ? 'margin-top: 4px;' : ''}
+
+  padding: ${props => props.$size === _types.Size.Small || !props.$size ? '4px 16px 0px' : props.$size === _types.Size.Medium ? '12px 16px 8px' : '16px 16px 12px'};
+
+  button {
+    width: 100%;
+  }
+`;
+const Overlay = _styledComponents.default.div`
+  position: relative;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  z-index: ${_zIndexes.Z_INDEXES.modal};
+`;
+const DropdownContent = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+  let {
+    id,
+    customizationProps,
+    alignLeft,
+    isButton,
+    size,
+    isOpen,
+    width,
+    setIsOpen,
+    filter,
+    focused,
+    setFocused,
+    selectedValues,
+    setSelectedValues,
+    messageOnNoResults,
+    outline,
+    containerRef,
+    onActiveDescendantChanged,
+    ariaRolesType = 'menu'
+  } = _ref;
+  const [isUp, setIsUp] = _react.default.useState(false);
+  const [locationDefined, setLocationDefined] = _react.default.useState(false);
+  const [offset, setOffset] = _react.default.useState({
+    top: '0',
+    left: '0'
+  });
+  const dropdownContentRef = ref ?? _react.default.useRef(null);
   if (!customizationProps.itemsType) customizationProps.itemsType = 'normal';
   if (!size) size = _types.Size.Small;
-  var itemsListRef = _react["default"].useRef(null);
-  var actionButtonRef = _react["default"].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;
+  const itemsListRef = _react.default.useRef(null);
+  const actionButtonRef = _react.default.useRef(null);
+  const determineDropUp = () => {
+    const options = customizationProps.items;
+    const rect = containerRef.current.getBoundingClientRect();
+    const windowHeight = window.innerHeight;
+    const menuHeight = Math.min(MAX_MENU_HEIGHT, options.length * AVG_OPTION_HEIGHT);
+    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);
   };
-  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;
+  const setNewFocusedElement = index => {
+    if (outline) dropdownContentRef.current?.focus();
+    const newFocusedElement = elRefs[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 ? 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({
+      oldFocusedElement?.current?.classList.remove('dropdown-hover');
+      newFocusedElement.current?.classList.add('dropdown-hover');
+      newFocusedElement.current?.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));
-    });
+  const getFilteredItems = () => {
+    const filtrationString = (filter ?? '').toUpperCase();
+    return customizationProps.items.filter(x => x?.value?.toUpperCase().includes(filtrationString) || 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)) {
+  const findNextActiveIndex = (index, direction, items) => {
+    for (let i = index + direction; i > 0 && i <= items.length; i += direction) {
+      if (!items[i - 1]?.disabled) {
         return i;
       }
     }
     return index;
   };
-  var handleKeyDown = function handleKeyDown(e) {
+  const handleKeyDown = e => {
     if (isOpen) {
       if (e.key === 'ArrowUp' || e.key === 'Up') {
         e.preventDefault();
-        var focusedNow = focused || focused === 0 ? focused : arrLength + 1;
+        let 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);
+        let 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)) {
+      } else if ((e.key === 'Enter' || e.key === ' ') && focused !== null && e.target !== actionButtonRef?.current) {
         e.preventDefault();
-        var focusedElement = elRefs[focused];
+        const focusedElement = elRefs[focused];
         if (focusedElement) {
-          var _focusedElement$curre;
-          (_focusedElement$curre = focusedElement.current) === null || _focusedElement$curre === void 0 ? void 0 : _focusedElement$curre.click();
+          focusedElement.current?.click();
         }
         if (onActiveDescendantChanged) onActiveDescendantChanged(undefined);
       }
     }
   };
-  _react["default"].useEffect(function () {
+  _react.default.useEffect(() => {
     document.addEventListener('keydown', handleKeyDown);
-    return function () {
+    return () => {
       document.removeEventListener('keydown', handleKeyDown);
     };
   });
-  var scrollPosition = _react["default"].useRef(0);
-  var handleScroll = function handleScroll() {
-    var _itemsListRef$current;
-    scrollPosition.current = (_itemsListRef$current = itemsListRef.current) === null || _itemsListRef$current === void 0 ? void 0 : _itemsListRef$current.scrollTop;
+  const scrollPosition = _react.default.useRef(0);
+  const handleScroll = () => {
+    scrollPosition.current = itemsListRef.current?.scrollTop;
   };
-  _react["default"].useLayoutEffect(function () {
-    var _scrollPosition$curre;
-    if (itemsListRef.current) itemsListRef.current.scrollTop = (_scrollPosition$curre = scrollPosition.current) !== null && _scrollPosition$curre !== void 0 ? _scrollPosition$curre : 0;
+  _react.default.useLayoutEffect(() => {
+    if (itemsListRef.current) itemsListRef.current.scrollTop = scrollPosition.current ?? 0;
   }, [selectedValues]);
-  var getCorrectRef = function getCorrectRef(ref) {
+  const getCorrectRef = ref => {
     switch (customizationProps.itemsType) {
       case 'normal':
-        return ref || /*#__PURE__*/_react["default"].createRef();
+        return ref || /*#__PURE__*/_react.default.createRef();
       default:
-        return ref || /*#__PURE__*/_react["default"].createRef();
+        return ref || /*#__PURE__*/_react.default.createRef();
     }
   };
-  var arrLength = getFilteredItems().length;
-  var _React$useState7 = _react["default"].useState([]),
-    _React$useState8 = (0, _slicedToArray2["default"])(_React$useState7, 2),
-    elRefs = _React$useState8[0],
-    setElRefs = _React$useState8[1];
-  _react["default"].useEffect(function () {
-    if ((elRefs === null || elRefs === void 0 ? void 0 : elRefs.length) !== arrLength) {
+  const arrLength = getFilteredItems().length;
+  const [elRefs, setElRefs] = _react.default.useState([]);
+  _react.default.useEffect(() => {
+    if (elRefs?.length !== arrLength) {
       setFocused(null);
     }
-    setElRefs(function (elRefs) {
-      return Array(arrLength + 1).fill(null).map(function (_, i) {
-        return getCorrectRef(elRefs[i]);
-      });
-    });
+    setElRefs(elRefs => Array(arrLength + 1).fill(null).map((_, i) => getCorrectRef(elRefs[i])));
   }, [isOpen, arrLength]);
-  _react["default"].useLayoutEffect(function () {
+  _react.default.useLayoutEffect(() => {
     isOpen && !locationDefined && determineDropUp();
   }, [isOpen, locationDefined]);
-  var haveTopItem = function haveTopItem() {
-    var _getSuggestions;
+  const haveTopItem = () => {
     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;
   };
-  var getSuggestions = function getSuggestions() {
-    return getFilteredItems().filter(function (x) {
-      return x.suggestion;
-    });
+  const getSuggestions = () => {
+    return getFilteredItems().filter(x => x.suggestion);
   };
 
   /**
    * when dropdown opens set correct position of focused item
    * */
-  _react["default"].useLayoutEffect(function () {
+  _react.default.useLayoutEffect(() => {
     if (isOpen && (focused || focused === 0)) {
       setNewFocusedElement(focused === 0 && !haveTopItem() ? 1 : focused);
     }
@@ -274,32 +321,20 @@ var DropdownContent = /*#__PURE__*/_react["default"].forwardRef(function (_ref,
   /**
    * Reset dropdown content state on close
    * */
-  _react["default"].useEffect(function () {
+  _react.default.useEffect(() => {
     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();
+      for (let elRef of elRefs) {
+        elRef.current?.classList.remove('dropdown-hover');
       }
       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();
+      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 ? void 0 : _dropdownContentRef$c4.classList.add('outline');
-        (_dropdownContentRef$c5 = dropdownContentRef.current) === null || _dropdownContentRef$c5 === void 0 ? void 0 : _dropdownContentRef$c5.focus();
+        dropdownContentRef.current?.classList.add('outline');
+        dropdownContentRef.current?.focus();
       }
     }
   }, [isOpen, dropdownContentRef, focused, outline]);
@@ -307,19 +342,18 @@ var DropdownContent = /*#__PURE__*/_react["default"].forwardRef(function (_ref,
   /**
    * Scroll item container to top when dropdown opens
    * */
-  _react["default"].useEffect(function () {
+  _react.default.useEffect(() => {
     if (isOpen && itemsListRef.current) {
       itemsListRef.current.scrollTop = 0;
     }
   }, [isOpen]);
-  _react["default"].useEffect(function () {
+  _react.default.useEffect(() => {
     if (isOpen) {
-      var observer = new IntersectionObserver(function (entries) {
+      const 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();
+          document?.activeElement?.blur();
         }
       }, {
         threshold: [0],
@@ -329,112 +363,91 @@ var DropdownContent = /*#__PURE__*/_react["default"].forwardRef(function (_ref,
       calculateOffset();
       window.addEventListener('scroll', calculateOffset, true);
       window.addEventListener('resize', calculateOffset);
-      return function () {
+      return () => {
         observer.disconnect();
         window.removeEventListener('scroll', calculateOffset, true);
         window.removeEventListener('resize', calculateOffset);
       };
     }
-    return function () {};
+    return () => {};
   }, [isOpen]);
-  var handleItemClick = function handleItemClick(selected, item) {
-    var newValue = [];
+  const handleItemClick = (selected, item) => {
+    let newValue = [];
     if (customizationProps.multiSelect) {
-      if (selected) newValue = [].concat((0, _toConsumableArray2["default"])(selectedValues), [item.value]);else newValue = selectedValues.filter(function (x) {
-        return x != item.value;
-      });
+      if (selected) newValue = [...selectedValues, item.value];else newValue = selectedValues.filter(x => 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;
+  const getTopItem = () => {
     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;
+    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;
     if (!showTopItem) return;
-    var selectedFirst = selectedValues.length > 0 ? visibleItems.find(function (x) {
-      return x.value == selectedValues[0];
-    }) : null;
+    const selectedFirst = selectedValues.length > 0 ? visibleItems.find(x => x.value == selectedValues[0]) : null;
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)(DropdownContentTopItemContainer, {
       $size: size,
       children: [customizationProps.itemsType === 'radio' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_InputFields.RadioButton, {
         ref: elRefs[0],
         role: "menuitemradio",
         iconPointerEventsTransparent: true,
-        onFocus: function onFocus(e) {
-          return onActiveDescendantChanged && onActiveDescendantChanged("".concat(id, "_topitem"));
-        },
+        onFocus: e => onActiveDescendantChanged && onActiveDescendantChanged(`${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,
+        className: `${focused === 0 ? 'dropdown-hover' : ''}`,
+        select: () => {},
+        label: selectedFirst?.displayLabel ?? selectedFirst?.value,
         size: size,
-        id: "".concat(id, "_topitem"),
+        id: `${id}_topitem`,
         selected: true
       }), customizationProps.itemsType === 'checkbox' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_InputFields.Checkbox, {
         ref: elRefs[0],
         role: "menuitemcheckbox",
         tabIndexVal: -1,
-        className: "".concat(focused === 0 ? 'dropdown-hover' : ''),
-        select: function select(selected) {
+        className: `${focused === 0 ? 'dropdown-hover' : ''}`,
+        select: selected => {
           if (!customizationProps.multiSelect) return;
-          var newValues = selected ? visibleItems.map(function (x) {
-            return x.value;
-          }) : [];
+          const newValues = selected ? visibleItems.map(x => x.value) : [];
           setSelectedValues(newValues);
           if (customizationProps.onValueUpdate && customizationProps.onValueUpdate(newValues)) setIsOpen(false);
         },
-        onFocus: function onFocus(e) {
-          return 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__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
-        children: suggestions.map(function (x) {
-          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_MenuItem["default"], {
-            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));
-        })
+        children: suggestions.map(x => /*#__PURE__*/(0, _jsxRuntime.jsx)(_MenuItem.default, {
+          role: ariaRolesType == 'input' ? 'option' : 'menu',
+          item: x,
+          size: size,
+          active: false,
+          tabIndex: -1,
+          onFocus: e => onActiveDescendantChanged && onActiveDescendantChanged(`${id}_topitem`),
+          className: `${focused === 0 ? 'dropdown-hover' : ''}`,
+          ref: elRefs[0],
+          id: `${id}_topitem`,
+          onClickHandler: e => {
+            e.stopPropagation();
+            customizationProps.onValueUpdate([x.value]);
+            setSelectedValues([x.value]);
+            setIsOpen(false);
+            setFocused(null);
+          }
+        }, `${id}_topitem_${x.value}`))
       })]
     });
   };
-  var getElements = function getElements(messageOnNoResults, size) {
+  const getElements = (messageOnNoResults, size) => {
     if (getFilteredItems().length === 0) {
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_MenuItem["default"], {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_MenuItem.default, {
         item: {
           value: messageOnNoResults,
           disabled: true
@@ -442,83 +455,69 @@ var DropdownContent = /*#__PURE__*/_react["default"].forwardRef(function (_ref,
         size: size,
         id: "noResultsFound",
         active: false,
-        onClickHandler: function onClickHandler(e) {}
+        onClickHandler: e => {}
       });
     }
     return /*#__PURE__*/(0, _jsxRuntime.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__*/(0, _jsxRuntime.jsxs)(_react["default"].Fragment, {
+      children: getFilteredItems().filter(x => x && (customizationProps.itemsType != 'normal' || !x.suggestion)).map((item, index) => {
+        return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.default.Fragment, {
           children: [item.customContent, !item.customContent && customizationProps.itemsType == 'radio' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_InputFields.RadioButton, {
             role: "menuitemradio",
-            select: function select(selected) {
-              return handleItemClick(selected, item);
-            },
+            select: selected => handleItemClick(selected, item),
             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: 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__*/(0, _jsxRuntime.jsx)(_InputFields.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__*/(0, _jsxRuntime.jsx)(_InputFields.Checkbox, {
             role: "menuitemcheckbox",
-            select: function select(selected) {
-              return handleItemClick(selected, item);
-            },
+            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: 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__*/(0, _jsxRuntime.jsx)(_MenuItem["default"], {
+            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__*/(0, _jsxRuntime.jsx)(_MenuItem.default, {
             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: function onFocus(e) {
-              return 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: function onClickHandler(e) {
+            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));
+          }, `key_${id}_${index + 1}`)]
+        }, `key_${id}_${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();
+  const calculateOffset = () => {
+    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();
   };
-  var 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__*/(0, _jsxRuntime.jsx)(Overlay, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(DropdownContentContainer, {
       role: ariaRolesType == "menu" ? "menu" : "optionlist",
@@ -534,6 +533,7 @@ var DropdownContent = /*#__PURE__*/_react["default"].forwardRef(function (_ref,
       $maxHeight: customizationProps.maxHeight,
       className: cls,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(DropdownContentListContainer, {
+        tabIndex: -1,
         role: "group",
         $size: size,
         $itemsType: customizationProps.itemsType,
@@ -553,18 +553,16 @@ var DropdownContent = /*#__PURE__*/_react["default"].forwardRef(function (_ref,
       }), customizationProps.action && customizationProps.actionLabel && /*#__PURE__*/(0, _jsxRuntime.jsx)(DropdownContentActionButtonContainer, {
         $size: size,
         $scrollable: customizationProps.scrollable,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button["default"], {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
           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',
+          variant: customizationProps.actionVariant ?? 'primary',
           size: size,
-          onClick: function onClick() {
-            return customizationProps.action() && setIsOpen(false);
-          },
+          onClick: () => customizationProps.action() && setIsOpen(false),
           children: customizationProps.actionLabel
         })
       })]
@@ -572,47 +570,46 @@ var DropdownContent = /*#__PURE__*/_react["default"].forwardRef(function (_ref,
   });
 });
 DropdownContent.propTypes = {
-  isButton: _propTypes["default"].bool.isRequired,
-  customizationProps: _propTypes["default"].shape({
-    itemsType: _propTypes["default"].oneOf(['radio', 'checkbox', 'normal']),
-    menuContent: _propTypes["default"].node,
-    scrollable: _propTypes["default"].bool,
-    multiSelect: _propTypes["default"].bool,
-    maxHeight: _propTypes["default"].string,
-    actionLabel: _propTypes["default"].string,
-    actionIcon: _propTypes["default"].node,
-    actionLoading: _propTypes["default"].bool,
-    actionDisabled: _propTypes["default"].bool,
-    action: _propTypes["default"].func.isRequired,
-    pinTopItem: _propTypes["default"].bool,
-    onValueUpdate: _propTypes["default"].func.isRequired,
-    items: _propTypes["default"].arrayOf(_propTypes["default"].shape({
-      value: _propTypes["default"].string.isRequired,
-      displayLabel: _propTypes["default"].string,
-      noteLabel: _propTypes["default"].string,
-      suggestion: _propTypes["default"].bool,
-      showDividerAbove: _propTypes["default"].bool,
-      disabled: _propTypes["default"].bool,
-      locked: _propTypes["default"].bool,
-      icon: _propTypes["default"].node,
-      customContent: _propTypes["default"].node
+  isButton: _propTypes.default.bool.isRequired,
+  customizationProps: _propTypes.default.shape({
+    itemsType: _propTypes.default.oneOf(['radio', 'checkbox', 'normal']),
+    menuContent: _propTypes.default.node,
+    scrollable: _propTypes.default.bool,
+    multiSelect: _propTypes.default.bool,
+    maxHeight: _propTypes.default.string,
+    actionLabel: _propTypes.default.string,
+    actionIcon: _propTypes.default.node,
+    actionLoading: _propTypes.default.bool,
+    actionDisabled: _propTypes.default.bool,
+    action: _propTypes.default.func.isRequired,
+    pinTopItem: _propTypes.default.bool,
+    onValueUpdate: _propTypes.default.func.isRequired,
+    items: _propTypes.default.arrayOf(_propTypes.default.shape({
+      value: _propTypes.default.string.isRequired,
+      displayLabel: _propTypes.default.string,
+      noteLabel: _propTypes.default.string,
+      suggestion: _propTypes.default.bool,
+      showDividerAbove: _propTypes.default.bool,
+      disabled: _propTypes.default.bool,
+      locked: _propTypes.default.bool,
+      icon: _propTypes.default.node,
+      customContent: _propTypes.default.node
     })).isRequired
   }).isRequired,
-  alignLeft: _propTypes["default"].bool,
-  isOpen: _propTypes["default"].bool.isRequired,
-  setIsOpen: _propTypes["default"].func.isRequired,
-  id: _propTypes["default"].string.isRequired,
-  filter: _propTypes["default"].string.isRequired,
-  width: _propTypes["default"].string,
-  onActiveDescendantChanged: _propTypes["default"].func,
-  selectedValues: _propTypes["default"].arrayOf(_propTypes["default"].string).isRequired,
-  setSelectedValues: _propTypes["default"].func.isRequired,
-  messageOnNoResults: _propTypes["default"].string.isRequired,
-  focused: _propTypes["default"].oneOfType([_propTypes["default"].number, _propTypes["default"].oneOf([null])]),
-  setFocused: _propTypes["default"].func.isRequired,
-  outline: _propTypes["default"].bool,
-  ariaRolesType: _propTypes["default"].oneOf(['input', 'menu'])
+  alignLeft: _propTypes.default.bool,
+  isOpen: _propTypes.default.bool.isRequired,
+  setIsOpen: _propTypes.default.func.isRequired,
+  id: _propTypes.default.string.isRequired,
+  filter: _propTypes.default.string.isRequired,
+  width: _propTypes.default.string,
+  onActiveDescendantChanged: _propTypes.default.func,
+  selectedValues: _propTypes.default.arrayOf(_propTypes.default.string).isRequired,
+  setSelectedValues: _propTypes.default.func.isRequired,
+  messageOnNoResults: _propTypes.default.string.isRequired,
+  focused: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.oneOf([null])]),
+  setFocused: _propTypes.default.func.isRequired,
+  outline: _propTypes.default.bool,
+  ariaRolesType: _propTypes.default.oneOf(['input', 'menu'])
 };
-var _default = DropdownContent;
-exports["default"] = _default;
+var _default = exports.default = DropdownContent;
 //# sourceMappingURL=DropdownContent.cjs.map