Skip to content

Update Popover to use Floating UI instead of Popper.js#1229

Merged
diegohaz merged 11 commits intomainfrom
floating-ui
Apr 15, 2022
Merged

Update Popover to use Floating UI instead of Popper.js#1229
diegohaz merged 11 commits intomainfrom
floating-ui

Conversation

@diegohaz
Copy link
Copy Markdown
Member

@diegohaz diegohaz commented Apr 14, 2022 •
edited
Loading

Closes #931

This PR replaces @popperjs/core with @floating-ui/dom and updates the usePopoverState hook to use the latter instead.

With this change, I took the opportunity to improve the API and add/modify some features. Here's a list of them:

  • Fixed a bug where quickly hovering over nested Hovercard components right after they were mounted would cause the parent and the nested Hovercard to hide.

  • Added fitViewport prop to usePopoverState and derived state hooks.

  • The preventOverflow prop has been renamed to slide on usePopoverState and derived state hooks.

  • Dropped support for auto, auto-start and auto-end placements on usePopoverState and derived state hooks.

  • The shift and gutter props on usePopoverState and derived state hooks don't support string values anymore. Now only numbers are supported.

  • Added overlap prop to usePopoverState and derived state hooks.

  • The padding prop has been renamed to overflowPadding on usePopoverState and derived state hooks.

@changeset-bot
Copy link
Copy Markdown

changeset-bot bot commented Apr 14, 2022 •
edited
Loading

🦋 Changeset detected

Latest commit: 76537f1

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 2 packages
Name Type
ariakit Major
ariakit-playground Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@vercel
Copy link
Copy Markdown

vercel bot commented Apr 14, 2022 •
edited
Loading

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployments, click below or on the icon next to each commit.

ariakit – ./

🔍 Inspect: https://vercel.com/ariakit/ariakit/3UU5N7rjh5vv7tcyCRAhmHfTBegP
✅ Preview: https://ariakit-git-floating-ui-ariakit.vercel.app

reakit – ./

🔍 Inspect: https://vercel.com/ariakit/reakit/6wqsxGfg6zyu75mY8pvuRoB8wsoF
✅ Preview: Ignored

[Deployment for 76537f1 canceled]

@codesandbox-ci
Copy link
Copy Markdown

codesandbox-ci bot commented Apr 14, 2022 •
edited
Loading

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 76537f1:

Sandbox Source
Ariakit Configuration

diegohaz
diegohaz commented Apr 14, 2022
View reviewed changes
diegohaz
diegohaz commented Apr 14, 2022
View reviewed changes
@codecov
Copy link
Copy Markdown

codecov bot commented Apr 14, 2022 •
edited
Loading

Codecov Report

Merging #1229 (76537f1) into main (c907542) will increase coverage by 0.12%.
The diff coverage is 100.00%.

@@            Coverage Diff             @@
##             main    #1229      +/-   ##
==========================================
+ Coverage   82.38%   82.51%   +0.12%     
==========================================
  Files         230      230              
  Lines        5723     5724       +1     
  Branches     1592     1591       -1     
==========================================
+ Hits         4715     4723       +8     
+ Misses       1004      998       -6     
+ Partials        4        3       -1
Impacted Files Coverage Δ
...es/ariakit/src/menu/__examples__/menu-bar/menu.tsx 100.00% <ø> (ø)
packages/ariakit/src/menu/menu-button.ts 100.00% <ø> (ø)
packages/ariakit/src/menu/menu-list.ts 81.81% <ø> (ø)
packages/ariakit/src/popover/popover-arrow.tsx 100.00% <ø> (ø)
...s/ariakit/src/popover/popover-disclosure-arrow.tsx 84.61% <ø> (ø)
packages/ariakit/src/popover/popover.tsx 100.00% <ø> (ø)
packages/ariakit/src/select/select.tsx 92.00% <ø> (ø)
packages/ariakit/src/hovercard/hovercard.tsx 94.07% <100.00%> (ø)
packages/ariakit/src/popover/popover-state.ts 97.75% <100.00%> (+4.33%) ⬆️
packages/ariakit/src/tooltip/tooltip.tsx 84.84% <100.00%> (-2.34%) ⬇️
... and 1 more

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update c907542...76537f1. Read the comment docs.

@vercel vercel bot temporarily deployed to Preview – ariakit April 14, 2022 09:20 Inactive
@vercel vercel bot temporarily deployed to Preview – reakit April 14, 2022 09:20 Inactive
@vercel vercel bot temporarily deployed to Preview – reakit April 14, 2022 09:24 Inactive
@vercel vercel bot temporarily deployed to Preview – ariakit April 14, 2022 09:24 Inactive
@vercel vercel bot temporarily deployed to Preview – ariakit April 14, 2022 09:51 Inactive
@vercel vercel bot temporarily deployed to Preview – reakit April 14, 2022 09:51 Inactive
@vercel vercel bot temporarily deployed to Preview – reakit April 14, 2022 09:54 Inactive
@vercel vercel bot temporarily deployed to Preview – ariakit April 14, 2022 09:54 Inactive
atomiks
atomiks reviewed Apr 14, 2022
View reviewed changes
@vercel vercel bot temporarily deployed to Preview – ariakit April 14, 2022 14:02 Inactive
@vercel vercel bot temporarily deployed to Preview – reakit April 14, 2022 14:02 Inactive
@vercel vercel bot temporarily deployed to Preview – reakit April 15, 2022 03:55 Inactive
@vercel vercel bot temporarily deployed to Preview – ariakit April 15, 2022 03:55 Inactive
@vercel vercel bot temporarily deployed to Preview – ariakit April 15, 2022 04:02 Inactive
@vercel vercel bot temporarily deployed to Preview – reakit April 15, 2022 04:02 Inactive
@vercel vercel bot temporarily deployed to Preview – ariakit April 15, 2022 04:06 Inactive
@vercel vercel bot temporarily deployed to Preview – reakit April 15, 2022 04:06 Inactive
@vercel vercel bot temporarily deployed to Preview – reakit April 15, 2022 05:45 Inactive
@vercel vercel bot temporarily deployed to Preview – ariakit April 15, 2022 05:45 Inactive
@vercel vercel bot temporarily deployed to Preview – reakit April 15, 2022 10:42 Inactive
@vercel vercel bot temporarily deployed to Preview – ariakit April 15, 2022 10:42 Inactive
@diegohaz diegohaz merged commit 2258724 into main Apr 15, 2022
@diegohaz diegohaz deleted the floating-ui branch April 15, 2022 10:49
@github-actions github-actions bot mentioned this pull request Apr 15, 2022
Merged
@diegohaz diegohaz mentioned this pull request May 6, 2022
Merged
6 tasks
natanelia pushed a commit to natanelia/ariakit that referenced this pull request May 30, 2022
@diegohaz @natanelia
Update Popover to use Floating UI instead of Popper.js (ariakit#1229)
d834d61
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

1 more reviewer

@atomiks atomiks atomiks left review comments

Reviewers whose approvals may not affect merge requirements

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

Tooltip doesn't recalculate placement on inner text change

2 participants

@diegohaz @atomiks