@react-spectrum/table 3.3.2-nightly.3458 → 3.3.2

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, FocusScope, useFocusRing} from '@react-aria/focus';
+import {FocusRing, useFocusRing} from '@react-aria/focus';
 import {GridNode} from '@react-types/grid';
 // @ts-ignore
 import intlMessages from '../intl/*.json';
@@ -81,8 +81,7 @@ interface TableContextValue<T> {
   state: TableState<T>,
   layout: TableLayout<T>,
   columnState: TableColumnResizeState<T>,
-  headerRowHovered: boolean,
-  isEmpty: boolean
+  headerRowHovered: boolean
 }
 
 const TableContext = React.createContext<TableContextValue<unknown>>(null);
@@ -253,7 +252,6 @@ 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">
@@ -306,13 +304,11 @@ 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, isEmpty}}>
+    <TableContext.Provider value={{state, layout, columnState, headerRowHovered}}>
       <TableVirtualizer
-        {...mergeProps(gridProps, focusProps)}
+        {...gridProps}
         {...styleProps}
         className={
           classNames(
@@ -341,14 +337,13 @@ 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, isFocusVisible, ...otherProps}) {
+function TableVirtualizer({layout, collection, focusedKey, renderView, renderWrapper, domRef, bodyRef, setTableWidth, getColumnWidth, onVisibleRectChange: onVisibleRectChangeProp, ...otherProps}) {
   let {direction} = useLocale();
   let headerRef = useRef<HTMLDivElement>();
   let loadingState = collection.body.props.loadingState;
@@ -419,48 +414,37 @@ function TableVirtualizer({layout, collection, focusedKey, renderView, renderWra
   }, [state.contentSize, state.virtualizer, state.isAnimating, onLoadMore, isLoading]);
 
   return (
-    <FocusScope>
+    <div
+      {...mergeProps(otherProps, virtualizerProps)}
+      ref={domRef}>
       <div
-        // 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>
+        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>
-    </FocusScope>
+      <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>
   );
 }
 
@@ -477,8 +461,7 @@ function TableHeader({children, ...otherProps}) {
 function TableColumnHeader(props) {
   let {column} = props;
   let ref = useRef<HTMLDivElement>(null);
-  let {state, isEmpty} = useTableContext();
-  let {pressProps, isPressed} = usePress({isDisabled: isEmpty});
+  let {state} = useTableContext();
   let {columnHeaderProps} = useTableColumnHeader({
     node: column,
     isVirtualized: true
@@ -486,9 +469,9 @@ function TableColumnHeader(props) {
 
   let columnProps = column.props as SpectrumColumnProps<unknown>;
 
-  let {hoverProps, isHovered} = useHover({...props, isDisabled: isEmpty});
+  let {hoverProps, isHovered} = useHover(props);
 
-  const allProps = [columnHeaderProps, hoverProps, pressProps];
+  const allProps = [columnHeaderProps, hoverProps];
 
   return (
     <FocusRing focusRingClass={classNames(styles, 'focus-ring')}>
@@ -500,7 +483,6 @@ 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',
@@ -531,9 +513,8 @@ function TableColumnHeader(props) {
 }
 
 let _TableColumnHeaderButton = (props, ref: FocusableRef<HTMLDivElement>) => {
-  let {isEmpty} = useTableContext();
   let domRef = useFocusableRef(ref);
-  let {buttonProps} = useButton({...props, elementType: 'div', isDisabled: isEmpty}, domRef);
+  let {buttonProps} = useButton({...props, elementType: 'div'}, domRef);
   return (
     <div className={classNames(styles, 'spectrum-Table-headCellContents')}>
       <FocusRing focusRingClass={classNames(styles, 'focus-ring')}>
@@ -549,17 +530,16 @@ function ResizableTableColumnHeader(props) {
   let ref = useRef(null);
   let triggerRef = useRef(null);
   let resizingRef = useRef(null);
-  let {state, columnState, headerRowHovered, isEmpty} = useTableContext();
+  let {state, columnState, headerRowHovered} = 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, isDisabled: isEmpty});
+  let {hoverProps, isHovered} = useHover(props);
 
-  const allProps = [columnHeaderProps, hoverProps, pressProps];
+  const allProps = [columnHeaderProps, hoverProps];
 
   let columnProps = column.props as SpectrumColumnProps<unknown>;
 
@@ -609,7 +589,7 @@ function ResizableTableColumnHeader(props) {
     }
   }, [columnState.currentlyResizingColumn, column.key]);
 
-  let showResizer = !isEmpty && (headerRowHovered || columnState.currentlyResizingColumn != null);
+  let showResizer = headerRowHovered || columnState.currentlyResizingColumn != null;
 
   return (
     <FocusRing focusRingClass={classNames(styles, 'focus-ring')}>
@@ -621,7 +601,6 @@ 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',
@@ -706,6 +685,7 @@ function TableSelectAllCell({column}) {
         }
         <Checkbox
           {...checkboxProps}
+          isDisabled={isSingleSelectionMode}
           isEmphasized
           UNSAFE_style={isSingleSelectionMode ? {visibility: 'hidden'} : undefined}
           UNSAFE_className={classNames(styles, 'spectrum-Table-checkbox')} />