deps: update ark-ui

and fix portalled PopoverContent
pnd280 · Oct 22, 2024 · c9f33d8 · c9f33d8
1 parent 0d27dfe
commit c9f33d8
Show file tree

Hide file tree

Showing 12 changed files with 630 additions and 644 deletions.
diff --git a/package.json b/package.json
@@ -26,15 +26,14 @@
     "clear": "rm -rf node_modules && rm -rf dist"
   },
   "dependencies": {
-    "@ark-ui/react": "^3.13.0",
+    "@ark-ui/react": "^4.1.2",
     "@dotenvx/dotenvx": "^1.19.3",
     "@hookform/resolvers": "^3.9.0",
     "@radix-ui/react-slot": "^1.1.0",
     "@radix-ui/react-toast": "^1.2.2",
     "@tanstack/react-query": "^5.59.15",
     "@tanstack/react-query-devtools": "^5.59.15",
     "@uidotdev/usehooks": "^2.4.1",
-    "@webext-core/messaging": "^1.4.0",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "cmdk": "^1.0.0",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/content-script/components/QueryBox/FocusSelector.tsx b/src/content-script/components/QueryBox/FocusSelector.tsx
@@ -1,3 +1,4 @@
+import { createListCollection } from "@ark-ui/react";
 import { FaFile } from "react-icons/fa";
 import { FaCircleCheck } from "react-icons/fa6";
 import { PiQuestionMark } from "react-icons/pi";
@@ -71,7 +72,9 @@ export default function FocusSelector() {
 
   return (
     <Select
-      items={focusModes.map((model) => model.code)}
+      collection={createListCollection({
+        items: focusModes.map((model) => model.code),
+      })}
       value={[(focusMode || "internet") as FocusMode["code"]]}
       lazyMount={false}
       onValueChange={(details) => {

diff --git a/src/content-script/components/QueryBox/ImageModelSelector.tsx b/src/content-script/components/QueryBox/ImageModelSelector.tsx
@@ -1,3 +1,4 @@
+import { createListCollection } from "@ark-ui/react";
 import { LuCpu as Cpu, LuImage as Image } from "react-icons/lu";
 
 import {
@@ -24,7 +25,9 @@ export default function ImageModelSelector() {
 
   return (
     <Select
-      items={imageModels.map((model) => model.code)}
+      collection={createListCollection({
+        items: imageModels.map((model) => model.code),
+      })}
       value={[value]}
       onValueChange={(details) => {
         setValue(details.value[0] as ImageModel["code"]);

diff --git a/src/content-script/components/QueryBox/LanguageModelSelector.tsx b/src/content-script/components/QueryBox/LanguageModelSelector.tsx
@@ -1,3 +1,4 @@
+import { createListCollection } from "@ark-ui/react";
 import { ReactNode } from "react";
 import { LuCpu as Cpu, LuInfinity as Infinity } from "react-icons/lu";
 import { useImmer } from "use-immer";
@@ -64,8 +65,9 @@ export default function LanguageModelSelector() {
 
   return (
     <Select
-      portal={false}
-      items={languageModels.map((model) => model.code)}
+      collection={createListCollection({
+        items: languageModels.map((model) => model.code),
+      })}
       value={[value]}
       onValueChange={(details) => {
         setValue(details.value[0] as LanguageModel["code"]);

diff --git a/src/content-script/components/QueryBox/SpaceSelector/PopoverContent.tsx b/src/content-script/components/QueryBox/SpaceSelector/PopoverContent.tsx
@@ -37,21 +37,20 @@ import { cn } from "@/utils/cn";
 import { queryClient } from "@/utils/ts-query-query-client";
 import { emojiCodeToString, whereAmI } from "@/utils/utils";
 
-type SpaceSelectorPopoverContentProps = {
-  selectedSpaceUuid: string;
-  setSelectedSpaceUuid: (uuid: string) => void;
-};
-
-export function SpaceSelectorPopoverContent({
-  selectedSpaceUuid,
-  setSelectedSpaceUuid,
-}: SpaceSelectorPopoverContentProps) {
+export function SpaceSelectorPopoverContent() {
   const {
     data: spaces,
     isLoading: isLoadingSpaces,
     isPending: isPendingSpaces,
   } = useFetchSpaces();
 
+  const { selectedSpaceUuid, setSelectedSpaceUuid } = useQueryBoxStore(
+    ({ selectedSpaceUuid, setSelectedSpaceUuid }) => ({
+      selectedSpaceUuid,
+      setSelectedSpaceUuid,
+    }),
+  );
+
   const setSelectedLanguageModel = useQueryBoxStore(
     (state) => state.setSelectedLanguageModel,
   );

diff --git a/src/content-script/components/QueryBox/SpaceSelector/PopoverTrigger.tsx b/src/content-script/components/QueryBox/SpaceSelector/PopoverTrigger.tsx
@@ -2,23 +2,23 @@ import { LuX as X } from "react-icons/lu";
 
 import useFetchSpaces from "@/content-script/hooks/useFetchSpaces";
 import { webpageMessenger } from "@/content-script/main-world/webpage-messenger";
+import { useQueryBoxStore } from "@/content-script/session-store/query-box";
 import SpaceIcon from "@/shared/components/icons/SpaceIcon";
 import { PopoverTrigger } from "@/shared/components/Popover";
 import Tooltip from "@/shared/components/Tooltip";
 import { cn } from "@/utils/cn";
 import { whereAmI } from "@/utils/utils";
 
-type SpaceSelectorPopoverTriggerProps = {
-  selectedSpaceUuid: string;
-  setSelectedSpaceUuid: (uuid: string) => void;
-};
-
-export default function SpaceSelectorPopoverTrigger({
-  selectedSpaceUuid,
-  setSelectedSpaceUuid,
-}: SpaceSelectorPopoverTriggerProps) {
+export default function SpaceSelectorPopoverTrigger() {
   const { data: spaces } = useFetchSpaces();
 
+  const { selectedSpaceUuid, setSelectedSpaceUuid } = useQueryBoxStore(
+    ({ selectedSpaceUuid, setSelectedSpaceUuid }) => ({
+      selectedSpaceUuid,
+      setSelectedSpaceUuid,
+    }),
+  );
+
   const selectedSpaceTitle = spaces?.find(
     (space) => space.uuid === selectedSpaceUuid,
   )?.title;

diff --git a/src/content-script/components/QueryBox/SpaceSelector/index.tsx b/src/content-script/components/QueryBox/SpaceSelector/index.tsx
@@ -42,15 +42,9 @@ export default function SpaceSelector() {
   if (whereAmI() === "space" && !selectedSpaceUuid) return null;
 
   return (
-    <Popover portal={false}>
-      <SpaceSelectorPopoverTrigger
-        selectedSpaceUuid={selectedSpaceUuid}
-        setSelectedSpaceUuid={setSelectedSpaceUuid}
-      />
-      <SpaceSelectorPopoverContent
-        selectedSpaceUuid={selectedSpaceUuid}
-        setSelectedSpaceUuid={setSelectedSpaceUuid}
-      />
+    <Popover portal>
+      <SpaceSelectorPopoverTrigger />
+      <SpaceSelectorPopoverContent />
     </Popover>
   );
 }
diff --git a/src/cplx-user-settings/components/AccentColorSelector.tsx b/src/cplx-user-settings/components/AccentColorSelector.tsx
@@ -1,3 +1,4 @@
+import { createListCollection } from "@ark-ui/react";
 import { HTMLAttributes } from "react";
 
 import Input from "@/shared/components/Input";
@@ -44,7 +45,9 @@ export default forwardRef<HTMLInputElement, AccentColorSelectorProps>(
     return (
       <div className="tw-flex tw-gap-2">
         <Select
-          items={predefinedColors}
+          collection={createListCollection({
+            items: predefinedColors.map((color) => color.value),
+          })}
           value={[defaultColor]}
           onValueChange={({ value }) => {
             setColor(value[0]);

diff --git a/src/shared/components/Popover.tsx b/src/shared/components/Popover.tsx
@@ -3,6 +3,7 @@ import { Slot } from "@radix-ui/react-slot";
 import { ElementRef } from "react";
 
 import { cn } from "@/utils/cn";
+import { untrapWheel } from "@/utils/utils";
 
 type PopoverLocalContext = {
   portal: boolean;
@@ -68,6 +69,7 @@ const PopoverContent = forwardRef<
             "data-[side=right]:tw-slide-in-from-left-2 data-[side=top]:tw-slide-in-from-bottom-2",
             className,
           )}
+          onWheel={untrapWheel}
           {...props}
         />
       </ArkPopover.Positioner>

diff --git a/src/shared/components/Select.tsx b/src/shared/components/Select.tsx
@@ -11,6 +11,7 @@ import {
 import { LuChevronDown as ChevronDown } from "react-icons/lu";
 
 import { cn } from "@/utils/cn";
+import { untrapWheel } from "@/utils/utils";
 
 type SelectContext = {
   portal: boolean;
@@ -124,6 +125,7 @@ const SelectContent = forwardRef<
             "data-[side=right]:tw-slide-in-from-left-2 data-[side=top]:tw-slide-in-from-bottom-2",
             className,
           )}
+          onWheel={untrapWheel}
           {...props}
         />
       </ArkSelect.Positioner>

diff --git a/src/utils/utils.ts b/src/utils/utils.ts
@@ -410,3 +410,7 @@ export function emojiCodeToString(emojiCode: string): string {
 
   return String.fromCodePoint(...codePoints);
 }
+
+export function untrapWheel(e: React.WheelEvent<HTMLDivElement>) {
+  e.stopPropagation();
+}