intelicoreact 1.3.91 → 1.3.93

package/dist/Atomic/FormElements/DropdownLiveSearch/DropdownLiveSearch.js

@@ -13,13 +13,15 @@ var _fieldValueFormatters = require("../../../Functions/fieldValueFormatters");
 var _useDebounce = require("../../../Functions/useDebounce");
 var _useIsMobile = _interopRequireDefault(require("../../../Functions/useIsMobile"));
 var _Spinner = _interopRequireDefault(require("../../Layout/Spinner/Spinner"));
+var _RadioInput = _interopRequireDefault(require("../RadioInput/RadioInput"));
 require("./DropdownLiveSearch.scss");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 const RC = "dropdown-live-search";
 const DropdownLiveSearch = _ref => {
-  var _tabIndex$toString;
+  var _dropdownListRef$curr5, _dropdownListRef$curr6, _tabIndex$toString;
   let {
+    label,
     value,
     error,
     disabled,
@@ -55,12 +57,26 @@ const DropdownLiveSearch = _ref => {
   const dropdownLiveSearchRef = (0, _react.useRef)(null);
   const dropdownListBoxRef = (0, _react.useRef)(null);
   const dropdownListRef = (0, _react.useRef)(null);
+  const dropdownListHeaderRef = (0, _react.useRef)(null);
   const searchInputRef = (0, _react.useRef)(null);
+  const searchInputModalRef = (0, _react.useRef)(null);
   const searchValueRef = (0, _react.useRef)(labelByValue);
+  const wrapperRef = (0, _react.useRef)(null);
+  const [isScrollableList, setIsScrollableList] = (0, _react.useState)(null);
+  const [isFixedMaxHeight, setIsFixedMaxHeight] = (0, _react.useState)(false);
+  const [scrollTop, setScrollTop] = (0, _react.useState)(0);
+  const [scrollHeight, setScrollHeight] = (0, _react.useState)(1);
   const setSearchValue = val => {
     setSV(val);
     searchValueRef.current = val;
   };
+  const onWrapperClick = e => {
+    if (e.target === (wrapperRef === null || wrapperRef === void 0 ? void 0 : wrapperRef.current)) {
+      e.stopPropagation();
+      e.preventDefault();
+      setIsOpen(false);
+    }
+  };
   const [isFocusedByClick, setIsFocusedByClick] = (0, _react.useState)(false);
   const debouncedSearchTerm = (0, _useDebounce.useDebounce)({
     searchValue,
@@ -88,7 +104,7 @@ const DropdownLiveSearch = _ref => {
     }
   };
   const getMarkupForElement = (item, index, optTestId) => {
-    var _item$value, _item$value2;
+    var _item$value, _item$value2, _item$customMobileIco;
     const lowerLabel = item.label.toLowerCase();
     const lowerSearchValue = searchValue.toLowerCase();
     return /*#__PURE__*/_react.default.createElement("button", {
@@ -97,13 +113,13 @@ const DropdownLiveSearch = _ref => {
       onClick: () => {
         onChange(item.value);
         setIsOpen(false);
-        setSearchValue(item.label);
+        if (!withMobileLogic) setSearchValue(item.label);
       },
       className: (0, _classnames.default)("".concat(RC, "__list-item"), {
         ["".concat(RC, "__list-item_active")]: item.value === value,
         ["".concat(RC, "__list-item_disabled")]: item.disabled
       }, item.className)
-    }, /*#__PURE__*/_react.default.createElement("span", {
+    }, !isMobile || isMobile && !withMobileLogic && /*#__PURE__*/_react.default.createElement("span", {
       className: (0, _classnames.default)("".concat(RC, "__active-icon"), {
         ["".concat(RC, "__active-icon_active")]: lowerLabel === lowerSearchValue
       })
@@ -113,16 +129,52 @@ const DropdownLiveSearch = _ref => {
       dangerouslySetInnerHTML: {
         __html: highlightedText(item.label, item.postfix)
       }
-    }));
+    }), isMobile ? (_item$customMobileIco = item === null || item === void 0 ? void 0 : item.customMobileIcon) !== null && _item$customMobileIco !== void 0 ? _item$customMobileIco : /*#__PURE__*/_react.default.createElement(_RadioInput.default, {
+      value: item.value,
+      checked: value
+    }) : "");
   };
   const getListMarkUp = () => {
     return /*#__PURE__*/_react.default.createElement("div", {
+      className: (0, _classnames.default)("".concat(RC, "__container-wrapper")),
+      ref: wrapperRef,
+      onClick: isMobile ? onWrapperClick : () => {}
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: (0, _classnames.default)("".concat(RC, "__list-wrapper"), {
+        ["".concat(RC, "__list-wrapper--fixed-height")]: isFixedMaxHeight,
+        ["".concat(RC, "__list-wrapper--with-bottom-shadow")]: isScrollableList && isMobile,
+        ["".concat(RC, "__list-wrapper--with-bottom-shadow-hidden")]: scrollTop === scrollHeight
+      })
+    }, /*#__PURE__*/_react.default.createElement("div", {
       id: "dropdown-live-search-list",
       className: (0, _classnames.default)("".concat(RC, "__container"), {
         ["".concat(RC, "__list-top")]: isListTop
       }),
       ref: dropdownListBoxRef
+    }, isMobile && /*#__PURE__*/_react.default.createElement("div", {
+      ref: dropdownListHeaderRef,
+      className: (0, _classnames.default)("".concat(RC, "__list-header"), {
+        ["".concat(RC, "__list-header-with-shadow")]: isScrollableList && isMobile,
+        ["".concat(RC, "__list-header-with-shadow-hidden")]: scrollTop === 0
+      })
     }, /*#__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: () => setIsOpen(false)
+    }, /*#__PURE__*/_react.default.createElement(_reactFeather.X, {
+      onClick: () => setIsOpen(false)
+    }))), isSearchable && /*#__PURE__*/_react.default.createElement("input", (0, _extends2.default)({
+      ref: searchInputModalRef,
+      className: "".concat(RC, "__input"),
+      value: isOpen ? searchValue : labelByValue,
+      onChange: handle.onInputChange,
+      placeholder: placeholder,
+      onFocus: searchableInputFocus,
+      tabIndex: -1
+    }, attributesOfNativeInput))), /*#__PURE__*/_react.default.createElement("div", {
       className: (0, _classnames.default)("".concat(RC, "__list"), {
         disabled: isLoading
       }),
@@ -131,11 +183,18 @@ const DropdownLiveSearch = _ref => {
       className: "".concat(RC, "__list-item ").concat(RC, "__list-item--no-options")
     }, noOptionsText)), isLoading && isOpen && /*#__PURE__*/_react.default.createElement(_Spinner.default, {
       size: options.length <= 3 ? "small" : null
-    }));
+    }))));
   };
   const getListContainer = () => {
     return document.getElementById(dropdownId);
   };
+  (0, _react.useEffect)(() => {
+    if (isOpen && isMobile && dropdownListRef !== null && dropdownListRef !== void 0 && dropdownListRef.current && !searchValue) {
+      var _dropdownListRef$curr, _dropdownListRef$curr2, _dropdownListRef$curr3, _dropdownListRef$curr4;
+      setIsScrollableList((dropdownListRef === null || dropdownListRef === void 0 || (_dropdownListRef$curr = dropdownListRef.current) === null || _dropdownListRef$curr === void 0 ? void 0 : _dropdownListRef$curr.scrollHeight) > (dropdownListRef === null || dropdownListRef === void 0 || (_dropdownListRef$curr2 = dropdownListRef.current) === null || _dropdownListRef$curr2 === void 0 ? void 0 : _dropdownListRef$curr2.clientHeight));
+      setIsFixedMaxHeight(isScrollableList || (dropdownListRef === null || dropdownListRef === void 0 || (_dropdownListRef$curr3 = dropdownListRef.current) === null || _dropdownListRef$curr3 === void 0 ? void 0 : _dropdownListRef$curr3.scrollHeight) > (dropdownListRef === null || dropdownListRef === void 0 || (_dropdownListRef$curr4 = dropdownListRef.current) === null || _dropdownListRef$curr4 === void 0 ? void 0 : _dropdownListRef$curr4.clientHeight));
+    }
+  }, [isOpen, isMobile, isScrollableList, dropdownListRef === null || dropdownListRef === void 0 ? void 0 : dropdownListRef.current, dropdownListRef === null || dropdownListRef === void 0 || (_dropdownListRef$curr5 = dropdownListRef.current) === null || _dropdownListRef$curr5 === void 0 ? void 0 : _dropdownListRef$curr5.scrollHeight, dropdownListRef === null || dropdownListRef === void 0 || (_dropdownListRef$curr6 = dropdownListRef.current) === null || _dropdownListRef$curr6 === void 0 ? void 0 : _dropdownListRef$curr6.clientHeight]);
   (0, _react.useEffect)(() => {
     if (!value) setSearchValue("");
   }, [value]);
@@ -158,7 +217,13 @@ const DropdownLiveSearch = _ref => {
   const handle = {
     onInputClick: e => {
       if (!isOpen) setIsOpen(true);
-      e.target.select();
+      if (isMobile && withMobileLogic) {
+        e.preventDefault();
+        e.stopPropagation();
+        e.target.blur();
+      } else {
+        e.target.select();
+      }
     },
     onInputChange: e => {
       let inputValue = e.target.value;
@@ -187,12 +252,12 @@ const DropdownLiveSearch = _ref => {
   }, [getListContainer]);
   (0, _react.useLayoutEffect)(() => {
     const list = document.getElementById("dropdown-live-search-list");
-    if (list || isOpen) {
+    if ((list || isOpen) && !withMobileLogic) {
       var _dropdownLiveSearchRe;
       const dropdownWidth = dropdownLiveSearchRef === null || dropdownLiveSearchRef === void 0 || (_dropdownLiveSearchRe = dropdownLiveSearchRef.current) === null || _dropdownLiveSearchRe === void 0 ? void 0 : _dropdownLiveSearchRe.clientWidth;
       list.style.width = "".concat(dropdownWidth, "px");
     }
-  }, [dropdownLiveSearchRef, isOpen]);
+  }, [dropdownLiveSearchRef, isOpen, withMobileLogic]);
   const doScrollCallback = (0, _react.useCallback)(e => {
     if (doRequest && typeof doRequest === "function") {
       if (Math.round(e.target.clientHeight + e.target.scrollTop) == e.target.scrollHeight) {
@@ -201,8 +266,17 @@ const DropdownLiveSearch = _ref => {
     }
   }, [options]);
   (0, _react.useEffect)(() => {
-    if (!isOpen) setIsFocusedByClick(false);
+    if (!isOpen) {
+      setIsFocusedByClick(false);
+      if (withMobileLogic) setSearchValue("");
+    }
     if (isOpen && dropdownListRef && dropdownListRef.current) {
+      if (isMobile && withMobileLogic) {
+        var _dropdownListBoxRef$c, _dropdownListHeaderRe, _searchInputModalRef$;
+        doRequest("");
+        dropdownListRef.current.style.maxHeight = "".concat((dropdownListBoxRef === null || dropdownListBoxRef === void 0 || (_dropdownListBoxRef$c = dropdownListBoxRef.current) === null || _dropdownListBoxRef$c === void 0 || (_dropdownListBoxRef$c = _dropdownListBoxRef$c.getBoundingClientRect()) === null || _dropdownListBoxRef$c === void 0 ? void 0 : _dropdownListBoxRef$c.height) - (dropdownListHeaderRef === null || dropdownListHeaderRef === void 0 || (_dropdownListHeaderRe = dropdownListHeaderRef.current) === null || _dropdownListHeaderRe === void 0 || (_dropdownListHeaderRe = _dropdownListHeaderRe.getBoundingClientRect()) === null || _dropdownListHeaderRe === void 0 ? void 0 : _dropdownListHeaderRe.height), "px");
+        searchInputModalRef === null || searchInputModalRef === void 0 || (_searchInputModalRef$ = searchInputModalRef.current) === null || _searchInputModalRef$ === void 0 || _searchInputModalRef$.focus();
+      }
       dropdownListRef.current.addEventListener("scroll", doScrollCallback);
     }
     return () => {
@@ -232,7 +306,8 @@ const DropdownLiveSearch = _ref => {
   }, [getListContainer]);
   return /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _classnames.default)(RC, className, {
-      disabled: disabled
+      disabled: disabled,
+      ["".concat(RC, "-mobile")]: isMobile
     }),
     ref: dropdownLiveSearchRef
   }, /*#__PURE__*/_react.default.createElement("button", {
@@ -245,7 +320,7 @@ const DropdownLiveSearch = _ref => {
   }, isSearchable ? /*#__PURE__*/_react.default.createElement("input", (0, _extends2.default)({
     ref: searchInputRef,
     className: "".concat(RC, "__input"),
-    value: isOpen ? searchValue : labelByValue,
+    value: isOpen ? isMobile && withMobileLogic ? labelByValue : searchValue : labelByValue,
     onChange: handle.onInputChange,
     placeholder: placeholder,
     onFocus: searchableInputFocus,
@@ -258,6 +333,8 @@ const DropdownLiveSearch = _ref => {
       ["".concat(RC, "__arrow_active")]: isOpen
     }),
     onClick: () => setIsOpen(!isOpen)
-  }, isOpen ? /*#__PURE__*/_react.default.createElement(_reactFeather.ChevronUp, null) : /*#__PURE__*/_react.default.createElement(_reactFeather.ChevronDown, null))), isOpen && getListMarkUp());
+  }, isMobile ? /*#__PURE__*/_react.default.createElement(_reactFeather.Code, {
+    className: "mobile-icon"
+  }) : isOpen ? /*#__PURE__*/_react.default.createElement(_reactFeather.ChevronUp, null) : /*#__PURE__*/_react.default.createElement(_reactFeather.ChevronDown, null))), isOpen && getListMarkUp());
 };
 var _default = exports.default = DropdownLiveSearch;

package/dist/Atomic/FormElements/DropdownLiveSearch/DropdownLiveSearch.scss

@@ -234,3 +234,287 @@
     opacity: 0.5;
   }
 }
+
+.dropdown-live-search-mobile {
+  .dropdown-live-search__arrow {
+    transform: rotate(90deg) translateX(-50%);
+  }
+  .dropdown-live-search__container-wrapper {
+    overflow: hidden !important;
+    position: fixed;
+    top: 0 !important;
+    left: 0 !important;
+
+    width: 100dvw;
+    height: 100dvh;
+    max-height: 100dvh;
+
+    background: rgba(23, 29, 51, 0.5);
+
+    animation-name: fadeIn;
+    animation-duration: 0.25s;
+    animation-timing-function: ease;
+    animation-fill-mode: forwards;
+  }
+
+  .dropdown-live-search__list-wrapper {
+    position: fixed;
+    top: 0 !important;
+    left: 0 !important;
+
+    overflow: hidden !important;
+
+    box-sizing: border-box;
+    width: 100dvw;
+    height: 100dvh;
+    max-height: 100dvh;
+    padding: $spacing-s;
+
+    animation-name: slideup;
+    animation-duration: 0.4s;
+  }
+
+  .dropdown-live-search__container {
+    position: absolute;
+    bottom: $spacing-s;
+    top: auto;
+    z-index: auto;
+    width: calc(100% - calc(2 * $spacing-s));
+    margin: 0;
+    box-sizing: border-box;
+
+    overflow: hidden;
+
+    box-sizing: border-box;
+
+    border-radius: $spacing-l !important;
+    max-height: 500px;
+    // height: 500px !important;
+
+    &--with-bottom-shadow::after {
+      position: absolute;
+      z-index: 6;
+      bottom: 0;
+
+      width: 100%;
+      height: 15px;
+
+      content: "";
+
+      opacity: 1;
+      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%
+      );
+
+      transition: all 0.2s;
+      transform: rotate(180deg);
+    }
+
+    &--with-bottom-shadow-hidden::after {
+      opacity: 0;
+    }
+
+    &--fixed-height {
+      height: 500px !important;
+    }
+  }
+
+  .dropdown-live-search__list {
+    max-height: 500px;
+    box-shadow: none;
+    padding: 0 16px 16px !important;
+
+    &-header {
+      position: relative;
+
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      gap: $spacing-m;
+
+      padding: $spacing-m;
+
+      font-size: 16px;
+      font-weight: 600;
+      line-height: 24px;
+      letter-spacing: 0.1px;
+
+      color: #3b414b;
+
+      &-row {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+
+        box-sizing: border-box;
+        min-height: 24px;
+
+        &:first-child {
+          padding-right: 50px;
+        }
+
+        .input__wrap {
+          display: flex;
+          align-items: center;
+
+          width: 100%;
+          padding-right: $spacing-s;
+
+          border: 1px solid var(--form-input-border, #e1e8f1);
+          border-radius: 6px;
+          background: var(--black-bg-color, #f8fbff) !important;
+
+          input {
+            background: unset !important;
+          }
+        }
+
+        .input__close {
+          display: flex;
+          align-items: center;
+
+          box-sizing: border-box;
+          width: 24px;
+          min-width: 24px;
+          height: 24px;
+          padding: $spacing-xs;
+
+          border-radius: 2px;
+          background: var(--bg-gray-box, #f0f1f4);
+
+          &::before,
+          &::after {
+            top: 50%;
+
+            height: 12px;
+
+            border-radius: 8px;
+            background-color: #171d33;
+
+            transform: translateY(-50%) rotate(45deg);
+          }
+          &::after {
+            transform: translateY(-50%) rotate(-45deg);
+          }
+        }
+      }
+
+      &-with-shadow::after {
+        position: absolute;
+        z-index: 10;
+        bottom: -15px;
+        left: 0;
+
+        width: 100%;
+        height: 15px;
+
+        content: "";
+
+        opacity: 1;
+        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%
+        );
+
+        transition: all 0.2s;
+      }
+
+      &-with-shadow-hidden::after {
+        opacity: 0;
+      }
+    }
+
+    &-close-icon {
+      position: absolute;
+      top: 0;
+      right: 0;
+
+      display: flex;
+      justify-content: center;
+      align-items: center;
+
+      box-sizing: border-box;
+      width: 50px;
+      height: 50px;
+      padding: $spacing-m;
+
+      svg {
+        width: 16px;
+        height: 16px;
+
+        color: #a0a4b0;
+      }
+    }
+
+    &-item {
+      display: flex;
+      justify-content: space-between;
+
+      height: auto !important;
+      padding: 10px $spacing-s !important;
+
+      line-height: 24px;
+
+      p {
+        margin: 0;
+      }
+
+      &-label {
+        white-space: wrap !important;
+
+        span.bg--yellow {
+          font-weight: 600;
+
+          background-color: unset !important;
+        }
+      }
+
+      &_active {
+        border-radius: 6px;
+        background: var(--bg-gray-box, #f0f1f4) !important;
+      }
+    }
+  }
+
+  .dropdown-live-search__input {
+    display: flex;
+    align-items: center;
+
+    width: 100%;
+    height: 28px;
+    padding-right: $spacing-s;
+
+    border: 1px solid var(--form-input-border, #e1e8f1);
+    border-radius: 6px;
+    background: var(--black-bg-color, #f8fbff) !important;
+
+    input {
+      background: unset !important;
+    }
+  }
+}
+
+@keyframes slideup {
+  from {
+    transform: translateY(100%);
+  }
+
+  to {
+    transform: translateY(0);
+  }
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}

package/dist/Atomic/UI/Hint/Hint.scss

@@ -85,9 +85,7 @@
 
       &::before {
         top: -4.25px;
-        left: calc(50% -
-
-        px);
+        left: calc(50% - 8px);
       }
     }
 

package/package.json

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