@cloud-ru/ds-list 1.0.0

package/dist/cjs/helperComponents/HiddenTabButton/HiddenTabButton.js

@@ -0,0 +1,20 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HiddenTabButton = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const utils_1 = require("../../utils");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+exports.HiddenTabButton = (0, react_1.forwardRef)(({ listRef, tabIndex }, ref) => {
+    const handleFocus = (0, react_1.useCallback)((e) => {
+        if (e.relatedTarget !== listRef.current) {
+            listRef.current?.focus();
+        }
+        e.preventDefault();
+        e.stopPropagation();
+    }, [listRef]);
+    return ((0, jsx_runtime_1.jsx)("button", { type: 'button', "aria-hidden": true, ref: ref, onKeyDown: utils_1.stopPropagation, onFocus: handleFocus, className: styles_module_scss_1.default.hiddenBtn, tabIndex: tabIndex }));
+});

package/dist/cjs/helperComponents/HiddenTabButton/index.d.ts

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

package/dist/cjs/helperComponents/HiddenTabButton/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("./HiddenTabButton"), exports);

package/dist/cjs/helperComponents/HiddenTabButton/styles.module.css

@@ -0,0 +1,9 @@
+.hiddenBtn{
+  position:absolute;
+  width:0;
+  height:0;
+  margin:0;
+  padding:0;
+  border:none;
+  outline:none;
+}

package/dist/cjs/helperComponents/ItemContent/ItemContent.d.ts

@@ -0,0 +1,17 @@
+import { TruncateStringProps } from '@cloud-ru/ds-truncate-string';
+import { WithSupportProps } from '@cloud-ru/ds-utils';
+type TruncateProps = {
+    label?: number;
+    description?: number;
+    variant?: TruncateStringProps['variant'];
+};
+export type ItemContentProps = WithSupportProps<{
+    label: string | number;
+    caption?: string;
+    description?: string;
+    truncate?: TruncateProps;
+    disabled?: boolean;
+    className?: string;
+}>;
+export declare function ItemContent({ truncate: truncateProp, caption, description, label, className, disabled, ...rest }: ItemContentProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/cjs/helperComponents/ItemContent/ItemContent.js

@@ -0,0 +1,27 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ItemContent = ItemContent;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const truncate_string_1 = require("@cloud-ru/ds-truncate-string");
+const utils_1 = require("@cloud-ru/ds-utils");
+const classnames_1 = __importDefault(require("classnames"));
+const react_1 = require("react");
+const contexts_1 = require("../../components/Lists/contexts");
+const constants_1 = require("../../constants");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+const DEFAULT_TRUNCATE = {
+    label: 1,
+    description: 2,
+    variant: 'end',
+};
+function ItemContent({ truncate: truncateProp, caption, description, label, className, disabled, ...rest }) {
+    const { size = 'm' } = (0, contexts_1.useNewListContext)();
+    const truncate = (0, react_1.useMemo)(() => ({
+        ...DEFAULT_TRUNCATE,
+        ...truncateProp,
+    }), [truncateProp]);
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(styles_module_scss_1.default.content, className), ...(0, utils_1.extractSupportProps)(rest), "data-size": size ?? 's', "data-disabled": disabled || undefined, 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, children: (0, jsx_runtime_1.jsx)(truncate_string_1.TruncateString, { variant: truncate.variant, text: String(label), maxLines: truncate.label, "data-test-id": constants_1.TEST_IDS.baseItemLabel }) }), caption && (0, jsx_runtime_1.jsx)("span", { className: styles_module_scss_1.default.caption, children: caption })] }), description && ((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, "data-test-id": constants_1.TEST_IDS.baseItemDescription }) }))] }));
+}

package/dist/cjs/helperComponents/ItemContent/index.d.ts

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

package/dist/cjs/helperComponents/ItemContent/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("./ItemContent"), exports);

package/dist/cjs/helperComponents/ItemContent/styles.module.css

@@ -0,0 +1,139 @@
+.headline{
+  display:flex;
+  align-items:center;
+}
+
+.label{
+  overflow:hidden;
+  flex:1;
+  color:var(--sn-theme-color-available-version-textMain, var(--sn-brand-color-text-version-main, #41424e));
+}
+
+.caption{
+  overflow:hidden;
+  display:flex;
+  align-items:center;
+  color:var(--sn-theme-color-available-version-textTertiary, var(--sn-brand-color-text-version-tertiary, rgba(65, 66, 78, 0.5490196078)));
+  text-overflow:ellipsis;
+  white-space:nowrap;
+}
+
+.description{
+  color:var(--sn-theme-color-available-version-textSecondary, var(--sn-brand-color-text-version-secondary, rgba(65, 66, 78, 0.8)));
+}
+
+.content{
+  overflow:hidden;
+  display:flex;
+  flex-direction:column;
+  flex-grow:1;
+  flex-shrink:1;
+  box-sizing:border-box;
+}
+.content[data-size=s]{
+  gap:var(--sn-list-anatomy-size-s-listItem-contentWrapper-textWrapper-textContent-gap, var(--sn-primitive-dimension-0, 0));
+  padding:var(--sn-list-anatomy-size-s-listItem-contentWrapper-textWrapper-paddingVertical, var(--sn-density-spacing-control-wrapper-vertical-s, var(--sn-primitive-dimension-8, 8px))) var(--sn-list-anatomy-size-s-listItem-contentWrapper-textWrapper-textContent-paddingHorizontal, var(--sn-density-spacing-control-wrapper-horizontal-s, var(--sn-primitive-dimension-8, 8px))) var(--sn-list-anatomy-size-s-listItem-contentWrapper-textWrapper-paddingVertical, var(--sn-density-spacing-control-wrapper-vertical-s, var(--sn-primitive-dimension-8, 8px))) var(--sn-list-anatomy-size-s-listItem-contentWrapper-textWrapper-textContent-paddingHorizontal, var(--sn-density-spacing-control-wrapper-horizontal-s, var(--sn-primitive-dimension-8, 8px)));
+}
+.content[data-size=s] .headline{
+  gap:var(--sn-list-anatomy-size-s-listItem-contentWrapper-textWrapper-textContent-headline-gap, var(--sn-density-spacing-control-wrapper-horizontal-s, var(--sn-primitive-dimension-8, 8px)));
+  min-height:var(--sn-list-anatomy-size-s-listItem-contentWrapper-textWrapper-textContent-headline-minHeight, var(--sn-primitive-font-lineHeight-by12, 16px));
+}
+.content[data-size=s] .label{
+  font-family:var(--sn-regular-body-s-fontFamily, var(--sn-brand-font-fontFamily-regular-body, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
+  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-primitive-font-lineHeight-by14, 20px)));
+  font-size:var(--sn-regular-body-s-fontSize, var(--sn-density-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;
+}
+.content[data-size=s] .caption{
+  font-family:var(--sn-regular-body-s-fontFamily, var(--sn-brand-font-fontFamily-regular-body, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
+  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-primitive-font-lineHeight-by14, 20px)));
+  font-size:var(--sn-regular-body-s-fontSize, var(--sn-density-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));
+}
+.content[data-size=s] .description{
+  font-family:var(--sn-regular-body-s-fontFamily, var(--sn-brand-font-fontFamily-regular-body, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
+  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-primitive-font-lineHeight-by14, 20px)));
+  font-size:var(--sn-regular-body-s-fontSize, var(--sn-density-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));
+}
+.content[data-size=m]{
+  gap:var(--sn-list-anatomy-size-m-listItem-contentWrapper-textWrapper-textContent-gap, var(--sn-primitive-dimension-0, 0));
+  padding:var(--sn-list-anatomy-size-m-listItem-contentWrapper-textWrapper-paddingVertical, var(--sn-density-spacing-control-wrapper-vertical-m, var(--sn-primitive-dimension-8, 8px))) var(--sn-list-anatomy-size-m-listItem-contentWrapper-textWrapper-textContent-paddingHorizontal, var(--sn-density-spacing-control-wrapper-horizontal-m, var(--sn-primitive-dimension-8, 8px))) var(--sn-list-anatomy-size-m-listItem-contentWrapper-textWrapper-paddingVertical, var(--sn-density-spacing-control-wrapper-vertical-m, var(--sn-primitive-dimension-8, 8px))) var(--sn-list-anatomy-size-m-listItem-contentWrapper-textWrapper-textContent-paddingHorizontal, var(--sn-density-spacing-control-wrapper-horizontal-m, var(--sn-primitive-dimension-8, 8px)));
+}
+.content[data-size=m] .headline{
+  gap:var(--sn-list-anatomy-size-m-listItem-contentWrapper-textWrapper-textContent-headline-gap, var(--sn-density-spacing-control-wrapper-horizontal-m, var(--sn-primitive-dimension-8, 8px)));
+  min-height:var(--sn-list-anatomy-size-m-listItem-contentWrapper-textWrapper-textContent-headline-minHeight, var(--sn-primitive-font-lineHeight-by14, 20px));
+}
+.content[data-size=m] .label{
+  font-family:var(--sn-regular-body-m-fontFamily, var(--sn-brand-font-fontFamily-regular-body, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
+  font-weight:var(--sn-regular-body-m-fontWeight, var(--sn-theme-typography-fontWeight-regular-body-m, var(--sn-brand-font-fontWeight-light-regular-body-m, var(--sn-primitive-font-fontWeightValue-400, 400))));
+  line-height:var(--sn-regular-body-m-lineHeight, var(--sn-density-typography-roleBody-lineHeightM, var(--sn-primitive-font-lineHeight-by16, 24px)));
+  font-size:var(--sn-regular-body-m-fontSize, var(--sn-density-typography-roleBody-fontSizeM, var(--sn-primitive-font-fontSize-16, 16px)));
+  letter-spacing:var(--sn-regular-body-m-letterSpacing, var(--sn-primitive-font-letterSpacing-m, 0.1px));
+  paragraph-spacing:var(--sn-regular-body-m-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize14, 7px));
+  display:flex;
+  align-items:center;
+}
+.content[data-size=m] .caption{
+  font-family:var(--sn-regular-body-m-fontFamily, var(--sn-brand-font-fontFamily-regular-body, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
+  font-weight:var(--sn-regular-body-m-fontWeight, var(--sn-theme-typography-fontWeight-regular-body-m, var(--sn-brand-font-fontWeight-light-regular-body-m, var(--sn-primitive-font-fontWeightValue-400, 400))));
+  line-height:var(--sn-regular-body-m-lineHeight, var(--sn-density-typography-roleBody-lineHeightM, var(--sn-primitive-font-lineHeight-by16, 24px)));
+  font-size:var(--sn-regular-body-m-fontSize, var(--sn-density-typography-roleBody-fontSizeM, var(--sn-primitive-font-fontSize-16, 16px)));
+  letter-spacing:var(--sn-regular-body-m-letterSpacing, var(--sn-primitive-font-letterSpacing-m, 0.1px));
+  paragraph-spacing:var(--sn-regular-body-m-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize14, 7px));
+}
+.content[data-size=m] .description{
+  font-family:var(--sn-regular-body-m-fontFamily, var(--sn-brand-font-fontFamily-regular-body, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
+  font-weight:var(--sn-regular-body-m-fontWeight, var(--sn-theme-typography-fontWeight-regular-body-m, var(--sn-brand-font-fontWeight-light-regular-body-m, var(--sn-primitive-font-fontWeightValue-400, 400))));
+  line-height:var(--sn-regular-body-m-lineHeight, var(--sn-density-typography-roleBody-lineHeightM, var(--sn-primitive-font-lineHeight-by16, 24px)));
+  font-size:var(--sn-regular-body-m-fontSize, var(--sn-density-typography-roleBody-fontSizeM, var(--sn-primitive-font-fontSize-16, 16px)));
+  letter-spacing:var(--sn-regular-body-m-letterSpacing, var(--sn-primitive-font-letterSpacing-m, 0.1px));
+  paragraph-spacing:var(--sn-regular-body-m-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize14, 7px));
+}
+.content[data-size=l]{
+  gap:var(--sn-list-anatomy-size-l-listItem-contentWrapper-textWrapper-textContent-gap, var(--sn-primitive-dimension-2, 2px));
+  padding:var(--sn-list-anatomy-size-l-listItem-contentWrapper-textWrapper-paddingVertical, var(--sn-density-spacing-control-wrapper-vertical-l, var(--sn-primitive-dimension-8, 8px))) var(--sn-list-anatomy-size-l-listItem-contentWrapper-textWrapper-textContent-paddingHorizontal, var(--sn-density-spacing-control-wrapper-horizontal-l, var(--sn-primitive-dimension-12, 12px))) var(--sn-list-anatomy-size-l-listItem-contentWrapper-textWrapper-paddingVertical, var(--sn-density-spacing-control-wrapper-vertical-l, var(--sn-primitive-dimension-8, 8px))) var(--sn-list-anatomy-size-l-listItem-contentWrapper-textWrapper-textContent-paddingHorizontal, var(--sn-density-spacing-control-wrapper-horizontal-l, var(--sn-primitive-dimension-12, 12px)));
+}
+.content[data-size=l] .headline{
+  gap:var(--sn-list-anatomy-size-l-listItem-contentWrapper-textWrapper-textContent-headline-gap, var(--sn-density-spacing-control-wrapper-horizontal-l, var(--sn-primitive-dimension-12, 12px)));
+  min-height:var(--sn-list-anatomy-size-l-listItem-contentWrapper-textWrapper-textContent-headline-minHeight, var(--sn-primitive-font-lineHeight-by16, 24px));
+}
+.content[data-size=l] .label{
+  font-family:var(--sn-regular-body-l-fontFamily, var(--sn-brand-font-fontFamily-regular-body, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
+  font-weight:var(--sn-regular-body-l-fontWeight, var(--sn-theme-typography-fontWeight-regular-body-l, var(--sn-brand-font-fontWeight-light-regular-body-l, var(--sn-primitive-font-fontWeightValue-400, 400))));
+  line-height:var(--sn-regular-body-l-lineHeight, var(--sn-density-typography-roleBody-lineHeightL, var(--sn-primitive-font-lineHeight-by20, 28px)));
+  font-size:var(--sn-regular-body-l-fontSize, var(--sn-density-typography-roleBody-fontSizeL, var(--sn-primitive-font-fontSize-20, 20px)));
+  letter-spacing:var(--sn-regular-body-l-letterSpacing, var(--sn-primitive-font-letterSpacing-m, 0.1px));
+  paragraph-spacing:var(--sn-regular-body-l-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize16, 8px));
+  display:flex;
+  align-items:center;
+}
+.content[data-size=l] .caption{
+  font-family:var(--sn-regular-body-l-fontFamily, var(--sn-brand-font-fontFamily-regular-body, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
+  font-weight:var(--sn-regular-body-l-fontWeight, var(--sn-theme-typography-fontWeight-regular-body-l, var(--sn-brand-font-fontWeight-light-regular-body-l, var(--sn-primitive-font-fontWeightValue-400, 400))));
+  line-height:var(--sn-regular-body-l-lineHeight, var(--sn-density-typography-roleBody-lineHeightL, var(--sn-primitive-font-lineHeight-by20, 28px)));
+  font-size:var(--sn-regular-body-l-fontSize, var(--sn-density-typography-roleBody-fontSizeL, var(--sn-primitive-font-fontSize-20, 20px)));
+  letter-spacing:var(--sn-regular-body-l-letterSpacing, var(--sn-primitive-font-letterSpacing-m, 0.1px));
+  paragraph-spacing:var(--sn-regular-body-l-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize16, 8px));
+}
+.content[data-size=l] .description{
+  font-family:var(--sn-regular-body-l-fontFamily, var(--sn-brand-font-fontFamily-regular-body, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
+  font-weight:var(--sn-regular-body-l-fontWeight, var(--sn-theme-typography-fontWeight-regular-body-l, var(--sn-brand-font-fontWeight-light-regular-body-l, var(--sn-primitive-font-fontWeightValue-400, 400))));
+  line-height:var(--sn-regular-body-l-lineHeight, var(--sn-density-typography-roleBody-lineHeightL, var(--sn-primitive-font-lineHeight-by20, 28px)));
+  font-size:var(--sn-regular-body-l-fontSize, var(--sn-density-typography-roleBody-fontSizeL, var(--sn-primitive-font-fontSize-20, 20px)));
+  letter-spacing:var(--sn-regular-body-l-letterSpacing, var(--sn-primitive-font-letterSpacing-m, 0.1px));
+  paragraph-spacing:var(--sn-regular-body-l-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize16, 8px));
+}
+.content[data-disabled] .label,
+.content[data-disabled] .description,
+.content[data-disabled] .caption{
+  color:var(--sn-theme-color-available-version-textDisabled, var(--sn-brand-color-text-version-disabled, rgba(65, 66, 78, 0.3490196078)));
+}

package/dist/cjs/helperComponents/ListEmptyState/ListEmptyState.d.ts

@@ -0,0 +1,16 @@
+import { InfoBlockProps } from '@cloud-ru/ds-info-block';
+import { ListPrivateProps } from '../../components/Lists/types';
+export type EmptyStateProps = Pick<InfoBlockProps, 'content' | 'icon' | 'data-test-id' | 'footer' | 'className'>;
+export type ListEmptyState = {
+    emptyStates: {
+        noDataState: EmptyStateProps;
+        noResultsState: EmptyStateProps;
+        errorDataState: EmptyStateProps;
+    };
+    loading?: boolean;
+    dataError?: boolean;
+    dataFiltered?: boolean;
+    hasNoItems: boolean;
+    size: ListPrivateProps['size'];
+};
+export declare function ListEmptyState({ dataError, dataFiltered, hasNoItems, emptyStates, loading, size }: ListEmptyState): import("react/jsx-runtime").JSX.Element | null;

package/dist/cjs/helperComponents/ListEmptyState/ListEmptyState.js

@@ -0,0 +1,25 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ListEmptyState = ListEmptyState;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const info_block_1 = require("@cloud-ru/ds-info-block");
+const constants_1 = require("../../constants");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+function ListEmptyState({ dataError, dataFiltered, hasNoItems, emptyStates, loading, size }) {
+    if (loading) {
+        return null;
+    }
+    if (dataError) {
+        return ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.listEmptyStateWrapper, children: (0, jsx_runtime_1.jsx)(info_block_1.InfoBlock, { ...emptyStates.errorDataState, size: size, align: 'vertical', "data-test-id": constants_1.TEST_IDS.error }) }));
+    }
+    if (dataFiltered && hasNoItems) {
+        return ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.listEmptyStateWrapper, children: (0, jsx_runtime_1.jsx)(info_block_1.InfoBlock, { ...emptyStates.noResultsState, size: size, align: 'vertical', "data-test-id": constants_1.TEST_IDS.noResults }) }));
+    }
+    if (!dataFiltered && hasNoItems) {
+        return ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.listEmptyStateWrapper, children: (0, jsx_runtime_1.jsx)(info_block_1.InfoBlock, { ...emptyStates.noDataState, size: size, align: 'vertical', "data-test-id": constants_1.TEST_IDS.noData }) }));
+    }
+    return null;
+}

package/dist/cjs/helperComponents/ListEmptyState/hooks.d.ts

@@ -0,0 +1,10 @@
+import { EmptyStateProps } from './ListEmptyState';
+export declare function useEmptyState({ noDataState: noDataStateProp, noResultsState: noResultsStateProp, errorDataState: errorDataStateProp, }: {
+    noDataState?: EmptyStateProps;
+    noResultsState?: EmptyStateProps;
+    errorDataState?: EmptyStateProps;
+}): {
+    noDataState: EmptyStateProps;
+    noResultsState: EmptyStateProps;
+    errorDataState: EmptyStateProps;
+};

package/dist/cjs/helperComponents/ListEmptyState/hooks.js

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useEmptyState = useEmptyState;
+const system_1 = require("@cloud-ru/ds-icons/interface/system");
+const react_1 = require("react");
+const locale_1 = require("../../locale");
+function useEmptyState({ noDataState: noDataStateProp, noResultsState: noResultsStateProp, errorDataState: errorDataStateProp, }) {
+    const { t } = locale_1.listLocale.useTranslations();
+    return (0, react_1.useMemo)(() => {
+        const noDataState = {
+            icon: { icon: system_1.SearchSVG, appearance: 'neutral', background: true },
+            content: t('noData.description'),
+            ...noDataStateProp,
+        };
+        const noResultsState = {
+            content: t('noResults.description'),
+            ...noResultsStateProp,
+        };
+        const errorDataState = {
+            icon: { icon: system_1.CrossSVG, appearance: 'neutral', background: true },
+            content: t('errorData.description'),
+            ...errorDataStateProp,
+        };
+        return {
+            noDataState,
+            noResultsState,
+            errorDataState,
+        };
+    }, [errorDataStateProp, noDataStateProp, noResultsStateProp, t]);
+}

package/dist/cjs/helperComponents/ListEmptyState/index.d.ts

@@ -0,0 +1,2 @@
+export * from './ListEmptyState';
+export { useEmptyState } from './hooks';

package/dist/cjs/helperComponents/ListEmptyState/index.js

@@ -0,0 +1,20 @@
+"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 });
+exports.useEmptyState = void 0;
+__exportStar(require("./ListEmptyState"), exports);
+var hooks_1 = require("./hooks");
+Object.defineProperty(exports, "useEmptyState", { enumerable: true, get: function () { return hooks_1.useEmptyState; } });

package/dist/cjs/helperComponents/ListEmptyState/styles.module.css

@@ -0,0 +1,8 @@
+.listEmptyStateWrapper{
+  display:flex;
+  flex-direction:column;
+  align-items:center;
+  justify-content:center;
+  box-sizing:border-box;
+  padding:var(--sn-primitive-dimension-8, 8px);
+}

package/dist/cjs/helperComponents/MobileDroplist/MobileDroplist.d.ts

@@ -0,0 +1,9 @@
+import { MobileDroplistProps } from '../../components/Lists/types';
+/**
+ * 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 declare function MobileDroplist({ items, selection, open: openProp, onOpenChange, children, search, label, actionButton, slotAfterTitle, onBackButtonClick, virtualized, closeDroplistOnItemClick, scroll, container, closeOnPopstate, size, footer, onItemsReorder, ...rest }: MobileDroplistProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/helperComponents/MobileDroplist/MobileDroplist.js

@@ -0,0 +1,143 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MobileDroplist = MobileDroplist;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const bottom_sheet_1 = require("@cloud-ru/ds-bottom-sheet");
+const portal_context_1 = require("@cloud-ru/ds-portal-context");
+const utils_1 = require("@cloud-ru/ds-utils");
+const react_1 = require("react");
+const List_1 = require("../../components/Lists/List");
+const constants_1 = require("../../constants");
+const MobileDroplist_module_scss_1 = __importDefault(require('./MobileDroplist.module.css'));
+const utils_2 = require("./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'`.
+ */
+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 }) {
+    const portalContext = (0, portal_context_1.usePortalContext)();
+    const scrollRef = (0, react_1.useRef)(null);
+    const [open = false, setIsOpen] = (0, utils_1.useValueControl)({ value: openProp, onChange: onOpenChange });
+    // Стек заходов во вложенные next-list'ы. Пустой — корневой уровень.
+    const [path, setPath] = (0, react_1.useState)([]);
+    const handleClose = () => {
+        setIsOpen(false);
+        setPath([]);
+    };
+    const handleSelectionChange = 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;
+    if (selection) {
+        listSelection = { ...selection, onChange: handleSelectionChange };
+    }
+    const closeOnClick = Boolean(closeDroplistOnItemClick && !selection);
+    const trigger = (0, react_1.useMemo)(() => {
+        const handleOpen = () => setIsOpen(true);
+        if ((0, react_1.isValidElement)(children)) {
+            return (0, react_1.cloneElement)(children, {
+                onClick: (event) => {
+                    children.props.onClick?.(event);
+                    handleOpen();
+                },
+            });
+        }
+        if (typeof children === 'function') {
+            const element = children({
+                onKeyDown: event => {
+                    if (event.key === 'Enter' || event.key === ' ') {
+                        event.preventDefault();
+                        handleOpen();
+                    }
+                },
+            });
+            if ((0, react_1.isValidElement)(element)) {
+                return (0, react_1.cloneElement)(element, {
+                    onClick: (event) => {
+                        element.props.onClick?.(event);
+                        handleOpen();
+                    },
+                });
+            }
+            return element;
+        }
+        return ((0, jsx_runtime_1.jsx)("span", { role: 'button', tabIndex: 0, "data-test-id": constants_1.TEST_IDS.mobileDroplistTrigger, onClick: handleOpen, onKeyDown: event => {
+                if (event.key === 'Enter' || event.key === ' ') {
+                    event.preventDefault();
+                    handleOpen();
+                }
+            }, children: children }));
+    }, [children, setIsOpen]);
+    const containerRef = portalContext.current ?? undefined;
+    // Каскад sheet'ов: корень + по одному sheet'у на каждый заход в next-list. Каждый накладывается
+    // поверх предыдущего (свой backdrop), а не заменяет его содержимое. Назад — закрывает верхний.
+    const sheets = [{ source: items, title: label, item: undefined }].concat(path.map(item => ({ source: item.items, title: (0, utils_2.nextListOption)(item), item })));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [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
+                    : (0, utils_2.buildLevelItems)(source, 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,
+                    scrollContainerClassName: scrollable ? MobileDroplist_module_scss_1.default.sheetScroll : undefined,
+                };
+                const content = ((0, jsx_runtime_1.jsx)("div", { className: MobileDroplist_module_scss_1.default.listWrapper, "data-test-id": isRoot ? constants_1.TEST_IDS.mobileDroplistRoot : undefined, "data-fill": scrollable || undefined, children: reorderRoot && onItemsReorder ? ((0, jsx_runtime_1.jsx)(List_1.ReorderableList, { ...listCommonProps, items: items, onItemsReorder: onItemsReorder })) : ((0, jsx_runtime_1.jsx)(List_1.List, { ...listCommonProps, items: levelItems ?? [], virtualized: isRoot && virtualized })) }));
+                // Уход с уровня вверх по стеку (для глубже-корня sheet'ов).
+                const popLevel = () => setPath(prev => prev.slice(0, levelIndex - 1));
+                // «Назад»: на корне — только явный `onBackButtonClick` (иначе back-стрелки нет — корневой
+                // droplist закрывается свайпом / backdrop'ом, как в легаси); глубже — снять верхний sheet.
+                const handleBack = isRoot ? onBackButtonClick : popLevel;
+                return ((0, jsx_runtime_1.jsx)(bottom_sheet_1.BottomSheet, { 
+                    // Потребительский `container` (portal-override) приоритетнее `PortalContext` — как на desktop.
+                    container: container?.current ?? containerRef, open: isRoot ? open : true, 
+                    // Dismiss (backdrop / swipe / Esc): на корне — закрыть весь droplist; глубже — вернуться на уровень вверх,
+                    // как ждёт пользователь на mobile (а не закрывать всю цепочку разом).
+                    onClose: isRoot ? handleClose : popLevel, withDividers: true, 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 }, isRoot ? 'root' : String(item?.id ?? levelIndex)));
+            })] }));
+}

package/dist/cjs/helperComponents/MobileDroplist/MobileDroplist.module.css

@@ -0,0 +1,16 @@
+.listWrapper{
+  flex:1 1 auto;
+  box-sizing:border-box;
+  width:calc(100% + 2 * var(--sn-bottomSheet-anatomy-container-content-bodyWrapper-paddingHorizontal, var(--sn-density-spacing-interval-l, var(--sn-primitive-dimension-24, 24px))));
+  min-height:16px;
+  margin-block:calc(-1 * var(--sn-bottomSheet-anatomy-container-content-bodyWrapper-paddingTop, var(--sn-density-spacing-interval-m, var(--sn-primitive-dimension-16, 16px)))) calc(-1 * var(--sn-bottomSheet-anatomy-container-content-bodyWrapper-paddingBottom, var(--sn-density-spacing-interval-l, var(--sn-primitive-dimension-24, 24px))));
+  margin-inline:calc(-1 * var(--sn-bottomSheet-anatomy-container-content-bodyWrapper-paddingHorizontal, var(--sn-density-spacing-interval-l, var(--sn-primitive-dimension-24, 24px))));
+}
+.listWrapper[data-fill]{
+  height:100%;
+}
+
+.sheetScroll{
+  height:100%;
+  max-height:100%;
+}

package/dist/cjs/helperComponents/MobileDroplist/index.d.ts

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

package/dist/cjs/helperComponents/MobileDroplist/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("./MobileDroplist"), exports);

package/dist/cjs/helperComponents/MobileDroplist/utils.d.ts

@@ -0,0 +1,11 @@
+import { Item, NextListItem } from '../../components/Items';
+/** Текст `label` next-list-айтема — заголовок шапки sheet'а при заходе во вложенный список. */
+export declare function nextListOption(item: NextListItem): string | undefined;
+/**
+ * Готовит айтемы текущего уровня sheet'а:
+ * - `next-list` превращается в базовый айтем с шевроном `>`, клик по которому уводит на уровень вложенного
+ *   списка (drill-down), а не открывает второй BottomSheet (десктопный nested-popover на mobile неприменим);
+ * - `group` / `group-select` / `collapse` рекурсивно обрабатываются (внутри них тоже может быть `next-list`);
+ * - базовые айтемы (action-меню без `selection`) при `closeOnClick` закрывают sheet по клику.
+ */
+export declare function buildLevelItems(items: Item[], onDrill: (item: NextListItem) => void, onClose: () => void, closeOnClick: boolean): Item[];