BREAKING: useTable renamed to useTableFeatures

change/@fluentui-react-components-751955cf-f7fb-477a-9ea1-537da4c2754b.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "BREAKING: rename useTable->useTableFeatures, useSelection->useTableSelection, useSort->useTableSort",
+  "packageName": "@fluentui/react-components",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-table-d05cfee5-5a24-46f8-99a4-05010ebfdc30.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "BREAKING: rename useTable->useTableFeatures, useSelection->useTableSelection, useSort->useTableSort",
+  "packageName": "@fluentui/react-table",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/react-components/react-components/etc/react-components.unstable.api.md

@@ -320,10 +320,7 @@ import { usePersonaStyles_unstable } from '@fluentui/react-persona';
 import { useProgress_unstable } from '@fluentui/react-progress';
 import { useProgressStyles_unstable } from '@fluentui/react-progress';
 import { useSelect_unstable } from '@fluentui/react-select';
-import { useSelection } from '@fluentui/react-table';
 import { useSelectStyles_unstable } from '@fluentui/react-select';
-import { useSort } from '@fluentui/react-table';
-import { useTable } from '@fluentui/react-table';
 import { useTable_unstable } from '@fluentui/react-table';
 import { useTableBody_unstable } from '@fluentui/react-table';
 import { useTableBodyStyles_unstable } from '@fluentui/react-table';
@@ -334,15 +331,18 @@ import { useTableCellLayout_unstable } from '@fluentui/react-table';
 import { useTableCellLayoutStyles_unstable } from '@fluentui/react-table';
 import { useTableCellStyles_unstable } from '@fluentui/react-table';
 import { useTableContext } from '@fluentui/react-table';
+import { useTableFeatures } from '@fluentui/react-table';
 import { useTableHeader_unstable } from '@fluentui/react-table';
 import { useTableHeaderCell_unstable } from '@fluentui/react-table';
 import { useTableHeaderCellStyles_unstable } from '@fluentui/react-table';
 import { useTableHeaderStyles_unstable } from '@fluentui/react-table';
 import { UseTableOptions } from '@fluentui/react-table';
 import { useTableRow_unstable } from '@fluentui/react-table';
 import { useTableRowStyles_unstable } from '@fluentui/react-table';
+import { useTableSelection } from '@fluentui/react-table';
 import { useTableSelectionCell_unstable } from '@fluentui/react-table';
 import { useTableSelectionCellStyles_unstable } from '@fluentui/react-table';
+import { useTableSort } from '@fluentui/react-table';
 import { useTableStyles_unstable } from '@fluentui/react-table';
 import { useToolbar_unstable } from '@fluentui/react-toolbar';
 import { useToolbarDividerStyles_unstable } from '@fluentui/react-toolbar';
@@ -981,14 +981,8 @@ export { useProgressStyles_unstable }
 
 export { useSelect_unstable }
 
-export { useSelection }
-
 export { useSelectStyles_unstable }
 
-export { useSort }
-
-export { useTable }
-
 export { useTable_unstable }
 
 export { useTableBody_unstable }
@@ -1009,6 +1003,8 @@ export { useTableCellStyles_unstable }
 
 export { useTableContext }
 
+export { useTableFeatures }
+
 export { useTableHeader_unstable }
 
 export { useTableHeaderCell_unstable }
@@ -1023,10 +1019,14 @@ export { useTableRow_unstable }
 
 export { useTableRowStyles_unstable }
 
+export { useTableSelection }
+
 export { useTableSelectionCell_unstable }
 
 export { useTableSelectionCellStyles_unstable }
 
+export { useTableSort }
+
 export { useTableStyles_unstable }
 
 export { useToolbar_unstable }

packages/react-components/react-components/src/unstable/index.ts

@@ -208,6 +208,10 @@ export {
   useTableCellLayoutStyles_unstable,
   renderTableCellLayout_unstable,
   tableCellLayoutClassNames,
+  useTableFeatures,
+  useTableSelection,
+  useTableSort,
+  createColumn,
   DataGridCell,
   dataGridCellClassNames,
   useDataGridCellStyles_unstable,
@@ -243,10 +247,6 @@ export {
   useDataGridSelectionCell_unstable,
   renderDataGridSelectionCell_unstable,
   dataGridSelectionCellClassNames,
-  useTable,
-  useSelection,
-  useSort,
-  createColumn,
 } from '@fluentui/react-table';
 
 export type {

packages/react-components/react-table/etc/react-table.api.md

@@ -133,7 +133,7 @@ export type DataGridHeaderSlots = TableHeaderSlots;
 export type DataGridHeaderState = TableHeaderState;
 
 // @public
-export type DataGridProps = TableProps & Pick<DataGridContextValue, 'items' | 'columns'> & Pick<Partial<DataGridContextValue>, 'focusMode' | 'subtleSelection' | 'selectionAppearance'> & Pick<UseSortOptions, 'sortState' | 'defaultSortState'> & Pick<UseSelectionOptions, 'defaultSelectedItems' | 'selectedItems'> & {
+export type DataGridProps = TableProps & Pick<DataGridContextValue, 'items' | 'columns'> & Pick<Partial<DataGridContextValue>, 'focusMode' | 'subtleSelection' | 'selectionAppearance'> & Pick<UseTableSortOptions, 'sortState' | 'defaultSortState'> & Pick<UseTableSelectionOptions, 'defaultSelectedItems' | 'selectedItems'> & {
     onSortChange?: (e: React_2.MouseEvent, sortState: SortState) => void;
     onSelectionChange?: (e: React_2.MouseEvent | React_2.KeyboardEvent, data: OnSelectionChangeData) => void;
     selectionMode?: SelectionMode_2;
@@ -533,15 +533,6 @@ export const useDataGridSelectionCellStyles_unstable: (state: DataGridSelectionC
 // @public
 export const useDataGridStyles_unstable: (state: DataGridState) => DataGridState;
 
-// @public (undocumented)
-export function useSelection<TItem>(options: UseSelectionOptions): (tableState: HeadlessTableState<TItem>) => HeadlessTableState<TItem>;
-
-// @public (undocumented)
-export function useSort<TItem>(options: UseSortOptions): (tableState: HeadlessTableState<TItem>) => HeadlessTableState<TItem>;
-
-// @public (undocumented)
-export function useTable<TItem>(options: UseTableOptions<TItem>, plugins?: TableStatePlugin[]): HeadlessTableState<TItem>;
-
 // @public
 export const useTable_unstable: (props: TableProps, ref: React_2.Ref<HTMLElement>) => TableState;
 
@@ -572,6 +563,9 @@ export const useTableCellStyles_unstable: (state: TableCellState) => TableCellSt
 // @public (undocumented)
 export const useTableContext: () => TableContextValue;
 
+// @public (undocumented)
+export function useTableFeatures<TItem>(options: UseTableOptions<TItem>, plugins?: TableStatePlugin[]): HeadlessTableState<TItem>;
+
 // @public
 export const useTableHeader_unstable: (props: TableHeaderProps, ref: React_2.Ref<HTMLElement>) => TableHeaderState;
 
@@ -600,12 +594,18 @@ export const useTableRow_unstable: (props: TableRowProps, ref: React_2.Ref<HTMLE
 // @public
 export const useTableRowStyles_unstable: (state: TableRowState) => TableRowState;
 
+// @public (undocumented)
+export function useTableSelection<TItem>(options: UseTableSelectionOptions): (tableState: HeadlessTableState<TItem>) => HeadlessTableState<TItem>;
+
 // @public
 export const useTableSelectionCell_unstable: (props: TableSelectionCellProps, ref: React_2.Ref<HTMLElement>) => TableSelectionCellState;
 
 // @public
 export const useTableSelectionCellStyles_unstable: (state: TableSelectionCellState) => TableSelectionCellState;
 
+// @public (undocumented)
+export function useTableSort<TItem>(options: UseTableSortOptions): (tableState: HeadlessTableState<TItem>) => HeadlessTableState<TItem>;
+
 // @public
 export const useTableStyles_unstable: (state: TableState) => TableState;
 

packages/react-components/react-table/src/components/DataGrid/DataGrid.types.ts

@@ -3,9 +3,9 @@ import type { TableContextValues, TableProps, TableSlots, TableState } from '../
 import type {
   SortState,
   TableState as HeadlessTableState,
-  UseSortOptions,
+  UseTableSortOptions,
   SelectionMode,
-  UseSelectionOptions,
+  UseTableSelectionOptions,
   OnSelectionChangeData,
 } from '../../hooks';
 import { TableRowProps } from '../TableRow/TableRow.types';
@@ -53,8 +53,8 @@ export type DataGridContextValue = HeadlessTableState<any> & {
 export type DataGridProps = TableProps &
   Pick<DataGridContextValue, 'items' | 'columns'> &
   Pick<Partial<DataGridContextValue>, 'focusMode' | 'subtleSelection' | 'selectionAppearance'> &
-  Pick<UseSortOptions, 'sortState' | 'defaultSortState'> &
-  Pick<UseSelectionOptions, 'defaultSelectedItems' | 'selectedItems'> & {
+  Pick<UseTableSortOptions, 'sortState' | 'defaultSortState'> &
+  Pick<UseTableSelectionOptions, 'defaultSelectedItems' | 'selectedItems'> & {
     onSortChange?: (e: React.MouseEvent, sortState: SortState) => void;
     onSelectionChange?: (e: React.MouseEvent | React.KeyboardEvent, data: OnSelectionChangeData) => void;
     /**

packages/react-components/react-table/src/components/DataGrid/useDataGrid.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { useArrowNavigationGroup } from '@fluentui/react-tabster';
 import type { DataGridProps, DataGridState } from './DataGrid.types';
 import { useTable_unstable } from '../Table/useTable';
-import { useTable, useSort, useSelection } from '../../hooks';
+import { useTableFeatures, useTableSort, useTableSelection } from '../../hooks';
 
 /**
  * Create the state required to render DataGrid.
@@ -32,13 +32,13 @@ export const useDataGrid_unstable = (props: DataGridProps, ref: React.Ref<HTMLEl
   const navigable = focusMode !== 'none';
   const keyboardNavAttr = useArrowNavigationGroup({ axis: 'grid' });
 
-  const tableState = useTable({ items, columns }, [
-    useSort({
+  const tableState = useTableFeatures({ items, columns }, [
+    useTableSort({
       defaultSortState,
       sortState,
       onSortChange,
     }),
-    useSelection({
+    useTableSelection({
       defaultSelectedItems,
       selectedItems,
       onSelectionChange,

packages/react-components/react-table/src/hooks/index.ts

@@ -1,5 +1,5 @@
 export * from './types';
-export * from './useTable';
-export * from './useSort';
-export * from './useSelection';
+export * from './useTableFeatures';
+export * from './useTableSort';
+export * from './useTableSelection';
 export * from './createColumn';

packages/react-components/react-table/src/hooks/types.ts

@@ -133,7 +133,7 @@ export interface TableState<TItem> extends Pick<UseTableOptions<TItem>, 'items'
   columns: ColumnDefinition<TItem>[];
 }
 
-export interface UseSortOptions {
+export interface UseTableSortOptions {
   /**
    * Used to control sorting
    */
@@ -148,7 +148,7 @@ export interface UseSortOptions {
   onSortChange?(e: React.SyntheticEvent, state: SortState): void;
 }
 
-export interface UseSelectionOptions {
+export interface UseTableSelectionOptions {
   /**
    * Can be multi or single select
    */

packages/react-components/react-table/src/hooks/useTable.test.ts → packages/react-components/react-table/src/hooks/useTableFeatures.test.ts

@@ -1,18 +1,18 @@
 import { renderHook } from '@testing-library/react-hooks';
 import { createColumn } from './createColumn';
-import { defaultTableSelectionState, useSelection } from './useSelection';
-import { defaultTableSortState, useSort } from './useSort';
-import { useTable } from './useTable';
+import { defaultTableSelectionState, useTableSelection } from './useTableSelection';
+import { defaultTableSortState, useTableSort } from './useTableSort';
+import { useTableFeatures } from './useTableFeatures';
 
-describe('useTable', () => {
+describe('useTableFeatures', () => {
   it('should return sort state', () => {
     const { result } = renderHook(() =>
-      useTable(
+      useTableFeatures(
         {
           columns: [createColumn({ columnId: 1 })],
           items: [{}, {}, {}],
         },
-        [useSort({})],
+        [useTableSort({})],
       ),
     );
 
@@ -31,12 +31,12 @@ describe('useTable', () => {
 
   it('should return selection state', () => {
     const { result } = renderHook(() =>
-      useTable(
+      useTableFeatures(
         {
           columns: [createColumn({ columnId: 1 })],
           items: [{}, {}, {}],
         },
-        [useSelection({ selectionMode: 'multiselect' })],
+        [useTableSelection({ selectionMode: 'multiselect' })],
       ),
     );
 
@@ -56,7 +56,7 @@ describe('useTable', () => {
   describe('getRows', () => {
     it('should enahnce rows', () => {
       const { result } = renderHook(() =>
-        useTable({
+        useTableFeatures({
           columns: [createColumn({ columnId: 1 })],
           items: [{}, {}, {}],
         }),
@@ -90,7 +90,7 @@ describe('useTable', () => {
 
     it('should use custom rowId', () => {
       const { result } = renderHook(() =>
-        useTable({
+        useTableFeatures({
           columns: [createColumn({ columnId: 1 })],
           items: [{ value: 'a' }, { value: 'b' }, { value: 'c' }],
           getRowId: item => item.value,
@@ -103,7 +103,7 @@ describe('useTable', () => {
 
     it('should return original items', () => {
       const { result } = renderHook(() =>
-        useTable({
+        useTableFeatures({
           columns: [createColumn({ columnId: 1 })],
           items: [{ value: 1 }, { value: 2 }, { value: 3 }],
         }),

packages/react-components/react-table/src/hooks/useTable.ts → packages/react-components/react-table/src/hooks/useTableFeatures.ts

@@ -1,6 +1,6 @@
 import type { UseTableOptions, TableState, RowState, RowEnhancer, TableStatePlugin, TableSortState } from './types';
-import { defaultTableSelectionState } from './useSelection';
-import { defaultTableSortState } from './useSort';
+import { defaultTableSelectionState } from './useTableSelection';
+import { defaultTableSortState } from './useTableSort';
 
 const defaultRowEnhancer: RowEnhancer<unknown, RowState<unknown>> = row => row;
 
@@ -13,7 +13,10 @@ export const defaultTableState: TableState<unknown> = {
   columns: [],
 };
 
-export function useTable<TItem>(options: UseTableOptions<TItem>, plugins: TableStatePlugin[] = []): TableState<TItem> {
+export function useTableFeatures<TItem>(
+  options: UseTableOptions<TItem>,
+  plugins: TableStatePlugin[] = [],
+): TableState<TItem> {
   const { items, getRowId, columns } = options;
 
   const getRows = <TRowState extends RowState<TItem>>(