@alfalab/core-components-select 13.2.20 → 14.0.0

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

@@ -1,38 +1,39 @@
 import 'tslib';
 import 'react';
+export { S as SelectMobile } from '../../Component-b5248298.js';
 import '../arrow/Component.js';
-export { S as SelectMobile } from '../../Component-1830cf5e.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 '@alfalab/core-components-bottom-sheet/esm';
-import '@alfalab/core-components-modal/esm/mobile';
+import '../options-list/Component.js';
+import '../virtual-options-list/Component.js';
 import '../../Component.js';
-import '../../Component-578c3e05.js';
+import '../base-select/Component.js';
+import 'react-merge-refs';
 import '@juggle/resize-observer';
+import 'classnames';
+import 'downshift';
 import '@alfalab/core-components-popover/esm';
 import '@alfalab/hooks';
+import '../../getDataTestId-015e89f1.js';
 import '../../utils.js';
 import '../native-select/Component.js';
-import '../options-list/Component.js';
-import '@alfalab/core-components-scrollbar/esm';
+import '@alfalab/icons-glyph/ChevronDownMIcon';
 import '@alfalab/core-components-form-control/esm';
-import '../base-select-mobile/checkmark/Component.js';
-import '@alfalab/icons-glyph/CheckmarkMIcon';
 import '../checkmark/Component.js';
 import '@alfalab/core-components-badge/esm';
 import '@alfalab/core-components-checkbox/esm';
 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 '@alfalab/core-components-scrollbar/esm';
 import '@alfalab/core-components-skeleton/esm';
-import '../../intersection-observer-55833352.js';
+import '../../intersection-observer-961b54c8.js';
+import '../../presets/useSelectWithApply/options-list-with-apply/footer/Component.js';
 import '@alfalab/core-components-button/esm';
-import '../base-select-mobile/options-list/Component.js';
+import '@alfalab/core-components-bottom-sheet/esm';
+import '@alfalab/core-components-modal/esm/mobile';
 import '@alfalab/core-components-base-modal/esm';
-import '../base-select-mobile/virtual-options-list/Component.js';
+import 'react-virtual';

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

@@ -1 +1 @@
-export * from "../../Component-1830cf5e";
+export * from "../../Component-b5248298";

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

@@ -1,38 +1,39 @@
-export { S as SelectMobile } from '../../Component-1830cf5e.js';
+export { S as SelectMobile } from '../../Component-b5248298.js';
 import 'tslib';
 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 '@alfalab/core-components-bottom-sheet/esm';
-import '@alfalab/core-components-modal/esm/mobile';
-import '../../Component.js';
-import '../../Component-578c3e05.js';
 import '@juggle/resize-observer';
+import 'downshift';
 import '@alfalab/core-components-popover/esm';
 import '@alfalab/hooks';
+import '../../getDataTestId-015e89f1.js';
 import '../../utils.js';
 import '../native-select/Component.js';
 import '../field/Component.js';
 import '@alfalab/core-components-form-control/esm';
 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 '@alfalab/core-components-badge/esm';
 import '@alfalab/core-components-checkbox/esm';
 import '@alfalab/icons-glyph/CheckmarkCircleMIcon';
+import '@alfalab/icons-glyph/CheckmarkMIcon';
+import '../checkmark-mobile/Component.js';
 import '../options-list/Component.js';
 import '@alfalab/core-components-scrollbar/esm';
+import '../base-select-mobile/Component.js';
+import '@alfalab/core-components-bottom-sheet/esm';
+import '@alfalab/core-components-modal/esm/mobile';
+import '../base-select-mobile/footer/Component.js';
+import '@alfalab/core-components-base-modal/esm';
+import '@alfalab/core-components-button/esm';
+import '../virtual-options-list/Component.js';
 import 'react-virtual';
-import '../base-option/Component.js';
-import '../base-checkmark/Component.js';
 import '@alfalab/core-components-skeleton/esm';
-import '../../intersection-observer-55833352.js';
-import '@alfalab/core-components-button/esm';
-import '../base-select-mobile/options-list/Component.js';
-import '@alfalab/core-components-base-modal/esm';
-import '../base-select-mobile/virtual-options-list/Component.js';
+import '../../intersection-observer-961b54c8.js';
+import '../../presets/useSelectWithApply/options-list-with-apply/footer/Component.js';

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

@@ -1,38 +1,39 @@
 import 'tslib';
 import 'react';
+export { a as SelectModalMobile } from '../../Component-b5248298.js';
 import '../arrow/Component.js';
-export { a as SelectModalMobile } from '../../Component-1830cf5e.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 '@alfalab/core-components-bottom-sheet/esm';
-import '@alfalab/core-components-modal/esm/mobile';
+import '../options-list/Component.js';
+import '../virtual-options-list/Component.js';
 import '../../Component.js';
-import '../../Component-578c3e05.js';
+import '../base-select/Component.js';
+import 'react-merge-refs';
 import '@juggle/resize-observer';
+import 'classnames';
+import 'downshift';
 import '@alfalab/core-components-popover/esm';
 import '@alfalab/hooks';
+import '../../getDataTestId-015e89f1.js';
 import '../../utils.js';
 import '../native-select/Component.js';
-import '../options-list/Component.js';
-import '@alfalab/core-components-scrollbar/esm';
+import '@alfalab/icons-glyph/ChevronDownMIcon';
 import '@alfalab/core-components-form-control/esm';
-import '../base-select-mobile/checkmark/Component.js';
-import '@alfalab/icons-glyph/CheckmarkMIcon';
 import '../checkmark/Component.js';
 import '@alfalab/core-components-badge/esm';
 import '@alfalab/core-components-checkbox/esm';
 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 '@alfalab/core-components-scrollbar/esm';
 import '@alfalab/core-components-skeleton/esm';
-import '../../intersection-observer-55833352.js';
+import '../../intersection-observer-961b54c8.js';
+import '../../presets/useSelectWithApply/options-list-with-apply/footer/Component.js';
 import '@alfalab/core-components-button/esm';
-import '../base-select-mobile/options-list/Component.js';
+import '@alfalab/core-components-bottom-sheet/esm';
+import '@alfalab/core-components-modal/esm/mobile';
 import '@alfalab/core-components-base-modal/esm';
-import '../base-select-mobile/virtual-options-list/Component.js';
+import 'react-virtual';

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

@@ -1 +1 @@
-export * from "../../Component-1830cf5e";
+export * from "../../Component-b5248298";

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

@@ -1,38 +1,39 @@
-export { a as SelectModalMobile } from '../../Component-1830cf5e.js';
+export { a as SelectModalMobile } from '../../Component-b5248298.js';
 import 'tslib';
 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 '@alfalab/core-components-bottom-sheet/esm';
-import '@alfalab/core-components-modal/esm/mobile';
-import '../../Component.js';
-import '../../Component-578c3e05.js';
 import '@juggle/resize-observer';
+import 'downshift';
 import '@alfalab/core-components-popover/esm';
 import '@alfalab/hooks';
+import '../../getDataTestId-015e89f1.js';
 import '../../utils.js';
 import '../native-select/Component.js';
 import '../field/Component.js';
 import '@alfalab/core-components-form-control/esm';
 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 '@alfalab/core-components-badge/esm';
 import '@alfalab/core-components-checkbox/esm';
 import '@alfalab/icons-glyph/CheckmarkCircleMIcon';
+import '@alfalab/icons-glyph/CheckmarkMIcon';
+import '../checkmark-mobile/Component.js';
 import '../options-list/Component.js';
 import '@alfalab/core-components-scrollbar/esm';
+import '../base-select-mobile/Component.js';
+import '@alfalab/core-components-bottom-sheet/esm';
+import '@alfalab/core-components-modal/esm/mobile';
+import '../base-select-mobile/footer/Component.js';
+import '@alfalab/core-components-base-modal/esm';
+import '@alfalab/core-components-button/esm';
+import '../virtual-options-list/Component.js';
 import 'react-virtual';
-import '../base-option/Component.js';
-import '../base-checkmark/Component.js';
 import '@alfalab/core-components-skeleton/esm';
-import '../../intersection-observer-55833352.js';
-import '@alfalab/core-components-button/esm';
-import '../base-select-mobile/options-list/Component.js';
-import '@alfalab/core-components-base-modal/esm';
-import '../base-select-mobile/virtual-options-list/Component.js';
+import '../../intersection-observer-961b54c8.js';
+import '../../presets/useSelectWithApply/options-list-with-apply/footer/Component.js';

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

@@ -1,5 +1,6 @@
 import { __assign } from 'tslib';
-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 '@alfalab/core-components-scrollbar/esm';
@@ -7,31 +8,31 @@ import { useMedia } from '@alfalab/hooks';
 import { usePrevious, lastIndexOf, useVisibleOptions, isGroup } from '../../utils.js';
 import { Optgroup } from '../optgroup/Component.js';
 
-var styles = {"virtualOptionsList":"select__virtualOptionsList_te37x","virtualOptionsListHeader":"select__virtualOptionsListHeader_te37x","virtualOptionsListFooter":"select__virtualOptionsListFooter_te37x","withBorder":"select__withBorder_te37x","scrollable":"select__scrollable_te37x","inner":"select__inner_te37x","virtualRow":"select__virtualRow_te37x","highlighted":"select__highlighted_te37x","emptyPlaceholder":"select__emptyPlaceholder_te37x","l":"select__l_te37x","xl":"select__xl_te37x"};
+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 = 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$1 = _h === void 0 ? 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$1 = _g === void 0 ? 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 = useRef(null);
     var parentRef = useRef(null);
     var scrollbarRef = useRef(null);
-    var _k = useState(0), visibleOptionsInvalidateKey = _k[0], setVisibleOptionsInvalidateKey = _k[1];
+    var _j = useState(0), visibleOptionsInvalidateKey = _j[0], setVisibleOptionsInvalidateKey = _j[1];
     var prevHighlightedIndex = usePrevious(highlightedIndex) || -1;
+    var nativeScrollbar = useMedia([[true, '(max-width: 1023px)']], false)[0];
     var rowVirtualizer = useVirtual({
         size: flatOptions.length,
-        parentRef: parentRef,
-        overscan: overscan,
+        parentRef: (ref || parentRef),
+        overscan: 15,
     });
-    var nativeScrollbar = 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);
     // Сколл к выбранному пункту при открытии меню
     useEffect(function () {
         if (open) {
             rowVirtualizer.scrollToIndex(highlightedIndex, { align: 'end' });
         }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [open]);
     // Скролл к пункту, которого нет на экране
     useEffect(function () {
@@ -40,6 +41,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]);
     // Циклическая навигация
     useEffect(function () {
@@ -53,6 +55,7 @@ var VirtualOptionsList = function (_a) {
         if (prevHighlightedIndex >= lastNonDisabled && highlightedIndex === 0) {
             rowVirtualizer.scrollToIndex(0);
         }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [prevHighlightedIndex, highlightedIndex]);
     useEffect(function () {
         setVisibleOptionsInvalidateKey(
@@ -84,11 +87,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;
@@ -100,12 +98,25 @@ var VirtualOptionsList = function (_a) {
                     transform: "translateY(".concat(virtualRow.start, "px)"),
                 } },
                 group && React.createElement(Optgroup$1, { label: group.label }),
-                !isGroup(option) && React.createElement(Option, __assign({}, getOptionProps(option, virtualRow.index)))));
+                !isGroup(option) && (React.createElement(Option, __assign({}, getOptionProps(option, virtualRow.index))))));
         });
     };
-    var renderWithCustomScrollbar = function () { return (React.createElement(Scrollbar, { className: styles.scrollable, ref: scrollbarRef, scrollableNodeProps: { onScroll: onScroll, ref: parentRef }, contentNodeProps: contentNodeProps }, renderList())); };
-    var renderWithNativeScrollbar = function () { return (React.createElement("div", { className: styles.scrollable, ref: parentRef, onScroll: onScroll },
-        React.createElement("div", __assign({}, contentNodeProps), renderList()))); };
+    var contentNodeProps = {
+        className: styles.inner,
+        style: { height: "".concat(rowVirtualizer.totalSize, "px") },
+        ref: listRef,
+    };
+    var renderWithCustomScrollbar = function () { return (React.createElement(Scrollbar, { className: styles.scrollable, ref: scrollbarRef, horizontalAutoStretch: optionsListWidth === 'content', scrollableNodeProps: { onScroll: onScroll, ref: parentRef }, contentNodeProps: contentNodeProps }, renderList())); };
+    var renderWithNativeScrollbar = function () {
+        if (visibleOptions) {
+            return (React.createElement("div", { className: styles.scrollable, ref: mergeRefs([parentRef, ref]), onScroll: onScroll },
+                React.createElement("div", __assign({}, contentNodeProps), renderList())));
+        }
+        return React.createElement("div", __assign({}, 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(),
@@ -113,6 +124,6 @@ var VirtualOptionsList = function (_a) {
         footer && (React.createElement("div", { className: cn(styles.virtualOptionsListFooter, (_b = {},
                 _b[styles.withBorder] = visibleOptions && flatOptions.length > visibleOptions,
                 _b)) }, footer))));
-};
+});
 
 export { VirtualOptionsList };

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

@@ -1,4 +1,4 @@
-/* hash: 14vfr */
+/* hash: y762s */
 :root {
 } /* deprecated */ :root {
     --color-light-border-primary: #dcdcdd;
@@ -35,31 +35,34 @@
     /* checkmark */
 
     /* optgroup */
-} .select__virtualOptionsList_te37x {
+} .select__virtualOptionsList_8klep {
     width: 100%;
     outline: none;
     box-sizing: border-box;
-    position: relative;
-} .select__virtualOptionsListHeader_te37x {
+    position: sticky;
+} .select__virtualOptionsListHeader_8klep {
     box-sizing: border-box;
     border-bottom: 1px solid var(--color-light-border-secondary);
-} .select__virtualOptionsListFooter_te37x {
+} .select__virtualOptionsListFooter_8klep {
+    position: sticky;
+    bottom: 0;
     box-sizing: border-box;
     border-top: 1px solid transparent
-} .select__virtualOptionsListFooter_te37x.select__withBorder_te37x {
+} .select__virtualOptionsListFooter_8klep.select__withBorder_8klep {
         border-top: 1px solid var(--color-light-border-secondary);
-    } .select__scrollable_te37x {
+    } .select__scrollable_8klep {
+    position: relative;
     overflow: auto;
     width: 100%;
-} .select__inner_te37x {
+} .select__inner_8klep {
     position: relative;
     width: 100%;
-} .select__virtualRow_te37x {
+} .select__virtualRow_8klep {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%
-} .select__virtualRow_te37x: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_te37x:first-child:before {
+    } .select__virtualRow_8klep:first-child:before {
         display: none;
-    } .select__highlighted_te37x:before,
-    .select__highlighted_te37x + .select__virtualRow_te37x:before {
+    } .select__highlighted_8klep:before,
+    .select__highlighted_8klep + .select__virtualRow_8klep:before {
         display: none;
-    } .select__emptyPlaceholder_te37x {
+    } .select__emptyPlaceholder_8klep {
     padding: var(--gap-m) var(--gap-s);
     color: var(--select-options-list-empty-placeholder-color);
-} .select__l_te37x .select__emptyPlaceholder_te37x,
-.select__xl_te37x .select__emptyPlaceholder_te37x {
+} .select__l_8klep .select__emptyPlaceholder_8klep,
+.select__xl_8klep .select__emptyPlaceholder_8klep {
     padding: var(--gap-xl) var(--gap-m);
 }

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

@@ -1,6 +1,7 @@
 export { VirtualOptionsList } from './Component.js';
 import 'tslib';
 import 'react';
+import 'react-merge-refs';
 import 'react-virtual';
 import 'classnames';
 import '@alfalab/core-components-scrollbar/esm';

package/esm/getDataTestId-015e89f1.d.ts

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

package/esm/getDataTestId-015e89f1.js

@@ -0,0 +1,6 @@
+var getDataTestId = function (dataTestId, element) {
+    var elementPart = element ? "-".concat(element.toLowerCase()) : '';
+    return dataTestId ? "".concat(dataTestId).concat(elementPart) : undefined;
+};
+
+export { getDataTestId as g };

package/{hook-edac5428.d.ts → esm/hook-4b555174.d.ts}

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { BaseSelectProps, OptionShape } from "./index";
-type useSelectWithApplyProps = {
+type UseSelectWithApplyProps = {
     /**
      * Список выбранных пунктов
      */
@@ -17,6 +17,10 @@ type useSelectWithApplyProps = {
      * Компонент выпадающего меню
      */
     OptionsList?: BaseSelectProps['OptionsList'];
+    /**
+     * Пропсы, которые будут прокинуты в компонент списка
+     */
+    optionsListProps?: BaseSelectProps['optionsListProps'];
     /**
      * Показывать кнопку очистки
      */
@@ -27,15 +31,16 @@ type useSelectWithApplyProps = {
     showSelectAll?: boolean;
 };
 declare const SELECT_ALL_KEY = "select_all";
-declare function useSelectWithApply({ options, selected, onChange, OptionsList, showClear, showSelectAll, }: useSelectWithApplyProps): {
+declare function useSelectWithApply({ options, selected, onChange, OptionsList, optionsListProps, showClear, showSelectAll, }: UseSelectWithApplyProps): {
     OptionsList: import("react").ForwardRefExoticComponent<import("./index").OptionsListProps & {
         showClear?: boolean | undefined;
         onClose?: (() => void) | undefined;
         selectedDraft?: OptionShape[] | undefined;
-        OptionsList?: import("react").FC<import("./index").OptionsListProps & import("react").RefAttributes<unknown>> | undefined;
-    } & import("react").RefAttributes<unknown>>;
+        OptionsList?: import("react").FC<import("./index").OptionsListProps & import("react").RefAttributes<HTMLDivElement>> | undefined;
+        Footer?: import("react").FC<import("./presets/useSelectWithApply/options-list-with-apply/footer/Component").FooterProps> | undefined;
+    } & import("react").RefAttributes<HTMLDivElement>>;
     optionsListProps: {
-        OptionsList: import("react").FC<import("./index").OptionsListProps> | undefined;
+        OptionsList: import("react").FC<import("./index").OptionsListProps & import("react").RefAttributes<HTMLDivElement>> | undefined;
         showClear: boolean;
         onClear: () => void;
         onApply: () => void;
@@ -51,4 +56,4 @@ declare function useSelectWithApply({ options, selected, onChange, OptionsList,
     onChange: (payload: import("./index").BaseSelectChangePayload) => void;
     selected: string | OptionShape | (string | OptionShape)[] | null | undefined;
 };
-export { SELECT_ALL_KEY, useSelectWithApply };
+export { UseSelectWithApplyProps, SELECT_ALL_KEY, useSelectWithApply };

package/esm/index-3885b0d7.d.ts

@@ -1,3 +1,3 @@
 declare const isClient: () => boolean;
 export { isClient };
-export * from "./Component-578c3e05";
+export * from "./getDataTestId-015e89f1";

package/esm/index.js

@@ -1,7 +1,7 @@
 export { Select } from './Component.js';
 export { Arrow } from './components/arrow/Component.js';
-export { B as BaseSelect } from './Component-578c3e05.js';
-export { b as SELECT_ALL_KEY, S as SelectMobile, a as SelectModalMobile, u as useSelectWithApply } from './Component-1830cf5e.js';
+export { BaseSelect } from './components/base-select/Component.js';
+export { b as SELECT_ALL_KEY, S as SelectMobile, a as SelectModalMobile, u as useSelectWithApply } from './Component-b5248298.js';
 export { Field } from './components/field/Component.js';
 export { Optgroup } from './components/optgroup/Component.js';
 export { Option } from './components/option/Component.js';
@@ -20,22 +20,24 @@ import '@juggle/resize-observer';
 import 'downshift';
 import '@alfalab/core-components-popover/esm';
 import '@alfalab/hooks';
+import './getDataTestId-015e89f1.js';
 import './components/native-select/Component.js';
+import './components/base-select-mobile/Component.js';
 import '@alfalab/core-components-bottom-sheet/esm';
 import '@alfalab/core-components-modal/esm/mobile';
-import 'react-virtual';
-import '@alfalab/core-components-scrollbar/esm';
-import '@alfalab/core-components-skeleton/esm';
-import './intersection-observer-55833352.js';
+import './components/base-select-mobile/footer/Component.js';
+import '@alfalab/core-components-base-modal/esm';
 import '@alfalab/core-components-button/esm';
 import '@alfalab/core-components-form-control/esm';
-import '@alfalab/icons-glyph/CheckmarkMIcon';
 import '@alfalab/core-components-badge/esm';
 import '@alfalab/core-components-checkbox/esm';
 import '@alfalab/icons-glyph/CheckmarkCircleMIcon';
-import './components/base-checkmark/Component.js';
-import './components/base-select-mobile/checkmark/Component.js';
-import './components/base-select-mobile/options-list/Component.js';
-import '@alfalab/core-components-base-modal/esm';
-import './components/base-select-mobile/virtual-options-list/Component.js';
+import '@alfalab/icons-glyph/CheckmarkMIcon';
+import '@alfalab/core-components-skeleton/esm';
+import './intersection-observer-961b54c8.js';
+import './presets/useSelectWithApply/options-list-with-apply/footer/Component.js';
 import './components/checkmark/Component.js';
+import './components/checkmark-mobile/Component.js';
+import '@alfalab/core-components-scrollbar/esm';
+import 'react-virtual';
+import './components/base-checkmark/Component.js';

package/esm/presets/index.d.ts

@@ -1,3 +1,3 @@
 export * from "./useSelectWithLoading/hook";
 export * from "./useLazyLoading/hook";
-export * from "../hook-edac5428";
+export * from "../hook-4b555174";

package/esm/presets/index.js

@@ -1,29 +1,28 @@
 export { useSelectWithLoading } from './useSelectWithLoading/hook.js';
 export { useLazyLoading } from './useLazyLoading/hook.js';
-export { b as SELECT_ALL_KEY, u as useSelectWithApply } from '../Component-1830cf5e.js';
+export { b as SELECT_ALL_KEY, u as useSelectWithApply } from '../Component-b5248298.js';
 import 'tslib';
 import 'react';
 import '@alfalab/core-components-skeleton/esm';
 import '../components/option/Component.js';
 import 'classnames';
-import '../components/base-select-mobile/checkmark/Component.js';
-import '@alfalab/icons-glyph/CheckmarkMIcon';
 import '../components/checkmark/Component.js';
 import '@alfalab/core-components-badge/esm';
 import '@alfalab/core-components-checkbox/esm';
 import '@alfalab/icons-glyph/CheckmarkCircleMIcon';
-import '../intersection-observer-55833352.js';
+import '@alfalab/icons-glyph/CheckmarkMIcon';
+import '../components/checkmark-mobile/Component.js';
+import '../intersection-observer-961b54c8.js';
+import '../Component.js';
 import '../components/arrow/Component.js';
 import '@alfalab/icons-glyph/ChevronDownMIcon';
+import '../components/base-select/Component.js';
 import 'react-merge-refs';
-import 'downshift';
-import '@alfalab/core-components-bottom-sheet/esm';
-import '@alfalab/core-components-modal/esm/mobile';
-import '../Component.js';
-import '../Component-578c3e05.js';
 import '@juggle/resize-observer';
+import 'downshift';
 import '@alfalab/core-components-popover/esm';
 import '@alfalab/hooks';
+import '../getDataTestId-015e89f1.js';
 import '../utils.js';
 import '../components/native-select/Component.js';
 import '../components/field/Component.js';
@@ -31,10 +30,12 @@ import '@alfalab/core-components-form-control/esm';
 import '../components/optgroup/Component.js';
 import '../components/options-list/Component.js';
 import '@alfalab/core-components-scrollbar/esm';
-import 'react-virtual';
-import '../components/base-option/Component.js';
-import '../components/base-checkmark/Component.js';
-import '@alfalab/core-components-button/esm';
-import '../components/base-select-mobile/options-list/Component.js';
+import '../components/base-select-mobile/Component.js';
+import '@alfalab/core-components-bottom-sheet/esm';
+import '@alfalab/core-components-modal/esm/mobile';
+import '../components/base-select-mobile/footer/Component.js';
 import '@alfalab/core-components-base-modal/esm';
-import '../components/base-select-mobile/virtual-options-list/Component.js';
+import '@alfalab/core-components-button/esm';
+import '../components/virtual-options-list/Component.js';
+import 'react-virtual';
+import './useSelectWithApply/options-list-with-apply/footer/Component.js';