feat!: Update Ariakit to 0.4.19 (#981)

* chore: Update Ariakit to 0.4.19

* Wait for tabs to be visible in tests

* Loosen Ariakit peer dependency version

Author: frankieyan

package-lock.json

@@ -61,12 +61,14 @@
         "plop": "plop"
     },
     "peerDependencies": {
+        "@ariakit/react": "~0.4.19",
         "classnames": "^2.2.5",
         "prop-types": "^15.6.2",
         "react": "^17.0.0 || ^18.0.0",
         "react-dom": "^17.0.0 || ^18.0.0"
     },
     "devDependencies": {
+        "@ariakit/react": "0.4.19",
         "@babel/core": "^7.9.6",
         "@babel/plugin-proposal-class-properties": "^7.10.1",
         "@babel/plugin-proposal-export-default-from": "^7.0.0",
@@ -161,7 +163,6 @@
         "webpack": "^4.43.0"
     },
     "dependencies": {
-        "@ariakit/react": "0.4.5",
         "aria-hidden": "^1.2.1",
         "dayjs": "^1.8.10",
         "patch-package": "^6.4.6",

package.json

@@ -27,16 +27,24 @@ describe('Tabs', () => {
         expect(screen.getByText('Content of tab 3')).not.toBeVisible()
 
         userEvent.click(screen.getByRole('tab', { name: 'Tab 2' }))
-        expect(screen.getByText('Content of tab 1')).not.toBeVisible()
+
+        await waitFor(() => {
+            expect(screen.getByText('Content of tab 1')).not.toBeVisible()
+        })
+
         expect(screen.getByRole('tabpanel', { name: 'Tab 2' })).toBeVisible()
         expect(screen.getByText('Content of tab 2')).toBeVisible()
         expect(screen.getByText('Content of tab 3')).not.toBeVisible()
 
         userEvent.click(screen.getByRole('tab', { name: 'Tab 3' }))
+
+        await waitFor(() => {
+            expect(screen.getByText('Content of tab 2')).not.toBeVisible()
+        })
+
         expect(screen.getByText('Content of tab 1')).not.toBeVisible()
-        expect(screen.getByText('Content of tab 2')).not.toBeVisible()
-        expect(screen.getByRole('tabpanel', { name: 'Tab 3' })).toBeVisible()
         expect(screen.getByText('Content of tab 3')).toBeVisible()
+        expect(screen.getByRole('tabpanel', { name: 'Tab 3' })).toBeVisible()
     })
 
     it("renders a tab's content only when they're active when each TabPanel's `render` prop is set to 'active'", async () => {
@@ -103,19 +111,27 @@ describe('Tabs', () => {
         expect(screen.queryByText('Content of tab 3')).not.toBeInTheDocument()
 
         userEvent.click(screen.getByRole('tab', { name: 'Tab 2' }))
-        expect(screen.getByText('Content of tab 1')).not.toBeVisible()
+
+        await waitFor(() => {
+            expect(screen.getByText('Content of tab 1')).not.toBeVisible()
+        })
+
         expect(screen.getByRole('tabpanel', { name: 'Tab 2' })).toBeVisible()
         expect(screen.getByText('Content of tab 2')).toBeVisible()
         expect(screen.queryByText('Content of tab 3')).not.toBeInTheDocument()
 
         userEvent.click(screen.getByRole('tab', { name: 'Tab 3' }))
+
+        await waitFor(() => {
+            expect(screen.getByText('Content of tab 2')).not.toBeVisible()
+        })
+
         expect(screen.getByText('Content of tab 1')).not.toBeVisible()
-        expect(screen.getByText('Content of tab 2')).not.toBeVisible()
         expect(screen.getByRole('tabpanel', { name: 'Tab 3' })).toBeVisible()
         expect(screen.getByText('Content of tab 3')).toBeVisible()
     })
 
-    it('becomes a controlled component when selectedId is provided', () => {
+    it('becomes a controlled component when selectedId is provided', async () => {
         const { rerender } = render(
             <Tabs>
                 <TabList aria-label="test-tabs">
@@ -149,9 +165,12 @@ describe('Tabs', () => {
             </Tabs>,
         )
 
+        await waitFor(() => {
+            expect(screen.getByText('Content of tab 2')).not.toBeVisible()
+        })
+
         expect(onSelectedIdChange).not.toHaveBeenCalled()
         expect(screen.getByText('Content of tab 1')).not.toBeVisible()
-        expect(screen.getByText('Content of tab 2')).not.toBeVisible()
         expect(screen.getByText('Content of tab 3')).toBeVisible()
 
         userEvent.click(screen.getByRole('tab', { name: 'Tab 2' }))