@hh.ru/magritte-ui-phone-input 4.3.42 → 4.3.43

package/CallingCodeInput-CccAVXGJ.js

@@ -0,0 +1,139 @@
+import './index.css';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useRef, useState, useEffect } from 'react';
+import classNames from 'classnames';
+import { keyboardMatches, keyboardKeys } from '@hh.ru/magritte-common-keyboard';
+import { useMultipleRefs } from '@hh.ru/magritte-common-use-multiple-refs';
+import { useBreakpoint } from '@hh.ru/magritte-ui-breakpoint';
+import { useSelectTrigger, useTriggerRef, useSearchState, useVisibility } from '@hh.ru/magritte-ui-select';
+
+var styles = {"calling-code-input":"magritte-calling-code-input___Hb20f_4-3-43","callingCodeInput":"magritte-calling-code-input___Hb20f_4-3-43","calling-code-input-container":"magritte-calling-code-input-container___UXmHV_4-3-43","callingCodeInputContainer":"magritte-calling-code-input-container___UXmHV_4-3-43","disabled":"magritte-disabled___fvEeH_4-3-43","focused":"magritte-focused___Ok8x4_4-3-43","invalid":"magritte-invalid___kptbH_4-3-43","ghost-data":"magritte-ghost-data___zShvn_4-3-43","ghostData":"magritte-ghost-data___zShvn_4-3-43","focus-visible":"magritte-focus-visible___kbwmg_4-3-43","focusVisible":"magritte-focus-visible___kbwmg_4-3-43","country-locked":"magritte-country-locked___9HDyw_4-3-43","countryLocked":"magritte-country-locked___9HDyw_4-3-43","flag-container":"magritte-flag-container___wsoAd_4-3-43","flagContainer":"magritte-flag-container___wsoAd_4-3-43","input-container":"magritte-input-container___WSSZi_4-3-43","inputContainer":"magritte-input-container___WSSZi_4-3-43","phone-input-container":"magritte-phone-input-container___D587K_4-3-43","phoneInputContainer":"magritte-phone-input-container___D587K_4-3-43","flag-emoji":"magritte-flag-emoji___pyJS7_4-3-43","flagEmoji":"magritte-flag-emoji___pyJS7_4-3-43","no-flag-emoji":"magritte-no-flag-emoji___yiuyr_4-3-43","noFlagEmoji":"magritte-no-flag-emoji___yiuyr_4-3-43"};
+
+const CallingCodeInput = ({
+  value,
+  setValue,
+  selectOptions,
+  exactMatchRef,
+  onChange,
+  flag,
+  invalid,
+  disabled,
+  className,
+  inputElementRef,
+  descriptionId
+}) => {
+  const { onBlur, onKeyDown: onKeyDownInput, onFocus } = useSelectTrigger({ searchable: true });
+  const triggerRef = useTriggerRef();
+  const { setSearchValue } = useSearchState();
+  const { toggleListVisibility } = useVisibility();
+  const inputRef = useRef(null);
+  const inputRefMultiplexer = useMultipleRefs(inputRef, inputElementRef);
+  const [isFocused, setIsFocused] = useState(false);
+  const [isFocusVisible, setIsFocusVisible] = useState(false);
+  const { isMobile } = useBreakpoint();
+  useEffect(() => {
+    if (inputRef.current) {
+      setIsFocusVisible(isFocused && inputRef.current.classList.contains("focus-visible"));
+    }
+  }, [isFocused]);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: classNames(styles.callingCodeInputContainer, className, {
+        [styles.focusVisible]: isFocusVisible && !disabled,
+        [styles.focused]: isFocused && !disabled,
+        [styles.invalid]: invalid,
+        [styles.disabled]: disabled
+      }),
+      tabIndex: disabled ? -1 : 0,
+      onFocus: () => {
+        if (disabled) {
+          return;
+        }
+        if (!isMobile) {
+          inputRef.current?.focus();
+          return;
+        }
+        setIsFocused(true);
+        setSearchValue("");
+        onFocus?.();
+      },
+      onBlur: () => {
+        if (!isMobile) {
+          return;
+        }
+        setIsFocused(false);
+        onBlur?.();
+      },
+      onKeyDown: (event) => {
+        if (isMobile && keyboardMatches(event.nativeEvent, [keyboardKeys.Space, keyboardKeys.Enter])) {
+          event.preventDefault();
+          toggleListVisibility(true);
+        }
+      },
+      ref: triggerRef,
+      "data-qa": "magritte-phone-input-calling-code",
+      children: [
+        /* @__PURE__ */ jsx("div", { className: styles.flagContainer, children: flag }),
+        /* @__PURE__ */ jsxs("div", { className: styles.inputContainer, children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              ref: inputRefMultiplexer,
+              onFocus: () => {
+                setIsFocused(true);
+                setSearchValue("");
+                onFocus?.();
+              },
+              onBlur: () => {
+                setIsFocused(false);
+                onBlur?.();
+              },
+              onKeyDown: onKeyDownInput,
+              className: styles.callingCodeInput,
+              value,
+              onChange: (event) => {
+                const nextValue = event.target.value;
+                if (nextValue === "") {
+                  setValue("+");
+                  setSearchValue("");
+                }
+                if (!nextValue.startsWith("+")) {
+                  return;
+                }
+                const code = nextValue.substring(1);
+                let hasPartialMatch = false;
+                const exactMatch = selectOptions.find((option) => {
+                  if (!option.value) {
+                    return false;
+                  }
+                  if (option.callingCode.startsWith(code)) {
+                    hasPartialMatch = true;
+                  }
+                  return option.callingCode === code;
+                });
+                if (hasPartialMatch) {
+                  exactMatchRef.current = false;
+                  setValue(`+${code}`);
+                  setSearchValue(code === "" ? "" : `+${code}`);
+                }
+                if (exactMatch) {
+                  exactMatchRef.current = true;
+                  onChange(exactMatch.value, exactMatch.callingCode);
+                }
+              },
+              disabled,
+              "data-qa": "magritte-phone-input-calling-code-input",
+              "aria-describedby": descriptionId,
+              "aria-invalid": invalid
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { className: styles.ghostData, "data-qa": "magritte-phone-input-calling-code-value", children: value })
+        ] })
+      ]
+    }
+  );
+};
+
+export { CallingCodeInput as C, styles as s };
+//# sourceMappingURL=CallingCodeInput-CccAVXGJ.js.map

package/{CallingCodeInput-Ogu4q8KJ.js.map → CallingCodeInput-CccAVXGJ.js.map}

@@ -1 +1 @@
-{"version":3,"file":"CallingCodeInput-Ogu4q8KJ.js","sources":["src/CallingCodeInput.tsx"],"sourcesContent":["import {\n    type ChangeEvent,\n    type MutableRefObject,\n    type ReactElement,\n    type ReactNode,\n    type Ref,\n    useState,\n    useEffect,\n    useRef,\n} from 'react';\nimport classnames from 'classnames';\nimport { type CountryCode, type CountryCallingCode } from 'libphonenumber-js';\n\nimport { keyboardKeys, keyboardMatches } from '@hh.ru/magritte-common-keyboard';\nimport { useMultipleRefs } from '@hh.ru/magritte-common-use-multiple-refs';\nimport { useBreakpoint } from '@hh.ru/magritte-ui-breakpoint';\nimport { type PhoneCodeOption } from '@hh.ru/magritte-ui-phone-input/useCountrySelectDataProvider';\nimport { useSelectTrigger, useSearchState, useTriggerRef, useVisibility } from '@hh.ru/magritte-ui-select';\n\nimport styles from './phoneInput.less';\n\ninterface CallingCodeInputProps {\n    flag: ReactNode;\n    /** сообщает наружу выбранный код: точным вводом или подходящей опцией */\n    onChange: (country: CountryCode, callingCode: CountryCallingCode) => void;\n    value: string;\n    setValue: (value: string) => void;\n    selectOptions: PhoneCodeOption[];\n    /** пока ввод не совпал с опцией точно, селект дособерет значение на blur */\n    exactMatchRef: MutableRefObject<boolean>;\n    invalid?: boolean;\n    disabled?: boolean;\n    className?: string | boolean;\n    inputElementRef: Ref<HTMLInputElement>;\n    descriptionId: string;\n}\n\nexport const CallingCodeInput = ({\n    value,\n    setValue,\n    selectOptions,\n    exactMatchRef,\n    onChange,\n    flag,\n    invalid,\n    disabled,\n    className,\n    inputElementRef,\n    descriptionId,\n}: CallingCodeInputProps): ReactElement => {\n    const { onBlur, onKeyDown: onKeyDownInput, onFocus } = useSelectTrigger({ searchable: true });\n    const triggerRef = useTriggerRef();\n    const { setSearchValue } = useSearchState();\n    const { toggleListVisibility } = useVisibility();\n    const inputRef = useRef<HTMLInputElement>(null);\n    const inputRefMultiplexer = useMultipleRefs(inputRef, inputElementRef);\n    const [isFocused, setIsFocused] = useState(false);\n    const [isFocusVisible, setIsFocusVisible] = useState(false);\n    const { isMobile } = useBreakpoint();\n\n    useEffect(() => {\n        if (inputRef.current) {\n            setIsFocusVisible(isFocused && inputRef.current.classList.contains('focus-visible'));\n        }\n    }, [isFocused]);\n\n    return (\n        <div\n            className={classnames(styles.callingCodeInputContainer, className, {\n                [styles.focusVisible]: isFocusVisible && !disabled,\n                [styles.focused]: isFocused && !disabled,\n                [styles.invalid]: invalid,\n                [styles.disabled]: disabled,\n            })}\n            tabIndex={disabled ? -1 : 0}\n            onFocus={() => {\n                if (disabled) {\n                    return;\n                }\n                if (!isMobile) {\n                    inputRef.current?.focus();\n                    return;\n                }\n\n                setIsFocused(true);\n                setSearchValue('');\n                onFocus?.();\n            }}\n            onBlur={() => {\n                if (!isMobile) {\n                    return;\n                }\n                setIsFocused(false);\n                onBlur?.();\n            }}\n            onKeyDown={(event) => {\n                if (isMobile && keyboardMatches(event.nativeEvent, [keyboardKeys.Space, keyboardKeys.Enter])) {\n                    event.preventDefault();\n                    toggleListVisibility(true);\n                }\n            }}\n            ref={triggerRef as Ref<HTMLDivElement>}\n            data-qa=\"magritte-phone-input-calling-code\"\n        >\n            <div className={styles.flagContainer}>{flag}</div>\n            <div className={styles.inputContainer}>\n                <input\n                    ref={inputRefMultiplexer}\n                    onFocus={() => {\n                        setIsFocused(true);\n                        setSearchValue('');\n                        onFocus?.();\n                    }}\n                    onBlur={() => {\n                        setIsFocused(false);\n                        onBlur?.();\n                    }}\n                    onKeyDown={onKeyDownInput}\n                    className={styles.callingCodeInput}\n                    value={value}\n                    onChange={(event: ChangeEvent<HTMLInputElement>) => {\n                        const nextValue = event.target.value;\n                        if (nextValue === '') {\n                            setValue('+');\n                            setSearchValue('');\n                        }\n                        if (!nextValue.startsWith('+')) {\n                            return;\n                        }\n                        const code = nextValue.substring(1);\n                        let hasPartialMatch = false;\n                        const exactMatch = selectOptions.find((option) => {\n                            if (!option.value) {\n                                return false;\n                            }\n\n                            if (option.callingCode.startsWith(code)) {\n                                hasPartialMatch = true;\n                            }\n\n                            return option.callingCode === code;\n                        });\n\n                        // выполнится даже если есть точное совпадение\n                        if (hasPartialMatch) {\n                            exactMatchRef.current = false;\n                            setValue(`+${code}`);\n                            setSearchValue(code === '' ? '' : `+${code}`);\n                        }\n\n                        if (exactMatch) {\n                            exactMatchRef.current = true;\n                            onChange(exactMatch.value, exactMatch.callingCode);\n                        }\n                    }}\n                    disabled={disabled}\n                    data-qa=\"magritte-phone-input-calling-code-input\"\n                    aria-describedby={descriptionId}\n                    aria-invalid={invalid}\n                />\n                <div className={styles.ghostData} data-qa=\"magritte-phone-input-calling-code-value\">\n                    {value}\n                </div>\n            </div>\n        </div>\n    );\n};\n"],"names":["_jsxs","classnames","_jsx"],"mappings":"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"}
+{"version":3,"file":"CallingCodeInput-CccAVXGJ.js","sources":["src/CallingCodeInput.tsx"],"sourcesContent":["import {\n    type ChangeEvent,\n    type MutableRefObject,\n    type ReactElement,\n    type ReactNode,\n    type Ref,\n    useState,\n    useEffect,\n    useRef,\n} from 'react';\nimport classnames from 'classnames';\nimport { type CountryCode, type CountryCallingCode } from 'libphonenumber-js';\n\nimport { keyboardKeys, keyboardMatches } from '@hh.ru/magritte-common-keyboard';\nimport { useMultipleRefs } from '@hh.ru/magritte-common-use-multiple-refs';\nimport { useBreakpoint } from '@hh.ru/magritte-ui-breakpoint';\nimport { type PhoneCodeOption } from '@hh.ru/magritte-ui-phone-input/useCountrySelectDataProvider';\nimport { useSelectTrigger, useSearchState, useTriggerRef, useVisibility } from '@hh.ru/magritte-ui-select';\n\nimport styles from './phoneInput.less';\n\ninterface CallingCodeInputProps {\n    flag: ReactNode;\n    /** сообщает наружу выбранный код: точным вводом или подходящей опцией */\n    onChange: (country: CountryCode, callingCode: CountryCallingCode) => void;\n    value: string;\n    setValue: (value: string) => void;\n    selectOptions: PhoneCodeOption[];\n    /** пока ввод не совпал с опцией точно, селект дособерет значение на blur */\n    exactMatchRef: MutableRefObject<boolean>;\n    invalid?: boolean;\n    disabled?: boolean;\n    className?: string | boolean;\n    inputElementRef: Ref<HTMLInputElement>;\n    descriptionId: string;\n}\n\nexport const CallingCodeInput = ({\n    value,\n    setValue,\n    selectOptions,\n    exactMatchRef,\n    onChange,\n    flag,\n    invalid,\n    disabled,\n    className,\n    inputElementRef,\n    descriptionId,\n}: CallingCodeInputProps): ReactElement => {\n    const { onBlur, onKeyDown: onKeyDownInput, onFocus } = useSelectTrigger({ searchable: true });\n    const triggerRef = useTriggerRef();\n    const { setSearchValue } = useSearchState();\n    const { toggleListVisibility } = useVisibility();\n    const inputRef = useRef<HTMLInputElement>(null);\n    const inputRefMultiplexer = useMultipleRefs(inputRef, inputElementRef);\n    const [isFocused, setIsFocused] = useState(false);\n    const [isFocusVisible, setIsFocusVisible] = useState(false);\n    const { isMobile } = useBreakpoint();\n\n    useEffect(() => {\n        if (inputRef.current) {\n            setIsFocusVisible(isFocused && inputRef.current.classList.contains('focus-visible'));\n        }\n    }, [isFocused]);\n\n    return (\n        <div\n            className={classnames(styles.callingCodeInputContainer, className, {\n                [styles.focusVisible]: isFocusVisible && !disabled,\n                [styles.focused]: isFocused && !disabled,\n                [styles.invalid]: invalid,\n                [styles.disabled]: disabled,\n            })}\n            tabIndex={disabled ? -1 : 0}\n            onFocus={() => {\n                if (disabled) {\n                    return;\n                }\n                if (!isMobile) {\n                    inputRef.current?.focus();\n                    return;\n                }\n\n                setIsFocused(true);\n                setSearchValue('');\n                onFocus?.();\n            }}\n            onBlur={() => {\n                if (!isMobile) {\n                    return;\n                }\n                setIsFocused(false);\n                onBlur?.();\n            }}\n            onKeyDown={(event) => {\n                if (isMobile && keyboardMatches(event.nativeEvent, [keyboardKeys.Space, keyboardKeys.Enter])) {\n                    event.preventDefault();\n                    toggleListVisibility(true);\n                }\n            }}\n            ref={triggerRef as Ref<HTMLDivElement>}\n            data-qa=\"magritte-phone-input-calling-code\"\n        >\n            <div className={styles.flagContainer}>{flag}</div>\n            <div className={styles.inputContainer}>\n                <input\n                    ref={inputRefMultiplexer}\n                    onFocus={() => {\n                        setIsFocused(true);\n                        setSearchValue('');\n                        onFocus?.();\n                    }}\n                    onBlur={() => {\n                        setIsFocused(false);\n                        onBlur?.();\n                    }}\n                    onKeyDown={onKeyDownInput}\n                    className={styles.callingCodeInput}\n                    value={value}\n                    onChange={(event: ChangeEvent<HTMLInputElement>) => {\n                        const nextValue = event.target.value;\n                        if (nextValue === '') {\n                            setValue('+');\n                            setSearchValue('');\n                        }\n                        if (!nextValue.startsWith('+')) {\n                            return;\n                        }\n                        const code = nextValue.substring(1);\n                        let hasPartialMatch = false;\n                        const exactMatch = selectOptions.find((option) => {\n                            if (!option.value) {\n                                return false;\n                            }\n\n                            if (option.callingCode.startsWith(code)) {\n                                hasPartialMatch = true;\n                            }\n\n                            return option.callingCode === code;\n                        });\n\n                        // выполнится даже если есть точное совпадение\n                        if (hasPartialMatch) {\n                            exactMatchRef.current = false;\n                            setValue(`+${code}`);\n                            setSearchValue(code === '' ? '' : `+${code}`);\n                        }\n\n                        if (exactMatch) {\n                            exactMatchRef.current = true;\n                            onChange(exactMatch.value, exactMatch.callingCode);\n                        }\n                    }}\n                    disabled={disabled}\n                    data-qa=\"magritte-phone-input-calling-code-input\"\n                    aria-describedby={descriptionId}\n                    aria-invalid={invalid}\n                />\n                <div className={styles.ghostData} data-qa=\"magritte-phone-input-calling-code-value\">\n                    {value}\n                </div>\n            </div>\n        </div>\n    );\n};\n"],"names":["classnames"],"mappings":"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"}

package/CallingCodeInput.d.ts

@@ -1,6 +1,6 @@
 import { type MutableRefObject, type ReactElement, type ReactNode, type Ref } from 'react';
 import { type CountryCode, type CountryCallingCode } from 'libphonenumber-js';
-import { type PhoneCodeOption } from '@hh.ru/magritte-ui-phone-input/useCountrySelectDataProvider';
+import { type PhoneCodeOption } from './useCountrySelectDataProvider';
 interface CallingCodeInputProps {
     flag: ReactNode;
     /** сообщает наружу выбранный код: точным вводом или подходящей опцией */

package/CallingCodeInput.js

@@ -6,5 +6,5 @@ import '@hh.ru/magritte-common-keyboard';
 import '@hh.ru/magritte-common-use-multiple-refs';
 import '@hh.ru/magritte-ui-breakpoint';
 import '@hh.ru/magritte-ui-select';
-export { C as CallingCodeInput } from './CallingCodeInput-Ogu4q8KJ.js';
+export { C as CallingCodeInput } from './CallingCodeInput-CccAVXGJ.js';
 //# sourceMappingURL=CallingCodeInput.js.map

package/PhoneInput.js

@@ -10,7 +10,7 @@ import { RegionSelect } from './RegionSelect.js';
 import { phoneFormatterFactory } from './phoneFormatter.js';
 import { useCountrySelectDataProvider } from './useCountrySelectDataProvider.js';
 import { useLibPhoneNumber } from './useLibPhoneNumber.js';
-import { s as styles } from './CallingCodeInput-Ogu4q8KJ.js';
+import { s as styles } from './CallingCodeInput-CccAVXGJ.js';
 import '@hh.ru/magritte-common-flag-emoji-font';
 import '@hh.ru/magritte-ui-cell';
 import '@hh.ru/magritte-ui-nav-bar';
@@ -20,22 +20,42 @@ import './basicMetadata.js';
 import '@hh.ru/magritte-common-keyboard';
 import '@hh.ru/magritte-ui-breakpoint';
 
-const DEFAULT_PRIORITY_COUNTRIES = ['RU', 'BY', 'KZ', 'UZ'];
+const DEFAULT_PRIORITY_COUNTRIES = ["RU", "BY", "KZ", "UZ"];
 const notDigitsRegExp = /[\D]/g;
-const PhoneInput = forwardRef(({ defaultCountry = 'RU', defaultNationalNumber = '', onChange, availableCountries, invalid, description, errorMessage, priorityCountries = DEFAULT_PRIORITY_COUNTRIES, lockedCountry, onFocus, onBlur, countryNames, priorityCountriesTitle, mobileOnly, 'data-qa': dataQa = 'magritte-phone-input-wrapper', inputsWrapperRef, phoneInputElementRef, codeInputElementRef, onPhoneValidationApiLoadError, disabled, }, ref) => {
+const PhoneInput = forwardRef(
+  ({
+    defaultCountry = "RU",
+    defaultNationalNumber = "",
+    onChange,
+    availableCountries,
+    invalid,
+    description,
+    errorMessage,
+    priorityCountries = DEFAULT_PRIORITY_COUNTRIES,
+    lockedCountry,
+    onFocus,
+    onBlur,
+    countryNames,
+    priorityCountriesTitle,
+    mobileOnly,
+    "data-qa": dataQa = "magritte-phone-input-wrapper",
+    inputsWrapperRef,
+    phoneInputElementRef,
+    codeInputElementRef,
+    onPhoneValidationApiLoadError,
+    disabled
+  }, ref) => {
     const descriptionId = useId();
     const metadataVariant = useMemo(() => {
-        const minimalMetadata = availableCountries?.length === DEFAULT_PRIORITY_COUNTRIES.length &&
-            DEFAULT_PRIORITY_COUNTRIES.every((country) => availableCountries.includes(country));
-        if (minimalMetadata) {
-            return 'ru-by-kz-uz';
-        }
-        const keys = Object.keys(countryNames);
-        if (keys.length === DEFAULT_PRIORITY_COUNTRIES.length &&
-            DEFAULT_PRIORITY_COUNTRIES.every((country) => keys.includes(country))) {
-            return 'ru-by-kz-uz';
-        }
-        return 'max';
+      const minimalMetadata = availableCountries?.length === DEFAULT_PRIORITY_COUNTRIES.length && DEFAULT_PRIORITY_COUNTRIES.every((country2) => availableCountries.includes(country2));
+      if (minimalMetadata) {
+        return "ru-by-kz-uz";
+      }
+      const keys = Object.keys(countryNames);
+      if (keys.length === DEFAULT_PRIORITY_COUNTRIES.length && DEFAULT_PRIORITY_COUNTRIES.every((country2) => keys.includes(country2))) {
+        return "ru-by-kz-uz";
+      }
+      return "max";
     }, [availableCountries, countryNames]);
     const libPhoneNumberAPI = useLibPhoneNumber(metadataVariant, !!mobileOnly, onPhoneValidationApiLoadError);
     const { getCountryCallingCode, isValidPhoneNumber, isLoaded } = libPhoneNumberAPI;
@@ -50,86 +70,148 @@ const PhoneInput = forwardRef(({ defaultCountry = 'RU', defaultNationalNumber =
     const inputRefMultiplexer = useMultipleRefs(phoneInputRef, phoneInputElementRef);
     const forceDisabled = useDisabled();
     const isComponentDisabled = forceDisabled || !!disabled;
-    const isCountryLocked = lockedCountry !== undefined;
+    const isCountryLocked = lockedCountry !== void 0;
     countryCallingCodeRef.current = getCountryCallingCode(country);
     const availableCountriesRef = useRef();
     availableCountriesRef.current = availableCountries;
     const { dataProvider: selectDataProvider, options: selectOptions } = useCountrySelectDataProvider({
-        availableCountries,
-        countryNames,
-        priorityCountriesTitle,
-        priorityCountries,
-        libPhoneNumberAPI,
+      availableCountries,
+      countryNames,
+      priorityCountriesTitle,
+      priorityCountries,
+      libPhoneNumberAPI
     });
     const phoneFormatter = useMemo(() => {
-        return phoneFormatterFactory({
-            // обернуто в промис т.к. форматтер вызывается в процессе рендера BaseInput и не может синхронно
-            // вызывать изменения стейта другого компонента
-            setCountry: (country) => {
-                countryRef.current = country;
-                void Promise.resolve().then(() => setCountry(country));
-            },
-            currentCountryRef: countryRef,
-            availableCountriesRef,
-            libPhoneNumberAPI,
-            countryLocked: isCountryLocked,
-        });
+      return phoneFormatterFactory({
+        // обернуто в промис т.к. форматтер вызывается в процессе рендера BaseInput и не может синхронно
+        // вызывать изменения стейта другого компонента
+        setCountry: (country2) => {
+          countryRef.current = country2;
+          void Promise.resolve().then(() => setCountry(country2));
+        },
+        currentCountryRef: countryRef,
+        availableCountriesRef,
+        libPhoneNumberAPI,
+        countryLocked: isCountryLocked
+      });
     }, [libPhoneNumberAPI, isCountryLocked]);
-    const onChangeHandler = (country, phoneValue, event) => {
-        const callingCode = getCountryCallingCode(country);
-        const nationalNumber = phoneValue.replace(notDigitsRegExp, '');
-        onChange({
-            country,
-            callingCode,
-            phone: `+${callingCode}${nationalNumber}`,
-            nationalNumber,
-            isValid: isValidPhoneNumber(nationalNumber, country),
-            isPhoneValidationApiLoaded: isLoaded,
-        }, event);
+    const onChangeHandler = (country2, phoneValue2, event) => {
+      const callingCode = getCountryCallingCode(country2);
+      const nationalNumber = phoneValue2.replace(notDigitsRegExp, "");
+      onChange(
+        {
+          country: country2,
+          callingCode,
+          phone: `+${callingCode}${nationalNumber}`,
+          nationalNumber,
+          isValid: isValidPhoneNumber(nationalNumber, country2),
+          isPhoneValidationApiLoaded: isLoaded
+        },
+        event
+      );
     };
     useEffect(() => {
-        if (lockedCountry !== undefined && countryRef.current !== lockedCountry) {
-            setCountry(lockedCountry);
-            countryRef.current = lockedCountry;
-            setPhoneValue('');
-            onChangeHandler(lockedCountry, '');
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
+      if (lockedCountry !== void 0 && countryRef.current !== lockedCountry) {
+        setCountry(lockedCountry);
+        countryRef.current = lockedCountry;
+        setPhoneValue("");
+        onChangeHandler(lockedCountry, "");
+      }
     }, [lockedCountry]);
     const focusHandler = () => {
-        if (focusInsideRef.current) {
-            return;
-        }
-        focusInsideRef.current = true;
-        onFocus?.();
+      if (focusInsideRef.current) {
+        return;
+      }
+      focusInsideRef.current = true;
+      onFocus?.();
     };
     const blurHandler = () => {
-        requestAnimationFrame(() => {
-            if (wrapperRef.current?.contains(document.activeElement)) {
-                return;
-            }
-            focusInsideRef.current = false;
-            onBlur?.();
-        });
+      requestAnimationFrame(() => {
+        if (wrapperRef.current?.contains(document.activeElement)) {
+          return;
+        }
+        focusInsideRef.current = false;
+        onBlur?.();
+      });
     };
-    return (jsxs("div", { ref: ref, children: [jsxs("div", { className: classNames(styles.phoneInputContainer, {
-                    [styles.countryLocked]: isCountryLocked && !isComponentDisabled,
-                }), onFocus: focusHandler, onBlur: blurHandler, ref: wrapperRefMultiplexer, "data-qa": dataQa, children: [jsx(RegionSelect, { ref: codeInputElementRef, country: country, countryLocked: isCountryLocked, selectDataProvider: selectDataProvider, selectOptions: selectOptions, showSearchInMobile: selectOptions.length > 10, callingCode: countryCallingCodeRef.current, descriptionId: descriptionId, onChange: (newCountry) => {
-                            let currentPhoneValue = phoneValue;
-                            if (country !== newCountry) {
-                                setPhoneValue('');
-                                currentPhoneValue = '';
-                            }
-                            setCountry(newCountry);
-                            countryRef.current = newCountry;
-                            onChangeHandler(newCountry, currentPhoneValue);
-                            phoneInputRef.current?.focus();
-                        }, availableCountries: availableCountries, priorityCountries: priorityCountries, libPhoneNumberAPI: libPhoneNumberAPI, invalid: invalid, disabled: isComponentDisabled, metadataVariant: metadataVariant }), jsx(Input, { ref: inputRefMultiplexer, size: "large", onChange: (value, event) => {
-                            setPhoneValue(value);
-                            onChangeHandler(countryRef.current, value, event);
-                        }, formatter: phoneFormatter, value: phoneValue, invalid: invalid, disabled: isComponentDisabled, inputMode: "tel", "data-qa": "magritte-phone-input-national-number-input", "aria-describedby": descriptionId })] }), jsx(FormHelper, { invalid: invalid, description: description, disabled: isComponentDisabled, errorMessage: errorMessage, descriptionId: descriptionId, "data-qa": "magritte-phone-input-form-helper" })] }));
-});
-PhoneInput.displayName = 'PhoneInput';
+    return /* @__PURE__ */ jsxs("div", { ref, children: [
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: classNames(styles.phoneInputContainer, {
+            [styles.countryLocked]: isCountryLocked && !isComponentDisabled
+          }),
+          onFocus: focusHandler,
+          onBlur: blurHandler,
+          ref: wrapperRefMultiplexer,
+          "data-qa": dataQa,
+          children: [
+            /* @__PURE__ */ jsx(
+              RegionSelect,
+              {
+                ref: codeInputElementRef,
+                country,
+                countryLocked: isCountryLocked,
+                selectDataProvider,
+                selectOptions,
+                showSearchInMobile: selectOptions.length > 10,
+                callingCode: countryCallingCodeRef.current,
+                descriptionId,
+                onChange: (newCountry) => {
+                  let currentPhoneValue = phoneValue;
+                  if (country !== newCountry) {
+                    setPhoneValue("");
+                    currentPhoneValue = "";
+                  }
+                  setCountry(newCountry);
+                  countryRef.current = newCountry;
+                  onChangeHandler(newCountry, currentPhoneValue);
+                  phoneInputRef.current?.focus();
+                },
+                availableCountries,
+                priorityCountries,
+                libPhoneNumberAPI,
+                invalid,
+                disabled: isComponentDisabled,
+                metadataVariant
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Input,
+              {
+                ref: inputRefMultiplexer,
+                size: "large",
+                onChange: (value, event) => {
+                  setPhoneValue(value);
+                  onChangeHandler(countryRef.current, value, event);
+                },
+                formatter: phoneFormatter,
+                value: phoneValue,
+                invalid,
+                disabled: isComponentDisabled,
+                inputMode: "tel",
+                "data-qa": "magritte-phone-input-national-number-input",
+                "aria-describedby": descriptionId
+              }
+            )
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        FormHelper,
+        {
+          invalid,
+          description,
+          disabled: isComponentDisabled,
+          errorMessage,
+          descriptionId,
+          "data-qa": "magritte-phone-input-form-helper"
+        }
+      )
+    ] });
+  }
+);
+PhoneInput.displayName = "PhoneInput";
 
 export { PhoneInput };
 //# sourceMappingURL=PhoneInput.js.map

package/PhoneInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"PhoneInput.js","sources":["src/PhoneInput.tsx"],"sourcesContent":["import { type FC, type Ref, useState, useRef, useMemo, forwardRef, ChangeEvent, useId, useEffect } from 'react';\nimport classNames from 'classnames';\nimport { type CountryCode, type CountryCallingCode } from 'libphonenumber-js';\n\nimport { useDisabled } from '@hh.ru/magritte-common-use-disabled';\nimport { useMultipleRefs } from '@hh.ru/magritte-common-use-multiple-refs';\nimport { FormHelper } from '@hh.ru/magritte-ui-form-helper';\nimport { Input } from '@hh.ru/magritte-ui-input';\nimport { RegionSelect } from '@hh.ru/magritte-ui-phone-input/RegionSelect';\nimport { phoneFormatterFactory } from '@hh.ru/magritte-ui-phone-input/phoneFormatter';\nimport { useCountrySelectDataProvider } from '@hh.ru/magritte-ui-phone-input/useCountrySelectDataProvider';\nimport { type MetadataVariant, useLibPhoneNumber } from '@hh.ru/magritte-ui-phone-input/useLibPhoneNumber';\n\nimport styles from './phoneInput.less';\n\nexport interface PhoneInputProps {\n    /** Код страны который будет выбран при инициализации компонента */\n    defaultCountry?: CountryCode;\n    /** Национальная часть номера который будет введен в компонент при инициализации */\n    defaultNationalNumber?: string;\n    /** Обработчик изменения номера телефона */\n    onChange: (\n        data: {\n            /** Двухбуквенный код страны */\n            country: CountryCode;\n            /** Международный телефонный код страны */\n            callingCode: CountryCallingCode;\n            /** Национальная часть номера, содержит только цифры */\n            nationalNumber: string;\n            /** Номер телефона в международном формате */\n            phone: string;\n            /** Флаг валидности номера */\n            isValid: boolean;\n            /** Флаг загрузки API для валидации номера */\n            isPhoneValidationApiLoaded: boolean;\n        },\n        event?: ChangeEvent<HTMLInputElement>\n    ) => void;\n    /** Обработчик ошибки загрузки API для валидации номера */\n    onPhoneValidationApiLoadError?: (error: Error, reload: VoidFunction) => void;\n    /** Список стран доступных для выбора */\n    availableCountries?: CountryCode[];\n    /** Флаг приоритетных стран, которые будут отображаться в начале списка */\n    priorityCountries?: CountryCode[];\n    /**\n     * Фиксирует регион на указанной стране: селект блокируется (отображается как disabled),\n     * а ввод номера другого региона не меняет выбранную страну. Если проп не задан — регион можно менять.\n     */\n    lockedCountry?: CountryCode;\n    /** Флаг валидности номера */\n    invalid?: boolean;\n    /** Описание которое будет отображаться под полями ввода */\n    description?: string;\n    /** Сообщение об ошибке валидации, будет отображаться только если установлен флаг invalid */\n    errorMessage?: string;\n    /** Словарь содержащий названия стран */\n    countryNames: Partial<Record<CountryCode, string>>;\n    /** Название блока с приоритетными странами */\n    priorityCountriesTitle?: string;\n    /** Обработчик фокуса на компоненте */\n    onFocus?: VoidFunction;\n    /** Обработчик потери фокуса на компоненте */\n    onBlur?: VoidFunction;\n    /**\n     * Включает режим парсинга только мобильных номеров, в этом режиме уменьшается время загрузки компонента,\n     * но номера фиксированных линий связи не пройдут валидацию\n     * */\n    mobileOnly?: boolean;\n    /** Атрибут data-qa */\n    'data-qa'?: string;\n    /** Ссылка на обертку полей ввода */\n    inputsWrapperRef?: Ref<HTMLDivElement>;\n    /** Ссылка на элемент input */\n    phoneInputElementRef?: Ref<HTMLInputElement>;\n    codeInputElementRef?: Ref<HTMLInputElement>;\n    disabled?: boolean;\n}\n\nconst DEFAULT_PRIORITY_COUNTRIES: CountryCode[] = ['RU', 'BY', 'KZ', 'UZ'] as const;\nconst notDigitsRegExp = /[\\D]/g;\n\nexport const PhoneInput: FC<PhoneInputProps> = forwardRef<HTMLDivElement, PhoneInputProps>(\n    (\n        {\n            defaultCountry = 'RU',\n            defaultNationalNumber = '',\n            onChange,\n            availableCountries,\n            invalid,\n            description,\n            errorMessage,\n            priorityCountries = DEFAULT_PRIORITY_COUNTRIES,\n            lockedCountry,\n            onFocus,\n            onBlur,\n            countryNames,\n            priorityCountriesTitle,\n            mobileOnly,\n            'data-qa': dataQa = 'magritte-phone-input-wrapper',\n            inputsWrapperRef,\n            phoneInputElementRef,\n            codeInputElementRef,\n            onPhoneValidationApiLoadError,\n            disabled,\n        },\n        ref\n    ) => {\n        const descriptionId = useId();\n        const metadataVariant: MetadataVariant = useMemo<MetadataVariant>(() => {\n            const minimalMetadata =\n                availableCountries?.length === DEFAULT_PRIORITY_COUNTRIES.length &&\n                DEFAULT_PRIORITY_COUNTRIES.every((country) => availableCountries.includes(country));\n            if (minimalMetadata) {\n                return 'ru-by-kz-uz';\n            }\n\n            const keys = Object.keys(countryNames);\n            if (\n                keys.length === DEFAULT_PRIORITY_COUNTRIES.length &&\n                DEFAULT_PRIORITY_COUNTRIES.every((country) => keys.includes(country))\n            ) {\n                return 'ru-by-kz-uz';\n            }\n\n            return 'max';\n        }, [availableCountries, countryNames]);\n\n        const libPhoneNumberAPI = useLibPhoneNumber(metadataVariant, !!mobileOnly, onPhoneValidationApiLoadError);\n        const { getCountryCallingCode, isValidPhoneNumber, isLoaded } = libPhoneNumberAPI;\n        const [country, setCountry] = useState<CountryCode>(lockedCountry ?? defaultCountry);\n        const countryRef = useRef<CountryCode>(country);\n        const countryCallingCodeRef = useRef<CountryCallingCode>(getCountryCallingCode(country));\n        const focusInsideRef = useRef(false);\n        const wrapperRef = useRef<HTMLDivElement>(null);\n        const wrapperRefMultiplexer = useMultipleRefs(wrapperRef, inputsWrapperRef);\n        const [phoneValue, setPhoneValue] = useState(defaultNationalNumber);\n        const phoneInputRef = useRef<HTMLInputElement>(null);\n        const inputRefMultiplexer = useMultipleRefs(phoneInputRef, phoneInputElementRef);\n        const forceDisabled = useDisabled();\n        const isComponentDisabled = forceDisabled || !!disabled;\n        const isCountryLocked = lockedCountry !== undefined;\n        countryCallingCodeRef.current = getCountryCallingCode(country);\n        const availableCountriesRef = useRef<CountryCode[] | undefined>();\n        availableCountriesRef.current = availableCountries;\n\n        const { dataProvider: selectDataProvider, options: selectOptions } = useCountrySelectDataProvider({\n            availableCountries,\n            countryNames,\n            priorityCountriesTitle,\n            priorityCountries,\n            libPhoneNumberAPI,\n        });\n\n        const phoneFormatter = useMemo(() => {\n            return phoneFormatterFactory({\n                // обернуто в промис т.к. форматтер вызывается в процессе рендера BaseInput и не может синхронно\n                // вызывать изменения стейта другого компонента\n                setCountry: (country) => {\n                    countryRef.current = country;\n                    void Promise.resolve().then(() => setCountry(country));\n                },\n                currentCountryRef: countryRef,\n                availableCountriesRef,\n                libPhoneNumberAPI,\n                countryLocked: isCountryLocked,\n            });\n        }, [libPhoneNumberAPI, isCountryLocked]);\n\n        const onChangeHandler = (country: CountryCode, phoneValue: string, event?: ChangeEvent<HTMLInputElement>) => {\n            const callingCode = getCountryCallingCode(country);\n            const nationalNumber = phoneValue.replace(notDigitsRegExp, '');\n            onChange(\n                {\n                    country,\n                    callingCode,\n                    phone: `+${callingCode}${nationalNumber}`,\n                    nationalNumber,\n                    isValid: isValidPhoneNumber(nationalNumber, country),\n                    isPhoneValidationApiLoaded: isLoaded,\n                },\n                event\n            );\n        };\n\n        useEffect(() => {\n            if (lockedCountry !== undefined && countryRef.current !== lockedCountry) {\n                setCountry(lockedCountry);\n                countryRef.current = lockedCountry;\n                setPhoneValue('');\n                onChangeHandler(lockedCountry, '');\n            }\n            // eslint-disable-next-line react-hooks/exhaustive-deps\n        }, [lockedCountry]);\n\n        const focusHandler = () => {\n            if (focusInsideRef.current) {\n                return;\n            }\n\n            focusInsideRef.current = true;\n            onFocus?.();\n        };\n\n        const blurHandler = () => {\n            requestAnimationFrame(() => {\n                if (wrapperRef.current?.contains(document.activeElement)) {\n                    return;\n                }\n\n                focusInsideRef.current = false;\n                onBlur?.();\n            });\n        };\n\n        return (\n            <div ref={ref}>\n                <div\n                    className={classNames(styles.phoneInputContainer, {\n                        [styles.countryLocked]: isCountryLocked && !isComponentDisabled,\n                    })}\n                    onFocus={focusHandler}\n                    onBlur={blurHandler}\n                    ref={wrapperRefMultiplexer}\n                    data-qa={dataQa}\n                >\n                    <RegionSelect\n                        ref={codeInputElementRef}\n                        country={country}\n                        countryLocked={isCountryLocked}\n                        selectDataProvider={selectDataProvider}\n                        selectOptions={selectOptions}\n                        showSearchInMobile={selectOptions.length > 10}\n                        callingCode={countryCallingCodeRef.current}\n                        descriptionId={descriptionId}\n                        onChange={(newCountry) => {\n                            let currentPhoneValue = phoneValue;\n                            if (country !== newCountry) {\n                                setPhoneValue('');\n                                currentPhoneValue = '';\n                            }\n                            setCountry(newCountry);\n                            countryRef.current = newCountry;\n                            onChangeHandler(newCountry, currentPhoneValue);\n                            phoneInputRef.current?.focus();\n                        }}\n                        availableCountries={availableCountries}\n                        priorityCountries={priorityCountries}\n                        libPhoneNumberAPI={libPhoneNumberAPI}\n                        invalid={invalid}\n                        disabled={isComponentDisabled}\n                        metadataVariant={metadataVariant}\n                    />\n                    <Input\n                        ref={inputRefMultiplexer}\n                        size=\"large\"\n                        onChange={(value, event) => {\n                            setPhoneValue(value);\n                            onChangeHandler(countryRef.current, value, event);\n                        }}\n                        formatter={phoneFormatter}\n                        value={phoneValue}\n                        invalid={invalid}\n                        disabled={isComponentDisabled}\n                        inputMode=\"tel\"\n                        data-qa=\"magritte-phone-input-national-number-input\"\n                        aria-describedby={descriptionId}\n                    />\n                </div>\n                <FormHelper\n                    invalid={invalid}\n                    description={description}\n                    disabled={isComponentDisabled}\n                    errorMessage={errorMessage}\n                    descriptionId={descriptionId}\n                    data-qa=\"magritte-phone-input-form-helper\"\n                />\n            </div>\n        );\n    }\n);\n\nPhoneInput.displayName = 'PhoneInput';\n"],"names":["_jsxs","_jsx"],"mappings":"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"}
+{"version":3,"file":"PhoneInput.js","sources":["src/PhoneInput.tsx"],"sourcesContent":["import { type FC, type Ref, useState, useRef, useMemo, forwardRef, ChangeEvent, useId, useEffect } from 'react';\nimport classNames from 'classnames';\nimport { type CountryCode, type CountryCallingCode } from 'libphonenumber-js';\n\nimport { useDisabled } from '@hh.ru/magritte-common-use-disabled';\nimport { useMultipleRefs } from '@hh.ru/magritte-common-use-multiple-refs';\nimport { FormHelper } from '@hh.ru/magritte-ui-form-helper';\nimport { Input } from '@hh.ru/magritte-ui-input';\nimport { RegionSelect } from '@hh.ru/magritte-ui-phone-input/RegionSelect';\nimport { phoneFormatterFactory } from '@hh.ru/magritte-ui-phone-input/phoneFormatter';\nimport { useCountrySelectDataProvider } from '@hh.ru/magritte-ui-phone-input/useCountrySelectDataProvider';\nimport { type MetadataVariant, useLibPhoneNumber } from '@hh.ru/magritte-ui-phone-input/useLibPhoneNumber';\n\nimport styles from './phoneInput.less';\n\nexport interface PhoneInputProps {\n    /** Код страны который будет выбран при инициализации компонента */\n    defaultCountry?: CountryCode;\n    /** Национальная часть номера который будет введен в компонент при инициализации */\n    defaultNationalNumber?: string;\n    /** Обработчик изменения номера телефона */\n    onChange: (\n        data: {\n            /** Двухбуквенный код страны */\n            country: CountryCode;\n            /** Международный телефонный код страны */\n            callingCode: CountryCallingCode;\n            /** Национальная часть номера, содержит только цифры */\n            nationalNumber: string;\n            /** Номер телефона в международном формате */\n            phone: string;\n            /** Флаг валидности номера */\n            isValid: boolean;\n            /** Флаг загрузки API для валидации номера */\n            isPhoneValidationApiLoaded: boolean;\n        },\n        event?: ChangeEvent<HTMLInputElement>\n    ) => void;\n    /** Обработчик ошибки загрузки API для валидации номера */\n    onPhoneValidationApiLoadError?: (error: Error, reload: VoidFunction) => void;\n    /** Список стран доступных для выбора */\n    availableCountries?: CountryCode[];\n    /** Флаг приоритетных стран, которые будут отображаться в начале списка */\n    priorityCountries?: CountryCode[];\n    /**\n     * Фиксирует регион на указанной стране: селект блокируется (отображается как disabled),\n     * а ввод номера другого региона не меняет выбранную страну. Если проп не задан — регион можно менять.\n     */\n    lockedCountry?: CountryCode;\n    /** Флаг валидности номера */\n    invalid?: boolean;\n    /** Описание которое будет отображаться под полями ввода */\n    description?: string;\n    /** Сообщение об ошибке валидации, будет отображаться только если установлен флаг invalid */\n    errorMessage?: string;\n    /** Словарь содержащий названия стран */\n    countryNames: Partial<Record<CountryCode, string>>;\n    /** Название блока с приоритетными странами */\n    priorityCountriesTitle?: string;\n    /** Обработчик фокуса на компоненте */\n    onFocus?: VoidFunction;\n    /** Обработчик потери фокуса на компоненте */\n    onBlur?: VoidFunction;\n    /**\n     * Включает режим парсинга только мобильных номеров, в этом режиме уменьшается время загрузки компонента,\n     * но номера фиксированных линий связи не пройдут валидацию\n     * */\n    mobileOnly?: boolean;\n    /** Атрибут data-qa */\n    'data-qa'?: string;\n    /** Ссылка на обертку полей ввода */\n    inputsWrapperRef?: Ref<HTMLDivElement>;\n    /** Ссылка на элемент input */\n    phoneInputElementRef?: Ref<HTMLInputElement>;\n    codeInputElementRef?: Ref<HTMLInputElement>;\n    disabled?: boolean;\n}\n\nconst DEFAULT_PRIORITY_COUNTRIES: CountryCode[] = ['RU', 'BY', 'KZ', 'UZ'] as const;\nconst notDigitsRegExp = /[\\D]/g;\n\nexport const PhoneInput: FC<PhoneInputProps> = forwardRef<HTMLDivElement, PhoneInputProps>(\n    (\n        {\n            defaultCountry = 'RU',\n            defaultNationalNumber = '',\n            onChange,\n            availableCountries,\n            invalid,\n            description,\n            errorMessage,\n            priorityCountries = DEFAULT_PRIORITY_COUNTRIES,\n            lockedCountry,\n            onFocus,\n            onBlur,\n            countryNames,\n            priorityCountriesTitle,\n            mobileOnly,\n            'data-qa': dataQa = 'magritte-phone-input-wrapper',\n            inputsWrapperRef,\n            phoneInputElementRef,\n            codeInputElementRef,\n            onPhoneValidationApiLoadError,\n            disabled,\n        },\n        ref\n    ) => {\n        const descriptionId = useId();\n        const metadataVariant: MetadataVariant = useMemo<MetadataVariant>(() => {\n            const minimalMetadata =\n                availableCountries?.length === DEFAULT_PRIORITY_COUNTRIES.length &&\n                DEFAULT_PRIORITY_COUNTRIES.every((country) => availableCountries.includes(country));\n            if (minimalMetadata) {\n                return 'ru-by-kz-uz';\n            }\n\n            const keys = Object.keys(countryNames);\n            if (\n                keys.length === DEFAULT_PRIORITY_COUNTRIES.length &&\n                DEFAULT_PRIORITY_COUNTRIES.every((country) => keys.includes(country))\n            ) {\n                return 'ru-by-kz-uz';\n            }\n\n            return 'max';\n        }, [availableCountries, countryNames]);\n\n        const libPhoneNumberAPI = useLibPhoneNumber(metadataVariant, !!mobileOnly, onPhoneValidationApiLoadError);\n        const { getCountryCallingCode, isValidPhoneNumber, isLoaded } = libPhoneNumberAPI;\n        const [country, setCountry] = useState<CountryCode>(lockedCountry ?? defaultCountry);\n        const countryRef = useRef<CountryCode>(country);\n        const countryCallingCodeRef = useRef<CountryCallingCode>(getCountryCallingCode(country));\n        const focusInsideRef = useRef(false);\n        const wrapperRef = useRef<HTMLDivElement>(null);\n        const wrapperRefMultiplexer = useMultipleRefs(wrapperRef, inputsWrapperRef);\n        const [phoneValue, setPhoneValue] = useState(defaultNationalNumber);\n        const phoneInputRef = useRef<HTMLInputElement>(null);\n        const inputRefMultiplexer = useMultipleRefs(phoneInputRef, phoneInputElementRef);\n        const forceDisabled = useDisabled();\n        const isComponentDisabled = forceDisabled || !!disabled;\n        const isCountryLocked = lockedCountry !== undefined;\n        countryCallingCodeRef.current = getCountryCallingCode(country);\n        const availableCountriesRef = useRef<CountryCode[] | undefined>();\n        availableCountriesRef.current = availableCountries;\n\n        const { dataProvider: selectDataProvider, options: selectOptions } = useCountrySelectDataProvider({\n            availableCountries,\n            countryNames,\n            priorityCountriesTitle,\n            priorityCountries,\n            libPhoneNumberAPI,\n        });\n\n        const phoneFormatter = useMemo(() => {\n            return phoneFormatterFactory({\n                // обернуто в промис т.к. форматтер вызывается в процессе рендера BaseInput и не может синхронно\n                // вызывать изменения стейта другого компонента\n                setCountry: (country) => {\n                    countryRef.current = country;\n                    void Promise.resolve().then(() => setCountry(country));\n                },\n                currentCountryRef: countryRef,\n                availableCountriesRef,\n                libPhoneNumberAPI,\n                countryLocked: isCountryLocked,\n            });\n        }, [libPhoneNumberAPI, isCountryLocked]);\n\n        const onChangeHandler = (country: CountryCode, phoneValue: string, event?: ChangeEvent<HTMLInputElement>) => {\n            const callingCode = getCountryCallingCode(country);\n            const nationalNumber = phoneValue.replace(notDigitsRegExp, '');\n            onChange(\n                {\n                    country,\n                    callingCode,\n                    phone: `+${callingCode}${nationalNumber}`,\n                    nationalNumber,\n                    isValid: isValidPhoneNumber(nationalNumber, country),\n                    isPhoneValidationApiLoaded: isLoaded,\n                },\n                event\n            );\n        };\n\n        useEffect(() => {\n            if (lockedCountry !== undefined && countryRef.current !== lockedCountry) {\n                setCountry(lockedCountry);\n                countryRef.current = lockedCountry;\n                setPhoneValue('');\n                onChangeHandler(lockedCountry, '');\n            }\n            // eslint-disable-next-line react-hooks/exhaustive-deps\n        }, [lockedCountry]);\n\n        const focusHandler = () => {\n            if (focusInsideRef.current) {\n                return;\n            }\n\n            focusInsideRef.current = true;\n            onFocus?.();\n        };\n\n        const blurHandler = () => {\n            requestAnimationFrame(() => {\n                if (wrapperRef.current?.contains(document.activeElement)) {\n                    return;\n                }\n\n                focusInsideRef.current = false;\n                onBlur?.();\n            });\n        };\n\n        return (\n            <div ref={ref}>\n                <div\n                    className={classNames(styles.phoneInputContainer, {\n                        [styles.countryLocked]: isCountryLocked && !isComponentDisabled,\n                    })}\n                    onFocus={focusHandler}\n                    onBlur={blurHandler}\n                    ref={wrapperRefMultiplexer}\n                    data-qa={dataQa}\n                >\n                    <RegionSelect\n                        ref={codeInputElementRef}\n                        country={country}\n                        countryLocked={isCountryLocked}\n                        selectDataProvider={selectDataProvider}\n                        selectOptions={selectOptions}\n                        showSearchInMobile={selectOptions.length > 10}\n                        callingCode={countryCallingCodeRef.current}\n                        descriptionId={descriptionId}\n                        onChange={(newCountry) => {\n                            let currentPhoneValue = phoneValue;\n                            if (country !== newCountry) {\n                                setPhoneValue('');\n                                currentPhoneValue = '';\n                            }\n                            setCountry(newCountry);\n                            countryRef.current = newCountry;\n                            onChangeHandler(newCountry, currentPhoneValue);\n                            phoneInputRef.current?.focus();\n                        }}\n                        availableCountries={availableCountries}\n                        priorityCountries={priorityCountries}\n                        libPhoneNumberAPI={libPhoneNumberAPI}\n                        invalid={invalid}\n                        disabled={isComponentDisabled}\n                        metadataVariant={metadataVariant}\n                    />\n                    <Input\n                        ref={inputRefMultiplexer}\n                        size=\"large\"\n                        onChange={(value, event) => {\n                            setPhoneValue(value);\n                            onChangeHandler(countryRef.current, value, event);\n                        }}\n                        formatter={phoneFormatter}\n                        value={phoneValue}\n                        invalid={invalid}\n                        disabled={isComponentDisabled}\n                        inputMode=\"tel\"\n                        data-qa=\"magritte-phone-input-national-number-input\"\n                        aria-describedby={descriptionId}\n                    />\n                </div>\n                <FormHelper\n                    invalid={invalid}\n                    description={description}\n                    disabled={isComponentDisabled}\n                    errorMessage={errorMessage}\n                    descriptionId={descriptionId}\n                    data-qa=\"magritte-phone-input-form-helper\"\n                />\n            </div>\n        );\n    }\n);\n\nPhoneInput.displayName = 'PhoneInput';\n"],"names":["country","phoneValue"],"mappings":"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"}

package/RegionSelect.d.ts

@@ -1,7 +1,7 @@
 import { type CountryCode, type CountryCallingCode } from 'libphonenumber-js';
 import { DataProvider } from '@hh.ru/magritte-common-data-provider';
-import { type PhoneCodeOption } from '@hh.ru/magritte-ui-phone-input/useCountrySelectDataProvider';
-import { type LibPhoneNumberAPI, type MetadataVariant } from '@hh.ru/magritte-ui-phone-input/useLibPhoneNumber';
+import { type PhoneCodeOption } from './useCountrySelectDataProvider';
+import { type LibPhoneNumberAPI, type MetadataVariant } from './useLibPhoneNumber';
 type RegionSelectProps = {
     country: CountryCode;
     countryLocked: boolean;