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

package/lib/utils/columnResizeUtils.js

@@ -0,0 +1,158 @@
+const DEFAULT_WIDTH = 150;
+const 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
+ */
+export function columnDefinitionsToState(columns, state = [], columnSizingOptions = {}) {
+  let updated = false;
+  const stateMap = new Map(state.map(s => [s.columnId, s]));
+  const updatedState = columns.map(column => {
+    var _a, _b, _c, _d;
+    const existingColumnState = stateMap.get(column.columnId);
+    if (existingColumnState) {
+      const {
+        idealWidth = existingColumnState.idealWidth,
+        minWidth = existingColumnState.minWidth,
+        padding = existingColumnState.padding
+      } = (_a = columnSizingOptions[column.columnId]) !== null && _a !== void 0 ? _a : {};
+      if (idealWidth !== existingColumnState.idealWidth || minWidth !== existingColumnState.minWidth || padding !== existingColumnState.padding) {
+        updated = true;
+        return {
+          ...existingColumnState,
+          idealWidth,
+          width: idealWidth,
+          minWidth,
+          padding
+        };
+      }
+      return existingColumnState;
+    }
+    const {
+      defaultWidth,
+      idealWidth,
+      minWidth,
+      padding
+    } = (_b = columnSizingOptions[column.columnId]) !== null && _b !== void 0 ? _b : {};
+    updated = true;
+    return {
+      columnId: column.columnId,
+      width: (_c = defaultWidth !== null && defaultWidth !== void 0 ? defaultWidth : idealWidth) !== null && _c !== void 0 ? _c : DEFAULT_WIDTH,
+      minWidth: minWidth !== null && minWidth !== void 0 ? minWidth : DEFAULT_MIN_WIDTH,
+      idealWidth: (_d = defaultWidth !== null && defaultWidth !== void 0 ? defaultWidth : idealWidth) !== null && _d !== void 0 ? _d : DEFAULT_WIDTH,
+      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) {
+    const column = updatedState.find(col => col.width > col.idealWidth);
+    if (column) {
+      column.width = column.idealWidth;
+    }
+    updated = true;
+  }
+  return updated ? updatedState : state;
+}
+export function getColumnById(state, columnId) {
+  return state.find(c => c.columnId === columnId);
+}
+export function getColumnByIndex(state, index) {
+  return state[index];
+}
+export function getTotalWidth(state) {
+  return state.reduce((sum, column) => sum + column.width + column.padding, 0);
+}
+export function getLength(state) {
+  return state.length;
+}
+export function getColumnWidth(state, columnId) {
+  var _a;
+  const column = getColumnById(state, columnId);
+  return (_a = column === null || column === void 0 ? void 0 : column.width) !== null && _a !== void 0 ? _a : 0;
+}
+/**
+ * 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
+ */
+export function setColumnProperty(localState, columnId, property, value) {
+  const currentColumn = getColumnById(localState, columnId);
+  if (!currentColumn || (currentColumn === null || currentColumn === void 0 ? void 0 : currentColumn[property]) === value) {
+    return localState;
+  }
+  const updatedColumn = {
+    ...currentColumn,
+    [property]: value
+  };
+  const newState = localState.reduce((acc, current) => {
+    if (current.columnId === updatedColumn.columnId) {
+      return [...acc, updatedColumn];
+    }
+    return [...acc, current];
+  }, []);
+  return newState;
+}
+/**
+ * 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
+ */
+export function adjustColumnWidthsToFitContainer(state, containerWidth) {
+  let newState = state;
+  const totalWidth = getTotalWidth(newState);
+  // The total width is smaller, we are expanding columns
+  if (totalWidth < containerWidth) {
+    let difference = containerWidth - totalWidth;
+    let i = 0;
+    // We start at the beginning and assign the columns their ideal width
+    while (i < newState.length && difference > 0) {
+      const currentCol = getColumnByIndex(newState, i);
+      const 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) {
+        const 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) {
+    let difference = totalWidth - containerWidth;
+    // We start with the last column
+    let j = newState.length - 1;
+    while (j >= 0 && difference > 0) {
+      const currentCol = getColumnByIndex(newState, j);
+      if (currentCol.width > currentCol.minWidth) {
+        const colAdjustment = Math.min(currentCol.width - currentCol.minWidth, difference);
+        difference -= colAdjustment;
+        newState = setColumnProperty(newState, currentCol.columnId, 'width', currentCol.width - colAdjustment);
+      }
+      j--;
+    }
+  }
+  return newState;
+}
+//# sourceMappingURL=columnResizeUtils.js.map

package/lib/utils/columnResizeUtils.js.map

@@ -0,0 +1 @@
+{"version":3,"mappings":"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","names":["DEFAULT_WIDTH","DEFAULT_MIN_WIDTH","columnDefinitionsToState","columns","state","columnSizingOptions","updated","stateMap","Map","map","s","columnId","updatedState","column","existingColumnState","get","idealWidth","minWidth","padding","width","defaultWidth","length","find","col","getColumnById","c","getColumnByIndex","index","getTotalWidth","reduce","sum","getLength","getColumnWidth","setColumnProperty","localState","property","value","currentColumn","updatedColumn","newState","acc","current","adjustColumnWidthsToFitContainer","containerWidth","totalWidth","difference","i","currentCol","colAdjustment","Math","min","lastCol","j"],"sourceRoot":"../src/","sources":["packages/react-components/react-table/src/utils/columnResizeUtils.ts"],"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, minWidth, padding } = columnSizingOptions[column.columnId] ?? {};\n\n    updated = true;\n    return {\n      columnId: column.columnId,\n      width: defaultWidth ?? idealWidth ?? DEFAULT_WIDTH,\n      minWidth: minWidth ?? DEFAULT_MIN_WIDTH,\n      idealWidth: defaultWidth ?? idealWidth ?? DEFAULT_WIDTH,\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/TableResizeHandle.js

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

package/lib-commonjs/TableResizeHandle.js.map

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

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

@@ -9,4 +9,5 @@ tslib_1.__exportStar(require("./DataGrid.types"), exports);
 tslib_1.__exportStar(require("./renderDataGrid"), exports);
 tslib_1.__exportStar(require("./useDataGrid"), exports);
 tslib_1.__exportStar(require("./useDataGridStyles"), exports);
+tslib_1.__exportStar(require("./useDataGridContextValues"), exports);
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"mappings":";;;;;;AAAAA;AACAA;AACAA;AACAA;AACAA","names":["tslib_1"],"sourceRoot":"../src/","sources":["packages/react-components/react-table/src/components/DataGrid/index.ts"],"sourcesContent":["export * from './DataGrid';\nexport * from './DataGrid.types';\nexport * from './renderDataGrid';\nexport * from './useDataGrid';\nexport * from './useDataGridStyles';\n"]}
+{"version":3,"mappings":";;;;;;AAAAA;AACAA;AACAA;AACAA;AACAA;AACAA","names":["tslib_1"],"sourceRoot":"../src/","sources":["packages/react-components/react-table/src/components/DataGrid/index.ts"],"sourcesContent":["export * from './DataGrid';\nexport * from './DataGrid.types';\nexport * from './renderDataGrid';\nexport * from './useDataGrid';\nexport * from './useDataGridStyles';\nexport * from './useDataGridContextValues';\n"]}

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

@@ -9,7 +9,8 @@ const useTableHeaderCellStyles_1 = /*#__PURE__*/require("../TableHeaderCell/useT
 exports.dataGridHeaderCellClassNames = {
   root: 'fui-DataGridHeaderCell',
   button: 'fui-DataGridHeaderCell__button',
-  sortIcon: 'fui-DataGridHeaderCell__sortIcon'
+  sortIcon: 'fui-DataGridHeaderCell__sortIcon',
+  aside: 'fui-DataGridHeaderCell__aside'
 };
 /**
  * Apply styling to the DataGridHeaderCell slots based on the state
@@ -23,6 +24,9 @@ const useDataGridHeaderCellStyles_unstable = state => {
   if (state.sortIcon) {
     state.sortIcon.className = react_1.mergeClasses(exports.dataGridHeaderCellClassNames.sortIcon, state.sortIcon.className);
   }
+  if (state.aside) {
+    state.aside.className = react_1.mergeClasses(exports.dataGridHeaderCellClassNames.aside, state.aside.className);
+  }
   return state;
 };
 exports.useDataGridHeaderCellStyles_unstable = useDataGridHeaderCellStyles_unstable;

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

@@ -1 +1 @@
-{"version":3,"mappings":";;;;;;AAAA;AAGA;AAEaA,oCAA4B,GAA4C;EACnFC,IAAI,EAAE,wBAAwB;EAC9BC,MAAM,EAAE,gCAAgC;EACxCC,QAAQ,EAAE;CACX;AAED;;;AAGO,MAAMC,oCAAoC,GAAIC,KAA8B,IAA6B;EAC9GC,4DAAiC,CAACD,KAAK,CAAC;EACxCA,KAAK,CAACJ,IAAI,CAACM,SAAS,GAAGC,oBAAY,CAACR,oCAA4B,CAACC,IAAI,EAAEI,KAAK,CAACJ,IAAI,CAACM,SAAS,CAAC;EAE5F,IAAIF,KAAK,CAACH,MAAM,EAAE;IAChBG,KAAK,CAACH,MAAM,CAACK,SAAS,GAAGC,oBAAY,CAACR,oCAA4B,CAACE,MAAM,EAAEG,KAAK,CAACH,MAAM,CAACK,SAAS,CAAC;;EAGpG,IAAIF,KAAK,CAACF,QAAQ,EAAE;IAClBE,KAAK,CAACF,QAAQ,CAACI,SAAS,GAAGC,oBAAY,CAACR,oCAA4B,CAACG,QAAQ,EAAEE,KAAK,CAACF,QAAQ,CAACI,SAAS,CAAC;;EAG1G,OAAOF,KAAK;AACd,CAAC;AAbYL,4CAAoC","names":["exports","root","button","sortIcon","useDataGridHeaderCellStyles_unstable","state","useTableHeaderCellStyles_1","className","react_1"],"sourceRoot":"../src/","sources":["packages/react-components/react-table/src/components/DataGridHeaderCell/useDataGridHeaderCellStyles.ts"],"sourcesContent":["import { mergeClasses } from '@griffel/react';\nimport type { DataGridHeaderCellSlots, DataGridHeaderCellState } from './DataGridHeaderCell.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { useTableHeaderCellStyles_unstable } from '../TableHeaderCell/useTableHeaderCellStyles';\n\nexport const dataGridHeaderCellClassNames: SlotClassNames<DataGridHeaderCellSlots> = {\n  root: 'fui-DataGridHeaderCell',\n  button: 'fui-DataGridHeaderCell__button',\n  sortIcon: 'fui-DataGridHeaderCell__sortIcon',\n};\n\n/**\n * Apply styling to the DataGridHeaderCell slots based on the state\n */\nexport const useDataGridHeaderCellStyles_unstable = (state: DataGridHeaderCellState): DataGridHeaderCellState => {\n  useTableHeaderCellStyles_unstable(state);\n  state.root.className = mergeClasses(dataGridHeaderCellClassNames.root, state.root.className);\n\n  if (state.button) {\n    state.button.className = mergeClasses(dataGridHeaderCellClassNames.button, state.button.className);\n  }\n\n  if (state.sortIcon) {\n    state.sortIcon.className = mergeClasses(dataGridHeaderCellClassNames.sortIcon, state.sortIcon.className);\n  }\n\n  return state;\n};\n"]}
+{"version":3,"mappings":";;;;;;AAAA;AAGA;AAEaA,oCAA4B,GAA4C;EACnFC,IAAI,EAAE,wBAAwB;EAC9BC,MAAM,EAAE,gCAAgC;EACxCC,QAAQ,EAAE,kCAAkC;EAC5CC,KAAK,EAAE;CACR;AAED;;;AAGO,MAAMC,oCAAoC,GAAIC,KAA8B,IAA6B;EAC9GC,4DAAiC,CAACD,KAAK,CAAC;EACxCA,KAAK,CAACL,IAAI,CAACO,SAAS,GAAGC,oBAAY,CAACT,oCAA4B,CAACC,IAAI,EAAEK,KAAK,CAACL,IAAI,CAACO,SAAS,CAAC;EAE5F,IAAIF,KAAK,CAACJ,MAAM,EAAE;IAChBI,KAAK,CAACJ,MAAM,CAACM,SAAS,GAAGC,oBAAY,CAACT,oCAA4B,CAACE,MAAM,EAAEI,KAAK,CAACJ,MAAM,CAACM,SAAS,CAAC;;EAGpG,IAAIF,KAAK,CAACH,QAAQ,EAAE;IAClBG,KAAK,CAACH,QAAQ,CAACK,SAAS,GAAGC,oBAAY,CAACT,oCAA4B,CAACG,QAAQ,EAAEG,KAAK,CAACH,QAAQ,CAACK,SAAS,CAAC;;EAG1G,IAAIF,KAAK,CAACF,KAAK,EAAE;IACfE,KAAK,CAACF,KAAK,CAACI,SAAS,GAAGC,oBAAY,CAACT,oCAA4B,CAACI,KAAK,EAAEE,KAAK,CAACF,KAAK,CAACI,SAAS,CAAC;;EAGjG,OAAOF,KAAK;AACd,CAAC;AAjBYN,4CAAoC","names":["exports","root","button","sortIcon","aside","useDataGridHeaderCellStyles_unstable","state","useTableHeaderCellStyles_1","className","react_1"],"sourceRoot":"../src/","sources":["packages/react-components/react-table/src/components/DataGridHeaderCell/useDataGridHeaderCellStyles.ts"],"sourcesContent":["import { mergeClasses } from '@griffel/react';\nimport type { DataGridHeaderCellSlots, DataGridHeaderCellState } from './DataGridHeaderCell.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { useTableHeaderCellStyles_unstable } from '../TableHeaderCell/useTableHeaderCellStyles';\n\nexport const dataGridHeaderCellClassNames: SlotClassNames<DataGridHeaderCellSlots> = {\n  root: 'fui-DataGridHeaderCell',\n  button: 'fui-DataGridHeaderCell__button',\n  sortIcon: 'fui-DataGridHeaderCell__sortIcon',\n  aside: 'fui-DataGridHeaderCell__aside',\n};\n\n/**\n * Apply styling to the DataGridHeaderCell slots based on the state\n */\nexport const useDataGridHeaderCellStyles_unstable = (state: DataGridHeaderCellState): DataGridHeaderCellState => {\n  useTableHeaderCellStyles_unstable(state);\n  state.root.className = mergeClasses(dataGridHeaderCellClassNames.root, state.root.className);\n\n  if (state.button) {\n    state.button.className = mergeClasses(dataGridHeaderCellClassNames.button, state.button.className);\n  }\n\n  if (state.sortIcon) {\n    state.sortIcon.className = mergeClasses(dataGridHeaderCellClassNames.sortIcon, state.sortIcon.className);\n  }\n\n  if (state.aside) {\n    state.aside.className = mergeClasses(dataGridHeaderCellClassNames.aside, state.aside.className);\n  }\n\n  return state;\n};\n"]}

package/lib-commonjs/components/TableHeaderCell/renderTableHeaderCell.js

@@ -20,7 +20,9 @@ const renderTableHeaderCell_unstable = state => {
     ...slotProps.button
   }, slotProps.root.children, slots.sortIcon && React.createElement(slots.sortIcon, {
     ...slotProps.sortIcon
-  })));
+  })), slots.aside && React.createElement(slots.aside, {
+    ...slotProps.aside
+  }));
 };
 exports.renderTableHeaderCell_unstable = renderTableHeaderCell_unstable;
 //# sourceMappingURL=renderTableHeaderCell.js.map

package/lib-commonjs/components/TableHeaderCell/renderTableHeaderCell.js.map

@@ -1 +1 @@
-{"version":3,"mappings":";;;;;;AAAA;AACA;AAGA;;;AAGO,MAAMA,8BAA8B,GAAIC,KAA2B,IAAI;EAC5E,MAAM;IAAEC,KAAK;IAAEC;EAAS,CAAE,GAAGC,0BAAQ,CAAuBH,KAAK,CAAC;EAElE,OACEI,oBAACH,KAAK,CAACI,IAAI;IAAA,GAAKH,SAAS,CAACG;EAAI,GAC5BD,oBAACH,KAAK,CAACK,MAAM;IAAA,GAAKJ,SAAS,CAACI;EAAM,GAC/BJ,SAAS,CAACG,IAAI,CAACE,QAAQ,EACvBN,KAAK,CAACO,QAAQ,IAAIJ,oBAACH,KAAK,CAACO,QAAQ;IAAA,GAAKN,SAAS,CAACM;EAAQ,EAAI,CAChD,CACJ;AAEjB,CAAC;AAXYC,sCAA8B","names":["renderTableHeaderCell_unstable","state","slots","slotProps","react_utilities_1","React","root","button","children","sortIcon","exports"],"sourceRoot":"../src/","sources":["packages/react-components/react-table/src/components/TableHeaderCell/renderTableHeaderCell.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { TableHeaderCellState, TableHeaderCellSlots } from './TableHeaderCell.types';\n\n/**\n * Render the final JSX of TableHeaderCell\n */\nexport const renderTableHeaderCell_unstable = (state: TableHeaderCellState) => {\n  const { slots, slotProps } = getSlots<TableHeaderCellSlots>(state);\n\n  return (\n    <slots.root {...slotProps.root}>\n      <slots.button {...slotProps.button}>\n        {slotProps.root.children}\n        {slots.sortIcon && <slots.sortIcon {...slotProps.sortIcon} />}\n      </slots.button>\n    </slots.root>\n  );\n};\n"]}
+{"version":3,"mappings":";;;;;;AAAA;AACA;AAGA;;;AAGO,MAAMA,8BAA8B,GAAIC,KAA2B,IAAI;EAC5E,MAAM;IAAEC,KAAK;IAAEC;EAAS,CAAE,GAAGC,0BAAQ,CAAuBH,KAAK,CAAC;EAElE,OACEI,oBAACH,KAAK,CAACI,IAAI;IAAA,GAAKH,SAAS,CAACG;EAAI,GAC5BD,oBAACH,KAAK,CAACK,MAAM;IAAA,GAAKJ,SAAS,CAACI;EAAM,GAC/BJ,SAAS,CAACG,IAAI,CAACE,QAAQ,EACvBN,KAAK,CAACO,QAAQ,IAAIJ,oBAACH,KAAK,CAACO,QAAQ;IAAA,GAAKN,SAAS,CAACM;EAAQ,EAAI,CAChD,EACdP,KAAK,CAACQ,KAAK,IAAIL,oBAACH,KAAK,CAACQ,KAAK;IAAA,GAAKP,SAAS,CAACO;EAAK,EAAI,CACzC;AAEjB,CAAC;AAZYC,sCAA8B","names":["renderTableHeaderCell_unstable","state","slots","slotProps","react_utilities_1","React","root","button","children","sortIcon","aside","exports"],"sourceRoot":"../src/","sources":["packages/react-components/react-table/src/components/TableHeaderCell/renderTableHeaderCell.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { TableHeaderCellState, TableHeaderCellSlots } from './TableHeaderCell.types';\n\n/**\n * Render the final JSX of TableHeaderCell\n */\nexport const renderTableHeaderCell_unstable = (state: TableHeaderCellState) => {\n  const { slots, slotProps } = getSlots<TableHeaderCellSlots>(state);\n\n  return (\n    <slots.root {...slotProps.root}>\n      <slots.button {...slotProps.button}>\n        {slotProps.root.children}\n        {slots.sortIcon && <slots.sortIcon {...slotProps.sortIcon} />}\n      </slots.button>\n      {slots.aside && <slots.aside {...slotProps.aside} />}\n    </slots.root>\n  );\n};\n"]}

package/lib-commonjs/components/TableHeaderCell/useTableHeaderCell.js

@@ -38,7 +38,8 @@ const useTableHeaderCell_unstable = (props, ref) => {
     components: {
       root: rootComponent,
       button: 'button',
-      sortIcon: 'span'
+      sortIcon: 'span',
+      aside: 'span'
     },
     root: react_utilities_1.getNativeElementProps(rootComponent, {
       ref: react_utilities_1.useMergedRefs(ref, react_tabster_1.useFocusWithin()),
@@ -46,6 +47,7 @@ const useTableHeaderCell_unstable = (props, ref) => {
       'aria-sort': sortable ? (_b = props.sortDirection) !== null && _b !== void 0 ? _b : 'none' : undefined,
       ...props
     }),
+    aside: react_utilities_1.resolveShorthand(props.aside),
     sortIcon: react_utilities_1.resolveShorthand(props.sortIcon, {
       required: !!props.sortDirection,
       defaultProps: {

package/lib-commonjs/components/TableHeaderCell/useTableHeaderCell.js.map

@@ -1 +1 @@
-{"version":3,"mappings":";;;;;;AAAA;AACA;AACA;AACA;AAEA;AACA;AAEA,MAAMA,SAAS,GAAG;EAChBC,SAAS,eAAEC,oBAACC,4BAAc;IAACC,QAAQ,EAAE;EAAE,EAAI;EAC3CC,UAAU,eAAEH,oBAACC,8BAAgB;IAACC,QAAQ,EAAE;EAAE;CAC3C;AAED;;;;;;;;;AASO,MAAME,2BAA2B,GAAG,CACzCC,KAA2B,EAC3BC,GAA2B,KACH;;EACxB,MAAM;IAAEC,gBAAgB;IAAEC;EAAQ,CAAE,GAAGC,8BAAe,EAAE;EAExD,MAAMC,aAAa,GAAG,YAAK,CAACC,EAAE,mCAAIJ,gBAAgB,IAAG,KAAK,GAAG,IAAI;EACjE,OAAO;IACLK,UAAU,EAAE;MACVC,IAAI,EAAEH,aAAa;MACnBI,MAAM,EAAE,QAAQ;MAChBC,QAAQ,EAAE;KACX;IACDF,IAAI,EAAEG,uCAAqB,CAACN,aAAa,EAAE;MACzCJ,GAAG,EAAEU,+BAAa,CAACV,GAAG,EAAEW,8BAAc,EAAE,CAAC;MACzCC,IAAI,EAAER,aAAa,KAAK,KAAK,GAAG,cAAc,GAAGS,SAAS;MAC1D,WAAW,EAAEX,QAAQ,GAAG,WAAK,CAACY,aAAa,mCAAI,MAAM,GAAGD,SAAS;MACjE,GAAGd;KACJ,CAAC;IACFU,QAAQ,EAAEC,kCAAgB,CAACX,KAAK,CAACU,QAAQ,EAAE;MACzCM,QAAQ,EAAE,CAAC,CAAChB,KAAK,CAACe,aAAa;MAC/BE,YAAY,EAAE;QAAEC,QAAQ,EAAElB,KAAK,CAACe,aAAa,GAAGtB,SAAS,CAACO,KAAK,CAACe,aAAa,CAAC,GAAGD;MAAS;KAC3F,CAAC;IACFL,MAAM,EAAEU,mCAAsB,CAACnB,KAAK,CAACS,MAAM,EAAE;MAC3CO,QAAQ,EAAE,IAAI;MACdC,YAAY,EAAE;QACZJ,IAAI,EAAE,cAAc;QACpBO,QAAQ,EAAE,CAAC,CAAC;QACZC,IAAI,EAAE,QAAQ;QACd,IAAIlB,QAAQ,IAAI;UACdU,IAAI,EAAEC,SAAS;UACfM,QAAQ,EAAEN;SACX;;KAEJ,CAAC;IACFX,QAAQ;IACRD;GACD;AACH,CAAC;AAtCYoB,mCAA2B","names":["sortIcons","ascending","React","react_icons_1","fontSize","descending","useTableHeaderCell_unstable","props","ref","noNativeElements","sortable","tableContext_1","rootComponent","as","components","root","button","sortIcon","react_utilities_1","react_tabster_1","role","undefined","sortDirection","required","defaultProps","children","react_aria_1","tabIndex","type","exports"],"sourceRoot":"../src/","sources":["packages/react-components/react-table/src/components/TableHeaderCell/useTableHeaderCell.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, resolveShorthand, useMergedRefs } from '@fluentui/react-utilities';\nimport { useFocusWithin } from '@fluentui/react-tabster';\nimport { ArrowUpRegular, ArrowDownRegular } from '@fluentui/react-icons';\nimport type { TableHeaderCellProps, TableHeaderCellState } from './TableHeaderCell.types';\nimport { useTableContext } from '../../contexts/tableContext';\nimport { useARIAButtonShorthand } from '@fluentui/react-aria';\n\nconst sortIcons = {\n  ascending: <ArrowUpRegular fontSize={12} />,\n  descending: <ArrowDownRegular fontSize={12} />,\n};\n\n/**\n * Create the state required to render TableHeaderCell.\n *\n * The returned state can be modified with hooks such as useTableHeaderCellStyles_unstable,\n * before being passed to renderTableHeaderCell_unstable.\n *\n * @param props - props from this instance of TableHeaderCell\n * @param ref - reference to root HTMLElement of TableHeaderCell\n */\nexport const useTableHeaderCell_unstable = (\n  props: TableHeaderCellProps,\n  ref: React.Ref<HTMLElement>,\n): TableHeaderCellState => {\n  const { noNativeElements, sortable } = useTableContext();\n\n  const rootComponent = props.as ?? noNativeElements ? 'div' : 'th';\n  return {\n    components: {\n      root: rootComponent,\n      button: 'button',\n      sortIcon: 'span',\n    },\n    root: getNativeElementProps(rootComponent, {\n      ref: useMergedRefs(ref, useFocusWithin()),\n      role: rootComponent === 'div' ? 'columnheader' : undefined,\n      'aria-sort': sortable ? props.sortDirection ?? 'none' : undefined,\n      ...props,\n    }),\n    sortIcon: resolveShorthand(props.sortIcon, {\n      required: !!props.sortDirection,\n      defaultProps: { children: props.sortDirection ? sortIcons[props.sortDirection] : undefined },\n    }),\n    button: useARIAButtonShorthand(props.button, {\n      required: true,\n      defaultProps: {\n        role: 'presentation',\n        tabIndex: -1,\n        type: 'button',\n        ...(sortable && {\n          role: undefined,\n          tabIndex: undefined,\n        }),\n      },\n    }),\n    sortable,\n    noNativeElements,\n  };\n};\n"]}
+{"version":3,"mappings":";;;;;;AAAA;AACA;AACA;AACA;AAEA;AACA;AAEA,MAAMA,SAAS,GAAG;EAChBC,SAAS,eAAEC,oBAACC,4BAAc;IAACC,QAAQ,EAAE;EAAE,EAAI;EAC3CC,UAAU,eAAEH,oBAACC,8BAAgB;IAACC,QAAQ,EAAE;EAAE;CAC3C;AAED;;;;;;;;;AASO,MAAME,2BAA2B,GAAG,CACzCC,KAA2B,EAC3BC,GAA2B,KACH;;EACxB,MAAM;IAAEC,gBAAgB;IAAEC;EAAQ,CAAE,GAAGC,8BAAe,EAAE;EAExD,MAAMC,aAAa,GAAG,YAAK,CAACC,EAAE,mCAAIJ,gBAAgB,IAAG,KAAK,GAAG,IAAI;EACjE,OAAO;IACLK,UAAU,EAAE;MACVC,IAAI,EAAEH,aAAa;MACnBI,MAAM,EAAE,QAAQ;MAChBC,QAAQ,EAAE,MAAM;MAChBC,KAAK,EAAE;KACR;IACDH,IAAI,EAAEI,uCAAqB,CAACP,aAAa,EAAE;MACzCJ,GAAG,EAAEW,+BAAa,CAACX,GAAG,EAAEY,8BAAc,EAAE,CAAC;MACzCC,IAAI,EAAET,aAAa,KAAK,KAAK,GAAG,cAAc,GAAGU,SAAS;MAC1D,WAAW,EAAEZ,QAAQ,GAAG,WAAK,CAACa,aAAa,mCAAI,MAAM,GAAGD,SAAS;MACjE,GAAGf;KACJ,CAAC;IACFW,KAAK,EAAEC,kCAAgB,CAACZ,KAAK,CAACW,KAAK,CAAC;IACpCD,QAAQ,EAAEE,kCAAgB,CAACZ,KAAK,CAACU,QAAQ,EAAE;MACzCO,QAAQ,EAAE,CAAC,CAACjB,KAAK,CAACgB,aAAa;MAC/BE,YAAY,EAAE;QAAEC,QAAQ,EAAEnB,KAAK,CAACgB,aAAa,GAAGvB,SAAS,CAACO,KAAK,CAACgB,aAAa,CAAC,GAAGD;MAAS;KAC3F,CAAC;IACFN,MAAM,EAAEW,mCAAsB,CAACpB,KAAK,CAACS,MAAM,EAAE;MAC3CQ,QAAQ,EAAE,IAAI;MACdC,YAAY,EAAE;QACZJ,IAAI,EAAE,cAAc;QACpBO,QAAQ,EAAE,CAAC,CAAC;QACZC,IAAI,EAAE,QAAQ;QACd,IAAInB,QAAQ,IAAI;UACdW,IAAI,EAAEC,SAAS;UACfM,QAAQ,EAAEN;SACX;;KAEJ,CAAC;IACFZ,QAAQ;IACRD;GACD;AACH,CAAC;AAxCYqB,mCAA2B","names":["sortIcons","ascending","React","react_icons_1","fontSize","descending","useTableHeaderCell_unstable","props","ref","noNativeElements","sortable","tableContext_1","rootComponent","as","components","root","button","sortIcon","aside","react_utilities_1","react_tabster_1","role","undefined","sortDirection","required","defaultProps","children","react_aria_1","tabIndex","type","exports"],"sourceRoot":"../src/","sources":["packages/react-components/react-table/src/components/TableHeaderCell/useTableHeaderCell.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, resolveShorthand, useMergedRefs } from '@fluentui/react-utilities';\nimport { useFocusWithin } from '@fluentui/react-tabster';\nimport { ArrowUpRegular, ArrowDownRegular } from '@fluentui/react-icons';\nimport type { TableHeaderCellProps, TableHeaderCellState } from './TableHeaderCell.types';\nimport { useTableContext } from '../../contexts/tableContext';\nimport { useARIAButtonShorthand } from '@fluentui/react-aria';\n\nconst sortIcons = {\n  ascending: <ArrowUpRegular fontSize={12} />,\n  descending: <ArrowDownRegular fontSize={12} />,\n};\n\n/**\n * Create the state required to render TableHeaderCell.\n *\n * The returned state can be modified with hooks such as useTableHeaderCellStyles_unstable,\n * before being passed to renderTableHeaderCell_unstable.\n *\n * @param props - props from this instance of TableHeaderCell\n * @param ref - reference to root HTMLElement of TableHeaderCell\n */\nexport const useTableHeaderCell_unstable = (\n  props: TableHeaderCellProps,\n  ref: React.Ref<HTMLElement>,\n): TableHeaderCellState => {\n  const { noNativeElements, sortable } = useTableContext();\n\n  const rootComponent = props.as ?? noNativeElements ? 'div' : 'th';\n  return {\n    components: {\n      root: rootComponent,\n      button: 'button',\n      sortIcon: 'span',\n      aside: 'span',\n    },\n    root: getNativeElementProps(rootComponent, {\n      ref: useMergedRefs(ref, useFocusWithin()),\n      role: rootComponent === 'div' ? 'columnheader' : undefined,\n      'aria-sort': sortable ? props.sortDirection ?? 'none' : undefined,\n      ...props,\n    }),\n    aside: resolveShorthand(props.aside),\n    sortIcon: resolveShorthand(props.sortIcon, {\n      required: !!props.sortDirection,\n      defaultProps: { children: props.sortDirection ? sortIcons[props.sortDirection] : undefined },\n    }),\n    button: useARIAButtonShorthand(props.button, {\n      required: true,\n      defaultProps: {\n        role: 'presentation',\n        tabIndex: -1,\n        type: 'button',\n        ...(sortable && {\n          role: undefined,\n          tabIndex: undefined,\n        }),\n      },\n    }),\n    sortable,\n    noNativeElements,\n  };\n};\n"]}

package/lib-commonjs/components/TableHeaderCell/useTableHeaderCellStyles.js

@@ -11,7 +11,8 @@ exports.tableHeaderCellClassName = 'fui-TableHeaderCell';
 exports.tableHeaderCellClassNames = {
   root: 'fui-TableHeaderCell',
   button: 'fui-TableHeaderCell__button',
-  sortIcon: 'fui-TableHeaderCell__sortIcon'
+  sortIcon: 'fui-TableHeaderCell__sortIcon',
+  aside: 'fui-TableHeaderCell__aside'
 };
 const useTableLayoutStyles = /*#__PURE__*/react_1.__styles({
   root: {
@@ -47,7 +48,8 @@ const useStyles = /*#__PURE__*/react_1.__styles({
     pehzd3: ["fs9qmxf", "f187m4uq"],
     B8osjzx: ["f187m4uq", "fs9qmxf"],
     u7xebq: ["f145mzao", "f1uha7eq"],
-    Blsv9te: ["f1uha7eq", "f145mzao"]
+    Blsv9te: ["f1uha7eq", "f145mzao"],
+    qhf8xq: "f10pi13n"
   },
   rootInteractive: {
     Jwef8y: "f1t94bn6",
@@ -95,9 +97,10 @@ const useStyles = /*#__PURE__*/react_1.__styles({
     mc9l5x: "f22iagw",
     Bt984gj: "f122n59",
     z8tnut: "fclwglc"
-  }
+  },
+  resizeHandle: {}
 }, {
-  d: [".f1nbblvp{padding-top:0px;}", ".f1vdfbxk{padding-right:var(--spacingHorizontalS);}", ".f1f5gg8d{padding-left:var(--spacingHorizontalS);}", ".f1ov4xf1{padding-bottom:0px;}", ".fhix6mv[data-fui-focus-within]:focus-within{outline-width:2px;}", ".fha7anx[data-fui-focus-within]:focus-within{outline-style:solid;}", ".f1fmzww4[data-fui-focus-within]:focus-within{outline-color:var(--colorStrokeFocus2);}", ".fs9qmxf[data-fui-focus-within]:focus-within{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f187m4uq[data-fui-focus-within]:focus-within{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f145mzao[data-fui-focus-within]:focus-within{border-top-right-radius:var(--borderRadiusMedium);}", ".f1uha7eq[data-fui-focus-within]:focus-within{border-top-left-radius:var(--borderRadiusMedium);}", ".fq6nmtn{resize:horizontal;}", ".f1e4lqlz{box-sizing:content-box;}", ".f1u2r49w{background-color:inherit;}", ".f1ym3bx4{color:inherit;}", ".f1mo0ibp{font-family:inherit;}", ".fjoy568{font-size:inherit;}", ".fytdu2e{line-height:normal;}", ".f1mtd64y{overflow-x:visible;}", ".f1y7q3j9{overflow-y:visible;}", ".f1g0x7ka{padding-top:0;}", ".fhxju0i{padding-right:0;}", ".f1cnd47f{padding-left:0;}", ".f1qch9an{padding-bottom:0;}", ".f1ern45e{border-top-style:none;}", ".f1n71otn{border-right-style:none;}", ".f1deefiw{border-left-style:none;}", ".f1h8hb77{border-bottom-style:none;}", ".f37px4s{-webkit-appearance:button;}", ".fgusgyc{text-align:unset;}", ".f10pi13n{position:relative;}", ".fly5x3f{width:100%;}", ".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".fqerorx{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}", ".f1l02sjl{height:100%;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".f1ufnopg{-webkit-column-gap:var(--spacingHorizontalXS);column-gap:var(--spacingHorizontalXS);}", ".f14sijuj{row-gap:var(--spacingHorizontalXS);}", ".f1nxs5xn{min-height:32px;}", ".f1neuvcm{-webkit-flex-shrink:1;-ms-flex-negative:1;flex-shrink:1;}", ".fkjuxzh{-webkit-flex-basis:0px;-ms-flex-preferred-size:0px;flex-basis:0px;}", ".f1s6fcnf{outline-style:none;}", ".f1k6fduh{cursor:pointer;}", ".fclwglc{padding-top:var(--spacingVerticalXXS);}"],
+  d: [".f1nbblvp{padding-top:0px;}", ".f1vdfbxk{padding-right:var(--spacingHorizontalS);}", ".f1f5gg8d{padding-left:var(--spacingHorizontalS);}", ".f1ov4xf1{padding-bottom:0px;}", ".fhix6mv[data-fui-focus-within]:focus-within{outline-width:2px;}", ".fha7anx[data-fui-focus-within]:focus-within{outline-style:solid;}", ".f1fmzww4[data-fui-focus-within]:focus-within{outline-color:var(--colorStrokeFocus2);}", ".fs9qmxf[data-fui-focus-within]:focus-within{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f187m4uq[data-fui-focus-within]:focus-within{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f145mzao[data-fui-focus-within]:focus-within{border-top-right-radius:var(--borderRadiusMedium);}", ".f1uha7eq[data-fui-focus-within]:focus-within{border-top-left-radius:var(--borderRadiusMedium);}", ".f10pi13n{position:relative;}", ".fq6nmtn{resize:horizontal;}", ".f1e4lqlz{box-sizing:content-box;}", ".f1u2r49w{background-color:inherit;}", ".f1ym3bx4{color:inherit;}", ".f1mo0ibp{font-family:inherit;}", ".fjoy568{font-size:inherit;}", ".fytdu2e{line-height:normal;}", ".f1mtd64y{overflow-x:visible;}", ".f1y7q3j9{overflow-y:visible;}", ".f1g0x7ka{padding-top:0;}", ".fhxju0i{padding-right:0;}", ".f1cnd47f{padding-left:0;}", ".f1qch9an{padding-bottom:0;}", ".f1ern45e{border-top-style:none;}", ".f1n71otn{border-right-style:none;}", ".f1deefiw{border-left-style:none;}", ".f1h8hb77{border-bottom-style:none;}", ".f37px4s{-webkit-appearance:button;}", ".fgusgyc{text-align:unset;}", ".fly5x3f{width:100%;}", ".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".fqerorx{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}", ".f1l02sjl{height:100%;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".f1ufnopg{-webkit-column-gap:var(--spacingHorizontalXS);column-gap:var(--spacingHorizontalXS);}", ".f14sijuj{row-gap:var(--spacingHorizontalXS);}", ".f1nxs5xn{min-height:32px;}", ".f1neuvcm{-webkit-flex-shrink:1;-ms-flex-negative:1;flex-shrink:1;}", ".fkjuxzh{-webkit-flex-basis:0px;-ms-flex-preferred-size:0px;flex-basis:0px;}", ".f1s6fcnf{outline-style:none;}", ".f1k6fduh{cursor:pointer;}", ".fclwglc{padding-top:var(--spacingVerticalXXS);}"],
   h: [".f1t94bn6:hover{background-color:var(--colorSubtleBackgroundHover);}"],
   a: [".f1wfn5kd:active{background-color:var(--colorSubtleBackgroundPressed);}"]
 });
@@ -115,6 +118,9 @@ const useTableHeaderCellStyles_unstable = state => {
   if (state.sortIcon) {
     state.sortIcon.className = react_1.mergeClasses(exports.tableHeaderCellClassNames.sortIcon, styles.sortIcon, state.sortIcon.className);
   }
+  if (state.aside) {
+    state.aside.className = react_1.mergeClasses(exports.tableHeaderCellClassNames.aside, styles.resizeHandle, state.aside.className);
+  }
   return state;
 };
 exports.useTableHeaderCellStyles_unstable = useTableHeaderCellStyles_unstable;

package/lib-commonjs/components/TableHeaderCell/useTableHeaderCellStyles.js.map

@@ -1 +1 @@
-{"version":3,"mappings":";;;;;;AAAA;AACA;AAEA;AAGaA,gCAAwB,GAAG,qBAAqB;AAChDA,iCAAyB,GAAyC;EAC7EC,IAAI,EAAE,qBAAqB;EAC3BC,MAAM,EAAE,6BAA6B;EACrCC,QAAQ,EAAE;CACX;AAED,MAAMC,oBAAoB,gBAAGC,gBAAU;EAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAKrC;AAEF,MAAMC,mBAAmB,gBAAGD,gBAAU;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAMpC;AAEF;;;AAGA,MAAME,SAAS,gBAAGF,gBAAU;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;EAAA;EAAA;AAAA,EAwD1B;AAEF;;;AAGO,MAAMG,iCAAiC,GAAIC,KAA2B,IAA0B;EACrG,MAAMC,MAAM,GAAGH,SAAS,EAAE;EAC1B,MAAMI,YAAY,GAAG;IACnBC,KAAK,EAAER,oBAAoB,EAAE;IAC7BS,IAAI,EAAEP,mBAAmB;GAC1B;EACDG,KAAK,CAACR,IAAI,CAACa,SAAS,GAAGT,oBAAY,CACjCL,iCAAyB,CAACC,IAAI,EAC9BS,MAAM,CAACT,IAAI,EACXQ,KAAK,CAACM,QAAQ,IAAIL,MAAM,CAACM,eAAe,EACxCP,KAAK,CAACQ,gBAAgB,GAAGN,YAAY,CAACE,IAAI,CAACZ,IAAI,GAAGU,YAAY,CAACC,KAAK,CAACX,IAAI,EACzEQ,KAAK,CAACR,IAAI,CAACa,SAAS,CACrB;EACDL,KAAK,CAACP,MAAM,CAACY,SAAS,GAAGT,oBAAY,CACnCL,iCAAyB,CAACE,MAAM,EAChCQ,MAAM,CAACQ,WAAW,EAClBR,MAAM,CAACR,MAAM,EACbO,KAAK,CAACM,QAAQ,IAAIL,MAAM,CAACK,QAAQ,EACjCN,KAAK,CAACP,MAAM,CAACY,SAAS,CACvB;EAED,IAAIL,KAAK,CAACN,QAAQ,EAAE;IAClBM,KAAK,CAACN,QAAQ,CAACW,SAAS,GAAGT,oBAAY,CACrCL,iCAAyB,CAACG,QAAQ,EAClCO,MAAM,CAACP,QAAQ,EACfM,KAAK,CAACN,QAAQ,CAACW,SAAS,CACzB;;EAGH,OAAOL,KAAK;AACd,CAAC;AA9BYT,yCAAiC","names":["exports","root","button","sortIcon","useTableLayoutStyles","react_1","useFlexLayoutStyles","useStyles","useTableHeaderCellStyles_unstable","state","styles","layoutStyles","table","flex","className","sortable","rootInteractive","noNativeElements","resetButton"],"sourceRoot":"../src/","sources":["packages/react-components/react-table/src/components/TableHeaderCell/useTableHeaderCellStyles.ts"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport type { TableHeaderCellSlots, TableHeaderCellState } from './TableHeaderCell.types';\n\nexport const tableHeaderCellClassName = 'fui-TableHeaderCell';\nexport const tableHeaderCellClassNames: SlotClassNames<TableHeaderCellSlots> = {\n  root: 'fui-TableHeaderCell',\n  button: 'fui-TableHeaderCell__button',\n  sortIcon: 'fui-TableHeaderCell__sortIcon',\n};\n\nconst useTableLayoutStyles = makeStyles({\n  root: {\n    display: 'table-cell',\n    verticalAlign: 'middle',\n  },\n});\n\nconst useFlexLayoutStyles = makeStyles({\n  root: {\n    display: 'flex',\n    ...shorthands.flex(1, 1, '0px'),\n    minWidth: '0px',\n  },\n});\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    ...shorthands.padding('0px', tokens.spacingHorizontalS),\n    ...createCustomFocusIndicatorStyle(\n      {\n        ...shorthands.outline('2px', 'solid', tokens.colorStrokeFocus2),\n        ...shorthands.borderRadius(tokens.borderRadiusMedium),\n      },\n      { selector: 'focus-within', enableOutline: true },\n    ),\n  },\n\n  rootInteractive: {\n    ':hover': {\n      backgroundColor: tokens.colorSubtleBackgroundHover,\n    },\n    ':active': {\n      backgroundColor: tokens.colorSubtleBackgroundPressed,\n    },\n  },\n\n  resetButton: {\n    resize: 'horizontal',\n    boxSizing: 'content-box',\n    backgroundColor: 'inherit',\n    color: 'inherit',\n    fontFamily: 'inherit',\n    fontSize: 'inherit',\n    lineHeight: 'normal',\n    ...shorthands.overflow('visible'),\n    ...shorthands.padding(0),\n    ...shorthands.borderStyle('none'),\n    WebkitAppearance: 'button',\n    textAlign: 'unset',\n  },\n  button: {\n    position: 'relative',\n    width: '100%',\n    display: 'flex',\n    flexGrow: 1,\n    height: '100%',\n    alignItems: 'center',\n    ...shorthands.gap(tokens.spacingHorizontalXS),\n    minHeight: '32px',\n    ...shorthands.flex(1, 1, '0px'),\n    outlineStyle: 'none',\n  },\n  sortable: {\n    cursor: 'pointer',\n  },\n\n  sortIcon: {\n    display: 'flex',\n    alignItems: 'center',\n    paddingTop: tokens.spacingVerticalXXS,\n  },\n});\n\n/**\n * Apply styling to the TableHeaderCell slots based on the state\n */\nexport const useTableHeaderCellStyles_unstable = (state: TableHeaderCellState): TableHeaderCellState => {\n  const styles = useStyles();\n  const layoutStyles = {\n    table: useTableLayoutStyles(),\n    flex: useFlexLayoutStyles(),\n  };\n  state.root.className = mergeClasses(\n    tableHeaderCellClassNames.root,\n    styles.root,\n    state.sortable && styles.rootInteractive,\n    state.noNativeElements ? layoutStyles.flex.root : layoutStyles.table.root,\n    state.root.className,\n  );\n  state.button.className = mergeClasses(\n    tableHeaderCellClassNames.button,\n    styles.resetButton,\n    styles.button,\n    state.sortable && styles.sortable,\n    state.button.className,\n  );\n\n  if (state.sortIcon) {\n    state.sortIcon.className = mergeClasses(\n      tableHeaderCellClassNames.sortIcon,\n      styles.sortIcon,\n      state.sortIcon.className,\n    );\n  }\n\n  return state;\n};\n"]}
+{"version":3,"mappings":";;;;;;AAAA;AACA;AAEA;AAGaA,gCAAwB,GAAG,qBAAqB;AAChDA,iCAAyB,GAAyC;EAC7EC,IAAI,EAAE,qBAAqB;EAC3BC,MAAM,EAAE,6BAA6B;EACrCC,QAAQ,EAAE,+BAA+B;EACzCC,KAAK,EAAE;CACR;AAED,MAAMC,oBAAoB,gBAAGC,gBAAU;EAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAKrC;AAEF,MAAMC,mBAAmB,gBAAGD,gBAAU;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAMpC;AAEF;;;AAGA,MAAME,SAAS,gBAAGF,gBAAU;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;EAAA;EAAA;AAAA;EAAA;EAAA;EAAA;AAAA,EA6D1B;AAEF;;;AAGO,MAAMG,iCAAiC,GAAIC,KAA2B,IAA0B;EACrG,MAAMC,MAAM,GAAGH,SAAS,EAAE;EAC1B,MAAMI,YAAY,GAAG;IACnBC,KAAK,EAAER,oBAAoB,EAAE;IAC7BS,IAAI,EAAEP,mBAAmB;GAC1B;EACDG,KAAK,CAACT,IAAI,CAACc,SAAS,GAAGT,oBAAY,CACjCN,iCAAyB,CAACC,IAAI,EAC9BU,MAAM,CAACV,IAAI,EACXS,KAAK,CAACM,QAAQ,IAAIL,MAAM,CAACM,eAAe,EACxCP,KAAK,CAACQ,gBAAgB,GAAGN,YAAY,CAACE,IAAI,CAACb,IAAI,GAAGW,YAAY,CAACC,KAAK,CAACZ,IAAI,EACzES,KAAK,CAACT,IAAI,CAACc,SAAS,CACrB;EACDL,KAAK,CAACR,MAAM,CAACa,SAAS,GAAGT,oBAAY,CACnCN,iCAAyB,CAACE,MAAM,EAChCS,MAAM,CAACQ,WAAW,EAClBR,MAAM,CAACT,MAAM,EACbQ,KAAK,CAACM,QAAQ,IAAIL,MAAM,CAACK,QAAQ,EACjCN,KAAK,CAACR,MAAM,CAACa,SAAS,CACvB;EAED,IAAIL,KAAK,CAACP,QAAQ,EAAE;IAClBO,KAAK,CAACP,QAAQ,CAACY,SAAS,GAAGT,oBAAY,CACrCN,iCAAyB,CAACG,QAAQ,EAClCQ,MAAM,CAACR,QAAQ,EACfO,KAAK,CAACP,QAAQ,CAACY,SAAS,CACzB;;EAGH,IAAIL,KAAK,CAACN,KAAK,EAAE;IACfM,KAAK,CAACN,KAAK,CAACW,SAAS,GAAGT,oBAAY,CAACN,iCAAyB,CAACI,KAAK,EAAEO,MAAM,CAACS,YAAY,EAAEV,KAAK,CAACN,KAAK,CAACW,SAAS,CAAC;;EAGnH,OAAOL,KAAK;AACd,CAAC;AAlCYV,yCAAiC","names":["exports","root","button","sortIcon","aside","useTableLayoutStyles","react_1","useFlexLayoutStyles","useStyles","useTableHeaderCellStyles_unstable","state","styles","layoutStyles","table","flex","className","sortable","rootInteractive","noNativeElements","resetButton","resizeHandle"],"sourceRoot":"../src/","sources":["packages/react-components/react-table/src/components/TableHeaderCell/useTableHeaderCellStyles.ts"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport type { TableHeaderCellSlots, TableHeaderCellState } from './TableHeaderCell.types';\n\nexport const tableHeaderCellClassName = 'fui-TableHeaderCell';\nexport const tableHeaderCellClassNames: SlotClassNames<TableHeaderCellSlots> = {\n  root: 'fui-TableHeaderCell',\n  button: 'fui-TableHeaderCell__button',\n  sortIcon: 'fui-TableHeaderCell__sortIcon',\n  aside: 'fui-TableHeaderCell__aside',\n};\n\nconst useTableLayoutStyles = makeStyles({\n  root: {\n    display: 'table-cell',\n    verticalAlign: 'middle',\n  },\n});\n\nconst useFlexLayoutStyles = makeStyles({\n  root: {\n    display: 'flex',\n    ...shorthands.flex(1, 1, '0px'),\n    minWidth: '0px',\n  },\n});\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    ...shorthands.padding('0px', tokens.spacingHorizontalS),\n    ...createCustomFocusIndicatorStyle(\n      {\n        ...shorthands.outline('2px', 'solid', tokens.colorStrokeFocus2),\n        ...shorthands.borderRadius(tokens.borderRadiusMedium),\n      },\n      { selector: 'focus-within', enableOutline: true },\n    ),\n    position: 'relative',\n  },\n\n  rootInteractive: {\n    ':hover': {\n      backgroundColor: tokens.colorSubtleBackgroundHover,\n    },\n    ':active': {\n      backgroundColor: tokens.colorSubtleBackgroundPressed,\n    },\n  },\n\n  resetButton: {\n    resize: 'horizontal',\n    boxSizing: 'content-box',\n    backgroundColor: 'inherit',\n    color: 'inherit',\n    fontFamily: 'inherit',\n    fontSize: 'inherit',\n    lineHeight: 'normal',\n    ...shorthands.overflow('visible'),\n    ...shorthands.padding(0),\n    ...shorthands.borderStyle('none'),\n    WebkitAppearance: 'button',\n    textAlign: 'unset',\n  },\n\n  button: {\n    position: 'relative',\n    width: '100%',\n    display: 'flex',\n    flexGrow: 1,\n    height: '100%',\n    alignItems: 'center',\n    ...shorthands.gap(tokens.spacingHorizontalXS),\n    minHeight: '32px',\n    ...shorthands.flex(1, 1, '0px'),\n    outlineStyle: 'none',\n  },\n\n  sortable: {\n    cursor: 'pointer',\n  },\n\n  sortIcon: {\n    display: 'flex',\n    alignItems: 'center',\n    paddingTop: tokens.spacingVerticalXXS,\n  },\n\n  resizeHandle: {},\n});\n\n/**\n * Apply styling to the TableHeaderCell slots based on the state\n */\nexport const useTableHeaderCellStyles_unstable = (state: TableHeaderCellState): TableHeaderCellState => {\n  const styles = useStyles();\n  const layoutStyles = {\n    table: useTableLayoutStyles(),\n    flex: useFlexLayoutStyles(),\n  };\n  state.root.className = mergeClasses(\n    tableHeaderCellClassNames.root,\n    styles.root,\n    state.sortable && styles.rootInteractive,\n    state.noNativeElements ? layoutStyles.flex.root : layoutStyles.table.root,\n    state.root.className,\n  );\n  state.button.className = mergeClasses(\n    tableHeaderCellClassNames.button,\n    styles.resetButton,\n    styles.button,\n    state.sortable && styles.sortable,\n    state.button.className,\n  );\n\n  if (state.sortIcon) {\n    state.sortIcon.className = mergeClasses(\n      tableHeaderCellClassNames.sortIcon,\n      styles.sortIcon,\n      state.sortIcon.className,\n    );\n  }\n\n  if (state.aside) {\n    state.aside.className = mergeClasses(tableHeaderCellClassNames.aside, styles.resizeHandle, state.aside.className);\n  }\n\n  return state;\n};\n"]}

package/lib-commonjs/components/TableResizeHandle/TableResizeHandle.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TableResizeHandle = void 0;
+const React = /*#__PURE__*/require("react");
+const useTableResizeHandle_1 = /*#__PURE__*/require("./useTableResizeHandle");
+const renderTableResizeHandle_1 = /*#__PURE__*/require("./renderTableResizeHandle");
+const useTableResizeHandleStyles_1 = /*#__PURE__*/require("./useTableResizeHandleStyles");
+/**
+ * TableResizeHandle component - TODO: add more docs
+ */
+exports.TableResizeHandle = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const state = useTableResizeHandle_1.useTableResizeHandle_unstable(props, ref);
+  useTableResizeHandleStyles_1.useTableResizeHandleStyles_unstable(state);
+  return renderTableResizeHandle_1.renderTableResizeHandle_unstable(state);
+});
+exports.TableResizeHandle.displayName = 'TableResizeHandle';
+//# sourceMappingURL=TableResizeHandle.js.map

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

@@ -0,0 +1 @@
+{"version":3,"mappings":";;;;;;AAAA;AACA;AACA;AACA;AAIA;;;AAGaA,yBAAiB,gBAAgDC,KAAK,CAACC,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EAC5G,MAAMC,KAAK,GAAGC,oDAA6B,CAACH,KAAK,EAAEC,GAAG,CAAC;EAEvDG,gEAAmC,CAACF,KAAK,CAAC;EAC1C,OAAOG,0DAAgC,CAACH,KAAK,CAAC;AAChD,CAAC,CAAC;AAEFL,yBAAiB,CAACS,WAAW,GAAG,mBAAmB","names":["exports","React","forwardRef","props","ref","state","useTableResizeHandle_1","useTableResizeHandleStyles_1","renderTableResizeHandle_1","displayName"],"sourceRoot":"../src/","sources":["packages/react-components/react-table/src/components/TableResizeHandle/TableResizeHandle.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useTableResizeHandle_unstable } from './useTableResizeHandle';\nimport { renderTableResizeHandle_unstable } from './renderTableResizeHandle';\nimport { useTableResizeHandleStyles_unstable } from './useTableResizeHandleStyles';\nimport type { TableResizeHandleProps } from './TableResizeHandle.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * TableResizeHandle component - TODO: add more docs\n */\nexport const TableResizeHandle: ForwardRefComponent<TableResizeHandleProps> = React.forwardRef((props, ref) => {\n  const state = useTableResizeHandle_unstable(props, ref);\n\n  useTableResizeHandleStyles_unstable(state);\n  return renderTableResizeHandle_unstable(state);\n});\n\nTableResizeHandle.displayName = 'TableResizeHandle';\n"]}

package/lib-commonjs/components/TableResizeHandle/TableResizeHandle.types.js

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

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

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

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

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

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

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

package/lib-commonjs/components/TableResizeHandle/renderTableResizeHandle.js

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.renderTableResizeHandle_unstable = void 0;
+const React = /*#__PURE__*/require("react");
+const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
+/**
+ * Render the final JSX of TableResizeHandle
+ */
+const renderTableResizeHandle_unstable = state => {
+  const {
+    slots,
+    slotProps
+  } = react_utilities_1.getSlots(state);
+  return React.createElement(slots.root, {
+    ...slotProps.root
+  });
+};
+exports.renderTableResizeHandle_unstable = renderTableResizeHandle_unstable;
+//# sourceMappingURL=renderTableResizeHandle.js.map

package/lib-commonjs/components/TableResizeHandle/renderTableResizeHandle.js.map

@@ -0,0 +1 @@
+{"version":3,"mappings":";;;;;;AAAA;AACA;AAGA;;;AAGO,MAAMA,gCAAgC,GAAIC,KAA6B,IAAI;EAChF,MAAM;IAAEC,KAAK;IAAEC;EAAS,CAAE,GAAGC,0BAAQ,CAAyBH,KAAK,CAAC;EACpE,OAAOI,oBAACH,KAAK,CAACI,IAAI;IAAA,GAAKH,SAAS,CAACG;EAAI,EAAI;AAC3C,CAAC;AAHYC,wCAAgC","names":["renderTableResizeHandle_unstable","state","slots","slotProps","react_utilities_1","React","root","exports"],"sourceRoot":"../src/","sources":["packages/react-components/react-table/src/components/TableResizeHandle/renderTableResizeHandle.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { TableResizeHandleState, TableResizeHandleSlots } from './TableResizeHandle.types';\n\n/**\n * Render the final JSX of TableResizeHandle\n */\nexport const renderTableResizeHandle_unstable = (state: TableResizeHandleState) => {\n  const { slots, slotProps } = getSlots<TableResizeHandleSlots>(state);\n  return <slots.root {...slotProps.root} />;\n};\n"]}

package/lib-commonjs/components/TableResizeHandle/useTableResizeHandle.js

@@ -0,0 +1,35 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useTableResizeHandle_unstable = void 0;
+const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
+/**
+ * Create the state required to render TableResizeHandle.
+ *
+ * The returned state can be modified with hooks such as useTableResizeHandleStyles_unstable,
+ * before being passed to renderTableResizeHandle_unstable.
+ *
+ * @param props - props from this instance of TableResizeHandle
+ * @param ref - reference to root HTMLElement of TableResizeHandle
+ */
+const useTableResizeHandle_unstable = (props, ref) => {
+  const onClick = react_utilities_1.useEventCallback(event => {
+    var _a;
+    (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props, event);
+    event.stopPropagation();
+  });
+  return {
+    components: {
+      root: 'div'
+    },
+    root: react_utilities_1.getNativeElementProps('div', {
+      ref,
+      ...props,
+      onClick
+    })
+  };
+};
+exports.useTableResizeHandle_unstable = useTableResizeHandle_unstable;
+//# sourceMappingURL=useTableResizeHandle.js.map

package/lib-commonjs/components/TableResizeHandle/useTableResizeHandle.js.map

@@ -0,0 +1 @@
+{"version":3,"mappings":";;;;;;AACA;AAGA;;;;;;;;;AASO,MAAMA,6BAA6B,GAAG,CAC3CC,KAA6B,EAC7BC,GAA2B,KACD;EAC1B,MAAMC,OAAO,GAAGC,kCAAgB,CAAEC,KAAuC,IAAI;;IAC3E,WAAK,CAACF,OAAO,+CAAbF,KAAK,EAAWI,KAAK,CAAC;IACtBA,KAAK,CAACC,eAAe,EAAE;EACzB,CAAC,CAAC;EACF,OAAO;IACLC,UAAU,EAAE;MACVC,IAAI,EAAE;KACP;IACDA,IAAI,EAAEJ,uCAAqB,CAAC,KAAK,EAAE;MACjCF,GAAG;MACH,GAAGD,KAAK;MACRE;KACD;GACF;AACH,CAAC;AAlBYM,qCAA6B","names":["useTableResizeHandle_unstable","props","ref","onClick","react_utilities_1","event","stopPropagation","components","root","exports"],"sourceRoot":"../src/","sources":["packages/react-components/react-table/src/components/TableResizeHandle/useTableResizeHandle.ts"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, useEventCallback } from '@fluentui/react-utilities';\nimport type { TableResizeHandleProps, TableResizeHandleState } from './TableResizeHandle.types';\n\n/**\n * Create the state required to render TableResizeHandle.\n *\n * The returned state can be modified with hooks such as useTableResizeHandleStyles_unstable,\n * before being passed to renderTableResizeHandle_unstable.\n *\n * @param props - props from this instance of TableResizeHandle\n * @param ref - reference to root HTMLElement of TableResizeHandle\n */\nexport const useTableResizeHandle_unstable = (\n  props: TableResizeHandleProps,\n  ref: React.Ref<HTMLElement>,\n): TableResizeHandleState => {\n  const onClick = useEventCallback((event: React.MouseEvent<HTMLDivElement>) => {\n    props.onClick?.(event);\n    event.stopPropagation();\n  });\n  return {\n    components: {\n      root: 'div',\n    },\n    root: getNativeElementProps('div', {\n      ref,\n      ...props,\n      onClick,\n    }),\n  };\n};\n"]}

package/lib-commonjs/components/TableResizeHandle/useTableResizeHandleStyles.js

@@ -0,0 +1,56 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useTableResizeHandleStyles_unstable = exports.tableResizeHandleClassNames = void 0;
+const react_1 = /*#__PURE__*/require("@griffel/react");
+const react_theme_1 = /*#__PURE__*/require("@fluentui/react-theme");
+exports.tableResizeHandleClassNames = {
+  root: 'fui-TableResizeHandle'
+  // TODO: add class names for all slots on TableResizeHandleSlots.
+  // Should be of the form `<slotName>: 'fui-TableResizeHandle__<slotName>`
+};
+/**
+ * Styles for the root slot
+ */
+const useStyles = /*#__PURE__*/react_1.__styles({
+  root: {
+    qhf8xq: "f1euv43f",
+    j35jbq: ["f1e31b4d", "f1vgc2s3"],
+    Bhzewxz: "f15twtuk",
+    B5kzvoi: "f1yab3r1",
+    a9b677: "fjw5fx7",
+    B6of3ja: "f1hu3pq6",
+    t21cq0: ["fn2i5td", "f1eybr6b"],
+    jrapky: "f19f4twv",
+    Frg6f3: ["f1eybr6b", "fn2i5td"],
+    Bceei9c: "fc3en1c",
+    abs64n: "fk73vx1",
+    Bmy1vo4: "f13u1uyl",
+    B3o57yi: "fezquic",
+    Bj3rh1h: "f19g0ac",
+    B7zu5sd: "f15pjodv",
+    Bs6t6z0: "ftgrb5f",
+    Fdvyjd: "f2df6js",
+    Biobvvw: "fshsryb",
+    Hdbjpj: "f11ef69",
+    jc51t6: ["f12lb1dx", "f13tbxeo"],
+    u6d25: "fu4ulse",
+    Bj55yzk: "fw2wsqs",
+    Bkbwdz4: "f1swzn7y"
+  }
+}, {
+  d: [".f1euv43f{position:absolute;}", ".f1e31b4d{right:0;}", ".f1vgc2s3{left:0;}", ".f15twtuk{top:0;}", ".f1yab3r1{bottom:0;}", ".fjw5fx7{width:16px;}", ".f1hu3pq6{margin-top:0;}", ".fn2i5td{margin-right:-8px;}", ".f1eybr6b{margin-left:-8px;}", ".f19f4twv{margin-bottom:0;}", ".fc3en1c{cursor:col-resize;}", ".fk73vx1{opacity:0;}", ".f13u1uyl{transition-property:opacity;}", ".fezquic{transition-duration:.2s;}", ".f19g0ac{z-index:1;}", ".ftgrb5f:after{content:\" \";}", ".f2df6js:after{display:block;}", ".fshsryb:after{width:1px;}", ".f11ef69:after{position:absolute;}", ".f12lb1dx:after{left:50%;}", ".f13tbxeo:after{right:50%;}", ".fu4ulse:after{top:0;}", ".fw2wsqs:after{bottom:0;}", ".f1swzn7y:after{background-color:var(--colorNeutralStroke1);}"],
+  h: [".f15pjodv:hover{opacity:1;}"]
+});
+/**
+ * Apply styling to the TableResizeHandle slots based on the state
+ */
+const useTableResizeHandleStyles_unstable = state => {
+  const styles = useStyles();
+  state.root.className = react_1.mergeClasses(exports.tableResizeHandleClassNames.root, styles.root, state.root.className);
+  return state;
+};
+exports.useTableResizeHandleStyles_unstable = useTableResizeHandleStyles_unstable;
+//# sourceMappingURL=useTableResizeHandleStyles.js.map

package/lib-commonjs/components/TableResizeHandle/useTableResizeHandleStyles.js.map

@@ -0,0 +1 @@
+{"version":3,"mappings":";;;;;;AAAA;AAGA;AAEaA,mCAA2B,GAA2C;EACjFC,IAAI,EAAE;EACN;EACA;CACD;AAED;;;AAGA,MAAMC,SAAS,gBAAGC,gBAAU;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;EAAA;AAAA,EA6B1B;AAEF;;;AAGO,MAAMC,mCAAmC,GAAIC,KAA6B,IAA4B;EAC3G,MAAMC,MAAM,GAAGJ,SAAS,EAAE;EAC1BG,KAAK,CAACJ,IAAI,CAACM,SAAS,GAAGJ,oBAAY,CAACH,mCAA2B,CAACC,IAAI,EAAEK,MAAM,CAACL,IAAI,EAAEI,KAAK,CAACJ,IAAI,CAACM,SAAS,CAAC;EACxG,OAAOF,KAAK;AACd,CAAC;AAJYL,2CAAmC","names":["exports","root","useStyles","react_1","useTableResizeHandleStyles_unstable","state","styles","className"],"sourceRoot":"../src/","sources":["packages/react-components/react-table/src/components/TableResizeHandle/useTableResizeHandleStyles.ts"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { TableResizeHandleSlots, TableResizeHandleState } from './TableResizeHandle.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { tokens } from '@fluentui/react-theme';\n\nexport const tableResizeHandleClassNames: SlotClassNames<TableResizeHandleSlots> = {\n  root: 'fui-TableResizeHandle',\n  // TODO: add class names for all slots on TableResizeHandleSlots.\n  // Should be of the form `<slotName>: 'fui-TableResizeHandle__<slotName>`\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    position: 'absolute',\n    right: 0,\n    top: 0,\n    bottom: 0,\n    width: '16px',\n    ...shorthands.margin(0, '-8px'),\n    cursor: 'col-resize',\n    opacity: 0,\n    transitionProperty: 'opacity',\n    transitionDuration: '.2s',\n    zIndex: 1,\n\n    ':hover': {\n      opacity: 1,\n    },\n\n    ':after': {\n      content: '\" \"',\n      display: 'block',\n      width: '1px',\n      position: 'absolute',\n      left: '50%',\n      top: 0,\n      bottom: 0,\n      backgroundColor: tokens.colorNeutralStroke1,\n    },\n  },\n});\n\n/**\n * Apply styling to the TableResizeHandle slots based on the state\n */\nexport const useTableResizeHandleStyles_unstable = (state: TableResizeHandleState): TableResizeHandleState => {\n  const styles = useStyles();\n  state.root.className = mergeClasses(tableResizeHandleClassNames.root, styles.root, state.root.className);\n  return state;\n};\n"]}

package/lib-commonjs/hooks/index.js

@@ -9,4 +9,5 @@ tslib_1.__exportStar(require("./useTableFeatures"), exports);
 tslib_1.__exportStar(require("./useTableSort"), exports);
 tslib_1.__exportStar(require("./useTableSelection"), exports);
 tslib_1.__exportStar(require("./createColumn"), exports);
+tslib_1.__exportStar(require("./useTableColumnSizing"), exports);
 //# sourceMappingURL=index.js.map

package/lib-commonjs/hooks/index.js.map

@@ -1 +1 @@
-{"version":3,"mappings":";;;;;;AAAAA;AACAA;AACAA;AACAA;AACAA","names":["tslib_1"],"sourceRoot":"../src/","sources":["packages/react-components/react-table/src/hooks/index.ts"],"sourcesContent":["export * from './types';\nexport * from './useTableFeatures';\nexport * from './useTableSort';\nexport * from './useTableSelection';\nexport * from './createColumn';\n"]}
+{"version":3,"mappings":";;;;;;AAAAA;AACAA;AACAA;AACAA;AACAA;AACAA","names":["tslib_1"],"sourceRoot":"../src/","sources":["packages/react-components/react-table/src/hooks/index.ts"],"sourcesContent":["export * from './types';\nexport * from './useTableFeatures';\nexport * from './useTableSort';\nexport * from './useTableSelection';\nexport * from './createColumn';\nexport * from './useTableColumnSizing';\n"]}