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

package/src/useTableColumnResizeState.ts

@@ -0,0 +1,147 @@
+/*
+ * 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 {GridNode} from '@react-types/grid';
+import {Key} from '@react-types/shared';
+import {TableColumnLayout} from './TableColumnLayout';
+import {TableState} from './useTableState';
+import {useCallback, useMemo, useState} from 'react';
+
+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 function useTableColumnResizeState<T>(props: TableColumnResizeStateProps<T>, state: TableState<T>): TableColumnResizeState<T> {
+  let {
+    getDefaultWidth,
+    getDefaultMinWidth,
+    tableWidth = 0
+  } = props;
+
+  let [resizingColumn, setResizingColumn] = useState<Key | null>(null);
+  let columnLayout = useMemo(
+    () => new TableColumnLayout({
+      getDefaultWidth,
+      getDefaultMinWidth
+    }),
+    [getDefaultWidth, getDefaultMinWidth]
+  );
+
+  let [controlledColumns, uncontrolledColumns] = useMemo(() =>
+      columnLayout.splitColumnsIntoControlledAndUncontrolled(state.collection.columns)
+  , [state.collection.columns, columnLayout]);
+
+  // uncontrolled column widths
+  let [uncontrolledWidths, setUncontrolledWidths] = useState(() =>
+    columnLayout.getInitialUncontrolledWidths(uncontrolledColumns)
+  );
+
+  // Update uncontrolled widths if the columns changed.
+  let [lastColumns, setLastColumns] = useState(state.collection.columns);
+  if (state.collection.columns !== lastColumns) {
+    if (
+      state.collection.columns.length !== lastColumns.length ||
+      state.collection.columns.some((c, i) => c.key !== lastColumns[i].key)
+    ) {
+      let newUncontrolledWidths = columnLayout.getInitialUncontrolledWidths(uncontrolledColumns);
+      setUncontrolledWidths(newUncontrolledWidths);
+    }
+    setLastColumns(state.collection.columns);
+  }
+
+  // combine columns back into one map that maintains same order as the columns
+  let colWidths = useMemo(() =>
+      columnLayout.recombineColumns(state.collection.columns, uncontrolledWidths, uncontrolledColumns, controlledColumns)
+  , [state.collection.columns, uncontrolledWidths, uncontrolledColumns, controlledColumns, columnLayout]);
+
+  let startResize = useCallback((key: Key) => {
+    setResizingColumn(key);
+  }, [setResizingColumn]);
+
+  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)]));
+    map.set(key, width);
+    setUncontrolledWidths(map);
+    return newSizes;
+  }, [uncontrolledColumns, setUncontrolledWidths, columnLayout, state.collection, uncontrolledWidths]);
+
+  let endResize = useCallback(() => {
+    setResizingColumn(null);
+  }, [setResizingColumn]);
+
+  let columnWidths = useMemo(() =>
+    columnLayout.buildColumnWidths(tableWidth, state.collection, colWidths)
+  , [tableWidth, state.collection, colWidths, columnLayout]);
+
+  return useMemo(() => ({
+    resizingColumn,
+    updateResizedColumns,
+    startResize,
+    endResize,
+    getColumnWidth: (key: Key) =>
+      columnLayout.getColumnWidth(key),
+    getColumnMinWidth: (key: Key) =>
+      columnLayout.getColumnMinWidth(key),
+    getColumnMaxWidth: (key: Key) =>
+      columnLayout.getColumnMaxWidth(key),
+    tableState: state,
+    columnWidths
+  }), [
+    columnLayout,
+    columnWidths,
+    resizingColumn,
+    updateResizedColumns,
+    startResize,
+    endResize,
+    state
+  ]);
+}

package/src/useTableState.ts

@@ -10,10 +10,11 @@
  * governing permissions and limitations under the License.
  */
 
-import {CollectionBase, MultipleSelection, Node, SelectionMode, Sortable, SortDescriptor, SortDirection} from '@react-types/shared';
 import {GridState, useGridState} from '@react-stately/grid';
-import {TableCollection as ITableCollection} from '@react-types/table';
-import {Key, useMemo} from 'react';
+import {TableCollection as ITableCollection, TableBodyProps, TableHeaderProps} from '@react-types/table';
+import {Key, Node, SelectionMode, Sortable, SortDescriptor, SortDirection} from '@react-types/shared';
+import {MultipleSelectionState, MultipleSelectionStateProps} from '@react-stately/selection';
+import {ReactElement, useCallback, useMemo, useState} from 'react';
 import {TableCollection} from './TableCollection';
 import {useCollection} from '@react-stately/collections';
 
@@ -25,18 +26,35 @@ export interface TableState<T> extends GridState<T, ITableCollection<T>> {
   /** The current sorted column and direction. */
   sortDescriptor: SortDescriptor,
   /** Calls the provided onSortChange handler with the provided column key and sort direction. */
-  sort(columnKey: Key): void
+  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. */
+  isKeyboardNavigationDisabled: boolean,
+  /** Set whether keyboard navigation is disabled, such as when the arrow keys should be handled by a component within a cell. */
+  setKeyboardNavigationDisabled: (val: boolean) => void
 }
 
 export interface CollectionBuilderContext<T> {
   showSelectionCheckboxes: boolean,
+  showDragButtons: boolean,
   selectionMode: SelectionMode,
   columns: Node<T>[]
 }
 
-export interface TableStateProps<T> extends CollectionBase<T>, MultipleSelection, Sortable {
+export interface TableStateProps<T> extends MultipleSelectionStateProps, Sortable {
+  /** The elements that make up the table. Includes the TableHeader, TableBody, Columns, and Rows. */
+  children?: [ReactElement<TableHeaderProps<T>>, ReactElement<TableBodyProps<T>>],
+  /** A list of row keys to disable. */
+  disabledKeys?: Iterable<Key>,
+  /** A pre-constructed collection to use instead of building one from items and children. */
+  collection?: ITableCollection<T>,
   /** Whether the row selection checkboxes should be displayed. */
-  showSelectionCheckboxes?: boolean
+  showSelectionCheckboxes?: boolean,
+  /** Whether the row drag button should be displayed.
+   * @private
+   */
+  showDragButtons?: boolean,
+  /** @private - do not use unless you know what you're doing. */
+  UNSAFE_selectionState?: MultipleSelectionState
 }
 
 const OPPOSITE_SORT_DIRECTION = {
@@ -48,21 +66,28 @@ const OPPOSITE_SORT_DIRECTION = {
  * Provides state management for a table component. Handles building a collection
  * of columns and rows from props. In addition, it tracks row selection and manages sort order changes.
  */
-export function useTableState<T extends object>(props: TableStateProps<T>): TableState<T>  {
-  let {selectionMode = 'none'} = props;
+export function useTableState<T extends object>(props: TableStateProps<T>): TableState<T> {
+  let [isKeyboardNavigationDisabled, setKeyboardNavigationDisabled] = useState(false);
+  let {selectionMode = 'none', showSelectionCheckboxes, showDragButtons} = props;
 
   let context = useMemo(() => ({
-    showSelectionCheckboxes: props.showSelectionCheckboxes && selectionMode !== 'none',
+    showSelectionCheckboxes: showSelectionCheckboxes && selectionMode !== 'none',
+    showDragButtons: showDragButtons,
     selectionMode,
     columns: []
-  }), [props.children, props.showSelectionCheckboxes, selectionMode]);
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }), [props.children, showSelectionCheckboxes, selectionMode, showDragButtons]);
 
-  let collection = useCollection<T, TableCollection<T>>(
+  let collection = useCollection<T, ITableCollection<T>>(
     props,
-    (nodes, prev) => new TableCollection(nodes, prev, context),
+    useCallback((nodes) => new TableCollection(nodes, null, context), [context]),
     context
   );
-  let {disabledKeys, selectionManager} = useGridState({...props, collection});
+  let {disabledKeys, selectionManager} = useGridState({
+    ...props,
+    collection,
+    disabledBehavior: props.disabledBehavior || 'selection'
+  });
 
   return {
     collection,
@@ -70,12 +95,14 @@ export function useTableState<T extends object>(props: TableStateProps<T>): Tabl
     selectionManager,
     showSelectionCheckboxes: props.showSelectionCheckboxes || false,
     sortDescriptor: props.sortDescriptor,
-    sort(columnKey: Key) {
+    isKeyboardNavigationDisabled: collection.size === 0 || isKeyboardNavigationDisabled,
+    setKeyboardNavigationDisabled,
+    sort(columnKey: Key, direction?: 'ascending' | 'descending') {
       props.onSortChange({
         column: columnKey,
-        direction: props.sortDescriptor?.column === columnKey
+        direction: direction ?? (props.sortDescriptor?.column === columnKey
           ? OPPOSITE_SORT_DIRECTION[props.sortDescriptor.direction]
-          : 'ascending'
+          : 'ascending')
       });
     }
   };

package/src/useTreeGridState.ts

@@ -0,0 +1,277 @@
+/*
+ * Copyright 2023 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 {CollectionBuilder} from '@react-stately/collections';
+import {GridNode} from '@react-types/grid';
+import {Key} from '@react-types/shared';
+import {ReactElement, useMemo} from 'react';
+import {TableCollection} from './TableCollection';
+import {tableNestedRows} from '@react-stately/flags';
+import {TableState, TableStateProps, useTableState} from './useTableState';
+import {useControlledState} from '@react-stately/utils';
+
+export interface TreeGridState<T> extends TableState<T> {
+  /** A set of keys for items that are expanded. */
+  expandedKeys: 'all' | Set<Key>,
+  /** Toggles the expanded state for a row by its key. */
+  toggleKey(key: Key): void,
+  /** The key map containing nodes representing the collection's tree grid structure. */
+  keyMap: Map<Key, GridNode<T>>,
+  /** The number of leaf columns provided by the user. */
+  userColumnCount: number
+}
+
+export interface TreeGridStateProps<T> extends Omit<TableStateProps<T>, 'collection'> {
+  /** The currently expanded keys in the collection (controlled). */
+  UNSTABLE_expandedKeys?: 'all' | Iterable<Key>,
+  /** The initial expanded keys in the collection (uncontrolled). */
+  UNSTABLE_defaultExpandedKeys?: 'all' | Iterable<Key>,
+  /** Handler that is called when items are expanded or collapsed. */
+  UNSTABLE_onExpandedChange?: (keys: Set<Key>) => any
+}
+
+/**
+ * Provides state management for a tree grid component. Handles building a collection
+ * of columns and rows from props. In addition, it tracks and manages expanded rows, row selection, and sort order changes.
+ */
+export function UNSTABLE_useTreeGridState<T extends object>(props: TreeGridStateProps<T>): TreeGridState<T> {
+  let {
+    selectionMode = 'none',
+    showSelectionCheckboxes,
+    showDragButtons,
+    UNSTABLE_expandedKeys: propExpandedKeys,
+    UNSTABLE_defaultExpandedKeys: propDefaultExpandedKeys,
+    UNSTABLE_onExpandedChange,
+    children
+  } = props;
+
+  if (!tableNestedRows()) {
+    throw new Error('Feature flag for table nested rows must be enabled to use useTreeGridState.');
+  }
+
+  let [expandedKeys, setExpandedKeys] = useControlledState(
+    propExpandedKeys ? convertExpanded(propExpandedKeys) : undefined,
+    propDefaultExpandedKeys ? convertExpanded(propDefaultExpandedKeys) : new Set(),
+    UNSTABLE_onExpandedChange
+  );
+
+  let context = useMemo(() => ({
+    showSelectionCheckboxes: showSelectionCheckboxes && selectionMode !== 'none',
+    showDragButtons: showDragButtons,
+    selectionMode,
+    columns: []
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }), [children, showSelectionCheckboxes, selectionMode, showDragButtons]);
+
+  let builder = useMemo(() => new CollectionBuilder<T>(), []);
+  let nodes = useMemo(() => builder.build({children: children as ReactElement<any>[]}, context), [builder, children, context]);
+  let treeGridCollection = useMemo(() => {
+    return generateTreeGridCollection<T>(nodes, {showSelectionCheckboxes, showDragButtons, expandedKeys});
+  }, [nodes, showSelectionCheckboxes, showDragButtons, expandedKeys]);
+
+  let onToggle = (key: Key) => {
+    setExpandedKeys(toggleKey(expandedKeys, key, treeGridCollection));
+  };
+
+  let collection = useMemo(() => {
+    return new TableCollection(treeGridCollection.tableNodes, null, context);
+  }, [context, treeGridCollection.tableNodes]);
+
+  let tableState = useTableState({...props, collection});
+  return {
+    ...tableState,
+    keyMap: treeGridCollection.keyMap,
+    userColumnCount: treeGridCollection.userColumnCount,
+    expandedKeys,
+    toggleKey: onToggle
+  };
+}
+
+function toggleKey<T>(currentExpandedKeys: 'all' | Set<Key>, key: Key, collection: TreeGridCollection<T>): Set<Key> {
+  let updatedExpandedKeys: Set<Key>;
+  if (currentExpandedKeys === 'all') {
+    updatedExpandedKeys = new Set(collection.flattenedRows.filter(row => row.props.UNSTABLE_childItems || row.props.children.length > collection.userColumnCount).map(row => row.key));
+    updatedExpandedKeys.delete(key);
+  } else {
+    updatedExpandedKeys = new Set(currentExpandedKeys);
+    if (updatedExpandedKeys.has(key)) {
+      updatedExpandedKeys.delete(key);
+    } else {
+      updatedExpandedKeys.add(key);
+    }
+  }
+
+  return updatedExpandedKeys;
+}
+
+function convertExpanded(expanded: 'all' | Iterable<Key>): 'all' | Set<Key> {
+  if (!expanded) {
+    return new Set<Key>();
+  }
+
+  return expanded === 'all'
+    ? 'all'
+    : new Set(expanded);
+}
+
+interface TreeGridCollectionOptions {
+  showSelectionCheckboxes?: boolean,
+  showDragButtons?: boolean,
+  expandedKeys: 'all' | Set<Key>
+}
+
+interface TreeGridCollection<T> {
+  keyMap: Map<Key, GridNode<T>>,
+  tableNodes: GridNode<T>[],
+  flattenedRows: GridNode<T>[],
+  userColumnCount: number
+}
+function generateTreeGridCollection<T>(nodes, opts: TreeGridCollectionOptions): TreeGridCollection<T> {
+  let {
+    expandedKeys = new Set()
+  } = opts;
+
+  let body: GridNode<T>;
+  let flattenedRows = [];
+  let columnCount = 0;
+  let userColumnCount = 0;
+  let originalColumns = [];
+  let keyMap = new Map();
+
+  if (opts?.showSelectionCheckboxes) {
+    columnCount++;
+  }
+
+  if (opts?.showDragButtons) {
+    columnCount++;
+  }
+
+  let topLevelRows = [];
+  let visit = (node: GridNode<T>) => {
+    switch (node.type) {
+      case 'body':
+        body = node;
+        keyMap.set(body.key, body);
+        break;
+      case 'column':
+        if (!node.hasChildNodes) {
+          userColumnCount++;
+        }
+        break;
+      case 'item':
+        topLevelRows.push(node);
+        return;
+    }
+
+    for (let child of node.childNodes) {
+      visit(child);
+    }
+  };
+
+  for (let node of nodes) {
+    if (node.type === 'column') {
+      originalColumns.push(node);
+    }
+    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
+  let globalRowCount = 0;
+  let visitNode = (node: GridNode<T>, i?: number) => {
+    // Clone row node and its children so modifications to the node for treegrid specific values aren't applied on the nodes provided
+    // 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 = [];
+      for (let child of node.childNodes) {
+        if (child.type === 'cell') {
+          let cellClone = {...child};
+          if (cellClone.index + 1 === columnCount) {
+            cellClone.nextKey = null;
+          }
+          childNodes.push({...cellClone});
+        }
+      }
+      let clone = {...node, childNodes: childNodes, parentKey: body.key, level: 1, index: globalRowCount++};
+      flattenedRows.push(clone);
+    }
+
+    let newProps = {};
+
+    // Assign indexOfType to cells and rows for aria-posinset
+    if (node.type !== 'placeholder' && node.type !== 'column') {
+      newProps['indexOfType'] = i;
+    }
+
+    // Use Object.assign instead of spread to preserve object reference for keyMap. Also ensures retrieving nodes
+    // via .childNodes returns the same object as the one found via keyMap look up
+    Object.assign(node, newProps);
+    keyMap.set(node.key, node);
+
+    let lastNode: GridNode<T>;
+    let rowIndex = 0;
+    for (let child of node.childNodes) {
+      if (!(child.type === 'item' && expandedKeys !== 'all' && !expandedKeys.has(node.key))) {
+        if (child.parentKey == null) {
+          // if child is a cell/expanded row/column and the parent key isn't already established by the collection, match child node to parent row
+          child.parentKey = node.key;
+        }
+
+        if (lastNode) {
+          lastNode.nextKey = child.key;
+          child.prevKey = lastNode.key;
+        } else {
+          child.prevKey = null;
+        }
+
+        if (child.type === 'item') {
+          visitNode(child, rowIndex++);
+        } else {
+          // We enforce that the cells come before rows so can just reuse cell index
+          visitNode(child, child.index);
+        }
+
+        lastNode = child;
+      }
+    }
+
+    if (lastNode) {
+      lastNode.nextKey = null;
+    }
+  };
+
+  let last: GridNode<T>;
+  topLevelRows.forEach((node: GridNode<T>, i) => {
+    visitNode(node as GridNode<T>, i);
+
+    if (last) {
+      last.nextKey = node.key;
+      node.prevKey = last.key;
+    } else {
+      node.prevKey = null;
+    }
+
+    last = node;
+  });
+
+  if (last) {
+    last.nextKey = null;
+  }
+
+  return {
+    keyMap,
+    userColumnCount,
+    flattenedRows,
+    tableNodes: [...originalColumns, {...body, childNodes: flattenedRows}]
+  };
+}