feat: improve React Compiler compatibility

.gitignore

@@ -1,4 +1,3 @@
-# Created by .ignore support plugin (hsz.mobi)
 node_modules
 *.iml
 yarn-error.log

.storybook/components/DocsHeader.tsx

@@ -95,7 +95,6 @@ export const InfoTable = ({
               <Button
                 design={ButtonDesign.Transparent}
                 className={clsx('ui5-content-density-compact', classes.copyBtn)}
-                // eslint-disable-next-line @typescript-eslint/no-misused-promises
                 onClick={handleCopy}
                 icon={copyIcon}
                 tooltip="copy"
@@ -153,7 +152,6 @@ export const InfoTable = ({
                 <Button
                   design={ButtonDesign.Transparent}
                   className={clsx('ui5-content-density-compact', classes.copyBtn)}
-                  // eslint-disable-next-line @typescript-eslint/no-misused-promises
                   onClick={handleCopy}
                   icon={copyIcon}
                   tooltip="copy"

.storybook/components/Footer.tsx

@@ -1,7 +1,6 @@
 import ButtonDesign from '@ui5/webcomponents/dist/types/ButtonDesign.js';
 import PopoverPlacement from '@ui5/webcomponents/dist/types/PopoverPlacement.js';
 import WrappingType from '@ui5/webcomponents/dist/types/WrappingType.js';
-import type { ButtonPropTypes, PopoverDomRef } from '@ui5/webcomponents-react';
 import {
   Button,
   FlexBox,
@@ -13,6 +12,7 @@ import {
   Popover,
   Text,
 } from '@ui5/webcomponents-react';
+import type { ButtonPropTypes, PopoverDomRef } from '@ui5/webcomponents-react';
 import type { CommonProps } from '@ui5/webcomponents-react-base';
 import { clsx } from 'clsx';
 import { useRef, useState } from 'react';

.storybook/components/ProjectTemplate.tsx

@@ -15,7 +15,7 @@ import {
 import { addCustomCSSWithScoping } from '@ui5/webcomponents-react-base/internal/utils';
 import { clsx } from 'clsx';
 import type { ReactNode } from 'react';
-import { useRef, useState } from 'react';
+import { useId, useState } from 'react';
 import classes from './ProjectTemplate.module.css';
 
 interface ProjectTemplatePropTypes {
@@ -57,7 +57,7 @@ export function ProjectTemplate(props: ProjectTemplatePropTypes) {
     note,
   } = props;
   const [popoverOpen, setPopoverOpen] = useState(false);
-  const linkRef = useRef(null);
+  const linkId = useId() + '-link';
 
   return (
     <ThemeProvider>
@@ -67,7 +67,7 @@ export function ProjectTemplate(props: ProjectTemplatePropTypes) {
             <MessageStrip hideCloseButton design={MessageStripDesign.Critical} className={classes.unssupportedMessage}>
               Currently not supported by V2.{' '}
               <Link
-                ref={linkRef}
+                id={linkId}
                 accessibleRole="Button"
                 onClick={() => {
                   setPopoverOpen(true);
@@ -78,7 +78,7 @@ export function ProjectTemplate(props: ProjectTemplatePropTypes) {
             </MessageStrip>
             <Popover
               className={classes.popover}
-              opener={linkRef.current}
+              opener={linkId}
               open={popoverOpen}
               onClose={() => {
                 setPopoverOpen(false);

.storybook/utils.ts

@@ -165,6 +165,8 @@ export function useFakeStream(initialValue = '', typingDelay = 10, startingDelay
 
 export function useStopStreamByESC(loading: boolean, stopStream: () => void, onStop?: () => void) {
   const loadingRef = useRef(loading);
+  // Ref update during render doesn't trigger re-renders and is only read in event handler
+  // eslint-disable-next-line react-hooks/refs
   loadingRef.current = loading;
 
   useEffect(() => {

cypress/support/commands.tsx

@@ -40,16 +40,20 @@ declare global {
       /**
        * Asserts that the element never gains the given attribute.
        *
-       * __Note:__ An error is thrown if the attribute is not found, therefore it does not block the test if the subject
+       * __Note:__ An error is thrown if the attribute is found, therefore it does not block the test if the subject
        * never includes the given attribute.
        *
-       *
        * @param attributeName - The name of the attribute which must not appear.
-       * @param observerTime - How long (in ms) to watch for mutations (default: 500).
+       * @param options
+       * @param options.observerTime - How long (in ms) to watch for mutations (default: 500).
+       * @param options.delayed - How long (in ms) to wait before starting observation (default: 0).
        * @example
-       * cy.get('button').shouldNeverHaveAttribute('disabled', 1000);
+       * cy.get('button').shouldNeverHaveAttribute('disabled', { observerTime: 500, delayed: 100 });
        */
-      shouldNeverHaveAttribute(attributeName: string, observerTime?: number): Chainable<JQuery<HTMLElement>>;
+      shouldNeverHaveAttribute(
+        attributeName: string,
+        options?: { observerTime?: number; delayed?: number },
+      ): Chainable<JQuery<HTMLElement>>;
     }
   }
 }
@@ -80,35 +84,49 @@ Cypress.Commands.add(
   },
 );
 
-Cypress.Commands.add(
-  'shouldNeverHaveAttribute',
-  { prevSubject: 'element' },
-  (subject, attributeName, observerTime = 500) => {
-    cy.wrap(subject).then(($el) => {
-      const el = $el[0];
-      const observer = new MutationObserver((mutations) => {
-        for (const mutation of mutations) {
-          if (mutation.attributeName === attributeName) {
-            Cypress.log({
-              name: 'shouldNeverHaveAttribute',
-              message: `${attributeName} was found!`,
-              consoleProps: () => ({
-                attributeName,
-                element: el,
-              }),
-            });
+const activeObservers: MutationObserver[] = [];
 
-            observer.disconnect();
-            throw new Error(`${attributeName} was found!`);
-          }
-        }
-      });
+Cypress.Commands.add('shouldNeverHaveAttribute', { prevSubject: 'element' }, (subject, attributeName, options = {}) => {
+  const { observerTime = 500, delayed = 0 } = options;
+  // Disconnect all previous observers when a new assertion starts
+  while (activeObservers.length > 0) {
+    activeObservers.pop()?.disconnect();
+  }
+
+  cy.wait(delayed);
 
-      observer.observe(el, { attributes: true });
+  cy.wrap(subject).then(($el) => {
+    const el = $el[0];
+    const observer = new MutationObserver((mutations) => {
+      for (const mutation of mutations) {
+        if (mutation.attributeName === attributeName) {
+          Cypress.log({
+            name: 'shouldNeverHaveAttribute',
+            message: `${attributeName} was found!`,
+            consoleProps: () => ({
+              attributeName,
+              element: el,
+            }),
+          });
 
-      setTimeout(() => {
-        observer.disconnect();
-      }, observerTime);
+          observer.disconnect();
+          const index = activeObservers.indexOf(observer);
+          if (index > -1) {
+            activeObservers.splice(index, 1);
+          }
+          throw new Error(`${attributeName} was found!`);
+        }
+      }
     });
-  },
-);
+    observer.observe(el, { attributes: true });
+    activeObservers.push(observer);
+
+    setTimeout(() => {
+      observer.disconnect();
+      const index = activeObservers.indexOf(observer);
+      if (index > -1) {
+        activeObservers.splice(index, 1);
+      }
+    }, observerTime);
+  });
+});

eslint.config.mjs

@@ -48,7 +48,7 @@ const config = tseslint.config(
   reactPlugin.configs.flat.recommended, // This is not a plugin object, but a shareable config object
   reactPlugin.configs.flat['jsx-runtime'], // Add this if you are using React 17+
   // eslint-plugin-react-hooks
-  ...reactHooksPlugin.configs.recommended,
+  reactHooksPlugin.configs.flat.recommended,
   {
     languageOptions: {
       globals: {

examples/react-router-ts/package.json

@@ -32,7 +32,7 @@
     "eslint-plugin-import": "2.32.0",
     "eslint-plugin-jsx-a11y": "6.10.2",
     "eslint-plugin-react": "7.37.5",
-    "eslint-plugin-react-hooks": "6.1.1",
+    "eslint-plugin-react-hooks": "7.0.0",
     "globals": "17.3.0",
     "typescript": "5.8.3",
     "typescript-eslint": "8.54.0",

examples/vite-ts/eslint.config.mjs

@@ -1,25 +1,20 @@
 import js from '@eslint/js';
 import globals from 'globals';
-import reactHooks from 'eslint-plugin-react-hooks';
 import reactRefresh from 'eslint-plugin-react-refresh';
 import tseslint from 'typescript-eslint';
+import reactHooksPlugin from 'eslint-plugin-react-hooks';
 
-export default tseslint.config(
-  { ignores: ['dist'] },
-  {
-    extends: [js.configs.recommended, ...tseslint.configs.recommended],
-    files: ['**/*.{ts,tsx}'],
-    languageOptions: {
-      ecmaVersion: 2020,
-      globals: globals.browser,
-    },
-    plugins: {
-      'react-hooks': reactHooks,
-      'react-refresh': reactRefresh,
-    },
-    rules: {
-      ...reactHooks.configs.recommended.rules,
-      'react-refresh/only-export-components': ['warn', { allowConstantExport: true }],
-    },
+export default tseslint.config({ ignores: ['dist'] }, reactHooksPlugin.configs.flat.recommended, {
+  extends: [js.configs.recommended, ...tseslint.configs.recommended],
+  files: ['**/*.{ts,tsx}'],
+  languageOptions: {
+    ecmaVersion: 2020,
+    globals: globals.browser,
   },
-);
+  plugins: {
+    'react-refresh': reactRefresh,
+  },
+  rules: {
+    'react-refresh/only-export-components': ['warn', { allowConstantExport: true }],
+  },
+});

examples/vite-ts/package.json

@@ -30,7 +30,7 @@
     "@vitejs/plugin-react": "5.1.2",
     "cypress": "15.9.0",
     "eslint": "9.39.2",
-    "eslint-plugin-react-hooks": "6.1.1",
+    "eslint-plugin-react-hooks": "7.0.0",
     "eslint-plugin-react-refresh": "0.5.0",
     "globals": "17.3.0",
     "typescript-eslint": "8.54.0",

examples/vite-ts/src/AppShell.tsx

@@ -93,6 +93,9 @@ function AppShell() {
       <ResponsivePopover
         className={classes.popover}
         open={popoverOpen}
+        // The ResponsivePopover needs the ref to the ShellBarItem to position itself correctly.
+        // Since ShellBarItem is abstract and doesn't render a real DOM element, using an id is not efficient.
+        // eslint-disable-next-line react-hooks/refs
         opener={popoverOpenerRef.current}
         onClose={() => {
           setPopoverOpen(false);

package.json

@@ -81,7 +81,7 @@
     "eslint-plugin-no-only-tests": "3.3.0",
     "eslint-plugin-prettier": "5.5.5",
     "eslint-plugin-react": "7.37.5",
-    "eslint-plugin-react-hooks": "6.1.1",
+    "eslint-plugin-react-hooks": "7.0.1",
     "eslint-plugin-storybook": "10.2.3",
     "glob": "13.0.0",
     "globals": "17.3.0",

packages/base/src/internal/hooks/useSyncRef.ts

@@ -35,6 +35,8 @@ export function useSyncRef<RefType = never>(
           ref(node);
         }
         if ({}.hasOwnProperty.call(ref, 'current')) {
+          // React Refs are mutable
+          // eslint-disable-next-line react-hooks/immutability
           (ref as MutableRefObject<RefType>).current = node;
         }
       }

packages/base/src/internal/wrapper/withWebComponent.cy.tsx

@@ -202,6 +202,7 @@ describe('withWebComponent', () => {
           </Button>
           <Popover
             open={open}
+            // eslint-disable-next-line react-hooks/refs
             opener={btnRef.current}
             onClose={() => {
               setOpen(false);