fix(useFloatingWithInteractions): improve restoreFocus, add restoreFocus to anchor element

[EldarMuhamethanov]

• close [Bug]: Восстановление фокуса после закрытия Popover по 'hover' #7732

---

• Unit-тесты
• Release notes

Описание

Нужно добавить возможность настройки элемента, куда будет возвращаться фокус после закрытия поповера по ховеру.

Изменения

В Popover и Tooltip расширил тип свойства restoreFocus. Теперь помимо boolean он может принимать следующие значения:

• true - означает, что фокус будет возвращен на последний активный до открытия всплывающего окна элемент. По сути это поведение по умолчанию
• 'anchor-element' - означает, что фокус будет возвращен на якорный элемент
• HTMLElement - можно использовать ссылку на определенный html элемент

Также изменения затронули компонент FocusTrap:

• Теперь в свойство restoreFocus можно прокинуть, помимо функции, возвращающей boolean, функцию, возвращающую HTMLElement(() => boolean | HTMLElement).

Теперь, чтобы поправить баг описанный в задаче необходимо для Popover с trigger="hover" прокинуть restoreFocus="anchor-element"

Release notes

Улучшения

• Popover: расширен тип свойства restoreFocus до boolean | 'anchor-element' | HTMLElement для указания на какой элемент будет возвращен фокус после закрытия Popover. Полезно для кейса с Popover с trigger="hover", при установке restoreFocus="anchor-element" фокус всегда будет возвращаться в якорный элемент

[github-actions]

size-limit report 📦

Path	Size
JS	385.42 KB (+0.07% 🔺)
JS (gzip)	123.21 KB (+0.09% 🔺)
JS (brotli)	102.08 KB (+0.07% 🔺)
JS import Div (tree shaking)	1.47 KB (0%)
CSS	342.28 KB (0%)
CSS (gzip)	49.35 KB (0%)
CSS (brotli)	40 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

Playwright Report

[github-actions]

👀 Docs deployed

• ✅ Styleguide
• ✅ Storybook

Commit c07f29c

[codecov]

Codecov Report

Attention: Patch coverage is 87.23404% with 6 lines in your changes missing coverage. Please review.

Project coverage is 95.30%. Comparing base (ca09fb8) to head (c07f29c).
Report is 5 commits behind head on master.

Files with missing lines	Patch %	Lines
...ingWithInteractions/useFloatingWithInteractions.ts	45.45%	6 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##           master    #7806      +/-   ##
==========================================
- Coverage   95.34%   95.30%   -0.05%     
==========================================
  Files         378      378              
  Lines       11176    11197      +21     
  Branches     3726     3735       +9     
==========================================
+ Hits        10656    10671      +15     
- Misses        520      526       +6     

Flag	Coverage Δ
unittests	95.30% <87.23%> (-0.05%)	⬇️

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.

[andrey-medvedev-vk]

👍

[inomdzhon]

👍

ps: в описании осталась старая инфа про latest-element

[andrey-medvedev-vk]

💅

[vkcom-publisher]

❌ Patch

Не удалось автоматически применить исправление на ветке 7.0-stable.

Дальнейшие действия выполняют контрибьютеры из группы @VKCOM/vkui-core

Чтобы изменение попало в ветку 7.0-stable, выполните следующие действия:

1. Создайте новую ветку от 7.0-stable и примените изменения используя cherry-pick

git stash # опционально
git fetch origin 7.0-stable
git checkout -b patch/pr7806 origin/7.0-stable

git cherry-pick --no-commit 3589018217b211293a953e717379e544b7df44ea
git checkout HEAD **/__image_snapshots__/*.png
git diff --quiet HEAD || git commit --no-verify --no-edit

2. Исправьте конфликты, следуя инструкциям из терминала
3. Отправьте ветку на GitHub и создайте новый PR с веткой 7.0-stable (установка лейбла не требуется!)

git push --set-upstream origin patch/pr7806
gh pr create --base 7.0-stable --title "patch: pr7806" --body "- patch #7806"

[vkcom-publisher]

❌ Patch

Не удалось автоматически применить исправление на ветке v6.

Дальнейшие действия выполняют контрибьютеры из группы @VKCOM/vkui-core

Чтобы изменение попало в ветку v6, выполните следующие действия:

1. Создайте новую ветку от v6 и примените изменения используя cherry-pick

git stash # опционально
git fetch origin v6
git checkout -b patch/pr7806 origin/v6

git cherry-pick --no-commit 3589018217b211293a953e717379e544b7df44ea
git checkout HEAD **/__image_snapshots__/*.png
git diff --quiet HEAD || git commit --no-verify --no-edit

2. Исправьте конфликты, следуя инструкциям из терминала
3. Отправьте ветку на GitHub и создайте новый PR с веткой v6 (установка лейбла не требуется!)

git push --set-upstream origin patch/pr7806
gh pr create --base v6 --title "patch: pr7806" --body "- patch #7806"