@alfalab/core-components 47.6.0-beta.0 → 47.7.0

package/select/moderncssm/components/virtual-options-list/Component.js

@@ -1,139 +0,0 @@
-import React, { forwardRef, useRef, useState, useEffect, useMemo } from 'react';
-import mergeRefs from 'react-merge-refs';
-import { useVirtual } from 'react-virtual';
-import cn from 'classnames';
-import { useMatchMedia } from '../../../../mq/moderncssm';
-import { Scrollbar } from '../../../../scrollbar/moderncssm';
-import { isClient } from '../../../../shared/moderncssm';
-import { SIZE_TO_CLASSNAME_MAP, DEFAULT_VISIBLE_OPTIONS } from '../../consts.js';
-import { usePrevious, lastIndexOf, useVisibleOptions, isGroup } from '../../utils.js';
-import { Optgroup } from '../optgroup/Component.js';
-import styles from './index.module.css';
-import '../optgroup/index.module.css';
-
-const VirtualOptionsList = forwardRef(({ size = 48, flatOptions = [], highlightedIndex = -1, optionGroupClassName, className, getOptionProps, Option, open, options = [], Optgroup: Optgroup$1 = Optgroup, dataTestId, emptyPlaceholder, visibleOptions = DEFAULT_VISIBLE_OPTIONS, header, footer, showFooter = true, optionsListWidth, onScroll, nativeScrollbar: nativeScrollbarProp, setHighlightedIndex, selectedItems, setSelectedItems, search, multiple, }, ref) => {
-    const listRef = useRef(null);
-    const parentRef = useRef(null);
-    const scrollbarRef = useRef(null);
-    const [visibleOptionsInvalidateKey, setVisibleOptionsInvalidateKey] = useState('');
-    const prevHighlightedIndex = usePrevious(highlightedIndex) || -1;
-    const query = '(max-width: 1023px)';
-    let [nativeScrollbar] = useMatchMedia(query, () => isClient() ? window.matchMedia(query).matches : true);
-    const rowVirtualizer = useVirtual({
-        size: flatOptions.length,
-        parentRef: (ref || parentRef),
-        overscan: 15,
-    });
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    nativeScrollbar = Boolean(nativeScrollbarProp ?? nativeScrollbar);
-    // Сколл к выбранному пункту при открытии меню
-    useEffect(() => {
-        if (open) {
-            rowVirtualizer.scrollToIndex(highlightedIndex, { align: 'end' });
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [open]);
-    // Скролл к пункту, которого нет на экране
-    useEffect(() => {
-        if (highlightedIndex === -1)
-            return;
-        if (!rowVirtualizer.virtualItems.some((option) => option.index === highlightedIndex)) {
-            rowVirtualizer.scrollToIndex(highlightedIndex, { align: 'end' });
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [highlightedIndex]);
-    // Циклическая навигация
-    useEffect(() => {
-        const notDisabled = (option) => !option.disabled;
-        const firstNonDisabled = flatOptions.findIndex(notDisabled);
-        const lastNonDisabled = lastIndexOf(flatOptions, notDisabled);
-        if (prevHighlightedIndex <= firstNonDisabled &&
-            highlightedIndex === flatOptions.length - 1) {
-            rowVirtualizer.scrollToIndex(lastNonDisabled);
-        }
-        if (prevHighlightedIndex >= lastNonDisabled && highlightedIndex === 0) {
-            rowVirtualizer.scrollToIndex(0);
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [prevHighlightedIndex, highlightedIndex]);
-    useEffect(() => {
-        setVisibleOptionsInvalidateKey(
-        /**
-         * react-virtual может несколько раз отрендерить список с одним элементом,
-         * поэтому нужно еще раз пересчитать высоту, когда список ВИДИМЫХ пунктов будет отрендерен полностью
-         * Также, высоту нужно пересчитывать при изменении пунктов меню
-         */
-        rowVirtualizer.virtualItems
-            .slice(0, Math.min(rowVirtualizer.virtualItems.length, visibleOptions + 1))
-            .map((item) => flatOptions[item.index].key)
-            .join('_'));
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [rowVirtualizer.virtualItems.length, flatOptions]);
-    useVisibleOptions({
-        visibleOptions,
-        invalidate: visibleOptionsInvalidateKey,
-        listRef,
-        styleTargetRef: nativeScrollbar ? parentRef : scrollbarRef,
-        open,
-    });
-    // Т.к. рендерится плоский список, необходимо знать индекс, когда начинается новая группа
-    const groupStartIndexes = useMemo(() => {
-        let currentIndex = 0;
-        return options.reduce((acc, option, index) => {
-            if (isGroup(option)) {
-                acc[currentIndex] = index;
-                currentIndex += option.options.length;
-            }
-            else {
-                currentIndex += 1;
-            }
-            return acc;
-        }, {});
-    }, [options]);
-    const renderList = () => rowVirtualizer.virtualItems.map((virtualRow) => {
-        const option = flatOptions[virtualRow.index];
-        const renderGroup = () => {
-            const group = options[groupStartIndexes[virtualRow.index]];
-            if (!group)
-                return null;
-            const groupSelectedItems = selectedItems?.filter((item) => group.options.includes(item));
-            const handleSelectedItems = (items) => {
-                setSelectedItems((selectedItems?.filter((item) => !group.options.includes(item)) ?? []).concat(items));
-            };
-            return (React.createElement(Optgroup$1, { label: group.label, size: size, className: optionGroupClassName, options: group.options, selectedItems: groupSelectedItems, setSelectedItems: handleSelectedItems, search: search, multiple: multiple }));
-        };
-        return (React.createElement("div", { key: virtualRow.index, ref: virtualRow.measureRef, className: cn(styles.virtualRow, {
-                [styles.highlighted]: highlightedIndex === virtualRow.index,
-            }), style: {
-                transform: `translateY(${virtualRow.start}px)`,
-            } },
-            renderGroup(),
-            !isGroup(option) && (React.createElement(Option, { ...getOptionProps(option, virtualRow.index) }))));
-    });
-    const contentNodeProps = {
-        className: styles.inner,
-        style: { height: `${rowVirtualizer.totalSize}px` },
-        ref: listRef,
-    };
-    const renderWithCustomScrollbar = () => (React.createElement(Scrollbar, { className: styles.scrollable, ref: scrollbarRef, horizontalAutoStretch: optionsListWidth === 'content', scrollableNodeProps: { onScroll, ref: parentRef }, contentNodeProps: contentNodeProps }, renderList()));
-    const renderWithNativeScrollbar = () => {
-        if (visibleOptions) {
-            return (React.createElement("div", { className: styles.scrollable, ref: mergeRefs([parentRef, ref]), onScroll: onScroll },
-                React.createElement("div", { ...contentNodeProps }, renderList())));
-        }
-        return React.createElement("div", { ...contentNodeProps }, renderList());
-    };
-    const resetHighlightedIndex = () => setHighlightedIndex?.(-1);
-    if (options.length === 0 && !emptyPlaceholder) {
-        return null;
-    }
-    return (React.createElement("div", { className: cn(styles.virtualOptionsList, styles[SIZE_TO_CLASSNAME_MAP[size]], className), "data-test-id": dataTestId },
-        header && (React.createElement("div", { className: styles.virtualOptionsListHeader, onMouseEnter: resetHighlightedIndex }, header)),
-        nativeScrollbar ? renderWithNativeScrollbar() : renderWithCustomScrollbar(),
-        emptyPlaceholder && options.length === 0 && (React.createElement("div", { className: styles.emptyPlaceholder }, emptyPlaceholder)),
-        showFooter && footer && (React.createElement("div", { onMouseEnter: resetHighlightedIndex, className: cn(styles.virtualOptionsListFooter, {
-                [styles.withBorder]: visibleOptions && flatOptions.length > visibleOptions,
-            }) }, footer))));
-});
-
-export { VirtualOptionsList };

package/select/moderncssm/components/virtual-options-list/index.d.ts

@@ -1 +0,0 @@
-export * from "./Component";

package/select/moderncssm/components/virtual-options-list/index.js

@@ -1,13 +0,0 @@
-export { VirtualOptionsList } from './Component.js';
-import 'react';
-import 'react-merge-refs';
-import 'react-virtual';
-import 'classnames';
-import '../../../../mq/moderncssm';
-import '../../../../scrollbar/moderncssm';
-import '../../../../shared/moderncssm';
-import '../../consts.js';
-import '../../utils.js';
-import '../optgroup/Component.js';
-import '../optgroup/index.module.css';
-import './index.module.css';

package/select/moderncssm/components/virtual-options-list/index.module.css

@@ -1,79 +0,0 @@
-/* */
-:root {
-
-    /* options list */
-    --select-options-list-empty-placeholder-color: var(--color-light-text-secondary);
-    --select-option-divider-display: none;
-    --select-option-divider-background: var(--color-light-neutral-400);
-
-    /* option */
-
-    --select-option-left-padding: var(--gap-s);
-    --select-option-right-padding: var(--gap-s);
-
-    /* checkmark */
-
-    /* optgroup */
-}
-.virtualOptionsList {
-    width: 100%;
-    outline: none;
-    box-sizing: border-box;
-    position: sticky;
-    justify-content: space-between;
-}
-.virtualOptionsListHeader {
-    box-sizing: border-box;
-    border-bottom: 1px solid var(--color-light-neutral-300);
-}
-.virtualOptionsListFooter {
-    position: sticky;
-    bottom: 0;
-    box-sizing: border-box;
-    border-top: 1px solid transparent
-}
-.virtualOptionsListFooter.withBorder {
-        border-top: 1px solid var(--color-light-neutral-300);
-    }
-.scrollable {
-    position: relative;
-    overflow: auto;
-    width: 100%;
-}
-.inner {
-    position: relative;
-    width: 100%;
-}
-.virtualRow {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%
-}
-.virtualRow:before {
-        content: '';
-        position: absolute;
-        z-index: 1;
-        left: var(--select-option-left-padding);
-        right: var(--select-option-right-padding);
-        top: 0;
-        height: 1px;
-        background: var(--select-option-divider-background);
-        display: var(--select-option-divider-display);
-    }
-.virtualRow:first-child:before {
-        display: none;
-    }
-.highlighted:before,
-    .highlighted + .virtualRow:before {
-        display: none;
-    }
-.emptyPlaceholder {
-    padding: var(--gap-m) var(--gap-s);
-    color: var(--select-options-list-empty-placeholder-color);
-    flex: 1;
-}
-.size-64 .emptyPlaceholder,
-.size-72 .emptyPlaceholder {
-    padding: var(--gap-xl) var(--gap-m);
-}

package/select/moderncssm/consts.d.ts

@@ -1,12 +0,0 @@
-declare const DEFAULT_VISIBLE_OPTIONS = 5;
-declare const SIZE_TO_CLASSNAME_MAP: {
-    s: string;
-    m: string;
-    l: string;
-    xl: string;
-    48: string;
-    56: string;
-    64: string;
-    72: string;
-};
-export { DEFAULT_VISIBLE_OPTIONS, SIZE_TO_CLASSNAME_MAP };

package/select/moderncssm/consts.js

@@ -1,13 +0,0 @@
-const DEFAULT_VISIBLE_OPTIONS = 5;
-const SIZE_TO_CLASSNAME_MAP = {
-    s: 'size-48',
-    m: 'size-56',
-    l: 'size-64',
-    xl: 'size-72',
-    48: 'size-48',
-    56: 'size-56',
-    64: 'size-64',
-    72: 'size-72',
-};
-
-export { DEFAULT_VISIBLE_OPTIONS, SIZE_TO_CLASSNAME_MAP };

package/select/moderncssm/desktop/Component.desktop.d.ts

@@ -1,6 +0,0 @@
-/// <reference types="react" />
-import React from 'react';
-declare const SelectDesktop: React.ForwardRefExoticComponent<Omit<import("../typings").BaseSelectProps, "fieldProps"> & {
-    fieldProps?: import("../typings").SelectFieldProps | undefined;
-} & React.RefAttributes<HTMLDivElement>>;
-export { SelectDesktop };

package/select/moderncssm/desktop/Component.desktop.js

@@ -1,55 +0,0 @@
-import React, { forwardRef } from 'react';
-import { FormControlDesktop } from '../../../form-control/moderncssm/desktop';
-import { Popover } from '../../../popover/moderncssm';
-import { Arrow } from '../components/arrow/Component.js';
-import { BaseSelect } from '../components/base-select/Component.js';
-import { Field } from '../components/field/Component.js';
-import { Optgroup } from '../components/optgroup/Component.js';
-import { Option } from '../components/option/Component.js';
-import { OptionsList } from '../components/options-list/Component.js';
-import { Search } from '../components/search/Component.js';
-import 'classnames';
-import '@alfalab/icons-glyph/ChevronDownMIcon';
-import '../components/arrow/index.module.css';
-import 'react-merge-refs';
-import '@juggle/resize-observer';
-import 'compute-scroll-into-view';
-import 'downshift';
-import '../../../shared/moderncssm';
-import '@alfalab/hooks';
-import '../utils.js';
-import '../components/native-select/Component.js';
-import '../components/base-select/components/list-desktop/helpers/get-list-popover-desktop-props.js';
-import '../components/base-select/components/list-desktop/list-popover-desktop.js';
-import '../components/base-select/index.module.css';
-import '../components/base-select/components/list-mobile/helpers/get-list-modal-mobile-props.js';
-import '../components/base-select/components/list-mobile/helpers/get-list-bottom-sheet-mobile-props.js';
-import '../components/base-select/components/list-mobile/list-mobile.js';
-import '../components/base-select/components/list-mobile/list-bottom-sheet-mobile.js';
-import '../components/base-select/mobile.module.css';
-import '../components/base-select/components/list-mobile/list-modal-mobile.js';
-import '../components/field/index.module.css';
-import '../consts.js';
-import '../components/optgroup/index.module.css';
-import '../components/checkmark/Component.js';
-import '../../../badge/moderncssm';
-import '../../../checkbox/moderncssm';
-import '@alfalab/icons-glyph/CheckmarkCircleMIcon';
-import '@alfalab/icons-glyph/CheckmarkMIcon';
-import '../components/checkmark/index.module.css';
-import '../components/checkmark-mobile/Component.js';
-import '../components/checkmark-mobile/index.module.css';
-import '../components/option/index.module.css';
-import '../../../mq/moderncssm';
-import '../../../scrollbar/moderncssm';
-import '../components/options-list/index.module.css';
-import '../../../input/moderncssm';
-import '@alfalab/icons-glyph/MagnifierMIcon';
-import '../components/search/index.module.css';
-
-const SelectDesktop = forwardRef(({ Arrow: Arrow$1 = Arrow, Field: Field$1 = Field, OptionsList: OptionsList$1 = OptionsList, Optgroup: Optgroup$1 = Optgroup, Option: Option$1 = Option, Search: Search$1 = Search, fieldProps = {}, ...restProps }, ref) => (React.createElement(BaseSelect, { ref: ref, view: 'desktop', Option: Option$1, Field: Field$1, fieldProps: {
-        FormControlComponent: FormControlDesktop,
-        ...fieldProps,
-    }, Search: Search$1, Optgroup: Optgroup$1, OptionsList: OptionsList$1, Arrow: Arrow$1, Popover: Popover, ...restProps })));
-
-export { SelectDesktop };

package/select/moderncssm/desktop/index.d.ts

@@ -1,2 +0,0 @@
-export { SelectDesktop } from "./Component.desktop";
-export type { SelectDesktopProps } from "../typings";

package/select/moderncssm/desktop/index.js

@@ -1,49 +0,0 @@
-export { SelectDesktop } from './Component.desktop.js';
-import 'react';
-import '../../../form-control/moderncssm/desktop';
-import '../../../popover/moderncssm';
-import '../components/arrow/Component.js';
-import 'classnames';
-import '@alfalab/icons-glyph/ChevronDownMIcon';
-import '../components/arrow/index.module.css';
-import '../components/base-select/Component.js';
-import 'react-merge-refs';
-import '@juggle/resize-observer';
-import 'compute-scroll-into-view';
-import 'downshift';
-import '../../../shared/moderncssm';
-import '@alfalab/hooks';
-import '../utils.js';
-import '../components/native-select/Component.js';
-import '../components/base-select/components/list-desktop/helpers/get-list-popover-desktop-props.js';
-import '../components/base-select/components/list-desktop/list-popover-desktop.js';
-import '../components/base-select/index.module.css';
-import '../components/base-select/components/list-mobile/helpers/get-list-modal-mobile-props.js';
-import '../components/base-select/components/list-mobile/helpers/get-list-bottom-sheet-mobile-props.js';
-import '../components/base-select/components/list-mobile/list-mobile.js';
-import '../components/base-select/components/list-mobile/list-bottom-sheet-mobile.js';
-import '../components/base-select/mobile.module.css';
-import '../components/base-select/components/list-mobile/list-modal-mobile.js';
-import '../components/field/Component.js';
-import '../components/field/index.module.css';
-import '../components/optgroup/Component.js';
-import '../consts.js';
-import '../components/optgroup/index.module.css';
-import '../components/option/Component.js';
-import '../components/checkmark/Component.js';
-import '../../../badge/moderncssm';
-import '../../../checkbox/moderncssm';
-import '@alfalab/icons-glyph/CheckmarkCircleMIcon';
-import '@alfalab/icons-glyph/CheckmarkMIcon';
-import '../components/checkmark/index.module.css';
-import '../components/checkmark-mobile/Component.js';
-import '../components/checkmark-mobile/index.module.css';
-import '../components/option/index.module.css';
-import '../components/options-list/Component.js';
-import '../../../mq/moderncssm';
-import '../../../scrollbar/moderncssm';
-import '../components/options-list/index.module.css';
-import '../components/search/Component.js';
-import '../../../input/moderncssm';
-import '@alfalab/icons-glyph/MagnifierMIcon';
-import '../components/search/index.module.css';

package/select/moderncssm/hook-8c561f14.d.ts

@@ -1,115 +0,0 @@
-/// <reference types="react" />
-import { BaseSelectProps, OptionShape } from "./typings";
-type UseSelectWithApplyProps = {
-    /**
-     * Список выбранных пунктов
-     */
-    selected: BaseSelectProps['selected'];
-    /**
-     * Список вариантов выбора
-     */
-    options: BaseSelectProps['options'];
-    /**
-     * Обработчик выбора
-     */
-    onChange: BaseSelectProps['onChange'];
-    /**
-     * Компонент выпадающего меню
-     */
-    OptionsList?: BaseSelectProps['OptionsList'];
-    /**
-     * Пропсы, которые будут прокинуты в компонент списка
-     */
-    optionsListProps?: BaseSelectProps['optionsListProps'];
-    /**
-     * Включает отображение поиска
-     */
-    showSearch?: BaseSelectProps['showSearch'];
-    /**
-     *  Настройки поиска
-     */
-    searchProps?: BaseSelectProps['searchProps'];
-    /**
-     * Показывать кнопку очистки
-     */
-    showClear?: boolean;
-    /**
-     * Показывать пункт "Выбрать все"
-     */
-    showSelectAll?: boolean;
-    /**
-     * Показывать пункт "Выбрать все" в заголовке списка
-     */
-    showHeaderWithSelectAll?: boolean;
-};
-declare const SELECT_ALL_KEY = "select_all";
-declare function useSelectWithApply({ options, selected, onChange, OptionsList, optionsListProps, showClear, showSelectAll, showHeaderWithSelectAll, showSearch, searchProps, }: UseSelectWithApplyProps): {
-    OptionsList: import("react").ForwardRefExoticComponent<import("./typings").OptionsListProps & {
-        showClear?: boolean | undefined;
-        onClose?: (() => void) | undefined;
-        /**
-         * Обработчик выбора
-         */
-        selectedDraft?: OptionShape[] | undefined;
-        OptionsList?: import("react").FC<import("./typings").OptionsListProps & import("react").RefAttributes<HTMLDivElement>> | undefined;
-        Footer?: import("react").FC<import("./presets/useSelectWithApply/options-list-with-apply/footer/Component").FooterProps> | undefined;
-        Header?: import("react").FC<import("./presets/useSelectWithApply/options-list-with-apply/header/Component").HeaderProps> | undefined;
-        headerProps?: import("./presets/useSelectWithApply/options-list-with-apply/header/Component").HeaderProps | undefined;
-        showHeaderWithSelectAll?: boolean | undefined;
-        setSelectedDraft?: ((selectedDraft: OptionShape[]) => void) | undefined;
-    } & import("react").RefAttributes<HTMLDivElement>>;
-    optionsListProps: {
-        OptionsList: import("react").ComponentType<import("./typings").OptionsListProps & import("react").RefAttributes<HTMLDivElement>> | undefined;
-        showClear: boolean;
-        onClear: () => void;
-        onApply: () => void;
-        onClose: () => void;
-        selectedDraft: OptionShape[];
-        setSelectedDraft: import("react").Dispatch<import("react").SetStateAction<OptionShape[]>>;
-        showHeaderWithSelectAll: boolean;
-        headerProps: {
-            indeterminate: boolean;
-            checked: boolean;
-            onChange: () => void;
-        };
-    };
-    allowUnselect: boolean;
-    multiple: boolean;
-    options: (OptionShape | import("./typings").GroupShape | {
-        key: string;
-        content: string;
-    })[];
-    onChange: (payload: import("./typings").BaseSelectChangePayload) => void;
-    selected: string | OptionShape | (string | OptionShape)[] | null | undefined;
-    showSearch: boolean;
-    searchProps: {
-        value: string;
-        onChange: ((value: string) => void) | undefined;
-        componentProps?: import("./typings").SearchProps | undefined;
-        accessor?: ((option: OptionShape) => string) | undefined;
-        filterFn?: ((optionText: string, search: string) => boolean) | undefined;
-        filterGroup?: boolean | undefined;
-        groupAccessor?: ((group: import("./typings").GroupShape) => string | undefined) | undefined;
-    } | undefined;
-    originalProps: {
-        options: (OptionShape | import("./typings").GroupShape)[];
-        selected: string | OptionShape | (string | OptionShape)[] | null | undefined;
-        onChange: (payload: import("./typings").BaseSelectChangePayload) => void;
-        OptionsList: import("react").ComponentType<import("./typings").OptionsListProps & import("react").RefAttributes<HTMLDivElement>> | undefined;
-        optionsListProps: unknown;
-        showClear: boolean;
-        showSelectAll: boolean;
-        showHeaderWithSelectAll: boolean;
-        showSearch: boolean;
-        searchProps: {
-            componentProps?: import("./typings").SearchProps | undefined;
-            accessor?: ((option: OptionShape) => string) | undefined;
-            filterFn?: ((optionText: string, search: string) => boolean) | undefined;
-            value?: string | undefined;
-            onChange?: ((value: string) => void) | undefined;
-            filterGroup?: boolean | undefined;
-            groupAccessor?: ((group: import("./typings").GroupShape) => string | undefined) | undefined;
-        };
-    };
-};
-export { UseSelectWithApplyProps, SELECT_ALL_KEY, useSelectWithApply };

package/select/moderncssm/hook-a8bc7fe8.d.ts

@@ -1,17 +0,0 @@
-/// <reference types="react" />
-import React from 'react';
-import { OptionShape, OptionsListProps } from "./typings";
-import { FooterProps } from "./presets/useSelectWithApply/options-list-with-apply/footer/Component";
-import { HeaderProps } from "./presets/useSelectWithApply/options-list-with-apply/header/Component";
-declare const OptionsListWithApply: React.ForwardRefExoticComponent<OptionsListProps & {
-    showClear?: boolean | undefined;
-    onClose?: (() => void) | undefined;
-    selectedDraft?: OptionShape[] | undefined;
-    OptionsList?: React.FC<OptionsListProps & React.RefAttributes<HTMLDivElement>> | undefined;
-    Footer?: React.FC<FooterProps> | undefined;
-    Header?: React.FC<HeaderProps> | undefined;
-    headerProps?: HeaderProps | undefined;
-    showHeaderWithSelectAll?: boolean | undefined;
-    setSelectedDraft?: ((selectedDraft: OptionShape[]) => void) | undefined;
-} & React.RefAttributes<HTMLDivElement>>;
-export { OptionsListWithApply };