@react-stately/layout 3.13.10-nightly.4685 → 3.13.10-nightly.4691

package/src/ListLayout.ts

@@ -14,66 +14,48 @@ import {Collection, DropTarget, DropTargetDelegate, Key, Node} from '@react-type
 import {getChildNodes} from '@react-stately/collections';
 import {InvalidationContext, Layout, LayoutInfo, Point, Rect, Size} from '@react-stately/virtualizer';
 
-export type ListLayoutOptions<T> = {
-  /** The height of a row in px. */
+export interface ListLayoutOptions {
+  /** The fixed height of a row in px. */
   rowHeight?: number,
+  /** The estimated height of a row, when row heights are variable. */
   estimatedRowHeight?: number,
+  /** The fixed height of a section header in px. */
   headingHeight?: number,
-  estimatedHeadingHeight?: number,
-  padding?: number,
-  indentationForItem?: (collection: Collection<Node<T>>, key: Key) => number,
-  loaderHeight?: number,
-  placeholderHeight?: number,
-  forceSectionHeaders?: boolean,
-  enableEmptyState?: boolean
-};
+  /** The estimated height of a section header, when the height is variable. */
+  estimatedHeadingHeight?: number
+}
 
 // A wrapper around LayoutInfo that supports hierarchy
 export interface LayoutNode {
   node?: Node<unknown>,
   layoutInfo: LayoutInfo,
-  header?: LayoutInfo,
   children?: LayoutNode[],
   validRect: Rect,
   index?: number
 }
 
-export interface ListLayoutProps {
-  isLoading?: boolean
-}
-
 const DEFAULT_HEIGHT = 48;
 
 /**
- * The ListLayout class is an implementation of a virtualizer {@link Layout}
- * it is used for creating lists and lists with indented sub-lists.
- *
+ * The ListLayout class is an implementation of a virtualizer {@link Layout}.
  * To configure a ListLayout, you can use the properties to define the
  * layouts and/or use the method for defining indentation.
  * The {@link ListKeyboardDelegate} extends the existing virtualizer
  * delegate with an additional method to do this (it uses the same delegate object as
  * the virtualizer itself).
  */
-export class ListLayout<T> extends Layout<Node<T>, ListLayoutProps> implements DropTargetDelegate {
+export class ListLayout<T, O = any> extends Layout<Node<T>, O> implements DropTargetDelegate {
   protected rowHeight: number;
   protected estimatedRowHeight: number;
   protected headingHeight: number;
   protected estimatedHeadingHeight: number;
-  protected forceSectionHeaders: boolean;
-  protected padding: number;
-  protected indentationForItem?: (collection: Collection<Node<T>>, key: Key) => number;
-  protected layoutInfos: Map<Key, LayoutInfo>;
   protected layoutNodes: Map<Key, LayoutNode>;
   protected contentSize: Size;
   protected collection: Collection<Node<T>>;
-  protected isLoading: boolean;
-  protected lastWidth: number;
-  protected lastCollection: Collection<Node<T>>;
+  private lastCollection: Collection<Node<T>>;
+  private lastWidth: number;
   protected rootNodes: LayoutNode[];
-  protected invalidateEverything: boolean;
-  protected loaderHeight: number;
-  protected placeholderHeight: number;
-  protected enableEmptyState: boolean;
+  private invalidateEverything: boolean;
   /** The rectangle containing currently valid layout infos. */
   protected validRect: Rect;
   /** The rectangle of requested layout infos so far. */
@@ -83,19 +65,12 @@ export class ListLayout<T> extends Layout<Node<T>, ListLayoutProps> implements D
    * Creates a new ListLayout with options. See the list of properties below for a description
    * of the options that can be provided.
    */
-  constructor(options: ListLayoutOptions<T> = {}) {
+  constructor(options: ListLayoutOptions = {}) {
     super();
     this.rowHeight = options.rowHeight;
     this.estimatedRowHeight = options.estimatedRowHeight;
     this.headingHeight = options.headingHeight;
     this.estimatedHeadingHeight = options.estimatedHeadingHeight;
-    this.forceSectionHeaders = options.forceSectionHeaders;
-    this.padding = options.padding || 0;
-    this.indentationForItem = options.indentationForItem;
-    this.loaderHeight = options.loaderHeight;
-    this.placeholderHeight = options.placeholderHeight;
-    this.enableEmptyState = options.enableEmptyState || false;
-    this.layoutInfos = new Map();
     this.layoutNodes = new Map();
     this.rootNodes = [];
     this.lastWidth = 0;
@@ -107,7 +82,7 @@ export class ListLayout<T> extends Layout<Node<T>, ListLayoutProps> implements D
 
   getLayoutInfo(key: Key) {
     this.ensureLayoutInfo(key);
-    return this.layoutInfos.get(key)!;
+    return this.layoutNodes.get(key)?.layoutInfo || null;
   }
 
   getVisibleLayoutInfos(rect: Rect) {
@@ -129,9 +104,6 @@ export class ListLayout<T> extends Layout<Node<T>, ListLayoutProps> implements D
       for (let node of nodes) {
         if (this.isVisible(node, rect)) {
           res.push(node.layoutInfo);
-          if (node.header) {
-            res.push(node.header);
-          }
 
           if (node.children) {
             addNodes(node.children);
@@ -166,7 +138,7 @@ export class ListLayout<T> extends Layout<Node<T>, ListLayoutProps> implements D
     // If the layout info wasn't found, it might be outside the bounds of the area that we've
     // computed layout for so far. This can happen when accessing a random key, e.g pressing Home/End.
     // Compute the full layout and try again.
-    if (!this.layoutInfos.has(key) && this.requestedRect.area < this.contentSize.area && this.lastCollection) {
+    if (!this.layoutNodes.has(key) && this.requestedRect.area < this.contentSize.area && this.lastCollection) {
       this.requestedRect = new Rect(0, 0, Infinity, Infinity);
       this.rootNodes = this.buildCollection();
       this.requestedRect = new Rect(0, 0, this.contentSize.width, this.contentSize.height);
@@ -176,19 +148,18 @@ export class ListLayout<T> extends Layout<Node<T>, ListLayoutProps> implements D
     return false;
   }
 
-  private isVisible(node: LayoutNode, rect: Rect) {
-    return node.layoutInfo.rect.intersects(rect) || node.layoutInfo.isSticky || this.virtualizer.isPersistedKey(node.layoutInfo.key);
+  protected isVisible(node: LayoutNode, rect: Rect) {
+    return node.layoutInfo.rect.intersects(rect) || node.layoutInfo.isSticky || node.layoutInfo.type === 'header' || this.virtualizer.isPersistedKey(node.layoutInfo.key);
   }
 
-  protected shouldInvalidateEverything(invalidationContext: InvalidationContext<ListLayoutProps>) {
+  protected shouldInvalidateEverything(invalidationContext: InvalidationContext<O>) {
     // Invalidate cache if the size of the collection changed.
     // In this case, we need to recalculate the entire layout.
     return invalidationContext.sizeChanged;
   }
 
-  validate(invalidationContext: InvalidationContext<ListLayoutProps>) {
+  validate(invalidationContext: InvalidationContext<O>) {
     this.collection = this.virtualizer.collection;
-    this.isLoading = invalidationContext.layoutOptions?.isLoading || false;
 
     // Reset valid rect if we will have to invalidate everything.
     // Otherwise we can reuse cached layout infos outside the current visible rect.
@@ -205,8 +176,6 @@ export class ListLayout<T> extends Layout<Node<T>, ListLayoutProps> implements D
         if (!this.collection.getItem(key)) {
           let layoutNode = this.layoutNodes.get(key);
           if (layoutNode) {
-            this.layoutInfos.delete(layoutNode.layoutInfo.key);
-            this.layoutInfos.delete(layoutNode.header?.key);
             this.layoutNodes.delete(key);
           }
         }
@@ -219,12 +188,11 @@ export class ListLayout<T> extends Layout<Node<T>, ListLayoutProps> implements D
     this.validRect = this.requestedRect.copy();
   }
 
-  protected buildCollection(): LayoutNode[] {
-    let y = this.padding;
+  protected buildCollection(y = 0): LayoutNode[] {
     let skipped = 0;
     let nodes = [];
     for (let node of this.collection) {
-      let rowHeight = (this.rowHeight ?? this.estimatedRowHeight);
+      let rowHeight = this.rowHeight ?? this.estimatedRowHeight;
 
       // Skip rows before the valid rectangle unless they are already cached.
       if (node.type === 'item' && y + rowHeight < this.requestedRect.y && !this.isValid(node, y)) {
@@ -243,25 +211,7 @@ export class ListLayout<T> extends Layout<Node<T>, ListLayoutProps> implements D
       }
     }
 
-    if (this.isLoading) {
-      let rect = new Rect(0, y, this.virtualizer.visibleRect.width,
-        this.loaderHeight ?? this.virtualizer.visibleRect.height);
-      let loader = new LayoutInfo('loader', 'loader', rect);
-      this.layoutInfos.set('loader', loader);
-      nodes.push({layoutInfo: loader});
-      y = loader.rect.maxY;
-    }
-
-    if (nodes.length === 0 && this.enableEmptyState) {
-      let rect = new Rect(0, y, this.virtualizer.visibleRect.width,
-        this.placeholderHeight ?? this.virtualizer.visibleRect.height);
-      let placeholder = new LayoutInfo('placeholder', 'placeholder', rect);
-      this.layoutInfos.set('placeholder', placeholder);
-      nodes.push({layoutInfo: placeholder});
-      y = placeholder.rect.maxY;
-    }
-
-    this.contentSize = new Size(this.virtualizer.visibleRect.width, y + this.padding);
+    this.contentSize = new Size(this.virtualizer.visibleRect.width, y);
     return nodes;
   }
 
@@ -271,7 +221,7 @@ export class ListLayout<T> extends Layout<Node<T>, ListLayoutProps> implements D
       !this.invalidateEverything &&
       cached &&
       cached.node === node &&
-      y === (cached.header || cached.layoutInfo).rect.y &&
+      y === cached.layoutInfo.rect.y &&
       cached.layoutInfo.rect.intersects(this.validRect) &&
       cached.validRect.containsRect(cached.layoutInfo.rect.intersection(this.requestedRect))
     );
@@ -286,11 +236,6 @@ export class ListLayout<T> extends Layout<Node<T>, ListLayoutProps> implements D
     layoutNode.node = node;
 
     layoutNode.layoutInfo.parentKey = parentKey ?? null;
-    this.layoutInfos.set(layoutNode.layoutInfo.key, layoutNode.layoutInfo);
-    if (layoutNode.header) {
-      this.layoutInfos.set(layoutNode.header.key, layoutNode.header);
-    }
-
     this.layoutNodes.set(node.key, layoutNode);
     return layoutNode;
   }
@@ -306,17 +251,8 @@ export class ListLayout<T> extends Layout<Node<T>, ListLayoutProps> implements D
     }
   }
 
-  private buildSection(node: Node<T>, x: number, y: number): LayoutNode {
+  protected buildSection(node: Node<T>, x: number, y: number): LayoutNode {
     let width = this.virtualizer.visibleRect.width;
-    let header = null;
-    if (node.rendered || this.forceSectionHeaders) {
-      let headerNode = this.buildSectionHeader(node, x, y);
-      header = headerNode.layoutInfo;
-      header.key += ':header';
-      header.parentKey = node.key;
-      y += header.rect.height;
-    }
-
     let rect = new Rect(0, y, width, 0);
     let layoutInfo = new LayoutInfo(node.type, node.key, rect);
 
@@ -347,14 +283,13 @@ export class ListLayout<T> extends Layout<Node<T>, ListLayoutProps> implements D
     rect.height = y - startY;
 
     return {
-      header,
       layoutInfo,
       children,
       validRect: layoutInfo.rect.intersection(this.requestedRect)
     };
   }
 
-  private buildSectionHeader(node: Node<T>, x: number, y: number): LayoutNode {
+  protected buildSectionHeader(node: Node<T>, x: number, y: number): LayoutNode {
     let width = this.virtualizer.visibleRect.width;
     let rectHeight = this.headingHeight;
     let isEstimated = false;
@@ -365,7 +300,7 @@ export class ListLayout<T> extends Layout<Node<T>, ListLayoutProps> implements D
       // Mark as estimated if the size of the overall virtualizer changed,
       // or the content of the item changed.
       let previousLayoutNode = this.layoutNodes.get(node.key);
-      let previousLayoutInfo = previousLayoutNode?.header || previousLayoutNode?.layoutInfo;
+      let previousLayoutInfo = previousLayoutNode?.layoutInfo;
       if (previousLayoutInfo) {
         let curNode = this.collection.getItem(node.key);
         let lastNode = this.lastCollection ? this.lastCollection.getItem(node.key) : null;
@@ -391,7 +326,7 @@ export class ListLayout<T> extends Layout<Node<T>, ListLayoutProps> implements D
     };
   }
 
-  private buildItem(node: Node<T>, x: number, y: number): LayoutNode {
+  protected buildItem(node: Node<T>, x: number, y: number): LayoutNode {
     let width = this.virtualizer.visibleRect.width;
     let rectHeight = this.rowHeight;
     let isEstimated = false;
@@ -415,14 +350,8 @@ export class ListLayout<T> extends Layout<Node<T>, ListLayoutProps> implements D
       rectHeight = DEFAULT_HEIGHT;
     }
 
-    if (typeof this.indentationForItem === 'function') {
-      x += this.indentationForItem(this.collection, node.key) || 0;
-    }
-
     let rect = new Rect(x, y, width - x, rectHeight);
     let layoutInfo = new LayoutInfo(node.type, node.key, rect);
-    // allow overflow so the focus ring/selection ring can extend outside to overlap with the adjacent items borders
-    layoutInfo.allowOverflow = true;
     layoutInfo.estimatedSize = isEstimated;
     return {
       layoutInfo,
@@ -431,18 +360,19 @@ export class ListLayout<T> extends Layout<Node<T>, ListLayoutProps> implements D
   }
 
   updateItemSize(key: Key, size: Size) {
-    let layoutInfo = this.layoutInfos.get(key);
+    let layoutNode = this.layoutNodes.get(key);
     // If no layoutInfo, item has been deleted/removed.
-    if (!layoutInfo) {
+    if (!layoutNode) {
       return false;
     }
 
+    let layoutInfo = layoutNode.layoutInfo;
     layoutInfo.estimatedSize = false;
     if (layoutInfo.rect.height !== size.height) {
       // Copy layout info rather than mutating so that later caches are invalidated.
       let newLayoutInfo = layoutInfo.copy();
       newLayoutInfo.rect.height = size.height;
-      this.layoutInfos.set(key, newLayoutInfo);
+      layoutNode.layoutInfo = newLayoutInfo;
 
       // Items after this layoutInfo will need to be repositioned to account for the new height.
       // Adjust the validRect so that only items above remain valid.
@@ -473,9 +403,7 @@ export class ListLayout<T> extends Layout<Node<T>, ListLayoutProps> implements D
       n.validRect = n.validRect.intersection(this.validRect);
 
       // Replace layout info in LayoutNode
-      if (n.header === oldLayoutInfo) {
-        n.header = newLayoutInfo;
-      } else if (n.layoutInfo === oldLayoutInfo) {
+      if (n.layoutInfo === oldLayoutInfo) {
         n.layoutInfo = newLayoutInfo;
       }
     }

package/src/TableLayout.ts

@@ -14,34 +14,24 @@ import {DropTarget, Key} from '@react-types/shared';
 import {getChildNodes} from '@react-stately/collections';
 import {GridNode} from '@react-types/grid';
 import {InvalidationContext, LayoutInfo, Point, Rect, Size} from '@react-stately/virtualizer';
-import {LayoutNode, ListLayout, ListLayoutOptions, ListLayoutProps} from './ListLayout';
+import {LayoutNode, ListLayout, ListLayoutOptions} from './ListLayout';
 import {TableCollection} from '@react-types/table';
 import {TableColumnLayout} from '@react-stately/table';
 
-export interface TableLayoutOptions<T> extends ListLayoutOptions<T> {
-  scrollContainer?: 'table' | 'body'
-}
-
-export interface TableLayoutProps extends ListLayoutProps {
+export interface TableLayoutProps {
   columnWidths?: Map<Key, number>
 }
 
-export class TableLayout<T> extends ListLayout<T> {
-  collection: TableCollection<T>;
-  lastCollection: TableCollection<T>;
-  columnWidths: Map<Key, number>;
-  stickyColumnIndices: number[];
-  isLoading = false;
-  lastPersistedKeys: Set<Key> = null;
-  persistedIndices: Map<Key, number[]> = new Map();
-  scrollContainer: 'table' | 'body';
-  private disableSticky: boolean;
-
-  constructor(options: TableLayoutOptions<T>) {
+export class TableLayout<T, O extends TableLayoutProps = TableLayoutProps> extends ListLayout<T, O> {
+  protected collection: TableCollection<T>;
+  private columnWidths: Map<Key, number>;
+  private stickyColumnIndices: number[];
+  private lastPersistedKeys: Set<Key> = null;
+  private persistedIndices: Map<Key, number[]> = new Map();
+
+  constructor(options: ListLayoutOptions) {
     super(options);
-    this.scrollContainer = options.scrollContainer || 'table';
     this.stickyColumnIndices = [];
-    this.disableSticky = this.checkChrome105();
   }
 
   private columnsChanged(newCollection: TableCollection<T>, oldCollection: TableCollection<T> | null) {
@@ -56,7 +46,7 @@ export class TableLayout<T> extends ListLayout<T> {
       );
   }
 
-  validate(invalidationContext: InvalidationContext<TableLayoutProps>): void {
+  validate(invalidationContext: InvalidationContext<O>): void {
     let newCollection = this.virtualizer.collection as TableCollection<T>;
 
     // If columnWidths were provided via layoutOptions, update those.
@@ -76,21 +66,19 @@ export class TableLayout<T> extends ListLayout<T> {
   }
 
   protected buildCollection(): LayoutNode[] {
-    // Track whether we were previously loading. This is used to adjust the animations of async loading vs inserts.
-    let loadingState = this.collection.body.props.loadingState;
-    this.isLoading = loadingState === 'loading' || loadingState === 'loadingMore';
     this.stickyColumnIndices = [];
 
     for (let column of this.collection.columns) {
       // The selection cell and any other sticky columns always need to be visible.
       // In addition, row headers need to be in the DOM for accessibility labeling.
-      if (column.props.isDragButtonCell || column.props.isSelectionCell || this.collection.rowHeaderColumnKeys.has(column.key)) {
+      if (this.isStickyColumn(column) || this.collection.rowHeaderColumnKeys.has(column.key)) {
         this.stickyColumnIndices.push(column.index);
       }
     }
 
-    let header = this.buildColumnHeader();
-    let body = this.buildBody(this.scrollContainer === 'body' ? 0 : header.layoutInfo.rect.height);
+    let header = this.buildTableHeader();
+    this.layoutNodes.set(header.layoutInfo.key, header);
+    let body = this.buildBody(header.layoutInfo.rect.height);
     this.lastPersistedKeys = null;
 
     body.layoutInfo.rect.width = Math.max(header.layoutInfo.rect.width, body.layoutInfo.rect.width);
@@ -101,7 +89,7 @@ export class TableLayout<T> extends ListLayout<T> {
     ];
   }
 
-  private buildColumnHeader(): LayoutNode {
+  protected buildTableHeader(): LayoutNode {
     let rect = new Rect(0, 0, 0, 0);
     let layoutInfo = new LayoutInfo('header', this.collection.head?.key ?? 'header', rect);
     layoutInfo.isSticky = true;
@@ -122,8 +110,6 @@ export class TableLayout<T> extends ListLayout<T> {
     rect.width = width;
     rect.height = y;
 
-    this.layoutInfos.set(layoutInfo.key, layoutInfo);
-
     return {
       layoutInfo,
       children,
@@ -131,7 +117,7 @@ export class TableLayout<T> extends ListLayout<T> {
     };
   }
 
-  private buildHeaderRow(headerRow: GridNode<T>, x: number, y: number): LayoutNode {
+  protected buildHeaderRow(headerRow: GridNode<T>, x: number, y: number): LayoutNode {
     let rect = new Rect(0, y, 0, 0);
     let row = new LayoutInfo('headerrow', headerRow.key, rect);
 
@@ -166,8 +152,6 @@ export class TableLayout<T> extends ListLayout<T> {
       if (child.layoutInfo.rect.height !== height) {
         // Need to copy the layout info before we mutate it.
         child.layoutInfo = child.layoutInfo.copy();
-        this.layoutInfos.set(child.layoutInfo.key, child.layoutInfo);
-
         child.layoutInfo.rect.height = height;
       }
     }
@@ -209,15 +193,18 @@ export class TableLayout<T> extends ListLayout<T> {
     return {height, isEstimated};
   }
 
-  private buildColumn(node: GridNode<T>, x: number, y: number): LayoutNode {
+  protected getEstimatedRowHeight(): number {
+    return this.rowHeight ?? this.estimatedRowHeight;
+  }
+
+  protected buildColumn(node: GridNode<T>, x: number, y: number): LayoutNode {
     let width = this.getRenderedColumnWidth(node);
     let {height, isEstimated} = this.getEstimatedHeight(node, width, this.headingHeight, this.estimatedHeadingHeight);
     let rect = new Rect(x, y, width, height);
     let layoutInfo = new LayoutInfo(node.type, node.key, rect);
-    layoutInfo.isSticky = !this.disableSticky && (node.props?.isDragButtonCell || node.props?.isSelectionCell);
+    layoutInfo.isSticky = this.isStickyColumn(node);
     layoutInfo.zIndex = layoutInfo.isSticky ? 2 : 1;
     layoutInfo.estimatedSize = isEstimated;
-    layoutInfo.allowOverflow = true;
 
     return {
       layoutInfo,
@@ -225,7 +212,13 @@ export class TableLayout<T> extends ListLayout<T> {
     };
   }
 
-  private buildBody(y: number): LayoutNode {
+  // For subclasses.
+  // eslint-disable-next-line
+  protected isStickyColumn(node: GridNode<T>) {
+    return false;
+  }
+
+  protected buildBody(y: number): LayoutNode {
     let rect = new Rect(0, y, 0, 0);
     let layoutInfo = new LayoutInfo('rowgroup', this.collection.body.key, rect);
 
@@ -233,9 +226,8 @@ export class TableLayout<T> extends ListLayout<T> {
     let skipped = 0;
     let width = 0;
     let children: LayoutNode[] = [];
+    let rowHeight = this.getEstimatedRowHeight();
     for (let [i, node] of [...getChildNodes(this.collection.body, this.collection)].entries()) {
-      let rowHeight = (this.rowHeight ?? this.estimatedRowHeight) + 1;
-
       // Skip rows before the valid rectangle unless they are already cached.
       if (y + rowHeight < this.requestedRect.y && !this.isValid(node, y)) {
         y += rowHeight;
@@ -257,36 +249,13 @@ export class TableLayout<T> extends ListLayout<T> {
       }
     }
 
-    if (this.isLoading) {
-      // Add some margin around the loader to ensure that scrollbars don't flicker in and out.
-      let rect = new Rect(40,  Math.max(y, 40), (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 = !this.disableSticky && children.length === 0;
-      this.layoutInfos.set('loader', loader);
-      children.push({layoutInfo: loader, validRect: loader.rect});
-      y = loader.rect.maxY;
-      width = Math.max(width, rect.width);
-    } else if (children.length === 0) {
-      if (this.enableEmptyState) {
-        let rect = new Rect(40, Math.max(y, 40), this.virtualizer.visibleRect.width - 80, this.virtualizer.visibleRect.height - 80);
-        let empty = new LayoutInfo('empty', 'empty', rect);
-        empty.parentKey = layoutInfo.key;
-        empty.isSticky = !this.disableSticky;
-        this.layoutInfos.set('empty', empty);
-        children.push({layoutInfo: empty, validRect: empty.rect});
-        y = empty.rect.maxY;
-        width = Math.max(width, rect.width);
-      } else {
-        y = this.virtualizer.visibleRect.maxY;
-      }
+    if (children.length === 0) {
+      y = this.virtualizer.visibleRect.maxY;
     }
 
     rect.width = width;
     rect.height = y - startY;
 
-    this.layoutInfos.set(layoutInfo.key, layoutInfo);
-
     return {
       layoutInfo,
       children,
@@ -310,7 +279,7 @@ export class TableLayout<T> extends ListLayout<T> {
     }
   }
 
-  private buildRow(node: GridNode<T>, x: number, y: number): LayoutNode {
+  protected buildRow(node: GridNode<T>, x: number, y: number): LayoutNode {
     let rect = new Rect(x, y, 0, 0);
     let layoutInfo = new LayoutInfo('row', node.key, rect);
 
@@ -338,8 +307,8 @@ export class TableLayout<T> extends ListLayout<T> {
 
     this.setChildHeights(children, height);
 
-    rect.width = this.layoutInfos.get(this.collection.head?.key ?? 'header').rect.width;
-    rect.height = height + 1; // +1 for bottom border
+    rect.width = this.layoutNodes.get(this.collection.head?.key ?? 'header').layoutInfo.rect.width;
+    rect.height = height;
 
     return {
       layoutInfo,
@@ -348,12 +317,12 @@ export class TableLayout<T> extends ListLayout<T> {
     };
   }
 
-  private buildCell(node: GridNode<T>, x: number, y: number): LayoutNode {
+  protected buildCell(node: GridNode<T>, x: number, y: number): LayoutNode {
     let width = this.getRenderedColumnWidth(node);
     let {height, isEstimated} = this.getEstimatedHeight(node, width, this.rowHeight, this.estimatedRowHeight);
     let rect = new Rect(x, y, width, height);
     let layoutInfo = new LayoutInfo(node.type, node.key, rect);
-    layoutInfo.isSticky = !this.disableSticky && (node.props?.isDragButtonCell || node.props?.isSelectionCell);
+    layoutInfo.isSticky = this.isStickyColumn(node);
     layoutInfo.zIndex = layoutInfo.isSticky ? 2 : 1;
     layoutInfo.estimatedSize = isEstimated;
 
@@ -367,7 +336,7 @@ export class TableLayout<T> extends ListLayout<T> {
     // Adjust rect to keep number of visible rows consistent.
     // (only if height > 1 for getDropTargetFromPoint)
     if (rect.height > 1) {
-      let rowHeight = (this.rowHeight ?? this.estimatedRowHeight) + 1; // +1 for border
+      let rowHeight = this.getEstimatedRowHeight();
       rect.y = Math.floor(rect.y / rowHeight) * rowHeight;
       rect.height = Math.ceil(rect.height / rowHeight) * rowHeight;
     }
@@ -508,7 +477,7 @@ export class TableLayout<T> extends ListLayout<T> {
 
     // Build a map of parentKey => indices of children to persist.
     for (let key of this.virtualizer.persistedKeys) {
-      let layoutInfo = this.layoutInfos.get(key);
+      let layoutInfo = this.layoutNodes.get(key)?.layoutInfo;
 
       // Walk up ancestors so parents are also persisted if children are.
       while (layoutInfo && layoutInfo.parentKey) {
@@ -526,7 +495,7 @@ export class TableLayout<T> extends ListLayout<T> {
           indices.push(index);
         }
 
-        layoutInfo = this.layoutInfos.get(layoutInfo.parentKey);
+        layoutInfo = this.layoutNodes.get(layoutInfo.parentKey)?.layoutInfo;
       }
     }
 
@@ -535,24 +504,6 @@ export class TableLayout<T> extends ListLayout<T> {
     }
   }
 
-  // Checks if Chrome version is 105 or greater
-  private checkChrome105() {
-    if (typeof window === 'undefined' || window.navigator == null) {
-      return false;
-    }
-
-    let isChrome105;
-    if (window.navigator['userAgentData']) {
-      isChrome105 = window.navigator['userAgentData']?.brands.some(b => b.brand === 'Chromium' && Number(b.version) === 105);
-    } else {
-      let regex = /Chrome\/(\d+)/;
-      let matches = regex.exec(window.navigator.userAgent);
-      isChrome105 = matches && matches.length >= 2 && Number(matches[1]) === 105;
-    }
-
-    return isChrome105;
-  }
-
   getDropTargetFromPoint(x: number, y: number, isValidDropTarget: (target: DropTarget) => boolean): DropTarget {
     x += this.virtualizer.visibleRect.x;
     y += this.virtualizer.visibleRect.y;

package/src/index.ts

@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-export type {ListLayoutOptions, ListLayoutProps, LayoutNode} from './ListLayout';
-export type {TableLayoutOptions, TableLayoutProps} from './TableLayout';
+export type {ListLayoutOptions, LayoutNode} from './ListLayout';
+export type {TableLayoutProps} from './TableLayout';
 export {ListLayout} from './ListLayout';
 export {TableLayout} from './TableLayout';