@arbor-education/design-system.components 0.16.1 → 0.17.0

package/dist/components/treeRow/TreeRow.stories.js

@@ -0,0 +1,774 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Controls, Heading, Markdown, Primary, Stories, Subheading, Subtitle, Title, } from '@storybook/addon-docs/blocks';
+import { TreeRow } from '../treeRow/TreeRow';
+// ---------------------------------------------------------------------------
+// Description blocks
+// ---------------------------------------------------------------------------
+const DESCRIPTION_INTRO = `
+**TreeRow** is a collapsible, hierarchical list component for displaying nested data — think
+school timetables, curriculum structures, student contact breakdowns, or any tree-shaped
+information that benefits from progressive disclosure.
+`.trim();
+const SECTION_PROPS_TABLE = `
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| \`label\` | \`string\` | Yes | — | The heading text shown on the branch row (always visible). |
+| \`children\` | \`ReactNode\` | Yes | — | The content revealed when the section is expanded. Usually \`Row\` components or nested \`TreeRow.Section\` elements. |
+| \`id\` | \`string\` | No | auto-generated | Stable identifier used by Radix Accordion. **Must be provided** if you want \`defaultValue\` to reliably pre-open this section — auto-generated IDs are non-deterministic across renders. |
+| \`onClick\` | \`MouseEventHandler<HTMLDivElement>\` | No | — | When provided, the branch row becomes clickable independently of the expand/collapse trigger. A navigation caret appears on the right. The trigger's click is deliberately isolated via \`stopPropagation\` so both interactions work without conflict. |
+| \`className\` | \`string\` | No | — | Extra CSS class(es) applied to the \`Accordion.Item\` wrapper. |
+`.trim();
+const USAGE_GUIDANCE = `
+---
+
+## When to use
+
+- Displaying hierarchical data that would be overwhelming if shown flat — timetable subjects
+  and their lessons, a pupil's assessment breakdown by strand and topic, staff rotas with
+  team groupings.
+- When the user needs to explore structure progressively rather than scan everything at once.
+- Sidebar panels, detail drawers, or data-dense cards where vertical space is precious.
+
+## When NOT to use
+
+- Simple flat lists — use [\`Row\`](?path=/docs/components-row--docs) directly.
+- Navigation menus — use a dedicated nav component with proper ARIA roles.
+- Data grids or sortable tables — use the \`Table\` component instead.
+- Deeply nested structures beyond 3–4 levels: cognitive load becomes too high; consider
+  restructuring the information architecture instead.
+
+---
+
+## Two APIs
+
+**TreeRow** supports two usage patterns — pick one per instance, never mix.
+
+### Data-driven (recommended for simple trees)
+
+Pass an \`items\` array of \`TreeRowItem\` objects. Nesting is expressed recursively via
+\`children\` arrays on each item. The component works out whether each item is a branch
+(Section) or a leaf (Row) automatically.
+
+\`\`\`tsx
+import { TreeRow } from '@arbor-education/design-system.components';
+
+const items = [
+  {
+    id: 'twilight',
+    label: 'Twilight',
+    children: [
+      { label: 'Author', value: 'Stephenie Meyer' },
+      { label: 'Published', value: '2005' },
+    ],
+  },
+];
+
+<TreeRow items={items} defaultValue={['twilight']} />
+\`\`\`
+
+### Compound component (for custom layouts or mixed content)
+
+Use \`TreeRow.Section\` and \`Row\` directly as JSX children. This lets you
+nest non-Row content inside sections, apply custom class names per node, or mix
+interactive and static rows freely.
+
+\`\`\`tsx
+import { TreeRow, Row } from '@arbor-education/design-system.components';
+
+<TreeRow>
+  <TreeRow.Section id="biology" label="Biology">
+    <Row label="Teacher" value="Dr Cullen" />
+    <Row label="Room" value="Lab 3" />
+  </TreeRow.Section>
+</TreeRow>
+\`\`\`
+
+---
+
+## Clickable sections
+
+Sections can have an \`onClick\` handler in addition to (or instead of) expand/collapse
+behaviour. When \`onClick\` is provided:
+
+- A navigation caret appears on the trailing edge of the branch row.
+- Clicking the **row area** fires \`onClick\`.
+- Clicking the **label / chevron trigger** still only toggles expand/collapse — the
+  trigger's click is deliberately isolated via \`stopPropagation\`.
+
+This means a section can simultaneously navigate somewhere **and** expand to reveal
+child rows — a common pattern in Arbor's sidebar detail panels.
+
+---
+
+## Pre-opening sections
+
+Use \`defaultValue\` with an array of section \`id\` strings to open sections on initial
+render. If a section does not have an explicit \`id\` prop, its accordion value is an
+auto-generated React ID that changes between renders — so **always set \`id\` on any
+section you want in \`defaultValue\`**.
+
+---
+
+## Accessibility
+
+- Built on [Radix UI Accordion](https://www.radix-ui.com/primitives/docs/components/accordion)
+  which ships with full keyboard support and correct ARIA attributes (\`aria-expanded\`,
+  \`aria-controls\`, \`role="region"\`) out of the box.
+- Each trigger is a focusable button — keyboard users can navigate with **Tab** and
+  toggle sections with **Enter** or **Space**.
+- Only the props listed above are exposed — for advanced accordion behaviour see the
+  [Radix Accordion docs](https://www.radix-ui.com/primitives/docs/components/accordion).
+`.trim();
+const RELATED_COMPONENTS = `
+## Related components
+
+- [Row](?path=/docs/components-row--docs) — use directly as children inside \`TreeRow.Section\`.
+`.trim();
+// ---------------------------------------------------------------------------
+// Docs page (compound component pattern)
+// ---------------------------------------------------------------------------
+function TreeRowDocsPage() {
+    return (_jsxs(_Fragment, { children: [_jsx(Title, {}), _jsx(Subtitle, {}), _jsx(Markdown, { children: DESCRIPTION_INTRO }), _jsx(Primary, {}), _jsx(Heading, { children: "Props reference" }), _jsx(Subheading, { children: "TreeRow root props" }), _jsx(Controls, {}), _jsx(Subheading, { children: "TreeRow.Section props" }), _jsx(Markdown, { children: SECTION_PROPS_TABLE }), _jsx(Markdown, { children: USAGE_GUIDANCE }), _jsx(Heading, { children: "Stories" }), _jsx(Stories, { title: "" }), _jsx(Markdown, { children: RELATED_COMPONENTS })] }));
+}
+// ---------------------------------------------------------------------------
+// Meta
+// ---------------------------------------------------------------------------
+const meta = {
+    title: 'Components/TreeRow',
+    component: TreeRow,
+    tags: ['autodocs'],
+    parameters: {
+        docs: {
+            page: TreeRowDocsPage,
+        },
+    },
+    argTypes: {
+        items: {
+            description: 'Data-driven mode: an array of `TreeRowItem` objects to render. Items with a `children` array become collapsible sections; items without become leaf rows. **Mutually exclusive with `children`.**',
+            control: false,
+            table: {
+                type: { summary: 'TreeRowItem[]' },
+                defaultValue: { summary: 'undefined' },
+            },
+        },
+        children: {
+            description: 'Compound mode: pass `TreeRow.Section` and `Row` elements directly as JSX children. **Mutually exclusive with `items`.**',
+            control: false,
+            table: {
+                type: { summary: 'ReactNode' },
+                defaultValue: { summary: 'undefined' },
+            },
+        },
+        defaultValue: {
+            description: 'Array of section `id` strings that should be expanded on initial render. Sections without an explicit `id` prop receive a non-deterministic auto-generated ID — always set `id` on any section you want to pre-open.',
+            control: false,
+            table: {
+                type: { summary: 'string[]' },
+                defaultValue: { summary: 'undefined' },
+            },
+        },
+        className: {
+            description: 'Additional CSS class(es) applied to the root `Accordion.Root` wrapper element.',
+            control: 'text',
+            table: {
+                type: { summary: 'string' },
+                defaultValue: { summary: 'undefined' },
+            },
+        },
+    },
+};
+export default meta;
+// ---------------------------------------------------------------------------
+// Default — data-driven, two top-level sections, all collapsed
+// ---------------------------------------------------------------------------
+export const Default = {
+    args: {
+        items: [
+            {
+                id: 'english',
+                label: 'English Literature',
+                children: [
+                    { label: 'Teacher', value: 'Ms Swan' },
+                    { label: 'Room', value: 'A12' },
+                    { label: 'Periods per week', value: '5' },
+                ],
+            },
+            {
+                id: 'biology',
+                label: 'Biology',
+                children: [
+                    { label: 'Teacher', value: 'Dr Cullen' },
+                    { label: 'Room', value: 'Lab 3' },
+                    { label: 'Periods per week', value: '4' },
+                ],
+            },
+        ],
+    },
+    render: args => _jsx(TreeRow, { ...args }),
+};
+// ---------------------------------------------------------------------------
+// PreOpenedSections — defaultValue with explicit IDs
+// ---------------------------------------------------------------------------
+export const PreOpenedSections = {
+    parameters: {
+        docs: {
+            description: {
+                story: 'Sections can be expanded on initial render by passing their `id` values in `defaultValue`. Both a top-level section ("Forks High School") and a nested section ("Year 11") are pre-opened here. Note that every section involved — at any depth — must have an explicit `id` prop for this to work reliably.',
+            },
+            source: {
+                code: `
+import { TreeRow } from '@arbor-education/design-system.components';
+
+function TreeRowPreOpenedSectionsExample() {
+  return (
+    <TreeRow
+      defaultValue={['forks-hs', 'year-11']}
+      items={[
+        {
+          id: 'forks-hs',
+          label: 'Forks High School',
+          children: [
+            {
+              id: 'year-10',
+              label: 'Year 10',
+              children: [
+                { label: 'Form tutor', value: 'Mr Black' },
+                { label: 'Pupils on roll', value: '28' },
+              ],
+            },
+            {
+              id: 'year-11',
+              label: 'Year 11',
+              children: [
+                { label: 'Form tutor', value: 'Ms Cullen' },
+                { label: 'Pupils on roll', value: '31' },
+              ],
+            },
+          ],
+        },
+        {
+          id: 'la-push-academy',
+          label: 'La Push Academy',
+          children: [
+            { label: 'Headteacher', value: 'Mr Ateara' },
+            { label: 'Pupils on roll', value: '142' },
+          ],
+        },
+      ]}
+    />
+  );
+}
+
+export default TreeRowPreOpenedSectionsExample;
+`.trim(),
+            },
+        },
+    },
+    render: () => (_jsx(TreeRow, { defaultValue: ['forks-hs', 'year-11'], items: [
+            {
+                id: 'forks-hs',
+                label: 'Forks High School',
+                children: [
+                    {
+                        id: 'year-10',
+                        label: 'Year 10',
+                        children: [
+                            { label: 'Form tutor', value: 'Mr Black' },
+                            { label: 'Pupils on roll', value: '28' },
+                        ],
+                    },
+                    {
+                        id: 'year-11',
+                        label: 'Year 11',
+                        children: [
+                            { label: 'Form tutor', value: 'Ms Cullen' },
+                            { label: 'Pupils on roll', value: '31' },
+                        ],
+                    },
+                ],
+            },
+            {
+                id: 'la-push-academy',
+                label: 'La Push Academy',
+                children: [
+                    { label: 'Headteacher', value: 'Mr Ateara' },
+                    { label: 'Pupils on roll', value: '142' },
+                ],
+            },
+        ] })),
+};
+// ---------------------------------------------------------------------------
+// DeepNesting — 4 levels, shows indentation progression
+// ---------------------------------------------------------------------------
+export const DeepNesting = {
+    parameters: {
+        docs: {
+            description: {
+                story: 'Nesting can go as deep as the data requires. Each additional level receives `calc(var(--spacing-xxlarge) * depth)` of left padding automatically via the internal `DepthContext`. Three to four levels is the practical maximum before readability suffers — restructure the hierarchy if you need more.',
+            },
+            source: {
+                code: `
+import { TreeRow } from '@arbor-education/design-system.components';
+
+function TreeRowDeepNestingExample() {
+  return (
+    <TreeRow
+      defaultValue={['assessment', 'science', 'biology', 'cells']}
+      items={[
+        {
+          id: 'assessment',
+          label: 'Assessment — Bella Swan',
+          children: [
+            {
+              id: 'science',
+              label: 'Science',
+              children: [
+                {
+                  id: 'biology',
+                  label: 'Biology',
+                  children: [
+                    {
+                      id: 'cells',
+                      label: 'Cell Biology',
+                      children: [
+                        { label: 'Grade', value: 'A*' },
+                        { label: 'Score', value: '98%' },
+                        { label: 'Assessed by', value: 'Dr Cullen' },
+                      ],
+                    },
+                    {
+                      id: 'genetics',
+                      label: 'Genetics',
+                      children: [
+                        { label: 'Grade', value: 'A' },
+                        { label: 'Score', value: '91%' },
+                      ],
+                    },
+                  ],
+                },
+                {
+                  id: 'chemistry',
+                  label: 'Chemistry',
+                  children: [
+                    { label: 'Grade', value: 'B+' },
+                    { label: 'Score', value: '79%' },
+                  ],
+                },
+              ],
+            },
+          ],
+        },
+      ]}
+    />
+  );
+}
+
+export default TreeRowDeepNestingExample;
+`.trim(),
+            },
+        },
+    },
+    render: () => (_jsx(TreeRow, { defaultValue: ['assessment', 'science', 'biology', 'cells'], items: [
+            {
+                id: 'assessment',
+                label: 'Assessment — Bella Swan',
+                children: [
+                    {
+                        id: 'science',
+                        label: 'Science',
+                        children: [
+                            {
+                                id: 'biology',
+                                label: 'Biology',
+                                children: [
+                                    {
+                                        id: 'cells',
+                                        label: 'Cell Biology',
+                                        children: [
+                                            { label: 'Grade', value: 'A*' },
+                                            { label: 'Score', value: '98%' },
+                                            { label: 'Assessed by', value: 'Dr Cullen' },
+                                        ],
+                                    },
+                                    {
+                                        id: 'genetics',
+                                        label: 'Genetics',
+                                        children: [
+                                            { label: 'Grade', value: 'A' },
+                                            { label: 'Score', value: '91%' },
+                                        ],
+                                    },
+                                ],
+                            },
+                            {
+                                id: 'chemistry',
+                                label: 'Chemistry',
+                                children: [
+                                    { label: 'Grade', value: 'B+' },
+                                    { label: 'Score', value: '79%' },
+                                ],
+                            },
+                        ],
+                    },
+                ],
+            },
+        ] })),
+};
+// ---------------------------------------------------------------------------
+// ClickableSections — compound API, all sections have onClick
+// ---------------------------------------------------------------------------
+export const ClickableSections = {
+    parameters: {
+        docs: {
+            description: {
+                story: 'When a section has an `onClick` handler, a navigation caret appears on the trailing edge. Clicking the row area fires `onClick`; clicking the label or chevron trigger only toggles expand/collapse. Both interactions are fully independent.',
+            },
+            source: {
+                code: `
+import { TreeRow } from '@arbor-education/design-system.components';
+
+function TreeRowClickableSectionsExample() {
+  return (
+    <TreeRow
+      items={[
+        {
+          id: 'edward',
+          label: 'Edward Cullen',
+          onClick: () => console.log('Navigate to Edward Cullen'),
+          children: [
+            { label: 'Year group', value: 'Year 12' },
+            { label: 'Form', value: '12C' },
+            { label: 'Attendance', value: '100%' },
+          ],
+        },
+        {
+          id: 'bella',
+          label: 'Bella Swan',
+          onClick: () => console.log('Navigate to Bella Swan'),
+          children: [
+            { label: 'Year group', value: 'Year 12' },
+            { label: 'Form', value: '12B' },
+            { label: 'Attendance', value: '97.4%' },
+          ],
+        },
+        {
+          id: 'jacob',
+          label: 'Jacob Black',
+          onClick: () => console.log('Navigate to Jacob Black'),
+          children: [
+            { label: 'Year group', value: 'Year 11' },
+            { label: 'Form', value: '11J' },
+            { label: 'Attendance', value: '88.2%' },
+          ],
+        },
+      ]}
+    />
+  );
+}
+
+export default TreeRowClickableSectionsExample;
+`.trim(),
+            },
+        },
+    },
+    render: () => (_jsx(TreeRow, { items: [
+            {
+                id: 'edward',
+                label: 'Edward Cullen',
+                onClick: () => console.log('Navigate to Edward Cullen'),
+                children: [
+                    { label: 'Year group', value: 'Year 12' },
+                    { label: 'Form', value: '12C' },
+                    { label: 'Attendance', value: '100%' },
+                ],
+            },
+            {
+                id: 'bella',
+                label: 'Bella Swan',
+                onClick: () => console.log('Navigate to Bella Swan'),
+                children: [
+                    { label: 'Year group', value: 'Year 12' },
+                    { label: 'Form', value: '12B' },
+                    { label: 'Attendance', value: '97.4%' },
+                ],
+            },
+            {
+                id: 'jacob',
+                label: 'Jacob Black',
+                onClick: () => console.log('Navigate to Jacob Black'),
+                children: [
+                    { label: 'Year group', value: 'Year 11' },
+                    { label: 'Form', value: '11J' },
+                    { label: 'Attendance', value: '88.2%' },
+                ],
+            },
+        ] })),
+};
+// ---------------------------------------------------------------------------
+// ClickableRows — data-driven leaf rows with onClick
+// ---------------------------------------------------------------------------
+export const ClickableRows = {
+    parameters: {
+        docs: {
+            description: {
+                story: 'Leaf rows (items without `children`) can also be clickable. Provide an `onClick` on the `TreeRowItem` and it is forwarded to the underlying `Row` component. Useful for navigating to a pupil record, opening a document, or triggering an action inline.',
+            },
+            source: {
+                code: `
+import { TreeRow } from '@arbor-education/design-system.components';
+
+function TreeRowClickableRowsExample() {
+  return (
+    <TreeRow
+      defaultValue={['contacts']}
+      items={[
+        {
+          id: 'contacts',
+          label: 'Emergency Contacts — Bella Swan',
+          children: [
+            {
+              label: 'Charlie Swan',
+              value: 'Father',
+              note: '07700 900123',
+              onClick: () => console.log('Open Charlie Swan'),
+            },
+            {
+              label: 'Renée Dwyer',
+              value: 'Mother',
+              note: '07700 900456',
+              onClick: () => console.log('Open Renée Dwyer'),
+            },
+            {
+              label: 'Jacob Black',
+              value: 'Family friend',
+              note: '07700 900789',
+              onClick: () => console.log('Open Jacob Black'),
+            },
+          ],
+        },
+      ]}
+    />
+  );
+}
+
+export default TreeRowClickableRowsExample;
+`.trim(),
+            },
+        },
+    },
+    render: () => (_jsx(TreeRow, { defaultValue: ['contacts'], items: [
+            {
+                id: 'contacts',
+                label: 'Emergency Contacts — Bella Swan',
+                children: [
+                    {
+                        label: 'Charlie Swan',
+                        value: 'Father',
+                        note: '07700 900123',
+                        onClick: () => console.log('Open Charlie Swan'),
+                    },
+                    {
+                        label: 'Renée Dwyer',
+                        value: 'Mother',
+                        note: '07700 900456',
+                        onClick: () => console.log('Open Renée Dwyer'),
+                    },
+                    {
+                        label: 'Jacob Black',
+                        value: 'Family friend',
+                        note: '07700 900789',
+                        onClick: () => console.log('Open Jacob Black'),
+                    },
+                ],
+            },
+        ] })),
+};
+// ---------------------------------------------------------------------------
+// MixedClickability — some sections clickable, some not
+// ---------------------------------------------------------------------------
+export const MixedClickability = {
+    parameters: {
+        docs: {
+            description: {
+                story: 'The navigation caret only appears on sections that have an `onClick` prop. Sections without one look and behave like plain collapsible groups — a common pattern where some summary rows navigate to a detail view while others are purely informational.',
+            },
+            source: {
+                code: `
+import { TreeRow } from '@arbor-education/design-system.components';
+
+function TreeRowMixedClickabilityExample() {
+  return (
+    <TreeRow
+      defaultValue={['cullen-family', 'quileute-tribe']}
+      items={[
+        {
+          id: 'cullen-family',
+          label: 'Cullen Family',
+          onClick: () => console.log('Navigate to Cullen Family group'),
+          children: [
+            { label: 'Edward Cullen', value: 'Year 12' },
+            { label: 'Alice Cullen', value: 'Year 12' },
+            { label: 'Rosalie Hale', value: 'Year 12' },
+            { label: 'Emmett Cullen', value: 'Year 12' },
+          ],
+        },
+        {
+          id: 'school-info',
+          label: 'School Information',
+          children: [
+            { label: 'School', value: 'Forks High School' },
+            { label: 'LA', value: 'Clallam County' },
+            { label: 'Ofsted rating', value: 'Outstanding' },
+          ],
+        },
+        {
+          id: 'quileute-tribe',
+          label: 'Quileute Tribe (La Push)',
+          onClick: () => console.log('Navigate to Quileute Tribe group'),
+          children: [
+            { label: 'Jacob Black', value: 'Year 11' },
+            { label: 'Embry Call', value: 'Year 11' },
+            { label: 'Quil Ateara', value: 'Year 11' },
+          ],
+        },
+      ]}
+    />
+  );
+}
+
+export default TreeRowMixedClickabilityExample;
+`.trim(),
+            },
+        },
+    },
+    render: () => (_jsx(TreeRow, { defaultValue: ['cullen-family', 'quileute-tribe'], items: [
+            {
+                id: 'cullen-family',
+                label: 'Cullen Family',
+                onClick: () => console.log('Navigate to Cullen Family group'),
+                children: [
+                    { label: 'Edward Cullen', value: 'Year 12' },
+                    { label: 'Alice Cullen', value: 'Year 12' },
+                    { label: 'Rosalie Hale', value: 'Year 12' },
+                    { label: 'Emmett Cullen', value: 'Year 12' },
+                ],
+            },
+            {
+                id: 'school-info',
+                label: 'School Information',
+                children: [
+                    { label: 'School', value: 'Forks High School' },
+                    { label: 'LA', value: 'Clallam County' },
+                    { label: 'Ofsted rating', value: 'Outstanding' },
+                ],
+            },
+            {
+                id: 'quileute-tribe',
+                label: 'Quileute Tribe (La Push)',
+                onClick: () => console.log('Navigate to Quileute Tribe group'),
+                children: [
+                    { label: 'Jacob Black', value: 'Year 11' },
+                    { label: 'Embry Call', value: 'Year 11' },
+                    { label: 'Quil Ateara', value: 'Year 11' },
+                ],
+            },
+        ] })),
+};
+// ---------------------------------------------------------------------------
+// WithClickFeedback — interactive useState story
+// ---------------------------------------------------------------------------
+function WithClickFeedbackExample() {
+    const [lastClicked, setLastClicked] = useState(null);
+    return (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 'var(--spacing-small)' }, children: [_jsx(TreeRow, { defaultValue: ['timetable'], items: [
+                    {
+                        id: 'timetable',
+                        label: 'Timetable — Jacob Black',
+                        onClick: () => setLastClicked('Timetable — Jacob Black'),
+                        children: [
+                            {
+                                id: 'monday',
+                                label: 'Monday',
+                                onClick: () => setLastClicked('Monday'),
+                                children: [
+                                    { label: 'Period 1', value: 'English', note: 'Room A12 · Ms Swan', onClick: () => setLastClicked('Period 1 — English') },
+                                    { label: 'Period 2', value: 'Biology', note: 'Lab 3 · Dr Cullen', onClick: () => setLastClicked('Period 2 — Biology') },
+                                    { label: 'Period 3', value: 'PE', note: 'Sports Hall · Mr Black', onClick: () => setLastClicked('Period 3 — PE') },
+                                ],
+                            },
+                            {
+                                id: 'tuesday',
+                                label: 'Tuesday',
+                                onClick: () => setLastClicked('Tuesday'),
+                                children: [
+                                    { label: 'Period 1', value: 'Maths', note: 'Room B4 · Mrs Clearwater', onClick: () => setLastClicked('Period 1 — Maths') },
+                                    { label: 'Period 2', value: 'Art', note: 'Studio · Ms Hale', onClick: () => setLastClicked('Period 2 — Art') },
+                                ],
+                            },
+                        ],
+                    },
+                ] }), _jsx("p", { className: "ds-text", style: { color: 'var(--color-grey-600)' }, children: lastClicked ? `Last clicked: "${lastClicked}"` : 'Click any section or row above.' })] }));
+}
+export const WithClickFeedback = {
+    parameters: {
+        docs: {
+            description: {
+                story: 'A fully interactive example demonstrating how both section `onClick` and row `onClick` work together in the same tree. Each click is independent — expanding a section does not fire `onClick`, and clicking a row does not toggle any section. Open the "Monday" or "Tuesday" sections, then click any row or section header to see the feedback update.',
+            },
+            source: {
+                code: `
+import { useState } from 'react';
+import { TreeRow } from '@arbor-education/design-system.components';
+
+function TreeRowWithClickFeedbackExample() {
+  const [lastClicked, setLastClicked] = useState<string | null>(null);
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--spacing-small)' }}>
+      <TreeRow
+        defaultValue={['timetable']}
+        items={[
+          {
+            id: 'timetable',
+            label: 'Timetable — Jacob Black',
+            onClick: () => setLastClicked('Timetable — Jacob Black'),
+            children: [
+              {
+                id: 'monday',
+                label: 'Monday',
+                onClick: () => setLastClicked('Monday'),
+                children: [
+                  { label: 'Period 1', value: 'English', note: 'Room A12 · Ms Swan', onClick: () => setLastClicked('Period 1 — English') },
+                  { label: 'Period 2', value: 'Biology', note: 'Lab 3 · Dr Cullen', onClick: () => setLastClicked('Period 2 — Biology') },
+                  { label: 'Period 3', value: 'PE', note: 'Sports Hall · Mr Black', onClick: () => setLastClicked('Period 3 — PE') },
+                ],
+              },
+              {
+                id: 'tuesday',
+                label: 'Tuesday',
+                onClick: () => setLastClicked('Tuesday'),
+                children: [
+                  { label: 'Period 1', value: 'Maths', note: 'Room B4 · Mrs Clearwater', onClick: () => setLastClicked('Period 1 — Maths') },
+                  { label: 'Period 2', value: 'Art', note: 'Studio · Ms Hale', onClick: () => setLastClicked('Period 2 — Art') },
+                ],
+              },
+            ],
+          },
+        ]}
+      />
+
+      <p className="ds-text" style={{ color: 'var(--color-grey-600)' }}>
+        {lastClicked ? \`Last clicked: "\${lastClicked}"\` : 'Click any section or row above.'}
+      </p>
+    </div>
+  );
+}
+
+export default TreeRowWithClickFeedbackExample;
+`.trim(),
+            },
+        },
+    },
+    render: () => _jsx(WithClickFeedbackExample, {}),
+};
+//# sourceMappingURL=TreeRow.stories.js.map