Merge pull request #61906 from thelullabyy/fix/61823-checkmark-appears-briefly

[CP Staging] Categories - Checkmark appears briefly next to the toggle after exiting selection mode

Author: mountiny

src/components/SelectionList/BaseListItem.tsx

@@ -40,6 +40,7 @@ function BaseListItem<TItem extends ListItem>({
     hoverStyle,
     onLongPressRow,
     testID,
+    shouldUseDefaultRightHandSideCheckmark = true,
 }: BaseListItemProps<TItem>) {
     const theme = useTheme();
     const styles = useThemeStyles();
@@ -125,7 +126,7 @@ function BaseListItem<TItem extends ListItem>({
                 >
                     {typeof children === 'function' ? children(hovered) : children}
 
-                    {!canSelectMultiple && !!item.isSelected && !rightHandSideComponent && (
+                    {!canSelectMultiple && !!item.isSelected && !rightHandSideComponent && shouldUseDefaultRightHandSideCheckmark && (
                         <View
                             style={[styles.flexRow, styles.alignItemsCenter, styles.ml3]}
                             accessible={false}

src/components/SelectionList/BaseSelectionList.tsx

@@ -140,6 +140,7 @@ function BaseSelectionList<TItem extends ListItem>(
         fixedNumItemsForLoader,
         loaderSpeed,
         errorText,
+        shouldUseDefaultRightHandSideCheckmark,
     }: SelectionListProps<TItem>,
     ref: ForwardedRef<SelectionListHandle>,
 ) {
@@ -568,6 +569,7 @@ function BaseSelectionList<TItem extends ListItem>(
                         shouldAnimateInHighlight: isItemHighlighted,
                         ...item,
                     }}
+                    shouldUseDefaultRightHandSideCheckmark={shouldUseDefaultRightHandSideCheckmark}
                     index={index}
                     isFocused={isItemFocused}
                     isDisabled={isDisabled}

src/components/SelectionList/BaseSelectionListItemRenderer.tsx

@@ -43,6 +43,7 @@ function BaseSelectionListItemRenderer<TItem extends ListItem>({
     titleStyles,
     singleExecution,
     titleContainerStyles,
+    shouldUseDefaultRightHandSideCheckmark,
 }: BaseSelectionListItemRendererProps<TItem>) {
     const handleOnCheckboxPress = () => {
         if (isReportListItemType(item)) {
@@ -92,6 +93,7 @@ function BaseSelectionListItemRenderer<TItem extends ListItem>({
                 wrapperStyle={wrapperStyle}
                 titleStyles={titleStyles}
                 titleContainerStyles={titleContainerStyles}
+                shouldUseDefaultRightHandSideCheckmark={shouldUseDefaultRightHandSideCheckmark}
             />
             {item.footerContent && item.footerContent}
         </>

src/components/SelectionList/TableListItem.tsx

@@ -27,6 +27,7 @@ function TableListItem<TItem extends ListItem>({
     onLongPressRow,
     shouldSyncFocus,
     titleContainerStyles,
+    shouldUseDefaultRightHandSideCheckmark,
 }: TableListItemProps<TItem>) {
     const styles = useThemeStyles();
     const theme = useTheme();
@@ -80,6 +81,7 @@ function TableListItem<TItem extends ListItem>({
             onFocus={onFocus}
             shouldSyncFocus={shouldSyncFocus}
             hoverStyle={item.isSelected && styles.activeComponentBG}
+            shouldUseDefaultRightHandSideCheckmark={shouldUseDefaultRightHandSideCheckmark}
         >
             {(hovered) => (
                 <>

src/components/SelectionList/types.ts

@@ -354,6 +354,9 @@ type ListItemProps<TItem extends ListItem> = CommonListItemProps<TItem> & {
 
     /** Styles applied for the title container of the list item */
     titleContainerStyles?: StyleProp<ViewStyle>;
+
+    /** Whether to show the default right hand side checkmark */
+    shouldUseDefaultRightHandSideCheckmark?: boolean;
 };
 
 type BaseListItemProps<TItem extends ListItem> = CommonListItemProps<TItem> & {
@@ -372,6 +375,8 @@ type BaseListItemProps<TItem extends ListItem> = CommonListItemProps<TItem> & {
     shouldDisplayRBR?: boolean;
     /** Test ID of the component. Used to locate this view in end-to-end tests. */
     testID?: string;
+    /** Whether to show the default right hand side checkmark */
+    shouldUseDefaultRightHandSideCheckmark?: boolean;
 };
 
 type UserListItemProps<TItem extends ListItem> = ListItemProps<TItem> & {
@@ -734,6 +739,9 @@ type SelectionListProps<TItem extends ListItem> = Partial<ChildrenProps> & {
 
     /** Error text to display */
     errorText?: string;
+
+    /** Whether to show the default right hand side checkmark */
+    shouldUseDefaultRightHandSideCheckmark?: boolean;
 } & TRightHandSideComponent<TItem>;
 
 type SelectionListHandle = {

src/pages/workspace/WorkspaceMembersPage.tsx

@@ -798,6 +798,7 @@ function WorkspaceMembersPage({personalDetails, route, policy, currentUserPerson
                                 sections={[{data: filteredData, isDisabled: false}]}
                                 selectedItemKeys={selectedEmployees}
                                 ListItem={TableListItem}
+                                shouldUseDefaultRightHandSideCheckmark={false}
                                 turnOnSelectionModeOnLongPress={isPolicyAdmin}
                                 onTurnOnSelectionMode={(item) => item && toggleUser(item?.accountID)}
                                 shouldUseUserSkeletonView

src/pages/workspace/categories/WorkspaceCategoriesPage.tsx

@@ -465,6 +465,7 @@ function WorkspaceCategoriesPage({route}: WorkspaceCategoriesPageProps) {
                             turnOnSelectionModeOnLongPress={isSmallScreenWidth}
                             onTurnOnSelectionMode={(item) => item && toggleCategory(item)}
                             sections={[{data: filteredCategoryList, isDisabled: false}]}
+                            shouldUseDefaultRightHandSideCheckmark={false}
                             selectedItemKeys={selectedCategories}
                             onCheckboxPress={toggleCategory}
                             onSelectRow={navigateToCategorySettings}

src/pages/workspace/distanceRates/PolicyDistanceRatesPage.tsx

@@ -411,6 +411,7 @@ function PolicyDistanceRatesPage({
                             turnOnSelectionModeOnLongPress
                             onTurnOnSelectionMode={(item) => item && toggleRate(item)}
                             sections={[{data: filteredDistanceRatesList, isDisabled: false}]}
+                            shouldUseDefaultRightHandSideCheckmark={false}
                             selectedItemKeys={selectedDistanceRates}
                             onCheckboxPress={toggleRate}
                             onSelectRow={openRateDetails}

src/pages/workspace/perDiem/WorkspacePerDiemPage.tsx

@@ -452,6 +452,7 @@ function WorkspacePerDiemPage({route}: WorkspacePerDiemPageProps) {
                             turnOnSelectionModeOnLongPress
                             onTurnOnSelectionMode={(item) => item && toggleSubRate(item)}
                             sections={[{data: filteredSubRatesList, isDisabled: false}]}
+                            shouldUseDefaultRightHandSideCheckmark={false}
                             selectedItemKeys={selectedPerDiem.map((item) => item.subRateID)}
                             onCheckboxPress={toggleSubRate}
                             onSelectRow={openSubRateDetails}

src/pages/workspace/reportFields/ReportFieldsListValuesPage.tsx

@@ -366,6 +366,7 @@ function ReportFieldsListValuesPage({
                         turnOnSelectionModeOnLongPress={!hasAccountingConnections}
                         onTurnOnSelectionMode={(item) => item && toggleValue(item)}
                         sections={sections}
+                        shouldUseDefaultRightHandSideCheckmark={false}
                         onCheckboxPress={toggleValue}
                         onSelectRow={openListValuePage}
                         onSelectAll={toggleAllValues}

src/pages/workspace/tags/WorkspaceTagsPage.tsx

@@ -498,6 +498,7 @@ function WorkspaceTagsPage({route}: WorkspaceTagsPageProps) {
                                 turnOnSelectionModeOnLongPress={!isMultiLevelTags}
                                 onTurnOnSelectionMode={(item) => item && toggleTag(item)}
                                 sections={[{data: filteredTagList, isDisabled: false}]}
+                                shouldUseDefaultRightHandSideCheckmark={false}
                                 selectedItemKeys={selectedTags}
                                 onCheckboxPress={toggleTag}
                                 onSelectRow={navigateToTagSettings}

src/pages/workspace/tags/WorkspaceViewTagsPage.tsx

@@ -378,6 +378,7 @@ function WorkspaceViewTagsPage({route}: WorkspaceViewTagsProps) {
                         turnOnSelectionModeOnLongPress
                         onTurnOnSelectionMode={(item) => item && toggleTag(item)}
                         sections={sections}
+                        shouldUseDefaultRightHandSideCheckmark={false}
                         onCheckboxPress={toggleTag}
                         onSelectRow={navigateToTagSettings}
                         onSelectAll={toggleAllTags}

src/pages/workspace/taxes/WorkspaceTaxesPage.tsx

@@ -410,6 +410,7 @@ function WorkspaceTaxesPage({
                         turnOnSelectionModeOnLongPress
                         onTurnOnSelectionMode={(item) => item && toggleTax(item)}
                         sections={[{data: filteredTaxesList, isDisabled: false}]}
+                        shouldUseDefaultRightHandSideCheckmark={false}
                         selectedItemKeys={selectedTaxesIDs}
                         onCheckboxPress={toggleTax}
                         onSelectRow={navigateToEditTaxRate}