fix(mosaic): Add transition support for Freeze component

.changeset/mosaic-fix-freeze.md

@@ -0,0 +1,2 @@
+---
+---

packages/mosaic/src/primitives/tabs/tabs.test.tsx

@@ -1,6 +1,6 @@
 import { act, cleanup, render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { createRef, useState } from 'react';
+import { createRef, startTransition, useState } from 'react';
 import { renderToString } from 'react-dom/server';
 import { afterEach, describe, expect, it, vi } from 'vitest';
 
@@ -155,6 +155,39 @@ describe('Tabs', () => {
       expect(screen.getByText('Settings content')).toBeVisible();
     });
 
+    it('switches panels when the value changes inside a transition', async () => {
+      function Controlled() {
+        const [value, setValue] = useState('tab1');
+        return (
+          <>
+            <button
+              type='button'
+              onClick={() => startTransition(() => setValue('tab2'))}
+            >
+              Go to settings
+            </button>
+            <Tabs.Root
+              value={value}
+              onValueChange={setValue}
+            >
+              <Tabs.List>
+                <Tabs.Tab value='tab1'>Account</Tabs.Tab>
+                <Tabs.Tab value='tab2'>Settings</Tabs.Tab>
+              </Tabs.List>
+              <Tabs.Panel value='tab1'>Account content</Tabs.Panel>
+              <Tabs.Panel value='tab2'>Settings content</Tabs.Panel>
+            </Tabs.Root>
+          </>
+        );
+      }
+      render(<Controlled />);
+
+      await act(() => screen.getByText('Go to settings').click());
+
+      expect(screen.getByText('Settings')).toHaveAttribute('aria-selected', 'true');
+      expect(screen.getByText('Settings content')).toBeVisible();
+    });
+
     it('marks selected tab with data-selected', () => {
       renderTabs();
       expect(screen.getByText('Account')).toHaveAttribute('data-selected', '');

packages/mosaic/src/primitives/utils/freeze.test.tsx

@@ -116,4 +116,268 @@ describe('Freeze', () => {
 
     expect(screen.getByText('Globex')).toBeInTheDocument();
   });
+
+  describe('inside a transition', () => {
+    function Harness() {
+      const [frozen, setFrozen] = React.useState(false);
+      const [label, setLabel] = React.useState('Acme');
+      return (
+        <>
+          <output>{frozen ? 'frozen' : 'live'}</output>
+          <button
+            type='button'
+            onClick={() =>
+              React.startTransition(() => {
+                setFrozen(true);
+                setLabel('Globex');
+              })
+            }
+          >
+            freeze
+          </button>
+          <button
+            type='button'
+            onClick={() => React.startTransition(() => setFrozen(false))}
+          >
+            thaw
+          </button>
+          <button
+            type='button'
+            onClick={() => React.startTransition(() => setLabel('Initech'))}
+          >
+            relabel
+          </button>
+          <Freeze frozen={frozen}>{label}</Freeze>
+        </>
+      );
+    }
+
+    it('holds the frame from before the flip, and lets the transition commit around it', async () => {
+      render(<Harness />);
+
+      await act(() => screen.getByText('freeze').click());
+      expect(screen.getByRole('status').textContent).toBe('frozen');
+      expect(screen.getByText('Acme')).toBeInTheDocument();
+      expect(screen.queryByText('Globex')).toBeNull();
+
+      await act(() => screen.getByText('relabel').click());
+      expect(screen.getByText('Acme')).toBeInTheDocument();
+      expect(screen.queryByText('Initech')).toBeNull();
+
+      await act(() => screen.getByText('thaw').click());
+      expect(screen.getByText('Initech')).toBeInTheDocument();
+    });
+  });
+
+  describe('under scheduling', () => {
+    function Child({ label, onEffect }: { label: string; onEffect: (label: string) => void }) {
+      React.useEffect(() => {
+        onEffect(label);
+      }, [label, onEffect]);
+      return <span>{label}</span>;
+    }
+
+    function Scheduled({ onEffect, strict = false }: { onEffect?: (label: string) => void; strict?: boolean }) {
+      const [frozen, setFrozen] = React.useState(false);
+      const [label, setLabel] = React.useState('Acme');
+      const [tick, setTick] = React.useState(0);
+      const noteEffect = React.useCallback((value: string) => onEffect?.(value), [onEffect]);
+      const tree = (
+        <>
+          <output>
+            {frozen ? 'frozen' : 'live'}:{tick}
+          </output>
+          <button
+            type='button'
+            onClick={() =>
+              React.startTransition(() => {
+                setFrozen(true);
+                setLabel('Globex');
+              })
+            }
+          >
+            freeze later
+          </button>
+          <button
+            type='button'
+            onClick={() => React.startTransition(() => setFrozen(false))}
+          >
+            thaw later
+          </button>
+          <button
+            type='button'
+            onClick={() => setFrozen(true)}
+          >
+            freeze now
+          </button>
+          <button
+            type='button'
+            onClick={() => setFrozen(false)}
+          >
+            thaw now
+          </button>
+          <button
+            type='button'
+            onClick={() => setLabel('Initech')}
+          >
+            relabel now
+          </button>
+          <button
+            type='button'
+            onClick={() => setTick(value => value + 1)}
+          >
+            tick
+          </button>
+          <Freeze frozen={frozen}>
+            <Child
+              label={label}
+              onEffect={noteEffect}
+            />
+          </Freeze>
+        </>
+      );
+      return strict ? <React.StrictMode>{tree}</React.StrictMode> : tree;
+    }
+
+    const click = (name: string) => act(() => screen.getByText(name).click());
+    const status = () => screen.getByRole('status').textContent;
+
+    it('does not run the effects of the frame it holds back', async () => {
+      const effects: string[] = [];
+      render(<Scheduled onEffect={label => effects.push(label)} />);
+      effects.length = 0;
+
+      await click('freeze later');
+      expect(status()).toBe('frozen:0');
+      expect(screen.getByText('Acme')).toBeInTheDocument();
+      expect(effects).toEqual([]);
+
+      await click('thaw later');
+      expect(screen.getByText('Globex')).toBeInTheDocument();
+      expect(effects).toEqual(['Globex']);
+    });
+
+    it('releases a hold whose transition was thawed before it committed', async () => {
+      render(<Scheduled />);
+
+      await act(async () => {
+        screen.getByText('freeze later').click();
+        await Promise.resolve();
+        screen.getByText('thaw now').click();
+      });
+
+      expect(status()).toBe('live:0');
+      expect(screen.getByText('Globex')).toBeVisible();
+    });
+
+    it('keeps the transition alive through an unrelated sync update while it is pending', async () => {
+      render(<Scheduled />);
+
+      await act(async () => {
+        screen.getByText('freeze later').click();
+        await Promise.resolve();
+        screen.getByText('tick').click();
+      });
+
+      expect(status()).toBe('frozen:1');
+      expect(screen.getByText('Acme')).toBeInTheDocument();
+      expect(screen.queryByText('Globex')).toBeNull();
+
+      await click('thaw later');
+      expect(screen.getByText('Globex')).toBeVisible();
+    });
+
+    it('holds the frame committed by a thaw when frozen again right after it', async () => {
+      render(<Scheduled />);
+      await click('freeze now');
+
+      await click('thaw now');
+      await click('relabel now');
+      expect(screen.getByText('Initech')).toBeVisible();
+
+      await click('freeze now');
+      await click('freeze later');
+
+      expect(status()).toBe('frozen:0');
+      expect(screen.getByText('Initech')).toBeInTheDocument();
+      expect(screen.queryByText('Globex')).toBeNull();
+    });
+
+    it('does not commit a thaw that is re-frozen in the same update', async () => {
+      render(<Scheduled />);
+      await click('freeze now');
+
+      await act(() => {
+        screen.getByText('thaw now').click();
+        screen.getByText('relabel now').click();
+        screen.getByText('freeze now').click();
+      });
+
+      expect(status()).toBe('frozen:0');
+      expect(screen.getByText('Acme')).toBeInTheDocument();
+      expect(screen.queryByText('Initech')).toBeNull();
+    });
+
+    it('holds the frame from before a transition flip under StrictMode too', async () => {
+      render(<Scheduled strict />);
+
+      await click('freeze later');
+      expect(status()).toBe('frozen:0');
+      expect(screen.getByText('Acme')).toBeInTheDocument();
+      expect(screen.queryByText('Globex')).toBeNull();
+
+      await click('thaw now');
+      expect(screen.getByText('Globex')).toBeVisible();
+    });
+
+    it('can unmount while holding', async () => {
+      const { unmount } = render(<Scheduled />);
+      await click('freeze later');
+      expect(() => unmount()).not.toThrow();
+    });
+
+    it('keeps an inner hold while the outer thaws', async () => {
+      function Nested() {
+        const [outer, setOuter] = React.useState(false);
+        const [inner, setInner] = React.useState(false);
+        const [label, setLabel] = React.useState('Acme');
+        return (
+          <>
+            <button
+              type='button'
+              onClick={() => setInner(true)}
+            >
+              freeze inner
+            </button>
+            <button
+              type='button'
+              onClick={() => setOuter(true)}
+            >
+              freeze outer
+            </button>
+            <button
+              type='button'
+              onClick={() => {
+                setOuter(false);
+                setLabel('Globex');
+              }}
+            >
+              thaw outer and relabel
+            </button>
+            <Freeze frozen={outer}>
+              <Freeze frozen={inner}>{label}</Freeze>
+            </Freeze>
+          </>
+        );
+      }
+      render(<Nested />);
+
+      await click('freeze inner');
+      await click('freeze outer');
+      await click('thaw outer and relabel');
+
+      expect(screen.getByText('Acme')).toBeInTheDocument();
+      expect(screen.queryByText('Globex')).toBeNull();
+    });
+  });
 });