Update the categories table to use the new styles

src/CONST/index.ts

@@ -9108,6 +9108,7 @@ const CONST = {
                 MORE_DROPDOWN: 'WorkspaceMembers-MoreDropdown',
             },
             CATEGORIES: {
+                ROW: 'WorkspaceCategories-Row',
                 ADD_BUTTON: 'WorkspaceCategories-AddButton',
                 MORE_DROPDOWN: 'WorkspaceCategories-MoreDropdown',
                 BULK_ACTIONS_DROPDOWN: 'WorkspaceCategories-BulkActionsDropdown',

src/components/Table/Table.tsx

@@ -1,12 +1,20 @@
 import type {FlashListRef} from '@shopify/flash-list';
 import React, {useImperativeHandle, useRef} from 'react';
+import MenuItem from '@components/MenuItem';
+import Modal from '@components/Modal';
+import {useMemoizedLazyExpensifyIcons} from '@hooks/useLazyAsset';
+import useLocalize from '@hooks/useLocalize';
+import useMobileSelectionMode from '@hooks/useMobileSelectionMode';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
+import {turnOnMobileSelectionMode} from '@libs/actions/MobileSelectionMode';
+import CONST from '@src/CONST';
 import useFiltering from './middlewares/filtering';
 import useSearching from './middlewares/searching';
+import useSelection from './middlewares/selection';
 import useSorting from './middlewares/sorting';
 import TableContext from './TableContext';
 import type {TableContextValue} from './TableContext';
-import type {TableHandle, TableMethods, TableProps} from './types';
+import type {TableData, TableHandle, TableMethods, TableProps} from './types';
 
 /**
  * A composable table component that provides filtering, search, and sorting functionality.
@@ -32,12 +40,13 @@ import type {TableHandle, TableMethods, TableProps} from './types';
  * 1. **Filtering** - Applies dropdown filter selections
  * 2. **Searching** - Applies search string filtering
  * 3. **Sorting** - Sorts data by the active column
+ * 4. **Selection** - Applies row selection state & provides helpers for selection
  *
  * Each middleware transforms the data array and passes it to the next.
  *
  * ## Generic Type Parameters
  *
- * - `T` - The type of items in your data array
+ * - `DataType` - The type of items in your data array
  * - `ColumnKey` - String literal union of valid column keys (e.g., `'name' | 'date'`)
  * - `FilterKey` - String literal union of valid filter keys
  *
@@ -129,39 +138,51 @@ import type {TableHandle, TableMethods, TableProps} from './types';
  * </Table>
  * ```
  */
-function Table<T, ColumnKey extends string = string, FilterKey extends string = string>({
+function Table<DataType extends TableData, ColumnKey extends string = string, FilterKey extends string = string>({
     ref,
     title,
-    data = [],
     columns,
     filters,
+    data = [],
+    selectedKeys = [],
     compareItems,
     isItemInFilter,
     isItemInSearch,
     initialSortColumn,
     children,
+    selectionEnabled,
+    onRowSelectionChange,
     ...listProps
-}: TableProps<T, ColumnKey, FilterKey>) {
+}: TableProps<DataType, ColumnKey, FilterKey>) {
+    const {translate} = useLocalize();
+    const icons = useMemoizedLazyExpensifyIcons(['CheckSquare']);
+    const isMobileSelectionEnabled = useMobileSelectionMode();
+
     if (!columns || columns.length === 0) {
         throw new Error('Table columns must be provided');
     }
 
     const {shouldUseNarrowLayout, isMediumScreenWidth} = useResponsiveLayout();
 
-    const {middleware: filterMiddleware, currentFilters, methods: filterMethods} = useFiltering<T, FilterKey>({filters, isItemInFilter});
+    const {middleware: filterMiddleware, currentFilters, methods: filterMethods} = useFiltering<DataType, FilterKey>({filters, isItemInFilter});
+    const filteredData = filterMiddleware(data);
 
-    const {middleware: searchMiddleware, activeSearchString, methods: searchMethods} = useSearching<T>({isItemInSearch});
+    const {middleware: searchMiddleware, activeSearchString, methods: searchMethods} = useSearching<DataType>({isItemInSearch});
+    const searchedData = searchMiddleware(filteredData);
 
-    const {middleware: sortMiddleware, activeSorting, methods: sortMethods} = useSorting<T, ColumnKey>({compareItems, initialSortColumn});
+    const {middleware: sortMiddleware, activeSorting, methods: sortMethods} = useSorting<DataType, ColumnKey>({compareItems, initialSortColumn});
+    const sortedData = sortMiddleware(searchedData);
 
-    const processedData = [filterMiddleware, searchMiddleware, sortMiddleware].reduce((acc, middleware) => middleware(acc), data);
+    const {middleware: selectionMiddleware, methods: selectionMethods, mobileSelectionModalRowKey} = useSelection<DataType>({data: sortedData, selectedKeys, onRowSelectionChange});
+    const processedData = selectionMiddleware(sortedData);
 
-    const listRef = useRef<FlashListRef<T>>(null);
+    const listRef = useRef<FlashListRef<DataType>>(null);
 
     const tableMethods: TableMethods<ColumnKey, FilterKey> = {
         ...filterMethods,
         ...sortMethods,
         ...searchMethods,
+        ...selectionMethods,
     };
 
     /**
@@ -179,9 +200,9 @@ function Table<T, ColumnKey extends string = string, FilterKey extends string =
                     return () => processedData;
                 }
 
-                return listRef.current?.[property as keyof FlashListRef<T>];
+                return listRef.current?.[property as keyof FlashListRef<DataType>];
             },
-        }) as TableHandle<T, ColumnKey, FilterKey>;
+        }) as TableHandle<DataType, ColumnKey, FilterKey>;
     });
 
     const originalDataLength = data?.length ?? 0;
@@ -199,8 +220,17 @@ function Table<T, ColumnKey extends string = string, FilterKey extends string =
     const hasSearchString = activeSearchString.trim().length > 0;
     const isEmptyResult = processedData.length === 0 && originalDataLength > 0 && (hasSearchString || hasActiveFilters);
 
+    const handleMobileSelectionPress = () => {
+        turnOnMobileSelectionMode();
+
+        if (mobileSelectionModalRowKey) {
+            tableMethods.handleSingleRowSelection(mobileSelectionModalRowKey);
+            tableMethods.setMobileSelectionModalRowKey(null);
+        }
+    };
+
     // eslint-disable-next-line react/jsx-no-constructed-context-values
-    const contextValue: TableContextValue<T, ColumnKey, FilterKey> = {
+    const contextValue: TableContextValue<DataType, ColumnKey, FilterKey> = {
         title,
         listRef,
         listProps,
@@ -216,9 +246,29 @@ function Table<T, ColumnKey extends string = string, FilterKey extends string =
         hasSearchString,
         isEmptyResult,
         shouldUseNarrowTableLayout,
+        selectionEnabled,
+        isMobileSelectionEnabled,
     };
 
-    return <TableContext.Provider value={contextValue as unknown as TableContextValue<unknown, string>}>{children}</TableContext.Provider>;
+    return (
+        <TableContext.Provider value={contextValue as unknown as TableContextValue<TableData, string, string>}>
+            {children}
+
+            <Modal
+                shouldPreventScrollOnFocus
+                isVisible={!!mobileSelectionModalRowKey}
+                type={CONST.MODAL.MODAL_TYPE.BOTTOM_DOCKED}
+                onClose={() => tableMethods.setMobileSelectionModalRowKey(null)}
+            >
+                <MenuItem
+                    icon={icons.CheckSquare}
+                    title={translate('common.select')}
+                    onPress={handleMobileSelectionPress}
+                    pressableTestID={CONST.SELECTION_LIST_WITH_MODAL_TEST_ID}
+                />
+            </Modal>
+        </TableContext.Provider>
+    );
 }
 
 export default Table;

src/components/Table/TableBody.tsx

@@ -7,6 +7,7 @@ import useBottomSafeSafeAreaPaddingStyle from '@hooks/useBottomSafeSafeAreaPaddi
 import useDebouncedAccessibilityAnnouncement from '@hooks/useDebouncedAccessibilityAnnouncement';
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
+import type {TableData} from '.';
 import {useTableContext} from './TableContext';
 
 /**
@@ -45,10 +46,19 @@ type TableBodyProps = ViewProps & {
  * </Table>
  * ```
  */
-function TableBody<T>({contentContainerStyle, style, ...props}: TableBodyProps) {
+function TableBody<DataType extends TableData>({contentContainerStyle, style, ...props}: TableBodyProps) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
-    const {processedData: filteredAndSortedData, activeSearchString, listProps, listRef, shouldUseNarrowTableLayout, hasActiveFilters, hasSearchString, isEmptyResult} = useTableContext<T>();
+    const {
+        processedData: filteredAndSortedData,
+        activeSearchString,
+        listProps,
+        listRef,
+        shouldUseNarrowTableLayout,
+        hasActiveFilters,
+        hasSearchString,
+        isEmptyResult,
+    } = useTableContext<DataType>();
     const {ListEmptyComponent, contentContainerStyle: listContentContainerStyle, ...restListProps} = listProps ?? {};
 
     const tableBodyContentContainerStyle = useBottomSafeSafeAreaPaddingStyle({
@@ -88,7 +98,7 @@ function TableBody<T>({contentContainerStyle, style, ...props}: TableBodyProps)
             style={[styles.flex1, styles.mnh0, style]}
             {...props}
         >
-            <FlashList<T>
+            <FlashList<DataType>
                 ref={listRef}
                 data={filteredAndSortedData}
                 style={[styles.flex1, styles.mnh0]}

src/components/Table/TableContext.tsx

@@ -2,27 +2,30 @@ import type {FlashListRef} from '@shopify/flash-list';
 import React, {createContext, useContext} from 'react';
 import type {FilterConfig} from './middlewares/filtering';
 import type {ActiveSorting} from './middlewares/sorting';
-import type {SharedListProps, TableColumn, TableMethods} from './types';
+import type {SharedListProps, TableColumn, TableData, TableMethods, TableRow} from './types';
 
 /**
  * The shape of the Table context value.
  * This context is provided by the `<Table>` component and consumed by its sub-components.
  *
- * @template T - The type of items in the table's data array.
+ * @template DataType - The type of items in the table's data array.
  * @template ColumnKey - A string literal type representing the valid column keys.
  */
-type TableContextValue<T, ColumnKey extends string = string, FilterKey extends string = string> = {
+type TableContextValue<DataType extends TableData, ColumnKey extends string = string, FilterKey extends string = string> = {
     /** The title of the table when shown on smaller screens. */
     title?: string;
 
     /** Reference to the underlying FlashList for programmatic control. */
-    listRef: React.RefObject<FlashListRef<T> | null>;
+    listRef: React.RefObject<FlashListRef<DataType> | null>;
 
     /** FlashList props passed through from the Table component. */
-    listProps: SharedListProps<T>;
+    listProps: SharedListProps<DataType>;
+
+    /** Whether or not selection is enabled for the table */
+    selectionEnabled?: boolean;
 
     /** The data array after filtering, searching, and sorting have been applied. */
-    processedData: T[];
+    processedData: Array<TableRow<DataType>>;
 
     /** The original length of the data array before any processing. */
     originalDataLength: number;
@@ -54,11 +57,14 @@ type TableContextValue<T, ColumnKey extends string = string, FilterKey extends s
     /** Whether the table has an empty result caused by search or filters. */
     isEmptyResult: boolean;
 
+    /** Whether or not table selection is enabled on mobile */
+    isMobileSelectionEnabled: boolean;
+
     /** Whether to use a narrow layout (e.g. on mobile screens). */
     shouldUseNarrowTableLayout: boolean;
 };
 
-const defaultTableContextValue: TableContextValue<unknown, string> = {
+const defaultTableContextValue: TableContextValue<TableData, string> = {
     listRef: React.createRef(),
     processedData: [],
     originalDataLength: 0,
@@ -71,11 +77,12 @@ const defaultTableContextValue: TableContextValue<unknown, string> = {
     activeSearchString: '',
     tableMethods: {} as TableMethods<string, string>,
     filterConfig: undefined,
-    listProps: {} as SharedListProps<unknown>,
+    listProps: {} as SharedListProps<TableData>,
     hasActiveFilters: false,
     hasSearchString: false,
     isEmptyResult: false,
     shouldUseNarrowTableLayout: false,
+    isMobileSelectionEnabled: false,
 };
 
 const TableContext = createContext(defaultTableContextValue);
@@ -97,14 +104,14 @@ const TableContext = createContext(defaultTableContextValue);
  * }
  * ```
  */
-function useTableContext<T, ColumnKey extends string = string>() {
+function useTableContext<DataType extends TableData, ColumnKey extends string = string>() {
     const context = useContext(TableContext);
 
     if (context === defaultTableContextValue && context.activeFilters === undefined) {
         throw new Error('useTableContext must be used within a Table provider');
     }
 
-    return context as unknown as TableContextValue<T, ColumnKey>;
+    return context as unknown as TableContextValue<DataType, ColumnKey>;
 }
 
 export default TableContext;