@cloud-ru/ds-list 1.0.0

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

@@ -0,0 +1,295 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { closestCenter, DndContext, DragOverlay, KeyboardSensor, MeasuringStrategy, MouseSensor, pointerWithin, TouchSensor, useSensor, useSensors, } from '@dnd-kit/core';
+import { SortableContext, sortableKeyboardCoordinates, verticalListSortingStrategy } from '@dnd-kit/sortable';
+import { Spinner } from '@cloud-ru/ds-loader';
+import { usePortalContext } from '@cloud-ru/ds-portal-context';
+import { Scroll } from '@cloud-ru/ds-scroll';
+import { extractSupportProps, isBrowser, useLayoutEffect } from '@cloud-ru/ds-utils';
+import { useVirtualizer } from '@tanstack/react-virtual';
+import cn from 'classnames';
+import mergeRefs from 'merge-refs';
+import { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { DEFAULT_SIZE, TEST_IDS } from '../../../constants.js';
+import { ListEmptyState, useEmptyState } from '../../../helperComponents/index.js';
+import { stopPropagation } from '../../../utils.js';
+import { isGroupItem, isSimpleItem, PinBottomGroupItem, PinTopGroupItem, SearchItem, useRenderItems, } from '../../Items/index.js';
+import { SimpleGroupBlockOverlay, SimpleItemOverlay } from '../../Items/SimpleItem/index.js';
+import { useNewListContext, useSelectionContext } from '../contexts/index.js';
+import commonStyles from '../styles.module.css';
+import { ALL_SIZES, SPINNER_SIZE_MAP } from './constants.js';
+import styles from './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: 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;
+}
+export const ListPrivate = 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 = DEFAULT_SIZE, flattenItems, focusFlattenItems } = useNewListContext();
+    const { value, isSelectionSingle } = useSelectionContext();
+    // `onDragEnd`/`SortableContext` конфликтуют с виртуализатором: обе стороны применяют свой
+    // `transform` к строке (см. JSDoc `ListPrivateProps.onDragEnd`) — запрещено уже на уровне
+    // типов (`ListProps`), здесь рантайм-зеркало на случай прямого использования `ListPrivate`.
+    const virtualized = virtualizedProp && !onDragEnd;
+    const sensors = useSensors(useSensor(MouseSensor, draggingOptions), useSensor(TouchSensor, {}), useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }));
+    // Id перетаскиваемой строки — для рендера её копии в `DragOverlay`. Копия живёт в портале
+    // над страницей и не режется `overflow: hidden` контейнера `List` (исходная строка остаётся
+    // на месте «призраком»). `null`, когда перетаскивание не идёт.
+    const [activeDragId, setActiveDragId] = useState(null);
+    const handleDragStart = useCallback((event) => setActiveDragId(event.active.id), []);
+    const handleDragEnd = useCallback((event) => {
+        setActiveDragId(null);
+        onDragEnd?.(event);
+    }, [onDragEnd]);
+    const handleDragCancel = useCallback(() => setActiveDragId(null), []);
+    const activeOverlayItem = activeDragId != null ? flattenItems[activeDragId] : undefined;
+    // Переупорядочивание строго внутри одного sortable-контейнера: верхний уровень (строки без группы + сами
+    // группы — «братья») либо контейнер конкретной группы (её строки). Остаются только droppable
+    // того же контейнера, что и активный элемент (`container` в `data` ставят `SimpleItem`/
+    // `SimpleGroupBlock`).
+    const collisionDetection = 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 = pointerWithin({ ...args, droppableContainers });
+        if (pointerCollisions.length > 0) {
+            return pointerCollisions;
+        }
+        // Fallback для клавиатурного сенсора (у него нет координат указателя → `pointerWithin` пуст).
+        return 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 = usePortalContext();
+    const innerScrollRef = useRef(null);
+    // `@cloud-ru/ds-scroll` (OverlayScrollbars) разрешает свой ref в viewport-элемент только после
+    // инициализации инстанса. До этого `innerScrollRef.current` === null, и виртуализатор
+    // не получает scroll-элемент → рендерит пустой контейнер. Флаг поднимается из
+    // `onInitialized` и форсит повторный `measure()` уже с готовым viewport'ом.
+    const [scrollElementReady, setScrollElementReady] = useState(false);
+    const itemsJSX = useRenderItems(items);
+    const itemsPinTopJSX = useRenderItems(pinTop);
+    const itemsPinBottomJSX = useRenderItems(pinBottom);
+    const pinTopItemsPresent = Number(pinTop?.length) > 0;
+    const pinBottomItemsPresent = Number(pinBottom?.length) > 0;
+    const [scrollState, setScrollState] = useState({ virtualizer: null, browser: null, measured: false });
+    const emptyStates = useEmptyState({ noDataState, noResultsState, errorDataState });
+    const hasNoItems = items.length === 0;
+    const { selectedItemIndex, selectedItem } = 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] = useState(null);
+    const virtualizer = useVirtualizer({
+        count: itemsJSX.length,
+        // Зависимость на `scrollElementReady` заставляет виртуализатор перечитать scroll-элемент
+        // после инициализации OverlayScrollbars (когда `innerScrollRef.current` уже не null).
+        getScrollElement: () => (scroll && scrollElementReady ? innerScrollRef.current : null),
+        estimateSize: () => measuredRowSize ?? ALL_SIZES[size],
+        enabled: virtualized,
+        overscan: 5, // Amount of elements in DOM before/after visible ones
+    });
+    const virtualItems = virtualizer.getVirtualItems();
+    // Сбрасываем измеренную оценку при смене size — однострочная база снова станет дефолтом
+    // до первого замера новой плотности.
+    useEffect(() => {
+        setMeasuredRowSize(null);
+    }, [size]);
+    // Замер реальной высоты первой строки после её отрисовки (до того, как пользователь начнёт
+    // скроллить). Один замер на size: как только оценка зафиксирована, эффект больше ничего не
+    // делает (measureElement продолжает уточнять разнородные строки построчно).
+    const hasRenderedRows = virtualItems.length > 0;
+    useLayoutEffect(() => {
+        if (!virtualized || !scrollElementReady || measuredRowSize !== null || !hasRenderedRows) {
+            return;
+        }
+        const firstRow = innerScrollRef.current?.querySelector('[data-index]');
+        const height = firstRow?.offsetHeight;
+        if (height && Math.abs(height - ALL_SIZES[size]) > 1) {
+            setMeasuredRowSize(height);
+        }
+    }, [virtualized, scrollElementReady, measuredRowSize, hasRenderedRows, size]);
+    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;
+    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);
+    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` — обычному листу отдельный виртуализатор не нужен.
+    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 = useMemo(() => loading && (_jsx("div", { role: 'status', tabIndex: -1, className: styles.loader, "data-size": size, "data-no-items": hasNoItems || undefined, "data-test-id": TEST_IDS.loader, children: _jsx(Spinner, { size: SPINNER_SIZE_MAP[size] }) })), [hasNoItems, loading, size]);
+    const content = useMemo(() => {
+        const itemsBody = virtualized ? (_jsx("div", { className: styles.virtualizedContainer, style: { height: virtualizer.getTotalSize() }, tabIndex: -1, children: virtualItems.map(virtualRow => (_jsx("div", { "data-index": virtualRow.index, ref: virtualizer.measureElement, tabIndex: -1, className: styles.virtualizedPositionBox, style: {
+                    transform: `translateY(${virtualRow.start}px)`,
+                }, children: itemsJSX[virtualRow.index] }, virtualRow.key))) })) : (itemsJSX);
+        // Содержимое `DragOverlay`: копия строки (`SimpleItemOverlay`) либо заголовка группы
+        // (`SimpleGroupBlockOverlay`) — по типу активного элемента.
+        let dragOverlayContent = null;
+        if (activeOverlayItem && isSimpleItem(activeOverlayItem)) {
+            dragOverlayContent = _jsx(SimpleItemOverlay, { ...activeOverlayItem });
+        }
+        else if (activeOverlayItem && isGroupItem(activeOverlayItem)) {
+            const rows = (activeOverlayItem.allChildIds ?? [])
+                .map(rowId => flattenItems[rowId])
+                .filter((row) => isSimpleItem(row));
+            dragOverlayContent = (_jsx(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 ? (_jsxs(DndContext, { sensors: sensors, collisionDetection: collisionDetection, measuring: measuringConfig, onDragStart: handleDragStart, onDragEnd: handleDragEnd, onDragCancel: handleDragCancel, children: [_jsx(SortableContext, { items: sortableIds ?? [], strategy: verticalListSortingStrategy, children: itemsBody }), isBrowser() &&
+                    createPortal(_jsx(DragOverlay, { dropAnimation: null, children: dragOverlayContent }), portalRoot.current ?? document.body)] })) : (itemsBody);
+        return (_jsxs(_Fragment, { children: [body, loadingJSX, _jsx(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 = useCallback(() => {
+        // OverlayScrollbars инициализирован — ref указывает на viewport. Поднимаем флаг,
+        // чтобы виртуализатор перечитал scroll-элемент и сделал первый корректный замер.
+        setScrollElementReady(true);
+        if (!selectedItem) {
+            return;
+        }
+        centerItemInScrollContainer(innerScrollRef.current, selectedItem?.itemRef?.current ?? null);
+    }, [selectedItem]);
+    const listJSX = (_jsxs("ul", { className: cn(commonStyles.listContainer, className), ref: ref, onKeyDown: onKeyDown, tabIndex: tabIndex, onFocus: onFocus, onBlur: onBlur, "data-active": active || undefined, role: 'menu', ...extractSupportProps(props), children: [header && (_jsx("div", { className: styles.header, "data-divider": headerDivider || undefined, onFocus: stopPropagation, children: header })), (pinTopItemsPresent || search) && (_jsxs(PinTopGroupItem, { children: [search && _jsx(SearchItem, { search: search, ...searchItem }), pinTopItemsPresent && itemsPinTopJSX] })), scroll ? (_jsxs(Scroll, { className: cn({
+                    [commonStyles.scrollContainerS]: scroll && limitedScrollHeight && size === 's',
+                    [commonStyles.scrollContainerM]: scroll && limitedScrollHeight && size === 'm',
+                    [commonStyles.scrollContainerL]: scroll && limitedScrollHeight && size === 'l',
+                }, scrollContainerClassName), barHideStrategy: barHideStrategy, size: 's', ref: mergeRefs(innerScrollRef, scrollContainerRef), untouchableScrollbars: untouchableScrollbars, onScroll: onScroll, onInitialized: onScrollInitialized, children: [content, _jsx("div", { className: styles.scrollStub, ref: scrollRef })] })) : (_jsx(_Fragment, { children: content })), pinBottomItemsPresent && _jsx(PinBottomGroupItem, { children: itemsPinBottomJSX }), footer && (_jsx("div", { className: styles.footer, "data-divider": footerDivider || undefined, onFocus: stopPropagation, children: footer }))] }));
+    if (!nested) {
+        return listJSX;
+    }
+    return (_jsx("li", { className: styles.nestedItem, role: 'menuitem', children: listJSX }));
+});

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

@@ -0,0 +1,7 @@
+import { SpinnerProps } from '@cloud-ru/ds-loader';
+import { Size } from '../../../types.js';
+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/esm/components/Lists/ListPrivate/constants.js

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

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

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

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

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

package/dist/esm/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/esm/components/Lists/contexts/CollapseProvider.d.ts

@@ -0,0 +1,17 @@
+import { ItemId } from '../../Items/index.js';
+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/esm/components/Lists/contexts/CollapseProvider.js

@@ -0,0 +1,5 @@
+import { createContext, useContext } from 'react';
+export const CollapseLevelContext = createContext({});
+export const useCollapseLevelContext = () => useContext(CollapseLevelContext);
+export const CollapseContext = createContext({});
+export const useCollapseContext = () => useContext(CollapseContext);

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

@@ -0,0 +1,9 @@
+import { KeyboardEvent } from 'react';
+import { ItemId } from '../../Items/index.js';
+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/esm/components/Lists/contexts/FocusListProvider.js

@@ -0,0 +1,5 @@
+import { createContext, useContext } from 'react';
+export const FocusListContext = createContext({
+    handleListKeyDownFactory: () => () => { },
+});
+export const useFocusListContext = () => useContext(FocusListContext);

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

@@ -0,0 +1,33 @@
+import { ReactNode } from 'react';
+import { ItemContentProps } from '../../../helperComponents/index.js';
+import { Size } from '../../../types.js';
+import { FlattenItem, FocusFlattenItem, ItemId } from '../../Items/index.js';
+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 {};

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

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext, useMemo } from 'react';
+import { ITEM_PREFIXES } from '../../../constants.js';
+export const ListContext = createContext({
+    flattenItems: {},
+    focusFlattenItems: {},
+    firstItemId: ITEM_PREFIXES.default,
+});
+export function useNewListContext() {
+    return useContext(ListContext);
+}
+function extractListProps({ size, marker, flattenItems, focusFlattenItems, contentRender, firstItemId, virtualized, }) {
+    return { size, marker, contentRender, flattenItems, focusFlattenItems, firstItemId, virtualized };
+}
+export function NewListContextProvider({ children, size, marker, flattenItems, focusFlattenItems, contentRender, firstItemId, virtualized, }) {
+    const value = useMemo(() => extractListProps({ size, marker, flattenItems, focusFlattenItems, contentRender, firstItemId, virtualized }), [size, marker, flattenItems, focusFlattenItems, contentRender, firstItemId, virtualized]);
+    return _jsx(ListContext.Provider, { value: value, children: children });
+}

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

@@ -0,0 +1,6 @@
+export type OpenListContextType = {
+    closeDroplistOnItemClick?: boolean;
+    closeDroplist(): void;
+};
+export declare const OpenListContext: import("react").Context<OpenListContextType>;
+export declare const useOpenListContext: () => OpenListContextType;

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

@@ -0,0 +1,6 @@
+import { createContext, useContext } from 'react';
+export const OpenListContext = createContext({
+    closeDroplist: () => { },
+    closeDroplistOnItemClick: false,
+});
+export const useOpenListContext = () => useContext(OpenListContext);

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

@@ -0,0 +1,74 @@
+import { Dispatch, ReactNode, SetStateAction } from 'react';
+import { MODE } from '../../../constants.js';
+import { ItemId } from '../../Items/index.js';
+export type SelectionValue = ItemId | ItemId[];
+export type OnChangeHandler<T = SelectionValue> = (value: T) => void;
+export type SelectionSingleValueType = ItemId;
+export type SelectionSingleState = {
+    /** Начальное состояние */
+    defaultValue?: ItemId;
+    /** Controlled состояние */
+    value?: ItemId;
+    /** Controlled обработчик изменения состояния — получает выбранный `ItemId` */
+    onChange?: OnChangeHandler<ItemId>;
+    /** Режим выбора */
+    mode: typeof MODE.Single;
+};
+export type SelectionSingleProps = {
+    setValue?: Dispatch<SetStateAction<ItemId | undefined>>;
+    /** Внутренний toggle-обработчик: выбирает/снимает один элемент по id */
+    onChange?: OnChangeHandler<ItemId>;
+    /** Режим выбора single */
+    isSelectionSingle: true;
+    /** Режим выбора multi */
+    isSelectionMultiple: false;
+} & Omit<SelectionSingleState, 'onChange'>;
+export type SelectionMultipleState = {
+    /** Начальное состояние */
+    defaultValue?: ItemId[];
+    /** Controlled состояние */
+    value?: ItemId[];
+    /** Controlled обработчик изменения состояния — получает массив выбранных `ItemId[]` */
+    onChange?: OnChangeHandler<ItemId[]>;
+    /** Режим выбора */
+    mode: typeof MODE.Multiple;
+};
+export type SelectionMultipleProps = {
+    setValue?: Dispatch<SetStateAction<ItemId[] | undefined>>;
+    /** Внутренний toggle-обработчик: добавляет/убирает один элемент по id */
+    onChange?: OnChangeHandler<ItemId>;
+    /** Режим выбора single */
+    isSelectionSingle: false;
+    /** Режим выбора multi */
+    isSelectionMultiple: true;
+} & Omit<SelectionMultipleState, 'onChange'>;
+type SelectionNoneProps = {
+    mode?: typeof MODE.None;
+    value?: undefined;
+    onChange?: undefined;
+    setValue?: undefined;
+    defaultValue?: undefined;
+    isSelectionSingle?: undefined;
+    isSelectionMultiple?: undefined;
+};
+type SelectionContextType = Omit<SelectionNoneProps, 'defaultValue'> | Omit<SelectionSingleProps, 'defaultValue'> | Omit<SelectionMultipleProps, 'defaultValue'>;
+export type SelectionState = {
+    /**
+     * Настройки выбора элементов. `mode: 'single'` — один выбранный элемент (`value: ItemId`),
+     * `mode: 'multiple'` — множественный выбор (`value: ItemId[]`). Без `selection` выбора нет —
+     * клик вызывает только `onClick` элемента.
+     */
+    selection?: SelectionSingleState | SelectionMultipleState;
+};
+export declare const SelectionContext: import("react").Context<SelectionContextType>;
+export declare function isSelectionMultipleProps(props: object): props is SelectionMultipleState;
+export declare function isSelectionSingleProps(props: object): props is SelectionSingleState;
+type Child = {
+    children: ReactNode;
+};
+type SelectionProviderProps = SelectionSingleState | SelectionMultipleState | {
+    mode?: typeof MODE.None;
+};
+export declare function SelectionProvider({ children, ...props }: SelectionProviderProps & Child): import("react/jsx-runtime").JSX.Element;
+export declare function useSelectionContext(): SelectionContextType;
+export {};