@fluentui/react-table 9.0.0-rc.5 → 9.0.1

package/lib-amd/hooks/useTableSort.js

@@ -0,0 +1,74 @@
+define(["require", "exports", "tslib", "@fluentui/react-utilities"], function (require, exports, tslib_1, react_utilities_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.useTableSortState = exports.useTableSort = exports.defaultTableSortState = void 0;
+    var noop = function () { return undefined; };
+    exports.defaultTableSortState = {
+        getSortDirection: function () { return 'ascending'; },
+        setColumnSort: noop,
+        sort: function (rows) { return tslib_1.__spreadArray([], rows); },
+        sortColumn: undefined,
+        sortDirection: 'ascending',
+        toggleColumnSort: noop,
+    };
+    function useTableSort(options) {
+        // False positive, these plugin hooks are intended to be run on every render
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        return function (tableState) { return useTableSortState(tableState, options); };
+    }
+    exports.useTableSort = useTableSort;
+    function useTableSortState(tableState, options) {
+        var columns = tableState.columns;
+        var sortState = options.sortState, defaultSortState = options.defaultSortState, onSortChange = options.onSortChange;
+        var _a = react_utilities_1.useControllableState({
+            initialState: {
+                sortDirection: 'ascending',
+                sortColumn: undefined,
+            },
+            defaultState: defaultSortState,
+            state: sortState,
+        }), sorted = _a[0], setSorted = _a[1];
+        var sortColumn = sorted.sortColumn, sortDirection = sorted.sortDirection;
+        var toggleColumnSort = function (e, columnId) {
+            setSorted(function (s) {
+                var newState = tslib_1.__assign(tslib_1.__assign({}, s), { sortColumn: columnId });
+                if (s.sortColumn === columnId) {
+                    newState.sortDirection = s.sortDirection === 'ascending' ? 'descending' : 'ascending';
+                }
+                else {
+                    newState.sortDirection = 'ascending';
+                }
+                onSortChange === null || onSortChange === void 0 ? void 0 : onSortChange(e, newState);
+                return newState;
+            });
+        };
+        var setColumnSort = function (e, nextSortColumn, nextSortDirection) {
+            var newState = { sortColumn: nextSortColumn, sortDirection: nextSortDirection };
+            onSortChange === null || onSortChange === void 0 ? void 0 : onSortChange(e, newState);
+            setSorted(newState);
+        };
+        var sort = function (rows) {
+            return rows.slice().sort(function (a, b) {
+                var sortColumnDef = columns.find(function (column) { return column.columnId === sortColumn; });
+                if (!(sortColumnDef === null || sortColumnDef === void 0 ? void 0 : sortColumnDef.compare)) {
+                    return 0;
+                }
+                var mod = sortDirection === 'ascending' ? 1 : -1;
+                return sortColumnDef.compare(a.item, b.item) * mod;
+            });
+        };
+        var getSortDirection = function (columnId) {
+            return sortColumn === columnId ? sortDirection : undefined;
+        };
+        return tslib_1.__assign(tslib_1.__assign({}, tableState), { sort: {
+                sort: sort,
+                sortColumn: sortColumn,
+                sortDirection: sortDirection,
+                setColumnSort: setColumnSort,
+                toggleColumnSort: toggleColumnSort,
+                getSortDirection: getSortDirection,
+            } });
+    }
+    exports.useTableSortState = useTableSortState;
+});
+//# sourceMappingURL=useTableSort.js.map

package/lib-amd/hooks/useTableSort.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTableSort.js","sourceRoot":"","sources":["../../../../../../../../packages/react-components/react-table/src/hooks/useTableSort.ts"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { useControllableState } from '@fluentui/react-utilities';\nimport type {\n  TableColumnId,\n  TableRowData,\n  SortState,\n  TableSortState,\n  TableFeaturesState,\n  UseTableSortOptions,\n} from './types';\n\nconst noop = () => undefined;\n\nexport const defaultTableSortState: TableSortState<unknown> = {\n  getSortDirection: () => 'ascending',\n  setColumnSort: noop,\n  sort: <TRowState extends TableRowData<unknown>>(rows: TRowState[]) => [...rows],\n  sortColumn: undefined,\n  sortDirection: 'ascending',\n  toggleColumnSort: noop,\n};\n\nexport function useTableSort<TItem>(options: UseTableSortOptions) {\n  // False positive, these plugin hooks are intended to be run on every render\n  // eslint-disable-next-line react-hooks/rules-of-hooks\n  return (tableState: TableFeaturesState<TItem>) => useTableSortState(tableState, options);\n}\n\nexport function useTableSortState<TItem>(\n  tableState: TableFeaturesState<TItem>,\n  options: UseTableSortOptions,\n): TableFeaturesState<TItem> {\n  const { columns } = tableState;\n  const { sortState, defaultSortState, onSortChange } = options;\n\n  const [sorted, setSorted] = useControllableState<SortState>({\n    initialState: {\n      sortDirection: 'ascending' as const,\n      sortColumn: undefined,\n    },\n    defaultState: defaultSortState,\n    state: sortState,\n  });\n\n  const { sortColumn, sortDirection } = sorted;\n\n  const toggleColumnSort = (e: React.SyntheticEvent, columnId: TableColumnId | undefined) => {\n    setSorted(s => {\n      const newState = { ...s, sortColumn: columnId };\n      if (s.sortColumn === columnId) {\n        newState.sortDirection = s.sortDirection === 'ascending' ? 'descending' : 'ascending';\n      } else {\n        newState.sortDirection = 'ascending';\n      }\n\n      onSortChange?.(e, newState);\n      return newState;\n    });\n  };\n\n  const setColumnSort: TableSortState<TItem>['setColumnSort'] = (e, nextSortColumn, nextSortDirection) => {\n    const newState = { sortColumn: nextSortColumn, sortDirection: nextSortDirection };\n    onSortChange?.(e, newState);\n    setSorted(newState);\n  };\n\n  const sort = <TRowState extends TableRowData<TItem>>(rows: TRowState[]) => {\n    return rows.slice().sort((a, b) => {\n      const sortColumnDef = columns.find(column => column.columnId === sortColumn);\n      if (!sortColumnDef?.compare) {\n        return 0;\n      }\n\n      const mod = sortDirection === 'ascending' ? 1 : -1;\n      return sortColumnDef.compare(a.item, b.item) * mod;\n    });\n  };\n\n  const getSortDirection: TableSortState<TItem>['getSortDirection'] = (columnId: TableColumnId) => {\n    return sortColumn === columnId ? sortDirection : undefined;\n  };\n\n  return {\n    ...tableState,\n    sort: {\n      sort,\n      sortColumn,\n      sortDirection,\n      setColumnSort,\n      toggleColumnSort,\n      getSortDirection,\n    },\n  };\n}\n"]}

package/lib-amd/index.js

@@ -0,0 +1,107 @@
+define(["require", "exports", "./hooks", "./TableCell", "./TableRow", "./TableBody", "./Table", "./TableHeader", "./TableHeaderCell", "./TableResizeHandle", "./contexts/tableContext", "./contexts/rowIdContext", "./TableSelectionCell", "./TableCellActions", "./TableCellLayout", "./DataGridCell", "./DataGridRow", "./DataGridBody", "./DataGrid", "./DataGridHeader", "./DataGridHeaderCell", "./DataGridSelectionCell"], function (require, exports, hooks_1, TableCell_1, TableRow_1, TableBody_1, Table_1, TableHeader_1, TableHeaderCell_1, TableResizeHandle_1, tableContext_1, rowIdContext_1, TableSelectionCell_1, TableCellActions_1, TableCellLayout_1, DataGridCell_1, DataGridRow_1, DataGridBody_1, DataGrid_1, DataGridHeader_1, DataGridHeaderCell_1, DataGridSelectionCell_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.dataGridSelectionCellClassNames = exports.renderDataGridSelectionCell_unstable = exports.useDataGridSelectionCell_unstable = exports.useDataGridSelectionCellStyles_unstable = exports.DataGridSelectionCell = exports.renderDataGridHeaderCell_unstable = exports.useDataGridHeaderCell_unstable = exports.useDataGridHeaderCellStyles_unstable = exports.dataGridHeaderCellClassNames = exports.DataGridHeaderCell = exports.renderDataGridHeader_unstable = exports.useDataGridHeader_unstable = exports.useDataGridHeaderStyles_unstable = exports.dataGridHeaderClassNames = exports.DataGridHeader = exports.useDataGridContextValues_unstable = exports.renderDataGrid_unstable = exports.useDataGrid_unstable = exports.useDataGridStyles_unstable = exports.dataGridClassNames = exports.DataGrid = exports.renderDataGridBody_unstable = exports.useDataGridBody_unstable = exports.useDataGridBodyStyles_unstable = exports.dataGridBodyClassNames = exports.DataGridBody = exports.renderDataGridRow_unstable = exports.useDataGridRow_unstable = exports.useDataGridRowStyles_unstable = exports.dataGridRowClassNames = exports.DataGridRow = exports.renderDataGridCell_unstable = exports.useDataGridCell_unstable = exports.useDataGridCellStyles_unstable = exports.dataGridCellClassNames = exports.DataGridCell = exports.renderTableCellLayout_unstable = exports.useTableCellLayout_unstable = exports.useTableCellLayoutStyles_unstable = exports.tableCellLayoutClassNames = exports.TableCellLayout = exports.renderTableCellActions_unstable = exports.useTableCellActions_unstable = exports.useTableCellActionsStyles_unstable = exports.tableCellActionsClassNames = exports.TableCellActions = exports.tableSelectionCellClassNames = exports.renderTableSelectionCell_unstable = exports.useTableSelectionCell_unstable = exports.useTableSelectionCellStyles_unstable = exports.TableSelectionCell = exports.TableRowIdContextProvider = exports.useTableRowIdContext = exports.useTableContext = exports.TableContextProvider = exports.renderTableResizeHandle_unstable = exports.useTableResizeHandle_unstable = exports.useTableResizeHandleStyles_unstable = exports.tableResizeHandleClassNames = exports.TableResizeHandle = exports.renderTableHeaderCell_unstable = exports.useTableHeaderCell_unstable = exports.useTableHeaderCellStyles_unstable = exports.tableHeaderCellClassNames = exports.tableHeaderCellClassName = exports.TableHeaderCell = exports.renderTableHeader_unstable = exports.useTableHeader_unstable = exports.useTableHeaderStyles_unstable = exports.tableHeaderClassName = exports.tableHeaderClassNames = exports.TableHeader = exports.renderTable_unstable = exports.useTable_unstable = exports.useTableStyles_unstable = exports.tableClassNames = exports.tableClassName = exports.Table = exports.renderTableBody_unstable = exports.useTableBody_unstable = exports.useTableBodyStyles_unstable = exports.tableBodyClassNames = exports.tableBodyClassName = exports.TableBody = exports.renderTableRow_unstable = exports.useTableRow_unstable = exports.useTableRowStyles_unstable = exports.tableRowClassName = exports.tableRowClassNames = exports.TableRow = exports.renderTableCell_unstable = exports.useTableCell_unstable = exports.useTableCellStyles_unstable = exports.tableCellClassName = exports.tableCellClassNames = exports.TableCell = exports.useTableColumnSizing_unstable = exports.createTableColumn = exports.useTableSort = exports.useTableSelection = exports.useTableFeatures = void 0;
+    Object.defineProperty(exports, "useTableFeatures", { enumerable: true, get: function () { return hooks_1.useTableFeatures; } });
+    Object.defineProperty(exports, "useTableSelection", { enumerable: true, get: function () { return hooks_1.useTableSelection; } });
+    Object.defineProperty(exports, "useTableSort", { enumerable: true, get: function () { return hooks_1.useTableSort; } });
+    Object.defineProperty(exports, "createTableColumn", { enumerable: true, get: function () { return hooks_1.createTableColumn; } });
+    Object.defineProperty(exports, "useTableColumnSizing_unstable", { enumerable: true, get: function () { return hooks_1.useTableColumnSizing_unstable; } });
+    Object.defineProperty(exports, "TableCell", { enumerable: true, get: function () { return TableCell_1.TableCell; } });
+    Object.defineProperty(exports, "tableCellClassNames", { enumerable: true, get: function () { return TableCell_1.tableCellClassNames; } });
+    Object.defineProperty(exports, "tableCellClassName", { enumerable: true, get: function () { return TableCell_1.tableCellClassName; } });
+    Object.defineProperty(exports, "useTableCellStyles_unstable", { enumerable: true, get: function () { return TableCell_1.useTableCellStyles_unstable; } });
+    Object.defineProperty(exports, "useTableCell_unstable", { enumerable: true, get: function () { return TableCell_1.useTableCell_unstable; } });
+    Object.defineProperty(exports, "renderTableCell_unstable", { enumerable: true, get: function () { return TableCell_1.renderTableCell_unstable; } });
+    Object.defineProperty(exports, "TableRow", { enumerable: true, get: function () { return TableRow_1.TableRow; } });
+    Object.defineProperty(exports, "tableRowClassNames", { enumerable: true, get: function () { return TableRow_1.tableRowClassNames; } });
+    Object.defineProperty(exports, "tableRowClassName", { enumerable: true, get: function () { return TableRow_1.tableRowClassName; } });
+    Object.defineProperty(exports, "useTableRowStyles_unstable", { enumerable: true, get: function () { return TableRow_1.useTableRowStyles_unstable; } });
+    Object.defineProperty(exports, "useTableRow_unstable", { enumerable: true, get: function () { return TableRow_1.useTableRow_unstable; } });
+    Object.defineProperty(exports, "renderTableRow_unstable", { enumerable: true, get: function () { return TableRow_1.renderTableRow_unstable; } });
+    Object.defineProperty(exports, "TableBody", { enumerable: true, get: function () { return TableBody_1.TableBody; } });
+    Object.defineProperty(exports, "tableBodyClassName", { enumerable: true, get: function () { return TableBody_1.tableBodyClassName; } });
+    Object.defineProperty(exports, "tableBodyClassNames", { enumerable: true, get: function () { return TableBody_1.tableBodyClassNames; } });
+    Object.defineProperty(exports, "useTableBodyStyles_unstable", { enumerable: true, get: function () { return TableBody_1.useTableBodyStyles_unstable; } });
+    Object.defineProperty(exports, "useTableBody_unstable", { enumerable: true, get: function () { return TableBody_1.useTableBody_unstable; } });
+    Object.defineProperty(exports, "renderTableBody_unstable", { enumerable: true, get: function () { return TableBody_1.renderTableBody_unstable; } });
+    Object.defineProperty(exports, "Table", { enumerable: true, get: function () { return Table_1.Table; } });
+    Object.defineProperty(exports, "tableClassName", { enumerable: true, get: function () { return Table_1.tableClassName; } });
+    Object.defineProperty(exports, "tableClassNames", { enumerable: true, get: function () { return Table_1.tableClassNames; } });
+    Object.defineProperty(exports, "useTableStyles_unstable", { enumerable: true, get: function () { return Table_1.useTableStyles_unstable; } });
+    Object.defineProperty(exports, "useTable_unstable", { enumerable: true, get: function () { return Table_1.useTable_unstable; } });
+    Object.defineProperty(exports, "renderTable_unstable", { enumerable: true, get: function () { return Table_1.renderTable_unstable; } });
+    Object.defineProperty(exports, "TableHeader", { enumerable: true, get: function () { return TableHeader_1.TableHeader; } });
+    Object.defineProperty(exports, "tableHeaderClassNames", { enumerable: true, get: function () { return TableHeader_1.tableHeaderClassNames; } });
+    Object.defineProperty(exports, "tableHeaderClassName", { enumerable: true, get: function () { return TableHeader_1.tableHeaderClassName; } });
+    Object.defineProperty(exports, "useTableHeaderStyles_unstable", { enumerable: true, get: function () { return TableHeader_1.useTableHeaderStyles_unstable; } });
+    Object.defineProperty(exports, "useTableHeader_unstable", { enumerable: true, get: function () { return TableHeader_1.useTableHeader_unstable; } });
+    Object.defineProperty(exports, "renderTableHeader_unstable", { enumerable: true, get: function () { return TableHeader_1.renderTableHeader_unstable; } });
+    Object.defineProperty(exports, "TableHeaderCell", { enumerable: true, get: function () { return TableHeaderCell_1.TableHeaderCell; } });
+    Object.defineProperty(exports, "tableHeaderCellClassName", { enumerable: true, get: function () { return TableHeaderCell_1.tableHeaderCellClassName; } });
+    Object.defineProperty(exports, "tableHeaderCellClassNames", { enumerable: true, get: function () { return TableHeaderCell_1.tableHeaderCellClassNames; } });
+    Object.defineProperty(exports, "useTableHeaderCellStyles_unstable", { enumerable: true, get: function () { return TableHeaderCell_1.useTableHeaderCellStyles_unstable; } });
+    Object.defineProperty(exports, "useTableHeaderCell_unstable", { enumerable: true, get: function () { return TableHeaderCell_1.useTableHeaderCell_unstable; } });
+    Object.defineProperty(exports, "renderTableHeaderCell_unstable", { enumerable: true, get: function () { return TableHeaderCell_1.renderTableHeaderCell_unstable; } });
+    Object.defineProperty(exports, "TableResizeHandle", { enumerable: true, get: function () { return TableResizeHandle_1.TableResizeHandle; } });
+    Object.defineProperty(exports, "tableResizeHandleClassNames", { enumerable: true, get: function () { return TableResizeHandle_1.tableResizeHandleClassNames; } });
+    Object.defineProperty(exports, "useTableResizeHandleStyles_unstable", { enumerable: true, get: function () { return TableResizeHandle_1.useTableResizeHandleStyles_unstable; } });
+    Object.defineProperty(exports, "useTableResizeHandle_unstable", { enumerable: true, get: function () { return TableResizeHandle_1.useTableResizeHandle_unstable; } });
+    Object.defineProperty(exports, "renderTableResizeHandle_unstable", { enumerable: true, get: function () { return TableResizeHandle_1.renderTableResizeHandle_unstable; } });
+    Object.defineProperty(exports, "TableContextProvider", { enumerable: true, get: function () { return tableContext_1.TableContextProvider; } });
+    Object.defineProperty(exports, "useTableContext", { enumerable: true, get: function () { return tableContext_1.useTableContext; } });
+    Object.defineProperty(exports, "useTableRowIdContext", { enumerable: true, get: function () { return rowIdContext_1.useTableRowIdContext; } });
+    Object.defineProperty(exports, "TableRowIdContextProvider", { enumerable: true, get: function () { return rowIdContext_1.TableRowIdContextProvider; } });
+    Object.defineProperty(exports, "TableSelectionCell", { enumerable: true, get: function () { return TableSelectionCell_1.TableSelectionCell; } });
+    Object.defineProperty(exports, "useTableSelectionCellStyles_unstable", { enumerable: true, get: function () { return TableSelectionCell_1.useTableSelectionCellStyles_unstable; } });
+    Object.defineProperty(exports, "useTableSelectionCell_unstable", { enumerable: true, get: function () { return TableSelectionCell_1.useTableSelectionCell_unstable; } });
+    Object.defineProperty(exports, "renderTableSelectionCell_unstable", { enumerable: true, get: function () { return TableSelectionCell_1.renderTableSelectionCell_unstable; } });
+    Object.defineProperty(exports, "tableSelectionCellClassNames", { enumerable: true, get: function () { return TableSelectionCell_1.tableSelectionCellClassNames; } });
+    Object.defineProperty(exports, "TableCellActions", { enumerable: true, get: function () { return TableCellActions_1.TableCellActions; } });
+    Object.defineProperty(exports, "tableCellActionsClassNames", { enumerable: true, get: function () { return TableCellActions_1.tableCellActionsClassNames; } });
+    Object.defineProperty(exports, "useTableCellActionsStyles_unstable", { enumerable: true, get: function () { return TableCellActions_1.useTableCellActionsStyles_unstable; } });
+    Object.defineProperty(exports, "useTableCellActions_unstable", { enumerable: true, get: function () { return TableCellActions_1.useTableCellActions_unstable; } });
+    Object.defineProperty(exports, "renderTableCellActions_unstable", { enumerable: true, get: function () { return TableCellActions_1.renderTableCellActions_unstable; } });
+    Object.defineProperty(exports, "TableCellLayout", { enumerable: true, get: function () { return TableCellLayout_1.TableCellLayout; } });
+    Object.defineProperty(exports, "tableCellLayoutClassNames", { enumerable: true, get: function () { return TableCellLayout_1.tableCellLayoutClassNames; } });
+    Object.defineProperty(exports, "useTableCellLayoutStyles_unstable", { enumerable: true, get: function () { return TableCellLayout_1.useTableCellLayoutStyles_unstable; } });
+    Object.defineProperty(exports, "useTableCellLayout_unstable", { enumerable: true, get: function () { return TableCellLayout_1.useTableCellLayout_unstable; } });
+    Object.defineProperty(exports, "renderTableCellLayout_unstable", { enumerable: true, get: function () { return TableCellLayout_1.renderTableCellLayout_unstable; } });
+    Object.defineProperty(exports, "DataGridCell", { enumerable: true, get: function () { return DataGridCell_1.DataGridCell; } });
+    Object.defineProperty(exports, "dataGridCellClassNames", { enumerable: true, get: function () { return DataGridCell_1.dataGridCellClassNames; } });
+    Object.defineProperty(exports, "useDataGridCellStyles_unstable", { enumerable: true, get: function () { return DataGridCell_1.useDataGridCellStyles_unstable; } });
+    Object.defineProperty(exports, "useDataGridCell_unstable", { enumerable: true, get: function () { return DataGridCell_1.useDataGridCell_unstable; } });
+    Object.defineProperty(exports, "renderDataGridCell_unstable", { enumerable: true, get: function () { return DataGridCell_1.renderDataGridCell_unstable; } });
+    Object.defineProperty(exports, "DataGridRow", { enumerable: true, get: function () { return DataGridRow_1.DataGridRow; } });
+    Object.defineProperty(exports, "dataGridRowClassNames", { enumerable: true, get: function () { return DataGridRow_1.dataGridRowClassNames; } });
+    Object.defineProperty(exports, "useDataGridRowStyles_unstable", { enumerable: true, get: function () { return DataGridRow_1.useDataGridRowStyles_unstable; } });
+    Object.defineProperty(exports, "useDataGridRow_unstable", { enumerable: true, get: function () { return DataGridRow_1.useDataGridRow_unstable; } });
+    Object.defineProperty(exports, "renderDataGridRow_unstable", { enumerable: true, get: function () { return DataGridRow_1.renderDataGridRow_unstable; } });
+    Object.defineProperty(exports, "DataGridBody", { enumerable: true, get: function () { return DataGridBody_1.DataGridBody; } });
+    Object.defineProperty(exports, "dataGridBodyClassNames", { enumerable: true, get: function () { return DataGridBody_1.dataGridBodyClassNames; } });
+    Object.defineProperty(exports, "useDataGridBodyStyles_unstable", { enumerable: true, get: function () { return DataGridBody_1.useDataGridBodyStyles_unstable; } });
+    Object.defineProperty(exports, "useDataGridBody_unstable", { enumerable: true, get: function () { return DataGridBody_1.useDataGridBody_unstable; } });
+    Object.defineProperty(exports, "renderDataGridBody_unstable", { enumerable: true, get: function () { return DataGridBody_1.renderDataGridBody_unstable; } });
+    Object.defineProperty(exports, "DataGrid", { enumerable: true, get: function () { return DataGrid_1.DataGrid; } });
+    Object.defineProperty(exports, "dataGridClassNames", { enumerable: true, get: function () { return DataGrid_1.dataGridClassNames; } });
+    Object.defineProperty(exports, "useDataGridStyles_unstable", { enumerable: true, get: function () { return DataGrid_1.useDataGridStyles_unstable; } });
+    Object.defineProperty(exports, "useDataGrid_unstable", { enumerable: true, get: function () { return DataGrid_1.useDataGrid_unstable; } });
+    Object.defineProperty(exports, "renderDataGrid_unstable", { enumerable: true, get: function () { return DataGrid_1.renderDataGrid_unstable; } });
+    Object.defineProperty(exports, "useDataGridContextValues_unstable", { enumerable: true, get: function () { return DataGrid_1.useDataGridContextValues_unstable; } });
+    Object.defineProperty(exports, "DataGridHeader", { enumerable: true, get: function () { return DataGridHeader_1.DataGridHeader; } });
+    Object.defineProperty(exports, "dataGridHeaderClassNames", { enumerable: true, get: function () { return DataGridHeader_1.dataGridHeaderClassNames; } });
+    Object.defineProperty(exports, "useDataGridHeaderStyles_unstable", { enumerable: true, get: function () { return DataGridHeader_1.useDataGridHeaderStyles_unstable; } });
+    Object.defineProperty(exports, "useDataGridHeader_unstable", { enumerable: true, get: function () { return DataGridHeader_1.useDataGridHeader_unstable; } });
+    Object.defineProperty(exports, "renderDataGridHeader_unstable", { enumerable: true, get: function () { return DataGridHeader_1.renderDataGridHeader_unstable; } });
+    Object.defineProperty(exports, "DataGridHeaderCell", { enumerable: true, get: function () { return DataGridHeaderCell_1.DataGridHeaderCell; } });
+    Object.defineProperty(exports, "dataGridHeaderCellClassNames", { enumerable: true, get: function () { return DataGridHeaderCell_1.dataGridHeaderCellClassNames; } });
+    Object.defineProperty(exports, "useDataGridHeaderCellStyles_unstable", { enumerable: true, get: function () { return DataGridHeaderCell_1.useDataGridHeaderCellStyles_unstable; } });
+    Object.defineProperty(exports, "useDataGridHeaderCell_unstable", { enumerable: true, get: function () { return DataGridHeaderCell_1.useDataGridHeaderCell_unstable; } });
+    Object.defineProperty(exports, "renderDataGridHeaderCell_unstable", { enumerable: true, get: function () { return DataGridHeaderCell_1.renderDataGridHeaderCell_unstable; } });
+    Object.defineProperty(exports, "DataGridSelectionCell", { enumerable: true, get: function () { return DataGridSelectionCell_1.DataGridSelectionCell; } });
+    Object.defineProperty(exports, "useDataGridSelectionCellStyles_unstable", { enumerable: true, get: function () { return DataGridSelectionCell_1.useDataGridSelectionCellStyles_unstable; } });
+    Object.defineProperty(exports, "useDataGridSelectionCell_unstable", { enumerable: true, get: function () { return DataGridSelectionCell_1.useDataGridSelectionCell_unstable; } });
+    Object.defineProperty(exports, "renderDataGridSelectionCell_unstable", { enumerable: true, get: function () { return DataGridSelectionCell_1.renderDataGridSelectionCell_unstable; } });
+    Object.defineProperty(exports, "dataGridSelectionCellClassNames", { enumerable: true, get: function () { return DataGridSelectionCell_1.dataGridSelectionCellClassNames; } });
+});
+//# sourceMappingURL=index.js.map

package/lib-amd/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../packages/react-components/react-table/src/index.ts"],"names":[],"mappings":";;;;IACE,yGAAA,gBAAgB,OAAA;IAChB,0GAAA,iBAAiB,OAAA;IACjB,qGAAA,YAAY,OAAA;IACZ,0GAAA,iBAAiB,OAAA;IACjB,sHAAA,6BAA6B,OAAA;IAkB7B,sGAAA,SAAS,OAAA;IACT,gHAAA,mBAAmB,OAAA;IACnB,+GAAA,kBAAkB,OAAA;IAClB,wHAAA,2BAA2B,OAAA;IAC3B,kHAAA,qBAAqB,OAAA;IACrB,qHAAA,wBAAwB,OAAA;IAKxB,oGAAA,QAAQ,OAAA;IACR,8GAAA,kBAAkB,OAAA;IAClB,6GAAA,iBAAiB,OAAA;IACjB,sHAAA,0BAA0B,OAAA;IAC1B,gHAAA,oBAAoB,OAAA;IACpB,mHAAA,uBAAuB,OAAA;IAKvB,sGAAA,SAAS,OAAA;IACT,+GAAA,kBAAkB,OAAA;IAClB,gHAAA,mBAAmB,OAAA;IACnB,wHAAA,2BAA2B,OAAA;IAC3B,kHAAA,qBAAqB,OAAA;IACrB,qHAAA,wBAAwB,OAAA;IAKxB,8FAAA,KAAK,OAAA;IACL,uGAAA,cAAc,OAAA;IACd,wGAAA,eAAe,OAAA;IACf,gHAAA,uBAAuB,OAAA;IACvB,0GAAA,iBAAiB,OAAA;IACjB,6GAAA,oBAAoB,OAAA;IAKpB,0GAAA,WAAW,OAAA;IACX,oHAAA,qBAAqB,OAAA;IACrB,mHAAA,oBAAoB,OAAA;IACpB,4HAAA,6BAA6B,OAAA;IAC7B,sHAAA,uBAAuB,OAAA;IACvB,yHAAA,0BAA0B,OAAA;IAK1B,kHAAA,eAAe,OAAA;IACf,2HAAA,wBAAwB,OAAA;IACxB,4HAAA,yBAAyB,OAAA;IACzB,oIAAA,iCAAiC,OAAA;IACjC,8HAAA,2BAA2B,OAAA;IAC3B,iIAAA,8BAA8B,OAAA;IAK9B,sHAAA,iBAAiB,OAAA;IACjB,gIAAA,2BAA2B,OAAA;IAC3B,wIAAA,mCAAmC,OAAA;IACnC,kIAAA,6BAA6B,OAAA;IAC7B,qIAAA,gCAAgC,OAAA;IAIzB,oHAAA,oBAAoB,OAAA;IAAE,+GAAA,eAAe,OAAA;IACrC,oHAAA,oBAAoB,OAAA;IAAE,yHAAA,yBAAyB,OAAA;IAEtD,wHAAA,kBAAkB,OAAA;IAClB,0IAAA,oCAAoC,OAAA;IACpC,oIAAA,8BAA8B,OAAA;IAC9B,uIAAA,iCAAiC,OAAA;IACjC,kIAAA,4BAA4B,OAAA;IAK5B,oHAAA,gBAAgB,OAAA;IAChB,8HAAA,0BAA0B,OAAA;IAC1B,sIAAA,kCAAkC,OAAA;IAClC,gIAAA,4BAA4B,OAAA;IAC5B,mIAAA,+BAA+B,OAAA;IAK/B,kHAAA,eAAe,OAAA;IACf,4HAAA,yBAAyB,OAAA;IACzB,oIAAA,iCAAiC,OAAA;IACjC,8HAAA,2BAA2B,OAAA;IAC3B,iIAAA,8BAA8B,OAAA;IAK9B,4GAAA,YAAY,OAAA;IACZ,sHAAA,sBAAsB,OAAA;IACtB,8HAAA,8BAA8B,OAAA;IAC9B,wHAAA,wBAAwB,OAAA;IACxB,2HAAA,2BAA2B,OAAA;IAK3B,0GAAA,WAAW,OAAA;IACX,oHAAA,qBAAqB,OAAA;IACrB,4HAAA,6BAA6B,OAAA;IAC7B,sHAAA,uBAAuB,OAAA;IACvB,yHAAA,0BAA0B,OAAA;IAK1B,4GAAA,YAAY,OAAA;IACZ,sHAAA,sBAAsB,OAAA;IACtB,8HAAA,8BAA8B,OAAA;IAC9B,wHAAA,wBAAwB,OAAA;IACxB,2HAAA,2BAA2B,OAAA;IAK3B,oGAAA,QAAQ,OAAA;IACR,8GAAA,kBAAkB,OAAA;IAClB,sHAAA,0BAA0B,OAAA;IAC1B,gHAAA,oBAAoB,OAAA;IACpB,mHAAA,uBAAuB,OAAA;IACvB,6HAAA,iCAAiC,OAAA;IAYjC,gHAAA,cAAc,OAAA;IACd,0HAAA,wBAAwB,OAAA;IACxB,kIAAA,gCAAgC,OAAA;IAChC,4HAAA,0BAA0B,OAAA;IAC1B,+HAAA,6BAA6B,OAAA;IAK7B,wHAAA,kBAAkB,OAAA;IAClB,kIAAA,4BAA4B,OAAA;IAC5B,0IAAA,oCAAoC,OAAA;IACpC,oIAAA,8BAA8B,OAAA;IAC9B,uIAAA,iCAAiC,OAAA;IAKjC,8HAAA,qBAAqB,OAAA;IACrB,gJAAA,uCAAuC,OAAA;IACvC,0IAAA,iCAAiC,OAAA;IACjC,6IAAA,oCAAoC,OAAA;IACpC,wIAAA,+BAA+B,OAAA","sourcesContent":["export {\n  useTableFeatures,\n  useTableSelection,\n  useTableSort,\n  createTableColumn,\n  useTableColumnSizing_unstable,\n} from './hooks';\n\nexport type {\n  CreateTableColumnOptions,\n  UseTableFeaturesOptions,\n  TableColumnDefinition,\n  TableColumnId,\n  TableFeaturesState,\n  TableRowData,\n  TableRowId,\n  TableSelectionState,\n  TableSortState,\n  TableFeaturePlugin,\n  TableColumnSizingOptions,\n} from './hooks';\n\nexport {\n  TableCell,\n  tableCellClassNames,\n  tableCellClassName,\n  useTableCellStyles_unstable,\n  useTableCell_unstable,\n  renderTableCell_unstable,\n} from './TableCell';\nexport type { TableCellProps, TableCellState, TableCellSlots } from './TableCell';\n\nexport {\n  TableRow,\n  tableRowClassNames,\n  tableRowClassName,\n  useTableRowStyles_unstable,\n  useTableRow_unstable,\n  renderTableRow_unstable,\n} from './TableRow';\nexport type { TableRowProps, TableRowState, TableRowSlots } from './TableRow';\n\nexport {\n  TableBody,\n  tableBodyClassName,\n  tableBodyClassNames,\n  useTableBodyStyles_unstable,\n  useTableBody_unstable,\n  renderTableBody_unstable,\n} from './TableBody';\nexport type { TableBodyProps, TableBodyState, TableBodySlots } from './TableBody';\n\nexport {\n  Table,\n  tableClassName,\n  tableClassNames,\n  useTableStyles_unstable,\n  useTable_unstable,\n  renderTable_unstable,\n} from './Table';\nexport type { TableProps, TableSlots, TableState, TableContextValue, TableContextValues, SortDirection } from './Table';\n\nexport {\n  TableHeader,\n  tableHeaderClassNames,\n  tableHeaderClassName,\n  useTableHeaderStyles_unstable,\n  useTableHeader_unstable,\n  renderTableHeader_unstable,\n} from './TableHeader';\nexport type { TableHeaderProps, TableHeaderSlots, TableHeaderState } from './TableHeader';\n\nexport {\n  TableHeaderCell,\n  tableHeaderCellClassName,\n  tableHeaderCellClassNames,\n  useTableHeaderCellStyles_unstable,\n  useTableHeaderCell_unstable,\n  renderTableHeaderCell_unstable,\n} from './TableHeaderCell';\nexport type { TableHeaderCellProps, TableHeaderCellSlots, TableHeaderCellState } from './TableHeaderCell';\n\nexport {\n  TableResizeHandle,\n  tableResizeHandleClassNames,\n  useTableResizeHandleStyles_unstable,\n  useTableResizeHandle_unstable,\n  renderTableResizeHandle_unstable,\n} from './TableResizeHandle';\nexport type { TableResizeHandleProps, TableResizeHandleSlots, TableResizeHandleState } from './TableResizeHandle';\n\nexport { TableContextProvider, useTableContext } from './contexts/tableContext';\nexport { useTableRowIdContext, TableRowIdContextProvider } from './contexts/rowIdContext';\nexport {\n  TableSelectionCell,\n  useTableSelectionCellStyles_unstable,\n  useTableSelectionCell_unstable,\n  renderTableSelectionCell_unstable,\n  tableSelectionCellClassNames,\n} from './TableSelectionCell';\n\nexport type { TableSelectionCellProps, TableSelectionCellState, TableSelectionCellSlots } from './TableSelectionCell';\nexport {\n  TableCellActions,\n  tableCellActionsClassNames,\n  useTableCellActionsStyles_unstable,\n  useTableCellActions_unstable,\n  renderTableCellActions_unstable,\n} from './TableCellActions';\n\nexport type { TableCellActionsProps, TableCellActionsSlots, TableCellActionsState } from './TableCellActions';\nexport {\n  TableCellLayout,\n  tableCellLayoutClassNames,\n  useTableCellLayoutStyles_unstable,\n  useTableCellLayout_unstable,\n  renderTableCellLayout_unstable,\n} from './TableCellLayout';\nexport type { TableCellLayoutProps, TableCellLayoutSlots, TableCellLayoutState } from './TableCellLayout';\n\nexport {\n  DataGridCell,\n  dataGridCellClassNames,\n  useDataGridCellStyles_unstable,\n  useDataGridCell_unstable,\n  renderDataGridCell_unstable,\n} from './DataGridCell';\nexport type { DataGridCellProps, DataGridCellState, DataGridCellSlots } from './DataGridCell';\n\nexport {\n  DataGridRow,\n  dataGridRowClassNames,\n  useDataGridRowStyles_unstable,\n  useDataGridRow_unstable,\n  renderDataGridRow_unstable,\n} from './DataGridRow';\nexport type { DataGridRowProps, DataGridRowState, DataGridRowSlots, CellRenderFunction } from './DataGridRow';\n\nexport {\n  DataGridBody,\n  dataGridBodyClassNames,\n  useDataGridBodyStyles_unstable,\n  useDataGridBody_unstable,\n  renderDataGridBody_unstable,\n} from './DataGridBody';\nexport type { DataGridBodyProps, DataGridBodyState, DataGridBodySlots, RowRenderFunction } from './DataGridBody';\n\nexport {\n  DataGrid,\n  dataGridClassNames,\n  useDataGridStyles_unstable,\n  useDataGrid_unstable,\n  renderDataGrid_unstable,\n  useDataGridContextValues_unstable,\n} from './DataGrid';\nexport type {\n  DataGridProps,\n  DataGridSlots,\n  DataGridState,\n  DataGridContextValues,\n  DataGridContextValue,\n  DataGridFocusMode,\n} from './DataGrid';\n\nexport {\n  DataGridHeader,\n  dataGridHeaderClassNames,\n  useDataGridHeaderStyles_unstable,\n  useDataGridHeader_unstable,\n  renderDataGridHeader_unstable,\n} from './DataGridHeader';\nexport type { DataGridHeaderProps, DataGridHeaderSlots, DataGridHeaderState } from './DataGridHeader';\n\nexport {\n  DataGridHeaderCell,\n  dataGridHeaderCellClassNames,\n  useDataGridHeaderCellStyles_unstable,\n  useDataGridHeaderCell_unstable,\n  renderDataGridHeaderCell_unstable,\n} from './DataGridHeaderCell';\nexport type { DataGridHeaderCellProps, DataGridHeaderCellSlots, DataGridHeaderCellState } from './DataGridHeaderCell';\n\nexport {\n  DataGridSelectionCell,\n  useDataGridSelectionCellStyles_unstable,\n  useDataGridSelectionCell_unstable,\n  renderDataGridSelectionCell_unstable,\n  dataGridSelectionCellClassNames,\n} from './DataGridSelectionCell';\n\nexport type {\n  DataGridSelectionCellProps,\n  DataGridSelectionCellState,\n  DataGridSelectionCellSlots,\n} from './DataGridSelectionCell';\n"]}

package/lib-amd/utils/columnResizeUtils.js

@@ -0,0 +1,158 @@
+define(["require", "exports", "tslib"], function (require, exports, tslib_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.adjustColumnWidthsToFitContainer = exports.setColumnProperty = exports.getColumnWidth = exports.getLength = exports.getTotalWidth = exports.getColumnByIndex = exports.getColumnById = exports.columnDefinitionsToState = void 0;
+    var DEFAULT_WIDTH = 150;
+    var DEFAULT_MIN_WIDTH = 100;
+    /**
+     * This function takes the column definitions and the curent ColumnWidthState and returns new state.
+     *  - It uses existing state for existing columns.
+     *  - It removes any state for columns no longer present.
+     *  - It checks if any column has been replaced and returns updated state if so
+     *  - It returns old state if no changes in the state have been made (so that react doesn't call effects)
+     * @param columns
+     * @param state
+     * @returns
+     */
+    function columnDefinitionsToState(columns, state, columnSizingOptions) {
+        if (state === void 0) { state = []; }
+        if (columnSizingOptions === void 0) { columnSizingOptions = {}; }
+        var updated = false;
+        var stateMap = new Map(state.map(function (s) { return [s.columnId, s]; }));
+        var updatedState = columns.map(function (column) {
+            var _a, _b;
+            var existingColumnState = stateMap.get(column.columnId);
+            if (existingColumnState) {
+                var _c = (_a = columnSizingOptions[column.columnId]) !== null && _a !== void 0 ? _a : {}, _d = _c.idealWidth, idealWidth_1 = _d === void 0 ? existingColumnState.idealWidth : _d, _e = _c.minWidth, minWidth_1 = _e === void 0 ? existingColumnState.minWidth : _e, _f = _c.padding, padding_1 = _f === void 0 ? existingColumnState.padding : _f;
+                if (idealWidth_1 !== existingColumnState.idealWidth ||
+                    minWidth_1 !== existingColumnState.minWidth ||
+                    padding_1 !== existingColumnState.padding) {
+                    updated = true;
+                    return tslib_1.__assign(tslib_1.__assign({}, existingColumnState), { idealWidth: idealWidth_1, width: idealWidth_1, minWidth: minWidth_1, padding: padding_1 });
+                }
+                return existingColumnState;
+            }
+            var _g = (_b = columnSizingOptions[column.columnId]) !== null && _b !== void 0 ? _b : {}, defaultWidth = _g.defaultWidth, _h = _g.idealWidth, idealWidth = _h === void 0 ? DEFAULT_WIDTH : _h, _j = _g.minWidth, minWidth = _j === void 0 ? DEFAULT_MIN_WIDTH : _j, padding = _g.padding;
+            updated = true;
+            return {
+                columnId: column.columnId,
+                width: Math.max(defaultWidth !== null && defaultWidth !== void 0 ? defaultWidth : idealWidth, minWidth),
+                minWidth: minWidth,
+                idealWidth: Math.max(defaultWidth !== null && defaultWidth !== void 0 ? defaultWidth : idealWidth, minWidth),
+                padding: padding !== null && padding !== void 0 ? padding : 16,
+            };
+        });
+        // If the length of the new state changed (column was added or removed) or any of
+        // the individual states has a new reference (column was replaced),
+        // we have to reset the column widths to their ideal width (because the column which was last may not be last now).
+        // Then the adjustColumnWidthsToFitContainer can do its job and properly stretch the last column.
+        if (updatedState.length !== state.length || updated) {
+            var column = updatedState.find(function (col) { return col.width > col.idealWidth; });
+            if (column) {
+                column.width = column.idealWidth;
+            }
+            updated = true;
+        }
+        return updated ? updatedState : state;
+    }
+    exports.columnDefinitionsToState = columnDefinitionsToState;
+    function getColumnById(state, columnId) {
+        return state.find(function (c) { return c.columnId === columnId; });
+    }
+    exports.getColumnById = getColumnById;
+    function getColumnByIndex(state, index) {
+        return state[index];
+    }
+    exports.getColumnByIndex = getColumnByIndex;
+    function getTotalWidth(state) {
+        return state.reduce(function (sum, column) { return sum + column.width + column.padding; }, 0);
+    }
+    exports.getTotalWidth = getTotalWidth;
+    function getLength(state) {
+        return state.length;
+    }
+    exports.getLength = getLength;
+    function getColumnWidth(state, columnId) {
+        var _a;
+        var column = getColumnById(state, columnId);
+        return (_a = column === null || column === void 0 ? void 0 : column.width) !== null && _a !== void 0 ? _a : 0;
+    }
+    exports.getColumnWidth = getColumnWidth;
+    /**
+     * This function takes the current state and returns an updated state, so that it can be set.
+     * The reason for this is that we can update the state multiple times before commiting to render.
+     * This is an optimization and also prevents flickering.
+     * It also returns new copy of the state only if the value is different than the one currently in
+     * the state, further preventing unnecessary updates.
+     * @param localState
+     * @param columnId
+     * @param property
+     * @param value
+     * @returns
+     */
+    function setColumnProperty(localState, columnId, property, value) {
+        var _a;
+        var currentColumn = getColumnById(localState, columnId);
+        if (!currentColumn || (currentColumn === null || currentColumn === void 0 ? void 0 : currentColumn[property]) === value) {
+            return localState;
+        }
+        var updatedColumn = tslib_1.__assign(tslib_1.__assign({}, currentColumn), (_a = {}, _a[property] = value, _a));
+        var newState = localState.reduce(function (acc, current) {
+            if (current.columnId === updatedColumn.columnId) {
+                return tslib_1.__spreadArray(tslib_1.__spreadArray([], acc), [updatedColumn]);
+            }
+            return tslib_1.__spreadArray(tslib_1.__spreadArray([], acc), [current]);
+        }, []);
+        return newState;
+    }
+    exports.setColumnProperty = setColumnProperty;
+    /**
+     * This function takes the state and container width and makes sure the each column in the state
+     * is its optimal width, and that the columns
+     * a) fit to the container
+     * b) always fill the whole container
+     * @param state
+     * @param containerWidth
+     * @returns
+     */
+    function adjustColumnWidthsToFitContainer(state, containerWidth) {
+        var newState = state;
+        var totalWidth = getTotalWidth(newState);
+        // The total width is smaller, we are expanding columns
+        if (totalWidth < containerWidth) {
+            var difference = containerWidth - totalWidth;
+            var i = 0;
+            // We start at the beginning and assign the columns their ideal width
+            while (i < newState.length && difference > 0) {
+                var currentCol = getColumnByIndex(newState, i);
+                var colAdjustment = Math.min(currentCol.idealWidth - currentCol.width, difference);
+                newState = setColumnProperty(newState, currentCol.columnId, 'width', currentCol.width + colAdjustment);
+                difference -= colAdjustment;
+                // if there is still empty space, after all columns are their ideal sizes, assign it to the last column
+                if (i === newState.length - 1 && difference !== 0) {
+                    var lastCol = getColumnByIndex(newState, i);
+                    newState = setColumnProperty(newState, lastCol.columnId, 'width', lastCol.width + difference);
+                }
+                i++;
+            }
+        }
+        // The total width is larger than container, we need to squash the columns
+        else if (totalWidth >= containerWidth) {
+            var difference = totalWidth - containerWidth;
+            // We start with the last column
+            var j = newState.length - 1;
+            while (j >= 0 && difference > 0) {
+                var currentCol = getColumnByIndex(newState, j);
+                if (currentCol.width > currentCol.minWidth) {
+                    var colAdjustment = Math.min(currentCol.width - currentCol.minWidth, difference);
+                    difference -= colAdjustment;
+                    newState = setColumnProperty(newState, currentCol.columnId, 'width', currentCol.width - colAdjustment);
+                }
+                j--;
+            }
+        }
+        return newState;
+    }
+    exports.adjustColumnWidthsToFitContainer = adjustColumnWidthsToFitContainer;
+});
+//# sourceMappingURL=columnResizeUtils.js.map

package/lib-amd/utils/columnResizeUtils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"columnResizeUtils.js","sourceRoot":"","sources":["../../../../../../../../packages/react-components/react-table/src/utils/columnResizeUtils.ts"],"names":[],"mappings":"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","sourcesContent":["import { TableColumnDefinition, ColumnWidthState, TableColumnId, TableColumnSizingOptions } from '../hooks';\n\nconst DEFAULT_WIDTH = 150;\nconst DEFAULT_MIN_WIDTH = 100;\n\n/**\n * This function takes the column definitions and the curent ColumnWidthState and returns new state.\n *  - It uses existing state for existing columns.\n *  - It removes any state for columns no longer present.\n *  - It checks if any column has been replaced and returns updated state if so\n *  - It returns old state if no changes in the state have been made (so that react doesn't call effects)\n * @param columns\n * @param state\n * @returns\n */\n\nexport function columnDefinitionsToState<T>(\n  columns: TableColumnDefinition<T>[],\n  state: ColumnWidthState[] = [],\n  columnSizingOptions: TableColumnSizingOptions = {},\n): ColumnWidthState[] {\n  let updated = false;\n  const stateMap = new Map(state.map(s => [s.columnId, s]));\n\n  const updatedState = columns.map(column => {\n    const existingColumnState = stateMap.get(column.columnId);\n\n    if (existingColumnState) {\n      const {\n        idealWidth = existingColumnState.idealWidth,\n        minWidth = existingColumnState.minWidth,\n        padding = existingColumnState.padding,\n      } = columnSizingOptions[column.columnId] ?? {};\n\n      if (\n        idealWidth !== existingColumnState.idealWidth ||\n        minWidth !== existingColumnState.minWidth ||\n        padding !== existingColumnState.padding\n      ) {\n        updated = true;\n        return {\n          ...existingColumnState,\n          idealWidth,\n          width: idealWidth,\n          minWidth,\n          padding,\n        };\n      }\n      return existingColumnState;\n    }\n\n    const { defaultWidth, idealWidth = DEFAULT_WIDTH, minWidth = DEFAULT_MIN_WIDTH, padding } =\n      columnSizingOptions[column.columnId] ?? {};\n\n    updated = true;\n    return {\n      columnId: column.columnId,\n      width: Math.max(defaultWidth ?? idealWidth, minWidth),\n      minWidth,\n      idealWidth: Math.max(defaultWidth ?? idealWidth, minWidth),\n      padding: padding ?? 16,\n    };\n  });\n\n  // If the length of the new state changed (column was added or removed) or any of\n  // the individual states has a new reference (column was replaced),\n  // we have to reset the column widths to their ideal width (because the column which was last may not be last now).\n  // Then the adjustColumnWidthsToFitContainer can do its job and properly stretch the last column.\n  if (updatedState.length !== state.length || updated) {\n    const column = updatedState.find(col => col.width > col.idealWidth);\n    if (column) {\n      column.width = column.idealWidth;\n    }\n\n    updated = true;\n  }\n\n  return updated ? updatedState : state;\n}\n\nexport function getColumnById(state: ColumnWidthState[], columnId: TableColumnId) {\n  return state.find(c => c.columnId === columnId);\n}\n\nexport function getColumnByIndex(state: ColumnWidthState[], index: number) {\n  return state[index];\n}\n\nexport function getTotalWidth(state: ColumnWidthState[]): number {\n  return state.reduce((sum, column) => sum + column.width + column.padding, 0);\n}\n\nexport function getLength(state: ColumnWidthState[]) {\n  return state.length;\n}\n\nexport function getColumnWidth(state: ColumnWidthState[], columnId: TableColumnId): number {\n  const column = getColumnById(state, columnId);\n  return column?.width ?? 0;\n}\n\n/**\n * This function takes the current state and returns an updated state, so that it can be set.\n * The reason for this is that we can update the state multiple times before commiting to render.\n * This is an optimization and also prevents flickering.\n * It also returns new copy of the state only if the value is different than the one currently in\n * the state, further preventing unnecessary updates.\n * @param localState\n * @param columnId\n * @param property\n * @param value\n * @returns\n */\nexport function setColumnProperty(\n  localState: ColumnWidthState[],\n  columnId: TableColumnId,\n  property: keyof ColumnWidthState,\n  value: number,\n) {\n  const currentColumn = getColumnById(localState, columnId);\n\n  if (!currentColumn || currentColumn?.[property] === value) {\n    return localState;\n  }\n\n  const updatedColumn = { ...currentColumn, [property]: value };\n\n  const newState = localState.reduce((acc, current) => {\n    if (current.columnId === updatedColumn.columnId) {\n      return [...acc, updatedColumn];\n    }\n    return [...acc, current];\n  }, [] as ColumnWidthState[]);\n\n  return newState;\n}\n\n/**\n * This function takes the state and container width and makes sure the each column in the state\n * is its optimal width, and that the columns\n * a) fit to the container\n * b) always fill the whole container\n * @param state\n * @param containerWidth\n * @returns\n */\nexport function adjustColumnWidthsToFitContainer(state: ColumnWidthState[], containerWidth: number) {\n  let newState = state;\n  const totalWidth = getTotalWidth(newState);\n\n  // The total width is smaller, we are expanding columns\n  if (totalWidth < containerWidth) {\n    let difference = containerWidth - totalWidth;\n    let i = 0;\n    // We start at the beginning and assign the columns their ideal width\n    while (i < newState.length && difference > 0) {\n      const currentCol = getColumnByIndex(newState, i);\n      const colAdjustment = Math.min(currentCol.idealWidth - currentCol.width, difference);\n      newState = setColumnProperty(newState, currentCol.columnId, 'width', currentCol.width + colAdjustment);\n      difference -= colAdjustment;\n\n      // if there is still empty space, after all columns are their ideal sizes, assign it to the last column\n      if (i === newState.length - 1 && difference !== 0) {\n        const lastCol = getColumnByIndex(newState, i);\n        newState = setColumnProperty(newState, lastCol.columnId, 'width', lastCol.width + difference);\n      }\n\n      i++;\n    }\n  }\n\n  // The total width is larger than container, we need to squash the columns\n  else if (totalWidth >= containerWidth) {\n    let difference = totalWidth - containerWidth;\n    // We start with the last column\n    let j = newState.length - 1;\n    while (j >= 0 && difference > 0) {\n      const currentCol = getColumnByIndex(newState, j);\n      if (currentCol.width > currentCol.minWidth) {\n        const colAdjustment = Math.min(currentCol.width - currentCol.minWidth, difference);\n        difference -= colAdjustment;\n        newState = setColumnProperty(newState, currentCol.columnId, 'width', currentCol.width - colAdjustment);\n      }\n      j--;\n    }\n  }\n\n  return newState;\n}\n"]}

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

@@ -7,6 +7,8 @@ exports.useDataGrid_unstable = void 0;
 const react_tabster_1 = /*#__PURE__*/require("@fluentui/react-tabster");
 const useTable_1 = /*#__PURE__*/require("../Table/useTable");
 const hooks_1 = /*#__PURE__*/require("../../hooks");
+const TableSelectionCell_1 = /*#__PURE__*/require("../TableSelectionCell");
+const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
 /**
  * Create the state required to render DataGrid.
  *
@@ -30,7 +32,10 @@ const useDataGrid_unstable = (props, ref) => {
     defaultSelectedItems,
     subtleSelection = false,
     selectionAppearance = 'brand',
-    getRowId
+    getRowId,
+    resizableColumns,
+    columnSizingOptions,
+    onColumnResize
   } = props;
   const navigable = focusMode !== 'none';
   const keyboardNavAttr = react_tabster_1.useArrowNavigationGroup({
@@ -49,6 +54,12 @@ const useDataGrid_unstable = (props, ref) => {
     selectedItems,
     onSelectionChange,
     selectionMode: selectionMode !== null && selectionMode !== void 0 ? selectionMode : 'multiselect'
+  }), hooks_1.useTableColumnSizing_unstable({
+    onColumnResize,
+    columnSizingOptions,
+    // The selection cell is not part of the columns, therefore its width needs to be subtracted
+    // from the container to make sure the columns don't overflow the table.
+    containerWidthOffset: selectionMode ? -TableSelectionCell_1.CELL_WIDTH : 0
   })]);
   const baseTableState = useTable_1.useTable_unstable({
     role: 'grid',
@@ -56,14 +67,15 @@ const useDataGrid_unstable = (props, ref) => {
     noNativeElements: true,
     ...(navigable && keyboardNavAttr),
     ...props
-  }, ref);
+  }, react_utilities_1.useMergedRefs(ref, tableState.tableRef));
   return {
     ...baseTableState,
     focusMode,
     tableState,
     selectableRows: !!selectionMode,
     subtleSelection,
-    selectionAppearance
+    selectionAppearance,
+    resizableColumns
   };
 };
 exports.useDataGrid_unstable = useDataGrid_unstable;

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

@@ -1 +1 @@
-{"version":3,"mappings":";;;;;;AACA;AAEA;AACA;AAEA;;;;;;;;;AASO,MAAMA,oBAAoB,GAAG,CAACC,KAAoB,EAAEC,GAA2B,KAAmB;EACvG,MAAM;IACJC,KAAK;IACLC,OAAO;IACPC,SAAS,GAAG,MAAM;IAClBC,aAAa;IACbC,YAAY;IACZC,iBAAiB;IACjBC,gBAAgB;IAChBC,SAAS;IACTC,aAAa;IACbC,oBAAoB;IACpBC,eAAe,GAAG,KAAK;IACvBC,mBAAmB,GAAG,OAAO;IAC7BC;EAAQ,CACT,GAAGd,KAAK;EAET,MAAMe,SAAS,GAAGX,SAAS,KAAK,MAAM;EACtC,MAAMY,eAAe,GAAGC,uCAAuB,CAAC;IAAEC,IAAI,EAAE;EAAM,CAAE,CAAC;EAEjE,MAAMC,UAAU,GAAGC,wBAAgB,CAAC;IAAElB,KAAK;IAAEC,OAAO;IAAEW;EAAQ,CAAE,EAAE,CAChEM,oBAAY,CAAC;IACXZ,gBAAgB;IAChBC,SAAS;IACTH;GACD,CAAC,EACFc,yBAAiB,CAAC;IAChBT,oBAAoB;IACpBD,aAAa;IACbH,iBAAiB;IACjBF,aAAa,EAAEA,aAAa,aAAbA,aAAa,cAAbA,aAAa,GAAI;GACjC,CAAC,CACH,CAAC;EAEF,MAAMgB,cAAc,GAAGC,4BAAiB,CACtC;IAAEC,IAAI,EAAE,MAAM;IAAEC,EAAE,EAAE,KAAK;IAAEC,gBAAgB,EAAE,IAAI;IAAE,IAAIV,SAAS,IAAIC,eAAe,CAAC;IAAE,GAAGhB;EAAK,CAAE,EAChGC,GAAG,CACJ;EAED,OAAO;IACL,GAAGoB,cAAc;IACjBjB,SAAS;IACTe,UAAU;IACVO,cAAc,EAAE,CAAC,CAACrB,aAAa;IAC/BO,eAAe;IACfC;GACD;AACH,CAAC;AA/CYc,4BAAoB","names":["useDataGrid_unstable","props","ref","items","columns","focusMode","selectionMode","onSortChange","onSelectionChange","defaultSortState","sortState","selectedItems","defaultSelectedItems","subtleSelection","selectionAppearance","getRowId","navigable","keyboardNavAttr","react_tabster_1","axis","tableState","hooks_1","baseTableState","useTable_1","role","as","noNativeElements","selectableRows","exports"],"sourceRoot":"../src/","sources":["packages/react-components/react-table/src/components/DataGrid/useDataGrid.ts"],"sourcesContent":["import * as React from 'react';\nimport { useArrowNavigationGroup } from '@fluentui/react-tabster';\nimport type { DataGridProps, DataGridState } from './DataGrid.types';\nimport { useTable_unstable } from '../Table/useTable';\nimport { useTableFeatures, useTableSort, useTableSelection } from '../../hooks';\n\n/**\n * Create the state required to render DataGrid.\n *\n * The returned state can be modified with hooks such as useDataGridStyles_unstable,\n * before being passed to renderDataGrid_unstable.\n *\n * @param props - props from this instance of DataGrid\n * @param ref - reference to root HTMLElement of DataGrid\n */\nexport const useDataGrid_unstable = (props: DataGridProps, ref: React.Ref<HTMLElement>): DataGridState => {\n  const {\n    items,\n    columns,\n    focusMode = 'cell',\n    selectionMode,\n    onSortChange,\n    onSelectionChange,\n    defaultSortState,\n    sortState,\n    selectedItems,\n    defaultSelectedItems,\n    subtleSelection = false,\n    selectionAppearance = 'brand',\n    getRowId,\n  } = props;\n\n  const navigable = focusMode !== 'none';\n  const keyboardNavAttr = useArrowNavigationGroup({ axis: 'grid' });\n\n  const tableState = useTableFeatures({ items, columns, getRowId }, [\n    useTableSort({\n      defaultSortState,\n      sortState,\n      onSortChange,\n    }),\n    useTableSelection({\n      defaultSelectedItems,\n      selectedItems,\n      onSelectionChange,\n      selectionMode: selectionMode ?? 'multiselect',\n    }),\n  ]);\n\n  const baseTableState = useTable_unstable(\n    { role: 'grid', as: 'div', noNativeElements: true, ...(navigable && keyboardNavAttr), ...props },\n    ref,\n  );\n\n  return {\n    ...baseTableState,\n    focusMode,\n    tableState,\n    selectableRows: !!selectionMode,\n    subtleSelection,\n    selectionAppearance,\n  };\n};\n"]}
+{"version":3,"mappings":";;;;;;AACA;AAEA;AACA;AACA;AACA;AAEA;;;;;;;;;AASO,MAAMA,oBAAoB,GAAG,CAACC,KAAoB,EAAEC,GAA2B,KAAmB;EACvG,MAAM;IACJC,KAAK;IACLC,OAAO;IACPC,SAAS,GAAG,MAAM;IAClBC,aAAa;IACbC,YAAY;IACZC,iBAAiB;IACjBC,gBAAgB;IAChBC,SAAS;IACTC,aAAa;IACbC,oBAAoB;IACpBC,eAAe,GAAG,KAAK;IACvBC,mBAAmB,GAAG,OAAO;IAC7BC,QAAQ;IACRC,gBAAgB;IAChBC,mBAAmB;IACnBC;EAAc,CACf,GAAGjB,KAAK;EAET,MAAMkB,SAAS,GAAGd,SAAS,KAAK,MAAM;EACtC,MAAMe,eAAe,GAAGC,uCAAuB,CAAC;IAAEC,IAAI,EAAE;EAAM,CAAE,CAAC;EAEjE,MAAMC,UAAU,GAAGC,wBAAgB,CAAC;IAAErB,KAAK;IAAEC,OAAO;IAAEW;EAAQ,CAAE,EAAE,CAChES,oBAAY,CAAC;IACXf,gBAAgB;IAChBC,SAAS;IACTH;GACD,CAAC,EACFiB,yBAAiB,CAAC;IAChBZ,oBAAoB;IACpBD,aAAa;IACbH,iBAAiB;IACjBF,aAAa,EAAEA,aAAa,aAAbA,aAAa,cAAbA,aAAa,GAAI;GACjC,CAAC,EACFkB,qCAA6B,CAAC;IAC5BN,cAAc;IACdD,mBAAmB;IACnB;IACA;IACAQ,oBAAoB,EAAEnB,aAAa,GAAG,CAACoB,+BAAU,GAAG;GACrD,CAAC,CACH,CAAC;EAEF,MAAMC,cAAc,GAAGC,4BAAiB,CACtC;IACEC,IAAI,EAAE,MAAM;IACZC,EAAE,EAAE,KAAK;IACTC,gBAAgB,EAAE,IAAI;IACtB,IAAIZ,SAAS,IAAIC,eAAe,CAAC;IACjC,GAAGnB;GACJ,EACD+B,+BAAa,CAAC9B,GAAG,EAAEqB,UAAU,CAACU,QAAQ,CAAC,CACxC;EAED,OAAO;IACL,GAAGN,cAAc;IACjBtB,SAAS;IACTkB,UAAU;IACVW,cAAc,EAAE,CAAC,CAAC5B,aAAa;IAC/BO,eAAe;IACfC,mBAAmB;IACnBE;GACD;AACH,CAAC;AAhEYmB,4BAAoB","names":["useDataGrid_unstable","props","ref","items","columns","focusMode","selectionMode","onSortChange","onSelectionChange","defaultSortState","sortState","selectedItems","defaultSelectedItems","subtleSelection","selectionAppearance","getRowId","resizableColumns","columnSizingOptions","onColumnResize","navigable","keyboardNavAttr","react_tabster_1","axis","tableState","hooks_1","containerWidthOffset","TableSelectionCell_1","baseTableState","useTable_1","role","as","noNativeElements","react_utilities_1","tableRef","selectableRows","exports"],"sourceRoot":"../src/","sources":["packages/react-components/react-table/src/components/DataGrid/useDataGrid.ts"],"sourcesContent":["import * as React from 'react';\nimport { useArrowNavigationGroup } from '@fluentui/react-tabster';\nimport type { DataGridProps, DataGridState } from './DataGrid.types';\nimport { useTable_unstable } from '../Table/useTable';\nimport { useTableFeatures, useTableSort, useTableSelection, useTableColumnSizing_unstable } from '../../hooks';\nimport { CELL_WIDTH } from '../TableSelectionCell';\nimport { useMergedRefs } from '@fluentui/react-utilities';\n\n/**\n * Create the state required to render DataGrid.\n *\n * The returned state can be modified with hooks such as useDataGridStyles_unstable,\n * before being passed to renderDataGrid_unstable.\n *\n * @param props - props from this instance of DataGrid\n * @param ref - reference to root HTMLElement of DataGrid\n */\nexport const useDataGrid_unstable = (props: DataGridProps, ref: React.Ref<HTMLElement>): DataGridState => {\n  const {\n    items,\n    columns,\n    focusMode = 'cell',\n    selectionMode,\n    onSortChange,\n    onSelectionChange,\n    defaultSortState,\n    sortState,\n    selectedItems,\n    defaultSelectedItems,\n    subtleSelection = false,\n    selectionAppearance = 'brand',\n    getRowId,\n    resizableColumns,\n    columnSizingOptions,\n    onColumnResize,\n  } = props;\n\n  const navigable = focusMode !== 'none';\n  const keyboardNavAttr = useArrowNavigationGroup({ axis: 'grid' });\n\n  const tableState = useTableFeatures({ items, columns, getRowId }, [\n    useTableSort({\n      defaultSortState,\n      sortState,\n      onSortChange,\n    }),\n    useTableSelection({\n      defaultSelectedItems,\n      selectedItems,\n      onSelectionChange,\n      selectionMode: selectionMode ?? 'multiselect',\n    }),\n    useTableColumnSizing_unstable({\n      onColumnResize,\n      columnSizingOptions,\n      // The selection cell is not part of the columns, therefore its width needs to be subtracted\n      // from the container to make sure the columns don't overflow the table.\n      containerWidthOffset: selectionMode ? -CELL_WIDTH : 0,\n    }),\n  ]);\n\n  const baseTableState = useTable_unstable(\n    {\n      role: 'grid',\n      as: 'div',\n      noNativeElements: true,\n      ...(navigable && keyboardNavAttr),\n      ...props,\n    },\n    useMergedRefs(ref, tableState.tableRef),\n  );\n\n  return {\n    ...baseTableState,\n    focusMode,\n    tableState,\n    selectableRows: !!selectionMode,\n    subtleSelection,\n    selectionAppearance,\n    resizableColumns,\n  };\n};\n"]}

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

@@ -14,7 +14,8 @@ function useDataGridContextValues_unstable(state) {
       focusMode: state.focusMode,
       selectableRows: state.selectableRows,
       subtleSelection: state.subtleSelection,
-      selectionAppearance: state.selectionAppearance
+      selectionAppearance: state.selectionAppearance,
+      resizableColumns: state.resizableColumns
     }
   };
 }

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

@@ -1 +1 @@
-{"version":3,"mappings":";;;;;;AAAA;AAGA,SAAgBA,iCAAiC,CAACC,KAAoB;EACpE,MAAMC,kBAAkB,GAAGC,sDAA8B,CAACF,KAAK,CAAC;EAChE,OAAO;IACL,GAAGC,kBAAkB;IACrBE,QAAQ,EAAE;MACR,GAAGH,KAAK,CAACI,UAAU;MACnBC,SAAS,EAAEL,KAAK,CAACK,SAAS;MAC1BC,cAAc,EAAEN,KAAK,CAACM,cAAc;MACpCC,eAAe,EAAEP,KAAK,CAACO,eAAe;MACtCC,mBAAmB,EAAER,KAAK,CAACQ;;GAE9B;AACH;AAZAC","names":["useDataGridContextValues_unstable","state","tableContextValues","useTableContextValues_1","dataGrid","tableState","focusMode","selectableRows","subtleSelection","selectionAppearance","exports"],"sourceRoot":"../src/","sources":["packages/react-components/react-table/src/components/DataGrid/useDataGridContextValues.ts"],"sourcesContent":["import { useTableContextValues_unstable } from '../Table/useTableContextValues';\nimport { DataGridContextValues, DataGridState } from './DataGrid.types';\n\nexport function useDataGridContextValues_unstable(state: DataGridState): DataGridContextValues {\n  const tableContextValues = useTableContextValues_unstable(state);\n  return {\n    ...tableContextValues,\n    dataGrid: {\n      ...state.tableState,\n      focusMode: state.focusMode,\n      selectableRows: state.selectableRows,\n      subtleSelection: state.subtleSelection,\n      selectionAppearance: state.selectionAppearance,\n    },\n  };\n}\n"]}
+{"version":3,"mappings":";;;;;;AAAA;AAGA,SAAgBA,iCAAiC,CAACC,KAAoB;EACpE,MAAMC,kBAAkB,GAAGC,sDAA8B,CAACF,KAAK,CAAC;EAChE,OAAO;IACL,GAAGC,kBAAkB;IACrBE,QAAQ,EAAE;MACR,GAAGH,KAAK,CAACI,UAAU;MACnBC,SAAS,EAAEL,KAAK,CAACK,SAAS;MAC1BC,cAAc,EAAEN,KAAK,CAACM,cAAc;MACpCC,eAAe,EAAEP,KAAK,CAACO,eAAe;MACtCC,mBAAmB,EAAER,KAAK,CAACQ,mBAAmB;MAC9CC,gBAAgB,EAAET,KAAK,CAACS;;GAE3B;AACH;AAbAC","names":["useDataGridContextValues_unstable","state","tableContextValues","useTableContextValues_1","dataGrid","tableState","focusMode","selectableRows","subtleSelection","selectionAppearance","resizableColumns","exports"],"sourceRoot":"../src/","sources":["packages/react-components/react-table/src/components/DataGrid/useDataGridContextValues.ts"],"sourcesContent":["import { useTableContextValues_unstable } from '../Table/useTableContextValues';\nimport { DataGridContextValues, DataGridState } from './DataGrid.types';\n\nexport function useDataGridContextValues_unstable(state: DataGridState): DataGridContextValues {\n  const tableContextValues = useTableContextValues_unstable(state);\n  return {\n    ...tableContextValues,\n    dataGrid: {\n      ...state.tableState,\n      focusMode: state.focusMode,\n      selectableRows: state.selectableRows,\n      subtleSelection: state.subtleSelection,\n      selectionAppearance: state.selectionAppearance,\n      resizableColumns: state.resizableColumns,\n    },\n  };\n}\n"]}

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

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.useDataGridCell_unstable = void 0;
 const useTableCell_1 = /*#__PURE__*/require("../TableCell/useTableCell");
 const dataGridContext_1 = /*#__PURE__*/require("../../contexts/dataGridContext");
+const columnIdContext_1 = /*#__PURE__*/require("../../contexts/columnIdContext");
 /**
  * Create the state required to render DataGridCell.
  *
@@ -16,11 +17,15 @@ const dataGridContext_1 = /*#__PURE__*/require("../../contexts/dataGridContext")
  * @param ref - reference to root HTMLElement of DataGridCell
  */
 const useDataGridCell_unstable = (props, ref) => {
+  const columnId = columnIdContext_1.useColumnIdContext();
   const tabbable = dataGridContext_1.useDataGridContext_unstable(ctx => ctx.focusMode === 'cell');
+  const resizableColumns = dataGridContext_1.useDataGridContext_unstable(ctx => ctx.resizableColumns);
+  const columnSizing = dataGridContext_1.useDataGridContext_unstable(ctx => ctx.columnSizing_unstable);
   return useTableCell_1.useTableCell_unstable({
     as: 'div',
     role: 'gridcell',
     tabIndex: tabbable ? 0 : undefined,
+    ...(resizableColumns ? columnSizing.getTableCellProps(columnId) : {}),
     ...props
   }, ref);
 };

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

@@ -1 +1 @@
-{"version":3,"mappings":";;;;;;AAEA;AACA;AAEA;;;;;;;;;AASO,MAAMA,wBAAwB,GAAG,CAACC,KAAwB,EAAEC,GAA2B,KAAuB;EACnH,MAAMC,QAAQ,GAAGC,6CAA2B,CAACC,GAAG,IAAIA,GAAG,CAACC,SAAS,KAAK,MAAM,CAAC;EAC7E,OAAOC,oCAAqB,CAAC;IAAEC,EAAE,EAAE,KAAK;IAAEC,IAAI,EAAE,UAAU;IAAEC,QAAQ,EAAEP,QAAQ,GAAG,CAAC,GAAGQ,SAAS;IAAE,GAAGV;EAAK,CAAE,EAAEC,GAAG,CAAC;AAClH,CAAC;AAHYU,gCAAwB","names":["useDataGridCell_unstable","props","ref","tabbable","dataGridContext_1","ctx","focusMode","useTableCell_1","as","role","tabIndex","undefined","exports"],"sourceRoot":"../src/","sources":["packages/react-components/react-table/src/components/DataGridCell/useDataGridCell.ts"],"sourcesContent":["import * as React from 'react';\nimport type { DataGridCellProps, DataGridCellState } from './DataGridCell.types';\nimport { useTableCell_unstable } from '../TableCell/useTableCell';\nimport { useDataGridContext_unstable } from '../../contexts/dataGridContext';\n\n/**\n * Create the state required to render DataGridCell.\n *\n * The returned state can be modified with hooks such as useDataGridCellStyles_unstable,\n * before being passed to renderDataGridCell_unstable.\n *\n * @param props - props from this instance of DataGridCell\n * @param ref - reference to root HTMLElement of DataGridCell\n */\nexport const useDataGridCell_unstable = (props: DataGridCellProps, ref: React.Ref<HTMLElement>): DataGridCellState => {\n  const tabbable = useDataGridContext_unstable(ctx => ctx.focusMode === 'cell');\n  return useTableCell_unstable({ as: 'div', role: 'gridcell', tabIndex: tabbable ? 0 : undefined, ...props }, ref);\n};\n"]}
+{"version":3,"mappings":";;;;;;AAEA;AACA;AACA;AAEA;;;;;;;;;AASO,MAAMA,wBAAwB,GAAG,CAACC,KAAwB,EAAEC,GAA2B,KAAuB;EACnH,MAAMC,QAAQ,GAAGC,oCAAkB,EAAE;EACrC,MAAMC,QAAQ,GAAGC,6CAA2B,CAACC,GAAG,IAAIA,GAAG,CAACC,SAAS,KAAK,MAAM,CAAC;EAC7E,MAAMC,gBAAgB,GAAGH,6CAA2B,CAACC,GAAG,IAAIA,GAAG,CAACE,gBAAgB,CAAC;EACjF,MAAMC,YAAY,GAAGJ,6CAA2B,CAACC,GAAG,IAAIA,GAAG,CAACI,qBAAqB,CAAC;EAClF,OAAOC,oCAAqB,CAC1B;IACEC,EAAE,EAAE,KAAK;IACTC,IAAI,EAAE,UAAU;IAChBC,QAAQ,EAAEV,QAAQ,GAAG,CAAC,GAAGW,SAAS;IAClC,IAAIP,gBAAgB,GAAGC,YAAY,CAACO,iBAAiB,CAACd,QAAQ,CAAC,GAAG,EAAE,CAAC;IACrE,GAAGF;GACJ,EACDC,GAAG,CACJ;AACH,CAAC;AAfYgB,gCAAwB","names":["useDataGridCell_unstable","props","ref","columnId","columnIdContext_1","tabbable","dataGridContext_1","ctx","focusMode","resizableColumns","columnSizing","columnSizing_unstable","useTableCell_1","as","role","tabIndex","undefined","getTableCellProps","exports"],"sourceRoot":"../src/","sources":["packages/react-components/react-table/src/components/DataGridCell/useDataGridCell.ts"],"sourcesContent":["import * as React from 'react';\nimport type { DataGridCellProps, DataGridCellState } from './DataGridCell.types';\nimport { useTableCell_unstable } from '../TableCell/useTableCell';\nimport { useDataGridContext_unstable } from '../../contexts/dataGridContext';\nimport { useColumnIdContext } from '../../contexts/columnIdContext';\n\n/**\n * Create the state required to render DataGridCell.\n *\n * The returned state can be modified with hooks such as useDataGridCellStyles_unstable,\n * before being passed to renderDataGridCell_unstable.\n *\n * @param props - props from this instance of DataGridCell\n * @param ref - reference to root HTMLElement of DataGridCell\n */\nexport const useDataGridCell_unstable = (props: DataGridCellProps, ref: React.Ref<HTMLElement>): DataGridCellState => {\n  const columnId = useColumnIdContext();\n  const tabbable = useDataGridContext_unstable(ctx => ctx.focusMode === 'cell');\n  const resizableColumns = useDataGridContext_unstable(ctx => ctx.resizableColumns);\n  const columnSizing = useDataGridContext_unstable(ctx => ctx.columnSizing_unstable);\n  return useTableCell_unstable(\n    {\n      as: 'div',\n      role: 'gridcell',\n      tabIndex: tabbable ? 0 : undefined,\n      ...(resizableColumns ? columnSizing.getTableCellProps(columnId) : {}),\n      ...props,\n    },\n    ref,\n  );\n};\n"]}

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

@@ -25,6 +25,8 @@ const useDataGridHeaderCell_unstable = (props, ref) => {
   } = 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 resizableColumns = dataGridContext_1.useDataGridContext_unstable(ctx => ctx.resizableColumns);
+  const columnSizing = dataGridContext_1.useDataGridContext_unstable(ctx => ctx.columnSizing_unstable);
   const onClick = react_utilities_1.useEventCallback(e => {
     var _a;
     if (sortable) {
@@ -36,6 +38,7 @@ const useDataGridHeaderCell_unstable = (props, ref) => {
     sortDirection,
     as: 'div',
     tabIndex: sortable ? undefined : 0,
+    ...(resizableColumns ? columnSizing.getTableHeaderCellProps(columnId) : {}),
     ...props,
     onClick
   }, ref);

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

@@ -1 +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"]}
+{"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;EAED,MAAMC,gBAAgB,GAAGN,6CAA2B,CAACC,GAAG,IAAIA,GAAG,CAACK,gBAAgB,CAAC;EACjF,MAAMC,YAAY,GAAGP,6CAA2B,CAACC,GAAG,IAAIA,GAAG,CAACO,qBAAqB,CAAC;EAElF,MAAMC,OAAO,GAAGC,kCAAgB,CAAEC,CAA+C,IAAI;;IACnF,IAAId,QAAQ,EAAE;MACZE,gBAAgB,CAACY,CAAC,EAAEhB,QAAQ,CAAC;;IAE/B,WAAK,CAACc,OAAO,+CAAbhB,KAAK,EAAWkB,CAAC,CAAC;EACpB,CAAC,CAAC;EAEF,OAAOC,gDAA2B,CAChC;IACET,aAAa;IACbU,EAAE,EAAE,KAAK;IACTC,QAAQ,EAAEjB,QAAQ,GAAGQ,SAAS,GAAG,CAAC;IAClC,IAAIC,gBAAgB,GAAGC,YAAY,CAACQ,uBAAuB,CAACpB,QAAQ,CAAC,GAAG,EAAE,CAAC;IAC3E,GAAGF,KAAK;IACRgB;GACD,EACDf,GAAG,CACJ;AACH,CAAC;AAhCYsB,sCAA8B","names":["useDataGridHeaderCell_unstable","props","ref","columnId","columnIdContext_1","sortable","tableContext_1","toggleColumnSort","dataGridContext_1","ctx","sort","sortDirection","getSortDirection","undefined","resizableColumns","columnSizing","columnSizing_unstable","onClick","react_utilities_1","e","useTableHeaderCell_1","as","tabIndex","getTableHeaderCellProps","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\n  const resizableColumns = useDataGridContext_unstable(ctx => ctx.resizableColumns);\n  const columnSizing = useDataGridContext_unstable(ctx => ctx.columnSizing_unstable);\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    {\n      sortDirection,\n      as: 'div',\n      tabIndex: sortable ? undefined : 0,\n      ...(resizableColumns ? columnSizing.getTableHeaderCellProps(columnId) : {}),\n      ...props,\n      onClick,\n    },\n    ref,\n  );\n};\n"]}

package/lib-commonjs/components/TableCellLayout/useTableCellLayout.js

@@ -37,6 +37,7 @@ const useTableCellLayout_unstable = (props, ref) => {
       ...props
     }),
     appearance: props.appearance,
+    truncate: props.truncate,
     main: react_utilities_1.resolveShorthand(props.main, {
       required: true
     }),