Merge pull request #134 from ubie-oss/upgrade-headlessui

Upgrade headless-ui to v2
ubie-oss · Sep 20, 2024 · 6516d11 · 6516d11
2 parents 3a4d584 + e496f4f
commit 6516d11
Show file tree

Hide file tree

Showing 6 changed files with 207 additions and 48 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -57,7 +57,7 @@
   "devDependencies": {
     "@axe-core/playwright": "^4.10.0",
     "@chromatic-com/storybook": "^2.0.2",
-    "@headlessui/react": "^1.7.10",
+    "@headlessui/react": "^2.1.8",
     "@markuplint/jsx-parser": "^4.7.6",
     "@markuplint/react-spec": "^4.5.6",
     "@playwright/experimental-ct-react": "^1.47.1",
@@ -107,11 +107,11 @@
     "vitest": "^2.1.1"
   },
   "peerDependencies": {
-    "@headlessui/react": ">1.7.0 <2.0.0",
+    "@headlessui/react": "^2.0.0",
     "@ubie/design-tokens": ">=0.2.0",
     "@ubie/ubie-icons": ">=0.5.0 <0.6.2 || >=0.8.0",
     "react": "^17 || ^18",
-    "react-dom": "^17 || ^18"
+    "react-dom": "^18"
   },
   "author": "Ubie, Inc.",
   "license": "Apache-2.0",

diff --git a/src/components/ActionHalfModal/ActionHalfModal.tsx b/src/components/ActionHalfModal/ActionHalfModal.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { Dialog, Transition } from '@headlessui/react';
+import { Dialog, DialogPanel, Transition, TransitionChild } from '@headlessui/react';
 import { clsx } from 'clsx';
 import { type FC, Fragment, type ReactNode, useCallback, useRef } from 'react';
 import styles from './ActionHalfModal.module.css';
@@ -155,7 +155,7 @@ export const ActionHalfModal: FC<Props> = ({
         initialFocus={initialFocusRef}
         {...props}
       >
-        <Transition.Child
+        <TransitionChild
           as={Fragment}
           enter={styles.overlayEnter}
           enterFrom={styles.overlayEnterFrom}
@@ -164,9 +164,9 @@ export const ActionHalfModal: FC<Props> = ({
           leaveFrom={styles.overlayLeaveFrom}
           leaveTo={styles.overlayLeaveTo}
         >
-          <Dialog.Overlay className={clsx(styles.overlay, styles[opacityClassName])} />
-        </Transition.Child>
-        <Transition.Child
+          <div className={clsx(styles.overlay, styles[opacityClassName])} />
+        </TransitionChild>
+        <TransitionChild
           as={Fragment}
           enter={styles.panelEnter}
           enterFrom={styles.panelEnterFrom}
@@ -175,7 +175,7 @@ export const ActionHalfModal: FC<Props> = ({
           leaveFrom={styles.panelLeaveFrom}
           leaveTo={styles.panelLeaveTo}
         >
-          <div
+          <DialogPanel
             className={clsx(styles.dialog, {
               [styles.fullscreen]: fullscreen,
             })}
@@ -243,8 +243,8 @@ export const ActionHalfModal: FC<Props> = ({
                 </div>
               </div>
             </div>
-          </div>
-        </Transition.Child>
+          </DialogPanel>
+        </TransitionChild>
       </Dialog>
     </Transition>
   );

diff --git a/src/components/ActionModal/ActionModal.tsx b/src/components/ActionModal/ActionModal.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { Dialog, Transition } from '@headlessui/react';
+import { Dialog, DialogPanel, DialogTitle, Transition } from '@headlessui/react';
 import clsx from 'clsx';
 import { type FC, Fragment, type ReactNode, useCallback, useRef } from 'react';
 import styles from './ActionModal.module.css';
@@ -162,8 +162,8 @@ export const ActionModal: FC<Props> = ({
         initialFocus={initialFocusRef}
         {...props}
       >
-        <Dialog.Overlay className={clsx(styles.overlay, styles[opacityClassName])} />
-        <div
+        <div className={clsx(styles.overlay, styles[opacityClassName])} />
+        <DialogPanel
           className={clsx(styles.dialog, {
             [styles.fixedHeight]: fixedHeight,
           })}
@@ -182,7 +182,7 @@ export const ActionModal: FC<Props> = ({
             >
               {hero !== undefined ? <div className={styles.hero}>{hero}</div> : null}
               {header !== undefined ? (
-                <Dialog.Title
+                <DialogTitle
                   tabIndex={-1}
                   ref={initialFocusRef}
                   className={clsx(
@@ -192,7 +192,7 @@ export const ActionModal: FC<Props> = ({
                   )}
                 >
                   {header}
-                </Dialog.Title>
+                </DialogTitle>
               ) : null}
               <div
                 className={clsx(styles.body, {
@@ -226,7 +226,7 @@ export const ActionModal: FC<Props> = ({
               </div>
             </div>
           </div>
-        </div>
+        </DialogPanel>
       </Dialog>
     </Transition>
   );