@fluentui/react-table 9.0.0-alpha.11 → 9.0.0-alpha.13

package/lib/hooks/index.js

@@ -1,6 +1,6 @@
 export * from './types';
-export * from './useTable';
-export * from './useSort';
-export * from './useSelection';
+export * from './useTableFeatures';
+export * from './useTableSort';
+export * from './useTableSelection';
 export * from './createColumn';
 //# sourceMappingURL=index.js.map

package/lib/hooks/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["packages/react-components/react-table/src/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAC1B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC","sourcesContent":["export * from './types';\nexport * from './useTable';\nexport * from './useSort';\nexport * from './useSelection';\nexport * from './createColumn';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["packages/react-components/react-table/src/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,oBAAoB,CAAC;AACnC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,qBAAqB,CAAC;AACpC,cAAc,gBAAgB,CAAC","sourcesContent":["export * from './types';\nexport * from './useTableFeatures';\nexport * from './useTableSort';\nexport * from './useTableSelection';\nexport * from './createColumn';\n"]}

package/lib/hooks/selectionManager.js

@@ -4,7 +4,7 @@ export function createSelectionManager(mode, onSelectionChange = () => undefined
 }
 
 function createMultipleSelectionManager(onSelectionChange) {
-  const toggleAllItems = (itemIds, selectedItems) => {
+  const toggleAllItems = (e, itemIds, selectedItems) => {
     const allItemsSelected = itemIds.every(itemId => selectedItems.has(itemId));
 
     if (allItemsSelected) {
@@ -13,31 +13,31 @@ function createMultipleSelectionManager(onSelectionChange) {
       itemIds.forEach(itemId => selectedItems.add(itemId));
     }
 
-    onSelectionChange(new Set(selectedItems));
+    onSelectionChange(e, new Set(selectedItems));
   };
 
-  const toggleItem = (itemId, selectedItems) => {
+  const toggleItem = (e, itemId, selectedItems) => {
     if (selectedItems.has(itemId)) {
       selectedItems.delete(itemId);
     } else {
       selectedItems.add(itemId);
     }
 
-    onSelectionChange(new Set(selectedItems));
+    onSelectionChange(e, new Set(selectedItems));
   };
 
-  const selectItem = (itemId, selectedItems) => {
+  const selectItem = (e, itemId, selectedItems) => {
     selectedItems.add(itemId);
-    onSelectionChange(new Set(selectedItems));
+    onSelectionChange(e, new Set(selectedItems));
   };
 
-  const deselectItem = (itemId, selectedItems) => {
+  const deselectItem = (e, itemId, selectedItems) => {
     selectedItems.delete(itemId);
-    onSelectionChange(new Set(selectedItems));
+    onSelectionChange(e, new Set(selectedItems));
   };
 
-  const clearItems = () => {
-    onSelectionChange(new Set());
+  const clearItems = e => {
+    onSelectionChange(e, new Set());
   };
 
   const isSelected = (itemId, selectedItems) => {
@@ -55,20 +55,20 @@ function createMultipleSelectionManager(onSelectionChange) {
 }
 
 function createSingleSelectionManager(onSelectionChange) {
-  const toggleItem = itemId => {
-    onSelectionChange(new Set([itemId]));
+  const toggleItem = (e, itemId) => {
+    onSelectionChange(e, new Set([itemId]));
   };
 
-  const clearItems = () => {
-    onSelectionChange(new Set());
+  const clearItems = e => {
+    onSelectionChange(e, new Set());
   };
 
   const isSelected = (itemId, selectedItems) => {
     return selectedItems.has(itemId);
   };
 
-  const selectItem = itemId => {
-    onSelectionChange(new Set([itemId]));
+  const selectItem = (e, itemId) => {
+    onSelectionChange(e, new Set([itemId]));
   };
 
   return {

package/lib/hooks/selectionManager.js.map

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-table/src/hooks/selectionManager.ts"],"names":[],"mappings":"AAeA,OAAM,SAAU,sBAAV,CACJ,IADI,EAEJ,iBAAA,GAA+C,MAAM,SAFjD,EAE0D;EAE9D,MAAM,cAAc,GAAG,IAAI,KAAK,aAAT,GAAyB,8BAAzB,GAA0D,4BAAjF;EAEA,OAAO,cAAc,CAAC,iBAAD,CAArB;AACD;;AAED,SAAS,8BAAT,CAAwC,iBAAxC,EAAoF;EAClF,MAAM,cAAc,GAAG,CAAC,OAAD,EAA6B,aAA7B,KAAoE;IACzF,MAAM,gBAAgB,GAAG,OAAO,CAAC,KAAR,CAAc,MAAM,IAAI,aAAa,CAAC,GAAd,CAAkB,MAAlB,CAAxB,CAAzB;;IAEA,IAAI,gBAAJ,EAAsB;MACpB,aAAa,CAAC,KAAd;IACD,CAFD,MAEO;MACL,OAAO,CAAC,OAAR,CAAgB,MAAM,IAAI,aAAa,CAAC,GAAd,CAAkB,MAAlB,CAA1B;IACD;;IAED,iBAAiB,CAAC,IAAI,GAAJ,CAAQ,aAAR,CAAD,CAAjB;EACD,CAVD;;EAYA,MAAM,UAAU,GAAG,CAAC,MAAD,EAA0B,aAA1B,KAAiE;IAClF,IAAI,aAAa,CAAC,GAAd,CAAkB,MAAlB,CAAJ,EAA+B;MAC7B,aAAa,CAAC,MAAd,CAAqB,MAArB;IACD,CAFD,MAEO;MACL,aAAa,CAAC,GAAd,CAAkB,MAAlB;IACD;;IAED,iBAAiB,CAAC,IAAI,GAAJ,CAAQ,aAAR,CAAD,CAAjB;EACD,CARD;;EAUA,MAAM,UAAU,GAAG,CAAC,MAAD,EAA0B,aAA1B,KAAiE;IAClF,aAAa,CAAC,GAAd,CAAkB,MAAlB;IACA,iBAAiB,CAAC,IAAI,GAAJ,CAAQ,aAAR,CAAD,CAAjB;EACD,CAHD;;EAKA,MAAM,YAAY,GAAG,CAAC,MAAD,EAA0B,aAA1B,KAAiE;IACpF,aAAa,CAAC,MAAd,CAAqB,MAArB;IACA,iBAAiB,CAAC,IAAI,GAAJ,CAAQ,aAAR,CAAD,CAAjB;EACD,CAHD;;EAKA,MAAM,UAAU,GAAG,MAAK;IACtB,iBAAiB,CAAC,IAAI,GAAJ,EAAD,CAAjB;EACD,CAFD;;EAIA,MAAM,UAAU,GAAG,CAAC,MAAD,EAA0B,aAA1B,KAAiE;IAClF,OAAO,aAAa,CAAC,GAAd,CAAkB,MAAlB,CAAP;EACD,CAFD;;EAIA,OAAO;IACL,UADK;IAEL,UAFK;IAGL,YAHK;IAIL,UAJK;IAKL,UALK;IAML;EANK,CAAP;AAQD;;AAED,SAAS,4BAAT,CAAsC,iBAAtC,EAAkF;EAChF,MAAM,UAAU,GAAI,MAAD,IAA4B;IAC7C,iBAAiB,CAAC,IAAI,GAAJ,CAAQ,CAAC,MAAD,CAAR,CAAD,CAAjB;EACD,CAFD;;EAIA,MAAM,UAAU,GAAG,MAAK;IACtB,iBAAiB,CAAC,IAAI,GAAJ,EAAD,CAAjB;EACD,CAFD;;EAIA,MAAM,UAAU,GAAG,CAAC,MAAD,EAA0B,aAA1B,KAAiE;IAClF,OAAO,aAAa,CAAC,GAAd,CAAkB,MAAlB,CAAP;EACD,CAFD;;EAIA,MAAM,UAAU,GAAI,MAAD,IAA4B;IAC7C,iBAAiB,CAAC,IAAI,GAAJ,CAAQ,CAAC,MAAD,CAAR,CAAD,CAAjB;EACD,CAFD;;EAIA,OAAO;IACL,YAAY,EAAE,UADT;IAEL,UAFK;IAGL,cAAc,EAAE,MAAK;MACnB,IAAI,OAAO,CAAC,GAAR,CAAY,QAAZ,KAAyB,YAA7B,EAA2C;QACzC,MAAM,IAAI,KAAJ,CAAU,6EAAV,CAAN;MACD;;MAED,OAAO,SAAP;IACD,CATI;IAUL,UAVK;IAWL,UAXK;IAYL;EAZK,CAAP;AAcD","sourcesContent":["import { SelectionMode } from './types';\n\ntype OnSelectionChangeCallback = (selectedItems: Set<SelectionItemId>) => void;\n\nexport interface SelectionManager {\n  toggleItem(id: SelectionItemId, selectedItems: Set<SelectionItemId>): void;\n  selectItem(id: SelectionItemId, selectedItems: Set<SelectionItemId>): void;\n  deselectItem(id: SelectionItemId, selectedItems: Set<SelectionItemId>): void;\n  clearItems(): void;\n  isSelected(id: SelectionItemId, selectedItems: Set<SelectionItemId>): boolean;\n  toggleAllItems(itemIds: SelectionItemId[], selectedItems: Set<SelectionItemId>): void;\n}\n\nexport type SelectionItemId = string | number;\n\nexport function createSelectionManager(\n  mode: SelectionMode,\n  onSelectionChange: OnSelectionChangeCallback = () => undefined,\n): SelectionManager {\n  const managerFactory = mode === 'multiselect' ? createMultipleSelectionManager : createSingleSelectionManager;\n\n  return managerFactory(onSelectionChange);\n}\n\nfunction createMultipleSelectionManager(onSelectionChange: OnSelectionChangeCallback): SelectionManager {\n  const toggleAllItems = (itemIds: SelectionItemId[], selectedItems: Set<SelectionItemId>) => {\n    const allItemsSelected = itemIds.every(itemId => selectedItems.has(itemId));\n\n    if (allItemsSelected) {\n      selectedItems.clear();\n    } else {\n      itemIds.forEach(itemId => selectedItems.add(itemId));\n    }\n\n    onSelectionChange(new Set(selectedItems));\n  };\n\n  const toggleItem = (itemId: SelectionItemId, selectedItems: Set<SelectionItemId>) => {\n    if (selectedItems.has(itemId)) {\n      selectedItems.delete(itemId);\n    } else {\n      selectedItems.add(itemId);\n    }\n\n    onSelectionChange(new Set(selectedItems));\n  };\n\n  const selectItem = (itemId: SelectionItemId, selectedItems: Set<SelectionItemId>) => {\n    selectedItems.add(itemId);\n    onSelectionChange(new Set(selectedItems));\n  };\n\n  const deselectItem = (itemId: SelectionItemId, selectedItems: Set<SelectionItemId>) => {\n    selectedItems.delete(itemId);\n    onSelectionChange(new Set(selectedItems));\n  };\n\n  const clearItems = () => {\n    onSelectionChange(new Set());\n  };\n\n  const isSelected = (itemId: SelectionItemId, selectedItems: Set<SelectionItemId>) => {\n    return selectedItems.has(itemId);\n  };\n\n  return {\n    toggleItem,\n    selectItem,\n    deselectItem,\n    clearItems,\n    isSelected,\n    toggleAllItems,\n  };\n}\n\nfunction createSingleSelectionManager(onSelectionChange: OnSelectionChangeCallback): SelectionManager {\n  const toggleItem = (itemId: SelectionItemId) => {\n    onSelectionChange(new Set([itemId]));\n  };\n\n  const clearItems = () => {\n    onSelectionChange(new Set<SelectionItemId>());\n  };\n\n  const isSelected = (itemId: SelectionItemId, selectedItems: Set<SelectionItemId>) => {\n    return selectedItems.has(itemId);\n  };\n\n  const selectItem = (itemId: SelectionItemId) => {\n    onSelectionChange(new Set([itemId]));\n  };\n\n  return {\n    deselectItem: clearItems,\n    selectItem,\n    toggleAllItems: () => {\n      if (process.env.NODE_ENV !== 'production') {\n        throw new Error('[react-table]: `toggleAllItems` should not be used in single selection mode');\n      }\n\n      return undefined;\n    },\n    toggleItem,\n    clearItems,\n    isSelected,\n  };\n}\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["packages/react-components/react-table/src/hooks/selectionManager.ts"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { SelectionMode } from './types';\n\ntype OnSelectionChangeCallback = (e: React.SyntheticEvent | Event, selectedItems: Set<SelectionItemId>) => void;\n\nexport interface SelectionManager {\n  toggleItem(e: React.SyntheticEvent | Event, id: SelectionItemId, selectedItems: Set<SelectionItemId>): void;\n  selectItem(e: React.SyntheticEvent | Event, id: SelectionItemId, selectedItems: Set<SelectionItemId>): void;\n  deselectItem(e: React.SyntheticEvent | Event, id: SelectionItemId, selectedItems: Set<SelectionItemId>): void;\n  clearItems(e: React.SyntheticEvent | Event): void;\n  isSelected(id: SelectionItemId, selectedItems: Set<SelectionItemId>): boolean;\n  toggleAllItems(\n    e: React.SyntheticEvent | Event,\n    itemIds: SelectionItemId[],\n    selectedItems: Set<SelectionItemId>,\n  ): void;\n}\n\nexport type SelectionItemId = string | number;\n\nexport function createSelectionManager(\n  mode: SelectionMode,\n  onSelectionChange: OnSelectionChangeCallback = () => undefined,\n): SelectionManager {\n  const managerFactory = mode === 'multiselect' ? createMultipleSelectionManager : createSingleSelectionManager;\n\n  return managerFactory(onSelectionChange);\n}\n\nfunction createMultipleSelectionManager(onSelectionChange: OnSelectionChangeCallback): SelectionManager {\n  const toggleAllItems: SelectionManager['toggleAllItems'] = (e, itemIds, selectedItems) => {\n    const allItemsSelected = itemIds.every(itemId => selectedItems.has(itemId));\n\n    if (allItemsSelected) {\n      selectedItems.clear();\n    } else {\n      itemIds.forEach(itemId => selectedItems.add(itemId));\n    }\n\n    onSelectionChange(e, new Set(selectedItems));\n  };\n\n  const toggleItem: SelectionManager['toggleItem'] = (e, itemId, selectedItems) => {\n    if (selectedItems.has(itemId)) {\n      selectedItems.delete(itemId);\n    } else {\n      selectedItems.add(itemId);\n    }\n\n    onSelectionChange(e, new Set(selectedItems));\n  };\n\n  const selectItem: SelectionManager['selectItem'] = (e, itemId, selectedItems) => {\n    selectedItems.add(itemId);\n    onSelectionChange(e, new Set(selectedItems));\n  };\n\n  const deselectItem: SelectionManager['deselectItem'] = (e, itemId, selectedItems) => {\n    selectedItems.delete(itemId);\n    onSelectionChange(e, new Set(selectedItems));\n  };\n\n  const clearItems: SelectionManager['clearItems'] = e => {\n    onSelectionChange(e, new Set());\n  };\n\n  const isSelected = (itemId: SelectionItemId, selectedItems: Set<SelectionItemId>) => {\n    return selectedItems.has(itemId);\n  };\n\n  return {\n    toggleItem,\n    selectItem,\n    deselectItem,\n    clearItems,\n    isSelected,\n    toggleAllItems,\n  };\n}\n\nfunction createSingleSelectionManager(onSelectionChange: OnSelectionChangeCallback): SelectionManager {\n  const toggleItem: SelectionManager['toggleItem'] = (e, itemId) => {\n    onSelectionChange(e, new Set([itemId]));\n  };\n\n  const clearItems: SelectionManager['clearItems'] = e => {\n    onSelectionChange(e, new Set<SelectionItemId>());\n  };\n\n  const isSelected = (itemId: SelectionItemId, selectedItems: Set<SelectionItemId>) => {\n    return selectedItems.has(itemId);\n  };\n\n  const selectItem: SelectionManager['selectItem'] = (e, itemId) => {\n    onSelectionChange(e, new Set([itemId]));\n  };\n\n  return {\n    deselectItem: clearItems,\n    selectItem,\n    toggleAllItems: () => {\n      if (process.env.NODE_ENV !== 'production') {\n        throw new Error('[react-table]: `toggleAllItems` should not be used in single selection mode');\n      }\n\n      return undefined;\n    },\n    toggleItem,\n    clearItems,\n    isSelected,\n  };\n}\n"],"sourceRoot":"../src/"}

package/lib/hooks/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","sourceRoot":"../src/","sources":["packages/react-components/react-table/src/hooks/types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport { SortDirection } from '../components/Table/Table.types';\n\nexport type RowId = string | number;\nexport type ColumnId = string | number;\nexport type SelectionMode = 'single' | 'multiselect';\n\nexport interface SortState {\n  sortColumn: ColumnId | undefined;\n  sortDirection: SortDirection;\n}\n\nexport interface CreateColumnOptions<TItem> extends Partial<ColumnDefinition<TItem>> {\n  columnId: ColumnId;\n}\n\nexport interface ColumnDefinition<TItem> {\n  columnId: ColumnId;\n  compare: (a: TItem, b: TItem) => number;\n  renderHeaderCell: () => React.ReactNode;\n  renderCell: (item: TItem) => React.ReactNode;\n}\n\nexport type RowEnhancer<TItem, TRowState extends RowState<TItem> = RowState<TItem>> = (\n  row: RowState<TItem>,\n) => TRowState;\n\nexport interface TableSortState<TItem> {\n  /**\n   * Current sort direction\n   */\n  sortDirection: SortDirection;\n  /**\n   * Column id of the currently sorted column\n   */\n  sortColumn: ColumnId | undefined;\n  /**\n   * Set the sort direction for the specified column\n   */\n  setColumnSort: (columnId: ColumnId, sortDirection: SortDirection) => void;\n  /**\n   * Toggles the sort direction for specified column\n   */\n  toggleColumnSort: (columnId: ColumnId) => void;\n  /**\n   * Returns the sort direction if a column is sorted,\n   * returns undefined if the column is not sorted\n   */\n  getSortDirection: (columnId: ColumnId) => SortDirection | undefined;\n\n  /**\n   * Sorts rows and returns a **shallow** copy of original items\n   */\n  sort: <TRowState extends RowState<TItem>>(rows: TRowState[]) => TRowState[];\n}\n\nexport interface TableSelectionState {\n  /**\n   * Clears all selected rows\n   */\n  clearRows: () => void;\n  /**\n   * Selects single row\n   */\n  selectRow: (rowId: RowId) => void;\n  /**\n   * De-selects single row\n   */\n  deselectRow: (rowId: RowId) => void;\n  /**\n   * Toggle selection of all rows\n   */\n  toggleAllRows: () => void;\n  /**\n   * Toggle selection of single row\n   */\n  toggleRow: (rowId: RowId) => void;\n  /**\n   * Collection of row ids corresponding to selected rows\n   */\n  selectedRows: Set<RowId>;\n  /**\n   * Whether all rows are selected\n   */\n  allRowsSelected: boolean;\n  /**\n   * Whether some rows are selected\n   */\n  someRowsSelected: boolean;\n\n  /**\n   * Checks if a given rowId is selected\n   */\n  isRowSelected: (rowId: RowId) => boolean;\n}\n\nexport interface RowState<TItem> {\n  /**\n   * User provided data\n   */\n  item: TItem;\n  /**\n   * The row id, defaults to index position in the collection\n   */\n  rowId: RowId;\n}\n\nexport interface TableState<TItem> extends Pick<UseTableOptions<TItem>, 'items' | 'getRowId'> {\n  /**\n   * The row data for rendering\n   * @param rowEnhancer - Enhances the row with extra user data\n   */\n  getRows: <TRowState extends RowState<TItem> = RowState<TItem>>(\n    rowEnhancer?: RowEnhancer<TItem, TRowState>,\n  ) => TRowState[];\n  /**\n   * State and actions to manage row selection\n   */\n  selection: TableSelectionState;\n  /**\n   * State and actions to manage row sorting\n   */\n  sort: TableSortState<TItem>;\n  /**\n   * Table columns\n   */\n  columns: ColumnDefinition<TItem>[];\n}\n\nexport interface UseSortOptions {\n  /**\n   * Used to control sorting\n   */\n  sortState?: SortState;\n  /**\n   * Used in uncontrolled mode to set initial sort column and direction on mount\n   */\n  defaultSortState?: SortState;\n  /**\n   * Called when sort changes\n   */\n  onSortChange?: (state: SortState) => void;\n}\n\nexport interface UseSelectionOptions {\n  /**\n   * Can be multi or single select\n   */\n  selectionMode: SelectionMode;\n  /**\n   * Used in uncontrolled mode to set initial selected rows on mount\n   */\n  defaultSelectedItems?: Set<RowId>;\n  /**\n   * Used to control row selection\n   */\n  selectedItems?: Set<RowId>;\n  /**\n   * Called when selection changes\n   */\n  onSelectionChange?: (selectedItems: Set<RowId>) => void;\n}\n\nexport interface UseTableOptions<TItem> {\n  columns: ColumnDefinition<TItem>[];\n  items: TItem[];\n  getRowId?: (item: TItem) => RowId;\n}\n\nexport type TableStatePlugin = <TItem>(tableState: TableState<TItem>) => TableState<TItem>;\n"]}
+{"version":3,"file":"types.js","sourceRoot":"../src/","sources":["packages/react-components/react-table/src/hooks/types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport { SortDirection } from '../components/Table/Table.types';\n\nexport type RowId = string | number;\nexport type ColumnId = string | number;\nexport type SelectionMode = 'single' | 'multiselect';\n\nexport interface SortState {\n  sortColumn: ColumnId | undefined;\n  sortDirection: SortDirection;\n}\n\nexport interface OnSelectionChangeData {\n  selectedItems: Set<RowId>;\n}\n\nexport interface CreateColumnOptions<TItem> extends Partial<ColumnDefinition<TItem>> {\n  columnId: ColumnId;\n}\n\nexport interface ColumnDefinition<TItem> {\n  columnId: ColumnId;\n  compare: (a: TItem, b: TItem) => number;\n  renderHeaderCell: () => React.ReactNode;\n  renderCell: (item: TItem) => React.ReactNode;\n}\n\nexport type RowEnhancer<TItem, TRowState extends RowState<TItem> = RowState<TItem>> = (\n  row: RowState<TItem>,\n) => TRowState;\n\nexport interface TableSortState<TItem> {\n  /**\n   * Current sort direction\n   */\n  sortDirection: SortDirection;\n  /**\n   * Column id of the currently sorted column\n   */\n  sortColumn: ColumnId | undefined;\n  /**\n   * Set the sort direction for the specified column\n   */\n  setColumnSort: (event: React.SyntheticEvent, columnId: ColumnId, sortDirection: SortDirection) => void;\n  /**\n   * Toggles the sort direction for specified column\n   */\n  toggleColumnSort: (event: React.SyntheticEvent, columnId: ColumnId) => void;\n  /**\n   * Returns the sort direction if a column is sorted,\n   * returns undefined if the column is not sorted\n   */\n  getSortDirection: (columnId: ColumnId) => SortDirection | undefined;\n\n  /**\n   * Sorts rows and returns a **shallow** copy of original items\n   */\n  sort: <TRowState extends RowState<TItem>>(rows: TRowState[]) => TRowState[];\n}\n\nexport interface TableSelectionState {\n  /**\n   * Clears all selected rows\n   */\n  clearRows: (e: React.SyntheticEvent) => void;\n  /**\n   * Selects single row\n   */\n  selectRow: (e: React.SyntheticEvent, rowId: RowId) => void;\n  /**\n   * De-selects single row\n   */\n  deselectRow: (e: React.SyntheticEvent, rowId: RowId) => void;\n  /**\n   * Toggle selection of all rows\n   */\n  toggleAllRows: (e: React.SyntheticEvent) => void;\n  /**\n   * Toggle selection of single row\n   */\n  toggleRow: (e: React.SyntheticEvent, rowId: RowId) => void;\n  /**\n   * Collection of row ids corresponding to selected rows\n   */\n  selectedRows: Set<RowId>;\n  /**\n   * Whether all rows are selected\n   */\n  allRowsSelected: boolean;\n  /**\n   * Whether some rows are selected\n   */\n  someRowsSelected: boolean;\n\n  /**\n   * Checks if a given rowId is selected\n   */\n  isRowSelected: (rowId: RowId) => boolean;\n\n  selectionMode: SelectionMode;\n}\n\nexport interface RowState<TItem> {\n  /**\n   * User provided data\n   */\n  item: TItem;\n  /**\n   * The row id, defaults to index position in the collection\n   */\n  rowId: RowId;\n}\n\nexport interface TableState<TItem> extends Pick<UseTableOptions<TItem>, 'items' | 'getRowId'> {\n  /**\n   * The row data for rendering\n   * @param rowEnhancer - Enhances the row with extra user data\n   */\n  getRows: <TRowState extends RowState<TItem> = RowState<TItem>>(\n    rowEnhancer?: RowEnhancer<TItem, TRowState>,\n  ) => TRowState[];\n  /**\n   * State and actions to manage row selection\n   */\n  selection: TableSelectionState;\n  /**\n   * State and actions to manage row sorting\n   */\n  sort: TableSortState<TItem>;\n  /**\n   * Table columns\n   */\n  columns: ColumnDefinition<TItem>[];\n}\n\nexport interface UseTableSortOptions {\n  /**\n   * Used to control sorting\n   */\n  sortState?: SortState;\n  /**\n   * Used in uncontrolled mode to set initial sort column and direction on mount\n   */\n  defaultSortState?: SortState;\n  /**\n   * Called when sort changes\n   */\n  onSortChange?(e: React.SyntheticEvent, state: SortState): void;\n}\n\nexport interface UseTableSelectionOptions {\n  /**\n   * Can be multi or single select\n   */\n  selectionMode: SelectionMode;\n  /**\n   * Used in uncontrolled mode to set initial selected rows on mount\n   */\n  defaultSelectedItems?: Set<RowId>;\n  /**\n   * Used to control row selection\n   */\n  selectedItems?: Set<RowId>;\n  /**\n   * Called when selection changes\n   */\n  onSelectionChange?(e: React.SyntheticEvent, data: OnSelectionChangeData): void;\n}\n\nexport interface UseTableOptions<TItem> {\n  columns: ColumnDefinition<TItem>[];\n  items: TItem[];\n  getRowId?: (item: TItem) => RowId;\n}\n\nexport type TableStatePlugin = <TItem>(tableState: TableState<TItem>) => TableState<TItem>;\n"]}

package/lib/hooks/{useTable.js → useTableFeatures.js}

@@ -1,5 +1,5 @@
-import { defaultTableSelectionState } from './useSelection';
-import { defaultTableSortState } from './useSort';
+import { defaultTableSelectionState } from './useTableSelection';
+import { defaultTableSortState } from './useTableSort';
 
 const defaultRowEnhancer = row => row;
 
@@ -11,7 +11,7 @@ export const defaultTableState = {
   items: [],
   columns: []
 };
-export function useTable(options, plugins = []) {
+export function useTableFeatures(options, plugins = []) {
   const {
     items,
     getRowId,
@@ -37,4 +37,4 @@ export function useTable(options, plugins = []) {
   };
   return plugins.reduce((state, plugin) => plugin(state), initialState);
 }
-//# sourceMappingURL=useTable.js.map
+//# sourceMappingURL=useTableFeatures.js.map

package/lib/hooks/useTableFeatures.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["packages/react-components/react-table/src/hooks/useTableFeatures.ts"],"names":[],"mappings":"AACA,SAAS,0BAAT,QAA2C,qBAA3C;AACA,SAAS,qBAAT,QAAsC,gBAAtC;;AAEA,MAAM,kBAAkB,GAA4C,GAAG,IAAI,GAA3E;;AAEA,OAAO,MAAM,iBAAiB,GAAwB;EACpD,SAAS,EAAE,0BADyC;EAEpD,IAAI,EAAE,qBAF8C;EAGpD,OAAO,EAAE,MAAM,EAHqC;EAIpD,QAAQ,EAAE,MAAM,EAJoC;EAKpD,KAAK,EAAE,EAL6C;EAMpD,OAAO,EAAE;AAN2C,CAA/C;AASP,OAAM,SAAU,gBAAV,CACJ,OADI,EAEJ,OAAA,GAA8B,EAF1B,EAE4B;EAEhC,MAAM;IAAE,KAAF;IAAS,QAAT;IAAmB;EAAnB,IAA+B,OAArC;;EAEA,MAAM,OAAO,GAAG,CACd,WAAA,GAAc,kBADA,KAEX,KAAK,CAAC,GAAN,CAAU,CAAC,IAAD,EAAO,CAAP,KAAY;IAAA,IAAA,EAAA;;IAAC,OAAA,WAAW,CAAC;MAAE,IAAF;MAAQ,KAAK,EAAE,CAAA,EAAA,GAAA,QAAQ,KAAA,IAAR,IAAA,QAAQ,KAAA,KAAA,CAAR,GAAQ,KAAA,CAAR,GAAA,QAAQ,CAAG,IAAH,CAAR,MAAgB,IAAhB,IAAgB,EAAA,KAAA,KAAA,CAAhB,GAAgB,EAAhB,GAAoB;IAAnC,CAAD,CAAX;EAAmD,CAA1E,CAFL;;EAIA,MAAM,YAAY,GAAsB;IACtC,QADsC;IAEtC,KAFsC;IAGtC,OAHsC;IAItC,OAJsC;IAKtC,SAAS,EAAE,0BAL2B;IAMtC,IAAI,EAAE;EANgC,CAAxC;EASA,OAAO,OAAO,CAAC,MAAR,CAAe,CAAC,KAAD,EAAQ,MAAR,KAAmB,MAAM,CAAC,KAAD,CAAxC,EAAiD,YAAjD,CAAP;AACD","sourcesContent":["import type { UseTableOptions, TableState, RowState, RowEnhancer, TableStatePlugin, TableSortState } from './types';\nimport { defaultTableSelectionState } from './useTableSelection';\nimport { defaultTableSortState } from './useTableSort';\n\nconst defaultRowEnhancer: RowEnhancer<unknown, RowState<unknown>> = row => row;\n\nexport const defaultTableState: TableState<unknown> = {\n  selection: defaultTableSelectionState,\n  sort: defaultTableSortState,\n  getRows: () => [],\n  getRowId: () => '',\n  items: [],\n  columns: [],\n};\n\nexport function useTableFeatures<TItem>(\n  options: UseTableOptions<TItem>,\n  plugins: TableStatePlugin[] = [],\n): TableState<TItem> {\n  const { items, getRowId, columns } = options;\n\n  const getRows = <TRowState extends RowState<TItem>>(\n    rowEnhancer = defaultRowEnhancer as RowEnhancer<TItem, TRowState>,\n  ) => items.map((item, i) => rowEnhancer({ item, rowId: getRowId?.(item) ?? i }));\n\n  const initialState: TableState<TItem> = {\n    getRowId,\n    items,\n    columns,\n    getRows,\n    selection: defaultTableSelectionState,\n    sort: defaultTableSortState as TableSortState<TItem>,\n  };\n\n  return plugins.reduce((state, plugin) => plugin(state), initialState);\n}\n"],"sourceRoot":"../src/"}

package/lib/hooks/{useSelection.js → useTableSelection.js}

@@ -13,14 +13,15 @@ export const defaultTableSelectionState = {
   selectedRows: /*#__PURE__*/new Set(),
   someRowsSelected: false,
   toggleAllRows: noop,
-  toggleRow: noop
+  toggleRow: noop,
+  selectionMode: 'multiselect'
 };
-export function useSelection(options) {
+export function useTableSelection(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);
+  return tableState => useTableSelectionState(tableState, options);
 }
-export function useSelectionState(tableState, options) {
+export function useTableSelectionState(tableState, options) {
   const {
     items,
     getRowId
@@ -37,28 +38,31 @@ export function useSelectionState(tableState, options) {
     state: selectedItems
   });
   const selectionManager = React.useMemo(() => {
-    return createSelectionManager(selectionMode, newSelectedItems => {
+    return createSelectionManager(selectionMode, (e, newSelectedItems) => {
       setSelected(() => {
-        onSelectionChange === null || onSelectionChange === void 0 ? void 0 : onSelectionChange(newSelectedItems);
+        onSelectionChange === null || onSelectionChange === void 0 ? void 0 : onSelectionChange(e, {
+          selectedItems: newSelectedItems
+        });
         return newSelectedItems;
       });
     });
   }, [onSelectionChange, selectionMode, setSelected]);
-  const toggleAllRows = useEventCallback(() => {
-    selectionManager.toggleAllItems(items.map((item, i) => {
+  const toggleAllRows = useEventCallback(e => {
+    selectionManager.toggleAllItems(e, items.map((item, i) => {
       var _a;
 
       return (_a = getRowId === null || getRowId === void 0 ? void 0 : getRowId(item)) !== null && _a !== void 0 ? _a : i;
     }), selected);
   });
-  const toggleRow = useEventCallback(rowId => selectionManager.toggleItem(rowId, selected));
-  const deselectRow = useEventCallback(rowId => selectionManager.deselectItem(rowId, selected));
-  const selectRow = useEventCallback(rowId => selectionManager.selectItem(rowId, selected));
+  const toggleRow = useEventCallback((e, rowId) => selectionManager.toggleItem(e, rowId, selected));
+  const deselectRow = useEventCallback((e, rowId) => selectionManager.deselectItem(e, rowId, selected));
+  const selectRow = useEventCallback((e, rowId) => selectionManager.selectItem(e, rowId, selected));
 
   const isRowSelected = rowId => selectionManager.isSelected(rowId, selected);
 
   return { ...tableState,
     selection: {
+      selectionMode,
       someRowsSelected: selected.size > 0,
       allRowsSelected: selectionMode === 'single' ? selected.size > 0 : selected.size === items.length,
       selectedRows: selected,
@@ -71,4 +75,4 @@ export function useSelectionState(tableState, options) {
     }
   };
 }
-//# sourceMappingURL=useSelection.js.map
+//# sourceMappingURL=useTableSelection.js.map

package/lib/hooks/useTableSelection.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["packages/react-components/react-table/src/hooks/useTableSelection.ts"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { useControllableState, useEventCallback } from '@fluentui/react-utilities';\nimport { createSelectionManager } from './selectionManager';\nimport type { RowId, TableSelectionState, TableState, UseTableSelectionOptions } from './types';\n\nconst noop = () => undefined;\n\nexport const defaultTableSelectionState: TableSelectionState = {\n  allRowsSelected: false,\n  clearRows: noop,\n  deselectRow: noop,\n  isRowSelected: () => false,\n  selectRow: noop,\n  selectedRows: new Set(),\n  someRowsSelected: false,\n  toggleAllRows: noop,\n  toggleRow: noop,\n  selectionMode: 'multiselect',\n};\n\nexport function useTableSelection<TItem>(options: UseTableSelectionOptions) {\n  // False positive, these plugin hooks are intended to be run on every render\n  // eslint-disable-next-line react-hooks/rules-of-hooks\n  return (tableState: TableState<TItem>) => useTableSelectionState(tableState, options);\n}\n\nexport function useTableSelectionState<TItem>(\n  tableState: TableState<TItem>,\n  options: UseTableSelectionOptions,\n): TableState<TItem> {\n  const { items, getRowId } = tableState;\n  const { selectionMode, defaultSelectedItems, selectedItems, onSelectionChange } = options;\n\n  const [selected, setSelected] = useControllableState({\n    initialState: new Set<RowId>(),\n    defaultState: defaultSelectedItems,\n    state: selectedItems,\n  });\n\n  const selectionManager = React.useMemo(() => {\n    return createSelectionManager(selectionMode, (e, newSelectedItems) => {\n      setSelected(() => {\n        onSelectionChange?.(e as React.SyntheticEvent, { selectedItems: newSelectedItems });\n        return newSelectedItems;\n      });\n    });\n  }, [onSelectionChange, selectionMode, setSelected]);\n\n  const toggleAllRows: TableSelectionState['toggleAllRows'] = useEventCallback(e => {\n    selectionManager.toggleAllItems(\n      e,\n      items.map((item, i) => getRowId?.(item) ?? i),\n      selected,\n    );\n  });\n\n  const toggleRow: TableSelectionState['toggleRow'] = useEventCallback((e, rowId: RowId) =>\n    selectionManager.toggleItem(e, rowId, selected),\n  );\n\n  const deselectRow: TableSelectionState['deselectRow'] = useEventCallback((e, rowId: RowId) =>\n    selectionManager.deselectItem(e, rowId, selected),\n  );\n\n  const selectRow: TableSelectionState['selectRow'] = useEventCallback((e, rowId: RowId) =>\n    selectionManager.selectItem(e, rowId, selected),\n  );\n\n  const isRowSelected: TableSelectionState['isRowSelected'] = (rowId: RowId) =>\n    selectionManager.isSelected(rowId, selected);\n\n  return {\n    ...tableState,\n    selection: {\n      selectionMode,\n      someRowsSelected: selected.size > 0,\n      allRowsSelected: selectionMode === 'single' ? selected.size > 0 : selected.size === items.length,\n      selectedRows: selected,\n      toggleRow,\n      toggleAllRows,\n      clearRows: selectionManager.clearItems,\n      deselectRow,\n      selectRow,\n      isRowSelected,\n    },\n  };\n}\n"],"sourceRoot":"../src/"}

package/lib/hooks/{useSort.js → useTableSort.js}

@@ -10,12 +10,12 @@ export const defaultTableSortState = {
   sortDirection: 'ascending',
   toggleColumnSort: noop
 };
-export function useSort(options) {
+export function useTableSort(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);
+  return tableState => useTableSortState(tableState, options);
 }
-export function useSortState(tableState, options) {
+export function useTableSortState(tableState, options) {
   const {
     columns
   } = tableState;
@@ -37,7 +37,7 @@ export function useSortState(tableState, options) {
     sortDirection
   } = sorted;
 
-  const toggleColumnSort = columnId => {
+  const toggleColumnSort = (e, columnId) => {
     setSorted(s => {
       const newState = { ...s,
         sortColumn: columnId
@@ -49,17 +49,17 @@ export function useSortState(tableState, options) {
         newState.sortDirection = 'ascending';
       }
 
-      onSortChange === null || onSortChange === void 0 ? void 0 : onSortChange(newState);
+      onSortChange === null || onSortChange === void 0 ? void 0 : onSortChange(e, newState);
       return newState;
     });
   };
 
-  const setColumnSort = (nextSortColumn, nextSortDirection) => {
+  const setColumnSort = (e, nextSortColumn, nextSortDirection) => {
     const newState = {
       sortColumn: nextSortColumn,
       sortDirection: nextSortDirection
     };
-    onSortChange === null || onSortChange === void 0 ? void 0 : onSortChange(newState);
+    onSortChange === null || onSortChange === void 0 ? void 0 : onSortChange(e, newState);
     setSorted(newState);
   };
 
@@ -91,4 +91,4 @@ export function useSortState(tableState, options) {
     }
   };
 }
-//# sourceMappingURL=useSort.js.map
+//# sourceMappingURL=useTableSort.js.map

package/lib/hooks/useTableSort.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["packages/react-components/react-table/src/hooks/useTableSort.ts"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { useControllableState } from '@fluentui/react-utilities';\nimport type { ColumnId, RowState, SortState, TableSortState, TableState, UseTableSortOptions } from './types';\n\nconst noop = () => undefined;\n\nexport const defaultTableSortState: TableSortState<unknown> = {\n  getSortDirection: () => 'ascending',\n  setColumnSort: noop,\n  sort: <TRowState extends RowState<unknown>>(rows: TRowState[]) => [...rows],\n  sortColumn: undefined,\n  sortDirection: 'ascending',\n  toggleColumnSort: noop,\n};\n\nexport function useTableSort<TItem>(options: UseTableSortOptions) {\n  // False positive, these plugin hooks are intended to be run on every render\n  // eslint-disable-next-line react-hooks/rules-of-hooks\n  return (tableState: TableState<TItem>) => useTableSortState(tableState, options);\n}\n\nexport function useTableSortState<TItem>(\n  tableState: TableState<TItem>,\n  options: UseTableSortOptions,\n): TableState<TItem> {\n  const { columns } = tableState;\n  const { sortState, defaultSortState, onSortChange } = options;\n\n  const [sorted, setSorted] = useControllableState<SortState>({\n    initialState: {\n      sortDirection: 'ascending' as const,\n      sortColumn: undefined,\n    },\n    defaultState: defaultSortState,\n    state: sortState,\n  });\n\n  const { sortColumn, sortDirection } = sorted;\n\n  const toggleColumnSort = (e: React.SyntheticEvent, columnId: ColumnId | undefined) => {\n    setSorted(s => {\n      const newState = { ...s, sortColumn: columnId };\n      if (s.sortColumn === columnId) {\n        newState.sortDirection = s.sortDirection === 'ascending' ? 'descending' : 'ascending';\n      } else {\n        newState.sortDirection = 'ascending';\n      }\n\n      onSortChange?.(e, newState);\n      return newState;\n    });\n  };\n\n  const setColumnSort: TableSortState<TItem>['setColumnSort'] = (e, nextSortColumn, nextSortDirection) => {\n    const newState = { sortColumn: nextSortColumn, sortDirection: nextSortDirection };\n    onSortChange?.(e, newState);\n    setSorted(newState);\n  };\n\n  const sort = <TRowState extends RowState<TItem>>(rows: TRowState[]) => {\n    return rows.slice().sort((a, b) => {\n      const sortColumnDef = columns.find(column => column.columnId === sortColumn);\n      if (!sortColumnDef?.compare) {\n        return 0;\n      }\n\n      const mod = sortDirection === 'ascending' ? 1 : -1;\n      return sortColumnDef.compare(a.item, b.item) * mod;\n    });\n  };\n\n  const getSortDirection: TableSortState<TItem>['getSortDirection'] = (columnId: ColumnId) => {\n    return sortColumn === columnId ? sortDirection : undefined;\n  };\n\n  return {\n    ...tableState,\n    sort: {\n      sort,\n      sortColumn,\n      sortDirection,\n      setColumnSort,\n      toggleColumnSort,\n      getSortDirection,\n    },\n  };\n}\n"],"sourceRoot":"../src/"}

package/lib/index.js

@@ -1,4 +1,4 @@
-export { useTable, useSelection, useSort, createColumn } from './hooks';
+export { useTableFeatures, useTableSelection, useTableSort, createColumn } from './hooks';
 export { TableCell, tableCellClassNames, tableCellClassName, useTableCellStyles_unstable, useTableCell_unstable, renderTableCell_unstable } from './TableCell';
 export { TableRow, tableRowClassNames, tableRowClassName, useTableRowStyles_unstable, useTableRow_unstable, renderTableRow_unstable } from './TableRow';
 export { TableBody, tableBodyClassName, tableBodyClassNames, useTableBodyStyles_unstable, useTableBody_unstable, renderTableBody_unstable } from './TableBody';

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-table/src/index.ts"],"names":[],"mappings":"AAAA,SAAS,QAAT,EAAmB,YAAnB,EAAiC,OAAjC,EAA0C,YAA1C,QAA8D,SAA9D;AAcA,SACE,SADF,EAEE,mBAFF,EAGE,kBAHF,EAIE,2BAJF,EAKE,qBALF,EAME,wBANF,QAOO,aAPP;AAUA,SACE,QADF,EAEE,kBAFF,EAGE,iBAHF,EAIE,0BAJF,EAKE,oBALF,EAME,uBANF,QAOO,YAPP;AAUA,SACE,SADF,EAEE,kBAFF,EAGE,mBAHF,EAIE,2BAJF,EAKE,qBALF,EAME,wBANF,QAOO,aAPP;AAUA,SACE,KADF,EAEE,cAFF,EAGE,eAHF,EAIE,uBAJF,EAKE,iBALF,EAME,oBANF,QAOO,SAPP;AAUA,SACE,WADF,EAEE,qBAFF,EAGE,oBAHF,EAIE,6BAJF,EAKE,uBALF,EAME,0BANF,QAOO,eAPP;AAUA,SACE,eADF,EAEE,wBAFF,EAGE,yBAHF,EAIE,iCAJF,EAKE,2BALF,EAME,8BANF,QAOO,mBAPP;AAUA,SAAS,oBAAT,EAA+B,eAA/B,QAAsD,yBAAtD;AACA,SACE,kBADF,EAEE,oCAFF,EAGE,8BAHF,EAIE,iCAJF,EAKE,4BALF,QAMO,sBANP;AASA,SACE,gBADF,EAEE,0BAFF,EAGE,kCAHF,EAIE,4BAJF,EAKE,+BALF,QAMO,oBANP;AASA,SACE,eADF,EAEE,yBAFF,EAGE,iCAHF,EAIE,2BAJF,EAKE,8BALF,QAMO,mBANP;AASA,SACE,YADF,EAEE,sBAFF,EAGE,8BAHF,EAIE,wBAJF,EAKE,2BALF,QAMO,gBANP;AASA,SACE,WADF,EAEE,qBAFF,EAGE,6BAHF,EAIE,uBAJF,EAKE,0BALF,QAMO,eANP;AASA,SACE,YADF,EAEE,sBAFF,EAGE,8BAHF,EAIE,wBAJF,EAKE,2BALF,QAMO,gBANP;AASA,SACE,QADF,EAEE,kBAFF,EAGE,0BAHF,EAIE,oBAJF,EAKE,uBALF,QAMO,YANP;AAgBA,SACE,cADF,EAEE,wBAFF,EAGE,gCAHF,EAIE,0BAJF,EAKE,6BALF,QAMO,kBANP;AASA,SACE,kBADF,EAEE,4BAFF,EAGE,oCAHF,EAIE,8BAJF,EAKE,iCALF,QAMO,sBANP;AASA,SACE,qBADF,EAEE,uCAFF,EAGE,iCAHF,EAIE,oCAJF,EAKE,+BALF,QAMO,yBANP","sourcesContent":["export { useTable, useSelection, useSort, createColumn } from './hooks';\nexport type {\n  UseTableOptions,\n  TableState as HeadlessTableState,\n  TableSelectionState,\n  TableSortState,\n  TableStatePlugin,\n  RowState,\n  RowId,\n  ColumnDefinition,\n  ColumnId,\n  CreateColumnOptions,\n} from './hooks';\n\nexport {\n  TableCell,\n  tableCellClassNames,\n  tableCellClassName,\n  useTableCellStyles_unstable,\n  useTableCell_unstable,\n  renderTableCell_unstable,\n} from './TableCell';\nexport type { TableCellProps, TableCellState, TableCellSlots } from './TableCell';\n\nexport {\n  TableRow,\n  tableRowClassNames,\n  tableRowClassName,\n  useTableRowStyles_unstable,\n  useTableRow_unstable,\n  renderTableRow_unstable,\n} from './TableRow';\nexport type { TableRowProps, TableRowState, TableRowSlots } from './TableRow';\n\nexport {\n  TableBody,\n  tableBodyClassName,\n  tableBodyClassNames,\n  useTableBodyStyles_unstable,\n  useTableBody_unstable,\n  renderTableBody_unstable,\n} from './TableBody';\nexport type { TableBodyProps, TableBodyState, TableBodySlots } from './TableBody';\n\nexport {\n  Table,\n  tableClassName,\n  tableClassNames,\n  useTableStyles_unstable,\n  useTable_unstable,\n  renderTable_unstable,\n} from './Table';\nexport type { TableProps, TableSlots, TableState, TableContextValue, TableContextValues, SortDirection } from './Table';\n\nexport {\n  TableHeader,\n  tableHeaderClassNames,\n  tableHeaderClassName,\n  useTableHeaderStyles_unstable,\n  useTableHeader_unstable,\n  renderTableHeader_unstable,\n} from './TableHeader';\nexport type { TableHeaderProps, TableHeaderSlots, TableHeaderState } from './TableHeader';\n\nexport {\n  TableHeaderCell,\n  tableHeaderCellClassName,\n  tableHeaderCellClassNames,\n  useTableHeaderCellStyles_unstable,\n  useTableHeaderCell_unstable,\n  renderTableHeaderCell_unstable,\n} from './TableHeaderCell';\nexport type { TableHeaderCellProps, TableHeaderCellSlots, TableHeaderCellState } from './TableHeaderCell';\n\nexport { TableContextProvider, useTableContext } from './contexts/tableContext';\nexport {\n  TableSelectionCell,\n  useTableSelectionCellStyles_unstable,\n  useTableSelectionCell_unstable,\n  renderTableSelectionCell_unstable,\n  tableSelectionCellClassNames,\n} from './TableSelectionCell';\n\nexport type { TableSelectionCellProps, TableSelectionCellState, TableSelectionCellSlots } from './TableSelectionCell';\nexport {\n  TableCellActions,\n  tableCellActionsClassNames,\n  useTableCellActionsStyles_unstable,\n  useTableCellActions_unstable,\n  renderTableCellActions_unstable,\n} from './TableCellActions';\n\nexport type { TableCellActionsProps, TableCellActionsSlots, TableCellActionsState } from './TableCellActions';\nexport {\n  TableCellLayout,\n  tableCellLayoutClassNames,\n  useTableCellLayoutStyles_unstable,\n  useTableCellLayout_unstable,\n  renderTableCellLayout_unstable,\n} from './TableCellLayout';\nexport type { TableCellLayoutProps, TableCellLayoutSlots, TableCellLayoutState } from './TableCellLayout';\n\nexport {\n  DataGridCell,\n  dataGridCellClassNames,\n  useDataGridCellStyles_unstable,\n  useDataGridCell_unstable,\n  renderDataGridCell_unstable,\n} from './DataGridCell';\nexport type { DataGridCellProps, DataGridCellState, DataGridCellSlots } from './DataGridCell';\n\nexport {\n  DataGridRow,\n  dataGridRowClassNames,\n  useDataGridRowStyles_unstable,\n  useDataGridRow_unstable,\n  renderDataGridRow_unstable,\n} from './DataGridRow';\nexport type { DataGridRowProps, DataGridRowState, DataGridRowSlots, CellRenderFunction } from './DataGridRow';\n\nexport {\n  DataGridBody,\n  dataGridBodyClassNames,\n  useDataGridBodyStyles_unstable,\n  useDataGridBody_unstable,\n  renderDataGridBody_unstable,\n} from './DataGridBody';\nexport type { DataGridBodyProps, DataGridBodyState, DataGridBodySlots, RowRenderFunction } from './DataGridBody';\n\nexport {\n  DataGrid,\n  dataGridClassNames,\n  useDataGridStyles_unstable,\n  useDataGrid_unstable,\n  renderDataGrid_unstable,\n} from './DataGrid';\nexport type {\n  DataGridProps,\n  DataGridSlots,\n  DataGridState,\n  DataGridContextValues,\n  DataGridContextValue,\n  FocusMode,\n} from './DataGrid';\n\nexport {\n  DataGridHeader,\n  dataGridHeaderClassNames,\n  useDataGridHeaderStyles_unstable,\n  useDataGridHeader_unstable,\n  renderDataGridHeader_unstable,\n} from './DataGridHeader';\nexport type { DataGridHeaderProps, DataGridHeaderSlots, DataGridHeaderState } from './DataGridHeader';\n\nexport {\n  DataGridHeaderCell,\n  dataGridHeaderCellClassNames,\n  useDataGridHeaderCellStyles_unstable,\n  useDataGridHeaderCell_unstable,\n  renderDataGridHeaderCell_unstable,\n} from './DataGridHeaderCell';\nexport type { DataGridHeaderCellProps, DataGridHeaderCellSlots, DataGridHeaderCellState } from './DataGridHeaderCell';\n\nexport {\n  DataGridSelectionCell,\n  useDataGridSelectionCellStyles_unstable,\n  useDataGridSelectionCell_unstable,\n  renderDataGridSelectionCell_unstable,\n  dataGridSelectionCellClassNames,\n} from './DataGridSelectionCell';\n\nexport type {\n  DataGridSelectionCellProps,\n  DataGridSelectionCellState,\n  DataGridSelectionCellSlots,\n} from './DataGridSelectionCell';\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["packages/react-components/react-table/src/index.ts"],"names":[],"mappings":"AAAA,SAAS,gBAAT,EAA2B,iBAA3B,EAA8C,YAA9C,EAA4D,YAA5D,QAAgF,SAAhF;AAcA,SACE,SADF,EAEE,mBAFF,EAGE,kBAHF,EAIE,2BAJF,EAKE,qBALF,EAME,wBANF,QAOO,aAPP;AAUA,SACE,QADF,EAEE,kBAFF,EAGE,iBAHF,EAIE,0BAJF,EAKE,oBALF,EAME,uBANF,QAOO,YAPP;AAUA,SACE,SADF,EAEE,kBAFF,EAGE,mBAHF,EAIE,2BAJF,EAKE,qBALF,EAME,wBANF,QAOO,aAPP;AAUA,SACE,KADF,EAEE,cAFF,EAGE,eAHF,EAIE,uBAJF,EAKE,iBALF,EAME,oBANF,QAOO,SAPP;AAUA,SACE,WADF,EAEE,qBAFF,EAGE,oBAHF,EAIE,6BAJF,EAKE,uBALF,EAME,0BANF,QAOO,eAPP;AAUA,SACE,eADF,EAEE,wBAFF,EAGE,yBAHF,EAIE,iCAJF,EAKE,2BALF,EAME,8BANF,QAOO,mBAPP;AAUA,SAAS,oBAAT,EAA+B,eAA/B,QAAsD,yBAAtD;AACA,SACE,kBADF,EAEE,oCAFF,EAGE,8BAHF,EAIE,iCAJF,EAKE,4BALF,QAMO,sBANP;AASA,SACE,gBADF,EAEE,0BAFF,EAGE,kCAHF,EAIE,4BAJF,EAKE,+BALF,QAMO,oBANP;AASA,SACE,eADF,EAEE,yBAFF,EAGE,iCAHF,EAIE,2BAJF,EAKE,8BALF,QAMO,mBANP;AASA,SACE,YADF,EAEE,sBAFF,EAGE,8BAHF,EAIE,wBAJF,EAKE,2BALF,QAMO,gBANP;AASA,SACE,WADF,EAEE,qBAFF,EAGE,6BAHF,EAIE,uBAJF,EAKE,0BALF,QAMO,eANP;AASA,SACE,YADF,EAEE,sBAFF,EAGE,8BAHF,EAIE,wBAJF,EAKE,2BALF,QAMO,gBANP;AASA,SACE,QADF,EAEE,kBAFF,EAGE,0BAHF,EAIE,oBAJF,EAKE,uBALF,QAMO,YANP;AAgBA,SACE,cADF,EAEE,wBAFF,EAGE,gCAHF,EAIE,0BAJF,EAKE,6BALF,QAMO,kBANP;AASA,SACE,kBADF,EAEE,4BAFF,EAGE,oCAHF,EAIE,8BAJF,EAKE,iCALF,QAMO,sBANP;AASA,SACE,qBADF,EAEE,uCAFF,EAGE,iCAHF,EAIE,oCAJF,EAKE,+BALF,QAMO,yBANP","sourcesContent":["export { useTableFeatures, useTableSelection, useTableSort, createColumn } from './hooks';\nexport type {\n  UseTableOptions,\n  TableState as HeadlessTableState,\n  TableSelectionState,\n  TableSortState,\n  TableStatePlugin,\n  RowState,\n  RowId,\n  ColumnDefinition,\n  ColumnId,\n  CreateColumnOptions,\n} from './hooks';\n\nexport {\n  TableCell,\n  tableCellClassNames,\n  tableCellClassName,\n  useTableCellStyles_unstable,\n  useTableCell_unstable,\n  renderTableCell_unstable,\n} from './TableCell';\nexport type { TableCellProps, TableCellState, TableCellSlots } from './TableCell';\n\nexport {\n  TableRow,\n  tableRowClassNames,\n  tableRowClassName,\n  useTableRowStyles_unstable,\n  useTableRow_unstable,\n  renderTableRow_unstable,\n} from './TableRow';\nexport type { TableRowProps, TableRowState, TableRowSlots } from './TableRow';\n\nexport {\n  TableBody,\n  tableBodyClassName,\n  tableBodyClassNames,\n  useTableBodyStyles_unstable,\n  useTableBody_unstable,\n  renderTableBody_unstable,\n} from './TableBody';\nexport type { TableBodyProps, TableBodyState, TableBodySlots } from './TableBody';\n\nexport {\n  Table,\n  tableClassName,\n  tableClassNames,\n  useTableStyles_unstable,\n  useTable_unstable,\n  renderTable_unstable,\n} from './Table';\nexport type { TableProps, TableSlots, TableState, TableContextValue, TableContextValues, SortDirection } from './Table';\n\nexport {\n  TableHeader,\n  tableHeaderClassNames,\n  tableHeaderClassName,\n  useTableHeaderStyles_unstable,\n  useTableHeader_unstable,\n  renderTableHeader_unstable,\n} from './TableHeader';\nexport type { TableHeaderProps, TableHeaderSlots, TableHeaderState } from './TableHeader';\n\nexport {\n  TableHeaderCell,\n  tableHeaderCellClassName,\n  tableHeaderCellClassNames,\n  useTableHeaderCellStyles_unstable,\n  useTableHeaderCell_unstable,\n  renderTableHeaderCell_unstable,\n} from './TableHeaderCell';\nexport type { TableHeaderCellProps, TableHeaderCellSlots, TableHeaderCellState } from './TableHeaderCell';\n\nexport { TableContextProvider, useTableContext } from './contexts/tableContext';\nexport {\n  TableSelectionCell,\n  useTableSelectionCellStyles_unstable,\n  useTableSelectionCell_unstable,\n  renderTableSelectionCell_unstable,\n  tableSelectionCellClassNames,\n} from './TableSelectionCell';\n\nexport type { TableSelectionCellProps, TableSelectionCellState, TableSelectionCellSlots } from './TableSelectionCell';\nexport {\n  TableCellActions,\n  tableCellActionsClassNames,\n  useTableCellActionsStyles_unstable,\n  useTableCellActions_unstable,\n  renderTableCellActions_unstable,\n} from './TableCellActions';\n\nexport type { TableCellActionsProps, TableCellActionsSlots, TableCellActionsState } from './TableCellActions';\nexport {\n  TableCellLayout,\n  tableCellLayoutClassNames,\n  useTableCellLayoutStyles_unstable,\n  useTableCellLayout_unstable,\n  renderTableCellLayout_unstable,\n} from './TableCellLayout';\nexport type { TableCellLayoutProps, TableCellLayoutSlots, TableCellLayoutState } from './TableCellLayout';\n\nexport {\n  DataGridCell,\n  dataGridCellClassNames,\n  useDataGridCellStyles_unstable,\n  useDataGridCell_unstable,\n  renderDataGridCell_unstable,\n} from './DataGridCell';\nexport type { DataGridCellProps, DataGridCellState, DataGridCellSlots } from './DataGridCell';\n\nexport {\n  DataGridRow,\n  dataGridRowClassNames,\n  useDataGridRowStyles_unstable,\n  useDataGridRow_unstable,\n  renderDataGridRow_unstable,\n} from './DataGridRow';\nexport type { DataGridRowProps, DataGridRowState, DataGridRowSlots, CellRenderFunction } from './DataGridRow';\n\nexport {\n  DataGridBody,\n  dataGridBodyClassNames,\n  useDataGridBodyStyles_unstable,\n  useDataGridBody_unstable,\n  renderDataGridBody_unstable,\n} from './DataGridBody';\nexport type { DataGridBodyProps, DataGridBodyState, DataGridBodySlots, RowRenderFunction } from './DataGridBody';\n\nexport {\n  DataGrid,\n  dataGridClassNames,\n  useDataGridStyles_unstable,\n  useDataGrid_unstable,\n  renderDataGrid_unstable,\n} from './DataGrid';\nexport type {\n  DataGridProps,\n  DataGridSlots,\n  DataGridState,\n  DataGridContextValues,\n  DataGridContextValue,\n  FocusMode,\n} from './DataGrid';\n\nexport {\n  DataGridHeader,\n  dataGridHeaderClassNames,\n  useDataGridHeaderStyles_unstable,\n  useDataGridHeader_unstable,\n  renderDataGridHeader_unstable,\n} from './DataGridHeader';\nexport type { DataGridHeaderProps, DataGridHeaderSlots, DataGridHeaderState } from './DataGridHeader';\n\nexport {\n  DataGridHeaderCell,\n  dataGridHeaderCellClassNames,\n  useDataGridHeaderCellStyles_unstable,\n  useDataGridHeaderCell_unstable,\n  renderDataGridHeaderCell_unstable,\n} from './DataGridHeaderCell';\nexport type { DataGridHeaderCellProps, DataGridHeaderCellSlots, DataGridHeaderCellState } from './DataGridHeaderCell';\n\nexport {\n  DataGridSelectionCell,\n  useDataGridSelectionCellStyles_unstable,\n  useDataGridSelectionCell_unstable,\n  renderDataGridSelectionCell_unstable,\n  dataGridSelectionCellClassNames,\n} from './DataGridSelectionCell';\n\nexport type {\n  DataGridSelectionCellProps,\n  DataGridSelectionCellState,\n  DataGridSelectionCellSlots,\n} from './DataGridSelectionCell';\n"],"sourceRoot":"../src/"}

package/lib-commonjs/components/DataGrid/useDataGrid.js

@@ -9,7 +9,7 @@ const react_tabster_1 = /*#__PURE__*/require("@fluentui/react-tabster");
 
 const useTable_1 = /*#__PURE__*/require("../Table/useTable");
 
-const useTable_2 = /*#__PURE__*/require("../../hooks/useTable");
+const hooks_1 = /*#__PURE__*/require("../../hooks");
 /**
  * Create the state required to render DataGrid.
  *
@@ -25,25 +25,47 @@ const useDataGrid_unstable = (props, ref) => {
   const {
     items,
     columns,
-    focusMode = 'none'
+    focusMode = 'none',
+    selectionMode,
+    onSortChange,
+    onSelectionChange,
+    defaultSortState,
+    sortState,
+    selectedItems,
+    defaultSelectedItems,
+    subtleSelection = false,
+    selectionAppearance = 'brand'
   } = props;
   const navigable = focusMode !== 'none';
   const keyboardNavAttr = react_tabster_1.useArrowNavigationGroup({
     axis: 'grid'
   });
-  const tableState = useTable_2.useTable({
+  const tableState = hooks_1.useTableFeatures({
     items,
     columns
-  }, []);
+  }, [hooks_1.useTableSort({
+    defaultSortState,
+    sortState,
+    onSortChange
+  }), hooks_1.useTableSelection({
+    defaultSelectedItems,
+    selectedItems,
+    onSelectionChange,
+    selectionMode: selectionMode !== null && selectionMode !== void 0 ? selectionMode : 'multiselect'
+  })]);
   const baseTableState = useTable_1.useTable_unstable({
     role: 'grid',
     as: 'div',
+    noNativeElements: true,
     ...(navigable && keyboardNavAttr),
     ...props
   }, ref);
   return { ...baseTableState,
     focusMode,
-    tableState
+    tableState,
+    selectableRows: !!selectionMode,
+    subtleSelection,
+    selectionAppearance
   };
 };
 

package/lib-commonjs/components/DataGrid/useDataGrid.js.map

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-table/src/components/DataGrid/useDataGrid.ts"],"names":[],"mappings":";;;;;;;AACA,MAAA,eAAA,gBAAA,OAAA,CAAA,yBAAA,CAAA;;AAEA,MAAA,UAAA,gBAAA,OAAA,CAAA,mBAAA,CAAA;;AACA,MAAA,UAAA,gBAAA,OAAA,CAAA,sBAAA,CAAA;AAEA;;;;;;;;AAQG;;;AACI,MAAM,oBAAoB,GAAG,CAAC,KAAD,EAAuB,GAAvB,KAAqE;EACvG,MAAM;IAAE,KAAF;IAAS,OAAT;IAAkB,SAAS,GAAG;EAA9B,IAAyC,KAA/C;EACA,MAAM,SAAS,GAAG,SAAS,KAAK,MAAhC;EACA,MAAM,eAAe,GAAG,eAAA,CAAA,uBAAA,CAAwB;IAAE,IAAI,EAAE;EAAR,CAAxB,CAAxB;EACA,MAAM,UAAU,GAAG,UAAA,CAAA,QAAA,CAAS;IAAE,KAAF;IAAS;EAAT,CAAT,EAA6B,EAA7B,CAAnB;EACA,MAAM,cAAc,GAAG,UAAA,CAAA,iBAAA,CACrB;IAAE,IAAI,EAAE,MAAR;IAAgB,EAAE,EAAE,KAApB;IAA2B,IAAI,SAAS,IAAI,eAAjB,CAA3B;IAA8D,GAAG;EAAjE,CADqB,EAErB,GAFqB,CAAvB;EAKA,OAAO,EACL,GAAG,cADE;IAEL,SAFK;IAGL;EAHK,CAAP;AAKD,CAfM;;AAAM,OAAA,CAAA,oBAAA,GAAoB,oBAApB","sourcesContent":["import * as React from 'react';\nimport { useArrowNavigationGroup } from '@fluentui/react-tabster';\nimport type { DataGridProps, DataGridState } from './DataGrid.types';\nimport { useTable_unstable } from '../Table/useTable';\nimport { useTable } from '../../hooks/useTable';\n\n/**\n * Create the state required to render DataGrid.\n *\n * The returned state can be modified with hooks such as useDataGridStyles_unstable,\n * before being passed to renderDataGrid_unstable.\n *\n * @param props - props from this instance of DataGrid\n * @param ref - reference to root HTMLElement of DataGrid\n */\nexport const useDataGrid_unstable = (props: DataGridProps, ref: React.Ref<HTMLElement>): DataGridState => {\n  const { items, columns, focusMode = 'none' } = props;\n  const navigable = focusMode !== 'none';\n  const keyboardNavAttr = useArrowNavigationGroup({ axis: 'grid' });\n  const tableState = useTable({ items, columns }, []);\n  const baseTableState = useTable_unstable(\n    { role: 'grid', as: 'div', ...(navigable && keyboardNavAttr), ...props },\n    ref,\n  );\n\n  return {\n    ...baseTableState,\n    focusMode,\n    tableState,\n  };\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["packages/react-components/react-table/src/components/DataGrid/useDataGrid.ts"],"names":[],"mappings":";;;;;;;AACA,MAAA,eAAA,gBAAA,OAAA,CAAA,yBAAA,CAAA;;AAEA,MAAA,UAAA,gBAAA,OAAA,CAAA,mBAAA,CAAA;;AACA,MAAA,OAAA,gBAAA,OAAA,CAAA,aAAA,CAAA;AAEA;;;;;;;;AAQG;;;AACI,MAAM,oBAAoB,GAAG,CAAC,KAAD,EAAuB,GAAvB,KAAqE;EACvG,MAAM;IACJ,KADI;IAEJ,OAFI;IAGJ,SAAS,GAAG,MAHR;IAIJ,aAJI;IAKJ,YALI;IAMJ,iBANI;IAOJ,gBAPI;IAQJ,SARI;IASJ,aATI;IAUJ,oBAVI;IAWJ,eAAe,GAAG,KAXd;IAYJ,mBAAmB,GAAG;EAZlB,IAaF,KAbJ;EAeA,MAAM,SAAS,GAAG,SAAS,KAAK,MAAhC;EACA,MAAM,eAAe,GAAG,eAAA,CAAA,uBAAA,CAAwB;IAAE,IAAI,EAAE;EAAR,CAAxB,CAAxB;EAEA,MAAM,UAAU,GAAG,OAAA,CAAA,gBAAA,CAAiB;IAAE,KAAF;IAAS;EAAT,CAAjB,EAAqC,CACtD,OAAA,CAAA,YAAA,CAAa;IACX,gBADW;IAEX,SAFW;IAGX;EAHW,CAAb,CADsD,EAMtD,OAAA,CAAA,iBAAA,CAAkB;IAChB,oBADgB;IAEhB,aAFgB;IAGhB,iBAHgB;IAIhB,aAAa,EAAE,aAAa,KAAA,IAAb,IAAA,aAAa,KAAA,KAAA,CAAb,GAAA,aAAA,GAAiB;EAJhB,CAAlB,CANsD,CAArC,CAAnB;EAcA,MAAM,cAAc,GAAG,UAAA,CAAA,iBAAA,CACrB;IAAE,IAAI,EAAE,MAAR;IAAgB,EAAE,EAAE,KAApB;IAA2B,gBAAgB,EAAE,IAA7C;IAAmD,IAAI,SAAS,IAAI,eAAjB,CAAnD;IAAsF,GAAG;EAAzF,CADqB,EAErB,GAFqB,CAAvB;EAKA,OAAO,EACL,GAAG,cADE;IAEL,SAFK;IAGL,UAHK;IAIL,cAAc,EAAE,CAAC,CAAC,aAJb;IAKL,eALK;IAML;EANK,CAAP;AAQD,CA9CM;;AAAM,OAAA,CAAA,oBAAA,GAAoB,oBAApB","sourcesContent":["import * as React from 'react';\nimport { useArrowNavigationGroup } from '@fluentui/react-tabster';\nimport type { DataGridProps, DataGridState } from './DataGrid.types';\nimport { useTable_unstable } from '../Table/useTable';\nimport { useTableFeatures, useTableSort, useTableSelection } from '../../hooks';\n\n/**\n * Create the state required to render DataGrid.\n *\n * The returned state can be modified with hooks such as useDataGridStyles_unstable,\n * before being passed to renderDataGrid_unstable.\n *\n * @param props - props from this instance of DataGrid\n * @param ref - reference to root HTMLElement of DataGrid\n */\nexport const useDataGrid_unstable = (props: DataGridProps, ref: React.Ref<HTMLElement>): DataGridState => {\n  const {\n    items,\n    columns,\n    focusMode = 'none',\n    selectionMode,\n    onSortChange,\n    onSelectionChange,\n    defaultSortState,\n    sortState,\n    selectedItems,\n    defaultSelectedItems,\n    subtleSelection = false,\n    selectionAppearance = 'brand',\n  } = props;\n\n  const navigable = focusMode !== 'none';\n  const keyboardNavAttr = useArrowNavigationGroup({ axis: 'grid' });\n\n  const tableState = useTableFeatures({ items, columns }, [\n    useTableSort({\n      defaultSortState,\n      sortState,\n      onSortChange,\n    }),\n    useTableSelection({\n      defaultSelectedItems,\n      selectedItems,\n      onSelectionChange,\n      selectionMode: selectionMode ?? 'multiselect',\n    }),\n  ]);\n\n  const baseTableState = useTable_unstable(\n    { role: 'grid', as: 'div', noNativeElements: true, ...(navigable && keyboardNavAttr), ...props },\n    ref,\n  );\n\n  return {\n    ...baseTableState,\n    focusMode,\n    tableState,\n    selectableRows: !!selectionMode,\n    subtleSelection,\n    selectionAppearance,\n  };\n};\n"],"sourceRoot":"../src/"}

package/lib-commonjs/components/DataGrid/useDataGridContextValues.js

@@ -11,7 +11,10 @@ function useDataGridContextValues_unstable(state) {
   const tableContextValues = useTableContextValues_1.useTableContextValues_unstable(state);
   return { ...tableContextValues,
     dataGrid: { ...state.tableState,
-      focusMode: state.focusMode
+      focusMode: state.focusMode,
+      selectableRows: state.selectableRows,
+      subtleSelection: state.subtleSelection,
+      selectionAppearance: state.selectionAppearance
     }
   };
 }

package/lib-commonjs/components/DataGrid/useDataGridContextValues.js.map

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-table/src/components/DataGrid/useDataGridContextValues.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,uBAAA,gBAAA,OAAA,CAAA,gCAAA,CAAA;;AAGA,SAAgB,iCAAhB,CAAkD,KAAlD,EAAsE;EACpE,MAAM,kBAAkB,GAAG,uBAAA,CAAA,8BAAA,CAA+B,KAA/B,CAA3B;EACA,OAAO,EACL,GAAG,kBADE;IAEL,QAAQ,EAAE,EACR,GAAG,KAAK,CAAC,UADD;MAER,SAAS,EAAE,KAAK,CAAC;IAFT;EAFL,CAAP;AAOD;;AATD,OAAA,CAAA,iCAAA,GAAA,iCAAA","sourcesContent":["import { useTableContextValues_unstable } from '../Table/useTableContextValues';\nimport { DataGridContextValues, DataGridState } from './DataGrid.types';\n\nexport function useDataGridContextValues_unstable(state: DataGridState): DataGridContextValues {\n  const tableContextValues = useTableContextValues_unstable(state);\n  return {\n    ...tableContextValues,\n    dataGrid: {\n      ...state.tableState,\n      focusMode: state.focusMode,\n    },\n  };\n}\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["packages/react-components/react-table/src/components/DataGrid/useDataGridContextValues.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,uBAAA,gBAAA,OAAA,CAAA,gCAAA,CAAA;;AAGA,SAAgB,iCAAhB,CAAkD,KAAlD,EAAsE;EACpE,MAAM,kBAAkB,GAAG,uBAAA,CAAA,8BAAA,CAA+B,KAA/B,CAA3B;EACA,OAAO,EACL,GAAG,kBADE;IAEL,QAAQ,EAAE,EACR,GAAG,KAAK,CAAC,UADD;MAER,SAAS,EAAE,KAAK,CAAC,SAFT;MAGR,cAAc,EAAE,KAAK,CAAC,cAHd;MAIR,eAAe,EAAE,KAAK,CAAC,eAJf;MAKR,mBAAmB,EAAE,KAAK,CAAC;IALnB;EAFL,CAAP;AAUD;;AAZD,OAAA,CAAA,iCAAA,GAAA,iCAAA","sourcesContent":["import { useTableContextValues_unstable } from '../Table/useTableContextValues';\nimport { DataGridContextValues, DataGridState } from './DataGrid.types';\n\nexport function useDataGridContextValues_unstable(state: DataGridState): DataGridContextValues {\n  const tableContextValues = useTableContextValues_unstable(state);\n  return {\n    ...tableContextValues,\n    dataGrid: {\n      ...state.tableState,\n      focusMode: state.focusMode,\n      selectableRows: state.selectableRows,\n      subtleSelection: state.subtleSelection,\n      selectionAppearance: state.selectionAppearance,\n    },\n  };\n}\n"],"sourceRoot":"../src/"}

package/lib-commonjs/components/DataGridBody/useDataGridBody.js

@@ -5,9 +5,15 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useDataGridBody_unstable = void 0;
 
+const React = /*#__PURE__*/require("react");
+
 const useTableBody_1 = /*#__PURE__*/require("../TableBody/useTableBody");
 
 const dataGridContext_1 = /*#__PURE__*/require("../../contexts/dataGridContext");
+
+const tableContext_1 = /*#__PURE__*/require("../../contexts/tableContext");
+
+const rowIdContext_1 = /*#__PURE__*/require("../../contexts/rowIdContext");
 /**
  * Create the state required to render DataGridBody.
  *
@@ -20,12 +26,19 @@ const dataGridContext_1 = /*#__PURE__*/require("../../contexts/dataGridContext")
 
 
 const useDataGridBody_unstable = (props, ref) => {
+  const {
+    sortable
+  } = tableContext_1.useTableContext();
   const getRows = dataGridContext_1.useDataGridContext_unstable(ctx => ctx.getRows);
-  const rows = getRows();
+  const sort = dataGridContext_1.useDataGridContext_unstable(ctx => ctx.sort.sort);
+  const rows = sortable ? sort(getRows()) : getRows();
   const {
     children: renderRow
   } = props;
-  const children = rows.map(row => renderRow(row));
+  const children = rows.map(row => React.createElement(rowIdContext_1.RowIdContextProvider, {
+    key: row.rowId,
+    value: row.rowId
+  }, renderRow(row)));
   return useTableBody_1.useTableBody_unstable({ ...props,
     children,
     as: 'div'

package/lib-commonjs/components/DataGridBody/useDataGridBody.js.map

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-table/src/components/DataGridBody/useDataGridBody.ts"],"names":[],"mappings":";;;;;;;AAEA,MAAA,cAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,gCAAA,CAAA;AAEA;;;;;;;;AAQG;;;AACI,MAAM,wBAAwB,GAAG,CAAC,KAAD,EAA2B,GAA3B,KAA6E;EACnH,MAAM,OAAO,GAAG,iBAAA,CAAA,2BAAA,CAA4B,GAAG,IAAI,GAAG,CAAC,OAAvC,CAAhB;EACA,MAAM,IAAI,GAAG,OAAO,EAApB;EAEA,MAAM;IAAE,QAAQ,EAAE;EAAZ,IAA0B,KAAhC;EACA,MAAM,QAAQ,GAAG,IAAI,CAAC,GAAL,CAAS,GAAG,IAAI,SAAS,CAAC,GAAD,CAAzB,CAAjB;EACA,OAAO,cAAA,CAAA,qBAAA,CAAsB,EAAE,GAAG,KAAL;IAAY,QAAZ;IAAsB,EAAE,EAAE;EAA1B,CAAtB,EAAyD,GAAzD,CAAP;AACD,CAPM;;AAAM,OAAA,CAAA,wBAAA,GAAwB,wBAAxB","sourcesContent":["import * as React from 'react';\nimport type { DataGridBodyProps, DataGridBodyState } from './DataGridBody.types';\nimport { useTableBody_unstable } from '../TableBody/useTableBody';\nimport { useDataGridContext_unstable } from '../../contexts/dataGridContext';\n\n/**\n * Create the state required to render DataGridBody.\n *\n * The returned state can be modified with hooks such as useDataGridBodyStyles_unstable,\n * before being passed to renderDataGridBody_unstable.\n *\n * @param props - props from this instance of DataGridBody\n * @param ref - reference to root HTMLElement of DataGridBody\n */\nexport const useDataGridBody_unstable = (props: DataGridBodyProps, ref: React.Ref<HTMLElement>): DataGridBodyState => {\n  const getRows = useDataGridContext_unstable(ctx => ctx.getRows);\n  const rows = getRows();\n\n  const { children: renderRow } = props;\n  const children = rows.map(row => renderRow(row));\n  return useTableBody_unstable({ ...props, children, as: 'div' }, ref);\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["packages/react-components/react-table/src/components/DataGridBody/useDataGridBody.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AAEA,MAAA,cAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,gCAAA,CAAA;;AACA,MAAA,cAAA,gBAAA,OAAA,CAAA,6BAAA,CAAA;;AACA,MAAA,cAAA,gBAAA,OAAA,CAAA,6BAAA,CAAA;AAEA;;;;;;;;AAQG;;;AACI,MAAM,wBAAwB,GAAG,CAAC,KAAD,EAA2B,GAA3B,KAA6E;EACnH,MAAM;IAAE;EAAF,IAAe,cAAA,CAAA,eAAA,EAArB;EACA,MAAM,OAAO,GAAG,iBAAA,CAAA,2BAAA,CAA4B,GAAG,IAAI,GAAG,CAAC,OAAvC,CAAhB;EACA,MAAM,IAAI,GAAG,iBAAA,CAAA,2BAAA,CAA4B,GAAG,IAAI,GAAG,CAAC,IAAJ,CAAS,IAA5C,CAAb;EACA,MAAM,IAAI,GAAG,QAAQ,GAAG,IAAI,CAAC,OAAO,EAAR,CAAP,GAAqB,OAAO,EAAjD;EAEA,MAAM;IAAE,QAAQ,EAAE;EAAZ,IAA0B,KAAhC;EACA,MAAM,QAAQ,GAAG,IAAI,CAAC,GAAL,CAAS,GAAG,IAC3B,KAAA,CAAA,aAAA,CAAC,cAAA,CAAA,oBAAD,EAAqB;IAAC,GAAG,EAAE,GAAG,CAAC,KAAV;IAAiB,KAAK,EAAE,GAAG,CAAC;EAA5B,CAArB,EACG,SAAS,CAAC,GAAD,CADZ,CADe,CAAjB;EAKA,OAAO,cAAA,CAAA,qBAAA,CAAsB,EAAE,GAAG,KAAL;IAAY,QAAZ;IAAsB,EAAE,EAAE;EAA1B,CAAtB,EAAyD,GAAzD,CAAP;AACD,CAbM;;AAAM,OAAA,CAAA,wBAAA,GAAwB,wBAAxB","sourcesContent":["import * as React from 'react';\nimport type { DataGridBodyProps, DataGridBodyState } from './DataGridBody.types';\nimport { useTableBody_unstable } from '../TableBody/useTableBody';\nimport { useDataGridContext_unstable } from '../../contexts/dataGridContext';\nimport { useTableContext } from '../../contexts/tableContext';\nimport { RowIdContextProvider } from '../../contexts/rowIdContext';\n\n/**\n * Create the state required to render DataGridBody.\n *\n * The returned state can be modified with hooks such as useDataGridBodyStyles_unstable,\n * before being passed to renderDataGridBody_unstable.\n *\n * @param props - props from this instance of DataGridBody\n * @param ref - reference to root HTMLElement of DataGridBody\n */\nexport const useDataGridBody_unstable = (props: DataGridBodyProps, ref: React.Ref<HTMLElement>): DataGridBodyState => {\n  const { sortable } = useTableContext();\n  const getRows = useDataGridContext_unstable(ctx => ctx.getRows);\n  const sort = useDataGridContext_unstable(ctx => ctx.sort.sort);\n  const rows = sortable ? sort(getRows()) : getRows();\n\n  const { children: renderRow } = props;\n  const children = rows.map(row => (\n    <RowIdContextProvider key={row.rowId} value={row.rowId}>\n      {renderRow(row)}\n    </RowIdContextProvider>\n  ));\n  return useTableBody_unstable({ ...props, children, as: 'div' }, ref);\n};\n"],"sourceRoot":"../src/"}

package/lib-commonjs/components/DataGridHeaderCell/useDataGridHeaderCell.js

@@ -5,7 +5,15 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useDataGridHeaderCell_unstable = void 0;
 
+const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
+
 const useTableHeaderCell_1 = /*#__PURE__*/require("../TableHeaderCell/useTableHeaderCell");
+
+const dataGridContext_1 = /*#__PURE__*/require("../../contexts/dataGridContext");
+
+const columnIdContext_1 = /*#__PURE__*/require("../../contexts/columnIdContext");
+
+const tableContext_1 = /*#__PURE__*/require("../../contexts/tableContext");
 /**
  * Create the state required to render DataGridHeaderCell.
  *
@@ -18,8 +26,26 @@ const useTableHeaderCell_1 = /*#__PURE__*/require("../TableHeaderCell/useTableHe
 
 
 const useDataGridHeaderCell_unstable = (props, ref) => {
-  return useTableHeaderCell_1.useTableHeaderCell_unstable({ ...props,
-    as: 'div'
+  const columnId = columnIdContext_1.useColumnIdContext();
+  const {
+    sortable
+  } = tableContext_1.useTableContext();
+  const toggleColumnSort = dataGridContext_1.useDataGridContext_unstable(ctx => ctx.sort.toggleColumnSort);
+  const sortDirection = dataGridContext_1.useDataGridContext_unstable(ctx => sortable ? ctx.sort.getSortDirection(columnId) : undefined);
+  const onClick = react_utilities_1.useEventCallback(e => {
+    var _a;
+
+    if (sortable) {
+      toggleColumnSort(e, columnId);
+    }
+
+    (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props, e);
+  });
+  return useTableHeaderCell_1.useTableHeaderCell_unstable({
+    sortDirection,
+    as: 'div',
+    ...props,
+    onClick
   }, ref);
 };
 

package/lib-commonjs/components/DataGridHeaderCell/useDataGridHeaderCell.js.map

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-table/src/components/DataGridHeaderCell/useDataGridHeaderCell.ts"],"names":[],"mappings":";;;;;;;AAEA,MAAA,oBAAA,gBAAA,OAAA,CAAA,uCAAA,CAAA;AAEA;;;;;;;;AAQG;;;AACI,MAAM,8BAA8B,GAAG,CAC5C,KAD4C,EAE5C,GAF4C,KAGjB;EAC3B,OAAO,oBAAA,CAAA,2BAAA,CAA4B,EAAE,GAAG,KAAL;IAAY,EAAE,EAAE;EAAhB,CAA5B,EAAqD,GAArD,CAAP;AACD,CALM;;AAAM,OAAA,CAAA,8BAAA,GAA8B,8BAA9B","sourcesContent":["import * as React from 'react';\nimport type { DataGridHeaderCellProps, DataGridHeaderCellState } from './DataGridHeaderCell.types';\nimport { useTableHeaderCell_unstable } from '../TableHeaderCell/useTableHeaderCell';\n\n/**\n * Create the state required to render DataGridHeaderCell.\n *\n * The returned state can be modified with hooks such as useDataGridHeaderCellStyles_unstable,\n * before being passed to renderDataGridHeaderCell_unstable.\n *\n * @param props - props from this instance of DataGridHeaderCell\n * @param ref - reference to root HTMLElement of DataGridHeaderCell\n */\nexport const useDataGridHeaderCell_unstable = (\n  props: DataGridHeaderCellProps,\n  ref: React.Ref<HTMLElement>,\n): DataGridHeaderCellState => {\n  return useTableHeaderCell_unstable({ ...props, as: 'div' }, ref);\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["packages/react-components/react-table/src/components/DataGridHeaderCell/useDataGridHeaderCell.ts"],"names":[],"mappings":";;;;;;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AAEA,MAAA,oBAAA,gBAAA,OAAA,CAAA,uCAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,gCAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,gCAAA,CAAA;;AACA,MAAA,cAAA,gBAAA,OAAA,CAAA,6BAAA,CAAA;AAEA;;;;;;;;AAQG;;;AACI,MAAM,8BAA8B,GAAG,CAC5C,KAD4C,EAE5C,GAF4C,KAGjB;EAC3B,MAAM,QAAQ,GAAG,iBAAA,CAAA,kBAAA,EAAjB;EACA,MAAM;IAAE;EAAF,IAAe,cAAA,CAAA,eAAA,EAArB;EACA,MAAM,gBAAgB,GAAG,iBAAA,CAAA,2BAAA,CAA4B,GAAG,IAAI,GAAG,CAAC,IAAJ,CAAS,gBAA5C,CAAzB;EACA,MAAM,aAAa,GAAG,iBAAA,CAAA,2BAAA,CAA4B,GAAG,IACnD,QAAQ,GAAG,GAAG,CAAC,IAAJ,CAAS,gBAAT,CAA0B,QAA1B,CAAH,GAAyC,SAD7B,CAAtB;EAGA,MAAM,OAAO,GAAG,iBAAA,CAAA,gBAAA,CAAkB,CAAD,IAAoD;;;IACnF,IAAI,QAAJ,EAAc;MACZ,gBAAgB,CAAC,CAAD,EAAI,QAAJ,CAAhB;IACD;;IACD,CAAA,EAAA,GAAA,KAAK,CAAC,OAAN,MAAa,IAAb,IAAa,EAAA,KAAA,KAAA,CAAb,GAAa,KAAA,CAAb,GAAa,EAAA,CAAA,IAAA,CAAb,KAAa,EAAG,CAAH,CAAb;EACD,CALe,CAAhB;EAOA,OAAO,oBAAA,CAAA,2BAAA,CAA4B;IAAE,aAAF;IAAiB,EAAE,EAAE,KAArB;IAA4B,GAAG,KAA/B;IAAsC;EAAtC,CAA5B,EAA6E,GAA7E,CAAP;AACD,CAlBM;;AAAM,OAAA,CAAA,8BAAA,GAA8B,8BAA9B","sourcesContent":["import * as React from 'react';\nimport { useEventCallback } from '@fluentui/react-utilities';\nimport type { DataGridHeaderCellProps, DataGridHeaderCellState } from './DataGridHeaderCell.types';\nimport { useTableHeaderCell_unstable } from '../TableHeaderCell/useTableHeaderCell';\nimport { useDataGridContext_unstable } from '../../contexts/dataGridContext';\nimport { useColumnIdContext } from '../../contexts/columnIdContext';\nimport { useTableContext } from '../../contexts/tableContext';\n\n/**\n * Create the state required to render DataGridHeaderCell.\n *\n * The returned state can be modified with hooks such as useDataGridHeaderCellStyles_unstable,\n * before being passed to renderDataGridHeaderCell_unstable.\n *\n * @param props - props from this instance of DataGridHeaderCell\n * @param ref - reference to root HTMLElement of DataGridHeaderCell\n */\nexport const useDataGridHeaderCell_unstable = (\n  props: DataGridHeaderCellProps,\n  ref: React.Ref<HTMLElement>,\n): DataGridHeaderCellState => {\n  const columnId = useColumnIdContext();\n  const { sortable } = useTableContext();\n  const toggleColumnSort = useDataGridContext_unstable(ctx => ctx.sort.toggleColumnSort);\n  const sortDirection = useDataGridContext_unstable(ctx =>\n    sortable ? ctx.sort.getSortDirection(columnId) : undefined,\n  );\n  const onClick = useEventCallback((e: React.MouseEvent<HTMLTableHeaderCellElement>) => {\n    if (sortable) {\n      toggleColumnSort(e, columnId);\n    }\n    props.onClick?.(e);\n  });\n\n  return useTableHeaderCell_unstable({ sortDirection, as: 'div', ...props, onClick }, ref);\n};\n"],"sourceRoot":"../src/"}

package/lib-commonjs/components/DataGridRow/renderDataGridRow.js

@@ -5,14 +5,22 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.renderDataGridRow_unstable = void 0;
 
-const renderTableRow_1 = /*#__PURE__*/require("../TableRow/renderTableRow");
+const React = /*#__PURE__*/require("react");
+
+const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
 /**
  * Render the final JSX of DataGridRow
  */
 
 
 const renderDataGridRow_unstable = state => {
-  return renderTableRow_1.renderTableRow_unstable(state);
+  const {
+    slots,
+    slotProps
+  } = react_utilities_1.getSlots(state);
+  return React.createElement(slots.root, { ...slotProps.root
+  }, slots.selectionCell && React.createElement(slots.selectionCell, { ...slotProps.selectionCell
+  }), slotProps.root.children);
 };
 
 exports.renderDataGridRow_unstable = renderDataGridRow_unstable;

package/lib-commonjs/components/DataGridRow/renderDataGridRow.js.map

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-table/src/components/DataGridRow/renderDataGridRow.tsx"],"names":[],"mappings":";;;;;;;AACA,MAAA,gBAAA,gBAAA,OAAA,CAAA,4BAAA,CAAA;AAEA;;AAEG;;;AACI,MAAM,0BAA0B,GAAI,KAAD,IAA4B;EACpE,OAAO,gBAAA,CAAA,uBAAA,CAAwB,KAAxB,CAAP;AACD,CAFM;;AAAM,OAAA,CAAA,0BAAA,GAA0B,0BAA1B","sourcesContent":["import type { DataGridRowState } from './DataGridRow.types';\nimport { renderTableRow_unstable } from '../TableRow/renderTableRow';\n\n/**\n * Render the final JSX of DataGridRow\n */\nexport const renderDataGridRow_unstable = (state: DataGridRowState) => {\n  return renderTableRow_unstable(state);\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["packages/react-components/react-table/src/components/DataGridRow/renderDataGridRow.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAGA;;AAEG;;;AACI,MAAM,0BAA0B,GAAI,KAAD,IAA4B;EACpE,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,iBAAA,CAAA,QAAA,CAA2B,KAA3B,CAA7B;EAEA,OACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,EACG,KAAK,CAAC,aAAN,IAAuB,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,aAAP,EAAoB,EAAA,GAAK,SAAS,CAAC;EAAf,CAApB,CAD1B,EAEG,SAAS,CAAC,IAAV,CAAe,QAFlB,CADF;AAMD,CATM;;AAAM,OAAA,CAAA,0BAAA,GAA0B,0BAA1B","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { DataGridRowState, DataGridRowSlots } from './DataGridRow.types';\n\n/**\n * Render the final JSX of DataGridRow\n */\nexport const renderDataGridRow_unstable = (state: DataGridRowState) => {\n  const { slots, slotProps } = getSlots<DataGridRowSlots>(state);\n\n  return (\n    <slots.root {...slotProps.root}>\n      {slots.selectionCell && <slots.selectionCell {...slotProps.selectionCell} />}\n      {slotProps.root.children}\n    </slots.root>\n  );\n};\n"],"sourceRoot":"../src/"}