@cloud-ru/ds-list 1.0.0

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

@@ -0,0 +1,2 @@
+import { NextListItemProps } from './types.js';
+export declare function NextListItem({ items, placement, id, scroll, scrollRef, disabled, onSublistOpenChanged, allChildIds, loading, dataError, dataFiltered, focusId, untouchableScrollbars, ...option }: NextListItemProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,68 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Dropdown } from '@cloud-ru/ds-dropdown';
+import { ChevronRightSVG } from '@cloud-ru/ds-icons/interface/system';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { ITEM_PREFIXES } from '../../../constants.js';
+import { useCollapseContext, useFocusListContext, useNewListContext, useSelectionContext } from '../../Lists/contexts/index.js';
+import { ListPrivate } from '../../Lists/ListPrivate/index.js';
+import { BaseItem } from '../BaseItem/index.js';
+import { useGroupItemSelection } from '../hooks.js';
+import { extractActiveItems, isNextListItem } from '../utils.js';
+import { FALLBACK_PLACEMENTS } from './constants.js';
+export function NextListItem({ items, placement = 'right-start', id, scroll, scrollRef, disabled, onSublistOpenChanged, allChildIds, loading = false, dataError = false, dataFiltered = false, focusId = id, untouchableScrollbars = false, ...option }) {
+    const { flattenItems, focusFlattenItems, virtualized } = useNewListContext();
+    const { value, isSelectionSingle, isSelectionMultiple } = useSelectionContext();
+    const { openCollapseItems = [] } = useCollapseContext();
+    const item = flattenItems[id];
+    const { ids, expandedIds } = useMemo(() => {
+        const { ids, expandedIds } = extractActiveItems({
+            focusCloseChildIds: items,
+            focusFlattenItems,
+            openCollapseItems,
+            isSelectionMultiple,
+        });
+        return { ids, expandedIds: expandedIds.concat([id]) };
+    }, [focusFlattenItems, id, isSelectionMultiple, items, openCollapseItems]);
+    const { handleListKeyDownFactory, activeItemId, forceUpdateActiveItemId } = useFocusListContext();
+    const [open, setOpen] = useState();
+    const handleListKeyDown = useCallback((e) => {
+        handleListKeyDownFactory(ids, expandedIds)(e);
+        if (e.key === 'ArrowLeft') {
+            forceUpdateActiveItemId?.(focusId);
+            setOpen(false);
+            e.stopPropagation();
+            return;
+        }
+    }, [handleListKeyDownFactory, ids, expandedIds, forceUpdateActiveItemId, focusId]);
+    const { indeterminate, checked: checkedProp, handleOnSelect, } = useGroupItemSelection({
+        items: isNextListItem(item) ? item.items : [],
+        id,
+        disabled,
+        allChildIds,
+    });
+    const handleOutsideClick = useCallback(() => {
+        forceUpdateActiveItemId?.(ITEM_PREFIXES.dropFocus);
+        setOpen(false);
+        return true;
+    }, [forceUpdateActiveItemId]);
+    const isOpen = useMemo(() => Boolean(!disabled && activeItemId && focusFlattenItems[focusId]?.allChildIds.includes(activeItemId)), [activeItemId, disabled, focusFlattenItems, focusId]);
+    const checked = Boolean((indeterminate && !open && isSelectionSingle && value && allChildIds.includes(value)) ||
+        (isSelectionMultiple && checkedProp));
+    useEffect(() => {
+        setOpen(open => open && isOpen);
+    }, [isOpen]);
+    const listRef = useRef(null);
+    const openSublist = useCallback(() => {
+        setOpen(true);
+        setTimeout(() => {
+            listRef.current?.focus();
+        }, 0);
+    }, []);
+    return (_jsx(Dropdown, { outsideClick: handleOutsideClick, fallbackPlacements: FALLBACK_PLACEMENTS, bodyPadding: false, content: _jsx(ListPrivate, { onKeyDown: handleListKeyDown, items: items, nested: true, scroll: scroll, virtualized: virtualized, tabIndex: 0, ref: listRef, onFocus: e => {
+                e.stopPropagation();
+                forceUpdateActiveItemId?.(ids[0]);
+            }, scrollRef: scrollRef, limitedScrollHeight: true, untouchableScrollbars: untouchableScrollbars, loading: loading, dataError: dataError, dataFiltered: dataFiltered }), trigger: 'hover', open: isOpen || open, onOpenChange: value => {
+            setOpen(value);
+            onSublistOpenChanged?.(value, id);
+        }, placement: placement, widthStrategy: 'auto', children: _jsx(BaseItem, { ...option, disabled: disabled, open: isOpen || open, expandIcon: _jsx(ChevronRightSVG, {}), id: id, isParentNode: true, indeterminate: indeterminate, checked: checked, onOpenNestedList: openSublist, onExpandIconClick: openSublist, onSelect: handleOnSelect }) }));
+}

package/dist/esm/components/Items/NextListItem/constants.d.ts

@@ -0,0 +1,2 @@
+import { DropdownProps } from '@cloud-ru/ds-dropdown';
+export declare const FALLBACK_PLACEMENTS: DropdownProps['fallbackPlacements'];

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

@@ -0,0 +1,10 @@
+export const FALLBACK_PLACEMENTS = [
+    'right',
+    'right-start',
+    'right-end',
+    'left',
+    'left-start',
+    'left-end',
+    'bottom',
+    'top',
+];

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

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

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

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

package/dist/esm/components/Items/NextListItem/types.d.ts

@@ -0,0 +1,4 @@
+import { CommonFlattenProps, FlattenNextListItem, ItemId } from '../types.js';
+export type NextListItemProps = Omit<FlattenNextListItem, 'type'> & CommonFlattenProps & {
+    focusId?: ItemId;
+};

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,7 @@
+import { ReactNode } from 'react';
+export declare function PinTopGroupItem({ children }: {
+    children: ReactNode;
+}): import("react/jsx-runtime").JSX.Element | null;
+export declare function PinBottomGroupItem({ children }: {
+    children: ReactNode;
+}): import("react/jsx-runtime").JSX.Element | null;

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

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Divider, VARIANT } from '@cloud-ru/ds-divider';
+import cn from 'classnames';
+import { TEST_IDS } from '../../../constants.js';
+import { useNewListContext } from '../../Lists/contexts/index.js';
+import styles from './styles.module.css';
+export function PinTopGroupItem({ children }) {
+    const { size = 'm' } = useNewListContext();
+    if (!children) {
+        return null;
+    }
+    return (_jsxs("div", { className: cn(styles.pinTopItem), "data-size": size, "data-test-id": TEST_IDS.pinTopGroupItem, children: [_jsx("div", { children: children }), _jsx(Divider, { variant: VARIANT.Regular })] }));
+}
+export function PinBottomGroupItem({ children }) {
+    const { size = 'm' } = useNewListContext();
+    if (!children) {
+        return null;
+    }
+    return (_jsxs("div", { className: cn(styles.pinBottomItem), "data-size": size, "data-test-id": TEST_IDS.pinBottomGroupItem, children: [_jsx(Divider, { variant: VARIANT.Regular }), _jsx("div", { children: children })] }));
+}

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

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

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

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

package/dist/esm/components/Items/PinGroupItem/styles.module.css

@@ -0,0 +1,12 @@
+.pinTopItem,
+.pinBottomItem{
+  display:flex;
+  flex-direction:column;
+  border:none;
+}
+.pinTopItem li,
+.pinTopItem ul,
+.pinBottomItem li,
+.pinBottomItem ul{
+  list-style-type:none;
+}

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

@@ -0,0 +1,17 @@
+import { FocusEvent, KeyboardEvent, RefObject } from 'react';
+import { SearchState } from '../../../types.js';
+export type SearchItemProps = {
+    search?: SearchState;
+    itemRef?: RefObject<HTMLElement>;
+    /**
+     * Доп. обработчик клавиш навигации по списку. Нужен, когда поле поиска вынесено
+     * из `<ul>` в шапку dropdown (topBar) и события клавиатуры больше не всплывают
+     * на `<ul>`-onKeyDown — DropList передаёт сюда `handleListKeyDown` (factory).
+     */
+    onNavKeyDown?(e: KeyboardEvent<HTMLElement>): void;
+    /** onFocus поля (синхронизация активного item, когда search вне `<ul>`). */
+    onFocus?(e: FocusEvent<HTMLInputElement>): void;
+    /** Рендер для шапки dropdown — без `.listItem`-обёртки. */
+    inTopBar?: boolean;
+};
+export declare function SearchItem({ search, itemRef, onNavKeyDown, onFocus, inTopBar }: SearchItemProps): import("react/jsx-runtime").JSX.Element | null;

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

@@ -0,0 +1,22 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { SearchPrivate } from '@cloud-ru/ds-search-private';
+import { preventScrollOnVerticalArrows } from '@cloud-ru/ds-utils';
+import { ITEM_PREFIXES, TEST_IDS } from '../../../constants.js';
+import { stopPropagation } from '../../../utils.js';
+import { useNewListContext } from '../../Lists/contexts/index.js';
+import styles from './styles.module.css';
+export function SearchItem({ search, itemRef, onNavKeyDown, onFocus, inTopBar }) {
+    // Размер поиска следует за размером айтемов списка (size из контекста), а не фиксирован 's'.
+    const { firstItemId, size = 'm' } = useNewListContext();
+    const handleKeyDown = (e) => {
+        // Поиск — текстовый input: гасим только Up/Down (навигация по списку), горизонтальные
+        // стрелки оставляем каретке.
+        preventScrollOnVerticalArrows(e);
+        search?.onKeyDown?.(e);
+        onNavKeyDown?.(e);
+    };
+    if (!search) {
+        return null;
+    }
+    return (_jsx("div", { className: styles.searchItem, "data-in-top-bar": inTopBar || undefined, "data-test-id": TEST_IDS.searchItem, children: _jsx(SearchPrivate, { size: size, tabIndex: ITEM_PREFIXES.search === firstItemId ? 0 : -1, onKeyDown: handleKeyDown, onFocus: onFocus ?? stopPropagation, ...search, ref: itemRef }) }));
+}

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

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

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

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

package/dist/esm/components/Items/SearchItem/styles.module.css

@@ -0,0 +1,13 @@
+.searchItem{
+  display:flex;
+  align-items:center;
+  box-sizing:border-box;
+  width:100%;
+  min-height:var(--sn-field-anatomy-size-s-fieldContainer-minHeight, var(--sn-density-size-s, var(--sn-primitive-dimension-48, 48px)));
+  padding:var(--sn-field-anatomy-size-s-fieldContainer-paddingVertical, var(--sn-density-spacing-control-container-vertical-s, var(--sn-primitive-dimension-6, 6px))) var(--sn-field-anatomy-size-s-fieldContainer-paddingRight, var(--sn-density-spacing-control-container-horizontal-s, var(--sn-primitive-dimension-12, 12px))) var(--sn-field-anatomy-size-s-fieldContainer-paddingVertical, var(--sn-density-spacing-control-container-vertical-s, var(--sn-primitive-dimension-6, 6px))) var(--sn-field-anatomy-size-s-fieldContainer-paddingLeft, var(--sn-density-spacing-control-container-horizontal-s, var(--sn-primitive-dimension-12, 12px)));
+}
+.searchItem:focus-within, .searchItem:focus-visible{
+  max-width:100%;
+  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));
+}

package/dist/esm/components/Items/SimpleItem/components/DragHandle/DragHandle.d.ts

@@ -0,0 +1,7 @@
+import { ButtonHTMLAttributes } from 'react';
+/**
+ * Ручка drag&drop строки/заголовка reorder-режима: кнопка с иконкой, `aria-label` и `data-test-id`.
+ * Живой вариант получает sortable-пропы `@dnd-kit` (`attributes`/`listeners`, `onMouseDown`/`onClick`,
+ * `NO_DRAG_ATTRIBUTE`) через `...rest`; статичная копия для `DragOverlay` — `OverlayDragHandle`.
+ */
+export declare function DragHandle(props: ButtonHTMLAttributes<HTMLButtonElement>): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/Items/SimpleItem/components/DragHandle/DragHandle.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { DragDropSVG } from '@cloud-ru/ds-icons/interface/system';
+import { TEST_IDS } from '../../../../../constants.js';
+import { listLocale } from '../../../../../locale/index.js';
+import styles from '../../styles.module.css';
+/**
+ * Ручка drag&drop строки/заголовка reorder-режима: кнопка с иконкой, `aria-label` и `data-test-id`.
+ * Живой вариант получает sortable-пропы `@dnd-kit` (`attributes`/`listeners`, `onMouseDown`/`onClick`,
+ * `NO_DRAG_ATTRIBUTE`) через `...rest`; статичная копия для `DragOverlay` — `OverlayDragHandle`.
+ */
+export function DragHandle(props) {
+    const { t } = listLocale.useTranslations();
+    return (_jsx("button", { type: 'button', "aria-label": t('list.dragHandle'), "data-test-id": TEST_IDS.dragHandle, className: styles.dragHandle, ...props, children: _jsx(DragDropSVG, {}) }));
+}

package/dist/esm/components/Items/SimpleItem/components/DragHandle/index.d.ts

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

package/dist/esm/components/Items/SimpleItem/components/DragHandle/index.js

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

package/dist/esm/components/Items/SimpleItem/components/OverlayDragHandle/OverlayDragHandle.d.ts

@@ -0,0 +1,2 @@
+/** Статичная ручка для копий строк/заголовков в `DragOverlay` (без sortable-обработчиков). */
+export declare function OverlayDragHandle(): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/Items/SimpleItem/components/OverlayDragHandle/OverlayDragHandle.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { DragHandle } from '../DragHandle/index.js';
+/** Статичная ручка для копий строк/заголовков в `DragOverlay` (без sortable-обработчиков). */
+export function OverlayDragHandle() {
+    return _jsx(DragHandle, { tabIndex: -1 });
+}

package/dist/esm/components/Items/SimpleItem/components/OverlayDragHandle/index.d.ts

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

package/dist/esm/components/Items/SimpleItem/components/OverlayDragHandle/index.js

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

package/dist/esm/components/Items/SimpleItem/components/SimpleGroupBlock/SimpleGroupBlock.d.ts

@@ -0,0 +1,19 @@
+import { ReactNode } from 'react';
+import { ItemId } from '../../../types.js';
+import { GroupHeaderContent } from '../../types.js';
+export type SimpleGroupBlockProps = GroupHeaderContent & {
+    /** Идентификатор группы — sortable identity для перестановки групп между собой. */
+    id: ItemId;
+    /** Id сортируемых строк группы для вложенного `SortableContext` (переупорядочивание строк внутри группы). */
+    rowIds: ItemId[];
+    /** Отрисованные строки группы (`SimpleItem`). */
+    children: ReactNode;
+};
+/**
+ * Сортируемый блок группы reorder-режима: заголовок с ручкой `@dnd-kit` + строки группы во
+ * вложенном `SortableContext`. Перетаскивается **вся группа целиком** (заголовок и строки едут
+ * вместе), потому что `useSortable` висит на контейнере блока. Строки при этом переставляются
+ * внутри своей группы (собственный `SortableContext`). Копию заголовка на время перетаскивания группы
+ * рендерит `SimpleGroupBlockOverlay` в `DragOverlay`.
+ */
+export declare function SimpleGroupBlock({ id, rowIds, children, ...separatorProps }: SimpleGroupBlockProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/Items/SimpleItem/components/SimpleGroupBlock/SimpleGroupBlock.js

@@ -0,0 +1,46 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useDndContext } from '@dnd-kit/core';
+import { SortableContext, useSortable, verticalListSortingStrategy } from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+import { NO_DRAG_ATTRIBUTE } from '@cloud-ru/ds-bottom-sheet';
+import { Separator } from '../../../../../helperComponents/index.js';
+import { stopPropagation } from '../../../../../utils.js';
+import { useNewListContext } from '../../../../Lists/contexts/index.js';
+import { REORDER_TOP_LEVEL } from '../../constants.js';
+import styles from '../../styles.module.css';
+import { animateLayoutChanges } from '../../utils.js';
+import { DragHandle } from '../DragHandle/index.js';
+/**
+ * Сортируемый блок группы reorder-режима: заголовок с ручкой `@dnd-kit` + строки группы во
+ * вложенном `SortableContext`. Перетаскивается **вся группа целиком** (заголовок и строки едут
+ * вместе), потому что `useSortable` висит на контейнере блока. Строки при этом переставляются
+ * внутри своей группы (собственный `SortableContext`). Копию заголовка на время перетаскивания группы
+ * рендерит `SimpleGroupBlockOverlay` в `DragOverlay`.
+ */
+export function SimpleGroupBlock({ id, rowIds, children, ...separatorProps }) {
+    const { size = 'm' } = useNewListContext();
+    const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
+        id,
+        // Группа — «брат» строк верхнего уровня: тот же контейнер, что и у строк без группы.
+        data: { container: REORDER_TOP_LEVEL },
+        animateLayoutChanges,
+    });
+    // Идёт ли переупорядочивание строки этой группы (а не самой группы). Оно жёстко ограничено
+    // своим контейнером (`container === id` в `data` строки, см. `SimpleItem`), поэтому границы
+    // блока группы подсвечиваются — видно, что строка не выходит за пределы группы, а не «сломалась».
+    const { active } = useDndContext();
+    const activeContainer = active?.data.current?.container;
+    const isReorderingWithinGroup = active != null && active.id !== id && activeContainer === id;
+    const style = {
+        transform: CSS.Translate.toString(transform),
+        transition,
+    };
+    const { onMouseDown, ...restListeners } = listeners || {};
+    const handleMouseDown = (e) => {
+        stopPropagation(e);
+        onMouseDown?.(e);
+    };
+    return (_jsxs("div", { ref: setNodeRef, style: style, className: styles.groupBlock, "data-dragging": isDragging || undefined, "data-reorder-boundary": isReorderingWithinGroup || undefined, children: [_jsxs("div", { className: styles.groupHeader, "data-size": size, children: [_jsx(DragHandle
+                    // Pointer-жест не доходит до BottomSheet: иначе vertical drag одновременно закрывает sheet.
+                    , { [NO_DRAG_ATTRIBUTE]: '', ...attributes, ...restListeners, onMouseDown: handleMouseDown, onClick: stopPropagation }), _jsx(Separator, { ...separatorProps })] }), _jsx(SortableContext, { items: rowIds, strategy: verticalListSortingStrategy, children: children })] }));
+}

package/dist/esm/components/Items/SimpleItem/components/SimpleGroupBlock/index.d.ts

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

package/dist/esm/components/Items/SimpleItem/components/SimpleGroupBlock/index.js

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

package/dist/esm/components/Items/SimpleItem/components/SimpleGroupBlockOverlay/SimpleGroupBlockOverlay.d.ts

@@ -0,0 +1,15 @@
+import { Size } from '../../../../../types.js';
+import { FlattenSimpleItem } from '../../../types.js';
+import { GroupHeaderContent } from '../../types.js';
+export type SimpleGroupBlockOverlayProps = GroupHeaderContent & {
+    /** Размер списка — заголовок повторяет левую раскладку строки (`padding-left` + ручка + `gap`). */
+    size?: Size;
+    /** Строки группы: копия блока рендерится целиком, вместе с ними. */
+    rows: FlattenSimpleItem[];
+};
+/**
+ * Статичная копия блока группы для `DragOverlay` (без `useSortable`): заголовок + строки группы.
+ * Блок рендерится целиком, чтобы копия совпадала по размеру с перетаскиваемым блоком — `DragOverlay`
+ * подгоняет обёртку под размеры активного узла (весь блок), поэтому одним заголовком её не заполнить.
+ */
+export declare function SimpleGroupBlockOverlay({ size, rows, ...separatorProps }: SimpleGroupBlockOverlayProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/Items/SimpleItem/components/SimpleGroupBlockOverlay/SimpleGroupBlockOverlay.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Separator } from '../../../../../helperComponents/index.js';
+import styles from '../../styles.module.css';
+import { OverlayDragHandle } from '../OverlayDragHandle/index.js';
+import { SimpleItemOverlay } from '../SimpleItemOverlay/index.js';
+/**
+ * Статичная копия блока группы для `DragOverlay` (без `useSortable`): заголовок + строки группы.
+ * Блок рендерится целиком, чтобы копия совпадала по размеру с перетаскиваемым блоком — `DragOverlay`
+ * подгоняет обёртку под размеры активного узла (весь блок), поэтому одним заголовком её не заполнить.
+ */
+export function SimpleGroupBlockOverlay({ size, rows, ...separatorProps }) {
+    return (_jsxs("div", { className: styles.groupBlock, "data-overlay": true, children: [_jsxs("div", { className: styles.groupHeader, "data-size": size, children: [_jsx(OverlayDragHandle, {}), _jsx(Separator, { ...separatorProps })] }), rows.map(row => (_jsx(SimpleItemOverlay, { ...row, bare: true }, row.id)))] }));
+}

package/dist/esm/components/Items/SimpleItem/components/SimpleGroupBlockOverlay/index.d.ts

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

package/dist/esm/components/Items/SimpleItem/components/SimpleGroupBlockOverlay/index.js

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

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

@@ -0,0 +1,11 @@
+import { FlattenSimpleItem, ItemId } from '../../../types.js';
+type SimpleItemProps = FlattenSimpleItem & {
+    /** Id группы-родителя (если строка внутри группы) — уходит в `data` `useSortable` (kind=row). */
+    groupId?: ItemId;
+};
+/**
+ * Листовая сортируемая строка `List`/`Droplist` в reorder-режиме (проп `onItemsReorder`):
+ * `BaseItem` + ручка `@dnd-kit` слева. Группировку задаёт `SimpleGroupItem` уровнем выше.
+ */
+export declare function SimpleItem({ id, disabled, groupId, ...option }: SimpleItemProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,42 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useSortable } from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+import { NO_DRAG_ATTRIBUTE } from '@cloud-ru/ds-bottom-sheet';
+import { stopPropagation } from '../../../../../utils.js';
+import { BaseItem } from '../../../BaseItem/index.js';
+import { REORDER_TOP_LEVEL } from '../../constants.js';
+import styles from '../../styles.module.css';
+import { animateLayoutChanges } from '../../utils.js';
+import { DragHandle } from '../DragHandle/index.js';
+/**
+ * Листовая сортируемая строка `List`/`Droplist` в reorder-режиме (проп `onItemsReorder`):
+ * `BaseItem` + ручка `@dnd-kit` слева. Группировку задаёт `SimpleGroupItem` уровнем выше.
+ */
+// `option` несёт и служебные поля flatten-модели (`items`/`allChildIds`) — `BaseItem` их не знает
+// и отбрасывает через `extractSupportProps`, в DOM они не попадают.
+export function SimpleItem({ id, disabled, groupId, ...option }) {
+    const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
+        id,
+        // `disabled` на строке отключает `Switch` и клик (`BaseItem`), но не переупорядочивание:
+        // ручка всегда активна.
+        // `container` читает кастомный `collisionDetection` в `ListPrivate`: drop разрешён только внутри
+        // одного контейнера. Строка без группы (`groupId` пуст) лежит в общем контейнере верхнего уровня
+        // вместе с группами (можно менять местами строку и группу); строка группы — в контейнере группы.
+        data: { container: groupId ?? REORDER_TOP_LEVEL },
+        animateLayoutChanges,
+    });
+    const style = {
+        // Только трансляция без scale: иначе `@dnd-kit` подмешивает scaleY (`adjustScale`) и короткая
+        // строка растягивается под высоту соседа. `CSS.Translate` даёт `translate3d` без scale.
+        transform: CSS.Translate.toString(transform),
+        transition,
+    };
+    const { onMouseDown, ...restListeners } = listeners || {};
+    const handleMouseDown = (e) => {
+        stopPropagation(e);
+        onMouseDown?.(e);
+    };
+    return (_jsx("div", { ref: setNodeRef, style: style, className: styles.item, "data-dragging": isDragging || undefined, children: _jsx(BaseItem, { ...option, id: id, disabled: disabled, dragHandle: _jsx(DragHandle
+            // Pointer-жест не доходит до BottomSheet: иначе vertical drag одновременно закрывает sheet.
+            , { [NO_DRAG_ATTRIBUTE]: '', ...attributes, ...restListeners, onMouseDown: handleMouseDown, onClick: stopPropagation }) }) }));
+}

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

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

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

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

package/dist/esm/components/Items/SimpleItem/components/SimpleItemOverlay/SimpleItemOverlay.d.ts

@@ -0,0 +1,15 @@
+import { FlattenSimpleItem } from '../../../types.js';
+export type SimpleItemOverlayProps = FlattenSimpleItem & {
+    /**
+     * Строка внутри копии блока группы (`SimpleGroupBlockOverlay`): поверхность и тень несёт сам
+     * блок, поэтому у строки их не дублируем.
+     */
+    bare?: boolean;
+};
+/**
+ * Презентационная копия строки для `DragOverlay` (`@dnd-kit`). Рендерится в портале над всей
+ * страницей и едет за курсором, поэтому строку не режет `overflow: hidden` контейнера `List`
+ * (см. [visual-regression] клиппинг). В отличие от `SimpleItem`, не вызывает `useSortable` —
+ * это неинтерактивный снимок: ручка и содержимое статичны, перетаскивание ведёт исходная строка.
+ */
+export declare function SimpleItemOverlay({ bare, ...item }: SimpleItemOverlayProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/Items/SimpleItem/components/SimpleItemOverlay/SimpleItemOverlay.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { BaseItem } from '../../../BaseItem/index.js';
+import styles from '../../styles.module.css';
+import { OverlayDragHandle } from '../OverlayDragHandle/index.js';
+/**
+ * Презентационная копия строки для `DragOverlay` (`@dnd-kit`). Рендерится в портале над всей
+ * страницей и едет за курсором, поэтому строку не режет `overflow: hidden` контейнера `List`
+ * (см. [visual-regression] клиппинг). В отличие от `SimpleItem`, не вызывает `useSortable` —
+ * это неинтерактивный снимок: ручка и содержимое статичны, перетаскивание ведёт исходная строка.
+ */
+export function SimpleItemOverlay({ bare, ...item }) {
+    return (_jsx("div", { className: styles.item, "data-overlay": bare ? undefined : true, children: _jsx(BaseItem, { ...item, dragHandle: _jsx(OverlayDragHandle, {}) }) }));
+}

package/dist/esm/components/Items/SimpleItem/components/SimpleItemOverlay/index.d.ts

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

package/dist/esm/components/Items/SimpleItem/components/SimpleItemOverlay/index.js

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

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

@@ -0,0 +1,4 @@
+export * from './SimpleGroupBlock/index.js';
+export * from './SimpleGroupBlockOverlay/index.js';
+export * from './SimpleItem/index.js';
+export * from './SimpleItemOverlay/index.js';

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

@@ -0,0 +1,4 @@
+export * from './SimpleGroupBlock/index.js';
+export * from './SimpleGroupBlockOverlay/index.js';
+export * from './SimpleItem/index.js';
+export * from './SimpleItemOverlay/index.js';

package/dist/esm/components/Items/SimpleItem/constants.d.ts

@@ -0,0 +1,7 @@
+import { ItemId } from '../types.js';
+/**
+ * Sortable-контейнер верхнего уровня reorder-режима. Строки без группы и сами группы лежат в одном
+ * контейнере (переставляются как «братья»), строки внутри группы — в контейнере со `id` группы.
+ * Кастомный `collisionDetection` в `ListPrivate` пускает drop только в пределах одного контейнера.
+ */
+export declare const REORDER_TOP_LEVEL: ItemId;

package/dist/esm/components/Items/SimpleItem/constants.js

@@ -0,0 +1,6 @@
+/**
+ * Sortable-контейнер верхнего уровня reorder-режима. Строки без группы и сами группы лежат в одном
+ * контейнере (переставляются как «братья»), строки внутри группы — в контейнере со `id` группы.
+ * Кастомный `collisionDetection` в `ListPrivate` пускает drop только в пределах одного контейнера.
+ */
+export const REORDER_TOP_LEVEL = '__reorder-top-level__';

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

@@ -0,0 +1,2 @@
+export * from './components/index.js';
+export * from './types.js';

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

@@ -0,0 +1,2 @@
+export * from './components/index.js';
+export * from './types.js';