[StaticDateRangePicker] Fix inconsistent name for theme props

.eslintrc.js

@@ -118,6 +118,7 @@ module.exports = {
     'jsx-a11y/no-autofocus': 'off',
 
     'material-ui/docgen-ignore-before-comment': 'error',
+    'material-ui/mui-name-matches-component-name': 'error',
     'material-ui/rules-of-use-theme-variants': 'error',
 
     'react-hooks/exhaustive-deps': ['error', { additionalHooks: 'useEnhancedEffect' }],
@@ -178,6 +179,7 @@ module.exports = {
         ],
 
         'material-ui/disallow-active-element-as-key-event-target': 'error',
+        // 'material-ui/mui-name-matches-component-name': 'off',
 
         // upgraded level from recommended
         'mocha/no-exclusive-tests': 'error',

packages/eslint-plugin-material-ui/src/index.js

@@ -2,6 +2,7 @@
 module.exports.rules = {
   'disallow-active-element-as-key-event-target': require('./rules/disallow-active-element-as-key-event-target'),
   'docgen-ignore-before-comment': require('./rules/docgen-ignore-before-comment'),
+  'mui-name-matches-component-name': require('./rules/mui-name-matches-component-name'),
   'no-hardcoded-labels': require('./rules/no-hardcoded-labels'),
   'rules-of-use-theme-variants': require('./rules/rules-of-use-theme-variants'),
 };

packages/eslint-plugin-material-ui/src/rules/mui-name-matches-component-name.js

@@ -0,0 +1,54 @@
+const rule = {
+  meta: {
+    messages: {
+      nameMismatch: "Expected `name` to be 'Mui{{ componentName }}' but instead got '{{ name }}'.",
+      noComponent: 'Unable to find component for this call.',
+      noNameProperty: 'Unable to find `name` property. Did you forget to pass `name`?',
+      noNameValue:
+        'Unable to resolve `name`. Please hardcode the `name` i.e. use a string literal.',
+    },
+  },
+  create(context) {
+    return {
+      CallExpression(node) {
+        const isUseThemePropsCall = node.callee.name === 'useThemeProps';
+        if (isUseThemePropsCall) {
+          const nameProperty = node.arguments[0].properties.find(
+            (property) => property.key.name === 'name',
+          );
+          if (nameProperty === undefined) {
+            context.report({ node: node.arguments[0], messageId: 'noNameProperty' });
+            return;
+          }
+          if (nameProperty.value.type !== 'Literal') {
+            context.report({ node: nameProperty.value, messageId: 'noNameValue' });
+            return;
+          }
+          const name = nameProperty.value.value;
+
+          let componentName = null;
+          let parent = node.parent;
+          while (parent != null && componentName === null) {
+            if (parent.type === 'FunctionExpression' || parent.type === 'FunctionDeclaration') {
+              componentName = parent.id.name;
+            }
+
+            parent = parent.parent;
+          }
+
+          if (componentName === null) {
+            context.report({ node, messageId: 'noComponent' });
+          } else if (name !== `Mui${componentName}`) {
+            context.report({
+              node: nameProperty.value,
+              messageId: `nameMismatch`,
+              data: { componentName, name },
+            });
+          }
+        }
+      },
+    };
+  },
+};
+
+module.exports = rule;

packages/eslint-plugin-material-ui/src/rules/mui-name-matches-component-name.test.js

@@ -0,0 +1,63 @@
+const eslint = require('eslint');
+const rule = require('./mui-name-matches-component-name');
+
+const ruleTester = new eslint.RuleTester({ parser: require.resolve('@typescript-eslint/parser') });
+ruleTester.run('mui-name-matches-component-name', rule, {
+  valid: [
+    `
+      const StaticDateRangePicker = React.forwardRef(function StaticDateRangePicker<TDate>(
+        inProps: StaticDateRangePickerProps<TDate>,
+        ref: React.Ref<HTMLDivElement>,
+      ) {
+        const props = useThemeProps({ props: inProps, name: 'MuiStaticDateRangePicker' });
+      });
+    `,
+    `
+      function CssBaseline(inProps) {
+        useThemeProps({ props: inProps, name: 'MuiCssBaseline' });
+      }
+    `,
+  ],
+  invalid: [
+    {
+      code: `
+        const StaticDateRangePicker = React.forwardRef(function StaticDateRangePicker<TDate>(
+          inProps: StaticDateRangePickerProps<TDate>,
+          ref: React.Ref<HTMLDivElement>,
+        ) {
+          const props = useThemeProps({ props: inProps, name: 'MuiPickersDateRangePicker' });
+        });
+      `,
+      errors: [
+        {
+          message:
+            "Expected `name` to be 'MuiStaticDateRangePicker' but instead got 'MuiPickersDateRangePicker'.",
+          type: 'Literal',
+        },
+      ],
+    },
+    {
+      code: 'useThemeProps({ props: inProps })',
+      errors: [
+        {
+          message: 'Unable to find `name` property. Did you forget to pass `name`?',
+          type: 'ObjectExpression',
+        },
+      ],
+    },
+    {
+      code: 'useThemeProps({ props: inProps, name })',
+      errors: [
+        {
+          message:
+            'Unable to resolve `name`. Please hardcode the `name` i.e. use a string literal.',
+          type: 'Identifier',
+        },
+      ],
+    },
+    {
+      code: "useThemeProps({ props: inProps, name: 'MuiPickersDateRangePicker' })",
+      errors: [{ message: 'Unable to find component for this call.', type: 'CallExpression' }],
+    },
+  ],
+});

packages/material-ui-lab/src/DatePicker/DatePicker.tsx

@@ -84,7 +84,6 @@ export type DatePickerGenericComponent<PublicWrapperProps> = (<TDate>(
   props: BaseDatePickerProps<TDate> & SharedPickerProps<TDate, PublicWrapperProps>,
 ) => JSX.Element) & { propTypes?: any };
 
-const name = 'MuiDatePicker';
 const { DefaultToolbarComponent, useInterceptProps, useValidation } = datePickerConfig;
 
 export interface DatePickerProps<TDate = unknown>
@@ -112,7 +111,7 @@ const DatePicker = React.forwardRef(function DatePicker<TDate>(
   // Optional props can be filled by `useThemeProps` with types that don't match the type parameters.
   const props: AllResponsiveDatePickerProps = useThemeProps({
     props: allProps,
-    name,
+    name: 'MuiDatePicker',
   });
 
   const validationError = useValidation(props.value, props) !== null;

packages/material-ui-lab/src/DesktopDateTimePicker/DesktopDateTimePicker.tsx

@@ -26,7 +26,6 @@ const valueManager: PickerStateValueManager<unknown, unknown> = {
   areValuesEqual: (utils: MuiPickersAdapter, a: unknown, b: unknown) => utils.isEqual(a, b),
 };
 
-const name = 'MuiDesktopDateTimePicker';
 const { DefaultToolbarComponent, useInterceptProps, useValidation } = dateTimePickerConfig;
 
 export interface DesktopDateTimePickerProps<TDate = unknown>
@@ -54,7 +53,7 @@ const DesktopDateTimePicker = React.forwardRef(function DesktopDateTimePicker<TD
   // Optional props can be filled by `useThemeProps` with types that don't match the type parameters.
   const props: AllDesktopDateTimePickerProps = useThemeProps({
     props: allProps,
-    name,
+    name: 'MuiDesktopDateTimePicker',
   });
 
   const validationError = useValidation(props.value, props) !== null;

packages/material-ui-lab/src/StaticDatePicker/StaticDatePicker.tsx

@@ -39,7 +39,7 @@ export interface StaticDatePickerProps<TDate = unknown>
  *
  * - [StaticDatePicker API](https://material-ui.com/api/static-date-picker/)
  */
-const StaticDatePicker = React.forwardRef(function PickerWithState<TDate>(
+const StaticDatePicker = React.forwardRef(function StaticDatePicker<TDate>(
   inProps: StaticDatePickerProps<TDate>,
   ref: React.Ref<HTMLDivElement>,
 ) {

packages/material-ui-lab/src/StaticDateRangePicker/StaticDateRangePicker.tsx

@@ -97,7 +97,7 @@ const StaticDateRangePicker = React.forwardRef(function StaticDateRangePicker<TD
   inProps: StaticDateRangePickerProps<TDate>,
   ref: React.Ref<HTMLDivElement>,
 ) {
-  const props = useThemeProps({ props: inProps, name: 'MuiPickersDateRangePicker' });
+  const props = useThemeProps({ props: inProps, name: 'MuiStaticDateRangePicker' });
 
   const {
     calendars = 2,

packages/material-ui/src/styles/useThemeProps.spec.ts

@@ -1,3 +1,4 @@
+/* eslint-disable material-ui/mui-name-matches-component-name */
 import { Theme, unstable_useThemeProps as useThemeProps } from '@material-ui/core/styles';
 import { SliderProps } from '@material-ui/core/Slider';
 import { expectType } from '@material-ui/types';