@alfalab/core-components 40.0.0 → 40.2.0-beta.0

package/select/modern/components/base-select-mobile/{options-list → footer}/index.js

@@ -1,7 +1,5 @@
-export { OptionsList } from './Component.js';
+export { Footer } from './Component.js';
 import 'react';
 import 'classnames';
 import '../../../../../base-modal/modern';
 import '../../../../../button/modern';
-import '../../optgroup/Component.js';
-import '../../../utils.js';

package/select/modern/components/base-select-mobile/index.css

@@ -21,7 +21,6 @@
 } :root {
 
     /* options list */
-    --select-options-list-offset: var(--gap-2xs);
 
     /* option */
 
@@ -32,14 +31,6 @@
     width: max-content;
     position: relative;
     outline: 0;
-} .select__popoverInner_1lci1 {
-    padding-top: var(--select-options-list-offset);
-    padding-bottom: var(--select-options-list-offset);
-    box-shadow: none;
-    border: none;
-    background: transparent;
-    border-radius: 0;
-    position: relative;
 } .select__sheet_1lci1 {
     overflow: hidden;
 } .select__sheetContent_1lci1 {

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

@@ -1 +1 @@
-export * from "../../Component-4c4a3ab4";
+export * from "./Component";

package/select/modern/components/base-select-mobile/index.js

@@ -1,37 +1,24 @@
-export { B as BaseSelectMobile } from '../../Component-4c4a3ab4.js';
+export { BaseSelectMobile } from './Component.js';
 import 'react';
-import '../arrow/Component.js';
-import 'classnames';
-import '@alfalab/icons-glyph/ChevronDownMIcon';
 import 'react-merge-refs';
+import 'classnames';
 import 'downshift';
 import '../../../../bottom-sheet/modern';
 import '../../../../modal/modern/mobile';
-import '../../Component.js';
-import '../../Component-979388ae.js';
-import '@juggle/resize-observer';
-import '../../../../popover/modern';
-import '@alfalab/hooks';
-import '../native-select/Component.js';
+import '../arrow/Component.js';
+import '@alfalab/icons-glyph/ChevronDownMIcon';
 import '../field/Component.js';
 import '../../../../form-control/modern';
+import '@alfalab/hooks';
 import '../optgroup/Component.js';
 import '../option/Component.js';
-import './checkmark/Component.js';
-import '@alfalab/icons-glyph/CheckmarkMIcon';
 import '../checkmark/Component.js';
 import '../../../../badge/modern';
 import '../../../../checkbox/modern';
 import '@alfalab/icons-glyph/CheckmarkCircleMIcon';
+import '@alfalab/icons-glyph/CheckmarkMIcon';
+import '../checkmark-mobile/Component.js';
 import '../options-list/Component.js';
 import '../../../../scrollbar/modern';
-import 'react-virtual';
-import '../base-option/Component.js';
-import '../base-checkmark/Component.js';
-import '../../../../skeleton/modern';
-import '../../intersection-observer-be15dad5.js';
-import '../../../../button/modern';
-import './options-list/Component.js';
-import '../../../../base-modal/modern';
-import './virtual-options-list/Component.js';
+import '../../getDataTestId-c6fd39a7.js';
 import '../../utils.js';

package/select/modern/components/{base-select-mobile/checkmark → checkmark-mobile}/Component.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
-import { CheckmarkProps } from "../../../typings";
+import { CheckmarkProps } from "../../typings";
 declare const Checkmark: ({ selected, className }: CheckmarkProps) => JSX.Element;
 export { Checkmark };

package/select/modern/components/{base-select-mobile/checkmark → checkmark-mobile}/Component.js

@@ -2,7 +2,7 @@ import React from 'react';
 import cn from 'classnames';
 import { CheckmarkMIcon } from '@alfalab/icons-glyph/CheckmarkMIcon';
 
-const styles = {"checkmark":"select__checkmark_18x5r","selected":"select__selected_18x5r","displayIcon":"select__displayIcon_18x5r","displayBadge":"select__displayBadge_18x5r"};
+const styles = {"checkmark":"select__checkmark_1c2mc","selected":"select__selected_1c2mc","displayIcon":"select__displayIcon_1c2mc","displayBadge":"select__displayBadge_1c2mc"};
 require('./index.css');
 
 const Checkmark = ({ selected, className }) => (React.createElement("div", { className: cn(styles.checkmark, className, {

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

@@ -1,4 +1,4 @@
-/* hash: 1nnd5 */
+/* hash: jwk8c */
 :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 */
@@ -25,7 +25,7 @@
     --select-mobile-checkmark-display-badge: none;
 
     /* optgroup */
-} .select__checkmark_18x5r {
+} .select__checkmark_1c2mc {
     flex-shrink: 0;
     display: flex;
     align-items: center;
@@ -33,12 +33,12 @@
     width: 24px;
     height: 24px;
     opacity: 0
-} .select__checkmark_18x5r:first-child {
+} .select__checkmark_1c2mc:first-child {
         display: none;
-    } .select__checkmark_18x5r.select__selected_18x5r {
+    } .select__checkmark_1c2mc.select__selected_1c2mc {
         opacity: 1;
-    } .select__displayIcon_18x5r {
+    } .select__displayIcon_1c2mc {
     display: var(--select-mobile-checkmark-display-icon);
-} .select__displayBadge_18x5r {
+} .select__displayBadge_1c2mc {
     display: var(--select-mobile-checkmark-display-badge);
 }

package/select/modern/components/index.js

@@ -1,6 +1,6 @@
 export { Arrow } from './arrow/Component.js';
-export { B as BaseSelect } from '../Component-979388ae.js';
-export { S as SelectMobile, a as SelectModalMobile } from '../Component-4c4a3ab4.js';
+export { BaseSelect } from './base-select/Component.js';
+export { S as SelectMobile, a as SelectModalMobile } from '../Component-4d5dba68.js';
 export { Field } from './field/Component.js';
 export { Optgroup } from './optgroup/Component.js';
 export { Option } from './option/Component.js';
@@ -16,23 +16,25 @@ import 'downshift';
 import '../../../popover/modern';
 import '@alfalab/hooks';
 import './native-select/Component.js';
+import '../Component.js';
+import './base-select-mobile/Component.js';
 import '../../../bottom-sheet/modern';
 import '../../../modal/modern/mobile';
-import '../Component.js';
-import 'react-virtual';
-import '../../../scrollbar/modern';
-import '../../../skeleton/modern';
-import '../intersection-observer-be15dad5.js';
+import './base-select-mobile/footer/Component.js';
+import '../../../base-modal/modern';
 import '../../../button/modern';
 import '../../../form-control/modern';
-import '@alfalab/icons-glyph/CheckmarkMIcon';
 import '../../../badge/modern';
 import '../../../checkbox/modern';
 import '@alfalab/icons-glyph/CheckmarkCircleMIcon';
-import './base-checkmark/Component.js';
-import './base-select-mobile/checkmark/Component.js';
-import './base-select-mobile/options-list/Component.js';
-import '../../../base-modal/modern';
-import './base-select-mobile/virtual-options-list/Component.js';
+import '@alfalab/icons-glyph/CheckmarkMIcon';
+import '../../../skeleton/modern';
+import '../intersection-observer-d4da4352.js';
+import '../presets/useSelectWithApply/options-list-with-apply/footer/Component.js';
 import './checkmark/Component.js';
+import './checkmark-mobile/Component.js';
+import '../../../scrollbar/modern';
+import 'react-virtual';
+import './base-checkmark/Component.js';
+import '../getDataTestId-c6fd39a7.js';
 import '../utils.js';

package/select/modern/components/option/Component.js

@@ -1,11 +1,11 @@
 import React, { isValidElement } from 'react';
 import cn from 'classnames';
-import { Checkmark } from '../base-select-mobile/checkmark/Component.js';
 import { Checkmark as Checkmark$1 } from '../checkmark/Component.js';
-import '@alfalab/icons-glyph/CheckmarkMIcon';
+import { Checkmark } from '../checkmark-mobile/Component.js';
 import '../../../../badge/modern';
 import '../../../../checkbox/modern';
 import '@alfalab/icons-glyph/CheckmarkCircleMIcon';
+import '@alfalab/icons-glyph/CheckmarkMIcon';
 
 const styles = {"option":"select__option_1qr13","disabled":"select__disabled_1qr13","s":"select__s_1qr13","m":"select__m_1qr13","l":"select__l_1qr13","xl":"select__xl_1qr13","selected":"select__selected_1qr13","highlighted":"select__highlighted_1qr13","content":"select__content_1qr13","textContent":"select__textContent_1qr13"};
 require('./index.css');

package/select/modern/components/option/index.js

@@ -1,9 +1,9 @@
 export { Option } from './Component.js';
 import 'react';
 import 'classnames';
-import '../base-select-mobile/checkmark/Component.js';
-import '@alfalab/icons-glyph/CheckmarkMIcon';
 import '../checkmark/Component.js';
 import '../../../../badge/modern';
 import '../../../../checkbox/modern';
 import '@alfalab/icons-glyph/CheckmarkCircleMIcon';
+import '@alfalab/icons-glyph/CheckmarkMIcon';
+import '../checkmark-mobile/Component.js';

package/select/modern/components/options-list/Component.d.ts

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

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

@@ -30,14 +30,16 @@
 
     /* optgroup */
 } .select__optionsList_rlqgn {
-    overflow: auto;
     width: 100%;
     outline: none;
     box-sizing: border-box;
+    position: relative;
 } .select__optionsListHeader_rlqgn {
     box-sizing: border-box;
     border-bottom: 1px solid var(--color-light-border-secondary);
 } .select__optionsListFooter_rlqgn {
+    position: sticky;
+    bottom: 0;
     box-sizing: border-box;
     border-top: 1px solid transparent
 } .select__optionsListFooter_rlqgn.select__withBorder_rlqgn {

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

@@ -1,37 +1,38 @@
 import 'react';
+export { S as SelectMobile } from '../../Component-4d5dba68.js';
 import '../arrow/Component.js';
-export { S as SelectMobile } from '../../Component-4c4a3ab4.js';
+import '../base-select-mobile/Component.js';
+import '../base-select-mobile/footer/Component.js';
 import '../field/Component.js';
 import '../optgroup/Component.js';
 import '../option/Component.js';
-import 'classnames';
-import '@alfalab/icons-glyph/ChevronDownMIcon';
-import 'react-merge-refs';
-import 'downshift';
-import '../../../../bottom-sheet/modern';
-import '../../../../modal/modern/mobile';
+import '../options-list/Component.js';
+import '../virtual-options-list/Component.js';
 import '../../Component.js';
-import '../../Component-979388ae.js';
+import '../base-select/Component.js';
+import 'react-merge-refs';
 import '@juggle/resize-observer';
+import 'classnames';
+import 'downshift';
 import '../../../../popover/modern';
 import '@alfalab/hooks';
 import '../native-select/Component.js';
-import '../options-list/Component.js';
-import '../../../../scrollbar/modern';
+import '@alfalab/icons-glyph/ChevronDownMIcon';
 import '../../../../form-control/modern';
-import '../base-select-mobile/checkmark/Component.js';
-import '@alfalab/icons-glyph/CheckmarkMIcon';
 import '../checkmark/Component.js';
 import '../../../../badge/modern';
 import '../../../../checkbox/modern';
 import '@alfalab/icons-glyph/CheckmarkCircleMIcon';
-import 'react-virtual';
-import '../base-option/Component.js';
-import '../base-checkmark/Component.js';
+import '@alfalab/icons-glyph/CheckmarkMIcon';
+import '../checkmark-mobile/Component.js';
+import '../../../../scrollbar/modern';
 import '../../../../skeleton/modern';
-import '../../intersection-observer-be15dad5.js';
+import '../../intersection-observer-d4da4352.js';
+import '../../presets/useSelectWithApply/options-list-with-apply/footer/Component.js';
 import '../../../../button/modern';
-import '../base-select-mobile/options-list/Component.js';
+import '../../../../bottom-sheet/modern';
+import '../../../../modal/modern/mobile';
 import '../../../../base-modal/modern';
-import '../base-select-mobile/virtual-options-list/Component.js';
+import 'react-virtual';
 import '../../utils.js';
+import '../../getDataTestId-c6fd39a7.js';

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

@@ -1 +1 @@
-export * from "../../Component-4c4a3ab4";
+export * from "../../Component-4d5dba68";

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

@@ -1,15 +1,13 @@
-export { S as SelectMobile } from '../../Component-4c4a3ab4.js';
+export { S as SelectMobile } from '../../Component-4d5dba68.js';
 import 'react';
+import '../../Component.js';
 import '../arrow/Component.js';
 import 'classnames';
 import '@alfalab/icons-glyph/ChevronDownMIcon';
+import '../base-select/Component.js';
 import 'react-merge-refs';
-import 'downshift';
-import '../../../../bottom-sheet/modern';
-import '../../../../modal/modern/mobile';
-import '../../Component.js';
-import '../../Component-979388ae.js';
 import '@juggle/resize-observer';
+import 'downshift';
 import '../../../../popover/modern';
 import '@alfalab/hooks';
 import '../native-select/Component.js';
@@ -17,21 +15,24 @@ import '../field/Component.js';
 import '../../../../form-control/modern';
 import '../optgroup/Component.js';
 import '../option/Component.js';
-import '../base-select-mobile/checkmark/Component.js';
-import '@alfalab/icons-glyph/CheckmarkMIcon';
 import '../checkmark/Component.js';
 import '../../../../badge/modern';
 import '../../../../checkbox/modern';
 import '@alfalab/icons-glyph/CheckmarkCircleMIcon';
+import '@alfalab/icons-glyph/CheckmarkMIcon';
+import '../checkmark-mobile/Component.js';
 import '../options-list/Component.js';
 import '../../../../scrollbar/modern';
+import '../base-select-mobile/Component.js';
+import '../../../../bottom-sheet/modern';
+import '../../../../modal/modern/mobile';
+import '../base-select-mobile/footer/Component.js';
+import '../../../../base-modal/modern';
+import '../../../../button/modern';
+import '../virtual-options-list/Component.js';
 import 'react-virtual';
-import '../base-option/Component.js';
-import '../base-checkmark/Component.js';
 import '../../../../skeleton/modern';
-import '../../intersection-observer-be15dad5.js';
-import '../../../../button/modern';
-import '../base-select-mobile/options-list/Component.js';
-import '../../../../base-modal/modern';
-import '../base-select-mobile/virtual-options-list/Component.js';
+import '../../intersection-observer-d4da4352.js';
+import '../../presets/useSelectWithApply/options-list-with-apply/footer/Component.js';
 import '../../utils.js';
+import '../../getDataTestId-c6fd39a7.js';

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

@@ -1,37 +1,38 @@
 import 'react';
+export { a as SelectModalMobile } from '../../Component-4d5dba68.js';
 import '../arrow/Component.js';
-export { a as SelectModalMobile } from '../../Component-4c4a3ab4.js';
+import '../base-select-mobile/Component.js';
+import '../base-select-mobile/footer/Component.js';
 import '../field/Component.js';
 import '../optgroup/Component.js';
 import '../option/Component.js';
-import 'classnames';
-import '@alfalab/icons-glyph/ChevronDownMIcon';
-import 'react-merge-refs';
-import 'downshift';
-import '../../../../bottom-sheet/modern';
-import '../../../../modal/modern/mobile';
+import '../options-list/Component.js';
+import '../virtual-options-list/Component.js';
 import '../../Component.js';
-import '../../Component-979388ae.js';
+import '../base-select/Component.js';
+import 'react-merge-refs';
 import '@juggle/resize-observer';
+import 'classnames';
+import 'downshift';
 import '../../../../popover/modern';
 import '@alfalab/hooks';
 import '../native-select/Component.js';
-import '../options-list/Component.js';
-import '../../../../scrollbar/modern';
+import '@alfalab/icons-glyph/ChevronDownMIcon';
 import '../../../../form-control/modern';
-import '../base-select-mobile/checkmark/Component.js';
-import '@alfalab/icons-glyph/CheckmarkMIcon';
 import '../checkmark/Component.js';
 import '../../../../badge/modern';
 import '../../../../checkbox/modern';
 import '@alfalab/icons-glyph/CheckmarkCircleMIcon';
-import 'react-virtual';
-import '../base-option/Component.js';
-import '../base-checkmark/Component.js';
+import '@alfalab/icons-glyph/CheckmarkMIcon';
+import '../checkmark-mobile/Component.js';
+import '../../../../scrollbar/modern';
 import '../../../../skeleton/modern';
-import '../../intersection-observer-be15dad5.js';
+import '../../intersection-observer-d4da4352.js';
+import '../../presets/useSelectWithApply/options-list-with-apply/footer/Component.js';
 import '../../../../button/modern';
-import '../base-select-mobile/options-list/Component.js';
+import '../../../../bottom-sheet/modern';
+import '../../../../modal/modern/mobile';
 import '../../../../base-modal/modern';
-import '../base-select-mobile/virtual-options-list/Component.js';
+import 'react-virtual';
 import '../../utils.js';
+import '../../getDataTestId-c6fd39a7.js';

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

@@ -1 +1 @@
-export * from "../../Component-4c4a3ab4";
+export * from "../../Component-4d5dba68";

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

@@ -1,15 +1,13 @@
-export { a as SelectModalMobile } from '../../Component-4c4a3ab4.js';
+export { a as SelectModalMobile } from '../../Component-4d5dba68.js';
 import 'react';
+import '../../Component.js';
 import '../arrow/Component.js';
 import 'classnames';
 import '@alfalab/icons-glyph/ChevronDownMIcon';
+import '../base-select/Component.js';
 import 'react-merge-refs';
-import 'downshift';
-import '../../../../bottom-sheet/modern';
-import '../../../../modal/modern/mobile';
-import '../../Component.js';
-import '../../Component-979388ae.js';
 import '@juggle/resize-observer';
+import 'downshift';
 import '../../../../popover/modern';
 import '@alfalab/hooks';
 import '../native-select/Component.js';
@@ -17,21 +15,24 @@ import '../field/Component.js';
 import '../../../../form-control/modern';
 import '../optgroup/Component.js';
 import '../option/Component.js';
-import '../base-select-mobile/checkmark/Component.js';
-import '@alfalab/icons-glyph/CheckmarkMIcon';
 import '../checkmark/Component.js';
 import '../../../../badge/modern';
 import '../../../../checkbox/modern';
 import '@alfalab/icons-glyph/CheckmarkCircleMIcon';
+import '@alfalab/icons-glyph/CheckmarkMIcon';
+import '../checkmark-mobile/Component.js';
 import '../options-list/Component.js';
 import '../../../../scrollbar/modern';
+import '../base-select-mobile/Component.js';
+import '../../../../bottom-sheet/modern';
+import '../../../../modal/modern/mobile';
+import '../base-select-mobile/footer/Component.js';
+import '../../../../base-modal/modern';
+import '../../../../button/modern';
+import '../virtual-options-list/Component.js';
 import 'react-virtual';
-import '../base-option/Component.js';
-import '../base-checkmark/Component.js';
 import '../../../../skeleton/modern';
-import '../../intersection-observer-be15dad5.js';
-import '../../../../button/modern';
-import '../base-select-mobile/options-list/Component.js';
-import '../../../../base-modal/modern';
-import '../base-select-mobile/virtual-options-list/Component.js';
+import '../../intersection-observer-d4da4352.js';
+import '../../presets/useSelectWithApply/options-list-with-apply/footer/Component.js';
 import '../../utils.js';
+import '../../getDataTestId-c6fd39a7.js';

package/select/modern/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/select/modern/components/virtual-options-list/Component.js

@@ -1,4 +1,5 @@
-import React, { useRef, useState, useEffect, useMemo } from 'react';
+import React, { forwardRef, useRef, useState, useEffect, useMemo } from 'react';
+import mergeRefs from 'react-merge-refs';
 import { useVirtual } from 'react-virtual';
 import cn from 'classnames';
 import { Scrollbar } from '../../../../scrollbar/modern';
@@ -9,26 +10,26 @@ import { Optgroup } from '../optgroup/Component.js';
 const 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"};
 require('./index.css');
 
-/* eslint-disable react-hooks/exhaustive-deps */
-// eslint-disable-next-line @typescript-eslint/no-redeclare
-const VirtualOptionsList = ({ size = 's', flatOptions = [], highlightedIndex = -1, className, getOptionProps, Option, open, options = [], overscan = 10, Optgroup: Optgroup$1 = Optgroup, dataTestId, emptyPlaceholder, visibleOptions = 5, onScroll, header, footer, nativeScrollbar: nativeScrollbarProp, }) => {
+const VirtualOptionsList = forwardRef(({ size = 's', flatOptions = [], highlightedIndex = -1, className, getOptionProps, Option, open, options = [], Optgroup: Optgroup$1 = Optgroup, dataTestId, emptyPlaceholder, visibleOptions = 5, header, footer, optionsListWidth, onScroll, nativeScrollbar: nativeScrollbarProp, }, ref) => {
     const listRef = useRef(null);
     const parentRef = useRef(null);
     const scrollbarRef = useRef(null);
     const [visibleOptionsInvalidateKey, setVisibleOptionsInvalidateKey] = useState(0);
     const prevHighlightedIndex = usePrevious(highlightedIndex) || -1;
+    let [nativeScrollbar] = useMedia([[true, '(max-width: 1023px)']], false);
     const rowVirtualizer = useVirtual({
         size: flatOptions.length,
-        parentRef,
-        overscan,
+        parentRef: (ref || parentRef),
+        overscan: 15,
     });
-    let [nativeScrollbar] = useMedia([[true, '(max-width: 1023px)']], false);
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     nativeScrollbar = Boolean(nativeScrollbarProp ?? nativeScrollbar);
     // Сколл к выбранному пункту при открытии меню
     useEffect(() => {
         if (open) {
             rowVirtualizer.scrollToIndex(highlightedIndex, { align: 'end' });
         }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [open]);
     // Скролл к пункту, которого нет на экране
     useEffect(() => {
@@ -37,6 +38,7 @@ const VirtualOptionsList = ({ size = 's', flatOptions = [], highlightedIndex = -
         if (!rowVirtualizer.virtualItems.some((option) => option.index === highlightedIndex)) {
             rowVirtualizer.scrollToIndex(highlightedIndex, { align: 'end' });
         }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [highlightedIndex]);
     // Циклическая навигация
     useEffect(() => {
@@ -50,6 +52,7 @@ const VirtualOptionsList = ({ size = 's', flatOptions = [], highlightedIndex = -
         if (prevHighlightedIndex >= lastNonDisabled && highlightedIndex === 0) {
             rowVirtualizer.scrollToIndex(0);
         }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [prevHighlightedIndex, highlightedIndex]);
     useEffect(() => {
         setVisibleOptionsInvalidateKey(
@@ -81,11 +84,6 @@ const VirtualOptionsList = ({ size = 's', flatOptions = [], highlightedIndex = -
             return acc;
         }, {});
     }, [options]);
-    const contentNodeProps = {
-        className: styles.inner,
-        style: { height: `${rowVirtualizer.totalSize}px` },
-        ref: listRef,
-    };
     const renderList = () => rowVirtualizer.virtualItems.map((virtualRow) => {
         const option = flatOptions[virtualRow.index];
         const group = options[groupStartIndexes[virtualRow.index]];
@@ -95,11 +93,24 @@ const VirtualOptionsList = ({ size = 's', flatOptions = [], highlightedIndex = -
                 transform: `translateY(${virtualRow.start}px)`,
             } },
             group && React.createElement(Optgroup$1, { label: group.label }),
-            !isGroup(option) && React.createElement(Option, { ...getOptionProps(option, virtualRow.index) })));
+            !isGroup(option) && (React.createElement(Option, { ...getOptionProps(option, virtualRow.index) }))));
     });
-    const renderWithCustomScrollbar = () => (React.createElement(Scrollbar, { className: styles.scrollable, ref: scrollbarRef, scrollableNodeProps: { onScroll, ref: parentRef }, contentNodeProps: contentNodeProps }, renderList()));
-    const renderWithNativeScrollbar = () => (React.createElement("div", { className: styles.scrollable, ref: parentRef, onScroll: onScroll },
-        React.createElement("div", { ...contentNodeProps }, renderList())));
+    const contentNodeProps = {
+        className: styles.inner,
+        style: { height: `${rowVirtualizer.totalSize}px` },
+        ref: listRef,
+    };
+    const renderWithCustomScrollbar = () => (React.createElement(Scrollbar, { className: styles.scrollable, ref: scrollbarRef, horizontalAutoStretch: optionsListWidth === 'content', scrollableNodeProps: { onScroll, ref: parentRef }, contentNodeProps: contentNodeProps }, renderList()));
+    const renderWithNativeScrollbar = () => {
+        if (visibleOptions) {
+            return (React.createElement("div", { className: styles.scrollable, ref: mergeRefs([parentRef, ref]), onScroll: onScroll },
+                React.createElement("div", { ...contentNodeProps }, renderList())));
+        }
+        return React.createElement("div", { ...contentNodeProps }, renderList());
+    };
+    if (options.length === 0 && !emptyPlaceholder) {
+        return null;
+    }
     return (React.createElement("div", { className: cn(styles.virtualOptionsList, styles[size], className), "data-test-id": dataTestId },
         header && React.createElement("div", { className: styles.virtualOptionsListHeader }, header),
         nativeScrollbar ? renderWithNativeScrollbar() : renderWithCustomScrollbar(),
@@ -107,6 +118,6 @@ const VirtualOptionsList = ({ size = 's', flatOptions = [], highlightedIndex = -
         footer && (React.createElement("div", { className: cn(styles.virtualOptionsListFooter, {
                 [styles.withBorder]: visibleOptions && flatOptions.length > visibleOptions,
             }) }, footer))));
-};
+});
 
 export { VirtualOptionsList };

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

@@ -39,16 +39,19 @@
     width: 100%;
     outline: none;
     box-sizing: border-box;
-    position: relative;
+    position: sticky;
 } .select__virtualOptionsListHeader_1dpez {
     box-sizing: border-box;
     border-bottom: 1px solid var(--color-light-border-secondary);
 } .select__virtualOptionsListFooter_1dpez {
+    position: sticky;
+    bottom: 0;
     box-sizing: border-box;
     border-top: 1px solid transparent
 } .select__virtualOptionsListFooter_1dpez.select__withBorder_1dpez {
         border-top: 1px solid var(--color-light-border-secondary);
     } .select__scrollable_1dpez {
+    position: relative;
     overflow: auto;
     width: 100%;
 } .select__inner_1dpez {

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

@@ -1,5 +1,6 @@
 export { VirtualOptionsList } from './Component.js';
 import 'react';
+import 'react-merge-refs';
 import 'react-virtual';
 import 'classnames';
 import '../../../../scrollbar/modern';

package/select/modern/getDataTestId-c6fd39a7.d.ts

@@ -0,0 +1,2 @@
+declare const getDataTestId: (dataTestId?: string, element?: string) => string | undefined;
+export { getDataTestId };