Merge pull request #37389 from neonbhai/selection-list-multiline-fix

[Categories] Add support for long category names

(cherry picked from commit b384904)

src/components/CategoryPicker/index.js

@@ -70,6 +70,7 @@ function CategoryPicker({selectedCategory, policyCategories, policyRecentlyUsedC
             onSelectRow={onSubmit}
             ListItem={RadioListItem}
             initiallyFocusedOptionKey={selectedOptionKey}
+            isRowMultilineSupported
         />
     );
 }

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}
             />
         );
     };

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 && (

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 = {

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>

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) {

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;