@hanzogui/kitchen-sink 3.0.5

package/tests/DialogNested.test.tsx

@@ -0,0 +1,128 @@
+import { expect, test } from '@playwright/test'
+import { setupPage } from './test-utils'
+
+test.describe('Dialog Nested Stacking', () => {
+  test.beforeEach(async ({ page }) => {
+    await setupPage(page, { name: 'DialogNestedCase', type: 'useCase' })
+  })
+
+  test('nested dialog appears above parent dialog (z-index stacking)', async ({
+    page,
+  }) => {
+    await page.waitForLoadState('networkidle')
+
+    // Open parent dialog
+    const parentTrigger = page.getByTestId('parent-dialog-trigger')
+    await parentTrigger.click()
+
+    const parentDialog = page.getByTestId('parent-dialog-content')
+    await expect(parentDialog).toBeVisible({ timeout: 5000 })
+
+    // Wait for animation to complete
+    await page.waitForTimeout(300)
+
+    // Open nested dialog
+    const nestedTrigger = page.getByTestId('nested-dialog-trigger')
+    await nestedTrigger.click()
+
+    const nestedDialog = page.getByTestId('nested-dialog-content')
+    await expect(nestedDialog).toBeVisible({ timeout: 5000 })
+
+    // Wait for animation to complete
+    await page.waitForTimeout(300)
+
+    // Get the z-index values of both dialog portal containers
+    // GuiRoot wraps portal content in Theme > span, so z-index is on the inner span
+    const zIndexInfo = await page.evaluate(() => {
+      const portals = document.querySelectorAll('span[style*="z-index"]')
+      const zIndices: number[] = []
+
+      portals.forEach((portal) => {
+        const style = window.getComputedStyle(portal)
+        const zIndex = parseInt(style.zIndex, 10)
+        if (!isNaN(zIndex)) {
+          zIndices.push(zIndex)
+        }
+      })
+
+      return zIndices.sort((a, b) => a - b)
+    })
+
+    // Should have at least 2 different z-index values
+    expect(zIndexInfo.length).toBeGreaterThanOrEqual(2)
+
+    // The nested dialog should have a higher z-index than the parent
+    const parentZIndex = zIndexInfo[0]
+    const nestedZIndex = zIndexInfo[zIndexInfo.length - 1]
+
+    expect(nestedZIndex).toBeGreaterThan(parentZIndex)
+
+    // Verify the nested dialog is visually on top by checking element at center
+    const nestedBounds = await nestedDialog.boundingBox()
+    if (nestedBounds) {
+      const centerX = nestedBounds.x + nestedBounds.width / 2
+      const centerY = nestedBounds.y + nestedBounds.height / 2
+
+      const elementAtPoint = await page.evaluate(
+        ({ x, y }) => {
+          const el = document.elementFromPoint(x, y)
+          return el?.closest('[data-testid="nested-dialog-content"]') !== null
+        },
+        { x: centerX, y: centerY }
+      )
+
+      expect(elementAtPoint).toBe(true)
+    }
+  })
+
+  test('three levels of nested dialogs stack correctly', async ({ page }) => {
+    await page.waitForLoadState('networkidle')
+
+    // Open level 1 dialog
+    const level1Trigger = page.getByTestId('parent-dialog-trigger')
+    await level1Trigger.click()
+
+    const level1Dialog = page.getByTestId('parent-dialog-content')
+    await expect(level1Dialog).toBeVisible({ timeout: 5000 })
+
+    // Wait for animation
+    await page.waitForTimeout(300)
+
+    // Open level 2 dialog
+    const level2Trigger = page.getByTestId('nested-dialog-trigger')
+    await level2Trigger.click()
+
+    const level2Dialog = page.getByTestId('nested-dialog-content')
+    await expect(level2Dialog).toBeVisible({ timeout: 5000 })
+
+    // Wait for animation
+    await page.waitForTimeout(300)
+
+    // Open level 3 dialog
+    const level3Trigger = page.getByTestId('level-3-dialog-trigger')
+    await level3Trigger.click()
+
+    const level3Dialog = page.getByTestId('level-3-dialog-content')
+    await expect(level3Dialog).toBeVisible({ timeout: 5000 })
+
+    // Wait for animation
+    await page.waitForTimeout(300)
+
+    // Verify level 3 is on top visually
+    const level3Bounds = await level3Dialog.boundingBox()
+    if (level3Bounds) {
+      const centerX = level3Bounds.x + level3Bounds.width / 2
+      const centerY = level3Bounds.y + level3Bounds.height / 2
+
+      const elementAtPoint = await page.evaluate(
+        ({ x, y }) => {
+          const el = document.elementFromPoint(x, y)
+          return el?.closest('[data-testid="level-3-dialog-content"]') !== null
+        },
+        { x: centerX, y: centerY }
+      )
+
+      expect(elementAtPoint).toBe(true)
+    }
+  })
+})

package/tests/DialogOpenControlled.test.tsx

@@ -0,0 +1,42 @@
+import { expect, test } from '@playwright/test'
+import { setupPage } from './test-utils'
+
+/**
+ * Test for issue #3565
+ * Verifies that Dialog works when controlled with open={true}
+ *
+ * In JSDOM (Jest), this fails with "node.show is not a function"
+ * because JSDOM doesn't implement HTMLDialogElement.show()
+ *
+ * This test ensures the dialog renders correctly in a real browser.
+ */
+test.describe('Dialog Open Controlled', () => {
+  test.beforeEach(async ({ page }) => {
+    await setupPage(page, { name: 'DialogOpenControlled', type: 'useCase' })
+  })
+
+  test('dialog renders when controlled with open={true}', async ({ page }) => {
+    await page.waitForLoadState('networkidle')
+
+    // The dialog should be visible immediately since open={true}
+    const dialogContent = page.getByTestId('dialog-content')
+    await expect(dialogContent).toBeVisible({ timeout: 5000 })
+    await expect(dialogContent).toHaveText('Hiya!')
+  })
+
+  test('dialog can be closed via close button', async ({ page }) => {
+    await page.waitForLoadState('networkidle')
+
+    // Dialog should be visible
+    const dialogContent = page.getByTestId('dialog-content')
+    await expect(dialogContent).toBeVisible({ timeout: 5000 })
+
+    // Click close button
+    const closeButton = page.getByTestId('dialog-close')
+    await closeButton.click()
+
+    // Dialog should still be visible because it's controlled with open={true}
+    // (no state management in the component - it's always open)
+    await expect(dialogContent).toBeVisible()
+  })
+})

package/tests/DialogPointerEvents.animated.test.tsx

@@ -0,0 +1,108 @@
+import { expect, test } from '@playwright/test'
+import { setupPage } from './test-utils'
+
+/**
+ * Test for dialog pointer events unlock timing
+ *
+ * Verifies that when a dialog closes, the dialog content gets pointer-events: none
+ * immediately, allowing clicks to pass through to elements behind during the
+ * exit animation.
+ *
+ * This is an animated test because the bug only manifests with animations enabled.
+ */
+test.describe('Dialog Pointer Events Unlock', () => {
+  test.beforeEach(async ({ page }) => {
+    await setupPage(page, { name: 'DialogPointerEventsCase', type: 'useCase' })
+  })
+
+  test('dialog content allows click-through during exit animation', async ({ page }) => {
+    // get initial click count
+    const clickCountEl = page.getByTestId('click-count')
+    await expect(clickCountEl).toHaveText('0')
+
+    // open the dialog
+    const triggerButton = page.getByTestId('dialog-trigger')
+    await triggerButton.click()
+
+    // wait for dialog to be visible
+    const dialogClose = page.locator('[data-testid="dialog-close"]')
+    await expect(dialogClose).toBeVisible({ timeout: 5000 })
+
+    // wait for enter animation to settle
+    await page.waitForTimeout(800)
+
+    // set up monitoring to check dialog content pointer events after close
+    const results = await page.evaluate(async () => {
+      return new Promise<{
+        contentPointerEvents: string[]
+        buttonAccessible: boolean[]
+        dialogStillAnimating: boolean
+      }>((resolve) => {
+        const contentPointerEvents: string[] = []
+        const buttonAccessible: boolean[] = []
+        const closeButton = document.querySelector(
+          '[data-testid="dialog-close"]'
+        ) as HTMLElement
+        const dialogContent = document.querySelector('[role="dialog"]') as HTMLElement
+        const backgroundBtn = document.querySelector(
+          '[data-testid="background-button"]'
+        ) as HTMLElement
+
+        // start sampling immediately
+        const interval = setInterval(() => {
+          if (dialogContent) {
+            contentPointerEvents.push(getComputedStyle(dialogContent).pointerEvents)
+          }
+          // check if the background button is accessible (not blocked by dialog)
+          const btnRect = backgroundBtn?.getBoundingClientRect()
+          if (btnRect) {
+            const elementAtPoint = document.elementFromPoint(
+              btnRect.left + btnRect.width / 2,
+              btnRect.top + btnRect.height / 2
+            )
+            buttonAccessible.push(
+              elementAtPoint === backgroundBtn || backgroundBtn.contains(elementAtPoint)
+            )
+          }
+        }, 20)
+
+        // click close button
+        closeButton.click()
+
+        // after 300ms, check state and stop sampling
+        setTimeout(() => {
+          clearInterval(interval)
+          const stillAnimating = dialogContent
+            ? getComputedStyle(dialogContent).opacity !== '0'
+            : false
+          resolve({
+            contentPointerEvents,
+            buttonAccessible,
+            dialogStillAnimating: stillAnimating,
+          })
+        }, 300)
+      })
+    })
+
+    console.log('Content pointer events during exit:', results.contentPointerEvents)
+    console.log('Button accessible during exit:', results.buttonAccessible)
+    console.log('Dialog still animating at end:', results.dialogStillAnimating)
+
+    // the key assertion: the background button should become accessible quickly
+    // (within first few samples) - this is the actual user-facing behavior we care about
+    // note: the dialog portal container gets pointer-events: none, which allows clicks
+    // to pass through even if the dialog content itself has pointer-events: auto
+    const buttonAccessibleEarly = results.buttonAccessible.some(
+      (accessible, i) => i < 8 && accessible
+    )
+    expect(buttonAccessibleEarly).toBeTruthy()
+
+    // wait for dialog to fully close (reanimated driver can be much slower in CI)
+    await expect(dialogClose).not.toBeVisible({ timeout: 10000 })
+
+    // verify background button is clickable
+    const backgroundButton = page.getByTestId('background-button')
+    await backgroundButton.click()
+    await expect(clickCountEl).toHaveText('1')
+  })
+})

package/tests/DialogScoped.test.tsx

@@ -0,0 +1,137 @@
+import { expect, test } from '@playwright/test'
+
+import { setupPage } from './test-utils'
+
+test.beforeEach(async ({ page }) => {
+  await setupPage(page, { name: 'DialogScopedCase', type: 'useCase' })
+})
+
+test('scoped dialogs work', async ({ page }) => {
+  // Wait for page to load
+  await page.waitForLoadState('networkidle')
+
+  async function testDialogScoped(name: string) {
+    const triggerTestId = `${name}-trigger`
+    const contentTestId = `${name}-dialog-content`
+    const trigger = page.getByTestId(triggerTestId)
+    const content = page.getByTestId(contentTestId)
+    const closeButton = content.getByTestId(`${name}-dialog-close`)
+
+    // Check initial state
+    await expect(trigger).toBeVisible()
+    await expect(content).not.toBeVisible()
+
+    // Click trigger to open dialog
+    await trigger.click()
+
+    // Wait for content to be visible
+    await expect(content).toBeVisible({ timeout: 5000 })
+
+    // Click close button
+    await closeButton.click()
+
+    // Verify dialog is closed
+    await expect(content).not.toBeVisible()
+  }
+
+  // Test each scoped dialog
+  await testDialogScoped('plain')
+  await testDialogScoped('a')
+  await testDialogScoped('b')
+})
+
+test('dialog scopes are isolated', async ({ page }) => {
+  // Wait for page to load
+  await page.waitForLoadState('networkidle')
+
+  const plainTrigger = page.getByTestId('plain-trigger')
+  const aTrigger = page.getByTestId('a-trigger')
+  const bTrigger = page.getByTestId('b-trigger')
+
+  const plainContent = page.getByTestId('plain-dialog-content')
+  const aContent = page.getByTestId('a-dialog-content')
+  const bContent = page.getByTestId('b-dialog-content')
+
+  // Open dialog A
+  await aTrigger.click()
+  await expect(aContent).toBeVisible({ timeout: 5000 })
+
+  // Verify other dialogs are not visible
+  await expect(plainContent).not.toBeVisible()
+  await expect(bContent).not.toBeVisible()
+
+  // Close dialog A
+  await aContent.getByTestId('a-dialog-close').click()
+  await expect(aContent).not.toBeVisible()
+
+  // Open dialog B
+  await bTrigger.click()
+  await expect(bContent).toBeVisible({ timeout: 5000 })
+
+  // Verify other dialogs are not visible
+  await expect(plainContent).not.toBeVisible()
+  await expect(aContent).not.toBeVisible()
+
+  // Close dialog B
+  await bContent.getByTestId('b-dialog-close').click()
+  await expect(bContent).not.toBeVisible()
+
+  // Open plain dialog
+  await plainTrigger.click()
+  await expect(plainContent).toBeVisible({ timeout: 5000 })
+
+  // Verify other dialogs are not visible
+  await expect(aContent).not.toBeVisible()
+  await expect(bContent).not.toBeVisible()
+
+  // Close plain dialog
+  await plainContent.getByTestId('plain-dialog-close').click()
+  await expect(plainContent).not.toBeVisible()
+})
+
+test('scoped dialogs adapt to sheets', async ({ page: pageIn }) => {
+  const page = await setupPage(pageIn, {
+    name: 'DialogScopedCase',
+    type: 'useCase',
+    adapt: true,
+  })
+
+  // Wait for page to load
+  await page.waitForLoadState('networkidle')
+
+  async function testDialogAdapted(name: string) {
+    const trigger = page.getByTestId(`${name}-trigger`)
+    const sheetContents = page.getByTestId(`${name}-sheet-contents`).first()
+    const dialogContent = page.getByTestId(`${name}-dialog-content`)
+
+    // Click trigger to open sheet
+    await trigger.click()
+
+    // Wait for sheet to be visible and open
+    await expect(sheetContents).toBeVisible({ timeout: 5000 })
+    await expect(sheetContents).toHaveAttribute('data-state', 'open', { timeout: 5000 })
+
+    // Check that dialog content is inside sheet
+    await expect(sheetContents.locator(dialogContent)).toBeVisible()
+
+    // Dialog.Close hides in sheet mode
+    const closeButton = sheetContents.getByTestId('dialog-close')
+    await expect(closeButton).not.toBeVisible()
+
+    // Click sheet backdrop (at top of screen to avoid sheet content)
+    const overlay = page.locator(`#${name}-sheet-overlay`)
+    await expect(overlay).toBeVisible()
+    // Click near the top of the overlay where the sheet content doesn't cover
+    await overlay.click({ position: { x: 10, y: 10 } })
+
+    // Wait for sheet to close by checking data-state attribute
+    await expect(sheetContents).toHaveAttribute('data-state', 'closed', { timeout: 5000 })
+
+    // Verify sheet is visually off-screen
+    await expect(sheetContents).not.toBeInViewport({ ratio: 0.5 })
+  }
+
+  await testDialogAdapted('plain')
+  await testDialogAdapted('a')
+  await testDialogAdapted('b')
+})

package/tests/DialogSheetAdapt.test.tsx

@@ -0,0 +1,68 @@
+import { expect, test } from '@playwright/test'
+import { setupPage } from './test-utils'
+
+/**
+ * Test for styled(Dialog.Overlay) with onPress
+ *
+ * This tests the fix for: "Cannot read property '_internalInstanceHandle' of null"
+ * which occurred on Android when using styled(Dialog.Overlay) with onPress.
+ *
+ * The fix skips GestureDetector wrapping for HOC components and passes press
+ * events down via props instead, allowing the inner component to handle gesture
+ * detection at the correct level where a native view exists.
+ */
+test.describe('Dialog Sheet Adapt - styled(Dialog.Overlay) with onPress', () => {
+  test.beforeEach(async ({ page }) => {
+    await setupPage(page, { name: 'DialogSheetAdaptCase', type: 'useCase' })
+  })
+
+  test('styled(Dialog.Overlay) with onPress should render without crashing', async ({
+    page,
+  }) => {
+    await page.waitForLoadState('networkidle')
+
+    // Open the dialog
+    const trigger = page.getByTestId('open-dialog')
+    await trigger.click()
+
+    // Wait for dialog overlay to be visible (the styled DialogOverlay)
+    // On web, this should work. The fix ensures HOC components pass press events
+    // down instead of wrapping with GestureDetector (which would crash on native
+    // when the inner component returns null during adapt)
+    await page.waitForTimeout(500)
+
+    // Dialog content should be visible
+    const dialogContent = page.locator('text=Dialog with Sheet Adapt')
+    await expect(dialogContent).toBeVisible({ timeout: 5000 })
+
+    // Close button should work
+    const closeButton = page.getByTestId('close-dialog')
+    await closeButton.click()
+
+    // Dialog should close
+    await expect(dialogContent).not.toBeVisible({ timeout: 5000 })
+  })
+
+  test('can open and close dialog multiple times without errors', async ({ page }) => {
+    await page.waitForLoadState('networkidle')
+
+    // Test multiple open/close cycles to ensure stability
+    for (let i = 0; i < 3; i++) {
+      // Open the dialog
+      const trigger = page.getByTestId('open-dialog')
+      await trigger.click()
+
+      // Wait for dialog to be visible
+      await page.waitForTimeout(300)
+      const dialogContent = page.locator('text=Dialog with Sheet Adapt')
+      await expect(dialogContent).toBeVisible({ timeout: 5000 })
+
+      // Close via button
+      const closeButton = page.getByTestId('close-dialog')
+      await closeButton.click()
+
+      // Wait for dialog to close
+      await expect(dialogContent).not.toBeVisible({ timeout: 5000 })
+    }
+  })
+})

package/tests/DialogSheetAdaptResize.test.tsx

@@ -0,0 +1,161 @@
+import { expect, test } from '@playwright/test'
+import { setupPage } from './test-utils'
+
+/**
+ * Test for Dialog → Sheet content portaling on viewport resize
+ *
+ * This tests the fix for: When resizing from wide (Dialog) to narrow (Sheet via Adapt),
+ * the Sheet appears empty because the portal content isn't properly transferred.
+ */
+test.describe('Dialog Sheet Adapt - viewport resize', () => {
+  test.beforeEach(async ({ page }) => {
+    await setupPage(page, { name: 'DialogSheetAdaptResizeCase', type: 'useCase' })
+  })
+
+  test('content is visible in dialog at wide viewport', async ({ page }) => {
+    // set viewport to wide (above maxMd breakpoint of 768px)
+    await page.setViewportSize({ width: 1024, height: 768 })
+    await page.waitForTimeout(300)
+
+    // open the dialog
+    const trigger = page.getByTestId('open-dialog')
+    await trigger.click({ force: true })
+    await page.waitForTimeout(500)
+
+    // dialog content should be visible
+    const title = page.getByTestId('dialog-title')
+    await expect(title).toBeVisible({ timeout: 5000 })
+
+    const content = page.getByTestId('dialog-content')
+    await expect(content).toBeVisible({ timeout: 5000 })
+
+    // close button should work
+    const closeButton = page.getByTestId('close-dialog')
+    await closeButton.click({ force: true })
+    await expect(title).not.toBeVisible({ timeout: 5000 })
+  })
+
+  test('content is visible in sheet at narrow viewport', async ({ page }) => {
+    // set viewport to narrow (below maxMd breakpoint of 768px)
+    await page.setViewportSize({ width: 600, height: 768 })
+    await page.waitForTimeout(300)
+
+    // open - should show as sheet due to adapt
+    const trigger = page.getByTestId('open-dialog')
+    await trigger.click({ force: true })
+    await page.waitForTimeout(500)
+
+    // sheet content should be visible
+    const title = page.getByTestId('dialog-title')
+    await expect(title).toBeVisible({ timeout: 5000 })
+
+    const content = page.getByTestId('dialog-content')
+    await expect(content).toBeVisible({ timeout: 5000 })
+
+    // extra content should also be visible
+    const extra1 = page.getByTestId('extra-content-1')
+    await expect(extra1).toBeVisible({ timeout: 5000 })
+  })
+
+  test('content transfers from dialog to sheet on resize narrow', async ({ page }) => {
+    // start at wide viewport
+    await page.setViewportSize({ width: 1024, height: 768 })
+    await page.waitForTimeout(300)
+
+    // open the dialog at wide width
+    const trigger = page.getByTestId('open-dialog')
+    await trigger.click({ force: true })
+    await page.waitForTimeout(500)
+
+    // verify content visible in dialog
+    const title = page.getByTestId('dialog-title')
+    await expect(title).toBeVisible({ timeout: 5000 })
+
+    const content = page.getByTestId('dialog-content')
+    await expect(content).toBeVisible({ timeout: 5000 })
+
+    // resize to narrow - should adapt to sheet
+    await page.setViewportSize({ width: 600, height: 768 })
+    await page.waitForTimeout(500) // give time for adapt to trigger and animations
+
+    // content should still be visible (now in sheet)
+    await expect(title).toBeVisible({ timeout: 5000 })
+    await expect(content).toBeVisible({ timeout: 5000 })
+
+    // extra content should also be visible
+    const extra1 = page.getByTestId('extra-content-1')
+    await expect(extra1).toBeVisible({ timeout: 5000 })
+  })
+
+  test('content transfers from sheet to dialog on resize wide', async ({ page }) => {
+    // start at narrow viewport
+    await page.setViewportSize({ width: 600, height: 768 })
+    await page.waitForTimeout(300)
+
+    // open at narrow width - should show as sheet
+    const trigger = page.getByTestId('open-dialog')
+    await trigger.click({ force: true })
+    await page.waitForTimeout(500)
+
+    // verify content visible in sheet
+    const title = page.getByTestId('dialog-title')
+    await expect(title).toBeVisible({ timeout: 5000 })
+
+    const content = page.getByTestId('dialog-content')
+    await expect(content).toBeVisible({ timeout: 5000 })
+
+    // resize to wide - should adapt back to dialog
+    await page.setViewportSize({ width: 1024, height: 768 })
+    await page.waitForTimeout(500) // give time for adapt to trigger and animations
+
+    // content should still be visible (now in dialog)
+    await expect(title).toBeVisible({ timeout: 5000 })
+    await expect(content).toBeVisible({ timeout: 5000 })
+
+    // extra content should also be visible
+    const extra1 = page.getByTestId('extra-content-1')
+    await expect(extra1).toBeVisible({ timeout: 5000 })
+  })
+
+  test('multiple resize cycles preserve content', async ({ page }) => {
+    // start wide
+    await page.setViewportSize({ width: 1024, height: 768 })
+    await page.waitForTimeout(300)
+
+    // open dialog
+    const trigger = page.getByTestId('open-dialog')
+    await trigger.click({ force: true })
+    await page.waitForTimeout(500)
+
+    const title = page.getByTestId('dialog-title')
+    const content = page.getByTestId('dialog-content')
+
+    // verify initial state
+    await expect(title).toBeVisible({ timeout: 5000 })
+    await expect(content).toBeVisible({ timeout: 5000 })
+
+    // cycle 1: wide -> narrow
+    await page.setViewportSize({ width: 600, height: 768 })
+    await page.waitForTimeout(500)
+    await expect(title).toBeVisible({ timeout: 5000 })
+    await expect(content).toBeVisible({ timeout: 5000 })
+
+    // cycle 1: narrow -> wide
+    await page.setViewportSize({ width: 1024, height: 768 })
+    await page.waitForTimeout(500)
+    await expect(title).toBeVisible({ timeout: 5000 })
+    await expect(content).toBeVisible({ timeout: 5000 })
+
+    // cycle 2: wide -> narrow
+    await page.setViewportSize({ width: 600, height: 768 })
+    await page.waitForTimeout(500)
+    await expect(title).toBeVisible({ timeout: 5000 })
+    await expect(content).toBeVisible({ timeout: 5000 })
+
+    // cycle 2: narrow -> wide
+    await page.setViewportSize({ width: 1024, height: 768 })
+    await page.waitForTimeout(500)
+    await expect(title).toBeVisible({ timeout: 5000 })
+    await expect(content).toBeVisible({ timeout: 5000 })
+  })
+})