intelicoreact 1.2.47 → 1.2.49

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

@@ -27,14 +27,22 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 var _reactFeather = require("react-feather");
 
-var _DropdownLoader = _interopRequireDefault(require("./components/DropdownLoader"));
-
-require("./Dropdown.scss");
-
 var _fieldValueFormatters = require("../../../Functions/fieldValueFormatters");
 
 var _utils = require("../../../Functions/utils");
 
+var _useIsMobile2 = _interopRequireDefault(require("../../../Functions/useIsMobile"));
+
+var _Input = _interopRequireDefault(require("../../../Atomic/FormElements/Input/Input"));
+
+var _RadioInput = _interopRequireDefault(require("../../../Atomic/FormElements/RadioInput/RadioInput"));
+
+var _CustomIcons = require("../../../Molecular/CustomIcons");
+
+var _DropdownLoader = _interopRequireDefault(require("./components/DropdownLoader"));
+
+require("./Dropdown.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 || _typeof3(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; }
@@ -46,9 +54,10 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 var RC = 'dropdown';
 
 var Dropdown = function Dropdown(_ref) {
-  var _options$find, _filteredOptions$find;
+  var _options$find, _dropdownListWrapperR4, _dropdownListWrapperR5, _dropdownListRef$curr5, _dropdownListRef$curr6, _filteredOptions$find;
 
-  var _ref$options = _ref.options,
+  var label = _ref.label,
+      _ref$options = _ref.options,
       options = _ref$options === void 0 ? [] : _ref$options,
       value = _ref.value,
       error = _ref.error,
@@ -71,6 +80,10 @@ 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;
+
+  var _useIsMobile = (0, _useIsMobile2.default)(),
+      isMobile = _useIsMobile.isMobile;
+
   var dropdownId = fieldKey || id;
 
   var _useState = (0, _react.useState)(false),
@@ -85,6 +98,7 @@ var Dropdown = function Dropdown(_ref) {
 
   var dropdownRef = (0, _react.useRef)(null);
   var dropdownListRef = (0, _react.useRef)(null);
+  var dropdownListWrapperRef = (0, _react.useRef)(null);
   var searchInputRef = (0, _react.useRef)(null);
 
   var _useState5 = (0, _react.useState)(null),
@@ -107,6 +121,16 @@ var Dropdown = function Dropdown(_ref) {
       isSearchInputFocused = _useState12[0],
       setIsSearchInputFocused = _useState12[1];
 
+  var _useState13 = (0, _react.useState)(null),
+      _useState14 = (0, _slicedToArray2.default)(_useState13, 2),
+      isScrollableList = _useState14[0],
+      setIsScrollableList = _useState14[1];
+
+  var _useState15 = (0, _react.useState)(false),
+      _useState16 = (0, _slicedToArray2.default)(_useState15, 2),
+      isFixedMaxHeight = _useState16[0],
+      setIsFixedMaxHeight = _useState16[1];
+
   if (!options) return null;
 
   var moveOtherToEnd = function moveOtherToEnd(options) {
@@ -200,7 +224,7 @@ var Dropdown = function Dropdown(_ref) {
     setSearchValue(inputValue);
   };
 
-  var hightlightedText = function hightlightedText(text, postfix) {
+  var hightlightedText = function hightlightedText(text, postfix, description) {
     var _text;
 
     var prepare = function prepare(text) {
@@ -219,7 +243,8 @@ var Dropdown = function Dropdown(_ref) {
       return "<span class=\"bg--yellow\">".concat(match, "</span>");
     }) : text;
     var postfixPart = postfix ? "<span class=\"dropdown__list-item-postfix\">".concat(postfix, "</span>") : '';
-    return main + postfixPart;
+    var descriptionPart = description ? "<span class=\"dropdown__list-item-description\">".concat(description, "</span>") : '';
+    return main + postfixPart + descriptionPart;
   };
 
   var depend = getDepends(modalBtnTrigger);
@@ -234,13 +259,16 @@ var Dropdown = function Dropdown(_ref) {
         return depend.onChange(item);
       },
       className: (0, _classnames.default)("".concat(RC, "__list-item"), (_cn = {}, (0, _defineProperty2.default)(_cn, "".concat(RC, "__list-item_active"), item.value === value), (0, _defineProperty2.default)(_cn, "".concat(RC, "__list-item_disabled"), item.disabled), _cn), 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"), item.value === value))
     }, /*#__PURE__*/_react.default.createElement(_reactFeather.Check, null)), /*#__PURE__*/_react.default.createElement("div", {
-      className: item.labelClassName || '',
+      className: (0, _classnames.default)("".concat(RC, "__list-item-label"), item.labelClassName || ''),
       dangerouslySetInnerHTML: {
-        __html: hightlightedText(item.label, item.postfix)
+        __html: hightlightedText(item.label, item.postfix, item.description)
       }
+    }), isMobile && /*#__PURE__*/_react.default.createElement(_RadioInput.default, {
+      value: item.value,
+      checked: value
     }));
   };
 
@@ -296,7 +324,7 @@ var Dropdown = function Dropdown(_ref) {
   };
 
   var setListContainerStyles = function setListContainerStyles() {
-    var _dropdownRef$current$, _getComputedStyle$mar, _getComputedStyle, _getComputedStyle$mar2, _getComputedStyle$max, _getComputedStyle2, _getComputedStyle2$ma, _sw$getBoundingClient;
+    var _dropdownRef$current$, _dropdownListWrapperR, _getComputedStyle$mar, _getComputedStyle, _getComputedStyle$mar2, _getComputedStyle$max, _getComputedStyle2, _getComputedStyle2$ma, _sw$getBoundingClient, _dropdownListWrapperR2, _dropdownListWrapperR3, _lh$getBoundingClient;
 
     var lc = getListContainer();
     if (!lc || !isOpen) return false;
@@ -309,13 +337,14 @@ var Dropdown = function Dropdown(_ref) {
         top = _ref3.top;
 
     var sw = lc.getElementsByClassName('dropdown__list')[0];
+    var lh = dropdownListWrapperRef === null || dropdownListWrapperRef === void 0 ? void 0 : (_dropdownListWrapperR = dropdownListWrapperRef.current) === null || _dropdownListWrapperR === void 0 ? void 0 : _dropdownListWrapperR.getElementsByClassName('dropdown__list-header')[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(sw)) === 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);
     var toTop = top - margin;
     var toBottom = windowHeight - top - height - margin * 2;
     var swHeight = sw === null || sw === void 0 ? void 0 : (_sw$getBoundingClient = sw.getBoundingClientRect()) === null || _sw$getBoundingClient === void 0 ? void 0 : _sw$getBoundingClient.height;
-    var maxSwHeight = toTop >= maxHeight || toBottom >= maxHeight ? maxHeight - 3 * margin : toTop > toBottom ? toTop - 3 * margin : toBottom - 4 * margin;
+    var maxSwHeight = isMobile ? (dropdownListWrapperRef === null || dropdownListWrapperRef === void 0 ? void 0 : (_dropdownListWrapperR2 = dropdownListWrapperRef.current) === null || _dropdownListWrapperR2 === void 0 ? void 0 : (_dropdownListWrapperR3 = _dropdownListWrapperR2.getBoundingClientRect()) === null || _dropdownListWrapperR3 === void 0 ? void 0 : _dropdownListWrapperR3.height) - (lh === null || lh === void 0 ? void 0 : (_lh$getBoundingClient = lh.getBoundingClientRect()) === null || _lh$getBoundingClient === void 0 ? void 0 : _lh$getBoundingClient.height) : toTop >= maxHeight || toBottom >= maxHeight ? maxHeight - 3 * margin : toTop > toBottom ? toTop - 3 * margin : toBottom - 4 * margin;
     var listPos = toTop < toBottom || toBottom >= swHeight ? 'bottom' : 'top';
     lc.style.minWidth = "".concat(width, "px");
     lc.style.left = "".concat(left, "px");
@@ -360,6 +389,47 @@ var Dropdown = function Dropdown(_ref) {
     var _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)),
+      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))
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: (0, _classnames.default)("".concat(RC, "__list-header-row"))
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: (0, _classnames.default)("".concat(RC, "__list-label"))
+    }, label), /*#__PURE__*/_react.default.createElement("div", {
+      className: (0, _classnames.default)("".concat(RC, "__list-close-icon")),
+      onClick: function onClick() {
+        return setIsOpen(false);
+      }
+    }, /*#__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,
+      className: "".concat(RC, "__input"),
+      value: searchValue !== null && searchValue !== void 0 ? searchValue : selectedLabel,
+      onChange: function onChange(v) {
+        return onSearchHandler(v);
+      },
+      placeholder: placeholder || 'Search',
+      withDelete: true,
+      onFocus: function onFocus() {
+        return setIsSearchInputFocused(true);
+      },
+      onBlur: function onBlur() {
+        return setIsSearchInputFocused(false);
+      },
+      onMouseDown: function onMouseDown() {
+        if (!isOpen) {
+          setIsSearchInputFocused(true);
+          setIsOpen(true);
+        }
+      }
+    }))), /*#__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) {
@@ -390,7 +460,7 @@ var Dropdown = function Dropdown(_ref) {
       }
     }), !filteredItems.length && !filteredGroups.length && /*#__PURE__*/_react.default.createElement("div", {
       className: "".concat(RC, "__list-item ").concat(RC, "__list-item--no-options")
-    }, noOptionsText), disabled && isOpen && /*#__PURE__*/_react.default.createElement(_DropdownLoader.default, null));
+    }, noOptionsText), disabled && isOpen && /*#__PURE__*/_react.default.createElement(_DropdownLoader.default, null)));
   };
 
   var toggleList = function toggleList(e) {
@@ -405,20 +475,34 @@ var Dropdown = function Dropdown(_ref) {
     initListContainer();
   }, []);
   (0, _react.useLayoutEffect)(function () {
-    window.addEventListener('resize', setListContainerStyles);
-    window.addEventListener('mousewheel', closeList);
-    window.addEventListener('scroll', closeList);
-    window.addEventListener('touchmove', closeList);
+    var _getListContainer2;
+
+    if (!isMobile) {
+      window.addEventListener('resize', setListContainerStyles);
+      window.addEventListener('mousewheel', closeList);
+      window.addEventListener('scroll', closeList);
+      window.addEventListener('touchmove', closeList);
+    } else {
+      window.removeEventListener('resize', setListContainerStyles);
+      window.removeEventListener('mousewheel', closeList);
+      window.removeEventListener('scroll', closeList);
+      window.removeEventListener('touchmove', closeList);
+    }
+
+    (_getListContainer2 = getListContainer()) === null || _getListContainer2 === void 0 ? void 0 : _getListContainer2.addEventListener('click', closeList);
     return function () {
+      var _getListContainer3;
+
       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);
     };
   }, [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 () {
@@ -465,8 +549,35 @@ 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;
+
+      (_getListContainer4 = getListContainer()) === null || _getListContainer4 === void 0 ? void 0 : _getListContainer4.classList.add('dropdown__container--opened');
+    } else {
+      var _getListContainer5;
+
+      (_getListContainer5 = getListContainer()) === null || _getListContainer5 === void 0 ? void 0 : _getListContainer5.classList.remove('dropdown__container--opened');
+    }
+
+    if (!isOpen && isMobile) {
+      setSearchValue(null);
+    }
   }, [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]);
   var postfixText = selectedLabel && ((_filteredOptions$find = filteredOptions.find(function (option) {
     return option.value === value;
   })) === null || _filteredOptions$find === void 0 ? void 0 : _filteredOptions$find.postfix) || null;
@@ -483,7 +594,7 @@ var Dropdown = function Dropdown(_ref) {
     onClick: toggleList,
     onKeyDown: onKeyDown,
     onKeyUp: onKeyUp
-  }, isSearchable ? /*#__PURE__*/_react.default.createElement("input", (0, _extends2.default)({
+  }, isSearchable && !isMobile ? /*#__PURE__*/_react.default.createElement("input", (0, _extends2.default)({
     ref: searchInputRef,
     className: "".concat(RC, "__input"),
     value: isOpen ? searchValue !== null && searchValue !== void 0 ? searchValue : '' : selectedLabel || '',
@@ -510,7 +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
-  }, 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

@@ -8,7 +8,7 @@
 
   width: 100%;
 
-  border-radius: 7px;
+  border-radius: $radii-s;
 
   &__container {
     position: fixed;
@@ -32,9 +32,9 @@
     cursor: pointer;
     text-align: left;
 
-    border: 1px solid #E2E5EC;
-    border-radius: 3px;
-    background: #FFF;
+    border: 1px solid $color--gray--light;
+    border-radius: $radii-xs;
+    background: $color--light;
 
     font-weight: 400;
 
@@ -42,7 +42,7 @@
       overflow: hidden;
 
       max-width: calc(100% - 5px);
-      padding: 0 16px 0 8px;
+      padding: 0 $spacing-m 0 $spacing-s;
 
       white-space: nowrap;
       text-overflow: ellipsis;
@@ -60,7 +60,7 @@
   &__input {
     width: 100%;
     height: 16px;
-    padding: 0 16px 0 8px;
+    padding: 0 $spacing-m 0 $spacing-s;
 
     text-overflow: ellipsis;
 
@@ -80,12 +80,24 @@
     box-sizing: border-box;
     min-width: 100%;
     max-height: 320px;
-    margin-top: 4px;
-    padding: 5px 0;
+    padding: $spacing-xs 0;
 
-    border: 1px solid #E2E5EC;
-    background: #FFF;
-    box-shadow: 0 5px 20px rgb(0 0 0 / 15%);
+    &-wrapper {
+      position: relative;
+      z-index: 6;
+      top: 100%;
+
+      box-sizing: border-box;
+      margin-top: $spacing-xs;
+
+      border: 1px solid $color--gray--light;
+      background: $color--light;
+      box-shadow: 0 5px 20px rgb(0 0 0 / 15%);
+    }
+
+    &-header {
+      display: none;
+    }
 
     &::-webkit-scrollbar {
       width: 4px;
@@ -129,6 +141,16 @@
       font-weight: 400;
       line-height: 24px;
 
+      &-label {
+        white-space: wrap;
+        text-align: left;
+      }
+
+      &-description {
+        margin-left: $spacing-xs;
+        color: #757F8C;
+      }
+
       &--modal {
         position: relative;
 
@@ -172,7 +194,7 @@
       }
 
       &-postfix {
-        margin-left: 5px;
+        margin-left: $spacing-xs;
       }
     }
 
@@ -184,7 +206,7 @@
   &__arrow {
     position: absolute;
     top: 50%;
-    right: 4px;
+    right: $spacing-xs;
 
     display: flex;
     align-items: center;
@@ -237,7 +259,7 @@
   }
 
   &-label {
-    margin-bottom: 5px;
+    margin-bottom: $spacing-xs;
   }
 
   &__error {
@@ -258,3 +280,136 @@
     opacity: 0.5;
   }
 }
+
+@media (max-width: 767px) {
+  .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.50);
+        padding: $spacing-s;
+      }
+    }
+
+    &__container &__list {
+      top: 0;
+      padding:$spacing-m!important;
+      padding-top: 0!important;
+
+      &-wrapper {
+        box-sizing: border-box;
+        position: sticky;
+        bottom: 0;
+        max-height: 500px;
+        border-radius: $spacing-l!important;
+        overflow: hidden;
+
+        &--fixed-height {
+          height: 500px!important;
+        }
+      }
+
+      &-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 {
+          display: flex;
+          flex-direction: row;
+          align-items: center;
+          min-height: 24px;
+
+          .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;
+            }
+          }
+        }
+
+        &-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%);
+          }
+        }
+      }
+
+      &-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;
+        }
+      }
+    }
+
+    &-group {
+      margin: 0;
+      margin-bottom: $spacing-xs;
+
+      &:last-child {
+        margin-bottom: $spacing-m;
+      }
+
+      &__name {
+        margin: 0;
+        margin-bottom: $spacing-s;
+        font-size: 11px;
+        padding: 10px 0px 6px 0px;
+        border-bottom: 1px solid 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;
+
+      &_active {
+        border-radius: 6px;
+        background: var(--bg-gray-box, #F0F1F4)!important;
+      }
+    }
+  }
+}

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/InputMask3/InputMask3.js

@@ -48,8 +48,6 @@ 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; }
 
 function InputMask3() {
-  var _getClearInnerValueAs;
-
   var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
       _ref$autocomplete = _ref.autocomplete,
       autocomplete = _ref$autocomplete === void 0 ? 'off' : _ref$autocomplete,
@@ -337,6 +335,8 @@ function InputMask3() {
   };
 
   var getInputValue = function getInputValue() {
+    var _getClearInnerValueAs;
+
     var _ref4 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
         noLastTyppedCharIndexCheck = _ref4.noLastTyppedCharIndexCheck,
         _ref4$noHide = _ref4.noHide,
@@ -364,11 +364,12 @@ function InputMask3() {
 
       return result;
     }, '');
+    if (((_getClearInnerValueAs = getClearInnerValueAsString(value)) === null || _getClearInnerValueAs === void 0 ? void 0 : _getClearInnerValueAs.length) === 0) return '';
     return value;
   };
 
-  var getClearInnerValueAsString = function getClearInnerValueAsString() {
-    var _getInputValue, _getInputValue$split;
+  var getClearInnerValueAsString = function getClearInnerValueAsString(valueProp) {
+    var _ref8, _ref8$split;
 
     var symbolsInfo = innerValue === null || innerValue === void 0 ? void 0 : innerValue.map(function (_ref7) {
       var isSpecialSymbol = _ref7.isSpecialSymbol,
@@ -378,26 +379,24 @@ function InputMask3() {
         isCharSymbol: isCharSymbol
       };
     });
-    var clearValue = (_getInputValue = getInputValue({
+    var clearValue = (_ref8 = valueProp !== null && valueProp !== void 0 ? valueProp : getInputValue({
       noLastTyppedCharIndexCheck: true,
       noHide: true
-    })) === null || _getInputValue === void 0 ? void 0 : (_getInputValue$split = _getInputValue.split('')) === null || _getInputValue$split === void 0 ? void 0 : _getInputValue$split.reduce(function (resultStr, symbol, i) {
+    })) === null || _ref8 === void 0 ? void 0 : (_ref8$split = _ref8.split('')) === null || _ref8$split === void 0 ? void 0 : _ref8$split.reduce(function (resultStr, symbol, i) {
       if (!symbolsInfo[i].isSpecialSymbol || symbolsInfo[i].isCharSymbol) resultStr += symbol;
       return resultStr;
     }, '');
     return clearValue;
   };
 
-  var inputValue = (0, _react.useMemo)(((_getClearInnerValueAs = getClearInnerValueAsString()) === null || _getClearInnerValueAs === void 0 ? void 0 : _getClearInnerValueAs.length) !== 0 ? getInputValue : function () {
-    return '';
-  }, [innerValue, isValueHidden]); // GETTERS | END //
+  var inputValue = (0, _react.useMemo)(getInputValue, [innerValue, isValueHidden]); // GETTERS | END //
   // CHECKERS | START //
 
-  var isValidChar = function isValidChar(_ref8) {
-    var key = _ref8.char,
-        i = _ref8.i,
-        _ref8$disableErrors = _ref8.disableErrors,
-        disableErrors = _ref8$disableErrors === void 0 ? false : _ref8$disableErrors;
+  var isValidChar = function isValidChar(_ref9) {
+    var key = _ref9.char,
+        i = _ref9.i,
+        _ref9$disableErrors = _ref9.disableErrors,
+        disableErrors = _ref9$disableErrors === void 0 ? false : _ref9$disableErrors;
     var maskChar = getMaskCharByIndex(i);
 
     switch (maskChar) {
@@ -449,13 +448,13 @@ function InputMask3() {
     return true;
   };
 
-  var isSpecialSymbolMaskChar = function isSpecialSymbolMaskChar(_ref9) {
-    var char = _ref9.char;
+  var isSpecialSymbolMaskChar = function isSpecialSymbolMaskChar(_ref10) {
+    var char = _ref10.char;
     return !(0, _functions.isDigitMaskChar)(char) && !(0, _functions.isLetterMaskChar)(char);
   };
 
-  var isSpecialSymbolChar = function isSpecialSymbolChar(_ref10) {
-    var char = _ref10.char;
+  var isSpecialSymbolChar = function isSpecialSymbolChar(_ref11) {
+    var char = _ref11.char;
     return !(0, _functions.isDigit)(char) && !(0, _functions.isLetter)(char);
   };
 
@@ -627,13 +626,13 @@ function InputMask3() {
   };
 
   var onSelect = function onSelect(e) {
-    var _e$target2, _ref12;
+    var _e$target2, _ref13;
 
-    var _ref11 = (_e$target2 = e.target) !== null && _e$target2 !== void 0 ? _e$target2 : {},
-        selectionStart = _ref11.selectionStart,
-        selectionEnd = _ref11.selectionEnd;
+    var _ref12 = (_e$target2 = e.target) !== null && _e$target2 !== void 0 ? _e$target2 : {},
+        selectionStart = _ref12.selectionStart,
+        selectionEnd = _ref12.selectionEnd;
 
-    setSelectedLength((_ref12 = selectionEnd - selectionStart) !== null && _ref12 !== void 0 ? _ref12 : 0);
+    setSelectedLength((_ref13 = selectionEnd - selectionStart) !== null && _ref13 !== void 0 ? _ref13 : 0);
     if (selectionStart >= maxEditableIndex) setCaret(maxEditableIndex);
   }; // GENERAL EVENT HANDLERS | END //
   /// --- OBSERVERS ---///