From e1cf8c59c4db28041525f3b1afaab57051ff9af1 Mon Sep 17 00:00:00 2001
From: Jordan Harband <ljharb@gmail.com>
Date: Tue, 14 Mar 2023 12:09:43 -0700
Subject: [PATCH] [Fix] `jsx-first-prop-new-line`: ensure autofix preserves
 generics in component name

Fixes #3546
---
 CHANGELOG.md                               |  2 +
 lib/rules/jsx-first-prop-new-line.js       |  2 +-
 tests/lib/rules/jsx-first-prop-new-line.js | 22 ++++++++
 tests/lib/rules/jsx-max-props-per-line.js  | 58 ++++++++++++++++++++++
 4 files changed, 83 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index ebc0fec0ce..e47612deb3 100644
--- a/CHANGELOG.md
+++ b/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
diff --git a/lib/rules/jsx-first-prop-new-line.js b/lib/rules/jsx-first-prop-new-line.js
index 143368c137..026ab384a0 100644
--- a/lib/rules/jsx-first-prop-new-line.js
+++ b/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');
                 },
               });
             }
diff --git a/tests/lib/rules/jsx-first-prop-new-line.js b/tests/lib/rules/jsx-first-prop-new-line.js
index 7e5d485689..847f55de64 100644
--- a/tests/lib/rules/jsx-first-prop-new-line.js
+++ b/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' }],
+    },
   ]),
 });
diff --git a/tests/lib/rules/jsx-max-props-per-line.js b/tests/lib/rules/jsx-max-props-per-line.js
index 356898242f..c59187a0b1 100644
--- a/tests/lib/rules/jsx-max-props-per-line.js
+++ b/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' },
+        },
+      ],
+    },
   ]),
 });