chore: update headlessui (#212)

package.json

@@ -24,7 +24,7 @@
         "prepare": "husky"
     },
     "dependencies": {
-        "@headlessui/react": "^1.7.18",
+        "@headlessui/react": "^2.0.3",
         "@hello-pangea/dnd": "^16.5.0",
         "@unocss/vite": "^0.58.6",
         "@vitejs/plugin-react": "^4.2.1",

src/views/components/common/Dialog.tsx

@@ -1,5 +1,12 @@
 import type { TransitionRootProps } from '@headlessui/react';
-import { Dialog as HDialog, Transition } from '@headlessui/react';
+import {
+    Description,
+    Dialog as HDialog,
+    DialogPanel,
+    DialogTitle,
+    Transition,
+    TransitionChild,
+} from '@headlessui/react';
 import clsx from 'clsx';
 import type { PropsWithChildren } from 'react';
 import React, { Fragment } from 'react';
@@ -10,7 +17,6 @@ export interface _DialogProps {
     className?: string;
     title?: JSX.Element;
     description?: JSX.Element;
-    initialFocusHidden?: boolean;
 }
 
 /**
@@ -22,17 +28,12 @@ export type DialogProps = _DialogProps & Omit<TransitionRootProps<typeof HDialog
  * A reusable popup component that can be used to display content on the page
  */
 export default function Dialog(props: PropsWithChildren<DialogProps>): JSX.Element {
-    const { children, className, open, initialFocusHidden, ...rest } = props;
+    const { children, className, open, ...rest } = props;
-    const initialFocusHiddenRef = React.useRef<HTMLDivElement>(null);
-
-    if (initialFocusHidden) {
-        rest.initialFocus = initialFocusHiddenRef;
-    }
 
     return (
         <Transition show={open} as={HDialog} {...rest}>
             <ExtensionRoot>
-                <Transition.Child
+                <TransitionChild
                     as={Fragment}
                     enter='transition duration-300 motion-reduce:duration-150 ease-out'
                     enterFrom='opacity-0'
@@ -42,8 +43,8 @@ export default function Dialog(props: PropsWithChildren<DialogProps>): JSX.Eleme
                     leaveTo='opacity-0'
                 >
                     <div className={clsx('fixed inset-0 z-50 bg-slate-700/35')} />
-                </Transition.Child>
+                </TransitionChild>
-                <Transition.Child
+                <TransitionChild
                     as={Fragment}
                     enter='transition duration-375 motion-reduce:duration-0 ease-[cubic-bezier(0.05,0.4,0.2,1)]'
                     enterFrom='transform-gpu scale-95 opacity-0'
@@ -53,21 +54,18 @@ export default function Dialog(props: PropsWithChildren<DialogProps>): JSX.Eleme
                     leaveTo='transform-gpu scale-95 opacity-0'
                 >
                     <div className='fixed inset-0 z-50 flex items-center justify-center'>
-                        <HDialog.Panel
+                        <DialogPanel
                             className={clsx(
                                 'z-99 max-h-[90vh] flex flex-col overflow-y-auto border border-solid border-ut-offwhite rounded bg-white shadow-xl ml-[calc(100vw-100%)] mt-[calc(100vw-100%)]',
                                 className
                             )}
                         >
-                            {initialFocusHidden && <div className='hidden' ref={initialFocusHiddenRef} />}
+                            {props.title && <DialogTitle as={Fragment}>{props.title}</DialogTitle>}
-                            {props.title && <HDialog.Title as={Fragment}>{props.title}</HDialog.Title>}
+                            {props.description && <Description as={Fragment}>{props.description}</Description>}
-                            {props.description && (
-                                <HDialog.Description as={Fragment}>{props.description}</HDialog.Description>
-                            )}
                             {children}
-                        </HDialog.Panel>
+                        </DialogPanel>
                     </div>
-                </Transition.Child>
+                </TransitionChild>
             </ExtensionRoot>
         </Transition>
     );

src/views/components/common/DialogProvider/DialogProvider.tsx

@@ -91,7 +91,6 @@ export default function DialogProvider(props: { children: ReactNode }): JSX.Elem
                 description={infoUnwrapped.description}
                 appear
                 show={show}
-                initialFocusHidden={infoUnwrapped.initialFocusHidden}
                 className={infoUnwrapped.className}
             >
                 <div className='mt-0.75 w-full flex justify-end gap-2.5'>{buttons}</div>

src/views/components/common/Prompt.tsx

@@ -1,4 +1,4 @@
-import { Dialog, Transition } from '@headlessui/react';
+import { Dialog, Transition, TransitionChild } from '@headlessui/react';
 import type { ReactElement } from 'react';
 import React from 'react';
 
@@ -28,7 +28,7 @@ function PromptDialog({ isOpen, onClose, title, content, children }: PromptDialo
     return (
         <Transition appear show={isOpen} as={React.Fragment}>
             <Dialog as='div' onClose={onClose} className='relative z-50'>
-                <Transition.Child
+                <TransitionChild
                     as={React.Fragment}
                     enter='ease-out duration-200'
                     enterFrom='opacity-0'
@@ -38,9 +38,9 @@ function PromptDialog({ isOpen, onClose, title, content, children }: PromptDialo
                     leaveTo='opacity-0'
                 >
                     <div className='fixed inset-0 bg-black bg-opacity-50' aria-hidden='true' />
-                </Transition.Child>
+                </TransitionChild>
 
-                <Transition.Child
+                <TransitionChild
                     as={React.Fragment}
                     enter='ease-out duration-200'
                     enterFrom='opacity-0 scale-95'
@@ -56,7 +56,7 @@ function PromptDialog({ isOpen, onClose, title, content, children }: PromptDialo
                             <div className='flex items-center justify-end gap-2'>{children}</div>
                         </Dialog.Panel>
                     </div>
-                </Transition.Child>
+                </TransitionChild>
             </Dialog>
         </Transition>
     );

src/views/components/common/ScheduleDropdown.tsx

@@ -1,4 +1,4 @@
-import { Disclosure, Transition } from '@headlessui/react';
+import { Disclosure, DisclosureButton, DisclosurePanel, Transition } from '@headlessui/react';
 import Text from '@views/components/common/Text/Text';
 import useSchedules from '@views/hooks/useSchedules';
 import React from 'react';
@@ -25,7 +25,7 @@ export default function ScheduleDropdown(props: ScheduleDropdownProps) {
             <Disclosure defaultOpen={props.defaultOpen}>
                 {({ open }) => (
                     <>
-                        <Disclosure.Button className='w-full flex items-center border-none bg-transparent px-3.5 py-2.5 text-left'>
+                        <DisclosureButton className='w-full flex items-center border-none bg-transparent px-3.5 py-2.5 text-left'>
                             <div className='flex-1'>
                                 <Text as='div' variant='h4' className='mb-1 w-100% text-ut-burntorange'>
                                     {(activeSchedule ? activeSchedule.name : 'Schedule').toUpperCase()}:
@@ -42,9 +42,10 @@ export default function ScheduleDropdown(props: ScheduleDropdownProps) {
                             <Text className='text-ut-burntorange text-2xl! font-normal!'>
                                 {open ? <DropdownArrowDown /> : <DropdownArrowUp />}
                             </Text>
-                        </Disclosure.Button>
+                        </DisclosureButton>
 
                         <Transition
+                            as='div'
                             className='contain-paint max-h-55 origin-top overflow-auto transition-all duration-400 ease-in-out-expo'
                             enterFrom='transform scale-98 opacity-0 max-h-0!'
                             enterTo='transform scale-100 opacity-100 max-h-55'
@@ -52,7 +53,7 @@ export default function ScheduleDropdown(props: ScheduleDropdownProps) {
                             leaveFrom='transform scale-100 opacity-100 max-h-55'
                             leaveTo='transform scale-98 opacity-0 max-h-0!'
                         >
-                            <Disclosure.Panel className='px-3.5 pb-2.5 pt-2'>{props.children}</Disclosure.Panel>
+                            <DisclosurePanel className='px-3.5 pb-2.5 pt-2'>{props.children}</DisclosurePanel>
                         </Transition>
                     </>
                 )}

src/views/contexts/DialogContext.ts

@@ -13,7 +13,6 @@ export interface DialogInfo {
     description?: JSX.Element;
     className?: string;
     buttons?: JSX.Element | CloseWrapper<JSX.Element>;
-    initialFocusHidden?: boolean;
     onClose?: () => void;
 }
 

unocss.config.ts

@@ -10,7 +10,7 @@ export default defineConfig({
     rules: [
         [
             'btn-transition',
-            { transition: 'color 180ms, border-color 150ms, background-color 150ms, box-shadow 0ms, transform 50ms' },
+            { transition: 'color 180ms, border-color 150ms, background-color 150ms, box-shadow 50ms, transform 50ms' },
         ],
         [
             'ring-offset-0',