Expandable rows TableView

packages/@adobe/spectrum-css-temp/components/table/index.css

@@ -219,27 +219,29 @@ svg.spectrum-Table-sortedIcon {
   }
 }
 
-.spectrum-Table-cell {
-  box-sizing: border-box;
-  font-size: var(--spectrum-table-cell-text-size);
-  font-weight: var(--spectrum-table-cell-text-font-weight);
-  /* need to subtract 1px here because 14px * 1.5 + 14px + 14px = 49px, and we want 48px */
-  line-height: calc(calc(var(--spectrum-table-cell-text-size) * var(--spectrum-table-cell-text-line-height)) - 1px);
-  padding: var(--spectrum-table-cell-regular-padding-y) var(--spectrum-table-cell-padding-x);
+.spectrum-Table--regular {
+  --spectrum-table-cell-padding-y: var(--spectrum-table-cell-regular-padding-y);
 }
-.spectrum-Table--regular {}
 
 .spectrum-Table--compact .spectrum-Table-cell {
-  padding-top: var(--spectrum-table-cell-compact-padding-y);
-  padding-bottom: var(--spectrum-table-cell-compact-padding-y);
+  --spectrum-table-cell-padding-y: var(--spectrum-table-cell-compact-padding-y);
 }
 
 .spectrum-Table--spacious .spectrum-Table-cell {
-  padding-top: var(--spectrum-table-cell-spacious-padding-y);
-  padding-bottom: var(--spectrum-table-cell-spacious-padding-y);
+  --spectrum-table-cell-padding-y: var(--spectrum-table-cell-spacious-padding-y);
+}
+
+.spectrum-Table-cell {
+  box-sizing: border-box;
+  font-size: var(--spectrum-table-cell-text-size);
+  font-weight: var(--spectrum-table-cell-text-font-weight);
+  /* need to subtract 1px here because 14px * 1.5 + 14px + 14px = 49px, and we want 48px */
+  line-height: calc(calc(var(--spectrum-table-cell-text-size) * var(--spectrum-table-cell-text-line-height)) - 1px);
+  padding: var(--spectrum-table-cell-padding-y) var(--spectrum-table-cell-padding-x);
 }
 
 .spectrum-Table-cellContents {
+  grid-area: contents;
   flex: 1 1 0%;
   /* To ensure the flex child only takes up available width, see https://makandracards.com/makandra/66994-css-flex-and-min-width */
   min-width: 0px;
@@ -254,6 +256,26 @@ svg.spectrum-Table-sortedIcon {
   margin: -4px;
 }
 
+.spectrum-Table-expandButton {
+  grid-area: expand-button;
+  height: var(--spectrum-global-dimension-size-400);
+  margin: calc(var(--spectrum-table-cell-padding-y) * -1) 0;
+  display: flex;
+  flex-wrap: wrap;
+  align-content: center;
+  justify-content: center;
+  outline: none;
+  transition: transform ease var(--spectrum-global-animation-duration-100);
+  &.is-open {
+    [dir='ltr'] & {
+      transform: rotate(90deg);
+    }
+    [dir='rtl'] & {
+      transform: rotate(-90deg);
+    }
+  }
+}
+
 .spectrum-Table-cell--hideHeader {
   padding: 0;
   justify-content: center;

packages/@react-aria/grid/src/useGridRow.ts

@@ -10,16 +10,16 @@
  * governing permissions and limitations under the License.
  */
 
-import {DOMAttributes, FocusableElement, Node} from '@react-types/shared';
-import {GridCollection} from '@react-types/grid';
+import {DOMAttributes, FocusableElement} from '@react-types/shared';
+import {GridCollection, GridNode} from '@react-types/grid';
 import {gridMap} from './utils';
 import {GridState} from '@react-stately/grid';
 import {RefObject} from 'react';
 import {SelectableItemStates, useSelectableItem} from '@react-aria/selection';
 
 export interface GridRowProps<T> {
   /** An object representing the grid row. Contains all the relevant information that makes up the grid row. */
-  node: Node<T>,
+  node: GridNode<T>,
   /** Whether the grid row is contained in a virtual scroller. */
   isVirtualized?: boolean,
   /** Whether selection should occur on press up instead of press down. */

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

@@ -20,7 +20,7 @@ import {mergeProps, useDescription, useId, useUpdateEffect} from '@react-aria/ut
 import {Node} from '@react-types/shared';
 import {RefObject, useMemo} from 'react';
 import {TableKeyboardDelegate} from './TableKeyboardDelegate';
-import {TableState} from '@react-stately/table';
+import {TableState, TreeGridState} from '@react-stately/table';
 import {useCollator, useLocale, useLocalizedStringFormatter} from '@react-aria/i18n';
 
 export interface AriaTableProps<T> extends GridProps {
@@ -36,7 +36,7 @@ export interface AriaTableProps<T> extends GridProps {
  * @param state - State for the table, as returned by `useTableState`.
  * @param ref - The ref attached to the table element.
  */
-export function useTable<T>(props: AriaTableProps<T>, state: TableState<T>, ref: RefObject<HTMLElement>): GridAria {
+export function useTable<T>(props: AriaTableProps<T>, state: TableState<T> | TreeGridState<T>, ref: RefObject<HTMLElement>): GridAria {
   let {
     keyboardDelegate,
     isVirtualized,
@@ -70,6 +70,10 @@ export function useTable<T>(props: AriaTableProps<T>, state: TableState<T>, ref:
     gridProps['aria-rowcount'] = state.collection.size + state.collection.headerRows.length;
   }
 
+  if ('expandedKeys' in state) {
+    gridProps.role = 'treegrid';
+  }
+
   let {column, direction: sortDirection} = state.sortDescriptor || {};
   let stringFormatter = useLocalizedStringFormatter(intlMessages);
   let sortDescription = useMemo(() => {

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

@@ -32,7 +32,7 @@ export function useTableHeaderRow<T>(props: GridRowProps<T>, state: TableState<T
     role: 'row'
   };
 
-  if (isVirtualized) {
+  if (isVirtualized && !('expandedKeys' in state)) {
     rowProps['aria-rowindex'] = node.index + 1; // aria-rowindex is 1 based
   }
 

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

@@ -11,23 +11,71 @@
  */
 
 import {FocusableElement} from '@react-types/shared';
+import {getLastItem} from '@react-stately/collections';
 import {getRowLabelledBy} from './utils';
+import type {GridNode} from '@react-types/grid';
 import {GridRowAria, GridRowProps, useGridRow} from '@react-aria/grid';
-import {RefObject} from 'react';
+import {HTMLAttributes, RefObject} from 'react';
+import {mergeProps} from '@react-aria/utils';
 import {TableCollection} from '@react-types/table';
-import {TableState} from '@react-stately/table';
+import {TableState, TreeGridState} from '@react-stately/table';
+import {useLocale} from '@react-aria/i18n';
+
+const EXPANSION_KEYS = {
+  expand: {
+    ltr: 'ArrowRight',
+    rtl: 'ArrowLeft'
+  },
+  'collapse': {
+    ltr: 'ArrowLeft',
+    rtl: 'ArrowRight'
+  }
+};
 
 /**
  * Provides the behavior and accessibility implementation for a row in a table.
  * @param props - Props for the row.
  * @param state - State of the table, as returned by `useTableState`.
  */
-export function useTableRow<T>(props: GridRowProps<T>, state: TableState<T>, ref: RefObject<FocusableElement>): GridRowAria {
-  let {node} = props;
+export function useTableRow<T>(props: GridRowProps<T>, state: TableState<T> | TreeGridState<T>, ref: RefObject<FocusableElement>): GridRowAria {
+  let {node, isVirtualized} = props;
   let {rowProps, ...states} = useGridRow<T, TableCollection<T>, TableState<T>>(props, state, ref);
+  let {direction} = useLocale();
+
+  if (isVirtualized && !('expandedKeys' in state)) {
+    rowProps['aria-rowindex'] = node.index + 1 + state.collection.headerRows.length; // aria-rowindex is 1 based
+  } else {
+    delete rowProps['aria-rowindex'];
+  }
+
+  let treeGridRowProps: HTMLAttributes<HTMLElement> = {};
+  if ('expandedKeys' in state) {
+    let treeNode = state.keyMap.get(node.key);
+    if (treeNode != null) {
+      let hasChildRows = treeNode.props?.UNSTABLE_childItems || treeNode.props?.children?.length > state.userColumnCount;
+      treeGridRowProps = {
+        onKeyDown: (e) => {
+          if ((e.key === EXPANSION_KEYS['expand'][direction]) && state.selectionManager.focusedKey === treeNode.key && hasChildRows && state.expandedKeys !== 'all' && !state.expandedKeys.has(treeNode.key)) {
+            state.toggleKey(treeNode.key);
+            e.stopPropagation();
+          } else if ((e.key === EXPANSION_KEYS['collapse'][direction]) && state.selectionManager.focusedKey === treeNode.key && hasChildRows && (state.expandedKeys === 'all' || state.expandedKeys.has(treeNode.key))) {
+            state.toggleKey(treeNode.key);
+            e.stopPropagation();
+          }
+        },
+        'aria-expanded': hasChildRows ? state.expandedKeys === 'all' || state.expandedKeys.has(node.key) : undefined,
+        'aria-level': treeNode.level,
+        'aria-posinset': treeNode.indexOfType + 1,
+        'aria-setsize': treeNode.level > 1 ?
+          (getLastItem(state.keyMap.get(treeNode?.parentKey).childNodes) as GridNode<T>).indexOfType + 1 :
+          (getLastItem(state.keyMap.get(state.collection.body.key).childNodes) as GridNode<T>).indexOfType + 1
+      };
+    }
+  }
+
   return {
     rowProps: {
-      ...rowProps,
+      ...mergeProps(rowProps, treeGridRowProps),
       'aria-labelledby': getRowLabelledBy(state, node.key)
     },
     ...states