From 3eef8c91b01531dabe59e44229f3682a659be2b1 Mon Sep 17 00:00:00 2001 From: Frankie Yan Date: Sat, 1 Nov 2025 00:17:00 -0700 Subject: [PATCH 1/3] chore: Update Ariakit to 0.4.19 --- package-lock.json | 43 +++++++++++++++++++++++++------------------ package.json | 2 +- 2 files changed, 26 insertions(+), 19 deletions(-) diff --git a/package-lock.json b/package-lock.json index 9debcf6f..5b5b569d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,7 +10,6 @@ "hasInstallScript": true, "license": "MIT", "dependencies": { - "@ariakit/react": "0.4.5", "aria-hidden": "^1.2.1", "dayjs": "^1.8.10", "patch-package": "^6.4.6", @@ -118,6 +117,7 @@ "npm": "^10.9.2 || >= 11.5.1" }, "peerDependencies": { + "@ariakit/react": "0.4.19", "classnames": "^2.2.5", "prop-types": "^15.6.2", "react": "^17.0.0 || ^18.0.0", @@ -132,41 +132,44 @@ "license": "MIT" }, "node_modules/@ariakit/core": { - "version": "0.4.5", - "resolved": "https://registry.npmjs.org/@ariakit/core/-/core-0.4.5.tgz", - "integrity": "sha512-e294+bEcyzt/H/kO4fS5/czLAlkF7PY+Kul3q2z54VY+GGay8NlVs9UezAB7L4jUBlYRAXwp7/1Sq3R7b+MZ7w==", - "license": "MIT" + "version": "0.4.16", + "resolved": "https://registry.npmjs.org/@ariakit/core/-/core-0.4.16.tgz", + "integrity": "sha512-nPJ0Be8d5ZvRApYGqdLMuYUjP7ktkPmTPOXyZFw+0Illk8LKgF3Q74ctVGuoQurJNDsANXcewzlyXK4vyIAGTA==", + "license": "MIT", + "peer": true }, "node_modules/@ariakit/react": { - "version": "0.4.5", - "resolved": "https://registry.npmjs.org/@ariakit/react/-/react-0.4.5.tgz", - "integrity": "sha512-GUHxaOY1JZrJUHkuV20IY4NWcgknhqTQM0qCQcVZDCi+pJiWchUjTG+UyIr/Of02hU569qnQ7yovskCf+V3tNg==", + "version": "0.4.19", + "resolved": "https://registry.npmjs.org/@ariakit/react/-/react-0.4.19.tgz", + "integrity": "sha512-n6q8leSQWXMk4vhcZlpnj8cIlAY0n+1bvVTwHvaVfmec4LjW49MFKkJRZd1AiV+SE73nkxPwSL3IbaS4p1aRxQ==", "license": "MIT", + "peer": true, "dependencies": { - "@ariakit/react-core": "0.4.5" + "@ariakit/react-core": "0.4.19" }, "funding": { "type": "opencollective", "url": "https://opencollective.com/ariakit" }, "peerDependencies": { - "react": "^17.0.0 || ^18.0.0", - "react-dom": "^17.0.0 || ^18.0.0" + "react": "^17.0.0 || ^18.0.0 || ^19.0.0", + "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0" } }, "node_modules/@ariakit/react-core": { - "version": "0.4.5", - "resolved": "https://registry.npmjs.org/@ariakit/react-core/-/react-core-0.4.5.tgz", - "integrity": "sha512-ciTYPwpj/+mdA+EstveEnoygbx5e4PXQJxfkLKy4lkTkDJJUS9GcbYhdnIFJVUta6P1YFvzkIKo+/y9mcbMKJg==", + "version": "0.4.19", + "resolved": "https://registry.npmjs.org/@ariakit/react-core/-/react-core-0.4.19.tgz", + "integrity": "sha512-Aj+fu4pMyPXtlBghI+E7KSWItqJkbAqEhut3DlsFAjK9fQdHE+e1tQJG1PtnoEdD9BExkJWQ6R4M5a9HkEhqPA==", "license": "MIT", + "peer": true, "dependencies": { - "@ariakit/core": "0.4.5", + "@ariakit/core": "0.4.16", "@floating-ui/dom": "^1.0.0", "use-sync-external-store": "^1.2.0" }, "peerDependencies": { - "react": "^17.0.0 || ^18.0.0", - "react-dom": "^17.0.0 || ^18.0.0" + "react": "^17.0.0 || ^18.0.0 || ^19.0.0", + "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0" } }, "node_modules/@babel/code-frame": { @@ -2859,6 +2862,7 @@ "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.7.3.tgz", "integrity": "sha512-sGnvb5dmrJaKEZ+LDIpguvdX3bDlEllmv4/ClQ9awcmCZrlx5jQyyMWFM5kBI+EyNOCDDiKk8il0zeuX3Zlg/w==", "license": "MIT", + "peer": true, "dependencies": { "@floating-ui/utils": "^0.2.10" } @@ -2868,6 +2872,7 @@ "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.7.4.tgz", "integrity": "sha512-OOchDgh4F2CchOX94cRVqhvy7b3AFb+/rQXyswmzmGakRfkMgoWVjfnLWkRirfLEfuD4ysVW16eXzwt3jHIzKA==", "license": "MIT", + "peer": true, "dependencies": { "@floating-ui/core": "^1.7.3", "@floating-ui/utils": "^0.2.10" @@ -2877,7 +2882,8 @@ "version": "0.2.10", "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.10.tgz", "integrity": "sha512-aGTxbpbg8/b5JfU1HXSrbH3wXZuLPJcNEcZQFMxLs3oSzgtVu6nFPkbbGGUvBcUjKV2YyB9Wxxabo+HEH9tcRQ==", - "license": "MIT" + "license": "MIT", + "peer": true }, "node_modules/@gar/promisify": { "version": "1.1.3", @@ -35652,6 +35658,7 @@ "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.6.0.tgz", "integrity": "sha512-Pp6GSwGP/NrPIrxVFAIkOQeyw8lFenOHijQWkUTrDvrF4ALqylP2C/KCkeS9dpUM3KvYRQhna5vt7IL95+ZQ9w==", "license": "MIT", + "peer": true, "peerDependencies": { "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" } diff --git a/package.json b/package.json index b1e8750a..8efdcb0a 100644 --- a/package.json +++ b/package.json @@ -61,6 +61,7 @@ "plop": "plop" }, "peerDependencies": { + "@ariakit/react": "0.4.19", "classnames": "^2.2.5", "prop-types": "^15.6.2", "react": "^17.0.0 || ^18.0.0", @@ -161,7 +162,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", From 79f7a93e1934c8bfed4180553f82c64f84f8b87f Mon Sep 17 00:00:00 2001 From: Frankie Yan Date: Sat, 1 Nov 2025 00:37:40 -0700 Subject: [PATCH 2/3] Wait for tabs to be visible in tests --- src/tabs/tabs.test.tsx | 33 ++++++++++++++++++++++++++------- 1 file changed, 26 insertions(+), 7 deletions(-) diff --git a/src/tabs/tabs.test.tsx b/src/tabs/tabs.test.tsx index 0b4e438c..c7e40510 100644 --- a/src/tabs/tabs.test.tsx +++ b/src/tabs/tabs.test.tsx @@ -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( @@ -149,9 +165,12 @@ describe('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' })) From b17ce4a1216b81a1484224c89d261cf9b04b2c7c Mon Sep 17 00:00:00 2001 From: Frankie Yan Date: Tue, 4 Nov 2025 10:34:29 -0800 Subject: [PATCH 3/3] Loosen Ariakit peer dependency version --- package-lock.json | 23 +++++++++++++---------- package.json | 3 ++- 2 files changed, 15 insertions(+), 11 deletions(-) diff --git a/package-lock.json b/package-lock.json index 5b5b569d..bf3f6cd2 100644 --- a/package-lock.json +++ b/package-lock.json @@ -19,6 +19,7 @@ "use-callback-ref": "^1.3.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", @@ -117,7 +118,7 @@ "npm": "^10.9.2 || >= 11.5.1" }, "peerDependencies": { - "@ariakit/react": "0.4.19", + "@ariakit/react": "~0.4.19", "classnames": "^2.2.5", "prop-types": "^15.6.2", "react": "^17.0.0 || ^18.0.0", @@ -135,15 +136,15 @@ "version": "0.4.16", "resolved": "https://registry.npmjs.org/@ariakit/core/-/core-0.4.16.tgz", "integrity": "sha512-nPJ0Be8d5ZvRApYGqdLMuYUjP7ktkPmTPOXyZFw+0Illk8LKgF3Q74ctVGuoQurJNDsANXcewzlyXK4vyIAGTA==", - "license": "MIT", - "peer": true + "dev": true, + "license": "MIT" }, "node_modules/@ariakit/react": { "version": "0.4.19", "resolved": "https://registry.npmjs.org/@ariakit/react/-/react-0.4.19.tgz", "integrity": "sha512-n6q8leSQWXMk4vhcZlpnj8cIlAY0n+1bvVTwHvaVfmec4LjW49MFKkJRZd1AiV+SE73nkxPwSL3IbaS4p1aRxQ==", + "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@ariakit/react-core": "0.4.19" }, @@ -160,8 +161,8 @@ "version": "0.4.19", "resolved": "https://registry.npmjs.org/@ariakit/react-core/-/react-core-0.4.19.tgz", "integrity": "sha512-Aj+fu4pMyPXtlBghI+E7KSWItqJkbAqEhut3DlsFAjK9fQdHE+e1tQJG1PtnoEdD9BExkJWQ6R4M5a9HkEhqPA==", + "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@ariakit/core": "0.4.16", "@floating-ui/dom": "^1.0.0", @@ -2861,8 +2862,8 @@ "version": "1.7.3", "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.7.3.tgz", "integrity": "sha512-sGnvb5dmrJaKEZ+LDIpguvdX3bDlEllmv4/ClQ9awcmCZrlx5jQyyMWFM5kBI+EyNOCDDiKk8il0zeuX3Zlg/w==", + "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@floating-ui/utils": "^0.2.10" } @@ -2871,8 +2872,8 @@ "version": "1.7.4", "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.7.4.tgz", "integrity": "sha512-OOchDgh4F2CchOX94cRVqhvy7b3AFb+/rQXyswmzmGakRfkMgoWVjfnLWkRirfLEfuD4ysVW16eXzwt3jHIzKA==", + "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@floating-ui/core": "^1.7.3", "@floating-ui/utils": "^0.2.10" @@ -2882,8 +2883,8 @@ "version": "0.2.10", "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.10.tgz", "integrity": "sha512-aGTxbpbg8/b5JfU1HXSrbH3wXZuLPJcNEcZQFMxLs3oSzgtVu6nFPkbbGGUvBcUjKV2YyB9Wxxabo+HEH9tcRQ==", - "license": "MIT", - "peer": true + "dev": true, + "license": "MIT" }, "node_modules/@gar/promisify": { "version": "1.1.3", @@ -30189,6 +30190,7 @@ "version": "17.0.2", "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-17.0.2.tgz", "integrity": "sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA==", + "dev": true, "license": "MIT", "dependencies": { "loose-envify": "^1.1.0", @@ -32380,6 +32382,7 @@ "version": "0.20.2", "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.20.2.tgz", "integrity": "sha512-2eWfGgAqqWFGqtdMmcL5zCMK1U8KlXv8SQFGglL3CEtd0aDVDWgeF/YoCmvln55m5zSk3J/20hTaSBeSObsQDQ==", + "dev": true, "license": "MIT", "dependencies": { "loose-envify": "^1.1.0", @@ -35657,8 +35660,8 @@ "version": "1.6.0", "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.6.0.tgz", "integrity": "sha512-Pp6GSwGP/NrPIrxVFAIkOQeyw8lFenOHijQWkUTrDvrF4ALqylP2C/KCkeS9dpUM3KvYRQhna5vt7IL95+ZQ9w==", + "dev": true, "license": "MIT", - "peer": true, "peerDependencies": { "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" } diff --git a/package.json b/package.json index 8efdcb0a..57b4d305 100644 --- a/package.json +++ b/package.json @@ -61,13 +61,14 @@ "plop": "plop" }, "peerDependencies": { - "@ariakit/react": "0.4.19", + "@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",