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

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