upgrade ark to 1.2.1

web/package.json

@@ -11,7 +11,7 @@
     "openapi": "orval"
   },
   "dependencies": {
-    "@ark-ui/react": "^0.15.0",
+    "@ark-ui/react": "^1.2.1",
     "@dnd-kit/core": "^6.0.8",
     "@dnd-kit/sortable": "^7.0.2",
     "@emoji-mart/data": "^1.1.2",
@@ -56,6 +56,6 @@
     "typescript": "^5.2.2"
   },
   "resolutions": {
-    "@ark-ui/react": "^0.15.0"
+    "@ark-ui/react": "^1.2.1"
   }
-}
+}

web/src/components/content/CollectionMenu/CollectionMenu.tsx

@@ -16,8 +16,7 @@ export function CollectionMenu(props: Props) {
     onKeyDown,
     onKeyUp,
     isOpen,
-    onOpen,
-    onClose,
+    onOpenChange,
     isAlreadySaved,
   } = useCollectionMenu(props);
 
@@ -27,9 +26,8 @@ export function CollectionMenu(props: Props) {
     <Box onKeyDown={onKeyDown} onKeyUp={onKeyUp} tabIndex={1}>
       <Menu
         size="sm"
-        isOpen={isOpen}
-        onOpen={onOpen}
-        onClose={onClose}
+        open={isOpen}
+        onOpenChange={onOpenChange}
         closeOnSelect={!multiSelect}
         userSelect="none"
       >

web/src/components/content/CollectionMenu/useCollectionMenu.ts

@@ -21,7 +21,7 @@ export function useCollectionMenu({ thread }: Props) {
     setSelected(0);
   };
 
-  const { isOpen, onOpen, onClose, onToggle } = useDisclosure({
+  const { isOpen, onOpenChange, onToggle } = useDisclosure({
     onClose: onReset,
   });
 
@@ -54,9 +54,8 @@ export function useCollectionMenu({ thread }: Props) {
     collections: collections.collections,
     onKeyDown,
     onKeyUp,
+    onOpenChange,
     multiSelect,
     isOpen,
-    onOpen,
-    onClose,
   };
 }

web/src/components/feed/common/FeedItemMenu/FeedItemMenu.tsx

@@ -22,13 +22,13 @@ export function FeedItemMenu(props: Props) {
     useFeedItemMenu(props);
 
   return (
-    <Menu size="sm">
+    <Menu size="sm" lazyMount>
       <MenuTrigger asChild>
         <MoreAction />
       </MenuTrigger>
       <Portal>
         <MenuPositioner>
-          <MenuContent lazyMount minW="36">
+          <MenuContent minW="36">
             <MenuItemGroup id="user">
               <MenuItemGroupLabel
                 htmlFor="user"

web/src/components/member/MemberOptions/MemberOptionsMenu.tsx

@@ -28,12 +28,7 @@ export function MemberOptionsMenu({
   const showAdminOptions = session?.admin && props.handle !== session.handle;
 
   return (
-    <Menu
-      size="sm"
-      userSelect="none"
-      isOpen={props.isOpen}
-      onClose={props.onClose}
-    >
+    <Menu size="sm" userSelect="none" onOpenChange={props.onOpenChange}>
       <MenuTrigger asChild>{children}</MenuTrigger>
 
       <Portal>

web/src/components/thread/PostMenu/PostMenu.tsx

@@ -34,14 +34,14 @@ export function PostMenu(props: PostProps) {
   } = usePostMenu(props);
 
   return (
-    <Menu size="sm">
+    <Menu size="sm" lazyMount>
       <MenuTrigger asChild>
         <MoreAction />
       </MenuTrigger>
 
       <Portal>
         <MenuPositioner>
-          <MenuContent lazyMount minW="36">
+          <MenuContent minW="36">
             <MenuItemGroup id="group">
               <MenuItemGroupLabel
                 htmlFor="user"

web/src/components/thread/ReactList/ReactList.tsx

@@ -5,17 +5,17 @@ import { PlusIcon } from "@heroicons/react/24/outline";
 import { Button } from "src/theme/components/Button";
 import {
   Popover,
+  PopoverAnchor,
   PopoverContent,
   PopoverPositioner,
-  PopoverTrigger,
 } from "src/theme/components/Popover";
 
 import { styled } from "@/styled-system/jsx";
 
 import { Props, useReactList } from "./useReactList";
 
 export function ReactList(props: Props) {
-  const { authenticated, handlers } = useReactList(props);
+  const { authenticated, ref, isOpen, handlers } = useReactList(props);
   return (
     <styled.ul
       display="flex"
@@ -33,18 +33,20 @@ export function ReactList(props: Props) {
       ))}
 
       {authenticated && (
-        <Popover closeOnInteractOutside closeOnEsc>
-          <PopoverTrigger asChild>
-            <Button size="xs" aria-label="add">
+        <Popover open={isOpen} lazyMount closeOnInteractOutside={false}>
+          <PopoverAnchor>
+            <Button size="xs" aria-label="add" onClick={handlers.handleTrigger}>
               <PlusIcon width="1.25em" />
             </Button>
-          </PopoverTrigger>
+          </PopoverAnchor>
 
-          <PopoverPositioner>
+          <PopoverPositioner ref={ref}>
             <PopoverContent>
               <Picker
-                data={data} //
-                onEmojiSelect={handlers.onSelect}
+                data={data}
+                onEmojiSelect={handlers.handleSelect}
+                // TODO: When we do dark mode, this needs to be updated!
+                theme="light"
               />
             </PopoverContent>
           </PopoverPositioner>

web/src/components/thread/ReactList/useReactList.ts

@@ -1,9 +1,11 @@
+import { useClickAway } from "@uidotdev/usehooks";
 import { mutate } from "swr";
 
 import { postReactAdd } from "src/api/openapi/posts";
 import { PostProps } from "src/api/openapi/schemas";
 import { getThreadGetKey } from "src/api/openapi/threads";
 import { useSession } from "src/auth";
+import { useDisclosure } from "src/utils/useDisclosure";
 
 export type Props = PostProps & {
   slug?: string;
@@ -17,15 +19,37 @@ export function useReactList(props: Props) {
   const account = useSession();
   const authenticated = !!account;
 
-  async function onSelect(event: EmojiSelectEvent) {
+  const { onOpen, onClose, isOpen } = useDisclosure();
+  const ref = useClickAway<HTMLDivElement>(() => {
+    onClose();
+  });
+
+  async function handleSelect(event: EmojiSelectEvent) {
     await postReactAdd(props.id, { emoji: event.native });
     props.slug && mutate(getThreadGetKey(props.slug));
+
+    onClose();
+  }
+
+  function handleTrigger() {
+    if (!authenticated) {
+      return;
+    }
+
+    // NOTE: Doesn't currently work to close the popover if it's open, because
+    // by the time this handler is called, the outside click handler has already
+    // closed the popover. But... tbh who cares! Very low impact issue to fix...
+    if (!isOpen) onOpen();
+    else onClose();
   }
 
   return {
     authenticated,
+    isOpen,
+    ref,
     handlers: {
-      onSelect,
+      handleTrigger,
+      handleSelect,
     },
   };
 }

web/src/theme/components/Checkbox/checkbox.recipe.ts

@@ -1,4 +1,4 @@
-import { checkboxAnatomy } from "@ark-ui/react";
+import { checkboxAnatomy } from "@ark-ui/anatomy";
 import { defineSlotRecipe } from "@pandacss/dev";
 
 export const checkbox = defineSlotRecipe({

web/src/theme/components/Menu copy/menu.recipe.ts

@@ -0,0 +1,135 @@
+import { menuAnatomy } from "@ark-ui/anatomy";
+import { defineSlotRecipe } from "@pandacss/dev";
+
+const itemStyle = {
+  alignItems: "center",
+  borderRadius: "sm",
+  cursor: "pointer",
+  display: "flex",
+  fontWeight: "medium",
+  textStyle: "sm",
+  transitionDuration: "fast",
+  transitionProperty: "background, color",
+  transitionTimingFunction: "default",
+  _hover: {
+    background: "bg.subtle",
+    "& :where(svg)": { color: "fg.default" },
+  },
+  _highlighted: { background: "bg.subtle" },
+  "& :where(svg)": { color: "fg.muted" },
+};
+
+export const menu = defineSlotRecipe({
+  className: "menu",
+  slots: menuAnatomy.keys(),
+  base: {
+    itemGroupLabel: {
+      fontWeight: "semibold",
+      textStyle: "sm",
+      color: "fg.subtle",
+    },
+    content: {
+      background: "bg.default",
+      borderRadius: "md",
+      boxShadow: "lg",
+      display: "flex",
+      flexDirection: "column",
+      outline: "none",
+      width: "calc(100% + 2rem)",
+      _hidden: {
+        display: "none",
+      },
+      _open: {
+        animation: "fadeIn 0.25s ease-out",
+      },
+      _closed: {
+        display: "none",
+        animation: "fadeOut 0.2s ease-out",
+      },
+    },
+    itemGroup: {
+      display: "flex",
+      flexDirection: "column",
+      gap: "1",
+    },
+    positioner: {
+      zIndex: "dropdown",
+    },
+    item: itemStyle,
+    optionItem: itemStyle,
+    triggerItem: itemStyle,
+  },
+  defaultVariants: {
+    size: "md",
+  },
+  variants: {
+    size: {
+      sm: {
+        itemGroupLabel: { py: "1.5", px: "1.5", mx: "1" },
+        content: { py: "1", gap: "1" },
+        item: {
+          h: "8",
+          px: "1.5",
+          mx: "1",
+          "& :where(svg)": { width: "4", height: "4" },
+        },
+        optionItem: {
+          h: "8",
+          px: "1.5",
+          mx: "1",
+          "& :where(svg)": { width: "4", height: "4" },
+        },
+        triggerItem: {
+          h: "8",
+          px: "1.5",
+          mx: "1",
+          "& :where(svg)": { width: "4", height: "4" },
+        },
+      },
+      md: {
+        itemGroupLabel: { py: "2.5", px: "2.5", mx: "1" },
+        content: { py: "1", gap: "1" },
+        item: {
+          h: "10",
+          px: "2.5",
+          mx: "1",
+          "& :where(svg)": { width: "4", height: "4" },
+        },
+        optionItem: {
+          h: "10",
+          px: "2.5",
+          mx: "1",
+          "& :where(svg)": { width: "4", height: "4" },
+        },
+        triggerItem: {
+          h: "10",
+          px: "2.5",
+          mx: "1.5",
+          "& :where(svg)": { width: "4", height: "4" },
+        },
+      },
+      lg: {
+        itemGroupLabel: { py: "2.5", px: "2.5", mx: "1" },
+        content: { py: "1", gap: "1" },
+        item: {
+          h: "11",
+          px: "2.5",
+          mx: "1",
+          "& :where(svg)": { width: "5", height: "5" },
+        },
+        optionItem: {
+          h: "11",
+          px: "2.5",
+          mx: "1",
+          "& :where(svg)": { width: "5", height: "5" },
+        },
+        triggerItem: {
+          h: "11",
+          px: "2.5",
+          mx: "1.5",
+          "& :where(svg)": { width: "5", height: "5" },
+        },
+      },
+    },
+  },
+});

web/src/theme/components/Menu/menu.recipe.ts

@@ -1,4 +1,4 @@
-import { menuAnatomy } from "@ark-ui/react";
+import { menuAnatomy } from "@ark-ui/anatomy";
 import { defineSlotRecipe } from "@pandacss/dev";
 
 const itemStyle = {

web/src/theme/components/Popover/popover.recipe.ts

@@ -1,4 +1,4 @@
-import { popoverAnatomy } from "@ark-ui/react";
+import { popoverAnatomy } from "@ark-ui/anatomy";
 import { defineSlotRecipe } from "@pandacss/dev";
 
 export const popover = defineSlotRecipe({
@@ -7,9 +7,9 @@ export const popover = defineSlotRecipe({
   base: {
     positioner: {
       position: "relative",
-      zIndex: "popover",
     },
     content: {
+      zIndex: "popover",
       borderRadius: "lg",
       boxShadow: "lg",
       display: "flex",

web/src/theme/components/Tabs/tabs.recipe.ts

@@ -1,4 +1,4 @@
-import { tabsAnatomy } from "@ark-ui/react";
+import { tabsAnatomy } from "@ark-ui/anatomy";
 import { defineSlotRecipe } from "@pandacss/dev";
 
 export const tabs = defineSlotRecipe({