intelicoreact 1.3.4 → 1.3.6

package/dist/Molecular/InputAddress/InputAddress.js

@@ -1,225 +1,179 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _reactFeather = require("react-feather");
-
 var _classnames = _interopRequireDefault(require("classnames"));
-
-var _useIsMobile2 = _interopRequireDefault(require("../../Functions/useIsMobile"));
-
+var _utils = require("../../Functions/utils");
+var _useIsMobile = _interopRequireDefault(require("../../Functions/useIsMobile"));
 var _Input = _interopRequireDefault(require("../../Atomic/FormElements/Input/Input"));
-
 var _Hint = _interopRequireDefault(require("../../Atomic/UI/Hint/Hint"));
-
+var _Spinner = _interopRequireDefault(require("../../Atomic/Layout/Spinner/Spinner"));
 require("./InputAddress.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 DEFAULT_HINT_MESSAGE = 'Select the correct address from the list of suggestions (must contains house number and street name)';
+const RC = "input-address";
+
+// ? Если равны - true
+const compareValues = (val1, val2) => {
+  return typeof val1 === typeof val2 && ((0, _utils.getIsOnlyAnObject)(val1) ? (0, _utils.compare)(val1, val2) : val1 === val2);
+};
+const throttle = (fn, ms) => {
+  let id = null;
+  return function () {
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    if (id) clearTimeout(id);
+    id = setTimeout(() => {
+      fn(...args);
+    }, ms);
+  };
+};
 
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-var throttleTimeout = null;
-var DEFAULT_HINT_MESSAGE = 'Select the correct address from the list of suggestions (must contains house number and street name)';
-var RC = "input-address";
-
-var InputAddress = function InputAddress(_ref) {
-  var label = _ref.label,
-      _ref$className = _ref.className,
-      className = _ref$className === void 0 ? '' : _ref$className,
-      _ref$isClearable = _ref.isClearable,
-      isClearable = _ref$isClearable === void 0 ? true : _ref$isClearable,
-      _ref$isKeyboardContro = _ref.isKeyboardControlled,
-      isKeyboardControlled = _ref$isKeyboardContro === void 0 ? true : _ref$isKeyboardContro,
-      _ref$fieldKey = _ref.fieldKey,
-      fieldKey = _ref$fieldKey === void 0 ? '' : _ref$fieldKey,
-      _ref$testId = _ref.testId,
-      testId = _ref$testId === void 0 ? '' : _ref$testId,
-      _ref$throttle = _ref.throttle,
-      throttle = _ref$throttle === void 0 ? 300 : _ref$throttle,
-      _ref$loader = _ref.loader,
-      loader = _ref$loader === void 0 ? '' : _ref$loader,
-      _ref$noItemsMessage = _ref.noItemsMessage,
-      noItemsMessage = _ref$noItemsMessage === void 0 ? '' : _ref$noItemsMessage,
-      error = _ref.error,
-      _ref$value = _ref.value,
-      value = _ref$value === void 0 ? '' : _ref$value,
-      _ref$onChange = _ref.onChange,
-      onChange = _ref$onChange === void 0 ? function () {} : _ref$onChange,
-      onChangeValueTransformer = _ref.onChangeValueTransformer,
-      _ref$getListItems = _ref.getListItems,
-      getListItems = _ref$getListItems === void 0 ? function () {} : _ref$getListItems,
-      _ref$noValidate = _ref.noValidate,
-      noValidate = _ref$noValidate === void 0 ? false : _ref$noValidate,
-      renderSelectedItem = _ref.renderSelectedItem,
-      renderListItem = _ref.renderListItem,
-      renderHintMessage = _ref.renderHintMessage,
-      attributesOfNativeInput = _ref.attributesOfNativeInput;
-
-  var _useIsMobile = (0, _useIsMobile2.default)(),
-      isMobile = _useIsMobile.isMobile;
-
-  var inputRef = (0, _react.useRef)(null);
-  var listRef = (0, _react.useRef)(null);
-  var listOverlayRef = (0, _react.useRef)(null);
-  var listWrapperRef = (0, _react.useRef)(null);
-  var listHeaderRef = (0, _react.useRef)(null);
-
-  var _useState = (0, _react.useState)(false),
-      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-      isValueInited = _useState2[0],
-      setIsValueInited = _useState2[1];
-
-  var _useState3 = (0, _react.useState)(null),
-      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-      isScrollableList = _useState4[0],
-      setIsScrollableList = _useState4[1];
-
-  var _useState5 = (0, _react.useState)(0),
-      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
-      scrollTop = _useState6[0],
-      setScrollTop = _useState6[1];
-
-  var _useState7 = (0, _react.useState)(1),
-      _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
-      scrollHeight = _useState8[0],
-      setScrollHeight = _useState8[1];
-
-  var _useState9 = (0, _react.useState)(null),
-      _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
-      query = _useState10[0],
-      setQuery = _useState10[1];
-
-  var _useState11 = (0, _react.useState)(null),
-      _useState12 = (0, _slicedToArray2.default)(_useState11, 2),
-      tempQuery = _useState12[0],
-      setTempQuery = _useState12[1];
-
-  var _useState13 = (0, _react.useState)(null),
-      _useState14 = (0, _slicedToArray2.default)(_useState13, 2),
-      tempValue = _useState14[0],
-      setTempValue = _useState14[1];
-
-  var _useState15 = (0, _react.useState)([]),
-      _useState16 = (0, _slicedToArray2.default)(_useState15, 2),
-      listItems = _useState16[0],
-      setListItems = _useState16[1];
-
-  var _useState17 = (0, _react.useState)(false),
-      _useState18 = (0, _slicedToArray2.default)(_useState17, 2),
-      isLoading = _useState18[0],
-      setIsLoading = _useState18[1];
-
-  var _useState19 = (0, _react.useState)(null),
-      _useState20 = (0, _slicedToArray2.default)(_useState19, 2),
-      hightlightedIndex = _useState20[0],
-      setHightlightedIndex = _useState20[1];
-
-  var _useState21 = (0, _react.useState)(false),
-      _useState22 = (0, _slicedToArray2.default)(_useState21, 2),
-      isFocused = _useState22[0],
-      setIsFocused = _useState22[1];
-
-  var _useState23 = (0, _react.useState)(false),
-      _useState24 = (0, _slicedToArray2.default)(_useState23, 2),
-      isListVisible = _useState24[0],
-      setIsListVisible = _useState24[1];
-
-  var isWrongAddress = (0, _react.useMemo)(function () {
-    var _query$street;
-
+// Отдает true если value валидное НЕ нулевое число
+const getIsValidNumber = value => !!value && typeof value === 'number' && !Number.isNaN(value);
+const InputAddress = _ref => {
+  let {
+    label,
+    className = '',
+    isClearable = true,
+    isKeyboardControlled = true,
+    fieldKey = '',
+    testId = '',
+    throttle: throttleTime = 500,
+    // ms
+    additionalThrottleTimeForListingRequest = 0,
+    // ms
+    loader = '',
+    noItemsMessage = '',
+    error,
+    value = '',
+    onChange = () => {},
+    onChangeValueTransformer,
+    disabled,
+    getListItems = () => {},
+    clarifyAddressInfo,
+    // ! Не делать дефолтного значения! Это и метод и флаг
+
+    noValidate = false,
+    renderSelectedItem,
+    renderListItem,
+    renderHintMessage,
+    attributesOfNativeInput
+  } = _ref;
+  const {
+    isMobile
+  } = (0, _useIsMobile.default)();
+  const inputRef = (0, _react.useRef)(null);
+  const listRef = (0, _react.useRef)(null);
+  const listOverlayRef = (0, _react.useRef)(null);
+  const listWrapperRef = (0, _react.useRef)(null);
+  const listHeaderRef = (0, _react.useRef)(null);
+  const previousValueRef = (0, _react.useRef)(value);
+  const [isValueInited, setIsValueInited] = (0, _react.useState)(false);
+  const [isScrollableList, setIsScrollableList] = (0, _react.useState)(null);
+  const [scrollTop, setScrollTop] = (0, _react.useState)(0);
+  const [scrollHeight, setScrollHeight] = (0, _react.useState)(1);
+  const [innerValue, setInnerValue] = (0, _react.useState)(value);
+  const [tempInnerValue, setTempInnerValue] = (0, _react.useState)(null);
+  const [tempValue, setTempValue] = (0, _react.useState)(null);
+  const [listItems, setListItems] = (0, _react.useState)([]);
+  const [isLoading, setIsLoading] = (0, _react.useState)(false);
+  const [isListLoading, setIsListLoading] = (0, _react.useState)(false);
+  const [hightlightedIndex, setHightlightedIndex] = (0, _react.useState)(null);
+  const [isFocused, setIsFocused] = (0, _react.useState)(false);
+  const [isListVisible, setIsListVisible] = (0, _react.useState)(false);
+  const isWrongAddress = (0, _react.useMemo)(() => {
+    var _innerValue$street;
     if (noValidate) return false;
-    if (query === '') return false; // eslint-disable-next-line no-prototype-builtins
+    if (innerValue === '') return false;
+    // eslint-disable-next-line no-prototype-builtins
+    if (!(innerValue !== null && innerValue !== void 0 && innerValue.hasOwnProperty('streetNumber')) || !(innerValue !== null && innerValue !== void 0 && innerValue.streetNumber)) return true;
 
-    if (!(query !== null && query !== void 0 && query.hasOwnProperty('streetNumber')) || !(query !== null && query !== void 0 && query.streetNumber)) return true; // eslint-disable-next-line no-prototype-builtins
-
-    if (!(query !== null && query !== void 0 && query.hasOwnProperty('street')) || !(query !== null && query !== void 0 && (_query$street = query.street) !== null && _query$street !== void 0 && _query$street.fullName)) return true;
+    // eslint-disable-next-line no-prototype-builtins
+    if (!(innerValue !== null && innerValue !== void 0 && innerValue.hasOwnProperty('street')) || !(innerValue !== null && innerValue !== void 0 && (_innerValue$street = innerValue.street) !== null && _innerValue$street !== void 0 && _innerValue$street.fullName)) return true;
     return false;
-  }, [query]);
-
-  var setQueryAsItem = function setQueryAsItem(e, item) {
-    if (e) e === null || e === void 0 ? void 0 : e.stopPropagation();
-    setTimeout(function () {
-      setQuery(item);
-
+  }, [innerValue]);
+  const setItemAsInnerValue = (e, item) => {
+    if (e instanceof Event) {
+      e.preventDefault();
+      e.stopPropagation();
+    }
+    setTimeout(() => {
+      setInnerValue(item);
       if (isMobile) {
         setIsListVisible(false);
       }
-    }, 1);
+    }, 0);
   };
 
-  var getData = function getData() {
-    if (!(query !== null && query !== void 0 && query.length)) return null;
-    clearTimeout(throttleTimeout);
-    throttleTimeout = setTimeout(function () {
-      var _getListItems;
-
-      setIsLoading(true);
-      (_getListItems = getListItems(query)) === null || _getListItems === void 0 ? void 0 : _getListItems.then(setListItems).finally(function () {
-        return setIsLoading(false);
-      });
-    }, throttle);
+  // ? Базовый метод получения списка вариантов адреса
+  const getAddressVariants = (0, _react.useMemo)(() => innerValue => {
+    var _getListItems;
+    return (_getListItems = getListItems(innerValue)) === null || _getListItems === void 0 ? void 0 : _getListItems.then(setListItems).finally(() => setIsListLoading(false));
+  }, [getListItems]);
+
+  // ? Метод получения списка вариантов адреса с тротлингом (основным и, если нужно, дополнительным)
+  // ? Без useMemo работать НЕ будет (т.к. на каждом перерендере будет создаваться новая ф-я и будет теряться замкнутая переменная id из throttle)
+  const getAddressVariantsWithThrottling = (0, _react.useMemo)(() => {
+    const execute = getIsValidNumber(additionalThrottleTimeForListingRequest) ? throttle(getAddressVariants, additionalThrottleTimeForListingRequest) : getAddressVariants;
+    return getIsValidNumber(throttleTime) ? throttle(execute, throttleTime) : execute;
+  }, [getAddressVariants, additionalThrottleTimeForListingRequest, throttleTime]);
+
+  // ? Итоговый "получатель" списка вариантов адресов
+  const getAddressVariantsList = () => {
+    if (!(innerValue !== null && innerValue !== void 0 && innerValue.length)) return null;
+
+    // ? Вообще с учетом надпись "Loading" в списке вариантов включается в этом месте (т.е. сразу при начале набора),
+    // ? то, наверное, можно было НЕ мутить с дополнительным тротлингом )).
+    // ? Наверное, можно было увеличить время первичного тротлинга и, наверное, работало бы так же ))
+    // ? НО, раз уже сделал )) оставлю, может будет в будущем полезно )
+    setIsListLoading(true);
+    getAddressVariantsWithThrottling(innerValue);
   };
-
-  var onClearClick = function onClearClick(e) {
+  const onClearClick = e => {
     var _inputRef$current;
-
     e.preventDefault();
     e.stopPropagation();
-
     if (!isMobile) {
       setIsListVisible(false);
     }
-
-    setQuery('');
-    inputRef === null || inputRef === void 0 ? void 0 : (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.focus();
-    setTimeout(function () {
-      return setIsFocused(true);
-    }, 50);
+    setInnerValue('');
+    inputRef === null || inputRef === void 0 || (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 || _inputRef$current.focus();
+    setTimeout(() => setIsFocused(true), 0);
   };
-
-  var onOverlayClick = function onOverlayClick(e) {
+  const onOverlayClick = e => {
     if (e.target === (listOverlayRef === null || listOverlayRef === void 0 ? void 0 : listOverlayRef.current)) {
       e.stopPropagation();
       e.preventDefault();
       setIsListVisible(false);
-      setQuery(tempQuery);
-      onChange(typeof query === 'string' || !onChangeValueTransformer || typeof onChangeValueTransformer !== 'function' ? query : onChangeValueTransformer(query));
+      setInnerValue(tempInnerValue);
+      onChange(typeof innerValue === 'string' || !onChangeValueTransformer || typeof onChangeValueTransformer !== 'function' ? innerValue : onChangeValueTransformer(innerValue));
     }
   };
-
-  var onKeyDown = function onKeyDown(keyCode) {
+  const onKeyDown = keyCode => {
     if (!isListVisible || !isKeyboardControlled) return false;
-
     if (keyCode === 13) {
       var _inputRef$current2;
-
       // Enter Controller
-      setQueryAsItem(null, listItems[hightlightedIndex]);
+      setItemAsInnerValue(null, listItems[hightlightedIndex]);
       setHightlightedIndex(null);
-      inputRef === null || inputRef === void 0 ? void 0 : (_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 ? void 0 : _inputRef$current2.blur();
+      inputRef === null || inputRef === void 0 || (_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 || _inputRef$current2.blur();
     } else {
-      var _listRef$current, _listRef$current$getB, _listRef$current2, _newHightlightedEleme;
+      var _listRef$current, _listRef$current2, _newHightlightedEleme;
+      let newHightlightedIndex = null;
+      const listItemsElements = document.getElementsByClassName('input-address__list--item');
+      const listHeight = listRef === null || listRef === void 0 || (_listRef$current = listRef.current) === null || _listRef$current === void 0 || (_listRef$current = _listRef$current.getBoundingClientRect()) === null || _listRef$current === void 0 ? void 0 : _listRef$current.height;
+      const listScrollTop = (listRef === null || listRef === void 0 || (_listRef$current2 = listRef.current) === null || _listRef$current2 === void 0 ? void 0 : _listRef$current2.scrollTop) || 0;
+      const lastItemIndex = parseInt(listItems === null || listItems === void 0 ? void 0 : listItems.length) - 1;
 
-      var newHightlightedIndex = null;
-      var listItemsElements = document.getElementsByClassName('input-address__list--item');
-      var listHeight = listRef === null || listRef === void 0 ? void 0 : (_listRef$current = listRef.current) === null || _listRef$current === void 0 ? void 0 : (_listRef$current$getB = _listRef$current.getBoundingClientRect()) === null || _listRef$current$getB === void 0 ? void 0 : _listRef$current$getB.height;
-      var listScrollTop = (listRef === null || listRef === void 0 ? void 0 : (_listRef$current2 = listRef.current) === null || _listRef$current2 === void 0 ? void 0 : _listRef$current2.scrollTop) || 0;
-      var lastItemIndex = parseInt(listItems === null || listItems === void 0 ? void 0 : listItems.length) - 1;
       /** Arrows Controllers **/
-
       if (keyCode === 40) {
         // Down Key Controller
         if (hightlightedIndex === null || hightlightedIndex === lastItemIndex) {
@@ -234,139 +188,160 @@ var InputAddress = function InputAddress(_ref) {
         } else if (hightlightedIndex - 1 >= 0) {
           newHightlightedIndex = hightlightedIndex - 1;
         }
-      } // Scroll to Element
-
-
-      var newHightlightedElement = listItemsElements[newHightlightedIndex];
-      var newHightlightedElementHeight = newHightlightedElement === null || newHightlightedElement === void 0 ? void 0 : (_newHightlightedEleme = newHightlightedElement.getBoundingClientRect()) === null || _newHightlightedEleme === void 0 ? void 0 : _newHightlightedEleme.height;
-      var newHightlightedElementTopInList = newHightlightedElement === null || newHightlightedElement === void 0 ? void 0 : newHightlightedElement.offsetTop;
+      }
 
+      // Scroll to Element
+      const newHightlightedElement = listItemsElements[newHightlightedIndex];
+      const newHightlightedElementHeight = newHightlightedElement === null || newHightlightedElement === void 0 || (_newHightlightedEleme = newHightlightedElement.getBoundingClientRect()) === null || _newHightlightedEleme === void 0 ? void 0 : _newHightlightedEleme.height;
+      const newHightlightedElementTopInList = newHightlightedElement === null || newHightlightedElement === void 0 ? void 0 : newHightlightedElement.offsetTop;
       if (newHightlightedElementTopInList + newHightlightedElementHeight > listScrollTop + listHeight) {
         if (Math.abs(newHightlightedElementTopInList + newHightlightedElementHeight - (listScrollTop + listHeight)) <= newHightlightedElementHeight) {
           var _listRef$current3;
-
-          listRef === null || listRef === void 0 ? void 0 : (_listRef$current3 = listRef.current) === null || _listRef$current3 === void 0 ? void 0 : _listRef$current3.scrollTo(0, listScrollTop + newHightlightedElementHeight);
+          listRef === null || listRef === void 0 || (_listRef$current3 = listRef.current) === null || _listRef$current3 === void 0 || _listRef$current3.scrollTo(0, listScrollTop + newHightlightedElementHeight);
         } else {
           var _listRef$current4;
-
-          listRef === null || listRef === void 0 ? void 0 : (_listRef$current4 = listRef.current) === null || _listRef$current4 === void 0 ? void 0 : _listRef$current4.scrollTo(0, newHightlightedElementTopInList);
+          listRef === null || listRef === void 0 || (_listRef$current4 = listRef.current) === null || _listRef$current4 === void 0 || _listRef$current4.scrollTo(0, newHightlightedElementTopInList);
         }
       } else if (newHightlightedElementTopInList < listScrollTop) {
         if (Math.abs(newHightlightedElementTopInList - listScrollTop) < newHightlightedElementHeight) {
           var _listRef$current5;
-
-          listRef === null || listRef === void 0 ? void 0 : (_listRef$current5 = listRef.current) === null || _listRef$current5 === void 0 ? void 0 : _listRef$current5.scrollTo(0, listScrollTop - newHightlightedElementHeight);
+          listRef === null || listRef === void 0 || (_listRef$current5 = listRef.current) === null || _listRef$current5 === void 0 || _listRef$current5.scrollTo(0, listScrollTop - newHightlightedElementHeight);
         } else {
           var _listRef$current6;
-
-          listRef === null || listRef === void 0 ? void 0 : (_listRef$current6 = listRef.current) === null || _listRef$current6 === void 0 ? void 0 : _listRef$current6.scrollTo(0, newHightlightedElementTopInList);
+          listRef === null || listRef === void 0 || (_listRef$current6 = listRef.current) === null || _listRef$current6 === void 0 || _listRef$current6.scrollTo(0, newHightlightedElementTopInList);
         }
       }
-
       if (!isMobile) setHightlightedIndex(newHightlightedIndex);
     }
   };
-
-  var onChangeInternal = function onChangeInternal(value) {
-    setQuery(value);
-  };
-
-  var getHintMessage = function getHintMessage() {
+  const getHintMessage = () => {
     if (!renderHintMessage || typeof renderHintMessage !== 'function') return DEFAULT_HINT_MESSAGE;
-    return renderHintMessage(query);
+    return renderHintMessage(innerValue);
   };
-
-  var getSelectedItemLabel = function getSelectedItemLabel() {
+  const getSelectedItemLabel = function () {
     var _value$street;
-
-    var value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : query;
-    if (value === null) return '';
+    let value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : innerValue;
+    if (!value) return '';
     if (typeof value === 'string') return value;
-    if (!renderSelectedItem || typeof renderSelectedItem !== 'function') return "".concat((value === null || value === void 0 ? void 0 : value.streetNumber) || '', " ").concat((value === null || value === void 0 ? void 0 : (_value$street = value.street) === null || _value$street === void 0 ? void 0 : _value$street.fullName) || '');
-    return renderSelectedItem(value);
+    if (typeof renderSelectedItem === 'function') renderSelectedItem(value);
+    const label = "".concat((value === null || value === void 0 ? void 0 : value.streetNumber) || '', " ").concat((value === null || value === void 0 || (_value$street = value.street) === null || _value$street === void 0 ? void 0 : _value$street.fullName) || '').trim();
+    return !label && isLoading ? previousValueRef.current : label;
   };
-
-  var getListItemLabel = function getListItemLabel(item) {
+  const getListItemLabel = item => {
     if (typeof item === 'string') return item;
     if (!renderListItem || typeof renderListItem !== 'function') return item === null || item === void 0 ? void 0 : item.fullPrediction;
     return renderListItem(item);
   };
-
-  var setListHeight = function setListHeight() {
+  const setListHeight = () => {
     if (listWrapperRef !== null && listWrapperRef !== void 0 && listWrapperRef.current && listHeaderRef !== null && listHeaderRef !== void 0 && listHeaderRef.current && listRef.current) {
-      var _listWrapperRef$curre, _listWrapperRef$curre2, _listHeaderRef$curren, _listHeaderRef$curren2;
-
-      var listWrapperHeight = listWrapperRef === null || listWrapperRef === void 0 ? void 0 : (_listWrapperRef$curre = listWrapperRef.current) === null || _listWrapperRef$curre === void 0 ? void 0 : (_listWrapperRef$curre2 = _listWrapperRef$curre.getBoundingClientRect()) === null || _listWrapperRef$curre2 === void 0 ? void 0 : _listWrapperRef$curre2.height;
-      var listWrapperStyles = getComputedStyle(listWrapperRef === null || listWrapperRef === void 0 ? void 0 : listWrapperRef.current);
-      var listHeaderHeight = listHeaderRef === null || listHeaderRef === void 0 ? void 0 : (_listHeaderRef$curren = listHeaderRef.current) === null || _listHeaderRef$curren === void 0 ? void 0 : (_listHeaderRef$curren2 = _listHeaderRef$curren.getBoundingClientRect()) === null || _listHeaderRef$curren2 === void 0 ? void 0 : _listHeaderRef$curren2.height;
-      var listHeight = listWrapperHeight - listHeaderHeight - parseInt(listWrapperStyles.paddingBottom);
+      var _listWrapperRef$curre, _listHeaderRef$curren;
+      const listWrapperHeight = listWrapperRef === null || listWrapperRef === void 0 || (_listWrapperRef$curre = listWrapperRef.current) === null || _listWrapperRef$curre === void 0 || (_listWrapperRef$curre = _listWrapperRef$curre.getBoundingClientRect()) === null || _listWrapperRef$curre === void 0 ? void 0 : _listWrapperRef$curre.height;
+      const listWrapperStyles = getComputedStyle(listWrapperRef === null || listWrapperRef === void 0 ? void 0 : listWrapperRef.current);
+      const listHeaderHeight = listHeaderRef === null || listHeaderRef === void 0 || (_listHeaderRef$curren = listHeaderRef.current) === null || _listHeaderRef$curren === void 0 || (_listHeaderRef$curren = _listHeaderRef$curren.getBoundingClientRect()) === null || _listHeaderRef$curren === void 0 ? void 0 : _listHeaderRef$curren.height;
+      const listHeight = listWrapperHeight - listHeaderHeight - parseInt(listWrapperStyles.paddingBottom);
       listRef.current.style.maxHeight = "".concat(listHeight, "px");
     }
   };
-
-  var resetListHeight = function resetListHeight() {
+  const resetListHeight = () => {
     if (listRef.current) {
       listRef.current.style.maxHeight = "initial";
     }
   };
 
-  var preparedValue = (0, _react.useMemo)(function () {
-    if (!value) return '';
-    if (typeof value === 'string') return value === null || value === void 0 ? void 0 : value.trim();
-    return value;
-  }, [value]);
-  (0, _react.useEffect)(function () {
-    if (isFocused && query !== '') {
-      setIsListVisible(true);
-      getData();
-    }
+  // ? Основной блок работы со значениями адреса
+  // ? Не меняйте вызовы setInnerValue и onChange не разобравшись в логике вызовов
+  (0, _react.useEffect)(() => {
+    // ? Исключение инициализации - равны только при первом рендере компонента,
+    // ? т.к. рефка и стейт инициализируются верхним value
+    if (!compareValues(innerValue, previousValueRef.current)) {
+      const isObject = (0, _utils.getIsOnlyAnObject)(innerValue);
+
+      // ? innerValue меняется либо от ручного ввода, либо от выбора из списка
+      // ? Полная информация или нет - напрямую зависит от ответа getListItems
+      const isFullInfo = isObject && 'streetNumber' in innerValue && 'street' in innerValue && 'city' in innerValue && 'state' in innerValue && 'country' in innerValue && 'zipCode' in innerValue;
+
+      // ? Для старого эндпоинта возвращается список с полной информацией, поэтому на проектах ничего не поменяется,
+      // ? если не менять запросник (getListItems), все будет проходить по этой if-ке или по 3-й (для строчных значений)
+      if (isFullInfo) {
+        onChange(innerValue);
+        setIsLoading(false);
+      }
+
+      // ? Неполная информация может быть только в том случае, когда метод getListItems использует уже новый эндпоинт гугл-апи.
+      // ? Предполагается, что при этом в компонент будет прокинута ф-я "уточнятель" (clarifyAddressInfo)
+      if (isObject && !isFullInfo) {
+        if (typeof clarifyAddressInfo === 'function') {
+          var _clarifyAddressInfo, _clarifyAddressInfo$t;
+          setIsLoading(true);
+          // ? Предполагается, что clarifyAddressInfo - асинхронная ф-я, запросник уточнения опции
+          // ? Никаких await-ов НЕ нужно (тем более что в useEffect и нельзя для нового React),
+          // ? промис "выплюнется в пустоту", но НЕ будет отчищен до резолва, а useEffect (и итерация рендера в целом) при этом будет закончен(а)
+          (_clarifyAddressInfo = clarifyAddressInfo(innerValue)) === null || _clarifyAddressInfo === void 0 || (_clarifyAddressInfo$t = _clarifyAddressInfo.then) === null || _clarifyAddressInfo$t === void 0 || _clarifyAddressInfo$t.call(_clarifyAddressInfo, res => {
+            if (res) setInnerValue(res);else {
+              setInnerValue(previousValueRef.current);
+              setTimeout(() => {
+                inputRef.current.focus();
+                inputRef.current.setSelectionRange(previousValueRef.current.length, previousValueRef.current.length);
+              }, 0);
+            }
+            setIsLoading(false);
+            return res;
+          });
+        }
+        // ! Если сверху поменяли эндпоинт и он выдает "облегченный листинг" (айтемы с неполной инфой),
+        // ! и НЕ пробросили clarifyAddressInfo, то на этом кейсе велью инпута будет просто зануляться
+        // ! (getSelectedItemLabel вернет пустую строку если вкинуть innerValue без всей инфы)
+        else setInnerValue(getSelectedItemLabel(innerValue));
+      }
 
-    if (JSON.stringify(preparedValue) !== JSON.stringify(query) && query !== null) {
-      onChange(typeof query === 'string' || !onChangeValueTransformer || typeof onChangeValueTransformer !== 'function' ? query : onChangeValueTransformer(query));
+      // ? Кейс для строчных значений
+      if (!isObject) {
+        // ? Вызываем верхний onChange если innerValue есть или если нету, но это не после логики уточнения
+        if (innerValue || !isLoading) onChange(innerValue);
+        // ? Если innerValue есть и еще не открыт листинг - открываем
+        if (innerValue && !isListVisible) setIsListVisible(true);
+        // ? Если инпут сфокусирован и значение есть - запрашиваем список вариантов
+        if (isFocused && !!innerValue) getAddressVariantsList();
+      }
     }
-  }, [query]);
-  (0, _react.useEffect)(function () {
+  }, [innerValue]);
+  (0, _react.useEffect)(() => {
     if (!isFocused && !isMobile) {
       setIsListVisible(false);
       setHightlightedIndex(null);
     }
   }, [isFocused]);
-  (0, _react.useEffect)(function () {
+  (0, _react.useEffect)(() => {
     if (!isListVisible) {
       setListItems([]);
       resetListHeight();
     }
-
     if (isMobile && isListVisible) {
-      setTempQuery(query);
+      setTempInnerValue(innerValue);
       setListHeight();
     }
   }, [isListVisible]);
-  (0, _react.useEffect)(function () {
-    if (JSON.stringify(preparedValue) !== JSON.stringify(query) || !isValueInited) {
-      setTimeout(function () {
-        setQuery(preparedValue);
-        setIsValueInited(true);
-      }, 1);
-    }
-  }, [preparedValue]);
+  (0, _react.useEffect)(() => {
+    // ? учет изменения value сверху (верхние переназначения велью)
+    if (!compareValues(value, innerValue)) setInnerValue(value);
 
-  var renderSearchableInput = function renderSearchableInput() {
-    var value = getSelectedItemLabel();
+    // ? useEffect должен быть последним, т.к. рефка меняется в рамках текущей итерации
+    previousValueRef.current = value;
+  }, [value]);
+  const renderSearchableInput = () => {
+    const inputValue = getSelectedItemLabel();
     return /*#__PURE__*/_react.default.createElement("div", {
       className: (0, _classnames.default)('input-address__input-wrapper')
     }, /*#__PURE__*/_react.default.createElement(_Input.default, {
       ref: inputRef,
       testId: "inputAddress--input--key-".concat(testId || fieldKey),
       className: (0, _classnames.default)('input-address__input', className),
-      value: value,
-      onChange: onChangeInternal,
-      onFocus: function onFocus(e) {
+      value: inputValue,
+      onChange: setInnerValue,
+      onFocus: e => {
         setIsFocused(true);
       },
-      onBlur: function onBlur() {
-        return setIsFocused(false);
-      },
+      onBlur: () => setIsFocused(false),
       onKeyDown: onKeyDown,
       attributesOfNativeInput: attributesOfNativeInput
     }), isWrongAddress && /*#__PURE__*/_react.default.createElement("div", {
@@ -386,78 +361,63 @@ var InputAddress = function InputAddress(_ref) {
       onClick: onClearClick
     })));
   };
-
-  var renderInput = function renderInput() {
-    var value = getSelectedItemLabel(isListVisible ? tempQuery : query);
+  const renderInput = () => {
+    const inputValue = getSelectedItemLabel(isListVisible ? tempInnerValue : innerValue);
     return /*#__PURE__*/_react.default.createElement("div", {
       className: (0, _classnames.default)('input-address__input-wrapper')
     }, /*#__PURE__*/_react.default.createElement(_Input.default, {
       testId: "inputAddress--input--key-".concat(testId || fieldKey),
       className: (0, _classnames.default)('input-address__input', className),
-      value: value,
-      onChange: onChangeInternal,
-      onFocus: function onFocus(e) {
+      value: inputValue,
+      onChange: setInnerValue,
+      onFocus: e => {
         var _e$target;
-
         setIsListVisible(true);
-        e === null || e === void 0 ? void 0 : (_e$target = e.target) === null || _e$target === void 0 ? void 0 : _e$target.blur();
-        setTimeout(function () {
+        e === null || e === void 0 || (_e$target = e.target) === null || _e$target === void 0 || _e$target.blur();
+        setTimeout(() => {
           var _inputRef$current3;
-
-          return inputRef === null || inputRef === void 0 ? void 0 : (_inputRef$current3 = inputRef.current) === null || _inputRef$current3 === void 0 ? void 0 : _inputRef$current3.focus();
+          return inputRef === null || inputRef === void 0 || (_inputRef$current3 = inputRef.current) === null || _inputRef$current3 === void 0 ? void 0 : _inputRef$current3.focus();
         }, 200);
       }
     }));
   };
-
-  var renderLoader = function renderLoader() {
+  const renderLoader = () => {
     return /*#__PURE__*/_react.default.createElement("div", {
       className: "input-address__list--loader"
     }, loader || 'Loading...');
   };
-
-  var renderList = function renderList() {
-    var renderListItem = function renderListItem(item, i) {
+  const renderList = () => {
+    const renderListItem = (item, i) => {
       return /*#__PURE__*/_react.default.createElement("div", {
         key: "input-address__list-item".concat(i),
         className: (0, _classnames.default)('input-address__list--item', {
           'input-address__list--item-hightlighted': i === hightlightedIndex
         }),
-        onMouseDown: function onMouseDown(e) {
-          return setQueryAsItem(e, item);
-        }
+        onMouseDown: e => setItemAsInnerValue(e, item)
       }, getListItemLabel(item));
     };
-
-    var renderListItemCustom = function renderListItemCustom() {
+    const renderListItemCustom = () => {
       return /*#__PURE__*/_react.default.createElement("div", {
         key: "input-address__list-item--custom",
         className: (0, _classnames.default)('input-address__list--item', 'input-address__list--item-custom'),
-        onMouseDown: function onMouseDown(e) {
-          return setQueryAsItem(e, getSelectedItemLabel());
-        }
+        onMouseDown: e => setItemAsInnerValue(e, getSelectedItemLabel())
       }, getSelectedItemLabel(), /*#__PURE__*/_react.default.createElement(_reactFeather.AlertTriangle, null), /*#__PURE__*/_react.default.createElement("span", null, "Choose this only if your address is not listed below"));
     };
-
-    var renderNoItems = function renderNoItems() {
+    const renderNoItems = () => {
       return /*#__PURE__*/_react.default.createElement("div", {
         className: "input-address__list--no-items"
-      }, isMobile && !(query !== null && query !== void 0 && query.length) ? 'Please begin entering your address' : noItemsMessage || 'No Items');
+      }, isMobile && !(innerValue !== null && innerValue !== void 0 && innerValue.length) ? 'Please begin entering your address' : noItemsMessage || 'No Items');
     };
-
-    var renderListDesktop = function renderListDesktop() {
+    const renderListDesktop = () => {
       return /*#__PURE__*/_react.default.createElement("div", {
         className: "input-address__list-wrapper",
         ref: listWrapperRef
       }, /*#__PURE__*/_react.default.createElement("div", {
         className: "input-address__list",
         ref: listRef
-      }, isLoading ? renderLoader() : listItems !== null && listItems !== void 0 && listItems.length ? listItems === null || listItems === void 0 ? void 0 : listItems.map(renderListItem) : renderNoItems()));
+      }, isListLoading ? renderLoader() : listItems !== null && listItems !== void 0 && listItems.length ? listItems === null || listItems === void 0 ? void 0 : listItems.map(renderListItem) : renderNoItems()));
     };
-
-    var renderListMobile = function renderListMobile() {
-      var _cn;
-
+    const renderListMobile = () => {
       return /*#__PURE__*/_react.default.createElement("div", {
         className: "input-address__list-overlay",
         ref: listOverlayRef,
@@ -467,37 +427,34 @@ var InputAddress = function InputAddress(_ref) {
         ref: listWrapperRef
       }, isMobile && /*#__PURE__*/_react.default.createElement("div", {
         ref: listHeaderRef,
-        className: (0, _classnames.default)("".concat(RC, "__list-header"), (_cn = {}, (0, _defineProperty2.default)(_cn, "".concat(RC, "__list-header-with-shadow"), isScrollableList && isMobile), (0, _defineProperty2.default)(_cn, "".concat(RC, "__list-header-with-shadow-hidden"), scrollTop === 0), _cn))
+        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 || 'Address'), /*#__PURE__*/_react.default.createElement("div", {
         className: (0, _classnames.default)("".concat(RC, "__list-close-icon")),
-        onClick: function onClick() {
-          return setIsListVisible(false);
-        }
+        onClick: () => setIsListVisible(false)
       }, /*#__PURE__*/_react.default.createElement(_reactFeather.X, {
-        onClick: function onClick() {
-          return setIsListVisible(false);
-        }
+        onClick: () => setIsListVisible(false)
       }))), /*#__PURE__*/_react.default.createElement("div", {
         className: (0, _classnames.default)("".concat(RC, "__list-header-row"))
       }, renderSearchableInput())), /*#__PURE__*/_react.default.createElement("div", {
         className: "input-address__list",
         ref: listRef
-      }, isLoading ? renderLoader() : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, getSelectedItemLabel() && renderListItemCustom(), listItems === null || listItems === void 0 ? void 0 : listItems.map(renderListItem), !(listItems !== null && listItems !== void 0 && listItems.length) && !getSelectedItemLabel() && renderNoItems()))));
+      }, isListLoading ? renderLoader() : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, getSelectedItemLabel() && renderListItemCustom(), listItems === null || listItems === void 0 ? void 0 : listItems.map(renderListItem), !(listItems !== null && listItems !== void 0 && listItems.length) && !getSelectedItemLabel() && renderNoItems()))));
     };
-
     return isMobile ? renderListMobile() : renderListDesktop();
   };
-
   return /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _classnames.default)('input-address', {
       'input-address--error': error || isWrongAddress && !isFocused
     })
-  }, isMobile ? renderInput() : renderSearchableInput(), isListVisible && renderList());
+  }, isLoading && /*#__PURE__*/_react.default.createElement(_Spinner.default, {
+    size: "small"
+  }), isMobile ? renderInput() : renderSearchableInput(), isListVisible && renderList());
 };
-
-var _default = InputAddress;
-exports.default = _default;
+var _default = exports.default = InputAddress;