Bump headlessui to 2.0 (#2230)

david-crespo · web-flow · commit 39b4491edd19 · 2024-05-21T19:02:45.000-05:00
* bump headless to 2.0 and update DocsPopover

* I think I fixed Listbox

* fix instance create e2e

* give up, use modal=false on ListboxOptions
diff --git a/app/components/DocsPopover.tsx b/app/components/DocsPopover.tsx
@@ -6,8 +6,7 @@
  * Copyright Oxide Computer Company
  */
 
-import { autoUpdate, offset, useFloating } from '@floating-ui/react'
-import { Popover } from '@headlessui/react'
+import { Popover, PopoverButton, PopoverPanel } from '@headlessui/react'
 import cn from 'classnames'
 
 import { OpenLink12Icon, Question12Icon } from '@oxide/design-system/icons/react'
@@ -43,27 +42,15 @@ type DocsPopoverProps = {
 }
 
 export const DocsPopover = ({ heading, icon, summary, links }: DocsPopoverProps) => {
-  const { refs, floatingStyles } = useFloating({
-    placement: 'bottom-end',
-    middleware: [offset(12)],
-    whileElementsMounted: autoUpdate,
-    // Needs to be off because it breaks the enter animation
-    // https://floating-ui.com/docs/usefloating#transform
-    transform: false,
-  })
   return (
     <Popover>
-      <Popover.Button
-        ref={refs.setReference}
-        className={cn(buttonStyle({ size: 'sm', variant: 'ghost' }), 'w-9')}
-      >
+      <PopoverButton className={cn(buttonStyle({ size: 'sm', variant: 'ghost' }), 'w-9')}>
         <Question12Icon aria-label="Links to docs" className="shrink-0" />
-      </Popover.Button>
-      <Popover.Panel
+      </PopoverButton>
+      <PopoverPanel
         // DocsPopoverPanel needed for enter animation
         className="DocsPopoverPanel z-10 w-96 rounded-lg border bg-raise border-secondary elevation-1"
-        ref={refs.setFloating}
-        style={floatingStyles}
+        anchor={{ to: 'bottom end', gap: 12 }}
       >
         <div className="px-4">
           <h2 className="mt-4 flex items-center gap-1 text-sans-md">
@@ -78,7 +65,7 @@ export const DocsPopover = ({ heading, icon, summary, links }: DocsPopoverProps)
             <DocsPopoverLink key={link.href} {...link} />
           ))}
         </div>
-      </Popover.Panel>
+      </PopoverPanel>
     </Popover>
   )
 }
diff --git a/app/ui/lib/Listbox.tsx b/app/ui/lib/Listbox.tsx
@@ -6,14 +6,12 @@
  * Copyright Oxide Computer Company
  */
 import {
-  autoUpdate,
-  flip,
-  FloatingPortal,
-  offset,
-  size,
-  useFloating,
-} from '@floating-ui/react'
-import { Listbox as Select } from '@headlessui/react'
+  Listbox as HListbox,
+  Label,
+  ListboxButton,
+  ListboxOption,
+  ListboxOptions,
+} from '@headlessui/react'
 import cn from 'classnames'
 import type { ReactNode } from 'react'
 
@@ -61,29 +59,14 @@ export const Listbox = <Value extends string = string>({
   isLoading = false,
   ...props
 }: ListboxProps<Value>) => {
-  const { refs, floatingStyles } = useFloating({
-    middleware: [
-      offset(12),
-      flip(),
-      size({
-        apply({ rects, elements }) {
-          Object.assign(elements.floating.style, {
-            width: `${rects.reference.width}px`,
-          })
-        },
-      }),
-    ],
-    whileElementsMounted: autoUpdate,
-  })
-
   const selectedItem = selected && items.find((i) => i.value === selected)
   const noItems = !isLoading && items.length === 0
   const isDisabled = disabled || noItems
   const zIndex = usePopoverZIndex()
 
   return (
     <div className={cn('relative', className)}>
-      <Select
+      <HListbox
         value={selected}
         // you shouldn't ever be able to select null, but we check here anyway
         // to make TS happy so the calling code doesn't have to. note `val !==
@@ -96,14 +79,13 @@ export const Listbox = <Value extends string = string>({
             {label && (
               <div className="mb-2">
                 <FieldLabel id={``} as="div" tip={tooltipText} optional={!required}>
-                  <Select.Label>{label}</Select.Label>
+                  <Label>{label}</Label>
                 </FieldLabel>
                 {description && <TextInputHint id={``}>{description}</TextInputHint>}
               </div>
             )}
-            <Select.Button
+            <ListboxButton
               name={name}
-              ref={refs.setReference}
               className={cn(
                 `flex h-10 w-full items-center justify-between
                     rounded border text-sans-md`,
@@ -136,37 +118,44 @@ export const Listbox = <Value extends string = string>({
               >
                 <SelectArrows6Icon title="Select" className="w-2 text-tertiary" />
               </div>
-            </Select.Button>
-            <FloatingPortal>
-              <Select.Options
-                ref={refs.setFloating}
-                style={floatingStyles}
-                className={`ox-menu pointer-events-auto ${zIndex} overflow-y-auto !outline-none`}
-              >
-                {items.map((item) => (
-                  <Select.Option
-                    key={item.value}
-                    value={item.value}
-                    className="relative border-b border-secondary last:border-0"
-                  >
-                    {({ active, selected }) => (
-                      <div
-                        className={cn(
-                          'ox-menu-item text-secondary',
-                          selected && 'is-selected',
-                          active && 'is-highlighted'
-                        )}
-                      >
-                        {item.label}
-                      </div>
-                    )}
-                  </Select.Option>
-                ))}
-              </Select.Options>
-            </FloatingPortal>
+            </ListboxButton>
+            <ListboxOptions
+              anchor={{ gap: 12 }}
+              className={`ox-menu pointer-events-auto ${zIndex} w-[var(--button-width)] overflow-y-auto !outline-none`}
+              // This is to prevent the `useOthersInert` call in ListboxOptions.
+              // Without this, when the listbox options box scrolls under the
+              // top bar (for example) you can click through the top bar to the
+              // options because the topbar (and all other elements) has been
+              // marked "inert", which means it does not catch mouse events.
+              // This would not be necessary if useScrollLock in ListboxOptions
+              // worked, but we suspect it doesn't work because the page as a
+              // whole is not the scroll container.
+              modal={false}
+            >
+              {items.map((item) => (
+                <ListboxOption
+                  key={item.value}
+                  value={item.value}
+                  className="relative border-b border-secondary last:border-0"
+                >
+                  {({ active, selected }) => (
+                    // TODO: redo active styling with `data-active` somehow
+                    <div
+                      className={cn(
+                        'ox-menu-item text-secondary',
+                        selected && 'is-selected',
+                        active && 'is-highlighted'
+                      )}
+                    >
+                      {item.label}
+                    </div>
+                  )}
+                </ListboxOption>
+              ))}
+            </ListboxOptions>
           </>
         )}
-      </Select>
+      </HListbox>
     </div>
   )
 }
diff --git a/app/ui/styles/components/menu-list.css b/app/ui/styles/components/menu-list.css
@@ -7,7 +7,7 @@
  */
 
 .ox-menu {
-  @apply max-h-[17.5rem] overflow-y-auto rounded border bg-raise border-secondary elevation-2;
+  @apply !max-h-[17.5rem] overflow-y-auto rounded border bg-raise border-secondary elevation-2;
 }
 
 .ox-menu-item {
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -34,7 +34,7 @@
   "private": true,
   "dependencies": {
     "@floating-ui/react": "^0.26.13",
-    "@headlessui/react": "^1.7.18",
+    "@headlessui/react": "^2.0.3",
     "@oxide/design-system": "^1.4.6",
     "@radix-ui/react-accordion": "^1.1.2",
     "@radix-ui/react-dialog": "^1.0.5",
diff --git a/test/e2e/instance-create.e2e.ts b/test/e2e/instance-create.e2e.ts
@@ -62,6 +62,7 @@ test('can create an instance', async ({ page }) => {
   await expect(assignEphemeralIpCheckbox).toBeChecked()
   await assignEphemeralIpButton.click()
   await expect(page.getByRole('option', { name: 'ip-pool-1' })).toBeEnabled()
+  await assignEphemeralIpButton.click() // click closes the listbox so we can do more stuff
 
   // unchecking the box should disable the selector
   await assignEphemeralIpCheckbox.uncheck()

Original file line number	Diff line number	Diff line change
`@@ -7,7 +7,7 @@`
`7`	`7`	`*/`
`8`	`8`
`9`	`9`	`.ox-menu {`
`10`		`- @apply max-h-[17.5rem] overflow-y-auto rounded border bg-raise border-secondary elevation-2;`
	`10`	`+ @apply !max-h-[17.5rem] overflow-y-auto rounded border bg-raise border-secondary elevation-2;`
`11`	`11`	`}`
`12`	`12`
`13`	`13`	`.ox-menu-item {`