UXIT-1428 - Headless UI v2 component refactor

src/app/_components/ListboxButton.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 
-import { Listbox } from '@headlessui/react'
+import { ListboxButton as HeadlessListboxButton } from '@headlessui/react'
 
 type ListboxButtonProps = {
   ariaLabel: string
@@ -14,13 +14,13 @@ export function ListboxButton({
   children,
 }: ListboxButtonProps) {
   return (
-    <Listbox.Button
+    <HeadlessListboxButton
       aria-haspopup="listbox"
       aria-expanded={open}
       aria-label={ariaLabel}
-      className="focus:brand-outline inline-flex w-full items-center justify-between gap-2 rounded-lg border border-brand-300 p-3 text-brand-300 hover:border-current hover:text-brand-400 md:min-w-40"
+      className="inline-flex w-full items-center justify-between gap-2 rounded-lg border border-brand-300 p-3 text-brand-300 focus:brand-outline hover:border-current hover:text-brand-400 md:min-w-40"
     >
       {children}
-    </Listbox.Button>
+    </HeadlessListboxButton>
   )
 }

src/app/_components/ListboxOption.tsx

@@ -1,6 +1,6 @@
 import { Fragment } from 'react'
 
-import { Listbox } from '@headlessui/react'
+import { ListboxOption as HeadlessListboxOption } from '@headlessui/react'
 import { Check } from '@phosphor-icons/react'
 import { clsx } from 'clsx'
 
@@ -31,7 +31,7 @@ function OptionContent({ option, counts }: ListboxOptionProps) {
 
 export function ListboxOption({ option, counts }: ListboxOptionProps) {
   return (
-    <Listbox.Option value={option.id} as={Fragment}>
+    <HeadlessListboxOption value={option.id} as={Fragment}>
       {({ active, selected }) => (
         <li
           className={clsx(
@@ -47,6 +47,6 @@ export function ListboxOption({ option, counts }: ListboxOptionProps) {
           )}
         </li>
       )}
-    </Listbox.Option>
+    </HeadlessListboxOption>
   )
 }

src/app/_components/ListboxOptions.tsx

@@ -1,4 +1,4 @@
-import { Listbox } from '@headlessui/react'
+import { ListboxOptions as HeadlessListboxOptions } from '@headlessui/react'
 import { clsx } from 'clsx'
 
 type ListboxOptionsProps = {
@@ -13,14 +13,14 @@ export function ListboxOptions({
   const positionClass = position === 'right' ? 'right-6 md:right-auto' : ''
 
   return (
-    <Listbox.Options
+    <HeadlessListboxOptions
       aria-labelledby="listbox-button"
       className={clsx(
         'absolute z-10 mt-2 overflow-hidden rounded-lg border border-brand-100 bg-brand-800 py-2 text-brand-100 focus:brand-outline focus-within:outline-2',
         positionClass,
       )}
     >
       {children}
-    </Listbox.Options>
+    </HeadlessListboxOptions>
   )
 }

src/app/_components/NavigationPopover.tsx

@@ -2,7 +2,13 @@
 
 import { cloneElement, Fragment } from 'react'
 
-import { Popover, Transition } from '@headlessui/react'
+import {
+  Popover,
+  Transition,
+  PopoverButton,
+  PopoverPanel,
+  PopoverBackdrop,
+} from '@headlessui/react'
 import { CaretDown } from '@phosphor-icons/react'
 
 import { Icon } from '@/components/Icon'
@@ -31,18 +37,18 @@ export function NavigationPopover({
 }: PopOverProps) {
   return (
     <Popover as={as}>
-      <Popover.Button
+      <PopoverButton
         aria-label={`${label} (opens a navigation menu)`}
         className={mainNavItemStyles}
       >
         <span>{label}</span>
         <span className="transition-transform ui-open:rotate-180">
           <Icon component={CaretDown} size={20} color="brand-400" />
         </span>
-      </Popover.Button>
-      <Popover.Overlay className="fixed inset-0 -z-10" />
+      </PopoverButton>
+      <PopoverBackdrop className="fixed inset-0 -z-10" />
       <Transition as={Fragment} {...TransitionProps}>
-        <Popover.Panel className="absolute right-0 z-10 mt-6 xl:-right-6">
+        <PopoverPanel className="absolute right-0 z-10 mt-6 xl:-right-6">
           {(props) => {
             const clonedChildren = cloneElement(children, {
               onClick: function closeOnClickWithin() {
@@ -56,7 +62,7 @@ export function NavigationPopover({
               </div>
             )
           }}
-        </Popover.Panel>
+        </PopoverPanel>
       </Transition>
     </Popover>
   )

src/app/_components/SlideOver.tsx

@@ -1,6 +1,11 @@
 import { Fragment } from 'react'
 
-import { Dialog, Transition } from '@headlessui/react'
+import {
+  Dialog,
+  Transition,
+  TransitionChild,
+  DialogPanel,
+} from '@headlessui/react'
 
 type SlideOverProps = {
   open: boolean
@@ -10,9 +15,9 @@ type SlideOverProps = {
 
 export function SlideOver({ open, setOpen, children }: SlideOverProps) {
   return (
-    <Transition.Root show={open} as={Fragment}>
+    <Transition show={open} as={Fragment}>
       <Dialog className="relative z-10" onClose={setOpen}>
-        <Transition.Child
+        <TransitionChild
           as={Fragment}
           enter="ease-in-out duration-500 sm:duration-700"
           enterFrom="opacity-0"
@@ -22,12 +27,12 @@ export function SlideOver({ open, setOpen, children }: SlideOverProps) {
           leaveTo="opacity-0"
         >
           <div className="fixed inset-0 backdrop-blur-lg" />
-        </Transition.Child>
+        </TransitionChild>
 
         <div className="fixed inset-0 overflow-hidden">
           <div className="absolute inset-0 overflow-hidden">
             <div className="pointer-events-none fixed inset-y-0 right-0 flex w-full max-w-[480px]">
-              <Transition.Child
+              <TransitionChild
                 as={Fragment}
                 enter="transform transition ease-in-out duration-500 sm:duration-700"
                 enterFrom="translate-x-full"
@@ -36,16 +41,16 @@ export function SlideOver({ open, setOpen, children }: SlideOverProps) {
                 leaveFrom="translate-x-0"
                 leaveTo="translate-x-full"
               >
-                <Dialog.Panel className="pointer-events-auto w-full">
+                <DialogPanel className="pointer-events-auto w-full">
                   <div className="flex h-full flex-col overflow-y-scroll bg-brand-800">
                     {children}
                   </div>
-                </Dialog.Panel>
-              </Transition.Child>
+                </DialogPanel>
+              </TransitionChild>
             </div>
           </div>
         </div>
       </Dialog>
-    </Transition.Root>
+    </Transition>
   )
 }