@hanzogui/kitchen-sink 3.0.5

package/tests/RenderProp.test.tsx

@@ -0,0 +1,293 @@
+import { expect, test } from '@playwright/test'
+import { setupPage } from './test-utils'
+
+test.describe('Render Prop', () => {
+  test.beforeEach(async ({ page }) => {
+    await setupPage(page, { name: 'RenderPropCase', type: 'useCase' })
+  })
+
+  test.describe('styled() render prop', () => {
+    test('renders button element when render="button"', async ({ page }) => {
+      const element = page.getByTestId('styled-button')
+      await expect(element).toBeVisible()
+      const tagName = await element.evaluate((el) => el.tagName.toLowerCase())
+      expect(tagName).toBe('button')
+    })
+
+    test('renders anchor element when render="a"', async ({ page }) => {
+      const element = page.getByTestId('styled-anchor')
+      await expect(element).toBeVisible()
+      const tagName = await element.evaluate((el) => el.tagName.toLowerCase())
+      expect(tagName).toBe('a')
+      // Check href attribute is passed through
+      const href = await element.getAttribute('href')
+      expect(href).toBe('#')
+    })
+  })
+
+  test.describe('semantic elements', () => {
+    test('renders nav element', async ({ page }) => {
+      const element = page.getByTestId('styled-nav')
+      await expect(element).toBeVisible()
+      const tagName = await element.evaluate((el) => el.tagName.toLowerCase())
+      expect(tagName).toBe('nav')
+    })
+
+    test('renders main element', async ({ page }) => {
+      const element = page.getByTestId('styled-main')
+      await expect(element).toBeVisible()
+      const tagName = await element.evaluate((el) => el.tagName.toLowerCase())
+      expect(tagName).toBe('main')
+    })
+
+    test('renders section element', async ({ page }) => {
+      const element = page.getByTestId('styled-section')
+      await expect(element).toBeVisible()
+      const tagName = await element.evaluate((el) => el.tagName.toLowerCase())
+      expect(tagName).toBe('section')
+    })
+
+    test('renders article element', async ({ page }) => {
+      const element = page.getByTestId('styled-article')
+      await expect(element).toBeVisible()
+      const tagName = await element.evaluate((el) => el.tagName.toLowerCase())
+      expect(tagName).toBe('article')
+    })
+
+    test('renders footer element', async ({ page }) => {
+      const element = page.getByTestId('styled-footer')
+      await expect(element).toBeVisible()
+      const tagName = await element.evaluate((el) => el.tagName.toLowerCase())
+      expect(tagName).toBe('footer')
+    })
+  })
+
+  test.describe('form elements', () => {
+    test('renders form element', async ({ page }) => {
+      const element = page.getByTestId('styled-form')
+      await expect(element).toBeVisible()
+      const tagName = await element.evaluate((el) => el.tagName.toLowerCase())
+      expect(tagName).toBe('form')
+    })
+
+    test('renders fieldset element', async ({ page }) => {
+      const element = page.getByTestId('styled-fieldset')
+      await expect(element).toBeVisible()
+      const tagName = await element.evaluate((el) => el.tagName.toLowerCase())
+      expect(tagName).toBe('fieldset')
+    })
+
+    test('renders label element with htmlFor', async ({ page }) => {
+      const element = page.getByTestId('styled-label')
+      await expect(element).toBeVisible()
+      const tagName = await element.evaluate((el) => el.tagName.toLowerCase())
+      expect(tagName).toBe('label')
+      const htmlFor = await element.getAttribute('for')
+      expect(htmlFor).toBe('test-input')
+    })
+  })
+
+  test.describe('heading elements', () => {
+    test('renders h1 element', async ({ page }) => {
+      const element = page.getByTestId('styled-h1')
+      await expect(element).toBeVisible()
+      const tagName = await element.evaluate((el) => el.tagName.toLowerCase())
+      expect(tagName).toBe('h1')
+    })
+
+    test('renders h2 element', async ({ page }) => {
+      const element = page.getByTestId('styled-h2')
+      await expect(element).toBeVisible()
+      const tagName = await element.evaluate((el) => el.tagName.toLowerCase())
+      expect(tagName).toBe('h2')
+    })
+  })
+
+  test.describe('list elements', () => {
+    test('renders ul element', async ({ page }) => {
+      const element = page.getByTestId('styled-ul')
+      await expect(element).toBeVisible()
+      const tagName = await element.evaluate((el) => el.tagName.toLowerCase())
+      expect(tagName).toBe('ul')
+    })
+
+    test('renders li elements', async ({ page }) => {
+      const li1 = page.getByTestId('styled-li-1')
+      const li2 = page.getByTestId('styled-li-2')
+      await expect(li1).toBeVisible()
+      await expect(li2).toBeVisible()
+      const tagName1 = await li1.evaluate((el) => el.tagName.toLowerCase())
+      const tagName2 = await li2.evaluate((el) => el.tagName.toLowerCase())
+      expect(tagName1).toBe('li')
+      expect(tagName2).toBe('li')
+    })
+  })
+
+  test.describe('runtime render prop override', () => {
+    test('overrides to button at runtime', async ({ page }) => {
+      const element = page.getByTestId('runtime-button')
+      await expect(element).toBeVisible()
+      const tagName = await element.evaluate((el) => el.tagName.toLowerCase())
+      expect(tagName).toBe('button')
+    })
+
+    test('overrides to anchor at runtime', async ({ page }) => {
+      const element = page.getByTestId('runtime-anchor')
+      await expect(element).toBeVisible()
+      const tagName = await element.evaluate((el) => el.tagName.toLowerCase())
+      expect(tagName).toBe('a')
+    })
+  })
+
+  test.describe('Stack with render prop', () => {
+    test('Stack renders as section', async ({ page }) => {
+      const element = page.getByTestId('stack-as-section')
+      await expect(element).toBeVisible()
+      const tagName = await element.evaluate((el) => el.tagName.toLowerCase())
+      expect(tagName).toBe('section')
+    })
+
+    test('Stack renders as aside', async ({ page }) => {
+      const element = page.getByTestId('stack-as-aside')
+      await expect(element).toBeVisible()
+      const tagName = await element.evaluate((el) => el.tagName.toLowerCase())
+      expect(tagName).toBe('aside')
+    })
+  })
+
+  test.describe('Text with render prop', () => {
+    test('Text renders as span', async ({ page }) => {
+      const element = page.getByTestId('text-as-span')
+      await expect(element).toBeVisible()
+      const tagName = await element.evaluate((el) => el.tagName.toLowerCase())
+      expect(tagName).toBe('span')
+    })
+
+    test('Text renders as strong', async ({ page }) => {
+      const element = page.getByTestId('text-as-strong')
+      await expect(element).toBeVisible()
+      const tagName = await element.evaluate((el) => el.tagName.toLowerCase())
+      expect(tagName).toBe('strong')
+    })
+
+    test('Text renders as em', async ({ page }) => {
+      const element = page.getByTestId('text-as-em')
+      await expect(element).toBeVisible()
+      const tagName = await element.evaluate((el) => el.tagName.toLowerCase())
+      expect(tagName).toBe('em')
+    })
+  })
+
+  test.describe('styles are applied correctly', () => {
+    test('styled button has correct styles', async ({ page }) => {
+      const element = page.getByTestId('styled-button')
+      await expect(element).toBeVisible()
+
+      // Check cursor style
+      const cursor = await element.evaluate((el) => window.getComputedStyle(el).cursor)
+      expect(cursor).toBe('pointer')
+    })
+
+    test('styled nav has correct background', async ({ page }) => {
+      const element = page.getByTestId('styled-nav')
+      await expect(element).toBeVisible()
+
+      // Just verify the element has some background set
+      const bg = await element.evaluate(
+        (el) => window.getComputedStyle(el).backgroundColor
+      )
+      expect(bg).toBeTruthy()
+      expect(bg).not.toBe('rgba(0, 0, 0, 0)')
+    })
+  })
+
+  test.describe('JSX element render prop', () => {
+    test('renders JSX element with merged props', async ({ page }) => {
+      const element = page.getByTestId('jsx-element-render')
+      await expect(element).toBeVisible()
+
+      // Should render as anchor (from JSX element)
+      const tagName = await element.evaluate((el) => el.tagName.toLowerCase())
+      expect(tagName).toBe('a')
+
+      // Should have href from JSX element
+      const href = await element.getAttribute('href')
+      expect(href).toBe('/test-link')
+
+      // Should have custom data attribute from JSX element
+      const jsxAttr = await element.getAttribute('data-jsx-element')
+      expect(jsxAttr).toBe('true')
+    })
+
+    test('renders JSX button with type attribute', async ({ page }) => {
+      const element = page.getByTestId('jsx-element-button')
+      await expect(element).toBeVisible()
+
+      const tagName = await element.evaluate((el) => el.tagName.toLowerCase())
+      expect(tagName).toBe('button')
+
+      const type = await element.getAttribute('type')
+      expect(type).toBe('submit')
+
+      const jsxAttr = await element.getAttribute('data-jsx-button')
+      expect(jsxAttr).toBe('true')
+    })
+
+    test('JSX element has styles from Stack', async ({ page }) => {
+      const element = page.getByTestId('jsx-element-render')
+      await expect(element).toBeVisible()
+
+      // Should have padding and background from Stack props
+      const bg = await element.evaluate(
+        (el) => window.getComputedStyle(el).backgroundColor
+      )
+      expect(bg).toBeTruthy()
+      expect(bg).not.toBe('rgba(0, 0, 0, 0)')
+    })
+  })
+
+  test.describe('function render prop', () => {
+    test('renders with custom component via function', async ({ page }) => {
+      const element = page.getByTestId('function-render')
+      await expect(element).toBeVisible()
+
+      // Should render as button (from CustomButton)
+      const tagName = await element.evaluate((el) => el.tagName.toLowerCase())
+      expect(tagName).toBe('button')
+
+      // Should have custom data attribute from CustomButton
+      const customAttr = await element.getAttribute('data-custom-button')
+      expect(customAttr).toBe('true')
+    })
+
+    test('function render receives state object', async ({ page }) => {
+      const element = page.getByTestId('function-render-with-state')
+      await expect(element).toBeVisible()
+
+      // Check that state object is passed - initial state should be false
+      // Note: CSS driver doesn't track hover/press state - it uses CSS :hover
+      // The state object is still passed but hover/press may not update with CSS driver
+      const hoverAttr = await element.getAttribute('data-hover')
+      const pressAttr = await element.getAttribute('data-press')
+
+      // Should have the data attributes (state is passed to render function)
+      expect(hoverAttr).toBeDefined()
+      expect(pressAttr).toBeDefined()
+
+      // Initial values should be 'false'
+      expect(hoverAttr).toBe('false')
+      expect(pressAttr).toBe('false')
+    })
+
+    test('function render has styles from Stack', async ({ page }) => {
+      const element = page.getByTestId('function-render')
+      await expect(element).toBeVisible()
+
+      const bg = await element.evaluate(
+        (el) => window.getComputedStyle(el).backgroundColor
+      )
+      expect(bg).toBeTruthy()
+      expect(bg).not.toBe('rgba(0, 0, 0, 0)')
+    })
+  })
+})

package/tests/ScrollViewRef.test.tsx

@@ -0,0 +1,39 @@
+import { expect, test } from '@playwright/test'
+
+import { setupPage } from './test-utils'
+
+test.beforeEach(async ({ page }) => {
+  await setupPage(page, { name: 'ScrollViewRefCase', type: 'useCase' })
+})
+
+test(`ScrollView ref has scrollTo method`, async ({ page }) => {
+  const status = page.locator('#status')
+  await expect(status).toHaveText('ready')
+
+  await page.click('#scroll-to-btn')
+  await expect(status).toHaveText('scrolled-to-200')
+
+  // verify the scroll position changed
+  const scrollTop = await page.locator('#test-scrollview').evaluate((el) => el.scrollTop)
+  expect(scrollTop).toBe(200)
+})
+
+test(`ScrollView ref has scrollToEnd method`, async ({ page }) => {
+  const status = page.locator('#status')
+  await expect(status).toHaveText('ready')
+
+  await page.click('#scroll-to-end-btn')
+  await expect(status).toHaveText('scrolled-to-end')
+
+  // verify it scrolled to the end (scrollTop should be > 0)
+  const scrollTop = await page.locator('#test-scrollview').evaluate((el) => el.scrollTop)
+  expect(scrollTop).toBeGreaterThan(0)
+})
+
+test(`ScrollView ref has getScrollableNode method`, async ({ page }) => {
+  const status = page.locator('#status')
+  await expect(status).toHaveText('ready')
+
+  await page.click('#get-node-btn')
+  await expect(status).toHaveText('got-scrollable-node')
+})

package/tests/SelectClickHold.test.tsx

@@ -0,0 +1,147 @@
+import { expect, test } from '@playwright/test'
+import { setupPage } from './test-utils'
+
+/**
+ * Tests for Select click-and-hold-to-select behavior.
+ *
+ * This behavior allows users to:
+ * 1. Press and hold on the select trigger
+ * 2. Drag to an item while holding
+ * 3. Release to select that item
+ *
+ * This is a common native select pattern that was broken by Safari fixes.
+ */
+test.describe('Select Click and Hold', () => {
+  test.beforeEach(async ({ page }) => {
+    await setupPage(page, { name: 'SelectFocusScopeCase', type: 'useCase' })
+  })
+
+  test('click-and-hold-to-select works', async ({ page }) => {
+    const trigger = page.getByTestId('basic-select-trigger')
+    const triggerBox = await trigger.boundingBox()
+    expect(triggerBox).toBeTruthy()
+
+    // Get position of banana item (need to open first to measure)
+    await trigger.click()
+    await page.waitForTimeout(400) // Wait for menu to open and 300ms guard to pass
+
+    const bananaItem = page.getByTestId('select-banana')
+    await expect(bananaItem).toBeVisible()
+    const bananaBox = await bananaItem.boundingBox()
+    expect(bananaBox).toBeTruthy()
+
+    // Close the menu
+    await page.keyboard.press('Escape')
+    await page.waitForTimeout(200)
+
+    // Now perform click-and-hold-to-select:
+    // 1. Mouse down on trigger
+    // 2. Wait for menu to open (> 300ms to pass guard)
+    // 3. Move to banana item
+    // 4. Release to select
+
+    await page.mouse.move(
+      triggerBox!.x + triggerBox!.width / 2,
+      triggerBox!.y + triggerBox!.height / 2
+    )
+    await page.mouse.down()
+
+    // Wait for menu to open and the 300ms mouseUp guard to pass
+    await page.waitForTimeout(400)
+
+    // Menu should be open
+    await expect(bananaItem).toBeVisible()
+
+    // Move to banana item
+    await page.mouse.move(
+      bananaBox!.x + bananaBox!.width / 2,
+      bananaBox!.y + bananaBox!.height / 2
+    )
+    await page.waitForTimeout(50)
+
+    // Release to select
+    await page.mouse.up()
+    await page.waitForTimeout(200)
+
+    // Menu should close and banana should be selected
+    const selectViewport = page.getByTestId('basic-select-viewport')
+    await expect(selectViewport).not.toBeVisible()
+
+    // Trigger should show "Banana"
+    const triggerText = await trigger.textContent()
+    expect(triggerText).toContain('Banana')
+  })
+
+  test('quick click does not select item under cursor (Safari fix)', async ({ page }) => {
+    // This tests that the Safari fix still works - a quick click-release
+    // should NOT select an item even if the cursor happens to be over one
+
+    const trigger = page.getByTestId('basic-select-trigger')
+    const triggerBox = await trigger.boundingBox()
+    expect(triggerBox).toBeTruthy()
+
+    // Quick click to open
+    await trigger.click()
+
+    // Wait a moment for menu to open but NOT long enough for the guard to pass
+    await page.waitForTimeout(100)
+
+    const selectViewport = page.getByTestId('basic-select-viewport')
+    await expect(selectViewport).toBeVisible()
+
+    // The menu should be open and nothing should be selected yet
+    // (The initial click's mouseUp is blocked)
+    const triggerText = await trigger.textContent()
+    expect(triggerText).not.toContain('Apple')
+    expect(triggerText).not.toContain('Banana')
+
+    // Close menu
+    await page.keyboard.press('Escape')
+  })
+
+  test('click-and-release-too-fast does not select', async ({ page }) => {
+    // If user clicks and releases before the 300ms guard passes,
+    // nothing should be selected even if mouse is over an item
+
+    const trigger = page.getByTestId('basic-select-trigger')
+    const triggerBox = await trigger.boundingBox()
+    expect(triggerBox).toBeTruthy()
+
+    // First, open and get item positions
+    await trigger.click()
+    await page.waitForTimeout(400)
+
+    const appleItem = page.getByTestId('select-apple')
+    await expect(appleItem).toBeVisible()
+    const appleBox = await appleItem.boundingBox()
+    expect(appleBox).toBeTruthy()
+
+    // Close
+    await page.keyboard.press('Escape')
+    await page.waitForTimeout(200)
+
+    // Now do a fast click-move-release (under 300ms)
+    await page.mouse.move(
+      triggerBox!.x + triggerBox!.width / 2,
+      triggerBox!.y + triggerBox!.height / 2
+    )
+    await page.mouse.down()
+
+    // Wait just a tiny bit - not enough for the guard
+    await page.waitForTimeout(50)
+
+    // Move toward where apple would be and release quickly
+    await page.mouse.move(
+      appleBox!.x + appleBox!.width / 2,
+      appleBox!.y + appleBox!.height / 2
+    )
+    await page.mouse.up()
+
+    await page.waitForTimeout(200)
+
+    // The menu might still be open (that's fine) but nothing should be selected
+    const triggerText = await trigger.textContent()
+    expect(triggerText).not.toContain('Apple')
+    expect(triggerText).not.toContain('Banana')
+  })
+})

package/tests/SelectFocusScope.test.tsx

@@ -0,0 +1,176 @@
+import { expect, test } from '@playwright/test'
+import { setupPage } from './test-utils'
+
+test.describe('Select Focus Scope', () => {
+  test.beforeEach(async ({ page }) => {
+    await setupPage(page, { name: 'SelectFocusScopeCase', type: 'useCase' })
+  })
+
+  test('traps focus within select dropdown when open', async ({ page }) => {
+    await page.waitForLoadState('networkidle')
+
+    // open the basic select
+    const trigger = page.getByTestId('basic-select-trigger')
+    await trigger.click()
+
+    // wait for select viewport to be visible
+    const selectViewport = page.getByTestId('basic-select-viewport')
+    await expect(selectViewport).toBeVisible({ timeout: 5000 })
+
+    // wait for focus trap to settle (rAF-based)
+    await page.waitForTimeout(50)
+
+    // first item should be focused
+    const firstItem = page.getByTestId('select-apple')
+    await expect(firstItem).toBeFocused()
+
+    // arrow down to second item
+    await page.keyboard.press('ArrowDown')
+    await page.waitForTimeout(50)
+
+    const secondItem = page.getByTestId('select-banana')
+    await expect(secondItem).toBeFocused()
+
+    // enter selects the item and closes the select
+    await page.keyboard.press('Enter')
+    await page.waitForTimeout(100)
+
+    // select should be closed after enter
+    await expect(selectViewport).not.toBeVisible()
+
+    // focus should return to the trigger that opened it
+    await expect(trigger).toBeFocused()
+  })
+
+  test('allows selection with Enter key', async ({ page }) => {
+    await page.waitForLoadState('networkidle')
+
+    const trigger = page.getByTestId('basic-select-trigger')
+    await trigger.click()
+
+    const selectViewport = page.getByTestId('basic-select-viewport')
+    await expect(selectViewport).toBeVisible({ timeout: 5000 })
+    await page.waitForTimeout(300)
+
+    // apple is focused initially, navigate to banana
+    await page.keyboard.press('ArrowDown')
+    await page.waitForTimeout(100)
+
+    // Select with Enter
+    await page.keyboard.press('Enter')
+    await page.waitForTimeout(200)
+
+    // Select should close
+    await expect(selectViewport).not.toBeVisible()
+
+    // Trigger should show selected value
+    const triggerText = await trigger.textContent()
+    expect(triggerText).toContain('Banana')
+  })
+
+  test('allows selection with click', async ({ page }) => {
+    await page.waitForLoadState('networkidle')
+
+    const trigger = page.getByTestId('custom-select-trigger')
+    await trigger.click()
+
+    // Wait for any select viewport to be visible
+    const selectViewport = page.getByRole('listbox').first()
+    await expect(selectViewport).toBeVisible({ timeout: 5000 })
+
+    // Click on green option
+    const greenOption = page.getByTestId('select-green')
+    await greenOption.click()
+
+    // Select should close
+    await expect(selectViewport).not.toBeVisible()
+
+    // Trigger should show selected value
+    const triggerText = await trigger.textContent()
+    expect(triggerText).toContain('Green')
+  })
+
+  test('closes on Escape', async ({ page }) => {
+    await page.waitForLoadState('networkidle')
+
+    const trigger = page.getByTestId('small-select-trigger')
+    await trigger.click()
+
+    // Wait for any select viewport to be visible
+    const selectViewport = page.getByRole('listbox').first()
+    await expect(selectViewport).toBeVisible({ timeout: 5000 })
+
+    // Press Escape to close
+    await page.keyboard.press('Escape')
+    await page.waitForTimeout(200)
+
+    // Select should close
+    await expect(selectViewport).not.toBeVisible()
+
+    // Note: Select doesn't automatically restore focus to trigger like Dialog/Popover do
+  })
+
+  test('Escape closes select and returns focus to trigger', async ({ page }) => {
+    await page.waitForLoadState('networkidle')
+
+    // Open the small select
+    const trigger = page.getByTestId('small-select-trigger')
+    await trigger.click()
+
+    // Wait for any select viewport to be visible
+    const selectViewport = page.getByRole('listbox').first()
+    await expect(selectViewport).toBeVisible({ timeout: 5000 })
+    await page.waitForTimeout(300)
+
+    // Escape closes the select
+    await page.keyboard.press('Escape')
+    await page.waitForTimeout(200)
+
+    // Select should be closed after Escape
+    await expect(selectViewport).not.toBeVisible()
+
+    // focus should return to the trigger
+    await expect(trigger).toBeFocused()
+  })
+
+  test('handles arrow key navigation correctly', async ({ page }) => {
+    await page.waitForLoadState('networkidle')
+
+    const trigger = page.getByTestId('basic-select-trigger')
+    await trigger.click()
+
+    const selectViewport = page.getByTestId('basic-select-viewport')
+    await expect(selectViewport).toBeVisible({ timeout: 5000 })
+    await page.waitForTimeout(300)
+
+    // first item (apple) is focused on open
+    const apple = page.getByTestId('select-apple')
+    const isAppleFocused = await apple.evaluate((el) => el === document.activeElement)
+    expect(isAppleFocused).toBe(true)
+
+    // Navigate down through all items
+    await page.keyboard.press('ArrowDown') // banana
+    await page.waitForTimeout(50)
+    await page.keyboard.press('ArrowDown') // orange
+    await page.waitForTimeout(50)
+    await page.keyboard.press('ArrowDown') // carrot
+    await page.waitForTimeout(50)
+    await page.keyboard.press('ArrowDown') // broccoli
+    await page.waitForTimeout(50)
+
+    // Should be at broccoli now
+    const broccoli = page.getByTestId('select-broccoli')
+    const isBroccoliFocused = await broccoli.evaluate(
+      (el) => el === document.activeElement
+    )
+    expect(isBroccoliFocused).toBe(true)
+
+    // Navigate up
+    await page.keyboard.press('ArrowUp')
+    await page.waitForTimeout(50)
+
+    const carrot = page.getByTestId('select-carrot')
+    const isCarrotFocused = await carrot.evaluate((el) => el === document.activeElement)
+    expect(isCarrotFocused).toBe(true)
+  })
+})