@arbor-education/design-system.components 3.6.0 → 4.0.0

package/src/components/arborLogo/__snapshots__/ArborLogo.test.tsx.snap

@@ -2,7 +2,7 @@
 
 exports[`ArborLogo > renders the icon-only variant 1`] = `
 <svg
-  aria-labelledby=":r1:"
+  aria-labelledby="_r_1_"
   fill="none"
   height="25"
   role="img"
@@ -11,12 +11,12 @@ exports[`ArborLogo > renders the icon-only variant 1`] = `
   xmlns="http://www.w3.org/2000/svg"
 >
   <title
-    id=":r1:"
+    id="_r_1_"
   >
     Arbor
   </title>
   <g
-    clip-path="url(#:r0:)"
+    clip-path="url(#_r_0_)"
   >
     <path
       d="M12.6821 12.448C12.6821 9.06699 15.4229 6.32623 18.8039 6.32623C18.8039 2.94571 16.0631 0.205391 12.6817 0.205391C9.30163 0.205391 6.56086 2.94571 6.56042 6.32623C9.94138 6.32623 12.6817 9.06699 12.6821 12.448Z"
@@ -53,7 +53,7 @@ exports[`ArborLogo > renders the icon-only variant 1`] = `
   </g>
   <defs>
     <clippath
-      id=":r0:"
+      id="_r_0_"
     >
       <rect
         fill="white"
@@ -67,7 +67,7 @@ exports[`ArborLogo > renders the icon-only variant 1`] = `
 
 exports[`ArborLogo > renders the icon-only variant with a custom aria-label 1`] = `
 <svg
-  aria-labelledby=":r5:"
+  aria-labelledby="_r_5_"
   fill="none"
   height="25"
   role="img"
@@ -76,12 +76,12 @@ exports[`ArborLogo > renders the icon-only variant with a custom aria-label 1`]
   xmlns="http://www.w3.org/2000/svg"
 >
   <title
-    id=":r5:"
+    id="_r_5_"
   >
     Arbor Education logo
   </title>
   <g
-    clip-path="url(#:r4:)"
+    clip-path="url(#_r_4_)"
   >
     <path
       d="M12.6821 12.448C12.6821 9.06699 15.4229 6.32623 18.8039 6.32623C18.8039 2.94571 16.0631 0.205391 12.6817 0.205391C9.30163 0.205391 6.56086 2.94571 6.56042 6.32623C9.94138 6.32623 12.6817 9.06699 12.6821 12.448Z"
@@ -118,7 +118,7 @@ exports[`ArborLogo > renders the icon-only variant with a custom aria-label 1`]
   </g>
   <defs>
     <clippath
-      id=":r4:"
+      id="_r_4_"
     >
       <rect
         fill="white"
@@ -140,7 +140,7 @@ exports[`ArborLogo > renders the icon-only variant with aria-hidden 1`] = `
   xmlns="http://www.w3.org/2000/svg"
 >
   <g
-    clip-path="url(#:r2:)"
+    clip-path="url(#_r_2_)"
   >
     <path
       d="M12.6821 12.448C12.6821 9.06699 15.4229 6.32623 18.8039 6.32623C18.8039 2.94571 16.0631 0.205391 12.6817 0.205391C9.30163 0.205391 6.56086 2.94571 6.56042 6.32623C9.94138 6.32623 12.6817 9.06699 12.6821 12.448Z"
@@ -177,7 +177,7 @@ exports[`ArborLogo > renders the icon-only variant with aria-hidden 1`] = `
   </g>
   <defs>
     <clippath
-      id=":r2:"
+      id="_r_2_"
     >
       <rect
         fill="white"
@@ -199,7 +199,7 @@ exports[`ArborLogo > renders the text variant with aria-hidden 1`] = `
   xmlns="http://www.w3.org/2000/svg"
 >
   <g
-    clip-path="url(#:ra:)"
+    clip-path="url(#_r_a_)"
   >
     <path
       d="M12.6822 12.4479C12.6822 9.06698 15.423 6.32622 18.8039 6.32622C18.8039 2.9457 16.0632 0.205383 12.6818 0.205383C9.30169 0.205383 6.56093 2.9457 6.56049 6.32622C9.94145 6.32622 12.6818 9.06698 12.6822 12.4479Z"
@@ -256,7 +256,7 @@ exports[`ArborLogo > renders the text variant with aria-hidden 1`] = `
   </g>
   <defs>
     <clippath
-      id=":ra:"
+      id="_r_a_"
     >
       <rect
         fill="white"
@@ -270,7 +270,7 @@ exports[`ArborLogo > renders the text variant with aria-hidden 1`] = `
 
 exports[`ArborLogo > renders the text variant with black text 1`] = `
 <svg
-  aria-labelledby=":r7:"
+  aria-labelledby="_r_7_"
   fill="none"
   height="26"
   role="img"
@@ -279,12 +279,12 @@ exports[`ArborLogo > renders the text variant with black text 1`] = `
   xmlns="http://www.w3.org/2000/svg"
 >
   <title
-    id=":r7:"
+    id="_r_7_"
   >
     Arbor
   </title>
   <g
-    clip-path="url(#:r6:)"
+    clip-path="url(#_r_6_)"
   >
     <path
       d="M12.6822 12.4479C12.6822 9.06698 15.423 6.32622 18.8039 6.32622C18.8039 2.9457 16.0632 0.205383 12.6818 0.205383C9.30169 0.205383 6.56093 2.9457 6.56049 6.32622C9.94145 6.32622 12.6818 9.06698 12.6822 12.4479Z"
@@ -341,7 +341,7 @@ exports[`ArborLogo > renders the text variant with black text 1`] = `
   </g>
   <defs>
     <clippath
-      id=":r6:"
+      id="_r_6_"
     >
       <rect
         fill="white"
@@ -355,7 +355,7 @@ exports[`ArborLogo > renders the text variant with black text 1`] = `
 
 exports[`ArborLogo > renders the text variant with white text 1`] = `
 <svg
-  aria-labelledby=":r9:"
+  aria-labelledby="_r_9_"
   fill="none"
   height="26"
   role="img"
@@ -364,7 +364,7 @@ exports[`ArborLogo > renders the text variant with white text 1`] = `
   xmlns="http://www.w3.org/2000/svg"
 >
   <title
-    id=":r9:"
+    id="_r_9_"
   >
     Arbor
   </title>

package/src/components/combobox/ComboboxButtonTrigger.tsx

@@ -11,7 +11,7 @@ import type { ComboboxAriaInvalid, ComboboxOption, ComboboxSelectedValueDisplay
 import { useVisibleTriggerTags } from './useVisibleTriggerTags.js';
 
 export type ComboboxButtonTriggerProps = {
-  triggerRef: React.RefObject<HTMLDivElement>;
+  triggerRef: React.RefObject<HTMLDivElement | null>;
   listboxId: string;
   isOpen: boolean;
   hasError: boolean;

package/src/components/combobox/ComboboxListbox.tsx

@@ -4,7 +4,7 @@ import { ComboboxOptionRow } from './ComboboxOptionRow.js';
 import type { ComboboxAriaInvalid, ComboboxOption, ComboboxSearchType } from './types.js';
 
 export type ComboboxListboxProps = {
-  listboxRef: React.RefObject<HTMLUListElement>;
+  listboxRef: React.RefObject<HTMLUListElement | null>;
   listboxId: string;
   multiple: boolean;
   ariaLabel: string | undefined;
@@ -27,7 +27,7 @@ export type ComboboxListboxProps = {
   filteredOptionsLength: number;
   preventMouseDefault: (e: React.MouseEvent) => void;
   renderSearchInputInListbox: boolean;
-  inputRef: React.RefObject<HTMLInputElement>;
+  inputRef: React.RefObject<HTMLInputElement | null>;
   comboboxId: string;
   shouldShowPopover: boolean;
   activeDescendant: string | undefined;

package/src/components/combobox/ComboboxTrigger.tsx

@@ -5,8 +5,8 @@ import { Popover } from 'radix-ui';
 import type { ComboboxAriaInvalid, ComboboxOption, ComboboxSelectedValueDisplay } from './types.js';
 
 export type ComboboxTriggerProps = {
-  'inputRef': React.RefObject<HTMLInputElement>;
-  'triggerRef': React.RefObject<HTMLDivElement>;
+  'inputRef': React.RefObject<HTMLInputElement | null>;
+  'triggerRef': React.RefObject<HTMLDivElement | null>;
   'comboboxId': string;
   'listboxId': string;
   'isOpen': boolean;

package/src/components/combobox/useComboboxListboxDom.ts

@@ -6,7 +6,7 @@ type UseComboboxListboxDomParams = {
 };
 
 export type UseComboboxListboxDomReturn = {
-  listboxRef: React.RefObject<HTMLUListElement>;
+  listboxRef: React.RefObject<HTMLUListElement | null>;
   getOptionId: (index: number) => string;
   scrollHighlightedIntoView: (index: number) => void;
 };

package/src/components/table/Table.test.tsx

@@ -1354,7 +1354,7 @@ describe('Table', () => {
       cellRendererParams: { options: options, placeholder: 'Placeholder Text' },
     }];
 
-    test('renders with placeholder', () => {
+    test('renders with placeholder', async () => {
       const rowData = [{ selectField: null }];
       render(
         <Table
@@ -1362,10 +1362,10 @@ describe('Table', () => {
           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(
         <Table
@@ -1373,10 +1373,10 @@ describe('Table', () => {
           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(
         <Table
@@ -1384,10 +1384,10 @@ describe('Table', () => {
           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(
         <Table
@@ -1395,10 +1395,10 @@ describe('Table', () => {
           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(
         <Table
@@ -1406,9 +1406,11 @@ describe('Table', () => {
           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();
+      });
     });
   });
 
@@ -1858,6 +1860,7 @@ describe('Table', () => {
         />,
       );
       await waitFor(() => expect(screen.getByRole('grid')).toBeInTheDocument());
+      await waitFor(() => expect(gridApi).toBeDefined());
 
       gridApi!.startEditingCell({ rowIndex: 0, colKey: 'dateOfBirth' });
 
@@ -1879,6 +1882,7 @@ describe('Table', () => {
         />,
       );
       await waitFor(() => expect(screen.getByRole('grid')).toBeInTheDocument());
+      await waitFor(() => expect(gridApi).toBeDefined());
 
       gridApi!.setFocusedCell(0, 'dateOfBirth');
       await userEvent.keyboard('{Enter}');
@@ -1912,6 +1916,7 @@ describe('Table', () => {
         />,
       );
       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());
@@ -2068,8 +2073,7 @@ describe('Table', () => {
     test('setting suppressCellFocusAndFocusFirstElement to true should add the ds-table__cell--suppress-focus class', async () => {
       const { container } = render(<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 () => {

package/src/components/tagList/useTagListCollapsedLayout.ts

@@ -11,9 +11,9 @@ type UseTagListCollapsedLayoutParams = {
 };
 
 type TagListCollapsedLayout = {
-  contentRef: React.RefObject<HTMLDivElement>;
-  measureTrackRef: React.RefObject<HTMLUListElement>;
-  overflowProbeRef: React.RefObject<HTMLDivElement>;
+  contentRef: React.RefObject<HTMLDivElement | null>;
+  measureTrackRef: React.RefObject<HTMLUListElement | null>;
+  overflowProbeRef: React.RefObject<HTMLDivElement | null>;
   shouldCollapse: boolean;
   visibleItemIndices: number[];
   visibleItems: TagListItem[];

package/src/docs/UsingComponents.mdx

@@ -30,6 +30,12 @@ Or with npm:
 npm install @arbor-education/design-system.components
 ```
 
+### Requirements
+
+The design system doesn't bundle React; it uses the copy your project already has. Make sure your project has `react` and `react-dom` installed at version 18 or 19. React 19 is the preferred version -- projects on React 18 should plan to upgrade to 19.
+
+If your project uses TypeScript, it also needs `@types/react` and `@types/react-dom`.
+
 ---
 
 ## Importing the stylesheet

package/src/packageManifest.test.ts

@@ -0,0 +1,43 @@
+import { readFileSync } from 'fs';
+import path from 'path';
+import { describe, expect, test } from 'vitest';
+
+type PackageManifest = {
+  dependencies?: Record<string, string>;
+  peerDependencies?: Record<string, string>;
+  peerDependenciesMeta?: Record<string, { optional?: boolean }>;
+};
+
+// Read from disk rather than imported: tsconfig's rootDir is ./src, so a JSON import of the
+// root package.json would fail type-checking.
+const manifest: PackageManifest = JSON.parse(
+  readFileSync(path.resolve(__dirname, '../package.json'), 'utf8'),
+);
+
+const SUPPORTED_REACT_RANGE = '^18.0.0 || ^19.0.0';
+const REACT_PACKAGES = ['react', 'react-dom'];
+const REACT_TYPE_PACKAGES = ['@types/react', '@types/react-dom'];
+
+describe('package.json keeps React as a peer so consumers never get a second React copy', () => {
+  test.each([...REACT_PACKAGES, ...REACT_TYPE_PACKAGES])(
+    'does not bundle %s as a dependency, which would nest a second copy inside consumers',
+    (packageName) => {
+      expect(manifest.dependencies ?? {}).not.toHaveProperty([packageName]);
+    },
+  );
+
+  test.each(REACT_PACKAGES)(
+    'accepts both React 18 and React 19 for %s so either consumer can install it',
+    (packageName) => {
+      expect(manifest.peerDependencies?.[packageName]).toBe(SUPPORTED_REACT_RANGE);
+    },
+  );
+
+  test.each(REACT_TYPE_PACKAGES)(
+    'lists %s as an optional peer so JavaScript consumers are not forced to install types',
+    (packageName) => {
+      expect(manifest.peerDependencies ?? {}).toHaveProperty([packageName]);
+      expect(manifest.peerDependenciesMeta?.[packageName]?.optional).toBe(true);
+    },
+  );
+});