@cloud-ru/ds-uikit-product-fields-predefined 2.0.30-preview-45edd66f.0 → 2.0.30-preview-20b4671f.0

package/README.md

@@ -206,13 +206,16 @@ export function FieldMaskControlled() {
 
 Маска ввода определяется выбранной страной (`country.mask`) и меняется при смене страны. Префикс с кодом страны добавляется к итоговому значению.
 
-#### options — настройка списка стран
+#### options — список стран
 
-Проп `options` (`CountrySettings`) ограничивает или переопределяет список (взаимоисключающие поля):
+Проп `options` (`CountrySettings`) обязателен, поля взаимоисключающие:
 
-- `includedCountries` — оставить только перечисленные страны.
-- `excludedCountries` — исключить перечисленные из встроенного списка.
-- `overriddenOptions` — полностью заменить список собственными опциями.
+- `includedCountries` — страны селектора (`RUSSIA_COUNTRY_CODE`, `BELARUS_COUNTRY_CODE`, …) в порядке передачи.
+- `overriddenOptions` — собственные элементы списка вместо встроенных стран.
+
+В бандл попадают флаги только переданных стран. Весь встроенный перечень — `ALL_COUNTRY_CODES`: с ним в бандл попадают все флаги (около 500 КБ в gzip), поэтому список стоит передавать явно.
+
+Миграция с 2.x: поле без `options` — `options={{ includedCountries: ALL_COUNTRY_CODES }}`; `excludedCountries` — `includedCountries: ALL_COUNTRY_CODES.filter(...)`.
 
 #### Size (default `m`)
 
@@ -222,11 +225,11 @@ export function FieldMaskControlled() {
 
 #### Базовый
 
-Телефон с полным списком стран и поиском.
+Телефон с полным списком стран (ALL_COUNTRY_CODES) и поиском.
 
 ```tsx
 import { PortalContextProvider } from '@cloud-ru/ds-portal-context';
-import { FieldPhone } from '@cloud-ru/ds-uikit-product-fields-predefined';
+import { ALL_COUNTRY_CODES, FieldPhone } from '@cloud-ru/ds-uikit-product-fields-predefined';
 import { useRef, useState } from 'react';
 
 export function FieldPhoneBasic() {
@@ -236,7 +239,13 @@ export function FieldPhoneBasic() {
   return (
     <PortalContextProvider root={hostRef}>
       <div ref={hostRef} style={{ position: 'relative', width: 320 }}>
-        <FieldPhone label='Телефон' value={value} onChange={setValue} searchPlaceholder='Поиск страны' />
+        <FieldPhone
+          label='Телефон'
+          value={value}
+          onChange={setValue}
+          searchPlaceholder='Поиск страны'
+          options={{ includedCountries: ALL_COUNTRY_CODES }}
+        />
       </div>
     </PortalContextProvider>
   );
@@ -325,7 +334,7 @@ export function FieldPhoneCountrySettings() {
 | `onKeyDown` | `KeyboardEventHandler<HTMLInputElement>` | — | Колбек обработки начала нажатия клавиши клавиатуры |
 | `onMouseDown` | `MouseEventHandler<HTMLInputElement>` | — | Колбек обработки нажатия кнопки мыши |
 | `onPaste` | `ClipboardEventHandler<HTMLInputElement>` | — | Колбек обработки вставки значения |
-| `options` | `CountrySettings` | — | Конфигурация для изменения стандартного списка стран |
+| `options` | `CountrySettings` | — | Список стран селектора: встроенные страны (`includedCountries`) или собственные элементы (`overriddenOptions`) |
 | `outline` | `boolean` | `true` | Разделитель между основным полем и слотами `elementBefore` / `elementAfter` |
 | `pattern` | `string` | — | Регулярное выражение валидного инпута |
 | `readonly` | `boolean` | `false` | Только для чтения <br/> Является ли поле доступным только для чтения |
@@ -345,7 +354,7 @@ export function FieldPhoneCountrySettings() {
 
 ##### Related types
 
-- `CountrySettings` = `({ overriddenOptions: FieldPhoneOptionsProps[]; } & { includedCountries?: undefined; excludedCountries?: undefined; }) | ({ includedCountries: Country[]; } & { overriddenOptions?: undefined; excludedCountries?: undefined; }) | ({ excludedCountries: Country[]; } & { overriddenOptions?: undefined; includedCountries?: undefined; })`
+- `CountrySettings` = `({ includedCountries: readonly Country[]; } & { overriddenOptions?: undefined; }) | ({ overriddenOptions: FieldPhoneOptionsProps[]; } & { includedCountries?: undefined; })`
 
 ### Адаптивность
 

package/dist/cjs/components/FieldPhone/FieldPhone.d.ts

@@ -7,7 +7,7 @@ export type FieldPhoneProps = Omit<FieldComboProps, 'prefix' | 'prefixIcon' | 'p
     /** Плейсхолдер поля поиска в выпадающем списке стран */
     searchPlaceholder?: string;
     onChangeCountry?(country: FieldPhoneOptionsProps): void;
-    /** Конфигурация для изменения стандартного списка стран */
-    options?: CountrySettings;
+    /** Список стран селектора: встроенные страны (`includedCountries`) или собственные элементы (`overriddenOptions`) */
+    options: CountrySettings;
 };
 export declare const FieldPhone: import("react").ForwardRefExoticComponent<Omit<FieldPhoneProps, "ref"> & import("react").RefAttributes<HTMLInputElement>>;

package/dist/cjs/components/FieldPhone/hooks/useCountries.d.ts

@@ -1,2 +1,2 @@
 import { CountrySettings, FieldPhoneOptionsProps } from '../types';
-export declare function useCountries(optionsSettings?: CountrySettings): FieldPhoneOptionsProps[];
+export declare function useCountries(optionsSettings: CountrySettings): FieldPhoneOptionsProps[];

package/dist/cjs/components/FieldPhone/hooks/useCountries.js

@@ -2,35 +2,19 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useCountries = useCountries;
 const react_1 = require("react");
-const countries_1 = require("../countries");
-const utils_1 = require("../utils");
 const useMapCountryToOptions_1 = require("./useMapCountryToOptions");
+function getOptionsKey({ includedCountries, overriddenOptions }) {
+    if (overriddenOptions) {
+        return overriddenOptions
+            .map(({ id, iso2, mask, content }) => [id, iso2, mask, content.label, content.caption].join(':'))
+            .join();
+    }
+    return includedCountries.map(({ value }) => value).join();
+}
 function useCountries(optionsSettings) {
     const mapCountryToOption = (0, useMapCountryToOptions_1.useMapCountryToOptions)();
-    const filterCountries = (0, react_1.useMemo)(() => {
-        if (!optionsSettings) {
-            return () => true;
-        }
-        const { includedCountries, excludedCountries } = optionsSettings;
-        const uniqueKey = 'value';
-        if (includedCountries) {
-            const includedSet = (0, utils_1.uniqueSet)(includedCountries, uniqueKey);
-            return (country) => includedSet.has(country[uniqueKey]);
-        }
-        if (excludedCountries) {
-            const excludedSet = (0, utils_1.uniqueSet)(excludedCountries, uniqueKey);
-            return (country) => !excludedSet.has(country[uniqueKey]);
-        }
-        return () => true;
-    }, [optionsSettings]);
-    return (0, react_1.useMemo)(() => {
-        if (optionsSettings?.overriddenOptions)
-            return optionsSettings.overriddenOptions;
-        return countries_1.ALL_COUNTRY_CODES.reduce((result, country) => {
-            if (filterCountries(country)) {
-                result.push(mapCountryToOption(country));
-            }
-            return result;
-        }, []);
-    }, [optionsSettings, filterCountries, mapCountryToOption]);
+    const optionsKey = getOptionsKey(optionsSettings);
+    return (0, react_1.useMemo)(() => optionsSettings.overriddenOptions ?? optionsSettings.includedCountries.map(mapCountryToOption), 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [optionsKey, mapCountryToOption]);
 }

package/dist/cjs/components/FieldPhone/types.d.ts

@@ -21,11 +21,12 @@ type OneOf<T extends object> = {
     };
 }[keyof T];
 export type CountrySettings = OneOf<{
-    /** Список элементов выпадающего списка со странами; переопределяет встроенный список пакета */
+    /**
+     * Страны селектора в порядке передачи. В бандл попадают флаги только переданных стран;
+     * весь встроенный перечень — `ALL_COUNTRY_CODES`.
+     */
+    includedCountries: readonly Country[];
+    /** Собственные элементы выпадающего списка вместо встроенных стран */
     overriddenOptions: FieldPhoneOptionsProps[];
-    /** Список стран, которые должны отображаться в селекторе (из встроенного перечня пакета) */
-    includedCountries: Country[];
-    /** Список стран, которые будут исключены из встроенного перечня пакета */
-    excludedCountries: Country[];
 }>;
 export {};

package/dist/cjs/components/FieldPhone/utils.d.ts

@@ -1,5 +1,4 @@
 import { FieldPhoneOptionsProps } from './types';
-export declare const uniqueSet: <T, K extends keyof T>(arr: T[], key: K) => Set<T[K]>;
 export declare const formatPhoneNumber: <T extends {
     caption: string;
     mask: string;

package/dist/cjs/components/FieldPhone/utils.js

@@ -1,11 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.handleAutoInsert = exports.formatPhoneNumber = exports.uniqueSet = void 0;
+exports.handleAutoInsert = exports.formatPhoneNumber = void 0;
 exports.detectCountryByPhone = detectCountryByPhone;
 const awesome_phonenumber_1 = require("awesome-phonenumber");
 const countries_1 = require("./countries");
-const uniqueSet = (arr, key) => new Set(arr.map(obj => obj[key]));
-exports.uniqueSet = uniqueSet;
 /* Приходит +79878887879/+7987****875, на основании mask возвращается +7 987-888-78-79/+7 987-***-*8-75 */
 const formatPhoneNumber = (phone, countries) => {
     const digits = phone.replace(/[^\d*]/g, '');

package/dist/esm/components/FieldPhone/FieldPhone.d.ts

@@ -7,7 +7,7 @@ export type FieldPhoneProps = Omit<FieldComboProps, 'prefix' | 'prefixIcon' | 'p
     /** Плейсхолдер поля поиска в выпадающем списке стран */
     searchPlaceholder?: string;
     onChangeCountry?(country: FieldPhoneOptionsProps): void;
-    /** Конфигурация для изменения стандартного списка стран */
-    options?: CountrySettings;
+    /** Список стран селектора: встроенные страны (`includedCountries`) или собственные элементы (`overriddenOptions`) */
+    options: CountrySettings;
 };
 export declare const FieldPhone: import("react").ForwardRefExoticComponent<Omit<FieldPhoneProps, "ref"> & import("react").RefAttributes<HTMLInputElement>>;

package/dist/esm/components/FieldPhone/countries.js

@@ -1432,4 +1432,4 @@ export const ALL_COUNTRY_CODES = [
     SOUTH_SUDAN_COUNTRY_CODE,
     JAPAN_COUNTRY_CODE,
 ];
-export const ENABLED_COUNTRY_CODES = ALL_COUNTRY_CODES.filter(({ enabled }) => enabled);
+export const ENABLED_COUNTRY_CODES = /* @__PURE__ */ ALL_COUNTRY_CODES.filter(({ enabled }) => enabled);

package/dist/esm/components/FieldPhone/hooks/useCountries.d.ts

@@ -1,2 +1,2 @@
 import { CountrySettings, FieldPhoneOptionsProps } from '../types.js';
-export declare function useCountries(optionsSettings?: CountrySettings): FieldPhoneOptionsProps[];
+export declare function useCountries(optionsSettings: CountrySettings): FieldPhoneOptionsProps[];

package/dist/esm/components/FieldPhone/hooks/useCountries.js

@@ -1,33 +1,17 @@
 import { useMemo } from 'react';
-import { ALL_COUNTRY_CODES } from '../countries.js';
-import { uniqueSet } from '../utils.js';
 import { useMapCountryToOptions } from './useMapCountryToOptions.js';
+function getOptionsKey({ includedCountries, overriddenOptions }) {
+    if (overriddenOptions) {
+        return overriddenOptions
+            .map(({ id, iso2, mask, content }) => [id, iso2, mask, content.label, content.caption].join(':'))
+            .join();
+    }
+    return includedCountries.map(({ value }) => value).join();
+}
 export function useCountries(optionsSettings) {
     const mapCountryToOption = useMapCountryToOptions();
-    const filterCountries = useMemo(() => {
-        if (!optionsSettings) {
-            return () => true;
-        }
-        const { includedCountries, excludedCountries } = optionsSettings;
-        const uniqueKey = 'value';
-        if (includedCountries) {
-            const includedSet = uniqueSet(includedCountries, uniqueKey);
-            return (country) => includedSet.has(country[uniqueKey]);
-        }
-        if (excludedCountries) {
-            const excludedSet = uniqueSet(excludedCountries, uniqueKey);
-            return (country) => !excludedSet.has(country[uniqueKey]);
-        }
-        return () => true;
-    }, [optionsSettings]);
-    return useMemo(() => {
-        if (optionsSettings?.overriddenOptions)
-            return optionsSettings.overriddenOptions;
-        return ALL_COUNTRY_CODES.reduce((result, country) => {
-            if (filterCountries(country)) {
-                result.push(mapCountryToOption(country));
-            }
-            return result;
-        }, []);
-    }, [optionsSettings, filterCountries, mapCountryToOption]);
+    const optionsKey = getOptionsKey(optionsSettings);
+    return useMemo(() => optionsSettings.overriddenOptions ?? optionsSettings.includedCountries.map(mapCountryToOption), 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [optionsKey, mapCountryToOption]);
 }

package/dist/esm/components/FieldPhone/types.d.ts

@@ -21,11 +21,12 @@ type OneOf<T extends object> = {
     };
 }[keyof T];
 export type CountrySettings = OneOf<{
-    /** Список элементов выпадающего списка со странами; переопределяет встроенный список пакета */
+    /**
+     * Страны селектора в порядке передачи. В бандл попадают флаги только переданных стран;
+     * весь встроенный перечень — `ALL_COUNTRY_CODES`.
+     */
+    includedCountries: readonly Country[];
+    /** Собственные элементы выпадающего списка вместо встроенных стран */
     overriddenOptions: FieldPhoneOptionsProps[];
-    /** Список стран, которые должны отображаться в селекторе (из встроенного перечня пакета) */
-    includedCountries: Country[];
-    /** Список стран, которые будут исключены из встроенного перечня пакета */
-    excludedCountries: Country[];
 }>;
 export {};

package/dist/esm/components/FieldPhone/utils.d.ts

@@ -1,5 +1,4 @@
 import { FieldPhoneOptionsProps } from './types.js';
-export declare const uniqueSet: <T, K extends keyof T>(arr: T[], key: K) => Set<T[K]>;
 export declare const formatPhoneNumber: <T extends {
     caption: string;
     mask: string;

package/dist/esm/components/FieldPhone/utils.js

@@ -1,6 +1,5 @@
 import { parsePhoneNumber } from 'awesome-phonenumber';
 import { ABKHAZIA_COUNTRY_CODE, RUSSIA_COUNTRY_CODE } from './countries.js';
-export const uniqueSet = (arr, key) => new Set(arr.map(obj => obj[key]));
 /* Приходит +79878887879/+7987****875, на основании mask возвращается +7 987-888-78-79/+7 987-***-*8-75 */
 export const formatPhoneNumber = (phone, countries) => {
     const digits = phone.replace(/[^\d*]/g, '');