@mui/internal-code-infra 0.0.1 → 0.0.2-canary.0

package/LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2019 Material-UI SAS
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,3 @@
+# @mui/internal-code-infra
+
+Build scripts and configs to be used across MUI repos.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/internal-code-infra",
-  "version": "0.0.1",
+  "version": "0.0.2-canary.0",
   "description": "Infra scripts and configs to be used across MUI repos.",
   "type": "module",
   "repository": {
@@ -12,42 +12,37 @@
   "exports": {
     "./package.json": "./package.json",
     "./prettier": {
-      "types": "./src/prettier.d.ts",
       "default": "./src/prettier.mjs"
     },
     "./eslint": {
-      "types": "./src/eslint/index.d.ts",
       "default": "./src/eslint/index.mjs"
-    },
-    "./eslint-docs": {
-      "types": "./src/eslint/docs.d.ts",
-      "default": "./src/eslint/docs.mjs"
     }
   },
   "dependencies": {
-    "emoji-regex": "^10.4.0",
-    "eslint-config-airbnb-base": "^15.0.0",
+    "@eslint/eslintrc": "^3.3.1",
     "eslint-config-airbnb": "^19.0.4",
+    "eslint-config-airbnb-base": "^15.0.0",
     "eslint-config-prettier": "^10.1.5",
-    "eslint-module-utils": "^2.12.0",
-    "eslint-plugin-import": "^2.31.0",
+    "eslint-import-resolver-typescript": "^4.4.3",
+    "eslint-module-utils": "^2.12.1",
+    "eslint-plugin-import": "^2.32.0",
     "eslint-plugin-jsx-a11y": "^6.10.2",
     "eslint-plugin-mocha": "^11.1.0",
     "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-compiler": "^19.1.0-rc.2",
-    "eslint-plugin-react-hooks": "^6.0.0",
-    "eslint-plugin-testing-library": "^7.3.0",
+    "eslint-plugin-react-hooks": "^6.0.0-rc.1",
+    "eslint-plugin-testing-library": "^7.5.3",
+    "@next/eslint-plugin-next": "^15.0.0",
     "globals": "^16.2.0",
-    "minimatch": "^10.0.1",
-    "typescript-eslint": "^8.33.1"
+    "minimatch": "^10.0.3",
+    "typescript-eslint": "^8.35.0"
   },
   "peerDependencies": {
-    "@next/eslint-plugin-next": "^14.0.0 || ^15.0.0",
     "eslint": "^9.0.0",
     "prettier": "^3.0.0"
   },
   "peerDependenciesMeta": {
-    "@next/eslint-plugin-next": {
+    "eslint": {
       "optional": true
     },
     "prettier": {
@@ -56,19 +51,27 @@
   },
   "devDependencies": {
     "@next/eslint-plugin-next": "^15.3.3",
-    "@typescript-eslint/parser": "^8.33.1",
-    "eslint": "^9.28.0",
+    "@types/eslint-plugin-jsx-a11y": "^6.10.0",
+    "@types/estree": "^1.0.8",
+    "@types/estree-jsx": "^1.0.5",
+    "@typescript-eslint/parser": "^8.35.0",
+    "@typescript-eslint/rule-tester": "^8.35.0",
+    "eslint": "^9.29.0",
     "prettier": "^3.5.3",
-    "typescript-eslint": "^8.33.1"
+    "typescript-eslint": "^8.35.0"
   },
   "files": [
+    "build",
     "src",
-    "package.json",
     "README.md",
-    "CHANGELOG.md",
     "LICENSE"
   ],
   "publishConfig": {
     "access": "public"
+  },
+  "gitSha": "8391aed9c1a47151a520e3bfea6db8c730fdadd3",
+  "scripts": {
+    "typescript": "tsc -p tsconfig.json",
+    "test": "pnpm -w test --project @mui/internal-code-infra"
   }
-}
+}

package/src/eslint/airbnb/base.mjs

@@ -0,0 +1,18 @@
+import { FlatCompat } from '@eslint/eslintrc';
+import * as tseslint from 'typescript-eslint';
+
+/**
+ * @param {Object} options - Configuration options.
+ * @param {string} [options.baseDirectory] - The base directory for the configuration.
+ * @returns {import('eslint').Linter.Config[]}
+ */
+export function createAirbnbConfig({ baseDirectory } = {}) {
+  if (!baseDirectory) {
+    throw new Error('"baseDirectory" option is required for Airbnb configuration.');
+  }
+  const compat = new FlatCompat({
+    baseDirectory,
+  });
+  const airbnbConfig = compat.extends('eslint-config-airbnb');
+  return /** @type {import('eslint').Linter.Config[]} */ (tseslint.config(airbnbConfig));
+}

package/src/eslint/airbnb/typescript.mjs

@@ -0,0 +1,126 @@
+/**
+ * Reassembles the ESLint Airbnb typescript configuration for usage with
+ * flat Eslint configuration.
+ */
+import baseBestPractices from 'eslint-config-airbnb-base/rules/best-practices';
+import baseEs6 from 'eslint-config-airbnb-base/rules/es6';
+import baseImports from 'eslint-config-airbnb-base/rules/imports';
+import baseStyle from 'eslint-config-airbnb-base/rules/style';
+import baseVariables from 'eslint-config-airbnb-base/rules/variables';
+import * as tseslint from 'typescript-eslint';
+
+const baseImportsRules = baseImports.rules;
+
+if (!Array.isArray(baseImportsRules?.['import/extensions'])) {
+  throw new Error(
+    'Expected `import/extensions` rule to be an array in `eslint-config-airbnb-base/rules/imports`',
+  );
+}
+
+export default /** @type {import('typescript-eslint').ConfigArray} */ (
+  tseslint.config(
+    {
+      settings: {
+        'import/parsers': {
+          '@typescript-eslint/parser': ['.ts', '.tsx', '.d.ts'],
+        },
+        'import/resolver': {
+          node: {
+            extensions: ['.mjs', '.js', '.jsx', '.json', '.ts', '.tsx', '.d.ts'],
+          },
+        },
+        // Append 'ts' extensions to Airbnb 'import/extensions' setting
+        // Original: ['.js', '.mjs', '.jsx']
+        'import/extensions': ['.js', '.mjs', '.jsx', '.ts', '.tsx', '.d.ts'],
+        // Resolve type definition packages
+        'import/external-module-folders': ['node_modules', 'node_modules/@types'],
+      },
+      rules: {
+        camelcase: 'off',
+        // The `@typescript-eslint/naming-convention` rule allows `leadingUnderscore` and `trailingUnderscore` settings. However, the existing `no-underscore-dangle` rule already takes care of this.
+        '@typescript-eslint/naming-convention': [
+          'error',
+          // Allow camelCase variables (23.2), PascalCase variables (23.8), and UPPER_CASE variables (23.10)
+          {
+            selector: 'variable',
+            format: ['camelCase', 'PascalCase', 'UPPER_CASE'],
+          },
+          // Allow camelCase functions (23.2), and PascalCase functions (23.8)
+          {
+            selector: 'function',
+            format: ['camelCase', 'PascalCase'],
+          },
+          // Airbnb recommends PascalCase for classes (23.3), and although Airbnb does not make TypeScript recommendations, we are assuming this rule would similarly apply to anything "type like", including interfaces, type aliases, and enums
+          {
+            selector: 'typeLike',
+            format: ['PascalCase'],
+          },
+        ],
+        'default-param-last': 'off',
+        '@typescript-eslint/default-param-last': baseBestPractices.rules?.['default-param-last'],
+        'no-array-constructor': 'off',
+        '@typescript-eslint/no-array-constructor': baseStyle.rules?.['no-array-constructor'],
+        'no-empty-function': 'off',
+        '@typescript-eslint/no-empty-function': baseBestPractices.rules?.['no-empty-function'],
+        'no-loss-of-precision': 'error',
+        'no-loop-func': 'off',
+        '@typescript-eslint/no-loop-func': baseBestPractices.rules?.['no-loop-func'],
+        'no-magic-numbers': 'off',
+        '@typescript-eslint/no-magic-numbers': baseBestPractices.rules?.['no-magic-numbers'],
+        'no-shadow': 'off',
+        '@typescript-eslint/no-shadow': baseVariables.rules?.['no-shadow'],
+        'no-unused-expressions': 'off',
+        '@typescript-eslint/no-unused-expressions':
+          baseBestPractices.rules?.['no-unused-expressions'],
+        'no-useless-constructor': 'off',
+        '@typescript-eslint/no-useless-constructor': baseEs6.rules?.['no-useless-constructor'],
+        'require-await': 'off',
+        '@typescript-eslint/require-await': baseBestPractices.rules?.['require-await'],
+
+        // Append 'ts' and 'tsx' to Airbnb 'import/extensions' rule
+        // https://github.com/benmosher/eslint-plugin-import/blob/master/docs/rules/extensions.md
+        'import/extensions': [
+          baseImportsRules['import/extensions'][0],
+          baseImportsRules['import/extensions'][1],
+          typeof baseImportsRules['import/extensions'][2] === 'object'
+            ? {
+                ...baseImportsRules['import/extensions'][2],
+                ts: 'never',
+                tsx: 'never',
+              }
+            : { ts: 'never', tsx: 'never' },
+        ],
+      },
+    },
+    {
+      files: ['**/*.ts', '**/*.tsx'],
+      rules: {
+        // The following rules are enabled in Airbnb config, but are already checked (more thoroughly) by the TypeScript compiler
+        // Some of the rules also fail in TypeScript files, for example: https://github.com/typescript-eslint/typescript-eslint/issues/662#issuecomment-507081586
+        // Rules are inspired by: https://github.com/typescript-eslint/typescript-eslint/blob/main/packages/eslint-plugin/src/configs/eslint-recommended.ts
+        'constructor-super': 'off',
+        'getter-return': 'off',
+        'no-const-assign': 'off',
+        'no-dupe-args': 'off',
+        'no-dupe-class-members': 'off',
+        'no-dupe-keys': 'off',
+        'no-func-assign': 'off',
+        'no-import-assign': 'off',
+        'no-new-symbol': 'off',
+        'no-obj-calls': 'off',
+        'no-redeclare': 'off',
+        'no-setter-return': 'off',
+        'no-this-before-super': 'off',
+        'no-undef': 'off',
+        'no-unreachable': 'off',
+        'no-unsafe-negation': 'off',
+        'valid-typeof': 'off',
+        // The following rules are enabled in Airbnb config, but are recommended to be disabled within TypeScript projects
+        // See: https://github.com/typescript-eslint/typescript-eslint/blob/13583e65f5973da2a7ae8384493c5e00014db51b/docs/linting/TROUBLESHOOTING.md#eslint-plugin-import
+        'import/named': 'off',
+        'import/no-named-as-default-member': 'off',
+        'import/no-unresolved': 'off',
+      },
+    },
+  )
+);

package/src/eslint/baseConfig.mjs

@@ -0,0 +1,67 @@
+import prettier from 'eslint-config-prettier/flat';
+import reactCompilerPlugin from 'eslint-plugin-react-compiler';
+import { configs as reactHookConfigs } from 'eslint-plugin-react-hooks';
+import globals from 'globals';
+import * as tseslint from 'typescript-eslint';
+
+import { createAirbnbConfig } from './airbnb/base.mjs';
+import airbnbTypescript from './airbnb/typescript.mjs';
+import { createCoreConfig } from './material-ui/config.mjs';
+import muiPlugin from './material-ui/index.mjs';
+/**
+ * @param {Object} [params]
+ * @param {boolean} [params.enableReactCompiler] - Whether the config is for spec files.
+ * @param {string} [params.baseDirectory] - The base directory for the configuration.
+ * @returns {import('eslint').Linter.Config[]}
+ */
+export function createBaseConfig({ enableReactCompiler = false, baseDirectory } = {}) {
+  return /** @type {import('eslint').Linter.Config[]} */ (
+    tseslint.config(
+      createAirbnbConfig({ baseDirectory }),
+      airbnbTypescript,
+      reactHookConfigs.recommended,
+      enableReactCompiler ? reactCompilerPlugin.configs.recommended : {},
+      prettier,
+      {
+        name: 'typescript-eslint-parser',
+        languageOptions: {
+          parser: tseslint.parser,
+          ecmaVersion: 7,
+          globals: {
+            ...globals.es2020,
+            ...globals.browser,
+            ...globals.node,
+          },
+        },
+        plugins: {
+          '@typescript-eslint': tseslint.plugin,
+          'material-ui': muiPlugin,
+        },
+        settings: {
+          'import/parsers': {
+            '@typescript-eslint/parser': ['.ts', '.tsx'],
+          },
+          'import/resolver': {
+            typescript: {
+              project: ['tsconfig.node.json', 'apps/*/tsconfig.json', 'packages/*/tsconfig.json'],
+            },
+          },
+        },
+        extends: createCoreConfig({ reactCompilerEnabled: enableReactCompiler }),
+      },
+      {
+        files: ['**/*.mjs'],
+        rules: {
+          'import/extensions': [
+            'error',
+            'ignorePackages',
+            {
+              js: 'always',
+              mjs: 'always',
+            },
+          ],
+        },
+      },
+    )
+  );
+}

package/src/eslint/docsConfig.mjs

@@ -0,0 +1,20 @@
+import nextjs from '@next/eslint-plugin-next';
+import * as tseslint from 'typescript-eslint';
+
+/**
+ * @returns {import('eslint').Linter.Config[]}
+ */
+export function createDocsConfig() {
+  return /** @type {import('eslint').Linter.Config[]} */ (
+    tseslint.config(nextjs.flatConfig.recommended, {
+      settings: {
+        next: {
+          rootDir: 'docs',
+        },
+      },
+      rules: {
+        'no-irregular-whitespace': ['error', { skipJSXText: true, skipStrings: true }],
+      },
+    })
+  );
+}

package/src/eslint/extensions.mjs

@@ -0,0 +1,5 @@
+export const EXTENSION_JS = '?(c|m)js?(x)';
+export const EXTENSION_TS = '?(c|m)[jt]s?(x)';
+export const EXTENSION_TS_ONLY = '?(c|m)ts?(x)';
+export const EXTENSION_DTS = `.d.${EXTENSION_TS_ONLY}`;
+export const EXTENSION_TEST_FILE = `.test.${EXTENSION_TS}`;

package/src/eslint/index.mjs

@@ -0,0 +1,7 @@
+/// <reference types="../estree-typescript" />
+/// <reference types="../untyped-plugins" />
+
+export * from './baseConfig.mjs';
+export * from './docsConfig.mjs';
+export * from './testConfig.mjs';
+export * from './extensions.mjs';

package/src/eslint/material-ui/config.mjs

@@ -0,0 +1,193 @@
+const restrictedMethods = ['setTimeout', 'setInterval', 'clearTimeout', 'clearInterval'];
+
+const restrictedSyntaxRules = restrictedMethods.map((method) => ({
+  message: `Use global ${method} instead of window.${method}.`,
+  selector: `MemberExpression[object.name='window'][property.name='${method}']`,
+}));
+
+/**
+ * @param {Object} [options]
+ * @param {boolean} [options.reactCompilerEnabled] - Whether the config is for spec files.
+ * @returns {import('typescript-eslint').InfiniteDepthConfigWithExtends[]}
+ */
+export function createCoreConfig(options = {}) {
+  return [
+    {
+      name: 'material-ui-base',
+      rules: {
+        'no-redeclare': 'off',
+        '@typescript-eslint/no-redeclare': 'error',
+        'consistent-this': ['error', 'self'],
+        curly: ['error', 'all'],
+        'dot-notation': 'error',
+        // Just as bad as "max components per file"
+        'max-classes-per-file': 'off',
+        // Too interruptive
+        'no-alert': 'error',
+        // Stylistic opinion
+        'arrow-body-style': 'off',
+        // Allow warn and error for dev environments
+        'no-console': ['error', { allow: ['warn', 'error'] }],
+        'no-param-reassign': 'off', // It's fine.
+        // Airbnb use warn https://github.com/airbnb/javascript/blob/63098cbb6c05376dbefc9a91351f5727540c1ce1/packages/eslint-config-airbnb-base/rules/style.js#L97
+        // but eslint recommands error
+        'func-names': 'error',
+
+        'no-continue': 'off',
+        'no-constant-condition': 'error',
+        'no-implied-eval': 'error',
+        'no-throw-literal': 'error',
+        // Use the proptype inheritance chain
+        'no-prototype-builtins': 'off',
+        'no-return-await': 'error',
+        'no-underscore-dangle': 'error',
+        'nonblock-statement-body-position': 'error',
+        'prefer-arrow-callback': ['error', { allowNamedFunctions: true }],
+        // Destructuring harm grep potential.
+        'prefer-destructuring': 'off',
+
+        'no-use-before-define': 'off',
+        '@typescript-eslint/no-use-before-define': [
+          'error',
+          {
+            functions: false,
+            classes: true,
+            variables: true,
+          },
+        ],
+        'no-unused-vars': 'off',
+        '@typescript-eslint/no-unused-vars': [
+          'error',
+          {
+            vars: 'all',
+            args: 'after-used',
+            ignoreRestSiblings: true,
+            argsIgnorePattern: '^_',
+            caughtErrors: 'none',
+          },
+        ],
+
+        // Not needed in general, can be turned on for specific files
+        'import/prefer-default-export': 'off',
+        // Not sure why it doesn't work
+        'import/named': 'off',
+        'import/no-cycle': 'off',
+        // Missing yarn workspace support
+        'import/no-extraneous-dependencies': 'off',
+        // The code is already coupled to webpack. Prefer explicit coupling.
+        'import/no-webpack-loader-syntax': 'off',
+        'import/no-relative-packages': 'error',
+
+        // doesn't work?
+        'jsx-a11y/label-has-associated-control': [
+          'error',
+          {
+            // airbnb uses 'both' which requires nesting i.e. <label><input /></label>
+            // 'either' allows `htmlFor`
+            assert: 'either',
+          },
+        ],
+        // We are a library, we need to support it too
+        'jsx-a11y/no-autofocus': 'off',
+
+        'material-ui/docgen-ignore-before-comment': 'error',
+        'material-ui/rules-of-use-theme-variants': 'error',
+        'material-ui/no-empty-box': 'error',
+        'material-ui/no-styled-box': 'error',
+        'material-ui/straight-quotes': 'error',
+
+        'react-hooks/exhaustive-deps': ['error', { additionalHooks: 'useEnhancedEffect' }],
+        'react-hooks/rules-of-hooks': 'error',
+
+        'react/default-props-match-prop-types': [
+          'error',
+          {
+            // Otherwise the rule thinks inner props = outer props
+            // But in TypeScript we want to know that a certain prop is defined during render
+            // while it can be ommitted from the callsite.
+            // Then defaultProps (or default values) will make sure that the prop is defined during render
+            allowRequiredDefaults: true,
+          },
+        ],
+        // Can add verbosity to small functions making them harder to grok.
+        // Though we have to manually enforce it for function components with default values.
+        'react/destructuring-assignment': 'off',
+        'react/forbid-prop-types': 'off', // Too strict, no time for that
+        'react/jsx-curly-brace-presence': 'off', // broken
+        // airbnb is using .jsx
+        'react/jsx-filename-extension': ['error', { extensions: ['.js', '.tsx'] }],
+        // Prefer <React.Fragment> over <>.
+        'react/jsx-fragments': ['error', 'element'],
+        // Enforces premature optimization
+        'react/jsx-no-bind': 'off',
+        // We are a UI library.
+        'react/jsx-props-no-spreading': 'off',
+        // This rule is great for raising people awareness of what a key is and how it works.
+        'react/no-array-index-key': 'off',
+        'react/no-danger': 'error',
+        'react/no-unknown-property': ['error', { ignore: ['sx'] }],
+        'react/no-direct-mutation-state': 'error',
+        // Not always relevant
+        'react/require-default-props': 'off',
+        'react/sort-prop-types': 'error',
+        // This depends entirely on what you're doing. There's no universal pattern
+        'react/state-in-constructor': 'off',
+        // stylistic opinion. For conditional assignment we want it outside, otherwise as static
+        'react/static-property-placement': 'off',
+        // noopener is enough
+        // https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-no-target-blank.md#rule-options
+        'react/jsx-no-target-blank': ['error', { allowReferrer: true }],
+
+        'no-restricted-syntax': [
+          'error',
+          {
+            message:
+              "Do not import default or named exports from React. Use a namespace import (import * as React from 'react';) instead.",
+            selector:
+              'ImportDeclaration[source.value="react"] ImportDefaultSpecifier, ImportDeclaration[source.value="react"] ImportSpecifier',
+          },
+          {
+            message:
+              "Do not import default or named exports from ReactDOM. Use a namespace import (import * as ReactDOM from 'react-dom';) instead.",
+            selector:
+              'ImportDeclaration[source.value="react-dom"] ImportDefaultSpecifier, ImportDeclaration[source.value="react-dom"] ImportSpecifier',
+          },
+          {
+            message:
+              "Do not import default or named exports from ReactDOM. Use a namespace import (import * as ReactDOM from 'react-dom/client';) instead.",
+            selector:
+              'ImportDeclaration[source.value="react-dom/client"] ImportDefaultSpecifier, ImportDeclaration[source.value="react-dom/client"] ImportSpecifier',
+          },
+          {
+            message:
+              "Do not import default or named exports from ReactDOMServer. Use a namespace import (import * as ReactDOM from 'react-dom/server';) instead.",
+            selector:
+              'ImportDeclaration[source.value="react-dom/server"] ImportDefaultSpecifier, ImportDeclaration[source.value="react-dom/server"] ImportSpecifier',
+          },
+          {
+            message:
+              "The 'use client' pragma can't be used with export * in the same module. This is not supported by Next.js.",
+            selector: 'ExpressionStatement[expression.value="use client"] ~ ExportAllDeclaration',
+          },
+          {
+            message: 'Do not call `Error(...)` without `new`. Use `new Error(...)` instead.',
+            selector: "CallExpression[callee.name='Error']",
+          },
+          ...restrictedSyntaxRules,
+        ],
+
+        // We re-export default in many places, remove when https://github.com/airbnb/javascript/issues/2500 gets resolved
+        'no-restricted-exports': 'off',
+        // Avoid accidental auto-"fixes" https://github.com/jsx-eslint/eslint-plugin-react/issues/3458
+        'react/no-invalid-html-attribute': 'off',
+
+        'react/jsx-no-useless-fragment': ['error', { allowExpressions: true }],
+        'lines-around-directive': 'off',
+        ...(options.reactCompilerEnabled ? { 'react-compiler/react-compiler': 'error' } : {}),
+        // Prevent the use of `e` as a shorthand for `event`, `error`, etc.
+        'id-denylist': ['error', 'e'],
+        '@typescript-eslint/return-await': 'off',
+      },
+    },
+  ];
+}

package/src/eslint/material-ui/index.mjs

@@ -0,0 +1,27 @@
+import disallowActiveElementAsKeyEventTarget from './rules/disallow-active-element-as-key-event-target.mjs';
+import disallowReactApiInServerComponents from './rules/disallow-react-api-in-server-components.mjs';
+import docgenIgnoreBeforeComment from './rules/docgen-ignore-before-comment.mjs';
+import muiNameMatchesComponentName from './rules/mui-name-matches-component-name.mjs';
+import noEmptyBox from './rules/no-empty-box.mjs';
+import noRestrictedResolvedImports from './rules/no-restricted-resolved-imports.mjs';
+import noStyledBox from './rules/no-styled-box.mjs';
+import rulesOfUseThemeVariants from './rules/rules-of-use-theme-variants.mjs';
+import straightQuotes from './rules/straight-quotes.mjs';
+
+export default /** @type {import('eslint').ESLint.Plugin} */ ({
+  meta: {
+    name: '@mui/eslint-plugin-material-ui',
+    version: '0.1.0',
+  },
+  rules: {
+    'disallow-active-element-as-key-event-target': disallowActiveElementAsKeyEventTarget,
+    'docgen-ignore-before-comment': docgenIgnoreBeforeComment,
+    'mui-name-matches-component-name': muiNameMatchesComponentName,
+    'rules-of-use-theme-variants': rulesOfUseThemeVariants,
+    'no-empty-box': noEmptyBox,
+    'no-styled-box': noStyledBox,
+    'straight-quotes': straightQuotes,
+    'disallow-react-api-in-server-components': disallowReactApiInServerComponents,
+    'no-restricted-resolved-imports': noRestrictedResolvedImports,
+  },
+});

package/src/eslint/material-ui/rules/disallow-active-element-as-key-event-target.mjs

@@ -0,0 +1,65 @@
+/**
+ * @type {import('eslint').Rule.RuleModule}
+ */
+const rule = {
+  meta: {
+    messages: {
+      'keyboard-target':
+        "Don't use document.activeElement as a target for keyboard events. Prefer the actual element.",
+    },
+  },
+  create(context) {
+    /**
+     * @param {import('estree').Node} node
+     * @returns {boolean}
+     */
+    function isDocumentActiveElementNode(node) {
+      return (
+        node.type === 'MemberExpression' &&
+        /** @type {import('estree').MemberExpression} */ (node).object.type === 'Identifier' &&
+        /** @type {import('estree').Identifier} */ (
+          /** @type {import('estree').MemberExpression} */ (node).object
+        ).name === 'document' &&
+        /** @type {import('estree').MemberExpression} */ (node).property.type === 'Identifier' &&
+        /** @type {import('estree').Identifier} */ (
+          /** @type {import('estree').MemberExpression} */ (node).property
+        ).name === 'activeElement'
+      );
+    }
+
+    return {
+      CallExpression(node) {
+        /** @type {string[]} */
+        const keyboardEventDispatchers = ['keyDown', 'keyUp'];
+        const {
+          arguments: [firstArgument],
+          callee,
+        } = node;
+        const isFireKeyboardEvent =
+          callee.type === 'MemberExpression' &&
+          /** @type {import('estree').MemberExpression} */ (callee).property.type ===
+            'Identifier' &&
+          keyboardEventDispatchers.includes(
+            /** @type {import('estree').Identifier} */ (
+              /** @type {import('estree').MemberExpression} */ (callee).property
+            ).name,
+          ) &&
+          /** @type {import('estree').MemberExpression} */ (callee).object.type === 'Identifier' &&
+          /** @type {import('estree').Identifier} */ (
+            /** @type {import('estree').MemberExpression} */ (callee).object
+          ).name === 'fireEvent';
+        const targetsDocumentActiveElement =
+          firstArgument !== undefined &&
+          (firstArgument.type === 'TSNonNullExpression'
+            ? isDocumentActiveElementNode(firstArgument.expression)
+            : isDocumentActiveElementNode(firstArgument));
+
+        if (isFireKeyboardEvent && targetsDocumentActiveElement) {
+          context.report({ messageId: 'keyboard-target', node: firstArgument });
+        }
+      },
+    };
+  },
+};
+
+export default rule;