Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More

@fluentui/react-table

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@fluentui/react-table - npm Package Compare versions

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