@fluentui/react-table 9.0.0-alpha.10 → 9.0.0-alpha.12

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":";;;;;;;AAEA,MAAA,UAAA,gBAAA,OAAA,CAAA,mBAAA,CAAA;AAEA;;;;;;;;AAQG;;;AACI,MAAM,oBAAoB,GAAG,CAAC,KAAD,EAAuB,GAAvB,KAAqE;EACvG,OAAO,UAAA,CAAA,iBAAA,CAAkB,EAAE,GAAG,KAAL;IAAY,EAAE,EAAE;EAAhB,CAAlB,EAA2C,GAA3C,CAAP;AACD,CAFM;;AAAM,OAAA,CAAA,oBAAA,GAAoB,oBAApB","sourcesContent":["import * as React from 'react';\nimport type { DataGridProps, DataGridState } from './DataGrid.types';\nimport { useTable_unstable } from '../Table/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  return useTable_unstable({ ...props, as: 'div' }, ref);\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,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/"}

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

@@ -8,7 +8,12 @@ exports.useDataGridContextValues_unstable = void 0;
 const useTableContextValues_1 = /*#__PURE__*/require("../Table/useTableContextValues");
 
 function useDataGridContextValues_unstable(state) {
-  return useTableContextValues_1.useTableContextValues_unstable(state);
+  const tableContextValues = useTableContextValues_1.useTableContextValues_unstable(state);
+  return { ...tableContextValues,
+    dataGrid: { ...state.tableState,
+      focusMode: state.focusMode
+    }
+  };
 }
 
 exports.useDataGridContextValues_unstable = useDataGridContextValues_unstable;

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,OAAO,uBAAA,CAAA,8BAAA,CAA+B,KAA/B,CAAP;AACD;;AAFD,OAAA,CAAA,iCAAA,GAAA,iCAAA","sourcesContent":["import { useTableContextValues_unstable } from '../Table/useTableContextValues';\nimport { DataGridState } from './DataGrid.types';\n\nexport function useDataGridContextValues_unstable(state: DataGridState) {\n  return useTableContextValues_unstable(state);\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;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/"}

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

@@ -6,6 +6,8 @@ Object.defineProperty(exports, "__esModule", {
 exports.useDataGridBody_unstable = void 0;
 
 const useTableBody_1 = /*#__PURE__*/require("../TableBody/useTableBody");
+
+const dataGridContext_1 = /*#__PURE__*/require("../../contexts/dataGridContext");
 /**
  * Create the state required to render DataGridBody.
  *
@@ -18,7 +20,14 @@ const useTableBody_1 = /*#__PURE__*/require("../TableBody/useTableBody");
 
 
 const useDataGridBody_unstable = (props, ref) => {
+  const getRows = dataGridContext_1.useDataGridContext_unstable(ctx => ctx.getRows);
+  const rows = getRows();
+  const {
+    children: renderRow
+  } = props;
+  const children = rows.map(row => renderRow(row));
   return useTableBody_1.useTableBody_unstable({ ...props,
+    children,
     as: 'div'
   }, ref);
 };

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;AAEA;;;;;;;;AAQG;;;AACI,MAAM,wBAAwB,GAAG,CAAC,KAAD,EAA2B,GAA3B,KAA6E;EACnH,OAAO,cAAA,CAAA,qBAAA,CAAsB,EAAE,GAAG,KAAL;IAAY,EAAE,EAAE;EAAhB,CAAtB,EAA+C,GAA/C,CAAP;AACD,CAFM;;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';\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  return useTableBody_unstable({ ...props, as: 'div' }, ref);\n};\n"],"sourceRoot":"../src/"}
+{"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/"}

package/lib-commonjs/components/DataGridCell/useDataGridCell.js

@@ -6,6 +6,8 @@ Object.defineProperty(exports, "__esModule", {
 exports.useDataGridCell_unstable = void 0;
 
 const useTableCell_1 = /*#__PURE__*/require("../TableCell/useTableCell");
+
+const dataGridContext_1 = /*#__PURE__*/require("../../contexts/dataGridContext");
 /**
  * Create the state required to render DataGridCell.
  *
@@ -18,8 +20,12 @@ const useTableCell_1 = /*#__PURE__*/require("../TableCell/useTableCell");
 
 
 const useDataGridCell_unstable = (props, ref) => {
-  return useTableCell_1.useTableCell_unstable({ ...props,
-    as: 'div'
+  const tabbable = dataGridContext_1.useDataGridContext_unstable(ctx => ctx.focusMode !== 'none');
+  return useTableCell_1.useTableCell_unstable({
+    as: 'div',
+    role: 'gridcell',
+    tabIndex: tabbable ? 0 : undefined,
+    ...props
   }, ref);
 };
 

package/lib-commonjs/components/DataGridCell/useDataGridCell.js.map

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-table/src/components/DataGridCell/useDataGridCell.ts"],"names":[],"mappings":";;;;;;;AAEA,MAAA,cAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAEA;;;;;;;;AAQG;;;AACI,MAAM,wBAAwB,GAAG,CAAC,KAAD,EAA2B,GAA3B,KAA6E;EACnH,OAAO,cAAA,CAAA,qBAAA,CAAsB,EAAE,GAAG,KAAL;IAAY,EAAE,EAAE;EAAhB,CAAtB,EAA+C,GAA/C,CAAP;AACD,CAFM;;AAAM,OAAA,CAAA,wBAAA,GAAwB,wBAAxB","sourcesContent":["import * as React from 'react';\nimport type { DataGridCellProps, DataGridCellState } from './DataGridCell.types';\nimport { useTableCell_unstable } from '../TableCell/useTableCell';\n\n/**\n * Create the state required to render DataGridCell.\n *\n * The returned state can be modified with hooks such as useDataGridCellStyles_unstable,\n * before being passed to renderDataGridCell_unstable.\n *\n * @param props - props from this instance of DataGridCell\n * @param ref - reference to root HTMLElement of DataGridCell\n */\nexport const useDataGridCell_unstable = (props: DataGridCellProps, ref: React.Ref<HTMLElement>): DataGridCellState => {\n  return useTableCell_unstable({ ...props, as: 'div' }, ref);\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["packages/react-components/react-table/src/components/DataGridCell/useDataGridCell.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,QAAQ,GAAG,iBAAA,CAAA,2BAAA,CAA4B,GAAG,IAAI,GAAG,CAAC,SAAJ,KAAkB,MAArD,CAAjB;EACA,OAAO,cAAA,CAAA,qBAAA,CAAsB;IAAE,EAAE,EAAE,KAAN;IAAa,IAAI,EAAE,UAAnB;IAA+B,QAAQ,EAAE,QAAQ,GAAG,CAAH,GAAO,SAAxD;IAAmE,GAAG;EAAtE,CAAtB,EAAqG,GAArG,CAAP;AACD,CAHM;;AAAM,OAAA,CAAA,wBAAA,GAAwB,wBAAxB","sourcesContent":["import * as React from 'react';\nimport type { DataGridCellProps, DataGridCellState } from './DataGridCell.types';\nimport { useTableCell_unstable } from '../TableCell/useTableCell';\nimport { useDataGridContext_unstable } from '../../contexts/dataGridContext';\n\n/**\n * Create the state required to render DataGridCell.\n *\n * The returned state can be modified with hooks such as useDataGridCellStyles_unstable,\n * before being passed to renderDataGridCell_unstable.\n *\n * @param props - props from this instance of DataGridCell\n * @param ref - reference to root HTMLElement of DataGridCell\n */\nexport const useDataGridCell_unstable = (props: DataGridCellProps, ref: React.Ref<HTMLElement>): DataGridCellState => {\n  const tabbable = useDataGridContext_unstable(ctx => ctx.focusMode !== 'none');\n  return useTableCell_unstable({ as: 'div', role: 'gridcell', tabIndex: tabbable ? 0 : undefined, ...props }, ref);\n};\n"],"sourceRoot":"../src/"}

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

@@ -6,6 +6,8 @@ Object.defineProperty(exports, "__esModule", {
 exports.useDataGridRow_unstable = void 0;
 
 const useTableRow_1 = /*#__PURE__*/require("../TableRow/useTableRow");
+
+const dataGridContext_1 = /*#__PURE__*/require("../../contexts/dataGridContext");
 /**
  * Create the state required to render DataGridRow.
  *
@@ -18,7 +20,13 @@ const useTableRow_1 = /*#__PURE__*/require("../TableRow/useTableRow");
 
 
 const useDataGridRow_unstable = (props, ref) => {
+  const columnDefs = dataGridContext_1.useDataGridContext_unstable(ctx => ctx.columns);
+  const cellRenderFunction = props.children;
+  const children = columnDefs.map(columnDef => {
+    return cellRenderFunction(columnDef);
+  });
   return useTableRow_1.useTableRow_unstable({ ...props,
+    children,
     as: 'div'
   }, ref);
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-table/src/components/DataGridRow/useDataGridRow.ts"],"names":[],"mappings":";;;;;;;AAEA,MAAA,aAAA,gBAAA,OAAA,CAAA,yBAAA,CAAA;AAEA;;;;;;;;AAQG;;;AACI,MAAM,uBAAuB,GAAG,CAAC,KAAD,EAA0B,GAA1B,KAA2E;EAChH,OAAO,aAAA,CAAA,oBAAA,CAAqB,EAAE,GAAG,KAAL;IAAY,EAAE,EAAE;EAAhB,CAArB,EAA8C,GAA9C,CAAP;AACD,CAFM;;AAAM,OAAA,CAAA,uBAAA,GAAuB,uBAAvB","sourcesContent":["import * as React from 'react';\nimport type { DataGridRowProps, DataGridRowState } from './DataGridRow.types';\nimport { useTableRow_unstable } from '../TableRow/useTableRow';\n\n/**\n * Create the state required to render DataGridRow.\n *\n * The returned state can be modified with hooks such as useDataGridRowStyles_unstable,\n * before being passed to renderDataGridRow_unstable.\n *\n * @param props - props from this instance of DataGridRow\n * @param ref - reference to root HTMLElement of DataGridRow\n */\nexport const useDataGridRow_unstable = (props: DataGridRowProps, ref: React.Ref<HTMLElement>): DataGridRowState => {\n  return useTableRow_unstable({ ...props, as: 'div' }, ref);\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["packages/react-components/react-table/src/components/DataGridRow/useDataGridRow.ts"],"names":[],"mappings":";;;;;;;AAEA,MAAA,aAAA,gBAAA,OAAA,CAAA,yBAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,gCAAA,CAAA;AAEA;;;;;;;;AAQG;;;AACI,MAAM,uBAAuB,GAAG,CAAC,KAAD,EAA0B,GAA1B,KAA2E;EAChH,MAAM,UAAU,GAAG,iBAAA,CAAA,2BAAA,CAA4B,GAAG,IAAI,GAAG,CAAC,OAAvC,CAAnB;EAEA,MAAM,kBAAkB,GAAG,KAAK,CAAC,QAAjC;EACA,MAAM,QAAQ,GAAG,UAAU,CAAC,GAAX,CAAe,SAAS,IAAG;IAC1C,OAAO,kBAAkB,CAAC,SAAD,CAAzB;EACD,CAFgB,CAAjB;EAIA,OAAO,aAAA,CAAA,oBAAA,CAAqB,EAAE,GAAG,KAAL;IAAY,QAAZ;IAAsB,EAAE,EAAE;EAA1B,CAArB,EAAwD,GAAxD,CAAP;AACD,CATM;;AAAM,OAAA,CAAA,uBAAA,GAAuB,uBAAvB","sourcesContent":["import * as React from 'react';\nimport type { DataGridRowProps, DataGridRowState } from './DataGridRow.types';\nimport { useTableRow_unstable } from '../TableRow/useTableRow';\nimport { useDataGridContext_unstable } from '../../contexts/dataGridContext';\n\n/**\n * Create the state required to render DataGridRow.\n *\n * The returned state can be modified with hooks such as useDataGridRowStyles_unstable,\n * before being passed to renderDataGridRow_unstable.\n *\n * @param props - props from this instance of DataGridRow\n * @param ref - reference to root HTMLElement of DataGridRow\n */\nexport const useDataGridRow_unstable = (props: DataGridRowProps, ref: React.Ref<HTMLElement>): DataGridRowState => {\n  const columnDefs = useDataGridContext_unstable(ctx => ctx.columns);\n\n  const cellRenderFunction = props.children;\n  const children = columnDefs.map(columnDef => {\n    return cellRenderFunction(columnDef);\n  });\n\n  return useTableRow_unstable({ ...props, children, as: 'div' }, ref);\n};\n"],"sourceRoot":"../src/"}

package/lib-commonjs/components/DataGridSelectionCell/useDataGridSelectionCell.js

@@ -18,8 +18,10 @@ const useTableSelectionCell_1 = /*#__PURE__*/require("../TableSelectionCell/useT
 
 
 const useDataGridSelectionCell_unstable = (props, ref) => {
-  return useTableSelectionCell_1.useTableSelectionCell_unstable({ ...props,
-    as: 'div'
+  return useTableSelectionCell_1.useTableSelectionCell_unstable({
+    as: 'div',
+    role: 'gridcell',
+    ...props
   }, ref);
 };
 

package/lib-commonjs/components/DataGridSelectionCell/useDataGridSelectionCell.js.map

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-table/src/components/DataGridSelectionCell/useDataGridSelectionCell.ts"],"names":[],"mappings":";;;;;;;AACA,MAAA,uBAAA,gBAAA,OAAA,CAAA,6CAAA,CAAA;AAGA;;;;;;;;AAQG;;;AACI,MAAM,iCAAiC,GAAG,CAC/C,KAD+C,EAE/C,GAF+C,KAGjB;EAC9B,OAAO,uBAAA,CAAA,8BAAA,CAA+B,EAAE,GAAG,KAAL;IAAY,EAAE,EAAE;EAAhB,CAA/B,EAAwD,GAAxD,CAAP;AACD,CALM;;AAAM,OAAA,CAAA,iCAAA,GAAiC,iCAAjC","sourcesContent":["import * as React from 'react';\nimport { useTableSelectionCell_unstable } from '../TableSelectionCell/useTableSelectionCell';\nimport type { DataGridSelectionCellProps, DataGridSelectionCellState } from './DataGridSelectionCell.types';\n\n/**\n * Create the state required to render DataGridSelectionCell.\n *\n * The returned state can be modified with hooks such as useDataGridSelectionCellStyles_unstable,\n * before being passed to renderDataGridSelectionCell_unstable.\n *\n * @param props - props from this instance of DataGridSelectionCell\n * @param ref - reference to root HTMLElement of DataGridSelectionCell\n */\nexport const useDataGridSelectionCell_unstable = (\n  props: DataGridSelectionCellProps,\n  ref: React.Ref<HTMLElement>,\n): DataGridSelectionCellState => {\n  return useTableSelectionCell_unstable({ ...props, as: 'div' }, ref);\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["packages/react-components/react-table/src/components/DataGridSelectionCell/useDataGridSelectionCell.ts"],"names":[],"mappings":";;;;;;;AACA,MAAA,uBAAA,gBAAA,OAAA,CAAA,6CAAA,CAAA;AAGA;;;;;;;;AAQG;;;AACI,MAAM,iCAAiC,GAAG,CAC/C,KAD+C,EAE/C,GAF+C,KAGjB;EAC9B,OAAO,uBAAA,CAAA,8BAAA,CAA+B;IAAE,EAAE,EAAE,KAAN;IAAa,IAAI,EAAE,UAAnB;IAA+B,GAAG;EAAlC,CAA/B,EAA0E,GAA1E,CAAP;AACD,CALM;;AAAM,OAAA,CAAA,iCAAA,GAAiC,iCAAjC","sourcesContent":["import * as React from 'react';\nimport { useTableSelectionCell_unstable } from '../TableSelectionCell/useTableSelectionCell';\nimport type { DataGridSelectionCellProps, DataGridSelectionCellState } from './DataGridSelectionCell.types';\n\n/**\n * Create the state required to render DataGridSelectionCell.\n *\n * The returned state can be modified with hooks such as useDataGridSelectionCellStyles_unstable,\n * before being passed to renderDataGridSelectionCell_unstable.\n *\n * @param props - props from this instance of DataGridSelectionCell\n * @param ref - reference to root HTMLElement of DataGridSelectionCell\n */\nexport const useDataGridSelectionCell_unstable = (\n  props: DataGridSelectionCellProps,\n  ref: React.Ref<HTMLElement>,\n): DataGridSelectionCellState => {\n  return useTableSelectionCell_unstable({ as: 'div', role: 'gridcell', ...props }, ref);\n};\n"],"sourceRoot":"../src/"}

package/lib-commonjs/components/TableHeader/useTableHeader.js

@@ -7,8 +7,6 @@ exports.useTableHeader_unstable = void 0;
 
 const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
 
-const react_tabster_1 = /*#__PURE__*/require("@fluentui/react-tabster");
-
 const tableContext_1 = /*#__PURE__*/require("../../contexts/tableContext");
 /**
  * Create the state required to render TableHeader.
@@ -25,13 +23,8 @@ const useTableHeader_unstable = (props, ref) => {
   var _a;
 
   const {
-    noNativeElements,
-    sortable
+    noNativeElements
   } = tableContext_1.useTableContext();
-  const keyboardNavAttr = react_tabster_1.useArrowNavigationGroup({
-    axis: 'horizontal',
-    circular: true
-  });
   const rootComponent = ((_a = props.as) !== null && _a !== void 0 ? _a : noNativeElements) ? 'div' : 'thead';
   return {
     components: {
@@ -40,7 +33,6 @@ const useTableHeader_unstable = (props, ref) => {
     root: react_utilities_1.getNativeElementProps(rootComponent, {
       ref,
       role: rootComponent === 'div' ? 'rowgroup' : undefined,
-      ...(sortable && keyboardNavAttr),
       ...props
     }),
     noNativeElements

package/lib-commonjs/components/TableHeader/useTableHeader.js.map

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-table/src/components/TableHeader/useTableHeader.ts"],"names":[],"mappings":";;;;;;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AACA,MAAA,eAAA,gBAAA,OAAA,CAAA,yBAAA,CAAA;;AAEA,MAAA,cAAA,gBAAA,OAAA,CAAA,6BAAA,CAAA;AAEA;;;;;;;;AAQG;;;AACI,MAAM,uBAAuB,GAAG,CAAC,KAAD,EAA0B,GAA1B,KAA2E;;;EAChH,MAAM;IAAE,gBAAF;IAAoB;EAApB,IAAiC,cAAA,CAAA,eAAA,EAAvC;EACA,MAAM,eAAe,GAAG,eAAA,CAAA,uBAAA,CAAwB;IAAE,IAAI,EAAE,YAAR;IAAsB,QAAQ,EAAE;EAAhC,CAAxB,CAAxB;EAEA,MAAM,aAAa,GAAG,CAAA,CAAA,EAAA,GAAA,KAAK,CAAC,EAAN,MAAQ,IAAR,IAAQ,EAAA,KAAA,KAAA,CAAR,GAAQ,EAAR,GAAY,gBAAZ,IAA+B,KAA/B,GAAuC,OAA7D;EACA,OAAO;IACL,UAAU,EAAE;MACV,IAAI,EAAE;IADI,CADP;IAIL,IAAI,EAAE,iBAAA,CAAA,qBAAA,CAAsB,aAAtB,EAAqC;MACzC,GADyC;MAEzC,IAAI,EAAE,aAAa,KAAK,KAAlB,GAA0B,UAA1B,GAAuC,SAFJ;MAGzC,IAAI,QAAQ,IAAI,eAAhB,CAHyC;MAIzC,GAAG;IAJsC,CAArC,CAJD;IAUL;EAVK,CAAP;AAYD,CAjBM;;AAAM,OAAA,CAAA,uBAAA,GAAuB,uBAAvB","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps } from '@fluentui/react-utilities';\nimport { useArrowNavigationGroup } from '@fluentui/react-tabster';\nimport type { TableHeaderProps, TableHeaderState } from './TableHeader.types';\nimport { useTableContext } from '../../contexts/tableContext';\n\n/**\n * Create the state required to render TableHeader.\n *\n * The returned state can be modified with hooks such as useTableHeaderStyles_unstable,\n * before being passed to renderTableHeader_unstable.\n *\n * @param props - props from this instance of TableHeader\n * @param ref - reference to root HTMLElement of TableHeader\n */\nexport const useTableHeader_unstable = (props: TableHeaderProps, ref: React.Ref<HTMLElement>): TableHeaderState => {\n  const { noNativeElements, sortable } = useTableContext();\n  const keyboardNavAttr = useArrowNavigationGroup({ axis: 'horizontal', circular: true });\n\n  const rootComponent = props.as ?? noNativeElements ? 'div' : 'thead';\n  return {\n    components: {\n      root: rootComponent,\n    },\n    root: getNativeElementProps(rootComponent, {\n      ref,\n      role: rootComponent === 'div' ? 'rowgroup' : undefined,\n      ...(sortable && keyboardNavAttr),\n      ...props,\n    }),\n    noNativeElements,\n  };\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["packages/react-components/react-table/src/components/TableHeader/useTableHeader.ts"],"names":[],"mappings":";;;;;;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AAEA,MAAA,cAAA,gBAAA,OAAA,CAAA,6BAAA,CAAA;AAEA;;;;;;;;AAQG;;;AACI,MAAM,uBAAuB,GAAG,CAAC,KAAD,EAA0B,GAA1B,KAA2E;;;EAChH,MAAM;IAAE;EAAF,IAAuB,cAAA,CAAA,eAAA,EAA7B;EAEA,MAAM,aAAa,GAAG,CAAA,CAAA,EAAA,GAAA,KAAK,CAAC,EAAN,MAAQ,IAAR,IAAQ,EAAA,KAAA,KAAA,CAAR,GAAQ,EAAR,GAAY,gBAAZ,IAA+B,KAA/B,GAAuC,OAA7D;EACA,OAAO;IACL,UAAU,EAAE;MACV,IAAI,EAAE;IADI,CADP;IAIL,IAAI,EAAE,iBAAA,CAAA,qBAAA,CAAsB,aAAtB,EAAqC;MACzC,GADyC;MAEzC,IAAI,EAAE,aAAa,KAAK,KAAlB,GAA0B,UAA1B,GAAuC,SAFJ;MAGzC,GAAG;IAHsC,CAArC,CAJD;IASL;EATK,CAAP;AAWD,CAfM;;AAAM,OAAA,CAAA,uBAAA,GAAuB,uBAAvB","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps } from '@fluentui/react-utilities';\nimport type { TableHeaderProps, TableHeaderState } from './TableHeader.types';\nimport { useTableContext } from '../../contexts/tableContext';\n\n/**\n * Create the state required to render TableHeader.\n *\n * The returned state can be modified with hooks such as useTableHeaderStyles_unstable,\n * before being passed to renderTableHeader_unstable.\n *\n * @param props - props from this instance of TableHeader\n * @param ref - reference to root HTMLElement of TableHeader\n */\nexport const useTableHeader_unstable = (props: TableHeaderProps, ref: React.Ref<HTMLElement>): TableHeaderState => {\n  const { noNativeElements } = useTableContext();\n\n  const rootComponent = props.as ?? noNativeElements ? 'div' : 'thead';\n  return {\n    components: {\n      root: rootComponent,\n    },\n    root: getNativeElementProps(rootComponent, {\n      ref,\n      role: rootComponent === 'div' ? 'rowgroup' : undefined,\n      ...props,\n    }),\n    noNativeElements,\n  };\n};\n"],"sourceRoot":"../src/"}

package/lib-commonjs/components/TableRow/useTableRowStyles.js

@@ -78,13 +78,13 @@ const useStyles = /*#__PURE__*/react_1.__styles({
     "lj723h": "f1g4hkjv",
     "Bw1l9kw": "flaujjr",
     "B43xm9u": "f15ngxrw",
-    "Bs8fhbl": "fd28r7f",
+    "Bs8fhbl": "f18sq9la",
     "i921ia": "fjbbrdp",
     "Jwef8y": "f1t94bn6",
     "Bi91k9c": "feu1g3u",
-    "Bi7d7a3": "f1boln4s",
+    "Bi7d7a3": "f14h8iit",
     "Bpt6rm4": "f1uorfem",
-    "Bt8cqyk": "frasl6z",
+    "Bt8cqyk": "f1fcpt6",
     "ff6mpl": "fw60kww"
   },
   "medium": {
@@ -159,8 +159,8 @@ const useStyles = /*#__PURE__*/react_1.__styles({
   "none": {}
 }, {
   "d": [".f19n0e5{color:var(--colorNeutralForeground1);}", ".f1ewtqcl{box-sizing:border-box;}", ".fblfkud[data-fui-focus-visible]:focus-within .fui-TableSelectionCell{opacity:1;}", ".fz36nt7[data-fui-focus-visible]{outline-width:2px;}", ".f9znhxp[data-fui-focus-visible]{outline-style:solid;}", ".f1o2ludy[data-fui-focus-visible]{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f1kjnpwc[data-fui-focus-visible]{border-bottom-left-radius:var(--borderRadiusMedium);}", ".fxmnebo[data-fui-focus-visible]{border-top-right-radius:var(--borderRadiusMedium);}", ".f1witrsb[data-fui-focus-visible]{border-top-left-radius:var(--borderRadiusMedium);}", ".f1vxd6vx{border-bottom-width:var(--strokeWidthThin);}", ".fg706s2{border-bottom-style:solid;}", ".frpde29{border-bottom-color:var(--colorNeutralStroke2);}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".f16xkysk{background-color:var(--colorBrandBackground2);}", ".f1cgsbmv{color:var(--colorNeutralForeground1Hover);}", ".frmsihh{border-top-color:var(--colorNeutralStrokeOnBrand);}", ".frttxa5{border-right-color:var(--colorNeutralStrokeOnBrand);}", ".f11o2r7f{border-left-color:var(--colorNeutralStrokeOnBrand);}", ".fem5et0{border-bottom-color:var(--colorNeutralStrokeOnBrand);}", ".fq5gl1p{background-color:var(--colorSubtleBackgroundSelected);}"],
-  "a": [".f1wfn5kd:active{background-color:var(--colorSubtleBackgroundPressed);}", ".f1g4hkjv:active{color:var(--colorNeutralForeground1Pressed);}", ".flaujjr:active .fui-TableCellActions{background-color:var(--colorSubtleBackgroundPressed);}", ".f15ngxrw:active .fui-TableCellActions{opacity:1;}", ".fd28r7f:active .fui-TableSelectionCell{background-color:var(--colorNeutralBackground1Hover);}", ".fjbbrdp:active .fui-TableSelectionCell{opacity:1;}", ".ftepret:active{background-color:var(--colorBrandBackgroundInvertedSelected);}", ".fa9o754:active{background-color:var(--colorSubtleBackgroundSelected);}"],
-  "h": [".f1t94bn6:hover{background-color:var(--colorSubtleBackgroundHover);}", ".feu1g3u:hover{color:var(--colorNeutralForeground1Hover);}", ".f1boln4s:hover .fui-TableCellActions{background-color:var(--colorNeutralBackground1Hover);}", ".f1uorfem:hover .fui-TableCellActions{opacity:1;}", ".frasl6z:hover .fui-TableSelectionCell{background-color:var(--colorNeutralBackground1Hover);}", ".fw60kww:hover .fui-TableSelectionCell{opacity:1;}", ".f121v1wq:hover{background-color:var(--colorBrandBackground2);}", ".f1uqaxdt:hover{background-color:var(--colorSubtleBackgroundSelected);}"],
+  "a": [".f1wfn5kd:active{background-color:var(--colorSubtleBackgroundPressed);}", ".f1g4hkjv:active{color:var(--colorNeutralForeground1Pressed);}", ".flaujjr:active .fui-TableCellActions{background-color:var(--colorSubtleBackgroundPressed);}", ".f15ngxrw:active .fui-TableCellActions{opacity:1;}", ".f18sq9la:active .fui-TableSelectionCell{background-color:var(--colorSubtleBackgroundHover);}", ".fjbbrdp:active .fui-TableSelectionCell{opacity:1;}", ".ftepret:active{background-color:var(--colorBrandBackgroundInvertedSelected);}", ".fa9o754:active{background-color:var(--colorSubtleBackgroundSelected);}"],
+  "h": [".f1t94bn6:hover{background-color:var(--colorSubtleBackgroundHover);}", ".feu1g3u:hover{color:var(--colorNeutralForeground1Hover);}", ".f14h8iit:hover .fui-TableCellActions{background-color:var(--colorSubtleBackgroundHover);}", ".f1uorfem:hover .fui-TableCellActions{opacity:1;}", ".f1fcpt6:hover .fui-TableSelectionCell{background-color:var(--colorSubtleBackgroundHover);}", ".fw60kww:hover .fui-TableSelectionCell{opacity:1;}", ".f121v1wq:hover{background-color:var(--colorBrandBackground2);}", ".f1uqaxdt:hover{background-color:var(--colorSubtleBackgroundSelected);}"],
   "m": [["@media (forced-colors: active){.fqlf3fd{border-top-width:2px;}}", {
     "m": "(forced-colors: active)"
   }], ["@media (forced-colors: active){.f9dpb3h{border-right-width:2px;}.fw2muls{border-left-width:2px;}}", {

package/lib-commonjs/components/TableRow/useTableRowStyles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-table/src/components/TableRow/useTableRowStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { TableRowSlots, TableRowState } from './TableRow.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { tableCellActionsClassNames } from '../TableCellActions/useTableCellActionsStyles';\nimport { tableSelectionCellClassNames } from '../TableSelectionCell/useTableSelectionCellStyles';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { useIsInTableHeader } from '../../contexts/tableHeaderContext';\n\nexport const tableRowClassName = 'fui-TableRow';\nexport const tableRowClassNames: SlotClassNames<TableRowSlots> = {\n  root: tableRowClassName,\n};\n\nconst useTableLayoutStyles = makeStyles({\n  root: {\n    display: 'table-row',\n  },\n\n  medium: {\n    height: '44px',\n  },\n\n  small: {\n    height: '34px',\n  },\n\n  smaller: {\n    height: '24px',\n  },\n});\n\nconst useFlexLayoutStyles = makeStyles({\n  root: {\n    display: 'flex',\n    alignItems: 'center',\n  },\n\n  medium: {\n    minHeight: '44px',\n  },\n\n  small: {\n    minHeight: '34px',\n  },\n\n  smaller: {\n    minHeight: '24px',\n  },\n});\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    color: tokens.colorNeutralForeground1,\n    boxSizing: 'border-box',\n    ...createCustomFocusIndicatorStyle(\n      {\n        [`& .${tableSelectionCellClassNames.root}`]: {\n          opacity: 1,\n        },\n      },\n      { selector: 'focus-within' },\n    ),\n    ...createCustomFocusIndicatorStyle(\n      {\n        ...shorthands.outline('2px', 'solid'),\n        ...shorthands.borderRadius(tokens.borderRadiusMedium),\n      },\n      { selector: 'focus', enableOutline: true },\n    ),\n  },\n\n  rootInteractive: {\n    ':active': {\n      backgroundColor: tokens.colorSubtleBackgroundPressed,\n      color: tokens.colorNeutralForeground1Pressed,\n      [`& .${tableCellActionsClassNames.root}`]: {\n        backgroundColor: tokens.colorSubtleBackgroundPressed,\n        opacity: 1,\n      },\n      [`& .${tableSelectionCellClassNames.root}`]: {\n        backgroundColor: tokens.colorNeutralBackground1Hover,\n        opacity: 1,\n      },\n    },\n    ':hover': {\n      backgroundColor: tokens.colorSubtleBackgroundHover,\n      color: tokens.colorNeutralForeground1Hover,\n      [`& .${tableCellActionsClassNames.root}`]: {\n        backgroundColor: tokens.colorNeutralBackground1Hover,\n        opacity: 1,\n      },\n      [`& .${tableSelectionCellClassNames.root}`]: {\n        backgroundColor: tokens.colorNeutralBackground1Hover,\n        opacity: 1,\n      },\n    },\n  },\n\n  medium: {\n    ...shorthands.borderBottom(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStroke2),\n  },\n\n  small: {\n    ...shorthands.borderBottom(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStroke2),\n  },\n\n  smaller: {\n    fontSize: tokens.fontSizeBase200,\n  },\n\n  brand: {\n    backgroundColor: tokens.colorBrandBackground2,\n    color: tokens.colorNeutralForeground1Hover,\n    ...shorthands.borderColor(tokens.colorNeutralStrokeOnBrand),\n    ':hover': {\n      backgroundColor: tokens.colorBrandBackground2,\n    },\n    ':active': {\n      backgroundColor: tokens.colorBrandBackgroundInvertedSelected,\n    },\n\n    '@media(forced-colors: active)': {\n      ...shorthands.border('2px', 'solid', 'transparent'),\n      ...shorthands.borderRadius(tokens.borderRadiusMedium),\n      boxSizing: 'border-box',\n      ':focus-visible': {\n        outlineOffset: '-4px',\n      },\n    },\n  },\n\n  neutral: {\n    '@media(forced-colors: active)': {\n      ...shorthands.border('2px', 'solid', 'transparent'),\n      ...shorthands.borderRadius(tokens.borderRadiusMedium),\n      boxSizing: 'border-box',\n      ':focus-visible': {\n        outlineOffset: '-4px',\n      },\n    },\n    backgroundColor: tokens.colorSubtleBackgroundSelected,\n    color: tokens.colorNeutralForeground1Hover,\n    ':hover': {\n      backgroundColor: tokens.colorSubtleBackgroundSelected,\n    },\n    ':active': {\n      backgroundColor: tokens.colorSubtleBackgroundSelected,\n    },\n    ...shorthands.borderColor(tokens.colorNeutralStrokeOnBrand),\n  },\n\n  none: {},\n});\n\n/**\n * Apply styling to the TableRow slots based on the state\n */\nexport const useTableRowStyles_unstable = (state: TableRowState): TableRowState => {\n  const isHeaderRow = useIsInTableHeader();\n  const styles = useStyles();\n  const layoutStyles = {\n    table: useTableLayoutStyles(),\n    flex: useFlexLayoutStyles(),\n  };\n  state.root.className = mergeClasses(\n    tableRowClassNames.root,\n    styles.root,\n    !isHeaderRow && styles.rootInteractive,\n    styles[state.size],\n    state.noNativeElements ? layoutStyles.flex.root : layoutStyles.table.root,\n    state.noNativeElements ? layoutStyles.flex[state.size] : layoutStyles.table[state.size],\n    styles[state.appearance],\n    state.root.className,\n  );\n\n  return state;\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["packages/react-components/react-table/src/components/TableRow/useTableRowStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { TableRowSlots, TableRowState } from './TableRow.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { tableCellActionsClassNames } from '../TableCellActions/useTableCellActionsStyles';\nimport { tableSelectionCellClassNames } from '../TableSelectionCell/useTableSelectionCellStyles';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { useIsInTableHeader } from '../../contexts/tableHeaderContext';\n\nexport const tableRowClassName = 'fui-TableRow';\nexport const tableRowClassNames: SlotClassNames<TableRowSlots> = {\n  root: tableRowClassName,\n};\n\nconst useTableLayoutStyles = makeStyles({\n  root: {\n    display: 'table-row',\n  },\n\n  medium: {\n    height: '44px',\n  },\n\n  small: {\n    height: '34px',\n  },\n\n  smaller: {\n    height: '24px',\n  },\n});\n\nconst useFlexLayoutStyles = makeStyles({\n  root: {\n    display: 'flex',\n    alignItems: 'center',\n  },\n\n  medium: {\n    minHeight: '44px',\n  },\n\n  small: {\n    minHeight: '34px',\n  },\n\n  smaller: {\n    minHeight: '24px',\n  },\n});\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    color: tokens.colorNeutralForeground1,\n    boxSizing: 'border-box',\n    ...createCustomFocusIndicatorStyle(\n      {\n        [`& .${tableSelectionCellClassNames.root}`]: {\n          opacity: 1,\n        },\n      },\n      { selector: 'focus-within' },\n    ),\n    ...createCustomFocusIndicatorStyle(\n      {\n        ...shorthands.outline('2px', 'solid'),\n        ...shorthands.borderRadius(tokens.borderRadiusMedium),\n      },\n      { selector: 'focus', enableOutline: true },\n    ),\n  },\n\n  rootInteractive: {\n    ':active': {\n      backgroundColor: tokens.colorSubtleBackgroundPressed,\n      color: tokens.colorNeutralForeground1Pressed,\n      [`& .${tableCellActionsClassNames.root}`]: {\n        backgroundColor: tokens.colorSubtleBackgroundPressed,\n        opacity: 1,\n      },\n      [`& .${tableSelectionCellClassNames.root}`]: {\n        backgroundColor: tokens.colorSubtleBackgroundHover,\n        opacity: 1,\n      },\n    },\n    ':hover': {\n      backgroundColor: tokens.colorSubtleBackgroundHover,\n      color: tokens.colorNeutralForeground1Hover,\n      [`& .${tableCellActionsClassNames.root}`]: {\n        backgroundColor: tokens.colorSubtleBackgroundHover,\n        opacity: 1,\n      },\n      [`& .${tableSelectionCellClassNames.root}`]: {\n        backgroundColor: tokens.colorSubtleBackgroundHover,\n        opacity: 1,\n      },\n    },\n  },\n\n  medium: {\n    ...shorthands.borderBottom(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStroke2),\n  },\n\n  small: {\n    ...shorthands.borderBottom(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStroke2),\n  },\n\n  smaller: {\n    fontSize: tokens.fontSizeBase200,\n  },\n\n  brand: {\n    backgroundColor: tokens.colorBrandBackground2,\n    color: tokens.colorNeutralForeground1Hover,\n    ...shorthands.borderColor(tokens.colorNeutralStrokeOnBrand),\n    ':hover': {\n      backgroundColor: tokens.colorBrandBackground2,\n    },\n    ':active': {\n      backgroundColor: tokens.colorBrandBackgroundInvertedSelected,\n    },\n\n    '@media(forced-colors: active)': {\n      ...shorthands.border('2px', 'solid', 'transparent'),\n      ...shorthands.borderRadius(tokens.borderRadiusMedium),\n      boxSizing: 'border-box',\n      ':focus-visible': {\n        outlineOffset: '-4px',\n      },\n    },\n  },\n\n  neutral: {\n    '@media(forced-colors: active)': {\n      ...shorthands.border('2px', 'solid', 'transparent'),\n      ...shorthands.borderRadius(tokens.borderRadiusMedium),\n      boxSizing: 'border-box',\n      ':focus-visible': {\n        outlineOffset: '-4px',\n      },\n    },\n    backgroundColor: tokens.colorSubtleBackgroundSelected,\n    color: tokens.colorNeutralForeground1Hover,\n    ':hover': {\n      backgroundColor: tokens.colorSubtleBackgroundSelected,\n    },\n    ':active': {\n      backgroundColor: tokens.colorSubtleBackgroundSelected,\n    },\n    ...shorthands.borderColor(tokens.colorNeutralStrokeOnBrand),\n  },\n\n  none: {},\n});\n\n/**\n * Apply styling to the TableRow slots based on the state\n */\nexport const useTableRowStyles_unstable = (state: TableRowState): TableRowState => {\n  const isHeaderRow = useIsInTableHeader();\n  const styles = useStyles();\n  const layoutStyles = {\n    table: useTableLayoutStyles(),\n    flex: useFlexLayoutStyles(),\n  };\n  state.root.className = mergeClasses(\n    tableRowClassNames.root,\n    styles.root,\n    !isHeaderRow && styles.rootInteractive,\n    styles[state.size],\n    state.noNativeElements ? layoutStyles.flex.root : layoutStyles.table.root,\n    state.noNativeElements ? layoutStyles.flex[state.size] : layoutStyles.table[state.size],\n    styles[state.appearance],\n    state.root.className,\n  );\n\n  return state;\n};\n"],"sourceRoot":"../src/"}

package/lib-commonjs/contexts/dataGridContext.js

@@ -0,0 +1,21 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useDataGridContext_unstable = exports.DataGridContextProvider = void 0;
+
+const react_context_selector_1 = /*#__PURE__*/require("@fluentui/react-context-selector");
+
+const hooks_1 = /*#__PURE__*/require("../hooks");
+
+const dataGridContext = /*#__PURE__*/react_context_selector_1.createContext(undefined);
+const dataGridContextDefaultValue = { ...hooks_1.defaultTableState,
+  focusMode: 'none'
+};
+exports.DataGridContextProvider = dataGridContext.Provider;
+
+const useDataGridContext_unstable = selector => react_context_selector_1.useContextSelector(dataGridContext, (ctx = dataGridContextDefaultValue) => selector(ctx));
+
+exports.useDataGridContext_unstable = useDataGridContext_unstable;
+//# sourceMappingURL=dataGridContext.js.map

package/lib-commonjs/contexts/dataGridContext.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["packages/react-components/react-table/src/contexts/dataGridContext.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,wBAAA,gBAAA,OAAA,CAAA,kCAAA,CAAA;;AAGA,MAAA,OAAA,gBAAA,OAAA,CAAA,UAAA,CAAA;;AAEA,MAAM,eAAe,gBAAG,wBAAA,CAAA,aAAA,CAAgD,SAAhD,CAAxB;AAEA,MAAM,2BAA2B,GAAyB,EACxD,GAAG,OAAA,CAAA,iBADqD;EAExD,SAAS,EAAE;AAF6C,CAA1D;AAKa,OAAA,CAAA,uBAAA,GAA0B,eAAe,CAAC,QAA1C;;AAEN,MAAM,2BAA2B,GAAO,QAAJ,IACzC,wBAAA,CAAA,kBAAA,CAAmB,eAAnB,EAAoC,CAAC,GAAG,GAAG,2BAAP,KAAuC,QAAQ,CAAC,GAAD,CAAnF,CADK;;AAAM,OAAA,CAAA,2BAAA,GAA2B,2BAA3B","sourcesContent":["import { createContext, useContextSelector } from '@fluentui/react-context-selector';\nimport type { ContextSelector } from '@fluentui/react-context-selector';\nimport { DataGridContextValue } from '../components/DataGrid/DataGrid.types';\nimport { defaultTableState } from '../hooks';\n\nconst dataGridContext = createContext<DataGridContextValue | undefined>(undefined);\n\nconst dataGridContextDefaultValue: DataGridContextValue = {\n  ...defaultTableState,\n  focusMode: 'none',\n};\n\nexport const DataGridContextProvider = dataGridContext.Provider;\n\nexport const useDataGridContext_unstable = <T>(selector: ContextSelector<DataGridContextValue, T>) =>\n  useContextSelector(dataGridContext, (ctx = dataGridContextDefaultValue) => selector(ctx));\n"],"sourceRoot":"../src/"}

package/lib-commonjs/hooks/createColumn.js

@@ -0,0 +1,50 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createColumn = void 0;
+
+const defaultCompare = () => 0;
+
+const defaultRenderCell = () => {
+  if (process.env.NODE_ENV !== 'production') {
+    // eslint-disable-next-line no-console
+    console.warn('@fluentui/react-table: You are using the default column renderCell function that renders null');
+  }
+
+  return null;
+};
+
+const defaultRenderHeaderCell = () => {
+  if (process.env.NODE_ENV !== 'production') {
+    // eslint-disable-next-line no-console
+    console.warn('@fluentui/react-table: You are using the default column renderHeaderCell function that renders null');
+  }
+
+  return null;
+};
+/**
+ * Helper function to create column definition with defaults
+ * @param options - column definition options
+ * @returns - column definition with defaults
+ */
+
+
+function createColumn(options) {
+  const {
+    columnId,
+    renderCell = defaultRenderCell,
+    renderHeaderCell = defaultRenderHeaderCell,
+    compare = defaultCompare
+  } = options;
+  return {
+    columnId,
+    renderCell,
+    renderHeaderCell,
+    compare
+  };
+}
+
+exports.createColumn = createColumn;
+//# sourceMappingURL=createColumn.js.map

package/lib-commonjs/hooks/createColumn.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["packages/react-components/react-table/src/hooks/createColumn.ts"],"names":[],"mappings":";;;;;;;AAEA,MAAM,cAAc,GAAG,MAAM,CAA7B;;AAEA,MAAM,iBAAiB,GAAG,MAAK;EAC7B,IAAI,OAAO,CAAC,GAAR,CAAY,QAAZ,KAAyB,YAA7B,EAA2C;IACzC;IACA,OAAO,CAAC,IAAR,CAAa,+FAAb;EACD;;EAED,OAAO,IAAP;AACD,CAPD;;AASA,MAAM,uBAAuB,GAAG,MAAK;EACnC,IAAI,OAAO,CAAC,GAAR,CAAY,QAAZ,KAAyB,YAA7B,EAA2C;IACzC;IACA,OAAO,CAAC,IAAR,CAAa,qGAAb;EACD;;EAED,OAAO,IAAP;AACD,CAPD;AASA;;;;AAIG;;;AACH,SAAgB,YAAhB,CAAoC,OAApC,EAAuE;EACrE,MAAM;IACJ,QADI;IAEJ,UAAU,GAAG,iBAFT;IAGJ,gBAAgB,GAAG,uBAHf;IAIJ,OAAO,GAAG;EAJN,IAKF,OALJ;EAOA,OAAO;IACL,QADK;IAEL,UAFK;IAGL,gBAHK;IAIL;EAJK,CAAP;AAMD;;AAdD,OAAA,CAAA,YAAA,GAAA,YAAA","sourcesContent":["import { CreateColumnOptions } from './types';\n\nconst defaultCompare = () => 0;\n\nconst defaultRenderCell = () => {\n  if (process.env.NODE_ENV !== 'production') {\n    // eslint-disable-next-line no-console\n    console.warn('@fluentui/react-table: You are using the default column renderCell function that renders null');\n  }\n\n  return null;\n};\n\nconst defaultRenderHeaderCell = () => {\n  if (process.env.NODE_ENV !== 'production') {\n    // eslint-disable-next-line no-console\n    console.warn('@fluentui/react-table: You are using the default column renderHeaderCell function that renders null');\n  }\n\n  return null;\n};\n\n/**\n * Helper function to create column definition with defaults\n * @param options - column definition options\n * @returns - column definition with defaults\n */\nexport function createColumn<TItem>(options: CreateColumnOptions<TItem>) {\n  const {\n    columnId,\n    renderCell = defaultRenderCell,\n    renderHeaderCell = defaultRenderHeaderCell,\n    compare = defaultCompare,\n  } = options;\n\n  return {\n    columnId,\n    renderCell,\n    renderHeaderCell,\n    compare,\n  };\n}\n"],"sourceRoot":"../src/"}

package/lib-commonjs/hooks/index.js

@@ -13,4 +13,6 @@ tslib_1.__exportStar(require("./useTable"), exports);
 tslib_1.__exportStar(require("./useSort"), exports);
 
 tslib_1.__exportStar(require("./useSelection"), exports);
+
+tslib_1.__exportStar(require("./createColumn"), exports);
 //# sourceMappingURL=index.js.map

package/lib-commonjs/hooks/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-table/src/hooks/index.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,SAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,YAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,WAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,gBAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './types';\nexport * from './useTable';\nexport * from './useSort';\nexport * from './useSelection';\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["packages/react-components/react-table/src/hooks/index.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,SAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,YAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,WAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,gBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,gBAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './types';\nexport * from './useTable';\nexport * from './useSort';\nexport * from './useSelection';\nexport * from './createColumn';\n"],"sourceRoot":"../src/"}

package/lib-commonjs/hooks/selectionManager.js

@@ -13,7 +13,7 @@ function createSelectionManager(mode, onSelectionChange = () => undefined) {
 exports.createSelectionManager = createSelectionManager;
 
 function createMultipleSelectionManager(onSelectionChange) {
-  const toggleAllItems = (itemIds, selectedItems) => {
+  const toggleAllItems = (e, itemIds, selectedItems) => {
     const allItemsSelected = itemIds.every(itemId => selectedItems.has(itemId));
 
     if (allItemsSelected) {
@@ -22,31 +22,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) => {
@@ -64,20 +64,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-commonjs/hooks/selectionManager.js.map

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-table/src/hooks/selectionManager.ts"],"names":[],"mappings":";;;;;;;AAeA,SAAgB,sBAAhB,CACE,IADF,EAEE,iBAAA,GAA+C,MAAM,SAFvD,EAEgE;EAE9D,MAAM,cAAc,GAAG,IAAI,KAAK,aAAT,GAAyB,8BAAzB,GAA0D,4BAAjF;EAEA,OAAO,cAAc,CAAC,iBAAD,CAArB;AACD;;AAPD,OAAA,CAAA,sBAAA,GAAA,sBAAA;;AASA,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-commonjs/hooks/useSelection.js

@@ -50,23 +50,23 @@ function useSelectionState(tableState, options) {
     state: selectedItems
   });
   const selectionManager = React.useMemo(() => {
-    return selectionManager_1.createSelectionManager(selectionMode, newSelectedItems => {
+    return selectionManager_1.createSelectionManager(selectionMode, (e, newSelectedItems) => {
       setSelected(() => {
-        onSelectionChange === null || onSelectionChange === void 0 ? void 0 : onSelectionChange(newSelectedItems);
+        onSelectionChange === null || onSelectionChange === void 0 ? void 0 : onSelectionChange(e, newSelectedItems);
         return newSelectedItems;
       });
     });
   }, [onSelectionChange, selectionMode, setSelected]);
-  const toggleAllRows = react_utilities_1.useEventCallback(() => {
-    selectionManager.toggleAllItems(items.map((item, i) => {
+  const toggleAllRows = react_utilities_1.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 = react_utilities_1.useEventCallback(rowId => selectionManager.toggleItem(rowId, selected));
-  const deselectRow = react_utilities_1.useEventCallback(rowId => selectionManager.deselectItem(rowId, selected));
-  const selectRow = react_utilities_1.useEventCallback(rowId => selectionManager.selectItem(rowId, selected));
+  const toggleRow = react_utilities_1.useEventCallback((e, rowId) => selectionManager.toggleItem(e, rowId, selected));
+  const deselectRow = react_utilities_1.useEventCallback((e, rowId) => selectionManager.deselectItem(e, rowId, selected));
+  const selectRow = react_utilities_1.useEventCallback((e, rowId) => selectionManager.selectItem(e, rowId, selected));
 
   const isRowSelected = rowId => selectionManager.isSelected(rowId, selected);
 

package/lib-commonjs/hooks/useSelection.js.map

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-table/src/hooks/useSelection.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, UseSelectionOptions } 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};\n\nexport function useSelection<TItem>(options: UseSelectionOptions) {\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>) => useSelectionState(tableState, options);\n}\n\nexport function useSelectionState<TItem>(\n  tableState: TableState<TItem>,\n  options: UseSelectionOptions,\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, newSelectedItems => {\n      setSelected(() => {\n        onSelectionChange?.(newSelectedItems);\n        return newSelectedItems;\n      });\n    });\n  }, [onSelectionChange, selectionMode, setSelected]);\n\n  const toggleAllRows: TableSelectionState['toggleAllRows'] = useEventCallback(() => {\n    selectionManager.toggleAllItems(\n      items.map((item, i) => getRowId?.(item) ?? i),\n      selected,\n    );\n  });\n\n  const toggleRow: TableSelectionState['toggleRow'] = useEventCallback((rowId: RowId) =>\n    selectionManager.toggleItem(rowId, selected),\n  );\n\n  const deselectRow: TableSelectionState['deselectRow'] = useEventCallback((rowId: RowId) =>\n    selectionManager.deselectItem(rowId, selected),\n  );\n\n  const selectRow: TableSelectionState['selectRow'] = useEventCallback((rowId: RowId) =>\n    selectionManager.selectItem(rowId, selected),\n  );\n\n  const isRowSelected: TableSelectionState['isRowSelected'] = (rowId: RowId) =>\n    selectionManager.isSelected(rowId, selected);\n\n  return {\n    ...tableState,\n    selection: {\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/"}
+{"version":3,"sources":["packages/react-components/react-table/src/hooks/useSelection.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AACA,MAAA,kBAAA,gBAAA,OAAA,CAAA,oBAAA,CAAA;;AAGA,MAAM,IAAI,GAAG,MAAM,SAAnB;;AAEa,OAAA,CAAA,0BAAA,GAAkD;EAC7D,eAAe,EAAE,KAD4C;EAE7D,SAAS,EAAE,IAFkD;EAG7D,WAAW,EAAE,IAHgD;EAI7D,aAAa,EAAE,MAAM,KAJwC;EAK7D,SAAS,EAAE,IALkD;EAM7D,YAAY,eAAE,IAAI,GAAJ,EAN+C;EAO7D,gBAAgB,EAAE,KAP2C;EAQ7D,aAAa,EAAE,IAR8C;EAS7D,SAAS,EAAE;AATkD,CAAlD;;AAYb,SAAgB,YAAhB,CAAoC,OAApC,EAAgE;EAC9D;EACA;EACA,OAAQ,UAAD,IAAmC,iBAAiB,CAAC,UAAD,EAAa,OAAb,CAA3D;AACD;;AAJD,OAAA,CAAA,YAAA,GAAA,YAAA;;AAMA,SAAgB,iBAAhB,CACE,UADF,EAEE,OAFF,EAE8B;EAE5B,MAAM;IAAE,KAAF;IAAS;EAAT,IAAsB,UAA5B;EACA,MAAM;IAAE,aAAF;IAAiB,oBAAjB;IAAuC,aAAvC;IAAsD;EAAtD,IAA4E,OAAlF;EAEA,MAAM,CAAC,QAAD,EAAW,WAAX,IAA0B,iBAAA,CAAA,oBAAA,CAAqB;IACnD,YAAY,EAAE,IAAI,GAAJ,EADqC;IAEnD,YAAY,EAAE,oBAFqC;IAGnD,KAAK,EAAE;EAH4C,CAArB,CAAhC;EAMA,MAAM,gBAAgB,GAAG,KAAK,CAAC,OAAN,CAAc,MAAK;IAC1C,OAAO,kBAAA,CAAA,sBAAA,CAAuB,aAAvB,EAAsC,CAAC,CAAD,EAAI,gBAAJ,KAAwB;MACnE,WAAW,CAAC,MAAK;QACf,iBAAiB,KAAA,IAAjB,IAAA,iBAAiB,KAAA,KAAA,CAAjB,GAAiB,KAAA,CAAjB,GAAA,iBAAiB,CAAG,CAAH,EAA8B,gBAA9B,CAAjB;QACA,OAAO,gBAAP;MACD,CAHU,CAAX;IAID,CALM,CAAP;EAMD,CAPwB,EAOtB,CAAC,iBAAD,EAAoB,aAApB,EAAmC,WAAnC,CAPsB,CAAzB;EASA,MAAM,aAAa,GAAyC,iBAAA,CAAA,gBAAA,CAAiB,CAAC,IAAG;IAC/E,gBAAgB,CAAC,cAAjB,CACE,CADF,EAEE,KAAK,CAAC,GAAN,CAAU,CAAC,IAAD,EAAO,CAAP,KAAY;MAAA,IAAA,EAAA;;MAAC,OAAA,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,CAApB;IAAqB,CAA5C,CAFF,EAGE,QAHF;EAKD,CAN2D,CAA5D;EAQA,MAAM,SAAS,GAAqC,iBAAA,CAAA,gBAAA,CAAiB,CAAC,CAAD,EAAI,KAAJ,KACnE,gBAAgB,CAAC,UAAjB,CAA4B,CAA5B,EAA+B,KAA/B,EAAsC,QAAtC,CADkD,CAApD;EAIA,MAAM,WAAW,GAAuC,iBAAA,CAAA,gBAAA,CAAiB,CAAC,CAAD,EAAI,KAAJ,KACvE,gBAAgB,CAAC,YAAjB,CAA8B,CAA9B,EAAiC,KAAjC,EAAwC,QAAxC,CADsD,CAAxD;EAIA,MAAM,SAAS,GAAqC,iBAAA,CAAA,gBAAA,CAAiB,CAAC,CAAD,EAAI,KAAJ,KACnE,gBAAgB,CAAC,UAAjB,CAA4B,CAA5B,EAA+B,KAA/B,EAAsC,QAAtC,CADkD,CAApD;;EAIA,MAAM,aAAa,GAA0C,KAAD,IAC1D,gBAAgB,CAAC,UAAjB,CAA4B,KAA5B,EAAmC,QAAnC,CADF;;EAGA,OAAO,EACL,GAAG,UADE;IAEL,SAAS,EAAE;MACT,gBAAgB,EAAE,QAAQ,CAAC,IAAT,GAAgB,CADzB;MAET,eAAe,EAAE,aAAa,KAAK,QAAlB,GAA6B,QAAQ,CAAC,IAAT,GAAgB,CAA7C,GAAiD,QAAQ,CAAC,IAAT,KAAkB,KAAK,CAAC,MAFjF;MAGT,YAAY,EAAE,QAHL;MAIT,SAJS;MAKT,aALS;MAMT,SAAS,EAAE,gBAAgB,CAAC,UANnB;MAOT,WAPS;MAQT,SARS;MAST;IATS;EAFN,CAAP;AAcD;;AA3DD,OAAA,CAAA,iBAAA,GAAA,iBAAA","sourcesContent":["import * as React from 'react';\nimport { useControllableState, useEventCallback } from '@fluentui/react-utilities';\nimport { createSelectionManager } from './selectionManager';\nimport type { RowId, TableSelectionState, TableState, UseSelectionOptions } 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};\n\nexport function useSelection<TItem>(options: UseSelectionOptions) {\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>) => useSelectionState(tableState, options);\n}\n\nexport function useSelectionState<TItem>(\n  tableState: TableState<TItem>,\n  options: UseSelectionOptions,\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, 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      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-commonjs/hooks/useSort.js

@@ -48,7 +48,7 @@ function useSortState(tableState, options) {
     sortDirection
   } = sorted;
 
-  const toggleColumnSort = columnId => {
+  const toggleColumnSort = (e, columnId) => {
     setSorted(s => {
       const newState = { ...s,
         sortColumn: columnId
@@ -60,17 +60,17 @@ 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);
   };