@alfalab/core-components-select 15.2.3 → 16.0.0

package/components/base-select/Component.d.ts

@@ -1,5 +1,20 @@
 /// <reference types="react" />
 import React from 'react';
-import { BaseSelectProps } from "../../typings";
-declare const BaseSelect: React.ForwardRefExoticComponent<BaseSelectProps & React.RefAttributes<unknown>>;
+import { FC } from "react";
+import { BottomSheetProps } from "@alfalab/core-components-bottom-sheet";
+import { ModalMobileProps } from "@alfalab/core-components-modal/mobile";
+import { ModalContentProps, ModalFooterProps, ModalHeaderProps } from "@alfalab/core-components-modal/shared";
+import { PopoverProps } from "@alfalab/core-components-popover";
+import { AdditionalMobileProps, BaseSelectProps, BottomSheetSelectMobileProps, ModalSelectMobileProps } from "../../typings";
+declare const BaseSelect: React.ForwardRefExoticComponent<BaseSelectProps & AdditionalMobileProps & BottomSheetSelectMobileProps & ModalSelectMobileProps & {
+    isBottomSheet?: boolean | undefined;
+    view: 'desktop' | 'mobile';
+    Popover?: React.ForwardRefExoticComponent<PopoverProps & React.RefAttributes<HTMLDivElement>> | undefined;
+    BottomSheet?: React.ForwardRefExoticComponent<BottomSheetProps & React.RefAttributes<HTMLDivElement>> | undefined;
+    ModalMobile?: (React.ForwardRefExoticComponent<ModalMobileProps & React.RefAttributes<HTMLDivElement>> & {
+        Header: FC<ModalHeaderProps>;
+        Footer: FC<ModalFooterProps>;
+        Content: FC<ModalContentProps>;
+    }) | undefined;
+} & React.RefAttributes<unknown>>;
 export { BaseSelect };

package/components/base-select/Component.js

@@ -7,8 +7,8 @@ var React = require('react');
 var mergeRefs = require('react-merge-refs');
 var resizeObserver = require('@juggle/resize-observer');
 var cn = require('classnames');
+var computeScrollIntoView = require('compute-scroll-into-view');
 var downshift = require('downshift');
-var coreComponentsPopover = require('@alfalab/core-components-popover');
 var coreComponentsShared = require('@alfalab/core-components-shared');
 var hooks = require('@alfalab/hooks');
 var utils = require('../../utils.js');
@@ -20,31 +20,49 @@ var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var mergeRefs__default = /*#__PURE__*/_interopDefaultCompat(mergeRefs);
 var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
 
-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 = React.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 = React.useRef(null);
     var fieldRef = React.useRef(null);
     var listRef = React.useRef(null);
     var initiatorRef = React.useRef(null);
     var searchRef = React.useRef(null);
-    var _2 = React__default.default.useState(''), searchState = _2[0], setSearchState = _2[1];
-    var _3 = typeof (searchProps === null || searchProps === void 0 ? void 0 : searchProps.value) === 'string'
+    var alreadyClickedRef = React.useRef(false);
+    var scrollableContainerRef = React.useRef(null);
+    var _3 = React__default.default.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 || utils.defaultAccessor;
-    var _4 = React.useMemo(function () {
-        return utils.processOptions(options, selected, function (option) {
-            return utils.defaultFilterFn(accessor(option), search);
+    var filterFn = searchProps.filterFn || utils.defaultFilterFn;
+    var _5 = React.useMemo(function () { return utils.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 = computeScrollIntoView.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) {
@@ -71,14 +89,15 @@ function (_a, ref) {
     if (selected !== undefined) {
         useMultipleSelectionProps.selectedItems = selectedOptions;
     }
-    var _5 = downshift.useMultipleSelection(useMultipleSelectionProps), selectedItems = _5.selectedItems, addSelectedItem = _5.addSelectedItem, setSelectedItems = _5.setSelectedItems, removeSelectedItem = _5.removeSelectedItem, getDropdownProps = _5.getDropdownProps;
-    var _6 = downshift.useCombobox({
+    var _6 = downshift.useMultipleSelection(useMultipleSelectionProps), selectedItems = _6.selectedItems, addSelectedItem = _6.addSelectedItem, setSelectedItems = _6.setSelectedItems, removeSelectedItem = _6.removeSelectedItem, getDropdownProps = _6.getDropdownProps;
+    var _7 = downshift.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) {
                 /**
@@ -95,7 +114,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();
@@ -106,14 +125,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 downshift.useCombobox.stateChangeTypes.InputBlur:
+                    if (view === 'mobile') {
+                        return state;
+                    }
+                    return changes;
+                case downshift.useCombobox.stateChangeTypes.InputKeyDownArrowDown:
+                    if (!circularNavigation && state.highlightedIndex === options.length - 1) {
+                        return tslib.__assign(tslib.__assign({}, changes), { highlightedIndex: state.highlightedIndex });
+                    }
+                    return changes;
+                case downshift.useCombobox.stateChangeTypes.InputKeyDownArrowUp:
+                    if (!circularNavigation && state.highlightedIndex === 0) {
+                        return tslib.__assign(tslib.__assign({}, changes), { highlightedIndex: state.highlightedIndex });
+                    }
+                    return changes;
                 case downshift.useCombobox.stateChangeTypes.InputKeyDownEnter:
                 case downshift.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__default.default.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) {
@@ -128,7 +170,7 @@ function (_a, ref) {
                             }
                         }
                     }
-                    return tslib.__assign(tslib.__assign({}, changes), { isOpen: !closeOnSelect, 
+                    return tslib.__assign(tslib.__assign({}, changes), { isOpen: !closeOnSelect || (view === 'mobile' && multiple), 
                         // при closeOnSelect === false - сохраняем подсвеченный индекс
                         highlightedIndex: state.isOpen && !closeOnSelect
                             ? state.highlightedIndex
@@ -137,9 +179,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__default.default([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);
@@ -148,16 +201,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 &&
@@ -192,24 +250,19 @@ function (_a, ref) {
             return option.selected ? acc.concat(flatOptions[index]) : acc;
         }, []));
     }, [flatOptions, setSelectedItems]);
-    var getOptionProps = React.useCallback(function (option, index) { return (tslib.__assign(tslib.__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: coreComponentsShared.getDataTestId(dataTestId, 'option') })); }, [
-        dataTestId,
-        getItemProps,
-        highlightedIndex,
-        multiple,
-        optionClassName,
-        optionProps,
-        optionsSize,
-        selectedItems,
-    ]);
+    var getOptionProps = function (option, index) {
+        var _a;
+        return (tslib.__assign(tslib.__assign({}, optionProps), { mobile: view === 'mobile', className: cn__default.default(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: coreComponentsShared.getDataTestId(dataTestId, 'option') }));
+    };
     React.useEffect(function () {
         if (defaultOpen)
             openMenu();
@@ -221,7 +274,7 @@ function (_a, ref) {
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
     var calcOptionsListWidth = React.useCallback(function () {
-        if (listRef.current) {
+        if (view === 'desktop' && listRef.current) {
             var widthAttr = optionsListWidth === 'field' ? 'width' : 'minWidth';
             var optionsListMinWidth = rootRef.current
                 ? rootRef.current.getBoundingClientRect().width
@@ -229,46 +282,40 @@ function (_a, ref) {
             listRef.current.setAttribute('style', '');
             listRef.current.style[widthAttr] = "".concat(optionsListMinWidth, "px");
         }
-    }, [optionsListWidth]);
+    }, [view, optionsListWidth]);
     React.useEffect(function () {
-        var ResizeObserver = window.ResizeObserver || resizeObserver.ResizeObserver;
-        var observer = new ResizeObserver(calcOptionsListWidth);
-        if (rootRef.current) {
-            observer.observe(rootRef.current);
+        if (view === 'desktop') {
+            var ResizeObserver_1 = window.ResizeObserver || 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 coreComponentsShared.fnUtils.noop;
+    }, [view, calcOptionsListWidth, open, optionsListWidth]);
     hooks.useLayoutEffect_SAFE_FOR_SSR(calcOptionsListWidth, [
         open,
         optionsListWidth,
         filteredOptions,
         selectedItems,
     ]);
-    var renderValue = React.useCallback(function () {
+    var renderValue = function () {
         return selectedItems.map(function (option) { return (React__default.default.createElement("input", { type: 'hidden', name: name, value: option.key, key: option.key })); });
-    }, [selectedItems, name]);
-    var renderNativeSelect = React.useCallback(function () {
+    };
+    var renderNativeSelect = function () {
         var value = multiple
             ? selectedItems.map(function (option) { return option.key; })
             : (selectedItems[0] || {}).key;
         return (React__default.default.createElement(components_nativeSelect_Component.NativeSelect, tslib.__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('');
@@ -279,12 +326,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__default.default.createElement(React__default.default.Fragment, null,
-            header,
-            showSearch && (React__default.default.createElement(Search, tslib.__assign({}, searchProps === null || searchProps === void 0 ? void 0 : searchProps.componentProps, { value: search, onChange: handleChange, dataTestId: coreComponentsShared.getDataTestId(dataTestId, 'search'), onClear: handleClear, className: cn__default.default(styles.search, (_a = searchProps === null || searchProps === void 0 ? void 0 : searchProps.componentProps) === null || _a === void 0 ? void 0 : _a.className), ref: searchRef })))));
+        return (React__default.default.createElement(Search, tslib.__assign({}, searchProps === null || searchProps === void 0 ? void 0 : searchProps.componentProps, { value: search, onChange: handleChange, dataTestId: coreComponentsShared.getDataTestId(dataTestId, 'search'), onClear: handleClear, className: cn__default.default((_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__default.default([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__default.default.createElement(React__default.default.Fragment, null,
+                header,
+                view === 'desktop' && renderSearch()));
+        }
+        return null;
     };
-    var needRenderOptionsList = flatOptions.length > 0 || showEmptyOptionsList || showSearch;
-    var renderEmptyPlaceholder = React.useCallback(function () {
+    var renderEmptyPlaceholder = function () {
         if (emptyPlaceholder) {
             return emptyPlaceholder;
         }
@@ -292,15 +348,66 @@ function (_a, ref) {
             return React__default.default.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__default.default.createElement("div", tslib.__assign({}, getComboboxProps(tslib.__assign(tslib.__assign({ ref: rootRef }, (disabled && { 'aria-disabled': true })), { className: cn__default.default(styles.component, (_b = {}, _b[styles.block] = block, _b), className) })), { onKeyDown: disabled ? undefined : handleFieldKeyDown, tabIndex: -1, "data-test-id": coreComponentsShared.getDataTestId(dataTestId) }),
+    };
+    var renderOptionsList = function () {
+        var _a, _b, _c;
+        if (flatOptions.length === 0 && !showEmptyOptionsList && !showSearch)
+            return null;
+        var listProps = optionsListProps;
+        return (React__default.default.createElement("div", tslib.__assign({}, menuProps, { className: cn__default.default(optionsListClassName, view === 'mobile' && mobileStyles.optionsListWrapper, view === 'desktop' && styles.optionsListWrapper) }),
+            React__default.default.createElement(OptionsList, tslib.__assign({}, listProps, { ref: view === 'desktop' ? listProps.ref : scrollableContainerRef, setHighlightedIndex: view === 'desktop' ? setHighlightedIndex : undefined, className: cn__default.default((_a = {}, _a[mobileStyles.optionsList] = view === 'mobile', _a)), scrollbarClassName: cn__default.default((_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: coreComponentsShared.getDataTestId(dataTestId, 'options-list'), header: renderOptionsListHeader(), optionGroupClassName: cn__default.default(optionGroupClassName, (_c = {},
+                    _c[mobileStyles.optionGroup] = view === 'mobile',
+                    _c)), emptyPlaceholder: renderEmptyPlaceholder(), onScroll: onScroll })),
+            view === 'desktop' && React__default.default.createElement("div", { className: styles.optionsListBorder })));
+    };
+    var renderInPopover = function () {
+        if (!nativeSelect && Popover) {
+            return (React__default.default.createElement(Popover, { open: open, withTransition: false, anchorElement: fieldRef.current, position: popoverPosition, preventFlip: preventFlip, popperClassName: cn__default.default(styles.popoverInner, popperClassName), update: updatePopover, zIndex: zIndexPopover }, renderOptionsList()));
+        }
+        return null;
+    };
+    var renderInBottomSheet = function () {
+        if (!nativeSelect && BottomSheet) {
+            return (React__default.default.createElement(BottomSheet, tslib.__assign({ dataTestId: coreComponentsShared.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: tslib.__assign(tslib.__assign({}, bottomSheetProps === null || bottomSheetProps === void 0 ? void 0 : bottomSheetProps.transitionProps), { onEntered: handleEntered }), bottomAddons: React__default.default.createElement(React__default.default.Fragment, null,
+                    renderSearch(), bottomSheetProps === null || bottomSheetProps === void 0 ? void 0 :
+                    bottomSheetProps.bottomAddons), containerProps: tslib.__assign(tslib.__assign({}, bottomSheetProps === null || bottomSheetProps === void 0 ? void 0 : bottomSheetProps.containerProps), { onScroll: onScroll }) }), renderOptionsList()));
+        }
+        return null;
+    };
+    var renderInModalMobile = function () {
+        if (!nativeSelect && ModalMobile) {
+            return (React__default.default.createElement(ModalMobile, tslib.__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, tslib.__spreadArray([modalProps], args, false));
+                }, contentClassName: cn__default.default(mobileStyles.sheetContent, modalProps === null || modalProps === void 0 ? void 0 : modalProps.contentClassName), ref: mergeRefs__default.default([
+                    scrollableContainerRef,
+                    modalProps === null || modalProps === void 0 ? void 0 : modalProps.ref,
+                ]), wrapperProps: tslib.__assign(tslib.__assign({}, modalProps === null || modalProps === void 0 ? void 0 : modalProps.wrapperProps), { onScroll: onScroll }), transitionProps: tslib.__assign(tslib.__assign({}, modalProps === null || modalProps === void 0 ? void 0 : modalProps.transitionProps), { onEntered: handleEntered }) }),
+                React__default.default.createElement(ModalMobile.Header, tslib.__assign({ hasCloser: true, sticky: true }, modalHeaderProps, { title: undefined, bottomAddons: React__default.default.createElement(React__default.default.Fragment, null,
+                        renderSearch(), modalHeaderProps === null || modalHeaderProps === void 0 ? void 0 :
+                        modalHeaderProps.bottomAddons) }), (modalHeaderProps === null || modalHeaderProps === void 0 ? void 0 : modalHeaderProps.title) || label || placeholder),
+                React__default.default.createElement(ModalMobile.Content, { flex: true, className: mobileStyles.modalContent }, renderOptionsList()),
+                (modalFooterProps === null || modalFooterProps === void 0 ? void 0 : modalFooterProps.children) && React__default.default.createElement(ModalMobile.Footer, tslib.__assign({}, modalFooterProps))));
+        }
+        return null;
+    };
+    return (React__default.default.createElement("div", tslib.__assign({}, (disabled && { 'aria-disabled': true }), { "aria-expanded": inputProps['aria-expanded'], "aria-haspopup": 'listbox', role: inputProps.role, className: cn__default.default(styles.component, (_b = {}, _b[styles.block] = block, _b), className), ref: rootRef, onKeyDown: disabled ? undefined : handleFieldKeyDown, tabIndex: -1, "data-test-id": coreComponentsShared.getDataTestId(dataTestId) }),
         nativeSelect && renderNativeSelect(),
         React__default.default.createElement(Field, tslib.__assign({ selectedMultiple: selectedItems, selected: selectedItems[0], setSelectedItems: setSelectedItems, toggleMenu: toggleMenu, multiple: multiple, open: open, disabled: disabled, size: size, placeholder: placeholder, label: label && React__default.default.createElement("span", tslib.__assign({}, getLabelProps()), label), labelView: labelView, Arrow: Arrow && React__default.default.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__default.default([inputProps.ref]),
+                ref: inputProps.ref,
                 id: inputProps.id,
                 'aria-labelledby': inputProps['aria-labelledby'],
                 'aria-controls': inputProps['aria-controls'],
@@ -309,9 +416,9 @@ function (_a, ref) {
                     : undefined,
             }, dataTestId: coreComponentsShared.getDataTestId(dataTestId, 'field') }, fieldProps)),
         name && !nativeSelect && renderValue(),
-        !nativeSelect && (React__default.default.createElement(coreComponentsPopover.Popover, { open: open, withTransition: false, anchorElement: fieldRef.current, position: popoverPosition, preventFlip: preventFlip, popperClassName: cn__default.default(styles.popoverInner, popperClassName), update: updatePopover, zIndex: zIndexPopover }, needRenderOptionsList && (React__default.default.createElement("div", tslib.__assign({}, menuProps, { className: cn__default.default(optionsListClassName, styles.optionsList) }),
-            React__default.default.createElement(OptionsList, tslib.__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: coreComponentsShared.getDataTestId(dataTestId, 'options-list'), header: renderOptionsListHeader(), emptyPlaceholder: renderEmptyPlaceholder() })),
-            React__default.default.createElement("div", { className: styles.optionsListBorder })))))));
+        view === 'desktop' && renderInPopover(),
+        view === 'mobile' && isBottomSheet && renderInBottomSheet(),
+        view === 'mobile' && !isBottomSheet && renderInModalMobile()));
 });
 
 exports.BaseSelect = BaseSelect;

package/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/components/base-select/index.js

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

package/{esm/components/base-select-mobile/index.css → 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/components/checkmark/Component.js

@@ -15,7 +15,7 @@ var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
 var CheckmarkMIcon__default = /*#__PURE__*/_interopDefaultCompat(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) {