feat: improve React Compiler compatibility

.storybook/components/ArgTypesWithNote.tsx

@@ -1,9 +1,9 @@
 import { DomRefTable } from '@sb/components/DomRefTable.js';
 import { ArgTypes, type Controls } from '@storybook/addon-docs/blocks';
 import MessageStripDesign from '@ui5/webcomponents/dist/types/MessageStripDesign.js';
-import { MessageStrip } from '@ui5/webcomponents-react';
 import type { ComponentProps, ReactNode } from 'react';
 import classes from './ArgTypesWithNote.module.css';
+import { MessageStrip } from '@ui5/webcomponents-react';
 
 interface ArgTypesWithNotePropTypes {
   hideHTMLPropsNote?: boolean;

.storybook/components/CommandsAndQueries.tsx

@@ -1,7 +1,7 @@
 import { Heading, Markdown } from '@storybook/addon-docs/blocks';
-import { Tag as WCRTag } from '@ui5/webcomponents-react';
 import dedent from 'dedent';
 import { Fragment } from 'react';
+import { Tag as WCRTag } from '@ui5/webcomponents-react';
 
 // Note: these types may be incomplete or faulty. If an error is thrown, first check if the interfaces have to be extended.
 interface TextNode {

.storybook/components/ControlsWithNote.tsx

@@ -1,9 +1,9 @@
 import { Controls } from '@storybook/addon-docs/blocks';
 import MessageStripDesign from '@ui5/webcomponents/dist/types/MessageStripDesign.js';
-import { MessageStrip } from '@ui5/webcomponents-react';
 import type { ComponentProps, ReactNode } from 'react';
 import classes from './ControlsWithNote.module.css';
 import { DomRefTable } from './DomRefTable';
+import { MessageStrip } from '@ui5/webcomponents-react';
 
 interface ControlsWithNotePropTypes {
   hideHTMLPropsNote?: boolean;

.storybook/components/DocsHeader.tsx

@@ -4,6 +4,14 @@ import { Description, Subtitle, Title, useOf } from '@storybook/addon-docs/block
 import ButtonDesign from '@ui5/webcomponents/dist/types/ButtonDesign.js';
 import MessageStripDesign from '@ui5/webcomponents/dist/types/MessageStripDesign.js';
 import copyIcon from '@ui5/webcomponents-icons/dist/copy.js';
+import { clsx } from 'clsx';
+import type { ComponentProps } from 'react';
+import { Fragment } from 'react';
+import { useGetSubComponentsOfModule } from '../utils';
+import classes from './DocsHeader.module.css';
+import { GitHubLogo } from './GitHub-Mark';
+import { Import } from './Import';
+import { TableOfContent } from './TableOfContent';
 import {
   Button,
   FlexBox,
@@ -14,14 +22,6 @@ import {
   Text,
   ThemeProvider,
 } from '@ui5/webcomponents-react';
-import { clsx } from 'clsx';
-import type { ComponentProps } from 'react';
-import { Fragment } from 'react';
-import { useGetSubComponentsOfModule } from '../utils';
-import classes from './DocsHeader.module.css';
-import { GitHubLogo } from './GitHub-Mark';
-import { Import } from './Import';
-import { TableOfContent } from './TableOfContent';
 
 const Links = ({ isChart }: { isChart?: boolean }) => {
   const githubUrl = `https://github.com/UI5/webcomponents-react`;

.storybook/components/DomRefTable.tsx

@@ -1,13 +1,13 @@
 import type { Controls } from '@storybook/addon-docs/blocks';
 import { Heading, Subheading, useOf } from '@storybook/addon-docs/blocks';
 import TagDesign from '@ui5/webcomponents/dist/types/TagDesign.js';
-import { Tag, Link, MessageStrip, Popover } from '@ui5/webcomponents-react';
 import type * as CEM from '@ui5/webcomponents-tools/lib/cem/types';
 import type { ComponentProps, ReactNode } from 'react';
 import { Fragment, useRef } from 'react';
 import { createPortal } from 'react-dom';
 import { useGetCem } from '../utils.js';
 import classes from './DomRefTable.module.css';
+import { Tag, Link, MessageStrip, Popover } from '@ui5/webcomponents-react';
 
 export function CodeBlock(props: { children: ReactNode }) {
   return (

.storybook/components/FilterBarExample.tsx

@@ -1,4 +1,6 @@
 import TitleLevel from '@ui5/webcomponents/dist/types/TitleLevel.js';
+import { useReducer, useRef, useState } from 'react';
+import classes from './FilterBarExample.module.css';
 import type { FilterBarPropTypes } from '@ui5/webcomponents-react';
 import {
   DatePicker,
@@ -17,8 +19,6 @@ import {
   ThemeProvider,
   Title,
 } from '@ui5/webcomponents-react';
-import { useReducer, useRef, useState } from 'react';
-import classes from './FilterBarExample.module.css';
 
 const initialState = {
   age: 37,

.storybook/components/Footer.tsx

@@ -1,7 +1,12 @@
 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 type { CommonProps } from '@ui5/webcomponents-react-base';
+import { clsx } from 'clsx';
+import { useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+import BestRunLogo from '../../assets/SAP_Best_R_grad_blk_scrn.png';
+import classes from './Footer.module.css';
 import {
   Button,
   FlexBox,
@@ -13,12 +18,7 @@ import {
   Popover,
   Text,
 } from '@ui5/webcomponents-react';
-import type { CommonProps } from '@ui5/webcomponents-react-base';
-import { clsx } from 'clsx';
-import { useRef, useState } from 'react';
-import { createPortal } from 'react-dom';
-import BestRunLogo from '../../assets/SAP_Best_R_grad_blk_scrn.png';
-import classes from './Footer.module.css';
+import type { ButtonPropTypes, PopoverDomRef } from '@ui5/webcomponents-react';
 
 export const Footer = (props: CommonProps) => {
   const { className } = props;

.storybook/components/ProductsTable.tsx

@@ -1,3 +1,4 @@
+import { ProductCollection } from './products.json';
 import {
   FlexBox,
   FlexBoxDirection,
@@ -9,7 +10,6 @@ import {
   TableRow,
   Text,
 } from '@ui5/webcomponents-react';
-import { ProductCollection } from './products.json';
 
 export const ProductsTable = () => {
   return (

.storybook/components/ProjectTemplate.tsx

@@ -1,6 +1,12 @@
 import TsLogo from '@sb/images/logo-ts.png';
 import LinkDesign from '@ui5/webcomponents/dist/types/LinkDesign.js';
 import MessageStripDesign from '@ui5/webcomponents/dist/types/MessageStripDesign.js';
+// eslint-disable-next-line import/order
+import { addCustomCSSWithScoping } from '@ui5/webcomponents-react-base/internal/utils';
+import { clsx } from 'clsx';
+import type { ReactNode } from 'react';
+import { useId, useState } from 'react';
+import classes from './ProjectTemplate.module.css';
 import {
   Avatar,
   Card,
@@ -12,12 +18,6 @@ import {
   Text,
   ThemeProvider,
 } from '@ui5/webcomponents-react';
-// eslint-disable-next-line import/order
-import { addCustomCSSWithScoping } from '@ui5/webcomponents-react-base/internal/utils';
-import { clsx } from 'clsx';
-import type { ReactNode } from 'react';
-import { useRef, useState } from 'react';
-import classes from './ProjectTemplate.module.css';
 
 interface ProjectTemplatePropTypes {
   title: string;
@@ -58,7 +58,7 @@ export function ProjectTemplate(props: ProjectTemplatePropTypes) {
     note,
   } = props;
   const [popoverOpen, setPopoverOpen] = useState(false);
-  const linkRef = useRef(null);
+  const linkId = useId() + '-link';
 
   return (
     <ThemeProvider>
@@ -68,7 +68,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);
@@ -79,7 +79,7 @@ export function ProjectTemplate(props: ProjectTemplatePropTypes) {
             </MessageStrip>
             <Popover
               className={classes.popover}
-              opener={linkRef.current}
+              opener={linkId}
               open={popoverOpen}
               onClose={() => {
                 setPopoverOpen(false);

.storybook/components/SplitterElementContent.tsx

@@ -1,5 +1,5 @@
-import { FlexBox, Text } from '@ui5/webcomponents-react';
 import type { CSSProperties } from 'react';
+import { FlexBox, Text } from '@ui5/webcomponents-react';
 
 export const SplitterElementContent = ({
   text,

.storybook/components/StoryCarousel.tsx

@@ -1,7 +1,7 @@
-import type { CarouselDomRef, CarouselPropTypes } from '@ui5/webcomponents-react';
-import { Carousel } from '@ui5/webcomponents-react';
 import type { ReactNode } from 'react';
 import { useEffect, useRef } from 'react';
+import type { CarouselDomRef, CarouselPropTypes } from '@ui5/webcomponents-react';
+import { Carousel } from '@ui5/webcomponents-react';
 
 export function StoryCarousel(props: Omit<CarouselPropTypes, 'children'> & { children: ReactNode[] }) {
   const { children } = props;

.storybook/components/VersionTable.tsx

@@ -1,9 +1,9 @@
 import iconArrowDown from '@ui5/webcomponents-icons/dist/slim-arrow-down.js';
 import iconArrowRight from '@ui5/webcomponents-icons/dist/slim-arrow-right.js';
-import { Button, MessageStrip, Link } from '@ui5/webcomponents-react';
 import { ThemingParameters } from '@ui5/webcomponents-react-base';
 import { Fragment, useState } from 'react';
 import versionInfo from '../../config/version-info.json';
+import { Button, MessageStrip, Link } from '@ui5/webcomponents-react';
 
 const allWCRVersions: string[] = Object.values(versionInfo);
 

.storybook/preview.tsx

@@ -5,12 +5,12 @@ import type { Preview } from '@storybook/react-vite';
 import { setLanguage } from '@ui5/webcomponents-base/dist/config/Language.js';
 import { setTheme } from '@ui5/webcomponents-base/dist/config/Theme.js';
 import applyDirection from '@ui5/webcomponents-base/dist/locale/applyDirection.js';
-import { ContentDensity, Modals, ThemeProvider } from '@ui5/webcomponents-react';
 import { StrictMode, useEffect } from 'react';
 import 'tocbot/dist/tocbot.css';
 import '../packages/main/dist/Assets.js';
 import languages from './components/languageCodes.json';
 import { MAPPED_THEMES } from './utils';
+import { ContentDensity, Modals, ThemeProvider } from '@ui5/webcomponents-react';
 
 const argTypesCategoryCommonProps = {
   table: { category: 'Common props' },

.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

@@ -1,8 +1,8 @@
-import type { ThemeProviderPropTypes } from '@ui5/webcomponents-react';
-import { ThemeProvider } from '@ui5/webcomponents-react';
 import type { MountOptions, MountReturn } from 'cypress/react';
 import { mount } from 'cypress/react';
 import type { ReactNode } from 'react';
+import { ThemeProvider } from '@ui5/webcomponents-react';
+import type { ThemeProviderPropTypes } from '@ui5/webcomponents-react';
 
 declare global {
   namespace Cypress {

docs/UXCIntegration.tsx

@@ -1,7 +1,7 @@
-import { MessageStrip, ThemeProvider } from '@ui5/webcomponents-react';
 import UXCIntegrationApp from '../patterns/navigation-layout/src/App.js';
 import '../patterns/navigation-layout/src/index.css';
 import { EmbeddedStackBlitz } from '@/docs/EmbeddedStackBlitz.js';
+import { MessageStrip, ThemeProvider } from '@ui5/webcomponents-react';
 
 function UXCIntegration() {
   return (

docs/knowledgeBaseExamples/ThemeableThemingParameters.tsx

@@ -1,9 +1,9 @@
 import { getTheme, setTheme } from '@ui5/webcomponents-base/dist/config/Theme.js';
-import { FlexBox, FlexBoxDirection, Label, Option, Panel, Select, Text, ThemeProvider } from '@ui5/webcomponents-react';
 import { ThemingParameters } from '@ui5/webcomponents-react-base';
 import { useEffect, useReducer, useState } from 'react';
 import type { CSSProperties } from 'react';
 import { MAPPED_THEMES } from '../../.storybook/utils';
+import { FlexBox, FlexBoxDirection, Label, Option, Panel, Select, Text, ThemeProvider } from '@ui5/webcomponents-react';
 
 const containerStyles = {
   display: 'grid',

docs/knowledgeBaseExamples/formExamples.tsx

@@ -1,5 +1,6 @@
 import ButtonType from '@ui5/webcomponents/dist/types/ButtonType.js';
 import InputType from '@ui5/webcomponents/dist/types/InputType.js';
+import { useState } from 'react';
 import {
   ThemeProvider,
   Form,
@@ -14,7 +15,6 @@ import {
   DatePicker,
   Label,
 } from '@ui5/webcomponents-react';
-import { useState } from 'react';
 
 export function RegisterForm() {
   const [email, setEmail] = useState('');

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: {
@@ -96,12 +96,15 @@ const config = tseslint.config(
       'import/order': [
         'error',
         {
-          'newlines-between': 'never',
-
-          alphabetize: {
-            order: 'asc',
-            caseInsensitive: true,
-          },
+          groups: ['builtin', 'external', 'parent', 'sibling', 'index'],
+          pathGroups: [
+            {
+              pattern: '@ui5/webcomponents-react**',
+              group: 'internal',
+              position: 'after',
+            },
+          ],
+          alphabetize: { order: 'asc' },
         },
       ],
 

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": "16.5.0",
     "typescript": "5.8.3",
     "typescript-eslint": "8.50.0",