@alfalab/core-components 42.0.0-beta.0 → 42.0.0-beta.1

package/select-with-tags/typings-5e1b8383.d.ts

@@ -0,0 +1,549 @@
+import { AriaAttributes, FC, FocusEvent, MouseEvent, ReactElement, ReactNode, RefAttributes, SVGProps } from 'react';
+import { InputProps, PopoverProps } from "./index-ebda875c";
+type AnyObject = Record<string, any>;
+type OptionShape = {
+    /**
+     * Текстовое представление пункта
+     */
+    key: string;
+    /**
+     * Контент, который будет отрисован в выпадающем списке и в поле при выборе
+     */
+    content?: ReactNode;
+    /**
+     * Блокирует данный пункт для выбора
+     */
+    disabled?: boolean;
+    /**
+     * Разрешает показ компонента Checkmark, иногда нужно его убирать для показа контента ошибки или пустого состояния
+     */
+    showCheckMark?: boolean;
+    /**
+     * Дополнительные данные
+     */
+    value?: any;
+};
+type GroupShape = {
+    /**
+     * Заголовок группы
+     */
+    label?: string;
+    /**
+     * Дочерние элементы
+     */
+    options: OptionShape[];
+};
+type BaseSelectChangePayload = {
+    selected: OptionShape | null;
+    selectedMultiple: OptionShape[];
+    initiator: OptionShape | null;
+    name?: string;
+};
+type BaseSelectProps = {
+    /**
+     * Идентификатор для систем автоматизированного тестирования
+     */
+    dataTestId?: string;
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+    /**
+     * Дополнительный класс для поля
+     */
+    fieldClassName?: string;
+    /**
+     * Дополнительный класс выпадающего меню
+     */
+    optionsListClassName?: string;
+    /**
+     * Дополнительный класс для пункта меню
+     */
+    optionClassName?: string;
+    /**
+     * Дополнительный класс для компонента группы пунктов
+     */
+    optionGroupClassName?: string;
+    /**
+     * Дополнительный класс для поповера
+     */
+    popperClassName?: string;
+    /**
+     * Список вариантов выбора
+     */
+    options: Array<OptionShape | GroupShape>;
+    /**
+     * Атрибут id
+     */
+    id?: string;
+    /**
+     * Атрибут name
+     */
+    name?: string;
+    /**
+     * Управление возможностью выбора значения
+     */
+    disabled?: boolean;
+    /**
+     * Начальное состояние селекта
+     */
+    defaultOpen?: boolean;
+    /**
+     * Управление открытием
+     */
+    open?: boolean;
+    /**
+     * Возможность выбрать несколько значений
+     */
+    multiple?: boolean;
+    /**
+     * Размер компонента
+     */
+    size?: 's' | 'm' | 'l' | 'xl';
+    /**
+     * Размер пунктов меню
+     */
+    optionsSize?: 's' | 'm' | 'l' | 'xl';
+    /**
+     * Растягивает компонент на ширину контейнера
+     */
+    block?: boolean;
+    /**
+     * Управляет шириной выпадающего меню.
+     * Ширину определяет контент, либо ширина равна ширине поля
+     */
+    optionsListWidth?: 'content' | 'field';
+    /**
+     * Лейбл поля
+     */
+    label?: ReactNode;
+    /**
+     * Вид лейбла внутри / снаружи
+     */
+    labelView?: 'inner' | 'outer';
+    /**
+     * Плейсхолдер поля
+     */
+    placeholder?: string;
+    /**
+     * Отображение ошибки
+     */
+    error?: ReactNode | boolean;
+    /**
+     * Подсказка под полем
+     */
+    hint?: ReactNode;
+    /**
+     * Возможность использовать селект как input-autocomplete
+     */
+    autocomplete?: boolean;
+    /**
+     * Позволяет снять выбранное значение
+     */
+    allowUnselect?: boolean;
+    /**
+     * Закрывать меню после выбора?
+     */
+    closeOnSelect?: boolean;
+    /**
+     * При навигации с клавиатуры переходить от последнего пункта меню к первому и наоборот.
+     */
+    circularNavigation?: boolean;
+    /**
+     * Запрещает поповеру менять свою позицию.
+     * Например, если места снизу недостаточно,то он все равно будет показан снизу
+     */
+    preventFlip?: boolean;
+    /**
+     * Список value выбранных пунктов (controlled-селект)
+     */
+    selected?: Array<string | OptionShape> | string | OptionShape | null;
+    /**
+     * Рендерит нативный селект вместо выпадающего меню. (на десктопе использовать только с multiple=false)
+     */
+    nativeSelect?: boolean;
+    /**
+     * Позиционирование выпадающего списка
+     */
+    popoverPosition?: PopoverProps['position'];
+    /**
+     * Количество видимых пунктов меню (5 = 5.5)
+     */
+    visibleOptions?: number;
+    /**
+     * Кастомный рендер выбранного пункта
+     */
+    valueRenderer?: ({ selected, selectedMultiple, }: {
+        selected?: OptionShape;
+        selectedMultiple: OptionShape[];
+    }) => ReactNode;
+    /**
+     * Компонент стрелки
+     */
+    Arrow?: FC<ArrowProps> | null | false;
+    /**
+     * Компонент поля
+     */
+    Field?: FC<FieldProps>;
+    /**
+     * Пропсы, которые будут прокинуты в компонент поля
+     */
+    fieldProps?: unknown;
+    /**
+     * Пропсы, которые будут прокинуты в компонент списка
+     */
+    optionsListProps?: unknown;
+    /**
+     * Пропсы, которые будут прокинуты в компонент пункта меню
+     */
+    optionProps?: unknown;
+    /**
+     * Компонент выпадающего меню
+     */
+    OptionsList?: FC<OptionsListProps & RefAttributes<HTMLDivElement>>;
+    /**
+     * Компонент группы
+     */
+    Optgroup?: FC<OptgroupProps>;
+    /**
+     * Компонент пункта меню
+     */
+    Option?: FC<OptionProps>;
+    /**
+     * Обработчик выбора
+     */
+    onChange?: (payload: BaseSelectChangePayload) => void;
+    /**
+     * Обработчик открытия\закрытия селекта
+     */
+    onOpen?: (payload: {
+        open?: boolean;
+        name?: string;
+    }) => void;
+    /**
+     * Обработчик фокуса поля
+     */
+    onBlur?: (event: FocusEvent<HTMLDivElement | HTMLInputElement>) => void;
+    /**
+     * Обработчик блюра поля
+     */
+    onFocus?: (event: FocusEvent<HTMLDivElement | HTMLInputElement>) => void;
+    /**
+     * Обработчик скрола
+     */
+    onScroll?: (event: MouseEvent<HTMLDivElement>) => void;
+    /**
+     * Хранит функцию, с помощью которой можно обновить положение поповера
+     */
+    updatePopover?: PopoverProps['update'];
+    /**
+     * z-index поповера
+     */
+    zIndexPopover?: PopoverProps['zIndex'];
+    /**
+     * Показывать OptionsList, если он пустой
+     */
+    showEmptyOptionsList?: boolean;
+};
+type FieldProps = {
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+    /**
+     * Выбранный пункт
+     */
+    selected?: OptionShape;
+    /**
+     * Список выбранных пунктов
+     */
+    selectedMultiple?: OptionShape[];
+    /**
+     * Метод для ручной установки выбранных пунктов
+     */
+    setSelectedItems: (selected: OptionShape[]) => void;
+    /**
+     * Метод переключающий видимость выпадающего списка
+     */
+    toggleMenu: () => void;
+    /**
+     * Флаг, можно ли выбрать несколько значений
+     */
+    multiple?: boolean;
+    /**
+     * Флаг, открыто ли меню
+     */
+    open?: boolean;
+    /**
+     * Флаг, поле заблокировано
+     */
+    disabled?: boolean;
+    /**
+     * Лейбл поля
+     */
+    label?: ReactNode;
+    /**
+     * Вид лейбла внутри / снаружи
+     */
+    labelView?: 'inner' | 'outer';
+    /**
+     * Плейсхолдер поля
+     */
+    placeholder?: string;
+    /**
+     * Отображение ошибки
+     */
+    error?: ReactNode | boolean;
+    /**
+     * Отображение иконки успеха
+     */
+    success?: boolean;
+    /**
+     * Подсказка под полем
+     */
+    hint?: ReactNode;
+    /**
+     * Компонент стрелки
+     */
+    Arrow?: ReactElement | false | null;
+    /**
+     * Кастомный рендер выбранного пункта
+     */
+    valueRenderer?: BaseSelectProps['valueRenderer'];
+    /**
+     * Внутренние свойства, которые должны быть установлены компоненту.
+     */
+    innerProps: {
+        onBlur?: (event: FocusEvent<HTMLDivElement | HTMLInputElement>) => void;
+        onFocus?: (event: FocusEvent<HTMLDivElement | HTMLInputElement>) => void;
+        onClick?: (event: MouseEvent<HTMLDivElement | HTMLInputElement>) => void;
+        tabIndex?: number;
+        id: string;
+    } & RefAttributes<HTMLDivElement | HTMLInputElement> & AriaAttributes;
+    /**
+     * Идентификатор для систем автоматизированного тестирования
+     */
+    dataTestId?: string;
+} & AnyObject;
+type ArrowProps = {
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+    /**
+     * Флаг, открыто ли меню
+     */
+    open?: boolean;
+};
+type OptionsListProps = {
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+    /**
+     * Дополнительный класс для компонента группы пунктов
+     */
+    optionGroupClassName?: string;
+    /**
+     * Размер компонента
+     */
+    size?: 's' | 'm' | 'l' | 'xl';
+    /**
+     * Компонент пункта меню
+     */
+    Option: FC<OptionProps>;
+    /**
+     * Функция для получения пропсов для ячейки
+     */
+    getOptionProps: (option: OptionShape, index: number) => OptionProps;
+    /**
+     * Список выбранных пунктов
+     */
+    selectedItems?: OptionShape[];
+    /**
+     * Метод для ручной установки выбранных пунктов
+     */
+    setSelectedItems: (selected: OptionShape[]) => void;
+    /**
+     * Метод переключающий видимость выпадающего списка
+     */
+    toggleMenu: () => void;
+    /**
+     * Контент шапки
+     */
+    header?: ReactNode;
+    /**
+     * Контент футера
+     */
+    footer?: ReactNode;
+    /**
+     * Список вариантов выбора
+     */
+    options?: Array<OptionShape | GroupShape>;
+    /**
+     * Плоский список пунктов меню (например, нужно для виртуализации)
+     */
+    flatOptions?: OptionShape[];
+    /**
+     * Индекс выделенного пункта
+     */
+    highlightedIndex?: number;
+    /**
+     * Флаг, открыто ли меню
+     */
+    open?: boolean;
+    /**
+     * Компонент группы
+     */
+    Optgroup?: BaseSelectProps['Optgroup'];
+    /**
+     * Будет отображаться, если компонент пустой
+     */
+    emptyPlaceholder?: ReactNode;
+    /**
+     * Количество видимых пунктов меню (5 = 5.5)
+     */
+    visibleOptions?: number;
+    /**
+     * Обработчик скрола
+     */
+    onScroll?: (event: MouseEvent<HTMLDivElement>) => void;
+    /**
+     * Идентификатор для систем автоматизированного тестирования
+     */
+    dataTestId?: string;
+    /**
+     * Дополнительные пропсы для Input'a, находящегося внутри кастомного OptionsList
+     */
+    inputProps?: InputProps;
+    /**
+     * Нужно ли показывать футер
+     */
+    showFooter?: boolean;
+    /**
+     * Нужно ли использовать нативный скроллбар
+     */
+    nativeScrollbar?: boolean;
+    /**
+     * Управляет шириной выпадающего меню.
+     * Ширину определяет контент, либо ширина равна ширине поля
+     */
+    optionsListWidth?: BaseSelectProps['optionsListWidth'];
+    /**
+     * Обработчик подтверждения изменений
+     */
+    onApply?: () => void;
+    /**
+     * Обработчик отмены изменений
+     */
+    onClear?: () => void;
+};
+type OptgroupProps = {
+    /**
+     * Дополнительный класс для компонента группы пунктов
+     */
+    className?: string;
+    /**
+     * Размер компонента
+     */
+    size?: 's' | 'm' | 'l' | 'xl';
+    /**
+     * Заголовок группы
+     */
+    label?: string;
+    /**
+     * Дочерние элементы
+     */
+    children?: ReactNode;
+};
+type OptionProps = {
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+    /**
+     * Размер компонента
+     */
+    size?: 's' | 'm' | 'l' | 'xl';
+    /**
+     * Контент пункта меню
+     */
+    children?: ReactNode;
+    /**
+     * Данные пункта меню
+     */
+    option: OptionShape;
+    /**
+     * Индекс пункта
+     */
+    index: number;
+    /**
+     * Флаг, выбран ли данный пункт
+     */
+    selected?: boolean;
+    /**
+     * Флаг, подсвечен ли данный пункт
+     */
+    highlighted?: boolean;
+    /**
+     * Флаг, заблокирован ли данный пункт
+     */
+    disabled?: boolean;
+    /**
+     * Флаг множественного выбора
+     */
+    multiple?: boolean;
+    /**
+     * Компонент пункта меню
+     */
+    Checkmark?: FC<CheckmarkProps> | null;
+    /**
+     * Внутренние свойства, которые должны быть установлены компоненту.
+     */
+    innerProps: {
+        id: string;
+        onClick: (event: MouseEvent<HTMLDivElement>) => void;
+        onMouseDown: (event: MouseEvent<HTMLDivElement>) => void;
+        onMouseMove: (event: MouseEvent<HTMLDivElement>) => void;
+        role: string;
+    } & RefAttributes<HTMLDivElement> & AriaAttributes;
+    /**
+     * Идентификатор для систем автоматизированного тестирования
+     */
+    dataTestId?: string;
+    /**
+     * Позиция иконки "галочки"
+     */
+    checkmarkPosition?: 'before' | 'after';
+    /**
+     * Мобильная верcия option.
+     */
+    mobile?: boolean;
+};
+type CheckmarkProps = {
+    /**
+     * Флаг, данный пункт выбран
+     */
+    selected?: boolean;
+    /**
+     * Флаг, данный пункт задизейблен
+     */
+    disabled?: boolean;
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+    /**
+     * Флаг множественного выбора
+     */
+    multiple?: boolean;
+    /**
+     * Расположение отметки
+     */
+    position?: 'before' | 'after';
+    /**
+     * Иконка выбранного пункта
+     */
+    icon?: FC<SVGProps<SVGSVGElement>>;
+};
+export { AnyObject, OptionShape, GroupShape, BaseSelectChangePayload, BaseSelectProps, FieldProps, ArrowProps, OptionsListProps, OptgroupProps, OptionProps, CheckmarkProps };

package/select-with-tags/typings-bdb4c6b9.d.ts

@@ -0,0 +1,52 @@
+import { ReactNode } from 'react';
+import { BaseModalProps } from "./index-bdb4c6b9";
+type ModalDesktopProps = BaseModalProps & {
+    /**
+     * Ширина модального окна
+     * @default "m"
+     */
+    size?: 's' | 'm' | 'l' | 'xl' | 'fullscreen';
+    /**
+     * Растягивает модальное окно на весь экран
+     * @deprecated Используйте размер fullscreen
+     */
+    fullscreen?: boolean;
+    /**
+     * Фиксирует позицию модального окна после открытия,
+     * предотвращая скачки, если контент внутри будет меняться
+     */
+    fixedPosition?: boolean;
+    /**
+     * Управление наличием закрывающего крестика
+     * @default false
+     */
+    hasCloser?: boolean;
+};
+type ModalMobileProps = Omit<ModalDesktopProps, 'size' | 'fixedPosition' | 'fullscreen'>;
+type ModalResponsiveProps = ModalDesktopProps & {
+    /**
+     * Контрольная точка, с нее начинается desktop версия
+     * @default 1024
+     */
+    breakpoint?: number;
+};
+type View = 'desktop' | 'mobile';
+type TResponsiveModalContext = {
+    view: View;
+    size: NonNullable<ModalDesktopProps['size']>;
+};
+type ContentProps = {
+    /**
+     * Контент
+     */
+    children?: ReactNode;
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+    /**
+     * Растягивает контент на всю высоту
+     */
+    flex?: boolean;
+};
+export { ModalDesktopProps, ModalMobileProps, ModalResponsiveProps, View, TResponsiveModalContext, ContentProps };

package/select-with-tags/utils/index.js

@@ -2,7 +2,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var utils_match = require('./match.js');
 require('tslib');
-require('../../select');
+require('../../select/shared');
 
 
 

package/select-with-tags/utils/match.d.ts

@@ -1,4 +1,4 @@
-import { GroupShape, OptionShape } from "../../select";
+import { GroupShape, OptionShape } from "../shared-4cd3936b";
 import { OptionMatcher, SelectWithTagsProps } from "../types";
 declare const filterOptions: (options: SelectWithTagsProps['options'], inputValue: string, math?: OptionMatcher) => OptionShape[] | GroupShape[];
 export { filterOptions };

package/select-with-tags/utils/match.js

@@ -1,7 +1,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var tslib = require('tslib');
-var coreComponentsSelect = require('../../select');
+var shared = require('../../select/shared');
 
 var defaultMatch = function (option, inputValue) {
     return option.value.toLowerCase().indexOf((inputValue || '').toLowerCase(), 0) !== -1;
@@ -11,7 +11,7 @@ var optionsIsGroupShapes = function (options) {
     if (!item) {
         return false;
     }
-    return coreComponentsSelect.isGroup(item);
+    return shared.isGroup(item);
 };
 var filterOptions = function (options, inputValue, math) {
     if (math === void 0) { math = defaultMatch; }

package/select-with-tags/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/select-with-tags/utils-5e1b8383.d.ts

@@ -0,0 +1,38 @@
+import { ReactNode, RefObject } from 'react';
+import { BaseSelectProps, GroupShape, OptionShape } from "./typings-5e1b8383";
+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']): {
+    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 usePrevious<T>(value: T): T | undefined;
+declare const lastIndexOf: <T>(array: T[], predicate: (item: T) => boolean) => number;
+export { isGroup, isOptionShape, joinOptions, processOptions, useVisibleOptions, usePrevious, lastIndexOf };