@fluentui/react-virtualizer 9.0.0-alpha.69 → 9.0.0-alpha.70

package/lib-commonjs/hooks/useStaticPagination.js

@@ -0,0 +1,107 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "useStaticVirtualizerPagination", {
+    enumerable: true,
+    get: function() {
+        return useStaticVirtualizerPagination;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const useStaticVirtualizerPagination = (virtualizerProps, paginationEnabled = true)=>{
+    const { itemSize, axis = 'vertical' } = virtualizerProps;
+    const timeoutRef = (0, _react.useRef)(null);
+    const lastScrollPos = (0, _react.useRef)(0);
+    const lastIndexScrolled = (0, _react.useRef)(0);
+    const scrollContainer = _react.useRef(null);
+    const clearListeners = ()=>{
+        if (scrollContainer.current) {
+            scrollContainer.current.removeEventListener('scroll', onScroll);
+            scrollContainer.current = null;
+            if (timeoutRef.current) {
+                clearTimeout(timeoutRef.current);
+            }
+        }
+    };
+    _react.useEffect(()=>{
+        return ()=>{
+            clearListeners();
+        };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    /**
+   * Handle scroll stop event and paginate to the closest item
+   * If the closest item is the same as the previous scroll end
+   * we paginate to the next/previous one based on direction
+   */ const onScrollEnd = _react.useCallback(()=>{
+        if (!scrollContainer.current || !paginationEnabled) {
+            // No container found
+            return;
+        }
+        const currentScrollPos = Math.round(axis === 'vertical' ? scrollContainer.current.scrollTop : scrollContainer.current.scrollLeft);
+        const closestItem = Math.round(currentScrollPos / itemSize);
+        let nextItem = 0;
+        if (Math.round(closestItem - lastIndexScrolled.current) === 0) {
+            // Special case for go to next/previous with minimum amount of scroll needed
+            const nextTarget = lastScrollPos.current < currentScrollPos ? 1 : -1;
+            const isSecondaryScroll = lastScrollPos.current === currentScrollPos;
+            const posMod = isSecondaryScroll ? 0 : nextTarget;
+            nextItem = closestItem + posMod;
+        } else {
+            // Pagination for anything else can just jump to the closest!
+            nextItem = closestItem;
+        }
+        const nextItemPos = nextItem * itemSize;
+        if (axis === 'vertical') {
+            scrollContainer.current.scrollTo({
+                top: nextItemPos,
+                behavior: 'smooth'
+            });
+        } else {
+            scrollContainer.current.scrollTo({
+                left: nextItemPos,
+                behavior: 'smooth'
+            });
+        }
+        lastScrollPos.current = nextItemPos;
+        lastIndexScrolled.current = nextItem;
+    }, [
+        paginationEnabled,
+        axis,
+        itemSize
+    ]);
+    /**
+   * On scroll timer that will continuously delay callback until scrolling stops
+   */ const onScroll = _react.useCallback((event)=>{
+        if (timeoutRef.current) {
+            clearTimeout(timeoutRef.current);
+        }
+        timeoutRef.current = setTimeout(onScrollEnd, 100);
+    }, [
+        onScrollEnd
+    ]);
+    /**
+   * Pagination ref will ensure we attach listeners to containers on change
+   * It is returned from hook and merged into the scroll container externally
+   */ const paginationRef = _react.useCallback((instance)=>{
+        if (!paginationEnabled) {
+            clearListeners();
+            scrollContainer.current = null;
+            return;
+        }
+        if (scrollContainer.current !== instance) {
+            clearListeners();
+            scrollContainer.current = instance;
+            if (scrollContainer.current) {
+                scrollContainer.current.addEventListener('scroll', onScroll);
+            }
+        }
+    }, [
+        onScroll,
+        onScrollEnd,
+        paginationEnabled
+    ]);
+    return paginationRef;
+};

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

@@ -0,0 +1 @@
+{"version":3,"sources":["useStaticPagination.js"],"sourcesContent":["import * as React from 'react';\nimport { useRef } from 'react';\n/**\n * Optional hook that will enable pagination on the virtualizer so that it 'autoscrolls' to an items exact position\n * Sizes are uniform/static, we round to the nearest item on long scrolls\n * On short scrolls, we will go at minimum to the next/previous item so that arrow pagination works\n * All VirtualizerStaticPaginationProps can be grabbed from Virtualizer hooks externally and passed in\n */ export const useStaticVirtualizerPagination = (virtualizerProps, paginationEnabled = true)=>{\n    const { itemSize, axis = 'vertical' } = virtualizerProps;\n    const timeoutRef = useRef(null);\n    const lastScrollPos = useRef(0);\n    const lastIndexScrolled = useRef(0);\n    const scrollContainer = React.useRef(null);\n    const clearListeners = ()=>{\n        if (scrollContainer.current) {\n            scrollContainer.current.removeEventListener('scroll', onScroll);\n            scrollContainer.current = null;\n            if (timeoutRef.current) {\n                clearTimeout(timeoutRef.current);\n            }\n        }\n    };\n    React.useEffect(()=>{\n        return ()=>{\n            clearListeners();\n        };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, []);\n    /**\n   * Handle scroll stop event and paginate to the closest item\n   * If the closest item is the same as the previous scroll end\n   * we paginate to the next/previous one based on direction\n   */ const onScrollEnd = React.useCallback(()=>{\n        if (!scrollContainer.current || !paginationEnabled) {\n            // No container found\n            return;\n        }\n        const currentScrollPos = Math.round(axis === 'vertical' ? scrollContainer.current.scrollTop : scrollContainer.current.scrollLeft);\n        const closestItem = Math.round(currentScrollPos / itemSize);\n        let nextItem = 0;\n        if (Math.round(closestItem - lastIndexScrolled.current) === 0) {\n            // Special case for go to next/previous with minimum amount of scroll needed\n            const nextTarget = lastScrollPos.current < currentScrollPos ? 1 : -1;\n            const isSecondaryScroll = lastScrollPos.current === currentScrollPos;\n            const posMod = isSecondaryScroll ? 0 : nextTarget;\n            nextItem = closestItem + posMod;\n        } else {\n            // Pagination for anything else can just jump to the closest!\n            nextItem = closestItem;\n        }\n        const nextItemPos = nextItem * itemSize;\n        if (axis === 'vertical') {\n            scrollContainer.current.scrollTo({\n                top: nextItemPos,\n                behavior: 'smooth'\n            });\n        } else {\n            scrollContainer.current.scrollTo({\n                left: nextItemPos,\n                behavior: 'smooth'\n            });\n        }\n        lastScrollPos.current = nextItemPos;\n        lastIndexScrolled.current = nextItem;\n    }, [\n        paginationEnabled,\n        axis,\n        itemSize\n    ]);\n    /**\n   * On scroll timer that will continuously delay callback until scrolling stops\n   */ const onScroll = React.useCallback((event)=>{\n        if (timeoutRef.current) {\n            clearTimeout(timeoutRef.current);\n        }\n        timeoutRef.current = setTimeout(onScrollEnd, 100);\n    }, [\n        onScrollEnd\n    ]);\n    /**\n   * Pagination ref will ensure we attach listeners to containers on change\n   * It is returned from hook and merged into the scroll container externally\n   */ const paginationRef = React.useCallback((instance)=>{\n        if (!paginationEnabled) {\n            clearListeners();\n            scrollContainer.current = null;\n            return;\n        }\n        if (scrollContainer.current !== instance) {\n            clearListeners();\n            scrollContainer.current = instance;\n            if (scrollContainer.current) {\n                scrollContainer.current.addEventListener('scroll', onScroll);\n            }\n        }\n    }, // eslint-disable-next-line react-hooks/exhaustive-deps\n    [\n        onScroll,\n        onScrollEnd,\n        paginationEnabled\n    ]);\n    return paginationRef;\n};\n"],"names":["useStaticVirtualizerPagination","virtualizerProps","paginationEnabled","itemSize","axis","timeoutRef","useRef","lastScrollPos","lastIndexScrolled","scrollContainer","React","clearListeners","current","removeEventListener","onScroll","clearTimeout","useEffect","onScrollEnd","useCallback","currentScrollPos","Math","round","scrollTop","scrollLeft","closestItem","nextItem","nextTarget","isSecondaryScroll","posMod","nextItemPos","scrollTo","top","behavior","left","event","setTimeout","paginationRef","instance","addEventListener"],"mappings":";;;;+BAOiBA;;;eAAAA;;;;iEAPM;AAOZ,MAAMA,iCAAiC,CAACC,kBAAkBC,oBAAoB,IAAI;IACzF,MAAM,EAAEC,QAAQ,EAAEC,OAAO,UAAU,EAAE,GAAGH;IACxC,MAAMI,aAAaC,IAAAA,aAAM,EAAC;IAC1B,MAAMC,gBAAgBD,IAAAA,aAAM,EAAC;IAC7B,MAAME,oBAAoBF,IAAAA,aAAM,EAAC;IACjC,MAAMG,kBAAkBC,OAAMJ,MAAM,CAAC;IACrC,MAAMK,iBAAiB;QACnB,IAAIF,gBAAgBG,OAAO,EAAE;YACzBH,gBAAgBG,OAAO,CAACC,mBAAmB,CAAC,UAAUC;YACtDL,gBAAgBG,OAAO,GAAG;YAC1B,IAAIP,WAAWO,OAAO,EAAE;gBACpBG,aAAaV,WAAWO,OAAO;YACnC;QACJ;IACJ;IACAF,OAAMM,SAAS,CAAC;QACZ,OAAO;YACHL;QACJ;IACJ,uDAAuD;IACvD,GAAG,EAAE;IACL;;;;GAID,GAAG,MAAMM,cAAcP,OAAMQ,WAAW,CAAC;QACpC,IAAI,CAACT,gBAAgBG,OAAO,IAAI,CAACV,mBAAmB;YAChD,qBAAqB;YACrB;QACJ;QACA,MAAMiB,mBAAmBC,KAAKC,KAAK,CAACjB,SAAS,aAAaK,gBAAgBG,OAAO,CAACU,SAAS,GAAGb,gBAAgBG,OAAO,CAACW,UAAU;QAChI,MAAMC,cAAcJ,KAAKC,KAAK,CAACF,mBAAmBhB;QAClD,IAAIsB,WAAW;QACf,IAAIL,KAAKC,KAAK,CAACG,cAAchB,kBAAkBI,OAAO,MAAM,GAAG;YAC3D,4EAA4E;YAC5E,MAAMc,aAAanB,cAAcK,OAAO,GAAGO,mBAAmB,IAAI,CAAC;YACnE,MAAMQ,oBAAoBpB,cAAcK,OAAO,KAAKO;YACpD,MAAMS,SAASD,oBAAoB,IAAID;YACvCD,WAAWD,cAAcI;QAC7B,OAAO;YACH,6DAA6D;YAC7DH,WAAWD;QACf;QACA,MAAMK,cAAcJ,WAAWtB;QAC/B,IAAIC,SAAS,YAAY;YACrBK,gBAAgBG,OAAO,CAACkB,QAAQ,CAAC;gBAC7BC,KAAKF;gBACLG,UAAU;YACd;QACJ,OAAO;YACHvB,gBAAgBG,OAAO,CAACkB,QAAQ,CAAC;gBAC7BG,MAAMJ;gBACNG,UAAU;YACd;QACJ;QACAzB,cAAcK,OAAO,GAAGiB;QACxBrB,kBAAkBI,OAAO,GAAGa;IAChC,GAAG;QACCvB;QACAE;QACAD;KACH;IACD;;GAED,GAAG,MAAMW,WAAWJ,OAAMQ,WAAW,CAAC,CAACgB;QAClC,IAAI7B,WAAWO,OAAO,EAAE;YACpBG,aAAaV,WAAWO,OAAO;QACnC;QACAP,WAAWO,OAAO,GAAGuB,WAAWlB,aAAa;IACjD,GAAG;QACCA;KACH;IACD;;;GAGD,GAAG,MAAMmB,gBAAgB1B,OAAMQ,WAAW,CAAC,CAACmB;QACvC,IAAI,CAACnC,mBAAmB;YACpBS;YACAF,gBAAgBG,OAAO,GAAG;YAC1B;QACJ;QACA,IAAIH,gBAAgBG,OAAO,KAAKyB,UAAU;YACtC1B;YACAF,gBAAgBG,OAAO,GAAGyB;YAC1B,IAAI5B,gBAAgBG,OAAO,EAAE;gBACzBH,gBAAgBG,OAAO,CAAC0B,gBAAgB,CAAC,UAAUxB;YACvD;QACJ;IACJ,GACA;QACIA;QACAG;QACAf;KACH;IACD,OAAOkC;AACX"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-virtualizer",
-  "version": "9.0.0-alpha.69",
+  "version": "9.0.0-alpha.70",
   "description": "Generic and composable virtualizer framework built on browser intersection observer",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -32,9 +32,9 @@
     "@fluentui/scripts-tasks": "*"
   },
   "dependencies": {
-    "@fluentui/react-jsx-runtime": "^9.0.30",
-    "@fluentui/react-utilities": "^9.18.1",
-    "@fluentui/react-shared-contexts": "^9.14.0",
+    "@fluentui/react-jsx-runtime": "^9.0.31",
+    "@fluentui/react-utilities": "^9.18.2",
+    "@fluentui/react-shared-contexts": "^9.14.1",
     "@griffel/react": "^1.5.14",
     "@swc/helpers": "^0.5.1"
   },