@alfalab/core-components-select 17.10.0 → 17.11.0

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

@@ -0,0 +1,138 @@
+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 '@alfalab/core-components-mq/moderncssm';
+import { Scrollbar } from '@alfalab/core-components-scrollbar/moderncssm';
+import { isClient } from '@alfalab/core-components-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';
+
+const VirtualOptionsList = forwardRef(({ size = 48, flatOptions = [], highlightedIndex = -1, optionGroupClassName, className, getOptionProps, groupOptionProps = {}, 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, ...groupOptionProps }));
+        };
+        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/moderncssm/components/virtual-options-list/index.d.ts

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

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

@@ -0,0 +1 @@
+export { VirtualOptionsList } from './Component.js';

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

@@ -0,0 +1,79 @@
+/* */
+: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-12);
+    --select-option-right-padding: var(--gap-12);
+
+    /* 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-16) var(--gap-12);
+    color: var(--select-options-list-empty-placeholder-color);
+    flex: 1;
+}
+.size-64 .emptyPlaceholder,
+.size-72 .emptyPlaceholder {
+    padding: var(--gap-24) var(--gap-16);
+}

package/moderncssm/consts.d.ts

@@ -0,0 +1,12 @@
+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/moderncssm/consts.js

@@ -0,0 +1,13 @@
+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/moderncssm/desktop/Component.desktop.d.ts

@@ -0,0 +1,6 @@
+/// <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/moderncssm/desktop/Component.desktop.js

@@ -0,0 +1,17 @@
+import React, { forwardRef } from 'react';
+import { FormControlDesktop } from '@alfalab/core-components-form-control/moderncssm/desktop';
+import { Popover } from '@alfalab/core-components-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';
+
+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/moderncssm/desktop/index.d.ts

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

package/moderncssm/desktop/index.js

@@ -0,0 +1 @@
+export { SelectDesktop } from './Component.desktop.js';

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

@@ -0,0 +1,115 @@
+/// <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/moderncssm/hook-a8bc7fe8.d.ts

@@ -0,0 +1,17 @@
+/// <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 };

package/moderncssm/hook-a8bc7fe8.js

@@ -0,0 +1,169 @@
+import React, { forwardRef, useCallback, useEffect, useState, useMemo, useRef } from 'react';
+import deepEqual from 'deep-equal';
+import { defaultAccessor, defaultFilterFn, defaultGroupAccessor, processOptions, isGroup } from './utils.js';
+import { OptionsList } from './components/options-list/Component.js';
+import { DEFAULT_VISIBLE_OPTIONS } from './consts.js';
+import { Footer } from './presets/useSelectWithApply/options-list-with-apply/footer/Component.js';
+import { Header } from './presets/useSelectWithApply/options-list-with-apply/header/Component.js';
+
+const OptionsListWithApply = forwardRef(({ toggleMenu, getOptionProps: defaultGetOptionProps, showClear = true, showHeaderWithSelectAll, selectedDraft = [], flatOptions = [], OptionsList: OptionsList$1 = OptionsList, onApply = () => null, onClear = () => null, onClose = () => null, visibleOptions = DEFAULT_VISIBLE_OPTIONS, Footer: Footer$1 = Footer, Header: Header$1 = Header, header, headerProps, setSelectedDraft, ...restProps }, ref) => {
+    const getOptionProps = useCallback((option, index) => {
+        const optionProps = defaultGetOptionProps(option, index);
+        const selected = option.key === SELECT_ALL_KEY
+            ? selectedDraft.length === flatOptions.length - 1
+            : selectedDraft.some(({ key }) => key === option.key);
+        return {
+            ...optionProps,
+            selected,
+        };
+    }, [defaultGetOptionProps, flatOptions.length, selectedDraft]);
+    const handleApply = useCallback(() => {
+        onApply();
+        toggleMenu();
+    }, [onApply, toggleMenu]);
+    const handleClear = useCallback(() => {
+        onClear();
+        toggleMenu();
+    }, [onClear, toggleMenu]);
+    const handleSelectedItems = useCallback((items) => {
+        setSelectedDraft?.(items);
+    }, [setSelectedDraft]);
+    useEffect(() => {
+        const activeElement = document.activeElement;
+        return () => {
+            onClose();
+            if (activeElement) {
+                activeElement.focus();
+            }
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    const renderHeader = () => {
+        if (!showHeaderWithSelectAll && !header)
+            return undefined;
+        return (React.createElement(React.Fragment, null,
+            header,
+            showHeaderWithSelectAll && flatOptions.length > 0 && (React.createElement(Header$1, { ...headerProps }))));
+    };
+    return (React.createElement(OptionsList$1, { ...restProps, ref: ref, visibleOptions: visibleOptions, toggleMenu: toggleMenu, flatOptions: flatOptions, getOptionProps: getOptionProps, onApply: handleApply, onClear: handleClear, header: renderHeader(), selectedItems: selectedDraft, setSelectedItems: handleSelectedItems, footer: React.createElement(Footer$1, { handleApply: handleApply, handleClear: handleClear, showClear: showClear, selectedDraft: selectedDraft, dataTestId: restProps?.dataTestId }) }));
+});
+
+const SELECT_ALL_KEY = 'select_all';
+const selectAllOption = { key: SELECT_ALL_KEY, content: 'Выбрать все' };
+function useSelectWithApply({ options, selected, onChange = () => null, OptionsList, optionsListProps = {}, showClear = true, showSelectAll = false, showHeaderWithSelectAll = false, showSearch = false, searchProps = {}, }) {
+    const [searchState, setSearchState] = useState('');
+    const [search, setSearch] = typeof searchProps?.value === 'string'
+        ? [searchProps.value, searchProps.onChange]
+        : [searchState, setSearchState];
+    const accessor = searchProps.accessor || defaultAccessor;
+    const filterFn = searchProps.filterFn || defaultFilterFn;
+    const groupAccessor = searchProps.groupAccessor ?? defaultGroupAccessor;
+    const filterGroup = searchProps.filterGroup ?? false;
+    const { flatOptions, filteredOptions, selectedOptions } = useMemo(() => processOptions(options, selected, showSearch
+        ? (option) => {
+            if (isGroup(option)) {
+                const groupAccessorValue = groupAccessor(option);
+                return (typeof groupAccessorValue === 'string' &&
+                    filterFn(groupAccessorValue, search));
+            }
+            return filterFn(accessor(option), search);
+        }
+        : undefined, filterGroup), [options, selected, showSearch, filterGroup, filterFn, accessor, search, groupAccessor]);
+    const [selectedDraft, setSelectedDraft] = useState(selectedOptions);
+    const selectedOptionsRef = useRef(selectedOptions);
+    const handleApply = () => {
+        onChange({
+            selected: selectedDraft[0],
+            selectedMultiple: selectedDraft,
+            initiator: null,
+        });
+    };
+    const handleClear = () => {
+        setSelectedDraft([]);
+        onChange({
+            selected: null,
+            selectedMultiple: [],
+            initiator: null,
+        });
+    };
+    const handleToggleAll = () => {
+        setSelectedDraft(flatOptions.length === selectedDraft.length ? [] : flatOptions);
+    };
+    const handleChange = ({ initiator, ...restArgs }) => {
+        if (!initiator) {
+            onChange({
+                initiator: null,
+                ...restArgs,
+            });
+            return;
+        }
+        const initiatorSelected = selectedDraft.includes(initiator) ||
+            (initiator.key === SELECT_ALL_KEY && selectedDraft.length === flatOptions.length);
+        if (initiator.key === SELECT_ALL_KEY) {
+            setSelectedDraft(initiatorSelected ? [] : flatOptions);
+        }
+        else {
+            setSelectedDraft(initiatorSelected
+                ? selectedDraft.filter((o) => o !== initiator)
+                : selectedDraft.concat(initiator));
+        }
+    };
+    const handleClose = () => setSelectedDraft(selectedOptionsRef.current);
+    useEffect(() => {
+        // устанавливать selectedDraft если selectedOptions изменились
+        if (!deepEqual(selectedOptionsRef.current, selectedOptions)) {
+            setSelectedDraft(selectedOptions);
+        }
+        selectedOptionsRef.current = selectedOptions;
+    }, [selectedOptions]);
+    const memoizedOptions = useMemo(() => filteredOptions.length && showSelectAll
+        ? [selectAllOption, ...filteredOptions]
+        : filteredOptions, [filteredOptions, showSelectAll]);
+    return {
+        OptionsList: OptionsListWithApply,
+        optionsListProps: {
+            ...optionsListProps,
+            OptionsList,
+            showClear,
+            onClear: handleClear,
+            onApply: handleApply,
+            onClose: handleClose,
+            selectedDraft,
+            setSelectedDraft,
+            showHeaderWithSelectAll,
+            headerProps: {
+                indeterminate: !!selectedDraft.length && selectedDraft.length < flatOptions.length,
+                checked: selectedDraft.length === flatOptions.length,
+                onChange: handleToggleAll,
+            },
+        },
+        allowUnselect: true,
+        multiple: true,
+        options: memoizedOptions,
+        onChange: handleChange,
+        selected,
+        showSearch,
+        searchProps: showSearch
+            ? {
+                ...searchProps,
+                value: search,
+                onChange: setSearch,
+            }
+            : undefined,
+        /* Костыль для респонсив селекта. В мобильную версию хук уже зашит, и это единственный передать в мобилку оригинальные пропсы */
+        originalProps: {
+            options,
+            selected,
+            onChange,
+            OptionsList,
+            optionsListProps,
+            showClear,
+            showSelectAll,
+            showHeaderWithSelectAll,
+            showSearch,
+            searchProps,
+        },
+    };
+}
+
+export { OptionsListWithApply as O, SELECT_ALL_KEY as S, useSelectWithApply as u };

package/moderncssm/index.d.ts

@@ -0,0 +1,2 @@
+export { SelectResponsive as Select } from "./Component.responsive";
+export type { SelectProps } from "./typings";

package/moderncssm/index.js

@@ -0,0 +1 @@
+export { SelectResponsive as Select } from './Component.responsive.js';

package/moderncssm/mobile/Component.mobile.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import React from 'react';
+import { SelectMobileProps } from "../typings";
+declare const SelectMobile: React.ForwardRefExoticComponent<SelectMobileProps & React.RefAttributes<unknown>>;
+export { SelectMobile };

package/moderncssm/mobile/Component.mobile.js

@@ -0,0 +1,54 @@
+import React, { forwardRef } from 'react';
+import { BottomSheet } from '@alfalab/core-components-bottom-sheet/moderncssm';
+import { FormControlMobile } from '@alfalab/core-components-form-control/moderncssm/mobile';
+import { ModalMobile } from '@alfalab/core-components-modal/moderncssm/mobile';
+import { Arrow } from '../components/arrow/Component.js';
+import { BaseSelect } from '../components/base-select/Component.js';
+import { Field } from '../components/field/Component.js';
+import { Footer } from '../components/footer/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 { VirtualOptionsList } from '../components/virtual-options-list/Component.js';
+import { u as useSelectWithApply } from '../hook-a8bc7fe8.js';
+import { Header } from '../presets/useSelectWithApply/options-list-with-apply/header/Component.js';
+
+const VIRTUAL_OPTIONS_LIST_THRESHOLD = 30;
+const SelectMobile = forwardRef(({ autocomplete = false, multiple = false, allowUnselect = false, disabled = false, closeOnSelect = !multiple, circularNavigation = false, defaultOpen = false, open: openProp, size = 56, optionsSize = 56, fieldProps = {}, optionProps = {}, optionsListProps = {}, Arrow: Arrow$1 = Arrow, Field: Field$1 = Field, Optgroup: Optgroup$1 = Optgroup, Option: Option$1 = Option, Search: Search$1 = Search, selected, options, OptionsList: OptionsList$1 = options.length > VIRTUAL_OPTIONS_LIST_THRESHOLD
+    ? VirtualOptionsList
+    : OptionsList, onChange, showClear = true, showSelectAll, showHeaderWithSelectAll, useWithApplyHook = multiple, showSearch, searchProps, ...restProps }, ref) => {
+    const applyProps = useSelectWithApply({
+        optionsListProps: {
+            ...optionsListProps,
+            Footer,
+        },
+        OptionsList: OptionsList$1,
+        showSearch,
+        searchProps,
+        selected,
+        options,
+        onChange,
+        showClear,
+        showSelectAll,
+    });
+    const bottomAddons = useWithApplyHook && showHeaderWithSelectAll && (React.createElement(Header, { ...applyProps.optionsListProps.headerProps, mobile: true }));
+    return (React.createElement(BaseSelect, { ref: ref, view: 'mobile', autocomplete: autocomplete, multiple: multiple, allowUnselect: allowUnselect, disabled: disabled, closeOnSelect: closeOnSelect, circularNavigation: circularNavigation, defaultOpen: defaultOpen, open: openProp, size: size, optionsSize: optionsSize, fieldProps: {
+            FormControlComponent: FormControlMobile,
+            ...fieldProps,
+        }, optionProps: optionProps, Arrow: Arrow$1, Field: Field$1, Optgroup: Optgroup$1, Option: Option$1, Search: Search$1, options: options, selected: selected, onChange: onChange, OptionsList: OptionsList$1, showSearch: showSearch, searchProps: searchProps, BottomSheet: BottomSheet, ModalMobile: ModalMobile, optionsListProps: optionsListProps, ...restProps, ...(restProps.isBottomSheet === false
+            ? {
+                modalHeaderProps: {
+                    bottomAddons,
+                    ...restProps.modalHeaderProps,
+                },
+            }
+            : {
+                bottomSheetProps: {
+                    bottomAddons,
+                    ...restProps.bottomSheetProps,
+                },
+            }), ...(useWithApplyHook && applyProps) }));
+});
+
+export { SelectMobile };