@hanzogui/kitchen-sink 3.0.5

package/src/usecases/PopoverAndMenuMultiTriggerCase.tsx

@@ -0,0 +1,138 @@
+import { Menu } from '@hanzogui/menu'
+import { memo, useRef } from 'react'
+import {
+  Button,
+  Paragraph,
+  Popover,
+  SizableText,
+  Text,
+  View,
+  XStack,
+  YStack,
+} from '@hanzo/gui'
+
+// tracks render count — must be memoized to isolate from parent re-renders
+const RenderCountingPopoverTrigger = memo(function RenderCountingPopoverTrigger({
+  testId,
+  label,
+  scope,
+}: {
+  testId: string
+  label: string
+  scope: string
+}) {
+  const renderCountRef = useRef(0)
+  renderCountRef.current++
+  return (
+    <View>
+      <Popover.Trigger scope={scope} asChild>
+        <Button data-testid={testId}>{label}</Button>
+      </Popover.Trigger>
+      <Text data-testid={`${testId}-render-count`} fontSize="$1" textAlign="center">
+        renders: {renderCountRef.current}
+      </Text>
+    </View>
+  )
+})
+
+const RenderCountingMenuTrigger = memo(function RenderCountingMenuTrigger({
+  testId,
+  label,
+}: {
+  testId: string
+  label: string
+}) {
+  const renderCountRef = useRef(0)
+  renderCountRef.current++
+  return (
+    <View>
+      <Menu.Trigger asChild>
+        <Button data-testid={testId}>{label}</Button>
+      </Menu.Trigger>
+      <Text data-testid={`${testId}-render-count`} fontSize="$1" textAlign="center">
+        renders: {renderCountRef.current}
+      </Text>
+    </View>
+  )
+})
+
+export function PopoverAndMenuMultiTriggerCase() {
+  return (
+    <YStack flex={1} gap="$8" p="$4" bg="$background">
+      {/* popover section */}
+      <YStack gap="$2">
+        <SizableText fontWeight="bold" data-testid="popover-section-label">
+          Popover multi-trigger
+        </SizableText>
+        <Popover scope="shared-pop" placement="bottom-start" offset={4}>
+          <XStack gap="$4">
+            <RenderCountingPopoverTrigger
+              testId="pop-trigger-1"
+              label="Pop 1"
+              scope="shared-pop"
+            />
+            <RenderCountingPopoverTrigger
+              testId="pop-trigger-2"
+              label="Pop 2"
+              scope="shared-pop"
+            />
+            <RenderCountingPopoverTrigger
+              testId="pop-trigger-3"
+              label="Pop 3"
+              scope="shared-pop"
+            />
+          </XStack>
+
+          <Popover.Content
+            scope="shared-pop"
+            data-testid="pop-content"
+            p="$3"
+            minWidth={160}
+            enterStyle={{ y: -8, opacity: 0 }}
+            exitStyle={{ y: -8, opacity: 0 }}
+          >
+            <Popover.Arrow scope="shared-pop" />
+            <Paragraph data-testid="pop-content-text">Shared popover</Paragraph>
+            <Popover.Close scope="shared-pop" asChild>
+              <Button data-testid="pop-close" size="$2" mt="$2">
+                Close
+              </Button>
+            </Popover.Close>
+          </Popover.Content>
+        </Popover>
+      </YStack>
+
+      {/* menu section */}
+      <YStack gap="$2">
+        <SizableText fontWeight="bold" data-testid="menu-section-label">
+          Menu multi-trigger
+        </SizableText>
+        <Menu placement="bottom-start" offset={4}>
+          <XStack gap="$4">
+            <RenderCountingMenuTrigger testId="menu-trigger-1" label="Menu 1" />
+            <RenderCountingMenuTrigger testId="menu-trigger-2" label="Menu 2" />
+            <RenderCountingMenuTrigger testId="menu-trigger-3" label="Menu 3" />
+          </XStack>
+
+          <Menu.Portal>
+            <Menu.Content
+              data-testid="menu-content"
+              p="$2"
+              minWidth={160}
+              borderWidth={1}
+              borderColor="$borderColor"
+              elevation="$3"
+            >
+              <Menu.Item data-testid="menu-item-a" key="a" textValue="Alpha">
+                <Menu.ItemTitle>Alpha</Menu.ItemTitle>
+              </Menu.Item>
+              <Menu.Item data-testid="menu-item-b" key="b" textValue="Beta">
+                <Menu.ItemTitle>Beta</Menu.ItemTitle>
+              </Menu.Item>
+            </Menu.Content>
+          </Menu.Portal>
+        </Menu>
+      </YStack>
+    </YStack>
+  )
+}

package/src/usecases/PopoverCase.tsx

@@ -0,0 +1,222 @@
+import {
+  ChevronDown,
+  ChevronLeft,
+  ChevronRight,
+  ChevronUp,
+} from '@hanzogui/lucide-icons-2'
+import { useState } from 'react'
+import type { PopoverProps } from '@hanzo/gui'
+import {
+  Adapt,
+  Button,
+  H1,
+  H2,
+  isWeb,
+  Label,
+  Paragraph,
+  Popover,
+  Sheet,
+  XStack,
+  YStack,
+} from '@hanzo/gui'
+
+export function PopoverCase() {
+  const [shouldAdapt, setShouldAdapt] = useState(false)
+
+  return (
+    <YStack gap="$4" padding="$4" maxWidth={1200} margin="auto">
+      <YStack gap="$2">
+        <H1>Popover Component Tests</H1>
+        <Paragraph>
+          This page contains various Popover components for testing different scenarios.
+        </Paragraph>
+      </YStack>
+
+      <YStack gap="$4">
+        <YStack gap="$2">
+          <h2>Basic Popover Tests</h2>
+          <XStack gap="$2" flex={1} justifyContent="center" alignItems="center">
+            <Demo
+              shouldAdapt={shouldAdapt}
+              placement="left"
+              Icon={ChevronLeft}
+              Name="left-popover"
+              dataTestId="popover-left"
+            />
+            <Demo
+              shouldAdapt={shouldAdapt}
+              placement="bottom"
+              Icon={ChevronDown}
+              Name="bottom-popover"
+              dataTestId="popover-bottom"
+            />
+            <Demo
+              shouldAdapt={shouldAdapt}
+              placement="top"
+              Icon={ChevronUp}
+              Name="top-popover"
+              dataTestId="popover-top"
+            />
+            <Demo
+              shouldAdapt={shouldAdapt}
+              placement="right"
+              Icon={ChevronRight}
+              Name="right-popover"
+              dataTestId="popover-right"
+            />
+          </XStack>
+        </YStack>
+
+        <YStack gap="$2">
+          <H2>Simple Popover Test</H2>
+          <SimplePopoverTest />
+        </YStack>
+
+        {!isWeb && (
+          <Button onPress={() => setShouldAdapt(!shouldAdapt)}>
+            Adapt to Sheet: {`${shouldAdapt}`}
+          </Button>
+        )}
+      </YStack>
+    </YStack>
+  )
+}
+
+function Demo({
+  Icon,
+  Name,
+  shouldAdapt,
+  dataTestId,
+  ...props
+}: PopoverProps & {
+  Icon?: any
+  Name?: string
+  shouldAdapt?: boolean
+  dataTestId?: string
+}) {
+  return (
+    <Popover
+      size="$5"
+      allowFlip
+      stayInFrame
+      offset={15}
+      resize
+      data-testid={dataTestId}
+      {...props}
+    >
+      <Popover.Trigger asChild>
+        <Button icon={Icon} id={`${dataTestId}-trigger`} />
+      </Popover.Trigger>
+
+      {shouldAdapt && (
+        <Adapt when="maxMd" platform="touch">
+          <Sheet modal dismissOnSnapToBottom>
+            <Sheet.Frame padding="$4">
+              <Adapt.Contents />
+            </Sheet.Frame>
+            <Sheet.Overlay backgroundColor="$shadowColor" />
+          </Sheet>
+        </Adapt>
+      )}
+
+      <Popover.Content
+        borderWidth={1}
+        borderColor="$borderColor"
+        transition="100ms"
+        width={300}
+        height={300}
+        enterStyle={{
+          y: -10,
+          opacity: 0,
+        }}
+        exitStyle={{
+          y: -10,
+          opacity: 0,
+        }}
+        elevate
+        id={`${dataTestId}-content`}
+      >
+        <Popover.Arrow borderWidth={1} borderColor="$borderColor" />
+
+        <YStack gap="$3">
+          <XStack gap="$3">
+            <Label size="$3" htmlFor={Name}>
+              Name
+            </Label>
+          </XStack>
+
+          <Popover.Close asChild>
+            <Button
+              size="$3"
+              id={`${dataTestId}-close`}
+              onPress={() => {
+                /* Custom code goes here, does not interfere with popover closure */
+              }}
+            >
+              Submit
+            </Button>
+          </Popover.Close>
+        </YStack>
+      </Popover.Content>
+    </Popover>
+  )
+}
+
+function SimplePopoverTest() {
+  return (
+    <Popover>
+      <Popover.Trigger asChild>
+        <Button id="simple-popover-trigger">Simple Popover</Button>
+      </Popover.Trigger>
+      <Popover.Content id="simple-popover-content">
+        <YStack gap="$2">
+          <Paragraph>This is a simple popover</Paragraph>
+          <Popover.Close asChild>
+            <Button size="$2" id="simple-popover-close">
+              Close
+            </Button>
+          </Popover.Close>
+        </YStack>
+      </Popover.Content>
+    </Popover>
+  )
+}
+
+// test case for animatePosition - verifies position is correct on re-open
+export function PopoverAnimatePositionCase() {
+  return (
+    <YStack padding="$4" gap="$4" alignItems="center">
+      <H1>Popover animatePosition Test</H1>
+      <Paragraph>
+        Tests that popover with animatePosition shows at correct position on re-open
+      </Paragraph>
+
+      <XStack paddingLeft={100}>
+        <Popover offset={10}>
+          <Popover.Trigger asChild>
+            <Button id="animate-position-trigger">Open Popover</Button>
+          </Popover.Trigger>
+          <Popover.Content
+            id="animate-position-content"
+            animatePosition
+            transition="quick"
+            enterStyle={{ y: 5, opacity: 0 }}
+            exitStyle={{ y: 5, opacity: 0 }}
+            elevate
+            padding="$4"
+          >
+            <Popover.Arrow />
+            <YStack gap="$2" width={200}>
+              <Paragraph>Popover with animatePosition</Paragraph>
+              <Popover.Close asChild>
+                <Button size="$2" id="animate-position-close">
+                  Close
+                </Button>
+              </Popover.Close>
+            </YStack>
+          </Popover.Content>
+        </Popover>
+      </XStack>
+    </YStack>
+  )
+}

package/src/usecases/PopoverContentStyledPlusAnimations.tsx

@@ -0,0 +1,44 @@
+import { Button, Popover, styled } from '@hanzo/gui'
+
+export function PopoverContentStyledPlusAnimations() {
+  return (
+    <Popover size="$5">
+      <Popover.Trigger asChild>
+        <Button>go</Button>
+      </Popover.Trigger>
+
+      <PopoverStyledContent>
+        <Popover.Arrow borderWidth={1} borderColor="$borderColor" />
+      </PopoverStyledContent>
+    </Popover>
+  )
+}
+
+const PopoverStyledContent = styled(Popover.Content, {
+  name: 'PopoverContent2',
+  elevate: true,
+  bordered: true,
+  p: '$3',
+  rounded: '$3',
+  enterStyle: {
+    opacity: 0,
+    y: -10,
+    x: 0,
+  },
+  exitStyle: {
+    opacity: 0,
+    y: -10,
+    x: 0,
+  },
+  x: 0,
+  y: 0,
+  opacity: 1,
+  transition: [
+    'quick',
+    {
+      opacity: {
+        overshootClamping: true,
+      },
+    },
+  ],
+})

package/src/usecases/PopoverFocusScopeCase.tsx

@@ -0,0 +1,171 @@
+import React from 'react'
+import { Popover, Button, Input, Label, YStack, XStack, TextArea } from '@hanzo/gui'
+import { ChevronDown } from '@hanzogui/lucide-icons-2'
+
+export function PopoverFocusScopeCase() {
+  return (
+    <YStack padding="$4" gap="$4">
+      {/* Basic Popover with Focus Trap */}
+      <Popover>
+        <Popover.Trigger asChild>
+          <Button data-testid="basic-popover-trigger" iconAfter={ChevronDown}>
+            Open Basic Popover
+          </Button>
+        </Popover.Trigger>
+        <Popover.Content
+          enterStyle={{ y: -10, opacity: 0 }}
+          exitStyle={{ y: -10, opacity: 0 }}
+          elevate
+          transition={[
+            'quick',
+            {
+              opacity: {
+                overshootClamping: true,
+              },
+            },
+          ]}
+        >
+          <YStack gap="$3" padding="$4" data-testid="basic-popover-content">
+            <Label htmlFor="popover-name">Name</Label>
+            <Input
+              id="popover-name"
+              data-testid="popover-name-input"
+              placeholder="Enter your name"
+              autoComplete="name"
+            />
+
+            <Label htmlFor="popover-email">Email</Label>
+            <Input
+              id="popover-email"
+              data-testid="popover-email-input"
+              placeholder="your@email.com"
+              autoComplete="email"
+            />
+
+            <Label htmlFor="popover-notes">Notes</Label>
+            <TextArea
+              id="popover-notes"
+              data-testid="popover-notes-textarea"
+              placeholder="Add some notes..."
+              size="$4"
+            />
+
+            <XStack gap="$3" justifyContent="flex-end">
+              <Popover.Close asChild>
+                <Button variant="outlined" data-testid="popover-cancel-button">
+                  Cancel
+                </Button>
+              </Popover.Close>
+              <Button theme="blue" data-testid="popover-save-button">
+                Save
+              </Button>
+            </XStack>
+          </YStack>
+        </Popover.Content>
+      </Popover>
+
+      {/* Popover without Focus Trap */}
+      <Popover>
+        <Popover.Trigger asChild>
+          <Button data-testid="no-trap-popover-trigger" iconAfter={ChevronDown}>
+            Open Popover (No Focus Trap)
+          </Button>
+        </Popover.Trigger>
+        <Popover.Content
+          trapFocus={false}
+          enterStyle={{ y: -10, opacity: 0 }}
+          exitStyle={{ y: -10, opacity: 0 }}
+          elevate
+          transition={[
+            'quick',
+            {
+              opacity: {
+                overshootClamping: true,
+              },
+            },
+          ]}
+        >
+          <YStack gap="$3" padding="$4" data-testid="no-trap-popover-content">
+            <Label htmlFor="no-trap-input">Input Field</Label>
+            <Input
+              id="no-trap-input"
+              data-testid="no-trap-input"
+              placeholder="Focus can leave this popover"
+            />
+
+            <Popover.Close asChild>
+              <Button data-testid="no-trap-close-button">Close</Button>
+            </Popover.Close>
+          </YStack>
+        </Popover.Content>
+      </Popover>
+
+      {/* Nested Popovers */}
+      <Popover>
+        <Popover.Trigger asChild>
+          <Button data-testid="parent-popover-trigger" iconAfter={ChevronDown}>
+            Open Nested Popovers
+          </Button>
+        </Popover.Trigger>
+        <Popover.Content
+          enterStyle={{ y: -10, opacity: 0 }}
+          exitStyle={{ y: -10, opacity: 0 }}
+          elevate
+          transition={[
+            'quick',
+            {
+              opacity: {
+                overshootClamping: true,
+              },
+            },
+          ]}
+        >
+          <YStack gap="$3" padding="$4" data-testid="parent-popover-content">
+            <Label htmlFor="parent-popover-input">Parent Input</Label>
+            <Input
+              id="parent-popover-input"
+              data-testid="parent-popover-input"
+              placeholder="Parent popover input"
+            />
+
+            {/* Nested Popover */}
+            <Popover>
+              <Popover.Trigger asChild>
+                <Button data-testid="nested-popover-trigger" size="$3">
+                  Open Nested
+                </Button>
+              </Popover.Trigger>
+              <Popover.Content
+                enterStyle={{ y: -10, opacity: 0 }}
+                exitStyle={{ y: -10, opacity: 0 }}
+                elevate
+                transition={[
+                  'quick',
+                  {
+                    opacity: {
+                      overshootClamping: true,
+                    },
+                  },
+                ]}
+              >
+                <YStack gap="$3" padding="$3" data-testid="nested-popover-content">
+                  <Input data-testid="nested-popover-input" placeholder="Nested input" />
+                  <Popover.Close asChild>
+                    <Button data-testid="nested-popover-close" size="$3">
+                      Close Nested
+                    </Button>
+                  </Popover.Close>
+                </YStack>
+                <Popover.Arrow />
+              </Popover.Content>
+            </Popover>
+
+            <Popover.Close asChild>
+              <Button data-testid="parent-popover-close">Close Parent</Button>
+            </Popover.Close>
+          </YStack>
+        </Popover.Content>
+      </Popover>
+    </YStack>
+  )
+}