@hanzogui/kitchen-sink 3.0.5

package/tests/MenuAccessibility.test.tsx

@@ -0,0 +1,346 @@
+import { expect, test } from '@playwright/test'
+import { setupPage } from './test-utils'
+
+test.describe('Menu Accessibility', () => {
+  test.beforeEach(async ({ page }) => {
+    await setupPage(page, { name: 'MenuAccessibilityCase', type: 'useCase' })
+  })
+
+  test('trigger is focusable via tab key', async ({ page }) => {
+    await page.waitForLoadState('networkidle')
+
+    // focus the "before" button first
+    const beforeButton = page.getByTestId('before-button')
+    await beforeButton.focus()
+    await expect(beforeButton).toBeFocused()
+
+    // tab to menu trigger
+    await page.keyboard.press('Tab')
+    await page.waitForTimeout(100)
+
+    const trigger = page.getByTestId('menu-trigger')
+    await expect(trigger).toBeFocused()
+
+    // tab to "after" button
+    await page.keyboard.press('Tab')
+    await page.waitForTimeout(100)
+
+    const afterButton = page.getByTestId('after-button')
+    await expect(afterButton).toBeFocused()
+  })
+
+  test('menu opens on Enter key and focuses first item', async ({ page }) => {
+    await page.waitForLoadState('networkidle')
+
+    const trigger = page.getByTestId('menu-trigger')
+    await trigger.focus()
+    await expect(trigger).toBeFocused()
+
+    // press Enter to open menu
+    await page.keyboard.press('Enter')
+    await page.waitForTimeout(300)
+
+    const menuContent = page.getByTestId('menu-content')
+    await expect(menuContent).toBeVisible()
+
+    // first item should be focused for keyboard users
+    const firstItem = page.getByTestId('menu-item-1')
+    await expect(firstItem).toBeFocused()
+  })
+
+  test('menu opens on Space key and focuses first item', async ({ page }) => {
+    await page.waitForLoadState('networkidle')
+
+    const trigger = page.getByTestId('menu-trigger')
+    await trigger.focus()
+    await expect(trigger).toBeFocused()
+
+    // press Space to open menu
+    await page.keyboard.press('Space')
+    await page.waitForTimeout(300)
+
+    const menuContent = page.getByTestId('menu-content')
+    await expect(menuContent).toBeVisible()
+
+    // first item should be focused for keyboard users
+    const firstItem = page.getByTestId('menu-item-1')
+    await expect(firstItem).toBeFocused()
+  })
+
+  test('arrow down from content frame focuses first item', async ({ page }) => {
+    await page.waitForLoadState('networkidle')
+
+    const trigger = page.getByTestId('menu-trigger')
+    await trigger.click()
+    await page.waitForTimeout(300)
+
+    const menuContent = page.getByTestId('menu-content')
+    await expect(menuContent).toBeVisible()
+    await expect(menuContent).toBeFocused()
+
+    // press ArrowDown to focus first item
+    await page.keyboard.press('ArrowDown')
+    await page.waitForTimeout(100)
+
+    const firstItem = page.getByTestId('menu-item-1')
+    await expect(firstItem).toBeFocused()
+  })
+
+  test('arrow keys navigate between menu items', async ({ page }) => {
+    await page.waitForLoadState('networkidle')
+
+    const trigger = page.getByTestId('menu-trigger')
+    await trigger.click()
+    await page.waitForTimeout(300)
+
+    const menuContent = page.getByTestId('menu-content')
+    await expect(menuContent).toBeVisible()
+
+    // arrow down to focus first item from content frame
+    await page.keyboard.press('ArrowDown')
+    await page.waitForTimeout(100)
+
+    const firstItem = page.getByTestId('menu-item-1')
+    await expect(firstItem).toBeFocused()
+
+    // arrow down to second item
+    await page.keyboard.press('ArrowDown')
+    await page.waitForTimeout(100)
+
+    const secondItem = page.getByTestId('menu-item-2')
+    await expect(secondItem).toBeFocused()
+
+    // arrow down to third item
+    await page.keyboard.press('ArrowDown')
+    await page.waitForTimeout(100)
+
+    const thirdItem = page.getByTestId('menu-item-3')
+    await expect(thirdItem).toBeFocused()
+
+    // arrow up back to second item
+    await page.keyboard.press('ArrowUp')
+    await page.waitForTimeout(100)
+
+    await expect(secondItem).toBeFocused()
+  })
+
+  test('escape closes menu and returns focus to trigger', async ({ page }) => {
+    await page.waitForLoadState('networkidle')
+
+    const trigger = page.getByTestId('menu-trigger')
+    await trigger.click()
+    await page.waitForTimeout(300)
+
+    const menuContent = page.getByTestId('menu-content')
+    await expect(menuContent).toBeVisible()
+
+    // focus an item
+    const firstItem = page.getByTestId('menu-item-1')
+    await firstItem.focus()
+    await expect(firstItem).toBeFocused()
+
+    // press Escape to close menu
+    await page.keyboard.press('Escape')
+    await page.waitForTimeout(300)
+
+    await expect(menuContent).not.toBeVisible()
+
+    // focus should return to trigger
+    await expect(trigger).toBeFocused()
+  })
+
+  test('escape in submenu closes only submenu first, then parent', async ({ page }) => {
+    await page.waitForLoadState('networkidle')
+
+    const trigger = page.getByTestId('menu-trigger')
+    await trigger.click()
+    await page.waitForTimeout(300)
+
+    const menuContent = page.getByTestId('menu-content')
+    await expect(menuContent).toBeVisible()
+
+    // open submenu by clicking on submenu trigger
+    const submenuTrigger = page.getByTestId('submenu-trigger')
+    await submenuTrigger.click()
+    await page.waitForTimeout(300)
+
+    const submenuContent = page.getByTestId('submenu-content')
+    await expect(submenuContent).toBeVisible()
+
+    // focus a submenu item
+    const submenuItem = page.getByTestId('submenu-item-1')
+    await submenuItem.focus()
+    await expect(submenuItem).toBeFocused()
+
+    // press Escape - should close submenu only
+    await page.keyboard.press('Escape')
+    await page.waitForTimeout(300)
+
+    // submenu should be closed
+    await expect(submenuContent).not.toBeVisible()
+
+    // parent menu should still be open
+    await expect(menuContent).toBeVisible()
+
+    // focus should return to submenu trigger
+    await expect(submenuTrigger).toBeFocused()
+
+    // press Escape again - should close parent menu
+    await page.keyboard.press('Escape')
+    await page.waitForTimeout(300)
+
+    await expect(menuContent).not.toBeVisible()
+
+    // focus should return to main trigger
+    await expect(trigger).toBeFocused()
+  })
+
+  test('arrow right opens submenu and focuses first submenu item', async ({ page }) => {
+    await page.waitForLoadState('networkidle')
+
+    const trigger = page.getByTestId('menu-trigger')
+    await trigger.click()
+    await page.waitForTimeout(300)
+
+    const menuContent = page.getByTestId('menu-content')
+    await expect(menuContent).toBeVisible()
+
+    // navigate to submenu trigger
+    const submenuTrigger = page.getByTestId('submenu-trigger')
+    await submenuTrigger.focus()
+    await expect(submenuTrigger).toBeFocused()
+
+    // press ArrowRight to open submenu
+    await page.keyboard.press('ArrowRight')
+    await page.waitForTimeout(300)
+
+    const submenuContent = page.getByTestId('submenu-content')
+    await expect(submenuContent).toBeVisible()
+
+    // first submenu item should be focused for keyboard users
+    const firstSubmenuItem = page.getByTestId('submenu-item-1')
+    await expect(firstSubmenuItem).toBeFocused()
+  })
+
+  test('arrow down in hover-opened submenu focuses first item', async ({ page }) => {
+    await page.waitForLoadState('networkidle')
+
+    const trigger = page.getByTestId('menu-trigger')
+    await trigger.click()
+    await page.waitForTimeout(300)
+
+    // hover over submenu trigger to open submenu
+    const submenuTrigger = page.getByTestId('submenu-trigger')
+    await submenuTrigger.hover()
+    await page.waitForTimeout(500)
+
+    const submenuContent = page.getByTestId('submenu-content')
+    await expect(submenuContent).toBeVisible()
+
+    // focus the submenu content and press down
+    await submenuContent.focus()
+    await page.keyboard.press('ArrowDown')
+    await page.waitForTimeout(100)
+
+    const firstSubmenuItem = page.getByTestId('submenu-item-1')
+    await expect(firstSubmenuItem).toBeFocused()
+  })
+
+  test('arrow left closes submenu and returns to parent', async ({ page }) => {
+    await page.waitForLoadState('networkidle')
+
+    const trigger = page.getByTestId('menu-trigger')
+    await trigger.click()
+    await page.waitForTimeout(300)
+
+    // open submenu
+    const submenuTrigger = page.getByTestId('submenu-trigger')
+    await submenuTrigger.click()
+    await page.waitForTimeout(300)
+
+    const submenuContent = page.getByTestId('submenu-content')
+    await expect(submenuContent).toBeVisible()
+
+    const submenuItem = page.getByTestId('submenu-item-1')
+    await submenuItem.focus()
+
+    // press ArrowLeft to close submenu
+    await page.keyboard.press('ArrowLeft')
+    await page.waitForTimeout(300)
+
+    await expect(submenuContent).not.toBeVisible()
+
+    // focus should return to submenu trigger in parent
+    await expect(submenuTrigger).toBeFocused()
+  })
+
+  test('tab key does not navigate within menu', async ({ page }) => {
+    await page.waitForLoadState('networkidle')
+
+    const trigger = page.getByTestId('menu-trigger')
+    await trigger.click()
+    await page.waitForTimeout(300)
+
+    const menuContent = page.getByTestId('menu-content')
+    await expect(menuContent).toBeVisible()
+
+    const firstItem = page.getByTestId('menu-item-1')
+    await firstItem.focus()
+    await expect(firstItem).toBeFocused()
+
+    // press Tab - menu should close (standard menu behavior)
+    await page.keyboard.press('Tab')
+    await page.waitForTimeout(300)
+
+    // menu behavior varies - some close on Tab, some trap focus
+    // the key is that Tab doesn't navigate between items like ArrowDown does
+  })
+
+  test('space key opens submenu when focused on submenu trigger', async ({ page }) => {
+    await page.waitForLoadState('networkidle')
+
+    const trigger = page.getByTestId('menu-trigger')
+    await trigger.focus()
+    await page.keyboard.press('Enter')
+    await page.waitForTimeout(300)
+
+    const menuContent = page.getByTestId('menu-content')
+    await expect(menuContent).toBeVisible()
+
+    // navigate to submenu trigger
+    const submenuTrigger = page.getByTestId('submenu-trigger')
+    await submenuTrigger.focus()
+    await expect(submenuTrigger).toBeFocused()
+
+    // press Space to open submenu
+    await page.keyboard.press('Space')
+    await page.waitForTimeout(300)
+
+    const submenuContent = page.getByTestId('submenu-content')
+    await expect(submenuContent).toBeVisible()
+  })
+
+  test('enter key opens submenu when focused on submenu trigger', async ({ page }) => {
+    await page.waitForLoadState('networkidle')
+
+    const trigger = page.getByTestId('menu-trigger')
+    await trigger.focus()
+    await page.keyboard.press('Enter')
+    await page.waitForTimeout(300)
+
+    const menuContent = page.getByTestId('menu-content')
+    await expect(menuContent).toBeVisible()
+
+    // navigate to submenu trigger
+    const submenuTrigger = page.getByTestId('submenu-trigger')
+    await submenuTrigger.focus()
+    await expect(submenuTrigger).toBeFocused()
+
+    // press Enter to open submenu
+    await page.keyboard.press('Enter')
+    await page.waitForTimeout(300)
+
+    const submenuContent = page.getByTestId('submenu-content')
+    await expect(submenuContent).toBeVisible()
+  })
+})

package/tests/MenuAnimatePosition.animated.test.tsx

@@ -0,0 +1,57 @@
+import { expect, test } from '@playwright/test'
+import { getBoundingRect, setupPage } from './test-utils'
+
+test.describe('Menu animatePosition', () => {
+  test.beforeEach(async ({ page }) => {
+    await setupPage(page, {
+      name: 'MenuAnimatePositionCase',
+      type: 'useCase',
+      waitExtra: true,
+    })
+  })
+
+  test('content appears near the trigger that opened it', async ({ page }) => {
+    const triggerLeft = page.getByTestId('trigger-left')
+    await triggerLeft.click()
+    await page.waitForTimeout(400)
+
+    const content = page.getByTestId('menu-content')
+    await expect(content).toBeVisible()
+
+    const triggerBox = await getBoundingRect(page, '[data-testid="trigger-left"]')
+    const contentBox = await getBoundingRect(page, '[data-testid="menu-content"]')
+    expect(triggerBox).not.toBeNull()
+    expect(contentBox).not.toBeNull()
+
+    // content should be horizontally aligned near the left trigger
+    expect(Math.abs(contentBox!.x - triggerBox!.x)).toBeLessThan(50)
+  })
+
+  test('content has transition style when animatePosition is set', async ({ page }) => {
+    const triggerLeft = page.getByTestId('trigger-left')
+    await triggerLeft.click()
+    await page.waitForTimeout(400)
+
+    const content = page.getByTestId('menu-content')
+    await expect(content).toBeVisible()
+
+    // check that the content element (or its popper wrapper) has a CSS transition
+    const hasTransition = await content.evaluate((el) => {
+      let node: Element | null = el
+      while (node) {
+        const style = getComputedStyle(node)
+        if (
+          style.transition &&
+          style.transition !== 'none' &&
+          style.transition !== 'all 0s ease 0s'
+        ) {
+          return true
+        }
+        node = node.parentElement
+      }
+      return false
+    })
+
+    expect(hasTransition).toBe(true)
+  })
+})

package/tests/MenuArrowAnimatePresence.animated.test.tsx

@@ -0,0 +1,71 @@
+import { expect, test } from '@playwright/test'
+
+/**
+ * Test for Menu/Popover arrow visibility with AnimatePresence
+ * Issue: When arrow is wrapped in AnimatePresence, Motion driver applies opacity: 0
+ * that doesn't animate back to opacity: 1
+ */
+test.describe('Menu Arrow with AnimatePresence', () => {
+  test('popover arrow is visible when wrapped in AnimatePresence', async ({ page }) => {
+    await page.goto('/?test=MenuArrowAnimatePresenceCase')
+    await page.waitForTimeout(500)
+
+    // open the popover
+    const trigger = page.getByTestId('popover-trigger')
+    await trigger.click()
+    await page.waitForTimeout(500)
+
+    // find the arrow elements
+    const arrowOuter = page.locator('[class*="PopperArrowOuter"]').first()
+    const arrowInner = arrowOuter
+      .locator('[class*="PopoverArrow"], [class*="PopperArrow"]')
+      .first()
+
+    // verify outer arrow exists and is visible
+    await expect(arrowOuter).toBeVisible()
+
+    // get inner arrow computed opacity - this is the critical check
+    const innerOpacity = await arrowInner.evaluate((el) => {
+      return getComputedStyle(el).opacity
+    })
+
+    // inner arrow should have opacity 1, not 0
+    expect(Number.parseFloat(innerOpacity)).toBeGreaterThan(0.5)
+
+    // check inline style doesn't have opacity: 0
+    const inlineStyle = await arrowInner.getAttribute('style')
+    console.log('Arrow inline style:', inlineStyle)
+
+    // the bug causes inline style to contain "opacity: 0"
+    if (inlineStyle) {
+      expect(inlineStyle).not.toContain('opacity: 0')
+    }
+
+    // verify arrow is actually visible by checking bounding box
+    const arrowBox = await arrowOuter.boundingBox()
+    expect(arrowBox).not.toBeNull()
+    expect(arrowBox!.width).toBeGreaterThan(0)
+    expect(arrowBox!.height).toBeGreaterThan(0)
+  })
+
+  test('menu arrow is visible without AnimatePresence', async ({ page }) => {
+    await page.goto('/?test=MenuArrowAnimatePresenceCase')
+    await page.waitForTimeout(500)
+
+    // open the menu
+    const trigger = page.getByTestId('menu-trigger')
+    await trigger.click()
+    await page.waitForTimeout(500)
+
+    // find the arrow
+    const arrowOuter = page.locator('[class*="PopperArrowOuter"]').first()
+
+    // verify arrow exists and is visible
+    await expect(arrowOuter).toBeVisible()
+
+    const arrowBox = await arrowOuter.boundingBox()
+    expect(arrowBox).not.toBeNull()
+    expect(arrowBox!.width).toBeGreaterThan(0)
+    expect(arrowBox!.height).toBeGreaterThan(0)
+  })
+})

package/tests/MenuAsChildPosition.test.tsx

@@ -0,0 +1,16 @@
+import { expect, test } from '@playwright/test'
+
+test.beforeEach(async ({ page }) => {
+  await page.goto('/?test=MenuAsChildPositionCase')
+})
+
+test('Menu.Trigger asChild does not leak position static class to child', async ({
+  page,
+}) => {
+  const menuTrigger = page.locator('[data-testid="menu-trigger-button"]')
+  await expect(menuTrigger).toBeVisible()
+
+  // should not have _pos-static class leaked from View defaults via asChild
+  const className = await menuTrigger.getAttribute('class')
+  expect(className).not.toContain('_pos-static')
+})

package/tests/MenuAutoResize.test.tsx

@@ -0,0 +1,54 @@
+import { expect, test } from '@playwright/test'
+import { setupPage } from './test-utils'
+
+test.describe('Menu Auto Resize', () => {
+  test('menu resizes to fit in small viewport', async ({ page }) => {
+    // set a very small viewport height
+    await page.setViewportSize({ width: 400, height: 300 })
+
+    await setupPage(page, { name: 'MenuAutoResizeCase', type: 'useCase' })
+    await page.waitForLoadState('networkidle')
+
+    const trigger = page.getByTestId('menu-trigger')
+    await trigger.click()
+    await page.waitForTimeout(300)
+
+    const menuContent = page.getByTestId('menu-content')
+    await expect(menuContent).toBeVisible()
+
+    // get menu content bounding box
+    const boundingBox = await menuContent.boundingBox()
+    const viewportSize = page.viewportSize()
+
+    expect(boundingBox).not.toBeNull()
+    expect(viewportSize).not.toBeNull()
+
+    if (boundingBox && viewportSize) {
+      // menu should NOT extend beyond viewport top
+      expect(boundingBox.y).toBeGreaterThanOrEqual(0)
+      // menu should NOT extend beyond viewport bottom
+      expect(boundingBox.y + boundingBox.height).toBeLessThanOrEqual(viewportSize.height)
+    }
+  })
+
+  test('menu scroll view uses available height CSS variable', async ({ page }) => {
+    await page.setViewportSize({ width: 400, height: 300 })
+
+    await setupPage(page, { name: 'MenuAutoResizeCase', type: 'useCase' })
+    await page.waitForLoadState('networkidle')
+
+    const trigger = page.getByTestId('menu-trigger')
+    await trigger.click()
+    await page.waitForTimeout(300)
+
+    const menuScrollView = page.getByTestId('menu-scroll-view')
+    await expect(menuScrollView).toBeVisible()
+
+    // the scroll view should be scrollable (content exceeds available height)
+    const isScrollable = await menuScrollView.evaluate((el) => {
+      return el.scrollHeight > el.clientHeight
+    })
+
+    expect(isScrollable).toBe(true)
+  })
+})