@hanzogui/kitchen-sink 3.0.5

package/tests/SelectInnerPositioning.test.tsx

@@ -0,0 +1,82 @@
+import { expect, test } from '@playwright/test'
+import { setupPage } from './test-utils'
+
+test.describe('Select Inner Positioning', () => {
+  test.beforeEach(async ({ page }) => {
+    await setupPage(page, { name: 'SelectFocusScopeCase', type: 'useCase' })
+  })
+
+  test('selected item aligns with trigger vertically', async ({ page }) => {
+    // first select banana, then reopen to check alignment
+    const trigger = page.getByTestId('default-select-trigger')
+    const triggerBox = await trigger.boundingBox()
+    expect(triggerBox).toBeTruthy()
+
+    await trigger.click()
+    await page.waitForTimeout(400)
+
+    const viewport = page.getByTestId('default-select-viewport')
+    await expect(viewport).toBeVisible()
+
+    // banana is pre-selected (index 1), find its position
+    const banana = page.getByTestId('default-select-banana')
+    const bananaBox = await banana.boundingBox()
+    expect(bananaBox).toBeTruthy()
+
+    // the selected item (banana) should vertically overlap the trigger
+    const triggerCenter = triggerBox!.y + triggerBox!.height / 2
+    const bananaCenter = bananaBox!.y + bananaBox!.height / 2
+
+    // allow some tolerance for borders/padding
+    expect(Math.abs(triggerCenter - bananaCenter)).toBeLessThan(triggerBox!.height)
+  })
+
+  test('dropdown has constrained max-height', async ({ page }) => {
+    const trigger = page.getByTestId('basic-select-trigger')
+    await trigger.click()
+    await page.waitForTimeout(400)
+
+    const viewport = page.getByTestId('basic-select-viewport')
+    await expect(viewport).toBeVisible()
+    const viewportBox = await viewport.boundingBox()
+    expect(viewportBox).toBeTruthy()
+
+    // viewport should not exceed the window height
+    const windowHeight = await page.evaluate(() => window.innerHeight)
+    expect(viewportBox!.height).toBeLessThanOrEqual(windowHeight)
+  })
+
+  test('dropdown overlaps trigger on re-open after selection', async ({ page }) => {
+    const trigger = page.getByTestId('basic-select-trigger')
+
+    // open and select orange
+    await trigger.click()
+    await page.waitForTimeout(400)
+    const viewport = page.getByTestId('basic-select-viewport')
+    await expect(viewport).toBeVisible()
+
+    const orange = page.getByTestId('select-orange')
+    await orange.click()
+    await page.waitForTimeout(300)
+    await expect(viewport).not.toBeVisible()
+
+    // re-open
+    const triggerBox = await trigger.boundingBox()
+    expect(triggerBox).toBeTruthy()
+    await trigger.click()
+    await page.waitForTimeout(400)
+    await expect(viewport).toBeVisible()
+
+    const viewportBox = await viewport.boundingBox()
+    expect(viewportBox).toBeTruthy()
+
+    // viewport should still overlap the trigger
+    const triggerTop = triggerBox!.y
+    const triggerBottom = triggerBox!.y + triggerBox!.height
+    const viewportTop = viewportBox!.y
+    const viewportBottom = viewportBox!.y + viewportBox!.height
+    const verticalOverlap =
+      Math.min(triggerBottom, viewportBottom) - Math.max(triggerTop, viewportTop)
+    expect(verticalOverlap).toBeGreaterThan(0)
+  })
+})

package/tests/SelectKeyboardNav.test.tsx

@@ -0,0 +1,173 @@
+import { expect, test } from '@playwright/test'
+import { setupPage } from './test-utils'
+
+test.describe('Select Keyboard Navigation', () => {
+  test.beforeEach(async ({ page }) => {
+    await setupPage(page, { name: 'SelectFocusScopeCase', type: 'useCase' })
+  })
+
+  test('first item is focused on open', async ({ page }) => {
+    const trigger = page.getByTestId('basic-select-trigger')
+    await trigger.click()
+    await page.waitForTimeout(300)
+
+    // first item should be focused immediately on open
+    const appleItem = page.getByTestId('select-apple')
+    await expect(appleItem).toBeFocused()
+  })
+
+  test('arrow down moves to next item', async ({ page }) => {
+    const trigger = page.getByTestId('basic-select-trigger')
+    await trigger.click()
+    await page.waitForTimeout(300)
+
+    // first item focused on open
+    const appleItem = page.getByTestId('select-apple')
+    await expect(appleItem).toBeFocused()
+
+    // arrow down should move to banana (second item)
+    await page.keyboard.press('ArrowDown')
+    await page.waitForTimeout(100)
+
+    const bananaItem = page.getByTestId('select-banana')
+    await expect(bananaItem).toBeFocused()
+  })
+
+  test('arrow up moves to previous item', async ({ page }) => {
+    const trigger = page.getByTestId('basic-select-trigger')
+    await trigger.click()
+    await page.waitForTimeout(300)
+
+    // navigate down first
+    await page.keyboard.press('ArrowDown')
+    await page.waitForTimeout(100)
+
+    const bananaItem = page.getByTestId('select-banana')
+    await expect(bananaItem).toBeFocused()
+
+    // arrow up should go back to apple
+    await page.keyboard.press('ArrowUp')
+    await page.waitForTimeout(100)
+
+    const appleItem = page.getByTestId('select-apple')
+    await expect(appleItem).toBeFocused()
+  })
+
+  test('selected item is focused on re-open', async ({ page }) => {
+    const trigger = page.getByTestId('basic-select-trigger')
+
+    // open and select banana (index 1)
+    await trigger.click()
+    await page.waitForTimeout(300)
+    const bananaItem = page.getByTestId('select-banana')
+    await bananaItem.click()
+    await page.waitForTimeout(200)
+
+    // re-open - banana should be focused
+    await trigger.click()
+    await page.waitForTimeout(300)
+
+    await expect(bananaItem).toBeFocused()
+  })
+
+  test('arrow down from selected item goes to next', async ({ page }) => {
+    const trigger = page.getByTestId('basic-select-trigger')
+
+    // select banana
+    await trigger.click()
+    await page.waitForTimeout(300)
+    const bananaItem = page.getByTestId('select-banana')
+    await bananaItem.click()
+    await page.waitForTimeout(200)
+
+    // re-open
+    await trigger.click()
+    await page.waitForTimeout(300)
+
+    // banana should be focused
+    await expect(bananaItem).toBeFocused()
+
+    // arrow down should go to orange (next after banana)
+    await page.keyboard.press('ArrowDown')
+    await page.waitForTimeout(100)
+
+    const orangeItem = page.getByTestId('select-orange')
+    await expect(orangeItem).toBeFocused()
+  })
+
+  test('arrow up from selected item goes to previous', async ({ page }) => {
+    const trigger = page.getByTestId('basic-select-trigger')
+
+    // select banana
+    await trigger.click()
+    await page.waitForTimeout(300)
+    const bananaItem = page.getByTestId('select-banana')
+    await bananaItem.click()
+    await page.waitForTimeout(200)
+
+    // re-open
+    await trigger.click()
+    await page.waitForTimeout(300)
+
+    // banana should be focused
+    await expect(bananaItem).toBeFocused()
+
+    // arrow up should go to apple (before banana)
+    await page.keyboard.press('ArrowUp')
+    await page.waitForTimeout(100)
+
+    const appleItem = page.getByTestId('select-apple')
+    await expect(appleItem).toBeFocused()
+  })
+
+  // tests for selects with default/initial values (like the demo page)
+  test('default value select: selected item is focused on first open', async ({
+    page,
+  }) => {
+    const trigger = page.getByTestId('default-select-trigger')
+    await trigger.click()
+    await page.waitForTimeout(300)
+
+    // banana is the default value (index 1), should be focused on open
+    const bananaItem = page.getByTestId('default-select-banana')
+    await expect(bananaItem).toBeFocused()
+  })
+
+  test('default value select: arrow down from default selected item goes to next', async ({
+    page,
+  }) => {
+    const trigger = page.getByTestId('default-select-trigger')
+    await trigger.click()
+    await page.waitForTimeout(300)
+
+    // banana is default selected (index 1)
+    const bananaItem = page.getByTestId('default-select-banana')
+    await expect(bananaItem).toBeFocused()
+
+    // arrow down should go to orange (next after banana)
+    await page.keyboard.press('ArrowDown')
+    await page.waitForTimeout(100)
+
+    const orangeItem = page.getByTestId('default-select-orange')
+    await expect(orangeItem).toBeFocused()
+  })
+
+  test('default value select: arrow up from default selected item goes to previous', async ({
+    page,
+  }) => {
+    const trigger = page.getByTestId('default-select-trigger')
+    await trigger.click()
+    await page.waitForTimeout(300)
+
+    // banana is default selected (index 1)
+    const bananaItem = page.getByTestId('default-select-banana')
+    await expect(bananaItem).toBeFocused()
+
+    // arrow up should go to apple (before banana)
+    await page.keyboard.press('ArrowUp')
+    await page.waitForTimeout(100)
+
+    const appleItem = page.getByTestId('default-select-apple')
+    await expect(appleItem).toBeFocused()
+  })
+})

package/tests/SelectPositioning.test.tsx

@@ -0,0 +1,56 @@
+import { expect, test } from '@playwright/test'
+import { setupPage } from './test-utils'
+
+test.describe('Select Positioning', () => {
+  test.beforeEach(async ({ page }) => {
+    await setupPage(page, { name: 'SelectFocusScopeCase', type: 'useCase' })
+  })
+
+  test('dropdown overlaps the trigger (inner positioning)', async ({ page }) => {
+    const trigger = page.getByTestId('basic-select-trigger')
+    const triggerBox = await trigger.boundingBox()
+    expect(triggerBox).toBeTruthy()
+
+    await trigger.click()
+    await page.waitForTimeout(400)
+
+    const viewport = page.getByTestId('basic-select-viewport')
+    await expect(viewport).toBeVisible()
+    const viewportBox = await viewport.boundingBox()
+    expect(viewportBox).toBeTruthy()
+
+    // inner positioning: viewport should vertically overlap the trigger
+    const triggerTop = triggerBox!.y
+    const triggerBottom = triggerBox!.y + triggerBox!.height
+    const viewportTop = viewportBox!.y
+    const viewportBottom = viewportBox!.y + viewportBox!.height
+    const verticalOverlap =
+      Math.min(triggerBottom, viewportBottom) - Math.max(triggerTop, viewportTop)
+    expect(verticalOverlap).toBeGreaterThan(0)
+  })
+
+  test('lazyMount dropdown overlaps the trigger (inner positioning)', async ({
+    page,
+  }) => {
+    const trigger = page.getByTestId('lazy-select-trigger')
+    const triggerBox = await trigger.boundingBox()
+    expect(triggerBox).toBeTruthy()
+
+    await trigger.click()
+    await page.waitForTimeout(600)
+
+    const viewport = page.getByTestId('lazy-select-viewport')
+    await expect(viewport).toBeVisible()
+    const viewportBox = await viewport.boundingBox()
+    expect(viewportBox).toBeTruthy()
+
+    // inner positioning: viewport should vertically overlap the trigger
+    const triggerTop = triggerBox!.y
+    const triggerBottom = triggerBox!.y + triggerBox!.height
+    const viewportTop = viewportBox!.y
+    const viewportBottom = viewportBox!.y + viewportBox!.height
+    const verticalOverlap =
+      Math.min(triggerBottom, viewportBottom) - Math.max(triggerTop, viewportTop)
+    expect(verticalOverlap).toBeGreaterThan(0)
+  })
+})

package/tests/SelectTypeahead.test.tsx

@@ -0,0 +1,63 @@
+import { expect, test } from '@playwright/test'
+import { setupPage } from './test-utils'
+
+test.describe('Select Typeahead', () => {
+  test.beforeEach(async ({ page }) => {
+    await setupPage(page, { name: 'SelectFocusScopeCase', type: 'useCase' })
+  })
+
+  test('typing a letter focuses matching item', async ({ page }) => {
+    const trigger = page.getByTestId('basic-select-trigger')
+    await trigger.click()
+
+    const viewport = page.getByTestId('basic-select-viewport')
+    await expect(viewport).toBeVisible({ timeout: 5000 })
+    await page.waitForTimeout(300)
+
+    // type 'b' to jump to Banana
+    await page.keyboard.press('b')
+    await page.waitForTimeout(100)
+
+    const banana = page.getByTestId('select-banana')
+    await expect(banana).toBeFocused()
+  })
+
+  test('typing multiple letters narrows match', async ({ page }) => {
+    const trigger = page.getByTestId('basic-select-trigger')
+    await trigger.click()
+
+    const viewport = page.getByTestId('basic-select-viewport')
+    await expect(viewport).toBeVisible({ timeout: 5000 })
+    await page.waitForTimeout(300)
+
+    // type 'br' to match Broccoli (not Banana)
+    await page.keyboard.press('b')
+    await page.keyboard.press('r')
+    await page.waitForTimeout(100)
+
+    const broccoli = page.getByTestId('select-broccoli')
+    await expect(broccoli).toBeFocused()
+  })
+
+  test('typeahead resets after timeout', async ({ page }) => {
+    const trigger = page.getByTestId('basic-select-trigger')
+    await trigger.click()
+
+    const viewport = page.getByTestId('basic-select-viewport')
+    await expect(viewport).toBeVisible({ timeout: 5000 })
+    await page.waitForTimeout(300)
+
+    // type 'b' → Banana
+    await page.keyboard.press('b')
+    await page.waitForTimeout(100)
+    await expect(page.getByTestId('select-banana')).toBeFocused()
+
+    // wait for typeahead buffer to reset (750ms default)
+    await page.waitForTimeout(800)
+
+    // type 'c' → Carrot (not 'bc' continuation)
+    await page.keyboard.press('c')
+    await page.waitForTimeout(100)
+    await expect(page.getByTestId('select-carrot')).toBeFocused()
+  })
+})

package/tests/Shadows.test.tsx

@@ -0,0 +1,14 @@
+import { expect, test } from '@playwright/test'
+
+import { setupPage } from './test-utils'
+import { getStyles } from './utils'
+
+test.beforeEach(async ({ page }) => {
+  await setupPage(page, { name: 'Shadows', type: 'useCase' })
+})
+
+test(`shadows work`, async ({ page }) => {
+  const button = page.locator('#shadowed')
+  const styles = await getStyles(button)
+  expect(styles.boxShadow).toBe(`rgba(0, 0, 0, 0.04) 0px 0px 60px 0px`)
+})