@furystack/shades-common-components 13.3.1 → 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,324 @@ 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)
+      })
+    })
+  })
+
+  describe('view transitions', () => {
+    const mockStartViewTransition = () => {
+      const spy = vi.fn((optionsOrCallback: StartViewTransitionOptions | (() => void)) => {
+        const update = typeof optionsOrCallback === 'function' ? optionsOrCallback : optionsOrCallback.update
+        update?.()
+        return {
+          finished: Promise.resolve(),
+          ready: Promise.resolve(),
+          updateCallbackDone: Promise.resolve(),
+          skipTransition: vi.fn(),
+        } as unknown as ViewTransition
+      })
+      document.startViewTransition = spy as typeof document.startViewTransition
+      return spy
+    }
+
+    it('should call startViewTransition when viewTransition is enabled and cache state category changes', async () => {
+      const spy = mockStartViewTransition()
+      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()
+
+        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()
+      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()
+
+        expect(spy).not.toHaveBeenCalled()
+      })
+      delete (document as unknown as Record<string, unknown>).startViewTransition
     })
   })
 })

package/src/components/cache-view.tsx

@@ -1,7 +1,7 @@
 import type { Cache, CacheWithValue } from '@furystack/cache'
 import { hasCacheValue, isFailedCacheResult, isObsoleteCacheResult } from '@furystack/cache'
-import type { PartialElement, ShadeComponent } from '@furystack/shades'
-import { Shade, createComponent } from '@furystack/shades'
+import type { PartialElement, ShadeComponent, ViewTransitionConfig } from '@furystack/shades'
+import { Shade, createComponent, transitionedValue } from '@furystack/shades'
 
 import { cssVariableTheme } from '../services/css-variable-theme.js'
 import { Button } from './button.js'
@@ -32,6 +32,7 @@ export type CacheViewProps<
    * If not provided, a default Result + retry Button is shown.
    */
   error?: (error: unknown, retry: () => void) => JSX.Element
+  viewTransition?: boolean | ViewTransitionConfig
 } & (keyof Omit<TContentProps, 'data' | keyof PartialElement<HTMLElement>> extends never
   ? { contentProps?: never }
   : { contentProps: Omit<TContentProps, 'data' | keyof PartialElement<HTMLElement>> })
@@ -80,6 +81,7 @@ type InternalCacheViewProps = {
   contentProps?: Record<string, unknown>
   loader?: JSX.Element
   error?: (error: unknown, retry: () => void) => JSX.Element
+  viewTransition?: boolean | ViewTransitionConfig
 }
 
 export const CacheView = Shade<InternalCacheViewProps>({
@@ -88,13 +90,24 @@ export const CacheView = Shade<InternalCacheViewProps>({
     fontFamily: cssVariableTheme.typography.fontFamily,
   },
   render: ({ props, useObservable, useState }): JSX.Element | null => {
-    const { cache, args, content, loader, error, contentProps } = props
+    const { cache, args, content, loader, error, contentProps, viewTransition } = props
 
     const argsKey = JSON.stringify(args)
     const observable = cache.getObservable(...args)
 
     const [result] = useObservable(`cache-${argsKey}`, observable)
 
+    const getCategory = (r: typeof result) =>
+      isFailedCacheResult(r) ? 'error' : hasCacheValue(r) ? 'value' : 'loading'
+
+    const displayedResult = transitionedValue(
+      useState,
+      'displayedResult',
+      result,
+      viewTransition,
+      (prev, next) => getCategory(prev) !== getCategory(next),
+    )
+
     const [lastReloadedArgsKey, setLastReloadedArgsKey] = useState<string | null>('lastReloadedArgsKey', null)
 
     const retry = () => {
@@ -104,14 +117,14 @@ export const CacheView = Shade<InternalCacheViewProps>({
     }
 
     // 1. Error first
-    if (isFailedCacheResult(result)) {
+    if (isFailedCacheResult(displayedResult)) {
       const errorRenderer = error ?? getDefaultErrorUi
-      return errorRenderer(result.error, retry)
+      return errorRenderer(displayedResult.error, retry)
     }
 
     // 2. Value next
-    if (hasCacheValue(result)) {
-      if (isObsoleteCacheResult(result)) {
+    if (hasCacheValue(displayedResult)) {
+      if (isObsoleteCacheResult(displayedResult)) {
         if (lastReloadedArgsKey !== argsKey) {
           setLastReloadedArgsKey(argsKey)
           cache.reload(...args).catch(() => {
@@ -122,7 +135,7 @@ export const CacheView = Shade<InternalCacheViewProps>({
         setLastReloadedArgsKey(null)
       }
       return createComponent(content, {
-        data: result,
+        data: displayedResult,
         ...(contentProps ?? {}),
       }) as unknown as JSX.Element
     }

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')