@cloud-ru/ds-list 1.0.0

package/src/helperComponents/DesktopDroplist/DesktopDroplist.tsx

@@ -0,0 +1,313 @@
+import { Dropdown } from '@cloud-ru/ds-dropdown';
+import { focusWithoutScroll, preventScrollOnVerticalArrows, useValueControl } from '@cloud-ru/ds-utils';
+import cn from 'classnames';
+import mergeRefs from 'merge-refs';
+import { cloneElement, isValidElement, KeyboardEvent, ReactNode, useCallback, useEffect, useMemo, useRef } from 'react';
+
+import { SearchItem } from '../../components/Items';
+import {
+  CollapseContext,
+  FocusListContext,
+  NewListContextProvider,
+  OpenListContext,
+  SelectionProvider,
+} from '../../components/Lists/contexts';
+import {
+  DEFAULT_FALLBACK_PLACEMENTS,
+  DEFAULT_SIZE,
+  FOCUS_DEFERRAL_TIMEOUT,
+} from '../../components/Lists/Droplist/constants';
+import { useListItemsModel, useNewKeyboardNavigation } from '../../components/Lists/hooks';
+import { ListPrivate } from '../../components/Lists/ListPrivate';
+import styles from '../../components/Lists/styles.module.scss';
+import { DesktopDroplistProps } from '../../components/Lists/types';
+
+/**
+ * Desktop-поверхность `Droplist`: анкорный popover (`Dropdown`) со списком. Internal — наружу
+ * не реэкспортится; рендерится адаптивным `Droplist` на не-mobile раскладке. Так как вызывается
+ * только на desktop-раскладке, внутренний адаптивный `Dropdown` всегда рендерит popover.
+ */
+export function DesktopDroplist({
+  items: itemsProp,
+  search,
+  pinBottom: pinBottomProp = [],
+  pinTop: pinTopProp = [],
+  footerActiveElementsRefs,
+  children,
+  trigger,
+  placement,
+  widthStrategy,
+  triggerElemRef: triggerElemRefProp,
+  container,
+  open: openProp,
+  onOpenChange,
+  collapse = {},
+  triggerClassName,
+  selection,
+  contentRender,
+  size = DEFAULT_SIZE,
+  marker = true,
+  closeDroplistOnItemClick = false,
+  className,
+  listRef: listRefProp,
+  untouchableScrollbars = false,
+  virtualized = false,
+  closeOnPopstate,
+  header,
+  headerDivider,
+  footer,
+  footerDivider,
+  onItemsReorder,
+  ...props
+}: DesktopDroplistProps) {
+  const {
+    hasSearch,
+    openCollapseItems,
+    toggleOpenCollapseItem,
+    searchItem,
+    flattenItems,
+    focusFlattenItems,
+    memorizedItems,
+    ids,
+    expandedIds,
+    firstItemId,
+    onDragEnd,
+    sortableIds,
+  } = useListItemsModel({
+    items: itemsProp,
+    pinTop: pinTopProp,
+    pinBottom: pinBottomProp,
+    search,
+    collapse,
+    selectionMode: selection?.mode,
+    footerActiveElementsRefs,
+    onItemsReorder,
+  });
+
+  const [open = false, setOpen] = useValueControl<boolean>({
+    value: openProp,
+    defaultValue: false,
+    onChange: onOpenChange,
+  });
+
+  const triggerElemRef = useRef<HTMLElement>(null);
+  const listRef = useRef<HTMLElement>(null);
+
+  const { handleListKeyDownFactory, resetActiveItemId, activeItemId, forceUpdateActiveItemId } =
+    useNewKeyboardNavigation({
+      mainRef: triggerElemRefProp ?? triggerElemRef,
+      focusFlattenItems,
+      hasListInFocusChain: true,
+      firstItemId,
+    });
+
+  const handleListKeyDown = useCallback(
+    (e: KeyboardEvent<HTMLElement>) => handleListKeyDownFactory(ids, expandedIds)(e),
+    [handleListKeyDownFactory, ids, expandedIds],
+  );
+
+  // Закрытие по Escape должно вернуть фокус на триггер (a11y). Закрытие
+  // outside-click'ом фокус не отбирает (пользователь намеренно ушёл в другое место),
+  // поэтому различаем источник: флаг ставится Escape-обработчиком на контенте дроплиста.
+  const closedByKeyboardRef = useRef(false);
+  // Возврат фокуса откладывается на следующий тик (после размонтирования портала).
+  // Храним id таймера, чтобы отменить его при размонтировании компонента.
+  const focusTriggerTimerRef = useRef<ReturnType<typeof setTimeout>>();
+
+  useEffect(
+    () => () => {
+      clearTimeout(focusTriggerTimerRef.current);
+    },
+    [],
+  );
+
+  const handleOpenChange = useCallback(
+    (open: boolean) => {
+      resetActiveItemId();
+
+      if (!open && closedByKeyboardRef.current) {
+        const triggerEl = (triggerElemRefProp ?? triggerElemRef).current;
+        focusTriggerTimerRef.current = setTimeout(() => triggerEl?.focus(), FOCUS_DEFERRAL_TIMEOUT);
+      }
+
+      closedByKeyboardRef.current = false;
+
+      setOpen(open);
+    },
+    [resetActiveItemId, setOpen, triggerElemRefProp],
+  );
+
+  const handleContentKeyDown = useCallback((e: KeyboardEvent<HTMLElement>) => {
+    if (e.key === 'Escape') {
+      closedByKeyboardRef.current = true;
+    }
+  }, []);
+
+  const onKeyDown = useCallback(
+    (e: KeyboardEvent<HTMLElement>, cb?: (e: KeyboardEvent<HTMLElement>) => void) => {
+      // Up/Down открывают/закрывают дроплист — гасим их нативный скролл страницы. Только
+      // вертикальные: триггером может быть текстовое поле, где Left/Right двигают каретку.
+      preventScrollOnVerticalArrows(e);
+
+      if (e.key === 'ArrowDown') {
+        setOpen(true);
+
+        focusTriggerTimerRef.current = setTimeout(() => {
+          resetActiveItemId();
+          focusWithoutScroll(listRef.current);
+        }, FOCUS_DEFERRAL_TIMEOUT);
+      }
+
+      if (e.key === 'ArrowUp') {
+        setOpen(false);
+      }
+
+      cb?.(e);
+    },
+    [resetActiveItemId, setOpen],
+  );
+
+  const isValid = useMemo(() => isValidElement(children), [children]);
+
+  const triggerElem: ReactNode = useMemo(() => {
+    if (isValidElement(children)) {
+      const props = typeof children.props === 'object' ? children.props : {};
+
+      return cloneElement(children, {
+        ...props,
+        onKeyDown: (e: KeyboardEvent<HTMLElement>) => {
+          onKeyDown(e, children.props?.onKeyDown);
+        },
+      });
+    }
+
+    if (typeof children === 'function') {
+      return children({ onKeyDown });
+    }
+
+    return children;
+  }, [onKeyDown, children]);
+
+  // search и footer вынесены из `<ul>` в слоты шапки/футера dropdown. Т.к. их события
+  // клавиатуры больше не всплывают на `<ul>`-onKeyDown, навигацию по списку им отдаём
+  // явно через `handleListKeyDown` (тот же factory). Фокус-хэндофф идёт через общие
+  // refs (searchItem.itemRef / footerActiveElementsRefs), уже зарегистрированные в `ids`.
+  const searchNode = hasSearch ? (
+    <SearchItem
+      search={search}
+      itemRef={searchItem.itemRef}
+      inTopBar
+      onNavKeyDown={handleListKeyDown}
+      onFocus={() => forceUpdateActiveItemId?.(searchItem.id)}
+    />
+  ) : undefined;
+
+  const footerNode = footer ? (
+    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+    <div onKeyDown={handleListKeyDown}>{footer}</div>
+  ) : undefined;
+
+  const collapseContextValue = useMemo(
+    () => ({ openCollapseItems, toggleOpenCollapseItem }),
+    [openCollapseItems, toggleOpenCollapseItem],
+  );
+
+  const focusListContextValue = useMemo(
+    () => ({ activeItemId, handleListKeyDownFactory, forceUpdateActiveItemId }),
+    [activeItemId, handleListKeyDownFactory, forceUpdateActiveItemId],
+  );
+
+  const closeDroplist = useCallback(() => {
+    setOpen(false);
+    resetActiveItemId();
+    (triggerElemRefProp ?? triggerElemRef).current?.focus();
+  }, [setOpen, resetActiveItemId, triggerElemRefProp]);
+
+  const openListContextValue = useMemo(
+    () => ({ closeDroplistOnItemClick, closeDroplist }),
+    [closeDroplistOnItemClick, closeDroplist],
+  );
+
+  // virtualized-список не имеет собственной ширины: строки `position:absolute; width:100%`,
+  // контейнер `width:100%` — под `auto` вся цепочка `100%` от «ничего» схлопывается в 0.
+  // Поэтому для virtualized и дефолт (`undefined`), и явный `auto` поднимаем до `gte`
+  // (ширина ≥ триггера). Узкую ширину такой список получает не через `auto`, а явным
+  // `width` (например, `dropDownClassName` у ChipChoice — сам он не virtualized).
+  const effectiveWidthStrategy =
+    virtualized && (widthStrategy === undefined || widthStrategy === 'auto') ? 'gte' : widthStrategy;
+
+  return (
+    <NewListContextProvider
+      flattenItems={flattenItems}
+      focusFlattenItems={focusFlattenItems}
+      contentRender={contentRender}
+      size={size}
+      marker={marker}
+      firstItemId={firstItemId}
+      virtualized={virtualized}
+    >
+      <SelectionProvider {...selection}>
+        <CollapseContext.Provider value={collapseContextValue}>
+          <FocusListContext.Provider value={focusListContextValue}>
+            <OpenListContext.Provider value={openListContextValue}>
+              <Dropdown
+                content={
+                  // onKeyDown — пассивный детектор Escape для возврата фокуса на триггер
+                  // (см. handleContentKeyDown). Контейнер презентационный, не интерактивный.
+                  // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+                  <div className={cn(styles.wrapper, className)} onKeyDown={handleContentKeyDown}>
+                    <ListPrivate
+                      {...props}
+                      items={memorizedItems.items.focusCloseChildIds}
+                      pinTop={memorizedItems.pinTop.focusCloseChildIds}
+                      pinBottom={memorizedItems.pinBottom.focusCloseChildIds}
+                      virtualized={virtualized}
+                      onKeyDown={handleListKeyDown}
+                      tabIndex={0}
+                      ref={mergeRefs(listRef, listRefProp)}
+                      dataFiltered={props.dataFiltered ?? Boolean(search?.value)}
+                      onFocus={e => {
+                        e.stopPropagation();
+
+                        forceUpdateActiveItemId?.(ids[0]);
+                      }}
+                      limitedScrollHeight
+                      untouchableScrollbars={untouchableScrollbars}
+                      onDragEnd={onDragEnd}
+                      sortableIds={sortableIds}
+                    />
+                  </div>
+                }
+                bodyPadding={false}
+                title={header}
+                // Divider под topBar рисуется, если явно запрошен header'ом либо когда в topBar
+                // есть поиск: строка поиска визуально отделяется от тела списка (как в PinTopGroupItem
+                // у inline-List). @cloud-ru/ds-dropdown рисует один divider на весь topBar (headline + search).
+                headerDivider={headerDivider || hasSearch}
+                search={searchNode}
+                footer={footerNode}
+                footerDivider={footerDivider}
+                container={container}
+                outsideClick
+                triggerClassName={triggerClassName}
+                fallbackPlacements={DEFAULT_FALLBACK_PLACEMENTS}
+                trigger={trigger}
+                placement={placement}
+                widthStrategy={effectiveWidthStrategy}
+                triggerRef={!triggerElemRefProp ? triggerElemRef : (isValid && triggerElemRefProp) || undefined}
+                open={open}
+                onOpenChange={handleOpenChange}
+                closeOnPopstate={closeOnPopstate}
+                // dnd-kit (`MouseSensor`/`TouchSensor`) слушает `mouseup`/`touchend` на document
+                // в bubble-фазе — гашение этих хендлеров на floating ломает завершение drag.
+                stopPropagation={onItemsReorder ? { onMouseUp: false, onTouchEnd: false } : undefined}
+              >
+                {triggerElem}
+              </Dropdown>
+            </OpenListContext.Provider>
+          </FocusListContext.Provider>
+        </CollapseContext.Provider>
+      </SelectionProvider>
+    </NewListContextProvider>
+  );
+}

package/src/helperComponents/DesktopDroplist/index.ts

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

package/src/helperComponents/HiddenTabButton/HiddenTabButton.tsx

@@ -0,0 +1,35 @@
+import { FocusEvent, forwardRef, RefObject, useCallback } from 'react';
+
+import { stopPropagation } from '../../utils';
+import styles from './styles.module.scss';
+
+type HiddenTabButtonProps = {
+  listRef: RefObject<HTMLElement>;
+  tabIndex?: number;
+};
+
+export const HiddenTabButton = forwardRef<HTMLButtonElement, HiddenTabButtonProps>(({ listRef, tabIndex }, ref) => {
+  const handleFocus = useCallback(
+    (e: FocusEvent<HTMLButtonElement>) => {
+      if (e.relatedTarget !== listRef.current) {
+        listRef.current?.focus();
+      }
+
+      e.preventDefault();
+      e.stopPropagation();
+    },
+    [listRef],
+  );
+
+  return (
+    <button
+      type='button'
+      aria-hidden
+      ref={ref}
+      onKeyDown={stopPropagation}
+      onFocus={handleFocus}
+      className={styles.hiddenBtn}
+      tabIndex={tabIndex}
+    />
+  );
+});

package/src/helperComponents/HiddenTabButton/index.ts

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

package/src/helperComponents/HiddenTabButton/styles.module.scss

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

package/src/helperComponents/ItemContent/ItemContent.tsx

@@ -0,0 +1,80 @@
+import { TruncateString, TruncateStringProps } from '@cloud-ru/ds-truncate-string';
+import { extractSupportProps, WithSupportProps } from '@cloud-ru/ds-utils';
+import cn from 'classnames';
+import { useMemo } from 'react';
+
+import { useNewListContext } from '../../components/Lists/contexts';
+import { TEST_IDS } from '../../constants';
+import styles from './styles.module.scss';
+
+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;
+}>;
+
+const DEFAULT_TRUNCATE: TruncateProps = {
+  label: 1,
+  description: 2,
+  variant: 'end',
+};
+
+export function ItemContent({
+  truncate: truncateProp,
+  caption,
+  description,
+  label,
+  className,
+  disabled,
+  ...rest
+}: ItemContentProps) {
+  const { size = 'm' } = useNewListContext();
+
+  const truncate = useMemo(
+    () => ({
+      ...DEFAULT_TRUNCATE,
+      ...truncateProp,
+    }),
+    [truncateProp],
+  );
+
+  return (
+    <div
+      className={cn(styles.content, className)}
+      {...extractSupportProps(rest)}
+      data-size={size ?? 's'}
+      data-disabled={disabled || undefined}
+    >
+      <div className={styles.headline}>
+        <div className={styles.label}>
+          <TruncateString
+            variant={truncate.variant}
+            text={String(label)}
+            maxLines={truncate.label}
+            data-test-id={TEST_IDS.baseItemLabel}
+          />
+        </div>
+        {caption && <span className={styles.caption}>{caption}</span>}
+      </div>
+
+      {description && (
+        <div className={styles.description}>
+          <TruncateString
+            text={description}
+            maxLines={truncate.description}
+            data-test-id={TEST_IDS.baseItemDescription}
+          />
+        </div>
+      )}
+    </div>
+  );
+}

package/src/helperComponents/ItemContent/index.ts

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

package/src/helperComponents/ItemContent/styles.module.scss

@@ -0,0 +1,100 @@
+@use '@cloud-ru/ds-figma-variables/build/scss/styles/styles.module' as base;
+@use '@cloud-ru/ds-figma-variables/build/scss/components/list.module' as list;
+
+$sizes: 's', 'm', 'l';
+
+$label-size-map: (
+  's': 's',
+  'm': 'm',
+  'l': 'l',
+);
+
+// Подпись и описание набраны тем же размером, что заголовок: в мастере у всех
+// трёх текстов одна типографика внутри размера (s — 12/16, m — 14/20, l — 16/24).
+$caption-size-map: (
+  's': 's',
+  'm': 'm',
+  'l': 'l',
+);
+
+$description-size-map: (
+  's': 's',
+  'm': 'm',
+  'l': 'l',
+);
+
+.headline {
+  display: flex;
+  align-items: center;
+}
+
+.label {
+  overflow: hidden;
+  flex: 1;
+  color: base.$sn-theme-color-available-version-textMain;
+}
+
+.caption {
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+
+  color: base.$sn-theme-color-available-version-textTertiary;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.description {
+  color: base.$sn-theme-color-available-version-textSecondary;
+}
+
+.content {
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  flex-shrink: 1;
+
+  box-sizing: border-box;
+
+  @each $size in $sizes {
+    &[data-size='#{$size}'] {
+
+      // textContent.gap — вертикальный зазор headline ↔ description. s/m = 0, l = 2.
+      gap: base.simple-var(list.$list, 'anatomy', 'size', $size, 'listItem', 'contentWrapper', 'textWrapper', 'textContent', 'gap');
+      // textWrapper: vertical padding вокруг строки контента, textContent: horizontal padding.
+      padding: base.simple-var(list.$list, 'anatomy', 'size', $size, 'listItem', 'contentWrapper', 'textWrapper', 'padding-top')
+        base.simple-var(list.$list, 'anatomy', 'size', $size, 'listItem', 'contentWrapper', 'textWrapper', 'textContent', 'padding-right')
+        base.simple-var(list.$list, 'anatomy', 'size', $size, 'listItem', 'contentWrapper', 'textWrapper', 'padding-bottom')
+        base.simple-var(list.$list, 'anatomy', 'size', $size, 'listItem', 'contentWrapper', 'textWrapper', 'textContent', 'padding-left');
+
+      .headline {
+        gap: base.simple-var(list.$list, 'anatomy', 'size', $size, 'listItem', 'contentWrapper', 'textWrapper', 'textContent', 'headline', 'gap');
+        min-height: base.simple-var(list.$list, 'anatomy', 'size', $size, 'listItem', 'contentWrapper', 'textWrapper', 'textContent', 'headline', 'min-height');
+      }
+
+      .label {
+        @include base.composite-var(base.$base-styles, 'sn', 'regular', 'body', base.simple-var($label-size-map, $size));
+
+        display: flex;
+        align-items: center;
+      }
+
+      .caption {
+        @include base.composite-var(base.$base-styles, 'sn', 'regular', 'body', base.simple-var($caption-size-map, $size));
+      }
+
+      .description {
+        @include base.composite-var(base.$base-styles, 'sn', 'regular', 'body', base.simple-var($description-size-map, $size));
+      }
+    }
+  }
+
+  &[data-disabled] {
+    .label,
+    .description,
+    .caption {
+      color: base.$sn-theme-color-available-version-textDisabled;
+    }
+  }
+}

package/src/helperComponents/ListEmptyState/ListEmptyState.tsx

@@ -0,0 +1,52 @@
+import { InfoBlock, InfoBlockProps } from '@cloud-ru/ds-info-block';
+
+import { ListPrivateProps } from '../../components/Lists/types';
+import { TEST_IDS } from '../../constants';
+import styles from './styles.module.scss';
+
+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 function ListEmptyState({ dataError, dataFiltered, hasNoItems, emptyStates, loading, size }: ListEmptyState) {
+  if (loading) {
+    return null;
+  }
+
+  if (dataError) {
+    return (
+      <div className={styles.listEmptyStateWrapper}>
+        <InfoBlock {...emptyStates.errorDataState} size={size} align='vertical' data-test-id={TEST_IDS.error} />
+      </div>
+    );
+  }
+
+  if (dataFiltered && hasNoItems) {
+    return (
+      <div className={styles.listEmptyStateWrapper}>
+        <InfoBlock {...emptyStates.noResultsState} size={size} align='vertical' data-test-id={TEST_IDS.noResults} />
+      </div>
+    );
+  }
+
+  if (!dataFiltered && hasNoItems) {
+    return (
+      <div className={styles.listEmptyStateWrapper}>
+        <InfoBlock {...emptyStates.noDataState} size={size} align='vertical' data-test-id={TEST_IDS.noData} />
+      </div>
+    );
+  }
+
+  return null;
+}

package/src/helperComponents/ListEmptyState/hooks.ts

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

package/src/helperComponents/ListEmptyState/index.ts

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

package/src/helperComponents/ListEmptyState/styles.module.scss

@@ -0,0 +1,11 @@
+@use '@cloud-ru/ds-figma-variables/build/scss/styles/styles.module' as base;
+
+.listEmptyStateWrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+
+  box-sizing: border-box;
+  padding: base.$sn-primitive-dimension-8;
+}

package/src/helperComponents/MobileDroplist/MobileDroplist.module.scss

@@ -0,0 +1,25 @@
+@use '@cloud-ru/ds-figma-variables/build/scss/components/bottomSheet.module' as bottomSheet;
+
+.listWrapper {
+  flex: 1 1 auto;
+
+  box-sizing: border-box;
+  width: calc(100% + 2 * #{bottomSheet.$sn-bottomSheet-anatomy-container-content-bodyWrapper-paddingHorizontal});
+  min-height: 16px;
+  margin-block: calc(-1 * #{bottomSheet.$sn-bottomSheet-anatomy-container-content-bodyWrapper-paddingTop})
+    calc(-1 * #{bottomSheet.$sn-bottomSheet-anatomy-container-content-bodyWrapper-paddingBottom});
+  margin-inline: calc(-1 * #{bottomSheet.$sn-bottomSheet-anatomy-container-content-bodyWrapper-paddingHorizontal});
+
+  // Scrollable (virtualized / scroll) список заполняет body sheet'а по высоте — тогда внутренний
+  // скролл-контейнер получает определённую высоту и виртуализатор меряет реальный вьюпорт.
+  &[data-fill] {
+    height: 100%;
+  }
+}
+
+// Скролл-контейнер списка в sheet'е заполняет высоту wrapper'а (а не фиксированный desktop-cap),
+// чтобы список занимал доступное пространство sheet'а и скроллился внутри себя.
+.sheetScroll {
+  height: 100%;
+  max-height: 100%;
+}