diff --git a/src/components/SelectionList/BaseListItem.tsx b/src/components/SelectionList/BaseListItem.tsx index 2f853dc55839..98b1999625ee 100644 --- a/src/components/SelectionList/BaseListItem.tsx +++ b/src/components/SelectionList/BaseListItem.tsx @@ -19,6 +19,7 @@ function BaseListItem({ shouldPreventDefaultFocusOnSelectRow = false, canSelectMultiple = false, onSelectRow, + onCheckboxPress, onDismissError = () => {}, rightHandSideComponent, keyForList, @@ -43,6 +44,14 @@ function BaseListItem({ return rightHandSideComponent; }; + const handleCheckboxPress = () => { + if (onCheckboxPress) { + onCheckboxPress(item); + } else { + onSelectRow(item); + } + }; + return ( onDismissError(item)} @@ -66,8 +75,10 @@ function BaseListItem({ <> {canSelectMultiple && ( - @@ -80,7 +91,7 @@ function BaseListItem({ /> )} - + )} {typeof children === 'function' ? children(hovered) : children} diff --git a/src/components/SelectionList/BaseSelectionList.tsx b/src/components/SelectionList/BaseSelectionList.tsx index 9db0b4102b99..9cd37709552b 100644 --- a/src/components/SelectionList/BaseSelectionList.tsx +++ b/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( ListItem, canSelectMultiple = false, onSelectRow, + onCheckboxPress, onSelectAll, onDismissError, textInputLabel = '', @@ -290,6 +290,7 @@ function BaseSelectionList( 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( ) : ( <> {!headerMessage && canSelectMultiple && shouldShowSelectAll && ( - e.preventDefault() : undefined} - > + {customListHeader ?? ( {translate('workspace.people.selectAll')} )} - + )} {!headerMessage && !canSelectMultiple && customListHeader} = { /** 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 = Partial & { /** 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; diff --git a/src/pages/workspace/categories/WorkspaceCategoriesPage.tsx b/src/pages/workspace/categories/WorkspaceCategoriesPage.tsx index 7cd9972a6f57..721341073d72 100644 --- a/src/pages/workspace/categories/WorkspaceCategoriesPage.tsx +++ b/src/pages/workspace/categories/WorkspaceCategoriesPage.tsx @@ -129,7 +129,8 @@ function WorkspaceCategoriesPage({policyCategories, route}: WorkspaceCategoriesP