Create new Popover component

[acelaya]

Depends on #1789

Extract the popover element and the logic to dynamically position it from Select and into its own Popover module.

This will allow us to use this component in other contexts.

Considerations

The popover currently requires an anchor element to be provided, and calculates its position and size based on that.

For now, I decided to keep some decisions made, like the fact that the popover appears below the anchor element unless there's not enough space, in which case it appears above it.

It also matches the anchor element's size, unless it can't fit its content, in which case it grows.

It should be possible to customize both of those (define initial position, determine how to calculate size, etc.), but I'm not going to change that as part of this PR.

We may also need to support a different way to determine the anchor, like providing a rectangle rather than an anchor element.

Out of scope

1. I have finally decided not to add a documentation page for Popover in this PR, as it has enough changes already.
   Separately, I will add a documentation page explaining the component, how it works and behaves by default, and including some examples.
   EDIT: Addressed in Add documentation page for Popover component #1793
2. I will also make the Popover render its children only when it's open, making the behavior transparent for the Select and consistent anywhere where the Popover is used.
   EDIT: This is addressed in Do not render Popover children while closed #1792

Testing steps

Sanity check that all examples in http://localhost:4001/input-select keep working as expected

TODO

• Add tests for popover
• Remove some tests from Select, if they overlap with Popover tests

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 100.00%. Comparing base (08dc645) to head (8e767d5).
Report is 1 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff            @@
##              main     #1791   +/-   ##
=========================================
  Coverage   100.00%   100.00%           
=========================================
  Files           67        68    +1     
  Lines         1203      1220   +17     
  Branches       455       465   +10     
=========================================
+ Hits          1203      1220   +17     

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

[acelaya]

This change is not related with the extraction of Popover specifically (this would have been anchorElementRef={buttonRef}), but I realized the border is set in the container, not the button, which makes popover positioning and sizing calculation fail if it's done relative to the button.

It is easier to see the issue with a thicker border.

Using the button as the anchor element:

Using the wrapper as the anchor element:

[acelaya]

The popover should not render its children when it's closed, but a bunch of Select tests break if that behavior is changed.

I will tackle that separately, checking what's the best way to fix the Select tests. Perhaps mocking the Popover component in that case is the right approach, now that the Popover has its own test.

For now, this condition allows to test it as if it was already behaving like that.

[acelaya]

Turnso out fixing those tests was easy https://github.com/hypothesis/frontend-shared/pull/1792/files#r1853917255

[acelaya]

"Panel" variant adds the style used by Select, but it's likely the one we'll use for at-mentions as well.

It has:

• White background
• Box shadow
• Border
• Rounded corners
• Padding

The "custom" variant will simply leave it unstyled, and we could add other variants in future, like a "tooltip" one which sets black transparent background, smaller padding, etc.

[acelaya]

All test cases that have been removed from here are now part of Popover-test.js (with a few variables renamed and titles changed to reference "popover" instead of "listbox").

However, I left a couple of overlapping tests that have helped catch regressions in the past, like the test that checks focus returns to the toggle button when the listbox is closed.

[robertknight]

LGTM. Just a few minor questions to clarify comments.