@fluentui/react-table 9.11.2 → 9.11.3

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

@@ -1 +1 @@
-{"version":3,"sources":["useKeyboardResizing.js"],"sourcesContent":["import * as React from 'react';\nimport { ArrowLeft, ArrowRight, Enter, Escape, Shift, Space } from '@fluentui/keyboard-keys';\nimport { useEventCallback } from '@fluentui/react-utilities';\nimport { useFocusFinders, useTabsterAttributes } from '@fluentui/react-tabster';\nconst STEP = 20;\nconst PRECISION_MODIFIER = Shift;\nconst PRECISION_FACTOR = 1 / 4;\nexport function useKeyboardResizing(columnResizeState) {\n    const [columnId, setColumnId] = React.useState();\n    const onChangeRef = React.useRef();\n    const { findPrevFocusable } = useFocusFinders();\n    const columnResizeStateRef = React.useRef(columnResizeState);\n    React.useEffect(()=>{\n        columnResizeStateRef.current = columnResizeState;\n    }, [\n        columnResizeState\n    ]);\n    const [resizeHandleRefs] = React.useState(()=>new Map());\n    const keyboardHandler = useEventCallback((event)=>{\n        if (!columnId) {\n            return;\n        }\n        const width = columnResizeStateRef.current.getColumnWidth(columnId);\n        const precisionModifier = event.getModifierState(PRECISION_MODIFIER);\n        const stopEvent = ()=>{\n            event.preventDefault();\n            event.stopPropagation();\n        };\n        switch(event.key){\n            case ArrowLeft:\n                stopEvent();\n                columnResizeStateRef.current.setColumnWidth(event.nativeEvent, {\n                    columnId,\n                    width: width - (precisionModifier ? STEP * PRECISION_FACTOR : STEP)\n                });\n                return;\n            case ArrowRight:\n                stopEvent();\n                columnResizeStateRef.current.setColumnWidth(event.nativeEvent, {\n                    columnId,\n                    width: width + (precisionModifier ? STEP * PRECISION_FACTOR : STEP)\n                });\n                return;\n            case Space:\n            case Enter:\n            case Escape:\n                var // Just blur here, the onBlur handler will take care of the rest (disableInteractiveMode).\n                _resizeHandleRefs_get_current, _resizeHandleRefs_get;\n                stopEvent();\n                (_resizeHandleRefs_get = resizeHandleRefs.get(columnId)) === null || _resizeHandleRefs_get === void 0 ? void 0 : (_resizeHandleRefs_get_current = _resizeHandleRefs_get.current) === null || _resizeHandleRefs_get_current === void 0 ? void 0 : _resizeHandleRefs_get_current.blur();\n                break;\n        }\n    });\n    const enableInteractiveMode = React.useCallback((colId)=>{\n        var _onChangeRef_current, _resizeHandleRefs_get;\n        setColumnId(colId);\n        (_onChangeRef_current = onChangeRef.current) === null || _onChangeRef_current === void 0 ? void 0 : _onChangeRef_current.call(onChangeRef, colId, true);\n        const handle = (_resizeHandleRefs_get = resizeHandleRefs.get(colId)) === null || _resizeHandleRefs_get === void 0 ? void 0 : _resizeHandleRefs_get.current;\n        if (handle) {\n            handle.setAttribute('tabindex', '-1');\n            handle.tabIndex = -1;\n            handle.focus();\n        }\n    }, [\n        resizeHandleRefs\n    ]);\n    const disableInteractiveMode = React.useCallback(()=>{\n        var // Notify the onChange listener that we are disabling interactive mode.\n        _onChangeRef_current, _resizeHandleRefs_get;\n        if (!columnId) {\n            return;\n        }\n        (_onChangeRef_current = onChangeRef.current) === null || _onChangeRef_current === void 0 ? void 0 : _onChangeRef_current.call(onChangeRef, columnId, false);\n        // Find the previous focusable element (table header button) and focus it.\n        const el = (_resizeHandleRefs_get = resizeHandleRefs.get(columnId)) === null || _resizeHandleRefs_get === void 0 ? void 0 : _resizeHandleRefs_get.current;\n        if (el) {\n            var _findPrevFocusable;\n            (_findPrevFocusable = findPrevFocusable(el)) === null || _findPrevFocusable === void 0 ? void 0 : _findPrevFocusable.focus(); // Focus the previous focusable element (header button).\n            el.removeAttribute('tabindex');\n        }\n        setColumnId(undefined);\n    }, [\n        columnId,\n        findPrevFocusable,\n        resizeHandleRefs\n    ]);\n    const toggleInteractiveMode = (colId, onChange)=>{\n        onChangeRef.current = onChange;\n        if (!columnId) {\n            enableInteractiveMode(colId);\n        } else if (colId && columnId !== colId) {\n            enableInteractiveMode(colId);\n            setColumnId(colId);\n        } else {\n            disableInteractiveMode();\n        }\n    };\n    const getKeyboardResizingRef = React.useCallback((colId)=>{\n        const ref = resizeHandleRefs.get(colId) || React.createRef();\n        resizeHandleRefs.set(colId, ref);\n        return ref;\n    }, [\n        resizeHandleRefs\n    ]);\n    // This makes sure the left and right arrow keys are ignored in tabster,\n    // so that they can be used for resizing.\n    const tabsterAttrs = useTabsterAttributes({\n        focusable: {\n            ignoreKeydown: {\n                ArrowLeft: true,\n                ArrowRight: true\n            }\n        }\n    });\n    return {\n        toggleInteractiveMode,\n        columnId,\n        getKeyboardResizingProps: (colId, currentWidth)=>({\n                onKeyDown: keyboardHandler,\n                onBlur: disableInteractiveMode,\n                ref: getKeyboardResizingRef(colId),\n                role: 'separator',\n                'aria-label': 'Resize column',\n                'aria-valuetext': `${currentWidth} pixels`,\n                'aria-hidden': colId === columnId ? false : true,\n                tabIndex: colId === columnId ? 0 : undefined,\n                ...tabsterAttrs\n            })\n    };\n}\n"],"names":["useKeyboardResizing","STEP","PRECISION_MODIFIER","Shift","PRECISION_FACTOR","columnResizeState","columnId","setColumnId","React","useState","onChangeRef","useRef","findPrevFocusable","useFocusFinders","columnResizeStateRef","useEffect","current","resizeHandleRefs","Map","keyboardHandler","useEventCallback","event","width","getColumnWidth","precisionModifier","getModifierState","stopEvent","preventDefault","stopPropagation","key","ArrowLeft","setColumnWidth","nativeEvent","ArrowRight","Space","Enter","Escape","_resizeHandleRefs_get_current","_resizeHandleRefs_get","get","blur","enableInteractiveMode","useCallback","colId","_onChangeRef_current","call","handle","setAttribute","tabIndex","focus","disableInteractiveMode","el","_findPrevFocusable","removeAttribute","undefined","toggleInteractiveMode","onChange","getKeyboardResizingRef","ref","createRef","set","tabsterAttrs","useTabsterAttributes","focusable","ignoreKeydown","getKeyboardResizingProps","currentWidth","onKeyDown","onBlur","role"],"mappings":"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"}
+{"version":3,"sources":["useKeyboardResizing.js"],"sourcesContent":["import * as React from 'react';\nimport { ArrowLeft, ArrowRight, Enter, Escape, Shift, Space } from '@fluentui/keyboard-keys';\nimport { useEventCallback } from '@fluentui/react-utilities';\nimport { useFocusFinders, useTabsterAttributes } from '@fluentui/react-tabster';\nconst STEP = 20;\nconst PRECISION_MODIFIER = Shift;\nconst PRECISION_FACTOR = 1 / 4;\nexport function useKeyboardResizing(columnResizeState) {\n    const [columnId, setColumnId] = React.useState();\n    const onChangeRef = React.useRef();\n    const { findPrevFocusable } = useFocusFinders();\n    const columnResizeStateRef = React.useRef(columnResizeState);\n    React.useEffect(()=>{\n        columnResizeStateRef.current = columnResizeState;\n    }, [\n        columnResizeState\n    ]);\n    const [resizeHandleRefs] = React.useState(()=>new Map());\n    const keyboardHandler = useEventCallback((event)=>{\n        if (!columnId) {\n            return;\n        }\n        const width = columnResizeStateRef.current.getColumnWidth(columnId);\n        const precisionModifier = event.getModifierState(PRECISION_MODIFIER);\n        const stopEvent = ()=>{\n            event.preventDefault();\n            event.stopPropagation();\n        };\n        switch(event.key){\n            case ArrowLeft:\n                stopEvent();\n                columnResizeStateRef.current.setColumnWidth(event.nativeEvent, {\n                    columnId,\n                    width: width - (precisionModifier ? STEP * PRECISION_FACTOR : STEP)\n                });\n                return;\n            case ArrowRight:\n                stopEvent();\n                columnResizeStateRef.current.setColumnWidth(event.nativeEvent, {\n                    columnId,\n                    width: width + (precisionModifier ? STEP * PRECISION_FACTOR : STEP)\n                });\n                return;\n            case Space:\n            case Enter:\n            case Escape:\n                var // Just blur here, the onBlur handler will take care of the rest (disableInteractiveMode).\n                _resizeHandleRefs_get_current, _resizeHandleRefs_get;\n                stopEvent();\n                (_resizeHandleRefs_get = resizeHandleRefs.get(columnId)) === null || _resizeHandleRefs_get === void 0 ? void 0 : (_resizeHandleRefs_get_current = _resizeHandleRefs_get.current) === null || _resizeHandleRefs_get_current === void 0 ? void 0 : _resizeHandleRefs_get_current.blur();\n                break;\n        }\n    });\n    const enableInteractiveMode = React.useCallback((colId)=>{\n        var _onChangeRef_current, _resizeHandleRefs_get;\n        setColumnId(colId);\n        (_onChangeRef_current = onChangeRef.current) === null || _onChangeRef_current === void 0 ? void 0 : _onChangeRef_current.call(onChangeRef, colId, true);\n        const handle = (_resizeHandleRefs_get = resizeHandleRefs.get(colId)) === null || _resizeHandleRefs_get === void 0 ? void 0 : _resizeHandleRefs_get.current;\n        if (handle) {\n            handle.setAttribute('tabindex', '-1');\n            handle.tabIndex = -1;\n            handle.focus();\n        }\n    }, [\n        resizeHandleRefs\n    ]);\n    const disableInteractiveMode = React.useCallback(()=>{\n        var // Notify the onChange listener that we are disabling interactive mode.\n        _onChangeRef_current, _resizeHandleRefs_get;\n        if (!columnId) {\n            return;\n        }\n        (_onChangeRef_current = onChangeRef.current) === null || _onChangeRef_current === void 0 ? void 0 : _onChangeRef_current.call(onChangeRef, columnId, false);\n        // Find the previous focusable element (table header button) and focus it.\n        const el = (_resizeHandleRefs_get = resizeHandleRefs.get(columnId)) === null || _resizeHandleRefs_get === void 0 ? void 0 : _resizeHandleRefs_get.current;\n        if (el) {\n            var _findPrevFocusable;\n            (_findPrevFocusable = findPrevFocusable(el)) === null || _findPrevFocusable === void 0 ? void 0 : _findPrevFocusable.focus(); // Focus the previous focusable element (header button).\n            el.removeAttribute('tabindex');\n        }\n        setColumnId(undefined);\n    }, [\n        columnId,\n        findPrevFocusable,\n        resizeHandleRefs\n    ]);\n    const toggleInteractiveMode = (colId, onChange)=>{\n        onChangeRef.current = onChange;\n        if (!columnId) {\n            enableInteractiveMode(colId);\n        } else if (colId && columnId !== colId) {\n            enableInteractiveMode(colId);\n            setColumnId(colId);\n        } else {\n            disableInteractiveMode();\n        }\n    };\n    const getKeyboardResizingRef = React.useCallback((colId)=>{\n        const ref = resizeHandleRefs.get(colId) || React.createRef();\n        resizeHandleRefs.set(colId, ref);\n        return ref;\n    }, [\n        resizeHandleRefs\n    ]);\n    // This makes sure the left and right arrow keys are ignored in tabster,\n    // so that they can be used for resizing.\n    const tabsterAttrs = useTabsterAttributes({\n        focusable: {\n            ignoreKeydown: {\n                ArrowLeft: true,\n                ArrowRight: true\n            }\n        }\n    });\n    return {\n        toggleInteractiveMode,\n        columnId,\n        getKeyboardResizingProps: React.useCallback((colId, currentWidth)=>({\n                onKeyDown: keyboardHandler,\n                onBlur: disableInteractiveMode,\n                ref: getKeyboardResizingRef(colId),\n                role: 'separator',\n                'aria-label': 'Resize column',\n                'aria-valuetext': `${currentWidth} pixels`,\n                'aria-hidden': colId === columnId ? false : true,\n                tabIndex: colId === columnId ? 0 : undefined,\n                ...tabsterAttrs\n            }), [\n            columnId,\n            disableInteractiveMode,\n            getKeyboardResizingRef,\n            keyboardHandler,\n            tabsterAttrs\n        ])\n    };\n}\n"],"names":["useKeyboardResizing","STEP","PRECISION_MODIFIER","Shift","PRECISION_FACTOR","columnResizeState","columnId","setColumnId","React","useState","onChangeRef","useRef","findPrevFocusable","useFocusFinders","columnResizeStateRef","useEffect","current","resizeHandleRefs","Map","keyboardHandler","useEventCallback","event","width","getColumnWidth","precisionModifier","getModifierState","stopEvent","preventDefault","stopPropagation","key","ArrowLeft","setColumnWidth","nativeEvent","ArrowRight","Space","Enter","Escape","_resizeHandleRefs_get_current","_resizeHandleRefs_get","get","blur","enableInteractiveMode","useCallback","colId","_onChangeRef_current","call","handle","setAttribute","tabIndex","focus","disableInteractiveMode","el","_findPrevFocusable","removeAttribute","undefined","toggleInteractiveMode","onChange","getKeyboardResizingRef","ref","createRef","set","tabsterAttrs","useTabsterAttributes","focusable","ignoreKeydown","getKeyboardResizingProps","currentWidth","onKeyDown","onBlur","role"],"mappings":";;;;+BAOgBA;;;eAAAA;;;;iEAPO;8BAC4C;gCAClC;8BACqB;AACtD,MAAMC,OAAO;AACb,MAAMC,qBAAqBC,mBAAK;AAChC,MAAMC,mBAAmB,IAAI;AACtB,SAASJ,oBAAoBK,iBAAiB;IACjD,MAAM,CAACC,UAAUC,YAAY,GAAGC,OAAMC,QAAQ;IAC9C,MAAMC,cAAcF,OAAMG,MAAM;IAChC,MAAM,EAAEC,iBAAiB,EAAE,GAAGC,IAAAA,6BAAe;IAC7C,MAAMC,uBAAuBN,OAAMG,MAAM,CAACN;IAC1CG,OAAMO,SAAS,CAAC;QACZD,qBAAqBE,OAAO,GAAGX;IACnC,GAAG;QACCA;KACH;IACD,MAAM,CAACY,iBAAiB,GAAGT,OAAMC,QAAQ,CAAC,IAAI,IAAIS;IAClD,MAAMC,kBAAkBC,IAAAA,gCAAgB,EAAC,CAACC;QACtC,IAAI,CAACf,UAAU;YACX;QACJ;QACA,MAAMgB,QAAQR,qBAAqBE,OAAO,CAACO,cAAc,CAACjB;QAC1D,MAAMkB,oBAAoBH,MAAMI,gBAAgB,CAACvB;QACjD,MAAMwB,YAAY;YACdL,MAAMM,cAAc;YACpBN,MAAMO,eAAe;QACzB;QACA,OAAOP,MAAMQ,GAAG;YACZ,KAAKC,uBAAS;gBACVJ;gBACAZ,qBAAqBE,OAAO,CAACe,cAAc,CAACV,MAAMW,WAAW,EAAE;oBAC3D1B;oBACAgB,OAAOA,QAASE,CAAAA,oBAAoBvB,OAAOG,mBAAmBH,IAAG;gBACrE;gBACA;YACJ,KAAKgC,wBAAU;gBACXP;gBACAZ,qBAAqBE,OAAO,CAACe,cAAc,CAACV,MAAMW,WAAW,EAAE;oBAC3D1B;oBACAgB,OAAOA,QAASE,CAAAA,oBAAoBvB,OAAOG,mBAAmBH,IAAG;gBACrE;gBACA;YACJ,KAAKiC,mBAAK;YACV,KAAKC,mBAAK;YACV,KAAKC,oBAAM;gBACP,IACAC,+BAA+BC;gBAC/BZ;gBACCY,CAAAA,wBAAwBrB,iBAAiBsB,GAAG,CAACjC,SAAQ,MAAO,QAAQgC,0BAA0B,KAAK,IAAI,KAAK,IAAI,AAACD,CAAAA,gCAAgCC,sBAAsBtB,OAAO,AAAD,MAAO,QAAQqB,kCAAkC,KAAK,IAAI,KAAK,IAAIA,8BAA8BG,IAAI;gBACnR;QACR;IACJ;IACA,MAAMC,wBAAwBjC,OAAMkC,WAAW,CAAC,CAACC;QAC7C,IAAIC,sBAAsBN;QAC1B/B,YAAYoC;QACXC,CAAAA,uBAAuBlC,YAAYM,OAAO,AAAD,MAAO,QAAQ4B,yBAAyB,KAAK,IAAI,KAAK,IAAIA,qBAAqBC,IAAI,CAACnC,aAAaiC,OAAO;QAClJ,MAAMG,SAAS,AAACR,CAAAA,wBAAwBrB,iBAAiBsB,GAAG,CAACI,MAAK,MAAO,QAAQL,0BAA0B,KAAK,IAAI,KAAK,IAAIA,sBAAsBtB,OAAO;QAC1J,IAAI8B,QAAQ;YACRA,OAAOC,YAAY,CAAC,YAAY;YAChCD,OAAOE,QAAQ,GAAG,CAAC;YACnBF,OAAOG,KAAK;QAChB;IACJ,GAAG;QACChC;KACH;IACD,MAAMiC,yBAAyB1C,OAAMkC,WAAW,CAAC;QAC7C,IACAE,sBAAsBN;QACtB,IAAI,CAAChC,UAAU;YACX;QACJ;QACCsC,CAAAA,uBAAuBlC,YAAYM,OAAO,AAAD,MAAO,QAAQ4B,yBAAyB,KAAK,IAAI,KAAK,IAAIA,qBAAqBC,IAAI,CAACnC,aAAaJ,UAAU;QACrJ,0EAA0E;QAC1E,MAAM6C,KAAK,AAACb,CAAAA,wBAAwBrB,iBAAiBsB,GAAG,CAACjC,SAAQ,MAAO,QAAQgC,0BAA0B,KAAK,IAAI,KAAK,IAAIA,sBAAsBtB,OAAO;QACzJ,IAAImC,IAAI;YACJ,IAAIC;YACHA,CAAAA,qBAAqBxC,kBAAkBuC,GAAE,MAAO,QAAQC,uBAAuB,KAAK,IAAI,KAAK,IAAIA,mBAAmBH,KAAK,IAAI,wDAAwD;YACtLE,GAAGE,eAAe,CAAC;QACvB;QACA9C,YAAY+C;IAChB,GAAG;QACChD;QACAM;QACAK;KACH;IACD,MAAMsC,wBAAwB,CAACZ,OAAOa;QAClC9C,YAAYM,OAAO,GAAGwC;QACtB,IAAI,CAAClD,UAAU;YACXmC,sBAAsBE;QAC1B,OAAO,IAAIA,SAASrC,aAAaqC,OAAO;YACpCF,sBAAsBE;YACtBpC,YAAYoC;QAChB,OAAO;YACHO;QACJ;IACJ;IACA,MAAMO,yBAAyBjD,OAAMkC,WAAW,CAAC,CAACC;QAC9C,MAAMe,MAAMzC,iBAAiBsB,GAAG,CAACI,wBAAUnC,OAAMmD,SAAS;QAC1D1C,iBAAiB2C,GAAG,CAACjB,OAAOe;QAC5B,OAAOA;IACX,GAAG;QACCzC;KACH;IACD,wEAAwE;IACxE,yCAAyC;IACzC,MAAM4C,eAAeC,IAAAA,kCAAoB,EAAC;QACtCC,WAAW;YACPC,eAAe;gBACXlC,WAAW;gBACXG,YAAY;YAChB;QACJ;IACJ;IACA,OAAO;QACHsB;QACAjD;QACA2D,0BAA0BzD,OAAMkC,WAAW,CAAC,CAACC,OAAOuB,eAAgB,CAAA;gBAC5DC,WAAWhD;gBACXiD,QAAQlB;gBACRQ,KAAKD,uBAAuBd;gBAC5B0B,MAAM;gBACN,cAAc;gBACd,kBAAkB,CAAC,EAAEH,aAAa,OAAO,CAAC;gBAC1C,eAAevB,UAAUrC,WAAW,QAAQ;gBAC5C0C,UAAUL,UAAUrC,WAAW,IAAIgD;gBACnC,GAAGO,YAAY;YACnB,CAAA,GAAI;YACJvD;YACA4C;YACAO;YACAtC;YACA0C;SACH;IACL;AACJ"}

package/lib-commonjs/hooks/useTableColumnResizeMouseHandler.js

@@ -18,18 +18,19 @@ function useTableColumnResizeMouseHandler(columnResizeState) {
     const colId = _react.useRef(undefined);
     const { targetDocument } = (0, _reactsharedcontexts.useFluent_unstable)();
     const globalWin = targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.defaultView;
+    const { getColumnWidth, setColumnWidth } = columnResizeState;
     const recalculatePosition = _react.useCallback((e)=>{
         const { clientX } = (0, _reactutilities.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, {
+        colId.current && setColumnWidth(e, {
             columnId: colId.current,
             width: currentWidth.current
         });
         mouseX.current = clientX;
     }, [
-        columnResizeState
+        setColumnWidth
     ]);
     const onDrag = _react.useCallback((e)=>{
         // Using requestAnimationFrame here drastically improves resizing experience on slower CPUs
@@ -55,10 +56,10 @@ function useTableColumnResizeMouseHandler(columnResizeState) {
         onDrag,
         targetDocument
     ]);
-    const getOnMouseDown = (columnId)=>(event)=>{
+    const getOnMouseDown = _react.useCallback((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);
+            currentWidth.current = getColumnWidth(columnId);
             mouseX.current = (0, _reactutilities.getEventClientCoords)(event).clientX;
             colId.current = columnId;
             if ((0, _reactutilities.isMouseEvent)(event)) {
@@ -73,8 +74,13 @@ function useTableColumnResizeMouseHandler(columnResizeState) {
                 targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.addEventListener('touchend', onDragEnd);
                 targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.addEventListener('touchmove', onDrag);
             }
-        };
+        }, [
+        getColumnWidth,
+        onDrag,
+        onDragEnd,
+        targetDocument
+    ]);
     return {
-        getOnMouseDown: (columnId)=>getOnMouseDown(columnId)
+        getOnMouseDown
     };
 }

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

@@ -1 +1 @@
-{"version":3,"sources":["useTableColumnResizeMouseHandler.js"],"sourcesContent":["import * as React from 'react';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { getEventClientCoords, isMouseEvent, isTouchEvent } from '@fluentui/react-utilities';\nexport function useTableColumnResizeMouseHandler(columnResizeState) {\n    const mouseX = React.useRef(0);\n    const currentWidth = React.useRef(0);\n    const colId = React.useRef(undefined);\n    const { targetDocument } = useFluent();\n    const globalWin = targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.defaultView;\n    const recalculatePosition = React.useCallback((e)=>{\n        const { clientX } = getEventClientCoords(e);\n        const dx = clientX - mouseX.current;\n        // Update the local width for the column and set it\n        currentWidth.current += dx;\n        colId.current && columnResizeState.setColumnWidth(e, {\n            columnId: colId.current,\n            width: currentWidth.current\n        });\n        mouseX.current = clientX;\n    }, [\n        columnResizeState\n    ]);\n    const onDrag = React.useCallback((e)=>{\n        // Using requestAnimationFrame here drastically improves resizing experience on slower CPUs\n        if (typeof (globalWin === null || globalWin === void 0 ? void 0 : globalWin.requestAnimationFrame) === 'function') {\n            requestAnimationFrame(()=>recalculatePosition(e));\n        } else {\n            recalculatePosition(e);\n        }\n    }, [\n        globalWin === null || globalWin === void 0 ? void 0 : globalWin.requestAnimationFrame,\n        recalculatePosition\n    ]);\n    const onDragEnd = React.useCallback((event)=>{\n        if (isMouseEvent(event)) {\n            targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.removeEventListener('mouseup', onDragEnd);\n            targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.removeEventListener('mousemove', onDrag);\n        }\n        if (isTouchEvent(event)) {\n            targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.removeEventListener('touchend', onDragEnd);\n            targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.removeEventListener('touchmove', onDrag);\n        }\n    }, [\n        onDrag,\n        targetDocument\n    ]);\n    const getOnMouseDown = (columnId)=>(event)=>{\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            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 === null || targetDocument === void 0 ? void 0 : targetDocument.addEventListener('mouseup', onDragEnd);\n                targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.addEventListener('mousemove', onDrag);\n            }\n            if (isTouchEvent(event)) {\n                targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.addEventListener('touchend', onDragEnd);\n                targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.addEventListener('touchmove', onDrag);\n            }\n        };\n    return {\n        getOnMouseDown: (columnId)=>getOnMouseDown(columnId)\n    };\n}\n"],"names":["useTableColumnResizeMouseHandler","columnResizeState","mouseX","React","useRef","currentWidth","colId","undefined","targetDocument","useFluent","globalWin","defaultView","recalculatePosition","useCallback","e","clientX","getEventClientCoords","dx","current","setColumnWidth","columnId","width","onDrag","requestAnimationFrame","onDragEnd","event","isMouseEvent","removeEventListener","isTouchEvent","getOnMouseDown","getColumnWidth","target","currentTarget","button","addEventListener"],"mappings":"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"}
+{"version":3,"sources":["useTableColumnResizeMouseHandler.js"],"sourcesContent":["import * as React from 'react';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { getEventClientCoords, isMouseEvent, isTouchEvent } from '@fluentui/react-utilities';\nexport function useTableColumnResizeMouseHandler(columnResizeState) {\n    const mouseX = React.useRef(0);\n    const currentWidth = React.useRef(0);\n    const colId = React.useRef(undefined);\n    const { targetDocument } = useFluent();\n    const globalWin = targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.defaultView;\n    const { getColumnWidth, setColumnWidth } = columnResizeState;\n    const recalculatePosition = React.useCallback((e)=>{\n        const { clientX } = getEventClientCoords(e);\n        const dx = clientX - mouseX.current;\n        // Update the local width for the column and set it\n        currentWidth.current += dx;\n        colId.current && setColumnWidth(e, {\n            columnId: colId.current,\n            width: currentWidth.current\n        });\n        mouseX.current = clientX;\n    }, [\n        setColumnWidth\n    ]);\n    const onDrag = React.useCallback((e)=>{\n        // Using requestAnimationFrame here drastically improves resizing experience on slower CPUs\n        if (typeof (globalWin === null || globalWin === void 0 ? void 0 : globalWin.requestAnimationFrame) === 'function') {\n            requestAnimationFrame(()=>recalculatePosition(e));\n        } else {\n            recalculatePosition(e);\n        }\n    }, [\n        globalWin === null || globalWin === void 0 ? void 0 : globalWin.requestAnimationFrame,\n        recalculatePosition\n    ]);\n    const onDragEnd = React.useCallback((event)=>{\n        if (isMouseEvent(event)) {\n            targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.removeEventListener('mouseup', onDragEnd);\n            targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.removeEventListener('mousemove', onDrag);\n        }\n        if (isTouchEvent(event)) {\n            targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.removeEventListener('touchend', onDragEnd);\n            targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.removeEventListener('touchmove', onDrag);\n        }\n    }, [\n        onDrag,\n        targetDocument\n    ]);\n    const getOnMouseDown = React.useCallback((columnId)=>(event)=>{\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 = getColumnWidth(columnId);\n            mouseX.current = getEventClientCoords(event).clientX;\n            colId.current = columnId;\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 === null || targetDocument === void 0 ? void 0 : targetDocument.addEventListener('mouseup', onDragEnd);\n                targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.addEventListener('mousemove', onDrag);\n            }\n            if (isTouchEvent(event)) {\n                targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.addEventListener('touchend', onDragEnd);\n                targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.addEventListener('touchmove', onDrag);\n            }\n        }, [\n        getColumnWidth,\n        onDrag,\n        onDragEnd,\n        targetDocument\n    ]);\n    return {\n        getOnMouseDown\n    };\n}\n"],"names":["useTableColumnResizeMouseHandler","columnResizeState","mouseX","React","useRef","currentWidth","colId","undefined","targetDocument","useFluent","globalWin","defaultView","getColumnWidth","setColumnWidth","recalculatePosition","useCallback","e","clientX","getEventClientCoords","dx","current","columnId","width","onDrag","requestAnimationFrame","onDragEnd","event","isMouseEvent","removeEventListener","isTouchEvent","getOnMouseDown","target","currentTarget","button","addEventListener"],"mappings":"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"}

package/lib-commonjs/hooks/useTableColumnResizeState.js

@@ -110,9 +110,15 @@ function useTableColumnResizeState(columns, containerWidth, params = {}) {
         });
     });
     return {
-        getColumnById: (colId)=>(0, _columnResizeUtils.getColumnById)(state.columnWidthState, colId),
-        getColumns: ()=>state.columnWidthState,
-        getColumnWidth: (colId)=>(0, _columnResizeUtils.getColumnWidth)(state.columnWidthState, colId),
+        getColumnById: _react.useCallback((colId)=>(0, _columnResizeUtils.getColumnById)(state.columnWidthState, colId), [
+            state.columnWidthState
+        ]),
+        getColumns: _react.useCallback(()=>state.columnWidthState, [
+            state.columnWidthState
+        ]),
+        getColumnWidth: _react.useCallback((colId)=>(0, _columnResizeUtils.getColumnWidth)(state.columnWidthState, colId), [
+            state.columnWidthState
+        ]),
         setColumnWidth
     };
 }

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

@@ -1 +1 @@
-{"version":3,"sources":["useTableColumnResizeState.js"],"sourcesContent":["import { useEventCallback, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport * as React from 'react';\nimport { columnDefinitionsToState, adjustColumnWidthsToFitContainer, getColumnById, setColumnProperty, getColumnWidth } from '../utils/columnResizeUtils';\nconst createReducer = ()=>(state, action)=>{\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            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            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            case 'SET_COLUMN_WIDTH':\n                const { columnId, width } = action;\n                const { containerWidth } = state;\n                const column = getColumnById(state.columnWidthState, columnId);\n                let newColumnWidthState = [\n                    ...state.columnWidthState\n                ];\n                if (!column) {\n                    return state;\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                return {\n                    ...state,\n                    columnWidthState: newColumnWidthState\n                };\n        }\n    };\nexport function useTableColumnResizeState(columns, containerWidth, params = {}) {\n    const { onColumnResize, columnSizingOptions } = params;\n    const reducer = React.useMemo(()=>createReducer(), []);\n    const [state, dispatch] = React.useReducer(reducer, {\n        columns,\n        containerWidth: 0,\n        columnWidthState: columnDefinitionsToState(columns, undefined, columnSizingOptions),\n        columnSizingOptions\n    });\n    useIsomorphicLayoutEffect(()=>{\n        dispatch({\n            type: 'CONTAINER_WIDTH_UPDATED',\n            containerWidth\n        });\n    }, [\n        containerWidth\n    ]);\n    useIsomorphicLayoutEffect(()=>{\n        dispatch({\n            type: 'COLUMNS_UPDATED',\n            columns\n        });\n    }, [\n        columns\n    ]);\n    useIsomorphicLayoutEffect(()=>{\n        dispatch({\n            type: 'COLUMN_SIZING_OPTIONS_UPDATED',\n            columnSizingOptions\n        });\n    }, [\n        columnSizingOptions\n    ]);\n    const setColumnWidth = useEventCallback((event, data)=>{\n        let { width } = data;\n        const { columnId } = data;\n        const col = getColumnById(state.columnWidthState, columnId);\n        if (!col) {\n            return;\n        }\n        width = Math.max(col.minWidth || 0, width);\n        if (onColumnResize) {\n            onColumnResize(event, {\n                columnId,\n                width\n            });\n        }\n        dispatch({\n            type: 'SET_COLUMN_WIDTH',\n            columnId,\n            width\n        });\n    });\n    return {\n        getColumnById: (colId)=>getColumnById(state.columnWidthState, colId),\n        getColumns: ()=>state.columnWidthState,\n        getColumnWidth: (colId)=>getColumnWidth(state.columnWidthState, colId),\n        setColumnWidth\n    };\n}\n"],"names":["useTableColumnResizeState","createReducer","state","action","type","containerWidth","columnWidthState","adjustColumnWidthsToFitContainer","newS","columnDefinitionsToState","columns","columnSizingOptions","newState","columnId","width","column","getColumnById","newColumnWidthState","setColumnProperty","params","onColumnResize","reducer","React","useMemo","dispatch","useReducer","undefined","useIsomorphicLayoutEffect","setColumnWidth","useEventCallback","event","data","col","Math","max","minWidth","colId","getColumns","getColumnWidth"],"mappings":"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"}
+{"version":3,"sources":["useTableColumnResizeState.js"],"sourcesContent":["import { useEventCallback, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport * as React from 'react';\nimport { columnDefinitionsToState, adjustColumnWidthsToFitContainer, getColumnById, setColumnProperty, getColumnWidth } from '../utils/columnResizeUtils';\nconst createReducer = ()=>(state, action)=>{\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            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            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            case 'SET_COLUMN_WIDTH':\n                const { columnId, width } = action;\n                const { containerWidth } = state;\n                const column = getColumnById(state.columnWidthState, columnId);\n                let newColumnWidthState = [\n                    ...state.columnWidthState\n                ];\n                if (!column) {\n                    return state;\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                return {\n                    ...state,\n                    columnWidthState: newColumnWidthState\n                };\n        }\n    };\nexport function useTableColumnResizeState(columns, containerWidth, params = {}) {\n    const { onColumnResize, columnSizingOptions } = params;\n    const reducer = React.useMemo(()=>createReducer(), []);\n    const [state, dispatch] = React.useReducer(reducer, {\n        columns,\n        containerWidth: 0,\n        columnWidthState: columnDefinitionsToState(columns, undefined, columnSizingOptions),\n        columnSizingOptions\n    });\n    useIsomorphicLayoutEffect(()=>{\n        dispatch({\n            type: 'CONTAINER_WIDTH_UPDATED',\n            containerWidth\n        });\n    }, [\n        containerWidth\n    ]);\n    useIsomorphicLayoutEffect(()=>{\n        dispatch({\n            type: 'COLUMNS_UPDATED',\n            columns\n        });\n    }, [\n        columns\n    ]);\n    useIsomorphicLayoutEffect(()=>{\n        dispatch({\n            type: 'COLUMN_SIZING_OPTIONS_UPDATED',\n            columnSizingOptions\n        });\n    }, [\n        columnSizingOptions\n    ]);\n    const setColumnWidth = useEventCallback((event, data)=>{\n        let { width } = data;\n        const { columnId } = data;\n        const col = getColumnById(state.columnWidthState, columnId);\n        if (!col) {\n            return;\n        }\n        width = Math.max(col.minWidth || 0, width);\n        if (onColumnResize) {\n            onColumnResize(event, {\n                columnId,\n                width\n            });\n        }\n        dispatch({\n            type: 'SET_COLUMN_WIDTH',\n            columnId,\n            width\n        });\n    });\n    return {\n        getColumnById: React.useCallback((colId)=>getColumnById(state.columnWidthState, colId), [\n            state.columnWidthState\n        ]),\n        getColumns: React.useCallback(()=>state.columnWidthState, [\n            state.columnWidthState\n        ]),\n        getColumnWidth: React.useCallback((colId)=>getColumnWidth(state.columnWidthState, colId), [\n            state.columnWidthState\n        ]),\n        setColumnWidth\n    };\n}\n"],"names":["useTableColumnResizeState","createReducer","state","action","type","containerWidth","columnWidthState","adjustColumnWidthsToFitContainer","newS","columnDefinitionsToState","columns","columnSizingOptions","newState","columnId","width","column","getColumnById","newColumnWidthState","setColumnProperty","params","onColumnResize","reducer","React","useMemo","dispatch","useReducer","undefined","useIsomorphicLayoutEffect","setColumnWidth","useEventCallback","event","data","col","Math","max","minWidth","useCallback","colId","getColumns","getColumnWidth"],"mappings":"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"}

package/lib-commonjs/hooks/useTableColumnSizing.js

@@ -70,17 +70,19 @@ function useTableColumnSizingState(tableState, params) {
         }, [
         toggleInteractiveMode
     ]);
+    const { getColumnById, setColumnWidth, getColumns } = columnResizeState;
+    const { getOnMouseDown } = mouseHandler;
     return {
         ...tableState,
         tableRef: measureElementRef,
         // eslint-disable-next-line @typescript-eslint/naming-convention
         columnSizing_unstable: {
-            getOnMouseDown: mouseHandler.getOnMouseDown,
-            setColumnWidth: (columnId, w)=>columnResizeState.setColumnWidth(undefined, {
+            getOnMouseDown,
+            setColumnWidth: (columnId, w)=>setColumnWidth(undefined, {
                     columnId,
                     width: w
                 }),
-            getColumnWidths: columnResizeState.getColumns,
+            getColumnWidths: getColumns,
             getTableProps: (props = {})=>{
                 return {
                     ...props,
@@ -90,26 +92,33 @@ function useTableColumnSizingState(tableState, params) {
                     }
                 };
             },
-            getTableHeaderCellProps: (columnId)=>{
+            getTableHeaderCellProps: _react.useCallback((columnId)=>{
                 var _columns_;
-                const col = columnResizeState.getColumnById(columnId);
+                const col = getColumnById(columnId);
                 const isLastColumn = ((_columns_ = columns[columns.length - 1]) === null || _columns_ === void 0 ? void 0 : _columns_.columnId) === columnId;
                 const aside = isLastColumn ? null : /*#__PURE__*/ _react.createElement(_TableResizeHandle.TableResizeHandle, {
-                    onMouseDown: mouseHandler.getOnMouseDown(columnId),
-                    onTouchStart: mouseHandler.getOnMouseDown(columnId),
+                    onMouseDown: getOnMouseDown(columnId),
+                    onTouchStart: getOnMouseDown(columnId),
                     ...getKeyboardResizingProps(columnId, (col === null || col === void 0 ? void 0 : col.width) || 0)
                 });
                 return col ? {
                     style: getColumnStyles(col),
                     aside
                 } : {};
-            },
-            getTableCellProps: (columnId)=>{
-                const col = columnResizeState.getColumnById(columnId);
+            }, [
+                getColumnById,
+                columns,
+                getKeyboardResizingProps,
+                getOnMouseDown
+            ]),
+            getTableCellProps: _react.useCallback((columnId)=>{
+                const col = getColumnById(columnId);
                 return col ? {
                     style: getColumnStyles(col)
                 } : {};
-            },
+            }, [
+                getColumnById
+            ]),
             enableKeyboardMode
         }
     };

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

@@ -1 +1 @@
-{"version":3,"sources":["useTableColumnSizing.js"],"sourcesContent":["import * as React from 'react';\nimport { TableResizeHandle } from '../TableResizeHandle';\nimport { useMeasureElement } from './useMeasureElement';\nimport { useTableColumnResizeMouseHandler } from './useTableColumnResizeMouseHandler';\nimport { useTableColumnResizeState } from './useTableColumnResizeState';\nimport { useKeyboardResizing } from './useKeyboardResizing';\nexport const defaultColumnSizingState = {\n    getColumnWidths: ()=>[],\n    getOnMouseDown: ()=>()=>null,\n    setColumnWidth: ()=>null,\n    getTableProps: ()=>({}),\n    getTableHeaderCellProps: ()=>({\n            style: {},\n            columnId: ''\n        }),\n    getTableCellProps: ()=>({\n            style: {},\n            columnId: ''\n        }),\n    enableKeyboardMode: ()=>()=>null\n};\nexport function useTableColumnSizing_unstable(params) {\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)=>useTableColumnSizingState(tableState, params);\n}\nfunction getColumnStyles(column) {\n    const width = column.width;\n    return {\n        // native styles\n        width,\n        // non-native element styles (flex layout)\n        minWidth: width,\n        maxWidth: width\n    };\n}\nfunction useTableColumnSizingState(tableState, params) {\n    const { columns } = tableState;\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 === null || params === void 0 ? void 0 : 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    const enableKeyboardMode = React.useCallback((columnId, onChange)=>(e)=>{\n            e.preventDefault();\n            e.nativeEvent.stopPropagation();\n            toggleInteractiveMode(columnId, onChange);\n        }, [\n        toggleInteractiveMode\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, w)=>columnResizeState.setColumnWidth(undefined, {\n                    columnId,\n                    width: w\n                }),\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)=>{\n                var _columns_;\n                const col = columnResizeState.getColumnById(columnId);\n                const isLastColumn = ((_columns_ = columns[columns.length - 1]) === null || _columns_ === void 0 ? void 0 : _columns_.columnId) === columnId;\n                const aside = isLastColumn ? null : /*#__PURE__*/ React.createElement(TableResizeHandle, {\n                    onMouseDown: mouseHandler.getOnMouseDown(columnId),\n                    onTouchStart: mouseHandler.getOnMouseDown(columnId),\n                    ...getKeyboardResizingProps(columnId, (col === null || col === void 0 ? void 0 : col.width) || 0)\n                });\n                return col ? {\n                    style: getColumnStyles(col),\n                    aside\n                } : {};\n            },\n            getTableCellProps: (columnId)=>{\n                const col = columnResizeState.getColumnById(columnId);\n                return col ? {\n                    style: getColumnStyles(col)\n                } : {};\n            },\n            enableKeyboardMode\n        }\n    };\n}\n"],"names":["defaultColumnSizingState","useTableColumnSizing_unstable","getColumnWidths","getOnMouseDown","setColumnWidth","getTableProps","getTableHeaderCellProps","style","columnId","getTableCellProps","enableKeyboardMode","params","tableState","useTableColumnSizingState","getColumnStyles","column","width","minWidth","maxWidth","columns","measureElementRef","useMeasureElement","columnResizeState","useTableColumnResizeState","containerWidthOffset","mouseHandler","useTableColumnResizeMouseHandler","toggleInteractiveMode","getKeyboardResizingProps","useKeyboardResizing","React","useCallback","onChange","e","preventDefault","nativeEvent","stopPropagation","tableRef","columnSizing_unstable","w","undefined","getColumns","props","_columns_","col","getColumnById","isLastColumn","length","aside","createElement","TableResizeHandle","onMouseDown","onTouchStart"],"mappings":"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"}
+{"version":3,"sources":["useTableColumnSizing.js"],"sourcesContent":["import * as React from 'react';\nimport { TableResizeHandle } from '../TableResizeHandle';\nimport { useMeasureElement } from './useMeasureElement';\nimport { useTableColumnResizeMouseHandler } from './useTableColumnResizeMouseHandler';\nimport { useTableColumnResizeState } from './useTableColumnResizeState';\nimport { useKeyboardResizing } from './useKeyboardResizing';\nexport const defaultColumnSizingState = {\n    getColumnWidths: ()=>[],\n    getOnMouseDown: ()=>()=>null,\n    setColumnWidth: ()=>null,\n    getTableProps: ()=>({}),\n    getTableHeaderCellProps: ()=>({\n            style: {},\n            columnId: ''\n        }),\n    getTableCellProps: ()=>({\n            style: {},\n            columnId: ''\n        }),\n    enableKeyboardMode: ()=>()=>null\n};\nexport function useTableColumnSizing_unstable(params) {\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)=>useTableColumnSizingState(tableState, params);\n}\nfunction getColumnStyles(column) {\n    const width = column.width;\n    return {\n        // native styles\n        width,\n        // non-native element styles (flex layout)\n        minWidth: width,\n        maxWidth: width\n    };\n}\nfunction useTableColumnSizingState(tableState, params) {\n    const { columns } = tableState;\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 === null || params === void 0 ? void 0 : 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    const enableKeyboardMode = React.useCallback((columnId, onChange)=>(e)=>{\n            e.preventDefault();\n            e.nativeEvent.stopPropagation();\n            toggleInteractiveMode(columnId, onChange);\n        }, [\n        toggleInteractiveMode\n    ]);\n    const { getColumnById, setColumnWidth, getColumns } = columnResizeState;\n    const { getOnMouseDown } = mouseHandler;\n    return {\n        ...tableState,\n        tableRef: measureElementRef,\n        // eslint-disable-next-line @typescript-eslint/naming-convention\n        columnSizing_unstable: {\n            getOnMouseDown,\n            setColumnWidth: (columnId, w)=>setColumnWidth(undefined, {\n                    columnId,\n                    width: w\n                }),\n            getColumnWidths: getColumns,\n            getTableProps: (props = {})=>{\n                return {\n                    ...props,\n                    style: {\n                        minWidth: 'fit-content',\n                        ...props.style || {}\n                    }\n                };\n            },\n            getTableHeaderCellProps: React.useCallback((columnId)=>{\n                var _columns_;\n                const col = getColumnById(columnId);\n                const isLastColumn = ((_columns_ = columns[columns.length - 1]) === null || _columns_ === void 0 ? void 0 : _columns_.columnId) === columnId;\n                const aside = isLastColumn ? null : /*#__PURE__*/ React.createElement(TableResizeHandle, {\n                    onMouseDown: getOnMouseDown(columnId),\n                    onTouchStart: getOnMouseDown(columnId),\n                    ...getKeyboardResizingProps(columnId, (col === null || col === void 0 ? void 0 : col.width) || 0)\n                });\n                return col ? {\n                    style: getColumnStyles(col),\n                    aside\n                } : {};\n            }, [\n                getColumnById,\n                columns,\n                getKeyboardResizingProps,\n                getOnMouseDown\n            ]),\n            getTableCellProps: React.useCallback((columnId)=>{\n                const col = getColumnById(columnId);\n                return col ? {\n                    style: getColumnStyles(col)\n                } : {};\n            }, [\n                getColumnById\n            ]),\n            enableKeyboardMode\n        }\n    };\n}\n"],"names":["defaultColumnSizingState","useTableColumnSizing_unstable","getColumnWidths","getOnMouseDown","setColumnWidth","getTableProps","getTableHeaderCellProps","style","columnId","getTableCellProps","enableKeyboardMode","params","tableState","useTableColumnSizingState","getColumnStyles","column","width","minWidth","maxWidth","columns","measureElementRef","useMeasureElement","columnResizeState","useTableColumnResizeState","containerWidthOffset","mouseHandler","useTableColumnResizeMouseHandler","toggleInteractiveMode","getKeyboardResizingProps","useKeyboardResizing","React","useCallback","onChange","e","preventDefault","nativeEvent","stopPropagation","getColumnById","getColumns","tableRef","columnSizing_unstable","w","undefined","props","_columns_","col","isLastColumn","length","aside","createElement","TableResizeHandle","onMouseDown","onTouchStart"],"mappings":"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"}

package/lib-commonjs/hooks/useTableFeatures.js

@@ -35,13 +35,18 @@ const defaultTableState = {
 };
 function useTableFeatures(options, plugins = []) {
     const { items, getRowId, columns } = options;
-    const getRows = (rowEnhancer = defaultRowEnhancer)=>items.map((item, i)=>{
+    const getRows = _react.useCallback((rowEnhancer = defaultRowEnhancer)=>{
+        return items.map((item, i)=>{
             var _getRowId;
             return rowEnhancer({
                 item,
                 rowId: (_getRowId = getRowId === null || getRowId === void 0 ? void 0 : getRowId(item)) !== null && _getRowId !== void 0 ? _getRowId : i
             });
         });
+    }, [
+        items,
+        getRowId
+    ]);
     const initialState = {
         getRowId,
         items,

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

@@ -1 +1 @@
-{"version":3,"sources":["useTableFeatures.js"],"sourcesContent":["import * as React from 'react';\nimport { defaultTableSelectionState } from './useTableSelection';\nimport { defaultTableSortState } from './useTableSort';\nimport { defaultColumnSizingState } from './useTableColumnSizing';\nconst defaultRowEnhancer = (row)=>row;\nexport const defaultTableState = {\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()\n};\nexport function useTableFeatures(options, plugins = []) {\n    const { items, getRowId, columns } = options;\n    const getRows = (rowEnhancer = defaultRowEnhancer)=>items.map((item, i)=>{\n            var _getRowId;\n            return rowEnhancer({\n                item,\n                rowId: (_getRowId = getRowId === null || getRowId === void 0 ? void 0 : getRowId(item)) !== null && _getRowId !== void 0 ? _getRowId : i\n            });\n        });\n    const initialState = {\n        getRowId,\n        items,\n        columns,\n        getRows,\n        selection: defaultTableSelectionState,\n        sort: defaultTableSortState,\n        // eslint-disable-next-line @typescript-eslint/naming-convention\n        columnSizing_unstable: defaultColumnSizingState,\n        tableRef: React.createRef()\n    };\n    return plugins.reduce((state, plugin)=>plugin(state), initialState);\n}\n"],"names":["defaultTableState","useTableFeatures","defaultRowEnhancer","row","selection","defaultTableSelectionState","sort","defaultTableSortState","getRows","getRowId","items","columns","columnSizing_unstable","defaultColumnSizingState","tableRef","React","createRef","options","plugins","rowEnhancer","map","item","i","_getRowId","rowId","initialState","reduce","state","plugin"],"mappings":";;;;;;;;;;;IAKaA,iBAAiB;eAAjBA;;IAWGC,gBAAgB;eAAhBA;;;;iEAhBO;mCACoB;8BACL;sCACG;AACzC,MAAMC,qBAAqB,CAACC,MAAMA;AAC3B,MAAMH,oBAAoB;IAC7BI,WAAWC,6CAA0B;IACrCC,MAAMC,mCAAqB;IAC3BC,SAAS,IAAI,EAAE;IACfC,UAAU,IAAI;IACdC,OAAO,EAAE;IACTC,SAAS,EAAE;IACX,gEAAgE;IAChEC,uBAAuBC,8CAAwB;IAC/CC,wBAAUC,OAAMC,SAAS;AAC7B;AACO,SAASf,iBAAiBgB,OAAO,EAAEC,UAAU,EAAE;IAClD,MAAM,EAAER,KAAK,EAAED,QAAQ,EAAEE,OAAO,EAAE,GAAGM;IACrC,MAAMT,UAAU,CAACW,cAAcjB,kBAAkB,GAAGQ,MAAMU,GAAG,CAAC,CAACC,MAAMC;YAC7D,IAAIC;YACJ,OAAOJ,YAAY;gBACfE;gBACAG,OAAO,AAACD,CAAAA,YAAYd,aAAa,QAAQA,aAAa,KAAK,IAAI,KAAK,IAAIA,SAASY,KAAI,MAAO,QAAQE,cAAc,KAAK,IAAIA,YAAYD;YAC3I;QACJ;IACJ,MAAMG,eAAe;QACjBhB;QACAC;QACAC;QACAH;QACAJ,WAAWC,6CAA0B;QACrCC,MAAMC,mCAAqB;QAC3B,gEAAgE;QAChEK,uBAAuBC,8CAAwB;QAC/CC,wBAAUC,OAAMC,SAAS;IAC7B;IACA,OAAOE,QAAQQ,MAAM,CAAC,CAACC,OAAOC,SAASA,OAAOD,QAAQF;AAC1D"}
+{"version":3,"sources":["useTableFeatures.js"],"sourcesContent":["import * as React from 'react';\nimport { defaultTableSelectionState } from './useTableSelection';\nimport { defaultTableSortState } from './useTableSort';\nimport { defaultColumnSizingState } from './useTableColumnSizing';\nconst defaultRowEnhancer = (row)=>row;\nexport const defaultTableState = {\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()\n};\nexport function useTableFeatures(options, plugins = []) {\n    const { items, getRowId, columns } = options;\n    const getRows = React.useCallback((rowEnhancer = defaultRowEnhancer)=>{\n        return items.map((item, i)=>{\n            var _getRowId;\n            return rowEnhancer({\n                item,\n                rowId: (_getRowId = getRowId === null || getRowId === void 0 ? void 0 : getRowId(item)) !== null && _getRowId !== void 0 ? _getRowId : i\n            });\n        });\n    }, [\n        items,\n        getRowId\n    ]);\n    const initialState = {\n        getRowId,\n        items,\n        columns,\n        getRows,\n        selection: defaultTableSelectionState,\n        sort: defaultTableSortState,\n        // eslint-disable-next-line @typescript-eslint/naming-convention\n        columnSizing_unstable: defaultColumnSizingState,\n        tableRef: React.createRef()\n    };\n    return plugins.reduce((state, plugin)=>plugin(state), initialState);\n}\n"],"names":["defaultTableState","useTableFeatures","defaultRowEnhancer","row","selection","defaultTableSelectionState","sort","defaultTableSortState","getRows","getRowId","items","columns","columnSizing_unstable","defaultColumnSizingState","tableRef","React","createRef","options","plugins","useCallback","rowEnhancer","map","item","i","_getRowId","rowId","initialState","reduce","state","plugin"],"mappings":";;;;;;;;;;;IAKaA,iBAAiB;eAAjBA;;IAWGC,gBAAgB;eAAhBA;;;;iEAhBO;mCACoB;8BACL;sCACG;AACzC,MAAMC,qBAAqB,CAACC,MAAMA;AAC3B,MAAMH,oBAAoB;IAC7BI,WAAWC,6CAA0B;IACrCC,MAAMC,mCAAqB;IAC3BC,SAAS,IAAI,EAAE;IACfC,UAAU,IAAI;IACdC,OAAO,EAAE;IACTC,SAAS,EAAE;IACX,gEAAgE;IAChEC,uBAAuBC,8CAAwB;IAC/CC,wBAAUC,OAAMC,SAAS;AAC7B;AACO,SAASf,iBAAiBgB,OAAO,EAAEC,UAAU,EAAE;IAClD,MAAM,EAAER,KAAK,EAAED,QAAQ,EAAEE,OAAO,EAAE,GAAGM;IACrC,MAAMT,UAAUO,OAAMI,WAAW,CAAC,CAACC,cAAclB,kBAAkB;QAC/D,OAAOQ,MAAMW,GAAG,CAAC,CAACC,MAAMC;YACpB,IAAIC;YACJ,OAAOJ,YAAY;gBACfE;gBACAG,OAAO,AAACD,CAAAA,YAAYf,aAAa,QAAQA,aAAa,KAAK,IAAI,KAAK,IAAIA,SAASa,KAAI,MAAO,QAAQE,cAAc,KAAK,IAAIA,YAAYD;YAC3I;QACJ;IACJ,GAAG;QACCb;QACAD;KACH;IACD,MAAMiB,eAAe;QACjBjB;QACAC;QACAC;QACAH;QACAJ,WAAWC,6CAA0B;QACrCC,MAAMC,mCAAqB;QAC3B,gEAAgE;QAChEK,uBAAuBC,8CAAwB;QAC/CC,wBAAUC,OAAMC,SAAS;IAC7B;IACA,OAAOE,QAAQS,MAAM,CAAC,CAACC,OAAOC,SAASA,OAAOD,QAAQF;AAC1D"}

package/lib-commonjs/hooks/useTableSort.js

@@ -40,7 +40,7 @@ function useTableSort(options) {
 }
 function useTableSortState(tableState, options) {
     const { columns } = tableState;
-    const { sortState, defaultSortState, onSortChange } = options;
+    const { sortState, defaultSortState, onSortChange: onSortChangeProp = noop } = options;
     const [sorted, setSorted] = (0, _reactutilities.useControllableState)({
         initialState: {
             sortDirection: 'ascending',
@@ -50,7 +50,8 @@ function useTableSortState(tableState, options) {
         state: sortState
     });
     const { sortColumn, sortDirection } = sorted;
-    const toggleColumnSort = (e, columnId)=>{
+    const onSortChange = (0, _reactutilities.useEventCallback)(onSortChangeProp);
+    const toggleColumnSort = _react.useCallback((e, columnId)=>{
         setSorted((s)=>{
             const newState = {
                 ...s,
@@ -64,7 +65,10 @@ function useTableSortState(tableState, options) {
             onSortChange === null || onSortChange === void 0 ? void 0 : onSortChange(e, newState);
             return newState;
         });
-    };
+    }, [
+        onSortChange,
+        setSorted
+    ]);
     const setColumnSort = (e, nextSortColumn, nextSortDirection)=>{
         const newState = {
             sortColumn: nextSortColumn,
@@ -73,7 +77,7 @@ function useTableSortState(tableState, options) {
         onSortChange === null || onSortChange === void 0 ? void 0 : onSortChange(e, newState);
         setSorted(newState);
     };
-    const sort = (rows)=>{
+    const sort = _react.useCallback((rows)=>{
         return rows.slice().sort((a, b)=>{
             const sortColumnDef = columns.find((column)=>column.columnId === sortColumn);
             if (!(sortColumnDef === null || sortColumnDef === void 0 ? void 0 : sortColumnDef.compare)) {
@@ -82,7 +86,11 @@ function useTableSortState(tableState, options) {
             const mod = sortDirection === 'ascending' ? 1 : -1;
             return sortColumnDef.compare(a.item, b.item) * mod;
         });
-    };
+    }, [
+        columns,
+        sortColumn,
+        sortDirection
+    ]);
     const getSortDirection = (columnId)=>{
         return sortColumn === columnId ? sortDirection : undefined;
     };

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

@@ -1 +1 @@
-{"version":3,"sources":["useTableSort.js"],"sourcesContent":["import * as React from 'react';\nimport { useControllableState } from '@fluentui/react-utilities';\nconst noop = ()=>undefined;\nexport const defaultTableSortState = {\n    getSortDirection: ()=>'ascending',\n    setColumnSort: noop,\n    sort: (rows)=>[\n            ...rows\n        ],\n    sortColumn: undefined,\n    sortDirection: 'ascending',\n    toggleColumnSort: noop\n};\nexport function useTableSort(options) {\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)=>useTableSortState(tableState, options);\n}\nexport function useTableSortState(tableState, options) {\n    const { columns } = tableState;\n    const { sortState, defaultSortState, onSortChange } = options;\n    const [sorted, setSorted] = useControllableState({\n        initialState: {\n            sortDirection: 'ascending',\n            sortColumn: undefined\n        },\n        defaultState: defaultSortState,\n        state: sortState\n    });\n    const { sortColumn, sortDirection } = sorted;\n    const toggleColumnSort = (e, columnId)=>{\n        setSorted((s)=>{\n            const newState = {\n                ...s,\n                sortColumn: columnId\n            };\n            if (s.sortColumn === columnId) {\n                newState.sortDirection = s.sortDirection === 'ascending' ? 'descending' : 'ascending';\n            } else {\n                newState.sortDirection = 'ascending';\n            }\n            onSortChange === null || onSortChange === void 0 ? void 0 : onSortChange(e, newState);\n            return newState;\n        });\n    };\n    const setColumnSort = (e, nextSortColumn, nextSortDirection)=>{\n        const newState = {\n            sortColumn: nextSortColumn,\n            sortDirection: nextSortDirection\n        };\n        onSortChange === null || onSortChange === void 0 ? void 0 : onSortChange(e, newState);\n        setSorted(newState);\n    };\n    const sort = (rows)=>{\n        return rows.slice().sort((a, b)=>{\n            const sortColumnDef = columns.find((column)=>column.columnId === sortColumn);\n            if (!(sortColumnDef === null || sortColumnDef === void 0 ? void 0 : sortColumnDef.compare)) {\n                return 0;\n            }\n            const mod = sortDirection === 'ascending' ? 1 : -1;\n            return sortColumnDef.compare(a.item, b.item) * mod;\n        });\n    };\n    const getSortDirection = (columnId)=>{\n        return sortColumn === columnId ? sortDirection : undefined;\n    };\n    return {\n        ...tableState,\n        sort: {\n            sort,\n            sortColumn,\n            sortDirection,\n            setColumnSort,\n            toggleColumnSort,\n            getSortDirection\n        }\n    };\n}\n"],"names":["defaultTableSortState","useTableSort","useTableSortState","noop","undefined","getSortDirection","setColumnSort","sort","rows","sortColumn","sortDirection","toggleColumnSort","options","tableState","columns","sortState","defaultSortState","onSortChange","sorted","setSorted","useControllableState","initialState","defaultState","state","e","columnId","s","newState","nextSortColumn","nextSortDirection","slice","a","b","sortColumnDef","find","column","compare","mod","item"],"mappings":";;;;;;;;;;;IAGaA,qBAAqB;eAArBA;;IAUGC,YAAY;eAAZA;;IAKAC,iBAAiB;eAAjBA;;;;iEAlBO;gCACc;AACrC,MAAMC,OAAO,IAAIC;AACV,MAAMJ,wBAAwB;IACjCK,kBAAkB,IAAI;IACtBC,eAAeH;IACfI,MAAM,CAACC,OAAO;eACHA;SACN;IACLC,YAAYL;IACZM,eAAe;IACfC,kBAAkBR;AACtB;AACO,SAASF,aAAaW,OAAO;IAChC,4EAA4E;IAC5E,sDAAsD;IACtD,OAAO,CAACC,aAAaX,kBAAkBW,YAAYD;AACvD;AACO,SAASV,kBAAkBW,UAAU,EAAED,OAAO;IACjD,MAAM,EAAEE,OAAO,EAAE,GAAGD;IACpB,MAAM,EAAEE,SAAS,EAAEC,gBAAgB,EAAEC,YAAY,EAAE,GAAGL;IACtD,MAAM,CAACM,QAAQC,UAAU,GAAGC,IAAAA,oCAAoB,EAAC;QAC7CC,cAAc;YACVX,eAAe;YACfD,YAAYL;QAChB;QACAkB,cAAcN;QACdO,OAAOR;IACX;IACA,MAAM,EAAEN,UAAU,EAAEC,aAAa,EAAE,GAAGQ;IACtC,MAAMP,mBAAmB,CAACa,GAAGC;QACzBN,UAAU,CAACO;YACP,MAAMC,WAAW;gBACb,GAAGD,CAAC;gBACJjB,YAAYgB;YAChB;YACA,IAAIC,EAAEjB,UAAU,KAAKgB,UAAU;gBAC3BE,SAASjB,aAAa,GAAGgB,EAAEhB,aAAa,KAAK,cAAc,eAAe;YAC9E,OAAO;gBACHiB,SAASjB,aAAa,GAAG;YAC7B;YACAO,iBAAiB,QAAQA,iBAAiB,KAAK,IAAI,KAAK,IAAIA,aAAaO,GAAGG;YAC5E,OAAOA;QACX;IACJ;IACA,MAAMrB,gBAAgB,CAACkB,GAAGI,gBAAgBC;QACtC,MAAMF,WAAW;YACblB,YAAYmB;YACZlB,eAAemB;QACnB;QACAZ,iBAAiB,QAAQA,iBAAiB,KAAK,IAAI,KAAK,IAAIA,aAAaO,GAAGG;QAC5ER,UAAUQ;IACd;IACA,MAAMpB,OAAO,CAACC;QACV,OAAOA,KAAKsB,KAAK,GAAGvB,IAAI,CAAC,CAACwB,GAAGC;YACzB,MAAMC,gBAAgBnB,QAAQoB,IAAI,CAAC,CAACC,SAASA,OAAOV,QAAQ,KAAKhB;YACjE,IAAI,CAAEwB,CAAAA,kBAAkB,QAAQA,kBAAkB,KAAK,IAAI,KAAK,IAAIA,cAAcG,OAAO,AAAD,GAAI;gBACxF,OAAO;YACX;YACA,MAAMC,MAAM3B,kBAAkB,cAAc,IAAI,CAAC;YACjD,OAAOuB,cAAcG,OAAO,CAACL,EAAEO,IAAI,EAAEN,EAAEM,IAAI,IAAID;QACnD;IACJ;IACA,MAAMhC,mBAAmB,CAACoB;QACtB,OAAOhB,eAAegB,WAAWf,gBAAgBN;IACrD;IACA,OAAO;QACH,GAAGS,UAAU;QACbN,MAAM;YACFA;YACAE;YACAC;YACAJ;YACAK;YACAN;QACJ;IACJ;AACJ"}
+{"version":3,"sources":["useTableSort.js"],"sourcesContent":["import * as React from 'react';\nimport { useControllableState, useEventCallback } from '@fluentui/react-utilities';\nconst noop = ()=>undefined;\nexport const defaultTableSortState = {\n    getSortDirection: ()=>'ascending',\n    setColumnSort: noop,\n    sort: (rows)=>[\n            ...rows\n        ],\n    sortColumn: undefined,\n    sortDirection: 'ascending',\n    toggleColumnSort: noop\n};\nexport function useTableSort(options) {\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)=>useTableSortState(tableState, options);\n}\nexport function useTableSortState(tableState, options) {\n    const { columns } = tableState;\n    const { sortState, defaultSortState, onSortChange: onSortChangeProp = noop } = options;\n    const [sorted, setSorted] = useControllableState({\n        initialState: {\n            sortDirection: 'ascending',\n            sortColumn: undefined\n        },\n        defaultState: defaultSortState,\n        state: sortState\n    });\n    const { sortColumn, sortDirection } = sorted;\n    const onSortChange = useEventCallback(onSortChangeProp);\n    const toggleColumnSort = React.useCallback((e, columnId)=>{\n        setSorted((s)=>{\n            const newState = {\n                ...s,\n                sortColumn: columnId\n            };\n            if (s.sortColumn === columnId) {\n                newState.sortDirection = s.sortDirection === 'ascending' ? 'descending' : 'ascending';\n            } else {\n                newState.sortDirection = 'ascending';\n            }\n            onSortChange === null || onSortChange === void 0 ? void 0 : onSortChange(e, newState);\n            return newState;\n        });\n    }, [\n        onSortChange,\n        setSorted\n    ]);\n    const setColumnSort = (e, nextSortColumn, nextSortDirection)=>{\n        const newState = {\n            sortColumn: nextSortColumn,\n            sortDirection: nextSortDirection\n        };\n        onSortChange === null || onSortChange === void 0 ? void 0 : onSortChange(e, newState);\n        setSorted(newState);\n    };\n    const sort = React.useCallback((rows)=>{\n        return rows.slice().sort((a, b)=>{\n            const sortColumnDef = columns.find((column)=>column.columnId === sortColumn);\n            if (!(sortColumnDef === null || sortColumnDef === void 0 ? void 0 : sortColumnDef.compare)) {\n                return 0;\n            }\n            const mod = sortDirection === 'ascending' ? 1 : -1;\n            return sortColumnDef.compare(a.item, b.item) * mod;\n        });\n    }, [\n        columns,\n        sortColumn,\n        sortDirection\n    ]);\n    const getSortDirection = (columnId)=>{\n        return sortColumn === columnId ? sortDirection : undefined;\n    };\n    return {\n        ...tableState,\n        sort: {\n            sort,\n            sortColumn,\n            sortDirection,\n            setColumnSort,\n            toggleColumnSort,\n            getSortDirection\n        }\n    };\n}\n"],"names":["defaultTableSortState","useTableSort","useTableSortState","noop","undefined","getSortDirection","setColumnSort","sort","rows","sortColumn","sortDirection","toggleColumnSort","options","tableState","columns","sortState","defaultSortState","onSortChange","onSortChangeProp","sorted","setSorted","useControllableState","initialState","defaultState","state","useEventCallback","React","useCallback","e","columnId","s","newState","nextSortColumn","nextSortDirection","slice","a","b","sortColumnDef","find","column","compare","mod","item"],"mappings":";;;;;;;;;;;IAGaA,qBAAqB;eAArBA;;IAUGC,YAAY;eAAZA;;IAKAC,iBAAiB;eAAjBA;;;;iEAlBO;gCACgC;AACvD,MAAMC,OAAO,IAAIC;AACV,MAAMJ,wBAAwB;IACjCK,kBAAkB,IAAI;IACtBC,eAAeH;IACfI,MAAM,CAACC,OAAO;eACHA;SACN;IACLC,YAAYL;IACZM,eAAe;IACfC,kBAAkBR;AACtB;AACO,SAASF,aAAaW,OAAO;IAChC,4EAA4E;IAC5E,sDAAsD;IACtD,OAAO,CAACC,aAAaX,kBAAkBW,YAAYD;AACvD;AACO,SAASV,kBAAkBW,UAAU,EAAED,OAAO;IACjD,MAAM,EAAEE,OAAO,EAAE,GAAGD;IACpB,MAAM,EAAEE,SAAS,EAAEC,gBAAgB,EAAEC,cAAcC,mBAAmBf,IAAI,EAAE,GAAGS;IAC/E,MAAM,CAACO,QAAQC,UAAU,GAAGC,IAAAA,oCAAoB,EAAC;QAC7CC,cAAc;YACVZ,eAAe;YACfD,YAAYL;QAChB;QACAmB,cAAcP;QACdQ,OAAOT;IACX;IACA,MAAM,EAAEN,UAAU,EAAEC,aAAa,EAAE,GAAGS;IACtC,MAAMF,eAAeQ,IAAAA,gCAAgB,EAACP;IACtC,MAAMP,mBAAmBe,OAAMC,WAAW,CAAC,CAACC,GAAGC;QAC3CT,UAAU,CAACU;YACP,MAAMC,WAAW;gBACb,GAAGD,CAAC;gBACJrB,YAAYoB;YAChB;YACA,IAAIC,EAAErB,UAAU,KAAKoB,UAAU;gBAC3BE,SAASrB,aAAa,GAAGoB,EAAEpB,aAAa,KAAK,cAAc,eAAe;YAC9E,OAAO;gBACHqB,SAASrB,aAAa,GAAG;YAC7B;YACAO,iBAAiB,QAAQA,iBAAiB,KAAK,IAAI,KAAK,IAAIA,aAAaW,GAAGG;YAC5E,OAAOA;QACX;IACJ,GAAG;QACCd;QACAG;KACH;IACD,MAAMd,gBAAgB,CAACsB,GAAGI,gBAAgBC;QACtC,MAAMF,WAAW;YACbtB,YAAYuB;YACZtB,eAAeuB;QACnB;QACAhB,iBAAiB,QAAQA,iBAAiB,KAAK,IAAI,KAAK,IAAIA,aAAaW,GAAGG;QAC5EX,UAAUW;IACd;IACA,MAAMxB,OAAOmB,OAAMC,WAAW,CAAC,CAACnB;QAC5B,OAAOA,KAAK0B,KAAK,GAAG3B,IAAI,CAAC,CAAC4B,GAAGC;YACzB,MAAMC,gBAAgBvB,QAAQwB,IAAI,CAAC,CAACC,SAASA,OAAOV,QAAQ,KAAKpB;YACjE,IAAI,CAAE4B,CAAAA,kBAAkB,QAAQA,kBAAkB,KAAK,IAAI,KAAK,IAAIA,cAAcG,OAAO,AAAD,GAAI;gBACxF,OAAO;YACX;YACA,MAAMC,MAAM/B,kBAAkB,cAAc,IAAI,CAAC;YACjD,OAAO2B,cAAcG,OAAO,CAACL,EAAEO,IAAI,EAAEN,EAAEM,IAAI,IAAID;QACnD;IACJ,GAAG;QACC3B;QACAL;QACAC;KACH;IACD,MAAML,mBAAmB,CAACwB;QACtB,OAAOpB,eAAeoB,WAAWnB,gBAAgBN;IACrD;IACA,OAAO;QACH,GAAGS,UAAU;QACbN,MAAM;YACFA;YACAE;YACAC;YACAJ;YACAK;YACAN;QACJ;IACJ;AACJ"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-table",
-  "version": "9.11.2",
+  "version": "9.11.3",
   "description": "React components for building web experiences",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -36,23 +36,23 @@
   },
   "dependencies": {
     "@fluentui/keyboard-keys": "^9.0.7",
-    "@fluentui/react-aria": "^9.7.0",
-    "@fluentui/react-avatar": "^9.6.6",
-    "@fluentui/react-checkbox": "^9.2.5",
-    "@fluentui/react-context-selector": "^9.1.46",
+    "@fluentui/react-aria": "^9.7.1",
+    "@fluentui/react-avatar": "^9.6.7",
+    "@fluentui/react-checkbox": "^9.2.6",
+    "@fluentui/react-context-selector": "^9.1.47",
     "@fluentui/react-icons": "^2.0.224",
-    "@fluentui/react-radio": "^9.2.0",
+    "@fluentui/react-radio": "^9.2.1",
     "@fluentui/react-shared-contexts": "^9.13.2",
-    "@fluentui/react-tabster": "^9.17.0",
+    "@fluentui/react-tabster": "^9.17.1",
     "@fluentui/react-theme": "^9.1.16",
     "@fluentui/react-utilities": "^9.15.6",
-    "@fluentui/react-jsx-runtime": "^9.0.24",
+    "@fluentui/react-jsx-runtime": "^9.0.25",
     "@griffel/react": "^1.5.14",
     "@swc/helpers": "^0.5.1"
   },
   "peerDependencies": {
     "@types/react": ">=16.14.0 <19.0.0",
-    "@types/react-dom": ">=16.14.0 <19.0.0",
+    "@types/react-dom": ">=16.9.0 <19.0.0",
     "react": ">=16.14.0 <19.0.0",
     "react-dom": ">=16.14.0 <19.0.0"
   },