@cloud-ru/ds-list 2.0.3 → 2.0.4-preview-9005559b.0

package/dist/cjs/helperComponents/MobileDroplist/MobileDroplist.js

@@ -29,7 +29,9 @@ footer, onItemsReorder, ...rest }) {
     const portalContext = (0, portal_context_1.usePortalContext)();
     const scrollRef = (0, react_1.useRef)(null);
     const [open = false, setIsOpen] = (0, utils_1.useValueControl)({ value: openProp, onChange: onOpenChange });
-    // Стек заходов во вложенные next-list'ы. Пустой — корневой уровень.
+    // Стек заходов во вложенные next-list'ы: индексный путь от корня на каждый уровень.
+    // Пустой — корневой уровень. Хранится путь, а не сам айтем: айтемы пересобираются на каждом
+    // рендере, и сохранённая копия оставила бы открытый sheet в устаревшем состоянии.
     const [path, setPath] = (0, react_1.useState)([]);
     const handleClose = () => {
         setIsOpen(false);
@@ -91,7 +93,10 @@ footer, onItemsReorder, ...rest }) {
     const containerRef = portalContext.current ?? undefined;
     // Каскад sheet'ов: корень + по одному sheet'у на каждый заход в next-list. Каждый накладывается
     // поверх предыдущего (свой backdrop), а не заменяет его содержимое. Назад — закрывает верхний.
-    const sheets = [{ source: items, title: label, item: undefined }].concat(path.map(item => ({ source: item.items, title: (0, utils_2.nextListOption)(item), item })));
+    const sheets = [{ source: items, title: label, item: undefined }].concat(path.map(indexPath => {
+        const item = (0, utils_2.resolveItemByPath)(items, indexPath);
+        return { source: (item?.items ?? []), title: (0, utils_2.nextListOption)(item), item };
+    }));
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [trigger, sheets.map(({ source, title, item }, levelIndex) => {
                 const isRoot = levelIndex === 0;
                 // Режим переупорядочивания (`onItemsReorder`) — только корень: дерево
@@ -100,7 +105,7 @@ footer, onItemsReorder, ...rest }) {
                 const reorderRoot = Boolean(isRoot && onItemsReorder);
                 const levelItems = reorderRoot
                     ? undefined
-                    : (0, utils_2.buildLevelItems)(source, next => setPath(prev => [...prev.slice(0, levelIndex), next]), handleClose, closeOnClick);
+                    : (0, utils_2.buildLevelItems)(source, relativePath => setPath(prev => [...prev.slice(0, levelIndex), [...(prev[levelIndex - 1] ?? []), ...relativePath]]), handleClose, closeOnClick);
                 // Поиск/виртуализация/footer/actions — только на корне; sublists всегда статичны по контенту.
                 const searchable = isRoot && Boolean(search);
                 const expanded = searchable || (isRoot && virtualized);

package/dist/cjs/helperComponents/MobileDroplist/utils.d.ts

@@ -1,11 +1,18 @@
 import { Item, NextListItem } from '../../components/Items';
+/**
+ * Айтем уровня по индексному пути от корня. Путь разрешается на каждом рендере по актуальным
+ * `items`: иначе открытый sheet сохранял бы копию айтема, полученную при заходе во вложенный
+ * список, и не отражал бы её последующие изменения (например, смену выбранной строки).
+ */
+export declare function resolveItemByPath(items: Item[], indexPath: number[]): NextListItem | undefined;
 /** Текст `label` next-list-айтема — заголовок шапки sheet'а при заходе во вложенный список. */
-export declare function nextListOption(item: NextListItem): string | undefined;
+export declare function nextListOption(item?: NextListItem): string | undefined;
 /**
  * Готовит айтемы текущего уровня sheet'а:
  * - `next-list` превращается в базовый айтем с шевроном `>`, клик по которому уводит на уровень вложенного
  *   списка (drill-down), а не открывает второй BottomSheet (десктопный nested-popover на mobile неприменим);
+ *   позиция айтема передаётся в `onDrill` индексным путём — уровень разрешается по актуальным `items`;
  * - `group` / `group-select` / `collapse` рекурсивно обрабатываются (внутри них тоже может быть `next-list`);
  * - базовые айтемы (action-меню без `selection`) при `closeOnClick` закрывают sheet по клику.
  */
-export declare function buildLevelItems(items: Item[], onDrill: (item: NextListItem) => void, onClose: () => void, closeOnClick: boolean): Item[];
+export declare function buildLevelItems(items: Item[], onDrill: (indexPath: number[]) => void, onClose: () => void, closeOnClick: boolean, basePath?: number[]): Item[];

package/dist/cjs/helperComponents/MobileDroplist/utils.js

@@ -1,13 +1,32 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.resolveItemByPath = resolveItemByPath;
 exports.nextListOption = nextListOption;
 exports.buildLevelItems = buildLevelItems;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const system_1 = require("@cloud-ru/ds-icons/interface/system");
 const constants_1 = require("../../constants");
+/**
+ * Айтем уровня по индексному пути от корня. Путь разрешается на каждом рендере по актуальным
+ * `items`: иначе открытый sheet сохранял бы копию айтема, полученную при заходе во вложенный
+ * список, и не отражал бы её последующие изменения (например, смену выбранной строки).
+ */
+function resolveItemByPath(items, indexPath) {
+    let source = items;
+    let node;
+    for (const index of indexPath) {
+        node = source?.[index];
+        if (!node || typeof node !== 'object' || !('items' in node)) {
+            source = undefined;
+            continue;
+        }
+        source = node.items;
+    }
+    return node;
+}
 /** Текст `label` next-list-айтема — заголовок шапки sheet'а при заходе во вложенный список. */
 function nextListOption(item) {
-    const { content } = item;
+    const content = item?.content;
     if (content && typeof content === 'object' && 'label' in content) {
         return String(content.label);
     }
@@ -17,11 +36,13 @@ function nextListOption(item) {
  * Готовит айтемы текущего уровня sheet'а:
  * - `next-list` превращается в базовый айтем с шевроном `>`, клик по которому уводит на уровень вложенного
  *   списка (drill-down), а не открывает второй BottomSheet (десктопный nested-popover на mobile неприменим);
+ *   позиция айтема передаётся в `onDrill` индексным путём — уровень разрешается по актуальным `items`;
  * - `group` / `group-select` / `collapse` рекурсивно обрабатываются (внутри них тоже может быть `next-list`);
  * - базовые айтемы (action-меню без `selection`) при `closeOnClick` закрывают sheet по клику.
  */
-function buildLevelItems(items, onDrill, onClose, closeOnClick) {
-    return items.map(item => {
+function buildLevelItems(items, onDrill, onClose, closeOnClick, basePath = []) {
+    return items.map((item, index) => {
+        const indexPath = [...basePath, index];
         if (item && typeof item === 'object' && 'type' in item) {
             if (item.type === constants_1.ITEM_TYPE.NextList) {
                 const next = item;
@@ -42,12 +63,12 @@ function buildLevelItems(items, onDrill, onClose, closeOnClick) {
                     afterContent: (0, jsx_runtime_1.jsx)(system_1.ChevronRightSVG, {}),
                     onClick: (event) => {
                         next.onClick?.(event);
-                        onDrill(next);
+                        onDrill(indexPath);
                     },
                 };
             }
             if (item.type === constants_1.ITEM_TYPE.Group || item.type === constants_1.ITEM_TYPE.GroupSelect || item.type === constants_1.ITEM_TYPE.Collapse) {
-                return { ...item, items: buildLevelItems(item.items, onDrill, onClose, closeOnClick) };
+                return { ...item, items: buildLevelItems(item.items, onDrill, onClose, closeOnClick, indexPath) };
             }
         }
         if (closeOnClick && item && typeof item === 'object' && 'onClick' in item) {

package/dist/esm/helperComponents/MobileDroplist/MobileDroplist.js

@@ -6,7 +6,7 @@ import { cloneElement, isValidElement, useMemo, useRef, useState } from 'react';
 import { List, ReorderableList } from '../../components/Lists/List/index.js';
 import { TEST_IDS } from '../../constants.js';
 import styles from './MobileDroplist.module.css';
-import { buildLevelItems, nextListOption } from './utils.js';
+import { buildLevelItems, nextListOption, resolveItemByPath } from './utils.js';
 /**
  * Mobile-вариант `Droplist`: рендерит `List` (в переданном `size`) внутри `BottomSheet` из `@cloud-ru/ds-bottom-sheet`.
  * Триггер (`children`) клонируется для открытия sheet'а по клику/Enter/Space. `next-list`-айтемы на mobile
@@ -23,7 +23,9 @@ footer, onItemsReorder, ...rest }) {
     const portalContext = usePortalContext();
     const scrollRef = useRef(null);
     const [open = false, setIsOpen] = useValueControl({ value: openProp, onChange: onOpenChange });
-    // Стек заходов во вложенные next-list'ы. Пустой — корневой уровень.
+    // Стек заходов во вложенные next-list'ы: индексный путь от корня на каждый уровень.
+    // Пустой — корневой уровень. Хранится путь, а не сам айтем: айтемы пересобираются на каждом
+    // рендере, и сохранённая копия оставила бы открытый sheet в устаревшем состоянии.
     const [path, setPath] = useState([]);
     const handleClose = () => {
         setIsOpen(false);
@@ -85,7 +87,10 @@ footer, onItemsReorder, ...rest }) {
     const containerRef = portalContext.current ?? undefined;
     // Каскад sheet'ов: корень + по одному sheet'у на каждый заход в next-list. Каждый накладывается
     // поверх предыдущего (свой backdrop), а не заменяет его содержимое. Назад — закрывает верхний.
-    const sheets = [{ source: items, title: label, item: undefined }].concat(path.map(item => ({ source: item.items, title: nextListOption(item), item })));
+    const sheets = [{ source: items, title: label, item: undefined }].concat(path.map(indexPath => {
+        const item = resolveItemByPath(items, indexPath);
+        return { source: (item?.items ?? []), title: nextListOption(item), item };
+    }));
     return (_jsxs(_Fragment, { children: [trigger, sheets.map(({ source, title, item }, levelIndex) => {
                 const isRoot = levelIndex === 0;
                 // Режим переупорядочивания (`onItemsReorder`) — только корень: дерево
@@ -94,7 +99,7 @@ footer, onItemsReorder, ...rest }) {
                 const reorderRoot = Boolean(isRoot && onItemsReorder);
                 const levelItems = reorderRoot
                     ? undefined
-                    : buildLevelItems(source, next => setPath(prev => [...prev.slice(0, levelIndex), next]), handleClose, closeOnClick);
+                    : buildLevelItems(source, relativePath => setPath(prev => [...prev.slice(0, levelIndex), [...(prev[levelIndex - 1] ?? []), ...relativePath]]), handleClose, closeOnClick);
                 // Поиск/виртуализация/footer/actions — только на корне; sublists всегда статичны по контенту.
                 const searchable = isRoot && Boolean(search);
                 const expanded = searchable || (isRoot && virtualized);

package/dist/esm/helperComponents/MobileDroplist/utils.d.ts

@@ -1,11 +1,18 @@
 import { Item, NextListItem } from '../../components/Items/index.js';
+/**
+ * Айтем уровня по индексному пути от корня. Путь разрешается на каждом рендере по актуальным
+ * `items`: иначе открытый sheet сохранял бы копию айтема, полученную при заходе во вложенный
+ * список, и не отражал бы её последующие изменения (например, смену выбранной строки).
+ */
+export declare function resolveItemByPath(items: Item[], indexPath: number[]): NextListItem | undefined;
 /** Текст `label` next-list-айтема — заголовок шапки sheet'а при заходе во вложенный список. */
-export declare function nextListOption(item: NextListItem): string | undefined;
+export declare function nextListOption(item?: NextListItem): string | undefined;
 /**
  * Готовит айтемы текущего уровня sheet'а:
  * - `next-list` превращается в базовый айтем с шевроном `>`, клик по которому уводит на уровень вложенного
  *   списка (drill-down), а не открывает второй BottomSheet (десктопный nested-popover на mobile неприменим);
+ *   позиция айтема передаётся в `onDrill` индексным путём — уровень разрешается по актуальным `items`;
  * - `group` / `group-select` / `collapse` рекурсивно обрабатываются (внутри них тоже может быть `next-list`);
  * - базовые айтемы (action-меню без `selection`) при `closeOnClick` закрывают sheet по клику.
  */
-export declare function buildLevelItems(items: Item[], onDrill: (item: NextListItem) => void, onClose: () => void, closeOnClick: boolean): Item[];
+export declare function buildLevelItems(items: Item[], onDrill: (indexPath: number[]) => void, onClose: () => void, closeOnClick: boolean, basePath?: number[]): Item[];

package/dist/esm/helperComponents/MobileDroplist/utils.js

@@ -1,9 +1,27 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { ChevronRightSVG } from '@cloud-ru/ds-icons/interface/system';
 import { ITEM_TYPE } from '../../constants.js';
+/**
+ * Айтем уровня по индексному пути от корня. Путь разрешается на каждом рендере по актуальным
+ * `items`: иначе открытый sheet сохранял бы копию айтема, полученную при заходе во вложенный
+ * список, и не отражал бы её последующие изменения (например, смену выбранной строки).
+ */
+export function resolveItemByPath(items, indexPath) {
+    let source = items;
+    let node;
+    for (const index of indexPath) {
+        node = source?.[index];
+        if (!node || typeof node !== 'object' || !('items' in node)) {
+            source = undefined;
+            continue;
+        }
+        source = node.items;
+    }
+    return node;
+}
 /** Текст `label` next-list-айтема — заголовок шапки sheet'а при заходе во вложенный список. */
 export function nextListOption(item) {
-    const { content } = item;
+    const content = item?.content;
     if (content && typeof content === 'object' && 'label' in content) {
         return String(content.label);
     }
@@ -13,11 +31,13 @@ export function nextListOption(item) {
  * Готовит айтемы текущего уровня sheet'а:
  * - `next-list` превращается в базовый айтем с шевроном `>`, клик по которому уводит на уровень вложенного
  *   списка (drill-down), а не открывает второй BottomSheet (десктопный nested-popover на mobile неприменим);
+ *   позиция айтема передаётся в `onDrill` индексным путём — уровень разрешается по актуальным `items`;
  * - `group` / `group-select` / `collapse` рекурсивно обрабатываются (внутри них тоже может быть `next-list`);
  * - базовые айтемы (action-меню без `selection`) при `closeOnClick` закрывают sheet по клику.
  */
-export function buildLevelItems(items, onDrill, onClose, closeOnClick) {
-    return items.map(item => {
+export function buildLevelItems(items, onDrill, onClose, closeOnClick, basePath = []) {
+    return items.map((item, index) => {
+        const indexPath = [...basePath, index];
         if (item && typeof item === 'object' && 'type' in item) {
             if (item.type === ITEM_TYPE.NextList) {
                 const next = item;
@@ -38,12 +58,12 @@ export function buildLevelItems(items, onDrill, onClose, closeOnClick) {
                     afterContent: _jsx(ChevronRightSVG, {}),
                     onClick: (event) => {
                         next.onClick?.(event);
-                        onDrill(next);
+                        onDrill(indexPath);
                     },
                 };
             }
             if (item.type === ITEM_TYPE.Group || item.type === ITEM_TYPE.GroupSelect || item.type === ITEM_TYPE.Collapse) {
-                return { ...item, items: buildLevelItems(item.items, onDrill, onClose, closeOnClick) };
+                return { ...item, items: buildLevelItems(item.items, onDrill, onClose, closeOnClick, indexPath) };
             }
         }
         if (closeOnClick && item && typeof item === 'object' && 'onClick' in item) {