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

package/README.md

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

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

@@ -21,12 +21,11 @@ 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,4 +1,5 @@
 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,9 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.handleAutoInsert = exports.formatPhoneNumber = void 0;
+exports.handleAutoInsert = exports.formatPhoneNumber = exports.uniqueSet = 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;
-    /** Список стран селектора: встроенные страны (`includedCountries`) или собственные элементы (`overriddenOptions`) */
-    options: CountrySettings;
+    /** Конфигурация для изменения стандартного списка стран */
+    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 = /* @__PURE__ */ ALL_COUNTRY_CODES.filter(({ enabled }) => enabled);
+export const ENABLED_COUNTRY_CODES = 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,17 +1,33 @@
 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 optionsKey = getOptionsKey(optionsSettings);
-    return useMemo(() => optionsSettings.overriddenOptions ?? optionsSettings.includedCountries.map(mapCountryToOption), 
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [optionsKey, mapCountryToOption]);
+    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]);
 }

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

@@ -21,12 +21,11 @@ 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,4 +1,5 @@
 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,5 +1,6 @@
 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, '');