@hanzogui/kitchen-sink 3.0.5

package/src/usecases/MenuItemPseudoOverrideCase.tsx

@@ -0,0 +1,270 @@
+import { Menu } from '@hanzogui/menu'
+import { Button, styled, YStack } from '@hanzo/gui'
+
+// the actual pattern the user is using - styled() with styles object
+// this creates a styled component where the pseudo styles should override the variant defaults
+const menuItemStyleForStyled = {
+  // no unstyled: true - relying on custom pseudo styles
+  gap: '$2.5',
+  px: '$2',
+  height: 36,
+  alignItems: 'center',
+  cursor: 'default',
+  flexDirection: 'row',
+  borderRadius: '$2',
+  backgroundColor: 'rgba(0,0,0,0)',
+  hoverStyle: {
+    backgroundColor: 'rgb(0, 0, 255)',
+  },
+  pressStyle: {
+    backgroundColor: 'rgb(0, 255, 0)',
+  },
+  focusStyle: {
+    backgroundColor: 'rgb(255, 0, 0)',
+  },
+} as const
+
+const menuItemStyleForStyledWithUnstyled = {
+  ...menuItemStyleForStyled,
+  unstyled: true,
+} as const
+
+// styled component WITHOUT unstyled - should use custom pseudo styles
+const StyledMenuItem = styled(Menu.Item, menuItemStyleForStyled)
+
+// styled component WITH unstyled - should use custom pseudo styles
+const StyledMenuItemWithUnstyled = styled(Menu.Item, menuItemStyleForStyledWithUnstyled)
+
+// simulates the user's pattern - spreading a style object that includes both
+// base styles and pseudo styles, and expects pseudo styles to override defaults
+const menuItemStyle = {
+  // note: no unstyled: true here - this is the bug scenario
+  gap: '$2.5',
+  px: '$2',
+  height: 36,
+  alignItems: 'center',
+  cursor: 'default',
+  flexDirection: 'row',
+  borderRadius: '$2',
+  backgroundColor: 'rgba(0,0,0,0)',
+  hoverStyle: {
+    backgroundColor: 'rgb(0, 0, 255)',
+  },
+  pressStyle: {
+    backgroundColor: 'rgb(0, 255, 0)',
+  },
+  focusStyle: {
+    backgroundColor: 'rgb(255, 0, 0)',
+  },
+} as const
+
+const menuItemStyleWithUnstyled = {
+  ...menuItemStyle,
+  unstyled: true,
+} as const
+
+// user's actual pattern with shorthands
+const menuItemStyleWithShorthands = {
+  // no unstyled: true
+  gap: '$2.5',
+  px: '$2',
+  height: 36,
+  alignItems: 'center',
+  cursor: 'default',
+  flexDirection: 'row',
+  borderRadius: '$2',
+  bg: 'rgba(0,0,0,0)',
+  hoverStyle: {
+    bg: 'rgb(0, 0, 255)',
+  },
+  pressStyle: {
+    bg: 'rgb(0, 255, 0)',
+  },
+  focusStyle: {
+    bg: 'rgb(255, 0, 0)',
+  },
+} as const
+
+const menuItemStyleWithShorthandsUnstyled = {
+  ...menuItemStyleWithShorthands,
+  unstyled: true,
+} as const
+
+/**
+ * Menu Item Pseudo Style Override Test Case
+ *
+ * Tests that user-provided pseudo styles (focusStyle, pressStyle, hoverStyle)
+ * override the default variant pseudo styles when unstyled is NOT set.
+ *
+ * Bug: When unstyled is not true, the variant's default pseudo styles were
+ * overriding user-provided pseudo styles due to style importance merging issues.
+ */
+export function MenuItemPseudoOverrideCase() {
+  return (
+    <YStack padding="$4" gap="$4">
+      {/* Test 1: Spread style object WITHOUT unstyled - should still use custom pseudos */}
+      <Menu placement="bottom-start" offset={8}>
+        <Menu.Trigger asChild>
+          <Button data-testid="spread-trigger" size="$4">
+            Open Menu (Spread Style)
+          </Button>
+        </Menu.Trigger>
+
+        <Menu.Portal>
+          <Menu.Content data-testid="spread-content">
+            <Menu.Item key="item-1" data-testid="spread-item" {...menuItemStyle}>
+              <Menu.ItemTitle>Spread Style Item</Menu.ItemTitle>
+            </Menu.Item>
+          </Menu.Content>
+        </Menu.Portal>
+      </Menu>
+
+      {/* Test 2: Spread style object WITH unstyled - works as expected */}
+      <Menu placement="bottom-start" offset={8}>
+        <Menu.Trigger asChild>
+          <Button data-testid="spread-unstyled-trigger" size="$4">
+            Open Unstyled Menu (Spread)
+          </Button>
+        </Menu.Trigger>
+
+        <Menu.Portal>
+          <Menu.Content data-testid="spread-unstyled-content">
+            <Menu.Item
+              key="item-1"
+              data-testid="spread-unstyled-item"
+              {...menuItemStyleWithUnstyled}
+            >
+              <Menu.ItemTitle>Spread Unstyled Item</Menu.ItemTitle>
+            </Menu.Item>
+          </Menu.Content>
+        </Menu.Portal>
+      </Menu>
+
+      {/* Test 3: Direct props - custom pseudo styles WITHOUT unstyled */}
+      <Menu placement="bottom-start" offset={8}>
+        <Menu.Trigger asChild>
+          <Button data-testid="custom-trigger" size="$4">
+            Open Menu (Direct Props)
+          </Button>
+        </Menu.Trigger>
+
+        <Menu.Portal>
+          <Menu.Content data-testid="custom-content">
+            <Menu.Item
+              key="item-1"
+              data-testid="custom-item"
+              focusStyle={{ backgroundColor: 'rgb(255, 0, 0)' }}
+              pressStyle={{ backgroundColor: 'rgb(0, 255, 0)' }}
+              hoverStyle={{ backgroundColor: 'rgb(0, 0, 255)' }}
+            >
+              <Menu.ItemTitle>Custom Pseudo Item</Menu.ItemTitle>
+            </Menu.Item>
+            <Menu.Item key="item-2" data-testid="default-item">
+              <Menu.ItemTitle>Default Item</Menu.ItemTitle>
+            </Menu.Item>
+          </Menu.Content>
+        </Menu.Portal>
+      </Menu>
+
+      {/* Test 4: With unstyled=true and custom pseudo styles - for comparison */}
+      <Menu placement="bottom-start" offset={8}>
+        <Menu.Trigger asChild>
+          <Button data-testid="unstyled-trigger" size="$4">
+            Open Unstyled Menu
+          </Button>
+        </Menu.Trigger>
+
+        <Menu.Portal>
+          <Menu.Content data-testid="unstyled-content">
+            <Menu.Item
+              key="item-1"
+              data-testid="unstyled-item"
+              unstyled
+              focusStyle={{ backgroundColor: 'rgb(255, 0, 0)' }}
+              pressStyle={{ backgroundColor: 'rgb(0, 255, 0)' }}
+              hoverStyle={{ backgroundColor: 'rgb(0, 0, 255)' }}
+            >
+              <Menu.ItemTitle>Unstyled Custom Pseudo Item</Menu.ItemTitle>
+            </Menu.Item>
+          </Menu.Content>
+        </Menu.Portal>
+      </Menu>
+
+      {/* Test 5: Shorthands in pseudo styles WITHOUT unstyled */}
+      <Menu placement="bottom-start" offset={8}>
+        <Menu.Trigger asChild>
+          <Button data-testid="shorthand-trigger" size="$4">
+            Open Menu (Shorthands)
+          </Button>
+        </Menu.Trigger>
+
+        <Menu.Portal>
+          <Menu.Content data-testid="shorthand-content">
+            <Menu.Item
+              key="item-1"
+              data-testid="shorthand-item"
+              {...menuItemStyleWithShorthands}
+            >
+              <Menu.ItemTitle>Shorthand Style Item</Menu.ItemTitle>
+            </Menu.Item>
+          </Menu.Content>
+        </Menu.Portal>
+      </Menu>
+
+      {/* Test 6: Shorthands in pseudo styles WITH unstyled */}
+      <Menu placement="bottom-start" offset={8}>
+        <Menu.Trigger asChild>
+          <Button data-testid="shorthand-unstyled-trigger" size="$4">
+            Open Unstyled Menu (Shorthands)
+          </Button>
+        </Menu.Trigger>
+
+        <Menu.Portal>
+          <Menu.Content data-testid="shorthand-unstyled-content">
+            <Menu.Item
+              key="item-1"
+              data-testid="shorthand-unstyled-item"
+              {...menuItemStyleWithShorthandsUnstyled}
+            >
+              <Menu.ItemTitle>Shorthand Unstyled Item</Menu.ItemTitle>
+            </Menu.Item>
+          </Menu.Content>
+        </Menu.Portal>
+      </Menu>
+
+      {/* Test 7: styled() component WITHOUT unstyled - the actual user pattern */}
+      <Menu placement="bottom-start" offset={8}>
+        <Menu.Trigger asChild>
+          <Button data-testid="styled-trigger" size="$4">
+            Open Menu (styled() Component)
+          </Button>
+        </Menu.Trigger>
+
+        <Menu.Portal>
+          <Menu.Content data-testid="styled-content">
+            <StyledMenuItem key="item-1" data-testid="styled-item">
+              <Menu.ItemTitle>styled() Item</Menu.ItemTitle>
+            </StyledMenuItem>
+          </Menu.Content>
+        </Menu.Portal>
+      </Menu>
+
+      {/* Test 8: styled() component WITH unstyled */}
+      <Menu placement="bottom-start" offset={8}>
+        <Menu.Trigger asChild>
+          <Button data-testid="styled-unstyled-trigger" size="$4">
+            Open Menu (styled() + unstyled)
+          </Button>
+        </Menu.Trigger>
+
+        <Menu.Portal>
+          <Menu.Content data-testid="styled-unstyled-content">
+            <StyledMenuItemWithUnstyled key="item-1" data-testid="styled-unstyled-item">
+              <Menu.ItemTitle>styled() + unstyled Item</Menu.ItemTitle>
+            </StyledMenuItemWithUnstyled>
+          </Menu.Content>
+        </Menu.Portal>
+      </Menu>
+    </YStack>
+  )
+}

package/src/usecases/MenuMultiTriggerCase.tsx

@@ -0,0 +1,47 @@
+import { Menu } from '@hanzogui/menu'
+import { Button, Text, XStack, YStack } from '@hanzo/gui'
+
+export function MenuMultiTriggerCase() {
+  return (
+    <YStack padding="$4" gap="$4">
+      <Text>Test: 3 triggers sharing one Menu content</Text>
+
+      <Menu placement="bottom-start">
+        <XStack gap="$4">
+          <Menu.Trigger asChild>
+            <Button data-testid="trigger-a">Trigger A</Button>
+          </Menu.Trigger>
+
+          <Menu.Trigger asChild>
+            <Button data-testid="trigger-b">Trigger B</Button>
+          </Menu.Trigger>
+
+          <Menu.Trigger asChild>
+            <Button data-testid="trigger-c">Trigger C</Button>
+          </Menu.Trigger>
+        </XStack>
+
+        <Menu.Portal>
+          <Menu.Content
+            data-testid="menu-content"
+            p="$2"
+            minWidth={180}
+            borderWidth={1}
+            borderColor="$borderColor"
+            elevation="$3"
+          >
+            <Menu.Item data-testid="menu-item-1" key="i1" textValue="Item One">
+              <Menu.ItemTitle>Item One</Menu.ItemTitle>
+            </Menu.Item>
+            <Menu.Item data-testid="menu-item-2" key="i2" textValue="Item Two">
+              <Menu.ItemTitle>Item Two</Menu.ItemTitle>
+            </Menu.Item>
+            <Menu.Item data-testid="menu-item-3" key="i3" textValue="Item Three">
+              <Menu.ItemTitle>Item Three</Menu.ItemTitle>
+            </Menu.Item>
+          </Menu.Content>
+        </Menu.Portal>
+      </Menu>
+    </YStack>
+  )
+}

package/src/usecases/MenuOverflowCase.tsx

@@ -0,0 +1,60 @@
+import { Menu } from '@hanzogui/menu'
+import { Button, YStack } from '@hanzo/gui'
+
+/**
+ * Menu overflow test case
+ * Tests:
+ * - Menu content becomes scrollable when items exceed max height
+ * - Menu does not overflow the page
+ * - Scrollbars are hidden
+ * - Menu items remain keyboard navigable while scrolling
+ */
+
+const ITEM_COUNT = 30
+
+export function MenuOverflowCase() {
+  return (
+    <YStack
+      data-testid="container"
+      $platform-web={{
+        height: '100vh',
+      }}
+      justifyContent="flex-end"
+      padding="$4"
+    >
+      {/* position menu trigger near bottom of page to test overflow behavior */}
+      <Menu placement="top-start" stayInFrame allowFlip>
+        <Menu.Trigger asChild>
+          <Button data-testid="menu-trigger" size="$4">
+            Open Long 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/MenuSubCase.tsx

@@ -0,0 +1,223 @@
+import { ChevronRight } from '@hanzogui/lucide-icons-2'
+import { Menu } from '@hanzogui/menu'
+import React from 'react'
+import { Button, H1, Paragraph, Text, YStack } from '@hanzo/gui'
+
+/**
+ * Menu Submenu Test Case
+ *
+ * Tests the safePolygon behavior when moving from a submenu trigger to submenu content.
+ * The polygon should allow the mouse to move diagonally from trigger to content without
+ * closing the submenu.
+ */
+export function MenuSubCase() {
+  const [subMenuOpen, setSubMenuOpen] = React.useState(false)
+  const [nestedSubOpen, setNestedSubOpen] = React.useState(false)
+  const [lastAction, setLastAction] = React.useState<string>('')
+
+  return (
+    <YStack gap="$4" padding="$4" maxWidth={800} margin="auto">
+      <YStack gap="$2">
+        <H1>Menu Submenu SafePolygon Test</H1>
+        <Paragraph>
+          This tests that the safePolygon logic works correctly when hovering from a
+          submenu trigger to submenu content. Move your mouse diagonally from the trigger
+          to the submenu - it should not close.
+        </Paragraph>
+        <Text id="last-action" color="$color10">
+          Last action: {lastAction || 'None'}
+        </Text>
+        <Text id="submenu-state" color={subMenuOpen ? '$green10' : '$red10'}>
+          Submenu: {subMenuOpen ? 'Open' : 'Closed'}
+        </Text>
+      </YStack>
+
+      <YStack alignItems="flex-start" gap="$4">
+        <Menu allowFlip placement="bottom-start" offset={8}>
+          <Menu.Trigger asChild>
+            <Button id="menu-trigger" size="$4">
+              Open Menu
+            </Button>
+          </Menu.Trigger>
+
+          <Menu.Portal zIndex={100}>
+            <Menu.Content
+              id="menu-content"
+              p="$2"
+              minW={220}
+              borderWidth={1}
+              borderColor="$borderColor"
+              bg="$background"
+              elevation="$3"
+            >
+              <Menu.Item
+                key="menu-item-1"
+                id="menu-item-1"
+                onSelect={() => setLastAction('Item 1 selected')}
+                style={{ paddingHorizontal: 12, paddingVertical: 8, borderRadius: 4 }}
+                focusStyle={{ bg: '$backgroundHover' }}
+              >
+                <Menu.ItemTitle>Item 1 (above trigger)</Menu.ItemTitle>
+              </Menu.Item>
+
+              <Menu.Item
+                key="menu-item-2"
+                id="menu-item-2"
+                onSelect={() => setLastAction('Item 2 selected')}
+                style={{ paddingHorizontal: 12, paddingVertical: 8, borderRadius: 4 }}
+                focusStyle={{ bg: '$backgroundHover' }}
+              >
+                <Menu.ItemTitle>Item 2 (above trigger)</Menu.ItemTitle>
+              </Menu.Item>
+
+              <Menu.Sub
+                open={subMenuOpen}
+                placement="right-start"
+                onOpenChange={(open) => {
+                  setSubMenuOpen(open)
+                  setLastAction(`Submenu ${open ? 'opened' : 'closed'}`)
+                }}
+              >
+                <Menu.SubTrigger
+                  key="submenu-trigger"
+                  id="submenu-trigger"
+                  justify="space-between"
+                  textValue="Actions"
+                  style={{ paddingHorizontal: 12, paddingVertical: 8, borderRadius: 4 }}
+                  focusStyle={{ bg: '$backgroundHover' }}
+                >
+                  <Menu.ItemTitle>Actions (submenu)</Menu.ItemTitle>
+                  <ChevronRight size={14} color="$color10" />
+                </Menu.SubTrigger>
+
+                <Menu.Portal zIndex={200}>
+                  <Menu.SubContent
+                    id="submenu-content"
+                    bg="$background"
+                    p="$2"
+                    minW={180}
+                    borderWidth={1}
+                    borderColor="$borderColor"
+                    elevation="$3"
+                  >
+                    <Menu.Item
+                      key="submenu-item-1"
+                      id="submenu-item-1"
+                      onSelect={() => setLastAction('Sub Item 1 selected')}
+                      style={{
+                        paddingHorizontal: 12,
+                        paddingVertical: 8,
+                        borderRadius: 4,
+                      }}
+                      focusStyle={{ bg: '$backgroundHover' }}
+                    >
+                      <Menu.ItemTitle>Sub Item 1</Menu.ItemTitle>
+                    </Menu.Item>
+
+                    <Menu.Item
+                      key="submenu-item-2"
+                      id="submenu-item-2"
+                      onSelect={() => setLastAction('Sub Item 2 selected')}
+                      style={{
+                        paddingHorizontal: 12,
+                        paddingVertical: 8,
+                        borderRadius: 4,
+                      }}
+                      focusStyle={{ bg: '$backgroundHover' }}
+                    >
+                      <Menu.ItemTitle>Sub Item 2</Menu.ItemTitle>
+                    </Menu.Item>
+
+                    <Menu.Sub
+                      open={nestedSubOpen}
+                      placement="right-start"
+                      onOpenChange={(open) => {
+                        setNestedSubOpen(open)
+                        setLastAction(`Nested submenu ${open ? 'opened' : 'closed'}`)
+                      }}
+                    >
+                      <Menu.SubTrigger
+                        key="nested-submenu-trigger"
+                        id="nested-submenu-trigger"
+                        justify="space-between"
+                        textValue="More"
+                        style={{
+                          paddingHorizontal: 12,
+                          paddingVertical: 8,
+                          borderRadius: 4,
+                        }}
+                        focusStyle={{ bg: '$backgroundHover' }}
+                      >
+                        <Menu.ItemTitle>More (nested)</Menu.ItemTitle>
+                        <ChevronRight size={14} color="$color10" />
+                      </Menu.SubTrigger>
+
+                      <Menu.Portal zIndex={300}>
+                        <Menu.SubContent
+                          id="nested-submenu-content"
+                          bg="$background"
+                          p="$2"
+                          minW={160}
+                          borderWidth={1}
+                          borderColor="$borderColor"
+                          elevation="$3"
+                        >
+                          <Menu.Item
+                            key="nested-submenu-item-1"
+                            id="nested-submenu-item-1"
+                            onSelect={() => setLastAction('Nested Item 1 selected')}
+                            style={{
+                              paddingHorizontal: 12,
+                              paddingVertical: 8,
+                              borderRadius: 4,
+                            }}
+                            focusStyle={{ bg: '$backgroundHover' }}
+                          >
+                            <Menu.ItemTitle>Nested Item 1</Menu.ItemTitle>
+                          </Menu.Item>
+                          <Menu.Item
+                            key="nested-submenu-item-2"
+                            id="nested-submenu-item-2"
+                            onSelect={() => setLastAction('Nested Item 2 selected')}
+                            style={{
+                              paddingHorizontal: 12,
+                              paddingVertical: 8,
+                              borderRadius: 4,
+                            }}
+                            focusStyle={{ bg: '$backgroundHover' }}
+                          >
+                            <Menu.ItemTitle>Nested Item 2</Menu.ItemTitle>
+                          </Menu.Item>
+                        </Menu.SubContent>
+                      </Menu.Portal>
+                    </Menu.Sub>
+                  </Menu.SubContent>
+                </Menu.Portal>
+              </Menu.Sub>
+
+              <Menu.Item
+                key="menu-item-3"
+                id="menu-item-3"
+                onSelect={() => setLastAction('Item 3 selected')}
+                style={{ paddingHorizontal: 12, paddingVertical: 8, borderRadius: 4 }}
+                focusStyle={{ bg: '$backgroundHover' }}
+              >
+                <Menu.ItemTitle>Item 3 (below trigger)</Menu.ItemTitle>
+              </Menu.Item>
+
+              <Menu.Item
+                key="menu-item-4"
+                id="menu-item-4"
+                onSelect={() => setLastAction('Item 4 selected')}
+                style={{ paddingHorizontal: 12, paddingVertical: 8, borderRadius: 4 }}
+                focusStyle={{ bg: '$backgroundHover' }}
+              >
+                <Menu.ItemTitle>Item 4 (below trigger)</Menu.ItemTitle>
+              </Menu.Item>
+            </Menu.Content>
+          </Menu.Portal>
+        </Menu>
+      </YStack>
+    </YStack>
+  )
+}