[pull] main from adobe:main

packages/@react-aria/test-utils/src/table.ts

@@ -504,8 +504,7 @@ export class TableTester {
    * Returns the rows within the table if any.
    */
   get rows(): HTMLElement[] {
-    let bodyRowGroup = this.rowGroups[1];
-    return bodyRowGroup ? within(bodyRowGroup).queryAllByRole('row') : [];
+    return this.rowGroups.slice(1).flatMap(rowGroup => within(rowGroup).queryAllByRole('row'));
   }
 
   /**

packages/@react-spectrum/s2/exports/TableView.ts

@@ -1,4 +1,4 @@
-export {TableView, TableHeader, TableBody, Row, Cell, Column, TableContext, EditableCell} from '../src/TableView';
+export {TableView, TableHeader, TableBody, Row, Cell, Column, TableContext, EditableCell, TableFooter} from '../src/TableView';
 export {Collection} from 'react-aria/Collection';
-export type {TableViewProps, TableHeaderProps, TableBodyProps, RowProps, CellProps, ColumnProps} from '../src/TableView';
+export type {TableViewProps, TableHeaderProps, TableBodyProps, RowProps, CellProps, ColumnProps, TableFooterProps} from '../src/TableView';
 export type {Selection, Key, SelectionMode, SortDescriptor, SortDirection} from '@react-types/shared';

packages/@react-spectrum/s2/exports/index.ts

@@ -77,7 +77,7 @@ export {Skeleton, useIsSkeleton} from '../src/Skeleton';
 export {SkeletonCollection} from '../src/SkeletonCollection';
 export {StatusLight, StatusLightContext} from '../src/StatusLight';
 export {Switch, SwitchContext} from '../src/Switch';
-export {TableView, TableHeader, TableBody, Row, Cell, Column, TableContext, EditableCell} from '../src/TableView';
+export {TableView, TableHeader, TableBody, Row, Cell, Column, TableContext, EditableCell, TableFooter} from '../src/TableView';
 export {Tabs, TabList, Tab, TabPanel, TabsContext} from '../src/Tabs';
 export {TagGroup, Tag, TagGroupContext} from '../src/TagGroup';
 export {TextArea, TextField, TextAreaContext, TextFieldContext} from '../src/TextField';
@@ -164,7 +164,7 @@ export type {SkeletonProps} from '../src/Skeleton';
 export type {SkeletonCollectionProps} from '../src/SkeletonCollection';
 export type {StatusLightProps} from '../src/StatusLight';
 export type {SwitchProps} from '../src/Switch';
-export type {TableViewProps, TableHeaderProps, TableBodyProps, RowProps, CellProps, ColumnProps} from '../src/TableView';
+export type {TableViewProps, TableHeaderProps, TableBodyProps, RowProps, CellProps, ColumnProps, TableFooterProps} from '../src/TableView';
 export type {TabsProps, TabProps, TabListProps, TabPanelProps} from '../src/Tabs';
 export type {TagGroupProps, TagProps} from '../src/TagGroup';
 export type {TextFieldProps, TextAreaProps, TextFieldRef} from '../src/TextField';

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

@@ -27,6 +27,8 @@ import {
   Table as RACTable,
   TableBody as RACTableBody,
   TableBodyProps as RACTableBodyProps,
+  TableFooter as RACTableFooter,
+  TableFooterProps as RACTableFooterProps,
   TableHeader as RACTableHeader,
   TableHeaderProps as RACTableHeaderProps,
   TableProps as RACTableProps,
@@ -206,22 +208,19 @@ export class S2TableLayout<T> extends TableLayout<T> {
   }
 
   protected buildCollection(): LayoutNode[] {
-    let [header, body] = super.buildCollection();
-    if (!header) {
+    let rowGroups = super.buildCollection();
+    if (rowGroups.length < 2) {
       return [];
     }
-    let {layoutInfo} = body;
+    let {layoutInfo} = rowGroups[1];
     // TableLayout's buildCollection always sets the body width to the max width between the header width, but
     // we want the body to be sticky and only as wide as the table so it is always in view if loading/empty
     let isEmptyOrLoading = this.virtualizer?.collection.size === 0;
     if (isEmptyOrLoading) {
       layoutInfo.rect.width = this.virtualizer!.size.width - 80;
     }
 
-    return [
-      header,
-      body
-    ];
+    return rowGroups;
   }
 
   protected buildLoader(node: Node<T>, x: number, y: number): LayoutNode {
@@ -1511,6 +1510,7 @@ const rowBackgroundColor = {
     isHovered: selectedActiveBackground, // table-selected-row-background-color, opacity /15
     isPressed: selectedActiveBackground // table-selected-row-background-color, opacity /15
   },
+  isInFooter: 'gray-200',
   forcedColors: {
     default: 'Background'
   }
@@ -1523,10 +1523,11 @@ const rowTextColor = {
     default: 'disabled',
     forcedColors: 'GrayText'
   },
+  isInFooter: 'neutral',
   forcedColors: 'ButtonText'
 } as const;
 
-const row = style<RowRenderProps & S2TableProps>({
+const row = style<RowRenderProps & S2TableProps & {isInFooter?: boolean}>({
   height: 'full',
   position: 'relative',
   boxSizing: 'border-box',
@@ -1580,6 +1581,10 @@ const row = style<RowRenderProps & S2TableProps>({
     default: 'gray-300',
     forcedColors: 'ButtonBorder'
   },
+  fontWeight: {
+    default: 'normal',
+    isInFooter: 'bold'
+  },
   forcedColorAdjust: 'none'
 });
 
@@ -1599,16 +1604,20 @@ export const Row = /*#__PURE__*/ (forwardRef as forwardRefType)(function Row<T e
   let {selectionBehavior, selectionMode} = useTableOptions();
   let tableVisualOptions = useContext(InternalTableContext);
   let domRef = useDOMRef(ref);
+  let isInFooter = useContext(FooterContext);
 
   return (
     (<RACRow
       // @ts-ignore
       ref={domRef}
       id={id}
       dependencies={[...dependencies, columns]}
+      isDisabled={isInFooter}
+      disabledBehavior="selection"
       className={renderProps => row({
         ...renderProps,
-        ...tableVisualOptions
+        ...tableVisualOptions,
+        isInFooter
       }) + (renderProps.isFocusVisible ? ' ' + css('&:before { content: ""; display: inline-block; position: sticky; inset-inline-start: 0; width: 3px; height: 100%; margin-inline-end: -3px; margin-block-end: 1px;  z-index: 3; background-color: var(--rowFocusIndicatorColor)') : '')}
       {...otherProps}>
       {selectionMode !== 'none' && selectionBehavior === 'toggle' && (
@@ -1625,3 +1634,22 @@ export const Row = /*#__PURE__*/ (forwardRef as forwardRefType)(function Row<T e
     </RACRow>)
   );
 });
+
+export interface TableFooterProps<T> extends Omit<RACTableFooterProps<T>, 'style' | 'className' | 'render' | 'onHoverChange' | 'onHoverStart' | 'onHoverEnd' | keyof GlobalDOMAttributes> {}
+
+const FooterContext = createContext(false);
+
+/**
+ * A footer within a `<Table>`, containing summary rows.
+ */
+export const TableFooter = /*#__PURE__*/ (forwardRef as forwardRefType)(function TableFooter<T extends object>(props: TableFooterProps<T>, ref: DOMRef<HTMLDivElement>) {
+  let domRef = useDOMRef(ref);
+
+  return (
+    <FooterContext.Provider value>
+      <RACTableFooter
+        {...props}
+        ref={domRef} />
+    </FooterContext.Provider>
+  );
+});

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

@@ -22,6 +22,7 @@ import {
   EditableCell,
   Row,
   TableBody,
+  TableFooter,
   TableHeader,
   TableView,
   TableViewProps
@@ -1887,3 +1888,44 @@ function NestedInlineEditExample(args) {
 export const TableWithNestedRowsAndInlineEditing: StoryObj<typeof TableView> = {
   render: (args) => <NestedInlineEditExample {...args} />
 };
+
+const invoices = [
+  {title: 'Website Design', status: 'Paid', paymentMethod: 'Credit Card', price: '$1,200'},
+  {title: 'Logo Creation', status: 'Pending', paymentMethod: 'PayPal', price: '$350'},
+  {title: 'SEO Optimization', status: 'Overdue', paymentMethod: 'Bank Transfer', price: '$800'},
+  {title: 'Social Media Setup', status: 'Paid', paymentMethod: 'Debit Card', price: '$450'},
+  {title: 'Content Writing', status: 'Pending', paymentMethod: 'Credit Card', price: '$600'},
+  {title: 'App Development', status: 'Paid', paymentMethod: 'Wire Transfer', price: '$5,000'},
+  {title: 'Maintenance Plan', status: 'Overdue', paymentMethod: 'PayPal', price: '$200'}
+];
+
+export const TableFooterExample: StoryObj<typeof TableView> = {
+  render: (args) => {
+    return (
+      <TableView aria-label="Files" selectionMode="multiple"  styles={style({width: 700})} {...args}>
+        <TableHeader>
+          <Column isRowHeader allowsResizing>Title</Column>
+          <Column allowsResizing>Status</Column>
+          <Column allowsResizing>Payment Method</Column>
+          <Column>Price</Column>
+        </TableHeader>
+        <TableBody items={invoices}>
+          {item => (
+            <Row id={item.title}>
+              <Cell>{item.title}</Cell>
+              <Cell>{item.status}</Cell>
+              <Cell>{item.paymentMethod}</Cell>
+              <Cell>{item.price}</Cell>
+            </Row>
+          )}
+        </TableBody>
+        <TableFooter>
+          <Row>
+            <Cell colSpan={3} align="end">Total:</Cell>
+            <Cell>{invoices.reduce((p, item) => p + Number(item.price.replace(/[$,]/g, '')), 0).toLocaleString('en-US', {style: 'currency', currency: 'USD', maximumFractionDigits: 0})}</Cell>
+          </Row>
+        </TableFooter>
+      </TableView>
+    );
+  }
+};

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

@@ -12,8 +12,8 @@
 
 jest.mock('react-aria/src/live-announcer/LiveAnnouncer');
 jest.mock('react-aria/src/utils/scrollIntoView');
-import {act, render} from '@react-spectrum/test-utils-internal';
-import {Cell, Column, Row, TableBody, TableHeader, TableView} from '../src/TableView';
+import {act, render, within} from '@react-spectrum/test-utils-internal';
+import {Cell, Column, Row, TableBody, TableFooter, TableHeader, TableView} from '../src/TableView';
 import {DisabledBehavior} from '@react-types/shared';
 import Filter from '../s2wf-icons/S2_Icon_Filter_20_N.svg';
 import {MenuItem, MenuSection} from '../src/Menu';
@@ -33,7 +33,7 @@ describe('TableView', () => {
   beforeAll(function () {
     user = userEvent.setup({delay: null, pointerMap});
     offsetWidth = jest.spyOn(window.HTMLElement.prototype, 'clientWidth', 'get').mockImplementation(() => 400);
-    offsetHeight = jest.spyOn(window.HTMLElement.prototype, 'clientHeight', 'get').mockImplementation(() => 200);
+    offsetHeight = jest.spyOn(window.HTMLElement.prototype, 'clientHeight', 'get').mockImplementation(() => 1000);
     window.CSSTransition = jest.fn(({children}) => children);
 
     // Mock the getAnimations method
@@ -196,4 +196,67 @@ describe('TableView', () => {
     expect(tabs[0]).toHaveAttribute('aria-selected', 'false');
     expect(tabs[1]).toHaveAttribute('aria-selected', 'true');
   });
+
+  it('should support table footer', async () => {
+    const invoices = [
+      {title: 'Website Design', status: 'Paid', paymentMethod: 'Credit Card', price: '$1,200'},
+      {title: 'Logo Creation', status: 'Pending', paymentMethod: 'PayPal', price: '$350'},
+      {title: 'SEO Optimization', status: 'Overdue', paymentMethod: 'Bank Transfer', price: '$800'},
+      {title: 'Social Media Setup', status: 'Paid', paymentMethod: 'Debit Card', price: '$450'},
+      {title: 'Content Writing', status: 'Pending', paymentMethod: 'Credit Card', price: '$600'},
+      {title: 'App Development', status: 'Paid', paymentMethod: 'Wire Transfer', price: '$5,000'},
+      {title: 'Maintenance Plan', status: 'Overdue', paymentMethod: 'PayPal', price: '$200'}
+    ];
+
+    let onSelectionChange = jest.fn();
+    let {container: root} = render(
+      <TableView aria-label="Files" selectionMode="multiple" onSelectionChange={onSelectionChange}>
+        <TableHeader>
+          <Column isRowHeader>Title</Column>
+          <Column>Status</Column>
+          <Column>Payment Method</Column>
+          <Column>Price</Column>
+        </TableHeader>
+        <TableBody items={invoices}>
+          {item => (
+            <Row id={item.title}>
+              <Cell>{item.title}</Cell>
+              <Cell>{item.status}</Cell>
+              <Cell>{item.paymentMethod}</Cell>
+              <Cell>{item.price}</Cell>
+            </Row>
+          )}
+        </TableBody>
+        <TableFooter>
+          <Row>
+            <Cell colSpan={3}>Total:</Cell>
+            <Cell>{invoices.reduce((p, item) => p + Number(item.price.replace(/[$,]/g, '')), 0).toLocaleString('en-US', {style: 'currency', currency: 'USD', maximumFractionDigits: 0})}</Cell>
+          </Row>
+        </TableFooter>
+      </TableView>
+    );
+
+    let tableTester = testUtilUser.createTester('Table', {root});
+
+    let groups = tableTester.rowGroups;
+    expect(groups).toHaveLength(3);
+
+    await user.tab();
+    for (let row of tableTester.rows) {
+      expect(document.activeElement).toBe(row);
+      await user.keyboard('{ArrowDown}');
+    }
+
+    for (let row of tableTester.rows.toReversed().slice(1)) {
+      await user.keyboard('{ArrowUp}');
+      expect(document.activeElement).toBe(row);
+    }
+
+    let footerRows = within(groups[2]).getAllByRole('row');
+    await user.click(footerRows[0]);
+    expect(onSelectionChange).not.toHaveBeenCalled();
+
+    await user.click(tableTester.rows[0]);
+    expect(onSelectionChange).toHaveBeenCalled();
+  });
 });