Expandable rows TableView (#4641)

* poking around to make Rows process nested rows

* cleanup

* progress

* got nested rows rendering

still need to double check node info like index, level, prev/next key and fix keyboard nav

* fixing naming and adding way to track rows that have nested rows

* fixing expandable row detection and debugging weird TableLayout issue

for some reason it is trying to render a child row of a non-expanded row

* renaming from treeble to TreeGrid

* fix cell values and weird crash with dynamic treeble with subset of keys expanded

* update left/right keyboard navigation logic

* updating up/down keyboard navigation logic

for now made changes to getNext/PrevKey in the collection, see comments about why

* fixing typeahead and using this.getChildNodes whereever possible

* cleanup and fix getText

* fixing index and column assignment to node

still need to debug why I cant make the rows in the body 0 indexed

* debugging persisted keys

* adding basic story to check controlled expanded keys

* musings when trying to fix persisted key case

* enforcing user places cells before nested rows

* making GridNode index track position with respect to parent and adding indexOfType to track posinset

* fixing persisted keys by adding index for headerrows and columns

* create Table wrapper element to conditionally render Table or TreeGridTable

* get rid of extra story

* update keyboard delegate to use node.indexOfType

we dont actually set indexOfType in TableCollection so use index as fallback

* adding tree grid aria

for now not including aria row index, will need to test announcement differences

* fix crash on collapse

it is possible for the collection to be up to date but the removed items still go through a render cycle before being removed

* fixes from screen reader testing

experiemented with adding aria-rowindex as per wai-aria docs but decided to omit it since it made for a confusing announcement in NVDA where there was two row position announcements

* setting up tests, debugging why they dont run

not sure why the feature flag isnt being set to true...

* add feature flag getter for tests for now

* fixing row border styling and adding more tests

* TableView expandable rows: rendering + interactions (#4663)

* start implementing toggle chevron

* expandable-rows-start

* add padding based on level

* improve padding offset

* update level logic

* use usePress for expand button

* cleanup styles

* add keyboard interactions

* fix rendering chevron on static example

* use expand as row action if none provided

* fix chevron rendering

* only keyboard toggle if expandable

* cleanup

* types

* skip two focus tests

* fix chevron position in RTL

* handle cases of controlled & not updating expanded

* fixing crash when collapsing rows

* Adjusting so chevron appears on first row header cell

* fix messed up merge conflict

* remove edge case check

* fix deps

* check for props.childItems instead of link

* making chevron focusable by screen readers

* Support Enter/press on chevron cell to expand/collapse row

seems to interfere with row actions...

* update offset logic

* update offset logic again

* fix crashes when switching between selectionMode/styles and fix tests

* fixing indenting

* Get rid of cell action since it blocks row actions

* fix expansion button rendering

* Fix chevron disappearance when selectioncheckboxs are added

The columnCount from the collection includes the drag handle and selection columns, messing up the check for if a static row is expandable. Updated to add a counter in the collection that represents the number of columns without the drag handle and selection column so we can easily tell if a static row has nested rows as children without needing to iterate over the children every time

* adjusting row header id placement so it doesnt include the chevron label

* fix selection extension for nested rows when using shift + click/arrow keys

compareNodeOrder didnt handle cases where the compared nodes were of different level and one of the nodes was a top level node OR if one node contained the other node

* fixing logic for compareNodeOrders

* Adding tests for compareNodeOrder updates + range selection

---------

Co-authored-by: Daniel Lu <[email protected]>

* fix shared context for base tableview and treegrid tableview

moved context up into wrapper since resizer and stuff relies on the the context being the same between the two tables

* fixing lint for build

* adding more stories

* adding more row selection test

* make NVDA/Talkback not announce the chevron label when the cell is focused

VoiceOver still announces the chevron as part of the cells content but that was true before this change anyways. Change not made in the hooks because we need to differentiate the grid cell content from the chevron but we only have gridCellProps in the hook. Make that update later when we make expandable table rows aria example

* add chevron rotation transition and increase hit target

some misc followup items from testing as well

* add chromatic stories

* adding tests for loading state, onAction, and highlight selection

* adding persisted key and remaining keyboard nav tests

* add expand/collapse tests

* (WIP) Simplify TreeGridCollection by building the keymap inside state instead  (#4730)

* tentative update to treegridstate to minimize usage of treegrid collection

reversions of delegate and layout code to come

* revert changes to keyboard delegates and other areas

now that we are using TableCollection again with a flattened set of rows, reverted uneeded changes where possible. Kept TableLayout changes since it felt non-tree specific and is an overall improvement

* partial simplification of TreeGridCollection

one snag is that useCollection expects the collection provided as the factory to have a bunch of getters that TreeGridCollection just doesnt need

* get rid of TreeGridCollection in favor of function in useTreeGridState

TreeGridCollection was only really being used to generate a keymap of tree grid nodes to set aria-posinset and other aria attributes so it was a bit overkill and didnt need all the extra required getters, especially since TableCollection would be used in layout/keyboard delegates.

* Refactoring TableView wrapper strategy

merges TreeGridTable and TableView logic so there is less duplicated code

* renaming tableview files

previous commit is for code reviewers for TableView diffing. This commit renames the components to be more appropriate for their actual usage

* getting rid of extraneous shouldShowCheckbox

now that it is lifted into TableView/TreeGridTableView we dont need it in the base TableView

* fixing tests for react-17

not entirely sure what was breaking, but this prevents the base table tests from being run twice when the TreeGridTable tests are run

* cleaning up todos

* adding alpha to types

* Add message for feature flag pointing to docs

* Remove zoom transition effect from TableView  (#4771)

* alternative transition approach 2

* Revert "alternative transition approach 2"

This reverts commit ede52f4.

* another alterative

* trigger build

* cleanup

* Adding UNSTABLE to expandable rows state hook and prop

added so people will know about its alpha status even though it lives in a stable release package

* addressing review comments

* moving expand/collapse chevron label to intl files

* addressing review comments (prop rename and stuff)

* hide expandable table props from spectrum docs

* removing column node assigment to treegrid node cell

as per review, already done in TableCollection, nor do I really use it

* expanding type and fixing tests to get rid of .onlys

the type change broadens the table children type so Collection builder doesnt complain. I also moved the feature flag test into TableView so I dont need the .onlys. Making a separate file to contain the tableTests function works as well and allows us to run those tests in TreeGridTable instead but this felt more appropriate

* fix tests in 17

* Fix click focus and transform overlap for expandable row chevron (#4808)

* focusing row when chevron is clicked

the chevron doesnt have a tabindex so clicking it doesnt make focus enter the table so we need to manually do so

* getting rid of columns array in favor of a counter

* fix chevron button hit area

doesnt overlap row content when row is narrow and overflow wrap is applied

---------

Co-authored-by: Reid Barber <[email protected]>

Author: LFDanLu

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