From 64ae99ece84020e1576b26dd7645c2063e37a24b Mon Sep 17 00:00:00 2001
From: Puneet Lath <puneet@expensify.com>
Date: Wed, 28 Feb 2024 10:34:55 -0500
Subject: [PATCH] Merge pull request #37389 from
 neonbhai/selection-list-multiline-fix

[Categories] Add support for long category names

(cherry picked from commit b384904ddb95c760d5ccdf8b7b3d7883ed1b1ebe)
---
 src/components/CategoryPicker/index.js             | 1 +
 src/components/SelectionList/BaseSelectionList.tsx | 2 ++
 src/components/SelectionList/RadioListItem.tsx     | 4 +++-
 src/components/SelectionList/types.ts              | 9 +++++++++
 src/components/TextWithTooltip/index.native.tsx    | 4 ++--
 src/components/TextWithTooltip/index.tsx           | 4 ++--
 src/components/TextWithTooltip/types.ts            | 8 ++++++++
 7 files changed, 27 insertions(+), 5 deletions(-)

diff --git a/src/components/CategoryPicker/index.js b/src/components/CategoryPicker/index.js
index 2374fc9e5d0c..89312a7ca614 100644
--- a/src/components/CategoryPicker/index.js
+++ b/src/components/CategoryPicker/index.js
@@ -70,6 +70,7 @@ function CategoryPicker({selectedCategory, policyCategories, policyRecentlyUsedC
             onSelectRow={onSubmit}
             ListItem={RadioListItem}
             initiallyFocusedOptionKey={selectedOptionKey}
+            isRowMultilineSupported
         />
     );
 }
diff --git a/src/components/SelectionList/BaseSelectionList.tsx b/src/components/SelectionList/BaseSelectionList.tsx
index 1c69d00b3910..9db0b4102b99 100644
--- a/src/components/SelectionList/BaseSelectionList.tsx
+++ b/src/components/SelectionList/BaseSelectionList.tsx
@@ -63,6 +63,7 @@ function BaseSelectionList<TItem extends ListItem>(
         onLayout,
         customListHeader,
         listHeaderWrapperStyle,
+        isRowMultilineSupported = false,
     }: BaseSelectionListProps<TItem>,
     inputRef: ForwardedRef<RNTextInput>,
 ) {
@@ -293,6 +294,7 @@ function BaseSelectionList<TItem extends ListItem>(
                 shouldPreventDefaultFocusOnSelectRow={shouldPreventDefaultFocusOnSelectRow}
                 rightHandSideComponent={rightHandSideComponent}
                 keyForList={item.keyForList}
+                isMultilineSupported={isRowMultilineSupported}
             />
         );
     };
diff --git a/src/components/SelectionList/RadioListItem.tsx b/src/components/SelectionList/RadioListItem.tsx
index b3340a0faf7a..019cae84d156 100644
--- a/src/components/SelectionList/RadioListItem.tsx
+++ b/src/components/SelectionList/RadioListItem.tsx
@@ -16,6 +16,7 @@ function RadioListItem({
     onDismissError,
     shouldPreventDefaultFocusOnSelectRow,
     rightHandSideComponent,
+    isMultilineSupported = false,
 }: RadioListItemProps) {
     const styles = useThemeStyles();
     const StyleUtils = useStyleUtils();
@@ -44,9 +45,10 @@ function RadioListItem({
                             styles.optionDisplayName,
                             isFocused ? styles.sidebarLinkActiveText : styles.sidebarLinkText,
                             styles.sidebarLinkTextBold,
-                            styles.pre,
+                            isMultilineSupported ? styles.preWrap : styles.pre,
                             item.alternateText ? styles.mb1 : null,
                         ]}
+                        numberOfLines={isMultilineSupported ? 2 : 1}
                     />
 
                     {!!item.alternateText && (
diff --git a/src/components/SelectionList/types.ts b/src/components/SelectionList/types.ts
index 59f6b14cfb1f..620f1d4cb39b 100644
--- a/src/components/SelectionList/types.ts
+++ b/src/components/SelectionList/types.ts
@@ -37,6 +37,9 @@ type CommonListItemProps<TItem> = {
 
     /** Styles for the checkbox wrapper view if select multiple option is on */
     selectMultipleStyle?: StyleProp<ViewStyle>;
+
+    /** Whether to wrap long text up to 2 lines */
+    isMultilineSupported?: boolean;
 };
 
 type ListItem = {
@@ -83,6 +86,9 @@ type ListItem = {
 
     /** Whether this option should show subscript */
     shouldShowSubscript?: boolean;
+
+    /** Whether to wrap long text up to 2 lines */
+    isMultilineSupported?: boolean;
 };
 
 type ListItemProps = CommonListItemProps<ListItem> & {
@@ -258,6 +264,9 @@ type BaseSelectionListProps<TItem extends ListItem> = Partial<ChildrenProps> & {
 
     /** Styles for the list header wrapper */
     listHeaderWrapperStyle?: StyleProp<ViewStyle>;
+
+    /** Whether to wrap long text up to 2 lines */
+    isRowMultilineSupported?: boolean;
 };
 
 type ItemLayout = {
diff --git a/src/components/TextWithTooltip/index.native.tsx b/src/components/TextWithTooltip/index.native.tsx
index f8013ae00e4c..3780df6362be 100644
--- a/src/components/TextWithTooltip/index.native.tsx
+++ b/src/components/TextWithTooltip/index.native.tsx
@@ -2,11 +2,11 @@ import React from 'react';
 import Text from '@components/Text';
 import type TextWithTooltipProps from './types';
 
-function TextWithTooltip({text, textStyles}: TextWithTooltipProps) {
+function TextWithTooltip({text, textStyles, numberOfLines = 1}: TextWithTooltipProps) {
     return (
         <Text
             style={textStyles}
-            numberOfLines={1}
+            numberOfLines={numberOfLines}
         >
             {text}
         </Text>
diff --git a/src/components/TextWithTooltip/index.tsx b/src/components/TextWithTooltip/index.tsx
index fd202db8de64..96721488c6db 100644
--- a/src/components/TextWithTooltip/index.tsx
+++ b/src/components/TextWithTooltip/index.tsx
@@ -7,7 +7,7 @@ type LayoutChangeEvent = {
     target: HTMLElement;
 };
 
-function TextWithTooltip({text, shouldShowTooltip, textStyles}: TextWithTooltipProps) {
+function TextWithTooltip({text, shouldShowTooltip, textStyles, numberOfLines = 1}: TextWithTooltipProps) {
     const [showTooltip, setShowTooltip] = useState(false);
 
     return (
@@ -17,7 +17,7 @@ function TextWithTooltip({text, shouldShowTooltip, textStyles}: TextWithTooltipP
         >
             <Text
                 style={textStyles}
-                numberOfLines={1}
+                numberOfLines={numberOfLines}
                 onLayout={(e) => {
                     const target = (e.nativeEvent as unknown as LayoutChangeEvent).target;
                     if (!shouldShowTooltip) {
diff --git a/src/components/TextWithTooltip/types.ts b/src/components/TextWithTooltip/types.ts
index 80517b0b2acf..19c0b0dca6ed 100644
--- a/src/components/TextWithTooltip/types.ts
+++ b/src/components/TextWithTooltip/types.ts
@@ -1,9 +1,17 @@
 import type {StyleProp, TextStyle} from 'react-native';
 
 type TextWithTooltipProps = {
+    /** The text to display */
     text: string;
+
+    /** Whether to show the toolip text */
     shouldShowTooltip: boolean;
+
+    /** Additional text styles */
     textStyles?: StyleProp<TextStyle>;
+
+    /** Custom number of lines for text wrapping */
+    numberOfLines?: number;
 };
 
 export default TextWithTooltipProps;