@laerdal/life-react-components 1.7.0-dev.9 → 1.8.0

package/dist/Dropdown/DropdownContent.cjs

@@ -39,11 +39,21 @@ 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  \n  ", ";\n"])), _styles.COLORS.white, function (props) {
+function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, 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 normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+var MAX_MENU_HEIGHT = 240;
+var AVG_OPTION_HEIGHT = 48;
+var OFFSET_BEFORE_SHOW = 1000000;
+
+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  transform: translate(-", "px, -", "px);\n\n  &.up,\n  &.down {\n    transform: translate(0, 0);\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  ", ";\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\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) {
+}, OFFSET_BEFORE_SHOW, OFFSET_BEFORE_SHOW, function (props) {
   return props.alignLeft ? 'left: 0px;' : '';
 }, function (props) {
   return props.isButton ? _CommonStyling.ButtonDropdownContentStyling : '';
@@ -53,15 +63,13 @@ var DDContainer = _styledComponents.default.div(_templateObject || (_templateObj
   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';
-}, function (props) {
-  return !!props.scrollable ? '* { outline-offset: -4px !important;}' : '';
 });
 
 exports.DDContainer = DDContainer;
 
 var ItemsContainer = _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);
 
-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    word-break: break-word;\n  }\n\n  ", "\n"])), function (props) {
+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    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;' : '';
@@ -107,11 +115,8 @@ var ActionButtonContainer = _styledComponents.default.div(_templateObject7 || (_
   return props.size === _types.Size.Small || !props.size ? '4px 16px 0px' : props.size === _types.Size.Medium ? '12px 16px 8px' : '16px 16px 12px';
 });
 
-var MAX_MENU_HEIGHT = 240;
-var AVG_OPTION_HEIGHT = 48;
-
-var DropdownContent = function DropdownContent(_ref) {
-  var _customizationProps$a;
+var DropdownContent = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
+  var _ref2, _customizationProps$a;
 
   var id = _ref.id,
       customizationProps = _ref.customizationProps,
@@ -119,7 +124,6 @@ var DropdownContent = function DropdownContent(_ref) {
       isButton = _ref.isButton,
       size = _ref.size,
       isOpen = _ref.isOpen,
-      hideOnClickOutside = _ref.hideOnClickOutside,
       width = _ref.width,
       setIsOpen = _ref.setIsOpen,
       filter = _ref.filter,
@@ -127,38 +131,55 @@ var DropdownContent = function DropdownContent(_ref) {
       setFocused = _ref.setFocused,
       selectedValues = _ref.selectedValues,
       setSelectedValues = _ref.setSelectedValues,
-      messageOnNoResults = _ref.messageOnNoResults;
+      messageOnNoResults = _ref.messageOnNoResults,
+      outline = _ref.outline;
 
   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);
+  var _React$useState3 = _react.default.useState(false),
+      _React$useState4 = (0, _slicedToArray2.default)(_React$useState3, 2),
+      locationDefined = _React$useState4[0],
+      setLocationDefined = _React$useState4[1];
 
+  var dropdownContentRef = (_ref2 = ref) !== null && _ref2 !== void 0 ? _ref2 : _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 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;
+    var instOffsetWithMenu = node.getBoundingClientRect().top + menuHeight + OFFSET_BEFORE_SHOW;
     setIsUp(instOffsetWithMenu >= windowHeight);
+    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];
+    var oldFocusedElement = focused || focused === 0 ? elRefs[focused] : null;
 
-    if (newFocusedElement) {
-      var _newFocusedElement$cu;
+    if (newFocusedElement && newFocusedElement !== oldFocusedElement) {
+      var _oldFocusedElement$cu, _newFocusedElement$cu, _newFocusedElement$cu2;
 
       setFocused(index);
-      newFocusedElement === null || newFocusedElement === void 0 ? void 0 : (_newFocusedElement$cu = newFocusedElement.current) === null || _newFocusedElement$cu === void 0 ? void 0 : _newFocusedElement$cu.focus();
+      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({
+        block: 'nearest',
+        inline: 'nearest'
+      });
     }
   };
 
@@ -171,88 +192,53 @@ var DropdownContent = function DropdownContent(_ref) {
     });
   };
 
+  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)) {
+        return i;
+      }
+    }
+
+    return index;
+  };
+
   var handleKeyDown = function handleKeyDown(e) {
     if (isOpen) {
       if (e.key === 'ArrowUp' || e.key === 'Up') {
         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;
-              }
-            }
-          }
+        var 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;
-
-        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;
-        }
-
+        _focusedNow = !!_focusedNow || _focusedNow === 0 ? findNextActiveIndex(_focusedNow, 1, getFilteredItems()) : haveTopItem() ? 0 : 1;
         setNewFocusedElement(_focusedNow);
-      } else if (e.key === 'Tab') {
-        var _focusedNow2 = focused;
-
-        if (_focusedNow2 !== undefined && _focusedNow2 !== null) {
-          e.preventDefault();
-          e.shiftKey ? _focusedNow2-- : _focusedNow2++;
-          var newFocusedElement = document.getElementById("".concat(id, "_").concat(_focusedNow2));
-
-          if (!newFocusedElement) {
-            setNewFocusedElement(0);
-          } else {
-            setNewFocusedElement(_focusedNow2);
-          }
-        } else {
-          setFocused(null);
-        }
       } else if (e.key === 'Escape' || e.key === 'Esc') {
         setIsOpen(false);
         setFocused(null);
-      }
-    }
-  };
+      } 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];
 
-  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;
+        if (focusedElement) {
+          var _focusedElement$curre;
 
-      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);
+          (_focusedElement$curre = focusedElement.current) === null || _focusedElement$curre === void 0 ? void 0 : _focusedElement$curre.click();
+        }
       }
     }
   };
 
   _react.default.useEffect(function () {
     document.addEventListener('keydown', handleKeyDown);
-    document.addEventListener('click', handleClickOutside);
     return function () {
       document.removeEventListener('keydown', handleKeyDown);
-      document.removeEventListener('click', handleClickOutside);
     };
   });
 
@@ -282,26 +268,31 @@ var DropdownContent = function DropdownContent(_ref) {
 
   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];
+  var _React$useState5 = _react.default.useState([]),
+      _React$useState6 = (0, _slicedToArray2.default)(_React$useState5, 2),
+      elRefs = _React$useState6[0],
+      setElRefs = _React$useState6[1];
 
   _react.default.useEffect(function () {
+    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]);
       });
     });
-  }, [isOpen, arrLength, selectedValues]);
+  }, [isOpen, arrLength]);
 
-  _react.default.useEffect(function () {
-    determineDropUp();
-  }, [isOpen]);
+  _react.default.useLayoutEffect(function () {
+    isOpen && !locationDefined && determineDropUp();
+  }, [isOpen, locationDefined]);
 
   var haveTopItem = function 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;
   };
@@ -311,18 +302,65 @@ var DropdownContent = function DropdownContent(_ref) {
       return x.suggestion;
     });
   };
+  /**
+   * when dropdown opens set correct position of focused item
+   * */
+
 
   _react.default.useLayoutEffect(function () {
     if (isOpen && (focused || focused === 0)) {
-      var _newFocusedElement$cu2;
+      setNewFocusedElement(focused === 0 && !haveTopItem() ? 1 : focused);
+    }
+  }, [isOpen, focused]);
+  /**
+   * Reset dropdown content state on close
+   * */
 
-      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, focused]);
+  _react.default.useEffect(function () {
+    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();
+      }
+
+      setFocused(null);
+      (_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();
+    } 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();
+      }
+    }
+  }, [isOpen, dropdownContentRef, focused, outline]);
+  /**
+   * Scroll item container to top when dropdown opens
+   * */
+
+
+  _react.default.useEffect(function () {
+    if (isOpen && itemsListRef.current) {
+      itemsListRef.current.scrollTop = 0;
+    }
+  }, [isOpen]);
 
   var handleItemClick = function handleItemClick(selected, item) {
     var newValue = [];
@@ -362,16 +400,20 @@ var DropdownContent = function DropdownContent(_ref) {
     }) : null;
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)(TopItemContainer, {
       size: size,
-      children: [customizationProps.itemsType == 'radio' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_InputFields.RadioButton, {
+      children: [customizationProps.itemsType === 'radio' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_InputFields.RadioButton, {
         ref: elRefs[0],
         iconPointerEventsTransparent: true,
+        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,
         size: size,
         id: "".concat(id, "_topitem"),
         selected: true
-      }), customizationProps.itemsType == 'checkbox' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_InputFields.Checkbox, {
+      }), customizationProps.itemsType === 'checkbox' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_InputFields.Checkbox, {
         ref: elRefs[0],
+        tabIndexVal: -1,
+        className: "".concat(focused === 0 ? 'dropdown-hover' : ''),
         select: function select(selected) {
           if (!customizationProps.multiSelect) return;
           var newValues = selected ? visibleItems.map(function (x) {
@@ -386,12 +428,14 @@ var DropdownContent = function DropdownContent(_ref) {
         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, {
+      }), customizationProps.itemsType === 'normal' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
         children: suggestions.map(function (x) {
           return /*#__PURE__*/(0, _jsxRuntime.jsx)(_MenuItem.default, {
             item: x,
             size: size,
             active: false,
+            tabIndex: -1,
+            className: "".concat(focused === 0 ? 'dropdown-hover' : ''),
             ref: elRefs[0],
             id: "".concat(id, "_topitem"),
             onClickHandler: function onClickHandler(e) {
@@ -414,6 +458,7 @@ var DropdownContent = function DropdownContent(_ref) {
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
           className: "dropdownButton",
           disabled: true,
+          tabIndex: -1,
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
             children: messageOnNoResults
           })
@@ -421,12 +466,11 @@ var DropdownContent = function DropdownContent(_ref) {
       });
     }
 
-    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) {
+      }).map(function (item, index) {
         var _item$displayLabel, _item$displayLabel2;
 
         return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.default.Fragment, {
@@ -434,30 +478,36 @@ var DropdownContent = function DropdownContent(_ref) {
             select: function select(selected) {
               return handleItemClick(selected, item);
             },
-            ref: elRefs[number + 1],
+            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,
-            id: "".concat(id, "_").concat(number + 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(number++)), !item.customContent && customizationProps.itemsType == 'checkbox' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_InputFields.Checkbox, {
+          }, "key_".concat(id, "_").concat(index + 1)), !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],
+            className: "".concat(index + 1 === focused ? 'dropdown-hover' : ''),
+            ref: elRefs[index + 1],
             size: size,
-            id: "".concat(id, "_").concat(number + 1),
+            tabIndexVal: -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(number++)), !item.customContent && (customizationProps.itemsType == 'normal' || !customizationProps.itemsType) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_MenuItem.default, {
-            id: "".concat(id, "_").concat(number + 1),
+          }, "key_".concat(id, "_").concat(index + 1)), !item.customContent && (customizationProps.itemsType == 'normal' || !customizationProps.itemsType) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_MenuItem.default, {
+            id: "".concat(id, "_").concat(index + 1),
             item: item,
+            tabIndex: -1,
+            className: "".concat(index + 1 === focused ? 'dropdown-hover' : ''),
             size: size,
             active: selectedValues === null || selectedValues === void 0 ? void 0 : selectedValues.includes(item.value),
-            ref: elRefs[number + 1],
+            ref: elRefs[index + 1],
             onClickHandler: function onClickHandler(e) {
               e.stopPropagation();
               customizationProps.onValueUpdate([item.value]);
@@ -465,28 +515,29 @@ var DropdownContent = function DropdownContent(_ref) {
               setIsOpen(false);
               setFocused(null);
             }
-          }, "key_".concat(id, "_").concat(number++))]
+          }, "key_".concat(id, "_").concat(index + 1))]
         }, "key_".concat(id, "_").concat(item.value));
       })
     });
   };
 
+  var cls = "".concat(isOpen ? 'show' : '', " ").concat(isOpen && outline ? 'outline' : '', " ").concat(locationDefined ? isUp ? 'up' : 'down' : '');
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(DDContainer, {
     ref: dropdownContentRef,
     size: size,
     width: width,
+    tabIndex: -1,
     isButton: isButton,
     alignLeft: alignLeft,
     scrollable: customizationProps.scrollable,
     maxHeight: customizationProps.maxHeight,
-    className: [isOpen && 'show', isUp && 'up'].filter(function (e) {
-      return !!e;
-    }).join(' '),
+    className: cls,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(ListContainer, {
       size: size,
       itemsType: customizationProps.itemsType,
       onScroll: handleScroll,
       ref: itemsListRef,
+      outline: outline,
       scrollable: customizationProps.scrollable,
       children: [customizationProps.menuContent && /*#__PURE__*/(0, _jsxRuntime.jsxs)(MenuContentContainer, {
         size: size,
@@ -503,30 +554,19 @@ var DropdownContent = function DropdownContent(_ref) {
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
         width: "100%",
         icon: customizationProps.actionIcon,
+        ref: actionButtonRef,
         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);
+          return customizationProps.action() && setIsOpen(false);
         },
         children: customizationProps.actionLabel
       })
     })]
   });
-  /*  ),
-    {
-      handleClickOutside: () => () => {
-        if (isOpen) {
-          setIsOpen(false);
-          setFocused(null);
-        }
-      },
-    },
-  );
-   return <Wrapped />; */
-};
+});
 
 DropdownContent.propTypes = {
   isButton: _propTypes.default.bool.isRequired,
@@ -561,12 +601,12 @@ DropdownContent.propTypes = {
   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
+  setFocused: _propTypes.default.func.isRequired,
+  outline: _propTypes.default.bool
 };
 var _default = DropdownContent;
 exports.default = _default;