@react-stately/table 3.0.0-beta.0 → 3.0.0-nightly-641446f65-240905

package/src/TableBody.ts

@@ -11,7 +11,7 @@
  */
 
 import {PartialNode} from '@react-stately/collections';
-import React, {ReactElement} from 'react';
+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
@@ -29,7 +29,7 @@ TableBody.getCollectionNode = function* getCollectionNode<T>(props: TableBodyPro
         if (!items) {
           throw new Error('props.children was a function but props.items is missing');
         }
-    
+
         for (let item of items) {
           yield {
             type: 'item',
@@ -52,6 +52,10 @@ TableBody.getCollectionNode = function* getCollectionNode<T>(props: TableBodyPro
   };
 };
 
+/**
+ * A TableBody is a container for the Row elements of a Table. Rows can be statically defined
+ * as children, or generated dynamically using a function based on the data passed to the `items` prop.
+ */
 // We don't want getCollectionNode to show up in the type definition
 let _TableBody = TableBody as <T>(props: TableBodyProps<T>) => JSX.Element;
 export {_TableBody as TableBody};

package/src/TableCollection.ts

@@ -9,18 +9,31 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
+
+import {getFirstItem, getLastItem} from '@react-stately/collections';
 import {GridCollection} from '@react-stately/grid';
 import {GridNode} from '@react-types/grid';
-import {Key} from 'react';
+import {TableCollection as ITableCollection} from '@react-types/table';
+import {Key} from '@react-types/shared';
 
 interface GridCollectionOptions {
-  showSelectionCheckboxes?: boolean
+  showSelectionCheckboxes?: boolean,
+  showDragButtons?: boolean
 }
 
 const ROW_HEADER_COLUMN_KEY = 'row-header-column-' + Math.random().toString(36).slice(2);
+let ROW_HEADER_COLUMN_KEY_DRAG = 'row-header-column-' + Math.random().toString(36).slice(2);
+while (ROW_HEADER_COLUMN_KEY === ROW_HEADER_COLUMN_KEY_DRAG) {
+  ROW_HEADER_COLUMN_KEY_DRAG = 'row-header-column-' + Math.random().toString(36).slice(2);
+}
+
+/** @private */
+export function buildHeaderRows<T>(keyMap: Map<Key, GridNode<T>>, columnNodes: GridNode<T>[]): GridNode<T>[] {
+  if (columnNodes.length === 0) {
+    return [];
+  }
 
-function buildHeaderRows<T>(keyMap: Map<Key, GridNode<T>>, columnNodes: GridNode<T>[]): GridNode<T>[] {
-  let columns = [];
+  let columns: GridNode<T>[][] = [];
   let seen = new Map();
   for (let column of columnNodes) {
     let parentKey = column.parentKey;
@@ -28,6 +41,9 @@ function buildHeaderRows<T>(keyMap: Map<Key, GridNode<T>>, columnNodes: GridNode
 
     while (parentKey) {
       let parent: GridNode<T> = keyMap.get(parentKey);
+      if (!parent) {
+        break;
+      }
 
       // If we've already seen this parent, than it is shared
       // with a previous column. If the current column is taller
@@ -47,6 +63,7 @@ function buildHeaderRows<T>(keyMap: Map<Key, GridNode<T>>, columnNodes: GridNode
 
         // Adjust shifted indices
         for (let i = col.length; i < column.length; i++) {
+          // eslint-disable-next-line max-depth
           if (column[i] && seen.has(column[i])) {
             seen.get(column[i]).index = i;
           }
@@ -90,6 +107,7 @@ function buildHeaderRows<T>(keyMap: Map<Key, GridNode<T>>, columnNodes: GridNode
             textValue: null
           };
 
+          // eslint-disable-next-line max-depth
           if (row.length > 0) {
             row[row.length - 1].nextKey = placeholder.key;
             placeholder.prevKey = row[row.length - 1].key;
@@ -104,7 +122,7 @@ function buildHeaderRows<T>(keyMap: Map<Key, GridNode<T>>, columnNodes: GridNode
         }
 
         item.level = i;
-        item.index = colIndex;
+        item.colIndex = colIndex;
         row.push(item);
       }
 
@@ -156,17 +174,17 @@ function buildHeaderRows<T>(keyMap: Map<Key, GridNode<T>>, columnNodes: GridNode
   });
 }
 
-export class TableCollection<T> extends GridCollection<T> {
+export class TableCollection<T> extends GridCollection<T> implements ITableCollection<T> {
   headerRows: GridNode<T>[];
   columns: GridNode<T>[];
   rowHeaderColumnKeys: Set<Key>;
   body: GridNode<T>;
+  _size: number = 0;
 
-  constructor(nodes: Iterable<GridNode<T>>, prev?: TableCollection<T>, opts?: GridCollectionOptions) {
+  constructor(nodes: Iterable<GridNode<T>>, prev?: ITableCollection<T>, opts?: GridCollectionOptions) {
     let rowHeaderColumnKeys: Set<Key> = new Set();
     let body: GridNode<T>;
-    let columns = [];
-
+    let columns: GridNode<T>[] = [];
     // Add cell for selection checkboxes if needed.
     if (opts?.showSelectionCheckboxes) {
       let rowHeaderColumn: GridNode<T> = {
@@ -175,7 +193,7 @@ export class TableCollection<T> extends GridCollection<T> {
         value: null,
         textValue: '',
         level: 0,
-        index: 0,
+        index: opts?.showDragButtons ? 1 : 0,
         hasChildNodes: false,
         rendered: null,
         childNodes: [],
@@ -187,6 +205,26 @@ export class TableCollection<T> extends GridCollection<T> {
       columns.unshift(rowHeaderColumn);
     }
 
+    // Add cell for drag buttons if needed.
+    if (opts?.showDragButtons) {
+      let rowHeaderColumn: GridNode<T> = {
+        type: 'column',
+        key: ROW_HEADER_COLUMN_KEY_DRAG,
+        value: null,
+        textValue: '',
+        level: 0,
+        index: 0,
+        hasChildNodes: false,
+        rendered: null,
+        childNodes: [],
+        props: {
+          isDragButtonCell: true
+        }
+      };
+
+      columns.unshift(rowHeaderColumn);
+    }
+
     let rows = [];
     let columnKeyMap = new Map();
     let visit = (node: GridNode<T>) => {
@@ -216,6 +254,7 @@ export class TableCollection<T> extends GridCollection<T> {
     for (let node of nodes) {
       visit(node);
     }
+
     let headerRows = buildHeaderRows(columnKeyMap, columns) as GridNode<T>[];
     headerRows.forEach((row, i) => rows.splice(i, 0, row));
 
@@ -231,10 +270,11 @@ export class TableCollection<T> extends GridCollection<T> {
     this.rowHeaderColumnKeys = rowHeaderColumnKeys;
     this.body = body;
     this.headerRows = headerRows;
+    this._size = [...body.childNodes].length;
 
     // Default row header column to the first one.
     if (this.rowHeaderColumnKeys.size === 0) {
-      this.rowHeaderColumnKeys.add(this.columns[opts?.showSelectionCheckboxes ? 1 : 0].key);
+      this.rowHeaderColumnKeys.add(this.columns.find(column => !column.props?.isDragButtonCell && !column.props?.isSelectionCell).key);
     }
   }
 
@@ -243,7 +283,7 @@ export class TableCollection<T> extends GridCollection<T> {
   }
 
   get size() {
-    return [...this.body.childNodes].length;
+    return this._size;
   }
 
   getKeys() {
@@ -261,15 +301,59 @@ export class TableCollection<T> extends GridCollection<T> {
   }
 
   getFirstKey() {
-    return [...this.body.childNodes][0]?.key;
+    return getFirstItem(this.body.childNodes)?.key;
   }
 
   getLastKey() {
-    let rows = [...this.body.childNodes];
-    return rows[rows.length - 1]?.key;
+    return getLastItem(this.body.childNodes)?.key;
   }
 
   getItem(key: Key) {
     return this.keyMap.get(key);
   }
+
+  at(idx: number) {
+    const keys = [...this.getKeys()];
+    return this.getItem(keys[idx]);
+  }
+
+  getChildren(key: Key): Iterable<GridNode<T>> {
+    if (key === this.body.key) {
+      return this.body.childNodes;
+    }
+
+    return super.getChildren(key);
+  }
+
+  getTextValue(key: Key): string {
+    let row = this.getItem(key);
+    if (!row) {
+      return '';
+    }
+
+    // If the row has a textValue, use that.
+    if (row.textValue) {
+      return row.textValue;
+    }
+
+    // Otherwise combine the text of each of the row header columns.
+    let rowHeaderColumnKeys = this.rowHeaderColumnKeys;
+    if (rowHeaderColumnKeys) {
+      let text = [];
+      for (let cell of row.childNodes) {
+        let column = this.columns[cell.index];
+        if (rowHeaderColumnKeys.has(column.key) && cell.textValue) {
+          text.push(cell.textValue);
+        }
+
+        if (text.length === rowHeaderColumnKeys.size) {
+          break;
+        }
+      }
+
+      return text.join(' ');
+    }
+
+    return '';
+  }
 }

package/src/TableColumnLayout.ts

@@ -0,0 +1,127 @@
+/*
+ * Copyright 2022 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import {
+  calculateColumnSizes,
+  getMaxWidth,
+  getMinWidth
+} from './TableUtils';
+import {ColumnSize, TableCollection} from '@react-types/table';
+import {GridNode} from '@react-types/grid';
+import {Key} from '@react-types/shared';
+
+export interface TableColumnLayoutOptions<T> {
+  getDefaultWidth?: (column: GridNode<T>) => ColumnSize | null | undefined,
+  getDefaultMinWidth?: (column: GridNode<T>) => ColumnSize | null | undefined
+}
+
+export class TableColumnLayout<T> {
+  getDefaultWidth: (column: GridNode<T>) => ColumnSize | null | undefined;
+  getDefaultMinWidth: (column: GridNode<T>) => ColumnSize | null | undefined;
+  columnWidths: Map<Key, number> = new Map();
+  columnMinWidths: Map<Key, number> = new Map();
+  columnMaxWidths: Map<Key, number> = new Map();
+
+  constructor(options: TableColumnLayoutOptions<T>) {
+    this.getDefaultWidth = options?.getDefaultWidth ?? (() => '1fr');
+    this.getDefaultMinWidth = options?.getDefaultMinWidth ?? (() => 75);
+  }
+
+  /** Takes an array of columns and splits it into 2 maps of columns with controlled and columns with uncontrolled widths. */
+  splitColumnsIntoControlledAndUncontrolled(columns: Array<GridNode<T>>): [Map<Key, GridNode<T>>, Map<Key, GridNode<T>>] {
+    return columns.reduce((acc, col) => {
+      if (col.props.width != null) {
+        acc[0].set(col.key, col);
+      } else {
+        acc[1].set(col.key, col);
+      }
+      return acc;
+    }, [new Map(), new Map()]);
+  }
+
+  /** Takes uncontrolled and controlled widths and joins them into a single Map. */
+  recombineColumns(columns: Array<GridNode<T>>, uncontrolledWidths: Map<Key, ColumnSize>, uncontrolledColumns: Map<Key, GridNode<T>>, controlledColumns: Map<Key, GridNode<T>>): Map<Key, ColumnSize> {
+    return new Map(columns.map(col => {
+      if (uncontrolledColumns.has(col.key)) {
+        return [col.key, uncontrolledWidths.get(col.key)];
+      } else {
+        return [col.key, controlledColumns.get(col.key).props.width];
+      }
+    }));
+  }
+
+  /** Used to make an initial Map of the uncontrolled widths based on default widths. */
+  getInitialUncontrolledWidths(uncontrolledColumns: Map<Key, GridNode<T>>): Map<Key, ColumnSize> {
+    return new Map(Array.from(uncontrolledColumns).map(([key, col]) =>
+      [key, col.props.defaultWidth ?? this.getDefaultWidth?.(col) ?? '1fr']
+    ));
+  }
+
+  getColumnWidth(key: Key): number {
+    return this.columnWidths.get(key) ?? 0;
+  }
+
+  getColumnMinWidth(key: Key): number {
+    return this.columnMinWidths.get(key) ?? 0;
+  }
+
+  getColumnMaxWidth(key: Key): number {
+    return this.columnMaxWidths.get(key) ?? 0;
+  }
+
+  resizeColumnWidth(collection: TableCollection<T>, uncontrolledWidths: Map<Key, ColumnSize>, col: Key, width: number): Map<Key, ColumnSize> {
+    let prevColumnWidths = this.columnWidths;
+    let freeze = true;
+    let newWidths = new Map<Key, ColumnSize>();
+
+    width = Math.max(this.getColumnMinWidth(col), Math.min(this.getColumnMaxWidth(col), Math.floor(width)));
+
+    collection.columns.forEach(column => {
+      if (column.key === col) {
+        newWidths.set(column.key, width);
+        freeze = false;
+      } else if (freeze) {
+        // freeze columns to the left to their previous pixel value
+        newWidths.set(column.key, prevColumnWidths.get(column.key));
+      } else {
+        newWidths.set(column.key, column.props.width ?? uncontrolledWidths.get(column.key));
+      }
+    });
+
+    return newWidths;
+  }
+
+  buildColumnWidths(tableWidth: number, collection: TableCollection<T>, widths: Map<Key, ColumnSize>) {
+    this.columnWidths = new Map();
+    this.columnMinWidths = new Map();
+    this.columnMaxWidths = new Map();
+
+    // initial layout or table/window resizing
+    let columnWidths = calculateColumnSizes(
+      tableWidth,
+      collection.columns.map(col => ({...col.props, key: col.key})),
+      widths,
+      (i) => this.getDefaultWidth(collection.columns[i]),
+      (i) => this.getDefaultMinWidth(collection.columns[i])
+    );
+
+    // columns going in will be the same order as the columns coming out
+    columnWidths.forEach((width, index) => {
+      let key = collection.columns[index].key;
+      let column = collection.columns[index];
+      this.columnWidths.set(key, width);
+      this.columnMinWidths.set(key, getMinWidth(column.props.minWidth ?? this.getDefaultMinWidth(column), tableWidth));
+      this.columnMaxWidths.set(key, getMaxWidth(column.props.maxWidth, tableWidth));
+    });
+    return this.columnWidths;
+  }
+}

package/src/TableHeader.ts

@@ -10,16 +10,21 @@
  * governing permissions and limitations under the License.
  */
 
+import {CollectionBuilderContext} from './useTableState';
 import {PartialNode} from '@react-stately/collections';
-import React, {ReactElement} from 'react';
+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
   return null;
 }
 
-TableHeader.getCollectionNode = function* getCollectionNode<T>(props: TableHeaderProps<T>): Generator<PartialNode<T>, void, any> {
+TableHeader.getCollectionNode = function* getCollectionNode<T>(props: TableHeaderProps<T>, context: CollectionBuilderContext<T>): Generator<PartialNode<T>, void, any> {
   let {children, columns} = props;
+
+  // Clear columns so they aren't double added in strict mode.
+  context.columns = [];
+
   if (typeof children === 'function') {
     if (!columns) {
       throw new Error('props.children was a function but props.columns is missing');
@@ -45,6 +50,10 @@ TableHeader.getCollectionNode = function* getCollectionNode<T>(props: TableHeade
   }
 };
 
+/**
+ * A TableHeader is a container for the Column elements in a Table. Columns can be statically defined
+ * as children, or generated dynamically using a function based on the data passed to the `columns` prop.
+ */
 // We don't want getCollectionNode to show up in the type definition
 let _TableHeader = TableHeader as <T>(props: TableHeaderProps<T>) => JSX.Element;
 export {_TableHeader as TableHeader};

package/src/TableUtils.ts

@@ -0,0 +1,253 @@
+/*
+ * Copyright 2022 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import {ColumnSize} from '@react-types/table';
+import {Key} from '@react-types/shared';
+
+// numbers and percents are considered static. *fr units or a lack of units are considered dynamic.
+export function isStatic(width: number | string): boolean {
+  return width != null && (!isNaN(width as number) || (String(width)).match(/^(\d+)(?=%$)/) !== null);
+}
+
+export function parseFractionalUnit(width: string): number {
+  if (!width) {
+    return 1;
+  }
+  let match = width.match(/^(.+)(?=fr$)/);
+  // if width is the incorrect format, just default it to a 1fr
+  if (!match) {
+    console.warn(`width: ${width} is not a supported format, width should be a number (ex. 150), percentage (ex. '50%') or fr unit (ex. '2fr')`,
+      'defaulting to \'1fr\'');
+    return 1;
+  }
+  return parseFloat(match[0]);
+}
+
+export function parseStaticWidth(width: number | string, tableWidth: number): number {
+  if (typeof width === 'string') {
+    let match = width.match(/^(\d+)(?=%$)/);
+    if (!match) {
+      throw new Error('Only percentages or numbers are supported for static column widths');
+    }
+    return tableWidth * (parseFloat(match[0]) / 100);
+  }
+  return width;
+}
+
+
+export function getMaxWidth(maxWidth: number | string, tableWidth: number): number {
+  return maxWidth != null
+    ? parseStaticWidth(maxWidth, tableWidth)
+    : Number.MAX_SAFE_INTEGER;
+}
+
+// cannot support FR units, we'd need to know everything else in the table to do that
+export function getMinWidth(minWidth: number | string, tableWidth: number): number {
+  return minWidth != null
+    ? parseStaticWidth(minWidth, tableWidth)
+    : 0;
+}
+
+
+export interface IColumn {
+  minWidth?: number | string,
+  maxWidth?: number | string,
+  width?: number | string,
+  defaultWidth?: number | string,
+  key?: Key
+}
+
+/**
+ * Implements the flex algorithm described in https://www.w3.org/TR/css-flexbox-1/#layout-algorithm
+ * It makes a few constraint/assumptions:
+ * 1. All basis values are 0 unless it is a static width, then the basis is the static width
+ * 2. All flex grow and shrink values are equal to the FR specified on the column, grow and shrink for the same column are equal
+ * 3. We only have one row
+ * An example of the setup can be seen here https://jsfiddle.net/snowystinger/wv0ymjaf/61/ where I let the browser figure out the
+ * flex of the columns.
+ * Note: We differ in one key aspect, all of our column widths must be whole numbers, so we avoid browser
+ * sub pixel rounding errors. To do this, we use a cascading rounding algorithm to ensure that the sum of the widths is maintained
+ * while distributing the rounding remainder across the columns.
+ *
+ * As noted in the chrome source code, this algorithm is very accurate, but has the potential to be quadratic.
+ * They have deemed this to be acceptable because the number of elements is usually small and the flex factors
+ * are usually not high variance. I believe we can make the same assumptions. Particularly once resizing is
+ * started, it will convert all columns to the left to static widths, so it will cut down on the number of FR columns.
+ *
+ * There are likely faster ways to do this, I've chosen to stick to the spec as closely as possible for readability, accuracy, and for the
+ * note that this behaving quadratically is unlikely to be a problem.
+ * @param availableWidth - The visible width of the table.
+ * @param columns - The table defined columns.
+ * @param changedColumns - Any columns we want to override, for example, during resizing.
+ * @param getDefaultWidth - A function that returns the default width of a column by its index.
+ * @param getDefaultMinWidth - A function that returns the default min width of a column by its index.
+ */
+export function calculateColumnSizes(availableWidth: number, columns: IColumn[], changedColumns: Map<Key, ColumnSize>, getDefaultWidth, getDefaultMinWidth) {
+  let hasNonFrozenItems = false;
+  let flexItems = 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;
+    if (isStatic(width)) {
+      baseSize = parseStaticWidth(width, availableWidth);
+      frozen = true;
+    } else {
+      flex = parseFractionalUnit(width);
+      if (flex <= 0) {
+        frozen = true;
+      }
+    }
+
+    let min = getMinWidth(column.minWidth ?? getDefaultMinWidth?.(index) ?? 0, availableWidth);
+    let max = getMaxWidth(column.maxWidth, availableWidth);
+    let hypotheticalMainSize = Math.max(min, Math.min(baseSize, max));
+
+    // 9.7.1
+    // We don't make use of flex basis, it's always 0, so we are always in 'grow' mode.
+    // 9.7.2
+    if (frozen) {
+      targetMainSize = hypotheticalMainSize;
+    } else if (baseSize > hypotheticalMainSize) {
+      frozen = true;
+      targetMainSize = hypotheticalMainSize;
+    }
+
+    // 9.7.3
+    if (!frozen) {
+      hasNonFrozenItems = true;
+    }
+    return {
+      frozen,
+      baseSize,
+      hypotheticalMainSize,
+      min,
+      max,
+      flex,
+      targetMainSize,
+      violation: 0
+    };
+  });
+
+  // 9.7.4
+  // 9.7.4.a
+  while (hasNonFrozenItems) {
+    // 9.7.4.b
+    /**
+     * Calculate the remaining free space as for initial free space,
+     * above (9.7.3). If the sum of the unfrozen flex items’ flex factors is
+     * less than one, multiply the initial free space by this sum (of flex factors).
+     * If the magnitude of this value is less than the magnitude of
+     * the remaining free space, use this as the remaining free space.
+     */
+    let usedWidth = 0;
+    let flexFactors = 0;
+    flexItems.forEach(item => {
+      if (item.frozen) {
+        usedWidth += item.targetMainSize;
+      } else {
+        usedWidth += item.baseSize;
+        flexFactors += item.flex;
+      }
+    });
+
+    let remainingFreeSpace = availableWidth - usedWidth;
+    // we only support integer FR's, and because of hasNonFrozenItems, we know that flexFactors > 0
+    // so no need to check for flexFactors < 1
+    // 9.7.4.c
+    /**
+     * If the remaining free space is zero
+     * - Do nothing.
+     * Else // remember, we're always in grow mode
+     * - Find the ratio of the item’s flex grow factor to the
+     * sum of the flex grow factors of all unfrozen items on
+     * the line. Set the item’s target main size to its flex
+     * base size plus a fraction of the remaining free space
+     * proportional to the ratio.
+     */
+    if (remainingFreeSpace > 0) {
+      flexItems.forEach((item) => {
+        if (!item.frozen) {
+          let ratio = item.flex / flexFactors;
+          item.targetMainSize = item.baseSize + (ratio * remainingFreeSpace);
+        }
+      });
+    }
+
+    // 9.7.4.d
+    /**
+     * Fix min/max violations. Clamp each non-frozen item’s
+     * target main size by its used min and max main sizes
+     * and floor its content-box size at zero. If the item’s
+     * target main size was made smaller by this, it’s a max
+     * violation. If the item’s target main size was made
+     * larger by this, it’s a min violation.
+     */
+    let totalViolation = 0;
+    flexItems.forEach(item => {
+      item.violation = 0;
+      if (!item.frozen) {
+        let {min, max, targetMainSize} = item;
+        item.targetMainSize = Math.max(min, Math.min(targetMainSize, max));
+
+        item.violation = item.targetMainSize - targetMainSize;
+        totalViolation += item.violation;
+      }
+    });
+
+    // 9.7.4.e
+    /**
+     * Freeze over-flexed items. The total violation is the
+     * sum of the adjustments from the previous step
+     * ∑(clamped size - unclamped size). If the total violation is:
+     * Zero
+     * - Freeze all items.
+     *
+     * Positive
+     * - Freeze all the items with min violations.
+     *
+     * Negative
+     * - Freeze all the items with max violations.
+     */
+    hasNonFrozenItems = false;
+    flexItems.forEach(item => {
+      if (totalViolation === 0 || Math.sign(totalViolation) === Math.sign(item.violation)) {
+        item.frozen = true;
+      } else if (!item.frozen) {
+        hasNonFrozenItems = true;
+      }
+    });
+  }
+
+  return cascadeRounding(flexItems);
+}
+
+function cascadeRounding(flexItems): 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.
+  */
+
+  let fpTotal = 0;
+  let intTotal = 0;
+  let roundedArray = [];
+  flexItems.forEach(function (item) {
+    let float = item.targetMainSize;
+    let integer = Math.round(float + fpTotal) - intTotal;
+    fpTotal += float;
+    intTotal += integer;
+    roundedArray.push(integer);
+  });
+
+  return roundedArray;
+}

package/src/index.ts

@@ -10,10 +10,19 @@
  * governing permissions and limitations under the License.
  */
 
-export * from './useTableState';
-export * from './TableHeader';
-export * from './TableBody';
-export * from './Column';
-export * from './Row';
-export * from './Cell';
+export type {TableColumnResizeState, TableColumnResizeStateProps} from './useTableColumnResizeState';
+export type {TableState, CollectionBuilderContext, TableStateProps} from './useTableState';
+export type {TableHeaderProps, TableBodyProps, ColumnProps, RowProps, CellProps} from '@react-types/table';
+export type {TreeGridState, TreeGridStateProps} from './useTreeGridState';
+
+export {useTableColumnResizeState} from './useTableColumnResizeState';
+export {useTableState} from './useTableState';
+export {TableHeader} from './TableHeader';
+export {TableBody} from './TableBody';
+export {Column} from './Column';
+export {Row} from './Row';
+export {Cell} from './Cell';
 export {Section} from '@react-stately/collections';
+export {TableCollection, buildHeaderRows} from './TableCollection';
+export {TableColumnLayout} from './TableColumnLayout';
+export {UNSTABLE_useTreeGridState} from './useTreeGridState';