@furystack/shades-common-components 12.4.0 → 12.5.0

package/src/components/drawer/index.spec.tsx

@@ -1,6 +1,6 @@
 import { Injector } from '@furystack/inject'
-import { createComponent, initializeShadeRoot, ScreenService } from '@furystack/shades'
-import { sleepAsync, usingAsync } from '@furystack/utils'
+import { createComponent, flushUpdates, initializeShadeRoot, ScreenService } from '@furystack/shades'
+import { usingAsync } from '@furystack/utils'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 import { LayoutService } from '../../services/layout-service.js'
 import { Drawer, type DrawerProps } from './index.js'
@@ -48,7 +48,7 @@ describe('Drawer component', () => {
       ),
     })
 
-    await sleepAsync(50)
+    await flushUpdates()
 
     const drawer = document.querySelector('shade-drawer') as HTMLElement
 
@@ -85,7 +85,7 @@ describe('Drawer component', () => {
           ),
         })
 
-        await sleepAsync(50)
+        await flushUpdates()
         expect(document.body.innerHTML).toContain('test-content')
       })
     })
@@ -106,7 +106,7 @@ describe('Drawer component', () => {
           ),
         })
 
-        await sleepAsync(50)
+        await flushUpdates()
         const container = document.querySelector('.drawer-left')
         expect(container).not.toBeNull()
       })
@@ -128,7 +128,7 @@ describe('Drawer component', () => {
           ),
         })
 
-        await sleepAsync(50)
+        await flushUpdates()
         const container = document.querySelector('.drawer-right')
         expect(container).not.toBeNull()
       })
@@ -164,7 +164,7 @@ describe('Drawer component', () => {
           ),
         })
 
-        await sleepAsync(50)
+        await flushUpdates()
         const container = document.querySelector('.drawer-container')
         expect(container?.classList.contains('closed')).toBe(false)
       })
@@ -186,7 +186,7 @@ describe('Drawer component', () => {
           ),
         })
 
-        await sleepAsync(50)
+        await flushUpdates()
         const container = document.querySelector('.drawer-container')
         expect(container?.getAttribute('data-variant')).toBe('permanent')
       })
@@ -235,7 +235,7 @@ describe('Drawer component', () => {
           ),
         })
 
-        await sleepAsync(50)
+        await flushUpdates()
         const container = document.querySelector('.drawer-container')
         expect(container?.classList.contains('closed')).toBe(true)
       })
@@ -257,7 +257,7 @@ describe('Drawer component', () => {
           ),
         })
 
-        await sleepAsync(50)
+        await flushUpdates()
 
         // Initially open
         let container = document.querySelector('.drawer-container')
@@ -265,7 +265,7 @@ describe('Drawer component', () => {
 
         // Close via LayoutService
         layoutService.setDrawerOpen('left', false)
-        await sleepAsync(50)
+        await flushUpdates()
 
         container = document.querySelector('.drawer-container')
         expect(container?.classList.contains('closed')).toBe(true)
@@ -315,7 +315,7 @@ describe('Drawer component', () => {
           ),
         })
 
-        await sleepAsync(50)
+        await flushUpdates()
         expect(document.body.innerHTML).toContain('drawer-backdrop')
       })
     })
@@ -336,9 +336,9 @@ describe('Drawer component', () => {
           ),
         })
 
-        await sleepAsync(50)
+        await flushUpdates()
         layoutService.setDrawerOpen('left', true)
-        await sleepAsync(50)
+        await flushUpdates()
 
         const backdrop = document.querySelector('.drawer-backdrop')
         expect(backdrop?.classList.contains('visible')).toBe(true)
@@ -361,13 +361,13 @@ describe('Drawer component', () => {
           ),
         })
 
-        await sleepAsync(50)
+        await flushUpdates()
         layoutService.setDrawerOpen('left', true)
-        await sleepAsync(50)
+        await flushUpdates()
 
         const backdrop = document.querySelector('.drawer-backdrop') as HTMLElement
         backdrop.click()
-        await sleepAsync(50)
+        await flushUpdates()
 
         expect(layoutService.drawerState.getValue().left?.open).toBe(false)
       })
@@ -389,7 +389,7 @@ describe('Drawer component', () => {
           ),
         })
 
-        await sleepAsync(50)
+        await flushUpdates()
 
         // When closed, left drawer should be translated off-screen
         let container = document.querySelector('.drawer-container') as HTMLElement
@@ -398,7 +398,7 @@ describe('Drawer component', () => {
 
         // When opened
         layoutService.setDrawerOpen('left', true)
-        await sleepAsync(50)
+        await flushUpdates()
 
         container = document.querySelector('.drawer-container') as HTMLElement
         expect(container.style.transform).toBe('translateX(0)')
@@ -451,7 +451,7 @@ describe('Drawer component', () => {
           ),
         })
 
-        await sleepAsync(50)
+        await flushUpdates()
 
         // Width should be updated to 300px
         expect(layoutService.drawerState.getValue().left?.width).toBe('300px')
@@ -493,9 +493,9 @@ describe('Drawer component', () => {
           ),
         })
 
-        await sleepAsync(50)
+        await flushUpdates()
         layoutService.setDrawerOpen('right', true)
-        await sleepAsync(50)
+        await flushUpdates()
 
         const backdrop = document.querySelector('[data-testid="drawer-backdrop-right"]')
         expect(backdrop).not.toBeNull()
@@ -524,14 +524,14 @@ describe('Drawer component', () => {
           ),
         })
 
-        await sleepAsync(50)
+        await flushUpdates()
 
         // Drawer should be open on large screen
         expect(layoutService.drawerState.getValue().left?.open).toBe(true)
 
         // Simulate screen becoming smaller
         screenService.screenSize.atLeast.md.setValue(false)
-        await sleepAsync(50)
+        await flushUpdates()
 
         // Drawer should now be closed
         expect(layoutService.drawerState.getValue().left?.open).toBe(false)
@@ -558,21 +558,21 @@ describe('Drawer component', () => {
           ),
         })
 
-        await sleepAsync(50)
+        await flushUpdates()
 
         // Drawer should be open on large screen
         expect(layoutService.drawerState.getValue().left?.open).toBe(true)
 
         // Simulate screen becoming smaller
         screenService.screenSize.atLeast.md.setValue(false)
-        await sleepAsync(50)
+        await flushUpdates()
 
         // Drawer should now be closed
         expect(layoutService.drawerState.getValue().left?.open).toBe(false)
 
         // Simulate screen becoming larger again
         screenService.screenSize.atLeast.md.setValue(true)
-        await sleepAsync(50)
+        await flushUpdates()
 
         // Drawer should now be open again
         expect(layoutService.drawerState.getValue().left?.open).toBe(true)
@@ -599,12 +599,12 @@ describe('Drawer component', () => {
           ),
         })
 
-        await sleepAsync(50)
+        await flushUpdates()
         expect(layoutService.drawerState.getValue().left?.open).toBe(true)
 
         // Simulate screen becoming larger
         screenService.screenSize.atLeast.md.setValue(true)
-        await sleepAsync(50)
+        await flushUpdates()
 
         // Temporary drawer should close when screen is large (switch to desktop layout)
         expect(layoutService.drawerState.getValue().left?.open).toBe(false)
@@ -631,12 +631,12 @@ describe('Drawer component', () => {
           ),
         })
 
-        await sleepAsync(50)
+        await flushUpdates()
         expect(layoutService.drawerState.getValue().left?.open).toBe(true)
 
         // Simulate screen becoming smaller
         screenService.screenSize.atLeast.md.setValue(false)
-        await sleepAsync(50)
+        await flushUpdates()
 
         // Permanent drawer should remain open
         expect(layoutService.drawerState.getValue().left?.open).toBe(true)
@@ -661,7 +661,7 @@ describe('Drawer component', () => {
           ),
         })
 
-        await sleepAsync(50)
+        await flushUpdates()
         const container = document.querySelector('.drawer-container')
         expect(container?.getAttribute('data-variant')).toBe('collapsible')
       })
@@ -683,12 +683,12 @@ describe('Drawer component', () => {
           ),
         })
 
-        await sleepAsync(50)
+        await flushUpdates()
         let container = document.querySelector('.drawer-container')
         expect(container?.getAttribute('data-open')).toBe('true')
 
         layoutService.setDrawerOpen('left', false)
-        await sleepAsync(50)
+        await flushUpdates()
 
         container = document.querySelector('.drawer-container')
         expect(container?.getAttribute('data-open')).toBe('false')
@@ -711,7 +711,7 @@ describe('Drawer component', () => {
           ),
         })
 
-        await sleepAsync(50)
+        await flushUpdates()
         const container = document.querySelector('[data-testid="drawer-left"]')
         expect(container).not.toBeNull()
       })
@@ -738,7 +738,7 @@ describe('Drawer component', () => {
           ),
         })
 
-        await sleepAsync(50)
+        await flushUpdates()
 
         // Should preserve the closed state, not reset to defaultOpen
         expect(layoutService.drawerState.getValue().left?.open).toBe(false)

package/src/components/dropdown.spec.tsx

@@ -1,5 +1,5 @@
 import { Injector } from '@furystack/inject'
-import { createComponent, initializeShadeRoot } from '@furystack/shades'
+import { createComponent, flushUpdates, initializeShadeRoot } from '@furystack/shades'
 import { sleepAsync, usingAsync } from '@furystack/utils'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 import { Dropdown } from './dropdown.js'
@@ -37,7 +37,7 @@ describe('Dropdown', () => {
         </Dropdown>
       ),
     })
-    await sleepAsync(50)
+    await flushUpdates()
     return {
       injector,
       dropdown: root.querySelector('shade-dropdown') as HTMLElement,
@@ -76,7 +76,7 @@ describe('Dropdown', () => {
       await usingAsync(await renderDropdown({}), async ({ dropdown }) => {
         const trigger = dropdown.querySelector('.dropdown-trigger') as HTMLElement
         trigger.click()
-        await sleepAsync(50)
+        await flushUpdates()
 
         const panel = dropdown.querySelector('.dropdown-panel')
         expect(panel).toBeTruthy()
@@ -87,7 +87,7 @@ describe('Dropdown', () => {
       await usingAsync(await renderDropdown({}), async ({ dropdown }) => {
         const trigger = dropdown.querySelector('.dropdown-trigger') as HTMLElement
         trigger.click()
-        await sleepAsync(50)
+        await flushUpdates()
 
         const items = dropdown.querySelectorAll('[role="menuitem"]')
         expect(items.length).toBe(3)
@@ -101,7 +101,7 @@ describe('Dropdown', () => {
       await usingAsync(await renderDropdown({}), async ({ dropdown }) => {
         const trigger = dropdown.querySelector('.dropdown-trigger') as HTMLElement
         trigger.click()
-        await sleepAsync(50)
+        await flushUpdates()
 
         const dividers = dropdown.querySelectorAll('[role="separator"]')
         expect(dividers.length).toBe(1)
@@ -112,11 +112,11 @@ describe('Dropdown', () => {
       await usingAsync(await renderDropdown({}), async ({ dropdown }) => {
         const trigger = dropdown.querySelector('.dropdown-trigger') as HTMLElement
         trigger.click()
-        await sleepAsync(50)
+        await flushUpdates()
 
         const backdrop = dropdown.querySelector('.dropdown-backdrop') as HTMLElement
         backdrop.click()
-        await sleepAsync(50)
+        await flushUpdates()
 
         expect(dropdown.hasAttribute('data-open')).toBe(false)
         const panel = dropdown.querySelector('.dropdown-panel')
@@ -128,11 +128,12 @@ describe('Dropdown', () => {
       await usingAsync(await renderDropdown({}), async ({ dropdown }) => {
         const trigger = dropdown.querySelector('.dropdown-trigger') as HTMLElement
         trigger.click()
+        await flushUpdates()
         await sleepAsync(50)
         expect(dropdown.hasAttribute('data-open')).toBe(true)
 
         trigger.click()
-        await sleepAsync(50)
+        await flushUpdates()
         expect(dropdown.hasAttribute('data-open')).toBe(false)
       })
     })
@@ -144,11 +145,11 @@ describe('Dropdown', () => {
       await usingAsync(await renderDropdown({ onSelect: handleSelect }), async ({ dropdown }) => {
         const trigger = dropdown.querySelector('.dropdown-trigger') as HTMLElement
         trigger.click()
-        await sleepAsync(50)
+        await flushUpdates()
 
         const item = dropdown.querySelector('[data-key="copy"]') as HTMLElement
         item.click()
-        await sleepAsync(50)
+        await flushUpdates()
 
         expect(handleSelect).toHaveBeenCalledWith('copy')
       })
@@ -158,11 +159,11 @@ describe('Dropdown', () => {
       await usingAsync(await renderDropdown({ onSelect: vi.fn() }), async ({ dropdown }) => {
         const trigger = dropdown.querySelector('.dropdown-trigger') as HTMLElement
         trigger.click()
-        await sleepAsync(50)
+        await flushUpdates()
 
         const item = dropdown.querySelector('[data-key="cut"]') as HTMLElement
         item.click()
-        await sleepAsync(50)
+        await flushUpdates()
 
         expect(dropdown.hasAttribute('data-open')).toBe(false)
         const panel = dropdown.querySelector('.dropdown-panel')
@@ -176,11 +177,11 @@ describe('Dropdown', () => {
       await usingAsync(await renderDropdown({ items, onSelect: handleSelect }), async ({ dropdown }) => {
         const trigger = dropdown.querySelector('.dropdown-trigger') as HTMLElement
         trigger.click()
-        await sleepAsync(50)
+        await flushUpdates()
 
         const item = dropdown.querySelector('[data-key="disabled"]') as HTMLElement
         item.click()
-        await sleepAsync(50)
+        await flushUpdates()
 
         expect(handleSelect).not.toHaveBeenCalled()
       })
@@ -192,7 +193,7 @@ describe('Dropdown', () => {
       await usingAsync(await renderDropdown({ disabled: true }), async ({ dropdown }) => {
         const trigger = dropdown.querySelector('.dropdown-trigger') as HTMLElement
         trigger.click()
-        await sleepAsync(50)
+        await flushUpdates()
 
         expect(dropdown.hasAttribute('data-open')).toBe(false)
         const panel = dropdown.querySelector('.dropdown-panel')
@@ -231,7 +232,7 @@ describe('Dropdown', () => {
       await usingAsync(await renderDropdown({ items }), async ({ dropdown }) => {
         const trigger = dropdown.querySelector('.dropdown-trigger') as HTMLElement
         trigger.click()
-        await sleepAsync(50)
+        await flushUpdates()
 
         const group = dropdown.querySelector('[role="group"]')
         expect(group).toBeTruthy()
@@ -248,7 +249,7 @@ describe('Dropdown', () => {
       await usingAsync(await renderDropdown({ items }), async ({ dropdown }) => {
         const trigger = dropdown.querySelector('.dropdown-trigger') as HTMLElement
         trigger.click()
-        await sleepAsync(50)
+        await flushUpdates()
 
         const icon = dropdown.querySelector('.dropdown-item-icon')
         expect(icon).toBeTruthy()
@@ -261,7 +262,7 @@ describe('Dropdown', () => {
       await usingAsync(await renderDropdown({ items }), async ({ dropdown }) => {
         const trigger = dropdown.querySelector('.dropdown-trigger') as HTMLElement
         trigger.click()
-        await sleepAsync(50)
+        await flushUpdates()
 
         const icon = dropdown.querySelector('.dropdown-item-icon')
         expect(icon).toBeTruthy()
@@ -275,11 +276,12 @@ describe('Dropdown', () => {
       await usingAsync(await renderDropdown({}), async ({ dropdown }) => {
         const trigger = dropdown.querySelector('.dropdown-trigger') as HTMLElement
         trigger.click()
+        await flushUpdates()
         await sleepAsync(50)
         expect(dropdown.hasAttribute('data-open')).toBe(true)
 
         window.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }))
-        await sleepAsync(50)
+        await flushUpdates()
 
         expect(dropdown.hasAttribute('data-open')).toBe(false)
       })
@@ -289,10 +291,11 @@ describe('Dropdown', () => {
       await usingAsync(await renderDropdown({}), async ({ dropdown }) => {
         const trigger = dropdown.querySelector('.dropdown-trigger') as HTMLElement
         trigger.click()
+        await flushUpdates()
         await sleepAsync(50)
 
         window.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true }))
-        await sleepAsync(50)
+        await flushUpdates()
 
         const focusedItems = dropdown.querySelectorAll('.dropdown-item.focused')
         expect(focusedItems.length).toBe(1)
@@ -303,13 +306,14 @@ describe('Dropdown', () => {
       await usingAsync(await renderDropdown({}), async ({ dropdown }) => {
         const trigger = dropdown.querySelector('.dropdown-trigger') as HTMLElement
         trigger.click()
+        await flushUpdates()
         await sleepAsync(50)
 
         // Move down twice then up once
         window.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true }))
         window.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true }))
         window.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowUp', bubbles: true }))
-        await sleepAsync(50)
+        await flushUpdates()
 
         const focusedItems = dropdown.querySelectorAll('.dropdown-item.focused')
         expect(focusedItems.length).toBe(1)
@@ -321,13 +325,14 @@ describe('Dropdown', () => {
       await usingAsync(await renderDropdown({ onSelect: handleSelect }), async ({ dropdown }) => {
         const trigger = dropdown.querySelector('.dropdown-trigger') as HTMLElement
         trigger.click()
+        await flushUpdates()
         await sleepAsync(50)
 
         // Navigate down then press Enter
         window.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true }))
-        await sleepAsync(50)
+        await flushUpdates()
         window.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true }))
-        await sleepAsync(50)
+        await flushUpdates()
 
         expect(handleSelect).toHaveBeenCalled()
       })
@@ -341,13 +346,14 @@ describe('Dropdown', () => {
       await usingAsync(await renderDropdown({ items }), async ({ dropdown }) => {
         const trigger = dropdown.querySelector('.dropdown-trigger') as HTMLElement
         trigger.click()
+        await flushUpdates()
         await sleepAsync(50)
 
         // Navigate down past the end (2 items + 1 wrap)
         window.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true }))
         window.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true }))
         window.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true }))
-        await sleepAsync(50)
+        await flushUpdates()
 
         const focusedItems = dropdown.querySelectorAll('.dropdown-item.focused')
         expect(focusedItems.length).toBe(1)
@@ -362,10 +368,11 @@ describe('Dropdown', () => {
       await usingAsync(await renderDropdown({ items }), async ({ dropdown }) => {
         const trigger = dropdown.querySelector('.dropdown-trigger') as HTMLElement
         trigger.click()
+        await flushUpdates()
         await sleepAsync(50)
 
         window.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowUp', bubbles: true }))
-        await sleepAsync(50)
+        await flushUpdates()
 
         const focusedItems = dropdown.querySelectorAll('.dropdown-item.focused')
         expect(focusedItems.length).toBe(1)
@@ -378,7 +385,7 @@ describe('Dropdown', () => {
         // Don't open the dropdown
         window.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true }))
         window.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true }))
-        await sleepAsync(50)
+        await flushUpdates()
 
         expect(handleSelect).not.toHaveBeenCalled()
         expect(dropdown.hasAttribute('data-open')).toBe(false)
@@ -394,11 +401,12 @@ describe('Dropdown', () => {
       await usingAsync(await renderDropdown({ items }), async ({ dropdown }) => {
         const trigger = dropdown.querySelector('.dropdown-trigger') as HTMLElement
         trigger.click()
+        await flushUpdates()
         await sleepAsync(50)
 
         // Navigate to first enabled item
         window.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true }))
-        await sleepAsync(50)
+        await flushUpdates()
 
         const focusedItems = dropdown.querySelectorAll('.dropdown-item.focused')
         expect(focusedItems.length).toBe(1)
@@ -413,7 +421,7 @@ describe('Dropdown', () => {
       await usingAsync(await renderDropdown({ placement: 'bottomRight' }), async ({ dropdown }) => {
         const trigger = dropdown.querySelector('.dropdown-trigger') as HTMLElement
         trigger.click()
-        await sleepAsync(50)
+        await flushUpdates()
 
         const panel = dropdown.querySelector('.dropdown-panel')
         expect(panel).toBeTruthy()
@@ -424,7 +432,7 @@ describe('Dropdown', () => {
       await usingAsync(await renderDropdown({ placement: 'topLeft' }), async ({ dropdown }) => {
         const trigger = dropdown.querySelector('.dropdown-trigger') as HTMLElement
         trigger.click()
-        await sleepAsync(50)
+        await flushUpdates()
 
         const panel = dropdown.querySelector('.dropdown-panel')
         expect(panel).toBeTruthy()
@@ -435,7 +443,7 @@ describe('Dropdown', () => {
       await usingAsync(await renderDropdown({ placement: 'topRight' }), async ({ dropdown }) => {
         const trigger = dropdown.querySelector('.dropdown-trigger') as HTMLElement
         trigger.click()
-        await sleepAsync(50)
+        await flushUpdates()
 
         const panel = dropdown.querySelector('.dropdown-panel')
         expect(panel).toBeTruthy()

package/src/components/fab.spec.tsx

@@ -1,6 +1,6 @@
 import { Injector } from '@furystack/inject'
-import { createComponent, initializeShadeRoot } from '@furystack/shades'
-import { sleepAsync, usingAsync } from '@furystack/utils'
+import { createComponent, flushUpdates, initializeShadeRoot } from '@furystack/shades'
+import { usingAsync } from '@furystack/utils'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 import { cssVariableTheme } from '../services/css-variable-theme.js'
 import { Fab } from './fab.js'
@@ -22,7 +22,7 @@ describe('Fab', () => {
       rootElement: root,
       jsxElement: <Fab>{children}</Fab>,
     })
-    await sleepAsync(50)
+    await flushUpdates()
     return {
       injector,
       fab: root.querySelector('button[is="shade-fab"]') as HTMLButtonElement,
@@ -107,7 +107,7 @@ describe('Fab', () => {
           rootElement: root,
           jsxElement: <Fab onclick={handleClick}>+</Fab>,
         })
-        await sleepAsync(50)
+        await flushUpdates()
         const fab = root.querySelector('button[is="shade-fab"]') as HTMLButtonElement
 
         fab.click()