@furystack/shades-common-components 12.4.0 → 12.6.0

package/src/components/markdown/markdown-editor.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 { MarkdownEditor } from './markdown-editor.js'
 
@@ -24,7 +24,7 @@ describe('MarkdownEditor', () => {
         jsxElement: <MarkdownEditor value="# Hello" />,
       })
 
-      await sleepAsync(50)
+      await flushUpdates()
 
       const el = document.querySelector('shade-markdown-editor')
       expect(el).not.toBeNull()
@@ -42,7 +42,7 @@ describe('MarkdownEditor', () => {
           jsxElement: <MarkdownEditor value="# Hello" />,
         })
 
-        await sleepAsync(50)
+        await flushUpdates()
 
         const split = document.querySelector('.md-editor-split') as HTMLElement
         expect(split).not.toBeNull()
@@ -68,7 +68,7 @@ describe('MarkdownEditor', () => {
           jsxElement: <MarkdownEditor value="# Hello" layout="above-below" />,
         })
 
-        await sleepAsync(50)
+        await flushUpdates()
 
         const split = document.querySelector('.md-editor-split') as HTMLElement
         expect(split).not.toBeNull()
@@ -88,7 +88,7 @@ describe('MarkdownEditor', () => {
           jsxElement: <MarkdownEditor value="# Hello" layout="tabs" />,
         })
 
-        await sleepAsync(50)
+        await flushUpdates()
 
         const tabs = document.querySelector('shade-markdown-editor shade-tabs')
         expect(tabs).not.toBeNull()
@@ -108,7 +108,7 @@ describe('MarkdownEditor', () => {
           jsxElement: <MarkdownEditor value="# Hello" layout="tabs" />,
         })
 
-        await sleepAsync(50)
+        await flushUpdates()
 
         const input = document.querySelector('shade-markdown-editor shade-markdown-input')
         expect(input).not.toBeNull()
@@ -127,7 +127,7 @@ describe('MarkdownEditor', () => {
         jsxElement: <MarkdownEditor value={mdContent} />,
       })
 
-      await sleepAsync(50)
+      await flushUpdates()
 
       const textarea = document.querySelector('shade-markdown-editor textarea') as HTMLTextAreaElement
       expect(textarea.value).toBe(mdContent)

package/src/components/markdown/markdown-input.spec.tsx

@@ -1,7 +1,8 @@
 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 { Form } from '../form.js'
 import { MarkdownInput } from './markdown-input.js'
 
 describe('MarkdownInput', () => {
@@ -24,7 +25,7 @@ describe('MarkdownInput', () => {
         jsxElement: <MarkdownInput value="" />,
       })
 
-      await sleepAsync(50)
+      await flushUpdates()
 
       const el = document.querySelector('shade-markdown-input')
       expect(el).not.toBeNull()
@@ -41,7 +42,7 @@ describe('MarkdownInput', () => {
         jsxElement: <MarkdownInput value="# Hello" />,
       })
 
-      await sleepAsync(50)
+      await flushUpdates()
 
       const textarea = document.querySelector('shade-markdown-input textarea') as HTMLTextAreaElement
       expect(textarea).not.toBeNull()
@@ -59,7 +60,7 @@ describe('MarkdownInput', () => {
         jsxElement: <MarkdownInput value="" labelTitle="Markdown Content" />,
       })
 
-      await sleepAsync(50)
+      await flushUpdates()
 
       const label = document.querySelector('shade-markdown-input label')
       expect(label?.textContent).toContain('Markdown Content')
@@ -76,7 +77,7 @@ describe('MarkdownInput', () => {
         jsxElement: <MarkdownInput value="" placeholder="Type markdown..." />,
       })
 
-      await sleepAsync(50)
+      await flushUpdates()
 
       const textarea = document.querySelector('shade-markdown-input textarea') as HTMLTextAreaElement
       expect(textarea.placeholder).toBe('Type markdown...')
@@ -93,7 +94,7 @@ describe('MarkdownInput', () => {
         jsxElement: <MarkdownInput value="" disabled />,
       })
 
-      await sleepAsync(50)
+      await flushUpdates()
 
       const wrapper = document.querySelector('shade-markdown-input') as HTMLElement
       expect(wrapper.hasAttribute('data-disabled')).toBe(true)
@@ -113,7 +114,7 @@ describe('MarkdownInput', () => {
         jsxElement: <MarkdownInput value="" readOnly />,
       })
 
-      await sleepAsync(50)
+      await flushUpdates()
 
       const textarea = document.querySelector('shade-markdown-input textarea') as HTMLTextAreaElement
       expect(textarea.readOnly).toBe(true)
@@ -131,13 +132,13 @@ describe('MarkdownInput', () => {
         jsxElement: <MarkdownInput value="" onValueChange={onValueChange} />,
       })
 
-      await sleepAsync(50)
+      await flushUpdates()
 
       const textarea = document.querySelector('shade-markdown-input textarea') as HTMLTextAreaElement
       textarea.value = '# New content'
       textarea.dispatchEvent(new Event('input', { bubbles: true }))
 
-      await sleepAsync(50)
+      await flushUpdates()
 
       expect(onValueChange).toHaveBeenCalledWith('# New content')
     })
@@ -153,13 +154,154 @@ describe('MarkdownInput', () => {
         jsxElement: <MarkdownInput value="" rows={20} />,
       })
 
-      await sleepAsync(50)
+      await flushUpdates()
 
       const textarea = document.querySelector('shade-markdown-input textarea') as HTMLTextAreaElement
       expect(textarea.rows).toBe(20)
     })
   })
 
+  it('should set name attribute on textarea', async () => {
+    await usingAsync(new Injector(), async (injector) => {
+      const rootElement = document.getElementById('root') as HTMLDivElement
+
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: <MarkdownInput value="" name="description" />,
+      })
+
+      await flushUpdates()
+
+      const textarea = document.querySelector('shade-markdown-input textarea') as HTMLTextAreaElement
+      expect(textarea.name).toBe('description')
+    })
+  })
+
+  it('should set required attribute on textarea', async () => {
+    await usingAsync(new Injector(), async (injector) => {
+      const rootElement = document.getElementById('root') as HTMLDivElement
+
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: <MarkdownInput value="" required />,
+      })
+
+      await flushUpdates()
+
+      const textarea = document.querySelector('shade-markdown-input textarea') as HTMLTextAreaElement
+      expect(textarea.required).toBe(true)
+    })
+  })
+
+  it('should set data-invalid when required and value is empty', async () => {
+    await usingAsync(new Injector(), async (injector) => {
+      const rootElement = document.getElementById('root') as HTMLDivElement
+
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: <MarkdownInput value="" required />,
+      })
+
+      await flushUpdates()
+
+      const wrapper = document.querySelector('shade-markdown-input') as HTMLElement
+      expect(wrapper.hasAttribute('data-invalid')).toBe(true)
+    })
+  })
+
+  it('should not set data-invalid when required and value is provided', async () => {
+    await usingAsync(new Injector(), async (injector) => {
+      const rootElement = document.getElementById('root') as HTMLDivElement
+
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: <MarkdownInput value="some content" required />,
+      })
+
+      await flushUpdates()
+
+      const wrapper = document.querySelector('shade-markdown-input') as HTMLElement
+      expect(wrapper.hasAttribute('data-invalid')).toBe(false)
+    })
+  })
+
+  it('should show validation error message from getValidationResult', async () => {
+    await usingAsync(new Injector(), async (injector) => {
+      const rootElement = document.getElementById('root') as HTMLDivElement
+
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: (
+          <MarkdownInput
+            value="short"
+            getValidationResult={({ value }) =>
+              value.length < 10 ? { isValid: false, message: 'Too short' } : { isValid: true }
+            }
+          />
+        ),
+      })
+
+      await flushUpdates()
+
+      const wrapper = document.querySelector('shade-markdown-input') as HTMLElement
+      expect(wrapper.hasAttribute('data-invalid')).toBe(true)
+      expect(wrapper.textContent).toContain('Too short')
+    })
+  })
+
+  it('should show helper text from getHelperText', async () => {
+    await usingAsync(new Injector(), async (injector) => {
+      const rootElement = document.getElementById('root') as HTMLDivElement
+
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: <MarkdownInput value="" getHelperText={() => 'Write some markdown here'} />,
+      })
+
+      await flushUpdates()
+
+      const wrapper = document.querySelector('shade-markdown-input') as HTMLElement
+      expect(wrapper.textContent).toContain('Write some markdown here')
+    })
+  })
+
+  it('should render with validation inside a Form', async () => {
+    await usingAsync(new Injector(), async (injector) => {
+      const rootElement = document.getElementById('root') as HTMLDivElement
+
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: (
+          <Form onSubmit={() => {}} validate={(_data): _data is { content: string } => true}>
+            <MarkdownInput
+              value="short"
+              name="content"
+              getValidationResult={({ value }) =>
+                value.length < 10 ? { isValid: false, message: 'Too short' } : { isValid: true }
+              }
+            />
+          </Form>
+        ),
+      })
+
+      await flushUpdates()
+
+      const wrapper = document.querySelector('shade-markdown-input') as HTMLElement
+      expect(wrapper.hasAttribute('data-invalid')).toBe(true)
+      expect(wrapper.textContent).toContain('Too short')
+
+      const textarea = wrapper.querySelector('textarea') as HTMLTextAreaElement
+      expect(textarea.name).toBe('content')
+    })
+  })
+
   describe('image paste', () => {
     const createPasteEvent = (items: Array<{ type: string; file: File | null }>) => {
       const pasteEvent = new Event('paste', { bubbles: true, cancelable: true })
@@ -200,7 +342,7 @@ describe('MarkdownInput', () => {
             jsxElement: <MarkdownInput value="Hello " onValueChange={onValueChange} />,
           })
 
-          await sleepAsync(50)
+          await flushUpdates()
 
           const textarea = document.querySelector('shade-markdown-input textarea') as HTMLTextAreaElement
           textarea.selectionStart = 6
@@ -210,7 +352,7 @@ describe('MarkdownInput', () => {
           const pasteEvent = createPasteEvent([{ type: 'image/png', file }])
           textarea.dispatchEvent(pasteEvent)
 
-          await sleepAsync(100)
+          await flushUpdates()
 
           expect(onValueChange).toHaveBeenCalledOnce()
           const result = onValueChange.mock.calls[0][0] as string
@@ -233,14 +375,14 @@ describe('MarkdownInput', () => {
           jsxElement: <MarkdownInput value="" onValueChange={onValueChange} maxImageSizeBytes={5} />,
         })
 
-        await sleepAsync(50)
+        await flushUpdates()
 
         const textarea = document.querySelector('shade-markdown-input textarea') as HTMLTextAreaElement
         const file = new File(['this-is-larger-than-5-bytes'], 'big.png', { type: 'image/png' })
         const pasteEvent = createPasteEvent([{ type: 'image/png', file }])
         textarea.dispatchEvent(pasteEvent)
 
-        await sleepAsync(100)
+        await flushUpdates()
 
         expect(onValueChange).not.toHaveBeenCalled()
       })
@@ -257,14 +399,14 @@ describe('MarkdownInput', () => {
           jsxElement: <MarkdownInput value="" onValueChange={onValueChange} />,
         })
 
-        await sleepAsync(50)
+        await flushUpdates()
 
         const textarea = document.querySelector('shade-markdown-input textarea') as HTMLTextAreaElement
         const file = new File(['text content'], 'note.txt', { type: 'text/plain' })
         const pasteEvent = createPasteEvent([{ type: 'text/plain', file }])
         const wasDefaultPrevented = !textarea.dispatchEvent(pasteEvent)
 
-        await sleepAsync(100)
+        await flushUpdates()
 
         expect(wasDefaultPrevented).toBe(false)
         expect(onValueChange).not.toHaveBeenCalled()

package/src/components/markdown/markdown-input.tsx

@@ -1,5 +1,7 @@
 import { Shade, createComponent } from '@furystack/shades'
 import { cssVariableTheme } from '../../services/css-variable-theme.js'
+import type { InputValidationResult } from '../inputs/input.js'
+import { FormService } from '../form.js'
 
 const DEFAULT_MAX_IMAGE_SIZE = 256 * 1024
 
@@ -20,6 +22,14 @@ export type MarkdownInputProps = {
   labelTitle?: string
   /** Number of visible text rows */
   rows?: number
+  /** Form field name for FormService integration */
+  name?: string
+  /** Whether the field is required */
+  required?: boolean
+  /** Custom validation callback */
+  getValidationResult?: (options: { value: string }) => InputValidationResult
+  /** Optional helper text callback */
+  getHelperText?: (options: { value: string; validationResult?: InputValidationResult }) => JSX.Element | string
 }
 
 /**
@@ -53,6 +63,11 @@ export const MarkdownInput = Shade<MarkdownInputProps>({
       color: cssVariableTheme.palette.primary.main,
     },
 
+    '&[data-invalid] label': {
+      borderColor: cssVariableTheme.palette.error.main,
+      color: cssVariableTheme.palette.error.main,
+    },
+
     '& textarea': {
       border: 'none',
       backgroundColor: 'transparent',
@@ -71,15 +86,61 @@ export const MarkdownInput = Shade<MarkdownInputProps>({
     '&:focus-within textarea': {
       boxShadow: `0px 3px 0px ${cssVariableTheme.palette.primary.main}`,
     },
+
+    '&[data-invalid]:focus-within textarea': {
+      boxShadow: `0px 3px 0px ${cssVariableTheme.palette.error.main}`,
+    },
+
+    '& .helperText': {
+      fontSize: cssVariableTheme.typography.fontSize.xs,
+      marginTop: '6px',
+      opacity: '0.85',
+      lineHeight: '1.4',
+    },
   },
-  render: ({ props, useHostProps, useRef }) => {
+  render: ({ props, injector, useDisposable, useHostProps, useRef }) => {
     const maxSize = props.maxImageSizeBytes ?? DEFAULT_MAX_IMAGE_SIZE
     const textareaRef = useRef<HTMLTextAreaElement>('textarea')
 
+    useDisposable('form-registration', () => {
+      const formService = injector.cachedSingletons.has(FormService) ? injector.getInstance(FormService) : null
+      if (formService) {
+        queueMicrotask(() => {
+          if (textareaRef.current) formService.inputs.add(textareaRef.current as unknown as HTMLInputElement)
+        })
+      }
+      return {
+        [Symbol.dispose]: () => {
+          if (textareaRef.current && formService)
+            formService.inputs.delete(textareaRef.current as unknown as HTMLInputElement)
+        },
+      }
+    })
+
+    const validationResult = props.getValidationResult?.({ value: props.value })
+    const isRequired = props.required && !props.value
+    const isInvalid = validationResult?.isValid === false || isRequired
+
+    if (injector.cachedSingletons.has(FormService) && props.name) {
+      const formService = injector.getInstance(FormService)
+      const fieldResult: InputValidationResult = isRequired
+        ? { isValid: false, message: 'Value is required' }
+        : validationResult || { isValid: true }
+      const validity = textareaRef.current?.validity ?? ({} as ValidityState)
+      formService.setFieldState(props.name as keyof unknown, fieldResult, validity)
+    }
+
     useHostProps({
       'data-disabled': props.disabled ? '' : undefined,
+      'data-invalid': isInvalid ? '' : undefined,
     })
 
+    const helperNode =
+      (validationResult?.isValid === false && validationResult?.message) ||
+      (isRequired && 'Value is required') ||
+      props.getHelperText?.({ value: props.value, validationResult }) ||
+      ''
+
     const handleInput = (ev: Event) => {
       const target = ev.target as HTMLTextAreaElement
       props.onValueChange?.(target.value)
@@ -129,6 +190,8 @@ export const MarkdownInput = Shade<MarkdownInputProps>({
         {props.labelTitle ? <span>{props.labelTitle}</span> : null}
         <textarea
           ref={textareaRef}
+          name={props.name}
+          required={props.required}
           value={props.value}
           oninput={handleInput}
           onpaste={handlePaste}
@@ -137,6 +200,7 @@ export const MarkdownInput = Shade<MarkdownInputProps>({
           placeholder={props.placeholder}
           rows={props.rows ?? 10}
         />
+        {helperNode ? <span className="helperText">{helperNode}</span> : null}
       </label>
     )
   },

package/src/components/menu/menu.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 type { MenuEntry } from './menu-types.js'
 import { Menu } from './menu.js'
@@ -29,7 +29,7 @@ describe('Menu', () => {
       rootElement: root,
       jsxElement: <Menu {...props} />,
     })
-    await sleepAsync(50)
+    await flushUpdates()
     return {
       injector,
       menu: root.querySelector('shade-menu') as HTMLElement,
@@ -219,7 +219,7 @@ describe('Menu', () => {
         const groupLabel = menu.querySelector('.menu-group-label-inline') as HTMLElement
         expect(groupLabel).toBeTruthy()
         groupLabel.click()
-        await sleepAsync(50)
+        await flushUpdates()
 
         const groupItems = menu.querySelectorAll('[role="menuitem"]')
         expect(groupItems.length).toBe(1)
@@ -239,7 +239,7 @@ describe('Menu', () => {
       await usingAsync(await renderMenu({ items: createTestItems() }), async ({ menu }) => {
         menu.focus()
         menu.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true }))
-        await sleepAsync(50)
+        await flushUpdates()
 
         const focusedItem = menu.querySelector('.menu-item.focused')
         expect(focusedItem).toBeTruthy()
@@ -251,7 +251,7 @@ describe('Menu', () => {
       await usingAsync(await renderMenu({ items: createTestItems(), mode: 'horizontal' }), async ({ menu }) => {
         menu.focus()
         menu.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowRight', bubbles: true }))
-        await sleepAsync(50)
+        await flushUpdates()
 
         const focusedItem = menu.querySelector('.menu-item.focused')
         expect(focusedItem).toBeTruthy()
@@ -265,10 +265,10 @@ describe('Menu', () => {
         menu.focus()
         // Navigate to first item
         menu.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true }))
-        await sleepAsync(50)
+        await flushUpdates()
         // Press Enter
         menu.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true }))
-        await sleepAsync(50)
+        await flushUpdates()
         expect(handleSelect).toHaveBeenCalledWith('home')
       })
     })
@@ -277,7 +277,7 @@ describe('Menu', () => {
       await usingAsync(await renderMenu({ items: createTestItems() }), async ({ menu }) => {
         menu.focus()
         menu.dispatchEvent(new KeyboardEvent('keydown', { key: 'End', bubbles: true }))
-        await sleepAsync(50)
+        await flushUpdates()
 
         const focusedItem = menu.querySelector('.menu-item.focused')
         expect(focusedItem?.getAttribute('data-key')).toBe('settings')
@@ -289,10 +289,10 @@ describe('Menu', () => {
         menu.focus()
         // Go to end first
         menu.dispatchEvent(new KeyboardEvent('keydown', { key: 'End', bubbles: true }))
-        await sleepAsync(50)
+        await flushUpdates()
         // Then Home
         menu.dispatchEvent(new KeyboardEvent('keydown', { key: 'Home', bubbles: true }))
-        await sleepAsync(50)
+        await flushUpdates()
 
         const focusedItem = menu.querySelector('.menu-item.focused')
         expect(focusedItem?.getAttribute('data-key')).toBe('home')
@@ -308,10 +308,10 @@ describe('Menu', () => {
         menu.focus()
         // Navigate to end
         menu.dispatchEvent(new KeyboardEvent('keydown', { key: 'End', bubbles: true }))
-        await sleepAsync(50)
+        await flushUpdates()
         // One more down should wrap to first
         menu.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true }))
-        await sleepAsync(50)
+        await flushUpdates()
 
         const focusedItem = menu.querySelector('.menu-item.focused')
         expect(focusedItem?.getAttribute('data-key')).toBe('a')
@@ -327,10 +327,10 @@ describe('Menu', () => {
         menu.focus()
         // Navigate to Home first
         menu.dispatchEvent(new KeyboardEvent('keydown', { key: 'Home', bubbles: true }))
-        await sleepAsync(50)
+        await flushUpdates()
         // One more up should wrap to last
         menu.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowUp', bubbles: true }))
-        await sleepAsync(50)
+        await flushUpdates()
 
         const focusedItem = menu.querySelector('.menu-item.focused')
         expect(focusedItem?.getAttribute('data-key')).toBe('b')
@@ -342,9 +342,9 @@ describe('Menu', () => {
       await usingAsync(await renderMenu({ items: createTestItems(), onSelect: handleSelect }), async ({ menu }) => {
         menu.focus()
         menu.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true }))
-        await sleepAsync(50)
+        await flushUpdates()
         menu.dispatchEvent(new KeyboardEvent('keydown', { key: ' ', bubbles: true }))
-        await sleepAsync(50)
+        await flushUpdates()
         expect(handleSelect).toHaveBeenCalledWith('home')
       })
     })
@@ -354,11 +354,11 @@ describe('Menu', () => {
         menu.focus()
         // First go to end
         menu.dispatchEvent(new KeyboardEvent('keydown', { key: 'End', bubbles: true }))
-        await sleepAsync(50)
+        await flushUpdates()
 
         // Then ArrowUp
         menu.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowUp', bubbles: true }))
-        await sleepAsync(50)
+        await flushUpdates()
 
         const focusedItem = menu.querySelector('.menu-item.focused')
         expect(focusedItem?.getAttribute('data-key')).toBe('about')
@@ -370,11 +370,11 @@ describe('Menu', () => {
         menu.focus()
         // First go to end
         menu.dispatchEvent(new KeyboardEvent('keydown', { key: 'End', bubbles: true }))
-        await sleepAsync(50)
+        await flushUpdates()
 
         // Then ArrowLeft
         menu.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowLeft', bubbles: true }))
-        await sleepAsync(50)
+        await flushUpdates()
 
         const focusedItem = menu.querySelector('.menu-item.focused')
         expect(focusedItem?.getAttribute('data-key')).toBe('about')
@@ -386,7 +386,7 @@ describe('Menu', () => {
       await usingAsync(await renderMenu({ items: createTestItems(), onSelect: handleSelect }), async ({ menu }) => {
         menu.focus()
         menu.dispatchEvent(new KeyboardEvent('keydown', { key: 'a', bubbles: true }))
-        await sleepAsync(50)
+        await flushUpdates()
         expect(handleSelect).not.toHaveBeenCalled()
       })
     })
@@ -397,7 +397,7 @@ describe('Menu', () => {
         menu.focus()
         // Press Enter without navigating to any item first
         menu.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true }))
-        await sleepAsync(50)
+        await flushUpdates()
         expect(handleSelect).not.toHaveBeenCalled()
       })
     })
@@ -407,7 +407,7 @@ describe('Menu', () => {
       await usingAsync(await renderMenu({ items }), async ({ menu }) => {
         menu.focus()
         menu.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true }))
-        await sleepAsync(50)
+        await flushUpdates()
         const focusedItem = menu.querySelector('.menu-item.focused')
         expect(focusedItem).toBeNull()
       })
@@ -419,7 +419,7 @@ describe('Menu', () => {
       await usingAsync(await renderMenu({ items: createTestItems() }), async ({ menu }) => {
         const item = menu.querySelector('[data-key="about"]') as HTMLElement
         item.dispatchEvent(new MouseEvent('mouseenter', { bubbles: true }))
-        await sleepAsync(50)
+        await flushUpdates()
 
         expect(item.classList.contains('focused')).toBe(true)
       })
@@ -430,7 +430,7 @@ describe('Menu', () => {
       await usingAsync(await renderMenu({ items }), async ({ menu }) => {
         const item = menu.querySelector('[data-key="disabled-item"]') as HTMLElement
         item.dispatchEvent(new MouseEvent('mouseenter', { bubbles: true }))
-        await sleepAsync(50)
+        await flushUpdates()
 
         expect(item.classList.contains('focused')).toBe(false)
       })
@@ -452,13 +452,13 @@ describe('Menu', () => {
 
         // Expand
         groupLabel.click()
-        await sleepAsync(50)
+        await flushUpdates()
         const groupChildren = menu.querySelector('.menu-group-children') as HTMLElement
         expect(groupChildren.style.display).toBe('')
 
         // Collapse
         groupLabel.click()
-        await sleepAsync(50)
+        await flushUpdates()
         expect(groupChildren.style.display).toBe('none')
       })
     })