intelicoreact 1.4.0 → 1.4.2

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

@@ -1,26 +1,43 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
 var _react = _interopRequireWildcard(require("react"));
+
 var _classnames = _interopRequireDefault(require("classnames"));
+
 var _reactDom = require("react-dom");
+
 var _reactFeather = require("react-feather");
+
 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; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (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; }
+
 const RC = "dropdown-live-search";
+
 const DropdownLiveSearch = _ref => {
   var _dropdownListRef$curr5, _dropdownListRef$curr6, _tabIndex$toString;
+
   let {
     label,
     value,
@@ -43,34 +60,68 @@ const DropdownLiveSearch = _ref => {
     withMobileLogic,
     tabIndex
   } = _ref;
-  const [dropdownId, setDropdownId] = (0, _react.useState)(id || fieldKey || Math.random().toString(16).slice(2));
-  const [isOpen, setIsOpen] = (0, _react.useState)(false);
+  const [dropdownId] = (0, _react.useState)(id || fieldKey || Math.random().toString(16).slice(2));
+  const [isOpen, setIsOpenState] = (0, _react.useState)(false);
   const [isValueDeleted, setIsValueDeleted] = (0, _react.useState)(false);
   const {
     isMobile: isMobileProp
   } = (0, _useIsMobile.default)();
   const isMobile = isMobileProp && withMobileLogic && window.screen.width <= 768;
   const labelByValue = (0, _react.useMemo)(() => {
-    var _options$find;
-    return (options === null || options === void 0 || (_options$find = options.find(item => item.value === value)) === null || _options$find === void 0 ? void 0 : _options$find.label) || "";
+    var _options$find$label, _options$find;
+
+    return (_options$find$label = options === null || options === void 0 ? void 0 : (_options$find = options.find(item => item.value === value)) === null || _options$find === void 0 ? void 0 : _options$find.label) !== null && _options$find$label !== void 0 ? _options$find$label : "";
   }, [value]);
-  const [searchValue, setSV] = (0, _react.useState)(labelByValue);
+  const [searchValue, setSV] = (0, _react.useState)("");
+  const [isSearchValueChangedAfterOpen, setIsSearchValueChangedAfterOpen] = (0, _react.useState)(false);
   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 searchValueRef = (0, _react.useRef)(null);
   const wrapperRef = (0, _react.useRef)(null);
+  const [isFocusedByClick, setIsFocusedByClick] = (0, _react.useState)(false);
   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 => {
+  const debouncedSearchTerm = (0, _useDebounce.useDebounce)({
+    searchValue,
+    delay: 600
+  });
+  const doScrollCallback = (0, _react.useCallback)(e => {
+    if (doRequest && typeof doRequest === "function") {
+      if (Math.round(e.target.clientHeight + e.target.scrollTop) == e.target.scrollHeight) {
+        doRequest(searchValueRef.current, true);
+      }
+    }
+  }, [options]);
+
+  const setSearchValue = function (val) {
+    let isChanged = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+    if (isChanged) setIsSearchValueChangedAfterOpen(true);
     setSV(val);
     searchValueRef.current = val;
   };
+
+  const setIsOpen = v => {
+    setIsOpenState(v);
+    setSearchValue("", false);
+    if (!v) setIsSearchValueChangedAfterOpen(false);
+  };
+
+  const getParentNode = () => {
+    var _ref2, _document$querySelect;
+
+    return (_ref2 = (_document$querySelect = document.querySelector("div#root")) !== null && _document$querySelect !== void 0 ? _document$querySelect : document.querySelector("div#app")) !== null && _ref2 !== void 0 ? _ref2 : document.querySelector("div#storybook-root");
+  };
+
+  const getListContainer = () => {
+    return document.getElementById(dropdownId);
+  };
+
   const onWrapperClick = e => {
     if (e.target === (wrapperRef === null || wrapperRef === void 0 ? void 0 : wrapperRef.current)) {
       e.stopPropagation();
@@ -78,20 +129,58 @@ const DropdownLiveSearch = _ref => {
       setIsOpen(false);
     }
   };
-  const [isFocusedByClick, setIsFocusedByClick] = (0, _react.useState)(false);
-  const debouncedSearchTerm = (0, _useDebounce.useDebounce)({
-    searchValue,
-    delay: 600
-  });
-  if (!options) return null;
+
+  const onSearchableInputFocus = e => {
+    if (!isOpen) {
+      e.preventDefault();
+      e.stopPropagation();
+    }
+  };
+
   const handleClickOutside = event => {
     var _getListContainer;
+
     if (!dropdownLiveSearchRef.current.contains(event.target) && (!getListContainer() || !((_getListContainer = getListContainer()) !== null && _getListContainer !== void 0 && _getListContainer.contains(event.target)))) setIsOpen(false);
   };
+
+  const closeListViaEsc = e => {
+    if ([27].includes(e.keyCode)) setIsOpen(false);
+  };
+
+  const closeList = isOpen ? handleClickOutside : () => {};
+  const handle = {
+    onInputClick: e => {
+      if (!isOpen) setIsOpen(true);
+
+      if (isMobile && withMobileLogic) {
+        e.preventDefault();
+        e.stopPropagation();
+        e.target.blur();
+      } else {
+        e.target.select();
+      }
+    },
+    onInputChange: e => {
+      let inputValue = e.target.value;
+      if (!isNotValidateASCII) inputValue = (0, _fieldValueFormatters.formatToOnlyASCIICodeText)(inputValue);
+      setSearchValue(inputValue);
+
+      if ((searchValue || !isSearchValueChangedAfterOpen) && !e.target.value) {
+        onChange("");
+        setSearchValue("");
+        setIsValueDeleted(true);
+      } else setIsValueDeleted(false);
+    }
+  };
+
   const highlightedText = (text, postfix) => {
     if (!isSearchable) return text;else {
       var _text;
+
+      const preparedSearchValue = isSearchValueChangedAfterOpen || isMobile && withMobileLogic ? searchValue : labelByValue;
+
       const prepare = text => text === null || text === void 0 ? void 0 : text.replace(/[|\\{}()[\]^$+*?.]/g, "\\$&");
+
       text = text.replace(/["&<>]/g, a => {
         return {
           '"': "&quot;",
@@ -100,22 +189,23 @@ const DropdownLiveSearch = _ref => {
           ">": "&gt;"
         }[a];
       });
-      const main = searchValue ? (_text = text) === null || _text === void 0 ? void 0 : _text.replace(new RegExp(prepare(searchValue), "i"), match => "<span class=\"bg--yellow\">".concat(match, "</span>")) : text;
+      const main = preparedSearchValue ? (_text = text) === null || _text === void 0 ? void 0 : _text.replace(new RegExp(prepare(preparedSearchValue), "i"), match => "<span class=\"bg--yellow\">".concat(match, "</span>")) : text;
       const postfixPart = postfix ? "<span class=\"dropdown__list-item-postfix\">".concat(postfix, "</span>") : "";
       return main + postfixPart;
     }
   };
+
   const getMarkupForElement = (item, index, optTestId) => {
-    var _item$value, _item$value2, _item$customMobileIco;
+    var _item$value, _item$value$toString, _item$value2, _item$value2$toString, _item$customMobileIco;
+
     const lowerLabel = item.label.toLowerCase();
-    const lowerSearchValue = searchValue.toLowerCase();
+    const lowerSearchValue = searchValue === null || searchValue === void 0 ? void 0 : searchValue.toLowerCase();
     return /*#__PURE__*/_react.default.createElement("button", {
-      "data-testid": "dropdown-live-search--button--key-".concat(optTestId || (item === null || item === void 0 || (_item$value = item.value) === null || _item$value === void 0 || (_item$value = _item$value.toString()) === null || _item$value === void 0 ? void 0 : _item$value.replace(/\s/, "-")) || (item === null || item === void 0 ? void 0 : item.key) || "item", "--option"),
-      key: (_item$value2 = item.value) === null || _item$value2 === void 0 || (_item$value2 = _item$value2.toString()) === null || _item$value2 === void 0 ? void 0 : _item$value2.replace(/ /g, "_"),
+      "data-testid": "dropdown-live-search--button--key-".concat(optTestId || (item === null || item === void 0 ? void 0 : (_item$value = item.value) === null || _item$value === void 0 ? void 0 : (_item$value$toString = _item$value.toString()) === null || _item$value$toString === void 0 ? void 0 : _item$value$toString.replace(/\s/, "-")) || (item === null || item === void 0 ? void 0 : item.key) || "item", "--option"),
+      key: (_item$value2 = item.value) === null || _item$value2 === void 0 ? void 0 : (_item$value2$toString = _item$value2.toString()) === null || _item$value2$toString === void 0 ? void 0 : _item$value2$toString.replace(/ /g, "_"),
       onClick: () => {
         onChange(item.value);
         setIsOpen(false);
-        if (!withMobileLogic) setSearchValue(item.label);
       },
       className: (0, _classnames.default)("".concat(RC, "__list-item"), {
         ["".concat(RC, "__list-item_active")]: item.value === value,
@@ -136,6 +226,7 @@ const DropdownLiveSearch = _ref => {
       checked: value
     }) : "");
   };
+
   const getListMarkUp = () => {
     return /*#__PURE__*/_react.default.createElement("div", {
       className: (0, _classnames.default)("".concat(RC, "__container-wrapper")),
@@ -174,7 +265,7 @@ const DropdownLiveSearch = _ref => {
       value: isOpen ? searchValue : labelByValue,
       onChange: handle.onInputChange,
       placeholder: placeholder,
-      onFocus: searchableInputFocus,
+      onFocus: onSearchableInputFocus,
       tabIndex: -1
     }, attributesOfNativeInput))), /*#__PURE__*/_react.default.createElement("div", {
       className: (0, _classnames.default)("".concat(RC, "__list"), {
@@ -187,151 +278,120 @@ const DropdownLiveSearch = _ref => {
       size: options.length <= 3 ? "small" : null
     }))));
   };
-  const getParentNode = () => {
-    var _ref2, _document$querySelect;
-    return (_ref2 = (_document$querySelect = document.querySelector("div#root")) !== null && _document$querySelect !== void 0 ? _document$querySelect : document.querySelector("div#app")) !== null && _ref2 !== void 0 ? _ref2 : document.querySelector("div#storybook-root");
-  };
+
   const initListContainer = () => {
     const dropdownList = document.createElement("div");
     dropdownList.setAttribute("id", dropdownId);
     dropdownList.classList.add("dropdown__container");
+
     if (isMobile) {
       dropdownList.addEventListener("click", e => {
         if (e.target.id === dropdownId) setIsOpen(false);
       });
     }
+
     try {
       var _getListContainer2;
-      (_getListContainer2 = getListContainer()) === null || _getListContainer2 === void 0 || _getListContainer2.remove();
+
+      (_getListContainer2 = getListContainer()) === null || _getListContainer2 === void 0 ? void 0 : _getListContainer2.remove();
     } finally {
       if (isMobile) {
         var _getParentNode;
+
         try {
           var _document$getElementB;
-          (_document$getElementB = document.getElementById("mlw-".concat(dropdownId))) === null || _document$getElementB === void 0 || _document$getElementB.remove();
+
+          (_document$getElementB = document.getElementById("mlw-".concat(dropdownId))) === null || _document$getElementB === void 0 ? void 0 : _document$getElementB.remove();
         } catch (e) {}
+
         const dropdownMobileListWrapper = document.createElement("div");
         dropdownMobileListWrapper.classList.add("dropdown-live-search-mobile");
         dropdownMobileListWrapper.setAttribute("id", "mlw-".concat(dropdownId));
-        dropdownMobileListWrapper === null || dropdownMobileListWrapper === void 0 || dropdownMobileListWrapper.append(dropdownList);
-        (_getParentNode = getParentNode()) === null || _getParentNode === void 0 || _getParentNode.append(dropdownMobileListWrapper);
+        dropdownMobileListWrapper === null || dropdownMobileListWrapper === void 0 ? void 0 : dropdownMobileListWrapper.append(dropdownList);
+        (_getParentNode = getParentNode()) === null || _getParentNode === void 0 ? void 0 : _getParentNode.append(dropdownMobileListWrapper);
       } else {
         var _getParentNode2;
-        (_getParentNode2 = getParentNode()) === null || _getParentNode2 === void 0 || _getParentNode2.append(dropdownList);
+
+        (_getParentNode2 = getParentNode()) === null || _getParentNode2 === void 0 ? void 0 : _getParentNode2.append(dropdownList);
       }
     }
   };
-  const getListContainer = () => {
-    return document.getElementById(dropdownId);
-  };
+
   const renderListContainer = () => {
     const lc = getListContainer();
     if (!lc) return null;
     return /*#__PURE__*/(0, _reactDom.createPortal)(getListMarkUp(), lc);
   };
-  (0, _react.useEffect)(() => {
-    if (isMobile && withMobileLogic) {
-      initListContainer();
-    }
-  }, [isMobile, withMobileLogic]);
-  (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]);
+
   (0, _react.useEffect)(() => {
     document.addEventListener("click", handleClickOutside, true);
     return () => document.removeEventListener("click", handleClickOutside, true);
-  }, [value]);
+  }, []);
   (0, _react.useEffect)(() => {
     if (options.length === 1 && searchValue === options[0].label) {
       setSearchValue(options[0].label);
       onChange(options[0].value);
     }
   }, [options]);
-  const searchableInputFocus = e => {
-    if (!isOpen) {
-      e.preventDefault();
-      e.stopPropagation();
-    }
-  };
-  const handle = {
-    onInputClick: e => {
-      if (!isOpen) setIsOpen(true);
-      if (isMobile && withMobileLogic) {
-        e.preventDefault();
-        e.stopPropagation();
-        e.target.blur();
-      } else {
-        e.target.select();
-      }
-    },
-    onInputChange: e => {
-      let inputValue = e.target.value;
-      if (!isNotValidateASCII) inputValue = (0, _fieldValueFormatters.formatToOnlyASCIICodeText)(inputValue);
-      setSearchValue(inputValue);
-      if (searchValue && !e.target.value) {
-        onChange("");
-        setSearchValue("");
-        setIsValueDeleted(true);
-      } else setIsValueDeleted(false);
-    }
-  };
   (0, _react.useEffect)(() => {
-    if (isSearchable && debouncedSearchTerm || isValueDeleted) {
+    if (isSearchable && (debouncedSearchTerm || isValueDeleted)) {
       doRequest(debouncedSearchTerm);
+      if (isValueDeleted) setIsValueDeleted(false);
     }
   }, [debouncedSearchTerm, isValueDeleted]);
-  const closeListViaEsc = e => {
-    if ([27].includes(e.keyCode)) setIsOpen(false);
-  };
-  (0, _react.useLayoutEffect)(() => {
-    window.addEventListener("keyup", closeListViaEsc);
-    return () => {
-      window.removeEventListener("keyup", closeListViaEsc);
-    };
-  }, [getListContainer]);
+  (0, _react.useEffect)(() => {
+    if (isMobile && withMobileLogic) {
+      initListContainer();
+    }
+  }, [isMobile, withMobileLogic]);
+  (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 ? 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));
+      setIsFixedMaxHeight(isScrollableList || (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, isScrollableList, dropdownListRef === null || dropdownListRef === void 0 ? void 0 : dropdownListRef.current, 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]);
   (0, _react.useLayoutEffect)(() => {
     const list = document.getElementById("dropdown-live-search-list");
-    if ((list || isOpen) && !withMobileLogic) {
+
+    if ((list || isOpen) && (!withMobileLogic || !isMobile)) {
       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");
+
+      const dropdownWidth = dropdownLiveSearchRef === null || dropdownLiveSearchRef === void 0 ? void 0 : (_dropdownLiveSearchRe = dropdownLiveSearchRef.current) === null || _dropdownLiveSearchRe === void 0 ? void 0 : _dropdownLiveSearchRe.clientWidth;
+      list.style.minWidth = "".concat(dropdownWidth, "px");
     }
   }, [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) {
-        doRequest(searchValueRef.current, true);
-      }
-    }
-  }, [options]);
   (0, _react.useEffect)(() => {
     if (!isOpen) {
       setIsFocusedByClick(false);
-      if (withMobileLogic) setSearchValue("");
+      if (withMobileLogic && isMobile) 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();
+        var _searchInputModalRef$;
+
+        doRequest("").then(() => {
+          setTimeout(() => {
+            var _dropdownListBoxRef$c, _dropdownListBoxRef$c2, _dropdownListHeaderRe, _dropdownListHeaderRe2;
+
+            dropdownListRef.current.style.maxHeight = "".concat((dropdownListBoxRef === null || dropdownListBoxRef === void 0 ? void 0 : (_dropdownListBoxRef$c = dropdownListBoxRef.current) === null || _dropdownListBoxRef$c === void 0 ? void 0 : (_dropdownListBoxRef$c2 = _dropdownListBoxRef$c.getBoundingClientRect()) === null || _dropdownListBoxRef$c2 === void 0 ? void 0 : _dropdownListBoxRef$c2.height) - (dropdownListHeaderRef === null || dropdownListHeaderRef === void 0 ? void 0 : (_dropdownListHeaderRe = dropdownListHeaderRef.current) === null || _dropdownListHeaderRe === void 0 ? void 0 : (_dropdownListHeaderRe2 = _dropdownListHeaderRe.getBoundingClientRect()) === null || _dropdownListHeaderRe2 === void 0 ? void 0 : _dropdownListHeaderRe2.height), "px");
+          }, 1);
+        });
+        searchInputModalRef === null || searchInputModalRef === void 0 ? void 0 : (_searchInputModalRef$ = searchInputModalRef.current) === null || _searchInputModalRef$ === void 0 ? void 0 : _searchInputModalRef$.focus();
       }
+
       dropdownListRef.current.addEventListener("scroll", doScrollCallback);
     }
+
     return () => {
       removeEventListener("scroll", doScrollCallback);
     };
   }, [isOpen, dropdownListRef]);
-  const closeList = isOpen ? handleClickOutside : () => {};
   (0, _react.useLayoutEffect)(() => {
     var _getListContainer3;
+
     if (!isMobile) {
       window.addEventListener("mousewheel", closeList);
       window.addEventListener("scroll", closeList);
@@ -341,18 +401,47 @@ const DropdownLiveSearch = _ref => {
       window.removeEventListener("scroll", closeList);
       window.removeEventListener("touchmove", closeList);
     }
-    (_getListContainer3 = getListContainer()) === null || _getListContainer3 === void 0 || _getListContainer3.addEventListener("click", closeList);
+
+    (_getListContainer3 = getListContainer()) === null || _getListContainer3 === void 0 ? void 0 : _getListContainer3.addEventListener("click", closeList);
+    window.addEventListener("keyup", closeListViaEsc);
     return () => {
       var _getListContainer4;
+
       window.removeEventListener("mousewheel", closeList);
       window.removeEventListener("scroll", closeList);
       window.removeEventListener("touchmove", closeList);
-      (_getListContainer4 = getListContainer()) === null || _getListContainer4 === void 0 || _getListContainer4.removeEventListener("click", closeList);
+      window.removeEventListener("keyup", closeListViaEsc);
+      (_getListContainer4 = getListContainer()) === null || _getListContainer4 === void 0 ? void 0 : _getListContainer4.removeEventListener("click", closeList);
     };
   }, [getListContainer]);
+  (0, _react.useEffect)(() => {
+    const setScrollTopValue = e => {
+      setScrollTop(parseInt(e.target.scrollTop, 10));
+    };
+
+    if (isOpen && isMobile && dropdownListRef !== null && dropdownListRef !== void 0 && dropdownListRef.current) {
+      var _dropdownListRef$curr7;
+
+      dropdownListRef === null || dropdownListRef === void 0 ? void 0 : (_dropdownListRef$curr7 = dropdownListRef.current) === null || _dropdownListRef$curr7 === void 0 ? void 0 : _dropdownListRef$curr7.addEventListener("scroll", setScrollTopValue);
+    }
+
+    return () => {
+      var _dropdownListRef$curr8;
+
+      dropdownListRef === null || dropdownListRef === void 0 ? void 0 : (_dropdownListRef$curr8 = dropdownListRef.current) === null || _dropdownListRef$curr8 === void 0 ? void 0 : _dropdownListRef$curr8.removeEventListener("scroll", setScrollTopValue);
+    };
+  }, [isOpen, isMobile, dropdownListRef === null || dropdownListRef === void 0 ? void 0 : dropdownListRef.current]);
+  (0, _react.useEffect)(() => {
+    if (dropdownListRef !== null && dropdownListRef !== void 0 && dropdownListRef.current) {
+      var _dropdownListRef$curr9, _dropdownListRef$curr10;
+
+      setScrollHeight(parseInt((dropdownListRef === null || dropdownListRef === void 0 ? void 0 : (_dropdownListRef$curr9 = dropdownListRef.current) === null || _dropdownListRef$curr9 === void 0 ? void 0 : _dropdownListRef$curr9.scrollHeight) - (dropdownListRef === null || dropdownListRef === void 0 ? void 0 : (_dropdownListRef$curr10 = dropdownListRef.current) === null || _dropdownListRef$curr10 === void 0 ? void 0 : _dropdownListRef$curr10.clientHeight), 10));
+    }
+  }, [scrollTop, dropdownListRef === null || dropdownListRef === void 0 ? void 0 : dropdownListRef.current]);
+  if (!options) return null;
   return /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _classnames.default)(RC, className, {
-      disabled: disabled,
+      disabled,
       ["".concat(RC, "-mobile")]: isMobile
     }),
     ref: dropdownLiveSearchRef
@@ -362,14 +451,14 @@ const DropdownLiveSearch = _ref => {
     onClick: () => !isSearchable ? setIsOpen(!isOpen) : null,
     onMouseDown: () => setIsFocusedByClick(true),
     onFocus: () => !isFocusedByClick ? setIsOpen(true) : null,
-    tabIndex: tabIndex === null || tabIndex === void 0 || (_tabIndex$toString = tabIndex.toString) === null || _tabIndex$toString === void 0 ? void 0 : _tabIndex$toString.call(tabIndex)
+    tabIndex: tabIndex === null || tabIndex === void 0 ? void 0 : (_tabIndex$toString = tabIndex.toString) === null || _tabIndex$toString === void 0 ? void 0 : _tabIndex$toString.call(tabIndex)
   }, isSearchable ? /*#__PURE__*/_react.default.createElement("input", (0, _extends2.default)({
     ref: searchInputRef,
     className: "".concat(RC, "__input"),
-    value: isOpen ? isMobile && withMobileLogic ? labelByValue : searchValue : labelByValue,
+    value: isOpen ? isMobile && withMobileLogic || !isSearchValueChangedAfterOpen ? labelByValue : searchValue : labelByValue,
     onChange: handle.onInputChange,
     placeholder: placeholder,
-    onFocus: searchableInputFocus,
+    onFocus: onSearchableInputFocus,
     onClick: handle.onInputClick,
     tabIndex: -1
   }, attributesOfNativeInput)) : /*#__PURE__*/_react.default.createElement("span", {
@@ -383,4 +472,6 @@ const DropdownLiveSearch = _ref => {
     className: "mobile-icon"
   }) : isOpen ? /*#__PURE__*/_react.default.createElement(_reactFeather.ChevronUp, null) : /*#__PURE__*/_react.default.createElement(_reactFeather.ChevronDown, null))), isOpen && (isMobile && withMobileLogic ? renderListContainer() : getListMarkUp()));
 };
-var _default = exports.default = DropdownLiveSearch;
+
+var _default = DropdownLiveSearch;
+exports.default = _default;

package/dist/Atomic/FormElements/FileLoader/FileLoader.js

@@ -1,18 +1,28 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+
 var _react = _interopRequireWildcard(require("react"));
+
 var _classnames = _interopRequireDefault(require("classnames"));
+
 var _LoadZone = _interopRequireDefault(require("./partial/LoadZone"));
+
 var _LoadedContent = _interopRequireDefault(require("./partial/LoadedContent"));
+
 require("./FileLoader.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; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (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; }
+
 const RC = "file-loader";
+
 const FileLoader = props => {
   const {
     // будет использован в качестве id инпута в LoadZone, обязателен для корректной работы
@@ -73,4 +83,6 @@ const FileLoader = props => {
     attributesOfNativeInput: attributesOfNativeInput
   }));
 };
-var _default = exports.default = FileLoader;
+
+var _default = FileLoader;
+exports.default = _default;

package/dist/Atomic/FormElements/FileLoader/partial/LoadZone.js

@@ -1,18 +1,28 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
 var _react = _interopRequireWildcard(require("react"));
+
 var _classnames = _interopRequireDefault(require("classnames"));
+
 require("../FileLoader.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; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (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; }
+
 const DEFAULT_MAX_FILE_SIZE = 1024 * 1024; //1Мб
+
 const FILTER_FILES_DEFAULT = file => file.size <= DEFAULT_MAX_FILE_SIZE ? file : null;
+
 const LoadZone = _ref => {
   let {
     RC,
@@ -31,14 +41,16 @@ const LoadZone = _ref => {
   const dropZoneId = "dropZone-".concat(fieldKey);
   const handle = {
     change: async e => {
-      setIsLoadContent === null || setIsLoadContent === void 0 || setIsLoadContent(true);
+      setIsLoadContent === null || setIsLoadContent === void 0 ? void 0 : setIsLoadContent(true);
       const file = e.type === "change" ? e.target.files[0] : e.dataTransfer.files[0];
       const validatedFile = filterFiles ? await filterFiles(file) : file;
       if (processErrors && !validatedFile) await processErrors(file);
+
       if (!isBlockNullValues || validatedFile) {
         onChange(await doLoad(validatedFile).catch(() => null));
       }
-      setIsLoadContent === null || setIsLoadContent === void 0 || setIsLoadContent(false);
+
+      setIsLoadContent === null || setIsLoadContent === void 0 ? void 0 : setIsLoadContent(false);
     },
     dragover: e => {
       e.stopPropagation();
@@ -67,17 +79,17 @@ const LoadZone = _ref => {
   };
   (0, _react.useEffect)(() => {
     const dropbox = document.getElementById(dropZoneId);
-    dropbox === null || dropbox === void 0 || dropbox.addEventListener("dragenter", handle.dragenter, false);
-    dropbox === null || dropbox === void 0 || dropbox.addEventListener("dragover", handle.dragover, false);
-    dropbox === null || dropbox === void 0 || dropbox.addEventListener("dragleave", handle.dragleave, false);
-    dropbox === null || dropbox === void 0 || dropbox.addEventListener("drop", handle.drop, false);
-    dropbox === null || dropbox === void 0 || dropbox.addEventListener("dragend", handle.dragleave, false);
+    dropbox === null || dropbox === void 0 ? void 0 : dropbox.addEventListener("dragenter", handle.dragenter, false);
+    dropbox === null || dropbox === void 0 ? void 0 : dropbox.addEventListener("dragover", handle.dragover, false);
+    dropbox === null || dropbox === void 0 ? void 0 : dropbox.addEventListener("dragleave", handle.dragleave, false);
+    dropbox === null || dropbox === void 0 ? void 0 : dropbox.addEventListener("drop", handle.drop, false);
+    dropbox === null || dropbox === void 0 ? void 0 : dropbox.addEventListener("dragend", handle.dragleave, false);
     return () => {
-      dropbox === null || dropbox === void 0 || dropbox.removeEventListener("dragenter", handle.dragenter, false);
-      dropbox === null || dropbox === void 0 || dropbox.removeEventListener("dragover", handle.dragover, false);
-      dropbox === null || dropbox === void 0 || dropbox.removeEventListener("dragleave", handle.dragleave, false);
-      dropbox === null || dropbox === void 0 || dropbox.removeEventListener("drop", handle.drop, false);
-      dropbox === null || dropbox === void 0 || dropbox.removeEventListener("dragend", handle.dragleave, false);
+      dropbox === null || dropbox === void 0 ? void 0 : dropbox.removeEventListener("dragenter", handle.dragenter, false);
+      dropbox === null || dropbox === void 0 ? void 0 : dropbox.removeEventListener("dragover", handle.dragover, false);
+      dropbox === null || dropbox === void 0 ? void 0 : dropbox.removeEventListener("dragleave", handle.dragleave, false);
+      dropbox === null || dropbox === void 0 ? void 0 : dropbox.removeEventListener("drop", handle.drop, false);
+      dropbox === null || dropbox === void 0 ? void 0 : dropbox.removeEventListener("dragend", handle.dragleave, false);
     };
   }, [fieldKey, doLoad]);
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, icon && /*#__PURE__*/_react.default.createElement("div", {
@@ -95,4 +107,6 @@ const LoadZone = _ref => {
     onChange: handle.change
   }, attributesOfNativeInput))));
 };
-var _default = exports.default = LoadZone;
+
+var _default = LoadZone;
+exports.default = _default;