@alfalab/core-components 42.9.1 → 42.10.0

package/international-phone-input/modern/utils/index.js

@@ -0,0 +1,183 @@
+import { isGroup } from '../../../select/modern/shared';
+import { maskUtils } from '../../../shared/modern';
+import { DEFAULT_PHONE_FORMAT } from '../consts.js';
+import { countriesData } from '../data/country-data.js';
+
+function initCountries(iso2s) {
+    const filteredCountriesData = Array.isArray(iso2s)
+        ? countriesData.filter((country) => iso2s.includes(country[2]))
+        : countriesData;
+    return filteredCountriesData.map((country) => {
+        const countryItem = {
+            name: country[0],
+            regions: country[1],
+            iso2: country[2],
+            countryCode: country[3],
+            dialCode: country[3],
+            format: country[4],
+            priority: country[5] || 0,
+        };
+        const areaItems = [];
+        if (country[6]) {
+            country[6]?.forEach((areaCode) => {
+                const areaItem = { ...countryItem };
+                areaItem.dialCode = country[3] + areaCode;
+                areaItem.isAreaCode = true;
+                areaItem.areaCodeLength = areaCode.length;
+                areaItems.push(areaItem);
+            });
+        }
+        if (areaItems.length > 0) {
+            countryItem.mainCode = true;
+            return [countryItem, ...areaItems];
+        }
+        return [countryItem];
+    });
+}
+function findCountry(countries, value, iso2, country) {
+    if (country)
+        return country;
+    if (value) {
+        const inputNumber = clearMask(value);
+        const nextCountry = guessCountry(inputNumber, countries);
+        if (nextCountry)
+            return nextCountry;
+    }
+    if (!iso2)
+        return undefined;
+    return countries.find((c) => c[0].iso2 === iso2)?.[0];
+}
+function guessCountry(inputNumber, data) {
+    const inputNumberDialCode = inputNumber.slice(0, 6);
+    const result = data.reduce((selectedCountry, countryData) => {
+        let guess;
+        countryData.forEach((country) => {
+            if (inputNumberDialCode.startsWith(country.dialCode)) {
+                const selectedCountryDialCode = selectedCountry?.dialCode || '';
+                const selectedCountryPriority = selectedCountry?.priority || 100;
+                if (country.dialCode.length > selectedCountryDialCode.length) {
+                    guess = country;
+                }
+                if (country.dialCode.length === selectedCountryDialCode.length &&
+                    country.priority < selectedCountryPriority) {
+                    guess = country;
+                }
+            }
+        });
+        return guess || selectedCountry;
+    }, undefined);
+    if (!result && inputNumber.length > 5 && inputNumber.startsWith('8'))
+        return data.find((countryData) => countryData[0].iso2 === 'ru')?.[0];
+    return result;
+}
+function clearMask(value) {
+    return value.replace(/\D/g, '');
+}
+function itemToMask(item) {
+    return item === '.' ? /\d/ : item;
+}
+function prepareDefaultFormat(countryCode, clearableCountryCode) {
+    if (!countryCode)
+        return ['+', ...DEFAULT_PHONE_FORMAT.split('').map(itemToMask)];
+    const removeDots = (count) => {
+        let removed = 0;
+        let res = DEFAULT_PHONE_FORMAT;
+        while (removed < count) {
+            res = res.replace(/\./, '');
+            removed += 1;
+        }
+        return res.trim();
+    };
+    if (clearableCountryCode) {
+        return [
+            '+',
+            ...countryCode.split('').map(() => /\d/),
+            ' ',
+            ...removeDots(countryCode.length).split('').map(itemToMask).reverse(),
+        ];
+    }
+    return [
+        '+',
+        ...countryCode.split(''),
+        ' ',
+        ...removeDots(countryCode.length).split('').map(itemToMask).reverse(),
+    ];
+}
+function createPhoneMaskExpression(country, clearableCountryCode) {
+    const { countryCode, format } = country || {};
+    if (!countryCode || !format) {
+        return prepareDefaultFormat(countryCode, clearableCountryCode);
+    }
+    return [
+        '+',
+        ...(clearableCountryCode ? countryCode.split('').map(() => /\d/) : countryCode.split('')),
+        ' ',
+        ...format.split('').map((item) => (item === '.' ? /\d/ : item)),
+    ];
+}
+function createMaskOptions(country, clearableCountryCode) {
+    const prefixLen = !clearableCountryCode && country?.countryCode ? country.countryCode.length + 1 : 0;
+    const mask = createPhoneMaskExpression(country, clearableCountryCode);
+    return {
+        mask,
+        preprocessors: [
+            maskUtils.insertionPhonePreprocessor(mask, country?.countryCode, clearableCountryCode),
+        ],
+        postprocessors: [
+            maskUtils.prefixPostprocessor(prefixLen ? `+${country?.countryCode}` : ''),
+        ],
+        plugins: [
+            maskUtils.caretGuard((value, [from, to]) => [
+                from === to ? prefixLen : 0,
+                value.length,
+            ]),
+        ],
+    };
+}
+function defaultFilterFn(value = '', option) {
+    return clearMask(option.key).includes(clearMask(value));
+}
+const filterPhones = (value = '', options, filterFn = defaultFilterFn) => {
+    if (!options || options.length === 0)
+        return options;
+    const filteredOptions = [];
+    options.forEach((option) => {
+        if (isGroup(option)) {
+            const group = {
+                ...option,
+                options: [],
+            };
+            option.options.forEach((groupOption) => {
+                if (filterFn(value, groupOption))
+                    group.options.push(groupOption);
+            });
+            if (group.options.length)
+                filteredOptions.push(group);
+        }
+        else if (filterFn(value, option))
+            filteredOptions.push(option);
+    });
+    return filteredOptions;
+};
+function getPhoneData(phone, countries, defaultIso2) {
+    let nextPhone = phone;
+    const inputNumber = clearMask(nextPhone);
+    const nextCountry = findCountry(countries, phone, defaultIso2);
+    if (nextCountry?.iso2 === 'ru' && inputNumber.length > 5 && inputNumber.startsWith('8')) {
+        nextPhone = phone.replace(/\+?8/, '+7');
+    }
+    return {
+        nextPhone,
+        nextCountry,
+    };
+}
+function getClear(clear, clearableCountryCode, value = '', countryCode = '') {
+    if (!clear)
+        return clear;
+    const trimmedValue = value.trim();
+    return clearableCountryCode
+        ? trimmedValue !== '' && trimmedValue !== '+'
+        : trimmedValue.length > countryCode.length + 1;
+}
+
+export { clearMask, createMaskOptions, createPhoneMaskExpression, filterPhones, findCountry, getClear, getPhoneData, guessCountry, initCountries };

package/international-phone-input/modern/utils-1574ad8b.d.ts

@@ -0,0 +1,29 @@
+type SavedStyle = {
+    value: string;
+    key: string;
+    el: HTMLElement;
+};
+type RestoreStyle = {
+    container: HTMLElement;
+    modals: number;
+    styles: SavedStyle[];
+};
+declare class ModalStore {
+    private readonly restoreStyles;
+    constructor();
+    getRestoreStyles: () => RestoreStyle[];
+}
+declare const getModalStore: () => ModalStore;
+declare class GlobalStore {
+    private readonly modalStore;
+    constructor();
+    getModalStore: () => ModalStore;
+}
+declare function isScrolledToTop(target: HTMLElement): boolean;
+declare function isScrolledToBottom(target: HTMLElement): boolean;
+declare function hasScrollbar(target: HTMLElement): boolean;
+declare const getScrollbarSize: () => number;
+declare const restoreContainerStyles: (container: HTMLElement) => void;
+declare const handleContainer: (container?: HTMLElement) => void;
+export type { SavedStyle };
+export { getModalStore, GlobalStore, isScrolledToTop, isScrolledToBottom, hasScrollbar, getScrollbarSize, restoreContainerStyles, handleContainer };

package/international-phone-input/modern/utils-dd8ca091.d.ts

@@ -0,0 +1,41 @@
+import { ReactNode, RefObject } from 'react';
+import { BaseSelectProps, GroupShape, OptionShape } from "./typings-dd8ca091";
+declare const isGroup: (item: OptionShape | GroupShape) => item is GroupShape;
+declare const isOptionShape: (item: OptionShape | string | null) => item is OptionShape;
+declare const joinOptions: ({ selected, selectedMultiple, }: {
+    selected?: OptionShape | undefined;
+    selectedMultiple?: OptionShape[] | undefined;
+}) => ReactNode[] | null;
+declare function processOptions(options: BaseSelectProps['options'], selected?: BaseSelectProps['selected'], filterFn?: (option: OptionShape) => boolean): {
+    filteredOptions: (OptionShape | GroupShape)[];
+    flatOptions: OptionShape[];
+    selectedOptions: OptionShape[];
+};
+type useVisibleOptionsArgs = {
+    /**
+     * Количество видимых пунктов
+     */
+    visibleOptions: number;
+    /**
+     * Реф на контейнер с пунтами меню
+     */
+    listRef: RefObject<HTMLElement>;
+    /**
+     * Реф на контейнер, которому нужно установить высоту
+     */
+    styleTargetRef?: RefObject<HTMLElement>;
+    /**
+     * Флаг открытия меню
+     */
+    open?: boolean;
+    /**
+     * Позволяет вызвать пересчет высоты
+     */
+    invalidate?: unknown;
+};
+declare function useVisibleOptions({ visibleOptions, listRef, styleTargetRef, open, invalidate, }: useVisibleOptionsArgs): void;
+declare function defaultFilterFn(optionText: string, search: string): boolean;
+declare function defaultAccessor(option: OptionShape): string;
+declare function usePrevious<T>(value: T): T | undefined;
+declare const lastIndexOf: <T>(array: T[], predicate: (item: T) => boolean) => number;
+export { isGroup, isOptionShape, joinOptions, processOptions, useVisibleOptions, defaultFilterFn, defaultAccessor, usePrevious, lastIndexOf };

package/international-phone-input/package.json

@@ -0,0 +1,3 @@
+{
+    "module": "./esm/index.js"
+}

package/international-phone-input/shared-4cd3936b.d.ts

@@ -0,0 +1,65 @@
+/// <reference types="react" />
+import React from "react";
+import { BaseSelectProps, OptionProps, OptionShape } from "./typings-dd8ca091";
+// eslint-disable-next-line @typescript-eslint/naming-convention
+type useSelectWithLoadingProps = {
+    loading?: boolean;
+    visibleOptions?: BaseSelectProps["visibleOptions"];
+    Option?: React.FC<OptionProps>;
+};
+declare function useSelectWithLoading({ loading, visibleOptions, Option }: useSelectWithLoadingProps): {
+    Option: (props: OptionProps) => React.JSX.Element;
+    options: OptionShape[];
+} | null;
+type OptionsFetcherResponse = {
+    options: OptionShape[];
+    hasMore: boolean;
+};
+// eslint-disable-next-line @typescript-eslint/naming-convention
+type useLazyLoadingProps = {
+    /** Количество элементов на "странице" */
+    limit?: number;
+    /** Начальный номер "страницы" */
+    initialOffset?: number;
+    /** Скелетон загружаемых элементов */
+    skeleton?: React.ReactNode;
+    /** Компонент пункта меню */
+    Option?: React.FC<OptionProps>;
+    /**
+     * Функция-загрузчик опций.
+     * @param offset - текущая страница
+     * @param limit - количество элементов на странице
+     * @param queryString - строчные данные, пробрасываемые для поиска из кастомного инпута, расположенного в заголовке OptionsList
+     * @returns Promise<{
+     *  options - список опций следующей "страницы". Они аппендятся к предыдущим
+     *  hasMore - указывает, есть ли еще незагруженные элементы (в случае false перестает загружать "следующую страницу")
+     * }>
+     */
+    optionsFetcher(offset: number, limit: number, queryString?: string): Promise<OptionsFetcherResponse>;
+};
+declare function useLazyLoading({ limit, initialOffset, optionsFetcher, skeleton, Option }: useLazyLoadingProps): {
+    optionsProps: {
+        Option: (props: OptionProps) => React.JSX.Element;
+        options: OptionShape[];
+        optionsListProps: {
+            ref: React.RefObject<HTMLDivElement>;
+            inputProps: {
+                onChange: (event: React.ChangeEvent<HTMLInputElement>, payload: {
+                    value: string;
+                }) => void;
+                value: string;
+            };
+        };
+        onOpen: (payload: {
+            open?: boolean;
+        }) => void;
+    };
+    reset: () => void;
+};
+export * from "./index-ebda875c";
+export * from "./Component-dd8ca091";
+export { useSelectWithLoading, useLazyLoading };
+export * from "./hook-8abfea97";
+export * from "./typings-dd8ca091";
+export * from "./utils-dd8ca091";
+export type { AdditionalMobileProps } from "./Component.mobile-ade26e99";

package/international-phone-input/types-1b036d4b.d.ts

@@ -0,0 +1,13 @@
+type TextElementType = HTMLParagraphElement | HTMLSpanElement | HTMLDivElement;
+type WidthUnit = number | string;
+type TextSkeletonProps = {
+    /**
+     *  Кол-во строк текста
+     */
+    rows?: number;
+    /**
+     * Ширина строки
+     */
+    width?: WidthUnit | WidthUnit[];
+};
+export { TextElementType, TextSkeletonProps };

package/international-phone-input/types-72dda473.d.ts

@@ -0,0 +1,276 @@
+/// <reference types="react-transition-group" />
+import { HTMLAttributes, ReactElement, ReactNode, RefObject } from 'react';
+import { HandledEvents } from 'react-swipeable/es/types';
+import { TransitionProps } from 'react-transition-group/Transition';
+import { BaseModalProps } from "./index-bdb4c6b9";
+import { NavigationBarProps } from "./index-c76d6398";
+import { BackgroundColorType } from "./index-72dda473";
+type BottomSheetTitleAlign = 'center' | 'left';
+type BottomSheetProps = {
+    /**
+     * Контент
+     */
+    children?: ReactNode;
+    /**
+     * Управление видимостью
+     */
+    open: boolean;
+    /**
+     * Заголовок
+     */
+    title?: ReactNode;
+    /**
+     * Размер заголовка
+     */
+    titleSize?: NavigationBarProps['titleSize'];
+    /**
+     * Подзаголовок.
+     */
+    subtitle?: NavigationBarProps['subtitle'];
+    /**
+     * Кнопка действия (обычно, это кнопка закрытия)
+     */
+    actionButton?: ReactNode;
+    /**
+     * Нода, компонент или функция возвращающая их
+     *
+     * Контейнер к которому будут добавляться порталы
+     */
+    container?: BaseModalProps['container'];
+    /**
+     * Рендерить ли в контейнер через портал.
+     */
+    usePortal?: BaseModalProps['usePortal'];
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+    /**
+     * Дополнительный класс
+     */
+    contentClassName?: string;
+    /**
+     * Дополнительные пропсы на контейнер.
+     */
+    containerProps?: HTMLAttributes<HTMLDivElement>;
+    /**
+     * Дополнительный класс
+     */
+    containerClassName?: string;
+    /**
+     * Цвет фона
+     */
+    backgroundColor?: Extract<BackgroundColorType, 'primary' | 'secondary'>;
+    /**
+     * Дополнительный класс шапки
+     */
+    headerClassName?: string;
+    /**
+     * Дополнительный класс футера
+     */
+    footerClassName?: string;
+    /**
+     * Дополнительный класс для аддонов
+     */
+    addonClassName?: string;
+    /**
+     * Дополнительный класс для компонента крестика
+     */
+    closerClassName?: string;
+    /**
+     * Дополнительный класс для компонента стрелки назад
+     */
+    backerClassName?: string;
+    /**
+     * Дополнительный класс для компонента модального окна
+     */
+    modalClassName?: string;
+    /**
+     * Дополнительный класс для обертки модального окна
+     */
+    modalWrapperClassName?: string;
+    /**
+     * Дополнительный класс для маркера
+     */
+    swipeableMarkerClassName?: string;
+    /**
+     * Кастомный маркер
+     */
+    swipeableMarker?: ReactElement;
+    /**
+     * TransitionProps, прокидываются в компонент CSSTransitionProps.
+     */
+    transitionProps?: Partial<TransitionProps>;
+    /**
+     * Идентификатор для систем автоматизированного тестирования
+     */
+    dataTestId?: string;
+    /**
+     * z-index компонента
+     */
+    zIndex?: number;
+    /**
+     * Будет ли свайпаться шторка
+     * @default true
+     */
+    swipeable?: boolean;
+    /**
+     * Будет ли свайпаться контент
+     */
+    swipeableContent?: boolean;
+    /**
+     * Порог свайпа
+     */
+    swipeThreshold?: number;
+    /**
+     * Слот слева
+     */
+    leftAddons?: ReactNode;
+    /**
+     * Слот справа
+     */
+    rightAddons?: ReactNode;
+    /**
+     * Слот снизу
+     */
+    bottomAddons?: ReactNode;
+    /**
+     * Наличие компонента крестика
+     */
+    hasCloser?: boolean;
+    /**
+     * Наличие компонента стрелки назад
+     */
+    hasBacker?: boolean;
+    /**
+     * Выравнивание заголовка
+     */
+    titleAlign?: BottomSheetTitleAlign;
+    /**
+     * Фиксирует шапку
+     */
+    stickyHeader?: boolean;
+    /**
+     * Фиксирует футер
+     */
+    stickyFooter?: boolean;
+    /**
+     * Высота шторки
+     */
+    initialHeight?: 'default' | 'full';
+    /**
+     * Будет ли виден оверлэй
+     */
+    hideOverlay?: boolean;
+    /**
+     * Будет ли видна шапка
+     */
+    hideHeader?: boolean;
+    /**
+     * Будет ли обрезан заголовок
+     */
+    trimTitle?: boolean;
+    /**
+     * Запретить закрытие шторки кликом на оверлэй
+     */
+    disableOverlayClick?: boolean;
+    /**
+     * Отключает блокировку скролла при открытии модального окна
+     */
+    disableBlockingScroll?: boolean;
+    /**
+     * Отключает ловушку фокуса
+     */
+    disableFocusLock?: boolean;
+    /**
+     * @deprecated данный проп больше не используется, временно оставлен для обратной совместимости
+     * Не анимировать шторку при изменении размера вьюпорта
+     */
+    ignoreScreenChange?: boolean;
+    /**
+     * Свойства для Бэкдропа
+     */
+    backdropProps?: BaseModalProps['backdropProps'];
+    /**
+     * Реф на контейнер, в котором происходит скролл
+     */
+    scrollableContainerRef?: RefObject<HTMLElement>;
+    /**
+     * Реф для управления компонентом.
+     */
+    bottomSheetInstanceRef?: RefObject<{
+        scrollToArea: (idx: number) => void;
+    }>;
+    /**
+     * Реф на контейнер, в котором находится шторка
+     */
+    sheetContainerRef?: RefObject<HTMLElement>;
+    /**
+     * Магнитные области видимой высоты шторки.
+     * Можно использовать значения в пикселях - 10(число), либо в процентах - 10%(строка).
+     * По-умолчанию -[0, window.innerHeight - '24px']
+     * массив должен состоять минимум из 2 элементов
+     */
+    magneticAreas?: Array<number | string>;
+    /**
+     * Индекс точки из magneticAreas, к которому нужно примагнититься при первом открытии шторки.
+     */
+    initialActiveAreaIndex?: number;
+    /**
+     * Отключает скролл контентной области.
+     */
+    scrollLocked?: boolean;
+    /**
+     * Скрыть скроллбар внутри шторки
+     */
+    hideScrollbar?: boolean;
+    /**
+     * Верхний отступ шторки, если она открыта на максимальную высоту
+     */
+    headerOffset?: number;
+    /**
+     * Содержимое bottom-sheet всегда в DOM
+     */
+    keepMounted?: boolean;
+    /**
+     * Отключает автоматический перевод фокуса на bottom-sheet при открытии
+     */
+    disableAutoFocus?: boolean;
+    /**
+     * Отключает восстановление фокуса на предыдущем элементе после закрытия bottom-sheet
+     */
+    disableRestoreFocus?: boolean;
+    /**
+     * Отключает вызов `onClose` при нажатии Escape
+     */
+    disableEscapeKeyDown?: boolean;
+    /**
+     * Обработчик закрытия
+     */
+    onClose: () => void;
+    /**
+     * Обработчик нажатия на стрелку назад
+     */
+    onBack?: () => void;
+    /**
+     * Вызывается в начале анимации притягивания к одной из `magneticAreas`
+     */
+    onMagnetize?: (index: number) => void;
+    /**
+     * Вызывается после окончания анимации притягивания
+     */
+    onMagnetizeEnd?: () => void;
+    /**
+     * Вызывается при изменении положения шторки
+     */
+    onOffsetChange?: (offset: number, percent: number) => void;
+    /**
+     * Вызывается в начале свайпа
+     */
+    onSwipeStart?: (event: HandledEvents) => void;
+    /**
+     * Вызывается после окончания свайпа
+     */
+    onSwipeEnd?: (event: HandledEvents | null) => void;
+};
+export { BottomSheetTitleAlign, BottomSheetProps };