@fluentui/react-virtualizer 9.0.0-alpha.8 → 9.0.0-alpha.81

package/lib/hooks/useIntersectionObserver.js

@@ -1,9 +1,32 @@
 import * as React from 'react';
 import { useIsomorphicLayoutEffect } from '@fluentui/react-utilities';
-const {
-  useState,
-  useRef
-} = React;
+import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
+const { useCallback, useState, useRef } = React;
+import { useMutationObserver } from './useMutationObserver';
+/**
+ * This function will take the rootMargin and flip the sides if we are in RTL based on the computed reading direction of the target element.
+ * @param ltrRootMargin the margin to be processed and flipped if required
+ * @param target target element that will have its current reading direction determined
+ * @returns the corrected rootMargin (if it was necessary to correct)
+ */ export const getRTLRootMargin = (ltrRootMargin, target, win)=>{
+    if (target && win) {
+        // get the computed dir for the target element
+        const newDir = win.getComputedStyle(target).direction;
+        // If we're in rtl reading direction, we might need to flip the margins on the left/right sides
+        if (newDir === 'rtl') {
+            let newMargin = ltrRootMargin;
+            const splitMargins = ltrRootMargin.split(' ');
+            // We only need to do this if we get four values, otherwise the sides are equal and don't require flipping.
+            if (splitMargins.length === 4) {
+                newMargin = `${splitMargins[0]} ${splitMargins[3]} ${splitMargins[2]} ${splitMargins[1]}`;
+            }
+            return newMargin;
+        } else {
+            return ltrRootMargin;
+        }
+    }
+    return ltrRootMargin;
+};
 /**
  * React hook that allows easy usage of the browser API IntersectionObserver within React
  * @param callback - A function called when the percentage of the target element is visible crosses a threshold.
@@ -12,41 +35,95 @@ const {
  * enough to trigger a callback).
  * @returns An array containing a callback to update the list of Elements the observer should listen to, a callback to
  * update the init options of the IntersectionObserver and a ref to the IntersectionObserver instance itself.
- */
-export const useIntersectionObserver = (callback, options) => {
-  // export const useIntersectionObserver = (
-  //   callback: IntersectionObserverCallback,
-  //   options?: IntersectionObserverInit,
-  // ): [
-  //   Dispatch<SetStateAction<Element[] | undefined>>,
-  //   Dispatch<SetStateAction<IntersectionObserverInit | undefined>>,
-  //   MutableRefObject<IntersectionObserver | undefined>,
-  // ] => {
-  const observer = useRef();
-  const [observerList, setObserverList] = useState();
-  const [observerInit, setObserverInit] = useState(options);
-  // Observer elements in passed in list and clean up previous list
-  // This effect is only triggered when observerList is updated
-  useIsomorphicLayoutEffect(() => {
-    observer.current = new IntersectionObserver(callback, observerInit);
-    // If we have an instance of IO and a list with elements, observer the elements
-    if (observer.current && observerList && observerList.length > 0) {
-      observerList.forEach(element => {
-        var _a;
-        (_a = observer.current) === null || _a === void 0 ? void 0 : _a.observe(element);
-      });
-    }
-    // clean up previous elements being listened to
-    return () => {
-      if (observer.current) {
-        observer.current.disconnect();
-      }
+ */ export const useIntersectionObserver = (callback, options)=>{
+    'use no memo';
+    // TODO: exclude types from this lint rule: https://github.com/microsoft/fluentui/issues/31286
+    // eslint-disable-next-line no-restricted-globals
+    const observer = useRef();
+    const [observerList, setObserverList] = useState();
+    const { targetDocument } = useFluent();
+    const win = targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.defaultView;
+    var _options_rootMargin;
+    // set the initial init with corrected margins based on the observed root's calculated reading direction.
+    const [observerInit, setObserverInit] = useState(options && {
+        ...options,
+        rootMargin: getRTLRootMargin((_options_rootMargin = options.rootMargin) !== null && _options_rootMargin !== void 0 ? _options_rootMargin : '0px', options.root, win)
+    });
+    var _options_rootMargin1;
+    // We have to assume that any values passed in for rootMargin by the consuming app are ltr values. As such we will store the ltr value.
+    const ltrRootMargin = useRef((_options_rootMargin1 = options === null || options === void 0 ? void 0 : options.rootMargin) !== null && _options_rootMargin1 !== void 0 ? _options_rootMargin1 : '0px');
+    // Callback function to execute when mutations are observed
+    const mutationObserverCallback = useCallback((mutationList)=>{
+        for (const mutation of mutationList){
+            // Ensuring that the right attribute is being observed and that the root is within the tree of the element being mutated.
+            if (mutation.type === 'attributes' && mutation.attributeName === 'dir' && (options === null || options === void 0 ? void 0 : options.root) && mutation.target.contains(options === null || options === void 0 ? void 0 : options.root)) {
+                setObserverInit({
+                    ...observerInit,
+                    rootMargin: getRTLRootMargin(ltrRootMargin.current, observerInit === null || observerInit === void 0 ? void 0 : observerInit.root, win)
+                });
+            }
+        }
+    }, [
+        ltrRootMargin,
+        observerInit,
+        options === null || options === void 0 ? void 0 : options.root,
+        win
+    ]);
+    // Mutation observer for dir attribute changes in the document
+    useMutationObserver(targetDocument, mutationObserverCallback, {
+        attributes: true,
+        subtree: true,
+        attributeFilter: [
+            'dir'
+        ]
+    });
+    // Observer elements in passed in list and clean up previous list
+    // This effect is only triggered when observerList is updated
+    useIsomorphicLayoutEffect(()=>{
+        if (!win) {
+            return;
+        }
+        observer.current = new win.IntersectionObserver(callback, {
+            ...observerInit,
+            rootMargin: getRTLRootMargin(ltrRootMargin.current, observerInit === null || observerInit === void 0 ? void 0 : observerInit.root, win)
+        });
+        // If we have an instance of IO and a list with elements, observer the elements
+        if (observer.current && observerList && observerList.length > 0) {
+            observerList.forEach((element)=>{
+                var _observer_current;
+                (_observer_current = observer.current) === null || _observer_current === void 0 ? void 0 : _observer_current.observe(element);
+            });
+        }
+        // clean up previous elements being listened to
+        return ()=>{
+            if (observer.current) {
+                observer.current.disconnect();
+            }
+        };
+    }, [
+        observerList,
+        observerInit,
+        callback,
+        win
+    ]);
+    // Do not use internally, we need to track external settings only here
+    const setObserverInitExternal = useCallback((newInit)=>{
+        var _newInit_rootMargin;
+        // Since we know this is coming from consumers, we can store this value as LTR somewhat safely.
+        ltrRootMargin.current = (_newInit_rootMargin = newInit === null || newInit === void 0 ? void 0 : newInit.rootMargin) !== null && _newInit_rootMargin !== void 0 ? _newInit_rootMargin : '0px';
+        // Call the internal setter to update the value and ensure if our calculated direction is rtl, we flip the margin
+        setObserverInit({
+            ...newInit,
+            rootMargin: getRTLRootMargin(ltrRootMargin.current, newInit === null || newInit === void 0 ? void 0 : newInit.root, win)
+        });
+    }, [
+        ltrRootMargin,
+        setObserverInit,
+        win
+    ]);
+    return {
+        setObserverList,
+        setObserverInit: setObserverInitExternal,
+        observer
     };
-  }, [observerList, observerInit, callback]);
-  return {
-    setObserverList,
-    setObserverInit,
-    observer
-  };
 };
-//# sourceMappingURL=useIntersectionObserver.js.map

package/lib/hooks/useIntersectionObserver.js.map

@@ -1 +1 @@
-{"version":3,"mappings":"AACA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,yBAAyB,QAAQ,2BAA2B;AAErE,MAAM;EAAEC,QAAQ;EAAEC;AAAM,CAAE,GAAGH,KAAK;AAElC;;;;;;;;;AAUA,OAAO,MAAMI,uBAAuB,GAAG,CACrCC,QAAsC,EACtCC,OAAkC,KAKhC;EACF;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,MAAMC,QAAQ,GAAGJ,MAAM,EAAwB;EAC/C,MAAM,CAACK,YAAY,EAAEC,eAAe,CAAC,GAAGP,QAAQ,EAAa;EAC7D,MAAM,CAACQ,YAAY,EAAEC,eAAe,CAAC,GAAGT,QAAQ,CAAuCI,OAAO,CAAC;EAE/F;EACA;EACAL,yBAAyB,CAAC,MAAK;IAC7BM,QAAQ,CAACK,OAAO,GAAG,IAAIC,oBAAoB,CAACR,QAAQ,EAAEK,YAAY,CAAC;IAEnE;IACA,IAAIH,QAAQ,CAACK,OAAO,IAAIJ,YAAY,IAAIA,YAAY,CAACM,MAAM,GAAG,CAAC,EAAE;MAC/DN,YAAY,CAACO,OAAO,CAACC,OAAO,IAAG;;QAC7B,cAAQ,CAACJ,OAAO,0CAAEK,OAAO,CAACD,OAAO,CAAC;MACpC,CAAC,CAAC;;IAGJ;IACA,OAAO,MAAK;MACV,IAAIT,QAAQ,CAACK,OAAO,EAAE;QACpBL,QAAQ,CAACK,OAAO,CAACM,UAAU,EAAE;;IAEjC,CAAC;EACH,CAAC,EAAE,CAACV,YAAY,EAAEE,YAAY,EAAEL,QAAQ,CAAC,CAAC;EAE1C,OAAO;IAAEI,eAAe;IAAEE,eAAe;IAAEJ;EAAQ,CAAE;AACvD,CAAC","names":["React","useIsomorphicLayoutEffect","useState","useRef","useIntersectionObserver","callback","options","observer","observerList","setObserverList","observerInit","setObserverInit","current","IntersectionObserver","length","forEach","element","observe","disconnect"],"sourceRoot":"../src/","sources":["packages/react-components/react-virtualizer/src/hooks/useIntersectionObserver.ts"],"sourcesContent":["import type { Dispatch, MutableRefObject, SetStateAction } from 'react';\nimport * as React from 'react';\nimport { useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\n\nconst { useState, useRef } = React;\n\n/**\n * React hook that allows easy usage of the browser API IntersectionObserver within React\n * @param callback - A function called when the percentage of the target element is visible crosses a threshold.\n * @param options - An optional object which customizes the observer. If options isn't specified, the observer uses the\n * document's viewport as the root, with no margin, and a 0% threshold (meaning that even a one-pixel change is\n * enough to trigger a callback).\n * @returns An array containing a callback to update the list of Elements the observer should listen to, a callback to\n * update the init options of the IntersectionObserver and a ref to the IntersectionObserver instance itself.\n */\n\nexport const useIntersectionObserver = (\n  callback: IntersectionObserverCallback,\n  options?: IntersectionObserverInit,\n): {\n  setObserverList: Dispatch<SetStateAction<Element[] | undefined>>;\n  setObserverInit: Dispatch<SetStateAction<IntersectionObserverInit | undefined>>;\n  observer: MutableRefObject<IntersectionObserver | undefined>;\n} => {\n  // export const useIntersectionObserver = (\n  //   callback: IntersectionObserverCallback,\n  //   options?: IntersectionObserverInit,\n  // ): [\n  //   Dispatch<SetStateAction<Element[] | undefined>>,\n  //   Dispatch<SetStateAction<IntersectionObserverInit | undefined>>,\n  //   MutableRefObject<IntersectionObserver | undefined>,\n  // ] => {\n  const observer = useRef<IntersectionObserver>();\n  const [observerList, setObserverList] = useState<Element[]>();\n  const [observerInit, setObserverInit] = useState<IntersectionObserverInit | undefined>(options);\n\n  // Observer elements in passed in list and clean up previous list\n  // This effect is only triggered when observerList is updated\n  useIsomorphicLayoutEffect(() => {\n    observer.current = new IntersectionObserver(callback, observerInit);\n\n    // If we have an instance of IO and a list with elements, observer the elements\n    if (observer.current && observerList && observerList.length > 0) {\n      observerList.forEach(element => {\n        observer.current?.observe(element);\n      });\n    }\n\n    // clean up previous elements being listened to\n    return () => {\n      if (observer.current) {\n        observer.current.disconnect();\n      }\n    };\n  }, [observerList, observerInit, callback]);\n\n  return { setObserverList, setObserverInit, observer };\n};\n"]}
+{"version":3,"sources":["useIntersectionObserver.ts"],"sourcesContent":["import type { Dispatch, MutableRefObject, SetStateAction } from 'react';\nimport * as React from 'react';\nimport { useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\n\nconst { useCallback, useState, useRef } = React;\nimport { useMutationObserver } from './useMutationObserver';\n\n/**\n * This function will take the rootMargin and flip the sides if we are in RTL based on the computed reading direction of the target element.\n * @param ltrRootMargin the margin to be processed and flipped if required\n * @param target target element that will have its current reading direction determined\n * @returns the corrected rootMargin (if it was necessary to correct)\n */\nexport const getRTLRootMargin = (\n  ltrRootMargin: string,\n  target?: Element | Document | null | undefined,\n  win?: Window | null,\n): string => {\n  if (target && win) {\n    // get the computed dir for the target element\n    const newDir = win.getComputedStyle(target as Element).direction;\n\n    // If we're in rtl reading direction, we might need to flip the margins on the left/right sides\n    if (newDir === 'rtl') {\n      let newMargin = ltrRootMargin;\n      const splitMargins = ltrRootMargin.split(' ');\n\n      // We only need to do this if we get four values, otherwise the sides are equal and don't require flipping.\n      if (splitMargins.length === 4) {\n        newMargin = `${splitMargins[0]} ${splitMargins[3]} ${splitMargins[2]} ${splitMargins[1]}`;\n      }\n\n      return newMargin;\n    } else {\n      return ltrRootMargin;\n    }\n  }\n\n  return ltrRootMargin;\n};\n\n/**\n * React hook that allows easy usage of the browser API IntersectionObserver within React\n * @param callback - A function called when the percentage of the target element is visible crosses a threshold.\n * @param options - An optional object which customizes the observer. If options isn't specified, the observer uses the\n * document's viewport as the root, with no margin, and a 0% threshold (meaning that even a one-pixel change is\n * enough to trigger a callback).\n * @returns An array containing a callback to update the list of Elements the observer should listen to, a callback to\n * update the init options of the IntersectionObserver and a ref to the IntersectionObserver instance itself.\n */\n\nexport const useIntersectionObserver = (\n  callback: IntersectionObserverCallback,\n  options?: IntersectionObserverInit,\n): {\n  setObserverList: Dispatch<SetStateAction<Element[] | undefined>>;\n  setObserverInit: (newInit: IntersectionObserverInit | undefined) => void;\n  // TODO: exclude types from this lint rule: https://github.com/microsoft/fluentui/issues/31286\n  // eslint-disable-next-line no-restricted-globals\n  observer: MutableRefObject<IntersectionObserver | undefined>;\n} => {\n  'use no memo';\n\n  // TODO: exclude types from this lint rule: https://github.com/microsoft/fluentui/issues/31286\n  // eslint-disable-next-line no-restricted-globals\n  const observer = useRef<IntersectionObserver>();\n  const [observerList, setObserverList] = useState<Element[]>();\n  const { targetDocument } = useFluent();\n  const win = targetDocument?.defaultView;\n\n  // set the initial init with corrected margins based on the observed root's calculated reading direction.\n  const [observerInit, setObserverInit] = useState<IntersectionObserverInit | undefined>(\n    options && {\n      ...options,\n      rootMargin: getRTLRootMargin(options.rootMargin ?? '0px', options.root as Element, win),\n    },\n  );\n\n  // We have to assume that any values passed in for rootMargin by the consuming app are ltr values. As such we will store the ltr value.\n  const ltrRootMargin = useRef<string>(options?.rootMargin ?? '0px');\n\n  // Callback function to execute when mutations are observed\n  const mutationObserverCallback: MutationCallback = useCallback(\n    mutationList => {\n      for (const mutation of mutationList) {\n        // Ensuring that the right attribute is being observed and that the root is within the tree of the element being mutated.\n        if (\n          mutation.type === 'attributes' &&\n          mutation.attributeName === 'dir' &&\n          options?.root &&\n          mutation.target.contains(options?.root)\n        ) {\n          setObserverInit({\n            ...observerInit,\n            rootMargin: getRTLRootMargin(ltrRootMargin.current, observerInit?.root, win),\n          });\n        }\n      }\n    },\n    [ltrRootMargin, observerInit, options?.root, win],\n  );\n\n  // Mutation observer for dir attribute changes in the document\n  useMutationObserver(targetDocument, mutationObserverCallback, {\n    attributes: true,\n    subtree: true,\n    attributeFilter: ['dir'],\n  });\n\n  // Observer elements in passed in list and clean up previous list\n  // This effect is only triggered when observerList is updated\n  useIsomorphicLayoutEffect(() => {\n    if (!win) {\n      return;\n    }\n\n    observer.current = new win.IntersectionObserver(callback, {\n      ...observerInit,\n      rootMargin: getRTLRootMargin(ltrRootMargin.current, observerInit?.root, win),\n    });\n\n    // If we have an instance of IO and a list with elements, observer the elements\n    if (observer.current && observerList && observerList.length > 0) {\n      observerList.forEach(element => {\n        observer.current?.observe(element);\n      });\n    }\n\n    // clean up previous elements being listened to\n    return () => {\n      if (observer.current) {\n        observer.current.disconnect();\n      }\n    };\n  }, [observerList, observerInit, callback, win]);\n\n  // Do not use internally, we need to track external settings only here\n  const setObserverInitExternal = useCallback(\n    (newInit: IntersectionObserverInit | undefined) => {\n      // Since we know this is coming from consumers, we can store this value as LTR somewhat safely.\n      ltrRootMargin.current = newInit?.rootMargin ?? '0px';\n\n      // Call the internal setter to update the value and ensure if our calculated direction is rtl, we flip the margin\n      setObserverInit({\n        ...newInit,\n        rootMargin: getRTLRootMargin(ltrRootMargin.current, newInit?.root as Element, win),\n      });\n    },\n    [ltrRootMargin, setObserverInit, win],\n  );\n\n  return { setObserverList, setObserverInit: setObserverInitExternal, observer };\n};\n"],"names":["React","useIsomorphicLayoutEffect","useFluent_unstable","useFluent","useCallback","useState","useRef","useMutationObserver","getRTLRootMargin","ltrRootMargin","target","win","newDir","getComputedStyle","direction","newMargin","splitMargins","split","length","useIntersectionObserver","callback","options","observer","observerList","setObserverList","targetDocument","defaultView","observerInit","setObserverInit","rootMargin","root","mutationObserverCallback","mutationList","mutation","type","attributeName","contains","current","attributes","subtree","attributeFilter","IntersectionObserver","forEach","element","observe","disconnect","setObserverInitExternal","newInit"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

package/lib/hooks/useMeasureList.js

@@ -0,0 +1,116 @@
+import * as React from 'react';
+import { useRef } from 'react';
+import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
+/**
+ * Provides a way of automating size in the virtualizer
+ * Returns
+ * `width` - element width ref (0 by default),
+ * `height` - element height ref (0 by default),
+ * `measureElementRef` - a ref function to be passed as `ref` to the element you want to measure
+ */ export function useMeasureList(currentIndex, refLength, totalLength, defaultItemSize) {
+    const widthArray = React.useRef(new Array(totalLength).fill(defaultItemSize));
+    const heightArray = React.useRef(new Array(totalLength).fill(defaultItemSize));
+    const refArray = React.useRef([]);
+    const { targetDocument } = useFluent();
+    // This lets us trigger updates when a size change occurs.
+    const sizeUpdateCount = 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,
+        sizeUpdateCount
+    ]);
+    const handleElementResizeCallback = (entries)=>{
+        for (const entry of entries){
+            const target = entry.target;
+            // Call the elements own resize handler (indexed)
+            target.handleResize();
+        }
+    };
+    React.useEffect(()=>{
+        widthArray.current = new Array(totalLength).fill(defaultItemSize);
+        heightArray.current = new Array(totalLength).fill(defaultItemSize);
+    }, [
+        defaultItemSize,
+        totalLength
+    ]);
+    // Keep the reference of ResizeObserver as a ref, as it should live through renders
+    const resizeObserver = React.useRef(createResizeObserverFromDocument(targetDocument, handleElementResizeCallback));
+    /* createIndexedRef provides a dynamic function to create an undefined number of refs at render time
+   * these refs then provide an indexed callback via attaching 'handleResize' to the element itself
+   * this function is then called on resize by handleElementResize and relies on indexing
+   * to track continuous sizes throughout renders while releasing all virtualized element refs each render cycle.
+   */ const createIndexedRef = React.useCallback((index)=>{
+        const measureElementRef = (el)=>{
+            if (!targetDocument || !resizeObserver.current) {
+                return;
+            }
+            if (el) {
+                el.handleResize = ()=>{
+                    handleIndexUpdate(index);
+                };
+            }
+            // cleanup previous container
+            if (refArray.current[index] !== undefined && refArray.current[index] !== null) {
+                resizeObserver.current.unobserve(refArray.current[index]);
+            }
+            refArray.current[index] = undefined;
+            if (el) {
+                refArray.current[index] = el;
+                resizeObserver.current.observe(el);
+                handleIndexUpdate(index);
+            }
+        };
+        return measureElementRef;
+    }, [
+        handleIndexUpdate,
+        resizeObserver,
+        targetDocument
+    ]);
+    React.useEffect(()=>{
+        const _resizeObserver = resizeObserver;
+        return ()=>{
+            var _resizeObserver_current;
+            return (_resizeObserver_current = _resizeObserver.current) === null || _resizeObserver_current === void 0 ? void 0 : _resizeObserver_current.disconnect();
+        };
+    }, [
+        resizeObserver
+    ]);
+    return {
+        widthArray,
+        heightArray,
+        createIndexedRef,
+        refArray,
+        sizeUpdateCount: sizeUpdateCount.current
+    };
+}
+/**
+ * FIXME - TS 3.8/3.9 don't have ResizeObserver types by default, move this to a shared utility once we bump the minbar
+ * A utility method that creates a ResizeObserver from a target document
+ * @param targetDocument - document to use to create the ResizeObserver
+ * @param callback  - https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver/ResizeObserver#callback
+ * @returns a ResizeObserver instance or null if the global does not exist on the document
+ */ export function createResizeObserverFromDocument(targetDocument, callback) {
+    var _targetDocument_defaultView;
+    if (!(targetDocument === null || targetDocument === void 0 ? void 0 : (_targetDocument_defaultView = targetDocument.defaultView) === null || _targetDocument_defaultView === void 0 ? void 0 : _targetDocument_defaultView.ResizeObserver)) {
+        return null;
+    }
+    return new targetDocument.defaultView.ResizeObserver(callback);
+}

package/lib/hooks/useMeasureList.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["useMeasureList.ts"],"sourcesContent":["import * as React from 'react';\nimport { useRef } from 'react';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\n\nexport interface IndexedResizeCallbackElement {\n  handleResize: () => void;\n}\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 */\nexport function useMeasureList<\n  TElement extends HTMLElement & IndexedResizeCallbackElement = HTMLElement & IndexedResizeCallbackElement,\n>(currentIndex: number, refLength: number, totalLength: number, defaultItemSize: number) {\n  const widthArray = React.useRef(new Array(totalLength).fill(defaultItemSize));\n  const heightArray = React.useRef(new Array(totalLength).fill(defaultItemSize));\n\n  const refArray = React.useRef<Array<TElement | undefined | null>>([]);\n  const { targetDocument } = useFluent();\n\n  // This lets us trigger updates when a size change occurs.\n  const sizeUpdateCount = useRef(0);\n\n  // the handler for resize observer\n  const handleIndexUpdate = React.useCallback(\n    (index: number) => {\n      let isChanged = false;\n      const boundClientRect = refArray.current[index]?.getBoundingClientRect();\n      const containerWidth = boundClientRect?.width;\n      if (containerWidth !== widthArray.current[currentIndex + index]) {\n        isChanged = true;\n      }\n      widthArray.current[currentIndex + index] = containerWidth || defaultItemSize;\n\n      const containerHeight = boundClientRect?.height;\n\n      if (containerHeight !== heightArray.current[currentIndex + index]) {\n        isChanged = true;\n      }\n      heightArray.current[currentIndex + index] = containerHeight || defaultItemSize;\n\n      if (isChanged) {\n        sizeUpdateCount.current = sizeUpdateCount.current + 1;\n      }\n    },\n    [currentIndex, defaultItemSize, sizeUpdateCount],\n  );\n\n  const handleElementResizeCallback = (entries: ResizeObserverEntry[]) => {\n    for (const entry of entries) {\n      const target = entry.target as TElement;\n      // Call the elements own resize handler (indexed)\n      target.handleResize();\n    }\n  };\n\n  React.useEffect(() => {\n    widthArray.current = new Array(totalLength).fill(defaultItemSize);\n    heightArray.current = new Array(totalLength).fill(defaultItemSize);\n  }, [defaultItemSize, 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\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   */\n  const createIndexedRef = React.useCallback(\n    (index: number) => {\n      const measureElementRef = (el: TElement) => {\n        if (!targetDocument || !resizeObserver.current) {\n          return;\n        }\n\n        if (el) {\n          el.handleResize = () => {\n            handleIndexUpdate(index);\n          };\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\n        refArray.current[index] = undefined;\n        if (el) {\n          refArray.current[index] = el;\n          resizeObserver.current.observe(el);\n          handleIndexUpdate(index);\n        }\n      };\n\n      return measureElementRef;\n    },\n    [handleIndexUpdate, resizeObserver, targetDocument],\n  );\n\n  React.useEffect(() => {\n    const _resizeObserver = resizeObserver;\n    return () => _resizeObserver.current?.disconnect();\n  }, [resizeObserver]);\n\n  return { widthArray, heightArray, createIndexedRef, refArray, 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 */\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","useRef","useFluent_unstable","useFluent","useMeasureList","currentIndex","refLength","totalLength","defaultItemSize","widthArray","Array","fill","heightArray","refArray","targetDocument","sizeUpdateCount","handleIndexUpdate","useCallback","index","isChanged","boundClientRect","current","getBoundingClientRect","containerWidth","width","containerHeight","height","handleElementResizeCallback","entries","entry","target","handleResize","useEffect","resizeObserver","createResizeObserverFromDocument","createIndexedRef","measureElementRef","el","undefined","unobserve","observe","_resizeObserver","disconnect","callback","defaultView","ResizeObserver"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

package/lib/hooks/useMutationObserver.js

@@ -0,0 +1,38 @@
+import * as React from 'react';
+import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
+const { useRef, useEffect } = React;
+export const useMutationObserver = (target, callback, options)=>{
+    'use no memo';
+    // TODO: exclude types from this lint rule: https://github.com/microsoft/fluentui/issues/31286
+    // eslint-disable-next-line no-restricted-globals
+    const observer = useRef();
+    const { targetDocument } = useFluent();
+    const win = targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.defaultView;
+    useEffect(()=>{
+        if (!win) {
+            return;
+        }
+        // Create an observer instance linked to the callback function
+        observer.current = new win.MutationObserver(callback);
+    }, [
+        callback,
+        win
+    ]);
+    useEffect(()=>{
+        if (target) {
+            var // Start observing the target node for configured mutations
+            _observer_current;
+            (_observer_current = observer.current) === null || _observer_current === void 0 ? void 0 : _observer_current.observe(target, options);
+        }
+        return ()=>{
+            var _observer_current;
+            (_observer_current = observer.current) === null || _observer_current === void 0 ? void 0 : _observer_current.disconnect();
+        };
+    }, [
+        target,
+        options
+    ]);
+    return {
+        observer
+    };
+};

package/lib/hooks/useMutationObserver.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["useMutationObserver.ts"],"sourcesContent":["import type { MutableRefObject } from 'react';\nimport * as React from 'react';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\n\nconst { useRef, useEffect } = React;\n\nexport const useMutationObserver = (\n  target: Element | Document | undefined,\n  callback: MutationCallback,\n  options?: MutationObserverInit,\n): {\n  observer: MutableRefObject<MutationObserver | undefined>; // eslint-disable-line no-restricted-globals\n} => {\n  'use no memo';\n\n  // TODO: exclude types from this lint rule: https://github.com/microsoft/fluentui/issues/31286\n  // eslint-disable-next-line no-restricted-globals\n  const observer = useRef<MutationObserver>();\n  const { targetDocument } = useFluent();\n  const win = targetDocument?.defaultView;\n\n  useEffect(() => {\n    if (!win) {\n      return;\n    }\n    // Create an observer instance linked to the callback function\n    observer.current = new win.MutationObserver(callback);\n  }, [callback, win]);\n\n  useEffect(() => {\n    if (target) {\n      // Start observing the target node for configured mutations\n      observer.current?.observe(target, options);\n    }\n\n    return () => {\n      observer.current?.disconnect();\n    };\n  }, [target, options]);\n\n  return { observer };\n};\n"],"names":["React","useFluent_unstable","useFluent","useRef","useEffect","useMutationObserver","target","callback","options","observer","targetDocument","win","defaultView","current","MutationObserver","observe","disconnect"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AACA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,sBAAsBC,SAAS,QAAQ,kCAAkC;AAElF,MAAM,EAAEC,MAAM,EAAEC,SAAS,EAAE,GAAGJ;AAE9B,OAAO,MAAMK,sBAAsB,CACjCC,QACAC,UACAC;IAIA;IAEA,8FAA8F;IAC9F,iDAAiD;IACjD,MAAMC,WAAWN;IACjB,MAAM,EAAEO,cAAc,EAAE,GAAGR;IAC3B,MAAMS,MAAMD,2BAAAA,qCAAAA,eAAgBE,WAAW;IAEvCR,UAAU;QACR,IAAI,CAACO,KAAK;YACR;QACF;QACA,8DAA8D;QAC9DF,SAASI,OAAO,GAAG,IAAIF,IAAIG,gBAAgB,CAACP;IAC9C,GAAG;QAACA;QAAUI;KAAI;IAElBP,UAAU;QACR,IAAIE,QAAQ;gBACV,2DAA2D;YAC3DG;aAAAA,oBAAAA,SAASI,OAAO,cAAhBJ,wCAAAA,kBAAkBM,OAAO,CAACT,QAAQE;QACpC;QAEA,OAAO;gBACLC;aAAAA,oBAAAA,SAASI,OAAO,cAAhBJ,wCAAAA,kBAAkBO,UAAU;QAC9B;IACF,GAAG;QAACV;QAAQE;KAAQ;IAEpB,OAAO;QAAEC;IAAS;AACpB,EAAE"}

package/lib/hooks/useResizeObserverRef.js

@@ -0,0 +1,50 @@
+import * as React from 'react';
+import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
+import { debounce } from '../utilities/debounce';
+import { createResizeObserverFromDocument } from '../utilities/createResizeObserverFromDocument';
+/**
+ * useResizeObserverRef_unstable simplifies resize observer connection and ensures debounce/cleanup
+ */ export const useResizeObserverRef_unstable = (resizeCallback)=>{
+    'use no memo';
+    const { targetDocument } = useFluent();
+    const container = React.useRef(null);
+    // the handler for resize observer
+    // TODO: exclude types from this lint rule: https://github.com/microsoft/fluentui/issues/31286
+    // eslint-disable-next-line no-restricted-globals
+    const handleResize = debounce((entries, observer)=>{
+        resizeCallback(entries, observer, container);
+    });
+    // Keep the reference of ResizeObserver in the state, as it should live through renders
+    const [resizeObserver, setResizeObserver] = React.useState(()=>createResizeObserverFromDocument(targetDocument, handleResize));
+    React.useEffect(()=>{
+        // Update our state when resizeCallback changes
+        container.current = null;
+        resizeObserver === null || resizeObserver === void 0 ? void 0 : resizeObserver.disconnect();
+        setResizeObserver(()=>createResizeObserverFromDocument(targetDocument, handleResize));
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [
+        resizeCallback,
+        targetDocument
+    ]);
+    React.useEffect(()=>{
+        return ()=>{
+            container.current = null;
+            resizeObserver === null || resizeObserver === void 0 ? void 0 : resizeObserver.disconnect();
+        };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    const scrollRef = React.useCallback((instance)=>{
+        if (container.current !== instance) {
+            if (container.current) {
+                resizeObserver === null || resizeObserver === void 0 ? void 0 : resizeObserver.unobserve(container.current);
+            }
+            container.current = instance;
+            if (container.current) {
+                resizeObserver === null || resizeObserver === void 0 ? void 0 : resizeObserver.observe(container.current);
+            }
+        }
+    }, [
+        resizeObserver
+    ]);
+    return scrollRef;
+};

package/lib/hooks/useResizeObserverRef.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["useResizeObserverRef.ts"],"sourcesContent":["import * as React from 'react';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { debounce } from '../utilities/debounce';\nimport { createResizeObserverFromDocument } from '../utilities/createResizeObserverFromDocument';\nimport { ResizeCallbackWithRef } from './hooks.types';\n\n/**\n * useResizeObserverRef_unstable simplifies resize observer connection and ensures debounce/cleanup\n */\nexport const useResizeObserverRef_unstable = (resizeCallback: ResizeCallbackWithRef) => {\n  'use no memo';\n\n  const { targetDocument } = useFluent();\n  const container = React.useRef<HTMLElement | null>(null);\n  // the handler for resize observer\n  // TODO: exclude types from this lint rule: https://github.com/microsoft/fluentui/issues/31286\n  // eslint-disable-next-line no-restricted-globals\n  const handleResize = debounce((entries: ResizeObserverEntry[], observer: ResizeObserver) => {\n    resizeCallback(entries, observer, container);\n  });\n\n  // Keep the reference of ResizeObserver in the state, as it should live through renders\n  const [resizeObserver, setResizeObserver] = React.useState(() =>\n    createResizeObserverFromDocument(targetDocument, handleResize),\n  );\n\n  React.useEffect(() => {\n    // Update our state when resizeCallback changes\n    container.current = null;\n    resizeObserver?.disconnect();\n    setResizeObserver(() => createResizeObserverFromDocument(targetDocument, handleResize));\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [resizeCallback, targetDocument]);\n\n  React.useEffect(() => {\n    return () => {\n      container.current = null;\n      resizeObserver?.disconnect();\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  const scrollRef = React.useCallback(\n    (instance: HTMLElement | HTMLDivElement | null) => {\n      if (container.current !== instance) {\n        if (container.current) {\n          resizeObserver?.unobserve(container.current);\n        }\n\n        container.current = instance;\n        if (container.current) {\n          resizeObserver?.observe(container.current);\n        }\n      }\n    },\n    [resizeObserver],\n  );\n\n  return scrollRef;\n};\n"],"names":["React","useFluent_unstable","useFluent","debounce","createResizeObserverFromDocument","useResizeObserverRef_unstable","resizeCallback","targetDocument","container","useRef","handleResize","entries","observer","resizeObserver","setResizeObserver","useState","useEffect","current","disconnect","scrollRef","useCallback","instance","unobserve","observe"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,sBAAsBC,SAAS,QAAQ,kCAAkC;AAClF,SAASC,QAAQ,QAAQ,wBAAwB;AACjD,SAASC,gCAAgC,QAAQ,gDAAgD;AAGjG;;CAEC,GACD,OAAO,MAAMC,gCAAgC,CAACC;IAC5C;IAEA,MAAM,EAAEC,cAAc,EAAE,GAAGL;IAC3B,MAAMM,YAAYR,MAAMS,MAAM,CAAqB;IACnD,kCAAkC;IAClC,8FAA8F;IAC9F,iDAAiD;IACjD,MAAMC,eAAeP,SAAS,CAACQ,SAAgCC;QAC7DN,eAAeK,SAASC,UAAUJ;IACpC;IAEA,uFAAuF;IACvF,MAAM,CAACK,gBAAgBC,kBAAkB,GAAGd,MAAMe,QAAQ,CAAC,IACzDX,iCAAiCG,gBAAgBG;IAGnDV,MAAMgB,SAAS,CAAC;QACd,+CAA+C;QAC/CR,UAAUS,OAAO,GAAG;QACpBJ,2BAAAA,qCAAAA,eAAgBK,UAAU;QAC1BJ,kBAAkB,IAAMV,iCAAiCG,gBAAgBG;IACzE,uDAAuD;IACzD,GAAG;QAACJ;QAAgBC;KAAe;IAEnCP,MAAMgB,SAAS,CAAC;QACd,OAAO;YACLR,UAAUS,OAAO,GAAG;YACpBJ,2BAAAA,qCAAAA,eAAgBK,UAAU;QAC5B;IACA,uDAAuD;IACzD,GAAG,EAAE;IAEL,MAAMC,YAAYnB,MAAMoB,WAAW,CACjC,CAACC;QACC,IAAIb,UAAUS,OAAO,KAAKI,UAAU;YAClC,IAAIb,UAAUS,OAAO,EAAE;gBACrBJ,2BAAAA,qCAAAA,eAAgBS,SAAS,CAACd,UAAUS,OAAO;YAC7C;YAEAT,UAAUS,OAAO,GAAGI;YACpB,IAAIb,UAAUS,OAAO,EAAE;gBACrBJ,2BAAAA,qCAAAA,eAAgBU,OAAO,CAACf,UAAUS,OAAO;YAC3C;QACF;IACF,GACA;QAACJ;KAAe;IAGlB,OAAOM;AACT,EAAE"}

package/lib/hooks/useStaticPagination.js

@@ -0,0 +1,103 @@
+import * as React from 'react';
+import { useRef } from 'react';
+import { useTimeout } from '@fluentui/react-utilities';
+/**
+ * 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)=>{
+    'use no memo';
+    const { itemSize, axis = 'vertical' } = virtualizerProps;
+    const [setScrollTimer, clearScrollTimer] = useTimeout();
+    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;
+            clearScrollTimer();
+        }
+    };
+    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)=>{
+        clearScrollTimer();
+        setScrollTimer(onScrollEnd, 100);
+    }, [
+        onScrollEnd,
+        clearScrollTimer,
+        setScrollTimer
+    ]);
+    /**
+   * 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';\nimport { useTimeout } from '@fluentui/react-utilities';\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  'use no memo';\n\n  const { itemSize, axis = 'vertical' } = virtualizerProps;\n\n  const [setScrollTimer, clearScrollTimer] = useTimeout();\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      clearScrollTimer();\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      clearScrollTimer();\n      setScrollTimer(onScrollEnd, 100);\n    },\n    [onScrollEnd, clearScrollTimer, setScrollTimer],\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","useTimeout","useStaticVirtualizerPagination","virtualizerProps","paginationEnabled","itemSize","axis","setScrollTimer","clearScrollTimer","lastScrollPos","lastIndexScrolled","scrollContainer","clearListeners","current","removeEventListener","onScroll","useEffect","onScrollEnd","useCallback","currentScrollPos","Math","round","scrollTop","scrollLeft","closestItem","nextItem","nextTarget","isSecondaryScroll","posMod","nextItemPos","scrollTo","top","behavior","left","event","paginationRef","instance","addEventListener"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,MAAM,QAAQ,QAAQ;AAC/B,SAASC,UAAU,QAAQ,4BAA4B;AAEvD;;;;;CAKC,GACD,OAAO,MAAMC,iCAAiC,CAC5CC,kBACAC,oBAA6B,IAAI;IAEjC;IAEA,MAAM,EAAEC,QAAQ,EAAEC,OAAO,UAAU,EAAE,GAAGH;IAExC,MAAM,CAACI,gBAAgBC,iBAAiB,GAAGP;IAC3C,MAAMQ,gBAAgBT,OAAe;IACrC,MAAMU,oBAAoBV,OAAe;IAEzC,MAAMW,kBAAkBZ,MAAMC,MAAM,CAAqB;IAEzD,MAAMY,iBAAiB;QACrB,IAAID,gBAAgBE,OAAO,EAAE;YAC3BF,gBAAgBE,OAAO,CAACC,mBAAmB,CAAC,UAAUC;YAEtDJ,gBAAgBE,OAAO,GAAG;YAC1BL;QACF;IACF;IAEAT,MAAMiB,SAAS,CAAC;QACd,OAAO;YACLJ;QACF;IACA,uDAAuD;IACzD,GAAG,EAAE;IAEL;;;;GAIC,GACD,MAAMK,cAAclB,MAAMmB,WAAW,CAAC;QACpC,IAAI,CAACP,gBAAgBE,OAAO,IAAI,CAACT,mBAAmB;YAClD,qBAAqB;YACrB;QACF;QAEA,MAAMe,mBAAmBC,KAAKC,KAAK,CACjCf,SAAS,aAAaK,gBAAgBE,OAAO,CAACS,SAAS,GAAGX,gBAAgBE,OAAO,CAACU,UAAU;QAE9F,MAAMC,cAAcJ,KAAKC,KAAK,CAACF,mBAAmBd;QAElD,IAAIoB,WAAW;QACf,IAAIL,KAAKC,KAAK,CAACG,cAAcd,kBAAkBG,OAAO,MAAM,GAAG;YAC7D,4EAA4E;YAC5E,MAAMa,aAAajB,cAAcI,OAAO,GAAGM,mBAAmB,IAAI,CAAC;YACnE,MAAMQ,oBAAoBlB,cAAcI,OAAO,KAAKM;YACpD,MAAMS,SAASD,oBAAoB,IAAID;YAEvCD,WAAWD,cAAcI;QAC3B,OAAO;YACL,6DAA6D;YAC7DH,WAAWD;QACb;QAEA,MAAMK,cAAcJ,WAAWpB;QAE/B,IAAIC,SAAS,YAAY;YACvBK,gBAAgBE,OAAO,CAACiB,QAAQ,CAAC;gBAAEC,KAAKF;gBAAaG,UAAU;YAAS;QAC1E,OAAO;YACLrB,gBAAgBE,OAAO,CAACiB,QAAQ,CAAC;gBAAEG,MAAMJ;gBAAaG,UAAU;YAAS;QAC3E;QACAvB,cAAcI,OAAO,GAAGgB;QACxBnB,kBAAkBG,OAAO,GAAGY;IAC9B,GAAG;QAACrB;QAAmBE;QAAMD;KAAS;IAEtC;;GAEC,GACD,MAAMU,WAAWhB,MAAMmB,WAAW,CAChCgB,CAAAA;QACE1B;QACAD,eAAeU,aAAa;IAC9B,GACA;QAACA;QAAaT;QAAkBD;KAAe;IAGjD;;;GAGC,GACD,MAAM4B,gBAAgBpC,MAAMmB,WAAW,CACrC,CAACkB;QACC,IAAI,CAAChC,mBAAmB;YACtBQ;YACAD,gBAAgBE,OAAO,GAAG;YAC1B;QACF;QACA,IAAIF,gBAAgBE,OAAO,KAAKuB,UAAU;YACxCxB;YAEAD,gBAAgBE,OAAO,GAAGuB;YAC1B,IAAIzB,gBAAgBE,OAAO,EAAE;gBAC3BF,gBAAgBE,OAAO,CAACwB,gBAAgB,CAAC,UAAUtB;YACrD;QACF;IACF,GACA,uDAAuD;IACvD;QAACA;QAAUE;QAAab;KAAkB;IAG5C,OAAO+B;AACT,EAAE"}

package/lib/hooks/useVirtualizerMeasure.js

@@ -0,0 +1,46 @@
+import * as React from 'react';
+import { useResizeObserverRef_unstable } from './useResizeObserverRef';
+/**
+ * React hook that measures virtualized space based on a static size to ensure optimized virtualization length.
+ */ export const useStaticVirtualizerMeasure = (virtualizerProps)=>{
+    const { defaultItemSize, direction = 'vertical' } = virtualizerProps;
+    const [state, setState] = React.useState({
+        virtualizerLength: 0,
+        bufferSize: 0,
+        bufferItems: 0
+    });
+    const { virtualizerLength, bufferItems, bufferSize } = state;
+    const resizeCallback = React.useCallback((_entries, // TODO: exclude types from this lint rule: https://github.com/microsoft/fluentui/issues/31286
+    // eslint-disable-next-line no-restricted-globals
+    _observer, scrollRef)=>{
+        if (!(scrollRef === null || scrollRef === void 0 ? void 0 : scrollRef.current)) {
+            return;
+        }
+        const containerSize = direction === 'vertical' ? scrollRef === null || scrollRef === void 0 ? void 0 : scrollRef.current.getBoundingClientRect().height : scrollRef === null || scrollRef === void 0 ? void 0 : scrollRef.current.getBoundingClientRect().width;
+        /*
+       * Number of items required to cover viewport.
+       */ const length = Math.ceil(containerSize / defaultItemSize + 1);
+        /*
+       * Number of items to append at each end, i.e. 'preload' each side before entering view.
+       */ const newBufferItems = Math.max(Math.floor(length / 4), 2);
+        /*
+       * This is how far we deviate into the bufferItems to detect a redraw.
+       */ const newBufferSize = Math.max(Math.floor(length / 8 * defaultItemSize), 1);
+        const totalLength = length + newBufferItems * 2 + 1;
+        setState({
+            virtualizerLength: totalLength,
+            bufferItems: newBufferItems,
+            bufferSize: newBufferSize
+        });
+    }, [
+        defaultItemSize,
+        direction
+    ]);
+    const scrollRef = useResizeObserverRef_unstable(resizeCallback);
+    return {
+        virtualizerLength,
+        bufferItems,
+        bufferSize,
+        scrollRef
+    };
+};

package/lib/hooks/useVirtualizerMeasure.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["useVirtualizerMeasure.ts"],"sourcesContent":["import * as React from 'react';\nimport { VirtualizerMeasureProps } from './hooks.types';\nimport { useResizeObserverRef_unstable } from './useResizeObserverRef';\n\n/**\n * React hook that measures virtualized space based on a static size to ensure optimized virtualization length.\n */\nexport const useStaticVirtualizerMeasure = <TElement extends HTMLElement>(\n  virtualizerProps: VirtualizerMeasureProps,\n): {\n  virtualizerLength: number;\n  bufferItems: number;\n  bufferSize: number;\n  scrollRef: (instance: TElement | null) => void;\n} => {\n  const { defaultItemSize, direction = 'vertical' } = virtualizerProps;\n\n  const [state, setState] = React.useState({\n    virtualizerLength: 0,\n    bufferSize: 0,\n    bufferItems: 0,\n  });\n\n  const { virtualizerLength, bufferItems, bufferSize } = state;\n\n  const resizeCallback = React.useCallback(\n    (\n      _entries: ResizeObserverEntry[],\n      // TODO: exclude types from this lint rule: https://github.com/microsoft/fluentui/issues/31286\n      // eslint-disable-next-line no-restricted-globals\n      _observer: ResizeObserver,\n      scrollRef?: React.MutableRefObject<HTMLElement | null>,\n    ) => {\n      if (!scrollRef?.current) {\n        return;\n      }\n\n      const containerSize =\n        direction === 'vertical'\n          ? scrollRef?.current.getBoundingClientRect().height\n          : scrollRef?.current.getBoundingClientRect().width;\n\n      /*\n       * Number of items required to cover viewport.\n       */\n      const length = Math.ceil(containerSize / defaultItemSize + 1);\n\n      /*\n       * Number of items to append at each end, i.e. 'preload' each side before entering view.\n       */\n      const newBufferItems = Math.max(Math.floor(length / 4), 2);\n\n      /*\n       * This is how far we deviate into the bufferItems to detect a redraw.\n       */\n      const newBufferSize = Math.max(Math.floor((length / 8) * defaultItemSize), 1);\n\n      const totalLength = length + newBufferItems * 2 + 1;\n\n      setState({\n        virtualizerLength: totalLength,\n        bufferItems: newBufferItems,\n        bufferSize: newBufferSize,\n      });\n    },\n    [defaultItemSize, direction],\n  );\n\n  const scrollRef = useResizeObserverRef_unstable(resizeCallback);\n\n  return {\n    virtualizerLength,\n    bufferItems,\n    bufferSize,\n    scrollRef,\n  };\n};\n"],"names":["React","useResizeObserverRef_unstable","useStaticVirtualizerMeasure","virtualizerProps","defaultItemSize","direction","state","setState","useState","virtualizerLength","bufferSize","bufferItems","resizeCallback","useCallback","_entries","_observer","scrollRef","current","containerSize","getBoundingClientRect","height","width","length","Math","ceil","newBufferItems","max","floor","newBufferSize","totalLength"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,6BAA6B,QAAQ,yBAAyB;AAEvE;;CAEC,GACD,OAAO,MAAMC,8BAA8B,CACzCC;IAOA,MAAM,EAAEC,eAAe,EAAEC,YAAY,UAAU,EAAE,GAAGF;IAEpD,MAAM,CAACG,OAAOC,SAAS,GAAGP,MAAMQ,QAAQ,CAAC;QACvCC,mBAAmB;QACnBC,YAAY;QACZC,aAAa;IACf;IAEA,MAAM,EAAEF,iBAAiB,EAAEE,WAAW,EAAED,UAAU,EAAE,GAAGJ;IAEvD,MAAMM,iBAAiBZ,MAAMa,WAAW,CACtC,CACEC,UACA,8FAA8F;IAC9F,iDAAiD;IACjDC,WACAC;QAEA,IAAI,EAACA,sBAAAA,gCAAAA,UAAWC,OAAO,GAAE;YACvB;QACF;QAEA,MAAMC,gBACJb,cAAc,aACVW,sBAAAA,gCAAAA,UAAWC,OAAO,CAACE,qBAAqB,GAAGC,MAAM,GACjDJ,sBAAAA,gCAAAA,UAAWC,OAAO,CAACE,qBAAqB,GAAGE,KAAK;QAEtD;;OAEC,GACD,MAAMC,SAASC,KAAKC,IAAI,CAACN,gBAAgBd,kBAAkB;QAE3D;;OAEC,GACD,MAAMqB,iBAAiBF,KAAKG,GAAG,CAACH,KAAKI,KAAK,CAACL,SAAS,IAAI;QAExD;;OAEC,GACD,MAAMM,gBAAgBL,KAAKG,GAAG,CAACH,KAAKI,KAAK,CAAC,AAACL,SAAS,IAAKlB,kBAAkB;QAE3E,MAAMyB,cAAcP,SAASG,iBAAiB,IAAI;QAElDlB,SAAS;YACPE,mBAAmBoB;YACnBlB,aAAac;YACbf,YAAYkB;QACd;IACF,GACA;QAACxB;QAAiBC;KAAU;IAG9B,MAAMW,YAAYf,8BAA8BW;IAEhD,OAAO;QACLH;QACAE;QACAD;QACAM;IACF;AACF,EAAE"}