Update react-aria and friends (#1289)

Thinkmill · Sep 5, 2024 · 1b48613 · 1b48613
1 parent 09ef3b3
commit 1b48613
Show file tree

Hide file tree

Showing 70 changed files with 5,413 additions and 2,659 deletions.
diff --git a/.changeset/tidy-roses-sniff.md b/.changeset/tidy-roses-sniff.md
@@ -0,0 +1,7 @@
+---
+'@keystar/docs': patch
+'@keystatic/core': patch
+'@keystar/ui': patch
+---
+
+Update react-aria and friends. Fix tests/types etc. from update.
diff --git a/design-system/docs/.storybook/preview.js b/design-system/docs/.storybook/preview.js
@@ -18,7 +18,7 @@ export const decorators = [
     <div
       style={{
         alignItems: 'center',
-        backgroundColor: tokenSchema.color.background.canvas,
+        backgroundColor: tokenSchema.color.background.surface,
         boxSizing: 'border-box',
         display: 'flex',
         flexDirection: 'column',

diff --git a/design-system/docs/package.json b/design-system/docs/package.json
@@ -19,12 +19,12 @@
     "@babel/core": "^7.23.0",
     "@babel/runtime": "^7.18.3",
     "@cloudflare/next-on-pages": "^1.11.0",
-    "@internationalized/date": "^3.5.0",
+    "@internationalized/date": "^3.5.5",
     "@keystar/ui": "workspace:^",
     "@keystatic/core": "workspace:^",
     "@keystatic/next": "workspace:^",
     "@markdoc/markdoc": "^0.4.0",
-    "@react-aria/i18n": "^3.8.0",
+    "@react-aria/i18n": "^3.12.1",
     "clipboard-copy": "^4.0.1",
     "emery": "^1.4.1",
     "esbuild": "^0.14.53",

diff --git a/design-system/pkg/package.json b/design-system/pkg/package.json
@@ -1472,84 +1472,84 @@
     "@babel/runtime": "^7.18.3",
     "@emotion/css": "^11.9.0",
     "@floating-ui/react": "^0.24.0",
-    "@internationalized/date": "^3.5.0",
-    "@react-aria/actiongroup": "^3.6.4",
-    "@react-aria/breadcrumbs": "^3.5.11",
-    "@react-aria/button": "^3.8.4",
-    "@react-aria/calendar": "^3.5.2",
-    "@react-aria/checkbox": "^3.11.2",
-    "@react-aria/combobox": "^3.7.1",
-    "@react-aria/datepicker": "^3.8.1",
-    "@react-aria/dialog": "^3.5.7",
-    "@react-aria/dnd": "^3.4.3",
-    "@react-aria/focus": "^3.14.3",
-    "@react-aria/gridlist": "^3.7.1",
-    "@react-aria/i18n": "^3.8.0",
-    "@react-aria/interactions": "^3.21.1",
-    "@react-aria/label": "^3.7.2",
-    "@react-aria/link": "^3.6.5",
-    "@react-aria/listbox": "^3.11.1",
-    "@react-aria/live-announcer": "^3.3.2",
-    "@react-aria/menu": "^3.11.1",
-    "@react-aria/meter": "^3.4.7",
-    "@react-aria/numberfield": "^3.9.1",
-    "@react-aria/overlays": "^3.18.1",
-    "@react-aria/progress": "^3.4.7",
-    "@react-aria/radio": "^3.8.2",
-    "@react-aria/searchfield": "^3.5.7",
-    "@react-aria/select": "^3.13.1",
-    "@react-aria/selection": "^3.17.1",
-    "@react-aria/separator": "^3.3.7",
-    "@react-aria/ssr": "^3.8.0",
-    "@react-aria/switch": "^3.5.6",
-    "@react-aria/table": "^3.13.1",
-    "@react-aria/tabs": "^3.8.1",
-    "@react-aria/textfield": "^3.12.2",
-    "@react-aria/toast": "3.0.0-beta.2",
-    "@react-aria/tooltip": "^3.6.4",
-    "@react-aria/utils": "^3.23.2",
-    "@react-aria/virtualizer": "^3.9.5",
-    "@react-aria/visually-hidden": "^3.8.6",
-    "@react-stately/calendar": "^3.4.1",
-    "@react-stately/checkbox": "^3.5.1",
-    "@react-stately/collections": "^3.10.2",
-    "@react-stately/combobox": "^3.7.1",
-    "@react-stately/data": "^3.10.3",
-    "@react-stately/datepicker": "^3.8.0",
-    "@react-stately/dnd": "^3.2.5",
-    "@react-stately/layout": "^3.13.3",
-    "@react-stately/list": "^3.10.0",
-    "@react-stately/menu": "^3.5.6",
-    "@react-stately/numberfield": "^3.6.2",
-    "@react-stately/overlays": "^3.6.3",
-    "@react-stately/radio": "^3.9.1",
-    "@react-stately/searchfield": "^3.4.6",
-    "@react-stately/select": "^3.5.5",
-    "@react-stately/table": "^3.11.2",
-    "@react-stately/tabs": "^3.6.1",
-    "@react-stately/toast": "3.0.0-beta.1",
-    "@react-stately/toggle": "^3.6.3",
-    "@react-stately/tooltip": "^3.4.5",
-    "@react-stately/tree": "^3.7.3",
-    "@react-stately/utils": "^3.8.0",
-    "@react-stately/virtualizer": "^3.6.5",
-    "@react-types/actionbar": "^3.1.5",
-    "@react-types/actiongroup": "^3.4.5",
-    "@react-types/breadcrumbs": "^3.7.3",
-    "@react-types/button": "^3.9.0",
-    "@react-types/calendar": "^3.4.1",
-    "@react-types/combobox": "^3.8.1",
-    "@react-types/datepicker": "^3.6.1",
-    "@react-types/grid": "^3.2.2",
-    "@react-types/menu": "^3.9.5",
-    "@react-types/numberfield": "^3.6.1",
-    "@react-types/overlays": "^3.8.3",
-    "@react-types/radio": "^3.5.2",
-    "@react-types/select": "^3.8.4",
-    "@react-types/shared": "^3.21.0",
-    "@react-types/switch": "^3.4.2",
-    "@react-types/table": "^3.9.0",
-    "@react-types/tabs": "^3.3.3",
+    "@internationalized/date": "^3.5.5",
+    "@react-aria/actiongroup": "^3.7.8",
+    "@react-aria/breadcrumbs": "^3.5.16",
+    "@react-aria/button": "^3.9.8",
+    "@react-aria/calendar": "^3.5.11",
+    "@react-aria/checkbox": "^3.14.6",
+    "@react-aria/combobox": "^3.10.3",
+    "@react-aria/datepicker": "^3.11.2",
+    "@react-aria/dialog": "^3.5.17",
+    "@react-aria/dnd": "^3.7.2",
+    "@react-aria/focus": "^3.18.1",
+    "@react-aria/gridlist": "^3.9.3",
+    "@react-aria/i18n": "^3.12.1",
+    "@react-aria/interactions": "^3.22.1",
+    "@react-aria/label": "^3.7.11",
+    "@react-aria/link": "^3.7.4",
+    "@react-aria/listbox": "^3.13.3",
+    "@react-aria/live-announcer": "^3.3.4",
+    "@react-aria/menu": "^3.15.3",
+    "@react-aria/meter": "^3.4.16",
+    "@react-aria/numberfield": "^3.11.6",
+    "@react-aria/overlays": "^3.23.2",
+    "@react-aria/progress": "^3.4.16",
+    "@react-aria/radio": "^3.10.7",
+    "@react-aria/searchfield": "^3.7.8",
+    "@react-aria/select": "^3.14.9",
+    "@react-aria/selection": "^3.19.3",
+    "@react-aria/separator": "^3.4.2",
+    "@react-aria/ssr": "^3.9.5",
+    "@react-aria/switch": "^3.6.7",
+    "@react-aria/table": "^3.15.1",
+    "@react-aria/tabs": "^3.9.5",
+    "@react-aria/textfield": "^3.14.8",
+    "@react-aria/toast": "3.0.0-beta.15",
+    "@react-aria/tooltip": "^3.7.7",
+    "@react-aria/utils": "^3.25.1",
+    "@react-aria/virtualizer": "^4.0.2",
+    "@react-aria/visually-hidden": "^3.8.15",
+    "@react-stately/calendar": "^3.5.4",
+    "@react-stately/checkbox": "^3.6.8",
+    "@react-stately/collections": "^3.10.9",
+    "@react-stately/combobox": "^3.9.2",
+    "@react-stately/data": "^3.11.6",
+    "@react-stately/datepicker": "^3.10.2",
+    "@react-stately/dnd": "^3.4.2",
+    "@react-stately/layout": "^4.0.2",
+    "@react-stately/list": "^3.10.8",
+    "@react-stately/menu": "^3.8.2",
+    "@react-stately/numberfield": "^3.9.6",
+    "@react-stately/overlays": "^3.6.10",
+    "@react-stately/radio": "^3.10.7",
+    "@react-stately/searchfield": "^3.5.6",
+    "@react-stately/select": "^3.6.7",
+    "@react-stately/table": "^3.12.1",
+    "@react-stately/tabs": "^3.6.9",
+    "@react-stately/toast": "3.0.0-beta.5",
+    "@react-stately/toggle": "^3.7.7",
+    "@react-stately/tooltip": "^3.4.12",
+    "@react-stately/tree": "^3.8.4",
+    "@react-stately/utils": "^3.10.3",
+    "@react-stately/virtualizer": "^4.0.2",
+    "@react-types/actionbar": "^3.1.9",
+    "@react-types/actiongroup": "^3.4.11",
+    "@react-types/breadcrumbs": "^3.7.7",
+    "@react-types/button": "^3.9.6",
+    "@react-types/calendar": "^3.4.9",
+    "@react-types/combobox": "^3.12.1",
+    "@react-types/datepicker": "^3.8.2",
+    "@react-types/grid": "^3.2.8",
+    "@react-types/menu": "^3.9.11",
+    "@react-types/numberfield": "^3.8.5",
+    "@react-types/overlays": "^3.8.9",
+    "@react-types/radio": "^3.8.3",
+    "@react-types/select": "^3.9.6",
+    "@react-types/shared": "^3.24.1",
+    "@react-types/switch": "^3.5.5",
+    "@react-types/table": "^3.10.1",
+    "@react-types/tabs": "^3.3.9",
     "@types/react": "^18.2.8",
     "emery": "^1.4.1",
     "facepaint": "^1.2.1"
@@ -1558,7 +1558,7 @@
     "@jest/globals": "^29.7.0",
     "@keystar/ui": "workspace:^",
     "@keystar/ui-storybook": "workspace:^",
-    "@react-aria/landmark": "3.0.0-beta.2",
+    "@react-aria/landmark": "3.0.0-beta.15",
     "@svgr/core": "^6.5.1",
     "@svgr/plugin-jsx": "^6.5.1",
     "@svgr/plugin-prettier": "^6.5.1",

diff --git a/design-system/pkg/src/action-bar/ActionBar.tsx b/design-system/pkg/src/action-bar/ActionBar.tsx
@@ -39,7 +39,6 @@ function ActionBar<T extends object>(
   let domRef = useObjectRef(forwardedRef);
 
   return (
-    /* @ts-expect-error FIXME: resolve ref inconsistencies */
     <Transition nodeRef={domRef} isOpen={isOpen}>
       <ActionBarInnerWithRef {...props} ref={domRef} />
     </Transition>

diff --git a/design-system/pkg/src/action-bar/test/ActionBar.test.tsx b/design-system/pkg/src/action-bar/test/ActionBar.test.tsx
@@ -6,22 +6,18 @@ import {
   it,
   jest,
 } from '@jest/globals';
-// import { announce } from '@react-aria/live-announcer';
+import userEvent from '@testing-library/user-event';
 import React from 'react';
-import {
-  act,
-  fireEvent,
-  firePress,
-  renderWithProvider,
-  within,
-} from '#test-utils';
+import { act, renderWithProvider, within } from '#test-utils';
 
 import { ListExample } from '../stories/ListExample';
 
 // jest.mock('@react-aria/live-announcer');
 
 describe('action-bar/ActionBar', () => {
+  let user: ReturnType<typeof userEvent.setup>;
   beforeAll(() => {
+    user = userEvent.setup({ delay: null });
     jest
       .spyOn(window.HTMLElement.prototype, 'clientWidth', 'get')
       .mockImplementation(() => 1000);
@@ -35,17 +31,15 @@ describe('action-bar/ActionBar', () => {
     act(() => jest.runAllTimers());
   });
 
-  it('should open when there are selected items', () => {
+  it('should open when there are selected items', async () => {
     let tree = renderWithProvider(<ListExample />);
-    act(() => {
-      jest.runAllTimers();
-    });
+    act(() => jest.runAllTimers());
 
     let grid = tree.getByRole('grid');
     let rows = within(grid).getAllByRole('row');
 
     expect(tree.queryByRole('toolbar')).toBeNull();
-    firePress(rows[1]);
+    await user.click(rows[1]);
 
     // FIXME: get this mock working
     // expect(announce).toHaveBeenCalledWith('Actions available.');
@@ -62,88 +56,78 @@ describe('action-bar/ActionBar', () => {
     expect(clearButton.tagName).toBe('BUTTON');
   });
 
-  it('should update the selected count when selecting more items', () => {
+  it('should update the selected count when selecting more items', async () => {
     let tree = renderWithProvider(<ListExample />);
-    act(() => {
-      jest.runAllTimers();
-    });
+    act(() => jest.runAllTimers());
 
     let grid = tree.getByRole('grid');
     let rows = within(grid).getAllByRole('row');
 
-    firePress(rows[1]);
+    await user.click(rows[1]);
 
     let selectedCount = tree.getByText('1 selected');
 
-    firePress(rows[2]);
+    await user.click(rows[2]);
     expect(selectedCount).toHaveTextContent('2 selected');
   });
 
-  it('should close and restore focus when pressing the clear button', () => {
+  it('should close and restore focus when pressing the clear button', async () => {
     let tree = renderWithProvider(<ListExample />);
-    act(() => {
-      jest.runAllTimers();
-    });
+    act(() => jest.runAllTimers());
 
     let grid = tree.getByRole('grid');
     let rows = within(grid).getAllByRole('row');
     let checkbox = within(rows[1]).getByRole('checkbox');
 
-    firePress(checkbox);
+    await user.click(checkbox);
     act(() => jest.runAllTimers());
     expect(document.activeElement).toBe(checkbox);
 
     let clearButton = tree.getByLabelText('Clear selection');
 
-    act(() => clearButton.focus());
-    firePress(clearButton);
+    await user.click(clearButton);
     act(() => jest.runAllTimers());
     act(() => jest.runAllTimers());
 
     expect(tree.queryByRole('toolbar')).toBeNull();
-    expect(document.activeElement).toBe(checkbox);
+    expect(document.activeElement).toBe(checkbox.closest('[role="row"]'));
   });
 
-  it('should close when pressing the escape key', () => {
+  it('should close when pressing the escape key', async () => {
     let tree = renderWithProvider(<ListExample />);
-    act(() => {
-      jest.runAllTimers();
-    });
+    act(() => jest.runAllTimers());
 
-    let grid = tree.getByRole('grid');
-    let rows = within(grid).getAllByRole('row');
+    let table = tree.getByRole('grid');
+    let rows = within(table).getAllByRole('row');
     let checkbox = within(rows[1]).getByRole('checkbox');
 
-    firePress(checkbox);
+    await user.click(checkbox);
     act(() => jest.runAllTimers());
     expect(document.activeElement).toBe(checkbox);
 
     let toolbar = tree.getByRole('toolbar');
     act(() => within(toolbar).getAllByRole('button')[0].focus());
 
-    fireEvent.keyDown(document.activeElement!, { key: 'Escape' });
-    fireEvent.keyUp(document.activeElement!, { key: 'Escape' });
+    await user.keyboard('{Escape}');
     act(() => jest.runAllTimers());
     act(() => jest.runAllTimers());
 
     expect(tree.queryByRole('toolbar')).toBeNull();
-    expect(document.activeElement).toBe(checkbox);
+    expect(document.activeElement).toBe(checkbox.closest('[role="row"]'));
   });
 
-  it('should fire onAction when clicking on an action', () => {
+  it('should fire onAction when clicking on an action', async () => {
     let onAction = jest.fn();
     let tree = renderWithProvider(<ListExample onAction={onAction} />);
-    act(() => {
-      jest.runAllTimers();
-    });
+    act(() => jest.runAllTimers());
 
     let grid = tree.getByRole('grid');
     let rows = within(grid).getAllByRole('row');
 
-    firePress(rows[1]);
+    await user.click(rows[1]);
 
     let toolbar = tree.getByRole('toolbar');
-    firePress(within(toolbar).getAllByRole('button')[0]);
+    await user.click(within(toolbar).getAllByRole('button')[0]);
 
     expect(onAction).toHaveBeenCalledWith('edit');
   });