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

.eslintrc.js

@@ -475,7 +475,7 @@ module.exports = {
       rules: {
         'import/no-default-export': 'error',
         'import/prefer-default-export': 'off',
-        ...(ENABLE_REACT_COMPILER_PLUGIN ? { 'react-compiler/react-compiler': 'off' } : {}),
+        'react-compiler/react-compiler': 'off',
       },
     },
     {

docs/src/components/banner/AppFrameBanner.tsx

@@ -10,7 +10,8 @@ export default function AppFrameBanner() {
     return null;
   }
 
-  // eslint-disable-next-line react-hooks/rules-of-hooks
+  // TODO: uncomment once we enable eslint-plugin-react-compiler // eslint-disable-next-line react-compiler/react-compiler
+  // eslint-disable-next-line react-hooks/rules-of-hooks -- FEATURE_TOGGLE never changes
   const pageContext = React.useContext(PageContext);
   const productName = convertProductIdToName(pageContext) || 'MUI';
   const message = `Influence ${productName}'s 2024 roadmap! Participate in the latest Developer Survey`;

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(() => {
+    // TODO: uncomment once we enable eslint-plugin-react-compiler // 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 () => {
+      // TODO: uncomment once we enable eslint-plugin-react-compiler // 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 */
+    // TODO: uncomment once we enable eslint-plugin-react-compiler // 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
+    // TODO: uncomment once we enable eslint-plugin-react-compiler // 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(() => {