BREAKING: rename types to be more consistent (microsoft#26304)

* BREAKING: rename types to be more consistent

* changefile

* update md

Author: ling1726

change/@fluentui-react-components-00149d0a-3413-487d-bae5-98c0ef12c515.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "BREAKING: table API naming changes",
+  "packageName": "@fluentui/react-components",
+  "email": "lingfangao@hotmail.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-table-4e0585a7-4fc5-424a-ab47-f24f4c2156b1.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "BREAKING: API naming changes",
+  "packageName": "@fluentui/react-table",
+  "email": "lingfangao@hotmail.com",
+  "dependentChangeType": "patch"
+}

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

@@ -34,8 +34,6 @@ import { CardState } from '@fluentui/react-card';
 import { CheckboxField_unstable as CheckboxField } from '@fluentui/react-checkbox';
 import { checkboxFieldClassNames } from '@fluentui/react-checkbox';
 import { CheckboxFieldProps_unstable as CheckboxFieldProps } from '@fluentui/react-checkbox';
-import { ColumnDefinition } from '@fluentui/react-table';
-import { ColumnId } from '@fluentui/react-table';
 import { Combobox } from '@fluentui/react-combobox';
 import { comboboxClassNames } from '@fluentui/react-combobox';
 import { ComboboxContextValue } from '@fluentui/react-combobox';
@@ -49,8 +47,8 @@ import { ComboboxProps } from '@fluentui/react-combobox';
 import { ComboboxProvider } from '@fluentui/react-combobox';
 import { ComboboxSlots } from '@fluentui/react-combobox';
 import { ComboboxState } from '@fluentui/react-combobox';
-import { createColumn } from '@fluentui/react-table';
-import { CreateColumnOptions } from '@fluentui/react-table';
+import { createTableColumn } from '@fluentui/react-table';
+import { CreateTableColumnOptions } from '@fluentui/react-table';
 import { DATA_OVERFLOW_ITEM } from '@fluentui/react-overflow';
 import { DATA_OVERFLOW_MENU } from '@fluentui/react-overflow';
 import { DATA_OVERFLOWING } from '@fluentui/react-overflow';
@@ -177,9 +175,6 @@ import { renderTableRow_unstable } from '@fluentui/react-table';
 import { renderTableSelectionCell_unstable } from '@fluentui/react-table';
 import { renderToolbar_unstable } from '@fluentui/react-toolbar';
 import { renderToolbarGroup_unstable } from '@fluentui/react-toolbar';
-import { RowId } from '@fluentui/react-table';
-import { RowIdContextProvider } from '@fluentui/react-table';
-import { RowState } from '@fluentui/react-table';
 import { Select } from '@fluentui/react-select';
 import { selectClassNames } from '@fluentui/react-select';
 import { SelectField_unstable as SelectField } from '@fluentui/react-select';
@@ -223,9 +218,13 @@ import { TableCellSlots } from '@fluentui/react-table';
 import { TableCellState } from '@fluentui/react-table';
 import { tableClassName } from '@fluentui/react-table';
 import { tableClassNames } from '@fluentui/react-table';
+import { TableColumnDefinition } from '@fluentui/react-table';
+import { TableColumnId } from '@fluentui/react-table';
 import { TableContextProvider } from '@fluentui/react-table';
 import { TableContextValue } from '@fluentui/react-table';
 import { TableContextValues } from '@fluentui/react-table';
+import { TableFeaturePlugin } from '@fluentui/react-table';
+import { TableFeaturesState } from '@fluentui/react-table';
 import { TableHeader } from '@fluentui/react-table';
 import { TableHeaderCell } from '@fluentui/react-table';
 import { tableHeaderCellClassName } from '@fluentui/react-table';
@@ -242,6 +241,9 @@ import { TableProps } from '@fluentui/react-table';
 import { TableRow } from '@fluentui/react-table';
 import { tableRowClassName } from '@fluentui/react-table';
 import { tableRowClassNames } from '@fluentui/react-table';
+import { TableRowData } from '@fluentui/react-table';
+import { TableRowId } from '@fluentui/react-table';
+import { TableRowIdContextProvider } from '@fluentui/react-table';
 import { TableRowProps } from '@fluentui/react-table';
 import { TableRowSlots } from '@fluentui/react-table';
 import { TableRowState } from '@fluentui/react-table';
@@ -254,7 +256,6 @@ import { TableSelectionState } from '@fluentui/react-table';
 import { TableSlots } from '@fluentui/react-table';
 import { TableSortState } from '@fluentui/react-table';
 import { TableState } from '@fluentui/react-table';
-import { TableStatePlugin } from '@fluentui/react-table';
 import { TextareaField_unstable as TextareaField } from '@fluentui/react-textarea';
 import { textareaFieldClassNames } from '@fluentui/react-textarea';
 import { TextareaFieldProps_unstable as TextareaFieldProps } from '@fluentui/react-textarea';
@@ -329,7 +330,6 @@ import { useOptionStyles_unstable } from '@fluentui/react-combobox';
 import { useOverflowMenu } from '@fluentui/react-overflow';
 import { useProgressBar_unstable } from '@fluentui/react-progress';
 import { useProgressBarStyles_unstable } from '@fluentui/react-progress';
-import { useRowIdContext } from '@fluentui/react-table';
 import { useSelect_unstable } from '@fluentui/react-select';
 import { useSelectStyles_unstable } from '@fluentui/react-select';
 import { useTable_unstable } from '@fluentui/react-table';
@@ -343,12 +343,13 @@ 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 { UseTableFeaturesOptions } 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 { useTableRowIdContext } from '@fluentui/react-table';
 import { useTableRowStyles_unstable } from '@fluentui/react-table';
 import { useTableSelection } from '@fluentui/react-table';
 import { useTableSelectionCell_unstable } from '@fluentui/react-table';
@@ -428,10 +429,6 @@ export { checkboxFieldClassNames }
 
 export { CheckboxFieldProps }
 
-export { ColumnDefinition }
-
-export { ColumnId }
-
 export { Combobox }
 
 export { comboboxClassNames }
@@ -458,9 +455,9 @@ export { ComboboxSlots }
 
 export { ComboboxState }
 
-export { createColumn }
+export { createTableColumn }
 
-export { CreateColumnOptions }
+export { CreateTableColumnOptions }
 
 export { DATA_OVERFLOW_ITEM }
 
@@ -714,12 +711,6 @@ export { renderToolbar_unstable }
 
 export { renderToolbarGroup_unstable }
 
-export { RowId }
-
-export { RowIdContextProvider }
-
-export { RowState }
-
 export { Select }
 
 export { selectClassNames }
@@ -806,12 +797,20 @@ export { tableClassName }
 
 export { tableClassNames }
 
+export { TableColumnDefinition }
+
+export { TableColumnId }
+
 export { TableContextProvider }
 
 export { TableContextValue }
 
 export { TableContextValues }
 
+export { TableFeaturePlugin }
+
+export { TableFeaturesState }
+
 export { TableHeader }
 
 export { TableHeaderCell }
@@ -844,6 +843,12 @@ export { tableRowClassName }
 
 export { tableRowClassNames }
 
+export { TableRowData }
+
+export { TableRowId }
+
+export { TableRowIdContextProvider }
+
 export { TableRowProps }
 
 export { TableRowSlots }
@@ -866,11 +871,8 @@ export { TableSlots }
 
 export { TableSortState }
 
-export { TableState as HeadlessTableState }
 export { TableState }
 
-export { TableStatePlugin }
-
 export { TextareaField }
 
 export { textareaFieldClassNames }
@@ -1019,8 +1021,6 @@ export { useProgressBar_unstable }
 
 export { useProgressBarStyles_unstable }
 
-export { useRowIdContext }
-
 export { useSelect_unstable }
 
 export { useSelectStyles_unstable }
@@ -1047,6 +1047,8 @@ export { useTableContext }
 
 export { useTableFeatures }
 
+export { UseTableFeaturesOptions }
+
 export { useTableHeader_unstable }
 
 export { useTableHeaderCell_unstable }
@@ -1055,10 +1057,10 @@ export { useTableHeaderCellStyles_unstable }
 
 export { useTableHeaderStyles_unstable }
 
-export { UseTableOptions }
-
 export { useTableRow_unstable }
 
+export { useTableRowIdContext }
+
 export { useTableRowStyles_unstable }
 
 export { useTableSelection }

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

@@ -237,7 +237,7 @@ export {
   useTableFeatures,
   useTableSelection,
   useTableSort,
-  createColumn,
+  createTableColumn,
   DataGridCell,
   dataGridCellClassNames,
   useDataGridCellStyles_unstable,
@@ -273,8 +273,8 @@ export {
   useDataGridSelectionCell_unstable,
   renderDataGridSelectionCell_unstable,
   dataGridSelectionCellClassNames,
-  RowIdContextProvider,
-  useRowIdContext,
+  TableRowIdContextProvider,
+  useTableRowIdContext,
 } from '@fluentui/react-table';
 
 export type {
@@ -308,16 +308,16 @@ export type {
   TableCellLayoutProps,
   TableCellLayoutState,
   TableCellLayoutSlots,
-  UseTableOptions,
-  TableState as HeadlessTableState,
+  UseTableFeaturesOptions,
+  TableFeaturesState,
   TableSelectionState,
   TableSortState,
-  TableStatePlugin,
-  RowState,
-  RowId,
-  ColumnDefinition,
-  ColumnId,
-  CreateColumnOptions,
+  TableFeaturePlugin,
+  TableRowData,
+  TableRowId,
+  TableColumnDefinition,
+  TableColumnId,
+  CreateTableColumnOptions,
   DataGridHeaderCellProps,
   DataGridHeaderCellSlots,
   DataGridHeaderCellState,

packages/react-components/react-data-grid-react-window/etc/react-data-grid-react-window.api.md

@@ -11,7 +11,7 @@ import type { DataGridBodySlots as DataGridBodySlots_2 } from '@fluentui/react-c
 import type { DataGridBodyState as DataGridBodyState_2 } from '@fluentui/react-components/unstable';
 import type { ForwardRefComponent } from '@fluentui/react-components';
 import * as React_2 from 'react';
-import type { RowState } from '@fluentui/react-components/unstable';
+import type { TableRowData } from '@fluentui/react-components/unstable';
 
 // @public
 export const DataGridBody: ForwardRefComponent<DataGridBodyProps>;

packages/react-components/react-data-grid-react-window/src/components/DataGridBody/DataGridBody.types.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import type {
-  RowState,
+  TableRowData,
   DataGridBodyProps as DataGridBodyPropsBase,
   DataGridBodySlots as DataGridBodySlotsBase,
   DataGridBodyState as DataGridBodyStateBase,
@@ -11,7 +11,7 @@ export type DataGridBodySlots = DataGridBodySlotsBase;
 // Use any here since we can't know the user types
 // The user is responsible for narrowing the type downstream
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-export type RowRenderFunction = (row: RowState<any>, style: React.CSSProperties) => React.ReactNode;
+export type RowRenderFunction = (row: TableRowData<any>, style: React.CSSProperties) => React.ReactNode;
 
 /**
  * DataGridBody Props

packages/react-components/react-data-grid-react-window/src/components/DataGridBody/renderDataGridBody.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import type { DataGridBodyState, DataGridBodySlots } from './DataGridBody.types';
 import { FixedSizeList as List, ListChildComponentProps } from 'react-window';
 import { getSlots } from '@fluentui/react-components';
-import { RowState, RowIdContextProvider } from '@fluentui/react-components/unstable';
+import { TableRowData, TableRowIdContextProvider } from '@fluentui/react-components/unstable';
 
 /**
  * Render the final JSX of DataGridVirtualizedBody
@@ -20,8 +20,8 @@ export const renderDataGridBody_unstable = (state: DataGridBodyState) => {
         itemCount={state.rows.length}
       >
         {({ data, index, style }: ListChildComponentProps) => {
-          const row: RowState<unknown> = data[index];
-          return <RowIdContextProvider value={row.rowId}>{state.renderRow(row, style)}</RowIdContextProvider>;
+          const row: TableRowData<unknown> = data[index];
+          return <TableRowIdContextProvider value={row.rowId}>{state.renderRow(row, style)}</TableRowIdContextProvider>;
         }}
       </List>
     </slots.root>