Merge pull request #37402 from ArekChr/refactor/align_selectionlist_c…

…heckboxes

Refactor/align selectionlist checkboxes

src/components/SelectionList/BaseListItem.tsx

@@ -19,6 +19,7 @@ function BaseListItem<TItem extends ListItem>({
     shouldPreventDefaultFocusOnSelectRow = false,
     canSelectMultiple = false,
     onSelectRow,
+    onCheckboxPress,
     onDismissError = () => {},
     rightHandSideComponent,
     keyForList,
@@ -43,6 +44,14 @@ function BaseListItem<TItem extends ListItem>({
         return rightHandSideComponent;
     };
 
+    const handleCheckboxPress = () => {
+        if (onCheckboxPress) {
+            onCheckboxPress(item);
+        } else {
+            onSelectRow(item);
+        }
+    };
+
     return (
         <OfflineWithFeedback
             onClose={() => onDismissError(item)}
@@ -66,8 +75,10 @@ function BaseListItem<TItem extends ListItem>({
                     <>
                         <View style={wrapperStyle}>
                             {canSelectMultiple && (
-                                <View
+                                <PressableWithFeedback
+                                    accessibilityLabel={item.text}
                                     role={CONST.ROLE.BUTTON}
+                                    onPress={handleCheckboxPress}
                                     style={StyleUtils.getCheckboxPressableStyle()}
                                 >
                                     <View style={selectMultipleStyle}>
@@ -80,7 +91,7 @@ function BaseListItem<TItem extends ListItem>({
                                             />
                                         )}
                                     </View>
-                                </View>
+                                </PressableWithFeedback>
                             )}
 
                             {typeof children === 'function' ? children(hovered) : children}

src/components/SelectionList/BaseSelectionList.tsx

@@ -8,7 +8,6 @@ import Button from '@components/Button';
 import Checkbox from '@components/Checkbox';
 import FixedFooter from '@components/FixedFooter';
 import OptionsListSkeletonView from '@components/OptionsListSkeletonView';
-import PressableWithFeedback from '@components/Pressable/PressableWithFeedback';
 import SafeAreaConsumer from '@components/SafeAreaConsumer';
 import SectionList from '@components/SectionList';
 import Text from '@components/Text';
@@ -30,6 +29,7 @@ function BaseSelectionList<TItem extends ListItem>(
         ListItem,
         canSelectMultiple = false,
         onSelectRow,
+        onCheckboxPress,
         onSelectAll,
         onDismissError,
         textInputLabel = '',
@@ -290,6 +290,7 @@ function BaseSelectionList<TItem extends ListItem>(
                 showTooltip={showTooltip}
                 canSelectMultiple={canSelectMultiple}
                 onSelectRow={() => selectRow(item)}
+                onCheckboxPress={onCheckboxPress ? () => onCheckboxPress?.(item) : undefined}
                 onDismissError={() => onDismissError?.(item)}
                 shouldPreventDefaultFocusOnSelectRow={shouldPreventDefaultFocusOnSelectRow}
                 rightHandSideComponent={rightHandSideComponent}
@@ -431,28 +432,19 @@ function BaseSelectionList<TItem extends ListItem>(
                         ) : (
                             <>
                                 {!headerMessage && canSelectMultiple && shouldShowSelectAll && (
-                                    <PressableWithFeedback
-                                        style={[styles.peopleRow, styles.userSelectNone, styles.ph4, styles.pb3, listHeaderWrapperStyle]}
-                                        onPress={selectAllRow}
-                                        accessibilityLabel={translate('workspace.people.selectAll')}
-                                        role="button"
-                                        accessibilityState={{checked: flattenedSections.allSelected}}
-                                        disabled={flattenedSections.allOptions.length === flattenedSections.disabledOptionsIndexes.length}
-                                        dataSet={{[CONST.SELECTION_SCRAPER_HIDDEN_ELEMENT]: true}}
-                                        onMouseDown={shouldPreventDefaultFocusOnSelectRow ? (e) => e.preventDefault() : undefined}
-                                    >
+                                    <View style={[styles.peopleRow, styles.userSelectNone, styles.ph4, styles.pb3, listHeaderWrapperStyle]}>
                                         <Checkbox
-                                            accessibilityLabel={translate('workspace.people.selectAll')}
                                             isChecked={flattenedSections.allSelected}
                                             onPress={selectAllRow}
                                             disabled={flattenedSections.allOptions.length === flattenedSections.disabledOptionsIndexes.length}
+                                            accessibilityLabel={translate('workspace.people.selectAll')}
                                         />
                                         {customListHeader ?? (
                                             <View style={[styles.flex1]}>
                                                 <Text style={[styles.textStrong, styles.ph3]}>{translate('workspace.people.selectAll')}</Text>
                                             </View>
                                         )}
-                                    </PressableWithFeedback>
+                                    </View>
                                 )}
                                 {!headerMessage && !canSelectMultiple && customListHeader}
                                 <SectionList

src/components/SelectionList/RadioListItem.tsx

@@ -13,6 +13,7 @@ function RadioListItem({
     isDisabled,
     canSelectMultiple,
     onSelectRow,
+    onCheckboxPress,
     onDismissError,
     shouldPreventDefaultFocusOnSelectRow,
     rightHandSideComponent,
@@ -31,6 +32,7 @@ function RadioListItem({
             showTooltip={showTooltip}
             canSelectMultiple={canSelectMultiple}
             onSelectRow={onSelectRow}
+            onCheckboxPress={onCheckboxPress}
             onDismissError={onDismissError}
             shouldPreventDefaultFocusOnSelectRow={shouldPreventDefaultFocusOnSelectRow}
             rightHandSideComponent={rightHandSideComponent}

src/components/SelectionList/TableListItem.tsx

@@ -15,6 +15,7 @@ function TableListItem({
     isDisabled,
     canSelectMultiple,
     onSelectRow,
+    onCheckboxPress,
     onDismissError,
     shouldPreventDefaultFocusOnSelectRow,
     rightHandSideComponent,
@@ -37,6 +38,7 @@ function TableListItem({
             showTooltip={showTooltip}
             canSelectMultiple={canSelectMultiple}
             onSelectRow={onSelectRow}
+            onCheckboxPress={onCheckboxPress}
             onDismissError={onDismissError}
             shouldPreventDefaultFocusOnSelectRow={shouldPreventDefaultFocusOnSelectRow}
             rightHandSideComponent={rightHandSideComponent}

src/components/SelectionList/UserListItem.tsx

@@ -18,6 +18,7 @@ function UserListItem({
     isDisabled,
     canSelectMultiple,
     onSelectRow,
+    onCheckboxPress,
     onDismissError,
     shouldPreventDefaultFocusOnSelectRow,
     rightHandSideComponent,
@@ -41,6 +42,7 @@ function UserListItem({
             showTooltip={showTooltip}
             canSelectMultiple={canSelectMultiple}
             onSelectRow={onSelectRow}
+            onCheckboxPress={onCheckboxPress}
             onDismissError={onDismissError}
             shouldPreventDefaultFocusOnSelectRow={shouldPreventDefaultFocusOnSelectRow}
             rightHandSideComponent={rightHandSideComponent}

src/components/SelectionList/types.ts

@@ -23,6 +23,9 @@ type CommonListItemProps<TItem> = {
     /** Callback to fire when the item is pressed */
     onSelectRow: (item: TItem) => void;
 
+    /** Callback to fire when a checkbox is pressed */
+    onCheckboxPress?: (item: TItem) => void;
+
     /** Callback to fire when an error is dismissed */
     onDismissError?: (item: TItem) => void;
 
@@ -163,6 +166,9 @@ type BaseSelectionListProps<TItem extends ListItem> = Partial<ChildrenProps> & {
     /** Callback to fire when a row is pressed */
     onSelectRow: (item: TItem) => void;
 
+    /** Optional callback function triggered upon pressing a checkbox. If undefined and the list displays checkboxes, checkbox interactions are managed by onSelectRow, allowing for pressing anywhere on the list. */
+    onCheckboxPress?: (item: TItem) => void;
+
     /** Callback to fire when "Select All" checkbox is pressed. Only use along with `canSelectMultiple` */
     onSelectAll?: () => void;
 

src/pages/workspace/categories/WorkspaceCategoriesPage.tsx

@@ -129,7 +129,8 @@ function WorkspaceCategoriesPage({policyCategories, route}: WorkspaceCategoriesP
                         <SelectionList
                             canSelectMultiple
                             sections={[{data: categoryList, indexOffset: 0, isDisabled: false}]}
-                            onSelectRow={toggleCategory}
+                            onCheckboxPress={toggleCategory}
+                            onSelectRow={navigateToCategorySettings}
                             onSelectAll={toggleAllCategories}
                             showScrollIndicator
                             ListItem={TableListItem}