@hanzogui/kitchen-sink 3.0.5

package/tests/MenuSubKeyboardFocus.test.tsx

@@ -0,0 +1,220 @@
+import { expect, test } from '@playwright/test'
+
+import { setupPage } from './test-utils'
+
+test.describe('Menu Submenu Keyboard Focus', () => {
+  test.beforeEach(async ({ page }) => {
+    await setupPage(page, { name: 'MenuAccessibilityCase', type: 'useCase' })
+  })
+
+  test('submenu trigger should have focusVisible style when opened via ArrowRight', async ({
+    page,
+  }) => {
+    await page.waitForLoadState('networkidle')
+
+    // open menu via keyboard
+    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 via keyboard
+    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()
+
+    // the first submenu item should be focused AND have focusVisible
+    const firstSubmenuItem = page.getByTestId('submenu-item-1')
+    await expect(firstSubmenuItem).toBeFocused()
+
+    // check that the focused item has the data-highlighted attribute (indicates focus style)
+    const hasHighlight = await firstSubmenuItem.getAttribute('data-highlighted')
+    expect(hasHighlight).toBe('')
+  })
+
+  test('submenu trigger should have focusVisible style when opened via Enter', async ({
+    page,
+  }) => {
+    await page.waitForLoadState('networkidle')
+
+    // open menu via keyboard
+    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 via keyboard
+    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()
+
+    // the first submenu item should be focused AND have focusVisible
+    const firstSubmenuItem = page.getByTestId('submenu-item-1')
+    await expect(firstSubmenuItem).toBeFocused()
+
+    // check that the focused item has the data-highlighted attribute
+    const hasHighlight = await firstSubmenuItem.getAttribute('data-highlighted')
+    expect(hasHighlight).toBe('')
+  })
+
+  test('submenu trigger should have focusVisible when escape returns focus from submenu', async ({
+    page,
+  }) => {
+    await page.waitForLoadState('networkidle')
+
+    // open menu via keyboard
+    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 and open via keyboard
+    const submenuTrigger = page.getByTestId('submenu-trigger')
+    await submenuTrigger.focus()
+    await page.keyboard.press('ArrowRight')
+    await page.waitForTimeout(300)
+
+    const submenuContent = page.getByTestId('submenu-content')
+    await expect(submenuContent).toBeVisible()
+
+    // press Escape to close submenu
+    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 WITH focusVisible
+    await expect(submenuTrigger).toBeFocused()
+
+    // check that the submenu trigger has the data-highlighted attribute (focus visible)
+    const hasHighlight = await submenuTrigger.getAttribute('data-highlighted')
+    expect(hasHighlight).toBe('')
+  })
+
+  test('submenu trigger should have focusVisible when ArrowLeft returns focus from submenu', async ({
+    page,
+  }) => {
+    await page.waitForLoadState('networkidle')
+
+    // open menu via keyboard
+    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 and open via keyboard
+    const submenuTrigger = page.getByTestId('submenu-trigger')
+    await submenuTrigger.focus()
+    await page.keyboard.press('ArrowRight')
+    await page.waitForTimeout(300)
+
+    const submenuContent = page.getByTestId('submenu-content')
+    await expect(submenuContent).toBeVisible()
+
+    // focus first item in submenu
+    const submenuItem = page.getByTestId('submenu-item-1')
+    await expect(submenuItem).toBeFocused()
+
+    // press ArrowLeft to close submenu and return to parent
+    await page.keyboard.press('ArrowLeft')
+    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 WITH focusVisible
+    await expect(submenuTrigger).toBeFocused()
+
+    // check that the submenu trigger has the data-highlighted attribute (focus visible)
+    const hasHighlight = await submenuTrigger.getAttribute('data-highlighted')
+    expect(hasHighlight).toBe('')
+  })
+})
+
+test.describe('Menu Submenu Left-Side Keyboard Navigation', () => {
+  test.beforeEach(async ({ page }) => {
+    await setupPage(page, { name: 'MenuSubLeftCase', type: 'useCase' })
+  })
+
+  test('ArrowRight opens left-side submenu (same as right-side)', async ({ page }) => {
+    await page.waitForLoadState('networkidle')
+
+    // open menu
+    const menuTrigger = page.locator('#menu-trigger')
+    await menuTrigger.click()
+    await page.waitForTimeout(200)
+
+    const menuContent = page.locator('#menu-content')
+    await expect(menuContent).toBeVisible()
+
+    // focus submenu trigger
+    const submenuTrigger = page.locator('#submenu-trigger')
+    await submenuTrigger.focus()
+    await expect(submenuTrigger).toBeFocused()
+
+    // ArrowRight should open submenu regardless of placement side
+    await page.keyboard.press('ArrowRight')
+    await page.waitForTimeout(300)
+
+    const submenuContent = page.locator('#submenu-content')
+    await expect(submenuContent).toBeVisible()
+  })
+
+  test('ArrowLeft closes left-side submenu (same as right-side)', async ({ page }) => {
+    await page.waitForLoadState('networkidle')
+
+    // open menu
+    const menuTrigger = page.locator('#menu-trigger')
+    await menuTrigger.click()
+    await page.waitForTimeout(200)
+
+    // open submenu via ArrowRight
+    const submenuTrigger = page.locator('#submenu-trigger')
+    await submenuTrigger.focus()
+    await page.keyboard.press('ArrowRight')
+    await page.waitForTimeout(300)
+
+    const submenuContent = page.locator('#submenu-content')
+    await expect(submenuContent).toBeVisible()
+
+    // ArrowLeft should close submenu regardless of placement side
+    await page.keyboard.press('ArrowLeft')
+    await page.waitForTimeout(300)
+
+    await expect(submenuContent).not.toBeVisible()
+    await expect(submenuTrigger).toBeFocused()
+  })
+})

package/tests/MenuSubLeftSafePolygon.test.tsx

@@ -0,0 +1,88 @@
+import { expect, test } from '@playwright/test'
+
+import { setupPage } from './test-utils'
+
+test.beforeEach(async ({ page }) => {
+  await setupPage(page, { name: 'MenuSubLeftCase', type: 'useCase' })
+})
+
+/**
+ * Tests for Menu Submenu SafePolygon behavior when submenu opens to the LEFT
+ */
+
+test('left-side submenu has data-side="left" attribute required for safePolygon', async ({
+  page,
+}) => {
+  await page.waitForLoadState('networkidle')
+
+  const menuTrigger = page.locator('#menu-trigger')
+  const menuContent = page.locator('#menu-content')
+  const submenuTrigger = page.locator('#submenu-trigger')
+  const submenuContent = page.locator('#submenu-content')
+
+  await menuTrigger.click()
+  await expect(menuContent).toBeVisible({ timeout: 5000 })
+
+  await submenuTrigger.hover()
+  await page.waitForTimeout(200)
+  await expect(submenuContent).toBeVisible({ timeout: 5000 })
+
+  // data-side tells safePolygon which direction the submenu is
+  // for left-side submenus, this should be 'left'
+  const dataSide = await submenuContent.getAttribute('data-side')
+  expect(dataSide).toBe('left')
+})
+
+test('safePolygon keeps left-side submenu open when mouse crosses parent menu items', async ({
+  page,
+}) => {
+  await page.waitForLoadState('networkidle')
+
+  const menuTrigger = page.locator('#menu-trigger')
+  const menuContent = page.locator('#menu-content')
+  const submenuTrigger = page.locator('#submenu-trigger')
+  const submenuContent = page.locator('#submenu-content')
+
+  await menuTrigger.click()
+  await expect(menuContent).toBeVisible({ timeout: 5000 })
+
+  await submenuTrigger.hover()
+  await page.waitForTimeout(200)
+  await expect(submenuContent).toBeVisible({ timeout: 5000 })
+
+  // get positions
+  const triggerBox = await submenuTrigger.boundingBox()
+  const submenuBox = await submenuContent.boundingBox()
+
+  if (!triggerBox || !submenuBox) {
+    throw new Error('Could not get bounding boxes')
+  }
+
+  // start at the submenu trigger
+  const startX = triggerBox.x + triggerBox.width / 2
+  const startY = triggerBox.y + triggerBox.height / 2
+
+  // end inside submenu content - moving LEFT and DOWN
+  // the submenu is to the LEFT of the trigger
+  const endX = submenuBox.x + submenuBox.width / 2
+  const endY = submenuBox.y + submenuBox.height - 20
+
+  await page.mouse.move(startX, startY)
+  await page.waitForTimeout(30)
+
+  // move diagonally DOWN and LEFT
+  // this path crosses through menu items below the trigger
+  // safePolygon should prevent those items from stealing focus
+  const steps = 12
+  for (let i = 1; i <= steps; i++) {
+    const progress = i / steps
+    const x = startX + (endX - startX) * progress
+    const y = startY + (endY - startY) * progress
+    await page.mouse.move(x, y)
+    await page.waitForTimeout(20)
+  }
+
+  // submenu should stay open because safePolygon correctly identifies
+  // side='left' from the placement and matches it with pointerDir='left'
+  await expect(submenuContent).toBeVisible()
+})

package/tests/MenuSubNestedPosition.test.tsx

@@ -0,0 +1,48 @@
+import { expect, test } from '@playwright/test'
+
+import { setupPage } from './test-utils'
+
+test.beforeEach(async ({ page }) => {
+  await setupPage(page, { name: 'MenuSubNestedPositionCase', type: 'useCase' })
+})
+
+test('nested submenu does not overlap parent submenu', async ({ page }) => {
+  await page.setViewportSize({ width: 500, height: 600 })
+  await page.waitForLoadState('networkidle')
+
+  // open root menu
+  await page.locator('#menu-trigger').focus()
+  await page.keyboard.press('Enter')
+  await page.waitForTimeout(400)
+  await expect(page.locator('#menu-content')).toBeVisible({ timeout: 5000 })
+
+  // open sub
+  await page.keyboard.press('ArrowDown')
+  await page.waitForTimeout(100)
+  await page.keyboard.press('ArrowRight')
+  await page.waitForTimeout(400)
+  await expect(page.locator('#sub-content')).toBeVisible({ timeout: 5000 })
+
+  // open nested
+  await page.keyboard.press('ArrowDown')
+  await page.waitForTimeout(100)
+  await page.keyboard.press('ArrowRight')
+  await page.waitForTimeout(400)
+  await expect(page.locator('#nested-content')).toBeVisible({ timeout: 5000 })
+
+  // nested center must be far from its PARENT sub center (not root)
+  const centers = await page.evaluate(() => {
+    const rect = (id: string) => {
+      const r = document.getElementById(id)!.getBoundingClientRect()
+      return { cx: r.x + r.width / 2, cy: r.y + r.height / 2 }
+    }
+    return { sub: rect('sub-content'), nested: rect('nested-content') }
+  })
+
+  const dx = Math.abs(centers.nested.cx - centers.sub.cx)
+  const dy = Math.abs(centers.nested.cy - centers.sub.cy)
+  const distance = Math.sqrt(dx * dx + dy * dy)
+
+  // centers must be far apart - nested should NOT sit on top of parent sub
+  expect(distance).toBeGreaterThan(100)
+})

package/tests/MenuSubSafePolygon.test.tsx

@@ -0,0 +1,97 @@
+import { expect, test } from '@playwright/test'
+
+import { setupPage } from './test-utils'
+
+test.beforeEach(async ({ page }) => {
+  await setupPage(page, { name: 'MenuSubCase', type: 'useCase' })
+})
+
+/**
+ * Tests for Menu Submenu SafePolygon behavior
+ */
+
+test('submenu has data-side attribute required for safePolygon', async ({ page }) => {
+  await page.waitForLoadState('networkidle')
+
+  const menuTrigger = page.locator('#menu-trigger')
+  const menuContent = page.locator('#menu-content')
+  const submenuTrigger = page.locator('#submenu-trigger')
+  const submenuContent = page.locator('#submenu-content')
+
+  await menuTrigger.click()
+  await expect(menuContent).toBeVisible({ timeout: 5000 })
+
+  await submenuTrigger.hover()
+  await page.waitForTimeout(200)
+  await expect(submenuContent).toBeVisible({ timeout: 5000 })
+
+  // data-side tells safePolygon which direction the submenu is
+  // Without it, isPointerMovingToSubmenu always returns false
+  const dataSide = await submenuContent.getAttribute('data-side')
+  expect(dataSide).toBe('right')
+})
+
+test('safePolygon keeps submenu open when mouse crosses parent menu items', async ({
+  page,
+}) => {
+  await page.waitForLoadState('networkidle')
+
+  const menuTrigger = page.locator('#menu-trigger')
+  const menuContent = page.locator('#menu-content')
+  const submenuTrigger = page.locator('#submenu-trigger')
+  const submenuContent = page.locator('#submenu-content')
+  const menuItem4 = page.locator('#menu-item-4') // Below the submenu trigger
+
+  await menuTrigger.click()
+  await expect(menuContent).toBeVisible({ timeout: 5000 })
+
+  await submenuTrigger.hover()
+  await page.waitForTimeout(200)
+  await expect(submenuContent).toBeVisible({ timeout: 5000 })
+
+  // Get positions
+  const triggerBox = await submenuTrigger.boundingBox()
+  const submenuBox = await submenuContent.boundingBox()
+  const item4Box = await menuItem4.boundingBox()
+
+  if (!triggerBox || !submenuBox || !item4Box) {
+    throw new Error('Could not get bounding boxes')
+  }
+
+  // Start at the submenu trigger
+  const startX = triggerBox.x + triggerBox.width / 2
+  const startY = triggerBox.y + triggerBox.height / 2
+
+  // End inside submenu content - but path goes DOWN through item4's vertical space
+  // then RIGHT into the submenu
+  const endX = submenuBox.x + submenuBox.width / 2
+  const endY = submenuBox.y + submenuBox.height - 20 // Bottom of submenu
+
+  await page.mouse.move(startX, startY)
+  await page.waitForTimeout(30)
+
+  // Move diagonally DOWN and RIGHT
+  // This path crosses through the area where item4 is located horizontally
+  // Without safePolygon, hovering over item4 would close the submenu
+  const steps = 12
+  for (let i = 1; i <= steps; i++) {
+    const progress = i / steps
+    const x = startX + (endX - startX) * progress
+    const y = startY + (endY - startY) * progress
+    await page.mouse.move(x, y)
+    await page.waitForTimeout(20)
+  }
+
+  // With safePolygon working:
+  // - When leaving trigger, polygon is created with side='right'
+  // - Mouse moving right matches side='right', so isPointerMovingToSubmenu=true
+  // - onItemEnter on item4 calls preventDefault, item4 doesn't steal focus
+  // - Submenu stays open
+  //
+  // Without fix (side=undefined):
+  // - isPointerMovingToSubmenu returns false (pointerDir 'right' !== undefined)
+  // - onItemEnter doesn't preventDefault
+  // - item4 gets focused, triggering onFocusOutside on submenu
+  // - Submenu closes
+  await expect(submenuContent).toBeVisible()
+})

package/tests/MenuSubStyled.test.tsx

@@ -0,0 +1,40 @@
+import { expect, test } from '@playwright/test'
+
+import { setupPage } from './test-utils'
+
+test.beforeEach(async ({ page }) => {
+  await setupPage(page, { name: 'MenuSubStyledCase', type: 'useCase' })
+})
+
+test('styled(Menu.SubContent) positions submenu correctly', async ({ page }) => {
+  await page.waitForLoadState('networkidle')
+
+  // open the menu
+  await page.click('#menu-trigger')
+  await page.waitForTimeout(300)
+
+  // hover on submenu trigger to open submenu
+  await page.hover('#submenu-trigger')
+  await page.waitForTimeout(500)
+
+  // check that submenu is visible
+  const submenuContent = page.locator('#submenu-content')
+  await expect(submenuContent).toBeVisible()
+
+  // get positions
+  const triggerBox = await page.locator('#submenu-trigger').boundingBox()
+  const submenuBox = await submenuContent.boundingBox()
+
+  expect(triggerBox).toBeTruthy()
+  expect(submenuBox).toBeTruthy()
+
+  // submenu should be positioned to the right of the trigger, not at top-left (0,0)
+  // the submenu's left edge should be near or to the right of the trigger's right edge
+  expect(submenuBox!.x).toBeGreaterThan(triggerBox!.x)
+  // the submenu should not be at y=0 (top of viewport)
+  expect(submenuBox!.y).toBeGreaterThan(50)
+
+  // verify submenu has items
+  await expect(page.locator('#submenu-item-1')).toBeVisible()
+  await expect(page.locator('#submenu-item-2')).toBeVisible()
+})

package/tests/MenuTheme.test.tsx

@@ -0,0 +1,34 @@
+import { expect, test } from '@playwright/test'
+import { setupPage } from './test-utils'
+
+test.describe('Menu Theme Inheritance', () => {
+  test.beforeEach(async ({ page }) => {
+    await setupPage(page, { name: 'MenuThemeCase', type: 'useCase' })
+  })
+
+  test('menu content inherits theme from parent context', async ({ page }) => {
+    const trigger = page.getByTestId('menu-trigger')
+    await expect(trigger).toBeVisible()
+
+    await trigger.focus()
+    await page.keyboard.press('Enter')
+    await page.waitForTimeout(300)
+
+    const menuContent = page.getByTestId('menu-content')
+    await expect(menuContent).toBeVisible()
+
+    // check that menu content ancestor has the theme class
+    const hasThemeClass = await menuContent.evaluate((el) => {
+      let current = el.parentElement
+      while (current) {
+        if (current.className?.includes('t_blue')) {
+          return true
+        }
+        current = current.parentElement
+      }
+      return false
+    })
+
+    expect(hasThemeClass).toBe(true)
+  })
+})

package/tests/MenuUnstyled.test.tsx

@@ -0,0 +1,56 @@
+import { expect, test } from '@playwright/test'
+import { setupPage } from './test-utils'
+
+test.beforeEach(async ({ page }) => {
+  await setupPage(page, { name: 'MenuUnstyledCase', type: 'useCase' })
+})
+
+test('Menu.Content unstyled removes all default styles', async ({ page }) => {
+  // open the unstyled menu
+  await page.getByTestId('unstyled-menu-trigger').click()
+  await page.waitForTimeout(300)
+
+  const unstyledContent = page.getByTestId('unstyled-menu-content')
+  await expect(unstyledContent).toBeVisible()
+
+  // check that unstyled menu has no background/padding/border from defaults
+  const unstyledStyles = await unstyledContent.evaluate((el) => {
+    const computed = window.getComputedStyle(el)
+    return {
+      backgroundColor: computed.backgroundColor,
+      padding: computed.padding,
+      borderWidth: computed.borderWidth,
+    }
+  })
+
+  // unstyled should have transparent/none background (rgba(0,0,0,0) or transparent)
+  expect(
+    unstyledStyles.backgroundColor === 'rgba(0, 0, 0, 0)' ||
+      unstyledStyles.backgroundColor === 'transparent'
+  ).toBe(true)
+
+  // close the unstyled menu
+  await page.keyboard.press('Escape')
+  await page.waitForTimeout(200)
+
+  // open the styled menu (default)
+  await page.getByTestId('styled-menu-trigger').click()
+  await page.waitForTimeout(300)
+
+  const styledContent = page.getByTestId('styled-menu-content')
+  await expect(styledContent).toBeVisible()
+
+  // check that styled menu has background applied
+  const styledStyles = await styledContent.evaluate((el) => {
+    const computed = window.getComputedStyle(el)
+    return {
+      backgroundColor: computed.backgroundColor,
+    }
+  })
+
+  // styled should have a real background color (not transparent)
+  expect(
+    styledStyles.backgroundColor !== 'rgba(0, 0, 0, 0)' &&
+      styledStyles.backgroundColor !== 'transparent'
+  ).toBe(true)
+})