@cloud-ru/ds-list 1.0.0

package/package.json

@@ -0,0 +1,70 @@
+{
+  "name": "@cloud-ru/ds-list",
+  "version": "1.0.0",
+  "description": "Списочный UI — компонент List для плоских/вложенных списков с выбором, группами и поиском и Droplist — тот же список в поповере.",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/cloud-ru-tech/snack-v2.git",
+    "directory": "packages/list"
+  },
+  "homepage": "https://github.com/cloud-ru-tech/snack-v2/tree/master/packages/list",
+  "license": "Apache-2.0",
+  "author": "Nikita Ershov <niershov@cloud.ru>",
+  "type": "module",
+  "main": "./dist/cjs/index.js",
+  "module": "./dist/esm/index.js",
+  "types": "./dist/esm/index.d.ts",
+  "exports": {
+    ".": {
+      "source": "./src/index.ts",
+      "types": "./dist/esm/index.d.ts",
+      "import": "./dist/esm/index.js",
+      "require": "./dist/cjs/index.js"
+    },
+    "./locale": {
+      "source": "./src/locale/index.ts",
+      "types": "./dist/esm/locale/index.d.ts",
+      "import": "./dist/esm/locale/index.js",
+      "require": "./dist/cjs/locale/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "src",
+    "./CHANGELOG.md",
+    "./LICENSE"
+  ],
+  "sideEffects": [
+    "*.css",
+    "**/*.css"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/sortable": "^10.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
+    "@tanstack/react-virtual": "^3.14.8",
+    "classnames": "^2.5.1",
+    "merge-refs": "^2.0.0",
+    "@cloud-ru/ds-adaptive": "^1.0.0",
+    "@cloud-ru/ds-bottom-sheet": "^1.0.0",
+    "@cloud-ru/ds-button": "^1.0.0",
+    "@cloud-ru/ds-divider": "^1.0.0",
+    "@cloud-ru/ds-dropdown": "^1.0.0",
+    "@cloud-ru/ds-icons": "^1.0.0",
+    "@cloud-ru/ds-info-block": "^1.0.0",
+    "@cloud-ru/ds-loader": "^1.0.0",
+    "@cloud-ru/ds-materials": "^1.0.0",
+    "@cloud-ru/ds-portal-context": "^1.0.0",
+    "@cloud-ru/ds-scroll": "^1.0.0",
+    "@cloud-ru/ds-toggles": "^1.0.0",
+    "@cloud-ru/ds-search-private": "^1.0.0",
+    "@cloud-ru/ds-truncate-string": "^1.0.0",
+    "@cloud-ru/ds-utils": "^1.0.0"
+  },
+  "peerDependencies": {
+    "@cloud-ru/ds-locale": "^1.0.0"
+  }
+}

package/src/_iconSizes.scss

@@ -0,0 +1,7 @@
+@use '@cloud-ru/ds-figma-variables/build/scss/styles/styles.module' as base;
+
+$iconSizeMap: (
+  's': base.$sn-density-size-icon-xs,
+  'm': base.$sn-density-size-icon-s,
+  'l': base.$sn-density-size-icon-s,
+);

package/src/components/Items/AccordionItem/AccordionItem.tsx

@@ -0,0 +1,79 @@
+import { ChevronDownSVG, ChevronUpSVG } from '@cloud-ru/ds-icons/interface/system';
+import { useCallback } from 'react';
+
+import { TEST_IDS } from '../../../constants';
+import { CollapseBlockPrivate } from '../../../helperComponents';
+import {
+  CollapseLevelContext,
+  useCollapseContext,
+  useCollapseLevelContext,
+  useSelectionContext,
+} from '../../Lists/contexts';
+import { BaseItem } from '../BaseItem';
+import { useGroupItemSelection, useRenderItems } from '../hooks';
+import { CommonFlattenProps, FlattenAccordionItem } from '../types';
+
+type AccordionItemProps = Omit<FlattenAccordionItem, 'type'> & CommonFlattenProps;
+
+export function AccordionItem({ id, disabled, allChildIds, items, ...option }: AccordionItemProps) {
+  const { level = 0 } = useCollapseLevelContext();
+  const { openCollapseItems = [], toggleOpenCollapseItem } = useCollapseContext();
+
+  const { value, isSelectionSingle, isSelectionMultiple } = useSelectionContext();
+
+  const {
+    indeterminate,
+    handleOnSelect,
+    checked: checkedProp,
+  } = useGroupItemSelection({
+    items,
+    id,
+    disabled,
+    allChildIds,
+  });
+
+  const isOpen = Boolean(openCollapseItems.includes(id ?? ''));
+
+  const checked = Boolean(
+    (indeterminate && !isOpen && isSelectionSingle && value && allChildIds.includes(value)) ||
+    (isSelectionMultiple && checkedProp),
+  );
+
+  const handleKeyDown = useCallback(() => {
+    toggleOpenCollapseItem?.(id ?? '');
+  }, [id, toggleOpenCollapseItem]);
+
+  const itemsJSX = useRenderItems(items);
+
+  // Раскрытие привязано к явной кнопке-триггеру `groupIndicator` (шеврон справа) и
+  // ТОЛЬКО переключает collapse — `option.onClick` сюда не зовём, иначе у потребителя,
+  // который вешает на onClick собственный toggle, выходит двойное переключение.
+  // Клик по телу строки (выбор/навигация) идёт через `option.onClick` в BaseItem.
+  const handleExpandIconClick = () => {
+    toggleOpenCollapseItem?.(id ?? '');
+  };
+
+  return (
+    <CollapseBlockPrivate
+      header={
+        <BaseItem
+          {...option}
+          id={id}
+          disabled={disabled}
+          open={isOpen}
+          expandIcon={isOpen ? <ChevronUpSVG /> : <ChevronDownSVG />}
+          onExpandIconClick={handleExpandIconClick}
+          isParentNode
+          onOpenNestedList={handleKeyDown}
+          checked={checked}
+          indeterminate={indeterminate}
+          onSelect={!disabled ? handleOnSelect : undefined}
+        />
+      }
+      expanded={isOpen}
+      data-test-id={`${TEST_IDS.accordionItem}-${id}`}
+    >
+      <CollapseLevelContext.Provider value={{ level: level + 1 }}>{itemsJSX}</CollapseLevelContext.Provider>
+    </CollapseBlockPrivate>
+  );
+}

package/src/components/Items/AccordionItem/index.ts

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

package/src/components/Items/BaseItem/BaseItem.tsx

@@ -0,0 +1,274 @@
+import { Checkbox, Switch } from '@cloud-ru/ds-toggles';
+import { extractSupportProps } from '@cloud-ru/ds-utils';
+import cn from 'classnames';
+import { FocusEvent, KeyboardEvent, MouseEvent, ReactNode, RefObject } from 'react';
+
+import { DEFAULT_SIZE, TEST_IDS } from '../../../constants';
+import { ItemContent } from '../../../helperComponents';
+import {
+  useCollapseLevelContext,
+  useNewListContext,
+  useOpenListContext,
+  useSelectionContext,
+} from '../../Lists/contexts';
+import commonStyles from '../styles.module.scss';
+import { FlattenBaseItem } from '../types';
+import { isContentItem, isPrimitiveContent } from '../utils';
+import { TOGGLE_SIZE_MAP } from './constants';
+import styles from './styles.module.scss';
+
+type AllBaseItemProps = FlattenBaseItem & {
+  expandIcon?: ReactNode;
+  open?: boolean;
+  indeterminate?: boolean;
+  onSelect?(): void;
+  isParentNode?: boolean;
+  onOpenNestedList?(e?: KeyboardEvent<HTMLElement>): void;
+  /**
+   * Клик по явной кнопке-триггеру `groupIndicator` (шеврон справа), открывающей/закрывающей
+   * вложенный список. Если передан — шеврон рендерится как отдельная интерактивная кнопка
+   * со своим state-layer'ом, а клик по телу строки больше не переключает раскрытие.
+   */
+  onExpandIconClick?(e: MouseEvent<HTMLElement>): void;
+  /**
+   * Слот ручки drag&drop (Figma `centeredWrapper`) — рендерится первым в строке, перед
+   * маркером/чекбоксом. Интерактивность (обработчики `@dnd-kit`) и содержимое (иконка)
+   * приходят снаружи — `BaseItem` только позиционирует слот, ничего не знает про DnD.
+   */
+  dragHandle?: ReactNode;
+};
+
+export function BaseItem({
+  beforeContent,
+  afterContent,
+  content,
+  onClick,
+  onMouseDown,
+  id,
+  expandIcon,
+  disabled,
+  open,
+  itemRef,
+  switch: switchProp,
+  onKeyDown,
+  onFocus,
+  indeterminate,
+  checked: checkedProp,
+  onSelect,
+  onOpenNestedList,
+  onExpandIconClick,
+  isParentNode,
+  className,
+  inactive,
+  itemWrapRender,
+  dragHandle,
+  ...rest
+}: AllBaseItemProps) {
+  const interactive = !inactive;
+
+  const { size = DEFAULT_SIZE, marker, contentRender, firstItemId, focusFlattenItems } = useNewListContext();
+  const { level = 0 } = useCollapseLevelContext();
+  const { closeDroplist, closeDroplistOnItemClick } = useOpenListContext();
+  const { value, onChange, mode, isSelectionSingle, isSelectionMultiple } = useSelectionContext();
+
+  const isChecked = isSelectionSingle ? (checkedProp ?? value === id) : (checkedProp ?? value?.includes(id ?? ''));
+
+  const handleChange = () => {
+    onChange?.(id);
+  };
+
+  const handleItemMouseDown = (e: MouseEvent<HTMLElement>) => {
+    if (disabled) return;
+
+    onMouseDown?.(e);
+  };
+
+  const handleItemFocus = (e: FocusEvent<HTMLElement>) => {
+    onFocus?.(e);
+    e.stopPropagation();
+  };
+
+  const handleCheckboxChange = () => {
+    if (isParentNode && onSelect) {
+      onSelect();
+    } else {
+      handleChange();
+    }
+  };
+
+  const handleItemClick = (e: MouseEvent<HTMLElement> | KeyboardEvent<HTMLElement>) => {
+    if (disabled) {
+      return;
+    }
+
+    // Активация элемента: клик мышью и Enter/Space с клавиатуры дают одинаковый эффект.
+    // `onClick` в публичном API типизирован под `MouseEvent` (это семантически клик по
+    // пункту меню), поэтому keyboard-событие пробрасывается под тем же типом.
+    onClick?.(e as MouseEvent<HTMLElement>);
+
+    if (interactive && !isParentNode) {
+      handleChange();
+    }
+
+    if (!isSelectionMultiple && closeDroplistOnItemClick) {
+      closeDroplist();
+    }
+  };
+
+  const handleItemKeyDown = (e: KeyboardEvent<HTMLElement>) => {
+    onKeyDown?.(e);
+
+    if (e.key === 'ArrowRight' && onOpenNestedList) {
+      onOpenNestedList(e);
+
+      e.preventDefault();
+      e.stopPropagation();
+
+      return;
+    }
+
+    if (e.key === 'Enter' || e.key === ' ') {
+      if (isSelectionMultiple && isParentNode && onSelect) {
+        onSelect();
+      }
+
+      // Повторяем клик по элементу: `handleItemClick` сам вызывает `handleChange` /
+      // `closeDroplist`. Отдельный `handleChange` здесь не нужен — иначе в multiple-режиме
+      // выбор переключался бы дважды (toggle + откат) и Enter не менял бы состояние.
+      !isParentNode && handleItemClick(e);
+
+      e.stopPropagation();
+      e.preventDefault();
+    }
+  };
+
+  const handleCheckboxClick = (e: MouseEvent) => {
+    if (isParentNode) {
+      e.stopPropagation();
+    }
+  };
+
+  const handleExpandIconClick = (e: MouseEvent<HTMLElement>) => {
+    if (disabled) {
+      return;
+    }
+
+    // Триггер раскрытия изолирован от клика по строке: всплытие останавливаем,
+    // чтобы клик по шеврону не активировал выбор/навигацию пункта.
+    e.stopPropagation();
+    e.preventDefault();
+    onExpandIconClick?.(e);
+  };
+
+  const props = extractSupportProps(rest);
+
+  let contentNode: ReactNode;
+  if (content && isContentItem(content)) {
+    contentNode = contentRender?.({ id, content, disabled }) ?? <ItemContent disabled={disabled} {...content} />;
+  } else if (isPrimitiveContent(content)) {
+    // Примитивный content — шорткат `{ label: content }`: рендерим через ItemContent,
+    // чтобы строка получила размерную высоту, а не схлопывалась до высоты текста.
+    contentNode = <ItemContent disabled={disabled} label={content} />;
+  } else {
+    contentNode = <div className={styles.content}> {content} </div>;
+  }
+
+  const stateLayerState =
+    isSelectionSingle && isChecked && !switchProp && !isParentNode
+      ? 'activatedOnBackground'
+      : 'emptyNeutralOnBackground';
+
+  const itemJSX = (
+    <div
+      className={cn(commonStyles.itemWrapper, styles.innerWrapper, className)}
+      data-inactive={inactive || undefined}
+      data-disabled={disabled || undefined}
+      data-variant={mode || undefined}
+      data-checked={(isParentNode && isChecked) || (!isParentNode && isChecked && !switchProp) || undefined}
+    >
+      <span className={commonStyles.stateLayer} aria-hidden data-state={stateLayerState} />
+      <li
+        data-type='outside'
+        role={'menuitem'}
+        data-test-id={props['data-test-id'] || `${TEST_IDS.baseItem}_${id}`}
+        ref={itemRef as RefObject<HTMLLIElement>}
+        className={cn(commonStyles.listItem, styles.droplistItem)}
+        data-size={size}
+        onClick={handleItemClick}
+        onMouseDown={handleItemMouseDown}
+        tabIndex={firstItemId && id === focusFlattenItems[firstItemId]?.originalId ? 0 : -1}
+        data-non-pointer={(inactive && !onClick) || undefined}
+        data-variant={mode || undefined}
+        data-open={open || undefined}
+        onKeyDown={handleItemKeyDown}
+        onFocus={handleItemFocus}
+        style={{ '--level': level }}
+        data-level-one={level === 1 || undefined}
+        data-level-more-one={level > 1 || undefined}
+        data-checked={(isParentNode && (indeterminate || isChecked)) || (isChecked && !switchProp) || undefined}
+      >
+        {dragHandle && <div className={styles.dragHandle}>{dragHandle}</div>}
+
+        {!switchProp && isSelectionSingle && marker && !isParentNode && interactive && (
+          <div className={styles.markerContainer} data-test-id={TEST_IDS.baseItemMarker} />
+        )}
+
+        {!switchProp && isSelectionMultiple && interactive && (
+          <div className={styles.checkbox}>
+            <Checkbox
+              size={TOGGLE_SIZE_MAP[size]}
+              disabled={disabled}
+              tabIndex={-1}
+              onChange={isParentNode ? handleCheckboxChange : undefined}
+              checked={isChecked}
+              data-test-id={TEST_IDS.baseItemCheckbox}
+              onClick={handleCheckboxClick}
+              indeterminate={indeterminate}
+            />
+          </div>
+        )}
+
+        {beforeContent && <div className={styles.beforeContent}>{beforeContent}</div>}
+        {contentNode}
+        {afterContent && <div className={styles.afterContent}>{afterContent}</div>}
+
+        {switchProp && interactive && (
+          <Switch
+            size={TOGGLE_SIZE_MAP[size]}
+            disabled={disabled}
+            checked={isChecked}
+            data-test-id={TEST_IDS.baseItemSwitch}
+            // TODO Phase 5: восстановить поддержку showIcon={showSwitchIcon} когда появится в @cloud-ru/ds-toggles
+          />
+        )}
+
+        {!switchProp &&
+          expandIcon &&
+          (onExpandIconClick ? (
+            <button
+              type='button'
+              className={styles.groupIndicator}
+              data-size={size}
+              data-open={open || undefined}
+              data-test-id={TEST_IDS.groupIndicator}
+              tabIndex={-1}
+              disabled={disabled}
+              onClick={handleExpandIconClick}
+              onMouseDown={e => e.stopPropagation()}
+            >
+              <span className={styles.groupIndicatorState} aria-hidden />
+              {expandIcon}
+            </button>
+          ) : (
+            <span className={styles.expandableIcon}>{expandIcon}</span>
+          ))}
+      </li>
+    </div>
+  );
+
+  if (!itemWrapRender) {
+    return itemJSX;
+  }
+
+  return itemWrapRender(itemJSX);
+}

package/src/components/Items/BaseItem/constants.ts

@@ -0,0 +1,9 @@
+import { CheckboxProps } from '@cloud-ru/ds-toggles';
+
+import { Size } from '../../../types';
+
+export const TOGGLE_SIZE_MAP: Record<Size, NonNullable<CheckboxProps['size']>> = {
+  s: 'xs',
+  m: 's',
+  l: 's',
+};

package/src/components/Items/BaseItem/index.ts

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