intelicoreact 1.6.22 → 1.6.24

package/dist/Molecular/InputAddress/InputAddress.js

@@ -1 +1,626 @@
-function n(n,e){(null==e||e>n.length)&&(e=n.length);for(var t=0,r=Array(e);t<e;t++)r[t]=n[t];return r}function e(n,e,t){return e in n?Object.defineProperty(n,e,{value:t,enumerable:!0,configurable:!0,writable:!0}):n[e]=t,n}function t(n,e){return function(n){if(Array.isArray(n))return n}(n)||function(n,e){var t,r,i=null==n?null:"undefined"!=typeof Symbol&&n[Symbol.iterator]||n["@@iterator"];if(null!=i){var l=[],o=!0,u=!1;try{for(i=i.call(n);!(o=(t=i.next()).done)&&(l.push(t.value),!e||l.length!==e);o=!0);}catch(n){u=!0,r=n}finally{try{o||null==i.return||i.return()}finally{if(u)throw r}}return l}}(n,e)||i(n,e)||function(){throw TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function r(n){return n&&"undefined"!=typeof Symbol&&n.constructor===Symbol?"symbol":typeof n}function i(e,t){if(e){if("string"==typeof e)return n(e,t);var r=Object.prototype.toString.call(e).slice(8,-1);if("Object"===r&&e.constructor&&(r=e.constructor.name),"Map"===r||"Set"===r)return Array.from(r);if("Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r))return n(e,t)}}import{jsx as l,jsxs as o,Fragment as u}from"react/jsx-runtime";import{useEffect as s,useMemo as a,useRef as d,useState as c}from"react";import f from"classnames";import{AlertTriangle as m,X as p}from"react-feather";import v from"../../Atomic/FormElements/Input/Input";import h from"../../Atomic/Layout/Spinner/Spinner";import y from"../../Atomic/UI/Hint/Hint";import g from"../../Functions/useIsMobile/useIsMobile";import{compare as _,getIsOnlyAnObject as b}from"../../Functions/utils";import"./InputAddress.scss";var N="input-address",I=function(n,e){return(void 0===n?"undefined":r(n))===(void 0===e?"undefined":r(e))&&(b(n)?_(n,e):n===e)},w=function(e,t){var r=null;return function(){for(var l=arguments.length,o=Array(l),u=0;u<l;u++)o[u]=arguments[u];r&&clearTimeout(r),r=setTimeout(function(){e.apply(void 0,function(e){if(Array.isArray(e))return n(e)}(o)||function(n){if("undefined"!=typeof Symbol&&null!=n[Symbol.iterator]||null!=n["@@iterator"])return Array.from(n)}(o)||i(o)||function(){throw TypeError("Invalid attempt to spread non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}())},t)}},C=function(n){return!!n&&"number"==typeof n&&!Number.isNaN(n)};export default function(n){var r,i,_,S,A=n.label,T=n.className,M=void 0===T?"":T,D=n.isClearable,j=void 0===D||D,x=n.isKeyboardControlled,O=void 0===x||x,P=n.fieldKey,B=void 0===P?"":P,F=n.testId,k=void 0===F?"":F,R=n.throttle,E=void 0===R?500:R,H=n.additionalThrottleTimeForListingRequest,L=void 0===H?0:H,q=n.loader,K=void 0===q?"":q,z=n.noItemsMessage,U=void 0===z?"":z,V=n.error,$=n.value,G=void 0===$?"":$,J=n.onChange,Q=void 0===J?function(){}:J,W=n.onChangeValueTransformer,X=n.disabled,Y=n.isDisabled,Z=n.getListItems,nn=void 0===Z?function(){}:Z,ne=n.clarifyAddressInfo,nt=n.noValidate,nr=void 0!==nt&&nt,ni=n.renderSelectedItem,nl=n.renderListItem,no=n.renderHintMessage,nu=n.attributesOfNativeInput,ns=g().isMobile,na=d(null),nd=d(null),nc=d(null),nf=d(null),nm=d(null),np=d(G),nv=t(c(!1),2);nv[0],nv[1];var nh=t(c(null),2),ny=nh[0];nh[1];var ng=t(c(0),2),n_=ng[0];ng[1];var nb=t(c(1),2);nb[0],nb[1];var nN=t(c(G),2),nI=nN[0],nw=nN[1],nC=t(c(null),2),nS=nC[0],nA=nC[1],nT=t(c(null),2);nT[0],nT[1];var nM=t(c([]),2),nD=nM[0],nj=nM[1],nx=t(c(!1),2),nO=nx[0],nP=nx[1],nB=t(c(!1),2),nF=nB[0],nk=nB[1],nR=t(c(null),2),nE=nR[0],nH=nR[1],nL=t(c(!1),2),nq=nL[0],nK=nL[1],nz=t(c(!1),2),nU=nz[0],nV=nz[1],n$=a(function(){var n;return!nr&&""!==nI&&!((null==nI?void 0:nI.hasOwnProperty("streetNumber"))&&(null==nI?void 0:nI.streetNumber)&&(null==nI?void 0:nI.hasOwnProperty("street"))&&(null==nI||null==(n=nI.street)?void 0:n.fullName))},[nI]),nG=function(n,e){var t;(null!=(t=Event)&&"undefined"!=typeof Symbol&&t[Symbol.hasInstance]?!!t[Symbol.hasInstance](n):n instanceof t)&&(n.preventDefault(),n.stopPropagation()),setTimeout(function(){nw(e),ns&&nV(!1)},0)},nJ=a(function(){return function(n){var e;return null==(e=nn(n))?void 0:e.then(nj).finally(function(){return nk(!1)})}},[nn]),nQ=a(function(){var n=C(L)?w(nJ,L):nJ;return C(E)?w(n,E):n},[nJ,L,E]),nW=function(n){var e;n.preventDefault(),n.stopPropagation(),ns||nV(!1),nw(""),null==na||null==(e=na.current)||e.focus(),setTimeout(function(){return nK(!0)},0)},nX=function(n){if(!nU||!O)return!1;if(13===n){var e;nG(null,nD[nE]),nH(null),null==na||null==(e=na.current)||e.blur()}else{var t,r,i,l,o,u,s,a,d=null,c=document.getElementsByClassName("input-address__list--item"),f=null==nd||null==(r=nd.current)||null==(t=r.getBoundingClientRect())?void 0:t.height,m=(null==nd||null==(i=nd.current)?void 0:i.scrollTop)||0,p=parseInt(null==nD?void 0:nD.length,10)-1;40===n?null===nE||nE===p?d=0:nE+1<(null==nD?void 0:nD.length)&&(d=nE+1):38===n&&(null===nE||0===nE?d=p:nE-1>=0&&(d=nE-1));var v=c[d],h=null==v||null==(l=v.getBoundingClientRect())?void 0:l.height,y=null==v?void 0:v.offsetTop;y+h>m+f?Math.abs(y+h-(m+f))<=h?null==nd||null==(o=nd.current)||o.scrollTo(0,m+h):null==nd||null==(u=nd.current)||u.scrollTo(0,y):y<m&&(Math.abs(y-m)<h?null==nd||null==(s=nd.current)||s.scrollTo(0,m-h):null==nd||null==(a=nd.current)||a.scrollTo(0,y)),ns||nH(d)}},nY=function(){var n,e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:nI;if(!e)return"";if("string"==typeof e)return e;"function"==typeof ni&&ni(e);var t="".concat((null==e?void 0:e.streetNumber)||""," ").concat((null==e||null==(n=e.street)?void 0:n.fullName)||"").trim();return!t&&nO?np.current:t},nZ=function(){if((null==nf?void 0:nf.current)&&(null==nm?void 0:nm.current)&&nd.current){var n,e,t,r,i=null==nf||null==(e=nf.current)||null==(n=e.getBoundingClientRect())?void 0:n.height,l=getComputedStyle(null==nf?void 0:nf.current),o=i-(null==nm||null==(r=nm.current)||null==(t=r.getBoundingClientRect())?void 0:t.height)-parseInt(l.paddingBottom,10);nd.current.style.maxHeight="".concat(o,"px")}},n0=function(){nd.current&&(nd.current.style.maxHeight="initial")};s(function(){if(!I(nI,np.current)){var n,e,t=b(nI),r=t&&"streetNumber"in nI&&"street"in nI&&"city"in nI&&"state"in nI&&"country"in nI&&"zipCode"in nI;r&&(Q(nI),nP(!1)),t&&!r&&("function"==typeof ne?(nP(!0),null==(e=ne(nI))||null==(n=e.then)||n.call(e,function(n){return n?nw(n):(nw(np.current),setTimeout(function(){na.current.focus(),na.current.setSelectionRange(np.current.length,np.current.length)},0)),nP(!1),n})):nw(nY(nI))),!t&&((nI||!nO)&&Q(nI),nI&&!nU&&nV(!0),nq&&nI&&(null==nI?void 0:nI.length)&&(nk(!0),nQ(nI)))}},[nI]),s(function(){nq||ns||(nV(!1),nH(null))},[nq]),s(function(){nU||(nj([]),n0()),ns&&nU&&(nA(nI),nZ())},[nU]),s(function(){I(G,nI)||nw(G),np.current=G},[G]);var n1=function(){var n=nY();return o("div",{className:f("input-address__input-wrapper"),children:[l(v,{ref:na,testId:"inputAddress--input--key-".concat(k||B),className:f("input-address__input",M),value:n,onChange:nw,onFocus:function(n){nK(!0)},onBlur:function(){return nK(!1)},onKeyDown:nX,attributesOfNativeInput:nu,disabled:X||Y,isDisabled:X||Y}),n$&&l("div",{className:f("input-address__alert",{"input-address__alert--visible":!nq}),children:l(y,{side:"left",hint:no&&"function"==typeof no?no(nI):"Select the correct address from the list of suggestions (must contains house number and street name)",icon:l(m,{}),handleOpenType:"hover"})}),j&&(!n$||nq)&&!(X||Y)&&l("div",{className:f("input-address__clear-query",{"input-address__clear-query--input-focused":nq}),children:l(p,{onClick:nW})})]})},n2=function(){return l("div",{className:"input-address__list--loader",children:K||"Loading..."})};return o("div",{className:f("input-address",{"input-address--error":V||n$&&!nq,"input-address--disabled":X||Y}),children:[nO&&l(h,{size:"small"}),ns?(r=nY(nU?nS:nI),l("div",{className:f("input-address__input-wrapper"),children:l(v,{testId:"inputAddress--input--key-".concat(k||B),className:f("input-address__input",M),value:r,onChange:nw,onFocus:function(n){var e;nV(!0),null==n||null==(e=n.target)||e.blur(),setTimeout(function(){var n;return null==na||null==(n=na.current)?void 0:n.focus()},200)},disabled:X||Y,isDisabled:X||Y})})):n1(),nU&&(i=function(n,e){return l("div",{className:f("input-address__list--item",{"input-address__list--item-hightlighted":e===nE}),onMouseDown:function(e){return nG(e,n)},children:"string"==typeof n?n:nl&&"function"==typeof nl?nl(n):null==n?void 0:n.fullPrediction},"input-address__list-item".concat(e))},_=function(){return l("div",{className:"input-address__list--no-items",children:!ns||(null==nI?void 0:nI.length)?U||"No Items":"Please begin entering your address"})},ns?l("div",{className:"input-address__list-overlay",ref:nc,onClick:function(n){n.target===(null==nc?void 0:nc.current)&&(n.stopPropagation(),n.preventDefault(),nV(!1),nw(nS),Q("string"!=typeof nI&&W&&"function"==typeof W?W(nI):nI))},children:o("div",{className:"input-address__list-wrapper",ref:nf,children:[ns&&o("div",{ref:nm,className:f("".concat(N,"__list-header"),(e(S={},"".concat(N,"__list-header-with-shadow"),ny&&ns),e(S,"".concat(N,"__list-header-with-shadow-hidden"),0===n_),S)),children:[o("div",{className:f("".concat(N,"__list-header-row")),children:[l("div",{className:f("".concat(N,"__list-label")),children:A||"Address"}),l("div",{className:f("".concat(N,"__list-close-icon")),onClick:function(){return nV(!1)},children:l(p,{onClick:function(){return nV(!1)}})})]}),l("div",{className:f("".concat(N,"__list-header-row")),children:n1()})]}),l("div",{className:"input-address__list",ref:nd,children:nF?n2():o(u,{children:[nY()&&o("div",{className:f("input-address__list--item","input-address__list--item-custom"),onMouseDown:function(n){return nG(n,nY())},children:[nY(),l(m,{}),l("span",{children:"Choose this only if your address is not listed below"})]},"input-address__list-item--custom"),null==nD?void 0:nD.map(i),!(null==nD?void 0:nD.length)&&!nY()&&_()]})})]})}):l("div",{className:"input-address__list-wrapper",ref:nf,children:l("div",{className:"input-address__list",ref:nd,children:nF?n2():(null==nD?void 0:nD.length)?null==nD?void 0:nD.map(i):_()})}))]})}
+import React, { useEffect, useMemo, useRef, useState } from "react";
+
+import cn from "classnames";
+import { AlertTriangle, X } from "react-feather";
+
+import Input from "../../Atomic/FormElements/Input/Input";
+import Spinner from "../../Atomic/Layout/Spinner/Spinner";
+import Hint from "../../Atomic/UI/Hint/Hint";
+import useIsMobile from "../../Functions/useIsMobile/useIsMobile";
+import { compare, getIsOnlyAnObject } from "../../Functions/utils";
+
+import "./InputAddress.scss";
+
+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 &&
+    (getIsOnlyAnObject(val1) ? compare(val1, val2) : val1 === val2)
+  );
+};
+
+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 = ({
+  label,
+  className = "",
+  isClearable = true,
+  isKeyboardControlled = true,
+  fieldKey = "",
+  testId = "",
+  throttle: throttleTime = 500, // ms
+  additionalThrottleTimeForListingRequest = 0, // ms
+  loader = "",
+  noItemsMessage = "",
+  error,
+  value = "",
+  onChange = () => {},
+  onChangeValueTransformer,
+  disabled,
+  isDisabled,
+
+  getListItems = () => {},
+  clarifyAddressInfo, // ! Не делать дефолтного значения! Это и метод и флаг
+
+  noValidate = false,
+
+  renderSelectedItem,
+  renderListItem,
+  renderHintMessage,
+
+  attributesOfNativeInput,
+}) => {
+  const { isMobile } = useIsMobile();
+
+  const inputRef = useRef(null);
+  const listRef = useRef(null);
+  const listOverlayRef = useRef(null);
+  const listWrapperRef = useRef(null);
+  const listHeaderRef = useRef(null);
+  const previousValueRef = useRef(value);
+
+  const [isValueInited, setIsValueInited] = useState(false);
+
+  const [isScrollableList, setIsScrollableList] = useState(null);
+  const [scrollTop, setScrollTop] = useState(0);
+  const [scrollHeight, setScrollHeight] = useState(1);
+
+  const [innerValue, setInnerValue] = useState(value);
+
+  const [tempInnerValue, setTempInnerValue] = useState(null);
+  const [tempValue, setTempValue] = useState(null);
+
+  const [listItems, setListItems] = useState([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [isListLoading, setIsListLoading] = useState(false);
+
+  const [hightlightedIndex, setHightlightedIndex] = useState(null);
+
+  const [isFocused, setIsFocused] = useState(false);
+  const [isListVisible, setIsListVisible] = useState(false);
+
+  const isWrongAddress = 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 = useMemo(
+    () => (innerValue) =>
+      getListItems(innerValue)
+        ?.then(setListItems)
+        .finally(() => setIsListLoading(false)),
+    [getListItems],
+  );
+
+  // ? Метод получения списка вариантов адреса с тротлингом (основным и, если нужно, дополнительным)
+  // ? Без useMemo работать НЕ будет (т.к. на каждом перерендере будет создаваться новая ф-я и будет теряться замкнутая переменная id из throttle)
+  const getAddressVariantsWithThrottling = 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;
+        }
+      } 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?.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);
+        }
+      } else if (newHightlightedElementTopInList < listScrollTop) {
+        if (
+          Math.abs(newHightlightedElementTopInList - listScrollTop) <
+          newHightlightedElementHeight
+        ) {
+          listRef?.current?.scrollTo(
+            0,
+            listScrollTop - newHightlightedElementHeight,
+          );
+        } 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 = (value = 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 не разобравшись в логике вызовов
+  useEffect(() => {
+    // ? Исключение инициализации - равны только при первом рендере компонента,
+    // ? т.к. рефка и стейт инициализируются верхним value
+    if (!compareValues(innerValue, previousValueRef.current)) {
+      const isObject = 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);
+            }
+
+            setIsLoading(false);
+            return res;
+          });
+        }
+        // ! Если сверху поменяли эндпоинт и он выдает "облегченный листинг" (айтемы с неполной инфой),
+        // ! и НЕ пробросили 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]);
+
+  useEffect(() => {
+    if (!isFocused && !isMobile) {
+      setIsListVisible(false);
+      setHightlightedIndex(null);
+    }
+  }, [isFocused]);
+
+  useEffect(() => {
+    if (!isListVisible) {
+      setListItems([]);
+      resetListHeight();
+    }
+
+    if (isMobile && isListVisible) {
+      setTempInnerValue(innerValue);
+      setListHeight();
+    }
+  }, [isListVisible]);
+
+  useEffect(() => {
+    // ? учет изменения value сверху (верхние переназначения велью)
+    if (!compareValues(value, innerValue)) setInnerValue(value);
+
+    // ? useEffect должен быть последним, т.к. рефка меняется в рамках текущей итерации
+    previousValueRef.current = value;
+  }, [value]);
+
+  const renderSearchableInput = () => {
+    const inputValue = getSelectedItemLabel();
+
+    return (
+      <div className={cn("input-address__input-wrapper")}>
+        <Input
+          ref={inputRef}
+          testId={`inputAddress--input--key-${testId || fieldKey}`}
+          className={cn("input-address__input", className)}
+          value={inputValue}
+          onChange={setInnerValue}
+          onFocus={(e) => {
+            setIsFocused(true);
+          }}
+          onBlur={() => setIsFocused(false)}
+          onKeyDown={onKeyDown}
+          attributesOfNativeInput={attributesOfNativeInput}
+          disabled={disabled || isDisabled}
+          isDisabled={disabled || isDisabled}
+        />
+        {isWrongAddress && (
+          <div
+            className={cn("input-address__alert", {
+              "input-address__alert--visible": !isFocused,
+            })}
+          >
+            <Hint
+              side="left"
+              hint={getHintMessage()}
+              icon={<AlertTriangle />}
+              handleOpenType="hover"
+            />
+          </div>
+        )}
+        {isClearable && (!isWrongAddress || isFocused) && !(disabled || isDisabled) && (
+          <div
+            className={cn("input-address__clear-query", {
+              "input-address__clear-query--input-focused": isFocused,
+            })}
+          >
+            <X onClick={onClearClick} />
+          </div>
+        )}
+      </div>
+    );
+  };
+
+  const renderInput = () => {
+    const inputValue = getSelectedItemLabel(
+      isListVisible ? tempInnerValue : innerValue,
+    );
+
+    return (
+      <div className={cn("input-address__input-wrapper")}>
+        <Input
+          testId={`inputAddress--input--key-${testId || fieldKey}`}
+          className={cn("input-address__input", className)}
+          value={inputValue}
+          onChange={setInnerValue}
+          onFocus={(e) => {
+            setIsListVisible(true);
+            e?.target?.blur();
+            setTimeout(() => inputRef?.current?.focus(), 200);
+          }}
+          disabled={disabled || isDisabled}
+          isDisabled={disabled || isDisabled}
+        />
+      </div>
+    );
+  };
+
+  const renderLoader = () => {
+    return (
+      <div className="input-address__list--loader">
+        {loader || "Loading..."}
+      </div>
+    );
+  };
+
+  const renderList = () => {
+    const renderListItem = (item, i) => {
+      return (
+        <div
+          key={`input-address__list-item${i}`}
+          className={cn("input-address__list--item", {
+            "input-address__list--item-hightlighted": i === hightlightedIndex,
+          })}
+          onMouseDown={(e) => setItemAsInnerValue(e, item)}
+        >
+          {getListItemLabel(item)}
+        </div>
+      );
+    };
+    const renderListItemCustom = () => {
+      return (
+        <div
+          key={`input-address__list-item--custom`}
+          className={cn(
+            "input-address__list--item",
+            "input-address__list--item-custom",
+          )}
+          onMouseDown={(e) => setItemAsInnerValue(e, getSelectedItemLabel())}
+        >
+          {getSelectedItemLabel()}
+          <AlertTriangle />
+          <span>Choose this only if your address is not listed below</span>
+        </div>
+      );
+    };
+    const renderNoItems = () => {
+      return (
+        <div className="input-address__list--no-items">
+          {isMobile && !innerValue?.length
+            ? "Please begin entering your address"
+            : noItemsMessage || "No Items"}
+        </div>
+      );
+    };
+
+    const renderListDesktop = () => {
+      return (
+        <div className="input-address__list-wrapper" ref={listWrapperRef}>
+          <div className="input-address__list" ref={listRef}>
+            {isListLoading
+              ? renderLoader()
+              : listItems?.length
+                ? listItems?.map(renderListItem)
+                : renderNoItems()}
+          </div>
+        </div>
+      );
+    };
+    const renderListMobile = () => {
+      return (
+        <div
+          className="input-address__list-overlay"
+          ref={listOverlayRef}
+          onClick={onOverlayClick}
+        >
+          <div className="input-address__list-wrapper" ref={listWrapperRef}>
+            {isMobile && (
+              <div
+                ref={listHeaderRef}
+                className={cn(`${RC}__list-header`, {
+                  [`${RC}__list-header-with-shadow`]:
+                    isScrollableList && isMobile,
+                  [`${RC}__list-header-with-shadow-hidden`]: scrollTop === 0,
+                })}
+              >
+                <div className={cn(`${RC}__list-header-row`)}>
+                  <div className={cn(`${RC}__list-label`)}>
+                    {label || "Address"}
+                  </div>
+                  <div
+                    className={cn(`${RC}__list-close-icon`)}
+                    onClick={() => setIsListVisible(false)}
+                  >
+                    <X onClick={() => setIsListVisible(false)} />
+                  </div>
+                </div>
+                <div className={cn(`${RC}__list-header-row`)}>
+                  {renderSearchableInput()}
+                </div>
+              </div>
+            )}
+            <div className="input-address__list" ref={listRef}>
+              {isListLoading ? (
+                renderLoader()
+              ) : (
+                <>
+                  {getSelectedItemLabel() && renderListItemCustom()}
+                  {listItems?.map(renderListItem)}
+                  {!listItems?.length &&
+                    !getSelectedItemLabel() &&
+                    renderNoItems()}
+                </>
+              )}
+            </div>
+          </div>
+        </div>
+      );
+    };
+
+    return isMobile ? renderListMobile() : renderListDesktop();
+  };
+
+  return (
+    <div
+      className={cn("input-address", {
+        "input-address--error": error || (isWrongAddress && !isFocused),
+        'input-address--disabled': disabled || isDisabled,
+      })}
+    >
+      {isLoading && <Spinner size="small" />}
+      {isMobile ? renderInput() : renderSearchableInput()}
+      {isListVisible && renderList()}
+    </div>
+  );
+};
+
+export default InputAddress;