@alfalab/core-components 33.0.0 → 33.1.0-beta.0

package/intl-phone-input/esm/components/index.js

@@ -1,8 +1,9 @@
 import 'react';
 import 'classnames';
+import '@alfalab/icons-glyph/WorldMagnifierMIcon';
 import 'react-merge-refs';
 import '@alfalab/hooks';
 export { FlagIcon } from './flag-icon/component.js';
-export { S as SelectField } from '../component-3ba6d67f.js';
+export { E as EMPTY_COUNTRY_SELECT_FIELD, S as SelectField } from '../component-955b98b0.js';
 import '../../../select/esm';
 export { CountriesSelect } from './select/component.js';

package/intl-phone-input/esm/components/select/component.d.ts

@@ -2,7 +2,7 @@ import { FC } from 'react';
 import { SelectProps } from "../../../../select";
 import { Country } from '@alfalab/utils';
 type CountriesSelectProps = Pick<SelectProps, 'size' | 'dataTestId' | 'disabled' | 'onChange' | 'preventFlip'> & {
-    selected: string;
+    selected?: string;
     countries: Country[];
     fieldWidth: number | null;
 };

package/intl-phone-input/esm/components/select/component.js

@@ -1,12 +1,13 @@
 import React, { useMemo, useCallback } from 'react';
 import 'classnames';
+import '@alfalab/icons-glyph/WorldMagnifierMIcon';
 import 'react-merge-refs';
 import '@alfalab/hooks';
 import { FlagIcon } from '../flag-icon/component.js';
-import { a as __assign, S as SelectField } from '../../component-3ba6d67f.js';
+import { a as __assign, E as EMPTY_COUNTRY_SELECT_FIELD, S as SelectField } from '../../component-955b98b0.js';
 import { VirtualOptionsList, Select } from '../../../../select/esm';
 
-var styles = {"component":"intl-phone-input__component_4au51","option":"intl-phone-input__option_4au51","flag":"intl-phone-input__flag_4au51","countryName":"intl-phone-input__countryName_4au51","dialCode":"intl-phone-input__dialCode_4au51"};
+var styles = {"component":"intl-phone-input__component_omy50","option":"intl-phone-input__option_omy50","flag":"intl-phone-input__flag_omy50","countryName":"intl-phone-input__countryName_omy50","dialCode":"intl-phone-input__dialCode_omy50"};
 require('./index.css');
 
 var CountriesSelect = function (_a) {
@@ -30,7 +31,7 @@ var CountriesSelect = function (_a) {
     var renderOptionsList = useCallback(function (props) { return (React.createElement("div", { style: { width: fieldWidth || 0 } },
         React.createElement(VirtualOptionsList, __assign({}, props)))); }, [fieldWidth]);
     return (React.createElement("div", { className: styles.component, onClick: function (event) { return event.stopPropagation(); } },
-        React.createElement(Select, { dataTestId: dataTestId, disabled: disabled, size: size, options: options, selected: selected, onChange: onChange, Field: SelectField, OptionsList: renderOptionsList, preventFlip: preventFlip })));
+        React.createElement(Select, { dataTestId: dataTestId, disabled: disabled, size: size, options: options, selected: selected || EMPTY_COUNTRY_SELECT_FIELD, onChange: onChange, Field: SelectField, OptionsList: renderOptionsList, preventFlip: preventFlip })));
 };
 
 export { CountriesSelect };

package/intl-phone-input/esm/components/select/index.css

@@ -1,4 +1,4 @@
-/* hash: 1doki */
+/* hash: igaqz */
 :root {
     --color-light-text-secondary: rgba(11, 31, 53, 0.7);
 }
@@ -17,24 +17,24 @@
 :root {
     --text-secondary-color: var(--color-light-text-secondary);
 }
-.intl-phone-input__component_4au51 {
+.intl-phone-input__component_omy50 {
     position: static;
     display: flex;
     min-width: initial;
     height: 100%;
 }
-.intl-phone-input__option_4au51 {
+.intl-phone-input__option_omy50 {
     display: flex;
     align-items: flex-start;
 }
-.intl-phone-input__flag_4au51 {
+.intl-phone-input__flag_omy50 {
     flex-shrink: 0;
     margin-top: var(--gap-2xs);
     margin-right: var(--gap-xs);
 }
-.intl-phone-input__countryName_4au51 {
+.intl-phone-input__countryName_omy50 {
     margin-right: var(--gap-xs);
 }
-.intl-phone-input__dialCode_4au51 {
+.intl-phone-input__dialCode_omy50 {
     color: var(--text-secondary-color);
 }

package/intl-phone-input/esm/components/select/index.js

@@ -1,8 +1,9 @@
 import 'react';
 import 'classnames';
+import '@alfalab/icons-glyph/WorldMagnifierMIcon';
 import 'react-merge-refs';
 import '@alfalab/hooks';
 import '../flag-icon/component.js';
-import '../../component-3ba6d67f.js';
+import '../../component-955b98b0.js';
 import '../../../../select/esm';
 export { CountriesSelect } from './component.js';

package/intl-phone-input/esm/components/select-field/component.js

@@ -1,6 +1,7 @@
 import 'react';
 import 'classnames';
+import '@alfalab/icons-glyph/WorldMagnifierMIcon';
 import 'react-merge-refs';
 import '@alfalab/hooks';
 import '../flag-icon/component.js';
-export { S as SelectField } from '../../component-3ba6d67f.js';
+export { E as EMPTY_COUNTRY_SELECT_FIELD, S as SelectField } from '../../component-955b98b0.js';

package/intl-phone-input/esm/components/select-field/index.css

@@ -1,6 +1,7 @@
-/* hash: 1cvq2 */
+/* hash: crche */
 :root {
     --color-light-border-link: #007aff;
+    --color-light-graphic-secondary: #6d7986;
 }
 :root {
 
@@ -19,13 +20,13 @@
     --focus-color: var(--color-light-border-link);
     --disabled-cursor: not-allowed;
 }
-.intl-phone-input__component_1bvo2 {
+.intl-phone-input__component_1uzsy {
     height: 100%;
     cursor: pointer;
     outline: none;
     position: relative;
 }
-.intl-phone-input__flagIconContainer_1bvo2 {
+.intl-phone-input__flagIconContainer_1uzsy {
     display: flex;
     justify-content: center;
     align-items: center;
@@ -33,10 +34,13 @@
     height: 24px;
     margin-right: var(--gap-2xs);
 }
-.intl-phone-input__disabled_1bvo2 {
+.intl-phone-input__emptyCountryIcon_1uzsy {
+    color: var(--color-light-graphic-secondary);
+}
+.intl-phone-input__disabled_1uzsy {
     cursor: var(--disabled-cursor);
 }
-.intl-phone-input__inner_1bvo2 {
+.intl-phone-input__inner_1uzsy {
     position: relative;
     display: flex;
     align-items: center;
@@ -44,11 +48,11 @@
     padding-left: var(--gap-s);
     outline: none;
 }
-.intl-phone-input__l_1bvo2 .intl-phone-input__inner_1bvo2,
-.intl-phone-input__xl_1bvo2 .intl-phone-input__inner_1bvo2 {
+.intl-phone-input__l_1uzsy .intl-phone-input__inner_1uzsy,
+.intl-phone-input__xl_1uzsy .intl-phone-input__inner_1uzsy {
     padding-left: var(--gap-m);
 }
-.intl-phone-input__focusVisible_1bvo2 {
+.intl-phone-input__focusVisible_1uzsy {
     outline: 2px solid var(--focus-color);
     outline-offset: 2px;
 }

package/intl-phone-input/esm/components/select-field/index.d.ts

@@ -1 +1 @@
-export * from "../../component-3ba6d67f";
+export * from "../../component-955b98b0";

package/intl-phone-input/esm/components/select-field/index.js

@@ -1,6 +1,7 @@
 import 'react';
 import 'classnames';
+import '@alfalab/icons-glyph/WorldMagnifierMIcon';
 import 'react-merge-refs';
 import '@alfalab/hooks';
 import '../flag-icon/component.js';
-export { S as SelectField } from '../../component-3ba6d67f.js';
+export { E as EMPTY_COUNTRY_SELECT_FIELD, S as SelectField } from '../../component-955b98b0.js';

package/intl-phone-input/esm/index.css

@@ -1,8 +1,32 @@
-/* hash: nsgxb */
-.intl-phone-input__addons_1p3pa {
-    padding-left: 0;
+/* hash: 1qce8 */
+:root {
+    --color-light-graphic-secondary: #6d7986;
 }
+:root {
+
+    /* Hard */
+
+    /* Up */
 
-.intl-phone-input__l_1p3pa .intl-phone-input__addons_1p3pa, .intl-phone-input__xl_1p3pa .intl-phone-input__addons_1p3pa {
+    /* Hard up */
+}
+:root {
+    --gap-s: 12px;
+}
+.intl-phone-input__addons_41rpn {
+    padding-left: 0;
+}
+.intl-phone-input__l_41rpn .intl-phone-input__addons_41rpn, .intl-phone-input__xl_41rpn .intl-phone-input__addons_41rpn {
         padding-left: 0;
     }
+.intl-phone-input__flagIconWrapper_41rpn {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 24px;
+    height: 24px;
+    margin-left: var(--gap-s);
+}
+.intl-phone-input__emptyCountryIcon_41rpn {
+    color: var(--color-light-graphic-secondary);
+}

package/intl-phone-input/esm/index.js

@@ -1,9 +1,10 @@
 import 'react';
 import 'classnames';
+import '@alfalab/icons-glyph/WorldMagnifierMIcon';
 import 'react-merge-refs';
 import '@alfalab/hooks';
 import './components/flag-icon/component.js';
-import './component-3ba6d67f.js';
+import './component-955b98b0.js';
 import '@alfalab/utils';
 import '../../input-autocomplete/esm';
 import '../../select/esm';
@@ -11,4 +12,5 @@ import './components/select/component.js';
 import './utils/format-phone-with-unclearable-country-code.js';
 import './utils/calculateCaretPos.js';
 import './useCaretAvoidCountryCode.js';
+import './utils/preparePasteData.js';
 export { IntlPhoneInput } from './component.js';

package/intl-phone-input/esm/utils/preparePasteData.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Подготовка данных для вставки из буфера обмена.
+ * @param phoneValue Телефон уже введённый в поле ввода.
+ * @param phoneFromBuffer Текст номера телефона из буфера обмена.
+ * @param input Input в который осуществляется вставка.
+ */
+declare function preparePasteData(phoneValue: string, phoneFromBuffer: string, selectionStart?: number, selectionEnd?: number): string;
+export { preparePasteData };

package/intl-phone-input/esm/utils/preparePasteData.js

@@ -0,0 +1,51 @@
+/**
+ * Подготовка данных для вставки из буфера обмена.
+ * @param phoneValue Телефон уже введённый в поле ввода.
+ * @param phoneFromBuffer Текст номера телефона из буфера обмена.
+ * @param input Input в который осуществляется вставка.
+ */
+function preparePasteData(phoneValue, phoneFromBuffer, selectionStart, selectionEnd) {
+    var trimNuber = phoneFromBuffer.trim();
+    var cutNumberWithPlus = trimNuber.replace(/[^+\d]/g, '');
+    var isTextHavePlus = cutNumberWithPlus[0] === '+';
+    var cutNumber = trimNuber.replace(/[^\d]/g, '');
+    var isRuNumberInBuffer = cutNumber[0] === '7' || cutNumber[0] === '8';
+    var resultNumber = '';
+    // вставка в поле c "+"
+    if (phoneValue === '+') {
+        resultNumber = "+" + cutNumber;
+        // вставка в поле, в которое введена часть номера
+    }
+    else if (phoneValue) {
+        var startText = phoneValue.substring(0, selectionStart || 0);
+        var endText = phoneValue.substring(selectionEnd || 0);
+        var isSelectPlus = selectionStart === 0 && selectionEnd !== 0;
+        if (selectionStart === 0 && selectionEnd === 0 && !isTextHavePlus) {
+            resultNumber = ("+" + cutNumber + phoneValue.substring(1)).replace(/[^+\d]/g, '');
+        }
+        else if (!isTextHavePlus && !isSelectPlus) {
+            resultNumber = ("" + startText + cutNumber + endText).replace(/[^+\d]/g, '');
+        }
+        else if (isTextHavePlus && isSelectPlus) {
+            resultNumber = ("" + cutNumberWithPlus + endText).replace(/[^+\d]/g, '');
+        }
+        // вставка в пустое поле
+    }
+    else if (!phoneValue) {
+        // вставка номера начинающегося с "+" в пустое поле
+        if (isTextHavePlus) {
+            resultNumber = cutNumberWithPlus;
+            // вставка номера начинающегося с "7" или "8" в пустое поле
+        }
+        else if (isRuNumberInBuffer) {
+            resultNumber = "+7" + cutNumber.substring(1);
+            // вставка номера начинающегося НЕ с "7", "8", "+" в пустое поле
+        }
+        else {
+            resultNumber = "+7" + cutNumber;
+        }
+    }
+    return resultNumber;
+}
+
+export { preparePasteData };

package/intl-phone-input/index.css

@@ -1,8 +1,32 @@
-/* hash: nsgxb */
-.intl-phone-input__addons_1p3pa {
-    padding-left: 0;
+/* hash: 1qce8 */
+:root {
+    --color-light-graphic-secondary: #6d7986;
 }
+:root {
+
+    /* Hard */
+
+    /* Up */
 
-.intl-phone-input__l_1p3pa .intl-phone-input__addons_1p3pa, .intl-phone-input__xl_1p3pa .intl-phone-input__addons_1p3pa {
+    /* Hard up */
+}
+:root {
+    --gap-s: 12px;
+}
+.intl-phone-input__addons_41rpn {
+    padding-left: 0;
+}
+.intl-phone-input__l_41rpn .intl-phone-input__addons_41rpn, .intl-phone-input__xl_41rpn .intl-phone-input__addons_41rpn {
         padding-left: 0;
     }
+.intl-phone-input__flagIconWrapper_41rpn {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 24px;
+    height: 24px;
+    margin-left: var(--gap-s);
+}
+.intl-phone-input__emptyCountryIcon_41rpn {
+    color: var(--color-light-graphic-secondary);
+}

package/intl-phone-input/index.js

@@ -1,10 +1,11 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
-require('./component-975dc081.js');
+require('./component-c1c38c6b.js');
 require('react');
 require('classnames');
 require('@alfalab/utils');
 require('../input-autocomplete');
+require('@alfalab/icons-glyph/WorldMagnifierMIcon');
 require('react-merge-refs');
 require('@alfalab/hooks');
 require('./components/flag-icon/component.js');
@@ -13,6 +14,7 @@ require('./components/select/component.js');
 require('./utils/format-phone-with-unclearable-country-code.js');
 require('./utils/calculateCaretPos.js');
 require('./useCaretAvoidCountryCode.js');
+require('./utils/preparePasteData.js');
 var component = require('./component.js');
 
 

package/intl-phone-input/modern/component.d.ts

@@ -25,7 +25,7 @@ type IntlPhoneInputProps = Partial<Omit<InputAutocompleteProps, 'onChange'>> & P
     /**
      * Обработчик события изменения страны
      */
-    onCountryChange?: (countryCode: CountryCode) => void;
+    onCountryChange?: (countryCode?: CountryCode) => void;
     /**
      * Список стран
      */
@@ -38,6 +38,10 @@ type IntlPhoneInputProps = Partial<Omit<InputAutocompleteProps, 'onChange'>> & P
      * Ограничение длин вводимых номеров по странам.
      */
     maxPhoneLen?: MaxPhoneLenByCountry;
+    staticFlag?: boolean;
+    canBeEmptyCountry?: boolean;
+    ruNumberPriority?: boolean;
+    canClear?: boolean;
 };
 declare const IntlPhoneInput: React.ForwardRefExoticComponent<Partial<Pick<InputAutocompleteProps, "block" | "size" | "className" | "fieldClassName" | "disabled" | "error" | "hint" | "label" | "labelView" | "dataTestId" | "id" | "placeholder" | "onFocus" | "onBlur" | "onInput" | "onScroll" | "value" | "preventFlip" | "popperClassName" | "open" | "name" | "options" | "multiple" | "readOnly" | "success" | "selected" | "valueRenderer" | "Optgroup" | "optionsListWidth" | "visibleOptions" | "Arrow" | "optionGroupClassName" | "Option" | "inputProps" | "optionsListClassName" | "optionClassName" | "autocomplete" | "allowUnselect" | "closeOnSelect" | "circularNavigation" | "defaultOpen" | "popoverPosition" | "optionsSize" | "fieldProps" | "optionsListProps" | "optionProps" | "onOpen" | "OptionsList" | "updatePopover" | "zIndexPopover" | "showEmptyOptionsList" | "Input">> & Pick<SelectProps, "preventFlip"> & {
     /**
@@ -59,7 +63,7 @@ declare const IntlPhoneInput: React.ForwardRefExoticComponent<Partial<Pick<Input
     /**
      * Обработчик события изменения страны
      */
-    onCountryChange?: ((countryCode: CountryCode) => void) | undefined;
+    onCountryChange?: ((countryCode?: "AC" | "AD" | "AE" | "AF" | "AG" | "AI" | "AL" | "AM" | "AO" | "AR" | "AS" | "AT" | "AU" | "AW" | "AX" | "AZ" | "BA" | "BB" | "BD" | "BE" | "BF" | "BG" | "BH" | "BI" | "BJ" | "BL" | "BM" | "BN" | "BO" | "BQ" | "BR" | "BS" | "BT" | "BW" | "BY" | "BZ" | "CA" | "CC" | "CD" | "CF" | "CG" | "CH" | "CI" | "CK" | "CL" | "CM" | "CN" | "CO" | "CR" | "CU" | "CV" | "CW" | "CX" | "CY" | "CZ" | "DE" | "DJ" | "DK" | "DM" | "DO" | "DZ" | "EC" | "EE" | "EG" | "EH" | "ER" | "ES" | "ET" | "FI" | "FJ" | "FK" | "FM" | "FO" | "FR" | "GA" | "GB" | "GD" | "GE" | "GF" | "GG" | "GH" | "GI" | "GL" | "GM" | "GN" | "GP" | "GQ" | "GR" | "GT" | "GU" | "GW" | "GY" | "HK" | "HN" | "HR" | "HT" | "HU" | "ID" | "IE" | "IL" | "IM" | "IN" | "IO" | "IQ" | "IR" | "IS" | "IT" | "JE" | "JM" | "JO" | "JP" | "KE" | "KG" | "KH" | "KI" | "KM" | "KN" | "KP" | "KR" | "KW" | "KY" | "KZ" | "LA" | "LB" | "LC" | "LI" | "LK" | "LR" | "LS" | "LT" | "LU" | "LV" | "LY" | "MA" | "MC" | "MD" | "ME" | "MF" | "MG" | "MH" | "MK" | "ML" | "MM" | "MN" | "MO" | "MP" | "MQ" | "MR" | "MS" | "MT" | "MU" | "MV" | "MW" | "MX" | "MY" | "MZ" | "NA" | "NC" | "NE" | "NF" | "NG" | "NI" | "NL" | "NO" | "NP" | "NR" | "NU" | "NZ" | "OM" | "PA" | "PE" | "PF" | "PG" | "PH" | "PK" | "PL" | "PM" | "PR" | "PS" | "PT" | "PW" | "PY" | "QA" | "RE" | "RO" | "RS" | "RU" | "RW" | "SA" | "SB" | "SC" | "SD" | "SE" | "SG" | "SH" | "SI" | "SJ" | "SK" | "SL" | "SM" | "SN" | "SO" | "SR" | "SS" | "ST" | "SV" | "SX" | "SY" | "SZ" | "TA" | "TC" | "TD" | "TG" | "TH" | "TJ" | "TK" | "TL" | "TM" | "TN" | "TO" | "TR" | "TT" | "TV" | "TW" | "TZ" | "UA" | "UG" | "US" | "UY" | "UZ" | "VA" | "VC" | "VE" | "VG" | "VI" | "VN" | "VU" | "WF" | "WS" | "XK" | "YE" | "YT" | "ZA" | "ZM" | "ZW" | undefined) => void) | undefined;
     /**
      * Список стран
      */
@@ -72,5 +76,9 @@ declare const IntlPhoneInput: React.ForwardRefExoticComponent<Partial<Pick<Input
      * Ограничение длин вводимых номеров по странам.
      */
     maxPhoneLen?: Record<string, number> | undefined;
+    staticFlag?: boolean | undefined;
+    canBeEmptyCountry?: boolean | undefined;
+    ruNumberPriority?: boolean | undefined;
+    canClear?: boolean | undefined;
 } & React.RefAttributes<HTMLInputElement>>;
 export { IntlPhoneInputProps, IntlPhoneInput };