@fluentui/react-table 9.2.12 → 9.3.0

package/lib/hooks/useTableColumnResizeMouseHandler.js

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

package/lib/hooks/useTableColumnResizeMouseHandler.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useFluent_unstable","useFluent","getEventClientCoords","isMouseEvent","isTouchEvent","useTableColumnResizeMouseHandler","columnResizeState","mouseX","useRef","currentWidth","colId","undefined","targetDocument","globalWin","defaultView","recalculatePosition","useCallback","e","clientX","dx","current","setColumnWidth","columnId","width","onDrag","requestAnimationFrame","onDragEnd","event","removeEventListener","getOnMouseDown","getColumnWidth","target","currentTarget","button","addEventListener"],"sources":["../../src/hooks/useTableColumnResizeMouseHandler.ts"],"sourcesContent":["import * as React from 'react';\nimport { TableColumnId, ColumnResizeState } from './types';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport {\n  NativeTouchOrMouseEvent,\n  ReactTouchOrMouseEvent,\n  getEventClientCoords,\n  isMouseEvent,\n  isTouchEvent,\n} from '@fluentui/react-utilities';\n\nexport function useTableColumnResizeMouseHandler(columnResizeState: ColumnResizeState) {\n  const mouseX = React.useRef(0);\n  const currentWidth = React.useRef(0);\n  const colId = React.useRef<TableColumnId | undefined>(undefined);\n\n  const { targetDocument } = useFluent();\n  const globalWin = targetDocument?.defaultView;\n\n  const recalculatePosition = React.useCallback(\n    (e: NativeTouchOrMouseEvent) => {\n      const { clientX } = getEventClientCoords(e);\n      const dx = clientX - mouseX.current;\n\n      // Update the local width for the column and set it\n      currentWidth.current += dx;\n      colId.current && columnResizeState.setColumnWidth(e, { columnId: colId.current, width: currentWidth.current });\n      mouseX.current = clientX;\n    },\n    [columnResizeState],\n  );\n\n  const onDrag = React.useCallback(\n    (e: NativeTouchOrMouseEvent) => {\n      // Using requestAnimationFrame here drastically improves resizing experience on slower CPUs\n      if (typeof globalWin?.requestAnimationFrame === 'function') {\n        requestAnimationFrame(() => recalculatePosition(e));\n      } else {\n        recalculatePosition(e);\n      }\n    },\n    [globalWin?.requestAnimationFrame, recalculatePosition],\n  );\n\n  const onDragEnd = React.useCallback(\n    (event: NativeTouchOrMouseEvent) => {\n      if (isMouseEvent(event)) {\n        targetDocument?.removeEventListener('mouseup', onDragEnd);\n        targetDocument?.removeEventListener('mousemove', onDrag);\n      }\n      if (isTouchEvent(event)) {\n        targetDocument?.removeEventListener('touchend', onDragEnd);\n        targetDocument?.removeEventListener('touchmove', onDrag);\n      }\n    },\n    [onDrag, targetDocument],\n  );\n\n  const getOnMouseDown = (columnId: TableColumnId) => (event: ReactTouchOrMouseEvent) => {\n    // Keep the width locally so that we decouple the calculation of the next with from rendering.\n    // This makes the whole experience much faster and more precise\n    currentWidth.current = columnResizeState.getColumnWidth(columnId);\n    mouseX.current = getEventClientCoords(event).clientX;\n    colId.current = columnId;\n\n    if (isMouseEvent(event)) {\n      // ignore other buttons than primary mouse button\n      if (event.target !== event.currentTarget || event.button !== 0) {\n        return;\n      }\n      targetDocument?.addEventListener('mouseup', onDragEnd);\n      targetDocument?.addEventListener('mousemove', onDrag);\n    }\n\n    if (isTouchEvent(event)) {\n      targetDocument?.addEventListener('touchend', onDragEnd);\n      targetDocument?.addEventListener('touchmove', onDrag);\n    }\n  };\n\n  return {\n    getOnMouseDown: (columnId: TableColumnId) => getOnMouseDown(columnId),\n  };\n}\n"],"mappings":"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"}
+{"version":3,"sources":["useTableColumnResizeMouseHandler.ts"],"sourcesContent":["import * as React from 'react';\nimport { TableColumnId, ColumnResizeState } from './types';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport {\n  NativeTouchOrMouseEvent,\n  ReactTouchOrMouseEvent,\n  getEventClientCoords,\n  isMouseEvent,\n  isTouchEvent,\n} from '@fluentui/react-utilities';\n\nexport function useTableColumnResizeMouseHandler(columnResizeState: ColumnResizeState) {\n  const mouseX = React.useRef(0);\n  const currentWidth = React.useRef(0);\n  const colId = React.useRef<TableColumnId | undefined>(undefined);\n\n  const { targetDocument } = useFluent();\n  const globalWin = targetDocument?.defaultView;\n\n  const recalculatePosition = React.useCallback(\n    (e: NativeTouchOrMouseEvent) => {\n      const { clientX } = getEventClientCoords(e);\n      const dx = clientX - mouseX.current;\n\n      // Update the local width for the column and set it\n      currentWidth.current += dx;\n      colId.current && columnResizeState.setColumnWidth(e, { columnId: colId.current, width: currentWidth.current });\n      mouseX.current = clientX;\n    },\n    [columnResizeState],\n  );\n\n  const onDrag = React.useCallback(\n    (e: NativeTouchOrMouseEvent) => {\n      // Using requestAnimationFrame here drastically improves resizing experience on slower CPUs\n      if (typeof globalWin?.requestAnimationFrame === 'function') {\n        requestAnimationFrame(() => recalculatePosition(e));\n      } else {\n        recalculatePosition(e);\n      }\n    },\n    [globalWin?.requestAnimationFrame, recalculatePosition],\n  );\n\n  const onDragEnd = React.useCallback(\n    (event: NativeTouchOrMouseEvent) => {\n      if (isMouseEvent(event)) {\n        targetDocument?.removeEventListener('mouseup', onDragEnd);\n        targetDocument?.removeEventListener('mousemove', onDrag);\n      }\n      if (isTouchEvent(event)) {\n        targetDocument?.removeEventListener('touchend', onDragEnd);\n        targetDocument?.removeEventListener('touchmove', onDrag);\n      }\n    },\n    [onDrag, targetDocument],\n  );\n\n  const getOnMouseDown = (columnId: TableColumnId) => (event: ReactTouchOrMouseEvent) => {\n    // Keep the width locally so that we decouple the calculation of the next with from rendering.\n    // This makes the whole experience much faster and more precise\n    currentWidth.current = columnResizeState.getColumnWidth(columnId);\n    mouseX.current = getEventClientCoords(event).clientX;\n    colId.current = columnId;\n\n    if (isMouseEvent(event)) {\n      // ignore other buttons than primary mouse button\n      if (event.target !== event.currentTarget || event.button !== 0) {\n        return;\n      }\n      targetDocument?.addEventListener('mouseup', onDragEnd);\n      targetDocument?.addEventListener('mousemove', onDrag);\n    }\n\n    if (isTouchEvent(event)) {\n      targetDocument?.addEventListener('touchend', onDragEnd);\n      targetDocument?.addEventListener('touchmove', onDrag);\n    }\n  };\n\n  return {\n    getOnMouseDown: (columnId: TableColumnId) => getOnMouseDown(columnId),\n  };\n}\n"],"names":["React","useFluent_unstable","useFluent","getEventClientCoords","isMouseEvent","isTouchEvent","useTableColumnResizeMouseHandler","columnResizeState","mouseX","useRef","currentWidth","colId","undefined","targetDocument","globalWin","defaultView","recalculatePosition","useCallback","e","clientX","dx","current","setColumnWidth","columnId","width","onDrag","requestAnimationFrame","onDragEnd","event","removeEventListener","getOnMouseDown","getColumnWidth","target","currentTarget","button","addEventListener"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,sBAAsBC,SAAS,QAAQ,kCAAkC;AAClF,SAGEC,oBAAoB,EACpBC,YAAY,EACZC,YAAY,QACP,4BAA4B;AAEnC,OAAO,SAASC,iCAAiCC,iBAAoC,EAAE;IACrF,MAAMC,SAASR,MAAMS,MAAM,CAAC;IAC5B,MAAMC,eAAeV,MAAMS,MAAM,CAAC;IAClC,MAAME,QAAQX,MAAMS,MAAM,CAA4BG;IAEtD,MAAM,EAAEC,eAAc,EAAE,GAAGX;IAC3B,MAAMY,YAAYD,2BAAAA,4BAAAA,KAAAA,IAAAA,eAAgBE,WAAW;IAE7C,MAAMC,sBAAsBhB,MAAMiB,WAAW,CAC3C,CAACC,IAA+B;QAC9B,MAAM,EAAEC,QAAO,EAAE,GAAGhB,qBAAqBe;QACzC,MAAME,KAAKD,UAAUX,OAAOa,OAAO;QAEnC,mDAAmD;QACnDX,aAAaW,OAAO,IAAID;QACxBT,MAAMU,OAAO,IAAId,kBAAkBe,cAAc,CAACJ,GAAG;YAAEK,UAAUZ,MAAMU,OAAO;YAAEG,OAAOd,aAAaW,OAAO;QAAC;QAC5Gb,OAAOa,OAAO,GAAGF;IACnB,GACA;QAACZ;KAAkB;IAGrB,MAAMkB,SAASzB,MAAMiB,WAAW,CAC9B,CAACC,IAA+B;QAC9B,2FAA2F;QAC3F,IAAI,OAAOJ,CAAAA,sBAAAA,uBAAAA,KAAAA,IAAAA,UAAWY,qBAAqB,AAAD,MAAM,YAAY;YAC1DA,sBAAsB,IAAMV,oBAAoBE;QAClD,OAAO;YACLF,oBAAoBE;QACtB,CAAC;IACH,GACA;QAACJ,sBAAAA,uBAAAA,KAAAA,IAAAA,UAAWY,qBAAqB;QAAEV;KAAoB;IAGzD,MAAMW,YAAY3B,MAAMiB,WAAW,CACjC,CAACW,QAAmC;QAClC,IAAIxB,aAAawB,QAAQ;YACvBf,2BAAAA,4BAAAA,KAAAA,IAAAA,eAAgBgB,mBAAmB,CAAC,WAAWF;YAC/Cd,2BAAAA,4BAAAA,KAAAA,IAAAA,eAAgBgB,mBAAmB,CAAC,aAAaJ;QACnD,CAAC;QACD,IAAIpB,aAAauB,QAAQ;YACvBf,2BAAAA,4BAAAA,KAAAA,IAAAA,eAAgBgB,mBAAmB,CAAC,YAAYF;YAChDd,2BAAAA,4BAAAA,KAAAA,IAAAA,eAAgBgB,mBAAmB,CAAC,aAAaJ;QACnD,CAAC;IACH,GACA;QAACA;QAAQZ;KAAe;IAG1B,MAAMiB,iBAAiB,CAACP;QAA4B,OAAA,CAACK,QAAkC;YACrF,8FAA8F;YAC9F,+DAA+D;YAC/DlB,aAAaW,OAAO,GAAGd,kBAAkBwB,cAAc,CAACR;YACxDf,OAAOa,OAAO,GAAGlB,qBAAqByB,OAAOT,OAAO;YACpDR,MAAMU,OAAO,GAAGE;YAEhB,IAAInB,aAAawB,QAAQ;gBACvB,iDAAiD;gBACjD,IAAIA,MAAMI,MAAM,KAAKJ,MAAMK,aAAa,IAAIL,MAAMM,MAAM,KAAK,GAAG;oBAC9D;gBACF,CAAC;gBACDrB,2BAAAA,4BAAAA,KAAAA,IAAAA,eAAgBsB,gBAAgB,CAAC,WAAWR;gBAC5Cd,2BAAAA,4BAAAA,KAAAA,IAAAA,eAAgBsB,gBAAgB,CAAC,aAAaV;YAChD,CAAC;YAED,IAAIpB,aAAauB,QAAQ;gBACvBf,2BAAAA,4BAAAA,KAAAA,IAAAA,eAAgBsB,gBAAgB,CAAC,YAAYR;gBAC7Cd,2BAAAA,4BAAAA,KAAAA,IAAAA,eAAgBsB,gBAAgB,CAAC,aAAaV;YAChD,CAAC;QACH;;IAEA,OAAO;QACLK,gBAAgB,CAACP,WAA4BO,eAAeP;IAC9D;AACF,CAAC"}

package/lib/hooks/useTableColumnResizeState.js

@@ -1,112 +1,107 @@
 import { useEventCallback, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';
 import * as React from 'react';
 import { columnDefinitionsToState, adjustColumnWidthsToFitContainer, getColumnById, setColumnProperty, getColumnWidth } from '../utils/columnResizeUtils';
-const createReducer = () => (state, action) => {
-  switch (action.type) {
-    case 'CONTAINER_WIDTH_UPDATED':
-      return {
-        ...state,
-        containerWidth: action.containerWidth,
-        columnWidthState: adjustColumnWidthsToFitContainer(state.columnWidthState, action.containerWidth)
-      };
-    case 'COLUMNS_UPDATED':
-      const newS = columnDefinitionsToState(action.columns, state.columnWidthState, state.columnSizingOptions);
-      return {
-        ...state,
-        columns: action.columns,
-        columnWidthState: adjustColumnWidthsToFitContainer(newS, state.containerWidth)
-      };
-    case 'COLUMN_SIZING_OPTIONS_UPDATED':
-      const newState = columnDefinitionsToState(state.columns, state.columnWidthState, action.columnSizingOptions);
-      return {
-        ...state,
-        columnSizingOptions: action.columnSizingOptions,
-        columnWidthState: adjustColumnWidthsToFitContainer(newState, state.containerWidth)
-      };
-    case 'SET_COLUMN_WIDTH':
-      const {
-        columnId,
-        width
-      } = action;
-      const {
-        containerWidth
-      } = state;
-      const column = getColumnById(state.columnWidthState, columnId);
-      let newColumnWidthState = [...state.columnWidthState];
-      if (!column) {
-        return state;
-      }
-      // Adjust the column width and measure the new total width
-      newColumnWidthState = setColumnProperty(newColumnWidthState, columnId, 'width', width);
-      // Set this width as idealWidth, because its a deliberate change, not a recalculation because of container
-      newColumnWidthState = setColumnProperty(newColumnWidthState, columnId, 'idealWidth', width);
-      // Adjust the widths to the container size
-      newColumnWidthState = adjustColumnWidthsToFitContainer(newColumnWidthState, containerWidth);
-      return {
-        ...state,
-        columnWidthState: newColumnWidthState
-      };
-  }
-};
+const createReducer = ()=>(state, action)=>{
+        switch(action.type){
+            case 'CONTAINER_WIDTH_UPDATED':
+                return {
+                    ...state,
+                    containerWidth: action.containerWidth,
+                    columnWidthState: adjustColumnWidthsToFitContainer(state.columnWidthState, action.containerWidth)
+                };
+            case 'COLUMNS_UPDATED':
+                const newS = columnDefinitionsToState(action.columns, state.columnWidthState, state.columnSizingOptions);
+                return {
+                    ...state,
+                    columns: action.columns,
+                    columnWidthState: adjustColumnWidthsToFitContainer(newS, state.containerWidth)
+                };
+            case 'COLUMN_SIZING_OPTIONS_UPDATED':
+                const newState = columnDefinitionsToState(state.columns, state.columnWidthState, action.columnSizingOptions);
+                return {
+                    ...state,
+                    columnSizingOptions: action.columnSizingOptions,
+                    columnWidthState: adjustColumnWidthsToFitContainer(newState, state.containerWidth)
+                };
+            case 'SET_COLUMN_WIDTH':
+                const { columnId , width  } = action;
+                const { containerWidth  } = state;
+                const column = getColumnById(state.columnWidthState, columnId);
+                let newColumnWidthState = [
+                    ...state.columnWidthState
+                ];
+                if (!column) {
+                    return state;
+                }
+                // Adjust the column width and measure the new total width
+                newColumnWidthState = setColumnProperty(newColumnWidthState, columnId, 'width', width);
+                // Set this width as idealWidth, because its a deliberate change, not a recalculation because of container
+                newColumnWidthState = setColumnProperty(newColumnWidthState, columnId, 'idealWidth', width);
+                // Adjust the widths to the container size
+                newColumnWidthState = adjustColumnWidthsToFitContainer(newColumnWidthState, containerWidth);
+                return {
+                    ...state,
+                    columnWidthState: newColumnWidthState
+                };
+        }
+    };
 export function useTableColumnResizeState(columns, containerWidth, params = {}) {
-  const {
-    onColumnResize,
-    columnSizingOptions
-  } = params;
-  const reducer = React.useMemo(() => createReducer(), []);
-  const [state, dispatch] = React.useReducer(reducer, {
-    columns,
-    containerWidth: 0,
-    columnWidthState: columnDefinitionsToState(columns, undefined, columnSizingOptions),
-    columnSizingOptions
-  });
-  useIsomorphicLayoutEffect(() => {
-    dispatch({
-      type: 'CONTAINER_WIDTH_UPDATED',
-      containerWidth
-    });
-  }, [containerWidth]);
-  useIsomorphicLayoutEffect(() => {
-    dispatch({
-      type: 'COLUMNS_UPDATED',
-      columns
+    const { onColumnResize , columnSizingOptions  } = params;
+    const reducer = React.useMemo(()=>createReducer(), []);
+    const [state, dispatch] = React.useReducer(reducer, {
+        columns,
+        containerWidth: 0,
+        columnWidthState: columnDefinitionsToState(columns, undefined, columnSizingOptions),
+        columnSizingOptions
     });
-  }, [columns]);
-  useIsomorphicLayoutEffect(() => {
-    dispatch({
-      type: 'COLUMN_SIZING_OPTIONS_UPDATED',
-      columnSizingOptions
-    });
-  }, [columnSizingOptions]);
-  const setColumnWidth = useEventCallback((event, data) => {
-    let {
-      width
-    } = data;
-    const {
-      columnId
-    } = data;
-    const col = getColumnById(state.columnWidthState, columnId);
-    if (!col) {
-      return;
-    }
-    width = Math.max(col.minWidth || 0, width);
-    if (onColumnResize) {
-      onColumnResize(event, {
-        columnId,
-        width
-      });
-    }
-    dispatch({
-      type: 'SET_COLUMN_WIDTH',
-      columnId,
-      width
+    useIsomorphicLayoutEffect(()=>{
+        dispatch({
+            type: 'CONTAINER_WIDTH_UPDATED',
+            containerWidth
+        });
+    }, [
+        containerWidth
+    ]);
+    useIsomorphicLayoutEffect(()=>{
+        dispatch({
+            type: 'COLUMNS_UPDATED',
+            columns
+        });
+    }, [
+        columns
+    ]);
+    useIsomorphicLayoutEffect(()=>{
+        dispatch({
+            type: 'COLUMN_SIZING_OPTIONS_UPDATED',
+            columnSizingOptions
+        });
+    }, [
+        columnSizingOptions
+    ]);
+    const setColumnWidth = useEventCallback((event, data)=>{
+        let { width  } = data;
+        const { columnId  } = data;
+        const col = getColumnById(state.columnWidthState, columnId);
+        if (!col) {
+            return;
+        }
+        width = Math.max(col.minWidth || 0, width);
+        if (onColumnResize) {
+            onColumnResize(event, {
+                columnId,
+                width
+            });
+        }
+        dispatch({
+            type: 'SET_COLUMN_WIDTH',
+            columnId,
+            width
+        });
     });
-  });
-  return {
-    getColumnById: colId => getColumnById(state.columnWidthState, colId),
-    getColumns: () => state.columnWidthState,
-    getColumnWidth: colId => getColumnWidth(state.columnWidthState, colId),
-    setColumnWidth
-  };
+    return {
+        getColumnById: (colId)=>getColumnById(state.columnWidthState, colId),
+        getColumns: ()=>state.columnWidthState,
+        getColumnWidth: (colId)=>getColumnWidth(state.columnWidthState, colId),
+        setColumnWidth
+    };
 }
-//# sourceMappingURL=useTableColumnResizeState.js.map

package/lib/hooks/useTableColumnResizeState.js.map

@@ -1 +1 @@
-{"version":3,"names":["useEventCallback","useIsomorphicLayoutEffect","React","columnDefinitionsToState","adjustColumnWidthsToFitContainer","getColumnById","setColumnProperty","getColumnWidth","createReducer","state","action","type","containerWidth","columnWidthState","newS","columns","columnSizingOptions","newState","columnId","width","column","newColumnWidthState","useTableColumnResizeState","params","onColumnResize","reducer","useMemo","dispatch","useReducer","undefined","setColumnWidth","event","data","col","Math","max","minWidth","colId","getColumns"],"sources":["../../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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"}
+{"version":3,"sources":["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"],"names":["useEventCallback","useIsomorphicLayoutEffect","React","columnDefinitionsToState","adjustColumnWidthsToFitContainer","getColumnById","setColumnProperty","getColumnWidth","createReducer","state","action","type","containerWidth","columnWidthState","newS","columns","columnSizingOptions","newState","columnId","width","column","newColumnWidthState","useTableColumnResizeState","params","onColumnResize","reducer","useMemo","dispatch","useReducer","undefined","setColumnWidth","event","data","col","Math","max","minWidth","colId","getColumns"],"mappings":"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"}

package/lib/hooks/useTableColumnSizing.js

@@ -4,85 +4,85 @@ import { useMeasureElement } from './useMeasureElement';
 import { useTableColumnResizeMouseHandler } from './useTableColumnResizeMouseHandler';
 import { useTableColumnResizeState } from './useTableColumnResizeState';
 import { useKeyboardResizing } from './useKeyboardResizing';
+export const KeyboardResizingCurrentColumnDataAttribute = 'data-keyboard-resizing';
 export const defaultColumnSizingState = {
-  getColumnWidths: () => [],
-  getOnMouseDown: () => () => null,
-  setColumnWidth: () => null,
-  getTableHeaderCellProps: () => ({
-    style: {},
-    columnId: ''
-  }),
-  getTableCellProps: () => ({
-    style: {},
-    columnId: ''
-  }),
-  enableKeyboardMode: () => () => null
+    getColumnWidths: ()=>[],
+    getOnMouseDown: ()=>()=>null,
+    setColumnWidth: ()=>null,
+    getTableHeaderCellProps: ()=>({
+            style: {},
+            columnId: ''
+        }),
+    getTableCellProps: ()=>({
+            style: {},
+            columnId: ''
+        }),
+    enableKeyboardMode: ()=>()=>null
 };
 export function useTableColumnSizing_unstable(params) {
-  // False positive, these plugin hooks are intended to be run on every render
-  // eslint-disable-next-line react-hooks/rules-of-hooks
-  return tableState => useTableColumnSizingState(tableState, params);
+    // False positive, these plugin hooks are intended to be run on every render
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    return (tableState)=>useTableColumnSizingState(tableState, params);
 }
 function getColumnStyles(column) {
-  const width = column.width;
-  return {
-    // native styles
-    width,
-    // non-native element styles (flex layout)
-    minWidth: width,
-    maxWidth: width
-  };
+    const width = column.width;
+    return {
+        // native styles
+        width,
+        // non-native element styles (flex layout)
+        minWidth: width,
+        maxWidth: width
+    };
 }
 function useTableColumnSizingState(tableState, params) {
-  const {
-    columns
-  } = tableState;
-  // Gets the container width
-  const {
-    width,
-    measureElementRef
-  } = useMeasureElement();
-  // Creates the state based on columns and available containerWidth
-  const columnResizeState = 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(columnResizeState);
-  // Creates the keyboard handler for resizing columns
-  const keyboardResizing = useKeyboardResizing(columnResizeState);
-  const enableKeyboardMode = React.useCallback((columnId, onChange) => e => {
-    e.preventDefault();
-    e.nativeEvent.stopPropagation();
-    keyboardResizing.toggleInteractiveMode(columnId, onChange);
-  }, [keyboardResizing]);
-  return {
-    ...tableState,
-    tableRef: measureElementRef,
-    // eslint-disable-next-line @typescript-eslint/naming-convention
-    columnSizing_unstable: {
-      getOnMouseDown: mouseHandler.getOnMouseDown,
-      setColumnWidth: (columnId, w) => columnResizeState.setColumnWidth(undefined, {
-        columnId,
-        width: w
-      }),
-      getColumnWidths: columnResizeState.getColumns,
-      getTableHeaderCellProps: columnId => {
-        const col = columnResizeState.getColumnById(columnId);
-        const aside = /*#__PURE__*/React.createElement(TableResizeHandle, {
-          onMouseDown: mouseHandler.getOnMouseDown(columnId),
-          onTouchStart: mouseHandler.getOnMouseDown(columnId)
-        });
-        return col ? {
-          style: getColumnStyles(col),
-          aside
-        } : {};
-      },
-      getTableCellProps: columnId => {
-        const col = columnResizeState.getColumnById(columnId);
-        return col ? {
-          style: getColumnStyles(col)
-        } : {};
-      },
-      enableKeyboardMode
-    }
-  };
+    const { columns  } = tableState;
+    // Gets the container width
+    const { width , measureElementRef  } = useMeasureElement();
+    // Creates the state based on columns and available containerWidth
+    const columnResizeState = 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(columnResizeState);
+    // Creates the keyboard handler for resizing columns
+    const { toggleInteractiveMode , columnId: keyboardResizingColumnId  } = useKeyboardResizing(columnResizeState);
+    const enableKeyboardMode = React.useCallback((columnId, onChange)=>(e)=>{
+            e.preventDefault();
+            e.nativeEvent.stopPropagation();
+            toggleInteractiveMode(columnId, onChange);
+        }, [
+        toggleInteractiveMode
+    ]);
+    return {
+        ...tableState,
+        tableRef: measureElementRef,
+        // eslint-disable-next-line @typescript-eslint/naming-convention
+        columnSizing_unstable: {
+            getOnMouseDown: mouseHandler.getOnMouseDown,
+            setColumnWidth: (columnId, w)=>columnResizeState.setColumnWidth(undefined, {
+                    columnId,
+                    width: w
+                }),
+            getColumnWidths: columnResizeState.getColumns,
+            getTableHeaderCellProps: (columnId)=>{
+                const col = columnResizeState.getColumnById(columnId);
+                const aside = /*#__PURE__*/ React.createElement(TableResizeHandle, {
+                    onMouseDown: mouseHandler.getOnMouseDown(columnId),
+                    onTouchStart: mouseHandler.getOnMouseDown(columnId)
+                });
+                return col ? {
+                    style: getColumnStyles(col),
+                    aside,
+                    ...keyboardResizingColumnId === columnId ? {
+                        [KeyboardResizingCurrentColumnDataAttribute]: ''
+                    } : {}
+                } : {};
+            },
+            getTableCellProps: (columnId)=>{
+                const col = columnResizeState.getColumnById(columnId);
+                return col ? {
+                    style: getColumnStyles(col)
+                } : {};
+            },
+            enableKeyboardMode
+        }
+    };
 }
-//# sourceMappingURL=useTableColumnSizing.js.map