@cloud-ru/ds-list 1.0.0

package/src/helperComponents/MobileDroplist/MobileDroplist.tsx

@@ -0,0 +1,230 @@
+import { BottomSheet } from '@cloud-ru/ds-bottom-sheet';
+import { usePortalContext } from '@cloud-ru/ds-portal-context';
+import { useValueControl } from '@cloud-ru/ds-utils';
+import { cloneElement, isValidElement, MouseEvent, useMemo, useRef, useState } from 'react';
+
+import { Item, ItemId, NextListItem, ReorderItem } from '../../components/Items';
+import { OnChangeHandler } from '../../components/Lists/contexts';
+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';
+
+/**
+ * Mobile-вариант `Droplist`: рендерит `List` (в переданном `size`) внутри `BottomSheet` из `@cloud-ru/ds-bottom-sheet`.
+ * Триггер (`children`) клонируется для открытия sheet'а по клику/Enter/Space. `next-list`-айтемы на mobile
+ * не открывают вложенный popover, а навигируют внутри sheet'а (drill-down): клик уводит на уровень
+ * вложенного списка, в шапке появляется его заголовок и кнопка «назад». Internal — наружу не реэкспортится;
+ * рендерится адаптивным `Droplist` на `layoutType='mobile'`.
+ */
+export function MobileDroplist({
+  items,
+  selection,
+  open: openProp,
+  onOpenChange,
+  children,
+  search,
+  label,
+  actionButton,
+  slotAfterTitle,
+  onBackButtonClick,
+  virtualized,
+  closeDroplistOnItemClick,
+  scroll,
+  container,
+  closeOnPopstate,
+  size,
+  // `footer` уводим в sticky-футер `BottomSheet` (кнопки действия прилипают к низу sheet'а, а не
+  // скроллятся вместе со списком). `header` + `headerDivider` / `footerDivider` НЕ деструктурируем —
+  // они уходят в `...rest` на корневой `List` (он рендерит шапку и её divider).
+  // `onItemsReorder` — только на корне: drill-down `next-list` ортогонален дереву `SimpleItem`.
+  footer,
+  onItemsReorder,
+  ...rest
+}: MobileDroplistProps) {
+  const portalContext = usePortalContext();
+  const scrollRef = useRef<HTMLDivElement>(null);
+  const [open = false, setIsOpen] = useValueControl({ value: openProp, onChange: onOpenChange });
+
+  // Стек заходов во вложенные next-list'ы. Пустой — корневой уровень.
+  const [path, setPath] = useState<NextListItem[]>([]);
+
+  const handleClose = () => {
+    setIsOpen(false);
+    setPath([]);
+  };
+
+  const handleSelectionChange: OnChangeHandler<ItemId | ItemId[]> = value => {
+    if (selection?.mode !== 'multiple' && closeDroplistOnItemClick) {
+      handleClose();
+    }
+
+    if (selection?.mode === 'multiple' && Array.isArray(value)) {
+      selection.onChange?.(value);
+      return;
+    }
+
+    if (selection?.mode !== 'multiple' && !Array.isArray(value)) {
+      selection?.onChange?.(value);
+    }
+  };
+
+  let listSelection: BaseDroplistProps['selection'];
+
+  if (selection) {
+    listSelection = { ...selection, onChange: handleSelectionChange };
+  }
+
+  const closeOnClick = Boolean(closeDroplistOnItemClick && !selection);
+
+  const trigger = useMemo(() => {
+    const handleOpen = () => setIsOpen(true);
+
+    if (isValidElement(children)) {
+      return cloneElement(children, {
+        onClick: (event: MouseEvent<HTMLElement>) => {
+          children.props.onClick?.(event);
+          handleOpen();
+        },
+      } as Partial<typeof children.props>);
+    }
+
+    if (typeof children === 'function') {
+      const element = children({
+        onKeyDown: event => {
+          if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            handleOpen();
+          }
+        },
+      });
+
+      if (isValidElement(element)) {
+        return cloneElement(element, {
+          onClick: (event: MouseEvent<HTMLElement>) => {
+            element.props.onClick?.(event);
+            handleOpen();
+          },
+        } as Partial<typeof element.props>);
+      }
+
+      return element;
+    }
+
+    return (
+      <span
+        role='button'
+        tabIndex={0}
+        data-test-id={TEST_IDS.mobileDroplistTrigger}
+        onClick={handleOpen}
+        onKeyDown={event => {
+          if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            handleOpen();
+          }
+        }}
+      >
+        {children}
+      </span>
+    );
+  }, [children, setIsOpen]);
+
+  const containerRef = portalContext.current ?? undefined;
+
+  // Каскад 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 })),
+  );
+
+  return (
+    <>
+      {trigger}
+      {sheets.map(({ source, title, item }, levelIndex) => {
+        const isRoot = levelIndex === 0;
+        // Режим переупорядочивания (`onItemsReorder`) — только корень: дерево
+        // `SimpleItem`/`SimpleGroupItem` не проходит через `buildLevelItems` (там `Item[]`
+        // и drill-down `next-list`).
+        const reorderRoot = Boolean(isRoot && onItemsReorder);
+        const levelItems = reorderRoot
+          ? undefined
+          : buildLevelItems(
+              source as Item[],
+              next => setPath(prev => [...prev.slice(0, levelIndex), next]),
+              handleClose,
+              closeOnClick,
+            );
+        // Поиск/виртуализация/footer/actions — только на корне; sublists всегда статичны по контенту.
+        const searchable = isRoot && Boolean(search);
+        const expanded = searchable || (isRoot && virtualized);
+
+        const scrollable = isRoot && (virtualized || scroll);
+
+        const listCommonProps = {
+          selection: listSelection,
+          size,
+          search: searchable ? search : undefined,
+          loading: isRoot ? undefined : item?.loading,
+          dataError: isRoot ? undefined : item?.dataError,
+          dataFiltered: isRoot ? undefined : item?.dataFiltered,
+          noDataState: rest.noDataState,
+          noResultsState: rest.noResultsState,
+          errorDataState: rest.errorDataState,
+          ...(isRoot ? rest : null),
+          // Контролируемые scroll-пропсы идут после `...rest`, чтобы их не перебило значениями
+          // с десктопа. В sheet'е список заполняет body и скроллится внутри себя (`sheetScroll`,
+          // height:100%); фиксированный desktop-cap `limitedScrollHeight` (max-height 384px) не
+          // применяется — иначе на full-height sheet под ограниченным списком остаётся пустое место.
+          // `className` (dropDownClassName) — desktop-popover ширина; в sheet'е список full-width.
+          className: undefined,
+          scrollRef: scrollable ? scrollRef : undefined,
+          scroll: scrollable || undefined,
+          limitedScrollHeight: false as const,
+          scrollContainerClassName: scrollable ? styles.sheetScroll : undefined,
+        };
+
+        const content = (
+          <div
+            className={styles.listWrapper}
+            data-test-id={isRoot ? TEST_IDS.mobileDroplistRoot : undefined}
+            data-fill={scrollable || undefined}
+          >
+            {reorderRoot && onItemsReorder ? (
+              <ReorderableList {...listCommonProps} items={items as ReorderItem[]} onItemsReorder={onItemsReorder} />
+            ) : (
+              <List {...listCommonProps} items={levelItems ?? []} virtualized={isRoot && virtualized} />
+            )}
+          </div>
+        );
+
+        // Уход с уровня вверх по стеку (для глубже-корня sheet'ов).
+        const popLevel = () => setPath(prev => prev.slice(0, levelIndex - 1));
+        // «Назад»: на корне — только явный `onBackButtonClick` (иначе back-стрелки нет — корневой
+        // droplist закрывается свайпом / backdrop'ом, как в легаси); глубже — снять верхний sheet.
+        const handleBack = isRoot ? onBackButtonClick : popLevel;
+
+        return (
+          <BottomSheet
+            key={isRoot ? 'root' : String(item?.id ?? levelIndex)}
+            // Потребительский `container` (portal-override) приоритетнее `PortalContext` — как на desktop.
+            container={container?.current ?? containerRef}
+            open={isRoot ? open : true}
+            // Dismiss (backdrop / swipe / Esc): на корне — закрыть весь droplist; глубже — вернуться на уровень вверх,
+            // как ждёт пользователь на mobile (а не закрывать всю цепочку разом).
+            onClose={isRoot ? handleClose : popLevel}
+            withDividers
+            title={title}
+            onBackButtonClick={handleBack}
+            actionButton={isRoot ? actionButton : undefined}
+            slotAfterTitle={isRoot ? slotAfterTitle : undefined}
+            content={content}
+            footer={isRoot ? footer : undefined}
+            snapPoints={expanded ? [1] : undefined}
+            closeOnPopstate={closeOnPopstate ?? true}
+          />
+        );
+      })}
+    </>
+  );
+}

package/src/helperComponents/MobileDroplist/index.ts

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

package/src/helperComponents/MobileDroplist/utils.tsx

@@ -0,0 +1,76 @@
+import { ChevronRightSVG } from '@cloud-ru/ds-icons/interface/system';
+import { MouseEvent } from 'react';
+
+import { BaseItemProps, Item, NextListItem } from '../../components/Items';
+import { ITEM_TYPE } from '../../constants';
+
+/** Текст `label` next-list-айтема — заголовок шапки sheet'а при заходе во вложенный список. */
+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);
+  }
+  return undefined;
+}
+
+/**
+ * Готовит айтемы текущего уровня sheet'а:
+ * - `next-list` превращается в базовый айтем с шевроном `>`, клик по которому уводит на уровень вложенного
+ *   списка (drill-down), а не открывает второй BottomSheet (десктопный nested-popover на mobile неприменим);
+ * - `group` / `group-select` / `collapse` рекурсивно обрабатываются (внутри них тоже может быть `next-list`);
+ * - базовые айтемы (action-меню без `selection`) при `closeOnClick` закрывают sheet по клику.
+ */
+export function buildLevelItems(
+  items: Item[],
+  onDrill: (item: NextListItem) => void,
+  onClose: () => void,
+  closeOnClick: boolean,
+): Item[] {
+  return items.map(item => {
+    if (item && typeof item === 'object' && 'type' in item) {
+      if (item.type === ITEM_TYPE.NextList) {
+        const next = item;
+
+        // next-list-only поля (вложенный список, его загрузка/ошибка/placement) на mobile не нужны —
+        // оставляем визуальную часть айтема (id / content / beforeContent / data-test-id / …).
+        const base = { ...next } as Partial<NextListItem>;
+        delete base.items;
+        delete base.type;
+        delete base.onSublistOpenChanged;
+        delete base.loading;
+        delete base.dataError;
+        delete base.dataFiltered;
+        delete base.placement;
+        delete base.scroll;
+        delete base.scrollRef;
+
+        return {
+          ...(base as Item),
+          afterContent: <ChevronRightSVG />,
+          onClick: (event: MouseEvent<HTMLElement>) => {
+            next.onClick?.(event);
+            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) };
+      }
+    }
+
+    if (closeOnClick && item && typeof item === 'object' && 'onClick' in item) {
+      const baseItem = item as BaseItemProps;
+
+      return {
+        ...baseItem,
+        onClick: (event: MouseEvent<HTMLElement>) => {
+          baseItem.onClick?.(event);
+          onClose();
+        },
+      };
+    }
+
+    return item;
+  });
+}

package/src/helperComponents/Separator/Separator.tsx

@@ -0,0 +1,115 @@
+import { Button } from '@cloud-ru/ds-button';
+import { Divider, VARIANT } from '@cloud-ru/ds-divider';
+import { TruncateString, TruncateStringProps } from '@cloud-ru/ds-truncate-string';
+import { CSSProperties, ForwardedRef, MouseEvent, ReactNode, RefObject, useMemo } from 'react';
+
+import { useCollapseLevelContext, useNewListContext } from '../../components/Lists/contexts';
+import { TEST_IDS } from '../../constants';
+import { listLocale } from '../../locale';
+import { stopPropagation } from '../../utils';
+import { SELECT_BUTTON_SIZE_MAP } from './constants';
+import styles from './styles.module.scss';
+
+export type SeparatorProps = {
+  label?: string;
+  /** Слот иконки слева от label. */
+  beforeContent?: ReactNode;
+  truncate?: {
+    variant?: TruncateStringProps['variant'];
+  };
+  groupVariant?: 'subtitle' | 'subtitleTertiary';
+  divider?: boolean;
+  selectButton?: {
+    onClick?(e: MouseEvent<HTMLElement>): void;
+    indeterminate?: boolean;
+    checked?: boolean;
+    itemRef?: ForwardedRef<HTMLElement>;
+    label?: string;
+  };
+};
+
+export function Separator({
+  label,
+  beforeContent,
+  truncate,
+  divider,
+  groupVariant = 'subtitleTertiary',
+  selectButton,
+}: SeparatorProps) {
+  const { size = 'm' } = useNewListContext();
+  const { level = 0 } = useCollapseLevelContext();
+
+  const { t } = listLocale.useTranslations();
+
+  const selectButtonJSX = useMemo(() => {
+    if (!selectButton) {
+      return null;
+    }
+
+    const { onClick, checked, itemRef, label } = selectButton;
+
+    return (
+      <span className={styles.selectButton} data-size={size} data-weight={(divider && groupVariant) || undefined}>
+        <Button
+          view='function'
+          appearance='neutral'
+          size={SELECT_BUTTON_SIZE_MAP[size]}
+          tabIndex={0}
+          data-test-id={TEST_IDS.bulkSelectButton}
+          onClick={(e: MouseEvent<HTMLElement>) => {
+            onClick?.(e);
+            e.preventDefault();
+            e.stopPropagation();
+          }}
+          onFocus={stopPropagation}
+          innerRef={itemRef as RefObject<HTMLButtonElement>}
+          label={label ?? (checked ? t('groupSelectButton.reset') : t('groupSelectButton.select'))}
+        />
+      </span>
+    );
+  }, [divider, groupVariant, selectButton, size, t]);
+
+  if (label) {
+    return (
+      <div
+        className={styles.separatorWithLabel}
+        data-size={size}
+        data-level-one={level === 1 || undefined}
+        data-level-more-one={level > 1 || undefined}
+        style={{ '--level': level } as CSSProperties}
+      >
+        {beforeContent && (
+          <span className={styles.beforeContent} aria-hidden>
+            {beforeContent}
+          </span>
+        )}
+
+        <span className={styles.label} data-group-variant={groupVariant}>
+          <TruncateString variant={truncate?.variant} text={label} maxLines={1} />
+        </span>
+
+        <div className={styles.labelEnd}>
+          {selectButtonJSX}
+
+          {/* Figma weight-ось дивайдера = @cloud-ru/ds-divider `variant`: subtitle → regular, subtitleTertiary → thin (легаси light). */}
+          {divider && (
+            <Divider
+              className={styles.divider}
+              variant={groupVariant === 'subtitle' ? VARIANT.Regular : VARIANT.Thin}
+            />
+          )}
+        </div>
+      </div>
+    );
+  }
+
+  if (divider) {
+    return (
+      <div className={styles.separatorWithoutLabel} data-size={size}>
+        <Divider variant={VARIANT.Regular} />
+      </div>
+    );
+  }
+
+  return null;
+}

package/src/helperComponents/Separator/constants.ts

@@ -0,0 +1,11 @@
+import { ButtonProps } from '@cloud-ru/ds-button';
+
+import { Size } from '../../types';
+
+// @cloud-ru/ds-button пока без выделенного ButtonFunction и размера `xs` (Phase 5 cross-package blocker):
+// маппим размеры списка на ближайшие доступные `Button` size.
+export const SELECT_BUTTON_SIZE_MAP: Record<Size, ButtonProps['size']> = {
+  s: 's',
+  m: 's',
+  l: 'm',
+};

package/src/helperComponents/Separator/index.ts

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