Merge pull request #51795 from Expensify/michal-revert-nkdengineer/fi…

…x/50779

[CP Staging] Revert "Merge pull request #51158 from nkdengineer/fix/50779"

(cherry picked from commit 9406610)

(CP triggered by Beamanator)

src/components/AttachmentPicker/index.native.tsx

@@ -16,8 +16,6 @@ import useArrowKeyFocusManager from '@hooks/useArrowKeyFocusManager';
 import useKeyboardShortcut from '@hooks/useKeyboardShortcut';
 import useLocalize from '@hooks/useLocalize';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
-import useStyleUtils from '@hooks/useStyleUtils';
-import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import * as FileUtils from '@libs/fileDownload/FileUtils';
 import CONST from '@src/CONST';
@@ -118,8 +116,6 @@ function AttachmentPicker({
     fileLimit = 1,
 }: AttachmentPickerProps) {
     const styles = useThemeStyles();
-    const StyleUtils = useStyleUtils();
-    const theme = useTheme();
     const [isVisible, setIsVisible] = useState(false);
 
     const completeAttachmentSelection = useRef<(data: FileObject[]) => void>(() => {});
@@ -448,7 +444,6 @@ function AttachmentPicker({
                             title={translate(item.textTranslationKey)}
                             onPress={() => selectItem(item)}
                             focused={focusedIndex === menuIndex}
-                            wrapperStyle={StyleUtils.getItemBackgroundColorStyle(false, focusedIndex === menuIndex, theme.activeComponentBG, theme.hoverComponentBG)}
                         />
                     ))}
                 </View>

src/components/EmojiPicker/EmojiPickerMenuItem/index.tsx

@@ -68,7 +68,8 @@ function EmojiPickerMenuItem({
                 ref.current = el ?? null;
             }}
             style={({pressed}) => [
-                isFocused || isHovered || isHighlighted ? themeStyles.emojiItemHighlighted : {},
+                isFocused ? themeStyles.emojiItemKeyboardHighlighted : {},
+                isHovered || isHighlighted ? themeStyles.emojiItemHighlighted : {},
                 Browser.isMobile() && StyleUtils.getButtonBackgroundColorStyle(getButtonState(false, pressed)),
                 themeStyles.emojiItem,
             ]}

src/components/MenuItem.tsx

@@ -251,9 +251,6 @@ type MenuItemBaseProps = {
     /** Should we remove the background color of the menu item */
     shouldRemoveBackground?: boolean;
 
-    /** Should we remove the hover background color of the menu item */
-    shouldRemoveHoverBackground?: boolean;
-
     /** Should we use default cursor for disabled content */
     shouldUseDefaultCursorWhenDisabled?: boolean;
 
@@ -414,7 +411,6 @@ function MenuItem(
         shouldEscapeText = undefined,
         shouldGreyOutWhenDisabled = true,
         shouldRemoveBackground = false,
-        shouldRemoveHoverBackground = false,
         shouldUseDefaultCursorWhenDisabled = false,
         shouldShowLoadingSpinnerIcon = false,
         isAnonymousAction = false,
@@ -598,7 +594,7 @@ function MenuItem(
                                             StyleUtils.getButtonBackgroundColorStyle(getButtonState(focused || isHovered, pressed, success, disabled, interactive), true),
                                         ...(Array.isArray(wrapperStyle) ? wrapperStyle : [wrapperStyle]),
                                         shouldGreyOutWhenDisabled && disabled && styles.buttonOpacityDisabled,
-                                        isHovered && interactive && !focused && !pressed && !shouldRemoveBackground && !shouldRemoveHoverBackground && styles.hoveredComponentBG,
+                                        isHovered && interactive && !focused && !pressed && !shouldRemoveBackground && styles.hoveredComponentBG,
                                     ] as StyleProp<ViewStyle>
                                 }
                                 disabledStyle={shouldUseDefaultCursorWhenDisabled && [styles.cursorDefault]}

src/components/PopoverMenu.tsx

@@ -8,7 +8,6 @@ import type {ModalProps} from 'react-native-modal';
 import useArrowKeyFocusManager from '@hooks/useArrowKeyFocusManager';
 import useKeyboardShortcut from '@hooks/useKeyboardShortcut';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
-import useStyleUtils from '@hooks/useStyleUtils';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
@@ -168,7 +167,6 @@ function PopoverMenu({
     shouldUpdateFocusedIndex = true,
 }: PopoverMenuProps) {
     const styles = useThemeStyles();
-    const StyleUtils = useStyleUtils();
     const theme = useTheme();
     // We need to use isSmallScreenWidth instead of shouldUseNarrowLayout to apply correct popover styles
     // eslint-disable-next-line rulesdir/prefer-shouldUseNarrowLayout-instead-of-isSmallScreenWidth
@@ -265,8 +263,6 @@ function PopoverMenu({
                         setFocusedIndex(menuIndex);
                     }}
                     style={{backgroundColor: item.isSelected ? theme.activeComponentBG : undefined}}
-                    wrapperStyle={StyleUtils.getItemBackgroundColorStyle(!!item.isSelected, focusedIndex === menuIndex, theme.activeComponentBG, theme.hoverComponentBG)}
-                    shouldRemoveHoverBackground={item.isSelected}
                     titleStyle={StyleSheet.flatten([styles.flex1, item.titleStyle])}
                     // Spread other props dynamically
                     {...menuItemProps}

src/components/SelectionList/BaseListItem.tsx

@@ -6,7 +6,6 @@ import OfflineWithFeedback from '@components/OfflineWithFeedback';
 import PressableWithFeedback from '@components/Pressable/PressableWithFeedback';
 import useHover from '@hooks/useHover';
 import {useMouseContext} from '@hooks/useMouseContext';
-import useStyleUtils from '@hooks/useStyleUtils';
 import useSyncFocus from '@hooks/useSyncFocus';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
@@ -39,7 +38,6 @@ function BaseListItem<TItem extends ListItem>({
 }: BaseListItemProps<TItem>) {
     const theme = useTheme();
     const styles = useThemeStyles();
-    const StyleUtils = useStyleUtils();
     const {hovered, bind} = useHover();
     const {isMouseDownOnInput, setMouseUp} = useMouseContext();
 
@@ -104,7 +102,7 @@ function BaseListItem<TItem extends ListItem>({
                 tabIndex={item.tabIndex}
                 wrapperStyle={pressableWrapperStyle}
             >
-                <View style={[wrapperStyle, StyleUtils.getItemBackgroundColorStyle(!!item.isSelected, !!isFocused, theme.activeComponentBG, theme.hoverComponentBG)]}>
+                <View style={wrapperStyle}>
                     {typeof children === 'function' ? children(hovered) : children}
 
                     {!canSelectMultiple && !!item.isSelected && !rightHandSideComponent && (

src/components/SelectionList/Search/TransactionListItem.tsx

@@ -34,7 +34,7 @@ function TransactionListItem<TItem extends ListItem>({
         // Removing background style because they are added to the parent OpacityView via animatedHighlightStyle
         styles.bgTransparent,
         item.isSelected && styles.activeComponentBG,
-        isFocused && styles.hoveredComponentBG,
+        isFocused && styles.sidebarLinkActive,
         styles.mh0,
     ];
 

src/styles/utils/index.ts

@@ -1119,19 +1119,6 @@ function getAmountWidth(amount: string): number {
     return width;
 }
 
-function getItemBackgroundColorStyle(isSelected: boolean, isFocused: boolean, selectedBG: string, focusedBG: string): ViewStyle {
-    let backgroundColor;
-    if (isSelected) {
-        backgroundColor = selectedBG;
-    } else if (isFocused) {
-        backgroundColor = focusedBG;
-    }
-
-    return {
-        backgroundColor,
-    };
-}
-
 const staticStyleUtils = {
     positioning,
     combineStyles,
@@ -1206,7 +1193,6 @@ const staticStyleUtils = {
     getAmountWidth,
     getBorderRadiusStyle,
     getHighResolutionInfoWrapperStyle,
-    getItemBackgroundColorStyle,
 };
 
 const createStyleUtils = (theme: ThemeColors, styles: ThemeStyles) => ({
@@ -1225,7 +1211,9 @@ const createStyleUtils = (theme: ThemeColors, styles: ThemeStyles) => ({
     getAutoCompleteSuggestionItemStyle: (highlightedEmojiIndex: number, rowHeight: number, isHovered: boolean, currentEmojiIndex: number): ViewStyle[] => {
         let backgroundColor;
 
-        if (isHovered || currentEmojiIndex === highlightedEmojiIndex) {
+        if (currentEmojiIndex === highlightedEmojiIndex) {
+            backgroundColor = theme.activeComponentBG;
+        } else if (isHovered) {
             backgroundColor = theme.hoverComponentBG;
         }