@alfalab/core-components-international-phone-input 2.0.4 → 2.0.6

package/esm/components/country-select/index.css

@@ -1,4 +1,4 @@
-/* hash: 1tm53 */
+/* hash: sz3rw */
 :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
 } /* deprecated */ :root {
     --color-light-neutral-translucent-700: rgba(4, 4, 21, 0.47);
@@ -18,29 +18,29 @@
     --gap-s: 12px;
 } :root {
 } :root {
-} .international-phone-input__component_1r6tp {
+} .international-phone-input__component_61i1r {
     position: static;
     display: flex;
     min-width: initial;
     height: 100%;
-} .international-phone-input__option_1r6tp {
+} .international-phone-input__option_61i1r {
     display: flex;
     align-items: flex-start;
     padding: var(--gap-s);
-} .international-phone-input__flag_1r6tp {
+} .international-phone-input__flag_61i1r {
     flex-shrink: 0;
     margin-right: var(--gap-xs);
-} .international-phone-input__countryName_1r6tp {
+} .international-phone-input__countryName_61i1r {
     margin-right: var(--gap-xs);
-} .international-phone-input__dialCode_1r6tp {
+} .international-phone-input__dialCode_61i1r {
     color: var(--color-light-text-secondary);
-} .international-phone-input__flagIconWrapper_1r6tp {
+} .international-phone-input__flagIconWrapper_61i1r {
     display: flex;
     justify-content: center;
     align-items: center;
     width: 24px;
     height: 24px;
     margin-left: var(--gap-s);
-} .international-phone-input__emptyCountryIcon_1r6tp {
+} .international-phone-input__emptyCountryIcon_61i1r {
     color: var(--color-light-neutral-translucent-700);
 }

package/esm/components/flag-icon/component.js

@@ -2,7 +2,7 @@ import React from 'react';
 import cn from 'classnames';
 import { flagSprite } from './flagSprite.js';
 
-var styles = {"flagIcon":"international-phone-input__flagIcon_dxseh","flagPlaceholder":"international-phone-input__flagPlaceholder_dxseh"};
+var styles = {"flagIcon":"international-phone-input__flagIcon_mn1nz","flagPlaceholder":"international-phone-input__flagPlaceholder_mn1nz"};
 require('./index.css')
 
 /**

package/esm/components/flag-icon/index.css

@@ -1,4 +1,4 @@
-/* hash: 17zwu */
+/* hash: 9lu45 */
 :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
 } /* deprecated */ :root {
     --color-light-neutral-translucent-100: rgba(38, 55, 88, 0.06); /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
@@ -17,10 +17,10 @@
     --gap-3xs: 2px;
 } :root {
 } :root {
-} .international-phone-input__flagIcon_dxseh {
+} .international-phone-input__flagIcon_mn1nz {
     max-width: 24px;
     max-height: 24px;
-} .international-phone-input__flagPlaceholder_dxseh {
+} .international-phone-input__flagPlaceholder_mn1nz {
     width: 24px;
     height: 16px;
     max-height: 16px;

package/esm/components/select-field/component.js

@@ -6,7 +6,7 @@ import { useFocus } from '@alfalab/hooks';
 import { WorldMagnifierMIcon } from '@alfalab/icons-glyph/WorldMagnifierMIcon';
 import { FlagIcon } from '../flag-icon/component.js';
 
-var styles = {"component":"international-phone-input__component_1tk3e","flagIconContainer":"international-phone-input__flagIconContainer_1tk3e","emptyCountryIcon":"international-phone-input__emptyCountryIcon_1tk3e","disabled":"international-phone-input__disabled_1tk3e","inner":"international-phone-input__inner_1tk3e","size-64":"international-phone-input__size-64_1tk3e","size-72":"international-phone-input__size-72_1tk3e","focusVisible":"international-phone-input__focusVisible_1tk3e"};
+var styles = {"component":"international-phone-input__component_y5c1x","flagIconContainer":"international-phone-input__flagIconContainer_y5c1x","emptyCountryIcon":"international-phone-input__emptyCountryIcon_y5c1x","disabled":"international-phone-input__disabled_y5c1x","inner":"international-phone-input__inner_y5c1x","size-64":"international-phone-input__size-64_y5c1x","size-72":"international-phone-input__size-72_y5c1x","focusVisible":"international-phone-input__focusVisible_y5c1x"};
 require('./index.css')
 
 var EMPTY_COUNTRY_SELECT_FIELD = {

package/esm/components/select-field/index.css

@@ -1,4 +1,4 @@
-/* hash: 3r6mf */
+/* hash: a6qqq */
 :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
 } /* deprecated */ :root {
     --color-light-border-link: #2288fa;
@@ -21,33 +21,33 @@
 } :root {
     --focus-color: var(--color-light-border-link);
     --disabled-cursor: not-allowed;
-} .international-phone-input__component_1tk3e {
+} .international-phone-input__component_y5c1x {
     height: 100%;
     cursor: pointer;
     outline: none;
     position: relative;
-} .international-phone-input__flagIconContainer_1tk3e {
+} .international-phone-input__flagIconContainer_y5c1x {
     display: flex;
     justify-content: center;
     align-items: center;
     width: 24px;
     height: 24px;
     margin-right: var(--gap-2xs);
-} .international-phone-input__emptyCountryIcon_1tk3e {
+} .international-phone-input__emptyCountryIcon_y5c1x {
     color: var(--color-light-neutral-translucent-700);
-} .international-phone-input__disabled_1tk3e {
+} .international-phone-input__disabled_y5c1x {
     cursor: var(--disabled-cursor);
-} .international-phone-input__inner_1tk3e {
+} .international-phone-input__inner_y5c1x {
     position: relative;
     display: flex;
     align-items: center;
     height: 100%;
     padding-left: var(--gap-s);
     outline: none;
-} .international-phone-input__size-64_1tk3e .international-phone-input__inner_1tk3e,
-.international-phone-input__size-72_1tk3e .international-phone-input__inner_1tk3e {
+} .international-phone-input__size-64_y5c1x .international-phone-input__inner_y5c1x,
+.international-phone-input__size-72_y5c1x .international-phone-input__inner_y5c1x {
     padding-left: var(--gap-m);
-} .international-phone-input__focusVisible_1tk3e {
+} .international-phone-input__focusVisible_y5c1x {
     outline: 2px solid var(--focus-color);
     outline-offset: 2px;
 }

package/esm/types.d.ts

@@ -5,7 +5,7 @@ import { InputMobileProps } from "@alfalab/core-components-input/mobile";
 import { InputAutocompleteProps } from "@alfalab/core-components-input-autocomplete";
 import { InputAutocompleteDesktopProps } from "@alfalab/core-components-input-autocomplete/desktop";
 import { InputAutocompleteMobileProps } from "@alfalab/core-components-input-autocomplete/mobile";
-import { OptionShape } from "./typings-70284312";
+import { OptionShape } from "./typings-57569e57";
 import { SharedCountrySelectProps } from "./components/country-select/index";
 type Country = {
     name: string;

package/{modern/typings-70284312.d.ts → esm/typings-57569e57.d.ts}

@@ -998,7 +998,7 @@ type BaseSelectProps = {
     /**
      * Дополнительный класс для поповера
      */
-    popperClassName?: string;
+    popperClassName?: PopoverProps['className'];
     /**
      * Список вариантов выбора
      */
@@ -1195,6 +1195,10 @@ type BaseSelectProps = {
      * Показывать OptionsList, если он пустой
      */
     showEmptyOptionsList?: boolean;
+    /**
+     * Дополнительные пропсы для Popover
+     */
+    popoverProps?: Omit<PopoverProps, 'update' | 'zIndex' | 'position' | 'className' | 'open' | 'anchorElement' | 'preventFlip' | 'dataTestId'>;
 };
 type FieldProps = {
     /**

package/esm/utils-89376c31.d.ts

@@ -1,5 +1,5 @@
 import { ReactNode, RefObject } from 'react';
-import { BaseSelectProps, GroupShape, OptionShape } from "./typings-70284312";
+import { BaseSelectProps, GroupShape, OptionShape } from "./typings-57569e57";
 declare const isGroup: (item: OptionShape | GroupShape) => item is GroupShape;
 declare const isOptionShape: (item: OptionShape | string | null) => item is OptionShape;
 declare const joinOptions: ({ selected, selectedMultiple, }: {

package/{esm/Component-70284312.d.ts → modern/Component-57569e57.d.ts}

@@ -1,5 +1,5 @@
 /// <reference types="react" />
 import React from 'react';
-import { OptgroupProps } from "./typings-70284312";
+import { OptgroupProps } from "./typings-57569e57";
 declare const Optgroup: ({ children, className, label, size }: OptgroupProps) => React.JSX.Element;
 export { Optgroup };

package/modern/Component.responsive.d.ts

@@ -7,7 +7,7 @@ declare const InternationalPhoneInput: React.ForwardRefExoticComponent<(({
     clearableCountryCode?: boolean | undefined;
     countrySelectProps?: import("./components/country-select/index").SharedCountrySelectProps | undefined;
     clear?: boolean | undefined;
-    filterFn?: ((value: string | undefined, option: import("./typings-70284312").OptionShape) => boolean) | undefined;
+    filterFn?: ((value: string | undefined, option: import("./typings-57569e57").OptionShape) => boolean) | undefined;
     onCountryChange?: ((country?: import("./types").Country | undefined) => void) | undefined;
     onChange?: ((phone: string) => void) | undefined;
     onBlur?: ((event: React.FocusEvent<HTMLDivElement | HTMLInputElement, Element>) => void) | undefined;
@@ -26,15 +26,15 @@ declare const InternationalPhoneInput: React.ForwardRefExoticComponent<(({
     clearableCountryCode?: boolean | undefined;
     countrySelectProps?: import("./components/country-select/index").SharedCountrySelectProps | undefined;
     clear?: boolean | undefined;
-    filterFn?: ((value: string | undefined, option: import("./typings-70284312").OptionShape) => boolean) | undefined;
+    filterFn?: ((value: string | undefined, option: import("./typings-57569e57").OptionShape) => boolean) | undefined;
     onCountryChange?: ((country?: import("./types").Country | undefined) => void) | undefined;
     onChange?: ((phone: string) => void) | undefined;
     onBlur?: ((event: React.FocusEvent<HTMLDivElement | HTMLInputElement, Element>) => void) | undefined;
     onFocus?: ((event: React.FocusEvent<HTMLDivElement | HTMLInputElement, Element>) => void) | undefined;
 } & {
-    options: (import("./typings-70284312").OptionShape | import("./typings-70284312").GroupShape)[];
+    options: (import("./typings-57569e57").OptionShape | import("./typings-57569e57").GroupShape)[];
 } & Omit<import("@alfalab/core-components-input-autocomplete/types").InputAutocompleteCommonProps, "onChange" | "onInput"> & {
-    options: (import("./typings-70284312").OptionShape | import("./typings-70284312").GroupShape)[];
+    options: (import("./typings-57569e57").OptionShape | import("./typings-57569e57").GroupShape)[];
 } & Omit<import("@alfalab/core-components-input-autocomplete/types").InputAutocompleteMobileProps, "onChange" | "onInput"> & {
     breakpoint?: number | undefined;
     defaultMatchMediaValue?: boolean | (() => boolean) | undefined;

package/modern/components/base-international-phone-input/Component.d.ts

@@ -9,7 +9,7 @@ declare const BaseInternationalPhoneInput: React.ForwardRefExoticComponent<{
     clearableCountryCode?: boolean | undefined;
     countrySelectProps?: import("../country-select/index").SharedCountrySelectProps | undefined;
     clear?: boolean | undefined;
-    filterFn?: ((value: string | undefined, option: import("../../typings-70284312").OptionShape) => boolean) | undefined;
+    filterFn?: ((value: string | undefined, option: import("../../typings-57569e57").OptionShape) => boolean) | undefined;
     onCountryChange?: ((country?: Country | undefined) => void) | undefined;
     onChange?: ((phone: string) => void) | undefined;
     onBlur?: ((event: React.FocusEvent<HTMLDivElement | HTMLInputElement, Element>) => void) | undefined;

package/modern/components/base-international-phone-input/Component.js

@@ -6,13 +6,15 @@ import { BaseOption } from '@alfalab/core-components-select/modern/shared';
 import { initCountries, findCountry, filterPhones, createMaskOptions, getClear, getPhoneData } from '../../utils/index.js';
 import { CountrySelect } from '../country-select/Component.js';
 
-const styles = {"component":"international-phone-input__component_1druh","addons":"international-phone-input__addons_1druh"};
+const styles = {"component":"international-phone-input__component_eq2nn","addons":"international-phone-input__addons_eq2nn"};
 require('./index.css')
 
-const BaseInternationalPhoneInput = forwardRef(({ clearableCountryCode, value, country: countryProp, filterFn, onChange, onCountryChange, countrySelectProps, countries, defaultIso2, disabled, options, size = 56, Input, InputAutocomplete, SelectComponent, view, clear: clearProp, ...restProps }, ref) => {
+const BaseInternationalPhoneInput = forwardRef(({ clearableCountryCode, value, country: countryProp, filterFn, onChange, onCountryChange, countrySelectProps, countries, defaultIso2, disabled, options, size = 56, Input, InputAutocomplete, SelectComponent, view, clear: clearProp, open: openProps, defaultOpen, ...restProps }, ref) => {
     const countriesData = useMemo(() => initCountries(countries), [countries]);
     const inputRef = useRef(null);
     const inputWrapperRef = useRef(null);
+    const [open, setOpen] = useState(defaultOpen);
+    const [openCountry, setOpenCountry] = useState(countrySelectProps?.defaultOpen);
     const [selectedCountry, setSelectedCountry] = useState(() => findCountry(countriesData, value, defaultIso2, countryProp));
     const filteredOptions = filterPhones(value, options, filterFn);
     const country = countryProp ?? selectedCountry;
@@ -67,7 +69,31 @@ const BaseInternationalPhoneInput = forwardRef(({ clearableCountryCode, value, c
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [value, maskOptions]);
-    const renderCountrySelect = (compact = false) => (React.createElement(CountrySelect, { dataTestId: restProps?.dataTestId, ...countrySelectProps, view: view, SelectComponent: SelectComponent, disabled: disabled || countrySelectProps?.disabled, onChange: handleSelectCountry, country: country, countries: compact ? [] : countriesData, fieldWidth: inputWrapperRef.current?.getBoundingClientRect().width }));
+    const openPhoneSelect = (payload) => {
+        if (openProps === undefined)
+            setOpen(payload.open);
+        restProps.onOpen?.(payload);
+    };
+    const openCountrySelect = (payload) => {
+        if (countrySelectProps?.open === undefined)
+            setOpenCountry(payload.open);
+        countrySelectProps?.onOpen?.(payload);
+    };
+    const handlePhoneSelectOpen = (payload) => {
+        if (payload.open) {
+            openCountrySelect({ open: false });
+        }
+        openPhoneSelect(payload);
+    };
+    const handleCountrySelectOpen = (payload) => {
+        if (payload.open) {
+            openPhoneSelect({ open: false });
+        }
+        openCountrySelect(payload);
+    };
+    const showPhoneSelect = Boolean(open || openProps);
+    const showCountrySelect = Boolean(openCountry || countrySelectProps?.open);
+    const renderCountrySelect = (compact = false) => (React.createElement(CountrySelect, { dataTestId: restProps?.dataTestId, ...countrySelectProps, view: view, SelectComponent: SelectComponent, disabled: disabled || countrySelectProps?.disabled, onChange: handleSelectCountry, country: country, countries: compact ? [] : countriesData, fieldWidth: inputWrapperRef.current?.getBoundingClientRect().width, onOpen: handleCountrySelectOpen, open: showCountrySelect }));
     const inputProps = {
         className: styles.component,
         ref: mergeRefs([maskRef, ref, inputRef]),
@@ -77,7 +103,7 @@ const BaseInternationalPhoneInput = forwardRef(({ clearableCountryCode, value, c
         clear: getClear(clearProp, clearableCountryCode, value, country?.countryCode),
         ...restProps.inputProps,
     };
-    return Array.isArray(options) ? (React.createElement(InputAutocomplete, { closeOnSelect: true, Option: BaseOption, size: size, ...restProps, disabled: disabled, options: filteredOptions, value: value, onChange: handleOptionSelect, onInput: (phone) => updatePhoneData(phone), inputProps: {
+    return Array.isArray(options) ? (React.createElement(InputAutocomplete, { closeOnSelect: true, Option: BaseOption, size: size, ...restProps, disabled: disabled, options: filteredOptions, value: value, open: showPhoneSelect, onOpen: handlePhoneSelectOpen, onChange: handleOptionSelect, onInput: (phone) => updatePhoneData(phone), inputProps: {
             ...inputProps,
             onClear: handleClear,
             onInput: handleInput,

package/modern/components/base-international-phone-input/index.css

@@ -1,5 +1,5 @@
-/* hash: 5t2j9 */
+/* hash: 1yemg */
 
-    .international-phone-input__component_1druh .international-phone-input__addons_1druh {
+    .international-phone-input__component_eq2nn .international-phone-input__addons_eq2nn {
         padding-left: 0;
     }

package/modern/components/country-select/Component.js

@@ -5,7 +5,7 @@ import { WorldMagnifierMIcon } from '@alfalab/icons-glyph/WorldMagnifierMIcon';
 import { FlagIcon } from '../flag-icon/component.js';
 import { EMPTY_COUNTRY_SELECT_FIELD, SelectField } from '../select-field/component.js';
 
-const styles = {"component":"international-phone-input__component_1r6tp","option":"international-phone-input__option_1r6tp","flag":"international-phone-input__flag_1r6tp","countryName":"international-phone-input__countryName_1r6tp","dialCode":"international-phone-input__dialCode_1r6tp","flagIconWrapper":"international-phone-input__flagIconWrapper_1r6tp","emptyCountryIcon":"international-phone-input__emptyCountryIcon_1r6tp"};
+const styles = {"component":"international-phone-input__component_61i1r","option":"international-phone-input__option_61i1r","flag":"international-phone-input__flag_61i1r","countryName":"international-phone-input__countryName_61i1r","dialCode":"international-phone-input__dialCode_61i1r","flagIconWrapper":"international-phone-input__flagIconWrapper_61i1r","emptyCountryIcon":"international-phone-input__emptyCountryIcon_61i1r"};
 require('./index.css')
 
 const CountrySelect = ({ hideCountrySelect, countries, country, dataTestId, fieldWidth, onChange, view = 'desktop', SelectComponent, ...restProps }) => {

package/modern/components/country-select/index.css

@@ -1,4 +1,4 @@
-/* hash: 1tm53 */
+/* hash: sz3rw */
 :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
 } /* deprecated */ :root {
     --color-light-neutral-translucent-700: rgba(4, 4, 21, 0.47);
@@ -18,29 +18,29 @@
     --gap-s: 12px;
 } :root {
 } :root {
-} .international-phone-input__component_1r6tp {
+} .international-phone-input__component_61i1r {
     position: static;
     display: flex;
     min-width: initial;
     height: 100%;
-} .international-phone-input__option_1r6tp {
+} .international-phone-input__option_61i1r {
     display: flex;
     align-items: flex-start;
     padding: var(--gap-s);
-} .international-phone-input__flag_1r6tp {
+} .international-phone-input__flag_61i1r {
     flex-shrink: 0;
     margin-right: var(--gap-xs);
-} .international-phone-input__countryName_1r6tp {
+} .international-phone-input__countryName_61i1r {
     margin-right: var(--gap-xs);
-} .international-phone-input__dialCode_1r6tp {
+} .international-phone-input__dialCode_61i1r {
     color: var(--color-light-text-secondary);
-} .international-phone-input__flagIconWrapper_1r6tp {
+} .international-phone-input__flagIconWrapper_61i1r {
     display: flex;
     justify-content: center;
     align-items: center;
     width: 24px;
     height: 24px;
     margin-left: var(--gap-s);
-} .international-phone-input__emptyCountryIcon_1r6tp {
+} .international-phone-input__emptyCountryIcon_61i1r {
     color: var(--color-light-neutral-translucent-700);
 }

package/modern/components/flag-icon/component.js

@@ -2,7 +2,7 @@ import React from 'react';
 import cn from 'classnames';
 import { flagSprite } from './flagSprite.js';
 
-const styles = {"flagIcon":"international-phone-input__flagIcon_dxseh","flagPlaceholder":"international-phone-input__flagPlaceholder_dxseh"};
+const styles = {"flagIcon":"international-phone-input__flagIcon_mn1nz","flagPlaceholder":"international-phone-input__flagPlaceholder_mn1nz"};
 require('./index.css')
 
 /**

package/modern/components/flag-icon/index.css

@@ -1,4 +1,4 @@
-/* hash: 17zwu */
+/* hash: 9lu45 */
 :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
 } /* deprecated */ :root {
     --color-light-neutral-translucent-100: rgba(38, 55, 88, 0.06); /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
@@ -17,10 +17,10 @@
     --gap-3xs: 2px;
 } :root {
 } :root {
-} .international-phone-input__flagIcon_dxseh {
+} .international-phone-input__flagIcon_mn1nz {
     max-width: 24px;
     max-height: 24px;
-} .international-phone-input__flagPlaceholder_dxseh {
+} .international-phone-input__flagPlaceholder_mn1nz {
     width: 24px;
     height: 16px;
     max-height: 16px;

package/modern/components/select-field/component.js

@@ -5,7 +5,7 @@ import { useFocus } from '@alfalab/hooks';
 import { WorldMagnifierMIcon } from '@alfalab/icons-glyph/WorldMagnifierMIcon';
 import { FlagIcon } from '../flag-icon/component.js';
 
-const styles = {"component":"international-phone-input__component_1tk3e","flagIconContainer":"international-phone-input__flagIconContainer_1tk3e","emptyCountryIcon":"international-phone-input__emptyCountryIcon_1tk3e","disabled":"international-phone-input__disabled_1tk3e","inner":"international-phone-input__inner_1tk3e","size-64":"international-phone-input__size-64_1tk3e","size-72":"international-phone-input__size-72_1tk3e","focusVisible":"international-phone-input__focusVisible_1tk3e"};
+const styles = {"component":"international-phone-input__component_y5c1x","flagIconContainer":"international-phone-input__flagIconContainer_y5c1x","emptyCountryIcon":"international-phone-input__emptyCountryIcon_y5c1x","disabled":"international-phone-input__disabled_y5c1x","inner":"international-phone-input__inner_y5c1x","size-64":"international-phone-input__size-64_y5c1x","size-72":"international-phone-input__size-72_y5c1x","focusVisible":"international-phone-input__focusVisible_y5c1x"};
 require('./index.css')
 
 const EMPTY_COUNTRY_SELECT_FIELD = {

package/modern/components/select-field/index.css

@@ -1,4 +1,4 @@
-/* hash: 3r6mf */
+/* hash: a6qqq */
 :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
 } /* deprecated */ :root {
     --color-light-border-link: #2288fa;
@@ -21,33 +21,33 @@
 } :root {
     --focus-color: var(--color-light-border-link);
     --disabled-cursor: not-allowed;
-} .international-phone-input__component_1tk3e {
+} .international-phone-input__component_y5c1x {
     height: 100%;
     cursor: pointer;
     outline: none;
     position: relative;
-} .international-phone-input__flagIconContainer_1tk3e {
+} .international-phone-input__flagIconContainer_y5c1x {
     display: flex;
     justify-content: center;
     align-items: center;
     width: 24px;
     height: 24px;
     margin-right: var(--gap-2xs);
-} .international-phone-input__emptyCountryIcon_1tk3e {
+} .international-phone-input__emptyCountryIcon_y5c1x {
     color: var(--color-light-neutral-translucent-700);
-} .international-phone-input__disabled_1tk3e {
+} .international-phone-input__disabled_y5c1x {
     cursor: var(--disabled-cursor);
-} .international-phone-input__inner_1tk3e {
+} .international-phone-input__inner_y5c1x {
     position: relative;
     display: flex;
     align-items: center;
     height: 100%;
     padding-left: var(--gap-s);
     outline: none;
-} .international-phone-input__size-64_1tk3e .international-phone-input__inner_1tk3e,
-.international-phone-input__size-72_1tk3e .international-phone-input__inner_1tk3e {
+} .international-phone-input__size-64_y5c1x .international-phone-input__inner_y5c1x,
+.international-phone-input__size-72_y5c1x .international-phone-input__inner_y5c1x {
     padding-left: var(--gap-m);
-} .international-phone-input__focusVisible_1tk3e {
+} .international-phone-input__focusVisible_y5c1x {
     outline: 2px solid var(--focus-color);
     outline-offset: 2px;
 }

package/modern/types.d.ts

@@ -5,7 +5,7 @@ import { InputMobileProps } from "@alfalab/core-components-input/mobile";
 import { InputAutocompleteProps } from "@alfalab/core-components-input-autocomplete";
 import { InputAutocompleteDesktopProps } from "@alfalab/core-components-input-autocomplete/desktop";
 import { InputAutocompleteMobileProps } from "@alfalab/core-components-input-autocomplete/mobile";
-import { OptionShape } from "./typings-70284312";
+import { OptionShape } from "./typings-57569e57";
 import { SharedCountrySelectProps } from "./components/country-select/index";
 type Country = {
     name: string;

package/{cssm/typings-70284312.d.ts → modern/typings-57569e57.d.ts}

@@ -998,7 +998,7 @@ type BaseSelectProps = {
     /**
      * Дополнительный класс для поповера
      */
-    popperClassName?: string;
+    popperClassName?: PopoverProps['className'];
     /**
      * Список вариантов выбора
      */
@@ -1195,6 +1195,10 @@ type BaseSelectProps = {
      * Показывать OptionsList, если он пустой
      */
     showEmptyOptionsList?: boolean;
+    /**
+     * Дополнительные пропсы для Popover
+     */
+    popoverProps?: Omit<PopoverProps, 'update' | 'zIndex' | 'position' | 'className' | 'open' | 'anchorElement' | 'preventFlip' | 'dataTestId'>;
 };
 type FieldProps = {
     /**

package/modern/utils-89376c31.d.ts

@@ -1,5 +1,5 @@
 import { ReactNode, RefObject } from 'react';
-import { BaseSelectProps, GroupShape, OptionShape } from "./typings-70284312";
+import { BaseSelectProps, GroupShape, OptionShape } from "./typings-57569e57";
 declare const isGroup: (item: OptionShape | GroupShape) => item is GroupShape;
 declare const isOptionShape: (item: OptionShape | string | null) => item is OptionShape;
 declare const joinOptions: ({ selected, selectedMultiple, }: {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@alfalab/core-components-international-phone-input",
-    "version": "2.0.4",
+    "version": "2.0.6",
     "description": "",
     "keywords": [],
     "license": "MIT",
@@ -14,9 +14,9 @@
         "react": "^16.9.0 || ^17.0.1 || ^18.0.0"
     },
     "dependencies": {
-        "@alfalab/core-components-input-autocomplete": "12.0.4",
-        "@alfalab/core-components-input": "^14.3.2",
-        "@alfalab/core-components-select": "^17.3.4",
+        "@alfalab/core-components-input-autocomplete": "12.0.6",
+        "@alfalab/core-components-input": "^14.3.3",
+        "@alfalab/core-components-select": "^17.4.0",
         "@alfalab/core-components-shared": "^0.9.1",
         "@alfalab/core-components-mq": "^4.2.0",
         "@alfalab/hooks": "^1.13.0",

package/src/components/base-international-phone-input/Component.tsx

@@ -51,6 +51,8 @@ export const BaseInternationalPhoneInput = forwardRef<
             SelectComponent,
             view,
             clear: clearProp,
+            open: openProps,
+            defaultOpen,
             ...restProps
         },
         ref,
@@ -59,6 +61,10 @@ export const BaseInternationalPhoneInput = forwardRef<
         const inputRef = useRef<HTMLInputElement>(null);
         const inputWrapperRef = useRef<HTMLDivElement>(null);
 
+        const [open, setOpen] = useState<boolean | undefined>(defaultOpen);
+        const [openCountry, setOpenCountry] = useState<boolean | undefined>(
+            countrySelectProps?.defaultOpen,
+        );
         const [selectedCountry, setSelectedCountry] = useState<Country | undefined>(() =>
             findCountry(countriesData, value, defaultIso2, countryProp),
         );
@@ -139,6 +145,34 @@ export const BaseInternationalPhoneInput = forwardRef<
             // eslint-disable-next-line react-hooks/exhaustive-deps
         }, [value, maskOptions]);
 
+        const openPhoneSelect: InputAutocompleteProps['onOpen'] = (payload) => {
+            if (openProps === undefined) setOpen(payload.open);
+            restProps.onOpen?.(payload);
+        };
+
+        const openCountrySelect: InputAutocompleteProps['onOpen'] = (payload) => {
+            if (countrySelectProps?.open === undefined) setOpenCountry(payload.open);
+            countrySelectProps?.onOpen?.(payload);
+        };
+
+        const handlePhoneSelectOpen: InputAutocompleteProps['onOpen'] = (payload) => {
+            if (payload.open) {
+                openCountrySelect({ open: false });
+            }
+
+            openPhoneSelect(payload);
+        };
+
+        const handleCountrySelectOpen: InputAutocompleteProps['onOpen'] = (payload) => {
+            if (payload.open) {
+                openPhoneSelect({ open: false });
+            }
+            openCountrySelect(payload);
+        };
+
+        const showPhoneSelect = Boolean(open || openProps);
+        const showCountrySelect = Boolean(openCountry || countrySelectProps?.open);
+
         const renderCountrySelect = (compact = false) => (
             <CountrySelect
                 dataTestId={restProps?.dataTestId}
@@ -150,6 +184,8 @@ export const BaseInternationalPhoneInput = forwardRef<
                 country={country}
                 countries={compact ? [] : countriesData}
                 fieldWidth={inputWrapperRef.current?.getBoundingClientRect().width}
+                onOpen={handleCountrySelectOpen}
+                open={showCountrySelect}
             />
         );
 
@@ -172,6 +208,8 @@ export const BaseInternationalPhoneInput = forwardRef<
                 disabled={disabled}
                 options={filteredOptions}
                 value={value}
+                open={showPhoneSelect}
+                onOpen={handlePhoneSelectOpen}
                 onChange={handleOptionSelect}
                 onInput={(phone) => updatePhoneData(phone)}
                 inputProps={{

package/types.d.ts

@@ -5,7 +5,7 @@ import { InputMobileProps } from "@alfalab/core-components-input/mobile";
 import { InputAutocompleteProps } from "@alfalab/core-components-input-autocomplete";
 import { InputAutocompleteDesktopProps } from "@alfalab/core-components-input-autocomplete/desktop";
 import { InputAutocompleteMobileProps } from "@alfalab/core-components-input-autocomplete/mobile";
-import { OptionShape } from "./typings-70284312";
+import { OptionShape } from "./typings-57569e57";
 import { SharedCountrySelectProps } from "./components/country-select/index";
 type Country = {
     name: string;

package/{typings-70284312.d.ts → typings-57569e57.d.ts}

@@ -998,7 +998,7 @@ type BaseSelectProps = {
     /**
      * Дополнительный класс для поповера
      */
-    popperClassName?: string;
+    popperClassName?: PopoverProps['className'];
     /**
      * Список вариантов выбора
      */
@@ -1195,6 +1195,10 @@ type BaseSelectProps = {
      * Показывать OptionsList, если он пустой
      */
     showEmptyOptionsList?: boolean;
+    /**
+     * Дополнительные пропсы для Popover
+     */
+    popoverProps?: Omit<PopoverProps, 'update' | 'zIndex' | 'position' | 'className' | 'open' | 'anchorElement' | 'preventFlip' | 'dataTestId'>;
 };
 type FieldProps = {
     /**