@furystack/shades-common-components 13.3.1 → 13.4.1

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,
+}

package/src/components/suggest/index.tsx

@@ -83,21 +83,23 @@ export const Suggest: <T>(props: SuggestProps<T>, children: ChildrenList) => JSX
     useHostProps({
       'data-opened': isOpened ? '' : undefined,
     })
-    manager.isLoading.subscribe((isLoading) => {
-      const loader = loaderRef.current
-      if (!loader) return
-      if (isLoading) {
-        void promisifyAnimation(loader, [{ opacity: 0 }, { opacity: 1 }], {
-          duration: 100,
-          fill: 'forwards',
-        })
-      } else {
-        void promisifyAnimation(loader, [{ opacity: 1 }, { opacity: 0 }], {
-          duration: 100,
-          fill: 'forwards',
-        })
-      }
-    })
+    useDisposable('isLoadingSubscription', () =>
+      manager.isLoading.subscribe((isLoading) => {
+        const loader = loaderRef.current
+        if (!loader) return
+        if (isLoading) {
+          void promisifyAnimation(loader, [{ opacity: 0 }, { opacity: 1 }], {
+            duration: 100,
+            fill: 'forwards',
+          })
+        } else {
+          void promisifyAnimation(loader, [{ opacity: 1 }, { opacity: 0 }], {
+            duration: 100,
+            fill: 'forwards',
+          })
+        }
+      }),
+    )
     useDisposable('onSelectSuggestion', () =>
       manager.subscribe('onSelectSuggestion', props.onSelectSuggestion as (entry: unknown) => void),
     )
@@ -133,6 +135,7 @@ export const Suggest: <T>(props: SuggestProps<T>, children: ChildrenList) => JSX
           <div className="post-controls">
             <span ref={loaderRef} style={{ display: 'inline-flex' }}>
               <Loader
+                // eslint-disable-next-line furystack/no-direct-get-value-in-render -- Initial opacity only; animated transitions handled by isLoadingSubscription via DOM
                 style={{ width: '20px', height: '20px', opacity: manager.isLoading.getValue() ? '1' : '0' }}
                 delay={0}
                 borderWidth={4}

package/src/components/tabs.spec.tsx

@@ -13,6 +13,7 @@ describe('Tabs', () => {
   afterEach(() => {
     document.body.innerHTML = ''
     window.location.hash = ''
+    delete (document as unknown as Record<string, unknown>).startViewTransition
   })
 
   const createTabs = (): Tab[] => [
@@ -595,4 +596,75 @@ describe('Tabs', () => {
       })
     })
   })
+
+  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 hash changes', async () => {
+      const spy = mockStartViewTransition()
+
+      await usingAsync(new Injector(), async (injector) => {
+        window.location.hash = '#tab1'
+
+        const rootElement = document.getElementById('root') as HTMLDivElement
+        const tabs = createTabs()
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: <Tabs tabs={tabs} viewTransition />,
+        })
+
+        await flushUpdates()
+        spy.mockClear()
+
+        window.location.hash = '#tab2'
+        injector.getInstance(LocationService).updateState()
+        await flushUpdates()
+
+        expect(spy).toHaveBeenCalled()
+        expect(document.getElementById('content-2')).toBeTruthy()
+      })
+    })
+
+    it('should not call startViewTransition when viewTransition is not set', async () => {
+      const spy = mockStartViewTransition()
+
+      await usingAsync(new Injector(), async (injector) => {
+        window.location.hash = '#tab1'
+
+        const rootElement = document.getElementById('root') as HTMLDivElement
+        const tabs = createTabs()
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: <Tabs tabs={tabs} />,
+        })
+
+        await flushUpdates()
+        spy.mockClear()
+
+        window.location.hash = '#tab2'
+        injector.getInstance(LocationService).updateState()
+        await flushUpdates()
+
+        expect(spy).not.toHaveBeenCalled()
+        expect(document.getElementById('content-2')).toBeTruthy()
+      })
+    })
+  })
 })

package/src/components/tabs.tsx

@@ -1,4 +1,5 @@
-import { LocationService, Shade, createComponent } from '@furystack/shades'
+import type { ViewTransitionConfig } from '@furystack/shades'
+import { LocationService, Shade, createComponent, transitionedValue } from '@furystack/shades'
 import { buildTransition, cssVariableTheme } from '../services/css-variable-theme.js'
 import { close } from './icons/icon-definitions.js'
 import { Icon } from './icons/icon.js'
@@ -71,6 +72,7 @@ export const Tabs = Shade<{
   onClose?: (key: string) => void
   /** Called when the add button is clicked (only shown when this callback is provided) */
   onAdd?: () => void
+  viewTransition?: boolean | ViewTransitionConfig
 }>({
   shadowDomName: 'shade-tabs',
   css: {
@@ -212,7 +214,7 @@ export const Tabs = Shade<{
         borderRight: `1px solid ${cssVariableTheme.background.paper}`,
       },
   },
-  render: ({ props, useObservable, injector, useHostProps }) => {
+  render: ({ props, useObservable, injector, useHostProps, useState }) => {
     useHostProps({
       ...(props.containerStyle ? { style: props.containerStyle as Record<string, string> } : {}),
       ...(props.orientation === 'vertical' ? { 'data-orientation': 'vertical' } : {}),
@@ -224,7 +226,10 @@ export const Tabs = Shade<{
     const [hash] = useObservable('updateLocation', injector.getInstance(LocationService).onLocationHashChanged)
 
     const activeKey = isControlled ? props.activeKey! : hash.replace('#', '')
-    const activeTab = props.tabs.find((t) => t.hash === activeKey)
+
+    const displayedKey = transitionedValue(useState, 'displayedKey', activeKey, props.viewTransition)
+
+    const displayedTab = props.tabs.find((t) => t.hash === displayedKey)
 
     const handleTabClick = (e: MouseEvent, tab: Tab, index: number) => {
       const target = e.target as HTMLElement
@@ -277,7 +282,7 @@ export const Tabs = Shade<{
             </button>
           ) : null}
         </div>
-        {activeTab?.component}
+        {displayedTab?.component}
       </>
     )
   },

package/src/components/tree/tree.tsx

@@ -89,6 +89,7 @@ export const Tree: <T>(props: TreeProps<T>, children: ChildrenList) => JSX.Eleme
 
     const [flattenedNodes] = useObservable('flattenedNodes', props.treeService.flattenedNodes)
 
+    // eslint-disable-next-line furystack/require-use-observable-for-render -- Used as persistent ref, not reactive state; read and written synchronously in same render cycle
     const previousItemsRef = useDisposable('previousTreeItems', () => new ObservableValue<Set<unknown>>(new Set()))
     const previousItems = previousItemsRef.getValue()
     const currentItems = new Set<unknown>(flattenedNodes.map((n) => n.item))

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

@@ -67,12 +67,13 @@ describe('Wizard', () => {
 
   afterEach(() => {
     document.body.innerHTML = ''
+    delete (document as unknown as Record<string, unknown>).startViewTransition
   })
 
   const renderWizard = async (
     steps: Array<(props: WizardStepProps, children: ChildrenList) => JSX.Element>,
     onFinish?: () => void,
-    options?: { stepLabels?: string[]; showProgress?: boolean },
+    options?: { stepLabels?: string[]; showProgress?: boolean; viewTransition?: boolean },
   ) => {
     const injector = new Injector()
     const root = document.getElementById('root')!
@@ -85,6 +86,7 @@ describe('Wizard', () => {
           onFinish={onFinish}
           stepLabels={options?.stepLabels}
           showProgress={options?.showProgress}
+          viewTransition={options?.viewTransition}
         />
       ),
     })
@@ -347,4 +349,58 @@ describe('Wizard', () => {
       })
     })
   })
+
+  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 on next when viewTransition is enabled', async () => {
+      const spy = mockStartViewTransition()
+      await usingAsync(
+        await renderWizard([Step1, Step2, Step3], undefined, { viewTransition: true }),
+        async ({ clickNext, getStepName }) => {
+          spy.mockClear()
+          await clickNext()
+          expect(spy).toHaveBeenCalledTimes(1)
+          expect(getStepName()).toBe('step2')
+        },
+      )
+    })
+
+    it('should call startViewTransition on prev when viewTransition is enabled', async () => {
+      const spy = mockStartViewTransition()
+      await usingAsync(
+        await renderWizard([Step1, Step2, Step3], undefined, { viewTransition: true }),
+        async ({ clickNext, clickPrev, getStepName }) => {
+          await clickNext()
+          spy.mockClear()
+          await clickPrev()
+          expect(spy).toHaveBeenCalledTimes(1)
+          expect(getStepName()).toBe('step1')
+        },
+      )
+    })
+
+    it('should not call startViewTransition when viewTransition is not set', async () => {
+      const spy = mockStartViewTransition()
+      await usingAsync(await renderWizard([Step1, Step2, Step3]), async ({ clickNext, getStepName }) => {
+        spy.mockClear()
+        await clickNext()
+        expect(spy).not.toHaveBeenCalled()
+        expect(getStepName()).toBe('step2')
+      })
+    })
+  })
 })

package/src/components/wizard/index.tsx

@@ -1,5 +1,5 @@
-import type { ChildrenList } from '@furystack/shades'
-import { createComponent, Shade } from '@furystack/shades'
+import type { ChildrenList, ViewTransitionConfig } from '@furystack/shades'
+import { createComponent, maybeViewTransition, Shade } from '@furystack/shades'
 import { cssVariableTheme } from '../../services/css-variable-theme.js'
 import { Paper } from '../paper.js'
 
@@ -39,6 +39,7 @@ export interface WizardProps {
    * When true, a progress bar is shown above the content.
    */
   showProgress?: boolean
+  viewTransition?: boolean | ViewTransitionConfig
 }
 
 export const Wizard = Shade<WizardProps>({
@@ -182,14 +183,14 @@ export const Wizard = Shade<WizardProps>({
             maxPages={props.steps.length}
             onNext={() => {
               if (currentPage < props.steps.length - 1) {
-                setCurrentPage(currentPage + 1)
+                void maybeViewTransition(props.viewTransition, () => setCurrentPage(currentPage + 1))
               } else {
                 props.onFinish?.()
               }
             }}
             onPrev={() => {
               if (currentPage > 0) {
-                setCurrentPage(currentPage - 1)
+                void maybeViewTransition(props.viewTransition, () => setCurrentPage(currentPage - 1))
               }
             }}
           />