intelicoreact 1.2.56 → 1.2.57

package/dist/Atomic/FormElements/Dropdown/Dropdown.js

@@ -9,10 +9,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
 
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
@@ -37,8 +37,6 @@ var _Input = _interopRequireDefault(require("../../../Atomic/FormElements/Input/
 
 var _RadioInput = _interopRequireDefault(require("../../../Atomic/FormElements/RadioInput/RadioInput"));
 
-var _CustomIcons = require("../../../Molecular/CustomIcons");
-
 var _DropdownLoader = _interopRequireDefault(require("./components/DropdownLoader"));
 
 require("./Dropdown.scss");
@@ -52,6 +50,7 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
 var RC = 'dropdown';
+var MIN_ITEMS_FOR_SHOW_MOBILE_SEARCH = 10;
 
 var Dropdown = function Dropdown(_ref) {
   var _options$find, _dropdownListWrapperR4, _dropdownListWrapperR5, _dropdownListRef$curr5, _dropdownListRef$curr6, _filteredOptions$find;
@@ -80,11 +79,15 @@ var Dropdown = function Dropdown(_ref) {
       noOptionsText = _ref$noOptionsText === void 0 ? 'No options available' : _ref$noOptionsText,
       _ref$attributesOfNati = _ref.attributesOfNativeInput,
       attributesOfNativeInput = _ref$attributesOfNati === void 0 ? {} : _ref$attributesOfNati,
-      isDoNotPullOutListOfMainContainer = _ref.isDoNotPullOutListOfMainContainer;
+      isDoNotPullOutListOfMainContainer = _ref.isDoNotPullOutListOfMainContainer,
+      withMobileLogic = _ref.withMobileLogic,
+      _ref$minItemsForShowM = _ref.minItemsForShowMobileSearch,
+      minItemsForShowMobileSearch = _ref$minItemsForShowM === void 0 ? MIN_ITEMS_FOR_SHOW_MOBILE_SEARCH : _ref$minItemsForShowM;
 
   var _useIsMobile = (0, _useIsMobile2.default)(),
-      isMobile = _useIsMobile.isMobile;
+      isMobileProp = _useIsMobile.isMobile;
 
+  var isMobile = isMobileProp && withMobileLogic;
   var dropdownId = id || fieldKey;
 
   var _useState = (0, _react.useState)(false),
@@ -114,23 +117,28 @@ var Dropdown = function Dropdown(_ref) {
 
   var _useState9 = (0, _react.useState)(false),
       _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
-      isFocusedByClick = _useState10[0],
-      setIsFocusedByClick = _useState10[1];
+      isSearchInputFocused = _useState10[0],
+      setIsSearchInputFocused = _useState10[1];
 
-  var _useState11 = (0, _react.useState)(false),
+  var _useState11 = (0, _react.useState)(null),
       _useState12 = (0, _slicedToArray2.default)(_useState11, 2),
-      isSearchInputFocused = _useState12[0],
-      setIsSearchInputFocused = _useState12[1];
+      isScrollableList = _useState12[0],
+      setIsScrollableList = _useState12[1];
 
-  var _useState13 = (0, _react.useState)(null),
+  var _useState13 = (0, _react.useState)(false),
       _useState14 = (0, _slicedToArray2.default)(_useState13, 2),
-      isScrollableList = _useState14[0],
-      setIsScrollableList = _useState14[1];
+      isFixedMaxHeight = _useState14[0],
+      setIsFixedMaxHeight = _useState14[1];
 
-  var _useState15 = (0, _react.useState)(false),
+  var _useState15 = (0, _react.useState)(0),
       _useState16 = (0, _slicedToArray2.default)(_useState15, 2),
-      isFixedMaxHeight = _useState16[0],
-      setIsFixedMaxHeight = _useState16[1];
+      scrollTop = _useState16[0],
+      setScrollTop = _useState16[1];
+
+  var _useState17 = (0, _react.useState)(1),
+      _useState18 = (0, _slicedToArray2.default)(_useState17, 2),
+      scrollHeight = _useState18[0],
+      setScrollHeight = _useState18[1];
 
   if (!options) return null;
 
@@ -184,6 +192,16 @@ var Dropdown = function Dropdown(_ref) {
   var onChangeHandler = function onChangeHandler(item) {
     setIsOpen(false);
     onChange(item.value);
+  };
+
+  var onKeyDown = function onKeyDown(e) {
+    if (![9, 13].includes(e.keyCode)) return false;
+    setIsOpen(false);
+  };
+
+  var onKeyUp = function onKeyUp(e) {
+    if (![9, 13].includes(e.keyCode)) return false;
+    setIsOpen(true);
   }; // decorator
 
 
@@ -318,7 +336,20 @@ var Dropdown = function Dropdown(_ref) {
     var dropdownList = document.createElement('div');
     dropdownList.setAttribute('id', dropdownId);
     dropdownList.classList.add('dropdown__container');
-    getParentNode().append(dropdownList);
+
+    if (isMobile) {
+      dropdownList.addEventListener('click', function (e) {
+        if (e.target.id === dropdownId) setIsOpen(false);
+      });
+    }
+
+    try {
+      var _getListContainer2;
+
+      (_getListContainer2 = getListContainer()) === null || _getListContainer2 === void 0 ? void 0 : _getListContainer2.remove();
+    } finally {
+      getParentNode().append(dropdownList);
+    }
   };
 
   var getListContainer = function getListContainer() {
@@ -388,14 +419,28 @@ var Dropdown = function Dropdown(_ref) {
     return newData;
   };
 
+  var getTotalOptions = (0, _react.useCallback)(function () {
+    return options === null || options === void 0 ? void 0 : options.reduce(function (result, item) {
+      if (item !== null && item !== void 0 && item.list) {
+        var _item$list;
+
+        result += (item === null || item === void 0 ? void 0 : (_item$list = item.list) === null || _item$list === void 0 ? void 0 : _item$list.length) || 0;
+      } else {
+        ++result;
+      }
+
+      return result;
+    }, 0);
+  }, [options]);
+
   var getListMarkUp = function getListMarkUp() {
-    var _getSortedOptions;
+    var _cn3, _cn4, _getSortedOptions;
 
     return /*#__PURE__*/_react.default.createElement("div", {
-      className: (0, _classnames.default)("".concat(RC, "__list-wrapper"), (0, _defineProperty2.default)({}, "".concat(RC, "__list-wrapper--fixed-height"), isFixedMaxHeight)),
+      className: (0, _classnames.default)("".concat(RC, "__list-wrapper"), (_cn3 = {}, (0, _defineProperty2.default)(_cn3, "".concat(RC, "__list-wrapper--fixed-height"), isFixedMaxHeight), (0, _defineProperty2.default)(_cn3, "".concat(RC, "__list-wrapper--with-bottom-shadow"), isScrollableList && isMobile), (0, _defineProperty2.default)(_cn3, "".concat(RC, "__list-wrapper--with-bottom-shadow-hidden"), scrollTop === scrollHeight), _cn3)),
       ref: dropdownListWrapperRef
-    }, /*#__PURE__*/_react.default.createElement("div", {
-      className: (0, _classnames.default)("".concat(RC, "__list-header"), (0, _defineProperty2.default)({}, "".concat(RC, "__list-header-with-shadow"), isScrollableList))
+    }, isMobile && /*#__PURE__*/_react.default.createElement("div", {
+      className: (0, _classnames.default)("".concat(RC, "__list-header"), (_cn4 = {}, (0, _defineProperty2.default)(_cn4, "".concat(RC, "__list-header-with-shadow"), isScrollableList && isMobile), (0, _defineProperty2.default)(_cn4, "".concat(RC, "__list-header-with-shadow-hidden"), scrollTop === 0), _cn4))
     }, /*#__PURE__*/_react.default.createElement("div", {
       className: (0, _classnames.default)("".concat(RC, "__list-header-row"))
     }, /*#__PURE__*/_react.default.createElement("div", {
@@ -409,9 +454,9 @@ var Dropdown = function Dropdown(_ref) {
       onClick: function onClick() {
         return setIsOpen(false);
       }
-    }))), isSearchable && /*#__PURE__*/_react.default.createElement("div", {
+    }))), (isSearchable || getTotalOptions() > (minItemsForShowMobileSearch || MIN_ITEMS_FOR_SHOW_MOBILE_SEARCH)) && /*#__PURE__*/_react.default.createElement("div", {
       className: (0, _classnames.default)("".concat(RC, "__list-header-row"))
-    }, /*#__PURE__*/_react.default.createElement(_Input.default, {
+    }, /*#__PURE__*/_react.default.createElement(_Input.default, (0, _extends2.default)({
       ref: searchInputRef,
       className: "".concat(RC, "__input"),
       value: searchValue !== null && searchValue !== void 0 ? searchValue : selectedLabel,
@@ -432,7 +477,7 @@ var Dropdown = function Dropdown(_ref) {
           setIsOpen(true);
         }
       }
-    }))), /*#__PURE__*/_react.default.createElement("div", {
+    }, attributesOfNativeInput)))), /*#__PURE__*/_react.default.createElement("div", {
       className: (0, _classnames.default)("".concat(RC, "__list"), (0, _defineProperty2.default)({}, "".concat(RC, "__list-top"), isListTop)),
       ref: dropdownListRef
     }, (_getSortedOptions = getSortedOptions(depend.options)) === null || _getSortedOptions === void 0 ? void 0 : _getSortedOptions.map(function (option) {
@@ -480,7 +525,7 @@ var Dropdown = function Dropdown(_ref) {
     }
   }, [isDoNotPullOutListOfMainContainer, dropdownRef.current]);
   (0, _react.useLayoutEffect)(function () {
-    var _getListContainer2;
+    var _getListContainer3;
 
     if (!isMobile) {
       window.addEventListener('resize', setListContainerStyles);
@@ -494,15 +539,15 @@ var Dropdown = function Dropdown(_ref) {
       window.removeEventListener('touchmove', closeList);
     }
 
-    (_getListContainer2 = getListContainer()) === null || _getListContainer2 === void 0 ? void 0 : _getListContainer2.addEventListener('click', closeList);
+    (_getListContainer3 = getListContainer()) === null || _getListContainer3 === void 0 ? void 0 : _getListContainer3.addEventListener('click', closeList);
     return function () {
-      var _getListContainer3;
+      var _getListContainer4;
 
       window.removeEventListener('resize', setListContainerStyles);
       window.removeEventListener('mousewheel', closeList);
       window.removeEventListener('scroll', closeList);
       window.removeEventListener('touchmove', closeList);
-      (_getListContainer3 = getListContainer()) === null || _getListContainer3 === void 0 ? void 0 : _getListContainer3.removeEventListener('click', closeList);
+      (_getListContainer4 = getListContainer()) === null || _getListContainer4 === void 0 ? void 0 : _getListContainer4.removeEventListener('click', closeList);
     };
   }, [getListContainer]);
   (0, _react.useLayoutEffect)(function () {
@@ -516,7 +561,6 @@ var Dropdown = function Dropdown(_ref) {
   }, [value]);
   (0, _react.useEffect)(function () {
     if (!isOpen) {
-      setIsFocusedByClick(false);
       setIsSearchChanged(false);
     }
 
@@ -528,17 +572,6 @@ var Dropdown = function Dropdown(_ref) {
       if (scrollReactionObj && (0, _typeof2.default)(scrollReactionObj) === 'object') removeEventListener('scroll', doScrollCallback);
     };
   }, [isOpen, dropdownListRef]);
-
-  var onKeyDown = function onKeyDown(e) {
-    if (![9, 13].includes(e.keyCode)) return false;
-    setIsOpen(false);
-  };
-
-  var onKeyUp = function onKeyUp(e) {
-    if (![9, 13].includes(e.keyCode)) return false;
-    setIsOpen(true);
-  };
-
   (0, _react.useEffect)(function () {
     if (!searchValue && isSearchInputFocused) {
       setSearchValue(selectedLabel);
@@ -557,13 +590,13 @@ var Dropdown = function Dropdown(_ref) {
     if (isOpen && !isSearchInputFocused && searchInputRef !== null && searchInputRef !== void 0 && searchInputRef.current && !isMobile) searchInputRef === null || searchInputRef === void 0 ? void 0 : (_searchInputRef$curre = searchInputRef.current) === null || _searchInputRef$curre === void 0 ? void 0 : _searchInputRef$curre.focus();
 
     if (isOpen) {
-      var _getListContainer4;
+      var _getListContainer5;
 
-      (_getListContainer4 = getListContainer()) === null || _getListContainer4 === void 0 ? void 0 : _getListContainer4.classList.add('dropdown__container--opened');
+      (_getListContainer5 = getListContainer()) === null || _getListContainer5 === void 0 ? void 0 : _getListContainer5.classList.add('dropdown__container--opened');
     } else {
-      var _getListContainer5;
+      var _getListContainer6;
 
-      (_getListContainer5 = getListContainer()) === null || _getListContainer5 === void 0 ? void 0 : _getListContainer5.classList.remove('dropdown__container--opened');
+      (_getListContainer6 = getListContainer()) === null || _getListContainer6 === void 0 ? void 0 : _getListContainer6.classList.remove('dropdown__container--opened');
     }
 
     if (!isOpen && isMobile) {
@@ -571,7 +604,7 @@ var Dropdown = function Dropdown(_ref) {
     }
   }, [isOpen]);
   (0, _react.useEffect)(function () {
-    if (isOpen && isMobile) {
+    if (isOpen && isMobile && dropdownListRef !== null && dropdownListRef !== void 0 && dropdownListRef.current) {
       var _dropdownListRef$curr, _dropdownListRef$curr2;
 
       setIsScrollableList((dropdownListRef === null || dropdownListRef === void 0 ? void 0 : (_dropdownListRef$curr = dropdownListRef.current) === null || _dropdownListRef$curr === void 0 ? void 0 : _dropdownListRef$curr.scrollHeight) > (dropdownListRef === null || dropdownListRef === void 0 ? void 0 : (_dropdownListRef$curr2 = dropdownListRef.current) === null || _dropdownListRef$curr2 === void 0 ? void 0 : _dropdownListRef$curr2.clientHeight));
@@ -582,7 +615,31 @@ var Dropdown = function Dropdown(_ref) {
         setIsFixedMaxHeight((dropdownListRef === null || dropdownListRef === void 0 ? void 0 : (_dropdownListRef$curr3 = dropdownListRef.current) === null || _dropdownListRef$curr3 === void 0 ? void 0 : _dropdownListRef$curr3.scrollHeight) > (dropdownListRef === null || dropdownListRef === void 0 ? void 0 : (_dropdownListRef$curr4 = dropdownListRef.current) === null || _dropdownListRef$curr4 === void 0 ? void 0 : _dropdownListRef$curr4.clientHeight));
       }
     }
-  }, [isOpen, isMobile, dropdownListRef === null || dropdownListRef === void 0 ? void 0 : (_dropdownListRef$curr5 = dropdownListRef.current) === null || _dropdownListRef$curr5 === void 0 ? void 0 : _dropdownListRef$curr5.scrollHeight, dropdownListRef === null || dropdownListRef === void 0 ? void 0 : (_dropdownListRef$curr6 = dropdownListRef.current) === null || _dropdownListRef$curr6 === void 0 ? void 0 : _dropdownListRef$curr6.clientHeight]);
+  }, [isOpen, isMobile, dropdownListRef === null || dropdownListRef === void 0 ? void 0 : dropdownListRef.current, dropdownListRef === null || dropdownListRef === void 0 ? void 0 : (_dropdownListRef$curr5 = dropdownListRef.current) === null || _dropdownListRef$curr5 === void 0 ? void 0 : _dropdownListRef$curr5.scrollHeight, dropdownListRef === null || dropdownListRef === void 0 ? void 0 : (_dropdownListRef$curr6 = dropdownListRef.current) === null || _dropdownListRef$curr6 === void 0 ? void 0 : _dropdownListRef$curr6.clientHeight]);
+  (0, _react.useEffect)(function () {
+    var setScrollTopValue = function setScrollTopValue(e) {
+      setScrollTop(e.target.scrollTop);
+    };
+
+    if (isOpen && isMobile && dropdownListRef !== null && dropdownListRef !== void 0 && dropdownListRef.current) {
+      var _dropdownListRef$curr7;
+
+      dropdownListRef === null || dropdownListRef === void 0 ? void 0 : (_dropdownListRef$curr7 = dropdownListRef.current) === null || _dropdownListRef$curr7 === void 0 ? void 0 : _dropdownListRef$curr7.addEventListener('scroll', setScrollTopValue);
+    }
+
+    return function () {
+      var _dropdownListRef$curr8;
+
+      dropdownListRef === null || dropdownListRef === void 0 ? void 0 : (_dropdownListRef$curr8 = dropdownListRef.current) === null || _dropdownListRef$curr8 === void 0 ? void 0 : _dropdownListRef$curr8.removeEventListener('scroll', setScrollTopValue);
+    };
+  }, [isOpen, isMobile, dropdownListRef === null || dropdownListRef === void 0 ? void 0 : dropdownListRef.current]);
+  (0, _react.useEffect)(function () {
+    if (dropdownListRef !== null && dropdownListRef !== void 0 && dropdownListRef.current) {
+      var _dropdownListRef$curr9, _dropdownListRef$curr10;
+
+      setScrollHeight((dropdownListRef === null || dropdownListRef === void 0 ? void 0 : (_dropdownListRef$curr9 = dropdownListRef.current) === null || _dropdownListRef$curr9 === void 0 ? void 0 : _dropdownListRef$curr9.scrollHeight) - (dropdownListRef === null || dropdownListRef === void 0 ? void 0 : (_dropdownListRef$curr10 = dropdownListRef.current) === null || _dropdownListRef$curr10 === void 0 ? void 0 : _dropdownListRef$curr10.clientHeight));
+    }
+  }, [scrollTop, dropdownListRef === null || dropdownListRef === void 0 ? void 0 : dropdownListRef.current]);
   var postfixText = selectedLabel && ((_filteredOptions$find = filteredOptions.find(function (option) {
     return option.value === value;
   })) === null || _filteredOptions$find === void 0 ? void 0 : _filteredOptions$find.postfix) || null;
@@ -626,7 +683,7 @@ var Dropdown = function Dropdown(_ref) {
   }, postfixText)), /*#__PURE__*/_react.default.createElement("span", {
     className: (0, _classnames.default)("".concat(RC, "__arrow"), (0, _defineProperty2.default)({}, "".concat(RC, "__arrow_active"), isOpen)),
     onClick: toggleList
-  }, isMobile ? /*#__PURE__*/_react.default.createElement(_CustomIcons.ChevronUpDown, null) : isOpen ? /*#__PURE__*/_react.default.createElement(_reactFeather.ChevronUp, null) : /*#__PURE__*/_react.default.createElement(_reactFeather.ChevronDown, null))), isOpen && renderListContainer());
+  }, isMobile ? /*#__PURE__*/_react.default.createElement(_reactFeather.Code, null) : isOpen ? /*#__PURE__*/_react.default.createElement(_reactFeather.ChevronUp, null) : /*#__PURE__*/_react.default.createElement(_reactFeather.ChevronDown, null))), isOpen && renderListContainer());
 };
 
 var _default = Dropdown;

package/dist/Atomic/FormElements/Dropdown/Dropdown.scss

@@ -283,6 +283,22 @@
 
 @media (max-width: 767px) {
   .dropdown {
+    &__arrow {
+      top: 50%!important;
+      transform: translateY(-50%) rotate(90deg)!important;
+      right: $spacing-m!important;
+      width: 16px;
+      height: 16px;
+      text-align: center;
+
+      svg {
+        display: flex;
+        position: relative!important;
+        top: 5px!important;
+        right: unset!important;
+        height: 12px;
+      }
+    }
     &__container {
       overflow: hidden!important;
 
@@ -311,6 +327,23 @@
         border-radius: $spacing-l!important;
         overflow: hidden;
 
+        &--with-bottom-shadow::after {
+          content: "";
+          width: 100%;
+          height: 15px;
+          position: absolute;
+          bottom: 0;
+          background: linear-gradient(180deg, rgba(212, 218, 230, 0.50) 0%, rgba(212, 218, 230, 0.30) 21.35%, rgba(247, 248, 250, 0.00) 100%);
+          z-index: 6;
+          transform: rotate(180deg);
+          opacity: 1;
+          transition: all 0.2s;
+        }
+
+        &--with-bottom-shadow-hidden::after {
+          opacity: 0;
+        }
+
         &--fixed-height {
           height: 500px!important;
         }
@@ -348,31 +381,63 @@
               background: unset!important;
             }
           }
-        }
 
-        &-with-shadow {
+
+        .input__close {
+          padding: $spacing-xs;
+          border-radius: 2px;
+          background: var(--bg-gray-box, #F0F1F4);
+          width: 24px;
+          min-width: 24px;
+          height: 24px;
+          box-sizing: border-box;
+          display: flex;
+          align-items: center;
+
+          &::before,
           &::after {
-            content: "";
-            position: absolute;
-            left: 0;
-            bottom: -15px;
-            width: 100%;
-            height: 15px;
-            background: linear-gradient(180deg, rgba(212, 218, 230, 0.50) 0%, rgba(212, 218, 230, 0.30) 21.35%, rgba(247, 248, 250, 0.00) 100%);
+            height: 12px;
+            top: 50%;
+            transform: translateY(-50%) rotate(45deg);
+            border-radius: 8px;
+            background-color: #171D33;
           }
+          &::after {
+            transform: translateY(-50%) rotate(-45deg);
+          }
+        }
+        }
+
+        &-with-shadow::after {
+          content: "";
+          position: absolute;
+          left: 0;
+          bottom: -15px;
+          width: 100%;
+          height: 15px;
+          background: linear-gradient(180deg, rgba(212, 218, 230, 0.50) 0%, rgba(212, 218, 230, 0.30) 21.35%, rgba(247, 248, 250, 0.00) 100%);
+          z-index: 10;
+          opacity: 1;
+          transition: all 0.2s;
+        }
+
+        &-with-shadow-hidden::after {
+          opacity: 0;
         }
       }
 
       &-close-icon {
         display: flex;
         align-items: center;
+        justify-content: center;
         position: absolute;
         top: 0;
         right: 0;
         height: 100%;
         padding: $spacing-m;
-        width: 16px;
-        height: 24px;
+        width: 50px;
+        height: 50px;
+        box-sizing: border-box;
 
         svg {
           width: 16px;
@@ -406,6 +471,15 @@
       padding: 10px $spacing-s!important;
       line-height: 24px;
 
+      &-label {
+        white-space: wrap!important;
+
+        span.bg--yellow {
+          background-color: unset!important;
+          font-weight: 600;
+        }
+      }
+
       &_active {
         border-radius: 6px;
         background: var(--bg-gray-box, #F0F1F4)!important;
@@ -413,3 +487,4 @@
     }
   }
 }
+

package/dist/Atomic/FormElements/TagsDropdown/TagsDropdown.js

@@ -33,8 +33,6 @@ var _CheckboxInput = _interopRequireDefault(require("../../FormElements/Checkbox
 
 var _Input = _interopRequireDefault(require("../../FormElements/Input/Input"));
 
-var _CustomIcons = require("../../../Molecular/CustomIcons");
-
 var _fieldValueFormatters = require("../../../Functions/fieldValueFormatters");
 
 var _useIsMobile2 = _interopRequireDefault(require("../../../Functions/useIsMobile"));
@@ -50,6 +48,7 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
 var RC = 'tags-dropdown';
+var MIN_ITEMS_FOR_SHOW_MOBILE_SEARCH = 10;
 
 var TagsDropdown = function TagsDropdown(_ref) {
   var _dropdownListWrapperR, _dropdownListWrapperR2, _dropdownListRef$curr5, _dropdownListRef$curr6;
@@ -106,11 +105,15 @@ var TagsDropdown = function TagsDropdown(_ref) {
       _ref$isSearchable = _ref.isSearchable,
       isSearchable = _ref$isSearchable === void 0 ? true : _ref$isSearchable,
       _ref$attributesOfNati = _ref.attributesOfNativeInput,
-      attributesOfNativeInput = _ref$attributesOfNati === void 0 ? {} : _ref$attributesOfNati;
+      attributesOfNativeInput = _ref$attributesOfNati === void 0 ? {} : _ref$attributesOfNati,
+      withMobileLogic = _ref.withMobileLogic,
+      _ref$minItemsForShowM = _ref.minItemsForShowMobileSearch,
+      minItemsForShowMobileSearch = _ref$minItemsForShowM === void 0 ? MIN_ITEMS_FOR_SHOW_MOBILE_SEARCH : _ref$minItemsForShowM;
 
   var _useIsMobile = (0, _useIsMobile2.default)(),
-      isMobile = _useIsMobile.isMobile;
+      isMobileProp = _useIsMobile.isMobile;
 
+  var isMobile = isMobileProp && withMobileLogic;
   var dropdownId = fieldKey || id;
 
   var _useState = (0, _react.useState)(false),
@@ -143,6 +146,16 @@ var TagsDropdown = function TagsDropdown(_ref) {
       isFixedMaxHeight = _useState10[0],
       setIsFixedMaxHeight = _useState10[1];
 
+  var _useState11 = (0, _react.useState)(0),
+      _useState12 = (0, _slicedToArray2.default)(_useState11, 2),
+      scrollTop = _useState12[0],
+      setScrollTop = _useState12[1];
+
+  var _useState13 = (0, _react.useState)(1),
+      _useState14 = (0, _slicedToArray2.default)(_useState13, 2),
+      scrollHeight = _useState14[0],
+      setScrollHeight = _useState14[1];
+
   var singleLevelOptions = options === null || options === void 0 ? void 0 : options.reduce(function (acc, item) {
     return [].concat((0, _toConsumableArray2.default)(acc), (0, _toConsumableArray2.default)(item.groupName ? item.list : [item]));
   }, []);
@@ -212,6 +225,7 @@ var TagsDropdown = function TagsDropdown(_ref) {
     return /*#__PURE__*/_react.default.createElement("button", {
       key: title === null || title === void 0 ? void 0 : (_title$toString = title.toString()) === null || _title$toString === void 0 ? void 0 : _title$toString.replace(/ /g, '_'),
       onClick: function onClick(e) {
+        e.preventDefault();
         e.stopPropagation();
         onChangeHandler(item);
       },
@@ -235,7 +249,10 @@ var TagsDropdown = function TagsDropdown(_ref) {
     }, description)), isMobile && /*#__PURE__*/_react.default.createElement(_CheckboxInput.default, {
       value: chosenOptions === null || chosenOptions === void 0 ? void 0 : chosenOptions.some(function (value) {
         return value === item.value;
-      })
+      }),
+      onChange: function onChange(v) {
+        onChangeHandler(item);
+      }
     }));
   };
 
@@ -281,6 +298,13 @@ var TagsDropdown = function TagsDropdown(_ref) {
     var dropdownList = document.createElement('div');
     dropdownList.setAttribute('id', dropdownId);
     dropdownList.classList.add('tags-dropdown__container');
+
+    if (isMobile) {
+      dropdownList.addEventListener('click', function (e) {
+        if (e.target.id === dropdownId) setIsOpen(false);
+      });
+    }
+
     getParentNode().append(dropdownList);
   };
 
@@ -364,13 +388,29 @@ var TagsDropdown = function TagsDropdown(_ref) {
     }, []);
   };
 
+  var getTotalOptions = (0, _react.useCallback)(function () {
+    return options === null || options === void 0 ? void 0 : options.reduce(function (result, item) {
+      if (item !== null && item !== void 0 && item.list) {
+        var _item$list;
+
+        result += (item === null || item === void 0 ? void 0 : (_item$list = item.list) === null || _item$list === void 0 ? void 0 : _item$list.length) || 0;
+      } else {
+        ++result;
+      }
+
+      return result;
+    }, 0);
+  }, [options]);
+
   var getListMarkUp = function getListMarkUp() {
+    var _cn6, _cn7;
+
     var filteredOptions = getFilteredOptions(options);
     return /*#__PURE__*/_react.default.createElement("div", {
       ref: dropdownListWrapperRef,
       className: (0, _classnames.default)("".concat(RC, "__selector-wrapper"), (0, _defineProperty2.default)({}, "".concat(RC, "__selector-wrapper--fixed-height"), isFixedMaxHeight && isMobile))
     }, headerContent || isMobile ? /*#__PURE__*/_react.default.createElement("div", {
-      className: (0, _classnames.default)("".concat(RC, "__header"), (0, _defineProperty2.default)({}, "".concat(RC, "__header-with-shadow"), isScrollableList && isMobile))
+      className: (0, _classnames.default)("".concat(RC, "__header"), (_cn6 = {}, (0, _defineProperty2.default)(_cn6, "".concat(RC, "__header-with-shadow"), isScrollableList && isMobile), (0, _defineProperty2.default)(_cn6, "".concat(RC, "__header-with-shadow-hidden"), scrollTop === 0), _cn6))
     }, isMobile && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
       className: (0, _classnames.default)("".concat(RC, "__header-row"))
     }, /*#__PURE__*/_react.default.createElement("div", {
@@ -386,9 +426,9 @@ var TagsDropdown = function TagsDropdown(_ref) {
         e.stopPropagation();
         setIsOpen(false);
       }
-    }))), 1 === 1 && /*#__PURE__*/_react.default.createElement("div", {
+    }))), getTotalOptions() > (minItemsForShowMobileSearch || MIN_ITEMS_FOR_SHOW_MOBILE_SEARCH) && /*#__PURE__*/_react.default.createElement("div", {
       className: (0, _classnames.default)("".concat(RC, "__header-row"))
-    }, /*#__PURE__*/_react.default.createElement(_Input.default, {
+    }, /*#__PURE__*/_react.default.createElement(_Input.default, (0, _extends2.default)({
       className: "".concat(RC, "__input"),
       value: searchValue,
       onChange: function onChange(v) {
@@ -396,13 +436,13 @@ var TagsDropdown = function TagsDropdown(_ref) {
       },
       placeholder: mobileSearchPlaceholder || 'Search',
       withDelete: true,
-      onMouseDown: function onMouseDown() {
+      onMouseDown: function onMouseDown(e) {
         if (!isOpen) {
-          if (!isMobile) setIsSearchInputFocused(true);
+          setIsSearchInputFocused(true);
           setIsOpen(true);
         }
       }
-    }))), headerContent && /*#__PURE__*/_react.default.createElement("div", {
+    }, attributesOfNativeInput)))), headerContent && /*#__PURE__*/_react.default.createElement("div", {
       className: (0, _classnames.default)("".concat(RC, "__header-row"))
     }, headerContent)) : null, /*#__PURE__*/_react.default.createElement("div", {
       ref: dropdownListRef,
@@ -421,7 +461,7 @@ var TagsDropdown = function TagsDropdown(_ref) {
     }) : /*#__PURE__*/_react.default.createElement("div", {
       className: "".concat(RC, "__no-options")
     }, noOptionsText)), footerContent || isMobile ? /*#__PURE__*/_react.default.createElement("div", {
-      className: (0, _classnames.default)("".concat(RC, "__footer"), (0, _defineProperty2.default)({}, "".concat(RC, "__footer-with-shadow"), isScrollableList))
+      className: (0, _classnames.default)("".concat(RC, "__footer"), (_cn7 = {}, (0, _defineProperty2.default)(_cn7, "".concat(RC, "__footer-with-shadow"), isMobile && isScrollableList), (0, _defineProperty2.default)(_cn7, "".concat(RC, "__footer-with-shadow-hidden"), scrollTop === scrollHeight), _cn7))
     }, footerContent, isMobile && /*#__PURE__*/_react.default.createElement("button", {
       onClick: function onClick() {
         return setIsOpen(false);
@@ -488,7 +528,7 @@ var TagsDropdown = function TagsDropdown(_ref) {
     }
   }, [isOpen]);
   (0, _react.useEffect)(function () {
-    if (isOpen && isMobile) {
+    if (isOpen && isMobile, dropdownListRef !== null && dropdownListRef !== void 0 && dropdownListRef.current) {
       var _dropdownListRef$curr, _dropdownListRef$curr2;
 
       setIsScrollableList((dropdownListRef === null || dropdownListRef === void 0 ? void 0 : (_dropdownListRef$curr = dropdownListRef.current) === null || _dropdownListRef$curr === void 0 ? void 0 : _dropdownListRef$curr.scrollHeight) > (dropdownListRef === null || dropdownListRef === void 0 ? void 0 : (_dropdownListRef$curr2 = dropdownListRef.current) === null || _dropdownListRef$curr2 === void 0 ? void 0 : _dropdownListRef$curr2.clientHeight));
@@ -499,7 +539,31 @@ var TagsDropdown = function TagsDropdown(_ref) {
         setIsFixedMaxHeight((dropdownListRef === null || dropdownListRef === void 0 ? void 0 : (_dropdownListRef$curr3 = dropdownListRef.current) === null || _dropdownListRef$curr3 === void 0 ? void 0 : _dropdownListRef$curr3.scrollHeight) > (dropdownListRef === null || dropdownListRef === void 0 ? void 0 : (_dropdownListRef$curr4 = dropdownListRef.current) === null || _dropdownListRef$curr4 === void 0 ? void 0 : _dropdownListRef$curr4.clientHeight));
       }
     }
-  }, [isOpen, isMobile, dropdownListRef === null || dropdownListRef === void 0 ? void 0 : (_dropdownListRef$curr5 = dropdownListRef.current) === null || _dropdownListRef$curr5 === void 0 ? void 0 : _dropdownListRef$curr5.scrollHeight, dropdownListRef === null || dropdownListRef === void 0 ? void 0 : (_dropdownListRef$curr6 = dropdownListRef.current) === null || _dropdownListRef$curr6 === void 0 ? void 0 : _dropdownListRef$curr6.clientHeight]);
+  }, [isOpen, isMobile, dropdownListRef === null || dropdownListRef === void 0 ? void 0 : dropdownListRef.current, dropdownListRef === null || dropdownListRef === void 0 ? void 0 : (_dropdownListRef$curr5 = dropdownListRef.current) === null || _dropdownListRef$curr5 === void 0 ? void 0 : _dropdownListRef$curr5.scrollHeight, dropdownListRef === null || dropdownListRef === void 0 ? void 0 : (_dropdownListRef$curr6 = dropdownListRef.current) === null || _dropdownListRef$curr6 === void 0 ? void 0 : _dropdownListRef$curr6.clientHeight]);
+  (0, _react.useEffect)(function () {
+    var setScrollTopValue = function setScrollTopValue(e) {
+      setScrollTop(e.target.scrollTop);
+    };
+
+    if (isOpen && isMobile && dropdownListRef !== null && dropdownListRef !== void 0 && dropdownListRef.current) {
+      var _dropdownListRef$curr7;
+
+      dropdownListRef === null || dropdownListRef === void 0 ? void 0 : (_dropdownListRef$curr7 = dropdownListRef.current) === null || _dropdownListRef$curr7 === void 0 ? void 0 : _dropdownListRef$curr7.addEventListener('scroll', setScrollTopValue);
+    }
+
+    return function () {
+      var _dropdownListRef$curr8;
+
+      dropdownListRef === null || dropdownListRef === void 0 ? void 0 : (_dropdownListRef$curr8 = dropdownListRef.current) === null || _dropdownListRef$curr8 === void 0 ? void 0 : _dropdownListRef$curr8.removeEventListener('scroll', setScrollTopValue);
+    };
+  }, [isOpen, isMobile, dropdownListRef === null || dropdownListRef === void 0 ? void 0 : dropdownListRef.current]);
+  (0, _react.useEffect)(function () {
+    if (dropdownListRef !== null && dropdownListRef !== void 0 && dropdownListRef.current) {
+      var _dropdownListRef$curr9, _dropdownListRef$curr10;
+
+      setScrollHeight((dropdownListRef === null || dropdownListRef === void 0 ? void 0 : (_dropdownListRef$curr9 = dropdownListRef.current) === null || _dropdownListRef$curr9 === void 0 ? void 0 : _dropdownListRef$curr9.scrollHeight) - (dropdownListRef === null || dropdownListRef === void 0 ? void 0 : (_dropdownListRef$curr10 = dropdownListRef.current) === null || _dropdownListRef$curr10 === void 0 ? void 0 : _dropdownListRef$curr10.clientHeight));
+    }
+  }, [scrollTop, dropdownListRef === null || dropdownListRef === void 0 ? void 0 : dropdownListRef.current]);
   return /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _classnames.default)(RC, className, (0, _defineProperty2.default)({}, "".concat(RC, "_disabled"), disabled)),
     ref: dropdownRef
@@ -554,10 +618,15 @@ var TagsDropdown = function TagsDropdown(_ref) {
     placeholder: placeholder || 'Select from list',
     onKeyDown: function onKeyDown(e) {
       return onKeyPress(e, searchValue);
+    },
+    onFocus: function onFocus(e) {
+      var _e$target;
+
+      if (isMobile) e === null || e === void 0 ? void 0 : (_e$target = e.target) === null || _e$target === void 0 ? void 0 : _e$target.blur();
     }
   }, attributesOfNativeInput)) : '', isOpen && renderListContainer(), /*#__PURE__*/_react.default.createElement("span", {
     className: (0, _classnames.default)("".concat(RC, "__arrow"), (0, _defineProperty2.default)({}, "".concat(RC, "__arrow_active"), isOpen))
-  }, isMobile ? /*#__PURE__*/_react.default.createElement(_CustomIcons.ChevronUpDown, null) : isOpen ? /*#__PURE__*/_react.default.createElement(_reactFeather.ChevronUp, {
+  }, isMobile ? /*#__PURE__*/_react.default.createElement(_reactFeather.Code, null) : isOpen ? /*#__PURE__*/_react.default.createElement(_reactFeather.ChevronUp, {
     className: "color--text"
   }) : /*#__PURE__*/_react.default.createElement(_reactFeather.ChevronDown, {
     className: "color--text"

package/dist/Atomic/FormElements/TagsDropdown/TagsDropdown.scss

@@ -353,6 +353,30 @@
             background: unset!important;
           }
         }
+
+        .input__close {
+          padding: $spacing-xs;
+          border-radius: 2px;
+          background: var(--bg-gray-box, #F0F1F4);
+          width: 24px;
+          min-width: 24px;
+          height: 24px;
+          box-sizing: border-box;
+          display: flex;
+          align-items: center;
+
+          &::before,
+          &::after {
+            height: 12px;
+            top: 50%;
+            transform: translateY(-50%) rotate(45deg);
+            border-radius: 8px;
+            background-color: #171D33;
+          }
+          &::after {
+            transform: translateY(-50%) rotate(-45deg);
+          }
+        }
       }
     }
 
@@ -381,8 +405,9 @@
       right: 0;
       height: 100%;
       padding: $spacing-m;
-      width: 16px;
-      height: 24px;
+      width: 50px;
+      height: 50px;
+      box-sizing: border-box;
 
       svg {
         width: 16px;
@@ -444,7 +469,17 @@
     }
 
     &__arrow {
-      top: 10px!important;
+      top: 11px!important;
+      width: 16px;
+      height: 16px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      svg {
+        height: 12px;
+        transform: rotate(90deg);
+      }
     }
 
     &__no-options {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "intelicoreact",
-  "version": "1.2.56",
+  "version": "1.2.57",
   "description": "",
   "main": "dist/index.js",
   "files": [