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

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"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,MAAM,QAAQ,QAAQ;AAC/B,SAASC,sBAAsBC,SAAS,QAAQ,kCAAkC;AAKlF;;;;;;CAMC,GACD,OAAO,SAASC,eAEdC,YAAoB,EAAEC,SAAiB,EAAEC,WAAmB,EAAEC,eAAuB;IACrF,MAAMC,aAAaT,MAAMC,MAAM,CAAC,IAAIS,MAAMH,aAAaI,IAAI,CAACH;IAC5D,MAAMI,cAAcZ,MAAMC,MAAM,CAAC,IAAIS,MAAMH,aAAaI,IAAI,CAACH;IAE7D,MAAMK,WAAWb,MAAMC,MAAM,CAAqC,EAAE;IACpE,MAAM,EAAEa,cAAc,EAAE,GAAGX;IAE3B,0DAA0D;IAC1D,MAAMY,kBAAkBd,OAAO;IAE/B,kCAAkC;IAClC,MAAMe,oBAAoBhB,MAAMiB,WAAW,CACzC,CAACC;YAEyBL;QADxB,IAAIM,YAAY;QAChB,MAAMC,mBAAkBP,0BAAAA,SAASQ,OAAO,CAACH,MAAM,cAAvBL,8CAAAA,wBAAyBS,qBAAqB;QACtE,MAAMC,iBAAiBH,4BAAAA,sCAAAA,gBAAiBI,KAAK;QAC7C,IAAID,mBAAmBd,WAAWY,OAAO,CAAChB,eAAea,MAAM,EAAE;YAC/DC,YAAY;QACd;QACAV,WAAWY,OAAO,CAAChB,eAAea,MAAM,GAAGK,kBAAkBf;QAE7D,MAAMiB,kBAAkBL,4BAAAA,sCAAAA,gBAAiBM,MAAM;QAE/C,IAAID,oBAAoBb,YAAYS,OAAO,CAAChB,eAAea,MAAM,EAAE;YACjEC,YAAY;QACd;QACAP,YAAYS,OAAO,CAAChB,eAAea,MAAM,GAAGO,mBAAmBjB;QAE/D,IAAIW,WAAW;YACbJ,gBAAgBM,OAAO,GAAGN,gBAAgBM,OAAO,GAAG;QACtD;IACF,GACA;QAAChB;QAAcG;QAAiBO;KAAgB;IAGlD,MAAMY,8BAA8B,CAACC;QACnC,KAAK,MAAMC,SAASD,QAAS;YAC3B,MAAME,SAASD,MAAMC,MAAM;YAC3B,iDAAiD;YACjDA,OAAOC,YAAY;QACrB;IACF;IAEA/B,MAAMgC,SAAS,CAAC;QACdvB,WAAWY,OAAO,GAAG,IAAIX,MAAMH,aAAaI,IAAI,CAACH;QACjDI,YAAYS,OAAO,GAAG,IAAIX,MAAMH,aAAaI,IAAI,CAACH;IACpD,GAAG;QAACA;QAAiBD;KAAY;IAEjC,mFAAmF;IACnF,MAAM0B,iBAAiBjC,MAAMC,MAAM,CAACiC,iCAAiCpB,gBAAgBa;IAErF;;;;GAIC,GACD,MAAMQ,mBAAmBnC,MAAMiB,WAAW,CACxC,CAACC;QACC,MAAMkB,oBAAoB,CAACC;YACzB,IAAI,CAACvB,kBAAkB,CAACmB,eAAeZ,OAAO,EAAE;gBAC9C;YACF;YAEA,IAAIgB,IAAI;gBACNA,GAAGN,YAAY,GAAG;oBAChBf,kBAAkBE;gBACpB;YACF;YAEA,6BAA6B;YAC7B,IAAIL,SAASQ,OAAO,CAACH,MAAM,KAAKoB,aAAazB,SAASQ,OAAO,CAACH,MAAM,KAAK,MAAM;gBAC7Ee,eAAeZ,OAAO,CAACkB,SAAS,CAAC1B,SAASQ,OAAO,CAACH,MAAM;YAC1D;YAEAL,SAASQ,OAAO,CAACH,MAAM,GAAGoB;YAC1B,IAAID,IAAI;gBACNxB,SAASQ,OAAO,CAACH,MAAM,GAAGmB;gBAC1BJ,eAAeZ,OAAO,CAACmB,OAAO,CAACH;gBAC/BrB,kBAAkBE;YACpB;QACF;QAEA,OAAOkB;IACT,GACA;QAACpB;QAAmBiB;QAAgBnB;KAAe;IAGrDd,MAAMgC,SAAS,CAAC;QACd,MAAMS,kBAAkBR;QACxB,OAAO;gBAAMQ;oBAAAA,0BAAAA,gBAAgBpB,OAAO,cAAvBoB,8CAAAA,wBAAyBC,UAAU;;IAClD,GAAG;QAACT;KAAe;IAEnB,OAAO;QAAExB;QAAYG;QAAauB;QAAkBtB;QAAUE,iBAAiBA,gBAAgBM,OAAO;IAAC;AACzG;AAEA;;;;;;CAMC,GACD,OAAO,SAASa,iCACdpB,cAA2C,EAC3C6B,QAAgC;QAE3B7B;IAAL,IAAI,EAACA,2BAAAA,sCAAAA,8BAAAA,eAAgB8B,WAAW,cAA3B9B,kDAAAA,4BAA6B+B,cAAc,GAAE;QAChD,OAAO;IACT;IAEA,OAAO,IAAI/B,eAAe8B,WAAW,CAACC,cAAc,CAACF;AACvD"}

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"],"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"],"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"],"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"],"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"}

package/lib/index.js

@@ -1,3 +1,5 @@
 export { Virtualizer, virtualizerClassNames, useVirtualizer_unstable, renderVirtualizer_unstable, useVirtualizerStyles_unstable } from './Virtualizer';
-export { useIntersectionObserver } from './Hooks';
-//# sourceMappingURL=index.js.map
+export { useIntersectionObserver, useStaticVirtualizerMeasure, useDynamicVirtualizerMeasure, useResizeObserverRef_unstable } from './Hooks';
+export { VirtualizerContextProvider, useVirtualizerContext_unstable, scrollToItemStatic, scrollToItemDynamic } from './Utilities';
+export { VirtualizerScrollView, virtualizerScrollViewClassNames, useVirtualizerScrollView_unstable, renderVirtualizerScrollView_unstable, useVirtualizerScrollViewStyles_unstable } from './VirtualizerScrollView';
+export { VirtualizerScrollViewDynamic, virtualizerScrollViewDynamicClassNames, useVirtualizerScrollViewDynamic_unstable, renderVirtualizerScrollViewDynamic_unstable, useVirtualizerScrollViewDynamicStyles_unstable } from './VirtualizerScrollViewDynamic';

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"mappings":"AAAA,SACEA,WAAW,EACXC,qBAAqB,EACrBC,uBAAuB,EACvBC,0BAA0B,EAC1BC,6BAA6B,QACxB,eAAe;AAOtB,SAASC,uBAAuB,QAAQ,SAAS","names":["Virtualizer","virtualizerClassNames","useVirtualizer_unstable","renderVirtualizer_unstable","useVirtualizerStyles_unstable","useIntersectionObserver"],"sourceRoot":"../src/","sources":["packages/react-components/react-virtualizer/src/index.ts"],"sourcesContent":["export {\n  Virtualizer,\n  virtualizerClassNames,\n  useVirtualizer_unstable,\n  renderVirtualizer_unstable,\n  useVirtualizerStyles_unstable,\n} from './Virtualizer';\nexport type {\n  VirtualizerProps,\n  VirtualizerState,\n  VirtualizerSlots,\n  VirtualizerChildRenderFunction,\n} from './Virtualizer';\nexport { useIntersectionObserver } from './Hooks';\n"]}
+{"version":3,"sources":["index.ts"],"sourcesContent":["export {\n  Virtualizer,\n  virtualizerClassNames,\n  useVirtualizer_unstable,\n  renderVirtualizer_unstable,\n  useVirtualizerStyles_unstable,\n} from './Virtualizer';\n\nexport type {\n  VirtualizerProps,\n  VirtualizerState,\n  VirtualizerSlots,\n  VirtualizerChildRenderFunction,\n  VirtualizerDataRef,\n} from './Virtualizer';\n\nexport {\n  useIntersectionObserver,\n  useStaticVirtualizerMeasure,\n  useDynamicVirtualizerMeasure,\n  useResizeObserverRef_unstable,\n} from './Hooks';\n\nexport type { ResizeCallbackWithRef, VirtualizerMeasureDynamicProps, VirtualizerMeasureProps } from './Hooks';\n\nexport type { ScrollToItemDynamicParams, ScrollToItemStaticParams, ScrollToInterface } from './Utilities';\n\nexport {\n  VirtualizerContextProvider,\n  useVirtualizerContext_unstable,\n  scrollToItemStatic,\n  scrollToItemDynamic,\n} from './Utilities';\n\nexport type { VirtualizerContextProps } from './Utilities';\n\nexport {\n  VirtualizerScrollView,\n  virtualizerScrollViewClassNames,\n  useVirtualizerScrollView_unstable,\n  renderVirtualizerScrollView_unstable,\n  useVirtualizerScrollViewStyles_unstable,\n} from './VirtualizerScrollView';\n\nexport type {\n  VirtualizerScrollViewProps,\n  VirtualizerScrollViewState,\n  VirtualizerScrollViewSlots,\n} from './VirtualizerScrollView';\n\nexport {\n  VirtualizerScrollViewDynamic,\n  virtualizerScrollViewDynamicClassNames,\n  useVirtualizerScrollViewDynamic_unstable,\n  renderVirtualizerScrollViewDynamic_unstable,\n  useVirtualizerScrollViewDynamicStyles_unstable,\n} from './VirtualizerScrollViewDynamic';\n\nexport type {\n  VirtualizerScrollViewDynamicProps,\n  VirtualizerScrollViewDynamicState,\n  VirtualizerScrollViewDynamicSlots,\n} from './VirtualizerScrollViewDynamic';\n"],"names":["Virtualizer","virtualizerClassNames","useVirtualizer_unstable","renderVirtualizer_unstable","useVirtualizerStyles_unstable","useIntersectionObserver","useStaticVirtualizerMeasure","useDynamicVirtualizerMeasure","useResizeObserverRef_unstable","VirtualizerContextProvider","useVirtualizerContext_unstable","scrollToItemStatic","scrollToItemDynamic","VirtualizerScrollView","virtualizerScrollViewClassNames","useVirtualizerScrollView_unstable","renderVirtualizerScrollView_unstable","useVirtualizerScrollViewStyles_unstable","VirtualizerScrollViewDynamic","virtualizerScrollViewDynamicClassNames","useVirtualizerScrollViewDynamic_unstable","renderVirtualizerScrollViewDynamic_unstable","useVirtualizerScrollViewDynamicStyles_unstable"],"mappings":"AAAA,SACEA,WAAW,EACXC,qBAAqB,EACrBC,uBAAuB,EACvBC,0BAA0B,EAC1BC,6BAA6B,QACxB,gBAAgB;AAUvB,SACEC,uBAAuB,EACvBC,2BAA2B,EAC3BC,4BAA4B,EAC5BC,6BAA6B,QACxB,UAAU;AAMjB,SACEC,0BAA0B,EAC1BC,8BAA8B,EAC9BC,kBAAkB,EAClBC,mBAAmB,QACd,cAAc;AAIrB,SACEC,qBAAqB,EACrBC,+BAA+B,EAC/BC,iCAAiC,EACjCC,oCAAoC,EACpCC,uCAAuC,QAClC,0BAA0B;AAQjC,SACEC,4BAA4B,EAC5BC,sCAAsC,EACtCC,wCAAwC,EACxCC,2CAA2C,EAC3CC,8CAA8C,QACzC,iCAAiC"}

package/lib/utilities/ImperativeScrolling/imperativeScrolling.js

@@ -0,0 +1,32 @@
+export const scrollToItemStatic = (params)=>{
+    const { index, itemSize, totalItems, scrollViewRef, axis = 'vertical', reversed = false, behavior = 'auto' } = params;
+    if (axis === 'horizontal') {
+        if (reversed) {
+            var _scrollViewRef_current;
+            (_scrollViewRef_current = scrollViewRef.current) === null || _scrollViewRef_current === void 0 ? void 0 : _scrollViewRef_current.scrollTo({
+                left: totalItems * itemSize - itemSize * index,
+                behavior
+            });
+        } else {
+            var _scrollViewRef_current1;
+            (_scrollViewRef_current1 = scrollViewRef.current) === null || _scrollViewRef_current1 === void 0 ? void 0 : _scrollViewRef_current1.scrollTo({
+                left: itemSize * index,
+                behavior
+            });
+        }
+    } else {
+        if (reversed) {
+            var _scrollViewRef_current2;
+            (_scrollViewRef_current2 = scrollViewRef.current) === null || _scrollViewRef_current2 === void 0 ? void 0 : _scrollViewRef_current2.scrollTo({
+                top: totalItems * itemSize - itemSize * index,
+                behavior
+            });
+        } else {
+            var _scrollViewRef_current3;
+            (_scrollViewRef_current3 = scrollViewRef.current) === null || _scrollViewRef_current3 === void 0 ? void 0 : _scrollViewRef_current3.scrollTo({
+                top: itemSize * index,
+                behavior
+            });
+        }
+    }
+};

package/lib/utilities/ImperativeScrolling/imperativeScrolling.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["imperativeScrolling.ts"],"sourcesContent":["import { ScrollToItemStaticParams } from './imperativeScrolling.types';\n\nexport const scrollToItemStatic = (params: ScrollToItemStaticParams) => {\n  const { index, itemSize, totalItems, scrollViewRef, axis = 'vertical', reversed = false, behavior = 'auto' } = params;\n\n  if (axis === 'horizontal') {\n    if (reversed) {\n      scrollViewRef.current?.scrollTo({\n        left: totalItems * itemSize - itemSize * index,\n        behavior,\n      });\n    } else {\n      scrollViewRef.current?.scrollTo({\n        left: itemSize * index,\n        behavior,\n      });\n    }\n  } else {\n    if (reversed) {\n      scrollViewRef.current?.scrollTo({\n        top: totalItems * itemSize - itemSize * index,\n        behavior,\n      });\n    } else {\n      scrollViewRef.current?.scrollTo({\n        top: itemSize * index,\n        behavior,\n      });\n    }\n  }\n};\n"],"names":["scrollToItemStatic","params","index","itemSize","totalItems","scrollViewRef","axis","reversed","behavior","current","scrollTo","left","top"],"mappings":"AAEA,OAAO,MAAMA,qBAAqB,CAACC;IACjC,MAAM,EAAEC,KAAK,EAAEC,QAAQ,EAAEC,UAAU,EAAEC,aAAa,EAAEC,OAAO,UAAU,EAAEC,WAAW,KAAK,EAAEC,WAAW,MAAM,EAAE,GAAGP;IAE/G,IAAIK,SAAS,cAAc;QACzB,IAAIC,UAAU;gBACZF;aAAAA,yBAAAA,cAAcI,OAAO,cAArBJ,6CAAAA,uBAAuBK,QAAQ,CAAC;gBAC9BC,MAAMP,aAAaD,WAAWA,WAAWD;gBACzCM;YACF;QACF,OAAO;gBACLH;aAAAA,0BAAAA,cAAcI,OAAO,cAArBJ,8CAAAA,wBAAuBK,QAAQ,CAAC;gBAC9BC,MAAMR,WAAWD;gBACjBM;YACF;QACF;IACF,OAAO;QACL,IAAID,UAAU;gBACZF;aAAAA,0BAAAA,cAAcI,OAAO,cAArBJ,8CAAAA,wBAAuBK,QAAQ,CAAC;gBAC9BE,KAAKR,aAAaD,WAAWA,WAAWD;gBACxCM;YACF;QACF,OAAO;gBACLH;aAAAA,0BAAAA,cAAcI,OAAO,cAArBJ,8CAAAA,wBAAuBK,QAAQ,CAAC;gBAC9BE,KAAKT,WAAWD;gBAChBM;YACF;QACF;IACF;AACF,EAAE"}

package/lib/utilities/ImperativeScrolling/imperativeScrolling.types.js

@@ -0,0 +1 @@
+export { };

package/lib/utilities/ImperativeScrolling/imperativeScrolling.types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["imperativeScrolling.types.ts"],"sourcesContent":["import type { RefObject } from 'react';\n\nexport type ScrollToItemStaticParams = {\n  index: number;\n  itemSize: number;\n  totalItems: number;\n  scrollViewRef: RefObject<HTMLDivElement>;\n  axis?: 'horizontal' | 'vertical';\n  reversed?: boolean;\n  behavior?: ScrollBehavior;\n};\n\nexport type ScrollToItemDynamicParams = {\n  index: number;\n  itemSizes: RefObject<number[]>;\n  totalSize: number;\n  scrollViewRef: RefObject<HTMLDivElement>;\n  axis?: 'horizontal' | 'vertical';\n  reversed?: boolean;\n  behavior?: ScrollBehavior;\n};\n\nexport type ScrollToInterface = {\n  scrollTo: (index: number, behavior?: ScrollBehavior, callback?: (index: number) => void) => void;\n  virtualizerLength: RefObject<number>;\n  currentIndex: RefObject<number> | undefined;\n};\n"],"names":[],"mappings":"AAAA,WA0BE"}

package/lib/utilities/ImperativeScrolling/imperativeScrollingDynamic.js

@@ -0,0 +1,45 @@
+export const scrollToItemDynamic = (params)=>{
+    const { index, itemSizes, totalSize, scrollViewRef, axis = 'vertical', reversed = false, behavior = 'auto' } = params;
+    if (!itemSizes.current) {
+        return;
+    }
+    if (itemSizes.current === null || itemSizes.current.length < index) {
+        // null check - abort
+        return;
+    }
+    let itemDepth = 0;
+    for(let i = 0; i < index; i++){
+        if (i < index) {
+            itemDepth += itemSizes.current[i];
+        }
+    }
+    if (axis === 'horizontal') {
+        if (reversed) {
+            var _scrollViewRef_current;
+            (_scrollViewRef_current = scrollViewRef.current) === null || _scrollViewRef_current === void 0 ? void 0 : _scrollViewRef_current.scrollTo({
+                left: totalSize - itemDepth,
+                behavior
+            });
+        } else {
+            var _scrollViewRef_current1;
+            (_scrollViewRef_current1 = scrollViewRef.current) === null || _scrollViewRef_current1 === void 0 ? void 0 : _scrollViewRef_current1.scrollTo({
+                left: itemDepth,
+                behavior
+            });
+        }
+    } else {
+        if (reversed) {
+            var _scrollViewRef_current2;
+            (_scrollViewRef_current2 = scrollViewRef.current) === null || _scrollViewRef_current2 === void 0 ? void 0 : _scrollViewRef_current2.scrollTo({
+                top: totalSize - itemDepth,
+                behavior
+            });
+        } else {
+            var _scrollViewRef_current3;
+            (_scrollViewRef_current3 = scrollViewRef.current) === null || _scrollViewRef_current3 === void 0 ? void 0 : _scrollViewRef_current3.scrollTo({
+                top: itemDepth,
+                behavior
+            });
+        }
+    }
+};

package/lib/utilities/ImperativeScrolling/imperativeScrollingDynamic.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["imperativeScrollingDynamic.ts"],"sourcesContent":["import { ScrollToItemDynamicParams } from './imperativeScrolling.types';\n\nexport const scrollToItemDynamic = (params: ScrollToItemDynamicParams) => {\n  const { index, itemSizes, totalSize, scrollViewRef, axis = 'vertical', reversed = false, behavior = 'auto' } = params;\n  if (!itemSizes.current) {\n    return;\n  }\n\n  if (itemSizes.current === null || itemSizes.current.length < index) {\n    // null check - abort\n    return;\n  }\n\n  let itemDepth = 0;\n  for (let i = 0; i < index; i++) {\n    if (i < index) {\n      itemDepth += itemSizes.current[i];\n    }\n  }\n\n  if (axis === 'horizontal') {\n    if (reversed) {\n      scrollViewRef.current?.scrollTo({\n        left: totalSize - itemDepth,\n        behavior,\n      });\n    } else {\n      scrollViewRef.current?.scrollTo({\n        left: itemDepth,\n        behavior,\n      });\n    }\n  } else {\n    if (reversed) {\n      scrollViewRef.current?.scrollTo({\n        top: totalSize - itemDepth,\n        behavior,\n      });\n    } else {\n      scrollViewRef.current?.scrollTo({\n        top: itemDepth,\n        behavior,\n      });\n    }\n  }\n};\n"],"names":["scrollToItemDynamic","params","index","itemSizes","totalSize","scrollViewRef","axis","reversed","behavior","current","length","itemDepth","i","scrollTo","left","top"],"mappings":"AAEA,OAAO,MAAMA,sBAAsB,CAACC;IAClC,MAAM,EAAEC,KAAK,EAAEC,SAAS,EAAEC,SAAS,EAAEC,aAAa,EAAEC,OAAO,UAAU,EAAEC,WAAW,KAAK,EAAEC,WAAW,MAAM,EAAE,GAAGP;IAC/G,IAAI,CAACE,UAAUM,OAAO,EAAE;QACtB;IACF;IAEA,IAAIN,UAAUM,OAAO,KAAK,QAAQN,UAAUM,OAAO,CAACC,MAAM,GAAGR,OAAO;QAClE,qBAAqB;QACrB;IACF;IAEA,IAAIS,YAAY;IAChB,IAAK,IAAIC,IAAI,GAAGA,IAAIV,OAAOU,IAAK;QAC9B,IAAIA,IAAIV,OAAO;YACbS,aAAaR,UAAUM,OAAO,CAACG,EAAE;QACnC;IACF;IAEA,IAAIN,SAAS,cAAc;QACzB,IAAIC,UAAU;gBACZF;aAAAA,yBAAAA,cAAcI,OAAO,cAArBJ,6CAAAA,uBAAuBQ,QAAQ,CAAC;gBAC9BC,MAAMV,YAAYO;gBAClBH;YACF;QACF,OAAO;gBACLH;aAAAA,0BAAAA,cAAcI,OAAO,cAArBJ,8CAAAA,wBAAuBQ,QAAQ,CAAC;gBAC9BC,MAAMH;gBACNH;YACF;QACF;IACF,OAAO;QACL,IAAID,UAAU;gBACZF;aAAAA,0BAAAA,cAAcI,OAAO,cAArBJ,8CAAAA,wBAAuBQ,QAAQ,CAAC;gBAC9BE,KAAKX,YAAYO;gBACjBH;YACF;QACF,OAAO;gBACLH;aAAAA,0BAAAA,cAAcI,OAAO,cAArBJ,8CAAAA,wBAAuBQ,QAAQ,CAAC;gBAC9BE,KAAKJ;gBACLH;YACF;QACF;IACF;AACF,EAAE"}

package/lib/utilities/ImperativeScrolling/index.js

@@ -0,0 +1,3 @@
+export * from './imperativeScrolling';
+export * from './imperativeScrolling.types';
+export * from './imperativeScrollingDynamic';

package/lib/utilities/ImperativeScrolling/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './imperativeScrolling';\nexport * from './imperativeScrolling.types';\nexport * from './imperativeScrollingDynamic';\n"],"names":[],"mappings":"AAAA,cAAc,wBAAwB;AACtC,cAAc,8BAA8B;AAC5C,cAAc,+BAA+B"}

package/lib/utilities/VirtualizerContext/VirtualizerContext.js

@@ -0,0 +1,33 @@
+import * as React from 'react';
+import { useMemo, useState } from 'react';
+const VirtualizerContext = React.createContext(undefined);
+export const VirtualizerContextProvider = VirtualizerContext.Provider;
+export const useVirtualizerContext_unstable = ()=>{
+    return React.useContext(VirtualizerContext);
+};
+export const useVirtualizerContextState_unstable = (passedContext)=>{
+    const virtualizerContext = useVirtualizerContext_unstable();
+    const [_contextIndex, _setContextIndex] = useState(-1);
+    /* We respect any wrapped providers while also ensuring defaults or passed through
+   * Order of usage -> Passed Prop -> Provider Context -> Internal State default
+   */ const _context = useMemo(()=>{
+        var _ref;
+        return (_ref = passedContext !== null && passedContext !== void 0 ? passedContext : virtualizerContext) !== null && _ref !== void 0 ? _ref : {
+            contextIndex: _contextIndex,
+            setContextIndex: _setContextIndex
+        };
+    }, [
+        _contextIndex,
+        passedContext,
+        virtualizerContext
+    ]);
+    const context = useMemo(()=>{
+        return {
+            contextIndex: _context.contextIndex,
+            setContextIndex: _context.setContextIndex
+        };
+    }, [
+        _context
+    ]);
+    return context;
+};

package/lib/utilities/VirtualizerContext/VirtualizerContext.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["VirtualizerContext.ts"],"sourcesContent":["import * as React from 'react';\nimport type { VirtualizerContextProps } from './types';\nimport { useMemo, useState } from 'react';\n\nconst VirtualizerContext = React.createContext<VirtualizerContextProps | undefined>(\n  undefined,\n) as React.Context<VirtualizerContextProps>;\n\nexport const VirtualizerContextProvider = VirtualizerContext.Provider;\n\nexport const useVirtualizerContext_unstable = () => {\n  return React.useContext(VirtualizerContext);\n};\n\nexport const useVirtualizerContextState_unstable = (\n  passedContext?: VirtualizerContextProps,\n): VirtualizerContextProps => {\n  const virtualizerContext = useVirtualizerContext_unstable();\n  const [_contextIndex, _setContextIndex] = useState<number>(-1);\n\n  /* We respect any wrapped providers while also ensuring defaults or passed through\n   * Order of usage -> Passed Prop -> Provider Context -> Internal State default\n   */\n  const _context = useMemo(\n    () => passedContext ?? virtualizerContext ?? { contextIndex: _contextIndex, setContextIndex: _setContextIndex },\n    [_contextIndex, passedContext, virtualizerContext],\n  );\n  const context = useMemo(() => {\n    return { contextIndex: _context.contextIndex, setContextIndex: _context.setContextIndex };\n  }, [_context]);\n\n  return context;\n};\n"],"names":["React","useMemo","useState","VirtualizerContext","createContext","undefined","VirtualizerContextProvider","Provider","useVirtualizerContext_unstable","useContext","useVirtualizerContextState_unstable","passedContext","virtualizerContext","_contextIndex","_setContextIndex","_context","contextIndex","setContextIndex","context"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,OAAO,EAAEC,QAAQ,QAAQ,QAAQ;AAE1C,MAAMC,qBAAqBH,MAAMI,aAAa,CAC5CC;AAGF,OAAO,MAAMC,6BAA6BH,mBAAmBI,QAAQ,CAAC;AAEtE,OAAO,MAAMC,iCAAiC;IAC5C,OAAOR,MAAMS,UAAU,CAACN;AAC1B,EAAE;AAEF,OAAO,MAAMO,sCAAsC,CACjDC;IAEA,MAAMC,qBAAqBJ;IAC3B,MAAM,CAACK,eAAeC,iBAAiB,GAAGZ,SAAiB,CAAC;IAE5D;;GAEC,GACD,MAAMa,WAAWd,QACf;YAAMU;eAAAA,CAAAA,OAAAA,0BAAAA,2BAAAA,gBAAiBC,gCAAjBD,kBAAAA,OAAuC;YAAEK,cAAcH;YAAeI,iBAAiBH;QAAiB;IAAA,GAC9G;QAACD;QAAeF;QAAeC;KAAmB;IAEpD,MAAMM,UAAUjB,QAAQ;QACtB,OAAO;YAAEe,cAAcD,SAASC,YAAY;YAAEC,iBAAiBF,SAASE,eAAe;QAAC;IAC1F,GAAG;QAACF;KAAS;IAEb,OAAOG;AACT,EAAE"}

package/lib/utilities/VirtualizerContext/index.js

@@ -0,0 +1,2 @@
+export * from './VirtualizerContext';
+export * from './types';

package/lib/utilities/VirtualizerContext/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './VirtualizerContext';\nexport * from './types';\n"],"names":[],"mappings":"AAAA,cAAc,uBAAuB;AACrC,cAAc,UAAU"}

package/lib/utilities/VirtualizerContext/types.js

@@ -0,0 +1,3 @@
+/**
+ * {@docCategory Virtualizer}
+ */ export { };

package/lib/utilities/VirtualizerContext/types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["types.ts"],"sourcesContent":["/**\n * {@docCategory Virtualizer}\n */\nexport type VirtualizerContextProps = {\n  contextIndex: number;\n  setContextIndex: (index: number) => void;\n};\n"],"names":[],"mappings":"AAAA;;CAEC,GACD,WAGE"}

package/lib/utilities/createResizeObserverFromDocument.js

@@ -0,0 +1,13 @@
+/**
+ * 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);
+}