@hanzogui/kitchen-sink 3.0.5

package/tests/Popover.animated.test.tsx

@@ -0,0 +1,234 @@
+import { expect, test } from '@playwright/test'
+
+import { setupPage } from './test-utils'
+
+test.beforeEach(async ({ page }) => {
+  await setupPage(page, { name: 'PopoverCase', type: 'useCase' })
+})
+
+// Test simple popover functionality
+test('simple popover opens and closes', async ({ page }) => {
+  // Wait for page to load
+  await page.waitForLoadState('networkidle')
+
+  const trigger = page.locator('#simple-popover-trigger')
+  const content = page.locator('#simple-popover-content')
+  const closeButton = page.locator('#simple-popover-close')
+
+  // Check initial state
+  await expect(trigger).toBeVisible()
+  await expect(content).not.toBeVisible()
+
+  // Click trigger to open popover
+  await trigger.click()
+
+  // Wait for content to be visible
+  await expect(content).toBeVisible({ timeout: 5000 })
+
+  // Click close button
+  await closeButton.click()
+
+  // Verify popover is closed
+  await expect(content).not.toBeVisible()
+})
+
+// Test basic popover with icon trigger
+test('basic popover with icon trigger', async ({ page }) => {
+  // Wait for page to load
+  await page.waitForLoadState('networkidle')
+
+  const trigger = page.locator('#popover-bottom-trigger')
+  const content = page.locator('#popover-bottom-content')
+  const input = page.locator('#popover-bottom-input')
+  const closeButton = page.locator('#popover-bottom-close')
+
+  // Check initial state
+  await expect(trigger).toBeVisible()
+  await expect(content).not.toBeVisible()
+
+  // Click trigger to open popover
+  await trigger.click()
+
+  // Wait for enter animation to start
+  await page.waitForTimeout(100)
+
+  // Wait for content to be visible
+  await expect(content).toBeVisible({ timeout: 5000 })
+
+  // Click close button
+  await closeButton.click()
+
+  // Wait for exit animation
+  await page.waitForTimeout(500)
+
+  // Verify popover is closed
+  await expect(content).not.toBeVisible()
+})
+
+// Test popover placement variations
+test('popover placement variations', async ({ page }) => {
+  // Wait for page to load
+  await page.waitForLoadState('networkidle')
+
+  const placements = ['left', 'top', 'right']
+
+  for (const placement of placements) {
+    const trigger = page.locator(`#popover-${placement}-trigger`)
+    const content = page.locator(`#popover-${placement}-content`)
+
+    // Check initial state
+    await expect(trigger).toBeVisible()
+    await expect(content).not.toBeVisible()
+
+    // Click trigger to open popover
+    await trigger.click()
+
+    // Wait for enter animation to start
+    await page.waitForTimeout(100)
+
+    // Wait for content to be visible
+    await expect(content).toBeVisible({ timeout: 5000 })
+
+    // Close by clicking outside (ESC key)
+    await page.keyboard.press('Escape')
+
+    // Wait for exit animation to complete
+    await page.waitForTimeout(500)
+
+    // Verify popover is closed
+    await expect(content).not.toBeVisible()
+  }
+})
+
+// Test popover with keyboard navigation
+test('popover keyboard navigation', async ({ page }) => {
+  // Wait for page to load
+  await page.waitForLoadState('networkidle')
+
+  const trigger = page.locator('#simple-popover-trigger')
+  const content = page.locator('#simple-popover-content')
+
+  // Focus trigger and open with Enter key
+  await trigger.focus()
+  await page.keyboard.press('Enter')
+
+  // Wait for content to be visible
+  await expect(content).toBeVisible({ timeout: 5000 })
+
+  // Close with Escape key
+  await page.keyboard.press('Escape')
+
+  // Verify popover is closed
+  await expect(content).not.toBeVisible()
+})
+
+// Test popover accessibility
+test('popover accessibility attributes', async ({ page }) => {
+  // Wait for page to load
+  await page.waitForLoadState('networkidle')
+
+  const trigger = page.locator('#simple-popover-trigger')
+  const content = page.locator('#simple-popover-content')
+
+  // Check initial state
+  await expect(trigger).toHaveAttribute('aria-expanded', 'false')
+
+  // Open popover
+  await trigger.click()
+  await expect(content).toBeVisible({ timeout: 5000 })
+
+  // Check expanded state
+  await expect(trigger).toHaveAttribute('aria-expanded', 'true')
+
+  // Close popover
+  await page.keyboard.press('Escape')
+  await expect(content).not.toBeVisible()
+
+  // Check collapsed state
+  await expect(trigger).toHaveAttribute('aria-expanded', 'false')
+})
+
+// Test multiple popovers behavior
+test('multiple popovers - opening one closes others', async ({ page }) => {
+  // Wait for page to load
+  await page.waitForLoadState('networkidle')
+
+  const leftTrigger = page.locator('#popover-left-trigger')
+  const leftContent = page.locator('#popover-left-content')
+  const rightTrigger = page.locator('#popover-right-trigger')
+  const rightContent = page.locator('#popover-right-content')
+  const topTrigger = page.locator('#popover-top-trigger')
+  const topContent = page.locator('#popover-top-content')
+
+  // Check initial state - all popovers should be closed
+  await expect(leftContent).not.toBeVisible()
+  await expect(rightContent).not.toBeVisible()
+  await expect(topContent).not.toBeVisible()
+
+  // Open first popover (left)
+  await leftTrigger.click()
+  await page.waitForTimeout(100) // Wait for enter animation
+  await expect(leftContent).toBeVisible({ timeout: 5000 })
+  await expect(rightContent).not.toBeVisible()
+  await expect(topContent).not.toBeVisible()
+
+  // Open second popover (right) - should close the first one
+  await rightTrigger.click()
+  await page.waitForTimeout(600) // Wait for previous exit + new enter animations
+  await expect(leftContent).not.toBeVisible()
+  await expect(rightContent).toBeVisible({ timeout: 5000 })
+  await expect(topContent).not.toBeVisible()
+
+  // Open third popover (top) - should close the second one
+  await topTrigger.click()
+  await page.waitForTimeout(600) // Wait for previous exit + new enter animations
+  await expect(leftContent).not.toBeVisible()
+  await expect(rightContent).not.toBeVisible()
+  await expect(topContent).toBeVisible({ timeout: 5000 })
+
+  // Close the top popover
+  await page.keyboard.press('Escape')
+  await page.waitForTimeout(500) // Wait for exit animation
+  await expect(leftContent).not.toBeVisible()
+  await expect(rightContent).not.toBeVisible()
+  await expect(topContent).not.toBeVisible()
+})
+
+// Test multiple popovers with simple popover
+test('multiple popovers - simple popover with others', async ({ page }) => {
+  // Wait for page to load
+  await page.waitForLoadState('networkidle')
+
+  const simpleTrigger = page.locator('#simple-popover-trigger')
+  const simpleContent = page.locator('#simple-popover-content')
+  const leftTrigger = page.locator('#popover-left-trigger')
+  const leftContent = page.locator('#popover-left-content')
+
+  // Check initial state
+  await expect(simpleContent).not.toBeVisible()
+  await expect(leftContent).not.toBeVisible()
+
+  // Open simple popover
+  await simpleTrigger.click()
+  await page.waitForTimeout(100) // Wait for enter animation
+  await expect(simpleContent).toBeVisible({ timeout: 5000 })
+  await expect(leftContent).not.toBeVisible()
+
+  // Open left popover - should close simple popover
+  await leftTrigger.click()
+  await page.waitForTimeout(600) // Wait for previous exit + new enter animations
+  await expect(simpleContent).not.toBeVisible()
+  await expect(leftContent).toBeVisible({ timeout: 5000 })
+
+  // Open simple popover again - should close left popover
+  await simpleTrigger.click()
+  await page.waitForTimeout(600) // Wait for previous exit + new enter animations
+  await expect(simpleContent).toBeVisible({ timeout: 5000 })
+  await expect(leftContent).not.toBeVisible()
+
+  // Close simple popover
+  await page.keyboard.press('Escape')
+  await page.waitForTimeout(500) // Wait for exit animation
+  await expect(simpleContent).not.toBeVisible()
+  await expect(leftContent).not.toBeVisible()
+})

package/tests/PopoverAndMenuMultiTrigger.test.tsx

@@ -0,0 +1,184 @@
+import { expect, test, type Page } from '@playwright/test'
+import { getBoundingRect, setupPage } from './test-utils'
+
+// shared multi-trigger tests for both Popover and Menu
+// validates render isolation, position re-anchoring, state tracking,
+// focus return, and rapid cycling — the same infra backs both components
+
+function parseRenderCount(text: string | null): number {
+  if (!text) return 0
+  const match = text.match(/renders:\s*(\d+)/)
+  return match ? Number(match[1]) : 0
+}
+
+// abstracts the common interaction + assertion pattern for any floating element
+// with multiple triggers, regardless of whether it's Popover or Menu
+type MultiTriggerHarness = {
+  prefix: string // "pop" | "menu"
+  contentTestId: string
+  triggerCount: number
+  open: (page: Page, idx: number) => Promise<void>
+  close: (page: Page) => Promise<void>
+}
+
+const popoverHarness: MultiTriggerHarness = {
+  prefix: 'pop',
+  contentTestId: 'pop-content',
+  triggerCount: 3,
+  open: async (page, idx) => {
+    await page.getByTestId(`pop-trigger-${idx}`).click()
+    await page.waitForTimeout(300)
+  },
+  close: async (page) => {
+    // use Escape (same as Menu) so focus returns to trigger
+    await page.keyboard.press('Escape')
+    await page.waitForTimeout(300)
+  },
+}
+
+const menuHarness: MultiTriggerHarness = {
+  prefix: 'menu',
+  contentTestId: 'menu-content',
+  triggerCount: 3,
+  open: async (page, idx) => {
+    await page.getByTestId(`menu-trigger-${idx}`).click()
+    await page.waitForTimeout(300)
+  },
+  close: async (page) => {
+    await page.keyboard.press('Escape')
+    await page.waitForTimeout(300)
+  },
+}
+
+function multiTriggerSuite(h: MultiTriggerHarness) {
+  const triggerTestId = (idx: number) => `${h.prefix}-trigger-${idx}`
+
+  test(`[${h.prefix}] only the active trigger re-renders`, async ({ page }) => {
+    const getRenderCounts = async () => {
+      const counts: number[] = []
+      for (let i = 1; i <= h.triggerCount; i++) {
+        counts.push(
+          parseRenderCount(
+            await page.getByTestId(`${triggerTestId(i)}-render-count`).textContent()
+          )
+        )
+      }
+      return counts
+    }
+
+    const initial = await getRenderCounts()
+
+    // open via trigger 1
+    await h.open(page, 1)
+    await expect(page.getByTestId(h.contentTestId)).toBeVisible()
+
+    const afterOpen = await getRenderCounts()
+    // trigger 2 and 3 should NOT re-render
+    expect(afterOpen[1]).toBe(initial[1])
+    expect(afterOpen[2]).toBe(initial[2])
+
+    // close
+    await h.close(page)
+    await expect(page.getByTestId(h.contentTestId)).not.toBeVisible()
+
+    const afterClose = await getRenderCounts()
+    expect(afterClose[1]).toBe(initial[1])
+    expect(afterClose[2]).toBe(initial[2])
+  })
+
+  test(`[${h.prefix}] content re-anchors when switching triggers`, async ({ page }) => {
+    // open via trigger 1
+    await h.open(page, 1)
+    await expect(page.getByTestId(h.contentTestId)).toBeVisible()
+
+    const trigger1Box = await getBoundingRect(page, `[data-testid="${triggerTestId(1)}"]`)
+    const contentBox1 = await getBoundingRect(page, `[data-testid="${h.contentTestId}"]`)
+    expect(trigger1Box).not.toBeNull()
+    expect(contentBox1).not.toBeNull()
+    expect(Math.abs(contentBox1!.x - trigger1Box!.x)).toBeLessThan(50)
+
+    // close then open via trigger 3
+    await h.close(page)
+    await h.open(page, 3)
+    await expect(page.getByTestId(h.contentTestId)).toBeVisible()
+
+    const trigger3Box = await getBoundingRect(page, `[data-testid="${triggerTestId(3)}"]`)
+    const contentBox3 = await getBoundingRect(page, `[data-testid="${h.contentTestId}"]`)
+    expect(trigger3Box).not.toBeNull()
+    expect(contentBox3).not.toBeNull()
+    expect(Math.abs(contentBox3!.x - trigger3Box!.x)).toBeLessThan(50)
+
+    // content should have moved — trigger 3 is rightward of trigger 1
+    expect(contentBox3!.x).toBeGreaterThan(contentBox1!.x + 20)
+  })
+
+  test(`[${h.prefix}] only the active trigger has data-state=open`, async ({ page }) => {
+    await h.open(page, 2)
+    await expect(page.getByTestId(h.contentTestId)).toBeVisible()
+
+    await expect(page.getByTestId(triggerTestId(1))).toHaveAttribute(
+      'data-state',
+      'closed'
+    )
+    await expect(page.getByTestId(triggerTestId(2))).toHaveAttribute('data-state', 'open')
+    await expect(page.getByTestId(triggerTestId(3))).toHaveAttribute(
+      'data-state',
+      'closed'
+    )
+  })
+
+  test(`[${h.prefix}] close returns focus to active trigger`, async ({ page }) => {
+    const trigger = page.getByTestId(triggerTestId(2))
+    await trigger.click()
+    await page.waitForTimeout(300)
+    await expect(page.getByTestId(h.contentTestId)).toBeVisible()
+
+    await h.close(page)
+    await page.waitForTimeout(300)
+    await expect(trigger).toBeFocused()
+  })
+
+  test(`[${h.prefix}] rapid open/close cycles work reliably`, async ({ page }) => {
+    for (let cycle = 0; cycle < 4; cycle++) {
+      const idx = (cycle % h.triggerCount) + 1
+      await h.open(page, idx)
+      await expect(page.getByTestId(h.contentTestId)).toBeVisible()
+      await h.close(page)
+      await expect(page.getByTestId(h.contentTestId)).not.toBeVisible()
+    }
+  })
+
+  test(`[${h.prefix}] rapid trigger switching re-anchors each time`, async ({ page }) => {
+    for (let idx = 1; idx <= h.triggerCount; idx++) {
+      await h.open(page, idx)
+      await expect(page.getByTestId(h.contentTestId)).toBeVisible()
+
+      const triggerBox = await getBoundingRect(
+        page,
+        `[data-testid="${triggerTestId(idx)}"]`
+      )
+      const contentBox = await getBoundingRect(page, `[data-testid="${h.contentTestId}"]`)
+      expect(Math.abs(contentBox!.x - triggerBox!.x)).toBeLessThan(50)
+
+      await h.close(page)
+    }
+  })
+}
+
+test.describe('Popover & Menu Multi-Trigger', () => {
+  test.beforeEach(async ({ page }) => {
+    await setupPage(page, {
+      name: 'PopoverAndMenuMultiTriggerCase',
+      type: 'useCase',
+      waitExtra: true,
+    })
+  })
+
+  test.describe('Popover', () => {
+    multiTriggerSuite(popoverHarness)
+  })
+
+  test.describe('Menu', () => {
+    multiTriggerSuite(menuHarness)
+  })
+})

package/tests/PopoverAnimatePosition.animated.test.tsx

@@ -0,0 +1,51 @@
+import { expect, test } from '@playwright/test'
+
+import { setupPage } from './test-utils'
+
+test.beforeEach(async ({ page }) => {
+  await setupPage(page, { name: 'PopoverAnimatePositionCase', type: 'useCase' })
+})
+
+// TODO: test passes on actual site but fails here - likely test setup difference
+test.skip('popover with animatePosition shows correct position on re-open', async ({
+  page,
+}) => {
+  await page.waitForLoadState('networkidle')
+
+  const trigger = page.locator('#animate-position-trigger')
+  const content = page.locator('#animate-position-content')
+  const closeButton = page.locator('#animate-position-close')
+
+  await expect(trigger).toBeVisible()
+
+  // first open
+  await trigger.click()
+  await expect(content).toBeVisible({ timeout: 5000 })
+  // wait for animation to settle
+  await page.waitForTimeout(500)
+
+  const box1 = await content.boundingBox()
+
+  // close
+  await closeButton.click()
+  await expect(content).not.toBeVisible({ timeout: 5000 })
+
+  // second open
+  await trigger.click()
+  await expect(content).toBeVisible({ timeout: 5000 })
+  // wait for animation to settle
+  await page.waitForTimeout(500)
+
+  const box2 = await content.boundingBox()
+
+  // verify position is consistent between opens
+  // the x position should be the same (within small tolerance for animation)
+  expect(box1).toBeTruthy()
+  expect(box2).toBeTruthy()
+  if (box1 && box2) {
+    const xDiff = Math.abs(box1.x - box2.x)
+    const yDiff = Math.abs(box1.y - box2.y)
+    expect(xDiff).toBeLessThan(5)
+    expect(yDiff).toBeLessThan(5)
+  }
+})

package/tests/PopoverClickDuringEnter.animated.test.tsx

@@ -0,0 +1,197 @@
+import { expect, test } from '@playwright/test'
+import { setupPage } from './test-utils'
+
+/**
+ * Tests that clicking a hoverable popover trigger while the enter animation
+ * is still playing produces a smooth exit - no snap-back, no re-enter cycle.
+ *
+ * Bug: when clicking during enter, the popover:
+ * 1. Snaps to closed (no animation)
+ * 2. Starts animating back in
+ * 3. Then finally animates out
+ */
+
+test.beforeEach(async ({ page }, testInfo) => {
+  test.skip(
+    testInfo.project.name === 'animated-native',
+    'Native driver does not support hover animations on web'
+  )
+  await setupPage(page, { name: 'PopoverHoverableDelayCase', type: 'useCase' })
+  await page.waitForLoadState('networkidle')
+  await page.waitForTimeout(500)
+})
+
+test('click during enter animation produces smooth exit (no snap-back)', async ({
+  page,
+}) => {
+  const trigger = page.locator('#delay-trigger')
+  const content = page.locator('#delay-content')
+
+  await expect(content).not.toBeVisible()
+
+  // start per-frame opacity sampling
+  await page.evaluate(() => {
+    ;(window as any).__opLog = [] as number[]
+    ;(window as any).__rafOn = true
+    const track = () => {
+      if (!(window as any).__rafOn) return
+      const el = document.getElementById('delay-content')
+      if (el) {
+        ;(window as any).__opLog.push(parseFloat(getComputedStyle(el).opacity))
+      }
+      requestAnimationFrame(track)
+    }
+    requestAnimationFrame(track)
+  })
+
+  // hover to trigger open (delay is 400ms)
+  await trigger.hover()
+  // wait for delay + a bit of animation time
+  await page.waitForTimeout(500)
+
+  // popover should be visible and animating
+  const isVisible = await content.isVisible().catch(() => false)
+  if (!isVisible) {
+    // if not visible yet, wait more
+    await page.waitForTimeout(300)
+  }
+
+  // now click the trigger (should close the popover)
+  await trigger.click()
+
+  // wait for exit animation
+  await page.waitForTimeout(1500)
+
+  // stop sampling
+  await page.evaluate(() => {
+    ;(window as any).__rafOn = false
+  })
+
+  const frames: number[] = await page.evaluate(() => (window as any).__opLog || [])
+
+  console.log(
+    'opacity timeline:',
+    JSON.stringify(frames.slice(0, 40).map((f) => +f.toFixed(3)))
+  )
+
+  if (frames.length < 3) {
+    // not enough data, skip analysis
+    console.log('Not enough frames captured')
+    return
+  }
+
+  // find the peak opacity
+  const peak = Math.max(...frames)
+  const peakIdx = frames.indexOf(peak)
+
+  // look for dips (snap-back indicators)
+  let maxDip = 0
+  for (let i = 1; i < frames.length - 1; i++) {
+    const prev = frames[i - 1]
+    const curr = frames[i]
+    const next = frames[i + 1]
+    if (curr < prev && curr < next) {
+      const dip = Math.min(prev - curr, next - curr)
+      if (dip > maxDip) maxDip = dip
+    }
+  }
+
+  // look for re-enter pattern: after opacity decreases, it increases again significantly
+  let foundDecrease = false
+  let maxReIncrease = 0
+  for (let i = peakIdx + 1; i < frames.length; i++) {
+    if (frames[i] < frames[i - 1] - 0.01) {
+      foundDecrease = true
+    }
+    if (foundDecrease && frames[i] > frames[i - 1] + 0.05) {
+      const increase = frames[i] - frames[i - 1]
+      if (increase > maxReIncrease) maxReIncrease = increase
+    }
+  }
+
+  console.log(`peak: ${peak.toFixed(3)} at frame ${peakIdx}`)
+  console.log(`max dip: ${maxDip.toFixed(3)}`)
+  console.log(`max re-increase after exit starts: ${maxReIncrease.toFixed(3)}`)
+
+  // no significant dip (snap-back)
+  expect(
+    maxDip,
+    `Opacity dip of ${maxDip.toFixed(3)} detected - element snapped back during exit`
+  ).toBeLessThan(0.15)
+
+  // no significant re-increase after exit starts (re-enter)
+  expect(
+    maxReIncrease,
+    `Opacity increased by ${maxReIncrease.toFixed(3)} after exit started - re-enter detected`
+  ).toBeLessThan(0.15)
+})
+
+test('click during mid-enter: transform should not jump', async ({ page }) => {
+  const trigger = page.locator('#delay-trigger')
+  const content = page.locator('#delay-content')
+
+  await expect(content).not.toBeVisible()
+
+  // start per-frame Y position sampling
+  await page.evaluate(() => {
+    ;(window as any).__yLog = [] as number[]
+    ;(window as any).__rafOn = true
+    const track = () => {
+      if (!(window as any).__rafOn) return
+      const el = document.getElementById('delay-content')
+      if (el) {
+        const transform = getComputedStyle(el).transform
+        let y = 0
+        if (transform && transform !== 'none') {
+          const matrix = new DOMMatrix(transform)
+          y = matrix.m42
+        }
+        ;(window as any).__yLog.push(y)
+      }
+      requestAnimationFrame(track)
+    }
+    requestAnimationFrame(track)
+  })
+
+  // hover to trigger open
+  await trigger.hover()
+  await page.waitForTimeout(500)
+
+  const isVisible = await content.isVisible().catch(() => false)
+  if (!isVisible) {
+    await page.waitForTimeout(300)
+  }
+
+  // click to close during enter animation
+  await trigger.click()
+  await page.waitForTimeout(1500)
+
+  await page.evaluate(() => {
+    ;(window as any).__rafOn = false
+  })
+
+  const frames: number[] = await page.evaluate(() => (window as any).__yLog || [])
+
+  console.log(
+    'Y positions:',
+    JSON.stringify(frames.slice(0, 30).map((f) => +f.toFixed(2)))
+  )
+
+  if (frames.length < 3) {
+    console.log('Not enough frames captured')
+    return
+  }
+
+  // check for single-frame jumps
+  let maxJump = 0
+  for (let i = 1; i < frames.length; i++) {
+    const jump = Math.abs(frames[i] - frames[i - 1])
+    if (jump > maxJump) maxJump = jump
+  }
+
+  console.log(`max Y jump: ${maxJump.toFixed(2)}`)
+
+  expect(maxJump, `Y position jumped ${maxJump.toFixed(1)}px in one frame`).toBeLessThan(
+    5
+  )
+})