@fluentui/react-table 9.8.0 → 9.8.2

package/lib/hooks/useTableColumnResizeMouseHandler.js

@@ -2,13 +2,14 @@ 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) {
+    var _targetDocument, _globalWin;
     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 { targetDocument } = useFluent();
+    const globalWin = (_targetDocument = targetDocument) === null || _targetDocument === void 0 ? void 0 : _targetDocument.defaultView;
     const recalculatePosition = React.useCallback((e)=>{
-        const { clientX  } = getEventClientCoords(e);
+        const { clientX } = getEventClientCoords(e);
         const dx = clientX - mouseX.current;
         // Update the local width for the column and set it
         currentWidth.current += dx;
@@ -21,50 +22,53 @@ export function useTableColumnResizeMouseHandler(columnResizeState) {
         columnResizeState
     ]);
     const onDrag = React.useCallback((e)=>{
+        var _globalWin;
         // Using requestAnimationFrame here drastically improves resizing experience on slower CPUs
-        if (typeof (globalWin === null || globalWin === void 0 ? void 0 : globalWin.requestAnimationFrame) === 'function') {
+        if (typeof ((_globalWin = 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,
+        (_globalWin = 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);
+            var _targetDocument, _targetDocument1;
+            (_targetDocument = targetDocument) === null || _targetDocument === void 0 ? void 0 : _targetDocument.removeEventListener('mouseup', onDragEnd);
+            (_targetDocument1 = targetDocument) === null || _targetDocument1 === void 0 ? void 0 : _targetDocument1.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);
+            var _targetDocument2, _targetDocument3;
+            (_targetDocument2 = targetDocument) === null || _targetDocument2 === void 0 ? void 0 : _targetDocument2.removeEventListener('touchend', onDragEnd);
+            (_targetDocument3 = targetDocument) === null || _targetDocument3 === void 0 ? void 0 : _targetDocument3.removeEventListener('touchmove', onDrag);
         }
     }, [
         onDrag,
         targetDocument
     ]);
-    const getOnMouseDown = (columnId)=>{
-        return (event)=>{
+    const getOnMouseDown = (columnId)=>(event)=>{
             // Keep the width locally so that we decouple the calculation of the next with from rendering.
             // This makes the whole experience much faster and more precise
             currentWidth.current = columnResizeState.getColumnWidth(columnId);
             mouseX.current = getEventClientCoords(event).clientX;
             colId.current = columnId;
             if (isMouseEvent(event)) {
+                var _targetDocument, _targetDocument1;
                 // 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);
+                (_targetDocument = targetDocument) === null || _targetDocument === void 0 ? void 0 : _targetDocument.addEventListener('mouseup', onDragEnd);
+                (_targetDocument1 = targetDocument) === null || _targetDocument1 === void 0 ? void 0 : _targetDocument1.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);
+                var _targetDocument2, _targetDocument3;
+                (_targetDocument2 = targetDocument) === null || _targetDocument2 === void 0 ? void 0 : _targetDocument2.addEventListener('touchend', onDragEnd);
+                (_targetDocument3 = targetDocument) === null || _targetDocument3 === void 0 ? void 0 : _targetDocument3.addEventListener('touchmove', onDrag);
             }
         };
-    };
     return {
         getOnMouseDown: (columnId)=>getOnMouseDown(columnId)
     };

package/lib/hooks/useTableColumnResizeMouseHandler.js.map

@@ -1 +1 @@
-{"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"}
+{"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","targetDocument","globalWin","mouseX","useRef","currentWidth","colId","undefined","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;QAMjEC,iBAwBfC;IA7BH,MAAMC,SAASV,MAAMW,MAAM,CAAC;IAC5B,MAAMC,eAAeZ,MAAMW,MAAM,CAAC;IAClC,MAAME,QAAQb,MAAMW,MAAM,CAA4BG;IAEtD,MAAM,EAAEN,cAAc,EAAE,GAAGN;IAC3B,MAAMO,aAAYD,kBAAAA,4BAAAA,sCAAAA,gBAAgBO,WAAW;IAE7C,MAAMC,sBAAsBhB,MAAMiB,WAAW,CAC3C,CAACC;QACC,MAAM,EAAEC,OAAO,EAAE,GAAGhB,qBAAqBe;QACzC,MAAME,KAAKD,UAAUT,OAAOW,OAAO;QAEnC,mDAAmD;QACnDT,aAAaS,OAAO,IAAID;QACxBP,MAAMQ,OAAO,IAAId,kBAAkBe,cAAc,CAACJ,GAAG;YAAEK,UAAUV,MAAMQ,OAAO;YAAEG,OAAOZ,aAAaS,OAAO;QAAC;QAC5GX,OAAOW,OAAO,GAAGF;IACnB,GACA;QAACZ;KAAkB;IAGrB,MAAMkB,SAASzB,MAAMiB,WAAW,CAC9B,CAACC;YAEYT;QADX,2FAA2F;QAC3F,IAAI,SAAOA,aAAAA,uBAAAA,iCAAAA,WAAWiB,qBAAqB,MAAK,YAAY;YAC1DA,sBAAsB,IAAMV,oBAAoBE;QAClD,OAAO;YACLF,oBAAoBE;QACtB;IACF,GACA;SAACT,aAAAA,uBAAAA,iCAAAA,WAAWiB,qBAAqB;QAAEV;KAAoB;IAGzD,MAAMW,YAAY3B,MAAMiB,WAAW,CACjC,CAACW;QACC,IAAIxB,aAAawB,QAAQ;gBACvBpB,iBACAA;aADAA,kBAAAA,4BAAAA,sCAAAA,gBAAgBqB,mBAAmB,CAAC,WAAWF;aAC/CnB,mBAAAA,4BAAAA,uCAAAA,iBAAgBqB,mBAAmB,CAAC,aAAaJ;QACnD;QACA,IAAIpB,aAAauB,QAAQ;gBACvBpB,kBACAA;aADAA,mBAAAA,4BAAAA,uCAAAA,iBAAgBqB,mBAAmB,CAAC,YAAYF;aAChDnB,mBAAAA,4BAAAA,uCAAAA,iBAAgBqB,mBAAmB,CAAC,aAAaJ;QACnD;IACF,GACA;QAACA;QAAQjB;KAAe;IAG1B,MAAMsB,iBAAiB,CAACP,WAA4B,CAACK;YACnD,8FAA8F;YAC9F,+DAA+D;YAC/DhB,aAAaS,OAAO,GAAGd,kBAAkBwB,cAAc,CAACR;YACxDb,OAAOW,OAAO,GAAGlB,qBAAqByB,OAAOT,OAAO;YACpDN,MAAMQ,OAAO,GAAGE;YAEhB,IAAInB,aAAawB,QAAQ;oBAKvBpB,iBACAA;gBALA,iDAAiD;gBACjD,IAAIoB,MAAMI,MAAM,KAAKJ,MAAMK,aAAa,IAAIL,MAAMM,MAAM,KAAK,GAAG;oBAC9D;gBACF;iBACA1B,kBAAAA,4BAAAA,sCAAAA,gBAAgB2B,gBAAgB,CAAC,WAAWR;iBAC5CnB,mBAAAA,4BAAAA,uCAAAA,iBAAgB2B,gBAAgB,CAAC,aAAaV;YAChD;YAEA,IAAIpB,aAAauB,QAAQ;oBACvBpB,kBACAA;iBADAA,mBAAAA,4BAAAA,uCAAAA,iBAAgB2B,gBAAgB,CAAC,YAAYR;iBAC7CnB,mBAAAA,4BAAAA,uCAAAA,iBAAgB2B,gBAAgB,CAAC,aAAaV;YAChD;QACF;IAEA,OAAO;QACLK,gBAAgB,CAACP,WAA4BO,eAAeP;IAC9D;AACF"}

package/lib/hooks/useTableColumnResizeState.js

@@ -24,8 +24,8 @@ const createReducer = ()=>(state, action)=>{
                     columnWidthState: adjustColumnWidthsToFitContainer(newState, state.containerWidth)
                 };
             case 'SET_COLUMN_WIDTH':
-                const { columnId , width  } = action;
-                const { containerWidth  } = state;
+                const { columnId, width } = action;
+                const { containerWidth } = state;
                 const column = getColumnById(state.columnWidthState, columnId);
                 let newColumnWidthState = [
                     ...state.columnWidthState
@@ -46,7 +46,7 @@ const createReducer = ()=>(state, action)=>{
         }
     };
 export function useTableColumnResizeState(columns, containerWidth, params = {}) {
-    const { onColumnResize , columnSizingOptions  } = params;
+    const { onColumnResize, columnSizingOptions } = params;
     const reducer = React.useMemo(()=>createReducer(), []);
     const [state, dispatch] = React.useReducer(reducer, {
         columns,
@@ -79,8 +79,8 @@ export function useTableColumnResizeState(columns, containerWidth, params = {})
         columnSizingOptions
     ]);
     const setColumnWidth = useEventCallback((event, data)=>{
-        let { width  } = data;
-        const { columnId  } = data;
+        let { width } = data;
+        const { columnId } = data;
         const col = getColumnById(state.columnWidthState, columnId);
         if (!col) {
             return;

package/lib/hooks/useTableColumnResizeState.js.map

@@ -1 +1 @@
-{"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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"}
+{"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

@@ -8,6 +8,7 @@ export const defaultColumnSizingState = {
     getColumnWidths: ()=>[],
     getOnMouseDown: ()=>()=>null,
     setColumnWidth: ()=>null,
+    getTableProps: ()=>({}),
     getTableHeaderCellProps: ()=>({
             style: {},
             columnId: ''
@@ -34,15 +35,16 @@ function getColumnStyles(column) {
     };
 }
 function useTableColumnSizingState(tableState, params) {
-    const { columns  } = tableState;
+    var _params;
+    const { columns } = tableState;
     // Gets the container width
-    const { width , measureElementRef  } = useMeasureElement();
+    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);
+    const columnResizeState = useTableColumnResizeState(columns, width + (((_params = 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 , getKeyboardResizingProps  } = useKeyboardResizing(columnResizeState);
+    const { toggleInteractiveMode, getKeyboardResizingProps } = useKeyboardResizing(columnResizeState);
     const enableKeyboardMode = React.useCallback((columnId, onChange)=>(e)=>{
             e.preventDefault();
             e.nativeEvent.stopPropagation();
@@ -61,12 +63,23 @@ function useTableColumnSizingState(tableState, params) {
                     width: w
                 }),
             getColumnWidths: columnResizeState.getColumns,
+            getTableProps: (props = {})=>{
+                return {
+                    ...props,
+                    style: {
+                        minWidth: 'fit-content',
+                        ...props.style || {}
+                    }
+                };
+            },
             getTableHeaderCellProps: (columnId)=>{
+                var _columns_, _col;
                 const col = columnResizeState.getColumnById(columnId);
-                const aside = /*#__PURE__*/ React.createElement(TableResizeHandle, {
+                const isLastColumn = ((_columns_ = columns[columns.length - 1]) === null || _columns_ === void 0 ? void 0 : _columns_.columnId) === columnId;
+                const aside = isLastColumn ? null : /*#__PURE__*/ React.createElement(TableResizeHandle, {
                     onMouseDown: mouseHandler.getOnMouseDown(columnId),
                     onTouchStart: mouseHandler.getOnMouseDown(columnId),
-                    ...getKeyboardResizingProps(columnId, (col === null || col === void 0 ? void 0 : col.width) || 0)
+                    ...getKeyboardResizingProps(columnId, ((_col = col) === null || _col === void 0 ? void 0 : _col.width) || 0)
                 });
                 return col ? {
                     style: getColumnStyles(col),

package/lib/hooks/useTableColumnSizing.js.map

@@ -1 +1 @@
-{"version":3,"sources":["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';\n\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 { toggleInteractiveMode, getKeyboardResizingProps } = 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        toggleInteractiveMode(columnId, onChange);\n      },\n    [toggleInteractiveMode],\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            {...getKeyboardResizingProps(columnId, col?.width || 0)}\n          />\n        );\n        return col\n          ? {\n              style: getColumnStyles(col),\n              aside,\n            }\n          : {};\n      },\n      getTableCellProps: (columnId: TableColumnId) => {\n        const col = columnResizeState.getColumnById(columnId);\n        return col ? { style: getColumnStyles(col) } : {};\n      },\n      enableKeyboardMode,\n    },\n  };\n}\n"],"names":["React","TableResizeHandle","useMeasureElement","useTableColumnResizeMouseHandler","useTableColumnResizeState","useKeyboardResizing","defaultColumnSizingState","getColumnWidths","getOnMouseDown","setColumnWidth","getTableHeaderCellProps","style","columnId","getTableCellProps","enableKeyboardMode","useTableColumnSizing_unstable","params","tableState","useTableColumnSizingState","getColumnStyles","column","width","minWidth","maxWidth","columns","measureElementRef","columnResizeState","containerWidthOffset","mouseHandler","toggleInteractiveMode","getKeyboardResizingProps","useCallback","onChange","e","preventDefault","nativeEvent","stopPropagation","tableRef","columnSizing_unstable","w","undefined","getColumns","col","getColumnById","aside","onMouseDown","onTouchStart"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,iBAAiB,QAAQ,uBAAuB;AAUzD,SAASC,iBAAiB,QAAQ,sBAAsB;AACxD,SAASC,gCAAgC,QAAQ,qCAAqC;AACtF,SAASC,yBAAyB,QAAQ,8BAA8B;AACxE,SAASC,mBAAmB,QAAQ,wBAAwB;AAE5D,OAAO,MAAMC,2BAAmD;IAC9DC,iBAAiB,IAAM,EAAE;IACzBC,gBAAgB,IAAM,IAAM,IAAI;IAChCC,gBAAgB,IAAM,IAAI;IAC1BC,yBAAyB,IAAO,CAAA;YAAEC,OAAO,CAAC;YAAGC,UAAU;QAAG,CAAA;IAC1DC,mBAAmB,IAAO,CAAA;YAAEF,OAAO,CAAC;YAAGC,UAAU;QAAG,CAAA;IACpDE,oBAAoB,IAAM,IAAM,IAAI;AACtC,EAAE;AAEF,OAAO,SAASC,8BAAqCC,MAAmC,EAAE;IACxF,4EAA4E;IAC5E,sDAAsD;IACtD,OAAO,CAACC,aAA0CC,0BAA0BD,YAAYD;AAC1F,CAAC;AAED,SAASG,gBAAgBC,MAAwB,EAAuB;IACtE,MAAMC,QAAQD,OAAOC,KAAK;IAE1B,OAAO;QACL,gBAAgB;QAChBA;QACA,0CAA0C;QAC1CC,UAAUD;QACVE,UAAUF;IACZ;AACF;AAEA,SAASH,0BACPD,UAAqC,EACrCD,MAAmC,EACR;IAC3B,MAAM,EAAEQ,QAAO,EAAE,GAAGP;IAEpB,2BAA2B;IAC3B,MAAM,EAAEI,MAAK,EAAEI,kBAAiB,EAAE,GAAGvB;IACrC,kEAAkE;IAClE,MAAMwB,oBAAoBtB,0BAA0BoB,SAASH,QAASL,CAAAA,CAAAA,mBAAAA,oBAAAA,KAAAA,IAAAA,OAAQW,oBAAoB,AAAD,KAAK,CAAA,GAAIX;IAC1G,yDAAyD;IACzD,MAAMY,eAAezB,iCAAiCuB;IACtD,oDAAoD;IACpD,MAAM,EAAEG,sBAAqB,EAAEC,yBAAwB,EAAE,GAAGzB,oBAAoBqB;IAEhF,MAAMZ,qBAAqBd,MAAM+B,WAAW,CAC1C,CAACnB,UAAyBoB,WACxB,CAACC,IAA2C;YAC1CA,EAAEC,cAAc;YAChBD,EAAEE,WAAW,CAACC,eAAe;YAC7BP,sBAAsBjB,UAAUoB;QAClC,GACF;QAACH;KAAsB;IAGzB,OAAO;QACL,GAAGZ,UAAU;QACboB,UAAUZ;QACV,gEAAgE;QAChEa,uBAAuB;YACrB9B,gBAAgBoB,aAAapB,cAAc;YAC3CC,gBAAgB,CAACG,UAAyB2B,IACxCb,kBAAkBjB,cAAc,CAAC+B,WAAW;oBAAE5B;oBAAUS,OAAOkB;gBAAE;YACnEhC,iBAAiBmB,kBAAkBe,UAAU;YAC7C/B,yBAAyB,CAACE,WAA4B;gBACpD,MAAM8B,MAAMhB,kBAAkBiB,aAAa,CAAC/B;gBAE5C,MAAMgC,sBACJ,oBAAC3C;oBACC4C,aAAajB,aAAapB,cAAc,CAACI;oBACzCkC,cAAclB,aAAapB,cAAc,CAACI;oBACzC,GAAGkB,yBAAyBlB,UAAU8B,CAAAA,gBAAAA,iBAAAA,KAAAA,IAAAA,IAAKrB,KAAK,AAAD,KAAK,EAAE;;gBAG3D,OAAOqB,MACH;oBACE/B,OAAOQ,gBAAgBuB;oBACvBE;gBACF,IACA,CAAC,CAAC;YACR;YACA/B,mBAAmB,CAACD,WAA4B;gBAC9C,MAAM8B,MAAMhB,kBAAkBiB,aAAa,CAAC/B;gBAC5C,OAAO8B,MAAM;oBAAE/B,OAAOQ,gBAAgBuB;gBAAK,IAAI,CAAC,CAAC;YACnD;YACA5B;QACF;IACF;AACF"}
+{"version":3,"sources":["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';\n\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  getTableProps: () => ({}),\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 { toggleInteractiveMode, getKeyboardResizingProps } = 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        toggleInteractiveMode(columnId, onChange);\n      },\n    [toggleInteractiveMode],\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      getTableProps: (props = {}) => {\n        return {\n          ...props,\n          style: {\n            minWidth: 'fit-content',\n            ...(props.style || {}),\n          },\n        };\n      },\n      getTableHeaderCellProps: (columnId: TableColumnId) => {\n        const col = columnResizeState.getColumnById(columnId);\n        const isLastColumn = columns[columns.length - 1]?.columnId === columnId;\n\n        const aside = isLastColumn ? null : (\n          <TableResizeHandle\n            onMouseDown={mouseHandler.getOnMouseDown(columnId)}\n            onTouchStart={mouseHandler.getOnMouseDown(columnId)}\n            {...getKeyboardResizingProps(columnId, col?.width || 0)}\n          />\n        );\n\n        return col\n          ? {\n              style: getColumnStyles(col),\n              aside,\n            }\n          : {};\n      },\n      getTableCellProps: (columnId: TableColumnId) => {\n        const col = columnResizeState.getColumnById(columnId);\n        return col ? { style: getColumnStyles(col) } : {};\n      },\n      enableKeyboardMode,\n    },\n  };\n}\n"],"names":["React","TableResizeHandle","useMeasureElement","useTableColumnResizeMouseHandler","useTableColumnResizeState","useKeyboardResizing","defaultColumnSizingState","getColumnWidths","getOnMouseDown","setColumnWidth","getTableProps","getTableHeaderCellProps","style","columnId","getTableCellProps","enableKeyboardMode","useTableColumnSizing_unstable","params","tableState","useTableColumnSizingState","getColumnStyles","column","width","minWidth","maxWidth","columns","measureElementRef","columnResizeState","containerWidthOffset","mouseHandler","toggleInteractiveMode","getKeyboardResizingProps","useCallback","onChange","e","preventDefault","nativeEvent","stopPropagation","tableRef","columnSizing_unstable","w","undefined","getColumns","props","col","getColumnById","isLastColumn","length","aside","onMouseDown","onTouchStart"],"mappings":"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"}

package/lib/hooks/useTableCompositeNavigation.js

@@ -13,8 +13,8 @@ export function useTableCompositeNavigation() {
     const groupperAttr = useFocusableGroup({
         tabBehavior: 'limited-trap-focus'
     });
-    const { findFirstFocusable  } = useFocusFinders();
-    const { targetDocument  } = useFluent();
+    const { findFirstFocusable } = useFocusFinders();
+    const { targetDocument } = useFluent();
     const rowAttr = useMergedTabsterAttributes_unstable(horizontalAttr, groupperAttr);
     const onKeyDown = React.useCallback((e)=>{
         if (!targetDocument) {

package/lib/hooks/useTableCompositeNavigation.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useTableCompositeNavigation.ts"],"sourcesContent":["import * as React from 'react';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { ArrowDown, ArrowRight, Escape, keyCodes, ArrowUp } from '@fluentui/keyboard-keys';\nimport {\n  useArrowNavigationGroup,\n  useFocusableGroup,\n  useMergedTabsterAttributes_unstable,\n  TabsterDOMAttribute,\n  useFocusFinders,\n} from '@fluentui/react-tabster';\nimport { isHTMLElement } from '@fluentui/react-utilities';\n\nexport function useTableCompositeNavigation(): {\n  onTableKeyDown: React.KeyboardEventHandler;\n  tableTabsterAttribute: TabsterDOMAttribute;\n  tableRowTabsterAttribute: TabsterDOMAttribute;\n} {\n  const horizontalAttr = useArrowNavigationGroup({ axis: 'horizontal' });\n  const gridAttr = useArrowNavigationGroup({ axis: 'grid' });\n  const groupperAttr = useFocusableGroup({ tabBehavior: 'limited-trap-focus' });\n  const { findFirstFocusable } = useFocusFinders();\n  const { targetDocument } = useFluent();\n\n  const rowAttr = useMergedTabsterAttributes_unstable(horizontalAttr, groupperAttr);\n\n  const onKeyDown: React.KeyboardEventHandler = React.useCallback(\n    e => {\n      if (!targetDocument) {\n        return;\n      }\n\n      const activeElement = targetDocument.activeElement;\n      if (!activeElement || !e.currentTarget.contains(activeElement)) {\n        return;\n      }\n      const activeElementRole = activeElement.getAttribute('role');\n\n      // Enter groupper when in row focus mode to navigate cells\n      if (e.key === ArrowRight && activeElementRole === 'row' && isHTMLElement(activeElement)) {\n        findFirstFocusable(activeElement)?.focus();\n      }\n\n      if (activeElementRole === 'row') {\n        return;\n      }\n\n      const isInCell = (() => {\n        let cur = isHTMLElement(activeElement) ? activeElement : null;\n        while (cur) {\n          const curRole = cur.getAttribute('role');\n          if (curRole === 'cell' || curRole === 'gridcell') {\n            return true;\n          }\n\n          cur = cur.parentElement;\n        }\n\n        return false;\n      })();\n\n      // Escape groupper focus trap before arrow down\n      if ((e.key === ArrowDown || e.key === ArrowUp) && isInCell) {\n        activeElement.dispatchEvent(new KeyboardEvent('keydown', { key: Escape, keyCode: keyCodes.Escape }));\n        // Tabster uses keycodes\n        // eslint-disable-next-line deprecation/deprecation\n        activeElement.dispatchEvent(new KeyboardEvent('keydown', { key: e.key, keyCode: e.keyCode }));\n      }\n    },\n    [targetDocument, findFirstFocusable],\n  );\n\n  return {\n    onTableKeyDown: onKeyDown,\n    tableTabsterAttribute: gridAttr,\n    tableRowTabsterAttribute: rowAttr,\n  };\n}\n"],"names":["React","useFluent_unstable","useFluent","ArrowDown","ArrowRight","Escape","keyCodes","ArrowUp","useArrowNavigationGroup","useFocusableGroup","useMergedTabsterAttributes_unstable","useFocusFinders","isHTMLElement","useTableCompositeNavigation","horizontalAttr","axis","gridAttr","groupperAttr","tabBehavior","findFirstFocusable","targetDocument","rowAttr","onKeyDown","useCallback","e","activeElement","currentTarget","contains","activeElementRole","getAttribute","key","focus","isInCell","cur","curRole","parentElement","dispatchEvent","KeyboardEvent","keyCode","onTableKeyDown","tableTabsterAttribute","tableRowTabsterAttribute"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,sBAAsBC,SAAS,QAAQ,kCAAkC;AAClF,SAASC,SAAS,EAAEC,UAAU,EAAEC,MAAM,EAAEC,QAAQ,EAAEC,OAAO,QAAQ,0BAA0B;AAC3F,SACEC,uBAAuB,EACvBC,iBAAiB,EACjBC,mCAAmC,EAEnCC,eAAe,QACV,0BAA0B;AACjC,SAASC,aAAa,QAAQ,4BAA4B;AAE1D,OAAO,SAASC,8BAId;IACA,MAAMC,iBAAiBN,wBAAwB;QAAEO,MAAM;IAAa;IACpE,MAAMC,WAAWR,wBAAwB;QAAEO,MAAM;IAAO;IACxD,MAAME,eAAeR,kBAAkB;QAAES,aAAa;IAAqB;IAC3E,MAAM,EAAEC,mBAAkB,EAAE,GAAGR;IAC/B,MAAM,EAAES,eAAc,EAAE,GAAGlB;IAE3B,MAAMmB,UAAUX,oCAAoCI,gBAAgBG;IAEpE,MAAMK,YAAwCtB,MAAMuB,WAAW,CAC7DC,CAAAA,IAAK;QACH,IAAI,CAACJ,gBAAgB;YACnB;QACF,CAAC;QAED,MAAMK,gBAAgBL,eAAeK,aAAa;QAClD,IAAI,CAACA,iBAAiB,CAACD,EAAEE,aAAa,CAACC,QAAQ,CAACF,gBAAgB;YAC9D;QACF,CAAC;QACD,MAAMG,oBAAoBH,cAAcI,YAAY,CAAC;QAErD,0DAA0D;QAC1D,IAAIL,EAAEM,GAAG,KAAK1B,cAAcwB,sBAAsB,SAAShB,cAAca,gBAAgB;gBACvFN;YAAAA,CAAAA,sBAAAA,mBAAmBM,4BAAnBN,iCAAAA,KAAAA,IAAAA,oBAAmCY;QACrC,CAAC;QAED,IAAIH,sBAAsB,OAAO;YAC/B;QACF,CAAC;QAED,MAAMI,WAAW,AAAC,CAAA,IAAM;YACtB,IAAIC,MAAMrB,cAAca,iBAAiBA,gBAAgB,IAAI;YAC7D,MAAOQ,IAAK;gBACV,MAAMC,UAAUD,IAAIJ,YAAY,CAAC;gBACjC,IAAIK,YAAY,UAAUA,YAAY,YAAY;oBAChD,OAAO,IAAI;gBACb,CAAC;gBAEDD,MAAMA,IAAIE,aAAa;YACzB;YAEA,OAAO,KAAK;QACd,CAAA;QAEA,+CAA+C;QAC/C,IAAI,AAACX,CAAAA,EAAEM,GAAG,KAAK3B,aAAaqB,EAAEM,GAAG,KAAKvB,OAAM,KAAMyB,UAAU;YAC1DP,cAAcW,aAAa,CAAC,IAAIC,cAAc,WAAW;gBAAEP,KAAKzB;gBAAQiC,SAAShC,SAASD,MAAM;YAAC;YACjG,wBAAwB;YACxB,mDAAmD;YACnDoB,cAAcW,aAAa,CAAC,IAAIC,cAAc,WAAW;gBAAEP,KAAKN,EAAEM,GAAG;gBAAEQ,SAASd,EAAEc,OAAO;YAAC;QAC5F,CAAC;IACH,GACA;QAAClB;QAAgBD;KAAmB;IAGtC,OAAO;QACLoB,gBAAgBjB;QAChBkB,uBAAuBxB;QACvByB,0BAA0BpB;IAC5B;AACF,CAAC"}
+{"version":3,"sources":["useTableCompositeNavigation.ts"],"sourcesContent":["import * as React from 'react';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { ArrowDown, ArrowRight, Escape, keyCodes, ArrowUp } from '@fluentui/keyboard-keys';\nimport {\n  useArrowNavigationGroup,\n  useFocusableGroup,\n  useMergedTabsterAttributes_unstable,\n  TabsterDOMAttribute,\n  useFocusFinders,\n} from '@fluentui/react-tabster';\nimport { isHTMLElement } from '@fluentui/react-utilities';\n\nexport function useTableCompositeNavigation(): {\n  onTableKeyDown: React.KeyboardEventHandler;\n  tableTabsterAttribute: TabsterDOMAttribute;\n  tableRowTabsterAttribute: TabsterDOMAttribute;\n} {\n  const horizontalAttr = useArrowNavigationGroup({ axis: 'horizontal' });\n  const gridAttr = useArrowNavigationGroup({ axis: 'grid' });\n  const groupperAttr = useFocusableGroup({ tabBehavior: 'limited-trap-focus' });\n  const { findFirstFocusable } = useFocusFinders();\n  const { targetDocument } = useFluent();\n\n  const rowAttr = useMergedTabsterAttributes_unstable(horizontalAttr, groupperAttr);\n\n  const onKeyDown: React.KeyboardEventHandler = React.useCallback(\n    e => {\n      if (!targetDocument) {\n        return;\n      }\n\n      const activeElement = targetDocument.activeElement;\n      if (!activeElement || !e.currentTarget.contains(activeElement)) {\n        return;\n      }\n      const activeElementRole = activeElement.getAttribute('role');\n\n      // Enter groupper when in row focus mode to navigate cells\n      if (e.key === ArrowRight && activeElementRole === 'row' && isHTMLElement(activeElement)) {\n        findFirstFocusable(activeElement)?.focus();\n      }\n\n      if (activeElementRole === 'row') {\n        return;\n      }\n\n      const isInCell = (() => {\n        let cur = isHTMLElement(activeElement) ? activeElement : null;\n        while (cur) {\n          const curRole = cur.getAttribute('role');\n          if (curRole === 'cell' || curRole === 'gridcell') {\n            return true;\n          }\n\n          cur = cur.parentElement;\n        }\n\n        return false;\n      })();\n\n      // Escape groupper focus trap before arrow down\n      if ((e.key === ArrowDown || e.key === ArrowUp) && isInCell) {\n        activeElement.dispatchEvent(new KeyboardEvent('keydown', { key: Escape, keyCode: keyCodes.Escape }));\n        // Tabster uses keycodes\n        // eslint-disable-next-line deprecation/deprecation\n        activeElement.dispatchEvent(new KeyboardEvent('keydown', { key: e.key, keyCode: e.keyCode }));\n      }\n    },\n    [targetDocument, findFirstFocusable],\n  );\n\n  return {\n    onTableKeyDown: onKeyDown,\n    tableTabsterAttribute: gridAttr,\n    tableRowTabsterAttribute: rowAttr,\n  };\n}\n"],"names":["React","useFluent_unstable","useFluent","ArrowDown","ArrowRight","Escape","keyCodes","ArrowUp","useArrowNavigationGroup","useFocusableGroup","useMergedTabsterAttributes_unstable","useFocusFinders","isHTMLElement","useTableCompositeNavigation","horizontalAttr","axis","gridAttr","groupperAttr","tabBehavior","findFirstFocusable","targetDocument","rowAttr","onKeyDown","useCallback","e","activeElement","currentTarget","contains","activeElementRole","getAttribute","key","focus","isInCell","cur","curRole","parentElement","dispatchEvent","KeyboardEvent","keyCode","onTableKeyDown","tableTabsterAttribute","tableRowTabsterAttribute"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,sBAAsBC,SAAS,QAAQ,kCAAkC;AAClF,SAASC,SAAS,EAAEC,UAAU,EAAEC,MAAM,EAAEC,QAAQ,EAAEC,OAAO,QAAQ,0BAA0B;AAC3F,SACEC,uBAAuB,EACvBC,iBAAiB,EACjBC,mCAAmC,EAEnCC,eAAe,QACV,0BAA0B;AACjC,SAASC,aAAa,QAAQ,4BAA4B;AAE1D,OAAO,SAASC;IAKd,MAAMC,iBAAiBN,wBAAwB;QAAEO,MAAM;IAAa;IACpE,MAAMC,WAAWR,wBAAwB;QAAEO,MAAM;IAAO;IACxD,MAAME,eAAeR,kBAAkB;QAAES,aAAa;IAAqB;IAC3E,MAAM,EAAEC,kBAAkB,EAAE,GAAGR;IAC/B,MAAM,EAAES,cAAc,EAAE,GAAGlB;IAE3B,MAAMmB,UAAUX,oCAAoCI,gBAAgBG;IAEpE,MAAMK,YAAwCtB,MAAMuB,WAAW,CAC7DC,CAAAA;QACE,IAAI,CAACJ,gBAAgB;YACnB;QACF;QAEA,MAAMK,gBAAgBL,eAAeK,aAAa;QAClD,IAAI,CAACA,iBAAiB,CAACD,EAAEE,aAAa,CAACC,QAAQ,CAACF,gBAAgB;YAC9D;QACF;QACA,MAAMG,oBAAoBH,cAAcI,YAAY,CAAC;QAErD,0DAA0D;QAC1D,IAAIL,EAAEM,GAAG,KAAK1B,cAAcwB,sBAAsB,SAAShB,cAAca,gBAAgB;gBACvFN;aAAAA,sBAAAA,mBAAmBM,4BAAnBN,0CAAAA,oBAAmCY,KAAK;QAC1C;QAEA,IAAIH,sBAAsB,OAAO;YAC/B;QACF;QAEA,MAAMI,WAAW,AAAC,CAAA;YAChB,IAAIC,MAAMrB,cAAca,iBAAiBA,gBAAgB;YACzD,MAAOQ,IAAK;gBACV,MAAMC,UAAUD,IAAIJ,YAAY,CAAC;gBACjC,IAAIK,YAAY,UAAUA,YAAY,YAAY;oBAChD,OAAO;gBACT;gBAEAD,MAAMA,IAAIE,aAAa;YACzB;YAEA,OAAO;QACT,CAAA;QAEA,+CAA+C;QAC/C,IAAI,AAACX,CAAAA,EAAEM,GAAG,KAAK3B,aAAaqB,EAAEM,GAAG,KAAKvB,OAAM,KAAMyB,UAAU;YAC1DP,cAAcW,aAAa,CAAC,IAAIC,cAAc,WAAW;gBAAEP,KAAKzB;gBAAQiC,SAAShC,SAASD,MAAM;YAAC;YACjG,wBAAwB;YACxB,mDAAmD;YACnDoB,cAAcW,aAAa,CAAC,IAAIC,cAAc,WAAW;gBAAEP,KAAKN,EAAEM,GAAG;gBAAEQ,SAASd,EAAEc,OAAO;YAAC;QAC5F;IACF,GACA;QAAClB;QAAgBD;KAAmB;IAGtC,OAAO;QACLoB,gBAAgBjB;QAChBkB,uBAAuBxB;QACvByB,0BAA0BpB;IAC5B;AACF"}

package/lib/hooks/useTableFeatures.js

@@ -15,16 +15,15 @@ export const defaultTableState = {
     tableRef: React.createRef()
 };
 export function useTableFeatures(options, plugins = []) {
-    const { items , getRowId , columns  } = options;
+    const { items, getRowId, columns } = options;
     var _getRowId;
-    const getRows = (rowEnhancer = defaultRowEnhancer)=>{
-        return items.map((item, i)=>{
+    const getRows = (rowEnhancer = defaultRowEnhancer)=>items.map((item, i)=>{
+            var _getRowId1;
             return rowEnhancer({
                 item,
-                rowId: (_getRowId = getRowId === null || getRowId === void 0 ? void 0 : getRowId(item)) !== null && _getRowId !== void 0 ? _getRowId : i
+                rowId: (_getRowId = (_getRowId1 = getRowId) === null || _getRowId1 === void 0 ? void 0 : _getRowId1(item)) !== null && _getRowId !== void 0 ? _getRowId : i
             });
         });
-    };
     const initialState = {
         getRowId,
         items,

package/lib/hooks/useTableFeatures.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useTableFeatures.ts"],"sourcesContent":["import * as React from 'react';\nimport type {\n  UseTableFeaturesOptions,\n  TableFeaturesState,\n  TableRowData,\n  RowEnhancer,\n  TableFeaturePlugin,\n  TableSortState,\n} from './types';\nimport { defaultTableSelectionState } from './useTableSelection';\nimport { defaultTableSortState } from './useTableSort';\nimport { defaultColumnSizingState } from './useTableColumnSizing';\n\nconst defaultRowEnhancer: RowEnhancer<unknown, TableRowData<unknown>> = row => row;\n\nexport const defaultTableState: TableFeaturesState<unknown> = {\n  selection: defaultTableSelectionState,\n  sort: defaultTableSortState,\n  getRows: () => [],\n  getRowId: () => '',\n  items: [],\n  columns: [],\n  // eslint-disable-next-line @typescript-eslint/naming-convention\n  columnSizing_unstable: defaultColumnSizingState,\n  tableRef: React.createRef<HTMLDivElement>(),\n};\n\nexport function useTableFeatures<TItem>(\n  options: UseTableFeaturesOptions<TItem>,\n  plugins: TableFeaturePlugin[] = [],\n): TableFeaturesState<TItem> {\n  const { items, getRowId, columns } = options;\n\n  const getRows = <TRowState extends TableRowData<TItem>>(\n    rowEnhancer = defaultRowEnhancer as RowEnhancer<TItem, TRowState>,\n  ) => items.map((item, i) => rowEnhancer({ item, rowId: getRowId?.(item) ?? i }));\n\n  const initialState: TableFeaturesState<TItem> = {\n    getRowId,\n    items,\n    columns,\n    getRows,\n    selection: defaultTableSelectionState,\n    sort: defaultTableSortState as TableSortState<TItem>,\n    // eslint-disable-next-line @typescript-eslint/naming-convention\n    columnSizing_unstable: defaultColumnSizingState,\n    tableRef: React.createRef(),\n  };\n\n  return plugins.reduce((state, plugin) => plugin(state), initialState);\n}\n"],"names":["React","defaultTableSelectionState","defaultTableSortState","defaultColumnSizingState","defaultRowEnhancer","row","defaultTableState","selection","sort","getRows","getRowId","items","columns","columnSizing_unstable","tableRef","createRef","useTableFeatures","options","plugins","rowEnhancer","map","item","i","rowId","initialState","reduce","state","plugin"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAS/B,SAASC,0BAA0B,QAAQ,sBAAsB;AACjE,SAASC,qBAAqB,QAAQ,iBAAiB;AACvD,SAASC,wBAAwB,QAAQ,yBAAyB;AAElE,MAAMC,qBAAkEC,CAAAA,MAAOA;AAE/E,OAAO,MAAMC,oBAAiD;IAC5DC,WAAWN;IACXO,MAAMN;IACNO,SAAS,IAAM,EAAE;IACjBC,UAAU,IAAM;IAChBC,OAAO,EAAE;IACTC,SAAS,EAAE;IACX,gEAAgE;IAChEC,uBAAuBV;IACvBW,UAAUd,MAAMe,SAAS;AAC3B,EAAE;AAEF,OAAO,SAASC,iBACdC,OAAuC,EACvCC,UAAgC,EAAE,EACP;IAC3B,MAAM,EAAEP,MAAK,EAAED,SAAQ,EAAEE,QAAO,EAAE,GAAGK;QAIkBP;IAFvD,MAAMD,UAAU,CACdU,cAAcf,kBAAmD;QAC9DO,OAAAA,MAAMS,GAAG,CAAC,CAACC,MAAMC;YAAMH,OAAAA,YAAY;gBAAEE;gBAAME,OAAOb,CAAAA,YAAAA,qBAAAA,sBAAAA,KAAAA,IAAAA,SAAWW,mBAAXX,uBAAAA,YAAoBY,CAAC;YAAC;;;IAE7E,MAAME,eAA0C;QAC9Cd;QACAC;QACAC;QACAH;QACAF,WAAWN;QACXO,MAAMN;QACN,gEAAgE;QAChEW,uBAAuBV;QACvBW,UAAUd,MAAMe,SAAS;IAC3B;IAEA,OAAOG,QAAQO,MAAM,CAAC,CAACC,OAAOC,SAAWA,OAAOD,QAAQF;AAC1D,CAAC"}
+{"version":3,"sources":["useTableFeatures.ts"],"sourcesContent":["import * as React from 'react';\nimport type {\n  UseTableFeaturesOptions,\n  TableFeaturesState,\n  TableRowData,\n  RowEnhancer,\n  TableFeaturePlugin,\n  TableSortState,\n} from './types';\nimport { defaultTableSelectionState } from './useTableSelection';\nimport { defaultTableSortState } from './useTableSort';\nimport { defaultColumnSizingState } from './useTableColumnSizing';\n\nconst defaultRowEnhancer: RowEnhancer<unknown, TableRowData<unknown>> = row => row;\n\nexport const defaultTableState: TableFeaturesState<unknown> = {\n  selection: defaultTableSelectionState,\n  sort: defaultTableSortState,\n  getRows: () => [],\n  getRowId: () => '',\n  items: [],\n  columns: [],\n  // eslint-disable-next-line @typescript-eslint/naming-convention\n  columnSizing_unstable: defaultColumnSizingState,\n  tableRef: React.createRef<HTMLDivElement>(),\n};\n\nexport function useTableFeatures<TItem>(\n  options: UseTableFeaturesOptions<TItem>,\n  plugins: TableFeaturePlugin[] = [],\n): TableFeaturesState<TItem> {\n  const { items, getRowId, columns } = options;\n\n  const getRows = <TRowState extends TableRowData<TItem>>(\n    rowEnhancer = defaultRowEnhancer as RowEnhancer<TItem, TRowState>,\n  ) => items.map((item, i) => rowEnhancer({ item, rowId: getRowId?.(item) ?? i }));\n\n  const initialState: TableFeaturesState<TItem> = {\n    getRowId,\n    items,\n    columns,\n    getRows,\n    selection: defaultTableSelectionState,\n    sort: defaultTableSortState as TableSortState<TItem>,\n    // eslint-disable-next-line @typescript-eslint/naming-convention\n    columnSizing_unstable: defaultColumnSizingState,\n    tableRef: React.createRef(),\n  };\n\n  return plugins.reduce((state, plugin) => plugin(state), initialState);\n}\n"],"names":["React","defaultTableSelectionState","defaultTableSortState","defaultColumnSizingState","defaultRowEnhancer","row","defaultTableState","selection","sort","getRows","getRowId","items","columns","columnSizing_unstable","tableRef","createRef","useTableFeatures","options","plugins","rowEnhancer","map","item","i","rowId","initialState","reduce","state","plugin"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAS/B,SAASC,0BAA0B,QAAQ,sBAAsB;AACjE,SAASC,qBAAqB,QAAQ,iBAAiB;AACvD,SAASC,wBAAwB,QAAQ,yBAAyB;AAElE,MAAMC,qBAAkEC,CAAAA,MAAOA;AAE/E,OAAO,MAAMC,oBAAiD;IAC5DC,WAAWN;IACXO,MAAMN;IACNO,SAAS,IAAM,EAAE;IACjBC,UAAU,IAAM;IAChBC,OAAO,EAAE;IACTC,SAAS,EAAE;IACX,gEAAgE;IAChEC,uBAAuBV;IACvBW,UAAUd,MAAMe,SAAS;AAC3B,EAAE;AAEF,OAAO,SAASC,iBACdC,OAAuC,EACvCC,UAAgC,EAAE;IAElC,MAAM,EAAEP,KAAK,EAAED,QAAQ,EAAEE,OAAO,EAAE,GAAGK;QAIkBP;IAFvD,MAAMD,UAAU,CACdU,cAAcf,kBAAmD,GAC9DO,MAAMS,GAAG,CAAC,CAACC,MAAMC;gBAAiCZ;mBAA3BS,YAAY;gBAAEE;gBAAME,OAAOb,CAAAA,aAAAA,aAAAA,sBAAAA,iCAAAA,WAAWW,mBAAXX,uBAAAA,YAAoBY;YAAE;;IAE7E,MAAME,eAA0C;QAC9Cd;QACAC;QACAC;QACAH;QACAF,WAAWN;QACXO,MAAMN;QACN,gEAAgE;QAChEW,uBAAuBV;QACvBW,UAAUd,MAAMe,SAAS;IAC3B;IAEA,OAAOG,QAAQO,MAAM,CAAC,CAACC,OAAOC,SAAWA,OAAOD,QAAQF;AAC1D"}

package/lib/hooks/useTableSelection.js

@@ -19,8 +19,8 @@ export function useTableSelection(options) {
     return (tableState)=>useTableSelectionState(tableState, options);
 }
 export function useTableSelectionState(tableState, options) {
-    const { items , getRowId  } = tableState;
-    const { selectionMode: selectionMode , defaultSelectedItems , selectedItems , onSelectionChange  } = options;
+    const { items, getRowId } = tableState;
+    const { selectionMode: selectionMode, defaultSelectedItems, selectedItems, onSelectionChange } = options;
     const [selected, selectionMethods] = useSelection({
         selectionMode,
         defaultSelectedItems,
@@ -32,7 +32,8 @@ export function useTableSelectionState(tableState, options) {
         const rowIds = new Set();
         for(let i = 0; i < items.length; i++){
             var _getRowId;
-            rowIds.add((_getRowId = getRowId === null || getRowId === void 0 ? void 0 : getRowId(items[i])) !== null && _getRowId !== void 0 ? _getRowId : i);
+            var _getRowId1;
+            rowIds.add((_getRowId1 = (_getRowId = getRowId) === null || _getRowId === void 0 ? void 0 : _getRowId(items[i])) !== null && _getRowId1 !== void 0 ? _getRowId1 : i);
         }
         return rowIds;
     }, [
@@ -78,7 +79,8 @@ export function useTableSelectionState(tableState, options) {
     const toggleAllRows = useEventCallback((e)=>{
         var _getRowId;
         selectionMethods.toggleAllItems(e, items.map((item, i)=>{
-            return (_getRowId = getRowId === null || getRowId === void 0 ? void 0 : getRowId(item)) !== null && _getRowId !== void 0 ? _getRowId : i;
+            var _getRowId1;
+            return (_getRowId = (_getRowId1 = getRowId) === null || _getRowId1 === void 0 ? void 0 : _getRowId1(item)) !== null && _getRowId !== void 0 ? _getRowId : i;
         }));
     });
     const toggleRow = useEventCallback((e, rowId)=>selectionMethods.toggleItem(e, rowId));

package/lib/hooks/useTableSelection.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useTableSelection.ts"],"sourcesContent":["import * as React from 'react';\nimport { SelectionHookParams, useEventCallback, useSelection } from '@fluentui/react-utilities';\nimport type { TableRowId, TableSelectionState, TableFeaturesState } from './types';\n\nconst noop = () => undefined;\n\nexport const defaultTableSelectionState: TableSelectionState = {\n  allRowsSelected: false,\n  clearRows: noop,\n  deselectRow: noop,\n  isRowSelected: () => false,\n  selectRow: noop,\n  selectedRows: new Set(),\n  someRowsSelected: false,\n  toggleAllRows: noop,\n  toggleRow: noop,\n  selectionMode: 'multiselect',\n};\n\nexport function useTableSelection<TItem>(options: SelectionHookParams) {\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>) => useTableSelectionState(tableState, options);\n}\n\nexport function useTableSelectionState<TItem>(\n  tableState: TableFeaturesState<TItem>,\n  options: SelectionHookParams,\n): TableFeaturesState<TItem> {\n  const { items, getRowId } = tableState;\n  const { selectionMode: selectionMode, defaultSelectedItems, selectedItems, onSelectionChange } = options;\n\n  const [selected, selectionMethods] = useSelection({\n    selectionMode,\n    defaultSelectedItems,\n    selectedItems,\n    onSelectionChange,\n  });\n\n  // Selection state can contain obselete items (i.e. rows that are removed)\n  const selectableRowIds = React.useMemo(() => {\n    const rowIds = new Set<TableRowId>();\n    for (let i = 0; i < items.length; i++) {\n      rowIds.add(getRowId?.(items[i]) ?? i);\n    }\n\n    return rowIds;\n  }, [items, getRowId]);\n\n  const allRowsSelected = React.useMemo(() => {\n    if (selectionMode === 'single') {\n      const selectedRow = Array.from(selected)[0];\n      return selectableRowIds.has(selectedRow);\n    }\n\n    // multiselect case\n    if (selected.size < selectableRowIds.size) {\n      return false;\n    }\n\n    let res = true;\n    selectableRowIds.forEach(selectableRowId => {\n      if (!selected.has(selectableRowId)) {\n        res = false;\n      }\n    });\n\n    return res;\n  }, [selectableRowIds, selected, selectionMode]);\n\n  const someRowsSelected = React.useMemo(() => {\n    if (selected.size <= 0) {\n      return false;\n    }\n\n    let res = false;\n    selectableRowIds.forEach(selectableRowId => {\n      if (selected.has(selectableRowId)) {\n        res = true;\n      }\n    });\n\n    return res;\n  }, [selectableRowIds, selected]);\n\n  const toggleAllRows: TableSelectionState['toggleAllRows'] = useEventCallback(e => {\n    selectionMethods.toggleAllItems(\n      e,\n      items.map((item, i) => getRowId?.(item) ?? i),\n    );\n  });\n\n  const toggleRow: TableSelectionState['toggleRow'] = useEventCallback((e, rowId: TableRowId) =>\n    selectionMethods.toggleItem(e, rowId),\n  );\n\n  const deselectRow: TableSelectionState['deselectRow'] = useEventCallback((e, rowId: TableRowId) =>\n    selectionMethods.deselectItem(e, rowId),\n  );\n\n  const selectRow: TableSelectionState['selectRow'] = useEventCallback((e, rowId: TableRowId) =>\n    selectionMethods.selectItem(e, rowId),\n  );\n\n  const isRowSelected: TableSelectionState['isRowSelected'] = (rowId: TableRowId) => selectionMethods.isSelected(rowId);\n\n  const clearRows: TableSelectionState['clearRows'] = useEventCallback(e => selectionMethods.clearItems(e));\n\n  return {\n    ...tableState,\n    selection: {\n      selectionMode,\n      someRowsSelected,\n      allRowsSelected,\n      selectedRows: selected,\n      toggleRow,\n      toggleAllRows,\n      clearRows,\n      deselectRow,\n      selectRow,\n      isRowSelected,\n    },\n  };\n}\n"],"names":["React","useEventCallback","useSelection","noop","undefined","defaultTableSelectionState","allRowsSelected","clearRows","deselectRow","isRowSelected","selectRow","selectedRows","Set","someRowsSelected","toggleAllRows","toggleRow","selectionMode","useTableSelection","options","tableState","useTableSelectionState","items","getRowId","defaultSelectedItems","selectedItems","onSelectionChange","selected","selectionMethods","selectableRowIds","useMemo","rowIds","i","length","add","selectedRow","Array","from","has","size","res","forEach","selectableRowId","e","toggleAllItems","map","item","rowId","toggleItem","deselectItem","selectItem","isSelected","clearItems","selection"],"mappings":"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"}
+{"version":3,"sources":["useTableSelection.ts"],"sourcesContent":["import * as React from 'react';\nimport { SelectionHookParams, useEventCallback, useSelection } from '@fluentui/react-utilities';\nimport type { TableRowId, TableSelectionState, TableFeaturesState } from './types';\n\nconst noop = () => undefined;\n\nexport const defaultTableSelectionState: TableSelectionState = {\n  allRowsSelected: false,\n  clearRows: noop,\n  deselectRow: noop,\n  isRowSelected: () => false,\n  selectRow: noop,\n  selectedRows: new Set(),\n  someRowsSelected: false,\n  toggleAllRows: noop,\n  toggleRow: noop,\n  selectionMode: 'multiselect',\n};\n\nexport function useTableSelection<TItem>(options: SelectionHookParams) {\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>) => useTableSelectionState(tableState, options);\n}\n\nexport function useTableSelectionState<TItem>(\n  tableState: TableFeaturesState<TItem>,\n  options: SelectionHookParams,\n): TableFeaturesState<TItem> {\n  const { items, getRowId } = tableState;\n  const { selectionMode: selectionMode, defaultSelectedItems, selectedItems, onSelectionChange } = options;\n\n  const [selected, selectionMethods] = useSelection({\n    selectionMode,\n    defaultSelectedItems,\n    selectedItems,\n    onSelectionChange,\n  });\n\n  // Selection state can contain obselete items (i.e. rows that are removed)\n  const selectableRowIds = React.useMemo(() => {\n    const rowIds = new Set<TableRowId>();\n    for (let i = 0; i < items.length; i++) {\n      rowIds.add(getRowId?.(items[i]) ?? i);\n    }\n\n    return rowIds;\n  }, [items, getRowId]);\n\n  const allRowsSelected = React.useMemo(() => {\n    if (selectionMode === 'single') {\n      const selectedRow = Array.from(selected)[0];\n      return selectableRowIds.has(selectedRow);\n    }\n\n    // multiselect case\n    if (selected.size < selectableRowIds.size) {\n      return false;\n    }\n\n    let res = true;\n    selectableRowIds.forEach(selectableRowId => {\n      if (!selected.has(selectableRowId)) {\n        res = false;\n      }\n    });\n\n    return res;\n  }, [selectableRowIds, selected, selectionMode]);\n\n  const someRowsSelected = React.useMemo(() => {\n    if (selected.size <= 0) {\n      return false;\n    }\n\n    let res = false;\n    selectableRowIds.forEach(selectableRowId => {\n      if (selected.has(selectableRowId)) {\n        res = true;\n      }\n    });\n\n    return res;\n  }, [selectableRowIds, selected]);\n\n  const toggleAllRows: TableSelectionState['toggleAllRows'] = useEventCallback(e => {\n    selectionMethods.toggleAllItems(\n      e,\n      items.map((item, i) => getRowId?.(item) ?? i),\n    );\n  });\n\n  const toggleRow: TableSelectionState['toggleRow'] = useEventCallback((e, rowId: TableRowId) =>\n    selectionMethods.toggleItem(e, rowId),\n  );\n\n  const deselectRow: TableSelectionState['deselectRow'] = useEventCallback((e, rowId: TableRowId) =>\n    selectionMethods.deselectItem(e, rowId),\n  );\n\n  const selectRow: TableSelectionState['selectRow'] = useEventCallback((e, rowId: TableRowId) =>\n    selectionMethods.selectItem(e, rowId),\n  );\n\n  const isRowSelected: TableSelectionState['isRowSelected'] = (rowId: TableRowId) => selectionMethods.isSelected(rowId);\n\n  const clearRows: TableSelectionState['clearRows'] = useEventCallback(e => selectionMethods.clearItems(e));\n\n  return {\n    ...tableState,\n    selection: {\n      selectionMode,\n      someRowsSelected,\n      allRowsSelected,\n      selectedRows: selected,\n      toggleRow,\n      toggleAllRows,\n      clearRows,\n      deselectRow,\n      selectRow,\n      isRowSelected,\n    },\n  };\n}\n"],"names":["React","useEventCallback","useSelection","noop","undefined","defaultTableSelectionState","allRowsSelected","clearRows","deselectRow","isRowSelected","selectRow","selectedRows","Set","someRowsSelected","toggleAllRows","toggleRow","selectionMode","useTableSelection","options","tableState","useTableSelectionState","items","getRowId","defaultSelectedItems","selectedItems","onSelectionChange","selected","selectionMethods","selectableRowIds","useMemo","rowIds","i","length","add","selectedRow","Array","from","has","size","res","forEach","selectableRowId","e","toggleAllItems","map","item","rowId","toggleItem","deselectItem","selectItem","isSelected","clearItems","selection"],"mappings":"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"}

package/lib/hooks/useTableSort.js

@@ -17,8 +17,8 @@ export function useTableSort(options) {
     return (tableState)=>useTableSortState(tableState, options);
 }
 export function useTableSortState(tableState, options) {
-    const { columns  } = tableState;
-    const { sortState , defaultSortState , onSortChange  } = options;
+    const { columns } = tableState;
+    const { sortState, defaultSortState, onSortChange } = options;
     const [sorted, setSorted] = useControllableState({
         initialState: {
             sortDirection: 'ascending',
@@ -27,9 +27,10 @@ export function useTableSortState(tableState, options) {
         defaultState: defaultSortState,
         state: sortState
     });
-    const { sortColumn , sortDirection  } = sorted;
+    const { sortColumn, sortDirection } = sorted;
     const toggleColumnSort = (e, columnId)=>{
         setSorted((s)=>{
+            var _onSortChange;
             const newState = {
                 ...s,
                 sortColumn: columnId
@@ -39,22 +40,24 @@ export function useTableSortState(tableState, options) {
             } else {
                 newState.sortDirection = 'ascending';
             }
-            onSortChange === null || onSortChange === void 0 ? void 0 : onSortChange(e, newState);
+            (_onSortChange = onSortChange) === null || _onSortChange === void 0 ? void 0 : _onSortChange(e, newState);
             return newState;
         });
     };
     const setColumnSort = (e, nextSortColumn, nextSortDirection)=>{
+        var _onSortChange;
         const newState = {
             sortColumn: nextSortColumn,
             sortDirection: nextSortDirection
         };
-        onSortChange === null || onSortChange === void 0 ? void 0 : onSortChange(e, newState);
+        (_onSortChange = onSortChange) === null || _onSortChange === void 0 ? void 0 : _onSortChange(e, newState);
         setSorted(newState);
     };
     const sort = (rows)=>{
         return rows.slice().sort((a, b)=>{
+            var _sortColumnDef;
             const sortColumnDef = columns.find((column)=>column.columnId === sortColumn);
-            if (!(sortColumnDef === null || sortColumnDef === void 0 ? void 0 : sortColumnDef.compare)) {
+            if (!((_sortColumnDef = sortColumnDef) === null || _sortColumnDef === void 0 ? void 0 : _sortColumnDef.compare)) {
                 return 0;
             }
             const mod = sortDirection === 'ascending' ? 1 : -1;

package/lib/hooks/useTableSort.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useTableSort.ts"],"sourcesContent":["import * as React from 'react';\nimport { useControllableState } from '@fluentui/react-utilities';\nimport type {\n  TableColumnId,\n  TableRowData,\n  SortState,\n  TableSortState,\n  TableFeaturesState,\n  UseTableSortOptions,\n} from './types';\n\nconst noop = () => undefined;\n\nexport const defaultTableSortState: TableSortState<unknown> = {\n  getSortDirection: () => 'ascending',\n  setColumnSort: noop,\n  sort: <TRowState extends TableRowData<unknown>>(rows: TRowState[]) => [...rows],\n  sortColumn: undefined,\n  sortDirection: 'ascending',\n  toggleColumnSort: noop,\n};\n\nexport function useTableSort<TItem>(options: UseTableSortOptions) {\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>) => useTableSortState(tableState, options);\n}\n\nexport function useTableSortState<TItem>(\n  tableState: TableFeaturesState<TItem>,\n  options: UseTableSortOptions,\n): TableFeaturesState<TItem> {\n  const { columns } = tableState;\n  const { sortState, defaultSortState, onSortChange } = options;\n\n  const [sorted, setSorted] = useControllableState<SortState>({\n    initialState: {\n      sortDirection: 'ascending' as const,\n      sortColumn: undefined,\n    },\n    defaultState: defaultSortState,\n    state: sortState,\n  });\n\n  const { sortColumn, sortDirection } = sorted;\n\n  const toggleColumnSort = (e: React.SyntheticEvent, columnId: TableColumnId | undefined) => {\n    setSorted(s => {\n      const newState = { ...s, sortColumn: columnId };\n      if (s.sortColumn === columnId) {\n        newState.sortDirection = s.sortDirection === 'ascending' ? 'descending' : 'ascending';\n      } else {\n        newState.sortDirection = 'ascending';\n      }\n\n      onSortChange?.(e, newState);\n      return newState;\n    });\n  };\n\n  const setColumnSort: TableSortState<TItem>['setColumnSort'] = (e, nextSortColumn, nextSortDirection) => {\n    const newState = { sortColumn: nextSortColumn, sortDirection: nextSortDirection };\n    onSortChange?.(e, newState);\n    setSorted(newState);\n  };\n\n  const sort = <TRowState extends TableRowData<TItem>>(rows: TRowState[]) => {\n    return rows.slice().sort((a, b) => {\n      const sortColumnDef = columns.find(column => column.columnId === sortColumn);\n      if (!sortColumnDef?.compare) {\n        return 0;\n      }\n\n      const mod = sortDirection === 'ascending' ? 1 : -1;\n      return sortColumnDef.compare(a.item, b.item) * mod;\n    });\n  };\n\n  const getSortDirection: TableSortState<TItem>['getSortDirection'] = (columnId: TableColumnId) => {\n    return sortColumn === columnId ? sortDirection : undefined;\n  };\n\n  return {\n    ...tableState,\n    sort: {\n      sort,\n      sortColumn,\n      sortDirection,\n      setColumnSort,\n      toggleColumnSort,\n      getSortDirection,\n    },\n  };\n}\n"],"names":["React","useControllableState","noop","undefined","defaultTableSortState","getSortDirection","setColumnSort","sort","rows","sortColumn","sortDirection","toggleColumnSort","useTableSort","options","tableState","useTableSortState","columns","sortState","defaultSortState","onSortChange","sorted","setSorted","initialState","defaultState","state","e","columnId","s","newState","nextSortColumn","nextSortDirection","slice","a","b","sortColumnDef","find","column","compare","mod","item"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,oBAAoB,QAAQ,4BAA4B;AAUjE,MAAMC,OAAO,IAAMC;AAEnB,OAAO,MAAMC,wBAAiD;IAC5DC,kBAAkB,IAAM;IACxBC,eAAeJ;IACfK,MAAM,CAA0CC,OAAsB;eAAIA;SAAK;IAC/EC,YAAYN;IACZO,eAAe;IACfC,kBAAkBT;AACpB,EAAE;AAEF,OAAO,SAASU,aAAoBC,OAA4B,EAAE;IAChE,4EAA4E;IAC5E,sDAAsD;IACtD,OAAO,CAACC,aAA0CC,kBAAkBD,YAAYD;AAClF,CAAC;AAED,OAAO,SAASE,kBACdD,UAAqC,EACrCD,OAA4B,EACD;IAC3B,MAAM,EAAEG,QAAO,EAAE,GAAGF;IACpB,MAAM,EAAEG,UAAS,EAAEC,iBAAgB,EAAEC,aAAY,EAAE,GAAGN;IAEtD,MAAM,CAACO,QAAQC,UAAU,GAAGpB,qBAAgC;QAC1DqB,cAAc;YACZZ,eAAe;YACfD,YAAYN;QACd;QACAoB,cAAcL;QACdM,OAAOP;IACT;IAEA,MAAM,EAAER,WAAU,EAAEC,cAAa,EAAE,GAAGU;IAEtC,MAAMT,mBAAmB,CAACc,GAAyBC,WAAwC;QACzFL,UAAUM,CAAAA,IAAK;YACb,MAAMC,WAAW;gBAAE,GAAGD,CAAC;gBAAElB,YAAYiB;YAAS;YAC9C,IAAIC,EAAElB,UAAU,KAAKiB,UAAU;gBAC7BE,SAASlB,aAAa,GAAGiB,EAAEjB,aAAa,KAAK,cAAc,eAAe,WAAW;YACvF,OAAO;gBACLkB,SAASlB,aAAa,GAAG;YAC3B,CAAC;YAEDS,yBAAAA,0BAAAA,KAAAA,IAAAA,aAAeM,GAAGG;YAClB,OAAOA;QACT;IACF;IAEA,MAAMtB,gBAAwD,CAACmB,GAAGI,gBAAgBC,oBAAsB;QACtG,MAAMF,WAAW;YAAEnB,YAAYoB;YAAgBnB,eAAeoB;QAAkB;QAChFX,yBAAAA,0BAAAA,KAAAA,IAAAA,aAAeM,GAAGG;QAClBP,UAAUO;IACZ;IAEA,MAAMrB,OAAO,CAAwCC,OAAsB;QACzE,OAAOA,KAAKuB,KAAK,GAAGxB,IAAI,CAAC,CAACyB,GAAGC,IAAM;YACjC,MAAMC,gBAAgBlB,QAAQmB,IAAI,CAACC,CAAAA,SAAUA,OAAOV,QAAQ,KAAKjB;YACjE,IAAI,CAACyB,CAAAA,0BAAAA,2BAAAA,KAAAA,IAAAA,cAAeG,OAAO,AAAD,GAAG;gBAC3B,OAAO;YACT,CAAC;YAED,MAAMC,MAAM5B,kBAAkB,cAAc,IAAI,CAAC,CAAC;YAClD,OAAOwB,cAAcG,OAAO,CAACL,EAAEO,IAAI,EAAEN,EAAEM,IAAI,IAAID;QACjD;IACF;IAEA,MAAMjC,mBAA8D,CAACqB,WAA4B;QAC/F,OAAOjB,eAAeiB,WAAWhB,gBAAgBP,SAAS;IAC5D;IAEA,OAAO;QACL,GAAGW,UAAU;QACbP,MAAM;YACJA;YACAE;YACAC;YACAJ;YACAK;YACAN;QACF;IACF;AACF,CAAC"}
+{"version":3,"sources":["useTableSort.ts"],"sourcesContent":["import * as React from 'react';\nimport { useControllableState } from '@fluentui/react-utilities';\nimport type {\n  TableColumnId,\n  TableRowData,\n  SortState,\n  TableSortState,\n  TableFeaturesState,\n  UseTableSortOptions,\n} from './types';\n\nconst noop = () => undefined;\n\nexport const defaultTableSortState: TableSortState<unknown> = {\n  getSortDirection: () => 'ascending',\n  setColumnSort: noop,\n  sort: <TRowState extends TableRowData<unknown>>(rows: TRowState[]) => [...rows],\n  sortColumn: undefined,\n  sortDirection: 'ascending',\n  toggleColumnSort: noop,\n};\n\nexport function useTableSort<TItem>(options: UseTableSortOptions) {\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>) => useTableSortState(tableState, options);\n}\n\nexport function useTableSortState<TItem>(\n  tableState: TableFeaturesState<TItem>,\n  options: UseTableSortOptions,\n): TableFeaturesState<TItem> {\n  const { columns } = tableState;\n  const { sortState, defaultSortState, onSortChange } = options;\n\n  const [sorted, setSorted] = useControllableState<SortState>({\n    initialState: {\n      sortDirection: 'ascending' as const,\n      sortColumn: undefined,\n    },\n    defaultState: defaultSortState,\n    state: sortState,\n  });\n\n  const { sortColumn, sortDirection } = sorted;\n\n  const toggleColumnSort = (e: React.SyntheticEvent, columnId: TableColumnId | undefined) => {\n    setSorted(s => {\n      const newState = { ...s, sortColumn: columnId };\n      if (s.sortColumn === columnId) {\n        newState.sortDirection = s.sortDirection === 'ascending' ? 'descending' : 'ascending';\n      } else {\n        newState.sortDirection = 'ascending';\n      }\n\n      onSortChange?.(e, newState);\n      return newState;\n    });\n  };\n\n  const setColumnSort: TableSortState<TItem>['setColumnSort'] = (e, nextSortColumn, nextSortDirection) => {\n    const newState = { sortColumn: nextSortColumn, sortDirection: nextSortDirection };\n    onSortChange?.(e, newState);\n    setSorted(newState);\n  };\n\n  const sort = <TRowState extends TableRowData<TItem>>(rows: TRowState[]) => {\n    return rows.slice().sort((a, b) => {\n      const sortColumnDef = columns.find(column => column.columnId === sortColumn);\n      if (!sortColumnDef?.compare) {\n        return 0;\n      }\n\n      const mod = sortDirection === 'ascending' ? 1 : -1;\n      return sortColumnDef.compare(a.item, b.item) * mod;\n    });\n  };\n\n  const getSortDirection: TableSortState<TItem>['getSortDirection'] = (columnId: TableColumnId) => {\n    return sortColumn === columnId ? sortDirection : undefined;\n  };\n\n  return {\n    ...tableState,\n    sort: {\n      sort,\n      sortColumn,\n      sortDirection,\n      setColumnSort,\n      toggleColumnSort,\n      getSortDirection,\n    },\n  };\n}\n"],"names":["React","useControllableState","noop","undefined","defaultTableSortState","getSortDirection","setColumnSort","sort","rows","sortColumn","sortDirection","toggleColumnSort","useTableSort","options","tableState","useTableSortState","columns","sortState","defaultSortState","onSortChange","sorted","setSorted","initialState","defaultState","state","e","columnId","s","newState","nextSortColumn","nextSortDirection","slice","a","b","sortColumnDef","find","column","compare","mod","item"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,oBAAoB,QAAQ,4BAA4B;AAUjE,MAAMC,OAAO,IAAMC;AAEnB,OAAO,MAAMC,wBAAiD;IAC5DC,kBAAkB,IAAM;IACxBC,eAAeJ;IACfK,MAAM,CAA0CC,OAAsB;eAAIA;SAAK;IAC/EC,YAAYN;IACZO,eAAe;IACfC,kBAAkBT;AACpB,EAAE;AAEF,OAAO,SAASU,aAAoBC,OAA4B;IAC9D,4EAA4E;IAC5E,sDAAsD;IACtD,OAAO,CAACC,aAA0CC,kBAAkBD,YAAYD;AAClF;AAEA,OAAO,SAASE,kBACdD,UAAqC,EACrCD,OAA4B;IAE5B,MAAM,EAAEG,OAAO,EAAE,GAAGF;IACpB,MAAM,EAAEG,SAAS,EAAEC,gBAAgB,EAAEC,YAAY,EAAE,GAAGN;IAEtD,MAAM,CAACO,QAAQC,UAAU,GAAGpB,qBAAgC;QAC1DqB,cAAc;YACZZ,eAAe;YACfD,YAAYN;QACd;QACAoB,cAAcL;QACdM,OAAOP;IACT;IAEA,MAAM,EAAER,UAAU,EAAEC,aAAa,EAAE,GAAGU;IAEtC,MAAMT,mBAAmB,CAACc,GAAyBC;QACjDL,UAAUM,CAAAA;gBAQRR;YAPA,MAAMS,WAAW;gBAAE,GAAGD,CAAC;gBAAElB,YAAYiB;YAAS;YAC9C,IAAIC,EAAElB,UAAU,KAAKiB,UAAU;gBAC7BE,SAASlB,aAAa,GAAGiB,EAAEjB,aAAa,KAAK,cAAc,eAAe;YAC5E,OAAO;gBACLkB,SAASlB,aAAa,GAAG;YAC3B;aAEAS,gBAAAA,0BAAAA,oCAAAA,cAAeM,GAAGG;YAClB,OAAOA;QACT;IACF;IAEA,MAAMtB,gBAAwD,CAACmB,GAAGI,gBAAgBC;YAEhFX;QADA,MAAMS,WAAW;YAAEnB,YAAYoB;YAAgBnB,eAAeoB;QAAkB;SAChFX,gBAAAA,0BAAAA,oCAAAA,cAAeM,GAAGG;QAClBP,UAAUO;IACZ;IAEA,MAAMrB,OAAO,CAAwCC;QACnD,OAAOA,KAAKuB,KAAK,GAAGxB,IAAI,CAAC,CAACyB,GAAGC;gBAEtBC;YADL,MAAMA,gBAAgBlB,QAAQmB,IAAI,CAACC,CAAAA,SAAUA,OAAOV,QAAQ,KAAKjB;YACjE,IAAI,GAACyB,iBAAAA,2BAAAA,qCAAAA,eAAeG,OAAO,GAAE;gBAC3B,OAAO;YACT;YAEA,MAAMC,MAAM5B,kBAAkB,cAAc,IAAI,CAAC;YACjD,OAAOwB,cAAcG,OAAO,CAACL,EAAEO,IAAI,EAAEN,EAAEM,IAAI,IAAID;QACjD;IACF;IAEA,MAAMjC,mBAA8D,CAACqB;QACnE,OAAOjB,eAAeiB,WAAWhB,gBAAgBP;IACnD;IAEA,OAAO;QACL,GAAGW,UAAU;QACbP,MAAM;YACJA;YACAE;YACAC;YACAJ;YACAK;YACAN;QACF;IACF;AACF"}

package/lib/utils/columnResizeUtils.js

@@ -19,7 +19,7 @@ const DEFAULT_MIN_WIDTH = 100;
         const existingColumnState = stateMap.get(column.columnId);
         if (existingColumnState) {
             var _columnSizingOptions_column_columnId;
-            const { idealWidth =existingColumnState.idealWidth , minWidth =existingColumnState.minWidth , padding =existingColumnState.padding  } = (_columnSizingOptions_column_columnId = columnSizingOptions[column.columnId]) !== null && _columnSizingOptions_column_columnId !== void 0 ? _columnSizingOptions_column_columnId : {};
+            const { idealWidth = existingColumnState.idealWidth, minWidth = existingColumnState.minWidth, padding = existingColumnState.padding } = (_columnSizingOptions_column_columnId = columnSizingOptions[column.columnId]) !== null && _columnSizingOptions_column_columnId !== void 0 ? _columnSizingOptions_column_columnId : {};
             if (idealWidth !== existingColumnState.idealWidth || minWidth !== existingColumnState.minWidth || padding !== existingColumnState.padding) {
                 updated = true;
                 return {
@@ -33,7 +33,7 @@ const DEFAULT_MIN_WIDTH = 100;
             return existingColumnState;
         }
         var _columnSizingOptions_column_columnId1;
-        const { defaultWidth , idealWidth =DEFAULT_WIDTH , minWidth =DEFAULT_MIN_WIDTH , padding  } = (_columnSizingOptions_column_columnId1 = columnSizingOptions[column.columnId]) !== null && _columnSizingOptions_column_columnId1 !== void 0 ? _columnSizingOptions_column_columnId1 : {};
+        const { defaultWidth, idealWidth = DEFAULT_WIDTH, minWidth = DEFAULT_MIN_WIDTH, padding } = (_columnSizingOptions_column_columnId1 = columnSizingOptions[column.columnId]) !== null && _columnSizingOptions_column_columnId1 !== void 0 ? _columnSizingOptions_column_columnId1 : {};
         updated = true;
         return {
             columnId: column.columnId,
@@ -69,9 +69,10 @@ export function getLength(state) {
     return state.length;
 }
 export function getColumnWidth(state, columnId) {
+    var _column;
     const column = getColumnById(state, columnId);
     var _column_width;
-    return (_column_width = column === null || column === void 0 ? void 0 : column.width) !== null && _column_width !== void 0 ? _column_width : 0;
+    return (_column_width = (_column = column) === null || _column === void 0 ? void 0 : _column.width) !== null && _column_width !== void 0 ? _column_width : 0;
 }
 /**
  * This function takes the current state and returns an updated state, so that it can be set.
@@ -85,8 +86,9 @@ export function getColumnWidth(state, columnId) {
  * @param value
  * @returns
  */ export function setColumnProperty(localState, columnId, property, value) {
+    var _currentColumn;
     const currentColumn = getColumnById(localState, columnId);
-    if (!currentColumn || (currentColumn === null || currentColumn === void 0 ? void 0 : currentColumn[property]) === value) {
+    if (!currentColumn || ((_currentColumn = currentColumn) === null || _currentColumn === void 0 ? void 0 : _currentColumn[property]) === value) {
         return localState;
     }
     const updatedColumn = {