fix(format/js): fix arrow function type annotation inconsistency with…

… prettier (#2766)

crates/biome_js_formatter/src/utils/assignment_like.rs

@@ -888,7 +888,23 @@ impl AnyJsAssignmentLike {
 
         let is_complex_type_alias = self.is_complex_type_alias()?;
 
-        Ok(is_complex_destructuring || has_complex_type_annotation || is_complex_type_alias)
+        let is_right_arrow_func = self.right().map_or(false, |right| match right {
+            RightAssignmentLike::JsInitializerClause(init) => {
+                init.expression().map_or(false, |expression| {
+                    matches!(expression, AnyJsExpression::JsArrowFunctionExpression(_))
+                })
+            }
+            _ => false,
+        });
+        let is_breakable = self
+            .annotation()
+            .and_then(|annotation| is_annotation_breakable(annotation).ok())
+            .unwrap_or(false);
+
+        Ok(is_complex_destructuring
+            || has_complex_type_annotation
+            || is_complex_type_alias
+            || (is_right_arrow_func && is_breakable))
     }
 
     /// Checks if the current assignment is eligible for [AssignmentLikeLayout::BreakAfterOperator]
@@ -1341,6 +1357,22 @@ fn is_nested_union_type(union_type: &TsUnionType) -> SyntaxResult<bool> {
     Ok(false)
 }
 
+fn is_annotation_breakable(annotation: AnyTsVariableAnnotation) -> SyntaxResult<bool> {
+    let is_breakable = annotation
+        .type_annotation()?
+        .and_then(|type_annotation| type_annotation.ty().ok())
+        .map_or(false, |ty| match ty {
+            AnyTsType::TsReferenceType(reference_type) => {
+                reference_type.type_arguments().map_or(false, |type_args| {
+                    type_args.ts_type_argument_list().len() > 0
+                })
+            }
+            _ => false,
+        });
+
+    Ok(is_breakable)
+}
+
 /// Formats an expression and passes the assignment layout to its formatting function if the expressions
 /// formatting rule takes the layout as an option.
 pub(crate) struct WithAssignmentLayout<'a> {

crates/biome_js_formatter/tests/specs/tsx/arrow/issue-2736.tsx

@@ -0,0 +1,19 @@
+type MenuDividerProps = {};
+type MedddddddddMenuDividerPropsMenuDividerPropsz = {};
+type MedddddddddMenuDividerPropsMenuDividerPropszz = {};
+type MedddddddddMenuDividerPropsMenuDividerPropszzz = {};
+type ReactFFC<T> = {};
+
+const ValueMenuDivider: React.FC<{ value: string } & Omit<MenuDividerProps, 'svalue'>> = ({ value }) => {
+  return <OriginalMenuDivider />;
+};
+
+const ValueMenuDivider2: React.FC<{ value: string } & Omit<MenuDividerProps, 'svalue', 'anothervalue'>> = ({ value }) => {
+  return <OriginalMenuDivider />;
+};
+
+const ValueMenuDivide: ReactFFC<MedddddddddMenuDividerPropsMenuDividerPropsz>=(x) => 5;
+
+const ValueMenuDividf: ReactFFC<MedddddddddMenuDividerPropsMenuDividerPropszz>=(x) => 5;
+
+const ValueMenuDividg: ReactFFC<MedddddddddMenuDividerPropsMenuDividerPropszzz>=(x) => 5;

crates/biome_js_formatter/tests/specs/tsx/arrow/issue-2736.tsx.snap

@@ -0,0 +1,83 @@
+---
+source: crates/biome_formatter_test/src/snapshot_builder.rs
+info: tsx/arrow/issue-2736.tsx
+---
+# Input
+
+```tsx
+type MenuDividerProps = {};
+type MedddddddddMenuDividerPropsMenuDividerPropsz = {};
+type MedddddddddMenuDividerPropsMenuDividerPropszz = {};
+type MedddddddddMenuDividerPropsMenuDividerPropszzz = {};
+type ReactFFC<T> = {};
+
+const ValueMenuDivider: React.FC<{ value: string } & Omit<MenuDividerProps, 'svalue'>> = ({ value }) => {
+  return <OriginalMenuDivider />;
+};
+
+const ValueMenuDivider2: React.FC<{ value: string } & Omit<MenuDividerProps, 'svalue', 'anothervalue'>> = ({ value }) => {
+  return <OriginalMenuDivider />;
+};
+
+const ValueMenuDivide: ReactFFC<MedddddddddMenuDividerPropsMenuDividerPropsz>=(x) => 5;
+
+const ValueMenuDividf: ReactFFC<MedddddddddMenuDividerPropsMenuDividerPropszz>=(x) => 5;
+
+const ValueMenuDividg: ReactFFC<MedddddddddMenuDividerPropsMenuDividerPropszzz>=(x) => 5;
+
+```
+
+
+=============================
+
+# Outputs
+
+## Output 1
+
+-----
+Indent style: Tab
+Indent width: 2
+Line ending: LF
+Line width: 80
+Quote style: Double Quotes
+JSX quote style: Double Quotes
+Quote properties: As needed
+Trailing comma: All
+Semicolons: Always
+Arrow parentheses: Always
+Bracket spacing: true
+Bracket same line: false
+Attribute Position: Auto
+-----
+
+```tsx
+type MenuDividerProps = {};
+type MedddddddddMenuDividerPropsMenuDividerPropsz = {};
+type MedddddddddMenuDividerPropsMenuDividerPropszz = {};
+type MedddddddddMenuDividerPropsMenuDividerPropszzz = {};
+type ReactFFC<T> = {};
+
+const ValueMenuDivider: React.FC<
+	{ value: string } & Omit<MenuDividerProps, "svalue">
+> = ({ value }) => {
+	return <OriginalMenuDivider />;
+};
+
+const ValueMenuDivider2: React.FC<
+	{ value: string } & Omit<MenuDividerProps, "svalue", "anothervalue">
+> = ({ value }) => {
+	return <OriginalMenuDivider />;
+};
+
+const ValueMenuDivide: ReactFFC<
+	MedddddddddMenuDividerPropsMenuDividerPropsz
+> = (x) => 5;
+
+const ValueMenuDividf: ReactFFC<
+	MedddddddddMenuDividerPropsMenuDividerPropszz
+> = (x) => 5;
+
+const ValueMenuDividg: ReactFFC<
+	MedddddddddMenuDividerPropsMenuDividerPropszzz
+> = (x) => 5;
+```