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

package/dist/cjs/Dropdown/DropdownContent.js

@@ -1,600 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.DDContainer = 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"));
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _react = _interopRequireDefault(require("react"));
-
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-
-var _Button = _interopRequireDefault(require("../Button/Button"));
-
-var _types = require("../types");
-
-var _CommonStyling = require("./CommonStyling");
-
-var _typography = require("../styles/typography");
-
-var _styles = require("../styles");
-
-var _InputFields = require("../InputFields");
-
-var _zIndexes = require("../styles/z-indexes");
-
-var _jsxRuntime = require("react/jsx-runtime");
-
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
-
-var DDContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: none;\n  position: absolute;\n  background-color: ", ";\n\n  width: ", ";\n  z-index: ", ";\n  margin: ", ";\n\n  &.show {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n  }\n\n  &.up {\n    top: auto;\n    bottom: 100%;\n  }\n\n  ", "\n\n  ", ";\n\n  border: 1px solid ", ";\n  box-sizing: border-box;\n  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15);\n  padding-top: 4px;\n  padding-right: 0px;\n  padding-bottom: 4px;\n  padding-left: 0px;\n\n  min-width: ", ";\n  border-radius: ", ";\n\n  max-height: ", ";\n"])), _styles.COLORS.white, function (props) {
-  return props.width ? props.width : '100%';
-}, _zIndexes.Z_INDEXES.dropdown, function (props) {
-  return props.isButton ? '-4px' : '4px 0px';
-}, function (props) {
-  return props.alignLeft ? 'left: 0px;' : '';
-}, function (props) {
-  return props.isButton ? _CommonStyling.ButtonDropdownContentStyling : '';
-}, _styles.COLORS.neutral_100, 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.DDContainer = DDContainer;
-
-var ItemsContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  > *:hover {\n    z-index: ", ";\n  }\n  > *:active,\n  > *.active{\n    z-index: ", ";\n  }\n  > *:focus {\n    z-index: ", ";\n  }\n  \n  button.dropdownButton {\n    ", "\n  }"])), _zIndexes.Z_INDEXES.hover, _zIndexes.Z_INDEXES.active, _zIndexes.Z_INDEXES.focus, function (props) {
-  return (0, _CommonStyling.DropdownButtonCSS)(props.size);
-});
-
-var ListContainer = _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\n  /* width */\n  ::-webkit-scrollbar {\n    width: 4px;\n    margin: 0 6px;\n    cursor: pointer;\n  }\n\n  /* Track */\n  ::-webkit-scrollbar-track {\n    background: ", ";\n    border-radius: 8px;\n  }\n\n  /* Handle */\n  ::-webkit-scrollbar-thumb {\n    background: ", ";\n    border-radius: 8px;\n  }\n\n  /* Handle on hover */\n  ::-webkit-scrollbar-thumb:hover {\n    background: ", ";\n  }\n"])), function (props) {
-  return props.scrollable ? 'overflow-y: scroll;' : '';
-}, function (props) {
-  return props.itemsType != 'normal' ? 'margin-left: 4px;' : '';
-}, ItemsContainer, function (props) {
-  return props.size == _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';
-}, _styles.COLORS.neutral_100, _styles.COLORS.neutral_600, _styles.COLORS.neutral_500);
-
-var MenuContentContainer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  h1, h2, h3 {\n    margin-block-start: 0px;\n    margin-block-end: 0px;\n    ", "\n    ", "\n    ", "\n    padding: ", ";\n  }\n\n  p {\n    margin-block-start: 0px;\n    margin-block-end: 0px;\n    ", "\n    ", "\n    ", "\n    padding: ", ";\n  }\n"])), function (props) {
-  return props.size == _types.Size.Large && (0, _typography.ComponentXLStyling)(_typography.ComponentTextStyle.Bold, _styles.COLORS.neutral_500);
-}, function (props) {
-  return props.size == _types.Size.Medium && (0, _typography.ComponentLStyling)(_typography.ComponentTextStyle.Bold, _styles.COLORS.neutral_500);
-}, function (props) {
-  return (props.size == _types.Size.Small || !props.size) && (0, _typography.ComponentMStyling)(_typography.ComponentTextStyle.Bold, _styles.COLORS.neutral_500);
-}, 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.neutral_500);
-}, function (props) {
-  return props.size == _types.Size.Medium && (0, _typography.ComponentMStyling)(_typography.ComponentTextStyle.Regular, _styles.COLORS.neutral_500);
-}, function (props) {
-  return (props.size == _types.Size.Small || !props.size) && (0, _typography.ComponentSStyling)(_typography.ComponentTextStyle.Regular, _styles.COLORS.neutral_500);
-}, 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 TopItemContainer = _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\n  button {\n    ", "\n  }\n"])), _styles.COLORS.neutral_200, function (props) {
-  return (0, _CommonStyling.DropdownButtonCSS)(props.size);
-});
-
-var ActionButtonContainer = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  border-top-style: solid;\n  border-top-color: ", ";\n  border-top-width: 1px;\n  \n  padding: ", ";\n\n  button {\n    width: 100%;\n  }\n"])), _styles.COLORS.neutral_200, function (props) {
-  return props.size == _types.Size.Small || !props.size ? '0px 16px' : '8px 16px';
-});
-
-var MAX_MENU_HEIGHT = 240;
-var AVG_OPTION_HEIGHT = 48;
-
-var DropdownContent = function DropdownContent(_ref) {
-  var _customizationProps$a;
-
-  var id = _ref.id,
-      customizationProps = _ref.customizationProps,
-      alignLeft = _ref.alignLeft,
-      isButton = _ref.isButton,
-      size = _ref.size,
-      isOpen = _ref.isOpen,
-      hideOnClickOutside = _ref.hideOnClickOutside,
-      width = _ref.width,
-      setIsOpen = _ref.setIsOpen,
-      filter = _ref.filter,
-      focused = _ref.focused,
-      setFocused = _ref.setFocused,
-      selectedValues = _ref.selectedValues,
-      setSelectedValues = _ref.setSelectedValues,
-      messageOnNoResults = _ref.messageOnNoResults;
-
-  var _React$useState = _react.default.useState(false),
-      _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
-      isUp = _React$useState2[0],
-      setIsUp = _React$useState2[1];
-
-  var dropdownContentRef = _react.default.useRef(null);
-
-  if (!customizationProps.itemsType) customizationProps.itemsType = 'normal';
-  if (!size) size = _types.Size.Small;
-
-  var itemsListRef = _react.default.useRef(null);
-
-  var determineDropUp = function determineDropUp() {
-    var options = customizationProps.items;
-    var node = dropdownContentRef.current;
-    if (!node) return;
-    var windowHeight = window.innerHeight;
-    var menuHeight = Math.min(MAX_MENU_HEIGHT, options.length * AVG_OPTION_HEIGHT);
-    var instOffsetWithMenu = node.getBoundingClientRect().top + menuHeight;
-    setIsUp(instOffsetWithMenu >= windowHeight);
-  };
-
-  var setNewFocusedElement = function setNewFocusedElement(index) {
-    var newFocusedElement = elRefs[index];
-
-    if (newFocusedElement) {
-      var _newFocusedElement$cu;
-
-      setFocused(index);
-      newFocusedElement === null || newFocusedElement === void 0 ? void 0 : (_newFocusedElement$cu = newFocusedElement.current) === null || _newFocusedElement$cu === void 0 ? void 0 : _newFocusedElement$cu.focus();
-    }
-  };
-
-  var getFilteredItems = function getFilteredItems() {
-    var filtrationString = (filter !== null && filter !== void 0 ? filter : '').toUpperCase();
-    return customizationProps.items.filter(function (x) {
-      var _x$value, _x$displayLabel;
-
-      return (x === null || x === void 0 ? void 0 : (_x$value = x.value) === null || _x$value === void 0 ? void 0 : _x$value.toUpperCase().includes(filtrationString)) || (x === null || x === void 0 ? void 0 : (_x$displayLabel = x.displayLabel) === null || _x$displayLabel === void 0 ? void 0 : _x$displayLabel.toUpperCase().includes(filtrationString));
-    });
-  };
-
-  var handleKeyDown = function handleKeyDown(e) {
-    if (isOpen) {
-      if (e.keyCode === 38) {
-        e.preventDefault();
-        var focusedNow = focused;
-
-        if (focusedNow !== undefined && focusedNow !== null && focusedNow > 0) {
-          var filtered = getFilteredItems();
-          if (focusedNow == 1 && haveTopItem()) focusedNow = 0;else {
-            for (var i = focusedNow - 1; i > 0; i--) {
-              var _filtered;
-
-              if (!((_filtered = filtered[i - 1]) !== null && _filtered !== void 0 && _filtered.disabled)) {
-                focusedNow = i;
-                break;
-              }
-            }
-          }
-          setNewFocusedElement(focusedNow);
-        }
-      } else if (e.keyCode === 40) {
-        e.preventDefault();
-        var focusedNow = focused;
-
-        if (focusedNow !== undefined && focusedNow !== null) {
-          var _filtered2 = getFilteredItems();
-
-          for (var _i = focusedNow + 1; _i <= _filtered2.length; _i++) {
-            var _filtered3;
-
-            if (!((_filtered3 = _filtered2[_i - 1]) !== null && _filtered3 !== void 0 && _filtered3.disabled)) {
-              focusedNow = _i;
-              break;
-            }
-          }
-        } else {
-          focusedNow = haveTopItem() ? 0 : 1;
-        }
-
-        setNewFocusedElement(focusedNow);
-      } else if (e.keyCode === 9) {
-        e.preventDefault();
-        var focusedNow = focused;
-
-        if (focusedNow !== undefined && focusedNow !== null) {
-          focusedNow++;
-          var newFocusedElement = document.getElementById("".concat(id, "_").concat(focusedNow));
-
-          if (!newFocusedElement) {
-            setNewFocusedElement(0);
-          } else {
-            setNewFocusedElement(focusedNow);
-          }
-        } else {
-          setFocused(null);
-        }
-      } else if (e.keyCode === 27) {
-        setIsOpen(false);
-        setFocused(null); //TODO: add onEscapehandler
-
-        /*
-        if (!list.includes(input)) {
-          setInput('');
-          setPlaceholderSearch(placeholder || '');
-        }
-        styledFieldRef.current?.focus(); */
-      }
-    }
-  };
-
-  var handleClickOutside = function handleClickOutside(e) {
-    if (hideOnClickOutside && dropdownContentRef !== null && dropdownContentRef !== void 0 && dropdownContentRef.current && !dropdownContentRef.current.contains(e.target) && !elRefs.some(function (x) {
-      var _x$current;
-
-      return x === null || x === void 0 ? void 0 : (_x$current = x.current) === null || _x$current === void 0 ? void 0 : _x$current.contains(e.target);
-    })) {
-      if (isOpen) {
-        setIsOpen(false);
-        setFocused(null);
-      }
-    }
-  };
-
-  _react.default.useEffect(function () {
-    document.addEventListener('keydown', handleKeyDown);
-    document.addEventListener('click', handleClickOutside);
-    return function () {
-      document.removeEventListener('keydown', handleKeyDown);
-      document.removeEventListener('click', handleClickOutside);
-    };
-  });
-
-  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;
-  };
-
-  _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;
-  }, [selectedValues]);
-
-  var getCorrectRef = function getCorrectRef(ref) {
-    switch (customizationProps.itemsType) {
-      case 'normal':
-        return ref || /*#__PURE__*/_react.default.createRef();
-
-      default:
-        return ref || /*#__PURE__*/_react.default.createRef();
-    }
-  };
-
-  var arrLength = getFilteredItems().length;
-
-  var _React$useState3 = _react.default.useState([]),
-      _React$useState4 = (0, _slicedToArray2.default)(_React$useState3, 2),
-      elRefs = _React$useState4[0],
-      setElRefs = _React$useState4[1];
-
-  _react.default.useEffect(function () {
-    setElRefs(function (elRefs) {
-      return Array(arrLength + 1).fill(null).map(function (_, i) {
-        return getCorrectRef(elRefs[i]);
-      });
-    });
-  }, [isOpen, arrLength, selectedValues]);
-
-  _react.default.useEffect(function () {
-    determineDropUp();
-  }, [isOpen]);
-
-  var haveTopItem = function haveTopItem() {
-    var _getSuggestions;
-
-    if (customizationProps.itemsType === 'radio' && selectedValues && (selectedValues === null || selectedValues === void 0 ? void 0 : selectedValues.length) > 0) return true;else if (customizationProps.itemsType === 'checkbox' && (customizationProps.multiSelect || (selectedValues === null || selectedValues === void 0 ? void 0 : selectedValues.length) > 0)) return true;else if (customizationProps.itemsType === 'normal' && ((_getSuggestions = getSuggestions()) === null || _getSuggestions === void 0 ? void 0 : _getSuggestions.length) > 0) return true;
-    return false;
-  };
-
-  var getSuggestions = function getSuggestions() {
-    return getFilteredItems().filter(function (x) {
-      return x.suggestion;
-    });
-  };
-
-  _react.default.useLayoutEffect(function () {
-    if (isOpen && (focused || focused === 0)) {
-      var _newFocusedElement$cu2;
-
-      var focusThis = focused == 0 && !haveTopItem() ? 1 : focused;
-      if (focusThis != focused) setFocused(focusThis);
-      var newFocusedElement = elRefs[focusThis];
-      newFocusedElement === null || newFocusedElement === void 0 ? void 0 : (_newFocusedElement$cu2 = newFocusedElement.current) === null || _newFocusedElement$cu2 === void 0 ? void 0 : _newFocusedElement$cu2.focus();
-    } else setFocused(null); //if the dropdown is closed, we don't to keep saved the focused item
-
-  }, [isOpen]);
-
-  var handleItemClick = function handleItemClick(selected, item) {
-    var newValue = [];
-
-    if (customizationProps.multiSelect) {
-      if (selected) newValue = [].concat((0, _toConsumableArray2.default)(selectedValues), [item.value]);else newValue = selectedValues.filter(function (x) {
-        return x != item.value;
-      });
-    } else newValue = selected ? [item.value] : [];
-
-    setSelectedValues(newValue);
-
-    if (customizationProps.onValueUpdate && customizationProps.onValueUpdate(newValue)) {
-      setIsOpen(false);
-    }
-  };
-
-  var getTopItem = function getTopItem() {
-    var _customizationProps$i, _customizationProps$i2, _selectedFirst$displa, _selectedFirst$displa2;
-
-    if (!customizationProps.pinTopItem) return;
-    var visibleItems = getFilteredItems();
-    var allSelected = (selectedValues === null || selectedValues === void 0 ? void 0 : selectedValues.filter(function (x) {
-      return visibleItems.some(function (y) {
-        return y.value == x;
-      });
-    }).length) == visibleItems.length;
-    var showTopItem = false;
-    var suggestions = getSuggestions();
-    var displayLabel = selectedValues[0] ? (_customizationProps$i = customizationProps.items) === null || _customizationProps$i === void 0 ? void 0 : (_customizationProps$i2 = _customizationProps$i.find(function (c) {
-      return c.value === selectedValues[0];
-    })) === null || _customizationProps$i2 === void 0 ? void 0 : _customizationProps$i2.displayLabel : undefined;
-    if (customizationProps.itemsType == 'radio' && selectedValues && (selectedValues === null || selectedValues === void 0 ? void 0 : selectedValues.length) > 0) showTopItem = true;else if (customizationProps.itemsType == 'checkbox' && (customizationProps.multiSelect || (selectedValues === null || selectedValues === void 0 ? void 0 : selectedValues.length) > 0)) showTopItem = true;else if (customizationProps.itemsType == 'normal' && suggestions.length > 0) showTopItem = true;
-    if (!showTopItem) return;
-    var selectedFirst = selectedValues.length > 0 ? visibleItems.find(function (x) {
-      return x.value == selectedValues[0];
-    }) : null;
-    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(TopItemContainer, {
-      size: size,
-      children: [customizationProps.itemsType == 'radio' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_InputFields.RadioButton, {
-        ref: elRefs[0],
-        iconPointerEventsTransparent: true,
-        select: function select() {},
-        label: (_selectedFirst$displa = selectedFirst === null || selectedFirst === void 0 ? void 0 : selectedFirst.displayLabel) !== null && _selectedFirst$displa !== void 0 ? _selectedFirst$displa : selectedFirst === null || selectedFirst === void 0 ? void 0 : selectedFirst.value,
-        size: size,
-        id: "".concat(id, "_topitem"),
-        selected: true
-      }), customizationProps.itemsType == 'checkbox' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_InputFields.Checkbox, {
-        ref: elRefs[0],
-        select: function select(selected) {
-          if (!customizationProps.multiSelect) return;
-          var newValues = selected ? visibleItems.map(function (x) {
-            return x.value;
-          }) : [];
-          setSelectedValues(newValues);
-          if (customizationProps.onValueUpdate && customizationProps.onValueUpdate(newValues)) setIsOpen(false);
-        },
-        iconPointerEventsTransparent: true,
-        semiSelected: customizationProps.multiSelect && !allSelected && (selectedValues === null || selectedValues === void 0 ? void 0 : selectedValues.length) > 0,
-        size: size,
-        id: "".concat(id, "_checkbox_selectall"),
-        label: customizationProps.multiSelect ? 'Select all' : (_selectedFirst$displa2 = selectedFirst === null || selectedFirst === void 0 ? void 0 : selectedFirst.displayLabel) !== null && _selectedFirst$displa2 !== void 0 ? _selectedFirst$displa2 : selectedFirst === null || selectedFirst === void 0 ? void 0 : selectedFirst.value,
-        selected: !customizationProps.multiSelect || allSelected
-      }), customizationProps.itemsType == 'normal' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
-        children: suggestions.map(function (x) {
-          var _x$displayLabel2;
-
-          return /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
-            ref: elRefs[0],
-            type: "button",
-            id: "".concat(id, "_topitem"),
-            onClick: function onClick(e) {
-              customizationProps.onValueUpdate([x.value]);
-              setSelectedValues([x.value]);
-              setIsOpen(false);
-              setFocused(null);
-            },
-            children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-              className: "item-content",
-              children: [(x === null || x === void 0 ? void 0 : x.icon) && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-                className: "item-icon",
-                children: x === null || x === void 0 ? void 0 : x.icon
-              }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-                className: "item-label",
-                children: [(_x$displayLabel2 = x === null || x === void 0 ? void 0 : x.displayLabel) !== null && _x$displayLabel2 !== void 0 ? _x$displayLabel2 : x === null || x === void 0 ? void 0 : x.value, (x === null || x === void 0 ? void 0 : x.noteLabel) && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-                  style: {
-                    fontSize: '12px'
-                  },
-                  children: x.noteLabel
-                })]
-              })]
-            })
-          }, "".concat(id, "_topitem_").concat(x.value));
-        })
-      })]
-    });
-  };
-
-  var getElements = function getElements() {
-    if (getFilteredItems().length === 0) {
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(ItemsContainer, {
-        size: size,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
-          className: "dropdownButton",
-          disabled: true,
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-            children: messageOnNoResults
-          })
-        })
-      });
-    }
-
-    var number = 0;
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(ItemsContainer, {
-      size: size,
-      children: getFilteredItems().filter(function (x) {
-        return x && (customizationProps.itemsType != 'normal' || !x.suggestion);
-      }).map(function (item) {
-        var _item$displayLabel, _item$displayLabel2, _item$displayLabel3;
-
-        return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.default.Fragment, {
-          children: [item.customContent, !item.customContent && customizationProps.itemsType == 'radio' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_InputFields.RadioButton, {
-            select: function select(selected) {
-              return handleItemClick(selected, item);
-            },
-            ref: elRefs[number + 1],
-            size: size,
-            iconPointerEventsTransparent: true,
-            disabled: item === null || item === void 0 ? void 0 : item.disabled,
-            id: "".concat(id, "_").concat(number + 1),
-            label: (_item$displayLabel = item.displayLabel) !== null && _item$displayLabel !== void 0 ? _item$displayLabel : item.value,
-            selected: selectedValues === null || selectedValues === void 0 ? void 0 : selectedValues.includes(item.value)
-          }, "key_".concat(id, "_").concat(number++)), !item.customContent && customizationProps.itemsType == 'checkbox' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_InputFields.Checkbox, {
-            select: function select(selected) {
-              return handleItemClick(selected, item);
-            },
-            iconPointerEventsTransparent: true,
-            disabled: item === null || item === void 0 ? void 0 : item.disabled,
-            ref: elRefs[number + 1],
-            size: size,
-            id: "".concat(id, "_").concat(number + 1),
-            label: (_item$displayLabel2 = item.displayLabel) !== null && _item$displayLabel2 !== void 0 ? _item$displayLabel2 : item.value,
-            selected: selectedValues === null || selectedValues === void 0 ? void 0 : selectedValues.includes(item.value)
-          }, "key_".concat(id, "_").concat(number++)), !item.customContent && (customizationProps.itemsType == 'normal' || !customizationProps.itemsType) && /*#__PURE__*/(0, _jsxRuntime.jsxs)("button", {
-            type: "button",
-            disabled: item === null || item === void 0 ? void 0 : item.disabled,
-            ref: elRefs[number + 1],
-            onClick: function onClick(e) {
-              customizationProps.onValueUpdate([item.value]);
-              setSelectedValues([item.value]);
-              setIsOpen(false);
-              setFocused(null);
-            },
-            className: 'dropdownButton ' + (item.showDividerAbove ? 'show-divider-above' : '') + ' ' + (selectedValues !== null && selectedValues !== void 0 && selectedValues.includes(item.value) ? 'active' : ''),
-            id: "".concat(id, "_").concat(number + 1),
-            children: [item.showDividerAbove && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-              className: "divider"
-            }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-              className: "item-content",
-              children: [item.icon && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-                className: "item-icon",
-                children: item.icon
-              }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-                className: "item-label",
-                children: [(_item$displayLabel3 = item.displayLabel) !== null && _item$displayLabel3 !== void 0 ? _item$displayLabel3 : item.value, item.noteLabel && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-                  style: {
-                    fontSize: '12px'
-                  },
-                  children: item.noteLabel
-                })]
-              })]
-            })]
-          }, "key_".concat(id, "_").concat(number++))]
-        }, "key_".concat(id, "_").concat(item.value));
-      })
-    });
-  };
-
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(DDContainer, {
-    ref: dropdownContentRef,
-    size: size,
-    width: width,
-    isButton: isButton,
-    alignLeft: alignLeft,
-    scrollable: customizationProps.scrollable,
-    maxHeight: customizationProps.maxHeight,
-    className: [isOpen && 'show', isUp && 'up'].filter(function (e) {
-      return !!e;
-    }).join(' '),
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(ListContainer, {
-      size: size,
-      itemsType: customizationProps.itemsType,
-      onScroll: handleScroll,
-      ref: itemsListRef,
-      scrollable: customizationProps.scrollable,
-      children: [customizationProps.menuContent && /*#__PURE__*/(0, _jsxRuntime.jsxs)(MenuContentContainer, {
-        size: size,
-        children: [customizationProps.menuContent, /*#__PURE__*/(0, _jsxRuntime.jsx)(DividerContainer, {
-          size: size,
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-            className: "divider"
-          })
-        })]
-      }), customizationProps.pinTopItem && getTopItem(), getElements()]
-    }), customizationProps.action && customizationProps.actionLabel && /*#__PURE__*/(0, _jsxRuntime.jsx)(ActionButtonContainer, {
-      size: size,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
-        width: "100%",
-        icon: customizationProps.actionIcon,
-        loading: customizationProps.actionLoading,
-        disabled: customizationProps.actionDisabled,
-        variant: (_customizationProps$a = customizationProps.actionVariant) !== null && _customizationProps$a !== void 0 ? _customizationProps$a : 'primary',
-        size: size,
-        onClick: function onClick() {
-          if (customizationProps.action()) //closing the dropdown if action returns 'true'
-            setIsOpen(false);
-        },
-        children: customizationProps.actionLabel
-      })
-    })]
-  });
-  /*  ),
-    {
-      handleClickOutside: () => () => {
-        if (isOpen) {
-          setIsOpen(false);
-          setFocused(null);
-        }
-      },
-    },
-  );
-   return <Wrapped />; */
-};
-
-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,
-      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,
-  hideOnClickOutside: _propTypes.default.bool.isRequired,
-  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
-};
-var _default = DropdownContent;
-exports.default = _default;
-//# sourceMappingURL=DropdownContent.js.map