@cloud-ru/ds-uikit-product-header 2.1.7 → 2.1.8-preview-04e34550.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cloud-ru/ds-uikit-product-header",
-  "version": "2.1.7",
+  "version": "2.1.8-preview-04e34550.0",
   "description": "Продуктовая шапка консоли — HeaderLayout, MainMenu, UserMenu, Logo, PathBreadcrumbs и PlatformLogo.",
   "repository": {
     "type": "git",
@@ -45,33 +45,36 @@
     "@dnd-kit/utilities": "^3.2.2",
     "classnames": "^2.5.1",
     "fuse.js": "^7.1.0",
-    "@cloud-ru/ds-avatar": "^1.0.13",
-    "@cloud-ru/ds-accordion": "^1.2.4",
-    "@cloud-ru/ds-adaptive": "^1.0.2",
-    "@cloud-ru/ds-breadcrumbs": "^1.0.33",
-    "@cloud-ru/ds-button": "^1.0.4",
-    "@cloud-ru/ds-divider": "^1.0.2",
-    "@cloud-ru/ds-drag-and-drop": "^1.1.3",
-    "@cloud-ru/ds-card": "^1.0.25",
-    "@cloud-ru/ds-drawer": "^2.1.2",
-    "@cloud-ru/ds-info-block": "^1.0.3",
-    "@cloud-ru/ds-icons": "^1.6.0",
-    "@cloud-ru/ds-locale": "^1.0.0",
-    "@cloud-ru/ds-modal": "^2.0.3",
-    "@cloud-ru/ds-portal-context": "^1.0.2",
-    "@cloud-ru/ds-list": "^2.3.6",
-    "@cloud-ru/ds-promo-tag": "^1.0.3",
-    "@cloud-ru/ds-scroll": "^1.0.5",
-    "@cloud-ru/ds-search": "^1.0.16",
-    "@cloud-ru/ds-segment-control": "^1.0.15",
-    "@cloud-ru/ds-skeleton": "^1.0.2",
-    "@cloud-ru/ds-theme": "^2.1.0",
-    "@cloud-ru/ds-typography": "^1.0.2",
-    "@cloud-ru/ds-tooltip": "^1.0.13",
-    "@cloud-ru/ds-uikit-product-card-predefined": "^4.0.13",
-    "@cloud-ru/ds-uikit-product-switch-row": "^1.0.16",
-    "@cloud-ru/ds-utils": "^1.2.0",
-    "@cloud-ru/ds-uikit-product-title-clickable": "^1.0.19"
+    "@cloud-ru/ds-accordion": "1.2.4",
+    "@cloud-ru/ds-breadcrumbs": "1.0.34-preview-04e34550.0",
+    "@cloud-ru/ds-adaptive": "1.0.2",
+    "@cloud-ru/ds-avatar": "1.0.13",
+    "@cloud-ru/ds-divider": "1.0.2",
+    "@cloud-ru/ds-button": "1.0.4",
+    "@cloud-ru/ds-card": "1.0.25",
+    "@cloud-ru/ds-icons": "1.6.0",
+    "@cloud-ru/ds-drag-and-drop": "1.1.3",
+    "@cloud-ru/ds-drawer": "2.1.2",
+    "@cloud-ru/ds-locale": "1.0.0",
+    "@cloud-ru/ds-info-block": "1.0.3",
+    "@cloud-ru/ds-materials": "2.0.1",
+    "@cloud-ru/ds-list": "2.3.7-preview-04e34550.0",
+    "@cloud-ru/ds-modal": "2.0.3",
+    "@cloud-ru/ds-portal-context": "1.0.2",
+    "@cloud-ru/ds-promo-tag": "1.0.3",
+    "@cloud-ru/ds-scroll": "1.0.5",
+    "@cloud-ru/ds-search": "1.0.16",
+    "@cloud-ru/ds-segment-control": "1.0.15",
+    "@cloud-ru/ds-theme": "2.1.0",
+    "@cloud-ru/ds-skeleton": "1.0.2",
+    "@cloud-ru/ds-toggles": "1.1.11",
+    "@cloud-ru/ds-tooltip": "1.0.13",
+    "@cloud-ru/ds-truncate-string": "1.0.14",
+    "@cloud-ru/ds-typography": "1.0.2",
+    "@cloud-ru/ds-uikit-product-title-clickable": "1.0.19",
+    "@cloud-ru/ds-utils": "1.2.0",
+    "@cloud-ru/ds-uikit-product-switch-row": "1.0.16",
+    "@cloud-ru/ds-uikit-product-card-predefined": "4.0.14-preview-04e34550.0"
   },
   "publishConfig": {
     "access": "public"

package/src/components/ListCustom/helperComponents/ContentWrapperCustom/ContentWrapperCustom.tsx

@@ -0,0 +1,106 @@
+import { TruncateString, TruncateStringProps } from '@cloud-ru/ds-truncate-string';
+import cn from 'classnames';
+import { ReactNode, useMemo } from 'react';
+
+import styles from './styles.module.scss';
+
+type TruncateProps = {
+  label?: number;
+  description?: number;
+  variant?: TruncateStringProps['variant'];
+};
+
+export type ContentWrapperCustomProps = {
+  /** Слот до текста */
+  beforeContent?: ReactNode;
+  /** Слот после текста */
+  afterContent?: ReactNode;
+  /** Заголовок строки / группы */
+  label?: string | number;
+  /** Аннотация справа от label */
+  caption?: string;
+  /** Описание под label */
+  description?: string;
+  /** Настройки усечения длинных строк */
+  truncate?: TruncateProps;
+  /** Готовый узел вместо структурного текста (результат `contentRender` и т.п.) */
+  contentNode?: ReactNode;
+  /** Слот справа в групповом заголовке (bulk select) */
+  selectButton?: ReactNode;
+  /** Раскладка: строка списка или заголовок группы */
+  layout?: 'item' | 'group';
+  /** Визуальный стиль подписи группы */
+  groupVariant?: 'subtitle' | 'subtitleTertiary';
+  disabled?: boolean;
+  className?: string;
+};
+
+const DEFAULT_TRUNCATE: TruncateProps = {
+  label: 1,
+  description: 2,
+  variant: 'end',
+};
+
+export function ContentWrapperCustom({
+  beforeContent,
+  afterContent,
+  label,
+  caption,
+  description,
+  truncate: truncateProp,
+  contentNode,
+  selectButton,
+  layout = 'item',
+  groupVariant = 'subtitleTertiary',
+  disabled,
+  className,
+}: ContentWrapperCustomProps) {
+  const truncate = useMemo(
+    () => ({
+      ...DEFAULT_TRUNCATE,
+      ...truncateProp,
+    }),
+    [truncateProp],
+  );
+
+  const hasStructuredText = label !== undefined && label !== null && !contentNode;
+
+  return (
+    <div className={cn(styles.root, className)} data-layout={layout} data-disabled={disabled || undefined}>
+      {beforeContent && (
+        <div className={styles.centeredWrapper} aria-hidden>
+          <div className={styles.elementBeforeContent}>{beforeContent}</div>
+        </div>
+      )}
+
+      <div className={styles.textWrapper}>
+        {hasStructuredText ? (
+          <div className={styles.textContent}>
+            <div className={styles.headline}>
+              <div className={styles.label} data-group-variant={layout === 'group' ? groupVariant : undefined}>
+                <TruncateString variant={truncate.variant} text={String(label)} maxLines={truncate.label} />
+              </div>
+              {caption && layout === 'item' && <span className={styles.caption}>{caption}</span>}
+            </div>
+
+            {description && layout === 'item' && (
+              <div className={styles.description}>
+                <TruncateString text={description} maxLines={truncate.description} />
+              </div>
+            )}
+          </div>
+        ) : (
+          contentNode
+        )}
+
+        {selectButton && <span className={styles.selectButton}>{selectButton}</span>}
+      </div>
+
+      {afterContent && (
+        <div className={cn(styles.centeredWrapper, styles.centeredWrapperAfter)} aria-hidden>
+          <div className={styles.elementAfterContent}>{afterContent}</div>
+        </div>
+      )}
+    </div>
+  );
+}

package/src/components/ListCustom/helperComponents/ContentWrapperCustom/index.ts

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

package/src/components/ListCustom/helperComponents/ContentWrapperCustom/styles.module.scss

@@ -0,0 +1,176 @@
+@use '@cloud-ru/ds-figma-variables/build/scss/styles/styles.module' as base;
+@use '@cloud-ru/ds-figma-variables/build/scss/components/list.module' as list;
+
+// Figma contentWrapperCustom (17001:43602): gap/padding из primitive, типографика size/s.
+// layout=item — строка списка; layout=group — заголовок группы (listItemGroupCustom).
+
+.root {
+  display: flex;
+  flex: 1 0 0;
+  gap: base.$sn-primitive-dimension-6;
+  min-width: 0;
+}
+
+.centeredWrapper {
+  display: flex;
+  align-items: center;
+  color: base.$sn-theme-color-available-version-textTertiary;
+
+  svg {
+    width: 100%;
+    max-width: 100%;
+    height: 100%;
+    max-height: 100%;
+  }
+}
+
+.centeredWrapperAfter {
+  justify-content: flex-end;
+}
+
+.textWrapper {
+  display: flex;
+  flex: 1 0 0;
+  align-items: flex-start;
+}
+
+.textContent {
+  display: flex;
+  flex: 1 0 0;
+  flex-direction: column;
+  gap: list.$sn-list-anatomy-size-s-listItem-contentWrapper-textWrapper-textContent-gap;
+  align-items: flex-start;
+  justify-content: center;
+
+  padding: 0;
+}
+
+.headline {
+  display: flex;
+  align-items: center;
+  align-self: stretch;
+  justify-content: space-between;
+
+  width: 100%;
+  min-height: list.$sn-list-anatomy-size-s-listItem-contentWrapper-textWrapper-textContent-headline-minHeight;
+}
+
+.label {
+  overflow: hidden;
+  flex: 1 1 50%;
+
+  min-width: 0;
+  max-width: max-content;
+
+  color: base.$sn-theme-color-available-version-textMain;
+}
+
+.caption {
+  overflow: hidden;
+  flex: 1 1 50%;
+
+  min-width: 0;
+  max-width: max-content;
+
+  color: base.$sn-theme-color-available-version-textTertiary;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.description {
+  color: base.$sn-theme-color-available-version-textSecondary;
+}
+
+.elementBeforeContent, .elementAfterContent {
+  display: flex;
+}
+
+.root[data-layout='item'] {
+  align-items: flex-start;
+  padding: base.$sn-primitive-dimension-8 base.$sn-primitive-dimension-4;
+
+  .centeredWrapper {
+    width: base.$sn-density-icon-s;
+    height: list.$sn-list-anatomy-size-s-listItem-centeredWrapper-height;
+  }
+
+  .elementBeforeContent, .elementAfterContent {
+    flex-direction: column;
+    align-items: flex-start;
+    min-width: base.$sn-density-icon-s;
+    height: 24px; // TODO: raw value?
+  }
+
+  .headline {
+    gap: base.$sn-primitive-dimension-4;
+  }
+
+  .label {
+    @include base.composite-var(base.$base-styles, 'sn', 'regular', 'body', 's');
+
+    display: flex;
+    align-items: center;
+  }
+
+  .caption {
+    @include base.composite-var(base.$base-styles, 'sn', 'thin', 'label', 's');
+  }
+
+  .description {
+    @include base.composite-var(base.$base-styles, 'sn', 'regular', 'body', 's');
+  }
+}
+
+.root[data-layout='group'] {
+  align-items: center;
+  min-height: base.$sn-primitive-dimension-28;
+
+  .centeredWrapper {
+    width: base.$sn-density-icon-s;
+    height: base.$sn-density-icon-s;
+    padding-top: list.$sn-list-anatomy-size-s-listItem-centeredWrapper-paddingVertical;
+    padding-bottom: list.$sn-list-anatomy-size-s-listItem-centeredWrapper-paddingVertical;
+  }
+
+  .elementBeforeContent, .elementAfterContent {
+    align-items: center;
+  }
+
+  .textWrapper {
+    gap: base.$sn-primitive-dimension-2;
+    align-items: center;
+    padding-top: list.$sn-list-anatomy-size-s-listItem-contentWrapper-paddingVertical;
+    padding-bottom: list.$sn-list-anatomy-size-s-listItem-contentWrapper-paddingVertical;
+  }
+
+  .headline {
+    gap: list.$sn-list-anatomy-size-s-listItem-contentWrapper-textWrapper-textContent-headline-gap;
+
+    @include base.composite-var(base.$base-styles, 'sn', 'regular', 'label', 'm');
+  }
+
+  .label[data-group-variant='subtitle'] {
+    color: base.$sn-theme-color-available-version-textMain;
+  }
+
+  .label[data-group-variant='subtitleTertiary'] {
+    color: base.$sn-theme-color-available-version-textTertiary;
+  }
+}
+
+.root[data-disabled] {
+  .textWrapper {
+    opacity: base.$sn-theme-effect-opacity-disabled;
+  }
+
+  .centeredWrapper {
+    opacity: base.$sn-theme-effect-opacity-disabled;
+  }
+}
+
+.selectButton {
+  display: flex;
+  flex-shrink: 0;
+  justify-content: flex-end;
+  margin-left: auto;
+}

package/src/components/ListCustom/helperComponents/ListItemCustom/ListItemCustom.tsx

@@ -0,0 +1,146 @@
+import { isContentItem, isPrimitiveContent, ItemContentProps, TEST_IDS } from '@cloud-ru/ds-list';
+import { Checkbox } from '@cloud-ru/ds-toggles';
+import cn from 'classnames';
+import { CSSProperties, RefObject } from 'react';
+
+import { ContentWrapperCustom } from '../ContentWrapperCustom';
+import { SELECTION_MODE } from './constants';
+import styles from './styles.module.scss';
+import { ListItemCustomProps } from './types';
+
+function resolveStructuredContent(
+  content: ListItemCustomProps['content'],
+  contentFromRender?: boolean,
+): ItemContentProps | undefined {
+  if (contentFromRender) {
+    return undefined;
+  }
+  if (isContentItem(content)) {
+    return content;
+  }
+  if (isPrimitiveContent(content)) {
+    return { label: content };
+  }
+  return undefined;
+}
+
+/**
+ * Кастомная оболочка строки `List`/`Droplist` (Figma `listItemCustom`).
+ * Маркер (single) и чекбокс (multiple) рисуются внутри по `selectionMode` / `checked` / `disabled`.
+ */
+export function ListItemCustom({
+  selectionMode = SELECTION_MODE.None,
+  checked = false,
+  disabled = false,
+  content,
+  contentNode,
+  contentFromRender,
+  beforeContent,
+  afterContent,
+  dragHandle,
+  switchControl,
+  expandIcon,
+  onExpandIconClick,
+  expandIconInteractive,
+  inactive,
+  open,
+  isParentNode,
+  level = 0,
+  className,
+  itemRef,
+  tabIndex = -1,
+  style,
+  onClick,
+  onMouseDown,
+  onKeyDown,
+  onFocus,
+  'data-test-id': dataTestId,
+}: ListItemCustomProps) {
+  const structuredContent = resolveStructuredContent(content, contentFromRender);
+  const isSingle = selectionMode === SELECTION_MODE.Single;
+  const isMultiple = selectionMode === SELECTION_MODE.Multiple;
+
+  // Figma: activated-подложка только у single + checked + !disabled; multiple всегда emptyNeutral.
+  const stateLayerState =
+    isSingle && checked && !disabled && !isParentNode && !switchControl
+      ? 'activatedOnBackground'
+      : 'emptyNeutralOnBackground';
+
+  // Как в BaseItem: маркер не у parent/switch; чекбокс — только multiple без switch.
+  const showMarker = isSingle && checked && !isParentNode && !switchControl;
+  const showCheckbox = isMultiple && !switchControl;
+
+  return (
+    <div
+      className={cn(styles.itemWrapper, className)}
+      data-selection-mode={selectionMode}
+      data-inactive={inactive || undefined}
+      data-disabled={disabled || undefined}
+      data-checked={checked || undefined}
+      data-open={open || undefined}
+    >
+      {!disabled && <span className={styles.stateLayer} aria-hidden data-state={stateLayerState} />}
+      <li
+        data-type='outside'
+        role='menuitem'
+        data-test-id={dataTestId}
+        ref={itemRef as RefObject<HTMLLIElement>}
+        className={styles.listItem}
+        onClick={onClick}
+        onMouseDown={onMouseDown}
+        tabIndex={tabIndex}
+        data-non-pointer={(inactive && !onClick) || undefined}
+        data-open={open || undefined}
+        aria-expanded={isParentNode ? Boolean(open) : undefined}
+        onKeyDown={onKeyDown}
+        onFocus={onFocus}
+        style={{ '--level': level, ...style } as CSSProperties}
+        data-level-one={level === 1 || undefined}
+        data-level-more-one={level > 1 || undefined}
+        data-checked={checked || undefined}
+        data-inactive={inactive || undefined}
+        data-disabled={disabled || undefined}
+      >
+        {dragHandle}
+
+        {showMarker && <div className={styles.marker} aria-hidden data-disabled={disabled || undefined} />}
+
+        {showCheckbox && (
+          <div className={styles.checkbox}>
+            <Checkbox size='s' disabled={disabled} checked={checked} tabIndex={-1} />
+          </div>
+        )}
+
+        <ContentWrapperCustom
+          layout='item'
+          beforeContent={beforeContent}
+          afterContent={afterContent}
+          label={structuredContent?.label}
+          caption={structuredContent?.caption}
+          description={structuredContent?.description}
+          truncate={structuredContent?.truncate}
+          contentNode={structuredContent ? undefined : contentNode}
+          disabled={disabled}
+        />
+
+        {switchControl}
+
+        {expandIcon && (
+          <div className={styles.expandCenteredWrapper}>
+            <span
+              className={styles.groupIndicator}
+              data-open={open || undefined}
+              data-disabled={disabled || undefined}
+              data-interactive={expandIconInteractive || undefined}
+              data-test-id={TEST_IDS.groupIndicator}
+              onClick={onExpandIconClick}
+              aria-hidden
+            >
+              {expandIcon}
+            </span>
+          </div>
+        )}
+      </li>
+    </div>
+  );
+}

package/src/components/ListCustom/helperComponents/ListItemCustom/constants.ts

@@ -0,0 +1,4 @@
+import { MODE } from '@cloud-ru/ds-list';
+
+/** Режим выбора строки — совпадает с `MODE` списка (`none` / `single` / `multiple`). */
+export const SELECTION_MODE = MODE;

package/src/components/ListCustom/helperComponents/ListItemCustom/index.ts

@@ -0,0 +1,3 @@
+export * from './ListItemCustom';
+export * from './constants';
+export * from './types';