[NikGurev]

Вывод

Исследование: можно ли собрать ClampedList из ClampedList + useElementOverflow, чтобы он стал похож на ClampedText. Рекомендация: не делать на текущем хуке. Если нужен режим «по переполнению», то отдельным ClampedListNext (или режимом), а не заменой текущего API.

Что выяснено

• useElementOverflow читает ref.current прямо в render и сравнивает scrollHeight/Width с clientHeight/Width. Перерисовка происходит только по ResizeObserver (через rAF). Нет layout-effect, нет «защёлки», нет числа скрытых элементов.
• ClampedText хук не использует: меряет число строк через Range в useIsomorphicEffect (с временным снятием класса clamped) и поэтому знает «сколько всего», а не «сейчас переполняется». Триггер показывается при rows + 1, на первом рендере кадр рисуется с rows + 1, чтобы не мигать.
• ClampedList режет данные: items.slice(0, collapsedVisibleCount), счётчик Show N more и hiddenThreshold считаются из длины массива, детерминированно (SSR/гидрация без расхождений).

Прототип (история OverflowPrototype, скрыта из сайдбара)

Контейнер с max-block-size + useElementOverflow, проверено в браузере:

1. Кнопка исчезает после раскрытия: без ограничения высоты переполнения нет, нужна ручная «защёлка» (hadOverflow). Но защёлка не сбрасывается: при ресайзе до ширины, где всё помещается, остаётся «Show 0 more».
2. Счётчик скрытых элементов хук не даёт: нужен отдельный замер по getBoundingClientRect детей; он устаревает при ресайзе (при 320 → 600 px остаётся «21 more», хотя реально скрыто меньше).
3. SSR / первый кадр: на сервере и до первого ResizeObserver ref.current = null, то есть isOverflow = false: триггер появляется с задержкой на кадр (скачок вёрстки), а в раскрытом/клампнутом состоянии разметка отличается от серверной.
4. Текущий ClampedList напрямую не компонуется: при collapsedVisibleCount ≥ длины hiddenItemCount = 0 и триггер не рендерится; render-prop получает уже срезанный visibleItems, а не полный список. Нужен новый проп/режим.
5. Совместимость: ClampedListState, collapsedVisibleCount, hiddenThreshold — публичные типы и поведение; менять их нельзя без ClampedListNext (см. AGENTS.md, раздел Deprecation).

Если делать

Правильнее не на useElementOverflow, а на ClampedText-подходе: измерение в useIsomorphicEffect с временной раскладкой «без ограничения», вычисление hiddenCount тем же замером (по bottom детей относительно ограничивающей высоты/rows), первый кадр без мигания. Хук useElementOverflow можно доработать (layout-effect, пересчёт при смене children), но он по определению отвечает на вопрос «переполняется ли сейчас», а не «сколько скрыто». Анимация раскрытия остаётся в #513 (useCollapseAnimation); прототип её не трогает и на неё опирался бы при реализации.

Изменения

Только история OverflowPrototype в ClampedList.stories.tsx (tags: ['!dev', '!manifest']). Публичный API не менялся, check-api не требуется. prettier, eslint --max-warnings=0 и tsc --noEmit проходят.

🤖 Generated with Claude Code

[coderabbitai]

Warning

Review limit reached

You've used all free OSS reviews for now. Wait for the free limit to reset to keep reviewing this public repository.

Next included review available in 57 minutes.

Check out review usage here.

View limit details

Limit details: You’ve used the included review currently available.

Learn how review limits work.

Review configuration:

Run configuration

• Source mode: Auto
• Repository: Unavailable
• Branch: Unavailable
• File: No configuration file from this repository applied
• Commit: Unavailable
• Layers: defaults
• Review profile: CHILL
• Plan: Advanced
• Run ID: 2b5396be-e183-4cfc-9651-f05214b2ab9e

Commits

Reviewing files that changed from the base of the PR and between d1619aa and 1d8ee14.

Files selected for processing: 1

• packages/components/src/components/ClampedList/ClampedList.stories.tsx

• Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[github-actions]

Visit the preview URL for this PR (updated for commit 1d8ee14):

https://react-koobiq-next--prs-514-gt17gk3u.web.app

_{(expires Sun, 01 Nov 2026 11:17:24 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

_{Sign: fc29847d4a9e5cb1adf458c76a9b681c76e2eeff}