@react-stately/table 3.11.3-nightly.4252 → 3.11.3-nightly.4266

package/src/TableCollection.ts

@@ -9,11 +9,12 @@
  * 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 {TableCollection as ITableCollection} from '@react-types/table';
-import {Key} from 'react';
+import {Key} from '@react-types/shared';
 
 interface GridCollectionOptions {
   showSelectionCheckboxes?: boolean,

package/src/TableColumnLayout.ts

@@ -19,7 +19,7 @@ import {
 } from './TableUtils';
 import {ColumnSize, TableCollection} from '@react-types/table';
 import {GridNode} from '@react-types/grid';
-import {Key} from 'react';
+import {Key} from '@react-types/shared';
 
 export interface TableColumnLayoutOptions<T> {
   getDefaultWidth?: (column: GridNode<T>) => ColumnSize | null | undefined,

package/src/TableHeader.ts

@@ -55,5 +55,5 @@ TableHeader.getCollectionNode = function* getCollectionNode<T>(props: TableHeade
  * 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;
+let _TableHeader = TableHeader as <T>(props: TableHeaderProps<T>) => React.JSX.Element;
 export {_TableHeader as TableHeader};

package/src/TableUtils.ts

@@ -11,7 +11,7 @@
  */
 
 import {ColumnSize} from '@react-types/table';
-import {Key} from 'react';
+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 {

package/src/useTableColumnResizeState.ts

@@ -12,9 +12,10 @@
 
 import {ColumnSize} from '@react-types/table';
 import {GridNode} from '@react-types/grid';
-import {Key, useCallback, useMemo, useState} from 'react';
+import {Key} from '@react-types/shared';
 import {TableColumnLayout} from './TableColumnLayout';
 import {TableState} from './useTableState';
+import {useCallback, useMemo, useState} from 'react';
 
 export interface TableColumnResizeStateProps<T> {
   /**
@@ -80,6 +81,20 @@ export function useTableColumnResizeState<T>(props: TableColumnResizeStateProps<
   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)

package/src/useTableState.ts

@@ -12,9 +12,9 @@
 
 import {GridState, useGridState} from '@react-stately/grid';
 import {TableCollection as ITableCollection, TableBodyProps, TableHeaderProps} from '@react-types/table';
-import {Key, ReactElement, useCallback, useMemo, useState} from 'react';
+import {Key, Node, SelectionMode, Sortable, SortDescriptor, SortDirection} from '@react-types/shared';
 import {MultipleSelectionStateProps} from '@react-stately/selection';
-import {Node, SelectionMode, Sortable, SortDescriptor, SortDirection} from '@react-types/shared';
+import {ReactElement, useCallback, useMemo, useState} from 'react';
 import {TableCollection} from './TableCollection';
 import {useCollection} from '@react-stately/collections';
 

package/src/useTreeGridState.ts

@@ -12,7 +12,8 @@
 
 import {CollectionBuilder} from '@react-stately/collections';
 import {GridNode} from '@react-types/grid';
-import {Key, ReactElement, useMemo} from 'react';
+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';