@snack-uikit/list 0.22.3 → 0.23.0

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# 0.23.0 (2025-01-22)
+
+
+### Features
+
+* **CORESERV-5847:** add optional virtualization to list ([6a05691](https://github.com/cloud-ru-tech/snack-uikit/commit/6a056917c7cd8b56fa432bf4edc804c13feb0a0a))
+
+
+
+
+
 ## 0.22.3 (2025-01-20)
 
 ### Only dependencies have been changed

package/README.md

@@ -60,6 +60,7 @@
 | triggerElemRef | `RefObject<HTMLElement>` | - | Ссылка на элемент-триггер для дроплиста |
 | listRef | `RefObject<HTMLElement>` | - | Ссылка на элемент выпадающего списка |
 | closeDroplistOnItemClick | `boolean` | - | Закрывать выпадающий список после клика на базовый айтем.  Работает в режимах selection: 'none' \| 'single' |
+| virtualized | `boolean` | - | Включить виртуализацию на компоненты списка. Рекомендуется если у вас от 1к элементов списка |
 | triggerClassName | `string` | - | CSS-класс триггера |
 | open | `boolean` | - | Управляет состоянием показан/не показан. |
 | onOpenChange | `(isOpen: boolean) => void` | - | Колбек отображения компонента. Срабатывает при изменении состояния open. |

package/dist/cjs/components/Lists/Droplist/DropList.d.ts

@@ -1,2 +1,2 @@
 import { DroplistProps } from '../types';
-export declare function Droplist({ items: itemsProp, search, pinBottom: pinBottomProp, pinTop: pinTopProp, footerActiveElementsRefs, children, trigger, placement, widthStrategy, triggerElemRef: triggerElemRefProp, open: openProp, onOpenChange, collapse, triggerClassName, selection, contentRender, size, marker, closeDroplistOnItemClick, className, listRef: listRefProp, untouchableScrollbars, ...props }: DroplistProps): import("react/jsx-runtime").JSX.Element;
+export declare function Droplist({ items: itemsProp, search, pinBottom: pinBottomProp, pinTop: pinTopProp, footerActiveElementsRefs, children, trigger, placement, widthStrategy, triggerElemRef: triggerElemRefProp, open: openProp, onOpenChange, collapse, triggerClassName, selection, contentRender, size, marker, closeDroplistOnItemClick, className, listRef: listRefProp, untouchableScrollbars, virtualized, ...props }: DroplistProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/components/Lists/Droplist/DropList.js

@@ -53,9 +53,10 @@ function Droplist(_a) {
       closeDroplistOnItemClick = false,
       className,
       listRef: listRefProp,
-      untouchableScrollbars = false
+      untouchableScrollbars = false,
+      virtualized = false
     } = _a,
-    props = __rest(_a, ["items", "search", "pinBottom", "pinTop", "footerActiveElementsRefs", "children", "trigger", "placement", "widthStrategy", "triggerElemRef", "open", "onOpenChange", "collapse", "triggerClassName", "selection", "contentRender", "size", "marker", "closeDroplistOnItemClick", "className", "listRef", "untouchableScrollbars"]);
+    props = __rest(_a, ["items", "search", "pinBottom", "pinTop", "footerActiveElementsRefs", "children", "trigger", "placement", "widthStrategy", "triggerElemRef", "open", "onOpenChange", "collapse", "triggerClassName", "selection", "contentRender", "size", "marker", "closeDroplistOnItemClick", "className", "listRef", "untouchableScrollbars", "virtualized"]);
   const hasSearch = (0, react_1.useMemo)(() => Boolean(search), [search]);
   const [openCollapseItems = [], setOpenCollapsedItems] = (0, utils_1.useValueControl)(collapse);
   const toggleOpenCollapseItem = (0, react_1.useCallback)(id => setOpenCollapsedItems(items => (items === null || items === void 0 ? void 0 : items.includes(id)) ? items.filter(item => item !== id) : (items !== null && items !== void 0 ? items : []).concat([id])), [setOpenCollapsedItems]);
@@ -237,6 +238,7 @@ function Droplist(_a) {
                   items: memorizedItems.items.focusCloseChildIds,
                   pinTop: memorizedItems.pinTop.focusCloseChildIds,
                   pinBottom: memorizedItems.pinBottom.focusCloseChildIds,
+                  virtualized: virtualized,
                   onKeyDown: handleListKeyDown,
                   searchItem: searchItem,
                   tabIndex: 0,

package/dist/cjs/components/Lists/ListPrivate/ListPrivate.d.ts

@@ -2,6 +2,7 @@ export declare const ListPrivate: import("react").ForwardRefExoticComponent<Omit
     nested?: boolean;
     active?: boolean;
     tabIndex?: number;
+    virtualized?: boolean;
     onFocus?(e: import("react").FocusEvent<HTMLElement>): void;
     onBlur?(e: import("react").FocusEvent<HTMLElement>): void;
     onKeyDown?(e: import("react").KeyboardEvent<HTMLElement>): void;

package/dist/cjs/components/Lists/ListPrivate/ListPrivate.js

@@ -18,6 +18,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.ListPrivate = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const react_virtual_1 = require("@tanstack/react-virtual");
 const classnames_1 = __importDefault(require("classnames"));
 const react_1 = require("react");
 const loaders_1 = require("@snack-uikit/loaders");
@@ -27,6 +28,7 @@ const helperComponents_1 = require("../../../helperComponents");
 const Items_1 = require("../../Items");
 const contexts_1 = require("../contexts");
 const styles_module_scss_1 = __importDefault(require('../styles.module.css'));
+const constants_1 = require("./constants");
 const styles_module_scss_2 = __importDefault(require('./styles.module.css'));
 exports.ListPrivate = (0, react_1.forwardRef)((_a, ref) => {
   var {
@@ -56,9 +58,10 @@ exports.ListPrivate = (0, react_1.forwardRef)((_a, ref) => {
       dataError,
       dataFiltered,
       scrollToSelectedItem = false,
+      virtualized = false,
       scrollContainerClassName
     } = _a,
-    props = __rest(_a, ["items", "pinTop", "pinBottom", "onKeyDown", "onBlur", "onFocus", "tabIndex", "active", "scroll", "nested", "search", "searchItem", "scrollRef", "scrollContainerRef", "onScroll", "footer", "loading", "limitedScrollHeight", "untouchableScrollbars", "className", "noDataState", "noResultsState", "errorDataState", "dataError", "dataFiltered", "scrollToSelectedItem", "scrollContainerClassName"]);
+    props = __rest(_a, ["items", "pinTop", "pinBottom", "onKeyDown", "onBlur", "onFocus", "tabIndex", "active", "scroll", "nested", "search", "searchItem", "scrollRef", "scrollContainerRef", "onScroll", "footer", "loading", "limitedScrollHeight", "untouchableScrollbars", "className", "noDataState", "noResultsState", "errorDataState", "dataError", "dataFiltered", "scrollToSelectedItem", "virtualized", "scrollContainerClassName"]);
   const {
     size = 's',
     flattenItems,
@@ -68,6 +71,7 @@ exports.ListPrivate = (0, react_1.forwardRef)((_a, ref) => {
     value,
     isSelectionSingle
   } = (0, contexts_1.useSelectionContext)();
+  const innerScrollRef = (0, react_1.useRef)(null);
   const itemsJSX = (0, Items_1.useRenderItems)(items);
   const itemsPinTopJSX = (0, Items_1.useRenderItems)(pinTop);
   const itemsPinBottomJSX = (0, Items_1.useRenderItems)(pinBottom);
@@ -77,6 +81,16 @@ exports.ListPrivate = (0, react_1.forwardRef)((_a, ref) => {
     errorDataState
   });
   const hasNoItems = items.length === 0;
+  const virtualizer = (0, react_virtual_1.useVirtualizer)({
+    count: itemsJSX.length,
+    getScrollElement: () => scroll ? innerScrollRef.current : null,
+    estimateSize: () => constants_1.ALL_SIZES[size],
+    enabled: virtualized
+  });
+  const virtualItems = virtualizer.getVirtualItems();
+  (0, react_1.useEffect)(() => {
+    virtualizer.measure();
+  }, [virtualizer]);
   const loadingJSX = (0, react_1.useMemo)(() => loading && (0, jsx_runtime_1.jsx)("div", {
     role: 'spinbutton',
     tabIndex: -1,
@@ -88,16 +102,38 @@ exports.ListPrivate = (0, react_1.forwardRef)((_a, ref) => {
       size: size === 'l' ? 's' : 'xs'
     })
   }), [hasNoItems, loading, size]);
-  const content = (0, react_1.useMemo)(() => (0, jsx_runtime_1.jsxs)("div", {
-    className: styles_module_scss_2.default.content,
-    children: [itemsJSX, loadingJSX, (0, jsx_runtime_1.jsx)(helperComponents_1.ListEmptyState, {
-      loading: loading,
-      dataError: dataError,
-      emptyStates: emptyStates,
-      hasNoItems: hasNoItems,
-      dataFiltered: dataFiltered !== null && dataFiltered !== void 0 ? dataFiltered : Boolean(search === null || search === void 0 ? void 0 : search.value)
-    })]
-  }), [dataError, dataFiltered, emptyStates, hasNoItems, itemsJSX, loading, loadingJSX, search === null || search === void 0 ? void 0 : search.value]);
+  const content = (0, react_1.useMemo)(() => {
+    var _a, _b;
+    return (0, jsx_runtime_1.jsxs)("div", {
+      className: styles_module_scss_2.default.content,
+      children: [virtualized ? (0, jsx_runtime_1.jsx)("div", {
+        className: styles_module_scss_2.default.virtualizedContainer,
+        style: {
+          height: virtualizer.getTotalSize()
+        },
+        tabIndex: -1,
+        children: (0, jsx_runtime_1.jsx)("div", {
+          className: styles_module_scss_2.default.virtualizedPositionBox,
+          style: {
+            transform: `translateY(${(_b = (_a = virtualItems[0]) === null || _a === void 0 ? void 0 : _a.start) !== null && _b !== void 0 ? _b : 0}px)`
+          },
+          tabIndex: -1,
+          children: virtualItems.map(virtualRow => (0, jsx_runtime_1.jsx)("div", {
+            "data-index": virtualRow.index,
+            ref: virtualizer.measureElement,
+            tabIndex: -1,
+            children: itemsJSX[virtualRow.index]
+          }, virtualRow.key))
+        })
+      }) : itemsJSX, loadingJSX, (0, jsx_runtime_1.jsx)(helperComponents_1.ListEmptyState, {
+        loading: loading,
+        dataError: dataError,
+        emptyStates: emptyStates,
+        hasNoItems: hasNoItems,
+        dataFiltered: dataFiltered !== null && dataFiltered !== void 0 ? dataFiltered : Boolean(search === null || search === void 0 ? void 0 : search.value)
+      })]
+    });
+  }, [dataError, dataFiltered, emptyStates, hasNoItems, itemsJSX, loading, loadingJSX, search === null || search === void 0 ? void 0 : search.value, virtualItems, virtualized, virtualizer]);
   const onScrollInitialized = () => {
     var _a, _b;
     if (scrollToSelectedItem) {
@@ -136,7 +172,10 @@ exports.ListPrivate = (0, react_1.forwardRef)((_a, ref) => {
       }, scrollContainerClassName),
       barHideStrategy: 'never',
       size: size === 's' ? 's' : 'm',
-      ref: scrollContainerRef,
+      ref: ref => {
+        innerScrollRef.current = ref;
+        if (scrollContainerRef) scrollContainerRef.current = ref;
+      },
       untouchableScrollbars: untouchableScrollbars,
       onScroll: onScroll,
       onInitialized: onScrollInitialized,

package/dist/cjs/components/Lists/ListPrivate/constants.d.ts

@@ -0,0 +1,4 @@
+export declare const LARGE_SIZE_HEIGHT = 48;
+export declare const MEDIUM_SIZE_HEIGHT = 40;
+export declare const SMALL_SIZE_HEIGHT = 32;
+export declare const ALL_SIZES: Record<'s' | 'm' | 'l', number>;

package/dist/cjs/components/Lists/ListPrivate/constants.js

@@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ALL_SIZES = exports.SMALL_SIZE_HEIGHT = exports.MEDIUM_SIZE_HEIGHT = exports.LARGE_SIZE_HEIGHT = void 0;
+exports.LARGE_SIZE_HEIGHT = 48;
+exports.MEDIUM_SIZE_HEIGHT = 40;
+exports.SMALL_SIZE_HEIGHT = 32;
+exports.ALL_SIZES = {
+  m: exports.MEDIUM_SIZE_HEIGHT,
+  s: exports.SMALL_SIZE_HEIGHT,
+  l: exports.LARGE_SIZE_HEIGHT
+};

package/dist/cjs/components/Lists/ListPrivate/styles.module.css

@@ -48,4 +48,16 @@
 .content{
   overflow:hidden;
   flex-grow:1;
+}
+
+.virtualizedContainer{
+  position:relative;
+  width:100%;
+}
+
+.virtualizedPositionBox{
+  position:absolute;
+  top:0;
+  left:0;
+  width:100%;
 }

package/dist/cjs/components/Lists/types.d.ts

@@ -65,6 +65,10 @@ export type DroplistProps = {
      * @default false
      */
     closeDroplistOnItemClick?: boolean;
+    /**
+     * Включить виртуализацию на компоненты списка. Рекомендуется если у вас от 1к элементов списка
+     */
+    virtualized?: boolean;
     /** Триггер для дроплиста
      * @type ReactNode | ({onKeyDown}) => ReactNode
      *
@@ -78,6 +82,7 @@ export type ListPrivateProps = Omit<ListProps, 'pinTop' | 'pinBottom' | 'items'
     nested?: boolean;
     active?: boolean;
     tabIndex?: number;
+    virtualized?: boolean;
     onFocus?(e: FocusEvent<HTMLElement>): void;
     onBlur?(e: FocusEvent<HTMLElement>): void;
     onKeyDown?(e: KeyboardEvent<HTMLElement>): void;

package/dist/esm/components/Lists/Droplist/DropList.d.ts

@@ -1,2 +1,2 @@
 import { DroplistProps } from '../types';
-export declare function Droplist({ items: itemsProp, search, pinBottom: pinBottomProp, pinTop: pinTopProp, footerActiveElementsRefs, children, trigger, placement, widthStrategy, triggerElemRef: triggerElemRefProp, open: openProp, onOpenChange, collapse, triggerClassName, selection, contentRender, size, marker, closeDroplistOnItemClick, className, listRef: listRefProp, untouchableScrollbars, ...props }: DroplistProps): import("react/jsx-runtime").JSX.Element;
+export declare function Droplist({ items: itemsProp, search, pinBottom: pinBottomProp, pinTop: pinTopProp, footerActiveElementsRefs, children, trigger, placement, widthStrategy, triggerElemRef: triggerElemRefProp, open: openProp, onOpenChange, collapse, triggerClassName, selection, contentRender, size, marker, closeDroplistOnItemClick, className, listRef: listRefProp, untouchableScrollbars, virtualized, ...props }: DroplistProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/Lists/Droplist/DropList.js

@@ -23,7 +23,7 @@ import { ListPrivate } from '../ListPrivate';
 import styles from '../styles.module.css';
 const DEFAULT_FALLBACK_PLACEMENTS = ['top', 'right', 'bottom', 'left'];
 export function Droplist(_a) {
-    var { items: itemsProp, search, pinBottom: pinBottomProp = [], pinTop: pinTopProp = [], footerActiveElementsRefs, children, trigger, placement, widthStrategy, triggerElemRef: triggerElemRefProp, open: openProp, onOpenChange, collapse = {}, triggerClassName, selection, contentRender, size = 's', marker = true, closeDroplistOnItemClick = false, className, listRef: listRefProp, untouchableScrollbars = false } = _a, props = __rest(_a, ["items", "search", "pinBottom", "pinTop", "footerActiveElementsRefs", "children", "trigger", "placement", "widthStrategy", "triggerElemRef", "open", "onOpenChange", "collapse", "triggerClassName", "selection", "contentRender", "size", "marker", "closeDroplistOnItemClick", "className", "listRef", "untouchableScrollbars"]);
+    var { items: itemsProp, search, pinBottom: pinBottomProp = [], pinTop: pinTopProp = [], footerActiveElementsRefs, children, trigger, placement, widthStrategy, triggerElemRef: triggerElemRefProp, open: openProp, onOpenChange, collapse = {}, triggerClassName, selection, contentRender, size = 's', marker = true, closeDroplistOnItemClick = false, className, listRef: listRefProp, untouchableScrollbars = false, virtualized = false } = _a, props = __rest(_a, ["items", "search", "pinBottom", "pinTop", "footerActiveElementsRefs", "children", "trigger", "placement", "widthStrategy", "triggerElemRef", "open", "onOpenChange", "collapse", "triggerClassName", "selection", "contentRender", "size", "marker", "closeDroplistOnItemClick", "className", "listRef", "untouchableScrollbars", "virtualized"]);
     const hasSearch = useMemo(() => Boolean(search), [search]);
     const [openCollapseItems = [], setOpenCollapsedItems] = useValueControl(collapse);
     const toggleOpenCollapseItem = useCallback((id) => setOpenCollapsedItems((items) => (items === null || items === void 0 ? void 0 : items.includes(id)) ? items.filter(item => item !== id) : (items !== null && items !== void 0 ? items : []).concat([id])), [setOpenCollapsedItems]);
@@ -143,7 +143,7 @@ export function Droplist(_a) {
                                 resetActiveItemId();
                                 (_a = (triggerElemRefProp !== null && triggerElemRefProp !== void 0 ? triggerElemRefProp : triggerElemRef).current) === null || _a === void 0 ? void 0 : _a.focus();
                             },
-                        }, children: _jsx(Dropdown, { content: _jsx("div", { className: cn(styles.wrapper, className), children: _jsx(ListPrivate, Object.assign({}, props, { items: memorizedItems.items.focusCloseChildIds, pinTop: memorizedItems.pinTop.focusCloseChildIds, pinBottom: memorizedItems.pinBottom.focusCloseChildIds, onKeyDown: handleListKeyDown, searchItem: searchItem, tabIndex: 0, ref: mergeRefs(listRef, listRefProp), search: search, onFocus: e => {
+                        }, children: _jsx(Dropdown, { content: _jsx("div", { className: cn(styles.wrapper, className), children: _jsx(ListPrivate, Object.assign({}, props, { items: memorizedItems.items.focusCloseChildIds, pinTop: memorizedItems.pinTop.focusCloseChildIds, pinBottom: memorizedItems.pinBottom.focusCloseChildIds, virtualized: virtualized, onKeyDown: handleListKeyDown, searchItem: searchItem, tabIndex: 0, ref: mergeRefs(listRef, listRefProp), search: search, onFocus: e => {
                                         e.stopPropagation();
                                         forceUpdateActiveItemId === null || forceUpdateActiveItemId === void 0 ? void 0 : forceUpdateActiveItemId(ids[0]);
                                     }, limitedScrollHeight: true, untouchableScrollbars: untouchableScrollbars })) }), outsideClick: true, triggerClassName: triggerClassName, fallbackPlacements: DEFAULT_FALLBACK_PLACEMENTS, trigger: trigger, placement: placement, widthStrategy: widthStrategy, triggerRef: !triggerElemRefProp ? triggerElemRef : (isValid && triggerElemRefProp) || undefined, open: open, onOpenChange: handleOpenChange, children: triggerElem }) }) }) }) })) }));

package/dist/esm/components/Lists/ListPrivate/ListPrivate.d.ts

@@ -2,6 +2,7 @@ export declare const ListPrivate: import("react").ForwardRefExoticComponent<Omit
     nested?: boolean;
     active?: boolean;
     tabIndex?: number;
+    virtualized?: boolean;
     onFocus?(e: import("react").FocusEvent<HTMLElement>): void;
     onBlur?(e: import("react").FocusEvent<HTMLElement>): void;
     onKeyDown?(e: import("react").KeyboardEvent<HTMLElement>): void;

package/dist/esm/components/Lists/ListPrivate/ListPrivate.js

@@ -10,8 +10,9 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useVirtualizer } from '@tanstack/react-virtual';
 import cn from 'classnames';
-import { forwardRef, useMemo } from 'react';
+import { forwardRef, useEffect, useMemo, useRef } from 'react';
 import { Spinner } from '@snack-uikit/loaders';
 import { Scroll } from '@snack-uikit/scroll';
 import { extractSupportProps } from '@snack-uikit/utils';
@@ -19,18 +20,45 @@ import { ListEmptyState, useEmptyState } from '../../../helperComponents';
 import { PinBottomGroupItem, PinTopGroupItem, SearchItem, useRenderItems } from '../../Items';
 import { useNewListContext, useSelectionContext } from '../contexts';
 import commonStyles from '../styles.module.css';
+import { ALL_SIZES } from './constants';
 import styles from './styles.module.css';
 export const ListPrivate = forwardRef((_a, ref) => {
-    var { items, pinTop, pinBottom, onKeyDown, onBlur, onFocus, tabIndex, active, scroll, nested, search, searchItem, scrollRef, scrollContainerRef, onScroll, footer, loading, limitedScrollHeight, untouchableScrollbars, className, noDataState, noResultsState, errorDataState, dataError, dataFiltered, scrollToSelectedItem = false, scrollContainerClassName } = _a, props = __rest(_a, ["items", "pinTop", "pinBottom", "onKeyDown", "onBlur", "onFocus", "tabIndex", "active", "scroll", "nested", "search", "searchItem", "scrollRef", "scrollContainerRef", "onScroll", "footer", "loading", "limitedScrollHeight", "untouchableScrollbars", "className", "noDataState", "noResultsState", "errorDataState", "dataError", "dataFiltered", "scrollToSelectedItem", "scrollContainerClassName"]);
+    var { items, pinTop, pinBottom, onKeyDown, onBlur, onFocus, tabIndex, active, scroll, nested, search, searchItem, scrollRef, scrollContainerRef, onScroll, footer, loading, limitedScrollHeight, untouchableScrollbars, className, noDataState, noResultsState, errorDataState, dataError, dataFiltered, scrollToSelectedItem = false, virtualized = false, scrollContainerClassName } = _a, props = __rest(_a, ["items", "pinTop", "pinBottom", "onKeyDown", "onBlur", "onFocus", "tabIndex", "active", "scroll", "nested", "search", "searchItem", "scrollRef", "scrollContainerRef", "onScroll", "footer", "loading", "limitedScrollHeight", "untouchableScrollbars", "className", "noDataState", "noResultsState", "errorDataState", "dataError", "dataFiltered", "scrollToSelectedItem", "virtualized", "scrollContainerClassName"]);
     const { size = 's', flattenItems, focusFlattenItems } = useNewListContext();
     const { value, isSelectionSingle } = useSelectionContext();
+    const innerScrollRef = useRef(null);
     const itemsJSX = useRenderItems(items);
     const itemsPinTopJSX = useRenderItems(pinTop);
     const itemsPinBottomJSX = useRenderItems(pinBottom);
     const emptyStates = useEmptyState({ noDataState, noResultsState, errorDataState });
     const hasNoItems = items.length === 0;
+    const virtualizer = useVirtualizer({
+        count: itemsJSX.length,
+        getScrollElement: () => (scroll ? innerScrollRef.current : null),
+        estimateSize: () => ALL_SIZES[size],
+        enabled: virtualized,
+    });
+    const virtualItems = virtualizer.getVirtualItems();
+    useEffect(() => {
+        virtualizer.measure();
+    }, [virtualizer]);
     const loadingJSX = useMemo(() => loading && (_jsx("div", { role: 'spinbutton', tabIndex: -1, className: styles.loader, "data-size": size, "data-no-items": hasNoItems || undefined, "data-test-id": 'list__loader', children: _jsx(Spinner, { size: size === 'l' ? 's' : 'xs' }) })), [hasNoItems, loading, size]);
-    const content = useMemo(() => (_jsxs("div", { className: styles.content, children: [itemsJSX, loadingJSX, _jsx(ListEmptyState, { loading: loading, dataError: dataError, emptyStates: emptyStates, hasNoItems: hasNoItems, dataFiltered: dataFiltered !== null && dataFiltered !== void 0 ? dataFiltered : Boolean(search === null || search === void 0 ? void 0 : search.value) })] })), [dataError, dataFiltered, emptyStates, hasNoItems, itemsJSX, loading, loadingJSX, search === null || search === void 0 ? void 0 : search.value]);
+    const content = useMemo(() => {
+        var _a, _b;
+        return (_jsxs("div", { className: styles.content, children: [virtualized ? (_jsx("div", { className: styles.virtualizedContainer, style: { height: virtualizer.getTotalSize() }, tabIndex: -1, children: _jsx("div", { className: styles.virtualizedPositionBox, style: { transform: `translateY(${(_b = (_a = virtualItems[0]) === null || _a === void 0 ? void 0 : _a.start) !== null && _b !== void 0 ? _b : 0}px)` }, tabIndex: -1, children: virtualItems.map(virtualRow => (_jsx("div", { "data-index": virtualRow.index, ref: virtualizer.measureElement, tabIndex: -1, children: itemsJSX[virtualRow.index] }, virtualRow.key))) }) })) : (itemsJSX), loadingJSX, _jsx(ListEmptyState, { loading: loading, dataError: dataError, emptyStates: emptyStates, hasNoItems: hasNoItems, dataFiltered: dataFiltered !== null && dataFiltered !== void 0 ? dataFiltered : Boolean(search === null || search === void 0 ? void 0 : search.value) })] }));
+    }, [
+        dataError,
+        dataFiltered,
+        emptyStates,
+        hasNoItems,
+        itemsJSX,
+        loading,
+        loadingJSX,
+        search === null || search === void 0 ? void 0 : search.value,
+        virtualItems,
+        virtualized,
+        virtualizer,
+    ]);
     const onScrollInitialized = () => {
         var _a, _b;
         if (scrollToSelectedItem) {
@@ -49,7 +77,11 @@ export const ListPrivate = forwardRef((_a, ref) => {
                     [commonStyles.scrollContainerS]: scroll && limitedScrollHeight && size === 's',
                     [commonStyles.scrollContainerM]: scroll && limitedScrollHeight && size === 'm',
                     [commonStyles.scrollContainerL]: scroll && limitedScrollHeight && size === 'l',
-                }, scrollContainerClassName), barHideStrategy: 'never', size: size === 's' ? 's' : 'm', ref: scrollContainerRef, untouchableScrollbars: untouchableScrollbars, onScroll: onScroll, onInitialized: onScrollInitialized, children: [content, _jsx("div", { className: styles.scrollStub, ref: scrollRef })] })) : (_jsx(_Fragment, { children: content })), Number(pinBottom === null || pinBottom === void 0 ? void 0 : pinBottom.length) > 0 && _jsx(PinBottomGroupItem, { children: itemsPinBottomJSX }), footer && (_jsx("div", { className: styles.footer, onFocus: e => e.stopPropagation(), children: footer }))] })));
+                }, scrollContainerClassName), barHideStrategy: 'never', size: size === 's' ? 's' : 'm', ref: ref => {
+                    innerScrollRef.current = ref;
+                    if (scrollContainerRef)
+                        scrollContainerRef.current = ref;
+                }, untouchableScrollbars: untouchableScrollbars, onScroll: onScroll, onInitialized: onScrollInitialized, children: [content, _jsx("div", { className: styles.scrollStub, ref: scrollRef })] })) : (_jsx(_Fragment, { children: content })), Number(pinBottom === null || pinBottom === void 0 ? void 0 : pinBottom.length) > 0 && _jsx(PinBottomGroupItem, { children: itemsPinBottomJSX }), footer && (_jsx("div", { className: styles.footer, onFocus: e => e.stopPropagation(), children: footer }))] })));
     if (!nested) {
         return listJSX;
     }

package/dist/esm/components/Lists/ListPrivate/constants.d.ts

@@ -0,0 +1,4 @@
+export declare const LARGE_SIZE_HEIGHT = 48;
+export declare const MEDIUM_SIZE_HEIGHT = 40;
+export declare const SMALL_SIZE_HEIGHT = 32;
+export declare const ALL_SIZES: Record<'s' | 'm' | 'l', number>;

package/dist/esm/components/Lists/ListPrivate/constants.js

@@ -0,0 +1,8 @@
+export const LARGE_SIZE_HEIGHT = 48;
+export const MEDIUM_SIZE_HEIGHT = 40;
+export const SMALL_SIZE_HEIGHT = 32;
+export const ALL_SIZES = {
+    m: MEDIUM_SIZE_HEIGHT,
+    s: SMALL_SIZE_HEIGHT,
+    l: LARGE_SIZE_HEIGHT,
+};

package/dist/esm/components/Lists/ListPrivate/styles.module.css

@@ -48,4 +48,16 @@
 .content{
   overflow:hidden;
   flex-grow:1;
+}
+
+.virtualizedContainer{
+  position:relative;
+  width:100%;
+}
+
+.virtualizedPositionBox{
+  position:absolute;
+  top:0;
+  left:0;
+  width:100%;
 }

package/dist/esm/components/Lists/types.d.ts

@@ -65,6 +65,10 @@ export type DroplistProps = {
      * @default false
      */
     closeDroplistOnItemClick?: boolean;
+    /**
+     * Включить виртуализацию на компоненты списка. Рекомендуется если у вас от 1к элементов списка
+     */
+    virtualized?: boolean;
     /** Триггер для дроплиста
      * @type ReactNode | ({onKeyDown}) => ReactNode
      *
@@ -78,6 +82,7 @@ export type ListPrivateProps = Omit<ListProps, 'pinTop' | 'pinBottom' | 'items'
     nested?: boolean;
     active?: boolean;
     tabIndex?: number;
+    virtualized?: boolean;
     onFocus?(e: FocusEvent<HTMLElement>): void;
     onBlur?(e: FocusEvent<HTMLElement>): void;
     onKeyDown?(e: KeyboardEvent<HTMLElement>): void;

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "List",
-  "version": "0.22.3",
+  "version": "0.23.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -47,11 +47,12 @@
     "@snack-uikit/toggles": "0.13.4",
     "@snack-uikit/truncate-string": "0.6.5",
     "@snack-uikit/utils": "3.6.0",
+    "@tanstack/react-virtual": "3.11.2",
     "classnames": "2.5.1",
     "merge-refs": "1.3.0"
   },
   "peerDependencies": {
     "@snack-uikit/locale": "*"
   },
-  "gitHead": "137a71cea0541ba2cbe468c3eb73df8bb8ea9ca0"
+  "gitHead": "546ae486452e74e78f65fd9ce0044c13b058872c"
 }

package/src/components/Lists/Droplist/DropList.tsx

@@ -44,6 +44,7 @@ export function Droplist({
   className,
   listRef: listRefProp,
   untouchableScrollbars = false,
+  virtualized = false,
   ...props
 }: DroplistProps) {
   const hasSearch = useMemo(() => Boolean(search), [search]);
@@ -240,6 +241,7 @@ export function Droplist({
                       items={memorizedItems.items.focusCloseChildIds}
                       pinTop={memorizedItems.pinTop.focusCloseChildIds}
                       pinBottom={memorizedItems.pinBottom.focusCloseChildIds}
+                      virtualized={virtualized}
                       onKeyDown={handleListKeyDown}
                       searchItem={searchItem}
                       tabIndex={0}

package/src/components/Lists/ListPrivate/ListPrivate.tsx

@@ -1,5 +1,6 @@
+import { useVirtualizer } from '@tanstack/react-virtual';
 import cn from 'classnames';
-import { ForwardedRef, forwardRef, RefObject, useMemo } from 'react';
+import { ForwardedRef, forwardRef, RefObject, useEffect, useMemo, useRef } from 'react';
 
 import { Spinner } from '@snack-uikit/loaders';
 import { Scroll } from '@snack-uikit/scroll';
@@ -10,6 +11,7 @@ import { PinBottomGroupItem, PinTopGroupItem, SearchItem, useRenderItems } from
 import { useNewListContext, useSelectionContext } from '../contexts';
 import commonStyles from '../styles.module.scss';
 import { ListPrivateProps } from '../types';
+import { ALL_SIZES } from './constants';
 import styles from './styles.module.scss';
 
 export const ListPrivate = forwardRef(
@@ -41,6 +43,7 @@ export const ListPrivate = forwardRef(
       dataError,
       dataFiltered,
       scrollToSelectedItem = false,
+      virtualized = false,
       scrollContainerClassName,
       ...props
     }: ListPrivateProps,
@@ -48,6 +51,7 @@ export const ListPrivate = forwardRef(
   ) => {
     const { size = 's', flattenItems, focusFlattenItems } = useNewListContext();
     const { value, isSelectionSingle } = useSelectionContext();
+    const innerScrollRef = useRef<HTMLElement | null>(null);
 
     const itemsJSX = useRenderItems(items);
     const itemsPinTopJSX = useRenderItems(pinTop);
@@ -56,6 +60,18 @@ export const ListPrivate = forwardRef(
     const emptyStates = useEmptyState({ noDataState, noResultsState, errorDataState });
     const hasNoItems = items.length === 0;
 
+    const virtualizer = useVirtualizer({
+      count: itemsJSX.length,
+      getScrollElement: () => (scroll ? innerScrollRef.current : null),
+      estimateSize: () => ALL_SIZES[size],
+      enabled: virtualized,
+    });
+    const virtualItems = virtualizer.getVirtualItems();
+
+    useEffect(() => {
+      virtualizer.measure();
+    }, [virtualizer]);
+
     const loadingJSX = useMemo(
       () =>
         loading && (
@@ -76,7 +92,28 @@ export const ListPrivate = forwardRef(
     const content = useMemo(
       () => (
         <div className={styles.content}>
-          {itemsJSX}
+          {virtualized ? (
+            <div className={styles.virtualizedContainer} style={{ height: virtualizer.getTotalSize() }} tabIndex={-1}>
+              <div
+                className={styles.virtualizedPositionBox}
+                style={{ transform: `translateY(${virtualItems[0]?.start ?? 0}px)` }}
+                tabIndex={-1}
+              >
+                {virtualItems.map(virtualRow => (
+                  <div
+                    key={virtualRow.key}
+                    data-index={virtualRow.index}
+                    ref={virtualizer.measureElement}
+                    tabIndex={-1}
+                  >
+                    {itemsJSX[virtualRow.index]}
+                  </div>
+                ))}
+              </div>
+            </div>
+          ) : (
+            itemsJSX
+          )}
           {loadingJSX}
 
           <ListEmptyState
@@ -88,7 +125,19 @@ export const ListPrivate = forwardRef(
           />
         </div>
       ),
-      [dataError, dataFiltered, emptyStates, hasNoItems, itemsJSX, loading, loadingJSX, search?.value],
+      [
+        dataError,
+        dataFiltered,
+        emptyStates,
+        hasNoItems,
+        itemsJSX,
+        loading,
+        loadingJSX,
+        search?.value,
+        virtualItems,
+        virtualized,
+        virtualizer,
+      ],
     );
 
     const onScrollInitialized = () => {
@@ -140,7 +189,10 @@ export const ListPrivate = forwardRef(
             )}
             barHideStrategy='never'
             size={size === 's' ? 's' : 'm'}
-            ref={scrollContainerRef}
+            ref={ref => {
+              innerScrollRef.current = ref;
+              if (scrollContainerRef) (scrollContainerRef as React.MutableRefObject<HTMLElement | null>).current = ref;
+            }}
             untouchableScrollbars={untouchableScrollbars}
             onScroll={onScroll}
             onInitialized={onScrollInitialized}

package/src/components/Lists/ListPrivate/constants.ts

@@ -0,0 +1,9 @@
+export const LARGE_SIZE_HEIGHT = 48;
+export const MEDIUM_SIZE_HEIGHT = 40;
+export const SMALL_SIZE_HEIGHT = 32;
+
+export const ALL_SIZES: Record<'s' | 'm' | 'l', number> = {
+  m: MEDIUM_SIZE_HEIGHT,
+  s: SMALL_SIZE_HEIGHT,
+  l: LARGE_SIZE_HEIGHT,
+};

package/src/components/Lists/ListPrivate/styles.module.scss

@@ -50,3 +50,15 @@ $loader-height: (
   overflow: hidden;
   flex-grow: 1;
 }
+
+.virtualizedContainer {
+  position: relative;
+  width: 100%;
+}
+
+.virtualizedPositionBox {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+}

package/src/components/Lists/types.ts

@@ -77,6 +77,11 @@ export type DroplistProps = {
    */
   closeDroplistOnItemClick?: boolean;
 
+  /**
+   * Включить виртуализацию на компоненты списка. Рекомендуется если у вас от 1к элементов списка
+   */
+  virtualized?: boolean;
+
   /** Триггер для дроплиста
    * @type ReactNode | ({onKeyDown}) => ReactNode
    *
@@ -90,6 +95,7 @@ export type ListPrivateProps = Omit<ListProps, 'pinTop' | 'pinBottom' | 'items'
   nested?: boolean;
   active?: boolean;
   tabIndex?: number;
+  virtualized?: boolean;
   onFocus?(e: FocusEvent<HTMLElement>): void;
   onBlur?(e: FocusEvent<HTMLElement>): void;
   onKeyDown?(e: KeyboardEvent<HTMLElement>): void;