@fluentui/react-table 9.0.2 → 9.0.3

package/CHANGELOG.json

@@ -2,7 +2,66 @@
   "name": "@fluentui/react-table",
   "entries": [
     {
-      "date": "Mon, 13 Feb 2023 23:40:50 GMT",
+      "date": "Wed, 15 Feb 2023 11:41:23 GMT",
+      "tag": "@fluentui/react-table_v9.0.3",
+      "version": "9.0.3",
+      "comments": {
+        "prerelease": [
+          {
+            "author": "jirivyhnalek@microsoft.com",
+            "package": "@fluentui/react-table",
+            "commit": "4e349194f193d7371de6040c7c69cf071b87be56",
+            "comment": "feat: Table - add support for resizing columns with touch"
+          }
+        ],
+        "patch": [
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-table",
+            "comment": "Bump @fluentui/react-aria to v9.3.10",
+            "commit": "087d981aab96bef2e332a373069a19bc702a7ca2"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-table",
+            "comment": "Bump @fluentui/react-avatar to v9.3.6",
+            "commit": "087d981aab96bef2e332a373069a19bc702a7ca2"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-table",
+            "comment": "Bump @fluentui/react-checkbox to v9.0.28",
+            "commit": "087d981aab96bef2e332a373069a19bc702a7ca2"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-table",
+            "comment": "Bump @fluentui/react-context-selector to v9.1.10",
+            "commit": "087d981aab96bef2e332a373069a19bc702a7ca2"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-table",
+            "comment": "Bump @fluentui/react-radio to v9.0.26",
+            "commit": "087d981aab96bef2e332a373069a19bc702a7ca2"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-table",
+            "comment": "Bump @fluentui/react-tabster to v9.5.3",
+            "commit": "087d981aab96bef2e332a373069a19bc702a7ca2"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-table",
+            "comment": "Bump @fluentui/react-utilities to v9.6.0",
+            "commit": "087d981aab96bef2e332a373069a19bc702a7ca2"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Mon, 13 Feb 2023 23:43:14 GMT",
       "tag": "@fluentui/react-table_v9.0.2",
       "version": "9.0.2",
       "comments": {

package/CHANGELOG.md

@@ -1,12 +1,31 @@
 # Change Log - @fluentui/react-table
 
-This log was last generated on Mon, 13 Feb 2023 23:40:50 GMT and should not be manually modified.
+This log was last generated on Wed, 15 Feb 2023 11:41:23 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.0.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-table_v9.0.3)
+
+Wed, 15 Feb 2023 11:41:23 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-table_v9.0.2..@fluentui/react-table_v9.0.3)
+
+### Patches
+
+- Bump @fluentui/react-aria to v9.3.10 ([PR #26845](https://github.com/microsoft/fluentui/pull/26845) by beachball)
+- Bump @fluentui/react-avatar to v9.3.6 ([PR #26845](https://github.com/microsoft/fluentui/pull/26845) by beachball)
+- Bump @fluentui/react-checkbox to v9.0.28 ([PR #26845](https://github.com/microsoft/fluentui/pull/26845) by beachball)
+- Bump @fluentui/react-context-selector to v9.1.10 ([PR #26845](https://github.com/microsoft/fluentui/pull/26845) by beachball)
+- Bump @fluentui/react-radio to v9.0.26 ([PR #26845](https://github.com/microsoft/fluentui/pull/26845) by beachball)
+- Bump @fluentui/react-tabster to v9.5.3 ([PR #26845](https://github.com/microsoft/fluentui/pull/26845) by beachball)
+- Bump @fluentui/react-utilities to v9.6.0 ([PR #26845](https://github.com/microsoft/fluentui/pull/26845) by beachball)
+
+### Changes
+
+- feat: Table - add support for resizing columns with touch ([PR #26784](https://github.com/microsoft/fluentui/pull/26784) by jirivyhnalek@microsoft.com)
+
 ## [9.0.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-table_v9.0.2)
 
-Mon, 13 Feb 2023 23:40:50 GMT 
+Mon, 13 Feb 2023 23:43:14 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-table_v9.0.1..@fluentui/react-table_v9.0.2)
 
 ### Patches

package/dist/index.d.ts

@@ -185,7 +185,7 @@ export declare type DataGridProps = TableProps & Pick<DataGridContextValue, 'ite
     /**
      * A callback triggered when a column is resized.
      */
-    onColumnResize?: (event: MouseEvent | undefined, data: {
+    onColumnResize?: (e: TouchEvent | MouseEvent | undefined, data: {
         columnId: TableColumnId;
         width: number;
     }) => void;
@@ -502,7 +502,7 @@ export declare type TableColumnSizingOptions = Record<TableColumnId, Partial<Pic
 }>;
 
 declare interface TableColumnSizingState {
-    getOnMouseDown: (columnId: TableColumnId) => (e: React_2.MouseEvent<HTMLElement>) => void;
+    getOnMouseDown: (columnId: TableColumnId) => (e: React_2.MouseEvent | React_2.TouchEvent) => void;
     setColumnWidth: (columnId: TableColumnId, newSize: number) => void;
     getColumnWidths: () => ColumnWidthState[];
     getTableHeaderCellProps: (columnId: TableColumnId) => ColumnSizingTableHeaderCellProps;
@@ -1016,7 +1016,7 @@ export declare function useTableColumnSizing_unstable<TItem>(params?: UseTableCo
 
 declare type UseTableColumnSizingParams = {
     columnSizingOptions?: TableColumnSizingOptions;
-    onColumnResize?: (e: MouseEvent | undefined, data: {
+    onColumnResize?: (e: TouchEvent | MouseEvent | undefined, data: {
         columnId: TableColumnId;
         width: number;
     }) => void;

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

@@ -1 +1 @@
-{"version":3,"file":"DataGrid.types.js","sourceRoot":"../src/","sources":["packages/react-components/react-table/src/components/DataGrid/DataGrid.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport type { TableContextValues, TableProps, TableSlots, TableState } from '../Table/Table.types';\nimport type {\n  SortState,\n  TableFeaturesState,\n  UseTableSortOptions,\n  SelectionMode,\n  UseTableSelectionOptions,\n  OnSelectionChangeData,\n  TableColumnSizingOptions,\n  TableColumnId,\n} from '../../hooks';\nimport { TableRowProps } from '../TableRow/TableRow.types';\n\nexport type DataGridSlots = TableSlots;\n\nexport type DataGridFocusMode = 'none' | 'cell' | 'row_unstable';\n\nexport type DataGridContextValues = TableContextValues & {\n  dataGrid: DataGridContextValue;\n};\n\n// Use any here since we can't know the user types\n// The user is responsible for narrowing the type downstream\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport type DataGridContextValue = TableFeaturesState<any> & {\n  /**\n   * How focus navigation will work in the datagrid\n   * @default cell\n   */\n  focusMode: DataGridFocusMode;\n\n  /**\n   * Lets child components know if rows selection is enabled\n   * @see selectionMode prop enables row selection on the component\n   */\n  selectableRows: boolean;\n\n  /**\n   * Enables subtle selection style\n   * @default false\n   */\n  subtleSelection: boolean;\n\n  /**\n   * Row appearance when selected\n   * @default brand\n   */\n  selectionAppearance: TableRowProps['appearance'];\n\n  /**\n   * Enables column resizing\n   */\n  resizableColumns?: boolean;\n};\n\n/**\n * DataGrid Props\n */\nexport type DataGridProps = TableProps &\n  Pick<DataGridContextValue, 'items' | 'columns' | 'getRowId'> &\n  Pick<Partial<DataGridContextValue>, 'focusMode' | 'subtleSelection' | 'selectionAppearance' | 'resizableColumns'> &\n  Pick<UseTableSortOptions, 'sortState' | 'defaultSortState'> &\n  Pick<UseTableSelectionOptions, 'defaultSelectedItems' | 'selectedItems'> & {\n    onSortChange?: (e: React.MouseEvent, sortState: SortState) => void;\n    onSelectionChange?: (e: React.MouseEvent | React.KeyboardEvent, data: OnSelectionChangeData) => void;\n    /**\n     * Enables row selection and sets the selection mode\n     * @default false\n     */\n    selectionMode?: SelectionMode;\n    /**\n     * Options for column resizing\n     */\n    columnSizingOptions?: TableColumnSizingOptions;\n    /**\n     * A callback triggered when a column is resized.\n     */\n    onColumnResize?: (event: MouseEvent | undefined, data: { columnId: TableColumnId; width: number }) => void;\n  };\n\n/**\n * State used in rendering DataGrid\n */\nexport type DataGridState = TableState & { tableState: TableFeaturesState<unknown> } & Pick<\n    DataGridContextValue,\n    'focusMode' | 'selectableRows' | 'subtleSelection' | 'selectionAppearance' | 'getRowId' | 'resizableColumns'\n  >;\n"]}
+{"version":3,"file":"DataGrid.types.js","sourceRoot":"../src/","sources":["packages/react-components/react-table/src/components/DataGrid/DataGrid.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport type { TableContextValues, TableProps, TableSlots, TableState } from '../Table/Table.types';\nimport type {\n  SortState,\n  TableFeaturesState,\n  UseTableSortOptions,\n  SelectionMode,\n  UseTableSelectionOptions,\n  OnSelectionChangeData,\n  TableColumnSizingOptions,\n  TableColumnId,\n} from '../../hooks';\nimport { TableRowProps } from '../TableRow/TableRow.types';\n\nexport type DataGridSlots = TableSlots;\n\nexport type DataGridFocusMode = 'none' | 'cell' | 'row_unstable';\n\nexport type DataGridContextValues = TableContextValues & {\n  dataGrid: DataGridContextValue;\n};\n\n// Use any here since we can't know the user types\n// The user is responsible for narrowing the type downstream\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport type DataGridContextValue = TableFeaturesState<any> & {\n  /**\n   * How focus navigation will work in the datagrid\n   * @default cell\n   */\n  focusMode: DataGridFocusMode;\n\n  /**\n   * Lets child components know if rows selection is enabled\n   * @see selectionMode prop enables row selection on the component\n   */\n  selectableRows: boolean;\n\n  /**\n   * Enables subtle selection style\n   * @default false\n   */\n  subtleSelection: boolean;\n\n  /**\n   * Row appearance when selected\n   * @default brand\n   */\n  selectionAppearance: TableRowProps['appearance'];\n\n  /**\n   * Enables column resizing\n   */\n  resizableColumns?: boolean;\n};\n\n/**\n * DataGrid Props\n */\nexport type DataGridProps = TableProps &\n  Pick<DataGridContextValue, 'items' | 'columns' | 'getRowId'> &\n  Pick<Partial<DataGridContextValue>, 'focusMode' | 'subtleSelection' | 'selectionAppearance' | 'resizableColumns'> &\n  Pick<UseTableSortOptions, 'sortState' | 'defaultSortState'> &\n  Pick<UseTableSelectionOptions, 'defaultSelectedItems' | 'selectedItems'> & {\n    onSortChange?: (e: React.MouseEvent, sortState: SortState) => void;\n    onSelectionChange?: (e: React.MouseEvent | React.KeyboardEvent, data: OnSelectionChangeData) => void;\n    /**\n     * Enables row selection and sets the selection mode\n     * @default false\n     */\n    selectionMode?: SelectionMode;\n    /**\n     * Options for column resizing\n     */\n    columnSizingOptions?: TableColumnSizingOptions;\n    /**\n     * A callback triggered when a column is resized.\n     */\n    onColumnResize?: (e: TouchEvent | MouseEvent | undefined, data: { columnId: TableColumnId; width: number }) => void;\n  };\n\n/**\n * State used in rendering DataGrid\n */\nexport type DataGridState = TableState & { tableState: TableFeaturesState<unknown> } & Pick<\n    DataGridContextValue,\n    'focusMode' | 'selectableRows' | 'subtleSelection' | 'selectionAppearance' | 'getRowId' | 'resizableColumns'\n  >;\n"]}

package/lib/hooks/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","sourceRoot":"../src/","sources":["packages/react-components/react-table/src/hooks/types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport { SortDirection } from '../components/Table/Table.types';\nimport { TableHeaderCellProps } from '../components/TableHeaderCell/TableHeaderCell.types';\n\nexport type TableRowId = string | number;\nexport type TableColumnId = string | number;\nexport type SelectionMode = 'single' | 'multiselect';\n\nexport interface SortState {\n  sortColumn: TableColumnId | undefined;\n  sortDirection: SortDirection;\n}\n\nexport interface OnSelectionChangeData {\n  selectedItems: Set<TableRowId>;\n}\n\nexport interface CreateTableColumnOptions<TItem> extends Partial<TableColumnDefinition<TItem>> {\n  columnId: TableColumnId;\n}\n\nexport interface TableColumnDefinition<TItem> {\n  columnId: TableColumnId;\n  compare: (a: TItem, b: TItem) => number;\n  renderHeaderCell: () => React.ReactNode;\n  renderCell: (item: TItem) => React.ReactNode;\n}\n\nexport type RowEnhancer<TItem, TRowState extends TableRowData<TItem> = TableRowData<TItem>> = (\n  row: TableRowData<TItem>,\n) => TRowState;\n\nexport interface TableSortState<TItem> {\n  /**\n   * Current sort direction\n   */\n  sortDirection: SortDirection;\n  /**\n   * Column id of the currently sorted column\n   */\n  sortColumn: TableColumnId | undefined;\n  /**\n   * Set the sort direction for the specified column\n   */\n  setColumnSort: (event: React.SyntheticEvent, columnId: TableColumnId, sortDirection: SortDirection) => void;\n  /**\n   * Toggles the sort direction for specified column\n   */\n  toggleColumnSort: (event: React.SyntheticEvent, columnId: TableColumnId) => void;\n  /**\n   * Returns the sort direction if a column is sorted,\n   * returns undefined if the column is not sorted\n   */\n  getSortDirection: (columnId: TableColumnId) => SortDirection | undefined;\n\n  /**\n   * Sorts rows and returns a **shallow** copy of original items\n   */\n  sort: <TRowState extends TableRowData<TItem>>(rows: TRowState[]) => TRowState[];\n}\n\nexport interface TableSelectionState {\n  /**\n   * Clears all selected rows\n   */\n  clearRows: (e: React.SyntheticEvent) => void;\n  /**\n   * Selects single row\n   */\n  selectRow: (e: React.SyntheticEvent, rowId: TableRowId) => void;\n  /**\n   * De-selects single row\n   */\n  deselectRow: (e: React.SyntheticEvent, rowId: TableRowId) => void;\n  /**\n   * Toggle selection of all rows\n   */\n  toggleAllRows: (e: React.SyntheticEvent) => void;\n  /**\n   * Toggle selection of single row\n   */\n  toggleRow: (e: React.SyntheticEvent, rowId: TableRowId) => void;\n  /**\n   * Collection of row ids corresponding to selected rows\n   */\n  selectedRows: Set<TableRowId>;\n  /**\n   * Whether all rows are selected\n   */\n  allRowsSelected: boolean;\n  /**\n   * Whether some rows are selected\n   */\n  someRowsSelected: boolean;\n\n  /**\n   * Checks if a given rowId is selected\n   */\n  isRowSelected: (rowId: TableRowId) => boolean;\n\n  selectionMode: SelectionMode;\n}\n\nexport interface TableRowData<TItem> {\n  /**\n   * User provided data\n   */\n  item: TItem;\n  /**\n   * The row id, defaults to index position in the collection\n   */\n  rowId: TableRowId;\n}\n\nexport interface TableFeaturesState<TItem> extends Pick<UseTableFeaturesOptions<TItem>, 'items' | 'getRowId'> {\n  /**\n   * The row data for rendering\n   * @param rowEnhancer - Enhances the row with extra user data\n   */\n  getRows: <TRowState extends TableRowData<TItem> = TableRowData<TItem>>(\n    rowEnhancer?: RowEnhancer<TItem, TRowState>,\n  ) => TRowState[];\n  /**\n   * State and actions to manage row selection\n   */\n  selection: TableSelectionState;\n  /**\n   * State and actions to manage row sorting\n   */\n  sort: TableSortState<TItem>;\n  /**\n   * Table columns\n   */\n  columns: TableColumnDefinition<TItem>[];\n  /**\n   * State and actions to manage column resizing\n   */\n  // eslint-disable-next-line @typescript-eslint/naming-convention\n  columnSizing_unstable: TableColumnSizingState;\n  /**\n   * A React.Ref object to be set as a ref for the table.\n   * Used with column resizing.\n   */\n  tableRef: React.Ref<HTMLDivElement>;\n}\n\nexport interface UseTableSortOptions {\n  /**\n   * Used to control sorting\n   */\n  sortState?: SortState;\n  /**\n   * Used in uncontrolled mode to set initial sort column and direction on mount\n   */\n  defaultSortState?: SortState;\n  /**\n   * Called when sort changes\n   */\n  onSortChange?(e: React.SyntheticEvent, state: SortState): void;\n}\n\nexport interface UseTableSelectionOptions {\n  /**\n   * Can be multi or single select\n   */\n  selectionMode: SelectionMode;\n  /**\n   * Used in uncontrolled mode to set initial selected rows on mount\n   */\n  defaultSelectedItems?: Set<TableRowId>;\n  /**\n   * Used to control row selection\n   */\n  selectedItems?: Set<TableRowId>;\n  /**\n   * Called when selection changes\n   */\n  onSelectionChange?(e: React.SyntheticEvent, data: OnSelectionChangeData): void;\n}\n\nexport interface UseTableFeaturesOptions<TItem> {\n  columns: TableColumnDefinition<TItem>[];\n  items: TItem[];\n  getRowId?: (item: TItem) => TableRowId;\n}\n\nexport type TableFeaturePlugin = <TItem>(tableState: TableFeaturesState<TItem>) => TableFeaturesState<TItem>;\n\nexport interface ColumnWidthState {\n  columnId: TableColumnId;\n  width: number;\n  minWidth: number;\n  idealWidth: number;\n  padding: number;\n}\n\nexport type ColumnSizingTableHeaderCellProps = Pick<TableHeaderCellProps, 'style' | 'aside'>;\nexport type ColumnSizingTableCellProps = Pick<TableHeaderCellProps, 'style'>;\n\nexport interface TableColumnSizingState {\n  getOnMouseDown: (columnId: TableColumnId) => (e: React.MouseEvent<HTMLElement>) => void;\n  setColumnWidth: (columnId: TableColumnId, newSize: number) => void;\n  getColumnWidths: () => ColumnWidthState[];\n  getTableHeaderCellProps: (columnId: TableColumnId) => ColumnSizingTableHeaderCellProps;\n  getTableCellProps: (columnId: TableColumnId) => ColumnSizingTableCellProps;\n}\n\nexport type ColumnResizeState = {\n  getColumnWidth: (columnId: TableColumnId) => number;\n  setColumnWidth: (e: MouseEvent | undefined, data: { columnId: TableColumnId; width: number }) => void;\n  getColumnById: (columnId: TableColumnId) => ColumnWidthState | undefined;\n  getColumns: () => ColumnWidthState[];\n};\n\nexport type TableColumnSizingOptions = Record<\n  TableColumnId,\n  Partial<Pick<ColumnWidthState, 'minWidth' | 'idealWidth' | 'padding'>> & { defaultWidth?: number }\n>;\n\nexport type UseTableColumnSizingParams = {\n  columnSizingOptions?: TableColumnSizingOptions;\n  onColumnResize?: (e: MouseEvent | undefined, data: { columnId: TableColumnId; width: number }) => void;\n  containerWidthOffset?: number;\n};\n"]}
+{"version":3,"file":"types.js","sourceRoot":"../src/","sources":["packages/react-components/react-table/src/hooks/types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport { SortDirection } from '../components/Table/Table.types';\nimport { TableHeaderCellProps } from '../components/TableHeaderCell/TableHeaderCell.types';\n\nexport type TableRowId = string | number;\nexport type TableColumnId = string | number;\nexport type SelectionMode = 'single' | 'multiselect';\n\nexport interface SortState {\n  sortColumn: TableColumnId | undefined;\n  sortDirection: SortDirection;\n}\n\nexport interface OnSelectionChangeData {\n  selectedItems: Set<TableRowId>;\n}\n\nexport interface CreateTableColumnOptions<TItem> extends Partial<TableColumnDefinition<TItem>> {\n  columnId: TableColumnId;\n}\n\nexport interface TableColumnDefinition<TItem> {\n  columnId: TableColumnId;\n  compare: (a: TItem, b: TItem) => number;\n  renderHeaderCell: () => React.ReactNode;\n  renderCell: (item: TItem) => React.ReactNode;\n}\n\nexport type RowEnhancer<TItem, TRowState extends TableRowData<TItem> = TableRowData<TItem>> = (\n  row: TableRowData<TItem>,\n) => TRowState;\n\nexport interface TableSortState<TItem> {\n  /**\n   * Current sort direction\n   */\n  sortDirection: SortDirection;\n  /**\n   * Column id of the currently sorted column\n   */\n  sortColumn: TableColumnId | undefined;\n  /**\n   * Set the sort direction for the specified column\n   */\n  setColumnSort: (event: React.SyntheticEvent, columnId: TableColumnId, sortDirection: SortDirection) => void;\n  /**\n   * Toggles the sort direction for specified column\n   */\n  toggleColumnSort: (event: React.SyntheticEvent, columnId: TableColumnId) => void;\n  /**\n   * Returns the sort direction if a column is sorted,\n   * returns undefined if the column is not sorted\n   */\n  getSortDirection: (columnId: TableColumnId) => SortDirection | undefined;\n\n  /**\n   * Sorts rows and returns a **shallow** copy of original items\n   */\n  sort: <TRowState extends TableRowData<TItem>>(rows: TRowState[]) => TRowState[];\n}\n\nexport interface TableSelectionState {\n  /**\n   * Clears all selected rows\n   */\n  clearRows: (e: React.SyntheticEvent) => void;\n  /**\n   * Selects single row\n   */\n  selectRow: (e: React.SyntheticEvent, rowId: TableRowId) => void;\n  /**\n   * De-selects single row\n   */\n  deselectRow: (e: React.SyntheticEvent, rowId: TableRowId) => void;\n  /**\n   * Toggle selection of all rows\n   */\n  toggleAllRows: (e: React.SyntheticEvent) => void;\n  /**\n   * Toggle selection of single row\n   */\n  toggleRow: (e: React.SyntheticEvent, rowId: TableRowId) => void;\n  /**\n   * Collection of row ids corresponding to selected rows\n   */\n  selectedRows: Set<TableRowId>;\n  /**\n   * Whether all rows are selected\n   */\n  allRowsSelected: boolean;\n  /**\n   * Whether some rows are selected\n   */\n  someRowsSelected: boolean;\n\n  /**\n   * Checks if a given rowId is selected\n   */\n  isRowSelected: (rowId: TableRowId) => boolean;\n\n  selectionMode: SelectionMode;\n}\n\nexport interface TableRowData<TItem> {\n  /**\n   * User provided data\n   */\n  item: TItem;\n  /**\n   * The row id, defaults to index position in the collection\n   */\n  rowId: TableRowId;\n}\n\nexport interface TableFeaturesState<TItem> extends Pick<UseTableFeaturesOptions<TItem>, 'items' | 'getRowId'> {\n  /**\n   * The row data for rendering\n   * @param rowEnhancer - Enhances the row with extra user data\n   */\n  getRows: <TRowState extends TableRowData<TItem> = TableRowData<TItem>>(\n    rowEnhancer?: RowEnhancer<TItem, TRowState>,\n  ) => TRowState[];\n  /**\n   * State and actions to manage row selection\n   */\n  selection: TableSelectionState;\n  /**\n   * State and actions to manage row sorting\n   */\n  sort: TableSortState<TItem>;\n  /**\n   * Table columns\n   */\n  columns: TableColumnDefinition<TItem>[];\n  /**\n   * State and actions to manage column resizing\n   */\n  // eslint-disable-next-line @typescript-eslint/naming-convention\n  columnSizing_unstable: TableColumnSizingState;\n  /**\n   * A React.Ref object to be set as a ref for the table.\n   * Used with column resizing.\n   */\n  tableRef: React.Ref<HTMLDivElement>;\n}\n\nexport interface UseTableSortOptions {\n  /**\n   * Used to control sorting\n   */\n  sortState?: SortState;\n  /**\n   * Used in uncontrolled mode to set initial sort column and direction on mount\n   */\n  defaultSortState?: SortState;\n  /**\n   * Called when sort changes\n   */\n  onSortChange?(e: React.SyntheticEvent, state: SortState): void;\n}\n\nexport interface UseTableSelectionOptions {\n  /**\n   * Can be multi or single select\n   */\n  selectionMode: SelectionMode;\n  /**\n   * Used in uncontrolled mode to set initial selected rows on mount\n   */\n  defaultSelectedItems?: Set<TableRowId>;\n  /**\n   * Used to control row selection\n   */\n  selectedItems?: Set<TableRowId>;\n  /**\n   * Called when selection changes\n   */\n  onSelectionChange?(e: React.SyntheticEvent, data: OnSelectionChangeData): void;\n}\n\nexport interface UseTableFeaturesOptions<TItem> {\n  columns: TableColumnDefinition<TItem>[];\n  items: TItem[];\n  getRowId?: (item: TItem) => TableRowId;\n}\n\nexport type TableFeaturePlugin = <TItem>(tableState: TableFeaturesState<TItem>) => TableFeaturesState<TItem>;\n\nexport interface ColumnWidthState {\n  columnId: TableColumnId;\n  width: number;\n  minWidth: number;\n  idealWidth: number;\n  padding: number;\n}\n\nexport type ColumnSizingTableHeaderCellProps = Pick<TableHeaderCellProps, 'style' | 'aside'>;\nexport type ColumnSizingTableCellProps = Pick<TableHeaderCellProps, 'style'>;\n\nexport interface TableColumnSizingState {\n  getOnMouseDown: (columnId: TableColumnId) => (e: React.MouseEvent | React.TouchEvent) => void;\n  setColumnWidth: (columnId: TableColumnId, newSize: number) => void;\n  getColumnWidths: () => ColumnWidthState[];\n  getTableHeaderCellProps: (columnId: TableColumnId) => ColumnSizingTableHeaderCellProps;\n  getTableCellProps: (columnId: TableColumnId) => ColumnSizingTableCellProps;\n}\n\nexport type ColumnResizeState = {\n  getColumnWidth: (columnId: TableColumnId) => number;\n  setColumnWidth: (e: TouchEvent | MouseEvent | undefined, data: { columnId: TableColumnId; width: number }) => void;\n  getColumnById: (columnId: TableColumnId) => ColumnWidthState | undefined;\n  getColumns: () => ColumnWidthState[];\n};\n\nexport type TableColumnSizingOptions = Record<\n  TableColumnId,\n  Partial<Pick<ColumnWidthState, 'minWidth' | 'idealWidth' | 'padding'>> & { defaultWidth?: number }\n>;\n\nexport type UseTableColumnSizingParams = {\n  columnSizingOptions?: TableColumnSizingOptions;\n  onColumnResize?: (e: TouchEvent | MouseEvent | undefined, data: { columnId: TableColumnId; width: number }) => void;\n  containerWidthOffset?: number;\n};\n"]}

package/lib/hooks/useTableColumnResizeMouseHandler.js

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
+import { getEventClientCoords, isMouseEvent, isTouchEvent } from '@fluentui/react-utilities';
 export function useTableColumnResizeMouseHandler(columnResizeState) {
   const mouseX = React.useRef(0);
   const currentWidth = React.useRef(0);
@@ -8,40 +9,55 @@ export function useTableColumnResizeMouseHandler(columnResizeState) {
     targetDocument
   } = useFluent();
   const globalWin = targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.defaultView;
-  const handleMouseMove = React.useCallback(e => {
-    const dx = e.clientX - mouseX.current;
+  const recalculatePosition = React.useCallback(e => {
+    const {
+      clientX
+    } = getEventClientCoords(e);
+    const dx = clientX - mouseX.current;
     // Update the local width for the column and set it
     currentWidth.current += dx;
     colId.current && columnResizeState.setColumnWidth(e, {
       columnId: colId.current,
       width: currentWidth.current
     });
-    mouseX.current = e.clientX;
+    mouseX.current = clientX;
   }, [columnResizeState]);
-  const onMouseMove = React.useCallback(e => {
+  const onDrag = React.useCallback(e => {
     // Using requestAnimationFrame here drastically improves resizing experience on slower CPUs
     if (typeof (globalWin === null || globalWin === void 0 ? void 0 : globalWin.requestAnimationFrame) === 'function') {
-      requestAnimationFrame(() => handleMouseMove(e));
+      requestAnimationFrame(() => recalculatePosition(e));
     } else {
-      handleMouseMove(e);
+      recalculatePosition(e);
     }
-  }, [globalWin === null || globalWin === void 0 ? void 0 : globalWin.requestAnimationFrame, handleMouseMove]);
-  const onMouseUp = React.useCallback(e => {
-    targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.removeEventListener('mouseup', onMouseUp);
-    targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.removeEventListener('mousemove', onMouseMove);
-  }, [onMouseMove, targetDocument]);
-  const getOnMouseDown = columnId => mouseDownEvent => {
-    // ignore other buttons than primary mouse button
-    if (mouseDownEvent.target !== mouseDownEvent.currentTarget || mouseDownEvent.button !== 0) {
-      return;
+  }, [globalWin === null || globalWin === void 0 ? void 0 : globalWin.requestAnimationFrame, recalculatePosition]);
+  const onDragEnd = React.useCallback(event => {
+    if (isMouseEvent(event)) {
+      targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.removeEventListener('mouseup', onDragEnd);
+      targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.removeEventListener('mousemove', onDrag);
     }
+    if (isTouchEvent(event)) {
+      targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.removeEventListener('touchend', onDragEnd);
+      targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.removeEventListener('touchmove', onDrag);
+    }
+  }, [onDrag, targetDocument]);
+  const getOnMouseDown = columnId => event => {
     // Keep the width locally so that we decouple the calculation of the next with from rendering.
     // This makes the whole experience much faster and more precise
     currentWidth.current = columnResizeState.getColumnWidth(columnId);
-    mouseX.current = mouseDownEvent.clientX;
+    mouseX.current = getEventClientCoords(event).clientX;
     colId.current = columnId;
-    targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.addEventListener('mouseup', onMouseUp);
-    targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.addEventListener('mousemove', onMouseMove);
+    if (isMouseEvent(event)) {
+      // ignore other buttons than primary mouse button
+      if (event.target !== event.currentTarget || event.button !== 0) {
+        return;
+      }
+      targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.addEventListener('mouseup', onDragEnd);
+      targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.addEventListener('mousemove', onDrag);
+    }
+    if (isTouchEvent(event)) {
+      targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.addEventListener('touchend', onDragEnd);
+      targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.addEventListener('touchmove', onDrag);
+    }
   };
   return {
     getOnMouseDown: columnId => getOnMouseDown(columnId)

package/lib/hooks/useTableColumnResizeMouseHandler.js.map

@@ -1 +1 @@
-{"version":3,"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAE9B,SAASC,kBAAkB,IAAIC,SAAS,QAAQ,iCAAiC;AAEjF,OAAM,SAAUC,gCAAgC,CAACC,iBAAoC;EACnF,MAAMC,MAAM,GAAGL,KAAK,CAACM,MAAM,CAAC,CAAC,CAAC;EAC9B,MAAMC,YAAY,GAAGP,KAAK,CAACM,MAAM,CAAC,CAAC,CAAC;EACpC,MAAME,KAAK,GAAGR,KAAK,CAACM,MAAM,CAA4BG,SAAS,CAAC;EAEhE,MAAM;IAAEC;EAAc,CAAE,GAAGR,SAAS,EAAE;EACtC,MAAMS,SAAS,GAAGD,cAAc,aAAdA,cAAc,uBAAdA,cAAc,CAAEE,WAAW;EAE7C,MAAMC,eAAe,GAAGb,KAAK,CAACc,WAAW,CACtCC,CAAa,IAAI;IAChB,MAAMC,EAAE,GAAGD,CAAC,CAACE,OAAO,GAAGZ,MAAM,CAACa,OAAO;IAErC;IACAX,YAAY,CAACW,OAAO,IAAIF,EAAE;IAC1BR,KAAK,CAACU,OAAO,IAAId,iBAAiB,CAACe,cAAc,CAACJ,CAAC,EAAE;MAAEK,QAAQ,EAAEZ,KAAK,CAACU,OAAO;MAAEG,KAAK,EAAEd,YAAY,CAACW;IAAO,CAAE,CAAC;IAC9Gb,MAAM,CAACa,OAAO,GAAGH,CAAC,CAACE,OAAO;EAC5B,CAAC,EACD,CAACb,iBAAiB,CAAC,CACpB;EAED,MAAMkB,WAAW,GAAGtB,KAAK,CAACc,WAAW,CAClCC,CAAa,IAAI;IAChB;IACA,IAAI,QAAOJ,SAAS,aAATA,SAAS,uBAATA,SAAS,CAAEY,qBAAqB,MAAK,UAAU,EAAE;MAC1DA,qBAAqB,CAAC,MAAMV,eAAe,CAACE,CAAC,CAAC,CAAC;KAChD,MAAM;MACLF,eAAe,CAACE,CAAC,CAAC;;EAEtB,CAAC,EACD,CAACJ,SAAS,aAATA,SAAS,uBAATA,SAAS,CAAEY,qBAAqB,EAAEV,eAAe,CAAC,CACpD;EAED,MAAMW,SAAS,GAAGxB,KAAK,CAACc,WAAW,CAChCC,CAAa,IAAI;IAChBL,cAAc,aAAdA,cAAc,uBAAdA,cAAc,CAAEe,mBAAmB,CAAC,SAAS,EAAED,SAAS,CAAC;IACzDd,cAAc,aAAdA,cAAc,uBAAdA,cAAc,CAAEe,mBAAmB,CAAC,WAAW,EAAEH,WAAW,CAAC;EAC/D,CAAC,EACD,CAACA,WAAW,EAAEZ,cAAc,CAAC,CAC9B;EAED,MAAMgB,cAAc,GAAIN,QAAuB,IAAMO,cAA6C,IAAI;IACpG;IACA,IAAIA,cAAc,CAACC,MAAM,KAAKD,cAAc,CAACE,aAAa,IAAIF,cAAc,CAACG,MAAM,KAAK,CAAC,EAAE;MACzF;;IAEF;IACA;IACAvB,YAAY,CAACW,OAAO,GAAGd,iBAAiB,CAAC2B,cAAc,CAACX,QAAQ,CAAC;IACjEf,MAAM,CAACa,OAAO,GAAGS,cAAc,CAACV,OAAO;IACvCT,KAAK,CAACU,OAAO,GAAGE,QAAQ;IAExBV,cAAc,aAAdA,cAAc,uBAAdA,cAAc,CAAEsB,gBAAgB,CAAC,SAAS,EAAER,SAAS,CAAC;IACtDd,cAAc,aAAdA,cAAc,uBAAdA,cAAc,CAAEsB,gBAAgB,CAAC,WAAW,EAAEV,WAAW,CAAC;EAC5D,CAAC;EAED,OAAO;IACLI,cAAc,EAAGN,QAAuB,IAAKM,cAAc,CAACN,QAAQ;GACrE;AACH","names":["React","useFluent_unstable","useFluent","useTableColumnResizeMouseHandler","columnResizeState","mouseX","useRef","currentWidth","colId","undefined","targetDocument","globalWin","defaultView","handleMouseMove","useCallback","e","dx","clientX","current","setColumnWidth","columnId","width","onMouseMove","requestAnimationFrame","onMouseUp","removeEventListener","getOnMouseDown","mouseDownEvent","target","currentTarget","button","getColumnWidth","addEventListener"],"sourceRoot":"../src/","sources":["packages/react-components/react-table/src/hooks/useTableColumnResizeMouseHandler.ts"],"sourcesContent":["import * as React from 'react';\nimport { TableColumnId, ColumnResizeState } from './types';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\n\nexport function useTableColumnResizeMouseHandler(columnResizeState: ColumnResizeState) {\n  const mouseX = React.useRef(0);\n  const currentWidth = React.useRef(0);\n  const colId = React.useRef<TableColumnId | undefined>(undefined);\n\n  const { targetDocument } = useFluent();\n  const globalWin = targetDocument?.defaultView;\n\n  const handleMouseMove = React.useCallback(\n    (e: MouseEvent) => {\n      const dx = e.clientX - mouseX.current;\n\n      // Update the local width for the column and set it\n      currentWidth.current += dx;\n      colId.current && columnResizeState.setColumnWidth(e, { columnId: colId.current, width: currentWidth.current });\n      mouseX.current = e.clientX;\n    },\n    [columnResizeState],\n  );\n\n  const onMouseMove = React.useCallback(\n    (e: MouseEvent) => {\n      // Using requestAnimationFrame here drastically improves resizing experience on slower CPUs\n      if (typeof globalWin?.requestAnimationFrame === 'function') {\n        requestAnimationFrame(() => handleMouseMove(e));\n      } else {\n        handleMouseMove(e);\n      }\n    },\n    [globalWin?.requestAnimationFrame, handleMouseMove],\n  );\n\n  const onMouseUp = React.useCallback(\n    (e: MouseEvent) => {\n      targetDocument?.removeEventListener('mouseup', onMouseUp);\n      targetDocument?.removeEventListener('mousemove', onMouseMove);\n    },\n    [onMouseMove, targetDocument],\n  );\n\n  const getOnMouseDown = (columnId: TableColumnId) => (mouseDownEvent: React.MouseEvent<HTMLElement>) => {\n    // ignore other buttons than primary mouse button\n    if (mouseDownEvent.target !== mouseDownEvent.currentTarget || mouseDownEvent.button !== 0) {\n      return;\n    }\n    // Keep the width locally so that we decouple the calculation of the next with from rendering.\n    // This makes the whole experience much faster and more precise\n    currentWidth.current = columnResizeState.getColumnWidth(columnId);\n    mouseX.current = mouseDownEvent.clientX;\n    colId.current = columnId;\n\n    targetDocument?.addEventListener('mouseup', onMouseUp);\n    targetDocument?.addEventListener('mousemove', onMouseMove);\n  };\n\n  return {\n    getOnMouseDown: (columnId: TableColumnId) => getOnMouseDown(columnId),\n  };\n}\n"]}
+{"version":3,"mappings":"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","names":["React","useFluent_unstable","useFluent","getEventClientCoords","isMouseEvent","isTouchEvent","useTableColumnResizeMouseHandler","columnResizeState","mouseX","useRef","currentWidth","colId","undefined","targetDocument","globalWin","defaultView","recalculatePosition","useCallback","e","clientX","dx","current","setColumnWidth","columnId","width","onDrag","requestAnimationFrame","onDragEnd","event","removeEventListener","getOnMouseDown","getColumnWidth","target","currentTarget","button","addEventListener"],"sourceRoot":"../src/","sources":["packages/react-components/react-table/src/hooks/useTableColumnResizeMouseHandler.ts"],"sourcesContent":["import * as React from 'react';\nimport { TableColumnId, ColumnResizeState } from './types';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport {\n  NativeTouchOrMouseEvent,\n  ReactTouchOrMouseEvent,\n  getEventClientCoords,\n  isMouseEvent,\n  isTouchEvent,\n} from '@fluentui/react-utilities';\n\nexport function useTableColumnResizeMouseHandler(columnResizeState: ColumnResizeState) {\n  const mouseX = React.useRef(0);\n  const currentWidth = React.useRef(0);\n  const colId = React.useRef<TableColumnId | undefined>(undefined);\n\n  const { targetDocument } = useFluent();\n  const globalWin = targetDocument?.defaultView;\n\n  const recalculatePosition = React.useCallback(\n    (e: NativeTouchOrMouseEvent) => {\n      const { clientX } = getEventClientCoords(e);\n      const dx = clientX - mouseX.current;\n\n      // Update the local width for the column and set it\n      currentWidth.current += dx;\n      colId.current && columnResizeState.setColumnWidth(e, { columnId: colId.current, width: currentWidth.current });\n      mouseX.current = clientX;\n    },\n    [columnResizeState],\n  );\n\n  const onDrag = React.useCallback(\n    (e: NativeTouchOrMouseEvent) => {\n      // Using requestAnimationFrame here drastically improves resizing experience on slower CPUs\n      if (typeof globalWin?.requestAnimationFrame === 'function') {\n        requestAnimationFrame(() => recalculatePosition(e));\n      } else {\n        recalculatePosition(e);\n      }\n    },\n    [globalWin?.requestAnimationFrame, recalculatePosition],\n  );\n\n  const onDragEnd = React.useCallback(\n    (event: NativeTouchOrMouseEvent) => {\n      if (isMouseEvent(event)) {\n        targetDocument?.removeEventListener('mouseup', onDragEnd);\n        targetDocument?.removeEventListener('mousemove', onDrag);\n      }\n      if (isTouchEvent(event)) {\n        targetDocument?.removeEventListener('touchend', onDragEnd);\n        targetDocument?.removeEventListener('touchmove', onDrag);\n      }\n    },\n    [onDrag, targetDocument],\n  );\n\n  const getOnMouseDown = (columnId: TableColumnId) => (event: ReactTouchOrMouseEvent) => {\n    // Keep the width locally so that we decouple the calculation of the next with from rendering.\n    // This makes the whole experience much faster and more precise\n    currentWidth.current = columnResizeState.getColumnWidth(columnId);\n    mouseX.current = getEventClientCoords(event).clientX;\n    colId.current = columnId;\n\n    if (isMouseEvent(event)) {\n      // ignore other buttons than primary mouse button\n      if (event.target !== event.currentTarget || event.button !== 0) {\n        return;\n      }\n      targetDocument?.addEventListener('mouseup', onDragEnd);\n      targetDocument?.addEventListener('mousemove', onDrag);\n    }\n\n    if (isTouchEvent(event)) {\n      targetDocument?.addEventListener('touchend', onDragEnd);\n      targetDocument?.addEventListener('touchmove', onDrag);\n    }\n  };\n\n  return {\n    getOnMouseDown: (columnId: TableColumnId) => getOnMouseDown(columnId),\n  };\n}\n"]}

package/lib/hooks/useTableColumnResizeState.js.map

@@ -1 +1 @@
-{"version":3,"mappings":"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","names":["useEventCallback","useIsomorphicLayoutEffect","React","columnDefinitionsToState","adjustColumnWidthsToFitContainer","getColumnById","setColumnProperty","getColumnWidth","createReducer","state","action","type","containerWidth","columnWidthState","newS","columns","columnSizingOptions","newState","columnId","width","column","newColumnWidthState","useTableColumnResizeState","params","onColumnResize","reducer","useMemo","dispatch","useReducer","undefined","setColumnWidth","event","data","col","Math","max","minWidth","colId","getColumns"],"sourceRoot":"../src/","sources":["packages/react-components/react-table/src/hooks/useTableColumnResizeState.ts"],"sourcesContent":["import { useEventCallback, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport * as React from 'react';\nimport {\n  TableColumnDefinition,\n  TableColumnId,\n  ColumnResizeState,\n  ColumnWidthState,\n  UseTableColumnSizingParams,\n  TableColumnSizingOptions,\n} from './types';\nimport {\n  columnDefinitionsToState,\n  adjustColumnWidthsToFitContainer,\n  getColumnById,\n  setColumnProperty,\n  getColumnWidth,\n} from '../utils/columnResizeUtils';\n\ntype ComponentState<T> = {\n  columns: TableColumnDefinition<T>[];\n  containerWidth: number;\n  columnWidthState: ColumnWidthState[];\n  columnSizingOptions: TableColumnSizingOptions | undefined;\n};\n\ntype ColumnResizeStateAction<T> =\n  | {\n      type: 'CONTAINER_WIDTH_UPDATED';\n      containerWidth: number;\n    }\n  | {\n      type: 'COLUMNS_UPDATED';\n      columns: TableColumnDefinition<T>[];\n    }\n  | {\n      type: 'COLUMN_SIZING_OPTIONS_UPDATED';\n      columnSizingOptions: TableColumnSizingOptions | undefined;\n    }\n  | {\n      type: 'SET_COLUMN_WIDTH';\n      columnId: TableColumnId;\n      width: number;\n    };\n\nconst createReducer = <T>() => (state: ComponentState<T>, action: ColumnResizeStateAction<T>): ComponentState<T> => {\n  switch (action.type) {\n    case 'CONTAINER_WIDTH_UPDATED':\n      return {\n        ...state,\n        containerWidth: action.containerWidth,\n        columnWidthState: adjustColumnWidthsToFitContainer(state.columnWidthState, action.containerWidth),\n      };\n\n    case 'COLUMNS_UPDATED':\n      const newS = columnDefinitionsToState(action.columns, state.columnWidthState, state.columnSizingOptions);\n      return {\n        ...state,\n        columns: action.columns,\n        columnWidthState: adjustColumnWidthsToFitContainer(newS, state.containerWidth),\n      };\n\n    case 'COLUMN_SIZING_OPTIONS_UPDATED':\n      const newState = columnDefinitionsToState(state.columns, state.columnWidthState, action.columnSizingOptions);\n      return {\n        ...state,\n        columnSizingOptions: action.columnSizingOptions,\n        columnWidthState: adjustColumnWidthsToFitContainer(newState, state.containerWidth),\n      };\n\n    case 'SET_COLUMN_WIDTH':\n      const { columnId, width } = action;\n      const { containerWidth } = state;\n\n      const column = getColumnById(state.columnWidthState, columnId);\n      let newColumnWidthState = [...state.columnWidthState];\n\n      if (!column) {\n        return state;\n      }\n\n      // Adjust the column width and measure the new total width\n      newColumnWidthState = setColumnProperty(newColumnWidthState, columnId, 'width', width);\n      // Set this width as idealWidth, because its a deliberate change, not a recalculation because of container\n      newColumnWidthState = setColumnProperty(newColumnWidthState, columnId, 'idealWidth', width);\n      // Adjust the widths to the container size\n      newColumnWidthState = adjustColumnWidthsToFitContainer(newColumnWidthState, containerWidth);\n\n      return { ...state, columnWidthState: newColumnWidthState };\n  }\n};\n\nexport function useTableColumnResizeState<T>(\n  columns: TableColumnDefinition<T>[],\n  containerWidth: number,\n  params: UseTableColumnSizingParams = {},\n): ColumnResizeState {\n  const { onColumnResize, columnSizingOptions } = params;\n\n  const reducer = React.useMemo(() => createReducer<T>(), []);\n\n  const [state, dispatch] = React.useReducer(reducer, {\n    columns,\n    containerWidth: 0,\n    columnWidthState: columnDefinitionsToState(columns, undefined, columnSizingOptions),\n    columnSizingOptions,\n  });\n\n  useIsomorphicLayoutEffect(() => {\n    dispatch({ type: 'CONTAINER_WIDTH_UPDATED', containerWidth });\n  }, [containerWidth]);\n\n  useIsomorphicLayoutEffect(() => {\n    dispatch({ type: 'COLUMNS_UPDATED', columns });\n  }, [columns]);\n\n  useIsomorphicLayoutEffect(() => {\n    dispatch({ type: 'COLUMN_SIZING_OPTIONS_UPDATED', columnSizingOptions });\n  }, [columnSizingOptions]);\n\n  const setColumnWidth = useEventCallback(\n    (event: MouseEvent | undefined, data: { columnId: TableColumnId; width: number }) => {\n      let { width } = data;\n      const { columnId } = data;\n      const col = getColumnById(state.columnWidthState, columnId);\n      if (!col) {\n        return;\n      }\n\n      width = Math.max(col.minWidth || 0, width);\n\n      if (onColumnResize) {\n        onColumnResize(event, { columnId, width });\n      }\n      dispatch({ type: 'SET_COLUMN_WIDTH', columnId, width });\n    },\n  );\n\n  return {\n    getColumnById: (colId: TableColumnId) => getColumnById(state.columnWidthState, colId),\n    getColumns: () => state.columnWidthState,\n    getColumnWidth: (colId: TableColumnId) => getColumnWidth(state.columnWidthState, colId),\n    setColumnWidth,\n  };\n}\n"]}
+{"version":3,"mappings":"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","names":["useEventCallback","useIsomorphicLayoutEffect","React","columnDefinitionsToState","adjustColumnWidthsToFitContainer","getColumnById","setColumnProperty","getColumnWidth","createReducer","state","action","type","containerWidth","columnWidthState","newS","columns","columnSizingOptions","newState","columnId","width","column","newColumnWidthState","useTableColumnResizeState","params","onColumnResize","reducer","useMemo","dispatch","useReducer","undefined","setColumnWidth","event","data","col","Math","max","minWidth","colId","getColumns"],"sourceRoot":"../src/","sources":["packages/react-components/react-table/src/hooks/useTableColumnResizeState.ts"],"sourcesContent":["import { useEventCallback, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport * as React from 'react';\nimport {\n  TableColumnDefinition,\n  TableColumnId,\n  ColumnResizeState,\n  ColumnWidthState,\n  UseTableColumnSizingParams,\n  TableColumnSizingOptions,\n} from './types';\nimport {\n  columnDefinitionsToState,\n  adjustColumnWidthsToFitContainer,\n  getColumnById,\n  setColumnProperty,\n  getColumnWidth,\n} from '../utils/columnResizeUtils';\n\ntype ComponentState<T> = {\n  columns: TableColumnDefinition<T>[];\n  containerWidth: number;\n  columnWidthState: ColumnWidthState[];\n  columnSizingOptions: TableColumnSizingOptions | undefined;\n};\n\ntype ColumnResizeStateAction<T> =\n  | {\n      type: 'CONTAINER_WIDTH_UPDATED';\n      containerWidth: number;\n    }\n  | {\n      type: 'COLUMNS_UPDATED';\n      columns: TableColumnDefinition<T>[];\n    }\n  | {\n      type: 'COLUMN_SIZING_OPTIONS_UPDATED';\n      columnSizingOptions: TableColumnSizingOptions | undefined;\n    }\n  | {\n      type: 'SET_COLUMN_WIDTH';\n      columnId: TableColumnId;\n      width: number;\n    };\n\nconst createReducer = <T>() => (state: ComponentState<T>, action: ColumnResizeStateAction<T>): ComponentState<T> => {\n  switch (action.type) {\n    case 'CONTAINER_WIDTH_UPDATED':\n      return {\n        ...state,\n        containerWidth: action.containerWidth,\n        columnWidthState: adjustColumnWidthsToFitContainer(state.columnWidthState, action.containerWidth),\n      };\n\n    case 'COLUMNS_UPDATED':\n      const newS = columnDefinitionsToState(action.columns, state.columnWidthState, state.columnSizingOptions);\n      return {\n        ...state,\n        columns: action.columns,\n        columnWidthState: adjustColumnWidthsToFitContainer(newS, state.containerWidth),\n      };\n\n    case 'COLUMN_SIZING_OPTIONS_UPDATED':\n      const newState = columnDefinitionsToState(state.columns, state.columnWidthState, action.columnSizingOptions);\n      return {\n        ...state,\n        columnSizingOptions: action.columnSizingOptions,\n        columnWidthState: adjustColumnWidthsToFitContainer(newState, state.containerWidth),\n      };\n\n    case 'SET_COLUMN_WIDTH':\n      const { columnId, width } = action;\n      const { containerWidth } = state;\n\n      const column = getColumnById(state.columnWidthState, columnId);\n      let newColumnWidthState = [...state.columnWidthState];\n\n      if (!column) {\n        return state;\n      }\n\n      // Adjust the column width and measure the new total width\n      newColumnWidthState = setColumnProperty(newColumnWidthState, columnId, 'width', width);\n      // Set this width as idealWidth, because its a deliberate change, not a recalculation because of container\n      newColumnWidthState = setColumnProperty(newColumnWidthState, columnId, 'idealWidth', width);\n      // Adjust the widths to the container size\n      newColumnWidthState = adjustColumnWidthsToFitContainer(newColumnWidthState, containerWidth);\n\n      return { ...state, columnWidthState: newColumnWidthState };\n  }\n};\n\nexport function useTableColumnResizeState<T>(\n  columns: TableColumnDefinition<T>[],\n  containerWidth: number,\n  params: UseTableColumnSizingParams = {},\n): ColumnResizeState {\n  const { onColumnResize, columnSizingOptions } = params;\n\n  const reducer = React.useMemo(() => createReducer<T>(), []);\n\n  const [state, dispatch] = React.useReducer(reducer, {\n    columns,\n    containerWidth: 0,\n    columnWidthState: columnDefinitionsToState(columns, undefined, columnSizingOptions),\n    columnSizingOptions,\n  });\n\n  useIsomorphicLayoutEffect(() => {\n    dispatch({ type: 'CONTAINER_WIDTH_UPDATED', containerWidth });\n  }, [containerWidth]);\n\n  useIsomorphicLayoutEffect(() => {\n    dispatch({ type: 'COLUMNS_UPDATED', columns });\n  }, [columns]);\n\n  useIsomorphicLayoutEffect(() => {\n    dispatch({ type: 'COLUMN_SIZING_OPTIONS_UPDATED', columnSizingOptions });\n  }, [columnSizingOptions]);\n\n  const setColumnWidth = useEventCallback(\n    (event: MouseEvent | TouchEvent | undefined, data: { columnId: TableColumnId; width: number }) => {\n      let { width } = data;\n      const { columnId } = data;\n      const col = getColumnById(state.columnWidthState, columnId);\n      if (!col) {\n        return;\n      }\n\n      width = Math.max(col.minWidth || 0, width);\n\n      if (onColumnResize) {\n        onColumnResize(event, { columnId, width });\n      }\n      dispatch({ type: 'SET_COLUMN_WIDTH', columnId, width });\n    },\n  );\n\n  return {\n    getColumnById: (colId: TableColumnId) => getColumnById(state.columnWidthState, colId),\n    getColumns: () => state.columnWidthState,\n    getColumnWidth: (colId: TableColumnId) => getColumnWidth(state.columnWidthState, colId),\n    setColumnWidth,\n  };\n}\n"]}

package/lib/hooks/useTableColumnSizing.js

@@ -58,7 +58,8 @@ function useTableColumnSizingState(tableState, params) {
       getTableHeaderCellProps: columnId => {
         const col = columnResizeState.getColumnById(columnId);
         const aside = /*#__PURE__*/React.createElement(TableResizeHandle, {
-          onMouseDown: mouseHandler.getOnMouseDown(columnId)
+          onMouseDown: mouseHandler.getOnMouseDown(columnId),
+          onTouchStart: mouseHandler.getOnMouseDown(columnId)
         });
         return col ? {
           style: getColumnStyles(col),

package/lib/hooks/useTableColumnSizing.js.map

@@ -1 +1 @@
-{"version":3,"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAQ9B,SAASC,yBAAyB,QAAQ,6BAA6B;AACvE,SAASC,gCAAgC,QAAQ,oCAAoC;AACrF,SAASC,iBAAiB,QAAQ,qBAAqB;AACvD,SAASC,iBAAiB,QAAQ,sBAAsB;AAExD,OAAO,MAAMC,wBAAwB,GAA2B;EAC9DC,eAAe,EAAE,MAAM,EAAE;EACzBC,cAAc,EAAE,MAAM,MAAM,IAAI;EAChCC,cAAc,EAAE,MAAM,IAAI;EAC1BC,uBAAuB,EAAE,OAAO;IAAEC,KAAK,EAAE,EAAE;IAAEC,QAAQ,EAAE;EAAE,CAAE,CAAC;EAC5DC,iBAAiB,EAAE,OAAO;IAAEF,KAAK,EAAE,EAAE;IAAEC,QAAQ,EAAE;EAAE,CAAE;CACtD;AAED,OAAM,SAAUE,6BAA6B,CAAQC,MAAmC;EACtF;EACA;EACA,OAAQC,UAAqC,IAAKC,yBAAyB,CAACD,UAAU,EAAED,MAAM,CAAC;AACjG;AAEA,SAASG,eAAe,CAACC,MAAwB;EAC/C,MAAMC,KAAK,GAAGD,MAAM,CAACC,KAAK;EAE1B,OAAO;IACL;IACAA,KAAK;IACL;IACAC,QAAQ,EAAED,KAAK;IACfE,QAAQ,EAAEF;GACX;AACH;AAEA,SAASH,yBAAyB,CAChCD,UAAqC,EACrCD,MAAmC;EAEnC,MAAM;IAAEQ;EAAO,CAAE,GAAGP,UAAU;EAE9B;EACA,MAAM;IAAEI,KAAK;IAAEI;EAAiB,CAAE,GAAGpB,iBAAiB,EAAE;EACxD;EACA,MAAMqB,iBAAiB,GAAGvB,yBAAyB,CAACqB,OAAO,EAAEH,KAAK,IAAI,OAAM,aAANL,MAAM,uBAANA,MAAM,CAAEW,oBAAoB,KAAI,CAAC,CAAC,EAAEX,MAAM,CAAC;EACjH;EACA,MAAMY,YAAY,GAAGxB,gCAAgC,CAACsB,iBAAiB,CAAC;EAExE,OAAO;IACL,GAAGT,UAAU;IACbY,QAAQ,EAAEJ,iBAAiB;IAC3B;IACAK,qBAAqB,EAAE;MACrBrB,cAAc,EAAEmB,YAAY,CAACnB,cAAc;MAC3CC,cAAc,EAAE,CAACG,QAAuB,EAAEkB,CAAS,KACjDL,iBAAiB,CAAChB,cAAc,CAACsB,SAAS,EAAE;QAAEnB,QAAQ;QAAEQ,KAAK,EAAEU;MAAC,CAAE,CAAC;MACrEvB,eAAe,EAAEkB,iBAAiB,CAACO,UAAU;MAC7CtB,uBAAuB,EAAGE,QAAuB,IAAI;QACnD,MAAMqB,GAAG,GAAGR,iBAAiB,CAACS,aAAa,CAACtB,QAAQ,CAAC;QACrD,MAAMuB,KAAK,gBAAGlC,oBAACI,iBAAiB;UAAC+B,WAAW,EAAET,YAAY,CAACnB,cAAc,CAACI,QAAQ;QAAC,EAAI;QACvF,OAAOqB,GAAG,GAAG;UAAEtB,KAAK,EAAEO,eAAe,CAACe,GAAG,CAAC;UAAEE;QAAK,CAAE,GAAG,EAAE;MAC1D,CAAC;MACDtB,iBAAiB,EAAGD,QAAuB,IAAI;QAC7C,MAAMqB,GAAG,GAAGR,iBAAiB,CAACS,aAAa,CAACtB,QAAQ,CAAC;QACrD,OAAOqB,GAAG,GAAG;UAAEtB,KAAK,EAAEO,eAAe,CAACe,GAAG;QAAC,CAAE,GAAG,EAAE;MACnD;;GAEH;AACH","names":["React","useTableColumnResizeState","useTableColumnResizeMouseHandler","useMeasureElement","TableResizeHandle","defaultColumnSizingState","getColumnWidths","getOnMouseDown","setColumnWidth","getTableHeaderCellProps","style","columnId","getTableCellProps","useTableColumnSizing_unstable","params","tableState","useTableColumnSizingState","getColumnStyles","column","width","minWidth","maxWidth","columns","measureElementRef","columnResizeState","containerWidthOffset","mouseHandler","tableRef","columnSizing_unstable","w","undefined","getColumns","col","getColumnById","aside","onMouseDown"],"sourceRoot":"../src/","sources":["packages/react-components/react-table/src/hooks/useTableColumnSizing.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  TableColumnId,\n  ColumnWidthState,\n  TableColumnSizingState,\n  TableFeaturesState,\n  UseTableColumnSizingParams,\n} from './types';\nimport { useTableColumnResizeState } from './useTableColumnResizeState';\nimport { useTableColumnResizeMouseHandler } from './useTableColumnResizeMouseHandler';\nimport { useMeasureElement } from './useMeasureElement';\nimport { TableResizeHandle } from '../TableResizeHandle';\n\nexport const defaultColumnSizingState: TableColumnSizingState = {\n  getColumnWidths: () => [],\n  getOnMouseDown: () => () => null,\n  setColumnWidth: () => null,\n  getTableHeaderCellProps: () => ({ style: {}, columnId: '' }),\n  getTableCellProps: () => ({ style: {}, columnId: '' }),\n};\n\nexport function useTableColumnSizing_unstable<TItem>(params?: UseTableColumnSizingParams) {\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>) => useTableColumnSizingState(tableState, params);\n}\n\nfunction getColumnStyles(column: ColumnWidthState): React.CSSProperties {\n  const width = column.width;\n\n  return {\n    // native styles\n    width,\n    // non-native element styles (flex layout)\n    minWidth: width,\n    maxWidth: width,\n  };\n}\n\nfunction useTableColumnSizingState<TItem>(\n  tableState: TableFeaturesState<TItem>,\n  params?: UseTableColumnSizingParams,\n): TableFeaturesState<TItem> {\n  const { columns } = tableState;\n\n  // Gets the container width\n  const { width, measureElementRef } = useMeasureElement();\n  // Creates the state based on columns and available containerWidth\n  const columnResizeState = useTableColumnResizeState(columns, width + (params?.containerWidthOffset || 0), params);\n  // Creates the mouse handler and attaches the state to it\n  const mouseHandler = useTableColumnResizeMouseHandler(columnResizeState);\n\n  return {\n    ...tableState,\n    tableRef: measureElementRef,\n    // eslint-disable-next-line @typescript-eslint/naming-convention\n    columnSizing_unstable: {\n      getOnMouseDown: mouseHandler.getOnMouseDown,\n      setColumnWidth: (columnId: TableColumnId, w: number) =>\n        columnResizeState.setColumnWidth(undefined, { columnId, width: w }),\n      getColumnWidths: columnResizeState.getColumns,\n      getTableHeaderCellProps: (columnId: TableColumnId) => {\n        const col = columnResizeState.getColumnById(columnId);\n        const aside = <TableResizeHandle onMouseDown={mouseHandler.getOnMouseDown(columnId)} />;\n        return col ? { style: getColumnStyles(col), aside } : {};\n      },\n      getTableCellProps: (columnId: TableColumnId) => {\n        const col = columnResizeState.getColumnById(columnId);\n        return col ? { style: getColumnStyles(col) } : {};\n      },\n    },\n  };\n}\n"]}
+{"version":3,"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAQ9B,SAASC,yBAAyB,QAAQ,6BAA6B;AACvE,SAASC,gCAAgC,QAAQ,oCAAoC;AACrF,SAASC,iBAAiB,QAAQ,qBAAqB;AACvD,SAASC,iBAAiB,QAAQ,sBAAsB;AAExD,OAAO,MAAMC,wBAAwB,GAA2B;EAC9DC,eAAe,EAAE,MAAM,EAAE;EACzBC,cAAc,EAAE,MAAM,MAAM,IAAI;EAChCC,cAAc,EAAE,MAAM,IAAI;EAC1BC,uBAAuB,EAAE,OAAO;IAAEC,KAAK,EAAE,EAAE;IAAEC,QAAQ,EAAE;EAAE,CAAE,CAAC;EAC5DC,iBAAiB,EAAE,OAAO;IAAEF,KAAK,EAAE,EAAE;IAAEC,QAAQ,EAAE;EAAE,CAAE;CACtD;AAED,OAAM,SAAUE,6BAA6B,CAAQC,MAAmC;EACtF;EACA;EACA,OAAQC,UAAqC,IAAKC,yBAAyB,CAACD,UAAU,EAAED,MAAM,CAAC;AACjG;AAEA,SAASG,eAAe,CAACC,MAAwB;EAC/C,MAAMC,KAAK,GAAGD,MAAM,CAACC,KAAK;EAE1B,OAAO;IACL;IACAA,KAAK;IACL;IACAC,QAAQ,EAAED,KAAK;IACfE,QAAQ,EAAEF;GACX;AACH;AAEA,SAASH,yBAAyB,CAChCD,UAAqC,EACrCD,MAAmC;EAEnC,MAAM;IAAEQ;EAAO,CAAE,GAAGP,UAAU;EAE9B;EACA,MAAM;IAAEI,KAAK;IAAEI;EAAiB,CAAE,GAAGpB,iBAAiB,EAAE;EACxD;EACA,MAAMqB,iBAAiB,GAAGvB,yBAAyB,CAACqB,OAAO,EAAEH,KAAK,IAAI,OAAM,aAANL,MAAM,uBAANA,MAAM,CAAEW,oBAAoB,KAAI,CAAC,CAAC,EAAEX,MAAM,CAAC;EACjH;EACA,MAAMY,YAAY,GAAGxB,gCAAgC,CAACsB,iBAAiB,CAAC;EAExE,OAAO;IACL,GAAGT,UAAU;IACbY,QAAQ,EAAEJ,iBAAiB;IAC3B;IACAK,qBAAqB,EAAE;MACrBrB,cAAc,EAAEmB,YAAY,CAACnB,cAAc;MAC3CC,cAAc,EAAE,CAACG,QAAuB,EAAEkB,CAAS,KACjDL,iBAAiB,CAAChB,cAAc,CAACsB,SAAS,EAAE;QAAEnB,QAAQ;QAAEQ,KAAK,EAAEU;MAAC,CAAE,CAAC;MACrEvB,eAAe,EAAEkB,iBAAiB,CAACO,UAAU;MAC7CtB,uBAAuB,EAAGE,QAAuB,IAAI;QACnD,MAAMqB,GAAG,GAAGR,iBAAiB,CAACS,aAAa,CAACtB,QAAQ,CAAC;QACrD,MAAMuB,KAAK,gBACTlC,oBAACI,iBAAiB;UAChB+B,WAAW,EAAET,YAAY,CAACnB,cAAc,CAACI,QAAQ,CAAC;UAClDyB,YAAY,EAAEV,YAAY,CAACnB,cAAc,CAACI,QAAQ;QAAC,EAEtD;QACD,OAAOqB,GAAG,GAAG;UAAEtB,KAAK,EAAEO,eAAe,CAACe,GAAG,CAAC;UAAEE;QAAK,CAAE,GAAG,EAAE;MAC1D,CAAC;MACDtB,iBAAiB,EAAGD,QAAuB,IAAI;QAC7C,MAAMqB,GAAG,GAAGR,iBAAiB,CAACS,aAAa,CAACtB,QAAQ,CAAC;QACrD,OAAOqB,GAAG,GAAG;UAAEtB,KAAK,EAAEO,eAAe,CAACe,GAAG;QAAC,CAAE,GAAG,EAAE;MACnD;;GAEH;AACH","names":["React","useTableColumnResizeState","useTableColumnResizeMouseHandler","useMeasureElement","TableResizeHandle","defaultColumnSizingState","getColumnWidths","getOnMouseDown","setColumnWidth","getTableHeaderCellProps","style","columnId","getTableCellProps","useTableColumnSizing_unstable","params","tableState","useTableColumnSizingState","getColumnStyles","column","width","minWidth","maxWidth","columns","measureElementRef","columnResizeState","containerWidthOffset","mouseHandler","tableRef","columnSizing_unstable","w","undefined","getColumns","col","getColumnById","aside","onMouseDown","onTouchStart"],"sourceRoot":"../src/","sources":["packages/react-components/react-table/src/hooks/useTableColumnSizing.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  TableColumnId,\n  ColumnWidthState,\n  TableColumnSizingState,\n  TableFeaturesState,\n  UseTableColumnSizingParams,\n} from './types';\nimport { useTableColumnResizeState } from './useTableColumnResizeState';\nimport { useTableColumnResizeMouseHandler } from './useTableColumnResizeMouseHandler';\nimport { useMeasureElement } from './useMeasureElement';\nimport { TableResizeHandle } from '../TableResizeHandle';\n\nexport const defaultColumnSizingState: TableColumnSizingState = {\n  getColumnWidths: () => [],\n  getOnMouseDown: () => () => null,\n  setColumnWidth: () => null,\n  getTableHeaderCellProps: () => ({ style: {}, columnId: '' }),\n  getTableCellProps: () => ({ style: {}, columnId: '' }),\n};\n\nexport function useTableColumnSizing_unstable<TItem>(params?: UseTableColumnSizingParams) {\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>) => useTableColumnSizingState(tableState, params);\n}\n\nfunction getColumnStyles(column: ColumnWidthState): React.CSSProperties {\n  const width = column.width;\n\n  return {\n    // native styles\n    width,\n    // non-native element styles (flex layout)\n    minWidth: width,\n    maxWidth: width,\n  };\n}\n\nfunction useTableColumnSizingState<TItem>(\n  tableState: TableFeaturesState<TItem>,\n  params?: UseTableColumnSizingParams,\n): TableFeaturesState<TItem> {\n  const { columns } = tableState;\n\n  // Gets the container width\n  const { width, measureElementRef } = useMeasureElement();\n  // Creates the state based on columns and available containerWidth\n  const columnResizeState = useTableColumnResizeState(columns, width + (params?.containerWidthOffset || 0), params);\n  // Creates the mouse handler and attaches the state to it\n  const mouseHandler = useTableColumnResizeMouseHandler(columnResizeState);\n\n  return {\n    ...tableState,\n    tableRef: measureElementRef,\n    // eslint-disable-next-line @typescript-eslint/naming-convention\n    columnSizing_unstable: {\n      getOnMouseDown: mouseHandler.getOnMouseDown,\n      setColumnWidth: (columnId: TableColumnId, w: number) =>\n        columnResizeState.setColumnWidth(undefined, { columnId, width: w }),\n      getColumnWidths: columnResizeState.getColumns,\n      getTableHeaderCellProps: (columnId: TableColumnId) => {\n        const col = columnResizeState.getColumnById(columnId);\n        const aside = (\n          <TableResizeHandle\n            onMouseDown={mouseHandler.getOnMouseDown(columnId)}\n            onTouchStart={mouseHandler.getOnMouseDown(columnId)}\n          />\n        );\n        return col ? { style: getColumnStyles(col), aside } : {};\n      },\n      getTableCellProps: (columnId: TableColumnId) => {\n        const col = columnResizeState.getColumnById(columnId);\n        return col ? { style: getColumnStyles(col) } : {};\n      },\n    },\n  };\n}\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"DataGrid.types.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-table/src/components/DataGrid/DataGrid.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport type { TableContextValues, TableProps, TableSlots, TableState } from '../Table/Table.types';\nimport type {\n  SortState,\n  TableFeaturesState,\n  UseTableSortOptions,\n  SelectionMode,\n  UseTableSelectionOptions,\n  OnSelectionChangeData,\n  TableColumnSizingOptions,\n  TableColumnId,\n} from '../../hooks';\nimport { TableRowProps } from '../TableRow/TableRow.types';\n\nexport type DataGridSlots = TableSlots;\n\nexport type DataGridFocusMode = 'none' | 'cell' | 'row_unstable';\n\nexport type DataGridContextValues = TableContextValues & {\n  dataGrid: DataGridContextValue;\n};\n\n// Use any here since we can't know the user types\n// The user is responsible for narrowing the type downstream\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport type DataGridContextValue = TableFeaturesState<any> & {\n  /**\n   * How focus navigation will work in the datagrid\n   * @default cell\n   */\n  focusMode: DataGridFocusMode;\n\n  /**\n   * Lets child components know if rows selection is enabled\n   * @see selectionMode prop enables row selection on the component\n   */\n  selectableRows: boolean;\n\n  /**\n   * Enables subtle selection style\n   * @default false\n   */\n  subtleSelection: boolean;\n\n  /**\n   * Row appearance when selected\n   * @default brand\n   */\n  selectionAppearance: TableRowProps['appearance'];\n\n  /**\n   * Enables column resizing\n   */\n  resizableColumns?: boolean;\n};\n\n/**\n * DataGrid Props\n */\nexport type DataGridProps = TableProps &\n  Pick<DataGridContextValue, 'items' | 'columns' | 'getRowId'> &\n  Pick<Partial<DataGridContextValue>, 'focusMode' | 'subtleSelection' | 'selectionAppearance' | 'resizableColumns'> &\n  Pick<UseTableSortOptions, 'sortState' | 'defaultSortState'> &\n  Pick<UseTableSelectionOptions, 'defaultSelectedItems' | 'selectedItems'> & {\n    onSortChange?: (e: React.MouseEvent, sortState: SortState) => void;\n    onSelectionChange?: (e: React.MouseEvent | React.KeyboardEvent, data: OnSelectionChangeData) => void;\n    /**\n     * Enables row selection and sets the selection mode\n     * @default false\n     */\n    selectionMode?: SelectionMode;\n    /**\n     * Options for column resizing\n     */\n    columnSizingOptions?: TableColumnSizingOptions;\n    /**\n     * A callback triggered when a column is resized.\n     */\n    onColumnResize?: (event: MouseEvent | undefined, data: { columnId: TableColumnId; width: number }) => void;\n  };\n\n/**\n * State used in rendering DataGrid\n */\nexport type DataGridState = TableState & { tableState: TableFeaturesState<unknown> } & Pick<\n    DataGridContextValue,\n    'focusMode' | 'selectableRows' | 'subtleSelection' | 'selectionAppearance' | 'getRowId' | 'resizableColumns'\n  >;\n"]}
+{"version":3,"file":"DataGrid.types.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-table/src/components/DataGrid/DataGrid.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport type { TableContextValues, TableProps, TableSlots, TableState } from '../Table/Table.types';\nimport type {\n  SortState,\n  TableFeaturesState,\n  UseTableSortOptions,\n  SelectionMode,\n  UseTableSelectionOptions,\n  OnSelectionChangeData,\n  TableColumnSizingOptions,\n  TableColumnId,\n} from '../../hooks';\nimport { TableRowProps } from '../TableRow/TableRow.types';\n\nexport type DataGridSlots = TableSlots;\n\nexport type DataGridFocusMode = 'none' | 'cell' | 'row_unstable';\n\nexport type DataGridContextValues = TableContextValues & {\n  dataGrid: DataGridContextValue;\n};\n\n// Use any here since we can't know the user types\n// The user is responsible for narrowing the type downstream\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport type DataGridContextValue = TableFeaturesState<any> & {\n  /**\n   * How focus navigation will work in the datagrid\n   * @default cell\n   */\n  focusMode: DataGridFocusMode;\n\n  /**\n   * Lets child components know if rows selection is enabled\n   * @see selectionMode prop enables row selection on the component\n   */\n  selectableRows: boolean;\n\n  /**\n   * Enables subtle selection style\n   * @default false\n   */\n  subtleSelection: boolean;\n\n  /**\n   * Row appearance when selected\n   * @default brand\n   */\n  selectionAppearance: TableRowProps['appearance'];\n\n  /**\n   * Enables column resizing\n   */\n  resizableColumns?: boolean;\n};\n\n/**\n * DataGrid Props\n */\nexport type DataGridProps = TableProps &\n  Pick<DataGridContextValue, 'items' | 'columns' | 'getRowId'> &\n  Pick<Partial<DataGridContextValue>, 'focusMode' | 'subtleSelection' | 'selectionAppearance' | 'resizableColumns'> &\n  Pick<UseTableSortOptions, 'sortState' | 'defaultSortState'> &\n  Pick<UseTableSelectionOptions, 'defaultSelectedItems' | 'selectedItems'> & {\n    onSortChange?: (e: React.MouseEvent, sortState: SortState) => void;\n    onSelectionChange?: (e: React.MouseEvent | React.KeyboardEvent, data: OnSelectionChangeData) => void;\n    /**\n     * Enables row selection and sets the selection mode\n     * @default false\n     */\n    selectionMode?: SelectionMode;\n    /**\n     * Options for column resizing\n     */\n    columnSizingOptions?: TableColumnSizingOptions;\n    /**\n     * A callback triggered when a column is resized.\n     */\n    onColumnResize?: (e: TouchEvent | MouseEvent | undefined, data: { columnId: TableColumnId; width: number }) => void;\n  };\n\n/**\n * State used in rendering DataGrid\n */\nexport type DataGridState = TableState & { tableState: TableFeaturesState<unknown> } & Pick<\n    DataGridContextValue,\n    'focusMode' | 'selectableRows' | 'subtleSelection' | 'selectionAppearance' | 'getRowId' | 'resizableColumns'\n  >;\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../../../../../packages/react-components/react-table/src/hooks/types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport { SortDirection } from '../components/Table/Table.types';\nimport { TableHeaderCellProps } from '../components/TableHeaderCell/TableHeaderCell.types';\n\nexport type TableRowId = string | number;\nexport type TableColumnId = string | number;\nexport type SelectionMode = 'single' | 'multiselect';\n\nexport interface SortState {\n  sortColumn: TableColumnId | undefined;\n  sortDirection: SortDirection;\n}\n\nexport interface OnSelectionChangeData {\n  selectedItems: Set<TableRowId>;\n}\n\nexport interface CreateTableColumnOptions<TItem> extends Partial<TableColumnDefinition<TItem>> {\n  columnId: TableColumnId;\n}\n\nexport interface TableColumnDefinition<TItem> {\n  columnId: TableColumnId;\n  compare: (a: TItem, b: TItem) => number;\n  renderHeaderCell: () => React.ReactNode;\n  renderCell: (item: TItem) => React.ReactNode;\n}\n\nexport type RowEnhancer<TItem, TRowState extends TableRowData<TItem> = TableRowData<TItem>> = (\n  row: TableRowData<TItem>,\n) => TRowState;\n\nexport interface TableSortState<TItem> {\n  /**\n   * Current sort direction\n   */\n  sortDirection: SortDirection;\n  /**\n   * Column id of the currently sorted column\n   */\n  sortColumn: TableColumnId | undefined;\n  /**\n   * Set the sort direction for the specified column\n   */\n  setColumnSort: (event: React.SyntheticEvent, columnId: TableColumnId, sortDirection: SortDirection) => void;\n  /**\n   * Toggles the sort direction for specified column\n   */\n  toggleColumnSort: (event: React.SyntheticEvent, columnId: TableColumnId) => void;\n  /**\n   * Returns the sort direction if a column is sorted,\n   * returns undefined if the column is not sorted\n   */\n  getSortDirection: (columnId: TableColumnId) => SortDirection | undefined;\n\n  /**\n   * Sorts rows and returns a **shallow** copy of original items\n   */\n  sort: <TRowState extends TableRowData<TItem>>(rows: TRowState[]) => TRowState[];\n}\n\nexport interface TableSelectionState {\n  /**\n   * Clears all selected rows\n   */\n  clearRows: (e: React.SyntheticEvent) => void;\n  /**\n   * Selects single row\n   */\n  selectRow: (e: React.SyntheticEvent, rowId: TableRowId) => void;\n  /**\n   * De-selects single row\n   */\n  deselectRow: (e: React.SyntheticEvent, rowId: TableRowId) => void;\n  /**\n   * Toggle selection of all rows\n   */\n  toggleAllRows: (e: React.SyntheticEvent) => void;\n  /**\n   * Toggle selection of single row\n   */\n  toggleRow: (e: React.SyntheticEvent, rowId: TableRowId) => void;\n  /**\n   * Collection of row ids corresponding to selected rows\n   */\n  selectedRows: Set<TableRowId>;\n  /**\n   * Whether all rows are selected\n   */\n  allRowsSelected: boolean;\n  /**\n   * Whether some rows are selected\n   */\n  someRowsSelected: boolean;\n\n  /**\n   * Checks if a given rowId is selected\n   */\n  isRowSelected: (rowId: TableRowId) => boolean;\n\n  selectionMode: SelectionMode;\n}\n\nexport interface TableRowData<TItem> {\n  /**\n   * User provided data\n   */\n  item: TItem;\n  /**\n   * The row id, defaults to index position in the collection\n   */\n  rowId: TableRowId;\n}\n\nexport interface TableFeaturesState<TItem> extends Pick<UseTableFeaturesOptions<TItem>, 'items' | 'getRowId'> {\n  /**\n   * The row data for rendering\n   * @param rowEnhancer - Enhances the row with extra user data\n   */\n  getRows: <TRowState extends TableRowData<TItem> = TableRowData<TItem>>(\n    rowEnhancer?: RowEnhancer<TItem, TRowState>,\n  ) => TRowState[];\n  /**\n   * State and actions to manage row selection\n   */\n  selection: TableSelectionState;\n  /**\n   * State and actions to manage row sorting\n   */\n  sort: TableSortState<TItem>;\n  /**\n   * Table columns\n   */\n  columns: TableColumnDefinition<TItem>[];\n  /**\n   * State and actions to manage column resizing\n   */\n  // eslint-disable-next-line @typescript-eslint/naming-convention\n  columnSizing_unstable: TableColumnSizingState;\n  /**\n   * A React.Ref object to be set as a ref for the table.\n   * Used with column resizing.\n   */\n  tableRef: React.Ref<HTMLDivElement>;\n}\n\nexport interface UseTableSortOptions {\n  /**\n   * Used to control sorting\n   */\n  sortState?: SortState;\n  /**\n   * Used in uncontrolled mode to set initial sort column and direction on mount\n   */\n  defaultSortState?: SortState;\n  /**\n   * Called when sort changes\n   */\n  onSortChange?(e: React.SyntheticEvent, state: SortState): void;\n}\n\nexport interface UseTableSelectionOptions {\n  /**\n   * Can be multi or single select\n   */\n  selectionMode: SelectionMode;\n  /**\n   * Used in uncontrolled mode to set initial selected rows on mount\n   */\n  defaultSelectedItems?: Set<TableRowId>;\n  /**\n   * Used to control row selection\n   */\n  selectedItems?: Set<TableRowId>;\n  /**\n   * Called when selection changes\n   */\n  onSelectionChange?(e: React.SyntheticEvent, data: OnSelectionChangeData): void;\n}\n\nexport interface UseTableFeaturesOptions<TItem> {\n  columns: TableColumnDefinition<TItem>[];\n  items: TItem[];\n  getRowId?: (item: TItem) => TableRowId;\n}\n\nexport type TableFeaturePlugin = <TItem>(tableState: TableFeaturesState<TItem>) => TableFeaturesState<TItem>;\n\nexport interface ColumnWidthState {\n  columnId: TableColumnId;\n  width: number;\n  minWidth: number;\n  idealWidth: number;\n  padding: number;\n}\n\nexport type ColumnSizingTableHeaderCellProps = Pick<TableHeaderCellProps, 'style' | 'aside'>;\nexport type ColumnSizingTableCellProps = Pick<TableHeaderCellProps, 'style'>;\n\nexport interface TableColumnSizingState {\n  getOnMouseDown: (columnId: TableColumnId) => (e: React.MouseEvent<HTMLElement>) => void;\n  setColumnWidth: (columnId: TableColumnId, newSize: number) => void;\n  getColumnWidths: () => ColumnWidthState[];\n  getTableHeaderCellProps: (columnId: TableColumnId) => ColumnSizingTableHeaderCellProps;\n  getTableCellProps: (columnId: TableColumnId) => ColumnSizingTableCellProps;\n}\n\nexport type ColumnResizeState = {\n  getColumnWidth: (columnId: TableColumnId) => number;\n  setColumnWidth: (e: MouseEvent | undefined, data: { columnId: TableColumnId; width: number }) => void;\n  getColumnById: (columnId: TableColumnId) => ColumnWidthState | undefined;\n  getColumns: () => ColumnWidthState[];\n};\n\nexport type TableColumnSizingOptions = Record<\n  TableColumnId,\n  Partial<Pick<ColumnWidthState, 'minWidth' | 'idealWidth' | 'padding'>> & { defaultWidth?: number }\n>;\n\nexport type UseTableColumnSizingParams = {\n  columnSizingOptions?: TableColumnSizingOptions;\n  onColumnResize?: (e: MouseEvent | undefined, data: { columnId: TableColumnId; width: number }) => void;\n  containerWidthOffset?: number;\n};\n"]}
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../../../../../packages/react-components/react-table/src/hooks/types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport { SortDirection } from '../components/Table/Table.types';\nimport { TableHeaderCellProps } from '../components/TableHeaderCell/TableHeaderCell.types';\n\nexport type TableRowId = string | number;\nexport type TableColumnId = string | number;\nexport type SelectionMode = 'single' | 'multiselect';\n\nexport interface SortState {\n  sortColumn: TableColumnId | undefined;\n  sortDirection: SortDirection;\n}\n\nexport interface OnSelectionChangeData {\n  selectedItems: Set<TableRowId>;\n}\n\nexport interface CreateTableColumnOptions<TItem> extends Partial<TableColumnDefinition<TItem>> {\n  columnId: TableColumnId;\n}\n\nexport interface TableColumnDefinition<TItem> {\n  columnId: TableColumnId;\n  compare: (a: TItem, b: TItem) => number;\n  renderHeaderCell: () => React.ReactNode;\n  renderCell: (item: TItem) => React.ReactNode;\n}\n\nexport type RowEnhancer<TItem, TRowState extends TableRowData<TItem> = TableRowData<TItem>> = (\n  row: TableRowData<TItem>,\n) => TRowState;\n\nexport interface TableSortState<TItem> {\n  /**\n   * Current sort direction\n   */\n  sortDirection: SortDirection;\n  /**\n   * Column id of the currently sorted column\n   */\n  sortColumn: TableColumnId | undefined;\n  /**\n   * Set the sort direction for the specified column\n   */\n  setColumnSort: (event: React.SyntheticEvent, columnId: TableColumnId, sortDirection: SortDirection) => void;\n  /**\n   * Toggles the sort direction for specified column\n   */\n  toggleColumnSort: (event: React.SyntheticEvent, columnId: TableColumnId) => void;\n  /**\n   * Returns the sort direction if a column is sorted,\n   * returns undefined if the column is not sorted\n   */\n  getSortDirection: (columnId: TableColumnId) => SortDirection | undefined;\n\n  /**\n   * Sorts rows and returns a **shallow** copy of original items\n   */\n  sort: <TRowState extends TableRowData<TItem>>(rows: TRowState[]) => TRowState[];\n}\n\nexport interface TableSelectionState {\n  /**\n   * Clears all selected rows\n   */\n  clearRows: (e: React.SyntheticEvent) => void;\n  /**\n   * Selects single row\n   */\n  selectRow: (e: React.SyntheticEvent, rowId: TableRowId) => void;\n  /**\n   * De-selects single row\n   */\n  deselectRow: (e: React.SyntheticEvent, rowId: TableRowId) => void;\n  /**\n   * Toggle selection of all rows\n   */\n  toggleAllRows: (e: React.SyntheticEvent) => void;\n  /**\n   * Toggle selection of single row\n   */\n  toggleRow: (e: React.SyntheticEvent, rowId: TableRowId) => void;\n  /**\n   * Collection of row ids corresponding to selected rows\n   */\n  selectedRows: Set<TableRowId>;\n  /**\n   * Whether all rows are selected\n   */\n  allRowsSelected: boolean;\n  /**\n   * Whether some rows are selected\n   */\n  someRowsSelected: boolean;\n\n  /**\n   * Checks if a given rowId is selected\n   */\n  isRowSelected: (rowId: TableRowId) => boolean;\n\n  selectionMode: SelectionMode;\n}\n\nexport interface TableRowData<TItem> {\n  /**\n   * User provided data\n   */\n  item: TItem;\n  /**\n   * The row id, defaults to index position in the collection\n   */\n  rowId: TableRowId;\n}\n\nexport interface TableFeaturesState<TItem> extends Pick<UseTableFeaturesOptions<TItem>, 'items' | 'getRowId'> {\n  /**\n   * The row data for rendering\n   * @param rowEnhancer - Enhances the row with extra user data\n   */\n  getRows: <TRowState extends TableRowData<TItem> = TableRowData<TItem>>(\n    rowEnhancer?: RowEnhancer<TItem, TRowState>,\n  ) => TRowState[];\n  /**\n   * State and actions to manage row selection\n   */\n  selection: TableSelectionState;\n  /**\n   * State and actions to manage row sorting\n   */\n  sort: TableSortState<TItem>;\n  /**\n   * Table columns\n   */\n  columns: TableColumnDefinition<TItem>[];\n  /**\n   * State and actions to manage column resizing\n   */\n  // eslint-disable-next-line @typescript-eslint/naming-convention\n  columnSizing_unstable: TableColumnSizingState;\n  /**\n   * A React.Ref object to be set as a ref for the table.\n   * Used with column resizing.\n   */\n  tableRef: React.Ref<HTMLDivElement>;\n}\n\nexport interface UseTableSortOptions {\n  /**\n   * Used to control sorting\n   */\n  sortState?: SortState;\n  /**\n   * Used in uncontrolled mode to set initial sort column and direction on mount\n   */\n  defaultSortState?: SortState;\n  /**\n   * Called when sort changes\n   */\n  onSortChange?(e: React.SyntheticEvent, state: SortState): void;\n}\n\nexport interface UseTableSelectionOptions {\n  /**\n   * Can be multi or single select\n   */\n  selectionMode: SelectionMode;\n  /**\n   * Used in uncontrolled mode to set initial selected rows on mount\n   */\n  defaultSelectedItems?: Set<TableRowId>;\n  /**\n   * Used to control row selection\n   */\n  selectedItems?: Set<TableRowId>;\n  /**\n   * Called when selection changes\n   */\n  onSelectionChange?(e: React.SyntheticEvent, data: OnSelectionChangeData): void;\n}\n\nexport interface UseTableFeaturesOptions<TItem> {\n  columns: TableColumnDefinition<TItem>[];\n  items: TItem[];\n  getRowId?: (item: TItem) => TableRowId;\n}\n\nexport type TableFeaturePlugin = <TItem>(tableState: TableFeaturesState<TItem>) => TableFeaturesState<TItem>;\n\nexport interface ColumnWidthState {\n  columnId: TableColumnId;\n  width: number;\n  minWidth: number;\n  idealWidth: number;\n  padding: number;\n}\n\nexport type ColumnSizingTableHeaderCellProps = Pick<TableHeaderCellProps, 'style' | 'aside'>;\nexport type ColumnSizingTableCellProps = Pick<TableHeaderCellProps, 'style'>;\n\nexport interface TableColumnSizingState {\n  getOnMouseDown: (columnId: TableColumnId) => (e: React.MouseEvent | React.TouchEvent) => void;\n  setColumnWidth: (columnId: TableColumnId, newSize: number) => void;\n  getColumnWidths: () => ColumnWidthState[];\n  getTableHeaderCellProps: (columnId: TableColumnId) => ColumnSizingTableHeaderCellProps;\n  getTableCellProps: (columnId: TableColumnId) => ColumnSizingTableCellProps;\n}\n\nexport type ColumnResizeState = {\n  getColumnWidth: (columnId: TableColumnId) => number;\n  setColumnWidth: (e: TouchEvent | MouseEvent | undefined, data: { columnId: TableColumnId; width: number }) => void;\n  getColumnById: (columnId: TableColumnId) => ColumnWidthState | undefined;\n  getColumns: () => ColumnWidthState[];\n};\n\nexport type TableColumnSizingOptions = Record<\n  TableColumnId,\n  Partial<Pick<ColumnWidthState, 'minWidth' | 'idealWidth' | 'padding'>> & { defaultWidth?: number }\n>;\n\nexport type UseTableColumnSizingParams = {\n  columnSizingOptions?: TableColumnSizingOptions;\n  onColumnResize?: (e: TouchEvent | MouseEvent | undefined, data: { columnId: TableColumnId; width: number }) => void;\n  containerWidthOffset?: number;\n};\n"]}

package/lib-amd/hooks/useTableColumnResizeMouseHandler.js

@@ -1,4 +1,4 @@
-define(["require", "exports", "react", "@fluentui/react-shared-contexts"], function (require, exports, React, react_shared_contexts_1) {
+define(["require", "exports", "react", "@fluentui/react-shared-contexts", "@fluentui/react-utilities"], function (require, exports, React, react_shared_contexts_1, react_utilities_1) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     exports.useTableColumnResizeMouseHandler = void 0;
@@ -8,38 +8,51 @@ define(["require", "exports", "react", "@fluentui/react-shared-contexts"], funct
         var colId = React.useRef(undefined);
         var targetDocument = react_shared_contexts_1.useFluent_unstable().targetDocument;
         var globalWin = targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.defaultView;
-        var handleMouseMove = React.useCallback(function (e) {
-            var dx = e.clientX - mouseX.current;
+        var recalculatePosition = React.useCallback(function (e) {
+            var clientX = react_utilities_1.getEventClientCoords(e).clientX;
+            var dx = clientX - mouseX.current;
             // Update the local width for the column and set it
             currentWidth.current += dx;
             colId.current && columnResizeState.setColumnWidth(e, { columnId: colId.current, width: currentWidth.current });
-            mouseX.current = e.clientX;
+            mouseX.current = clientX;
         }, [columnResizeState]);
-        var onMouseMove = React.useCallback(function (e) {
+        var onDrag = React.useCallback(function (e) {
             // Using requestAnimationFrame here drastically improves resizing experience on slower CPUs
             if (typeof (globalWin === null || globalWin === void 0 ? void 0 : globalWin.requestAnimationFrame) === 'function') {
-                requestAnimationFrame(function () { return handleMouseMove(e); });
+                requestAnimationFrame(function () { return recalculatePosition(e); });
             }
             else {
-                handleMouseMove(e);
+                recalculatePosition(e);
             }
-        }, [globalWin === null || globalWin === void 0 ? void 0 : globalWin.requestAnimationFrame, handleMouseMove]);
-        var onMouseUp = React.useCallback(function (e) {
-            targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.removeEventListener('mouseup', onMouseUp);
-            targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.removeEventListener('mousemove', onMouseMove);
-        }, [onMouseMove, targetDocument]);
-        var getOnMouseDown = function (columnId) { return function (mouseDownEvent) {
-            // ignore other buttons than primary mouse button
-            if (mouseDownEvent.target !== mouseDownEvent.currentTarget || mouseDownEvent.button !== 0) {
-                return;
+        }, [globalWin === null || globalWin === void 0 ? void 0 : globalWin.requestAnimationFrame, recalculatePosition]);
+        var onDragEnd = React.useCallback(function (event) {
+            if (react_utilities_1.isMouseEvent(event)) {
+                targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.removeEventListener('mouseup', onDragEnd);
+                targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.removeEventListener('mousemove', onDrag);
             }
+            if (react_utilities_1.isTouchEvent(event)) {
+                targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.removeEventListener('touchend', onDragEnd);
+                targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.removeEventListener('touchmove', onDrag);
+            }
+        }, [onDrag, targetDocument]);
+        var getOnMouseDown = function (columnId) { return function (event) {
             // Keep the width locally so that we decouple the calculation of the next with from rendering.
             // This makes the whole experience much faster and more precise
             currentWidth.current = columnResizeState.getColumnWidth(columnId);
-            mouseX.current = mouseDownEvent.clientX;
+            mouseX.current = react_utilities_1.getEventClientCoords(event).clientX;
             colId.current = columnId;
-            targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.addEventListener('mouseup', onMouseUp);
-            targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.addEventListener('mousemove', onMouseMove);
+            if (react_utilities_1.isMouseEvent(event)) {
+                // ignore other buttons than primary mouse button
+                if (event.target !== event.currentTarget || event.button !== 0) {
+                    return;
+                }
+                targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.addEventListener('mouseup', onDragEnd);
+                targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.addEventListener('mousemove', onDrag);
+            }
+            if (react_utilities_1.isTouchEvent(event)) {
+                targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.addEventListener('touchend', onDragEnd);
+                targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.addEventListener('touchmove', onDrag);
+            }
         }; };
         return {
             getOnMouseDown: function (columnId) { return getOnMouseDown(columnId); },

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

@@ -1 +1 @@
-{"version":3,"file":"useTableColumnResizeMouseHandler.js","sourceRoot":"","sources":["../../../../../../../../packages/react-components/react-table/src/hooks/useTableColumnResizeMouseHandler.ts"],"names":[],"mappings":";;;;IAIA,SAAgB,gCAAgC,CAAC,iBAAoC;QACnF,IAAM,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;QAC/B,IAAM,YAAY,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;QACrC,IAAM,KAAK,GAAG,KAAK,CAAC,MAAM,CAA4B,SAAS,CAAC,CAAC;QAEzD,IAAA,cAAc,GAAK,0CAAS,EAAE,eAAhB,CAAiB;QACvC,IAAM,SAAS,GAAG,cAAc,aAAd,cAAc,uBAAd,cAAc,CAAE,WAAW,CAAC;QAE9C,IAAM,eAAe,GAAG,KAAK,CAAC,WAAW,CACvC,UAAC,CAAa;YACZ,IAAM,EAAE,GAAG,CAAC,CAAC,OAAO,GAAG,MAAM,CAAC,OAAO,CAAC;YAEtC,mDAAmD;YACnD,YAAY,CAAC,OAAO,IAAI,EAAE,CAAC;YAC3B,KAAK,CAAC,OAAO,IAAI,iBAAiB,CAAC,cAAc,CAAC,CAAC,EAAE,EAAE,QAAQ,EAAE,KAAK,CAAC,OAAO,EAAE,KAAK,EAAE,YAAY,CAAC,OAAO,EAAE,CAAC,CAAC;YAC/G,MAAM,CAAC,OAAO,GAAG,CAAC,CAAC,OAAO,CAAC;QAC7B,CAAC,EACD,CAAC,iBAAiB,CAAC,CACpB,CAAC;QAEF,IAAM,WAAW,GAAG,KAAK,CAAC,WAAW,CACnC,UAAC,CAAa;YACZ,2FAA2F;YAC3F,IAAI,OAAO,CAAA,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,qBAAqB,CAAA,KAAK,UAAU,EAAE;gBAC1D,qBAAqB,CAAC,cAAM,OAAA,eAAe,CAAC,CAAC,CAAC,EAAlB,CAAkB,CAAC,CAAC;aACjD;iBAAM;gBACL,eAAe,CAAC,CAAC,CAAC,CAAC;aACpB;QACH,CAAC,EACD,CAAC,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,qBAAqB,EAAE,eAAe,CAAC,CACpD,CAAC;QAEF,IAAM,SAAS,GAAG,KAAK,CAAC,WAAW,CACjC,UAAC,CAAa;YACZ,cAAc,aAAd,cAAc,uBAAd,cAAc,CAAE,mBAAmB,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC;YAC1D,cAAc,aAAd,cAAc,uBAAd,cAAc,CAAE,mBAAmB,CAAC,WAAW,EAAE,WAAW,CAAC,CAAC;QAChE,CAAC,EACD,CAAC,WAAW,EAAE,cAAc,CAAC,CAC9B,CAAC;QAEF,IAAM,cAAc,GAAG,UAAC,QAAuB,IAAK,OAAA,UAAC,cAA6C;YAChG,iDAAiD;YACjD,IAAI,cAAc,CAAC,MAAM,KAAK,cAAc,CAAC,aAAa,IAAI,cAAc,CAAC,MAAM,KAAK,CAAC,EAAE;gBACzF,OAAO;aACR;YACD,8FAA8F;YAC9F,+DAA+D;YAC/D,YAAY,CAAC,OAAO,GAAG,iBAAiB,CAAC,cAAc,CAAC,QAAQ,CAAC,CAAC;YAClE,MAAM,CAAC,OAAO,GAAG,cAAc,CAAC,OAAO,CAAC;YACxC,KAAK,CAAC,OAAO,GAAG,QAAQ,CAAC;YAEzB,cAAc,aAAd,cAAc,uBAAd,cAAc,CAAE,gBAAgB,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC;YACvD,cAAc,aAAd,cAAc,uBAAd,cAAc,CAAE,gBAAgB,CAAC,WAAW,EAAE,WAAW,CAAC,CAAC;QAC7D,CAAC,EAbmD,CAanD,CAAC;QAEF,OAAO;YACL,cAAc,EAAE,UAAC,QAAuB,IAAK,OAAA,cAAc,CAAC,QAAQ,CAAC,EAAxB,CAAwB;SACtE,CAAC;IACJ,CAAC;IA1DD,4EA0DC","sourcesContent":["import * as React from 'react';\nimport { TableColumnId, ColumnResizeState } from './types';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\n\nexport function useTableColumnResizeMouseHandler(columnResizeState: ColumnResizeState) {\n  const mouseX = React.useRef(0);\n  const currentWidth = React.useRef(0);\n  const colId = React.useRef<TableColumnId | undefined>(undefined);\n\n  const { targetDocument } = useFluent();\n  const globalWin = targetDocument?.defaultView;\n\n  const handleMouseMove = React.useCallback(\n    (e: MouseEvent) => {\n      const dx = e.clientX - mouseX.current;\n\n      // Update the local width for the column and set it\n      currentWidth.current += dx;\n      colId.current && columnResizeState.setColumnWidth(e, { columnId: colId.current, width: currentWidth.current });\n      mouseX.current = e.clientX;\n    },\n    [columnResizeState],\n  );\n\n  const onMouseMove = React.useCallback(\n    (e: MouseEvent) => {\n      // Using requestAnimationFrame here drastically improves resizing experience on slower CPUs\n      if (typeof globalWin?.requestAnimationFrame === 'function') {\n        requestAnimationFrame(() => handleMouseMove(e));\n      } else {\n        handleMouseMove(e);\n      }\n    },\n    [globalWin?.requestAnimationFrame, handleMouseMove],\n  );\n\n  const onMouseUp = React.useCallback(\n    (e: MouseEvent) => {\n      targetDocument?.removeEventListener('mouseup', onMouseUp);\n      targetDocument?.removeEventListener('mousemove', onMouseMove);\n    },\n    [onMouseMove, targetDocument],\n  );\n\n  const getOnMouseDown = (columnId: TableColumnId) => (mouseDownEvent: React.MouseEvent<HTMLElement>) => {\n    // ignore other buttons than primary mouse button\n    if (mouseDownEvent.target !== mouseDownEvent.currentTarget || mouseDownEvent.button !== 0) {\n      return;\n    }\n    // Keep the width locally so that we decouple the calculation of the next with from rendering.\n    // This makes the whole experience much faster and more precise\n    currentWidth.current = columnResizeState.getColumnWidth(columnId);\n    mouseX.current = mouseDownEvent.clientX;\n    colId.current = columnId;\n\n    targetDocument?.addEventListener('mouseup', onMouseUp);\n    targetDocument?.addEventListener('mousemove', onMouseMove);\n  };\n\n  return {\n    getOnMouseDown: (columnId: TableColumnId) => getOnMouseDown(columnId),\n  };\n}\n"]}
+{"version":3,"file":"useTableColumnResizeMouseHandler.js","sourceRoot":"","sources":["../../../../../../../../packages/react-components/react-table/src/hooks/useTableColumnResizeMouseHandler.ts"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { TableColumnId, ColumnResizeState } from './types';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport {\n  NativeTouchOrMouseEvent,\n  ReactTouchOrMouseEvent,\n  getEventClientCoords,\n  isMouseEvent,\n  isTouchEvent,\n} from '@fluentui/react-utilities';\n\nexport function useTableColumnResizeMouseHandler(columnResizeState: ColumnResizeState) {\n  const mouseX = React.useRef(0);\n  const currentWidth = React.useRef(0);\n  const colId = React.useRef<TableColumnId | undefined>(undefined);\n\n  const { targetDocument } = useFluent();\n  const globalWin = targetDocument?.defaultView;\n\n  const recalculatePosition = React.useCallback(\n    (e: NativeTouchOrMouseEvent) => {\n      const { clientX } = getEventClientCoords(e);\n      const dx = clientX - mouseX.current;\n\n      // Update the local width for the column and set it\n      currentWidth.current += dx;\n      colId.current && columnResizeState.setColumnWidth(e, { columnId: colId.current, width: currentWidth.current });\n      mouseX.current = clientX;\n    },\n    [columnResizeState],\n  );\n\n  const onDrag = React.useCallback(\n    (e: NativeTouchOrMouseEvent) => {\n      // Using requestAnimationFrame here drastically improves resizing experience on slower CPUs\n      if (typeof globalWin?.requestAnimationFrame === 'function') {\n        requestAnimationFrame(() => recalculatePosition(e));\n      } else {\n        recalculatePosition(e);\n      }\n    },\n    [globalWin?.requestAnimationFrame, recalculatePosition],\n  );\n\n  const onDragEnd = React.useCallback(\n    (event: NativeTouchOrMouseEvent) => {\n      if (isMouseEvent(event)) {\n        targetDocument?.removeEventListener('mouseup', onDragEnd);\n        targetDocument?.removeEventListener('mousemove', onDrag);\n      }\n      if (isTouchEvent(event)) {\n        targetDocument?.removeEventListener('touchend', onDragEnd);\n        targetDocument?.removeEventListener('touchmove', onDrag);\n      }\n    },\n    [onDrag, targetDocument],\n  );\n\n  const getOnMouseDown = (columnId: TableColumnId) => (event: ReactTouchOrMouseEvent) => {\n    // Keep the width locally so that we decouple the calculation of the next with from rendering.\n    // This makes the whole experience much faster and more precise\n    currentWidth.current = columnResizeState.getColumnWidth(columnId);\n    mouseX.current = getEventClientCoords(event).clientX;\n    colId.current = columnId;\n\n    if (isMouseEvent(event)) {\n      // ignore other buttons than primary mouse button\n      if (event.target !== event.currentTarget || event.button !== 0) {\n        return;\n      }\n      targetDocument?.addEventListener('mouseup', onDragEnd);\n      targetDocument?.addEventListener('mousemove', onDrag);\n    }\n\n    if (isTouchEvent(event)) {\n      targetDocument?.addEventListener('touchend', onDragEnd);\n      targetDocument?.addEventListener('touchmove', onDrag);\n    }\n  };\n\n  return {\n    getOnMouseDown: (columnId: TableColumnId) => getOnMouseDown(columnId),\n  };\n}\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"useTableColumnResizeState.js","sourceRoot":"","sources":["../../../../../../../../packages/react-components/react-table/src/hooks/useTableColumnResizeState.ts"],"names":[],"mappings":"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","sourcesContent":["import { useEventCallback, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport * as React from 'react';\nimport {\n  TableColumnDefinition,\n  TableColumnId,\n  ColumnResizeState,\n  ColumnWidthState,\n  UseTableColumnSizingParams,\n  TableColumnSizingOptions,\n} from './types';\nimport {\n  columnDefinitionsToState,\n  adjustColumnWidthsToFitContainer,\n  getColumnById,\n  setColumnProperty,\n  getColumnWidth,\n} from '../utils/columnResizeUtils';\n\ntype ComponentState<T> = {\n  columns: TableColumnDefinition<T>[];\n  containerWidth: number;\n  columnWidthState: ColumnWidthState[];\n  columnSizingOptions: TableColumnSizingOptions | undefined;\n};\n\ntype ColumnResizeStateAction<T> =\n  | {\n      type: 'CONTAINER_WIDTH_UPDATED';\n      containerWidth: number;\n    }\n  | {\n      type: 'COLUMNS_UPDATED';\n      columns: TableColumnDefinition<T>[];\n    }\n  | {\n      type: 'COLUMN_SIZING_OPTIONS_UPDATED';\n      columnSizingOptions: TableColumnSizingOptions | undefined;\n    }\n  | {\n      type: 'SET_COLUMN_WIDTH';\n      columnId: TableColumnId;\n      width: number;\n    };\n\nconst createReducer = <T>() => (state: ComponentState<T>, action: ColumnResizeStateAction<T>): ComponentState<T> => {\n  switch (action.type) {\n    case 'CONTAINER_WIDTH_UPDATED':\n      return {\n        ...state,\n        containerWidth: action.containerWidth,\n        columnWidthState: adjustColumnWidthsToFitContainer(state.columnWidthState, action.containerWidth),\n      };\n\n    case 'COLUMNS_UPDATED':\n      const newS = columnDefinitionsToState(action.columns, state.columnWidthState, state.columnSizingOptions);\n      return {\n        ...state,\n        columns: action.columns,\n        columnWidthState: adjustColumnWidthsToFitContainer(newS, state.containerWidth),\n      };\n\n    case 'COLUMN_SIZING_OPTIONS_UPDATED':\n      const newState = columnDefinitionsToState(state.columns, state.columnWidthState, action.columnSizingOptions);\n      return {\n        ...state,\n        columnSizingOptions: action.columnSizingOptions,\n        columnWidthState: adjustColumnWidthsToFitContainer(newState, state.containerWidth),\n      };\n\n    case 'SET_COLUMN_WIDTH':\n      const { columnId, width } = action;\n      const { containerWidth } = state;\n\n      const column = getColumnById(state.columnWidthState, columnId);\n      let newColumnWidthState = [...state.columnWidthState];\n\n      if (!column) {\n        return state;\n      }\n\n      // Adjust the column width and measure the new total width\n      newColumnWidthState = setColumnProperty(newColumnWidthState, columnId, 'width', width);\n      // Set this width as idealWidth, because its a deliberate change, not a recalculation because of container\n      newColumnWidthState = setColumnProperty(newColumnWidthState, columnId, 'idealWidth', width);\n      // Adjust the widths to the container size\n      newColumnWidthState = adjustColumnWidthsToFitContainer(newColumnWidthState, containerWidth);\n\n      return { ...state, columnWidthState: newColumnWidthState };\n  }\n};\n\nexport function useTableColumnResizeState<T>(\n  columns: TableColumnDefinition<T>[],\n  containerWidth: number,\n  params: UseTableColumnSizingParams = {},\n): ColumnResizeState {\n  const { onColumnResize, columnSizingOptions } = params;\n\n  const reducer = React.useMemo(() => createReducer<T>(), []);\n\n  const [state, dispatch] = React.useReducer(reducer, {\n    columns,\n    containerWidth: 0,\n    columnWidthState: columnDefinitionsToState(columns, undefined, columnSizingOptions),\n    columnSizingOptions,\n  });\n\n  useIsomorphicLayoutEffect(() => {\n    dispatch({ type: 'CONTAINER_WIDTH_UPDATED', containerWidth });\n  }, [containerWidth]);\n\n  useIsomorphicLayoutEffect(() => {\n    dispatch({ type: 'COLUMNS_UPDATED', columns });\n  }, [columns]);\n\n  useIsomorphicLayoutEffect(() => {\n    dispatch({ type: 'COLUMN_SIZING_OPTIONS_UPDATED', columnSizingOptions });\n  }, [columnSizingOptions]);\n\n  const setColumnWidth = useEventCallback(\n    (event: MouseEvent | undefined, data: { columnId: TableColumnId; width: number }) => {\n      let { width } = data;\n      const { columnId } = data;\n      const col = getColumnById(state.columnWidthState, columnId);\n      if (!col) {\n        return;\n      }\n\n      width = Math.max(col.minWidth || 0, width);\n\n      if (onColumnResize) {\n        onColumnResize(event, { columnId, width });\n      }\n      dispatch({ type: 'SET_COLUMN_WIDTH', columnId, width });\n    },\n  );\n\n  return {\n    getColumnById: (colId: TableColumnId) => getColumnById(state.columnWidthState, colId),\n    getColumns: () => state.columnWidthState,\n    getColumnWidth: (colId: TableColumnId) => getColumnWidth(state.columnWidthState, colId),\n    setColumnWidth,\n  };\n}\n"]}
+{"version":3,"file":"useTableColumnResizeState.js","sourceRoot":"","sources":["../../../../../../../../packages/react-components/react-table/src/hooks/useTableColumnResizeState.ts"],"names":[],"mappings":";;;;IA4CA,IAAM,aAAa,GAAG,cAAS,OAAA,UAAC,KAAwB,EAAE,MAAkC;QAC1F,QAAQ,MAAM,CAAC,IAAI,EAAE;YACnB,KAAK,yBAAyB;gBAC5B,6CACK,KAAK,KACR,cAAc,EAAE,MAAM,CAAC,cAAc,EACrC,gBAAgB,EAAE,oDAAgC,CAAC,KAAK,CAAC,gBAAgB,EAAE,MAAM,CAAC,cAAc,CAAC,IACjG;YAEJ,KAAK,iBAAiB;gBACpB,IAAM,IAAI,GAAG,4CAAwB,CAAC,MAAM,CAAC,OAAO,EAAE,KAAK,CAAC,gBAAgB,EAAE,KAAK,CAAC,mBAAmB,CAAC,CAAC;gBACzG,6CACK,KAAK,KACR,OAAO,EAAE,MAAM,CAAC,OAAO,EACvB,gBAAgB,EAAE,oDAAgC,CAAC,IAAI,EAAE,KAAK,CAAC,cAAc,CAAC,IAC9E;YAEJ,KAAK,+BAA+B;gBAClC,IAAM,QAAQ,GAAG,4CAAwB,CAAC,KAAK,CAAC,OAAO,EAAE,KAAK,CAAC,gBAAgB,EAAE,MAAM,CAAC,mBAAmB,CAAC,CAAC;gBAC7G,6CACK,KAAK,KACR,mBAAmB,EAAE,MAAM,CAAC,mBAAmB,EAC/C,gBAAgB,EAAE,oDAAgC,CAAC,QAAQ,EAAE,KAAK,CAAC,cAAc,CAAC,IAClF;YAEJ,KAAK,kBAAkB;gBACb,IAAA,QAAQ,GAAY,MAAM,SAAlB,EAAE,KAAK,GAAK,MAAM,MAAX,CAAY;gBAC3B,IAAA,cAAc,GAAK,KAAK,eAAV,CAAW;gBAEjC,IAAM,MAAM,GAAG,iCAAa,CAAC,KAAK,CAAC,gBAAgB,EAAE,QAAQ,CAAC,CAAC;gBAC/D,IAAI,mBAAmB,6BAAO,KAAK,CAAC,gBAAgB,CAAC,CAAC;gBAEtD,IAAI,CAAC,MAAM,EAAE;oBACX,OAAO,KAAK,CAAC;iBACd;gBAED,0DAA0D;gBAC1D,mBAAmB,GAAG,qCAAiB,CAAC,mBAAmB,EAAE,QAAQ,EAAE,OAAO,EAAE,KAAK,CAAC,CAAC;gBACvF,0GAA0G;gBAC1G,mBAAmB,GAAG,qCAAiB,CAAC,mBAAmB,EAAE,QAAQ,EAAE,YAAY,EAAE,KAAK,CAAC,CAAC;gBAC5F,0CAA0C;gBAC1C,mBAAmB,GAAG,oDAAgC,CAAC,mBAAmB,EAAE,cAAc,CAAC,CAAC;gBAE5F,6CAAY,KAAK,KAAE,gBAAgB,EAAE,mBAAmB,IAAG;SAC9D;IACH,CAAC,EA7C8B,CA6C9B,CAAC;IAEF,SAAgB,yBAAyB,CACvC,OAAmC,EACnC,cAAsB,EACtB,MAAuC;QAAvC,uBAAA,EAAA,WAAuC;QAE/B,IAAA,cAAc,GAA0B,MAAM,eAAhC,EAAE,mBAAmB,GAAK,MAAM,oBAAX,CAAY;QAEvD,IAAM,OAAO,GAAG,KAAK,CAAC,OAAO,CAAC,cAAM,OAAA,aAAa,EAAK,EAAlB,CAAkB,EAAE,EAAE,CAAC,CAAC;QAEtD,IAAA,KAAoB,KAAK,CAAC,UAAU,CAAC,OAAO,EAAE;YAClD,OAAO,SAAA;YACP,cAAc,EAAE,CAAC;YACjB,gBAAgB,EAAE,4CAAwB,CAAC,OAAO,EAAE,SAAS,EAAE,mBAAmB,CAAC;YACnF,mBAAmB,qBAAA;SACpB,CAAC,EALK,KAAK,QAAA,EAAE,QAAQ,QAKpB,CAAC;QAEH,2CAAyB,CAAC;YACxB,QAAQ,CAAC,EAAE,IAAI,EAAE,yBAAyB,EAAE,cAAc,gBAAA,EAAE,CAAC,CAAC;QAChE,CAAC,EAAE,CAAC,cAAc,CAAC,CAAC,CAAC;QAErB,2CAAyB,CAAC;YACxB,QAAQ,CAAC,EAAE,IAAI,EAAE,iBAAiB,EAAE,OAAO,SAAA,EAAE,CAAC,CAAC;QACjD,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;QAEd,2CAAyB,CAAC;YACxB,QAAQ,CAAC,EAAE,IAAI,EAAE,+BAA+B,EAAE,mBAAmB,qBAAA,EAAE,CAAC,CAAC;QAC3E,CAAC,EAAE,CAAC,mBAAmB,CAAC,CAAC,CAAC;QAE1B,IAAM,cAAc,GAAG,kCAAgB,CACrC,UAAC,KAA0C,EAAE,IAAgD;YACrF,IAAA,KAAK,GAAK,IAAI,MAAT,CAAU;YACb,IAAA,QAAQ,GAAK,IAAI,SAAT,CAAU;YAC1B,IAAM,GAAG,GAAG,iCAAa,CAAC,KAAK,CAAC,gBAAgB,EAAE,QAAQ,CAAC,CAAC;YAC5D,IAAI,CAAC,GAAG,EAAE;gBACR,OAAO;aACR;YAED,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,QAAQ,IAAI,CAAC,EAAE,KAAK,CAAC,CAAC;YAE3C,IAAI,cAAc,EAAE;gBAClB,cAAc,CAAC,KAAK,EAAE,EAAE,QAAQ,UAAA,EAAE,KAAK,OAAA,EAAE,CAAC,CAAC;aAC5C;YACD,QAAQ,CAAC,EAAE,IAAI,EAAE,kBAAkB,EAAE,QAAQ,UAAA,EAAE,KAAK,OAAA,EAAE,CAAC,CAAC;QAC1D,CAAC,CACF,CAAC;QAEF,OAAO;YACL,aAAa,EAAE,UAAC,KAAoB,IAAK,OAAA,iCAAa,CAAC,KAAK,CAAC,gBAAgB,EAAE,KAAK,CAAC,EAA5C,CAA4C;YACrF,UAAU,EAAE,cAAM,OAAA,KAAK,CAAC,gBAAgB,EAAtB,CAAsB;YACxC,cAAc,EAAE,UAAC,KAAoB,IAAK,OAAA,kCAAc,CAAC,KAAK,CAAC,gBAAgB,EAAE,KAAK,CAAC,EAA7C,CAA6C;YACvF,cAAc,gBAAA;SACf,CAAC;IACJ,CAAC;IApDD,8DAoDC","sourcesContent":["import { useEventCallback, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport * as React from 'react';\nimport {\n  TableColumnDefinition,\n  TableColumnId,\n  ColumnResizeState,\n  ColumnWidthState,\n  UseTableColumnSizingParams,\n  TableColumnSizingOptions,\n} from './types';\nimport {\n  columnDefinitionsToState,\n  adjustColumnWidthsToFitContainer,\n  getColumnById,\n  setColumnProperty,\n  getColumnWidth,\n} from '../utils/columnResizeUtils';\n\ntype ComponentState<T> = {\n  columns: TableColumnDefinition<T>[];\n  containerWidth: number;\n  columnWidthState: ColumnWidthState[];\n  columnSizingOptions: TableColumnSizingOptions | undefined;\n};\n\ntype ColumnResizeStateAction<T> =\n  | {\n      type: 'CONTAINER_WIDTH_UPDATED';\n      containerWidth: number;\n    }\n  | {\n      type: 'COLUMNS_UPDATED';\n      columns: TableColumnDefinition<T>[];\n    }\n  | {\n      type: 'COLUMN_SIZING_OPTIONS_UPDATED';\n      columnSizingOptions: TableColumnSizingOptions | undefined;\n    }\n  | {\n      type: 'SET_COLUMN_WIDTH';\n      columnId: TableColumnId;\n      width: number;\n    };\n\nconst createReducer = <T>() => (state: ComponentState<T>, action: ColumnResizeStateAction<T>): ComponentState<T> => {\n  switch (action.type) {\n    case 'CONTAINER_WIDTH_UPDATED':\n      return {\n        ...state,\n        containerWidth: action.containerWidth,\n        columnWidthState: adjustColumnWidthsToFitContainer(state.columnWidthState, action.containerWidth),\n      };\n\n    case 'COLUMNS_UPDATED':\n      const newS = columnDefinitionsToState(action.columns, state.columnWidthState, state.columnSizingOptions);\n      return {\n        ...state,\n        columns: action.columns,\n        columnWidthState: adjustColumnWidthsToFitContainer(newS, state.containerWidth),\n      };\n\n    case 'COLUMN_SIZING_OPTIONS_UPDATED':\n      const newState = columnDefinitionsToState(state.columns, state.columnWidthState, action.columnSizingOptions);\n      return {\n        ...state,\n        columnSizingOptions: action.columnSizingOptions,\n        columnWidthState: adjustColumnWidthsToFitContainer(newState, state.containerWidth),\n      };\n\n    case 'SET_COLUMN_WIDTH':\n      const { columnId, width } = action;\n      const { containerWidth } = state;\n\n      const column = getColumnById(state.columnWidthState, columnId);\n      let newColumnWidthState = [...state.columnWidthState];\n\n      if (!column) {\n        return state;\n      }\n\n      // Adjust the column width and measure the new total width\n      newColumnWidthState = setColumnProperty(newColumnWidthState, columnId, 'width', width);\n      // Set this width as idealWidth, because its a deliberate change, not a recalculation because of container\n      newColumnWidthState = setColumnProperty(newColumnWidthState, columnId, 'idealWidth', width);\n      // Adjust the widths to the container size\n      newColumnWidthState = adjustColumnWidthsToFitContainer(newColumnWidthState, containerWidth);\n\n      return { ...state, columnWidthState: newColumnWidthState };\n  }\n};\n\nexport function useTableColumnResizeState<T>(\n  columns: TableColumnDefinition<T>[],\n  containerWidth: number,\n  params: UseTableColumnSizingParams = {},\n): ColumnResizeState {\n  const { onColumnResize, columnSizingOptions } = params;\n\n  const reducer = React.useMemo(() => createReducer<T>(), []);\n\n  const [state, dispatch] = React.useReducer(reducer, {\n    columns,\n    containerWidth: 0,\n    columnWidthState: columnDefinitionsToState(columns, undefined, columnSizingOptions),\n    columnSizingOptions,\n  });\n\n  useIsomorphicLayoutEffect(() => {\n    dispatch({ type: 'CONTAINER_WIDTH_UPDATED', containerWidth });\n  }, [containerWidth]);\n\n  useIsomorphicLayoutEffect(() => {\n    dispatch({ type: 'COLUMNS_UPDATED', columns });\n  }, [columns]);\n\n  useIsomorphicLayoutEffect(() => {\n    dispatch({ type: 'COLUMN_SIZING_OPTIONS_UPDATED', columnSizingOptions });\n  }, [columnSizingOptions]);\n\n  const setColumnWidth = useEventCallback(\n    (event: MouseEvent | TouchEvent | undefined, data: { columnId: TableColumnId; width: number }) => {\n      let { width } = data;\n      const { columnId } = data;\n      const col = getColumnById(state.columnWidthState, columnId);\n      if (!col) {\n        return;\n      }\n\n      width = Math.max(col.minWidth || 0, width);\n\n      if (onColumnResize) {\n        onColumnResize(event, { columnId, width });\n      }\n      dispatch({ type: 'SET_COLUMN_WIDTH', columnId, width });\n    },\n  );\n\n  return {\n    getColumnById: (colId: TableColumnId) => getColumnById(state.columnWidthState, colId),\n    getColumns: () => state.columnWidthState,\n    getColumnWidth: (colId: TableColumnId) => getColumnWidth(state.columnWidthState, colId),\n    setColumnWidth,\n  };\n}\n"]}

package/lib-amd/hooks/useTableColumnSizing.js

@@ -43,7 +43,7 @@ define(["require", "exports", "tslib", "react", "./useTableColumnResizeState", "
                 getColumnWidths: columnResizeState.getColumns,
                 getTableHeaderCellProps: function (columnId) {
                     var col = columnResizeState.getColumnById(columnId);
-                    var aside = React.createElement(TableResizeHandle_1.TableResizeHandle, { onMouseDown: mouseHandler.getOnMouseDown(columnId) });
+                    var aside = (React.createElement(TableResizeHandle_1.TableResizeHandle, { onMouseDown: mouseHandler.getOnMouseDown(columnId), onTouchStart: mouseHandler.getOnMouseDown(columnId) }));
                     return col ? { style: getColumnStyles(col), aside: aside } : {};
                 },
                 getTableCellProps: function (columnId) {

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

@@ -1 +1 @@
-{"version":3,"file":"useTableColumnSizing.js","sourceRoot":"","sources":["../../../../../../../../packages/react-components/react-table/src/hooks/useTableColumnSizing.tsx"],"names":[],"mappings":";;;;IAaa,QAAA,wBAAwB,GAA2B;QAC9D,eAAe,EAAE,cAAM,OAAA,EAAE,EAAF,CAAE;QACzB,cAAc,EAAE,cAAM,OAAA,cAAM,OAAA,IAAI,EAAJ,CAAI,EAAV,CAAU;QAChC,cAAc,EAAE,cAAM,OAAA,IAAI,EAAJ,CAAI;QAC1B,uBAAuB,EAAE,cAAM,OAAA,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,EAA7B,CAA6B;QAC5D,iBAAiB,EAAE,cAAM,OAAA,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,EAA7B,CAA6B;KACvD,CAAC;IAEF,SAAgB,6BAA6B,CAAQ,MAAmC;QACtF,4EAA4E;QAC5E,sDAAsD;QACtD,OAAO,UAAC,UAAqC,IAAK,OAAA,yBAAyB,CAAC,UAAU,EAAE,MAAM,CAAC,EAA7C,CAA6C,CAAC;IAClG,CAAC;IAJD,sEAIC;IAED,SAAS,eAAe,CAAC,MAAwB;QAC/C,IAAM,KAAK,GAAG,MAAM,CAAC,KAAK,CAAC;QAE3B,OAAO;YACL,gBAAgB;YAChB,KAAK,OAAA;YACL,0CAA0C;YAC1C,QAAQ,EAAE,KAAK;YACf,QAAQ,EAAE,KAAK;SAChB,CAAC;IACJ,CAAC;IAED,SAAS,yBAAyB,CAChC,UAAqC,EACrC,MAAmC;QAE3B,IAAA,OAAO,GAAK,UAAU,QAAf,CAAgB;QAE/B,2BAA2B;QACrB,IAAA,KAA+B,qCAAiB,EAAE,EAAhD,KAAK,WAAA,EAAE,iBAAiB,uBAAwB,CAAC;QACzD,kEAAkE;QAClE,IAAM,iBAAiB,GAAG,qDAAyB,CAAC,OAAO,EAAE,KAAK,GAAG,CAAC,CAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,oBAAoB,KAAI,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC;QAClH,yDAAyD;QACzD,IAAM,YAAY,GAAG,mEAAgC,CAAC,iBAAiB,CAAC,CAAC;QAEzE,6CACK,UAAU,KACb,QAAQ,EAAE,iBAAiB;YAC3B,gEAAgE;YAChE,qBAAqB,EAAE;gBACrB,cAAc,EAAE,YAAY,CAAC,cAAc;gBAC3C,cAAc,EAAE,UAAC,QAAuB,EAAE,CAAS;oBACjD,OAAA,iBAAiB,CAAC,cAAc,CAAC,SAAS,EAAE,EAAE,QAAQ,UAAA,EAAE,KAAK,EAAE,CAAC,EAAE,CAAC;gBAAnE,CAAmE;gBACrE,eAAe,EAAE,iBAAiB,CAAC,UAAU;gBAC7C,uBAAuB,EAAE,UAAC,QAAuB;oBAC/C,IAAM,GAAG,GAAG,iBAAiB,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;oBACtD,IAAM,KAAK,GAAG,oBAAC,qCAAiB,IAAC,WAAW,EAAE,YAAY,CAAC,cAAc,CAAC,QAAQ,CAAC,GAAI,CAAC;oBACxF,OAAO,GAAG,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,eAAe,CAAC,GAAG,CAAC,EAAE,KAAK,OAAA,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;gBAC3D,CAAC;gBACD,iBAAiB,EAAE,UAAC,QAAuB;oBACzC,IAAM,GAAG,GAAG,iBAAiB,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;oBACtD,OAAO,GAAG,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,eAAe,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;gBACpD,CAAC;aACF,IACD;IACJ,CAAC","sourcesContent":["import * as React from 'react';\nimport {\n  TableColumnId,\n  ColumnWidthState,\n  TableColumnSizingState,\n  TableFeaturesState,\n  UseTableColumnSizingParams,\n} from './types';\nimport { useTableColumnResizeState } from './useTableColumnResizeState';\nimport { useTableColumnResizeMouseHandler } from './useTableColumnResizeMouseHandler';\nimport { useMeasureElement } from './useMeasureElement';\nimport { TableResizeHandle } from '../TableResizeHandle';\n\nexport const defaultColumnSizingState: TableColumnSizingState = {\n  getColumnWidths: () => [],\n  getOnMouseDown: () => () => null,\n  setColumnWidth: () => null,\n  getTableHeaderCellProps: () => ({ style: {}, columnId: '' }),\n  getTableCellProps: () => ({ style: {}, columnId: '' }),\n};\n\nexport function useTableColumnSizing_unstable<TItem>(params?: UseTableColumnSizingParams) {\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>) => useTableColumnSizingState(tableState, params);\n}\n\nfunction getColumnStyles(column: ColumnWidthState): React.CSSProperties {\n  const width = column.width;\n\n  return {\n    // native styles\n    width,\n    // non-native element styles (flex layout)\n    minWidth: width,\n    maxWidth: width,\n  };\n}\n\nfunction useTableColumnSizingState<TItem>(\n  tableState: TableFeaturesState<TItem>,\n  params?: UseTableColumnSizingParams,\n): TableFeaturesState<TItem> {\n  const { columns } = tableState;\n\n  // Gets the container width\n  const { width, measureElementRef } = useMeasureElement();\n  // Creates the state based on columns and available containerWidth\n  const columnResizeState = useTableColumnResizeState(columns, width + (params?.containerWidthOffset || 0), params);\n  // Creates the mouse handler and attaches the state to it\n  const mouseHandler = useTableColumnResizeMouseHandler(columnResizeState);\n\n  return {\n    ...tableState,\n    tableRef: measureElementRef,\n    // eslint-disable-next-line @typescript-eslint/naming-convention\n    columnSizing_unstable: {\n      getOnMouseDown: mouseHandler.getOnMouseDown,\n      setColumnWidth: (columnId: TableColumnId, w: number) =>\n        columnResizeState.setColumnWidth(undefined, { columnId, width: w }),\n      getColumnWidths: columnResizeState.getColumns,\n      getTableHeaderCellProps: (columnId: TableColumnId) => {\n        const col = columnResizeState.getColumnById(columnId);\n        const aside = <TableResizeHandle onMouseDown={mouseHandler.getOnMouseDown(columnId)} />;\n        return col ? { style: getColumnStyles(col), aside } : {};\n      },\n      getTableCellProps: (columnId: TableColumnId) => {\n        const col = columnResizeState.getColumnById(columnId);\n        return col ? { style: getColumnStyles(col) } : {};\n      },\n    },\n  };\n}\n"]}
+{"version":3,"file":"useTableColumnSizing.js","sourceRoot":"","sources":["../../../../../../../../packages/react-components/react-table/src/hooks/useTableColumnSizing.tsx"],"names":[],"mappings":";;;;IAaa,QAAA,wBAAwB,GAA2B;QAC9D,eAAe,EAAE,cAAM,OAAA,EAAE,EAAF,CAAE;QACzB,cAAc,EAAE,cAAM,OAAA,cAAM,OAAA,IAAI,EAAJ,CAAI,EAAV,CAAU;QAChC,cAAc,EAAE,cAAM,OAAA,IAAI,EAAJ,CAAI;QAC1B,uBAAuB,EAAE,cAAM,OAAA,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,EAA7B,CAA6B;QAC5D,iBAAiB,EAAE,cAAM,OAAA,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,EAA7B,CAA6B;KACvD,CAAC;IAEF,SAAgB,6BAA6B,CAAQ,MAAmC;QACtF,4EAA4E;QAC5E,sDAAsD;QACtD,OAAO,UAAC,UAAqC,IAAK,OAAA,yBAAyB,CAAC,UAAU,EAAE,MAAM,CAAC,EAA7C,CAA6C,CAAC;IAClG,CAAC;IAJD,sEAIC;IAED,SAAS,eAAe,CAAC,MAAwB;QAC/C,IAAM,KAAK,GAAG,MAAM,CAAC,KAAK,CAAC;QAE3B,OAAO;YACL,gBAAgB;YAChB,KAAK,OAAA;YACL,0CAA0C;YAC1C,QAAQ,EAAE,KAAK;YACf,QAAQ,EAAE,KAAK;SAChB,CAAC;IACJ,CAAC;IAED,SAAS,yBAAyB,CAChC,UAAqC,EACrC,MAAmC;QAE3B,IAAA,OAAO,GAAK,UAAU,QAAf,CAAgB;QAE/B,2BAA2B;QACrB,IAAA,KAA+B,qCAAiB,EAAE,EAAhD,KAAK,WAAA,EAAE,iBAAiB,uBAAwB,CAAC;QACzD,kEAAkE;QAClE,IAAM,iBAAiB,GAAG,qDAAyB,CAAC,OAAO,EAAE,KAAK,GAAG,CAAC,CAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,oBAAoB,KAAI,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC;QAClH,yDAAyD;QACzD,IAAM,YAAY,GAAG,mEAAgC,CAAC,iBAAiB,CAAC,CAAC;QAEzE,6CACK,UAAU,KACb,QAAQ,EAAE,iBAAiB;YAC3B,gEAAgE;YAChE,qBAAqB,EAAE;gBACrB,cAAc,EAAE,YAAY,CAAC,cAAc;gBAC3C,cAAc,EAAE,UAAC,QAAuB,EAAE,CAAS;oBACjD,OAAA,iBAAiB,CAAC,cAAc,CAAC,SAAS,EAAE,EAAE,QAAQ,UAAA,EAAE,KAAK,EAAE,CAAC,EAAE,CAAC;gBAAnE,CAAmE;gBACrE,eAAe,EAAE,iBAAiB,CAAC,UAAU;gBAC7C,uBAAuB,EAAE,UAAC,QAAuB;oBAC/C,IAAM,GAAG,GAAG,iBAAiB,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;oBACtD,IAAM,KAAK,GAAG,CACZ,oBAAC,qCAAiB,IAChB,WAAW,EAAE,YAAY,CAAC,cAAc,CAAC,QAAQ,CAAC,EAClD,YAAY,EAAE,YAAY,CAAC,cAAc,CAAC,QAAQ,CAAC,GACnD,CACH,CAAC;oBACF,OAAO,GAAG,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,eAAe,CAAC,GAAG,CAAC,EAAE,KAAK,OAAA,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;gBAC3D,CAAC;gBACD,iBAAiB,EAAE,UAAC,QAAuB;oBACzC,IAAM,GAAG,GAAG,iBAAiB,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;oBACtD,OAAO,GAAG,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,eAAe,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;gBACpD,CAAC;aACF,IACD;IACJ,CAAC","sourcesContent":["import * as React from 'react';\nimport {\n  TableColumnId,\n  ColumnWidthState,\n  TableColumnSizingState,\n  TableFeaturesState,\n  UseTableColumnSizingParams,\n} from './types';\nimport { useTableColumnResizeState } from './useTableColumnResizeState';\nimport { useTableColumnResizeMouseHandler } from './useTableColumnResizeMouseHandler';\nimport { useMeasureElement } from './useMeasureElement';\nimport { TableResizeHandle } from '../TableResizeHandle';\n\nexport const defaultColumnSizingState: TableColumnSizingState = {\n  getColumnWidths: () => [],\n  getOnMouseDown: () => () => null,\n  setColumnWidth: () => null,\n  getTableHeaderCellProps: () => ({ style: {}, columnId: '' }),\n  getTableCellProps: () => ({ style: {}, columnId: '' }),\n};\n\nexport function useTableColumnSizing_unstable<TItem>(params?: UseTableColumnSizingParams) {\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>) => useTableColumnSizingState(tableState, params);\n}\n\nfunction getColumnStyles(column: ColumnWidthState): React.CSSProperties {\n  const width = column.width;\n\n  return {\n    // native styles\n    width,\n    // non-native element styles (flex layout)\n    minWidth: width,\n    maxWidth: width,\n  };\n}\n\nfunction useTableColumnSizingState<TItem>(\n  tableState: TableFeaturesState<TItem>,\n  params?: UseTableColumnSizingParams,\n): TableFeaturesState<TItem> {\n  const { columns } = tableState;\n\n  // Gets the container width\n  const { width, measureElementRef } = useMeasureElement();\n  // Creates the state based on columns and available containerWidth\n  const columnResizeState = useTableColumnResizeState(columns, width + (params?.containerWidthOffset || 0), params);\n  // Creates the mouse handler and attaches the state to it\n  const mouseHandler = useTableColumnResizeMouseHandler(columnResizeState);\n\n  return {\n    ...tableState,\n    tableRef: measureElementRef,\n    // eslint-disable-next-line @typescript-eslint/naming-convention\n    columnSizing_unstable: {\n      getOnMouseDown: mouseHandler.getOnMouseDown,\n      setColumnWidth: (columnId: TableColumnId, w: number) =>\n        columnResizeState.setColumnWidth(undefined, { columnId, width: w }),\n      getColumnWidths: columnResizeState.getColumns,\n      getTableHeaderCellProps: (columnId: TableColumnId) => {\n        const col = columnResizeState.getColumnById(columnId);\n        const aside = (\n          <TableResizeHandle\n            onMouseDown={mouseHandler.getOnMouseDown(columnId)}\n            onTouchStart={mouseHandler.getOnMouseDown(columnId)}\n          />\n        );\n        return col ? { style: getColumnStyles(col), aside } : {};\n      },\n      getTableCellProps: (columnId: TableColumnId) => {\n        const col = columnResizeState.getColumnById(columnId);\n        return col ? { style: getColumnStyles(col) } : {};\n      },\n    },\n  };\n}\n"]}

package/lib-commonjs/hooks/useTableColumnResizeMouseHandler.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.useTableColumnResizeMouseHandler = void 0;
 const React = /*#__PURE__*/require("react");
 const react_shared_contexts_1 = /*#__PURE__*/require("@fluentui/react-shared-contexts");
+const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
 function useTableColumnResizeMouseHandler(columnResizeState) {
   const mouseX = React.useRef(0);
   const currentWidth = React.useRef(0);
@@ -14,40 +15,55 @@ function useTableColumnResizeMouseHandler(columnResizeState) {
     targetDocument
   } = react_shared_contexts_1.useFluent_unstable();
   const globalWin = targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.defaultView;
-  const handleMouseMove = React.useCallback(e => {
-    const dx = e.clientX - mouseX.current;
+  const recalculatePosition = React.useCallback(e => {
+    const {
+      clientX
+    } = react_utilities_1.getEventClientCoords(e);
+    const dx = clientX - mouseX.current;
     // Update the local width for the column and set it
     currentWidth.current += dx;
     colId.current && columnResizeState.setColumnWidth(e, {
       columnId: colId.current,
       width: currentWidth.current
     });
-    mouseX.current = e.clientX;
+    mouseX.current = clientX;
   }, [columnResizeState]);
-  const onMouseMove = React.useCallback(e => {
+  const onDrag = React.useCallback(e => {
     // Using requestAnimationFrame here drastically improves resizing experience on slower CPUs
     if (typeof (globalWin === null || globalWin === void 0 ? void 0 : globalWin.requestAnimationFrame) === 'function') {
-      requestAnimationFrame(() => handleMouseMove(e));
+      requestAnimationFrame(() => recalculatePosition(e));
     } else {
-      handleMouseMove(e);
+      recalculatePosition(e);
     }
-  }, [globalWin === null || globalWin === void 0 ? void 0 : globalWin.requestAnimationFrame, handleMouseMove]);
-  const onMouseUp = React.useCallback(e => {
-    targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.removeEventListener('mouseup', onMouseUp);
-    targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.removeEventListener('mousemove', onMouseMove);
-  }, [onMouseMove, targetDocument]);
-  const getOnMouseDown = columnId => mouseDownEvent => {
-    // ignore other buttons than primary mouse button
-    if (mouseDownEvent.target !== mouseDownEvent.currentTarget || mouseDownEvent.button !== 0) {
-      return;
+  }, [globalWin === null || globalWin === void 0 ? void 0 : globalWin.requestAnimationFrame, recalculatePosition]);
+  const onDragEnd = React.useCallback(event => {
+    if (react_utilities_1.isMouseEvent(event)) {
+      targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.removeEventListener('mouseup', onDragEnd);
+      targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.removeEventListener('mousemove', onDrag);
     }
+    if (react_utilities_1.isTouchEvent(event)) {
+      targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.removeEventListener('touchend', onDragEnd);
+      targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.removeEventListener('touchmove', onDrag);
+    }
+  }, [onDrag, targetDocument]);
+  const getOnMouseDown = columnId => event => {
     // Keep the width locally so that we decouple the calculation of the next with from rendering.
     // This makes the whole experience much faster and more precise
     currentWidth.current = columnResizeState.getColumnWidth(columnId);
-    mouseX.current = mouseDownEvent.clientX;
+    mouseX.current = react_utilities_1.getEventClientCoords(event).clientX;
     colId.current = columnId;
-    targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.addEventListener('mouseup', onMouseUp);
-    targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.addEventListener('mousemove', onMouseMove);
+    if (react_utilities_1.isMouseEvent(event)) {
+      // ignore other buttons than primary mouse button
+      if (event.target !== event.currentTarget || event.button !== 0) {
+        return;
+      }
+      targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.addEventListener('mouseup', onDragEnd);
+      targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.addEventListener('mousemove', onDrag);
+    }
+    if (react_utilities_1.isTouchEvent(event)) {
+      targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.addEventListener('touchend', onDragEnd);
+      targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.addEventListener('touchmove', onDrag);
+    }
   };
   return {
     getOnMouseDown: columnId => getOnMouseDown(columnId)

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

@@ -1 +1 @@
-{"version":3,"mappings":";;;;;;AAAA;AAEA;AAEA,SAAgBA,gCAAgC,CAACC,iBAAoC;EACnF,MAAMC,MAAM,GAAGC,KAAK,CAACC,MAAM,CAAC,CAAC,CAAC;EAC9B,MAAMC,YAAY,GAAGF,KAAK,CAACC,MAAM,CAAC,CAAC,CAAC;EACpC,MAAME,KAAK,GAAGH,KAAK,CAACC,MAAM,CAA4BG,SAAS,CAAC;EAEhE,MAAM;IAAEC;EAAc,CAAE,GAAGC,0CAAS,EAAE;EACtC,MAAMC,SAAS,GAAGF,cAAc,aAAdA,cAAc,uBAAdA,cAAc,CAAEG,WAAW;EAE7C,MAAMC,eAAe,GAAGT,KAAK,CAACU,WAAW,CACtCC,CAAa,IAAI;IAChB,MAAMC,EAAE,GAAGD,CAAC,CAACE,OAAO,GAAGd,MAAM,CAACe,OAAO;IAErC;IACAZ,YAAY,CAACY,OAAO,IAAIF,EAAE;IAC1BT,KAAK,CAACW,OAAO,IAAIhB,iBAAiB,CAACiB,cAAc,CAACJ,CAAC,EAAE;MAAEK,QAAQ,EAAEb,KAAK,CAACW,OAAO;MAAEG,KAAK,EAAEf,YAAY,CAACY;IAAO,CAAE,CAAC;IAC9Gf,MAAM,CAACe,OAAO,GAAGH,CAAC,CAACE,OAAO;EAC5B,CAAC,EACD,CAACf,iBAAiB,CAAC,CACpB;EAED,MAAMoB,WAAW,GAAGlB,KAAK,CAACU,WAAW,CAClCC,CAAa,IAAI;IAChB;IACA,IAAI,QAAOJ,SAAS,aAATA,SAAS,uBAATA,SAAS,CAAEY,qBAAqB,MAAK,UAAU,EAAE;MAC1DA,qBAAqB,CAAC,MAAMV,eAAe,CAACE,CAAC,CAAC,CAAC;KAChD,MAAM;MACLF,eAAe,CAACE,CAAC,CAAC;;EAEtB,CAAC,EACD,CAACJ,SAAS,aAATA,SAAS,uBAATA,SAAS,CAAEY,qBAAqB,EAAEV,eAAe,CAAC,CACpD;EAED,MAAMW,SAAS,GAAGpB,KAAK,CAACU,WAAW,CAChCC,CAAa,IAAI;IAChBN,cAAc,aAAdA,cAAc,uBAAdA,cAAc,CAAEgB,mBAAmB,CAAC,SAAS,EAAED,SAAS,CAAC;IACzDf,cAAc,aAAdA,cAAc,uBAAdA,cAAc,CAAEgB,mBAAmB,CAAC,WAAW,EAAEH,WAAW,CAAC;EAC/D,CAAC,EACD,CAACA,WAAW,EAAEb,cAAc,CAAC,CAC9B;EAED,MAAMiB,cAAc,GAAIN,QAAuB,IAAMO,cAA6C,IAAI;IACpG;IACA,IAAIA,cAAc,CAACC,MAAM,KAAKD,cAAc,CAACE,aAAa,IAAIF,cAAc,CAACG,MAAM,KAAK,CAAC,EAAE;MACzF;;IAEF;IACA;IACAxB,YAAY,CAACY,OAAO,GAAGhB,iBAAiB,CAAC6B,cAAc,CAACX,QAAQ,CAAC;IACjEjB,MAAM,CAACe,OAAO,GAAGS,cAAc,CAACV,OAAO;IACvCV,KAAK,CAACW,OAAO,GAAGE,QAAQ;IAExBX,cAAc,aAAdA,cAAc,uBAAdA,cAAc,CAAEuB,gBAAgB,CAAC,SAAS,EAAER,SAAS,CAAC;IACtDf,cAAc,aAAdA,cAAc,uBAAdA,cAAc,CAAEuB,gBAAgB,CAAC,WAAW,EAAEV,WAAW,CAAC;EAC5D,CAAC;EAED,OAAO;IACLI,cAAc,EAAGN,QAAuB,IAAKM,cAAc,CAACN,QAAQ;GACrE;AACH;AA1DAa","names":["useTableColumnResizeMouseHandler","columnResizeState","mouseX","React","useRef","currentWidth","colId","undefined","targetDocument","react_shared_contexts_1","globalWin","defaultView","handleMouseMove","useCallback","e","dx","clientX","current","setColumnWidth","columnId","width","onMouseMove","requestAnimationFrame","onMouseUp","removeEventListener","getOnMouseDown","mouseDownEvent","target","currentTarget","button","getColumnWidth","addEventListener","exports"],"sourceRoot":"../src/","sources":["packages/react-components/react-table/src/hooks/useTableColumnResizeMouseHandler.ts"],"sourcesContent":["import * as React from 'react';\nimport { TableColumnId, ColumnResizeState } from './types';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\n\nexport function useTableColumnResizeMouseHandler(columnResizeState: ColumnResizeState) {\n  const mouseX = React.useRef(0);\n  const currentWidth = React.useRef(0);\n  const colId = React.useRef<TableColumnId | undefined>(undefined);\n\n  const { targetDocument } = useFluent();\n  const globalWin = targetDocument?.defaultView;\n\n  const handleMouseMove = React.useCallback(\n    (e: MouseEvent) => {\n      const dx = e.clientX - mouseX.current;\n\n      // Update the local width for the column and set it\n      currentWidth.current += dx;\n      colId.current && columnResizeState.setColumnWidth(e, { columnId: colId.current, width: currentWidth.current });\n      mouseX.current = e.clientX;\n    },\n    [columnResizeState],\n  );\n\n  const onMouseMove = React.useCallback(\n    (e: MouseEvent) => {\n      // Using requestAnimationFrame here drastically improves resizing experience on slower CPUs\n      if (typeof globalWin?.requestAnimationFrame === 'function') {\n        requestAnimationFrame(() => handleMouseMove(e));\n      } else {\n        handleMouseMove(e);\n      }\n    },\n    [globalWin?.requestAnimationFrame, handleMouseMove],\n  );\n\n  const onMouseUp = React.useCallback(\n    (e: MouseEvent) => {\n      targetDocument?.removeEventListener('mouseup', onMouseUp);\n      targetDocument?.removeEventListener('mousemove', onMouseMove);\n    },\n    [onMouseMove, targetDocument],\n  );\n\n  const getOnMouseDown = (columnId: TableColumnId) => (mouseDownEvent: React.MouseEvent<HTMLElement>) => {\n    // ignore other buttons than primary mouse button\n    if (mouseDownEvent.target !== mouseDownEvent.currentTarget || mouseDownEvent.button !== 0) {\n      return;\n    }\n    // Keep the width locally so that we decouple the calculation of the next with from rendering.\n    // This makes the whole experience much faster and more precise\n    currentWidth.current = columnResizeState.getColumnWidth(columnId);\n    mouseX.current = mouseDownEvent.clientX;\n    colId.current = columnId;\n\n    targetDocument?.addEventListener('mouseup', onMouseUp);\n    targetDocument?.addEventListener('mousemove', onMouseMove);\n  };\n\n  return {\n    getOnMouseDown: (columnId: TableColumnId) => getOnMouseDown(columnId),\n  };\n}\n"]}
+{"version":3,"mappings":"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","names":["useTableColumnResizeMouseHandler","columnResizeState","mouseX","React","useRef","currentWidth","colId","undefined","targetDocument","react_shared_contexts_1","globalWin","defaultView","recalculatePosition","useCallback","e","clientX","react_utilities_1","dx","current","setColumnWidth","columnId","width","onDrag","requestAnimationFrame","onDragEnd","event","removeEventListener","getOnMouseDown","getColumnWidth","target","currentTarget","button","addEventListener","exports"],"sourceRoot":"../src/","sources":["packages/react-components/react-table/src/hooks/useTableColumnResizeMouseHandler.ts"],"sourcesContent":["import * as React from 'react';\nimport { TableColumnId, ColumnResizeState } from './types';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport {\n  NativeTouchOrMouseEvent,\n  ReactTouchOrMouseEvent,\n  getEventClientCoords,\n  isMouseEvent,\n  isTouchEvent,\n} from '@fluentui/react-utilities';\n\nexport function useTableColumnResizeMouseHandler(columnResizeState: ColumnResizeState) {\n  const mouseX = React.useRef(0);\n  const currentWidth = React.useRef(0);\n  const colId = React.useRef<TableColumnId | undefined>(undefined);\n\n  const { targetDocument } = useFluent();\n  const globalWin = targetDocument?.defaultView;\n\n  const recalculatePosition = React.useCallback(\n    (e: NativeTouchOrMouseEvent) => {\n      const { clientX } = getEventClientCoords(e);\n      const dx = clientX - mouseX.current;\n\n      // Update the local width for the column and set it\n      currentWidth.current += dx;\n      colId.current && columnResizeState.setColumnWidth(e, { columnId: colId.current, width: currentWidth.current });\n      mouseX.current = clientX;\n    },\n    [columnResizeState],\n  );\n\n  const onDrag = React.useCallback(\n    (e: NativeTouchOrMouseEvent) => {\n      // Using requestAnimationFrame here drastically improves resizing experience on slower CPUs\n      if (typeof globalWin?.requestAnimationFrame === 'function') {\n        requestAnimationFrame(() => recalculatePosition(e));\n      } else {\n        recalculatePosition(e);\n      }\n    },\n    [globalWin?.requestAnimationFrame, recalculatePosition],\n  );\n\n  const onDragEnd = React.useCallback(\n    (event: NativeTouchOrMouseEvent) => {\n      if (isMouseEvent(event)) {\n        targetDocument?.removeEventListener('mouseup', onDragEnd);\n        targetDocument?.removeEventListener('mousemove', onDrag);\n      }\n      if (isTouchEvent(event)) {\n        targetDocument?.removeEventListener('touchend', onDragEnd);\n        targetDocument?.removeEventListener('touchmove', onDrag);\n      }\n    },\n    [onDrag, targetDocument],\n  );\n\n  const getOnMouseDown = (columnId: TableColumnId) => (event: ReactTouchOrMouseEvent) => {\n    // Keep the width locally so that we decouple the calculation of the next with from rendering.\n    // This makes the whole experience much faster and more precise\n    currentWidth.current = columnResizeState.getColumnWidth(columnId);\n    mouseX.current = getEventClientCoords(event).clientX;\n    colId.current = columnId;\n\n    if (isMouseEvent(event)) {\n      // ignore other buttons than primary mouse button\n      if (event.target !== event.currentTarget || event.button !== 0) {\n        return;\n      }\n      targetDocument?.addEventListener('mouseup', onDragEnd);\n      targetDocument?.addEventListener('mousemove', onDrag);\n    }\n\n    if (isTouchEvent(event)) {\n      targetDocument?.addEventListener('touchend', onDragEnd);\n      targetDocument?.addEventListener('touchmove', onDrag);\n    }\n  };\n\n  return {\n    getOnMouseDown: (columnId: TableColumnId) => getOnMouseDown(columnId),\n  };\n}\n"]}

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

@@ -1 +1 @@
-{"version":3,"mappings":"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","names":["createReducer","state","action","type","containerWidth","columnWidthState","columnResizeUtils_1","newS","columns","columnSizingOptions","newState","columnId","width","column","newColumnWidthState","useTableColumnResizeState","params","onColumnResize","reducer","React","useMemo","dispatch","useReducer","undefined","react_utilities_1","setColumnWidth","event","data","col","Math","max","minWidth","getColumnById","colId","getColumns","getColumnWidth","exports"],"sourceRoot":"../src/","sources":["packages/react-components/react-table/src/hooks/useTableColumnResizeState.ts"],"sourcesContent":["import { useEventCallback, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport * as React from 'react';\nimport {\n  TableColumnDefinition,\n  TableColumnId,\n  ColumnResizeState,\n  ColumnWidthState,\n  UseTableColumnSizingParams,\n  TableColumnSizingOptions,\n} from './types';\nimport {\n  columnDefinitionsToState,\n  adjustColumnWidthsToFitContainer,\n  getColumnById,\n  setColumnProperty,\n  getColumnWidth,\n} from '../utils/columnResizeUtils';\n\ntype ComponentState<T> = {\n  columns: TableColumnDefinition<T>[];\n  containerWidth: number;\n  columnWidthState: ColumnWidthState[];\n  columnSizingOptions: TableColumnSizingOptions | undefined;\n};\n\ntype ColumnResizeStateAction<T> =\n  | {\n      type: 'CONTAINER_WIDTH_UPDATED';\n      containerWidth: number;\n    }\n  | {\n      type: 'COLUMNS_UPDATED';\n      columns: TableColumnDefinition<T>[];\n    }\n  | {\n      type: 'COLUMN_SIZING_OPTIONS_UPDATED';\n      columnSizingOptions: TableColumnSizingOptions | undefined;\n    }\n  | {\n      type: 'SET_COLUMN_WIDTH';\n      columnId: TableColumnId;\n      width: number;\n    };\n\nconst createReducer = <T>() => (state: ComponentState<T>, action: ColumnResizeStateAction<T>): ComponentState<T> => {\n  switch (action.type) {\n    case 'CONTAINER_WIDTH_UPDATED':\n      return {\n        ...state,\n        containerWidth: action.containerWidth,\n        columnWidthState: adjustColumnWidthsToFitContainer(state.columnWidthState, action.containerWidth),\n      };\n\n    case 'COLUMNS_UPDATED':\n      const newS = columnDefinitionsToState(action.columns, state.columnWidthState, state.columnSizingOptions);\n      return {\n        ...state,\n        columns: action.columns,\n        columnWidthState: adjustColumnWidthsToFitContainer(newS, state.containerWidth),\n      };\n\n    case 'COLUMN_SIZING_OPTIONS_UPDATED':\n      const newState = columnDefinitionsToState(state.columns, state.columnWidthState, action.columnSizingOptions);\n      return {\n        ...state,\n        columnSizingOptions: action.columnSizingOptions,\n        columnWidthState: adjustColumnWidthsToFitContainer(newState, state.containerWidth),\n      };\n\n    case 'SET_COLUMN_WIDTH':\n      const { columnId, width } = action;\n      const { containerWidth } = state;\n\n      const column = getColumnById(state.columnWidthState, columnId);\n      let newColumnWidthState = [...state.columnWidthState];\n\n      if (!column) {\n        return state;\n      }\n\n      // Adjust the column width and measure the new total width\n      newColumnWidthState = setColumnProperty(newColumnWidthState, columnId, 'width', width);\n      // Set this width as idealWidth, because its a deliberate change, not a recalculation because of container\n      newColumnWidthState = setColumnProperty(newColumnWidthState, columnId, 'idealWidth', width);\n      // Adjust the widths to the container size\n      newColumnWidthState = adjustColumnWidthsToFitContainer(newColumnWidthState, containerWidth);\n\n      return { ...state, columnWidthState: newColumnWidthState };\n  }\n};\n\nexport function useTableColumnResizeState<T>(\n  columns: TableColumnDefinition<T>[],\n  containerWidth: number,\n  params: UseTableColumnSizingParams = {},\n): ColumnResizeState {\n  const { onColumnResize, columnSizingOptions } = params;\n\n  const reducer = React.useMemo(() => createReducer<T>(), []);\n\n  const [state, dispatch] = React.useReducer(reducer, {\n    columns,\n    containerWidth: 0,\n    columnWidthState: columnDefinitionsToState(columns, undefined, columnSizingOptions),\n    columnSizingOptions,\n  });\n\n  useIsomorphicLayoutEffect(() => {\n    dispatch({ type: 'CONTAINER_WIDTH_UPDATED', containerWidth });\n  }, [containerWidth]);\n\n  useIsomorphicLayoutEffect(() => {\n    dispatch({ type: 'COLUMNS_UPDATED', columns });\n  }, [columns]);\n\n  useIsomorphicLayoutEffect(() => {\n    dispatch({ type: 'COLUMN_SIZING_OPTIONS_UPDATED', columnSizingOptions });\n  }, [columnSizingOptions]);\n\n  const setColumnWidth = useEventCallback(\n    (event: MouseEvent | undefined, data: { columnId: TableColumnId; width: number }) => {\n      let { width } = data;\n      const { columnId } = data;\n      const col = getColumnById(state.columnWidthState, columnId);\n      if (!col) {\n        return;\n      }\n\n      width = Math.max(col.minWidth || 0, width);\n\n      if (onColumnResize) {\n        onColumnResize(event, { columnId, width });\n      }\n      dispatch({ type: 'SET_COLUMN_WIDTH', columnId, width });\n    },\n  );\n\n  return {\n    getColumnById: (colId: TableColumnId) => getColumnById(state.columnWidthState, colId),\n    getColumns: () => state.columnWidthState,\n    getColumnWidth: (colId: TableColumnId) => getColumnWidth(state.columnWidthState, colId),\n    setColumnWidth,\n  };\n}\n"]}
+{"version":3,"mappings":"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","names":["createReducer","state","action","type","containerWidth","columnWidthState","columnResizeUtils_1","newS","columns","columnSizingOptions","newState","columnId","width","column","newColumnWidthState","useTableColumnResizeState","params","onColumnResize","reducer","React","useMemo","dispatch","useReducer","undefined","react_utilities_1","setColumnWidth","event","data","col","Math","max","minWidth","getColumnById","colId","getColumns","getColumnWidth","exports"],"sourceRoot":"../src/","sources":["packages/react-components/react-table/src/hooks/useTableColumnResizeState.ts"],"sourcesContent":["import { useEventCallback, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport * as React from 'react';\nimport {\n  TableColumnDefinition,\n  TableColumnId,\n  ColumnResizeState,\n  ColumnWidthState,\n  UseTableColumnSizingParams,\n  TableColumnSizingOptions,\n} from './types';\nimport {\n  columnDefinitionsToState,\n  adjustColumnWidthsToFitContainer,\n  getColumnById,\n  setColumnProperty,\n  getColumnWidth,\n} from '../utils/columnResizeUtils';\n\ntype ComponentState<T> = {\n  columns: TableColumnDefinition<T>[];\n  containerWidth: number;\n  columnWidthState: ColumnWidthState[];\n  columnSizingOptions: TableColumnSizingOptions | undefined;\n};\n\ntype ColumnResizeStateAction<T> =\n  | {\n      type: 'CONTAINER_WIDTH_UPDATED';\n      containerWidth: number;\n    }\n  | {\n      type: 'COLUMNS_UPDATED';\n      columns: TableColumnDefinition<T>[];\n    }\n  | {\n      type: 'COLUMN_SIZING_OPTIONS_UPDATED';\n      columnSizingOptions: TableColumnSizingOptions | undefined;\n    }\n  | {\n      type: 'SET_COLUMN_WIDTH';\n      columnId: TableColumnId;\n      width: number;\n    };\n\nconst createReducer = <T>() => (state: ComponentState<T>, action: ColumnResizeStateAction<T>): ComponentState<T> => {\n  switch (action.type) {\n    case 'CONTAINER_WIDTH_UPDATED':\n      return {\n        ...state,\n        containerWidth: action.containerWidth,\n        columnWidthState: adjustColumnWidthsToFitContainer(state.columnWidthState, action.containerWidth),\n      };\n\n    case 'COLUMNS_UPDATED':\n      const newS = columnDefinitionsToState(action.columns, state.columnWidthState, state.columnSizingOptions);\n      return {\n        ...state,\n        columns: action.columns,\n        columnWidthState: adjustColumnWidthsToFitContainer(newS, state.containerWidth),\n      };\n\n    case 'COLUMN_SIZING_OPTIONS_UPDATED':\n      const newState = columnDefinitionsToState(state.columns, state.columnWidthState, action.columnSizingOptions);\n      return {\n        ...state,\n        columnSizingOptions: action.columnSizingOptions,\n        columnWidthState: adjustColumnWidthsToFitContainer(newState, state.containerWidth),\n      };\n\n    case 'SET_COLUMN_WIDTH':\n      const { columnId, width } = action;\n      const { containerWidth } = state;\n\n      const column = getColumnById(state.columnWidthState, columnId);\n      let newColumnWidthState = [...state.columnWidthState];\n\n      if (!column) {\n        return state;\n      }\n\n      // Adjust the column width and measure the new total width\n      newColumnWidthState = setColumnProperty(newColumnWidthState, columnId, 'width', width);\n      // Set this width as idealWidth, because its a deliberate change, not a recalculation because of container\n      newColumnWidthState = setColumnProperty(newColumnWidthState, columnId, 'idealWidth', width);\n      // Adjust the widths to the container size\n      newColumnWidthState = adjustColumnWidthsToFitContainer(newColumnWidthState, containerWidth);\n\n      return { ...state, columnWidthState: newColumnWidthState };\n  }\n};\n\nexport function useTableColumnResizeState<T>(\n  columns: TableColumnDefinition<T>[],\n  containerWidth: number,\n  params: UseTableColumnSizingParams = {},\n): ColumnResizeState {\n  const { onColumnResize, columnSizingOptions } = params;\n\n  const reducer = React.useMemo(() => createReducer<T>(), []);\n\n  const [state, dispatch] = React.useReducer(reducer, {\n    columns,\n    containerWidth: 0,\n    columnWidthState: columnDefinitionsToState(columns, undefined, columnSizingOptions),\n    columnSizingOptions,\n  });\n\n  useIsomorphicLayoutEffect(() => {\n    dispatch({ type: 'CONTAINER_WIDTH_UPDATED', containerWidth });\n  }, [containerWidth]);\n\n  useIsomorphicLayoutEffect(() => {\n    dispatch({ type: 'COLUMNS_UPDATED', columns });\n  }, [columns]);\n\n  useIsomorphicLayoutEffect(() => {\n    dispatch({ type: 'COLUMN_SIZING_OPTIONS_UPDATED', columnSizingOptions });\n  }, [columnSizingOptions]);\n\n  const setColumnWidth = useEventCallback(\n    (event: MouseEvent | TouchEvent | undefined, data: { columnId: TableColumnId; width: number }) => {\n      let { width } = data;\n      const { columnId } = data;\n      const col = getColumnById(state.columnWidthState, columnId);\n      if (!col) {\n        return;\n      }\n\n      width = Math.max(col.minWidth || 0, width);\n\n      if (onColumnResize) {\n        onColumnResize(event, { columnId, width });\n      }\n      dispatch({ type: 'SET_COLUMN_WIDTH', columnId, width });\n    },\n  );\n\n  return {\n    getColumnById: (colId: TableColumnId) => getColumnById(state.columnWidthState, colId),\n    getColumns: () => state.columnWidthState,\n    getColumnWidth: (colId: TableColumnId) => getColumnWidth(state.columnWidthState, colId),\n    setColumnWidth,\n  };\n}\n"]}

package/lib-commonjs/hooks/useTableColumnSizing.js

@@ -65,7 +65,8 @@ function useTableColumnSizingState(tableState, params) {
       getTableHeaderCellProps: columnId => {
         const col = columnResizeState.getColumnById(columnId);
         const aside = React.createElement(TableResizeHandle_1.TableResizeHandle, {
-          onMouseDown: mouseHandler.getOnMouseDown(columnId)
+          onMouseDown: mouseHandler.getOnMouseDown(columnId),
+          onTouchStart: mouseHandler.getOnMouseDown(columnId)
         });
         return col ? {
           style: getColumnStyles(col),

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

@@ -1 +1 @@
-{"version":3,"mappings":";;;;;;AAAA;AAQA;AACA;AACA;AACA;AAEaA,gCAAwB,GAA2B;EAC9DC,eAAe,EAAE,MAAM,EAAE;EACzBC,cAAc,EAAE,MAAM,MAAM,IAAI;EAChCC,cAAc,EAAE,MAAM,IAAI;EAC1BC,uBAAuB,EAAE,OAAO;IAAEC,KAAK,EAAE,EAAE;IAAEC,QAAQ,EAAE;EAAE,CAAE,CAAC;EAC5DC,iBAAiB,EAAE,OAAO;IAAEF,KAAK,EAAE,EAAE;IAAEC,QAAQ,EAAE;EAAE,CAAE;CACtD;AAED,SAAgBE,6BAA6B,CAAQC,MAAmC;EACtF;EACA;EACA,OAAQC,UAAqC,IAAKC,yBAAyB,CAACD,UAAU,EAAED,MAAM,CAAC;AACjG;AAJAT;AAMA,SAASY,eAAe,CAACC,MAAwB;EAC/C,MAAMC,KAAK,GAAGD,MAAM,CAACC,KAAK;EAE1B,OAAO;IACL;IACAA,KAAK;IACL;IACAC,QAAQ,EAAED,KAAK;IACfE,QAAQ,EAAEF;GACX;AACH;AAEA,SAASH,yBAAyB,CAChCD,UAAqC,EACrCD,MAAmC;EAEnC,MAAM;IAAEQ;EAAO,CAAE,GAAGP,UAAU;EAE9B;EACA,MAAM;IAAEI,KAAK;IAAEI;EAAiB,CAAE,GAAGC,qCAAiB,EAAE;EACxD;EACA,MAAMC,iBAAiB,GAAGC,qDAAyB,CAACJ,OAAO,EAAEH,KAAK,IAAI,OAAM,aAANL,MAAM,uBAANA,MAAM,CAAEa,oBAAoB,KAAI,CAAC,CAAC,EAAEb,MAAM,CAAC;EACjH;EACA,MAAMc,YAAY,GAAGC,mEAAgC,CAACJ,iBAAiB,CAAC;EAExE,OAAO;IACL,GAAGV,UAAU;IACbe,QAAQ,EAAEP,iBAAiB;IAC3B;IACAQ,qBAAqB,EAAE;MACrBxB,cAAc,EAAEqB,YAAY,CAACrB,cAAc;MAC3CC,cAAc,EAAE,CAACG,QAAuB,EAAEqB,CAAS,KACjDP,iBAAiB,CAACjB,cAAc,CAACyB,SAAS,EAAE;QAAEtB,QAAQ;QAAEQ,KAAK,EAAEa;MAAC,CAAE,CAAC;MACrE1B,eAAe,EAAEmB,iBAAiB,CAACS,UAAU;MAC7CzB,uBAAuB,EAAGE,QAAuB,IAAI;QACnD,MAAMwB,GAAG,GAAGV,iBAAiB,CAACW,aAAa,CAACzB,QAAQ,CAAC;QACrD,MAAM0B,KAAK,GAAGC,oBAACC,qCAAiB;UAACC,WAAW,EAAEZ,YAAY,CAACrB,cAAc,CAACI,QAAQ;QAAC,EAAI;QACvF,OAAOwB,GAAG,GAAG;UAAEzB,KAAK,EAAEO,eAAe,CAACkB,GAAG,CAAC;UAAEE;QAAK,CAAE,GAAG,EAAE;MAC1D,CAAC;MACDzB,iBAAiB,EAAGD,QAAuB,IAAI;QAC7C,MAAMwB,GAAG,GAAGV,iBAAiB,CAACW,aAAa,CAACzB,QAAQ,CAAC;QACrD,OAAOwB,GAAG,GAAG;UAAEzB,KAAK,EAAEO,eAAe,CAACkB,GAAG;QAAC,CAAE,GAAG,EAAE;MACnD;;GAEH;AACH","names":["exports","getColumnWidths","getOnMouseDown","setColumnWidth","getTableHeaderCellProps","style","columnId","getTableCellProps","useTableColumnSizing_unstable","params","tableState","useTableColumnSizingState","getColumnStyles","column","width","minWidth","maxWidth","columns","measureElementRef","useMeasureElement_1","columnResizeState","useTableColumnResizeState_1","containerWidthOffset","mouseHandler","useTableColumnResizeMouseHandler_1","tableRef","columnSizing_unstable","w","undefined","getColumns","col","getColumnById","aside","React","TableResizeHandle_1","onMouseDown"],"sourceRoot":"../src/","sources":["packages/react-components/react-table/src/hooks/useTableColumnSizing.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  TableColumnId,\n  ColumnWidthState,\n  TableColumnSizingState,\n  TableFeaturesState,\n  UseTableColumnSizingParams,\n} from './types';\nimport { useTableColumnResizeState } from './useTableColumnResizeState';\nimport { useTableColumnResizeMouseHandler } from './useTableColumnResizeMouseHandler';\nimport { useMeasureElement } from './useMeasureElement';\nimport { TableResizeHandle } from '../TableResizeHandle';\n\nexport const defaultColumnSizingState: TableColumnSizingState = {\n  getColumnWidths: () => [],\n  getOnMouseDown: () => () => null,\n  setColumnWidth: () => null,\n  getTableHeaderCellProps: () => ({ style: {}, columnId: '' }),\n  getTableCellProps: () => ({ style: {}, columnId: '' }),\n};\n\nexport function useTableColumnSizing_unstable<TItem>(params?: UseTableColumnSizingParams) {\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>) => useTableColumnSizingState(tableState, params);\n}\n\nfunction getColumnStyles(column: ColumnWidthState): React.CSSProperties {\n  const width = column.width;\n\n  return {\n    // native styles\n    width,\n    // non-native element styles (flex layout)\n    minWidth: width,\n    maxWidth: width,\n  };\n}\n\nfunction useTableColumnSizingState<TItem>(\n  tableState: TableFeaturesState<TItem>,\n  params?: UseTableColumnSizingParams,\n): TableFeaturesState<TItem> {\n  const { columns } = tableState;\n\n  // Gets the container width\n  const { width, measureElementRef } = useMeasureElement();\n  // Creates the state based on columns and available containerWidth\n  const columnResizeState = useTableColumnResizeState(columns, width + (params?.containerWidthOffset || 0), params);\n  // Creates the mouse handler and attaches the state to it\n  const mouseHandler = useTableColumnResizeMouseHandler(columnResizeState);\n\n  return {\n    ...tableState,\n    tableRef: measureElementRef,\n    // eslint-disable-next-line @typescript-eslint/naming-convention\n    columnSizing_unstable: {\n      getOnMouseDown: mouseHandler.getOnMouseDown,\n      setColumnWidth: (columnId: TableColumnId, w: number) =>\n        columnResizeState.setColumnWidth(undefined, { columnId, width: w }),\n      getColumnWidths: columnResizeState.getColumns,\n      getTableHeaderCellProps: (columnId: TableColumnId) => {\n        const col = columnResizeState.getColumnById(columnId);\n        const aside = <TableResizeHandle onMouseDown={mouseHandler.getOnMouseDown(columnId)} />;\n        return col ? { style: getColumnStyles(col), aside } : {};\n      },\n      getTableCellProps: (columnId: TableColumnId) => {\n        const col = columnResizeState.getColumnById(columnId);\n        return col ? { style: getColumnStyles(col) } : {};\n      },\n    },\n  };\n}\n"]}
+{"version":3,"mappings":";;;;;;AAAA;AAQA;AACA;AACA;AACA;AAEaA,gCAAwB,GAA2B;EAC9DC,eAAe,EAAE,MAAM,EAAE;EACzBC,cAAc,EAAE,MAAM,MAAM,IAAI;EAChCC,cAAc,EAAE,MAAM,IAAI;EAC1BC,uBAAuB,EAAE,OAAO;IAAEC,KAAK,EAAE,EAAE;IAAEC,QAAQ,EAAE;EAAE,CAAE,CAAC;EAC5DC,iBAAiB,EAAE,OAAO;IAAEF,KAAK,EAAE,EAAE;IAAEC,QAAQ,EAAE;EAAE,CAAE;CACtD;AAED,SAAgBE,6BAA6B,CAAQC,MAAmC;EACtF;EACA;EACA,OAAQC,UAAqC,IAAKC,yBAAyB,CAACD,UAAU,EAAED,MAAM,CAAC;AACjG;AAJAT;AAMA,SAASY,eAAe,CAACC,MAAwB;EAC/C,MAAMC,KAAK,GAAGD,MAAM,CAACC,KAAK;EAE1B,OAAO;IACL;IACAA,KAAK;IACL;IACAC,QAAQ,EAAED,KAAK;IACfE,QAAQ,EAAEF;GACX;AACH;AAEA,SAASH,yBAAyB,CAChCD,UAAqC,EACrCD,MAAmC;EAEnC,MAAM;IAAEQ;EAAO,CAAE,GAAGP,UAAU;EAE9B;EACA,MAAM;IAAEI,KAAK;IAAEI;EAAiB,CAAE,GAAGC,qCAAiB,EAAE;EACxD;EACA,MAAMC,iBAAiB,GAAGC,qDAAyB,CAACJ,OAAO,EAAEH,KAAK,IAAI,OAAM,aAANL,MAAM,uBAANA,MAAM,CAAEa,oBAAoB,KAAI,CAAC,CAAC,EAAEb,MAAM,CAAC;EACjH;EACA,MAAMc,YAAY,GAAGC,mEAAgC,CAACJ,iBAAiB,CAAC;EAExE,OAAO;IACL,GAAGV,UAAU;IACbe,QAAQ,EAAEP,iBAAiB;IAC3B;IACAQ,qBAAqB,EAAE;MACrBxB,cAAc,EAAEqB,YAAY,CAACrB,cAAc;MAC3CC,cAAc,EAAE,CAACG,QAAuB,EAAEqB,CAAS,KACjDP,iBAAiB,CAACjB,cAAc,CAACyB,SAAS,EAAE;QAAEtB,QAAQ;QAAEQ,KAAK,EAAEa;MAAC,CAAE,CAAC;MACrE1B,eAAe,EAAEmB,iBAAiB,CAACS,UAAU;MAC7CzB,uBAAuB,EAAGE,QAAuB,IAAI;QACnD,MAAMwB,GAAG,GAAGV,iBAAiB,CAACW,aAAa,CAACzB,QAAQ,CAAC;QACrD,MAAM0B,KAAK,GACTC,oBAACC,qCAAiB;UAChBC,WAAW,EAAEZ,YAAY,CAACrB,cAAc,CAACI,QAAQ,CAAC;UAClD8B,YAAY,EAAEb,YAAY,CAACrB,cAAc,CAACI,QAAQ;QAAC,EAEtD;QACD,OAAOwB,GAAG,GAAG;UAAEzB,KAAK,EAAEO,eAAe,CAACkB,GAAG,CAAC;UAAEE;QAAK,CAAE,GAAG,EAAE;MAC1D,CAAC;MACDzB,iBAAiB,EAAGD,QAAuB,IAAI;QAC7C,MAAMwB,GAAG,GAAGV,iBAAiB,CAACW,aAAa,CAACzB,QAAQ,CAAC;QACrD,OAAOwB,GAAG,GAAG;UAAEzB,KAAK,EAAEO,eAAe,CAACkB,GAAG;QAAC,CAAE,GAAG,EAAE;MACnD;;GAEH;AACH","names":["exports","getColumnWidths","getOnMouseDown","setColumnWidth","getTableHeaderCellProps","style","columnId","getTableCellProps","useTableColumnSizing_unstable","params","tableState","useTableColumnSizingState","getColumnStyles","column","width","minWidth","maxWidth","columns","measureElementRef","useMeasureElement_1","columnResizeState","useTableColumnResizeState_1","containerWidthOffset","mouseHandler","useTableColumnResizeMouseHandler_1","tableRef","columnSizing_unstable","w","undefined","getColumns","col","getColumnById","aside","React","TableResizeHandle_1","onMouseDown","onTouchStart"],"sourceRoot":"../src/","sources":["packages/react-components/react-table/src/hooks/useTableColumnSizing.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  TableColumnId,\n  ColumnWidthState,\n  TableColumnSizingState,\n  TableFeaturesState,\n  UseTableColumnSizingParams,\n} from './types';\nimport { useTableColumnResizeState } from './useTableColumnResizeState';\nimport { useTableColumnResizeMouseHandler } from './useTableColumnResizeMouseHandler';\nimport { useMeasureElement } from './useMeasureElement';\nimport { TableResizeHandle } from '../TableResizeHandle';\n\nexport const defaultColumnSizingState: TableColumnSizingState = {\n  getColumnWidths: () => [],\n  getOnMouseDown: () => () => null,\n  setColumnWidth: () => null,\n  getTableHeaderCellProps: () => ({ style: {}, columnId: '' }),\n  getTableCellProps: () => ({ style: {}, columnId: '' }),\n};\n\nexport function useTableColumnSizing_unstable<TItem>(params?: UseTableColumnSizingParams) {\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>) => useTableColumnSizingState(tableState, params);\n}\n\nfunction getColumnStyles(column: ColumnWidthState): React.CSSProperties {\n  const width = column.width;\n\n  return {\n    // native styles\n    width,\n    // non-native element styles (flex layout)\n    minWidth: width,\n    maxWidth: width,\n  };\n}\n\nfunction useTableColumnSizingState<TItem>(\n  tableState: TableFeaturesState<TItem>,\n  params?: UseTableColumnSizingParams,\n): TableFeaturesState<TItem> {\n  const { columns } = tableState;\n\n  // Gets the container width\n  const { width, measureElementRef } = useMeasureElement();\n  // Creates the state based on columns and available containerWidth\n  const columnResizeState = useTableColumnResizeState(columns, width + (params?.containerWidthOffset || 0), params);\n  // Creates the mouse handler and attaches the state to it\n  const mouseHandler = useTableColumnResizeMouseHandler(columnResizeState);\n\n  return {\n    ...tableState,\n    tableRef: measureElementRef,\n    // eslint-disable-next-line @typescript-eslint/naming-convention\n    columnSizing_unstable: {\n      getOnMouseDown: mouseHandler.getOnMouseDown,\n      setColumnWidth: (columnId: TableColumnId, w: number) =>\n        columnResizeState.setColumnWidth(undefined, { columnId, width: w }),\n      getColumnWidths: columnResizeState.getColumns,\n      getTableHeaderCellProps: (columnId: TableColumnId) => {\n        const col = columnResizeState.getColumnById(columnId);\n        const aside = (\n          <TableResizeHandle\n            onMouseDown={mouseHandler.getOnMouseDown(columnId)}\n            onTouchStart={mouseHandler.getOnMouseDown(columnId)}\n          />\n        );\n        return col ? { style: getColumnStyles(col), aside } : {};\n      },\n      getTableCellProps: (columnId: TableColumnId) => {\n        const col = columnResizeState.getColumnById(columnId);\n        return col ? { style: getColumnStyles(col) } : {};\n      },\n    },\n  };\n}\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-table",
-  "version": "9.0.2",
+  "version": "9.0.3",
   "description": "React components for building web experiences",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -33,16 +33,16 @@
   },
   "dependencies": {
     "@fluentui/keyboard-keys": "^9.0.1",
-    "@fluentui/react-aria": "^9.3.9",
-    "@fluentui/react-avatar": "^9.3.5",
-    "@fluentui/react-checkbox": "^9.0.27",
-    "@fluentui/react-context-selector": "^9.1.9",
+    "@fluentui/react-aria": "^9.3.10",
+    "@fluentui/react-avatar": "^9.3.6",
+    "@fluentui/react-checkbox": "^9.0.28",
+    "@fluentui/react-context-selector": "^9.1.10",
     "@fluentui/react-icons": "^2.0.175",
-    "@fluentui/react-radio": "^9.0.25",
+    "@fluentui/react-radio": "^9.0.26",
     "@fluentui/react-shared-contexts": "^9.2.0",
-    "@fluentui/react-tabster": "^9.5.2",
+    "@fluentui/react-tabster": "^9.5.3",
     "@fluentui/react-theme": "^9.1.5",
-    "@fluentui/react-utilities": "^9.5.3",
+    "@fluentui/react-utilities": "^9.6.0",
     "@griffel/react": "^1.5.2",
     "tslib": "^2.1.0"
   },