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

package/dist/cjs/components/ListCustom/helperComponents/ContentWrapperCustom/ContentWrapperCustom.d.ts

@@ -0,0 +1,33 @@
+import { TruncateStringProps } from '@cloud-ru/ds-truncate-string';
+import { ReactNode } from 'react';
+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;
+};
+export declare function ContentWrapperCustom({ beforeContent, afterContent, label, caption, description, truncate: truncateProp, contentNode, selectButton, layout, groupVariant, disabled, className, }: ContentWrapperCustomProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/cjs/components/ListCustom/helperComponents/ContentWrapperCustom/ContentWrapperCustom.js

@@ -0,0 +1,24 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ContentWrapperCustom = ContentWrapperCustom;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const truncate_string_1 = require("@cloud-ru/ds-truncate-string");
+const classnames_1 = __importDefault(require("classnames"));
+const react_1 = require("react");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+const DEFAULT_TRUNCATE = {
+    label: 1,
+    description: 2,
+    variant: 'end',
+};
+function ContentWrapperCustom({ beforeContent, afterContent, label, caption, description, truncate: truncateProp, contentNode, selectButton, layout = 'item', groupVariant = 'subtitleTertiary', disabled, className, }) {
+    const truncate = (0, react_1.useMemo)(() => ({
+        ...DEFAULT_TRUNCATE,
+        ...truncateProp,
+    }), [truncateProp]);
+    const hasStructuredText = label !== undefined && label !== null && !contentNode;
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(styles_module_scss_1.default.root, className), "data-layout": layout, "data-disabled": disabled || undefined, children: [beforeContent && ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.centeredWrapper, "aria-hidden": true, children: (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.elementBeforeContent, children: beforeContent }) })), (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.textWrapper, children: [hasStructuredText ? ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.textContent, children: [(0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.headline, children: [(0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.label, "data-group-variant": layout === 'group' ? groupVariant : undefined, children: (0, jsx_runtime_1.jsx)(truncate_string_1.TruncateString, { variant: truncate.variant, text: String(label), maxLines: truncate.label }) }), caption && layout === 'item' && (0, jsx_runtime_1.jsx)("span", { className: styles_module_scss_1.default.caption, children: caption })] }), description && layout === 'item' && ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.description, children: (0, jsx_runtime_1.jsx)(truncate_string_1.TruncateString, { text: description, maxLines: truncate.description }) }))] })) : (contentNode), selectButton && (0, jsx_runtime_1.jsx)("span", { className: styles_module_scss_1.default.selectButton, children: selectButton })] }), afterContent && ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(styles_module_scss_1.default.centeredWrapper, styles_module_scss_1.default.centeredWrapperAfter), "aria-hidden": true, children: (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.elementAfterContent, children: afterContent }) }))] }));
+}

package/dist/cjs/components/ListCustom/helperComponents/ContentWrapperCustom/index.d.ts

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

package/dist/cjs/components/ListCustom/helperComponents/ContentWrapperCustom/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./ContentWrapperCustom"), exports);

package/dist/cjs/components/ListCustom/helperComponents/ContentWrapperCustom/styles.module.css

@@ -0,0 +1,168 @@
+.root{
+  display:flex;
+  flex:1 0 0;
+  gap:var(--sn-primitive-dimension-6, 6px);
+  min-width:0;
+}
+
+.centeredWrapper{
+  display:flex;
+  align-items:center;
+  color:var(--sn-theme-color-available-version-textTertiary, var(--sn-brand-color-text-version-tertiary, rgba(0, 0, 0, 0.5803921569)));
+}
+.centeredWrapper 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:var(--sn-list-anatomy-size-s-listItem-contentWrapper-textWrapper-textContent-gap, var(--sn-primitive-dimension-0, 0px));
+  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:var(--sn-list-anatomy-size-s-listItem-contentWrapper-textWrapper-textContent-headline-minHeight, var(--sn-primitive-font-lineHeight-16, 16px));
+}
+
+.label{
+  overflow:hidden;
+  flex:1 1 50%;
+  min-width:0;
+  max-width:-moz-max-content;
+  max-width:max-content;
+  color:var(--sn-theme-color-available-version-textMain, var(--sn-brand-color-text-version-main, #000000));
+}
+
+.caption{
+  overflow:hidden;
+  flex:1 1 50%;
+  min-width:0;
+  max-width:-moz-max-content;
+  max-width:max-content;
+  color:var(--sn-theme-color-available-version-textTertiary, var(--sn-brand-color-text-version-tertiary, rgba(0, 0, 0, 0.5803921569)));
+  text-overflow:ellipsis;
+  white-space:nowrap;
+}
+
+.description{
+  color:var(--sn-theme-color-available-version-textSecondary, var(--sn-brand-color-text-version-secondary, rgba(0, 0, 0, 0.7803921569)));
+}
+
+.elementBeforeContent, .elementAfterContent{
+  display:flex;
+}
+
+.root[data-layout=item]{
+  align-items:flex-start;
+  padding:var(--sn-primitive-dimension-8, 8px) var(--sn-primitive-dimension-4, 4px);
+}
+.root[data-layout=item] .centeredWrapper{
+  width:var(--sn-density-icon-s, var(--sn-platform-comfort-icon-s, var(--sn-primitive-dimension-24, 24px)));
+  height:var(--sn-list-anatomy-size-s-listItem-centeredWrapper-height, var(--sn-density-typography-roleBody-lineHeightS, var(--sn-platform-comfort-typography-roleBody-lineHeightS, var(--sn-primitive-font-lineHeight-20, 20px))));
+}
+.root[data-layout=item] .elementBeforeContent, .root[data-layout=item] .elementAfterContent{
+  flex-direction:column;
+  align-items:flex-start;
+  min-width:var(--sn-density-icon-s, var(--sn-platform-comfort-icon-s, var(--sn-primitive-dimension-24, 24px)));
+  height:24px;
+}
+.root[data-layout=item] .headline{
+  gap:var(--sn-primitive-dimension-4, 4px);
+}
+.root[data-layout=item] .label{
+  font-family:var(--sn-regular-body-s-fontFamily, var(--sn-brand-font-fontFamily-regular-body, SB Sans Text));
+  font-weight:var(--sn-regular-body-s-fontWeight, var(--sn-theme-typography-fontWeight-regular-body-s, var(--sn-brand-font-fontWeight-light-regular-body-s, var(--sn-primitive-font-fontWeightValue-400, 400))));
+  line-height:var(--sn-regular-body-s-lineHeight, var(--sn-density-typography-roleBody-lineHeightS, var(--sn-platform-comfort-typography-roleBody-lineHeightS, var(--sn-primitive-font-lineHeight-20, 20px))));
+  font-size:var(--sn-regular-body-s-fontSize, var(--sn-density-typography-roleBody-fontSizeS, var(--sn-platform-comfort-typography-roleBody-fontSizeS, var(--sn-primitive-font-fontSize-14, 14px))));
+  letter-spacing:var(--sn-regular-body-s-letterSpacing, var(--sn-primitive-font-letterSpacing-m, 0.1px));
+  paragraph-spacing:var(--sn-regular-body-s-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize12, 6px));
+  display:flex;
+  align-items:center;
+}
+.root[data-layout=item] .caption{
+  font-family:var(--sn-thin-label-s-fontFamily, var(--sn-brand-font-fontFamily-thin-label, SB Sans Text));
+  font-weight:var(--sn-thin-label-s-fontWeight, var(--sn-theme-typography-fontWeight-thin-label-s, var(--sn-brand-font-fontWeight-light-thin-label-s, var(--sn-primitive-font-fontWeightValue-400, 400))));
+  line-height:var(--sn-thin-label-s-lineHeight, var(--sn-density-typography-roleLabel-lineHeightS, var(--sn-platform-comfort-typography-roleLabel-lineHeightS, var(--sn-primitive-font-lineHeight-16, 16px))));
+  font-size:var(--sn-thin-label-s-fontSize, var(--sn-density-typography-roleLabel-fontSizeS, var(--sn-platform-comfort-typography-roleLabel-fontSizeS, var(--sn-primitive-font-fontSize-12, 12px))));
+  letter-spacing:var(--sn-thin-label-s-letterSpacing, var(--sn-primitive-font-letterSpacing-s, 0px));
+  paragraph-spacing:var(--sn-thin-label-s-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize11, 5px));
+}
+.root[data-layout=item] .description{
+  font-family:var(--sn-regular-body-s-fontFamily, var(--sn-brand-font-fontFamily-regular-body, SB Sans Text));
+  font-weight:var(--sn-regular-body-s-fontWeight, var(--sn-theme-typography-fontWeight-regular-body-s, var(--sn-brand-font-fontWeight-light-regular-body-s, var(--sn-primitive-font-fontWeightValue-400, 400))));
+  line-height:var(--sn-regular-body-s-lineHeight, var(--sn-density-typography-roleBody-lineHeightS, var(--sn-platform-comfort-typography-roleBody-lineHeightS, var(--sn-primitive-font-lineHeight-20, 20px))));
+  font-size:var(--sn-regular-body-s-fontSize, var(--sn-density-typography-roleBody-fontSizeS, var(--sn-platform-comfort-typography-roleBody-fontSizeS, var(--sn-primitive-font-fontSize-14, 14px))));
+  letter-spacing:var(--sn-regular-body-s-letterSpacing, var(--sn-primitive-font-letterSpacing-m, 0.1px));
+  paragraph-spacing:var(--sn-regular-body-s-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize12, 6px));
+}
+
+.root[data-layout=group]{
+  align-items:center;
+  min-height:var(--sn-primitive-dimension-28, 28px);
+}
+.root[data-layout=group] .centeredWrapper{
+  width:var(--sn-density-icon-s, var(--sn-platform-comfort-icon-s, var(--sn-primitive-dimension-24, 24px)));
+  height:var(--sn-density-icon-s, var(--sn-platform-comfort-icon-s, var(--sn-primitive-dimension-24, 24px)));
+  padding-top:var(--sn-list-anatomy-size-s-listItem-centeredWrapper-paddingVertical, var(--sn-density-spacing-control-container-vertical-s, var(--sn-platform-comfort-spacing-control-container-vertical-s, var(--sn-platform-comfort-scale-025-2xs, var(--sn-primitive-dimension-2, 2px)))));
+  padding-bottom:var(--sn-list-anatomy-size-s-listItem-centeredWrapper-paddingVertical, var(--sn-density-spacing-control-container-vertical-s, var(--sn-platform-comfort-spacing-control-container-vertical-s, var(--sn-platform-comfort-scale-025-2xs, var(--sn-primitive-dimension-2, 2px)))));
+}
+.root[data-layout=group] .elementBeforeContent, .root[data-layout=group] .elementAfterContent{
+  align-items:center;
+}
+.root[data-layout=group] .textWrapper{
+  gap:var(--sn-primitive-dimension-2, 2px);
+  align-items:center;
+  padding-top:var(--sn-list-anatomy-size-s-listItem-contentWrapper-paddingVertical, var(--sn-density-spacing-control-wrapper-vertical-s, var(--sn-platform-comfort-spacing-control-wrapper-vertical-s, var(--sn-platform-comfort-scale-025-xs, var(--sn-primitive-dimension-4, 4px)))));
+  padding-bottom:var(--sn-list-anatomy-size-s-listItem-contentWrapper-paddingVertical, var(--sn-density-spacing-control-wrapper-vertical-s, var(--sn-platform-comfort-spacing-control-wrapper-vertical-s, var(--sn-platform-comfort-scale-025-xs, var(--sn-primitive-dimension-4, 4px)))));
+}
+.root[data-layout=group] .headline{
+  gap:var(--sn-list-anatomy-size-s-listItem-contentWrapper-textWrapper-textContent-headline-gap, var(--sn-density-spacing-control-wrapper-horizontal-s, var(--sn-platform-comfort-spacing-control-wrapper-horizontal-s, var(--sn-platform-comfort-spacing-control-wrapper-vertical-s, var(--sn-platform-comfort-scale-025-xs, var(--sn-primitive-dimension-4, 4px))))));
+  font-family:var(--sn-regular-label-m-fontFamily, var(--sn-brand-font-fontFamily-regular-label, SB Sans Text));
+  font-weight:var(--sn-regular-label-m-fontWeight, var(--sn-theme-typography-fontWeight-regular-label-m, var(--sn-brand-font-fontWeight-light-regular-label-m, var(--sn-primitive-font-fontWeightValue-500, 500))));
+  line-height:var(--sn-regular-label-m-lineHeight, var(--sn-density-typography-roleLabel-lineHeightM, var(--sn-platform-comfort-typography-roleLabel-lineHeightM, var(--sn-primitive-font-lineHeight-20, 20px))));
+  font-size:var(--sn-regular-label-m-fontSize, var(--sn-density-typography-roleLabel-fontSizeM, var(--sn-platform-comfort-typography-roleLabel-fontSizeM, var(--sn-primitive-font-fontSize-14, 14px))));
+  letter-spacing:var(--sn-regular-label-m-letterSpacing, var(--sn-primitive-font-letterSpacing-s, 0px));
+  paragraph-spacing:var(--sn-regular-label-m-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize12, 6px));
+}
+.root[data-layout=group] .label[data-group-variant=subtitle]{
+  color:var(--sn-theme-color-available-version-textMain, var(--sn-brand-color-text-version-main, #000000));
+}
+.root[data-layout=group] .label[data-group-variant=subtitleTertiary]{
+  color:var(--sn-theme-color-available-version-textTertiary, var(--sn-brand-color-text-version-tertiary, rgba(0, 0, 0, 0.5803921569)));
+}
+
+.root[data-disabled] .textWrapper{
+  opacity:var(--sn-theme-effect-opacity-disabled, 0.4);
+}
+.root[data-disabled] .centeredWrapper{
+  opacity:var(--sn-theme-effect-opacity-disabled, 0.4);
+}
+
+.selectButton{
+  display:flex;
+  flex-shrink:0;
+  justify-content:flex-end;
+  margin-left:auto;
+}

package/dist/cjs/components/ListCustom/helperComponents/ListItemCustom/ListItemCustom.d.ts

@@ -0,0 +1,6 @@
+import { ListItemCustomProps } from './types';
+/**
+ * Кастомная оболочка строки `List`/`Droplist` (Figma `listItemCustom`).
+ * Маркер (single) и чекбокс (multiple) рисуются внутри по `selectionMode` / `checked` / `disabled`.
+ */
+export declare function ListItemCustom({ selectionMode, checked, disabled, content, contentNode, contentFromRender, beforeContent, afterContent, dragHandle, switchControl, expandIcon, onExpandIconClick, expandIconInteractive, inactive, open, isParentNode, level, className, itemRef, tabIndex, style, onClick, onMouseDown, onKeyDown, onFocus, 'data-test-id': dataTestId, }: ListItemCustomProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/components/ListCustom/helperComponents/ListItemCustom/ListItemCustom.js

@@ -0,0 +1,42 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ListItemCustom = ListItemCustom;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const list_1 = require("@cloud-ru/ds-list");
+const toggles_1 = require("@cloud-ru/ds-toggles");
+const classnames_1 = __importDefault(require("classnames"));
+const ContentWrapperCustom_1 = require("../ContentWrapperCustom");
+const constants_1 = require("./constants");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+function resolveStructuredContent(content, contentFromRender) {
+    if (contentFromRender) {
+        return undefined;
+    }
+    if ((0, list_1.isContentItem)(content)) {
+        return content;
+    }
+    if ((0, list_1.isPrimitiveContent)(content)) {
+        return { label: content };
+    }
+    return undefined;
+}
+/**
+ * Кастомная оболочка строки `List`/`Droplist` (Figma `listItemCustom`).
+ * Маркер (single) и чекбокс (multiple) рисуются внутри по `selectionMode` / `checked` / `disabled`.
+ */
+function ListItemCustom({ selectionMode = constants_1.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, }) {
+    const structuredContent = resolveStructuredContent(content, contentFromRender);
+    const isSingle = selectionMode === constants_1.SELECTION_MODE.Single;
+    const isMultiple = selectionMode === constants_1.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 ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(styles_module_scss_1.default.itemWrapper, className), "data-selection-mode": selectionMode, "data-inactive": inactive || undefined, "data-disabled": disabled || undefined, "data-checked": checked || undefined, "data-open": open || undefined, children: [!disabled && (0, jsx_runtime_1.jsx)("span", { className: styles_module_scss_1.default.stateLayer, "aria-hidden": true, "data-state": stateLayerState }), (0, jsx_runtime_1.jsxs)("li", { "data-type": 'outside', role: 'menuitem', "data-test-id": dataTestId, ref: itemRef, className: styles_module_scss_1.default.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 }, "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, children: [dragHandle, showMarker && (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.marker, "aria-hidden": true, "data-disabled": disabled || undefined }), showCheckbox && ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.checkbox, children: (0, jsx_runtime_1.jsx)(toggles_1.Checkbox, { size: 's', disabled: disabled, checked: checked, tabIndex: -1 }) })), (0, jsx_runtime_1.jsx)(ContentWrapperCustom_1.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 && ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.expandCenteredWrapper, children: (0, jsx_runtime_1.jsx)("span", { className: styles_module_scss_1.default.groupIndicator, "data-open": open || undefined, "data-disabled": disabled || undefined, "data-interactive": expandIconInteractive || undefined, "data-test-id": list_1.TEST_IDS.groupIndicator, onClick: onExpandIconClick, "aria-hidden": true, children: expandIcon }) }))] })] }));
+}

package/dist/cjs/components/ListCustom/helperComponents/ListItemCustom/constants.d.ts

@@ -0,0 +1,6 @@
+/** Режим выбора строки — совпадает с `MODE` списка (`none` / `single` / `multiple`). */
+export declare const SELECTION_MODE: {
+    readonly None: "none";
+    readonly Single: "single";
+    readonly Multiple: "multiple";
+};

package/dist/cjs/components/ListCustom/helperComponents/ListItemCustom/constants.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SELECTION_MODE = void 0;
+const list_1 = require("@cloud-ru/ds-list");
+/** Режим выбора строки — совпадает с `MODE` списка (`none` / `single` / `multiple`). */
+exports.SELECTION_MODE = list_1.MODE;

package/dist/cjs/components/ListCustom/helperComponents/ListItemCustom/index.d.ts

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

package/dist/cjs/components/ListCustom/helperComponents/ListItemCustom/index.js

@@ -0,0 +1,19 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./ListItemCustom"), exports);
+__exportStar(require("./constants"), exports);
+__exportStar(require("./types"), exports);

package/dist/cjs/components/ListCustom/helperComponents/ListItemCustom/styles.module.css

@@ -0,0 +1,236 @@
+@charset "UTF-8";
+.stateLayer{
+  visibility:initial;
+}
+
+.listItem{
+  cursor:pointer;
+  position:relative;
+  z-index:1;
+  display:flex;
+  flex-direction:row;
+  gap:var(--sn-list-anatomy-size-s-listItem-gap, var(--sn-density-spacing-control-wrapper-horizontal-s, var(--sn-platform-comfort-spacing-control-wrapper-horizontal-s, var(--sn-platform-comfort-spacing-control-wrapper-vertical-s, var(--sn-platform-comfort-scale-025-xs, var(--sn-primitive-dimension-4, 4px))))));
+  align-items:flex-start;
+  box-sizing:border-box;
+  width:-moz-max-content;
+  width:max-content;
+  min-width:100%;
+  margin:0;
+  padding:var(--sn-primitive-dimension-0, 0px) var(--sn-list-anatomy-size-s-listItem-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-s, var(--sn-platform-comfort-spacing-control-container-horizontal-s, var(--sn-platform-comfort-scale-050-2xs, var(--sn-primitive-dimension-4, 4px)))));
+  border:none;
+  color:var(--sn-theme-color-available-version-textMain, var(--sn-brand-color-text-version-main, #000000));
+  text-align:start;
+  -webkit-appearance:unset;
+     -moz-appearance:unset;
+          appearance:unset;
+  background-color:transparent;
+  outline:none;
+}
+.listItem[data-level-one], .listItem[data-level-more-one]{
+  padding-left:calc(var(--sn-list-anatomy-size-s-listItem-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-s, var(--sn-platform-comfort-spacing-control-container-horizontal-s, var(--sn-platform-comfort-scale-050-2xs, var(--sn-primitive-dimension-4, 4px))))) + var(--level, 0) * var(--sn-list-anatomy-size-s-listItem-nestingLevel-paddingLeft, var(--sn-density-nestingLevel-s-paddingLeft, var(--sn-platform-comfort-icon-half-xs, var(--sn-primitive-dimension-12, 12px)))) + var(--sn-list-anatomy-size-s-listItem-gap, var(--sn-density-spacing-control-wrapper-horizontal-s, var(--sn-platform-comfort-spacing-control-wrapper-horizontal-s, var(--sn-platform-comfort-spacing-control-wrapper-vertical-s, var(--sn-platform-comfort-scale-025-xs, var(--sn-primitive-dimension-4, 4px)))))));
+}
+.listItem:not([data-inactive], [data-disabled])[data-focused], .listItem:not([data-inactive], [data-disabled]):focus-visible{
+  outline:var(--sn-theme-color-available-complementary, #000000) solid var(--sn-primitive-strokeWeight-strokeSemiBold, 2px);
+  outline-offset:calc(0px - var(--sn-primitive-strokeWeight-strokeSemiBold, 2px));
+}
+.listItem[data-non-pointer]{
+  cursor:inherit;
+}
+
+.marker{
+  pointer-events:none;
+  position:absolute;
+  top:0;
+  bottom:0;
+  left:0;
+  display:flex;
+  align-items:center;
+  box-sizing:border-box;
+  width:var(--sn-list-anatomy-size-s-listItem-markerWrapper-width, var(--sn-primitive-dimension-2, 2px));
+  min-width:var(--sn-list-anatomy-size-s-listItem-markerWrapper-width, var(--sn-primitive-dimension-2, 2px));
+  max-width:var(--sn-list-anatomy-size-s-listItem-markerWrapper-width, var(--sn-primitive-dimension-2, 2px));
+  padding-top:var(--sn-list-anatomy-size-s-listItem-markerWrapper-marker-paddingVertical, var(--sn-primitive-dimension-2, 2px));
+  padding-bottom:var(--sn-list-anatomy-size-s-listItem-markerWrapper-marker-paddingVertical, var(--sn-primitive-dimension-2, 2px));
+}
+.marker::before{
+  content:"";
+  flex:1 0 0;
+  width:100%;
+  min-width:var(--sn-primitive-dimension-0, 0px);
+  height:100%;
+  border-top-right-radius:var(--sn-list-anatomy-size-s-listItem-markerWrapper-borderTopRightRadius, var(--sn-primitive-dimension-2, 2px));
+  border-bottom-right-radius:var(--sn-list-anatomy-size-s-listItem-markerWrapper-borderBottomRightRadius, var(--sn-primitive-dimension-2, 2px));
+  background-color:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-50, #222222));
+}
+.marker[data-disabled]{
+  opacity:var(--sn-theme-effect-opacity-disabled, 0.4);
+}
+.marker[data-disabled]::before{
+  background-color:var(--sn-theme-color-neutral-accent, var(--sn-brand-color-neutral-50, var(--sn-brand-palette-gray-50, #222222)));
+}
+
+.checkbox{
+  display:flex;
+  flex-shrink:0;
+  align-items:flex-start;
+  padding:var(--sn-primitive-dimension-4, 4px);
+}
+
+.expandCenteredWrapper{
+  display:flex;
+  flex-shrink:0;
+  align-items:center;
+  padding:var(--sn-primitive-dimension-4, 4px) var(--sn-primitive-dimension-4, 4px) var(--sn-primitive-dimension-4, 4px) var(--sn-primitive-dimension-0, 0px);
+}
+
+.groupIndicator{
+  pointer-events:none;
+  display:flex;
+  flex-shrink:0;
+  align-items:center;
+  justify-content:center;
+  box-sizing:border-box;
+  width:var(--sn-density-icon-s, var(--sn-platform-comfort-icon-s, var(--sn-primitive-dimension-24, 24px)));
+  height:var(--sn-density-icon-s, var(--sn-platform-comfort-icon-s, var(--sn-primitive-dimension-24, 24px)));
+  color:var(--sn-theme-color-available-version-textSecondary, var(--sn-brand-color-text-version-secondary, rgba(0, 0, 0, 0.7803921569)));
+  fill:currentcolor;
+}
+.groupIndicator svg{
+  width:100%;
+  max-width:100%;
+  height:100%;
+  max-height:100%;
+}
+.groupIndicator[data-interactive]{
+  pointer-events:auto;
+  cursor:pointer;
+}
+.groupIndicator[data-open]{
+  border-radius:var(--sn-density-radius-s, var(--sn-platform-comfort-radius-s, var(--sn-primitive-dimension-12, 12px)));
+  color:var(--sn-theme-color-available-version-textMain, var(--sn-brand-color-text-version-main, #000000));
+  background:var(--sn-theme-color-neutral-decorTransparent, var(--sn-brand-color-neutral-transparent-forLightMode, rgba(136, 146, 170, 0.0784313725)));
+}
+.groupIndicator[data-disabled]{
+  opacity:var(--sn-theme-effect-opacity-disabled, 0.4);
+}
+
+.itemWrapper{
+  position:relative;
+  z-index:0;
+  min-width:100%;
+  margin:0;
+  padding:0;
+  border-radius:var(--sn-list-anatomy-size-s-listItem-borderRadius, var(--sn-brand-anatomy-radius-listItem-s, var(--sn-primitive-dimension-2, 2px)));
+}
+.itemWrapper .stateLayer{
+  position:absolute;
+  inset:0;
+  border-radius:inherit;
+}
+.itemWrapper .stateLayer[data-state=borderOnBackground]{
+  border-color:var(--sn-theme-color-material-stateLayer-neutral-border-default-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-default-borderColor, rgba(0, 0, 0, 0.1411764706)));
+  border-style:solid;
+  border-width:var(--sn-primitive-strokeWeight-strokeRegular, 1px);
+}
+.itemWrapper .stateLayer[data-state=emptyNeutralOnBackground]{
+  background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-defaultEmpty-filled, var(--sn-brand-color-state-neutral-forLightMode-default-background, rgba(0, 0, 0, 0)));
+}
+.itemWrapper .stateLayer[data-state=activatedOnBackground]{
+  background:var(--sn-theme-color-material-stateLayer-activated-default-filled, var(--sn-brand-color-state-activated-default-background, rgba(128, 128, 128, 0.1607843137)));
+}
+.itemWrapper .stateLayer[data-state=versionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-versionOnColor-default-filled, rgba(0, 0, 0, 0.0509803922));
+}
+.itemWrapper .stateLayer[data-state=emptyVersionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-versionOnColor-defaultEmpty-filled, rgba(0, 0, 0, 0));
+}
+.itemWrapper .stateLayer[data-state=inversionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-inversionOnColor-default-filled, rgba(255, 255, 255, 0.1019607843));
+}
+.itemWrapper .stateLayer[data-state=emptyInversionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-inversionOnColor-defaultEmpty-filled, rgba(255, 255, 255, 0));
+}
+.itemWrapper .stateLayer[data-state=emptyDarkOnAccent]{
+  background:var(--sn-theme-color-material-stateLayer-darkOnAccent-defaultEmpty-filled, rgba(0, 0, 0, 0));
+}
+@media (hover: hover){
+  .itemWrapper:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=borderOnBackground]{
+    border-color:var(--sn-theme-color-material-stateLayer-neutral-border-hovered-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-hovered-borderColor, rgba(0, 0, 0, 0.2392156863)));
+  }
+  .itemWrapper:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyNeutralOnBackground]{
+    background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-hovered-filled, var(--sn-brand-color-state-neutral-forLightMode-hovered-background, rgba(0, 0, 0, 0.0784313725)));
+  }
+  .itemWrapper:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=activatedOnBackground]{
+    background:var(--sn-theme-color-material-stateLayer-activated-hovered-filled, var(--sn-brand-color-state-activated-hovered-background, rgba(128, 128, 128, 0.2392156863)));
+  }
+  .itemWrapper:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=versionOnColor]{
+    background:var(--sn-theme-color-material-stateLayer-versionOnColor-hovered-filled, rgba(0, 0, 0, 0.1019607843));
+  }
+  .itemWrapper:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyVersionOnColor]{
+    background:var(--sn-theme-color-material-stateLayer-versionOnColor-hovered-filled, rgba(0, 0, 0, 0.1019607843));
+  }
+  .itemWrapper:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=inversionOnColor]{
+    background:var(--sn-theme-color-material-stateLayer-inversionOnColor-hovered-filled, rgba(255, 255, 255, 0.1490196078));
+  }
+  .itemWrapper:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyInversionOnColor]{
+    background:var(--sn-theme-color-material-stateLayer-inversionOnColor-hovered-filled, rgba(255, 255, 255, 0.1490196078));
+  }
+  .itemWrapper:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyDarkOnAccent]{
+    background:var(--sn-theme-color-material-stateLayer-darkOnAccent-hovered-filled, rgba(0, 0, 0, 0.0588235294));
+  }
+}
+.itemWrapper{
+}
+.itemWrapper[data-loading] .stateLayer[data-state=borderOnBackground], .itemWrapper:active:not([data-disabled], [data-loading]) .stateLayer[data-state=borderOnBackground], .itemWrapper[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=borderOnBackground]{
+  border-color:var(--sn-theme-color-material-stateLayer-neutral-border-pressed-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-pressed-borderColor, rgba(0, 0, 0, 0.3411764706)));
+}
+.itemWrapper[data-loading] .stateLayer[data-state=emptyNeutralOnBackground], .itemWrapper:active:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyNeutralOnBackground], .itemWrapper[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyNeutralOnBackground]{
+  background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-pressed-filled, var(--sn-brand-color-state-neutral-forLightMode-pressed-background, rgba(0, 0, 0, 0.1215686275)));
+}
+.itemWrapper[data-loading] .stateLayer[data-state=activatedOnBackground], .itemWrapper:active:not([data-disabled], [data-loading]) .stateLayer[data-state=activatedOnBackground], .itemWrapper[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=activatedOnBackground]{
+  background:var(--sn-theme-color-material-stateLayer-activated-pressed-filled, var(--sn-brand-color-state-activated-pressed-background, rgba(128, 128, 128, 0.3411764706)));
+}
+.itemWrapper[data-loading] .stateLayer[data-state=versionOnColor], .itemWrapper:active:not([data-disabled], [data-loading]) .stateLayer[data-state=versionOnColor], .itemWrapper[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=versionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-versionOnColor-pressed-filled, rgba(0, 0, 0, 0.1490196078));
+}
+.itemWrapper[data-loading] .stateLayer[data-state=emptyVersionOnColor], .itemWrapper:active:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyVersionOnColor], .itemWrapper[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyVersionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-versionOnColor-pressed-filled, rgba(0, 0, 0, 0.1490196078));
+}
+.itemWrapper[data-loading] .stateLayer[data-state=inversionOnColor], .itemWrapper:active:not([data-disabled], [data-loading]) .stateLayer[data-state=inversionOnColor], .itemWrapper[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=inversionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-inversionOnColor-pressed-filled, rgba(255, 255, 255, 0.0509803922));
+}
+.itemWrapper[data-loading] .stateLayer[data-state=emptyInversionOnColor], .itemWrapper:active:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyInversionOnColor], .itemWrapper[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyInversionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-inversionOnColor-pressed-filled, rgba(255, 255, 255, 0.0509803922));
+}
+.itemWrapper[data-loading] .stateLayer[data-state=emptyDarkOnAccent], .itemWrapper:active:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyDarkOnAccent], .itemWrapper[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyDarkOnAccent]{
+  background:var(--sn-theme-color-material-stateLayer-darkOnAccent-pressed-filled, rgba(0, 0, 0, 0.1215686275));
+}
+.itemWrapper[data-disabled], .itemWrapper:disabled{
+  cursor:not-allowed;
+  background-color:transparent;
+  outline:none;
+}
+.itemWrapper[data-disabled] .listItem, .itemWrapper:disabled .listItem{
+  cursor:not-allowed;
+}
+.itemWrapper:not([data-inactive], [data-disabled])[data-open] .stateLayer[data-state=emptyNeutralOnBackground], .itemWrapper:not([data-inactive], [data-disabled])[data-focused] .stateLayer[data-state=emptyNeutralOnBackground]{
+  background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-hovered-filled, var(--sn-brand-color-state-neutral-forLightMode-hovered-background, rgba(0, 0, 0, 0.0784313725)));
+}
+.itemWrapper:not([data-inactive], [data-disabled])[data-open] .stateLayer[data-state=activatedOnBackground], .itemWrapper:not([data-inactive], [data-disabled])[data-focused] .stateLayer[data-state=activatedOnBackground]{
+  background:var(--sn-theme-color-material-stateLayer-activated-hovered-filled, var(--sn-brand-color-state-activated-hovered-background, rgba(128, 128, 128, 0.2392156863)));
+}
+.itemWrapper:not([data-inactive], [data-disabled]):active .stateLayer[data-state=emptyNeutralOnBackground]{
+  background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-pressed-filled, var(--sn-brand-color-state-neutral-forLightMode-pressed-background, rgba(0, 0, 0, 0.1215686275)));
+}
+.itemWrapper:not([data-inactive], [data-disabled]):active .stateLayer[data-state=activatedOnBackground]{
+  background:var(--sn-theme-color-material-stateLayer-activated-pressed-filled, var(--sn-brand-color-state-activated-pressed-background, rgba(128, 128, 128, 0.3411764706)));
+}
+.itemWrapper[data-inactive]:hover .stateLayer[data-state=emptyNeutralOnBackground],
+.itemWrapper[data-inactive]:hover .stateLayer[data-state=activatedOnBackground],
+.itemWrapper[data-inactive]:active .stateLayer[data-state=emptyNeutralOnBackground],
+.itemWrapper[data-inactive]:active .stateLayer[data-state=activatedOnBackground]{
+  background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-defaultEmpty-filled, var(--sn-brand-color-state-neutral-forLightMode-default-background, rgba(0, 0, 0, 0)));
+}
+.itemWrapper[data-checked][data-selection-mode=single]:not([data-disabled]) .listItem:focus-visible{
+  outline-color:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-50, #222222));
+}

package/dist/cjs/components/ListCustom/helperComponents/ListItemCustom/types.d.ts

@@ -0,0 +1,13 @@
+import { ItemRenderProps, Mode } from '@cloud-ru/ds-list';
+export type SelectionMode = Mode;
+/**
+ * Пропы оболочки. Совместимы с `ItemRenderProps` списка (адаптер — spread).
+ * Для Playground часть полей опциональна: `contentNode` / `selectionMode` / `size` / `tabIndex` / `level`.
+ */
+export type ListItemCustomProps = Omit<ItemRenderProps, 'contentNode' | 'selectionMode' | 'size' | 'tabIndex' | 'level'> & {
+    contentNode?: ItemRenderProps['contentNode'];
+    selectionMode?: Mode;
+    size?: ItemRenderProps['size'];
+    tabIndex?: number;
+    level?: number;
+};

package/dist/cjs/components/ListCustom/helperComponents/ListItemCustom/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/cjs/components/ListCustom/helperComponents/ListItemGroupCustom/ListItemGroupCustom.d.ts

@@ -0,0 +1,7 @@
+import { GroupItemRenderProps } from '@cloud-ru/ds-list';
+export type ListItemGroupCustomProps = GroupItemRenderProps;
+/**
+ * Кастомная оболочка заголовка группы `List`/`Droplist` (Figma `listItemGroupCustom`).
+ * Передаётся в `groupItemRender`: subtitle / subtitleTertiary / divider.
+ */
+export declare function ListItemGroupCustom({ label, beforeContent, truncate, groupVariant, divider, selectButtonNode, level, }: ListItemGroupCustomProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/cjs/components/ListCustom/helperComponents/ListItemGroupCustom/ListItemGroupCustom.js

@@ -0,0 +1,23 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ListItemGroupCustom = ListItemGroupCustom;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const divider_1 = require("@cloud-ru/ds-divider");
+const ContentWrapperCustom_1 = require("../ContentWrapperCustom");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+/**
+ * Кастомная оболочка заголовка группы `List`/`Droplist` (Figma `listItemGroupCustom`).
+ * Передаётся в `groupItemRender`: subtitle / subtitleTertiary / divider.
+ */
+function ListItemGroupCustom({ label, beforeContent, truncate, groupVariant = 'subtitleTertiary', divider, selectButtonNode, level, }) {
+    if (label) {
+        return ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.root, "data-level-one": level === 1 || undefined, "data-level-more-one": level > 1 || undefined, style: { '--level': level }, children: [(0, jsx_runtime_1.jsx)(ContentWrapperCustom_1.ContentWrapperCustom, { layout: 'group', beforeContent: beforeContent, label: label, truncate: truncate ? { variant: truncate.variant, label: 1 } : undefined, groupVariant: groupVariant, selectButton: selectButtonNode }), divider && ((0, jsx_runtime_1.jsx)(divider_1.Divider, { className: styles_module_scss_1.default.divider, variant: groupVariant === 'subtitle' ? divider_1.VARIANT.Regular : divider_1.VARIANT.Thin }))] }));
+    }
+    if (divider) {
+        return ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.dividerOnly, children: (0, jsx_runtime_1.jsx)(divider_1.Divider, { variant: divider_1.VARIANT.Regular }) }));
+    }
+    return null;
+}

package/dist/cjs/components/ListCustom/helperComponents/ListItemGroupCustom/index.d.ts

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