react-stately 3.45.0 → 3.47.0

package/dist/types/src/selection/types.d.ts

@@ -0,0 +1,99 @@
+import { Collection, DisabledBehavior, FocusStrategy, Key, LongPressEvent, Node, PressEvent, Selection, SelectionBehavior, SelectionMode } from '@react-types/shared';
+export interface FocusState {
+    /** Whether the collection is currently focused. */
+    readonly isFocused: boolean;
+    /** Sets whether the collection is focused. */
+    setFocused(isFocused: boolean): void;
+    /** The current focused key in the collection. */
+    readonly focusedKey: Key | null;
+    /** Whether the first or last child of the focused key should receive focus. */
+    readonly childFocusStrategy: FocusStrategy | null;
+    /**
+     * Sets the focused key, and optionally, whether the first or last child of that key should
+     * receive focus.
+     */
+    setFocusedKey(key: Key | null, child?: FocusStrategy): void;
+}
+export interface SingleSelectionState extends FocusState {
+    /** Whether the collection allows empty selection. */
+    readonly disallowEmptySelection?: boolean;
+    /** The currently selected key in the collection. */
+    readonly selectedKey: Key;
+    /** Sets the selected key in the collection. */
+    setSelectedKey(key: Key | null): void;
+}
+export interface MultipleSelectionState extends FocusState {
+    /** The type of selection that is allowed in the collection. */
+    readonly selectionMode: SelectionMode;
+    /** The selection behavior for the collection. */
+    readonly selectionBehavior: SelectionBehavior;
+    /** Sets the selection behavior for the collection. */
+    setSelectionBehavior(selectionBehavior: SelectionBehavior): void;
+    /** Whether the collection allows empty selection. */
+    readonly disallowEmptySelection: boolean;
+    /** The currently selected keys in the collection. */
+    readonly selectedKeys: Selection;
+    /** Sets the selected keys in the collection. */
+    setSelectedKeys(keys: Selection): void;
+    /** The currently disabled keys in the collection. */
+    readonly disabledKeys: Set<Key>;
+    /** Whether `disabledKeys` applies to selection, actions, or both. */
+    readonly disabledBehavior: DisabledBehavior;
+}
+export interface MultipleSelectionManager extends FocusState {
+    /** The type of selection that is allowed in the collection. */
+    readonly selectionMode: SelectionMode;
+    /** The selection behavior for the collection. */
+    readonly selectionBehavior: SelectionBehavior;
+    /** Whether the collection allows empty selection. */
+    readonly disallowEmptySelection?: boolean;
+    /** The currently selected keys in the collection. */
+    readonly selectedKeys: Set<Key>;
+    /** Whether the selection is empty. */
+    readonly isEmpty: boolean;
+    /** Whether all items in the collection are selected. */
+    readonly isSelectAll: boolean;
+    /** The first selected key in the collection. */
+    readonly firstSelectedKey: Key | null;
+    /** The last selected key in the collection. */
+    readonly lastSelectedKey: Key | null;
+    /** The currently disabled keys in the collection. */
+    readonly disabledKeys: Set<Key>;
+    /** Whether `disabledKeys` applies to selection, actions, or both. */
+    readonly disabledBehavior: DisabledBehavior;
+    /** Returns whether a key is selected. */
+    isSelected(key: Key): boolean;
+    /** Returns whether the current selection is equal to the given selection. */
+    isSelectionEqual(selection: Set<Key>): boolean;
+    /** Extends the selection to the given key. */
+    extendSelection(toKey: Key): void;
+    /** Toggles whether the given key is selected. */
+    toggleSelection(key: Key): void;
+    /** Replaces the selection with only the given key. */
+    replaceSelection(key: Key): void;
+    /** Replaces the selection with the given keys. */
+    setSelectedKeys(keys: Iterable<Key>): void;
+    /** Selects all items in the collection. */
+    selectAll(): void;
+    /** Removes all keys from the selection. */
+    clearSelection(): void;
+    /** Toggles between select all and an empty selection. */
+    toggleSelectAll(): void;
+    /**
+     * Toggles, replaces, or extends selection to the given key depending
+     * on the pointer event and collection's selection mode.
+     */
+    select(key: Key, e?: PressEvent | LongPressEvent | PointerEvent): void;
+    /** Returns whether the given key can be selected. */
+    canSelectItem(key: Key): boolean;
+    /** Returns whether the given key is non-interactive, i.e. both selection and actions are disabled. */
+    isDisabled(key: Key): boolean;
+    /** Sets the selection behavior for the collection. */
+    setSelectionBehavior(selectionBehavior: SelectionBehavior): void;
+    /** Returns whether the given key is a hyperlink. */
+    isLink(key: Key): boolean;
+    /** Returns the props for the given item. */
+    getItemProps(key: Key): any;
+    /** The collection of nodes that the selection manager handles. */
+    collection: Collection<Node<unknown>>;
+}

package/dist/types/src/selection/useMultipleSelectionState.d.ts

@@ -0,0 +1,22 @@
+import { DisabledBehavior, MultipleSelection, SelectionBehavior } from '@react-types/shared';
+import { MultipleSelectionState } from './types';
+export interface MultipleSelectionStateProps extends MultipleSelection {
+    /**
+     * How multiple selection should behave in the collection.
+     *
+     * @default 'toggle'
+     */
+    selectionBehavior?: SelectionBehavior;
+    /** Whether onSelectionChange should fire even if the new set of keys is the same as the last. */
+    allowDuplicateSelectionEvents?: boolean;
+    /**
+     * Whether `disabledKeys` applies to all interactions, or only selection.
+     *
+     * @default 'all'
+     */
+    disabledBehavior?: DisabledBehavior;
+}
+/**
+ * Manages state for multiple selection and focus in a collection.
+ */
+export declare function useMultipleSelectionState(props: MultipleSelectionStateProps): MultipleSelectionState;

package/dist/types/src/slider/useSliderState.d.ts

@@ -0,0 +1,172 @@
+import { LabelableProps, Orientation, RangeInputBase, ValueBase } from '@react-types/shared';
+export interface SliderProps<T = number | number[]> extends RangeInputBase<number>, ValueBase<T>, LabelableProps {
+    /**
+     * The orientation of the Slider.
+     *
+     * @default 'horizontal'
+     */
+    orientation?: Orientation;
+    /** Whether the whole Slider is disabled. */
+    isDisabled?: boolean;
+    /** Fired when the slider stops moving, due to being let go. */
+    onChangeEnd?: (value: T) => void;
+    /**
+     * The slider's minimum value.
+     *
+     * @default 0
+     */
+    minValue?: number;
+    /**
+     * The slider's maximum value.
+     *
+     * @default 100
+     */
+    maxValue?: number;
+    /**
+     * The slider's step value.
+     *
+     * @default 1
+     */
+    step?: number;
+}
+export interface SliderState {
+    /**
+     * Values managed by the slider by thumb index.
+     */
+    readonly values: number[];
+    /**
+     * The default values for each thumb.
+     */
+    readonly defaultValues: number[];
+    /**
+     * Get the value for the specified thumb.
+     *
+     * @param index
+     */
+    getThumbValue(index: number): number;
+    /**
+     * Sets the value for the specified thumb.
+     * The actual value set will be clamped and rounded according to min/max/step.
+     *
+     * @param index
+     * @param value
+     */
+    setThumbValue(index: number, value: number): void;
+    /**
+     * Sets value for the specified thumb by percent offset (between 0 and 1).
+     *
+     * @param index
+     * @param percent
+     */
+    setThumbPercent(index: number, percent: number): void;
+    /**
+     * Whether the specific thumb is being dragged.
+     *
+     * @param index
+     */
+    isThumbDragging(index: number): boolean;
+    /**
+     * Set is dragging on the specified thumb.
+     *
+     * @param index
+     * @param dragging
+     */
+    setThumbDragging(index: number, dragging: boolean): void;
+    /**
+     * Currently-focused thumb index.
+     */
+    readonly focusedThumb: number | undefined;
+    /**
+     * Set focused true on specified thumb. This will remove focus from
+     * any thumb that had it before.
+     *
+     * @param index
+     */
+    setFocusedThumb(index: number | undefined): void;
+    /**
+     * Returns the specified thumb's value as a percentage from 0 to 1.
+     *
+     * @param index
+     */
+    getThumbPercent(index: number): number;
+    /**
+     * Returns the value as a percent between the min and max of the slider.
+     *
+     * @param index
+     */
+    getValuePercent(value: number): number;
+    /**
+     * Returns the string label for the specified thumb's value, per props.formatOptions.
+     *
+     * @param index
+     */
+    getThumbValueLabel(index: number): string;
+    /**
+     * Returns the string label for the value, per props.formatOptions.
+     *
+     * @param value
+     */
+    getFormattedValue(value?: number | number[]): string;
+    /**
+     * Returns the min allowed value for the specified thumb.
+     *
+     * @param index
+     */
+    getThumbMinValue(index: number): number;
+    /**
+     * Returns the max allowed value for the specified thumb.
+     *
+     * @param index
+     */
+    getThumbMaxValue(index: number): number;
+    /**
+     * Converts a percent along track (between 0 and 1) to the corresponding value.
+     *
+     * @param percent
+     */
+    getPercentValue(percent: number): number;
+    /**
+     * Returns if the specified thumb is editable.
+     *
+     * @param index
+     */
+    isThumbEditable(index: number): boolean;
+    /**
+     * Set the specified thumb's editable state.
+     *
+     * @param index
+     * @param editable
+     */
+    setThumbEditable(index: number, editable: boolean): void;
+    /**
+     * Increments the value of the thumb by the step or page amount.
+     */
+    incrementThumb(index: number, stepSize?: number): void;
+    /**
+     * Decrements the value of the thumb by the step or page amount.
+     */
+    decrementThumb(index: number, stepSize?: number): void;
+    /**
+     * The step amount for the slider.
+     */
+    readonly step: number;
+    /**
+     * The page size for the slider, used to do a bigger step.
+     */
+    readonly pageSize: number;
+    /** The orientation of the slider. */
+    readonly orientation: Orientation;
+    /** Whether the slider is disabled. */
+    readonly isDisabled: boolean;
+}
+export interface SliderStateOptions<T> extends SliderProps<T> {
+    numberFormatter: Intl.NumberFormat;
+}
+/**
+ * Provides state management for a slider component. Stores values for all thumbs,
+ * formats values for localization, and provides methods to update the position
+ * of any thumbs.
+ *
+ * @param props
+ */
+export declare function useSliderState<T extends number | number[]>(props: SliderStateOptions<T>): SliderState;

package/dist/types/src/steplist/useStepListState.d.ts

@@ -0,0 +1,23 @@
+import { CollectionBase, Key, SingleSelection } from '@react-types/shared';
+import { SingleSelectListState } from '../list/useSingleSelectListState';
+export interface StepListProps<T> extends CollectionBase<T>, Omit<SingleSelection, 'onSelectionChange'> {
+    /** The key of the last completed step (controlled). */
+    lastCompletedStep?: Key;
+    /** The key of the initially last completed step (uncontrolled). */
+    defaultLastCompletedStep?: Key;
+    /** Callback for when the last completed step changes. */
+    onLastCompletedStepChange?: (key: Key | null) => void;
+    /** Whether the step list is disabled. Steps will not be focusable or interactive. */
+    isDisabled?: boolean;
+    /** Whether the step list is read only. Steps will be focusable but non-interactive. */
+    isReadOnly?: boolean;
+    /** Handler that is called when the selection changes. */
+    onSelectionChange?: (key: Key) => void;
+}
+export interface StepListState<T> extends SingleSelectListState<T> {
+    readonly lastCompletedStep?: Key;
+    setLastCompletedStep(key: Key): void;
+    isCompleted(key: Key): boolean;
+    isSelectable(key: Key): boolean;
+}
+export declare function useStepListState<T extends object>(props: StepListProps<T>): StepListState<T>;

package/dist/types/src/table/Cell.d.ts

@@ -0,0 +1,22 @@
+import { JSX, ReactElement, ReactNode } from 'react';
+import { Key } from '@react-types/shared';
+import { PartialNode } from '../collections/types';
+export interface CellProps {
+    /** The contents of the cell. */
+    children: ReactNode;
+    /** A string representation of the cell's contents, used for features like typeahead. */
+    textValue?: string;
+    /** Indicates how many columns the data cell spans. */
+    colSpan?: number;
+}
+export type CellElement = ReactElement<CellProps>;
+export type CellRenderer = (columnKey: Key) => CellElement;
+declare function Cell(props: CellProps): ReactElement | null;
+declare namespace Cell {
+    var getCollectionNode: <T>(props: CellProps) => Generator<PartialNode<T>, any, any>;
+}
+/**
+ * A Cell represents the value of a single Column within a Table Row.
+ */
+declare let _Cell: (props: CellProps) => JSX.Element;
+export { _Cell as Cell };

package/dist/types/src/table/Column.d.ts

@@ -0,0 +1,54 @@
+import { CollectionBuilderContext } from './useTableState';
+import { GridNode } from '../grid/GridCollection';
+import { PartialNode } from '../collections/types';
+import { JSX, ReactElement, ReactNode } from 'react';
+/** Widths that result in a constant pixel value for the same Table width. */
+export type ColumnStaticSize = number | `${number}` | `${number}%`;
+/**
+ * Widths that change size in relation to the remaining space and in ratio to other dynamic columns.
+ * All numbers must be integers and greater than 0.
+ * FR units take up remaining, if any, space in the table.
+ */
+export type ColumnDynamicSize = `${number}fr`;
+/** All possible sizes a column can be assigned. */
+export type ColumnSize = ColumnStaticSize | ColumnDynamicSize;
+export type ColumnElement<T> = ReactElement<ColumnProps<T>>;
+export type ColumnRenderer<T> = (item: T) => ColumnElement<T>;
+export interface ColumnProps<T> {
+    /** Rendered contents of the column if `children` contains child columns. */
+    title?: ReactNode;
+    /** Static child columns or content to render as the column header. */
+    children: ReactNode | ColumnElement<T> | ColumnElement<T>[];
+    /** A list of child columns used when dynamically rendering nested child columns. */
+    childColumns?: T[];
+    /** The width of the column. */
+    width?: ColumnSize | null;
+    /** The minimum width of the column. */
+    minWidth?: ColumnStaticSize | null;
+    /** The maximum width of the column. */
+    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;
+    /**
+     * Whether a column is a [row header](https://www.w3.org/TR/wai-aria-1.1/#rowheader) and should be
+     * announced by assistive technology during row navigation.
+     */
+    isRowHeader?: boolean;
+    /** A string representation of the column's contents, used for accessibility announcements. */
+    textValue?: string;
+}
+declare function Column<T>(props: ColumnProps<T>): ReactElement | null;
+declare namespace Column {
+    var getCollectionNode: <T>(props: ColumnProps<T>, context: CollectionBuilderContext<T>) => Generator<PartialNode<T>, void, GridNode<T>[]>;
+}
+/**
+ * A Column represents a field of each item within a Table. Columns may also contain nested
+ * Column elements to represent column groups. Nested columns can be statically defined as
+ * children, or dynamically generated using a function based on the `childColumns` prop.
+ */
+declare let _Column: <T>(props: ColumnProps<T>) => JSX.Element;
+export { _Column as Column };

package/dist/types/src/table/Row.d.ts

@@ -0,0 +1,32 @@
+import { CellElement, CellRenderer } from './Cell';
+import { CollectionBuilderContext } from './useTableState';
+import { LinkDOMProps } from '@react-types/shared';
+import { PartialNode } from '../collections/types';
+import { JSX, ReactElement } from 'react';
+export type RowElement<T> = ReactElement<RowProps<T>>;
+export interface RowProps<T> extends LinkDOMProps {
+    /**
+     * A list of child item objects used when dynamically rendering row children. Requires the feature
+     * flag to be enabled along with UNSTABLE_allowsExpandableRows, see
+     * https://react-spectrum.adobe.com/react-spectrum/TableView.html#expandable-rows.
+     *
+     * @private
+     * @version alpha
+     */
+    UNSTABLE_childItems?: Iterable<T>;
+    /** Rendered contents of the row or row child items. */
+    children: CellElement | CellElement[] | CellRenderer;
+    /** A string representation of the row's contents, used for features like typeahead. */
+    textValue?: string;
+}
+declare function Row<T>(props: RowProps<T>): ReactElement | null;
+declare namespace Row {
+    var getCollectionNode: <T>(props: RowProps<T>, context: CollectionBuilderContext<T>) => Generator<PartialNode<T>, any, any>;
+}
+/**
+ * A Row represents a single item in a Table and contains Cell elements for each column.
+ * Cells can be statically defined as children, or generated dynamically using a function
+ * based on the columns defined in the TableHeader.
+ */
+declare let _Row: <T>(props: RowProps<T>) => JSX.Element;
+export { _Row as Row };

package/dist/types/src/table/TableBody.d.ts

@@ -0,0 +1,23 @@
+import { AsyncLoadable, LoadingState } from '@react-types/shared';
+import { PartialNode } from '../collections/types';
+import { JSX, ReactElement } from 'react';
+import { RowElement } from './Row';
+export interface TableBodyProps<T> extends Omit<AsyncLoadable, 'isLoading'> {
+    /** The contents of the table body. Supports static items or a function for dynamic rendering. */
+    children: RowElement<T> | RowElement<T>[] | ((item: T) => RowElement<T>);
+    /** A list of row objects in the table body used when dynamically rendering rows. */
+    items?: Iterable<T>;
+    /** The current loading state of the table. */
+    loadingState?: LoadingState;
+}
+declare function TableBody<T>(props: TableBodyProps<T>): ReactElement | null;
+declare namespace TableBody {
+    var getCollectionNode: <T>(props: TableBodyProps<T>) => Generator<PartialNode<T>, any, any>;
+}
+/**
+ * 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.
+ */
+declare let _TableBody: <T>(props: TableBodyProps<T>) => JSX.Element;
+export { _TableBody as TableBody };

package/dist/types/src/table/TableCollection.d.ts

@@ -0,0 +1,43 @@
+import { GridCollection, GridNode, IGridCollection } from '../grid/GridCollection';
+import { Key } from '@react-types/shared';
+export interface ITableCollection<T> extends IGridCollection<T> {
+    /** A list of header row nodes in the table. */
+    headerRows: GridNode<T>[];
+    /** A list of column nodes in the table. */
+    columns: GridNode<T>[];
+    /**
+     * A set of column keys that serve as the [row
+     * header](https://www.w3.org/TR/wai-aria-1.1/#rowheader).
+     */
+    rowHeaderColumnKeys: Set<Key>;
+    /** The node that makes up the header of the table. */
+    head?: GridNode<T>;
+    /** The node that makes up the body of the table. */
+    body: GridNode<T>;
+}
+interface GridCollectionOptions {
+    showSelectionCheckboxes?: boolean;
+    showDragButtons?: boolean;
+}
+/** @private */
+export declare function buildHeaderRows<T>(keyMap: Map<Key, GridNode<T>>, columnNodes: GridNode<T>[]): GridNode<T>[];
+export declare class TableCollection<T> extends GridCollection<T> implements ITableCollection<T> {
+    headerRows: GridNode<T>[];
+    columns: GridNode<T>[];
+    rowHeaderColumnKeys: Set<Key>;
+    body: GridNode<T>;
+    _size: number;
+    constructor(nodes: Iterable<GridNode<T>>, prev?: ITableCollection<T> | null, opts?: GridCollectionOptions);
+    [Symbol.iterator](): IterableIterator<GridNode<T>>;
+    get size(): number;
+    getKeys(): IterableIterator<Key>;
+    getKeyBefore(key: Key): Key | null;
+    getKeyAfter(key: Key): Key | null;
+    getFirstKey(): Key | null;
+    getLastKey(): Key | null;
+    getItem(key: Key): GridNode<T> | null;
+    at(idx: number): GridNode<T> | null;
+    getChildren(key: Key): Iterable<GridNode<T>>;
+    getTextValue(key: Key): string;
+}
+export {};

package/dist/types/src/table/TableColumnLayout.d.ts

@@ -0,0 +1,30 @@
+import { ColumnSize } from './Column';
+import { GridNode } from '../grid/GridCollection';
+import { Key } from '@react-types/shared';
+import { ITableCollection as TableCollection } from './TableCollection';
+export interface TableColumnLayoutOptions<T> {
+    getDefaultWidth?: (column: GridNode<T>) => ColumnSize | null | undefined;
+    getDefaultMinWidth?: (column: GridNode<T>) => ColumnSize | null | undefined;
+}
+export declare class TableColumnLayout<T> {
+    getDefaultWidth: (column: GridNode<T>) => ColumnSize | null | undefined;
+    getDefaultMinWidth: (column: GridNode<T>) => ColumnSize | null | undefined;
+    columnWidths: Map<Key, number>;
+    columnMinWidths: Map<Key, number>;
+    columnMaxWidths: Map<Key, number>;
+    constructor(options: TableColumnLayoutOptions<T>);
+    /**
+     * 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>>];
+    /** 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>;
+    /** Used to make an initial Map of the uncontrolled widths based on default widths. */
+    getInitialUncontrolledWidths(uncontrolledColumns: Map<Key, GridNode<T>>): Map<Key, ColumnSize>;
+    getColumnWidth(key: Key): number;
+    getColumnMinWidth(key: Key): number;
+    getColumnMaxWidth(key: Key): number;
+    resizeColumnWidth(collection: TableCollection<T>, uncontrolledWidths: Map<Key, ColumnSize>, col: Key, width: number): Map<Key, ColumnSize>;
+    buildColumnWidths(tableWidth: number, collection: TableCollection<T>, widths: Map<Key, ColumnSize>): Map<Key, number>;
+}

package/dist/types/src/table/TableHeader.d.ts

@@ -0,0 +1,24 @@
+import { CollectionBuilderContext } from './useTableState';
+import { ColumnElement, ColumnRenderer } from './Column';
+import { PartialNode } from '../collections/types';
+import { JSX, ReactElement } from 'react';
+export interface TableHeaderProps<T> {
+    /** A list of table columns. */
+    columns?: readonly T[];
+    /**
+     * A list of `Column(s)` or a function. If the latter, a list of columns must be provided using
+     * the `columns` prop.
+     */
+    children: ColumnElement<T> | ColumnElement<T>[] | ColumnRenderer<T>;
+}
+declare function TableHeader<T>(props: TableHeaderProps<T>): ReactElement | null;
+declare namespace TableHeader {
+    var getCollectionNode: <T>(props: TableHeaderProps<T>, context: CollectionBuilderContext<T>) => Generator<PartialNode<T>, void, any>;
+}
+/**
+ * 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.
+ */
+declare let _TableHeader: <T>(props: TableHeaderProps<T>) => JSX.Element;
+export { _TableHeader as TableHeader };

package/dist/types/src/table/TableUtils.d.ts

@@ -0,0 +1,43 @@
+import { ColumnSize } from './Column';
+import { Key } from '@react-types/shared';
+export declare function isStatic(width?: ColumnSize | null): boolean;
+export declare function parseFractionalUnit(width?: ColumnSize | null): number;
+export declare function parseStaticWidth(width: number | string, tableWidth: number): number;
+export declare function getMaxWidth(maxWidth: number | string | null | undefined, tableWidth: number): number;
+export declare function getMinWidth(minWidth: number | string, tableWidth: number): number;
+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 declare function calculateColumnSizes(availableWidth: number, columns: IColumn[], changedColumns: Map<Key, ColumnSize>, getDefaultWidth?: (index: number) => ColumnSize | null | undefined, getDefaultMinWidth?: (index: number) => ColumnSize | null | undefined): number[];

package/dist/types/src/table/useTableColumnResizeState.d.ts

@@ -0,0 +1,48 @@
+import { ColumnSize } from './Column';
+import { GridNode } from '../grid/GridCollection';
+import { Key } from '@react-types/shared';
+import { TableState } from './useTableState';
+export interface TableColumnResizeStateProps<T> {
+    /**
+     * Current width of the table or table viewport that the columns
+     * should be calculated against.
+     */
+    tableWidth: number;
+    /** A function that is called to find the default width for a given column. */
+    getDefaultWidth?: (node: GridNode<T>) => ColumnSize | null | undefined;
+    /** A function that is called to find the default minWidth for a given column. */
+    getDefaultMinWidth?: (node: GridNode<T>) => ColumnSize | null | undefined;
+}
+export interface TableColumnResizeState<T> {
+    /**
+     * Called to update the state that a resize event has occurred.
+     * Returns the new widths for all columns based on the resized column.
+     */
+    updateResizedColumns: (key: Key, width: number) => Map<Key, ColumnSize>;
+    /** Callback for when onColumnResize has started. */
+    startResize: (key: Key) => void;
+    /** Callback for when onColumnResize has ended. */
+    endResize: () => void;
+    /** Gets the current width for the specified column. */
+    getColumnWidth: (key: Key) => number;
+    /** Gets the current minWidth for the specified column. */
+    getColumnMinWidth: (key: Key) => number;
+    /** Gets the current maxWidth for the specified column. */
+    getColumnMaxWidth: (key: Key) => number;
+    /** Key of the currently resizing column. */
+    resizingColumn: Key | null;
+    /** A reference to the table state. */
+    tableState: TableState<T>;
+    /** A map of the current column widths. */
+    columnWidths: Map<Key, number>;
+}
+/**
+ * Provides column width state management for a table component with column resizing support.
+ * Handles building a map of column widths calculated from the table's width and any provided column
+ * width information from the collection. In addition, it tracks the currently resizing column and
+ * provides callbacks for updating the widths upon resize operations.
+ *
+ * @param props - Props for the table.
+ * @param state - State for the table, as returned by `useTableState`.
+ */
+export declare function useTableColumnResizeState<T>(props: TableColumnResizeStateProps<T>, state: TableState<T>): TableColumnResizeState<T>;