[code-infra] Replace all instances of e with event and add eslint rule

.eslintrc.js

@@ -240,6 +240,8 @@ module.exports = {
     'react/jsx-no-useless-fragment': ['error', { allowExpressions: true }],
     'lines-around-directive': 'off',
     ...(ENABLE_REACT_COMPILER_PLUGIN ? { 'react-compiler/react-compiler': 'error' } : {}),
+    // Prevent the use of `e` as a shorthand for `event`
+    'id-denylist': ['error', 'e'],
   },
   overrides: [
     {

docs/data/joy/components/list/ExampleNavigationMenu.js

@@ -51,15 +51,15 @@ const useRovingIndex = (options) => {
       }
     },
     tabIndex: activeIndex === index ? 0 : -1,
-    onKeyDown: (e) => {
+    onKeyDown: (event) => {
       if (Number.isInteger(activeIndex)) {
-        if (e.key === (vertical ? 'ArrowDown' : 'ArrowRight')) {
+        if (event.key === (vertical ? 'ArrowDown' : 'ArrowRight')) {
           focusNext();
         }
-        if (e.key === (vertical ? 'ArrowUp' : 'ArrowLeft')) {
+        if (event.key === (vertical ? 'ArrowUp' : 'ArrowLeft')) {
           focusPrevious();
         }
-        handlers.onKeyDown?.(e, { setActiveIndex });
+        handlers.onKeyDown?.(event, { setActiveIndex });
       }
     },
     onClick: () => {

docs/data/joy/components/list/ExampleNavigationMenu.tsx

@@ -64,15 +64,15 @@ const useRovingIndex = (options?: Options) => {
       }
     },
     tabIndex: activeIndex === index ? 0 : -1,
-    onKeyDown: (e: React.KeyboardEvent<HTMLAnchorElement>) => {
+    onKeyDown: (event: React.KeyboardEvent<HTMLAnchorElement>) => {
       if (Number.isInteger(activeIndex)) {
-        if (e.key === (vertical ? 'ArrowDown' : 'ArrowRight')) {
+        if (event.key === (vertical ? 'ArrowDown' : 'ArrowRight')) {
           focusNext();
         }
-        if (e.key === (vertical ? 'ArrowUp' : 'ArrowLeft')) {
+        if (event.key === (vertical ? 'ArrowUp' : 'ArrowLeft')) {
           focusPrevious();
         }
-        handlers.onKeyDown?.(e, { setActiveIndex });
+        handlers.onKeyDown?.(event, { setActiveIndex });
       }
     },
     onClick: () => {

docs/data/joy/components/select/SelectClearable.js

@@ -12,7 +12,7 @@ export default function SelectClearable() {
       action={action}
       value={value}
       placeholder="Favorite pet…"
-      onChange={(e, newValue) => setValue(newValue)}
+      onChange={(event, newValue) => setValue(newValue)}
       {...(value && {
         // display the button and remove select indicator
         // when user has selected a value

docs/data/joy/components/select/SelectClearable.tsx

@@ -12,7 +12,7 @@ export default function SelectClearable() {
       action={action}
       value={value}
       placeholder="Favorite pet…"
-      onChange={(e, newValue) => setValue(newValue)}
+      onChange={(event, newValue) => setValue(newValue)}
       {...(value && {
         // display the button and remove select indicator
         // when user has selected a value

docs/data/joy/components/select/SelectUsage.js

@@ -48,7 +48,7 @@ export default function SelectUsage() {
           defaultListboxOpen
           action={action}
           value={value}
-          onChange={(e, newValue) => setValue(newValue)}
+          onChange={(event, newValue) => setValue(newValue)}
           sx={{ minWidth: 160, mb: 20 }}
         >
           <Option value="react">React</Option>

docs/data/joy/getting-started/templates/messages/components/MessageInput.tsx

@@ -33,8 +33,8 @@ export default function MessageInput(props: MessageInputProps) {
           placeholder="Type something here…"
           aria-label="Message"
           ref={textAreaRef}
-          onChange={(e) => {
-            setTextAreaValue(e.target.value);
+          onChange={(event) => {
+            setTextAreaValue(event.target.value);
           }}
           value={textAreaValue}
           minRows={3}

docs/data/material/getting-started/templates/shared-theme/ColorModeSelect.js

@@ -11,7 +11,7 @@ export default function ColorModeSelect(props) {
   return (
     <Select
       value={mode}
-      onChange={(e) => setMode(e.target.value)}
+      onChange={(event) => setMode(event.target.value)}
       SelectDisplayProps={{
         'data-screenshot': 'toggle-mode',
       }}

docs/data/material/getting-started/templates/shared-theme/ColorModeSelect.tsx

@@ -11,7 +11,9 @@ export default function ColorModeSelect(props: SelectProps) {
   return (
     <Select
       value={mode}
-      onChange={(e) => setMode(e.target.value as 'system' | 'light' | 'dark')}
+      onChange={(event) =>
+        setMode(event.target.value as 'system' | 'light' | 'dark')
+      }
       SelectDisplayProps={{
         // @ts-ignore
         'data-screenshot': 'toggle-mode',

docs/pages/experiments/base/components-gallery.tsx

@@ -233,7 +233,7 @@ export default function ComponentsGallery() {
   const settingsOpen = Boolean(settingsAnchor);
   const settingsId = settingsOpen ? 'settings-popup' : undefined;
 
-  const colorPickerSliderChangeHandler = (e: Event, value: number | number[]) => {
+  const colorPickerSliderChangeHandler = (event: Event, value: number | number[]) => {
     setRootStyles(`
 :root {
   --primary-50: ${value}, 90%, 97%;

docs/pages/experiments/base/tabs.tsx

@@ -145,7 +145,7 @@ export default function UnstyledTabsIntroduction() {
         <input
           type="checkbox"
           checked={selectionFollowsFocus}
-          onChange={(e) => setSelectionFollowsFocus(e.target.checked)}
+          onChange={(event) => setSelectionFollowsFocus(event.target.checked)}
         />{' '}
         Selection follows focus
       </label>

docs/src/modules/components/DemoSandbox.js

@@ -172,7 +172,7 @@ function getTheme(outerTheme, injectTheme) {
   if (injectTheme && Object.prototype.toString.call(injectTheme) === '[object Object]') {
     try {
       return deepmerge(resultTheme, injectTheme);
-    } catch (e) {
+    } catch (event) {
       return resultTheme;
     }
   }

packages/api-docs-builder/ApiBuilders/HookApiBuilder.ts

@@ -421,7 +421,7 @@ const extractInfoFromType = async (
     result = Object.values(properties)
       .filter((property) => !property.tags.ignore)
       .sort((a, b) => a.name.localeCompare(b.name));
-  } catch (e) {
+  } catch (event) {
     console.error(`No declaration for ${typeName}`);
   }
 

packages/mui-base/src/Badge/Badge.spec.tsx

@@ -61,7 +61,9 @@ const polymorphicComponentTest = () => {
         slots={{
           root: 'button',
         }}
-        onClick={(e: React.MouseEvent<HTMLButtonElement>) => e.currentTarget.checkValidity()}
+        onClick={(event: React.MouseEvent<HTMLButtonElement>) =>
+          event.currentTarget.checkValidity()
+        }
       />
 
       <Badge<'button'>
@@ -71,9 +73,9 @@ const polymorphicComponentTest = () => {
         ref={(elem) => {
           expectType<HTMLButtonElement | null, typeof elem>(elem);
         }}
-        onClick={(e) => {
-          expectType<React.MouseEvent<HTMLButtonElement, MouseEvent>, typeof e>(e);
-          e.currentTarget.checkValidity();
+        onClick={(event) => {
+          expectType<React.MouseEvent<HTMLButtonElement, MouseEvent>, typeof event>(event);
+          event.currentTarget.checkValidity();
         }}
       />
 

packages/mui-base/src/Button/Button.spec.tsx

@@ -39,8 +39,8 @@ const polymorphicComponentTest = () => {
         ref={(elem) => {
           expectType<HTMLButtonElement | null, typeof elem>(elem);
         }}
-        onClick={(e) => {
-          expectType<React.MouseEvent<HTMLButtonElement, MouseEvent>, typeof e>(e);
+        onClick={(event) => {
+          expectType<React.MouseEvent<HTMLButtonElement, MouseEvent>, typeof event>(event);
         }}
         type="submit"
       />
@@ -60,16 +60,18 @@ const polymorphicComponentTest = () => {
       <Button<'svg'> viewBox="" />
 
       <Button
-        onClick={(e: React.MouseEvent<HTMLButtonElement>) => e.currentTarget.checkValidity()}
+        onClick={(event: React.MouseEvent<HTMLButtonElement>) =>
+          event.currentTarget.checkValidity()
+        }
       />
 
       <Button<'div'>
         slotProps={{ root: 'div' }}
         ref={(elem) => {
           expectType<HTMLDivElement | null, typeof elem>(elem);
         }}
-        onClick={(e) => {
-          expectType<React.MouseEvent<HTMLDivElement, MouseEvent>, typeof e>(e);
+        onClick={(event) => {
+          expectType<React.MouseEvent<HTMLDivElement, MouseEvent>, typeof event>(event);
         }}
       />
     </div>

packages/mui-base/src/FormControl/FormControl.spec.tsx

@@ -41,7 +41,9 @@ function FormControlTest() {
         slots={{
           root: 'button',
         }}
-        onClick={(e: React.MouseEvent<HTMLButtonElement>) => e.currentTarget.checkValidity()}
+        onClick={(event: React.MouseEvent<HTMLButtonElement>) =>
+          event.currentTarget.checkValidity()
+        }
       />
 
       <FormControl<'button'>
@@ -51,9 +53,9 @@ function FormControlTest() {
         ref={(elem) => {
           expectType<HTMLButtonElement | null, typeof elem>(elem);
         }}
-        onClick={(e) => {
-          expectType<React.MouseEvent<HTMLButtonElement, MouseEvent>, typeof e>(e);
-          e.currentTarget.checkValidity();
+        onClick={(event) => {
+          expectType<React.MouseEvent<HTMLButtonElement, MouseEvent>, typeof event>(event);
+          event.currentTarget.checkValidity();
         }}
       />
     </div>

packages/mui-base/src/Input/Input.spec.tsx

@@ -56,7 +56,9 @@ const polymorphicComponentTest = () => {
         slots={{
           root: 'button',
         }}
-        onClick={(e: React.MouseEvent<HTMLButtonElement>) => e.currentTarget.checkValidity()}
+        onClick={(event: React.MouseEvent<HTMLButtonElement>) =>
+          event.currentTarget.checkValidity()
+        }
       />
 
       <Input<'button'>
@@ -66,9 +68,9 @@ const polymorphicComponentTest = () => {
         ref={(elem) => {
           expectType<HTMLButtonElement | null, typeof elem>(elem);
         }}
-        onMouseDown={(e) => {
-          expectType<React.MouseEvent<HTMLButtonElement, MouseEvent>, typeof e>(e);
-          e.currentTarget.checkValidity();
+        onMouseDown={(event) => {
+          expectType<React.MouseEvent<HTMLButtonElement, MouseEvent>, typeof event>(event);
+          event.currentTarget.checkValidity();
         }}
       />
     </div>

packages/mui-base/src/Input/Input.test.tsx

@@ -147,8 +147,8 @@ describe('<Input />', () => {
       ) {
         const { onChange, ownerState, ...other } = props;
 
-        const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-          onChange(e.target.value, OUTPUT_VALUE);
+        const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+          onChange(event.target.value, OUTPUT_VALUE);
         };
 
         return <input ref={ref} onChange={handleChange} {...other} />;

packages/mui-base/src/Menu/Menu.spec.tsx

@@ -39,7 +39,9 @@ const polymorphicComponentTest = () => {
         slots={{
           root: 'button',
         }}
-        onClick={(e: React.MouseEvent<HTMLButtonElement>) => e.currentTarget.checkValidity()}
+        onClick={(event: React.MouseEvent<HTMLButtonElement>) =>
+          event.currentTarget.checkValidity()
+        }
       />
 
       <Menu<'button'>
@@ -49,9 +51,9 @@ const polymorphicComponentTest = () => {
         ref={(elem) => {
           expectType<HTMLButtonElement | null, typeof elem>(elem);
         }}
-        onMouseDown={(e) => {
-          expectType<React.MouseEvent<HTMLButtonElement, MouseEvent>, typeof e>(e);
-          e.currentTarget.checkValidity();
+        onMouseDown={(event) => {
+          expectType<React.MouseEvent<HTMLButtonElement, MouseEvent>, typeof event>(event);
+          event.currentTarget.checkValidity();
         }}
       />
     </div>

packages/mui-base/src/MenuItem/MenuItem.spec.tsx

@@ -39,7 +39,9 @@ const polymorphicComponentTest = () => {
         slots={{
           root: 'button',
         }}
-        onClick={(e: React.MouseEvent<HTMLButtonElement>) => e.currentTarget.checkValidity()}
+        onClick={(event: React.MouseEvent<HTMLButtonElement>) =>
+          event.currentTarget.checkValidity()
+        }
       />
 
       <MenuItem<'button'>
@@ -49,9 +51,9 @@ const polymorphicComponentTest = () => {
         ref={(elem) => {
           expectType<HTMLButtonElement | null, typeof elem>(elem);
         }}
-        onMouseDown={(e) => {
-          expectType<React.MouseEvent<HTMLButtonElement, MouseEvent>, typeof e>(e);
-          e.currentTarget.checkValidity();
+        onMouseDown={(event) => {
+          expectType<React.MouseEvent<HTMLButtonElement, MouseEvent>, typeof event>(event);
+          event.currentTarget.checkValidity();
         }}
       />
     </div>

packages/mui-base/src/Modal/Modal.spec.tsx

@@ -64,7 +64,9 @@ const polymorphicComponentTest = () => {
         slots={{
           root: 'button',
         }}
-        onClick={(e: React.MouseEvent<HTMLButtonElement>) => e.currentTarget.checkValidity()}
+        onClick={(event: React.MouseEvent<HTMLButtonElement>) =>
+          event.currentTarget.checkValidity()
+        }
         open
       >
         <div />
@@ -77,9 +79,9 @@ const polymorphicComponentTest = () => {
         ref={(elem) => {
           expectType<HTMLButtonElement | null, typeof elem>(elem);
         }}
-        onMouseDown={(e) => {
-          expectType<React.MouseEvent<HTMLButtonElement, MouseEvent>, typeof e>(e);
-          e.currentTarget.checkValidity();
+        onMouseDown={(event) => {
+          expectType<React.MouseEvent<HTMLButtonElement, MouseEvent>, typeof event>(event);
+          event.currentTarget.checkValidity();
         }}
         open
       >

packages/mui-base/src/Modal/Modal.tsx

@@ -138,12 +138,12 @@ const Modal = React.forwardRef(function Modal<RootComponentType extends React.El
     getSlotProps: (otherHandlers: EventHandlers) => {
       return getBackdropProps({
         ...otherHandlers,
-        onClick: (e: React.MouseEvent) => {
+        onClick: (event: React.MouseEvent) => {
           if (onBackdropClick) {
-            onBackdropClick(e);
+            onBackdropClick(event);
           }
           if (otherHandlers?.onClick) {
-            otherHandlers.onClick(e);
+            otherHandlers.onClick(event);
           }
         },
       });

packages/mui-base/src/Option/Option.spec.tsx

@@ -53,7 +53,9 @@ const polymorphicComponentTest = () => {
         slots={{
           root: 'button',
         }}
-        onClick={(e: React.MouseEvent<HTMLButtonElement>) => e.currentTarget.checkValidity()}
+        onClick={(event: React.MouseEvent<HTMLButtonElement>) =>
+          event.currentTarget.checkValidity()
+        }
       />
 
       <Option<number, 'button'>
@@ -64,9 +66,9 @@ const polymorphicComponentTest = () => {
         ref={(elem) => {
           expectType<HTMLButtonElement | null, typeof elem>(elem);
         }}
-        onMouseDown={(e) => {
-          expectType<React.MouseEvent<HTMLButtonElement, MouseEvent>, typeof e>(e);
-          e.currentTarget.checkValidity();
+        onMouseDown={(event) => {
+          expectType<React.MouseEvent<HTMLButtonElement, MouseEvent>, typeof event>(event);
+          event.currentTarget.checkValidity();
         }}
       />
     </div>

packages/mui-base/src/OptionGroup/OptionGroup.spec.tsx

@@ -66,7 +66,9 @@ const polymorphicComponentTest = () => {
         slots={{
           root: 'button',
         }}
-        onClick={(e: React.MouseEvent<HTMLButtonElement>) => e.currentTarget.checkValidity()}
+        onClick={(event: React.MouseEvent<HTMLButtonElement>) =>
+          event.currentTarget.checkValidity()
+        }
       />
 
       <OptionGroup<'button'>
@@ -76,9 +78,9 @@ const polymorphicComponentTest = () => {
         ref={(elem) => {
           expectType<HTMLButtonElement | null, typeof elem>(elem);
         }}
-        onMouseDown={(e) => {
-          expectType<React.MouseEvent<HTMLButtonElement, MouseEvent>, typeof e>(e);
-          e.currentTarget.checkValidity();
+        onMouseDown={(event) => {
+          expectType<React.MouseEvent<HTMLButtonElement, MouseEvent>, typeof event>(event);
+          event.currentTarget.checkValidity();
         }}
       />
     </div>