Merge pull request #755 from mynaparrot/headlessui_up

upgrade `@headlessui/react` to v2
mynaparrot · Oct 17, 2024 · 1e13a97 · 1e13a97
2 parents 45df152 + 47e4375
commit 1e13a97
Show file tree

Hide file tree

Showing 66 changed files with 810 additions and 435 deletions.
diff --git a/package.json b/package.json
@@ -17,8 +17,8 @@
   "dependencies": {
     "@bufbuild/protobuf": "2.2.0",
     "@excalidraw/excalidraw": "0.17.6",
-    "@headlessui/react": "1.7.19",
-    "@nats-io/jetstream": "3.0.0-10",
+    "@headlessui/react": "2.1.10",
+    "@nats-io/jetstream": "3.0.0-11",
     "@nats-io/nats-core": "3.0.0-27",
     "@reduxjs/toolkit": "2.3.0",
     "@tensorflow-models/body-pix": "2.2.1",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/components/breakout-room/breakoutRoomInvitation.tsx b/src/components/breakout-room/breakoutRoomInvitation.tsx
@@ -2,7 +2,12 @@ import React, { Fragment, useCallback, useEffect, useState } from 'react';
 import { createSelector } from '@reduxjs/toolkit';
 import { useTranslation } from 'react-i18next';
 import { LocalAudioTrack, Track } from 'livekit-client';
-import { Dialog, Transition } from '@headlessui/react';
+import {
+  Dialog,
+  DialogTitle,
+  Transition,
+  TransitionChild,
+} from '@headlessui/react';
 import { toast } from 'react-toastify';
 import copy from 'copy-text-to-clipboard';
 import { JoinBreakoutRoomReqSchema } from 'plugnmeet-protocol-js';
@@ -137,7 +142,7 @@ const BreakoutRoomInvitation = () => {
             static={false}
           >
             <div className="min-h-screen px-4 text-center flex items-end justify-end">
-              <Transition.Child
+              <TransitionChild
                 as={Fragment}
                 enter="ease-out duration-300"
                 enterFrom="opacity-0"
@@ -146,16 +151,16 @@ const BreakoutRoomInvitation = () => {
                 leaveFrom="opacity-100"
                 leaveTo="opacity-0"
               >
-                <Dialog.Overlay className="fixed inset-0 bg-black opacity-30" />
-              </Transition.Child>
+                <div className="fixed inset-0 bg-black opacity-30" />
+              </TransitionChild>
 
               <span
                 className="inline-block h-screen align-middle"
                 aria-hidden="true"
               >
                 &#8203;
               </span>
-              <Transition.Child
+              <TransitionChild
                 as={Fragment}
                 enter="ease-out duration-300"
                 enterFrom="opacity-0 scale-95"
@@ -174,12 +179,12 @@ const BreakoutRoomInvitation = () => {
                     <span className="inline-block h-[1px] w-[20px] bg-primaryColor dark:bg-darkText absolute top-0 left-0 -rotate-45" />
                   </button>
 
-                  <Dialog.Title
+                  <DialogTitle
                     as="h3"
                     className="text-base font-medium leading-6 text-gray-900 dark:text-darkText text-left mb-2"
                   >
                     {t('breakout-room.invitation-title')}
-                  </Dialog.Title>
+                  </DialogTitle>
                   <hr />
                   <div className="mt-2">
                     <span className="text-black dark:text-darkText text-sm">
@@ -216,7 +221,7 @@ const BreakoutRoomInvitation = () => {
                     </div>
                   </div>
                 </div>
-              </Transition.Child>
+              </TransitionChild>
             </div>
           </Dialog>
         </Transition>

diff --git a/src/components/breakout-room/form/index.tsx b/src/components/breakout-room/form/index.tsx
@@ -152,7 +152,7 @@ const FromElems = () => {
       store.getState().session.currentRoom.metadata?.roomFeatures
         ?.breakoutRoomFeatures?.allowedNumberRooms ?? 6;
 
-    const options: Array<JSX.Element> = [];
+    const options: Array<React.JSX.Element> = [];
     for (let i = 0; i < max; i++) {
       options.push(
         <option key={i} value={i + 1}>