@cloud-ru/ds-list 1.0.0

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

@@ -0,0 +1,168 @@
+import { TruncateStringProps } from '@cloud-ru/ds-truncate-string';
+import { WithSupportProps } from '@cloud-ru/ds-utils';
+import { FocusEvent, KeyboardEvent, MouseEvent, ReactNode, RefObject } from 'react';
+import { ITEM_TYPE } from '../../constants';
+import { ItemContentProps } from '../../helperComponents';
+import { ItemType, ScrollProps } from '../../types';
+/** Идентификатор элемента списка */
+export type ItemId = string | number;
+type ItemContent = ItemContentProps;
+export type BaseItem = WithSupportProps<{
+    /**
+     * Слот до основного контента
+     * @type ReactElement
+     */
+    beforeContent?: ReactNode;
+    /**
+     * Слот после основного контента
+     * @type ReactElement
+     */
+    afterContent?: ReactNode;
+    /**
+     * Основной контент айтема
+     */
+    content?: ItemContent | ReactNode;
+    /** Колбек обработки клика */
+    onClick?(e: MouseEvent<HTMLElement>): void;
+    /** Колбек обработки нажатия кнопки мыши */
+    onMouseDown?(e: MouseEvent<HTMLElement>): void;
+    /** Колбек обработки нажатия клавиши */
+    onKeyDown?(e: KeyboardEvent<HTMLElement>): void;
+    /** Колбек обработки фокуса */
+    onFocus?(e: FocusEvent<HTMLElement>): void;
+    /** Колбек обработки блюра */
+    onBlur?(e: FocusEvent<HTMLElement>): void;
+    /** Уникальный идентификатор */
+    id?: ItemId;
+    /** Флаг неактивности элемента */
+    disabled?: boolean;
+    /** Скрыть элемент из списка (не рендерится и выпадает из навигации) */
+    hidden?: boolean;
+    /** Ссылка на DOM-элемент айтема */
+    itemRef?: RefObject<HTMLElement>;
+    /** CSS-класс */
+    className?: string;
+    /**
+     * Флаг отображения отключения реакции на любое css состояние (hover/focus и тд)
+     * <br>
+     * Так же элемент пропадает из навигации с клавиатуры, и не может быть выбран (selection)
+     */
+    inactive?: boolean;
+    /**
+     * Флаг отображения состояния выбранного элемента через switch
+     */
+    switch?: boolean;
+    /**
+     * Флаг отображения иконки у чекбоксов
+     */
+    showSwitchIcon?: boolean;
+    /** Рендер-обёртка вокруг айтема (например, для проксирования в `Tooltip`/`Link`) */
+    itemWrapRender?(item: ReactNode): ReactNode;
+    /** Управляемое состояние выбранности айтема */
+    checked?: boolean;
+}>;
+type BaseItemWithoutNonGroup = Omit<BaseItem, 'switch' | 'inactive'>;
+export type Item = BaseItem | AccordionItem | NextListItem | GroupItem | GroupSelectItem;
+export type AccordionItem = BaseItemWithoutNonGroup & {
+    items: Item[];
+    type: typeof ITEM_TYPE.Collapse;
+};
+export type NextListItem = BaseItemWithoutNonGroup & ScrollProps & {
+    items: Item[];
+    type: typeof ITEM_TYPE.NextList;
+    /** Колбек смены состояния вложенного списка (открыт/закрыт) */
+    onSublistOpenChanged?(open: boolean, id?: ItemId): void;
+    /** Состояние загрузки вложенного списка — показывается спиннер вместо элементов */
+    loading?: boolean;
+    /** Загрузка вложенного списка завершилась ошибкой — показывается `errorDataState` */
+    dataError?: boolean;
+    /** Вложенный список отфильтрован — пустой результат показывает `noResultsState`, а не `noDataState` */
+    dataFiltered?: boolean;
+    /** Сторона, с которой раскрывается вложенный список относительно элемента */
+    placement?: 'right-start' | 'left-start' | 'left' | 'right' | 'left-end' | 'right-end';
+};
+type CommonGroupItem = {
+    /** Заголовок группы */
+    label?: string;
+    /** Слот иконки слева от label. */
+    beforeContent?: ReactNode;
+    /** Настройки усечения длинного заголовка группы */
+    truncate?: {
+        variant?: TruncateStringProps['variant'];
+    };
+    /** Визуальный стиль заголовка группы */
+    groupVariant?: 'subtitle' | 'subtitleTertiary';
+    /** Скрыть группу из списка */
+    hidden?: boolean;
+    /** Показать разделитель над группой */
+    divider?: boolean;
+};
+export type GroupItem = CommonGroupItem & {
+    items: Item[];
+    type: typeof ITEM_TYPE.Group;
+};
+export type GroupSelectItem = CommonGroupItem & {
+    items: Item[];
+    type: typeof ITEM_TYPE.GroupSelect;
+    selectButtonLabel?: string;
+    id?: ItemId;
+    itemRef?: RefObject<HTMLElement>;
+};
+type RequiredFields<T, K extends keyof T> = Required<Pick<T, K>> & Omit<T, K>;
+export type Flatten<T, K extends keyof T> = RequiredFields<T, K>;
+export type CommonFlattenProps = {
+    items: ItemId[];
+    allChildIds: ItemId[];
+};
+export type FlattenBaseItem = Flatten<BaseItem, 'id'>;
+export type FlattenNextListItem = Flatten<Omit<NextListItem, 'items'>, 'id'>;
+export type FlattenGroupListItem = Omit<GroupItem, 'items'> & {
+    id: ItemId;
+};
+export type FlattenGroupSelectListItem = Flatten<Omit<GroupSelectItem, 'items'>, 'id'>;
+export type FlattenAccordionItem = Flatten<Omit<AccordionItem, 'items'>, 'id'>;
+/**
+ * Строка `List`/`Droplist` в режиме drag&drop-переупорядочивания (проп `onItemsReorder`) —
+ * облегчённый аналог `BaseItem` без `type`-дискриминатора и без вложенности: не поддерживает
+ * `collapse`/`group-select`/`next-list`. `id` обязателен (нужен `@dnd-kit` как identity
+ * сортируемого элемента). Верхний уровень reorder-дерева описывает `ReorderItem` (строка или
+ * группа с заголовком); переупорядочивание идёт только среди «братьев» — строк одного уровня
+ * (внутри одной группы либо между строками без группы), перенос между группами не поддерживается,
+ * см. `reorderReorderItems`.
+ *
+ * `disabled` блокирует выбор, `Switch` и клик, но **не** ручку перетаскивания — порядок можно менять и у
+ * задизейбленных строк.
+ */
+export type SimpleItem = Flatten<BaseItem, 'id'>;
+/**
+ * Группа reorder-режима: заголовок (`label` и остальные поля `GroupItem`) + сортируемые строки
+ * `items`. Строки переставляются **внутри** группы, а сама группа переставляется среди других
+ * групп верхнего уровня (за ручку на заголовке) — поэтому у группы обязателен `id` (identity для
+ * `@dnd-kit`). Вложенность ограничена одним уровнем: в `items` только листовые `SimpleItem`.
+ */
+export type SimpleGroupItem = CommonGroupItem & {
+    /** Идентификатор группы — нужен `@dnd-kit` для переупорядочивания групп между собой. */
+    id: ItemId;
+    items: SimpleItem[];
+    type: typeof ITEM_TYPE.Group;
+};
+/** Верхнеуровневый элемент reorder-дерева (`onItemsReorder`): строка или группа с заголовком. */
+export type ReorderItem = SimpleItem | SimpleGroupItem;
+export type FlattenSimpleItem = FlattenBaseItem & CommonFlattenProps;
+export type FlattenItem = FlattenBaseItem | ((FlattenNextListItem | FlattenGroupListItem | FlattenAccordionItem | FlattenGroupSelectListItem | FlattenSimpleItem) & CommonFlattenProps);
+export type FocusFlattenItem = {
+    key: ItemId;
+    id: ItemId;
+    originalId: ItemId;
+    parentId?: ItemId;
+    itemRef?: RefObject<HTMLElement>;
+    type?: ItemType;
+    disabled?: boolean;
+} & CommonFlattenProps;
+export type ItemProps = Item;
+export type BaseItemProps = BaseItem;
+export type GroupItemProps = GroupItem;
+export type NextListItemProps = NextListItem;
+export type AccordionItemProps = AccordionItem;
+export type GroupSelectItemProps = GroupSelectItem;
+export {};

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

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

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

@@ -0,0 +1,52 @@
+import { ItemContentProps } from '../../helperComponents';
+import { AccordionItem, BaseItem, FlattenItem, FlattenSimpleItem, FocusFlattenItem, GroupItem, GroupSelectItem, Item, ItemId, NextListItem, ReorderItem, SimpleGroupItem, SimpleItem } from './types';
+type FlattenableItem = Item | SimpleItem;
+export declare function isBaseItem<ReturnType = BaseItem>(item: unknown): item is ReturnType;
+export declare function isAccordionItem<ReturnType = AccordionItem>(item: unknown): item is ReturnType;
+export declare function isNextListItem<ReturnType = NextListItem>(item: unknown): item is ReturnType;
+export declare function isGroupItem<ReturnType = GroupItem>(item: unknown): item is ReturnType;
+export declare function isGroupSelectItem<ReturnType = GroupSelectItem>(item: unknown): item is ReturnType;
+export declare function isSimpleItem<ReturnType = FlattenSimpleItem>(item: unknown): item is ReturnType;
+export declare function isReorderGroup(item: ReorderItem): item is SimpleGroupItem;
+export declare function isReorderBaseItem(item: ReorderItem): item is SimpleItem;
+export declare function isContentItem(item: unknown): item is ItemContentProps;
+/**
+ * Примитивный `content` (строка/число) — это шорткат для `{ label: content }`:
+ * такой айтем рендерится через `ItemContent` и получает размерную высоту строки
+ * (`min-height` по `size`), а не схлопывается до высоты текста, как произвольный ReactNode.
+ */
+export declare function isPrimitiveContent(item: unknown): item is string | number;
+export declare const isBaseItemProps: typeof isBaseItem;
+export declare const isAccordionItemProps: typeof isAccordionItem;
+export declare const isNextListItemProps: typeof isNextListItem;
+export declare const isGroupItemProps: typeof isGroupItem;
+export declare const isGroupSelectItemProps: typeof isGroupSelectItem;
+type KindFlattenItemsProps = {
+    items: FlattenableItem[];
+    prefix?: ItemId;
+    parentId?: ItemId;
+    /**
+     * Дерево — `SimpleItem[]` в режиме drag&drop-переупорядочивания (`onItemsReorder`): каждый
+     * узел (лист и контейнер) размечается `type: ITEM_TYPE.Simple`, чтобы `getRenderItems` рендерил
+     * его через сортируемую обёртку, а `extractActiveItems` — считал всегда «развёрнутым».
+     */
+    sortable?: boolean;
+};
+export declare function kindFlattenItems({ items, prefix, parentId, sortable }: KindFlattenItemsProps): {
+    focusCloseChildIds: ItemId[];
+    allChildIds: ItemId[];
+    flattenItems: Record<string, FlattenItem>;
+    focusFlattenItems: Record<string, FocusFlattenItem>;
+};
+type ExtractActiveItemsProps = {
+    focusFlattenItems: Record<string, FocusFlattenItem>;
+    focusCloseChildIds: ItemId[];
+    openCollapseItems: ItemId[];
+    isSelectionMultiple?: boolean;
+};
+type ExtractActiveItemsReturnType = {
+    ids: ItemId[];
+    expandedIds: ItemId[];
+};
+export declare function extractActiveItems({ focusFlattenItems, focusCloseChildIds, openCollapseItems, isSelectionMultiple, }: ExtractActiveItemsProps): ExtractActiveItemsReturnType;
+export {};

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

@@ -0,0 +1,218 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isGroupSelectItemProps = exports.isGroupItemProps = exports.isNextListItemProps = exports.isAccordionItemProps = exports.isBaseItemProps = void 0;
+exports.isBaseItem = isBaseItem;
+exports.isAccordionItem = isAccordionItem;
+exports.isNextListItem = isNextListItem;
+exports.isGroupItem = isGroupItem;
+exports.isGroupSelectItem = isGroupSelectItem;
+exports.isSimpleItem = isSimpleItem;
+exports.isReorderGroup = isReorderGroup;
+exports.isReorderBaseItem = isReorderBaseItem;
+exports.isContentItem = isContentItem;
+exports.isPrimitiveContent = isPrimitiveContent;
+exports.kindFlattenItems = kindFlattenItems;
+exports.extractActiveItems = extractActiveItems;
+const react_1 = require("react");
+const constants_1 = require("../../constants");
+const utils_1 = require("../../utils");
+function isRecord(item) {
+    return typeof item === 'object' && item !== null;
+}
+function isBaseItem(item) {
+    return isRecord(item) && !('items' in item);
+}
+function isAccordionItem(item) {
+    return isRecord(item) && 'items' in item && item['type'] === constants_1.ITEM_TYPE.Collapse;
+}
+function isNextListItem(item) {
+    return isRecord(item) && 'items' in item && item['type'] === constants_1.ITEM_TYPE.NextList;
+}
+function isGroupItem(item) {
+    return isRecord(item) && 'items' in item && item['type'] === constants_1.ITEM_TYPE.Group;
+}
+function isGroupSelectItem(item) {
+    return isRecord(item) && 'items' in item && item['type'] === constants_1.ITEM_TYPE.GroupSelect;
+}
+// В отличие от остальных `is<Kind>Item`, не требует `'items' in item` — `Simple`-айтемы без
+// вложенности (листья) тоже размечаются `type: ITEM_TYPE.Simple` в `kindFlattenItems`.
+function isSimpleItem(item) {
+    return isRecord(item) && item['type'] === constants_1.ITEM_TYPE.Simple;
+}
+// Гарды для «сырого» дерева reorder-режима (payload `onItemsReorder`): группа `SimpleGroupItem`
+// несёт `type: Group`, строка `SimpleItem` — без `type`. Отличаются от `isSimpleItem` (он смотрит
+// `type: Simple`, проставляемый только при уплощении через `kindFlattenItems`), поэтому на payload'е
+// `onItemsReorder` использовать нужно именно эти.
+function isReorderGroup(item) {
+    return 'type' in item && item.type === constants_1.ITEM_TYPE.Group;
+}
+function isReorderBaseItem(item) {
+    return !isReorderGroup(item);
+}
+function isContentItem(item) {
+    return isRecord(item) && item['label'] !== undefined;
+}
+/**
+ * Примитивный `content` (строка/число) — это шорткат для `{ label: content }`:
+ * такой айтем рендерится через `ItemContent` и получает размерную высоту строки
+ * (`min-height` по `size`), а не схлопывается до высоты текста, как произвольный ReactNode.
+ */
+function isPrimitiveContent(item) {
+    return typeof item === 'string' || typeof item === 'number';
+}
+// Публичные дискриминаторы пропсов айтемов (документированы в README, потребитель
+// сужает union `Item` по типу). Внутри пакета используются короткие формы `isBaseItem`
+// и т.д.; наружу отдаём `is<Kind>Props`, как в публичном API типов (`<Kind>Props`).
+exports.isBaseItemProps = isBaseItem;
+exports.isAccordionItemProps = isAccordionItem;
+exports.isNextListItemProps = isNextListItem;
+exports.isGroupItemProps = isGroupItem;
+exports.isGroupSelectItemProps = isGroupSelectItem;
+function kindFlattenItems({ items, prefix, parentId, sortable }) {
+    const flattenItems = {};
+    const focusFlattenItems = {};
+    function flatten({ item, idx, prefix, parentId = constants_1.ITEM_PREFIXES.default }) {
+        const autoId = prefix !== undefined ? (0, utils_1.getItemAutoId)(prefix, idx) : String(idx);
+        // В reorder-режиме (`sortable`) группа несёт собственный `id` (нужен `@dnd-kit` как identity
+        // для перестановки групп) — используется он. Обычная (не сортируемая) группа `id` не имеет — `autoId`.
+        const itemId = (isGroupItem(item) && !sortable ? undefined : item.id) ?? autoId;
+        if (isBaseItem(item)) {
+            // `type` добавляется в `flattenItems` только в `sortable`-режиме: другой код (например,
+            // `useGroupItemSelection`) отличает базовые айтемы от контейнерных через `!('type' in item)`,
+            // а не по значению — присутствие ключа `type: undefined` уже сломало бы эту проверку.
+            flattenItems[itemId] = {
+                ...item,
+                items: [],
+                allChildIds: [],
+                id: itemId,
+                ...(sortable ? { type: constants_1.ITEM_TYPE.Simple } : {}),
+            };
+            focusFlattenItems[autoId] = {
+                // React key = `itemId`, не `autoId`. `autoId` — позиционный путь в focus-дереве
+                // (`default-0`, `default-1`, …): при `onItemsReorder` путь остаётся на месте, а данные
+                // под ним меняются. Ключ по позиции оставляет тот же инстанс (`Switch` и т.п.) в слоте
+                // и проигрывает transition на смене `checked` — `Switch` визуально «переезжает».
+                key: itemId,
+                originalId: itemId,
+                id: autoId,
+                // `inactive` элемент выпадает из клавиатурной навигации наравне с `disabled`
+                // (см. JSDoc `BaseItem.inactive`). Гейтит только nav/bulk-select через
+                // `extractActiveItems`; рендерный `disabled` в `flattenItems` остаётся исходным.
+                disabled: item.disabled || item.inactive,
+                parentId,
+                items: [],
+                allChildIds: [],
+                itemRef: item.itemRef || (0, react_1.createRef)(),
+                type: sortable ? constants_1.ITEM_TYPE.Simple : undefined,
+            };
+            return { id: itemId, children: [itemId], autoId, focusChildren: [autoId] };
+        }
+        let allChildIds = [];
+        let allFocusChildIds = [];
+        const closeChildIds = [];
+        const autoChildIds = [];
+        const { items, ...rest } = item;
+        const childActiveParent = isGroupItem(item) ? (parentId ?? constants_1.ITEM_PREFIXES.default) : autoId;
+        const filteredItems = items.filter(item => !item.hidden);
+        for (let idx = 0; idx < filteredItems.length; idx++) {
+            const { id, children, autoId, focusChildren } = flatten({
+                item: filteredItems[idx],
+                idx,
+                prefix: itemId,
+                parentId: childActiveParent,
+            });
+            autoChildIds.push(autoId);
+            closeChildIds.push(id);
+            allChildIds = allChildIds.concat(children);
+            allFocusChildIds = allFocusChildIds.concat(focusChildren);
+        }
+        const children = [...new Set(allChildIds.concat(closeChildIds))];
+        const focusChildren = [...new Set(allFocusChildIds.concat(autoChildIds))];
+        flattenItems[itemId] = {
+            ...rest,
+            id: itemId,
+            items: [],
+            allChildIds: children,
+        };
+        // При `sortable` дерево в рантайме целиком `SimpleItem[]`, но статический тип этого не выражает
+        // (структурно совпадает с `BaseItem`) — отсюда каст к `SimpleItem` за `disabled`.
+        const containerDisabled = sortable
+            ? item.disabled
+            : (item.type === constants_1.ITEM_TYPE.Collapse || item.type === constants_1.ITEM_TYPE.NextList) && item.disabled;
+        focusFlattenItems[autoId] = {
+            // См. комментарий у листового `key` выше — стабильная identity, не позиционный autoId.
+            key: autoId + '_' + itemId,
+            originalId: itemId,
+            id: autoId,
+            parentId,
+            items: autoChildIds,
+            allChildIds: focusChildren,
+            disabled: containerDisabled,
+            type: item.type,
+            itemRef: !isGroupItem(item) ? (item.itemRef ?? (0, react_1.createRef)()) : undefined,
+        };
+        return { id: itemId, children, autoId, focusChildren };
+    }
+    const closeChildIds = [];
+    const autoChildIds = [];
+    let allChildIds = [];
+    const filteredItems = items.filter(item => !item.hidden);
+    for (let idx = 0; idx < filteredItems.length; idx++) {
+        const { id, children, autoId } = flatten({ item: filteredItems[idx], idx, prefix, parentId });
+        autoChildIds.push(autoId);
+        closeChildIds.push(id);
+        allChildIds.push(id);
+        allChildIds = allChildIds.concat(children);
+    }
+    const children = [...new Set(allChildIds)];
+    return {
+        focusCloseChildIds: autoChildIds,
+        allChildIds: children,
+        flattenItems,
+        focusFlattenItems,
+    };
+}
+function extractActiveItems({ focusFlattenItems, focusCloseChildIds, openCollapseItems, isSelectionMultiple, }) {
+    const ids = [];
+    const expandedIds = [];
+    function internalFn(focusCloseChildIds) {
+        focusCloseChildIds.forEach(id => {
+            const child = focusFlattenItems[id];
+            if (child.type === constants_1.ITEM_TYPE.Group) {
+                internalFn(child.items);
+                return;
+            }
+            // `Simple` (drag&drop-переупорядочивание, `onItemsReorder`) не имеет collapse-состояния —
+            // строка всегда «развёрнута»: сама участвует в навигации (если не disabled) и рекурсия в
+            // детей идёт безусловно, в отличие от `Collapse`/`NextList` ниже (гейт `openCollapseItems`).
+            if (child.type === constants_1.ITEM_TYPE.Simple) {
+                if (!child.disabled) {
+                    ids.push(child.id);
+                    internalFn(child.items);
+                }
+                return;
+            }
+            if (!child.disabled) {
+                if (child.type === constants_1.ITEM_TYPE.GroupSelect) {
+                    if (isSelectionMultiple) {
+                        ids.push(child.id);
+                    }
+                    internalFn(child.items);
+                    return;
+                }
+                ids.push(child.id);
+                if (child.type) {
+                    expandedIds.push(id);
+                    if (openCollapseItems.includes(child.originalId)) {
+                        internalFn(child.items);
+                    }
+                }
+            }
+        });
+    }
+    internalFn(focusCloseChildIds);
+    return {
+        ids,
+        expandedIds,
+    };
+}

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

@@ -0,0 +1,21 @@
+import { DroplistProps, ReorderableDroplistProps } from '../types';
+/**
+ * Адаптивный `Droplist`: раскладку берёт из `AdaptiveProvider` (контекст). На `mobile` рендерит
+ * список (size `l`) в `BottomSheet` (`MobileDroplist`), иначе — анкорный popover (`DesktopDroplist`).
+ * Слоты `label` / `actionButton` / `slotAfterTitle` / `onBackButtonClick` применяются только на mobile.
+ * Чтобы всегда был popover — `withLayoutType(Droplist, 'desktop')` либо вложенный
+ * `<AdaptiveProvider layoutType='desktop'>`. Пропа `layoutType` у компонента нет.
+ */
+export declare function Droplist(props: DroplistProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace Droplist {
+    var displayName: string;
+}
+/**
+ * Адаптивный `Droplist` с drag&drop-переупорядочиванием строк (см. `ReorderableList`): управляемый
+ * порядок через `onItemsReorder`, модель айтемов — `ReorderItem`, виртуализации нет. Раскладку и
+ * mobile-слоты берёт из `Droplist`.
+ */
+export declare function ReorderableDroplist(props: ReorderableDroplistProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace ReorderableDroplist {
+    var displayName: string;
+}

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

@@ -0,0 +1,36 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Droplist = Droplist;
+exports.ReorderableDroplist = ReorderableDroplist;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const adaptive_1 = require("@cloud-ru/ds-adaptive");
+const DesktopDroplist_1 = require("../../../helperComponents/DesktopDroplist");
+const MobileDroplist_1 = require("../../../helperComponents/MobileDroplist");
+/** @internal Общая реализация `Droplist`/`ReorderableDroplist`: свап поверхности по раскладке. */
+function DroplistImpl({ children, size = 'm', label, actionButton, slotAfterTitle, onBackButtonClick, ...rest }) {
+    const { layoutType } = (0, adaptive_1.useAdaptiveLayout)();
+    if ((0, adaptive_1.isMobileLayout)(layoutType)) {
+        return ((0, jsx_runtime_1.jsx)(MobileDroplist_1.MobileDroplist, { ...rest, label: label, actionButton: actionButton, slotAfterTitle: slotAfterTitle, onBackButtonClick: onBackButtonClick, children: children }));
+    }
+    return ((0, jsx_runtime_1.jsx)(DesktopDroplist_1.DesktopDroplist, { ...rest, size: size, children: children }));
+}
+/**
+ * Адаптивный `Droplist`: раскладку берёт из `AdaptiveProvider` (контекст). На `mobile` рендерит
+ * список (size `l`) в `BottomSheet` (`MobileDroplist`), иначе — анкорный popover (`DesktopDroplist`).
+ * Слоты `label` / `actionButton` / `slotAfterTitle` / `onBackButtonClick` применяются только на mobile.
+ * Чтобы всегда был popover — `withLayoutType(Droplist, 'desktop')` либо вложенный
+ * `<AdaptiveProvider layoutType='desktop'>`. Пропа `layoutType` у компонента нет.
+ */
+function Droplist(props) {
+    return (0, jsx_runtime_1.jsx)(DroplistImpl, { ...props });
+}
+Droplist.displayName = 'Droplist';
+/**
+ * Адаптивный `Droplist` с drag&drop-переупорядочиванием строк (см. `ReorderableList`): управляемый
+ * порядок через `onItemsReorder`, модель айтемов — `ReorderItem`, виртуализации нет. Раскладку и
+ * mobile-слоты берёт из `Droplist`.
+ */
+function ReorderableDroplist(props) {
+    return (0, jsx_runtime_1.jsx)(DroplistImpl, { ...props });
+}
+ReorderableDroplist.displayName = 'ReorderableDroplist';

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

@@ -0,0 +1,8 @@
+import { DropdownProps } from '@cloud-ru/ds-dropdown';
+export declare const DEFAULT_FALLBACK_PLACEMENTS: DropdownProps['fallbackPlacements'];
+/**
+ * Возврат фокуса/фокусировка списка откладывается на следующий тик (0ms),
+ * чтобы дождаться размонтирования/монтирования портала дроплиста.
+ */
+export declare const FOCUS_DEFERRAL_TIMEOUT = 0;
+export declare const DEFAULT_SIZE = "m";

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

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DEFAULT_SIZE = exports.FOCUS_DEFERRAL_TIMEOUT = exports.DEFAULT_FALLBACK_PLACEMENTS = void 0;
+exports.DEFAULT_FALLBACK_PLACEMENTS = ['top', 'right', 'bottom', 'left'];
+/**
+ * Возврат фокуса/фокусировка списка откладывается на следующий тик (0ms),
+ * чтобы дождаться размонтирования/монтирования портала дроплиста.
+ */
+exports.FOCUS_DEFERRAL_TIMEOUT = 0;
+exports.DEFAULT_SIZE = 'm';

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

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

package/dist/cjs/components/Lists/Droplist/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("./DropList"), exports);

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

@@ -0,0 +1,61 @@
+import { KeyboardEvent } from 'react';
+/** Список айтемов: base / collapse / group / next-list, с опциональной виртуализацией. */
+export declare const List: import("react").ForwardRefExoticComponent<{
+    'data-test-id'?: string;
+} & import("react").AriaAttributes & {
+    pinTop?: import("../..").Item[];
+    pinBottom?: import("../..").Item[];
+    footer?: import("react").ReactNode;
+    header?: import("react").ReactNode;
+    headerDivider?: boolean;
+    footerDivider?: boolean;
+    footerActiveElementsRefs?: import("react").RefObject<HTMLElement>[];
+    keyboardNavigationRef?: import("react").RefObject<{
+        focusItem(id: import("../..").ItemId): void;
+    }>;
+    search?: import("../../..").SearchState;
+    tabIndex?: number;
+    collapse?: import("../contexts").CollapseState;
+    className?: string;
+    loading?: boolean;
+    onKeyDown?(e: KeyboardEvent<HTMLElement>): void;
+    hasListInFocusChain?: boolean;
+    scrollToSelectedItem?: boolean;
+    scrollContainerClassName?: string;
+    limitedScrollHeight?: boolean;
+} & import("../contexts").SelectionState & Omit<import("../contexts").PublicListContextType, "virtualized"> & import("../../..").ScrollProps & import("../types").EmptyState & {
+    items: import("../..").Item[];
+    virtualized?: boolean;
+} & import("react").RefAttributes<HTMLElement>>;
+/**
+ * Список с drag&drop-переупорядочиванием строк за ручку слева. Управляемый: порядок не хранит,
+ * а отдаёт обновлённое дерево в `onItemsReorder`. Модель айтемов — `ReorderItem` (плоская строка
+ * либо группа с заголовком); `collapse`/`next-list`/`group-select` и виртуализация не поддержаны.
+ */
+export declare const ReorderableList: import("react").ForwardRefExoticComponent<{
+    'data-test-id'?: string;
+} & import("react").AriaAttributes & {
+    pinTop?: import("../..").Item[];
+    pinBottom?: import("../..").Item[];
+    footer?: import("react").ReactNode;
+    header?: import("react").ReactNode;
+    headerDivider?: boolean;
+    footerDivider?: boolean;
+    footerActiveElementsRefs?: import("react").RefObject<HTMLElement>[];
+    keyboardNavigationRef?: import("react").RefObject<{
+        focusItem(id: import("../..").ItemId): void;
+    }>;
+    search?: import("../../..").SearchState;
+    tabIndex?: number;
+    collapse?: import("../contexts").CollapseState;
+    className?: string;
+    loading?: boolean;
+    onKeyDown?(e: KeyboardEvent<HTMLElement>): void;
+    hasListInFocusChain?: boolean;
+    scrollToSelectedItem?: boolean;
+    scrollContainerClassName?: string;
+    limitedScrollHeight?: boolean;
+} & import("../contexts").SelectionState & Omit<import("../contexts").PublicListContextType, "virtualized"> & import("../../..").ScrollProps & import("../types").EmptyState & {
+    items: import("../..").ReorderItem[];
+    onItemsReorder(items: import("../..").ReorderItem[]): void;
+} & import("react").RefAttributes<HTMLElement>>;