@hanzogui/kitchen-sink 3.0.5

package/src/usecases/MenuAnimatePositionCase.tsx

@@ -0,0 +1,41 @@
+import { Menu } from '@hanzogui/menu'
+import { Button, Text, XStack, YStack } from '@hanzo/gui'
+
+export function MenuAnimatePositionCase() {
+  return (
+    <YStack padding="$4" gap="$4">
+      <Text>Test: animatePosition — content should animate between triggers</Text>
+
+      <Menu placement="bottom-start">
+        <XStack gap="$8">
+          <Menu.Trigger asChild>
+            <Button data-testid="trigger-left">Left Trigger</Button>
+          </Menu.Trigger>
+
+          <Menu.Trigger asChild>
+            <Button data-testid="trigger-right">Right Trigger</Button>
+          </Menu.Trigger>
+        </XStack>
+
+        <Menu.Portal>
+          <Menu.Content
+            data-testid="menu-content"
+            animatePosition
+            p="$2"
+            minWidth={180}
+            borderWidth={1}
+            borderColor="$borderColor"
+            elevation="$3"
+          >
+            <Menu.Item data-testid="menu-item-1" key="i1" textValue="Alpha">
+              <Menu.ItemTitle>Alpha</Menu.ItemTitle>
+            </Menu.Item>
+            <Menu.Item data-testid="menu-item-2" key="i2" textValue="Beta">
+              <Menu.ItemTitle>Beta</Menu.ItemTitle>
+            </Menu.Item>
+          </Menu.Content>
+        </Menu.Portal>
+      </Menu>
+    </YStack>
+  )
+}

package/src/usecases/MenuArrowAnimatePresenceCase.tsx

@@ -0,0 +1,98 @@
+/**
+ * Test case for Menu arrow visibility with AnimatePresence
+ * Issue: Arrow has opacity: 0 applied with Motion driver when wrapped in AnimatePresence
+ * Works with CSS driver but not Motion driver
+ */
+import { Menu } from '@hanzogui/menu'
+import { AnimatePresence, Button, Paragraph, Popover, YStack } from '@hanzo/gui'
+
+// Reproduce the pattern from ~/chat where arrow is wrapped in AnimatePresence
+const PopoverWithAnimatePresenceArrow = () => {
+  return (
+    <Popover offset={10}>
+      <Popover.Trigger asChild>
+        <Button testID="popover-trigger">Open Popover</Button>
+      </Popover.Trigger>
+
+      <Popover.Content
+        enterStyle={{ y: -4, opacity: 0 }}
+        exitStyle={{ y: 6, opacity: 0 }}
+        transition="100ms"
+        bg="$background"
+        p="$4"
+        borderWidth={1}
+        borderColor="$borderColor"
+        borderRadius="$4"
+      >
+        {/* This pattern causes the arrow to have opacity: 0 with Motion driver */}
+        <AnimatePresence>
+          <Popover.Arrow
+            testID="popover-arrow"
+            size="$4"
+            borderWidth={1}
+            borderColor="$borderColor"
+            bg="$background"
+          />
+        </AnimatePresence>
+        <YStack gap="$2">
+          <Button size="$2">Item 1</Button>
+          <Button size="$2">Item 2</Button>
+        </YStack>
+      </Popover.Content>
+    </Popover>
+  )
+}
+
+// Menu with arrow (no AnimatePresence - should work)
+const MenuWithArrow = () => {
+  return (
+    <Menu offset={10}>
+      <Menu.Trigger asChild>
+        <Button testID="menu-trigger">Open Menu</Button>
+      </Menu.Trigger>
+
+      <Menu.Portal>
+        <Menu.Content
+          testID="menu-content"
+          enterStyle={{ scale: 0.9, opacity: 0, y: -5 }}
+          exitStyle={{ scale: 0.95, opacity: 0, y: -3 }}
+          transition="100ms"
+          borderRadius="$4"
+        >
+          <Menu.Arrow
+            testID="menu-arrow"
+            size="$4"
+            borderWidth={1}
+            borderColor="$borderColor"
+          />
+          <Menu.Item key="item1">
+            <Menu.ItemTitle>Item 1</Menu.ItemTitle>
+          </Menu.Item>
+          <Menu.Item key="item2">
+            <Menu.ItemTitle>Item 2</Menu.ItemTitle>
+          </Menu.Item>
+        </Menu.Content>
+      </Menu.Portal>
+    </Menu>
+  )
+}
+
+export function MenuArrowAnimatePresenceCase() {
+  return (
+    <YStack gap="$4" padding="$4" alignItems="center" justifyContent="center" flex={1}>
+      <YStack gap="$2" alignItems="center">
+        <MenuWithArrow />
+        <Paragraph opacity={0.5} size="$2">
+          Menu with Arrow (no AnimatePresence)
+        </Paragraph>
+      </YStack>
+
+      <YStack gap="$2" alignItems="center">
+        <PopoverWithAnimatePresenceArrow />
+        <Paragraph opacity={0.5} size="$2">
+          Popover with Arrow in AnimatePresence
+        </Paragraph>
+      </YStack>
+    </YStack>
+  )
+}

package/src/usecases/MenuAsChildPositionCase.tsx

@@ -0,0 +1,24 @@
+import { Menu } from '@hanzogui/menu'
+import { Button, YStack } from '@hanzo/gui'
+
+export function MenuAsChildPositionCase() {
+  return (
+    <YStack padding="$4" gap="$4">
+      <Menu placement="bottom-start">
+        <Menu.Trigger asChild>
+          <Button data-testid="menu-trigger-button">Open Menu</Button>
+        </Menu.Trigger>
+
+        <Menu.Portal>
+          <Menu.Content>
+            <Menu.Item key="item-1" textValue="Item 1">
+              <Menu.ItemTitle>Item 1</Menu.ItemTitle>
+            </Menu.Item>
+          </Menu.Content>
+        </Menu.Portal>
+      </Menu>
+
+      <Button data-testid="reference-button">Reference Button</Button>
+    </YStack>
+  )
+}

package/src/usecases/MenuAutoResizeCase.tsx

@@ -0,0 +1,57 @@
+import { Menu } from '@hanzogui/menu'
+import { Button, YStack } from '@hanzo/gui'
+
+/**
+ * Menu auto-resize test case
+ * Tests that menus automatically resize to fit within tight viewport spaces
+ * The menu should constrain its height to available space and become scrollable
+ */
+
+const ITEM_COUNT = 20
+
+export function MenuAutoResizeCase() {
+  return (
+    <YStack
+      data-testid="container"
+      $platform-web={{
+        height: '100vh',
+      }}
+      justifyContent="center"
+      alignItems="center"
+      padding="$4"
+    >
+      <Menu placement="bottom-start">
+        <Menu.Trigger asChild>
+          <Button data-testid="menu-trigger" size="$4">
+            Open Menu
+          </Button>
+        </Menu.Trigger>
+
+        <Menu.Portal zIndex={100}>
+          <Menu.Content
+            data-testid="menu-content"
+            minWidth={200}
+            borderWidth={1}
+            borderColor="$borderColor"
+            elevation="$3"
+            padding="$2"
+          >
+            <Menu.ScrollView data-testid="menu-scroll-view">
+              {Array.from({ length: ITEM_COUNT }).map((_, i) => (
+                <Menu.Item
+                  data-testid={`menu-item-${i + 1}`}
+                  key={`item-${i}`}
+                  textValue={`Item ${i + 1}`}
+                  style={{ paddingHorizontal: 8, paddingVertical: 6, borderRadius: 4 }}
+                  focusStyle={{ backgroundColor: '$backgroundHover' }}
+                >
+                  <Menu.ItemTitle>Item {i + 1}</Menu.ItemTitle>
+                </Menu.Item>
+              ))}
+            </Menu.ScrollView>
+          </Menu.Content>
+        </Menu.Portal>
+      </Menu>
+    </YStack>
+  )
+}

package/src/usecases/MenuBottomCase.tsx

@@ -0,0 +1,55 @@
+import { Menu } from '@hanzogui/menu'
+import { Button, YStack } from '@hanzo/gui'
+
+/**
+ * Menu bottom placement test - menu opens below trigger and stays there
+ */
+
+const ITEM_COUNT = 20
+
+export function MenuBottomCase() {
+  return (
+    <YStack
+      data-testid="container"
+      $platform-web={{
+        height: '100vh',
+      }}
+      justifyContent="flex-start"
+      alignItems="center"
+      paddingTop="$8"
+    >
+      <Menu placement="bottom-start" stayInFrame allowFlip={false}>
+        <Menu.Trigger asChild>
+          <Button data-testid="menu-trigger" size="$4">
+            Open Menu Below
+          </Button>
+        </Menu.Trigger>
+
+        <Menu.Portal zIndex={100}>
+          <Menu.Content
+            data-testid="menu-content"
+            minWidth={200}
+            borderWidth={1}
+            borderColor="$borderColor"
+            elevation="$3"
+            padding="$2"
+          >
+            <Menu.ScrollView data-testid="menu-scroll-view">
+              {Array.from({ length: ITEM_COUNT }).map((_, i) => (
+                <Menu.Item
+                  data-testid={`menu-item-${i + 1}`}
+                  key={`item-${i}`}
+                  textValue={`Item ${i + 1}`}
+                  style={{ paddingHorizontal: 8, paddingVertical: 6, borderRadius: 4 }}
+                  focusStyle={{ backgroundColor: '$backgroundHover' }}
+                >
+                  <Menu.ItemTitle>Item {i + 1}</Menu.ItemTitle>
+                </Menu.Item>
+              ))}
+            </Menu.ScrollView>
+          </Menu.Content>
+        </Menu.Portal>
+      </Menu>
+    </YStack>
+  )
+}

package/src/usecases/MenuFocusLeaveCase.tsx

@@ -0,0 +1,135 @@
+import { ChevronRight } from '@hanzogui/lucide-icons-2'
+import { Menu } from '@hanzogui/menu'
+import React from 'react'
+import { Button, Text, YStack } from '@hanzo/gui'
+
+/**
+ * Test case for menu focus leave behavior
+ *
+ * Bug 1: When leaving the menu entirely, focus style stays on last element
+ * Bug 2: Two items can appear focused when moving quickly from submenu trigger
+ */
+export function MenuFocusLeaveCase() {
+  const [subMenuOpen, setSubMenuOpen] = React.useState(false)
+
+  return (
+    <YStack padding="$4" gap="$4" alignItems="flex-start">
+      <Text>Test: focus should clear when leaving menu entirely</Text>
+
+      <Menu placement="bottom-start">
+        <Menu.Trigger asChild>
+          <Button data-testid="menu-trigger">Open Menu</Button>
+        </Menu.Trigger>
+
+        <Menu.Portal zIndex={100}>
+          <Menu.Content
+            data-testid="menu-content"
+            p="$2"
+            minWidth={220}
+            borderWidth={1}
+            borderColor="$borderColor"
+            elevation="$3"
+          >
+            <Menu.Item data-testid="menu-item-1" key="item-1" textValue="Item One">
+              <Menu.ItemTitle>Item One</Menu.ItemTitle>
+            </Menu.Item>
+
+            <Menu.Sub
+              open={subMenuOpen}
+              placement="right-start"
+              onOpenChange={setSubMenuOpen}
+            >
+              <Menu.SubTrigger
+                data-testid="submenu-trigger-1"
+                key="submenu-trigger-1"
+                justify="space-between"
+                textValue="More Options"
+              >
+                <Menu.ItemTitle>More Options (submenu 1)</Menu.ItemTitle>
+                <ChevronRight size={14} color="$color10" />
+              </Menu.SubTrigger>
+
+              <Menu.Portal zIndex={200}>
+                <Menu.SubContent
+                  data-testid="submenu-content-1"
+                  bg="$background"
+                  p="$2"
+                  minWidth={180}
+                  borderWidth={1}
+                  borderColor="$borderColor"
+                  elevation="$3"
+                >
+                  <Menu.Item
+                    data-testid="submenu-1-item-1"
+                    key="sub1item-1"
+                    textValue="Sub Item 1"
+                  >
+                    <Menu.ItemTitle>Sub Item 1</Menu.ItemTitle>
+                  </Menu.Item>
+                  <Menu.Item
+                    data-testid="submenu-1-item-2"
+                    key="sub1item-2"
+                    textValue="Sub Item 2"
+                  >
+                    <Menu.ItemTitle>Sub Item 2</Menu.ItemTitle>
+                  </Menu.Item>
+                </Menu.SubContent>
+              </Menu.Portal>
+            </Menu.Sub>
+
+            {/* Second submenu trigger right below the first one - this is the bug scenario */}
+            <Menu.Sub placement="right-start">
+              <Menu.SubTrigger
+                data-testid="submenu-trigger-2"
+                key="submenu-trigger-2"
+                justify="space-between"
+                textValue="Another Submenu"
+              >
+                <Menu.ItemTitle>Another Submenu (submenu 2)</Menu.ItemTitle>
+                <ChevronRight size={14} color="$color10" />
+              </Menu.SubTrigger>
+
+              <Menu.Portal zIndex={200}>
+                <Menu.SubContent
+                  data-testid="submenu-content-2"
+                  bg="$background"
+                  p="$2"
+                  minWidth={180}
+                  borderWidth={1}
+                  borderColor="$borderColor"
+                  elevation="$3"
+                >
+                  <Menu.Item
+                    data-testid="submenu-2-item-1"
+                    key="sub2item-1"
+                    textValue="Sub 2 Item 1"
+                  >
+                    <Menu.ItemTitle>Sub 2 Item 1</Menu.ItemTitle>
+                  </Menu.Item>
+                </Menu.SubContent>
+              </Menu.Portal>
+            </Menu.Sub>
+
+            <Menu.Item data-testid="menu-item-3" key="item-3" textValue="Item Three">
+              <Menu.ItemTitle>Item Three (below submenus)</Menu.ItemTitle>
+            </Menu.Item>
+
+            <Menu.Item data-testid="menu-item-4" key="item-4" textValue="Item Four">
+              <Menu.ItemTitle>Item Four</Menu.ItemTitle>
+            </Menu.Item>
+          </Menu.Content>
+        </Menu.Portal>
+      </Menu>
+
+      {/* Area to move mouse to when leaving menu */}
+      <YStack
+        data-testid="outside-area"
+        padding="$4"
+        backgroundColor="$backgroundHover"
+        marginTop="$8"
+      >
+        <Text>Move mouse here to leave menu</Text>
+      </YStack>
+    </YStack>
+  )
+}

package/src/usecases/MenuHighlightCase.tsx

@@ -0,0 +1,44 @@
+import { Menu } from '@hanzogui/menu'
+import { Button, YStack, Text } from '@hanzo/gui'
+
+/**
+ * Menu highlight test case
+ * Tests that hover and keyboard focus show unified highlighting
+ * without conflicts (double highlighting when switching between mouse/keyboard)
+ */
+export function MenuHighlightCase() {
+  return (
+    <YStack padding="$4" gap="$4" alignItems="flex-start">
+      <Text>Test: hover and keyboard navigation should show same highlight</Text>
+
+      <Menu placement="bottom-start">
+        <Menu.Trigger asChild>
+          <Button data-testid="menu-trigger">Open Menu</Button>
+        </Menu.Trigger>
+
+        <Menu.Portal zIndex={100}>
+          <Menu.Content
+            data-testid="menu-content"
+            p="$2"
+            minWidth={200}
+            borderWidth={1}
+            borderColor="$borderColor"
+            elevation="$3"
+          >
+            <Menu.Item data-testid="menu-item-1" key="item-1" textValue="Item One">
+              <Menu.ItemTitle>Item One</Menu.ItemTitle>
+            </Menu.Item>
+
+            <Menu.Item data-testid="menu-item-2" key="item-2" textValue="Item Two">
+              <Menu.ItemTitle>Item Two</Menu.ItemTitle>
+            </Menu.Item>
+
+            <Menu.Item data-testid="menu-item-3" key="item-3" textValue="Item Three">
+              <Menu.ItemTitle>Item Three</Menu.ItemTitle>
+            </Menu.Item>
+          </Menu.Content>
+        </Menu.Portal>
+      </Menu>
+    </YStack>
+  )
+}

package/src/usecases/MenuItemFocusCase.tsx

@@ -0,0 +1,79 @@
+import { Menu } from '@hanzogui/menu'
+import React from 'react'
+import { Button, Input, YStack } from '@hanzo/gui'
+
+/**
+ * Menu item focus preservation test case
+ * Tests that when a menu item's onPress focuses another element,
+ * that element keeps focus instead of returning to the trigger
+ */
+
+export function MenuItemFocusCase() {
+  const inputRef = React.useRef<HTMLInputElement>(null!)
+  const [showInput, setShowInput] = React.useState(false)
+
+  return (
+    <YStack padding="$4" gap="$4">
+      <Menu placement="bottom-start">
+        <Menu.Trigger asChild>
+          <Button data-testid="menu-trigger" size="$4">
+            Open Menu
+          </Button>
+        </Menu.Trigger>
+
+        <Menu.Portal zIndex={100}>
+          <Menu.Content
+            data-testid="menu-content"
+            p="$2"
+            minW={200}
+            borderWidth={1}
+            borderColor="$borderColor"
+            elevation="$3"
+          >
+            <Menu.Item
+              data-testid="focus-input-item"
+              key="focus-input"
+              textValue="Focus Input"
+              style={{ paddingHorizontal: 8, paddingVertical: 6, borderRadius: 4 }}
+              focusStyle={{ bg: '$backgroundHover' }}
+              onPress={() => {
+                // show input - the autoFocus should handle focusing
+                setShowInput(true)
+              }}
+            >
+              <Menu.ItemTitle>Focus Input</Menu.ItemTitle>
+            </Menu.Item>
+
+            <Menu.Item
+              data-testid="focus-existing-item"
+              key="focus-existing"
+              textValue="Focus Existing"
+              style={{ paddingHorizontal: 8, paddingVertical: 6, borderRadius: 4 }}
+              focusStyle={{ bg: '$backgroundHover' }}
+              onPress={() => {
+                // focus the already-visible input
+                const input = document.querySelector(
+                  '[data-testid="always-visible-input"]'
+                ) as HTMLInputElement
+                input?.focus()
+              }}
+            >
+              <Menu.ItemTitle>Focus Existing Input</Menu.ItemTitle>
+            </Menu.Item>
+          </Menu.Content>
+        </Menu.Portal>
+      </Menu>
+
+      {showInput && (
+        <Input
+          ref={inputRef as any}
+          data-testid="dynamic-input"
+          placeholder="I should be focused"
+          autoFocus
+        />
+      )}
+
+      <Input data-testid="always-visible-input" placeholder="Always visible input" />
+    </YStack>
+  )
+}