@fluentui/react-table 9.0.0-alpha.8 → 9.0.0-rc.1

package/lib-commonjs/components/DataGridHeaderCell/useDataGridHeaderCell.js

@@ -0,0 +1,44 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useDataGridHeaderCell_unstable = void 0;
+const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
+const useTableHeaderCell_1 = /*#__PURE__*/require("../TableHeaderCell/useTableHeaderCell");
+const dataGridContext_1 = /*#__PURE__*/require("../../contexts/dataGridContext");
+const columnIdContext_1 = /*#__PURE__*/require("../../contexts/columnIdContext");
+const tableContext_1 = /*#__PURE__*/require("../../contexts/tableContext");
+/**
+ * Create the state required to render DataGridHeaderCell.
+ *
+ * The returned state can be modified with hooks such as useDataGridHeaderCellStyles_unstable,
+ * before being passed to renderDataGridHeaderCell_unstable.
+ *
+ * @param props - props from this instance of DataGridHeaderCell
+ * @param ref - reference to root HTMLElement of DataGridHeaderCell
+ */
+const useDataGridHeaderCell_unstable = (props, ref) => {
+  const columnId = columnIdContext_1.useColumnIdContext();
+  const {
+    sortable
+  } = tableContext_1.useTableContext();
+  const toggleColumnSort = dataGridContext_1.useDataGridContext_unstable(ctx => ctx.sort.toggleColumnSort);
+  const sortDirection = dataGridContext_1.useDataGridContext_unstable(ctx => sortable ? ctx.sort.getSortDirection(columnId) : undefined);
+  const onClick = react_utilities_1.useEventCallback(e => {
+    var _a;
+    if (sortable) {
+      toggleColumnSort(e, columnId);
+    }
+    (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props, e);
+  });
+  return useTableHeaderCell_1.useTableHeaderCell_unstable({
+    sortDirection,
+    as: 'div',
+    tabIndex: sortable ? undefined : 0,
+    ...props,
+    onClick
+  }, ref);
+};
+exports.useDataGridHeaderCell_unstable = useDataGridHeaderCell_unstable;
+//# sourceMappingURL=useDataGridHeaderCell.js.map

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

@@ -0,0 +1 @@
+{"version":3,"mappings":";;;;;;AACA;AAEA;AACA;AACA;AACA;AAEA;;;;;;;;;AASO,MAAMA,8BAA8B,GAAG,CAC5CC,KAA8B,EAC9BC,GAA2B,KACA;EAC3B,MAAMC,QAAQ,GAAGC,oCAAkB,EAAE;EACrC,MAAM;IAAEC;EAAQ,CAAE,GAAGC,8BAAe,EAAE;EACtC,MAAMC,gBAAgB,GAAGC,6CAA2B,CAACC,GAAG,IAAIA,GAAG,CAACC,IAAI,CAACH,gBAAgB,CAAC;EACtF,MAAMI,aAAa,GAAGH,6CAA2B,CAACC,GAAG,IACnDJ,QAAQ,GAAGI,GAAG,CAACC,IAAI,CAACE,gBAAgB,CAACT,QAAQ,CAAC,GAAGU,SAAS,CAC3D;EACD,MAAMC,OAAO,GAAGC,kCAAgB,CAAEC,CAA+C,IAAI;;IACnF,IAAIX,QAAQ,EAAE;MACZE,gBAAgB,CAACS,CAAC,EAAEb,QAAQ,CAAC;;IAE/B,WAAK,CAACW,OAAO,+CAAbb,KAAK,EAAWe,CAAC,CAAC;EACpB,CAAC,CAAC;EAEF,OAAOC,gDAA2B,CAChC;IAAEN,aAAa;IAAEO,EAAE,EAAE,KAAK;IAAEC,QAAQ,EAAEd,QAAQ,GAAGQ,SAAS,GAAG,CAAC;IAAE,GAAGZ,KAAK;IAAEa;EAAO,CAAE,EACnFZ,GAAG,CACJ;AACH,CAAC;AArBYkB,sCAA8B","names":["useDataGridHeaderCell_unstable","props","ref","columnId","columnIdContext_1","sortable","tableContext_1","toggleColumnSort","dataGridContext_1","ctx","sort","sortDirection","getSortDirection","undefined","onClick","react_utilities_1","e","useTableHeaderCell_1","as","tabIndex","exports"],"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-commonjs/components/DataGridHeaderCell/useDataGridHeaderCellStyles.js

@@ -0,0 +1,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useDataGridHeaderCellStyles_unstable = exports.dataGridHeaderCellClassNames = void 0;
+const react_1 = /*#__PURE__*/require("@griffel/react");
+const useTableHeaderCellStyles_1 = /*#__PURE__*/require("../TableHeaderCell/useTableHeaderCellStyles");
+exports.dataGridHeaderCellClassNames = {
+  root: 'fui-DataGridHeaderCell',
+  button: 'fui-DataGridHeaderCell__button',
+  sortIcon: 'fui-DataGridHeaderCell__sortIcon'
+};
+/**
+ * Apply styling to the DataGridHeaderCell slots based on the state
+ */
+const useDataGridHeaderCellStyles_unstable = state => {
+  useTableHeaderCellStyles_1.useTableHeaderCellStyles_unstable(state);
+  state.root.className = react_1.mergeClasses(exports.dataGridHeaderCellClassNames.root, state.root.className);
+  if (state.button) {
+    state.button.className = react_1.mergeClasses(exports.dataGridHeaderCellClassNames.button, state.button.className);
+  }
+  if (state.sortIcon) {
+    state.sortIcon.className = react_1.mergeClasses(exports.dataGridHeaderCellClassNames.sortIcon, state.sortIcon.className);
+  }
+  return state;
+};
+exports.useDataGridHeaderCellStyles_unstable = useDataGridHeaderCellStyles_unstable;
+//# sourceMappingURL=useDataGridHeaderCellStyles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"mappings":";;;;;;AAAA;AAGA;AAEaA,oCAA4B,GAA4C;EACnFC,IAAI,EAAE,wBAAwB;EAC9BC,MAAM,EAAE,gCAAgC;EACxCC,QAAQ,EAAE;CACX;AAED;;;AAGO,MAAMC,oCAAoC,GAAIC,KAA8B,IAA6B;EAC9GC,4DAAiC,CAACD,KAAK,CAAC;EACxCA,KAAK,CAACJ,IAAI,CAACM,SAAS,GAAGC,oBAAY,CAACR,oCAA4B,CAACC,IAAI,EAAEI,KAAK,CAACJ,IAAI,CAACM,SAAS,CAAC;EAE5F,IAAIF,KAAK,CAACH,MAAM,EAAE;IAChBG,KAAK,CAACH,MAAM,CAACK,SAAS,GAAGC,oBAAY,CAACR,oCAA4B,CAACE,MAAM,EAAEG,KAAK,CAACH,MAAM,CAACK,SAAS,CAAC;;EAGpG,IAAIF,KAAK,CAACF,QAAQ,EAAE;IAClBE,KAAK,CAACF,QAAQ,CAACI,SAAS,GAAGC,oBAAY,CAACR,oCAA4B,CAACG,QAAQ,EAAEE,KAAK,CAACF,QAAQ,CAACI,SAAS,CAAC;;EAG1G,OAAOF,KAAK;AACd,CAAC;AAbYL,4CAAoC","names":["exports","root","button","sortIcon","useDataGridHeaderCellStyles_unstable","state","useTableHeaderCellStyles_1","className","react_1"],"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-commonjs/components/DataGridRow/DataGridRow.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DataGridRow = void 0;
+const React = /*#__PURE__*/require("react");
+const useDataGridRow_1 = /*#__PURE__*/require("./useDataGridRow");
+const renderDataGridRow_1 = /*#__PURE__*/require("./renderDataGridRow");
+const useDataGridRowStyles_1 = /*#__PURE__*/require("./useDataGridRowStyles");
+/**
+ * DataGridRow component
+ */
+exports.DataGridRow = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const state = useDataGridRow_1.useDataGridRow_unstable(props, ref);
+  useDataGridRowStyles_1.useDataGridRowStyles_unstable(state);
+  return renderDataGridRow_1.renderDataGridRow_unstable(state);
+});
+exports.DataGridRow.displayName = 'DataGridRow';
+//# sourceMappingURL=DataGridRow.js.map

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

@@ -0,0 +1 @@
+{"version":3,"mappings":";;;;;;AAAA;AACA;AACA;AACA;AAIA;;;AAGaA,mBAAW,gBACqCC,KAAK,CAACC,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EAC3F,MAAMC,KAAK,GAAGC,wCAAuB,CAACH,KAAK,EAAEC,GAAG,CAAC;EAEjDG,oDAA6B,CAACF,KAAK,CAAC;EACpC,OAAOG,8CAA0B,CAACH,KAAK,CAAC;AAC1C,CAAC,CAAqG;AAEtGL,mBAAW,CAACS,WAAW,GAAG,aAAa","names":["exports","React","forwardRef","props","ref","state","useDataGridRow_1","useDataGridRowStyles_1","renderDataGridRow_1","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-commonjs/components/DataGridRow/DataGridRow.types.js

@@ -0,0 +1,6 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+//# sourceMappingURL=DataGridRow.types.js.map

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

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

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

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+const tslib_1 = /*#__PURE__*/require("tslib");
+tslib_1.__exportStar(require("./DataGridRow"), exports);
+tslib_1.__exportStar(require("./DataGridRow.types"), exports);
+tslib_1.__exportStar(require("./renderDataGridRow"), exports);
+tslib_1.__exportStar(require("./useDataGridRow"), exports);
+tslib_1.__exportStar(require("./useDataGridRowStyles"), exports);
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"mappings":";;;;;;AAAAA;AACAA;AACAA;AACAA;AACAA","names":["tslib_1"],"sourceRoot":"../src/","sources":["packages/react-components/react-table/src/components/DataGridRow/index.ts"],"sourcesContent":["export * from './DataGridRow';\nexport * from './DataGridRow.types';\nexport * from './renderDataGridRow';\nexport * from './useDataGridRow';\nexport * from './useDataGridRowStyles';\n"]}

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

@@ -0,0 +1,28 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.renderDataGridRow_unstable = void 0;
+const React = /*#__PURE__*/require("react");
+const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
+const columnIdContext_1 = /*#__PURE__*/require("../../contexts/columnIdContext");
+/**
+ * Render the final JSX of DataGridRow
+ */
+const renderDataGridRow_unstable = state => {
+  const {
+    slots,
+    slotProps
+  } = react_utilities_1.getSlots(state);
+  return React.createElement(slots.root, {
+    ...slotProps.root
+  }, slots.selectionCell && React.createElement(slots.selectionCell, {
+    ...slotProps.selectionCell
+  }), state.columnDefs.map(columnDef => React.createElement(columnIdContext_1.ColumnIdContextProvider, {
+    value: columnDef.columnId,
+    key: columnDef.columnId
+  }, state.renderCell(columnDef))));
+};
+exports.renderDataGridRow_unstable = renderDataGridRow_unstable;
+//# sourceMappingURL=renderDataGridRow.js.map

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

@@ -0,0 +1 @@
+{"version":3,"mappings":";;;;;;AAAA;AACA;AAEA;AAEA;;;AAGO,MAAMA,0BAA0B,GAAIC,KAAuB,IAAI;EACpE,MAAM;IAAEC,KAAK;IAAEC;EAAS,CAAE,GAAGC,0BAAQ,CAAmBH,KAAK,CAAC;EAE9D,OACEI,oBAACH,KAAK,CAACI,IAAI;IAAA,GAAKH,SAAS,CAACG;EAAI,GAC3BJ,KAAK,CAACK,aAAa,IAAIF,oBAACH,KAAK,CAACK,aAAa;IAAA,GAAKJ,SAAS,CAACI;EAAa,EAAI,EAC3EN,KAAK,CAACO,UAAU,CAACC,GAAG,CAACC,SAAS,IAC7BL,oBAACM,yCAAuB;IAACC,KAAK,EAAEF,SAAS,CAACG,QAAQ;IAAEC,GAAG,EAAEJ,SAAS,CAACG;EAAQ,GACxEZ,KAAK,CAACc,UAAU,CAACL,SAAS,CAAC,CAE/B,CAAC,CACS;AAEjB,CAAC;AAbYM,kCAA0B","names":["renderDataGridRow_unstable","state","slots","slotProps","react_utilities_1","React","root","selectionCell","columnDefs","map","columnDef","columnIdContext_1","value","columnId","key","renderCell","exports"],"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-commonjs/components/DataGridRow/useDataGridRow.js

@@ -0,0 +1,77 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useDataGridRow_unstable = void 0;
+const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
+const keyboard_keys_1 = /*#__PURE__*/require("@fluentui/keyboard-keys");
+const useTableRow_1 = /*#__PURE__*/require("../TableRow/useTableRow");
+const dataGridContext_1 = /*#__PURE__*/require("../../contexts/dataGridContext");
+const DataGridSelectionCell_1 = /*#__PURE__*/require("../DataGridSelectionCell/DataGridSelectionCell");
+const rowIdContext_1 = /*#__PURE__*/require("../../contexts/rowIdContext");
+const tableHeaderContext_1 = /*#__PURE__*/require("../../contexts/tableHeaderContext");
+/**
+ * Create the state required to render DataGridRow.
+ *
+ * The returned state can be modified with hooks such as useDataGridRowStyles_unstable,
+ * before being passed to renderDataGridRow_unstable.
+ *
+ * @param props - props from this instance of DataGridRow
+ * @param ref - reference to root HTMLElement of DataGridRow
+ */
+const useDataGridRow_unstable = (props, ref) => {
+  const rowId = rowIdContext_1.useTableRowIdContext();
+  const isHeader = tableHeaderContext_1.useIsInTableHeader();
+  const columnDefs = dataGridContext_1.useDataGridContext_unstable(ctx => ctx.columns);
+  const selectable = dataGridContext_1.useDataGridContext_unstable(ctx => ctx.selectableRows);
+  const selected = dataGridContext_1.useDataGridContext_unstable(ctx => ctx.selection.isRowSelected(rowId));
+  const tabbable = dataGridContext_1.useDataGridContext_unstable(ctx => ctx.focusMode === 'row_unstable');
+  const appearance = dataGridContext_1.useDataGridContext_unstable(ctx => {
+    if (!isHeader && selectable && ctx.selection.isRowSelected(rowId)) {
+      return ctx.selectionAppearance;
+    }
+    return 'none';
+  });
+  const toggleRow = dataGridContext_1.useDataGridContext_unstable(ctx => ctx.selection.toggleRow);
+  const onClick = react_utilities_1.useEventCallback(e => {
+    var _a;
+    if (selectable && !isHeader) {
+      toggleRow(e, rowId);
+    }
+    (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props, e);
+  });
+  const onKeyDown = react_utilities_1.useEventCallback(e => {
+    var _a;
+    if (selectable && !isHeader && e.key === keyboard_keys_1.Space && !react_utilities_1.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_1.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_1.DataGridSelectionCell
+    },
+    selectionCell: react_utilities_1.resolveShorthand(props.selectionCell, {
+      required: selectable
+    }),
+    renderCell: props.children,
+    columnDefs
+  };
+};
+exports.useDataGridRow_unstable = useDataGridRow_unstable;
+//# sourceMappingURL=useDataGridRow.js.map

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

@@ -0,0 +1 @@
+{"version":3,"mappings":";;;;;;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AAEA;;;;;;;;;AASO,MAAMA,uBAAuB,GAAG,CAACC,KAAuB,EAAEC,GAA2B,KAAsB;EAChH,MAAMC,KAAK,GAAGC,mCAAoB,EAAE;EACpC,MAAMC,QAAQ,GAAGC,uCAAkB,EAAE;EACrC,MAAMC,UAAU,GAAGC,6CAA2B,CAACC,GAAG,IAAIA,GAAG,CAACC,OAAO,CAAC;EAClE,MAAMC,UAAU,GAAGH,6CAA2B,CAACC,GAAG,IAAIA,GAAG,CAACG,cAAc,CAAC;EACzE,MAAMC,QAAQ,GAAGL,6CAA2B,CAACC,GAAG,IAAIA,GAAG,CAACK,SAAS,CAACC,aAAa,CAACZ,KAAK,CAAC,CAAC;EACvF,MAAMa,QAAQ,GAAGR,6CAA2B,CAACC,GAAG,IAAIA,GAAG,CAACQ,SAAS,KAAK,cAAc,CAAC;EACrF,MAAMC,UAAU,GAAGV,6CAA2B,CAACC,GAAG,IAAG;IACnD,IAAI,CAACJ,QAAQ,IAAIM,UAAU,IAAIF,GAAG,CAACK,SAAS,CAACC,aAAa,CAACZ,KAAK,CAAC,EAAE;MACjE,OAAOM,GAAG,CAACU,mBAAmB;;IAGhC,OAAO,MAAM;EACf,CAAC,CAAC;EACF,MAAMC,SAAS,GAAGZ,6CAA2B,CAACC,GAAG,IAAIA,GAAG,CAACK,SAAS,CAACM,SAAS,CAAC;EAE7E,MAAMC,OAAO,GAAGC,kCAAgB,CAAEC,CAAwC,IAAI;;IAC5E,IAAIZ,UAAU,IAAI,CAACN,QAAQ,EAAE;MAC3Be,SAAS,CAACG,CAAC,EAAEpB,KAAK,CAAC;;IAGrB,WAAK,CAACkB,OAAO,+CAAbpB,KAAK,EAAWsB,CAAC,CAAC;EACpB,CAAC,CAAC;EAEF,MAAMC,SAAS,GAAGF,kCAAgB,CAAEC,CAA2C,IAAI;;IACjF,IAAIZ,UAAU,IAAI,CAACN,QAAQ,IAAIkB,CAAC,CAACE,GAAG,KAAKC,qBAAK,IAAI,CAACJ,0CAAwB,CAACC,CAAC,CAACI,MAAqB,CAAC,EAAE;MACpG;MACAJ,CAAC,CAACK,cAAc,EAAE;MAClBR,SAAS,CAACG,CAAC,EAAEpB,KAAK,CAAC;;IAGrB,WAAK,CAACqB,SAAS,+CAAfvB,KAAK,EAAasB,CAAC,CAAC;EACtB,CAAC,CAAC;EAEF,MAAMM,SAAS,GAAGC,kCAAoB,CACpC;IACEZ,UAAU;IACV,eAAe,EAAEP,UAAU,GAAGE,QAAQ,GAAGkB,SAAS;IAClD,GAAG9B,KAAK;IACRoB,OAAO;IACPG,SAAS;IACTQ,QAAQ,EAAE,IAAI;IACdC,EAAE,EAAE,KAAK;IACTC,QAAQ,EAAElB,QAAQ,IAAI,CAACX,QAAQ,GAAG,CAAC,GAAG0B;GACvC,EACD7B,GAAG,CACJ;EAED,OAAO;IACL,GAAG2B,SAAS;IACZM,UAAU,EAAE;MACV,GAAGN,SAAS,CAACM,UAAU;MACvBC,aAAa,EAAEC;KAChB;IACDD,aAAa,EAAEd,kCAAgB,CAACrB,KAAK,CAACmC,aAAa,EAAE;MAAEE,QAAQ,EAAE3B;IAAU,CAAE,CAAC;IAC9E4B,UAAU,EAAEtC,KAAK,CAAC+B,QAAQ;IAC1BzB;GACD;AACH,CAAC;AA1DYiC,+BAAuB","names":["useDataGridRow_unstable","props","ref","rowId","rowIdContext_1","isHeader","tableHeaderContext_1","columnDefs","dataGridContext_1","ctx","columns","selectable","selectableRows","selected","selection","isRowSelected","tabbable","focusMode","appearance","selectionAppearance","toggleRow","onClick","react_utilities_1","e","onKeyDown","key","keyboard_keys_1","target","preventDefault","baseState","useTableRow_1","undefined","children","as","tabIndex","components","selectionCell","DataGridSelectionCell_1","required","renderCell","exports"],"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-commonjs/components/DataGridRow/useDataGridRowStyles.js

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useDataGridRowStyles_unstable = exports.dataGridRowClassNames = void 0;
+const react_1 = /*#__PURE__*/require("@griffel/react");
+const useTableRowStyles_1 = /*#__PURE__*/require("../TableRow/useTableRowStyles");
+exports.dataGridRowClassNames = {
+  root: 'fui-DataGridRow',
+  selectionCell: 'fui-DataGridRow__selectionCell'
+};
+/**
+ * Apply styling to the DataGridRow slots based on the state
+ */
+const useDataGridRowStyles_unstable = state => {
+  useTableRowStyles_1.useTableRowStyles_unstable(state);
+  state.root.className = react_1.mergeClasses(exports.dataGridRowClassNames.root, state.root.className);
+  if (state.selectionCell) {
+    state.selectionCell.className = react_1.mergeClasses(exports.dataGridRowClassNames.selectionCell, state.selectionCell.className);
+  }
+  return state;
+};
+exports.useDataGridRowStyles_unstable = useDataGridRowStyles_unstable;
+//# sourceMappingURL=useDataGridRowStyles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"mappings":";;;;;;AAAA;AAGA;AAEaA,6BAAqB,GAAqC;EACrEC,IAAI,EAAE,iBAAiB;EACvBC,aAAa,EAAE;CAChB;AAED;;;AAGO,MAAMC,6BAA6B,GAAIC,KAAuB,IAAsB;EACzFC,8CAA0B,CAACD,KAAK,CAAC;EACjCA,KAAK,CAACH,IAAI,CAACK,SAAS,GAAGC,oBAAY,CAACP,6BAAqB,CAACC,IAAI,EAAEG,KAAK,CAACH,IAAI,CAACK,SAAS,CAAC;EACrF,IAAIF,KAAK,CAACF,aAAa,EAAE;IACvBE,KAAK,CAACF,aAAa,CAACI,SAAS,GAAGC,oBAAY,CAACP,6BAAqB,CAACE,aAAa,EAAEE,KAAK,CAACF,aAAa,CAACI,SAAS,CAAC;;EAGlH,OAAOF,KAAK;AACd,CAAC;AARYJ,qCAA6B","names":["exports","root","selectionCell","useDataGridRowStyles_unstable","state","useTableRowStyles_1","className","react_1"],"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-commonjs/components/DataGridSelectionCell/DataGridSelectionCell.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DataGridSelectionCell = void 0;
+const React = /*#__PURE__*/require("react");
+const useDataGridSelectionCell_1 = /*#__PURE__*/require("./useDataGridSelectionCell");
+const renderDataGridSelectionCell_1 = /*#__PURE__*/require("./renderDataGridSelectionCell");
+const useDataGridSelectionCellStyles_1 = /*#__PURE__*/require("./useDataGridSelectionCellStyles");
+/**
+ * DataGridSelectionCell component
+ */
+exports.DataGridSelectionCell = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const state = useDataGridSelectionCell_1.useDataGridSelectionCell_unstable(props, ref);
+  useDataGridSelectionCellStyles_1.useDataGridSelectionCellStyles_unstable(state);
+  return renderDataGridSelectionCell_1.renderDataGridSelectionCell_unstable(state);
+});
+exports.DataGridSelectionCell.displayName = 'DataGridSelectionCell';
+//# sourceMappingURL=DataGridSelectionCell.js.map

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

@@ -0,0 +1 @@
+{"version":3,"mappings":";;;;;;AAAA;AACA;AACA;AACA;AAIA;;;AAGaA,6BAAqB,gBAAoDC,KAAK,CAACC,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EACpH,MAAMC,KAAK,GAAGC,4DAAiC,CAACH,KAAK,EAAEC,GAAG,CAAC;EAE3DG,wEAAuC,CAACF,KAAK,CAAC;EAC9C,OAAOG,kEAAoC,CAACH,KAAK,CAAC;AACpD,CAAC,CAAC;AAEFL,6BAAqB,CAACS,WAAW,GAAG,uBAAuB","names":["exports","React","forwardRef","props","ref","state","useDataGridSelectionCell_1","useDataGridSelectionCellStyles_1","renderDataGridSelectionCell_1","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-commonjs/components/DataGridSelectionCell/DataGridSelectionCell.types.js

@@ -0,0 +1,6 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+//# sourceMappingURL=DataGridSelectionCell.types.js.map

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

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

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

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+const tslib_1 = /*#__PURE__*/require("tslib");
+tslib_1.__exportStar(require("./DataGridSelectionCell"), exports);
+tslib_1.__exportStar(require("./DataGridSelectionCell.types"), exports);
+tslib_1.__exportStar(require("./renderDataGridSelectionCell"), exports);
+tslib_1.__exportStar(require("./useDataGridSelectionCell"), exports);
+tslib_1.__exportStar(require("./useDataGridSelectionCellStyles"), exports);
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"mappings":";;;;;;AAAAA;AACAA;AACAA;AACAA;AACAA","names":["tslib_1"],"sourceRoot":"../src/","sources":["packages/react-components/react-table/src/components/DataGridSelectionCell/index.ts"],"sourcesContent":["export * from './DataGridSelectionCell';\nexport * from './DataGridSelectionCell.types';\nexport * from './renderDataGridSelectionCell';\nexport * from './useDataGridSelectionCell';\nexport * from './useDataGridSelectionCellStyles';\n"]}

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

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.renderDataGridSelectionCell_unstable = void 0;
+const renderTableSelectionCell_1 = /*#__PURE__*/require("../TableSelectionCell/renderTableSelectionCell");
+/**
+ * Render the final JSX of DataGridSelectionCell
+ */
+const renderDataGridSelectionCell_unstable = state => {
+  return renderTableSelectionCell_1.renderTableSelectionCell_unstable(state);
+};
+exports.renderDataGridSelectionCell_unstable = renderDataGridSelectionCell_unstable;
+//# sourceMappingURL=renderDataGridSelectionCell.js.map

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

@@ -0,0 +1 @@
+{"version":3,"mappings":";;;;;;AACA;AAEA;;;AAGO,MAAMA,oCAAoC,GAAIC,KAAiC,IAAI;EACxF,OAAOC,4DAAiC,CAACD,KAAK,CAAC;AACjD,CAAC;AAFYE,4CAAoC","names":["renderDataGridSelectionCell_unstable","state","renderTableSelectionCell_1","exports"],"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-commonjs/components/DataGridSelectionCell/useDataGridSelectionCell.js

@@ -0,0 +1,54 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useDataGridSelectionCell_unstable = void 0;
+const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
+const dataGridContext_1 = /*#__PURE__*/require("../../contexts/dataGridContext");
+const rowIdContext_1 = /*#__PURE__*/require("../../contexts/rowIdContext");
+const tableHeaderContext_1 = /*#__PURE__*/require("../../contexts/tableHeaderContext");
+const useTableSelectionCell_1 = /*#__PURE__*/require("../TableSelectionCell/useTableSelectionCell");
+/**
+ * Create the state required to render DataGridSelectionCell.
+ *
+ * The returned state can be modified with hooks such as useDataGridSelectionCellStyles_unstable,
+ * before being passed to renderDataGridSelectionCell_unstable.
+ *
+ * @param props - props from this instance of DataGridSelectionCell
+ * @param ref - reference to root HTMLElement of DataGridSelectionCell
+ */
+const useDataGridSelectionCell_unstable = (props, ref) => {
+  const isHeader = tableHeaderContext_1.useIsInTableHeader();
+  const rowId = rowIdContext_1.useTableRowIdContext();
+  const subtle = dataGridContext_1.useDataGridContext_unstable(ctx => ctx.subtleSelection);
+  const checked = dataGridContext_1.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 = dataGridContext_1.useDataGridContext_unstable(ctx => ctx.selection.toggleAllRows);
+  const type = dataGridContext_1.useDataGridContext_unstable(ctx => ctx.selection.selectionMode === 'multiselect' ? 'checkbox' : 'radio');
+  const onClick = react_utilities_1.useEventCallback(e => {
+    var _a;
+    if (isHeader) {
+      toggleAllRows(e);
+    }
+    (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props, e);
+  });
+  return useTableSelectionCell_1.useTableSelectionCell_unstable({
+    as: 'div',
+    role: 'gridcell',
+    checked,
+    type,
+    hidden: isHeader && type === 'radio',
+    'aria-checked': isHeader ? checked : undefined,
+    'aria-selected': isHeader || checked === 'mixed' ? undefined : checked,
+    subtle,
+    ...props,
+    onClick
+  }, ref);
+};
+exports.useDataGridSelectionCell_unstable = useDataGridSelectionCell_unstable;
+//# sourceMappingURL=useDataGridSelectionCell.js.map

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

@@ -0,0 +1 @@
+{"version":3,"mappings":";;;;;;AACA;AACA;AACA;AACA;AACA;AAGA;;;;;;;;;AASO,MAAMA,iCAAiC,GAAG,CAC/CC,KAAiC,EACjCC,GAA2B,KACG;EAC9B,MAAMC,QAAQ,GAAGC,uCAAkB,EAAE;EACrC,MAAMC,KAAK,GAAGC,mCAAoB,EAAE;EACpC,MAAMC,MAAM,GAAGC,6CAA2B,CAACC,GAAG,IAAIA,GAAG,CAACC,eAAe,CAAC;EACtE,MAAMC,OAAO,GAAGH,6CAA2B,CAACC,GAAG,IAAG;IAChD,IAAIN,QAAQ,IAAIM,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,CAACX,KAAK,CAAC;EAC3C,CAAC,CAAC;EAEF,MAAMY,aAAa,GAAGT,6CAA2B,CAACC,GAAG,IAAIA,GAAG,CAACG,SAAS,CAACK,aAAa,CAAC;EACrF,MAAMC,IAAI,GAAGV,6CAA2B,CAACC,GAAG,IAC1CA,GAAG,CAACG,SAAS,CAACC,aAAa,KAAK,aAAa,GAAG,UAAU,GAAG,OAAO,CACrE;EAED,MAAMM,OAAO,GAAGC,kCAAgB,CAAEC,CAAyC,IAAI;;IAC7E,IAAIlB,QAAQ,EAAE;MACZc,aAAa,CAACI,CAAC,CAAC;;IAGlB,WAAK,CAACF,OAAO,+CAAblB,KAAK,EAAWoB,CAAC,CAAC;EACpB,CAAC,CAAC;EAEF,OAAOC,sDAA8B,CACnC;IACEC,EAAE,EAAE,KAAK;IACTC,IAAI,EAAE,UAAU;IAChBb,OAAO;IACPO,IAAI;IACJO,MAAM,EAAEtB,QAAQ,IAAIe,IAAI,KAAK,OAAO;IACpC,cAAc,EAAEf,QAAQ,GAAGQ,OAAO,GAAGe,SAAS;IAC9C,eAAe,EAAEvB,QAAQ,IAAIQ,OAAO,KAAK,OAAO,GAAGe,SAAS,GAAGf,OAAO;IACtEJ,MAAM;IACN,GAAGN,KAAK;IACRkB;GACD,EACDjB,GAAG,CACJ;AACH,CAAC;AA3CYyB,yCAAiC","names":["useDataGridSelectionCell_unstable","props","ref","isHeader","tableHeaderContext_1","rowId","rowIdContext_1","subtle","dataGridContext_1","ctx","subtleSelection","checked","selection","selectionMode","allRowsSelected","someRowsSelected","isRowSelected","toggleAllRows","type","onClick","react_utilities_1","e","useTableSelectionCell_1","as","role","hidden","undefined","exports"],"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-commonjs/components/DataGridSelectionCell/useDataGridSelectionCellStyles.js

@@ -0,0 +1,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useDataGridSelectionCellStyles_unstable = exports.dataGridSelectionCellClassNames = void 0;
+const react_1 = /*#__PURE__*/require("@griffel/react");
+const useTableSelectionCellStyles_1 = /*#__PURE__*/require("../TableSelectionCell/useTableSelectionCellStyles");
+exports.dataGridSelectionCellClassNames = {
+  root: 'fui-DataGridSelectionCell',
+  checkboxIndicator: 'fui-DataGridSelectionCell__checkboxIndicator',
+  radioIndicator: 'fui-DataGridSelectionCell__radioIndicator'
+};
+/**
+ * Apply styling to the DataGridSelectionCell slots based on the state
+ */
+const useDataGridSelectionCellStyles_unstable = state => {
+  useTableSelectionCellStyles_1.useTableSelectionCellStyles_unstable(state);
+  state.root.className = react_1.mergeClasses(exports.dataGridSelectionCellClassNames.root, state.root.className);
+  if (state.checkboxIndicator) {
+    state.checkboxIndicator.className = react_1.mergeClasses(exports.dataGridSelectionCellClassNames.checkboxIndicator, state.checkboxIndicator.className);
+  }
+  if (state.radioIndicator) {
+    state.radioIndicator.className = react_1.mergeClasses(exports.dataGridSelectionCellClassNames.radioIndicator, state.radioIndicator.className);
+  }
+  return state;
+};
+exports.useDataGridSelectionCellStyles_unstable = useDataGridSelectionCellStyles_unstable;
+//# sourceMappingURL=useDataGridSelectionCellStyles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"mappings":";;;;;;AAAA;AAGA;AAEaA,uCAA+B,GAA+C;EACzFC,IAAI,EAAE,2BAA2B;EACjCC,iBAAiB,EAAE,8CAA8C;EACjEC,cAAc,EAAE;CACjB;AAED;;;AAGO,MAAMC,uCAAuC,GAClDC,KAAiC,IACH;EAC9BC,kEAAoC,CAACD,KAAK,CAAC;EAC3CA,KAAK,CAACJ,IAAI,CAACM,SAAS,GAAGC,oBAAY,CAACR,uCAA+B,CAACC,IAAI,EAAEI,KAAK,CAACJ,IAAI,CAACM,SAAS,CAAC;EAE/F,IAAIF,KAAK,CAACH,iBAAiB,EAAE;IAC3BG,KAAK,CAACH,iBAAiB,CAACK,SAAS,GAAGC,oBAAY,CAC9CR,uCAA+B,CAACE,iBAAiB,EACjDG,KAAK,CAACH,iBAAiB,CAACK,SAAS,CAClC;;EAGH,IAAIF,KAAK,CAACF,cAAc,EAAE;IACxBE,KAAK,CAACF,cAAc,CAACI,SAAS,GAAGC,oBAAY,CAC3CR,uCAA+B,CAACG,cAAc,EAC9CE,KAAK,CAACF,cAAc,CAACI,SAAS,CAC/B;;EAGH,OAAOF,KAAK;AACd,CAAC;AArBYL,+CAAuC","names":["exports","root","checkboxIndicator","radioIndicator","useDataGridSelectionCellStyles_unstable","state","useTableSelectionCellStyles_1","className","react_1"],"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-commonjs/components/Table/Table.js

@@ -4,21 +4,14 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Table = void 0;
-
 const React = /*#__PURE__*/require("react");
-
 const useTable_1 = /*#__PURE__*/require("./useTable");
-
 const renderTable_1 = /*#__PURE__*/require("./renderTable");
-
 const useTableStyles_1 = /*#__PURE__*/require("./useTableStyles");
-
 const useTableContextValues_1 = /*#__PURE__*/require("./useTableContextValues");
 /**
- * Table component - TODO: add more docs
+ * Table component
  */
-
-
 exports.Table = /*#__PURE__*/React.forwardRef((props, ref) => {
   const state = useTable_1.useTable_unstable(props, ref);
   useTableStyles_1.useTableStyles_unstable(state);

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

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-table/src/components/Table/Table.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,UAAA,gBAAA,OAAA,CAAA,YAAA,CAAA;;AACA,MAAA,aAAA,gBAAA,OAAA,CAAA,eAAA,CAAA;;AACA,MAAA,gBAAA,gBAAA,OAAA,CAAA,kBAAA,CAAA;;AAGA,MAAA,uBAAA,gBAAA,OAAA,CAAA,yBAAA,CAAA;AAEA;;AAEG;;;AACU,OAAA,CAAA,KAAA,gBAAyC,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EACpF,MAAM,KAAK,GAAG,UAAA,CAAA,iBAAA,CAAkB,KAAlB,EAAyB,GAAzB,CAAd;EAEA,gBAAA,CAAA,uBAAA,CAAwB,KAAxB;EACA,OAAO,aAAA,CAAA,oBAAA,CAAqB,KAArB,EAA4B,uBAAA,CAAA,8BAAA,CAA+B,KAA/B,CAA5B,CAAP;AACD,CALqD,CAAzC;AAOb,OAAA,CAAA,KAAA,CAAM,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;AACA;AACA;AACA;AAGA;AAEA;;;AAGaA,aAAK,gBAAoCC,KAAK,CAACC,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EACpF,MAAMC,KAAK,GAAGC,4BAAiB,CAACH,KAAK,EAAEC,GAAG,CAAC;EAE3CG,wCAAuB,CAACF,KAAK,CAAC;EAC9B,OAAOG,kCAAoB,CAACH,KAAK,EAAEI,sDAA8B,CAACJ,KAAK,CAAC,CAAC;AAC3E,CAAC,CAAC;AAEFL,aAAK,CAACU,WAAW,GAAG,OAAO","names":["exports","React","forwardRef","props","ref","state","useTable_1","useTableStyles_1","renderTable_1","useTableContextValues_1","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-commonjs/components/Table/Table.types.js.map

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

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

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

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

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-table/src/components/Table/index.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,SAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,eAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,eAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,YAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,kBAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './Table';\nexport * from './Table.types';\nexport * from './renderTable';\nexport * from './useTable';\nexport * from './useTableStyles';\n"],"sourceRoot":"../src/"}
+{"version":3,"mappings":";;;;;;AAAAA;AACAA;AACAA;AACAA;AACAA","names":["tslib_1"],"sourceRoot":"../src/","sources":["packages/react-components/react-table/src/components/Table/index.ts"],"sourcesContent":["export * from './Table';\nexport * from './Table.types';\nexport * from './renderTable';\nexport * from './useTable';\nexport * from './useTableStyles';\n"]}

package/lib-commonjs/components/Table/renderTable.js

@@ -4,17 +4,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.renderTable_unstable = void 0;
-
 const React = /*#__PURE__*/require("react");
-
 const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
-
 const tableContext_1 = /*#__PURE__*/require("../../contexts/tableContext");
 /**
  * Render the final JSX of Table
  */
-
-
 const renderTable_unstable = (state, contextValues) => {
   const {
     slots,
@@ -22,9 +17,9 @@ const renderTable_unstable = (state, contextValues) => {
   } = react_utilities_1.getSlots(state);
   return React.createElement(tableContext_1.TableContextProvider, {
     value: contextValues.table
-  }, React.createElement(slots.root, { ...slotProps.root
+  }, React.createElement(slots.root, {
+    ...slotProps.root
   }));
 };
-
 exports.renderTable_unstable = renderTable_unstable;
 //# sourceMappingURL=renderTable.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-table/src/components/Table/renderTable.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AAEA,MAAA,cAAA,gBAAA,OAAA,CAAA,6BAAA,CAAA;AAEA;;AAEG;;;AACI,MAAM,oBAAoB,GAAG,CAAC,KAAD,EAAoB,aAApB,KAAyD;EAC3F,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,iBAAA,CAAA,QAAA,CAAqB,KAArB,CAA7B;EAEA,OACE,KAAA,CAAA,aAAA,CAAC,cAAA,CAAA,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;;AAAM,OAAA,CAAA,oBAAA,GAAoB,oBAApB","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;AACA;AAEA;AAEA;;;AAGO,MAAMA,oBAAoB,GAAG,CAACC,KAAiB,EAAEC,aAAiC,KAAI;EAC3F,MAAM;IAAEC,KAAK;IAAEC;EAAS,CAAE,GAAGC,0BAAQ,CAAaJ,KAAK,CAAC;EAExD,OACEK,oBAACC,mCAAoB;IAACC,KAAK,EAAEN,aAAa,CAACO;EAAK,GAC9CH,oBAACH,KAAK,CAACO,IAAI;IAAA,GAAKN,SAAS,CAACM;EAAI,EAAI,CACb;AAE3B,CAAC;AARYC,4BAAoB","names":["renderTable_unstable","state","contextValues","slots","slotProps","react_utilities_1","React","tableContext_1","value","table","root","exports"],"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"]}