diff --git a/.eslintrc.js b/.eslintrc.js index fac28642c2..6a6ef95785 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -46,6 +46,7 @@ module.exports = { }, ], 'react/no-unescaped-entities': 'off', + 'react-compiler/react-compiler': 'error', 'react-hooks/exhaustive-deps': 'off', 'sort-vars': 'error', }, diff --git a/package.json b/package.json index 0b4a42ebd3..4ef36a326a 100644 --- a/package.json +++ b/package.json @@ -85,7 +85,7 @@ "css-loader": "^2.1.1", "esbuild": "^0.25.6", "eslint": "^7.1.0", - "eslint-plugin-react-compiler": "^19.0.0-beta-6fc168f-20241025", + "eslint-plugin-react-compiler": "^19.1.0-rc.2", "fork-ts-checker-webpack-plugin": "^4.0.3", "jest": "27.5.1", "jest-fetch-mock": "^3.0.3", diff --git a/packages/clay-charts/src/BillboardWrapper.tsx b/packages/clay-charts/src/BillboardWrapper.tsx index 34cee478ea..a5bc9f77e2 100644 --- a/packages/clay-charts/src/BillboardWrapper.tsx +++ b/packages/clay-charts/src/BillboardWrapper.tsx @@ -58,6 +58,7 @@ const BillboardWrapper = ({ } } + // eslint-disable-next-line react-compiler/react-compiler forwardRef.current = null; }; }, []); diff --git a/packages/clay-charts/src/GeoMap.tsx b/packages/clay-charts/src/GeoMap.tsx index 585d94519a..5eb65a0d21 100644 --- a/packages/clay-charts/src/GeoMap.tsx +++ b/packages/clay-charts/src/GeoMap.tsx @@ -243,6 +243,7 @@ const Geomap = ({ React.useEffect(() => { if (forwardRef) { + // eslint-disable-next-line react-compiler/react-compiler forwardRef.current = new GeomapBase({ ...otherProps, data, diff --git a/packages/clay-charts/src/index.tsx b/packages/clay-charts/src/index.tsx index 7c831fef76..79b9511e0b 100644 --- a/packages/clay-charts/src/index.tsx +++ b/packages/clay-charts/src/index.tsx @@ -47,16 +47,18 @@ const ClayChart = React.forwardRef( ({color, data, elementProps, grid, line, point, ...otherProps}, ref) => { const defaultRef = React.useRef(); + const renderData = {...data}; + let ChartComponent; switch (data.type as Types) { case 'geo-map': - delete data.type; + delete renderData.type; ChartComponent = GeoMap; break; case 'predictive': - delete data.type; + delete renderData.type; ChartComponent = Predictive; break; @@ -68,7 +70,7 @@ const ClayChart = React.forwardRef( ) => { if (children instanceof Function && items) { @@ -370,7 +372,7 @@ export function useCollection< [ performItemRender, publicApi, - virtualizer?.getVirtualItems().length, + virtualizerItems?.length, visibleKeys, itemIdKey, ] diff --git a/packages/clay-core/src/overlay-mask/OverlayMask.tsx b/packages/clay-core/src/overlay-mask/OverlayMask.tsx index 8abfbdc0e4..a2de50b174 100644 --- a/packages/clay-core/src/overlay-mask/OverlayMask.tsx +++ b/packages/clay-core/src/overlay-mask/OverlayMask.tsx @@ -205,6 +205,7 @@ export function OverlayMask({ if (typeof ref === 'function') { ref(node); } else if (ref !== null) { + // eslint-disable-next-line react-compiler/react-compiler (ref as React.MutableRefObject).current = node; } }, diff --git a/packages/clay-core/stories/TreeView.stories.tsx b/packages/clay-core/stories/TreeView.stories.tsx index 074b3f4735..67e941dfc1 100644 --- a/packages/clay-core/stories/TreeView.stories.tsx +++ b/packages/clay-core/stories/TreeView.stories.tsx @@ -647,8 +647,6 @@ export const PreSelectedItems = (args: any) => { // Just to avoid TypeScript error with required props const OptionalCheckbox = (props: any) => ; - OptionalCheckbox.displayName = 'ClayCheckbox'; - return ( { // Just to avoid TypeScript error with required props const OptionalCheckbox = (props: any) => ; - OptionalCheckbox.displayName = 'ClayCheckbox'; - return ( { // Just to avoid TypeScript error with required props const OptionalCheckbox = (props: any) => ; - OptionalCheckbox.displayName = 'ClayCheckbox'; - return ( { // Just to avoid TypeScript error with required props const OptionalCheckbox = (props: any) => ; - OptionalCheckbox.displayName = 'ClayCheckbox'; - return ( { // Just to avoid TypeScript error with required props const OptionalCheckbox = (props: any) => ; - OptionalCheckbox.displayName = 'ClayCheckbox'; - return ( { const OptionalCheckbox = (props: any) => ; - OptionalCheckbox.displayName = 'ClayCheckbox'; - const itemsFiltered = useMemo(() => { if (!value) { return items; @@ -1305,8 +1293,6 @@ export const PerformanceTest = () => { // Just to avoid TypeScript error with required props const OptionalCheckbox = (props: any) => ; - OptionalCheckbox.displayName = 'ClayCheckbox'; - const itemsFiltered = useMemo(() => { if (!value) { return items; @@ -1522,8 +1508,6 @@ export const DemoCategoriesMultiple = () => { // Just to avoid TypeScript error with required props const OptionalCheckbox = (props: any) => ; - OptionalCheckbox.displayName = 'ClayCheckbox'; - return ( { // Just to avoid TypeScript error with required props const OptionalCheckbox = (props: any) => ; - OptionalCheckbox.displayName = 'ClayCheckbox'; - const MAPPING_ICON = { article: 'web-content', documents: 'documents-and-media', diff --git a/packages/clay-drop-down/src/Items.tsx b/packages/clay-drop-down/src/Items.tsx index c95f79f23f..e41936de45 100644 --- a/packages/clay-drop-down/src/Items.tsx +++ b/packages/clay-drop-down/src/Items.tsx @@ -210,6 +210,7 @@ const Contextual = ({ }); const setThrottleVisible = useCallback( + // eslint-disable-next-line react-compiler/react-compiler throttle((value: boolean) => setVisible(value), 100), [] ); diff --git a/packages/clay-shared/src/FocusScope.tsx b/packages/clay-shared/src/FocusScope.tsx index 6cc37cd5ce..a68a73256c 100644 --- a/packages/clay-shared/src/FocusScope.tsx +++ b/packages/clay-shared/src/FocusScope.tsx @@ -114,6 +114,7 @@ export const FocusScope = ({ if (ref) { if (typeof ref === 'object') { + // eslint-disable-next-line react-compiler/react-compiler ref.current = r; } else if (typeof ref === 'function') { ref(r); diff --git a/packages/clay-shared/src/useFocusManagement.ts b/packages/clay-shared/src/useFocusManagement.ts index 6f8ff16ee7..c7f54921ec 100644 --- a/packages/clay-shared/src/useFocusManagement.ts +++ b/packages/clay-shared/src/useFocusManagement.ts @@ -329,6 +329,7 @@ export function useFocusManagement(scope: React.RefObject) { return { focusFirst: () => { + // eslint-disable-next-line react-compiler/react-compiler minimalTabIndex = -1; const next = moveFocusInScope(getFiber(scope), false, true); minimalTabIndex = 0; diff --git a/yarn.lock b/yarn.lock index 99d3c78591..fa086bb623 100644 --- a/yarn.lock +++ b/yarn.lock @@ -9005,15 +9005,15 @@ eslint-plugin-notice@0.9.10: lodash "^4.17.15" metric-lcs "^0.1.2" -eslint-plugin-react-compiler@^19.0.0-beta-6fc168f-20241025: - version "19.0.0-beta-6fc168f-20241025" - resolved "https://registry.yarnpkg.com/eslint-plugin-react-compiler/-/eslint-plugin-react-compiler-19.0.0-beta-6fc168f-20241025.tgz#dbd1f54b1019a437f09fc9547bea53f82e6026af" - integrity sha512-mHn5tYt9dT4GiXHF5muiz6p+4Lirgi0Oc87N2KrbB/ciSkT+VZ8iJA+6bbS4//ljYzYbxBbPMHWS/dZWhQrbpQ== +eslint-plugin-react-compiler@^19.1.0-rc.2: + version "19.1.0-rc.2" + resolved "https://registry.yarnpkg.com/eslint-plugin-react-compiler/-/eslint-plugin-react-compiler-19.1.0-rc.2.tgz#83343e7422e00fa61e729af8e8468f0ddec37925" + integrity sha512-oKalwDGcD+RX9mf3NEO4zOoUMeLvjSvcbbEOpquzmzqEEM2MQdp7/FY/Hx9NzmUwFzH1W9SKTz5fihfMldpEYw== dependencies: "@babel/core" "^7.24.4" "@babel/parser" "^7.24.4" "@babel/plugin-proposal-private-methods" "^7.18.6" - hermes-parser "^0.20.1" + hermes-parser "^0.25.1" zod "^3.22.4" zod-validation-error "^3.0.3" @@ -10880,17 +10880,17 @@ he@1.2.x, he@^1.2.0: resolved "https://registry.yarnpkg.com/he/-/he-1.2.0.tgz#84ae65fa7eafb165fddb61566ae14baf05664f0f" integrity sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw== -hermes-estree@0.20.1: - version "0.20.1" - resolved "https://registry.yarnpkg.com/hermes-estree/-/hermes-estree-0.20.1.tgz#0b9a544cf883a779a8e1444b915fa365bef7f72d" - integrity sha512-SQpZK4BzR48kuOg0v4pb3EAGNclzIlqMj3Opu/mu7bbAoFw6oig6cEt/RAi0zTFW/iW6Iz9X9ggGuZTAZ/yZHg== +hermes-estree@0.25.1: + version "0.25.1" + resolved "https://registry.yarnpkg.com/hermes-estree/-/hermes-estree-0.25.1.tgz#6aeec17d1983b4eabf69721f3aa3eb705b17f480" + integrity sha512-0wUoCcLp+5Ev5pDW2OriHC2MJCbwLwuRx+gAqMTOkGKJJiBCLjtrvy4PWUGn6MIVefecRpzoOZ/UV6iGdOr+Cw== -hermes-parser@^0.20.1: - version "0.20.1" - resolved "https://registry.yarnpkg.com/hermes-parser/-/hermes-parser-0.20.1.tgz#ad10597b99f718b91e283f81cbe636c50c3cff92" - integrity sha512-BL5P83cwCogI8D7rrDCgsFY0tdYUtmFP9XaXtl2IQjC+2Xo+4okjfXintlTxcIwl4qeGddEl28Z11kbVIw0aNA== +hermes-parser@^0.25.1: + version "0.25.1" + resolved "https://registry.yarnpkg.com/hermes-parser/-/hermes-parser-0.25.1.tgz#5be0e487b2090886c62bd8a11724cd766d5f54d1" + integrity sha512-6pEjquH3rqaI6cYAXYPcz9MS4rY6R4ngRgrgfDshRptUZIc3lw0MCIJIGDj9++mfySOuPTHB4nrSW99BCvOPIA== dependencies: - hermes-estree "0.20.1" + hermes-estree "0.25.1" highcharts@^9.2.2: version "9.3.0"