feat: 🎸 update headlessui v2

Signed-off-by: kodai3 <k3dai.su3@gmail.com>
ubie-oss · Sep 16, 2024 · 38c413c · 38c413c
1 parent 62fd636
commit 38c413c
Show file tree

Hide file tree

Showing 6 changed files with 210 additions and 44 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -61,7 +61,7 @@
     "@babel/preset-react": "^7.18.6",
     "@babel/preset-typescript": "^7.21.5",
     "@chromatic-com/storybook": "^1.4.0",
-    "@headlessui/react": "^1.7.10",
+    "@headlessui/react": "^2.1.8",
     "@markuplint/jsx-parser": "^4.4.0",
     "@markuplint/react-spec": "^4.2.0",
     "@playwright/experimental-ct-react": "^1.38.1",
@@ -125,12 +125,12 @@
     "vitest": "^0.34.3"
   },
   "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",
     "clsx": ">1.2.0",
-    "react": "^17 || ^18",
-    "react-dom": "^17 || ^18"
+    "react": "^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, DialogTitle, 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}
@@ -194,7 +194,7 @@ export const ActionHalfModal: FC<Props> = ({
               >
                 {hero !== undefined ? <div className={styles.hero}>{hero}</div> : null}
                 {header !== undefined ? (
-                  <Dialog.Title
+                  <DialogTitle
                     tabIndex={-1}
                     ref={initialFocusRef}
                     className={clsx(
@@ -204,7 +204,7 @@ export const ActionHalfModal: FC<Props> = ({
                     )}
                   >
                     {header}
-                  </Dialog.Title>
+                  </DialogTitle>
                 ) : null}
                 <div
                   className={clsx(styles.body, {
@@ -244,7 +244,7 @@ export const ActionHalfModal: FC<Props> = ({
               </div>
             </div>
           </div>
-        </Transition.Child>
+        </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, 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,7 +162,7 @@ export const ActionModal: FC<Props> = ({
         initialFocus={initialFocusRef}
         {...props}
       >
-        <Dialog.Overlay className={clsx(styles.overlay, styles[opacityClassName])} />
+        <div className={clsx(styles.overlay, styles[opacityClassName])} />
         <div
           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, {