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

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

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-table/src/components/DataGrid/useDataGrid.ts"],"names":[],"mappings":"AACA,SAAS,uBAAT,QAAwC,yBAAxC;AAEA,SAAS,iBAAT,QAAkC,mBAAlC;AACA,SAAS,QAAT,QAAyB,sBAAzB;AAEA;;;;;;;;AAQG;;AACH,OAAO,MAAM,oBAAoB,GAAG,CAAC,KAAD,EAAuB,GAAvB,KAAqE;EACvG,MAAM;IAAE,KAAF;IAAS,OAAT;IAAkB,SAAS,GAAG;EAA9B,IAAyC,KAA/C;EACA,MAAM,SAAS,GAAG,SAAS,KAAK,MAAhC;EACA,MAAM,eAAe,GAAG,uBAAuB,CAAC;IAAE,IAAI,EAAE;EAAR,CAAD,CAA/C;EACA,MAAM,UAAU,GAAG,QAAQ,CAAC;IAAE,KAAF;IAAS;EAAT,CAAD,EAAqB,EAArB,CAA3B;EACA,MAAM,cAAc,GAAG,iBAAiB,CACtC;IAAE,IAAI,EAAE,MAAR;IAAgB,EAAE,EAAE,KAApB;IAA2B,IAAI,SAAS,IAAI,eAAjB,CAA3B;IAA8D,GAAG;EAAjE,CADsC,EAEtC,GAFsC,CAAxC;EAKA,OAAO,EACL,GAAG,cADE;IAEL,SAFK;IAGL;EAHK,CAAP;AAKD,CAfM","sourcesContent":["import * as React from 'react';\nimport { useArrowNavigationGroup } from '@fluentui/react-tabster';\nimport type { DataGridProps, DataGridState } from './DataGrid.types';\nimport { useTable_unstable } from '../Table/useTable';\nimport { useTable } from '../../hooks/useTable';\n\n/**\n * Create the state required to render DataGrid.\n *\n * The returned state can be modified with hooks such as useDataGridStyles_unstable,\n * before being passed to renderDataGrid_unstable.\n *\n * @param props - props from this instance of DataGrid\n * @param ref - reference to root HTMLElement of DataGrid\n */\nexport const useDataGrid_unstable = (props: DataGridProps, ref: React.Ref<HTMLElement>): DataGridState => {\n  const { items, columns, focusMode = 'none' } = props;\n  const navigable = focusMode !== 'none';\n  const keyboardNavAttr = useArrowNavigationGroup({ axis: 'grid' });\n  const tableState = useTable({ items, columns }, []);\n  const baseTableState = useTable_unstable(\n    { role: 'grid', as: 'div', ...(navigable && keyboardNavAttr), ...props },\n    ref,\n  );\n\n  return {\n    ...baseTableState,\n    focusMode,\n    tableState,\n  };\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["packages/react-components/react-table/src/components/DataGrid/useDataGrid.ts"],"names":[],"mappings":"AACA,SAAS,uBAAT,QAAwC,yBAAxC;AAEA,SAAS,iBAAT,QAAkC,mBAAlC;AACA,SAAS,gBAAT,EAA2B,YAA3B,EAAyC,iBAAzC,QAAkE,aAAlE;AAEA;;;;;;;;AAQG;;AACH,OAAO,MAAM,oBAAoB,GAAG,CAAC,KAAD,EAAuB,GAAvB,KAAqE;EACvG,MAAM;IACJ,KADI;IAEJ,OAFI;IAGJ,SAAS,GAAG,MAHR;IAIJ,aAJI;IAKJ,YALI;IAMJ,iBANI;IAOJ,gBAPI;IAQJ,SARI;IASJ,aATI;IAUJ,oBAVI;IAWJ,eAAe,GAAG,KAXd;IAYJ,mBAAmB,GAAG;EAZlB,IAaF,KAbJ;EAeA,MAAM,SAAS,GAAG,SAAS,KAAK,MAAhC;EACA,MAAM,eAAe,GAAG,uBAAuB,CAAC;IAAE,IAAI,EAAE;EAAR,CAAD,CAA/C;EAEA,MAAM,UAAU,GAAG,gBAAgB,CAAC;IAAE,KAAF;IAAS;EAAT,CAAD,EAAqB,CACtD,YAAY,CAAC;IACX,gBADW;IAEX,SAFW;IAGX;EAHW,CAAD,CAD0C,EAMtD,iBAAiB,CAAC;IAChB,oBADgB;IAEhB,aAFgB;IAGhB,iBAHgB;IAIhB,aAAa,EAAE,aAAa,KAAA,IAAb,IAAA,aAAa,KAAA,KAAA,CAAb,GAAA,aAAA,GAAiB;EAJhB,CAAD,CANqC,CAArB,CAAnC;EAcA,MAAM,cAAc,GAAG,iBAAiB,CACtC;IAAE,IAAI,EAAE,MAAR;IAAgB,EAAE,EAAE,KAApB;IAA2B,gBAAgB,EAAE,IAA7C;IAAmD,IAAI,SAAS,IAAI,eAAjB,CAAnD;IAAsF,GAAG;EAAzF,CADsC,EAEtC,GAFsC,CAAxC;EAKA,OAAO,EACL,GAAG,cADE;IAEL,SAFK;IAGL,UAHK;IAIL,cAAc,EAAE,CAAC,CAAC,aAJb;IAKL,eALK;IAML;EANK,CAAP;AAQD,CA9CM","sourcesContent":["import * as React from 'react';\nimport { useArrowNavigationGroup } from '@fluentui/react-tabster';\nimport type { DataGridProps, DataGridState } from './DataGrid.types';\nimport { useTable_unstable } from '../Table/useTable';\nimport { useTableFeatures, useTableSort, useTableSelection } from '../../hooks';\n\n/**\n * Create the state required to render DataGrid.\n *\n * The returned state can be modified with hooks such as useDataGridStyles_unstable,\n * before being passed to renderDataGrid_unstable.\n *\n * @param props - props from this instance of DataGrid\n * @param ref - reference to root HTMLElement of DataGrid\n */\nexport const useDataGrid_unstable = (props: DataGridProps, ref: React.Ref<HTMLElement>): DataGridState => {\n  const {\n    items,\n    columns,\n    focusMode = 'none',\n    selectionMode,\n    onSortChange,\n    onSelectionChange,\n    defaultSortState,\n    sortState,\n    selectedItems,\n    defaultSelectedItems,\n    subtleSelection = false,\n    selectionAppearance = 'brand',\n  } = props;\n\n  const navigable = focusMode !== 'none';\n  const keyboardNavAttr = useArrowNavigationGroup({ axis: 'grid' });\n\n  const tableState = useTableFeatures({ items, columns }, [\n    useTableSort({\n      defaultSortState,\n      sortState,\n      onSortChange,\n    }),\n    useTableSelection({\n      defaultSelectedItems,\n      selectedItems,\n      onSelectionChange,\n      selectionMode: selectionMode ?? 'multiselect',\n    }),\n  ]);\n\n  const baseTableState = useTable_unstable(\n    { role: 'grid', as: 'div', noNativeElements: true, ...(navigable && keyboardNavAttr), ...props },\n    ref,\n  );\n\n  return {\n    ...baseTableState,\n    focusMode,\n    tableState,\n    selectableRows: !!selectionMode,\n    subtleSelection,\n    selectionAppearance,\n  };\n};\n"],"sourceRoot":"../src/"}

package/lib/components/DataGrid/useDataGridContextValues.js

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

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

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-table/src/components/DataGrid/useDataGridContextValues.ts"],"names":[],"mappings":"AAAA,SAAS,8BAAT,QAA+C,gCAA/C;AAGA,OAAM,SAAU,iCAAV,CAA4C,KAA5C,EAAgE;EACpE,MAAM,kBAAkB,GAAG,8BAA8B,CAAC,KAAD,CAAzD;EACA,OAAO,EACL,GAAG,kBADE;IAEL,QAAQ,EAAE,EACR,GAAG,KAAK,CAAC,UADD;MAER,SAAS,EAAE,KAAK,CAAC;IAFT;EAFL,CAAP;AAOD","sourcesContent":["import { useTableContextValues_unstable } from '../Table/useTableContextValues';\nimport { DataGridContextValues, DataGridState } from './DataGrid.types';\n\nexport function useDataGridContextValues_unstable(state: DataGridState): DataGridContextValues {\n  const tableContextValues = useTableContextValues_unstable(state);\n  return {\n    ...tableContextValues,\n    dataGrid: {\n      ...state.tableState,\n      focusMode: state.focusMode,\n    },\n  };\n}\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["packages/react-components/react-table/src/components/DataGrid/useDataGridContextValues.ts"],"names":[],"mappings":"AAAA,SAAS,8BAAT,QAA+C,gCAA/C;AAGA,OAAM,SAAU,iCAAV,CAA4C,KAA5C,EAAgE;EACpE,MAAM,kBAAkB,GAAG,8BAA8B,CAAC,KAAD,CAAzD;EACA,OAAO,EACL,GAAG,kBADE;IAEL,QAAQ,EAAE,EACR,GAAG,KAAK,CAAC,UADD;MAER,SAAS,EAAE,KAAK,CAAC,SAFT;MAGR,cAAc,EAAE,KAAK,CAAC,cAHd;MAIR,eAAe,EAAE,KAAK,CAAC,eAJf;MAKR,mBAAmB,EAAE,KAAK,CAAC;IALnB;EAFL,CAAP;AAUD","sourcesContent":["import { useTableContextValues_unstable } from '../Table/useTableContextValues';\nimport { DataGridContextValues, DataGridState } from './DataGrid.types';\n\nexport function useDataGridContextValues_unstable(state: DataGridState): DataGridContextValues {\n  const tableContextValues = useTableContextValues_unstable(state);\n  return {\n    ...tableContextValues,\n    dataGrid: {\n      ...state.tableState,\n      focusMode: state.focusMode,\n      selectableRows: state.selectableRows,\n      subtleSelection: state.subtleSelection,\n      selectionAppearance: state.selectionAppearance,\n    },\n  };\n}\n"],"sourceRoot":"../src/"}

package/lib/components/DataGridBody/useDataGridBody.js

@@ -1,5 +1,8 @@
+import * as React from 'react';
 import { useTableBody_unstable } from '../TableBody/useTableBody';
 import { useDataGridContext_unstable } from '../../contexts/dataGridContext';
+import { useTableContext } from '../../contexts/tableContext';
+import { RowIdContextProvider } from '../../contexts/rowIdContext';
 /**
  * Create the state required to render DataGridBody.
  *
@@ -11,12 +14,19 @@ import { useDataGridContext_unstable } from '../../contexts/dataGridContext';
  */
 
 export const useDataGridBody_unstable = (props, ref) => {
+  const {
+    sortable
+  } = useTableContext();
   const getRows = useDataGridContext_unstable(ctx => ctx.getRows);
-  const rows = getRows();
+  const sort = useDataGridContext_unstable(ctx => ctx.sort.sort);
+  const rows = sortable ? sort(getRows()) : getRows();
   const {
     children: renderRow
   } = props;
-  const children = rows.map(row => renderRow(row));
+  const children = rows.map(row => /*#__PURE__*/React.createElement(RowIdContextProvider, {
+    key: row.rowId,
+    value: row.rowId
+  }, renderRow(row)));
   return useTableBody_unstable({ ...props,
     children,
     as: 'div'

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

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-table/src/components/DataGridBody/useDataGridBody.ts"],"names":[],"mappings":"AAEA,SAAS,qBAAT,QAAsC,2BAAtC;AACA,SAAS,2BAAT,QAA4C,gCAA5C;AAEA;;;;;;;;AAQG;;AACH,OAAO,MAAM,wBAAwB,GAAG,CAAC,KAAD,EAA2B,GAA3B,KAA6E;EACnH,MAAM,OAAO,GAAG,2BAA2B,CAAC,GAAG,IAAI,GAAG,CAAC,OAAZ,CAA3C;EACA,MAAM,IAAI,GAAG,OAAO,EAApB;EAEA,MAAM;IAAE,QAAQ,EAAE;EAAZ,IAA0B,KAAhC;EACA,MAAM,QAAQ,GAAG,IAAI,CAAC,GAAL,CAAS,GAAG,IAAI,SAAS,CAAC,GAAD,CAAzB,CAAjB;EACA,OAAO,qBAAqB,CAAC,EAAE,GAAG,KAAL;IAAY,QAAZ;IAAsB,EAAE,EAAE;EAA1B,CAAD,EAAoC,GAApC,CAA5B;AACD,CAPM","sourcesContent":["import * as React from 'react';\nimport type { DataGridBodyProps, DataGridBodyState } from './DataGridBody.types';\nimport { useTableBody_unstable } from '../TableBody/useTableBody';\nimport { useDataGridContext_unstable } from '../../contexts/dataGridContext';\n\n/**\n * Create the state required to render DataGridBody.\n *\n * The returned state can be modified with hooks such as useDataGridBodyStyles_unstable,\n * before being passed to renderDataGridBody_unstable.\n *\n * @param props - props from this instance of DataGridBody\n * @param ref - reference to root HTMLElement of DataGridBody\n */\nexport const useDataGridBody_unstable = (props: DataGridBodyProps, ref: React.Ref<HTMLElement>): DataGridBodyState => {\n  const getRows = useDataGridContext_unstable(ctx => ctx.getRows);\n  const rows = getRows();\n\n  const { children: renderRow } = props;\n  const children = rows.map(row => renderRow(row));\n  return useTableBody_unstable({ ...props, children, as: 'div' }, ref);\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["packages/react-components/react-table/src/components/DataGridBody/useDataGridBody.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AAEA,SAAS,qBAAT,QAAsC,2BAAtC;AACA,SAAS,2BAAT,QAA4C,gCAA5C;AACA,SAAS,eAAT,QAAgC,6BAAhC;AACA,SAAS,oBAAT,QAAqC,6BAArC;AAEA;;;;;;;;AAQG;;AACH,OAAO,MAAM,wBAAwB,GAAG,CAAC,KAAD,EAA2B,GAA3B,KAA6E;EACnH,MAAM;IAAE;EAAF,IAAe,eAAe,EAApC;EACA,MAAM,OAAO,GAAG,2BAA2B,CAAC,GAAG,IAAI,GAAG,CAAC,OAAZ,CAA3C;EACA,MAAM,IAAI,GAAG,2BAA2B,CAAC,GAAG,IAAI,GAAG,CAAC,IAAJ,CAAS,IAAjB,CAAxC;EACA,MAAM,IAAI,GAAG,QAAQ,GAAG,IAAI,CAAC,OAAO,EAAR,CAAP,GAAqB,OAAO,EAAjD;EAEA,MAAM;IAAE,QAAQ,EAAE;EAAZ,IAA0B,KAAhC;EACA,MAAM,QAAQ,GAAG,IAAI,CAAC,GAAL,CAAS,GAAG,iBAC3B,KAAA,CAAA,aAAA,CAAC,oBAAD,EAAqB;IAAC,GAAG,EAAE,GAAG,CAAC,KAAV;IAAiB,KAAK,EAAE,GAAG,CAAC;EAA5B,CAArB,EACG,SAAS,CAAC,GAAD,CADZ,CADe,CAAjB;EAKA,OAAO,qBAAqB,CAAC,EAAE,GAAG,KAAL;IAAY,QAAZ;IAAsB,EAAE,EAAE;EAA1B,CAAD,EAAoC,GAApC,CAA5B;AACD,CAbM","sourcesContent":["import * as React from 'react';\nimport type { DataGridBodyProps, DataGridBodyState } from './DataGridBody.types';\nimport { useTableBody_unstable } from '../TableBody/useTableBody';\nimport { useDataGridContext_unstable } from '../../contexts/dataGridContext';\nimport { useTableContext } from '../../contexts/tableContext';\nimport { RowIdContextProvider } from '../../contexts/rowIdContext';\n\n/**\n * Create the state required to render DataGridBody.\n *\n * The returned state can be modified with hooks such as useDataGridBodyStyles_unstable,\n * before being passed to renderDataGridBody_unstable.\n *\n * @param props - props from this instance of DataGridBody\n * @param ref - reference to root HTMLElement of DataGridBody\n */\nexport const useDataGridBody_unstable = (props: DataGridBodyProps, ref: React.Ref<HTMLElement>): DataGridBodyState => {\n  const { sortable } = useTableContext();\n  const getRows = useDataGridContext_unstable(ctx => ctx.getRows);\n  const sort = useDataGridContext_unstable(ctx => ctx.sort.sort);\n  const rows = sortable ? sort(getRows()) : getRows();\n\n  const { children: renderRow } = props;\n  const children = rows.map(row => (\n    <RowIdContextProvider key={row.rowId} value={row.rowId}>\n      {renderRow(row)}\n    </RowIdContextProvider>\n  ));\n  return useTableBody_unstable({ ...props, children, as: 'div' }, ref);\n};\n"],"sourceRoot":"../src/"}

package/lib/components/DataGridHeaderCell/useDataGridHeaderCell.js

@@ -1,4 +1,8 @@
+import { useEventCallback } from '@fluentui/react-utilities';
 import { useTableHeaderCell_unstable } from '../TableHeaderCell/useTableHeaderCell';
+import { useDataGridContext_unstable } from '../../contexts/dataGridContext';
+import { useColumnIdContext } from '../../contexts/columnIdContext';
+import { useTableContext } from '../../contexts/tableContext';
 /**
  * Create the state required to render DataGridHeaderCell.
  *
@@ -10,8 +14,26 @@ import { useTableHeaderCell_unstable } from '../TableHeaderCell/useTableHeaderCe
  */
 
 export const useDataGridHeaderCell_unstable = (props, ref) => {
-  return useTableHeaderCell_unstable({ ...props,
-    as: 'div'
+  const columnId = useColumnIdContext();
+  const {
+    sortable
+  } = useTableContext();
+  const toggleColumnSort = useDataGridContext_unstable(ctx => ctx.sort.toggleColumnSort);
+  const sortDirection = useDataGridContext_unstable(ctx => sortable ? ctx.sort.getSortDirection(columnId) : undefined);
+  const onClick = useEventCallback(e => {
+    var _a;
+
+    if (sortable) {
+      toggleColumnSort(e, columnId);
+    }
+
+    (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props, e);
+  });
+  return useTableHeaderCell_unstable({
+    sortDirection,
+    as: 'div',
+    ...props,
+    onClick
   }, ref);
 };
 //# sourceMappingURL=useDataGridHeaderCell.js.map

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,"sources":["packages/react-components/react-table/src/components/DataGridHeaderCell/useDataGridHeaderCell.ts"],"names":[],"mappings":"AACA,SAAS,gBAAT,QAAiC,2BAAjC;AAEA,SAAS,2BAAT,QAA4C,uCAA5C;AACA,SAAS,2BAAT,QAA4C,gCAA5C;AACA,SAAS,kBAAT,QAAmC,gCAAnC;AACA,SAAS,eAAT,QAAgC,6BAAhC;AAEA;;;;;;;;AAQG;;AACH,OAAO,MAAM,8BAA8B,GAAG,CAC5C,KAD4C,EAE5C,GAF4C,KAGjB;EAC3B,MAAM,QAAQ,GAAG,kBAAkB,EAAnC;EACA,MAAM;IAAE;EAAF,IAAe,eAAe,EAApC;EACA,MAAM,gBAAgB,GAAG,2BAA2B,CAAC,GAAG,IAAI,GAAG,CAAC,IAAJ,CAAS,gBAAjB,CAApD;EACA,MAAM,aAAa,GAAG,2BAA2B,CAAC,GAAG,IACnD,QAAQ,GAAG,GAAG,CAAC,IAAJ,CAAS,gBAAT,CAA0B,QAA1B,CAAH,GAAyC,SADF,CAAjD;EAGA,MAAM,OAAO,GAAG,gBAAgB,CAAE,CAAD,IAAoD;;;IACnF,IAAI,QAAJ,EAAc;MACZ,gBAAgB,CAAC,CAAD,EAAI,QAAJ,CAAhB;IACD;;IACD,CAAA,EAAA,GAAA,KAAK,CAAC,OAAN,MAAa,IAAb,IAAa,EAAA,KAAA,KAAA,CAAb,GAAa,KAAA,CAAb,GAAa,EAAA,CAAA,IAAA,CAAb,KAAa,EAAG,CAAH,CAAb;EACD,CAL+B,CAAhC;EAOA,OAAO,2BAA2B,CAAC;IAAE,aAAF;IAAiB,EAAE,EAAE,KAArB;IAA4B,GAAG,KAA/B;IAAsC;EAAtC,CAAD,EAAkD,GAAlD,CAAlC;AACD,CAlBM","sourcesContent":["import * as React from 'react';\nimport { useEventCallback } from '@fluentui/react-utilities';\nimport type { DataGridHeaderCellProps, DataGridHeaderCellState } from './DataGridHeaderCell.types';\nimport { useTableHeaderCell_unstable } from '../TableHeaderCell/useTableHeaderCell';\nimport { useDataGridContext_unstable } from '../../contexts/dataGridContext';\nimport { useColumnIdContext } from '../../contexts/columnIdContext';\nimport { useTableContext } from '../../contexts/tableContext';\n\n/**\n * Create the state required to render DataGridHeaderCell.\n *\n * The returned state can be modified with hooks such as useDataGridHeaderCellStyles_unstable,\n * before being passed to renderDataGridHeaderCell_unstable.\n *\n * @param props - props from this instance of DataGridHeaderCell\n * @param ref - reference to root HTMLElement of DataGridHeaderCell\n */\nexport const useDataGridHeaderCell_unstable = (\n  props: DataGridHeaderCellProps,\n  ref: React.Ref<HTMLElement>,\n): DataGridHeaderCellState => {\n  const columnId = useColumnIdContext();\n  const { sortable } = useTableContext();\n  const toggleColumnSort = useDataGridContext_unstable(ctx => ctx.sort.toggleColumnSort);\n  const sortDirection = useDataGridContext_unstable(ctx =>\n    sortable ? ctx.sort.getSortDirection(columnId) : undefined,\n  );\n  const onClick = useEventCallback((e: React.MouseEvent<HTMLTableHeaderCellElement>) => {\n    if (sortable) {\n      toggleColumnSort(e, columnId);\n    }\n    props.onClick?.(e);\n  });\n\n  return useTableHeaderCell_unstable({ sortDirection, as: 'div', ...props, onClick }, ref);\n};\n"],"sourceRoot":"../src/"}

package/lib/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 * as React from 'react';\nimport { ColumnDefinition } from '../../hooks';\nimport { TableRowProps, TableRowSlots, TableRowState } from '../TableRow/TableRow.types';\n\nexport type DataGridRowSlots = TableRowSlots;\n\n// Use any here since we can't know the user types\n// The user is responsible for narrowing the type downstream\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport type CellRenderFunction = (column: ColumnDefinition<any>) => React.ReactNode;\n\n/**\n * DataGridRow Props\n */\nexport type DataGridRowProps = Omit<TableRowProps, 'children'> & {\n  children: CellRenderFunction;\n};\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 { ColumnDefinition } 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\n// Use any here since we can't know the user types\n// The user is responsible for narrowing the type downstream\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport type CellRenderFunction = (column: ColumnDefinition<any>) => React.ReactNode;\n\n/**\n * DataGridRow Props\n */\nexport type DataGridRowProps = Omit<TableRowProps, 'children'> &\n  ComponentProps<DataGridRowSlots> & {\n    children: CellRenderFunction;\n  };\n\n/**\n * State used in rendering DataGridRow\n */\nexport type DataGridRowState = TableRowState & ComponentState<DataGridRowSlots>;\n"]}

package/lib/components/DataGridRow/renderDataGridRow.js

@@ -1,9 +1,16 @@
-import { renderTableRow_unstable } from '../TableRow/renderTableRow';
+import * as React from 'react';
+import { getSlots } from '@fluentui/react-utilities';
 /**
  * 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
+  }), slotProps.root.children);
 };
 //# 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,"sources":["packages/react-components/react-table/src/components/DataGridRow/renderDataGridRow.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AAGA;;AAEG;;AACH,OAAO,MAAM,0BAA0B,GAAI,KAAD,IAA4B;EACpE,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,QAAQ,CAAmB,KAAnB,CAArC;EAEA,oBACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,EACG,KAAK,CAAC,aAAN,iBAAuB,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,aAAP,EAAoB,EAAA,GAAK,SAAS,CAAC;EAAf,CAApB,CAD1B,EAEG,SAAS,CAAC,IAAV,CAAe,QAFlB,CADF;AAMD,CATM","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { DataGridRowState, DataGridRowSlots } from './DataGridRow.types';\n\n/**\n * Render the final JSX of DataGridRow\n */\nexport const renderDataGridRow_unstable = (state: DataGridRowState) => {\n  const { slots, slotProps } = getSlots<DataGridRowSlots>(state);\n\n  return (\n    <slots.root {...slotProps.root}>\n      {slots.selectionCell && <slots.selectionCell {...slotProps.selectionCell} />}\n      {slotProps.root.children}\n    </slots.root>\n  );\n};\n"],"sourceRoot":"../src/"}

package/lib/components/DataGridRow/useDataGridRow.js

@@ -1,5 +1,12 @@
+import * as React from 'react';
 import { useTableRow_unstable } from '../TableRow/useTableRow';
 import { useDataGridContext_unstable } from '../../contexts/dataGridContext';
+import { ColumnIdContextProvider } from '../../contexts/columnIdContext';
+import { DataGridSelectionCell } from '../DataGridSelectionCell/DataGridSelectionCell';
+import { useRowIdContext } from '../../contexts/rowIdContext';
+import { useEventCallback } from '@fluentui/react-utilities';
+import { useIsInTableHeader } from '../../contexts/tableHeaderContext';
+import { resolveShorthand } from '@fluentui/react-utilities';
 /**
  * Create the state required to render DataGridRow.
  *
@@ -11,14 +18,60 @@ import { useDataGridContext_unstable } from '../../contexts/dataGridContext';
  */
 
 export const useDataGridRow_unstable = (props, ref) => {
+  const rowId = useRowIdContext();
+  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 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 cellRenderFunction = props.children;
-  const children = columnDefs.map(columnDef => {
-    return cellRenderFunction(columnDef);
+  const cells = columnDefs.map(columnDef => {
+    return /*#__PURE__*/React.createElement(ColumnIdContextProvider, {
+      value: columnDef.columnId,
+      key: columnDef.columnId
+    }, cellRenderFunction(columnDef));
+  });
+  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 === ' ') {
+      toggleRow(e, rowId);
+    }
+
+    (_a = props.onKeyDown) === null || _a === void 0 ? void 0 : _a.call(props, e);
   });
-  return useTableRow_unstable({ ...props,
-    children,
+  const baseState = useTableRow_unstable({
+    appearance,
+    'aria-selected': selectable ? selected : undefined,
+    ...props,
+    onClick,
+    onKeyDown,
+    children: cells,
     as: 'div'
   }, ref);
+  return { ...baseState,
+    components: { ...baseState.components,
+      selectionCell: DataGridSelectionCell
+    },
+    selectionCell: resolveShorthand(props.selectionCell, {
+      required: selectable
+    })
+  };
 };
 //# 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;AACA,SAAS,2BAAT,QAA4C,gCAA5C;AAEA;;;;;;;;AAQG;;AACH,OAAO,MAAM,uBAAuB,GAAG,CAAC,KAAD,EAA0B,GAA1B,KAA2E;EAChH,MAAM,UAAU,GAAG,2BAA2B,CAAC,GAAG,IAAI,GAAG,CAAC,OAAZ,CAA9C;EAEA,MAAM,kBAAkB,GAAG,KAAK,CAAC,QAAjC;EACA,MAAM,QAAQ,GAAG,UAAU,CAAC,GAAX,CAAe,SAAS,IAAG;IAC1C,OAAO,kBAAkB,CAAC,SAAD,CAAzB;EACD,CAFgB,CAAjB;EAIA,OAAO,oBAAoB,CAAC,EAAE,GAAG,KAAL;IAAY,QAAZ;IAAsB,EAAE,EAAE;EAA1B,CAAD,EAAoC,GAApC,CAA3B;AACD,CATM","sourcesContent":["import * as React from 'react';\nimport type { DataGridRowProps, DataGridRowState } from './DataGridRow.types';\nimport { useTableRow_unstable } from '../TableRow/useTableRow';\nimport { useDataGridContext_unstable } from '../../contexts/dataGridContext';\n\n/**\n * Create the state required to render DataGridRow.\n *\n * The returned state can be modified with hooks such as useDataGridRowStyles_unstable,\n * before being passed to renderDataGridRow_unstable.\n *\n * @param props - props from this instance of DataGridRow\n * @param ref - reference to root HTMLElement of DataGridRow\n */\nexport const useDataGridRow_unstable = (props: DataGridRowProps, ref: React.Ref<HTMLElement>): DataGridRowState => {\n  const columnDefs = useDataGridContext_unstable(ctx => ctx.columns);\n\n  const cellRenderFunction = props.children;\n  const children = columnDefs.map(columnDef => {\n    return cellRenderFunction(columnDef);\n  });\n\n  return useTableRow_unstable({ ...props, children, as: 'div' }, ref);\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["packages/react-components/react-table/src/components/DataGridRow/useDataGridRow.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AAEA,SAAS,oBAAT,QAAqC,yBAArC;AACA,SAAS,2BAAT,QAA4C,gCAA5C;AACA,SAAS,uBAAT,QAAwC,gCAAxC;AACA,SAAS,qBAAT,QAAsC,gDAAtC;AACA,SAAS,eAAT,QAAgC,6BAAhC;AACA,SAAS,gBAAT,QAAiC,2BAAjC;AACA,SAAS,kBAAT,QAAmC,mCAAnC;AACA,SAAS,gBAAT,QAAiC,2BAAjC;AAEA;;;;;;;;AAQG;;AACH,OAAO,MAAM,uBAAuB,GAAG,CAAC,KAAD,EAA0B,GAA1B,KAA2E;EAChH,MAAM,KAAK,GAAG,eAAe,EAA7B;EACA,MAAM,QAAQ,GAAG,kBAAkB,EAAnC;EACA,MAAM,UAAU,GAAG,2BAA2B,CAAC,GAAG,IAAI,GAAG,CAAC,OAAZ,CAA9C;EACA,MAAM,UAAU,GAAG,2BAA2B,CAAC,GAAG,IAAI,GAAG,CAAC,cAAZ,CAA9C;EACA,MAAM,QAAQ,GAAG,2BAA2B,CAAC,GAAG,IAAI,GAAG,CAAC,SAAJ,CAAc,aAAd,CAA4B,KAA5B,CAAR,CAA5C;EACA,MAAM,UAAU,GAAG,2BAA2B,CAAC,GAAG,IAAG;IACnD,IAAI,CAAC,QAAD,IAAa,UAAb,IAA2B,GAAG,CAAC,SAAJ,CAAc,aAAd,CAA4B,KAA5B,CAA/B,EAAmE;MACjE,OAAO,GAAG,CAAC,mBAAX;IACD;;IAED,OAAO,MAAP;EACD,CAN6C,CAA9C;EAOA,MAAM,SAAS,GAAG,2BAA2B,CAAC,GAAG,IAAI,GAAG,CAAC,SAAJ,CAAc,SAAtB,CAA7C;EAEA,MAAM,kBAAkB,GAAG,KAAK,CAAC,QAAjC;EACA,MAAM,KAAK,GAAG,UAAU,CAAC,GAAX,CAAe,SAAS,IAAG;IACvC,oBACE,KAAA,CAAA,aAAA,CAAC,uBAAD,EAAwB;MAAC,KAAK,EAAE,SAAS,CAAC,QAAlB;MAA4B,GAAG,EAAE,SAAS,CAAC;IAA3C,CAAxB,EACG,kBAAkB,CAAC,SAAD,CADrB,CADF;EAKD,CANa,CAAd;EAQA,MAAM,OAAO,GAAG,gBAAgB,CAAE,CAAD,IAA6C;;;IAC5E,IAAI,UAAU,IAAI,CAAC,QAAnB,EAA6B;MAC3B,SAAS,CAAC,CAAD,EAAI,KAAJ,CAAT;IACD;;IAED,CAAA,EAAA,GAAA,KAAK,CAAC,OAAN,MAAa,IAAb,IAAa,EAAA,KAAA,KAAA,CAAb,GAAa,KAAA,CAAb,GAAa,EAAA,CAAA,IAAA,CAAb,KAAa,EAAG,CAAH,CAAb;EACD,CAN+B,CAAhC;EAQA,MAAM,SAAS,GAAG,gBAAgB,CAAE,CAAD,IAAgD;;;IACjF,IAAI,UAAU,IAAI,CAAC,QAAf,IAA2B,CAAC,CAAC,GAAF,KAAU,GAAzC,EAA8C;MAC5C,SAAS,CAAC,CAAD,EAAI,KAAJ,CAAT;IACD;;IAED,CAAA,EAAA,GAAA,KAAK,CAAC,SAAN,MAAe,IAAf,IAAe,EAAA,KAAA,KAAA,CAAf,GAAe,KAAA,CAAf,GAAe,EAAA,CAAA,IAAA,CAAf,KAAe,EAAG,CAAH,CAAf;EACD,CANiC,CAAlC;EAQA,MAAM,SAAS,GAAG,oBAAoB,CACpC;IACE,UADF;IAEE,iBAAiB,UAAU,GAAG,QAAH,GAAc,SAF3C;IAGE,GAAG,KAHL;IAIE,OAJF;IAKE,SALF;IAME,QAAQ,EAAE,KANZ;IAOE,EAAE,EAAE;EAPN,CADoC,EAUpC,GAVoC,CAAtC;EAaA,OAAO,EACL,GAAG,SADE;IAEL,UAAU,EAAE,EACV,GAAG,SAAS,CAAC,UADH;MAEV,aAAa,EAAE;IAFL,CAFP;IAML,aAAa,EAAE,gBAAgB,CAAC,KAAK,CAAC,aAAP,EAAsB;MAAE,QAAQ,EAAE;IAAZ,CAAtB;EAN1B,CAAP;AAQD,CA7DM","sourcesContent":["import * as React from 'react';\nimport type { DataGridRowProps, DataGridRowState } from './DataGridRow.types';\nimport { useTableRow_unstable } from '../TableRow/useTableRow';\nimport { useDataGridContext_unstable } from '../../contexts/dataGridContext';\nimport { ColumnIdContextProvider } from '../../contexts/columnIdContext';\nimport { DataGridSelectionCell } from '../DataGridSelectionCell/DataGridSelectionCell';\nimport { useRowIdContext } from '../../contexts/rowIdContext';\nimport { useEventCallback } from '@fluentui/react-utilities';\nimport { useIsInTableHeader } from '../../contexts/tableHeaderContext';\nimport { resolveShorthand } from '@fluentui/react-utilities';\n\n/**\n * Create the state required to render DataGridRow.\n *\n * The returned state can be modified with hooks such as useDataGridRowStyles_unstable,\n * before being passed to renderDataGridRow_unstable.\n *\n * @param props - props from this instance of DataGridRow\n * @param ref - reference to root HTMLElement of DataGridRow\n */\nexport const useDataGridRow_unstable = (props: DataGridRowProps, ref: React.Ref<HTMLElement>): DataGridRowState => {\n  const rowId = useRowIdContext();\n  const isHeader = useIsInTableHeader();\n  const columnDefs = useDataGridContext_unstable(ctx => ctx.columns);\n  const selectable = useDataGridContext_unstable(ctx => ctx.selectableRows);\n  const selected = useDataGridContext_unstable(ctx => ctx.selection.isRowSelected(rowId));\n  const appearance = useDataGridContext_unstable(ctx => {\n    if (!isHeader && selectable && ctx.selection.isRowSelected(rowId)) {\n      return ctx.selectionAppearance;\n    }\n\n    return 'none';\n  });\n  const toggleRow = useDataGridContext_unstable(ctx => ctx.selection.toggleRow);\n\n  const cellRenderFunction = props.children;\n  const cells = columnDefs.map(columnDef => {\n    return (\n      <ColumnIdContextProvider value={columnDef.columnId} key={columnDef.columnId}>\n        {cellRenderFunction(columnDef)}\n      </ColumnIdContextProvider>\n    );\n  });\n\n  const onClick = useEventCallback((e: React.MouseEvent<HTMLTableRowElement>) => {\n    if (selectable && !isHeader) {\n      toggleRow(e, rowId);\n    }\n\n    props.onClick?.(e);\n  });\n\n  const onKeyDown = useEventCallback((e: React.KeyboardEvent<HTMLTableRowElement>) => {\n    if (selectable && !isHeader && e.key === ' ') {\n      toggleRow(e, rowId);\n    }\n\n    props.onKeyDown?.(e);\n  });\n\n  const baseState = useTableRow_unstable(\n    {\n      appearance,\n      'aria-selected': selectable ? selected : undefined,\n      ...props,\n      onClick,\n      onKeyDown,\n      children: cells,\n      as: 'div',\n    },\n    ref,\n  );\n\n  return {\n    ...baseState,\n    components: {\n      ...baseState.components,\n      selectionCell: DataGridSelectionCell,\n    },\n    selectionCell: resolveShorthand(props.selectionCell, { required: selectable }),\n  };\n};\n"],"sourceRoot":"../src/"}

package/lib/components/DataGridRow/useDataGridRowStyles.js

@@ -1,7 +1,8 @@
 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
@@ -10,6 +11,11 @@ export const dataGridRowClassNames = {
 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,"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,iBAD+D;EAErE,aAAa,EAAE;AAFsD,CAAhE;AAKP;;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;;EACA,IAAI,KAAK,CAAC,aAAV,EAAyB;IACvB,KAAK,CAAC,aAAN,CAAoB,SAApB,GAAgC,YAAY,CAAC,qBAAqB,CAAC,aAAvB,EAAsC,KAAK,CAAC,aAAN,CAAoB,SAA1D,CAA5C;EACD;;EAED,OAAO,KAAP;AACD,CARM","sourcesContent":["import { mergeClasses } from '@griffel/react';\nimport type { DataGridRowSlots, DataGridRowState } from './DataGridRow.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { useTableRowStyles_unstable } from '../TableRow/useTableRowStyles';\n\nexport const dataGridRowClassNames: SlotClassNames<DataGridRowSlots> = {\n  root: 'fui-DataGridRow',\n  selectionCell: 'fui-DataGridRow__selectionCell',\n};\n\n/**\n * Apply styling to the DataGridRow slots based on the state\n */\nexport const useDataGridRowStyles_unstable = (state: DataGridRowState): DataGridRowState => {\n  useTableRowStyles_unstable(state);\n  state.root.className = mergeClasses(dataGridRowClassNames.root, state.root.className);\n  if (state.selectionCell) {\n    state.selectionCell.className = mergeClasses(dataGridRowClassNames.selectionCell, state.selectionCell.className);\n  }\n\n  return state;\n};\n"],"sourceRoot":"../src/"}

package/lib/components/DataGridSelectionCell/useDataGridSelectionCell.js

@@ -1,3 +1,7 @@
+import { useEventCallback } from '@fluentui/react-utilities';
+import { useDataGridContext_unstable } from '../../contexts/dataGridContext';
+import { useRowIdContext } from '../../contexts/rowIdContext';
+import { useIsInTableHeader } from '../../contexts/tableHeaderContext';
 import { useTableSelectionCell_unstable } from '../TableSelectionCell/useTableSelectionCell';
 /**
  * Create the state required to render DataGridSelectionCell.
@@ -10,10 +14,41 @@ import { useTableSelectionCell_unstable } from '../TableSelectionCell/useTableSe
  */
 
 export const useDataGridSelectionCell_unstable = (props, ref) => {
+  const isHeader = useIsInTableHeader();
+  const rowId = useRowIdContext();
+  const multiselect = useDataGridContext_unstable(ctx => ctx.selection.selectionMode === 'multiselect');
+  const subtle = useDataGridContext_unstable(ctx => ctx.subtleSelection);
+  const checked = useDataGridContext_unstable(ctx => {
+    if (isHeader && 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',
-    ...props
+    checked,
+    type,
+    tabIndex: 0,
+    hidden: isHeader && !multiselect,
+    subtle,
+    checkboxIndicator: {
+      tabIndex: -1
+    },
+    ...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;IAAE,EAAE,EAAE,KAAN;IAAa,IAAI,EAAE,UAAnB;IAA+B,GAAG;EAAlC,CAAD,EAA4C,GAA5C,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({ as: 'div', role: 'gridcell', ...props }, ref);\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["packages/react-components/react-table/src/components/DataGridSelectionCell/useDataGridSelectionCell.ts"],"names":[],"mappings":"AACA,SAAS,gBAAT,QAAiC,2BAAjC;AACA,SAAS,2BAAT,QAA4C,gCAA5C;AACA,SAAS,eAAT,QAAgC,6BAAhC;AACA,SAAS,kBAAT,QAAmC,mCAAnC;AACA,SAAS,8BAAT,QAA+C,6CAA/C;AAGA;;;;;;;;AAQG;;AACH,OAAO,MAAM,iCAAiC,GAAG,CAC/C,KAD+C,EAE/C,GAF+C,KAGjB;EAC9B,MAAM,QAAQ,GAAG,kBAAkB,EAAnC;EACA,MAAM,KAAK,GAAG,eAAe,EAA7B;EACA,MAAM,WAAW,GAAG,2BAA2B,CAAC,GAAG,IAAI,GAAG,CAAC,SAAJ,CAAc,aAAd,KAAgC,aAAxC,CAA/C;EACA,MAAM,MAAM,GAAG,2BAA2B,CAAC,GAAG,IAAI,GAAG,CAAC,eAAZ,CAA1C;EACA,MAAM,OAAO,GAAG,2BAA2B,CAAC,GAAG,IAAG;IAChD,IAAI,QAAQ,IAAI,WAAhB,EAA6B;MAC3B,OAAO,GAAG,CAAC,SAAJ,CAAc,eAAd,GAAgC,IAAhC,GAAuC,GAAG,CAAC,SAAJ,CAAc,gBAAd,GAAiC,OAAjC,GAA2C,KAAzF;IACD;;IAED,OAAO,GAAG,CAAC,SAAJ,CAAc,aAAd,CAA4B,KAA5B,CAAP;EACD,CAN0C,CAA3C;EAQA,MAAM,aAAa,GAAG,2BAA2B,CAAC,GAAG,IAAI,GAAG,CAAC,SAAJ,CAAc,aAAtB,CAAjD;EACA,MAAM,IAAI,GAAG,2BAA2B,CAAC,GAAG,IAC1C,GAAG,CAAC,SAAJ,CAAc,aAAd,KAAgC,aAAhC,GAAgD,UAAhD,GAA6D,OADvB,CAAxC;EAIA,MAAM,OAAO,GAAG,gBAAgB,CAAE,CAAD,IAA8C;;;IAC7E,IAAI,QAAJ,EAAc;MACZ,aAAa,CAAC,CAAD,CAAb;IACD;;IAED,CAAA,EAAA,GAAA,KAAK,CAAC,OAAN,MAAa,IAAb,IAAa,EAAA,KAAA,KAAA,CAAb,GAAa,KAAA,CAAb,GAAa,EAAA,CAAA,IAAA,CAAb,KAAa,EAAG,CAAH,CAAb;EACD,CAN+B,CAAhC;EAQA,OAAO,8BAA8B,CACnC;IACE,EAAE,EAAE,KADN;IAEE,IAAI,EAAE,UAFR;IAGE,OAHF;IAIE,IAJF;IAKE,QAAQ,EAAE,CALZ;IAME,MAAM,EAAE,QAAQ,IAAI,CAAC,WANvB;IAOE,MAPF;IAQE,iBAAiB,EAAE;MAAE,QAAQ,EAAE,CAAC;IAAb,CARrB;IASE,GAAG,KATL;IAUE;EAVF,CADmC,EAanC,GAbmC,CAArC;AAeD,CA5CM","sourcesContent":["import * as React from 'react';\nimport { useEventCallback } from '@fluentui/react-utilities';\nimport { useDataGridContext_unstable } from '../../contexts/dataGridContext';\nimport { useRowIdContext } from '../../contexts/rowIdContext';\nimport { useIsInTableHeader } from '../../contexts/tableHeaderContext';\nimport { useTableSelectionCell_unstable } from '../TableSelectionCell/useTableSelectionCell';\nimport type { DataGridSelectionCellProps, DataGridSelectionCellState } from './DataGridSelectionCell.types';\n\n/**\n * Create the state required to render DataGridSelectionCell.\n *\n * The returned state can be modified with hooks such as useDataGridSelectionCellStyles_unstable,\n * before being passed to renderDataGridSelectionCell_unstable.\n *\n * @param props - props from this instance of DataGridSelectionCell\n * @param ref - reference to root HTMLElement of DataGridSelectionCell\n */\nexport const useDataGridSelectionCell_unstable = (\n  props: DataGridSelectionCellProps,\n  ref: React.Ref<HTMLElement>,\n): DataGridSelectionCellState => {\n  const isHeader = useIsInTableHeader();\n  const rowId = useRowIdContext();\n  const multiselect = useDataGridContext_unstable(ctx => ctx.selection.selectionMode === 'multiselect');\n  const subtle = useDataGridContext_unstable(ctx => ctx.subtleSelection);\n  const checked = useDataGridContext_unstable(ctx => {\n    if (isHeader && multiselect) {\n      return ctx.selection.allRowsSelected ? true : ctx.selection.someRowsSelected ? 'mixed' : false;\n    }\n\n    return ctx.selection.isRowSelected(rowId);\n  });\n\n  const toggleAllRows = useDataGridContext_unstable(ctx => ctx.selection.toggleAllRows);\n  const type = useDataGridContext_unstable(ctx =>\n    ctx.selection.selectionMode === 'multiselect' ? 'checkbox' : 'radio',\n  );\n\n  const onClick = useEventCallback((e: React.MouseEvent<HTMLTableCellElement>) => {\n    if (isHeader) {\n      toggleAllRows(e);\n    }\n\n    props.onClick?.(e);\n  });\n\n  return useTableSelectionCell_unstable(\n    {\n      as: 'div',\n      role: 'gridcell',\n      checked,\n      type,\n      tabIndex: 0,\n      hidden: isHeader && !multiselect,\n      subtle,\n      checkboxIndicator: { tabIndex: -1 },\n      ...props,\n      onClick,\n    },\n    ref,\n  );\n};\n"],"sourceRoot":"../src/"}

package/lib/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 intead 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/TableCell/TableCell.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableCell.types.js","sourceRoot":"../src/","sources":["packages/react-components/react-table/src/components/TableCell/TableCell.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { TableContextValue } from '../Table/Table.types';\n\nexport type TableCellSlots = {\n  root: Slot<'td', 'div'>;\n};\n\n/**\n * TableCell Props\n */\nexport type TableCellProps = ComponentProps<TableCellSlots> & {};\n\n/**\n * State used in rendering TableCell\n */\nexport type TableCellState = ComponentState<TableCellSlots> & Pick<TableContextValue, 'noNativeElements'>;\n"]}
+{"version":3,"file":"TableCell.types.js","sourceRoot":"../src/","sources":["packages/react-components/react-table/src/components/TableCell/TableCell.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { TableContextValue } from '../Table/Table.types';\n\nexport type TableCellSlots = {\n  root: Slot<'td', 'div'>;\n};\n\n/**\n * TableCell Props\n */\nexport type TableCellProps = ComponentProps<TableCellSlots> & {};\n\n/**\n * State used in rendering TableCell\n */\nexport type TableCellState = ComponentState<TableCellSlots> & Pick<TableContextValue, 'noNativeElements' | 'size'>;\n"]}

package/lib/components/TableCell/useTableCell.js

@@ -14,7 +14,8 @@ export const useTableCell_unstable = (props, ref) => {
   var _a;
 
   const {
-    noNativeElements
+    noNativeElements,
+    size
   } = useTableContext();
   const rootComponent = ((_a = props.as) !== null && _a !== void 0 ? _a : noNativeElements) ? 'div' : 'td';
   return {
@@ -26,7 +27,8 @@ export const useTableCell_unstable = (props, ref) => {
       role: rootComponent === 'div' ? 'cell' : undefined,
       ...props
     }),
-    noNativeElements
+    noNativeElements,
+    size
   };
 };
 //# sourceMappingURL=useTableCell.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-table/src/components/TableCell/useTableCell.ts"],"names":[],"mappings":"AACA,SAAS,qBAAT,QAAsC,2BAAtC;AAEA,SAAS,eAAT,QAAgC,6BAAhC;AAEA;;;;;;;;AAQG;;AACH,OAAO,MAAM,qBAAqB,GAAG,CAAC,KAAD,EAAwB,GAAxB,KAAuE;;;EAC1G,MAAM;IAAE;EAAF,IAAuB,eAAe,EAA5C;EAEA,MAAM,aAAa,GAAG,CAAA,CAAA,EAAA,GAAA,KAAK,CAAC,EAAN,MAAQ,IAAR,IAAQ,EAAA,KAAA,KAAA,CAAR,GAAQ,EAAR,GAAY,gBAAZ,IAA+B,KAA/B,GAAuC,IAA7D;EAEA,OAAO;IACL,UAAU,EAAE;MACV,IAAI,EAAE;IADI,CADP;IAIL,IAAI,EAAE,qBAAqB,CAAC,aAAD,EAAgB;MACzC,GADyC;MAEzC,IAAI,EAAE,aAAa,KAAK,KAAlB,GAA0B,MAA1B,GAAmC,SAFA;MAGzC,GAAG;IAHsC,CAAhB,CAJtB;IASL;EATK,CAAP;AAWD,CAhBM","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps } from '@fluentui/react-utilities';\nimport type { TableCellProps, TableCellState } from './TableCell.types';\nimport { useTableContext } from '../../contexts/tableContext';\n\n/**\n * Create the state required to render TableCell.\n *\n * The returned state can be modified with hooks such as useTableCellStyles_unstable,\n * before being passed to renderTableCell_unstable.\n *\n * @param props - props from this instance of TableCell\n * @param ref - reference to root HTMLElement of TableCell\n */\nexport const useTableCell_unstable = (props: TableCellProps, ref: React.Ref<HTMLElement>): TableCellState => {\n  const { noNativeElements } = useTableContext();\n\n  const rootComponent = props.as ?? noNativeElements ? 'div' : 'td';\n\n  return {\n    components: {\n      root: rootComponent,\n    },\n    root: getNativeElementProps(rootComponent, {\n      ref,\n      role: rootComponent === 'div' ? 'cell' : undefined,\n      ...props,\n    }),\n    noNativeElements,\n  };\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["packages/react-components/react-table/src/components/TableCell/useTableCell.ts"],"names":[],"mappings":"AACA,SAAS,qBAAT,QAAsC,2BAAtC;AAEA,SAAS,eAAT,QAAgC,6BAAhC;AAEA;;;;;;;;AAQG;;AACH,OAAO,MAAM,qBAAqB,GAAG,CAAC,KAAD,EAAwB,GAAxB,KAAuE;;;EAC1G,MAAM;IAAE,gBAAF;IAAoB;EAApB,IAA6B,eAAe,EAAlD;EAEA,MAAM,aAAa,GAAG,CAAA,CAAA,EAAA,GAAA,KAAK,CAAC,EAAN,MAAQ,IAAR,IAAQ,EAAA,KAAA,KAAA,CAAR,GAAQ,EAAR,GAAY,gBAAZ,IAA+B,KAA/B,GAAuC,IAA7D;EAEA,OAAO;IACL,UAAU,EAAE;MACV,IAAI,EAAE;IADI,CADP;IAIL,IAAI,EAAE,qBAAqB,CAAC,aAAD,EAAgB;MACzC,GADyC;MAEzC,IAAI,EAAE,aAAa,KAAK,KAAlB,GAA0B,MAA1B,GAAmC,SAFA;MAGzC,GAAG;IAHsC,CAAhB,CAJtB;IASL,gBATK;IAUL;EAVK,CAAP;AAYD,CAjBM","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps } from '@fluentui/react-utilities';\nimport type { TableCellProps, TableCellState } from './TableCell.types';\nimport { useTableContext } from '../../contexts/tableContext';\n\n/**\n * Create the state required to render TableCell.\n *\n * The returned state can be modified with hooks such as useTableCellStyles_unstable,\n * before being passed to renderTableCell_unstable.\n *\n * @param props - props from this instance of TableCell\n * @param ref - reference to root HTMLElement of TableCell\n */\nexport const useTableCell_unstable = (props: TableCellProps, ref: React.Ref<HTMLElement>): TableCellState => {\n  const { noNativeElements, size } = useTableContext();\n\n  const rootComponent = props.as ?? noNativeElements ? 'div' : 'td';\n\n  return {\n    components: {\n      root: rootComponent,\n    },\n    root: getNativeElementProps(rootComponent, {\n      ref,\n      role: rootComponent === 'div' ? 'cell' : undefined,\n      ...props,\n    }),\n    noNativeElements,\n    size,\n  };\n};\n"],"sourceRoot":"../src/"}

package/lib/components/TableCell/useTableCellStyles.js

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

package/lib/components/TableCell/useTableCellStyles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-table/src/components/TableCell/useTableCellStyles.ts"],"names":[],"mappings":"AAAA,mBAAqB,YAArB,EAAmC,UAAnC,QAAqD,gBAArD;AACA,SAAS,MAAT,QAAuB,uBAAvB;AAIA,OAAO,MAAM,kBAAkB,GAAG,eAA3B;AACP,OAAO,MAAM,mBAAmB,GAAmC;EACjE,IAAI,EAAE;AAD2D,CAA5D;;AAIP,MAAM,oBAAoB,gBAAG;EAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAA7B;;AAOA,MAAM,mBAAmB,gBAAG;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAA5B;AASA;;AAEG;;;AACH,MAAM,SAAS,gBAAG;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAAlB;AAOA;;AAEG;;;AACH,OAAO,MAAM,2BAA2B,GAAI,KAAD,IAA0C;EACnF,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,mBAAmB,CAAC,IADa,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;EAMA,OAAO,KAAP;AACD,CAbM","sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { TableCellSlots, TableCellState } from './TableCell.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const tableCellClassName = 'fui-TableCell';\nexport const tableCellClassNames: SlotClassNames<TableCellSlots> = {\n  root: tableCellClassName,\n};\n\nconst useTableLayoutStyles = makeStyles({\n  root: {\n    display: 'table-cell',\n    verticalAlign: 'middle',\n  },\n});\n\nconst useFlexLayoutStyles = makeStyles({\n  root: {\n    display: 'flex',\n    minWidth: '0px',\n    alignItems: 'center',\n    ...shorthands.flex(1, 1, '0px'),\n  },\n});\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    position: 'relative',\n    ...shorthands.padding('0px', tokens.spacingHorizontalS),\n  },\n});\n\n/**\n * Apply styling to the TableCell slots based on the state\n */\nexport const useTableCellStyles_unstable = (state: TableCellState): TableCellState => {\n  const styles = useStyles();\n  const layoutStyles = {\n    table: useTableLayoutStyles(),\n    flex: useFlexLayoutStyles(),\n  };\n  state.root.className = mergeClasses(\n    tableCellClassNames.root,\n    styles.root,\n    state.noNativeElements ? layoutStyles.flex.root : layoutStyles.table.root,\n    state.root.className,\n  );\n  return state;\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["packages/react-components/react-table/src/components/TableCell/useTableCellStyles.ts"],"names":[],"mappings":"AAAA,mBAAqB,YAArB,EAAmC,UAAnC,QAAqD,gBAArD;AACA,SAAS,MAAT,QAAuB,uBAAvB;AACA,SAAS,+BAAT,QAAgD,yBAAhD;AAIA,OAAO,MAAM,kBAAkB,GAAG,eAA3B;AACP,OAAO,MAAM,mBAAmB,GAAmC;EACjE,IAAI,EAAE;AAD2D,CAA5D;;AAIP,MAAM,oBAAoB,gBAAG;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAA7B;;AAmBA,MAAM,mBAAmB,gBAAG;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAA5B;AAqBA;;AAEG;;;AACH,MAAM,SAAS,gBAAG;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAAlB;AAeA;;AAEG;;;AACH,OAAO,MAAM,2BAA2B,GAAI,KAAD,IAA0C;EACnF,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,mBAAmB,CAAC,IADa,EAEjC,MAAM,CAAC,IAF0B,EAGjC,KAAK,CAAC,gBAAN,GAAyB,YAAY,CAAC,IAAb,CAAkB,IAA3C,GAAkD,YAAY,CAAC,KAAb,CAAmB,IAHpC,EAIjC,KAAK,CAAC,gBAAN,GAAyB,YAAY,CAAC,IAAb,CAAkB,KAAK,CAAC,IAAxB,CAAzB,GAAyD,YAAY,CAAC,KAAb,CAAmB,KAAK,CAAC,IAAzB,CAJxB,EAKjC,KAAK,CAAC,IAAN,CAAW,SALsB,CAAnC;EAOA,OAAO,KAAP;AACD,CAdM","sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport type { TableCellSlots, TableCellState } from './TableCell.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const tableCellClassName = 'fui-TableCell';\nexport const tableCellClassNames: SlotClassNames<TableCellSlots> = {\n  root: tableCellClassName,\n};\n\nconst useTableLayoutStyles = makeStyles({\n  root: {\n    display: 'table-cell',\n    verticalAlign: 'middle',\n  },\n\n  medium: {\n    height: '44px',\n  },\n\n  small: {\n    height: '34px',\n  },\n\n  'extra-small': {\n    height: '24px',\n  },\n});\n\nconst useFlexLayoutStyles = makeStyles({\n  root: {\n    display: 'flex',\n    minWidth: '0px',\n    alignItems: 'center',\n    ...shorthands.flex(1, 1, '0px'),\n  },\n\n  medium: {\n    minHeight: '44px',\n  },\n\n  small: {\n    minHeight: '34px',\n  },\n\n  'extra-small': {\n    minHeight: '24px',\n  },\n});\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    position: 'relative',\n    ...shorthands.padding('0px', tokens.spacingHorizontalS),\n\n    ...createCustomFocusIndicatorStyle(\n      {\n        ...shorthands.outline('2px', 'solid', tokens.colorStrokeFocus2),\n        ...shorthands.borderRadius(tokens.borderRadiusMedium),\n      },\n      { selector: 'focus', enableOutline: true },\n    ),\n  },\n});\n\n/**\n * Apply styling to the TableCell slots based on the state\n */\nexport const useTableCellStyles_unstable = (state: TableCellState): TableCellState => {\n  const styles = useStyles();\n  const layoutStyles = {\n    table: useTableLayoutStyles(),\n    flex: useFlexLayoutStyles(),\n  };\n  state.root.className = mergeClasses(\n    tableCellClassNames.root,\n    styles.root,\n    state.noNativeElements ? layoutStyles.flex.root : layoutStyles.table.root,\n    state.noNativeElements ? layoutStyles.flex[state.size] : layoutStyles.table[state.size],\n    state.root.className,\n  );\n  return state;\n};\n"],"sourceRoot":"../src/"}

package/lib/components/TableCellActions/useTableCellActions.js

@@ -1,5 +1,4 @@
-import { getNativeElementProps, useMergedRefs } from '@fluentui/react-utilities';
-import { useFocusWithin } from '@fluentui/react-tabster';
+import { getNativeElementProps } from '@fluentui/react-utilities';
 /**
  * Create the state required to render TableCellActions.
  *
@@ -18,7 +17,7 @@ export const useTableCellActions_unstable = (props, ref) => {
       root: 'div'
     },
     root: getNativeElementProps('div', {
-      ref: useMergedRefs(ref, useFocusWithin()),
+      ref,
       ...props
     }),
     visible: (_a = props.visible) !== null && _a !== void 0 ? _a : false

package/lib/components/TableCellActions/useTableCellActions.js.map

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-table/src/components/TableCellActions/useTableCellActions.ts"],"names":[],"mappings":"AACA,SAAS,qBAAT,EAAgC,aAAhC,QAAqD,2BAArD;AACA,SAAS,cAAT,QAA+B,yBAA/B;AAGA;;;;;;;;AAQG;;AACH,OAAO,MAAM,4BAA4B,GAAG,CAC1C,KAD0C,EAE1C,GAF0C,KAGjB;;;EACzB,OAAO;IACL,UAAU,EAAE;MACV,IAAI,EAAE;IADI,CADP;IAIL,IAAI,EAAE,qBAAqB,CAAC,KAAD,EAAQ;MACjC,GAAG,EAAE,aAAa,CAAC,GAAD,EAAM,cAAc,EAApB,CADe;MAEjC,GAAG;IAF8B,CAAR,CAJtB;IAQL,OAAO,EAAE,CAAA,EAAA,GAAA,KAAK,CAAC,OAAN,MAAa,IAAb,IAAa,EAAA,KAAA,KAAA,CAAb,GAAa,EAAb,GAAiB;EARrB,CAAP;AAUD,CAdM","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, useMergedRefs } from '@fluentui/react-utilities';\nimport { useFocusWithin } from '@fluentui/react-tabster';\nimport type { TableCellActionsProps, TableCellActionsState } from './TableCellActions.types';\n\n/**\n * Create the state required to render TableCellActions.\n *\n * The returned state can be modified with hooks such as useTableCellActionsStyles_unstable,\n * before being passed to renderTableCellActions_unstable.\n *\n * @param props - props from this instance of TableCellActions\n * @param ref - reference to root HTMLElement of TableCellActions\n */\nexport const useTableCellActions_unstable = (\n  props: TableCellActionsProps,\n  ref: React.Ref<HTMLElement>,\n): TableCellActionsState => {\n  return {\n    components: {\n      root: 'div',\n    },\n    root: getNativeElementProps('div', {\n      ref: useMergedRefs(ref, useFocusWithin()),\n      ...props,\n    }),\n    visible: props.visible ?? false,\n  };\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["packages/react-components/react-table/src/components/TableCellActions/useTableCellActions.ts"],"names":[],"mappings":"AACA,SAAS,qBAAT,QAAsC,2BAAtC;AAGA;;;;;;;;AAQG;;AACH,OAAO,MAAM,4BAA4B,GAAG,CAC1C,KAD0C,EAE1C,GAF0C,KAGjB;;;EACzB,OAAO;IACL,UAAU,EAAE;MACV,IAAI,EAAE;IADI,CADP;IAIL,IAAI,EAAE,qBAAqB,CAAC,KAAD,EAAQ;MACjC,GADiC;MAEjC,GAAG;IAF8B,CAAR,CAJtB;IAQL,OAAO,EAAE,CAAA,EAAA,GAAA,KAAK,CAAC,OAAN,MAAa,IAAb,IAAa,EAAA,KAAA,KAAA,CAAb,GAAa,EAAb,GAAiB;EARrB,CAAP;AAUD,CAdM","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps } from '@fluentui/react-utilities';\nimport type { TableCellActionsProps, TableCellActionsState } from './TableCellActions.types';\n\n/**\n * Create the state required to render TableCellActions.\n *\n * The returned state can be modified with hooks such as useTableCellActionsStyles_unstable,\n * before being passed to renderTableCellActions_unstable.\n *\n * @param props - props from this instance of TableCellActions\n * @param ref - reference to root HTMLElement of TableCellActions\n */\nexport const useTableCellActions_unstable = (\n  props: TableCellActionsProps,\n  ref: React.Ref<HTMLElement>,\n): TableCellActionsState => {\n  return {\n    components: {\n      root: 'div',\n    },\n    root: getNativeElementProps('div', {\n      ref,\n      ...props,\n    }),\n    visible: props.visible ?? false,\n  };\n};\n"],"sourceRoot":"../src/"}

package/lib/components/TableCellActions/useTableCellActionsStyles.js

@@ -1,5 +1,4 @@
 import { __styles, mergeClasses } from '@griffel/react';
-import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';
 export const tableCellActionsClassNames = {
   root: 'fui-TableCellActions'
 };
@@ -14,18 +13,13 @@ const useStyles = /*#__PURE__*/__styles({
     "Bhzewxz": "f1i1t8d1",
     "Bz10aip": "f188r07x",
     "abs64n": "fk73vx1",
-    "Frg6f3": ["fcgxt0o", "f1ujusj6"],
-    "Brovlpu": "ftqa4ok",
-    "B486eqv": "f2hkw1w",
-    "B113ap8": "f1upwfw9"
+    "Frg6f3": ["fcgxt0o", "f1ujusj6"]
   },
   "visible": {
     "abs64n": "f5p0z4x"
   }
 }, {
-  "d": [".f1euv43f{position:absolute;}", ".f10k790i{right:0px;}", ".f1xynx9j{left:0px;}", ".f1i1t8d1{top:50%;}", ".f188r07x{-webkit-transform:translateY(-50%);-moz-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);}", ".fk73vx1{opacity:0;}", ".fcgxt0o{margin-left:auto;}", ".f1ujusj6{margin-right:auto;}", ".f1upwfw9[data-fui-focus-visible]:focus-within{opacity:1;}", ".f5p0z4x{opacity:1;}"],
-  "f": [".ftqa4ok:focus{outline-style:none;}"],
-  "i": [".f2hkw1w:focus-visible{outline-style:none;}"]
+  "d": [".f1euv43f{position:absolute;}", ".f10k790i{right:0px;}", ".f1xynx9j{left:0px;}", ".f1i1t8d1{top:50%;}", ".f188r07x{-webkit-transform:translateY(-50%);-moz-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);}", ".fk73vx1{opacity:0;}", ".fcgxt0o{margin-left:auto;}", ".f1ujusj6{margin-right:auto;}", ".f5p0z4x{opacity:1;}"]
 });
 /**
  * Apply styling to the TableCellActions slots based on the state

package/lib/components/TableCellActions/useTableCellActionsStyles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-table/src/components/TableCellActions/useTableCellActionsStyles.ts"],"names":[],"mappings":"AAAA,mBAAqB,YAArB,QAAyC,gBAAzC;AAGA,SAAS,+BAAT,QAAgD,yBAAhD;AAEA,OAAO,MAAM,0BAA0B,GAA0C;EAC/E,IAAI,EAAE;AADyE,CAA1E;AAIP;;AAEG;;AACH,MAAM,SAAS,gBAAG;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;AAAA;EAAA;EAAA;EAAA;AAAA,EAAlB;AAsBA;;AAEG;;;AACH,OAAO,MAAM,kCAAkC,GAAI,KAAD,IAAwD;EACxG,MAAM,MAAM,GAAG,SAAS,EAAxB;EACA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CACjC,0BAA0B,CAAC,IADM,EAEjC,MAAM,CAAC,IAF0B,EAGjC,KAAK,CAAC,OAAN,IAAiB,MAAM,CAAC,OAHS,EAIjC,KAAK,CAAC,IAAN,CAAW,SAJsB,CAAnC;EAOA,OAAO,KAAP;AACD,CAVM","sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport type { TableCellActionsSlots, TableCellActionsState } from './TableCellActions.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\n\nexport const tableCellActionsClassNames: SlotClassNames<TableCellActionsSlots> = {\n  root: 'fui-TableCellActions',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    position: 'absolute',\n    right: '0px',\n    top: '50%',\n    transform: 'translateY(-50%)',\n    opacity: 0,\n    marginLeft: 'auto',\n\n    ...createCustomFocusIndicatorStyle(\n      {\n        opacity: 1,\n      },\n      { selector: 'focus-within' },\n    ),\n  },\n\n  visible: {\n    opacity: 1,\n  },\n});\n\n/**\n * Apply styling to the TableCellActions slots based on the state\n */\nexport const useTableCellActionsStyles_unstable = (state: TableCellActionsState): TableCellActionsState => {\n  const styles = useStyles();\n  state.root.className = mergeClasses(\n    tableCellActionsClassNames.root,\n    styles.root,\n    state.visible && styles.visible,\n    state.root.className,\n  );\n\n  return state;\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["packages/react-components/react-table/src/components/TableCellActions/useTableCellActionsStyles.ts"],"names":[],"mappings":"AAAA,mBAAqB,YAArB,QAAyC,gBAAzC;AAIA,OAAO,MAAM,0BAA0B,GAA0C;EAC/E,IAAI,EAAE;AADyE,CAA1E;AAIP;;AAEG;;AACH,MAAM,SAAS,gBAAG;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAAlB;AAeA;;AAEG;;;AACH,OAAO,MAAM,kCAAkC,GAAI,KAAD,IAAwD;EACxG,MAAM,MAAM,GAAG,SAAS,EAAxB;EACA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CACjC,0BAA0B,CAAC,IADM,EAEjC,MAAM,CAAC,IAF0B,EAGjC,KAAK,CAAC,OAAN,IAAiB,MAAM,CAAC,OAHS,EAIjC,KAAK,CAAC,IAAN,CAAW,SAJsB,CAAnC;EAOA,OAAO,KAAP;AACD,CAVM","sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport type { TableCellActionsSlots, TableCellActionsState } from './TableCellActions.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const tableCellActionsClassNames: SlotClassNames<TableCellActionsSlots> = {\n  root: 'fui-TableCellActions',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    position: 'absolute',\n    right: '0px',\n    top: '50%',\n    transform: 'translateY(-50%)',\n    opacity: 0,\n    marginLeft: 'auto',\n  },\n\n  visible: {\n    opacity: 1,\n  },\n});\n\n/**\n * Apply styling to the TableCellActions slots based on the state\n */\nexport const useTableCellActionsStyles_unstable = (state: TableCellActionsState): TableCellActionsState => {\n  const styles = useStyles();\n  state.root.className = mergeClasses(\n    tableCellActionsClassNames.root,\n    styles.root,\n    state.visible && styles.visible,\n    state.root.className,\n  );\n\n  return state;\n};\n"],"sourceRoot":"../src/"}

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

@@ -1 +1 @@
-{"version":3,"file":"TableCellLayout.types.js","sourceRoot":"../src/","sources":["packages/react-components/react-table/src/components/TableCellLayout/TableCellLayout.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { AvatarSizes } from '@fluentui/react-avatar';\n\nexport type TableCellLayoutContextValues = {\n  avatar: {\n    size?: AvatarSizes;\n  };\n};\n\nexport type TableCellLayoutSlots = {\n  root: Slot<'div'>;\n\n  /**\n   * Slot for an icon or other visual element\n   */\n  media: Slot<'span'>;\n\n  /**\n   * Main text for the table cell. Children of the root slot are automatically rendered here\n   */\n  main: Slot<'span'>;\n\n  /**\n   * Secondary text that describes or complements the main text\n   */\n  description: Slot<'span'>;\n\n  /**\n   * A layout wrapper for the main and description slots\n   */\n  wrapper: Slot<'div'>;\n};\n\n/**\n * TableCellLayout Props\n */\nexport type TableCellLayoutProps = ComponentProps<Partial<TableCellLayoutSlots>> & {\n  appearance?: 'primary';\n};\n\n/**\n * State used in rendering TableCellLayout\n */\nexport type TableCellLayoutState = ComponentState<TableCellLayoutSlots> &\n  Pick<TableCellLayoutProps, 'appearance'> & { avatarSize: AvatarSizes | undefined };\n"]}
+{"version":3,"file":"TableCellLayout.types.js","sourceRoot":"../src/","sources":["packages/react-components/react-table/src/components/TableCellLayout/TableCellLayout.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { AvatarSizes } from '@fluentui/react-avatar';\nimport { TableContextValue } from '../Table/Table.types';\n\nexport type TableCellLayoutContextValues = {\n  avatar: {\n    size?: AvatarSizes;\n  };\n};\n\nexport type TableCellLayoutSlots = {\n  root: Slot<'div'>;\n\n  /**\n   * Slot for an icon or other visual element\n   */\n  media: Slot<'span'>;\n\n  /**\n   * Main text for the table cell. Children of the root slot are automatically rendered here\n   */\n  main: Slot<'span'>;\n\n  /**\n   * Secondary text that describes or complements the main text\n   */\n  description: Slot<'span'>;\n\n  /**\n   * A layout wrapper for the main and description slots\n   */\n  wrapper: Slot<'div'>;\n};\n\n/**\n * TableCellLayout Props\n */\nexport type TableCellLayoutProps = ComponentProps<Partial<TableCellLayoutSlots>> & {\n  /**\n   * Renders design variants of the table cell\n   * @default undefined\n   */\n  appearance?: 'primary';\n};\n\n/**\n * State used in rendering TableCellLayout\n */\nexport type TableCellLayoutState = ComponentState<TableCellLayoutSlots> &\n  Pick<TableCellLayoutProps, 'appearance'> & { avatarSize: AvatarSizes | undefined } & Pick<TableContextValue, 'size'>;\n"]}