feat(Popover): add anchorRef prop

[EldarMuhamethanov]

• close [Feature][Popover]: Возможность установки своего ref извне #6891

---

• Документация фичи

Описание

Нужно добавить пропс для компонента Popover с помощью которого можно указать элемент, относительно которого будет позиционироваться поповер

Изменения

Добавил пропс anchorRef в компонент Popover. При передаче его, поповер будет позиционироваться относительно указанного элемента

[github-actions]

size-limit report 📦

Path	Size
JS	381.86 KB (+0.31% 🔺)
JS (gzip)	115.6 KB (+0.29% 🔺)
JS (brotli)	94.91 KB (+0.34% 🔺)
JS import Div (tree shaking)	1.45 KB (0%)
CSS	309.06 KB (0%)
CSS (gzip)	39.64 KB (0%)
CSS (brotli)	31.86 KB (0%)

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

[codecov]

Codecov Report

Attention: Patch coverage is 91.66667% with 5 lines in your changes missing coverage. Please review.

Project coverage is 95.15%. Comparing base (7a9018e) to head (cfcbff4).
Report is 84 commits behind head on master.

Files with missing lines	Patch %	Lines
.../vkui/src/components/Popover/PopoverWithAnchor.tsx	90.90%	4 Missing ⚠️
packages/vkui/src/components/Popover/Popover.tsx	85.71%	1 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##           master    #7113      +/-   ##
==========================================
- Coverage   95.17%   95.15%   -0.02%     
==========================================
  Files         384      386       +2     
  Lines       11212    11269      +57     
  Branches     3674     3697      +23     
==========================================
+ Hits        10671    10723      +52     
- Misses        541      546       +5     

Flag	Coverage Δ
unittests	95.15% <91.66%> (-0.02%)	⬇️

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.

[inomdzhon]

давай добавим на этот кейс тест

[EldarMuhamethanov]

Мне кажется данный кейс сложно протестить, из-за того, что позиционирование происходит с помощью библиотеки. Или может есть способ проще?

[inomdzhon]

Нужно будет в тесте:

1. использовать проп anchorRef и defaultShown={false};
2. тыкнуть на элемент, на котором anchorRef;
3. проверить, что Popover открылся

[EldarMuhamethanov]

Либо ты, любо я неправильно поняли задачу. anchorRef это элемент относительно которого будет позиционироваться поповер. При этом открываться поповер будет при клике на children как раньше. По крайней мере я так понял задачу

[inomdzhon]

Аааа интерестинг, я действительно понял так, что anchotRef заменяет целевой элемент из children

@MrZillaGold подскажи плиз по поведению anchotRef – он должен на себя перенять события или должен быть чисто как элемент, рядом с которым будет отрисовываться Popover?

[MrZillaGold]

Привет! Должен перенимать события тоже, потому что при передаче anchorRef, children передаваться не будет, следовательно на что-то реагировать при клике нужно

[EldarMuhamethanov]

Понял, значит я не так понял)

[EldarMuhamethanov]

Разбил компонент Popover на два: PopoverWithChildren, PopoverWithAnchor. Один для отображения с children, другой для отображения с anchorRef. Добавил необходимые подписки и установки aria атрибутов в кейс с использованием anchorRef.