[docs-infra] Fix React Compiler ESLint issues in website components

docs/src/components/banner/AppFrameBanner.tsx

@@ -6,15 +6,14 @@ import PageContext from 'docs/src/modules/components/PageContext';
 import { convertProductIdToName } from 'docs/src/modules/components/AppSearch';
 
 export default function AppFrameBanner() {
-  if (!FEATURE_TOGGLE.enable_docsnav_banner) {
-    return null;
-  }
-
-  // eslint-disable-next-line react-hooks/rules-of-hooks
   const pageContext = React.useContext(PageContext);
   const productName = convertProductIdToName(pageContext) || 'MUI';
   const message = `Influence ${productName}'s 2024 roadmap! Participate in the latest Developer Survey`;
 
+  if (!FEATURE_TOGGLE.enable_docsnav_banner) {
+    return null;
+  }
+
   if (process.env.NODE_ENV !== 'production') {
     if (message.length > 100) {
       throw new Error(

docs/src/components/productMaterial/MaterialStyling.tsx

@@ -101,7 +101,10 @@ export const useResizeHandle = (
       if (target.current && dragging && clientX) {
         const objectRect = target.current.getBoundingClientRect();
         const newWidth = clientX - objectRect.left + dragOffset;
-        target.current.style.width = `clamp(${minWidth}, ${Math.floor(newWidth)}px, ${maxWidth})`;
+        target.current.style.setProperty(
+          'width',
+          `clamp(${minWidth}, ${Math.floor(newWidth)}px, ${maxWidth})`,
+        );
       }
     }
     function stopResize() {
@@ -148,7 +151,7 @@ export default function MaterialStyling() {
     // 1px border-width
     infoRef.current!.scroll({ top: scrollTo[index] * 18 + 16 - 1, behavior: 'smooth' });
 
-    objectRef.current!.style.width = '100%';
+    objectRef.current!.style.setProperty('width', '100%');
   }, [index]);
 
   return (

docs/src/components/productX/XHero.tsx

@@ -78,11 +78,10 @@ export default function XHero() {
     [],
   );
 
-  let rowGroupingCounter = 0;
+  const rowGroupingCounterRef = React.useRef(0);
   const isGroupExpandedByDefault = React.useCallback(() => {
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    rowGroupingCounter += 1;
-    return rowGroupingCounter === 3;
+    rowGroupingCounterRef.current += 1;
+    return rowGroupingCounterRef.current === 3;
   }, []);
 
   return (

docs/src/components/productX/XPlans.tsx

@@ -58,7 +58,13 @@ export default function XPlans2() {
         <Grid xs={12} md={6}>
           <Stack spacing={2} useFlexGap>
             {content.map(({ icon, title, description, link }) => (
-              <InfoCard title={title} icon={icon} description={description} link={link} />
+              <InfoCard
+                key={title}
+                title={title}
+                icon={icon}
+                description={description}
+                link={link}
+              />
             ))}
           </Stack>
         </Grid>

docs/src/modules/components/ApiPage/sections/ToggleDisplayOption.tsx

@@ -42,6 +42,7 @@ export function useApiPageOption(
   const [option, setOption] = React.useState(getOption(storageKey, defaultValue));
 
   useEnhancedEffect(() => {
+    // eslint-disable-next-line react-compiler/react-compiler -- useEnhancedEffect uses useEffect under the hood
     neverHydrated = false;
     const newOption = getOption(storageKey, defaultValue);
     setOption(newOption);

docs/src/modules/components/AppNavDrawer.js

@@ -166,6 +166,7 @@ function PersistScroll(props) {
     }
 
     return () => {
+      // eslint-disable-next-line react-compiler/react-compiler -- useEnhancedEffect uses useEffect under the hood
       savedScrollTop[slot] = scrollContainer.scrollTop;
     };
   }, [enabled, slot]);

docs/src/modules/components/DemoSandbox.js

@@ -25,7 +25,7 @@ function FramedDemo(props) {
 
   const theme = useTheme();
   React.useEffect(() => {
-    document.body.dir = theme.direction;
+    document.body.setAttribute('dir', theme.direction);
   }, [document, theme.direction]);
 
   const { jss, sheetsManager } = React.useMemo(() => {

docs/src/modules/components/DemoToolbar.js

@@ -375,6 +375,7 @@ export default function DemoToolbar(props) {
   const devMenuItems = [];
   if (process.env.DEPLOY_ENV === 'staging' || process.env.DEPLOY_ENV === 'pull-request') {
     /* eslint-disable material-ui/no-hardcoded-labels -- staging only */
+    // eslint-disable-next-line react-compiler/react-compiler -- valid reason to disable rules of hooks
     // eslint-disable-next-line react-hooks/rules-of-hooks -- process.env never changes
     const router = useRouter();
 

docs/src/modules/components/ReactRunner.tsx

@@ -17,7 +17,8 @@ export default function ReactRunner(props: ReactRunnerProps) {
   let scope = scopeProp;
 
   if (process.env.NODE_ENV !== 'production') {
-    // eslint-disable-next-line react-hooks/rules-of-hooks
+    // eslint-disable-next-line react-compiler/react-compiler -- valid reason to disable the rules of hooks
+    // eslint-disable-next-line react-hooks/rules-of-hooks -- process.env never changes
     scope = React.useMemo(() => {
       const handler = {
         get() {

docs/src/modules/components/ThemeContext.js

@@ -191,7 +191,7 @@ export function ThemeProvider(props) {
   }, [calculatedMode]);
 
   useEnhancedEffect(() => {
-    document.body.dir = direction;
+    document.body.setAttribute('dir', direction);
   }, [direction]);
 
   useEnhancedEffect(() => {