@fluentui/react-table 9.1.2 → 9.2.0

package/lib-commonjs/hooks/useKeyboardResizing.js

@@ -0,0 +1,102 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useKeyboardResizing = void 0;
+const React = /*#__PURE__*/require("react");
+const keyboard_keys_1 = /*#__PURE__*/require("@fluentui/keyboard-keys");
+const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
+const react_shared_contexts_1 = /*#__PURE__*/require("@fluentui/react-shared-contexts");
+const STEP = 20;
+const PRECISION_MODIFIER = keyboard_keys_1.Shift;
+const PRECISION_FACTOR = 1 / 4;
+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
+  } = react_shared_contexts_1.useFluent_unstable();
+  const keyboardHandler = react_utilities_1.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();
+    };
+    switch (event.key) {
+      case keyboard_keys_1.ArrowLeft:
+        stopEvent();
+        columnResizeStateRef.current.setColumnWidth(event, {
+          columnId: colId,
+          width: width - (precisionModifier ? STEP * PRECISION_FACTOR : STEP)
+        });
+        return;
+      case keyboard_keys_1.ArrowRight:
+        stopEvent();
+        columnResizeStateRef.current.setColumnWidth(event, {
+          columnId: colId,
+          width: width + (precisionModifier ? STEP * PRECISION_FACTOR : STEP)
+        });
+        return;
+      case keyboard_keys_1.Space:
+      case keyboard_keys_1.Enter:
+      case keyboard_keys_1.Escape:
+        stopEvent();
+        disableInteractiveMode();
+        break;
+    }
+  });
+  // On component unmout, cancel any timer for adding a listener (if it exists) and remove the listener
+  React.useEffect(() => () => {
+    var _a, _b;
+    (_a = targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.defaultView) === null || _a === void 0 ? void 0 : _a.clearTimeout(addListenerTimeout.current);
+    (_b = targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.defaultView) === null || _b === void 0 ? void 0 : _b.removeEventListener('keydown', keyboardHandler);
+  }, [keyboardHandler, targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.defaultView]);
+  const enableInteractiveMode = React.useCallback(colId => {
+    var _a, _b;
+    columnId.current = colId;
+    (_a = onChangeRef.current) === null || _a === void 0 ? void 0 : _a.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 = (_b = targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.defaultView) === null || _b === void 0 ? void 0 : _b.setTimeout(() => {
+      var _a;
+      (_a = targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.defaultView) === null || _a === void 0 ? void 0 : _a.addEventListener('keydown', keyboardHandler);
+    }, 0);
+  }, [keyboardHandler, targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.defaultView]);
+  const disableInteractiveMode = React.useCallback(() => {
+    var _a, _b;
+    if (columnId.current) {
+      (_a = onChangeRef.current) === null || _a === void 0 ? void 0 : _a.call(onChangeRef, columnId.current, false);
+    }
+    columnId.current = undefined;
+    (_b = targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.defaultView) === null || _b === void 0 ? void 0 : _b.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
+  };
+}
+exports.useKeyboardResizing = useKeyboardResizing;
+//# sourceMappingURL=useKeyboardResizing.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","require","keyboard_keys_1","react_utilities_1","react_shared_contexts_1","STEP","PRECISION_MODIFIER","Shift","PRECISION_FACTOR","useKeyboardResizing","columnResizeState","columnId","useRef","onChangeRef","addListenerTimeout","columnResizeStateRef","useEffect","current","targetDocument","useFluent_unstable","keyboardHandler","useEventCallback","event","colId","width","getColumnWidth","precisionModifier","getModifierState","stopEvent","preventDefault","stopPropagation","key","ArrowLeft","setColumnWidth","ArrowRight","Space","Enter","Escape","disableInteractiveMode","_a","defaultView","clearTimeout","_b","removeEventListener","enableInteractiveMode","useCallback","call","setTimeout","addEventListener","undefined","toggleInteractiveMode","onChange","exports"],"sources":["../src/packages/react-components/react-table/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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"}

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

@@ -1 +1 @@
-{"version":3,"names":["react_utilities_1","require","React","columnResizeUtils_1","createReducer","state","action","type","containerWidth","columnWidthState","adjustColumnWidthsToFitContainer","newS","columnDefinitionsToState","columns","columnSizingOptions","newState","columnId","width","column","getColumnById","newColumnWidthState","setColumnProperty","useTableColumnResizeState","params","onColumnResize","reducer","useMemo","dispatch","useReducer","undefined","useIsomorphicLayoutEffect","setColumnWidth","useEventCallback","event","data","col","Math","max","minWidth","colId","getColumns","getColumnWidth","exports"],"sources":["../src/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 =\n  <T>() =>\n  (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"],"mappings":";;;;;;AAAA,MAAAA,iBAAA,gBAAAC,OAAA;AACA,MAAAC,KAAA,gBAAAD,OAAA;AASA,MAAAE,mBAAA,gBAAAF,OAAA;AAkCA,MAAMG,aAAa,GACjBA,CAAA,KACA,CAACC,KAAwB,EAAEC,MAAkC,KAAuB;EAClF,QAAQA,MAAM,CAACC,IAAI;IACjB,KAAK,yBAAyB;MAC5B,OAAO;QACL,GAAGF,KAAK;QACRG,cAAc,EAAEF,MAAM,CAACE,cAAc;QACrCC,gBAAgB,EAAEN,mBAAA,CAAAO,gCAAgC,CAACL,KAAK,CAACI,gBAAgB,EAAEH,MAAM,CAACE,cAAc;OACjG;IAEH,KAAK,iBAAiB;MACpB,MAAMG,IAAI,GAAGR,mBAAA,CAAAS,wBAAwB,CAACN,MAAM,CAACO,OAAO,EAAER,KAAK,CAACI,gBAAgB,EAAEJ,KAAK,CAACS,mBAAmB,CAAC;MACxG,OAAO;QACL,GAAGT,KAAK;QACRQ,OAAO,EAAEP,MAAM,CAACO,OAAO;QACvBJ,gBAAgB,EAAEN,mBAAA,CAAAO,gCAAgC,CAACC,IAAI,EAAEN,KAAK,CAACG,cAAc;OAC9E;IAEH,KAAK,+BAA+B;MAClC,MAAMO,QAAQ,GAAGZ,mBAAA,CAAAS,wBAAwB,CAACP,KAAK,CAACQ,OAAO,EAAER,KAAK,CAACI,gBAAgB,EAAEH,MAAM,CAACQ,mBAAmB,CAAC;MAC5G,OAAO;QACL,GAAGT,KAAK;QACRS,mBAAmB,EAAER,MAAM,CAACQ,mBAAmB;QAC/CL,gBAAgB,EAAEN,mBAAA,CAAAO,gCAAgC,CAACK,QAAQ,EAAEV,KAAK,CAACG,cAAc;OAClF;IAEH,KAAK,kBAAkB;MACrB,MAAM;QAAEQ,QAAQ;QAAEC;MAAK,CAAE,GAAGX,MAAM;MAClC,MAAM;QAAEE;MAAc,CAAE,GAAGH,KAAK;MAEhC,MAAMa,MAAM,GAAGf,mBAAA,CAAAgB,aAAa,CAACd,KAAK,CAACI,gBAAgB,EAAEO,QAAQ,CAAC;MAC9D,IAAII,mBAAmB,GAAG,CAAC,GAAGf,KAAK,CAACI,gBAAgB,CAAC;MAErD,IAAI,CAACS,MAAM,EAAE;QACX,OAAOb,KAAK;;MAGd;MACAe,mBAAmB,GAAGjB,mBAAA,CAAAkB,iBAAiB,CAACD,mBAAmB,EAAEJ,QAAQ,EAAE,OAAO,EAAEC,KAAK,CAAC;MACtF;MACAG,mBAAmB,GAAGjB,mBAAA,CAAAkB,iBAAiB,CAACD,mBAAmB,EAAEJ,QAAQ,EAAE,YAAY,EAAEC,KAAK,CAAC;MAC3F;MACAG,mBAAmB,GAAGjB,mBAAA,CAAAO,gCAAgC,CAACU,mBAAmB,EAAEZ,cAAc,CAAC;MAE3F,OAAO;QAAE,GAAGH,KAAK;QAAEI,gBAAgB,EAAEW;MAAmB,CAAE;EAAC;AAEjE,CAAC;AAEH,SAAgBE,yBAAyBA,CACvCT,OAAmC,EACnCL,cAAsB,EACtBe,MAAA,GAAqC,EAAE;EAEvC,MAAM;IAAEC,cAAc;IAAEV;EAAmB,CAAE,GAAGS,MAAM;EAEtD,MAAME,OAAO,GAAGvB,KAAK,CAACwB,OAAO,CAAC,MAAMtB,aAAa,EAAK,EAAE,EAAE,CAAC;EAE3D,MAAM,CAACC,KAAK,EAAEsB,QAAQ,CAAC,GAAGzB,KAAK,CAAC0B,UAAU,CAACH,OAAO,EAAE;IAClDZ,OAAO;IACPL,cAAc,EAAE,CAAC;IACjBC,gBAAgB,EAAEN,mBAAA,CAAAS,wBAAwB,CAACC,OAAO,EAAEgB,SAAS,EAAEf,mBAAmB,CAAC;IACnFA;GACD,CAAC;EAEFd,iBAAA,CAAA8B,yBAAyB,CAAC,MAAK;IAC7BH,QAAQ,CAAC;MAAEpB,IAAI,EAAE,yBAAyB;MAAEC;IAAc,CAAE,CAAC;EAC/D,CAAC,EAAE,CAACA,cAAc,CAAC,CAAC;EAEpBR,iBAAA,CAAA8B,yBAAyB,CAAC,MAAK;IAC7BH,QAAQ,CAAC;MAAEpB,IAAI,EAAE,iBAAiB;MAAEM;IAAO,CAAE,CAAC;EAChD,CAAC,EAAE,CAACA,OAAO,CAAC,CAAC;EAEbb,iBAAA,CAAA8B,yBAAyB,CAAC,MAAK;IAC7BH,QAAQ,CAAC;MAAEpB,IAAI,EAAE,+BAA+B;MAAEO;IAAmB,CAAE,CAAC;EAC1E,CAAC,EAAE,CAACA,mBAAmB,CAAC,CAAC;EAEzB,MAAMiB,cAAc,GAAG/B,iBAAA,CAAAgC,gBAAgB,CACrC,CAACC,KAA0C,EAAEC,IAAgD,KAAI;IAC/F,IAAI;MAAEjB;IAAK,CAAE,GAAGiB,IAAI;IACpB,MAAM;MAAElB;IAAQ,CAAE,GAAGkB,IAAI;IACzB,MAAMC,GAAG,GAAGhC,mBAAA,CAAAgB,aAAa,CAACd,KAAK,CAACI,gBAAgB,EAAEO,QAAQ,CAAC;IAC3D,IAAI,CAACmB,GAAG,EAAE;MACR;;IAGFlB,KAAK,GAAGmB,IAAI,CAACC,GAAG,CAACF,GAAG,CAACG,QAAQ,IAAI,CAAC,EAAErB,KAAK,CAAC;IAE1C,IAAIO,cAAc,EAAE;MAClBA,cAAc,CAACS,KAAK,EAAE;QAAEjB,QAAQ;QAAEC;MAAK,CAAE,CAAC;;IAE5CU,QAAQ,CAAC;MAAEpB,IAAI,EAAE,kBAAkB;MAAES,QAAQ;MAAEC;IAAK,CAAE,CAAC;EACzD,CAAC,CACF;EAED,OAAO;IACLE,aAAa,EAAGoB,KAAoB,IAAKpC,mBAAA,CAAAgB,aAAa,CAACd,KAAK,CAACI,gBAAgB,EAAE8B,KAAK,CAAC;IACrFC,UAAU,EAAEA,CAAA,KAAMnC,KAAK,CAACI,gBAAgB;IACxCgC,cAAc,EAAGF,KAAoB,IAAKpC,mBAAA,CAAAsC,cAAc,CAACpC,KAAK,CAACI,gBAAgB,EAAE8B,KAAK,CAAC;IACvFR;GACD;AACH;AApDAW,OAAA,CAAApB,yBAAA,GAAAA,yBAAA"}
+{"version":3,"names":["react_utilities_1","require","React","columnResizeUtils_1","createReducer","state","action","type","containerWidth","columnWidthState","adjustColumnWidthsToFitContainer","newS","columnDefinitionsToState","columns","columnSizingOptions","newState","columnId","width","column","getColumnById","newColumnWidthState","setColumnProperty","useTableColumnResizeState","params","onColumnResize","reducer","useMemo","dispatch","useReducer","undefined","useIsomorphicLayoutEffect","setColumnWidth","useEventCallback","event","data","col","Math","max","minWidth","colId","getColumns","getColumnWidth","exports"],"sources":["../src/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 =\n  <T>() =>\n  (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: KeyboardEvent | 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"],"mappings":"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"}

package/lib-commonjs/hooks/useTableColumnSizing.js

@@ -5,10 +5,11 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useTableColumnSizing_unstable = exports.defaultColumnSizingState = void 0;
 const React = /*#__PURE__*/require("react");
-const useTableColumnResizeState_1 = /*#__PURE__*/require("./useTableColumnResizeState");
-const useTableColumnResizeMouseHandler_1 = /*#__PURE__*/require("./useTableColumnResizeMouseHandler");
-const useMeasureElement_1 = /*#__PURE__*/require("./useMeasureElement");
 const TableResizeHandle_1 = /*#__PURE__*/require("../TableResizeHandle");
+const useMeasureElement_1 = /*#__PURE__*/require("./useMeasureElement");
+const useTableColumnResizeMouseHandler_1 = /*#__PURE__*/require("./useTableColumnResizeMouseHandler");
+const useTableColumnResizeState_1 = /*#__PURE__*/require("./useTableColumnResizeState");
+const useKeyboardResizing_1 = /*#__PURE__*/require("./useKeyboardResizing");
 exports.defaultColumnSizingState = {
   getColumnWidths: () => [],
   getOnMouseDown: () => () => null,
@@ -20,7 +21,8 @@ exports.defaultColumnSizingState = {
   getTableCellProps: () => ({
     style: {},
     columnId: ''
-  })
+  }),
+  enableKeyboardMode: () => () => null
 };
 function useTableColumnSizing_unstable(params) {
   // False positive, these plugin hooks are intended to be run on every render
@@ -51,6 +53,13 @@ function useTableColumnSizingState(tableState, params) {
   const columnResizeState = useTableColumnResizeState_1.useTableColumnResizeState(columns, width + ((params === null || params === void 0 ? void 0 : params.containerWidthOffset) || 0), params);
   // Creates the mouse handler and attaches the state to it
   const mouseHandler = useTableColumnResizeMouseHandler_1.useTableColumnResizeMouseHandler(columnResizeState);
+  // Creates the keyboard handler for resizing columns
+  const keyboardResizing = useKeyboardResizing_1.useKeyboardResizing(columnResizeState);
+  const enableKeyboardMode = React.useCallback((columnId, onChange) => e => {
+    e.preventDefault();
+    e.nativeEvent.stopPropagation();
+    keyboardResizing.toggleInteractiveMode(columnId, onChange);
+  }, [keyboardResizing]);
   return {
     ...tableState,
     tableRef: measureElementRef,
@@ -78,7 +87,8 @@ function useTableColumnSizingState(tableState, params) {
         return col ? {
           style: getColumnStyles(col)
         } : {};
-      }
+      },
+      enableKeyboardMode
     }
   };
 }

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

@@ -1 +1 @@
-{"version":3,"names":["React","require","useTableColumnResizeState_1","useTableColumnResizeMouseHandler_1","useMeasureElement_1","TableResizeHandle_1","exports","defaultColumnSizingState","getColumnWidths","getOnMouseDown","setColumnWidth","getTableHeaderCellProps","style","columnId","getTableCellProps","useTableColumnSizing_unstable","params","tableState","useTableColumnSizingState","getColumnStyles","column","width","minWidth","maxWidth","columns","measureElementRef","useMeasureElement","columnResizeState","useTableColumnResizeState","containerWidthOffset","mouseHandler","useTableColumnResizeMouseHandler","tableRef","columnSizing_unstable","w","undefined","getColumns","col","getColumnById","aside","createElement","TableResizeHandle","onMouseDown","onTouchStart"],"sources":["../src/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"],"mappings":";;;;;;AAAA,MAAAA,KAAA,gBAAAC,OAAA;AAQA,MAAAC,2BAAA,gBAAAD,OAAA;AACA,MAAAE,kCAAA,gBAAAF,OAAA;AACA,MAAAG,mBAAA,gBAAAH,OAAA;AACA,MAAAI,mBAAA,gBAAAJ,OAAA;AAEaK,OAAA,CAAAC,wBAAwB,GAA2B;EAC9DC,eAAe,EAAEA,CAAA,KAAM,EAAE;EACzBC,cAAc,EAAEA,CAAA,KAAM,MAAM,IAAI;EAChCC,cAAc,EAAEA,CAAA,KAAM,IAAI;EAC1BC,uBAAuB,EAAEA,CAAA,MAAO;IAAEC,KAAK,EAAE,EAAE;IAAEC,QAAQ,EAAE;EAAE,CAAE,CAAC;EAC5DC,iBAAiB,EAAEA,CAAA,MAAO;IAAEF,KAAK,EAAE,EAAE;IAAEC,QAAQ,EAAE;EAAE,CAAE;CACtD;AAED,SAAgBE,6BAA6BA,CAAQC,MAAmC;EACtF;EACA;EACA,OAAQC,UAAqC,IAAKC,yBAAyB,CAACD,UAAU,EAAED,MAAM,CAAC;AACjG;AAJAV,OAAA,CAAAS,6BAAA,GAAAA,6BAAA;AAMA,SAASI,eAAeA,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,yBAAyBA,CAChCD,UAAqC,EACrCD,MAAmC;EAEnC,MAAM;IAAEQ;EAAO,CAAE,GAAGP,UAAU;EAE9B;EACA,MAAM;IAAEI,KAAK;IAAEI;EAAiB,CAAE,GAAGrB,mBAAA,CAAAsB,iBAAiB,EAAE;EACxD;EACA,MAAMC,iBAAiB,GAAGzB,2BAAA,CAAA0B,yBAAyB,CAACJ,OAAO,EAAEH,KAAK,IAAI,CAAAL,MAAM,aAANA,MAAM,uBAANA,MAAM,CAAEa,oBAAoB,KAAI,CAAC,CAAC,EAAEb,MAAM,CAAC;EACjH;EACA,MAAMc,YAAY,GAAG3B,kCAAA,CAAA4B,gCAAgC,CAACJ,iBAAiB,CAAC;EAExE,OAAO;IACL,GAAGV,UAAU;IACbe,QAAQ,EAAEP,iBAAiB;IAC3B;IACAQ,qBAAqB,EAAE;MACrBxB,cAAc,EAAEqB,YAAY,CAACrB,cAAc;MAC3CC,cAAc,EAAEA,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,GACTvC,KAAA,CAAAwC,aAAA,CAACnC,mBAAA,CAAAoC,iBAAiB;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"}
+{"version":3,"names":["React","require","TableResizeHandle_1","useMeasureElement_1","useTableColumnResizeMouseHandler_1","useTableColumnResizeState_1","useKeyboardResizing_1","exports","defaultColumnSizingState","getColumnWidths","getOnMouseDown","setColumnWidth","getTableHeaderCellProps","style","columnId","getTableCellProps","enableKeyboardMode","useTableColumnSizing_unstable","params","tableState","useTableColumnSizingState","getColumnStyles","column","width","minWidth","maxWidth","columns","measureElementRef","useMeasureElement","columnResizeState","useTableColumnResizeState","containerWidthOffset","mouseHandler","useTableColumnResizeMouseHandler","keyboardResizing","useKeyboardResizing","useCallback","onChange","e","preventDefault","nativeEvent","stopPropagation","toggleInteractiveMode","tableRef","columnSizing_unstable","w","undefined","getColumns","col","getColumnById","aside","createElement","TableResizeHandle","onMouseDown","onTouchStart"],"sources":["../src/packages/react-components/react-table/src/hooks/useTableColumnSizing.tsx"],"sourcesContent":["import * as React from 'react';\nimport { TableResizeHandle } from '../TableResizeHandle';\nimport {\n  ColumnWidthState,\n  EnableKeyboardModeOnChangeCallback,\n  TableColumnId,\n  TableColumnSizingState,\n  TableFeaturesState,\n  UseTableColumnSizingParams,\n} from './types';\nimport { useMeasureElement } from './useMeasureElement';\nimport { useTableColumnResizeMouseHandler } from './useTableColumnResizeMouseHandler';\nimport { useTableColumnResizeState } from './useTableColumnResizeState';\nimport { useKeyboardResizing } from './useKeyboardResizing';\n\nexport const defaultColumnSizingState: TableColumnSizingState = {\n  getColumnWidths: () => [],\n  getOnMouseDown: () => () => null,\n  setColumnWidth: () => null,\n  getTableHeaderCellProps: () => ({ style: {}, columnId: '' }),\n  getTableCellProps: () => ({ style: {}, columnId: '' }),\n  enableKeyboardMode: () => () => null,\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  // Creates the keyboard handler for resizing columns\n  const keyboardResizing = useKeyboardResizing(columnResizeState);\n\n  const enableKeyboardMode = React.useCallback(\n    (columnId: TableColumnId, onChange?: EnableKeyboardModeOnChangeCallback) =>\n      (e: React.MouseEvent | React.TouchEvent) => {\n        e.preventDefault();\n        e.nativeEvent.stopPropagation();\n        keyboardResizing.toggleInteractiveMode(columnId, onChange);\n      },\n    [keyboardResizing],\n  );\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\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      enableKeyboardMode,\n    },\n  };\n}\n"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-table",
-  "version": "9.1.2",
+  "version": "9.2.0",
   "description": "React components for building web experiences",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -34,14 +34,14 @@
   "dependencies": {
     "@fluentui/keyboard-keys": "^9.0.1",
     "@fluentui/react-aria": "^9.3.13",
-    "@fluentui/react-avatar": "^9.4.2",
-    "@fluentui/react-checkbox": "^9.1.2",
+    "@fluentui/react-avatar": "^9.4.3",
+    "@fluentui/react-checkbox": "^9.1.3",
     "@fluentui/react-context-selector": "^9.1.13",
     "@fluentui/react-icons": "^2.0.175",
-    "@fluentui/react-radio": "^9.1.2",
-    "@fluentui/react-shared-contexts": "^9.3.0",
-    "@fluentui/react-tabster": "^9.5.6",
-    "@fluentui/react-theme": "^9.1.5",
+    "@fluentui/react-radio": "^9.1.3",
+    "@fluentui/react-shared-contexts": "^9.3.1",
+    "@fluentui/react-tabster": "^9.5.7",
+    "@fluentui/react-theme": "^9.1.6",
     "@fluentui/react-utilities": "^9.7.0",
     "@griffel/react": "^1.5.2",
     "tslib": "^2.1.0"