@react-types/table 3.3.4-nightly.3606 → 3.3.4-nightly.3611

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-types/table",
-  "version": "3.3.4-nightly.3606+5c1920e50",
+  "version": "3.3.4-nightly.3611+e6808d1b5",
   "description": "Spectrum UI components in React",
   "license": "Apache-2.0",
   "types": "src/index.d.ts",
@@ -9,8 +9,8 @@
     "url": "https://github.com/adobe/react-spectrum"
   },
   "dependencies": {
-    "@react-types/grid": "3.1.6-nightly.3606+5c1920e50",
-    "@react-types/shared": "3.0.0-nightly.1906+5c1920e50"
+    "@react-types/grid": "3.1.6-nightly.3611+e6808d1b5",
+    "@react-types/shared": "3.0.0-nightly.1911+e6808d1b5"
   },
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
@@ -18,5 +18,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "5c1920e50d4b2b80c826ca91aff55c97350bf9f9"
+  "gitHead": "e6808d1b5e80cef7af7e63974f658043593b2e1e"
 }

package/src/index.d.ts

@@ -14,6 +14,13 @@ import {AriaLabelingProps, AsyncLoadable, CollectionChildren, DOMProps, LoadingS
 import {GridCollection, GridNode} from '@react-types/grid';
 import {Key, ReactElement, ReactNode} from 'react';
 
+/** Widths that result in a constant pixel value for the same Table width. */
+export type ColumnStaticSize = number | `${number}` | `${number}%`; // match regex: /^(\d+)(?=%$)/
+/** Widths that change size in relation to the remaining space and in ratio to other dynamic columns. */
+export type ColumnDynamicSize = `${number}fr`; // match regex: /^(\d+)(?=fr$)/
+/** All possible sizes a column can be assigned. */
+export type ColumnSize = ColumnStaticSize | ColumnDynamicSize;
+
 export interface TableProps<T> extends MultipleSelection, Sortable {
   /** The elements that make up the table. Includes the TableHeader, TableBody, Columns, and Rows. */
   children: [ReactElement<TableHeaderProps<T>>, ReactElement<TableBodyProps<T>>],
@@ -40,14 +47,15 @@ export interface SpectrumTableProps<T> extends TableProps<T>, SpectrumSelectionP
   onAction?: (key: Key) => void,
   /**
    * Handler that is called when a user performs a column resize.
-   * @private
+   * Can be used with the width property on columns to put the column widths into
+   * a controlled state.
    */
-  onColumnResize?: (affectedColumns: {key: Key, width: number}[]) => void,
+  onResize?: (widths: Map<Key, ColumnSize>) => void,
   /**
-   * Handler that is called when a column resize ends.
-   * @private
+   * Handler that is called after a user performs a column resize.
+   * Can be used to store the widths of columns for another future session.
    */
-  onColumnResizeEnd?: (affectedColumns: {key: Key, width: number}[]) => void
+  onResizeEnd?: (widths: Map<Key, ColumnSize>) => void
 }
 
 export interface TableHeaderProps<T> {
@@ -67,20 +75,14 @@ export interface ColumnProps<T> {
   /** A list of child columns used when dynamically rendering nested child columns. */
   childColumns?: T[],
   /** The width of the column. */
-  width?: number | string,
+  width?: ColumnSize | null,
   /** The minimum width of the column. */
-  minWidth?: number | string,
+  minWidth?: ColumnStaticSize | null,
   /** The maximum width of the column. */
-  maxWidth?: number | string,
-  /**
-   * The default width of the column.
-   * @private
-   */
-  defaultWidth?: number | string,
-  /**
-   * Whether the column allows resizing.
-   * @private
-   */
+  maxWidth?: ColumnStaticSize | null,
+  /** The default width of the column. */
+  defaultWidth?: ColumnSize | null,
+  /** Whether the column allows resizing. */
   allowsResizing?: boolean,
   /** Whether the column allows sorting. */
   allowsSorting?: boolean,
@@ -141,7 +143,7 @@ export type CellElement = ReactElement<CellProps>;
 export type CellRenderer = (columnKey: Key) => CellElement;
 
 export interface TableCollection<T> extends GridCollection<T> {
-  // TODO perhaps elaborate on this? maybe not clear enought, essentially returns the table header rows (e.g. in a tiered headers table, will return the nodes containing the top tier column, next tier, etc)
+  // TODO perhaps elaborate on this? maybe not clear enough, essentially returns the table header rows (e.g. in a tiered headers table, will return the nodes containing the top tier column, next tier, etc)
   /** A list of header row nodes in the table. */
   headerRows: GridNode<T>[],
   /** A list of column nodes in the table. */