@hanzogui/kitchen-sink 3.0.5

package/tests/PopoverHoverableDisableClick.test.tsx

@@ -0,0 +1,106 @@
+import { expect, test } from '@playwright/test'
+import { setupPage } from './test-utils'
+
+/**
+ * Tests the disableClick prop on Popover.Trigger.
+ *
+ * Bug: when a hoverable popover is open and the user clicks the trigger,
+ * the browser fires pointerdown then click. If onPressIn calls setOpen(false),
+ * React re-renders between the two events. The built-in onPress handler then
+ * reads the updated open=false and toggles it back to true, causing a
+ * close → re-open → close oscillation (visible as a flash/glitch).
+ *
+ * Fix: disableClick prop suppresses the built-in click toggle on the trigger,
+ * allowing the user to control open/close entirely through their own handlers.
+ */
+
+test.beforeEach(async ({ page }) => {
+  await setupPage(page, {
+    name: 'PopoverHoverableDisableClickCase',
+    type: 'useCase',
+  })
+  await page.waitForLoadState('networkidle')
+  await page.waitForTimeout(500)
+})
+
+test('disableClick: hover opens, click dismisses without re-open oscillation', async ({
+  page,
+}) => {
+  const trigger = page.locator('#disableclick-trigger')
+  const content = page.locator('#disableclick-content')
+
+  await expect(content).not.toBeVisible()
+
+  // hover to open
+  await trigger.hover()
+  await page.waitForTimeout(300)
+  await expect(content).toBeVisible({ timeout: 2000 })
+
+  // click to dismiss (onPressIn sets open=false)
+  await trigger.click()
+  await page.waitForTimeout(500)
+
+  // popover should be closed — NOT re-opened by the built-in onPress toggle
+  await expect(content).not.toBeVisible({ timeout: 2000 })
+
+  // check the log for oscillation: if we see onOpenChange: true AFTER
+  // onPressIn: dismissing, that's the bug
+  const logEntries = await page.evaluate(() => {
+    const logEl = document.getElementById('open-state-log')
+    if (!logEl) return []
+    return Array.from(logEl.querySelectorAll('span')).map((el) => el.textContent || '')
+  })
+
+  console.log('State log:', logEntries)
+
+  // after the dismiss, there should be no onOpenChange: true
+  const dismissIdx = logEntries.findIndex((e) => e.includes('dismissing'))
+  if (dismissIdx >= 0) {
+    const afterDismiss = logEntries.slice(dismissIdx + 1)
+    const reOpened = afterDismiss.some((e) => e.includes('onOpenChange: true'))
+    expect(reOpened, 'Popover re-opened after dismiss (state oscillation bug)').toBe(
+      false
+    )
+  }
+})
+
+test('disableClick: hover opens, move away closes, re-hover re-opens', async ({
+  page,
+}) => {
+  const trigger = page.locator('#disableclick-trigger')
+  const content = page.locator('#disableclick-content')
+
+  await expect(content).not.toBeVisible()
+
+  // hover to open
+  await trigger.hover()
+  await page.waitForTimeout(300)
+  await expect(content).toBeVisible({ timeout: 2000 })
+
+  // move away to close
+  await page.mouse.move(10, 10)
+  await page.waitForTimeout(800)
+  await expect(content).not.toBeVisible({ timeout: 2000 })
+
+  // hover again should re-open (hover still works with disableClick)
+  await trigger.hover()
+  await page.waitForTimeout(300)
+  await expect(content).toBeVisible({ timeout: 2000 })
+})
+
+test('normal trigger: click toggles popover open and closed', async ({ page }) => {
+  const trigger = page.locator('#withclick-trigger')
+  const content = page.locator('#withclick-content')
+
+  await expect(content).not.toBeVisible()
+
+  // click should open (normal trigger without disableClick)
+  await trigger.click()
+  await page.waitForTimeout(500)
+  await expect(content).toBeVisible({ timeout: 2000 })
+
+  // click again should close
+  await trigger.click()
+  await page.waitForTimeout(500)
+  await expect(content).not.toBeVisible({ timeout: 2000 })
+})

package/tests/PopoverHoverableRapid.test.tsx

@@ -0,0 +1,129 @@
+import { expect, test } from '@playwright/test'
+import { getBoundingRect, setupPage } from './test-utils'
+
+// bug: rapidly sweeping across many side-by-side hoverable triggers with short
+// restMs can cause the popover to get "stuck" on a past trigger or close
+// unexpectedly. the root cause is a race between safePolygon closing during the
+// gap between triggers and stale openRef preventing re-open.
+
+test.describe('Popover hoverable rapid trigger switching', () => {
+  test.beforeEach(async ({ page }) => {
+    await setupPage(page, {
+      name: 'PopoverHoverableRapidCase',
+      type: 'useCase',
+      searchParams: { animationDriver: 'css' },
+    })
+    await page.waitForLoadState('networkidle')
+  })
+
+  test('rapid sweep: popover stays open and tracks final trigger', async ({ page }) => {
+    const content = page.locator('#rapid-content')
+
+    // hover first trigger to open
+    const triggerA = page.locator('#rapid-trigger-a')
+    await triggerA.hover()
+    await page.waitForTimeout(150) // restMs is 60ms + buffer
+    await expect(content).toBeVisible({ timeout: 2000 })
+
+    // move through gaps between triggers to expose the race condition:
+    // when the mouse is in the gap, onTriggerRef is false and safePolygon
+    // can fire a close. then when entering the next trigger, stale openRef
+    // prevents re-open.
+    const ids = ['a', 'b', 'c', 'd', 'e', 'f']
+    for (let i = 0; i < ids.length - 1; i++) {
+      const curr = page.locator(`#rapid-trigger-${ids[i]}`)
+      const next = page.locator(`#rapid-trigger-${ids[i + 1]}`)
+      const currBox = await curr.boundingBox()
+      const nextBox = await next.boundingBox()
+      if (currBox && nextBox) {
+        // move to the gap between current and next trigger
+        const gapX =
+          currBox.x + currBox.width + (nextBox.x - (currBox.x + currBox.width)) / 2
+        const gapY = currBox.y + currBox.height / 2
+        await page.mouse.move(gapX, gapY)
+        // wait in the gap for safePolygon's document mousemove handler to fire
+        // the mouse is now between triggers (onTriggerRef is false)
+        await page.waitForTimeout(30)
+        // now move to the next trigger
+        await page.mouse.move(
+          nextBox.x + nextBox.width / 2,
+          nextBox.y + nextBox.height / 2
+        )
+        await page.waitForTimeout(20)
+      }
+    }
+
+    // rest on the final trigger
+    await page.waitForTimeout(200)
+
+    // popover should still be visible (not closed/stuck)
+    await expect(content).toBeVisible({ timeout: 2000 })
+
+    // the panel label should show the final trigger
+    const label = page.locator('#rapid-panel-label')
+    await expect(label).toHaveText('Panel F', { timeout: 2000 })
+  })
+
+  test('rapid back-and-forth: popover stays open', async ({ page }) => {
+    const content = page.locator('#rapid-content')
+
+    // open on trigger c
+    const triggerC = page.locator('#rapid-trigger-c')
+    await triggerC.hover()
+    await page.waitForTimeout(150)
+    await expect(content).toBeVisible({ timeout: 2000 })
+
+    // sweep back and forth quickly with abrupt jumps
+    const sweep = ['d', 'e', 'f', 'e', 'd', 'c', 'b', 'a', 'b', 'c', 'd', 'e', 'f']
+    for (const id of sweep) {
+      const trigger = page.locator(`#rapid-trigger-${id}`)
+      const box = await trigger.boundingBox()
+      if (box) {
+        await page.mouse.move(box.x + box.width / 2, box.y + box.height / 2, {
+          steps: 1,
+        })
+      }
+      await page.waitForTimeout(5)
+    }
+
+    await page.waitForTimeout(200)
+
+    // should still be open and tracking final trigger
+    await expect(content).toBeVisible({ timeout: 2000 })
+    const label = page.locator('#rapid-panel-label')
+    await expect(label).toHaveText('Panel F', { timeout: 2000 })
+  })
+
+  test('rapid sweep then rest: content positioned near final trigger', async ({
+    page,
+  }) => {
+    const content = page.locator('#rapid-content')
+
+    // open on first trigger
+    await page.locator('#rapid-trigger-a').hover()
+    await page.waitForTimeout(150)
+    await expect(content).toBeVisible({ timeout: 2000 })
+
+    // quickly move to last trigger
+    const triggerF = page.locator('#rapid-trigger-f')
+    const box = await triggerF.boundingBox()
+    if (box) {
+      await page.mouse.move(box.x + box.width / 2, box.y + box.height / 2, {
+        steps: 3,
+      })
+    }
+    await page.waitForTimeout(200)
+
+    await expect(content).toBeVisible({ timeout: 2000 })
+
+    // content should be near trigger F, not stuck at trigger A
+    const triggerFRect = await getBoundingRect(page, '#rapid-trigger-f')
+    const triggerARect = await getBoundingRect(page, '#rapid-trigger-a')
+    const contentRect = await getBoundingRect(page, '#rapid-content')
+
+    // content x should be closer to trigger F than to trigger A
+    const distToF = Math.abs(contentRect!.x - triggerFRect!.x)
+    const distToA = Math.abs(contentRect!.x - triggerARect!.x)
+    expect(distToF).toBeLessThan(distToA)
+  })
+})

package/tests/PopoverHoverableReposition.test.tsx

@@ -0,0 +1,111 @@
+import { expect, test } from '@playwright/test'
+import { setupPage } from './test-utils'
+
+// regression: when a scoped hoverable popover with animatePosition fully
+// closes then reopens on a DIFFERENT trigger, it should appear at the new
+// trigger's position — not animate/slide from the old trigger's position.
+
+test.describe('Popover hoverable reposition after close', () => {
+  test.beforeEach(async ({ page }) => {
+    await setupPage(page, {
+      name: 'PopoverHoverableScopedCase',
+      type: 'useCase',
+      searchParams: { animationDriver: 'css' },
+    })
+  })
+
+  test('close then reopen on different trigger: no slide from old position', async ({
+    page,
+  }) => {
+    const content = page.locator('#nav-content')
+
+    // hover "about" trigger to open
+    const aboutTrigger = page.locator('#nav-trigger-about')
+    await aboutTrigger.hover()
+    await page.waitForTimeout(500)
+    await expect(content).toBeVisible()
+
+    // record content position when anchored to "about"
+    const aboutContentBox = await content.boundingBox()
+    expect(aboutContentBox).toBeTruthy()
+
+    // move mouse far away to fully close
+    await page.mouse.move(10, 600, { steps: 2 })
+    await page.waitForTimeout(800) // wait for exit animation (500ms transition)
+    await expect(content).not.toBeVisible()
+
+    // now hover "contact" trigger (rightmost, far from "about")
+    const contactTrigger = page.locator('#nav-trigger-contact')
+    const contactBox = await contactTrigger.boundingBox()
+    expect(contactBox).toBeTruthy()
+    await contactTrigger.hover()
+    await page.waitForTimeout(500)
+    await expect(content).toBeVisible()
+
+    // record content position when anchored to "contact"
+    const contactContentBox = await content.boundingBox()
+    expect(contactContentBox).toBeTruthy()
+
+    // the content x should be near "contact" trigger, NOT near "about" trigger.
+    // if the bug is present, content would start near aboutContentBox.x and
+    // slide to contactContentBox.x — we catch this by checking the FIRST frame.
+    // since we waited 500ms (full transition), the final position should be correct
+    // either way, but let's verify the position is near the contact trigger.
+    const contactTriggerCenter = contactBox!.x + contactBox!.width / 2
+    const contentCenter = contactContentBox!.x + contactContentBox!.width / 2
+
+    // content should be roughly centered on the contact trigger
+    expect(Math.abs(contactTriggerCenter - contentCenter)).toBeLessThan(
+      contactContentBox!.width / 2 + 50
+    )
+  })
+
+  test('close then reopen on different trigger: initial position is correct (no animation from old)', async ({
+    page,
+  }) => {
+    const content = page.locator('#nav-content')
+
+    // hover "about" trigger
+    const aboutTrigger = page.locator('#nav-trigger-about')
+    await aboutTrigger.hover()
+    await page.waitForTimeout(500)
+    await expect(content).toBeVisible()
+
+    const aboutContentBox = await content.boundingBox()
+
+    // fully close
+    await page.mouse.move(10, 600, { steps: 2 })
+    await page.waitForTimeout(800)
+    await expect(content).not.toBeVisible()
+
+    // hover "contact" trigger
+    const contactTrigger = page.locator('#nav-trigger-contact')
+    await contactTrigger.hover()
+
+    // check position EARLY — before the full 500ms transition
+    // if there's a slide-from-old-position bug, the early frame shows the old x
+    await page.waitForTimeout(100) // just enough for popover to appear
+    await expect(content).toBeVisible()
+
+    const earlyBox = await content.boundingBox()
+    expect(earlyBox).toBeTruthy()
+
+    // wait for full settle
+    await page.waitForTimeout(500)
+    const finalBox = await content.boundingBox()
+    expect(finalBox).toBeTruthy()
+
+    // the early position should be very close to the final position
+    // (no sliding from old trigger). allow tolerance for enter animation y offset.
+    const xDrift = Math.abs(earlyBox!.x - finalBox!.x)
+    expect(xDrift).toBeLessThan(20) // should be ~0 if no slide
+
+    // also verify it's NOT near the "about" position
+    if (aboutContentBox) {
+      const distFromAbout = Math.abs(earlyBox!.x - aboutContentBox.x)
+      const distFromFinal = Math.abs(earlyBox!.x - finalBox!.x)
+      // early box should be closer to final (contact) than to about
+      expect(distFromFinal).toBeLessThan(distFromAbout + 10)
+    }
+  })
+})

package/tests/PopoverHoverableScoped.animated.test.tsx

@@ -0,0 +1,103 @@
+import { expect, test } from '@playwright/test'
+import { setupPage } from './test-utils'
+
+/**
+ * Scoped multi-trigger popover with animatePosition:
+ * when switching between triggers, the popover content should smoothly
+ * animate its position — NOT snap instantly.
+ */
+test.describe('Popover hoverable scoped position animation', () => {
+  test.beforeEach(async ({ page }, testInfo) => {
+    const driver = (testInfo.project?.metadata as any)?.animationDriver
+    // animatePosition works via CSS transitions — only test on css/motion drivers
+    if (driver !== 'css' && driver !== 'motion') {
+      test.skip()
+      return
+    }
+
+    await setupPage(page, {
+      name: 'PopoverHoverableScopedCase',
+      type: 'useCase',
+      searchParams: { animationDriver: driver },
+    })
+    await page.waitForLoadState('networkidle')
+  })
+
+  test('position smoothly animates when switching between triggers', async ({ page }) => {
+    const aboutTrigger = page.locator('#nav-trigger-about')
+    const contactTrigger = page.locator('#nav-trigger-contact')
+    const content = page.locator('#nav-content')
+
+    // hover about to open popover
+    await aboutTrigger.hover()
+    await page.waitForTimeout(450)
+    await expect(content).toBeVisible({ timeout: 3000 })
+
+    // wait for enter animation to settle
+    await page.waitForTimeout(600)
+
+    // get initial content X position (anchored near "about")
+    const posA = await content.evaluate((el) => {
+      const rect = el.getBoundingClientRect()
+      return { x: rect.left, y: rect.top }
+    })
+
+    // start tracking positions at 60fps
+    await page.evaluate(() => {
+      ;(window as any).__xPositions = []
+      const track = () => {
+        const el = document.getElementById('nav-content')
+        if (el) {
+          const rect = el.getBoundingClientRect()
+          ;(window as any).__xPositions.push({
+            x: rect.left,
+            time: Date.now(),
+          })
+        }
+        ;(window as any).__trackRaf = requestAnimationFrame(track)
+      }
+      ;(window as any).__trackRaf = requestAnimationFrame(track)
+    })
+
+    // switch to contact trigger (rightmost)
+    await contactTrigger.hover()
+
+    // wait for the 500ms position transition to complete
+    await page.waitForTimeout(700)
+
+    // stop tracking
+    await page.evaluate(() => cancelAnimationFrame((window as any).__trackRaf))
+
+    // get final content X position (should be anchored near "contact")
+    const posB = await content.evaluate((el) => {
+      const rect = el.getBoundingClientRect()
+      return { x: rect.left, y: rect.top }
+    })
+
+    const positions: { x: number; time: number }[] = await page.evaluate(
+      () => (window as any).__xPositions
+    )
+
+    // the two positions should be different (contact is to the right of about)
+    const xDiff = Math.abs(posB.x - posA.x)
+    expect(xDiff).toBeGreaterThan(20)
+
+    // check for intermediate positions: if animatePosition works correctly,
+    // we should see X values between posA.x and posB.x during the transition.
+    // if it snaps, all positions will be either at posA.x or posB.x.
+    const minX = Math.min(posA.x, posB.x)
+    const maxX = Math.max(posA.x, posB.x)
+    const margin = xDiff * 0.15
+
+    const intermediatePositions = positions.filter((p) => {
+      return p.x > minX + margin && p.x < maxX - margin
+    })
+
+    expect(
+      intermediatePositions.length,
+      `Position should animate smoothly between triggers. ` +
+        `posA.x=${posA.x.toFixed(1)}, posB.x=${posB.x.toFixed(1)}, ` +
+        `found ${intermediatePositions.length} intermediate frames out of ${positions.length} total`
+    ).toBeGreaterThan(2)
+  })
+})

package/tests/PopoverHoverableStress.test.tsx

@@ -0,0 +1,169 @@
+import { expect, test } from '@playwright/test'
+import { setupPage } from './test-utils'
+
+// stress tests for scoped hoverable popover with multiple triggers.
+// hammers the interaction between safePolygon, multi-trigger switching,
+// content interaction, diagonal movement, and open/close cycles.
+
+test.describe('Popover hoverable stress', () => {
+  test.beforeEach(async ({ page }) => {
+    await setupPage(page, {
+      name: 'PopoverHoverableRapidCase',
+      type: 'useCase',
+      searchParams: { animationDriver: 'css' },
+    })
+  })
+
+  test('trigger → content → different trigger keeps popover open', async ({ page }) => {
+    const content = page.locator('#rapid-content')
+    const triggerA = page.locator('#rapid-trigger-a')
+    const triggerD = page.locator('#rapid-trigger-d')
+
+    // open on A
+    await triggerA.hover()
+    await page.waitForTimeout(150)
+    await expect(content).toBeVisible()
+
+    // move into the content
+    const cBox = await content.boundingBox()
+    await page.mouse.move(cBox!.x + cBox!.width / 2, cBox!.y + cBox!.height / 2)
+    await page.waitForTimeout(100)
+    await expect(content).toBeVisible()
+
+    // move from content back up to trigger D (skipping B, C)
+    const dBox = await triggerD.boundingBox()
+    await page.mouse.move(dBox!.x + dBox!.width / 2, dBox!.y + dBox!.height / 2, {
+      steps: 5,
+    })
+    await page.waitForTimeout(150)
+
+    await expect(content).toBeVisible()
+    await expect(page.locator('#rapid-panel-label')).toHaveText('Panel D')
+  })
+
+  test('diagonal movement through safe polygon keeps popover open', async ({ page }) => {
+    const content = page.locator('#rapid-content')
+    const triggerA = page.locator('#rapid-trigger-a')
+
+    // open on A
+    await triggerA.hover()
+    await page.waitForTimeout(150)
+    await expect(content).toBeVisible()
+
+    // get positions for diagonal sweep from trigger toward content corner
+    const aBox = await triggerA.boundingBox()
+    const cBox = await content.boundingBox()
+
+    // move diagonally from trigger bottom-right toward content top-left
+    const steps = 8
+    for (let i = 1; i <= steps; i++) {
+      const t = i / steps
+      const x = aBox!.x + aBox!.width * (1 - t * 0.3) // drift slightly left
+      const y = aBox!.y + aBox!.height + (cBox!.y - aBox!.y - aBox!.height) * t
+      await page.mouse.move(x, y)
+      await page.waitForTimeout(15)
+    }
+
+    // land on content
+    await page.mouse.move(cBox!.x + cBox!.width / 2, cBox!.y + 10)
+    await page.waitForTimeout(100)
+    await expect(content).toBeVisible()
+  })
+
+  test('mouse leaving to empty space closes popover', async ({ page }) => {
+    const content = page.locator('#rapid-content')
+    const triggerC = page.locator('#rapid-trigger-c')
+
+    await triggerC.hover()
+    await page.waitForTimeout(150)
+    await expect(content).toBeVisible()
+
+    // move mouse far away from both trigger and content
+    await page.mouse.move(10, 10, { steps: 2 })
+    await page.waitForTimeout(300)
+    await expect(content).not.toBeVisible()
+  })
+
+  test('repeated open/close cycles work reliably', async ({ page }) => {
+    const content = page.locator('#rapid-content')
+    const triggerB = page.locator('#rapid-trigger-b')
+
+    for (let cycle = 0; cycle < 3; cycle++) {
+      // open
+      await triggerB.hover()
+      await page.waitForTimeout(150)
+      await expect(content).toBeVisible()
+
+      // close by moving away
+      await page.mouse.move(10, 10, { steps: 2 })
+      await page.waitForTimeout(300)
+      await expect(content).not.toBeVisible()
+    }
+  })
+
+  test('fast sweep then slow traverse through gap', async ({ page }) => {
+    const content = page.locator('#rapid-content')
+    const triggerA = page.locator('#rapid-trigger-a')
+
+    // open on A
+    await triggerA.hover()
+    await page.waitForTimeout(150)
+    await expect(content).toBeVisible()
+
+    // fast sweep to E
+    const triggerE = page.locator('#rapid-trigger-e')
+    const eBox = await triggerE.boundingBox()
+    await page.mouse.move(eBox!.x + eBox!.width / 2, eBox!.y + eBox!.height / 2, {
+      steps: 2,
+    })
+    await page.waitForTimeout(100)
+
+    // now SLOWLY move down through the gap to content
+    const cBox = await content.boundingBox()
+    const startY = eBox!.y + eBox!.height
+    const endY = cBox!.y + 10
+    const slowSteps = 12
+    for (let i = 1; i <= slowSteps; i++) {
+      const t = i / slowSteps
+      await page.mouse.move(eBox!.x + eBox!.width / 2, startY + (endY - startY) * t)
+      await page.waitForTimeout(30)
+    }
+
+    await expect(content).toBeVisible()
+  })
+
+  // skipped in CI: runner is too slow for the tight timing in this sweep+enter sequence
+  test.skip(!!process.env.CI, 'flaky on slow CI runners')
+  test('sweep all triggers then enter content from last', async ({ page }) => {
+    const content = page.locator('#rapid-content')
+    const ids = ['a', 'b', 'c', 'd', 'e', 'f']
+
+    // open on first
+    await page.locator('#rapid-trigger-a').hover()
+    await page.waitForTimeout(150)
+    await expect(content).toBeVisible()
+
+    // sweep through all triggers
+    for (const id of ids.slice(1)) {
+      const el = page.locator(`#rapid-trigger-${id}`)
+      const box = await el.boundingBox()
+      await page.mouse.move(box!.x + box!.width / 2, box!.y + box!.height / 2, {
+        steps: 2,
+      })
+      await page.waitForTimeout(20)
+    }
+
+    // rest on F
+    await page.waitForTimeout(100)
+    await expect(content).toBeVisible()
+    await expect(page.locator('#rapid-panel-label')).toHaveText('Panel F')
+
+    // move into content from F
+    const cBox = await content.boundingBox()
+    await page.mouse.move(cBox!.x + cBox!.width / 2, cBox!.y + cBox!.height / 2, {
+      steps: 5,
+    })
+    await page.waitForTimeout(100)
+    await expect(content).toBeVisible()
+  })
+})