@fluentui/react-table
Advanced tools
Comparing version 9.0.0-alpha.4 to 9.0.0-alpha.5
@@ -5,3 +5,60 @@ { | ||
{ | ||
"date": "Mon, 03 Oct 2022 22:22:51 GMT", | ||
"date": "Thu, 13 Oct 2022 10:59:38 GMT", | ||
"tag": "@fluentui/react-table_v9.0.0-alpha.5", | ||
"version": "9.0.0-alpha.5", | ||
"comments": { | ||
"prerelease": [ | ||
{ | ||
"author": "olfedias@microsoft.com", | ||
"package": "@fluentui/react-table", | ||
"commit": "1a527d440e0497ef8046b3ce240492241e7a04ac", | ||
"comment": "chore: Update Griffel to latest version" | ||
}, | ||
{ | ||
"author": "lingfangao@hotmail.com", | ||
"package": "@fluentui/react-table", | ||
"commit": "33559052b672f787b021bd2fbc9826e88ce2a2de", | ||
"comment": "BREAKING: refactor `useTable` to be composable" | ||
}, | ||
{ | ||
"author": "beachball", | ||
"package": "@fluentui/react-table", | ||
"comment": "Bump @fluentui/react-aria to v9.2.2", | ||
"commit": "cd05c21e62ff37812d614330eb70f97fd978c97a" | ||
}, | ||
{ | ||
"author": "beachball", | ||
"package": "@fluentui/react-table", | ||
"comment": "Bump @fluentui/react-avatar to v9.2.1", | ||
"commit": "cd05c21e62ff37812d614330eb70f97fd978c97a" | ||
}, | ||
{ | ||
"author": "beachball", | ||
"package": "@fluentui/react-table", | ||
"comment": "Bump @fluentui/react-checkbox to v9.0.8", | ||
"commit": "cd05c21e62ff37812d614330eb70f97fd978c97a" | ||
}, | ||
{ | ||
"author": "beachball", | ||
"package": "@fluentui/react-table", | ||
"comment": "Bump @fluentui/react-tabster to v9.1.3", | ||
"commit": "cd05c21e62ff37812d614330eb70f97fd978c97a" | ||
}, | ||
{ | ||
"author": "beachball", | ||
"package": "@fluentui/react-table", | ||
"comment": "Bump @fluentui/react-utilities to v9.1.1", | ||
"commit": "cd05c21e62ff37812d614330eb70f97fd978c97a" | ||
}, | ||
{ | ||
"author": "beachball", | ||
"package": "@fluentui/react-table", | ||
"comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.15", | ||
"commit": "cd05c21e62ff37812d614330eb70f97fd978c97a" | ||
} | ||
] | ||
} | ||
}, | ||
{ | ||
"date": "Mon, 03 Oct 2022 22:24:41 GMT", | ||
"tag": "@fluentui/react-table_v9.0.0-alpha.4", | ||
@@ -27,3 +84,3 @@ "version": "9.0.0-alpha.4", | ||
"comment": "Bump @fluentui/react-aria to v9.2.1", | ||
"commit": "b0b7f99bbbb05b0bd136432983a74fea252c7163" | ||
"commit": "67a8c98b8d53cd2fa14d668cf639b867b68ad18a" | ||
}, | ||
@@ -34,3 +91,3 @@ { | ||
"comment": "Bump @fluentui/react-avatar to v9.2.0", | ||
"commit": "b0b7f99bbbb05b0bd136432983a74fea252c7163" | ||
"commit": "67a8c98b8d53cd2fa14d668cf639b867b68ad18a" | ||
}, | ||
@@ -41,3 +98,3 @@ { | ||
"comment": "Bump @fluentui/react-checkbox to v9.0.7", | ||
"commit": "b0b7f99bbbb05b0bd136432983a74fea252c7163" | ||
"commit": "67a8c98b8d53cd2fa14d668cf639b867b68ad18a" | ||
}, | ||
@@ -48,3 +105,3 @@ { | ||
"comment": "Bump @fluentui/react-tabster to v9.1.2", | ||
"commit": "b0b7f99bbbb05b0bd136432983a74fea252c7163" | ||
"commit": "67a8c98b8d53cd2fa14d668cf639b867b68ad18a" | ||
} | ||
@@ -51,0 +108,0 @@ ], |
# Change Log - @fluentui/react-table | ||
This log was last generated on Mon, 03 Oct 2022 22:22:51 GMT and should not be manually modified. | ||
This log was last generated on Thu, 13 Oct 2022 10:59:38 GMT and should not be manually modified. | ||
<!-- Start content --> | ||
## [9.0.0-alpha.5](https://github.com/microsoft/fluentui/tree/@fluentui/react-table_v9.0.0-alpha.5) | ||
Thu, 13 Oct 2022 10:59:38 GMT | ||
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-table_v9.0.0-alpha.4..@fluentui/react-table_v9.0.0-alpha.5) | ||
### Changes | ||
- chore: Update Griffel to latest version ([PR #25075](https://github.com/microsoft/fluentui/pull/25075) by olfedias@microsoft.com) | ||
- BREAKING: refactor `useTable` to be composable ([PR #24947](https://github.com/microsoft/fluentui/pull/24947) by lingfangao@hotmail.com) | ||
- Bump @fluentui/react-aria to v9.2.2 ([PR #25181](https://github.com/microsoft/fluentui/pull/25181) by beachball) | ||
- Bump @fluentui/react-avatar to v9.2.1 ([PR #25181](https://github.com/microsoft/fluentui/pull/25181) by beachball) | ||
- Bump @fluentui/react-checkbox to v9.0.8 ([PR #25181](https://github.com/microsoft/fluentui/pull/25181) by beachball) | ||
- Bump @fluentui/react-tabster to v9.1.3 ([PR #25181](https://github.com/microsoft/fluentui/pull/25181) by beachball) | ||
- Bump @fluentui/react-utilities to v9.1.1 ([PR #25181](https://github.com/microsoft/fluentui/pull/25181) by beachball) | ||
- Bump @fluentui/react-conformance-griffel to v9.0.0-beta.15 ([PR #25181](https://github.com/microsoft/fluentui/pull/25181) by beachball) | ||
## [9.0.0-alpha.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-table_v9.0.0-alpha.4) | ||
Mon, 03 Oct 2022 22:22:51 GMT | ||
Mon, 03 Oct 2022 22:24:41 GMT | ||
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-table_v9.0.0-alpha.3..@fluentui/react-table_v9.0.0-alpha.4) | ||
@@ -16,6 +32,6 @@ | ||
- feat: Use AvatarContext to override avatar size ([PR #24807](https://github.com/microsoft/fluentui/pull/24807) by lingfangao@hotmail.com) | ||
- Bump @fluentui/react-aria to v9.2.1 ([PR #25016](https://github.com/microsoft/fluentui/pull/25016) by beachball) | ||
- Bump @fluentui/react-avatar to v9.2.0 ([PR #25016](https://github.com/microsoft/fluentui/pull/25016) by beachball) | ||
- Bump @fluentui/react-checkbox to v9.0.7 ([PR #25016](https://github.com/microsoft/fluentui/pull/25016) by beachball) | ||
- Bump @fluentui/react-tabster to v9.1.2 ([PR #25016](https://github.com/microsoft/fluentui/pull/25016) by beachball) | ||
- Bump @fluentui/react-aria to v9.2.1 ([PR #25055](https://github.com/microsoft/fluentui/pull/25055) by beachball) | ||
- Bump @fluentui/react-avatar to v9.2.0 ([PR #25055](https://github.com/microsoft/fluentui/pull/25055) by beachball) | ||
- Bump @fluentui/react-checkbox to v9.0.7 ([PR #25055](https://github.com/microsoft/fluentui/pull/25055) by beachball) | ||
- Bump @fluentui/react-tabster to v9.1.2 ([PR #25055](https://github.com/microsoft/fluentui/pull/25055) by beachball) | ||
@@ -22,0 +38,0 @@ ## [9.0.0-alpha.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-table_v9.0.0-alpha.3) |
@@ -21,9 +21,22 @@ /// <reference types="react" /> | ||
declare type OnSelectionChangeCallback = (selectedItems: Set<RowId>) => void; | ||
export declare interface HeadlessTableState<TItem> extends Pick<UseTableOptions<TItem>, 'items' | 'getRowId'> { | ||
/** | ||
* The row data for rendering | ||
* @param rowEnhancer - Enhances the row with extra user data | ||
*/ | ||
getRows: <TRowState extends RowState<TItem> = RowState<TItem>>(rowEnhancer?: RowEnhancer<TItem, TRowState>) => TRowState[]; | ||
/** | ||
* State and actions to manage row selection | ||
*/ | ||
selection: TableSelectionState; | ||
/** | ||
* State and actions to manage row sorting | ||
*/ | ||
sort: TableSortState<TItem>; | ||
/** | ||
* Table columns | ||
*/ | ||
columns: ColumnDefinition<TItem>[]; | ||
} | ||
declare type OnSortChangeCallback = (state: { | ||
sortColumn: ColumnId | undefined; | ||
sortDirection: SortDirection; | ||
}) => void; | ||
/** | ||
@@ -74,6 +87,3 @@ * Render the final JSX of Table | ||
declare type RowEnhancer<TItem, TRowState extends RowState<TItem> = RowState<TItem>> = (row: RowState<TItem>, state: { | ||
selection: TableSelectionState; | ||
sort: TableSortState; | ||
}) => TRowState; | ||
declare type RowEnhancer<TItem, TRowState extends RowState<TItem> = RowState<TItem>> = (row: RowState<TItem>) => TRowState; | ||
@@ -393,3 +403,3 @@ export declare type RowId = string | number; | ||
*/ | ||
selectedRows: RowId[]; | ||
selectedRows: Set<RowId>; | ||
/** | ||
@@ -413,3 +423,3 @@ * Whether all rows are selected | ||
export declare interface TableSortState { | ||
export declare interface TableSortState<TItem> { | ||
/** | ||
@@ -436,2 +446,6 @@ * Current sort direction | ||
getSortDirection: (columnId: ColumnId) => SortDirection | undefined; | ||
/** | ||
* Sorts rows and returns a **shallow** copy of original items | ||
*/ | ||
sort: (rows: RowState<TItem>[]) => RowState<TItem>[]; | ||
} | ||
@@ -444,19 +458,44 @@ | ||
declare interface TableState_2<TItem, TRowState extends RowState<TItem> = RowState<TItem>> { | ||
export declare type TableStatePlugin = <TItem>(tableState: HeadlessTableState<TItem>) => HeadlessTableState<TItem>; | ||
export declare function useSelection<TItem>(options: UseSelectionOptions): (tableState: HeadlessTableState<TItem>) => HeadlessTableState<TItem>; | ||
declare interface UseSelectionOptions { | ||
/** | ||
* The row data for rendering | ||
* Can be multi or single select | ||
*/ | ||
rows: TRowState[]; | ||
selectionMode: SelectionMode_2; | ||
/** | ||
* State and actions to manage row selection | ||
* Used in uncontrolled mode to set initial selected rows on mount | ||
*/ | ||
selection: TableSelectionState; | ||
defaultSelectedItems?: Set<RowId>; | ||
/** | ||
* State and actions to manage row sorting | ||
* Used to control row selection | ||
*/ | ||
sort: TableSortState; | ||
selectedItems?: Set<RowId>; | ||
/** | ||
* Called when selection changes | ||
*/ | ||
onSelectionChange?: (selectedItems: Set<RowId>) => void; | ||
} | ||
export declare function useTable<TItem, TRowState extends RowState<TItem> = RowState<TItem>>(options: UseTableOptions<TItem, TRowState>): TableState_2<TItem, TRowState>; | ||
export declare function useSort<TItem>(options: UseSortOptions): (tableState: HeadlessTableState<TItem>) => HeadlessTableState<TItem>; | ||
declare interface UseSortOptions { | ||
/** | ||
* Used to control sorting | ||
*/ | ||
sortState?: SortState; | ||
/** | ||
* Used in uncontrolled mode to set initial sort column and direction on mount | ||
*/ | ||
defaultSortState?: SortState; | ||
/** | ||
* Called when sort changes | ||
*/ | ||
onSortChange?: (state: SortState) => void; | ||
} | ||
export declare function useTable<TItem>(options: UseTableOptions<TItem>, plugins?: TableStatePlugin[]): HeadlessTableState<TItem>; | ||
/** | ||
@@ -571,32 +610,6 @@ * Create the state required to render Table. | ||
export declare interface UseTableOptions<TItem, TRowState extends RowState<TItem> = RowState<TItem>> { | ||
export declare interface UseTableOptions<TItem> { | ||
columns: ColumnDefinition<TItem>[]; | ||
items: TItem[]; | ||
selectionMode?: SelectionMode_2; | ||
/** | ||
* Used in uncontrolled mode to set initial selected rows on mount | ||
*/ | ||
defaultSelectedRows?: Set<RowId>; | ||
/** | ||
* Used to control row selection | ||
*/ | ||
selectedRows?: Set<RowId>; | ||
/** | ||
* Called when selection changes | ||
*/ | ||
onSelectionChange?: OnSelectionChangeCallback; | ||
/** | ||
* Used to control sorting | ||
*/ | ||
sortState?: SortState; | ||
/** | ||
* Used in uncontrolled mode to set initial sort column and direction on mount | ||
*/ | ||
defaultSortState?: SortState; | ||
/** | ||
* Called when sort changes | ||
*/ | ||
onSortChange?: OnSortChangeCallback; | ||
getRowId?: (item: TItem) => RowId; | ||
rowEnhancer?: RowEnhancer<TItem, TRowState>; | ||
} | ||
@@ -603,0 +616,0 @@ |
@@ -12,2 +12,6 @@ "use strict"; | ||
tslib_1.__exportStar(require("./useTable"), exports); | ||
tslib_1.__exportStar(require("./useSort"), exports); | ||
tslib_1.__exportStar(require("./useSelection"), exports); | ||
//# sourceMappingURL=index.js.map |
@@ -6,3 +6,3 @@ "use strict"; | ||
}); | ||
exports.useSelection = void 0; | ||
exports.useSelectionState = exports.useSelection = exports.defaultTableSelectionState = void 0; | ||
@@ -15,7 +15,31 @@ const React = /*#__PURE__*/require("react"); | ||
const noop = () => undefined; | ||
exports.defaultTableSelectionState = { | ||
allRowsSelected: false, | ||
clearRows: noop, | ||
deselectRow: noop, | ||
isRowSelected: () => false, | ||
selectRow: noop, | ||
selectedRows: /*#__PURE__*/new Set(), | ||
someRowsSelected: false, | ||
toggleAllRows: noop, | ||
toggleRow: noop | ||
}; | ||
function useSelection(options) { | ||
// False positive, these plugin hooks are intended to be run on every render | ||
// eslint-disable-next-line react-hooks/rules-of-hooks | ||
return tableState => useSelectionState(tableState, options); | ||
} | ||
exports.useSelection = useSelection; | ||
function useSelectionState(tableState, options) { | ||
const { | ||
items, | ||
getRowId | ||
} = tableState; | ||
const { | ||
selectionMode, | ||
items, | ||
getRowId, | ||
defaultSelectedItems, | ||
@@ -39,3 +63,7 @@ selectedItems, | ||
const toggleAllRows = react_utilities_1.useEventCallback(() => { | ||
selectionManager.toggleAllItems(items.map((item, i) => getRowId(item, i)), selected); | ||
selectionManager.toggleAllItems(items.map((item, i) => { | ||
var _a; | ||
return (_a = getRowId === null || getRowId === void 0 ? void 0 : getRowId(item)) !== null && _a !== void 0 ? _a : i; | ||
}), selected); | ||
}); | ||
@@ -48,16 +76,18 @@ const toggleRow = react_utilities_1.useEventCallback(rowId => selectionManager.toggleItem(rowId, selected)); | ||
return { | ||
someRowsSelected: selected.size > 0, | ||
allRowsSelected: selectionMode === 'single' ? selected.size > 0 : selected.size === items.length, | ||
selectedRows: selected, | ||
toggleRow, | ||
toggleAllRows, | ||
clearRows: selectionManager.clearItems, | ||
deselectRow, | ||
selectRow, | ||
isRowSelected | ||
return { ...tableState, | ||
selection: { | ||
someRowsSelected: selected.size > 0, | ||
allRowsSelected: selectionMode === 'single' ? selected.size > 0 : selected.size === items.length, | ||
selectedRows: selected, | ||
toggleRow, | ||
toggleAllRows, | ||
clearRows: selectionManager.clearItems, | ||
deselectRow, | ||
selectRow, | ||
isRowSelected | ||
} | ||
}; | ||
} | ||
exports.useSelection = useSelection; | ||
exports.useSelectionState = useSelectionState; | ||
//# sourceMappingURL=useSelection.js.map |
@@ -6,9 +6,30 @@ "use strict"; | ||
}); | ||
exports.useSort = void 0; | ||
exports.useSortState = exports.useSort = exports.defaultTableSortState = void 0; | ||
const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities"); | ||
const noop = () => undefined; | ||
exports.defaultTableSortState = { | ||
getSortDirection: () => 'ascending', | ||
setColumnSort: noop, | ||
sort: rows => [...rows], | ||
sortColumn: undefined, | ||
sortDirection: 'ascending', | ||
toggleColumnSort: noop | ||
}; | ||
function useSort(options) { | ||
// False positive, these plugin hooks are intended to be run on every render | ||
// eslint-disable-next-line react-hooks/rules-of-hooks | ||
return tableState => useSortState(tableState, options); | ||
} | ||
exports.useSort = useSort; | ||
function useSortState(tableState, options) { | ||
const { | ||
columns, | ||
columns | ||
} = tableState; | ||
const { | ||
sortState, | ||
@@ -57,12 +78,14 @@ defaultSortState, | ||
const sort = items => items.slice().sort((a, b) => { | ||
const sortColumnDef = columns.find(column => column.columnId === sortColumn); | ||
const sort = rows => { | ||
return rows.slice().sort((a, b) => { | ||
const sortColumnDef = columns.find(column => column.columnId === sortColumn); | ||
if (!(sortColumnDef === null || sortColumnDef === void 0 ? void 0 : sortColumnDef.compare)) { | ||
return 0; | ||
} | ||
if (!(sortColumnDef === null || sortColumnDef === void 0 ? void 0 : sortColumnDef.compare)) { | ||
return 0; | ||
} | ||
const mod = sortDirection === 'ascending' ? 1 : -1; | ||
return sortColumnDef.compare(a, b) * mod; | ||
}); | ||
const mod = sortDirection === 'ascending' ? 1 : -1; | ||
return sortColumnDef.compare(a.item, b.item) * mod; | ||
}); | ||
}; | ||
@@ -73,13 +96,15 @@ const getSortDirection = columnId => { | ||
return { | ||
sortColumn, | ||
sortDirection, | ||
sort, | ||
setColumnSort, | ||
toggleColumnSort, | ||
getSortDirection | ||
return { ...tableState, | ||
sort: { | ||
sort, | ||
sortColumn, | ||
sortDirection, | ||
setColumnSort, | ||
toggleColumnSort, | ||
getSortDirection | ||
} | ||
}; | ||
} | ||
exports.useSort = useSort; | ||
exports.useSortState = useSortState; | ||
//# sourceMappingURL=useSort.js.map |
@@ -8,4 +8,2 @@ "use strict"; | ||
const React = /*#__PURE__*/require("react"); | ||
const useSelection_1 = /*#__PURE__*/require("./useSelection"); | ||
@@ -15,84 +13,29 @@ | ||
function useTable(options) { | ||
const defaultRowEnhancer = row => row; | ||
function useTable(options, plugins = []) { | ||
const { | ||
items: baseItems, | ||
columns, | ||
getRowId: getUserRowId = () => undefined, | ||
selectionMode = 'multiselect', | ||
rowEnhancer = row => row, | ||
defaultSelectedRows, | ||
selectedRows: userSelectedRows, | ||
onSelectionChange, | ||
sortState: userSortState, | ||
defaultSortState, | ||
onSortChange | ||
items, | ||
getRowId, | ||
columns | ||
} = options; | ||
const getRowId = React.useCallback((item, index) => { | ||
const getRows = (rowEnhancer = defaultRowEnhancer) => items.map((item, i) => { | ||
var _a; | ||
return (_a = getUserRowId(item)) !== null && _a !== void 0 ? _a : index; | ||
}, [getUserRowId]); | ||
const { | ||
sortColumn, | ||
sortDirection, | ||
toggleColumnSort, | ||
setColumnSort, | ||
getSortDirection, | ||
sort | ||
} = useSort_1.useSort({ | ||
columns, | ||
sortState: userSortState, | ||
defaultSortState, | ||
onSortChange | ||
}); | ||
const sortState = React.useMemo(() => ({ | ||
sortColumn, | ||
sortDirection, | ||
setColumnSort, | ||
toggleColumnSort, | ||
getSortDirection | ||
}), [sortColumn, sortDirection, setColumnSort, toggleColumnSort, getSortDirection]); | ||
const { | ||
isRowSelected, | ||
toggleRow, | ||
toggleAllRows, | ||
clearRows, | ||
selectedRows, | ||
allRowsSelected, | ||
someRowsSelected, | ||
selectRow, | ||
deselectRow | ||
} = useSelection_1.useSelection({ | ||
selectionMode, | ||
items: baseItems, | ||
getRowId, | ||
defaultSelectedItems: defaultSelectedRows, | ||
selectedItems: userSelectedRows, | ||
onSelectionChange | ||
}); | ||
const selectionState = React.useMemo(() => ({ | ||
isRowSelected, | ||
clearRows, | ||
deselectRow, | ||
selectRow, | ||
toggleAllRows, | ||
toggleRow, | ||
selectedRows: Array.from(selectedRows), | ||
allRowsSelected, | ||
someRowsSelected | ||
}), [isRowSelected, clearRows, deselectRow, selectRow, toggleAllRows, toggleRow, selectedRows, allRowsSelected, someRowsSelected]); | ||
const rows = React.useMemo(() => sort(baseItems).map((item, i) => { | ||
return rowEnhancer({ | ||
item, | ||
rowId: getRowId(item, i) | ||
}, { | ||
selection: selectionState, | ||
sort: sortState | ||
rowId: (_a = getRowId === null || getRowId === void 0 ? void 0 : getRowId(item)) !== null && _a !== void 0 ? _a : i | ||
}); | ||
}), [baseItems, getRowId, sort, rowEnhancer, selectionState, sortState]); | ||
return { | ||
rows, | ||
selection: selectionState, | ||
sort: sortState | ||
}); | ||
const initialState = { | ||
getRowId, | ||
items, | ||
columns, | ||
getRows, | ||
selection: useSelection_1.defaultTableSelectionState, | ||
sort: useSort_1.defaultTableSortState | ||
}; | ||
return plugins.reduce((state, plugin) => plugin(state), initialState); | ||
} | ||
@@ -99,0 +42,0 @@ |
@@ -6,4 +6,4 @@ "use strict"; | ||
}); | ||
exports.TableCellLayout = exports.renderTableCellActions_unstable = exports.useTableCellActions_unstable = exports.useTableCellActionsStyles_unstable = exports.tableCellActionsClassNames = exports.TableCellActions = exports.tableSelectionCellClassNames = exports.renderTableSelectionCell_unstable = exports.useTableSelectionCell_unstable = exports.useTableSelectionCellStyles_unstable = exports.TableSelectionCell = exports.useTableContext = exports.TableContextProvider = exports.renderTableHeaderCell_unstable = exports.useTableHeaderCell_unstable = exports.useTableHeaderCellStyles_unstable = exports.tableHeaderCellClassNames = exports.tableHeaderCellClassName = exports.TableHeaderCell = exports.renderTableHeader_unstable = exports.useTableHeader_unstable = exports.useTableHeaderStyles_unstable = exports.tableHeaderClassName = exports.tableHeaderClassNames = exports.TableHeader = exports.renderTable_unstable = exports.useTable_unstable = exports.useTableStyles_unstable = exports.tableClassNames = exports.tableClassName = exports.Table = exports.renderTableBody_unstable = exports.useTableBody_unstable = exports.useTableBodyStyles_unstable = exports.tableBodyClassNames = exports.tableBodyClassName = exports.TableBody = exports.renderTableRow_unstable = exports.useTableRow_unstable = exports.useTableRowStyles_unstable = exports.tableRowClassName = exports.tableRowClassNames = exports.TableRow = exports.renderTableCell_unstable = exports.useTableCell_unstable = exports.useTableCellStyles_unstable = exports.tableCellClassName = exports.tableCellClassNames = exports.TableCell = exports.useTable = void 0; | ||
exports.renderTableCellLayout_unstable = exports.useTableCellLayout_unstable = exports.useTableCellLayoutStyles_unstable = exports.tableCellLayoutClassNames = void 0; | ||
exports.useTableCellActions_unstable = exports.useTableCellActionsStyles_unstable = exports.tableCellActionsClassNames = exports.TableCellActions = exports.tableSelectionCellClassNames = exports.renderTableSelectionCell_unstable = exports.useTableSelectionCell_unstable = exports.useTableSelectionCellStyles_unstable = exports.TableSelectionCell = exports.useTableContext = exports.TableContextProvider = exports.renderTableHeaderCell_unstable = exports.useTableHeaderCell_unstable = exports.useTableHeaderCellStyles_unstable = exports.tableHeaderCellClassNames = exports.tableHeaderCellClassName = exports.TableHeaderCell = exports.renderTableHeader_unstable = exports.useTableHeader_unstable = exports.useTableHeaderStyles_unstable = exports.tableHeaderClassName = exports.tableHeaderClassNames = exports.TableHeader = exports.renderTable_unstable = exports.useTable_unstable = exports.useTableStyles_unstable = exports.tableClassNames = exports.tableClassName = exports.Table = exports.renderTableBody_unstable = exports.useTableBody_unstable = exports.useTableBodyStyles_unstable = exports.tableBodyClassNames = exports.tableBodyClassName = exports.TableBody = exports.renderTableRow_unstable = exports.useTableRow_unstable = exports.useTableRowStyles_unstable = exports.tableRowClassName = exports.tableRowClassNames = exports.TableRow = exports.renderTableCell_unstable = exports.useTableCell_unstable = exports.useTableCellStyles_unstable = exports.tableCellClassName = exports.tableCellClassNames = exports.TableCell = exports.useSort = exports.useSelection = exports.useTable = void 0; | ||
exports.renderTableCellLayout_unstable = exports.useTableCellLayout_unstable = exports.useTableCellLayoutStyles_unstable = exports.tableCellLayoutClassNames = exports.TableCellLayout = exports.renderTableCellActions_unstable = void 0; | ||
@@ -18,2 +18,14 @@ var hooks_1 = /*#__PURE__*/require("./hooks"); | ||
}); | ||
Object.defineProperty(exports, "useSelection", { | ||
enumerable: true, | ||
get: function () { | ||
return hooks_1.useSelection; | ||
} | ||
}); | ||
Object.defineProperty(exports, "useSort", { | ||
enumerable: true, | ||
get: function () { | ||
return hooks_1.useSort; | ||
} | ||
}); | ||
@@ -20,0 +32,0 @@ var TableCell_1 = /*#__PURE__*/require("./TableCell"); |
export * from './types'; | ||
export * from './useTable'; | ||
export * from './useSort'; | ||
export * from './useSelection'; | ||
//# sourceMappingURL=index.js.map |
import * as React from 'react'; | ||
import { useControllableState, useEventCallback } from '@fluentui/react-utilities'; | ||
import { createSelectionManager } from './selectionManager'; | ||
const noop = () => undefined; | ||
export const defaultTableSelectionState = { | ||
allRowsSelected: false, | ||
clearRows: noop, | ||
deselectRow: noop, | ||
isRowSelected: () => false, | ||
selectRow: noop, | ||
selectedRows: /*#__PURE__*/new Set(), | ||
someRowsSelected: false, | ||
toggleAllRows: noop, | ||
toggleRow: noop | ||
}; | ||
export function useSelection(options) { | ||
// False positive, these plugin hooks are intended to be run on every render | ||
// eslint-disable-next-line react-hooks/rules-of-hooks | ||
return tableState => useSelectionState(tableState, options); | ||
} | ||
export function useSelectionState(tableState, options) { | ||
const { | ||
items, | ||
getRowId | ||
} = tableState; | ||
const { | ||
selectionMode, | ||
items, | ||
getRowId, | ||
defaultSelectedItems, | ||
@@ -27,3 +48,7 @@ selectedItems, | ||
const toggleAllRows = useEventCallback(() => { | ||
selectionManager.toggleAllItems(items.map((item, i) => getRowId(item, i)), selected); | ||
selectionManager.toggleAllItems(items.map((item, i) => { | ||
var _a; | ||
return (_a = getRowId === null || getRowId === void 0 ? void 0 : getRowId(item)) !== null && _a !== void 0 ? _a : i; | ||
}), selected); | ||
}); | ||
@@ -36,14 +61,16 @@ const toggleRow = useEventCallback(rowId => selectionManager.toggleItem(rowId, selected)); | ||
return { | ||
someRowsSelected: selected.size > 0, | ||
allRowsSelected: selectionMode === 'single' ? selected.size > 0 : selected.size === items.length, | ||
selectedRows: selected, | ||
toggleRow, | ||
toggleAllRows, | ||
clearRows: selectionManager.clearItems, | ||
deselectRow, | ||
selectRow, | ||
isRowSelected | ||
return { ...tableState, | ||
selection: { | ||
someRowsSelected: selected.size > 0, | ||
allRowsSelected: selectionMode === 'single' ? selected.size > 0 : selected.size === items.length, | ||
selectedRows: selected, | ||
toggleRow, | ||
toggleAllRows, | ||
clearRows: selectionManager.clearItems, | ||
deselectRow, | ||
selectRow, | ||
isRowSelected | ||
} | ||
}; | ||
} | ||
//# sourceMappingURL=useSelection.js.map |
import { useControllableState } from '@fluentui/react-utilities'; | ||
const noop = () => undefined; | ||
export const defaultTableSortState = { | ||
getSortDirection: () => 'ascending', | ||
setColumnSort: noop, | ||
sort: rows => [...rows], | ||
sortColumn: undefined, | ||
sortDirection: 'ascending', | ||
toggleColumnSort: noop | ||
}; | ||
export function useSort(options) { | ||
// False positive, these plugin hooks are intended to be run on every render | ||
// eslint-disable-next-line react-hooks/rules-of-hooks | ||
return tableState => useSortState(tableState, options); | ||
} | ||
export function useSortState(tableState, options) { | ||
const { | ||
columns, | ||
columns | ||
} = tableState; | ||
const { | ||
sortState, | ||
@@ -48,12 +66,14 @@ defaultSortState, | ||
const sort = items => items.slice().sort((a, b) => { | ||
const sortColumnDef = columns.find(column => column.columnId === sortColumn); | ||
const sort = rows => { | ||
return rows.slice().sort((a, b) => { | ||
const sortColumnDef = columns.find(column => column.columnId === sortColumn); | ||
if (!(sortColumnDef === null || sortColumnDef === void 0 ? void 0 : sortColumnDef.compare)) { | ||
return 0; | ||
} | ||
if (!(sortColumnDef === null || sortColumnDef === void 0 ? void 0 : sortColumnDef.compare)) { | ||
return 0; | ||
} | ||
const mod = sortDirection === 'ascending' ? 1 : -1; | ||
return sortColumnDef.compare(a, b) * mod; | ||
}); | ||
const mod = sortDirection === 'ascending' ? 1 : -1; | ||
return sortColumnDef.compare(a.item, b.item) * mod; | ||
}); | ||
}; | ||
@@ -64,11 +84,13 @@ const getSortDirection = columnId => { | ||
return { | ||
sortColumn, | ||
sortDirection, | ||
sort, | ||
setColumnSort, | ||
toggleColumnSort, | ||
getSortDirection | ||
return { ...tableState, | ||
sort: { | ||
sort, | ||
sortColumn, | ||
sortDirection, | ||
setColumnSort, | ||
toggleColumnSort, | ||
getSortDirection | ||
} | ||
}; | ||
} | ||
//# sourceMappingURL=useSort.js.map |
@@ -1,87 +0,32 @@ | ||
import * as React from 'react'; | ||
import { useSelection } from './useSelection'; | ||
import { useSort } from './useSort'; | ||
export function useTable(options) { | ||
import { defaultTableSelectionState } from './useSelection'; | ||
import { defaultTableSortState } from './useSort'; | ||
const defaultRowEnhancer = row => row; | ||
export function useTable(options, plugins = []) { | ||
const { | ||
items: baseItems, | ||
columns, | ||
getRowId: getUserRowId = () => undefined, | ||
selectionMode = 'multiselect', | ||
rowEnhancer = row => row, | ||
defaultSelectedRows, | ||
selectedRows: userSelectedRows, | ||
onSelectionChange, | ||
sortState: userSortState, | ||
defaultSortState, | ||
onSortChange | ||
items, | ||
getRowId, | ||
columns | ||
} = options; | ||
const getRowId = React.useCallback((item, index) => { | ||
const getRows = (rowEnhancer = defaultRowEnhancer) => items.map((item, i) => { | ||
var _a; | ||
return (_a = getUserRowId(item)) !== null && _a !== void 0 ? _a : index; | ||
}, [getUserRowId]); | ||
const { | ||
sortColumn, | ||
sortDirection, | ||
toggleColumnSort, | ||
setColumnSort, | ||
getSortDirection, | ||
sort | ||
} = useSort({ | ||
columns, | ||
sortState: userSortState, | ||
defaultSortState, | ||
onSortChange | ||
}); | ||
const sortState = React.useMemo(() => ({ | ||
sortColumn, | ||
sortDirection, | ||
setColumnSort, | ||
toggleColumnSort, | ||
getSortDirection | ||
}), [sortColumn, sortDirection, setColumnSort, toggleColumnSort, getSortDirection]); | ||
const { | ||
isRowSelected, | ||
toggleRow, | ||
toggleAllRows, | ||
clearRows, | ||
selectedRows, | ||
allRowsSelected, | ||
someRowsSelected, | ||
selectRow, | ||
deselectRow | ||
} = useSelection({ | ||
selectionMode, | ||
items: baseItems, | ||
getRowId, | ||
defaultSelectedItems: defaultSelectedRows, | ||
selectedItems: userSelectedRows, | ||
onSelectionChange | ||
}); | ||
const selectionState = React.useMemo(() => ({ | ||
isRowSelected, | ||
clearRows, | ||
deselectRow, | ||
selectRow, | ||
toggleAllRows, | ||
toggleRow, | ||
selectedRows: Array.from(selectedRows), | ||
allRowsSelected, | ||
someRowsSelected | ||
}), [isRowSelected, clearRows, deselectRow, selectRow, toggleAllRows, toggleRow, selectedRows, allRowsSelected, someRowsSelected]); | ||
const rows = React.useMemo(() => sort(baseItems).map((item, i) => { | ||
return rowEnhancer({ | ||
item, | ||
rowId: getRowId(item, i) | ||
}, { | ||
selection: selectionState, | ||
sort: sortState | ||
rowId: (_a = getRowId === null || getRowId === void 0 ? void 0 : getRowId(item)) !== null && _a !== void 0 ? _a : i | ||
}); | ||
}), [baseItems, getRowId, sort, rowEnhancer, selectionState, sortState]); | ||
return { | ||
rows, | ||
selection: selectionState, | ||
sort: sortState | ||
}); | ||
const initialState = { | ||
getRowId, | ||
items, | ||
columns, | ||
getRows, | ||
selection: defaultTableSelectionState, | ||
sort: defaultTableSortState | ||
}; | ||
return plugins.reduce((state, plugin) => plugin(state), initialState); | ||
} | ||
//# sourceMappingURL=useTable.js.map |
@@ -1,2 +0,2 @@ | ||
export { useTable } from './hooks'; | ||
export { useTable, useSelection, useSort } from './hooks'; | ||
export { TableCell, tableCellClassNames, tableCellClassName, useTableCellStyles_unstable, useTableCell_unstable, renderTableCell_unstable } from './TableCell'; | ||
@@ -3,0 +3,0 @@ export { TableRow, tableRowClassNames, tableRowClassName, useTableRowStyles_unstable, useTableRow_unstable, renderTableRow_unstable } from './TableRow'; |
{ | ||
"name": "@fluentui/react-table", | ||
"version": "9.0.0-alpha.4", | ||
"version": "9.0.0-alpha.5", | ||
"description": "React components for building web experiences", | ||
@@ -29,14 +29,14 @@ "main": "lib-commonjs/index.js", | ||
"@fluentui/react-conformance": "*", | ||
"@fluentui/react-conformance-griffel": "9.0.0-beta.14", | ||
"@fluentui/react-conformance-griffel": "9.0.0-beta.15", | ||
"@fluentui/scripts": "^1.0.0" | ||
}, | ||
"dependencies": { | ||
"@fluentui/react-aria": "^9.2.1", | ||
"@fluentui/react-avatar": "^9.2.0", | ||
"@fluentui/react-checkbox": "^9.0.7", | ||
"@fluentui/react-aria": "^9.2.2", | ||
"@fluentui/react-avatar": "^9.2.1", | ||
"@fluentui/react-checkbox": "^9.0.8", | ||
"@fluentui/react-icons": "^2.0.175", | ||
"@fluentui/react-tabster": "^9.1.2", | ||
"@fluentui/react-tabster": "^9.1.3", | ||
"@fluentui/react-theme": "^9.1.0", | ||
"@fluentui/react-utilities": "^9.1.0", | ||
"@griffel/react": "^1.3.0", | ||
"@fluentui/react-utilities": "^9.1.1", | ||
"@griffel/react": "^1.4.0", | ||
"tslib": "^2.1.0" | ||
@@ -43,0 +43,0 @@ }, |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
472932
5390
+ Added@fluentui/react-icons@2.0.269(transitive)
- Removed@fluentui/react-icons@2.0.270(transitive)
Updated@fluentui/react-aria@^9.2.2
Updated@griffel/react@^1.4.0