@react-spectrum/table 3.3.2 → 3.3.3-nightly.3472

package/src/TableView.tsx

@@ -15,7 +15,7 @@ import {chain, mergeProps, useLayoutEffect} from '@react-aria/utils';
 import {Checkbox} from '@react-spectrum/checkbox';
 import {classNames, useDOMRef, useFocusableRef, useStyleProps, useUnwrapDOMRef} from '@react-spectrum/utils';
 import {DOMRef, FocusableRef} from '@react-types/shared';
-import {FocusRing, useFocusRing} from '@react-aria/focus';
+import {FocusRing, FocusScope, useFocusRing} from '@react-aria/focus';
 import {GridNode} from '@react-types/grid';
 // @ts-ignore
 import intlMessages from '../intl/*.json';
@@ -81,7 +81,8 @@ interface TableContextValue<T> {
   state: TableState<T>,
   layout: TableLayout<T>,
   columnState: TableColumnResizeState<T>,
-  headerRowHovered: boolean
+  headerRowHovered: boolean,
+  isEmpty: boolean
 }
 
 const TableContext = React.createContext<TableContextValue<unknown>>(null);
@@ -252,6 +253,7 @@ function TableView<T extends object>(props: SpectrumTableProps<T>, ref: DOMRef<H
           return <TableSelectAllCell column={item} />;
         }
 
+        // TODO: consider this case, what if we have hidden headers and a empty table
         if (item.props.hideHeader) {
           return (
             <TooltipTrigger placement="top" trigger="focus">
@@ -304,11 +306,13 @@ function TableView<T extends object>(props: SpectrumTableProps<T>, ref: DOMRef<H
       setHorizontalScollbarVisible(bodyRef.current.clientHeight + 2 < bodyRef.current.offsetHeight);
     }
   }, []);
+  let {isFocusVisible, focusProps} = useFocusRing();
+  let isEmpty = state.collection.size === 0;
 
   return (
-    <TableContext.Provider value={{state, layout, columnState, headerRowHovered}}>
+    <TableContext.Provider value={{state, layout, columnState, headerRowHovered, isEmpty}}>
       <TableVirtualizer
-        {...gridProps}
+        {...mergeProps(gridProps, focusProps)}
         {...styleProps}
         className={
           classNames(
@@ -337,13 +341,14 @@ function TableView<T extends object>(props: SpectrumTableProps<T>, ref: DOMRef<H
         onVisibleRectChange={onVisibleRectChange}
         domRef={domRef}
         bodyRef={bodyRef}
+        isFocusVisible={isFocusVisible}
         getColumnWidth={columnState.getColumnWidth} />
     </TableContext.Provider>
   );
 }
 
 // This is a custom Virtualizer that also has a header that syncs its scroll position with the body.
-function TableVirtualizer({layout, collection, focusedKey, renderView, renderWrapper, domRef, bodyRef, setTableWidth, getColumnWidth, onVisibleRectChange: onVisibleRectChangeProp, ...otherProps}) {
+function TableVirtualizer({layout, collection, focusedKey, renderView, renderWrapper, domRef, bodyRef, setTableWidth, getColumnWidth, onVisibleRectChange: onVisibleRectChangeProp, isFocusVisible, ...otherProps}) {
   let {direction} = useLocale();
   let headerRef = useRef<HTMLDivElement>();
   let loadingState = collection.body.props.loadingState;
@@ -414,37 +419,48 @@ function TableVirtualizer({layout, collection, focusedKey, renderView, renderWra
   }, [state.contentSize, state.virtualizer, state.isAnimating, onLoadMore, isLoading]);
 
   return (
-    <div
-      {...mergeProps(otherProps, virtualizerProps)}
-      ref={domRef}>
+    <FocusScope>
       <div
-        role="presentation"
-        className={classNames(styles, 'spectrum-Table-headWrapper')}
-        style={{
-          width: visibleRect.width,
-          height: headerHeight,
-          overflow: 'hidden',
-          position: 'relative',
-          willChange: state.isScrolling ? 'scroll-position' : '',
-          transition: state.isAnimating ? `none ${state.virtualizer.transitionDuration}ms` : undefined
-        }}
-        ref={headerRef}>
-        {state.visibleViews[0]}
+        // Override virtualizer provided tabindex if TableView is empty so it is tabbable.
+        {...mergeProps(otherProps, virtualizerProps, collection.size === 0 && {tabIndex: 0})}
+        ref={domRef}>
+        <div
+          role="presentation"
+          className={classNames(styles, 'spectrum-Table-headWrapper')}
+          style={{
+            width: visibleRect.width,
+            height: headerHeight,
+            overflow: 'hidden',
+            position: 'relative',
+            willChange: state.isScrolling ? 'scroll-position' : '',
+            transition: state.isAnimating ? `none ${state.virtualizer.transitionDuration}ms` : undefined
+          }}
+          ref={headerRef}>
+          {state.visibleViews[0]}
+        </div>
+        <ScrollView
+          role="presentation"
+          className={
+            classNames(
+              styles,
+              'spectrum-Table-body',
+              {
+                'focus-ring': isFocusVisible
+              }
+            )
+          }
+          style={{flex: 1}}
+          innerStyle={{overflow: 'visible', transition: state.isAnimating ? `none ${state.virtualizer.transitionDuration}ms` : undefined}}
+          ref={bodyRef}
+          contentSize={state.contentSize}
+          onVisibleRectChange={chain(onVisibleRectChange, onVisibleRectChangeProp)}
+          onScrollStart={state.startScrolling}
+          onScrollEnd={state.endScrolling}
+          onScroll={onScroll}>
+          {state.visibleViews[1]}
+        </ScrollView>
       </div>
-      <ScrollView
-        role="presentation"
-        className={classNames(styles, 'spectrum-Table-body')}
-        style={{flex: 1}}
-        innerStyle={{overflow: 'visible', transition: state.isAnimating ? `none ${state.virtualizer.transitionDuration}ms` : undefined}}
-        ref={bodyRef}
-        contentSize={state.contentSize}
-        onVisibleRectChange={chain(onVisibleRectChange, onVisibleRectChangeProp)}
-        onScrollStart={state.startScrolling}
-        onScrollEnd={state.endScrolling}
-        onScroll={onScroll}>
-        {state.visibleViews[1]}
-      </ScrollView>
-    </div>
+    </FocusScope>
   );
 }
 
@@ -461,7 +477,8 @@ function TableHeader({children, ...otherProps}) {
 function TableColumnHeader(props) {
   let {column} = props;
   let ref = useRef<HTMLDivElement>(null);
-  let {state} = useTableContext();
+  let {state, isEmpty} = useTableContext();
+  let {pressProps, isPressed} = usePress({isDisabled: isEmpty});
   let {columnHeaderProps} = useTableColumnHeader({
     node: column,
     isVirtualized: true
@@ -469,9 +486,9 @@ function TableColumnHeader(props) {
 
   let columnProps = column.props as SpectrumColumnProps<unknown>;
 
-  let {hoverProps, isHovered} = useHover(props);
+  let {hoverProps, isHovered} = useHover({...props, isDisabled: isEmpty});
 
-  const allProps = [columnHeaderProps, hoverProps];
+  const allProps = [columnHeaderProps, hoverProps, pressProps];
 
   return (
     <FocusRing focusRingClass={classNames(styles, 'focus-ring')}>
@@ -483,6 +500,7 @@ function TableColumnHeader(props) {
             styles,
             'spectrum-Table-headCell',
             {
+              'is-active': isPressed,
               'is-resizable': columnProps.allowsResizing,
               'is-sortable': columnProps.allowsSorting,
               'is-sorted-desc': state.sortDescriptor?.column === column.key && state.sortDescriptor?.direction === 'descending',
@@ -513,8 +531,9 @@ function TableColumnHeader(props) {
 }
 
 let _TableColumnHeaderButton = (props, ref: FocusableRef<HTMLDivElement>) => {
+  let {isEmpty} = useTableContext();
   let domRef = useFocusableRef(ref);
-  let {buttonProps} = useButton({...props, elementType: 'div'}, domRef);
+  let {buttonProps} = useButton({...props, elementType: 'div', isDisabled: isEmpty}, domRef);
   return (
     <div className={classNames(styles, 'spectrum-Table-headCellContents')}>
       <FocusRing focusRingClass={classNames(styles, 'focus-ring')}>
@@ -530,16 +549,17 @@ function ResizableTableColumnHeader(props) {
   let ref = useRef(null);
   let triggerRef = useRef(null);
   let resizingRef = useRef(null);
-  let {state, columnState, headerRowHovered} = useTableContext();
+  let {state, columnState, headerRowHovered, isEmpty} = useTableContext();
   let stringFormatter = useLocalizedStringFormatter(intlMessages);
+  let {pressProps, isPressed} = usePress({isDisabled: isEmpty});
   let {columnHeaderProps} = useTableColumnHeader({
     node: column,
     isVirtualized: true,
     hasMenu: true
   }, state, ref);
-  let {hoverProps, isHovered} = useHover(props);
+  let {hoverProps, isHovered} = useHover({...props, isDisabled: isEmpty});
 
-  const allProps = [columnHeaderProps, hoverProps];
+  const allProps = [columnHeaderProps, hoverProps, pressProps];
 
   let columnProps = column.props as SpectrumColumnProps<unknown>;
 
@@ -589,7 +609,7 @@ function ResizableTableColumnHeader(props) {
     }
   }, [columnState.currentlyResizingColumn, column.key]);
 
-  let showResizer = headerRowHovered || columnState.currentlyResizingColumn != null;
+  let showResizer = !isEmpty && (headerRowHovered || columnState.currentlyResizingColumn != null);
 
   return (
     <FocusRing focusRingClass={classNames(styles, 'focus-ring')}>
@@ -601,6 +621,7 @@ function ResizableTableColumnHeader(props) {
             styles,
             'spectrum-Table-headCell',
             {
+              'is-active': isPressed,
               'is-resizable': columnProps.allowsResizing,
               'is-sortable': columnProps.allowsSorting,
               'is-sorted-desc': state.sortDescriptor?.column === column.key && state.sortDescriptor?.direction === 'descending',
@@ -685,7 +706,6 @@ function TableSelectAllCell({column}) {
         }
         <Checkbox
           {...checkboxProps}
-          isDisabled={isSingleSelectionMode}
           isEmphasized
           UNSAFE_style={isSingleSelectionMode ? {visibility: 'hidden'} : undefined}
           UNSAFE_className={classNames(styles, 'spectrum-Table-checkbox')} />