@furystack/shades-common-components 12.4.0 → 12.5.0

package/src/components/inputs/slider.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 { ThemeProviderService } from '../../services/theme-provider-service.js'
 import { Slider } from './slider.js'
@@ -23,7 +23,7 @@ describe('Slider', () => {
       rootElement: root,
       jsxElement: <Slider {...props} />,
     })
-    await sleepAsync(100)
+    await flushUpdates()
     return {
       injector,
       slider: document.querySelector('shade-slider') as HTMLElement,
@@ -675,7 +675,7 @@ describe('Slider', () => {
 
           root.dispatchEvent(new MouseEvent('mousedown', { clientX: 150, clientY: 2, bubbles: true }))
           document.dispatchEvent(new MouseEvent('mouseup', { bubbles: true }))
-          await sleepAsync(50)
+          await flushUpdates()
 
           expect(onValueChange).toHaveBeenCalled()
           const calledWith = onValueChange.mock.calls[0][0] as number
@@ -691,7 +691,7 @@ describe('Slider', () => {
 
         slider.dispatchEvent(new MouseEvent('mousedown', { clientX: 100, clientY: 2, bubbles: true }))
         document.dispatchEvent(new MouseEvent('mouseup', { bubbles: true }))
-        await sleepAsync(50)
+        await flushUpdates()
 
         expect(onValueChange).not.toHaveBeenCalled()
       })
@@ -709,7 +709,7 @@ describe('Slider', () => {
           expect(root.hasAttribute('data-dragging')).toBe(true)
 
           document.dispatchEvent(new MouseEvent('mouseup', { bubbles: true }))
-          await sleepAsync(50)
+          await flushUpdates()
 
           expect(root.hasAttribute('data-dragging')).toBe(false)
         },
@@ -728,7 +728,7 @@ describe('Slider', () => {
 
           document.dispatchEvent(new MouseEvent('mousemove', { clientX: 100, clientY: 2, bubbles: true }))
           document.dispatchEvent(new MouseEvent('mouseup', { bubbles: true }))
-          await sleepAsync(50)
+          await flushUpdates()
 
           expect(onValueChange).toHaveBeenCalled()
           const calledWith = onValueChange.mock.calls[0][0] as number
@@ -754,7 +754,7 @@ describe('Slider', () => {
           // Click at 90% (180px) → closer to thumb at 80%
           root.dispatchEvent(new MouseEvent('mousedown', { clientX: 180, clientY: 2, bubbles: true }))
           document.dispatchEvent(new MouseEvent('mouseup', { bubbles: true }))
-          await sleepAsync(50)
+          await flushUpdates()
 
           expect(onValueChange).toHaveBeenCalled()
           const val = onValueChange.mock.calls[0][0] as [number, number]
@@ -782,7 +782,7 @@ describe('Slider', () => {
           // New val for thumb[0]=20. 20 < 60, no swap.
           root.dispatchEvent(new MouseEvent('mousedown', { clientX: 40, clientY: 2, bubbles: true }))
           document.dispatchEvent(new MouseEvent('mouseup', { bubbles: true }))
-          await sleepAsync(50)
+          await flushUpdates()
 
           expect(onValueChange).toHaveBeenCalled()
           const val = onValueChange.mock.calls[0][0] as [number, number]
@@ -814,7 +814,7 @@ describe('Slider', () => {
           // Move to 60px (30%)
           document.dispatchEvent(new MouseEvent('mousemove', { clientX: 60, clientY: 2, bubbles: true }))
           document.dispatchEvent(new MouseEvent('mouseup', { bubbles: true }))
-          await sleepAsync(50)
+          await flushUpdates()
 
           expect(onValueChange).toHaveBeenCalled()
           const val = onValueChange.mock.calls[0][0] as [number, number]
@@ -835,7 +835,7 @@ describe('Slider', () => {
           // Click at bottom-50px (bottom=200, clientY=150 → (200-150)/200=25%)
           root.dispatchEvent(new MouseEvent('mousedown', { clientX: 2, clientY: 150, bubbles: true }))
           document.dispatchEvent(new MouseEvent('mouseup', { bubbles: true }))
-          await sleepAsync(50)
+          await flushUpdates()
 
           expect(onValueChange).toHaveBeenCalled()
           const calledWith = onValueChange.mock.calls[0][0] as number
@@ -855,7 +855,7 @@ describe('Slider', () => {
           // Click far to the right beyond the track
           root.dispatchEvent(new MouseEvent('mousedown', { clientX: 400, clientY: 2, bubbles: true }))
           document.dispatchEvent(new MouseEvent('mouseup', { bubbles: true }))
-          await sleepAsync(50)
+          await flushUpdates()
 
           expect(onValueChange).toHaveBeenCalled()
           const calledWith = onValueChange.mock.calls[0][0] as number
@@ -895,7 +895,7 @@ describe('Slider', () => {
           const touch = { clientX: 100, clientY: 2, identifier: 0, target: root }
           root.dispatchEvent(new TouchEvent('touchstart', { touches: [touch as unknown as Touch] }))
           document.dispatchEvent(new TouchEvent('touchend', { changedTouches: [touch as unknown as Touch] }))
-          await sleepAsync(50)
+          await flushUpdates()
 
           expect(onValueChange).toHaveBeenCalled()
           const calledWith = onValueChange.mock.calls[0][0] as number
@@ -922,7 +922,7 @@ describe('Slider', () => {
 
           const endTouch = { clientX: 150, clientY: 2, identifier: 0, target: slider }
           document.dispatchEvent(new TouchEvent('touchend', { changedTouches: [endTouch as unknown as Touch] }))
-          await sleepAsync(50)
+          await flushUpdates()
 
           expect(onValueChange).toHaveBeenCalled()
           const calledWith = onValueChange.mock.calls[0][0] as number
@@ -974,7 +974,7 @@ describe('Slider', () => {
           expect(root!.hasAttribute('data-dragging')).toBe(true)
 
           document.dispatchEvent(new MouseEvent('mouseup', { bubbles: true }))
-          await sleepAsync(50)
+          await flushUpdates()
 
           expect(onValueChange).toHaveBeenCalled()
         },
@@ -1003,7 +1003,7 @@ describe('Slider', () => {
 
         slider.dispatchEvent(new MouseEvent('mousedown', { clientX: 100, clientY: 2, bubbles: true }))
         document.dispatchEvent(new MouseEvent('mouseup', { bubbles: true }))
-        await sleepAsync(50)
+        await flushUpdates()
 
         // Should not have fired because getValueFromPointer returned null
         expect(onValueChange).not.toHaveBeenCalled()

package/src/components/inputs/switch.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 { ThemeProviderService } from '../../services/theme-provider-service.js'
 import { Form, FormService } from '../form.js'
@@ -26,7 +26,7 @@ describe('Switch', () => {
         jsxElement: <Switch />,
       })
 
-      await sleepAsync(50)
+      await flushUpdates()
 
       const switchEl = document.querySelector('shade-switch')
       expect(switchEl).not.toBeNull()
@@ -43,7 +43,7 @@ describe('Switch', () => {
         jsxElement: <Switch name="testSwitch" />,
       })
 
-      await sleepAsync(50)
+      await flushUpdates()
 
       const input = document.querySelector('shade-switch input[type="checkbox"]') as HTMLInputElement
       expect(input).not.toBeNull()
@@ -62,7 +62,7 @@ describe('Switch', () => {
         jsxElement: <Switch />,
       })
 
-      await sleepAsync(50)
+      await flushUpdates()
 
       const track = document.querySelector('shade-switch .switch-track')
       const thumb = document.querySelector('shade-switch .switch-thumb')
@@ -81,7 +81,7 @@ describe('Switch', () => {
         jsxElement: <Switch labelTitle="Enable notifications" />,
       })
 
-      await sleepAsync(50)
+      await flushUpdates()
 
       const label = document.querySelector('shade-switch label') as HTMLLabelElement
       expect(label).not.toBeNull()
@@ -99,7 +99,7 @@ describe('Switch', () => {
         jsxElement: <Switch />,
       })
 
-      await sleepAsync(50)
+      await flushUpdates()
 
       const labelSpan = document.querySelector('shade-switch .switch-label')
       expect(labelSpan).toBeNull()
@@ -117,7 +117,7 @@ describe('Switch', () => {
           jsxElement: <Switch checked />,
         })
 
-        await sleepAsync(50)
+        await flushUpdates()
 
         const input = document.querySelector('shade-switch input[type="checkbox"]') as HTMLInputElement
         expect(input.checked).toBe(true)
@@ -134,7 +134,7 @@ describe('Switch', () => {
           jsxElement: <Switch checked={false} />,
         })
 
-        await sleepAsync(50)
+        await flushUpdates()
 
         const input = document.querySelector('shade-switch input[type="checkbox"]') as HTMLInputElement
         expect(input.checked).toBe(false)
@@ -153,7 +153,7 @@ describe('Switch', () => {
           jsxElement: <Switch disabled />,
         })
 
-        await sleepAsync(50)
+        await flushUpdates()
 
         const switchEl = document.querySelector('shade-switch') as HTMLElement
         expect(switchEl.hasAttribute('data-disabled')).toBe(true)
@@ -170,7 +170,7 @@ describe('Switch', () => {
           jsxElement: <Switch disabled={false} />,
         })
 
-        await sleepAsync(50)
+        await flushUpdates()
 
         const switchEl = document.querySelector('shade-switch') as HTMLElement
         expect(switchEl.hasAttribute('data-disabled')).toBe(false)
@@ -187,7 +187,7 @@ describe('Switch', () => {
           jsxElement: <Switch disabled />,
         })
 
-        await sleepAsync(50)
+        await flushUpdates()
 
         const input = document.querySelector('shade-switch input[type="checkbox"]') as HTMLInputElement
         expect(input.disabled).toBe(true)
@@ -206,7 +206,7 @@ describe('Switch', () => {
           jsxElement: <Switch size="small" />,
         })
 
-        await sleepAsync(50)
+        await flushUpdates()
 
         const switchEl = document.querySelector('shade-switch') as HTMLElement
         expect(switchEl.getAttribute('data-size')).toBe('small')
@@ -223,7 +223,7 @@ describe('Switch', () => {
           jsxElement: <Switch size="medium" />,
         })
 
-        await sleepAsync(50)
+        await flushUpdates()
 
         const switchEl = document.querySelector('shade-switch') as HTMLElement
         expect(switchEl.hasAttribute('data-size')).toBe(false)
@@ -243,12 +243,12 @@ describe('Switch', () => {
           jsxElement: <Switch name="toggle" onchange={onchange} />,
         })
 
-        await sleepAsync(50)
+        await flushUpdates()
 
         const input = document.querySelector('shade-switch input[type="checkbox"]') as HTMLInputElement
         input.dispatchEvent(new Event('change', { bubbles: true }))
 
-        await sleepAsync(50)
+        await flushUpdates()
 
         expect(onchange).toHaveBeenCalled()
       })
@@ -266,7 +266,7 @@ describe('Switch', () => {
           jsxElement: <Switch />,
         })
 
-        await sleepAsync(50)
+        await flushUpdates()
 
         const switchEl = document.querySelector('shade-switch') as HTMLElement
         const themeService = injector.getInstance(ThemeProviderService)
@@ -284,7 +284,7 @@ describe('Switch', () => {
           jsxElement: <Switch color="secondary" />,
         })
 
-        await sleepAsync(50)
+        await flushUpdates()
 
         const switchEl = document.querySelector('shade-switch') as HTMLElement
         const themeService = injector.getInstance(ThemeProviderService)
@@ -310,7 +310,7 @@ describe('Switch', () => {
           ),
         })
 
-        await sleepAsync(50)
+        await flushUpdates()
 
         const form = document.querySelector('form[is="shade-form"]') as HTMLFormElement
         const formInjector = (form as unknown as { injector: Injector }).injector
@@ -336,7 +336,7 @@ describe('Switch', () => {
           ),
         })
 
-        await sleepAsync(50)
+        await flushUpdates()
 
         const form = document.querySelector('form[is="shade-form"]') as HTMLFormElement
         const formInjector = (form as unknown as { injector: Injector }).injector
@@ -346,7 +346,7 @@ describe('Switch', () => {
 
         rootElement.innerHTML = ''
 
-        await sleepAsync(50)
+        await flushUpdates()
       })
     })
   })
@@ -362,7 +362,7 @@ describe('Switch', () => {
           jsxElement: <Switch labelProps={{ className: 'custom-label' }} />,
         })
 
-        await sleepAsync(50)
+        await flushUpdates()
 
         const label = document.querySelector('shade-switch label') as HTMLLabelElement
         expect(label.className).toContain('custom-label')
@@ -381,7 +381,7 @@ describe('Switch', () => {
           jsxElement: <Switch required />,
         })
 
-        await sleepAsync(50)
+        await flushUpdates()
 
         const input = document.querySelector('shade-switch input[type="checkbox"]') as HTMLInputElement
         expect(input.required).toBe(true)
@@ -400,7 +400,7 @@ describe('Switch', () => {
           jsxElement: <Switch value="yes" />,
         })
 
-        await sleepAsync(50)
+        await flushUpdates()
 
         const input = document.querySelector('shade-switch input[type="checkbox"]') as HTMLInputElement
         expect(input.value).toBe('yes')

package/src/components/inputs/text-area.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 } from 'vitest'
 import { TextArea } from './text-area.js'
 
@@ -23,7 +23,7 @@ describe('TextArea', () => {
         jsxElement: <TextArea />,
       })
 
-      await sleepAsync(50)
+      await flushUpdates()
 
       const textArea = document.querySelector('shade-text-area')
       expect(textArea).not.toBeNull()
@@ -40,7 +40,7 @@ describe('TextArea', () => {
         jsxElement: <TextArea labelTitle="Test Label" />,
       })
 
-      await sleepAsync(50)
+      await flushUpdates()
 
       const textArea = document.querySelector('shade-text-area')
       expect(textArea).not.toBeNull()
@@ -63,7 +63,7 @@ describe('TextArea', () => {
         jsxElement: <TextArea labelTitle="Test" labelProps={{ className: 'custom-label-class' }} />,
       })
 
-      await sleepAsync(50)
+      await flushUpdates()
 
       const textArea = document.querySelector('shade-text-area')
       const label = textArea?.querySelector('label')
@@ -82,7 +82,7 @@ describe('TextArea', () => {
         jsxElement: <TextArea variant="outlined" />,
       })
 
-      await sleepAsync(50)
+      await flushUpdates()
 
       const textArea = document.querySelector('shade-text-area') as HTMLElement
       expect(textArea).not.toBeNull()
@@ -100,7 +100,7 @@ describe('TextArea', () => {
         jsxElement: <TextArea variant="contained" />,
       })
 
-      await sleepAsync(50)
+      await flushUpdates()
 
       const textArea = document.querySelector('shade-text-area') as HTMLElement
       expect(textArea).not.toBeNull()
@@ -118,7 +118,7 @@ describe('TextArea', () => {
         jsxElement: <TextArea />,
       })
 
-      await sleepAsync(50)
+      await flushUpdates()
 
       const textArea = document.querySelector('shade-text-area') as HTMLElement
       expect(textArea).not.toBeNull()
@@ -136,7 +136,7 @@ describe('TextArea', () => {
         jsxElement: <TextArea disabled />,
       })
 
-      await sleepAsync(50)
+      await flushUpdates()
 
       const textArea = document.querySelector('shade-text-area') as HTMLElement
       expect(textArea).not.toBeNull()
@@ -154,7 +154,7 @@ describe('TextArea', () => {
         jsxElement: <TextArea disabled={false} />,
       })
 
-      await sleepAsync(50)
+      await flushUpdates()
 
       const textArea = document.querySelector('shade-text-area') as HTMLElement
       expect(textArea).not.toBeNull()
@@ -172,7 +172,7 @@ describe('TextArea', () => {
         jsxElement: <TextArea value="Test content" />,
       })
 
-      await sleepAsync(50)
+      await flushUpdates()
 
       const textArea = document.querySelector('shade-text-area')
       const contentDiv = textArea?.querySelector('.textarea-content')
@@ -192,7 +192,7 @@ describe('TextArea', () => {
         jsxElement: <TextArea />,
       })
 
-      await sleepAsync(50)
+      await flushUpdates()
 
       const textArea = document.querySelector('shade-text-area')
       const contentDiv = textArea?.querySelector('.textarea-content') as HTMLElement
@@ -211,7 +211,7 @@ describe('TextArea', () => {
         jsxElement: <TextArea readOnly />,
       })
 
-      await sleepAsync(50)
+      await flushUpdates()
 
       const textArea = document.querySelector('shade-text-area')
       const contentDiv = textArea?.querySelector('.textarea-content') as HTMLElement
@@ -230,7 +230,7 @@ describe('TextArea', () => {
         jsxElement: <TextArea disabled />,
       })
 
-      await sleepAsync(50)
+      await flushUpdates()
 
       const textArea = document.querySelector('shade-text-area')
       const contentDiv = textArea?.querySelector('.textarea-content') as HTMLElement
@@ -249,7 +249,7 @@ describe('TextArea', () => {
         jsxElement: <TextArea style={{ color: 'red' }} />,
       })
 
-      await sleepAsync(50)
+      await flushUpdates()
 
       const textArea = document.querySelector('shade-text-area')
       const contentDiv = textArea?.querySelector('.textarea-content') as HTMLElement
@@ -268,7 +268,7 @@ describe('TextArea', () => {
         jsxElement: <TextArea labelProps={{ style: { backgroundColor: 'blue' } }} />,
       })
 
-      await sleepAsync(50)
+      await flushUpdates()
 
       const textArea = document.querySelector('shade-text-area')
       const label = textArea?.querySelector('label') as HTMLElement
@@ -287,7 +287,7 @@ describe('TextArea', () => {
         jsxElement: <TextArea />,
       })
 
-      await sleepAsync(50)
+      await flushUpdates()
 
       const textArea = document.querySelector('shade-text-area') as HTMLElement
       expect(textArea).not.toBeNull()

package/src/components/linear-progress.spec.tsx

@@ -178,7 +178,7 @@ describe('LinearProgress', () => {
         expect(bar.style.width).toBe('20%')
 
         value.setValue(80)
-        await sleepAsync(10)
+        await sleepAsync(50)
 
         expect(bar.style.width).toBe('80%')
       })
@@ -201,7 +201,7 @@ describe('LinearProgress', () => {
         expect(el.getAttribute('aria-valuenow')).toBe('30')
 
         value.setValue(90)
-        await sleepAsync(10)
+        await sleepAsync(50)
 
         expect(el.getAttribute('aria-valuenow')).toBe('90')
       })