@hanzogui/kitchen-sink 3.0.5

package/tests/MenuItemPseudoOverride.test.tsx

@@ -0,0 +1,231 @@
+import { expect, test } from '@playwright/test'
+import { setupPage } from './test-utils'
+
+test.beforeEach(async ({ page }) => {
+  await setupPage(page, { name: 'MenuItemPseudoOverrideCase', type: 'useCase' })
+})
+
+test('spread style object: pseudo styles should override variant defaults', async ({
+  page,
+}) => {
+  // open the menu with spread style object (no unstyled)
+  await page.getByTestId('spread-trigger').click()
+  await page.waitForTimeout(300)
+
+  const spreadItem = page.getByTestId('spread-item')
+  await expect(spreadItem).toBeVisible()
+
+  // focus the item to trigger focusStyle
+  await spreadItem.focus()
+  await page.waitForTimeout(100)
+
+  // check that the custom focusStyle is applied (red), not the default variant
+  const focusedStyles = await spreadItem.evaluate((el) => {
+    const computed = window.getComputedStyle(el)
+    return {
+      backgroundColor: computed.backgroundColor,
+    }
+  })
+
+  // user specified rgb(255, 0, 0) which should override the default $backgroundHover
+  expect(focusedStyles.backgroundColor).toBe('rgb(255, 0, 0)')
+})
+
+test('spread style with unstyled: works correctly', async ({ page }) => {
+  // open the menu with spread style + unstyled
+  await page.getByTestId('spread-unstyled-trigger').click()
+  await page.waitForTimeout(300)
+
+  const unstyledItem = page.getByTestId('spread-unstyled-item')
+  await expect(unstyledItem).toBeVisible()
+
+  // focus the item to trigger focusStyle
+  await unstyledItem.focus()
+  await page.waitForTimeout(100)
+
+  // check that the custom focusStyle is applied
+  const focusedStyles = await unstyledItem.evaluate((el) => {
+    const computed = window.getComputedStyle(el)
+    return {
+      backgroundColor: computed.backgroundColor,
+    }
+  })
+
+  // user specified rgb(255, 0, 0)
+  expect(focusedStyles.backgroundColor).toBe('rgb(255, 0, 0)')
+})
+
+test('direct props: user-provided pseudo styles override variant defaults', async ({
+  page,
+}) => {
+  // open the menu with custom pseudo styles
+  await page.getByTestId('custom-trigger').click()
+  await page.waitForTimeout(300)
+
+  const customItem = page.getByTestId('custom-item')
+  await expect(customItem).toBeVisible()
+
+  // focus the item to trigger focusStyle
+  await customItem.focus()
+  await page.waitForTimeout(100)
+
+  // check that the custom focusStyle is applied (red), not the default variant
+  const focusedStyles = await customItem.evaluate((el) => {
+    const computed = window.getComputedStyle(el)
+    return {
+      backgroundColor: computed.backgroundColor,
+    }
+  })
+
+  // user specified rgb(255, 0, 0) which should override the default $backgroundHover
+  expect(focusedStyles.backgroundColor).toBe('rgb(255, 0, 0)')
+})
+
+test('unstyled item with custom pseudo styles works correctly', async ({ page }) => {
+  // open the unstyled menu
+  await page.getByTestId('unstyled-trigger').click()
+  await page.waitForTimeout(300)
+
+  const unstyledItem = page.getByTestId('unstyled-item')
+  await expect(unstyledItem).toBeVisible()
+
+  // focus the item to trigger focusStyle
+  await unstyledItem.focus()
+  await page.waitForTimeout(100)
+
+  // check that the custom focusStyle is applied
+  const focusedStyles = await unstyledItem.evaluate((el) => {
+    const computed = window.getComputedStyle(el)
+    return {
+      backgroundColor: computed.backgroundColor,
+    }
+  })
+
+  // user specified rgb(255, 0, 0)
+  expect(focusedStyles.backgroundColor).toBe('rgb(255, 0, 0)')
+})
+
+test('default item uses variant default pseudo styles', async ({ page }) => {
+  // open the menu
+  await page.getByTestId('custom-trigger').click()
+  await page.waitForTimeout(300)
+
+  const defaultItem = page.getByTestId('default-item')
+  await expect(defaultItem).toBeVisible()
+
+  // focus the item to trigger focusStyle
+  await defaultItem.focus()
+  await page.waitForTimeout(100)
+
+  // check that the default focusStyle is applied (not red, but the theme's $backgroundHover)
+  const focusedStyles = await defaultItem.evaluate((el) => {
+    const computed = window.getComputedStyle(el)
+    return {
+      backgroundColor: computed.backgroundColor,
+    }
+  })
+
+  // should NOT be red (255, 0, 0) - should be the default variant's $backgroundHover
+  expect(focusedStyles.backgroundColor).not.toBe('rgb(255, 0, 0)')
+  // should have some background color applied
+  expect(focusedStyles.backgroundColor).not.toBe('rgba(0, 0, 0, 0)')
+})
+
+test('shorthands: pseudo styles should override variant defaults', async ({ page }) => {
+  // open the menu with shorthand styles (no unstyled)
+  await page.getByTestId('shorthand-trigger').click()
+  await page.waitForTimeout(300)
+
+  const shorthandItem = page.getByTestId('shorthand-item')
+  await expect(shorthandItem).toBeVisible()
+
+  // focus the item to trigger focusStyle
+  await shorthandItem.focus()
+  await page.waitForTimeout(100)
+
+  // check that the custom focusStyle is applied (red)
+  const focusedStyles = await shorthandItem.evaluate((el) => {
+    const computed = window.getComputedStyle(el)
+    return {
+      backgroundColor: computed.backgroundColor,
+    }
+  })
+
+  // user specified bg: 'rgb(255, 0, 0)' (shorthand) which should override default
+  expect(focusedStyles.backgroundColor).toBe('rgb(255, 0, 0)')
+})
+
+test('shorthands with unstyled: works correctly', async ({ page }) => {
+  // open the menu with shorthand styles + unstyled
+  await page.getByTestId('shorthand-unstyled-trigger').click()
+  await page.waitForTimeout(300)
+
+  const shorthandUnstyledItem = page.getByTestId('shorthand-unstyled-item')
+  await expect(shorthandUnstyledItem).toBeVisible()
+
+  // focus the item to trigger focusStyle
+  await shorthandUnstyledItem.focus()
+  await page.waitForTimeout(100)
+
+  // check that the custom focusStyle is applied
+  const focusedStyles = await shorthandUnstyledItem.evaluate((el) => {
+    const computed = window.getComputedStyle(el)
+    return {
+      backgroundColor: computed.backgroundColor,
+    }
+  })
+
+  // user specified bg: 'rgb(255, 0, 0)' (shorthand)
+  expect(focusedStyles.backgroundColor).toBe('rgb(255, 0, 0)')
+})
+
+test('styled() component: pseudo styles should override variant defaults', async ({
+  page,
+}) => {
+  // open the menu with styled() component (no unstyled)
+  await page.getByTestId('styled-trigger').click()
+  await page.waitForTimeout(300)
+
+  const styledItem = page.getByTestId('styled-item')
+  await expect(styledItem).toBeVisible()
+
+  // focus the item to trigger focusStyle
+  await styledItem.focus()
+  await page.waitForTimeout(100)
+
+  // check that the custom focusStyle is applied (red)
+  const focusedStyles = await styledItem.evaluate((el) => {
+    const computed = window.getComputedStyle(el)
+    return {
+      backgroundColor: computed.backgroundColor,
+    }
+  })
+
+  // styled component specified backgroundColor: 'rgb(255, 0, 0)' in focusStyle
+  // this should override the variant's default $backgroundHover
+  expect(focusedStyles.backgroundColor).toBe('rgb(255, 0, 0)')
+})
+
+test('styled() component with unstyled: works correctly', async ({ page }) => {
+  // open the menu with styled() component + unstyled
+  await page.getByTestId('styled-unstyled-trigger').click()
+  await page.waitForTimeout(300)
+
+  const styledUnstyledItem = page.getByTestId('styled-unstyled-item')
+  await expect(styledUnstyledItem).toBeVisible()
+
+  // focus the item to trigger focusStyle
+  await styledUnstyledItem.focus()
+  await page.waitForTimeout(100)
+
+  // check that the custom focusStyle is applied
+  const focusedStyles = await styledUnstyledItem.evaluate((el) => {
+    const computed = window.getComputedStyle(el)
+    return {
+      backgroundColor: computed.backgroundColor,
+    }
+  })
+
+  // styled component specified backgroundColor: 'rgb(255, 0, 0)' in focusStyle
+  expect(focusedStyles.backgroundColor).toBe('rgb(255, 0, 0)')
+})

package/tests/MenuMultiTrigger.test.tsx

@@ -0,0 +1,101 @@
+import { expect, test } from '@playwright/test'
+import { getBoundingRect, setupPage } from './test-utils'
+
+test.describe('Menu Multi-Trigger', () => {
+  test.beforeEach(async ({ page }) => {
+    await setupPage(page, {
+      name: 'MenuMultiTriggerCase',
+      type: 'useCase',
+      waitExtra: true,
+    })
+  })
+
+  test('clicking trigger A opens content near trigger A', async ({ page }) => {
+    const triggerA = page.getByTestId('trigger-a')
+    await triggerA.click()
+    await page.waitForTimeout(300)
+
+    const content = page.getByTestId('menu-content')
+    await expect(content).toBeVisible()
+
+    const triggerBox = await getBoundingRect(page, '[data-testid="trigger-a"]')
+    const contentBox = await getBoundingRect(page, '[data-testid="menu-content"]')
+    expect(triggerBox).not.toBeNull()
+    expect(contentBox).not.toBeNull()
+
+    // content should be horizontally near trigger A
+    expect(Math.abs(contentBox!.x - triggerBox!.x)).toBeLessThan(50)
+  })
+
+  test('clicking trigger B re-anchors content to trigger B', async ({ page }) => {
+    // open via A first
+    const triggerA = page.getByTestId('trigger-a')
+    await triggerA.click()
+    await page.waitForTimeout(300)
+    await expect(page.getByTestId('menu-content')).toBeVisible()
+
+    // close
+    await page.keyboard.press('Escape')
+    await page.waitForTimeout(300)
+
+    // open via B
+    const triggerB = page.getByTestId('trigger-b')
+    await triggerB.click()
+    await page.waitForTimeout(300)
+
+    const content = page.getByTestId('menu-content')
+    await expect(content).toBeVisible()
+
+    const triggerBBox = await getBoundingRect(page, '[data-testid="trigger-b"]')
+    const contentBox = await getBoundingRect(page, '[data-testid="menu-content"]')
+    expect(triggerBBox).not.toBeNull()
+    expect(contentBox).not.toBeNull()
+
+    // content should be near trigger B, not trigger A
+    expect(Math.abs(contentBox!.x - triggerBBox!.x)).toBeLessThan(50)
+  })
+
+  test('only the active trigger has data-state=open', async ({ page }) => {
+    const triggerA = page.getByTestId('trigger-a')
+    const triggerB = page.getByTestId('trigger-b')
+    const triggerC = page.getByTestId('trigger-c')
+
+    await triggerB.click()
+    await page.waitForTimeout(300)
+    await expect(page.getByTestId('menu-content')).toBeVisible()
+
+    await expect(triggerA).toHaveAttribute('data-state', 'closed')
+    await expect(triggerB).toHaveAttribute('data-state', 'open')
+    await expect(triggerC).toHaveAttribute('data-state', 'closed')
+  })
+
+  test('keyboard open via Enter re-anchors to focused trigger', async ({ page }) => {
+    const triggerC = page.getByTestId('trigger-c')
+    await triggerC.focus()
+    await page.keyboard.press('Enter')
+    await page.waitForTimeout(300)
+
+    const content = page.getByTestId('menu-content')
+    await expect(content).toBeVisible()
+
+    const triggerCBox = await getBoundingRect(page, '[data-testid="trigger-c"]')
+    const contentBox = await getBoundingRect(page, '[data-testid="menu-content"]')
+    expect(triggerCBox).not.toBeNull()
+    expect(contentBox).not.toBeNull()
+
+    // content should be near trigger C
+    expect(Math.abs(contentBox!.x - triggerCBox!.x)).toBeLessThan(50)
+  })
+
+  test('close returns focus to the trigger that opened the menu', async ({ page }) => {
+    const triggerB = page.getByTestId('trigger-b')
+    await triggerB.click()
+    await page.waitForTimeout(300)
+    await expect(page.getByTestId('menu-content')).toBeVisible()
+
+    await page.keyboard.press('Escape')
+    await page.waitForTimeout(300)
+
+    await expect(triggerB).toBeFocused()
+  })
+})

package/tests/MenuOverflow.test.tsx

@@ -0,0 +1,93 @@
+import { expect, test } from '@playwright/test'
+import { setupPage } from './test-utils'
+
+// Use smaller viewport to ensure menu needs to scroll
+test.use({ viewport: { width: 800, height: 600 } })
+
+test.describe('Menu Overflow', () => {
+  test.beforeEach(async ({ page }) => {
+    await setupPage(page, { name: 'MenuOverflowCase', type: 'useCase' })
+  })
+
+  test('menu content is constrained to max height', 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()
+
+    // get menu content bounding box and viewport dimensions
+    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
+      expect(boundingBox.y).toBeGreaterThanOrEqual(0)
+      expect(boundingBox.y + boundingBox.height).toBeLessThanOrEqual(viewportSize.height)
+      // menu height should be constrained (less than total items would need)
+      expect(boundingBox.height).toBeLessThan(1000) // 30 items at ~33px each would be ~1000px
+    }
+  })
+
+  test('menu scroll view is scrollable', async ({ page }) => {
+    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()
+
+    // check that scroll view has overflow (is scrollable)
+    const isScrollable = await menuScrollView.evaluate((el) => {
+      return el.scrollHeight > el.clientHeight
+    })
+
+    expect(isScrollable).toBe(true)
+  })
+
+  test('scrollbars are hidden', async ({ page }) => {
+    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()
+
+    // check that scrollbar-width is none (Firefox/modern browsers)
+    const scrollbarWidth = await menuScrollView.evaluate((el) => {
+      return window.getComputedStyle(el).scrollbarWidth
+    })
+
+    expect(scrollbarWidth).toBe('none')
+  })
+
+  test('first item is visible and last item requires scrolling', async ({ page }) => {
+    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()
+
+    // first item should be visible
+    const firstItem = page.getByTestId('menu-item-1')
+    await expect(firstItem).toBeVisible()
+
+    // last item should exist but not be in view (requires scrolling)
+    const lastItem = page.getByTestId('menu-item-30')
+    await expect(lastItem).toBeAttached()
+    await expect(lastItem).not.toBeInViewport()
+  })
+})

package/tests/MenuStayInFrame.test.tsx

@@ -0,0 +1,102 @@
+import { expect, test } from '@playwright/test'
+
+test.describe('Menu stayInFrame', () => {
+  test('Menu bottom placement should not cover trigger', async ({ page }) => {
+    // Small viewport to test constraint behavior
+    await page.setViewportSize({ width: 400, height: 300 })
+
+    await page.goto('/?test=MenuBottomCase')
+    await page.waitForTimeout(500)
+
+    const trigger = page.getByTestId('menu-trigger')
+    const triggerBox = await trigger.boundingBox()
+    await trigger.click()
+    await page.waitForTimeout(300)
+
+    const menuContent = page.getByTestId('menu-content')
+    await expect(menuContent).toBeVisible()
+
+    const menuBox = await menuContent.boundingBox()
+    const viewport = page.viewportSize()!
+    const padding = 10
+
+    // Menu should be BELOW the trigger (placement="bottom-start", allowFlip={false})
+    // Menu top should be >= trigger bottom (with some tolerance for offset)
+    expect(menuBox!.y).toBeGreaterThanOrEqual(triggerBox!.y + triggerBox!.height - 5)
+
+    // Menu should fit within viewport with padding
+    expect(menuBox!.y + menuBox!.height).toBeLessThanOrEqual(
+      viewport.height - padding + 2
+    )
+  })
+
+  test('menu should not overflow viewport when near bottom edge', async ({ page }) => {
+    // Set a small viewport to make it easier to test overflow
+    await page.setViewportSize({ width: 400, height: 300 })
+
+    await page.goto('/?test=MenuOverflowCase')
+    await page.waitForTimeout(500)
+
+    // Click the menu trigger (it's at the bottom of the page in this test case)
+    const trigger = page.getByTestId('menu-trigger')
+    await trigger.click()
+    await page.waitForTimeout(300)
+
+    // Get the menu content element
+    const menuContent = page.getByTestId('menu-content')
+    await expect(menuContent).toBeVisible()
+
+    // Get the bounding box of the menu
+    const menuBox = await menuContent.boundingBox()
+    expect(menuBox).not.toBeNull()
+
+    // Get viewport size
+    const viewport = page.viewportSize()
+    expect(viewport).not.toBeNull()
+
+    // Menu should not overflow the viewport with 10px padding
+    const padding = 10
+
+    // Check that menu has at least 10px padding from top
+    expect(menuBox!.y).toBeGreaterThanOrEqual(padding - 2) // 2px tolerance
+
+    // Check that menu has at least 10px padding from bottom
+    expect(menuBox!.y + menuBox!.height).toBeLessThanOrEqual(
+      viewport!.height - padding + 2
+    )
+
+    // Check that menu right doesn't exceed viewport right
+    expect(menuBox!.x + menuBox!.width).toBeLessThanOrEqual(viewport!.width - padding + 5)
+
+    // Check that menu left doesn't go past viewport left
+    expect(menuBox!.x).toBeGreaterThanOrEqual(padding - 5)
+  })
+
+  test('menu should flip when not enough space below', async ({ page }) => {
+    await page.setViewportSize({ width: 400, height: 250 })
+
+    await page.goto('/?test=MenuOverflowCase')
+    await page.waitForTimeout(500)
+
+    const trigger = page.getByTestId('menu-trigger')
+    const triggerBox = await trigger.boundingBox()
+
+    await trigger.click()
+    await page.waitForTimeout(300)
+
+    const menuContent = page.getByTestId('menu-content')
+    await expect(menuContent).toBeVisible()
+
+    const menuBox = await menuContent.boundingBox()
+    expect(menuBox).not.toBeNull()
+    expect(triggerBox).not.toBeNull()
+
+    // Since trigger is at bottom and viewport is small, menu should flip to appear above
+    // OR stay within bounds via shift
+    const viewport = page.viewportSize()!
+
+    // The key assertion: menu should be fully visible within viewport
+    expect(menuBox!.y).toBeGreaterThanOrEqual(0)
+    expect(menuBox!.y + menuBox!.height).toBeLessThanOrEqual(viewport.height)
+  })
+})