fixed virtualizer bug root cause and removed aria dependency in stately

Author: Marshall Peterson

packages/@react-spectrum/table/src/Resizer.tsx

@@ -4,10 +4,12 @@ import {FocusRing} from '@react-aria/focus';
 import React from 'react';
 import styles from '@adobe/spectrum-css-temp/components/table/vars.css';
 import {useTableColumnResize} from '@react-aria/table/src/useTableColumnResize';
+import {useTableContext} from './TableView';
 
 
 function Resizer(props, ref) {
-  const {state, item} = props;
+  const {item} = props;
+  let state = useTableContext();
   let {resizerProps} = useTableColumnResize(state, item, ref);
   return (
     <FocusRing focusRingClass={classNames(styles, 'focus-ring')}>

packages/@react-spectrum/table/src/TableView.tsx

@@ -80,7 +80,7 @@ const SELECTION_CELL_DEFAULT_WIDTH = {
 };
 
 const TableContext = React.createContext<TableState<unknown>>(null);
-function useTableContext() {
+export function useTableContext() {
   return useContext(TableContext);
 }
 
@@ -131,13 +131,13 @@ function TableView<T extends object>(props: SpectrumTableProps<T>, ref: DOMRef<H
       : DEFAULT_HEADER_HEIGHT[scale],
     estimatedHeadingHeight: props.overflowMode === 'wrap'
       ? DEFAULT_HEADER_HEIGHT[scale]
-      : null,
-    getColumnWidth: state.getColumnWidth
+      : null
   }),
-    [props.overflowMode, scale, density, state.getColumnWidth]
+    [props.overflowMode, scale, density]
   );
   let {direction} = useLocale();
   layout.collection = state.collection;
+  layout.getColumnWidth = state.getColumnWidth;
 
   let {gridProps} = useTable({
     ...props,
@@ -309,13 +309,14 @@ function TableView<T extends object>(props: SpectrumTableProps<T>, ref: DOMRef<H
         renderView={renderView}
         renderWrapper={renderWrapper}
         setTableWidth={state.setTableWidth}
-        domRef={domRef} />
+        domRef={domRef}
+        getColumnWidth={state.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, setTableWidth, ...otherProps}) {
+function TableVirtualizer({layout, collection, focusedKey, renderView, renderWrapper, domRef, setTableWidth, getColumnWidth, ...otherProps}) {
   let {direction} = useLocale();
   let headerRef = useRef<HTMLDivElement>();
   let bodyRef = useRef<HTMLDivElement>();
@@ -352,6 +353,11 @@ function TableVirtualizer({layout, collection, focusedKey, renderView, renderWra
     }
   }, state, domRef);
 
+  // If columnwidths change, need to relayout.
+  useLayoutEffect(() => {
+    state.virtualizer.relayoutNow({sizeChanged: true});
+  }, [getColumnWidth, state.virtualizer]);
+
   let headerHeight = layout.getLayoutInfo('header')?.rect.height || 0;
   let visibleRect = state.virtualizer.visibleRect;
 
@@ -532,7 +538,7 @@ function ResizableTableColumnHeader({item, state}) {
           </Item>
         </Menu>
       </MenuTrigger>
-      <Resizer ref={ref} state={state} item={item} />
+      <Resizer ref={ref} item={item} />
     </>
   );
 }

packages/@react-spectrum/table/src/index.ts

@@ -12,7 +12,7 @@
 
 /// <reference types="css-module-types" />
 
-export * from './TableView';
+export {TableView} from './TableView';
 import {Column} from '@react-stately/table';
 import {SpectrumColumnProps} from '@react-types/table';
 

packages/@react-stately/layout/src/TableLayout.ts

@@ -17,10 +17,6 @@ import {LayoutNode, ListLayout, ListLayoutOptions} from './ListLayout';
 import {TableCollection} from '@react-types/table';
 
 
-type TableLayoutOptions<T> = ListLayoutOptions<T> & {
-  getColumnWidth: (key: Key) => number
-}
-
 export class TableLayout<T> extends ListLayout<T> {
   collection: TableCollection<T>;
   lastCollection: TableCollection<T>;
@@ -29,9 +25,8 @@ export class TableLayout<T> extends ListLayout<T> {
   wasLoading = false;
   isLoading = false;
 
-  constructor(options: TableLayoutOptions<T>) {
+  constructor(options: ListLayoutOptions<T>) {
     super(options);
-    this.getColumnWidth = options.getColumnWidth;
     this.stickyColumnIndices = [];
   }
 

packages/@react-stately/table/src/useTableColumnResizeState.ts

@@ -3,7 +3,6 @@ import {ColumnProps} from '@react-types/table';
 import {getContentWidth, getDynamicColumnWidths, getMaxWidth, getMinWidth, isStatic, parseStaticWidth} from './utils';
 import {GridNode} from '@react-types/grid';
 import {Key, MutableRefObject, useCallback, useRef, useState} from 'react';
-import {useLayoutEffect} from '@react-aria/utils';
 
 export interface AffectedColumnWidth {
   /** The column key. */
@@ -49,7 +48,7 @@ export interface ColumnResizeStateProps<T> {
 
 export function useTableColumnResizeState<T>(props: ColumnResizeStateProps<T>): ColumnResizeState<T> {
   const {columns, getDefaultWidth, tableWidth: defaultTableWidth = null} = props;
-  const columnsRef = useRef<GridNode<T>[]>();
+  const columnsRef = useRef<GridNode<T>[]>([]);
   const tableWidth = useRef<number>(defaultTableWidth);
   const isResizing = useRef<boolean>(null);
   const startResizeContentWidth = useRef<number>();
@@ -103,12 +102,15 @@ export function useTableColumnResizeState<T>(props: ColumnResizeStateProps<T>):
     return widths;
   }, [getStaticAndDynamicColumns, getResolvedColumnWidth]);
 
+
+  const prevColKeys = columnsRef.current.map(col => col.key);
+  const colKeys = columns.map(col => col.key);
   // if the columns change, need to rebuild widths.
-  useLayoutEffect(() => {
+  if (!colKeys.every((col, i) => col === prevColKeys[i])) {
     columnsRef.current = columns;
     const widths = buildColumnWidths(columns, tableWidth.current);
     setColumnWidthsForRef(widths);
-  }, [columns, buildColumnWidths]);
+  }
 
   function setTableWidth(width: number) {
     if (width && width !== tableWidth.current) {

packages/@react-stately/virtualizer/src/ReusableView.ts

@@ -31,7 +31,7 @@ export class ReusableView<T extends object, V> {
   layoutInfo: LayoutInfo | null;
 
   /** The content currently being displayed by this view, set by the collection view. */
-  content: any;
+  content: T;
 
   rendered: V;
 

packages/@react-stately/virtualizer/src/Virtualizer.ts

@@ -326,11 +326,9 @@ export class Virtualizer<T extends object, V, W> {
     reusableView.rendered = this._renderContent(type, reusableView.content);
   }
 
-  private _renderContent(type: string, content: any) {
-    let cached = this._renderedContent.get(content);
-    // always need to rerender columns so that the resizer aria-values gets updated correctly
-    const isResizableColumn = type === 'column' && content.props?.allowsResizing;
-    if (cached != null && !isResizableColumn) {
+  private _renderContent(type: string, content: T) {
+    let cached = this._renderedContent.get(content); 
+    if (cached != null) {
       return cached;
     }
 
@@ -663,9 +661,7 @@ export class Virtualizer<T extends object, V, W> {
         }
 
         let item = this.getItem(visibleLayoutInfos.get(key).key);
-        // always need to rerender columns so that the resizer aria-values get updated
-        const isResizableColumn = view.viewType === 'column' && view.content.props?.allowsResizing;
-        if (view.content === item && !isResizableColumn) {
+        if (view.content === item) {
           toUpdate.delete(key);
         } else {
           // If the view type changes, delete and recreate the view instead of updating
@@ -747,11 +743,6 @@ export class Virtualizer<T extends object, V, W> {
 
     for (let key of toUpdate) {
       let view = currentlyVisible.get(key) as ReusableView<T, V>;
-      if (!view.layoutInfo) {
-        let layoutInfo = visibleLayoutInfos.get(key);
-        view.layoutInfo = layoutInfo;
-      }
-
       this._renderedContent.delete(key);
       this._renderView(view);
     }
@@ -791,9 +782,6 @@ export class Virtualizer<T extends object, V, W> {
     // method to build the final tree.
     let viewsByParentKey = new Map([[null, []]]);
     for (let view of this._children) {
-      if (!view.layoutInfo) {
-        return;
-      }
       if (!viewsByParentKey.has(view.layoutInfo.parentKey)) {
         viewsByParentKey.set(view.layoutInfo.parentKey, []);
       }
@@ -845,9 +833,6 @@ export class Virtualizer<T extends object, V, W> {
     if (this._transaction) {
       for (let view of this._transaction.toRemove.values()) {
         let cur = view.layoutInfo;
-        if (!cur) {
-          return;
-        }
         let layoutInfo = this.layout.getLayoutInfo(cur.key);
         if (this._applyLayoutInfo(view, layoutInfo)) {
           updated = true;
@@ -856,9 +841,6 @@ export class Virtualizer<T extends object, V, W> {
 
       for (let view of this._transaction.removed.values()) {
         let cur = view.layoutInfo;
-        if (!cur) {
-          return;
-        }
         let layoutInfo = this._transaction.finalLayoutInfo.get(cur.key) || cur;
         layoutInfo = this.layout.getFinalLayoutInfo(layoutInfo.copy());
         if (this._applyLayoutInfo(view, layoutInfo)) {