@cloud-ru/ds-list 1.0.0

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

@@ -0,0 +1,62 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ReorderableList = exports.List = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const utils_1 = require("@cloud-ru/ds-utils");
+const classnames_1 = __importDefault(require("classnames"));
+const merge_refs_1 = __importDefault(require("merge-refs"));
+const react_1 = require("react");
+const constants_1 = require("../../../constants");
+const helperComponents_1 = require("../../../helperComponents");
+const contexts_1 = require("../contexts");
+const hooks_1 = require("../hooks");
+const ListPrivate_1 = require("../ListPrivate");
+const styles_module_scss_1 = __importDefault(require('../styles.module.css'));
+const ListImpl = (0, react_1.forwardRef)(({ items: itemsProp = [], search, pinBottom: pinBottomProp = [], pinTop: pinTopProp = [], footerActiveElementsRefs, onKeyDown, tabIndex = 0, className, collapse = {}, selection, contentRender, size = constants_1.DEFAULT_SIZE, marker = true, keyboardNavigationRef, hasListInFocusChain = true, onItemsReorder, ...props }, ref) => {
+    const { openCollapseItems, toggleOpenCollapseItem, searchItem, flattenItems, focusFlattenItems, memorizedItems, ids, expandedIds, firstItemId, onDragEnd, sortableIds, } = (0, hooks_1.useListItemsModel)({
+        items: itemsProp,
+        pinTop: pinTopProp,
+        pinBottom: pinBottomProp,
+        search,
+        collapse,
+        selectionMode: selection?.mode,
+        footerActiveElementsRefs,
+        onItemsReorder,
+    });
+    const listRef = (0, react_1.useRef)(null);
+    const btnRef = (0, react_1.useRef)(null);
+    const { handleListKeyDownFactory, activeItemId, resetActiveItemId, forceUpdateActiveItemId } = (0, hooks_1.useNewKeyboardNavigation)({
+        mainRef: listRef,
+        btnRef,
+        focusFlattenItems,
+        keyboardNavigationRef,
+        hasListInFocusChain,
+        firstItemId,
+    });
+    const handleListKeyDown = (0, react_1.useCallback)((e) => handleListKeyDownFactory(ids, expandedIds)(e), [handleListKeyDownFactory, ids, expandedIds]);
+    const isActive = (0, utils_1.isBrowser)() && listRef.current === document.activeElement && activeItemId === undefined;
+    const mergedHandlerKeyDown = (e) => {
+        onKeyDown?.(e);
+        handleListKeyDown?.(e);
+    };
+    const handleOnFocus = () => {
+        resetActiveItemId();
+    };
+    const collapseContextValue = (0, react_1.useMemo)(() => ({ openCollapseItems, toggleOpenCollapseItem }), [openCollapseItems, toggleOpenCollapseItem]);
+    const focusListContextValue = (0, react_1.useMemo)(() => ({ activeItemId, handleListKeyDownFactory, forceUpdateActiveItemId }), [activeItemId, handleListKeyDownFactory, forceUpdateActiveItemId]);
+    return ((0, jsx_runtime_1.jsx)(contexts_1.NewListContextProvider, { flattenItems: flattenItems, focusFlattenItems: focusFlattenItems, contentRender: contentRender, size: size, marker: marker, firstItemId: firstItemId, virtualized: props.virtualized, children: (0, jsx_runtime_1.jsx)(contexts_1.SelectionProvider, { ...selection, children: (0, jsx_runtime_1.jsx)(contexts_1.CollapseContext.Provider, { value: collapseContextValue, children: (0, jsx_runtime_1.jsx)(contexts_1.FocusListContext.Provider, { value: focusListContextValue, children: (0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(styles_module_scss_1.default.wrapper, className), "data-active": isActive || undefined, children: [(0, jsx_runtime_1.jsx)(ListPrivate_1.ListPrivate, { ...props, items: memorizedItems.items.focusCloseChildIds, pinTop: memorizedItems.pinTop.focusCloseChildIds, pinBottom: memorizedItems.pinBottom.focusCloseChildIds, searchItem: searchItem, ref: (0, merge_refs_1.default)(ref, listRef), onFocus: handleOnFocus, onKeyDown: mergedHandlerKeyDown, tabIndex: hasListInFocusChain ? tabIndex : undefined, search: search, nested: false, onDragEnd: onDragEnd, sortableIds: sortableIds }), hasListInFocusChain && (0, jsx_runtime_1.jsx)(helperComponents_1.HiddenTabButton, { ref: btnRef, listRef: listRef, tabIndex: tabIndex })] }) }) }) }) }));
+});
+ListImpl.displayName = 'ListImpl';
+/** Список айтемов: base / collapse / group / next-list, с опциональной виртуализацией. */
+exports.List = (0, react_1.forwardRef)((props, ref) => (0, jsx_runtime_1.jsx)(ListImpl, { ...props, ref: ref }));
+exports.List.displayName = 'List';
+/**
+ * Список с drag&drop-переупорядочиванием строк за ручку слева. Управляемый: порядок не хранит,
+ * а отдаёт обновлённое дерево в `onItemsReorder`. Модель айтемов — `ReorderItem` (плоская строка
+ * либо группа с заголовком); `collapse`/`next-list`/`group-select` и виртуализация не поддержаны.
+ */
+exports.ReorderableList = (0, react_1.forwardRef)((props, ref) => ((0, jsx_runtime_1.jsx)(ListImpl, { ...props, ref: ref })));
+exports.ReorderableList.displayName = 'ReorderableList';

package/dist/cjs/components/Lists/List/index.d.ts

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

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

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__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 = (this && this.__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("./List"), exports);

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

@@ -0,0 +1,18 @@
+import { DragEndEvent } from '@dnd-kit/core';
+import { ItemId } from '../../Items';
+export declare const ListPrivate: import("react").ForwardRefExoticComponent<Omit<import("../types").ListImplProps, "items" | "virtualized" | "hasListInFocusChain" | "pinTop" | "pinBottom" | "onItemsReorder"> & {
+    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;
+    limitedScrollHeight?: boolean;
+    searchItem?: import("../../Items").FlattenBaseItem;
+    pinTop?: ItemId[];
+    items: ItemId[];
+    pinBottom?: ItemId[];
+    onDragEnd?(event: DragEndEvent): void;
+    sortableIds?: ItemId[];
+} & import("react").RefAttributes<HTMLElement>>;

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

@@ -0,0 +1,301 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ListPrivate = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const core_1 = require("@dnd-kit/core");
+const sortable_1 = require("@dnd-kit/sortable");
+const loader_1 = require("@cloud-ru/ds-loader");
+const portal_context_1 = require("@cloud-ru/ds-portal-context");
+const scroll_1 = require("@cloud-ru/ds-scroll");
+const utils_1 = require("@cloud-ru/ds-utils");
+const react_virtual_1 = require("@tanstack/react-virtual");
+const classnames_1 = __importDefault(require("classnames"));
+const merge_refs_1 = __importDefault(require("merge-refs"));
+const react_1 = require("react");
+const react_dom_1 = require("react-dom");
+const constants_1 = require("../../../constants");
+const helperComponents_1 = require("../../../helperComponents");
+const utils_2 = require("../../../utils");
+const Items_1 = require("../../Items");
+const SimpleItem_1 = require("../../Items/SimpleItem");
+const contexts_1 = require("../contexts");
+const styles_module_scss_1 = __importDefault(require('../styles.module.css'));
+const constants_2 = require("./constants");
+const styles_module_scss_2 = __importDefault(require('./styles.module.css'));
+// Отделяет клик (activation через `onClick` айтема) от начала перетаскивания — тот же порог активации,
+// что у `@cloud-ru/ds-table` (`useColumnOrderByDrag`), для единообразия поведения по репо.
+const draggingOptions = { activationConstraint: { distance: 5 } };
+// Пересчитывать rect'ы droppable-строк на каждом кадре перетаскивания. В `Droplist` (popover) список лежит
+// в скролл-контейнере с трансформами: измеренные при монтировании rect'ы устаревают, коллизия
+// указывает на последнюю строку и строка «улетает» в конец. `Always` держит измерения свежими.
+const measuringConfig = { droppable: { strategy: core_1.MeasuringStrategy.Always } };
+/**
+ * Центрирует элемент внутри своего scroll-контейнера правкой `scrollTop` контейнера.
+ * В отличие от `element.scrollIntoView({ block: 'center' })`, НЕ скроллит вышестоящие предки
+ * (включая window) — иначе при монтировании списка с `scrollToSelectedItem` страница доков
+ * «дёргалась» (окно прыгало, чтобы показать выбранный элемент). См. ревью MR!101.
+ */
+function centerItemInScrollContainer(container, item) {
+    if (!container || !item) {
+        return;
+    }
+    const containerRect = container.getBoundingClientRect();
+    const itemRect = item.getBoundingClientRect();
+    const delta = itemRect.top - containerRect.top - (container.clientHeight - itemRect.height) / 2;
+    container.scrollTop += delta;
+}
+exports.ListPrivate = (0, react_1.forwardRef)(({ items, pinTop, pinBottom, onKeyDown, onBlur, onFocus, tabIndex, active, scroll, nested, search, searchItem, scrollRef, scrollContainerRef, onScroll, footer, header, headerDivider, footerDivider, loading, limitedScrollHeight, untouchableScrollbars, className, noDataState, noResultsState, errorDataState, dataError, dataFiltered, scrollToSelectedItem = false, virtualized: virtualizedProp = false, scrollContainerClassName, barHideStrategy = 'never', onDragEnd, sortableIds, ...props }, ref) => {
+    const { size = constants_1.DEFAULT_SIZE, flattenItems, focusFlattenItems } = (0, contexts_1.useNewListContext)();
+    const { value, isSelectionSingle } = (0, contexts_1.useSelectionContext)();
+    // `onDragEnd`/`SortableContext` конфликтуют с виртуализатором: обе стороны применяют свой
+    // `transform` к строке (см. JSDoc `ListPrivateProps.onDragEnd`) — запрещено уже на уровне
+    // типов (`ListProps`), здесь рантайм-зеркало на случай прямого использования `ListPrivate`.
+    const virtualized = virtualizedProp && !onDragEnd;
+    const sensors = (0, core_1.useSensors)((0, core_1.useSensor)(core_1.MouseSensor, draggingOptions), (0, core_1.useSensor)(core_1.TouchSensor, {}), (0, core_1.useSensor)(core_1.KeyboardSensor, { coordinateGetter: sortable_1.sortableKeyboardCoordinates }));
+    // Id перетаскиваемой строки — для рендера её копии в `DragOverlay`. Копия живёт в портале
+    // над страницей и не режется `overflow: hidden` контейнера `List` (исходная строка остаётся
+    // на месте «призраком»). `null`, когда перетаскивание не идёт.
+    const [activeDragId, setActiveDragId] = (0, react_1.useState)(null);
+    const handleDragStart = (0, react_1.useCallback)((event) => setActiveDragId(event.active.id), []);
+    const handleDragEnd = (0, react_1.useCallback)((event) => {
+        setActiveDragId(null);
+        onDragEnd?.(event);
+    }, [onDragEnd]);
+    const handleDragCancel = (0, react_1.useCallback)(() => setActiveDragId(null), []);
+    const activeOverlayItem = activeDragId != null ? flattenItems[activeDragId] : undefined;
+    // Переупорядочивание строго внутри одного sortable-контейнера: верхний уровень (строки без группы + сами
+    // группы — «братья») либо контейнер конкретной группы (её строки). Остаются только droppable
+    // того же контейнера, что и активный элемент (`container` в `data` ставят `SimpleItem`/
+    // `SimpleGroupBlock`).
+    const collisionDetection = (0, react_1.useCallback)(args => {
+        const activeContainer = args.active.data.current?.container;
+        const droppableContainers = args.droppableContainers.filter(container => container.data.current?.container === activeContainer);
+        // Сначала — droppable под курсором (`pointerWithin`). Группа сортируется целым блоком
+        // (`SimpleGroupBlock`: заголовок + строки), поэтому её droppable-rect высокий; `closestCenter`
+        // сравнивал бы расстояние до центра блока — курсор над заголовком группы был далеко от центра,
+        // и цель «перепрыгивала» через всю группу (строка вставала под неё). `pointerWithin` берёт тот
+        // блок, над которым реально курсор, — вставка идёт туда, где визуально находится указатель.
+        const pointerCollisions = (0, core_1.pointerWithin)({ ...args, droppableContainers });
+        if (pointerCollisions.length > 0) {
+            return pointerCollisions;
+        }
+        // Fallback для клавиатурного сенсора (у него нет координат указателя → `pointerWithin` пуст).
+        return (0, core_1.closestCenter)({ ...args, droppableContainers });
+    }, []);
+    // Портал `DragOverlay` — в themed-корень (`@cloud-ru/ds-portal-context`), а не в `document.body`. Все
+    // `--sn-*` токены объявлены на theme-scope (`RootThemeProvider`), а не на `:root`; в `body`
+    // копия строки теряла их и падала на дефолты (раздутые паддинги/цвета — «гигантский призрак»).
+    // Корень портал-контекста лежит внутри theme-scope и не трансформирован, поэтому `position:
+    // fixed` у `DragOverlay` остаётся относительно вьюпорта (в т.ч. внутри popover-Droplist).
+    const portalRoot = (0, portal_context_1.usePortalContext)();
+    const innerScrollRef = (0, react_1.useRef)(null);
+    // `@cloud-ru/ds-scroll` (OverlayScrollbars) разрешает свой ref в viewport-элемент только после
+    // инициализации инстанса. До этого `innerScrollRef.current` === null, и виртуализатор
+    // не получает scroll-элемент → рендерит пустой контейнер. Флаг поднимается из
+    // `onInitialized` и форсит повторный `measure()` уже с готовым viewport'ом.
+    const [scrollElementReady, setScrollElementReady] = (0, react_1.useState)(false);
+    const itemsJSX = (0, Items_1.useRenderItems)(items);
+    const itemsPinTopJSX = (0, Items_1.useRenderItems)(pinTop);
+    const itemsPinBottomJSX = (0, Items_1.useRenderItems)(pinBottom);
+    const pinTopItemsPresent = Number(pinTop?.length) > 0;
+    const pinBottomItemsPresent = Number(pinBottom?.length) > 0;
+    const [scrollState, setScrollState] = (0, react_1.useState)({ virtualizer: null, browser: null, measured: false });
+    const emptyStates = (0, helperComponents_1.useEmptyState)({ noDataState, noResultsState, errorDataState });
+    const hasNoItems = items.length === 0;
+    const { selectedItemIndex, selectedItem } = (0, react_1.useMemo)(() => {
+        const result = {
+            selectedItemIndex: -1,
+            selectedItem: undefined,
+        };
+        if (!scrollToSelectedItem || !value) {
+            return result;
+        }
+        const selectedItem = isSelectionSingle ? flattenItems[value] : flattenItems[value[0]];
+        if (!selectedItem?.id) {
+            return result;
+        }
+        const allFocusFlattenItems = Object.values(focusFlattenItems);
+        const index = allFocusFlattenItems.findIndex(item => item.originalId === selectedItem.id);
+        if (index < 0) {
+            return result;
+        }
+        return {
+            selectedItemIndex: index,
+            selectedItem: allFocusFlattenItems[index],
+        };
+    }, [flattenItems, focusFlattenItems, isSelectionSingle, scrollToSelectedItem, value]);
+    // Реальная высота строки может превышать однострочный `ALL_SIZES[size]` (например, item с
+    // `description` — двухстрочный). Если estimateSize занижен, незамеренные строки оцениваются
+    // меньше реальных, и по мере прокрутки `measureElement` правит totalSize — контент «скачет».
+    // Меряем фактическую высоту первой отрисованной строки и используем как оценку для остальных:
+    // totalSize становится точным сразу, скачок пропадает. measureElement по-прежнему уточняет
+    // разнородные строки построчно.
+    const [measuredRowSize, setMeasuredRowSize] = (0, react_1.useState)(null);
+    const virtualizer = (0, react_virtual_1.useVirtualizer)({
+        count: itemsJSX.length,
+        // Зависимость на `scrollElementReady` заставляет виртуализатор перечитать scroll-элемент
+        // после инициализации OverlayScrollbars (когда `innerScrollRef.current` уже не null).
+        getScrollElement: () => (scroll && scrollElementReady ? innerScrollRef.current : null),
+        estimateSize: () => measuredRowSize ?? constants_2.ALL_SIZES[size],
+        enabled: virtualized,
+        overscan: 5, // Amount of elements in DOM before/after visible ones
+    });
+    const virtualItems = virtualizer.getVirtualItems();
+    // Сбрасываем измеренную оценку при смене size — однострочная база снова станет дефолтом
+    // до первого замера новой плотности.
+    (0, react_1.useEffect)(() => {
+        setMeasuredRowSize(null);
+    }, [size]);
+    // Замер реальной высоты первой строки после её отрисовки (до того, как пользователь начнёт
+    // скроллить). Один замер на size: как только оценка зафиксирована, эффект больше ничего не
+    // делает (measureElement продолжает уточнять разнородные строки построчно).
+    const hasRenderedRows = virtualItems.length > 0;
+    (0, utils_1.useLayoutEffect)(() => {
+        if (!virtualized || !scrollElementReady || measuredRowSize !== null || !hasRenderedRows) {
+            return;
+        }
+        const firstRow = innerScrollRef.current?.querySelector('[data-index]');
+        const height = firstRow?.offsetHeight;
+        if (height && Math.abs(height - constants_2.ALL_SIZES[size]) > 1) {
+            setMeasuredRowSize(height);
+        }
+    }, [virtualized, scrollElementReady, measuredRowSize, hasRenderedRows, size]);
+    (0, react_1.useEffect)(() => {
+        if (!scrollElementReady) {
+            return; // Scroll-элемент ещё не готов — измерять нечего, иначе фиксируем пустой кадр.
+        }
+        if (scrollState.measured) {
+            return;
+        }
+        virtualizer.measure();
+        setScrollState(prevState => ({
+            ...prevState,
+            measured: true,
+        }));
+    }, [scrollElementReady, scrollState.measured, virtualizer]);
+    const isScrollToItemEnabled = scroll && scrollToSelectedItem && virtualized;
+    (0, react_1.useEffect)(() => {
+        if (isScrollToItemEnabled) {
+            if (!scrollState.measured) {
+                return; // Not measured yet
+            }
+            if (selectedItemIndex < 0 || !selectedItem) {
+                return; // Cannot scroll to non-existing item
+            }
+            if (scrollState.virtualizer === selectedItem.originalId) {
+                return; // No need to re-scroll to the same item during re-renders
+            }
+            if (selectedItem?.itemRef && innerScrollRef.current?.contains(selectedItem?.itemRef.current)) {
+                return; // No need to scroll to manually clicked item currently present in DOM
+            }
+            virtualizer.scrollToIndex(selectedItemIndex, { align: 'center' });
+            setScrollState(prevState => ({
+                ...prevState,
+                virtualizer: selectedItem.originalId,
+            }));
+        }
+    }, [isScrollToItemEnabled, scrollState, selectedItem, selectedItemIndex, virtualizer]);
+    const isTargetPresentInDom = Boolean(selectedItem?.itemRef?.current);
+    (0, react_1.useEffect)(() => {
+        if (!selectedItem) {
+            return;
+        }
+        if (scrollState.virtualizer === null) {
+            return; // Not scrolled by virtualizer yet, no need for additional scroll
+        }
+        if (!isTargetPresentInDom) {
+            return; // Target element is not present in DOM yet, additional scroll does not work without it
+        }
+        if (scrollState.virtualizer === scrollState.browser) {
+            return; // Virtualizer scroll has not been executed => no need for additional scroll
+        }
+        centerItemInScrollContainer(innerScrollRef.current, selectedItem.itemRef?.current ?? null);
+        setScrollState(prevState => ({
+            ...prevState,
+            browser: selectedItem.originalId,
+        }));
+    }, [scrollState, selectedItem, isTargetPresentInDom, selectedItemIndex]);
+    // Non-virtualized: центрируем выбранный элемент в собственном scroll-контейнере при смене
+    // `selection` (на первом маунте это делает `onScrollInitialized`). Виртуализованный путь
+    // ведут эффекты выше через виртуализатор, поэтому здесь только `!virtualized`. Хелпер тот
+    // же `centerItemInScrollContainer` — обычному листу отдельный виртуализатор не нужен.
+    (0, react_1.useEffect)(() => {
+        if (virtualized || !scroll || !scrollToSelectedItem || !scrollElementReady) {
+            return;
+        }
+        const container = innerScrollRef.current;
+        const item = selectedItem?.itemRef?.current ?? null;
+        if (!container || !item) {
+            return;
+        }
+        centerItemInScrollContainer(container, item);
+    }, [virtualized, scroll, scrollToSelectedItem, scrollElementReady, selectedItem]);
+    const loadingJSX = (0, react_1.useMemo)(() => loading && ((0, jsx_runtime_1.jsx)("div", { role: 'status', tabIndex: -1, className: styles_module_scss_2.default.loader, "data-size": size, "data-no-items": hasNoItems || undefined, "data-test-id": constants_1.TEST_IDS.loader, children: (0, jsx_runtime_1.jsx)(loader_1.Spinner, { size: constants_2.SPINNER_SIZE_MAP[size] }) })), [hasNoItems, loading, size]);
+    const content = (0, react_1.useMemo)(() => {
+        const itemsBody = virtualized ? ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_2.default.virtualizedContainer, style: { height: virtualizer.getTotalSize() }, tabIndex: -1, children: virtualItems.map(virtualRow => ((0, jsx_runtime_1.jsx)("div", { "data-index": virtualRow.index, ref: virtualizer.measureElement, tabIndex: -1, className: styles_module_scss_2.default.virtualizedPositionBox, style: {
+                    transform: `translateY(${virtualRow.start}px)`,
+                }, children: itemsJSX[virtualRow.index] }, virtualRow.key))) })) : (itemsJSX);
+        // Содержимое `DragOverlay`: копия строки (`SimpleItemOverlay`) либо заголовка группы
+        // (`SimpleGroupBlockOverlay`) — по типу активного элемента.
+        let dragOverlayContent = null;
+        if (activeOverlayItem && (0, Items_1.isSimpleItem)(activeOverlayItem)) {
+            dragOverlayContent = (0, jsx_runtime_1.jsx)(SimpleItem_1.SimpleItemOverlay, { ...activeOverlayItem });
+        }
+        else if (activeOverlayItem && (0, Items_1.isGroupItem)(activeOverlayItem)) {
+            const rows = (activeOverlayItem.allChildIds ?? [])
+                .map(rowId => flattenItems[rowId])
+                .filter((row) => (0, Items_1.isSimpleItem)(row));
+            dragOverlayContent = ((0, jsx_runtime_1.jsx)(SimpleItem_1.SimpleGroupBlockOverlay, { size: size, rows: rows, label: activeOverlayItem.label, beforeContent: activeOverlayItem.beforeContent, truncate: activeOverlayItem.truncate, divider: activeOverlayItem.divider, groupVariant: activeOverlayItem.groupVariant }));
+        }
+        // `SortableContext`/`DndContext` — чистые провайдеры контекста, не рендерят DOM-узлов,
+        // поэтому оборачивание всего блока (включая loader/empty-state) безопасно и не меняет
+        // разметку `<ul>`.
+        const body = onDragEnd ? ((0, jsx_runtime_1.jsxs)(core_1.DndContext, { sensors: sensors, collisionDetection: collisionDetection, measuring: measuringConfig, onDragStart: handleDragStart, onDragEnd: handleDragEnd, onDragCancel: handleDragCancel, children: [(0, jsx_runtime_1.jsx)(sortable_1.SortableContext, { items: sortableIds ?? [], strategy: sortable_1.verticalListSortingStrategy, children: itemsBody }), (0, utils_1.isBrowser)() &&
+                    (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)(core_1.DragOverlay, { dropAnimation: null, children: dragOverlayContent }), portalRoot.current ?? document.body)] })) : (itemsBody);
+        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [body, loadingJSX, (0, jsx_runtime_1.jsx)(helperComponents_1.ListEmptyState, { loading: loading, dataError: dataError, emptyStates: emptyStates, hasNoItems: hasNoItems, dataFiltered: dataFiltered ?? Boolean(search?.value), size: size })] }));
+    }, [
+        activeOverlayItem,
+        collisionDetection,
+        dataError,
+        dataFiltered,
+        emptyStates,
+        flattenItems,
+        handleDragCancel,
+        handleDragEnd,
+        handleDragStart,
+        hasNoItems,
+        itemsJSX,
+        loading,
+        loadingJSX,
+        onDragEnd,
+        portalRoot,
+        search?.value,
+        sensors,
+        size,
+        sortableIds,
+        virtualItems,
+        virtualized,
+        virtualizer,
+    ]);
+    const onScrollInitialized = (0, react_1.useCallback)(() => {
+        // OverlayScrollbars инициализирован — ref указывает на viewport. Поднимаем флаг,
+        // чтобы виртуализатор перечитал scroll-элемент и сделал первый корректный замер.
+        setScrollElementReady(true);
+        if (!selectedItem) {
+            return;
+        }
+        centerItemInScrollContainer(innerScrollRef.current, selectedItem?.itemRef?.current ?? null);
+    }, [selectedItem]);
+    const listJSX = ((0, jsx_runtime_1.jsxs)("ul", { className: (0, classnames_1.default)(styles_module_scss_1.default.listContainer, className), ref: ref, onKeyDown: onKeyDown, tabIndex: tabIndex, onFocus: onFocus, onBlur: onBlur, "data-active": active || undefined, role: 'menu', ...(0, utils_1.extractSupportProps)(props), children: [header && ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_2.default.header, "data-divider": headerDivider || undefined, onFocus: utils_2.stopPropagation, children: header })), (pinTopItemsPresent || search) && ((0, jsx_runtime_1.jsxs)(Items_1.PinTopGroupItem, { children: [search && (0, jsx_runtime_1.jsx)(Items_1.SearchItem, { search: search, ...searchItem }), pinTopItemsPresent && itemsPinTopJSX] })), scroll ? ((0, jsx_runtime_1.jsxs)(scroll_1.Scroll, { className: (0, classnames_1.default)({
+                    [styles_module_scss_1.default.scrollContainerS]: scroll && limitedScrollHeight && size === 's',
+                    [styles_module_scss_1.default.scrollContainerM]: scroll && limitedScrollHeight && size === 'm',
+                    [styles_module_scss_1.default.scrollContainerL]: scroll && limitedScrollHeight && size === 'l',
+                }, scrollContainerClassName), barHideStrategy: barHideStrategy, size: 's', ref: (0, merge_refs_1.default)(innerScrollRef, scrollContainerRef), untouchableScrollbars: untouchableScrollbars, onScroll: onScroll, onInitialized: onScrollInitialized, children: [content, (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_2.default.scrollStub, ref: scrollRef })] })) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: content })), pinBottomItemsPresent && (0, jsx_runtime_1.jsx)(Items_1.PinBottomGroupItem, { children: itemsPinBottomJSX }), footer && ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_2.default.footer, "data-divider": footerDivider || undefined, onFocus: utils_2.stopPropagation, children: footer }))] }));
+    if (!nested) {
+        return listJSX;
+    }
+    return ((0, jsx_runtime_1.jsx)("li", { className: styles_module_scss_2.default.nestedItem, role: 'menuitem', children: listJSX }));
+});

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

@@ -0,0 +1,7 @@
+import { SpinnerProps } from '@cloud-ru/ds-loader';
+import { Size } from '../../../types';
+export declare const LARGE_SIZE_HEIGHT = 40;
+export declare const MEDIUM_SIZE_HEIGHT = 32;
+export declare const SMALL_SIZE_HEIGHT = 24;
+export declare const ALL_SIZES: Record<Size, number>;
+export declare const SPINNER_SIZE_MAP: Record<Size, SpinnerProps['size']>;

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

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SPINNER_SIZE_MAP = exports.ALL_SIZES = exports.SMALL_SIZE_HEIGHT = exports.MEDIUM_SIZE_HEIGHT = exports.LARGE_SIZE_HEIGHT = void 0;
+// Фактические высоты однострочного item в compact-density (s=24 / m=32 / l=40). Оценка
+// виртуализатора должна совпадать с рендером: завышенный estimate даёт «скачок» скролла —
+// измеренные строки сжимают totalSize по мере прокрутки (MR!101).
+exports.LARGE_SIZE_HEIGHT = 40;
+exports.MEDIUM_SIZE_HEIGHT = 32;
+exports.SMALL_SIZE_HEIGHT = 24;
+exports.ALL_SIZES = {
+    m: exports.MEDIUM_SIZE_HEIGHT,
+    s: exports.SMALL_SIZE_HEIGHT,
+    l: exports.LARGE_SIZE_HEIGHT,
+};
+exports.SPINNER_SIZE_MAP = {
+    s: 'xs',
+    m: 'xs',
+    l: 's',
+};

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

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

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

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__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 = (this && this.__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("./ListPrivate"), exports);

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

@@ -0,0 +1,80 @@
+.loader{
+  display:flex;
+  align-items:center;
+  justify-content:center;
+}
+.loader[data-size=s]{
+  height:var(--sn-primitive-dimension-24, 24px);
+}
+.loader[data-size=s][data-no-items]{
+  min-width:calc(2 * 3 * var(--sn-primitive-dimension-24, 24px));
+  height:calc(3 * var(--sn-primitive-dimension-24, 24px));
+}
+.loader[data-size=m]{
+  height:var(--sn-primitive-dimension-32, 32px);
+}
+.loader[data-size=m][data-no-items]{
+  min-width:calc(2 * 3 * var(--sn-primitive-dimension-32, 32px));
+  height:calc(3 * var(--sn-primitive-dimension-32, 32px));
+}
+.loader[data-size=l]{
+  height:var(--sn-primitive-dimension-40, 40px);
+}
+.loader[data-size=l][data-no-items]{
+  min-width:calc(2 * 3 * var(--sn-primitive-dimension-40, 40px));
+  height:calc(3 * var(--sn-primitive-dimension-40, 40px));
+}
+.loader:focus-visible{
+  outline:var(--sn-theme-color-available-complementary, #000000) solid var(--sn-primitive-strokeWeight-strokeSemiBold, 2px);
+  outline-offset:calc(0px - var(--sn-primitive-strokeWeight-strokeSemiBold, 2px));
+}
+
+.scrollStub{
+  height:var(--sn-primitive-dimension-1, 1px);
+  margin-top:calc(0px - var(--sn-primitive-dimension-1, 1px));
+  background:transparent;
+}
+
+.nestedItem{
+  list-style-type:none;
+}
+
+.footer{
+  display:flex;
+  flex-direction:column;
+  box-sizing:border-box;
+  padding:var(--sn-popupPrivate-anatomy-dropdown-footer-paddingTop, var(--sn-primitive-dimension-8, 8px)) var(--sn-popupPrivate-anatomy-dropdown-footer-paddingHorizontal, var(--sn-primitive-dimension-8, 8px)) var(--sn-popupPrivate-anatomy-dropdown-footer-paddingBottom, var(--sn-primitive-dimension-4, 4px));
+}
+.footer[data-divider]{
+  border-top:var(--sn-primitive-strokeWeight-strokeRegular, 1px) solid var(--sn-theme-color-available-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-default-borderColor, rgba(159, 166, 198, 0.3019607843)));
+}
+
+.header{
+  display:flex;
+  flex-direction:column;
+  gap:var(--sn-popupPrivate-anatomy-dropdown-header-headlineWrapper-gap, var(--sn-primitive-dimension-4, 4px));
+  box-sizing:border-box;
+  padding:0 var(--sn-popupPrivate-anatomy-dropdown-header-headlineWrapper-paddingHorizontal, var(--sn-primitive-dimension-8, 8px)) var(--sn-popupPrivate-anatomy-dropdown-header-gap, var(--sn-primitive-dimension-4, 4px));
+}
+.header[data-divider]{
+  margin-bottom:var(--sn-popupPrivate-anatomy-dropdown-header-gap, var(--sn-primitive-dimension-4, 4px));
+  padding-bottom:var(--sn-popupPrivate-anatomy-dropdown-header-headlineWrapper-paddingHorizontal, var(--sn-primitive-dimension-8, 8px));
+  border-bottom:var(--sn-primitive-strokeWeight-strokeRegular, 1px) solid var(--sn-theme-color-available-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-default-borderColor, rgba(159, 166, 198, 0.3019607843)));
+}
+
+.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/contexts/CollapseProvider.d.ts

@@ -0,0 +1,17 @@
+import { ItemId } from '../../Items';
+export type CollapseLevelContextType = {
+    level?: number;
+};
+export declare const CollapseLevelContext: import("react").Context<CollapseLevelContextType>;
+export declare const useCollapseLevelContext: () => CollapseLevelContextType;
+export type CollapseContextType = {
+    openCollapseItems?: ItemId[];
+    toggleOpenCollapseItem?(id: ItemId): void;
+};
+export declare const CollapseContext: import("react").Context<CollapseContextType>;
+export declare const useCollapseContext: () => CollapseContextType;
+export type CollapseState = {
+    value?: ItemId[];
+    onChange?(value?: ItemId[]): void;
+    defaultValue?: ItemId[];
+};

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

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useCollapseContext = exports.CollapseContext = exports.useCollapseLevelContext = exports.CollapseLevelContext = void 0;
+const react_1 = require("react");
+exports.CollapseLevelContext = (0, react_1.createContext)({});
+const useCollapseLevelContext = () => (0, react_1.useContext)(exports.CollapseLevelContext);
+exports.useCollapseLevelContext = useCollapseLevelContext;
+exports.CollapseContext = (0, react_1.createContext)({});
+const useCollapseContext = () => (0, react_1.useContext)(exports.CollapseContext);
+exports.useCollapseContext = useCollapseContext;

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

@@ -0,0 +1,9 @@
+import { KeyboardEvent } from 'react';
+import { ItemId } from '../../Items';
+export type FocusListContextType = {
+    activeItemId?: ItemId;
+    forceUpdateActiveItemId?(itemId: ItemId): void;
+    handleListKeyDownFactory: (ids: ItemId[], expandedIds: ItemId[]) => (e: KeyboardEvent<HTMLElement>) => void;
+};
+export declare const FocusListContext: import("react").Context<FocusListContextType>;
+export declare const useFocusListContext: () => FocusListContextType;

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

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useFocusListContext = exports.FocusListContext = void 0;
+const react_1 = require("react");
+exports.FocusListContext = (0, react_1.createContext)({
+    handleListKeyDownFactory: () => () => { },
+});
+const useFocusListContext = () => (0, react_1.useContext)(exports.FocusListContext);
+exports.useFocusListContext = useFocusListContext;

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

@@ -0,0 +1,33 @@
+import { ReactNode } from 'react';
+import { ItemContentProps } from '../../../helperComponents';
+import { Size } from '../../../types';
+import { FlattenItem, FocusFlattenItem, ItemId } from '../../Items';
+type ContentRenderProps = {
+    id?: ItemId;
+    content?: ItemContentProps | ReactNode;
+    disabled?: boolean;
+};
+export type PublicListContextType = {
+    /** Размер списка */
+    size?: Size;
+    /** Отображать ли маркер у выбранного элемента списка */
+    marker?: boolean;
+    /**
+     * Рендер функция основного контента айтема
+     */
+    contentRender?(props: ContentRenderProps): ReactNode;
+    virtualized?: boolean;
+};
+export type PrivateListContextType = {
+    flattenItems: Record<string, FlattenItem>;
+    focusFlattenItems: Record<string, FocusFlattenItem>;
+    firstItemId?: ItemId;
+};
+type Child = {
+    children: ReactNode;
+};
+type ListContextType = PublicListContextType & PrivateListContextType;
+export declare const ListContext: import("react").Context<ListContextType>;
+export declare function useNewListContext(): ListContextType;
+export declare function NewListContextProvider({ children, size, marker, flattenItems, focusFlattenItems, contentRender, firstItemId, virtualized, }: ListContextType & Child): import("react/jsx-runtime").JSX.Element;
+export {};