[core] Upgrade eslint-config-airbnb-typescript

.eslintrc.js

@@ -22,6 +22,7 @@ module.exports = {
   extends: [
     'plugin:eslint-plugin-import/recommended',
     'plugin:eslint-plugin-import/typescript',
+    'eslint-config-airbnb',
     'eslint-config-airbnb-typescript',
     'eslint-config-prettier',
   ],
@@ -160,8 +161,7 @@ module.exports = {
     'react/state-in-constructor': 'off',
     // stylistic opinion. For conditional assignment we want it outside, otherwise as static
     'react/static-property-placement': 'off',
-    // Currently not in recommended ruleset but catches real bugs.
-    'react/no-unstable-nested-components': 'error',
+
     'no-restricted-syntax': [
       // See https://github.com/eslint/eslint/issues/9192 for why it's needed
       ...baseStyleRules['no-restricted-syntax'],
@@ -171,6 +171,15 @@ module.exports = {
         selector: 'ImportDeclaration[source.value="react"] ImportDefaultSpecifier',
       },
     ],
+
+    // We re-export default in many places, remove when https://github.com/airbnb/javascript/issues/2500 gets resolved
+    'no-restricted-exports': 'off',
+    // Some of these occurences are deliberate and fixing them will break things in repos that use @monorepo dependency
+    'import/no-relative-packages': '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 }],
   },
   overrides: [
     {
@@ -354,6 +363,7 @@ module.exports = {
         'react/require-default-props': 'off',
         'react/state-in-constructor': 'off',
         'react/static-property-placement': 'off',
+        'react/function-component-definition': 'off',
       },
     },
     {

docs/data/joy/customization/dark-mode/IdentifySystemMode.js

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { CssVarsProvider, useColorScheme } from '@mui/joy/styles';
 import Typography from '@mui/joy/Typography';
 
-const Identifier = () => {
+function Identifier() {
   const { systemMode } = useColorScheme();
   const [mounted, setMounted] = React.useState(false);
   React.useEffect(() => {
@@ -32,7 +32,7 @@ const Identifier = () => {
       mode.
     </Typography>
   );
-};
+}
 
 export default function IdentifySystemMode() {
   return (

docs/data/joy/customization/dark-mode/IdentifySystemMode.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { CssVarsProvider, useColorScheme } from '@mui/joy/styles';
 import Typography from '@mui/joy/Typography';
 
-const Identifier = () => {
+function Identifier() {
   const { systemMode } = useColorScheme();
   const [mounted, setMounted] = React.useState(false);
   React.useEffect(() => {
@@ -32,7 +32,7 @@ const Identifier = () => {
       mode.
     </Typography>
   );
-};
+}
 
 export default function IdentifySystemMode() {
   return (

package.json

@@ -131,7 +131,8 @@
     "dtslint": "^4.2.1",
     "enzyme": "^3.11.0",
     "eslint": "^8.27.0",
-    "eslint-config-airbnb-typescript": "^12.3.1",
+    "eslint-config-airbnb": "^19.0.4",
+    "eslint-config-airbnb-typescript": "^17.0.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-import-resolver-webpack": "^0.13.2",
     "eslint-plugin-babel": "^5.3.1",

packages/mui-joy/src/Autocomplete/Autocomplete.test.tsx

@@ -547,17 +547,19 @@ describe('Joy <Autocomplete />', () => {
 
   it('should trigger a form expectedly', () => {
     const handleSubmit = spy();
-    const Test = (props: any) => (
-      <div
-        onKeyDown={(event) => {
-          if (!event.defaultPrevented && event.key === 'Enter') {
-            handleSubmit();
-          }
-        }}
-      >
-        <Autocomplete autoFocus options={['one', 'two']} {...props} />
-      </div>
-    );
+    function Test(props: any) {
+      return (
+        <div
+          onKeyDown={(event) => {
+            if (!event.defaultPrevented && event.key === 'Enter') {
+              handleSubmit();
+            }
+          }}
+        >
+          <Autocomplete autoFocus options={['one', 'two']} {...props} />
+        </div>
+      );
+    }
     const { setProps } = render(<Test />);
     let textbox = screen.getByRole('combobox');
 
@@ -2031,26 +2033,28 @@ describe('Joy <Autocomplete />', () => {
   it('should prevent the default event handlers', () => {
     const handleChange = spy();
     const handleSubmit = spy();
-    const Test = () => (
-      <div
-        onKeyDown={(event) => {
-          if (!event.defaultPrevented && event.key === 'Enter') {
-            handleSubmit();
-          }
-        }}
-      >
-        <Autocomplete
-          autoFocus
-          options={['one', 'two']}
-          onChange={handleChange}
+    function Test() {
+      return (
+        <div
           onKeyDown={(event) => {
-            if (event.key === 'Enter') {
-              event.defaultMuiPrevented = true;
+            if (!event.defaultPrevented && event.key === 'Enter') {
+              handleSubmit();
             }
           }}
-        />
-      </div>
-    );
+        >
+          <Autocomplete
+            autoFocus
+            options={['one', 'two']}
+            onChange={handleChange}
+            onKeyDown={(event) => {
+              if (event.key === 'Enter') {
+                event.defaultMuiPrevented = true;
+              }
+            }}
+          />
+        </div>
+      );
+    }
     render(<Test />);
     const textbox = screen.getByRole('combobox');
     fireEvent.keyDown(textbox, { key: 'ArrowDown' });

packages/mui-joy/src/styles/ColorInversion.test.js

@@ -7,13 +7,15 @@ import ThemeProvider from './ThemeProvider';
 import ColorInversion, { useColorInversion } from './ColorInversion';
 import { createSolidInversion } from './variantUtils';
 
-const Parent = ({ children, invertedColors }) => (
-  <ColorInversion.Provider
-    value={invertedColors ? ['plain', 'outlined', 'soft', 'solid'] : undefined}
-  >
-    {children}
-  </ColorInversion.Provider>
-);
+const OVERRIDABLE_VARIANT = ['plain', 'outlined', 'soft', 'solid'];
+
+function Parent({ children, invertedColors }) {
+  return (
+    <ColorInversion.Provider value={invertedColors ? OVERRIDABLE_VARIANT : undefined}>
+      {children}
+    </ColorInversion.Provider>
+  );
+}
 
 const Child = (inProps) => {
   const props = useThemeProps({ name: 'Child', props: inProps });

packages/mui-joy/src/styles/ColorInversion.tsx

@@ -29,13 +29,13 @@ interface ColorInversionProviderProps {
   variant?: VariantProp;
 }
 
-export const ColorInversionProvider = ({ children, variant }: ColorInversionProviderProps) => {
+export function ColorInversionProvider({ children, variant }: ColorInversionProviderProps) {
   const theme = useSystemTheme(defaultTheme);
   return (
     <VariantOverride.Provider value={variant ? theme.colorInversionConfig[variant] : undefined}>
       {children}
     </VariantOverride.Provider>
   );
-};
+}
 
 export default VariantOverride;

packages/mui-joy/src/styles/CssVarsProvider.test.tsx

@@ -537,10 +537,10 @@ describe('[Joy] CssVarsProvider', () => {
     });
 
     it('contain expected colorInversion', function test() {
-      const Text = () => {
+      function Text() {
         const theme = useTheme();
         return <div>{Object.keys(theme.colorInversion).join(',')}</div>;
-      };
+      }
 
       const { container } = render(
         <CssVarsProvider>

packages/mui-joy/src/utils/useSlot.test.tsx

@@ -142,7 +142,7 @@ describe('useSlot', () => {
     });
     const ItemOption = styled('div')({});
 
-    const Item = (props: {
+    function Item(props: {
       component?: React.ElementType;
       components?: {
         root?: React.ElementType;
@@ -154,7 +154,7 @@ describe('useSlot', () => {
         listbox?: SlotComponentProps<'span', Record<string, any>, {}>;
         option?: SlotComponentProps<'div', Record<string, any>, {}>;
       };
-    }) => {
+    }) {
       const ref = React.useRef(null);
       const [SlotRoot, rootProps] = useSlot('root', {
         ref,
@@ -194,7 +194,7 @@ describe('useSlot', () => {
           </SlotListbox>
         </React.Fragment>
       );
-    };
+    }
 
     it('should render popper with styled-component', () => {
       const { getByRole } = render(<Item />);
@@ -205,9 +205,9 @@ describe('useSlot', () => {
     });
 
     it('the listbox slot should be replaceable', () => {
-      const Listbox = ({ component }: { component?: React.ElementType }) => (
-        <ul data-component={component} />
-      );
+      function Listbox({ component }: { component?: React.ElementType }) {
+        return <ul data-component={component} />;
+      }
       const { getByRole } = render(<Item components={{ listbox: Listbox }} />);
       expect(getByRole('list')).toBeVisible();
       expect(getByRole('list')).not.to.have.attribute('class');

packages/mui-lab/src/TreeView/TreeView.js

@@ -792,8 +792,8 @@ const TreeView = React.forwardRef(function TreeView(inProps, ref) {
 
   return (
     <TreeViewContext.Provider
-      // TODO: fix lint error:
-      /// eslint-disable-next-line react/jsx-no-constructed-context-values
+      // TODO: fix this lint error
+      // eslint-disable-next-line react/jsx-no-constructed-context-values
       value={{
         icons: { defaultCollapseIcon, defaultExpandIcon, defaultParentIcon, defaultEndIcon },
         focus,

packages/mui-material/src/Accordion/Accordion.test.js

@@ -169,6 +169,7 @@ describe('<Accordion />', () => {
             Accordion.propTypes,
             {
               classes: {},
+              // eslint-disable-next-line react/jsx-no-useless-fragment
               children: <React.Fragment />,
             },
             'prop',

packages/mui-material/src/Menu/Menu.test.js

@@ -249,6 +249,7 @@ describe('<Menu />', () => {
       expect(() => {
         render(
           <Menu anchorEl={document.createElement('div')} open={false}>
+            {/* eslint-disable-next-line react/jsx-no-useless-fragment */}
             <React.Fragment />
           </Menu>,
         );

packages/mui-utils/src/elementAcceptingRef.test.tsx

@@ -103,6 +103,7 @@ describe('elementAcceptingRef', () => {
 
     // undesired behavior
     it('accepts Fragment', () => {
+      // eslint-disable-next-line react/jsx-no-useless-fragment
       assertPass(<React.Fragment />);
     });
   });