@react-stately/table 3.12.3-nightly.5042 → 3.13.0

package/src/TableBody.ts

@@ -14,7 +14,7 @@ import {PartialNode} from '@react-stately/collections';
 import React, {JSX, ReactElement} from 'react';
 import {TableBodyProps} from '@react-types/table';
 
-function TableBody<T>(props: TableBodyProps<T>): ReactElement { // eslint-disable-line @typescript-eslint/no-unused-vars
+function TableBody<T>(props: TableBodyProps<T>): ReactElement | null { // eslint-disable-line @typescript-eslint/no-unused-vars
   return null;
 }
 

package/src/TableCollection.ts

@@ -40,7 +40,7 @@ export function buildHeaderRows<T>(keyMap: Map<Key, GridNode<T>>, columnNodes: G
     let col = [column];
 
     while (parentKey) {
-      let parent: GridNode<T> = keyMap.get(parentKey);
+      let parent: GridNode<T> | undefined = keyMap.get(parentKey);
       if (!parent) {
         break;
       }
@@ -50,6 +50,7 @@ export function buildHeaderRows<T>(keyMap: Map<Key, GridNode<T>>, columnNodes: G
       // than the previous column, than we need to shift the parent
       // in the previous column so it's level with the current column.
       if (seen.has(parent)) {
+        parent.colspan ??= 0;
         parent.colspan++;
 
         let {column, index} = seen.get(parent);
@@ -82,7 +83,7 @@ export function buildHeaderRows<T>(keyMap: Map<Key, GridNode<T>>, columnNodes: G
   }
 
   let maxLength = Math.max(...columns.map(c => c.length));
-  let headerRows = Array(maxLength).fill(0).map(() => []);
+  let headerRows: GridNode<T>[][] = Array(maxLength).fill(0).map(() => []);
 
   // Convert columns into rows.
   let colIndex = 0;
@@ -92,7 +93,7 @@ export function buildHeaderRows<T>(keyMap: Map<Key, GridNode<T>>, columnNodes: G
       if (item) {
         // Fill the space up until the current column with a placeholder
         let row = headerRows[i];
-        let rowLength = row.reduce((p, c) => p + c.colspan, 0);
+        let rowLength = row.reduce((p, c) => p + (c.colspan ?? 1), 0);
         if (rowLength < colIndex) {
           let placeholder: GridNode<T> = {
             type: 'placeholder',
@@ -104,7 +105,7 @@ export function buildHeaderRows<T>(keyMap: Map<Key, GridNode<T>>, columnNodes: G
             level: i,
             hasChildNodes: false,
             childNodes: [],
-            textValue: null
+            textValue: ''
           };
 
           // eslint-disable-next-line max-depth
@@ -135,7 +136,7 @@ export function buildHeaderRows<T>(keyMap: Map<Key, GridNode<T>>, columnNodes: G
   // Add placeholders at the end of each row that is shorter than the maximum
   let i = 0;
   for (let row of headerRows) {
-    let rowLength = row.reduce((p, c) => p + c.colspan, 0);
+    let rowLength = row.reduce((p, c) => p + (c.colspan ?? 1), 0);
     if (rowLength < columnNodes.length) {
       let placeholder: GridNode<T> = {
         type: 'placeholder',
@@ -147,7 +148,7 @@ export function buildHeaderRows<T>(keyMap: Map<Key, GridNode<T>>, columnNodes: G
         level: i,
         hasChildNodes: false,
         childNodes: [],
-        textValue: null,
+        textValue: '',
         prevKey: row[row.length - 1].key
       };
 
@@ -167,7 +168,7 @@ export function buildHeaderRows<T>(keyMap: Map<Key, GridNode<T>>, columnNodes: G
       level: 0,
       hasChildNodes: true,
       childNodes,
-      textValue: null
+      textValue: ''
     };
 
     return row;
@@ -181,9 +182,9 @@ export class TableCollection<T> extends GridCollection<T> implements ITableColle
   body: GridNode<T>;
   _size: number = 0;
 
-  constructor(nodes: Iterable<GridNode<T>>, prev?: ITableCollection<T>, opts?: GridCollectionOptions) {
+  constructor(nodes: Iterable<GridNode<T>>, prev?: ITableCollection<T> | null, opts?: GridCollectionOptions) {
     let rowHeaderColumnKeys: Set<Key> = new Set();
-    let body: GridNode<T>;
+    let body: GridNode<T> | null = null;
     let columns: GridNode<T>[] = [];
     // Add cell for selection checkboxes if needed.
     if (opts?.showSelectionCheckboxes) {
@@ -225,7 +226,7 @@ export class TableCollection<T> extends GridCollection<T> implements ITableColle
       columns.unshift(rowHeaderColumn);
     }
 
-    let rows = [];
+    let rows: GridNode<T>[] = [];
     let columnKeyMap = new Map();
     let visit = (node: GridNode<T>) => {
       switch (node.type) {
@@ -268,13 +269,16 @@ export class TableCollection<T> extends GridCollection<T> implements ITableColle
     });
     this.columns = columns;
     this.rowHeaderColumnKeys = rowHeaderColumnKeys;
-    this.body = body;
+    this.body = body!;
     this.headerRows = headerRows;
-    this._size = [...body.childNodes].length;
+    this._size = [...body!.childNodes].length;
 
     // Default row header column to the first one.
     if (this.rowHeaderColumnKeys.size === 0) {
-      this.rowHeaderColumnKeys.add(this.columns.find(column => !column.props?.isDragButtonCell && !column.props?.isSelectionCell).key);
+      let col = this.columns.find(column => !column.props?.isDragButtonCell && !column.props?.isSelectionCell);
+      if (col) {
+        this.rowHeaderColumnKeys.add(col.key);
+      }
     }
   }
 
@@ -292,24 +296,24 @@ export class TableCollection<T> extends GridCollection<T> implements ITableColle
 
   getKeyBefore(key: Key) {
     let node = this.keyMap.get(key);
-    return node ? node.prevKey : null;
+    return node?.prevKey ?? null;
   }
 
   getKeyAfter(key: Key) {
     let node = this.keyMap.get(key);
-    return node ? node.nextKey : null;
+    return node?.nextKey ?? null;
   }
 
   getFirstKey() {
-    return getFirstItem(this.body.childNodes)?.key;
+    return getFirstItem(this.body.childNodes)?.key ?? null;
   }
 
   getLastKey() {
-    return getLastItem(this.body.childNodes)?.key;
+    return getLastItem(this.body.childNodes)?.key ?? null;
   }
 
   getItem(key: Key) {
-    return this.keyMap.get(key);
+    return this.keyMap.get(key) ?? null;
   }
 
   at(idx: number) {
@@ -339,7 +343,7 @@ export class TableCollection<T> extends GridCollection<T> implements ITableColle
     // Otherwise combine the text of each of the row header columns.
     let rowHeaderColumnKeys = this.rowHeaderColumnKeys;
     if (rowHeaderColumnKeys) {
-      let text = [];
+      let text: string[] = [];
       for (let cell of row.childNodes) {
         let column = this.columns[cell.index];
         if (rowHeaderColumnKeys.has(column.key) && cell.textValue) {

package/src/TableColumnLayout.ts

@@ -54,7 +54,7 @@ export class TableColumnLayout<T> {
       if (uncontrolledColumns.has(col.key)) {
         return [col.key, uncontrolledWidths.get(col.key)];
       } else {
-        return [col.key, controlledColumns.get(col.key).props.width];
+        return [col.key, controlledColumns.get(col.key)!.props.width];
       }
     }));
   }
@@ -91,7 +91,7 @@ export class TableColumnLayout<T> {
         freeze = false;
       } else if (freeze) {
         // freeze columns to the left to their previous pixel value
-        newWidths.set(column.key, prevColumnWidths.get(column.key));
+        newWidths.set(column.key, prevColumnWidths.get(column.key) ?? 0);
       } else {
         newWidths.set(column.key, column.props.width ?? uncontrolledWidths.get(column.key));
       }

package/src/TableHeader.ts

@@ -15,7 +15,7 @@ import {PartialNode} from '@react-stately/collections';
 import React, {JSX, ReactElement} from 'react';
 import {TableHeaderProps} from '@react-types/table';
 
-function TableHeader<T>(props: TableHeaderProps<T>): ReactElement { // eslint-disable-line @typescript-eslint/no-unused-vars
+function TableHeader<T>(props: TableHeaderProps<T>): ReactElement | null { // eslint-disable-line @typescript-eslint/no-unused-vars
   return null;
 }
 

package/src/TableUtils.ts

@@ -44,7 +44,7 @@ export function parseStaticWidth(width: number | string, tableWidth: number): nu
 }
 
 
-export function getMaxWidth(maxWidth: number | string, tableWidth: number): number {
+export function getMaxWidth(maxWidth: number | string | null | undefined, tableWidth: number): number {
   return maxWidth != null
     ? parseStaticWidth(maxWidth, tableWidth)
     : Number.MAX_SAFE_INTEGER;
@@ -63,7 +63,18 @@ export interface IColumn {
   maxWidth?: number | string,
   width?: number | string,
   defaultWidth?: number | string,
-  key?: Key
+  key: Key
+}
+
+interface FlexItem {
+  frozen: boolean,
+  baseSize: number,
+  hypotheticalMainSize: number,
+  min: number,
+  max: number,
+  flex: number,
+  targetMainSize: number,
+  violation: number
 }
 
 /**
@@ -93,12 +104,12 @@ export interface IColumn {
  */
 export function calculateColumnSizes(availableWidth: number, columns: IColumn[], changedColumns: Map<Key, ColumnSize>, getDefaultWidth, getDefaultMinWidth) {
   let hasNonFrozenItems = false;
-  let flexItems = columns.map((column, index) => {
+  let flexItems: FlexItem[] = columns.map((column, index) => {
     let width = changedColumns.get(column.key) != null ? changedColumns.get(column.key) : column.width ?? column.defaultWidth ?? getDefaultWidth?.(index) ?? '1fr';
     let frozen = false;
     let baseSize = 0;
     let flex = 0;
-    let targetMainSize = null;
+    let targetMainSize = 0;
     if (isStatic(width)) {
       baseSize = parseStaticWidth(width, availableWidth);
       frozen = true;
@@ -232,7 +243,7 @@ export function calculateColumnSizes(availableWidth: number, columns: IColumn[],
   return cascadeRounding(flexItems);
 }
 
-function cascadeRounding(flexItems): number[] {
+function cascadeRounding(flexItems: FlexItem[]): number[] {
   /*
   Given an array of floats that sum to an integer, this rounds the floats
   and returns an array of integers with the same sum.
@@ -240,7 +251,7 @@ function cascadeRounding(flexItems): number[] {
 
   let fpTotal = 0;
   let intTotal = 0;
-  let roundedArray = [];
+  let roundedArray: number[] = [];
   flexItems.forEach(function (item) {
     let float = item.targetMainSize;
     let integer = Math.round(float + fpTotal) - intTotal;

package/src/useTableColumnResizeState.ts

@@ -108,7 +108,7 @@ export function useTableColumnResizeState<T>(props: TableColumnResizeStateProps<
 
   let updateResizedColumns = useCallback((key: Key, width: number): Map<Key, ColumnSize> => {
     let newSizes = columnLayout.resizeColumnWidth(state.collection, uncontrolledWidths, key, width);
-    let map = new Map(Array.from(uncontrolledColumns).map(([key]) => [key, newSizes.get(key)]));
+    let map = new Map(Array.from(uncontrolledColumns).map(([key]) => [key, newSizes.get(key)!]));
     map.set(key, width);
     setUncontrolledWidths(map);
     return newSizes;

package/src/useTableState.ts

@@ -24,7 +24,7 @@ export interface TableState<T> extends GridState<T, ITableCollection<T>> {
   /** Whether the row selection checkboxes should be displayed. */
   showSelectionCheckboxes: boolean,
   /** The current sorted column and direction. */
-  sortDescriptor: SortDescriptor,
+  sortDescriptor: SortDescriptor | null,
   /** Calls the provided onSortChange handler with the provided column key and sort direction. */
   sort(columnKey: Key, direction?: 'ascending' | 'descending'): void,
   /** Whether keyboard navigation is disabled, such as when the arrow keys should be handled by a component within a cell. */
@@ -94,11 +94,11 @@ export function useTableState<T extends object>(props: TableStateProps<T>): Tabl
     disabledKeys,
     selectionManager,
     showSelectionCheckboxes: props.showSelectionCheckboxes || false,
-    sortDescriptor: props.sortDescriptor,
+    sortDescriptor: props.sortDescriptor ?? null,
     isKeyboardNavigationDisabled: collection.size === 0 || isKeyboardNavigationDisabled,
     setKeyboardNavigationDisabled,
     sort(columnKey: Key, direction?: 'ascending' | 'descending') {
-      props.onSortChange({
+      props.onSortChange?.({
         column: columnKey,
         direction: direction ?? (props.sortDescriptor?.column === columnKey
           ? OPPOSITE_SORT_DIRECTION[props.sortDescriptor.direction]

package/src/useTreeGridState.ts

@@ -140,11 +140,11 @@ function generateTreeGridCollection<T>(nodes, opts: TreeGridCollectionOptions):
     expandedKeys = new Set()
   } = opts;
 
-  let body: GridNode<T>;
-  let flattenedRows = [];
+  let body: GridNode<T> | null = null;
+  let flattenedRows: GridNode<T>[] = [];
   let columnCount = 0;
   let userColumnCount = 0;
-  let originalColumns = [];
+  let originalColumns: GridNode<T>[] = [];
   let keyMap = new Map();
 
   if (opts?.showSelectionCheckboxes) {
@@ -155,7 +155,7 @@ function generateTreeGridCollection<T>(nodes, opts: TreeGridCollectionOptions):
     columnCount++;
   }
 
-  let topLevelRows = [];
+  let topLevelRows: GridNode<T>[] = [];
   let visit = (node: GridNode<T>) => {
     switch (node.type) {
       case 'body':
@@ -183,6 +183,7 @@ function generateTreeGridCollection<T>(nodes, opts: TreeGridCollectionOptions):
     }
     visit(node);
   }
+
   columnCount += userColumnCount;
 
   // Update each grid node in the treegrid table with values specific to a treegrid structure. Also store a set of flattened row nodes for TableCollection to consume
@@ -192,7 +193,7 @@ function generateTreeGridCollection<T>(nodes, opts: TreeGridCollectionOptions):
     // to TableCollection. Index, level, and parent keys are all changed to reflect a flattened row structure rather than the treegrid structure
     // values automatically calculated via CollectionBuilder
     if (node.type === 'item') {
-      let childNodes = [];
+      let childNodes: GridNode<T>[] = [];
       for (let child of node.childNodes) {
         if (child.type === 'cell') {
           let cellClone = {...child};
@@ -202,7 +203,7 @@ function generateTreeGridCollection<T>(nodes, opts: TreeGridCollectionOptions):
           childNodes.push({...cellClone});
         }
       }
-      let clone = {...node, childNodes: childNodes, parentKey: body.key, level: 1, index: globalRowCount++};
+      let clone: GridNode<T> = {...node, childNodes: childNodes, parentKey: body!.key, level: 1, index: globalRowCount++};
       flattenedRows.push(clone);
     }
 
@@ -218,7 +219,7 @@ function generateTreeGridCollection<T>(nodes, opts: TreeGridCollectionOptions):
     Object.assign(node, newProps);
     keyMap.set(node.key, node);
 
-    let lastNode: GridNode<T>;
+    let lastNode: GridNode<T> | null = null;
     let rowIndex = 0;
     for (let child of node.childNodes) {
       if (!(child.type === 'item' && expandedKeys !== 'all' && !expandedKeys.has(node.key))) {
@@ -250,8 +251,8 @@ function generateTreeGridCollection<T>(nodes, opts: TreeGridCollectionOptions):
     }
   };
 
-  let last: GridNode<T>;
-  topLevelRows.forEach((node: GridNode<T>, i) => {
+  let last: GridNode<T> | null = null;
+  for (let [i, node] of topLevelRows.entries()) {
     visitNode(node as GridNode<T>, i);
 
     if (last) {
@@ -262,7 +263,7 @@ function generateTreeGridCollection<T>(nodes, opts: TreeGridCollectionOptions):
     }
 
     last = node;
-  });
+  }
 
   if (last) {
     last.nextKey = null;
@@ -272,6 +273,6 @@ function generateTreeGridCollection<T>(nodes, opts: TreeGridCollectionOptions):
     keyMap,
     userColumnCount,
     flattenedRows,
-    tableNodes: [...originalColumns, {...body, childNodes: flattenedRows}]
+    tableNodes: [...originalColumns, {...body!, childNodes: flattenedRows}]
   };
 }