Table single selection, disabled rows, and emphasized checkboxes (adobe#1077)

Author: snowystinger

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

@@ -112,7 +112,7 @@ tbody.spectrum-Table-body {
   box-sizing: border-box;
 
   .spectrum-Table-cellWrapper {
-    /* Add an opaque background so that the transparent background 
+    /* Add an opaque background so that the transparent background
      * on the cell doesn't allow other cells to show through sticky cells. */
     background-color: var(--spectrum-table-background-color);
   }
@@ -134,7 +134,7 @@ tbody.spectrum-Table-body {
     }
   }
 
-  &:active .spectrum-Table-cell {
+  &:active .spectrum-Table-cell:not(.is-disabled) {
     background-color: var(--spectrum-table-row-background-color-down);
   }
 
@@ -200,7 +200,7 @@ tbody.spectrum-Table-body {
       background-color: var(--spectrum-table-quiet-row-background-color-hover);
     }
 
-    &:active .spectrum-Table-cell {
+    &:active .spectrum-Table-cell:not(.is-disabled) {
       background-color: var(--spectrum-table-quiet-row-background-color-down);
     }
 

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

@@ -69,23 +69,7 @@ export function useSelectableItem(options: SelectableItemOptions): SelectableIte
     focus
   } = options;
 
-  let onSelect = (e: PressEvent | PointerEvent) => {
-    if (manager.selectionMode === 'none') {
-      return;
-    }
-
-    if (manager.selectionMode === 'single') {
-      if (manager.isSelected(key) && !manager.disallowEmptySelection) {
-        manager.toggleSelection(key);
-      } else {
-        manager.replaceSelection(key);
-      }
-    } else if (e.shiftKey) {
-      manager.extendSelection(key);
-    } else if (manager) {
-      manager.toggleSelection(key);
-    }
-  };
+  let onSelect = (e: PressEvent | PointerEvent) => manager.select(key, e);
 
   // Focus the associated DOM node when this item becomes the focusedKey
   let isFocused = key === manager.focusedKey;

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

@@ -89,7 +89,7 @@ export class TableKeyboardDelegate<T> implements KeyboardDelegate {
         return child.key;
       }
 
-      let firstItem = this.collection.getItem(this.collection.getFirstKey());
+      let firstItem = this.collection.getItem(this.getFirstKey());
       return [...firstItem.childNodes][startItem.index].key;
     }
 
@@ -98,8 +98,8 @@ export class TableKeyboardDelegate<T> implements KeyboardDelegate {
       key = startItem.parentKey;
     }
 
-    // Find the next enabled item
-    key = this.findNextKey(item => item.type === 'item' && !this.disabledKeys.has(item.key), key);
+    // Find the next item
+    key = this.findNextKey(item => item.type === 'item', key);
     if (key != null) {
       // If focus was on a cell, focus the cell with the same index in the next row.
       if (this.isCell(startItem)) {
@@ -133,8 +133,8 @@ export class TableKeyboardDelegate<T> implements KeyboardDelegate {
       key = startItem.parentKey;
     }
 
-    // Find the previous enabled item
-    key = this.findPreviousKey(item => item.type === 'item' && !this.disabledKeys.has(item.key), key);
+    // Find the previous item
+    key = this.findPreviousKey(item => item.type === 'item', key);
     if (key != null) {
       // If focus was on a cell, focus the cell with the same index in the previous row.
       if (this.isCell(startItem)) {
@@ -282,8 +282,8 @@ export class TableKeyboardDelegate<T> implements KeyboardDelegate {
       }
     }
 
-    // Find the first enabled row
-    key = this.findNextKey(item => item.type === 'item' && !this.disabledKeys.has(item.key));
+    // Find the first row
+    key = this.findNextKey(item => item.type === 'item');
 
     // If global flag is set, focus the first cell in the first row.
     if (key != null && item && this.isCell(item) && global) {
@@ -312,8 +312,8 @@ export class TableKeyboardDelegate<T> implements KeyboardDelegate {
       }
     }
 
-    // Find the last enabled row
-    key = this.findPreviousKey(item => item.type === 'item' && !this.disabledKeys.has(item.key));
+    // Find the last row
+    key = this.findPreviousKey(item => item.type === 'item');
 
     // If global flag is set, focus the last cell in the last row.
     if (key != null && item && this.isCell(item) && global) {
@@ -375,16 +375,23 @@ export class TableKeyboardDelegate<T> implements KeyboardDelegate {
 
   getKeyPageBelow(key: Key) {
     let itemRect = this.getItemRect(key);
+
     if (!itemRect) {
       return null;
     }
 
     let pageHeight = this.getPageHeight();
-    let pageY = Math.min(this.getContentHeight() - pageHeight, itemRect.y + pageHeight);
+    let pageY = Math.min(this.getContentHeight(), itemRect.y + pageHeight);
 
     while (itemRect && itemRect.maxY < pageY) {
-      key = this.getKeyBelow(key);
-      itemRect = this.getItemRect(key);
+      let nextKey = this.getKeyBelow(key);
+      itemRect = this.getItemRect(nextKey);
+
+      // Guard against case where maxY of the last key is barely less than pageY due to rounding
+      // and thus it attempts to set key to null
+      if (nextKey != null) {
+        key = nextKey;
+      }
     }
 
     return key;

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

@@ -21,7 +21,8 @@ import {useSelectableItem} from '@react-aria/selection';
 interface GridCellProps {
   node: Node<unknown>,
   ref: RefObject<HTMLElement>,
-  isVirtualized?: boolean
+  isVirtualized?: boolean,
+  isDisabled?: boolean
 }
 
 interface GridCellAria {
@@ -32,7 +33,8 @@ export function useTableCell<T>(props: GridCellProps, state: TableState<T>): Gri
   let {
     node,
     ref,
-    isVirtualized
+    isVirtualized,
+    isDisabled
   } = props;
 
   // Handles focusing the cell. If there is a focusable child,
@@ -56,7 +58,7 @@ export function useTableCell<T>(props: GridCellProps, state: TableState<T>): Gri
   });
 
   // TODO: move into useSelectableItem?
-  let {pressProps} = usePress(itemProps);
+  let {pressProps} = usePress({...itemProps, isDisabled});
 
   // Grid cells can have focusable elements inside them. In this case, focus should
   // be marshalled to that element rather than focusing the cell itself.

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

@@ -24,19 +24,20 @@ interface ColumnHeaderProps {
   node: Node<unknown>,
   ref: RefObject<HTMLElement>,
   isVirtualized?: boolean,
-  colspan?: number
+  colspan?: number,
+  isDisabled?: boolean
 }
 
 interface ColumnHeaderAria {
   columnHeaderProps: HTMLAttributes<HTMLElement>
 }
 
 export function useTableColumnHeader<T>(props: ColumnHeaderProps, state: TableState<T>): ColumnHeaderAria {
-  let {node, colspan, ref} = props;
+  let {node, colspan, ref, isDisabled} = props;
   let {gridCellProps} = useTableCell(props, state);
 
   let {pressProps} = usePress({
-    isDisabled: !node.props.allowsSorting,
+    isDisabled: !node.props.allowsSorting || isDisabled,
     onPress() {
       state.sort(node.key);
     }

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

@@ -21,7 +21,8 @@ interface RowProps {
   node: Node<unknown>,
   ref?: RefObject<HTMLElement>,
   isVirtualized?: boolean,
-  isSelected?: boolean
+  isSelected?: boolean,
+  isDisabled?: boolean
 }
 
 interface RowAria {
@@ -33,7 +34,8 @@ export function useTableRow<T>(props: RowProps, state: TableState<T>): RowAria {
     node,
     ref,
     isVirtualized,
-    isSelected
+    isSelected,
+    isDisabled
   } = props;
 
   let {itemProps} = useSelectableItem({
@@ -44,7 +46,7 @@ export function useTableRow<T>(props: RowProps, state: TableState<T>): RowAria {
   });
 
   // TODO: move into useSelectableItem?
-  let {pressProps} = usePress(itemProps);
+  let {pressProps} = usePress({...itemProps, isDisabled});
 
   let rowProps: HTMLAttributes<HTMLElement> = {
     role: 'row',

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

@@ -19,7 +19,8 @@ import {useTableCell} from './useTableCell';
 interface RowHeaderProps {
   node: TableNode<unknown>,
   ref: RefObject<HTMLElement>,
-  isVirtualized?: boolean
+  isVirtualized?: boolean,
+  isDisabled?: boolean
 }
 
 interface RowHeaderAria {

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

@@ -17,7 +17,8 @@ import {TableState} from '@react-stately/table';
 import {useId} from '@react-aria/utils';
 
 interface SelectionCheckboxProps {
-  key: Key
+  key: Key,
+  isDisabled?: boolean
 }
 
 interface SelectionCheckboxAria {
@@ -26,19 +27,23 @@ interface SelectionCheckboxAria {
 
 export function useTableSelectionCheckbox<T>(props: SelectionCheckboxProps, state: TableState<T>): SelectionCheckboxAria {
   let {
-    key
+    key,
+    isDisabled
   } = props;
 
+  let manager = state.selectionManager;
   let checkboxId = useId();
-  let isSelected = state.selectionManager.isSelected(key);
+  let isSelected = state.selectionManager.isSelected(key) && !isDisabled;
+
+  let onChange = () => manager.select(key);
 
   return {
     checkboxProps: {
       id: checkboxId,
       'aria-label': 'Select',
       'aria-labelledby': `${checkboxId} ${getRowLabelledBy(state, key)}`,
       isSelected,
-      onChange: () => state.selectionManager.toggleSelection(key)
+      onChange
     }
   };
 }