From 955627974439222715a03e5f6ac31efa31daa828 Mon Sep 17 00:00:00 2001 From: Lingfan Gao Date: Mon, 28 Nov 2022 09:53:39 +0100 Subject: [PATCH 1/4] BREAKING: `useTable` renamed to `useTableFeatures` In order to avoid future conflict with the component hook `useTable_unstable`. The headless state `useTable` hook has been renamed to `useTableFeatures`. --- .../etc/react-components.unstable.api.md | 6 +++--- .../react-components/src/unstable/index.ts | 2 +- .../react-table/etc/react-table.api.md | 6 +++--- .../src/components/DataGrid/useDataGrid.ts | 4 ++-- .../react-table/src/hooks/index.ts | 2 +- .../{useTable.test.ts => useTableFeatures.test.ts} | 14 +++++++------- .../src/hooks/{useTable.ts => useTableFeatures.ts} | 5 ++++- packages/react-components/react-table/src/index.ts | 2 +- .../react-table/stories/Table/DataGrid.stories.tsx | 6 +++--- .../stories/Table/MultipleSelect.stories.tsx | 7 ++++--- .../Table/MultipleSelectControlled.stories.tsx | 4 ++-- .../stories/Table/SingleSelect.stories.tsx | 4 ++-- .../Table/SingleSelectControlled.stories.tsx | 7 ++++--- .../react-table/stories/Table/Sort.stories.tsx | 6 +++--- .../stories/Table/SortControlled.stories.tsx | 4 ++-- .../stories/Table/SubtleSelection.stories.tsx | 4 ++-- .../react-table/stories/Table/TableDescription.md | 7 ++++++- 17 files changed, 50 insertions(+), 40 deletions(-) rename packages/react-components/react-table/src/hooks/{useTable.test.ts => useTableFeatures.test.ts} (93%) rename packages/react-components/react-table/src/hooks/{useTable.ts => useTableFeatures.ts} (88%) diff --git a/packages/react-components/react-components/etc/react-components.unstable.api.md b/packages/react-components/react-components/etc/react-components.unstable.api.md index 306b04cb2acb5..91e9507f04c8c 100644 --- a/packages/react-components/react-components/etc/react-components.unstable.api.md +++ b/packages/react-components/react-components/etc/react-components.unstable.api.md @@ -262,7 +262,6 @@ 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'; @@ -273,6 +272,7 @@ 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'; @@ -804,8 +804,6 @@ export { useSelectStyles_unstable } export { useSort } -export { useTable } - export { useTable_unstable } export { useTableBody_unstable } @@ -826,6 +824,8 @@ export { useTableCellStyles_unstable } export { useTableContext } +export { useTableFeatures } + export { useTableHeader_unstable } export { useTableHeaderCell_unstable } diff --git a/packages/react-components/react-components/src/unstable/index.ts b/packages/react-components/react-components/src/unstable/index.ts index 524a4a2b4f988..5c5ae4f083177 100644 --- a/packages/react-components/react-components/src/unstable/index.ts +++ b/packages/react-components/react-components/src/unstable/index.ts @@ -208,7 +208,7 @@ export { useTableCellLayoutStyles_unstable, renderTableCellLayout_unstable, tableCellLayoutClassNames, - useTable, + useTableFeatures, useSelection, useSort, createColumn, diff --git a/packages/react-components/react-table/etc/react-table.api.md b/packages/react-components/react-table/etc/react-table.api.md index d790bbc279786..0dcc2dcc73aa6 100644 --- a/packages/react-components/react-table/etc/react-table.api.md +++ b/packages/react-components/react-table/etc/react-table.api.md @@ -539,9 +539,6 @@ export function useSelection(options: UseSelectionOptions): (tableState: // @public (undocumented) export function useSort(options: UseSortOptions): (tableState: HeadlessTableState) => HeadlessTableState; -// @public (undocumented) -export function useTable(options: UseTableOptions, plugins?: TableStatePlugin[]): HeadlessTableState; - // @public export const useTable_unstable: (props: TableProps, ref: React_2.Ref) => TableState; @@ -572,6 +569,9 @@ export const useTableCellStyles_unstable: (state: TableCellState) => TableCellSt // @public (undocumented) export const useTableContext: () => TableContextValue; +// @public (undocumented) +export function useTableFeatures(options: UseTableOptions, plugins?: TableStatePlugin[]): HeadlessTableState; + // @public export const useTableHeader_unstable: (props: TableHeaderProps, ref: React_2.Ref) => TableHeaderState; diff --git a/packages/react-components/react-table/src/components/DataGrid/useDataGrid.ts b/packages/react-components/react-table/src/components/DataGrid/useDataGrid.ts index 35f85feffec0d..95eb71cdf9375 100644 --- a/packages/react-components/react-table/src/components/DataGrid/useDataGrid.ts +++ b/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, useSort, useSelection } from '../../hooks'; /** * Create the state required to render DataGrid. @@ -32,7 +32,7 @@ export const useDataGrid_unstable = (props: DataGridProps, ref: React.Ref { +describe('useTableFeatures', () => { it('should return sort state', () => { const { result } = renderHook(() => - useTable( + useTableFeatures( { columns: [createColumn({ columnId: 1 })], items: [{}, {}, {}], @@ -31,7 +31,7 @@ describe('useTable', () => { it('should return selection state', () => { const { result } = renderHook(() => - useTable( + useTableFeatures( { columns: [createColumn({ columnId: 1 })], items: [{}, {}, {}], @@ -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 }], }), diff --git a/packages/react-components/react-table/src/hooks/useTable.ts b/packages/react-components/react-table/src/hooks/useTableFeatures.ts similarity index 88% rename from packages/react-components/react-table/src/hooks/useTable.ts rename to packages/react-components/react-table/src/hooks/useTableFeatures.ts index 8347a3b067822..305943e9a1972 100644 --- a/packages/react-components/react-table/src/hooks/useTable.ts +++ b/packages/react-components/react-table/src/hooks/useTableFeatures.ts @@ -13,7 +13,10 @@ export const defaultTableState: TableState = { columns: [], }; -export function useTable(options: UseTableOptions, plugins: TableStatePlugin[] = []): TableState { +export function useTableFeatures( + options: UseTableOptions, + plugins: TableStatePlugin[] = [], +): TableState { const { items, getRowId, columns } = options; const getRows = >( diff --git a/packages/react-components/react-table/src/index.ts b/packages/react-components/react-table/src/index.ts index f2aaa2844a794..58976814a010f 100644 --- a/packages/react-components/react-table/src/index.ts +++ b/packages/react-components/react-table/src/index.ts @@ -1,4 +1,4 @@ -export { useTable, useSelection, useSort, createColumn } from './hooks'; +export { useTableFeatures, useSelection, useSort, createColumn } from './hooks'; export type { UseTableOptions, TableState as HeadlessTableState, diff --git a/packages/react-components/react-table/stories/Table/DataGrid.stories.tsx b/packages/react-components/react-table/stories/Table/DataGrid.stories.tsx index a59145151ae63..1668c35f73615 100644 --- a/packages/react-components/react-table/stories/Table/DataGrid.stories.tsx +++ b/packages/react-components/react-table/stories/Table/DataGrid.stories.tsx @@ -18,7 +18,7 @@ import { TableHeaderCell, TableSelectionCell, TableCellLayout, - useTable, + useTableFeatures, ColumnDefinition, useSelection, useSort, @@ -127,7 +127,7 @@ export const DataGrid = () => { getRows, selection: { allRowsSelected, someRowsSelected, toggleAllRows, toggleRow, isRowSelected }, sort: { getSortDirection, toggleColumnSort, sort }, - } = useTable( + } = useTableFeatures( { columns, items, @@ -217,7 +217,7 @@ DataGrid.parameters = { docs: { description: { story: [ - 'The `DataGrid` component is simply a composition of hook and primitive `Table` components', + 'The `DataGrid` component is a composition of the `useTableFeatures` hook and primitive `Table` components', 'along with some convenience features such as accessible markup and event handlers.', 'Any feature of the `DataGrid` is achievable with the primitive components and hook', ].join('\n'), diff --git a/packages/react-components/react-table/stories/Table/MultipleSelect.stories.tsx b/packages/react-components/react-table/stories/Table/MultipleSelect.stories.tsx index dccf74ca5839b..65d53b5f141ec 100644 --- a/packages/react-components/react-table/stories/Table/MultipleSelect.stories.tsx +++ b/packages/react-components/react-table/stories/Table/MultipleSelect.stories.tsx @@ -18,7 +18,7 @@ import { TableHeaderCell, TableSelectionCell, TableCellLayout, - useTable, + useTableFeatures, ColumnDefinition, useSelection, createColumn, @@ -112,7 +112,7 @@ export const MultipleSelect = () => { const { getRows, selection: { allRowsSelected, someRowsSelected, toggleAllRows, toggleRow, isRowSelected }, - } = useTable( + } = useTableFeatures( { columns, items, @@ -193,7 +193,8 @@ MultipleSelect.parameters = { description: { story: [ 'Selection can be achieved easily by combining the `TableSelectionCell` component along with', - 'other primitive components. The hook can handle state management for selection, although its use is not', + 'other primitive components. `useTableFeatures` can handle state management for selection,', + 'although its use is not', 'necessary if users already have their own state management.', ].join('\n'), }, diff --git a/packages/react-components/react-table/stories/Table/MultipleSelectControlled.stories.tsx b/packages/react-components/react-table/stories/Table/MultipleSelectControlled.stories.tsx index 1a27b55abf1d5..2f59b8e7220a4 100644 --- a/packages/react-components/react-table/stories/Table/MultipleSelectControlled.stories.tsx +++ b/packages/react-components/react-table/stories/Table/MultipleSelectControlled.stories.tsx @@ -18,7 +18,7 @@ import { TableHeaderCell, TableSelectionCell, TableCellLayout, - useTable, + useTableFeatures, ColumnDefinition, RowId, useSelection, @@ -117,7 +117,7 @@ export const MultipleSelectControlled = () => { const { getRows, selection: { allRowsSelected, someRowsSelected, toggleAllRows, toggleRow, isRowSelected }, - } = useTable( + } = useTableFeatures( { columns, items, diff --git a/packages/react-components/react-table/stories/Table/SingleSelect.stories.tsx b/packages/react-components/react-table/stories/Table/SingleSelect.stories.tsx index c010b8ac60d11..0d4778ff35e1a 100644 --- a/packages/react-components/react-table/stories/Table/SingleSelect.stories.tsx +++ b/packages/react-components/react-table/stories/Table/SingleSelect.stories.tsx @@ -17,7 +17,7 @@ import { TableHeader, TableHeaderCell, TableSelectionCell, - useTable, + useTableFeatures, ColumnDefinition, useSelection, TableCellLayout, @@ -112,7 +112,7 @@ export const SingleSelect = () => { const { getRows, selection: { toggleRow, isRowSelected }, - } = useTable( + } = useTableFeatures( { columns, items, diff --git a/packages/react-components/react-table/stories/Table/SingleSelectControlled.stories.tsx b/packages/react-components/react-table/stories/Table/SingleSelectControlled.stories.tsx index 759fdcad48d19..5c736a255a2f0 100644 --- a/packages/react-components/react-table/stories/Table/SingleSelectControlled.stories.tsx +++ b/packages/react-components/react-table/stories/Table/SingleSelectControlled.stories.tsx @@ -17,7 +17,7 @@ import { TableHeader, TableHeaderCell, TableSelectionCell, - useTable, + useTableFeatures, ColumnDefinition, RowId, useSelection, @@ -116,7 +116,7 @@ export const SingleSelectControlled = () => { const { getRows, selection: { toggleRow, isRowSelected }, - } = useTable( + } = useTableFeatures( { columns, items, @@ -192,7 +192,8 @@ SingleSelectControlled.parameters = { docs: { description: { story: [ - 'By default our hook is uncontrolled. However, it is possible to control selection features with external', + 'By default the `useTableFeatures` hook is uncontrolled. ', + 'However, it is possible to control selection features with external', 'user state.', ].join('\n'), }, diff --git a/packages/react-components/react-table/stories/Table/Sort.stories.tsx b/packages/react-components/react-table/stories/Table/Sort.stories.tsx index 86116e587ac3e..d52c6aabbd681 100644 --- a/packages/react-components/react-table/stories/Table/Sort.stories.tsx +++ b/packages/react-components/react-table/stories/Table/Sort.stories.tsx @@ -16,7 +16,7 @@ import { Table, TableHeader, TableHeaderCell, - useTable, + useTableFeatures, ColumnDefinition, ColumnId, useSort, @@ -124,7 +124,7 @@ export const Sort = () => { const { getRows, sort: { getSortDirection, toggleColumnSort, sort }, - } = useTable( + } = useTableFeatures( { columns, items, @@ -185,7 +185,7 @@ Sort.parameters = { story: [ 'Using the `sortable` prop will configure all header cells to be buttons and add extra styles.', 'The `TableHeaderCell` component accepts a `sortDirection` prop that will indicate whether the', - 'header is sorted. Handling the sort of data and column state is handled by our hook.', + 'header is sorted. Handling the sort of data and column state is handled by `useTableFeatures`.', ].join('\n'), }, }, diff --git a/packages/react-components/react-table/stories/Table/SortControlled.stories.tsx b/packages/react-components/react-table/stories/Table/SortControlled.stories.tsx index 55be1a3560f43..4ddcfbca5ea28 100644 --- a/packages/react-components/react-table/stories/Table/SortControlled.stories.tsx +++ b/packages/react-components/react-table/stories/Table/SortControlled.stories.tsx @@ -16,7 +16,7 @@ import { Table, TableHeader, TableHeaderCell, - useTable, + useTableFeatures, ColumnDefinition, ColumnId, useSort, @@ -132,7 +132,7 @@ export const SortControlled = () => { const { getRows, sort: { getSortDirection, toggleColumnSort, sort }, - } = useTable( + } = useTableFeatures( { columns, items, diff --git a/packages/react-components/react-table/stories/Table/SubtleSelection.stories.tsx b/packages/react-components/react-table/stories/Table/SubtleSelection.stories.tsx index 92b3a51d4fe7c..1c08d03522f12 100644 --- a/packages/react-components/react-table/stories/Table/SubtleSelection.stories.tsx +++ b/packages/react-components/react-table/stories/Table/SubtleSelection.stories.tsx @@ -18,7 +18,7 @@ import { TableHeaderCell, TableSelectionCell, TableCellLayout, - useTable, + useTableFeatures, ColumnDefinition, useSelection, createColumn, @@ -112,7 +112,7 @@ export const SubtleSelection = () => { const { getRows, selection: { allRowsSelected, someRowsSelected, toggleAllRows, toggleRow, isRowSelected }, - } = useTable( + } = useTableFeatures( { columns, items, diff --git a/packages/react-components/react-table/stories/Table/TableDescription.md b/packages/react-components/react-table/stories/Table/TableDescription.md index 4c0a261989ba1..fb3d3019a859b 100644 --- a/packages/react-components/react-table/stories/Table/TableDescription.md +++ b/packages/react-components/react-table/stories/Table/TableDescription.md @@ -17,5 +17,10 @@ > from first class Microsoft design and accessibility support. A Table displays sets of two-dimensional data. The primitive components can be fully customized to support different -feature sets. The library provides a default hook that handles the business logic and state management of common +feature sets. The library provides a default `useTableFeatures` hook that handles the business logic and state management of common features. There is no obligation to use our hook with these components, we've created it for convenience. + +The `useTableFeatures` hook was designed with feature composition in mind. This means that are composed using +plugins hooks such as `useSort` and `useSelection` as a part of `useTableFeatures`. This means +that as the feature set expands, users will not need to pay the bundle size price for features that they do not intend +to use. Please consult the usage examples below for more details. From 5b67828f862bb0d042d8f2bcfe1e0b131faf7cf8 Mon Sep 17 00:00:00 2001 From: Lingfan Gao Date: Mon, 28 Nov 2022 09:58:05 +0100 Subject: [PATCH 2/4] changefiles --- ...ct-components-751955cf-f7fb-477a-9ea1-537da4c2754b.json | 7 +++++++ ...i-react-table-d05cfee5-5a24-46f8-99a4-05010ebfdc30.json | 7 +++++++ 2 files changed, 14 insertions(+) create mode 100644 change/@fluentui-react-components-751955cf-f7fb-477a-9ea1-537da4c2754b.json create mode 100644 change/@fluentui-react-table-d05cfee5-5a24-46f8-99a4-05010ebfdc30.json diff --git a/change/@fluentui-react-components-751955cf-f7fb-477a-9ea1-537da4c2754b.json b/change/@fluentui-react-components-751955cf-f7fb-477a-9ea1-537da4c2754b.json new file mode 100644 index 0000000000000..a6f135d4985fd --- /dev/null +++ b/change/@fluentui-react-components-751955cf-f7fb-477a-9ea1-537da4c2754b.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "BREAKING: `useTable` renamed to `useTableFeatures`", + "packageName": "@fluentui/react-components", + "email": "lingfangao@hotmail.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-table-d05cfee5-5a24-46f8-99a4-05010ebfdc30.json b/change/@fluentui-react-table-d05cfee5-5a24-46f8-99a4-05010ebfdc30.json new file mode 100644 index 0000000000000..53c07663ae8d8 --- /dev/null +++ b/change/@fluentui-react-table-d05cfee5-5a24-46f8-99a4-05010ebfdc30.json @@ -0,0 +1,7 @@ +{ + "type": "prerelease", + "comment": "BREAKING: `useTable` renamed to `useTableFeatures`", + "packageName": "@fluentui/react-table", + "email": "lingfangao@hotmail.com", + "dependentChangeType": "patch" +} From 41c2b49c48a8d347293d91235ca15b0ef5837a43 Mon Sep 17 00:00:00 2001 From: Lingfan Gao Date: Tue, 29 Nov 2022 10:09:55 +0100 Subject: [PATCH 3/4] rename `useSelection` and `useSort` hooks --- .../etc/react-components.unstable.api.md | 12 ++-- .../react-components/src/unstable/index.ts | 4 +- .../react-table/etc/react-table.api.md | 14 ++-- .../src/components/DataGrid/DataGrid.types.ts | 8 +-- .../src/components/DataGrid/useDataGrid.ts | 6 +- .../react-table/src/hooks/index.ts | 4 +- .../react-table/src/hooks/types.ts | 4 +- .../src/hooks/useTableFeatures.test.ts | 8 +-- .../react-table/src/hooks/useTableFeatures.ts | 4 +- ...tion.test.ts => useTableSelection.test.ts} | 72 ++++++++++--------- .../{useSelection.ts => useTableSelection.ts} | 10 +-- .../{useSort.test.ts => useTableSort.test.ts} | 26 +++---- .../src/hooks/{useSort.ts => useTableSort.ts} | 11 +-- .../react-components/react-table/src/index.ts | 2 +- .../stories/Table/DataGrid.stories.tsx | 8 +-- .../stories/Table/MultipleSelect.stories.tsx | 4 +- .../MultipleSelectControlled.stories.tsx | 4 +- .../stories/Table/SingleSelect.stories.tsx | 4 +- .../Table/SingleSelectControlled.stories.tsx | 4 +- .../stories/Table/Sort.stories.tsx | 4 +- .../stories/Table/SortControlled.stories.tsx | 4 +- .../stories/Table/SubtleSelection.stories.tsx | 4 +- .../stories/Table/TableDescription.md | 2 +- 23 files changed, 117 insertions(+), 106 deletions(-) rename packages/react-components/react-table/src/hooks/{useSelection.test.ts => useTableSelection.test.ts} (82%) rename packages/react-components/react-table/src/hooks/{useSelection.ts => useTableSelection.ts} (88%) rename packages/react-components/react-table/src/hooks/{useSort.test.ts => useTableSort.test.ts} (85%) rename packages/react-components/react-table/src/hooks/{useSort.ts => useTableSort.ts} (88%) diff --git a/packages/react-components/react-components/etc/react-components.unstable.api.md b/packages/react-components/react-components/etc/react-components.unstable.api.md index 91e9507f04c8c..27bf93949b61f 100644 --- a/packages/react-components/react-components/etc/react-components.unstable.api.md +++ b/packages/react-components/react-components/etc/react-components.unstable.api.md @@ -259,9 +259,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_unstable } from '@fluentui/react-table'; import { useTableBody_unstable } from '@fluentui/react-table'; import { useTableBodyStyles_unstable } from '@fluentui/react-table'; @@ -280,8 +278,10 @@ 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'; @@ -798,12 +798,8 @@ export { useProgressStyles_unstable } export { useSelect_unstable } -export { useSelection } - export { useSelectStyles_unstable } -export { useSort } - export { useTable_unstable } export { useTableBody_unstable } @@ -840,10 +836,14 @@ export { useTableRow_unstable } export { useTableRowStyles_unstable } +export { useTableSelection } + export { useTableSelectionCell_unstable } export { useTableSelectionCellStyles_unstable } +export { useTableSort } + export { useTableStyles_unstable } export { useToolbar_unstable } diff --git a/packages/react-components/react-components/src/unstable/index.ts b/packages/react-components/react-components/src/unstable/index.ts index 5c5ae4f083177..ea76a280435c5 100644 --- a/packages/react-components/react-components/src/unstable/index.ts +++ b/packages/react-components/react-components/src/unstable/index.ts @@ -209,8 +209,8 @@ export { renderTableCellLayout_unstable, tableCellLayoutClassNames, useTableFeatures, - useSelection, - useSort, + useTableSelection, + useTableSort, createColumn, } from '@fluentui/react-table'; diff --git a/packages/react-components/react-table/etc/react-table.api.md b/packages/react-components/react-table/etc/react-table.api.md index 0dcc2dcc73aa6..8879d6fa16025 100644 --- a/packages/react-components/react-table/etc/react-table.api.md +++ b/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 & Pick, 'focusMode' | 'subtleSelection' | 'selectionAppearance'> & Pick & Pick & { +export type DataGridProps = TableProps & Pick & Pick, 'focusMode' | 'subtleSelection' | 'selectionAppearance'> & Pick & Pick & { onSortChange?: (e: React_2.MouseEvent, sortState: SortState) => void; onSelectionChange?: (e: React_2.MouseEvent | React_2.KeyboardEvent, data: OnSelectionChangeData) => void; selectionMode?: SelectionMode_2; @@ -533,12 +533,6 @@ export const useDataGridSelectionCellStyles_unstable: (state: DataGridSelectionC // @public export const useDataGridStyles_unstable: (state: DataGridState) => DataGridState; -// @public (undocumented) -export function useSelection(options: UseSelectionOptions): (tableState: HeadlessTableState) => HeadlessTableState; - -// @public (undocumented) -export function useSort(options: UseSortOptions): (tableState: HeadlessTableState) => HeadlessTableState; - // @public export const useTable_unstable: (props: TableProps, ref: React_2.Ref) => TableState; @@ -600,12 +594,18 @@ export const useTableRow_unstable: (props: TableRowProps, ref: React_2.Ref TableRowState; +// @public (undocumented) +export function useTableSelection(options: UseTableSelectionOptions): (tableState: HeadlessTableState) => HeadlessTableState; + // @public export const useTableSelectionCell_unstable: (props: TableSelectionCellProps, ref: React_2.Ref) => TableSelectionCellState; // @public export const useTableSelectionCellStyles_unstable: (state: TableSelectionCellState) => TableSelectionCellState; +// @public (undocumented) +export function useTableSort(options: UseTableSortOptions): (tableState: HeadlessTableState) => HeadlessTableState; + // @public export const useTableStyles_unstable: (state: TableState) => TableState; diff --git a/packages/react-components/react-table/src/components/DataGrid/DataGrid.types.ts b/packages/react-components/react-table/src/components/DataGrid/DataGrid.types.ts index 10ea38fdda965..870686c44f1fe 100644 --- a/packages/react-components/react-table/src/components/DataGrid/DataGrid.types.ts +++ b/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 & { export type DataGridProps = TableProps & Pick & Pick, 'focusMode' | 'subtleSelection' | 'selectionAppearance'> & - Pick & - Pick & { + Pick & + Pick & { onSortChange?: (e: React.MouseEvent, sortState: SortState) => void; onSelectionChange?: (e: React.MouseEvent | React.KeyboardEvent, data: OnSelectionChangeData) => void; /** diff --git a/packages/react-components/react-table/src/components/DataGrid/useDataGrid.ts b/packages/react-components/react-table/src/components/DataGrid/useDataGrid.ts index 95eb71cdf9375..44c7e2febe4a5 100644 --- a/packages/react-components/react-table/src/components/DataGrid/useDataGrid.ts +++ b/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 { useTableFeatures, useSort, useSelection } from '../../hooks'; +import { useTableFeatures, useTableSort, useTableSelection } from '../../hooks'; /** * Create the state required to render DataGrid. @@ -33,12 +33,12 @@ export const useDataGrid_unstable = (props: DataGridProps, ref: React.Ref extends Pick, 'items' columns: ColumnDefinition[]; } -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 */ diff --git a/packages/react-components/react-table/src/hooks/useTableFeatures.test.ts b/packages/react-components/react-table/src/hooks/useTableFeatures.test.ts index 3883054c0c4eb..cbd61bfd9ac55 100644 --- a/packages/react-components/react-table/src/hooks/useTableFeatures.test.ts +++ b/packages/react-components/react-table/src/hooks/useTableFeatures.test.ts @@ -1,7 +1,7 @@ import { renderHook } from '@testing-library/react-hooks'; import { createColumn } from './createColumn'; -import { defaultTableSelectionState, useSelection } from './useSelection'; -import { defaultTableSortState, useSort } from './useSort'; +import { defaultTableSelectionState, useTableSelection } from './useTableSelection'; +import { defaultTableSortState, useTableSort } from './useTableSort'; import { useTableFeatures } from './useTableFeatures'; describe('useTableFeatures', () => { @@ -12,7 +12,7 @@ describe('useTableFeatures', () => { columns: [createColumn({ columnId: 1 })], items: [{}, {}, {}], }, - [useSort({})], + [useTableSort({})], ), ); @@ -36,7 +36,7 @@ describe('useTableFeatures', () => { columns: [createColumn({ columnId: 1 })], items: [{}, {}, {}], }, - [useSelection({ selectionMode: 'multiselect' })], + [useTableSelection({ selectionMode: 'multiselect' })], ), ); diff --git a/packages/react-components/react-table/src/hooks/useTableFeatures.ts b/packages/react-components/react-table/src/hooks/useTableFeatures.ts index 305943e9a1972..ef91e78a5a5e1 100644 --- a/packages/react-components/react-table/src/hooks/useTableFeatures.ts +++ b/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> = row => row; diff --git a/packages/react-components/react-table/src/hooks/useSelection.test.ts b/packages/react-components/react-table/src/hooks/useTableSelection.test.ts similarity index 82% rename from packages/react-components/react-table/src/hooks/useSelection.test.ts rename to packages/react-components/react-table/src/hooks/useTableSelection.test.ts index 06cf9d86a1747..9c27e90e47d7c 100644 --- a/packages/react-components/react-table/src/hooks/useSelection.test.ts +++ b/packages/react-components/react-table/src/hooks/useTableSelection.test.ts @@ -1,14 +1,14 @@ import { renderHook, act } from '@testing-library/react-hooks'; -import { useSelectionState } from './useSelection'; +import { useTableSelectionState } from './useTableSelection'; import { mockTableState } from '../testing/mockTableState'; import { mockSyntheticEvent } from '../testing/mockSyntheticEvent'; -describe('useSelectionState', () => { +describe('useTableSelectionState', () => { const items = [{ value: 'a' }, { value: 'b' }, { value: 'c' }, { value: 'd' }]; it('should use default selected state', () => { const { result } = renderHook(() => - useSelectionState(mockTableState({ items }), { + useTableSelectionState(mockTableState({ items }), { selectionMode: 'multiselect', defaultSelectedItems: new Set([1]), }), @@ -19,7 +19,7 @@ describe('useSelectionState', () => { it('should use user selected state', () => { const { result } = renderHook(() => - useSelectionState(mockTableState({ items }), { selectionMode: 'multiselect', selectedItems: new Set([1]) }), + useTableSelectionState(mockTableState({ items }), { selectionMode: 'multiselect', selectedItems: new Set([1]) }), ); expect(Array.from(result.current.selection.selectedRows)).toEqual([1]); @@ -28,7 +28,7 @@ describe('useSelectionState', () => { describe('multiselect', () => { it('should use custom row id', () => { const { result } = renderHook(() => - useSelectionState( + useTableSelectionState( mockTableState({ getRowId: (item: { value: string }) => item.value, items, @@ -49,7 +49,7 @@ describe('useSelectionState', () => { it('should select all rows', () => { const onSelectionChange = jest.fn(); const { result } = renderHook(() => - useSelectionState(mockTableState({ items }), { selectionMode: 'multiselect', onSelectionChange }), + useTableSelectionState(mockTableState({ items }), { selectionMode: 'multiselect', onSelectionChange }), ); act(() => { @@ -64,7 +64,7 @@ describe('useSelectionState', () => { it('should deselect all rows', () => { const onSelectionChange = jest.fn(); const { result } = renderHook(() => - useSelectionState(mockTableState({ items }), { selectionMode: 'multiselect', onSelectionChange }), + useTableSelectionState(mockTableState({ items }), { selectionMode: 'multiselect', onSelectionChange }), ); act(() => { @@ -84,7 +84,7 @@ describe('useSelectionState', () => { it('should clear selection', () => { const onSelectionChange = jest.fn(); const { result } = renderHook(() => - useSelectionState(mockTableState({ items }), { selectionMode: 'multiselect', onSelectionChange }), + useTableSelectionState(mockTableState({ items }), { selectionMode: 'multiselect', onSelectionChange }), ); act(() => { @@ -104,7 +104,7 @@ describe('useSelectionState', () => { it('should select row', () => { const onSelectionChange = jest.fn(); const { result } = renderHook(() => - useSelectionState(mockTableState({ items }), { selectionMode: 'multiselect', onSelectionChange }), + useTableSelectionState(mockTableState({ items }), { selectionMode: 'multiselect', onSelectionChange }), ); act(() => { @@ -119,7 +119,7 @@ describe('useSelectionState', () => { it('should select multiple rows', () => { const onSelectionChange = jest.fn(); const { result } = renderHook(() => - useSelectionState(mockTableState({ items }), { selectionMode: 'multiselect', onSelectionChange }), + useTableSelectionState(mockTableState({ items }), { selectionMode: 'multiselect', onSelectionChange }), ); act(() => { @@ -142,7 +142,7 @@ describe('useSelectionState', () => { it('should make row unselected', () => { const onSelectionChange = jest.fn(); const { result } = renderHook(() => - useSelectionState(mockTableState({ items }), { selectionMode: 'multiselect', onSelectionChange }), + useTableSelectionState(mockTableState({ items }), { selectionMode: 'multiselect', onSelectionChange }), ); act(() => { @@ -163,7 +163,7 @@ describe('useSelectionState', () => { it('should select unselected row', () => { const onSelectionChange = jest.fn(); const { result } = renderHook(() => - useSelectionState(mockTableState({ items }), { selectionMode: 'multiselect', onSelectionChange }), + useTableSelectionState(mockTableState({ items }), { selectionMode: 'multiselect', onSelectionChange }), ); act(() => { @@ -179,7 +179,7 @@ describe('useSelectionState', () => { it('should deselect selected row', () => { const onSelectionChange = jest.fn(); const { result } = renderHook(() => - useSelectionState(mockTableState({ items }), { selectionMode: 'multiselect', onSelectionChange }), + useTableSelectionState(mockTableState({ items }), { selectionMode: 'multiselect', onSelectionChange }), ); act(() => { @@ -199,7 +199,7 @@ describe('useSelectionState', () => { it('should select another unselected row', () => { const onSelectionChange = jest.fn(); const { result } = renderHook(() => - useSelectionState(mockTableState({ items }), { selectionMode: 'multiselect', onSelectionChange }), + useTableSelectionState(mockTableState({ items }), { selectionMode: 'multiselect', onSelectionChange }), ); act(() => { @@ -221,7 +221,7 @@ describe('useSelectionState', () => { describe('allRowsSelected', () => { it('should return true if all rows are selected', () => { const { result } = renderHook(() => - useSelectionState(mockTableState({ items }), { selectionMode: 'multiselect' }), + useTableSelectionState(mockTableState({ items }), { selectionMode: 'multiselect' }), ); act(() => { @@ -233,7 +233,7 @@ describe('useSelectionState', () => { it('should return false if there is no selected row', () => { const { result } = renderHook(() => - useSelectionState(mockTableState({ items }), { selectionMode: 'multiselect' }), + useTableSelectionState(mockTableState({ items }), { selectionMode: 'multiselect' }), ); expect(result.current.selection.selectedRows.size).toBe(0); @@ -242,7 +242,7 @@ describe('useSelectionState', () => { it('should return false if not all rows are selected', () => { const { result } = renderHook(() => - useSelectionState(mockTableState({ items }), { selectionMode: 'multiselect' }), + useTableSelectionState(mockTableState({ items }), { selectionMode: 'multiselect' }), ); act(() => { @@ -261,7 +261,7 @@ describe('useSelectionState', () => { describe('someRowsSelected', () => { it('should return true if there is a selected row', () => { const { result } = renderHook(() => - useSelectionState(mockTableState({ items }), { selectionMode: 'multiselect' }), + useTableSelectionState(mockTableState({ items }), { selectionMode: 'multiselect' }), ); act(() => { @@ -274,7 +274,7 @@ describe('useSelectionState', () => { it('should return false if there is no selected row', () => { const { result } = renderHook(() => - useSelectionState(mockTableState({ items }), { selectionMode: 'multiselect' }), + useTableSelectionState(mockTableState({ items }), { selectionMode: 'multiselect' }), ); expect(result.current.selection.selectedRows.size).toBe(0); @@ -288,7 +288,7 @@ describe('useSelectionState', () => { it('should throw when not in production', () => { const onSelectionChange = jest.fn(); const { result } = renderHook(() => - useSelectionState(mockTableState({ items }), { selectionMode: 'single', onSelectionChange }), + useTableSelectionState(mockTableState({ items }), { selectionMode: 'single', onSelectionChange }), ); expect(result.current.selection.toggleAllRows).toThrowErrorMatchingInlineSnapshot( @@ -301,7 +301,7 @@ describe('useSelectionState', () => { const nodeEnv = (process.env.NODE_ENV = 'production'); const onSelectionChange = jest.fn(); const { result } = renderHook(() => - useSelectionState(mockTableState({ items }), { selectionMode: 'single', onSelectionChange }), + useTableSelectionState(mockTableState({ items }), { selectionMode: 'single', onSelectionChange }), ); result.current.selection.toggleAllRows; @@ -315,7 +315,7 @@ describe('useSelectionState', () => { it('should clear selection', () => { const onSelectionChange = jest.fn(); const { result } = renderHook(() => - useSelectionState(mockTableState({ items }), { selectionMode: 'single', onSelectionChange }), + useTableSelectionState(mockTableState({ items }), { selectionMode: 'single', onSelectionChange }), ); act(() => { @@ -335,7 +335,7 @@ describe('useSelectionState', () => { it('should select row', () => { const onSelectionChange = jest.fn(); const { result } = renderHook(() => - useSelectionState(mockTableState({ items }), { selectionMode: 'single', onSelectionChange }), + useTableSelectionState(mockTableState({ items }), { selectionMode: 'single', onSelectionChange }), ); act(() => { @@ -350,7 +350,7 @@ describe('useSelectionState', () => { it('should select another row', () => { const onSelectionChange = jest.fn(); const { result } = renderHook(() => - useSelectionState(mockTableState({ items }), { selectionMode: 'single', onSelectionChange }), + useTableSelectionState(mockTableState({ items }), { selectionMode: 'single', onSelectionChange }), ); act(() => { @@ -372,7 +372,7 @@ describe('useSelectionState', () => { it('should make row unselected', () => { const onSelectionChange = jest.fn(); const { result } = renderHook(() => - useSelectionState(mockTableState({ items }), { selectionMode: 'single', onSelectionChange }), + useTableSelectionState(mockTableState({ items }), { selectionMode: 'single', onSelectionChange }), ); act(() => { @@ -393,7 +393,7 @@ describe('useSelectionState', () => { it('should select unselected row', () => { const onSelectionChange = jest.fn(); const { result } = renderHook(() => - useSelectionState(mockTableState({ items }), { selectionMode: 'single', onSelectionChange }), + useTableSelectionState(mockTableState({ items }), { selectionMode: 'single', onSelectionChange }), ); act(() => { @@ -409,7 +409,7 @@ describe('useSelectionState', () => { it('should deselect selected row', () => { const onSelectionChange = jest.fn(); const { result } = renderHook(() => - useSelectionState(mockTableState({ items }), { selectionMode: 'single', onSelectionChange }), + useTableSelectionState(mockTableState({ items }), { selectionMode: 'single', onSelectionChange }), ); act(() => { @@ -429,7 +429,7 @@ describe('useSelectionState', () => { it('should select another unselected row', () => { const onSelectionChange = jest.fn(); const { result } = renderHook(() => - useSelectionState(mockTableState({ items }), { selectionMode: 'single', onSelectionChange }), + useTableSelectionState(mockTableState({ items }), { selectionMode: 'single', onSelectionChange }), ); act(() => { @@ -450,7 +450,9 @@ describe('useSelectionState', () => { describe('allRowsSelected', () => { it('should return true if there is a selected row', () => { - const { result } = renderHook(() => useSelectionState(mockTableState({ items }), { selectionMode: 'single' })); + const { result } = renderHook(() => + useTableSelectionState(mockTableState({ items }), { selectionMode: 'single' }), + ); act(() => { result.current.selection.selectRow(mockSyntheticEvent(), 1); @@ -461,7 +463,9 @@ describe('useSelectionState', () => { }); it('should return false if there is no selected row', () => { - const { result } = renderHook(() => useSelectionState(mockTableState({ items }), { selectionMode: 'single' })); + const { result } = renderHook(() => + useTableSelectionState(mockTableState({ items }), { selectionMode: 'single' }), + ); expect(result.current.selection.selectedRows.size).toBe(0); expect(result.current.selection.allRowsSelected).toBe(false); @@ -470,7 +474,9 @@ describe('useSelectionState', () => { describe('someRowsSelected', () => { it('should return true if there is a selected row', () => { - const { result } = renderHook(() => useSelectionState(mockTableState({ items }), { selectionMode: 'single' })); + const { result } = renderHook(() => + useTableSelectionState(mockTableState({ items }), { selectionMode: 'single' }), + ); act(() => { result.current.selection.selectRow(mockSyntheticEvent(), 1); @@ -481,7 +487,9 @@ describe('useSelectionState', () => { }); it('should return false if there is no selected row', () => { - const { result } = renderHook(() => useSelectionState(mockTableState({ items }), { selectionMode: 'single' })); + const { result } = renderHook(() => + useTableSelectionState(mockTableState({ items }), { selectionMode: 'single' }), + ); expect(result.current.selection.selectedRows.size).toBe(0); expect(result.current.selection.someRowsSelected).toBe(false); diff --git a/packages/react-components/react-table/src/hooks/useSelection.ts b/packages/react-components/react-table/src/hooks/useTableSelection.ts similarity index 88% rename from packages/react-components/react-table/src/hooks/useSelection.ts rename to packages/react-components/react-table/src/hooks/useTableSelection.ts index 202578bbfb825..3a288cd99c87d 100644 --- a/packages/react-components/react-table/src/hooks/useSelection.ts +++ b/packages/react-components/react-table/src/hooks/useTableSelection.ts @@ -1,7 +1,7 @@ import * as React from 'react'; import { useControllableState, useEventCallback } from '@fluentui/react-utilities'; import { createSelectionManager } from './selectionManager'; -import type { RowId, TableSelectionState, TableState, UseSelectionOptions } from './types'; +import type { RowId, TableSelectionState, TableState, UseTableSelectionOptions } from './types'; const noop = () => undefined; @@ -18,15 +18,15 @@ export const defaultTableSelectionState: TableSelectionState = { selectionMode: 'multiselect', }; -export function useSelection(options: UseSelectionOptions) { +export function useTableSelection(options: UseTableSelectionOptions) { // False positive, these plugin hooks are intended to be run on every render // eslint-disable-next-line react-hooks/rules-of-hooks - return (tableState: TableState) => useSelectionState(tableState, options); + return (tableState: TableState) => useTableSelectionState(tableState, options); } -export function useSelectionState( +export function useTableSelectionState( tableState: TableState, - options: UseSelectionOptions, + options: UseTableSelectionOptions, ): TableState { const { items, getRowId } = tableState; const { selectionMode, defaultSelectedItems, selectedItems, onSelectionChange } = options; diff --git a/packages/react-components/react-table/src/hooks/useSort.test.ts b/packages/react-components/react-table/src/hooks/useTableSort.test.ts similarity index 85% rename from packages/react-components/react-table/src/hooks/useSort.test.ts rename to packages/react-components/react-table/src/hooks/useTableSort.test.ts index aeda41df527ba..5738cc93f6886 100644 --- a/packages/react-components/react-table/src/hooks/useSort.test.ts +++ b/packages/react-components/react-table/src/hooks/useTableSort.test.ts @@ -1,11 +1,11 @@ import { renderHook, act } from '@testing-library/react-hooks'; import { ColumnDefinition } from './types'; -import { useSortState } from './useSort'; +import { useTableSortState } from './useTableSort'; import { mockTableState } from '../testing/mockTableState'; import { createColumn } from './createColumn'; import { mockSyntheticEvent } from '../testing/mockSyntheticEvent'; -describe('useSortState', () => { +describe('useTableSortState', () => { it('should use default sort state', () => { const columnDefinition = [ createColumn({ columnId: 1 }), @@ -13,7 +13,7 @@ describe('useSortState', () => { createColumn({ columnId: 3 }), ]; const { result } = renderHook(() => - useSortState(mockTableState({ columns: columnDefinition }), { + useTableSortState(mockTableState({ columns: columnDefinition }), { defaultSortState: { sortColumn: 2, sortDirection: 'descending' }, }), ); @@ -29,7 +29,7 @@ describe('useSortState', () => { createColumn({ columnId: 3 }), ]; const { result } = renderHook(() => - useSortState(mockTableState({ columns: columnDefinition }), { + useTableSortState(mockTableState({ columns: columnDefinition }), { sortState: { sortColumn: 2, sortDirection: 'descending' }, }), ); @@ -47,7 +47,7 @@ describe('useSortState', () => { ]; const onSortChange = jest.fn(); const { result } = renderHook(() => - useSortState(mockTableState({ columns: columnDefinition }), { onSortChange }), + useTableSortState(mockTableState({ columns: columnDefinition }), { onSortChange }), ); act(() => { result.current.sort.toggleColumnSort(mockSyntheticEvent(), 1); @@ -67,7 +67,7 @@ describe('useSortState', () => { ]; const onSortChange = jest.fn(); const { result } = renderHook(() => - useSortState(mockTableState({ columns: columnDefinition }), { onSortChange }), + useTableSortState(mockTableState({ columns: columnDefinition }), { onSortChange }), ); act(() => { result.current.sort.toggleColumnSort(mockSyntheticEvent(), 1); @@ -93,7 +93,7 @@ describe('useSortState', () => { ]; const onSortChange = jest.fn(); const { result } = renderHook(() => - useSortState(mockTableState({ columns: columnDefinition }), { onSortChange }), + useTableSortState(mockTableState({ columns: columnDefinition }), { onSortChange }), ); act(() => { result.current.sort.setColumnSort(mockSyntheticEvent(), 1, 'ascending'); @@ -113,7 +113,7 @@ describe('useSortState', () => { ]; const onSortChange = jest.fn(); const { result } = renderHook(() => - useSortState(mockTableState({ columns: columnDefinition }), { onSortChange }), + useTableSortState(mockTableState({ columns: columnDefinition }), { onSortChange }), ); act(() => { result.current.sort.setColumnSort(mockSyntheticEvent(), 1, 'descending'); @@ -136,7 +136,7 @@ describe('useSortState', () => { createColumn({ columnId: 3, compare: createMockCompare() }), ]; - const { result } = renderHook(() => useSortState(mockTableState({ columns: columnDefinition }), {})); + const { result } = renderHook(() => useTableSortState(mockTableState({ columns: columnDefinition }), {})); act(() => { result.current.sort.toggleColumnSort(mockSyntheticEvent(), 2); }); @@ -153,7 +153,7 @@ describe('useSortState', () => { createColumn({ columnId: 1, compare: (a, b) => a.value - b.value }), ]; - const { result } = renderHook(() => useSortState(mockTableState({ columns: columnDefinition }), {})); + const { result } = renderHook(() => useTableSortState(mockTableState({ columns: columnDefinition }), {})); act(() => { result.current.sort.toggleColumnSort(mockSyntheticEvent(), 1); }); @@ -175,7 +175,7 @@ describe('useSortState', () => { ]; const items = [{ value: 1 }, { value: 2 }]; - const { result } = renderHook(() => useSortState(mockTableState({ items, columns: columnDefinition }), {})); + const { result } = renderHook(() => useTableSortState(mockTableState({ items, columns: columnDefinition }), {})); act(() => { result.current.sort.toggleColumnSort(mockSyntheticEvent(), 1); }); @@ -199,7 +199,7 @@ describe('useSortState', () => { it('should return sort direction for the sorted column', () => { const columnDefinition: ColumnDefinition<{ value: number }>[] = [createColumn({ columnId: 1 })]; - const { result } = renderHook(() => useSortState(mockTableState({ columns: columnDefinition }), {})); + const { result } = renderHook(() => useTableSortState(mockTableState({ columns: columnDefinition }), {})); act(() => { result.current.sort.setColumnSort(mockSyntheticEvent(), 1, 'descending'); }); @@ -213,7 +213,7 @@ describe('useSortState', () => { createColumn({ columnId: 2 }), ]; - const { result } = renderHook(() => useSortState(mockTableState({ columns: columnDefinition }), {})); + const { result } = renderHook(() => useTableSortState(mockTableState({ columns: columnDefinition }), {})); act(() => { result.current.sort.setColumnSort(mockSyntheticEvent(), 1, 'descending'); }); diff --git a/packages/react-components/react-table/src/hooks/useSort.ts b/packages/react-components/react-table/src/hooks/useTableSort.ts similarity index 88% rename from packages/react-components/react-table/src/hooks/useSort.ts rename to packages/react-components/react-table/src/hooks/useTableSort.ts index 2ad8e46ea31f0..1e5a1b350de1e 100644 --- a/packages/react-components/react-table/src/hooks/useSort.ts +++ b/packages/react-components/react-table/src/hooks/useTableSort.ts @@ -1,6 +1,6 @@ import * as React from 'react'; import { useControllableState } from '@fluentui/react-utilities'; -import type { ColumnId, RowState, SortState, TableSortState, TableState, UseSortOptions } from './types'; +import type { ColumnId, RowState, SortState, TableSortState, TableState, UseTableSortOptions } from './types'; const noop = () => undefined; @@ -13,13 +13,16 @@ export const defaultTableSortState: TableSortState = { toggleColumnSort: noop, }; -export function useSort(options: UseSortOptions) { +export function useTableSort(options: UseTableSortOptions) { // False positive, these plugin hooks are intended to be run on every render // eslint-disable-next-line react-hooks/rules-of-hooks - return (tableState: TableState) => useSortState(tableState, options); + return (tableState: TableState) => useTableSortState(tableState, options); } -export function useSortState(tableState: TableState, options: UseSortOptions): TableState { +export function useTableSortState( + tableState: TableState, + options: UseTableSortOptions, +): TableState { const { columns } = tableState; const { sortState, defaultSortState, onSortChange } = options; diff --git a/packages/react-components/react-table/src/index.ts b/packages/react-components/react-table/src/index.ts index 58976814a010f..a9bd968656b8b 100644 --- a/packages/react-components/react-table/src/index.ts +++ b/packages/react-components/react-table/src/index.ts @@ -1,4 +1,4 @@ -export { useTableFeatures, useSelection, useSort, createColumn } from './hooks'; +export { useTableFeatures, useTableSelection, useTableSort, createColumn } from './hooks'; export type { UseTableOptions, TableState as HeadlessTableState, diff --git a/packages/react-components/react-table/stories/Table/DataGrid.stories.tsx b/packages/react-components/react-table/stories/Table/DataGrid.stories.tsx index 1668c35f73615..50df8cec3f941 100644 --- a/packages/react-components/react-table/stories/Table/DataGrid.stories.tsx +++ b/packages/react-components/react-table/stories/Table/DataGrid.stories.tsx @@ -20,8 +20,8 @@ import { TableCellLayout, useTableFeatures, ColumnDefinition, - useSelection, - useSort, + useTableSelection, + useTableSort, createColumn, ColumnId, } from '@fluentui/react-components/unstable'; @@ -133,11 +133,11 @@ export const DataGrid = () => { items, }, [ - useSelection({ + useTableSelection({ selectionMode: 'multiselect', defaultSelectedItems: new Set([0, 1]), }), - useSort({ defaultSortState: { sortColumn: 'file', sortDirection: 'ascending' } }), + useTableSort({ defaultSortState: { sortColumn: 'file', sortDirection: 'ascending' } }), ], ); diff --git a/packages/react-components/react-table/stories/Table/MultipleSelect.stories.tsx b/packages/react-components/react-table/stories/Table/MultipleSelect.stories.tsx index 65d53b5f141ec..5d35663cddccf 100644 --- a/packages/react-components/react-table/stories/Table/MultipleSelect.stories.tsx +++ b/packages/react-components/react-table/stories/Table/MultipleSelect.stories.tsx @@ -20,7 +20,7 @@ import { TableCellLayout, useTableFeatures, ColumnDefinition, - useSelection, + useTableSelection, createColumn, } from '@fluentui/react-components/unstable'; @@ -118,7 +118,7 @@ export const MultipleSelect = () => { items, }, [ - useSelection({ + useTableSelection({ selectionMode: 'multiselect', defaultSelectedItems: new Set([0, 1]), }), diff --git a/packages/react-components/react-table/stories/Table/MultipleSelectControlled.stories.tsx b/packages/react-components/react-table/stories/Table/MultipleSelectControlled.stories.tsx index 2f59b8e7220a4..4c1f75eea44e4 100644 --- a/packages/react-components/react-table/stories/Table/MultipleSelectControlled.stories.tsx +++ b/packages/react-components/react-table/stories/Table/MultipleSelectControlled.stories.tsx @@ -21,7 +21,7 @@ import { useTableFeatures, ColumnDefinition, RowId, - useSelection, + useTableSelection, createColumn, } from '@fluentui/react-components/unstable'; @@ -123,7 +123,7 @@ export const MultipleSelectControlled = () => { items, }, [ - useSelection({ + useTableSelection({ selectionMode: 'multiselect', selectedItems: selectedRows, onSelectionChange: (e, data) => setSelectedRows(data.selectedItems), diff --git a/packages/react-components/react-table/stories/Table/SingleSelect.stories.tsx b/packages/react-components/react-table/stories/Table/SingleSelect.stories.tsx index 0d4778ff35e1a..01d8109b7a036 100644 --- a/packages/react-components/react-table/stories/Table/SingleSelect.stories.tsx +++ b/packages/react-components/react-table/stories/Table/SingleSelect.stories.tsx @@ -19,7 +19,7 @@ import { TableSelectionCell, useTableFeatures, ColumnDefinition, - useSelection, + useTableSelection, TableCellLayout, createColumn, } from '@fluentui/react-components/unstable'; @@ -118,7 +118,7 @@ export const SingleSelect = () => { items, }, [ - useSelection({ + useTableSelection({ selectionMode: 'single', defaultSelectedItems: new Set([1]), }), diff --git a/packages/react-components/react-table/stories/Table/SingleSelectControlled.stories.tsx b/packages/react-components/react-table/stories/Table/SingleSelectControlled.stories.tsx index 5c736a255a2f0..6d2a0559dc263 100644 --- a/packages/react-components/react-table/stories/Table/SingleSelectControlled.stories.tsx +++ b/packages/react-components/react-table/stories/Table/SingleSelectControlled.stories.tsx @@ -20,7 +20,7 @@ import { useTableFeatures, ColumnDefinition, RowId, - useSelection, + useTableSelection, TableCellLayout, createColumn, } from '@fluentui/react-components/unstable'; @@ -122,7 +122,7 @@ export const SingleSelectControlled = () => { items, }, [ - useSelection({ + useTableSelection({ selectionMode: 'single', selectedItems: selectedRows, onSelectionChange: (e, data) => setSelectedRows(data.selectedItems), diff --git a/packages/react-components/react-table/stories/Table/Sort.stories.tsx b/packages/react-components/react-table/stories/Table/Sort.stories.tsx index d52c6aabbd681..13f57ad3dcf6f 100644 --- a/packages/react-components/react-table/stories/Table/Sort.stories.tsx +++ b/packages/react-components/react-table/stories/Table/Sort.stories.tsx @@ -19,7 +19,7 @@ import { useTableFeatures, ColumnDefinition, ColumnId, - useSort, + useTableSort, TableCellLayout, createColumn, } from '@fluentui/react-components/unstable'; @@ -129,7 +129,7 @@ export const Sort = () => { columns, items, }, - [useSort({ defaultSortState: { sortColumn: 'file', sortDirection: 'ascending' } })], + [useTableSort({ defaultSortState: { sortColumn: 'file', sortDirection: 'ascending' } })], ); const keyboardNavAttr = useArrowNavigationGroup({ axis: 'grid' }); diff --git a/packages/react-components/react-table/stories/Table/SortControlled.stories.tsx b/packages/react-components/react-table/stories/Table/SortControlled.stories.tsx index 4ddcfbca5ea28..cb15c1e1949e9 100644 --- a/packages/react-components/react-table/stories/Table/SortControlled.stories.tsx +++ b/packages/react-components/react-table/stories/Table/SortControlled.stories.tsx @@ -19,7 +19,7 @@ import { useTableFeatures, ColumnDefinition, ColumnId, - useSort, + useTableSort, TableCellLayout, createColumn, } from '@fluentui/react-components/unstable'; @@ -137,7 +137,7 @@ export const SortControlled = () => { columns, items, }, - [useSort({ sortState, onSortChange: (e, nextSortState) => setSortState(nextSortState) })], + [useTableSort({ sortState, onSortChange: (e, nextSortState) => setSortState(nextSortState) })], ); const keyboardNavAttr = useArrowNavigationGroup({ axis: 'grid' }); diff --git a/packages/react-components/react-table/stories/Table/SubtleSelection.stories.tsx b/packages/react-components/react-table/stories/Table/SubtleSelection.stories.tsx index 1c08d03522f12..9b230824ca8bf 100644 --- a/packages/react-components/react-table/stories/Table/SubtleSelection.stories.tsx +++ b/packages/react-components/react-table/stories/Table/SubtleSelection.stories.tsx @@ -20,7 +20,7 @@ import { TableCellLayout, useTableFeatures, ColumnDefinition, - useSelection, + useTableSelection, createColumn, } from '@fluentui/react-components/unstable'; @@ -118,7 +118,7 @@ export const SubtleSelection = () => { items, }, [ - useSelection({ + useTableSelection({ selectionMode: 'multiselect', defaultSelectedItems: new Set([0, 1]), }), diff --git a/packages/react-components/react-table/stories/Table/TableDescription.md b/packages/react-components/react-table/stories/Table/TableDescription.md index fb3d3019a859b..c7d4000add7c2 100644 --- a/packages/react-components/react-table/stories/Table/TableDescription.md +++ b/packages/react-components/react-table/stories/Table/TableDescription.md @@ -21,6 +21,6 @@ feature sets. The library provides a default `useTableFeatures` hook that handle features. There is no obligation to use our hook with these components, we've created it for convenience. The `useTableFeatures` hook was designed with feature composition in mind. This means that are composed using -plugins hooks such as `useSort` and `useSelection` as a part of `useTableFeatures`. This means +plugins hooks such as `useTableSort` and `useTableSelection` as a part of `useTableFeatures`. This means that as the feature set expands, users will not need to pay the bundle size price for features that they do not intend to use. Please consult the usage examples below for more details. From 155740d858502027044006574e397b7fea5aaea9 Mon Sep 17 00:00:00 2001 From: Lingfan Gao Date: Tue, 29 Nov 2022 10:11:53 +0100 Subject: [PATCH 4/4] update changefiles --- ...i-react-components-751955cf-f7fb-477a-9ea1-537da4c2754b.json | 2 +- ...uentui-react-table-d05cfee5-5a24-46f8-99a4-05010ebfdc30.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/change/@fluentui-react-components-751955cf-f7fb-477a-9ea1-537da4c2754b.json b/change/@fluentui-react-components-751955cf-f7fb-477a-9ea1-537da4c2754b.json index a6f135d4985fd..1c8f3e9af3b0a 100644 --- a/change/@fluentui-react-components-751955cf-f7fb-477a-9ea1-537da4c2754b.json +++ b/change/@fluentui-react-components-751955cf-f7fb-477a-9ea1-537da4c2754b.json @@ -1,6 +1,6 @@ { "type": "patch", - "comment": "BREAKING: `useTable` renamed to `useTableFeatures`", + "comment": "BREAKING: rename useTable->useTableFeatures, useSelection->useTableSelection, useSort->useTableSort", "packageName": "@fluentui/react-components", "email": "lingfangao@hotmail.com", "dependentChangeType": "patch" diff --git a/change/@fluentui-react-table-d05cfee5-5a24-46f8-99a4-05010ebfdc30.json b/change/@fluentui-react-table-d05cfee5-5a24-46f8-99a4-05010ebfdc30.json index 53c07663ae8d8..828b38950fa26 100644 --- a/change/@fluentui-react-table-d05cfee5-5a24-46f8-99a4-05010ebfdc30.json +++ b/change/@fluentui-react-table-d05cfee5-5a24-46f8-99a4-05010ebfdc30.json @@ -1,6 +1,6 @@ { "type": "prerelease", - "comment": "BREAKING: `useTable` renamed to `useTableFeatures`", + "comment": "BREAKING: rename useTable->useTableFeatures, useSelection->useTableSelection, useSort->useTableSort", "packageName": "@fluentui/react-table", "email": "lingfangao@hotmail.com", "dependentChangeType": "patch"