intelicoreact 1.2.47 → 1.2.49

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,28 +337,91 @@ 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")
+      className: (0, _classnames.default)("".concat(RC, "__footer"), (0, _defineProperty2.default)({}, "".concat(RC, "__footer-with-shadow"), isScrollableList))
     }, footerContent) : null);
   };
 
@@ -303,9 +436,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 +454,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 +553,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"
   }))));
 };

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

@@ -40,9 +40,9 @@
 
     cursor: pointer;
 
-    border: 1px solid #E2E5EC;
+    border: 1px solid #e2e5ec;
     border-radius: 3px;
-    background: #FFF;
+    background: #fff;
   }
 
   &__input {
@@ -72,13 +72,13 @@
     height: 30px;
     padding: 4px 32px 6px;
 
-    background: #F8FBFF;
+    background: #f8fbff;
   }
 
   &__header {
     box-sizing: border-box;
 
-    border-bottom: 1px solid #E8E9EC;
+    border-bottom: 1px solid #e8e9ec;
   }
 
   &__selector-wrapper {
@@ -89,7 +89,7 @@
     box-sizing: border-box;
     margin-top: 4px;
 
-    border: 1px solid #E2E5EC;
+    border: 1px solid #e2e5ec;
     box-shadow: 0 4px 25px rgb(0 0 0 / 25%);
   }
 
@@ -107,7 +107,7 @@
 
     text-align: left;
 
-    background: #FFF;
+    background: #fff;
 
     &::-webkit-scrollbar {
       width: 4px;
@@ -160,6 +160,16 @@
         pointer-events: none;
 
         opacity: 1;
+        color: #757f8c;
+      }
+
+      &-body {
+        white-space: wrap;
+        text-align: left;
+      }
+
+      &-description {
+        margin-left: $spacing-xs;
         color: #757F8C;
       }
     }
@@ -220,7 +230,7 @@
   }
 
   &__error {
-    border-color: #F06D8D;
+    border-color: #f06d8d;
   }
 
   .tag {
@@ -251,3 +261,195 @@
     }
   }
 }
+
+@media (max-width: 767px) {
+  .tags-dropdown {
+    &__container {
+      overflow: hidden !important;
+
+      &--opened {
+        width: 100dvw;
+        height: 100dvh;
+        max-height: 100dvh;
+        position: fixed;
+        left: 0 !important;
+        top: 0 !important;
+        background: rgba(23, 29, 51, 0.5);
+        padding: $spacing-s;
+      }
+    }
+
+    &__selector-wrapper {
+      position: absolute;
+      box-sizing: border-box;
+      bottom: $spacing-s;
+      width: calc(100% - $spacing-m);
+      max-height: 500px;
+      border-radius: $spacing-l !important;
+      overflow: hidden;
+      background: $color--light;
+
+      &--fixed-height {
+        height: 500px !important;
+      }
+    }
+
+    &__header,
+    &__footer {
+      height: unset;
+      z-index: 4;
+      background: none;
+      border: none;
+
+      &-with-shadow {
+        &::after {
+          content: '';
+          position: absolute;
+          left: 0;
+          bottom: -15px;
+          width: 100%;
+          height: 15px;
+          background: linear-gradient(
+            180deg,
+            rgba(212, 218, 230, 0.5) 0%,
+            rgba(212, 218, 230, 0.3) 21.35%,
+            rgba(247, 248, 250, 0) 100%
+          );
+        }
+      }
+    }
+
+    &__header {
+      position: relative;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      padding: $spacing-m;
+      color: #3b414b;
+      font-size: 16px;
+      font-weight: 600;
+      line-height: 24px;
+      letter-spacing: 0.1px;
+      gap: $spacing-m;
+
+      &-row {
+        width: 100%;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        min-height: 24px;
+        justify-content: space-between;
+
+        .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;
+          }
+        }
+      }
+    }
+
+    &__footer {
+      position: absolute;
+      bottom: 0;
+      padding: 0;
+
+      &-with-shadow::after {
+        bottom: 0;
+        top: -15px;
+        transform: rotate(180deg);
+      }
+
+      button {
+        width: 100%;
+        height: 40px;
+      }
+    }
+
+    &__close-icon {
+      display: flex;
+      align-items: center;
+      position: absolute;
+      top: 0;
+      right: 0;
+      height: 100%;
+      padding: $spacing-m;
+      width: 16px;
+      height: 24px;
+
+      svg {
+        width: 16px;
+        height: 16px;
+        color: #a0a4b0;
+      }
+    }
+
+    &__container &__list {
+      top: 0;
+      padding: $spacing-m $spacing-m !important;
+      display: flex;
+      flex-direction: column;
+      gap: $spacing-xs;
+      max-height: unset;
+    }
+
+    &-group {
+      margin: 0;
+      display: flex;
+      flex-direction: column;
+      gap: $spacing-xs;
+
+      &:first-child {
+        margin-top: calc($spacing-s * -1);
+      }
+
+      &__name {
+        margin: 0;
+        margin-bottom: $spacing-s;
+        font-size: 11px;
+        padding: 10px 0px 6px 0px;
+        box-shadow: none !important;
+        border-bottom: 1px solid var(--black-gray-light-divider, rgba(58, 72, 122, 0.15));
+      }
+    }
+
+    &__list-item {
+      display: flex;
+      justify-content: space-between;
+      height: auto !important;
+      padding: 10px $spacing-s !important;
+      line-height: 24px;
+      min-height: unset!important;
+
+      &_active {
+        border-radius: 6px;
+        background: var(--bg-gray-box, #f0f1f4) !important;
+      }
+
+      .checkbox-input__input {
+        margin: 0;
+        margin-left: $spacing-s;
+      }
+
+      .search-match {
+        font-weight: 600;
+      }
+    }
+
+    &__arrow {
+      top: 10px!important;
+    }
+
+    &__no-options {
+      padding-left: 0!important;
+      text-align: center;
+    }
+  }
+}