From 10cc537c1e36e11cb567076472a6f51b03cc2eb9 Mon Sep 17 00:00:00 2001 From: Josh Black Date: Tue, 28 Nov 2023 12:11:57 -0600 Subject: [PATCH 1/6] chore(deps): remove @react-aria/ssr --- package-lock.json | 23 ++--------------------- package.json | 1 - 2 files changed, 2 insertions(+), 22 deletions(-) diff --git a/package-lock.json b/package-lock.json index b7f50fdd03b..88467d3745f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -18,7 +18,6 @@ "@primer/behaviors": "^1.5.1", "@primer/octicons-react": "^19.8.0", "@primer/primitives": "^7.11.11", - "@react-aria/ssr": "^3.5.0", "@styled-system/css": "^5.1.5", "@styled-system/props": "^5.1.5", "@styled-system/theme-get": "^5.1.2", @@ -6723,17 +6722,6 @@ "@babel/runtime": "^7.13.10" } }, - "node_modules/@react-aria/ssr": { - "version": "3.5.0", - "resolved": "https://registry.npmjs.org/@react-aria/ssr/-/ssr-3.5.0.tgz", - "integrity": "sha512-h0MJdSWOd1qObLnJ8mprU31wI8tmKFJMuwT22MpWq6psisOOZaga6Ml4u6Ee6M6duWWISjXvqO4Sb/J0PBA+nQ==", - "dependencies": { - "@swc/helpers": "^0.4.14" - }, - "peerDependencies": { - "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0" - } - }, "node_modules/@react-dnd/asap": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/@react-dnd/asap/-/asap-4.0.0.tgz", @@ -13240,14 +13228,6 @@ "node": ">=10" } }, - "node_modules/@swc/helpers": { - "version": "0.4.14", - "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.4.14.tgz", - "integrity": "sha512-4C7nX/dvpzB7za4Ql9K81xK3HPxCpHMgwTZVyf+9JQ6VUbn9jjZVN7/Nkdz/Ugzs2CSjqnL/UPXroiVBVHUWUw==", - "dependencies": { - "tslib": "^2.4.0" - } - }, "node_modules/@testing-library/dom": { "version": "9.3.1", "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-9.3.1.tgz", @@ -40102,7 +40082,8 @@ "node_modules/tslib": { "version": "2.6.2", "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz", - "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==" + "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==", + "dev": true }, "node_modules/tsutils": { "version": "3.21.0", diff --git a/package.json b/package.json index 886af52e34a..017f538bca5 100644 --- a/package.json +++ b/package.json @@ -103,7 +103,6 @@ "@primer/behaviors": "^1.5.1", "@primer/octicons-react": "^19.8.0", "@primer/primitives": "^7.11.11", - "@react-aria/ssr": "^3.5.0", "@styled-system/css": "^5.1.5", "@styled-system/props": "^5.1.5", "@styled-system/theme-get": "^5.1.2", From 4a0b0b6fd74182bb9243130b98acc90fdac3ac7c Mon Sep 17 00:00:00 2001 From: Josh Black Date: Tue, 28 Nov 2023 12:12:47 -0600 Subject: [PATCH 2/6] refactor(useId): update useId to use native useId, update ssr utils --- src/hooks/useId.ts | 38 ++++++++++---------------------------- src/utils/ssr.tsx | 10 ++++++++-- 2 files changed, 18 insertions(+), 30 deletions(-) diff --git a/src/hooks/useId.ts b/src/hooks/useId.ts index b951b256b02..007da7941eb 100644 --- a/src/hooks/useId.ts +++ b/src/hooks/useId.ts @@ -1,34 +1,16 @@ -// eslint-disable-next-line no-restricted-imports, import/no-namespace -import * as React from 'react' -// eslint-disable-next-line no-restricted-imports -import {useSSRSafeId} from '@react-aria/ssr' +import {useId as useReactId} from 'react' /** - * Detect if `React.useId()` is present. This strategy is a workaround for: - * https://github.com/webpack/webpack/issues/14814 + * Generate a unique id to be used in a component. If an `id` is provided, it + * will be used instead. * - * This technique is inspired by Material UI: - * https://github.com/mui/material-ui/blob/7bc478ec00a3b5625427f36c827e00b0a17be3d0/packages/mui-utils/src/useId.ts#L21 + * @param id - An optional value to be used instead of generating a unique id. + * Useful when accepting an optional `id` as a prop in a component. */ -// eslint-disable-next-line @typescript-eslint/no-explicit-any, no-useless-concat -const useReactId: undefined | (() => string) = (React as any)['useId' + ''] - -export function useId(id?: string) { - // Force useSSRSafeId in test environments to maintain snapshot parity between - // major versions of React - if (process.env.NODE_ENV === 'test') { - // eslint-disable-next-line react-hooks/rules-of-hooks - return useSSRSafeId(id) - } - - if (useReactId !== undefined) { - if (id) { - return id - } - // eslint-disable-next-line react-hooks/rules-of-hooks - return useReactId() +export function useId(id?: string): string { + const uniqueId = useReactId() + if (id) { + return id } - - // eslint-disable-next-line react-hooks/rules-of-hooks - return useSSRSafeId(id) + return uniqueId } diff --git a/src/utils/ssr.tsx b/src/utils/ssr.tsx index a74b004a343..33cfecd919a 100644 --- a/src/utils/ssr.tsx +++ b/src/utils/ssr.tsx @@ -1,2 +1,8 @@ -// eslint-disable-next-line no-restricted-imports -export {SSRProvider, useSSRSafeId} from '@react-aria/ssr' +import type {PropsWithChildren} from 'react' +import {useId} from '../hooks/useId' + +export function SSRProvider({children}: PropsWithChildren<{}>) { + return children +} + +export const useSSRSafeId = useId From f98ad3356a647ee10b38fbdec6b23190bb8366a7 Mon Sep 17 00:00:00 2001 From: Josh Black Date: Tue, 28 Nov 2023 12:12:52 -0600 Subject: [PATCH 3/6] test: update snapshots --- .../__snapshots__/NavList.test.tsx.snap | 78 +++++++++---------- .../__snapshots__/SelectPanel.test.tsx.snap | 2 +- .../__snapshots__/ActionMenu.test.tsx.snap | 2 +- .../AnchoredOverlay.test.tsx.snap | 4 +- .../__snapshots__/CheckboxGroup.test.tsx.snap | 12 +-- .../CheckboxOrRadioGroup.test.tsx.snap | 12 +-- .../__snapshots__/RadioGroup.test.tsx.snap | 12 +-- .../__snapshots__/ActionMenu.test.tsx.snap | 2 +- 8 files changed, 62 insertions(+), 62 deletions(-) diff --git a/src/NavList/__snapshots__/NavList.test.tsx.snap b/src/NavList/__snapshots__/NavList.test.tsx.snap index fbbcd726f81..c9d6cf86b56 100644 --- a/src/NavList/__snapshots__/NavList.test.tsx.snap +++ b/src/NavList/__snapshots__/NavList.test.tsx.snap @@ -313,10 +313,10 @@ exports[`NavList renders a simple list 1`] = ` >
Home @@ -336,10 +336,10 @@ exports[`NavList renders a simple list 1`] = ` class="c1 c7" >
About @@ -359,10 +359,10 @@ exports[`NavList renders a simple list 1`] = ` class="c1 c7" >
Contact @@ -738,12 +738,12 @@ exports[`NavList renders with groups 1`] = ` >

Overview