@cloud-ru/ds-uikit-product-fields-predefined 1.0.0

package/src/components/FieldPhone/hooks/index.ts

@@ -0,0 +1,2 @@
+export * from './useCountries';
+export * from './useMapCountryToOptions';

package/src/components/FieldPhone/hooks/useCountries.ts

@@ -0,0 +1,40 @@
+import { useMemo } from 'react';
+
+import { ALL_COUNTRY_CODES } from '../countries';
+import { Country, CountrySettings, FieldPhoneOptionsProps } from '../types';
+import { uniqueSet } from '../utils';
+import { useMapCountryToOptions } from './useMapCountryToOptions';
+
+export function useCountries(optionsSettings?: CountrySettings): FieldPhoneOptionsProps[] {
+  const mapCountryToOption = useMapCountryToOptions();
+
+  const filterCountries = useMemo(() => {
+    if (!optionsSettings) {
+      return () => true;
+    }
+
+    const { includedCountries, excludedCountries } = optionsSettings;
+    const uniqueKey = 'value' satisfies keyof Country;
+
+    if (includedCountries) {
+      const includedSet = uniqueSet(includedCountries, uniqueKey);
+      return (country: Country) => includedSet.has(country[uniqueKey]);
+    }
+    if (excludedCountries) {
+      const excludedSet = uniqueSet(excludedCountries, uniqueKey);
+      return (country: Country) => !excludedSet.has(country[uniqueKey]);
+    }
+    return () => true;
+  }, [optionsSettings]);
+
+  return useMemo(() => {
+    if (optionsSettings?.overriddenOptions) return optionsSettings.overriddenOptions;
+
+    return ALL_COUNTRY_CODES.reduce<FieldPhoneOptionsProps[]>((result, country) => {
+      if (filterCountries(country)) {
+        result.push(mapCountryToOption(country));
+      }
+      return result;
+    }, []);
+  }, [optionsSettings, filterCountries, mapCountryToOption]);
+}

package/src/components/FieldPhone/hooks/useMapCountryToOptions.ts

@@ -0,0 +1,25 @@
+import { createElement, useCallback } from 'react';
+
+import { fieldsPredefinedLocale } from '../../../locale';
+import { FLAG_ICON_SIZE } from '../constants';
+import { Country, FieldPhoneOptionsProps } from '../types';
+
+export function useMapCountryToOptions() {
+  const { t } = fieldsPredefinedLocale.useTranslations();
+
+  const mapCountryToOption = useCallback(
+    ({ value: id, mask, caption, icon, iso2 }: Country): FieldPhoneOptionsProps => ({
+      id,
+      mask,
+      content: {
+        label: t(`FieldPhone.${id}`),
+        caption,
+      },
+      beforeContent: createElement(icon, { size: FLAG_ICON_SIZE }),
+      iso2,
+    }),
+    [t],
+  );
+
+  return mapCountryToOption;
+}

package/src/components/FieldPhone/index.ts

@@ -0,0 +1,5 @@
+export * from './countries';
+export * from './FieldPhone';
+export * from './hooks';
+export * from './types';
+export { detectCountryByPhone, formatPhoneNumber } from './utils';

package/src/components/FieldPhone/styles.module.scss

@@ -0,0 +1,9 @@
+@use '@cloud-ru/ds-figma-variables/build/scss/styles/styles.module' as base;
+
+.fieldPhone {
+  // Маска рендерится всегда (imask lazy:false) — в пустом поле приглушаем её как плейсхолдер.
+  // `.fieldPhone` — на корне FieldDecorator, `data-empty` — на вложенном input, поэтому селектор потомковый.
+  input[data-empty] {
+    color: base.$sn-theme-color-available-version-textDisabled;
+  }
+}

package/src/components/FieldPhone/types.ts

@@ -0,0 +1,32 @@
+import { ReactNode } from 'react';
+import { useIMask } from 'react-imask';
+
+import { ALL_COUNTRY_CODES } from './countries';
+
+export type FieldPhoneOptionsProps = {
+  id: string;
+  beforeContent: ReactNode;
+  content: {
+    label: string;
+    caption: string;
+  };
+  mask: string;
+  iso2: string;
+};
+
+export type MaskOptions = Parameters<typeof useIMask>[0];
+
+export type Country = (typeof ALL_COUNTRY_CODES)[number];
+
+type OneOf<T extends object> = {
+  [K in keyof T]: { [P in K]: T[P] } & { [P in Exclude<keyof T, K>]?: never };
+}[keyof T];
+
+export type CountrySettings = OneOf<{
+  /** Список элементов выпадающего списка со странами; переопределяет встроенный список пакета */
+  overriddenOptions: FieldPhoneOptionsProps[];
+  /** Список стран, которые должны отображаться в селекторе (из встроенного перечня пакета) */
+  includedCountries: Country[];
+  /** Список стран, которые будут исключены из встроенного перечня пакета */
+  excludedCountries: Country[];
+}>;

package/src/components/FieldPhone/utils.ts

@@ -0,0 +1,112 @@
+import { parsePhoneNumber } from 'awesome-phonenumber';
+
+import { ABKHAZIA_COUNTRY_CODE, RUSSIA_COUNTRY_CODE } from './countries';
+import { FieldPhoneOptionsProps } from './types';
+
+export const uniqueSet = <T, K extends keyof T>(arr: T[], key: K): Set<T[K]> => new Set(arr.map(obj => obj[key]));
+
+/* Приходит +79878887879/+7987****875, на основании mask возвращается +7 987-888-78-79/+7 987-***-*8-75 */
+export const formatPhoneNumber = <T extends { caption: string; mask: string }>(
+  phone: string,
+  countries: readonly T[],
+): string => {
+  const digits = phone.replace(/[^\d*]/g, '');
+
+  const country = countries.find(item => digits.startsWith(item.caption.replace('+', '')));
+
+  if (!country) {
+    return phone;
+  }
+
+  const countryCode = country.caption.replace('+', '');
+  const restNumber = digits.slice(countryCode.length);
+
+  let formatted = '';
+  let index = 0;
+  for (const char of country.mask) {
+    if (char === 'X') {
+      formatted += restNumber.charAt(index) || '';
+      index++;
+    } else {
+      formatted += char;
+    }
+  }
+
+  return `${country.caption} ${formatted}`;
+};
+
+const byId = (id: string) => (option: FieldPhoneOptionsProps) => option.id === id;
+
+export function detectCountryByPhone(text: string, options: FieldPhoneOptionsProps[]) {
+  const cleaned = text.replace(/[^\d+]/g, '');
+
+  const withPlus = cleaned.startsWith('+') ? cleaned : `+${cleaned}`;
+  const parsedNumber = parsePhoneNumber(withPlus);
+  const regionCode = parsedNumber.regionCode;
+
+  /* У Абхазии iso2 совпадает с Россией */
+  if (/^\+?7(840|940)/.test(cleaned)) {
+    let russia: FieldPhoneOptionsProps | undefined;
+
+    for (const option of options) {
+      const id = option.id;
+      const iso = option.iso2;
+
+      if (id === ABKHAZIA_COUNTRY_CODE.value) {
+        return option;
+      }
+      if (!russia && (id === RUSSIA_COUNTRY_CODE.value || iso === RUSSIA_COUNTRY_CODE.iso2)) {
+        russia = option;
+      }
+    }
+
+    return russia;
+  }
+
+  if (regionCode === RUSSIA_COUNTRY_CODE.iso2) {
+    return options.find(byId(RUSSIA_COUNTRY_CODE.value));
+  }
+
+  return options.find(opt => opt.iso2 === regionCode);
+}
+
+export const handleAutoInsert = ({
+  raw,
+  onValueChange,
+  onCountryChange,
+  country,
+  options,
+}: {
+  raw: string;
+  onValueChange(str: string): void;
+  onCountryChange(country: FieldPhoneOptionsProps): void;
+  country?: FieldPhoneOptionsProps;
+  options: FieldPhoneOptionsProps[];
+}) => {
+  if (!raw) return;
+
+  const parsed = parsePhoneNumber(raw);
+  const ok = parsed.valid || parsed.possible;
+  if (!ok) return;
+
+  const detected = detectCountryByPhone(raw, options);
+  if (!detected) return;
+
+  let national = parsed.number?.significant.replace(/\D/g, '');
+  if (!national) return;
+
+  const nextNationalLength = (detected.mask?.match(/X/g) ?? []).length;
+  if (nextNationalLength && national.length > nextNationalLength) {
+    national = national.slice(-nextNationalLength);
+  }
+
+  const fullDigits = (parsed.number?.e164 ?? raw).replace(/\D/g, '');
+  const countryCodeDigits = String(parsed.countryCode ?? '');
+  const expected = countryCodeDigits.length + nextNationalLength;
+  if (fullDigits.length < expected) return;
+
+  if (detected.id !== country?.id) {
+    onCountryChange(detected);
+  }
+  onValueChange(national);
+};

package/src/components/FieldSelectCreate/FieldSelectCreate.tsx

@@ -0,0 +1,133 @@
+import { APPEARANCE, Button, ICON_POSITION, VIEW } from '@cloud-ru/ds-button';
+import { Drawer, DrawerProps, POSITION, Position } from '@cloud-ru/ds-drawer';
+import { FieldSelect } from '@cloud-ru/ds-fields';
+import { PlusSVG } from '@cloud-ru/ds-icons/interface/system';
+import { Modal, ModalProps } from '@cloud-ru/ds-modal';
+import { Tooltip } from '@cloud-ru/ds-tooltip';
+import { extractSupportProps } from '@cloud-ru/ds-utils';
+import cn from 'classnames';
+import { forwardRef, ReactElement, useCallback } from 'react';
+
+import { TEST_IDS } from '../../constants';
+import { useOpen } from '../../hooks';
+import { fieldsPredefinedLocale } from '../../locale';
+import { CREATE_LAYOUT_TYPE, PERMISSION } from './constants';
+import { SelectFooter } from './helperComponents/SelectFooter';
+import styles from './styles.module.scss';
+import { FieldSelectCreateProps } from './types';
+import { useSelectDataStates } from './useSelectDataStates';
+
+/**
+ * Поле выбора с действием «создать»: `FieldSelect` из `@cloud-ru/ds-fields` + встроенная форма создания опции
+ * в модалке или дровере (`createLayoutType`). Кнопка «Создать <entityName>» — под полем и в футере
+ * дроплиста (`SelectFooter`). Пустые состояния и тексты строятся из `entityName`. Доступ рулит `permission`.
+ * На mobile дроплист и модалка/дровер — `BottomSheet` (адаптив `@ds`), своего пропа `layoutType` нет.
+ */
+export const FieldSelectCreate = forwardRef<HTMLInputElement, FieldSelectCreateProps>(function FieldSelectCreate(
+  {
+    selectProps,
+    createLayoutProps,
+    createLayoutType = CREATE_LAYOUT_TYPE.Drawer,
+    entityName,
+    submitHandler,
+    onRefetch,
+    className,
+    afterClose,
+    entityIcon,
+    permission = PERMISSION.CanCreate,
+    ...rest
+  },
+  ref,
+) {
+  const { t } = fieldsPredefinedLocale.useTranslations();
+  const { isOpen, onOpen, onClose } = useOpen();
+  const selectDataStates = useSelectDataStates({ entityName, entityIcon, onRefetch });
+
+  const size = selectProps.size ?? 'm';
+
+  const isNone = permission === PERMISSION.None;
+  const canCreate = permission === PERMISSION.CanCreate;
+
+  const handleClose = useCallback(() => {
+    onClose();
+    afterClose?.();
+  }, [afterClose, onClose]);
+
+  const handleCreate = useCallback(async () => {
+    const newValue = await submitHandler();
+    // Автовыбор новой опции — в single-режиме; в multiple выбор оставляем потребителю.
+    if (typeof newValue === 'string' && selectProps.selection !== 'multiple') {
+      selectProps.onChange?.(newValue);
+    }
+    handleClose();
+  }, [handleClose, selectProps, submitHandler]);
+
+  const createButtonLabel = `${t('FieldSelectCreate.create')} ${entityName.single.toLocaleLowerCase()}`;
+  const noPermissionTip = t('FieldSelectCreate.noPermission');
+
+  // createLayoutType и createLayoutProps дискриминируются союзом, но при деструктуризации корреляция
+  // теряется — поэтому приводим тип поверхности к целевому внутри ветки (как в легаси).
+  const layoutProps = {
+    ...createLayoutProps,
+    open: isOpen,
+    onClose: handleClose,
+    'data-test-id': TEST_IDS.fieldSelectCreateSurface,
+    approveButton: { label: t('FieldSelectCreate.create'), onClick: handleCreate },
+    cancelButton: { label: t('FieldSelectCreate.cancel'), onClick: handleClose },
+  };
+
+  const formLayout =
+    createLayoutType === CREATE_LAYOUT_TYPE.Modal ? (
+      <Modal {...(layoutProps as ModalProps)} />
+    ) : (
+      <Drawer
+        {...(layoutProps as DrawerProps)}
+        position={(createLayoutProps as { position?: Position }).position ?? POSITION.Right}
+      />
+    );
+
+  const withTip = (node: ReactElement, show: boolean) =>
+    show ? <Tooltip tip={noPermissionTip}>{node}</Tooltip> : node;
+
+  return (
+    <div
+      className={cn(styles.fieldSelectCreate, className)}
+      {...extractSupportProps(rest)}
+      data-test-id={TEST_IDS.fieldSelectCreate}
+    >
+      {withTip(
+        <FieldSelect
+          {...selectProps}
+          ref={ref}
+          size={size}
+          disabled={isNone || selectProps.disabled}
+          placeholder={selectProps.placeholder ?? t('FieldSelectCreate.placeholder')}
+          {...selectDataStates}
+          footer={
+            // В состоянии ошибки показываем только «Обновить» из errorDataState — без футера «Создать» (по макету).
+            selectProps.dataError ? undefined : (
+              <SelectFooter onClick={onOpen} createButtonLabel={createButtonLabel} canCreate={canCreate} />
+            )
+          }
+        />,
+        isNone,
+      )}
+      {withTip(
+        <Button
+          view={VIEW.Function}
+          appearance={APPEARANCE.Neutral}
+          label={createButtonLabel}
+          icon={<PlusSVG />}
+          iconPosition={ICON_POSITION.Before}
+          onClick={onOpen}
+          size={size}
+          disabled={!canCreate}
+          className={styles.createButton}
+          data-test-id={TEST_IDS.fieldSelectCreateButton}
+        />,
+        !canCreate,
+      )}
+      {formLayout}
+    </div>
+  );
+});

package/src/components/FieldSelectCreate/constants.ts

@@ -0,0 +1,15 @@
+/** Поверхность формы создания опции: модальное окно или дровер. */
+export const CREATE_LAYOUT_TYPE = {
+  Modal: 'modal',
+  Drawer: 'drawer',
+} as const;
+
+/** Права пользователя на чтение/создание опций. */
+export const PERMISSION = {
+  /** Поле недоступно. */
+  None: 'none',
+  /** Поле активно, создание опции недоступно. */
+  CanRead: 'canRead',
+  /** Полный доступ: чтение и создание. */
+  CanCreate: 'canCreate',
+} as const;

package/src/components/FieldSelectCreate/helperComponents/SelectFooter/SelectFooter.tsx

@@ -0,0 +1,37 @@
+import { APPEARANCE, Button, ICON_POSITION, VIEW } from '@cloud-ru/ds-button';
+import { PlusSVG } from '@cloud-ru/ds-icons/interface/system';
+import { Tooltip } from '@cloud-ru/ds-tooltip';
+
+import { TEST_IDS } from '../../../../constants';
+import { fieldsPredefinedLocale } from '../../../../locale';
+import styles from './styles.module.scss';
+
+type SelectFooterProps = {
+  onClick(): void;
+  createButtonLabel: string;
+  canCreate: boolean;
+};
+
+/** Персистентный футер дроплиста с кнопкой «Создать» (недоступна и с tooltip при нехватке прав). */
+export function SelectFooter({ onClick, createButtonLabel, canCreate }: SelectFooterProps) {
+  const { t } = fieldsPredefinedLocale.useTranslations();
+
+  const button = (
+    <Button
+      view={VIEW.Function}
+      appearance={APPEARANCE.Neutral}
+      label={createButtonLabel}
+      icon={<PlusSVG />}
+      iconPosition={ICON_POSITION.Before}
+      onClick={onClick}
+      disabled={!canCreate}
+      data-test-id={TEST_IDS.fieldSelectCreateFooterButton}
+    />
+  );
+
+  return (
+    <div className={styles.footerWrapper}>
+      {canCreate ? button : <Tooltip tip={t('FieldSelectCreate.noPermission')}>{button}</Tooltip>}
+    </div>
+  );
+}

package/src/components/FieldSelectCreate/helperComponents/SelectFooter/index.ts

@@ -0,0 +1 @@
+export * from './SelectFooter';

package/src/components/FieldSelectCreate/helperComponents/SelectFooter/styles.module.scss

@@ -0,0 +1,8 @@
+@use '@cloud-ru/ds-figma-variables/build/scss/styles/styles.module' as base;
+
+.footerWrapper {
+  display: flex;
+  align-items: center;
+  padding-top: base.$sn-primitive-dimension-4;
+  border-top: base.$sn-primitive-strokeWeight-strokeRegular solid base.$sn-theme-color-available-borderColor;
+}

package/src/components/FieldSelectCreate/index.ts

@@ -0,0 +1,3 @@
+export * from './constants';
+export * from './FieldSelectCreate';
+export * from './types';

package/src/components/FieldSelectCreate/styles.module.scss

@@ -0,0 +1,12 @@
+@use '@cloud-ru/ds-figma-variables/build/scss/styles/styles.module' as base;
+
+.fieldSelectCreate {
+  display: flex;
+  flex-direction: column;
+  gap: base.$sn-primitive-dimension-8;
+}
+
+.createButton {
+  // По макету кнопка «Создать» под полем не растянута, а прижата к левому краю.
+  align-self: flex-start;
+}

package/src/components/FieldSelectCreate/types.ts

@@ -0,0 +1,70 @@
+import { DrawerProps, Position } from '@cloud-ru/ds-drawer';
+import { FieldSelectMultipleProps, FieldSelectSingleProps } from '@cloud-ru/ds-fields';
+import { ModalProps } from '@cloud-ru/ds-modal';
+import { ValueOf, WithSupportProps } from '@cloud-ru/ds-utils';
+
+import { CREATE_LAYOUT_TYPE, PERMISSION } from './constants';
+
+export type CreateLayoutType = ValueOf<typeof CREATE_LAYOUT_TYPE>;
+
+export type Permission = ValueOf<typeof PERMISSION>;
+
+export type EntityName = {
+  /** Единственное число (винительный падеж) — для кнопки «Создать <single>». */
+  single: string;
+  /** Множественное число — для текстов пустых состояний и ошибки. */
+  plural: string;
+};
+
+// Иконка пустого состояния — как у noDataState.icon.icon базового FieldSelect.
+export type EntityIcon = NonNullable<NonNullable<FieldSelectSingleProps['noDataState']>['icon']>['icon'];
+
+// Состояния дроплиста, футер и режим выбора компонент задаёт сам.
+type OmittedSelectKeys = 'footer' | 'noDataState' | 'noResultsState' | 'errorDataState';
+
+export type SelectFieldProps =
+  | (Omit<FieldSelectSingleProps, OmittedSelectKeys> & { selection?: 'single' })
+  | (Omit<FieldSelectMultipleProps, OmittedSelectKeys> & { selection: 'multiple' });
+
+// Модалку/дровер создания компонент открывает/закрывает и снабжает кнопками сам.
+type ManagedLayoutKeys = 'open' | 'onClose' | 'approveButton' | 'cancelButton';
+
+export type LayoutProps =
+  | {
+      /** По клику на «Создать» открывается модальное окно. */
+      createLayoutType: 'modal';
+      /** Пропсы модалки создания (`content` — форма создания опции). */
+      createLayoutProps: Omit<ModalProps, ManagedLayoutKeys>;
+    }
+  | {
+      /** По клику на «Создать» открывается дровер (по умолчанию). */
+      createLayoutType?: 'drawer';
+      /** Пропсы дровера создания (`content` — форма создания опции); `position` по умолчанию `right`. */
+      createLayoutProps: Omit<DrawerProps, ManagedLayoutKeys | 'position'> & { position?: Position };
+    };
+
+export type FieldSelectCreateProps = WithSupportProps<
+  LayoutProps & {
+    /** Название сущности в единственном и множественном числе — для кнопок и пустых состояний. */
+    entityName: EntityName;
+    /** Действие создания опции: возвращает `value` новой опции, которая выбирается в поле (single-режим). */
+    submitHandler(): Promise<string | void>;
+    /** Пропсы, прокидываемые в `FieldSelect` (`@cloud-ru/ds-fields`). */
+    selectProps: SelectFieldProps;
+    /** Повтор загрузки в состоянии ошибки (кнопка «Обновить» в футере `errorDataState`). */
+    onRefetch?(): void;
+    /** CSS-класс корневой обёртки. */
+    className?: string;
+    /** Колбэк после закрытия модалки/дровера создания. */
+    afterClose?(): void;
+    /** Иконка пустого состояния `noData` (по умолчанию — иконка поиска). */
+    entityIcon?: EntityIcon;
+    /**
+     * Права пользователя:
+     * - `canCreate` (по умолчанию) — доступны и выбор, и создание;
+     * - `canRead` — поле активно, но создание недоступно (кнопки «Создать» с tooltip);
+     * - `none` — поле недоступно (с tooltip).
+     */
+    permission?: Permission;
+  }
+>;

package/src/components/FieldSelectCreate/useSelectDataStates.tsx

@@ -0,0 +1,57 @@
+import { APPEARANCE, Button, ICON_POSITION, VIEW } from '@cloud-ru/ds-button';
+import { FieldSelectSingleProps } from '@cloud-ru/ds-fields';
+import { CrossCircleSVG, SearchSVG, UpdateSVG } from '@cloud-ru/ds-icons/interface/system';
+import { useMemo } from 'react';
+
+import { TEST_IDS } from '../../constants';
+import { fieldsPredefinedLocale } from '../../locale';
+import { EntityIcon, EntityName } from './types';
+import { capitalize } from './utils';
+
+type Props = {
+  entityName: EntityName;
+  entityIcon?: EntityIcon;
+  onRefetch?(): void;
+};
+
+type SelectDataStates = Pick<FieldSelectSingleProps, 'noDataState' | 'noResultsState' | 'errorDataState'>;
+
+/** Строит пустые/ошибочные состояния дроплиста из `entityName` (единственное/множественное число). */
+export function useSelectDataStates({ entityName, entityIcon, onRefetch }: Props): SelectDataStates {
+  const { t } = fieldsPredefinedLocale.useTranslations();
+
+  return useMemo(
+    () => ({
+      noDataState: {
+        icon: { icon: entityIcon ?? SearchSVG, appearance: 'green' },
+        description: `${capitalize(entityName.plural)} ${t('FieldSelectCreate.noData')}`,
+      },
+      noResultsState: {
+        icon: { icon: SearchSVG, appearance: 'green' },
+        description: (
+          <>
+            {capitalize(entityName.plural)} {t('FieldSelectCreate.noResult')}.
+            <br />
+            {t('FieldSelectCreate.changeRequest')} {entityName.single.toLocaleLowerCase()}
+          </>
+        ),
+      },
+      errorDataState: {
+        icon: { icon: CrossCircleSVG, appearance: 'neutral' },
+        description: `${t('FieldSelectCreate.loadError')} ${entityName.plural.toLocaleLowerCase()}`,
+        footer: onRefetch ? (
+          <Button
+            view={VIEW.Tonal}
+            appearance={APPEARANCE.Neutral}
+            label={t('FieldSelectCreate.refetch')}
+            icon={<UpdateSVG />}
+            iconPosition={ICON_POSITION.After}
+            onClick={onRefetch}
+            data-test-id={TEST_IDS.fieldSelectCreateRetry}
+          />
+        ) : undefined,
+      },
+    }),
+    [entityIcon, entityName, onRefetch, t],
+  );
+}

package/src/components/FieldSelectCreate/utils.ts

@@ -0,0 +1,4 @@
+/** Первая буква строки в верхний регистр. */
+export function capitalize(value: string): string {
+  return value.charAt(0).toUpperCase() + value.slice(1);
+}

package/src/components/index.ts

@@ -0,0 +1,7 @@
+export * from './FieldChat';
+export * from './FieldCode';
+export * from './FieldDescription';
+export * from './FieldMask';
+export * from './FieldName';
+export * from './FieldPhone';
+export * from './FieldSelectCreate';

package/src/constants.ts

@@ -0,0 +1,19 @@
+export const TEST_IDS = {
+  fieldMask: 'field-mask',
+  fieldName: 'field-name',
+  fieldDescription: 'field-description',
+  fieldDescriptionAddButton: 'field-description__add-button',
+  fieldPhone: 'field-phone',
+  fieldPhoneCountrySelect: 'field-phone__country-select',
+  fieldChat: 'field-chat',
+  fieldCode: 'field-code',
+  fieldCodeCell: 'field-code__cell',
+  fieldCodeResend: 'field-code__resend',
+  fieldChatUpload: 'field-chat__upload',
+  fieldChatSubmit: 'field-chat__submit',
+  fieldSelectCreate: 'field-select-create',
+  fieldSelectCreateButton: 'field-select-create__button',
+  fieldSelectCreateFooterButton: 'field-select-create__footer-button',
+  fieldSelectCreateRetry: 'field-select-create__retry',
+  fieldSelectCreateSurface: 'field-select-create__surface',
+} as const;

package/src/helpers/getSymbolsRangeFromMask.ts

@@ -0,0 +1,15 @@
+/**
+ * Возвращает количество символов для маски — со скобками и без.
+ */
+export function getSymbolsRangeFromMask(mask: string = '') {
+  // Считаем все 'X' и цифры в строке.
+  const maxNumberLength = (mask.match(/[X\d]/g) || []).length;
+
+  // Удаляем содержимое внутри скобок (включая сами скобки) для подсчёта без их содержимого.
+  const stringWithoutBrackets = mask.replace(/\[[^\]]*\]/g, '');
+
+  // Считаем 'X' и цифры после удаления содержимого в скобках.
+  const minNumberLength = (stringWithoutBrackets.match(/[X\d]/g) || []).length;
+
+  return { minNumberLength, maxNumberLength };
+}

package/src/helpers/index.ts

@@ -0,0 +1 @@
+export * from './getSymbolsRangeFromMask';

package/src/hooks/index.ts

@@ -0,0 +1,2 @@
+export * from './useCustomFieldValidation';
+export * from './useOpen';