[Fix] jsx-first-prop-new-line: ensure autofix preserves generics in component name

Fixes #3546

Author: ljharb

CHANGELOG.md

@@ -14,8 +14,10 @@ This change log adheres to standards from [Keep a CHANGELOG](https://keepachange
 * [`no-array-index-key`]: consider flatMap ([#3530][] @k-yle)
 * [`jsx-curly-brace-presence`]: handle single and only expression template literals ([#3538][] @taozhou-glean)
 * [`no-unknown-property`]: allow `onLoad` on `source` (@ljharb)
+* [`jsx-first-prop-new-line`]: ensure autofix preserves generics in component name ([#3546][] @ljharb)
 
 [#3548]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3548
+[#3546]: https://github.com/jsx-eslint/eslint-plugin-react/issues/3546
 [#3538]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3538
 [#3533]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3533
 [#3530]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3530

lib/rules/jsx-first-prop-new-line.js

@@ -54,7 +54,7 @@ module.exports = {
               report(context, messages.propOnNewLine, 'propOnNewLine', {
                 node: decl,
                 fix(fixer) {
-                  return fixer.replaceTextRange([node.name.range[1], decl.range[0]], '\n');
+                  return fixer.replaceTextRange([(node.typeParameters || node.name).range[1], decl.range[0]], '\n');
                 },
               });
             }

tests/lib/rules/jsx-first-prop-new-line.js

@@ -260,5 +260,27 @@ bar />
       options: ['multiprop'],
       errors: [{ messageId: 'propOnSameLine' }],
     },
+    {
+      code: `
+        <DataTable<Items> fullscreen keyField="id" items={items}
+          activeSortableColumn={sorting}
+          onSortClick={handleSortedClick}
+          rowActions={[
+          ]}
+        />
+      `,
+      features: ['ts'],
+      output: `
+        <DataTable<Items>
+fullscreen keyField="id" items={items}
+          activeSortableColumn={sorting}
+          onSortClick={handleSortedClick}
+          rowActions={[
+          ]}
+        />
+      `,
+      options: ['multiline'],
+      errors: [{ messageId: 'propOnNewLine' }],
+    },
   ]),
 });

tests/lib/rules/jsx-max-props-per-line.js

@@ -535,5 +535,63 @@ baz bor
         },
       ],
     },
+    {
+      code: `
+        <DataTable<Items> fullscreen keyField="id" items={items}
+          activeSortableColumn={sorting}
+          onSortClick={handleSortedClick}
+          rowActions={[
+          ]}
+        />
+      `,
+      features: ['ts'],
+      output: `
+        <DataTable<Items> fullscreen
+keyField="id"
+items={items}
+          activeSortableColumn={sorting}
+          onSortClick={handleSortedClick}
+          rowActions={[
+          ]}
+        />
+      `,
+      options: [{ maximum: { multi: 1, single: 1 } }],
+      errors: [
+        {
+          messageId: 'newLine',
+          data: { prop: 'keyField' },
+        },
+      ],
+    },
+    {
+      code: `
+        <DataTable<Items>
+fullscreen keyField="id" items={items}
+          activeSortableColumn={sorting}
+          onSortClick={handleSortedClick}
+          rowActions={[
+          ]}
+        />
+      `,
+      features: ['ts'],
+      output: `
+        <DataTable<Items>
+fullscreen
+keyField="id"
+items={items}
+          activeSortableColumn={sorting}
+          onSortClick={handleSortedClick}
+          rowActions={[
+          ]}
+        />
+      `,
+      options: [{ maximum: { multi: 1, single: 1 } }],
+      errors: [
+        {
+          messageId: 'newLine',
+          data: { prop: 'keyField' },
+        },
+      ],
+    },
   ]),
 });