[code-infra] Detect browser envs that don't support layout

eslint.config.mjs

@@ -278,6 +278,18 @@ export default defineConfig(
       'no-bitwise': 'off',
     },
   },
+  {
+    files: [`packages/*/src/**/*${EXTENSION_TS}`],
+    ignores: ['**/*.spec.*', '**/*.test.*', '**/mui-lab/**'],
+    rules: {
+      'mui/require-dev-wrapper': [
+        'error',
+        {
+          functionNames: ['warnOnce', 'warn', 'checkSlot', 'isLayoutSupported'],
+        },
+      ],
+    },
+  },
   {
     files: [`packages/*/src/**/*${EXTENSION_TS}`],
     ignores: ['**/*.d.ts', '**/*.spec.*', 'packages/mui-joy/**/*'],

packages/mui-docs/src/i18n/i18n.tsx

@@ -128,7 +128,9 @@ export function useTranslate(): Translate {
         const translation = getPath(wordings, key);
 
         if (!translation) {
-          warn(userLanguage, key, ignoreWarning);
+          if (process.env.NODE_ENV !== 'production') {
+            warn(userLanguage, key, ignoreWarning);
+          }
 
           const enTranslation = getPath(translations.en, key);
           return enTranslation ?? null;

packages/mui-material/src/Popover/Popover.js

@@ -11,6 +11,7 @@ import chainPropTypes from '@mui/utils/chainPropTypes';
 import isHostComponent from '@mui/utils/isHostComponent';
 import { styled } from '../zero-styled';
 import { useDefaultProps } from '../DefaultPropsProvider';
+import isLayoutSupported from '../utils/isLayoutSupported';
 import debounce from '../utils/debounce';
 import ownerDocument from '../utils/ownerDocument';
 import ownerWindow from '../utils/ownerWindow';
@@ -167,7 +168,7 @@ const Popover = React.forwardRef(function Popover(inProps, ref) {
       const box = anchorElement.getBoundingClientRect();
 
       if (
-        !globalThis.MUI_TEST_ENV &&
+        isLayoutSupported() &&
         box.top === 0 &&
         box.left === 0 &&
         box.right === 0 &&
@@ -479,21 +480,22 @@ Popover.propTypes /* remove-proptypes */ = {
       if (resolvedAnchorEl && resolvedAnchorEl.nodeType === 1) {
         const box = resolvedAnchorEl.getBoundingClientRect();
 
-        if (
-          process.env.NODE_ENV !== 'production' &&
-          !globalThis.MUI_TEST_ENV &&
-          box.top === 0 &&
-          box.left === 0 &&
-          box.right === 0 &&
-          box.bottom === 0
-        ) {
-          return new Error(
-            [
-              'MUI: The `anchorEl` prop provided to the component is invalid.',
-              'The anchor element should be part of the document layout.',
-              "Make sure the element is present in the document or that it's not display none.",
-            ].join('\n'),
-          );
+        if (process.env.NODE_ENV !== 'production') {
+          if (
+            isLayoutSupported() &&
+            box.top === 0 &&
+            box.left === 0 &&
+            box.right === 0 &&
+            box.bottom === 0
+          ) {
+            return new Error(
+              [
+                'MUI: The `anchorEl` prop provided to the component is invalid.',
+                'The anchor element should be part of the document layout.',
+                "Make sure the element is present in the document or that it's not display none.",
+              ].join('\n'),
+            );
+          }
         }
       } else {
         return new Error(

packages/mui-material/src/Popper/BasePopper.tsx

@@ -10,6 +10,7 @@ import { createPopper, Instance, Modifier, Placement, State, VirtualElement } fr
 import PropTypes from 'prop-types';
 import composeClasses from '@mui/utils/composeClasses';
 import useSlotProps from '@mui/utils/useSlotProps';
+import isLayoutSupported from '../utils/isLayoutSupported';
 import Portal from '../Portal';
 import { getPopperUtilityClass } from './popperClasses';
 import { WithOptionalOwnerState } from '../utils/types';
@@ -147,7 +148,7 @@ const PopperTooltip = React.forwardRef<HTMLDivElement, PopperTooltipProps>(funct
         const box = resolvedAnchorElement.getBoundingClientRect();
 
         if (
-          !(globalThis as any).MUI_TEST_ENV &&
+          isLayoutSupported() &&
           box.top === 0 &&
           box.left === 0 &&
           box.right === 0 &&
@@ -350,21 +351,22 @@ Popper.propTypes /* remove-proptypes */ = {
           resolvedAnchorEl.nodeType === 1
         ) {
           const box = resolvedAnchorEl.getBoundingClientRect();
-          if (
-            process.env.NODE_ENV !== 'production' &&
-            !(globalThis as any).MUI_TEST_ENV &&
-            box.top === 0 &&
-            box.left === 0 &&
-            box.right === 0 &&
-            box.bottom === 0
-          ) {
-            return new Error(
-              [
-                'MUI: The `anchorEl` prop provided to the component is invalid.',
-                'The anchor element should be part of the document layout.',
-                "Make sure the element is present in the document or that it's not display none.",
-              ].join('\n'),
-            );
+          if (process.env.NODE_ENV !== 'production') {
+            if (
+              isLayoutSupported() &&
+              box.top === 0 &&
+              box.left === 0 &&
+              box.right === 0 &&
+              box.bottom === 0
+            ) {
+              return new Error(
+                [
+                  'MUI: The `anchorEl` prop provided to the component is invalid.',
+                  'The anchor element should be part of the document layout.',
+                  "Make sure the element is present in the document or that it's not display none.",
+                ].join('\n'),
+              );
+            }
           }
         } else if (
           !resolvedAnchorEl ||

packages/mui-material/src/Slide/Slide.js

@@ -6,6 +6,7 @@ import chainPropTypes from '@mui/utils/chainPropTypes';
 import HTMLElementType from '@mui/utils/HTMLElementType';
 import elementAcceptingRef from '@mui/utils/elementAcceptingRef';
 import getReactElementRef from '@mui/utils/getReactElementRef';
+import isLayoutSupported from '../utils/isLayoutSupported';
 import debounce from '../utils/debounce';
 import useForkRef from '../utils/useForkRef';
 import { useTheme } from '../zero-styled';
@@ -300,21 +301,22 @@ Slide.propTypes /* remove-proptypes */ = {
       if (resolvedContainer && resolvedContainer.nodeType === 1) {
         const box = resolvedContainer.getBoundingClientRect();
 
-        if (
-          process.env.NODE_ENV !== 'production' &&
-          !globalThis.MUI_TEST_ENV &&
-          box.top === 0 &&
-          box.left === 0 &&
-          box.right === 0 &&
-          box.bottom === 0
-        ) {
-          return new Error(
-            [
-              'MUI: The `container` prop provided to the component is invalid.',
-              'The anchor element should be part of the document layout.',
-              "Make sure the element is present in the document or that it's not display none.",
-            ].join('\n'),
-          );
+        if (process.env.NODE_ENV !== 'production') {
+          if (
+            isLayoutSupported() &&
+            box.top === 0 &&
+            box.left === 0 &&
+            box.right === 0 &&
+            box.bottom === 0
+          ) {
+            return new Error(
+              [
+                'MUI: The `container` prop provided to the component is invalid.',
+                'The anchor element should be part of the document layout.',
+                "Make sure the element is present in the document or that it's not display none.",
+              ].join('\n'),
+            );
+          }
         }
       } else if (
         !resolvedContainer ||

packages/mui-material/src/Tabs/Tabs.js

@@ -19,6 +19,7 @@ import tabsClasses, { getTabsUtilityClass } from './tabsClasses';
 import ownerDocument from '../utils/ownerDocument';
 import ownerWindow from '../utils/ownerWindow';
 import getActiveElement from '../utils/getActiveElement';
+import isLayoutSupported from '../utils/isLayoutSupported';
 import useSlot from '../utils/useSlot';
 
 const nextItem = (list, item) => {
@@ -432,7 +433,7 @@ const Tabs = React.forwardRef(function Tabs(inProps, ref) {
 
         if (process.env.NODE_ENV !== 'production') {
           if (
-            !globalThis.MUI_TEST_ENV &&
+            isLayoutSupported() &&
             !warnedOnceTabPresent &&
             tabMeta &&
             tabMeta.width === 0 &&

packages/mui-material/src/utils/isLayoutSupported.ts

@@ -0,0 +1,8 @@
+export default function isLayoutSupported(): boolean {
+  return !(
+    /jsdom|HappyDOM/.test(window.navigator.userAgent) ||
+    // TODO(v9): Remove the test environment check
+    // eslint-disable-next-line mui/consistent-production-guard
+    process.env.NODE_ENV === 'test'
+  );
+}

test/setupVitest.ts

@@ -1,7 +1,3 @@
 import setupVitest from '@mui/internal-test-utils/setupVitest';
 
-if (navigator.userAgent.includes('jsdom')) {
-  (globalThis as any).MUI_TEST_ENV = true;
-}
-
 setupVitest({ emotion: true });