@alfalab/core-components 47.26.7 → 47.26.8-beta.9323

package/select/modern/components/virtual-options-list/index.css

@@ -1,4 +1,4 @@
-/* hash: 1h130 */
+/* hash: pvv8r */
 :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
 } /* deprecated */ :root {
     --color-light-neutral-300: #e7e8eb;
@@ -46,35 +46,35 @@
     /* checkmark */
 
     /* optgroup */
-} .select__virtualOptionsList_1m24l {
+} .select__virtualOptionsList_g97h9 {
     width: 100%;
     outline: none;
     box-sizing: border-box;
     position: sticky;
     justify-content: space-between;
-} .select__virtualOptionsListHeader_1m24l {
+} .select__virtualOptionsListHeader_g97h9 {
     box-sizing: border-box;
     border-bottom: 1px solid var(--color-light-neutral-300);
-} .select__virtualOptionsListFooter_1m24l {
+} .select__virtualOptionsListFooter_g97h9 {
     position: sticky;
     bottom: var(--gap-0);
     box-sizing: border-box;
     border-top: 1px solid transparent
-} .select__virtualOptionsListFooter_1m24l.select__withBorder_1m24l {
+} .select__virtualOptionsListFooter_g97h9.select__withBorder_g97h9 {
         border-top: 1px solid var(--color-light-neutral-300);
-    } .select__scrollable_1m24l {
+    } .select__scrollable_g97h9 {
     position: relative;
     overflow: auto;
     width: 100%;
-} .select__inner_1m24l {
+} .select__inner_g97h9 {
     position: relative;
     width: 100%;
-} .select__virtualRow_1m24l {
+} .select__virtualRow_g97h9 {
     position: absolute;
     top: var(--gap-0);
     left: var(--gap-0);
     width: 100%
-} .select__virtualRow_1m24l:before {
+} .select__virtualRow_g97h9:before {
         content: '';
         position: absolute;
         z-index: 1;
@@ -84,16 +84,16 @@
         height: 1px;
         background: var(--select-option-divider-background);
         display: var(--select-option-divider-display);
-    } .select__virtualRow_1m24l:first-child:before {
+    } .select__virtualRow_g97h9:first-child:before {
         display: none;
-    } .select__highlighted_1m24l:before,
-    .select__highlighted_1m24l + .select__virtualRow_1m24l:before {
+    } .select__highlighted_g97h9:before,
+    .select__highlighted_g97h9 + .select__virtualRow_g97h9:before {
         display: none;
-    } .select__emptyPlaceholder_1m24l {
+    } .select__emptyPlaceholder_g97h9 {
     padding: var(--gap-16) var(--gap-12);
     color: var(--select-options-list-empty-placeholder-color);
     flex: 1;
-} .select__size-64_1m24l .select__emptyPlaceholder_1m24l,
-.select__size-72_1m24l .select__emptyPlaceholder_1m24l {
+} .select__size-64_g97h9 .select__emptyPlaceholder_g97h9,
+.select__size-72_g97h9 .select__emptyPlaceholder_g97h9 {
     padding: var(--gap-24) var(--gap-16);
 }

package/select/modern/consts.d.ts

@@ -4,6 +4,7 @@ declare const SIZE_TO_CLASSNAME_MAP: {
     m: string;
     l: string;
     xl: string;
+    40: string;
     48: string;
     56: string;
     64: string;

package/select/modern/consts.js

@@ -4,6 +4,7 @@ const SIZE_TO_CLASSNAME_MAP = {
     m: 'size-56',
     l: 'size-64',
     xl: 'size-72',
+    40: 'size-40',
     48: 'size-48',
     56: 'size-56',
     64: 'size-64',

package/select/modern/desktop/Component.desktop.js

@@ -5,11 +5,16 @@ 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 'classnames';
+import '../../../badge/modern';
+import '../../../checkbox/modern';
+import '@alfalab/icons-glyph/CheckmarkCircleMIcon';
+import '@alfalab/icons-glyph/CheckmarkMIcon';
+import { OptionResponsive } from '../components/option/Component.responsive.js';
 import { OptionsList } from '../components/options-list/Component.js';
 import { Search } from '../components/search/Component.js';
-import 'classnames';
 import '@alfalab/icons-glyph/ChevronDownMIcon';
+import '@alfalab/icons-glyph/ChevronDownSIcon';
 import 'react-merge-refs';
 import '@juggle/resize-observer';
 import 'compute-scroll-into-view';
@@ -19,29 +24,29 @@ 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 '../list-popover-desktop-1ba3b33b.js';
+import '../list-popover-desktop-0341ae78.js';
 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 '../mobile.module-1166ce1b.js';
+import '../mobile.module-583c2371.js';
 import '../components/base-select/components/list-mobile/list-modal-mobile.js';
 import '../components/clear-button/Component.js';
 import '../../../button/modern';
 import '@alfalab/icons-glyph/CrossCircleMIcon';
+import '@alfalab/icons-glyph/CrossCircleSIcon';
 import '../consts.js';
+import '../components/option/desktop/Component.js';
 import '../components/checkmark/Component.js';
-import '../../../badge/modern';
-import '../../../checkbox/modern';
-import '@alfalab/icons-glyph/CheckmarkCircleMIcon';
-import '@alfalab/icons-glyph/CheckmarkMIcon';
+import '../components/option/Component.js';
+import '../components/option/mobile/Component.js';
 import '../components/checkmark-mobile/Component.js';
 import '../../../mq/modern';
 import '../../../scrollbar/modern';
 import '../../../input/modern';
 import '@alfalab/icons-glyph/MagnifierMIcon';
 
-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: {
+const SelectDesktop = forwardRef(({ Arrow: Arrow$1 = Arrow, Field: Field$1 = Field, OptionsList: OptionsList$1 = OptionsList, Optgroup: Optgroup$1 = Optgroup, Option = OptionResponsive, Search: Search$1 = Search, fieldProps = {}, ...restProps }, ref) => (React.createElement(BaseSelect, { ref: ref, view: 'desktop', Option: Option, Field: Field$1, fieldProps: {
         FormControlComponent: FormControlDesktop,
         ...fieldProps,
     }, Search: Search$1, Optgroup: Optgroup$1, OptionsList: OptionsList$1, Arrow: Arrow$1, Popover: Popover, ...restProps })));

package/select/modern/desktop/index.js

@@ -5,6 +5,7 @@ import '../../../popover/modern';
 import '../components/arrow/Component.js';
 import 'classnames';
 import '@alfalab/icons-glyph/ChevronDownMIcon';
+import '@alfalab/icons-glyph/ChevronDownSIcon';
 import '../components/base-select/Component.js';
 import 'react-merge-refs';
 import '@juggle/resize-observer';
@@ -15,25 +16,29 @@ 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 '../list-popover-desktop-1ba3b33b.js';
+import '../list-popover-desktop-0341ae78.js';
 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 '../mobile.module-1166ce1b.js';
+import '../mobile.module-583c2371.js';
 import '../components/base-select/components/list-mobile/list-modal-mobile.js';
 import '../components/field/Component.js';
 import '../components/clear-button/Component.js';
 import '../../../button/modern';
 import '@alfalab/icons-glyph/CrossCircleMIcon';
+import '@alfalab/icons-glyph/CrossCircleSIcon';
 import '../components/optgroup/Component.js';
 import '../consts.js';
-import '../components/option/Component.js';
-import '../components/checkmark/Component.js';
 import '../../../badge/modern';
 import '../../../checkbox/modern';
 import '@alfalab/icons-glyph/CheckmarkCircleMIcon';
 import '@alfalab/icons-glyph/CheckmarkMIcon';
+import '../components/option/Component.responsive.js';
+import '../components/option/desktop/Component.js';
+import '../components/checkmark/Component.js';
+import '../components/option/Component.js';
+import '../components/option/mobile/Component.js';
 import '../components/checkmark-mobile/Component.js';
 import '../components/options-list/Component.js';
 import '../../../mq/modern';

package/select/modern/hook-0a375e57.js

@@ -0,0 +1,185 @@
+import React, { forwardRef, useCallback, useEffect, useState, useMemo, useRef } from 'react';
+import reactFastCompare from 'react-fast-compare';
+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';
+import '../../shared/modern';
+import 'react-merge-refs';
+import 'classnames';
+import '../../mq/modern';
+import '../../scrollbar/modern';
+import './components/optgroup/Component.js';
+import '../../button/modern/desktop';
+import '../../checkbox/modern';
+
+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, onSelectAllClick = () => 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,
+            name: 'apply-footer',
+        });
+    };
+    const handleClear = () => {
+        setSelectedDraft([]);
+        onChange({
+            selected: null,
+            selectedMultiple: [],
+            initiator: null,
+            name: 'reset-footer',
+        });
+    };
+    const handleToggleAll = () => {
+        const optionsToSet = flatOptions.length === selectedDraft.length ? [] : flatOptions;
+        onSelectAllClick(optionsToSet);
+        setSelectedDraft(optionsToSet);
+    };
+    const selectedKeys = useMemo(() => selectedDraft.map(({ key }) => key), [selectedDraft]);
+    const handleChange = ({ initiator, ...restArgs }) => {
+        if (!initiator) {
+            onChange({
+                initiator: null,
+                ...restArgs,
+            });
+            return;
+        }
+        const initiatorSelected = selectedDraft.some((selectedDraftOption) => selectedDraftOption.key === initiator.key) ||
+            (initiator.key === SELECT_ALL_KEY &&
+                (selectedDraft.length === flatOptions.length ||
+                    flatOptions.every(({ key }) => selectedKeys.includes(key))));
+        if (initiator.key === SELECT_ALL_KEY) {
+            setSelectedDraft(initiatorSelected ? [] : flatOptions);
+        }
+        else {
+            setSelectedDraft(initiatorSelected
+                ? selectedDraft.filter((o) => o.key !== initiator.key)
+                : selectedDraft.concat(initiator));
+        }
+    };
+    const handleClose = () => setSelectedDraft(selectedOptionsRef.current);
+    useEffect(() => {
+        // устанавливать selectedDraft если selectedOptions изменились
+        if (!reactFastCompare(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: {
+                ...optionsListProps?.headerProps,
+                indeterminate: selectedDraft.length > 0,
+                checked: selectedDraft.length === flatOptions.length ||
+                    flatOptions.every(({ key }) => selectedKeys.includes(key)),
+                onChange: handleToggleAll,
+            },
+        },
+        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/select/modern/hook-94ef1330.d.ts

@@ -0,0 +1,111 @@
+/// <reference types="react" />
+import { BaseSelectProps, OptionShape } from "./typings";
+type UseSelectWithApplyProps = {
+    /**
+     * Список выбранных пунктов
+     */
+    selected: BaseSelectProps['selected'];
+    /**
+     * Список вариантов выбора
+     */
+    options: BaseSelectProps['options'];
+    /**
+     * Обработчик выбора
+     */
+    onChange: BaseSelectProps['onChange'];
+    /**
+     * Дополнительный обработчик клика на чекбокс выбрать все
+     */
+    onSelectAllClick?: (selectedMultiple: OptionShape[]) => void;
+    /**
+     * Компонент выпадающего меню
+     */
+    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, onSelectAllClick, 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: any;
+    };
+    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/modern/index.js

@@ -1,41 +1,46 @@
 export { SelectResponsive as Select } from './Component.responsive.js';
 import 'react';
 import '../../mq/modern';
-import '../../shared/modern';
 import './desktop/Component.desktop.js';
 import '../../form-control/modern/desktop';
 import '../../popover/modern';
 import './components/arrow/Component.js';
 import 'classnames';
 import '@alfalab/icons-glyph/ChevronDownMIcon';
+import '@alfalab/icons-glyph/ChevronDownSIcon';
 import './components/base-select/Component.js';
 import 'react-merge-refs';
 import '@juggle/resize-observer';
 import 'compute-scroll-into-view';
 import 'downshift';
+import '../../shared/modern';
 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 './list-popover-desktop-1ba3b33b.js';
+import './list-popover-desktop-0341ae78.js';
 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 './mobile.module-1166ce1b.js';
+import './mobile.module-583c2371.js';
 import './components/base-select/components/list-mobile/list-modal-mobile.js';
 import './components/field/Component.js';
 import './components/clear-button/Component.js';
 import '../../button/modern';
 import '@alfalab/icons-glyph/CrossCircleMIcon';
+import '@alfalab/icons-glyph/CrossCircleSIcon';
 import './components/optgroup/Component.js';
 import './consts.js';
-import './components/option/Component.js';
-import './components/checkmark/Component.js';
 import '../../badge/modern';
 import '../../checkbox/modern';
 import '@alfalab/icons-glyph/CheckmarkCircleMIcon';
 import '@alfalab/icons-glyph/CheckmarkMIcon';
+import './components/option/Component.responsive.js';
+import './components/option/desktop/Component.js';
+import './components/checkmark/Component.js';
+import './components/option/Component.js';
+import './components/option/mobile/Component.js';
 import './components/checkmark-mobile/Component.js';
 import './components/options-list/Component.js';
 import '../../scrollbar/modern';
@@ -51,8 +56,8 @@ import '../../base-modal/modern';
 import '../../button/modern/mobile';
 import './components/virtual-options-list/Component.js';
 import 'react-virtual';
-import './hook-2c234e93.js';
-import 'deep-equal';
+import './hook-0a375e57.js';
+import 'react-fast-compare';
 import './presets/useSelectWithApply/options-list-with-apply/footer/Component.js';
 import '../../button/modern/desktop';
 import './presets/useSelectWithApply/options-list-with-apply/header/Component.js';

package/select/modern/list-popover-desktop-0341ae78.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import cn from 'classnames';
+
+const styles = {"component":"select__component_1h3w6","popoverInner":"select__popoverInner_1h3w6","optionsListWrapper":"select__optionsListWrapper_1h3w6","optionsListBorder":"select__optionsListBorder_1h3w6","nativeSelect":"select__nativeSelect_1h3w6","block":"select__block_1h3w6","emptySearchPlaceholder":"select__emptySearchPlaceholder_1h3w6","search":"select__search_1h3w6"};
+require('./components/base-select/index.css');
+
+const ListPopoverDesktop = (props) => {
+    const { Popover, open, popoverProps, fieldRef, popoverPosition = 'bottom-start', preventFlip = true, popperClassName, updatePopover, zIndexPopover, renderOptionsList, } = props;
+    if (Popover) {
+        return (React.createElement(Popover, { ...popoverProps, open: open, withTransition: false, anchorElement: fieldRef.current, position: popoverPosition, preventFlip: preventFlip, popperClassName: cn(styles.popoverInner, popperClassName), update: updatePopover, zIndex: zIndexPopover }, renderOptionsList()));
+    }
+    return null;
+};
+
+export { ListPopoverDesktop as L, styles as s };

package/select/modern/mobile/Component.mobile.js

@@ -7,14 +7,19 @@ 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 'classnames';
+import '../../../badge/modern';
+import '../../../checkbox/modern';
+import '@alfalab/icons-glyph/CheckmarkCircleMIcon';
+import '@alfalab/icons-glyph/CheckmarkMIcon';
+import { OptionResponsive } from '../components/option/Component.responsive.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-2c234e93.js';
+import { u as useSelectWithApply } from '../hook-0a375e57.js';
 import { Header } from '../presets/useSelectWithApply/options-list-with-apply/header/Component.js';
-import 'classnames';
 import '@alfalab/icons-glyph/ChevronDownMIcon';
+import '@alfalab/icons-glyph/ChevronDownSIcon';
 import 'react-merge-refs';
 import '@juggle/resize-observer';
 import 'compute-scroll-into-view';
@@ -24,36 +29,36 @@ 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 '../list-popover-desktop-1ba3b33b.js';
+import '../list-popover-desktop-0341ae78.js';
 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 '../mobile.module-1166ce1b.js';
+import '../mobile.module-583c2371.js';
 import '../components/base-select/components/list-mobile/list-modal-mobile.js';
 import '../components/clear-button/Component.js';
 import '../../../button/modern';
 import '@alfalab/icons-glyph/CrossCircleMIcon';
+import '@alfalab/icons-glyph/CrossCircleSIcon';
 import '../../../base-modal/modern';
 import '../../../button/modern/mobile';
 import '../consts.js';
+import '../components/option/desktop/Component.js';
 import '../components/checkmark/Component.js';
-import '../../../badge/modern';
-import '../../../checkbox/modern';
-import '@alfalab/icons-glyph/CheckmarkCircleMIcon';
-import '@alfalab/icons-glyph/CheckmarkMIcon';
+import '../components/option/Component.js';
+import '../components/option/mobile/Component.js';
 import '../components/checkmark-mobile/Component.js';
 import '../../../mq/modern';
 import '../../../scrollbar/modern';
 import '../../../input/modern';
 import '@alfalab/icons-glyph/MagnifierMIcon';
 import 'react-virtual';
-import 'deep-equal';
+import 'react-fast-compare';
 import '../presets/useSelectWithApply/options-list-with-apply/footer/Component.js';
 import '../../../button/modern/desktop';
 
 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
+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 = OptionResponsive, 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({
@@ -76,7 +81,7 @@ const SelectMobile = forwardRef(({ autocomplete = false, multiple = false, allow
     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
+        }, optionProps: optionProps, Arrow: Arrow$1, Field: Field$1, Optgroup: Optgroup$1, Option: Option, 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,