intelicoreact 1.2.48 → 1.2.50

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

@@ -37,6 +37,8 @@ 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,7 +54,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 var RC = 'dropdown';
 
 var Dropdown = function Dropdown(_ref) {
-  var _options$find, _dropdownListRef$curr5, _dropdownListRef$curr6, _filteredOptions$find;
+  var _options$find, _dropdownListWrapperR4, _dropdownListWrapperR5, _dropdownListRef$curr5, _dropdownListRef$curr6, _filteredOptions$find;
 
   var label = _ref.label,
       _ref$options = _ref.options,
@@ -400,7 +402,11 @@ var Dropdown = function Dropdown(_ref) {
       onClick: function onClick() {
         return setIsOpen(false);
       }
-    }, /*#__PURE__*/_react.default.createElement(_reactFeather.X, null))), isSearchable && /*#__PURE__*/_react.default.createElement("div", {
+    }, /*#__PURE__*/_react.default.createElement(_reactFeather.X, {
+      onClick: function onClick() {
+        return setIsOpen(false);
+      }
+    }))), isSearchable && /*#__PURE__*/_react.default.createElement("div", {
       className: (0, _classnames.default)("".concat(RC, "__list-header-row"))
     }, /*#__PURE__*/_react.default.createElement(_Input.default, {
       ref: searchInputRef,
@@ -410,6 +416,7 @@ var Dropdown = function Dropdown(_ref) {
         return onSearchHandler(v);
       },
       placeholder: placeholder || 'Search',
+      withDelete: true,
       onFocus: function onFocus() {
         return setIsSearchInputFocused(true);
       },
@@ -493,9 +500,9 @@ var Dropdown = function Dropdown(_ref) {
       (_getListContainer3 = getListContainer()) === null || _getListContainer3 === void 0 ? void 0 : _getListContainer3.removeEventListener('click', closeList);
     };
   }, [getListContainer]);
-  (0, _react.useEffect)(function () {
+  (0, _react.useLayoutEffect)(function () {
     setListContainerStyles();
-  }, [isOpen, searchValue]);
+  }, [isOpen, searchValue, isMobile, options, dropdownListWrapperRef === null || dropdownListWrapperRef === void 0 ? void 0 : (_dropdownListWrapperR4 = dropdownListWrapperRef.current) === null || _dropdownListWrapperR4 === void 0 ? void 0 : (_dropdownListWrapperR5 = _dropdownListWrapperR4.getBoundingClientRect()) === null || _dropdownListWrapperR5 === void 0 ? void 0 : _dropdownListWrapperR5.height]);
   (0, _react.useEffect)(function () {
     document.addEventListener('click', handleClickOutside, true);
     return function () {
@@ -542,7 +549,7 @@ var Dropdown = function Dropdown(_ref) {
   (0, _react.useEffect)(function () {
     var _searchInputRef$curre;
 
-    if (isOpen && !isSearchInputFocused && searchInputRef !== null && searchInputRef !== void 0 && searchInputRef.current) searchInputRef === null || searchInputRef === void 0 ? void 0 : (_searchInputRef$curre = searchInputRef.current) === null || _searchInputRef$curre === void 0 ? void 0 : _searchInputRef$curre.focus();
+    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;
@@ -614,41 +621,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("svg", {
-    width: "16",
-    height: "16",
-    viewBox: "0 0 16 16",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg"
-  }, /*#__PURE__*/_react.default.createElement("mask", {
-    id: "mask0_38955_3473",
-    style: {
-      maskType: 'alpha'
-    },
-    maskUnits: "userSpaceOnUse",
-    x: "0",
-    y: "0",
-    width: "16",
-    height: "16"
-  }, /*#__PURE__*/_react.default.createElement("path", {
-    d: "M5 10L8 13L11 10",
-    stroke: "#171D33",
-    strokeWidth: "1.00032",
-    strokeLinecap: "round",
-    strokeLinejoin: "round"
-  }), /*#__PURE__*/_react.default.createElement("path", {
-    d: "M5 6L8 3L11 6",
-    stroke: "#171D33",
-    strokeWidth: "1.00032",
-    strokeLinecap: "round",
-    strokeLinejoin: "round"
-  })), /*#__PURE__*/_react.default.createElement("g", {
-    mask: "url(#mask0_38955_3473)"
-  }, /*#__PURE__*/_react.default.createElement("rect", {
-    width: "16",
-    height: "16",
-    fill: "#171D33"
-  }))) : isOpen ? /*#__PURE__*/_react.default.createElement(_reactFeather.ChevronUp, null) : /*#__PURE__*/_react.default.createElement(_reactFeather.ChevronDown, null))), isOpen && renderListContainer());
+  }, 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());
 };
 
 var _default = Dropdown;

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

@@ -300,7 +300,8 @@
 
     &__container &__list {
       top: 0;
-      padding: 0 $spacing-m!important;
+      padding:$spacing-m!important;
+      padding-top: 0!important;
 
       &-wrapper {
         box-sizing: border-box;
@@ -336,6 +337,16 @@
 
           .input__wrap {
             width: 100%;
+            display: flex;
+            align-items: center;
+            padding-right: $spacing-s;
+            border-radius: 6px;
+            border: 1px solid var(--form-input-border, #E1E8F1);
+            background: var(--black-bg-color, #F8FBFF)!important;
+
+            input {
+              background: unset!important;
+            }
           }
         }
 
@@ -373,6 +384,7 @@
 
     &-group {
       margin: 0;
+      margin-bottom: $spacing-xs;
 
       &:last-child {
         margin-bottom: $spacing-m;
@@ -383,7 +395,7 @@
         margin-bottom: $spacing-s;
         font-size: 11px;
         padding: 10px 0px 6px 0px;
-        border-bottom: 1px solid var(--black-gray-light-divider, rgba(58, 72, 122, 0.15));
+        border-bottom: 1px solid rgba(58, 72, 122, 0.15);
       }
     }
 

package/dist/Atomic/FormElements/InputDateRange/components/SelectItem.js

@@ -11,6 +11,8 @@ var _react = _interopRequireDefault(require("react"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
+var _CustomIcons = require("../../../../Molecular/CustomIcons");
+
 var SelectItem = function SelectItem(_ref) {
   var item = _ref.item,
       label = _ref.label,
@@ -28,20 +30,9 @@ var SelectItem = function SelectItem(_ref) {
     onMouseEnter: onMouseEnter,
     "data-item": item,
     "data-testid": "selectItem--key-".concat(testId, "--label-").concat(label)
-  }, isActive && /*#__PURE__*/_react.default.createElement("svg", {
-    className: (0, _classnames.default)('opened-part__intervals-item-icon-active'),
-    width: "16",
-    height: "16",
-    viewBox: "0 0 16 16",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg"
-  }, /*#__PURE__*/_react.default.createElement("path", {
-    d: "M13.3333 4L5.99999 11.3333L2.66666 8",
-    stroke: "black",
-    strokeWidth: "1.33333",
-    strokeLinecap: "round",
-    strokeLinejoin: "round"
-  })), label);
+  }, isActive && /*#__PURE__*/_react.default.createElement(_CustomIcons.Check2, {
+    className: (0, _classnames.default)('opened-part__intervals-item-icon-active')
+  }), label);
 };
 
 var _default = SelectItem;

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

@@ -29,17 +29,31 @@ var _TagList = _interopRequireDefault(require("../../UI/TagList/TagList"));
 
 var _Tag = _interopRequireDefault(require("../../UI/Tag/Tag"));
 
+var _CheckboxInput = _interopRequireDefault(require("../../FormElements/CheckboxInput/CheckboxInput"));
+
+var _Input = _interopRequireDefault(require("../../FormElements/Input/Input"));
+
+var _CustomIcons = require("../../../Molecular/CustomIcons");
+
 var _fieldValueFormatters = require("../../../Functions/fieldValueFormatters");
 
+var _useIsMobile2 = _interopRequireDefault(require("../../../Functions/useIsMobile"));
+
 require("./TagsDropdown.scss");
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+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 TagsDropdown = function TagsDropdown(_ref) {
+  var _dropdownListWrapperR, _dropdownListWrapperR2, _dropdownListRef$curr5, _dropdownListRef$curr6;
+
   var options = _ref.options,
       _ref$chosenOptions = _ref.chosenOptions,
       chosenOptions = _ref$chosenOptions === void 0 ? [] : _ref$chosenOptions,
@@ -72,12 +86,31 @@ var TagsDropdown = function TagsDropdown(_ref) {
       closeOnSelect = _ref$closeOnSelect === void 0 ? false : _ref$closeOnSelect,
       _ref$closeOnRemove = _ref.closeOnRemove,
       closeOnRemove = _ref$closeOnRemove === void 0 ? false : _ref$closeOnRemove,
+      _ref$closeOnRemoveAll = _ref.closeOnRemoveAll,
+      closeOnRemoveAll = _ref$closeOnRemoveAll === void 0 ? false : _ref$closeOnRemoveAll,
+      _ref$closeOnSelectAll = _ref.closeOnSelectAll,
+      closeOnSelectAll = _ref$closeOnSelectAll === void 0 ? false : _ref$closeOnSelectAll,
+      _ref$closeOnSelectMob = _ref.closeOnSelectMobile,
+      closeOnSelectMobile = _ref$closeOnSelectMob === void 0 ? false : _ref$closeOnSelectMob,
+      _ref$closeOnRemoveMob = _ref.closeOnRemoveMobile,
+      closeOnRemoveMobile = _ref$closeOnRemoveMob === void 0 ? false : _ref$closeOnRemoveMob,
+      _ref$closeOnRemoveAll2 = _ref.closeOnRemoveAllMobile,
+      closeOnRemoveAllMobile = _ref$closeOnRemoveAll2 === void 0 ? false : _ref$closeOnRemoveAll2,
+      _ref$closeOnSelectAll2 = _ref.closeOnSelectAllMobile,
+      closeOnSelectAllMobile = _ref$closeOnSelectAll2 === void 0 ? false : _ref$closeOnSelectAll2,
       fieldKey = _ref.fieldKey,
       id = _ref.id,
       _ref$noOptionsText = _ref.noOptionsText,
       noOptionsText = _ref$noOptionsText === void 0 ? 'No options available' : _ref$noOptionsText,
+      mobileSearchPlaceholder = _ref.mobileSearchPlaceholder,
+      _ref$isSearchable = _ref.isSearchable,
+      isSearchable = _ref$isSearchable === void 0 ? true : _ref$isSearchable,
       _ref$attributesOfNati = _ref.attributesOfNativeInput,
       attributesOfNativeInput = _ref$attributesOfNati === void 0 ? {} : _ref$attributesOfNati;
+
+  var _useIsMobile = (0, _useIsMobile2.default)(),
+      isMobile = _useIsMobile.isMobile;
+
   var dropdownId = fieldKey || id;
 
   var _useState = (0, _react.useState)(false),
@@ -91,6 +124,8 @@ var TagsDropdown = function TagsDropdown(_ref) {
       setSearchValue = _useState4[1];
 
   var dropdownRef = (0, _react.useRef)(null);
+  var dropdownListRef = (0, _react.useRef)(null);
+  var dropdownListWrapperRef = (0, _react.useRef)(null);
   var inputRef = (0, _react.useRef)(null);
 
   var _useState5 = (0, _react.useState)(null),
@@ -98,6 +133,16 @@ var TagsDropdown = function TagsDropdown(_ref) {
       initListHeight = _useState6[0],
       setInitListHeight = _useState6[1];
 
+  var _useState7 = (0, _react.useState)(null),
+      _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
+      isScrollableList = _useState8[0],
+      setIsScrollableList = _useState8[1];
+
+  var _useState9 = (0, _react.useState)(false),
+      _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
+      isFixedMaxHeight = _useState10[0],
+      setIsFixedMaxHeight = _useState10[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]));
   }, []);
@@ -116,7 +161,7 @@ var TagsDropdown = function TagsDropdown(_ref) {
   };
 
   var deleteChosen = function deleteChosen(value) {
-    if (closeOnRemove) setIsOpen(false);
+    if (isMobile ? closeOnRemoveMobile : closeOnRemove) setIsOpen(false);
     onChange(chosenOptions.filter(function (item) {
       return item !== value;
     }), 'chosenOptions');
@@ -127,7 +172,7 @@ var TagsDropdown = function TagsDropdown(_ref) {
 
     if ((item === null || item === void 0 ? void 0 : item.closeOnOptionSelect) !== undefined) {
       if (item.closeOnOptionSelect) setIsOpen(false);
-    } else if (closeOnSelect) setIsOpen(false);
+    } else if (isMobile ? closeOnSelectMobile : closeOnSelect) setIsOpen(false);
 
     setSearchValue('');
 
@@ -151,16 +196,29 @@ var TagsDropdown = function TagsDropdown(_ref) {
   var getMarkupForElement = function getMarkupForElement(item) {
     var _title$toString;
 
+    var description = item.description;
     var title = item.title || item.label;
-    return title.toLowerCase().includes((searchValue === null || searchValue === void 0 ? void 0 : searchValue.toLowerCase()) || '') ? /*#__PURE__*/_react.default.createElement("button", {
+
+    var hightlightSearchValue = function hightlightSearchValue(title) {
+      var _title$toLowerCase;
+
+      var index = (_title$toLowerCase = title.toLowerCase()) === null || _title$toLowerCase === void 0 ? void 0 : _title$toLowerCase.indexOf(searchValue.toLowerCase());
+      if (index === -1) return title;
+      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, title.substring(0, index), /*#__PURE__*/_react.default.createElement("span", {
+        className: "search-match"
+      }, title.substring(index, index + (searchValue === null || searchValue === void 0 ? void 0 : searchValue.length))), title.substring(index + (searchValue === null || searchValue === void 0 ? void 0 : searchValue.length)));
+    };
+
+    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() {
-        return onChangeHandler(item);
+      onClick: function onClick(e) {
+        e.stopPropagation();
+        onChangeHandler(item);
       },
       className: (0, _classnames.default)("".concat(RC, "__list-item"), (0, _defineProperty2.default)({}, "".concat(RC, "__list-item_active"), chosenOptions === null || chosenOptions === void 0 ? void 0 : chosenOptions.some(function (value) {
         return value === item.value;
       })), (0, _defineProperty2.default)({}, "".concat(RC, "__list-item_disabled"), item.disabled), (0, _defineProperty2.default)({}, "".concat(RC, "__list-item_freezed"), item === null || item === void 0 ? void 0 : item.isFreezed), item.className)
-    }, /*#__PURE__*/_react.default.createElement("span", {
+    }, !isMobile && /*#__PURE__*/_react.default.createElement("span", {
       className: (0, _classnames.default)("".concat(RC, "__active-icon"), (0, _defineProperty2.default)({}, "".concat(RC, "__active-icon_active"), chosenOptions === null || chosenOptions === void 0 ? void 0 : chosenOptions.some(function (value) {
         return value === item.value;
       })))
@@ -168,7 +226,17 @@ var TagsDropdown = function TagsDropdown(_ref) {
       width: 16,
       height: 16,
       className: "color--text"
-    })), title) : null;
+    })), /*#__PURE__*/_react.default.createElement("div", {
+      className: (0, _classnames.default)("".concat(RC, "__list-item-body"))
+    }, /*#__PURE__*/_react.default.createElement("span", {
+      className: (0, _classnames.default)("".concat(RC, "__list-item-title"))
+    }, hightlightSearchValue(title)), description && /*#__PURE__*/_react.default.createElement("span", {
+      className: (0, _classnames.default)("".concat(RC, "__list-item-description"))
+    }, description)), isMobile && /*#__PURE__*/_react.default.createElement(_CheckboxInput.default, {
+      value: chosenOptions === null || chosenOptions === void 0 ? void 0 : chosenOptions.some(function (value) {
+        return value === item.value;
+      })
+    }));
   };
 
   var prepareOptions = function prepareOptions(options) {
@@ -188,7 +256,7 @@ var TagsDropdown = function TagsDropdown(_ref) {
       var value = _ref4.value;
       return value;
     })) || [])), 'chosenOptions');
-    if (closeOnSelect) setIsOpen(false);
+    if (isMobile ? closeOnSelectAllMobile : closeOnSelectAll) setIsOpen(false);
   };
 
   var unselectAllItems = function unselectAllItems(e) {
@@ -200,7 +268,7 @@ var TagsDropdown = function TagsDropdown(_ref) {
         return value === item;
       })) === null || _prepareOptions2$find === void 0 ? void 0 : _prepareOptions2$find.isFreezed;
     }), 'chosenOptions');
-    if (closeOnRemove) setIsOpen(false);
+    if (isMobile ? closeOnRemoveAllMobile : closeOnRemoveAll) setIsOpen(false);
   };
 
   var getParentNode = function getParentNode() {
@@ -221,7 +289,7 @@ var TagsDropdown = function TagsDropdown(_ref) {
   };
 
   var setListContainerStyles = function setListContainerStyles() {
-    var _dropdownRef$current$, _dropdownRef$current, _getComputedStyle$mar, _getComputedStyle, _getComputedStyle$mar2, _getComputedStyle$max, _getComputedStyle2, _getComputedStyle2$ma, _dl$getBoundingClient, _sw$getBoundingClient;
+    var _dropdownRef$current$, _dropdownRef$current, _getComputedStyle$mar, _getComputedStyle, _getComputedStyle$mar2, _getComputedStyle$max, _getComputedStyle2, _getComputedStyle2$ma, _dl$getBoundingClient, _sw$getBoundingClient, _sw$getBoundingClient2, _lh$getBoundingClient, _lf$getBoundingClient;
 
     var lc = getListContainer();
     if (!lc || !isOpen) return false;
@@ -233,8 +301,10 @@ var TagsDropdown = function TagsDropdown(_ref) {
         left = _ref6.left,
         top = _ref6.top;
 
-    var sw = lc.getElementsByClassName('tags-dropdown__selector-wrapper')[0];
+    var sw = dropdownListWrapperRef === null || dropdownListWrapperRef === void 0 ? void 0 : dropdownListWrapperRef.current;
     var dl = lc.getElementsByClassName('tags-dropdown__list')[0];
+    var lh = sw === null || sw === void 0 ? void 0 : sw.getElementsByClassName('tags-dropdown__header')[0];
+    var lf = sw === null || sw === void 0 ? void 0 : sw.getElementsByClassName('tags-dropdown__footer')[0];
     var margin = parseInt((_getComputedStyle$mar = (_getComputedStyle = getComputedStyle(sw)) === null || _getComputedStyle === void 0 ? void 0 : (_getComputedStyle$mar2 = _getComputedStyle.marginTop) === null || _getComputedStyle$mar2 === void 0 ? void 0 : _getComputedStyle$mar2.replace('px', '')) !== null && _getComputedStyle$mar !== void 0 ? _getComputedStyle$mar : 0);
     var maxHeight = initListHeight !== null && initListHeight !== void 0 ? initListHeight : parseInt((_getComputedStyle$max = (_getComputedStyle2 = getComputedStyle(dl)) === null || _getComputedStyle2 === void 0 ? void 0 : (_getComputedStyle2$ma = _getComputedStyle2.maxHeight) === null || _getComputedStyle2$ma === void 0 ? void 0 : _getComputedStyle2$ma.replace('px', '')) !== null && _getComputedStyle$max !== void 0 ? _getComputedStyle$max : 0);
     if (initListHeight === null) setInitListHeight(maxHeight);
@@ -244,13 +314,13 @@ var TagsDropdown = function TagsDropdown(_ref) {
     var swHeight = sw === null || sw === void 0 ? void 0 : (_sw$getBoundingClient = sw.getBoundingClientRect()) === null || _sw$getBoundingClient === void 0 ? void 0 : _sw$getBoundingClient.height;
     var controlsHeight = swHeight - dlHeight;
     if (swHeight > maxHeight) swHeight = maxHeight - 2 * margin;
-    var maxSwHeight = toTop - margin >= maxHeight || toBottom - margin >= maxHeight ? maxHeight - 3 * margin : toTop > toBottom ? toTop - 3 * margin : toBottom - 4 * margin;
+    var maxSwHeight = isMobile ? (sw === null || sw === void 0 ? void 0 : (_sw$getBoundingClient2 = sw.getBoundingClientRect()) === null || _sw$getBoundingClient2 === void 0 ? void 0 : _sw$getBoundingClient2.height) - (lh === null || lh === void 0 ? void 0 : (_lh$getBoundingClient = lh.getBoundingClientRect()) === null || _lh$getBoundingClient === void 0 ? void 0 : _lh$getBoundingClient.height) - (lf === null || lf === void 0 ? void 0 : (_lf$getBoundingClient = lf.getBoundingClientRect()) === null || _lf$getBoundingClient === void 0 ? void 0 : _lf$getBoundingClient.height) : toTop - margin >= maxHeight || toBottom - margin >= maxHeight ? maxHeight - 3 * margin : toTop > toBottom ? toTop - 3 * margin : toBottom - 4 * margin;
     var listPos = toTop < toBottom || toBottom >= swHeight ? 'bottom' : 'top';
     if (swHeight > (listPos === 'top' ? toTop : toBottom)) swHeight = (listPos === 'top' ? toTop : toBottom) - 3 * margin;
     lc.style.minWidth = "".concat(width, "px");
     lc.style.left = "".concat(left, "px");
     lc.style.top = "".concat(listPos === 'bottom' ? top + height : top - swHeight - 2 * margin, "px");
-    dl.style.maxHeight = "".concat(maxSwHeight - controlsHeight, "px");
+    dl.style.maxHeight = "".concat(isMobile ? maxSwHeight : maxSwHeight - controlsHeight, "px");
   };
 
   var renderListContainer = function renderListContainer() {
@@ -267,29 +337,96 @@ var TagsDropdown = function TagsDropdown(_ref) {
     return false;
   };
 
+  var isItemMatchesSearch = function isItemMatchesSearch(item) {
+    var title = item.title || item.label;
+    return searchValue.length ? title.toLowerCase().includes((searchValue === null || searchValue === void 0 ? void 0 : searchValue.toLowerCase()) || '') : true;
+  };
+
+  var getFilteredOptions = function getFilteredOptions(options) {
+    return options === null || options === void 0 ? void 0 : options.reduce(function (result, option) {
+      if (option.groupName) {
+        var _option$list;
+
+        var filteredGroupItems = option === null || option === void 0 ? void 0 : (_option$list = option.list) === null || _option$list === void 0 ? void 0 : _option$list.filter(function (item) {
+          return isItemMatchesSearch(item);
+        });
+
+        if (filteredGroupItems !== null && filteredGroupItems !== void 0 && filteredGroupItems.length) {
+          result.push(_objectSpread(_objectSpread({}, option), {}, {
+            list: filteredGroupItems
+          }));
+        }
+      } else if (isItemMatchesSearch(option)) {
+        result.push(option);
+      }
+
+      return result;
+    }, []);
+  };
+
   var getListMarkUp = function getListMarkUp() {
+    var filteredOptions = getFilteredOptions(options);
     return /*#__PURE__*/_react.default.createElement("div", {
-      className: "".concat(RC, "__selector-wrapper")
-    }, headerContent ? /*#__PURE__*/_react.default.createElement("div", {
-      className: "".concat(RC, "__header")
-    }, headerContent) : null, /*#__PURE__*/_react.default.createElement("div", {
-      className: "".concat(RC, "__list ").concat(headerContent ? "".concat(RC, "__list--with-header") : '', " ").concat(footerContent ? "".concat(RC, "__list--with-footer") : '')
-    }, (options === null || options === void 0 ? void 0 : options.length) > 0 ? options === null || options === void 0 ? void 0 : options.map(function (option) {
-      var _option$groupName, _option$groupName$toS, _option$list;
+      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))
+    }, 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", {
+      className: (0, _classnames.default)("".concat(RC, "__label"))
+    }, label), /*#__PURE__*/_react.default.createElement("div", {
+      className: (0, _classnames.default)("".concat(RC, "__close-icon")),
+      onClick: function onClick(e) {
+        e.stopPropagation();
+        setIsOpen(false);
+      }
+    }, /*#__PURE__*/_react.default.createElement(_reactFeather.X, {
+      onClick: function onClick(e) {
+        e.stopPropagation();
+        setIsOpen(false);
+      }
+    }))), 1 === 1 && /*#__PURE__*/_react.default.createElement("div", {
+      className: (0, _classnames.default)("".concat(RC, "__header-row"))
+    }, /*#__PURE__*/_react.default.createElement(_Input.default, {
+      className: "".concat(RC, "__input"),
+      value: searchValue,
+      onChange: function onChange(v) {
+        return setSearchValue(v);
+      },
+      placeholder: mobileSearchPlaceholder || 'Search',
+      withDelete: true,
+      onMouseDown: function onMouseDown() {
+        if (!isOpen) {
+          if (!isMobile) setIsSearchInputFocused(true);
+          setIsOpen(true);
+        }
+      }
+    }))), headerContent && /*#__PURE__*/_react.default.createElement("div", {
+      className: (0, _classnames.default)("".concat(RC, "__header-row"))
+    }, headerContent)) : null, /*#__PURE__*/_react.default.createElement("div", {
+      ref: dropdownListRef,
+      className: "".concat(RC, "__list ").concat(headerContent || isMobile ? "".concat(RC, "__list--with-header") : '', " ").concat(footerContent ? "".concat(RC, "__list--with-footer") : '')
+    }, (filteredOptions === null || filteredOptions === void 0 ? void 0 : filteredOptions.length) > 0 ? filteredOptions === null || filteredOptions === void 0 ? void 0 : filteredOptions.map(function (option) {
+      var _option$groupName, _option$groupName$toS, _option$list2;
 
       return option.groupName ? /*#__PURE__*/_react.default.createElement("div", {
         key: (_option$groupName = option.groupName) === null || _option$groupName === void 0 ? void 0 : (_option$groupName$toS = _option$groupName.toString()) === null || _option$groupName$toS === void 0 ? void 0 : _option$groupName$toS.replace(/ /g, '_').concat(Date.now()),
         className: (0, _classnames.default)("".concat(RC, "-group"), option.className)
       }, /*#__PURE__*/_react.default.createElement("span", {
         className: "".concat(RC, "-group__name")
-      }, option.groupName), (_option$list = option.list) === null || _option$list === void 0 ? void 0 : _option$list.map(function (item) {
+      }, option.groupName), (_option$list2 = option.list) === null || _option$list2 === void 0 ? void 0 : _option$list2.map(function (item) {
         return getMarkupForElement(item);
       })) : getMarkupForElement(option);
     }) : /*#__PURE__*/_react.default.createElement("div", {
       className: "".concat(RC, "__no-options")
-    }, noOptionsText)), footerContent ? /*#__PURE__*/_react.default.createElement("div", {
-      className: "".concat(RC, "__footer")
-    }, footerContent) : null);
+    }, noOptionsText)), footerContent || isMobile ? /*#__PURE__*/_react.default.createElement("div", {
+      className: (0, _classnames.default)("".concat(RC, "__footer"), (0, _defineProperty2.default)({}, "".concat(RC, "__footer-with-shadow"), isScrollableList))
+    }, footerContent, isMobile && /*#__PURE__*/_react.default.createElement("button", {
+      onClick: function onClick() {
+        return setIsOpen(false);
+      }
+    }, "Apply", chosenOptions !== null && chosenOptions !== void 0 && chosenOptions.length ? "(".concat(chosenOptions === null || chosenOptions === void 0 ? void 0 : chosenOptions.length, ")") : '')) : null);
   };
 
   var closeList = function closeList(e) {
@@ -303,9 +440,16 @@ var TagsDropdown = function TagsDropdown(_ref) {
     initListContainer();
   }, []);
   (0, _react.useLayoutEffect)(function () {
-    window.addEventListener('resize', setListContainerStyles);
-    window.addEventListener('mousewheel', closeList);
-    window.addEventListener('mouseup', handleClickOutside);
+    if (!isMobile) {
+      window.addEventListener('resize', setListContainerStyles);
+      window.addEventListener('mousewheel', closeList);
+      window.addEventListener('mouseup', handleClickOutside);
+    } else {
+      window.removeEventListener('resize', setListContainerStyles);
+      window.removeEventListener('mousewheel', closeList);
+      window.removeEventListener('mouseup', handleClickOutside);
+    }
+
     return function () {
       window.removeEventListener('resize', setListContainerStyles);
       window.removeEventListener('mousewheel', closeList);
@@ -314,20 +458,48 @@ var TagsDropdown = function TagsDropdown(_ref) {
   }, [getListContainer]);
   (0, _react.useLayoutEffect)(function () {
     setListContainerStyles();
-  }, [isOpen, chosenOptions]);
+  }, [isOpen, chosenOptions, isMobile, dropdownListWrapperRef === null || dropdownListWrapperRef === void 0 ? void 0 : (_dropdownListWrapperR = dropdownListWrapperRef.current) === null || _dropdownListWrapperR === void 0 ? void 0 : (_dropdownListWrapperR2 = _dropdownListWrapperR.getBoundingClientRect()) === null || _dropdownListWrapperR2 === void 0 ? void 0 : _dropdownListWrapperR2.height]);
   (0, _react.useEffect)(function () {
-    document.addEventListener('click', handleClickOutside, true);
+    if (!isMobile) {
+      document.addEventListener('click', handleClickOutside, true);
+    } else {
+      document.removeEventListener('click', handleClickOutside, true);
+    }
+
     return function () {
       return document.removeEventListener('click', handleClickOutside, true);
     };
-  }, []);
+  }, [isMobile]);
   (0, _react.useEffect)(function () {
     var _selectAllButtonRef$c, _unselectAllButtonRef;
 
     var fn = isOpen ? 'addEventListener' : 'removeEventListener';
     selectAllButtonRef === null || selectAllButtonRef === void 0 ? void 0 : (_selectAllButtonRef$c = selectAllButtonRef.current) === null || _selectAllButtonRef$c === void 0 ? void 0 : _selectAllButtonRef$c[fn]('click', selectAllItems, true);
     unselectAllButtonRef === null || unselectAllButtonRef === void 0 ? void 0 : (_unselectAllButtonRef = unselectAllButtonRef.current) === null || _unselectAllButtonRef === void 0 ? void 0 : _unselectAllButtonRef[fn]('click', unselectAllItems, true);
+
+    if (isOpen) {
+      var _getListContainer2;
+
+      (_getListContainer2 = getListContainer()) === null || _getListContainer2 === void 0 ? void 0 : _getListContainer2.classList.add('tags-dropdown__container--opened');
+    } else {
+      var _getListContainer3;
+
+      (_getListContainer3 = getListContainer()) === null || _getListContainer3 === void 0 ? void 0 : _getListContainer3.classList.remove('tags-dropdown__container--opened');
+    }
   }, [isOpen]);
+  (0, _react.useEffect)(function () {
+    if (isOpen && isMobile) {
+      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));
+
+      if (isScrollableList === null) {
+        var _dropdownListRef$curr3, _dropdownListRef$curr4;
+
+        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]);
   return /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _classnames.default)(RC, className, (0, _defineProperty2.default)({}, "".concat(RC, "_disabled"), disabled)),
     ref: dropdownRef
@@ -385,7 +557,9 @@ var TagsDropdown = function TagsDropdown(_ref) {
     }
   }, attributesOfNativeInput)) : '', isOpen && renderListContainer(), /*#__PURE__*/_react.default.createElement("span", {
     className: (0, _classnames.default)("".concat(RC, "__arrow"), (0, _defineProperty2.default)({}, "".concat(RC, "__arrow_active"), isOpen))
-  }, /*#__PURE__*/_react.default.createElement(_reactFeather.ChevronDown, {
+  }, isMobile ? /*#__PURE__*/_react.default.createElement(_CustomIcons.ChevronUpDown, null) : isOpen ? /*#__PURE__*/_react.default.createElement(_reactFeather.ChevronUp, {
+    className: "color--text"
+  }) : /*#__PURE__*/_react.default.createElement(_reactFeather.ChevronDown, {
     className: "color--text"
   }))));
 };