Merge pull request Expensify#68100 from Expensify/vit-66924

[CP Staging] Revert "Merge pull request Expensify#66924 from callstack-internal/fix/1193-improve-workspace-opening"

Author: techievivek

src/components/SelectionList/BaseSelectionList.tsx

@@ -637,16 +637,15 @@ function BaseSelectionList<TItem extends ListItem>(
         const isItemFocused = (!isDisabled || selected) && focusedIndex === normalizedIndex;
         const isItemHighlighted = !!itemsToHighlight?.has(item.keyForList ?? '');
 
-        const newItem = item;
-        if (!item.isSelected) {
-            newItem.isSelected = selected;
-        }
-
         return (
             <View onLayout={(event: LayoutChangeEvent) => onItemLayout(event, item?.keyForList)}>
                 <BaseSelectionListItemRenderer
                     ListItem={ListItem}
-                    item={newItem}
+                    item={{
+                        shouldAnimateInHighlight: isItemHighlighted,
+                        isSelected: selected,
+                        ...item,
+                    }}
                     shouldUseDefaultRightHandSideCheckmark={shouldUseDefaultRightHandSideCheckmark}
                     index={index}
                     isFocused={isItemFocused}
@@ -672,7 +671,6 @@ function BaseSelectionList<TItem extends ListItem>(
                     singleExecution={singleExecution}
                     titleContainerStyles={listItemTitleContainerStyles}
                     canShowProductTrainingTooltip={canShowProductTrainingTooltipMemo}
-                    shouldAnimateInHighlight={isItemHighlighted}
                 />
             </View>
         );

src/components/SelectionList/BaseSelectionListItemRenderer.tsx

@@ -50,7 +50,6 @@ function BaseSelectionListItemRenderer<TItem extends ListItem>({
     singleExecution,
     titleContainerStyles,
     shouldUseDefaultRightHandSideCheckmark,
-    shouldAnimateInHighlight,
     canShowProductTrainingTooltip = true,
     userWalletTierName,
     isUserValidated,
@@ -107,7 +106,6 @@ function BaseSelectionListItemRenderer<TItem extends ListItem>({
                 titleContainerStyles={titleContainerStyles}
                 shouldUseDefaultRightHandSideCheckmark={shouldUseDefaultRightHandSideCheckmark}
                 canShowProductTrainingTooltip={canShowProductTrainingTooltip}
-                shouldAnimateInHighlight={shouldAnimateInHighlight}
                 userWalletTierName={userWalletTierName}
                 isUserValidated={isUserValidated}
                 personalDetails={personalDetails}

src/components/SelectionList/ChatListItem.tsx

@@ -22,7 +22,6 @@ function ChatListItem<TItem extends ListItem>({
     shouldSyncFocus,
     policies,
     allReports,
-    shouldAnimateInHighlight,
     userWalletTierName,
     isUserValidated,
     personalDetails,
@@ -35,7 +34,7 @@ function ChatListItem<TItem extends ListItem>({
     const theme = useTheme();
     const animatedHighlightStyle = useAnimatedHighlightStyle({
         borderRadius: variables.componentBorderRadius,
-        shouldHighlight: shouldAnimateInHighlight ?? false,
+        shouldHighlight: item?.shouldAnimateInHighlight ?? false,
         highlightColor: theme.messageHighlightBG,
         backgroundColor: theme.highlightBG,
     });

src/components/SelectionList/Search/TaskListItem.tsx

@@ -18,7 +18,6 @@ function TaskListItem<TItem extends ListItem>({
     onFocus,
     onLongPressRow,
     shouldSyncFocus,
-    shouldAnimateInHighlight,
 }: TaskListItemProps<TItem>) {
     const taskItem = item as unknown as TaskListItemType;
     const styles = useThemeStyles();
@@ -44,7 +43,7 @@ function TaskListItem<TItem extends ListItem>({
 
     const animatedHighlightStyle = useAnimatedHighlightStyle({
         borderRadius: variables.componentBorderRadius,
-        shouldHighlight: shouldAnimateInHighlight ?? false,
+        shouldHighlight: item?.shouldAnimateInHighlight ?? false,
         highlightColor: theme.messageHighlightBG,
         backgroundColor: theme.highlightBG,
     });

src/components/SelectionList/Search/TransactionGroupListItem.tsx

@@ -45,7 +45,6 @@ function TransactionGroupListItem<TItem extends ListItem>({
     onLongPressRow,
     shouldSyncFocus,
     groupBy,
-    shouldAnimateInHighlight,
 }: TransactionGroupListItemProps<TItem>) {
     const groupItem = item as unknown as TransactionGroupListItemType;
     const theme = useTheme();
@@ -68,7 +67,7 @@ function TransactionGroupListItem<TItem extends ListItem>({
 
     const animatedHighlightStyle = useAnimatedHighlightStyle({
         borderRadius: variables.componentBorderRadius,
-        shouldHighlight: shouldAnimateInHighlight ?? false,
+        shouldHighlight: item?.shouldAnimateInHighlight ?? false,
         highlightColor: theme.messageHighlightBG,
         backgroundColor: theme.highlightBG,
     });

src/components/SelectionList/Search/TransactionListItem.tsx

@@ -33,7 +33,6 @@ function TransactionListItem<TItem extends ListItem>({
     onLongPressRow,
     shouldSyncFocus,
     isLoading,
-    shouldAnimateInHighlight,
 }: TransactionListItemProps<TItem>) {
     const transactionItem = item as unknown as TransactionListItemType;
     const styles = useThemeStyles();
@@ -60,7 +59,7 @@ function TransactionListItem<TItem extends ListItem>({
 
     const animatedHighlightStyle = useAnimatedHighlightStyle({
         borderRadius: variables.componentBorderRadius,
-        shouldHighlight: shouldAnimateInHighlight ?? false,
+        shouldHighlight: item?.shouldAnimateInHighlight ?? false,
         highlightColor: theme.messageHighlightBG,
         backgroundColor: theme.highlightBG,
     });

src/components/SelectionList/TableListItem.tsx

@@ -28,15 +28,14 @@ function TableListItem<TItem extends ListItem>({
     shouldSyncFocus,
     titleContainerStyles,
     shouldUseDefaultRightHandSideCheckmark,
-    shouldAnimateInHighlight,
 }: TableListItemProps<TItem>) {
     const styles = useThemeStyles();
     const theme = useTheme();
     const StyleUtils = useStyleUtils();
 
     const animatedHighlightStyle = useAnimatedHighlightStyle({
         borderRadius: styles.selectionListPressableItemWrapper.borderRadius,
-        shouldHighlight: !!shouldAnimateInHighlight,
+        shouldHighlight: !!item.shouldAnimateInHighlight,
         highlightColor: theme.messageHighlightBG,
         backgroundColor: theme.highlightBG,
     });
@@ -60,7 +59,7 @@ function TableListItem<TItem extends ListItem>({
                     styles.selectionListPressableItemWrapper,
                     styles.mh0,
                     // Removing background style because they are added to the parent OpacityView via animatedHighlightStyle
-                    shouldAnimateInHighlight ? styles.bgTransparent : undefined,
+                    item.shouldAnimateInHighlight ? styles.bgTransparent : undefined,
                     item.isSelected && styles.activeComponentBG,
                     item.cursorStyle,
                 ],

src/components/SelectionList/types.ts

@@ -375,9 +375,6 @@ type ListItemProps<TItem extends ListItem> = CommonListItemProps<TItem> & {
 
     /** Whether to show the default right hand side checkmark */
     shouldUseDefaultRightHandSideCheckmark?: boolean;
-
-    /** Whether to animate in highlight */
-    shouldAnimateInHighlight?: boolean;
 };
 
 type BaseListItemProps<TItem extends ListItem> = CommonListItemProps<TItem> & {
@@ -398,7 +395,6 @@ type BaseListItemProps<TItem extends ListItem> = CommonListItemProps<TItem> & {
     testID?: string;
     /** Whether to show the default right hand side checkmark */
     shouldUseDefaultRightHandSideCheckmark?: boolean;
-    shouldAnimateInHighlight?: boolean;
 };
 
 type UserListItemProps<TItem extends ListItem> = ListItemProps<TItem> & {

tests/unit/BaseSelectionListTest.tsx

@@ -87,6 +87,7 @@ describe('BaseSelectionList', () => {
         fireEvent.press(screen.getByTestId(`${CONST.BASE_LIST_ITEM_TEST_ID}1`));
         expect(onSelectRowMock).toHaveBeenCalledWith({
             ...mockSections.at(1),
+            shouldAnimateInHighlight: false,
         });
     });