update react components for @headlessui/react v2

gtkvn · Jul 8, 2024 · 10384d5 · 10384d5
1 parent fe36d1e
commit 10384d5
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 18 deletions.
diff --git a/stubs/inertia-react-ts/app/javascript/Components/Dropdown.tsx b/stubs/inertia-react-ts/app/javascript/Components/Dropdown.tsx
@@ -1,4 +1,4 @@
-import { useState, createContext, useContext, Fragment, PropsWithChildren, Dispatch, SetStateAction } from 'react'
+import { useState, createContext, useContext, PropsWithChildren, Dispatch, SetStateAction } from 'react'
 import { Link, InertiaLinkProps } from '@inertiajs/react'
 import { Transition } from '@headlessui/react'
 
@@ -43,11 +43,7 @@ const Content = ({
   width = '48',
   contentClasses = 'py-1 bg-white dark:bg-gray-700',
   children,
-}: PropsWithChildren<{
-  align?: 'left' | 'right'
-  width?: '48'
-  contentClasses?: string
-}>) => {
+}: PropsWithChildren<{ align?: 'left' | 'right'; width?: '48'; contentClasses?: string }>) => {
   const { open, setOpen } = useContext(DropDownContext)
 
   let alignmentClasses = 'origin-top'
@@ -67,7 +63,6 @@ const Content = ({
   return (
     <>
       <Transition
-        as={Fragment}
         show={open}
         enter="transition ease-out duration-200"
         enterFrom="opacity-0 scale-95"

diff --git a/stubs/inertia-react-ts/app/javascript/Components/Modal.tsx b/stubs/inertia-react-ts/app/javascript/Components/Modal.tsx
@@ -1,5 +1,5 @@
-import { Fragment, PropsWithChildren } from 'react'
-import { Dialog, Transition } from '@headlessui/react'
+import { PropsWithChildren } from 'react'
+import { Dialog, DialogPanel, Transition, TransitionChild } from '@headlessui/react'
 
 export default function Modal({
   children,
@@ -28,15 +28,14 @@ export default function Modal({
   }[maxWidth]
 
   return (
-    <Transition show={show} as={Fragment} leave="duration-200">
+    <Transition show={show} leave="duration-200">
       <Dialog
         as="div"
         id="modal"
         className="fixed inset-0 flex overflow-y-auto px-4 py-6 sm:px-0 items-center z-50 transform transition-all"
         onClose={close}
       >
-        <Transition.Child
-          as={Fragment}
+        <TransitionChild
           enter="ease-out duration-300"
           enterFrom="opacity-0"
           enterTo="opacity-100"
@@ -45,23 +44,22 @@ export default function Modal({
           leaveTo="opacity-0"
         >
           <div className="absolute inset-0 bg-gray-500/75 dark:bg-gray-900/75" />
-        </Transition.Child>
+        </TransitionChild>
 
-        <Transition.Child
-          as={Fragment}
+        <TransitionChild
           enter="ease-out duration-300"
           enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
           enterTo="opacity-100 translate-y-0 sm:scale-100"
           leave="ease-in duration-200"
           leaveFrom="opacity-100 translate-y-0 sm:scale-100"
           leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
         >
-          <Dialog.Panel
+          <DialogPanel
             className={`mb-6 bg-white dark:bg-gray-800 rounded-lg overflow-hidden shadow-xl transform transition-all sm:w-full sm:mx-auto ${maxWidthClass}`}
           >
             {children}
-          </Dialog.Panel>
-        </Transition.Child>
+          </DialogPanel>
+        </TransitionChild>
       </Dialog>
     </Transition>
   )