@furystack/shades-common-components 13.4.0 → 13.4.1

package/src/components/cache-view.spec.tsx

@@ -1,6 +1,7 @@
 import { Cache } from '@furystack/cache'
 import type { CacheResult, CacheWithValue } from '@furystack/cache'
 import { Shade, createComponent, flushUpdates } from '@furystack/shades'
+import { using, usingAsync } from '@furystack/utils'
 
 import { describe, expect, it, vi } from 'vitest'
 import { CacheView } from './cache-view.js'
@@ -45,232 +46,249 @@ describe('CacheView', () => {
   })
 
   it('should create a cache-view element', () => {
-    const cache = new Cache<string, [string]>({ load: async (key) => key })
-    const el = (<CacheView cache={cache} args={['test']} content={TestContent} />) as unknown as HTMLElement
-    expect(el).toBeDefined()
-    expect(el.tagName?.toLowerCase()).toBe('shade-cache-view')
-    cache[Symbol.dispose]()
+    using(new Cache<string, [string]>({ load: async (key) => key }), (cache) => {
+      const el = (<CacheView cache={cache} args={['test']} content={TestContent} />) as unknown as HTMLElement
+      expect(el).toBeDefined()
+      expect(el.tagName?.toLowerCase()).toBe('shade-cache-view')
+    })
   })
 
   describe('loading state', () => {
     it('should render null by default when loading', async () => {
-      const cache = new Cache<string, [string]>({
-        load: () => new Promise(() => {}),
-      })
-      const { cacheView } = await renderCacheView(cache, ['test'])
-      expect(cacheView.querySelector('test-cache-content')).toBeNull()
-      expect(cacheView.querySelector('shade-result')).toBeNull()
-      cache[Symbol.dispose]()
+      await usingAsync(
+        new Cache<string, [string]>({
+          load: () => new Promise(() => {}),
+        }),
+        async (cache) => {
+          const { cacheView } = await renderCacheView(cache, ['test'])
+          expect(cacheView.querySelector('test-cache-content')).toBeNull()
+          expect(cacheView.querySelector('shade-result')).toBeNull()
+        },
+      )
     })
 
     it('should render custom loader when provided', async () => {
-      const cache = new Cache<string, [string]>({
-        load: () => new Promise(() => {}),
-      })
-      const { cacheView } = await renderCacheView(cache, ['test'], {
-        loader: (<span className="custom-loader">Loading...</span>) as unknown as JSX.Element,
-      })
-      const loader = cacheView.querySelector('.custom-loader')
-      expect(loader).not.toBeNull()
-      expect(loader?.textContent).toBe('Loading...')
-      cache[Symbol.dispose]()
+      await usingAsync(
+        new Cache<string, [string]>({
+          load: () => new Promise(() => {}),
+        }),
+        async (cache) => {
+          const { cacheView } = await renderCacheView(cache, ['test'], {
+            loader: (<span className="custom-loader">Loading...</span>) as unknown as JSX.Element,
+          })
+          const loader = cacheView.querySelector('.custom-loader')
+          expect(loader).not.toBeNull()
+          expect(loader?.textContent).toBe('Loading...')
+        },
+      )
     })
   })
 
   describe('loaded state', () => {
     it('should render content when cache has loaded value', async () => {
-      const cache = new Cache<string, [string]>({ load: async (key) => `Hello ${key}` })
-      await cache.get('world')
-      const { cacheView } = await renderCacheView(cache, ['world'])
-      const contentEl = cacheView.querySelector('test-cache-content')
-      expect(contentEl).not.toBeNull()
-      const contentComponent = contentEl as JSX.Element
-      contentComponent.updateComponent()
-      await flushUpdates()
-      const valueEl = contentComponent.querySelector('.content-value')
-      expect(valueEl?.textContent).toBe('Hello world')
-      cache[Symbol.dispose]()
+      await usingAsync(new Cache<string, [string]>({ load: async (key) => `Hello ${key}` }), async (cache) => {
+        await cache.get('world')
+        const { cacheView } = await renderCacheView(cache, ['world'])
+        const contentEl = cacheView.querySelector('test-cache-content')
+        expect(contentEl).not.toBeNull()
+        const contentComponent = contentEl as JSX.Element
+        contentComponent.updateComponent()
+        await flushUpdates()
+        const valueEl = contentComponent.querySelector('.content-value')
+        expect(valueEl?.textContent).toBe('Hello world')
+      })
     })
   })
 
   describe('failed state', () => {
     it('should render default error UI when cache has failed', async () => {
-      const cache = new Cache<string, [string]>({
-        load: async () => {
-          throw new Error('Test failure')
+      await usingAsync(
+        new Cache<string, [string]>({
+          load: async () => {
+            throw new Error('Test failure')
+          },
+        }),
+        async (cache) => {
+          try {
+            await cache.get('test')
+          } catch {
+            // expected
+          }
+          const { cacheView } = await renderCacheView(cache, ['test'])
+          const resultEl = cacheView.querySelector('shade-result')
+          expect(resultEl).not.toBeNull()
+          const resultComponent = resultEl as JSX.Element
+          resultComponent.updateComponent()
+          await flushUpdates()
+          const titleEl = resultComponent.querySelector('.result-title') as JSX.Element
+          titleEl.updateComponent()
+          await flushUpdates()
+          expect(titleEl?.textContent).toBe('Something went wrong')
         },
-      })
-      try {
-        await cache.get('test')
-      } catch {
-        // expected
-      }
-      const { cacheView } = await renderCacheView(cache, ['test'])
-      const resultEl = cacheView.querySelector('shade-result')
-      expect(resultEl).not.toBeNull()
-      const resultComponent = resultEl as JSX.Element
-      resultComponent.updateComponent()
-      await flushUpdates()
-      const titleEl = resultComponent.querySelector('.result-title') as JSX.Element
-      titleEl.updateComponent()
-      await flushUpdates()
-      expect(titleEl?.textContent).toBe('Something went wrong')
-      cache[Symbol.dispose]()
+      )
     })
 
     it('should render custom error UI when error prop is provided', async () => {
-      const cache = new Cache<string, [string]>({
-        load: async () => {
-          throw new Error('Custom failure')
+      await usingAsync(
+        new Cache<string, [string]>({
+          load: async () => {
+            throw new Error('Custom failure')
+          },
+        }),
+        async (cache) => {
+          try {
+            await cache.get('test')
+          } catch {
+            // expected
+          }
+          const customError = vi.fn(
+            (err: unknown, _retry: () => void) =>
+              (<span className="custom-error">{String(err)}</span>) as unknown as JSX.Element,
+          )
+          const { cacheView } = await renderCacheView(cache, ['test'], { error: customError })
+          expect(customError).toHaveBeenCalledOnce()
+          expect(customError.mock.calls[0][0]).toBeInstanceOf(Error)
+          const customErrorEl = cacheView.querySelector('.custom-error')
+          expect(customErrorEl).not.toBeNull()
         },
-      })
-      try {
-        await cache.get('test')
-      } catch {
-        // expected
-      }
-      const customError = vi.fn(
-        (err: unknown, _retry: () => void) =>
-          (<span className="custom-error">{String(err)}</span>) as unknown as JSX.Element,
       )
-      const { cacheView } = await renderCacheView(cache, ['test'], { error: customError })
-      expect(customError).toHaveBeenCalledOnce()
-      expect(customError.mock.calls[0][0]).toBeInstanceOf(Error)
-      const customErrorEl = cacheView.querySelector('.custom-error')
-      expect(customErrorEl).not.toBeNull()
-      cache[Symbol.dispose]()
     })
 
     it('should not render content when failed even if stale value exists', async () => {
-      const cache = new Cache<string, [string]>({ load: async (key) => key })
-      await cache.get('test')
-      cache.setExplicitValue({
-        loadArgs: ['test'],
-        value: { status: 'failed', error: new Error('fail'), value: 'stale', updatedAt: new Date() },
+      await usingAsync(new Cache<string, [string]>({ load: async (key) => key }), async (cache) => {
+        await cache.get('test')
+        cache.setExplicitValue({
+          loadArgs: ['test'],
+          value: { status: 'failed', error: new Error('fail'), value: 'stale', updatedAt: new Date() },
+        })
+        const { cacheView } = await renderCacheView(cache, ['test'])
+        expect(cacheView.querySelector('test-cache-content')).toBeNull()
+        expect(cacheView.querySelector('shade-result')).not.toBeNull()
       })
-      const { cacheView } = await renderCacheView(cache, ['test'])
-      expect(cacheView.querySelector('test-cache-content')).toBeNull()
-      expect(cacheView.querySelector('shade-result')).not.toBeNull()
-      cache[Symbol.dispose]()
     })
 
     it('should call cache.reload when retry is invoked', async () => {
       const loadFn = vi.fn<(key: string) => Promise<string>>(async () => {
         throw new Error('fail')
       })
-      const cache = new Cache<string, [string]>({ load: loadFn })
-      try {
-        await cache.get('test')
-      } catch {
-        // expected
-      }
-      let capturedRetry: (() => void) | undefined
-      const customError = (_err: unknown, retry: () => void) => {
-        capturedRetry = retry
-        return (<span className="custom-error">Error</span>) as unknown as JSX.Element
-      }
-      await renderCacheView(cache, ['test'], { error: customError })
-      expect(capturedRetry).toBeDefined()
-
-      loadFn.mockResolvedValueOnce('recovered')
-      capturedRetry!()
-      await flushUpdates()
-
-      const observable = cache.getObservable('test')
-      const result = observable.getValue()
-      expect(result.status).toBe('loaded')
-      expect(result.value).toBe('recovered')
-      cache[Symbol.dispose]()
+      await usingAsync(new Cache<string, [string]>({ load: loadFn }), async (cache) => {
+        try {
+          await cache.get('test')
+        } catch {
+          // expected
+        }
+        let capturedRetry: (() => void) | undefined
+        const customError = (_err: unknown, retry: () => void) => {
+          capturedRetry = retry
+          return (<span className="custom-error">Error</span>) as unknown as JSX.Element
+        }
+        await renderCacheView(cache, ['test'], { error: customError })
+        expect(capturedRetry).toBeDefined()
+
+        loadFn.mockResolvedValueOnce('recovered')
+        capturedRetry!()
+        await flushUpdates()
+
+        const observable = cache.getObservable('test')
+        const result = observable.getValue()
+        expect(result.status).toBe('loaded')
+        expect(result.value).toBe('recovered')
+      })
     })
   })
 
   describe('obsolete state', () => {
     it('should render content when obsolete and trigger reload', async () => {
       const loadFn = vi.fn(async (key: string) => `Hello ${key}`)
-      const cache = new Cache<string, [string]>({ load: loadFn })
-      await cache.get('test')
-      cache.setObsolete('test')
-
-      const { cacheView } = await renderCacheView(cache, ['test'])
-      const contentEl = cacheView.querySelector('test-cache-content')
-      expect(contentEl).not.toBeNull()
-
-      await flushUpdates()
-      // reload should have been called (initial load + obsolete reload)
-      expect(loadFn).toHaveBeenCalledTimes(2)
-      cache[Symbol.dispose]()
+      await usingAsync(new Cache<string, [string]>({ load: loadFn }), async (cache) => {
+        await cache.get('test')
+        cache.setObsolete('test')
+
+        const { cacheView } = await renderCacheView(cache, ['test'])
+        const contentEl = cacheView.querySelector('test-cache-content')
+        expect(contentEl).not.toBeNull()
+
+        await flushUpdates()
+        // reload should have been called (initial load + obsolete reload)
+        expect(loadFn).toHaveBeenCalledTimes(2)
+      })
     })
   })
 
   describe('error takes priority over value', () => {
     it('should show error when failed with value, not content', async () => {
-      const cache = new Cache<string, [string]>({ load: async (key) => key })
-      await cache.get('test')
-      const failedWithValue: CacheResult<string> = {
-        status: 'failed',
-        error: new Error('whoops'),
-        value: 'stale-data',
-        updatedAt: new Date(),
-      }
-      cache.setExplicitValue({ loadArgs: ['test'], value: failedWithValue })
-      const { cacheView } = await renderCacheView(cache, ['test'])
-      expect(cacheView.querySelector('test-cache-content')).toBeNull()
-      expect(cacheView.querySelector('shade-result')).not.toBeNull()
-      cache[Symbol.dispose]()
+      await usingAsync(new Cache<string, [string]>({ load: async (key) => key }), async (cache) => {
+        await cache.get('test')
+        const failedWithValue: CacheResult<string> = {
+          status: 'failed',
+          error: new Error('whoops'),
+          value: 'stale-data',
+          updatedAt: new Date(),
+        }
+        cache.setExplicitValue({ loadArgs: ['test'], value: failedWithValue })
+        const { cacheView } = await renderCacheView(cache, ['test'])
+        expect(cacheView.querySelector('test-cache-content')).toBeNull()
+        expect(cacheView.querySelector('shade-result')).not.toBeNull()
+      })
     })
   })
 
   describe('contentProps', () => {
     it('should forward contentProps to the content component', async () => {
-      const cache = new Cache<string, [string]>({ load: async (key) => `Hello ${key}` })
-      await cache.get('world')
-
-      const el = (
-        <div>
-          <CacheView
-            cache={cache}
-            args={['world']}
-            content={TestContentWithLabel}
-            contentProps={{ label: 'Greeting' }}
-          />
-        </div>
-      )
-      const cacheView = el.firstElementChild as JSX.Element
-      cacheView.updateComponent()
-      await flushUpdates()
-
-      const contentEl = cacheView.querySelector('test-cache-content-with-label') as JSX.Element
-      expect(contentEl).not.toBeNull()
-      contentEl.updateComponent()
-      await flushUpdates()
-      const valueEl = contentEl.querySelector('.content-value')
-      expect(valueEl?.textContent).toBe('Greeting: Hello world')
-      cache[Symbol.dispose]()
+      await usingAsync(new Cache<string, [string]>({ load: async (key) => `Hello ${key}` }), async (cache) => {
+        await cache.get('world')
+
+        const el = (
+          <div>
+            <CacheView
+              cache={cache}
+              args={['world']}
+              content={TestContentWithLabel}
+              contentProps={{ label: 'Greeting' }}
+            />
+          </div>
+        )
+        const cacheView = el.firstElementChild as JSX.Element
+        cacheView.updateComponent()
+        await flushUpdates()
+
+        const contentEl = cacheView.querySelector('test-cache-content-with-label') as JSX.Element
+        expect(contentEl).not.toBeNull()
+        contentEl.updateComponent()
+        await flushUpdates()
+        const valueEl = contentEl.querySelector('.content-value')
+        expect(valueEl?.textContent).toBe('Greeting: Hello world')
+      })
     })
 
     it('should forward contentProps when cache entry is obsolete', async () => {
       const loadFn = vi.fn(async (key: string) => `Hello ${key}`)
-      const cache = new Cache<string, [string]>({ load: loadFn })
-      await cache.get('world')
-      cache.setObsolete('world')
-
-      const el = (
-        <div>
-          <CacheView cache={cache} args={['world']} content={TestContentWithLabel} contentProps={{ label: 'Stale' }} />
-        </div>
-      )
-      const cacheView = el.firstElementChild as JSX.Element
-      cacheView.updateComponent()
-      await flushUpdates()
-
-      const contentEl = cacheView.querySelector('test-cache-content-with-label') as JSX.Element
-      expect(contentEl).not.toBeNull()
-      contentEl.updateComponent()
-      await flushUpdates()
-      const valueEl = contentEl.querySelector('.content-value')
-      expect(valueEl?.textContent).toBe('Stale: Hello world')
-      expect(loadFn).toHaveBeenCalledTimes(2)
-      cache[Symbol.dispose]()
+      await usingAsync(new Cache<string, [string]>({ load: loadFn }), async (cache) => {
+        await cache.get('world')
+        cache.setObsolete('world')
+
+        const el = (
+          <div>
+            <CacheView
+              cache={cache}
+              args={['world']}
+              content={TestContentWithLabel}
+              contentProps={{ label: 'Stale' }}
+            />
+          </div>
+        )
+        const cacheView = el.firstElementChild as JSX.Element
+        cacheView.updateComponent()
+        await flushUpdates()
+
+        const contentEl = cacheView.querySelector('test-cache-content-with-label') as JSX.Element
+        expect(contentEl).not.toBeNull()
+        contentEl.updateComponent()
+        await flushUpdates()
+        const valueEl = contentEl.querySelector('.content-value')
+        expect(valueEl?.textContent).toBe('Stale: Hello world')
+        expect(loadFn).toHaveBeenCalledTimes(2)
+      })
     })
   })
 
@@ -292,61 +310,59 @@ describe('CacheView', () => {
 
     it('should call startViewTransition when viewTransition is enabled and cache state category changes', async () => {
       const spy = mockStartViewTransition()
-      const cache = new Cache<string, [string]>({ load: async (key) => `loaded-${key}` })
-
-      const el = (
-        <div>
-          <CacheView
-            cache={cache}
-            args={['test']}
-            content={TestContent}
-            loader={<span className="loader">Loading</span>}
-            viewTransition
-          />
-        </div>
-      )
-      const cacheView = el.firstElementChild as JSX.Element
-      cacheView.updateComponent()
-      await flushUpdates()
-
-      expect(cacheView.querySelector('.loader')).toBeTruthy()
-      spy.mockClear()
+      await usingAsync(new Cache<string, [string]>({ load: async (key) => `loaded-${key}` }), async (cache) => {
+        const el = (
+          <div>
+            <CacheView
+              cache={cache}
+              args={['test']}
+              content={TestContent}
+              loader={<span className="loader">Loading</span>}
+              viewTransition
+            />
+          </div>
+        )
+        const cacheView = el.firstElementChild as JSX.Element
+        cacheView.updateComponent()
+        await flushUpdates()
+
+        expect(cacheView.querySelector('.loader')).toBeTruthy()
+        spy.mockClear()
 
-      await cache.get('test')
-      cacheView.updateComponent()
-      await flushUpdates()
+        await cache.get('test')
+        cacheView.updateComponent()
+        await flushUpdates()
 
-      expect(spy).toHaveBeenCalled()
-      cache[Symbol.dispose]()
+        expect(spy).toHaveBeenCalled()
+      })
       delete (document as unknown as Record<string, unknown>).startViewTransition
     })
 
     it('should not call startViewTransition when viewTransition is not set', async () => {
       const spy = mockStartViewTransition()
-      const cache = new Cache<string, [string]>({ load: async (key) => `loaded-${key}` })
-
-      const el = (
-        <div>
-          <CacheView
-            cache={cache}
-            args={['test']}
-            content={TestContent}
-            loader={<span className="loader">Loading</span>}
-          />
-        </div>
-      )
-      const cacheView = el.firstElementChild as JSX.Element
-      cacheView.updateComponent()
-      await flushUpdates()
-
-      spy.mockClear()
+      await usingAsync(new Cache<string, [string]>({ load: async (key) => `loaded-${key}` }), async (cache) => {
+        const el = (
+          <div>
+            <CacheView
+              cache={cache}
+              args={['test']}
+              content={TestContent}
+              loader={<span className="loader">Loading</span>}
+            />
+          </div>
+        )
+        const cacheView = el.firstElementChild as JSX.Element
+        cacheView.updateComponent()
+        await flushUpdates()
+
+        spy.mockClear()
 
-      await cache.get('test')
-      cacheView.updateComponent()
-      await flushUpdates()
+        await cache.get('test')
+        cacheView.updateComponent()
+        await flushUpdates()
 
-      expect(spy).not.toHaveBeenCalled()
-      cache[Symbol.dispose]()
+        expect(spy).not.toHaveBeenCalled()
+      })
       delete (document as unknown as Record<string, unknown>).startViewTransition
     })
   })

package/src/components/command-palette/command-palette-suggestion-list.tsx

@@ -95,7 +95,7 @@ export const CommandPaletteSuggestionList = Shade<{ manager: CommandPaletteManag
         ref={containerRef}
         className="suggestion-items-container"
         style={{
-          opacity: manager.isOpened.getValue() ? '1' : '0',
+          opacity: isOpenedAtRender ? '1' : '0',
           maxHeight: `${window.innerHeight * 0.8}px`,
           width: `calc(${Math.round(hostParentWidth)}px - 3em)`,
           ...(props.fullScreenSuggestions ? { left: '0', width: 'calc(100% - 42px)' } : {}),

package/src/components/inputs/input.tsx

@@ -243,6 +243,8 @@ export const Input = Shade<TextInputProps>({
 
     const themeProvider = injector.getInstance(ThemeProviderService)
 
+    // We want to use the CSS state hooks for the focused and validity states, so we need to disable the rule
+    // eslint-disable-next-line furystack/no-css-state-hooks
     const [focused, setFocused] = useState('focused', props.autofocus || false)
     const [validity, setValidity] = useState('validity', inputRef.current?.validity || emptyValidity)
 

package/src/components/inputs/select.tsx

@@ -4,8 +4,8 @@ import { cssVariableTheme } from '../../services/css-variable-theme.js'
 import type { Palette } from '../../services/theme-provider-service.js'
 import { ThemeProviderService } from '../../services/theme-provider-service.js'
 import { FormService } from '../form.js'
-import { Icon } from '../icons/icon.js'
 import { check, close } from '../icons/icon-definitions.js'
+import { Icon } from '../icons/icon.js'
 import type { InputValidationResult } from './input.js'
 
 export type SelectOption = {
@@ -384,6 +384,8 @@ export const Select = Shade<SelectProps>({
     }
 
     const [state, setState] = useState<SelectState>('selectState', initialState)
+    // We want to use the CSS state hooks for the focused and dropdown direction states, so we need to disable the rule
+    // eslint-disable-next-line furystack/no-css-state-hooks
     const [isFocused, setIsFocused] = useState('isFocused', false)
     const [dropdownDirection, setDropdownDirection] = useState<'up' | 'down'>('dropdownDirection', 'down')
 

package/src/components/result.tsx

@@ -40,16 +40,19 @@ const statusColorMap: Record<ResultStatus, string> = {
   '500': paletteMainColors.error.main,
 }
 
-const defaultIcons: Record<ResultStatus, JSX.Element> = {
-  success: (<Icon icon={checkCircle} size={64} />) as unknown as JSX.Element,
-  error: (<Icon icon={errorCircle} size={64} />) as unknown as JSX.Element,
-  warning: (<Icon icon={warningIcon} size={64} />) as unknown as JSX.Element,
-  info: (<Icon icon={infoIcon} size={64} />) as unknown as JSX.Element,
-  '403': (<Icon icon={forbidden} size={64} />) as unknown as JSX.Element,
-  '404': (<Icon icon={searchOff} size={64} />) as unknown as JSX.Element,
-  '500': (<Icon icon={serverError} size={64} />) as unknown as JSX.Element,
+const defaultIconDefs: Record<ResultStatus, typeof checkCircle> = {
+  success: checkCircle,
+  error: errorCircle,
+  warning: warningIcon,
+  info: infoIcon,
+  '403': forbidden,
+  '404': searchOff,
+  '500': serverError,
 }
 
+const getDefaultIcon = (status: ResultStatus): JSX.Element =>
+  (<Icon icon={defaultIconDefs[status]} size={64} />) as unknown as JSX.Element
+
 const defaultTitles: Record<ResultStatus, string> = {
   success: 'Success',
   error: 'Error',
@@ -114,7 +117,7 @@ export const Result = Shade<ResultProps>({
   render: ({ props, children, useHostProps }) => {
     const { status, title, subtitle, icon, style } = props
 
-    const displayIcon = icon ?? defaultIcons[status]
+    const displayIcon = icon ?? getDefaultIcon(status)
     const statusColor = statusColorMap[status]
 
     useHostProps({
@@ -146,4 +149,8 @@ export const Result = Shade<ResultProps>({
   },
 })
 
-export { defaultIcons as resultDefaultIcons, defaultTitles as resultDefaultTitles }
+export {
+  getDefaultIcon as resultGetDefaultIcon,
+  defaultIconDefs as resultDefaultIconDefs,
+  defaultTitles as resultDefaultTitles,
+}