@laerdal/life-react-components 5.0.9 → 5.1.0

package/dist/Dropdown/DropdownContent.js

@@ -1,11 +1,6 @@
-import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
 import _pt from "prop-types";
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
-function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t["return"] || t["return"](); } finally { if (u) throw o; } } }; }
-function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
-function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
 import React from 'react';
 import styled from 'styled-components';
 import Button from '../Button/Button';
@@ -16,122 +11,58 @@ import { COLORS, scrollBarStyling } from '../styles';
 import { Checkbox, RadioButton } from '../InputFields';
 import { Z_INDEXES } from '../styles/z-indexes';
 import MenuItem from '../MenuItem/MenuItem';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Fragment as _Fragment } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-var MAX_MENU_HEIGHT = 240;
-var AVG_OPTION_HEIGHT = 48;
-var OFFSET_BEFORE_SHOW = 1000000;
-export var DropdownContentContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: none;\n  pointer-events: auto;\n  position: absolute;\n  background-color: ", ";\n\n  z-index: ", ";\n  margin: ", ";\n\n  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 COLORS.getColor('white', props.theme);
-}, 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 ? DropdownContentButtonStyling : '';
-}, function (props) {
-  return COLORS.getColor('neutral_100', props.theme);
-}, function (props) {
-  return props.$size == Size.Large ? '320px' : props.$size == Size.Medium ? '280px' : '240px';
-}, function (props) {
-  return props.$size == Size.Large ? '10px' : props.$size == Size.Medium ? '8px' : '6px';
-}, function (props) {
-  return !props.$scrollable ? 'auto' : props.$maxHeight ? props.$maxHeight : props.$size == Size.Large ? '320px' : props.$size == Size.Medium ? '280px' : '240px';
-});
-export var DropdownContentItemsContainer = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  > *:hover {\n    z-index: ", ";\n  }\n\n  > *:active,\n  > *.active {\n    z-index: ", ";\n  }\n\n  > *:focus {\n    z-index: ", ";\n  }\n"])), Z_INDEXES.hover, Z_INDEXES.active, Z_INDEXES.focus);
-export var DropdownContentListContainer = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  ", "\n  ", "\n  ", "\n  ", "\n  div.divider {\n    display: block;\n    width: calc(100% - 40px);\n    margin-left: 16px;\n    border-top: 1px solid #e5e5e5;\n    position: absolute;\n    top: 0px;\n  }\n\n  ", " {\n    padding-top: ", ";\n    padding-bottom: ", ";\n\n    word-break: break-word;\n  }\n\n  *:focus {\n    outline: none !important;\n  }\n\n  ", "\n"])), function (props) {
-  return props.$scrollable ? 'overflow-y: scroll;' : '';
-}, function (props) {
-  return props.$scrollable ? 'margin-right: 6px;' : '';
-}, function (props) {
-  return props.$scrollable ? 'padding-right: 6px;' : '';
-}, function (props) {
-  return props.$itemsType != 'normal' ? 'margin-left: 4px;' : '';
-}, DropdownContentItemsContainer, function (props) {
-  return props.$size == Size.Large ? '8px' : props.$size == Size.Medium ? '4px' : '0px';
-}, function (props) {
-  return props.$size == Size.Large ? '8px' : props.$size == Size.Medium ? '4px' : '0px';
-}, scrollBarStyling(Size.Small));
-var DropdownContentMenuContentContainer = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  h1,\n  h2,\n  h3 {\n    margin-block-start: 0px;\n    margin-block-end: 0px;\n    ", "\n    ", "\n    ", "\n    padding: ", ";\n  }\n\n  p {\n    margin-block-start: 0px;\n    margin-block-end: 0px;\n    ", "\n    ", "\n    ", "\n    padding: ", ";\n  }\n"])), function (props) {
-  return props.$size == Size.Large && ComponentXLStyling(ComponentTextStyle.Bold, COLORS.getColor('neutral_500', props.theme));
-}, function (props) {
-  return props.$size == Size.Medium && ComponentLStyling(ComponentTextStyle.Bold, COLORS.getColor('neutral_500', props.theme));
-}, function (props) {
-  return (props.$size == Size.Small || !props.$size) && ComponentMStyling(ComponentTextStyle.Bold, COLORS.getColor('neutral_500', props.theme));
-}, 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.getColor('neutral_500', props.theme));
-}, function (props) {
-  return props.$size == Size.Medium && ComponentMStyling(ComponentTextStyle.Regular, COLORS.getColor('neutral_500', props.theme));
-}, function (props) {
-  return (props.$size == Size.Small || !props.$size) && ComponentSStyling(ComponentTextStyle.Regular, COLORS.getColor('neutral_500', props.theme));
-}, function (props) {
-  return props.$size == Size.Small || !props.$size ? '8px 16px' : props.$size == Size.Medium ? '12px 24px' : '16px 32px';
-});
-var DividerContainer = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  position: relative;\n\n  margin-top: ", ";\n\n  div.divider {\n    width: 100%;\n    margin: 0px;\n  }\n"])), function (props) {
-  return props.$size == Size.Large ? '16px' : props.$size == Size.Medium ? '12px' : props.$size == Size.Small || !props.$size ? '8px' : '6px';
-});
-var DropdownContentTopItemContainer = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  border-bottom-style: solid;\n  border-bottom-color: ", ";\n  border-bottom-width: 1px;\n  margin-right: 22px;\n"])), function (props) {
-  return COLORS.getColor('neutral_200', props.theme);
-});
-var DropdownContentActionButtonContainer = styled.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  ", "\n  ", "\n\n  padding: ", ";\n\n  button {\n    width: 100%;\n  }\n"])), function (props) {
-  return props.$scrollable ? "border-top: 1px solid  ".concat(COLORS.getColor('neutral_200', props.theme), ";") : '';
-}, function (props) {
-  return props.$scrollable ? 'margin-top: 4px;' : '';
-}, function (props) {
-  return props.$size === Size.Small || !props.$size ? '4px 16px 0px' : props.$size === Size.Medium ? '12px 16px 8px' : '16px 16px 12px';
-});
-var Overlay = styled.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  position: relative;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  pointer-events: none;\n  z-index: ", ";\n"])), Z_INDEXES.modal);
-var DropdownContent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+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);
+const DropdownContent = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   var _ref2, _customizationProps$a;
-  var id = _ref.id,
-    customizationProps = _ref.customizationProps,
-    alignLeft = _ref.alignLeft,
-    isButton = _ref.isButton,
-    size = _ref.size,
-    isOpen = _ref.isOpen,
-    width = _ref.width,
-    setIsOpen = _ref.setIsOpen,
-    filter = _ref.filter,
-    focused = _ref.focused,
-    setFocused = _ref.setFocused,
-    selectedValues = _ref.selectedValues,
-    setSelectedValues = _ref.setSelectedValues,
-    messageOnNoResults = _ref.messageOnNoResults,
-    outline = _ref.outline,
-    containerRef = _ref.containerRef,
-    onActiveDescendantChanged = _ref.onActiveDescendantChanged,
-    _ref$ariaRolesType = _ref.ariaRolesType,
-    ariaRolesType = _ref$ariaRolesType === void 0 ? 'menu' : _ref$ariaRolesType;
-  var _React$useState = React.useState(false),
-    _React$useState2 = _slicedToArray(_React$useState, 2),
-    isUp = _React$useState2[0],
-    setIsUp = _React$useState2[1];
-  var _React$useState3 = React.useState(false),
-    _React$useState4 = _slicedToArray(_React$useState3, 2),
-    locationDefined = _React$useState4[0],
-    setLocationDefined = _React$useState4[1];
-  var _React$useState5 = React.useState({
-      top: '0',
-      left: '0'
-    }),
-    _React$useState6 = _slicedToArray(_React$useState5, 2),
-    offset = _React$useState6[0],
-    setOffset = _React$useState6[1];
-  var dropdownContentRef = (_ref2 = ref) !== null && _ref2 !== void 0 ? _ref2 : React.useRef(null);
+  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.useState(false);
+  const [locationDefined, setLocationDefined] = React.useState(false);
+  const [offset, setOffset] = React.useState({
+    top: '0',
+    left: '0'
+  });
+  const dropdownContentRef = (_ref2 = ref) !== null && _ref2 !== void 0 ? _ref2 : React.useRef(null);
   if (!customizationProps.itemsType) customizationProps.itemsType = 'normal';
   if (!size) size = Size.Small;
-  var itemsListRef = React.useRef(null);
-  var actionButtonRef = React.useRef(null);
-  var determineDropUp = function determineDropUp() {
-    var options = customizationProps.items;
-    var rect = containerRef.current.getBoundingClientRect();
-    var windowHeight = window.innerHeight;
-    var menuHeight = Math.min(MAX_MENU_HEIGHT, options.length * AVG_OPTION_HEIGHT);
-    var instOffsetWithMenu = rect.top + rect.height + menuHeight;
-    var up = instOffsetWithMenu >= windowHeight;
+  const itemsListRef = React.useRef(null);
+  const actionButtonRef = React.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%)"
@@ -139,32 +70,32 @@ var DropdownContent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     setIsUp(up);
     setLocationDefined(true);
   };
-  var setNewFocusedElement = function setNewFocusedElement(index) {
+  const 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 (outline) (_dropdownContentRef$c = dropdownContentRef.current) === null || _dropdownContentRef$c === void 0 || _dropdownContentRef$c.focus();
+    const newFocusedElement = elRefs[index];
     if (onActiveDescendantChanged) onActiveDescendantChanged(index == 0 ? "".concat(id, "_topitem") : "".concat(id, "_").concat(index));
-    var oldFocusedElement = focused || focused === 0 ? elRefs[focused] : null;
+    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 === 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({
         block: 'nearest',
         inline: 'nearest'
       });
     }
   };
-  var getFilteredItems = function getFilteredItems() {
-    var filtrationString = (filter !== null && filter !== void 0 ? filter : '').toUpperCase();
-    return customizationProps.items.filter(function (x) {
+  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 ? 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));
+      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));
     });
   };
-  var findNextActiveIndex = function findNextActiveIndex(index, direction, items) {
-    for (var i = index + direction; i > 0 && i <= items.length; i += direction) {
+  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)) {
         return i;
@@ -172,51 +103,51 @@ var DropdownContent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     }
     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)) {
         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$curre = focusedElement.current) === null || _focusedElement$curre === void 0 || _focusedElement$curre.click();
         }
         if (onActiveDescendantChanged) onActiveDescendantChanged(undefined);
       }
     }
   };
-  React.useEffect(function () {
+  React.useEffect(() => {
     document.addEventListener('keydown', handleKeyDown);
-    return function () {
+    return () => {
       document.removeEventListener('keydown', handleKeyDown);
     };
   });
-  var scrollPosition = React.useRef(0);
-  var handleScroll = function handleScroll() {
+  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;
   };
-  React.useLayoutEffect(function () {
+  React.useLayoutEffect(() => {
     var _scrollPosition$curre;
     if (itemsListRef.current) itemsListRef.current.scrollTop = (_scrollPosition$curre = scrollPosition.current) !== null && _scrollPosition$curre !== void 0 ? _scrollPosition$curre : 0;
   }, [selectedValues]);
-  var getCorrectRef = function getCorrectRef(ref) {
+  const getCorrectRef = ref => {
     switch (customizationProps.itemsType) {
       case 'normal':
         return ref || /*#__PURE__*/React.createRef();
@@ -224,40 +155,31 @@ var DropdownContent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
         return ref || /*#__PURE__*/React.createRef();
     }
   };
-  var arrLength = getFilteredItems().length;
-  var _React$useState7 = React.useState([]),
-    _React$useState8 = _slicedToArray(_React$useState7, 2),
-    elRefs = _React$useState8[0],
-    setElRefs = _React$useState8[1];
-  React.useEffect(function () {
+  const arrLength = getFilteredItems().length;
+  const [elRefs, setElRefs] = React.useState([]);
+  React.useEffect(() => {
     if ((elRefs === null || elRefs === void 0 ? void 0 : elRefs.length) !== arrLength) {
       setFocused(null);
     }
-    setElRefs(function (elRefs) {
-      return Array(arrLength + 1).fill(null).map(function (_, i) {
-        return getCorrectRef(elRefs[i]);
-      });
-    });
+    setElRefs(elRefs => Array(arrLength + 1).fill(null).map((_, i) => getCorrectRef(elRefs[i])));
   }, [isOpen, arrLength]);
-  React.useLayoutEffect(function () {
+  React.useLayoutEffect(() => {
     isOpen && !locationDefined && determineDropUp();
   }, [isOpen, locationDefined]);
-  var haveTopItem = function haveTopItem() {
+  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;
     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.useLayoutEffect(function () {
+  React.useLayoutEffect(() => {
     if (isOpen && (focused || focused === 0)) {
       setNewFocusedElement(focused === 0 && !haveTopItem() ? 1 : focused);
     }
@@ -266,32 +188,23 @@ var DropdownContent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   /**
    * Reset dropdown content state on close
    * */
-  React.useEffect(function () {
+  React.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) {
+        var _elRef$current;
+        (_elRef$current = elRef.current) === null || _elRef$current === void 0 || _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$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();
     } 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$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();
       }
     }
   }, [isOpen, dropdownContentRef, focused, outline]);
@@ -299,19 +212,19 @@ var DropdownContent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   /**
    * Scroll item container to top when dropdown opens
    * */
-  React.useEffect(function () {
+  React.useEffect(() => {
     if (isOpen && itemsListRef.current) {
       itemsListRef.current.scrollTop = 0;
     }
   }, [isOpen]);
-  React.useEffect(function () {
+  React.useEffect(() => {
     if (isOpen) {
-      var observer = new IntersectionObserver(function (entries) {
+      const observer = new IntersectionObserver(function (entries) {
         if (!entries[0].isIntersecting) {
-          var _document, _document$activeEleme;
+          var _document;
           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 = document) === null || _document === void 0 || (_document = _document.activeElement) === null || _document === void 0 || _document.blur();
         }
       }, {
         threshold: [0],
@@ -321,57 +234,45 @@ var DropdownContent = /*#__PURE__*/React.forwardRef(function (_ref, 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(_toConsumableArray(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 = () => {
+    var _customizationProps$i, _selectedFirst$displa, _selectedFirst$displa2;
     if (!customizationProps.pinTopItem) return;
-    var visibleItems = getFilteredItems();
-    var allSelected = (selectedValues === null || selectedValues === void 0 ? void 0 : selectedValues.filter(function (x) {
-      return visibleItems.some(function (y) {
-        return y.value == x;
-      });
-    }).length) == visibleItems.length;
-    var showTopItem = false;
-    var suggestions = getSuggestions();
-    var displayLabel = selectedValues[0] ? (_customizationProps$i = customizationProps.items) === null || _customizationProps$i === void 0 ? void 0 : (_customizationProps$i2 = _customizationProps$i.find(function (c) {
-      return c.value === selectedValues[0];
-    })) === null || _customizationProps$i2 === void 0 ? void 0 : _customizationProps$i2.displayLabel : undefined;
+    const visibleItems = getFilteredItems();
+    const allSelected = (selectedValues === null || selectedValues === void 0 ? void 0 : 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;
     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__*/_jsxs(DropdownContentTopItemContainer, {
       $size: size,
       children: [customizationProps.itemsType === 'radio' && /*#__PURE__*/_jsx(RadioButton, {
         ref: elRefs[0],
         role: "menuitemradio",
         iconPointerEventsTransparent: true,
-        onFocus: function onFocus(e) {
-          return onActiveDescendantChanged && onActiveDescendantChanged("".concat(id, "_topitem"));
-        },
+        onFocus: e => onActiveDescendantChanged && onActiveDescendantChanged("".concat(id, "_topitem")),
         tabIndexVal: -1,
         className: "".concat(focused === 0 ? 'dropdown-hover' : ''),
-        select: function select() {},
+        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"),
@@ -381,17 +282,13 @@ var DropdownContent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
         role: "menuitemcheckbox",
         tabIndexVal: -1,
         className: "".concat(focused === 0 ? 'dropdown-hover' : ''),
-        select: function select(selected) {
+        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("".concat(id, "_topitem")),
         iconPointerEventsTransparent: true,
         semiSelected: customizationProps.multiSelect && !allSelected && (selectedValues === null || selectedValues === void 0 ? void 0 : selectedValues.length) > 0,
         size: size,
@@ -399,32 +296,28 @@ var DropdownContent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
         label: customizationProps.multiSelect ? 'Select all' : (_selectedFirst$displa2 = selectedFirst === null || selectedFirst === void 0 ? void 0 : selectedFirst.displayLabel) !== null && _selectedFirst$displa2 !== void 0 ? _selectedFirst$displa2 : selectedFirst === null || selectedFirst === void 0 ? void 0 : selectedFirst.value,
         selected: !customizationProps.multiSelect || allSelected
       }), customizationProps.itemsType === 'normal' && /*#__PURE__*/_jsx(_Fragment, {
-        children: suggestions.map(function (x) {
-          return /*#__PURE__*/_jsx(MenuItem, {
-            role: ariaRolesType == 'input' ? 'option' : 'menu',
-            item: x,
-            size: size,
-            active: false,
-            tabIndex: -1,
-            onFocus: function onFocus(e) {
-              return onActiveDescendantChanged && onActiveDescendantChanged("".concat(id, "_topitem"));
-            },
-            className: "".concat(focused === 0 ? 'dropdown-hover' : ''),
-            ref: elRefs[0],
-            id: "".concat(id, "_topitem"),
-            onClickHandler: function onClickHandler(e) {
-              e.stopPropagation();
-              customizationProps.onValueUpdate([x.value]);
-              setSelectedValues([x.value]);
-              setIsOpen(false);
-              setFocused(null);
-            }
-          }, "".concat(id, "_topitem_").concat(x.value));
-        })
+        children: suggestions.map(x => /*#__PURE__*/_jsx(MenuItem, {
+          role: ariaRolesType == 'input' ? 'option' : 'menu',
+          item: x,
+          size: size,
+          active: false,
+          tabIndex: -1,
+          onFocus: e => onActiveDescendantChanged && onActiveDescendantChanged("".concat(id, "_topitem")),
+          className: "".concat(focused === 0 ? 'dropdown-hover' : ''),
+          ref: elRefs[0],
+          id: "".concat(id, "_topitem"),
+          onClickHandler: e => {
+            e.stopPropagation();
+            customizationProps.onValueUpdate([x.value]);
+            setSelectedValues([x.value]);
+            setIsOpen(false);
+            setFocused(null);
+          }
+        }, "".concat(id, "_topitem_").concat(x.value)))
       })]
     });
   };
-  var getElements = function getElements(messageOnNoResults, size) {
+  const getElements = (messageOnNoResults, size) => {
     if (getFilteredItems().length === 0) {
       return /*#__PURE__*/_jsx(MenuItem, {
         item: {
@@ -434,47 +327,37 @@ var DropdownContent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
         size: size,
         id: "noResultsFound",
         active: false,
-        onClickHandler: function onClickHandler(e) {}
+        onClickHandler: e => {}
       });
     }
     return /*#__PURE__*/_jsx(DropdownContentItemsContainer, {
       $size: size,
-      children: getFilteredItems().filter(function (x) {
-        return x && (customizationProps.itemsType != 'normal' || !x.suggestion);
-      }).map(function (item, index) {
+      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",
-            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' : ''),
             iconPointerEventsTransparent: true,
             disabled: item === null || item === void 0 ? void 0 : item.disabled,
-            onFocus: function onFocus(e) {
-              return onActiveDescendantChanged && onActiveDescendantChanged("".concat(id, "_").concat(index + 1));
-            },
+            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, {
             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' : ''),
             ref: elRefs[index + 1],
             size: size,
             tabIndexVal: -1,
-            onFocus: function onFocus(e) {
-              return onActiveDescendantChanged && onActiveDescendantChanged("".concat(id, "_").concat(index + 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)
@@ -485,12 +368,10 @@ var DropdownContent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
             tabIndex: -1,
             className: "".concat(index + 1 === focused ? 'dropdown-hover' : ''),
             size: size,
-            onFocus: function onFocus(e) {
-              return onActiveDescendantChanged && onActiveDescendantChanged("".concat(id, "_").concat(index + 1));
-            },
+            onFocus: e => onActiveDescendantChanged && onActiveDescendantChanged("".concat(id, "_").concat(index + 1)),
             active: selectedValues === null || selectedValues === void 0 ? void 0 : selectedValues.includes(item.value),
             ref: elRefs[index + 1],
-            onClickHandler: function onClickHandler(e) {
+            onClickHandler: e => {
               e.stopPropagation();
               customizationProps.onValueUpdate([item.value]);
               setSelectedValues([item.value]);
@@ -502,15 +383,15 @@ var DropdownContent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       })
     });
   };
-  var calculateOffset = function calculateOffset() {
+  const 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 rect = containerRef === null || containerRef === void 0 || (_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.getBoundingClientRect();
     if (rect) {
       dropdownContentRef.current.style.width = width !== null && width !== void 0 ? width : "".concat(rect.width, "px");
     }
     determineDropUp();
   };
-  var cls = "".concat(isOpen ? 'show' : '', " ").concat(isOpen && outline ? 'outline' : '', " ").concat(locationDefined ? isUp ? 'up' : 'down' : '');
+  const cls = "".concat(isOpen ? 'show' : '', " ").concat(isOpen && outline ? 'outline' : '', " ").concat(locationDefined ? isUp ? 'up' : 'down' : '');
   return /*#__PURE__*/_jsx(Overlay, {
     children: /*#__PURE__*/_jsxs(DropdownContentContainer, {
       role: ariaRolesType == "menu" ? "menu" : "optionlist",
@@ -554,9 +435,7 @@ var DropdownContent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
           disabled: customizationProps.actionDisabled,
           variant: (_customizationProps$a = customizationProps.actionVariant) !== null && _customizationProps$a !== void 0 ? _customizationProps$a : 'primary',
           size: size,
-          onClick: function onClick() {
-            return customizationProps.action() && setIsOpen(false);
-          },
+          onClick: () => customizationProps.action() && setIsOpen(false),
           children: customizationProps.actionLabel
         })
       })]