@tribepad/themis 1.5.6 → 1.5.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tribepad/themis",
-  "version": "1.5.6",
+  "version": "1.5.8",
   "description": "Accessible React component library built on React Aria primitives",
   "author": "Tribepad <mbasford@tribepad.com>",
   "license": "MIT",

package/src/elements/Wizard/Wizard.stories.tsx

@@ -283,3 +283,98 @@ function RTLHarness(): ReactElement {
 export const RTL: Story = {
   render: () => <RTLHarness />,
 };
+
+// ─────────────────────────────────────────────────────────────────────────────
+// preserveState — Activity-backed step state survival
+// ─────────────────────────────────────────────────────────────────────────────
+
+/**
+ * Tiny step body with its own local state, so we can observe whether state
+ * survives a step transition. A counter + a textarea: both reset to their
+ * initial values whenever the component re-mounts. With `preserveState`,
+ * the component stays mounted (just hidden) and the values persist.
+ */
+function CounterStep({ label }: { label: string }): ReactElement {
+  const [count, setCount] = useState(0);
+  const [draft, setDraft] = useState('');
+  return (
+    <div className="flex flex-col gap-3">
+      <p className="text-sm text-[var(--menu-muted)]">
+        Try editing the textarea and bumping the counter, then move to the next
+        step and back. With <code>preserveState</code> ON your values stay; OFF,
+        they reset on every return.
+      </p>
+      <label className="flex flex-col gap-1 text-sm">
+        <span className="font-medium">{label} — draft</span>
+        <textarea
+          rows={3}
+          value={draft}
+          onChange={(e): void => setDraft(e.target.value)}
+          className="rounded-md border border-[var(--border)] bg-[var(--background)] p-2 text-sm"
+        />
+      </label>
+      <div className="flex items-center gap-2 text-sm">
+        <span className="font-medium">Count:</span>
+        <span className="font-mono">{count}</span>
+        <button
+          type="button"
+          onClick={(): void => setCount((c) => c + 1)}
+          className="rounded-md border border-[var(--border)] px-2 py-1 text-xs"
+        >
+          +1
+        </button>
+      </div>
+    </div>
+  );
+}
+
+function PreserveStateHarness({ preserveState }: { preserveState: boolean }): ReactElement {
+  const [step, setStep] = useState(0);
+  const subset = STEPS.slice(0, 3);
+  return (
+    <div className="h-screen p-6">
+      <p className="mb-3 text-sm">
+        <span className="font-medium">preserveState:</span>{' '}
+        <span className="font-mono">{String(preserveState)}</span>
+      </p>
+      <Wizard
+        currentStep={step}
+        steps={subset}
+        onStepChange={(ev): void => setStep(ev.index)}
+      >
+        <Wizard.Content preserveState={preserveState}>
+          {subset.map((s) => (
+            <Wizard.Step key={s.id} id={s.id}>
+              <CounterStep label={s.label} />
+            </Wizard.Step>
+          ))}
+        </Wizard.Content>
+        <Wizard.Navigation labels={{ back: 'Back', next: 'Next' }} />
+      </Wizard>
+    </div>
+  );
+}
+
+export const PreserveState: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Demonstrates `Wizard.Content preserveState`. Type in the textarea + click `+1`, advance to the next step, then click Back. With `preserveState` ON the values are still there (every step stays mounted, wrapped in `<Activity mode="hidden">`); with OFF the step subtree is unmounted on every transition and the local state is destroyed on remount.',
+      },
+    },
+  },
+  render: () => <PreserveStateHarness preserveState={true} />,
+};
+
+export const PreserveStateOff: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Legacy default for comparison — `preserveState={false}`. Same harness, no preservation: the counter + textarea reset every time you navigate away from a step. This is the pre-1.5.8 behaviour, still the default for backward compatibility and for wizards with heavy per-step initialisation.',
+      },
+    },
+  },
+  render: () => <PreserveStateHarness preserveState={false} />,
+};