Fix select all checkbox disabled state and other empty state issues when loading sentinel is provided

Author: LFDanLu

packages/@react-aria/table/src/useTableSelectionCheckbox.ts

@@ -64,7 +64,7 @@ export function useTableSelectAllCheckbox<T>(state: TableState<T>): TableSelectA
     checkboxProps: {
       'aria-label': stringFormatter.format(selectionMode === 'single' ? 'select' : 'selectAll'),
       isSelected: isSelectAll,
-      isDisabled: selectionMode !== 'multiple' || state.collection.size === 0,
+      isDisabled: selectionMode !== 'multiple' || (state.collection.size === 0 || (state.collection.rows.length === 1 && state.collection.rows[0].type === 'loader')),
       isIndeterminate: !isEmpty && !isSelectAll,
       onChange: () => state.selectionManager.toggleSelectAll()
     }

packages/@react-spectrum/s2/src/TableView.tsx

@@ -216,7 +216,11 @@ export class S2TableLayout<T> extends TableLayout<T> {
     let {layoutInfo} = layoutNode;
     layoutInfo.allowOverflow = true;
     layoutInfo.rect.width = this.virtualizer!.visibleRect.width;
-    layoutInfo.isSticky = true;
+    // If performing first load or empty, the body will be sticky so we don't want to apply sticky to the loader, otherwise it will
+    // affect the positioning of the empty state renderer
+    let collection = this.virtualizer!.collection;
+    let isEmptyOrLoading = collection?.size === 0 || (collection.size === 1 && collection.getItem(collection.getFirstKey()!)!.type === 'loader');
+    layoutInfo.isSticky = !isEmptyOrLoading;
     return layoutNode;
   }
 

packages/react-aria-components/src/Table.tsx

@@ -980,7 +980,7 @@ export const TableBody = /*#__PURE__*/ createBranchComponent('tablebody', <T ext
       {...mergeProps(filterDOMProps(props as any), rowGroupProps)}
       {...renderProps}
       ref={ref}
-      data-empty={collection.size === 0 || undefined}>
+      data-empty={isEmpty || undefined}>
       {isDroppable && <RootDropIndicator />}
       <CollectionBranch
         collection={collection}

packages/react-aria-components/test/Table.test.js

@@ -1838,18 +1838,18 @@ describe('Table', () => {
     function LoadMoreTable({onLoadMore, isLoading, items}) {
       return (
         <ResizableTableContainer data-testid="scrollRegion">
-          <Table aria-label="Load more table">
-            <TableHeader>
+          <Table aria-label="Load more table" selectionMode="multiple">
+            <MyTableHeader>
               <Column isRowHeader>Foo</Column>
               <Column>Bar</Column>
-            </TableHeader>
+            </MyTableHeader>
             <TableBody renderEmptyState={() => 'No results'}>
               <Collection items={items}>
                 {(item) => (
-                  <Row>
+                  <MyRow>
                     <Cell>{item.foo}</Cell>
                     <Cell>{item.bar}</Cell>
-                  </Row>
+                  </MyRow>
                 )}
               </Collection>
               <UNSTABLE_TableLoadingSentinel isLoading={isLoading} onLoadMore={onLoadMore}>
@@ -1894,6 +1894,10 @@ describe('Table', () => {
       expect(rows[1]).toHaveTextContent('No results');
       expect(tree.queryByText('spinner')).toBeFalsy();
       expect(tree.getByTestId('loadMoreSentinel')).toBeInTheDocument();
+      let body = tableTester.rowGroups[1];
+      expect(body).toHaveAttribute('data-empty', 'true');
+      let selectAll = tree.getAllByRole('checkbox')[0];
+      expect(selectAll).toBeDisabled();
 
       // Even if the table is empty, providing isLoading will render the loader
       tree.rerender(<LoadMoreTable items={[]} isLoading />);
@@ -1902,6 +1906,10 @@ describe('Table', () => {
       expect(rows[2]).toHaveTextContent('No results');
       expect(tree.queryByText('spinner')).toBeTruthy();
       expect(tree.getByTestId('loadMoreSentinel')).toBeInTheDocument();
+      body = tableTester.rowGroups[1];
+      expect(body).toHaveAttribute('data-empty', 'true');
+      selectAll = tree.getAllByRole('checkbox')[0];
+      expect(selectAll).toBeDisabled();
     });
 
     it('should fire onLoadMore when intersecting with the sentinel', function () {