chore: update headless ui (#4393)

Author: benfdking

package-lock.json

@@ -23,7 +23,7 @@
     "@codemirror/legacy-modes": "^6.4.0",
     "@codemirror/state": "^6.4.1",
     "@codemirror/view": "^6.28.1",
-    "@headlessui/react": "^1.7.17",
+    "@headlessui/react": "^2.0.0",
     "@heroicons/react": "^2.0.18",
     "@lit/react": "^1.0.6",
     "@radix-ui/react-context-menu": "^2.1.4",

web/client/package.json

@@ -1,5 +1,5 @@
-import { Suspense, lazy, useEffect, useMemo, useState } from 'react'
-import { Tab } from '@headlessui/react'
+import { Fragment, Suspense, lazy, useEffect, useMemo, useState } from 'react'
+import { TabGroup, TabPanel, TabPanels } from '@headlessui/react'
 import clsx from 'clsx'
 import { includes, isArrayEmpty, isFalse, isNotNil } from '~/utils'
 import { type EditorTab, useStoreEditor } from '~/context/editor'
@@ -155,7 +155,8 @@ export default function EditorPreview({
           <h3 className="text-md">No Data To Preview</h3>
         </div>
       ) : (
-        <Tab.Group
+        <TabGroup
+          as={Fragment}
           key={tab.id}
           onChange={setActiveTabIndex}
           selectedIndex={activeTabIndex}
@@ -186,20 +187,20 @@ export default function EditorPreview({
               </Button>
             </div>
           </TabList>
-          <Tab.Panels className="h-full w-full overflow-hidden">
+          <TabPanels className="h-full w-full overflow-hidden">
             {isNotNil(previewTable) && (
-              <Tab.Panel
+              <TabPanel
                 unmount={false}
                 className={clsx(
                   'w-full h-full pt-4 relative px-2',
                   'ring-white ring-opacity-60 ring-offset-2 ring-offset-blue-400 focus:outline-none focus:ring-2',
                 )}
               >
                 <Table data={previewTable} />
-              </Tab.Panel>
+              </TabPanel>
             )}
             {isNotNil(previewQuery) && tab.file.isRemote && (
-              <Tab.Panel
+              <TabPanel
                 unmount={false}
                 className="w-full h-full ring-white ring-opacity-60 ring-offset-2 ring-offset-blue-400 focus:outline-none focus:ring-2 p-2"
               >
@@ -211,10 +212,11 @@ export default function EditorPreview({
                     className="text-xs"
                   />
                 </div>
-              </Tab.Panel>
+              </TabPanel>
             )}
             {showLineage && (
-              <Tab.Panel
+              <TabPanel
+                as="div"
                 unmount={false}
                 className={clsx(
                   'w-full h-full ring-white ring-opacity-60 ring-offset-2 ring-offset-blue-400 focus:outline-none focus:ring-2',
@@ -227,10 +229,11 @@ export default function EditorPreview({
                 >
                   <ModelLineage model={model} />
                 </Suspense>
-              </Tab.Panel>
+              </TabPanel>
             )}
             {isNotNil(previewDiff?.row_diff) && (
-              <Tab.Panel
+              <TabPanel
+                as="div"
                 unmount={false}
                 className={clsx(
                   'w-full h-full ring-white ring-opacity-60 ring-offset-2 ring-offset-blue-400 focus:outline-none focus:ring-2 py-2',
@@ -240,10 +243,10 @@ export default function EditorPreview({
                   key={tab.id}
                   diff={previewDiff}
                 />
-              </Tab.Panel>
+              </TabPanel>
             )}
             {showErrors && (
-              <Tab.Panel
+              <TabPanel
                 unmount={false}
                 className="w-full h-full ring-white ring-opacity-60 ring-offset-2 ring-offset-blue-400 focus:outline-none focus:ring-2 py-2"
               >
@@ -262,10 +265,10 @@ export default function EditorPreview({
                       </li>
                     ))}
                 </ul>
-              </Tab.Panel>
+              </TabPanel>
             )}
-          </Tab.Panels>
-        </Tab.Group>
+          </TabPanels>
+        </TabGroup>
       )}
     </div>
   )

web/client/src/library/components/editor/EditorPreview.tsx

@@ -442,6 +442,7 @@ function GraphControls({ nodes = [] }: { nodes: Node[] }): JSX.Element {
     <div className="px-2 flex items-center text-xs text-neutral-400 @container">
       <div className="contents">
         <Popover
+          as="div"
           className="flex @lg:hidden bg-none border-none"
           aria-label="Show lineage node details"
         >

web/client/src/library/components/graph/ModelLineage.tsx

@@ -163,6 +163,7 @@ export default function PlanActions({
             leaveFrom="opacity-100 scale-100"
             leaveTo="opacity-0 scale-95"
             className="trasition-all duration-300 ease-in-out"
+            as="div"
           >
             {showPlanActionButton && (
               <Button

web/client/src/library/components/plan/PlanActions.tsx

@@ -73,6 +73,7 @@ export default function PlanApplyStageTracker(): JSX.Element {
       leaveFrom="opacity-100 scale-100"
       leaveTo="opacity-0 scale-95"
       className={clsx('my-2 rounded-xl', isFailed && 'bg-danger-5')}
+      as="div"
     >
       {showFailedMessage ? (
         <Banner
@@ -728,6 +729,7 @@ function Stage({
       leaveFrom="opacity-100 scale-100"
       leaveTo="opacity-0 scale-95"
       className="my-2"
+      as="div"
     >
       <Disclosure>
         <Banner
@@ -802,6 +804,7 @@ function Stage({
           leaveFrom="opacity-100 scale-100"
           leaveTo="opacity-0 scale-95"
           className="trasition-all duration-300 ease-in-out"
+          as="div"
         >
           <Disclosure.Panel
             static

web/client/src/library/components/plan/PlanApplyStageTracker.tsx

@@ -169,6 +169,7 @@ function TasksDetails({
         leaveFrom="opacity-100 scale-100"
         leaveTo="opacity-0 scale-95"
         className="trasition-all duration-300 ease-in-out"
+        as="div"
       >
         <div className="px-4 pt-3 pb-2 mt-4 shadow-lg rounded-lg">
           <Title text="Currently in proccess" />