Get JSX in arrow in method call to be consistent (#17616)

* add failing test

* fix #17489

* add more tests

* refactor ...but perhaps get ugly? I'm not sure

* Apply automated changes

* utilize path.match

* add changelog

---------

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>

changelog_unreleased/javascript/17616.md

@@ -0,0 +1,46 @@
+#### Improve consistency for JSX in optional method call (#17616 by @seiyab)
+
+<!-- prettier-ignore -->
+```jsx
+// Input
+<SuspendyTree>
+  <div style={{ height: 200, overflow: "scroll" }}>
+    {Array(20)
+      .fill()
+      ?.map((_, i) => (
+        <h2 key={i}>{i + 1}</h2>
+      ))}
+  </div>
+</SuspendyTree>;
+
+// Prettier stable (ESTree based parsers like espree and typescript)
+<SuspendyTree>
+  <div style={{ height: 200, overflow: "scroll" }}>
+    {Array(20)
+      .fill()
+      ?.map((_, i) => <h2 key={i}>{i + 1}</h2>)}
+  </div>
+</SuspendyTree>;
+
+// Prettier stable (babel and babel-ts parser)
+<SuspendyTree>
+  <div style={{ height: 200, overflow: "scroll" }}>
+    {Array(20)
+      .fill()
+      ?.map((_, i) => (
+        <h2 key={i}>{i + 1}</h2>
+      ))}
+  </div>
+</SuspendyTree>;
+
+// Prettier main (parsers of both types)
+<SuspendyTree>
+  <div style={{ height: 200, overflow: "scroll" }}>
+    {Array(20)
+      .fill()
+      ?.map((_, i) => (
+        <h2 key={i}>{i + 1}</h2>
+      ))}
+  </div>
+</SuspendyTree>;
+```

src/language-js/print/jsx.js

@@ -504,13 +504,7 @@ function maybeWrapJsxElementInParens(path, elem, options) {
     return elem;
   }
 
-  const shouldBreak = path.match(
-    undefined,
-    (node) => node.type === "ArrowFunctionExpression",
-    isCallExpression,
-    (node) => node.type === "JSXExpressionContainer",
-  );
-
+  const shouldBreak = shouldBreakJsxElement(path);
   const needsParens = pathNeedsParens(path, options);
 
   return group(
@@ -524,6 +518,31 @@ function maybeWrapJsxElementInParens(path, elem, options) {
   );
 }
 
+function shouldBreakJsxElement(path) {
+  return (
+    path.match(
+      undefined,
+      (node) => node.type === "ArrowFunctionExpression",
+      isCallExpression,
+    ) &&
+    // Babel
+    (path.match(
+      undefined,
+      undefined,
+      undefined,
+      (node) => node.type === "JSXExpressionContainer",
+    ) ||
+      // Estree
+      path.match(
+        undefined,
+        undefined,
+        undefined,
+        (node) => node.type === "ChainExpression",
+        (node) => node.type === "JSXExpressionContainer",
+      ))
+  );
+}
+
 function printJsxAttribute(path, options, print) {
   const { node } = path;
   const parts = [];

tests/format/jsx/optional-chaining/__snapshots__/format.test.js.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`optional-chaining.jsx format 1`] = `
 ====================================options=====================================
@@ -18,6 +18,46 @@ function foo() {
   )
 }
 
+function Component( ) {
+  return (
+    <div>
+      {aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa?.bbbbbbbbbbbbbbbbbbbbbbbbb.map(
+        (p, i) => <p key={i}>{p}</p>
+      )}
+    </div>
+  );
+}
+
+function Component() {
+  return (
+    <div>
+      {aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa?.bbbbbbbbbbbbbbbbbbbbbbbbb().map(
+        (p, i) => <p key={i}>{p}</p>
+      )}
+    </div>
+  );
+}
+
+function Component() {
+  return (
+    <div>
+      {aaa?.aaa()?.aaa()?.map(
+        (p, i) => <p key={i}>{p}</p>
+      )}
+    </div>
+  );
+}
+
+function Component() {
+  return (
+    <div>
+      {aaa?.aaa?.()?.aaa?.()?.map?.(
+        (p, i) => <p key={i}>{p}</p>
+      )}
+    </div>
+  );
+}
+
 =====================================output=====================================
 function foo() {
   // https://github.com/marmelab/react-admin/blob/5ae855aa958ba54438b144bf0907b1437c5a5d77/examples/demo/src/orders/Totals.tsx#L38-L43
@@ -31,5 +71,55 @@ function foo() {
   );
 }
 
+function Component() {
+  return (
+    <div>
+      {aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa?.bbbbbbbbbbbbbbbbbbbbbbbbb.map(
+        (p, i) => (
+          <p key={i}>{p}</p>
+        ),
+      )}
+    </div>
+  );
+}
+
+function Component() {
+  return (
+    <div>
+      {aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
+        ?.bbbbbbbbbbbbbbbbbbbbbbbbb()
+        .map((p, i) => (
+          <p key={i}>{p}</p>
+        ))}
+    </div>
+  );
+}
+
+function Component() {
+  return (
+    <div>
+      {aaa
+        ?.aaa()
+        ?.aaa()
+        ?.map((p, i) => (
+          <p key={i}>{p}</p>
+        ))}
+    </div>
+  );
+}
+
+function Component() {
+  return (
+    <div>
+      {aaa
+        ?.aaa?.()
+        ?.aaa?.()
+        ?.map?.((p, i) => (
+          <p key={i}>{p}</p>
+        ))}
+    </div>
+  );
+}
+
 ================================================================================
 `;

tests/format/jsx/optional-chaining/optional-chaining.jsx

@@ -9,3 +9,43 @@ function foo() {
       </TableCell>
   )
 }
+
+function Component( ) {
+  return (
+    <div>
+      {aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa?.bbbbbbbbbbbbbbbbbbbbbbbbb.map(
+        (p, i) => <p key={i}>{p}</p>
+      )}
+    </div>
+  );
+}
+
+function Component() {
+  return (
+    <div>
+      {aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa?.bbbbbbbbbbbbbbbbbbbbbbbbb().map(
+        (p, i) => <p key={i}>{p}</p>
+      )}
+    </div>
+  );
+}
+
+function Component() {
+  return (
+    <div>
+      {aaa?.aaa()?.aaa()?.map(
+        (p, i) => <p key={i}>{p}</p>
+      )}
+    </div>
+  );
+}
+
+function Component() {
+  return (
+    <div>
+      {aaa?.aaa?.()?.aaa?.()?.map?.(
+        (p, i) => <p key={i}>{p}</p>
+      )}
+    </div>
+  );
+}