intelicoreact 1.2.46 → 1.2.48

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

@@ -27,14 +27,20 @@ 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 _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 +52,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, _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 +78,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 +96,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 +119,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 +222,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 +241,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 +257,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 +322,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 +335,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 +387,42 @@ 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, null))), 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',
+      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 +453,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,15 +468,29 @@ 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 () {
@@ -466,7 +543,34 @@ var Dropdown = function Dropdown(_ref) {
     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) {
+      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 +587,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 +614,41 @@ 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("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());
 };
 
 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,124 @@
     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: 0 $spacing-m!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%;
+          }
+        }
+
+        &-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;
+
+      &: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 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;
+
+      &_active {
+        border-radius: 6px;
+        background: var(--bg-gray-box, #F0F1F4)!important;
+      }
+    }
+  }
+}

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

@@ -9,6 +9,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
@@ -21,6 +23,8 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 var _dependencies = require("../dependencies");
 
+var _mobileKeyboardTypesPresets = require("../../../../Functions/presets/mobileKeyboardTypesPresets");
+
 var _Dropdown = _interopRequireDefault(require("../../Dropdown/Dropdown"));
 
 var _Input = _interopRequireDefault(require("../../Input/Input"));
@@ -404,7 +408,7 @@ var Datepicker = function Datepicker(props) {
     className: "date-picker__header"
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "date-picker__inputs-block"
-  }, /*#__PURE__*/_react.default.createElement(_Input.default, {
+  }, /*#__PURE__*/_react.default.createElement(_Input.default, (0, _extends2.default)({
     dataTest: "datepicker_start-date-input",
     className: (0, _classnames.default)({
       'date-picker__date-input_active': hoverStatus === 'start'
@@ -419,10 +423,8 @@ var Datepicker = function Datepicker(props) {
     onKeyUp: function onKeyUp(code, e) {
       return handleKeyPressed(code, e, 'start');
     },
-    "data-testid": "datePicker--input-".concat(testId, "--startDate") //ref={startDateInputRef}
-    // mask={moment(startDate).format('L').replace(/[0-9]/g, '9')}
-
-  }), /*#__PURE__*/_react.default.createElement(_Dropdown.default, {
+    "data-testid": "datePicker--input-".concat(testId, "--startDate")
+  }, _mobileKeyboardTypesPresets.NUMERIC_KEYBOARD)), /*#__PURE__*/_react.default.createElement(_Dropdown.default, {
     testId: testId,
     dataTest: "datepicker_start-hour-select-input",
     className: (0, _classnames.default)('date-picker__hour-select-input'),
@@ -435,7 +437,7 @@ var Datepicker = function Datepicker(props) {
     short: true
   }), /*#__PURE__*/_react.default.createElement("div", {
     className: "date-picker__inputs-separator date-picker__header--gray"
-  }, "\u2014"), /*#__PURE__*/_react.default.createElement(_Input.default, {
+  }, "\u2014"), /*#__PURE__*/_react.default.createElement(_Input.default, (0, _extends2.default)({
     dataTest: "datepicker_end-date-input",
     className: (0, _classnames.default)({
       'date-picker__date-input_active': hoverStatus === 'end'
@@ -450,9 +452,8 @@ var Datepicker = function Datepicker(props) {
     onKeyUp: function onKeyUp(code, e) {
       return handleKeyPressed(code, e, 'end');
     },
-    "data-testid": "datePicker--input-".concat(testId, "--endDate") //ref={endDateInputRef}
-
-  }), /*#__PURE__*/_react.default.createElement(_Dropdown.default, {
+    "data-testid": "datePicker--input-".concat(testId, "--endDate")
+  }, _mobileKeyboardTypesPresets.NUMERIC_KEYBOARD)), /*#__PURE__*/_react.default.createElement(_Dropdown.default, {
     testId: testId,
     dataTest: "datepicker_end-hour-select-input",
     className: (0, _classnames.default)('date-picker__hour-select-input'),

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 ---///

package/dist/Atomic/FormElements/RangeSlider/RangeSlider.js

@@ -9,6 +9,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = RangeSlider;
 
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
@@ -19,6 +21,8 @@ var _reactFeather = require("react-feather");
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
+var _mobileKeyboardTypesPresets = require("../../../Functions/presets/mobileKeyboardTypesPresets");
+
 var _fieldValueFormatters = require("../../../Functions/fieldValueFormatters");
 
 var _Input = _interopRequireDefault(require("../Input/Input"));
@@ -378,7 +382,7 @@ function RangeSlider(_ref) {
       className: "range-slider__inputs"
     }, /*#__PURE__*/_react.default.createElement("div", {
       className: "range-slider__inputs--from"
-    }, /*#__PURE__*/_react.default.createElement(_Input.default, {
+    }, /*#__PURE__*/_react.default.createElement(_Input.default, (0, _extends2.default)({
       "data-testid": "rangeSlider--input--".concat(testId, "--type-from"),
       value: from.toString(),
       onFocus: function onFocus(e) {
@@ -397,9 +401,9 @@ function RangeSlider(_ref) {
         max: max
       },
       isPriceInput: isUseBitPoints
-    })), /*#__PURE__*/_react.default.createElement("div", {
+    }, _mobileKeyboardTypesPresets.NUMERIC_KEYBOARD))), /*#__PURE__*/_react.default.createElement("div", {
       className: "range-slider__inputs__input"
-    }, /*#__PURE__*/_react.default.createElement(_Input.default, {
+    }, /*#__PURE__*/_react.default.createElement(_Input.default, (0, _extends2.default)({
       "data-testid": "rangeSlider--input--".concat(testId, "--type-to"),
       value: to.toString(),
       onFocus: function onFocus(e) {
@@ -418,7 +422,7 @@ function RangeSlider(_ref) {
         max: max
       },
       isPriceInput: isUseBitPoints
-    })));
+    }, _mobileKeyboardTypesPresets.NUMERIC_KEYBOARD))));
   };
 
   var renderTrackRange = function renderTrackRange() {

package/dist/Atomic/UI/AccordionText/AccordionText.js

@@ -26,6 +26,8 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 var AccordionText = function AccordionText(_ref) {
   var _ref$isDefaultOpen = _ref.isDefaultOpen,
       isDefaultOpen = _ref$isDefaultOpen === void 0 ? false : _ref$isDefaultOpen,
+      _ref$isOuterOpen = _ref.isOuterOpen,
+      isOuterOpen = _ref$isOuterOpen === void 0 ? false : _ref$isOuterOpen,
       className = _ref.className,
       _ref$text = _ref.text,
       text = _ref$text === void 0 ? 'Default Accordion Text. Lorem ipsum dolor sit amettttttttttttttt, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.' : _ref$text;
@@ -35,6 +37,9 @@ var AccordionText = function AccordionText(_ref) {
       isOpen = _useState2[0],
       setIsOpen = _useState2[1];
 
+  (0, _react.useEffect)(function () {
+    setIsOpen(isOuterOpen);
+  }, [isOuterOpen]);
   return /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _classnames.default)('accordion-text', className, {
       'accordion-text--open': isOpen

package/dist/Atomic/UI/Modal/Modal.js

@@ -91,7 +91,7 @@ var Modal = function Modal(_ref2) {
       testId = _ref2.testId,
       noHeaderCloseBtn = _ref2.noHeaderCloseBtn,
       _ref2$noMobileModalLo = _ref2.noMobileModalLogic,
-      noMobileModalLogic = _ref2$noMobileModalLo === void 0 ? false : _ref2$noMobileModalLo;
+      noMobileModalLogic = _ref2$noMobileModalLo === void 0 ? true : _ref2$noMobileModalLo;
   var modalRef = (0, _react.useRef)(null);
 
   var _useMobileModal = (0, _useMobileModal2.default)({

package/dist/Atomic/UI/Modal/partials/useMobileModal.js

@@ -144,9 +144,6 @@ function useMobileModal(_ref) {
           footerHeight = modalsLogicProps.footerHeight,
           headerTop = modalsLogicProps.headerTop,
           bodyTop = modalsLogicProps.bodyTop;
-      console.log({
-        footerBottom: footerBottom
-      });
       setModalsLogic({
         IS_HEADER_HIDDEN: footerBottom * -1 <= footerHeight || scrollDirection === SCROLL_DIRECTION.DOWN,
         IS_HEADER_STICKY: headerTop <= 0,

package/package.json

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