@snack-uikit/list 0.24.3 → 0.24.4-preview-704e8703.0

package/dist/cjs/components/Items/NextListItem/NextListItem.js

@@ -40,7 +40,8 @@ function NextListItem(_a) {
     option = __rest(_a, ["items", "placement", "id", "scroll", "scrollRef", "disabled", "onSublistOpenChanged", "allChildIds", "loading", "focusId", "untouchableScrollbars"]);
   const {
     flattenItems,
-    focusFlattenItems
+    focusFlattenItems,
+    virtualized
   } = (0, contexts_1.useNewListContext)();
   const {
     value,
@@ -113,6 +114,7 @@ function NextListItem(_a) {
       items: items,
       nested: true,
       scroll: scroll,
+      virtualized: virtualized,
       tabIndex: 0,
       ref: listRef,
       onFocus: e => {

package/dist/cjs/components/Items/hooks.d.ts

@@ -1,6 +1,6 @@
 import { RefObject } from 'react';
 import { Flatten, FlattenBaseItem, ItemId } from './types';
-export declare function useRenderItems(focusCloseChildIds?: ItemId[]): import("react/jsx-runtime").JSX.Element[] | null[];
+export declare function useRenderItems(focusCloseChildIds?: ItemId[]): (JSX.Element | null)[];
 type UseCreateBaseItemsProps = {
     search?: boolean;
     footerActiveElementsRefs?: RefObject<HTMLElement>[];

package/dist/cjs/components/Items/hooks.js

@@ -7,16 +7,77 @@ exports.useRenderItems = useRenderItems;
 exports.useCreateBaseItems = useCreateBaseItems;
 exports.useGroupItemSelection = useGroupItemSelection;
 const react_1 = require("react");
+const jsx_runtime_1 = require("react/jsx-runtime");
 const react_2 = require("react");
 const constants_1 = require("../../constants");
+const helperComponents_1 = require("../../helperComponents");
 const utils_1 = require("../../utils");
 const contexts_1 = require("../Lists/contexts");
 const AccordionItem_1 = require("./AccordionItem");
 const BaseItem_1 = require("./BaseItem");
-const GroupItem_1 = require("./GroupItem");
 const GroupSelectItem_1 = require("./GroupSelectItem");
 const NextListItem_1 = require("./NextListItem");
 const utils_2 = require("./utils");
+function getRenderItems(_ref) {
+  let {
+    focusCloseChildIds,
+    focusFlattenItems,
+    flattenItems,
+    isSelectionMultiple
+  } = _ref;
+  if (!focusCloseChildIds) {
+    return [null];
+  }
+  return focusCloseChildIds.flatMap(id => {
+    const {
+      itemRef,
+      key,
+      originalId,
+      items
+    } = focusFlattenItems[id];
+    const flattenItem = flattenItems[originalId];
+    if ((0, utils_2.isGroupItem)(flattenItem) || !isSelectionMultiple && (0, utils_2.isGroupSelectItem)(flattenItem)) {
+      const innerItemsJSX = getRenderItems({
+        focusCloseChildIds: items,
+        focusFlattenItems,
+        flattenItems,
+        isSelectionMultiple
+      });
+      return [(0, jsx_runtime_1.jsx)(helperComponents_1.Separator, {
+        label: flattenItem.label,
+        truncate: flattenItem.truncate,
+        divider: flattenItem.divider,
+        mode: flattenItem.mode
+      }, key + '_separator'), ...innerItemsJSX];
+    }
+    if ((0, utils_2.isGroupSelectItem)(flattenItem)) {
+      return (0, react_1.createElement)(GroupSelectItem_1.GroupSelectItem, Object.assign({}, flattenItem, {
+        items: items,
+        itemRef: itemRef,
+        key: key
+      }));
+    }
+    if ((0, utils_2.isAccordionItem)(flattenItem)) {
+      return (0, react_1.createElement)(AccordionItem_1.AccordionItem, Object.assign({}, flattenItem, {
+        items: items,
+        itemRef: itemRef,
+        key: key
+      }));
+    }
+    if ((0, utils_2.isNextListItem)(flattenItem)) {
+      return (0, react_1.createElement)(NextListItem_1.NextListItem, Object.assign({}, flattenItem, {
+        focusId: id,
+        items: items,
+        itemRef: itemRef,
+        key: key
+      }));
+    }
+    return (0, react_1.createElement)(BaseItem_1.BaseItem, Object.assign({}, flattenItem, {
+      itemRef: itemRef,
+      key: key
+    }));
+  });
+}
 function useRenderItems(focusCloseChildIds) {
   const {
     focusFlattenItems,
@@ -25,57 +86,17 @@ function useRenderItems(focusCloseChildIds) {
   const {
     isSelectionMultiple
   } = (0, contexts_1.useSelectionContext)();
-  return (0, react_2.useMemo)(() => {
-    if (!focusCloseChildIds) {
-      return [null];
-    }
-    return focusCloseChildIds.map(id => {
-      const {
-        itemRef,
-        key,
-        originalId,
-        items
-      } = focusFlattenItems[id];
-      const flattenItem = flattenItems[originalId];
-      if ((0, utils_2.isGroupItem)(flattenItem) || !isSelectionMultiple && (0, utils_2.isGroupSelectItem)(flattenItem)) {
-        return (0, react_1.createElement)(GroupItem_1.GroupItem, Object.assign({}, flattenItem, {
-          items: items,
-          key: key
-        }));
-      }
-      if ((0, utils_2.isGroupSelectItem)(flattenItem)) {
-        return (0, react_1.createElement)(GroupSelectItem_1.GroupSelectItem, Object.assign({}, flattenItem, {
-          items: items,
-          itemRef: itemRef,
-          key: key
-        }));
-      }
-      if ((0, utils_2.isAccordionItem)(flattenItem)) {
-        return (0, react_1.createElement)(AccordionItem_1.AccordionItem, Object.assign({}, flattenItem, {
-          items: items,
-          itemRef: itemRef,
-          key: key
-        }));
-      }
-      if ((0, utils_2.isNextListItem)(flattenItem)) {
-        return (0, react_1.createElement)(NextListItem_1.NextListItem, Object.assign({}, flattenItem, {
-          focusId: id,
-          items: items,
-          itemRef: itemRef,
-          key: key
-        }));
-      }
-      return (0, react_1.createElement)(BaseItem_1.BaseItem, Object.assign({}, flattenItem, {
-        itemRef: itemRef,
-        key: key
-      }));
-    });
-  }, [flattenItems, focusCloseChildIds, focusFlattenItems, isSelectionMultiple]);
+  return (0, react_2.useMemo)(() => getRenderItems({
+    flattenItems,
+    focusFlattenItems,
+    focusCloseChildIds,
+    isSelectionMultiple
+  }), [flattenItems, focusCloseChildIds, focusFlattenItems, isSelectionMultiple]);
 }
-function useCreateBaseItems(_ref) {
+function useCreateBaseItems(_ref2) {
   let {
     footerActiveElementsRefs
-  } = _ref;
+  } = _ref2;
   return (0, react_2.useMemo)(() => {
     var _a;
     return {
@@ -96,11 +117,11 @@ function useCreateBaseItems(_ref) {
     };
   }, [footerActiveElementsRefs]);
 }
-function useGroupItemSelection(_ref2) {
+function useGroupItemSelection(_ref3) {
   let {
     id,
     allChildIds
-  } = _ref2;
+  } = _ref3;
   const {
     value,
     setValue,

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

@@ -209,6 +209,7 @@ function Droplist(_a) {
     size: size,
     marker: marker,
     firstItemId: firstItemId,
+    virtualized: virtualized,
     children: (0, jsx_runtime_1.jsx)(contexts_1.SelectionProvider, Object.assign({}, selection, {
       children: (0, jsx_runtime_1.jsx)(contexts_1.CollapseContext.Provider, {
         value: {

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

@@ -168,6 +168,7 @@ exports.List = (0, react_1.forwardRef)((_a, ref) => {
     size: size,
     marker: marker,
     firstItemId: firstItemId,
+    virtualized: props.virtualized,
     children: (0, jsx_runtime_1.jsx)(contexts_1.SelectionProvider, Object.assign({}, selection, {
       children: (0, jsx_runtime_1.jsx)(contexts_1.CollapseContext.Provider, {
         value: {

package/dist/cjs/components/Lists/contexts/NewListProvider.d.ts

@@ -15,6 +15,7 @@ export type PublicListContextType = {
      * Рендер функция основного контента айтема
      */
     contentRender?(props: ContentRenderProps): ReactNode;
+    virtualized?: boolean;
 };
 export type PrivateListContextType = {
     flattenItems: Record<string, FlattenItem>;

package/dist/cjs/components/Lists/contexts/NewListProvider.js

@@ -32,7 +32,8 @@ function extractListProps(_ref) {
     flattenItems,
     focusFlattenItems,
     contentRender,
-    firstItemId
+    firstItemId,
+    virtualized
   } = _ref;
   return {
     size,
@@ -40,7 +41,8 @@ function extractListProps(_ref) {
     contentRender,
     flattenItems,
     focusFlattenItems,
-    firstItemId
+    firstItemId,
+    virtualized
   };
 }
 function NewListContextProvider(_a) {

package/dist/esm/components/Items/NextListItem/NextListItem.js

@@ -22,7 +22,7 @@ import { extractActiveItems, isNextListItem } from '../utils';
 import { FALLBACK_PLACEMENTS } from './constants';
 export function NextListItem(_a) {
     var { items, placement = 'right-start', id, scroll, scrollRef, disabled, onSublistOpenChanged, allChildIds, loading = false, focusId = id, untouchableScrollbars = false } = _a, option = __rest(_a, ["items", "placement", "id", "scroll", "scrollRef", "disabled", "onSublistOpenChanged", "allChildIds", "loading", "focusId", "untouchableScrollbars"]);
-    const { flattenItems, focusFlattenItems } = useNewListContext();
+    const { flattenItems, focusFlattenItems, virtualized } = useNewListContext();
     const { value, isSelectionSingle, isSelectionMultiple } = useSelectionContext();
     const { openCollapseItems = [] } = useCollapseContext();
     const item = flattenItems[id];
@@ -64,7 +64,7 @@ export function NextListItem(_a) {
         setOpen(open => open && isOpen);
     }, [id, isOpen]);
     const listRef = useRef(null);
-    return (_jsx(Dropdown, { outsideClick: handleOutsideClick, fallbackPlacements: FALLBACK_PLACEMENTS, content: _jsx(ListPrivate, { onKeyDown: handleListKeyDown, items: items, nested: true, scroll: scroll, tabIndex: 0, ref: listRef, onFocus: e => {
+    return (_jsx(Dropdown, { outsideClick: handleOutsideClick, fallbackPlacements: FALLBACK_PLACEMENTS, content: _jsx(ListPrivate, { onKeyDown: handleListKeyDown, items: items, nested: true, scroll: scroll, virtualized: virtualized, tabIndex: 0, ref: listRef, onFocus: e => {
                 e.stopPropagation();
                 forceUpdateActiveItemId === null || forceUpdateActiveItemId === void 0 ? void 0 : forceUpdateActiveItemId(ids[0]);
             }, scrollRef: scrollRef, limitedScrollHeight: true, untouchableScrollbars: untouchableScrollbars, loading: loading }), trigger: 'hover', open: isOpen || open, onOpenChange: value => {

package/dist/esm/components/Items/hooks.d.ts

@@ -1,6 +1,6 @@
 import { RefObject } from 'react';
 import { Flatten, FlattenBaseItem, ItemId } from './types';
-export declare function useRenderItems(focusCloseChildIds?: ItemId[]): import("react/jsx-runtime").JSX.Element[] | null[];
+export declare function useRenderItems(focusCloseChildIds?: ItemId[]): (JSX.Element | null)[];
 type UseCreateBaseItemsProps = {
     search?: boolean;
     footerActiveElementsRefs?: RefObject<HTMLElement>[];

package/dist/esm/components/Items/hooks.js

@@ -1,40 +1,51 @@
 import { createElement as _createElement } from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { createRef, useMemo } from 'react';
 import { ITEM_PREFIXES } from '../../constants';
+import { Separator } from '../../helperComponents';
 import { getFooterItemId } from '../../utils';
 import { useNewListContext, useSelectionContext } from '../Lists/contexts';
 import { AccordionItem } from './AccordionItem';
 import { BaseItem } from './BaseItem';
-import { GroupItem } from './GroupItem';
 import { GroupSelectItem } from './GroupSelectItem';
 import { NextListItem } from './NextListItem';
 import { isAccordionItem, isGroupItem, isGroupSelectItem, isNextListItem } from './utils';
+function getRenderItems({ focusCloseChildIds, focusFlattenItems, flattenItems, isSelectionMultiple, }) {
+    if (!focusCloseChildIds) {
+        return [null];
+    }
+    return focusCloseChildIds.flatMap(id => {
+        const { itemRef, key, originalId, items } = focusFlattenItems[id];
+        const flattenItem = flattenItems[originalId];
+        if (isGroupItem(flattenItem) ||
+            (!isSelectionMultiple && isGroupSelectItem(flattenItem))) {
+            const innerItemsJSX = getRenderItems({
+                focusCloseChildIds: items,
+                focusFlattenItems,
+                flattenItems,
+                isSelectionMultiple,
+            });
+            return [
+                _jsx(Separator, { label: flattenItem.label, truncate: flattenItem.truncate, divider: flattenItem.divider, mode: flattenItem.mode }, key + '_separator'),
+                ...innerItemsJSX,
+            ];
+        }
+        if (isGroupSelectItem(flattenItem)) {
+            return _createElement(GroupSelectItem, Object.assign({}, flattenItem, { items: items, itemRef: itemRef, key: key }));
+        }
+        if (isAccordionItem(flattenItem)) {
+            return _createElement(AccordionItem, Object.assign({}, flattenItem, { items: items, itemRef: itemRef, key: key }));
+        }
+        if (isNextListItem(flattenItem)) {
+            return _createElement(NextListItem, Object.assign({}, flattenItem, { focusId: id, items: items, itemRef: itemRef, key: key }));
+        }
+        return _createElement(BaseItem, Object.assign({}, flattenItem, { itemRef: itemRef, key: key }));
+    });
+}
 export function useRenderItems(focusCloseChildIds) {
     const { focusFlattenItems, flattenItems } = useNewListContext();
     const { isSelectionMultiple } = useSelectionContext();
-    return useMemo(() => {
-        if (!focusCloseChildIds) {
-            return [null];
-        }
-        return focusCloseChildIds.map(id => {
-            const { itemRef, key, originalId, items } = focusFlattenItems[id];
-            const flattenItem = flattenItems[originalId];
-            if (isGroupItem(flattenItem) ||
-                (!isSelectionMultiple && isGroupSelectItem(flattenItem))) {
-                return _createElement(GroupItem, Object.assign({}, flattenItem, { items: items, key: key }));
-            }
-            if (isGroupSelectItem(flattenItem)) {
-                return _createElement(GroupSelectItem, Object.assign({}, flattenItem, { items: items, itemRef: itemRef, key: key }));
-            }
-            if (isAccordionItem(flattenItem)) {
-                return _createElement(AccordionItem, Object.assign({}, flattenItem, { items: items, itemRef: itemRef, key: key }));
-            }
-            if (isNextListItem(flattenItem)) {
-                return _createElement(NextListItem, Object.assign({}, flattenItem, { focusId: id, items: items, itemRef: itemRef, key: key }));
-            }
-            return _createElement(BaseItem, Object.assign({}, flattenItem, { itemRef: itemRef, key: key }));
-        });
-    }, [flattenItems, focusCloseChildIds, focusFlattenItems, isSelectionMultiple]);
+    return useMemo(() => getRenderItems({ flattenItems, focusFlattenItems, focusCloseChildIds, isSelectionMultiple }), [flattenItems, focusCloseChildIds, focusFlattenItems, isSelectionMultiple]);
 }
 export function useCreateBaseItems({ footerActiveElementsRefs }) {
     return useMemo(() => {

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

@@ -128,7 +128,7 @@ export function Droplist(_a) {
         }
         return children;
     }, [onKeyDown, children]);
-    return (_jsx(NewListContextProvider, { flattenItems: flattenItems, focusFlattenItems: focusFlattenItems, contentRender: contentRender, size: size, marker: marker, firstItemId: firstItemId, children: _jsx(SelectionProvider, Object.assign({}, selection, { children: _jsx(CollapseContext.Provider, { value: {
+    return (_jsx(NewListContextProvider, { flattenItems: flattenItems, focusFlattenItems: focusFlattenItems, contentRender: contentRender, size: size, marker: marker, firstItemId: firstItemId, virtualized: virtualized, children: _jsx(SelectionProvider, Object.assign({}, selection, { children: _jsx(CollapseContext.Provider, { value: {
                     openCollapseItems,
                     toggleOpenCollapseItem,
                 }, children: _jsx(FocusListContext.Provider, { value: {

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

@@ -99,7 +99,7 @@ export const List = forwardRef((_a, ref) => {
     const handleOnFocus = () => {
         resetActiveItemId();
     };
-    return (_jsx(NewListContextProvider, { flattenItems: flattenItems, focusFlattenItems: focusFlattenItems, contentRender: contentRender, size: size, marker: marker, firstItemId: firstItemId, children: _jsx(SelectionProvider, Object.assign({}, selection, { children: _jsx(CollapseContext.Provider, { value: {
+    return (_jsx(NewListContextProvider, { flattenItems: flattenItems, focusFlattenItems: focusFlattenItems, contentRender: contentRender, size: size, marker: marker, firstItemId: firstItemId, virtualized: props.virtualized, children: _jsx(SelectionProvider, Object.assign({}, selection, { children: _jsx(CollapseContext.Provider, { value: {
                     openCollapseItems,
                     toggleOpenCollapseItem,
                 }, children: _jsx(FocusListContext.Provider, { value: {

package/dist/esm/components/Lists/contexts/NewListProvider.d.ts

@@ -15,6 +15,7 @@ export type PublicListContextType = {
      * Рендер функция основного контента айтема
      */
     contentRender?(props: ContentRenderProps): ReactNode;
+    virtualized?: boolean;
 };
 export type PrivateListContextType = {
     flattenItems: Record<string, FlattenItem>;

package/dist/esm/components/Lists/contexts/NewListProvider.js

@@ -20,8 +20,8 @@ export const ListContext = createContext({
 export function useNewListContext() {
     return useContext(ListContext);
 }
-function extractListProps({ size, marker, flattenItems, focusFlattenItems, contentRender, firstItemId, }) {
-    return { size, marker, contentRender, flattenItems, focusFlattenItems, firstItemId };
+function extractListProps({ size, marker, flattenItems, focusFlattenItems, contentRender, firstItemId, virtualized, }) {
+    return { size, marker, contentRender, flattenItems, focusFlattenItems, firstItemId, virtualized };
 }
 export function NewListContextProvider(_a) {
     var { children } = _a, props = __rest(_a, ["children"]);

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "List",
-  "version": "0.24.3",
+  "version": "0.24.4-preview-704e8703.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -36,11 +36,11 @@
   "license": "Apache-2.0",
   "scripts": {},
   "dependencies": {
-    "@snack-uikit/button": "0.19.7",
+    "@snack-uikit/button": "0.19.8-preview-704e8703.0",
     "@snack-uikit/divider": "3.2.3",
     "@snack-uikit/dropdown": "0.4.4",
     "@snack-uikit/icons": "0.24.2",
-    "@snack-uikit/info-block": "0.6.12",
+    "@snack-uikit/info-block": "0.6.13-preview-704e8703.0",
     "@snack-uikit/loaders": "0.9.1",
     "@snack-uikit/scroll": "0.9.3",
     "@snack-uikit/search-private": "0.4.9",
@@ -54,5 +54,5 @@
   "peerDependencies": {
     "@snack-uikit/locale": "*"
   },
-  "gitHead": "c29d4a3f518a9a287566b4ccb7648b5243e1977b"
+  "gitHead": "4cc887cec09a84912a1c15e5ad676c47513b07c7"
 }

package/src/components/Items/NextListItem/NextListItem.tsx

@@ -28,7 +28,7 @@ export function NextListItem({
   untouchableScrollbars = false,
   ...option
 }: NextListItemProps) {
-  const { flattenItems, focusFlattenItems } = useNewListContext();
+  const { flattenItems, focusFlattenItems, virtualized } = useNewListContext();
   const { value, isSelectionSingle, isSelectionMultiple } = useSelectionContext();
   const { openCollapseItems = [] } = useCollapseContext();
 
@@ -107,6 +107,7 @@ export function NextListItem({
           items={items}
           nested
           scroll={scroll}
+          virtualized={virtualized}
           tabIndex={0}
           ref={listRef}
           onFocus={e => {

package/src/components/Items/hooks.tsx

@@ -1,11 +1,11 @@
 import { createRef, RefObject, useMemo } from 'react';
 
 import { ITEM_PREFIXES } from '../../constants';
+import { Separator } from '../../helperComponents';
 import { getFooterItemId } from '../../utils';
 import { useNewListContext, useSelectionContext } from '../Lists/contexts';
 import { AccordionItem } from './AccordionItem';
 import { BaseItem } from './BaseItem';
-import { GroupItem } from './GroupItem';
 import { GroupSelectItem } from './GroupSelectItem';
 import { NextListItem } from './NextListItem';
 import {
@@ -13,44 +13,79 @@ import {
   FlattenAccordionItem,
   FlattenBaseItem,
   FlattenGroupSelectListItem,
+  FlattenItem,
   FlattenNextListItem,
+  FocusFlattenItem,
   ItemId,
 } from './types';
 import { isAccordionItem, isGroupItem, isGroupSelectItem, isNextListItem } from './utils';
 
+type GetRenderItemsProps = {
+  focusCloseChildIds?: ItemId[];
+  flattenItems: Record<string, FlattenItem>;
+  focusFlattenItems: Record<string, FocusFlattenItem>;
+  isSelectionMultiple?: boolean;
+};
+
+function getRenderItems({
+  focusCloseChildIds,
+  focusFlattenItems,
+  flattenItems,
+  isSelectionMultiple,
+}: GetRenderItemsProps): (JSX.Element | null)[] {
+  if (!focusCloseChildIds) {
+    return [null];
+  }
+
+  return focusCloseChildIds.flatMap(id => {
+    const { itemRef, key, originalId, items } = focusFlattenItems[id];
+
+    const flattenItem = flattenItems[originalId];
+
+    if (
+      isGroupItem(flattenItem) ||
+      (!isSelectionMultiple && isGroupSelectItem<FlattenGroupSelectListItem>(flattenItem))
+    ) {
+      const innerItemsJSX = getRenderItems({
+        focusCloseChildIds: items,
+        focusFlattenItems,
+        flattenItems,
+        isSelectionMultiple,
+      });
+
+      return [
+        <Separator
+          label={flattenItem.label}
+          truncate={flattenItem.truncate}
+          divider={flattenItem.divider}
+          mode={flattenItem.mode}
+          key={key + '_separator'}
+        />,
+        ...innerItemsJSX,
+      ];
+    }
+    if (isGroupSelectItem<FlattenGroupSelectListItem>(flattenItem)) {
+      return <GroupSelectItem {...flattenItem} items={items} itemRef={itemRef} key={key} />;
+    }
+    if (isAccordionItem<FlattenAccordionItem>(flattenItem)) {
+      return <AccordionItem {...flattenItem} items={items} itemRef={itemRef} key={key} />;
+    }
+    if (isNextListItem<FlattenNextListItem>(flattenItem)) {
+      return <NextListItem {...flattenItem} focusId={id} items={items} itemRef={itemRef} key={key} />;
+    }
+
+    return <BaseItem {...flattenItem} itemRef={itemRef} key={key} />;
+  });
+}
+
 export function useRenderItems(focusCloseChildIds?: ItemId[]) {
   const { focusFlattenItems, flattenItems } = useNewListContext();
   const { isSelectionMultiple } = useSelectionContext();
 
-  return useMemo(() => {
-    if (!focusCloseChildIds) {
-      return [null];
-    }
-
-    return focusCloseChildIds.map(id => {
-      const { itemRef, key, originalId, items } = focusFlattenItems[id];
-
-      const flattenItem = flattenItems[originalId];
-
-      if (
-        isGroupItem(flattenItem) ||
-        (!isSelectionMultiple && isGroupSelectItem<FlattenGroupSelectListItem>(flattenItem))
-      ) {
-        return <GroupItem {...flattenItem} items={items} key={key} />;
-      }
-      if (isGroupSelectItem<FlattenGroupSelectListItem>(flattenItem)) {
-        return <GroupSelectItem {...flattenItem} items={items} itemRef={itemRef} key={key} />;
-      }
-      if (isAccordionItem<FlattenAccordionItem>(flattenItem)) {
-        return <AccordionItem {...flattenItem} items={items} itemRef={itemRef} key={key} />;
-      }
-      if (isNextListItem<FlattenNextListItem>(flattenItem)) {
-        return <NextListItem {...flattenItem} focusId={id} items={items} itemRef={itemRef} key={key} />;
-      }
-
-      return <BaseItem {...flattenItem} itemRef={itemRef} key={key} />;
-    });
-  }, [flattenItems, focusCloseChildIds, focusFlattenItems, isSelectionMultiple]);
+  return useMemo(
+    () => getRenderItems({ flattenItems, focusFlattenItems, focusCloseChildIds, isSelectionMultiple }),
+    [flattenItems, focusCloseChildIds, focusFlattenItems, isSelectionMultiple],
+  );
 }
 
 type UseCreateBaseItemsProps = {

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

@@ -208,6 +208,7 @@ export function Droplist({
       size={size}
       marker={marker}
       firstItemId={firstItemId}
+      virtualized={virtualized}
     >
       <SelectionProvider {...selection}>
         <CollapseContext.Provider

package/src/components/Lists/List/List.tsx

@@ -153,6 +153,7 @@ export const List = forwardRef(
         size={size}
         marker={marker}
         firstItemId={firstItemId}
+        virtualized={props.virtualized}
       >
         <SelectionProvider {...selection}>
           <CollapseContext.Provider

package/src/components/Lists/contexts/NewListProvider.tsx

@@ -19,6 +19,7 @@ export type PublicListContextType = {
    * Рендер функция основного контента айтема
    */
   contentRender?(props: ContentRenderProps): ReactNode;
+  virtualized?: boolean;
 };
 
 export type PrivateListContextType = {
@@ -50,8 +51,9 @@ function extractListProps<T extends ListContextType>({
   focusFlattenItems,
   contentRender,
   firstItemId,
+  virtualized,
 }: T) {
-  return { size, marker, contentRender, flattenItems, focusFlattenItems, firstItemId };
+  return { size, marker, contentRender, flattenItems, focusFlattenItems, firstItemId, virtualized };
 }
 
 export function NewListContextProvider({ children, ...props }: ListContextType & Child) {

package/dist/cjs/components/Items/GroupItem/GroupItem.d.ts

@@ -1,6 +0,0 @@
-import { FlattenGroupListItem, ItemId } from '../types';
-type GroupItemProps = Omit<FlattenGroupListItem, 'type'> & {
-    items: ItemId[];
-};
-export declare function GroupItem({ label, truncate, divider, items, mode }: GroupItemProps): import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/cjs/components/Items/GroupItem/GroupItem.js

@@ -1,27 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.GroupItem = GroupItem;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const helperComponents_1 = require("../../../helperComponents");
-const hooks_1 = require("../hooks");
-function GroupItem(_ref) {
-  let {
-    label,
-    truncate,
-    divider,
-    items,
-    mode
-  } = _ref;
-  const itemsJSX = (0, hooks_1.useRenderItems)(items);
-  return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, {
-    children: [(0, jsx_runtime_1.jsx)(helperComponents_1.Separator, {
-      label: label,
-      truncate: truncate,
-      divider: divider,
-      mode: mode
-    }), itemsJSX]
-  });
-}

package/dist/cjs/components/Items/GroupItem/index.d.ts

@@ -1 +0,0 @@
-export * from './GroupItem';

package/dist/cjs/components/Items/GroupItem/index.js

@@ -1,25 +0,0 @@
-"use strict";
-
-var __createBinding = void 0 && (void 0).__createBinding || (Object.create ? function (o, m, k, k2) {
-  if (k2 === undefined) k2 = k;
-  var desc = Object.getOwnPropertyDescriptor(m, k);
-  if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-    desc = {
-      enumerable: true,
-      get: function () {
-        return m[k];
-      }
-    };
-  }
-  Object.defineProperty(o, k2, desc);
-} : function (o, m, k, k2) {
-  if (k2 === undefined) k2 = k;
-  o[k2] = m[k];
-});
-var __exportStar = void 0 && (void 0).__exportStar || function (m, exports) {
-  for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
-};
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-__exportStar(require("./GroupItem"), exports);

package/dist/esm/components/Items/GroupItem/GroupItem.d.ts

@@ -1,6 +0,0 @@
-import { FlattenGroupListItem, ItemId } from '../types';
-type GroupItemProps = Omit<FlattenGroupListItem, 'type'> & {
-    items: ItemId[];
-};
-export declare function GroupItem({ label, truncate, divider, items, mode }: GroupItemProps): import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/esm/components/Items/GroupItem/GroupItem.js

@@ -1,7 +0,0 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { Separator } from '../../../helperComponents';
-import { useRenderItems } from '../hooks';
-export function GroupItem({ label, truncate, divider, items, mode }) {
-    const itemsJSX = useRenderItems(items);
-    return (_jsxs(_Fragment, { children: [_jsx(Separator, { label: label, truncate: truncate, divider: divider, mode: mode }), itemsJSX] }));
-}

package/dist/esm/components/Items/GroupItem/index.d.ts

@@ -1 +0,0 @@
-export * from './GroupItem';

package/dist/esm/components/Items/GroupItem/index.js

@@ -1 +0,0 @@
-export * from './GroupItem';

package/src/components/Items/GroupItem/GroupItem.tsx

@@ -1,17 +0,0 @@
-import { Separator } from '../../../helperComponents';
-import { useRenderItems } from '../hooks';
-import { FlattenGroupListItem, ItemId } from '../types';
-
-type GroupItemProps = Omit<FlattenGroupListItem, 'type'> & { items: ItemId[] };
-
-export function GroupItem({ label, truncate, divider, items, mode }: GroupItemProps) {
-  const itemsJSX = useRenderItems(items);
-
-  return (
-    <>
-      <Separator label={label} truncate={truncate} divider={divider} mode={mode} />
-
-      {itemsJSX}
-    </>
-  );
-}

package/src/components/Items/GroupItem/index.ts

@@ -1 +0,0 @@
-export * from './GroupItem';