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

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

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-table/src/components/DataGridHeaderCell/useDataGridHeaderCell.ts"],"names":[],"mappings":"AAEA,SAAS,2BAAT,QAA4C,uCAA5C;AAEA;;;;;;;;AAQG;;AACH,OAAO,MAAM,8BAA8B,GAAG,CAC5C,KAD4C,EAE5C,GAF4C,KAGjB;EAC3B,OAAO,2BAA2B,CAAC,EAAE,GAAG,KAAL;IAAY,EAAE,EAAE;EAAhB,CAAD,EAA0B,GAA1B,CAAlC;AACD,CALM","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,"mappings":"AACA,SAASA,gBAAgB,QAAQ,2BAA2B;AAE5D,SAASC,2BAA2B,QAAQ,uCAAuC;AACnF,SAASC,2BAA2B,QAAQ,gCAAgC;AAC5E,SAASC,kBAAkB,QAAQ,gCAAgC;AACnE,SAASC,eAAe,QAAQ,6BAA6B;AAE7D;;;;;;;;;AASA,OAAO,MAAMC,8BAA8B,GAAG,CAC5CC,KAA8B,EAC9BC,GAA2B,KACA;EAC3B,MAAMC,QAAQ,GAAGL,kBAAkB,EAAE;EACrC,MAAM;IAAEM;EAAQ,CAAE,GAAGL,eAAe,EAAE;EACtC,MAAMM,gBAAgB,GAAGR,2BAA2B,CAACS,GAAG,IAAIA,GAAG,CAACC,IAAI,CAACF,gBAAgB,CAAC;EACtF,MAAMG,aAAa,GAAGX,2BAA2B,CAACS,GAAG,IACnDF,QAAQ,GAAGE,GAAG,CAACC,IAAI,CAACE,gBAAgB,CAACN,QAAQ,CAAC,GAAGO,SAAS,CAC3D;EACD,MAAMC,OAAO,GAAGhB,gBAAgB,CAAEiB,CAA+C,IAAI;;IACnF,IAAIR,QAAQ,EAAE;MACZC,gBAAgB,CAACO,CAAC,EAAET,QAAQ,CAAC;;IAE/B,WAAK,CAACQ,OAAO,+CAAbV,KAAK,EAAWW,CAAC,CAAC;EACpB,CAAC,CAAC;EAEF,OAAOhB,2BAA2B,CAChC;IAAEY,aAAa;IAAEK,EAAE,EAAE,KAAK;IAAEC,QAAQ,EAAEV,QAAQ,GAAGM,SAAS,GAAG,CAAC;IAAE,GAAGT,KAAK;IAAEU;EAAO,CAAE,EACnFT,GAAG,CACJ;AACH,CAAC","names":["useEventCallback","useTableHeaderCell_unstable","useDataGridContext_unstable","useColumnIdContext","useTableContext","useDataGridHeaderCell_unstable","props","ref","columnId","sortable","toggleColumnSort","ctx","sort","sortDirection","getSortDirection","undefined","onClick","e","as","tabIndex"],"sourceRoot":"../src/","sources":["packages/react-components/react-table/src/components/DataGridHeaderCell/useDataGridHeaderCell.ts"],"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(\n    { sortDirection, as: 'div', tabIndex: sortable ? undefined : 0, ...props, onClick },\n    ref,\n  );\n};\n"]}

package/lib/components/DataGridHeaderCell/useDataGridHeaderCellStyles.js

@@ -8,19 +8,15 @@ export const dataGridHeaderCellClassNames = {
 /**
  * Apply styling to the DataGridHeaderCell slots based on the state
  */
-
 export const useDataGridHeaderCellStyles_unstable = state => {
   useTableHeaderCellStyles_unstable(state);
   state.root.className = mergeClasses(dataGridHeaderCellClassNames.root, state.root.className);
-
   if (state.button) {
     state.button.className = mergeClasses(dataGridHeaderCellClassNames.button, state.button.className);
   }
-
   if (state.sortIcon) {
     state.sortIcon.className = mergeClasses(dataGridHeaderCellClassNames.sortIcon, state.sortIcon.className);
   }
-
   return state;
 };
 //# sourceMappingURL=useDataGridHeaderCellStyles.js.map

package/lib/components/DataGridHeaderCell/useDataGridHeaderCellStyles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-table/src/components/DataGridHeaderCell/useDataGridHeaderCellStyles.ts"],"names":[],"mappings":"AAAA,SAAS,YAAT,QAA6B,gBAA7B;AAGA,SAAS,iCAAT,QAAkD,6CAAlD;AAEA,OAAO,MAAM,4BAA4B,GAA4C;EACnF,IAAI,EAAE,wBAD6E;EAEnF,MAAM,EAAE,gCAF2E;EAGnF,QAAQ,EAAE;AAHyE,CAA9E;AAMP;;AAEG;;AACH,OAAO,MAAM,oCAAoC,GAAI,KAAD,IAA4D;EAC9G,iCAAiC,CAAC,KAAD,CAAjC;EACA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CAAC,4BAA4B,CAAC,IAA9B,EAAoC,KAAK,CAAC,IAAN,CAAW,SAA/C,CAAnC;;EAEA,IAAI,KAAK,CAAC,MAAV,EAAkB;IAChB,KAAK,CAAC,MAAN,CAAa,SAAb,GAAyB,YAAY,CAAC,4BAA4B,CAAC,MAA9B,EAAsC,KAAK,CAAC,MAAN,CAAa,SAAnD,CAArC;EACD;;EAED,IAAI,KAAK,CAAC,QAAV,EAAoB;IAClB,KAAK,CAAC,QAAN,CAAe,SAAf,GAA2B,YAAY,CAAC,4BAA4B,CAAC,QAA9B,EAAwC,KAAK,CAAC,QAAN,CAAe,SAAvD,CAAvC;EACD;;EAED,OAAO,KAAP;AACD,CAbM","sourcesContent":["import { mergeClasses } from '@griffel/react';\nimport type { DataGridHeaderCellSlots, DataGridHeaderCellState } from './DataGridHeaderCell.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { useTableHeaderCellStyles_unstable } from '../TableHeaderCell/useTableHeaderCellStyles';\n\nexport const dataGridHeaderCellClassNames: SlotClassNames<DataGridHeaderCellSlots> = {\n  root: 'fui-DataGridHeaderCell',\n  button: 'fui-DataGridHeaderCell__button',\n  sortIcon: 'fui-DataGridHeaderCell__sortIcon',\n};\n\n/**\n * Apply styling to the DataGridHeaderCell slots based on the state\n */\nexport const useDataGridHeaderCellStyles_unstable = (state: DataGridHeaderCellState): DataGridHeaderCellState => {\n  useTableHeaderCellStyles_unstable(state);\n  state.root.className = mergeClasses(dataGridHeaderCellClassNames.root, state.root.className);\n\n  if (state.button) {\n    state.button.className = mergeClasses(dataGridHeaderCellClassNames.button, state.button.className);\n  }\n\n  if (state.sortIcon) {\n    state.sortIcon.className = mergeClasses(dataGridHeaderCellClassNames.sortIcon, state.sortIcon.className);\n  }\n\n  return state;\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"mappings":"AAAA,SAASA,YAAY,QAAQ,gBAAgB;AAG7C,SAASC,iCAAiC,QAAQ,6CAA6C;AAE/F,OAAO,MAAMC,4BAA4B,GAA4C;EACnFC,IAAI,EAAE,wBAAwB;EAC9BC,MAAM,EAAE,gCAAgC;EACxCC,QAAQ,EAAE;CACX;AAED;;;AAGA,OAAO,MAAMC,oCAAoC,GAAIC,KAA8B,IAA6B;EAC9GN,iCAAiC,CAACM,KAAK,CAAC;EACxCA,KAAK,CAACJ,IAAI,CAACK,SAAS,GAAGR,YAAY,CAACE,4BAA4B,CAACC,IAAI,EAAEI,KAAK,CAACJ,IAAI,CAACK,SAAS,CAAC;EAE5F,IAAID,KAAK,CAACH,MAAM,EAAE;IAChBG,KAAK,CAACH,MAAM,CAACI,SAAS,GAAGR,YAAY,CAACE,4BAA4B,CAACE,MAAM,EAAEG,KAAK,CAACH,MAAM,CAACI,SAAS,CAAC;;EAGpG,IAAID,KAAK,CAACF,QAAQ,EAAE;IAClBE,KAAK,CAACF,QAAQ,CAACG,SAAS,GAAGR,YAAY,CAACE,4BAA4B,CAACG,QAAQ,EAAEE,KAAK,CAACF,QAAQ,CAACG,SAAS,CAAC;;EAG1G,OAAOD,KAAK;AACd,CAAC","names":["mergeClasses","useTableHeaderCellStyles_unstable","dataGridHeaderCellClassNames","root","button","sortIcon","useDataGridHeaderCellStyles_unstable","state","className"],"sourceRoot":"../src/","sources":["packages/react-components/react-table/src/components/DataGridHeaderCell/useDataGridHeaderCellStyles.ts"],"sourcesContent":["import { mergeClasses } from '@griffel/react';\nimport type { DataGridHeaderCellSlots, DataGridHeaderCellState } from './DataGridHeaderCell.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { useTableHeaderCellStyles_unstable } from '../TableHeaderCell/useTableHeaderCellStyles';\n\nexport const dataGridHeaderCellClassNames: SlotClassNames<DataGridHeaderCellSlots> = {\n  root: 'fui-DataGridHeaderCell',\n  button: 'fui-DataGridHeaderCell__button',\n  sortIcon: 'fui-DataGridHeaderCell__sortIcon',\n};\n\n/**\n * Apply styling to the DataGridHeaderCell slots based on the state\n */\nexport const useDataGridHeaderCellStyles_unstable = (state: DataGridHeaderCellState): DataGridHeaderCellState => {\n  useTableHeaderCellStyles_unstable(state);\n  state.root.className = mergeClasses(dataGridHeaderCellClassNames.root, state.root.className);\n\n  if (state.button) {\n    state.button.className = mergeClasses(dataGridHeaderCellClassNames.button, state.button.className);\n  }\n\n  if (state.sortIcon) {\n    state.sortIcon.className = mergeClasses(dataGridHeaderCellClassNames.sortIcon, state.sortIcon.className);\n  }\n\n  return state;\n};\n"]}

package/lib/components/DataGridRow/DataGridRow.js

@@ -3,9 +3,8 @@ import { useDataGridRow_unstable } from './useDataGridRow';
 import { renderDataGridRow_unstable } from './renderDataGridRow';
 import { useDataGridRowStyles_unstable } from './useDataGridRowStyles';
 /**
- * DataGridRow component - TODO: add more docs
+ * DataGridRow component
  */
-
 export const DataGridRow = /*#__PURE__*/React.forwardRef((props, ref) => {
   const state = useDataGridRow_unstable(props, ref);
   useDataGridRowStyles_unstable(state);

package/lib/components/DataGridRow/DataGridRow.js.map

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-table/src/components/DataGridRow/DataGridRow.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,uBAAT,QAAwC,kBAAxC;AACA,SAAS,0BAAT,QAA2C,qBAA3C;AACA,SAAS,6BAAT,QAA8C,wBAA9C;AAIA;;AAEG;;AACH,OAAO,MAAM,WAAW,gBAA0C,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EAChG,MAAM,KAAK,GAAG,uBAAuB,CAAC,KAAD,EAAQ,GAAR,CAArC;EAEA,6BAA6B,CAAC,KAAD,CAA7B;EACA,OAAO,0BAA0B,CAAC,KAAD,CAAjC;AACD,CALiE,CAA3D;AAOP,WAAW,CAAC,WAAZ,GAA0B,aAA1B","sourcesContent":["import * as React from 'react';\nimport { useDataGridRow_unstable } from './useDataGridRow';\nimport { renderDataGridRow_unstable } from './renderDataGridRow';\nimport { useDataGridRowStyles_unstable } from './useDataGridRowStyles';\nimport type { DataGridRowProps } from './DataGridRow.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * DataGridRow component - TODO: add more docs\n */\nexport const DataGridRow: ForwardRefComponent<DataGridRowProps> = React.forwardRef((props, ref) => {\n  const state = useDataGridRow_unstable(props, ref);\n\n  useDataGridRowStyles_unstable(state);\n  return renderDataGridRow_unstable(state);\n});\n\nDataGridRow.displayName = 'DataGridRow';\n"],"sourceRoot":"../src/"}
+{"version":3,"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,uBAAuB,QAAQ,kBAAkB;AAC1D,SAASC,0BAA0B,QAAQ,qBAAqB;AAChE,SAASC,6BAA6B,QAAQ,wBAAwB;AAItE;;;AAGA,OAAO,MAAMC,WAAW,gBACqCJ,KAAK,CAACK,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EAC3F,MAAMC,KAAK,GAAGP,uBAAuB,CAACK,KAAK,EAAEC,GAAG,CAAC;EAEjDJ,6BAA6B,CAACK,KAAK,CAAC;EACpC,OAAON,0BAA0B,CAACM,KAAK,CAAC;AAC1C,CAAC,CAAqG;AAEtGJ,WAAW,CAACK,WAAW,GAAG,aAAa","names":["React","useDataGridRow_unstable","renderDataGridRow_unstable","useDataGridRowStyles_unstable","DataGridRow","forwardRef","props","ref","state","displayName"],"sourceRoot":"../src/","sources":["packages/react-components/react-table/src/components/DataGridRow/DataGridRow.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useDataGridRow_unstable } from './useDataGridRow';\nimport { renderDataGridRow_unstable } from './renderDataGridRow';\nimport { useDataGridRowStyles_unstable } from './useDataGridRowStyles';\nimport type { DataGridRowProps } from './DataGridRow.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * DataGridRow component\n */\nexport const DataGridRow: ForwardRefComponent<DataGridRowProps> &\n  (<TItem>(props: DataGridRowProps<TItem>) => JSX.Element) = React.forwardRef((props, ref) => {\n  const state = useDataGridRow_unstable(props, ref);\n\n  useDataGridRowStyles_unstable(state);\n  return renderDataGridRow_unstable(state);\n}) as ForwardRefComponent<DataGridRowProps> & (<TItem>(props: DataGridRowProps<TItem>) => JSX.Element);\n\nDataGridRow.displayName = 'DataGridRow';\n"]}

package/lib/components/DataGridRow/DataGridRow.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"DataGridRow.types.js","sourceRoot":"../src/","sources":["packages/react-components/react-table/src/components/DataGridRow/DataGridRow.types.ts"],"names":[],"mappings":"","sourcesContent":["import { TableRowProps, TableRowSlots, TableRowState } from '../TableRow/TableRow.types';\n\nexport type DataGridRowSlots = TableRowSlots;\n\n/**\n * DataGridRow Props\n */\nexport type DataGridRowProps = TableRowProps;\n\n/**\n * State used in rendering DataGridRow\n */\nexport type DataGridRowState = TableRowState;\n"]}
+{"version":3,"file":"DataGridRow.types.js","sourceRoot":"../src/","sources":["packages/react-components/react-table/src/components/DataGridRow/DataGridRow.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport type { Slot, ComponentProps, ComponentState } from '@fluentui/react-utilities';\nimport type { TableColumnDefinition } from '../../hooks';\nimport type { TableRowProps, TableRowSlots, TableRowState } from '../TableRow/TableRow.types';\nimport type { TableSelectionCell } from '../TableSelectionCell/TableSelectionCell';\n\nexport type DataGridRowSlots = TableRowSlots & {\n  /**\n   * When selection is enabled on the @see DataGrid, all rows\n   * will render the selection cell.\n   */\n  selectionCell?: Slot<typeof TableSelectionCell>;\n};\n\nexport type CellRenderFunction<TItem = unknown> = (column: TableColumnDefinition<TItem>) => React.ReactNode;\n\n/**\n * DataGridRow Props\n */\nexport type DataGridRowProps<TItem = unknown> = Omit<TableRowProps, 'children'> &\n  Omit<ComponentProps<DataGridRowSlots>, 'children'> & {\n    children: CellRenderFunction<TItem>;\n  };\n\n/**\n * State used in rendering DataGridRow\n */\nexport type DataGridRowState = TableRowState &\n  ComponentState<DataGridRowSlots> & {\n    renderCell: CellRenderFunction;\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    columnDefs: TableColumnDefinition<any>[];\n  };\n"]}

package/lib/components/DataGridRow/renderDataGridRow.js

@@ -1,9 +1,21 @@
-import { renderTableRow_unstable } from '../TableRow/renderTableRow';
+import * as React from 'react';
+import { getSlots } from '@fluentui/react-utilities';
+import { ColumnIdContextProvider } from '../../contexts/columnIdContext';
 /**
  * Render the final JSX of DataGridRow
  */
-
 export const renderDataGridRow_unstable = state => {
-  return renderTableRow_unstable(state);
+  const {
+    slots,
+    slotProps
+  } = getSlots(state);
+  return /*#__PURE__*/React.createElement(slots.root, {
+    ...slotProps.root
+  }, slots.selectionCell && /*#__PURE__*/React.createElement(slots.selectionCell, {
+    ...slotProps.selectionCell
+  }), state.columnDefs.map(columnDef => /*#__PURE__*/React.createElement(ColumnIdContextProvider, {
+    value: columnDef.columnId,
+    key: columnDef.columnId
+  }, state.renderCell(columnDef))));
 };
 //# sourceMappingURL=renderDataGridRow.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-table/src/components/DataGridRow/renderDataGridRow.tsx"],"names":[],"mappings":"AACA,SAAS,uBAAT,QAAwC,4BAAxC;AAEA;;AAEG;;AACH,OAAO,MAAM,0BAA0B,GAAI,KAAD,IAA4B;EACpE,OAAO,uBAAuB,CAAC,KAAD,CAA9B;AACD,CAFM","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,"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,QAAQ,QAAQ,2BAA2B;AAEpD,SAASC,uBAAuB,QAAQ,gCAAgC;AAExE;;;AAGA,OAAO,MAAMC,0BAA0B,GAAIC,KAAuB,IAAI;EACpE,MAAM;IAAEC,KAAK;IAAEC;EAAS,CAAE,GAAGL,QAAQ,CAAmBG,KAAK,CAAC;EAE9D,oBACEJ,oBAACK,KAAK,CAACE,IAAI;IAAA,GAAKD,SAAS,CAACC;EAAI,GAC3BF,KAAK,CAACG,aAAa,iBAAIR,oBAACK,KAAK,CAACG,aAAa;IAAA,GAAKF,SAAS,CAACE;EAAa,EAAI,EAC3EJ,KAAK,CAACK,UAAU,CAACC,GAAG,CAACC,SAAS,iBAC7BX,oBAACE,uBAAuB;IAACU,KAAK,EAAED,SAAS,CAACE,QAAQ;IAAEC,GAAG,EAAEH,SAAS,CAACE;EAAQ,GACxET,KAAK,CAACW,UAAU,CAACJ,SAAS,CAAC,CAE/B,CAAC,CACS;AAEjB,CAAC","names":["React","getSlots","ColumnIdContextProvider","renderDataGridRow_unstable","state","slots","slotProps","root","selectionCell","columnDefs","map","columnDef","value","columnId","key","renderCell"],"sourceRoot":"../src/","sources":["packages/react-components/react-table/src/components/DataGridRow/renderDataGridRow.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { DataGridRowState, DataGridRowSlots } from './DataGridRow.types';\nimport { ColumnIdContextProvider } from '../../contexts/columnIdContext';\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      {state.columnDefs.map(columnDef => (\n        <ColumnIdContextProvider value={columnDef.columnId} key={columnDef.columnId}>\n          {state.renderCell(columnDef)}\n        </ColumnIdContextProvider>\n      ))}\n    </slots.root>\n  );\n};\n"]}

package/lib/components/DataGridRow/useDataGridRow.js

@@ -1,4 +1,10 @@
+import { isInteractiveHTMLElement, useEventCallback, resolveShorthand } from '@fluentui/react-utilities';
+import { Space } from '@fluentui/keyboard-keys';
 import { useTableRow_unstable } from '../TableRow/useTableRow';
+import { useDataGridContext_unstable } from '../../contexts/dataGridContext';
+import { DataGridSelectionCell } from '../DataGridSelectionCell/DataGridSelectionCell';
+import { useTableRowIdContext } from '../../contexts/rowIdContext';
+import { useIsInTableHeader } from '../../contexts/tableHeaderContext';
 /**
  * Create the state required to render DataGridRow.
  *
@@ -8,10 +14,57 @@ import { useTableRow_unstable } from '../TableRow/useTableRow';
  * @param props - props from this instance of DataGridRow
  * @param ref - reference to root HTMLElement of DataGridRow
  */
-
 export const useDataGridRow_unstable = (props, ref) => {
-  return useTableRow_unstable({ ...props,
-    as: 'div'
+  const rowId = useTableRowIdContext();
+  const isHeader = useIsInTableHeader();
+  const columnDefs = useDataGridContext_unstable(ctx => ctx.columns);
+  const selectable = useDataGridContext_unstable(ctx => ctx.selectableRows);
+  const selected = useDataGridContext_unstable(ctx => ctx.selection.isRowSelected(rowId));
+  const tabbable = useDataGridContext_unstable(ctx => ctx.focusMode === 'row_unstable');
+  const appearance = useDataGridContext_unstable(ctx => {
+    if (!isHeader && selectable && ctx.selection.isRowSelected(rowId)) {
+      return ctx.selectionAppearance;
+    }
+    return 'none';
+  });
+  const toggleRow = useDataGridContext_unstable(ctx => ctx.selection.toggleRow);
+  const onClick = 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 = useEventCallback(e => {
+    var _a;
+    if (selectable && !isHeader && e.key === Space && !isInteractiveHTMLElement(e.target)) {
+      // stop scrolling
+      e.preventDefault();
+      toggleRow(e, rowId);
+    }
+    (_a = props.onKeyDown) === null || _a === void 0 ? void 0 : _a.call(props, e);
+  });
+  const baseState = useTableRow_unstable({
+    appearance,
+    'aria-selected': selectable ? selected : undefined,
+    ...props,
+    onClick,
+    onKeyDown,
+    children: null,
+    as: 'div',
+    tabIndex: tabbable && !isHeader ? 0 : undefined
   }, ref);
+  return {
+    ...baseState,
+    components: {
+      ...baseState.components,
+      selectionCell: DataGridSelectionCell
+    },
+    selectionCell: resolveShorthand(props.selectionCell, {
+      required: selectable
+    }),
+    renderCell: props.children,
+    columnDefs
+  };
 };
 //# sourceMappingURL=useDataGridRow.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-table/src/components/DataGridRow/useDataGridRow.ts"],"names":[],"mappings":"AAEA,SAAS,oBAAT,QAAqC,yBAArC;AAEA;;;;;;;;AAQG;;AACH,OAAO,MAAM,uBAAuB,GAAG,CAAC,KAAD,EAA0B,GAA1B,KAA2E;EAChH,OAAO,oBAAoB,CAAC,EAAE,GAAG,KAAL;IAAY,EAAE,EAAE;EAAhB,CAAD,EAA0B,GAA1B,CAA3B;AACD,CAFM","sourcesContent":["import * as React from 'react';\nimport type { DataGridRowProps, DataGridRowState } from './DataGridRow.types';\nimport { useTableRow_unstable } from '../TableRow/useTableRow';\n\n/**\n * Create the state required to render DataGridRow.\n *\n * The returned state can be modified with hooks such as useDataGridRowStyles_unstable,\n * before being passed to renderDataGridRow_unstable.\n *\n * @param props - props from this instance of DataGridRow\n * @param ref - reference to root HTMLElement of DataGridRow\n */\nexport const useDataGridRow_unstable = (props: DataGridRowProps, ref: React.Ref<HTMLElement>): DataGridRowState => {\n  return useTableRow_unstable({ ...props, as: 'div' }, ref);\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"mappings":"AACA,SAASA,wBAAwB,EAAEC,gBAAgB,EAAEC,gBAAgB,QAAQ,2BAA2B;AACxG,SAASC,KAAK,QAAQ,yBAAyB;AAE/C,SAASC,oBAAoB,QAAQ,yBAAyB;AAC9D,SAASC,2BAA2B,QAAQ,gCAAgC;AAC5E,SAASC,qBAAqB,QAAQ,gDAAgD;AACtF,SAASC,oBAAoB,QAAQ,6BAA6B;AAClE,SAASC,kBAAkB,QAAQ,mCAAmC;AAEtE;;;;;;;;;AASA,OAAO,MAAMC,uBAAuB,GAAG,CAACC,KAAuB,EAAEC,GAA2B,KAAsB;EAChH,MAAMC,KAAK,GAAGL,oBAAoB,EAAE;EACpC,MAAMM,QAAQ,GAAGL,kBAAkB,EAAE;EACrC,MAAMM,UAAU,GAAGT,2BAA2B,CAACU,GAAG,IAAIA,GAAG,CAACC,OAAO,CAAC;EAClE,MAAMC,UAAU,GAAGZ,2BAA2B,CAACU,GAAG,IAAIA,GAAG,CAACG,cAAc,CAAC;EACzE,MAAMC,QAAQ,GAAGd,2BAA2B,CAACU,GAAG,IAAIA,GAAG,CAACK,SAAS,CAACC,aAAa,CAACT,KAAK,CAAC,CAAC;EACvF,MAAMU,QAAQ,GAAGjB,2BAA2B,CAACU,GAAG,IAAIA,GAAG,CAACQ,SAAS,KAAK,cAAc,CAAC;EACrF,MAAMC,UAAU,GAAGnB,2BAA2B,CAACU,GAAG,IAAG;IACnD,IAAI,CAACF,QAAQ,IAAII,UAAU,IAAIF,GAAG,CAACK,SAAS,CAACC,aAAa,CAACT,KAAK,CAAC,EAAE;MACjE,OAAOG,GAAG,CAACU,mBAAmB;;IAGhC,OAAO,MAAM;EACf,CAAC,CAAC;EACF,MAAMC,SAAS,GAAGrB,2BAA2B,CAACU,GAAG,IAAIA,GAAG,CAACK,SAAS,CAACM,SAAS,CAAC;EAE7E,MAAMC,OAAO,GAAG1B,gBAAgB,CAAE2B,CAAwC,IAAI;;IAC5E,IAAIX,UAAU,IAAI,CAACJ,QAAQ,EAAE;MAC3Ba,SAAS,CAACE,CAAC,EAAEhB,KAAK,CAAC;;IAGrB,WAAK,CAACe,OAAO,+CAAbjB,KAAK,EAAWkB,CAAC,CAAC;EACpB,CAAC,CAAC;EAEF,MAAMC,SAAS,GAAG5B,gBAAgB,CAAE2B,CAA2C,IAAI;;IACjF,IAAIX,UAAU,IAAI,CAACJ,QAAQ,IAAIe,CAAC,CAACE,GAAG,KAAK3B,KAAK,IAAI,CAACH,wBAAwB,CAAC4B,CAAC,CAACG,MAAqB,CAAC,EAAE;MACpG;MACAH,CAAC,CAACI,cAAc,EAAE;MAClBN,SAAS,CAACE,CAAC,EAAEhB,KAAK,CAAC;;IAGrB,WAAK,CAACiB,SAAS,+CAAfnB,KAAK,EAAakB,CAAC,CAAC;EACtB,CAAC,CAAC;EAEF,MAAMK,SAAS,GAAG7B,oBAAoB,CACpC;IACEoB,UAAU;IACV,eAAe,EAAEP,UAAU,GAAGE,QAAQ,GAAGe,SAAS;IAClD,GAAGxB,KAAK;IACRiB,OAAO;IACPE,SAAS;IACTM,QAAQ,EAAE,IAAI;IACdC,EAAE,EAAE,KAAK;IACTC,QAAQ,EAAEf,QAAQ,IAAI,CAACT,QAAQ,GAAG,CAAC,GAAGqB;GACvC,EACDvB,GAAG,CACJ;EAED,OAAO;IACL,GAAGsB,SAAS;IACZK,UAAU,EAAE;MACV,GAAGL,SAAS,CAACK,UAAU;MACvBC,aAAa,EAAEjC;KAChB;IACDiC,aAAa,EAAErC,gBAAgB,CAACQ,KAAK,CAAC6B,aAAa,EAAE;MAAEC,QAAQ,EAAEvB;IAAU,CAAE,CAAC;IAC9EwB,UAAU,EAAE/B,KAAK,CAACyB,QAAQ;IAC1BrB;GACD;AACH,CAAC","names":["isInteractiveHTMLElement","useEventCallback","resolveShorthand","Space","useTableRow_unstable","useDataGridContext_unstable","DataGridSelectionCell","useTableRowIdContext","useIsInTableHeader","useDataGridRow_unstable","props","ref","rowId","isHeader","columnDefs","ctx","columns","selectable","selectableRows","selected","selection","isRowSelected","tabbable","focusMode","appearance","selectionAppearance","toggleRow","onClick","e","onKeyDown","key","target","preventDefault","baseState","undefined","children","as","tabIndex","components","selectionCell","required","renderCell"],"sourceRoot":"../src/","sources":["packages/react-components/react-table/src/components/DataGridRow/useDataGridRow.tsx"],"sourcesContent":["import * as React from 'react';\nimport { isInteractiveHTMLElement, useEventCallback, resolveShorthand } from '@fluentui/react-utilities';\nimport { Space } from '@fluentui/keyboard-keys';\nimport type { DataGridRowProps, DataGridRowState } from './DataGridRow.types';\nimport { useTableRow_unstable } from '../TableRow/useTableRow';\nimport { useDataGridContext_unstable } from '../../contexts/dataGridContext';\nimport { DataGridSelectionCell } from '../DataGridSelectionCell/DataGridSelectionCell';\nimport { useTableRowIdContext } from '../../contexts/rowIdContext';\nimport { useIsInTableHeader } from '../../contexts/tableHeaderContext';\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 = useTableRowIdContext();\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 tabbable = useDataGridContext_unstable(ctx => ctx.focusMode === 'row_unstable');\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 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 === Space && !isInteractiveHTMLElement(e.target as HTMLElement)) {\n      // stop scrolling\n      e.preventDefault();\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: null,\n      as: 'div',\n      tabIndex: tabbable && !isHeader ? 0 : undefined,\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    renderCell: props.children,\n    columnDefs,\n  };\n};\n"]}

package/lib/components/DataGridRow/useDataGridRowStyles.js

@@ -1,15 +1,18 @@
 import { mergeClasses } from '@griffel/react';
 import { useTableRowStyles_unstable } from '../TableRow/useTableRowStyles';
 export const dataGridRowClassNames = {
-  root: 'fui-DataGridRow'
+  root: 'fui-DataGridRow',
+  selectionCell: 'fui-DataGridRow__selectionCell'
 };
 /**
  * Apply styling to the DataGridRow slots based on the state
  */
-
 export const useDataGridRowStyles_unstable = state => {
   useTableRowStyles_unstable(state);
   state.root.className = mergeClasses(dataGridRowClassNames.root, state.root.className);
+  if (state.selectionCell) {
+    state.selectionCell.className = mergeClasses(dataGridRowClassNames.selectionCell, state.selectionCell.className);
+  }
   return state;
 };
 //# sourceMappingURL=useDataGridRowStyles.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-table/src/components/DataGridRow/useDataGridRowStyles.ts"],"names":[],"mappings":"AAAA,SAAS,YAAT,QAA6B,gBAA7B;AAGA,SAAS,0BAAT,QAA2C,+BAA3C;AAEA,OAAO,MAAM,qBAAqB,GAAqC;EACrE,IAAI,EAAE;AAD+D,CAAhE;AAIP;;AAEG;;AACH,OAAO,MAAM,6BAA6B,GAAI,KAAD,IAA8C;EACzF,0BAA0B,CAAC,KAAD,CAA1B;EACA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CAAC,qBAAqB,CAAC,IAAvB,EAA6B,KAAK,CAAC,IAAN,CAAW,SAAxC,CAAnC;EAEA,OAAO,KAAP;AACD,CALM","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,"mappings":"AAAA,SAASA,YAAY,QAAQ,gBAAgB;AAG7C,SAASC,0BAA0B,QAAQ,+BAA+B;AAE1E,OAAO,MAAMC,qBAAqB,GAAqC;EACrEC,IAAI,EAAE,iBAAiB;EACvBC,aAAa,EAAE;CAChB;AAED;;;AAGA,OAAO,MAAMC,6BAA6B,GAAIC,KAAuB,IAAsB;EACzFL,0BAA0B,CAACK,KAAK,CAAC;EACjCA,KAAK,CAACH,IAAI,CAACI,SAAS,GAAGP,YAAY,CAACE,qBAAqB,CAACC,IAAI,EAAEG,KAAK,CAACH,IAAI,CAACI,SAAS,CAAC;EACrF,IAAID,KAAK,CAACF,aAAa,EAAE;IACvBE,KAAK,CAACF,aAAa,CAACG,SAAS,GAAGP,YAAY,CAACE,qBAAqB,CAACE,aAAa,EAAEE,KAAK,CAACF,aAAa,CAACG,SAAS,CAAC;;EAGlH,OAAOD,KAAK;AACd,CAAC","names":["mergeClasses","useTableRowStyles_unstable","dataGridRowClassNames","root","selectionCell","useDataGridRowStyles_unstable","state","className"],"sourceRoot":"../src/","sources":["packages/react-components/react-table/src/components/DataGridRow/useDataGridRowStyles.ts"],"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"]}

package/lib/components/DataGridSelectionCell/DataGridSelectionCell.js

@@ -3,9 +3,8 @@ import { useDataGridSelectionCell_unstable } from './useDataGridSelectionCell';
 import { renderDataGridSelectionCell_unstable } from './renderDataGridSelectionCell';
 import { useDataGridSelectionCellStyles_unstable } from './useDataGridSelectionCellStyles';
 /**
- * DataGridSelectionCell component - TODO: add more docs
+ * DataGridSelectionCell component
  */
-
 export const DataGridSelectionCell = /*#__PURE__*/React.forwardRef((props, ref) => {
   const state = useDataGridSelectionCell_unstable(props, ref);
   useDataGridSelectionCellStyles_unstable(state);

package/lib/components/DataGridSelectionCell/DataGridSelectionCell.js.map

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-table/src/components/DataGridSelectionCell/DataGridSelectionCell.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,iCAAT,QAAkD,4BAAlD;AACA,SAAS,oCAAT,QAAqD,+BAArD;AACA,SAAS,uCAAT,QAAwD,kCAAxD;AAIA;;AAEG;;AACH,OAAO,MAAM,qBAAqB,gBAAoD,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EACpH,MAAM,KAAK,GAAG,iCAAiC,CAAC,KAAD,EAAQ,GAAR,CAA/C;EAEA,uCAAuC,CAAC,KAAD,CAAvC;EACA,OAAO,oCAAoC,CAAC,KAAD,CAA3C;AACD,CALqF,CAA/E;AAOP,qBAAqB,CAAC,WAAtB,GAAoC,uBAApC","sourcesContent":["import * as React from 'react';\nimport { useDataGridSelectionCell_unstable } from './useDataGridSelectionCell';\nimport { renderDataGridSelectionCell_unstable } from './renderDataGridSelectionCell';\nimport { useDataGridSelectionCellStyles_unstable } from './useDataGridSelectionCellStyles';\nimport type { DataGridSelectionCellProps } from './DataGridSelectionCell.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * DataGridSelectionCell component - TODO: add more docs\n */\nexport const DataGridSelectionCell: ForwardRefComponent<DataGridSelectionCellProps> = React.forwardRef((props, ref) => {\n  const state = useDataGridSelectionCell_unstable(props, ref);\n\n  useDataGridSelectionCellStyles_unstable(state);\n  return renderDataGridSelectionCell_unstable(state);\n});\n\nDataGridSelectionCell.displayName = 'DataGridSelectionCell';\n"],"sourceRoot":"../src/"}
+{"version":3,"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,iCAAiC,QAAQ,4BAA4B;AAC9E,SAASC,oCAAoC,QAAQ,+BAA+B;AACpF,SAASC,uCAAuC,QAAQ,kCAAkC;AAI1F;;;AAGA,OAAO,MAAMC,qBAAqB,gBAAoDJ,KAAK,CAACK,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EACpH,MAAMC,KAAK,GAAGP,iCAAiC,CAACK,KAAK,EAAEC,GAAG,CAAC;EAE3DJ,uCAAuC,CAACK,KAAK,CAAC;EAC9C,OAAON,oCAAoC,CAACM,KAAK,CAAC;AACpD,CAAC,CAAC;AAEFJ,qBAAqB,CAACK,WAAW,GAAG,uBAAuB","names":["React","useDataGridSelectionCell_unstable","renderDataGridSelectionCell_unstable","useDataGridSelectionCellStyles_unstable","DataGridSelectionCell","forwardRef","props","ref","state","displayName"],"sourceRoot":"../src/","sources":["packages/react-components/react-table/src/components/DataGridSelectionCell/DataGridSelectionCell.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useDataGridSelectionCell_unstable } from './useDataGridSelectionCell';\nimport { renderDataGridSelectionCell_unstable } from './renderDataGridSelectionCell';\nimport { useDataGridSelectionCellStyles_unstable } from './useDataGridSelectionCellStyles';\nimport type { DataGridSelectionCellProps } from './DataGridSelectionCell.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * DataGridSelectionCell component\n */\nexport const DataGridSelectionCell: ForwardRefComponent<DataGridSelectionCellProps> = React.forwardRef((props, ref) => {\n  const state = useDataGridSelectionCell_unstable(props, ref);\n\n  useDataGridSelectionCellStyles_unstable(state);\n  return renderDataGridSelectionCell_unstable(state);\n});\n\nDataGridSelectionCell.displayName = 'DataGridSelectionCell';\n"]}

package/lib/components/DataGridSelectionCell/renderDataGridSelectionCell.js

@@ -2,7 +2,6 @@ import { renderTableSelectionCell_unstable } from '../TableSelectionCell/renderT
 /**
  * Render the final JSX of DataGridSelectionCell
  */
-
 export const renderDataGridSelectionCell_unstable = state => {
   return renderTableSelectionCell_unstable(state);
 };

package/lib/components/DataGridSelectionCell/renderDataGridSelectionCell.js.map

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-table/src/components/DataGridSelectionCell/renderDataGridSelectionCell.tsx"],"names":[],"mappings":"AACA,SAAS,iCAAT,QAAkD,gDAAlD;AAEA;;AAEG;;AACH,OAAO,MAAM,oCAAoC,GAAI,KAAD,IAAsC;EACxF,OAAO,iCAAiC,CAAC,KAAD,CAAxC;AACD,CAFM","sourcesContent":["import type { DataGridSelectionCellState } from './DataGridSelectionCell.types';\nimport { renderTableSelectionCell_unstable } from '../TableSelectionCell/renderTableSelectionCell';\n\n/**\n * Render the final JSX of DataGridSelectionCell\n */\nexport const renderDataGridSelectionCell_unstable = (state: DataGridSelectionCellState) => {\n  return renderTableSelectionCell_unstable(state);\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"mappings":"AACA,SAASA,iCAAiC,QAAQ,gDAAgD;AAElG;;;AAGA,OAAO,MAAMC,oCAAoC,GAAIC,KAAiC,IAAI;EACxF,OAAOF,iCAAiC,CAACE,KAAK,CAAC;AACjD,CAAC","names":["renderTableSelectionCell_unstable","renderDataGridSelectionCell_unstable","state"],"sourceRoot":"../src/","sources":["packages/react-components/react-table/src/components/DataGridSelectionCell/renderDataGridSelectionCell.tsx"],"sourcesContent":["import type { DataGridSelectionCellState } from './DataGridSelectionCell.types';\nimport { renderTableSelectionCell_unstable } from '../TableSelectionCell/renderTableSelectionCell';\n\n/**\n * Render the final JSX of DataGridSelectionCell\n */\nexport const renderDataGridSelectionCell_unstable = (state: DataGridSelectionCellState) => {\n  return renderTableSelectionCell_unstable(state);\n};\n"]}

package/lib/components/DataGridSelectionCell/useDataGridSelectionCell.js

@@ -1,3 +1,7 @@
+import { useEventCallback } from '@fluentui/react-utilities';
+import { useDataGridContext_unstable } from '../../contexts/dataGridContext';
+import { useTableRowIdContext } from '../../contexts/rowIdContext';
+import { useIsInTableHeader } from '../../contexts/tableHeaderContext';
 import { useTableSelectionCell_unstable } from '../TableSelectionCell/useTableSelectionCell';
 /**
  * Create the state required to render DataGridSelectionCell.
@@ -8,10 +12,36 @@ import { useTableSelectionCell_unstable } from '../TableSelectionCell/useTableSe
  * @param props - props from this instance of DataGridSelectionCell
  * @param ref - reference to root HTMLElement of DataGridSelectionCell
  */
-
 export const useDataGridSelectionCell_unstable = (props, ref) => {
-  return useTableSelectionCell_unstable({ ...props,
-    as: 'div'
+  const isHeader = useIsInTableHeader();
+  const rowId = useTableRowIdContext();
+  const subtle = useDataGridContext_unstable(ctx => ctx.subtleSelection);
+  const checked = useDataGridContext_unstable(ctx => {
+    if (isHeader && ctx.selection.selectionMode === 'multiselect') {
+      return ctx.selection.allRowsSelected ? true : ctx.selection.someRowsSelected ? 'mixed' : false;
+    }
+    return ctx.selection.isRowSelected(rowId);
+  });
+  const toggleAllRows = useDataGridContext_unstable(ctx => ctx.selection.toggleAllRows);
+  const type = useDataGridContext_unstable(ctx => ctx.selection.selectionMode === 'multiselect' ? 'checkbox' : 'radio');
+  const onClick = useEventCallback(e => {
+    var _a;
+    if (isHeader) {
+      toggleAllRows(e);
+    }
+    (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props, e);
+  });
+  return useTableSelectionCell_unstable({
+    as: 'div',
+    role: 'gridcell',
+    checked,
+    type,
+    hidden: isHeader && type === 'radio',
+    'aria-checked': isHeader ? checked : undefined,
+    'aria-selected': isHeader || checked === 'mixed' ? undefined : checked,
+    subtle,
+    ...props,
+    onClick
   }, ref);
 };
 //# sourceMappingURL=useDataGridSelectionCell.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-table/src/components/DataGridSelectionCell/useDataGridSelectionCell.ts"],"names":[],"mappings":"AACA,SAAS,8BAAT,QAA+C,6CAA/C;AAGA;;;;;;;;AAQG;;AACH,OAAO,MAAM,iCAAiC,GAAG,CAC/C,KAD+C,EAE/C,GAF+C,KAGjB;EAC9B,OAAO,8BAA8B,CAAC,EAAE,GAAG,KAAL;IAAY,EAAE,EAAE;EAAhB,CAAD,EAA0B,GAA1B,CAArC;AACD,CALM","sourcesContent":["import * as React from 'react';\nimport { useTableSelectionCell_unstable } from '../TableSelectionCell/useTableSelectionCell';\nimport type { DataGridSelectionCellProps, DataGridSelectionCellState } from './DataGridSelectionCell.types';\n\n/**\n * Create the state required to render DataGridSelectionCell.\n *\n * The returned state can be modified with hooks such as useDataGridSelectionCellStyles_unstable,\n * before being passed to renderDataGridSelectionCell_unstable.\n *\n * @param props - props from this instance of DataGridSelectionCell\n * @param ref - reference to root HTMLElement of DataGridSelectionCell\n */\nexport const useDataGridSelectionCell_unstable = (\n  props: DataGridSelectionCellProps,\n  ref: React.Ref<HTMLElement>,\n): DataGridSelectionCellState => {\n  return useTableSelectionCell_unstable({ ...props, as: 'div' }, ref);\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"mappings":"AACA,SAASA,gBAAgB,QAAQ,2BAA2B;AAC5D,SAASC,2BAA2B,QAAQ,gCAAgC;AAC5E,SAASC,oBAAoB,QAAQ,6BAA6B;AAClE,SAASC,kBAAkB,QAAQ,mCAAmC;AACtE,SAASC,8BAA8B,QAAQ,6CAA6C;AAG5F;;;;;;;;;AASA,OAAO,MAAMC,iCAAiC,GAAG,CAC/CC,KAAiC,EACjCC,GAA2B,KACG;EAC9B,MAAMC,QAAQ,GAAGL,kBAAkB,EAAE;EACrC,MAAMM,KAAK,GAAGP,oBAAoB,EAAE;EACpC,MAAMQ,MAAM,GAAGT,2BAA2B,CAACU,GAAG,IAAIA,GAAG,CAACC,eAAe,CAAC;EACtE,MAAMC,OAAO,GAAGZ,2BAA2B,CAACU,GAAG,IAAG;IAChD,IAAIH,QAAQ,IAAIG,GAAG,CAACG,SAAS,CAACC,aAAa,KAAK,aAAa,EAAE;MAC7D,OAAOJ,GAAG,CAACG,SAAS,CAACE,eAAe,GAAG,IAAI,GAAGL,GAAG,CAACG,SAAS,CAACG,gBAAgB,GAAG,OAAO,GAAG,KAAK;;IAGhG,OAAON,GAAG,CAACG,SAAS,CAACI,aAAa,CAACT,KAAK,CAAC;EAC3C,CAAC,CAAC;EAEF,MAAMU,aAAa,GAAGlB,2BAA2B,CAACU,GAAG,IAAIA,GAAG,CAACG,SAAS,CAACK,aAAa,CAAC;EACrF,MAAMC,IAAI,GAAGnB,2BAA2B,CAACU,GAAG,IAC1CA,GAAG,CAACG,SAAS,CAACC,aAAa,KAAK,aAAa,GAAG,UAAU,GAAG,OAAO,CACrE;EAED,MAAMM,OAAO,GAAGrB,gBAAgB,CAAEsB,CAAyC,IAAI;;IAC7E,IAAId,QAAQ,EAAE;MACZW,aAAa,CAACG,CAAC,CAAC;;IAGlB,WAAK,CAACD,OAAO,+CAAbf,KAAK,EAAWgB,CAAC,CAAC;EACpB,CAAC,CAAC;EAEF,OAAOlB,8BAA8B,CACnC;IACEmB,EAAE,EAAE,KAAK;IACTC,IAAI,EAAE,UAAU;IAChBX,OAAO;IACPO,IAAI;IACJK,MAAM,EAAEjB,QAAQ,IAAIY,IAAI,KAAK,OAAO;IACpC,cAAc,EAAEZ,QAAQ,GAAGK,OAAO,GAAGa,SAAS;IAC9C,eAAe,EAAElB,QAAQ,IAAIK,OAAO,KAAK,OAAO,GAAGa,SAAS,GAAGb,OAAO;IACtEH,MAAM;IACN,GAAGJ,KAAK;IACRe;GACD,EACDd,GAAG,CACJ;AACH,CAAC","names":["useEventCallback","useDataGridContext_unstable","useTableRowIdContext","useIsInTableHeader","useTableSelectionCell_unstable","useDataGridSelectionCell_unstable","props","ref","isHeader","rowId","subtle","ctx","subtleSelection","checked","selection","selectionMode","allRowsSelected","someRowsSelected","isRowSelected","toggleAllRows","type","onClick","e","as","role","hidden","undefined"],"sourceRoot":"../src/","sources":["packages/react-components/react-table/src/components/DataGridSelectionCell/useDataGridSelectionCell.ts"],"sourcesContent":["import * as React from 'react';\nimport { useEventCallback } from '@fluentui/react-utilities';\nimport { useDataGridContext_unstable } from '../../contexts/dataGridContext';\nimport { useTableRowIdContext } 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 = useTableRowIdContext();\n  const subtle = useDataGridContext_unstable(ctx => ctx.subtleSelection);\n  const checked = useDataGridContext_unstable(ctx => {\n    if (isHeader && ctx.selection.selectionMode === '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      hidden: isHeader && type === 'radio',\n      'aria-checked': isHeader ? checked : undefined,\n      'aria-selected': isHeader || checked === 'mixed' ? undefined : checked,\n      subtle,\n      ...props,\n      onClick,\n    },\n    ref,\n  );\n};\n"]}

package/lib/components/DataGridSelectionCell/useDataGridSelectionCellStyles.js

@@ -8,19 +8,15 @@ export const dataGridSelectionCellClassNames = {
 /**
  * Apply styling to the DataGridSelectionCell slots based on the state
  */
-
 export const useDataGridSelectionCellStyles_unstable = state => {
   useTableSelectionCellStyles_unstable(state);
   state.root.className = mergeClasses(dataGridSelectionCellClassNames.root, state.root.className);
-
   if (state.checkboxIndicator) {
     state.checkboxIndicator.className = mergeClasses(dataGridSelectionCellClassNames.checkboxIndicator, state.checkboxIndicator.className);
   }
-
   if (state.radioIndicator) {
     state.radioIndicator.className = mergeClasses(dataGridSelectionCellClassNames.radioIndicator, state.radioIndicator.className);
   }
-
   return state;
 };
 //# sourceMappingURL=useDataGridSelectionCellStyles.js.map

package/lib/components/DataGridSelectionCell/useDataGridSelectionCellStyles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-table/src/components/DataGridSelectionCell/useDataGridSelectionCellStyles.ts"],"names":[],"mappings":"AAAA,SAAS,YAAT,QAA6B,gBAA7B;AAGA,SAAS,oCAAT,QAAqD,mDAArD;AAEA,OAAO,MAAM,+BAA+B,GAA+C;EACzF,IAAI,EAAE,2BADmF;EAEzF,iBAAiB,EAAE,8CAFsE;EAGzF,cAAc,EAAE;AAHyE,CAApF;AAMP;;AAEG;;AACH,OAAO,MAAM,uCAAuC,GAClD,KADqD,IAEvB;EAC9B,oCAAoC,CAAC,KAAD,CAApC;EACA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CAAC,+BAA+B,CAAC,IAAjC,EAAuC,KAAK,CAAC,IAAN,CAAW,SAAlD,CAAnC;;EAEA,IAAI,KAAK,CAAC,iBAAV,EAA6B;IAC3B,KAAK,CAAC,iBAAN,CAAwB,SAAxB,GAAoC,YAAY,CAC9C,+BAA+B,CAAC,iBADc,EAE9C,KAAK,CAAC,iBAAN,CAAwB,SAFsB,CAAhD;EAID;;EAED,IAAI,KAAK,CAAC,cAAV,EAA0B;IACxB,KAAK,CAAC,cAAN,CAAqB,SAArB,GAAiC,YAAY,CAC3C,+BAA+B,CAAC,cADW,EAE3C,KAAK,CAAC,cAAN,CAAqB,SAFsB,CAA7C;EAID;;EAED,OAAO,KAAP;AACD,CArBM","sourcesContent":["import { mergeClasses } from '@griffel/react';\nimport type { DataGridSelectionCellSlots, DataGridSelectionCellState } from './DataGridSelectionCell.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { useTableSelectionCellStyles_unstable } from '../TableSelectionCell/useTableSelectionCellStyles';\n\nexport const dataGridSelectionCellClassNames: SlotClassNames<DataGridSelectionCellSlots> = {\n  root: 'fui-DataGridSelectionCell',\n  checkboxIndicator: 'fui-DataGridSelectionCell__checkboxIndicator',\n  radioIndicator: 'fui-DataGridSelectionCell__radioIndicator',\n};\n\n/**\n * Apply styling to the DataGridSelectionCell slots based on the state\n */\nexport const useDataGridSelectionCellStyles_unstable = (\n  state: DataGridSelectionCellState,\n): DataGridSelectionCellState => {\n  useTableSelectionCellStyles_unstable(state);\n  state.root.className = mergeClasses(dataGridSelectionCellClassNames.root, state.root.className);\n\n  if (state.checkboxIndicator) {\n    state.checkboxIndicator.className = mergeClasses(\n      dataGridSelectionCellClassNames.checkboxIndicator,\n      state.checkboxIndicator.className,\n    );\n  }\n\n  if (state.radioIndicator) {\n    state.radioIndicator.className = mergeClasses(\n      dataGridSelectionCellClassNames.radioIndicator,\n      state.radioIndicator.className,\n    );\n  }\n\n  return state;\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"mappings":"AAAA,SAASA,YAAY,QAAQ,gBAAgB;AAG7C,SAASC,oCAAoC,QAAQ,mDAAmD;AAExG,OAAO,MAAMC,+BAA+B,GAA+C;EACzFC,IAAI,EAAE,2BAA2B;EACjCC,iBAAiB,EAAE,8CAA8C;EACjEC,cAAc,EAAE;CACjB;AAED;;;AAGA,OAAO,MAAMC,uCAAuC,GAClDC,KAAiC,IACH;EAC9BN,oCAAoC,CAACM,KAAK,CAAC;EAC3CA,KAAK,CAACJ,IAAI,CAACK,SAAS,GAAGR,YAAY,CAACE,+BAA+B,CAACC,IAAI,EAAEI,KAAK,CAACJ,IAAI,CAACK,SAAS,CAAC;EAE/F,IAAID,KAAK,CAACH,iBAAiB,EAAE;IAC3BG,KAAK,CAACH,iBAAiB,CAACI,SAAS,GAAGR,YAAY,CAC9CE,+BAA+B,CAACE,iBAAiB,EACjDG,KAAK,CAACH,iBAAiB,CAACI,SAAS,CAClC;;EAGH,IAAID,KAAK,CAACF,cAAc,EAAE;IACxBE,KAAK,CAACF,cAAc,CAACG,SAAS,GAAGR,YAAY,CAC3CE,+BAA+B,CAACG,cAAc,EAC9CE,KAAK,CAACF,cAAc,CAACG,SAAS,CAC/B;;EAGH,OAAOD,KAAK;AACd,CAAC","names":["mergeClasses","useTableSelectionCellStyles_unstable","dataGridSelectionCellClassNames","root","checkboxIndicator","radioIndicator","useDataGridSelectionCellStyles_unstable","state","className"],"sourceRoot":"../src/","sources":["packages/react-components/react-table/src/components/DataGridSelectionCell/useDataGridSelectionCellStyles.ts"],"sourcesContent":["import { mergeClasses } from '@griffel/react';\nimport type { DataGridSelectionCellSlots, DataGridSelectionCellState } from './DataGridSelectionCell.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { useTableSelectionCellStyles_unstable } from '../TableSelectionCell/useTableSelectionCellStyles';\n\nexport const dataGridSelectionCellClassNames: SlotClassNames<DataGridSelectionCellSlots> = {\n  root: 'fui-DataGridSelectionCell',\n  checkboxIndicator: 'fui-DataGridSelectionCell__checkboxIndicator',\n  radioIndicator: 'fui-DataGridSelectionCell__radioIndicator',\n};\n\n/**\n * Apply styling to the DataGridSelectionCell slots based on the state\n */\nexport const useDataGridSelectionCellStyles_unstable = (\n  state: DataGridSelectionCellState,\n): DataGridSelectionCellState => {\n  useTableSelectionCellStyles_unstable(state);\n  state.root.className = mergeClasses(dataGridSelectionCellClassNames.root, state.root.className);\n\n  if (state.checkboxIndicator) {\n    state.checkboxIndicator.className = mergeClasses(\n      dataGridSelectionCellClassNames.checkboxIndicator,\n      state.checkboxIndicator.className,\n    );\n  }\n\n  if (state.radioIndicator) {\n    state.radioIndicator.className = mergeClasses(\n      dataGridSelectionCellClassNames.radioIndicator,\n      state.radioIndicator.className,\n    );\n  }\n\n  return state;\n};\n"]}

package/lib/components/Table/Table.js

@@ -4,9 +4,8 @@ import { renderTable_unstable } from './renderTable';
 import { useTableStyles_unstable } from './useTableStyles';
 import { useTableContextValues_unstable } from './useTableContextValues';
 /**
- * Table component - TODO: add more docs
+ * Table component
  */
-
 export const Table = /*#__PURE__*/React.forwardRef((props, ref) => {
   const state = useTable_unstable(props, ref);
   useTableStyles_unstable(state);

package/lib/components/Table/Table.js.map

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-table/src/components/Table/Table.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,iBAAT,QAAkC,YAAlC;AACA,SAAS,oBAAT,QAAqC,eAArC;AACA,SAAS,uBAAT,QAAwC,kBAAxC;AAGA,SAAS,8BAAT,QAA+C,yBAA/C;AAEA;;AAEG;;AACH,OAAO,MAAM,KAAK,gBAAoC,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EACpF,MAAM,KAAK,GAAG,iBAAiB,CAAC,KAAD,EAAQ,GAAR,CAA/B;EAEA,uBAAuB,CAAC,KAAD,CAAvB;EACA,OAAO,oBAAoB,CAAC,KAAD,EAAQ,8BAA8B,CAAC,KAAD,CAAtC,CAA3B;AACD,CALqD,CAA/C;AAOP,KAAK,CAAC,WAAN,GAAoB,OAApB","sourcesContent":["import * as React from 'react';\nimport { useTable_unstable } from './useTable';\nimport { renderTable_unstable } from './renderTable';\nimport { useTableStyles_unstable } from './useTableStyles';\nimport type { TableProps } from './Table.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useTableContextValues_unstable } from './useTableContextValues';\n\n/**\n * Table component - TODO: add more docs\n */\nexport const Table: ForwardRefComponent<TableProps> = React.forwardRef((props, ref) => {\n  const state = useTable_unstable(props, ref);\n\n  useTableStyles_unstable(state);\n  return renderTable_unstable(state, useTableContextValues_unstable(state));\n});\n\nTable.displayName = 'Table';\n"],"sourceRoot":"../src/"}
+{"version":3,"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,iBAAiB,QAAQ,YAAY;AAC9C,SAASC,oBAAoB,QAAQ,eAAe;AACpD,SAASC,uBAAuB,QAAQ,kBAAkB;AAG1D,SAASC,8BAA8B,QAAQ,yBAAyB;AAExE;;;AAGA,OAAO,MAAMC,KAAK,gBAAoCL,KAAK,CAACM,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EACpF,MAAMC,KAAK,GAAGR,iBAAiB,CAACM,KAAK,EAAEC,GAAG,CAAC;EAE3CL,uBAAuB,CAACM,KAAK,CAAC;EAC9B,OAAOP,oBAAoB,CAACO,KAAK,EAAEL,8BAA8B,CAACK,KAAK,CAAC,CAAC;AAC3E,CAAC,CAAC;AAEFJ,KAAK,CAACK,WAAW,GAAG,OAAO","names":["React","useTable_unstable","renderTable_unstable","useTableStyles_unstable","useTableContextValues_unstable","Table","forwardRef","props","ref","state","displayName"],"sourceRoot":"../src/","sources":["packages/react-components/react-table/src/components/Table/Table.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useTable_unstable } from './useTable';\nimport { renderTable_unstable } from './renderTable';\nimport { useTableStyles_unstable } from './useTableStyles';\nimport type { TableProps } from './Table.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useTableContextValues_unstable } from './useTableContextValues';\n\n/**\n * Table component\n */\nexport const Table: ForwardRefComponent<TableProps> = React.forwardRef((props, ref) => {\n  const state = useTable_unstable(props, ref);\n\n  useTableStyles_unstable(state);\n  return renderTable_unstable(state, useTableContextValues_unstable(state));\n});\n\nTable.displayName = 'Table';\n"]}

package/lib/components/Table/Table.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"Table.types.js","sourceRoot":"../src/","sources":["packages/react-components/react-table/src/components/Table/Table.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type TableSlots = {\n  root: Slot<'table', 'div'>;\n};\n\nexport type TableContextValue = {\n  /**\n   * Affects the sizes of all table subcomponents\n   * @default medium\n   */\n  size: 'small' | 'smaller' | 'medium';\n\n  /**\n   * Render all table elements as divs intead of semantic table elements\n   * Using divs no longer uses `display: table` layout but `display: flex`\n   */\n  noNativeElements: boolean;\n\n  /**\n   * Whether the table is sortable\n   */\n  sortable: boolean;\n};\n\nexport type SortDirection = 'ascending' | 'descending';\n\nexport type TableContextValues = {\n  table: TableContextValue;\n};\n\n/**\n * Table Props\n */\nexport type TableProps = ComponentProps<TableSlots> & Partial<TableContextValue>;\n\n/**\n * State used in rendering Table\n */\nexport type TableState = ComponentState<TableSlots> &\n  Pick<Required<TableProps>, 'size' | 'noNativeElements'> &\n  TableContextValue;\n"]}
+{"version":3,"file":"Table.types.js","sourceRoot":"../src/","sources":["packages/react-components/react-table/src/components/Table/Table.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type TableSlots = {\n  root: Slot<'table', 'div'>;\n};\n\nexport type TableContextValue = {\n  /**\n   * Affects the sizes of all table subcomponents\n   * @default medium\n   */\n  size: 'extra-small' | 'small' | 'medium';\n\n  /**\n   * Render all table elements as divs instead of semantic table elements\n   * Using divs no longer uses `display: table` layout but `display: flex`\n   * @default false\n   */\n  noNativeElements: boolean;\n\n  /**\n   * Whether the table is sortable\n   * @default false\n   */\n  sortable: boolean;\n};\n\nexport type SortDirection = 'ascending' | 'descending';\n\nexport type TableContextValues = {\n  table: TableContextValue;\n};\n\n/**\n * Table Props\n */\nexport type TableProps = ComponentProps<TableSlots> & Partial<TableContextValue>;\n\n/**\n * State used in rendering Table\n */\nexport type TableState = ComponentState<TableSlots> &\n  Pick<Required<TableProps>, 'size' | 'noNativeElements'> &\n  TableContextValue;\n"]}

package/lib/components/Table/renderTable.js

@@ -4,7 +4,6 @@ import { TableContextProvider } from '../../contexts/tableContext';
 /**
  * Render the final JSX of Table
  */
-
 export const renderTable_unstable = (state, contextValues) => {
   const {
     slots,
@@ -12,7 +11,8 @@ export const renderTable_unstable = (state, contextValues) => {
   } = getSlots(state);
   return /*#__PURE__*/React.createElement(TableContextProvider, {
     value: contextValues.table
-  }, /*#__PURE__*/React.createElement(slots.root, { ...slotProps.root
+  }, /*#__PURE__*/React.createElement(slots.root, {
+    ...slotProps.root
   }));
 };
 //# sourceMappingURL=renderTable.js.map

package/lib/components/Table/renderTable.js.map

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-table/src/components/Table/renderTable.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AAEA,SAAS,oBAAT,QAAqC,6BAArC;AAEA;;AAEG;;AACH,OAAO,MAAM,oBAAoB,GAAG,CAAC,KAAD,EAAoB,aAApB,KAAyD;EAC3F,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,QAAQ,CAAa,KAAb,CAArC;EAEA,oBACE,KAAA,CAAA,aAAA,CAAC,oBAAD,EAAqB;IAAC,KAAK,EAAE,aAAa,CAAC;EAAtB,CAArB,eACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,CADF,CADF;AAKD,CARM","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { TableState, TableSlots, TableContextValues } from './Table.types';\nimport { TableContextProvider } from '../../contexts/tableContext';\n\n/**\n * Render the final JSX of Table\n */\nexport const renderTable_unstable = (state: TableState, contextValues: TableContextValues) => {\n  const { slots, slotProps } = getSlots<TableSlots>(state);\n\n  return (\n    <TableContextProvider value={contextValues.table}>\n      <slots.root {...slotProps.root} />\n    </TableContextProvider>\n  );\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,QAAQ,QAAQ,2BAA2B;AAEpD,SAASC,oBAAoB,QAAQ,6BAA6B;AAElE;;;AAGA,OAAO,MAAMC,oBAAoB,GAAG,CAACC,KAAiB,EAAEC,aAAiC,KAAI;EAC3F,MAAM;IAAEC,KAAK;IAAEC;EAAS,CAAE,GAAGN,QAAQ,CAAaG,KAAK,CAAC;EAExD,oBACEJ,oBAACE,oBAAoB;IAACM,KAAK,EAAEH,aAAa,CAACI;EAAK,gBAC9CT,oBAACM,KAAK,CAACI,IAAI;IAAA,GAAKH,SAAS,CAACG;EAAI,EAAI,CACb;AAE3B,CAAC","names":["React","getSlots","TableContextProvider","renderTable_unstable","state","contextValues","slots","slotProps","value","table","root"],"sourceRoot":"../src/","sources":["packages/react-components/react-table/src/components/Table/renderTable.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { TableState, TableSlots, TableContextValues } from './Table.types';\nimport { TableContextProvider } from '../../contexts/tableContext';\n\n/**\n * Render the final JSX of Table\n */\nexport const renderTable_unstable = (state: TableState, contextValues: TableContextValues) => {\n  const { slots, slotProps } = getSlots<TableSlots>(state);\n\n  return (\n    <TableContextProvider value={contextValues.table}>\n      <slots.root {...slotProps.root} />\n    </TableContextProvider>\n  );\n};\n"]}

package/lib/components/Table/useTable.js

@@ -8,10 +8,8 @@ import { getNativeElementProps } from '@fluentui/react-utilities';
  * @param props - props from this instance of Table
  * @param ref - reference to root HTMLElement of Table
  */
-
 export const useTable_unstable = (props, ref) => {
   var _a, _b, _c, _d;
-
   const rootComponent = ((_a = props.as) !== null && _a !== void 0 ? _a : props.noNativeElements) ? 'div' : 'table';
   return {
     components: {

package/lib/components/Table/useTable.js.map

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-table/src/components/Table/useTable.ts"],"names":[],"mappings":"AACA,SAAS,qBAAT,QAAsC,2BAAtC;AAGA;;;;;;;;AAQG;;AACH,OAAO,MAAM,iBAAiB,GAAG,CAAC,KAAD,EAAoB,GAApB,KAA+D;;;EAC9F,MAAM,aAAa,GAAG,CAAA,CAAA,EAAA,GAAA,KAAK,CAAC,EAAN,MAAQ,IAAR,IAAQ,EAAA,KAAA,KAAA,CAAR,GAAQ,EAAR,GAAY,KAAK,CAAC,gBAAlB,IAAqC,KAArC,GAA6C,OAAnE;EAEA,OAAO;IACL,UAAU,EAAE;MACV,IAAI,EAAE;IADI,CADP;IAIL,IAAI,EAAE,qBAAqB,CAAC,aAAD,EAAgB;MACzC,GADyC;MAEzC,IAAI,EAAE,aAAa,KAAK,KAAlB,GAA0B,OAA1B,GAAoC,SAFD;MAGzC,GAAG;IAHsC,CAAhB,CAJtB;IASL,IAAI,EAAE,CAAA,EAAA,GAAA,KAAK,CAAC,IAAN,MAAU,IAAV,IAAU,EAAA,KAAA,KAAA,CAAV,GAAU,EAAV,GAAc,QATf;IAUL,gBAAgB,EAAE,CAAA,EAAA,GAAA,KAAK,CAAC,gBAAN,MAAsB,IAAtB,IAAsB,EAAA,KAAA,KAAA,CAAtB,GAAsB,EAAtB,GAA0B,KAVvC;IAWL,QAAQ,EAAE,CAAA,EAAA,GAAA,KAAK,CAAC,QAAN,MAAc,IAAd,IAAc,EAAA,KAAA,KAAA,CAAd,GAAc,EAAd,GAAkB;EAXvB,CAAP;AAaD,CAhBM","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps } from '@fluentui/react-utilities';\nimport type { TableProps, TableState } from './Table.types';\n\n/**\n * Create the state required to render Table.\n *\n * The returned state can be modified with hooks such as useTableStyles_unstable,\n * before being passed to renderTable_unstable.\n *\n * @param props - props from this instance of Table\n * @param ref - reference to root HTMLElement of Table\n */\nexport const useTable_unstable = (props: TableProps, ref: React.Ref<HTMLElement>): TableState => {\n  const rootComponent = props.as ?? props.noNativeElements ? 'div' : 'table';\n\n  return {\n    components: {\n      root: rootComponent,\n    },\n    root: getNativeElementProps(rootComponent, {\n      ref,\n      role: rootComponent === 'div' ? 'table' : undefined,\n      ...props,\n    }),\n    size: props.size ?? 'medium',\n    noNativeElements: props.noNativeElements ?? false,\n    sortable: props.sortable ?? false,\n  };\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"mappings":"AACA,SAASA,qBAAqB,QAAQ,2BAA2B;AAGjE;;;;;;;;;AASA,OAAO,MAAMC,iBAAiB,GAAG,CAACC,KAAiB,EAAEC,GAA2B,KAAgB;;EAC9F,MAAMC,aAAa,GAAG,YAAK,CAACC,EAAE,mCAAIH,KAAK,CAACI,gBAAgB,IAAG,KAAK,GAAG,OAAO;EAE1E,OAAO;IACLC,UAAU,EAAE;MACVC,IAAI,EAAEJ;KACP;IACDI,IAAI,EAAER,qBAAqB,CAACI,aAAa,EAAE;MACzCD,GAAG;MACHM,IAAI,EAAEL,aAAa,KAAK,KAAK,GAAG,OAAO,GAAGM,SAAS;MACnD,GAAGR;KACJ,CAAC;IACFS,IAAI,EAAE,WAAK,CAACA,IAAI,mCAAI,QAAQ;IAC5BL,gBAAgB,EAAE,WAAK,CAACA,gBAAgB,mCAAI,KAAK;IACjDM,QAAQ,EAAE,WAAK,CAACA,QAAQ,mCAAI;GAC7B;AACH,CAAC","names":["getNativeElementProps","useTable_unstable","props","ref","rootComponent","as","noNativeElements","components","root","role","undefined","size","sortable"],"sourceRoot":"../src/","sources":["packages/react-components/react-table/src/components/Table/useTable.ts"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps } from '@fluentui/react-utilities';\nimport type { TableProps, TableState } from './Table.types';\n\n/**\n * Create the state required to render Table.\n *\n * The returned state can be modified with hooks such as useTableStyles_unstable,\n * before being passed to renderTable_unstable.\n *\n * @param props - props from this instance of Table\n * @param ref - reference to root HTMLElement of Table\n */\nexport const useTable_unstable = (props: TableProps, ref: React.Ref<HTMLElement>): TableState => {\n  const rootComponent = props.as ?? props.noNativeElements ? 'div' : 'table';\n\n  return {\n    components: {\n      root: rootComponent,\n    },\n    root: getNativeElementProps(rootComponent, {\n      ref,\n      role: rootComponent === 'div' ? 'table' : undefined,\n      ...props,\n    }),\n    size: props.size ?? 'medium',\n    noNativeElements: props.noNativeElements ?? false,\n    sortable: props.sortable ?? false,\n  };\n};\n"]}

package/lib/components/Table/useTableContextValues.js.map

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-table/src/components/Table/useTableContextValues.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AAGA,OAAM,SAAU,8BAAV,CAAyC,KAAzC,EAA0D;EAC9D,MAAM;IAAE,IAAF;IAAQ,gBAAR;IAA0B;EAA1B,IAAuC,KAA7C;EAEA,MAAM,YAAY,GAAG,KAAK,CAAC,OAAN,CACnB,OAAO;IACL,gBADK;IAEL,IAFK;IAGL;EAHK,CAAP,CADmB,EAMnB,CAAC,gBAAD,EAAmB,IAAnB,EAAyB,QAAzB,CANmB,CAArB;EASA,OAAO;IACL,KAAK,EAAE;EADF,CAAP;AAGD","sourcesContent":["import * as React from 'react';\nimport { TableContextValues, TableState } from './Table.types';\n\nexport function useTableContextValues_unstable(state: TableState): TableContextValues {\n  const { size, noNativeElements, sortable } = state;\n\n  const tableContext = React.useMemo(\n    () => ({\n      noNativeElements,\n      size,\n      sortable,\n    }),\n    [noNativeElements, size, sortable],\n  );\n\n  return {\n    table: tableContext,\n  };\n}\n"],"sourceRoot":"../src/"}
+{"version":3,"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAG9B,OAAM,SAAUC,8BAA8B,CAACC,KAAiB;EAC9D,MAAM;IAAEC,IAAI;IAAEC,gBAAgB;IAAEC;EAAQ,CAAE,GAAGH,KAAK;EAElD,MAAMI,YAAY,GAAGN,KAAK,CAACO,OAAO,CAChC,OAAO;IACLH,gBAAgB;IAChBD,IAAI;IACJE;GACD,CAAC,EACF,CAACD,gBAAgB,EAAED,IAAI,EAAEE,QAAQ,CAAC,CACnC;EAED,OAAO;IACLG,KAAK,EAAEF;GACR;AACH","names":["React","useTableContextValues_unstable","state","size","noNativeElements","sortable","tableContext","useMemo","table"],"sourceRoot":"../src/","sources":["packages/react-components/react-table/src/components/Table/useTableContextValues.ts"],"sourcesContent":["import * as React from 'react';\nimport { TableContextValues, TableState } from './Table.types';\n\nexport function useTableContextValues_unstable(state: TableState): TableContextValues {\n  const { size, noNativeElements, sortable } = state;\n\n  const tableContext = React.useMemo(\n    () => ({\n      noNativeElements,\n      size,\n      sortable,\n    }),\n    [noNativeElements, size, sortable],\n  );\n\n  return {\n    table: tableContext,\n  };\n}\n"]}

package/lib/components/Table/useTableStyles.js

@@ -4,43 +4,37 @@ export const tableClassName = 'fui-Table';
 export const tableClassNames = {
   root: 'fui-Table'
 };
-
 const useTableLayoutStyles = /*#__PURE__*/__styles({
-  "root": {
-    "mc9l5x": "f1w4nmp0",
-    "ha4doy": "fmrv4ls",
-    "a9b677": "fly5x3f",
-    "B73mfa3": "f14m3nip"
+  root: {
+    mc9l5x: "f1w4nmp0",
+    ha4doy: "fmrv4ls",
+    a9b677: "fly5x3f",
+    B73mfa3: "f14m3nip"
   }
 }, {
-  "d": [".f1w4nmp0{display:table;}", ".fmrv4ls{vertical-align:middle;}", ".fly5x3f{width:100%;}", ".f14m3nip{table-layout:fixed;}"]
+  d: [".f1w4nmp0{display:table;}", ".fmrv4ls{vertical-align:middle;}", ".fly5x3f{width:100%;}", ".f14m3nip{table-layout:fixed;}"]
 });
-
 const useFlexLayoutStyles = /*#__PURE__*/__styles({
-  "root": {
-    "mc9l5x": "ftgm304"
+  root: {
+    mc9l5x: "ftgm304"
   }
 }, {
-  "d": [".ftgm304{display:block;}"]
+  d: [".ftgm304{display:block;}"]
 });
 /**
  * Styles for the root slot
  */
-
-
 const useStyles = /*#__PURE__*/__styles({
-  "root": {
-    "po53p8": "fgkb47j",
-    "De3pzq": "fhovq9v"
+  root: {
+    po53p8: "fgkb47j",
+    De3pzq: "fhovq9v"
   }
 }, {
-  "d": [".fgkb47j{border-collapse:collapse;}", ".fhovq9v{background-color:var(--colorSubtleBackground);}"]
+  d: [".fgkb47j{border-collapse:collapse;}", ".fhovq9v{background-color:var(--colorSubtleBackground);}"]
 });
 /**
  * Apply styling to the Table slots based on the state
  */
-
-
 export const useTableStyles_unstable = state => {
   const styles = useStyles();
   const layoutStyles = {

package/lib/components/Table/useTableStyles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-table/src/components/Table/useTableStyles.ts"],"names":[],"mappings":"AAAA,mBAAqB,YAArB,QAAyC,gBAAzC;AACA,SAAS,MAAT,QAAuB,uBAAvB;AAIA,OAAO,MAAM,cAAc,GAAG,WAAvB;AACP,OAAO,MAAM,eAAe,GAA+B;EACzD,IAAI,EAAE;AADmD,CAApD;;AAIP,MAAM,oBAAoB,gBAAG;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAA7B;;AASA,MAAM,mBAAmB,gBAAG;EAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAA5B;AAMA;;AAEG;;;AACH,MAAM,SAAS,gBAAG;EAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAAlB;AAOA;;AAEG;;;AACH,OAAO,MAAM,uBAAuB,GAAI,KAAD,IAAkC;EACvE,MAAM,MAAM,GAAG,SAAS,EAAxB;EACA,MAAM,YAAY,GAAG;IACnB,KAAK,EAAE,oBAAoB,EADR;IAEnB,IAAI,EAAE,mBAAmB;EAFN,CAArB;EAIA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CACjC,cADiC,EAEjC,MAAM,CAAC,IAF0B,EAGjC,KAAK,CAAC,gBAAN,GAAyB,YAAY,CAAC,IAAb,CAAkB,IAA3C,GAAkD,YAAY,CAAC,KAAb,CAAmB,IAHpC,EAIjC,KAAK,CAAC,IAAN,CAAW,SAJsB,CAAnC;EAOA,OAAO,KAAP;AACD,CAdM","sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { TableSlots, TableState } from './Table.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const tableClassName = 'fui-Table';\nexport const tableClassNames: SlotClassNames<TableSlots> = {\n  root: 'fui-Table',\n};\n\nconst useTableLayoutStyles = makeStyles({\n  root: {\n    display: 'table',\n    verticalAlign: 'middle',\n    width: '100%',\n    tableLayout: 'fixed',\n  },\n});\n\nconst useFlexLayoutStyles = makeStyles({\n  root: {\n    display: 'block',\n  },\n});\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    borderCollapse: 'collapse',\n    backgroundColor: tokens.colorSubtleBackground,\n  },\n});\n\n/**\n * Apply styling to the Table slots based on the state\n */\nexport const useTableStyles_unstable = (state: TableState): TableState => {\n  const styles = useStyles();\n  const layoutStyles = {\n    table: useTableLayoutStyles(),\n    flex: useFlexLayoutStyles(),\n  };\n  state.root.className = mergeClasses(\n    tableClassName,\n    styles.root,\n    state.noNativeElements ? layoutStyles.flex.root : layoutStyles.table.root,\n    state.root.className,\n  );\n\n  return state;\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"mappings":"AAAA,mBAAqBA,YAAY,QAAQ,gBAAgB;AACzD,SAASC,MAAM,QAAQ,uBAAuB;AAI9C,OAAO,MAAMC,cAAc,GAAG,WAAW;AACzC,OAAO,MAAMC,eAAe,GAA+B;EACzDC,IAAI,EAAE;CACP;AAED,MAAMC,oBAAoB,gBAAG;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAO3B;AAEF,MAAMC,mBAAmB,gBAAG;EAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAI1B;AAEF;;;AAGA,MAAMC,SAAS,gBAAG;EAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAKhB;AAEF;;;AAGA,OAAO,MAAMC,uBAAuB,GAAIC,KAAiB,IAAgB;EACvE,MAAMC,MAAM,GAAGH,SAAS,EAAE;EAC1B,MAAMI,YAAY,GAAG;IACnBC,KAAK,EAAEP,oBAAoB,EAAE;IAC7BQ,IAAI,EAAEP,mBAAmB;GAC1B;EACDG,KAAK,CAACL,IAAI,CAACU,SAAS,GAAGd,YAAY,CACjCE,cAAc,EACdQ,MAAM,CAACN,IAAI,EACXK,KAAK,CAACM,gBAAgB,GAAGJ,YAAY,CAACE,IAAI,CAACT,IAAI,GAAGO,YAAY,CAACC,KAAK,CAACR,IAAI,EACzEK,KAAK,CAACL,IAAI,CAACU,SAAS,CACrB;EAED,OAAOL,KAAK;AACd,CAAC","names":["mergeClasses","tokens","tableClassName","tableClassNames","root","useTableLayoutStyles","useFlexLayoutStyles","useStyles","useTableStyles_unstable","state","styles","layoutStyles","table","flex","className","noNativeElements"],"sourceRoot":"../src/","sources":["packages/react-components/react-table/src/components/Table/useTableStyles.ts"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { TableSlots, TableState } from './Table.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const tableClassName = 'fui-Table';\nexport const tableClassNames: SlotClassNames<TableSlots> = {\n  root: 'fui-Table',\n};\n\nconst useTableLayoutStyles = makeStyles({\n  root: {\n    display: 'table',\n    verticalAlign: 'middle',\n    width: '100%',\n    tableLayout: 'fixed',\n  },\n});\n\nconst useFlexLayoutStyles = makeStyles({\n  root: {\n    display: 'block',\n  },\n});\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    borderCollapse: 'collapse',\n    backgroundColor: tokens.colorSubtleBackground,\n  },\n});\n\n/**\n * Apply styling to the Table slots based on the state\n */\nexport const useTableStyles_unstable = (state: TableState): TableState => {\n  const styles = useStyles();\n  const layoutStyles = {\n    table: useTableLayoutStyles(),\n    flex: useFlexLayoutStyles(),\n  };\n  state.root.className = mergeClasses(\n    tableClassName,\n    styles.root,\n    state.noNativeElements ? layoutStyles.flex.root : layoutStyles.table.root,\n    state.root.className,\n  );\n\n  return state;\n};\n"]}

package/lib/components/TableBody/TableBody.js

@@ -3,9 +3,8 @@ import { useTableBody_unstable } from './useTableBody';
 import { renderTableBody_unstable } from './renderTableBody';
 import { useTableBodyStyles_unstable } from './useTableBodyStyles';
 /**
- * TableBody component - TODO: add more docs
+ * TableBody component
  */
-
 export const TableBody = /*#__PURE__*/React.forwardRef((props, ref) => {
   const state = useTableBody_unstable(props, ref);
   useTableBodyStyles_unstable(state);