@alfalab/core-components-select 13.2.19 → 14.0.0

package/components/options-list/Component.js

@@ -17,7 +17,7 @@ var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var mergeRefs__default = /*#__PURE__*/_interopDefaultCompat(mergeRefs);
 var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
 
-var styles = {"optionsList":"select__optionsList_rlqgn","optionsListHeader":"select__optionsListHeader_rlqgn","optionsListFooter":"select__optionsListFooter_rlqgn","withBorder":"select__withBorder_rlqgn","scrollable":"select__scrollable_rlqgn","emptyPlaceholder":"select__emptyPlaceholder_rlqgn","l":"select__l_rlqgn","xl":"select__xl_rlqgn"};
+var styles = {"optionsList":"select__optionsList_xunrq","optionsListHeader":"select__optionsListHeader_xunrq","optionsListFooter":"select__optionsListFooter_xunrq","withBorder":"select__withBorder_xunrq","scrollable":"select__scrollable_xunrq","emptyPlaceholder":"select__emptyPlaceholder_xunrq","l":"select__l_xunrq","xl":"select__xl_xunrq"};
 require('./index.css')
 
 var createCounter = function () {

package/components/options-list/index.css

@@ -1,4 +1,4 @@
-/* hash: j956o */
+/* hash: i43kx */
 :root {
 } /* deprecated */ :root {
     --color-light-border-secondary: #e9e9eb;
@@ -29,26 +29,28 @@
     /* checkmark */
 
     /* optgroup */
-} .select__optionsList_rlqgn {
-    overflow: auto;
+} .select__optionsList_xunrq {
     width: 100%;
     outline: none;
     box-sizing: border-box;
-} .select__optionsListHeader_rlqgn {
+    position: relative;
+} .select__optionsListHeader_xunrq {
     box-sizing: border-box;
     border-bottom: 1px solid var(--color-light-border-secondary);
-} .select__optionsListFooter_rlqgn {
+} .select__optionsListFooter_xunrq {
+    position: sticky;
+    bottom: 0;
     box-sizing: border-box;
     border-top: 1px solid transparent
-} .select__optionsListFooter_rlqgn.select__withBorder_rlqgn {
+} .select__optionsListFooter_xunrq.select__withBorder_xunrq {
         border-top: 1px solid var(--color-light-border-secondary);
-    } .select__scrollable_rlqgn {
+    } .select__scrollable_xunrq {
     overflow: auto;
     width: 100%;
-} .select__emptyPlaceholder_rlqgn {
+} .select__emptyPlaceholder_xunrq {
     padding: var(--gap-m) var(--gap-s);
     color: var(--select-options-list-empty-placeholder-color);
-} .select__l_rlqgn .select__emptyPlaceholder_rlqgn,
-.select__xl_rlqgn .select__emptyPlaceholder_rlqgn {
+} .select__l_xunrq .select__emptyPlaceholder_xunrq,
+.select__xl_xunrq .select__emptyPlaceholder_xunrq {
     padding: var(--gap-xl) var(--gap-m);
 }

package/components/select-mobile/Component.js

@@ -4,42 +4,43 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 require('tslib');
 require('react');
+var presets_useSelectWithApply_optionsListWithApply_Component = require('../../Component-f1a1856f.js');
 require('../arrow/Component.js');
-var presets_useSelectWithApply_optionsListWithApply_Component = require('../../Component-86fe0799.js');
+require('../base-select-mobile/Component.js');
+require('../base-select-mobile/footer/Component.js');
 require('../field/Component.js');
 require('../optgroup/Component.js');
 require('../option/Component.js');
-require('classnames');
-require('@alfalab/icons-glyph/ChevronDownMIcon');
-require('react-merge-refs');
-require('downshift');
-require('@alfalab/core-components-bottom-sheet');
-require('@alfalab/core-components-modal/mobile');
+require('../options-list/Component.js');
+require('../virtual-options-list/Component.js');
 require('../../Component.js');
-require('../../Component-67e36290.js');
+require('../base-select/Component.js');
+require('react-merge-refs');
 require('@juggle/resize-observer');
+require('classnames');
+require('downshift');
 require('@alfalab/core-components-popover');
 require('@alfalab/hooks');
+require('../../getDataTestId-3deaae20.js');
 require('../../utils.js');
 require('../native-select/Component.js');
-require('../options-list/Component.js');
-require('@alfalab/core-components-scrollbar');
+require('@alfalab/icons-glyph/ChevronDownMIcon');
 require('@alfalab/core-components-form-control');
-require('../base-select-mobile/checkmark/Component.js');
-require('@alfalab/icons-glyph/CheckmarkMIcon');
 require('../checkmark/Component.js');
 require('@alfalab/core-components-badge');
 require('@alfalab/core-components-checkbox');
 require('@alfalab/icons-glyph/CheckmarkCircleMIcon');
-require('react-virtual');
-require('../base-option/Component.js');
-require('../base-checkmark/Component.js');
+require('@alfalab/icons-glyph/CheckmarkMIcon');
+require('../checkmark-mobile/Component.js');
+require('@alfalab/core-components-scrollbar');
 require('@alfalab/core-components-skeleton');
-require('../../intersection-observer-de1426cf.js');
+require('../../intersection-observer-d5f3e178.js');
+require('../../presets/useSelectWithApply/options-list-with-apply/footer/Component.js');
 require('@alfalab/core-components-button');
-require('../base-select-mobile/options-list/Component.js');
+require('@alfalab/core-components-bottom-sheet');
+require('@alfalab/core-components-modal/mobile');
 require('@alfalab/core-components-base-modal');
-require('../base-select-mobile/virtual-options-list/Component.js');
+require('react-virtual');
 
 
 

package/components/select-mobile/index.d.ts

@@ -1 +1 @@
-export * from "../../Component-86fe0799";
+export * from "../../Component-f1a1856f";

package/components/select-mobile/index.js

@@ -2,44 +2,45 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var presets_useSelectWithApply_optionsListWithApply_Component = require('../../Component-86fe0799.js');
+var presets_useSelectWithApply_optionsListWithApply_Component = require('../../Component-f1a1856f.js');
 require('tslib');
 require('react');
+require('../../Component.js');
 require('../arrow/Component.js');
 require('classnames');
 require('@alfalab/icons-glyph/ChevronDownMIcon');
+require('../base-select/Component.js');
 require('react-merge-refs');
-require('downshift');
-require('@alfalab/core-components-bottom-sheet');
-require('@alfalab/core-components-modal/mobile');
-require('../../Component.js');
-require('../../Component-67e36290.js');
 require('@juggle/resize-observer');
+require('downshift');
 require('@alfalab/core-components-popover');
 require('@alfalab/hooks');
+require('../../getDataTestId-3deaae20.js');
 require('../../utils.js');
 require('../native-select/Component.js');
 require('../field/Component.js');
 require('@alfalab/core-components-form-control');
 require('../optgroup/Component.js');
 require('../option/Component.js');
-require('../base-select-mobile/checkmark/Component.js');
-require('@alfalab/icons-glyph/CheckmarkMIcon');
 require('../checkmark/Component.js');
 require('@alfalab/core-components-badge');
 require('@alfalab/core-components-checkbox');
 require('@alfalab/icons-glyph/CheckmarkCircleMIcon');
+require('@alfalab/icons-glyph/CheckmarkMIcon');
+require('../checkmark-mobile/Component.js');
 require('../options-list/Component.js');
 require('@alfalab/core-components-scrollbar');
+require('../base-select-mobile/Component.js');
+require('@alfalab/core-components-bottom-sheet');
+require('@alfalab/core-components-modal/mobile');
+require('../base-select-mobile/footer/Component.js');
+require('@alfalab/core-components-base-modal');
+require('@alfalab/core-components-button');
+require('../virtual-options-list/Component.js');
 require('react-virtual');
-require('../base-option/Component.js');
-require('../base-checkmark/Component.js');
 require('@alfalab/core-components-skeleton');
-require('../../intersection-observer-de1426cf.js');
-require('@alfalab/core-components-button');
-require('../base-select-mobile/options-list/Component.js');
-require('@alfalab/core-components-base-modal');
-require('../base-select-mobile/virtual-options-list/Component.js');
+require('../../intersection-observer-d5f3e178.js');
+require('../../presets/useSelectWithApply/options-list-with-apply/footer/Component.js');
 
 
 

package/components/select-modal-mobile/Component.js

@@ -4,42 +4,43 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 require('tslib');
 require('react');
+var presets_useSelectWithApply_optionsListWithApply_Component = require('../../Component-f1a1856f.js');
 require('../arrow/Component.js');
-var presets_useSelectWithApply_optionsListWithApply_Component = require('../../Component-86fe0799.js');
+require('../base-select-mobile/Component.js');
+require('../base-select-mobile/footer/Component.js');
 require('../field/Component.js');
 require('../optgroup/Component.js');
 require('../option/Component.js');
-require('classnames');
-require('@alfalab/icons-glyph/ChevronDownMIcon');
-require('react-merge-refs');
-require('downshift');
-require('@alfalab/core-components-bottom-sheet');
-require('@alfalab/core-components-modal/mobile');
+require('../options-list/Component.js');
+require('../virtual-options-list/Component.js');
 require('../../Component.js');
-require('../../Component-67e36290.js');
+require('../base-select/Component.js');
+require('react-merge-refs');
 require('@juggle/resize-observer');
+require('classnames');
+require('downshift');
 require('@alfalab/core-components-popover');
 require('@alfalab/hooks');
+require('../../getDataTestId-3deaae20.js');
 require('../../utils.js');
 require('../native-select/Component.js');
-require('../options-list/Component.js');
-require('@alfalab/core-components-scrollbar');
+require('@alfalab/icons-glyph/ChevronDownMIcon');
 require('@alfalab/core-components-form-control');
-require('../base-select-mobile/checkmark/Component.js');
-require('@alfalab/icons-glyph/CheckmarkMIcon');
 require('../checkmark/Component.js');
 require('@alfalab/core-components-badge');
 require('@alfalab/core-components-checkbox');
 require('@alfalab/icons-glyph/CheckmarkCircleMIcon');
-require('react-virtual');
-require('../base-option/Component.js');
-require('../base-checkmark/Component.js');
+require('@alfalab/icons-glyph/CheckmarkMIcon');
+require('../checkmark-mobile/Component.js');
+require('@alfalab/core-components-scrollbar');
 require('@alfalab/core-components-skeleton');
-require('../../intersection-observer-de1426cf.js');
+require('../../intersection-observer-d5f3e178.js');
+require('../../presets/useSelectWithApply/options-list-with-apply/footer/Component.js');
 require('@alfalab/core-components-button');
-require('../base-select-mobile/options-list/Component.js');
+require('@alfalab/core-components-bottom-sheet');
+require('@alfalab/core-components-modal/mobile');
 require('@alfalab/core-components-base-modal');
-require('../base-select-mobile/virtual-options-list/Component.js');
+require('react-virtual');
 
 
 

package/components/select-modal-mobile/index.d.ts

@@ -1 +1 @@
-export * from "../../Component-86fe0799";
+export * from "../../Component-f1a1856f";

package/components/select-modal-mobile/index.js

@@ -2,44 +2,45 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var presets_useSelectWithApply_optionsListWithApply_Component = require('../../Component-86fe0799.js');
+var presets_useSelectWithApply_optionsListWithApply_Component = require('../../Component-f1a1856f.js');
 require('tslib');
 require('react');
+require('../../Component.js');
 require('../arrow/Component.js');
 require('classnames');
 require('@alfalab/icons-glyph/ChevronDownMIcon');
+require('../base-select/Component.js');
 require('react-merge-refs');
-require('downshift');
-require('@alfalab/core-components-bottom-sheet');
-require('@alfalab/core-components-modal/mobile');
-require('../../Component.js');
-require('../../Component-67e36290.js');
 require('@juggle/resize-observer');
+require('downshift');
 require('@alfalab/core-components-popover');
 require('@alfalab/hooks');
+require('../../getDataTestId-3deaae20.js');
 require('../../utils.js');
 require('../native-select/Component.js');
 require('../field/Component.js');
 require('@alfalab/core-components-form-control');
 require('../optgroup/Component.js');
 require('../option/Component.js');
-require('../base-select-mobile/checkmark/Component.js');
-require('@alfalab/icons-glyph/CheckmarkMIcon');
 require('../checkmark/Component.js');
 require('@alfalab/core-components-badge');
 require('@alfalab/core-components-checkbox');
 require('@alfalab/icons-glyph/CheckmarkCircleMIcon');
+require('@alfalab/icons-glyph/CheckmarkMIcon');
+require('../checkmark-mobile/Component.js');
 require('../options-list/Component.js');
 require('@alfalab/core-components-scrollbar');
+require('../base-select-mobile/Component.js');
+require('@alfalab/core-components-bottom-sheet');
+require('@alfalab/core-components-modal/mobile');
+require('../base-select-mobile/footer/Component.js');
+require('@alfalab/core-components-base-modal');
+require('@alfalab/core-components-button');
+require('../virtual-options-list/Component.js');
 require('react-virtual');
-require('../base-option/Component.js');
-require('../base-checkmark/Component.js');
 require('@alfalab/core-components-skeleton');
-require('../../intersection-observer-de1426cf.js');
-require('@alfalab/core-components-button');
-require('../base-select-mobile/options-list/Component.js');
-require('@alfalab/core-components-base-modal');
-require('../base-select-mobile/virtual-options-list/Component.js');
+require('../../intersection-observer-d5f3e178.js');
+require('../../presets/useSelectWithApply/options-list-with-apply/footer/Component.js');
 
 
 

package/components/virtual-options-list/Component.d.ts

@@ -1,10 +1,5 @@
 /// <reference types="react" />
+import React from 'react';
 import { OptionsListProps } from "../../typings";
-type VirtualOptionsList = Omit<OptionsListProps, 'optionsListWidth'> & {
-    /**
-     * Число отрисованных пунктов до\после видимого окна
-     */
-    overscan?: number;
-};
-declare const VirtualOptionsList: ({ size, flatOptions, highlightedIndex, className, getOptionProps, Option, open, options, overscan, Optgroup, dataTestId, emptyPlaceholder, visibleOptions, onScroll, header, footer, nativeScrollbar: nativeScrollbarProp, }: VirtualOptionsList) => JSX.Element;
+declare const VirtualOptionsList: React.ForwardRefExoticComponent<OptionsListProps & React.RefAttributes<HTMLDivElement>>;
 export { VirtualOptionsList };

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

@@ -4,6 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var tslib = require('tslib');
 var React = require('react');
+var mergeRefs = require('react-merge-refs');
 var reactVirtual = require('react-virtual');
 var cn = require('classnames');
 var coreComponentsScrollbar = require('@alfalab/core-components-scrollbar');
@@ -14,33 +15,34 @@ var components_optgroup_Component = require('../optgroup/Component.js');
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+var mergeRefs__default = /*#__PURE__*/_interopDefaultCompat(mergeRefs);
 var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
 
-var styles = {"virtualOptionsList":"select__virtualOptionsList_1dpez","virtualOptionsListHeader":"select__virtualOptionsListHeader_1dpez","virtualOptionsListFooter":"select__virtualOptionsListFooter_1dpez","withBorder":"select__withBorder_1dpez","scrollable":"select__scrollable_1dpez","inner":"select__inner_1dpez","virtualRow":"select__virtualRow_1dpez","highlighted":"select__highlighted_1dpez","emptyPlaceholder":"select__emptyPlaceholder_1dpez","l":"select__l_1dpez","xl":"select__xl_1dpez"};
+var styles = {"virtualOptionsList":"select__virtualOptionsList_8klep","virtualOptionsListHeader":"select__virtualOptionsListHeader_8klep","virtualOptionsListFooter":"select__virtualOptionsListFooter_8klep","withBorder":"select__withBorder_8klep","scrollable":"select__scrollable_8klep","inner":"select__inner_8klep","virtualRow":"select__virtualRow_8klep","highlighted":"select__highlighted_8klep","emptyPlaceholder":"select__emptyPlaceholder_8klep","l":"select__l_8klep","xl":"select__xl_8klep"};
 require('./index.css')
 
-/* eslint-disable react-hooks/exhaustive-deps */
-// eslint-disable-next-line @typescript-eslint/no-redeclare
-var VirtualOptionsList = function (_a) {
+var VirtualOptionsList = React.forwardRef(function (_a, ref) {
     var _b;
-    var _c = _a.size, size = _c === void 0 ? 's' : _c, _d = _a.flatOptions, flatOptions = _d === void 0 ? [] : _d, _e = _a.highlightedIndex, highlightedIndex = _e === void 0 ? -1 : _e, className = _a.className, getOptionProps = _a.getOptionProps, Option = _a.Option, open = _a.open, _f = _a.options, options = _f === void 0 ? [] : _f, _g = _a.overscan, overscan = _g === void 0 ? 10 : _g, _h = _a.Optgroup, Optgroup = _h === void 0 ? components_optgroup_Component.Optgroup : _h, dataTestId = _a.dataTestId, emptyPlaceholder = _a.emptyPlaceholder, _j = _a.visibleOptions, visibleOptions = _j === void 0 ? 5 : _j, onScroll = _a.onScroll, header = _a.header, footer = _a.footer, nativeScrollbarProp = _a.nativeScrollbar;
+    var _c = _a.size, size = _c === void 0 ? 's' : _c, _d = _a.flatOptions, flatOptions = _d === void 0 ? [] : _d, _e = _a.highlightedIndex, highlightedIndex = _e === void 0 ? -1 : _e, className = _a.className, getOptionProps = _a.getOptionProps, Option = _a.Option, open = _a.open, _f = _a.options, options = _f === void 0 ? [] : _f, _g = _a.Optgroup, Optgroup = _g === void 0 ? components_optgroup_Component.Optgroup : _g, dataTestId = _a.dataTestId, emptyPlaceholder = _a.emptyPlaceholder, _h = _a.visibleOptions, visibleOptions = _h === void 0 ? 5 : _h, header = _a.header, footer = _a.footer, optionsListWidth = _a.optionsListWidth, onScroll = _a.onScroll, nativeScrollbarProp = _a.nativeScrollbar;
     var listRef = React.useRef(null);
     var parentRef = React.useRef(null);
     var scrollbarRef = React.useRef(null);
-    var _k = React.useState(0), visibleOptionsInvalidateKey = _k[0], setVisibleOptionsInvalidateKey = _k[1];
+    var _j = React.useState(0), visibleOptionsInvalidateKey = _j[0], setVisibleOptionsInvalidateKey = _j[1];
     var prevHighlightedIndex = utils.usePrevious(highlightedIndex) || -1;
+    var nativeScrollbar = hooks.useMedia([[true, '(max-width: 1023px)']], false)[0];
     var rowVirtualizer = reactVirtual.useVirtual({
         size: flatOptions.length,
-        parentRef: parentRef,
-        overscan: overscan,
+        parentRef: (ref || parentRef),
+        overscan: 15,
     });
-    var nativeScrollbar = hooks.useMedia([[true, '(max-width: 1023px)']], false)[0];
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     nativeScrollbar = Boolean(nativeScrollbarProp !== null && nativeScrollbarProp !== void 0 ? nativeScrollbarProp : nativeScrollbar);
     // Сколл к выбранному пункту при открытии меню
     React.useEffect(function () {
         if (open) {
             rowVirtualizer.scrollToIndex(highlightedIndex, { align: 'end' });
         }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [open]);
     // Скролл к пункту, которого нет на экране
     React.useEffect(function () {
@@ -49,6 +51,7 @@ var VirtualOptionsList = function (_a) {
         if (!rowVirtualizer.virtualItems.some(function (option) { return option.index === highlightedIndex; })) {
             rowVirtualizer.scrollToIndex(highlightedIndex, { align: 'end' });
         }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [highlightedIndex]);
     // Циклическая навигация
     React.useEffect(function () {
@@ -62,6 +65,7 @@ var VirtualOptionsList = function (_a) {
         if (prevHighlightedIndex >= lastNonDisabled && highlightedIndex === 0) {
             rowVirtualizer.scrollToIndex(0);
         }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [prevHighlightedIndex, highlightedIndex]);
     React.useEffect(function () {
         setVisibleOptionsInvalidateKey(
@@ -93,11 +97,6 @@ var VirtualOptionsList = function (_a) {
             return acc;
         }, {});
     }, [options]);
-    var contentNodeProps = {
-        className: styles.inner,
-        style: { height: "".concat(rowVirtualizer.totalSize, "px") },
-        ref: listRef,
-    };
     var renderList = function () {
         return rowVirtualizer.virtualItems.map(function (virtualRow) {
             var _a;
@@ -109,12 +108,25 @@ var VirtualOptionsList = function (_a) {
                     transform: "translateY(".concat(virtualRow.start, "px)"),
                 } },
                 group && React__default.default.createElement(Optgroup, { label: group.label }),
-                !utils.isGroup(option) && React__default.default.createElement(Option, tslib.__assign({}, getOptionProps(option, virtualRow.index)))));
+                !utils.isGroup(option) && (React__default.default.createElement(Option, tslib.__assign({}, getOptionProps(option, virtualRow.index))))));
         });
     };
-    var renderWithCustomScrollbar = function () { return (React__default.default.createElement(coreComponentsScrollbar.Scrollbar, { className: styles.scrollable, ref: scrollbarRef, scrollableNodeProps: { onScroll: onScroll, ref: parentRef }, contentNodeProps: contentNodeProps }, renderList())); };
-    var renderWithNativeScrollbar = function () { return (React__default.default.createElement("div", { className: styles.scrollable, ref: parentRef, onScroll: onScroll },
-        React__default.default.createElement("div", tslib.__assign({}, contentNodeProps), renderList()))); };
+    var contentNodeProps = {
+        className: styles.inner,
+        style: { height: "".concat(rowVirtualizer.totalSize, "px") },
+        ref: listRef,
+    };
+    var renderWithCustomScrollbar = function () { return (React__default.default.createElement(coreComponentsScrollbar.Scrollbar, { className: styles.scrollable, ref: scrollbarRef, horizontalAutoStretch: optionsListWidth === 'content', scrollableNodeProps: { onScroll: onScroll, ref: parentRef }, contentNodeProps: contentNodeProps }, renderList())); };
+    var renderWithNativeScrollbar = function () {
+        if (visibleOptions) {
+            return (React__default.default.createElement("div", { className: styles.scrollable, ref: mergeRefs__default.default([parentRef, ref]), onScroll: onScroll },
+                React__default.default.createElement("div", tslib.__assign({}, contentNodeProps), renderList())));
+        }
+        return React__default.default.createElement("div", tslib.__assign({}, contentNodeProps), renderList());
+    };
+    if (options.length === 0 && !emptyPlaceholder) {
+        return null;
+    }
     return (React__default.default.createElement("div", { className: cn__default.default(styles.virtualOptionsList, styles[size], className), "data-test-id": dataTestId },
         header && React__default.default.createElement("div", { className: styles.virtualOptionsListHeader }, header),
         nativeScrollbar ? renderWithNativeScrollbar() : renderWithCustomScrollbar(),
@@ -122,6 +134,6 @@ var VirtualOptionsList = function (_a) {
         footer && (React__default.default.createElement("div", { className: cn__default.default(styles.virtualOptionsListFooter, (_b = {},
                 _b[styles.withBorder] = visibleOptions && flatOptions.length > visibleOptions,
                 _b)) }, footer))));
-};
+});
 
 exports.VirtualOptionsList = VirtualOptionsList;

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

@@ -1,4 +1,4 @@
-/* hash: 3jeuw */
+/* hash: y762s */
 :root {
 } /* deprecated */ :root {
     --color-light-border-primary: #dcdcdd;
@@ -35,31 +35,34 @@
     /* checkmark */
 
     /* optgroup */
-} .select__virtualOptionsList_1dpez {
+} .select__virtualOptionsList_8klep {
     width: 100%;
     outline: none;
     box-sizing: border-box;
-    position: relative;
-} .select__virtualOptionsListHeader_1dpez {
+    position: sticky;
+} .select__virtualOptionsListHeader_8klep {
     box-sizing: border-box;
     border-bottom: 1px solid var(--color-light-border-secondary);
-} .select__virtualOptionsListFooter_1dpez {
+} .select__virtualOptionsListFooter_8klep {
+    position: sticky;
+    bottom: 0;
     box-sizing: border-box;
     border-top: 1px solid transparent
-} .select__virtualOptionsListFooter_1dpez.select__withBorder_1dpez {
+} .select__virtualOptionsListFooter_8klep.select__withBorder_8klep {
         border-top: 1px solid var(--color-light-border-secondary);
-    } .select__scrollable_1dpez {
+    } .select__scrollable_8klep {
+    position: relative;
     overflow: auto;
     width: 100%;
-} .select__inner_1dpez {
+} .select__inner_8klep {
     position: relative;
     width: 100%;
-} .select__virtualRow_1dpez {
+} .select__virtualRow_8klep {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%
-} .select__virtualRow_1dpez:before {
+} .select__virtualRow_8klep:before {
         content: '';
         position: absolute;
         z-index: 1;
@@ -69,15 +72,15 @@
         height: 1px;
         background: var(--select-option-divider-background);
         display: var(--select-option-divider-display);
-    } .select__virtualRow_1dpez:first-child:before {
+    } .select__virtualRow_8klep:first-child:before {
         display: none;
-    } .select__highlighted_1dpez:before,
-    .select__highlighted_1dpez + .select__virtualRow_1dpez:before {
+    } .select__highlighted_8klep:before,
+    .select__highlighted_8klep + .select__virtualRow_8klep:before {
         display: none;
-    } .select__emptyPlaceholder_1dpez {
+    } .select__emptyPlaceholder_8klep {
     padding: var(--gap-m) var(--gap-s);
     color: var(--select-options-list-empty-placeholder-color);
-} .select__l_1dpez .select__emptyPlaceholder_1dpez,
-.select__xl_1dpez .select__emptyPlaceholder_1dpez {
+} .select__l_8klep .select__emptyPlaceholder_8klep,
+.select__xl_8klep .select__emptyPlaceholder_8klep {
     padding: var(--gap-xl) var(--gap-m);
 }

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

@@ -5,6 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var components_virtualOptionsList_Component = require('./Component.js');
 require('tslib');
 require('react');
+require('react-merge-refs');
 require('react-virtual');
 require('classnames');
 require('@alfalab/core-components-scrollbar');

package/cssm/Component-3885b0d7.d.ts

@@ -164,6 +164,6 @@ declare const typographyPresets: {
     };
 };
 declare const TitleResponsive: FC<TitleProps>;
-declare const NavigationBar: FC<NavigationBarProps>;
+declare const NavigationBar: React.ForwardRefExoticComponent<NavigationBarProps & React.RefAttributes<HTMLDivElement>>;
 export { BackArrowAddonProps, BackArrowAddon, Typography, typographyPresets, TitleResponsive, NavigationBar };
 export type { TitleProps, TextProps, Color };

package/cssm/Component-610b3743.d.ts

@@ -0,0 +1,61 @@
+/// <reference types="react" />
+import React from "react";
+import { ReactNode } from "react";
+import { BottomSheetProps } from "@alfalab/core-components-bottom-sheet";
+import { UseSelectWithApplyProps } from "./hook-4b555174";
+import { BaseSelectProps, OptionShape, OptionsListProps } from "./typings";
+import { FooterProps } from "./presets/useSelectWithApply/options-list-with-apply/footer/Component";
+type AdditionalMobileProps = {
+    /**
+     * Футер
+     * @deprecated Используйте bottomSheetProps.actionButton
+     */
+    footer?: ReactNode;
+    /**
+     * Будет ли свайпаться шторка
+     * @deprecated Используйте bottomSheetProps.swipeable
+     */
+    swipeable?: boolean;
+    /**
+     * Дополнительные пропсы шторки
+     */
+    bottomSheetProps?: Partial<BottomSheetProps>;
+    /**
+     * Показывать кнопку очистки
+     */
+    showClear?: UseSelectWithApplyProps["showClear"];
+    /**
+     * Показывать пункт "Выбрать все"
+     */
+    showSelectAll?: UseSelectWithApplyProps["showSelectAll"];
+};
+type SelectMobileProps = Omit<BaseSelectProps, "Checkmark" | "onScroll"> & AdditionalMobileProps;
+declare const SelectMobile: React.ForwardRefExoticComponent<Omit<BaseSelectProps, "onScroll" | "Checkmark"> & AdditionalMobileProps & React.RefAttributes<unknown>>;
+declare const OptionsListWithApply: React.ForwardRefExoticComponent<OptionsListProps & {
+    showClear?: boolean | undefined;
+    onClose?: (() => void) | undefined;
+    selectedDraft?: OptionShape[] | undefined;
+    OptionsList?: React.FC<OptionsListProps & React.RefAttributes<HTMLDivElement>> | undefined;
+    Footer?: React.FC<FooterProps> | undefined;
+} & React.RefAttributes<HTMLDivElement>>;
+type SelectModalMobileProps = Omit<BaseSelectProps, 'Checkmark' | 'onScroll'> & {
+    /**
+     * Показывать кнопку очистки
+     */
+    showClear?: UseSelectWithApplyProps['showClear'];
+    /**
+     * Показывать пункт "Выбрать все"
+     */
+    showSelectAll?: UseSelectWithApplyProps['showSelectAll'];
+};
+declare const SelectModalMobile: React.ForwardRefExoticComponent<Omit<BaseSelectProps, "onScroll" | "Checkmark"> & {
+    /**
+     * Показывать кнопку очистки
+     */
+    showClear?: UseSelectWithApplyProps['showClear'];
+    /**
+     * Показывать пункт "Выбрать все"
+     */
+    showSelectAll?: UseSelectWithApplyProps['showSelectAll'];
+} & React.RefAttributes<unknown>>;
+export { AdditionalMobileProps, SelectMobileProps, SelectMobile, OptionsListWithApply, SelectModalMobileProps, SelectModalMobile };