chore(deps): update to latest compiler plugins

eslint.config.mjs

@@ -9,7 +9,6 @@ import {defineConfig, globalIgnores} from 'eslint/config'
 import githubPlugin from 'eslint-plugin-github'
 import storybook from 'eslint-plugin-storybook'
 import react from 'eslint-plugin-react'
-import reactCompiler from 'eslint-plugin-react-compiler'
 import reactHooks from 'eslint-plugin-react-hooks'
 import playwright from 'eslint-plugin-playwright'
 import prettierRecommended from 'eslint-plugin-prettier/recommended'
@@ -61,8 +60,7 @@ const config = defineConfig([
 
   react.configs.flat.recommended,
   react.configs.flat['jsx-runtime'],
-  reactCompiler.configs.recommended,
-  reactHooks.configs['recommended-latest'],
+  reactHooks.configs.flat['recommended-latest'],
 
   github.browser,
   github.recommended,

package.json

@@ -62,6 +62,7 @@
     "@vitest/browser": "^4.0.3",
     "@vitest/browser-playwright": "^4.0.3",
     "@vitest/eslint-plugin": "^1.3.24",
+    "babel-plugin-react-compiler": "^1.0.0",
     "eslint": "^9.35.0",
     "eslint-import-resolver-typescript": "3.7.0",
     "eslint-plugin-clsx": "^0.0.10",
@@ -72,8 +73,7 @@
     "eslint-plugin-prettier": "^5.5.4",
     "eslint-plugin-primer-react": "^8.2.0",
     "eslint-plugin-react": "^7.35.5",
-    "eslint-plugin-react-compiler": "^19.1.0-rc.2",
-    "eslint-plugin-react-hooks": "^5.2.0",
+    "eslint-plugin-react-hooks": "^7.0.1",
     "eslint-plugin-ssr-friendly": "1.3.0",
     "eslint-plugin-storybook": "^9.1.5",
     "eslint-plugin-testing-library": "^7.7.0",

packages/react/package.json

@@ -90,7 +90,7 @@
     "hsluv": "1.0.1",
     "lodash.isempty": "^4.4.0",
     "lodash.isobject": "^3.0.2",
-    "react-compiler-runtime": "^19.1.0-rc.2",
+    "react-compiler-runtime": "^1.0.0",
     "react-intersection-observer": "^9.16.0"
   },
   "devDependencies": {
@@ -141,7 +141,7 @@
     "babel-plugin-dev-expression": "0.2.3",
     "babel-plugin-macros": "3.1.0",
     "babel-plugin-open-source": "1.3.4",
-    "babel-plugin-react-compiler": "^19.1.0-rc.3",
+    "babel-plugin-react-compiler": "^1.0.0",
     "babel-plugin-transform-replace-expressions": "0.2.0",
     "babel-polyfill": "6.26.0",
     "chalk": "^5.4.1",

packages/react/script/react-compiler.mjs

@@ -23,6 +23,7 @@ const unsupported = new Set(
     'src/SelectPanel/**/*.tsx',
     'src/SideNav.tsx',
     'src/internal/components/CheckboxOrRadioGroup/**/*.tsx',
+    'src/TooltipV2/**/*.tsx',
   ].flatMap(pattern => {
     if (glob.isDynamicPattern(pattern)) {
       const matches = glob.sync(pattern, {cwd: PACKAGE_DIR})

packages/react/src/ActionList/ActionList.examples.stories.tsx

@@ -39,6 +39,7 @@ const NextJSLikeLink = forwardRef(
       ref,
       href,
     }
+    // eslint-disable-next-line react-hooks/refs
     return <>{React.isValidElement(child) ? React.cloneElement(child, childProps) : null}</>
   },
 )

packages/react/src/ActionList/ActionList.features.stories.tsx

@@ -674,10 +674,8 @@ export const ChildWithSideEffects = () => {
   const [selected, setSelected] = React.useState(true)
 
   const SideEffectDescription = () => {
-    // eslint-disable-next-line react-compiler/react-compiler
     const [seconds, setSeconds] = React.useState(0)
 
-    // eslint-disable-next-line react-compiler/react-compiler
     React.useEffect(() => {
       const fn = () => setSeconds(s => s + 1)
       const interval = window.setInterval(fn, 1000)

packages/react/src/ActionMenu/ActionMenu.examples.stories.tsx

@@ -195,6 +195,9 @@ export const ControlledMenu = () => {
 }
 
 export const ShortcutMenu = () => {
+  const [open, setOpen] = React.useState(false)
+  const triggerRef = React.useRef<HTMLButtonElement>(null)
+
   React.useEffect(() => {
     const onKeyDown = (event: KeyboardEvent) => {
       if (event.shiftKey && (event.key === 'c' || event.key === 'C')) {
@@ -205,9 +208,6 @@ export const ShortcutMenu = () => {
     return () => window.removeEventListener('keydown', onKeyDown)
   }, [])
 
-  const [open, setOpen] = React.useState(false)
-  const triggerRef = React.useRef<HTMLButtonElement>(null)
-
   return (
     <>
       <h1>Shortcut Menu</h1>
@@ -270,9 +270,7 @@ export const ContextMenu = () => {
       setOpen(true)
     }
 
-    // eslint-disable-next-line react-compiler/react-compiler
     const [open, setOpen] = React.useState(false)
-    // eslint-disable-next-line react-compiler/react-compiler
     const triggerRef = React.useRef<HTMLButtonElement>(null)
 
     return (

packages/react/src/ActionMenu/ActionMenu.tsx

@@ -120,7 +120,7 @@ const Menu: FCWithSlotMarker<React.PropsWithChildren<ActionMenuProps>> = ({
       // tooltip trigger
       const anchorChildren = child.props.children
       if (anchorChildren.type === MenuButton || isSlot(anchorChildren, MenuButton)) {
-        // eslint-disable-next-line react-compiler/react-compiler
+        // eslint-disable-next-line react-hooks/immutability
         renderAnchor = anchorProps => {
           // We need to attach the anchor props to the tooltip trigger (ActionMenu.Button's grandchild) not the tooltip itself.
           const triggerButton = React.cloneElement(

packages/react/src/Autocomplete/Autocomplete.features.stories.tsx

@@ -546,6 +546,7 @@ export const InADialog = () => {
   useEffect(() => {
     if (outerContainerRef.current instanceof HTMLElement) {
       registerPortalRoot(outerContainerRef.current, 'outerContainer')
+      // eslint-disable-next-line react-hooks/set-state-in-effect
       setMounted(true)
     }
   }, [isDialogOpen])

packages/react/src/Autocomplete/AutocompleteInput.tsx

@@ -153,7 +153,6 @@ const AutocompleteInput = React.forwardRef(
       }
 
       // calling this useEffect when `highlightRemainingText` changes breaks backspace functionality
-      // eslint-disable-next-line react-compiler/react-compiler
       // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [autocompleteSuggestion, inputValue, inputRef, isMenuDirectlyActivated])
 

packages/react/src/Autocomplete/AutocompleteMenu.tsx

@@ -288,7 +288,6 @@ function AutocompleteMenu<T extends AutocompleteItemProps>(props: AutocompleteMe
       },
       activeDescendantFocus: inputRef,
       onActiveDescendantChanged: (current, _previous, directlyActivated) => {
-        // eslint-disable-next-line react-compiler/react-compiler
         activeDescendantRef.current = current || null
         if (current) {
           const selectedItem = allItemsToRenderRef.current.find(item => {
@@ -326,6 +325,7 @@ function AutocompleteMenu<T extends AutocompleteItemProps>(props: AutocompleteMe
       itemIdSortResult.every((element, index) => element === sortedItemIds[index])
 
     if (showMenu === false && !sortResultMatchesState) {
+      // eslint-disable-next-line react-hooks/set-state-in-effect
       setSortedItemIds(itemIdSortResult)
     }
 

packages/react/src/Banner/Banner.tsx

@@ -119,7 +119,6 @@ export const Banner = React.forwardRef<HTMLElement, BannerProps>(function Banner
 
   if (__DEV__) {
     // This hook is called consistently depending on the environment
-    // eslint-disable-next-line react-compiler/react-compiler
     // eslint-disable-next-line react-hooks/rules-of-hooks
     useEffect(() => {
       if (title) {

packages/react/src/Breadcrumbs/Breadcrumbs.tsx

@@ -154,6 +154,7 @@ function Breadcrumbs({className, children, style, overflow = 'wrap', variant = '
       const iconButtonElement = element.querySelector('button[data-component="IconButton"]')
       if (iconButtonElement) {
         const measuredWidth = (iconButtonElement as HTMLElement).offsetWidth
+        // eslint-disable-next-line react-hooks/immutability
         setMenuButtonWidth(measuredWidth)
       }
     }

packages/react/src/Button/ButtonBase.tsx

@@ -62,7 +62,6 @@ const ButtonBase = forwardRef(({children, as: Component = 'button', ...props}, f
      * this is safe, and ensures the entire effect is kept out of prod builds
      * shaving precious bytes from the output, and avoiding mounting a noop effect
      */
-    // eslint-disable-next-line react-compiler/react-compiler
     // eslint-disable-next-line react-hooks/rules-of-hooks
     React.useEffect(() => {
       if (

packages/react/src/Checkbox/Checkbox.tsx

@@ -67,7 +67,6 @@ const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
 
     useLayoutEffect(() => {
       if (checkboxRef.current) {
-        // eslint-disable-next-line react-compiler/react-compiler
         checkboxRef.current.indeterminate = indeterminate || false
       }
     }, [indeterminate, checked, checkboxRef])

packages/react/src/Dialog/Dialog.tsx

@@ -250,7 +250,7 @@ const _Dialog = React.forwardRef<HTMLDivElement, React.PropsWithChildren<DialogP
   const autoFocusedFooterButtonRef = useRef<HTMLButtonElement>(null)
   for (const footerButton of footerButtons) {
     if (footerButton.autoFocus) {
-      // eslint-disable-next-line react-compiler/react-compiler
+      // eslint-disable-next-line react-hooks/immutability
       footerButton.ref = autoFocusedFooterButtonRef
     }
   }

packages/react/src/FilteredActionList/FilteredActionListLoaders.tsx

@@ -56,6 +56,7 @@ function LoadingSkeleton({rows = 10, ...props}: {rows: number}): JSX.Element {
         {Array.from({length: rows}, (_, i) => (
           <Stack key={i} direction="horizontal" gap="condensed" align="center">
             <SkeletonBox width="16px" height="16px" />
+            {/* eslint-disable-next-line react-hooks/purity */}
             <SkeletonBox height="10px" width={`${Math.random() * 60 + 20}%`} className={classes.LoadingSkeleton} />
           </Stack>
         ))}

packages/react/src/FilteredActionList/useAnnouncements.tsx

@@ -15,6 +15,7 @@ const useFirstRender = () => {
   useEffect(() => {
     firstRender.current = false
   }, [])
+  // eslint-disable-next-line react-hooks/refs
   return firstRender.current
 }
 

packages/react/src/Heading/Heading.tsx

@@ -23,7 +23,6 @@ const Heading = forwardRef(({as: Component = 'h2', className, variant, ...props}
      * this is safe, and ensures the entire effect is kept out of prod builds
      * shaving precious bytes from the output, and avoiding mounting a noop effect
      */
-    // eslint-disable-next-line react-compiler/react-compiler
     // eslint-disable-next-line react-hooks/rules-of-hooks
     useEffect(() => {
       if (innerRef.current && !(innerRef.current instanceof HTMLHeadingElement)) {