@cloud-ru/ds-list 1.0.0

package/dist/esm/helperComponents/ItemContent/ItemContent.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { TruncateString } from '@cloud-ru/ds-truncate-string';
+import { extractSupportProps } from '@cloud-ru/ds-utils';
+import cn from 'classnames';
+import { useMemo } from 'react';
+import { useNewListContext } from '../../components/Lists/contexts/index.js';
+import { TEST_IDS } from '../../constants.js';
+import styles from './styles.module.css';
+const DEFAULT_TRUNCATE = {
+    label: 1,
+    description: 2,
+    variant: 'end',
+};
+export function ItemContent({ truncate: truncateProp, caption, description, label, className, disabled, ...rest }) {
+    const { size = 'm' } = useNewListContext();
+    const truncate = useMemo(() => ({
+        ...DEFAULT_TRUNCATE,
+        ...truncateProp,
+    }), [truncateProp]);
+    return (_jsxs("div", { className: cn(styles.content, className), ...extractSupportProps(rest), "data-size": size ?? 's', "data-disabled": disabled || undefined, children: [_jsxs("div", { className: styles.headline, children: [_jsx("div", { className: styles.label, children: _jsx(TruncateString, { variant: truncate.variant, text: String(label), maxLines: truncate.label, "data-test-id": TEST_IDS.baseItemLabel }) }), caption && _jsx("span", { className: styles.caption, children: caption })] }), description && (_jsx("div", { className: styles.description, children: _jsx(TruncateString, { text: description, maxLines: truncate.description, "data-test-id": TEST_IDS.baseItemDescription }) }))] }));
+}

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

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

package/dist/esm/helperComponents/ItemContent/index.js

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

package/dist/esm/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/esm/helperComponents/ListEmptyState/ListEmptyState.d.ts

@@ -0,0 +1,16 @@
+import { InfoBlockProps } from '@cloud-ru/ds-info-block';
+import { ListPrivateProps } from '../../components/Lists/types.js';
+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/esm/helperComponents/ListEmptyState/ListEmptyState.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { InfoBlock } from '@cloud-ru/ds-info-block';
+import { TEST_IDS } from '../../constants.js';
+import styles from './styles.module.css';
+export function ListEmptyState({ dataError, dataFiltered, hasNoItems, emptyStates, loading, size }) {
+    if (loading) {
+        return null;
+    }
+    if (dataError) {
+        return (_jsx("div", { className: styles.listEmptyStateWrapper, children: _jsx(InfoBlock, { ...emptyStates.errorDataState, size: size, align: 'vertical', "data-test-id": TEST_IDS.error }) }));
+    }
+    if (dataFiltered && hasNoItems) {
+        return (_jsx("div", { className: styles.listEmptyStateWrapper, children: _jsx(InfoBlock, { ...emptyStates.noResultsState, size: size, align: 'vertical', "data-test-id": TEST_IDS.noResults }) }));
+    }
+    if (!dataFiltered && hasNoItems) {
+        return (_jsx("div", { className: styles.listEmptyStateWrapper, children: _jsx(InfoBlock, { ...emptyStates.noDataState, size: size, align: 'vertical', "data-test-id": TEST_IDS.noData }) }));
+    }
+    return null;
+}

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

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

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

@@ -0,0 +1,27 @@
+import { CrossSVG, SearchSVG } from '@cloud-ru/ds-icons/interface/system';
+import { useMemo } from 'react';
+import { listLocale } from '../../locale/index.js';
+export function useEmptyState({ noDataState: noDataStateProp, noResultsState: noResultsStateProp, errorDataState: errorDataStateProp, }) {
+    const { t } = listLocale.useTranslations();
+    return useMemo(() => {
+        const noDataState = {
+            icon: { icon: SearchSVG, appearance: 'neutral', background: true },
+            content: t('noData.description'),
+            ...noDataStateProp,
+        };
+        const noResultsState = {
+            content: t('noResults.description'),
+            ...noResultsStateProp,
+        };
+        const errorDataState = {
+            icon: { icon: CrossSVG, appearance: 'neutral', background: true },
+            content: t('errorData.description'),
+            ...errorDataStateProp,
+        };
+        return {
+            noDataState,
+            noResultsState,
+            errorDataState,
+        };
+    }, [errorDataStateProp, noDataStateProp, noResultsStateProp, t]);
+}

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

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

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

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

package/dist/esm/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/esm/helperComponents/MobileDroplist/MobileDroplist.d.ts

@@ -0,0 +1,9 @@
+import { MobileDroplistProps } from '../../components/Lists/types.js';
+/**
+ * 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/esm/helperComponents/MobileDroplist/MobileDroplist.js

@@ -0,0 +1,137 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { BottomSheet } from '@cloud-ru/ds-bottom-sheet';
+import { usePortalContext } from '@cloud-ru/ds-portal-context';
+import { useValueControl } from '@cloud-ru/ds-utils';
+import { cloneElement, isValidElement, useMemo, useRef, useState } from 'react';
+import { List, ReorderableList } from '../../components/Lists/List/index.js';
+import { TEST_IDS } from '../../constants.js';
+import styles from './MobileDroplist.module.css';
+import { buildLevelItems, nextListOption } from './utils.js';
+/**
+ * Mobile-вариант `Droplist`: рендерит `List` (в переданном `size`) внутри `BottomSheet` из `@cloud-ru/ds-bottom-sheet`.
+ * Триггер (`children`) клонируется для открытия sheet'а по клику/Enter/Space. `next-list`-айтемы на mobile
+ * не открывают вложенный popover, а навигируют внутри sheet'а (drill-down): клик уводит на уровень
+ * вложенного списка, в шапке появляется его заголовок и кнопка «назад». Internal — наружу не реэкспортится;
+ * рендерится адаптивным `Droplist` на `layoutType='mobile'`.
+ */
+export function MobileDroplist({ items, selection, open: openProp, onOpenChange, children, search, label, actionButton, slotAfterTitle, onBackButtonClick, virtualized, closeDroplistOnItemClick, scroll, container, closeOnPopstate, size, 
+// `footer` уводим в sticky-футер `BottomSheet` (кнопки действия прилипают к низу sheet'а, а не
+// скроллятся вместе со списком). `header` + `headerDivider` / `footerDivider` НЕ деструктурируем —
+// они уходят в `...rest` на корневой `List` (он рендерит шапку и её divider).
+// `onItemsReorder` — только на корне: drill-down `next-list` ортогонален дереву `SimpleItem`.
+footer, onItemsReorder, ...rest }) {
+    const portalContext = usePortalContext();
+    const scrollRef = useRef(null);
+    const [open = false, setIsOpen] = useValueControl({ value: openProp, onChange: onOpenChange });
+    // Стек заходов во вложенные next-list'ы. Пустой — корневой уровень.
+    const [path, setPath] = 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 = useMemo(() => {
+        const handleOpen = () => setIsOpen(true);
+        if (isValidElement(children)) {
+            return 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 (isValidElement(element)) {
+                return cloneElement(element, {
+                    onClick: (event) => {
+                        element.props.onClick?.(event);
+                        handleOpen();
+                    },
+                });
+            }
+            return element;
+        }
+        return (_jsx("span", { role: 'button', tabIndex: 0, "data-test-id": TEST_IDS.mobileDroplistTrigger, onClick: handleOpen, onKeyDown: event => {
+                if (event.key === 'Enter' || event.key === ' ') {
+                    event.preventDefault();
+                    handleOpen();
+                }
+            }, children: 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: nextListOption(item), item })));
+    return (_jsxs(_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
+                    : 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 ? styles.sheetScroll : undefined,
+                };
+                const content = (_jsx("div", { className: styles.listWrapper, "data-test-id": isRoot ? TEST_IDS.mobileDroplistRoot : undefined, "data-fill": scrollable || undefined, children: reorderRoot && onItemsReorder ? (_jsx(ReorderableList, { ...listCommonProps, items: items, onItemsReorder: onItemsReorder })) : (_jsx(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 (_jsx(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/esm/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/esm/helperComponents/MobileDroplist/index.d.ts

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

package/dist/esm/helperComponents/MobileDroplist/index.js

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

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

@@ -0,0 +1,11 @@
+import { Item, NextListItem } from '../../components/Items/index.js';
+/** Текст `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[];

package/dist/esm/helperComponents/MobileDroplist/utils.js

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

package/dist/esm/helperComponents/Separator/Separator.d.ts

@@ -0,0 +1,20 @@
+import { TruncateStringProps } from '@cloud-ru/ds-truncate-string';
+import { ForwardedRef, MouseEvent, ReactNode } from 'react';
+export type SeparatorProps = {
+    label?: string;
+    /** Слот иконки слева от label. */
+    beforeContent?: ReactNode;
+    truncate?: {
+        variant?: TruncateStringProps['variant'];
+    };
+    groupVariant?: 'subtitle' | 'subtitleTertiary';
+    divider?: boolean;
+    selectButton?: {
+        onClick?(e: MouseEvent<HTMLElement>): void;
+        indeterminate?: boolean;
+        checked?: boolean;
+        itemRef?: ForwardedRef<HTMLElement>;
+        label?: string;
+    };
+};
+export declare function Separator({ label, beforeContent, truncate, divider, groupVariant, selectButton, }: SeparatorProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/esm/helperComponents/Separator/Separator.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from '@cloud-ru/ds-button';
+import { Divider, VARIANT } from '@cloud-ru/ds-divider';
+import { TruncateString } from '@cloud-ru/ds-truncate-string';
+import { useMemo } from 'react';
+import { useCollapseLevelContext, useNewListContext } from '../../components/Lists/contexts/index.js';
+import { TEST_IDS } from '../../constants.js';
+import { listLocale } from '../../locale/index.js';
+import { stopPropagation } from '../../utils.js';
+import { SELECT_BUTTON_SIZE_MAP } from './constants.js';
+import styles from './styles.module.css';
+export function Separator({ label, beforeContent, truncate, divider, groupVariant = 'subtitleTertiary', selectButton, }) {
+    const { size = 'm' } = useNewListContext();
+    const { level = 0 } = useCollapseLevelContext();
+    const { t } = listLocale.useTranslations();
+    const selectButtonJSX = useMemo(() => {
+        if (!selectButton) {
+            return null;
+        }
+        const { onClick, checked, itemRef, label } = selectButton;
+        return (_jsx("span", { className: styles.selectButton, "data-size": size, "data-weight": (divider && groupVariant) || undefined, children: _jsx(Button, { view: 'function', appearance: 'neutral', size: SELECT_BUTTON_SIZE_MAP[size], tabIndex: 0, "data-test-id": TEST_IDS.bulkSelectButton, onClick: (e) => {
+                    onClick?.(e);
+                    e.preventDefault();
+                    e.stopPropagation();
+                }, onFocus: stopPropagation, innerRef: itemRef, label: label ?? (checked ? t('groupSelectButton.reset') : t('groupSelectButton.select')) }) }));
+    }, [divider, groupVariant, selectButton, size, t]);
+    if (label) {
+        return (_jsxs("div", { className: styles.separatorWithLabel, "data-size": size, "data-level-one": level === 1 || undefined, "data-level-more-one": level > 1 || undefined, style: { '--level': level }, children: [beforeContent && (_jsx("span", { className: styles.beforeContent, "aria-hidden": true, children: beforeContent })), _jsx("span", { className: styles.label, "data-group-variant": groupVariant, children: _jsx(TruncateString, { variant: truncate?.variant, text: label, maxLines: 1 }) }), _jsxs("div", { className: styles.labelEnd, children: [selectButtonJSX, divider && (_jsx(Divider, { className: styles.divider, variant: groupVariant === 'subtitle' ? VARIANT.Regular : VARIANT.Thin }))] })] }));
+    }
+    if (divider) {
+        return (_jsx("div", { className: styles.separatorWithoutLabel, "data-size": size, children: _jsx(Divider, { variant: VARIANT.Regular }) }));
+    }
+    return null;
+}

package/dist/esm/helperComponents/Separator/constants.d.ts

@@ -0,0 +1,3 @@
+import { ButtonProps } from '@cloud-ru/ds-button';
+import { Size } from '../../types.js';
+export declare const SELECT_BUTTON_SIZE_MAP: Record<Size, ButtonProps['size']>;

package/dist/esm/helperComponents/Separator/constants.js

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

package/dist/esm/helperComponents/Separator/index.d.ts

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

package/dist/esm/helperComponents/Separator/index.js

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