@fluentui/react-table 9.2.12 → 9.4.0

package/lib/hooks/useKeyboardResizing.js

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

package/lib/hooks/useKeyboardResizing.js.map

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

package/lib/hooks/useMeasureElement.js

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

package/lib/hooks/useMeasureElement.js.map

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

package/lib/hooks/useTableColumnResizeMouseHandler.js

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

package/lib/hooks/useTableColumnResizeMouseHandler.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useFluent_unstable","useFluent","getEventClientCoords","isMouseEvent","isTouchEvent","useTableColumnResizeMouseHandler","columnResizeState","mouseX","useRef","currentWidth","colId","undefined","targetDocument","globalWin","defaultView","recalculatePosition","useCallback","e","clientX","dx","current","setColumnWidth","columnId","width","onDrag","requestAnimationFrame","onDragEnd","event","removeEventListener","getOnMouseDown","getColumnWidth","target","currentTarget","button","addEventListener"],"sources":["../../src/hooks/useTableColumnResizeMouseHandler.ts"],"sourcesContent":["import * as React from 'react';\nimport { TableColumnId, ColumnResizeState } from './types';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport {\n  NativeTouchOrMouseEvent,\n  ReactTouchOrMouseEvent,\n  getEventClientCoords,\n  isMouseEvent,\n  isTouchEvent,\n} from '@fluentui/react-utilities';\n\nexport function useTableColumnResizeMouseHandler(columnResizeState: ColumnResizeState) {\n  const mouseX = React.useRef(0);\n  const currentWidth = React.useRef(0);\n  const colId = React.useRef<TableColumnId | undefined>(undefined);\n\n  const { targetDocument } = useFluent();\n  const globalWin = targetDocument?.defaultView;\n\n  const recalculatePosition = React.useCallback(\n    (e: NativeTouchOrMouseEvent) => {\n      const { clientX } = getEventClientCoords(e);\n      const dx = clientX - mouseX.current;\n\n      // Update the local width for the column and set it\n      currentWidth.current += dx;\n      colId.current && columnResizeState.setColumnWidth(e, { columnId: colId.current, width: currentWidth.current });\n      mouseX.current = clientX;\n    },\n    [columnResizeState],\n  );\n\n  const onDrag = React.useCallback(\n    (e: NativeTouchOrMouseEvent) => {\n      // Using requestAnimationFrame here drastically improves resizing experience on slower CPUs\n      if (typeof globalWin?.requestAnimationFrame === 'function') {\n        requestAnimationFrame(() => recalculatePosition(e));\n      } else {\n        recalculatePosition(e);\n      }\n    },\n    [globalWin?.requestAnimationFrame, recalculatePosition],\n  );\n\n  const onDragEnd = React.useCallback(\n    (event: NativeTouchOrMouseEvent) => {\n      if (isMouseEvent(event)) {\n        targetDocument?.removeEventListener('mouseup', onDragEnd);\n        targetDocument?.removeEventListener('mousemove', onDrag);\n      }\n      if (isTouchEvent(event)) {\n        targetDocument?.removeEventListener('touchend', onDragEnd);\n        targetDocument?.removeEventListener('touchmove', onDrag);\n      }\n    },\n    [onDrag, targetDocument],\n  );\n\n  const getOnMouseDown = (columnId: TableColumnId) => (event: ReactTouchOrMouseEvent) => {\n    // Keep the width locally so that we decouple the calculation of the next with from rendering.\n    // This makes the whole experience much faster and more precise\n    currentWidth.current = columnResizeState.getColumnWidth(columnId);\n    mouseX.current = getEventClientCoords(event).clientX;\n    colId.current = columnId;\n\n    if (isMouseEvent(event)) {\n      // ignore other buttons than primary mouse button\n      if (event.target !== event.currentTarget || event.button !== 0) {\n        return;\n      }\n      targetDocument?.addEventListener('mouseup', onDragEnd);\n      targetDocument?.addEventListener('mousemove', onDrag);\n    }\n\n    if (isTouchEvent(event)) {\n      targetDocument?.addEventListener('touchend', onDragEnd);\n      targetDocument?.addEventListener('touchmove', onDrag);\n    }\n  };\n\n  return {\n    getOnMouseDown: (columnId: TableColumnId) => getOnMouseDown(columnId),\n  };\n}\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AAEvB,SAASC,kBAAA,IAAsBC,SAAS,QAAQ;AAChD,SAGEC,oBAAoB,EACpBC,YAAY,EACZC,YAAY,QACP;AAEP,OAAO,SAASC,iCAAiCC,iBAAoC,EAAE;EACrF,MAAMC,MAAA,GAASR,KAAA,CAAMS,MAAM,CAAC;EAC5B,MAAMC,YAAA,GAAeV,KAAA,CAAMS,MAAM,CAAC;EAClC,MAAME,KAAA,GAAQX,KAAA,CAAMS,MAAM,CAA4BG,SAAA;EAEtD,MAAM;IAAEC;EAAc,CAAE,GAAGX,SAAA;EAC3B,MAAMY,SAAA,GAAYD,cAAA,aAAAA,cAAA,uBAAAA,cAAA,CAAgBE,WAAW;EAE7C,MAAMC,mBAAA,GAAsBhB,KAAA,CAAMiB,WAAW,CAC1CC,CAAA,IAA+B;IAC9B,MAAM;MAAEC;IAAO,CAAE,GAAGhB,oBAAA,CAAqBe,CAAA;IACzC,MAAME,EAAA,GAAKD,OAAA,GAAUX,MAAA,CAAOa,OAAO;IAEnC;IACAX,YAAA,CAAaW,OAAO,IAAID,EAAA;IACxBT,KAAA,CAAMU,OAAO,IAAId,iBAAA,CAAkBe,cAAc,CAACJ,CAAA,EAAG;MAAEK,QAAA,EAAUZ,KAAA,CAAMU,OAAO;MAAEG,KAAA,EAAOd,YAAA,CAAaW;IAAQ;IAC5Gb,MAAA,CAAOa,OAAO,GAAGF,OAAA;EACnB,GACA,CAACZ,iBAAA,CAAkB;EAGrB,MAAMkB,MAAA,GAASzB,KAAA,CAAMiB,WAAW,CAC7BC,CAAA,IAA+B;IAC9B;IACA,IAAI,QAAOJ,SAAA,aAAAA,SAAA,uBAAAA,SAAA,CAAWY,qBAAqB,CAAD,KAAM,YAAY;MAC1DA,qBAAA,CAAsB,MAAMV,mBAAA,CAAoBE,CAAA;IAClD,OAAO;MACLF,mBAAA,CAAoBE,CAAA;IACtB;EACF,GACA,CAACJ,SAAA,aAAAA,SAAA,uBAAAA,SAAA,CAAWY,qBAAqB,EAAEV,mBAAA,CAAoB;EAGzD,MAAMW,SAAA,GAAY3B,KAAA,CAAMiB,WAAW,CAChCW,KAAA,IAAmC;IAClC,IAAIxB,YAAA,CAAawB,KAAA,GAAQ;MACvBf,cAAA,aAAAA,cAAA,uBAAAA,cAAA,CAAgBgB,mBAAmB,CAAC,WAAWF,SAAA;MAC/Cd,cAAA,aAAAA,cAAA,uBAAAA,cAAA,CAAgBgB,mBAAmB,CAAC,aAAaJ,MAAA;IACnD;IACA,IAAIpB,YAAA,CAAauB,KAAA,GAAQ;MACvBf,cAAA,aAAAA,cAAA,uBAAAA,cAAA,CAAgBgB,mBAAmB,CAAC,YAAYF,SAAA;MAChDd,cAAA,aAAAA,cAAA,uBAAAA,cAAA,CAAgBgB,mBAAmB,CAAC,aAAaJ,MAAA;IACnD;EACF,GACA,CAACA,MAAA,EAAQZ,cAAA,CAAe;EAG1B,MAAMiB,cAAA,GAAkBP,QAAA;IAA4B,OAACK,KAAA,IAAkC;MACrF;MACA;MACAlB,YAAA,CAAaW,OAAO,GAAGd,iBAAA,CAAkBwB,cAAc,CAACR,QAAA;MACxDf,MAAA,CAAOa,OAAO,GAAGlB,oBAAA,CAAqByB,KAAA,EAAOT,OAAO;MACpDR,KAAA,CAAMU,OAAO,GAAGE,QAAA;MAEhB,IAAInB,YAAA,CAAawB,KAAA,GAAQ;QACvB;QACA,IAAIA,KAAA,CAAMI,MAAM,KAAKJ,KAAA,CAAMK,aAAa,IAAIL,KAAA,CAAMM,MAAM,KAAK,GAAG;UAC9D;QACF;QACArB,cAAA,aAAAA,cAAA,uBAAAA,cAAA,CAAgBsB,gBAAgB,CAAC,WAAWR,SAAA;QAC5Cd,cAAA,aAAAA,cAAA,uBAAAA,cAAA,CAAgBsB,gBAAgB,CAAC,aAAaV,MAAA;MAChD;MAEA,IAAIpB,YAAA,CAAauB,KAAA,GAAQ;QACvBf,cAAA,aAAAA,cAAA,uBAAAA,cAAA,CAAgBsB,gBAAgB,CAAC,YAAYR,SAAA;QAC7Cd,cAAA,aAAAA,cAAA,uBAAAA,cAAA,CAAgBsB,gBAAgB,CAAC,aAAaV,MAAA;MAChD;IACF;;EAEA,OAAO;IACLK,cAAA,EAAiBP,QAAA,IAA4BO,cAAA,CAAeP,QAAA;EAC9D;AACF"}
+{"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"}