@fluentui/react-table 9.0.0-alpha.9 → 9.0.0-rc.2

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

@@ -4,8 +4,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useDataGrid_unstable = void 0;
-
+const react_tabster_1 = /*#__PURE__*/require("@fluentui/react-tabster");
 const useTable_1 = /*#__PURE__*/require("../Table/useTable");
+const hooks_1 = /*#__PURE__*/require("../../hooks");
 /**
  * Create the state required to render DataGrid.
  *
@@ -15,13 +16,55 @@ const useTable_1 = /*#__PURE__*/require("../Table/useTable");
  * @param props - props from this instance of DataGrid
  * @param ref - reference to root HTMLElement of DataGrid
  */
-
-
 const useDataGrid_unstable = (props, ref) => {
-  return useTable_1.useTable_unstable({ ...props,
-    as: 'div'
+  const {
+    items,
+    columns,
+    focusMode = 'cell',
+    selectionMode,
+    onSortChange,
+    onSelectionChange,
+    defaultSortState,
+    sortState,
+    selectedItems,
+    defaultSelectedItems,
+    subtleSelection = false,
+    selectionAppearance = 'brand',
+    getRowId
+  } = props;
+  const navigable = focusMode !== 'none';
+  const keyboardNavAttr = react_tabster_1.useArrowNavigationGroup({
+    axis: 'grid'
+  });
+  const tableState = hooks_1.useTableFeatures({
+    items,
+    columns,
+    getRowId
+  }, [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,
+    selectableRows: !!selectionMode,
+    subtleSelection,
+    selectionAppearance
+  };
 };
-
 exports.useDataGrid_unstable = useDataGrid_unstable;
 //# sourceMappingURL=useDataGrid.js.map

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,"mappings":";;;;;;AACA;AAEA;AACA;AAEA;;;;;;;;;AASO,MAAMA,oBAAoB,GAAG,CAACC,KAAoB,EAAEC,GAA2B,KAAmB;EACvG,MAAM;IACJC,KAAK;IACLC,OAAO;IACPC,SAAS,GAAG,MAAM;IAClBC,aAAa;IACbC,YAAY;IACZC,iBAAiB;IACjBC,gBAAgB;IAChBC,SAAS;IACTC,aAAa;IACbC,oBAAoB;IACpBC,eAAe,GAAG,KAAK;IACvBC,mBAAmB,GAAG,OAAO;IAC7BC;EAAQ,CACT,GAAGd,KAAK;EAET,MAAMe,SAAS,GAAGX,SAAS,KAAK,MAAM;EACtC,MAAMY,eAAe,GAAGC,uCAAuB,CAAC;IAAEC,IAAI,EAAE;EAAM,CAAE,CAAC;EAEjE,MAAMC,UAAU,GAAGC,wBAAgB,CAAC;IAAElB,KAAK;IAAEC,OAAO;IAAEW;EAAQ,CAAE,EAAE,CAChEM,oBAAY,CAAC;IACXZ,gBAAgB;IAChBC,SAAS;IACTH;GACD,CAAC,EACFc,yBAAiB,CAAC;IAChBT,oBAAoB;IACpBD,aAAa;IACbH,iBAAiB;IACjBF,aAAa,EAAEA,aAAa,aAAbA,aAAa,cAAbA,aAAa,GAAI;GACjC,CAAC,CACH,CAAC;EAEF,MAAMgB,cAAc,GAAGC,4BAAiB,CACtC;IAAEC,IAAI,EAAE,MAAM;IAAEC,EAAE,EAAE,KAAK;IAAEC,gBAAgB,EAAE,IAAI;IAAE,IAAIV,SAAS,IAAIC,eAAe,CAAC;IAAE,GAAGhB;EAAK,CAAE,EAChGC,GAAG,CACJ;EAED,OAAO;IACL,GAAGoB,cAAc;IACjBjB,SAAS;IACTe,UAAU;IACVO,cAAc,EAAE,CAAC,CAACrB,aAAa;IAC/BO,eAAe;IACfC;GACD;AACH,CAAC;AA/CYc,4BAAoB","names":["useDataGrid_unstable","props","ref","items","columns","focusMode","selectionMode","onSortChange","onSelectionChange","defaultSortState","sortState","selectedItems","defaultSelectedItems","subtleSelection","selectionAppearance","getRowId","navigable","keyboardNavAttr","react_tabster_1","axis","tableState","hooks_1","baseTableState","useTable_1","role","as","noNativeElements","selectableRows","exports"],"sourceRoot":"../src/","sources":["packages/react-components/react-table/src/components/DataGrid/useDataGrid.ts"],"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 = 'cell',\n    selectionMode,\n    onSortChange,\n    onSelectionChange,\n    defaultSortState,\n    sortState,\n    selectedItems,\n    defaultSelectedItems,\n    subtleSelection = false,\n    selectionAppearance = 'brand',\n    getRowId,\n  } = props;\n\n  const navigable = focusMode !== 'none';\n  const keyboardNavAttr = useArrowNavigationGroup({ axis: 'grid' });\n\n  const tableState = useTableFeatures({ items, columns, getRowId }, [\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"]}

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

@@ -4,12 +4,19 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 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,
+      selectableRows: state.selectableRows,
+      subtleSelection: state.subtleSelection,
+      selectionAppearance: state.selectionAppearance
+    }
+  };
 }
-
 exports.useDataGridContextValues_unstable = useDataGridContextValues_unstable;
 //# sourceMappingURL=useDataGridContextValues.js.map

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,"mappings":";;;;;;AAAA;AAGA,SAAgBA,iCAAiC,CAACC,KAAoB;EACpE,MAAMC,kBAAkB,GAAGC,sDAA8B,CAACF,KAAK,CAAC;EAChE,OAAO;IACL,GAAGC,kBAAkB;IACrBE,QAAQ,EAAE;MACR,GAAGH,KAAK,CAACI,UAAU;MACnBC,SAAS,EAAEL,KAAK,CAACK,SAAS;MAC1BC,cAAc,EAAEN,KAAK,CAACM,cAAc;MACpCC,eAAe,EAAEP,KAAK,CAACO,eAAe;MACtCC,mBAAmB,EAAER,KAAK,CAACQ;;GAE9B;AACH;AAZAC","names":["useDataGridContextValues_unstable","state","tableContextValues","useTableContextValues_1","dataGrid","tableState","focusMode","selectableRows","subtleSelection","selectionAppearance","exports"],"sourceRoot":"../src/","sources":["packages/react-components/react-table/src/components/DataGrid/useDataGridContextValues.ts"],"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"]}

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

@@ -4,23 +4,18 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useDataGridStyles_unstable = exports.dataGridClassNames = void 0;
-
 const react_1 = /*#__PURE__*/require("@griffel/react");
-
 const useTableStyles_1 = /*#__PURE__*/require("../Table/useTableStyles");
-
 exports.dataGridClassNames = {
   root: 'fui-DataGrid'
 };
 /**
  * Apply styling to the DataGrid slots based on the state
  */
-
 const useDataGridStyles_unstable = state => {
   useTableStyles_1.useTableStyles_unstable(state);
   state.root.className = react_1.mergeClasses(exports.dataGridClassNames.root, state.root.className);
   return state;
 };
-
 exports.useDataGridStyles_unstable = useDataGridStyles_unstable;
 //# sourceMappingURL=useDataGridStyles.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-table/src/components/DataGrid/useDataGridStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AAGA,MAAA,gBAAA,gBAAA,OAAA,CAAA,yBAAA,CAAA;;AAEa,OAAA,CAAA,kBAAA,GAAoD;EAC/D,IAAI,EAAE;AADyD,CAApD;AAIb;;AAEG;;AACI,MAAM,0BAA0B,GAAI,KAAD,IAAwC;EAChF,gBAAA,CAAA,uBAAA,CAAwB,KAAxB;EACA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,OAAA,CAAA,YAAA,CAAa,OAAA,CAAA,kBAAA,CAAmB,IAAhC,EAAsC,KAAK,CAAC,IAAN,CAAW,SAAjD,CAAvB;EAEA,OAAO,KAAP;AACD,CALM;;AAAM,OAAA,CAAA,0BAAA,GAA0B,0BAA1B","sourcesContent":["import { mergeClasses } from '@griffel/react';\nimport type { DataGridSlots, DataGridState } from './DataGrid.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { useTableStyles_unstable } from '../Table/useTableStyles';\n\nexport const dataGridClassNames: SlotClassNames<DataGridSlots> = {\n  root: 'fui-DataGrid',\n};\n\n/**\n * Apply styling to the DataGrid slots based on the state\n */\nexport const useDataGridStyles_unstable = (state: DataGridState): DataGridState => {\n  useTableStyles_unstable(state);\n  state.root.className = mergeClasses(dataGridClassNames.root, state.root.className);\n\n  return state;\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"mappings":";;;;;;AAAA;AAGA;AAEaA,0BAAkB,GAAkC;EAC/DC,IAAI,EAAE;CACP;AAED;;;AAGO,MAAMC,0BAA0B,GAAIC,KAAoB,IAAmB;EAChFC,wCAAuB,CAACD,KAAK,CAAC;EAC9BA,KAAK,CAACF,IAAI,CAACI,SAAS,GAAGC,oBAAY,CAACN,0BAAkB,CAACC,IAAI,EAAEE,KAAK,CAACF,IAAI,CAACI,SAAS,CAAC;EAElF,OAAOF,KAAK;AACd,CAAC;AALYH,kCAA0B","names":["exports","root","useDataGridStyles_unstable","state","useTableStyles_1","className","react_1"],"sourceRoot":"../src/","sources":["packages/react-components/react-table/src/components/DataGrid/useDataGridStyles.ts"],"sourcesContent":["import { mergeClasses } from '@griffel/react';\nimport type { DataGridSlots, DataGridState } from './DataGrid.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { useTableStyles_unstable } from '../Table/useTableStyles';\n\nexport const dataGridClassNames: SlotClassNames<DataGridSlots> = {\n  root: 'fui-DataGrid',\n};\n\n/**\n * Apply styling to the DataGrid slots based on the state\n */\nexport const useDataGridStyles_unstable = (state: DataGridState): DataGridState => {\n  useTableStyles_unstable(state);\n  state.root.className = mergeClasses(dataGridClassNames.root, state.root.className);\n\n  return state;\n};\n"]}

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

@@ -4,19 +4,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.DataGridBody = void 0;
-
 const React = /*#__PURE__*/require("react");
-
 const useDataGridBody_1 = /*#__PURE__*/require("./useDataGridBody");
-
 const renderDataGridBody_1 = /*#__PURE__*/require("./renderDataGridBody");
-
 const useDataGridBodyStyles_1 = /*#__PURE__*/require("./useDataGridBodyStyles");
 /**
- * DataGridBody component - TODO: add more docs
+ * DataGridBody component
  */
-
-
 exports.DataGridBody = /*#__PURE__*/React.forwardRef((props, ref) => {
   const state = useDataGridBody_1.useDataGridBody_unstable(props, ref);
   useDataGridBodyStyles_1.useDataGridBodyStyles_unstable(state);

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

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-table/src/components/DataGridBody/DataGridBody.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,mBAAA,CAAA;;AACA,MAAA,oBAAA,gBAAA,OAAA,CAAA,sBAAA,CAAA;;AACA,MAAA,uBAAA,gBAAA,OAAA,CAAA,yBAAA,CAAA;AAIA;;AAEG;;;AACU,OAAA,CAAA,YAAA,gBAAuD,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EAClG,MAAM,KAAK,GAAG,iBAAA,CAAA,wBAAA,CAAyB,KAAzB,EAAgC,GAAhC,CAAd;EAEA,uBAAA,CAAA,8BAAA,CAA+B,KAA/B;EACA,OAAO,oBAAA,CAAA,2BAAA,CAA4B,KAA5B,CAAP;AACD,CALmE,CAAvD;AAOb,OAAA,CAAA,YAAA,CAAa,WAAb,GAA2B,cAA3B","sourcesContent":["import * as React from 'react';\nimport { useDataGridBody_unstable } from './useDataGridBody';\nimport { renderDataGridBody_unstable } from './renderDataGridBody';\nimport { useDataGridBodyStyles_unstable } from './useDataGridBodyStyles';\nimport type { DataGridBodyProps } from './DataGridBody.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * DataGridBody component - TODO: add more docs\n */\nexport const DataGridBody: ForwardRefComponent<DataGridBodyProps> = React.forwardRef((props, ref) => {\n  const state = useDataGridBody_unstable(props, ref);\n\n  useDataGridBodyStyles_unstable(state);\n  return renderDataGridBody_unstable(state);\n});\n\nDataGridBody.displayName = 'DataGridBody';\n"],"sourceRoot":"../src/"}
+{"version":3,"mappings":";;;;;;AAAA;AACA;AACA;AACA;AAIA;;;AAGaA,oBAAY,gBACqCC,KAAK,CAACC,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EAC5F,MAAMC,KAAK,GAAGC,0CAAwB,CAACH,KAAK,EAAEC,GAAG,CAAC;EAElDG,sDAA8B,CAACF,KAAK,CAAC;EACrC,OAAOG,gDAA2B,CAACH,KAAK,CAAC;AAC3C,CAAC,CAAuG;AAExGL,oBAAY,CAACS,WAAW,GAAG,cAAc","names":["exports","React","forwardRef","props","ref","state","useDataGridBody_1","useDataGridBodyStyles_1","renderDataGridBody_1","displayName"],"sourceRoot":"../src/","sources":["packages/react-components/react-table/src/components/DataGridBody/DataGridBody.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useDataGridBody_unstable } from './useDataGridBody';\nimport { renderDataGridBody_unstable } from './renderDataGridBody';\nimport { useDataGridBodyStyles_unstable } from './useDataGridBodyStyles';\nimport type { DataGridBodyProps } from './DataGridBody.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * DataGridBody component\n */\nexport const DataGridBody: ForwardRefComponent<DataGridBodyProps> &\n  (<TItem>(props: DataGridBodyProps<TItem>) => JSX.Element) = React.forwardRef((props, ref) => {\n  const state = useDataGridBody_unstable(props, ref);\n\n  useDataGridBodyStyles_unstable(state);\n  return renderDataGridBody_unstable(state);\n}) as ForwardRefComponent<DataGridBodyProps> & (<TItem>(props: DataGridBodyProps<TItem>) => JSX.Element);\n\nDataGridBody.displayName = 'DataGridBody';\n"]}

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

@@ -1 +1 @@
-{"version":3,"sources":[],"names":[],"mappings":"","sourceRoot":"../src/"}
+{"version":3,"mappings":"","names":[],"sourceRoot":"../src/","sources":[],"sourcesContent":[]}

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

@@ -3,16 +3,10 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-
 const tslib_1 = /*#__PURE__*/require("tslib");
-
 tslib_1.__exportStar(require("./DataGridBody"), exports);
-
 tslib_1.__exportStar(require("./DataGridBody.types"), exports);
-
 tslib_1.__exportStar(require("./renderDataGridBody"), exports);
-
 tslib_1.__exportStar(require("./useDataGridBody"), exports);
-
 tslib_1.__exportStar(require("./useDataGridBodyStyles"), exports);
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-table/src/components/DataGridBody/index.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,gBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,sBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,sBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,mBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,yBAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './DataGridBody';\nexport * from './DataGridBody.types';\nexport * from './renderDataGridBody';\nexport * from './useDataGridBody';\nexport * from './useDataGridBodyStyles';\n"],"sourceRoot":"../src/"}
+{"version":3,"mappings":";;;;;;AAAAA;AACAA;AACAA;AACAA;AACAA","names":["tslib_1"],"sourceRoot":"../src/","sources":["packages/react-components/react-table/src/components/DataGridBody/index.ts"],"sourcesContent":["export * from './DataGridBody';\nexport * from './DataGridBody.types';\nexport * from './renderDataGridBody';\nexport * from './useDataGridBody';\nexport * from './useDataGridBodyStyles';\n"]}

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

@@ -4,16 +4,23 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.renderDataGridBody_unstable = void 0;
-
-const renderTableBody_1 = /*#__PURE__*/require("../TableBody/renderTableBody");
+const React = /*#__PURE__*/require("react");
+const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
+const rowIdContext_1 = /*#__PURE__*/require("../../contexts/rowIdContext");
 /**
  * Render the final JSX of DataGridBody
  */
-
-
 const renderDataGridBody_unstable = state => {
-  return renderTableBody_1.renderTableBody_unstable(state);
+  const {
+    slots,
+    slotProps
+  } = react_utilities_1.getSlots(state);
+  return React.createElement(slots.root, {
+    ...slotProps.root
+  }, state.rows.map(row => React.createElement(rowIdContext_1.TableRowIdContextProvider, {
+    key: row.rowId,
+    value: row.rowId
+  }, state.renderRow(row))));
 };
-
 exports.renderDataGridBody_unstable = renderDataGridBody_unstable;
 //# sourceMappingURL=renderDataGridBody.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-table/src/components/DataGridBody/renderDataGridBody.tsx"],"names":[],"mappings":";;;;;;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,8BAAA,CAAA;AAEA;;AAEG;;;AACI,MAAM,2BAA2B,GAAI,KAAD,IAA6B;EACtE,OAAO,iBAAA,CAAA,wBAAA,CAAyB,KAAzB,CAAP;AACD,CAFM;;AAAM,OAAA,CAAA,2BAAA,GAA2B,2BAA3B","sourcesContent":["import type { DataGridBodyState } from './DataGridBody.types';\nimport { renderTableBody_unstable } from '../TableBody/renderTableBody';\n\n/**\n * Render the final JSX of DataGridBody\n */\nexport const renderDataGridBody_unstable = (state: DataGridBodyState) => {\n  return renderTableBody_unstable(state);\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"mappings":";;;;;;AAAA;AACA;AAEA;AAEA;;;AAGO,MAAMA,2BAA2B,GAAIC,KAAwB,IAAI;EACtE,MAAM;IAAEC,KAAK;IAAEC;EAAS,CAAE,GAAGC,0BAAQ,CAAoBH,KAAK,CAAC;EAE/D,OACEI,oBAACH,KAAK,CAACI,IAAI;IAAA,GAAKH,SAAS,CAACG;EAAI,GAC3BL,KAAK,CAACM,IAAI,CAACC,GAAG,CAACC,GAAG,IACjBJ,oBAACK,wCAAyB;IAACC,GAAG,EAAEF,GAAG,CAACG,KAAK;IAAEC,KAAK,EAAEJ,GAAG,CAACG;EAAK,GACxDX,KAAK,CAACa,SAAS,CAACL,GAAG,CAAC,CAExB,CAAC,CACS;AAEjB,CAAC;AAZYM,mCAA2B","names":["renderDataGridBody_unstable","state","slots","slotProps","react_utilities_1","React","root","rows","map","row","rowIdContext_1","key","rowId","value","renderRow","exports"],"sourceRoot":"../src/","sources":["packages/react-components/react-table/src/components/DataGridBody/renderDataGridBody.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { DataGridBodyState, DataGridBodySlots } from './DataGridBody.types';\nimport { TableRowIdContextProvider } from '../../contexts/rowIdContext';\n\n/**\n * Render the final JSX of DataGridBody\n */\nexport const renderDataGridBody_unstable = (state: DataGridBodyState) => {\n  const { slots, slotProps } = getSlots<DataGridBodySlots>(state);\n\n  return (\n    <slots.root {...slotProps.root}>\n      {state.rows.map(row => (\n        <TableRowIdContextProvider key={row.rowId} value={row.rowId}>\n          {state.renderRow(row)}\n        </TableRowIdContextProvider>\n      ))}\n    </slots.root>\n  );\n};\n"]}

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

@@ -4,8 +4,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useDataGridBody_unstable = void 0;
-
 const useTableBody_1 = /*#__PURE__*/require("../TableBody/useTableBody");
+const dataGridContext_1 = /*#__PURE__*/require("../../contexts/dataGridContext");
+const tableContext_1 = /*#__PURE__*/require("../../contexts/tableContext");
 /**
  * Create the state required to render DataGridBody.
  *
@@ -15,13 +16,23 @@ const useTableBody_1 = /*#__PURE__*/require("../TableBody/useTableBody");
  * @param props - props from this instance of DataGridBody
  * @param ref - reference to root HTMLElement of DataGridBody
  */
-
-
 const useDataGridBody_unstable = (props, ref) => {
-  return useTableBody_1.useTableBody_unstable({ ...props,
+  const {
+    sortable
+  } = tableContext_1.useTableContext();
+  const getRows = dataGridContext_1.useDataGridContext_unstable(ctx => ctx.getRows);
+  const sort = dataGridContext_1.useDataGridContext_unstable(ctx => ctx.sort.sort);
+  const rows = sortable ? sort(getRows()) : getRows();
+  const baseState = useTableBody_1.useTableBody_unstable({
+    ...props,
+    children: null,
     as: 'div'
   }, ref);
+  return {
+    ...baseState,
+    rows,
+    renderRow: props.children
+  };
 };
-
 exports.useDataGridBody_unstable = useDataGridBody_unstable;
 //# sourceMappingURL=useDataGridBody.js.map

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,"mappings":";;;;;;AAEA;AACA;AACA;AAEA;;;;;;;;;AASO,MAAMA,wBAAwB,GAAG,CAACC,KAAwB,EAAEC,GAA2B,KAAuB;EACnH,MAAM;IAAEC;EAAQ,CAAE,GAAGC,8BAAe,EAAE;EACtC,MAAMC,OAAO,GAAGC,6CAA2B,CAACC,GAAG,IAAIA,GAAG,CAACF,OAAO,CAAC;EAC/D,MAAMG,IAAI,GAAGF,6CAA2B,CAACC,GAAG,IAAIA,GAAG,CAACC,IAAI,CAACA,IAAI,CAAC;EAC9D,MAAMC,IAAI,GAAGN,QAAQ,GAAGK,IAAI,CAACH,OAAO,EAAE,CAAC,GAAGA,OAAO,EAAE;EAEnD,MAAMK,SAAS,GAAGC,oCAAqB,CAAC;IAAE,GAAGV,KAAK;IAAEW,QAAQ,EAAE,IAAI;IAAEC,EAAE,EAAE;EAAK,CAAE,EAAEX,GAAG,CAAC;EACrF,OAAO;IACL,GAAGQ,SAAS;IACZD,IAAI;IACJK,SAAS,EAAEb,KAAK,CAACW;GAClB;AACH,CAAC;AAZYG,gCAAwB","names":["useDataGridBody_unstable","props","ref","sortable","tableContext_1","getRows","dataGridContext_1","ctx","sort","rows","baseState","useTableBody_1","children","as","renderRow","exports"],"sourceRoot":"../src/","sources":["packages/react-components/react-table/src/components/DataGridBody/useDataGridBody.tsx"],"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';\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 baseState = useTableBody_unstable({ ...props, children: null, as: 'div' }, ref);\n  return {\n    ...baseState,\n    rows,\n    renderRow: props.children,\n  };\n};\n"]}

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

@@ -4,23 +4,18 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useDataGridBodyStyles_unstable = exports.dataGridBodyClassNames = void 0;
-
 const react_1 = /*#__PURE__*/require("@griffel/react");
-
 const useTableBodyStyles_1 = /*#__PURE__*/require("../TableBody/useTableBodyStyles");
-
 exports.dataGridBodyClassNames = {
   root: 'fui-DataGridBody'
 };
 /**
  * Apply styling to the DataGridBody slots based on the state
  */
-
 const useDataGridBodyStyles_unstable = state => {
   useTableBodyStyles_1.useTableBodyStyles_unstable(state);
   state.root.className = react_1.mergeClasses(exports.dataGridBodyClassNames.root, state.root.className);
   return state;
 };
-
 exports.useDataGridBodyStyles_unstable = useDataGridBodyStyles_unstable;
 //# sourceMappingURL=useDataGridBodyStyles.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-table/src/components/DataGridBody/useDataGridBodyStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AAGA,MAAA,oBAAA,gBAAA,OAAA,CAAA,iCAAA,CAAA;;AAEa,OAAA,CAAA,sBAAA,GAA4D;EACvE,IAAI,EAAE;AADiE,CAA5D;AAIb;;AAEG;;AACI,MAAM,8BAA8B,GAAI,KAAD,IAAgD;EAC5F,oBAAA,CAAA,2BAAA,CAA4B,KAA5B;EACA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,OAAA,CAAA,YAAA,CAAa,OAAA,CAAA,sBAAA,CAAuB,IAApC,EAA0C,KAAK,CAAC,IAAN,CAAW,SAArD,CAAvB;EAEA,OAAO,KAAP;AACD,CALM;;AAAM,OAAA,CAAA,8BAAA,GAA8B,8BAA9B","sourcesContent":["import { mergeClasses } from '@griffel/react';\nimport type { DataGridBodySlots, DataGridBodyState } from './DataGridBody.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { useTableBodyStyles_unstable } from '../TableBody/useTableBodyStyles';\n\nexport const dataGridBodyClassNames: SlotClassNames<DataGridBodySlots> = {\n  root: 'fui-DataGridBody',\n};\n\n/**\n * Apply styling to the DataGridBody slots based on the state\n */\nexport const useDataGridBodyStyles_unstable = (state: DataGridBodyState): DataGridBodyState => {\n  useTableBodyStyles_unstable(state);\n  state.root.className = mergeClasses(dataGridBodyClassNames.root, state.root.className);\n\n  return state;\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"mappings":";;;;;;AAAA;AAGA;AAEaA,8BAAsB,GAAsC;EACvEC,IAAI,EAAE;CACP;AAED;;;AAGO,MAAMC,8BAA8B,GAAIC,KAAwB,IAAuB;EAC5FC,gDAA2B,CAACD,KAAK,CAAC;EAClCA,KAAK,CAACF,IAAI,CAACI,SAAS,GAAGC,oBAAY,CAACN,8BAAsB,CAACC,IAAI,EAAEE,KAAK,CAACF,IAAI,CAACI,SAAS,CAAC;EAEtF,OAAOF,KAAK;AACd,CAAC;AALYH,sCAA8B","names":["exports","root","useDataGridBodyStyles_unstable","state","useTableBodyStyles_1","className","react_1"],"sourceRoot":"../src/","sources":["packages/react-components/react-table/src/components/DataGridBody/useDataGridBodyStyles.ts"],"sourcesContent":["import { mergeClasses } from '@griffel/react';\nimport type { DataGridBodySlots, DataGridBodyState } from './DataGridBody.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { useTableBodyStyles_unstable } from '../TableBody/useTableBodyStyles';\n\nexport const dataGridBodyClassNames: SlotClassNames<DataGridBodySlots> = {\n  root: 'fui-DataGridBody',\n};\n\n/**\n * Apply styling to the DataGridBody slots based on the state\n */\nexport const useDataGridBodyStyles_unstable = (state: DataGridBodyState): DataGridBodyState => {\n  useTableBodyStyles_unstable(state);\n  state.root.className = mergeClasses(dataGridBodyClassNames.root, state.root.className);\n\n  return state;\n};\n"]}

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

@@ -4,19 +4,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.DataGridCell = void 0;
-
 const React = /*#__PURE__*/require("react");
-
 const useDataGridCell_1 = /*#__PURE__*/require("./useDataGridCell");
-
 const renderDataGridCell_1 = /*#__PURE__*/require("./renderDataGridCell");
-
 const useDataGridCellStyles_1 = /*#__PURE__*/require("./useDataGridCellStyles");
 /**
- * DataGridCell component - TODO: add more docs
+ * DataGridCell component
  */
-
-
 exports.DataGridCell = /*#__PURE__*/React.forwardRef((props, ref) => {
   const state = useDataGridCell_1.useDataGridCell_unstable(props, ref);
   useDataGridCellStyles_1.useDataGridCellStyles_unstable(state);

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

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-table/src/components/DataGridCell/DataGridCell.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,mBAAA,CAAA;;AACA,MAAA,oBAAA,gBAAA,OAAA,CAAA,sBAAA,CAAA;;AACA,MAAA,uBAAA,gBAAA,OAAA,CAAA,yBAAA,CAAA;AAIA;;AAEG;;;AACU,OAAA,CAAA,YAAA,gBAAuD,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EAClG,MAAM,KAAK,GAAG,iBAAA,CAAA,wBAAA,CAAyB,KAAzB,EAAgC,GAAhC,CAAd;EAEA,uBAAA,CAAA,8BAAA,CAA+B,KAA/B;EACA,OAAO,oBAAA,CAAA,2BAAA,CAA4B,KAA5B,CAAP;AACD,CALmE,CAAvD;AAOb,OAAA,CAAA,YAAA,CAAa,WAAb,GAA2B,cAA3B","sourcesContent":["import * as React from 'react';\nimport { useDataGridCell_unstable } from './useDataGridCell';\nimport { renderDataGridCell_unstable } from './renderDataGridCell';\nimport { useDataGridCellStyles_unstable } from './useDataGridCellStyles';\nimport type { DataGridCellProps } from './DataGridCell.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * DataGridCell component - TODO: add more docs\n */\nexport const DataGridCell: ForwardRefComponent<DataGridCellProps> = React.forwardRef((props, ref) => {\n  const state = useDataGridCell_unstable(props, ref);\n\n  useDataGridCellStyles_unstable(state);\n  return renderDataGridCell_unstable(state);\n});\n\nDataGridCell.displayName = 'DataGridCell';\n"],"sourceRoot":"../src/"}
+{"version":3,"mappings":";;;;;;AAAA;AACA;AACA;AACA;AAIA;;;AAGaA,oBAAY,gBAA2CC,KAAK,CAACC,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EAClG,MAAMC,KAAK,GAAGC,0CAAwB,CAACH,KAAK,EAAEC,GAAG,CAAC;EAElDG,sDAA8B,CAACF,KAAK,CAAC;EACrC,OAAOG,gDAA2B,CAACH,KAAK,CAAC;AAC3C,CAAC,CAAC;AAEFL,oBAAY,CAACS,WAAW,GAAG,cAAc","names":["exports","React","forwardRef","props","ref","state","useDataGridCell_1","useDataGridCellStyles_1","renderDataGridCell_1","displayName"],"sourceRoot":"../src/","sources":["packages/react-components/react-table/src/components/DataGridCell/DataGridCell.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useDataGridCell_unstable } from './useDataGridCell';\nimport { renderDataGridCell_unstable } from './renderDataGridCell';\nimport { useDataGridCellStyles_unstable } from './useDataGridCellStyles';\nimport type { DataGridCellProps } from './DataGridCell.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * DataGridCell component\n */\nexport const DataGridCell: ForwardRefComponent<DataGridCellProps> = React.forwardRef((props, ref) => {\n  const state = useDataGridCell_unstable(props, ref);\n\n  useDataGridCellStyles_unstable(state);\n  return renderDataGridCell_unstable(state);\n});\n\nDataGridCell.displayName = 'DataGridCell';\n"]}

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

@@ -1 +1 @@
-{"version":3,"sources":[],"names":[],"mappings":"","sourceRoot":"../src/"}
+{"version":3,"mappings":"","names":[],"sourceRoot":"../src/","sources":[],"sourcesContent":[]}

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

@@ -3,16 +3,10 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-
 const tslib_1 = /*#__PURE__*/require("tslib");
-
 tslib_1.__exportStar(require("./DataGridCell"), exports);
-
 tslib_1.__exportStar(require("./DataGridCell.types"), exports);
-
 tslib_1.__exportStar(require("./renderDataGridCell"), exports);
-
 tslib_1.__exportStar(require("./useDataGridCell"), exports);
-
 tslib_1.__exportStar(require("./useDataGridCellStyles"), exports);
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-table/src/components/DataGridCell/index.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,gBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,sBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,sBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,mBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,yBAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './DataGridCell';\nexport * from './DataGridCell.types';\nexport * from './renderDataGridCell';\nexport * from './useDataGridCell';\nexport * from './useDataGridCellStyles';\n"],"sourceRoot":"../src/"}
+{"version":3,"mappings":";;;;;;AAAAA;AACAA;AACAA;AACAA;AACAA","names":["tslib_1"],"sourceRoot":"../src/","sources":["packages/react-components/react-table/src/components/DataGridCell/index.ts"],"sourcesContent":["export * from './DataGridCell';\nexport * from './DataGridCell.types';\nexport * from './renderDataGridCell';\nexport * from './useDataGridCell';\nexport * from './useDataGridCellStyles';\n"]}

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

@@ -4,16 +4,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.renderDataGridCell_unstable = void 0;
-
 const renderTableCell_1 = /*#__PURE__*/require("../TableCell/renderTableCell");
 /**
  * Render the final JSX of DataGridCell
  */
-
-
 const renderDataGridCell_unstable = state => {
   return renderTableCell_1.renderTableCell_unstable(state);
 };
-
 exports.renderDataGridCell_unstable = renderDataGridCell_unstable;
 //# sourceMappingURL=renderDataGridCell.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-table/src/components/DataGridCell/renderDataGridCell.tsx"],"names":[],"mappings":";;;;;;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,8BAAA,CAAA;AAEA;;AAEG;;;AACI,MAAM,2BAA2B,GAAI,KAAD,IAA6B;EACtE,OAAO,iBAAA,CAAA,wBAAA,CAAyB,KAAzB,CAAP;AACD,CAFM;;AAAM,OAAA,CAAA,2BAAA,GAA2B,2BAA3B","sourcesContent":["import type { DataGridCellState } from './DataGridCell.types';\nimport { renderTableCell_unstable } from '../TableCell/renderTableCell';\n\n/**\n * Render the final JSX of DataGridCell\n */\nexport const renderDataGridCell_unstable = (state: DataGridCellState) => {\n  return renderTableCell_unstable(state);\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"mappings":";;;;;;AACA;AAEA;;;AAGO,MAAMA,2BAA2B,GAAIC,KAAwB,IAAI;EACtE,OAAOC,0CAAwB,CAACD,KAAK,CAAC;AACxC,CAAC;AAFYE,mCAA2B","names":["renderDataGridCell_unstable","state","renderTableCell_1","exports"],"sourceRoot":"../src/","sources":["packages/react-components/react-table/src/components/DataGridCell/renderDataGridCell.tsx"],"sourcesContent":["import type { DataGridCellState } from './DataGridCell.types';\nimport { renderTableCell_unstable } from '../TableCell/renderTableCell';\n\n/**\n * Render the final JSX of DataGridCell\n */\nexport const renderDataGridCell_unstable = (state: DataGridCellState) => {\n  return renderTableCell_unstable(state);\n};\n"]}

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

@@ -4,8 +4,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 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.
  *
@@ -15,13 +15,14 @@ const useTableCell_1 = /*#__PURE__*/require("../TableCell/useTableCell");
  * @param props - props from this instance of DataGridCell
  * @param ref - reference to root HTMLElement of DataGridCell
  */
-
-
 const useDataGridCell_unstable = (props, ref) => {
-  return useTableCell_1.useTableCell_unstable({ ...props,
-    as: 'div'
+  const tabbable = dataGridContext_1.useDataGridContext_unstable(ctx => ctx.focusMode === 'cell');
+  return useTableCell_1.useTableCell_unstable({
+    as: 'div',
+    role: 'gridcell',
+    tabIndex: tabbable ? 0 : undefined,
+    ...props
   }, ref);
 };
-
 exports.useDataGridCell_unstable = useDataGridCell_unstable;
 //# sourceMappingURL=useDataGridCell.js.map

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,"mappings":";;;;;;AAEA;AACA;AAEA;;;;;;;;;AASO,MAAMA,wBAAwB,GAAG,CAACC,KAAwB,EAAEC,GAA2B,KAAuB;EACnH,MAAMC,QAAQ,GAAGC,6CAA2B,CAACC,GAAG,IAAIA,GAAG,CAACC,SAAS,KAAK,MAAM,CAAC;EAC7E,OAAOC,oCAAqB,CAAC;IAAEC,EAAE,EAAE,KAAK;IAAEC,IAAI,EAAE,UAAU;IAAEC,QAAQ,EAAEP,QAAQ,GAAG,CAAC,GAAGQ,SAAS;IAAE,GAAGV;EAAK,CAAE,EAAEC,GAAG,CAAC;AAClH,CAAC;AAHYU,gCAAwB","names":["useDataGridCell_unstable","props","ref","tabbable","dataGridContext_1","ctx","focusMode","useTableCell_1","as","role","tabIndex","undefined","exports"],"sourceRoot":"../src/","sources":["packages/react-components/react-table/src/components/DataGridCell/useDataGridCell.ts"],"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 === 'cell');\n  return useTableCell_unstable({ as: 'div', role: 'gridcell', tabIndex: tabbable ? 0 : undefined, ...props }, ref);\n};\n"]}

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

@@ -4,23 +4,18 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useDataGridCellStyles_unstable = exports.dataGridCellClassNames = void 0;
-
 const react_1 = /*#__PURE__*/require("@griffel/react");
-
 const useTableCellStyles_1 = /*#__PURE__*/require("../TableCell/useTableCellStyles");
-
 exports.dataGridCellClassNames = {
   root: 'fui-DataGridCell'
 };
 /**
  * Apply styling to the DataGridCell slots based on the state
  */
-
 const useDataGridCellStyles_unstable = state => {
   useTableCellStyles_1.useTableCellStyles_unstable(state);
   state.root.className = react_1.mergeClasses(exports.dataGridCellClassNames.root, state.root.className);
   return state;
 };
-
 exports.useDataGridCellStyles_unstable = useDataGridCellStyles_unstable;
 //# sourceMappingURL=useDataGridCellStyles.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-table/src/components/DataGridCell/useDataGridCellStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AAGA,MAAA,oBAAA,gBAAA,OAAA,CAAA,iCAAA,CAAA;;AAEa,OAAA,CAAA,sBAAA,GAA4D;EACvE,IAAI,EAAE;AADiE,CAA5D;AAIb;;AAEG;;AACI,MAAM,8BAA8B,GAAI,KAAD,IAAgD;EAC5F,oBAAA,CAAA,2BAAA,CAA4B,KAA5B;EACA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,OAAA,CAAA,YAAA,CAAa,OAAA,CAAA,sBAAA,CAAuB,IAApC,EAA0C,KAAK,CAAC,IAAN,CAAW,SAArD,CAAvB;EAEA,OAAO,KAAP;AACD,CALM;;AAAM,OAAA,CAAA,8BAAA,GAA8B,8BAA9B","sourcesContent":["import { mergeClasses } from '@griffel/react';\nimport type { DataGridCellSlots, DataGridCellState } from './DataGridCell.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { useTableCellStyles_unstable } from '../TableCell/useTableCellStyles';\n\nexport const dataGridCellClassNames: SlotClassNames<DataGridCellSlots> = {\n  root: 'fui-DataGridCell',\n};\n\n/**\n * Apply styling to the DataGridCell slots based on the state\n */\nexport const useDataGridCellStyles_unstable = (state: DataGridCellState): DataGridCellState => {\n  useTableCellStyles_unstable(state);\n  state.root.className = mergeClasses(dataGridCellClassNames.root, state.root.className);\n\n  return state;\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"mappings":";;;;;;AAAA;AAGA;AAEaA,8BAAsB,GAAsC;EACvEC,IAAI,EAAE;CACP;AAED;;;AAGO,MAAMC,8BAA8B,GAAIC,KAAwB,IAAuB;EAC5FC,gDAA2B,CAACD,KAAK,CAAC;EAClCA,KAAK,CAACF,IAAI,CAACI,SAAS,GAAGC,oBAAY,CAACN,8BAAsB,CAACC,IAAI,EAAEE,KAAK,CAACF,IAAI,CAACI,SAAS,CAAC;EAEtF,OAAOF,KAAK;AACd,CAAC;AALYH,sCAA8B","names":["exports","root","useDataGridCellStyles_unstable","state","useTableCellStyles_1","className","react_1"],"sourceRoot":"../src/","sources":["packages/react-components/react-table/src/components/DataGridCell/useDataGridCellStyles.ts"],"sourcesContent":["import { mergeClasses } from '@griffel/react';\nimport type { DataGridCellSlots, DataGridCellState } from './DataGridCell.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { useTableCellStyles_unstable } from '../TableCell/useTableCellStyles';\n\nexport const dataGridCellClassNames: SlotClassNames<DataGridCellSlots> = {\n  root: 'fui-DataGridCell',\n};\n\n/**\n * Apply styling to the DataGridCell slots based on the state\n */\nexport const useDataGridCellStyles_unstable = (state: DataGridCellState): DataGridCellState => {\n  useTableCellStyles_unstable(state);\n  state.root.className = mergeClasses(dataGridCellClassNames.root, state.root.className);\n\n  return state;\n};\n"]}

package/lib-commonjs/components/DataGridHeader/DataGridHeader.js

@@ -4,19 +4,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.DataGridHeader = void 0;
-
 const React = /*#__PURE__*/require("react");
-
 const useDataGridHeader_1 = /*#__PURE__*/require("./useDataGridHeader");
-
 const renderDataGridHeader_1 = /*#__PURE__*/require("./renderDataGridHeader");
-
 const useDataGridHeaderStyles_1 = /*#__PURE__*/require("./useDataGridHeaderStyles");
 /**
- * DataGridHeader component - TODO: add more docs
+ * DataGridHeader component
  */
-
-
 exports.DataGridHeader = /*#__PURE__*/React.forwardRef((props, ref) => {
   const state = useDataGridHeader_1.useDataGridHeader_unstable(props, ref);
   useDataGridHeaderStyles_1.useDataGridHeaderStyles_unstable(state);

package/lib-commonjs/components/DataGridHeader/DataGridHeader.js.map

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-table/src/components/DataGridHeader/DataGridHeader.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,mBAAA,gBAAA,OAAA,CAAA,qBAAA,CAAA;;AACA,MAAA,sBAAA,gBAAA,OAAA,CAAA,wBAAA,CAAA;;AACA,MAAA,yBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAIA;;AAEG;;;AACU,OAAA,CAAA,cAAA,gBAA2D,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EACtG,MAAM,KAAK,GAAG,mBAAA,CAAA,0BAAA,CAA2B,KAA3B,EAAkC,GAAlC,CAAd;EAEA,yBAAA,CAAA,gCAAA,CAAiC,KAAjC;EACA,OAAO,sBAAA,CAAA,6BAAA,CAA8B,KAA9B,CAAP;AACD,CALuE,CAA3D;AAOb,OAAA,CAAA,cAAA,CAAe,WAAf,GAA6B,gBAA7B","sourcesContent":["import * as React from 'react';\nimport { useDataGridHeader_unstable } from './useDataGridHeader';\nimport { renderDataGridHeader_unstable } from './renderDataGridHeader';\nimport { useDataGridHeaderStyles_unstable } from './useDataGridHeaderStyles';\nimport type { DataGridHeaderProps } from './DataGridHeader.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * DataGridHeader component - TODO: add more docs\n */\nexport const DataGridHeader: ForwardRefComponent<DataGridHeaderProps> = React.forwardRef((props, ref) => {\n  const state = useDataGridHeader_unstable(props, ref);\n\n  useDataGridHeaderStyles_unstable(state);\n  return renderDataGridHeader_unstable(state);\n});\n\nDataGridHeader.displayName = 'DataGridHeader';\n"],"sourceRoot":"../src/"}
+{"version":3,"mappings":";;;;;;AAAA;AACA;AACA;AACA;AAIA;;;AAGaA,sBAAc,gBAA6CC,KAAK,CAACC,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EACtG,MAAMC,KAAK,GAAGC,8CAA0B,CAACH,KAAK,EAAEC,GAAG,CAAC;EAEpDG,0DAAgC,CAACF,KAAK,CAAC;EACvC,OAAOG,oDAA6B,CAACH,KAAK,CAAC;AAC7C,CAAC,CAAC;AAEFL,sBAAc,CAACS,WAAW,GAAG,gBAAgB","names":["exports","React","forwardRef","props","ref","state","useDataGridHeader_1","useDataGridHeaderStyles_1","renderDataGridHeader_1","displayName"],"sourceRoot":"../src/","sources":["packages/react-components/react-table/src/components/DataGridHeader/DataGridHeader.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useDataGridHeader_unstable } from './useDataGridHeader';\nimport { renderDataGridHeader_unstable } from './renderDataGridHeader';\nimport { useDataGridHeaderStyles_unstable } from './useDataGridHeaderStyles';\nimport type { DataGridHeaderProps } from './DataGridHeader.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * DataGridHeader component\n */\nexport const DataGridHeader: ForwardRefComponent<DataGridHeaderProps> = React.forwardRef((props, ref) => {\n  const state = useDataGridHeader_unstable(props, ref);\n\n  useDataGridHeaderStyles_unstable(state);\n  return renderDataGridHeader_unstable(state);\n});\n\nDataGridHeader.displayName = 'DataGridHeader';\n"]}

package/lib-commonjs/components/DataGridHeader/DataGridHeader.types.js.map

@@ -1 +1 @@
-{"version":3,"sources":[],"names":[],"mappings":"","sourceRoot":"../src/"}
+{"version":3,"mappings":"","names":[],"sourceRoot":"../src/","sources":[],"sourcesContent":[]}

package/lib-commonjs/components/DataGridHeader/index.js

@@ -3,16 +3,10 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-
 const tslib_1 = /*#__PURE__*/require("tslib");
-
 tslib_1.__exportStar(require("./DataGridHeader"), exports);
-
 tslib_1.__exportStar(require("./DataGridHeader.types"), exports);
-
 tslib_1.__exportStar(require("./renderDataGridHeader"), exports);
-
 tslib_1.__exportStar(require("./useDataGridHeader"), exports);
-
 tslib_1.__exportStar(require("./useDataGridHeaderStyles"), exports);
 //# sourceMappingURL=index.js.map

package/lib-commonjs/components/DataGridHeader/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-table/src/components/DataGridHeader/index.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,kBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,wBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,wBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,qBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,2BAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './DataGridHeader';\nexport * from './DataGridHeader.types';\nexport * from './renderDataGridHeader';\nexport * from './useDataGridHeader';\nexport * from './useDataGridHeaderStyles';\n"],"sourceRoot":"../src/"}
+{"version":3,"mappings":";;;;;;AAAAA;AACAA;AACAA;AACAA;AACAA","names":["tslib_1"],"sourceRoot":"../src/","sources":["packages/react-components/react-table/src/components/DataGridHeader/index.ts"],"sourcesContent":["export * from './DataGridHeader';\nexport * from './DataGridHeader.types';\nexport * from './renderDataGridHeader';\nexport * from './useDataGridHeader';\nexport * from './useDataGridHeaderStyles';\n"]}

package/lib-commonjs/components/DataGridHeader/renderDataGridHeader.js

@@ -4,16 +4,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.renderDataGridHeader_unstable = void 0;
-
 const renderTableHeader_1 = /*#__PURE__*/require("../TableHeader/renderTableHeader");
 /**
  * Render the final JSX of DataGridHeader
  */
-
-
 const renderDataGridHeader_unstable = state => {
   return renderTableHeader_1.renderTableHeader_unstable(state);
 };
-
 exports.renderDataGridHeader_unstable = renderDataGridHeader_unstable;
 //# sourceMappingURL=renderDataGridHeader.js.map

package/lib-commonjs/components/DataGridHeader/renderDataGridHeader.js.map

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-table/src/components/DataGridHeader/renderDataGridHeader.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,mBAAA,gBAAA,OAAA,CAAA,kCAAA,CAAA;AAGA;;AAEG;;;AACI,MAAM,6BAA6B,GAAI,KAAD,IAA+B;EAC1E,OAAO,mBAAA,CAAA,0BAAA,CAA2B,KAA3B,CAAP;AACD,CAFM;;AAAM,OAAA,CAAA,6BAAA,GAA6B,6BAA7B","sourcesContent":["import { renderTableHeader_unstable } from '../TableHeader/renderTableHeader';\nimport type { DataGridHeaderState } from './DataGridHeader.types';\n\n/**\n * Render the final JSX of DataGridHeader\n */\nexport const renderDataGridHeader_unstable = (state: DataGridHeaderState) => {\n  return renderTableHeader_unstable(state);\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"mappings":";;;;;;AAAA;AAGA;;;AAGO,MAAMA,6BAA6B,GAAIC,KAA0B,IAAI;EAC1E,OAAOC,8CAA0B,CAACD,KAAK,CAAC;AAC1C,CAAC;AAFYE,qCAA6B","names":["renderDataGridHeader_unstable","state","renderTableHeader_1","exports"],"sourceRoot":"../src/","sources":["packages/react-components/react-table/src/components/DataGridHeader/renderDataGridHeader.tsx"],"sourcesContent":["import { renderTableHeader_unstable } from '../TableHeader/renderTableHeader';\nimport type { DataGridHeaderState } from './DataGridHeader.types';\n\n/**\n * Render the final JSX of DataGridHeader\n */\nexport const renderDataGridHeader_unstable = (state: DataGridHeaderState) => {\n  return renderTableHeader_unstable(state);\n};\n"]}