diff --git a/apps/site/eslint.config.js b/apps/site/eslint.config.js index c36005ae95d2a..6b40fcaa52dc5 100644 --- a/apps/site/eslint.config.js +++ b/apps/site/eslint.config.js @@ -1,7 +1,7 @@ import next from '@next/eslint-plugin-next'; import * as mdx from 'eslint-plugin-mdx'; import react from 'eslint-plugin-react'; -import * as hooks from 'eslint-plugin-react-hooks'; +import reactHooks from 'eslint-plugin-react-hooks'; import baseConfig from '../../eslint.config.js'; @@ -11,7 +11,7 @@ export default baseConfig.concat([ }, react.configs.flat['jsx-runtime'], - hooks.configs['recommended-latest'], + reactHooks.configs.flat['recommended-latest'], next.configs['core-web-vitals'], mdx.flatCodeBlocks, diff --git a/apps/site/hooks/react-client/useMediaQuery.ts b/apps/site/hooks/react-client/useMediaQuery.ts index 224dac5b88998..7e1e557b5bfa3 100644 --- a/apps/site/hooks/react-client/useMediaQuery.ts +++ b/apps/site/hooks/react-client/useMediaQuery.ts @@ -3,17 +3,22 @@ import { useState, useEffect } from 'react'; const useMediaQuery = (query: string) => { - const [matches, setMatches] = useState(false); + const [matches, setMatches] = useState(() => { + if (typeof window === 'undefined') { + return false; + } + + return window.matchMedia?.(query)?.matches ?? false; + }); useEffect(() => { - const { matches, addEventListener, removeEventListener } = - window.matchMedia?.(query) ?? { - matches: false, - addEventListener: () => {}, - removeEventListener: () => {}, - }; - - setMatches(matches); + const { addEventListener, removeEventListener } = window.matchMedia?.( + query + ) ?? { + matches: false, + addEventListener: () => {}, + removeEventListener: () => {}, + }; const handler = (event: MediaQueryListEvent) => setMatches(event.matches); diff --git a/apps/site/package.json b/apps/site/package.json index 3f34ccb6177ff..f37a4ea3b725a 100644 --- a/apps/site/package.json +++ b/apps/site/package.json @@ -93,7 +93,7 @@ "eslint-config-next": "16.0.7", "eslint-plugin-mdx": "~3.6.2", "eslint-plugin-react": "~7.37.5", - "eslint-plugin-react-hooks": "^5.2.0", + "eslint-plugin-react-hooks": "^7.0.1", "global-jsdom": "^27.0.0", "handlebars": "4.7.8", "jsdom": "^27.2.0", diff --git a/apps/site/providers/navigationStateProvider.tsx b/apps/site/providers/navigationStateProvider.tsx index 4691dc0e7e455..427b9ab8073ab 100644 --- a/apps/site/providers/navigationStateProvider.tsx +++ b/apps/site/providers/navigationStateProvider.tsx @@ -16,6 +16,7 @@ export const NavigationStateProvider: FC = ({ const navigationState = useRef({}); return ( + // eslint-disable-next-line react-hooks/refs {children} diff --git a/packages/ui-components/eslint.config.js b/packages/ui-components/eslint.config.js index 9801e8d3a3988..926668537fe9a 100644 --- a/packages/ui-components/eslint.config.js +++ b/packages/ui-components/eslint.config.js @@ -1,12 +1,12 @@ import react from 'eslint-plugin-react'; -import * as hooks from 'eslint-plugin-react-hooks'; +import reactHooks from 'eslint-plugin-react-hooks'; import storybook from 'eslint-plugin-storybook'; import baseConfig from '../../eslint.config.js'; export default baseConfig.concat([ react.configs.flat['jsx-runtime'], - hooks.configs['recommended-latest'], + reactHooks.configs.flat['recommended-latest'], ...storybook.configs['flat/recommended'], // Type-checking diff --git a/packages/ui-components/package.json b/packages/ui-components/package.json index ed8344d413470..5005dab2fd0a7 100644 --- a/packages/ui-components/package.json +++ b/packages/ui-components/package.json @@ -64,7 +64,7 @@ "cross-env": "catalog:", "css-loader": "~7.1.2", "eslint-plugin-react": "~7.37.5", - "eslint-plugin-react-hooks": "^5.2.0", + "eslint-plugin-react-hooks": "^7.0.1", "eslint-plugin-storybook": "~10.0.2", "global-jsdom": "^27.0.0", "postcss-cli": "^11.0.1", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 7203d57b8b18b..4b0cf3f37cbf8 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -260,8 +260,8 @@ importers: specifier: ~7.37.5 version: 7.37.5(eslint@9.36.0(jiti@2.6.1)) eslint-plugin-react-hooks: - specifier: ^5.2.0 - version: 5.2.0(eslint@9.36.0(jiti@2.6.1)) + specifier: ^7.0.1 + version: 7.0.1(eslint@9.36.0(jiti@2.6.1)) global-jsdom: specifier: ^27.0.0 version: 27.0.0(jsdom@27.2.0) @@ -548,8 +548,8 @@ importers: specifier: ~7.37.5 version: 7.37.5(eslint@9.36.0(jiti@2.6.1)) eslint-plugin-react-hooks: - specifier: ^5.2.0 - version: 5.2.0(eslint@9.36.0(jiti@2.6.1)) + specifier: ^7.0.1 + version: 7.0.1(eslint@9.36.0(jiti@2.6.1)) eslint-plugin-storybook: specifier: ~10.0.2 version: 10.0.7(eslint@9.36.0(jiti@2.6.1))(storybook@10.1.4(@testing-library/dom@10.4.0)(prettier@3.6.2)(react-dom@19.2.1(react@19.2.1))(react@19.2.1))(typescript@5.8.3) @@ -5203,12 +5203,6 @@ packages: peerDependencies: eslint: '>=8.0.0' - eslint-plugin-react-hooks@5.2.0: - resolution: {integrity: sha512-+f15FfK64YQwZdJNELETdn5ibXEUQmW1DZL6KXhNnc2heoy/sg9VJJeT7n8TlMWouzWqSWavFkIhHyIbIAEapg==} - engines: {node: '>=10'} - peerDependencies: - eslint: ^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0-0 || ^9.0.0 - eslint-plugin-react-hooks@7.0.1: resolution: {integrity: sha512-O0d0m04evaNzEPoSW+59Mezf8Qt0InfgGIBJnpC0h3NH/WjUAR7BIKUfysC6todmtiZ/A0oUVS8Gce0WhBrHsA==} engines: {node: '>=18'} @@ -14492,10 +14486,6 @@ snapshots: - remark-lint-file-extension - supports-color - eslint-plugin-react-hooks@5.2.0(eslint@9.36.0(jiti@2.6.1)): - dependencies: - eslint: 9.36.0(jiti@2.6.1) - eslint-plugin-react-hooks@7.0.1(eslint@9.36.0(jiti@2.6.1)): dependencies: '@babel/core': 7.28.5