[code-infra] Inject display name

babel.config.js

@@ -93,6 +93,7 @@ module.exports = function getBabelConfig(api) {
         mode: 'unsafe-wrap',
       },
     ],
+    ['babel-plugin-transform-react-remove-display-name'],
     [
       'transform-inline-environment-variables',
       {

docs/translations/api-docs-base/menu-item/menu-item.json

@@ -1,5 +1,5 @@
 {
-  "componentDescription": "An unstyled menu item to be used within a Menu.",
+  "componentDescription": "",
   "propDescriptions": {
     "disabled": { "description": "If <code>true</code>, the menu item will be disabled." },
     "disableFocusOnHover": {

package.json

@@ -143,6 +143,7 @@
     "babel-plugin-optimize-clsx": "^2.6.2",
     "babel-plugin-react-remove-properties": "^0.3.0",
     "babel-plugin-transform-inline-environment-variables": "^0.4.4",
+    "babel-plugin-transform-react-remove-display-name": "^1.1.0",
     "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
     "chalk": "^5.3.0",
     "compression-webpack-plugin": "^11.1.0",

packages-internal/scripts/typescript-to-proptypes/src/injectPropTypesInFile.ts

@@ -45,9 +45,13 @@ export interface InjectPropTypesInFileOptions
     propType: PropTypeDefinition,
   ) => ((a: LiteralType, b: LiteralType) => number) | undefined;
   /**
-   * Options passed to babel.transformSync
+   * Options passed to babel.transformSync.
    */
   babelOptions?: babel.TransformOptions;
+  /**
+   * Inject display name into the component.
+   */
+  includeDisplayName?: boolean;
 }
 
 /**
@@ -175,6 +179,7 @@ function createBabelPlugin({
   let alreadyImported = false;
   const originalPropTypesPaths = new Map<string, babel.NodePath>();
   const previousPropTypesSources = new Map<string, Map<string, string>>();
+  const originalDisplayNamePaths = new Map<string, babel.NodePath>();
 
   function injectPropTypes(injectOptions: {
     path: babel.NodePath;
@@ -206,9 +211,13 @@ function createBabelPlugin({
 
     const originalPropTypesPath = originalPropTypesPaths.get(nodeName);
 
+    let newPropTypesPath;
+
     // `Component.propTypes` already exists
     if (originalPropTypesPath) {
-      originalPropTypesPath.replaceWith(babel.template.ast(placeholder) as babel.Node);
+      [newPropTypesPath] = originalPropTypesPath.replaceWith(
+        babel.template.ast(placeholder) as babel.Node,
+      );
     } else if (!emptyPropTypes && babelTypes.isExportNamedDeclaration(path.parent)) {
       // in:
       // export function Component() {}
@@ -217,7 +226,7 @@ function createBabelPlugin({
       // Component.propTypes = {}
       // export { Component }
       path.insertAfter(babel.template.ast(`export { ${nodeName} };`));
-      path.insertAfter(babel.template.ast(placeholder));
+      [newPropTypesPath] = path.insertAfter(babel.template.ast(placeholder));
       path.parentPath!.replaceWith(path.node);
     } else if (!emptyPropTypes && babelTypes.isExportDefaultDeclaration(path.parent)) {
       // in:
@@ -227,10 +236,23 @@ function createBabelPlugin({
       // Component.propTypes = {}
       // export default Component
       path.insertAfter(babel.template.ast(`export default ${nodeName};`));
-      path.insertAfter(babel.template.ast(placeholder));
+      [newPropTypesPath] = path.insertAfter(babel.template.ast(placeholder));
       path.parentPath!.replaceWith(path.node);
     } else {
-      path.insertAfter(babel.template.ast(placeholder));
+      [newPropTypesPath] = path.insertAfter(babel.template.ast(placeholder));
+    }
+
+    if (options.includeDisplayName) {
+      const originalDisplayNamePath = originalDisplayNamePaths.get(nodeName);
+      if (originalDisplayNamePath) {
+        originalDisplayNamePath.replaceWith(
+          babel.template.ast(`${nodeName}.displayName = '${nodeName}';`) as babel.Node,
+        );
+      } else {
+        (newPropTypesPath || path).insertAfter(
+          babel.template.ast(`${nodeName}.displayName = '${nodeName}';`),
+        );
+      }
     }
   }
 
@@ -300,6 +322,18 @@ function createBabelPlugin({
                 });
               }
             }
+
+            // detect displayName assignments
+            if (
+              babelTypes.isExpressionStatement(node) &&
+              babelTypes.isAssignmentExpression(node.expression) &&
+              babelTypes.isMemberExpression(node.expression.left) &&
+              babelTypes.isIdentifier(node.expression.left.property, { name: 'displayName' }) &&
+              babelTypes.isIdentifier(node.expression.left.object)
+            ) {
+              const componentName = node.expression.left.object.name;
+              originalDisplayNamePaths.set(componentName, nodePath);
+            }
           });
         },
         exit(path) {

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

@@ -140,4 +140,6 @@ Badge.propTypes /* remove-proptypes */ = {
   }),
 } as any;
 
+Badge.displayName = 'Badge';
+
 export { Badge };

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

@@ -167,4 +167,6 @@ Button.propTypes /* remove-proptypes */ = {
   to: PropTypes.string,
 } as any;
 
+Button.displayName = 'Button';
+
 export { Button };

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

@@ -250,6 +250,8 @@ ClickAwayListener.propTypes /* remove-proptypes */ = {
   touchEvent: PropTypes.oneOf(['onTouchEnd', 'onTouchStart', false]),
 } as any;
 
+ClickAwayListener.displayName = 'ClickAwayListener';
+
 if (process.env.NODE_ENV !== 'production') {
   // eslint-disable-next-line
   (ClickAwayListener as any)['propTypes' + ''] = exactProp(ClickAwayListener.propTypes);

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

@@ -51,6 +51,8 @@ Dropdown.propTypes /* remove-proptypes */ = {
   open: PropTypes.bool,
 } as any;
 
+Dropdown.displayName = 'Dropdown';
+
 if (process.env.NODE_ENV !== 'production') {
   // eslint-disable-next-line
   (Dropdown as any)['propTypes' + ''] = exactProp(Dropdown.propTypes);

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

@@ -426,6 +426,8 @@ FocusTrap.propTypes /* remove-proptypes */ = {
   open: PropTypes.bool.isRequired,
 } as any;
 
+FocusTrap.displayName = 'FocusTrap';
+
 if (process.env.NODE_ENV !== 'production') {
   // eslint-disable-next-line
   (FocusTrap as any)['propTypes' + ''] = exactProp(FocusTrap.propTypes);

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

@@ -225,4 +225,6 @@ FormControl.propTypes /* remove-proptypes */ = {
   value: PropTypes.any,
 } as any;
 
+FormControl.displayName = 'FormControl';
+
 export { FormControl };

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

@@ -365,4 +365,6 @@ Input.propTypes /* remove-proptypes */ = {
   value: PropTypes.any,
 } as any;
 
+Input.displayName = 'Input';
+
 export { Input };

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

@@ -157,4 +157,6 @@ Menu.propTypes /* remove-proptypes */ = {
   }),
 } as any;
 
+Menu.displayName = 'Menu';
+
 export { Menu };

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

@@ -119,4 +119,6 @@ MenuButton.propTypes /* remove-proptypes */ = {
   }),
 } as any;
 
+MenuButton.displayName = 'MenuButton';
+
 export { MenuButton };

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

@@ -78,6 +78,8 @@ const InnerMenuItem = React.memo(
  * - [MenuItem API](https://mui.com/base-ui/react-menu/components-api/#menu-item)
  */
 
+InnerMenuItem.displayName = 'InnerMenuItem';
+
 const MenuItem = React.forwardRef(function MenuItem(
   props: MenuItemProps,
   ref: React.ForwardedRef<Element>,
@@ -147,4 +149,6 @@ MenuItem.propTypes /* remove-proptypes */ = {
   }),
 } as any;
 
+MenuItem.displayName = 'MenuItem';
+
 export { MenuItem };

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

@@ -296,4 +296,6 @@ Modal.propTypes /* remove-proptypes */ = {
   }),
 } as any;
 
+Modal.displayName = 'Modal';
+
 export { Modal };

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

@@ -64,6 +64,8 @@ NoSsr.propTypes /* remove-proptypes */ = {
   fallback: PropTypes.node,
 } as any;
 
+NoSsr.displayName = 'NoSsr';
+
 if (process.env.NODE_ENV !== 'production') {
   // eslint-disable-next-line
   (NoSsr as any)['propTypes' + ''] = exactProp(NoSsr.propTypes);

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

@@ -103,6 +103,8 @@ InnerOption.propTypes /* remove-proptypes */ = {
   value: PropTypes.any.isRequired,
 } as any;
 
+InnerOption.displayName = 'InnerOption';
+
 const InnerOptionMemo = React.memo(InnerOption);
 
 /**
@@ -180,4 +182,6 @@ Option.propTypes /* remove-proptypes */ = {
   value: PropTypes.any.isRequired,
 } as any;
 
+Option.displayName = 'Option';
+
 export { Option };

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

@@ -122,4 +122,6 @@ OptionGroup.propTypes /* remove-proptypes */ = {
   }),
 } as any;
 
+OptionGroup.displayName = 'OptionGroup';
+
 export { OptionGroup };

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

@@ -415,6 +415,8 @@ PopperTooltip.propTypes /* remove-proptypes */ = {
   TransitionProps: PropTypes.object,
 } as any;
 
+PopperTooltip.displayName = 'PopperTooltip';
+
 /**
  * Poppers rely on the 3rd party library [Popper.js](https://popper.js.org/docs/v2/) for positioning.
  *
@@ -723,4 +725,6 @@ Popper.propTypes /* remove-proptypes */ = {
   transition: PropTypes.bool,
 } as any;
 
+Popper.displayName = 'Popper';
+
 export { Popper };

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

@@ -104,6 +104,8 @@ Portal.propTypes /* remove-proptypes */ = {
   disablePortal: PropTypes.bool,
 } as any;
 
+Portal.displayName = 'Portal';
+
 if (process.env.NODE_ENV !== 'production') {
   // eslint-disable-next-line
   (Portal as any)['propTypes' + ''] = exactProp((Portal as any).propTypes);

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

@@ -360,4 +360,6 @@ Select.propTypes /* remove-proptypes */ = {
   value: PropTypes.any,
 } as any;
 
+Select.displayName = 'Select';
+
 export { Select };

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

@@ -535,4 +535,6 @@ Slider.propTypes /* remove-proptypes */ = {
   valueLabelFormat: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
 } as any;
 
+Slider.displayName = 'Slider';
+
 export { Slider };

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

@@ -191,4 +191,6 @@ Snackbar.propTypes /* remove-proptypes */ = {
   }),
 } as any;
 
+Snackbar.displayName = 'Snackbar';
+
 export { Snackbar };

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

@@ -196,4 +196,6 @@ Switch.propTypes /* remove-proptypes */ = {
   }),
 } as any;
 
+Switch.displayName = 'Switch';
+
 export { Switch };

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

@@ -130,4 +130,6 @@ Tab.propTypes /* remove-proptypes */ = {
   value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
 } as any;
 
+Tab.displayName = 'Tab';
+
 export { Tab };

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

@@ -100,4 +100,6 @@ TabPanel.propTypes /* remove-proptypes */ = {
   value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
 } as any;
 
+TabPanel.displayName = 'TabPanel';
+
 export { TabPanel };

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

@@ -374,4 +374,6 @@ TablePagination.propTypes /* remove-proptypes */ = {
   }),
 } as any;
 
+TablePagination.displayName = 'TablePagination';
+
 export { TablePagination };

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

@@ -133,4 +133,6 @@ Tabs.propTypes /* remove-proptypes */ = {
   value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
 } as any;
 
+Tabs.displayName = 'Tabs';
+
 export { Tabs };

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

@@ -99,4 +99,6 @@ TabsList.propTypes /* remove-proptypes */ = {
   }),
 } as any;
 
+TabsList.displayName = 'TabsList';
+
 export { TabsList };

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

@@ -262,4 +262,6 @@ TextareaAutosize.propTypes /* remove-proptypes */ = {
   ]),
 } as any;
 
+TextareaAutosize.displayName = 'TextareaAutosize';
+
 export { TextareaAutosize };

packages/mui-base/src/Unstable_NumberInput/NumberInput.tsx

@@ -312,4 +312,6 @@ NumberInput.propTypes /* remove-proptypes */ = {
   value: PropTypes.number,
 } as any;
 
+NumberInput.displayName = 'NumberInput';
+
 export { NumberInput };

packages/mui-base/src/Unstable_Popup/Popup.tsx

@@ -285,4 +285,6 @@ Popup.propTypes /* remove-proptypes */ = {
   strategy: PropTypes.oneOf(['absolute', 'fixed']),
 } as any;
 
+Popup.displayName = 'Popup';
+
 export { Popup };

packages/mui-joy/src/Accordion/Accordion.tsx

@@ -225,4 +225,6 @@ Accordion.propTypes /* remove-proptypes */ = {
   variant: PropTypes.oneOf(['outlined', 'plain', 'soft', 'solid']),
 } as any;
 
+Accordion.displayName = 'Accordion';
+
 export default Accordion;

packages/mui-joy/src/AccordionDetails/AccordionDetails.tsx

@@ -218,4 +218,6 @@ AccordionDetails.propTypes /* remove-proptypes */ = {
   variant: PropTypes.oneOf(['outlined', 'plain', 'soft', 'solid']),
 } as any;
 
+AccordionDetails.displayName = 'AccordionDetails';
+
 export default AccordionDetails;

packages/mui-joy/src/AccordionGroup/AccordionGroup.tsx

@@ -202,4 +202,6 @@ AccordionGroup.propTypes /* remove-proptypes */ = {
   ]),
 } as any;
 
+AccordionGroup.displayName = 'AccordionGroup';
+
 export default AccordionGroup;

packages/mui-joy/src/AccordionSummary/AccordionSummary.tsx

@@ -230,4 +230,6 @@ AccordionSummary.propTypes /* remove-proptypes */ = {
   variant: PropTypes.oneOf(['outlined', 'plain', 'soft', 'solid']),
 } as any;
 
+AccordionSummary.displayName = 'AccordionSummary';
+
 export default AccordionSummary;

packages/mui-joy/src/Alert/Alert.tsx

@@ -278,4 +278,6 @@ Alert.propTypes /* remove-proptypes */ = {
   ]),
 } as any;
 
+Alert.displayName = 'Alert';
+
 export default Alert;

packages/mui-joy/src/AspectRatio/AspectRatio.tsx

@@ -252,4 +252,6 @@ AspectRatio.propTypes /* remove-proptypes */ = {
   ]),
 } as any;
 
+AspectRatio.displayName = 'AspectRatio';
+
 export default AspectRatio;