@fluentui/react-table 9.11.15 → 9.12.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (14) hide show
  1. package/CHANGELOG.md +41 -12
  2. package/lib/hooks/useMeasureElement.js +18 -10
  3. package/lib/hooks/useMeasureElement.js.map +1 -1
  4. package/lib/hooks/useTableColumnResizeMouseHandler.js +6 -1
  5. package/lib/hooks/useTableColumnResizeMouseHandler.js.map +1 -1
  6. package/lib/hooks/useTableColumnSizing.js +9 -4
  7. package/lib/hooks/useTableColumnSizing.js.map +1 -1
  8. package/lib-commonjs/hooks/useMeasureElement.js +18 -10
  9. package/lib-commonjs/hooks/useMeasureElement.js.map +1 -1
  10. package/lib-commonjs/hooks/useTableColumnResizeMouseHandler.js +6 -1
  11. package/lib-commonjs/hooks/useTableColumnResizeMouseHandler.js.map +1 -1
  12. package/lib-commonjs/hooks/useTableColumnSizing.js +9 -4
  13. package/lib-commonjs/hooks/useTableColumnSizing.js.map +1 -1
  14. package/package.json +10 -10
package/CHANGELOG.md CHANGED
@@ -1,26 +1,55 @@
1
1
  # Change Log - @fluentui/react-table
2
2
 
3
- This log was last generated on Mon, 18 Mar 2024 19:44:52 GMT and should not be manually modified.
3
+ This log was last generated on Tue, 02 Apr 2024 09:41:20 GMT and should not be manually modified.
4
4
 
5
5
  <!-- Start content -->
6
6
 
7
+ ## [9.12.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-table_v9.12.1)
8
+
9
+ Tue, 02 Apr 2024 09:41:20 GMT
10
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-table_v9.12.0..@fluentui/react-table_v9.12.1)
11
+
12
+ ### Patches
13
+
14
+ - Bump @fluentui/react-aria to v9.10.3 ([PR #30926](https://github.com/microsoft/fluentui/pull/30926) by beachball)
15
+ - Bump @fluentui/react-avatar to v9.6.20 ([PR #30926](https://github.com/microsoft/fluentui/pull/30926) by beachball)
16
+ - Bump @fluentui/react-checkbox to v9.2.19 ([PR #30926](https://github.com/microsoft/fluentui/pull/30926) by beachball)
17
+ - Bump @fluentui/react-context-selector to v9.1.57 ([PR #30926](https://github.com/microsoft/fluentui/pull/30926) by beachball)
18
+ - Bump @fluentui/react-radio to v9.2.14 ([PR #30926](https://github.com/microsoft/fluentui/pull/30926) by beachball)
19
+ - Bump @fluentui/react-shared-contexts to v9.16.0 ([PR #30926](https://github.com/microsoft/fluentui/pull/30926) by beachball)
20
+ - Bump @fluentui/react-tabster to v9.19.6 ([PR #30926](https://github.com/microsoft/fluentui/pull/30926) by beachball)
21
+ - Bump @fluentui/react-utilities to v9.18.6 ([PR #30926](https://github.com/microsoft/fluentui/pull/30926) by beachball)
22
+ - Bump @fluentui/react-jsx-runtime to v9.0.35 ([PR #30926](https://github.com/microsoft/fluentui/pull/30926) by beachball)
23
+
24
+ ## [9.12.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-table_v9.12.0)
25
+
26
+ Mon, 25 Mar 2024 11:12:14 GMT
27
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-table_v9.11.15..@fluentui/react-table_v9.12.0)
28
+
29
+ ### Minor changes
30
+
31
+ - fix: column resizing in StrictMode now works ([PR #30743](https://github.com/microsoft/fluentui/pull/30743) by jirivyhnalek@microsoft.com)
32
+ - fix: DataGrid - prevent unwanted sort after column resizing (#27803) ([PR #30780](https://github.com/microsoft/fluentui/pull/30780) by jirivyhnalek@microsoft.com)
33
+ - Bump @fluentui/react-checkbox to v9.2.18 ([PR #30845](https://github.com/microsoft/fluentui/pull/30845) by beachball)
34
+ - Bump @fluentui/react-radio to v9.2.13 ([PR #30845](https://github.com/microsoft/fluentui/pull/30845) by beachball)
35
+
7
36
  ## [9.11.15](https://github.com/microsoft/fluentui/tree/@fluentui/react-table_v9.11.15)
8
37
 
9
- Mon, 18 Mar 2024 19:44:52 GMT
38
+ Mon, 18 Mar 2024 19:50:46 GMT
10
39
  [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-table_v9.11.14..@fluentui/react-table_v9.11.15)
11
40
 
12
41
  ### Patches
13
42
 
14
- - Bump @fluentui/react-aria to v9.10.2 ([PR #30803](https://github.com/microsoft/fluentui/pull/30803) by beachball)
15
- - Bump @fluentui/react-avatar to v9.6.19 ([PR #30803](https://github.com/microsoft/fluentui/pull/30803) by beachball)
16
- - Bump @fluentui/react-checkbox to v9.2.17 ([PR #30803](https://github.com/microsoft/fluentui/pull/30803) by beachball)
17
- - Bump @fluentui/react-context-selector to v9.1.56 ([PR #30803](https://github.com/microsoft/fluentui/pull/30803) by beachball)
18
- - Bump @fluentui/react-radio to v9.2.12 ([PR #30803](https://github.com/microsoft/fluentui/pull/30803) by beachball)
19
- - Bump @fluentui/react-shared-contexts to v9.15.2 ([PR #30803](https://github.com/microsoft/fluentui/pull/30803) by beachball)
20
- - Bump @fluentui/react-tabster to v9.19.5 ([PR #30803](https://github.com/microsoft/fluentui/pull/30803) by beachball)
21
- - Bump @fluentui/react-theme to v9.1.19 ([PR #30803](https://github.com/microsoft/fluentui/pull/30803) by beachball)
22
- - Bump @fluentui/react-utilities to v9.18.5 ([PR #30803](https://github.com/microsoft/fluentui/pull/30803) by beachball)
23
- - Bump @fluentui/react-jsx-runtime to v9.0.34 ([PR #30803](https://github.com/microsoft/fluentui/pull/30803) by beachball)
43
+ - Bump @fluentui/react-aria to v9.10.2 ([PR #30600](https://github.com/microsoft/fluentui/pull/30600) by beachball)
44
+ - Bump @fluentui/react-avatar to v9.6.19 ([PR #30600](https://github.com/microsoft/fluentui/pull/30600) by beachball)
45
+ - Bump @fluentui/react-checkbox to v9.2.17 ([PR #30600](https://github.com/microsoft/fluentui/pull/30600) by beachball)
46
+ - Bump @fluentui/react-context-selector to v9.1.56 ([PR #30600](https://github.com/microsoft/fluentui/pull/30600) by beachball)
47
+ - Bump @fluentui/react-radio to v9.2.12 ([PR #30600](https://github.com/microsoft/fluentui/pull/30600) by beachball)
48
+ - Bump @fluentui/react-shared-contexts to v9.15.2 ([PR #30600](https://github.com/microsoft/fluentui/pull/30600) by beachball)
49
+ - Bump @fluentui/react-tabster to v9.19.5 ([PR #30600](https://github.com/microsoft/fluentui/pull/30600) by beachball)
50
+ - Bump @fluentui/react-theme to v9.1.19 ([PR #30600](https://github.com/microsoft/fluentui/pull/30600) by beachball)
51
+ - Bump @fluentui/react-utilities to v9.18.5 ([PR #30600](https://github.com/microsoft/fluentui/pull/30600) by beachball)
52
+ - Bump @fluentui/react-jsx-runtime to v9.0.34 ([PR #30600](https://github.com/microsoft/fluentui/pull/30600) by beachball)
24
53
 
25
54
  ## [9.11.14](https://github.com/microsoft/fluentui/tree/@fluentui/react-table_v9.11.14)
26
55
 
package/lib/hooks/useMeasureElement.js CHANGED
@@ -8,6 +8,7 @@ import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts
8
8
  */ export function useMeasureElement() {
9
9
  const [width, setWidth] = React.useState(0);
10
10
  const container = React.useRef(undefined);
11
+ const resizeObserverRef = React.useRef(null);
11
12
  const { targetDocument } = useFluent();
12
13
  // the handler for resize observer
13
14
  const handleResize = React.useCallback(()=>{
@@ -15,31 +16,38 @@ import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts
15
16
  const containerWidth = (_container_current = container.current) === null || _container_current === void 0 ? void 0 : _container_current.getBoundingClientRect().width;
16
17
  setWidth(containerWidth || 0);
17
18
  }, []);
18
- // Keep the reference of ResizeObserver in the state, as it should live through renders
19
- const [resizeObserver] = React.useState(()=>createResizeObserverFromDocument(targetDocument, handleResize));
20
19
  const measureElementRef = React.useCallback((el)=>{
21
- if (!targetDocument || !resizeObserver) {
20
+ if (!targetDocument) {
22
21
  return;
23
22
  }
24
- // cleanup previous container
25
- if (container.current) {
26
- resizeObserver.unobserve(container.current);
23
+ // if the element is removed, stop observing it
24
+ if (!el && resizeObserverRef.current && container.current) {
25
+ resizeObserverRef.current.unobserve(container.current);
27
26
  }
28
27
  container.current = undefined;
29
28
  if (el === null || el === void 0 ? void 0 : el.parentElement) {
29
+ var _resizeObserverRef_current;
30
30
  container.current = el.parentElement;
31
- resizeObserver.observe(container.current);
32
31
  handleResize();
32
+ (_resizeObserverRef_current = resizeObserverRef.current) === null || _resizeObserverRef_current === void 0 ? void 0 : _resizeObserverRef_current.observe(container.current);
33
33
  }
34
34
  }, [
35
35
  targetDocument,
36
- resizeObserver,
37
36
  handleResize
38
37
  ]);
39
38
  React.useEffect(()=>{
40
- return ()=>resizeObserver === null || resizeObserver === void 0 ? void 0 : resizeObserver.disconnect();
39
+ resizeObserverRef.current = createResizeObserverFromDocument(targetDocument, handleResize);
40
+ if (!container.current || !resizeObserverRef.current) {
41
+ return;
42
+ }
43
+ resizeObserverRef.current.observe(container.current);
44
+ return ()=>{
45
+ var _resizeObserverRef_current;
46
+ (_resizeObserverRef_current = resizeObserverRef.current) === null || _resizeObserverRef_current === void 0 ? void 0 : _resizeObserverRef_current.disconnect();
47
+ };
41
48
  }, [
42
- resizeObserver
49
+ handleResize,
50
+ targetDocument
43
51
  ]);
44
52
  return {
45
53
  width,
package/lib/hooks/useMeasureElement.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["useMeasureElement.ts"],"sourcesContent":["import * 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(() => createResizeObserverFromDocument(targetDocument, handleResize));\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 }\n\n container.current = undefined;\n if (el?.parentElement) {\n container.current = el.parentElement;\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\n/**\n * FIXME - TS 3.8/3.9 don't have ResizeObserver types by default, move this to a shared utility once we bump the minbar\n * A utility method that creates a ResizeObserver from a target document\n * @param targetDocument - document to use to create the ResizeObserver\n * @param callback - https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver/ResizeObserver#callback\n * @returns a ResizeObserver instance or null if the global does not exist on the document\n */\nexport function createResizeObserverFromDocument(\n targetDocument: Document | null | undefined,\n callback: ResizeObserverCallback,\n) {\n if (!targetDocument?.defaultView?.ResizeObserver) {\n return null;\n }\n\n return new targetDocument.defaultView.ResizeObserver(callback);\n}\n"],"names":["React","useFluent_unstable","useFluent","useMeasureElement","width","setWidth","useState","container","useRef","undefined","targetDocument","handleResize","useCallback","containerWidth","current","getBoundingClientRect","resizeObserver","createResizeObserverFromDocument","measureElementRef","el","unobserve","parentElement","observe","useEffect","disconnect","callback","defaultView","ResizeObserver"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,sBAAsBC,SAAS,QAAQ,kCAAkC;AAElF;;;;;CAKC,GACD,OAAO,SAASC;IACd,MAAM,CAACC,OAAOC,SAAS,GAAGL,MAAMM,QAAQ,CAAC;IACzC,MAAMC,YAAYP,MAAMQ,MAAM,CAA0BC;IAExD,MAAM,EAAEC,cAAc,EAAE,GAAGR;IAE3B,kCAAkC;IAClC,MAAMS,eAAeX,MAAMY,WAAW,CAAC;YACdL;QAAvB,MAAMM,kBAAiBN,qBAAAA,UAAUO,OAAO,cAAjBP,yCAAAA,mBAAmBQ,qBAAqB,GAAGX,KAAK;QACvEC,SAASQ,kBAAkB;IAC7B,GAAG,EAAE;IAEL,uFAAuF;IACvF,MAAM,CAACG,eAAe,GAAGhB,MAAMM,QAAQ,CAAC,IAAMW,iCAAiCP,gBAAgBC;IAC/F,MAAMO,oBAAoBlB,MAAMY,WAAW,CACzC,CAACO;QACC,IAAI,CAACT,kBAAkB,CAACM,gBAAgB;YACtC;QACF;QAEA,6BAA6B;QAC7B,IAAIT,UAAUO,OAAO,EAAE;YACrBE,eAAeI,SAAS,CAACb,UAAUO,OAAO;QAC5C;QAEAP,UAAUO,OAAO,GAAGL;QACpB,IAAIU,eAAAA,yBAAAA,GAAIE,aAAa,EAAE;YACrBd,UAAUO,OAAO,GAAGK,GAAGE,aAAa;YACpCL,eAAeM,OAAO,CAACf,UAAUO,OAAO;YACxCH;QACF;IACF,GACA;QAACD;QAAgBM;QAAgBL;KAAa;IAGhDX,MAAMuB,SAAS,CAAC;QACd,OAAO,IAAMP,2BAAAA,qCAAAA,eAAgBQ,UAAU;IACzC,GAAG;QAACR;KAAe;IAEnB,OAAO;QAAEZ;QAAOc;IAAkB;AACpC;AAEA;;;;;;CAMC,GACD,OAAO,SAASD,iCACdP,cAA2C,EAC3Ce,QAAgC;QAE3Bf;IAAL,IAAI,EAACA,2BAAAA,sCAAAA,8BAAAA,eAAgBgB,WAAW,cAA3BhB,kDAAAA,4BAA6BiB,cAAc,GAAE;QAChD,OAAO;IACT;IAEA,OAAO,IAAIjB,eAAegB,WAAW,CAACC,cAAc,CAACF;AACvD"}
1
+ {"version":3,"sources":["useMeasureElement.ts"],"sourcesContent":["import * 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\n const container = React.useRef<HTMLElement | undefined>(undefined);\n const resizeObserverRef = React.useRef<ResizeObserver | null>(null);\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 const measureElementRef = React.useCallback(\n (el: TElement | null) => {\n if (!targetDocument) {\n return;\n }\n\n // if the element is removed, stop observing it\n if (!el && resizeObserverRef.current && container.current) {\n resizeObserverRef.current.unobserve(container.current);\n }\n\n container.current = undefined;\n\n if (el?.parentElement) {\n container.current = el.parentElement;\n handleResize();\n resizeObserverRef.current?.observe(container.current);\n }\n },\n [targetDocument, handleResize],\n );\n\n React.useEffect(() => {\n resizeObserverRef.current = createResizeObserverFromDocument(targetDocument, handleResize);\n\n if (!container.current || !resizeObserverRef.current) {\n return;\n }\n\n resizeObserverRef.current.observe(container.current);\n\n return () => {\n resizeObserverRef.current?.disconnect();\n };\n }, [handleResize, targetDocument]);\n\n return { width, measureElementRef };\n}\n\n/**\n * FIXME - TS 3.8/3.9 don't have ResizeObserver types by default, move this to a shared utility once we bump the minbar\n * A utility method that creates a ResizeObserver from a target document\n * @param targetDocument - document to use to create the ResizeObserver\n * @param callback - https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver/ResizeObserver#callback\n * @returns a ResizeObserver instance or null if the global does not exist on the document\n */\nexport function createResizeObserverFromDocument(\n targetDocument: Document | null | undefined,\n callback: ResizeObserverCallback,\n) {\n if (!targetDocument?.defaultView?.ResizeObserver) {\n return null;\n }\n\n return new targetDocument.defaultView.ResizeObserver(callback);\n}\n"],"names":["React","useFluent_unstable","useFluent","useMeasureElement","width","setWidth","useState","container","useRef","undefined","resizeObserverRef","targetDocument","handleResize","useCallback","containerWidth","current","getBoundingClientRect","measureElementRef","el","unobserve","parentElement","observe","useEffect","createResizeObserverFromDocument","disconnect","callback","defaultView","ResizeObserver"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,sBAAsBC,SAAS,QAAQ,kCAAkC;AAElF;;;;;CAKC,GACD,OAAO,SAASC;IACd,MAAM,CAACC,OAAOC,SAAS,GAAGL,MAAMM,QAAQ,CAAC;IAEzC,MAAMC,YAAYP,MAAMQ,MAAM,CAA0BC;IACxD,MAAMC,oBAAoBV,MAAMQ,MAAM,CAAwB;IAE9D,MAAM,EAAEG,cAAc,EAAE,GAAGT;IAE3B,kCAAkC;IAClC,MAAMU,eAAeZ,MAAMa,WAAW,CAAC;YACdN;QAAvB,MAAMO,kBAAiBP,qBAAAA,UAAUQ,OAAO,cAAjBR,yCAAAA,mBAAmBS,qBAAqB,GAAGZ,KAAK;QACvEC,SAASS,kBAAkB;IAC7B,GAAG,EAAE;IAEL,MAAMG,oBAAoBjB,MAAMa,WAAW,CACzC,CAACK;QACC,IAAI,CAACP,gBAAgB;YACnB;QACF;QAEA,+CAA+C;QAC/C,IAAI,CAACO,MAAMR,kBAAkBK,OAAO,IAAIR,UAAUQ,OAAO,EAAE;YACzDL,kBAAkBK,OAAO,CAACI,SAAS,CAACZ,UAAUQ,OAAO;QACvD;QAEAR,UAAUQ,OAAO,GAAGN;QAEpB,IAAIS,eAAAA,yBAAAA,GAAIE,aAAa,EAAE;gBAGrBV;YAFAH,UAAUQ,OAAO,GAAGG,GAAGE,aAAa;YACpCR;aACAF,6BAAAA,kBAAkBK,OAAO,cAAzBL,iDAAAA,2BAA2BW,OAAO,CAACd,UAAUQ,OAAO;QACtD;IACF,GACA;QAACJ;QAAgBC;KAAa;IAGhCZ,MAAMsB,SAAS,CAAC;QACdZ,kBAAkBK,OAAO,GAAGQ,iCAAiCZ,gBAAgBC;QAE7E,IAAI,CAACL,UAAUQ,OAAO,IAAI,CAACL,kBAAkBK,OAAO,EAAE;YACpD;QACF;QAEAL,kBAAkBK,OAAO,CAACM,OAAO,CAACd,UAAUQ,OAAO;QAEnD,OAAO;gBACLL;aAAAA,6BAAAA,kBAAkBK,OAAO,cAAzBL,iDAAAA,2BAA2Bc,UAAU;QACvC;IACF,GAAG;QAACZ;QAAcD;KAAe;IAEjC,OAAO;QAAEP;QAAOa;IAAkB;AACpC;AAEA;;;;;;CAMC,GACD,OAAO,SAASM,iCACdZ,cAA2C,EAC3Cc,QAAgC;QAE3Bd;IAAL,IAAI,EAACA,2BAAAA,sCAAAA,8BAAAA,eAAgBe,WAAW,cAA3Bf,kDAAAA,4BAA6BgB,cAAc,GAAE;QAChD,OAAO;IACT;IAEA,OAAO,IAAIhB,eAAee,WAAW,CAACC,cAAc,CAACF;AACvD"}
package/lib/hooks/useTableColumnResizeMouseHandler.js CHANGED
@@ -5,6 +5,7 @@ export function useTableColumnResizeMouseHandler(columnResizeState) {
5
5
  const mouseX = React.useRef(0);
6
6
  const currentWidth = React.useRef(0);
7
7
  const colId = React.useRef(undefined);
8
+ const [dragging, setDragging] = React.useState(false);
8
9
  const { targetDocument } = useFluent();
9
10
  const globalWin = targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.defaultView;
10
11
  const { getColumnWidth, setColumnWidth } = columnResizeState;
@@ -41,6 +42,7 @@ export function useTableColumnResizeMouseHandler(columnResizeState) {
41
42
  targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.removeEventListener('touchend', onDragEnd);
42
43
  targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.removeEventListener('touchmove', onDrag);
43
44
  }
45
+ setDragging(false);
44
46
  }, [
45
47
  onDrag,
46
48
  targetDocument
@@ -58,10 +60,12 @@ export function useTableColumnResizeMouseHandler(columnResizeState) {
58
60
  }
59
61
  targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.addEventListener('mouseup', onDragEnd);
60
62
  targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.addEventListener('mousemove', onDrag);
63
+ setDragging(true);
61
64
  }
62
65
  if (isTouchEvent(event)) {
63
66
  targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.addEventListener('touchend', onDragEnd);
64
67
  targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.addEventListener('touchmove', onDrag);
68
+ setDragging(true);
65
69
  }
66
70
  }, [
67
71
  getColumnWidth,
@@ -70,6 +74,7 @@ export function useTableColumnResizeMouseHandler(columnResizeState) {
70
74
  targetDocument
71
75
  ]);
72
76
  return {
73
- getOnMouseDown
77
+ getOnMouseDown,
78
+ dragging
74
79
  };
75
80
  }
package/lib/hooks/useTableColumnResizeMouseHandler.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["useTableColumnResizeMouseHandler.ts"],"sourcesContent":["import * as React from 'react';\nimport { TableColumnId, ColumnResizeState } from './types';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport {\n NativeTouchOrMouseEvent,\n ReactTouchOrMouseEvent,\n getEventClientCoords,\n isMouseEvent,\n isTouchEvent,\n} from '@fluentui/react-utilities';\n\nexport function useTableColumnResizeMouseHandler(columnResizeState: ColumnResizeState) {\n const mouseX = React.useRef(0);\n const currentWidth = React.useRef(0);\n const colId = React.useRef<TableColumnId | undefined>(undefined);\n\n const { targetDocument } = useFluent();\n const globalWin = targetDocument?.defaultView;\n\n const { getColumnWidth, setColumnWidth } = columnResizeState;\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 && setColumnWidth(e, { columnId: colId.current, width: currentWidth.current });\n mouseX.current = clientX;\n },\n [setColumnWidth],\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 = React.useCallback(\n (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 = 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 [getColumnWidth, onDrag, onDragEnd, targetDocument],\n );\n\n return {\n getOnMouseDown,\n };\n}\n"],"names":["React","useFluent_unstable","useFluent","getEventClientCoords","isMouseEvent","isTouchEvent","useTableColumnResizeMouseHandler","columnResizeState","mouseX","useRef","currentWidth","colId","undefined","targetDocument","globalWin","defaultView","getColumnWidth","setColumnWidth","recalculatePosition","useCallback","e","clientX","dx","current","columnId","width","onDrag","requestAnimationFrame","onDragEnd","event","removeEventListener","getOnMouseDown","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;IACnF,MAAMC,SAASR,MAAMS,MAAM,CAAC;IAC5B,MAAMC,eAAeV,MAAMS,MAAM,CAAC;IAClC,MAAME,QAAQX,MAAMS,MAAM,CAA4BG;IAEtD,MAAM,EAAEC,cAAc,EAAE,GAAGX;IAC3B,MAAMY,YAAYD,2BAAAA,qCAAAA,eAAgBE,WAAW;IAE7C,MAAM,EAAEC,cAAc,EAAEC,cAAc,EAAE,GAAGV;IAE3C,MAAMW,sBAAsBlB,MAAMmB,WAAW,CAC3C,CAACC;QACC,MAAM,EAAEC,OAAO,EAAE,GAAGlB,qBAAqBiB;QACzC,MAAME,KAAKD,UAAUb,OAAOe,OAAO;QAEnC,mDAAmD;QACnDb,aAAaa,OAAO,IAAID;QACxBX,MAAMY,OAAO,IAAIN,eAAeG,GAAG;YAAEI,UAAUb,MAAMY,OAAO;YAAEE,OAAOf,aAAaa,OAAO;QAAC;QAC1Ff,OAAOe,OAAO,GAAGF;IACnB,GACA;QAACJ;KAAe;IAGlB,MAAMS,SAAS1B,MAAMmB,WAAW,CAC9B,CAACC;QACC,2FAA2F;QAC3F,IAAI,QAAON,sBAAAA,gCAAAA,UAAWa,qBAAqB,MAAK,YAAY;YAC1DA,sBAAsB,IAAMT,oBAAoBE;QAClD,OAAO;YACLF,oBAAoBE;QACtB;IACF,GACA;QAACN,sBAAAA,gCAAAA,UAAWa,qBAAqB;QAAET;KAAoB;IAGzD,MAAMU,YAAY5B,MAAMmB,WAAW,CACjC,CAACU;QACC,IAAIzB,aAAayB,QAAQ;YACvBhB,2BAAAA,qCAAAA,eAAgBiB,mBAAmB,CAAC,WAAWF;YAC/Cf,2BAAAA,qCAAAA,eAAgBiB,mBAAmB,CAAC,aAAaJ;QACnD;QACA,IAAIrB,aAAawB,QAAQ;YACvBhB,2BAAAA,qCAAAA,eAAgBiB,mBAAmB,CAAC,YAAYF;YAChDf,2BAAAA,qCAAAA,eAAgBiB,mBAAmB,CAAC,aAAaJ;QACnD;IACF,GACA;QAACA;QAAQb;KAAe;IAG1B,MAAMkB,iBAAiB/B,MAAMmB,WAAW,CACtC,CAACK,WAA4B,CAACK;YAC5B,8FAA8F;YAC9F,+DAA+D;YAC/DnB,aAAaa,OAAO,GAAGP,eAAeQ;YACtChB,OAAOe,OAAO,GAAGpB,qBAAqB0B,OAAOR,OAAO;YACpDV,MAAMY,OAAO,GAAGC;YAEhB,IAAIpB,aAAayB,QAAQ;gBACvB,iDAAiD;gBACjD,IAAIA,MAAMG,MAAM,KAAKH,MAAMI,aAAa,IAAIJ,MAAMK,MAAM,KAAK,GAAG;oBAC9D;gBACF;gBACArB,2BAAAA,qCAAAA,eAAgBsB,gBAAgB,CAAC,WAAWP;gBAC5Cf,2BAAAA,qCAAAA,eAAgBsB,gBAAgB,CAAC,aAAaT;YAChD;YAEA,IAAIrB,aAAawB,QAAQ;gBACvBhB,2BAAAA,qCAAAA,eAAgBsB,gBAAgB,CAAC,YAAYP;gBAC7Cf,2BAAAA,qCAAAA,eAAgBsB,gBAAgB,CAAC,aAAaT;YAChD;QACF,GACA;QAACV;QAAgBU;QAAQE;QAAWf;KAAe;IAGrD,OAAO;QACLkB;IACF;AACF"}
1
+ {"version":3,"sources":["useTableColumnResizeMouseHandler.ts"],"sourcesContent":["import * as React from 'react';\nimport { TableColumnId, ColumnResizeState } from './types';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport {\n NativeTouchOrMouseEvent,\n ReactTouchOrMouseEvent,\n getEventClientCoords,\n isMouseEvent,\n isTouchEvent,\n} from '@fluentui/react-utilities';\n\nexport function useTableColumnResizeMouseHandler(columnResizeState: ColumnResizeState) {\n const mouseX = React.useRef(0);\n const currentWidth = React.useRef(0);\n const colId = React.useRef<TableColumnId | undefined>(undefined);\n const [dragging, setDragging] = React.useState<boolean>(false);\n\n const { targetDocument } = useFluent();\n const globalWin = targetDocument?.defaultView;\n\n const { getColumnWidth, setColumnWidth } = columnResizeState;\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 && setColumnWidth(e, { columnId: colId.current, width: currentWidth.current });\n mouseX.current = clientX;\n },\n [setColumnWidth],\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 setDragging(false);\n },\n [onDrag, targetDocument],\n );\n\n const getOnMouseDown = React.useCallback(\n (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 = 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 setDragging(true);\n }\n\n if (isTouchEvent(event)) {\n targetDocument?.addEventListener('touchend', onDragEnd);\n targetDocument?.addEventListener('touchmove', onDrag);\n setDragging(true);\n }\n },\n [getColumnWidth, onDrag, onDragEnd, targetDocument],\n );\n\n return {\n getOnMouseDown,\n dragging,\n };\n}\n"],"names":["React","useFluent_unstable","useFluent","getEventClientCoords","isMouseEvent","isTouchEvent","useTableColumnResizeMouseHandler","columnResizeState","mouseX","useRef","currentWidth","colId","undefined","dragging","setDragging","useState","targetDocument","globalWin","defaultView","getColumnWidth","setColumnWidth","recalculatePosition","useCallback","e","clientX","dx","current","columnId","width","onDrag","requestAnimationFrame","onDragEnd","event","removeEventListener","getOnMouseDown","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;IACnF,MAAMC,SAASR,MAAMS,MAAM,CAAC;IAC5B,MAAMC,eAAeV,MAAMS,MAAM,CAAC;IAClC,MAAME,QAAQX,MAAMS,MAAM,CAA4BG;IACtD,MAAM,CAACC,UAAUC,YAAY,GAAGd,MAAMe,QAAQ,CAAU;IAExD,MAAM,EAAEC,cAAc,EAAE,GAAGd;IAC3B,MAAMe,YAAYD,2BAAAA,qCAAAA,eAAgBE,WAAW;IAE7C,MAAM,EAAEC,cAAc,EAAEC,cAAc,EAAE,GAAGb;IAE3C,MAAMc,sBAAsBrB,MAAMsB,WAAW,CAC3C,CAACC;QACC,MAAM,EAAEC,OAAO,EAAE,GAAGrB,qBAAqBoB;QACzC,MAAME,KAAKD,UAAUhB,OAAOkB,OAAO;QAEnC,mDAAmD;QACnDhB,aAAagB,OAAO,IAAID;QACxBd,MAAMe,OAAO,IAAIN,eAAeG,GAAG;YAAEI,UAAUhB,MAAMe,OAAO;YAAEE,OAAOlB,aAAagB,OAAO;QAAC;QAC1FlB,OAAOkB,OAAO,GAAGF;IACnB,GACA;QAACJ;KAAe;IAGlB,MAAMS,SAAS7B,MAAMsB,WAAW,CAC9B,CAACC;QACC,2FAA2F;QAC3F,IAAI,QAAON,sBAAAA,gCAAAA,UAAWa,qBAAqB,MAAK,YAAY;YAC1DA,sBAAsB,IAAMT,oBAAoBE;QAClD,OAAO;YACLF,oBAAoBE;QACtB;IACF,GACA;QAACN,sBAAAA,gCAAAA,UAAWa,qBAAqB;QAAET;KAAoB;IAGzD,MAAMU,YAAY/B,MAAMsB,WAAW,CACjC,CAACU;QACC,IAAI5B,aAAa4B,QAAQ;YACvBhB,2BAAAA,qCAAAA,eAAgBiB,mBAAmB,CAAC,WAAWF;YAC/Cf,2BAAAA,qCAAAA,eAAgBiB,mBAAmB,CAAC,aAAaJ;QACnD;QACA,IAAIxB,aAAa2B,QAAQ;YACvBhB,2BAAAA,qCAAAA,eAAgBiB,mBAAmB,CAAC,YAAYF;YAChDf,2BAAAA,qCAAAA,eAAgBiB,mBAAmB,CAAC,aAAaJ;QACnD;QACAf,YAAY;IACd,GACA;QAACe;QAAQb;KAAe;IAG1B,MAAMkB,iBAAiBlC,MAAMsB,WAAW,CACtC,CAACK,WAA4B,CAACK;YAC5B,8FAA8F;YAC9F,+DAA+D;YAC/DtB,aAAagB,OAAO,GAAGP,eAAeQ;YACtCnB,OAAOkB,OAAO,GAAGvB,qBAAqB6B,OAAOR,OAAO;YACpDb,MAAMe,OAAO,GAAGC;YAEhB,IAAIvB,aAAa4B,QAAQ;gBACvB,iDAAiD;gBACjD,IAAIA,MAAMG,MAAM,KAAKH,MAAMI,aAAa,IAAIJ,MAAMK,MAAM,KAAK,GAAG;oBAC9D;gBACF;gBACArB,2BAAAA,qCAAAA,eAAgBsB,gBAAgB,CAAC,WAAWP;gBAC5Cf,2BAAAA,qCAAAA,eAAgBsB,gBAAgB,CAAC,aAAaT;gBAC9Cf,YAAY;YACd;YAEA,IAAIT,aAAa2B,QAAQ;gBACvBhB,2BAAAA,qCAAAA,eAAgBsB,gBAAgB,CAAC,YAAYP;gBAC7Cf,2BAAAA,qCAAAA,eAAgBsB,gBAAgB,CAAC,aAAaT;gBAC9Cf,YAAY;YACd;QACF,GACA;QAACK;QAAgBU;QAAQE;QAAWf;KAAe;IAGrD,OAAO;QACLkB;QACArB;IACF;AACF"}
package/lib/hooks/useTableColumnSizing.js CHANGED
@@ -24,14 +24,18 @@ export function useTableColumnSizing_unstable(params) {
24
24
  // eslint-disable-next-line react-hooks/rules-of-hooks
25
25
  return (tableState)=>useTableColumnSizingState(tableState, params);
26
26
  }
27
- function getColumnStyles(column) {
27
+ function getColumnStyles(column, dragging) {
28
28
  const width = column.width;
29
29
  return {
30
30
  // native styles
31
31
  width,
32
32
  // non-native element styles (flex layout)
33
33
  minWidth: width,
34
- maxWidth: width
34
+ maxWidth: width,
35
+ // Fixed the unwanted sort: https://github.com/microsoft/fluentui/issues/27803
36
+ ...dragging ? {
37
+ pointerEvents: 'none'
38
+ } : {}
35
39
  };
36
40
  }
37
41
  function useTableColumnSizingState(tableState, params) {
@@ -52,7 +56,7 @@ function useTableColumnSizingState(tableState, params) {
52
56
  toggleInteractiveMode
53
57
  ]);
54
58
  const { getColumnById, setColumnWidth, getColumns } = columnResizeState;
55
- const { getOnMouseDown } = mouseHandler;
59
+ const { getOnMouseDown, dragging } = mouseHandler;
56
60
  return {
57
61
  ...tableState,
58
62
  tableRef: measureElementRef,
@@ -83,12 +87,13 @@ function useTableColumnSizingState(tableState, params) {
83
87
  ...getKeyboardResizingProps(columnId, (col === null || col === void 0 ? void 0 : col.width) || 0)
84
88
  });
85
89
  return col ? {
86
- style: getColumnStyles(col),
90
+ style: getColumnStyles(col, dragging),
87
91
  aside
88
92
  } : {};
89
93
  }, [
90
94
  getColumnById,
91
95
  columns,
96
+ dragging,
92
97
  getKeyboardResizingProps,
93
98
  getOnMouseDown
94
99
  ]),
package/lib/hooks/useTableColumnSizing.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["useTableColumnSizing.tsx"],"sourcesContent":["import * as React from 'react';\nimport { TableResizeHandle } from '../TableResizeHandle';\nimport {\n ColumnWidthState,\n EnableKeyboardModeOnChangeCallback,\n TableColumnId,\n TableColumnSizingState,\n TableFeaturesState,\n UseTableColumnSizingParams,\n} from './types';\n\nimport { useMeasureElement } from './useMeasureElement';\nimport { useTableColumnResizeMouseHandler } from './useTableColumnResizeMouseHandler';\nimport { useTableColumnResizeState } from './useTableColumnResizeState';\nimport { useKeyboardResizing } from './useKeyboardResizing';\n\nexport const defaultColumnSizingState: TableColumnSizingState = {\n getColumnWidths: () => [],\n getOnMouseDown: () => () => null,\n setColumnWidth: () => null,\n getTableProps: () => ({}),\n getTableHeaderCellProps: () => ({ style: {}, columnId: '' }),\n getTableCellProps: () => ({ style: {}, columnId: '' }),\n enableKeyboardMode: () => () => null,\n};\n\nexport function useTableColumnSizing_unstable<TItem>(params?: UseTableColumnSizingParams) {\n // False positive, these plugin hooks are intended to be run on every render\n // eslint-disable-next-line react-hooks/rules-of-hooks\n return (tableState: TableFeaturesState<TItem>) => useTableColumnSizingState(tableState, params);\n}\n\nfunction getColumnStyles(column: ColumnWidthState): React.CSSProperties {\n const width = column.width;\n\n return {\n // native styles\n width,\n // non-native element styles (flex layout)\n minWidth: width,\n maxWidth: width,\n };\n}\n\nfunction useTableColumnSizingState<TItem>(\n tableState: TableFeaturesState<TItem>,\n params?: UseTableColumnSizingParams,\n): TableFeaturesState<TItem> {\n const { columns } = tableState;\n\n // Gets the container width\n const { width, measureElementRef } = useMeasureElement();\n // Creates the state based on columns and available containerWidth\n const columnResizeState = useTableColumnResizeState(columns, width + (params?.containerWidthOffset || 0), params);\n // Creates the mouse handler and attaches the state to it\n const mouseHandler = useTableColumnResizeMouseHandler(columnResizeState);\n // Creates the keyboard handler for resizing columns\n const { toggleInteractiveMode, getKeyboardResizingProps } = useKeyboardResizing(columnResizeState);\n\n const enableKeyboardMode = React.useCallback(\n (columnId: TableColumnId, onChange?: EnableKeyboardModeOnChangeCallback) =>\n (e: React.MouseEvent | React.TouchEvent) => {\n e.preventDefault();\n e.nativeEvent.stopPropagation();\n toggleInteractiveMode(columnId, onChange);\n },\n [toggleInteractiveMode],\n );\n\n 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: TableColumnId, w: number) => setColumnWidth(undefined, { columnId, width: w }),\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(\n (columnId: TableColumnId) => {\n const col = getColumnById(columnId);\n const isLastColumn = columns[columns.length - 1]?.columnId === columnId;\n\n const aside = isLastColumn ? null : (\n <TableResizeHandle\n onMouseDown={getOnMouseDown(columnId)}\n onTouchStart={getOnMouseDown(columnId)}\n {...getKeyboardResizingProps(columnId, col?.width || 0)}\n />\n );\n\n return col\n ? {\n style: getColumnStyles(col),\n aside,\n }\n : {};\n },\n [getColumnById, columns, getKeyboardResizingProps, getOnMouseDown],\n ),\n getTableCellProps: React.useCallback(\n (columnId: TableColumnId) => {\n const col = getColumnById(columnId);\n return col ? { style: getColumnStyles(col) } : {};\n },\n [getColumnById],\n ),\n enableKeyboardMode,\n },\n };\n}\n"],"names":["React","TableResizeHandle","useMeasureElement","useTableColumnResizeMouseHandler","useTableColumnResizeState","useKeyboardResizing","defaultColumnSizingState","getColumnWidths","getOnMouseDown","setColumnWidth","getTableProps","getTableHeaderCellProps","style","columnId","getTableCellProps","enableKeyboardMode","useTableColumnSizing_unstable","params","tableState","useTableColumnSizingState","getColumnStyles","column","width","minWidth","maxWidth","columns","measureElementRef","columnResizeState","containerWidthOffset","mouseHandler","toggleInteractiveMode","getKeyboardResizingProps","useCallback","onChange","e","preventDefault","nativeEvent","stopPropagation","getColumnById","getColumns","tableRef","columnSizing_unstable","w","undefined","props","col","isLastColumn","length","aside","onMouseDown","onTouchStart"],"mappings":"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"}
1
+ {"version":3,"sources":["useTableColumnSizing.tsx"],"sourcesContent":["import * as React from 'react';\nimport { TableResizeHandle } from '../TableResizeHandle';\nimport {\n ColumnWidthState,\n EnableKeyboardModeOnChangeCallback,\n TableColumnId,\n TableColumnSizingState,\n TableFeaturesState,\n UseTableColumnSizingParams,\n} from './types';\n\nimport { useMeasureElement } from './useMeasureElement';\nimport { useTableColumnResizeMouseHandler } from './useTableColumnResizeMouseHandler';\nimport { useTableColumnResizeState } from './useTableColumnResizeState';\nimport { useKeyboardResizing } from './useKeyboardResizing';\n\nexport const defaultColumnSizingState: TableColumnSizingState = {\n getColumnWidths: () => [],\n getOnMouseDown: () => () => null,\n setColumnWidth: () => null,\n getTableProps: () => ({}),\n getTableHeaderCellProps: () => ({ style: {}, columnId: '' }),\n getTableCellProps: () => ({ style: {}, columnId: '' }),\n enableKeyboardMode: () => () => null,\n};\n\nexport function useTableColumnSizing_unstable<TItem>(params?: UseTableColumnSizingParams) {\n // False positive, these plugin hooks are intended to be run on every render\n // eslint-disable-next-line react-hooks/rules-of-hooks\n return (tableState: TableFeaturesState<TItem>) => useTableColumnSizingState(tableState, params);\n}\n\nfunction getColumnStyles(column: ColumnWidthState, dragging?: boolean): React.CSSProperties {\n const width = column.width;\n\n return {\n // native styles\n width,\n // non-native element styles (flex layout)\n minWidth: width,\n maxWidth: width,\n // Fixed the unwanted sort: https://github.com/microsoft/fluentui/issues/27803\n ...(dragging ? { pointerEvents: 'none' } : {}),\n };\n}\n\nfunction useTableColumnSizingState<TItem>(\n tableState: TableFeaturesState<TItem>,\n params?: UseTableColumnSizingParams,\n): TableFeaturesState<TItem> {\n const { columns } = tableState;\n\n // Gets the container width\n const { width, measureElementRef } = useMeasureElement();\n // Creates the state based on columns and available containerWidth\n const columnResizeState = useTableColumnResizeState(columns, width + (params?.containerWidthOffset || 0), params);\n // Creates the mouse handler and attaches the state to it\n const mouseHandler = useTableColumnResizeMouseHandler(columnResizeState);\n // Creates the keyboard handler for resizing columns\n const { toggleInteractiveMode, getKeyboardResizingProps } = useKeyboardResizing(columnResizeState);\n\n const enableKeyboardMode = React.useCallback(\n (columnId: TableColumnId, onChange?: EnableKeyboardModeOnChangeCallback) =>\n (e: React.MouseEvent | React.TouchEvent) => {\n e.preventDefault();\n e.nativeEvent.stopPropagation();\n toggleInteractiveMode(columnId, onChange);\n },\n [toggleInteractiveMode],\n );\n\n const { getColumnById, setColumnWidth, getColumns } = columnResizeState;\n const { getOnMouseDown, dragging } = 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: TableColumnId, w: number) => setColumnWidth(undefined, { columnId, width: w }),\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(\n (columnId: TableColumnId) => {\n const col = getColumnById(columnId);\n const isLastColumn = columns[columns.length - 1]?.columnId === columnId;\n\n const aside = isLastColumn ? null : (\n <TableResizeHandle\n onMouseDown={getOnMouseDown(columnId)}\n onTouchStart={getOnMouseDown(columnId)}\n {...getKeyboardResizingProps(columnId, col?.width || 0)}\n />\n );\n\n return col\n ? {\n style: getColumnStyles(col, dragging),\n aside,\n }\n : {};\n },\n [getColumnById, columns, dragging, getKeyboardResizingProps, getOnMouseDown],\n ),\n getTableCellProps: React.useCallback(\n (columnId: TableColumnId) => {\n const col = getColumnById(columnId);\n return col ? { style: getColumnStyles(col) } : {};\n },\n [getColumnById],\n ),\n enableKeyboardMode,\n },\n };\n}\n"],"names":["React","TableResizeHandle","useMeasureElement","useTableColumnResizeMouseHandler","useTableColumnResizeState","useKeyboardResizing","defaultColumnSizingState","getColumnWidths","getOnMouseDown","setColumnWidth","getTableProps","getTableHeaderCellProps","style","columnId","getTableCellProps","enableKeyboardMode","useTableColumnSizing_unstable","params","tableState","useTableColumnSizingState","getColumnStyles","column","dragging","width","minWidth","maxWidth","pointerEvents","columns","measureElementRef","columnResizeState","containerWidthOffset","mouseHandler","toggleInteractiveMode","getKeyboardResizingProps","useCallback","onChange","e","preventDefault","nativeEvent","stopPropagation","getColumnById","getColumns","tableRef","columnSizing_unstable","w","undefined","props","col","isLastColumn","length","aside","onMouseDown","onTouchStart"],"mappings":"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"}
package/lib-commonjs/hooks/useMeasureElement.js CHANGED
@@ -22,6 +22,7 @@ const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
22
22
  function useMeasureElement() {
23
23
  const [width, setWidth] = _react.useState(0);
24
24
  const container = _react.useRef(undefined);
25
+ const resizeObserverRef = _react.useRef(null);
25
26
  const { targetDocument } = (0, _reactsharedcontexts.useFluent_unstable)();
26
27
  // the handler for resize observer
27
28
  const handleResize = _react.useCallback(()=>{
@@ -29,31 +30,38 @@ function useMeasureElement() {
29
30
  const containerWidth = (_container_current = container.current) === null || _container_current === void 0 ? void 0 : _container_current.getBoundingClientRect().width;
30
31
  setWidth(containerWidth || 0);
31
32
  }, []);
32
- // Keep the reference of ResizeObserver in the state, as it should live through renders
33
- const [resizeObserver] = _react.useState(()=>createResizeObserverFromDocument(targetDocument, handleResize));
34
33
  const measureElementRef = _react.useCallback((el)=>{
35
- if (!targetDocument || !resizeObserver) {
34
+ if (!targetDocument) {
36
35
  return;
37
36
  }
38
- // cleanup previous container
39
- if (container.current) {
40
- resizeObserver.unobserve(container.current);
37
+ // if the element is removed, stop observing it
38
+ if (!el && resizeObserverRef.current && container.current) {
39
+ resizeObserverRef.current.unobserve(container.current);
41
40
  }
42
41
  container.current = undefined;
43
42
  if (el === null || el === void 0 ? void 0 : el.parentElement) {
43
+ var _resizeObserverRef_current;
44
44
  container.current = el.parentElement;
45
- resizeObserver.observe(container.current);
46
45
  handleResize();
46
+ (_resizeObserverRef_current = resizeObserverRef.current) === null || _resizeObserverRef_current === void 0 ? void 0 : _resizeObserverRef_current.observe(container.current);
47
47
  }
48
48
  }, [
49
49
  targetDocument,
50
- resizeObserver,
51
50
  handleResize
52
51
  ]);
53
52
  _react.useEffect(()=>{
54
- return ()=>resizeObserver === null || resizeObserver === void 0 ? void 0 : resizeObserver.disconnect();
53
+ resizeObserverRef.current = createResizeObserverFromDocument(targetDocument, handleResize);
54
+ if (!container.current || !resizeObserverRef.current) {
55
+ return;
56
+ }
57
+ resizeObserverRef.current.observe(container.current);
58
+ return ()=>{
59
+ var _resizeObserverRef_current;
60
+ (_resizeObserverRef_current = resizeObserverRef.current) === null || _resizeObserverRef_current === void 0 ? void 0 : _resizeObserverRef_current.disconnect();
61
+ };
55
62
  }, [
56
- resizeObserver
63
+ handleResize,
64
+ targetDocument
57
65
  ]);
58
66
  return {
59
67
  width,
package/lib-commonjs/hooks/useMeasureElement.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["useMeasureElement.js"],"sourcesContent":["import * as React from 'react';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\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 */ export function useMeasureElement() {\n const [width, setWidth] = React.useState(0);\n const container = React.useRef(undefined);\n const { targetDocument } = useFluent();\n // the handler for resize observer\n const handleResize = React.useCallback(()=>{\n var _container_current;\n const containerWidth = (_container_current = container.current) === null || _container_current === void 0 ? void 0 : _container_current.getBoundingClientRect().width;\n setWidth(containerWidth || 0);\n }, []);\n // Keep the reference of ResizeObserver in the state, as it should live through renders\n const [resizeObserver] = React.useState(()=>createResizeObserverFromDocument(targetDocument, handleResize));\n const measureElementRef = React.useCallback((el)=>{\n if (!targetDocument || !resizeObserver) {\n return;\n }\n // cleanup previous container\n if (container.current) {\n resizeObserver.unobserve(container.current);\n }\n container.current = undefined;\n if (el === null || el === void 0 ? void 0 : el.parentElement) {\n container.current = el.parentElement;\n resizeObserver.observe(container.current);\n handleResize();\n }\n }, [\n targetDocument,\n resizeObserver,\n handleResize\n ]);\n React.useEffect(()=>{\n return ()=>resizeObserver === null || resizeObserver === void 0 ? void 0 : resizeObserver.disconnect();\n }, [\n resizeObserver\n ]);\n return {\n width,\n measureElementRef\n };\n}\n/**\n * FIXME - TS 3.8/3.9 don't have ResizeObserver types by default, move this to a shared utility once we bump the minbar\n * A utility method that creates a ResizeObserver from a target document\n * @param targetDocument - document to use to create the ResizeObserver\n * @param callback - https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver/ResizeObserver#callback\n * @returns a ResizeObserver instance or null if the global does not exist on the document\n */ export function createResizeObserverFromDocument(targetDocument, callback) {\n var _targetDocument_defaultView;\n if (!(targetDocument === null || targetDocument === void 0 ? void 0 : (_targetDocument_defaultView = targetDocument.defaultView) === null || _targetDocument_defaultView === void 0 ? void 0 : _targetDocument_defaultView.ResizeObserver)) {\n return null;\n }\n return new targetDocument.defaultView.ResizeObserver(callback);\n}\n"],"names":["useMeasureElement","createResizeObserverFromDocument","width","setWidth","React","useState","container","useRef","undefined","targetDocument","useFluent","handleResize","useCallback","_container_current","containerWidth","current","getBoundingClientRect","resizeObserver","measureElementRef","el","unobserve","parentElement","observe","useEffect","disconnect","callback","_targetDocument_defaultView","defaultView","ResizeObserver"],"mappings":";;;;;;;;;;;IAOoBA,iBAAiB;eAAjBA;;IA+CAC,gCAAgC;eAAhCA;;;;iEAtDG;qCACyB;AAMrC,SAASD;IAChB,MAAM,CAACE,OAAOC,SAAS,GAAGC,OAAMC,QAAQ,CAAC;IACzC,MAAMC,YAAYF,OAAMG,MAAM,CAACC;IAC/B,MAAM,EAAEC,cAAc,EAAE,GAAGC,IAAAA,uCAAS;IACpC,kCAAkC;IAClC,MAAMC,eAAeP,OAAMQ,WAAW,CAAC;QACnC,IAAIC;QACJ,MAAMC,iBAAiB,AAACD,CAAAA,qBAAqBP,UAAUS,OAAO,AAAD,MAAO,QAAQF,uBAAuB,KAAK,IAAI,KAAK,IAAIA,mBAAmBG,qBAAqB,GAAGd,KAAK;QACrKC,SAASW,kBAAkB;IAC/B,GAAG,EAAE;IACL,uFAAuF;IACvF,MAAM,CAACG,eAAe,GAAGb,OAAMC,QAAQ,CAAC,IAAIJ,iCAAiCQ,gBAAgBE;IAC7F,MAAMO,oBAAoBd,OAAMQ,WAAW,CAAC,CAACO;QACzC,IAAI,CAACV,kBAAkB,CAACQ,gBAAgB;YACpC;QACJ;QACA,6BAA6B;QAC7B,IAAIX,UAAUS,OAAO,EAAE;YACnBE,eAAeG,SAAS,CAACd,UAAUS,OAAO;QAC9C;QACAT,UAAUS,OAAO,GAAGP;QACpB,IAAIW,OAAO,QAAQA,OAAO,KAAK,IAAI,KAAK,IAAIA,GAAGE,aAAa,EAAE;YAC1Df,UAAUS,OAAO,GAAGI,GAAGE,aAAa;YACpCJ,eAAeK,OAAO,CAAChB,UAAUS,OAAO;YACxCJ;QACJ;IACJ,GAAG;QACCF;QACAQ;QACAN;KACH;IACDP,OAAMmB,SAAS,CAAC;QACZ,OAAO,IAAIN,mBAAmB,QAAQA,mBAAmB,KAAK,IAAI,KAAK,IAAIA,eAAeO,UAAU;IACxG,GAAG;QACCP;KACH;IACD,OAAO;QACHf;QACAgB;IACJ;AACJ;AAOW,SAASjB,iCAAiCQ,cAAc,EAAEgB,QAAQ;IACzE,IAAIC;IACJ,IAAI,CAAEjB,CAAAA,mBAAmB,QAAQA,mBAAmB,KAAK,IAAI,KAAK,IAAI,AAACiB,CAAAA,8BAA8BjB,eAAekB,WAAW,AAAD,MAAO,QAAQD,gCAAgC,KAAK,IAAI,KAAK,IAAIA,4BAA4BE,cAAc,AAAD,GAAI;QACxO,OAAO;IACX;IACA,OAAO,IAAInB,eAAekB,WAAW,CAACC,cAAc,CAACH;AACzD"}
1
+ {"version":3,"sources":["useMeasureElement.js"],"sourcesContent":["import * as React from 'react';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\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 */ export function useMeasureElement() {\n const [width, setWidth] = React.useState(0);\n const container = React.useRef(undefined);\n const resizeObserverRef = React.useRef(null);\n const { targetDocument } = useFluent();\n // the handler for resize observer\n const handleResize = React.useCallback(()=>{\n var _container_current;\n const containerWidth = (_container_current = container.current) === null || _container_current === void 0 ? void 0 : _container_current.getBoundingClientRect().width;\n setWidth(containerWidth || 0);\n }, []);\n const measureElementRef = React.useCallback((el)=>{\n if (!targetDocument) {\n return;\n }\n // if the element is removed, stop observing it\n if (!el && resizeObserverRef.current && container.current) {\n resizeObserverRef.current.unobserve(container.current);\n }\n container.current = undefined;\n if (el === null || el === void 0 ? void 0 : el.parentElement) {\n var _resizeObserverRef_current;\n container.current = el.parentElement;\n handleResize();\n (_resizeObserverRef_current = resizeObserverRef.current) === null || _resizeObserverRef_current === void 0 ? void 0 : _resizeObserverRef_current.observe(container.current);\n }\n }, [\n targetDocument,\n handleResize\n ]);\n React.useEffect(()=>{\n resizeObserverRef.current = createResizeObserverFromDocument(targetDocument, handleResize);\n if (!container.current || !resizeObserverRef.current) {\n return;\n }\n resizeObserverRef.current.observe(container.current);\n return ()=>{\n var _resizeObserverRef_current;\n (_resizeObserverRef_current = resizeObserverRef.current) === null || _resizeObserverRef_current === void 0 ? void 0 : _resizeObserverRef_current.disconnect();\n };\n }, [\n handleResize,\n targetDocument\n ]);\n return {\n width,\n measureElementRef\n };\n}\n/**\n * FIXME - TS 3.8/3.9 don't have ResizeObserver types by default, move this to a shared utility once we bump the minbar\n * A utility method that creates a ResizeObserver from a target document\n * @param targetDocument - document to use to create the ResizeObserver\n * @param callback - https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver/ResizeObserver#callback\n * @returns a ResizeObserver instance or null if the global does not exist on the document\n */ export function createResizeObserverFromDocument(targetDocument, callback) {\n var _targetDocument_defaultView;\n if (!(targetDocument === null || targetDocument === void 0 ? void 0 : (_targetDocument_defaultView = targetDocument.defaultView) === null || _targetDocument_defaultView === void 0 ? void 0 : _targetDocument_defaultView.ResizeObserver)) {\n return null;\n }\n return new targetDocument.defaultView.ResizeObserver(callback);\n}\n"],"names":["useMeasureElement","createResizeObserverFromDocument","width","setWidth","React","useState","container","useRef","undefined","resizeObserverRef","targetDocument","useFluent","handleResize","useCallback","_container_current","containerWidth","current","getBoundingClientRect","measureElementRef","el","unobserve","parentElement","_resizeObserverRef_current","observe","useEffect","disconnect","callback","_targetDocument_defaultView","defaultView","ResizeObserver"],"mappings":";;;;;;;;;;;IAOoBA,iBAAiB;eAAjBA;;IAuDAC,gCAAgC;eAAhCA;;;;iEA9DG;qCACyB;AAMrC,SAASD;IAChB,MAAM,CAACE,OAAOC,SAAS,GAAGC,OAAMC,QAAQ,CAAC;IACzC,MAAMC,YAAYF,OAAMG,MAAM,CAACC;IAC/B,MAAMC,oBAAoBL,OAAMG,MAAM,CAAC;IACvC,MAAM,EAAEG,cAAc,EAAE,GAAGC,IAAAA,uCAAS;IACpC,kCAAkC;IAClC,MAAMC,eAAeR,OAAMS,WAAW,CAAC;QACnC,IAAIC;QACJ,MAAMC,iBAAiB,AAACD,CAAAA,qBAAqBR,UAAUU,OAAO,AAAD,MAAO,QAAQF,uBAAuB,KAAK,IAAI,KAAK,IAAIA,mBAAmBG,qBAAqB,GAAGf,KAAK;QACrKC,SAASY,kBAAkB;IAC/B,GAAG,EAAE;IACL,MAAMG,oBAAoBd,OAAMS,WAAW,CAAC,CAACM;QACzC,IAAI,CAACT,gBAAgB;YACjB;QACJ;QACA,+CAA+C;QAC/C,IAAI,CAACS,MAAMV,kBAAkBO,OAAO,IAAIV,UAAUU,OAAO,EAAE;YACvDP,kBAAkBO,OAAO,CAACI,SAAS,CAACd,UAAUU,OAAO;QACzD;QACAV,UAAUU,OAAO,GAAGR;QACpB,IAAIW,OAAO,QAAQA,OAAO,KAAK,IAAI,KAAK,IAAIA,GAAGE,aAAa,EAAE;YAC1D,IAAIC;YACJhB,UAAUU,OAAO,GAAGG,GAAGE,aAAa;YACpCT;YACCU,CAAAA,6BAA6Bb,kBAAkBO,OAAO,AAAD,MAAO,QAAQM,+BAA+B,KAAK,IAAI,KAAK,IAAIA,2BAA2BC,OAAO,CAACjB,UAAUU,OAAO;QAC9K;IACJ,GAAG;QACCN;QACAE;KACH;IACDR,OAAMoB,SAAS,CAAC;QACZf,kBAAkBO,OAAO,GAAGf,iCAAiCS,gBAAgBE;QAC7E,IAAI,CAACN,UAAUU,OAAO,IAAI,CAACP,kBAAkBO,OAAO,EAAE;YAClD;QACJ;QACAP,kBAAkBO,OAAO,CAACO,OAAO,CAACjB,UAAUU,OAAO;QACnD,OAAO;YACH,IAAIM;YACHA,CAAAA,6BAA6Bb,kBAAkBO,OAAO,AAAD,MAAO,QAAQM,+BAA+B,KAAK,IAAI,KAAK,IAAIA,2BAA2BG,UAAU;QAC/J;IACJ,GAAG;QACCb;QACAF;KACH;IACD,OAAO;QACHR;QACAgB;IACJ;AACJ;AAOW,SAASjB,iCAAiCS,cAAc,EAAEgB,QAAQ;IACzE,IAAIC;IACJ,IAAI,CAAEjB,CAAAA,mBAAmB,QAAQA,mBAAmB,KAAK,IAAI,KAAK,IAAI,AAACiB,CAAAA,8BAA8BjB,eAAekB,WAAW,AAAD,MAAO,QAAQD,gCAAgC,KAAK,IAAI,KAAK,IAAIA,4BAA4BE,cAAc,AAAD,GAAI;QACxO,OAAO;IACX;IACA,OAAO,IAAInB,eAAekB,WAAW,CAACC,cAAc,CAACH;AACzD"}
package/lib-commonjs/hooks/useTableColumnResizeMouseHandler.js CHANGED
@@ -16,6 +16,7 @@ function useTableColumnResizeMouseHandler(columnResizeState) {
16
16
  const mouseX = _react.useRef(0);
17
17
  const currentWidth = _react.useRef(0);
18
18
  const colId = _react.useRef(undefined);
19
+ const [dragging, setDragging] = _react.useState(false);
19
20
  const { targetDocument } = (0, _reactsharedcontexts.useFluent_unstable)();
20
21
  const globalWin = targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.defaultView;
21
22
  const { getColumnWidth, setColumnWidth } = columnResizeState;
@@ -52,6 +53,7 @@ function useTableColumnResizeMouseHandler(columnResizeState) {
52
53
  targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.removeEventListener('touchend', onDragEnd);
53
54
  targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.removeEventListener('touchmove', onDrag);
54
55
  }
56
+ setDragging(false);
55
57
  }, [
56
58
  onDrag,
57
59
  targetDocument
@@ -69,10 +71,12 @@ function useTableColumnResizeMouseHandler(columnResizeState) {
69
71
  }
70
72
  targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.addEventListener('mouseup', onDragEnd);
71
73
  targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.addEventListener('mousemove', onDrag);
74
+ setDragging(true);
72
75
  }
73
76
  if ((0, _reactutilities.isTouchEvent)(event)) {
74
77
  targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.addEventListener('touchend', onDragEnd);
75
78
  targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.addEventListener('touchmove', onDrag);
79
+ setDragging(true);
76
80
  }
77
81
  }, [
78
82
  getColumnWidth,
@@ -81,6 +85,7 @@ function useTableColumnResizeMouseHandler(columnResizeState) {
81
85
  targetDocument
82
86
  ]);
83
87
  return {
84
- getOnMouseDown
88
+ getOnMouseDown,
89
+ dragging
85
90
  };
86
91
  }
package/lib-commonjs/hooks/useTableColumnResizeMouseHandler.js.map CHANGED
@@ -1 +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 { 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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"}
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 [dragging, setDragging] = React.useState(false);\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 setDragging(false);\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 setDragging(true);\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 setDragging(true);\n }\n }, [\n getColumnWidth,\n onDrag,\n onDragEnd,\n targetDocument\n ]);\n return {\n getOnMouseDown,\n dragging\n };\n}\n"],"names":["useTableColumnResizeMouseHandler","columnResizeState","mouseX","React","useRef","currentWidth","colId","undefined","dragging","setDragging","useState","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/useTableColumnSizing.js CHANGED
@@ -43,14 +43,18 @@ function useTableColumnSizing_unstable(params) {
43
43
  // eslint-disable-next-line react-hooks/rules-of-hooks
44
44
  return (tableState)=>useTableColumnSizingState(tableState, params);
45
45
  }
46
- function getColumnStyles(column) {
46
+ function getColumnStyles(column, dragging) {
47
47
  const width = column.width;
48
48
  return {
49
49
  // native styles
50
50
  width,
51
51
  // non-native element styles (flex layout)
52
52
  minWidth: width,
53
- maxWidth: width
53
+ maxWidth: width,
54
+ // Fixed the unwanted sort: https://github.com/microsoft/fluentui/issues/27803
55
+ ...dragging ? {
56
+ pointerEvents: 'none'
57
+ } : {}
54
58
  };
55
59
  }
56
60
  function useTableColumnSizingState(tableState, params) {
@@ -71,7 +75,7 @@ function useTableColumnSizingState(tableState, params) {
71
75
  toggleInteractiveMode
72
76
  ]);
73
77
  const { getColumnById, setColumnWidth, getColumns } = columnResizeState;
74
- const { getOnMouseDown } = mouseHandler;
78
+ const { getOnMouseDown, dragging } = mouseHandler;
75
79
  return {
76
80
  ...tableState,
77
81
  tableRef: measureElementRef,
@@ -102,12 +106,13 @@ function useTableColumnSizingState(tableState, params) {
102
106
  ...getKeyboardResizingProps(columnId, (col === null || col === void 0 ? void 0 : col.width) || 0)
103
107
  });
104
108
  return col ? {
105
- style: getColumnStyles(col),
109
+ style: getColumnStyles(col, dragging),
106
110
  aside
107
111
  } : {};
108
112
  }, [
109
113
  getColumnById,
110
114
  columns,
115
+ dragging,
111
116
  getKeyboardResizingProps,
112
117
  getOnMouseDown
113
118
  ]),
package/lib-commonjs/hooks/useTableColumnSizing.js.map CHANGED
@@ -1 +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 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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"}
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, dragging) {\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 // Fixed the unwanted sort: https://github.com/microsoft/fluentui/issues/27803\n ...dragging ? {\n pointerEvents: 'none'\n } : {}\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, dragging } = 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, dragging),\n aside\n } : {};\n }, [\n getColumnById,\n columns,\n dragging,\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","dragging","width","minWidth","maxWidth","pointerEvents","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/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fluentui/react-table",
3
- "version": "9.11.15",
3
+ "version": "9.12.1",
4
4
  "description": "React components for building web experiences",
5
5
  "main": "lib-commonjs/index.js",
6
6
  "module": "lib/index.js",
@@ -36,17 +36,17 @@
36
36
  },
37
37
  "dependencies": {
38
38
  "@fluentui/keyboard-keys": "^9.0.7",
39
- "@fluentui/react-aria": "^9.10.2",
40
- "@fluentui/react-avatar": "^9.6.19",
41
- "@fluentui/react-checkbox": "^9.2.17",
42
- "@fluentui/react-context-selector": "^9.1.56",
39
+ "@fluentui/react-aria": "^9.10.3",
40
+ "@fluentui/react-avatar": "^9.6.20",
41
+ "@fluentui/react-checkbox": "^9.2.19",
42
+ "@fluentui/react-context-selector": "^9.1.57",
43
43
  "@fluentui/react-icons": "^2.0.224",
44
- "@fluentui/react-radio": "^9.2.12",
45
- "@fluentui/react-shared-contexts": "^9.15.2",
46
- "@fluentui/react-tabster": "^9.19.5",
44
+ "@fluentui/react-radio": "^9.2.14",
45
+ "@fluentui/react-shared-contexts": "^9.16.0",
46
+ "@fluentui/react-tabster": "^9.19.6",
47
47
  "@fluentui/react-theme": "^9.1.19",
48
- "@fluentui/react-utilities": "^9.18.5",
49
- "@fluentui/react-jsx-runtime": "^9.0.34",
48
+ "@fluentui/react-utilities": "^9.18.6",
49
+ "@fluentui/react-jsx-runtime": "^9.0.35",
50
50
  "@griffel/react": "^1.5.14",
51
51
  "@swc/helpers": "^0.5.1"
52
52
  },