@alfalab/core-components-select 15.2.3 → 16.0.0

package/esm/components/base-select/Component.js

@@ -3,38 +3,56 @@ import React, { forwardRef, useRef, useMemo, useCallback, useEffect } from 'reac
 import mergeRefs from 'react-merge-refs';
 import { ResizeObserver } from '@juggle/resize-observer';
 import cn from 'classnames';
+import { compute } from 'compute-scroll-into-view';
 import { useMultipleSelection, useCombobox } from 'downshift';
-import { Popover } from '@alfalab/core-components-popover/esm';
-import { getDataTestId } from '@alfalab/core-components-shared/esm';
+import { fnUtils, getDataTestId } from '@alfalab/core-components-shared/esm';
 import { useLayoutEffect_SAFE_FOR_SSR } from '@alfalab/hooks';
-import { defaultAccessor, processOptions, defaultFilterFn } from '../../utils.js';
+import { defaultAccessor, defaultFilterFn, processOptions } from '../../utils.js';
 import { NativeSelect } from '../native-select/Component.js';
 
-var styles = {"component":"select__component_1ba4q","popoverInner":"select__popoverInner_1ba4q","optionsList":"select__optionsList_1ba4q","optionsListBorder":"select__optionsListBorder_1ba4q","nativeSelect":"select__nativeSelect_1ba4q","block":"select__block_1ba4q","emptySearchPlaceholder":"select__emptySearchPlaceholder_1ba4q","search":"select__search_1ba4q"};
+var styles = {"component":"select__component_1fm58","popoverInner":"select__popoverInner_1fm58","optionsListWrapper":"select__optionsListWrapper_1fm58","optionsListBorder":"select__optionsListBorder_1fm58","nativeSelect":"select__nativeSelect_1fm58","block":"select__block_1fm58","emptySearchPlaceholder":"select__emptySearchPlaceholder_1fm58","search":"select__search_1fm58"};
 require('./index.css')
 
+var mobileStyles = {"sheet":"select__sheet_1agfp","sheetContent":"select__sheetContent_1agfp","modalContent":"select__modalContent_1agfp","sheetContainer":"select__sheetContainer_1agfp","optionsListWrapper":"select__optionsListWrapper_1agfp","optionsList":"select__optionsList_1agfp","scrollbar":"select__scrollbar_1agfp","search":"select__search_1agfp","component":"select__component_1agfp","option":"select__option_1agfp","optionGroup":"select__optionGroup_1agfp"};
+require('./mobile.css')
+
+var itemToString = function (option) { return (option ? option.key : ''); };
+var isItemDisabled = function (option) { return Boolean(option === null || option === void 0 ? void 0 : option.disabled); };
 var BaseSelect = forwardRef(
 // TODO: 😭
 // eslint-disable-next-line complexity
 function (_a, ref) {
     var _b;
-    var dataTestId = _a.dataTestId, className = _a.className, fieldClassName = _a.fieldClassName, optionsListClassName = _a.optionsListClassName, optionClassName = _a.optionClassName, popperClassName = _a.popperClassName, options = _a.options, _c = _a.autocomplete, autocomplete = _c === void 0 ? false : _c, _d = _a.multiple, multiple = _d === void 0 ? false : _d, _e = _a.allowUnselect, allowUnselect = _e === void 0 ? false : _e, _f = _a.disabled, disabled = _f === void 0 ? false : _f, _g = _a.closeOnSelect, closeOnSelect = _g === void 0 ? !multiple : _g, _h = _a.circularNavigation, circularNavigation = _h === void 0 ? false : _h, _j = _a.nativeSelect, nativeSelect = _j === void 0 ? false : _j, _k = _a.defaultOpen, defaultOpen = _k === void 0 ? false : _k, openProp = _a.open, _l = _a.popoverPosition, popoverPosition = _l === void 0 ? 'bottom-start' : _l, _m = _a.preventFlip, preventFlip = _m === void 0 ? true : _m, _o = _a.optionsListWidth, optionsListWidth = _o === void 0 ? 'content' : _o, name = _a.name, id = _a.id, selected = _a.selected, _p = _a.size, size = _p === void 0 ? 's' : _p, _q = _a.optionsSize, optionsSize = _q === void 0 ? size : _q, error = _a.error, hint = _a.hint, block = _a.block, label = _a.label, labelView = _a.labelView, placeholder = _a.placeholder, _r = _a.fieldProps, fieldProps = _r === void 0 ? {} : _r, _s = _a.optionsListProps, optionsListProps = _s === void 0 ? {} : _s, _t = _a.optionProps, optionProps = _t === void 0 ? {} : _t, _u = _a.searchProps, searchProps = _u === void 0 ? {} : _u, _v = _a.showSearch, showSearch = _v === void 0 ? false : _v, valueRenderer = _a.valueRenderer, onChange = _a.onChange, onOpen = _a.onOpen, onFocus = _a.onFocus, onBlur = _a.onBlur, onScroll = _a.onScroll, Arrow = _a.Arrow, _w = _a.Field, Field = _w === void 0 ? function () { return null; } : _w, _x = _a.OptionsList, OptionsList = _x === void 0 ? function () { return null; } : _x, _y = _a.Optgroup, Optgroup = _y === void 0 ? function () { return null; } : _y, _z = _a.Option, Option = _z === void 0 ? function () { return null; } : _z, _0 = _a.Search, Search = _0 === void 0 ? function () { return null; } : _0, updatePopover = _a.updatePopover, zIndexPopover = _a.zIndexPopover, _1 = _a.showEmptyOptionsList, showEmptyOptionsList = _1 === void 0 ? false : _1, visibleOptions = _a.visibleOptions;
+    var dataTestId = _a.dataTestId, className = _a.className, fieldClassName = _a.fieldClassName, optionGroupClassName = _a.optionGroupClassName, optionsListClassName = _a.optionsListClassName, optionClassName = _a.optionClassName, popperClassName = _a.popperClassName, options = _a.options, _c = _a.autocomplete, autocomplete = _c === void 0 ? false : _c, _d = _a.multiple, multiple = _d === void 0 ? false : _d, _e = _a.allowUnselect, allowUnselect = _e === void 0 ? false : _e, _f = _a.disabled, disabled = _f === void 0 ? false : _f, _g = _a.closeOnSelect, closeOnSelect = _g === void 0 ? !multiple : _g, _h = _a.circularNavigation, circularNavigation = _h === void 0 ? false : _h, _j = _a.nativeSelect, nativeSelect = _j === void 0 ? false : _j, _k = _a.defaultOpen, defaultOpen = _k === void 0 ? false : _k, openProp = _a.open, _l = _a.popoverPosition, popoverPosition = _l === void 0 ? 'bottom-start' : _l, _m = _a.preventFlip, preventFlip = _m === void 0 ? true : _m, _o = _a.optionsListWidth, optionsListWidth = _o === void 0 ? 'content' : _o, name = _a.name, id = _a.id, selected = _a.selected, _p = _a.size, size = _p === void 0 ? 's' : _p, _q = _a.optionsSize, optionsSize = _q === void 0 ? size : _q, error = _a.error, hint = _a.hint, block = _a.block, label = _a.label, labelView = _a.labelView, placeholder = _a.placeholder, _r = _a.fieldProps, fieldProps = _r === void 0 ? {} : _r, _s = _a.optionsListProps, optionsListProps = _s === void 0 ? {} : _s, _t = _a.optionProps, optionProps = _t === void 0 ? {} : _t, _u = _a.searchProps, searchProps = _u === void 0 ? {} : _u, _v = _a.showSearch, showSearch = _v === void 0 ? false : _v, valueRenderer = _a.valueRenderer, onChange = _a.onChange, onOpen = _a.onOpen, onFocus = _a.onFocus, onBlur = _a.onBlur, onScroll = _a.onScroll, Arrow = _a.Arrow, _w = _a.Field, Field = _w === void 0 ? function () { return null; } : _w, _x = _a.OptionsList, OptionsList = _x === void 0 ? function () { return null; } : _x, _y = _a.Optgroup, Optgroup = _y === void 0 ? function () { return null; } : _y, _z = _a.Option, Option = _z === void 0 ? function () { return null; } : _z, _0 = _a.Search, Search = _0 === void 0 ? function () { return null; } : _0, updatePopover = _a.updatePopover, zIndexPopover = _a.zIndexPopover, _1 = _a.showEmptyOptionsList, showEmptyOptionsList = _1 === void 0 ? false : _1, visibleOptions = _a.visibleOptions, view = _a.view, _2 = _a.isBottomSheet, isBottomSheet = _2 === void 0 ? true : _2, footer = _a.footer, swipeable = _a.swipeable, modalProps = _a.modalProps, modalFooterProps = _a.modalFooterProps, modalHeaderProps = _a.modalHeaderProps, bottomSheetProps = _a.bottomSheetProps, Popover = _a.Popover, ModalMobile = _a.ModalMobile, BottomSheet = _a.BottomSheet;
     var rootRef = useRef(null);
     var fieldRef = useRef(null);
     var listRef = useRef(null);
     var initiatorRef = useRef(null);
     var searchRef = useRef(null);
-    var _2 = React.useState(''), searchState = _2[0], setSearchState = _2[1];
-    var _3 = typeof (searchProps === null || searchProps === void 0 ? void 0 : searchProps.value) === 'string'
+    var alreadyClickedRef = useRef(false);
+    var scrollableContainerRef = useRef(null);
+    var _3 = React.useState(''), searchState = _3[0], setSearchState = _3[1];
+    var _4 = typeof (searchProps === null || searchProps === void 0 ? void 0 : searchProps.value) === 'string'
         ? [searchProps.value, searchProps.onChange]
-        : [searchState, setSearchState], search = _3[0], setSearch = _3[1];
-    var itemToString = function (option) { return (option ? option.key : ''); };
+        : [searchState, setSearchState], search = _4[0], setSearch = _4[1];
     var accessor = searchProps.accessor || defaultAccessor;
-    var _4 = useMemo(function () {
-        return processOptions(options, selected, function (option) {
-            return defaultFilterFn(accessor(option), search);
+    var filterFn = searchProps.filterFn || defaultFilterFn;
+    var _5 = useMemo(function () { return processOptions(options, selected, function (option) { return filterFn(accessor(option), search); }); }, [filterFn, accessor, options, search, selected]), filteredOptions = _5.filteredOptions, flatOptions = _5.flatOptions, selectedOptions = _5.selectedOptions;
+    var scrollIntoView = function (node) {
+        if (!node || view === 'mobile')
+            return;
+        requestAnimationFrame(function () {
+            var actions = compute(node, {
+                boundary: listRef.current,
+                block: 'nearest',
+                scrollMode: 'if-needed',
+            });
+            actions.forEach(function (action) {
+                var el = action.el, top = action.top;
+                el.scrollTop = top;
+            });
         });
-    }, [accessor, options, search, selected]), filteredOptions = _4.filteredOptions, flatOptions = _4.flatOptions, selectedOptions = _4.selectedOptions;
+    };
     var useMultipleSelectionProps = {
         itemToString: itemToString,
         onSelectedItemsChange: function (changes) {
@@ -61,14 +79,15 @@ function (_a, ref) {
     if (selected !== undefined) {
         useMultipleSelectionProps.selectedItems = selectedOptions;
     }
-    var _5 = useMultipleSelection(useMultipleSelectionProps), selectedItems = _5.selectedItems, addSelectedItem = _5.addSelectedItem, setSelectedItems = _5.setSelectedItems, removeSelectedItem = _5.removeSelectedItem, getDropdownProps = _5.getDropdownProps;
-    var _6 = useCombobox({
+    var _6 = useMultipleSelection(useMultipleSelectionProps), selectedItems = _6.selectedItems, addSelectedItem = _6.addSelectedItem, setSelectedItems = _6.setSelectedItems, removeSelectedItem = _6.removeSelectedItem, getDropdownProps = _6.getDropdownProps;
+    var _7 = useCombobox({
         id: id,
         isOpen: openProp,
-        circularNavigation: circularNavigation,
         items: flatOptions,
         itemToString: itemToString,
+        isItemDisabled: isItemDisabled,
         defaultHighlightedIndex: selectedItems.length === 0 ? -1 : undefined,
+        scrollIntoView: scrollIntoView,
         onIsOpenChange: function (changes) {
             if (onOpen) {
                 /**
@@ -85,7 +104,7 @@ function (_a, ref) {
                 }, 0);
             }
             if (showSearch) {
-                if (changes.isOpen) {
+                if (changes.isOpen && view === 'desktop') {
                     setTimeout(function () {
                         var _a;
                         (_a = searchRef.current) === null || _a === void 0 ? void 0 : _a.focus();
@@ -96,14 +115,37 @@ function (_a, ref) {
                 }
             }
         },
+        // eslint-disable-next-line complexity
         stateReducer: function (state, actionAndChanges) {
             var type = actionAndChanges.type, changes = actionAndChanges.changes;
             var selectedItem = changes.selectedItem;
             switch (type) {
+                case useCombobox.stateChangeTypes.InputBlur:
+                    if (view === 'mobile') {
+                        return state;
+                    }
+                    return changes;
+                case useCombobox.stateChangeTypes.InputKeyDownArrowDown:
+                    if (!circularNavigation && state.highlightedIndex === options.length - 1) {
+                        return __assign(__assign({}, changes), { highlightedIndex: state.highlightedIndex });
+                    }
+                    return changes;
+                case useCombobox.stateChangeTypes.InputKeyDownArrowUp:
+                    if (!circularNavigation && state.highlightedIndex === 0) {
+                        return __assign(__assign({}, changes), { highlightedIndex: state.highlightedIndex });
+                    }
+                    return changes;
                 case useCombobox.stateChangeTypes.InputKeyDownEnter:
                 case useCombobox.stateChangeTypes.ItemClick:
-                    initiatorRef.current = selectedItem;
-                    if (selectedItem && !selectedItem.disabled) {
+                    initiatorRef.current = selectedItem || null;
+                    if (selectedItem && !selectedItem.disabled && !alreadyClickedRef.current) {
+                        // TODO!!! Проблема downshift + React 18. ItemClick срабатывает дважды. См https://github.com/downshift-js/downshift/issues/1384
+                        if (view === 'mobile' && React.version.indexOf('18') === 0) {
+                            alreadyClickedRef.current = true;
+                            setTimeout(function () {
+                                alreadyClickedRef.current = false;
+                            });
+                        }
                         var alreadySelected = selectedItems.includes(selectedItem);
                         var allowRemove = allowUnselect || (multiple && selectedItems.length > 1);
                         if (alreadySelected && allowRemove) {
@@ -118,7 +160,7 @@ function (_a, ref) {
                             }
                         }
                     }
-                    return __assign(__assign({}, changes), { isOpen: !closeOnSelect, 
+                    return __assign(__assign({}, changes), { isOpen: !closeOnSelect || (view === 'mobile' && multiple), 
                         // при closeOnSelect === false - сохраняем подсвеченный индекс
                         highlightedIndex: state.isOpen && !closeOnSelect
                             ? state.highlightedIndex
@@ -127,9 +169,20 @@ function (_a, ref) {
                     return changes;
             }
         },
-    }), open = _6.isOpen, getMenuProps = _6.getMenuProps, getInputProps = _6.getInputProps, getItemProps = _6.getItemProps, getComboboxProps = _6.getComboboxProps, getLabelProps = _6.getLabelProps, highlightedIndex = _6.highlightedIndex, toggleMenu = _6.toggleMenu, openMenu = _6.openMenu, setHighlightedIndex = _6.setHighlightedIndex;
+    }), open = _7.isOpen, getMenuProps = _7.getMenuProps, getInputProps = _7.getInputProps, getItemProps = _7.getItemProps, getLabelProps = _7.getLabelProps, highlightedIndex = _7.highlightedIndex, toggleMenu = _7.toggleMenu, openMenu = _7.openMenu, closeMenu = _7.closeMenu, setHighlightedIndex = _7.setHighlightedIndex;
     var menuProps = getMenuProps({ ref: listRef }, { suppressRefError: true });
     var inputProps = getInputProps(getDropdownProps({ ref: mergeRefs([ref, fieldRef]) }));
+    var handleEntered = function (node, isAppearing) {
+        var _a, _b, _c, _d, _e;
+        if (showSearch)
+            (_a = searchRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        if (isBottomSheet) {
+            (_c = (_b = bottomSheetProps === null || bottomSheetProps === void 0 ? void 0 : bottomSheetProps.transitionProps) === null || _b === void 0 ? void 0 : _b.onEntered) === null || _c === void 0 ? void 0 : _c.call(_b, node, isAppearing);
+        }
+        else {
+            (_e = (_d = modalProps === null || modalProps === void 0 ? void 0 : modalProps.transitionProps) === null || _d === void 0 ? void 0 : _d.onEntered) === null || _e === void 0 ? void 0 : _e.call(_d, node, isAppearing);
+        }
+    };
     var handleFieldFocus = function (event) {
         if (onFocus)
             onFocus(event);
@@ -138,16 +191,21 @@ function (_a, ref) {
         }
     };
     var handleFieldBlur = function (event) {
-        var _a;
-        var isNextFocusInsideList = (_a = listRef.current) === null || _a === void 0 ? void 0 : _a.contains((event.relatedTarget || document.activeElement));
-        if (!isNextFocusInsideList) {
-            if (onBlur)
-                onBlur(event);
-            inputProps.onBlur(event);
+        var _a, _b;
+        if (view === 'desktop') {
+            var isNextFocusInsideList = (_a = listRef.current) === null || _a === void 0 ? void 0 : _a.contains((event.relatedTarget || document.activeElement));
+            if (!isNextFocusInsideList) {
+                if (onBlur)
+                    onBlur(event);
+                (_b = inputProps.onBlur) === null || _b === void 0 ? void 0 : _b.call(inputProps, event);
+            }
         }
+        if (view === 'mobile' && !open && onBlur)
+            onBlur(event);
     };
     var handleFieldKeyDown = function (event) {
-        inputProps.onKeyDown(event);
+        var _a;
+        (_a = inputProps.onKeyDown) === null || _a === void 0 ? void 0 : _a.call(inputProps, event);
         // https://caniuse.com/?search=KeyboardEvent.key
         var isKeyUnsupported = event.key === 'Unidentified';
         if (autocomplete &&
@@ -182,24 +240,19 @@ function (_a, ref) {
             return option.selected ? acc.concat(flatOptions[index]) : acc;
         }, []));
     }, [flatOptions, setSelectedItems]);
-    var getOptionProps = useCallback(function (option, index) { return (__assign(__assign({}, optionProps), { className: optionClassName, innerProps: getItemProps({
-            index: index,
-            item: option,
-            disabled: option.disabled,
-            onMouseDown: function (event) { return event.preventDefault(); },
-        }), multiple: multiple, index: index, option: option, size: optionsSize, disabled: option.disabled, highlighted: index === highlightedIndex, selected: selectedItems.some(function (_a) {
-            var key = _a.key;
-            return key === option.key;
-        }), dataTestId: getDataTestId(dataTestId, 'option') })); }, [
-        dataTestId,
-        getItemProps,
-        highlightedIndex,
-        multiple,
-        optionClassName,
-        optionProps,
-        optionsSize,
-        selectedItems,
-    ]);
+    var getOptionProps = function (option, index) {
+        var _a;
+        return (__assign(__assign({}, optionProps), { mobile: view === 'mobile', className: cn(optionClassName, (_a = {},
+                _a[mobileStyles.option] = view === 'mobile',
+                _a)), innerProps: getItemProps({
+                index: index,
+                item: option,
+                onMouseDown: function (event) { return event.preventDefault(); },
+            }), multiple: multiple, index: index, option: option, size: optionsSize, disabled: option.disabled, highlighted: index === highlightedIndex, selected: selectedItems.some(function (_a) {
+                var key = _a.key;
+                return key === option.key;
+            }), dataTestId: getDataTestId(dataTestId, 'option') }));
+    };
     useEffect(function () {
         if (defaultOpen)
             openMenu();
@@ -211,7 +264,7 @@ function (_a, ref) {
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
     var calcOptionsListWidth = useCallback(function () {
-        if (listRef.current) {
+        if (view === 'desktop' && listRef.current) {
             var widthAttr = optionsListWidth === 'field' ? 'width' : 'minWidth';
             var optionsListMinWidth = rootRef.current
                 ? rootRef.current.getBoundingClientRect().width
@@ -219,46 +272,40 @@ function (_a, ref) {
             listRef.current.setAttribute('style', '');
             listRef.current.style[widthAttr] = "".concat(optionsListMinWidth, "px");
         }
-    }, [optionsListWidth]);
+    }, [view, optionsListWidth]);
     useEffect(function () {
-        var ResizeObserver$1 = window.ResizeObserver || ResizeObserver;
-        var observer = new ResizeObserver$1(calcOptionsListWidth);
-        if (rootRef.current) {
-            observer.observe(rootRef.current);
+        if (view === 'desktop') {
+            var ResizeObserver_1 = window.ResizeObserver || ResizeObserver;
+            var observer_1 = new ResizeObserver_1(calcOptionsListWidth);
+            if (rootRef.current) {
+                observer_1.observe(rootRef.current);
+            }
+            return function () {
+                observer_1.disconnect();
+            };
         }
-        return function () {
-            observer.disconnect();
-        };
-    }, [calcOptionsListWidth, open, optionsListWidth]);
+        return fnUtils.noop;
+    }, [view, calcOptionsListWidth, open, optionsListWidth]);
     useLayoutEffect_SAFE_FOR_SSR(calcOptionsListWidth, [
         open,
         optionsListWidth,
         filteredOptions,
         selectedItems,
     ]);
-    var renderValue = useCallback(function () {
+    var renderValue = function () {
         return selectedItems.map(function (option) { return (React.createElement("input", { type: 'hidden', name: name, value: option.key, key: option.key })); });
-    }, [selectedItems, name]);
-    var renderNativeSelect = useCallback(function () {
+    };
+    var renderNativeSelect = function () {
         var value = multiple
             ? selectedItems.map(function (option) { return option.key; })
             : (selectedItems[0] || {}).key;
         return (React.createElement(NativeSelect, __assign({}, menuProps, { className: styles.nativeSelect, disabled: disabled, multiple: multiple, name: name, value: value, onChange: handleNativeSelectChange, options: filteredOptions })));
-    }, [
-        multiple,
-        selectedItems,
-        disabled,
-        name,
-        handleNativeSelectChange,
-        filteredOptions,
-        menuProps,
-    ]);
-    var _7 = optionsListProps, header = _7.header, emptyPlaceholder = _7.emptyPlaceholder;
-    var renderOptionsListHeader = function () {
+    };
+    var renderSearch = function () {
         var _a;
-        if (!showSearch && !header) {
+        var _b, _c;
+        if (!showSearch)
             return null;
-        }
         var handleClear = function (event) {
             var _a, _b;
             setSearch === null || setSearch === void 0 ? void 0 : setSearch('');
@@ -269,12 +316,21 @@ function (_a, ref) {
             setSearch === null || setSearch === void 0 ? void 0 : setSearch(payload.value);
             (_b = (_a = searchProps === null || searchProps === void 0 ? void 0 : searchProps.componentProps) === null || _a === void 0 ? void 0 : _a.onChange) === null || _b === void 0 ? void 0 : _b.call(_a, event, payload);
         };
-        return (React.createElement(React.Fragment, null,
-            header,
-            showSearch && (React.createElement(Search, __assign({}, searchProps === null || searchProps === void 0 ? void 0 : searchProps.componentProps, { value: search, onChange: handleChange, dataTestId: getDataTestId(dataTestId, 'search'), onClear: handleClear, className: cn(styles.search, (_a = searchProps === null || searchProps === void 0 ? void 0 : searchProps.componentProps) === null || _a === void 0 ? void 0 : _a.className), ref: searchRef })))));
+        return (React.createElement(Search, __assign({}, searchProps === null || searchProps === void 0 ? void 0 : searchProps.componentProps, { value: search, onChange: handleChange, dataTestId: getDataTestId(dataTestId, 'search'), onClear: handleClear, className: cn((_b = searchProps === null || searchProps === void 0 ? void 0 : searchProps.componentProps) === null || _b === void 0 ? void 0 : _b.className, (_a = {},
+                _a[styles.search] = view === 'desktop',
+                _a[mobileStyles.search] = view === 'mobile',
+                _a)), ref: mergeRefs([searchRef, ((_c = searchProps === null || searchProps === void 0 ? void 0 : searchProps.componentProps) === null || _c === void 0 ? void 0 : _c.ref) || null]) })));
+    };
+    var _8 = optionsListProps, header = _8.header, emptyPlaceholder = _8.emptyPlaceholder;
+    var renderOptionsListHeader = function () {
+        if (header || (view === 'desktop' && showSearch)) {
+            return (React.createElement(React.Fragment, null,
+                header,
+                view === 'desktop' && renderSearch()));
+        }
+        return null;
     };
-    var needRenderOptionsList = flatOptions.length > 0 || showEmptyOptionsList || showSearch;
-    var renderEmptyPlaceholder = useCallback(function () {
+    var renderEmptyPlaceholder = function () {
         if (emptyPlaceholder) {
             return emptyPlaceholder;
         }
@@ -282,15 +338,66 @@ function (_a, ref) {
             return React.createElement("div", { className: styles.emptySearchPlaceholder }, "\u041D\u0438\u0447\u0435\u0433\u043E \u043D\u0435 \u043D\u0430\u0448\u043B\u043E\u0441\u044C");
         }
         return undefined;
-    }, [emptyPlaceholder, showSearch]);
-    return (React.createElement("div", __assign({}, getComboboxProps(__assign(__assign({ ref: rootRef }, (disabled && { 'aria-disabled': true })), { className: cn(styles.component, (_b = {}, _b[styles.block] = block, _b), className) })), { onKeyDown: disabled ? undefined : handleFieldKeyDown, tabIndex: -1, "data-test-id": getDataTestId(dataTestId) }),
+    };
+    var renderOptionsList = function () {
+        var _a, _b, _c;
+        if (flatOptions.length === 0 && !showEmptyOptionsList && !showSearch)
+            return null;
+        var listProps = optionsListProps;
+        return (React.createElement("div", __assign({}, menuProps, { className: cn(optionsListClassName, view === 'mobile' && mobileStyles.optionsListWrapper, view === 'desktop' && styles.optionsListWrapper) }),
+            React.createElement(OptionsList, __assign({}, listProps, { ref: view === 'desktop' ? listProps.ref : scrollableContainerRef, setHighlightedIndex: view === 'desktop' ? setHighlightedIndex : undefined, className: cn((_a = {}, _a[mobileStyles.optionsList] = view === 'mobile', _a)), scrollbarClassName: cn((_b = {}, _b[mobileStyles.scrollbar] = view === 'mobile', _b)), optionsListWidth: optionsListWidth, flatOptions: flatOptions, highlightedIndex: highlightedIndex, open: open, size: size, options: filteredOptions, Optgroup: Optgroup, Option: Option, selectedItems: selectedItems, setSelectedItems: setSelectedItems, toggleMenu: toggleMenu, getOptionProps: getOptionProps, visibleOptions: view === 'desktop' ? visibleOptions : 0, dataTestId: getDataTestId(dataTestId, 'options-list'), header: renderOptionsListHeader(), optionGroupClassName: cn(optionGroupClassName, (_c = {},
+                    _c[mobileStyles.optionGroup] = view === 'mobile',
+                    _c)), emptyPlaceholder: renderEmptyPlaceholder(), onScroll: onScroll })),
+            view === 'desktop' && React.createElement("div", { className: styles.optionsListBorder })));
+    };
+    var renderInPopover = function () {
+        if (!nativeSelect && Popover) {
+            return (React.createElement(Popover, { open: open, withTransition: false, anchorElement: fieldRef.current, position: popoverPosition, preventFlip: preventFlip, popperClassName: cn(styles.popoverInner, popperClassName), update: updatePopover, zIndex: zIndexPopover }, renderOptionsList()));
+        }
+        return null;
+    };
+    var renderInBottomSheet = function () {
+        if (!nativeSelect && BottomSheet) {
+            return (React.createElement(BottomSheet, __assign({ dataTestId: getDataTestId(dataTestId, 'bottom-sheet'), open: open, className: mobileStyles.sheet, contentClassName: mobileStyles.sheetContent, containerClassName: mobileStyles.sheetContainer, title: label || placeholder, actionButton: footer, stickyHeader: true, hasCloser: true, swipeable: swipeable, initialHeight: showSearch ? 'full' : 'default' }, bottomSheetProps, { scrollableContainerRef: scrollableContainerRef, onClose: function () {
+                    var _a;
+                    closeMenu();
+                    (_a = bottomSheetProps === null || bottomSheetProps === void 0 ? void 0 : bottomSheetProps.onClose) === null || _a === void 0 ? void 0 : _a.call(bottomSheetProps);
+                }, transitionProps: __assign(__assign({}, bottomSheetProps === null || bottomSheetProps === void 0 ? void 0 : bottomSheetProps.transitionProps), { onEntered: handleEntered }), bottomAddons: React.createElement(React.Fragment, null,
+                    renderSearch(), bottomSheetProps === null || bottomSheetProps === void 0 ? void 0 :
+                    bottomSheetProps.bottomAddons), containerProps: __assign(__assign({}, bottomSheetProps === null || bottomSheetProps === void 0 ? void 0 : bottomSheetProps.containerProps), { onScroll: onScroll }) }), renderOptionsList()));
+        }
+        return null;
+    };
+    var renderInModalMobile = function () {
+        if (!nativeSelect && ModalMobile) {
+            return (React.createElement(ModalMobile, __assign({ open: open, hasCloser: true }, modalProps, { onClose: function () {
+                    var _a;
+                    var args = [];
+                    for (var _i = 0; _i < arguments.length; _i++) {
+                        args[_i] = arguments[_i];
+                    }
+                    closeMenu();
+                    (_a = modalProps === null || modalProps === void 0 ? void 0 : modalProps.onClose) === null || _a === void 0 ? void 0 : _a.call.apply(_a, __spreadArray([modalProps], args, false));
+                }, contentClassName: cn(mobileStyles.sheetContent, modalProps === null || modalProps === void 0 ? void 0 : modalProps.contentClassName), ref: mergeRefs([
+                    scrollableContainerRef,
+                    modalProps === null || modalProps === void 0 ? void 0 : modalProps.ref,
+                ]), wrapperProps: __assign(__assign({}, modalProps === null || modalProps === void 0 ? void 0 : modalProps.wrapperProps), { onScroll: onScroll }), transitionProps: __assign(__assign({}, modalProps === null || modalProps === void 0 ? void 0 : modalProps.transitionProps), { onEntered: handleEntered }) }),
+                React.createElement(ModalMobile.Header, __assign({ hasCloser: true, sticky: true }, modalHeaderProps, { title: undefined, bottomAddons: React.createElement(React.Fragment, null,
+                        renderSearch(), modalHeaderProps === null || modalHeaderProps === void 0 ? void 0 :
+                        modalHeaderProps.bottomAddons) }), (modalHeaderProps === null || modalHeaderProps === void 0 ? void 0 : modalHeaderProps.title) || label || placeholder),
+                React.createElement(ModalMobile.Content, { flex: true, className: mobileStyles.modalContent }, renderOptionsList()),
+                (modalFooterProps === null || modalFooterProps === void 0 ? void 0 : modalFooterProps.children) && React.createElement(ModalMobile.Footer, __assign({}, modalFooterProps))));
+        }
+        return null;
+    };
+    return (React.createElement("div", __assign({}, (disabled && { 'aria-disabled': true }), { "aria-expanded": inputProps['aria-expanded'], "aria-haspopup": 'listbox', role: inputProps.role, className: cn(styles.component, (_b = {}, _b[styles.block] = block, _b), className), ref: rootRef, onKeyDown: disabled ? undefined : handleFieldKeyDown, tabIndex: -1, "data-test-id": getDataTestId(dataTestId) }),
         nativeSelect && renderNativeSelect(),
         React.createElement(Field, __assign({ selectedMultiple: selectedItems, selected: selectedItems[0], setSelectedItems: setSelectedItems, toggleMenu: toggleMenu, multiple: multiple, open: open, disabled: disabled, size: size, placeholder: placeholder, label: label && React.createElement("span", __assign({}, getLabelProps()), label), labelView: labelView, Arrow: Arrow && React.createElement(Arrow, { open: open }), error: error, hint: hint, valueRenderer: valueRenderer, className: fieldClassName, innerProps: {
                 onBlur: handleFieldBlur,
                 onFocus: disabled ? undefined : handleFieldFocus,
                 onClick: disabled ? undefined : handleFieldClick,
                 tabIndex: disabled ? undefined : nativeSelect ? -1 : 0,
-                ref: mergeRefs([inputProps.ref]),
+                ref: inputProps.ref,
                 id: inputProps.id,
                 'aria-labelledby': inputProps['aria-labelledby'],
                 'aria-controls': inputProps['aria-controls'],
@@ -299,9 +406,9 @@ function (_a, ref) {
                     : undefined,
             }, dataTestId: getDataTestId(dataTestId, 'field') }, fieldProps)),
         name && !nativeSelect && renderValue(),
-        !nativeSelect && (React.createElement(Popover, { open: open, withTransition: false, anchorElement: fieldRef.current, position: popoverPosition, preventFlip: preventFlip, popperClassName: cn(styles.popoverInner, popperClassName), update: updatePopover, zIndex: zIndexPopover }, needRenderOptionsList && (React.createElement("div", __assign({}, menuProps, { className: cn(optionsListClassName, styles.optionsList) }),
-            React.createElement(OptionsList, __assign({}, optionsListProps, { setHighlightedIndex: setHighlightedIndex, optionsListWidth: optionsListWidth, flatOptions: flatOptions, highlightedIndex: highlightedIndex, open: open, size: size, options: filteredOptions, Optgroup: Optgroup, Option: Option, selectedItems: selectedItems, setSelectedItems: setSelectedItems, toggleMenu: toggleMenu, getOptionProps: getOptionProps, visibleOptions: visibleOptions, onScroll: onScroll, dataTestId: getDataTestId(dataTestId, 'options-list'), header: renderOptionsListHeader(), emptyPlaceholder: renderEmptyPlaceholder() })),
-            React.createElement("div", { className: styles.optionsListBorder })))))));
+        view === 'desktop' && renderInPopover(),
+        view === 'mobile' && isBottomSheet && renderInBottomSheet(),
+        view === 'mobile' && !isBottomSheet && renderInModalMobile()));
 });
 
 export { BaseSelect };

package/esm/components/base-select/index.css

@@ -1,8 +1,8 @@
-/* hash: 1hb7x */
+/* hash: 1wi9e */
 :root {
 } /* deprecated */ :root {
     --color-light-bg-primary: #fff;
-    --color-light-border-secondary: #e9e9eb; /* 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 */
+    --color-light-border-secondary: #e7e8ec; /* 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 { /* 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 {
 } :root {
@@ -37,12 +37,12 @@
     /* checkmark */
 
     /* optgroup */
-} .select__component_1ba4q {
+} .select__component_1fm58 {
     width: max-content;
     position: relative;
     outline: 0;
     max-width: 100%;
-} .select__popoverInner_1ba4q {
+} .select__popoverInner_1fm58 {
     padding-top: var(--select-options-list-offset);
     padding-bottom: var(--select-options-list-offset);
     box-shadow: none;
@@ -50,7 +50,7 @@
     background: transparent;
     border-radius: 0;
     position: relative;
-} .select__optionsList_1ba4q {
+} .select__optionsListWrapper_1fm58 {
     position: relative;
     padding-top: var(--select-options-list-top-padding);
     padding-bottom: var(--select-options-list-bottom-padding);
@@ -59,7 +59,7 @@
     background: var(--select-option-background);
     overflow: hidden;
     will-change: transform;
-} .select__optionsListBorder_1ba4q {
+} .select__optionsListBorder_1fm58 {
     position: absolute;
     top: 0;
     right: 0;
@@ -68,7 +68,7 @@
     box-shadow: inset 0 0 0 1px var(--color-light-border-secondary);
     border-radius: inherit;
     pointer-events: none;
-} .select__nativeSelect_1ba4q {
+} .select__nativeSelect_1fm58 {
     opacity: 0;
     overflow: hidden;
     position: absolute;
@@ -81,16 +81,16 @@
     height: 100%;
     cursor: pointer;
     z-index: 1;
-} .select__block_1ba4q {
+} .select__block_1fm58 {
     width: 100%;
-} .select__emptySearchPlaceholder_1ba4q {
+} .select__emptySearchPlaceholder_1fm58 {
     text-align: center;
-} .select__search_1ba4q {
+} .select__search_1fm58 {
     margin: var(--gap-s) var(--gap-s) 0
-} .select__search_1ba4q:last-child {
+} .select__search_1fm58:last-child {
         margin-bottom: var(--gap-s);
     } /* width: max-content; fix for IE */ @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
-    .select__component_1ba4q {
+    .select__component_1fm58 {
         float: left;
         clear: left;
     }

package/esm/components/base-select/index.js

@@ -4,8 +4,8 @@ import 'react';
 import 'react-merge-refs';
 import '@juggle/resize-observer';
 import 'classnames';
+import 'compute-scroll-into-view';
 import 'downshift';
-import '@alfalab/core-components-popover/esm';
 import '@alfalab/core-components-shared/esm';
 import '@alfalab/hooks';
 import '../../utils.js';

package/{components/base-select-mobile/index.css → esm/components/base-select/mobile.css}

@@ -1,4 +1,4 @@
-/* hash: 1qv48 */
+/* hash: 1ocl5 */
 :root {
 } /* deprecated */ :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 */
 } :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 */
@@ -27,44 +27,35 @@
     /* checkmark */
 
     /* optgroup */
-} .select__component_r2ukf {
-    width: max-content;
-    position: relative;
-    outline: 0;
-    max-width: 100%;
-} .select__sheet_r2ukf {
+} .select__sheet_1agfp {
     overflow: hidden;
-} .select__sheetContent_r2ukf {
+} .select__sheetContent_1agfp {
     padding: 0
-} .select__sheetContent_r2ukf .select__modalContent_r2ukf {
+} .select__sheetContent_1agfp .select__modalContent_1agfp {
         padding: 0;
         display: flex;
         flex-direction: column;
-    } .select__sheetContainer_r2ukf {
+    } .select__sheetContainer_1agfp {
     padding: 0;
-} .select__block_r2ukf {
-    width: 100%;
-} .select__optionsListWrapper_r2ukf {
+} .select__optionsListWrapper_1agfp {
     flex: 1;
-} .select__optionsList_r2ukf {
+} .select__optionsList_1agfp {
     height: 100%;
     display: flex;
     flex-direction: column;
-} .select__scrollbar_r2ukf {
+} .select__scrollbar_1agfp {
     flex: 1;
-} .select__emptySearchPlaceholder_r2ukf {
-    text-align: center;
-} .select__search_r2ukf {
+} .select__search_1agfp {
     padding: var(--gap-xs);
 } /* width: max-content; fix for IE */ @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
-    .select__component_r2ukf {
+    .select__component_1agfp {
         float: left;
         clear: left;
     }
-} .select__option_r2ukf {
+} .select__option_1agfp {
     padding: var(--gap-2xs) var(--gap-l) var(--gap-2xs) var(--gap-m)
-} .select__option_r2ukf:before {
+} .select__option_1agfp:before {
         display: none;
-    } .select__optionGroup_r2ukf {
+    } .select__optionGroup_1agfp {
     padding: var(--gap-m) var(--gap-m) var(--gap-xs);
 }

package/esm/components/checkmark/Component.js

@@ -5,7 +5,7 @@ import { Checkbox } from '@alfalab/core-components-checkbox/esm';
 import { CheckmarkCircleMIcon } from '@alfalab/icons-glyph/CheckmarkCircleMIcon';
 import CheckmarkMIcon from '@alfalab/icons-glyph/CheckmarkMIcon';
 
-var styles = {"checkmark":"select__checkmark_qy8ro","after":"select__after_qy8ro","single":"select__single_qy8ro","selected":"select__selected_qy8ro","before":"select__before_qy8ro","multiple":"select__multiple_qy8ro","colorIcon":"select__colorIcon_qy8ro"};
+var styles = {"checkmark":"select__checkmark_1cgjn","after":"select__after_1cgjn","single":"select__single_1cgjn","selected":"select__selected_1cgjn","before":"select__before_1cgjn","multiple":"select__multiple_1cgjn","colorIcon":"select__colorIcon_1cgjn"};
 require('./index.css')
 
 var Checkmark = function (_a) {