Scope RHP Table selection behind opt-in prop

The previous commit changed the shared Table's selection gating from shouldUseNarrowLayout
to isSmallScreenWidth globally, which unintentionally changed behavior for other Table
consumers rendered in the RHP (Categories, Tags, and Expense Rules pages) — they would show
selection checkboxes on wide-desktop RHP where they previously did not.

Gate the new behavior behind a shouldEnableSelectionInNarrowPaneModal prop (default false),
which the ReportParticipantsTable opts into. With the prop off, the selection UX reduces
exactly to the original shouldUseNarrowLayout behavior, so every other consumer is unaffected.

Co-authored-by: {"message":"Not Found","documentation_url":"https://docs.github.com/rest/issues/comments#get-an-issue-comment","status":"404"} <{"message":"Not Found","documentation_url":"https://docs.github.com/rest/issues/comments#get-an-issue-comment","status":"404"}@users.noreply.github.com>

Author: MelvinBot

src/components/Table/Table.tsx

@@ -153,6 +153,7 @@ function Table<DataType extends TableData, ColumnKey extends string = string, Fi
     narrowLayoutSortColumn,
     children,
     selectionEnabled,
+    shouldEnableSelectionInNarrowPaneModal,
     onRowSelectionChange,
     ...listProps
 }: TableProps<DataType, ColumnKey, FilterKey>) {
@@ -190,7 +191,7 @@ function Table<DataType extends TableData, ColumnKey extends string = string, Fi
         methods: selectionMethods,
         mobileSelectionModalRowKey,
         middleware: selectionMiddleware,
-    } = useSelection<DataType>({data: sortedData, originalSelectableCount, currentFilters, selectedKeys, onRowSelectionChange});
+    } = useSelection<DataType>({data: sortedData, originalSelectableCount, currentFilters, selectedKeys, onRowSelectionChange, shouldEnableSelectionInNarrowPaneModal});
     const selectionData = selectionMiddleware(sortedData);
 
     const {methods: highlightingMethods, middleware: highlightMiddleware} = useHighlighting<DataType>();
@@ -256,6 +257,7 @@ function Table<DataType extends TableData, ColumnKey extends string = string, Fi
         isEmptyResult,
         shouldUseNarrowTableLayout,
         selectionEnabled,
+        shouldEnableSelectionInNarrowPaneModal,
         isMobileSelectionEnabled,
     };
 

src/components/Table/TableContext.tsx

@@ -24,6 +24,9 @@ type TableContextValue<DataType extends TableData, ColumnKey extends string = st
     /** Whether or not selection is enabled for the table */
     selectionEnabled?: boolean;
 
+    /** Whether the selection UX should key off the real screen size instead of shouldUseNarrowLayout (for tables inside a narrow pane modal / RHP) */
+    shouldEnableSelectionInNarrowPaneModal?: boolean;
+
     /** The data array after filtering, searching, and sorting have been applied. */
     processedData: Array<TableRow<DataType>>;
 

src/components/Table/TableHeader.tsx

@@ -53,12 +53,14 @@ function TableHeader<DataType extends TableData, ColumnKey extends string = stri
     const theme = useTheme();
     const styles = useThemeStyles();
     const {translate} = useLocalize();
-    // isSelectionCheckboxVisible keys off isSmallScreenWidth (real mobile) rather than shouldUseNarrowLayout so the
-    // header checkbox renders when the table is inside a narrow pane modal (RHP). The visual padding below still uses shouldUseNarrowLayout.
     // eslint-disable-next-line rulesdir/prefer-shouldUseNarrowLayout-instead-of-isSmallScreenWidth
     const {shouldUseNarrowLayout, isSmallScreenWidth} = useResponsiveLayout();
-    const {columns, isEmptyResult, title, shouldUseNarrowTableLayout, tableMethods, selectionEnabled, processedData, isMobileSelectionEnabled} = useTableContext<DataType, ColumnKey>();
-    const isSelectionCheckboxVisible = selectionEnabled && (isMobileSelectionEnabled || !isSmallScreenWidth);
+    const {columns, isEmptyResult, title, shouldUseNarrowTableLayout, tableMethods, selectionEnabled, processedData, isMobileSelectionEnabled, shouldEnableSelectionInNarrowPaneModal} =
+        useTableContext<DataType, ColumnKey>();
+    // Tables inside a narrow pane modal (RHP) opt into keying the header checkbox off the real screen size, since
+    // shouldUseNarrowLayout is always true in an RHP. Other tables keep the original behavior. Visual padding below still uses shouldUseNarrowLayout.
+    const selectionUsesNarrowLayout = shouldEnableSelectionInNarrowPaneModal ? isSmallScreenWidth : shouldUseNarrowLayout;
+    const isSelectionCheckboxVisible = selectionEnabled && (isMobileSelectionEnabled || !selectionUsesNarrowLayout);
 
     if (shouldUseNarrowTableLayout && !title) {
         return null;

src/components/Table/TableRow.tsx

@@ -56,18 +56,20 @@ export default function TableRow({
     const theme = useTheme();
     const styles = useThemeStyles();
     const {translate} = useLocalize();
-    // The selection UX keys off the real screen size (isSmallScreenWidth) rather than shouldUseNarrowLayout so that
-    // long-press selection and checkboxes still work when the table is rendered inside a narrow pane modal (RHP),
-    // where shouldUseNarrowLayout is always true regardless of screen size. Visual layout keeps using shouldUseNarrowTableLayout.
     // eslint-disable-next-line rulesdir/prefer-shouldUseNarrowLayout-instead-of-isSmallScreenWidth
-    const {isSmallScreenWidth} = useResponsiveLayout();
-    const shouldEnableMobileSelectionLongPress = isSmallScreenWidth;
-    const {processedData, columns, shouldUseNarrowTableLayout, tableMethods, selectionEnabled, isMobileSelectionEnabled} = useTableContext();
+    const {isSmallScreenWidth, shouldUseNarrowLayout, isInNarrowPaneModal} = useResponsiveLayout();
+    const {processedData, columns, shouldUseNarrowTableLayout, tableMethods, selectionEnabled, isMobileSelectionEnabled, shouldEnableSelectionInNarrowPaneModal} = useTableContext();
+
+    // Tables inside a narrow pane modal (RHP) opt into keying the selection UX off the real screen size (isSmallScreenWidth),
+    // because shouldUseNarrowLayout is always true in an RHP and would otherwise suppress selection entirely. All other
+    // tables keep the original shouldUseNarrowLayout behavior. Visual layout still uses shouldUseNarrowTableLayout.
+    const selectionUsesNarrowLayout = shouldEnableSelectionInNarrowPaneModal ? isSmallScreenWidth : shouldUseNarrowLayout;
+    const shouldEnableMobileSelectionLongPress = isSmallScreenWidth && (shouldEnableSelectionInNarrowPaneModal || !isInNarrowPaneModal);
 
     const item = processedData.at(rowIndex);
     const rowCount = processedData.length;
     const gridTemplateColumns = columns.map((column) => (column.width ? `${column.width}px` : '1fr'));
-    const isSelectionCheckboxVisible = selectionEnabled && (isMobileSelectionEnabled || !isSmallScreenWidth);
+    const isSelectionCheckboxVisible = selectionEnabled && (isMobileSelectionEnabled || !selectionUsesNarrowLayout);
 
     const isDisabled = !!disabled;
     const isFirstRow = rowIndex === 0;
@@ -149,7 +151,7 @@ export default function TableRow({
             return;
         }
 
-        if (!isSmallScreenWidth || !isMobileSelectionEnabled || !selectionEnabled) {
+        if (!selectionUsesNarrowLayout || !isMobileSelectionEnabled || !selectionEnabled) {
             onPress?.();
             return;
         }

src/components/Table/middlewares/selection.ts

@@ -23,6 +23,9 @@ type UseSelectionProps<DataType extends TableData> = {
 
     /** Callback that is fired when the selection of rows in the table changes */
     onRowSelectionChange?: (selectedRowKeys: string[]) => void;
+
+    /** Whether the selection mode should key off the real screen size instead of shouldUseNarrowLayout (for tables inside a narrow pane modal / RHP) */
+    shouldEnableSelectionInNarrowPaneModal?: boolean;
 };
 
 type SelectionMethods = {
@@ -53,12 +56,14 @@ export default function useSelection<DataType extends TableData>({
     selectedKeys,
     currentFilters,
     onRowSelectionChange,
+    shouldEnableSelectionInNarrowPaneModal,
 }: UseSelectionProps<DataType>): UseSelectionResult<DataType> {
-    // The selection-mode auto-sync keys off isSmallScreenWidth (real mobile) rather than shouldUseNarrowLayout so it
-    // behaves correctly when the table is rendered inside a narrow pane modal (RHP), where shouldUseNarrowLayout is
-    // always true. On a wide screen the RHP shows checkboxes directly instead of the mobile long-press selection mode.
+    // When a table opts into selection inside a narrow pane modal (RHP), the selection-mode auto-sync keys off the real
+    // screen size (isSmallScreenWidth) so it behaves correctly there (shouldUseNarrowLayout is always true in an RHP).
+    // Otherwise it keeps the original shouldUseNarrowLayout behavior, so central-pane tables are unaffected.
     // eslint-disable-next-line rulesdir/prefer-shouldUseNarrowLayout-instead-of-isSmallScreenWidth
-    const {isSmallScreenWidth} = useResponsiveLayout();
+    const {shouldUseNarrowLayout, isSmallScreenWidth} = useResponsiveLayout();
+    const selectionUsesNarrowLayout = shouldEnableSelectionInNarrowPaneModal ? isSmallScreenWidth : shouldUseNarrowLayout;
     const isSelectionModeEnabled = useMobileSelectionMode();
     const lastSelectedRowKeyRef = useRef<string | null>(null);
     const lastSelectedRowIsSelectedRef = useRef<boolean>(false);
@@ -89,16 +94,16 @@ export default function useSelection<DataType extends TableData>({
 
     // Sync the selection mode with the screen size & selection state
     useEffect(() => {
-        const isMobileMissingSelectionMode = isSmallScreenWidth && !isSelectionModeEnabled && selectedKeys.length;
-        const isDesktopWithoutSelectableKeys = isSelectionModeEnabled && !selectableKeys.length && !isSmallScreenWidth;
+        const isMobileMissingSelectionMode = selectionUsesNarrowLayout && !isSelectionModeEnabled && selectedKeys.length;
+        const isDesktopWithoutSelectableKeys = isSelectionModeEnabled && !selectableKeys.length && !selectionUsesNarrowLayout;
         const isSelectionModeEnabledWithoutSelectableKeys = isSelectionModeEnabled && !selectableKeys.length && !originalSelectableCount;
 
         if (isMobileMissingSelectionMode) {
             turnOnMobileSelectionMode();
         } else if (isDesktopWithoutSelectableKeys || isSelectionModeEnabledWithoutSelectableKeys) {
             turnOffMobileSelectionMode();
         }
-    }, [isSmallScreenWidth, isSelectionModeEnabled, selectedKeys.length, originalSelectableCount, selectableKeys.length]);
+    }, [selectionUsesNarrowLayout, isSelectionModeEnabled, selectedKeys.length, originalSelectableCount, selectableKeys.length]);
 
     // When selection mode is turned off, clear the list of selected keys, so that re-enabling selection mode doesn't retain rows
     const wasSelectionModeEnabled = usePrevious(isSelectionModeEnabled);

src/components/Table/types.ts

@@ -146,6 +146,14 @@ type TableProps<DataType extends TableData, ColumnKey extends string = string, F
         /** Whether multi selection is enabled */
         selectionEnabled?: boolean;
 
+        /**
+         * Whether the selection UX (checkboxes / long-press selection mode) should be driven by the real screen size
+         * (isSmallScreenWidth) instead of shouldUseNarrowLayout. Set this for tables rendered inside a narrow pane modal
+         * (RHP), where shouldUseNarrowLayout is always true and would otherwise suppress selection entirely. Defaults to
+         * false so central-pane tables keep their existing behavior.
+         */
+        shouldEnableSelectionInNarrowPaneModal?: boolean;
+
         /** Column configuration defining what columns to display and how. */
         columns: Array<TableColumn<ColumnKey>>;
 

src/components/Tables/ReportParticipantsTable/index.tsx

@@ -111,6 +111,7 @@ export default function ReportParticipantsTable({ref, members, isGroupChat, sele
             columns={columns}
             selectedKeys={selectedKeys}
             selectionEnabled={selectionEnabled}
+            shouldEnableSelectionInNarrowPaneModal
             initialSortColumn="member"
             title={translate('common.members')}
             renderItem={renderItem}