@furystack/shades-common-components 13.3.0 → 13.4.0

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))
               }
             }}
           />