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

package/lib/hooks/useStaticPagination.js

@@ -0,0 +1,103 @@
+import * as React from 'react';
+import { useRef } from 'react';
+/**
+ * Optional hook that will enable pagination on the virtualizer so that it 'autoscrolls' to an items exact position
+ * Sizes are uniform/static, we round to the nearest item on long scrolls
+ * On short scrolls, we will go at minimum to the next/previous item so that arrow pagination works
+ * All VirtualizerStaticPaginationProps can be grabbed from Virtualizer hooks externally and passed in
+ */ export const useStaticVirtualizerPagination = (virtualizerProps, paginationEnabled = true)=>{
+    const { itemSize, axis = 'vertical' } = virtualizerProps;
+    const timeoutRef = useRef(null);
+    const lastScrollPos = useRef(0);
+    const lastIndexScrolled = 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);
+            }
+        }
+    }, // eslint-disable-next-line react-hooks/exhaustive-deps
+    [
+        onScroll,
+        onScrollEnd,
+        paginationEnabled
+    ]);
+    return paginationRef;
+};

package/lib/hooks/useStaticPagination.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["useStaticPagination.ts"],"sourcesContent":["import * as React from 'react';\nimport { VirtualizerStaticPaginationProps } from './hooks.types';\nimport { useRef } from 'react';\n\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 */\nexport const useStaticVirtualizerPagination = (\n  virtualizerProps: VirtualizerStaticPaginationProps,\n  paginationEnabled: Boolean = true,\n) => {\n  const { itemSize, axis = 'vertical' } = virtualizerProps;\n\n  const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n  const lastScrollPos = useRef<number>(0);\n  const lastIndexScrolled = useRef<number>(0);\n\n  const scrollContainer = React.useRef<HTMLElement | null>(null);\n\n  const clearListeners = () => {\n    if (scrollContainer.current) {\n      scrollContainer.current.removeEventListener('scroll', onScroll);\n\n      scrollContainer.current = null;\n      if (timeoutRef.current) {\n        clearTimeout(timeoutRef.current);\n      }\n    }\n  };\n\n  React.useEffect(() => {\n    return () => {\n      clearListeners();\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\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   */\n  const onScrollEnd = React.useCallback(() => {\n    if (!scrollContainer.current || !paginationEnabled) {\n      // No container found\n      return;\n    }\n\n    const currentScrollPos = Math.round(\n      axis === 'vertical' ? scrollContainer.current.scrollTop : scrollContainer.current.scrollLeft,\n    );\n    const closestItem = Math.round(currentScrollPos / itemSize);\n\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\n      nextItem = closestItem + posMod;\n    } else {\n      // Pagination for anything else can just jump to the closest!\n      nextItem = closestItem;\n    }\n\n    const nextItemPos = nextItem * itemSize;\n\n    if (axis === 'vertical') {\n      scrollContainer.current.scrollTo({ top: nextItemPos, behavior: 'smooth' });\n    } else {\n      scrollContainer.current.scrollTo({ left: nextItemPos, behavior: 'smooth' });\n    }\n    lastScrollPos.current = nextItemPos;\n    lastIndexScrolled.current = nextItem;\n  }, [paginationEnabled, axis, itemSize]);\n\n  /**\n   * On scroll timer that will continuously delay callback until scrolling stops\n   */\n  const onScroll = React.useCallback(\n    event => {\n      if (timeoutRef.current) {\n        clearTimeout(timeoutRef.current);\n      }\n      timeoutRef.current = setTimeout(onScrollEnd, 100);\n    },\n    [onScrollEnd],\n  );\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   */\n  const paginationRef = React.useCallback(\n    (instance: HTMLElement | HTMLDivElement | null) => {\n      if (!paginationEnabled) {\n        clearListeners();\n        scrollContainer.current = null;\n        return;\n      }\n      if (scrollContainer.current !== instance) {\n        clearListeners();\n\n        scrollContainer.current = instance;\n        if (scrollContainer.current) {\n          scrollContainer.current.addEventListener('scroll', onScroll);\n        }\n      }\n    },\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [onScroll, onScrollEnd, paginationEnabled],\n  );\n\n  return paginationRef;\n};\n"],"names":["React","useRef","useStaticVirtualizerPagination","virtualizerProps","paginationEnabled","itemSize","axis","timeoutRef","lastScrollPos","lastIndexScrolled","scrollContainer","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":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,MAAM,QAAQ,QAAQ;AAE/B;;;;;CAKC,GACD,OAAO,MAAMC,iCAAiC,CAC5CC,kBACAC,oBAA6B,IAAI;IAEjC,MAAM,EAAEC,QAAQ,EAAEC,OAAO,UAAU,EAAE,GAAGH;IAExC,MAAMI,aAAaN,OAA6C;IAChE,MAAMO,gBAAgBP,OAAe;IACrC,MAAMQ,oBAAoBR,OAAe;IAEzC,MAAMS,kBAAkBV,MAAMC,MAAM,CAAqB;IAEzD,MAAMU,iBAAiB;QACrB,IAAID,gBAAgBE,OAAO,EAAE;YAC3BF,gBAAgBE,OAAO,CAACC,mBAAmB,CAAC,UAAUC;YAEtDJ,gBAAgBE,OAAO,GAAG;YAC1B,IAAIL,WAAWK,OAAO,EAAE;gBACtBG,aAAaR,WAAWK,OAAO;YACjC;QACF;IACF;IAEAZ,MAAMgB,SAAS,CAAC;QACd,OAAO;YACLL;QACF;IACA,uDAAuD;IACzD,GAAG,EAAE;IAEL;;;;GAIC,GACD,MAAMM,cAAcjB,MAAMkB,WAAW,CAAC;QACpC,IAAI,CAACR,gBAAgBE,OAAO,IAAI,CAACR,mBAAmB;YAClD,qBAAqB;YACrB;QACF;QAEA,MAAMe,mBAAmBC,KAAKC,KAAK,CACjCf,SAAS,aAAaI,gBAAgBE,OAAO,CAACU,SAAS,GAAGZ,gBAAgBE,OAAO,CAACW,UAAU;QAE9F,MAAMC,cAAcJ,KAAKC,KAAK,CAACF,mBAAmBd;QAElD,IAAIoB,WAAW;QACf,IAAIL,KAAKC,KAAK,CAACG,cAAcf,kBAAkBG,OAAO,MAAM,GAAG;YAC7D,4EAA4E;YAC5E,MAAMc,aAAalB,cAAcI,OAAO,GAAGO,mBAAmB,IAAI,CAAC;YACnE,MAAMQ,oBAAoBnB,cAAcI,OAAO,KAAKO;YACpD,MAAMS,SAASD,oBAAoB,IAAID;YAEvCD,WAAWD,cAAcI;QAC3B,OAAO;YACL,6DAA6D;YAC7DH,WAAWD;QACb;QAEA,MAAMK,cAAcJ,WAAWpB;QAE/B,IAAIC,SAAS,YAAY;YACvBI,gBAAgBE,OAAO,CAACkB,QAAQ,CAAC;gBAAEC,KAAKF;gBAAaG,UAAU;YAAS;QAC1E,OAAO;YACLtB,gBAAgBE,OAAO,CAACkB,QAAQ,CAAC;gBAAEG,MAAMJ;gBAAaG,UAAU;YAAS;QAC3E;QACAxB,cAAcI,OAAO,GAAGiB;QACxBpB,kBAAkBG,OAAO,GAAGa;IAC9B,GAAG;QAACrB;QAAmBE;QAAMD;KAAS;IAEtC;;GAEC,GACD,MAAMS,WAAWd,MAAMkB,WAAW,CAChCgB,CAAAA;QACE,IAAI3B,WAAWK,OAAO,EAAE;YACtBG,aAAaR,WAAWK,OAAO;QACjC;QACAL,WAAWK,OAAO,GAAGuB,WAAWlB,aAAa;IAC/C,GACA;QAACA;KAAY;IAGf;;;GAGC,GACD,MAAMmB,gBAAgBpC,MAAMkB,WAAW,CACrC,CAACmB;QACC,IAAI,CAACjC,mBAAmB;YACtBO;YACAD,gBAAgBE,OAAO,GAAG;YAC1B;QACF;QACA,IAAIF,gBAAgBE,OAAO,KAAKyB,UAAU;YACxC1B;YAEAD,gBAAgBE,OAAO,GAAGyB;YAC1B,IAAI3B,gBAAgBE,OAAO,EAAE;gBAC3BF,gBAAgBE,OAAO,CAAC0B,gBAAgB,CAAC,UAAUxB;YACrD;QACF;IACF,GACA,uDAAuD;IACvD;QAACA;QAAUG;QAAab;KAAkB;IAG5C,OAAOgC;AACT,EAAE"}

package/lib-commonjs/components/VirtualizerScrollView/useVirtualizerScrollView.js

@@ -14,8 +14,9 @@ const _reactutilities = require("@fluentui/react-utilities");
 const _useVirtualizer = require("../Virtualizer/useVirtualizer");
 const _Hooks = require("../../Hooks");
 const _Utilities = require("../../Utilities");
+const _useStaticPagination = require("../../hooks/useStaticPagination");
 function useVirtualizerScrollView_unstable(props) {
-    const { imperativeRef, itemSize, numItems, axis = 'vertical', reversed } = props;
+    const { imperativeRef, itemSize, numItems, axis = 'vertical', reversed, enablePagination = false } = props;
     var _props_axis;
     const { virtualizerLength, bufferItems, bufferSize, scrollRef } = (0, _Hooks.useStaticVirtualizerMeasure)({
         defaultItemSize: props.itemSize,
@@ -26,7 +27,11 @@ function useVirtualizerScrollView_unstable(props) {
     if (virtualizerLengthRef.current !== virtualizerLength) {
         virtualizerLengthRef.current = virtualizerLength;
     }
-    const scrollViewRef = (0, _reactutilities.useMergedRefs)(props.scrollViewRef, scrollRef);
+    const paginationRef = (0, _useStaticPagination.useStaticVirtualizerPagination)({
+        axis,
+        itemSize
+    }, enablePagination);
+    const scrollViewRef = (0, _reactutilities.useMergedRefs)(props.scrollViewRef, scrollRef, paginationRef);
     const imperativeVirtualizerRef = _react.useRef(null);
     const scrollCallbackRef = _react.useRef(null);
     (0, _react.useImperativeHandle)(imperativeRef, ()=>{

package/lib-commonjs/components/VirtualizerScrollView/useVirtualizerScrollView.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useVirtualizerScrollView.js"],"sourcesContent":["import * as React from 'react';\nimport { slot, useMergedRefs } from '@fluentui/react-utilities';\nimport { useVirtualizer_unstable } from '../Virtualizer/useVirtualizer';\nimport { useStaticVirtualizerMeasure } from '../../Hooks';\nimport { useImperativeHandle } from 'react';\nimport { scrollToItemStatic } from '../../Utilities';\nexport function useVirtualizerScrollView_unstable(props) {\n    const { imperativeRef, itemSize, numItems, axis = 'vertical', reversed } = props;\n    var _props_axis;\n    const { virtualizerLength, bufferItems, bufferSize, scrollRef } = useStaticVirtualizerMeasure({\n        defaultItemSize: props.itemSize,\n        direction: (_props_axis = props.axis) !== null && _props_axis !== void 0 ? _props_axis : 'vertical'\n    });\n    // Store the virtualizer length as a ref for imperative ref access\n    const virtualizerLengthRef = React.useRef(virtualizerLength);\n    if (virtualizerLengthRef.current !== virtualizerLength) {\n        virtualizerLengthRef.current = virtualizerLength;\n    }\n    const scrollViewRef = useMergedRefs(props.scrollViewRef, scrollRef);\n    const imperativeVirtualizerRef = React.useRef(null);\n    const scrollCallbackRef = React.useRef(null);\n    useImperativeHandle(imperativeRef, ()=>{\n        var _imperativeVirtualizerRef_current;\n        return {\n            scrollTo (index, behavior = 'auto', callback) {\n                var _imperativeVirtualizerRef_current;\n                scrollCallbackRef.current = callback !== null && callback !== void 0 ? callback : null;\n                (_imperativeVirtualizerRef_current = imperativeVirtualizerRef.current) === null || _imperativeVirtualizerRef_current === void 0 ? void 0 : _imperativeVirtualizerRef_current.setFlaggedIndex(index);\n                scrollToItemStatic({\n                    index,\n                    itemSize,\n                    totalItems: numItems,\n                    scrollViewRef,\n                    axis,\n                    reversed,\n                    behavior\n                });\n            },\n            currentIndex: (_imperativeVirtualizerRef_current = imperativeVirtualizerRef.current) === null || _imperativeVirtualizerRef_current === void 0 ? void 0 : _imperativeVirtualizerRef_current.currentIndex,\n            virtualizerLength: virtualizerLengthRef\n        };\n    }, [\n        axis,\n        scrollViewRef,\n        itemSize,\n        numItems,\n        reversed\n    ]);\n    const handleRenderedIndex = (index)=>{\n        if (scrollCallbackRef.current) {\n            scrollCallbackRef.current(index);\n        }\n    };\n    const virtualizerState = useVirtualizer_unstable({\n        ...props,\n        virtualizerLength,\n        bufferItems,\n        bufferSize,\n        scrollViewRef,\n        onRenderedFlaggedIndex: handleRenderedIndex,\n        imperativeVirtualizerRef\n    });\n    return {\n        ...virtualizerState,\n        components: {\n            ...virtualizerState.components,\n            container: 'div'\n        },\n        container: slot.always(props.container, {\n            defaultProps: {\n                ref: scrollViewRef\n            },\n            elementType: 'div'\n        })\n    };\n}\n"],"names":["useVirtualizerScrollView_unstable","props","imperativeRef","itemSize","numItems","axis","reversed","_props_axis","virtualizerLength","bufferItems","bufferSize","scrollRef","useStaticVirtualizerMeasure","defaultItemSize","direction","virtualizerLengthRef","React","useRef","current","scrollViewRef","useMergedRefs","imperativeVirtualizerRef","scrollCallbackRef","useImperativeHandle","_imperativeVirtualizerRef_current","scrollTo","index","behavior","callback","setFlaggedIndex","scrollToItemStatic","totalItems","currentIndex","handleRenderedIndex","virtualizerState","useVirtualizer_unstable","onRenderedFlaggedIndex","components","container","slot","always","defaultProps","ref","elementType"],"mappings":";;;;+BAMgBA;;;eAAAA;;;;iEANO;gCACa;gCACI;uBACI;2BAET;AAC5B,SAASA,kCAAkCC,KAAK;IACnD,MAAM,EAAEC,aAAa,EAAEC,QAAQ,EAAEC,QAAQ,EAAEC,OAAO,UAAU,EAAEC,QAAQ,EAAE,GAAGL;IAC3E,IAAIM;IACJ,MAAM,EAAEC,iBAAiB,EAAEC,WAAW,EAAEC,UAAU,EAAEC,SAAS,EAAE,GAAGC,IAAAA,kCAA2B,EAAC;QAC1FC,iBAAiBZ,MAAME,QAAQ;QAC/BW,WAAW,AAACP,CAAAA,cAAcN,MAAMI,IAAI,AAAD,MAAO,QAAQE,gBAAgB,KAAK,IAAIA,cAAc;IAC7F;IACA,kEAAkE;IAClE,MAAMQ,uBAAuBC,OAAMC,MAAM,CAACT;IAC1C,IAAIO,qBAAqBG,OAAO,KAAKV,mBAAmB;QACpDO,qBAAqBG,OAAO,GAAGV;IACnC;IACA,MAAMW,gBAAgBC,IAAAA,6BAAa,EAACnB,MAAMkB,aAAa,EAAER;IACzD,MAAMU,2BAA2BL,OAAMC,MAAM,CAAC;IAC9C,MAAMK,oBAAoBN,OAAMC,MAAM,CAAC;IACvCM,IAAAA,0BAAmB,EAACrB,eAAe;QAC/B,IAAIsB;QACJ,OAAO;YACHC,UAAUC,KAAK,EAAEC,WAAW,MAAM,EAAEC,QAAQ;gBACxC,IAAIJ;gBACJF,kBAAkBJ,OAAO,GAAGU,aAAa,QAAQA,aAAa,KAAK,IAAIA,WAAW;gBACjFJ,CAAAA,oCAAoCH,yBAAyBH,OAAO,AAAD,MAAO,QAAQM,sCAAsC,KAAK,IAAI,KAAK,IAAIA,kCAAkCK,eAAe,CAACH;gBAC7LI,IAAAA,6BAAkB,EAAC;oBACfJ;oBACAvB;oBACA4B,YAAY3B;oBACZe;oBACAd;oBACAC;oBACAqB;gBACJ;YACJ;YACAK,cAAc,AAACR,CAAAA,oCAAoCH,yBAAyBH,OAAO,AAAD,MAAO,QAAQM,sCAAsC,KAAK,IAAI,KAAK,IAAIA,kCAAkCQ,YAAY;YACvMxB,mBAAmBO;QACvB;IACJ,GAAG;QACCV;QACAc;QACAhB;QACAC;QACAE;KACH;IACD,MAAM2B,sBAAsB,CAACP;QACzB,IAAIJ,kBAAkBJ,OAAO,EAAE;YAC3BI,kBAAkBJ,OAAO,CAACQ;QAC9B;IACJ;IACA,MAAMQ,mBAAmBC,IAAAA,uCAAuB,EAAC;QAC7C,GAAGlC,KAAK;QACRO;QACAC;QACAC;QACAS;QACAiB,wBAAwBH;QACxBZ;IACJ;IACA,OAAO;QACH,GAAGa,gBAAgB;QACnBG,YAAY;YACR,GAAGH,iBAAiBG,UAAU;YAC9BC,WAAW;QACf;QACAA,WAAWC,oBAAI,CAACC,MAAM,CAACvC,MAAMqC,SAAS,EAAE;YACpCG,cAAc;gBACVC,KAAKvB;YACT;YACAwB,aAAa;QACjB;IACJ;AACJ"}
+{"version":3,"sources":["useVirtualizerScrollView.js"],"sourcesContent":["import * as React from 'react';\nimport { slot, useMergedRefs } from '@fluentui/react-utilities';\nimport { useVirtualizer_unstable } from '../Virtualizer/useVirtualizer';\nimport { useStaticVirtualizerMeasure } from '../../Hooks';\nimport { useImperativeHandle } from 'react';\nimport { scrollToItemStatic } from '../../Utilities';\nimport { useStaticVirtualizerPagination } from '../../hooks/useStaticPagination';\nexport function useVirtualizerScrollView_unstable(props) {\n    const { imperativeRef, itemSize, numItems, axis = 'vertical', reversed, enablePagination = false } = props;\n    var _props_axis;\n    const { virtualizerLength, bufferItems, bufferSize, scrollRef } = useStaticVirtualizerMeasure({\n        defaultItemSize: props.itemSize,\n        direction: (_props_axis = props.axis) !== null && _props_axis !== void 0 ? _props_axis : 'vertical'\n    });\n    // Store the virtualizer length as a ref for imperative ref access\n    const virtualizerLengthRef = React.useRef(virtualizerLength);\n    if (virtualizerLengthRef.current !== virtualizerLength) {\n        virtualizerLengthRef.current = virtualizerLength;\n    }\n    const paginationRef = useStaticVirtualizerPagination({\n        axis,\n        itemSize\n    }, enablePagination);\n    const scrollViewRef = useMergedRefs(props.scrollViewRef, scrollRef, paginationRef);\n    const imperativeVirtualizerRef = React.useRef(null);\n    const scrollCallbackRef = React.useRef(null);\n    useImperativeHandle(imperativeRef, ()=>{\n        var _imperativeVirtualizerRef_current;\n        return {\n            scrollTo (index, behavior = 'auto', callback) {\n                var _imperativeVirtualizerRef_current;\n                scrollCallbackRef.current = callback !== null && callback !== void 0 ? callback : null;\n                (_imperativeVirtualizerRef_current = imperativeVirtualizerRef.current) === null || _imperativeVirtualizerRef_current === void 0 ? void 0 : _imperativeVirtualizerRef_current.setFlaggedIndex(index);\n                scrollToItemStatic({\n                    index,\n                    itemSize,\n                    totalItems: numItems,\n                    scrollViewRef,\n                    axis,\n                    reversed,\n                    behavior\n                });\n            },\n            currentIndex: (_imperativeVirtualizerRef_current = imperativeVirtualizerRef.current) === null || _imperativeVirtualizerRef_current === void 0 ? void 0 : _imperativeVirtualizerRef_current.currentIndex,\n            virtualizerLength: virtualizerLengthRef\n        };\n    }, [\n        axis,\n        scrollViewRef,\n        itemSize,\n        numItems,\n        reversed\n    ]);\n    const handleRenderedIndex = (index)=>{\n        if (scrollCallbackRef.current) {\n            scrollCallbackRef.current(index);\n        }\n    };\n    const virtualizerState = useVirtualizer_unstable({\n        ...props,\n        virtualizerLength,\n        bufferItems,\n        bufferSize,\n        scrollViewRef,\n        onRenderedFlaggedIndex: handleRenderedIndex,\n        imperativeVirtualizerRef\n    });\n    return {\n        ...virtualizerState,\n        components: {\n            ...virtualizerState.components,\n            container: 'div'\n        },\n        container: slot.always(props.container, {\n            defaultProps: {\n                ref: scrollViewRef\n            },\n            elementType: 'div'\n        })\n    };\n}\n"],"names":["useVirtualizerScrollView_unstable","props","imperativeRef","itemSize","numItems","axis","reversed","enablePagination","_props_axis","virtualizerLength","bufferItems","bufferSize","scrollRef","useStaticVirtualizerMeasure","defaultItemSize","direction","virtualizerLengthRef","React","useRef","current","paginationRef","useStaticVirtualizerPagination","scrollViewRef","useMergedRefs","imperativeVirtualizerRef","scrollCallbackRef","useImperativeHandle","_imperativeVirtualizerRef_current","scrollTo","index","behavior","callback","setFlaggedIndex","scrollToItemStatic","totalItems","currentIndex","handleRenderedIndex","virtualizerState","useVirtualizer_unstable","onRenderedFlaggedIndex","components","container","slot","always","defaultProps","ref","elementType"],"mappings":";;;;+BAOgBA;;;eAAAA;;;;iEAPO;gCACa;gCACI;uBACI;2BAET;qCACY;AACxC,SAASA,kCAAkCC,KAAK;IACnD,MAAM,EAAEC,aAAa,EAAEC,QAAQ,EAAEC,QAAQ,EAAEC,OAAO,UAAU,EAAEC,QAAQ,EAAEC,mBAAmB,KAAK,EAAE,GAAGN;IACrG,IAAIO;IACJ,MAAM,EAAEC,iBAAiB,EAAEC,WAAW,EAAEC,UAAU,EAAEC,SAAS,EAAE,GAAGC,IAAAA,kCAA2B,EAAC;QAC1FC,iBAAiBb,MAAME,QAAQ;QAC/BY,WAAW,AAACP,CAAAA,cAAcP,MAAMI,IAAI,AAAD,MAAO,QAAQG,gBAAgB,KAAK,IAAIA,cAAc;IAC7F;IACA,kEAAkE;IAClE,MAAMQ,uBAAuBC,OAAMC,MAAM,CAACT;IAC1C,IAAIO,qBAAqBG,OAAO,KAAKV,mBAAmB;QACpDO,qBAAqBG,OAAO,GAAGV;IACnC;IACA,MAAMW,gBAAgBC,IAAAA,mDAA8B,EAAC;QACjDhB;QACAF;IACJ,GAAGI;IACH,MAAMe,gBAAgBC,IAAAA,6BAAa,EAACtB,MAAMqB,aAAa,EAAEV,WAAWQ;IACpE,MAAMI,2BAA2BP,OAAMC,MAAM,CAAC;IAC9C,MAAMO,oBAAoBR,OAAMC,MAAM,CAAC;IACvCQ,IAAAA,0BAAmB,EAACxB,eAAe;QAC/B,IAAIyB;QACJ,OAAO;YACHC,UAAUC,KAAK,EAAEC,WAAW,MAAM,EAAEC,QAAQ;gBACxC,IAAIJ;gBACJF,kBAAkBN,OAAO,GAAGY,aAAa,QAAQA,aAAa,KAAK,IAAIA,WAAW;gBACjFJ,CAAAA,oCAAoCH,yBAAyBL,OAAO,AAAD,MAAO,QAAQQ,sCAAsC,KAAK,IAAI,KAAK,IAAIA,kCAAkCK,eAAe,CAACH;gBAC7LI,IAAAA,6BAAkB,EAAC;oBACfJ;oBACA1B;oBACA+B,YAAY9B;oBACZkB;oBACAjB;oBACAC;oBACAwB;gBACJ;YACJ;YACAK,cAAc,AAACR,CAAAA,oCAAoCH,yBAAyBL,OAAO,AAAD,MAAO,QAAQQ,sCAAsC,KAAK,IAAI,KAAK,IAAIA,kCAAkCQ,YAAY;YACvM1B,mBAAmBO;QACvB;IACJ,GAAG;QACCX;QACAiB;QACAnB;QACAC;QACAE;KACH;IACD,MAAM8B,sBAAsB,CAACP;QACzB,IAAIJ,kBAAkBN,OAAO,EAAE;YAC3BM,kBAAkBN,OAAO,CAACU;QAC9B;IACJ;IACA,MAAMQ,mBAAmBC,IAAAA,uCAAuB,EAAC;QAC7C,GAAGrC,KAAK;QACRQ;QACAC;QACAC;QACAW;QACAiB,wBAAwBH;QACxBZ;IACJ;IACA,OAAO;QACH,GAAGa,gBAAgB;QACnBG,YAAY;YACR,GAAGH,iBAAiBG,UAAU;YAC9BC,WAAW;QACf;QACAA,WAAWC,oBAAI,CAACC,MAAM,CAAC1C,MAAMwC,SAAS,EAAE;YACpCG,cAAc;gBACVC,KAAKvB;YACT;YACAwB,aAAa;QACjB;IACJ;AACJ"}

package/lib-commonjs/components/VirtualizerScrollViewDynamic/useVirtualizerScrollViewDynamic.js

@@ -15,10 +15,14 @@ const _useVirtualizer = require("../Virtualizer/useVirtualizer");
 const _Hooks = require("../../Hooks");
 const _Utilities = require("../../Utilities");
 const _useMeasureList = require("../../hooks/useMeasureList");
+const _useDynamicPagination = require("../../hooks/useDynamicPagination");
 function useVirtualizerScrollViewDynamic_unstable(props) {
+    var _imperativeVirtualizerRef_current;
     const contextState = (0, _Utilities.useVirtualizerContextState_unstable)(props.virtualizerContext);
-    const { imperativeRef, axis = 'vertical', reversed, imperativeVirtualizerRef } = props;
+    const { imperativeRef, axis = 'vertical', reversed, imperativeVirtualizerRef, enablePagination = false } = props;
     let sizeTrackingArray = _react.useRef(new Array(props.numItems).fill(props.itemSize));
+    // This lets us trigger updates when a size change occurs.
+    const [sizeUpdateCount, setSizeUpdateCount] = (0, _react.useState)(0);
     const getChildSizeAuto = _react.useCallback((index)=>{
         if (sizeTrackingArray.current.length <= index || sizeTrackingArray.current[index] <= 0) {
             // Default size for initial state or untracked
@@ -29,7 +33,8 @@ function useVirtualizerScrollViewDynamic_unstable(props) {
        */ return sizeTrackingArray.current[index];
     }, [
         sizeTrackingArray,
-        props.itemSize
+        props.itemSize,
+        sizeUpdateCount
     ]);
     var _props_axis, _props_getItemSize, _contextState_contextIndex;
     const { virtualizerLength, bufferItems, bufferSize, scrollRef } = (0, _Hooks.useDynamicVirtualizerMeasure)({
@@ -39,14 +44,21 @@ function useVirtualizerScrollViewDynamic_unstable(props) {
         currentIndex: (_contextState_contextIndex = contextState === null || contextState === void 0 ? void 0 : contextState.contextIndex) !== null && _contextState_contextIndex !== void 0 ? _contextState_contextIndex : 0,
         numItems: props.numItems
     });
+    const _imperativeVirtualizerRef = (0, _reactutilities.useMergedRefs)(_react.useRef(null), imperativeVirtualizerRef);
+    var _contextState_contextIndex1;
+    const paginationRef = (0, _useDynamicPagination.useDynamicVirtualizerPagination)({
+        axis,
+        progressiveItemSizes: (_imperativeVirtualizerRef_current = _imperativeVirtualizerRef.current) === null || _imperativeVirtualizerRef_current === void 0 ? void 0 : _imperativeVirtualizerRef_current.progressiveSizes,
+        virtualizerLength,
+        currentIndex: (_contextState_contextIndex1 = contextState === null || contextState === void 0 ? void 0 : contextState.contextIndex) !== null && _contextState_contextIndex1 !== void 0 ? _contextState_contextIndex1 : 0
+    }, enablePagination);
     // Store the virtualizer length as a ref for imperative ref access
     const virtualizerLengthRef = _react.useRef(virtualizerLength);
     if (virtualizerLengthRef.current !== virtualizerLength) {
         virtualizerLengthRef.current = virtualizerLength;
     }
-    const scrollViewRef = (0, _reactutilities.useMergedRefs)(props.scrollViewRef, scrollRef);
+    const scrollViewRef = (0, _reactutilities.useMergedRefs)(props.scrollViewRef, scrollRef, paginationRef);
     const scrollCallbackRef = _react.useRef(null);
-    const _imperativeVirtualizerRef = (0, _reactutilities.useMergedRefs)(_react.useRef(null), imperativeVirtualizerRef);
     (0, _react.useImperativeHandle)(imperativeRef, ()=>{
         var _imperativeVirtualizerRef_current;
         return {
@@ -95,6 +107,10 @@ function useVirtualizerScrollViewDynamic_unstable(props) {
         onRenderedFlaggedIndex: handleRenderedIndex
     });
     const measureObject = (0, _useMeasureList.useMeasureList)(virtualizerState.virtualizerStartIndex, virtualizerLength, props.numItems, props.itemSize);
+    if (enablePagination && measureObject.sizeUpdateCount !== sizeUpdateCount) {
+        /* This enables us to let callback know that the sizes have been updated
+    triggers a re-render but is only required on pagination (else index change handles) */ setSizeUpdateCount(measureObject.sizeUpdateCount);
+    }
     if (axis === 'horizontal') {
         sizeTrackingArray = measureObject.widthArray;
     } else {
@@ -108,12 +124,6 @@ function useVirtualizerScrollViewDynamic_unstable(props) {
                     ...child.props,
                     key: child.key,
                     ref: (element)=>{
-                        // If a ref exists in props, call it
-                        if (typeof child.props.ref === 'function') {
-                            child.props.ref(element);
-                        } else if (child.props.ref) {
-                            child.props.ref.current = element;
-                        }
                         if (child.hasOwnProperty('ref')) {
                             // We must access this from the child directly, not props (forward ref).
                             // eslint-disable-next-line  @typescript-eslint/no-explicit-any

package/lib-commonjs/components/VirtualizerScrollViewDynamic/useVirtualizerScrollViewDynamic.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useVirtualizerScrollViewDynamic.js"],"sourcesContent":["import * as React from 'react';\nimport { slot, useMergedRefs } from '@fluentui/react-utilities';\nimport { useVirtualizer_unstable } from '../Virtualizer/useVirtualizer';\nimport { useDynamicVirtualizerMeasure } from '../../Hooks';\nimport { useVirtualizerContextState_unstable, scrollToItemDynamic } from '../../Utilities';\nimport { useImperativeHandle } from 'react';\nimport { useMeasureList } from '../../hooks/useMeasureList';\nexport function useVirtualizerScrollViewDynamic_unstable(props) {\n    const contextState = useVirtualizerContextState_unstable(props.virtualizerContext);\n    const { imperativeRef, axis = 'vertical', reversed, imperativeVirtualizerRef } = props;\n    let sizeTrackingArray = React.useRef(new Array(props.numItems).fill(props.itemSize));\n    const getChildSizeAuto = React.useCallback((index)=>{\n        if (sizeTrackingArray.current.length <= index || sizeTrackingArray.current[index] <= 0) {\n            // Default size for initial state or untracked\n            return props.itemSize;\n        }\n        /* Required to be defined prior to our measure function\n       * we use a sizing array ref that we will update post-render\n       */ return sizeTrackingArray.current[index];\n    }, [\n        sizeTrackingArray,\n        props.itemSize\n    ]);\n    var _props_axis, _props_getItemSize, _contextState_contextIndex;\n    const { virtualizerLength, bufferItems, bufferSize, scrollRef } = useDynamicVirtualizerMeasure({\n        defaultItemSize: props.itemSize,\n        direction: (_props_axis = props.axis) !== null && _props_axis !== void 0 ? _props_axis : 'vertical',\n        getItemSize: (_props_getItemSize = props.getItemSize) !== null && _props_getItemSize !== void 0 ? _props_getItemSize : getChildSizeAuto,\n        currentIndex: (_contextState_contextIndex = contextState === null || contextState === void 0 ? void 0 : contextState.contextIndex) !== null && _contextState_contextIndex !== void 0 ? _contextState_contextIndex : 0,\n        numItems: props.numItems\n    });\n    // Store the virtualizer length as a ref for imperative ref access\n    const virtualizerLengthRef = React.useRef(virtualizerLength);\n    if (virtualizerLengthRef.current !== virtualizerLength) {\n        virtualizerLengthRef.current = virtualizerLength;\n    }\n    const scrollViewRef = useMergedRefs(props.scrollViewRef, scrollRef);\n    const scrollCallbackRef = React.useRef(null);\n    const _imperativeVirtualizerRef = useMergedRefs(React.useRef(null), imperativeVirtualizerRef);\n    useImperativeHandle(imperativeRef, ()=>{\n        var _imperativeVirtualizerRef_current;\n        return {\n            scrollTo (index, behavior = 'auto', callback) {\n                scrollCallbackRef.current = callback !== null && callback !== void 0 ? callback : null;\n                if (_imperativeVirtualizerRef.current) {\n                    var _imperativeVirtualizerRef_current;\n                    const progressiveSizes = _imperativeVirtualizerRef.current.progressiveSizes.current;\n                    const totalSize = progressiveSizes && (progressiveSizes === null || progressiveSizes === void 0 ? void 0 : progressiveSizes.length) > 0 ? progressiveSizes[Math.max(progressiveSizes.length - 1, 0)] : 0;\n                    _imperativeVirtualizerRef.current.setFlaggedIndex(index);\n                    scrollToItemDynamic({\n                        index,\n                        itemSizes: (_imperativeVirtualizerRef_current = _imperativeVirtualizerRef.current) === null || _imperativeVirtualizerRef_current === void 0 ? void 0 : _imperativeVirtualizerRef_current.nodeSizes,\n                        totalSize,\n                        scrollViewRef,\n                        axis,\n                        reversed,\n                        behavior\n                    });\n                }\n            },\n            currentIndex: (_imperativeVirtualizerRef_current = _imperativeVirtualizerRef.current) === null || _imperativeVirtualizerRef_current === void 0 ? void 0 : _imperativeVirtualizerRef_current.currentIndex,\n            virtualizerLength: virtualizerLengthRef\n        };\n    }, [\n        axis,\n        scrollViewRef,\n        reversed,\n        _imperativeVirtualizerRef\n    ]);\n    const handleRenderedIndex = (index)=>{\n        if (scrollCallbackRef.current) {\n            scrollCallbackRef.current(index);\n        }\n    };\n    var _props_getItemSize1;\n    const virtualizerState = useVirtualizer_unstable({\n        ...props,\n        getItemSize: (_props_getItemSize1 = props.getItemSize) !== null && _props_getItemSize1 !== void 0 ? _props_getItemSize1 : getChildSizeAuto,\n        virtualizerLength,\n        bufferItems,\n        bufferSize,\n        scrollViewRef,\n        virtualizerContext: contextState,\n        imperativeVirtualizerRef: _imperativeVirtualizerRef,\n        onRenderedFlaggedIndex: handleRenderedIndex\n    });\n    const measureObject = useMeasureList(virtualizerState.virtualizerStartIndex, virtualizerLength, props.numItems, props.itemSize);\n    if (axis === 'horizontal') {\n        sizeTrackingArray = measureObject.widthArray;\n    } else {\n        sizeTrackingArray = measureObject.heightArray;\n    }\n    if (!props.getItemSize) {\n        // Auto-measuring is required\n        React.Children.map(virtualizerState.virtualizedChildren, (child, index)=>{\n            if (/*#__PURE__*/ React.isValidElement(child)) {\n                virtualizerState.virtualizedChildren[index] = /*#__PURE__*/ React.createElement(child.type, {\n                    ...child.props,\n                    key: child.key,\n                    ref: (element)=>{\n                        // If a ref exists in props, call it\n                        if (typeof child.props.ref === 'function') {\n                            child.props.ref(element);\n                        } else if (child.props.ref) {\n                            child.props.ref.current = element;\n                        }\n                        if (child.hasOwnProperty('ref')) {\n                            // We must access this from the child directly, not props (forward ref).\n                            // eslint-disable-next-line  @typescript-eslint/no-explicit-any\n                            const localRef = child === null || child === void 0 ? void 0 : child.ref;\n                            if (typeof localRef === 'function') {\n                                localRef(element);\n                            } else if (localRef) {\n                                localRef.current = element;\n                            }\n                        }\n                        // Call the auto-measure ref attachment.\n                        measureObject.createIndexedRef(index)(element);\n                    }\n                });\n            }\n        });\n    }\n    return {\n        ...virtualizerState,\n        components: {\n            ...virtualizerState.components,\n            container: 'div'\n        },\n        container: slot.always(props.container, {\n            defaultProps: {\n                ref: scrollViewRef\n            },\n            elementType: 'div'\n        })\n    };\n}\n"],"names":["useVirtualizerScrollViewDynamic_unstable","props","contextState","useVirtualizerContextState_unstable","virtualizerContext","imperativeRef","axis","reversed","imperativeVirtualizerRef","sizeTrackingArray","React","useRef","Array","numItems","fill","itemSize","getChildSizeAuto","useCallback","index","current","length","_props_axis","_props_getItemSize","_contextState_contextIndex","virtualizerLength","bufferItems","bufferSize","scrollRef","useDynamicVirtualizerMeasure","defaultItemSize","direction","getItemSize","currentIndex","contextIndex","virtualizerLengthRef","scrollViewRef","useMergedRefs","scrollCallbackRef","_imperativeVirtualizerRef","useImperativeHandle","_imperativeVirtualizerRef_current","scrollTo","behavior","callback","progressiveSizes","totalSize","Math","max","setFlaggedIndex","scrollToItemDynamic","itemSizes","nodeSizes","handleRenderedIndex","_props_getItemSize1","virtualizerState","useVirtualizer_unstable","onRenderedFlaggedIndex","measureObject","useMeasureList","virtualizerStartIndex","widthArray","heightArray","Children","map","virtualizedChildren","child","isValidElement","createElement","type","key","ref","element","hasOwnProperty","localRef","createIndexedRef","components","container","slot","always","defaultProps","elementType"],"mappings":"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"}
+{"version":3,"sources":["useVirtualizerScrollViewDynamic.js"],"sourcesContent":["import * as React from 'react';\nimport { slot, useMergedRefs } from '@fluentui/react-utilities';\nimport { useVirtualizer_unstable } from '../Virtualizer/useVirtualizer';\nimport { useDynamicVirtualizerMeasure } from '../../Hooks';\nimport { useVirtualizerContextState_unstable, scrollToItemDynamic } from '../../Utilities';\nimport { useImperativeHandle, useState } from 'react';\nimport { useMeasureList } from '../../hooks/useMeasureList';\nimport { useDynamicVirtualizerPagination } from '../../hooks/useDynamicPagination';\nexport function useVirtualizerScrollViewDynamic_unstable(props) {\n    var _imperativeVirtualizerRef_current;\n    const contextState = useVirtualizerContextState_unstable(props.virtualizerContext);\n    const { imperativeRef, axis = 'vertical', reversed, imperativeVirtualizerRef, enablePagination = false } = props;\n    let sizeTrackingArray = React.useRef(new Array(props.numItems).fill(props.itemSize));\n    // This lets us trigger updates when a size change occurs.\n    const [sizeUpdateCount, setSizeUpdateCount] = useState(0);\n    const getChildSizeAuto = React.useCallback((index)=>{\n        if (sizeTrackingArray.current.length <= index || sizeTrackingArray.current[index] <= 0) {\n            // Default size for initial state or untracked\n            return props.itemSize;\n        }\n        /* Required to be defined prior to our measure function\n       * we use a sizing array ref that we will update post-render\n       */ return sizeTrackingArray.current[index];\n    }, // eslint-disable-next-line react-hooks/exhaustive-deps\n    [\n        sizeTrackingArray,\n        props.itemSize,\n        sizeUpdateCount\n    ]);\n    var _props_axis, _props_getItemSize, _contextState_contextIndex;\n    const { virtualizerLength, bufferItems, bufferSize, scrollRef } = useDynamicVirtualizerMeasure({\n        defaultItemSize: props.itemSize,\n        direction: (_props_axis = props.axis) !== null && _props_axis !== void 0 ? _props_axis : 'vertical',\n        getItemSize: (_props_getItemSize = props.getItemSize) !== null && _props_getItemSize !== void 0 ? _props_getItemSize : getChildSizeAuto,\n        currentIndex: (_contextState_contextIndex = contextState === null || contextState === void 0 ? void 0 : contextState.contextIndex) !== null && _contextState_contextIndex !== void 0 ? _contextState_contextIndex : 0,\n        numItems: props.numItems\n    });\n    const _imperativeVirtualizerRef = useMergedRefs(React.useRef(null), imperativeVirtualizerRef);\n    var _contextState_contextIndex1;\n    const paginationRef = useDynamicVirtualizerPagination({\n        axis,\n        progressiveItemSizes: (_imperativeVirtualizerRef_current = _imperativeVirtualizerRef.current) === null || _imperativeVirtualizerRef_current === void 0 ? void 0 : _imperativeVirtualizerRef_current.progressiveSizes,\n        virtualizerLength,\n        currentIndex: (_contextState_contextIndex1 = contextState === null || contextState === void 0 ? void 0 : contextState.contextIndex) !== null && _contextState_contextIndex1 !== void 0 ? _contextState_contextIndex1 : 0\n    }, enablePagination);\n    // Store the virtualizer length as a ref for imperative ref access\n    const virtualizerLengthRef = React.useRef(virtualizerLength);\n    if (virtualizerLengthRef.current !== virtualizerLength) {\n        virtualizerLengthRef.current = virtualizerLength;\n    }\n    const scrollViewRef = useMergedRefs(props.scrollViewRef, scrollRef, paginationRef);\n    const scrollCallbackRef = React.useRef(null);\n    useImperativeHandle(imperativeRef, ()=>{\n        var _imperativeVirtualizerRef_current;\n        return {\n            scrollTo (index, behavior = 'auto', callback) {\n                scrollCallbackRef.current = callback !== null && callback !== void 0 ? callback : null;\n                if (_imperativeVirtualizerRef.current) {\n                    var _imperativeVirtualizerRef_current;\n                    const progressiveSizes = _imperativeVirtualizerRef.current.progressiveSizes.current;\n                    const totalSize = progressiveSizes && (progressiveSizes === null || progressiveSizes === void 0 ? void 0 : progressiveSizes.length) > 0 ? progressiveSizes[Math.max(progressiveSizes.length - 1, 0)] : 0;\n                    _imperativeVirtualizerRef.current.setFlaggedIndex(index);\n                    scrollToItemDynamic({\n                        index,\n                        itemSizes: (_imperativeVirtualizerRef_current = _imperativeVirtualizerRef.current) === null || _imperativeVirtualizerRef_current === void 0 ? void 0 : _imperativeVirtualizerRef_current.nodeSizes,\n                        totalSize,\n                        scrollViewRef,\n                        axis,\n                        reversed,\n                        behavior\n                    });\n                }\n            },\n            currentIndex: (_imperativeVirtualizerRef_current = _imperativeVirtualizerRef.current) === null || _imperativeVirtualizerRef_current === void 0 ? void 0 : _imperativeVirtualizerRef_current.currentIndex,\n            virtualizerLength: virtualizerLengthRef\n        };\n    }, [\n        axis,\n        scrollViewRef,\n        reversed,\n        _imperativeVirtualizerRef\n    ]);\n    const handleRenderedIndex = (index)=>{\n        if (scrollCallbackRef.current) {\n            scrollCallbackRef.current(index);\n        }\n    };\n    var _props_getItemSize1;\n    const virtualizerState = useVirtualizer_unstable({\n        ...props,\n        getItemSize: (_props_getItemSize1 = props.getItemSize) !== null && _props_getItemSize1 !== void 0 ? _props_getItemSize1 : getChildSizeAuto,\n        virtualizerLength,\n        bufferItems,\n        bufferSize,\n        scrollViewRef,\n        virtualizerContext: contextState,\n        imperativeVirtualizerRef: _imperativeVirtualizerRef,\n        onRenderedFlaggedIndex: handleRenderedIndex\n    });\n    const measureObject = useMeasureList(virtualizerState.virtualizerStartIndex, virtualizerLength, props.numItems, props.itemSize);\n    if (enablePagination && measureObject.sizeUpdateCount !== sizeUpdateCount) {\n        /* This enables us to let callback know that the sizes have been updated\n    triggers a re-render but is only required on pagination (else index change handles) */ setSizeUpdateCount(measureObject.sizeUpdateCount);\n    }\n    if (axis === 'horizontal') {\n        sizeTrackingArray = measureObject.widthArray;\n    } else {\n        sizeTrackingArray = measureObject.heightArray;\n    }\n    if (!props.getItemSize) {\n        // Auto-measuring is required\n        React.Children.map(virtualizerState.virtualizedChildren, (child, index)=>{\n            if (/*#__PURE__*/ React.isValidElement(child)) {\n                virtualizerState.virtualizedChildren[index] = /*#__PURE__*/ React.createElement(child.type, {\n                    ...child.props,\n                    key: child.key,\n                    ref: (element)=>{\n                        if (child.hasOwnProperty('ref')) {\n                            // We must access this from the child directly, not props (forward ref).\n                            // eslint-disable-next-line  @typescript-eslint/no-explicit-any\n                            const localRef = child === null || child === void 0 ? void 0 : child.ref;\n                            if (typeof localRef === 'function') {\n                                localRef(element);\n                            } else if (localRef) {\n                                localRef.current = element;\n                            }\n                        }\n                        // Call the auto-measure ref attachment.\n                        measureObject.createIndexedRef(index)(element);\n                    }\n                });\n            }\n        });\n    }\n    return {\n        ...virtualizerState,\n        components: {\n            ...virtualizerState.components,\n            container: 'div'\n        },\n        container: slot.always(props.container, {\n            defaultProps: {\n                ref: scrollViewRef\n            },\n            elementType: 'div'\n        })\n    };\n}\n"],"names":["useVirtualizerScrollViewDynamic_unstable","props","_imperativeVirtualizerRef_current","contextState","useVirtualizerContextState_unstable","virtualizerContext","imperativeRef","axis","reversed","imperativeVirtualizerRef","enablePagination","sizeTrackingArray","React","useRef","Array","numItems","fill","itemSize","sizeUpdateCount","setSizeUpdateCount","useState","getChildSizeAuto","useCallback","index","current","length","_props_axis","_props_getItemSize","_contextState_contextIndex","virtualizerLength","bufferItems","bufferSize","scrollRef","useDynamicVirtualizerMeasure","defaultItemSize","direction","getItemSize","currentIndex","contextIndex","_imperativeVirtualizerRef","useMergedRefs","_contextState_contextIndex1","paginationRef","useDynamicVirtualizerPagination","progressiveItemSizes","progressiveSizes","virtualizerLengthRef","scrollViewRef","scrollCallbackRef","useImperativeHandle","scrollTo","behavior","callback","totalSize","Math","max","setFlaggedIndex","scrollToItemDynamic","itemSizes","nodeSizes","handleRenderedIndex","_props_getItemSize1","virtualizerState","useVirtualizer_unstable","onRenderedFlaggedIndex","measureObject","useMeasureList","virtualizerStartIndex","widthArray","heightArray","Children","map","virtualizedChildren","child","isValidElement","createElement","type","key","ref","element","hasOwnProperty","localRef","createIndexedRef","components","container","slot","always","defaultProps","elementType"],"mappings":";;;;+BAQgBA;;;eAAAA;;;;iEARO;gCACa;gCACI;uBACK;2BAC4B;gCAE1C;sCACiB;AACzC,SAASA,yCAAyCC,KAAK;IAC1D,IAAIC;IACJ,MAAMC,eAAeC,IAAAA,8CAAmC,EAACH,MAAMI,kBAAkB;IACjF,MAAM,EAAEC,aAAa,EAAEC,OAAO,UAAU,EAAEC,QAAQ,EAAEC,wBAAwB,EAAEC,mBAAmB,KAAK,EAAE,GAAGT;IAC3G,IAAIU,oBAAoBC,OAAMC,MAAM,CAAC,IAAIC,MAAMb,MAAMc,QAAQ,EAAEC,IAAI,CAACf,MAAMgB,QAAQ;IAClF,0DAA0D;IAC1D,MAAM,CAACC,iBAAiBC,mBAAmB,GAAGC,IAAAA,eAAQ,EAAC;IACvD,MAAMC,mBAAmBT,OAAMU,WAAW,CAAC,CAACC;QACxC,IAAIZ,kBAAkBa,OAAO,CAACC,MAAM,IAAIF,SAASZ,kBAAkBa,OAAO,CAACD,MAAM,IAAI,GAAG;YACpF,8CAA8C;YAC9C,OAAOtB,MAAMgB,QAAQ;QACzB;QACA;;OAED,GAAG,OAAON,kBAAkBa,OAAO,CAACD,MAAM;IAC7C,GACA;QACIZ;QACAV,MAAMgB,QAAQ;QACdC;KACH;IACD,IAAIQ,aAAaC,oBAAoBC;IACrC,MAAM,EAAEC,iBAAiB,EAAEC,WAAW,EAAEC,UAAU,EAAEC,SAAS,EAAE,GAAGC,IAAAA,mCAA4B,EAAC;QAC3FC,iBAAiBjC,MAAMgB,QAAQ;QAC/BkB,WAAW,AAACT,CAAAA,cAAczB,MAAMM,IAAI,AAAD,MAAO,QAAQmB,gBAAgB,KAAK,IAAIA,cAAc;QACzFU,aAAa,AAACT,CAAAA,qBAAqB1B,MAAMmC,WAAW,AAAD,MAAO,QAAQT,uBAAuB,KAAK,IAAIA,qBAAqBN;QACvHgB,cAAc,AAACT,CAAAA,6BAA6BzB,iBAAiB,QAAQA,iBAAiB,KAAK,IAAI,KAAK,IAAIA,aAAamC,YAAY,AAAD,MAAO,QAAQV,+BAA+B,KAAK,IAAIA,6BAA6B;QACpNb,UAAUd,MAAMc,QAAQ;IAC5B;IACA,MAAMwB,4BAA4BC,IAAAA,6BAAa,EAAC5B,OAAMC,MAAM,CAAC,OAAOJ;IACpE,IAAIgC;IACJ,MAAMC,gBAAgBC,IAAAA,qDAA+B,EAAC;QAClDpC;QACAqC,sBAAsB,AAAC1C,CAAAA,oCAAoCqC,0BAA0Bf,OAAO,AAAD,MAAO,QAAQtB,sCAAsC,KAAK,IAAI,KAAK,IAAIA,kCAAkC2C,gBAAgB;QACpNhB;QACAQ,cAAc,AAACI,CAAAA,8BAA8BtC,iBAAiB,QAAQA,iBAAiB,KAAK,IAAI,KAAK,IAAIA,aAAamC,YAAY,AAAD,MAAO,QAAQG,gCAAgC,KAAK,IAAIA,8BAA8B;IAC3N,GAAG/B;IACH,kEAAkE;IAClE,MAAMoC,uBAAuBlC,OAAMC,MAAM,CAACgB;IAC1C,IAAIiB,qBAAqBtB,OAAO,KAAKK,mBAAmB;QACpDiB,qBAAqBtB,OAAO,GAAGK;IACnC;IACA,MAAMkB,gBAAgBP,IAAAA,6BAAa,EAACvC,MAAM8C,aAAa,EAAEf,WAAWU;IACpE,MAAMM,oBAAoBpC,OAAMC,MAAM,CAAC;IACvCoC,IAAAA,0BAAmB,EAAC3C,eAAe;QAC/B,IAAIJ;QACJ,OAAO;YACHgD,UAAU3B,KAAK,EAAE4B,WAAW,MAAM,EAAEC,QAAQ;gBACxCJ,kBAAkBxB,OAAO,GAAG4B,aAAa,QAAQA,aAAa,KAAK,IAAIA,WAAW;gBAClF,IAAIb,0BAA0Bf,OAAO,EAAE;oBACnC,IAAItB;oBACJ,MAAM2C,mBAAmBN,0BAA0Bf,OAAO,CAACqB,gBAAgB,CAACrB,OAAO;oBACnF,MAAM6B,YAAYR,oBAAoB,AAACA,CAAAA,qBAAqB,QAAQA,qBAAqB,KAAK,IAAI,KAAK,IAAIA,iBAAiBpB,MAAM,AAAD,IAAK,IAAIoB,gBAAgB,CAACS,KAAKC,GAAG,CAACV,iBAAiBpB,MAAM,GAAG,GAAG,GAAG,GAAG;oBACvMc,0BAA0Bf,OAAO,CAACgC,eAAe,CAACjC;oBAClDkC,IAAAA,8BAAmB,EAAC;wBAChBlC;wBACAmC,WAAW,AAACxD,CAAAA,oCAAoCqC,0BAA0Bf,OAAO,AAAD,MAAO,QAAQtB,sCAAsC,KAAK,IAAI,KAAK,IAAIA,kCAAkCyD,SAAS;wBAClMN;wBACAN;wBACAxC;wBACAC;wBACA2C;oBACJ;gBACJ;YACJ;YACAd,cAAc,AAACnC,CAAAA,oCAAoCqC,0BAA0Bf,OAAO,AAAD,MAAO,QAAQtB,sCAAsC,KAAK,IAAI,KAAK,IAAIA,kCAAkCmC,YAAY;YACxMR,mBAAmBiB;QACvB;IACJ,GAAG;QACCvC;QACAwC;QACAvC;QACA+B;KACH;IACD,MAAMqB,sBAAsB,CAACrC;QACzB,IAAIyB,kBAAkBxB,OAAO,EAAE;YAC3BwB,kBAAkBxB,OAAO,CAACD;QAC9B;IACJ;IACA,IAAIsC;IACJ,MAAMC,mBAAmBC,IAAAA,uCAAuB,EAAC;QAC7C,GAAG9D,KAAK;QACRmC,aAAa,AAACyB,CAAAA,sBAAsB5D,MAAMmC,WAAW,AAAD,MAAO,QAAQyB,wBAAwB,KAAK,IAAIA,sBAAsBxC;QAC1HQ;QACAC;QACAC;QACAgB;QACA1C,oBAAoBF;QACpBM,0BAA0B8B;QAC1ByB,wBAAwBJ;IAC5B;IACA,MAAMK,gBAAgBC,IAAAA,8BAAc,EAACJ,iBAAiBK,qBAAqB,EAAEtC,mBAAmB5B,MAAMc,QAAQ,EAAEd,MAAMgB,QAAQ;IAC9H,IAAIP,oBAAoBuD,cAAc/C,eAAe,KAAKA,iBAAiB;QACvE;wFACgF,GAAGC,mBAAmB8C,cAAc/C,eAAe;IACvI;IACA,IAAIX,SAAS,cAAc;QACvBI,oBAAoBsD,cAAcG,UAAU;IAChD,OAAO;QACHzD,oBAAoBsD,cAAcI,WAAW;IACjD;IACA,IAAI,CAACpE,MAAMmC,WAAW,EAAE;QACpB,6BAA6B;QAC7BxB,OAAM0D,QAAQ,CAACC,GAAG,CAACT,iBAAiBU,mBAAmB,EAAE,CAACC,OAAOlD;YAC7D,IAAI,WAAW,GAAGX,OAAM8D,cAAc,CAACD,QAAQ;gBAC3CX,iBAAiBU,mBAAmB,CAACjD,MAAM,GAAG,WAAW,GAAGX,OAAM+D,aAAa,CAACF,MAAMG,IAAI,EAAE;oBACxF,GAAGH,MAAMxE,KAAK;oBACd4E,KAAKJ,MAAMI,GAAG;oBACdC,KAAK,CAACC;wBACF,IAAIN,MAAMO,cAAc,CAAC,QAAQ;4BAC7B,wEAAwE;4BACxE,+DAA+D;4BAC/D,MAAMC,WAAWR,UAAU,QAAQA,UAAU,KAAK,IAAI,KAAK,IAAIA,MAAMK,GAAG;4BACxE,IAAI,OAAOG,aAAa,YAAY;gCAChCA,SAASF;4BACb,OAAO,IAAIE,UAAU;gCACjBA,SAASzD,OAAO,GAAGuD;4BACvB;wBACJ;wBACA,wCAAwC;wBACxCd,cAAciB,gBAAgB,CAAC3D,OAAOwD;oBAC1C;gBACJ;YACJ;QACJ;IACJ;IACA,OAAO;QACH,GAAGjB,gBAAgB;QACnBqB,YAAY;YACR,GAAGrB,iBAAiBqB,UAAU;YAC9BC,WAAW;QACf;QACAA,WAAWC,oBAAI,CAACC,MAAM,CAACrF,MAAMmF,SAAS,EAAE;YACpCG,cAAc;gBACVT,KAAK/B;YACT;YACAyC,aAAa;QACjB;IACJ;AACJ"}

package/lib-commonjs/hooks/useDynamicPagination.js

@@ -0,0 +1,131 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "useDynamicVirtualizerPagination", {
+    enumerable: true,
+    get: function() {
+        return useDynamicVirtualizerPagination;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const useDynamicVirtualizerPagination = (virtualizerProps, paginationEnabled = true)=>{
+    const { axis = 'vertical', currentIndex, progressiveItemSizes, virtualizerLength } = virtualizerProps;
+    const timeoutRef = (0, _react.useRef)(null);
+    const lastScrollPos = (0, _react.useRef)(-1);
+    const lastIndexScrolled = (0, _react.useRef)(-1);
+    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
+   *
+   * Users/Virtualizer-Hooks must pass in a cumulative array of sizes
+   * This prevents the need to recalculate and ensures size arrays are synced externally
+   */ const onScrollEnd = _react.useCallback(()=>{
+        if (!scrollContainer.current || !paginationEnabled || !(progressiveItemSizes === null || progressiveItemSizes === void 0 ? void 0 : progressiveItemSizes.current)) {
+            // No container found
+            return;
+        }
+        const currentScrollPos = Math.round(axis === 'vertical' ? scrollContainer.current.scrollTop : scrollContainer.current.scrollLeft);
+        let closestItemPos = 0;
+        let closestItem = 0;
+        const endItem = Math.min(currentIndex + virtualizerLength, progressiveItemSizes.current.length);
+        for(let i = currentIndex; i < endItem - 1; i++){
+            if (currentScrollPos <= progressiveItemSizes.current[i + 1] && currentScrollPos >= progressiveItemSizes.current[i]) {
+                // Found our in between position
+                const distanceToPrev = Math.abs(currentScrollPos - progressiveItemSizes.current[i]);
+                const distanceToNext = Math.abs(progressiveItemSizes.current[i + 1] - currentScrollPos);
+                if (distanceToPrev < distanceToNext) {
+                    closestItem = i;
+                } else {
+                    closestItem = i + 1;
+                }
+                break;
+            }
+        }
+        let nextItem;
+        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;
+            // This will also handle a case where we scrolled to the exact correct position (noop)
+            const isSecondaryScroll = Math.round(lastScrollPos.current - currentScrollPos) === 0;
+            const posMod = isSecondaryScroll ? 0 : nextTarget;
+            nextItem = closestItem + posMod;
+        } else {
+            // Pagination for anything else can just jump to the closest!
+            nextItem = closestItem;
+        }
+        // Safeguard nextItem
+        nextItem = Math.min(Math.max(0, nextItem), progressiveItemSizes.current.length);
+        closestItemPos = progressiveItemSizes.current[nextItem];
+        if (axis === 'vertical') {
+            scrollContainer.current.scrollTo({
+                top: closestItemPos,
+                behavior: 'smooth'
+            });
+        } else {
+            scrollContainer.current.scrollTo({
+                left: closestItemPos,
+                behavior: 'smooth'
+            });
+        }
+        lastScrollPos.current = progressiveItemSizes.current[nextItem];
+        lastIndexScrolled.current = nextItem;
+    }, [
+        paginationEnabled,
+        currentIndex,
+        scrollContainer,
+        virtualizerLength,
+        axis,
+        progressiveItemSizes
+    ]);
+    /**
+   * 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/useDynamicPagination.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["useDynamicPagination.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 dynamic so we require a progressive sizing array (passed in from Dynamic virtualizer hooks)\n * On short scrolls, we will go at minimum to the next/previous item so that arrow pagination works\n * All VirtualizerDynamicPaginationProps can be grabbed from dynamic Virtualizer hooks externally and passed in\n */ export const useDynamicVirtualizerPagination = (virtualizerProps, paginationEnabled = true)=>{\n    const { axis = 'vertical', currentIndex, progressiveItemSizes, virtualizerLength } = virtualizerProps;\n    const timeoutRef = useRef(null);\n    const lastScrollPos = useRef(-1);\n    const lastIndexScrolled = useRef(-1);\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   *\n   * Users/Virtualizer-Hooks must pass in a cumulative array of sizes\n   * This prevents the need to recalculate and ensures size arrays are synced externally\n   */ const onScrollEnd = React.useCallback(()=>{\n        if (!scrollContainer.current || !paginationEnabled || !(progressiveItemSizes === null || progressiveItemSizes === void 0 ? void 0 : progressiveItemSizes.current)) {\n            // No container found\n            return;\n        }\n        const currentScrollPos = Math.round(axis === 'vertical' ? scrollContainer.current.scrollTop : scrollContainer.current.scrollLeft);\n        let closestItemPos = 0;\n        let closestItem = 0;\n        const endItem = Math.min(currentIndex + virtualizerLength, progressiveItemSizes.current.length);\n        for(let i = currentIndex; i < endItem - 1; i++){\n            if (currentScrollPos <= progressiveItemSizes.current[i + 1] && currentScrollPos >= progressiveItemSizes.current[i]) {\n                // Found our in between position\n                const distanceToPrev = Math.abs(currentScrollPos - progressiveItemSizes.current[i]);\n                const distanceToNext = Math.abs(progressiveItemSizes.current[i + 1] - currentScrollPos);\n                if (distanceToPrev < distanceToNext) {\n                    closestItem = i;\n                } else {\n                    closestItem = i + 1;\n                }\n                break;\n            }\n        }\n        let nextItem;\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            // This will also handle a case where we scrolled to the exact correct position (noop)\n            const isSecondaryScroll = Math.round(lastScrollPos.current - currentScrollPos) === 0;\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        // Safeguard nextItem\n        nextItem = Math.min(Math.max(0, nextItem), progressiveItemSizes.current.length);\n        closestItemPos = progressiveItemSizes.current[nextItem];\n        if (axis === 'vertical') {\n            scrollContainer.current.scrollTo({\n                top: closestItemPos,\n                behavior: 'smooth'\n            });\n        } else {\n            scrollContainer.current.scrollTo({\n                left: closestItemPos,\n                behavior: 'smooth'\n            });\n        }\n        lastScrollPos.current = progressiveItemSizes.current[nextItem];\n        lastIndexScrolled.current = nextItem;\n    }, [\n        paginationEnabled,\n        currentIndex,\n        scrollContainer,\n        virtualizerLength,\n        axis,\n        progressiveItemSizes\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":["useDynamicVirtualizerPagination","virtualizerProps","paginationEnabled","axis","currentIndex","progressiveItemSizes","virtualizerLength","timeoutRef","useRef","lastScrollPos","lastIndexScrolled","scrollContainer","React","clearListeners","current","removeEventListener","onScroll","clearTimeout","useEffect","onScrollEnd","useCallback","currentScrollPos","Math","round","scrollTop","scrollLeft","closestItemPos","closestItem","endItem","min","length","i","distanceToPrev","abs","distanceToNext","nextItem","nextTarget","isSecondaryScroll","posMod","max","scrollTo","top","behavior","left","event","setTimeout","paginationRef","instance","addEventListener"],"mappings":"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"}

package/lib-commonjs/hooks/useMeasureList.js

@@ -24,17 +24,30 @@ function useMeasureList(currentIndex, refLength, totalLength, defaultItemSize) {
     const heightArray = _react.useRef(new Array(totalLength).fill(defaultItemSize));
     const refArray = _react.useRef([]);
     const { targetDocument } = (0, _reactsharedcontexts.useFluent_unstable)();
+    // This lets us trigger updates when a size change occurs.
+    const sizeUpdateCount = (0, _react.useRef)(0);
     // the handler for resize observer
     const handleIndexUpdate = _react.useCallback((index)=>{
         var _refArray_current_index;
+        let isChanged = false;
         const boundClientRect = (_refArray_current_index = refArray.current[index]) === null || _refArray_current_index === void 0 ? void 0 : _refArray_current_index.getBoundingClientRect();
         const containerWidth = boundClientRect === null || boundClientRect === void 0 ? void 0 : boundClientRect.width;
+        if (containerWidth !== widthArray.current[currentIndex + index]) {
+            isChanged = true;
+        }
         widthArray.current[currentIndex + index] = containerWidth || defaultItemSize;
         const containerHeight = boundClientRect === null || boundClientRect === void 0 ? void 0 : boundClientRect.height;
+        if (containerHeight !== heightArray.current[currentIndex + index]) {
+            isChanged = true;
+        }
         heightArray.current[currentIndex + index] = containerHeight || defaultItemSize;
+        if (isChanged) {
+            sizeUpdateCount.current = sizeUpdateCount.current + 1;
+        }
     }, [
         currentIndex,
-        defaultItemSize
+        defaultItemSize,
+        sizeUpdateCount
     ]);
     const handleElementResizeCallback = (entries)=>{
         for (const entry of entries){
@@ -96,7 +109,8 @@ function useMeasureList(currentIndex, refLength, totalLength, defaultItemSize) {
         widthArray,
         heightArray,
         createIndexedRef,
-        refArray
+        refArray,
+        sizeUpdateCount: sizeUpdateCount.current
     };
 }
 function createResizeObserverFromDocument(targetDocument, callback) {

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

@@ -1 +1 @@
-{"version":3,"sources":["useMeasureList.js"],"sourcesContent":["import * as React from 'react';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\n/**\n * Provides a way of automating size in the virtualizer\n * Returns\n * `width` - element width ref (0 by default),\n * `height` - element height ref (0 by default),\n * `measureElementRef` - a ref function to be passed as `ref` to the element you want to measure\n */ export function useMeasureList(currentIndex, refLength, totalLength, defaultItemSize) {\n    const widthArray = React.useRef(new Array(totalLength).fill(defaultItemSize));\n    const heightArray = React.useRef(new Array(totalLength).fill(defaultItemSize));\n    const refArray = React.useRef([]);\n    const { targetDocument } = useFluent();\n    // the handler for resize observer\n    const handleIndexUpdate = React.useCallback((index)=>{\n        var _refArray_current_index;\n        const boundClientRect = (_refArray_current_index = refArray.current[index]) === null || _refArray_current_index === void 0 ? void 0 : _refArray_current_index.getBoundingClientRect();\n        const containerWidth = boundClientRect === null || boundClientRect === void 0 ? void 0 : boundClientRect.width;\n        widthArray.current[currentIndex + index] = containerWidth || defaultItemSize;\n        const containerHeight = boundClientRect === null || boundClientRect === void 0 ? void 0 : boundClientRect.height;\n        heightArray.current[currentIndex + index] = containerHeight || defaultItemSize;\n    }, [\n        currentIndex,\n        defaultItemSize\n    ]);\n    const handleElementResizeCallback = (entries)=>{\n        for (const entry of entries){\n            const target = entry.target;\n            // Call the elements own resize handler (indexed)\n            target.handleResize();\n        }\n    };\n    React.useEffect(()=>{\n        widthArray.current = new Array(totalLength).fill(defaultItemSize);\n        heightArray.current = new Array(totalLength).fill(defaultItemSize);\n    }, [\n        defaultItemSize,\n        totalLength\n    ]);\n    // Keep the reference of ResizeObserver as a ref, as it should live through renders\n    const resizeObserver = React.useRef(createResizeObserverFromDocument(targetDocument, handleElementResizeCallback));\n    /* createIndexedRef provides a dynamic function to create an undefined number of refs at render time\n   * these refs then provide an indexed callback via attaching 'handleResize' to the element itself\n   * this function is then called on resize by handleElementResize and relies on indexing\n   * to track continuous sizes throughout renders while releasing all virtualized element refs each render cycle.\n   */ const createIndexedRef = React.useCallback((index)=>{\n        const measureElementRef = (el)=>{\n            if (!targetDocument || !resizeObserver.current) {\n                return;\n            }\n            if (el) {\n                el.handleResize = ()=>{\n                    handleIndexUpdate(index);\n                };\n            }\n            // cleanup previous container\n            if (refArray.current[index] !== undefined && refArray.current[index] !== null) {\n                resizeObserver.current.unobserve(refArray.current[index]);\n            }\n            refArray.current[index] = undefined;\n            if (el) {\n                refArray.current[index] = el;\n                resizeObserver.current.observe(el);\n                handleIndexUpdate(index);\n            }\n        };\n        return measureElementRef;\n    }, [\n        handleIndexUpdate,\n        resizeObserver,\n        targetDocument\n    ]);\n    React.useEffect(()=>{\n        const _resizeObserver = resizeObserver;\n        return ()=>{\n            var _resizeObserver_current;\n            return (_resizeObserver_current = _resizeObserver.current) === null || _resizeObserver_current === void 0 ? void 0 : _resizeObserver_current.disconnect();\n        };\n    }, [\n        resizeObserver\n    ]);\n    return {\n        widthArray,\n        heightArray,\n        createIndexedRef,\n        refArray\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":["useMeasureList","createResizeObserverFromDocument","currentIndex","refLength","totalLength","defaultItemSize","widthArray","React","useRef","Array","fill","heightArray","refArray","targetDocument","useFluent","handleIndexUpdate","useCallback","index","_refArray_current_index","boundClientRect","current","getBoundingClientRect","containerWidth","width","containerHeight","height","handleElementResizeCallback","entries","entry","target","handleResize","useEffect","resizeObserver","createIndexedRef","measureElementRef","el","undefined","unobserve","observe","_resizeObserver","_resizeObserver_current","disconnect","callback","_targetDocument_defaultView","defaultView","ResizeObserver"],"mappings":"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"}
+{"version":3,"sources":["useMeasureList.js"],"sourcesContent":["import * as React from 'react';\nimport { useRef } from 'react';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\n/**\n * Provides a way of automating size in the virtualizer\n * Returns\n * `width` - element width ref (0 by default),\n * `height` - element height ref (0 by default),\n * `measureElementRef` - a ref function to be passed as `ref` to the element you want to measure\n */ export function useMeasureList(currentIndex, refLength, totalLength, defaultItemSize) {\n    const widthArray = React.useRef(new Array(totalLength).fill(defaultItemSize));\n    const heightArray = React.useRef(new Array(totalLength).fill(defaultItemSize));\n    const refArray = React.useRef([]);\n    const { targetDocument } = useFluent();\n    // This lets us trigger updates when a size change occurs.\n    const sizeUpdateCount = useRef(0);\n    // the handler for resize observer\n    const handleIndexUpdate = React.useCallback((index)=>{\n        var _refArray_current_index;\n        let isChanged = false;\n        const boundClientRect = (_refArray_current_index = refArray.current[index]) === null || _refArray_current_index === void 0 ? void 0 : _refArray_current_index.getBoundingClientRect();\n        const containerWidth = boundClientRect === null || boundClientRect === void 0 ? void 0 : boundClientRect.width;\n        if (containerWidth !== widthArray.current[currentIndex + index]) {\n            isChanged = true;\n        }\n        widthArray.current[currentIndex + index] = containerWidth || defaultItemSize;\n        const containerHeight = boundClientRect === null || boundClientRect === void 0 ? void 0 : boundClientRect.height;\n        if (containerHeight !== heightArray.current[currentIndex + index]) {\n            isChanged = true;\n        }\n        heightArray.current[currentIndex + index] = containerHeight || defaultItemSize;\n        if (isChanged) {\n            sizeUpdateCount.current = sizeUpdateCount.current + 1;\n        }\n    }, [\n        currentIndex,\n        defaultItemSize,\n        sizeUpdateCount\n    ]);\n    const handleElementResizeCallback = (entries)=>{\n        for (const entry of entries){\n            const target = entry.target;\n            // Call the elements own resize handler (indexed)\n            target.handleResize();\n        }\n    };\n    React.useEffect(()=>{\n        widthArray.current = new Array(totalLength).fill(defaultItemSize);\n        heightArray.current = new Array(totalLength).fill(defaultItemSize);\n    }, [\n        defaultItemSize,\n        totalLength\n    ]);\n    // Keep the reference of ResizeObserver as a ref, as it should live through renders\n    const resizeObserver = React.useRef(createResizeObserverFromDocument(targetDocument, handleElementResizeCallback));\n    /* createIndexedRef provides a dynamic function to create an undefined number of refs at render time\n   * these refs then provide an indexed callback via attaching 'handleResize' to the element itself\n   * this function is then called on resize by handleElementResize and relies on indexing\n   * to track continuous sizes throughout renders while releasing all virtualized element refs each render cycle.\n   */ const createIndexedRef = React.useCallback((index)=>{\n        const measureElementRef = (el)=>{\n            if (!targetDocument || !resizeObserver.current) {\n                return;\n            }\n            if (el) {\n                el.handleResize = ()=>{\n                    handleIndexUpdate(index);\n                };\n            }\n            // cleanup previous container\n            if (refArray.current[index] !== undefined && refArray.current[index] !== null) {\n                resizeObserver.current.unobserve(refArray.current[index]);\n            }\n            refArray.current[index] = undefined;\n            if (el) {\n                refArray.current[index] = el;\n                resizeObserver.current.observe(el);\n                handleIndexUpdate(index);\n            }\n        };\n        return measureElementRef;\n    }, [\n        handleIndexUpdate,\n        resizeObserver,\n        targetDocument\n    ]);\n    React.useEffect(()=>{\n        const _resizeObserver = resizeObserver;\n        return ()=>{\n            var _resizeObserver_current;\n            return (_resizeObserver_current = _resizeObserver.current) === null || _resizeObserver_current === void 0 ? void 0 : _resizeObserver_current.disconnect();\n        };\n    }, [\n        resizeObserver\n    ]);\n    return {\n        widthArray,\n        heightArray,\n        createIndexedRef,\n        refArray,\n        sizeUpdateCount: sizeUpdateCount.current\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":["useMeasureList","createResizeObserverFromDocument","currentIndex","refLength","totalLength","defaultItemSize","widthArray","React","useRef","Array","fill","heightArray","refArray","targetDocument","useFluent","sizeUpdateCount","handleIndexUpdate","useCallback","index","_refArray_current_index","isChanged","boundClientRect","current","getBoundingClientRect","containerWidth","width","containerHeight","height","handleElementResizeCallback","entries","entry","target","handleResize","useEffect","resizeObserver","createIndexedRef","measureElementRef","el","undefined","unobserve","observe","_resizeObserver","_resizeObserver_current","disconnect","callback","_targetDocument_defaultView","defaultView","ResizeObserver"],"mappings":"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"}