@react-spectrum/table 3.14.1 → 3.15.1

package/src/TableViewLayout.ts

@@ -13,12 +13,14 @@ import {DropTarget} from '@react-types/shared';
 import {GridNode} from '@react-types/grid';
 import {LayoutInfo, Rect} from '@react-stately/virtualizer';
 import {LayoutNode, TableLayout} from '@react-stately/layout';
+import {TableCollection} from '@react-stately/table';
 
 export class TableViewLayout<T> extends TableLayout<T> {
   private isLoading: boolean = false;
 
   protected buildCollection(): LayoutNode[] {
-    let loadingState = this.collection.body.props.loadingState;
+    let collection = this.virtualizer!.collection as TableCollection<T>;
+    let loadingState = collection.body.props.loadingState;
     this.isLoading = loadingState === 'loading' || loadingState === 'loadingMore';
     return super.buildCollection();
   }
@@ -32,11 +34,15 @@ export class TableViewLayout<T> extends TableLayout<T> {
   protected buildBody(): LayoutNode {
     let node = super.buildBody(0);
     let {children, layoutInfo} = node;
+    if (!children) {
+      throw new Error('Missing children in LayoutInfo');
+    }
+
     let width = node.layoutInfo.rect.width;
 
     if (this.isLoading) {
       // Add some margin around the loader to ensure that scrollbars don't flicker in and out.
-      let rect = new Rect(40, children.length === 0 ? 40 : layoutInfo.rect.maxY, (width || this.virtualizer.visibleRect.width) - 80, children.length === 0 ? this.virtualizer.visibleRect.height - 80 : 60);
+      let rect = new Rect(40, children.length === 0 ? 40 : layoutInfo.rect.maxY, (width || this.virtualizer!.visibleRect.width) - 80, children.length === 0 ? this.virtualizer!.visibleRect.height - 80 : 60);
       let loader = new LayoutInfo('loader', 'loader', rect);
       loader.parentKey = layoutInfo.key;
       loader.isSticky = children.length === 0;
@@ -49,7 +55,7 @@ export class TableViewLayout<T> extends TableLayout<T> {
       layoutInfo.rect.height = loader.rect.maxY;
       width = Math.max(width, rect.width);
     } else if (children.length === 0) {
-      let rect = new Rect(40, 40, this.virtualizer.visibleRect.width - 80, this.virtualizer.visibleRect.height - 80);
+      let rect = new Rect(40, 40, this.virtualizer!.visibleRect.width - 80, this.virtualizer!.visibleRect.height - 80);
       let empty = new LayoutInfo('empty', 'empty', rect);
       empty.parentKey = layoutInfo.key;
       empty.isSticky = true;
@@ -87,9 +93,9 @@ export class TableViewLayout<T> extends TableLayout<T> {
     return node.props?.isDragButtonCell || node.props?.isSelectionCell;
   }
 
-  getDropTargetFromPoint(x: number, y: number, isValidDropTarget: (target: DropTarget) => boolean): DropTarget {
+  getDropTargetFromPoint(x: number, y: number, isValidDropTarget: (target: DropTarget) => boolean): DropTarget | null {
     // Offset for height of header row
-    y -= this.virtualizer.layout.getVisibleLayoutInfos(new Rect(x, y, 1, 1)).find(info => info.type === 'headerrow')?.rect.height;
+    y -= this.getVisibleLayoutInfos(new Rect(x, y, 1, 1)).find(info => info.type === 'headerrow')?.rect.height ?? 0;
     return super.getDropTargetFromPoint(x, y, isValidDropTarget);
   }
 }

package/src/TableViewWrapper.tsx

@@ -89,18 +89,15 @@ export interface SpectrumTableProps<T> extends TableProps<T>, SpectrumSelectionP
   UNSTABLE_onExpandedChange?: (keys: Set<Key>) => any
 }
 
-function TableViewWrapper<T extends object>(props: SpectrumTableProps<T>, ref: DOMRef<HTMLDivElement>) {
+/**
+ * Tables are containers for displaying information. They allow users to quickly scan, sort, compare, and take action on large amounts of data.
+ */
+const TableViewWrapper = React.forwardRef(function TableViewWrapper<T extends object>(props: SpectrumTableProps<T>, ref: DOMRef<HTMLDivElement>) {
   let {UNSTABLE_allowsExpandableRows, ...otherProps} = props;
   if (tableNestedRows() && UNSTABLE_allowsExpandableRows) {
     return <TreeGridTableView {...otherProps} ref={ref} />;
   } else {
     return <TableView {...otherProps} ref={ref} />;
   }
-}
-
-/**
- * Tables are containers for displaying information. They allow users to quickly scan, sort, compare, and take action on large amounts of data.
- */
-const _TableViewWrapper = React.forwardRef(TableViewWrapper) as <T>(props: SpectrumTableProps<T> & {ref?: DOMRef<HTMLDivElement>}) => ReactElement;
-
-export {_TableViewWrapper as TableView};
+}) as <T>(props: SpectrumTableProps<T> & {ref?: DOMRef<HTMLDivElement>}) => ReactElement;
+export {TableViewWrapper as TableView};

package/src/TreeGridTableView.tsx

@@ -18,7 +18,7 @@ import {UNSTABLE_useTreeGridState} from '@react-stately/table';
 
 export interface TreeGridTableProps<T> extends Omit<SpectrumTableProps<T>, 'UNSTABLE_allowsExpandableRows'> {}
 
-function TreeGridTableView<T extends object>(props: TreeGridTableProps<T>, ref: DOMRef<HTMLDivElement>) {
+export const TreeGridTableView = React.forwardRef(function TreeGridTableView<T extends object>(props: TreeGridTableProps<T>, ref: DOMRef<HTMLDivElement>) {
   let {
     selectionStyle,
     dragAndDropHooks
@@ -41,7 +41,4 @@ function TreeGridTableView<T extends object>(props: TreeGridTableProps<T>, ref:
   return (
     <TableViewBase {...props} state={state} ref={ref} />
   );
-}
-
-const _TreeGridTableView = React.forwardRef(TreeGridTableView) as <T>(props: TreeGridTableProps<T> & {ref?: DOMRef<HTMLDivElement>}) => ReactElement;
-export {_TreeGridTableView as TreeGridTableView};
+}) as <T>(props: TreeGridTableProps<T> & {ref?: DOMRef<HTMLDivElement>}) => ReactElement;