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

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/"}

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

@@ -5,9 +5,23 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useDataGridRow_unstable = void 0;
 
+const React = /*#__PURE__*/require("react");
+
 const useTableRow_1 = /*#__PURE__*/require("../TableRow/useTableRow");
 
 const dataGridContext_1 = /*#__PURE__*/require("../../contexts/dataGridContext");
+
+const columnIdContext_1 = /*#__PURE__*/require("../../contexts/columnIdContext");
+
+const DataGridSelectionCell_1 = /*#__PURE__*/require("../DataGridSelectionCell/DataGridSelectionCell");
+
+const rowIdContext_1 = /*#__PURE__*/require("../../contexts/rowIdContext");
+
+const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
+
+const tableHeaderContext_1 = /*#__PURE__*/require("../../contexts/tableHeaderContext");
+
+const react_utilities_2 = /*#__PURE__*/require("@fluentui/react-utilities");
 /**
  * Create the state required to render DataGridRow.
  *
@@ -20,15 +34,61 @@ const dataGridContext_1 = /*#__PURE__*/require("../../contexts/dataGridContext")
 
 
 const useDataGridRow_unstable = (props, ref) => {
+  const rowId = rowIdContext_1.useRowIdContext();
+  const isHeader = tableHeaderContext_1.useIsInTableHeader();
   const columnDefs = dataGridContext_1.useDataGridContext_unstable(ctx => ctx.columns);
+  const selectable = dataGridContext_1.useDataGridContext_unstable(ctx => ctx.selectableRows);
+  const selected = dataGridContext_1.useDataGridContext_unstable(ctx => ctx.selection.isRowSelected(rowId));
+  const appearance = dataGridContext_1.useDataGridContext_unstable(ctx => {
+    if (!isHeader && selectable && ctx.selection.isRowSelected(rowId)) {
+      return ctx.selectionAppearance;
+    }
+
+    return 'none';
+  });
+  const toggleRow = dataGridContext_1.useDataGridContext_unstable(ctx => ctx.selection.toggleRow);
   const cellRenderFunction = props.children;
-  const children = columnDefs.map(columnDef => {
-    return cellRenderFunction(columnDef);
+  const cells = columnDefs.map(columnDef => {
+    return React.createElement(columnIdContext_1.ColumnIdContextProvider, {
+      value: columnDef.columnId,
+      key: columnDef.columnId
+    }, cellRenderFunction(columnDef));
+  });
+  const onClick = react_utilities_1.useEventCallback(e => {
+    var _a;
+
+    if (selectable && !isHeader) {
+      toggleRow(e, rowId);
+    }
+
+    (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props, e);
+  });
+  const onKeyDown = react_utilities_1.useEventCallback(e => {
+    var _a;
+
+    if (selectable && !isHeader && e.key === ' ') {
+      toggleRow(e, rowId);
+    }
+
+    (_a = props.onKeyDown) === null || _a === void 0 ? void 0 : _a.call(props, e);
   });
-  return useTableRow_1.useTableRow_unstable({ ...props,
-    children,
+  const baseState = useTableRow_1.useTableRow_unstable({
+    appearance,
+    'aria-selected': selectable ? selected : undefined,
+    ...props,
+    onClick,
+    onKeyDown,
+    children: cells,
     as: 'div'
   }, ref);
+  return { ...baseState,
+    components: { ...baseState.components,
+      selectionCell: DataGridSelectionCell_1.DataGridSelectionCell
+    },
+    selectionCell: react_utilities_2.resolveShorthand(props.selectionCell, {
+      required: selectable
+    })
+  };
 };
 
 exports.useDataGridRow_unstable = useDataGridRow_unstable;

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;;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/"}
+{"version":3,"sources":["packages/react-components/react-table/src/components/DataGridRow/useDataGridRow.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AAEA,MAAA,aAAA,gBAAA,OAAA,CAAA,yBAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,gCAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,gCAAA,CAAA;;AACA,MAAA,uBAAA,gBAAA,OAAA,CAAA,gDAAA,CAAA;;AACA,MAAA,cAAA,gBAAA,OAAA,CAAA,6BAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AACA,MAAA,oBAAA,gBAAA,OAAA,CAAA,mCAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAEA;;;;;;;;AAQG;;;AACI,MAAM,uBAAuB,GAAG,CAAC,KAAD,EAA0B,GAA1B,KAA2E;EAChH,MAAM,KAAK,GAAG,cAAA,CAAA,eAAA,EAAd;EACA,MAAM,QAAQ,GAAG,oBAAA,CAAA,kBAAA,EAAjB;EACA,MAAM,UAAU,GAAG,iBAAA,CAAA,2BAAA,CAA4B,GAAG,IAAI,GAAG,CAAC,OAAvC,CAAnB;EACA,MAAM,UAAU,GAAG,iBAAA,CAAA,2BAAA,CAA4B,GAAG,IAAI,GAAG,CAAC,cAAvC,CAAnB;EACA,MAAM,QAAQ,GAAG,iBAAA,CAAA,2BAAA,CAA4B,GAAG,IAAI,GAAG,CAAC,SAAJ,CAAc,aAAd,CAA4B,KAA5B,CAAnC,CAAjB;EACA,MAAM,UAAU,GAAG,iBAAA,CAAA,2BAAA,CAA4B,GAAG,IAAG;IACnD,IAAI,CAAC,QAAD,IAAa,UAAb,IAA2B,GAAG,CAAC,SAAJ,CAAc,aAAd,CAA4B,KAA5B,CAA/B,EAAmE;MACjE,OAAO,GAAG,CAAC,mBAAX;IACD;;IAED,OAAO,MAAP;EACD,CANkB,CAAnB;EAOA,MAAM,SAAS,GAAG,iBAAA,CAAA,2BAAA,CAA4B,GAAG,IAAI,GAAG,CAAC,SAAJ,CAAc,SAAjD,CAAlB;EAEA,MAAM,kBAAkB,GAAG,KAAK,CAAC,QAAjC;EACA,MAAM,KAAK,GAAG,UAAU,CAAC,GAAX,CAAe,SAAS,IAAG;IACvC,OACE,KAAA,CAAA,aAAA,CAAC,iBAAA,CAAA,uBAAD,EAAwB;MAAC,KAAK,EAAE,SAAS,CAAC,QAAlB;MAA4B,GAAG,EAAE,SAAS,CAAC;IAA3C,CAAxB,EACG,kBAAkB,CAAC,SAAD,CADrB,CADF;EAKD,CANa,CAAd;EAQA,MAAM,OAAO,GAAG,iBAAA,CAAA,gBAAA,CAAkB,CAAD,IAA6C;;;IAC5E,IAAI,UAAU,IAAI,CAAC,QAAnB,EAA6B;MAC3B,SAAS,CAAC,CAAD,EAAI,KAAJ,CAAT;IACD;;IAED,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,CANe,CAAhB;EAQA,MAAM,SAAS,GAAG,iBAAA,CAAA,gBAAA,CAAkB,CAAD,IAAgD;;;IACjF,IAAI,UAAU,IAAI,CAAC,QAAf,IAA2B,CAAC,CAAC,GAAF,KAAU,GAAzC,EAA8C;MAC5C,SAAS,CAAC,CAAD,EAAI,KAAJ,CAAT;IACD;;IAED,CAAA,EAAA,GAAA,KAAK,CAAC,SAAN,MAAe,IAAf,IAAe,EAAA,KAAA,KAAA,CAAf,GAAe,KAAA,CAAf,GAAe,EAAA,CAAA,IAAA,CAAf,KAAe,EAAG,CAAH,CAAf;EACD,CANiB,CAAlB;EAQA,MAAM,SAAS,GAAG,aAAA,CAAA,oBAAA,CAChB;IACE,UADF;IAEE,iBAAiB,UAAU,GAAG,QAAH,GAAc,SAF3C;IAGE,GAAG,KAHL;IAIE,OAJF;IAKE,SALF;IAME,QAAQ,EAAE,KANZ;IAOE,EAAE,EAAE;EAPN,CADgB,EAUhB,GAVgB,CAAlB;EAaA,OAAO,EACL,GAAG,SADE;IAEL,UAAU,EAAE,EACV,GAAG,SAAS,CAAC,UADH;MAEV,aAAa,EAAE,uBAAA,CAAA;IAFL,CAFP;IAML,aAAa,EAAE,iBAAA,CAAA,gBAAA,CAAiB,KAAK,CAAC,aAAvB,EAAsC;MAAE,QAAQ,EAAE;IAAZ,CAAtC;EANV,CAAP;AAQD,CA7DM;;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';\nimport { ColumnIdContextProvider } from '../../contexts/columnIdContext';\nimport { DataGridSelectionCell } from '../DataGridSelectionCell/DataGridSelectionCell';\nimport { useRowIdContext } from '../../contexts/rowIdContext';\nimport { useEventCallback } from '@fluentui/react-utilities';\nimport { useIsInTableHeader } from '../../contexts/tableHeaderContext';\nimport { resolveShorthand } from '@fluentui/react-utilities';\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 rowId = useRowIdContext();\n  const isHeader = useIsInTableHeader();\n  const columnDefs = useDataGridContext_unstable(ctx => ctx.columns);\n  const selectable = useDataGridContext_unstable(ctx => ctx.selectableRows);\n  const selected = useDataGridContext_unstable(ctx => ctx.selection.isRowSelected(rowId));\n  const appearance = useDataGridContext_unstable(ctx => {\n    if (!isHeader && selectable && ctx.selection.isRowSelected(rowId)) {\n      return ctx.selectionAppearance;\n    }\n\n    return 'none';\n  });\n  const toggleRow = useDataGridContext_unstable(ctx => ctx.selection.toggleRow);\n\n  const cellRenderFunction = props.children;\n  const cells = columnDefs.map(columnDef => {\n    return (\n      <ColumnIdContextProvider value={columnDef.columnId} key={columnDef.columnId}>\n        {cellRenderFunction(columnDef)}\n      </ColumnIdContextProvider>\n    );\n  });\n\n  const onClick = useEventCallback((e: React.MouseEvent<HTMLTableRowElement>) => {\n    if (selectable && !isHeader) {\n      toggleRow(e, rowId);\n    }\n\n    props.onClick?.(e);\n  });\n\n  const onKeyDown = useEventCallback((e: React.KeyboardEvent<HTMLTableRowElement>) => {\n    if (selectable && !isHeader && e.key === ' ') {\n      toggleRow(e, rowId);\n    }\n\n    props.onKeyDown?.(e);\n  });\n\n  const baseState = useTableRow_unstable(\n    {\n      appearance,\n      'aria-selected': selectable ? selected : undefined,\n      ...props,\n      onClick,\n      onKeyDown,\n      children: cells,\n      as: 'div',\n    },\n    ref,\n  );\n\n  return {\n    ...baseState,\n    components: {\n      ...baseState.components,\n      selectionCell: DataGridSelectionCell,\n    },\n    selectionCell: resolveShorthand(props.selectionCell, { required: selectable }),\n  };\n};\n"],"sourceRoot":"../src/"}

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

@@ -10,7 +10,8 @@ const react_1 = /*#__PURE__*/require("@griffel/react");
 const useTableRowStyles_1 = /*#__PURE__*/require("../TableRow/useTableRowStyles");
 
 exports.dataGridRowClassNames = {
-  root: 'fui-DataGridRow'
+  root: 'fui-DataGridRow',
+  selectionCell: 'fui-DataGridRow__selectionCell'
 };
 /**
  * Apply styling to the DataGridRow slots based on the state
@@ -19,6 +20,11 @@ exports.dataGridRowClassNames = {
 const useDataGridRowStyles_unstable = state => {
   useTableRowStyles_1.useTableRowStyles_unstable(state);
   state.root.className = react_1.mergeClasses(exports.dataGridRowClassNames.root, state.root.className);
+
+  if (state.selectionCell) {
+    state.selectionCell.className = react_1.mergeClasses(exports.dataGridRowClassNames.selectionCell, state.selectionCell.className);
+  }
+
   return state;
 };
 

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

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-table/src/components/DataGridRow/useDataGridRowStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AAGA,MAAA,mBAAA,gBAAA,OAAA,CAAA,+BAAA,CAAA;;AAEa,OAAA,CAAA,qBAAA,GAA0D;EACrE,IAAI,EAAE;AAD+D,CAA1D;AAIb;;AAEG;;AACI,MAAM,6BAA6B,GAAI,KAAD,IAA8C;EACzF,mBAAA,CAAA,0BAAA,CAA2B,KAA3B;EACA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,OAAA,CAAA,YAAA,CAAa,OAAA,CAAA,qBAAA,CAAsB,IAAnC,EAAyC,KAAK,CAAC,IAAN,CAAW,SAApD,CAAvB;EAEA,OAAO,KAAP;AACD,CALM;;AAAM,OAAA,CAAA,6BAAA,GAA6B,6BAA7B","sourcesContent":["import { mergeClasses } from '@griffel/react';\nimport type { DataGridRowSlots, DataGridRowState } from './DataGridRow.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { useTableRowStyles_unstable } from '../TableRow/useTableRowStyles';\n\nexport const dataGridRowClassNames: SlotClassNames<DataGridRowSlots> = {\n  root: 'fui-DataGridRow',\n};\n\n/**\n * Apply styling to the DataGridRow slots based on the state\n */\nexport const useDataGridRowStyles_unstable = (state: DataGridRowState): DataGridRowState => {\n  useTableRowStyles_unstable(state);\n  state.root.className = mergeClasses(dataGridRowClassNames.root, state.root.className);\n\n  return state;\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["packages/react-components/react-table/src/components/DataGridRow/useDataGridRowStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AAGA,MAAA,mBAAA,gBAAA,OAAA,CAAA,+BAAA,CAAA;;AAEa,OAAA,CAAA,qBAAA,GAA0D;EACrE,IAAI,EAAE,iBAD+D;EAErE,aAAa,EAAE;AAFsD,CAA1D;AAKb;;AAEG;;AACI,MAAM,6BAA6B,GAAI,KAAD,IAA8C;EACzF,mBAAA,CAAA,0BAAA,CAA2B,KAA3B;EACA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,OAAA,CAAA,YAAA,CAAa,OAAA,CAAA,qBAAA,CAAsB,IAAnC,EAAyC,KAAK,CAAC,IAAN,CAAW,SAApD,CAAvB;;EACA,IAAI,KAAK,CAAC,aAAV,EAAyB;IACvB,KAAK,CAAC,aAAN,CAAoB,SAApB,GAAgC,OAAA,CAAA,YAAA,CAAa,OAAA,CAAA,qBAAA,CAAsB,aAAnC,EAAkD,KAAK,CAAC,aAAN,CAAoB,SAAtE,CAAhC;EACD;;EAED,OAAO,KAAP;AACD,CARM;;AAAM,OAAA,CAAA,6BAAA,GAA6B,6BAA7B","sourcesContent":["import { mergeClasses } from '@griffel/react';\nimport type { DataGridRowSlots, DataGridRowState } from './DataGridRow.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { useTableRowStyles_unstable } from '../TableRow/useTableRowStyles';\n\nexport const dataGridRowClassNames: SlotClassNames<DataGridRowSlots> = {\n  root: 'fui-DataGridRow',\n  selectionCell: 'fui-DataGridRow__selectionCell',\n};\n\n/**\n * Apply styling to the DataGridRow slots based on the state\n */\nexport const useDataGridRowStyles_unstable = (state: DataGridRowState): DataGridRowState => {\n  useTableRowStyles_unstable(state);\n  state.root.className = mergeClasses(dataGridRowClassNames.root, state.root.className);\n  if (state.selectionCell) {\n    state.selectionCell.className = mergeClasses(dataGridRowClassNames.selectionCell, state.selectionCell.className);\n  }\n\n  return state;\n};\n"],"sourceRoot":"../src/"}

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

@@ -5,6 +5,14 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useDataGridSelectionCell_unstable = void 0;
 
+const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
+
+const dataGridContext_1 = /*#__PURE__*/require("../../contexts/dataGridContext");
+
+const rowIdContext_1 = /*#__PURE__*/require("../../contexts/rowIdContext");
+
+const tableHeaderContext_1 = /*#__PURE__*/require("../../contexts/tableHeaderContext");
+
 const useTableSelectionCell_1 = /*#__PURE__*/require("../TableSelectionCell/useTableSelectionCell");
 /**
  * Create the state required to render DataGridSelectionCell.
@@ -18,10 +26,41 @@ const useTableSelectionCell_1 = /*#__PURE__*/require("../TableSelectionCell/useT
 
 
 const useDataGridSelectionCell_unstable = (props, ref) => {
+  const isHeader = tableHeaderContext_1.useIsInTableHeader();
+  const rowId = rowIdContext_1.useRowIdContext();
+  const multiselect = dataGridContext_1.useDataGridContext_unstable(ctx => ctx.selection.selectionMode === 'multiselect');
+  const subtle = dataGridContext_1.useDataGridContext_unstable(ctx => ctx.subtleSelection);
+  const checked = dataGridContext_1.useDataGridContext_unstable(ctx => {
+    if (isHeader && multiselect) {
+      return ctx.selection.allRowsSelected ? true : ctx.selection.someRowsSelected ? 'mixed' : false;
+    }
+
+    return ctx.selection.isRowSelected(rowId);
+  });
+  const toggleAllRows = dataGridContext_1.useDataGridContext_unstable(ctx => ctx.selection.toggleAllRows);
+  const type = dataGridContext_1.useDataGridContext_unstable(ctx => ctx.selection.selectionMode === 'multiselect' ? 'checkbox' : 'radio');
+  const onClick = react_utilities_1.useEventCallback(e => {
+    var _a;
+
+    if (isHeader) {
+      toggleAllRows(e);
+    }
+
+    (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props, e);
+  });
   return useTableSelectionCell_1.useTableSelectionCell_unstable({
     as: 'div',
     role: 'gridcell',
-    ...props
+    checked,
+    type,
+    tabIndex: 0,
+    hidden: isHeader && !multiselect,
+    subtle,
+    checkboxIndicator: {
+      tabIndex: -1
+    },
+    ...props,
+    onClick
   }, 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;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/"}
+{"version":3,"sources":["packages/react-components/react-table/src/components/DataGridSelectionCell/useDataGridSelectionCell.ts"],"names":[],"mappings":";;;;;;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,gCAAA,CAAA;;AACA,MAAA,cAAA,gBAAA,OAAA,CAAA,6BAAA,CAAA;;AACA,MAAA,oBAAA,gBAAA,OAAA,CAAA,mCAAA,CAAA;;AACA,MAAA,uBAAA,gBAAA,OAAA,CAAA,6CAAA,CAAA;AAGA;;;;;;;;AAQG;;;AACI,MAAM,iCAAiC,GAAG,CAC/C,KAD+C,EAE/C,GAF+C,KAGjB;EAC9B,MAAM,QAAQ,GAAG,oBAAA,CAAA,kBAAA,EAAjB;EACA,MAAM,KAAK,GAAG,cAAA,CAAA,eAAA,EAAd;EACA,MAAM,WAAW,GAAG,iBAAA,CAAA,2BAAA,CAA4B,GAAG,IAAI,GAAG,CAAC,SAAJ,CAAc,aAAd,KAAgC,aAAnE,CAApB;EACA,MAAM,MAAM,GAAG,iBAAA,CAAA,2BAAA,CAA4B,GAAG,IAAI,GAAG,CAAC,eAAvC,CAAf;EACA,MAAM,OAAO,GAAG,iBAAA,CAAA,2BAAA,CAA4B,GAAG,IAAG;IAChD,IAAI,QAAQ,IAAI,WAAhB,EAA6B;MAC3B,OAAO,GAAG,CAAC,SAAJ,CAAc,eAAd,GAAgC,IAAhC,GAAuC,GAAG,CAAC,SAAJ,CAAc,gBAAd,GAAiC,OAAjC,GAA2C,KAAzF;IACD;;IAED,OAAO,GAAG,CAAC,SAAJ,CAAc,aAAd,CAA4B,KAA5B,CAAP;EACD,CANe,CAAhB;EAQA,MAAM,aAAa,GAAG,iBAAA,CAAA,2BAAA,CAA4B,GAAG,IAAI,GAAG,CAAC,SAAJ,CAAc,aAAjD,CAAtB;EACA,MAAM,IAAI,GAAG,iBAAA,CAAA,2BAAA,CAA4B,GAAG,IAC1C,GAAG,CAAC,SAAJ,CAAc,aAAd,KAAgC,aAAhC,GAAgD,UAAhD,GAA6D,OADlD,CAAb;EAIA,MAAM,OAAO,GAAG,iBAAA,CAAA,gBAAA,CAAkB,CAAD,IAA8C;;;IAC7E,IAAI,QAAJ,EAAc;MACZ,aAAa,CAAC,CAAD,CAAb;IACD;;IAED,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,CANe,CAAhB;EAQA,OAAO,uBAAA,CAAA,8BAAA,CACL;IACE,EAAE,EAAE,KADN;IAEE,IAAI,EAAE,UAFR;IAGE,OAHF;IAIE,IAJF;IAKE,QAAQ,EAAE,CALZ;IAME,MAAM,EAAE,QAAQ,IAAI,CAAC,WANvB;IAOE,MAPF;IAQE,iBAAiB,EAAE;MAAE,QAAQ,EAAE,CAAC;IAAb,CARrB;IASE,GAAG,KATL;IAUE;EAVF,CADK,EAaL,GAbK,CAAP;AAeD,CA5CM;;AAAM,OAAA,CAAA,iCAAA,GAAiC,iCAAjC","sourcesContent":["import * as React from 'react';\nimport { useEventCallback } from '@fluentui/react-utilities';\nimport { useDataGridContext_unstable } from '../../contexts/dataGridContext';\nimport { useRowIdContext } from '../../contexts/rowIdContext';\nimport { useIsInTableHeader } from '../../contexts/tableHeaderContext';\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  const isHeader = useIsInTableHeader();\n  const rowId = useRowIdContext();\n  const multiselect = useDataGridContext_unstable(ctx => ctx.selection.selectionMode === 'multiselect');\n  const subtle = useDataGridContext_unstable(ctx => ctx.subtleSelection);\n  const checked = useDataGridContext_unstable(ctx => {\n    if (isHeader && multiselect) {\n      return ctx.selection.allRowsSelected ? true : ctx.selection.someRowsSelected ? 'mixed' : false;\n    }\n\n    return ctx.selection.isRowSelected(rowId);\n  });\n\n  const toggleAllRows = useDataGridContext_unstable(ctx => ctx.selection.toggleAllRows);\n  const type = useDataGridContext_unstable(ctx =>\n    ctx.selection.selectionMode === 'multiselect' ? 'checkbox' : 'radio',\n  );\n\n  const onClick = useEventCallback((e: React.MouseEvent<HTMLTableCellElement>) => {\n    if (isHeader) {\n      toggleAllRows(e);\n    }\n\n    props.onClick?.(e);\n  });\n\n  return useTableSelectionCell_unstable(\n    {\n      as: 'div',\n      role: 'gridcell',\n      checked,\n      type,\n      tabIndex: 0,\n      hidden: isHeader && !multiselect,\n      subtle,\n      checkboxIndicator: { tabIndex: -1 },\n      ...props,\n      onClick,\n    },\n    ref,\n  );\n};\n"],"sourceRoot":"../src/"}

package/lib-commonjs/components/TableCell/useTableCell.js

@@ -23,7 +23,8 @@ const useTableCell_unstable = (props, ref) => {
   var _a;
 
   const {
-    noNativeElements
+    noNativeElements,
+    size
   } = tableContext_1.useTableContext();
   const rootComponent = ((_a = props.as) !== null && _a !== void 0 ? _a : noNativeElements) ? 'div' : 'td';
   return {
@@ -35,7 +36,8 @@ const useTableCell_unstable = (props, ref) => {
       role: rootComponent === 'div' ? 'cell' : undefined,
       ...props
     }),
-    noNativeElements
+    noNativeElements,
+    size
   };
 };
 

package/lib-commonjs/components/TableCell/useTableCell.js.map

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-table/src/components/TableCell/useTableCell.ts"],"names":[],"mappings":";;;;;;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AAEA,MAAA,cAAA,gBAAA,OAAA,CAAA,6BAAA,CAAA;AAEA;;;;;;;;AAQG;;;AACI,MAAM,qBAAqB,GAAG,CAAC,KAAD,EAAwB,GAAxB,KAAuE;;;EAC1G,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,IAA7D;EAEA,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,MAA1B,GAAmC,SAFA;MAGzC,GAAG;IAHsC,CAArC,CAJD;IASL;EATK,CAAP;AAWD,CAhBM;;AAAM,OAAA,CAAA,qBAAA,GAAqB,qBAArB","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps } from '@fluentui/react-utilities';\nimport type { TableCellProps, TableCellState } from './TableCell.types';\nimport { useTableContext } from '../../contexts/tableContext';\n\n/**\n * Create the state required to render TableCell.\n *\n * The returned state can be modified with hooks such as useTableCellStyles_unstable,\n * before being passed to renderTableCell_unstable.\n *\n * @param props - props from this instance of TableCell\n * @param ref - reference to root HTMLElement of TableCell\n */\nexport const useTableCell_unstable = (props: TableCellProps, ref: React.Ref<HTMLElement>): TableCellState => {\n  const { noNativeElements } = useTableContext();\n\n  const rootComponent = props.as ?? noNativeElements ? 'div' : 'td';\n\n  return {\n    components: {\n      root: rootComponent,\n    },\n    root: getNativeElementProps(rootComponent, {\n      ref,\n      role: rootComponent === 'div' ? 'cell' : undefined,\n      ...props,\n    }),\n    noNativeElements,\n  };\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["packages/react-components/react-table/src/components/TableCell/useTableCell.ts"],"names":[],"mappings":";;;;;;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AAEA,MAAA,cAAA,gBAAA,OAAA,CAAA,6BAAA,CAAA;AAEA;;;;;;;;AAQG;;;AACI,MAAM,qBAAqB,GAAG,CAAC,KAAD,EAAwB,GAAxB,KAAuE;;;EAC1G,MAAM;IAAE,gBAAF;IAAoB;EAApB,IAA6B,cAAA,CAAA,eAAA,EAAnC;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,IAA7D;EAEA,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,MAA1B,GAAmC,SAFA;MAGzC,GAAG;IAHsC,CAArC,CAJD;IASL,gBATK;IAUL;EAVK,CAAP;AAYD,CAjBM;;AAAM,OAAA,CAAA,qBAAA,GAAqB,qBAArB","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps } from '@fluentui/react-utilities';\nimport type { TableCellProps, TableCellState } from './TableCell.types';\nimport { useTableContext } from '../../contexts/tableContext';\n\n/**\n * Create the state required to render TableCell.\n *\n * The returned state can be modified with hooks such as useTableCellStyles_unstable,\n * before being passed to renderTableCell_unstable.\n *\n * @param props - props from this instance of TableCell\n * @param ref - reference to root HTMLElement of TableCell\n */\nexport const useTableCell_unstable = (props: TableCellProps, ref: React.Ref<HTMLElement>): TableCellState => {\n  const { noNativeElements, size } = useTableContext();\n\n  const rootComponent = props.as ?? noNativeElements ? 'div' : 'td';\n\n  return {\n    components: {\n      root: rootComponent,\n    },\n    root: getNativeElementProps(rootComponent, {\n      ref,\n      role: rootComponent === 'div' ? 'cell' : undefined,\n      ...props,\n    }),\n    noNativeElements,\n    size,\n  };\n};\n"],"sourceRoot":"../src/"}

package/lib-commonjs/components/TableCell/useTableCellStyles.js

@@ -9,6 +9,8 @@ const react_1 = /*#__PURE__*/require("@griffel/react");
 
 const react_theme_1 = /*#__PURE__*/require("@fluentui/react-theme");
 
+const react_tabster_1 = /*#__PURE__*/require("@fluentui/react-tabster");
+
 exports.tableCellClassName = 'fui-TableCell';
 exports.tableCellClassNames = {
   root: exports.tableCellClassName
@@ -18,9 +20,18 @@ const useTableLayoutStyles = /*#__PURE__*/react_1.__styles({
   "root": {
     "mc9l5x": "f15pt5es",
     "ha4doy": "fmrv4ls"
+  },
+  "medium": {
+    "Bqenvij": "f1ft4266"
+  },
+  "small": {
+    "Bqenvij": "fbsu25e"
+  },
+  "extra-small": {
+    "Bqenvij": "frvgh55"
   }
 }, {
-  "d": [".f15pt5es{display:table-cell;}", ".fmrv4ls{vertical-align:middle;}"]
+  "d": [".f15pt5es{display:table-cell;}", ".fmrv4ls{vertical-align:middle;}", ".f1ft4266{height:44px;}", ".fbsu25e{height:34px;}", ".frvgh55{height:24px;}"]
 });
 
 const useFlexLayoutStyles = /*#__PURE__*/react_1.__styles({
@@ -31,9 +42,18 @@ const useFlexLayoutStyles = /*#__PURE__*/react_1.__styles({
     "Bh6795r": "fqerorx",
     "Bnnss6s": "f1neuvcm",
     "xawz": "fkjuxzh"
+  },
+  "medium": {
+    "sshi5w": "f5pgtk9"
+  },
+  "small": {
+    "sshi5w": "fcep9tg"
+  },
+  "extra-small": {
+    "sshi5w": "f1pha7fy"
   }
 }, {
-  "d": [".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".f10tiqix{min-width:0px;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".fqerorx{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}", ".f1neuvcm{-webkit-flex-shrink:1;-ms-flex-negative:1;flex-shrink:1;}", ".fkjuxzh{-webkit-flex-basis:0px;-ms-flex-preferred-size:0px;flex-basis:0px;}"]
+  "d": [".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".f10tiqix{min-width:0px;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".fqerorx{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}", ".f1neuvcm{-webkit-flex-shrink:1;-ms-flex-negative:1;flex-shrink:1;}", ".fkjuxzh{-webkit-flex-basis:0px;-ms-flex-preferred-size:0px;flex-basis:0px;}", ".f5pgtk9{min-height:44px;}", ".fcep9tg{min-height:34px;}", ".f1pha7fy{min-height:24px;}"]
 });
 /**
  * Styles for the root slot
@@ -46,10 +66,17 @@ const useStyles = /*#__PURE__*/react_1.__styles({
     "z8tnut": "f1nbblvp",
     "z189sj": ["f1vdfbxk", "f1f5gg8d"],
     "Byoj8tv": "f1ov4xf1",
-    "uwmqm3": ["f1f5gg8d", "f1vdfbxk"]
+    "uwmqm3": ["f1f5gg8d", "f1vdfbxk"],
+    "Bn4voq9": "fz36nt7",
+    "g9k6zt": "f9znhxp",
+    "Bfpq7zp": "fqrak0z",
+    "kdpuga": ["f1o2ludy", "f1kjnpwc"],
+    "Bw81rd7": ["f1kjnpwc", "f1o2ludy"],
+    "B6xbmo0": ["fxmnebo", "f1witrsb"],
+    "dm238s": ["f1witrsb", "fxmnebo"]
   }
 }, {
-  "d": [".f10pi13n{position:relative;}", ".f1nbblvp{padding-top:0px;}", ".f1vdfbxk{padding-right:var(--spacingHorizontalS);}", ".f1f5gg8d{padding-left:var(--spacingHorizontalS);}", ".f1ov4xf1{padding-bottom:0px;}"]
+  "d": [".f10pi13n{position:relative;}", ".f1nbblvp{padding-top:0px;}", ".f1vdfbxk{padding-right:var(--spacingHorizontalS);}", ".f1f5gg8d{padding-left:var(--spacingHorizontalS);}", ".f1ov4xf1{padding-bottom:0px;}", ".fz36nt7[data-fui-focus-visible]{outline-width:2px;}", ".f9znhxp[data-fui-focus-visible]{outline-style:solid;}", ".fqrak0z[data-fui-focus-visible]{outline-color:var(--colorStrokeFocus2);}", ".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);}"]
 });
 /**
  * Apply styling to the TableCell slots based on the state
@@ -62,7 +89,7 @@ const useTableCellStyles_unstable = state => {
     table: useTableLayoutStyles(),
     flex: useFlexLayoutStyles()
   };
-  state.root.className = react_1.mergeClasses(exports.tableCellClassNames.root, styles.root, state.noNativeElements ? layoutStyles.flex.root : layoutStyles.table.root, state.root.className);
+  state.root.className = react_1.mergeClasses(exports.tableCellClassNames.root, styles.root, state.noNativeElements ? layoutStyles.flex.root : layoutStyles.table.root, state.noNativeElements ? layoutStyles.flex[state.size] : layoutStyles.table[state.size], state.root.className);
   return state;
 };