@cloud-ru/ds-list 2.0.4 → 2.0.5-preview-0a01eea8.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cloud-ru/ds-list",
-  "version": "2.0.4",
+  "version": "2.0.5-preview-0a01eea8.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.5",
-    "@cloud-ru/ds-divider": "^1.0.1",
-    "@cloud-ru/ds-button": "^1.0.1",
-    "@cloud-ru/ds-drag-and-drop": "^1.1.1",
-    "@cloud-ru/ds-dropdown": "^1.0.6",
-    "@cloud-ru/ds-icons": "^1.1.0",
-    "@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-portal-context": "^1.0.1",
-    "@cloud-ru/ds-scroll": "^1.0.2",
-    "@cloud-ru/ds-search-private": "^1.0.5",
-    "@cloud-ru/ds-toggles": "^1.1.3",
-    "@cloud-ru/ds-truncate-string": "^1.0.4",
-    "@cloud-ru/ds-utils": "^1.1.0"
+    "@cloud-ru/ds-adaptive": "1.0.1",
+    "@cloud-ru/ds-divider": "1.0.1",
+    "@cloud-ru/ds-drag-and-drop": "1.1.1",
+    "@cloud-ru/ds-bottom-sheet": "1.0.6-preview-0a01eea8.0",
+    "@cloud-ru/ds-dropdown": "1.0.7-preview-0a01eea8.0",
+    "@cloud-ru/ds-loader": "1.0.1",
+    "@cloud-ru/ds-info-block": "1.0.1",
+    "@cloud-ru/ds-button": "1.0.1",
+    "@cloud-ru/ds-icons": "1.1.0",
+    "@cloud-ru/ds-materials": "1.0.1",
+    "@cloud-ru/ds-portal-context": "1.0.1",
+    "@cloud-ru/ds-scroll": "1.0.2",
+    "@cloud-ru/ds-search-private": "1.0.5",
+    "@cloud-ru/ds-utils": "1.1.0",
+    "@cloud-ru/ds-toggles": "1.1.3",
+    "@cloud-ru/ds-truncate-string": "1.0.4"
   },
   "peerDependencies": {
-    "@cloud-ru/ds-locale": "^1.0.0"
+    "@cloud-ru/ds-locale": "1.0.0"
   }
 }

package/src/components/Lists/types.ts

@@ -1,4 +1,5 @@
 import { DragEndEvent } from '@dnd-kit/core';
+import { BottomSheetProps } from '@cloud-ru/ds-bottom-sheet';
 import { DropdownProps } from '@cloud-ru/ds-dropdown';
 import { WithSupportProps } from '@cloud-ru/ds-utils';
 import { FocusEvent, KeyboardEvent, ReactNode, RefObject } from 'react';
@@ -182,7 +183,7 @@ type DroplistMobileSlots = {
  * (список size `l` в `BottomSheet`), иначе — `DesktopDroplist` (анкорный popover). Mobile-слоты
  * применяются только на mobile.
  */
-export type DroplistProps = BaseDroplistProps & DroplistMobileSlots;
+export type DroplistProps = BaseDroplistProps & DroplistMobileSlots & Pick<BottomSheetProps, 'snapPoints'>;
 
 /**
  * Props адаптивного `ReorderableDroplist`: props `ReorderableList` + popover/mobile-обвязка
@@ -201,6 +202,7 @@ export type MobileDroplistProps = Omit<
   DesktopDroplistProps,
   'trigger' | 'placement' | 'widthStrategy' | 'triggerElemRef' | 'listRef' | 'triggerClassName'
 > &
+  Pick<BottomSheetProps, 'snapPoints'> &
   DroplistMobileSlots;
 
 export type ListPrivateProps = Omit<

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`.
@@ -35,6 +35,7 @@ export function MobileDroplist({
   container,
   closeOnPopstate,
   size,
+  snapPoints,
   // `footer` уводим в sticky-футер `BottomSheet` (кнопки действия прилипают к низу sheet'а, а не
   // скроллятся вместе со списком). `header` + `headerDivider` / `footerDivider` НЕ деструктурируем —
   // они уходят в `...rest` на корневой `List` (он рендерит шапку и её divider).
@@ -47,8 +48,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 +138,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 +158,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,
             );
@@ -220,7 +228,7 @@ export function MobileDroplist({
             slotAfterTitle={isRoot ? slotAfterTitle : undefined}
             content={content}
             footer={isRoot ? footer : undefined}
-            snapPoints={expanded ? [1] : undefined}
+            snapPoints={expanded ? [1] : snapPoints}
             closeOnPopstate={closeOnPopstate ?? true}
           />
         );

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) };
       }
     }