Bump headlessui to 2.0

[david-crespo]

• Bump dep
• Fix DocsPopover
• Fix Listbox mostly
• Fix broken e2e tests
• Make sure z-index is still good

https://tailwindcss.com/blog/headless-ui-v2

Cool changes, but it seems like they're bundling in Floating UI in addition to ours, so our bundle got a few % bigger. I think we can eliminate our direct use of it though.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
console	✅ Ready (Inspect)	Visit Preview	May 21, 2024 7:46pm

[david-crespo]

How great is this! Need to make sure autoUpdate still works. Update: it seems to work. The thing moves with the page on scroll.

[david-crespo]

! just to make this stronger than some height the component is applying. But maybe there's a better way.

[david-crespo]

Managed to fix the instance create e2e, but didn't finish z-index. I think they are both caused by the same change in headlessui: if you look at the options for Listbox 2.0, there is a modal option that defaults to true:

modal Boolean
Whether to enable accessibility features like scroll locking, focus trapping, and making other elements inert.

I suspect the listbox in headlessui 1.7 did not do this. We can get that behavior back with modal=false (it does make the z-index test pass!), but I bet leaving it on and accommodating our tests to that is better for accessibility. So it's worth doing a little research into what modal mode does and whether we can still do that (somewhat silly) z-index test with it on.

[charliepark]

Still looking into z-index, but the specific failing assertion is await expectObscured(page.getByRole('option', { name: 'All projects' }))

[david-crespo]

Looks like the modal prop does exactly what it says in the docs: scroll lock and set others inert.

https://github.com/tailwindlabs/headlessui/blob/300e9eb95777210fd43570d31aae7da5b87d381f/packages/%40headlessui-react/src/components/listbox/listbox.tsx#L928-L938

[david-crespo]

If scroll lock works, the test might not make sense anymore, because it’s about what happens when you scroll while the listbox is open. Maybe we can find another way to test that the z indexes are set up right.

[david-crespo]

Ok, well the scroll lock part does not work (which explains why the test is able to scroll the page). I suspect this is because the container we are scrolling is not the whole document but rather the content pane. We've talked about changing this in the past because it's slightly annoying for stuff like this, but it's a slightly invasive change, going from a grid where one pane scrolls to a classic thing where the frame has fixed position and floats on top of the scrolling document and you use padding to make sure everything lines up.

[david-crespo]

After some clicking around, I think listbox looks good but I notice the docs popover has different behavior from main on a tiny window. Not too important but I do like the behavior on main better. Probably something to tweak in the anchor prop.

[charliepark]

I believe the issue with that floating modal is the "flip" middleware, which "will swap the placement of the panel if there is not enough room".

https://github.com/tailwindlabs/headlessui/blob/main/packages/%40headlessui-react/src/internal/floating.tsx#L234-L237

Trying to see what options we have to just always show it in the designated anchor position.

[david-crespo]

Good find. I think if it's much of a pain to change we can just live with it. You really can't put too much pressure on a 200px high window to look right.

[charliepark]

Yeah, I think it might be asking a lot of a window that small.

[david-crespo]

Let’s party.