Highlight updates (#2587)

Author: devongovett

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

@@ -36,7 +36,9 @@ interface GridCellProps {
 
 interface GridCellAria {
   /** Props for the grid cell element. */
-  gridCellProps: HTMLAttributes<HTMLElement>
+  gridCellProps: HTMLAttributes<HTMLElement>,
+  /** Whether the cell is currently in a pressed state. */
+  isPressed: boolean
 }
 
 /**
@@ -75,7 +77,7 @@ export function useGridCell<T, C extends GridCollection<T>>(props: GridCellProps
     }
   };
 
-  let {itemProps} = useSelectableItem({
+  let {itemProps, isPressed} = useSelectableItem({
     selectionManager: state.selectionManager,
     key: node.key,
     ref,
@@ -223,7 +225,8 @@ export function useGridCell<T, C extends GridCollection<T>>(props: GridCellProps
   }
 
   return {
-    gridCellProps
+    gridCellProps,
+    isPressed
   };
 }
 

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

@@ -29,7 +29,9 @@ export interface GridRowProps<T> {
 
 export interface GridRowAria {
   /** Props for the grid row element. */
-  rowProps: HTMLAttributes<HTMLElement>
+  rowProps: HTMLAttributes<HTMLElement>,
+  /** Whether the row is currently in a pressed state. */
+  isPressed: boolean
 }
 
 /**
@@ -45,7 +47,7 @@ export function useGridRow<T, C extends GridCollection<T>, S extends GridState<T
     onAction
   } = props;
 
-  let {itemProps} = useSelectableItem({
+  let {itemProps, isPressed} = useSelectableItem({
     selectionManager: state.selectionManager,
     key: node.key,
     ref,
@@ -67,6 +69,7 @@ export function useGridRow<T, C extends GridCollection<T>, S extends GridState<T
   }
 
   return {
-    rowProps
+    rowProps,
+    isPressed
   };
 }

packages/@react-aria/selection/src/useSelectableItem.ts

@@ -198,7 +198,7 @@ export function useSelectableItem(options: SelectableItemOptions): SelectableIte
   });
 
   // Pressing the Enter key with selectionBehavior = 'replace' performs an action (i.e. navigation).
-  let onKeyDown = hasSecondaryAction ? (e: KeyboardEvent) => {
+  let onKeyUp = hasSecondaryAction ? (e: KeyboardEvent) => {
     if (e.key === 'Enter') {
       onAction();
     }
@@ -209,7 +209,7 @@ export function useSelectableItem(options: SelectableItemOptions): SelectableIte
       itemProps,
       allowsSelection || hasPrimaryAction ? pressProps : {},
       hasSecondaryAction ? longPressProps : {},
-      {onKeyDown, onDoubleClick}
+      {onKeyUp, onDoubleClick}
     ),
     isPressed
   };

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

@@ -27,7 +27,9 @@ interface TableCellProps {
 
 interface TableCellAria {
   /** Props for the table cell element. */
-  gridCellProps: HTMLAttributes<HTMLElement>
+  gridCellProps: HTMLAttributes<HTMLElement>,
+  /** Whether the cell is currently in a pressed state. */
+  isPressed: boolean
 }
 
 /**
@@ -37,7 +39,7 @@ interface TableCellAria {
  * @param ref - The ref attached to the cell element.
  */
 export function useTableCell<T>(props: TableCellProps, state: TableState<T>, ref: RefObject<HTMLElement>): TableCellAria {
-  let {gridCellProps} = useGridCell(props, state, ref);
+  let {gridCellProps, isPressed} = useGridCell(props, state, ref);
 
   let columnKey = props.node.column.key;
   if (state.collection.rowHeaderColumnKeys.has(columnKey)) {
@@ -46,6 +48,7 @@ export function useTableCell<T>(props: TableCellProps, state: TableState<T>, ref
   }
 
   return {
-    gridCellProps
+    gridCellProps,
+    isPressed
   };
 }

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

@@ -10,17 +10,22 @@
  * governing permissions and limitations under the License.
  */
 
-import {GridRowAria, GridRowProps} from '@react-aria/grid';
-import {RefObject} from 'react';
+import {GridRowProps} from '@react-aria/grid';
+import {HTMLAttributes, RefObject} from 'react';
 import {TableState} from '@react-stately/table';
 
+export interface TableHeaderRowAria {
+  /** Props for the grid row element. */
+  rowProps: HTMLAttributes<HTMLElement>
+}
+
 /**
  * Provides the behavior and accessibility implementation for a header row in a table.
  * @param props - Props for the row.
  * @param state - State of the table, as returned by `useTableState`.
  */
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-export function useTableHeaderRow<T>(props: GridRowProps<T>, state: TableState<T>, ref: RefObject<HTMLElement>): GridRowAria {
+export function useTableHeaderRow<T>(props: GridRowProps<T>, state: TableState<T>, ref: RefObject<HTMLElement>): TableHeaderRowAria {
   let {node, isVirtualized} = props;
   let rowProps = {
     role: 'row'

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

@@ -23,11 +23,12 @@ import {TableState} from '@react-stately/table';
  */
 export function useTableRow<T>(props: GridRowProps<T>, state: TableState<T>, ref: RefObject<HTMLElement>): GridRowAria {
   let {node} = props;
-  let {rowProps} = useGridRow<T, TableCollection<T>, TableState<T>>(props, state, ref);
+  let {rowProps, isPressed} = useGridRow<T, TableCollection<T>, TableState<T>>(props, state, ref);
   return {
     rowProps: {
       ...rowProps,
       'aria-labelledby': getRowLabelledBy(state, node.key)
-    }
+    },
+    isPressed
   };
 }