@arbor-education/design-system.components 3.4.5 → 4.0.0-react19-alpha.0

package/dist/components/icoText/IcoText.stories.d.ts

@@ -0,0 +1,60 @@
+import type { StoryObj } from '@storybook/react-vite';
+import { IcoText } from './IcoText.js';
+declare function IcoTextDocsPage(): import("react/jsx-runtime").JSX.Element;
+declare const meta: {
+    title: string;
+    component: {
+        ({ children, className }: import("./IcoText.js").IcoTextProps): React.JSX.Element;
+        displayName: string;
+    } & {
+        Heading: {
+            ({ children, className, ...rest }: import("./IcoText.js").IcoTextHeadingProps): React.JSX.Element;
+            displayName: string;
+        };
+        Paragraph: {
+            ({ children, className, ...rest }: import("./IcoText.js").IcoTextParagraphProps): React.JSX.Element;
+            displayName: string;
+        };
+        Icon: {
+            ({ className, color, name, screenReaderText, size, }: import("./IcoText.js").IcoTextIconProps): React.JSX.Element;
+            displayName: string;
+        };
+    };
+    tags: string[];
+    parameters: {
+        layout: string;
+        docs: {
+            page: typeof IcoTextDocsPage;
+        };
+    };
+    argTypes: {
+        className: {
+            control: false;
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        children: {
+            control: false;
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof IcoText>;
+export declare const Default: Story;
+export declare const HeadingOnly: Story;
+export declare const WithoutIcon: Story;
+export declare const IconWithScreenReaderText: Story;
+export declare const IconSizes: Story;
+export declare const IconColors: Story;
+export declare const MultipleParagraphs: Story;
+//# sourceMappingURL=IcoText.stories.d.ts.map

package/dist/components/icoText/IcoText.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"IcoText.stories.d.ts","sourceRoot":"","sources":["../../../src/components/icoText/IcoText.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAU5D,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AA2GpC,iBAAS,eAAe,4CAyBvB;AAMD,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoBsB,CAAC;AAEjC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,OAAO,CAAC,CAAC;AAsEtC,eAAO,MAAM,OAAO,EAAE,KAWrB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KA+BzB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KA+BzB,CAAC;AAEF,eAAO,MAAM,wBAAwB,EAAE,KAqCtC,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAuCvB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KA2BxB,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,KA4BhC,CAAC"}

package/dist/components/icoText/IcoText.stories.js

@@ -0,0 +1,319 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Controls, Heading as DocHeading, Markdown, Primary as DocPrimary, Stories, Subtitle, Title, } from '@storybook/addon-docs/blocks';
+import { IcoText } from './IcoText.js';
+// ---------------------------------------------------------------------------
+// Docs page content
+// ---------------------------------------------------------------------------
+const DESCRIPTION_INTRO = [
+    '`IcoText` is a compound layout component that pairs an icon in a left rail with a heading and/or paragraph.',
+    'It is the canonical icon-plus-text primitive in this design system — used internally by `ArticleCard`',
+    'and available for direct use in any context that needs an icon anchoring labelled content.',
+].join(' ');
+const ICON_PROPS = [
+    '| Prop | Type | Default | Description |',
+    '|---|---|---|---|',
+    '| `name` | `IconName` | — | **Required.** The icon identifier |',
+    '| `size` | `12 \\| 16 \\| 24` | `24` | Icon size in pixels |',
+    '| `color` | `string` | — | Icon colour — use a CSS token e.g. `var(--color-grey-600)` |',
+    '| `screenReaderText` | `string` | — | Accessible label. Omit for decorative icons (icon becomes `aria-hidden`) |',
+    '| `className` | `string` | — | Additional CSS classes |',
+].join('\n');
+const HEADING_PROPS = [
+    '| Prop | Type | Default | Description |',
+    '|---|---|---|---|',
+    '| `children` | `ReactNode` | — | **Required.** Heading text |',
+    '| `...HTMLAttributes<h4>` | | | All standard heading element attributes forwarded |',
+].join('\n');
+const PARAGRAPH_PROPS = [
+    '| Prop | Type | Default | Description |',
+    '|---|---|---|---|',
+    '| `children` | `ReactNode` | — | **Required.** Paragraph text |',
+    '| `...HTMLAttributes<p>` | | | All standard paragraph element attributes forwarded |',
+].join('\n');
+const USAGE_GUIDANCE = [
+    '### When to use',
+    '',
+    '- Pairing a meaningful icon with a short heading and/or description — attendance alerts, feature blurbs, help text',
+    '- Inside panels, list items, or cards where an icon anchors the content',
+    '- As the building block for `ArticleCard` icon-rail layouts',
+    '',
+    '---',
+    '',
+    '### When NOT to use',
+    '',
+    '| Situation | Use instead |',
+    '|---|---|',
+    '| Content inside a navigable card | [`ArticleCard`](?path=/docs/components-card-articlecard--docs) |',
+    '| Icon with no text | [`Icon`](?path=/docs/components-icon--docs) directly |',
+    '| Long-form prose | Semantic HTML `<p>` with a separate heading |',
+    '| Interactive element | Wrap `IcoText` inside a `Card` or `Button` — never add `onClick` to `IcoText` itself |',
+].join('\n');
+const DEVELOPER_NOTES = [
+    '### Critical usage patterns',
+    '',
+    '**`IcoText.Icon` is automatically hoisted to the left rail** regardless of position in JSX.',
+    'The root inspects `children`, pulls out any `IcoText.Icon` elements into a flex-shrink-0 left column,',
+    'and places all other children (Heading, Paragraph) in the content column.',
+    '',
+    '```tsx',
+    '<IcoText>',
+    '  <IcoText.Icon name="guardians" />',
+    '  <IcoText.Heading>Year 9 Attendance</IcoText.Heading>',
+    '  <IcoText.Paragraph>28 pupils · 94.2% this term</IcoText.Paragraph>',
+    '</IcoText>',
+    '```',
+    '',
+    '**`IcoText.Heading` always renders as `<h4>`.** There is no `level` prop. Verify your document',
+    'heading hierarchy is correct before using `IcoText` as a standalone heading.',
+    '',
+    '**Omit `screenReaderText` for decorative icons.** The icon is rendered with `aria-hidden="true"`',
+    'when `screenReaderText` is absent. The heading or surrounding text should carry the accessible meaning.',
+    '',
+    '---',
+    '',
+    '### Accessibility',
+    '',
+    '- Decorative icons (no `screenReaderText`): `aria-hidden="true"` — screen readers skip them',
+    '- Meaningful icons: provide `screenReaderText` so the icon has an accessible label',
+    '- `IcoText.Heading` renders `<h4>` — verify your document heading hierarchy',
+    '- `IcoText.Paragraph` renders `<p>` — semantically appropriate for supporting text',
+    '',
+    '---',
+    '',
+    '### TypeScript types',
+    '',
+    '```ts',
+    "import { IcoText } from '@arbor-education/design-system.components';",
+    "import type { IcoTextProps, IcoTextIconProps, IcoTextHeadingProps, IcoTextParagraphProps } from '@arbor-education/design-system.components';",
+    '```',
+].join('\n');
+const RELATED_COMPONENTS = [
+    '## Related components',
+    '',
+    '[ArticleCard](?path=/docs/components-card-articlecard--docs) · [Icon](?path=/docs/components-icon--docs) · [Card](?path=/docs/components-card--docs)',
+].join('\n');
+const PROPS_INTRO = 'The preview below is wired to the **Controls** panel — tweak any prop to see the story update in real time.';
+// ---------------------------------------------------------------------------
+// Custom DocsPage
+// ---------------------------------------------------------------------------
+function IcoTextDocsPage() {
+    return (_jsxs(_Fragment, { children: [_jsx(Title, {}), _jsx(Subtitle, {}), _jsx(Markdown, { children: DESCRIPTION_INTRO }), _jsx(DocHeading, { children: "Interactive example" }), _jsx(Markdown, { children: PROPS_INTRO }), _jsx(DocPrimary, {}), _jsx(Controls, {}), _jsx(DocHeading, { children: "IcoText.Icon props" }), _jsx(Markdown, { children: ICON_PROPS }), _jsx(DocHeading, { children: "IcoText.Heading props" }), _jsx(Markdown, { children: HEADING_PROPS }), _jsx(DocHeading, { children: "IcoText.Paragraph props" }), _jsx(Markdown, { children: PARAGRAPH_PROPS }), _jsx(DocHeading, { children: "Usage guidance" }), _jsx(Markdown, { children: USAGE_GUIDANCE }), _jsx(DocHeading, { children: "Developer notes" }), _jsx(Markdown, { children: DEVELOPER_NOTES }), _jsx(DocHeading, { children: "Examples" }), _jsx(Stories, { title: "" }), _jsx(Markdown, { children: RELATED_COMPONENTS })] }));
+}
+// ---------------------------------------------------------------------------
+// Meta
+// ---------------------------------------------------------------------------
+const meta = {
+    title: 'Components/IcoText',
+    component: IcoText,
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'padded',
+        docs: { page: IcoTextDocsPage },
+    },
+    argTypes: {
+        className: {
+            control: false,
+            description: 'Additional CSS class names on the root `div.ds-ico-text` element.',
+            table: { type: { summary: 'string' } },
+        },
+        children: {
+            control: false,
+            description: 'Compose using `IcoText.Icon`, `IcoText.Heading`, and `IcoText.Paragraph` sub-components.',
+            table: { type: { summary: 'ReactNode' } },
+        },
+    },
+};
+export default meta;
+// ---------------------------------------------------------------------------
+// Helper: attach a per-story description to docs
+// ---------------------------------------------------------------------------
+const withDescription = (story, description) => ({
+    ...story,
+    parameters: {
+        ...story.parameters,
+        docs: { ...story.parameters?.docs, description: { story: description } },
+    },
+});
+// ---------------------------------------------------------------------------
+// Template components
+// ---------------------------------------------------------------------------
+const IconSizesTemplate = () => (_jsx("div", { style: { display: 'flex', flexDirection: 'column', gap: 'var(--spacing-xlarge)' }, children: [12, 16, 24].map(size => (_jsxs("div", { children: [_jsx("p", { className: "ds-text", style: { margin: '0 0 var(--spacing-small)', color: 'var(--color-grey-600)' }, children: `size={${size}}` }), _jsxs(IcoText, { children: [_jsx(IcoText.Icon, { name: "guardians", size: size }), _jsx(IcoText.Heading, { children: "Year 9 Attendance" }), _jsx(IcoText.Paragraph, { children: "28 pupils \u00B7 94.2% average this term" })] })] }, size))) }));
+const IconColorsTemplate = () => (_jsx("div", { style: { display: 'flex', flexDirection: 'column', gap: 'var(--spacing-xlarge)' }, children: [
+        { color: 'var(--color-semantic-info-600)', label: 'Info — var(--color-semantic-info-600)' },
+        { color: 'var(--color-semantic-success-600)', label: 'Success — var(--color-semantic-success-600)' },
+        { color: 'var(--color-semantic-warning-600)', label: 'Warning — var(--color-semantic-warning-600)' },
+        { color: 'var(--color-semantic-destructive-600)', label: 'Destructive — var(--color-semantic-destructive-600)' },
+    ].map(({ color, label }) => (_jsxs("div", { children: [_jsx("p", { className: "ds-text", style: { margin: '0 0 var(--spacing-small)', color: 'var(--color-grey-600)' }, children: label }), _jsxs(IcoText, { children: [_jsx(IcoText.Icon, { name: "triangle-alert", color: color }), _jsx(IcoText.Heading, { children: "Attendance alert" }), _jsx(IcoText.Paragraph, { children: "3 pupils below 90% this half-term" })] })] }, color))) }));
+const MultipleParagraphsTemplate = () => (_jsxs(IcoText, { children: [_jsx(IcoText.Icon, { name: "date" }), _jsx(IcoText.Heading, { children: "Parents' evening \u2014 Tuesday 14 May" }), _jsx(IcoText.Paragraph, { children: "4:00 pm \u2013 7:00 pm \u00B7 Main Hall" }), _jsx(IcoText.Paragraph, { children: "Appointments available every 10 minutes. Please arrive 5 minutes early." })] }));
+// ---------------------------------------------------------------------------
+// Stories
+// ---------------------------------------------------------------------------
+export const Default = withDescription({
+    render: () => (_jsxs(IcoText, { children: [_jsx(IcoText.Icon, { name: "guardians" }), _jsx(IcoText.Heading, { children: "Year 9 Attendance" }), _jsx(IcoText.Paragraph, { children: "28 pupils \u00B7 94.2% average this term" })] })),
+}, 'The full canonical composition — `IcoText.Icon` in the left rail, `IcoText.Heading` and `IcoText.Paragraph` in the content column.');
+export const HeadingOnly = withDescription({
+    parameters: {
+        controls: { disable: true },
+        docs: {
+            source: {
+                language: 'tsx',
+                code: `
+import { IcoText } from '@arbor-education/design-system.components';
+
+function HeadingOnlyExample() {
+  return (
+    <IcoText>
+      <IcoText.Icon name="book-open" />
+      <IcoText.Heading>Assessment policy</IcoText.Heading>
+    </IcoText>
+  );
+}
+export default HeadingOnlyExample;
+`.trim(),
+            },
+        },
+    },
+    render: () => (_jsxs(IcoText, { children: [_jsx(IcoText.Icon, { name: "book-open" }), _jsx(IcoText.Heading, { children: "Assessment policy" })] })),
+}, 'Icon + Heading with no Paragraph — the compact pattern for short navigational labels.');
+export const WithoutIcon = withDescription({
+    parameters: {
+        controls: { disable: true },
+        docs: {
+            source: {
+                language: 'tsx',
+                code: `
+import { IcoText } from '@arbor-education/design-system.components';
+
+function WithoutIconExample() {
+  return (
+    <IcoText>
+      <IcoText.Heading>Behaviour report</IcoText.Heading>
+      <IcoText.Paragraph>No incidents recorded this week. All targets met.</IcoText.Paragraph>
+    </IcoText>
+  );
+}
+export default WithoutIconExample;
+`.trim(),
+            },
+        },
+    },
+    render: () => (_jsxs(IcoText, { children: [_jsx(IcoText.Heading, { children: "Behaviour report" }), _jsx(IcoText.Paragraph, { children: "No incidents recorded this week. All targets met." })] })),
+}, 'Heading + Paragraph with no icon. The left rail disappears cleanly — `IcoText.Icon` is entirely optional.');
+export const IconWithScreenReaderText = withDescription({
+    parameters: {
+        controls: { disable: true },
+        docs: {
+            source: {
+                language: 'tsx',
+                code: `
+import { IcoText } from '@arbor-education/design-system.components';
+
+function IconWithScreenReaderTextExample() {
+  return (
+    <IcoText>
+      <IcoText.Icon
+        name="triangle-alert"
+        color="var(--color-semantic-warning-600)"
+        screenReaderText="Warning"
+      />
+      <IcoText.Heading>Attendance below target</IcoText.Heading>
+      <IcoText.Paragraph>Alice Johnson — 78.4% this term. Intervention recommended.</IcoText.Paragraph>
+    </IcoText>
+  );
+}
+export default IconWithScreenReaderTextExample;
+`.trim(),
+            },
+        },
+    },
+    render: () => (_jsxs(IcoText, { children: [_jsx(IcoText.Icon, { name: "triangle-alert", color: "var(--color-semantic-warning-600)", screenReaderText: "Warning" }), _jsx(IcoText.Heading, { children: "Attendance below target" }), _jsx(IcoText.Paragraph, { children: "Alice Johnson \u2014 78.4% this term. Intervention recommended." })] })),
+}, 'When the icon carries meaning not conveyed by the heading text, provide `screenReaderText`. Without it the icon is `aria-hidden="true"`. Here the warning triangle conveys severity — screen readers announce "Warning, Attendance below target".');
+export const IconSizes = withDescription({
+    parameters: {
+        controls: { disable: true },
+        docs: {
+            source: {
+                language: 'tsx',
+                code: `
+import { IcoText } from '@arbor-education/design-system.components';
+
+function IconSizesExample() {
+  return (
+    <>
+      <IcoText>
+        <IcoText.Icon name="guardians" size={12} />
+        <IcoText.Heading>size 12</IcoText.Heading>
+        <IcoText.Paragraph>Use in very compact contexts</IcoText.Paragraph>
+      </IcoText>
+      <IcoText>
+        <IcoText.Icon name="guardians" size={16} />
+        <IcoText.Heading>size 16</IcoText.Heading>
+        <IcoText.Paragraph>Use in moderately compact contexts</IcoText.Paragraph>
+      </IcoText>
+      <IcoText>
+        <IcoText.Icon name="guardians" size={24} />
+        <IcoText.Heading>size 24 (default)</IcoText.Heading>
+        <IcoText.Paragraph>Standard — aligns best with h4 line-height</IcoText.Paragraph>
+      </IcoText>
+    </>
+  );
+}
+export default IconSizesExample;
+`.trim(),
+            },
+        },
+    },
+    render: IconSizesTemplate,
+}, 'All three supported icon sizes — 12, 16, and 24 (default). Use smaller sizes only in compact contexts such as table cells or dense lists. The `24` default aligns best with `IcoText.Heading`\'s h4 line-height.');
+export const IconColors = withDescription({
+    parameters: {
+        controls: { disable: true },
+        docs: {
+            source: {
+                language: 'tsx',
+                code: `
+import { IcoText } from '@arbor-education/design-system.components';
+
+function IconColorsExample() {
+  return (
+    <IcoText>
+      <IcoText.Icon name="triangle-alert" color="var(--color-semantic-warning-600)" />
+      <IcoText.Heading>Attendance alert</IcoText.Heading>
+      <IcoText.Paragraph>3 pupils below 90% this half-term</IcoText.Paragraph>
+    </IcoText>
+  );
+}
+export default IconColorsExample;
+`.trim(),
+            },
+        },
+    },
+    render: IconColorsTemplate,
+}, 'The `color` prop on `IcoText.Icon` accepts any CSS value — always use design token variables, never hardcoded hex. Semantic tokens (`--color-semantic-*`) are most appropriate for status-indicating icons.');
+export const MultipleParagraphs = withDescription({
+    parameters: {
+        controls: { disable: true },
+        docs: {
+            source: {
+                language: 'tsx',
+                code: `
+import { IcoText } from '@arbor-education/design-system.components';
+
+function MultipleParagraphsExample() {
+  return (
+    <IcoText>
+      <IcoText.Icon name="calendar" />
+      <IcoText.Heading>Parents' evening — Tuesday 14 May</IcoText.Heading>
+      <IcoText.Paragraph>4:00 pm – 7:00 pm · Main Hall</IcoText.Paragraph>
+      <IcoText.Paragraph>Appointments every 10 minutes. Please arrive 5 minutes early.</IcoText.Paragraph>
+    </IcoText>
+  );
+}
+export default MultipleParagraphsExample;
+`.trim(),
+            },
+        },
+    },
+    render: MultipleParagraphsTemplate,
+}, 'Multiple `IcoText.Paragraph` sub-components stack vertically in the content column. Use for supplementary detail lines below the primary heading.');
+//# sourceMappingURL=IcoText.stories.js.map

package/dist/components/icoText/IcoText.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IcoText.stories.js","sourceRoot":"","sources":["../../../src/components/icoText/IcoText.stories.tsx"],"names":[],"mappings":"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"}

package/dist/components/icoText/IcoText.test.d.ts

@@ -0,0 +1,2 @@
+import '@testing-library/jest-dom/vitest';
+//# sourceMappingURL=IcoText.test.d.ts.map

package/dist/components/icoText/IcoText.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"IcoText.test.d.ts","sourceRoot":"","sources":["../../../src/components/icoText/IcoText.test.tsx"],"names":[],"mappings":"AACA,OAAO,kCAAkC,CAAC"}

package/dist/components/icoText/IcoText.test.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { render, screen, within } from '@testing-library/react';
+import '@testing-library/jest-dom/vitest';
+import { describe, expect, test } from 'vitest';
+import { IcoText } from './IcoText.js';
+describe('IcoText', () => {
+    test('renders icon children before content children and keeps content in the content wrapper', () => {
+        const { container } = render(_jsxs(IcoText, { children: [_jsx(IcoText.Heading, { children: "Article title" }), _jsx(IcoText.Icon, { name: "eye", screenReaderText: "Views" }), _jsx(IcoText.Paragraph, { children: "Helpful supporting copy" }), _jsx("span", { children: "Metadata" }), _jsx(IcoText.Icon, { name: "eye", screenReaderText: "More views" })] }));
+        const root = container.querySelector('.ds-ico-text');
+        const content = container.querySelector('.ds-ico-text__content');
+        if (!content) {
+            throw new Error('Expected IcoText content wrapper to exist');
+        }
+        const iconElements = Array.from(root?.querySelectorAll(':scope > .ds-ico-text__icon') ?? []);
+        expect(iconElements).toHaveLength(2);
+        expect(root?.lastElementChild).toBe(content);
+        expect(content.querySelectorAll('.ds-ico-text__icon')).toHaveLength(0);
+        iconElements.forEach((iconElement) => {
+            expect(iconElement.compareDocumentPosition(content) & Node.DOCUMENT_POSITION_FOLLOWING).not.toBe(0);
+        });
+        expect(within(content).getByRole('heading', { level: 4 })).toHaveTextContent('Article title');
+        expect(within(content).getByText('Helpful supporting copy')).toBeInTheDocument();
+        expect(within(content).getByText('Metadata')).toBeInTheDocument();
+        expect(screen.getAllByRole('img', { hidden: true })).toHaveLength(2);
+    });
+});
+//# sourceMappingURL=IcoText.test.js.map

package/dist/components/icoText/IcoText.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IcoText.test.js","sourceRoot":"","sources":["../../../src/components/icoText/IcoText.test.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAChE,OAAO,kCAAkC,CAAC;AAC1C,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAChD,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAEpC,QAAQ,CAAC,SAAS,EAAE,GAAG,EAAE;IACvB,IAAI,CAAC,wFAAwF,EAAE,GAAG,EAAE;QAClG,MAAM,EAAE,SAAS,EAAE,GAAG,MAAM,CAC1B,MAAC,OAAO,eACN,KAAC,OAAO,CAAC,OAAO,gCAAgC,EAChD,KAAC,OAAO,CAAC,IAAI,IAAC,IAAI,EAAC,KAAK,EAAC,gBAAgB,EAAC,OAAO,GAAG,EACpD,KAAC,OAAO,CAAC,SAAS,0CAA4C,EAC9D,sCAAqB,EACrB,KAAC,OAAO,CAAC,IAAI,IAAC,IAAI,EAAC,KAAK,EAAC,gBAAgB,EAAC,YAAY,GAAG,IACjD,CACX,CAAC;QAEF,MAAM,IAAI,GAAG,SAAS,CAAC,aAAa,CAAiB,cAAc,CAAC,CAAC;QACrE,MAAM,OAAO,GAAG,SAAS,CAAC,aAAa,CAAiB,uBAAuB,CAAC,CAAC;QAEjF,IAAI,CAAC,OAAO,EAAE,CAAC;YACb,MAAM,IAAI,KAAK,CAAC,2CAA2C,CAAC,CAAC;QAC/D,CAAC;QAED,MAAM,YAAY,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,EAAE,gBAAgB,CAAC,6BAA6B,CAAC,IAAI,EAAE,CAAC,CAAC;QAE7F,MAAM,CAAC,YAAY,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC;QACrC,MAAM,CAAC,IAAI,EAAE,gBAAgB,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;QAC7C,MAAM,CAAC,OAAO,CAAC,gBAAgB,CAAC,oBAAoB,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC;QACvE,YAAY,CAAC,OAAO,CAAC,CAAC,WAAW,EAAE,EAAE;YACnC,MAAM,CACJ,WAAW,CAAC,uBAAuB,CAAC,OAAO,CAAC,GAAG,IAAI,CAAC,2BAA2B,CAChF,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;QAChB,CAAC,CAAC,CAAC;QAEH,MAAM,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,SAAS,CAAC,SAAS,EAAE,EAAE,KAAK,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,iBAAiB,CAAC,eAAe,CAAC,CAAC;QAC9F,MAAM,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,SAAS,CAAC,yBAAyB,CAAC,CAAC,CAAC,iBAAiB,EAAE,CAAC;QACjF,MAAM,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,SAAS,CAAC,UAAU,CAAC,CAAC,CAAC,iBAAiB,EAAE,CAAC;QAClE,MAAM,CAAC,MAAM,CAAC,YAAY,CAAC,KAAK,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC;IACvE,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}

package/dist/components/table/Table.test.js

@@ -819,32 +819,34 @@ describe('Table', () => {
                 cellRenderer: 'dsSelectDropdownCellRenderer',
                 cellRendererParams: { options: options, placeholder: 'Placeholder Text' },
             }];
-        test('renders with placeholder', () => {
+        test('renders with placeholder', async () => {
             const rowData = [{ selectField: null }];
             render(_jsx(Table, { columnDefs: columnDefs, rowData: rowData }));
-            expect(screen.getByText('Placeholder Text')).toBeInTheDocument();
+            expect(await screen.findByText('Placeholder Text')).toBeInTheDocument();
         });
-        test('renders with option', () => {
+        test('renders with option', async () => {
             const rowData = [{ selectField: 'option1' }];
             render(_jsx(Table, { columnDefs: columnDefs, rowData: rowData }));
-            expect(screen.getByText('Option 1')).toBeInTheDocument();
+            expect(await screen.findByText('Option 1')).toBeInTheDocument();
         });
-        test('renders with value not in options as raw string', () => {
+        test('renders with value not in options as raw string', async () => {
             const rowData = [{ selectField: 'unknown-value' }];
             render(_jsx(Table, { columnDefs: columnDefs, rowData: rowData }));
-            expect(screen.getByText('unknown-value')).toBeInTheDocument();
+            expect(await screen.findByText('unknown-value')).toBeInTheDocument();
         });
-        test('renders with empty string shows placeholder', () => {
+        test('renders with empty string shows placeholder', async () => {
             const rowData = [{ selectField: '' }];
             render(_jsx(Table, { columnDefs: columnDefs, rowData: rowData }));
-            expect(screen.getByText('Placeholder Text')).toBeInTheDocument();
+            expect(await screen.findByText('Placeholder Text')).toBeInTheDocument();
         });
-        test('renders dropdown button variant in cell', () => {
+        test('renders dropdown button variant in cell', async () => {
             const rowData = [{ selectField: 'option1' }];
             const { container } = render(_jsx(Table, { columnDefs: columnDefs, rowData: rowData }));
-            const dropdownWrapper = container.querySelector('.ds-table__select-dropdown');
-            const dropdownButton = dropdownWrapper?.querySelector('.ds-button--dropdown');
-            expect(dropdownButton).toBeInTheDocument();
+            await waitFor(() => {
+                const dropdownWrapper = container.querySelector('.ds-table__select-dropdown');
+                const dropdownButton = dropdownWrapper?.querySelector('.ds-button--dropdown');
+                expect(dropdownButton).toBeInTheDocument();
+            });
         });
     });
     describe('InlineTextCellRenderer', () => {
@@ -1164,6 +1166,7 @@ describe('Table', () => {
                     gridApi = event.api;
                 } }));
             await waitFor(() => expect(screen.getByRole('grid')).toBeInTheDocument());
+            await waitFor(() => expect(gridApi).toBeDefined());
             gridApi.startEditingCell({ rowIndex: 0, colKey: 'dateOfBirth' });
             await waitFor(() => expect(screen.getByRole('button', { name: 'Open date picker' })).toBeInTheDocument());
         });
@@ -1175,6 +1178,7 @@ describe('Table', () => {
                     gridApi = event.api;
                 }, onCellValueChanged: onCellValueChanged }));
             await waitFor(() => expect(screen.getByRole('grid')).toBeInTheDocument());
+            await waitFor(() => expect(gridApi).toBeDefined());
             gridApi.setFocusedCell(0, 'dateOfBirth');
             await userEvent.keyboard('{Enter}');
             await waitFor(() => expect(container.querySelector('input[type="date"]')).toBeInTheDocument());
@@ -1197,6 +1201,7 @@ describe('Table', () => {
                     gridApi = event.api;
                 } }));
             await waitFor(() => expect(screen.getByRole('grid')).toBeInTheDocument());
+            await waitFor(() => expect(gridApi).toBeDefined());
             gridApi.startEditingCell({ rowIndex: 0, colKey: 'dateOfBirth' });
             await waitFor(() => expect(container.querySelector('input[type="date"]')).toBeInTheDocument());
             expect(container.querySelector('input[type="date"]')).toHaveValue('2024-06-15');
@@ -1324,8 +1329,7 @@ describe('Table', () => {
         test('setting suppressCellFocusAndFocusFirstElement to true should add the ds-table__cell--suppress-focus class', async () => {
             const { container } = render(_jsx(Table, { columnDefs: columnDefs, rowData: rowData }));
             await screen.findByRole('grid', {}, { timeout: 10000 });
-            const cellWithClass = container.querySelector('.ds-table__cell--suppress-focus');
-            expect(cellWithClass).toBeInTheDocument();
+            await waitFor(() => expect(container.querySelector('.ds-table__cell--suppress-focus')).toBeInTheDocument());
         });
         test('setting suppressCellFocusAndFocusFirstElement to true should suppress cell focus and focus the first element', async () => {
             const focusFirstFocusableElementSpy = vi.spyOn(focusFirstFocusableElementModule, 'focusFirstFocusableElement');