[Draft] feat: create ModalPageV2

[inomdzhon]

Описание

Пример рефактора модалок с помощью touch-событий.

• caused by feat: add ModalSheet #5092

Решение пограничных кейсов

• выделение текста – с помощью функции hasSelectionWithRangeType определяем, что пользователь выделил текст и перестаём реагировать на touchstart и touchmove пока выделение не будет удалено.

• поля ввода – через useKeyboard узнаём, что пользователь работает с клавиатурой и не реагируем не реагируем на touchstart.

  UPD хотя см. есть #599, где это считается багом 🤔

• вертикальный и горизонтальный скроллы – при touchstart достаём скроллируемый элемент через event.target и подписываемся на событие скролла, а также получаем информацию про позицию скролла.

  • при горизонтальном скролле мы дополнительно проверяем на scrollTop === 0, если true, то включаем свайп вниз и через event.preventDefault предотвращаем bounce скролла.

TODO

Вкратце:

• изменение прозрачности заднего фона в зависимости от позиции боттом-щита
• реализация settlingHeight (также см. [Feature] Разделить settlingHeight и fullscreen #1697)
• пройтись по issues из feat: add ModalSheet #5092
• проверить [Bug]: На мобильных устройствах не работает скролл выпадающего списка компонента CustomSelect (React v18.2.0) #5540

Остальное см. в checklist.md.

Референсы

• Youtube • Универсальные попапы или UIKit против / Антон Спивак
• React Spring Bottom Sheet
• Habr • Bottom sheet: Scrolling and interactions

[github-actions]

size-limit report 📦

Path	Size
JS	366.26 KB (+0.06% 🔺)
JS (gzip)	112.39 KB (+0.05% 🔺)
JS (brotli)	92.75 KB (+0.02% 🔺)
JS import Div (tree shaking)	1.42 KB (0%)
CSS	273.95 KB (+0.03% 🔺)
CSS (gzip)	35.62 KB (+0.05% 🔺)
CSS (brotli)	28.87 KB (+0.08% 🔺)

[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.

[github-actions]

e2e tests

⚠️ Some screenshots were failed. See Playwright Report.

Playwright Report

[github-actions]

👀 Docs deployed

• ✅ Styleguide
• ✅ Storybook

Commit 7d03282

[codecov]

Codecov Report

Attention: Patch coverage is 2.54545% with 268 lines in your changes are missing coverage. Please review.

Project coverage is 80.31%. Comparing base (7685144) to head (50e2aac).
Report is 2 commits behind head on master.

❗ Current head 50e2aac differs from pull request most recent head 6685334. Consider uploading reports for the commit 6685334 to get more accurate results

Files	Patch %	Lines
.../vkui/src/lib/bottomSheet/BottomSheetController.ts	0.00%	80 Missing ⚠️
...es/vkui/src/components/ModalPageV2/ModalPageV2.tsx	0.00%	48 Missing ⚠️
...rc/lib/bottomSheet/UIScrollableChildrenObserver.ts	0.00%	44 Missing ⚠️
...vkui/src/lib/bottomSheet/UIPanGestureRecognizer.ts	0.00%	38 Missing ⚠️
.../vkui/src/components/ModalPageV2/ModalPageRoot.tsx	0.00%	24 Missing ⚠️
packages/vkui/src/lib/dom.tsx	18.75%	13 Missing ⚠️
...kui/src/lib/jsAnimation/rubberbandIfOutOfBounds.ts	0.00%	12 Missing ⚠️
...src/components/ModalPageFooter/ModalPageFooter.tsx	0.00%	5 Missing ⚠️
...c/components/ModalPageContent/ModalPageContent.tsx	0.00%	2 Missing ⚠️
packages/vkui/src/lib/adaptivity/functions.ts	50.00%	2 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##           master    #6759      +/-   ##
==========================================
- Coverage   83.31%   80.31%   -3.00%     
==========================================
  Files         350      344       -6     
  Lines       10442    10634     +192     
  Branches     3464     3536      +72     
==========================================
- Hits         8700     8541     -159     
- Misses       1742     2093     +351     

Flag	Coverage Δ
unittests	80.31% <2.54%> (-3.00%)	⬇️

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.