@cloud-ru/ds-list 2.0.3-preview-6a131ef8.0 → 2.0.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cloud-ru/ds-list",
-  "version": "2.0.3-preview-6a131ef8.0",
+  "version": "2.0.3",
   "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-button": "1.0.1",
-    "@cloud-ru/ds-divider": "1.0.1",
-    "@cloud-ru/ds-bottom-sheet": "1.0.3",
-    "@cloud-ru/ds-icons": "1.0.2",
-    "@cloud-ru/ds-dropdown": "1.0.4",
-    "@cloud-ru/ds-info-block": "1.0.1",
-    "@cloud-ru/ds-loader": "1.0.1",
-    "@cloud-ru/ds-materials": "1.0.1",
-    "@cloud-ru/ds-drag-and-drop": "1.1.1",
-    "@cloud-ru/ds-scroll": "1.0.2",
-    "@cloud-ru/ds-portal-context": "1.0.1",
-    "@cloud-ru/ds-truncate-string": "1.0.3",
-    "@cloud-ru/ds-search-private": "1.0.3",
-    "@cloud-ru/ds-toggles": "1.1.2",
-    "@cloud-ru/ds-utils": "1.1.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"
   },
   "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, resolveItemByPath } from './utils';
+import { buildLevelItems, nextListOption } from './utils';
 
 /**
  * Mobile-вариант `Droplist`: рендерит `List` (в переданном `size`) внутри `BottomSheet` из `@cloud-ru/ds-bottom-sheet`.
@@ -47,10 +47,8 @@ export function MobileDroplist({
   const scrollRef = useRef<HTMLDivElement>(null);
   const [open = false, setIsOpen] = useValueControl({ value: openProp, onChange: onOpenChange });
 
-  // Стек заходов во вложенные next-list'ы: индексный путь от корня на каждый уровень.
-  // Пустой — корневой уровень. Хранится путь, а не сам айтем: айтемы пересобираются на каждом
-  // рендере, и сохранённая копия оставила бы открытый sheet в устаревшем состоянии.
-  const [path, setPath] = useState<number[][]>([]);
+  // Стек заходов во вложенные next-list'ы. Пустой — корневой уровень.
+  const [path, setPath] = useState<NextListItem[]>([]);
 
   const handleClose = () => {
     setIsOpen(false);
@@ -137,11 +135,7 @@ export function MobileDroplist({
   // Каскад sheet'ов: корень + по одному sheet'у на каждый заход в next-list. Каждый накладывается
   // поверх предыдущего (свой backdrop), а не заменяет его содержимое. Назад — закрывает верхний.
   const sheets = [{ source: items, title: label, item: undefined as NextListItem | undefined }].concat(
-    path.map(indexPath => {
-      const item = resolveItemByPath(items as Item[], indexPath);
-
-      return { source: (item?.items ?? []) as typeof items, title: nextListOption(item), item };
-    }),
+    path.map(item => ({ source: item.items, title: nextListOption(item), item })),
   );
 
   return (
@@ -157,8 +151,7 @@ export function MobileDroplist({
           ? undefined
           : buildLevelItems(
               source as Item[],
-              relativePath =>
-                setPath(prev => [...prev.slice(0, levelIndex), [...(prev[levelIndex - 1] ?? []), ...relativePath]]),
+              next => setPath(prev => [...prev.slice(0, levelIndex), next]),
               handleClose,
               closeOnClick,
             );

package/src/helperComponents/MobileDroplist/utils.tsx

@@ -4,32 +4,9 @@ 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?.content;
+export function nextListOption(item: NextListItem): string | undefined {
+  const { content } = item;
   if (content && typeof content === 'object' && 'label' in content) {
     return String((content as { label: string | number }).label);
   }
@@ -40,20 +17,16 @@ 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: (indexPath: number[]) => void,
+  onDrill: (item: NextListItem) => void,
   onClose: () => void,
   closeOnClick: boolean,
-  basePath: number[] = [],
 ): Item[] {
-  return items.map((item, index) => {
-    const indexPath = [...basePath, index];
-
+  return items.map(item => {
     if (item && typeof item === 'object' && 'type' in item) {
       if (item.type === ITEM_TYPE.NextList) {
         const next = item;
@@ -76,13 +49,13 @@ export function buildLevelItems(
           afterContent: <ChevronRightSVG />,
           onClick: (event: MouseEvent<HTMLElement>) => {
             next.onClick?.(event);
-            onDrill(indexPath);
+            onDrill(next);
           },
         };
       }
 
       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, indexPath) };
+        return { ...item, items: buildLevelItems(item.items, onDrill, onClose, closeOnClick) };
       }
     }