@fluentui/react-table 9.2.12 → 9.3.0

package/lib/hooks/index.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["../../src/hooks/index.ts"],"sourcesContent":["export * from './types';\nexport * from './useTableFeatures';\nexport * from './useTableSort';\nexport * from './useTableSelection';\nexport * from './createColumn';\nexport * from './useTableColumnSizing';\n"],"mappings":"AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc"}
+{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './types';\nexport * from './useTableFeatures';\nexport * from './useTableSort';\nexport * from './useTableSelection';\nexport * from './createColumn';\nexport * from './useTableColumnSizing';\n"],"names":[],"mappings":"AAAA,cAAc,UAAU;AACxB,cAAc,qBAAqB;AACnC,cAAc,iBAAiB;AAC/B,cAAc,sBAAsB;AACpC,cAAc,iBAAiB;AAC/B,cAAc,yBAAyB"}

package/lib/hooks/selectionManager.js

@@ -1,74 +1,77 @@
 import * as React from 'react';
-export function createSelectionManager(mode, onSelectionChange = () => undefined) {
-  const managerFactory = mode === 'multiselect' ? createMultipleSelectionManager : createSingleSelectionManager;
-  return managerFactory(onSelectionChange);
+export function createSelectionManager(mode, onSelectionChange = ()=>undefined) {
+    const managerFactory = mode === 'multiselect' ? createMultipleSelectionManager : createSingleSelectionManager;
+    return managerFactory(onSelectionChange);
 }
 function createMultipleSelectionManager(onSelectionChange) {
-  const toggleAllItems = (e, itemIds, selectedItems) => {
-    const allItemsSelected = itemIds.every(itemId => selectedItems.has(itemId));
-    if (allItemsSelected) {
-      selectedItems.clear();
-    } else {
-      itemIds.forEach(itemId => selectedItems.add(itemId));
-    }
-    onSelectionChange(e, new Set(selectedItems));
-  };
-  const toggleItem = (e, itemId, selectedItems) => {
-    if (selectedItems.has(itemId)) {
-      selectedItems.delete(itemId);
-    } else {
-      selectedItems.add(itemId);
-    }
-    onSelectionChange(e, new Set(selectedItems));
-  };
-  const selectItem = (e, itemId, selectedItems) => {
-    selectedItems.add(itemId);
-    onSelectionChange(e, new Set(selectedItems));
-  };
-  const deselectItem = (e, itemId, selectedItems) => {
-    selectedItems.delete(itemId);
-    onSelectionChange(e, new Set(selectedItems));
-  };
-  const clearItems = e => {
-    onSelectionChange(e, new Set());
-  };
-  const isSelected = (itemId, selectedItems) => {
-    return selectedItems.has(itemId);
-  };
-  return {
-    toggleItem,
-    selectItem,
-    deselectItem,
-    clearItems,
-    isSelected,
-    toggleAllItems
-  };
+    const toggleAllItems = (e, itemIds, selectedItems)=>{
+        const allItemsSelected = itemIds.every((itemId)=>selectedItems.has(itemId));
+        if (allItemsSelected) {
+            selectedItems.clear();
+        } else {
+            itemIds.forEach((itemId)=>selectedItems.add(itemId));
+        }
+        onSelectionChange(e, new Set(selectedItems));
+    };
+    const toggleItem = (e, itemId, selectedItems)=>{
+        if (selectedItems.has(itemId)) {
+            selectedItems.delete(itemId);
+        } else {
+            selectedItems.add(itemId);
+        }
+        onSelectionChange(e, new Set(selectedItems));
+    };
+    const selectItem = (e, itemId, selectedItems)=>{
+        selectedItems.add(itemId);
+        onSelectionChange(e, new Set(selectedItems));
+    };
+    const deselectItem = (e, itemId, selectedItems)=>{
+        selectedItems.delete(itemId);
+        onSelectionChange(e, new Set(selectedItems));
+    };
+    const clearItems = (e)=>{
+        onSelectionChange(e, new Set());
+    };
+    const isSelected = (itemId, selectedItems)=>{
+        return selectedItems.has(itemId);
+    };
+    return {
+        toggleItem,
+        selectItem,
+        deselectItem,
+        clearItems,
+        isSelected,
+        toggleAllItems
+    };
 }
 function createSingleSelectionManager(onSelectionChange) {
-  const toggleItem = (e, itemId) => {
-    onSelectionChange(e, new Set([itemId]));
-  };
-  const clearItems = e => {
-    onSelectionChange(e, new Set());
-  };
-  const isSelected = (itemId, selectedItems) => {
-    return selectedItems.has(itemId);
-  };
-  const selectItem = (e, itemId) => {
-    onSelectionChange(e, new Set([itemId]));
-  };
-  return {
-    deselectItem: clearItems,
-    selectItem,
-    toggleAllItems: () => {
-      if (process.env.NODE_ENV !== 'production') {
-        throw new Error('[react-table]: `toggleAllItems` should not be used in single selection mode');
-      }
-      return undefined;
-    },
-    toggleItem,
-    clearItems,
-    isSelected
-  };
+    const toggleItem = (e, itemId)=>{
+        onSelectionChange(e, new Set([
+            itemId
+        ]));
+    };
+    const clearItems = (e)=>{
+        onSelectionChange(e, new Set());
+    };
+    const isSelected = (itemId, selectedItems)=>{
+        return selectedItems.has(itemId);
+    };
+    const selectItem = (e, itemId)=>{
+        onSelectionChange(e, new Set([
+            itemId
+        ]));
+    };
+    return {
+        deselectItem: clearItems,
+        selectItem,
+        toggleAllItems: ()=>{
+            if (process.env.NODE_ENV !== 'production') {
+                throw new Error('[react-table]: `toggleAllItems` should not be used in single selection mode');
+            }
+            return undefined;
+        },
+        toggleItem,
+        clearItems,
+        isSelected
+    };
 }
-//# sourceMappingURL=selectionManager.js.map

package/lib/hooks/selectionManager.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","createSelectionManager","mode","onSelectionChange","undefined","managerFactory","createMultipleSelectionManager","createSingleSelectionManager","toggleAllItems","e","itemIds","selectedItems","allItemsSelected","every","itemId","has","clear","forEach","add","Set","toggleItem","delete","selectItem","deselectItem","clearItems","isSelected","process","env","NODE_ENV","Error"],"sources":["../../src/hooks/selectionManager.ts"],"sourcesContent":["import * as React from 'react';\nimport { SelectionMode } from './types';\n\ntype OnSelectionChangeCallback = (e: React.SyntheticEvent, selectedItems: Set<SelectionItemId>) => void;\n\nexport interface SelectionManager {\n  toggleItem(e: React.SyntheticEvent, id: SelectionItemId, selectedItems: Set<SelectionItemId>): void;\n  selectItem(e: React.SyntheticEvent, id: SelectionItemId, selectedItems: Set<SelectionItemId>): void;\n  deselectItem(e: React.SyntheticEvent, id: SelectionItemId, selectedItems: Set<SelectionItemId>): void;\n  clearItems(e: React.SyntheticEvent): void;\n  isSelected(id: SelectionItemId, selectedItems: Set<SelectionItemId>): boolean;\n  toggleAllItems(e: React.SyntheticEvent, itemIds: SelectionItemId[], selectedItems: Set<SelectionItemId>): void;\n}\n\nexport type SelectionItemId = string | number;\n\nexport function createSelectionManager(\n  mode: SelectionMode,\n  onSelectionChange: OnSelectionChangeCallback = () => undefined,\n): SelectionManager {\n  const managerFactory = mode === 'multiselect' ? createMultipleSelectionManager : createSingleSelectionManager;\n\n  return managerFactory(onSelectionChange);\n}\n\nfunction createMultipleSelectionManager(onSelectionChange: OnSelectionChangeCallback): SelectionManager {\n  const toggleAllItems: SelectionManager['toggleAllItems'] = (e, itemIds, selectedItems) => {\n    const allItemsSelected = itemIds.every(itemId => selectedItems.has(itemId));\n\n    if (allItemsSelected) {\n      selectedItems.clear();\n    } else {\n      itemIds.forEach(itemId => selectedItems.add(itemId));\n    }\n\n    onSelectionChange(e, new Set(selectedItems));\n  };\n\n  const toggleItem: SelectionManager['toggleItem'] = (e, itemId, selectedItems) => {\n    if (selectedItems.has(itemId)) {\n      selectedItems.delete(itemId);\n    } else {\n      selectedItems.add(itemId);\n    }\n\n    onSelectionChange(e, new Set(selectedItems));\n  };\n\n  const selectItem: SelectionManager['selectItem'] = (e, itemId, selectedItems) => {\n    selectedItems.add(itemId);\n    onSelectionChange(e, new Set(selectedItems));\n  };\n\n  const deselectItem: SelectionManager['deselectItem'] = (e, itemId, selectedItems) => {\n    selectedItems.delete(itemId);\n    onSelectionChange(e, new Set(selectedItems));\n  };\n\n  const clearItems: SelectionManager['clearItems'] = e => {\n    onSelectionChange(e, new Set());\n  };\n\n  const isSelected = (itemId: SelectionItemId, selectedItems: Set<SelectionItemId>) => {\n    return selectedItems.has(itemId);\n  };\n\n  return {\n    toggleItem,\n    selectItem,\n    deselectItem,\n    clearItems,\n    isSelected,\n    toggleAllItems,\n  };\n}\n\nfunction createSingleSelectionManager(onSelectionChange: OnSelectionChangeCallback): SelectionManager {\n  const toggleItem: SelectionManager['toggleItem'] = (e, itemId) => {\n    onSelectionChange(e, new Set([itemId]));\n  };\n\n  const clearItems: SelectionManager['clearItems'] = e => {\n    onSelectionChange(e, new Set<SelectionItemId>());\n  };\n\n  const isSelected = (itemId: SelectionItemId, selectedItems: Set<SelectionItemId>) => {\n    return selectedItems.has(itemId);\n  };\n\n  const selectItem: SelectionManager['selectItem'] = (e, itemId) => {\n    onSelectionChange(e, new Set([itemId]));\n  };\n\n  return {\n    deselectItem: clearItems,\n    selectItem,\n    toggleAllItems: () => {\n      if (process.env.NODE_ENV !== 'production') {\n        throw new Error('[react-table]: `toggleAllItems` should not be used in single selection mode');\n      }\n\n      return undefined;\n    },\n    toggleItem,\n    clearItems,\n    isSelected,\n  };\n}\n"],"mappings":"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"}
+{"version":3,"sources":["selectionManager.ts"],"sourcesContent":["import * as React from 'react';\nimport { SelectionMode } from './types';\n\ntype OnSelectionChangeCallback = (e: React.SyntheticEvent, selectedItems: Set<SelectionItemId>) => void;\n\nexport interface SelectionManager {\n  toggleItem(e: React.SyntheticEvent, id: SelectionItemId, selectedItems: Set<SelectionItemId>): void;\n  selectItem(e: React.SyntheticEvent, id: SelectionItemId, selectedItems: Set<SelectionItemId>): void;\n  deselectItem(e: React.SyntheticEvent, id: SelectionItemId, selectedItems: Set<SelectionItemId>): void;\n  clearItems(e: React.SyntheticEvent): void;\n  isSelected(id: SelectionItemId, selectedItems: Set<SelectionItemId>): boolean;\n  toggleAllItems(e: React.SyntheticEvent, itemIds: SelectionItemId[], selectedItems: Set<SelectionItemId>): void;\n}\n\nexport type SelectionItemId = string | number;\n\nexport function createSelectionManager(\n  mode: SelectionMode,\n  onSelectionChange: OnSelectionChangeCallback = () => undefined,\n): SelectionManager {\n  const managerFactory = mode === 'multiselect' ? createMultipleSelectionManager : createSingleSelectionManager;\n\n  return managerFactory(onSelectionChange);\n}\n\nfunction createMultipleSelectionManager(onSelectionChange: OnSelectionChangeCallback): SelectionManager {\n  const toggleAllItems: SelectionManager['toggleAllItems'] = (e, itemIds, selectedItems) => {\n    const allItemsSelected = itemIds.every(itemId => selectedItems.has(itemId));\n\n    if (allItemsSelected) {\n      selectedItems.clear();\n    } else {\n      itemIds.forEach(itemId => selectedItems.add(itemId));\n    }\n\n    onSelectionChange(e, new Set(selectedItems));\n  };\n\n  const toggleItem: SelectionManager['toggleItem'] = (e, itemId, selectedItems) => {\n    if (selectedItems.has(itemId)) {\n      selectedItems.delete(itemId);\n    } else {\n      selectedItems.add(itemId);\n    }\n\n    onSelectionChange(e, new Set(selectedItems));\n  };\n\n  const selectItem: SelectionManager['selectItem'] = (e, itemId, selectedItems) => {\n    selectedItems.add(itemId);\n    onSelectionChange(e, new Set(selectedItems));\n  };\n\n  const deselectItem: SelectionManager['deselectItem'] = (e, itemId, selectedItems) => {\n    selectedItems.delete(itemId);\n    onSelectionChange(e, new Set(selectedItems));\n  };\n\n  const clearItems: SelectionManager['clearItems'] = e => {\n    onSelectionChange(e, new Set());\n  };\n\n  const isSelected = (itemId: SelectionItemId, selectedItems: Set<SelectionItemId>) => {\n    return selectedItems.has(itemId);\n  };\n\n  return {\n    toggleItem,\n    selectItem,\n    deselectItem,\n    clearItems,\n    isSelected,\n    toggleAllItems,\n  };\n}\n\nfunction createSingleSelectionManager(onSelectionChange: OnSelectionChangeCallback): SelectionManager {\n  const toggleItem: SelectionManager['toggleItem'] = (e, itemId) => {\n    onSelectionChange(e, new Set([itemId]));\n  };\n\n  const clearItems: SelectionManager['clearItems'] = e => {\n    onSelectionChange(e, new Set<SelectionItemId>());\n  };\n\n  const isSelected = (itemId: SelectionItemId, selectedItems: Set<SelectionItemId>) => {\n    return selectedItems.has(itemId);\n  };\n\n  const selectItem: SelectionManager['selectItem'] = (e, itemId) => {\n    onSelectionChange(e, new Set([itemId]));\n  };\n\n  return {\n    deselectItem: clearItems,\n    selectItem,\n    toggleAllItems: () => {\n      if (process.env.NODE_ENV !== 'production') {\n        throw new Error('[react-table]: `toggleAllItems` should not be used in single selection mode');\n      }\n\n      return undefined;\n    },\n    toggleItem,\n    clearItems,\n    isSelected,\n  };\n}\n"],"names":["React","createSelectionManager","mode","onSelectionChange","undefined","managerFactory","createMultipleSelectionManager","createSingleSelectionManager","toggleAllItems","e","itemIds","selectedItems","allItemsSelected","every","itemId","has","clear","forEach","add","Set","toggleItem","delete","selectItem","deselectItem","clearItems","isSelected","process","env","NODE_ENV","Error"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAgB/B,OAAO,SAASC,uBACdC,IAAmB,EACnBC,oBAA+C,IAAMC,SAAS,EAC5C;IAClB,MAAMC,iBAAiBH,SAAS,gBAAgBI,iCAAiCC,4BAA4B;IAE7G,OAAOF,eAAeF;AACxB,CAAC;AAED,SAASG,+BAA+BH,iBAA4C,EAAoB;IACtG,MAAMK,iBAAqD,CAACC,GAAGC,SAASC,gBAAkB;QACxF,MAAMC,mBAAmBF,QAAQG,KAAK,CAACC,CAAAA,SAAUH,cAAcI,GAAG,CAACD;QAEnE,IAAIF,kBAAkB;YACpBD,cAAcK,KAAK;QACrB,OAAO;YACLN,QAAQO,OAAO,CAACH,CAAAA,SAAUH,cAAcO,GAAG,CAACJ;QAC9C,CAAC;QAEDX,kBAAkBM,GAAG,IAAIU,IAAIR;IAC/B;IAEA,MAAMS,aAA6C,CAACX,GAAGK,QAAQH,gBAAkB;QAC/E,IAAIA,cAAcI,GAAG,CAACD,SAAS;YAC7BH,cAAcU,MAAM,CAACP;QACvB,OAAO;YACLH,cAAcO,GAAG,CAACJ;QACpB,CAAC;QAEDX,kBAAkBM,GAAG,IAAIU,IAAIR;IAC/B;IAEA,MAAMW,aAA6C,CAACb,GAAGK,QAAQH,gBAAkB;QAC/EA,cAAcO,GAAG,CAACJ;QAClBX,kBAAkBM,GAAG,IAAIU,IAAIR;IAC/B;IAEA,MAAMY,eAAiD,CAACd,GAAGK,QAAQH,gBAAkB;QACnFA,cAAcU,MAAM,CAACP;QACrBX,kBAAkBM,GAAG,IAAIU,IAAIR;IAC/B;IAEA,MAAMa,aAA6Cf,CAAAA,IAAK;QACtDN,kBAAkBM,GAAG,IAAIU;IAC3B;IAEA,MAAMM,aAAa,CAACX,QAAyBH,gBAAwC;QACnF,OAAOA,cAAcI,GAAG,CAACD;IAC3B;IAEA,OAAO;QACLM;QACAE;QACAC;QACAC;QACAC;QACAjB;IACF;AACF;AAEA,SAASD,6BAA6BJ,iBAA4C,EAAoB;IACpG,MAAMiB,aAA6C,CAACX,GAAGK,SAAW;QAChEX,kBAAkBM,GAAG,IAAIU,IAAI;YAACL;SAAO;IACvC;IAEA,MAAMU,aAA6Cf,CAAAA,IAAK;QACtDN,kBAAkBM,GAAG,IAAIU;IAC3B;IAEA,MAAMM,aAAa,CAACX,QAAyBH,gBAAwC;QACnF,OAAOA,cAAcI,GAAG,CAACD;IAC3B;IAEA,MAAMQ,aAA6C,CAACb,GAAGK,SAAW;QAChEX,kBAAkBM,GAAG,IAAIU,IAAI;YAACL;SAAO;IACvC;IAEA,OAAO;QACLS,cAAcC;QACdF;QACAd,gBAAgB,IAAM;YACpB,IAAIkB,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;gBACzC,MAAM,IAAIC,MAAM,+EAA+E;YACjG,CAAC;YAED,OAAOzB;QACT;QACAgB;QACAI;QACAC;IACF;AACF"}

package/lib/hooks/types.js

@@ -1,2 +1 @@
 import * as React from 'react';
-//# sourceMappingURL=types.js.map

package/lib/hooks/types.js.map

@@ -1 +1 @@
-{"version":3,"names":["React"],"sources":["../../src/hooks/types.ts"],"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?: Iterable<TableRowId>;\n  /**\n   * Used to control row selection\n   */\n  selectedItems?: Iterable<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 type EnableKeyboardModeOnChangeCallback = (columnId: TableColumnId, isKeyboardMode: boolean) => void;\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  enableKeyboardMode: (\n    columnId: TableColumnId,\n    onChange?: EnableKeyboardModeOnChangeCallback,\n  ) => (e: React.MouseEvent | React.TouchEvent) => void;\n}\n\nexport type ColumnResizeState = {\n  getColumnWidth: (columnId: TableColumnId) => number;\n  setColumnWidth: (\n    e: KeyboardEvent | TouchEvent | MouseEvent | undefined,\n    data: { columnId: TableColumnId; width: number },\n  ) => 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?: (\n    e: KeyboardEvent | TouchEvent | MouseEvent | undefined,\n    data: { columnId: TableColumnId; width: number },\n  ) => void;\n  containerWidthOffset?: number;\n};\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW"}
+{"version":3,"sources":["types.ts"],"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?: Iterable<TableRowId>;\n  /**\n   * Used to control row selection\n   */\n  selectedItems?: Iterable<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 type EnableKeyboardModeOnChangeCallback = (columnId: TableColumnId, isKeyboardMode: boolean) => void;\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  enableKeyboardMode: (\n    columnId: TableColumnId,\n    onChange?: EnableKeyboardModeOnChangeCallback,\n  ) => (e: React.MouseEvent | React.TouchEvent) => void;\n}\n\nexport type ColumnResizeState = {\n  getColumnWidth: (columnId: TableColumnId) => number;\n  setColumnWidth: (\n    e: KeyboardEvent | TouchEvent | MouseEvent | undefined,\n    data: { columnId: TableColumnId; width: number },\n  ) => 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?: (\n    e: KeyboardEvent | TouchEvent | MouseEvent | undefined,\n    data: { columnId: TableColumnId; width: number },\n  ) => void;\n  containerWidthOffset?: number;\n};\n"],"names":["React"],"mappings":"AAAA,YAAYA,WAAW,QAAQ"}

package/lib/hooks/useKeyboardResizing.js

@@ -6,93 +6,102 @@ const STEP = 20;
 const PRECISION_MODIFIER = Shift;
 const PRECISION_FACTOR = 1 / 4;
 export function useKeyboardResizing(columnResizeState) {
-  const columnId = React.useRef();
-  const onChangeRef = React.useRef();
-  const addListenerTimeout = React.useRef();
-  const columnResizeStateRef = React.useRef(columnResizeState);
-  React.useEffect(() => {
-    columnResizeStateRef.current = columnResizeState;
-  }, [columnResizeState]);
-  const {
-    targetDocument
-  } = useFluent();
-  const keyboardHandler = useEventCallback(event => {
-    const colId = columnId.current;
-    if (!colId) {
-      return;
-    }
-    const width = columnResizeStateRef.current.getColumnWidth(colId);
-    const precisionModifier = event.getModifierState(PRECISION_MODIFIER);
-    const stopEvent = () => {
-      event.preventDefault();
-      event.stopPropagation();
+    const [columnId, setColumnId] = React.useState();
+    const onChangeRef = React.useRef();
+    const addListenerTimeout = React.useRef();
+    const columnResizeStateRef = React.useRef(columnResizeState);
+    React.useEffect(()=>{
+        columnResizeStateRef.current = columnResizeState;
+    }, [
+        columnResizeState
+    ]);
+    const { targetDocument  } = useFluent();
+    const keyboardHandler = useEventCallback((event)=>{
+        if (!columnId) {
+            return;
+        }
+        const width = columnResizeStateRef.current.getColumnWidth(columnId);
+        const precisionModifier = event.getModifierState(PRECISION_MODIFIER);
+        const stopEvent = ()=>{
+            event.preventDefault();
+            event.stopPropagation();
+        };
+        switch(event.key){
+            case ArrowLeft:
+                stopEvent();
+                columnResizeStateRef.current.setColumnWidth(event, {
+                    columnId,
+                    width: width - (precisionModifier ? STEP * PRECISION_FACTOR : STEP)
+                });
+                return;
+            case ArrowRight:
+                stopEvent();
+                columnResizeStateRef.current.setColumnWidth(event, {
+                    columnId,
+                    width: width + (precisionModifier ? STEP * PRECISION_FACTOR : STEP)
+                });
+                return;
+            case Space:
+            case Enter:
+            case Escape:
+                stopEvent();
+                disableInteractiveMode();
+                break;
+        }
+    });
+    // On component unmout, cancel any timer for adding a listener (if it exists) and remove the listener
+    React.useEffect(()=>{
+        return ()=>{
+            var _targetDocument_defaultView, _targetDocument_defaultView1;
+            targetDocument === null || targetDocument === void 0 ? void 0 : (_targetDocument_defaultView = targetDocument.defaultView) === null || _targetDocument_defaultView === void 0 ? void 0 : _targetDocument_defaultView.clearTimeout(addListenerTimeout.current);
+            targetDocument === null || targetDocument === void 0 ? void 0 : (_targetDocument_defaultView1 = targetDocument.defaultView) === null || _targetDocument_defaultView1 === void 0 ? void 0 : _targetDocument_defaultView1.removeEventListener('keydown', keyboardHandler);
+        };
+    }, [
+        keyboardHandler,
+        targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.defaultView
+    ]);
+    const enableInteractiveMode = React.useCallback((colId)=>{
+        var _onChangeRef_current, _targetDocument_defaultView;
+        setColumnId(colId);
+        (_onChangeRef_current = onChangeRef.current) === null || _onChangeRef_current === void 0 ? void 0 : _onChangeRef_current.call(onChangeRef, colId, true);
+        // Create the listener in the next tick, because the event that triggered this is still propagating
+        // when Enter was pressed and would be caught in the keyboardHandler, disabling the keyboard mode immediately.
+        // No idea why this is happening, but this is a working workaround.
+        // Tracked here: https://github.com/microsoft/fluentui/issues/27177
+        addListenerTimeout.current = targetDocument === null || targetDocument === void 0 ? void 0 : (_targetDocument_defaultView = targetDocument.defaultView) === null || _targetDocument_defaultView === void 0 ? void 0 : _targetDocument_defaultView.setTimeout(()=>{
+            var _targetDocument_defaultView;
+            targetDocument === null || targetDocument === void 0 ? void 0 : (_targetDocument_defaultView = targetDocument.defaultView) === null || _targetDocument_defaultView === void 0 ? void 0 : _targetDocument_defaultView.addEventListener('keydown', keyboardHandler);
+        }, 0);
+    }, [
+        keyboardHandler,
+        targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.defaultView
+    ]);
+    const disableInteractiveMode = React.useCallback(()=>{
+        var _targetDocument_defaultView;
+        if (columnId) {
+            var _onChangeRef_current;
+            (_onChangeRef_current = onChangeRef.current) === null || _onChangeRef_current === void 0 ? void 0 : _onChangeRef_current.call(onChangeRef, columnId, false);
+        }
+        setColumnId(undefined);
+        targetDocument === null || targetDocument === void 0 ? void 0 : (_targetDocument_defaultView = targetDocument.defaultView) === null || _targetDocument_defaultView === void 0 ? void 0 : _targetDocument_defaultView.removeEventListener('keydown', keyboardHandler);
+    }, [
+        columnId,
+        keyboardHandler,
+        targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.defaultView
+    ]);
+    const toggleInteractiveMode = (colId, onChange)=>{
+        onChangeRef.current = onChange;
+        if (!columnId) {
+            enableInteractiveMode(colId);
+        } else if (colId && columnId !== colId) {
+            setColumnId(colId);
+            onChange === null || onChange === void 0 ? void 0 : onChange(columnId, true);
+        } else {
+            disableInteractiveMode();
+        }
     };
-    switch (event.key) {
-      case ArrowLeft:
-        stopEvent();
-        columnResizeStateRef.current.setColumnWidth(event, {
-          columnId: colId,
-          width: width - (precisionModifier ? STEP * PRECISION_FACTOR : STEP)
-        });
-        return;
-      case ArrowRight:
-        stopEvent();
-        columnResizeStateRef.current.setColumnWidth(event, {
-          columnId: colId,
-          width: width + (precisionModifier ? STEP * PRECISION_FACTOR : STEP)
-        });
-        return;
-      case Space:
-      case Enter:
-      case Escape:
-        stopEvent();
-        disableInteractiveMode();
-        break;
-    }
-  });
-  // On component unmout, cancel any timer for adding a listener (if it exists) and remove the listener
-  React.useEffect(() => {
-    return () => {
-      var _targetDocument_defaultView, _targetDocument_defaultView1;
-      targetDocument === null || targetDocument === void 0 ? void 0 : (_targetDocument_defaultView = targetDocument.defaultView) === null || _targetDocument_defaultView === void 0 ? void 0 : _targetDocument_defaultView.clearTimeout(addListenerTimeout.current);
-      targetDocument === null || targetDocument === void 0 ? void 0 : (_targetDocument_defaultView1 = targetDocument.defaultView) === null || _targetDocument_defaultView1 === void 0 ? void 0 : _targetDocument_defaultView1.removeEventListener('keydown', keyboardHandler);
+    return {
+        toggleInteractiveMode,
+        columnId
     };
-  }, [keyboardHandler, targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.defaultView]);
-  const enableInteractiveMode = React.useCallback(colId => {
-    var _onChangeRef_current, _targetDocument_defaultView;
-    columnId.current = colId;
-    (_onChangeRef_current = onChangeRef.current) === null || _onChangeRef_current === void 0 ? void 0 : _onChangeRef_current.call(onChangeRef, colId, true);
-    // Create the listener in the next tick, because the event that triggered this is still propagating
-    // when Enter was pressed and would be caught in the keyboardHandler, disabling the keyboard mode immediately.
-    // No idea why this is happening, but this is a working workaround.
-    // Tracked here: https://github.com/microsoft/fluentui/issues/27177
-    addListenerTimeout.current = targetDocument === null || targetDocument === void 0 ? void 0 : (_targetDocument_defaultView = targetDocument.defaultView) === null || _targetDocument_defaultView === void 0 ? void 0 : _targetDocument_defaultView.setTimeout(() => {
-      var _targetDocument_defaultView;
-      targetDocument === null || targetDocument === void 0 ? void 0 : (_targetDocument_defaultView = targetDocument.defaultView) === null || _targetDocument_defaultView === void 0 ? void 0 : _targetDocument_defaultView.addEventListener('keydown', keyboardHandler);
-    }, 0);
-  }, [keyboardHandler, targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.defaultView]);
-  const disableInteractiveMode = React.useCallback(() => {
-    var _targetDocument_defaultView;
-    if (columnId.current) {
-      var _onChangeRef_current;
-      (_onChangeRef_current = onChangeRef.current) === null || _onChangeRef_current === void 0 ? void 0 : _onChangeRef_current.call(onChangeRef, columnId.current, false);
-    }
-    columnId.current = undefined;
-    targetDocument === null || targetDocument === void 0 ? void 0 : (_targetDocument_defaultView = targetDocument.defaultView) === null || _targetDocument_defaultView === void 0 ? void 0 : _targetDocument_defaultView.removeEventListener('keydown', keyboardHandler);
-  }, [keyboardHandler, targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.defaultView]);
-  const toggleInteractiveMode = (colId, onChange) => {
-    onChangeRef.current = onChange;
-    if (!columnId.current) {
-      enableInteractiveMode(colId);
-    } else if (colId && columnId.current !== colId) {
-      columnId.current = colId;
-      onChange === null || onChange === void 0 ? void 0 : onChange(columnId.current, true);
-    } else {
-      disableInteractiveMode();
-    }
-  };
-  return {
-    toggleInteractiveMode
-  };
 }
-//# sourceMappingURL=useKeyboardResizing.js.map

package/lib/hooks/useKeyboardResizing.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","ArrowLeft","ArrowRight","Enter","Escape","Shift","Space","useEventCallback","useFluent_unstable","useFluent","STEP","PRECISION_MODIFIER","PRECISION_FACTOR","useKeyboardResizing","columnResizeState","columnId","useRef","onChangeRef","addListenerTimeout","columnResizeStateRef","useEffect","current","targetDocument","keyboardHandler","event","colId","width","getColumnWidth","precisionModifier","getModifierState","stopEvent","preventDefault","stopPropagation","key","setColumnWidth","disableInteractiveMode","_targetDocument_defaultView","_targetDocument_defaultView1","defaultView","clearTimeout","removeEventListener","enableInteractiveMode","useCallback","_onChangeRef_current","call","setTimeout","addEventListener","undefined","toggleInteractiveMode","onChange"],"sources":["../../src/hooks/useKeyboardResizing.ts"],"sourcesContent":["import * as React from 'react';\nimport { ArrowLeft, ArrowRight, Enter, Escape, Shift, Space } from '@fluentui/keyboard-keys';\nimport { useEventCallback } from '@fluentui/react-utilities';\nimport { ColumnResizeState, EnableKeyboardModeOnChangeCallback, TableColumnId } from './types';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\n\nconst STEP = 20;\nconst PRECISION_MODIFIER = Shift;\nconst PRECISION_FACTOR = 1 / 4;\n\nexport function useKeyboardResizing(columnResizeState: ColumnResizeState) {\n  const columnId = React.useRef<TableColumnId>();\n  const onChangeRef = React.useRef<EnableKeyboardModeOnChangeCallback>();\n  const addListenerTimeout = React.useRef<number>();\n\n  const columnResizeStateRef = React.useRef<ColumnResizeState>(columnResizeState);\n  React.useEffect(() => {\n    columnResizeStateRef.current = columnResizeState;\n  }, [columnResizeState]);\n\n  const { targetDocument } = useFluent();\n\n  const keyboardHandler = useEventCallback((event: KeyboardEvent) => {\n    const colId = columnId.current;\n\n    if (!colId) {\n      return;\n    }\n\n    const width = columnResizeStateRef.current.getColumnWidth(colId);\n    const precisionModifier = event.getModifierState(PRECISION_MODIFIER);\n\n    const stopEvent = () => {\n      event.preventDefault();\n      event.stopPropagation();\n    };\n\n    switch (event.key) {\n      case ArrowLeft:\n        stopEvent();\n        columnResizeStateRef.current.setColumnWidth(event, {\n          columnId: colId,\n          width: width - (precisionModifier ? STEP * PRECISION_FACTOR : STEP),\n        });\n        return;\n\n      case ArrowRight:\n        stopEvent();\n        columnResizeStateRef.current.setColumnWidth(event, {\n          columnId: colId,\n          width: width + (precisionModifier ? STEP * PRECISION_FACTOR : STEP),\n        });\n        return;\n\n      case Space:\n      case Enter:\n      case Escape:\n        stopEvent();\n        disableInteractiveMode();\n        break;\n    }\n  });\n\n  // On component unmout, cancel any timer for adding a listener (if it exists) and remove the listener\n  React.useEffect(\n    () => () => {\n      targetDocument?.defaultView?.clearTimeout(addListenerTimeout.current);\n      targetDocument?.defaultView?.removeEventListener('keydown', keyboardHandler);\n    },\n    [keyboardHandler, targetDocument?.defaultView],\n  );\n\n  const enableInteractiveMode = React.useCallback(\n    (colId: TableColumnId) => {\n      columnId.current = colId;\n      onChangeRef.current?.(colId, true);\n      // Create the listener in the next tick, because the event that triggered this is still propagating\n      // when Enter was pressed and would be caught in the keyboardHandler, disabling the keyboard mode immediately.\n      // No idea why this is happening, but this is a working workaround.\n      // Tracked here: https://github.com/microsoft/fluentui/issues/27177\n      addListenerTimeout.current = targetDocument?.defaultView?.setTimeout(() => {\n        targetDocument?.defaultView?.addEventListener('keydown', keyboardHandler);\n      }, 0);\n    },\n    [keyboardHandler, targetDocument?.defaultView],\n  );\n\n  const disableInteractiveMode = React.useCallback(() => {\n    if (columnId.current) {\n      onChangeRef.current?.(columnId.current, false);\n    }\n    columnId.current = undefined;\n    targetDocument?.defaultView?.removeEventListener('keydown', keyboardHandler);\n  }, [keyboardHandler, targetDocument?.defaultView]);\n\n  const toggleInteractiveMode = (colId: TableColumnId, onChange?: EnableKeyboardModeOnChangeCallback) => {\n    onChangeRef.current = onChange;\n    if (!columnId.current) {\n      enableInteractiveMode(colId);\n    } else if (colId && columnId.current !== colId) {\n      columnId.current = colId;\n      onChange?.(columnId.current, true);\n    } else {\n      disableInteractiveMode();\n    }\n  };\n\n  return {\n    toggleInteractiveMode,\n  };\n}\n"],"mappings":"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"}
+{"version":3,"sources":["useKeyboardResizing.ts"],"sourcesContent":["import * as React from 'react';\nimport { ArrowLeft, ArrowRight, Enter, Escape, Shift, Space } from '@fluentui/keyboard-keys';\nimport { useEventCallback } from '@fluentui/react-utilities';\nimport { ColumnResizeState, EnableKeyboardModeOnChangeCallback, TableColumnId } from './types';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\n\nconst STEP = 20;\nconst PRECISION_MODIFIER = Shift;\nconst PRECISION_FACTOR = 1 / 4;\n\nexport function useKeyboardResizing(columnResizeState: ColumnResizeState) {\n  const [columnId, setColumnId] = React.useState<TableColumnId>();\n  const onChangeRef = React.useRef<EnableKeyboardModeOnChangeCallback>();\n  const addListenerTimeout = React.useRef<number>();\n\n  const columnResizeStateRef = React.useRef<ColumnResizeState>(columnResizeState);\n  React.useEffect(() => {\n    columnResizeStateRef.current = columnResizeState;\n  }, [columnResizeState]);\n\n  const { targetDocument } = useFluent();\n\n  const keyboardHandler = useEventCallback((event: KeyboardEvent) => {\n    if (!columnId) {\n      return;\n    }\n\n    const width = columnResizeStateRef.current.getColumnWidth(columnId);\n    const precisionModifier = event.getModifierState(PRECISION_MODIFIER);\n\n    const stopEvent = () => {\n      event.preventDefault();\n      event.stopPropagation();\n    };\n\n    switch (event.key) {\n      case ArrowLeft:\n        stopEvent();\n        columnResizeStateRef.current.setColumnWidth(event, {\n          columnId,\n          width: width - (precisionModifier ? STEP * PRECISION_FACTOR : STEP),\n        });\n        return;\n\n      case ArrowRight:\n        stopEvent();\n        columnResizeStateRef.current.setColumnWidth(event, {\n          columnId,\n          width: width + (precisionModifier ? STEP * PRECISION_FACTOR : STEP),\n        });\n        return;\n\n      case Space:\n      case Enter:\n      case Escape:\n        stopEvent();\n        disableInteractiveMode();\n        break;\n    }\n  });\n\n  // On component unmout, cancel any timer for adding a listener (if it exists) and remove the listener\n  React.useEffect(\n    () => () => {\n      targetDocument?.defaultView?.clearTimeout(addListenerTimeout.current);\n      targetDocument?.defaultView?.removeEventListener('keydown', keyboardHandler);\n    },\n    [keyboardHandler, targetDocument?.defaultView],\n  );\n\n  const enableInteractiveMode = React.useCallback(\n    (colId: TableColumnId) => {\n      setColumnId(colId);\n      onChangeRef.current?.(colId, true);\n      // Create the listener in the next tick, because the event that triggered this is still propagating\n      // when Enter was pressed and would be caught in the keyboardHandler, disabling the keyboard mode immediately.\n      // No idea why this is happening, but this is a working workaround.\n      // Tracked here: https://github.com/microsoft/fluentui/issues/27177\n      addListenerTimeout.current = targetDocument?.defaultView?.setTimeout(() => {\n        targetDocument?.defaultView?.addEventListener('keydown', keyboardHandler);\n      }, 0);\n    },\n    [keyboardHandler, targetDocument?.defaultView],\n  );\n\n  const disableInteractiveMode = React.useCallback(() => {\n    if (columnId) {\n      onChangeRef.current?.(columnId, false);\n    }\n    setColumnId(undefined);\n    targetDocument?.defaultView?.removeEventListener('keydown', keyboardHandler);\n  }, [columnId, keyboardHandler, targetDocument?.defaultView]);\n\n  const toggleInteractiveMode = (colId: TableColumnId, onChange?: EnableKeyboardModeOnChangeCallback) => {\n    onChangeRef.current = onChange;\n    if (!columnId) {\n      enableInteractiveMode(colId);\n    } else if (colId && columnId !== colId) {\n      setColumnId(colId);\n      onChange?.(columnId, true);\n    } else {\n      disableInteractiveMode();\n    }\n  };\n\n  return {\n    toggleInteractiveMode,\n    columnId,\n  };\n}\n"],"names":["React","ArrowLeft","ArrowRight","Enter","Escape","Shift","Space","useEventCallback","useFluent_unstable","useFluent","STEP","PRECISION_MODIFIER","PRECISION_FACTOR","useKeyboardResizing","columnResizeState","columnId","setColumnId","useState","onChangeRef","useRef","addListenerTimeout","columnResizeStateRef","useEffect","current","targetDocument","keyboardHandler","event","width","getColumnWidth","precisionModifier","getModifierState","stopEvent","preventDefault","stopPropagation","key","setColumnWidth","disableInteractiveMode","defaultView","clearTimeout","removeEventListener","enableInteractiveMode","useCallback","colId","setTimeout","addEventListener","undefined","toggleInteractiveMode","onChange"],"mappings":"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"}

package/lib/hooks/useMeasureElement.js

@@ -6,45 +6,47 @@ import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts
  * Returns
  * `width` - current element width (0 by default),
  * `measureElementRef` - a ref function to be passed as `ref` to the element you want to measure
- */
-export function useMeasureElement() {
-  const [width, setWidth] = React.useState(0);
-  const container = React.useRef(undefined);
-  const {
-    targetDocument
-  } = useFluent();
-  // the handler for resize observer
-  const handleResize = React.useCallback(() => {
-    var _container_current;
-    const containerWidth = (_container_current = container.current) === null || _container_current === void 0 ? void 0 : _container_current.getBoundingClientRect().width;
-    setWidth(containerWidth || 0);
-  }, []);
-  // Keep the reference of ResizeObserver in the state, as it should live through renders
-  const [resizeObserver] = React.useState(canUseDOM() ? new ResizeObserver(handleResize) : undefined);
-  const measureElementRef = React.useCallback(el => {
-    if (!targetDocument || !resizeObserver) {
-      return;
-    }
-    // cleanup previous container
-    if (container.current) {
-      resizeObserver.unobserve(container.current);
-      container.current.remove();
-    }
-    if (el) {
-      container.current = targetDocument.createElement('div');
-      el.insertAdjacentElement('beforebegin', container.current);
-      resizeObserver.observe(container.current);
-      handleResize();
-    }
-  }, [targetDocument, resizeObserver, handleResize]);
-  React.useEffect(() => {
-    return () => {
-      return resizeObserver === null || resizeObserver === void 0 ? void 0 : resizeObserver.disconnect();
+ */ export function useMeasureElement() {
+    const [width, setWidth] = React.useState(0);
+    const container = React.useRef(undefined);
+    const { targetDocument  } = useFluent();
+    // the handler for resize observer
+    const handleResize = React.useCallback(()=>{
+        var _container_current;
+        const containerWidth = (_container_current = container.current) === null || _container_current === void 0 ? void 0 : _container_current.getBoundingClientRect().width;
+        setWidth(containerWidth || 0);
+    }, []);
+    // Keep the reference of ResizeObserver in the state, as it should live through renders
+    const [resizeObserver] = React.useState(canUseDOM() ? new ResizeObserver(handleResize) : undefined);
+    const measureElementRef = React.useCallback((el)=>{
+        if (!targetDocument || !resizeObserver) {
+            return;
+        }
+        // cleanup previous container
+        if (container.current) {
+            resizeObserver.unobserve(container.current);
+            container.current.remove();
+        }
+        if (el) {
+            container.current = targetDocument.createElement('div');
+            el.insertAdjacentElement('beforebegin', container.current);
+            resizeObserver.observe(container.current);
+            handleResize();
+        }
+    }, [
+        targetDocument,
+        resizeObserver,
+        handleResize
+    ]);
+    React.useEffect(()=>{
+        return ()=>{
+            return resizeObserver === null || resizeObserver === void 0 ? void 0 : resizeObserver.disconnect();
+        };
+    }, [
+        resizeObserver
+    ]);
+    return {
+        width,
+        measureElementRef
     };
-  }, [resizeObserver]);
-  return {
-    width,
-    measureElementRef
-  };
 }
-//# sourceMappingURL=useMeasureElement.js.map

package/lib/hooks/useMeasureElement.js.map

@@ -1 +1 @@
-{"version":3,"names":["canUseDOM","React","useFluent_unstable","useFluent","useMeasureElement","width","setWidth","useState","container","useRef","undefined","targetDocument","handleResize","useCallback","_container_current","containerWidth","current","getBoundingClientRect","resizeObserver","ResizeObserver","measureElementRef","el","unobserve","remove","createElement","insertAdjacentElement","observe","useEffect","disconnect"],"sources":["../../src/hooks/useMeasureElement.ts"],"sourcesContent":["import { canUseDOM } from '@fluentui/react-utilities';\nimport * as React from 'react';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\n\n/**\n * Provides a way of reporting element width.\n * Returns\n * `width` - current element width (0 by default),\n * `measureElementRef` - a ref function to be passed as `ref` to the element you want to measure\n */\nexport function useMeasureElement<TElement extends HTMLElement = HTMLElement>() {\n  const [width, setWidth] = React.useState(0);\n  const container = React.useRef<HTMLElement | undefined>(undefined);\n\n  const { targetDocument } = useFluent();\n\n  // the handler for resize observer\n  const handleResize = React.useCallback(() => {\n    const containerWidth = container.current?.getBoundingClientRect().width;\n    setWidth(containerWidth || 0);\n  }, []);\n\n  // Keep the reference of ResizeObserver in the state, as it should live through renders\n  const [resizeObserver] = React.useState(canUseDOM() ? new ResizeObserver(handleResize) : undefined);\n  const measureElementRef = React.useCallback(\n    (el: TElement | null) => {\n      if (!targetDocument || !resizeObserver) {\n        return;\n      }\n\n      // cleanup previous container\n      if (container.current) {\n        resizeObserver.unobserve(container.current);\n        container.current.remove();\n      }\n\n      if (el) {\n        container.current = targetDocument.createElement('div');\n        el.insertAdjacentElement('beforebegin', container.current);\n        resizeObserver.observe(container.current);\n        handleResize();\n      }\n    },\n    [targetDocument, resizeObserver, handleResize],\n  );\n\n  React.useEffect(() => {\n    return () => resizeObserver?.disconnect();\n  }, [resizeObserver]);\n\n  return { width, measureElementRef };\n}\n"],"mappings":"AAAA,SAASA,SAAS,QAAQ;AAC1B,YAAYC,KAAA,MAAW;AACvB,SAASC,kBAAA,IAAsBC,SAAS,QAAQ;AAEhD;;;;;;AAMA,OAAO,SAASC,kBAAA,EAAgE;EAC9E,MAAM,CAACC,KAAA,EAAOC,QAAA,CAAS,GAAGL,KAAA,CAAMM,QAAQ,CAAC;EACzC,MAAMC,SAAA,GAAYP,KAAA,CAAMQ,MAAM,CAA0BC,SAAA;EAExD,MAAM;IAAEC;EAAc,CAAE,GAAGR,SAAA;EAE3B;EACA,MAAMS,YAAA,GAAeX,KAAA,CAAMY,WAAW,CAAC,MAAM;QACpBC,kBAAA;IAAvB,MAAMC,cAAA,GAAiB,CAAAD,kBAAA,GAAAN,SAAA,CAAUQ,OAAO,cAAjBF,kBAAA,uBAAAA,kBAAA,CAAmBG,qBAAA,GAAwBZ,KAAK;IACvEC,QAAA,CAASS,cAAA,IAAkB;EAC7B,GAAG,EAAE;EAEL;EACA,MAAM,CAACG,cAAA,CAAe,GAAGjB,KAAA,CAAMM,QAAQ,CAACP,SAAA,KAAc,IAAImB,cAAA,CAAeP,YAAA,IAAgBF,SAAS;EAClG,MAAMU,iBAAA,GAAoBnB,KAAA,CAAMY,WAAW,CACxCQ,EAAA,IAAwB;IACvB,IAAI,CAACV,cAAA,IAAkB,CAACO,cAAA,EAAgB;MACtC;IACF;IAEA;IACA,IAAIV,SAAA,CAAUQ,OAAO,EAAE;MACrBE,cAAA,CAAeI,SAAS,CAACd,SAAA,CAAUQ,OAAO;MAC1CR,SAAA,CAAUQ,OAAO,CAACO,MAAM;IAC1B;IAEA,IAAIF,EAAA,EAAI;MACNb,SAAA,CAAUQ,OAAO,GAAGL,cAAA,CAAea,aAAa,CAAC;MACjDH,EAAA,CAAGI,qBAAqB,CAAC,eAAejB,SAAA,CAAUQ,OAAO;MACzDE,cAAA,CAAeQ,OAAO,CAAClB,SAAA,CAAUQ,OAAO;MACxCJ,YAAA;IACF;EACF,GACA,CAACD,cAAA,EAAgBO,cAAA,EAAgBN,YAAA,CAAa;EAGhDX,KAAA,CAAM0B,SAAS,CAAC,MAAM;IACpB,OAAO;MAAM,OAAAT,cAAA,aAAAA,cAAA,uBAAAA,cAAA,CAAgBU,UAAU;;EACzC,GAAG,CAACV,cAAA,CAAe;EAEnB,OAAO;IAAEb,KAAA;IAAOe;EAAkB;AACpC"}
+{"version":3,"sources":["useMeasureElement.ts"],"sourcesContent":["import { canUseDOM } from '@fluentui/react-utilities';\nimport * as React from 'react';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\n\n/**\n * Provides a way of reporting element width.\n * Returns\n * `width` - current element width (0 by default),\n * `measureElementRef` - a ref function to be passed as `ref` to the element you want to measure\n */\nexport function useMeasureElement<TElement extends HTMLElement = HTMLElement>() {\n  const [width, setWidth] = React.useState(0);\n  const container = React.useRef<HTMLElement | undefined>(undefined);\n\n  const { targetDocument } = useFluent();\n\n  // the handler for resize observer\n  const handleResize = React.useCallback(() => {\n    const containerWidth = container.current?.getBoundingClientRect().width;\n    setWidth(containerWidth || 0);\n  }, []);\n\n  // Keep the reference of ResizeObserver in the state, as it should live through renders\n  const [resizeObserver] = React.useState(canUseDOM() ? new ResizeObserver(handleResize) : undefined);\n  const measureElementRef = React.useCallback(\n    (el: TElement | null) => {\n      if (!targetDocument || !resizeObserver) {\n        return;\n      }\n\n      // cleanup previous container\n      if (container.current) {\n        resizeObserver.unobserve(container.current);\n        container.current.remove();\n      }\n\n      if (el) {\n        container.current = targetDocument.createElement('div');\n        el.insertAdjacentElement('beforebegin', container.current);\n        resizeObserver.observe(container.current);\n        handleResize();\n      }\n    },\n    [targetDocument, resizeObserver, handleResize],\n  );\n\n  React.useEffect(() => {\n    return () => resizeObserver?.disconnect();\n  }, [resizeObserver]);\n\n  return { width, measureElementRef };\n}\n"],"names":["canUseDOM","React","useFluent_unstable","useFluent","useMeasureElement","width","setWidth","useState","container","useRef","undefined","targetDocument","handleResize","useCallback","containerWidth","current","getBoundingClientRect","resizeObserver","ResizeObserver","measureElementRef","el","unobserve","remove","createElement","insertAdjacentElement","observe","useEffect","disconnect"],"mappings":"AAAA,SAASA,SAAS,QAAQ,4BAA4B;AACtD,YAAYC,WAAW,QAAQ;AAC/B,SAASC,sBAAsBC,SAAS,QAAQ,kCAAkC;AAElF;;;;;CAKC,GACD,OAAO,SAASC,oBAAgE;IAC9E,MAAM,CAACC,OAAOC,SAAS,GAAGL,MAAMM,QAAQ,CAAC;IACzC,MAAMC,YAAYP,MAAMQ,MAAM,CAA0BC;IAExD,MAAM,EAAEC,eAAc,EAAE,GAAGR;IAE3B,kCAAkC;IAClC,MAAMS,eAAeX,MAAMY,WAAW,CAAC,IAAM;YACpBL;QAAvB,MAAMM,iBAAiBN,CAAAA,qBAAAA,UAAUO,OAAO,cAAjBP,gCAAAA,KAAAA,IAAAA,mBAAmBQ,wBAAwBX,KAAK;QACvEC,SAASQ,kBAAkB;IAC7B,GAAG,EAAE;IAEL,uFAAuF;IACvF,MAAM,CAACG,eAAe,GAAGhB,MAAMM,QAAQ,CAACP,cAAc,IAAIkB,eAAeN,gBAAgBF,SAAS;IAClG,MAAMS,oBAAoBlB,MAAMY,WAAW,CACzC,CAACO,KAAwB;QACvB,IAAI,CAACT,kBAAkB,CAACM,gBAAgB;YACtC;QACF,CAAC;QAED,6BAA6B;QAC7B,IAAIT,UAAUO,OAAO,EAAE;YACrBE,eAAeI,SAAS,CAACb,UAAUO,OAAO;YAC1CP,UAAUO,OAAO,CAACO,MAAM;QAC1B,CAAC;QAED,IAAIF,IAAI;YACNZ,UAAUO,OAAO,GAAGJ,eAAeY,aAAa,CAAC;YACjDH,GAAGI,qBAAqB,CAAC,eAAehB,UAAUO,OAAO;YACzDE,eAAeQ,OAAO,CAACjB,UAAUO,OAAO;YACxCH;QACF,CAAC;IACH,GACA;QAACD;QAAgBM;QAAgBL;KAAa;IAGhDX,MAAMyB,SAAS,CAAC,IAAM;QACpB,OAAO;YAAMT,OAAAA,2BAAAA,4BAAAA,KAAAA,IAAAA,eAAgBU,UAAU;;IACzC,GAAG;QAACV;KAAe;IAEnB,OAAO;QAAEZ;QAAOc;IAAkB;AACpC,CAAC"}