@alfalab/core-components 20.2.0 → 20.4.0

package/select/cssm/presets/useLazyLoading/index.module.css

@@ -0,0 +1,7 @@
+.skeleton {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    height: 16px;
+    width: 50%;
+}

package/select/cssm/presets/useSelectWithLoading/hook.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { BaseSelectProps, OptionShape } from "../../typings";
+type useSelectWithLoadingProps = {
+    loading?: boolean;
+    visibleOptions?: BaseSelectProps['visibleOptions'];
+};
+declare function useSelectWithLoading({ loading, visibleOptions, }: useSelectWithLoadingProps): {
+    Option: (props: any) => JSX.Element;
+    options: OptionShape[];
+} | null;
+export { useSelectWithLoading };

package/select/cssm/presets/useSelectWithLoading/hook.js

@@ -0,0 +1,36 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib_es6 = require('../../tslib.es6-f8106a15.js');
+var React = require('react');
+require('classnames');
+require('../../components/checkmark/index.module.css');
+require('../../components/checkmark/Component.js');
+require('../../components/option/index.module.css');
+var components_option_Component = require('../../components/option/Component.js');
+var coreComponentsSkeleton = require('../../../../skeleton/cssm');
+var styles = require('./index.module.css');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var styles__default = /*#__PURE__*/_interopDefaultLegacy(styles);
+
+function useSelectWithLoading(_a) {
+    var _b = _a.loading, loading = _b === void 0 ? false : _b, _c = _a.visibleOptions, visibleOptions = _c === void 0 ? 6 : _c;
+    var renderOption = React.useCallback(function (props) { return (React__default['default'].createElement(components_option_Component.Option, tslib_es6.__assign({}, props, { Checkmark: null, highlighted: loading ? false : props.highlighted }))); }, [loading]);
+    var options = Array(visibleOptions)
+        .fill(0)
+        .map(function (_, key) { return ({
+        key: "loading-" + key,
+        disabled: true,
+        content: React__default['default'].createElement(coreComponentsSkeleton.Skeleton, { className: styles__default['default'].skeleton, visible: true }),
+    }); });
+    if (!loading)
+        return null;
+    return {
+        Option: renderOption,
+        options: options,
+    };
+}
+
+exports.useSelectWithLoading = useSelectWithLoading;

package/select/cssm/presets/useSelectWithLoading/index.module.css

@@ -0,0 +1,7 @@
+.skeleton {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    height: 16px;
+    width: 50%;
+}

package/select/cssm/tslib.es6-f8106a15.d.ts

@@ -0,0 +1,32 @@
+declare function __extends(d: any, b: any): void;
+declare function __rest(s: any, e: any): {};
+declare function __decorate(decorators: any, target: any, key: any, desc: any, ...args: any[]): any;
+declare function __param(paramIndex: any, decorator: any): (target: any, key: any) => void;
+declare function __metadata(metadataKey: any, metadataValue: any): any;
+declare function __awaiter(thisArg: any, _arguments: any, P: any, generator: any): any;
+declare function __generator(thisArg: any, body: any): {
+    next: (v: any) => any;
+    throw: (v: any) => any;
+    return: (v: any) => any;
+};
+declare function __exportStar(m: any, o: any): void;
+declare function __values(o: any): any;
+declare function __read(o: any, n: any): any;
+declare function __spread(...args: any[]): any[];
+declare function __spreadArrays(...args: any[]): any[];
+declare function __await(v: any): any;
+declare class __await {
+    constructor(v: any);
+    v: any;
+}
+declare function __asyncGenerator(thisArg: any, _arguments: any, generator: any): {};
+declare function __asyncDelegator(o: any): {};
+declare function __asyncValues(o: any): any;
+declare function __makeTemplateObject(cooked: any, raw: any): any;
+declare function __importStar(mod: any): any;
+declare function __importDefault(mod: any): any;
+declare function __classPrivateFieldGet(receiver: any, privateMap: any): any;
+declare function __classPrivateFieldSet(receiver: any, privateMap: any, value: any): any;
+declare function __assign(...args: any[]): any;
+declare function __createBinding(o: any, m: any, k: any, k2: any): void;
+export { __extends, __rest, __decorate, __param, __metadata, __awaiter, __generator, __exportStar, __values, __read, __spread, __spreadArrays, __await, __asyncGenerator, __asyncDelegator, __asyncValues, __makeTemplateObject, __importStar, __importDefault, __classPrivateFieldGet, __classPrivateFieldSet, __assign, __createBinding };

package/select/cssm/typings.d.ts

@@ -0,0 +1,438 @@
+/// <reference types="react" />
+import { ReactNode, FC, RefAttributes, AriaAttributes, FocusEvent, MouseEvent, ReactElement } from 'react';
+import { PopoverProps } from "../../popover";
+import { InputProps } from "../../input";
+type OptionShape = {
+    /**
+     * Текстовое представление пункта
+     */
+    key: string;
+    /**
+     * Контент, который будет отрисован в выпадающем списке и в поле при выборе
+     */
+    content?: ReactNode;
+    /**
+     * Блокирует данный пункт для выбора
+     */
+    disabled?: boolean;
+    /**
+     * Дополнительные данные
+     */
+    value?: any;
+};
+type GroupShape = {
+    /**
+     * Заголовок группы
+     */
+    label?: string;
+    /**
+     * Дочерние элементы
+     */
+    options: OptionShape[];
+};
+type BaseSelectProps = {
+    /**
+     * Идентификатор для систем автоматизированного тестирования
+     */
+    dataTestId?: string;
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+    /**
+     * Дополнительный класс для поля
+     */
+    fieldClassName?: string;
+    /**
+     * Дополнительный класс выпадающего меню
+     */
+    optionsListClassName?: string;
+    /**
+     * Дополнительный класс для пункта меню
+     */
+    optionClassName?: 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;
+    /**
+     * Плейсхолдер поля
+     */
+    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>;
+    /**
+     * Компонент группы
+     */
+    Optgroup?: FC<OptgroupProps>;
+    /**
+     * Компонент пункта меню
+     */
+    Option?: FC<OptionProps>;
+    /**
+     * Обработчик выбора
+     */
+    onChange?: (payload: {
+        selected: OptionShape | null;
+        selectedMultiple: OptionShape[];
+        name?: string;
+    }) => 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'];
+    /**
+     * Показывать OptionsList, если он пустой
+     */
+    showEmptyOptionsList?: boolean;
+};
+type FieldProps = {
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+    /**
+     * Размер компонента
+     */
+    size?: 's' | 'm' | 'l' | 'xl';
+    /**
+     * Выбранный пункт
+     */
+    selected?: OptionShape;
+    /**
+     * Список выбранных пунктов
+     */
+    selectedMultiple?: OptionShape[];
+    /**
+     * Флаг, можно ли выбрать несколько значений
+     */
+    multiple?: boolean;
+    /**
+     * Флаг, открыто ли меню
+     */
+    open?: boolean;
+    /**
+     * Флаг, поле заблокировано
+     */
+    disabled?: boolean;
+    /**
+     * Лейбл поля
+     */
+    label?: ReactNode;
+    /**
+     * Плейсхолдер поля
+     */
+    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;
+};
+type ArrowProps = {
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+    /**
+     * Флаг, открыто ли меню
+     */
+    open?: boolean;
+};
+type OptionsListProps = {
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+    /**
+     * Размер компонента
+     */
+    size?: 's' | 'm' | 'l' | 'xl';
+    /**
+     * Компонент пункта меню
+     */
+    Option: (props: {
+        option: OptionShape;
+        index: number;
+    }) => JSX.Element | null;
+    /**
+     * Список вариантов выбора
+     */
+    options?: Array<OptionShape | GroupShape>;
+    /**
+     * Плоский список пунктов меню (например, нужно для виртуализации)
+     */
+    flatOptions?: OptionShape[];
+    /**
+     * Индекс выделенного пункта
+     */
+    highlightedIndex?: number;
+    /**
+     * Флаг, открыто ли меню
+     */
+    open?: boolean;
+    /**
+     * Компонент группы
+     */
+    Optgroup?: BaseSelectProps['Optgroup'];
+    /**
+     * Будет отображаться, если компонент пустой
+     */
+    emptyPlaceholder?: string;
+    /**
+     * Количество видимых пунктов меню (5 = 5.5)
+     */
+    visibleOptions?: number;
+    /**
+     * Обработчик скрола
+     */
+    onScroll?: (event: MouseEvent<HTMLDivElement>) => void;
+    /**
+     * Идентификатор для систем автоматизированного тестирования
+     */
+    dataTestId?: string;
+    /**
+     * Дополнительные пропсы для Input'a, находящегося внутри кастомного OptionsList
+     */
+    inputProps?: InputProps;
+};
+type OptgroupProps = {
+    /**
+     * Размер компонента
+     */
+    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;
+    /**
+     * Компонент пункта меню
+     */
+    Checkmark?: FC<CheckmarkProps>;
+    /**
+     * Внутренние свойства, которые должны быть установлены компоненту.
+     */
+    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;
+};
+type CheckmarkProps = {
+    /**
+     * Флаг, данный пункт выбран
+     */
+    selected?: boolean;
+};
+export { OptionShape, GroupShape, BaseSelectProps, FieldProps, ArrowProps, OptionsListProps, OptgroupProps, OptionProps, CheckmarkProps };

package/select/cssm/typings.js

@@ -0,0 +1 @@
+

package/select/cssm/utils.d.ts

@@ -0,0 +1,38 @@
+import { ReactNode, RefObject } from 'react';
+import { OptionShape, GroupShape, BaseSelectProps } from "./typings";
+declare const isGroup: (item: OptionShape | GroupShape) => item is GroupShape;
+declare const isOptionShape: (item: string | OptionShape | 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 };

package/select/cssm/utils.js

@@ -0,0 +1,93 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+
+var isGroup = function (item) {
+    return Object.prototype.hasOwnProperty.call(item, 'options');
+};
+var isOptionShape = function (item) {
+    return !!item && Object.prototype.hasOwnProperty.call(item, 'key');
+};
+var joinOptions = function (_a) {
+    var selected = _a.selected, selectedMultiple = _a.selectedMultiple;
+    var options = selectedMultiple || (selected ? [selected] : []);
+    if (!options.length)
+        return null;
+    return options.reduce(function (acc, option, index) {
+        if (React.isValidElement(option.content)) {
+            acc.push(React.cloneElement(option.content, { key: option.key }));
+        }
+        else {
+            acc.push(option.content);
+        }
+        if (index < options.length - 1)
+            acc.push(', ');
+        return acc;
+    }, []);
+};
+// За один проход делает список пунктов меню плоским и находит выбранные пункты по ключу
+function processOptions(options, selected) {
+    if (selected === void 0) { selected = []; }
+    var flatOptions = [];
+    var selectedArray = Array.isArray(selected) ? selected : [selected];
+    var selectedOptions = selectedArray.filter(isOptionShape);
+    var selectedKeys = selectedArray.filter(function (option) { return typeof option === 'string'; });
+    var isSelected = function (option) { return selectedKeys.includes(option.key); };
+    var process = function (option) {
+        flatOptions.push(option);
+        if (isSelected(option)) {
+            selectedOptions.push(option);
+        }
+    };
+    options.forEach(function (option) {
+        if (isGroup(option)) {
+            option.options.forEach(process);
+        }
+        else {
+            process(option);
+        }
+    });
+    return { flatOptions: flatOptions, selectedOptions: selectedOptions };
+}
+function useVisibleOptions(_a) {
+    var visibleOptions = _a.visibleOptions, listRef = _a.listRef, _b = _a.styleTargetRef, styleTargetRef = _b === void 0 ? listRef : _b, open = _a.open, invalidate = _a.invalidate;
+    React.useEffect(function () {
+        var list = listRef.current;
+        var styleTarget = styleTargetRef.current;
+        if (open && list && styleTarget) {
+            var optionsNodes = [].slice.call(list.children, 0, visibleOptions + 1);
+            var height = optionsNodes
+                .slice(0, visibleOptions)
+                .reduce(function (acc, child) { return acc + child.clientHeight; }, 0);
+            if (visibleOptions < list.children.length) {
+                // Добавляем половинку
+                height += Math.round(optionsNodes[optionsNodes.length - 1].clientHeight / 2);
+            }
+            styleTarget.style.height = height + "px";
+        }
+    }, [listRef, open, styleTargetRef, visibleOptions, invalidate]);
+}
+// TODO: перенести
+function usePrevious(value) {
+    var ref = React.useRef();
+    React.useEffect(function () {
+        ref.current = value;
+    }, [value]);
+    return ref.current;
+}
+// TODO: перенести
+var lastIndexOf = function (array, predicate) {
+    for (var i = array.length - 1; i >= 0; i--) {
+        if (predicate(array[i]))
+            return i;
+    }
+    return -1;
+};
+
+exports.isGroup = isGroup;
+exports.isOptionShape = isOptionShape;
+exports.joinOptions = joinOptions;
+exports.lastIndexOf = lastIndexOf;
+exports.processOptions = processOptions;
+exports.usePrevious = usePrevious;
+exports.useVisibleOptions = useVisibleOptions;

package/select/cssm/vars.css

@@ -0,0 +1,10 @@
+:root {
+
+    /* options list */
+
+    /* option */
+
+    /* checkmark */
+
+    /* optgroup */
+}