intelicoreact 1.5.40 → 1.6.0

package/dist/Molecular/InputAddress/InputAddress.js

@@ -1,443 +1,518 @@
 "use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
-  value: true
+    value: true
 });
-exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _classnames = _interopRequireDefault(require("classnames"));
-var _reactFeather = require("react-feather");
-var _Input = _interopRequireDefault(require("../../Atomic/FormElements/Input/Input"));
-var _Spinner = _interopRequireDefault(require("../../Atomic/Layout/Spinner/Spinner"));
-var _Hint = _interopRequireDefault(require("../../Atomic/UI/Hint/Hint"));
-var _useIsMobile = _interopRequireDefault(require("../../Functions/useIsMobile"));
-var _utils = require("../../Functions/utils");
+Object.defineProperty(exports, "default", {
+    enumerable: true,
+    get: function() {
+        return _default;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
+const _classnames = /*#__PURE__*/ _interop_require_default(require("classnames"));
+const _reactfeather = require("react-feather");
+const _Input = /*#__PURE__*/ _interop_require_default(require("../../Atomic/FormElements/Input/Input"));
+const _Spinner = /*#__PURE__*/ _interop_require_default(require("../../Atomic/Layout/Spinner/Spinner"));
+const _Hint = /*#__PURE__*/ _interop_require_default(require("../../Atomic/UI/Hint/Hint"));
+const _useIsMobile = /*#__PURE__*/ _interop_require_default(require("../../Functions/useIsMobile/useIsMobile"));
+const _utils = require("../../Functions/utils");
 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 && {}.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 _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+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 _interop_require_wildcard(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 = {
+        __proto__: null
+    };
+    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_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 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);
-  };
+const throttle = (fn, ms)=>{
+    let id = null;
+    return (...args)=>{
+        if (id) clearTimeout(id);
+        id = setTimeout(()=>{
+            fn(...args);
+        }, ms);
+    };
 };
-
 // Отдает true если value валидное НЕ нулевое число
-const getIsValidNumber = value => Boolean(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)(() => {
-    if (noValidate) return false;
-    if (innerValue === "") return false;
-    // eslint-disable-next-line no-prototype-builtins
-    if (!innerValue?.hasOwnProperty("streetNumber") || !innerValue?.streetNumber) return true;
-
-    // eslint-disable-next-line no-prototype-builtins
-    if (!innerValue?.hasOwnProperty("street") || !innerValue?.street?.fullName) return true;
-    return false;
-  }, [innerValue]);
-  const setItemAsInnerValue = (e, item) => {
-    if (e instanceof Event) {
-      e.preventDefault();
-      e.stopPropagation();
-    }
-    setTimeout(() => {
-      setInnerValue(item);
-      if (isMobile) {
-        setIsListVisible(false);
-      }
-    }, 0);
-  };
-
-  // ? Базовый метод получения списка вариантов адреса
-  const getAddressVariants = (0, _react.useMemo)(() => innerValue => getListItems(innerValue)?.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?.length) return null;
-
-    // ? Вообще с учетом надпись "Loading" в списке вариантов включается в этом месте (т.е. сразу при начале набора),
-    // ? то, наверное, можно было НЕ мутить с дополнительным тротлингом )).
-    // ? Наверное, можно было увеличить время первичного тротлинга и, наверное, работало бы так же ))
-    // ? НО, раз уже сделал )) оставлю, может будет в будущем полезно )
-    setIsListLoading(true);
-    getAddressVariantsWithThrottling(innerValue);
-    return null;
-  };
-  const onClearClick = e => {
-    e.preventDefault();
-    e.stopPropagation();
-    if (!isMobile) {
-      setIsListVisible(false);
-    }
-    setInnerValue("");
-    inputRef?.current?.focus();
-    setTimeout(() => setIsFocused(true), 0);
-  };
-  const onOverlayClick = e => {
-    if (e.target === listOverlayRef?.current) {
-      e.stopPropagation();
-      e.preventDefault();
-      setIsListVisible(false);
-      setInnerValue(tempInnerValue);
-      onChange(typeof innerValue === "string" || !onChangeValueTransformer || typeof onChangeValueTransformer !== "function" ? innerValue : onChangeValueTransformer(innerValue));
-    }
-  };
-  const onKeyDown = keyCode => {
-    if (!isListVisible || !isKeyboardControlled) return false;
-    if (keyCode === 13) {
-      // Enter Controller
-      setItemAsInnerValue(null, listItems[hightlightedIndex]);
-      setHightlightedIndex(null);
-      inputRef?.current?.blur();
-    } else {
-      let newHightlightedIndex = null;
-      const listItemsElements = document.getElementsByClassName("input-address__list--item");
-      const listHeight = listRef?.current?.getBoundingClientRect()?.height;
-      const listScrollTop = listRef?.current?.scrollTop || 0;
-      const lastItemIndex = parseInt(listItems?.length, 10) - 1;
-
-      /** Arrows Controllers **/
-      if (keyCode === 40) {
-        // Down Key Controller
-        if (hightlightedIndex === null || hightlightedIndex === lastItemIndex) {
-          newHightlightedIndex = 0;
-        } else if (hightlightedIndex + 1 < listItems?.length) {
-          newHightlightedIndex = hightlightedIndex + 1;
+const getIsValidNumber = (value)=>Boolean(value) && typeof value === "number" && !Number.isNaN(value);
+const InputAddress = ({ label, className = "", isClearable = true, isKeyboardControlled = true, fieldKey = "", testId = "", throttle: throttleTime = 500, additionalThrottleTimeForListingRequest = 0, loader = "", noItemsMessage = "", error, value = "", onChange = ()=>{}, onChangeValueTransformer, disabled, getListItems = ()=>{}, clarifyAddressInfo, noValidate = false, renderSelectedItem, renderListItem, renderHintMessage, attributesOfNativeInput })=>{
+    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 (innerValue === "") return false;
+        // eslint-disable-next-line no-prototype-builtins
+        if (!(innerValue === null || innerValue === void 0 ? void 0 : innerValue.hasOwnProperty("streetNumber")) || !(innerValue === null || innerValue === void 0 ? void 0 : innerValue.streetNumber)) return true;
+        // eslint-disable-next-line no-prototype-builtins
+        if (!(innerValue === null || innerValue === void 0 ? void 0 : innerValue.hasOwnProperty("street")) || !(innerValue === null || innerValue === void 0 ? void 0 : (_innerValue_street = innerValue.street) === null || _innerValue_street === void 0 ? void 0 : _innerValue_street.fullName)) return true;
+        return false;
+    }, [
+        innerValue
+    ]);
+    const setItemAsInnerValue = (e, item)=>{
+        if (e instanceof Event) {
+            e.preventDefault();
+            e.stopPropagation();
         }
-      } else if (keyCode === 38) {
-        // Up Key Controller
-        if (hightlightedIndex === null || hightlightedIndex === 0) {
-          newHightlightedIndex = lastItemIndex;
-        } else if (hightlightedIndex - 1 >= 0) {
-          newHightlightedIndex = hightlightedIndex - 1;
+        setTimeout(()=>{
+            setInnerValue(item);
+            if (isMobile) {
+                setIsListVisible(false);
+            }
+        }, 0);
+    };
+    // ? Базовый метод получения списка вариантов адреса
+    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 ? void 0 : innerValue.length)) return null;
+        // ? Вообще с учетом надпись "Loading" в списке вариантов включается в этом месте (т.е. сразу при начале набора),
+        // ? то, наверное, можно было НЕ мутить с дополнительным тротлингом )).
+        // ? Наверное, можно было увеличить время первичного тротлинга и, наверное, работало бы так же ))
+        // ? НО, раз уже сделал )) оставлю, может будет в будущем полезно )
+        setIsListLoading(true);
+        getAddressVariantsWithThrottling(innerValue);
+        return null;
+    };
+    const onClearClick = (e)=>{
+        var _inputRef_current;
+        e.preventDefault();
+        e.stopPropagation();
+        if (!isMobile) {
+            setIsListVisible(false);
         }
-      }
-
-      // Scroll to Element
-      const newHightlightedElement = listItemsElements[newHightlightedIndex];
-      const newHightlightedElementHeight = newHightlightedElement?.getBoundingClientRect()?.height;
-      const newHightlightedElementTopInList = newHightlightedElement?.offsetTop;
-      if (newHightlightedElementTopInList + newHightlightedElementHeight > listScrollTop + listHeight) {
-        if (Math.abs(newHightlightedElementTopInList + newHightlightedElementHeight - (listScrollTop + listHeight)) <= newHightlightedElementHeight) {
-          listRef?.current?.scrollTo(0, listScrollTop + newHightlightedElementHeight);
-        } else {
-          listRef?.current?.scrollTo(0, newHightlightedElementTopInList);
+        setInnerValue("");
+        inputRef === null || inputRef === void 0 ? void 0 : (_inputRef_current = inputRef.current) === null || _inputRef_current === void 0 ? void 0 : _inputRef_current.focus();
+        setTimeout(()=>setIsFocused(true), 0);
+    };
+    const onOverlayClick = (e)=>{
+        if (e.target === (listOverlayRef === null || listOverlayRef === void 0 ? void 0 : listOverlayRef.current)) {
+            e.stopPropagation();
+            e.preventDefault();
+            setIsListVisible(false);
+            setInnerValue(tempInnerValue);
+            onChange(typeof innerValue === "string" || !onChangeValueTransformer || typeof onChangeValueTransformer !== "function" ? innerValue : onChangeValueTransformer(innerValue));
         }
-      } else if (newHightlightedElementTopInList < listScrollTop) {
-        if (Math.abs(newHightlightedElementTopInList - listScrollTop) < newHightlightedElementHeight) {
-          listRef?.current?.scrollTo(0, listScrollTop - newHightlightedElementHeight);
+    };
+    const onKeyDown = (keyCode)=>{
+        if (!isListVisible || !isKeyboardControlled) return false;
+        if (keyCode === 13) {
+            var _inputRef_current;
+            // Enter Controller
+            setItemAsInnerValue(null, listItems[hightlightedIndex]);
+            setHightlightedIndex(null);
+            inputRef === null || inputRef === void 0 ? void 0 : (_inputRef_current = inputRef.current) === null || _inputRef_current === void 0 ? void 0 : _inputRef_current.blur();
         } else {
-          listRef?.current?.scrollTo(0, newHightlightedElementTopInList);
-        }
-      }
-      if (!isMobile) setHightlightedIndex(newHightlightedIndex);
-    }
-  };
-  const getHintMessage = () => {
-    if (!renderHintMessage || typeof renderHintMessage !== "function") return DEFAULT_HINT_MESSAGE;
-    return renderHintMessage(innerValue);
-  };
-  const getSelectedItemLabel = function () {
-    let value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : innerValue;
-    if (!value) return "";
-    if (typeof value === "string") return value;
-    if (typeof renderSelectedItem === "function") renderSelectedItem(value);
-    const label = `${value?.streetNumber || ""} ${value?.street?.fullName || ""}`.trim();
-    return !label && isLoading ? previousValueRef.current : label;
-  };
-  const getListItemLabel = item => {
-    if (typeof item === "string") return item;
-    if (!renderListItem || typeof renderListItem !== "function") return item?.fullPrediction;
-    return renderListItem(item);
-  };
-  const setListHeight = () => {
-    if (listWrapperRef?.current && listHeaderRef?.current && listRef.current) {
-      const listWrapperHeight = listWrapperRef?.current?.getBoundingClientRect()?.height;
-      const listWrapperStyles = getComputedStyle(listWrapperRef?.current);
-      const listHeaderHeight = listHeaderRef?.current?.getBoundingClientRect()?.height;
-      const listHeight = listWrapperHeight - listHeaderHeight - parseInt(listWrapperStyles.paddingBottom, 10);
-      listRef.current.style.maxHeight = `${listHeight}px`;
-    }
-  };
-  const resetListHeight = () => {
-    if (listRef.current) {
-      listRef.current.style.maxHeight = `initial`;
-    }
-  };
-
-  // ? Основной блок работы со значениями адреса
-  // ? Не меняйте вызовы 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") {
-          setIsLoading(true);
-          // ? Предполагается, что clarifyAddressInfo - асинхронная ф-я, запросник уточнения опции
-          // ? Никаких await-ов НЕ нужно (тем более что в useEffect и нельзя для нового React),
-          // ? промис "выплюнется в пустоту", но НЕ будет отчищен до резолва, а useEffect (и итерация рендера в целом) при этом будет закончен(а)
-          clarifyAddressInfo(innerValue)?.then?.(res => {
-            if (res) setInnerValue(res);else {
-              setInnerValue(previousValueRef.current);
-              setTimeout(() => {
-                inputRef.current.focus();
-                inputRef.current.setSelectionRange(previousValueRef.current.length, previousValueRef.current.length);
-              }, 0);
+            var _listRef_current_getBoundingClientRect, _listRef_current, _listRef_current1, _newHightlightedElement_getBoundingClientRect;
+            let newHightlightedIndex = null;
+            const listItemsElements = document.getElementsByClassName("input-address__list--item");
+            const listHeight = listRef === null || listRef === void 0 ? void 0 : (_listRef_current = listRef.current) === null || _listRef_current === void 0 ? void 0 : (_listRef_current_getBoundingClientRect = _listRef_current.getBoundingClientRect()) === null || _listRef_current_getBoundingClientRect === void 0 ? void 0 : _listRef_current_getBoundingClientRect.height;
+            const listScrollTop = (listRef === null || listRef === void 0 ? void 0 : (_listRef_current1 = listRef.current) === null || _listRef_current1 === void 0 ? void 0 : _listRef_current1.scrollTop) || 0;
+            const lastItemIndex = parseInt(listItems === null || listItems === void 0 ? void 0 : listItems.length, 10) - 1;
+            /** Arrows Controllers **/ if (keyCode === 40) {
+                // Down Key Controller
+                if (hightlightedIndex === null || hightlightedIndex === lastItemIndex) {
+                    newHightlightedIndex = 0;
+                } else if (hightlightedIndex + 1 < (listItems === null || listItems === void 0 ? void 0 : listItems.length)) {
+                    newHightlightedIndex = hightlightedIndex + 1;
+                }
+            } else if (keyCode === 38) {
+                // Up Key Controller
+                if (hightlightedIndex === null || hightlightedIndex === 0) {
+                    newHightlightedIndex = lastItemIndex;
+                } else if (hightlightedIndex - 1 >= 0) {
+                    newHightlightedIndex = hightlightedIndex - 1;
+                }
+            }
+            // Scroll to Element
+            const newHightlightedElement = listItemsElements[newHightlightedIndex];
+            const newHightlightedElementHeight = newHightlightedElement === null || newHightlightedElement === void 0 ? void 0 : (_newHightlightedElement_getBoundingClientRect = newHightlightedElement.getBoundingClientRect()) === null || _newHightlightedElement_getBoundingClientRect === void 0 ? void 0 : _newHightlightedElement_getBoundingClientRect.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_current2;
+                    listRef === null || listRef === void 0 ? void 0 : (_listRef_current2 = listRef.current) === null || _listRef_current2 === void 0 ? void 0 : _listRef_current2.scrollTo(0, listScrollTop + newHightlightedElementHeight);
+                } else {
+                    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, newHightlightedElementTopInList);
+                }
+            } else if (newHightlightedElementTopInList < listScrollTop) {
+                if (Math.abs(newHightlightedElementTopInList - listScrollTop) < newHightlightedElementHeight) {
+                    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, listScrollTop - newHightlightedElementHeight);
+                } else {
+                    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, newHightlightedElementTopInList);
+                }
             }
-            setIsLoading(false);
-            return res;
-          });
+            if (!isMobile) setHightlightedIndex(newHightlightedIndex);
         }
-        // ! Если сверху поменяли эндпоинт и он выдает "облегченный листинг" (айтемы с неполной инфой),
-        // ! и НЕ пробросили clarifyAddressInfo, то на этом кейсе велью инпута будет просто зануляться
-        // ! (getSelectedItemLabel вернет пустую строку если вкинуть innerValue без всей инфы)
-        else setInnerValue(getSelectedItemLabel(innerValue));
-      }
-
-      // ? Кейс для строчных значений
-      if (!isObject) {
-        // ? Вызываем верхний onChange если innerValue есть или если нету, но это не после логики уточнения
-        if (innerValue || !isLoading) onChange(innerValue);
-        // ? Если innerValue есть и еще не открыт листинг - открываем
-        if (innerValue && !isListVisible) setIsListVisible(true);
-        // ? Если инпут сфокусирован и значение есть - запрашиваем список вариантов
-        if (isFocused && Boolean(innerValue)) getAddressVariantsList();
-      }
-    }
-  }, [innerValue]);
-  (0, _react.useEffect)(() => {
-    if (!isFocused && !isMobile) {
-      setIsListVisible(false);
-      setHightlightedIndex(null);
-    }
-  }, [isFocused]);
-  (0, _react.useEffect)(() => {
-    if (!isListVisible) {
-      setListItems([]);
-      resetListHeight();
-    }
-    if (isMobile && isListVisible) {
-      setTempInnerValue(innerValue);
-      setListHeight();
-    }
-  }, [isListVisible]);
-  (0, _react.useEffect)(() => {
-    // ? учет изменения value сверху (верхние переназначения велью)
-    if (!compareValues(value, innerValue)) setInnerValue(value);
-
-    // ? 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-${testId || fieldKey}`,
-      className: (0, _classnames.default)("input-address__input", className),
-      value: inputValue,
-      onChange: setInnerValue,
-      onFocus: e => {
-        setIsFocused(true);
-      },
-      onBlur: () => setIsFocused(false),
-      onKeyDown: onKeyDown,
-      attributesOfNativeInput: attributesOfNativeInput
-    }), isWrongAddress && /*#__PURE__*/_react.default.createElement("div", {
-      className: (0, _classnames.default)("input-address__alert", {
-        "input-address__alert--visible": !isFocused
-      })
-    }, /*#__PURE__*/_react.default.createElement(_Hint.default, {
-      side: "left",
-      hint: getHintMessage(),
-      icon: /*#__PURE__*/_react.default.createElement(_reactFeather.AlertTriangle, null),
-      handleOpenType: "hover"
-    })), isClearable && (!isWrongAddress || isFocused) && /*#__PURE__*/_react.default.createElement("div", {
-      className: (0, _classnames.default)("input-address__clear-query", {
-        "input-address__clear-query--input-focused": isFocused
-      })
-    }, /*#__PURE__*/_react.default.createElement(_reactFeather.X, {
-      onClick: onClearClick
-    })));
-  };
-  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-${testId || fieldKey}`,
-      className: (0, _classnames.default)("input-address__input", className),
-      value: inputValue,
-      onChange: setInnerValue,
-      onFocus: e => {
-        setIsListVisible(true);
-        e?.target?.blur();
-        setTimeout(() => inputRef?.current?.focus(), 200);
-      }
-    }));
-  };
-  const renderLoader = () => {
-    return /*#__PURE__*/_react.default.createElement("div", {
-      className: "input-address__list--loader"
-    }, loader || "Loading...");
-  };
-  const renderList = () => {
-    const renderListItem = (item, i) => {
-      return /*#__PURE__*/_react.default.createElement("div", {
-        key: `input-address__list-item${i}`,
-        className: (0, _classnames.default)("input-address__list--item", {
-          "input-address__list--item-hightlighted": i === hightlightedIndex
-        }),
-        onMouseDown: e => setItemAsInnerValue(e, item)
-      }, getListItemLabel(item));
     };
-    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: 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"));
+    const getHintMessage = ()=>{
+        if (!renderHintMessage || typeof renderHintMessage !== "function") return DEFAULT_HINT_MESSAGE;
+        return renderHintMessage(innerValue);
+    };
+    const getSelectedItemLabel = (value = innerValue)=>{
+        var _value_street;
+        if (!value) return "";
+        if (typeof value === "string") return value;
+        if (typeof renderSelectedItem === "function") renderSelectedItem(value);
+        const label = `${(value === null || value === void 0 ? void 0 : value.streetNumber) || ""} ${(value === null || value === void 0 ? void 0 : (_value_street = value.street) === null || _value_street === void 0 ? void 0 : _value_street.fullName) || ""}`.trim();
+        return !label && isLoading ? previousValueRef.current : label;
     };
-    const renderNoItems = () => {
-      return /*#__PURE__*/_react.default.createElement("div", {
-        className: "input-address__list--no-items"
-      }, isMobile && !innerValue?.length ? "Please begin entering your address" : noItemsMessage || "No Items");
+    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);
     };
-    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
-      }, isListLoading ? renderLoader() : listItems?.length ? listItems?.map(renderListItem) : renderNoItems()));
+    const setListHeight = ()=>{
+        if ((listWrapperRef === null || listWrapperRef === void 0 ? void 0 : listWrapperRef.current) && (listHeaderRef === null || listHeaderRef === void 0 ? void 0 : listHeaderRef.current) && listRef.current) {
+            var _listWrapperRef_current_getBoundingClientRect, _listWrapperRef_current, _listHeaderRef_current_getBoundingClientRect, _listHeaderRef_current;
+            const listWrapperHeight = listWrapperRef === null || listWrapperRef === void 0 ? void 0 : (_listWrapperRef_current = listWrapperRef.current) === null || _listWrapperRef_current === void 0 ? void 0 : (_listWrapperRef_current_getBoundingClientRect = _listWrapperRef_current.getBoundingClientRect()) === null || _listWrapperRef_current_getBoundingClientRect === void 0 ? void 0 : _listWrapperRef_current_getBoundingClientRect.height;
+            const listWrapperStyles = getComputedStyle(listWrapperRef === null || listWrapperRef === void 0 ? void 0 : listWrapperRef.current);
+            const listHeaderHeight = listHeaderRef === null || listHeaderRef === void 0 ? void 0 : (_listHeaderRef_current = listHeaderRef.current) === null || _listHeaderRef_current === void 0 ? void 0 : (_listHeaderRef_current_getBoundingClientRect = _listHeaderRef_current.getBoundingClientRect()) === null || _listHeaderRef_current_getBoundingClientRect === void 0 ? void 0 : _listHeaderRef_current_getBoundingClientRect.height;
+            const listHeight = listWrapperHeight - listHeaderHeight - parseInt(listWrapperStyles.paddingBottom, 10);
+            listRef.current.style.maxHeight = `${listHeight}px`;
+        }
     };
-    const renderListMobile = () => {
-      return /*#__PURE__*/_react.default.createElement("div", {
-        className: "input-address__list-overlay",
-        ref: listOverlayRef,
-        onClick: onOverlayClick
-      }, /*#__PURE__*/_react.default.createElement("div", {
-        className: "input-address__list-wrapper",
-        ref: listWrapperRef
-      }, isMobile && /*#__PURE__*/_react.default.createElement("div", {
-        ref: listHeaderRef,
-        className: (0, _classnames.default)(`${RC}__list-header`, {
-          [`${RC}__list-header-with-shadow`]: isScrollableList && isMobile,
-          [`${RC}__list-header-with-shadow-hidden`]: scrollTop === 0
-        })
-      }, /*#__PURE__*/_react.default.createElement("div", {
-        className: (0, _classnames.default)(`${RC}__list-header-row`)
-      }, /*#__PURE__*/_react.default.createElement("div", {
-        className: (0, _classnames.default)(`${RC}__list-label`)
-      }, label || "Address"), /*#__PURE__*/_react.default.createElement("div", {
-        className: (0, _classnames.default)(`${RC}__list-close-icon`),
-        onClick: () => setIsListVisible(false)
-      }, /*#__PURE__*/_react.default.createElement(_reactFeather.X, {
-        onClick: () => setIsListVisible(false)
-      }))), /*#__PURE__*/_react.default.createElement("div", {
-        className: (0, _classnames.default)(`${RC}__list-header-row`)
-      }, renderSearchableInput())), /*#__PURE__*/_react.default.createElement("div", {
-        className: "input-address__list",
-        ref: listRef
-      }, isListLoading ? renderLoader() : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, getSelectedItemLabel() && renderListItemCustom(), listItems?.map(renderListItem), !listItems?.length && !getSelectedItemLabel() && renderNoItems()))));
+    const resetListHeight = ()=>{
+        if (listRef.current) {
+            listRef.current.style.maxHeight = `initial`;
+        }
     };
-    return isMobile ? renderListMobile() : renderListDesktop();
-  };
-  return /*#__PURE__*/_react.default.createElement("div", {
-    className: (0, _classnames.default)("input-address", {
-      "input-address--error": error || isWrongAddress && !isFocused
-    })
-  }, isLoading && /*#__PURE__*/_react.default.createElement(_Spinner.default, {
-    size: "small"
-  }), isMobile ? renderInput() : renderSearchableInput(), isListVisible && renderList());
+    // ? Основной блок работы со значениями адреса
+    // ? Не меняйте вызовы 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 - асинхронная ф-я, запросник уточнения опции
+                    // ? Никаких await-ов НЕ нужно (тем более что в useEffect и нельзя для нового React),
+                    // ? промис "выплюнется в пустоту", но НЕ будет отчищен до резолва, а useEffect (и итерация рендера в целом) при этом будет закончен(а)
+                    _clarifyAddressInfo_then, _clarifyAddressInfo;
+                    setIsLoading(true);
+                    (_clarifyAddressInfo = clarifyAddressInfo(innerValue)) === null || _clarifyAddressInfo === void 0 ? void 0 : (_clarifyAddressInfo_then = _clarifyAddressInfo.then) === null || _clarifyAddressInfo_then === void 0 ? void 0 : _clarifyAddressInfo_then.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;
+                    });
+                } else setInnerValue(getSelectedItemLabel(innerValue));
+            }
+            // ? Кейс для строчных значений
+            if (!isObject) {
+                // ? Вызываем верхний onChange если innerValue есть или если нету, но это не после логики уточнения
+                if (innerValue || !isLoading) onChange(innerValue);
+                // ? Если innerValue есть и еще не открыт листинг - открываем
+                if (innerValue && !isListVisible) setIsListVisible(true);
+                // ? Если инпут сфокусирован и значение есть - запрашиваем список вариантов
+                if (isFocused && Boolean(innerValue)) getAddressVariantsList();
+            }
+        }
+    }, [
+        innerValue
+    ]);
+    (0, _react.useEffect)(()=>{
+        if (!isFocused && !isMobile) {
+            setIsListVisible(false);
+            setHightlightedIndex(null);
+        }
+    }, [
+        isFocused
+    ]);
+    (0, _react.useEffect)(()=>{
+        if (!isListVisible) {
+            setListItems([]);
+            resetListHeight();
+        }
+        if (isMobile && isListVisible) {
+            setTempInnerValue(innerValue);
+            setListHeight();
+        }
+    }, [
+        isListVisible
+    ]);
+    (0, _react.useEffect)(()=>{
+        // ? учет изменения value сверху (верхние переназначения велью)
+        if (!compareValues(value, innerValue)) setInnerValue(value);
+        // ? useEffect должен быть последним, т.к. рефка меняется в рамках текущей итерации
+        previousValueRef.current = value;
+    }, [
+        value
+    ]);
+    const renderSearchableInput = ()=>{
+        const inputValue = getSelectedItemLabel();
+        return /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+            className: (0, _classnames.default)("input-address__input-wrapper"),
+            children: [
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Input.default, {
+                    ref: inputRef,
+                    testId: `inputAddress--input--key-${testId || fieldKey}`,
+                    className: (0, _classnames.default)("input-address__input", className),
+                    value: inputValue,
+                    onChange: setInnerValue,
+                    onFocus: (e)=>{
+                        setIsFocused(true);
+                    },
+                    onBlur: ()=>setIsFocused(false),
+                    onKeyDown: onKeyDown,
+                    attributesOfNativeInput: attributesOfNativeInput
+                }),
+                isWrongAddress && /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                    className: (0, _classnames.default)("input-address__alert", {
+                        "input-address__alert--visible": !isFocused
+                    }),
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Hint.default, {
+                        side: "left",
+                        hint: getHintMessage(),
+                        icon: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactfeather.AlertTriangle, {}),
+                        handleOpenType: "hover"
+                    })
+                }),
+                isClearable && (!isWrongAddress || isFocused) && /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                    className: (0, _classnames.default)("input-address__clear-query", {
+                        "input-address__clear-query--input-focused": isFocused
+                    }),
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactfeather.X, {
+                        onClick: onClearClick
+                    })
+                })
+            ]
+        });
+    };
+    const renderInput = ()=>{
+        const inputValue = getSelectedItemLabel(isListVisible ? tempInnerValue : innerValue);
+        return /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+            className: (0, _classnames.default)("input-address__input-wrapper"),
+            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Input.default, {
+                testId: `inputAddress--input--key-${testId || fieldKey}`,
+                className: (0, _classnames.default)("input-address__input", className),
+                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(()=>{
+                        var _inputRef_current;
+                        return inputRef === null || inputRef === void 0 ? void 0 : (_inputRef_current = inputRef.current) === null || _inputRef_current === void 0 ? void 0 : _inputRef_current.focus();
+                    }, 200);
+                }
+            })
+        });
+    };
+    const renderLoader = ()=>{
+        return /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+            className: "input-address__list--loader",
+            children: loader || "Loading..."
+        });
+    };
+    const renderList = ()=>{
+        const renderListItem = (item, i)=>{
+            return /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                className: (0, _classnames.default)("input-address__list--item", {
+                    "input-address__list--item-hightlighted": i === hightlightedIndex
+                }),
+                onMouseDown: (e)=>setItemAsInnerValue(e, item),
+                children: getListItemLabel(item)
+            }, `input-address__list-item${i}`);
+        };
+        const renderListItemCustom = ()=>{
+            return /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+                className: (0, _classnames.default)("input-address__list--item", "input-address__list--item-custom"),
+                onMouseDown: (e)=>setItemAsInnerValue(e, getSelectedItemLabel()),
+                children: [
+                    getSelectedItemLabel(),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactfeather.AlertTriangle, {}),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
+                        children: "Choose this only if your address is not listed below"
+                    })
+                ]
+            }, `input-address__list-item--custom`);
+        };
+        const renderNoItems = ()=>{
+            return /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                className: "input-address__list--no-items",
+                children: isMobile && !(innerValue === null || innerValue === void 0 ? void 0 : innerValue.length) ? "Please begin entering your address" : noItemsMessage || "No Items"
+            });
+        };
+        const renderListDesktop = ()=>{
+            return /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                className: "input-address__list-wrapper",
+                ref: listWrapperRef,
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                    className: "input-address__list",
+                    ref: listRef,
+                    children: isListLoading ? renderLoader() : (listItems === null || listItems === void 0 ? void 0 : listItems.length) ? listItems === null || listItems === void 0 ? void 0 : listItems.map(renderListItem) : renderNoItems()
+                })
+            });
+        };
+        const renderListMobile = ()=>{
+            return /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                className: "input-address__list-overlay",
+                ref: listOverlayRef,
+                onClick: onOverlayClick,
+                children: /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+                    className: "input-address__list-wrapper",
+                    ref: listWrapperRef,
+                    children: [
+                        isMobile && /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+                            ref: listHeaderRef,
+                            className: (0, _classnames.default)(`${RC}__list-header`, {
+                                [`${RC}__list-header-with-shadow`]: isScrollableList && isMobile,
+                                [`${RC}__list-header-with-shadow-hidden`]: scrollTop === 0
+                            }),
+                            children: [
+                                /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+                                    className: (0, _classnames.default)(`${RC}__list-header-row`),
+                                    children: [
+                                        /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                                            className: (0, _classnames.default)(`${RC}__list-label`),
+                                            children: label || "Address"
+                                        }),
+                                        /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                                            className: (0, _classnames.default)(`${RC}__list-close-icon`),
+                                            onClick: ()=>setIsListVisible(false),
+                                            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactfeather.X, {
+                                                onClick: ()=>setIsListVisible(false)
+                                            })
+                                        })
+                                    ]
+                                }),
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                                    className: (0, _classnames.default)(`${RC}__list-header-row`),
+                                    children: renderSearchableInput()
+                                })
+                            ]
+                        }),
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                            className: "input-address__list",
+                            ref: listRef,
+                            children: isListLoading ? renderLoader() : /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
+                                children: [
+                                    getSelectedItemLabel() && renderListItemCustom(),
+                                    listItems === null || listItems === void 0 ? void 0 : listItems.map(renderListItem),
+                                    !(listItems === null || listItems === void 0 ? void 0 : listItems.length) && !getSelectedItemLabel() && renderNoItems()
+                                ]
+                            })
+                        })
+                    ]
+                })
+            });
+        };
+        return isMobile ? renderListMobile() : renderListDesktop();
+    };
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+        className: (0, _classnames.default)("input-address", {
+            "input-address--error": error || isWrongAddress && !isFocused
+        }),
+        children: [
+            isLoading && /*#__PURE__*/ (0, _jsxruntime.jsx)(_Spinner.default, {
+                size: "small"
+            }),
+            isMobile ? renderInput() : renderSearchableInput(),
+            isListVisible && renderList()
+        ]
+    });
 };
-var _default = exports.default = InputAddress;
+const _default = InputAddress;