feat(Cell): add auto scroll for draggable mode

[inomdzhon]

• close [Bug]: Не реализован автоскролл компонента Cell  #5368
• Unit тесты – покрыл тестами все новые утилитарные функции

Описание

• Для оптимизации:
  • многие переменные и события инициализирую при onDragMove и очищаю при onDragEnd;
  • перетаскиваемому элементу задаю position: fixed (как в библиотеке https://github.com/hello-pangea/dnd). Если задавать position: absolute или оставить только translateY, то при перетаскивании элемента к нижнему краю, увеличивается scrollHeight.
• При скролле смещение прибавляем разницу scrollTop до и после к смещению clientY, который мы запоминаем в lastClientYRef.
• Автоскролл начинается через 300мс при условии, что мы находимся в 50px от краёв родителя со скроллом. Скорость автоскролла зависит от того, насколько близко бы находимся к краям (решение ).
• Помимо автоскролла, при перетаскивании элемента к границам области видимости по вертикали, добавил возможность скроллить с помощью колёсика мыши.

Кейсы

Кейс 1

Элементом со скроллом является window.

Пример на dekstop

global-scroll-desktop.mov

Пример в mobile

global-scroll-mobile.mov

Кейс 2

Элементом со скроллом является НЕ window.

Пример на dekstop

local-scroll-desktop.mov

Пример в mobile

local-scroll-mobile.mov

Ограничения

• Не учитывается кейс, когда у нас несколько родителей со скроллом.

Изменения

• Удалил ListContext, т.к. перенёс установку transition и pointer-events в JS код.
• Использую утилитарные функции из @vkontakte/vkui-floating-ui.
• Перенёс хук useDraggable и его зависимости в папаку hooks/ и переименовал в useDraggableDomApi, т.к., чтобы не делать брейкинг чендж, на текущий момент проще было сделать через DOM API, вместо React Way.
• Jest
  • В packages/vkui/jest.setup.js полифилю DOMRect. Также туда перенёс mathMedia.
  • В packages/vkui/src/testing/utils.ts создал помощники для requestAnimationFrame (waitRAF и requestAnimationFrameMock).

[github-actions]

size-limit report 📦

Path	Size
JS	341.2 KB (+1.43% 🔺)
JS (gzip)	104.19 KB (+1.41% 🔺)
JS (brotli)	86.08 KB (+1.57% 🔺)
JS import Div (tree shaking)	2.71 KB (0%)
CSS	255.2 KB (-0.02% 🔽)
CSS (gzip)	33.54 KB (-0.1% 🔽)
CSS (brotli)	27.24 KB (-0.06% 🔽)

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 0e30d8f:

Sandbox	Source
VKUI TypeScript	Configuration

[github-actions]

e2e tests

Playwright Report

[github-actions]

👀 Docs deployed

• ✅ Styleguide
• ✅ Storybook

Commit 0e30d8f

[codecov]

Codecov Report

Attention: 123 lines in your changes are missing coverage. Please review.

Comparison is base (107c29d) 79.38% compared to head (0e30d8f) 79.00%.

Files	Patch %	Lines
...s/useDraggableWithDomApi/useDraggableWithDomApi.ts	32.14%	114 Missing ⚠️
packages/vkui/src/lib/dom.tsx	84.00%	8 Missing ⚠️
packages/vkui/src/lib/rafSchd.ts	93.75%	1 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##           master    #5833      +/-   ##
==========================================
- Coverage   79.38%   79.00%   -0.39%     
==========================================
  Files         306      311       +5     
  Lines        9631     9903     +272     
  Branches     3261     3314      +53     
==========================================
+ Hits         7646     7824     +178     
- Misses       1985     2079      +94     

Flag	Coverage Δ
unittests	79.00% <67.02%> (-0.39%)	⬇️

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[mendrew]

Потрясающая работа! 👏 👏 👏

Работает прекрасно! Очень непростая задача, как по мне!
Сделано классно! 🔥🔥🔥 Спасибо за тесты 💯

Единственное, что стоит внимательнее посмотреть, это факт того, что иногда тригерится несколько recalculation style в коде, отвечающем за сдвиг элементов при драге. От того, что для определения необходимости сдвига мы читаем размеры и позицию элементов, потом меняем стили, а затем снова читаем размеры того же или уже других элементов и снова устанавливаем стили.
В идеале мы должны сначала все значения прочитать, а потом уже сразу для всех элементов поменять стили, иначе браузеру, для того, чтобы в очередной раз прочитать размеры элемента после изменения стилей приходится пересчитывать геометрию, чтоб понять затронули ли последние изменения элемент и предоставить актуальные размеры.

Возможно, что это nitpick и не стоит тратить время, потому что результаты и так хорошие, в большинстве вызовом dramove recalculation style вызывается один раз, но мне сложно представить как это будет в более сложном реальном примере.

[SevereCloud]

Попадали тесты

[SevereCloud]

👍

[mendrew]

Потрясающая работа 👏 👏 👏

Спасибо!