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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cloud-ru/ds-list",
-  "version": "2.0.3",
+  "version": "2.0.4-preview-9005559b.0",
   "description": "Списочный UI — компонент List для плоских/вложенных списков с выбором, группами и поиском и Droplist — тот же список в поповере.",
   "repository": {
     "type": "git",
@@ -48,24 +48,24 @@
     "@tanstack/react-virtual": "^3.14.8",
     "classnames": "^2.5.1",
     "merge-refs": "^2.0.0",
-    "@cloud-ru/ds-adaptive": "^1.0.1",
-    "@cloud-ru/ds-bottom-sheet": "^1.0.4",
-    "@cloud-ru/ds-drag-and-drop": "^1.1.1",
-    "@cloud-ru/ds-button": "^1.0.1",
-    "@cloud-ru/ds-divider": "^1.0.1",
-    "@cloud-ru/ds-icons": "^1.0.2",
-    "@cloud-ru/ds-info-block": "^1.0.1",
-    "@cloud-ru/ds-materials": "^1.0.1",
-    "@cloud-ru/ds-dropdown": "^1.0.5",
-    "@cloud-ru/ds-search-private": "^1.0.4",
-    "@cloud-ru/ds-truncate-string": "^1.0.3",
-    "@cloud-ru/ds-scroll": "^1.0.2",
-    "@cloud-ru/ds-utils": "^1.1.0",
-    "@cloud-ru/ds-toggles": "^1.1.2",
-    "@cloud-ru/ds-portal-context": "^1.0.1",
-    "@cloud-ru/ds-loader": "^1.0.1"
+    "@cloud-ru/ds-bottom-sheet": "1.0.5-preview-9005559b.0",
+    "@cloud-ru/ds-button": "1.0.1",
+    "@cloud-ru/ds-divider": "1.0.1",
+    "@cloud-ru/ds-icons": "1.0.2",
+    "@cloud-ru/ds-drag-and-drop": "1.1.1",
+    "@cloud-ru/ds-dropdown": "1.0.6-preview-9005559b.0",
+    "@cloud-ru/ds-adaptive": "1.0.1",
+    "@cloud-ru/ds-info-block": "1.0.1",
+    "@cloud-ru/ds-loader": "1.0.1",
+    "@cloud-ru/ds-portal-context": "1.0.1",
+    "@cloud-ru/ds-scroll": "1.0.2",
+    "@cloud-ru/ds-materials": "1.0.1",
+    "@cloud-ru/ds-toggles": "1.1.2",
+    "@cloud-ru/ds-truncate-string": "1.0.3",
+    "@cloud-ru/ds-search-private": "1.0.4",
+    "@cloud-ru/ds-utils": "1.1.0"
   },
   "peerDependencies": {
-    "@cloud-ru/ds-locale": "^1.0.0"
+    "@cloud-ru/ds-locale": "1.0.0"
   }
 }

package/src/helperComponents/MobileDroplist/MobileDroplist.tsx

@@ -9,7 +9,7 @@ import { List, ReorderableList } from '../../components/Lists/List';
 import { BaseDroplistProps, MobileDroplistProps } from '../../components/Lists/types';
 import { TEST_IDS } from '../../constants';
 import styles from './MobileDroplist.module.scss';
-import { buildLevelItems, nextListOption } from './utils';
+import { buildLevelItems, nextListOption, resolveItemByPath } from './utils';
 
 /**
  * Mobile-вариант `Droplist`: рендерит `List` (в переданном `size`) внутри `BottomSheet` из `@cloud-ru/ds-bottom-sheet`.
@@ -47,8 +47,10 @@ export function MobileDroplist({
   const scrollRef = useRef<HTMLDivElement>(null);
   const [open = false, setIsOpen] = useValueControl({ value: openProp, onChange: onOpenChange });
 
-  // Стек заходов во вложенные next-list'ы. Пустой — корневой уровень.
-  const [path, setPath] = useState<NextListItem[]>([]);
+  // Стек заходов во вложенные next-list'ы: индексный путь от корня на каждый уровень.
+  // Пустой — корневой уровень. Хранится путь, а не сам айтем: айтемы пересобираются на каждом
+  // рендере, и сохранённая копия оставила бы открытый sheet в устаревшем состоянии.
+  const [path, setPath] = useState<number[][]>([]);
 
   const handleClose = () => {
     setIsOpen(false);
@@ -135,7 +137,11 @@ export function MobileDroplist({
   // Каскад sheet'ов: корень + по одному sheet'у на каждый заход в next-list. Каждый накладывается
   // поверх предыдущего (свой backdrop), а не заменяет его содержимое. Назад — закрывает верхний.
   const sheets = [{ source: items, title: label, item: undefined as NextListItem | undefined }].concat(
-    path.map(item => ({ source: item.items, title: nextListOption(item), item })),
+    path.map(indexPath => {
+      const item = resolveItemByPath(items as Item[], indexPath);
+
+      return { source: (item?.items ?? []) as typeof items, title: nextListOption(item), item };
+    }),
   );
 
   return (
@@ -151,7 +157,8 @@ export function MobileDroplist({
           ? undefined
           : buildLevelItems(
               source as Item[],
-              next => setPath(prev => [...prev.slice(0, levelIndex), next]),
+              relativePath =>
+                setPath(prev => [...prev.slice(0, levelIndex), [...(prev[levelIndex - 1] ?? []), ...relativePath]]),
               handleClose,
               closeOnClick,
             );

package/src/helperComponents/MobileDroplist/utils.tsx

@@ -4,9 +4,32 @@ import { MouseEvent } from 'react';
 import { BaseItemProps, Item, NextListItem } from '../../components/Items';
 import { ITEM_TYPE } from '../../constants';
 
+/**
+ * Айтем уровня по индексному пути от корня. Путь разрешается на каждом рендере по актуальным
+ * `items`: иначе открытый sheet сохранял бы копию айтема, полученную при заходе во вложенный
+ * список, и не отражал бы её последующие изменения (например, смену выбранной строки).
+ */
+export function resolveItemByPath(items: Item[], indexPath: number[]): NextListItem | undefined {
+  let source: Item[] | undefined = items;
+  let node: Item | undefined;
+
+  for (const index of indexPath) {
+    node = source?.[index];
+
+    if (!node || typeof node !== 'object' || !('items' in node)) {
+      source = undefined;
+      continue;
+    }
+
+    source = node.items as Item[];
+  }
+
+  return node as NextListItem | undefined;
+}
+
 /** Текст `label` next-list-айтема — заголовок шапки sheet'а при заходе во вложенный список. */
-export function nextListOption(item: NextListItem): string | undefined {
-  const { content } = item;
+export function nextListOption(item?: NextListItem): string | undefined {
+  const content = item?.content;
   if (content && typeof content === 'object' && 'label' in content) {
     return String((content as { label: string | number }).label);
   }
@@ -17,16 +40,20 @@ export 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 function buildLevelItems(
   items: Item[],
-  onDrill: (item: NextListItem) => void,
+  onDrill: (indexPath: number[]) => void,
   onClose: () => void,
   closeOnClick: boolean,
+  basePath: number[] = [],
 ): Item[] {
-  return items.map(item => {
+  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;
@@ -49,13 +76,13 @@ export function buildLevelItems(
           afterContent: <ChevronRightSVG />,
           onClick: (event: MouseEvent<HTMLElement>) => {
             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) };
       }
     }