@fluentui/react-table 9.0.0-rc.4 → 9.0.0

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

@@ -0,0 +1,49 @@
+define(["require", "exports", "tslib", "@fluentui/react-utilities", "@fluentui/keyboard-keys", "../TableRow/useTableRow", "../../contexts/dataGridContext", "../DataGridSelectionCell/DataGridSelectionCell", "../../contexts/rowIdContext", "../../contexts/tableHeaderContext"], function (require, exports, tslib_1, react_utilities_1, keyboard_keys_1, useTableRow_1, dataGridContext_1, DataGridSelectionCell_1, rowIdContext_1, tableHeaderContext_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.useDataGridRow_unstable = void 0;
+    /**
+     * 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
+     */
+    var useDataGridRow_unstable = function (props, ref) {
+        var rowId = rowIdContext_1.useTableRowIdContext();
+        var isHeader = tableHeaderContext_1.useIsInTableHeader();
+        var columnDefs = dataGridContext_1.useDataGridContext_unstable(function (ctx) { return ctx.columns; });
+        var selectable = dataGridContext_1.useDataGridContext_unstable(function (ctx) { return ctx.selectableRows; });
+        var selected = dataGridContext_1.useDataGridContext_unstable(function (ctx) { return ctx.selection.isRowSelected(rowId); });
+        var tabbable = dataGridContext_1.useDataGridContext_unstable(function (ctx) { return ctx.focusMode === 'row_unstable'; });
+        var appearance = dataGridContext_1.useDataGridContext_unstable(function (ctx) {
+            if (!isHeader && selectable && ctx.selection.isRowSelected(rowId)) {
+                return ctx.selectionAppearance;
+            }
+            return 'none';
+        });
+        var toggleRow = dataGridContext_1.useDataGridContext_unstable(function (ctx) { return ctx.selection.toggleRow; });
+        var onClick = react_utilities_1.useEventCallback(function (e) {
+            var _a;
+            if (selectable && !isHeader) {
+                toggleRow(e, rowId);
+            }
+            (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props, e);
+        });
+        var onKeyDown = react_utilities_1.useEventCallback(function (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);
+        });
+        var baseState = useTableRow_1.useTableRow_unstable(tslib_1.__assign(tslib_1.__assign({ appearance: appearance, 'aria-selected': selectable ? selected : undefined }, props), { onClick: onClick, onKeyDown: onKeyDown, children: null, as: 'div', tabIndex: tabbable && !isHeader ? 0 : undefined }), ref);
+        return tslib_1.__assign(tslib_1.__assign({}, baseState), { components: tslib_1.__assign(tslib_1.__assign({}, baseState.components), { selectionCell: DataGridSelectionCell_1.DataGridSelectionCell }), selectionCell: react_utilities_1.resolveShorthand(props.selectionCell, { required: selectable }), renderCell: props.children, columnDefs: columnDefs });
+    };
+    exports.useDataGridRow_unstable = useDataGridRow_unstable;
+});
+//# sourceMappingURL=useDataGridRow.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useDataGridRow.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-table/src/components/DataGridRow/useDataGridRow.tsx"],"names":[],"mappings":";;;;IAUA;;;;;;;;OAQG;IACI,IAAM,uBAAuB,GAAG,UAAC,KAAuB,EAAE,GAA2B;QAC1F,IAAM,KAAK,GAAG,mCAAoB,EAAE,CAAC;QACrC,IAAM,QAAQ,GAAG,uCAAkB,EAAE,CAAC;QACtC,IAAM,UAAU,GAAG,6CAA2B,CAAC,UAAA,GAAG,IAAI,OAAA,GAAG,CAAC,OAAO,EAAX,CAAW,CAAC,CAAC;QACnE,IAAM,UAAU,GAAG,6CAA2B,CAAC,UAAA,GAAG,IAAI,OAAA,GAAG,CAAC,cAAc,EAAlB,CAAkB,CAAC,CAAC;QAC1E,IAAM,QAAQ,GAAG,6CAA2B,CAAC,UAAA,GAAG,IAAI,OAAA,GAAG,CAAC,SAAS,CAAC,aAAa,CAAC,KAAK,CAAC,EAAlC,CAAkC,CAAC,CAAC;QACxF,IAAM,QAAQ,GAAG,6CAA2B,CAAC,UAAA,GAAG,IAAI,OAAA,GAAG,CAAC,SAAS,KAAK,cAAc,EAAhC,CAAgC,CAAC,CAAC;QACtF,IAAM,UAAU,GAAG,6CAA2B,CAAC,UAAA,GAAG;YAChD,IAAI,CAAC,QAAQ,IAAI,UAAU,IAAI,GAAG,CAAC,SAAS,CAAC,aAAa,CAAC,KAAK,CAAC,EAAE;gBACjE,OAAO,GAAG,CAAC,mBAAmB,CAAC;aAChC;YAED,OAAO,MAAM,CAAC;QAChB,CAAC,CAAC,CAAC;QACH,IAAM,SAAS,GAAG,6CAA2B,CAAC,UAAA,GAAG,IAAI,OAAA,GAAG,CAAC,SAAS,CAAC,SAAS,EAAvB,CAAuB,CAAC,CAAC;QAE9E,IAAM,OAAO,GAAG,kCAAgB,CAAC,UAAC,CAAwC;;YACxE,IAAI,UAAU,IAAI,CAAC,QAAQ,EAAE;gBAC3B,SAAS,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC;aACrB;YAED,MAAA,KAAK,CAAC,OAAO,+CAAb,KAAK,EAAW,CAAC,CAAC,CAAC;QACrB,CAAC,CAAC,CAAC;QAEH,IAAM,SAAS,GAAG,kCAAgB,CAAC,UAAC,CAA2C;;YAC7E,IAAI,UAAU,IAAI,CAAC,QAAQ,IAAI,CAAC,CAAC,GAAG,KAAK,qBAAK,IAAI,CAAC,0CAAwB,CAAC,CAAC,CAAC,MAAqB,CAAC,EAAE;gBACpG,iBAAiB;gBACjB,CAAC,CAAC,cAAc,EAAE,CAAC;gBACnB,SAAS,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC;aACrB;YAED,MAAA,KAAK,CAAC,SAAS,+CAAf,KAAK,EAAa,CAAC,CAAC,CAAC;QACvB,CAAC,CAAC,CAAC;QAEH,IAAM,SAAS,GAAG,kCAAoB,qCAElC,UAAU,YAAA,EACV,eAAe,EAAE,UAAU,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,IAC/C,KAAK,KACR,OAAO,SAAA,EACP,SAAS,WAAA,EACT,QAAQ,EAAE,IAAI,EACd,EAAE,EAAE,KAAK,EACT,QAAQ,EAAE,QAAQ,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,KAEjD,GAAG,CACJ,CAAC;QAEF,6CACK,SAAS,KACZ,UAAU,wCACL,SAAS,CAAC,UAAU,KACvB,aAAa,EAAE,6CAAqB,KAEtC,aAAa,EAAE,kCAAgB,CAAC,KAAK,CAAC,aAAa,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE,CAAC,EAC9E,UAAU,EAAE,KAAK,CAAC,QAAQ,EAC1B,UAAU,YAAA,IACV;IACJ,CAAC,CAAC;IA1DW,QAAA,uBAAuB,2BA0DlC","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-amd/components/DataGridRow/useDataGridRowStyles.js

@@ -0,0 +1,22 @@
+define(["require", "exports", "@griffel/react", "../TableRow/useTableRowStyles"], function (require, exports, react_1, useTableRowStyles_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.useDataGridRowStyles_unstable = exports.dataGridRowClassNames = void 0;
+    exports.dataGridRowClassNames = {
+        root: 'fui-DataGridRow',
+        selectionCell: 'fui-DataGridRow__selectionCell',
+    };
+    /**
+     * Apply styling to the DataGridRow slots based on the state
+     */
+    var useDataGridRowStyles_unstable = function (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-amd/components/DataGridRow/useDataGridRowStyles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDataGridRowStyles.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-table/src/components/DataGridRow/useDataGridRowStyles.ts"],"names":[],"mappings":";;;;IAKa,QAAA,qBAAqB,GAAqC;QACrE,IAAI,EAAE,iBAAiB;QACvB,aAAa,EAAE,gCAAgC;KAChD,CAAC;IAEF;;OAEG;IACI,IAAM,6BAA6B,GAAG,UAAC,KAAuB;QACnE,8CAA0B,CAAC,KAAK,CAAC,CAAC;QAClC,KAAK,CAAC,IAAI,CAAC,SAAS,GAAG,oBAAY,CAAC,6BAAqB,CAAC,IAAI,EAAE,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;QACtF,IAAI,KAAK,CAAC,aAAa,EAAE;YACvB,KAAK,CAAC,aAAa,CAAC,SAAS,GAAG,oBAAY,CAAC,6BAAqB,CAAC,aAAa,EAAE,KAAK,CAAC,aAAa,CAAC,SAAS,CAAC,CAAC;SAClH;QAED,OAAO,KAAK,CAAC;IACf,CAAC,CAAC;IARW,QAAA,6BAA6B,iCAQxC","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-amd/components/DataGridSelectionCell/DataGridSelectionCell.js

@@ -0,0 +1,15 @@
+define(["require", "exports", "react", "./useDataGridSelectionCell", "./renderDataGridSelectionCell", "./useDataGridSelectionCellStyles"], function (require, exports, React, useDataGridSelectionCell_1, renderDataGridSelectionCell_1, useDataGridSelectionCellStyles_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.DataGridSelectionCell = void 0;
+    /**
+     * DataGridSelectionCell component
+     */
+    exports.DataGridSelectionCell = React.forwardRef(function (props, ref) {
+        var 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-amd/components/DataGridSelectionCell/DataGridSelectionCell.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataGridSelectionCell.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-table/src/components/DataGridSelectionCell/DataGridSelectionCell.tsx"],"names":[],"mappings":";;;;IAOA;;OAEG;IACU,QAAA,qBAAqB,GAAoD,KAAK,CAAC,UAAU,CAAC,UAAC,KAAK,EAAE,GAAG;QAChH,IAAM,KAAK,GAAG,4DAAiC,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC;QAE5D,wEAAuC,CAAC,KAAK,CAAC,CAAC;QAC/C,OAAO,kEAAoC,CAAC,KAAK,CAAC,CAAC;IACrD,CAAC,CAAC,CAAC;IAEH,6BAAqB,CAAC,WAAW,GAAG,uBAAuB,CAAC","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-amd/components/DataGridSelectionCell/DataGridSelectionCell.types.js

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"DataGridSelectionCell.types.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-table/src/components/DataGridSelectionCell/DataGridSelectionCell.types.ts"],"names":[],"mappings":"","sourcesContent":["import {\n  TableSelectionCellProps,\n  TableSelectionCellSlots,\n  TableSelectionCellState,\n} from '../TableSelectionCell/TableSelectionCell.types';\n\nexport type DataGridSelectionCellSlots = TableSelectionCellSlots;\n\n/**\n * DataGridSelectionCell Props\n */\nexport type DataGridSelectionCellProps = TableSelectionCellProps;\n\n/**\n * State used in rendering DataGridSelectionCell\n */\nexport type DataGridSelectionCellState = TableSelectionCellState;\n"]}

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

@@ -0,0 +1,10 @@
+define(["require", "exports", "tslib", "./DataGridSelectionCell", "./DataGridSelectionCell.types", "./renderDataGridSelectionCell", "./useDataGridSelectionCell", "./useDataGridSelectionCellStyles"], function (require, exports, tslib_1, DataGridSelectionCell_1, DataGridSelectionCell_types_1, renderDataGridSelectionCell_1, useDataGridSelectionCell_1, useDataGridSelectionCellStyles_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    tslib_1.__exportStar(DataGridSelectionCell_1, exports);
+    tslib_1.__exportStar(DataGridSelectionCell_types_1, exports);
+    tslib_1.__exportStar(renderDataGridSelectionCell_1, exports);
+    tslib_1.__exportStar(useDataGridSelectionCell_1, exports);
+    tslib_1.__exportStar(useDataGridSelectionCellStyles_1, exports);
+});
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-table/src/components/DataGridSelectionCell/index.ts"],"names":[],"mappings":";;;IAAA,uDAAwC;IACxC,6DAA8C;IAC9C,6DAA8C;IAC9C,0DAA2C;IAC3C,gEAAiD","sourcesContent":["export * from './DataGridSelectionCell';\nexport * from './DataGridSelectionCell.types';\nexport * from './renderDataGridSelectionCell';\nexport * from './useDataGridSelectionCell';\nexport * from './useDataGridSelectionCellStyles';\n"]}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"renderDataGridSelectionCell.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-table/src/components/DataGridSelectionCell/renderDataGridSelectionCell.tsx"],"names":[],"mappings":";;;;IAGA;;OAEG;IACI,IAAM,oCAAoC,GAAG,UAAC,KAAiC;QACpF,OAAO,4DAAiC,CAAC,KAAK,CAAC,CAAC;IAClD,CAAC,CAAC;IAFW,QAAA,oCAAoC,wCAE/C","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-amd/components/DataGridSelectionCell/useDataGridSelectionCell.js

@@ -0,0 +1,39 @@
+define(["require", "exports", "tslib", "@fluentui/react-utilities", "../../contexts/dataGridContext", "../../contexts/rowIdContext", "../../contexts/tableHeaderContext", "../TableSelectionCell/useTableSelectionCell"], function (require, exports, tslib_1, react_utilities_1, dataGridContext_1, rowIdContext_1, tableHeaderContext_1, useTableSelectionCell_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.useDataGridSelectionCell_unstable = void 0;
+    /**
+     * 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
+     */
+    var useDataGridSelectionCell_unstable = function (props, ref) {
+        var isHeader = tableHeaderContext_1.useIsInTableHeader();
+        var rowId = rowIdContext_1.useTableRowIdContext();
+        var subtle = dataGridContext_1.useDataGridContext_unstable(function (ctx) { return ctx.subtleSelection; });
+        var checked = dataGridContext_1.useDataGridContext_unstable(function (ctx) {
+            if (isHeader && ctx.selection.selectionMode === 'multiselect') {
+                return ctx.selection.allRowsSelected ? true : ctx.selection.someRowsSelected ? 'mixed' : false;
+            }
+            return ctx.selection.isRowSelected(rowId);
+        });
+        var toggleAllRows = dataGridContext_1.useDataGridContext_unstable(function (ctx) { return ctx.selection.toggleAllRows; });
+        var type = dataGridContext_1.useDataGridContext_unstable(function (ctx) {
+            return ctx.selection.selectionMode === 'multiselect' ? 'checkbox' : 'radio';
+        });
+        var onClick = react_utilities_1.useEventCallback(function (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(tslib_1.__assign(tslib_1.__assign({ as: 'div', role: 'gridcell', checked: checked, type: type, hidden: isHeader && type === 'radio', 'aria-checked': isHeader ? checked : undefined, 'aria-selected': isHeader || checked === 'mixed' ? undefined : checked, subtle: subtle }, props), { onClick: onClick }), ref);
+    };
+    exports.useDataGridSelectionCell_unstable = useDataGridSelectionCell_unstable;
+});
+//# sourceMappingURL=useDataGridSelectionCell.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useDataGridSelectionCell.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-table/src/components/DataGridSelectionCell/useDataGridSelectionCell.ts"],"names":[],"mappings":";;;;IAQA;;;;;;;;OAQG;IACI,IAAM,iCAAiC,GAAG,UAC/C,KAAiC,EACjC,GAA2B;QAE3B,IAAM,QAAQ,GAAG,uCAAkB,EAAE,CAAC;QACtC,IAAM,KAAK,GAAG,mCAAoB,EAAE,CAAC;QACrC,IAAM,MAAM,GAAG,6CAA2B,CAAC,UAAA,GAAG,IAAI,OAAA,GAAG,CAAC,eAAe,EAAnB,CAAmB,CAAC,CAAC;QACvE,IAAM,OAAO,GAAG,6CAA2B,CAAC,UAAA,GAAG;YAC7C,IAAI,QAAQ,IAAI,GAAG,CAAC,SAAS,CAAC,aAAa,KAAK,aAAa,EAAE;gBAC7D,OAAO,GAAG,CAAC,SAAS,CAAC,eAAe,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC,SAAS,CAAC,gBAAgB,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC;aAChG;YAED,OAAO,GAAG,CAAC,SAAS,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QAC5C,CAAC,CAAC,CAAC;QAEH,IAAM,aAAa,GAAG,6CAA2B,CAAC,UAAA,GAAG,IAAI,OAAA,GAAG,CAAC,SAAS,CAAC,aAAa,EAA3B,CAA2B,CAAC,CAAC;QACtF,IAAM,IAAI,GAAG,6CAA2B,CAAC,UAAA,GAAG;YAC1C,OAAA,GAAG,CAAC,SAAS,CAAC,aAAa,KAAK,aAAa,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,OAAO;QAApE,CAAoE,CACrE,CAAC;QAEF,IAAM,OAAO,GAAG,kCAAgB,CAAC,UAAC,CAAyC;;YACzE,IAAI,QAAQ,EAAE;gBACZ,aAAa,CAAC,CAAC,CAAC,CAAC;aAClB;YAED,MAAA,KAAK,CAAC,OAAO,+CAAb,KAAK,EAAW,CAAC,CAAC,CAAC;QACrB,CAAC,CAAC,CAAC;QAEH,OAAO,sDAA8B,qCAEjC,EAAE,EAAE,KAAK,EACT,IAAI,EAAE,UAAU,EAChB,OAAO,SAAA,EACP,IAAI,MAAA,EACJ,MAAM,EAAE,QAAQ,IAAI,IAAI,KAAK,OAAO,EACpC,cAAc,EAAE,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,EAC9C,eAAe,EAAE,QAAQ,IAAI,OAAO,KAAK,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,OAAO,EACtE,MAAM,QAAA,IACH,KAAK,KACR,OAAO,SAAA,KAET,GAAG,CACJ,CAAC;IACJ,CAAC,CAAC;IA3CW,QAAA,iCAAiC,qCA2C5C","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-amd/components/DataGridSelectionCell/useDataGridSelectionCellStyles.js

@@ -0,0 +1,26 @@
+define(["require", "exports", "@griffel/react", "../TableSelectionCell/useTableSelectionCellStyles"], function (require, exports, react_1, useTableSelectionCellStyles_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.useDataGridSelectionCellStyles_unstable = exports.dataGridSelectionCellClassNames = void 0;
+    exports.dataGridSelectionCellClassNames = {
+        root: 'fui-DataGridSelectionCell',
+        checkboxIndicator: 'fui-DataGridSelectionCell__checkboxIndicator',
+        radioIndicator: 'fui-DataGridSelectionCell__radioIndicator',
+    };
+    /**
+     * Apply styling to the DataGridSelectionCell slots based on the state
+     */
+    var useDataGridSelectionCellStyles_unstable = function (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-amd/components/DataGridSelectionCell/useDataGridSelectionCellStyles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDataGridSelectionCellStyles.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-table/src/components/DataGridSelectionCell/useDataGridSelectionCellStyles.ts"],"names":[],"mappings":";;;;IAKa,QAAA,+BAA+B,GAA+C;QACzF,IAAI,EAAE,2BAA2B;QACjC,iBAAiB,EAAE,8CAA8C;QACjE,cAAc,EAAE,2CAA2C;KAC5D,CAAC;IAEF;;OAEG;IACI,IAAM,uCAAuC,GAAG,UACrD,KAAiC;QAEjC,kEAAoC,CAAC,KAAK,CAAC,CAAC;QAC5C,KAAK,CAAC,IAAI,CAAC,SAAS,GAAG,oBAAY,CAAC,uCAA+B,CAAC,IAAI,EAAE,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;QAEhG,IAAI,KAAK,CAAC,iBAAiB,EAAE;YAC3B,KAAK,CAAC,iBAAiB,CAAC,SAAS,GAAG,oBAAY,CAC9C,uCAA+B,CAAC,iBAAiB,EACjD,KAAK,CAAC,iBAAiB,CAAC,SAAS,CAClC,CAAC;SACH;QAED,IAAI,KAAK,CAAC,cAAc,EAAE;YACxB,KAAK,CAAC,cAAc,CAAC,SAAS,GAAG,oBAAY,CAC3C,uCAA+B,CAAC,cAAc,EAC9C,KAAK,CAAC,cAAc,CAAC,SAAS,CAC/B,CAAC;SACH;QAED,OAAO,KAAK,CAAC;IACf,CAAC,CAAC;IArBW,QAAA,uCAAuC,2CAqBlD","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-amd/components/Table/Table.js

@@ -0,0 +1,15 @@
+define(["require", "exports", "react", "./useTable", "./renderTable", "./useTableStyles", "./useTableContextValues"], function (require, exports, React, useTable_1, renderTable_1, useTableStyles_1, useTableContextValues_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.Table = void 0;
+    /**
+     * Table component
+     */
+    exports.Table = React.forwardRef(function (props, ref) {
+        var state = useTable_1.useTable_unstable(props, ref);
+        useTableStyles_1.useTableStyles_unstable(state);
+        return renderTable_1.renderTable_unstable(state, useTableContextValues_1.useTableContextValues_unstable(state));
+    });
+    exports.Table.displayName = 'Table';
+});
+//# sourceMappingURL=Table.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Table.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-table/src/components/Table/Table.tsx"],"names":[],"mappings":";;;;IAQA;;OAEG;IACU,QAAA,KAAK,GAAoC,KAAK,CAAC,UAAU,CAAC,UAAC,KAAK,EAAE,GAAG;QAChF,IAAM,KAAK,GAAG,4BAAiB,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC;QAE5C,wCAAuB,CAAC,KAAK,CAAC,CAAC;QAC/B,OAAO,kCAAoB,CAAC,KAAK,EAAE,sDAA8B,CAAC,KAAK,CAAC,CAAC,CAAC;IAC5E,CAAC,CAAC,CAAC;IAEH,aAAK,CAAC,WAAW,GAAG,OAAO,CAAC","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-amd/components/Table/Table.types.js

@@ -0,0 +1,5 @@
+define(["require", "exports"], function (require, exports) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+});
+//# sourceMappingURL=Table.types.js.map

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

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

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

@@ -0,0 +1,10 @@
+define(["require", "exports", "tslib", "./Table", "./Table.types", "./renderTable", "./useTable", "./useTableStyles"], function (require, exports, tslib_1, Table_1, Table_types_1, renderTable_1, useTable_1, useTableStyles_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    tslib_1.__exportStar(Table_1, exports);
+    tslib_1.__exportStar(Table_types_1, exports);
+    tslib_1.__exportStar(renderTable_1, exports);
+    tslib_1.__exportStar(useTable_1, exports);
+    tslib_1.__exportStar(useTableStyles_1, exports);
+});
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-table/src/components/Table/index.ts"],"names":[],"mappings":";;;IAAA,uCAAwB;IACxB,6CAA8B;IAC9B,6CAA8B;IAC9B,0CAA2B;IAC3B,gDAAiC","sourcesContent":["export * from './Table';\nexport * from './Table.types';\nexport * from './renderTable';\nexport * from './useTable';\nexport * from './useTableStyles';\n"]}

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

@@ -0,0 +1,15 @@
+define(["require", "exports", "tslib", "react", "@fluentui/react-utilities", "../../contexts/tableContext"], function (require, exports, tslib_1, React, react_utilities_1, tableContext_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.renderTable_unstable = void 0;
+    /**
+     * Render the final JSX of Table
+     */
+    var renderTable_unstable = function (state, contextValues) {
+        var _a = react_utilities_1.getSlots(state), slots = _a.slots, slotProps = _a.slotProps;
+        return (React.createElement(tableContext_1.TableContextProvider, { value: contextValues.table },
+            React.createElement(slots.root, tslib_1.__assign({}, slotProps.root))));
+    };
+    exports.renderTable_unstable = renderTable_unstable;
+});
+//# sourceMappingURL=renderTable.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"renderTable.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-table/src/components/Table/renderTable.tsx"],"names":[],"mappings":";;;;IAKA;;OAEG;IACI,IAAM,oBAAoB,GAAG,UAAC,KAAiB,EAAE,aAAiC;QACjF,IAAA,KAAuB,0BAAQ,CAAa,KAAK,CAAC,EAAhD,KAAK,WAAA,EAAE,SAAS,eAAgC,CAAC;QAEzD,OAAO,CACL,oBAAC,mCAAoB,IAAC,KAAK,EAAE,aAAa,CAAC,KAAK;YAC9C,oBAAC,KAAK,CAAC,IAAI,uBAAK,SAAS,CAAC,IAAI,EAAI,CACb,CACxB,CAAC;IACJ,CAAC,CAAC;IARW,QAAA,oBAAoB,wBAQ/B","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { TableState, TableSlots, TableContextValues } from './Table.types';\nimport { TableContextProvider } from '../../contexts/tableContext';\n\n/**\n * Render the final JSX of Table\n */\nexport const renderTable_unstable = (state: TableState, contextValues: TableContextValues) => {\n  const { slots, slotProps } = getSlots<TableSlots>(state);\n\n  return (\n    <TableContextProvider value={contextValues.table}>\n      <slots.root {...slotProps.root} />\n    </TableContextProvider>\n  );\n};\n"]}

package/lib-amd/components/Table/useTable.js

@@ -0,0 +1,29 @@
+define(["require", "exports", "tslib", "@fluentui/react-utilities"], function (require, exports, tslib_1, react_utilities_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.useTable_unstable = void 0;
+    /**
+     * Create the state required to render Table.
+     *
+     * The returned state can be modified with hooks such as useTableStyles_unstable,
+     * before being passed to renderTable_unstable.
+     *
+     * @param props - props from this instance of Table
+     * @param ref - reference to root HTMLElement of Table
+     */
+    var useTable_unstable = function (props, ref) {
+        var _a, _b, _c, _d;
+        var rootComponent = ((_a = props.as) !== null && _a !== void 0 ? _a : props.noNativeElements) ? 'div' : 'table';
+        return {
+            components: {
+                root: rootComponent,
+            },
+            root: react_utilities_1.getNativeElementProps(rootComponent, tslib_1.__assign({ ref: ref, role: rootComponent === 'div' ? 'table' : undefined }, props)),
+            size: (_b = props.size) !== null && _b !== void 0 ? _b : 'medium',
+            noNativeElements: (_c = props.noNativeElements) !== null && _c !== void 0 ? _c : false,
+            sortable: (_d = props.sortable) !== null && _d !== void 0 ? _d : false,
+        };
+    };
+    exports.useTable_unstable = useTable_unstable;
+});
+//# sourceMappingURL=useTable.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useTable.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-table/src/components/Table/useTable.ts"],"names":[],"mappings":";;;;IAIA;;;;;;;;OAQG;IACI,IAAM,iBAAiB,GAAG,UAAC,KAAiB,EAAE,GAA2B;;QAC9E,IAAM,aAAa,GAAG,CAAA,MAAA,KAAK,CAAC,EAAE,mCAAI,KAAK,CAAC,gBAAgB,EAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC;QAE3E,OAAO;YACL,UAAU,EAAE;gBACV,IAAI,EAAE,aAAa;aACpB;YACD,IAAI,EAAE,uCAAqB,CAAC,aAAa,qBACvC,GAAG,KAAA,EACH,IAAI,EAAE,aAAa,KAAK,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,IAChD,KAAK,EACR;YACF,IAAI,EAAE,MAAA,KAAK,CAAC,IAAI,mCAAI,QAAQ;YAC5B,gBAAgB,EAAE,MAAA,KAAK,CAAC,gBAAgB,mCAAI,KAAK;YACjD,QAAQ,EAAE,MAAA,KAAK,CAAC,QAAQ,mCAAI,KAAK;SAClC,CAAC;IACJ,CAAC,CAAC;IAhBW,QAAA,iBAAiB,qBAgB5B","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps } from '@fluentui/react-utilities';\nimport type { TableProps, TableState } from './Table.types';\n\n/**\n * Create the state required to render Table.\n *\n * The returned state can be modified with hooks such as useTableStyles_unstable,\n * before being passed to renderTable_unstable.\n *\n * @param props - props from this instance of Table\n * @param ref - reference to root HTMLElement of Table\n */\nexport const useTable_unstable = (props: TableProps, ref: React.Ref<HTMLElement>): TableState => {\n  const rootComponent = props.as ?? props.noNativeElements ? 'div' : 'table';\n\n  return {\n    components: {\n      root: rootComponent,\n    },\n    root: getNativeElementProps(rootComponent, {\n      ref,\n      role: rootComponent === 'div' ? 'table' : undefined,\n      ...props,\n    }),\n    size: props.size ?? 'medium',\n    noNativeElements: props.noNativeElements ?? false,\n    sortable: props.sortable ?? false,\n  };\n};\n"]}

package/lib-amd/components/Table/useTableContextValues.js

@@ -0,0 +1,18 @@
+define(["require", "exports", "react"], function (require, exports, React) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.useTableContextValues_unstable = void 0;
+    function useTableContextValues_unstable(state) {
+        var size = state.size, noNativeElements = state.noNativeElements, sortable = state.sortable;
+        var tableContext = React.useMemo(function () { return ({
+            noNativeElements: noNativeElements,
+            size: size,
+            sortable: sortable,
+        }); }, [noNativeElements, size, sortable]);
+        return {
+            table: tableContext,
+        };
+    }
+    exports.useTableContextValues_unstable = useTableContextValues_unstable;
+});
+//# sourceMappingURL=useTableContextValues.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useTableContextValues.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-table/src/components/Table/useTableContextValues.ts"],"names":[],"mappings":";;;;IAGA,SAAgB,8BAA8B,CAAC,KAAiB;QACtD,IAAA,IAAI,GAAiC,KAAK,KAAtC,EAAE,gBAAgB,GAAe,KAAK,iBAApB,EAAE,QAAQ,GAAK,KAAK,SAAV,CAAW;QAEnD,IAAM,YAAY,GAAG,KAAK,CAAC,OAAO,CAChC,cAAM,OAAA,CAAC;YACL,gBAAgB,kBAAA;YAChB,IAAI,MAAA;YACJ,QAAQ,UAAA;SACT,CAAC,EAJI,CAIJ,EACF,CAAC,gBAAgB,EAAE,IAAI,EAAE,QAAQ,CAAC,CACnC,CAAC;QAEF,OAAO;YACL,KAAK,EAAE,YAAY;SACpB,CAAC;IACJ,CAAC;IAfD,wEAeC","sourcesContent":["import * as React from 'react';\nimport { TableContextValues, TableState } from './Table.types';\n\nexport function useTableContextValues_unstable(state: TableState): TableContextValues {\n  const { size, noNativeElements, sortable } = state;\n\n  const tableContext = React.useMemo(\n    () => ({\n      noNativeElements,\n      size,\n      sortable,\n    }),\n    [noNativeElements, size, sortable],\n  );\n\n  return {\n    table: tableContext,\n  };\n}\n"]}

package/lib-amd/components/Table/useTableStyles.js

@@ -0,0 +1,45 @@
+define(["require", "exports", "@griffel/react", "@fluentui/react-theme"], function (require, exports, react_1, react_theme_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.useTableStyles_unstable = exports.tableClassNames = exports.tableClassName = void 0;
+    exports.tableClassName = 'fui-Table';
+    exports.tableClassNames = {
+        root: 'fui-Table',
+    };
+    var useTableLayoutStyles = react_1.makeStyles({
+        root: {
+            display: 'table',
+            verticalAlign: 'middle',
+            width: '100%',
+            tableLayout: 'fixed',
+        },
+    });
+    var useFlexLayoutStyles = react_1.makeStyles({
+        root: {
+            display: 'block',
+        },
+    });
+    /**
+     * Styles for the root slot
+     */
+    var useStyles = react_1.makeStyles({
+        root: {
+            borderCollapse: 'collapse',
+            backgroundColor: react_theme_1.tokens.colorSubtleBackground,
+        },
+    });
+    /**
+     * Apply styling to the Table slots based on the state
+     */
+    var useTableStyles_unstable = function (state) {
+        var styles = useStyles();
+        var layoutStyles = {
+            table: useTableLayoutStyles(),
+            flex: useFlexLayoutStyles(),
+        };
+        state.root.className = react_1.mergeClasses(exports.tableClassName, styles.root, state.noNativeElements ? layoutStyles.flex.root : layoutStyles.table.root, state.root.className);
+        return state;
+    };
+    exports.useTableStyles_unstable = useTableStyles_unstable;
+});
+//# sourceMappingURL=useTableStyles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useTableStyles.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-table/src/components/Table/useTableStyles.ts"],"names":[],"mappings":";;;;IAKa,QAAA,cAAc,GAAG,WAAW,CAAC;IAC7B,QAAA,eAAe,GAA+B;QACzD,IAAI,EAAE,WAAW;KAClB,CAAC;IAEF,IAAM,oBAAoB,GAAG,kBAAU,CAAC;QACtC,IAAI,EAAE;YACJ,OAAO,EAAE,OAAO;YAChB,aAAa,EAAE,QAAQ;YACvB,KAAK,EAAE,MAAM;YACb,WAAW,EAAE,OAAO;SACrB;KACF,CAAC,CAAC;IAEH,IAAM,mBAAmB,GAAG,kBAAU,CAAC;QACrC,IAAI,EAAE;YACJ,OAAO,EAAE,OAAO;SACjB;KACF,CAAC,CAAC;IAEH;;OAEG;IACH,IAAM,SAAS,GAAG,kBAAU,CAAC;QAC3B,IAAI,EAAE;YACJ,cAAc,EAAE,UAAU;YAC1B,eAAe,EAAE,oBAAM,CAAC,qBAAqB;SAC9C;KACF,CAAC,CAAC;IAEH;;OAEG;IACI,IAAM,uBAAuB,GAAG,UAAC,KAAiB;QACvD,IAAM,MAAM,GAAG,SAAS,EAAE,CAAC;QAC3B,IAAM,YAAY,GAAG;YACnB,KAAK,EAAE,oBAAoB,EAAE;YAC7B,IAAI,EAAE,mBAAmB,EAAE;SAC5B,CAAC;QACF,KAAK,CAAC,IAAI,CAAC,SAAS,GAAG,oBAAY,CACjC,sBAAc,EACd,MAAM,CAAC,IAAI,EACX,KAAK,CAAC,gBAAgB,CAAC,CAAC,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,YAAY,CAAC,KAAK,CAAC,IAAI,EACzE,KAAK,CAAC,IAAI,CAAC,SAAS,CACrB,CAAC;QAEF,OAAO,KAAK,CAAC;IACf,CAAC,CAAC;IAdW,QAAA,uBAAuB,2BAclC","sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { TableSlots, TableState } from './Table.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const tableClassName = 'fui-Table';\nexport const tableClassNames: SlotClassNames<TableSlots> = {\n  root: 'fui-Table',\n};\n\nconst useTableLayoutStyles = makeStyles({\n  root: {\n    display: 'table',\n    verticalAlign: 'middle',\n    width: '100%',\n    tableLayout: 'fixed',\n  },\n});\n\nconst useFlexLayoutStyles = makeStyles({\n  root: {\n    display: 'block',\n  },\n});\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    borderCollapse: 'collapse',\n    backgroundColor: tokens.colorSubtleBackground,\n  },\n});\n\n/**\n * Apply styling to the Table slots based on the state\n */\nexport const useTableStyles_unstable = (state: TableState): TableState => {\n  const styles = useStyles();\n  const layoutStyles = {\n    table: useTableLayoutStyles(),\n    flex: useFlexLayoutStyles(),\n  };\n  state.root.className = mergeClasses(\n    tableClassName,\n    styles.root,\n    state.noNativeElements ? layoutStyles.flex.root : layoutStyles.table.root,\n    state.root.className,\n  );\n\n  return state;\n};\n"]}

package/lib-amd/components/TableBody/TableBody.js

@@ -0,0 +1,15 @@
+define(["require", "exports", "react", "./useTableBody", "./renderTableBody", "./useTableBodyStyles"], function (require, exports, React, useTableBody_1, renderTableBody_1, useTableBodyStyles_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.TableBody = void 0;
+    /**
+     * TableBody component
+     */
+    exports.TableBody = React.forwardRef(function (props, ref) {
+        var state = useTableBody_1.useTableBody_unstable(props, ref);
+        useTableBodyStyles_1.useTableBodyStyles_unstable(state);
+        return renderTableBody_1.renderTableBody_unstable(state);
+    });
+    exports.TableBody.displayName = 'TableBody';
+});
+//# sourceMappingURL=TableBody.js.map

package/lib-amd/components/TableBody/TableBody.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableBody.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-table/src/components/TableBody/TableBody.tsx"],"names":[],"mappings":";;;;IAOA;;OAEG;IACU,QAAA,SAAS,GAAwC,KAAK,CAAC,UAAU,CAAC,UAAC,KAAK,EAAE,GAAG;QACxF,IAAM,KAAK,GAAG,oCAAqB,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC;QAEhD,gDAA2B,CAAC,KAAK,CAAC,CAAC;QACnC,OAAO,0CAAwB,CAAC,KAAK,CAAC,CAAC;IACzC,CAAC,CAAC,CAAC;IAEH,iBAAS,CAAC,WAAW,GAAG,WAAW,CAAC","sourcesContent":["import * as React from 'react';\nimport { useTableBody_unstable } from './useTableBody';\nimport { renderTableBody_unstable } from './renderTableBody';\nimport { useTableBodyStyles_unstable } from './useTableBodyStyles';\nimport type { TableBodyProps } from './TableBody.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * TableBody component\n */\nexport const TableBody: ForwardRefComponent<TableBodyProps> = React.forwardRef((props, ref) => {\n  const state = useTableBody_unstable(props, ref);\n\n  useTableBodyStyles_unstable(state);\n  return renderTableBody_unstable(state);\n});\n\nTableBody.displayName = 'TableBody';\n"]}

package/lib-amd/components/TableBody/TableBody.types.js

@@ -0,0 +1,5 @@
+define(["require", "exports"], function (require, exports) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+});
+//# sourceMappingURL=TableBody.types.js.map

package/lib-amd/components/TableBody/TableBody.types.js.map

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

package/lib-amd/components/TableBody/index.js

@@ -0,0 +1,10 @@
+define(["require", "exports", "tslib", "./TableBody", "./TableBody.types", "./renderTableBody", "./useTableBody", "./useTableBodyStyles"], function (require, exports, tslib_1, TableBody_1, TableBody_types_1, renderTableBody_1, useTableBody_1, useTableBodyStyles_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    tslib_1.__exportStar(TableBody_1, exports);
+    tslib_1.__exportStar(TableBody_types_1, exports);
+    tslib_1.__exportStar(renderTableBody_1, exports);
+    tslib_1.__exportStar(useTableBody_1, exports);
+    tslib_1.__exportStar(useTableBodyStyles_1, exports);
+});
+//# sourceMappingURL=index.js.map

package/lib-amd/components/TableBody/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-table/src/components/TableBody/index.ts"],"names":[],"mappings":";;;IAAA,2CAA4B;IAC5B,iDAAkC;IAClC,iDAAkC;IAClC,8CAA+B;IAC/B,oDAAqC","sourcesContent":["export * from './TableBody';\nexport * from './TableBody.types';\nexport * from './renderTableBody';\nexport * from './useTableBody';\nexport * from './useTableBodyStyles';\n"]}

package/lib-amd/components/TableBody/renderTableBody.js

@@ -0,0 +1,14 @@
+define(["require", "exports", "tslib", "react", "@fluentui/react-utilities"], function (require, exports, tslib_1, React, react_utilities_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.renderTableBody_unstable = void 0;
+    /**
+     * Render the final JSX of TableBody
+     */
+    var renderTableBody_unstable = function (state) {
+        var _a = react_utilities_1.getSlots(state), slots = _a.slots, slotProps = _a.slotProps;
+        return React.createElement(slots.root, tslib_1.__assign({}, slotProps.root));
+    };
+    exports.renderTableBody_unstable = renderTableBody_unstable;
+});
+//# sourceMappingURL=renderTableBody.js.map

package/lib-amd/components/TableBody/renderTableBody.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"renderTableBody.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-table/src/components/TableBody/renderTableBody.tsx"],"names":[],"mappings":";;;;IAIA;;OAEG;IACI,IAAM,wBAAwB,GAAG,UAAC,KAAqB;QACtD,IAAA,KAAuB,0BAAQ,CAAiB,KAAK,CAAC,EAApD,KAAK,WAAA,EAAE,SAAS,eAAoC,CAAC;QAE7D,OAAO,oBAAC,KAAK,CAAC,IAAI,uBAAK,SAAS,CAAC,IAAI,EAAI,CAAC;IAC5C,CAAC,CAAC;IAJW,QAAA,wBAAwB,4BAInC","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { TableBodyState, TableBodySlots } from './TableBody.types';\n\n/**\n * Render the final JSX of TableBody\n */\nexport const renderTableBody_unstable = (state: TableBodyState) => {\n  const { slots, slotProps } = getSlots<TableBodySlots>(state);\n\n  return <slots.root {...slotProps.root} />;\n};\n"]}

package/lib-amd/components/TableBody/useTableBody.js

@@ -0,0 +1,28 @@
+define(["require", "exports", "tslib", "@fluentui/react-utilities", "../../contexts/tableContext"], function (require, exports, tslib_1, react_utilities_1, tableContext_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.useTableBody_unstable = void 0;
+    /**
+     * Create the state required to render TableBody.
+     *
+     * The returned state can be modified with hooks such as useTableBodyStyles_unstable,
+     * before being passed to renderTableBody_unstable.
+     *
+     * @param props - props from this instance of TableBody
+     * @param ref - reference to root HTMLElement of TableBody
+     */
+    var useTableBody_unstable = function (props, ref) {
+        var _a;
+        var noNativeElements = tableContext_1.useTableContext().noNativeElements;
+        var rootComponent = ((_a = props.as) !== null && _a !== void 0 ? _a : noNativeElements) ? 'div' : 'tbody';
+        return {
+            components: {
+                root: rootComponent,
+            },
+            root: react_utilities_1.getNativeElementProps(rootComponent, tslib_1.__assign({ ref: ref, role: rootComponent === 'div' ? 'rowgroup' : undefined }, props)),
+            noNativeElements: noNativeElements,
+        };
+    };
+    exports.useTableBody_unstable = useTableBody_unstable;
+});
+//# sourceMappingURL=useTableBody.js.map

package/lib-amd/components/TableBody/useTableBody.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTableBody.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-table/src/components/TableBody/useTableBody.ts"],"names":[],"mappings":";;;;IAKA;;;;;;;;OAQG;IACI,IAAM,qBAAqB,GAAG,UAAC,KAAqB,EAAE,GAA2B;;QAC9E,IAAA,gBAAgB,GAAK,8BAAe,EAAE,iBAAtB,CAAuB;QAC/C,IAAM,aAAa,GAAG,CAAA,MAAA,KAAK,CAAC,EAAE,mCAAI,gBAAgB,EAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC;QAErE,OAAO;YACL,UAAU,EAAE;gBACV,IAAI,EAAE,aAAa;aACpB;YACD,IAAI,EAAE,uCAAqB,CAAC,aAAa,qBACvC,GAAG,KAAA,EACH,IAAI,EAAE,aAAa,KAAK,KAAK,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,IACnD,KAAK,EACR;YACF,gBAAgB,kBAAA;SACjB,CAAC;IACJ,CAAC,CAAC;IAfW,QAAA,qBAAqB,yBAehC","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps } from '@fluentui/react-utilities';\nimport type { TableBodyProps, TableBodyState } from './TableBody.types';\nimport { useTableContext } from '../../contexts/tableContext';\n\n/**\n * Create the state required to render TableBody.\n *\n * The returned state can be modified with hooks such as useTableBodyStyles_unstable,\n * before being passed to renderTableBody_unstable.\n *\n * @param props - props from this instance of TableBody\n * @param ref - reference to root HTMLElement of TableBody\n */\nexport const useTableBody_unstable = (props: TableBodyProps, ref: React.Ref<HTMLElement>): TableBodyState => {\n  const { noNativeElements } = useTableContext();\n  const rootComponent = props.as ?? noNativeElements ? 'div' : 'tbody';\n\n  return {\n    components: {\n      root: rootComponent,\n    },\n    root: getNativeElementProps(rootComponent, {\n      ref,\n      role: rootComponent === 'div' ? 'rowgroup' : undefined,\n      ...props,\n    }),\n    noNativeElements,\n  };\n};\n"]}

package/lib-amd/components/TableBody/useTableBodyStyles.js

@@ -0,0 +1,32 @@
+define(["require", "exports", "@griffel/react"], function (require, exports, react_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.useTableBodyStyles_unstable = exports.tableBodyClassNames = exports.tableBodyClassName = void 0;
+    var useTableLayoutStyles = react_1.makeStyles({
+        root: {
+            display: 'table-row-group',
+        },
+    });
+    var useFlexLayoutStyles = react_1.makeStyles({
+        root: {
+            display: 'block',
+        },
+    });
+    exports.tableBodyClassName = 'fui-TableBody';
+    exports.tableBodyClassNames = {
+        root: 'fui-TableBody',
+    };
+    /**
+     * Apply styling to the TableBody slots based on the state
+     */
+    var useTableBodyStyles_unstable = function (state) {
+        var layoutStyles = {
+            table: useTableLayoutStyles(),
+            flex: useFlexLayoutStyles(),
+        };
+        state.root.className = react_1.mergeClasses(exports.tableBodyClassName, state.noNativeElements ? layoutStyles.flex.root : layoutStyles.table.root, state.root.className);
+        return state;
+    };
+    exports.useTableBodyStyles_unstable = useTableBodyStyles_unstable;
+});
+//# sourceMappingURL=useTableBodyStyles.js.map

package/lib-amd/components/TableBody/useTableBodyStyles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTableBodyStyles.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-table/src/components/TableBody/useTableBodyStyles.ts"],"names":[],"mappings":";;;;IAIA,IAAM,oBAAoB,GAAG,kBAAU,CAAC;QACtC,IAAI,EAAE;YACJ,OAAO,EAAE,iBAAiB;SAC3B;KACF,CAAC,CAAC;IAEH,IAAM,mBAAmB,GAAG,kBAAU,CAAC;QACrC,IAAI,EAAE;YACJ,OAAO,EAAE,OAAO;SACjB;KACF,CAAC,CAAC;IAEU,QAAA,kBAAkB,GAAG,eAAe,CAAC;IACrC,QAAA,mBAAmB,GAAmC;QACjE,IAAI,EAAE,eAAe;KACtB,CAAC;IAEF;;OAEG;IACI,IAAM,2BAA2B,GAAG,UAAC,KAAqB;QAC/D,IAAM,YAAY,GAAG;YACnB,KAAK,EAAE,oBAAoB,EAAE;YAC7B,IAAI,EAAE,mBAAmB,EAAE;SAC5B,CAAC;QACF,KAAK,CAAC,IAAI,CAAC,SAAS,GAAG,oBAAY,CACjC,0BAAkB,EAClB,KAAK,CAAC,gBAAgB,CAAC,CAAC,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,YAAY,CAAC,KAAK,CAAC,IAAI,EACzE,KAAK,CAAC,IAAI,CAAC,SAAS,CACrB,CAAC;QAEF,OAAO,KAAK,CAAC;IACf,CAAC,CAAC;IAZW,QAAA,2BAA2B,+BAYtC","sourcesContent":["import { mergeClasses, makeStyles } from '@griffel/react';\nimport type { TableBodySlots, TableBodyState } from './TableBody.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nconst useTableLayoutStyles = makeStyles({\n  root: {\n    display: 'table-row-group',\n  },\n});\n\nconst useFlexLayoutStyles = makeStyles({\n  root: {\n    display: 'block',\n  },\n});\n\nexport const tableBodyClassName = 'fui-TableBody';\nexport const tableBodyClassNames: SlotClassNames<TableBodySlots> = {\n  root: 'fui-TableBody',\n};\n\n/**\n * Apply styling to the TableBody slots based on the state\n */\nexport const useTableBodyStyles_unstable = (state: TableBodyState): TableBodyState => {\n  const layoutStyles = {\n    table: useTableLayoutStyles(),\n    flex: useFlexLayoutStyles(),\n  };\n  state.root.className = mergeClasses(\n    tableBodyClassName,\n    state.noNativeElements ? layoutStyles.flex.root : layoutStyles.table.root,\n    state.root.className,\n  );\n\n  return state;\n};\n"]}