@fluentui/react-virtualizer 9.0.0-alpha.12 → 9.0.0-alpha.14

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

@@ -0,0 +1,69 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    virtualizerScrollViewClassNames: ()=>virtualizerScrollViewClassNames,
+    useVirtualizerScrollViewStyles_unstable: ()=>useVirtualizerScrollViewStyles_unstable
+});
+const _useVirtualizerStyles = require("../Virtualizer/useVirtualizerStyles");
+const _react = require("@griffel/react");
+const virtualizerScrollViewClassName = 'fui-Virtualizer-Scroll-View';
+const virtualizerScrollViewClassNames = {
+    ..._useVirtualizerStyles.virtualizerClassNames,
+    container: `${virtualizerScrollViewClassName}__container`
+};
+const useStyles = /*#__PURE__*/ (0, _react["__styles"])({
+    base: {
+        mc9l5x: "f22iagw",
+        a9b677: "fly5x3f",
+        Bqenvij: "f1l02sjl",
+        Eiaeu8: "f1115ve7"
+    },
+    vertical: {
+        Beiy3e4: "f1vx9l62",
+        Eiaeu8: "f1115ve7",
+        Bmxbyg5: "f5zp4f"
+    },
+    horizontal: {
+        Beiy3e4: "f1063pyq",
+        B68tc82: "f1oy3dpc"
+    },
+    verticalReversed: {
+        Beiy3e4: "f1gkdon0",
+        Bmxbyg5: "f5zp4f"
+    },
+    horizontalReversed: {
+        Beiy3e4: "f1oztnx0",
+        B68tc82: "f1oy3dpc"
+    }
+}, {
+    d: [
+        ".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}",
+        ".fly5x3f{width:100%;}",
+        ".f1l02sjl{height:100%;}",
+        ".f1115ve7{overflow-anchor:none;}",
+        ".f1vx9l62{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}",
+        ".f5zp4f{overflow-y:auto;}",
+        ".f1063pyq{-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;}",
+        ".f1oy3dpc{overflow-x:auto;}",
+        ".f1gkdon0{-webkit-flex-direction:column-reverse;-ms-flex-direction:column-reverse;flex-direction:column-reverse;}",
+        ".f1oztnx0{-webkit-flex-direction:row-reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse;}"
+    ]
+});
+const useVirtualizerScrollViewStyles_unstable = (state)=>{
+    const styles = useStyles();
+    // For now - just return default style mods
+    (0, _useVirtualizerStyles.useVirtualizerStyles_unstable)(state);
+    const containerStyle = state.axis === 'horizontal' ? state.reversed ? styles.horizontalReversed : styles.horizontal : state.reversed ? styles.verticalReversed : styles.vertical;
+    state.container.className = (0, _react.mergeClasses)(virtualizerScrollViewClassNames.container, styles.base, containerStyle, state.container.className);
+    return state;
+}; //# sourceMappingURL=useVirtualizerScrollViewStyles.js.map
+
+//# sourceMappingURL=useVirtualizerScrollViewStyles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../lib/components/VirtualizerScrollView/useVirtualizerScrollViewStyles.js"],"sourcesContent":["import { useVirtualizerStyles_unstable, virtualizerClassNames } from '../Virtualizer/useVirtualizerStyles';\nimport { __styles, mergeClasses } from '@griffel/react';\nconst virtualizerScrollViewClassName = 'fui-Virtualizer-Scroll-View';\nexport const virtualizerScrollViewClassNames = {\n  ...virtualizerClassNames,\n  container: `${virtualizerScrollViewClassName}__container`\n};\nconst useStyles = /*#__PURE__*/__styles({\n  base: {\n    mc9l5x: \"f22iagw\",\n    a9b677: \"fly5x3f\",\n    Bqenvij: \"f1l02sjl\",\n    Eiaeu8: \"f1115ve7\"\n  },\n  vertical: {\n    Beiy3e4: \"f1vx9l62\",\n    Eiaeu8: \"f1115ve7\",\n    Bmxbyg5: \"f5zp4f\"\n  },\n  horizontal: {\n    Beiy3e4: \"f1063pyq\",\n    B68tc82: \"f1oy3dpc\"\n  },\n  verticalReversed: {\n    Beiy3e4: \"f1gkdon0\",\n    Bmxbyg5: \"f5zp4f\"\n  },\n  horizontalReversed: {\n    Beiy3e4: \"f1oztnx0\",\n    B68tc82: \"f1oy3dpc\"\n  }\n}, {\n  d: [\".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}\", \".fly5x3f{width:100%;}\", \".f1l02sjl{height:100%;}\", \".f1115ve7{overflow-anchor:none;}\", \".f1vx9l62{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}\", \".f5zp4f{overflow-y:auto;}\", \".f1063pyq{-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;}\", \".f1oy3dpc{overflow-x:auto;}\", \".f1gkdon0{-webkit-flex-direction:column-reverse;-ms-flex-direction:column-reverse;flex-direction:column-reverse;}\", \".f1oztnx0{-webkit-flex-direction:row-reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse;}\"]\n});\n/**\n * Apply styling to the Virtualizer states\n */\nexport const useVirtualizerScrollViewStyles_unstable = state => {\n  const styles = useStyles();\n  // For now - just return default style mods\n  useVirtualizerStyles_unstable(state);\n  const containerStyle = state.axis === 'horizontal' ? state.reversed ? styles.horizontalReversed : styles.horizontal : state.reversed ? styles.verticalReversed : styles.vertical;\n  state.container.className = mergeClasses(virtualizerScrollViewClassNames.container, styles.base, containerStyle, state.container.className);\n  return state;\n};\n//# sourceMappingURL=useVirtualizerScrollViewStyles.js.map"],"names":["virtualizerScrollViewClassNames","useVirtualizerScrollViewStyles_unstable","virtualizerScrollViewClassName","virtualizerClassNames","container","useStyles","__styles","base","mc9l5x","a9b677","Bqenvij","Eiaeu8","vertical","Beiy3e4","Bmxbyg5","horizontal","B68tc82","verticalReversed","horizontalReversed","d","state","styles","useVirtualizerStyles_unstable","containerStyle","axis","reversed","className","mergeClasses"],"mappings":";;;;;;;;;;;IAGaA,+BAA+B,MAA/BA;IAkCAC,uCAAuC,MAAvCA;;sCArCwD;uBAC9B;AACvC,MAAMC,iCAAiC;AAChC,MAAMF,kCAAkC;IAC7C,GAAGG,2CAAqB;IACxBC,WAAW,CAAC,EAAEF,+BAA+B,WAAW,CAAC;AAC3D;AACA,MAAMG,YAAY,WAAW,GAAEC,IAAAA,kBAAQ,EAAC;IACtCC,MAAM;QACJC,QAAQ;QACRC,QAAQ;QACRC,SAAS;QACTC,QAAQ;IACV;IACAC,UAAU;QACRC,SAAS;QACTF,QAAQ;QACRG,SAAS;IACX;IACAC,YAAY;QACVF,SAAS;QACTG,SAAS;IACX;IACAC,kBAAkB;QAChBJ,SAAS;QACTC,SAAS;IACX;IACAI,oBAAoB;QAClBL,SAAS;QACTG,SAAS;IACX;AACF,GAAG;IACDG,GAAG;QAAC;QAAwF;QAAyB;QAA2B;QAAoC;QAA6F;QAA6B;QAAoF;QAA+B;QAAqH;KAA2G;AACnoB;AAIO,MAAMlB,0CAA0CmB,CAAAA,QAAS;IAC9D,MAAMC,SAAShB;IACf,2CAA2C;IAC3CiB,IAAAA,mDAA6B,EAACF;IAC9B,MAAMG,iBAAiBH,MAAMI,IAAI,KAAK,eAAeJ,MAAMK,QAAQ,GAAGJ,OAAOH,kBAAkB,GAAGG,OAAON,UAAU,GAAGK,MAAMK,QAAQ,GAAGJ,OAAOJ,gBAAgB,GAAGI,OAAOT,QAAQ;IAChLQ,MAAMhB,SAAS,CAACsB,SAAS,GAAGC,IAAAA,mBAAY,EAAC3B,gCAAgCI,SAAS,EAAEiB,OAAOd,IAAI,EAAEgB,gBAAgBH,MAAMhB,SAAS,CAACsB,SAAS;IAC1I,OAAON;AACT,GACA,0DAA0D"}

package/lib-commonjs/hooks/index.js

@@ -1,8 +1,10 @@
 "use strict";
-
 Object.defineProperty(exports, "__esModule", {
-  value: true
+    value: true
 });
-const tslib_1 = /*#__PURE__*/require("tslib");
-tslib_1.__exportStar(require("./useIntersectionObserver"), exports);
+const _exportStar = require("@swc/helpers/lib/_export_star.js").default;
+_exportStar(require("./useIntersectionObserver"), exports);
+_exportStar(require("./useVirtualizerMeasure"), exports);
+ //# sourceMappingURL=index.js.map
+
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["tslib_1","__exportStar","require","exports"],"sources":["../src/packages/react-components/react-virtualizer/src/hooks/index.ts"],"sourcesContent":["export * from './useIntersectionObserver';\n"],"mappings":";;;;;;AAAAA,OAAA,CAAAC,YAAA,CAAAC,OAAA,+BAAAC,OAAA"}
+{"version":3,"sources":["../../lib/hooks/index.js"],"sourcesContent":["export * from './useIntersectionObserver';\nexport * from './useVirtualizerMeasure';\n//# sourceMappingURL=index.js.map"],"names":[],"mappings":";;;;;oBAAc;oBACA;CACd,iCAAiC"}

package/lib-commonjs/hooks/useIntersectionObserver.js

@@ -1,59 +1,46 @@
 "use strict";
-
 Object.defineProperty(exports, "__esModule", {
-  value: true
+    value: true
+});
+Object.defineProperty(exports, "useIntersectionObserver", {
+    enumerable: true,
+    get: ()=>useIntersectionObserver
 });
-exports.useIntersectionObserver = void 0;
-const React = /*#__PURE__*/require("react");
-const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
-const {
-  useState,
-  useRef
-} = React;
-/**
- * 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.
- * @param options - An optional object which customizes the observer. If options isn't specified, the observer uses the
- * document's viewport as the root, with no margin, and a 0% threshold (meaning that even a one-pixel change is
- * 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.
- */
-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
-  react_utilities_1.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();
-      }
+const _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
+const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
+const _reactUtilities = require("@fluentui/react-utilities");
+const { useState , useRef  } = _react;
+const useIntersectionObserver = (callback, options)=>{
+    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
+    (0, _reactUtilities.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 _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
+    ]);
+    return {
+        setObserverList,
+        setObserverInit,
+        observer
     };
-  }, [observerList, observerInit, callback]);
-  return {
-    setObserverList,
-    setObserverInit,
-    observer
-  };
-};
-exports.useIntersectionObserver = useIntersectionObserver;
+}; //# sourceMappingURL=useIntersectionObserver.js.map
+
 //# sourceMappingURL=useIntersectionObserver.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["React","require","react_utilities_1","useState","useRef","useIntersectionObserver","callback","options","observer","observerList","setObserverList","observerInit","setObserverInit","useIsomorphicLayoutEffect","current","IntersectionObserver","length","forEach","element","_a","observe","disconnect","exports"],"sources":["../src/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"],"mappings":";;;;;;AACA,MAAAA,KAAA,gBAAAC,OAAA;AACA,MAAAC,iBAAA,gBAAAD,OAAA;AAEA,MAAM;EAAEE,QAAQ;EAAEC;AAAM,CAAE,GAAGJ,KAAK;AAElC;;;;;;;;;AAUO,MAAMK,uBAAuB,GAAGA,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,iBAAA,CAAAW,yBAAyB,CAAC,MAAK;IAC7BL,QAAQ,CAACM,OAAO,GAAG,IAAIC,oBAAoB,CAACT,QAAQ,EAAEK,YAAY,CAAC;IAEnE;IACA,IAAIH,QAAQ,CAACM,OAAO,IAAIL,YAAY,IAAIA,YAAY,CAACO,MAAM,GAAG,CAAC,EAAE;MAC/DP,YAAY,CAACQ,OAAO,CAACC,OAAO,IAAG;;QAC7B,CAAAC,EAAA,GAAAX,QAAQ,CAACM,OAAO,cAAAK,EAAA,uBAAAA,EAAA,CAAEC,OAAO,CAACF,OAAO,CAAC;MACpC,CAAC,CAAC;;IAGJ;IACA,OAAO,MAAK;MACV,IAAIV,QAAQ,CAACM,OAAO,EAAE;QACpBN,QAAQ,CAACM,OAAO,CAACO,UAAU,EAAE;;IAEjC,CAAC;EACH,CAAC,EAAE,CAACZ,YAAY,EAAEE,YAAY,EAAEL,QAAQ,CAAC,CAAC;EAE1C,OAAO;IAAEI,eAAe;IAAEE,eAAe;IAAEJ;EAAQ,CAAE;AACvD,CAAC;AAzCYc,OAAA,CAAAjB,uBAAuB,GAAAA,uBAAA"}
+{"version":3,"sources":["../../lib/hooks/useIntersectionObserver.js"],"sourcesContent":["import * as React from 'react';\nimport { useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nconst {\n  useState,\n  useRef\n} = React;\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 */\nexport const useIntersectionObserver = (callback, options) => {\n  const observer = useRef();\n  const [observerList, setObserverList] = useState();\n  const [observerInit, setObserverInit] = useState(options);\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    // 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        var _observer_current;\n        (_observer_current = observer.current) === null || _observer_current === void 0 ? void 0 : _observer_current.observe(element);\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  return {\n    setObserverList,\n    setObserverInit,\n    observer\n  };\n};\n//# sourceMappingURL=useIntersectionObserver.js.map"],"names":["useIntersectionObserver","useState","useRef","React","callback","options","observer","observerList","setObserverList","observerInit","setObserverInit","useIsomorphicLayoutEffect","current","IntersectionObserver","length","forEach","element","_observer_current","observe","disconnect"],"mappings":";;;;+BAeaA;;aAAAA;;;6DAfU;gCACmB;AAC1C,MAAM,EACJC,SAAQ,EACRC,OAAM,EACP,GAAGC;AAUG,MAAMH,0BAA0B,CAACI,UAAUC,UAAY;IAC5D,MAAMC,WAAWJ;IACjB,MAAM,CAACK,cAAcC,gBAAgB,GAAGP;IACxC,MAAM,CAACQ,cAAcC,gBAAgB,GAAGT,SAASI;IACjD,iEAAiE;IACjE,6DAA6D;IAC7DM,IAAAA,yCAAyB,EAAC,IAAM;QAC9BL,SAASM,OAAO,GAAG,IAAIC,qBAAqBT,UAAUK;QACtD,+EAA+E;QAC/E,IAAIH,SAASM,OAAO,IAAIL,gBAAgBA,aAAaO,MAAM,GAAG,GAAG;YAC/DP,aAAaQ,OAAO,CAACC,CAAAA,UAAW;gBAC9B,IAAIC;gBACHA,CAAAA,oBAAoBX,SAASM,OAAO,AAAD,MAAO,IAAI,IAAIK,sBAAsB,KAAK,IAAI,KAAK,IAAIA,kBAAkBC,OAAO,CAACF,QAAQ;YAC/H;QACF,CAAC;QACD,+CAA+C;QAC/C,OAAO,IAAM;YACX,IAAIV,SAASM,OAAO,EAAE;gBACpBN,SAASM,OAAO,CAACO,UAAU;YAC7B,CAAC;QACH;IACF,GAAG;QAACZ;QAAcE;QAAcL;KAAS;IACzC,OAAO;QACLI;QACAE;QACAJ;IACF;AACF,GACA,mDAAmD"}

package/lib-commonjs/hooks/useVirtualizerMeasure.js

@@ -0,0 +1,75 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "useStaticVirtualizerMeasure", {
+    enumerable: true,
+    get: ()=>useStaticVirtualizerMeasure
+});
+const _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
+const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
+const _reactUtilities = require("@fluentui/react-utilities");
+const _debounce = require("../utilities/debounce");
+const useStaticVirtualizerMeasure = (virtualizerProps)=>{
+    const { defaultItemSize , direction ='vertical'  } = virtualizerProps;
+    const [state, setState] = _react.useState({
+        virtualizerLength: 0,
+        bufferSize: 0,
+        bufferItems: 0
+    });
+    const { virtualizerLength , bufferItems , bufferSize  } = state;
+    // The ref the user sets on their scrollView - Defaults to document.body to ensure no null on init
+    const container = _react.useRef(null);
+    const resizeCallback = ()=>{
+        if (!container.current) {
+            return;
+        }
+        const containerSize = direction === 'vertical' ? container.current.getBoundingClientRect().height : container.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
+        });
+    };
+    // the handler for resize observer
+    const handleResize = (0, _debounce.debounce)(resizeCallback);
+    // Keep the reference of ResizeObserver in the state, as it should live through renders
+    const [resizeObserver] = _react.useState((0, _reactUtilities.canUseDOM)() ? new ResizeObserver(handleResize) : undefined);
+    _react.useEffect(()=>{
+        return ()=>{
+            resizeObserver === null || resizeObserver === void 0 ? void 0 : resizeObserver.disconnect();
+        };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    const scrollRef = _react.useCallback((el)=>{
+        if (container.current !== el) {
+            if (container.current) {
+                resizeObserver === null || resizeObserver === void 0 ? void 0 : resizeObserver.unobserve(container.current);
+            }
+            container.current = el;
+            if (container.current) {
+                resizeObserver === null || resizeObserver === void 0 ? void 0 : resizeObserver.observe(container.current);
+            }
+        }
+    }, [
+        resizeObserver
+    ]);
+    return {
+        virtualizerLength,
+        bufferItems,
+        bufferSize,
+        scrollRef
+    };
+}; //# sourceMappingURL=useVirtualizerMeasure.js.map
+
+//# sourceMappingURL=useVirtualizerMeasure.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../lib/hooks/useVirtualizerMeasure.js"],"sourcesContent":["import * as React from 'react';\nimport { canUseDOM } from '@fluentui/react-utilities';\nimport { debounce } from '../utilities/debounce';\n/**\n * React hook that measures virtualized space based on a static size to ensure optimized virtualization length.\n */\nexport const useStaticVirtualizerMeasure = virtualizerProps => {\n  const {\n    defaultItemSize,\n    direction = 'vertical'\n  } = virtualizerProps;\n  const [state, setState] = React.useState({\n    virtualizerLength: 0,\n    bufferSize: 0,\n    bufferItems: 0\n  });\n  const {\n    virtualizerLength,\n    bufferItems,\n    bufferSize\n  } = state;\n  // The ref the user sets on their scrollView - Defaults to document.body to ensure no null on init\n  const container = React.useRef(null);\n  const resizeCallback = () => {\n    if (!container.current) {\n      return;\n    }\n    const containerSize = direction === 'vertical' ? container.current.getBoundingClientRect().height : container.current.getBoundingClientRect().width;\n    /*\n    * Number of items required to cover viewport.\n    */\n    const length = Math.ceil(containerSize / defaultItemSize + 1);\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    * 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    const totalLength = length + newBufferItems * 2 + 1;\n    setState({\n      virtualizerLength: totalLength,\n      bufferItems: newBufferItems,\n      bufferSize: newBufferSize\n    });\n  };\n  // the handler for resize observer\n  const handleResize = debounce(resizeCallback);\n  // Keep the reference of ResizeObserver in the state, as it should live through renders\n  const [resizeObserver] = React.useState(canUseDOM() ? new ResizeObserver(handleResize) : undefined);\n  React.useEffect(() => {\n    return () => {\n      resizeObserver === null || resizeObserver === void 0 ? void 0 : resizeObserver.disconnect();\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n  const scrollRef = React.useCallback(el => {\n    if (container.current !== el) {\n      if (container.current) {\n        resizeObserver === null || resizeObserver === void 0 ? void 0 : resizeObserver.unobserve(container.current);\n      }\n      container.current = el;\n      if (container.current) {\n        resizeObserver === null || resizeObserver === void 0 ? void 0 : resizeObserver.observe(container.current);\n      }\n    }\n  }, [resizeObserver]);\n  return {\n    virtualizerLength,\n    bufferItems,\n    bufferSize,\n    scrollRef\n  };\n};\n//# sourceMappingURL=useVirtualizerMeasure.js.map"],"names":["useStaticVirtualizerMeasure","virtualizerProps","defaultItemSize","direction","state","setState","React","useState","virtualizerLength","bufferSize","bufferItems","container","useRef","resizeCallback","current","containerSize","getBoundingClientRect","height","width","length","Math","ceil","newBufferItems","max","floor","newBufferSize","totalLength","handleResize","debounce","resizeObserver","canUseDOM","ResizeObserver","undefined","useEffect","disconnect","scrollRef","useCallback","el","unobserve","observe"],"mappings":";;;;+BAMaA;;aAAAA;;;6DANU;gCACG;0BACD;AAIlB,MAAMA,8BAA8BC,CAAAA,mBAAoB;IAC7D,MAAM,EACJC,gBAAe,EACfC,WAAY,WAAU,EACvB,GAAGF;IACJ,MAAM,CAACG,OAAOC,SAAS,GAAGC,OAAMC,QAAQ,CAAC;QACvCC,mBAAmB;QACnBC,YAAY;QACZC,aAAa;IACf;IACA,MAAM,EACJF,kBAAiB,EACjBE,YAAW,EACXD,WAAU,EACX,GAAGL;IACJ,kGAAkG;IAClG,MAAMO,YAAYL,OAAMM,MAAM,CAAC,IAAI;IACnC,MAAMC,iBAAiB,IAAM;QAC3B,IAAI,CAACF,UAAUG,OAAO,EAAE;YACtB;QACF,CAAC;QACD,MAAMC,gBAAgBZ,cAAc,aAAaQ,UAAUG,OAAO,CAACE,qBAAqB,GAAGC,MAAM,GAAGN,UAAUG,OAAO,CAACE,qBAAqB,GAAGE,KAAK;QACnJ;;IAEA,GACA,MAAMC,SAASC,KAAKC,IAAI,CAACN,gBAAgBb,kBAAkB;QAC3D;;IAEA,GACA,MAAMoB,iBAAiBF,KAAKG,GAAG,CAACH,KAAKI,KAAK,CAACL,SAAS,IAAI;QACxD;;IAEA,GACA,MAAMM,gBAAgBL,KAAKG,GAAG,CAACH,KAAKI,KAAK,CAACL,SAAS,IAAIjB,kBAAkB;QACzE,MAAMwB,cAAcP,SAASG,iBAAiB,IAAI;QAClDjB,SAAS;YACPG,mBAAmBkB;YACnBhB,aAAaY;YACbb,YAAYgB;QACd;IACF;IACA,kCAAkC;IAClC,MAAME,eAAeC,IAAAA,kBAAQ,EAACf;IAC9B,uFAAuF;IACvF,MAAM,CAACgB,eAAe,GAAGvB,OAAMC,QAAQ,CAACuB,IAAAA,yBAAS,MAAK,IAAIC,eAAeJ,gBAAgBK,SAAS;IAClG1B,OAAM2B,SAAS,CAAC,IAAM;QACpB,OAAO,IAAM;YACXJ,mBAAmB,IAAI,IAAIA,mBAAmB,KAAK,IAAI,KAAK,IAAIA,eAAeK,UAAU,EAAE;QAC7F;IACA,uDAAuD;IACzD,GAAG,EAAE;IACL,MAAMC,YAAY7B,OAAM8B,WAAW,CAACC,CAAAA,KAAM;QACxC,IAAI1B,UAAUG,OAAO,KAAKuB,IAAI;YAC5B,IAAI1B,UAAUG,OAAO,EAAE;gBACrBe,mBAAmB,IAAI,IAAIA,mBAAmB,KAAK,IAAI,KAAK,IAAIA,eAAeS,SAAS,CAAC3B,UAAUG,OAAO,CAAC;YAC7G,CAAC;YACDH,UAAUG,OAAO,GAAGuB;YACpB,IAAI1B,UAAUG,OAAO,EAAE;gBACrBe,mBAAmB,IAAI,IAAIA,mBAAmB,KAAK,IAAI,KAAK,IAAIA,eAAeU,OAAO,CAAC5B,UAAUG,OAAO,CAAC;YAC3G,CAAC;QACH,CAAC;IACH,GAAG;QAACe;KAAe;IACnB,OAAO;QACLrB;QACAE;QACAD;QACA0B;IACF;AACF,GACA,iDAAiD"}

package/lib-commonjs/hooks/useVirtualizerMeasure.types.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+ //# sourceMappingURL=useVirtualizerMeasure.types.js.map
+
+//# sourceMappingURL=useVirtualizerMeasure.types.js.map

package/lib-commonjs/hooks/useVirtualizerMeasure.types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../lib/hooks/useVirtualizerMeasure.types.js"],"sourcesContent":["export {};\n//# sourceMappingURL=useVirtualizerMeasure.types.js.map"],"names":[],"mappings":";;;;CACA,uDAAuD"}

package/lib-commonjs/index.js

@@ -1,45 +1,30 @@
 "use strict";
-
 Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.useIntersectionObserver = exports.useVirtualizerStyles_unstable = exports.renderVirtualizer_unstable = exports.useVirtualizer_unstable = exports.virtualizerClassNames = exports.Virtualizer = void 0;
-var Virtualizer_1 = /*#__PURE__*/require("./Virtualizer");
-Object.defineProperty(exports, "Virtualizer", {
-  enumerable: true,
-  get: function () {
-    return Virtualizer_1.Virtualizer;
-  }
-});
-Object.defineProperty(exports, "virtualizerClassNames", {
-  enumerable: true,
-  get: function () {
-    return Virtualizer_1.virtualizerClassNames;
-  }
-});
-Object.defineProperty(exports, "useVirtualizer_unstable", {
-  enumerable: true,
-  get: function () {
-    return Virtualizer_1.useVirtualizer_unstable;
-  }
+    value: true
 });
-Object.defineProperty(exports, "renderVirtualizer_unstable", {
-  enumerable: true,
-  get: function () {
-    return Virtualizer_1.renderVirtualizer_unstable;
-  }
-});
-Object.defineProperty(exports, "useVirtualizerStyles_unstable", {
-  enumerable: true,
-  get: function () {
-    return Virtualizer_1.useVirtualizerStyles_unstable;
-  }
-});
-var Hooks_1 = /*#__PURE__*/require("./Hooks");
-Object.defineProperty(exports, "useIntersectionObserver", {
-  enumerable: true,
-  get: function () {
-    return Hooks_1.useIntersectionObserver;
-  }
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    Virtualizer: ()=>_virtualizer.Virtualizer,
+    virtualizerClassNames: ()=>_virtualizer.virtualizerClassNames,
+    useVirtualizer_unstable: ()=>_virtualizer.useVirtualizer_unstable,
+    renderVirtualizer_unstable: ()=>_virtualizer.renderVirtualizer_unstable,
+    useVirtualizerStyles_unstable: ()=>_virtualizer.useVirtualizerStyles_unstable,
+    useIntersectionObserver: ()=>_hooks.useIntersectionObserver,
+    useStaticVirtualizerMeasure: ()=>_hooks.useStaticVirtualizerMeasure,
+    VirtualizerScrollView: ()=>_virtualizerScrollView.VirtualizerScrollView,
+    virtualizerScrollViewClassNames: ()=>_virtualizerScrollView.virtualizerScrollViewClassNames,
+    useVirtualizerScrollView_unstable: ()=>_virtualizerScrollView.useVirtualizerScrollView_unstable,
+    renderVirtualizerScrollView_unstable: ()=>_virtualizerScrollView.renderVirtualizerScrollView_unstable,
+    useVirtualizerScrollViewStyles_unstable: ()=>_virtualizerScrollView.useVirtualizerScrollViewStyles_unstable
 });
+const _virtualizer = require("./Virtualizer");
+const _hooks = require("./Hooks");
+const _virtualizerScrollView = require("./VirtualizerScrollView");
+ //# sourceMappingURL=index.js.map
+
 //# sourceMappingURL=index.js.map

package/lib-commonjs/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["Virtualizer_1","require","Object","defineProperty","exports","enumerable","get","Virtualizer","virtualizerClassNames","useVirtualizer_unstable","renderVirtualizer_unstable","useVirtualizerStyles_unstable","Hooks_1","useIntersectionObserver"],"sources":["../src/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"],"mappings":";;;;;;AAAA,IAAAA,aAAA,gBAAAC,OAAA;AACEC,MAAA,CAAAC,cAAA,CAAAC,OAAA;EAAAC,UAAA;EAAAC,GAAA,WAAAA,CAAA;IAAA,OAAAN,aAAA,CAAAO,WAAW;EAAA;AAAA;AACXL,MAAA,CAAAC,cAAA,CAAAC,OAAA;EAAAC,UAAA;EAAAC,GAAA,WAAAA,CAAA;IAAA,OAAAN,aAAA,CAAAQ,qBAAqB;EAAA;AAAA;AACrBN,MAAA,CAAAC,cAAA,CAAAC,OAAA;EAAAC,UAAA;EAAAC,GAAA,WAAAA,CAAA;IAAA,OAAAN,aAAA,CAAAS,uBAAuB;EAAA;AAAA;AACvBP,MAAA,CAAAC,cAAA,CAAAC,OAAA;EAAAC,UAAA;EAAAC,GAAA,WAAAA,CAAA;IAAA,OAAAN,aAAA,CAAAU,0BAA0B;EAAA;AAAA;AAC1BR,MAAA,CAAAC,cAAA,CAAAC,OAAA;EAAAC,UAAA;EAAAC,GAAA,WAAAA,CAAA;IAAA,OAAAN,aAAA,CAAAW,6BAA6B;EAAA;AAAA;AAQ/B,IAAAC,OAAA,gBAAAX,OAAA;AAASC,MAAA,CAAAC,cAAA,CAAAC,OAAA;EAAAC,UAAA;EAAAC,GAAA,WAAAA,CAAA;IAAA,OAAAM,OAAA,CAAAC,uBAAuB;EAAA;AAAA"}
+{"version":3,"sources":["../lib/index.js"],"sourcesContent":["export { Virtualizer, virtualizerClassNames, useVirtualizer_unstable, renderVirtualizer_unstable, useVirtualizerStyles_unstable } from './Virtualizer';\nexport { useIntersectionObserver, useStaticVirtualizerMeasure } from './Hooks';\nexport { VirtualizerScrollView, virtualizerScrollViewClassNames, useVirtualizerScrollView_unstable, renderVirtualizerScrollView_unstable, useVirtualizerScrollViewStyles_unstable } from './VirtualizerScrollView';\n//# sourceMappingURL=index.js.map"],"names":["Virtualizer","virtualizerClassNames","useVirtualizer_unstable","renderVirtualizer_unstable","useVirtualizerStyles_unstable","useIntersectionObserver","useStaticVirtualizerMeasure","VirtualizerScrollView","virtualizerScrollViewClassNames","useVirtualizerScrollView_unstable","renderVirtualizerScrollView_unstable","useVirtualizerScrollViewStyles_unstable"],"mappings":";;;;;;;;;;;IAASA,WAAW,MAAXA,wBAAW;IAAEC,qBAAqB,MAArBA,kCAAqB;IAAEC,uBAAuB,MAAvBA,oCAAuB;IAAEC,0BAA0B,MAA1BA,uCAA0B;IAAEC,6BAA6B,MAA7BA,0CAA6B;IACtHC,uBAAuB,MAAvBA,8BAAuB;IAAEC,2BAA2B,MAA3BA,kCAA2B;IACpDC,qBAAqB,MAArBA,4CAAqB;IAAEC,+BAA+B,MAA/BA,sDAA+B;IAAEC,iCAAiC,MAAjCA,wDAAiC;IAAEC,oCAAoC,MAApCA,2DAAoC;IAAEC,uCAAuC,MAAvCA,8DAAuC;;6BAF1C;uBAClE;uCACoH;CACzL,iCAAiC"}

package/lib-commonjs/utilities/debounce.js

@@ -0,0 +1,29 @@
+/**
+ * Microtask debouncer
+ * https://developer.mozilla.org/en-US/docs/Web/API/HTML_DOM_API/Microtask_guide
+ * @param fn - Function to debounce
+ * @returns debounced function
+ */ "use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "debounce", {
+    enumerable: true,
+    get: ()=>debounce
+});
+function debounce(fn) {
+    let pending;
+    return ()=>{
+        if (!pending) {
+            pending = true;
+            queueMicrotask(()=>{
+                // Need to set pending to `false` before the debounced function is run.
+                // React can actually interrupt the function while it's running!
+                pending = false;
+                fn();
+            });
+        }
+    };
+} //# sourceMappingURL=debounce.js.map
+
+//# sourceMappingURL=debounce.js.map

package/lib-commonjs/utilities/debounce.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../lib/utilities/debounce.js"],"sourcesContent":["/**\n * Microtask debouncer\n * https://developer.mozilla.org/en-US/docs/Web/API/HTML_DOM_API/Microtask_guide\n * @param fn - Function to debounce\n * @returns debounced function\n */export function debounce(fn) {\n  let pending;\n  return () => {\n    if (!pending) {\n      pending = true;\n      queueMicrotask(() => {\n        // Need to set pending to `false` before the debounced function is run.\n        // React can actually interrupt the function while it's running!\n        pending = false;\n        fn();\n      });\n    }\n  };\n}\n//# sourceMappingURL=debounce.js.map"],"names":["debounce","fn","pending","queueMicrotask"],"mappings":"AAAA;;;;;CAKC;;;;+BAAkBA;;aAAAA;;AAAT,SAASA,SAASC,EAAE,EAAE;IAC9B,IAAIC;IACJ,OAAO,IAAM;QACX,IAAI,CAACA,SAAS;YACZA,UAAU,IAAI;YACdC,eAAe,IAAM;gBACnB,uEAAuE;gBACvE,gEAAgE;gBAChED,UAAU,KAAK;gBACfD;YACF;QACF,CAAC;IACH;AACF,EACA,oCAAoC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-virtualizer",
-  "version": "9.0.0-alpha.12",
+  "version": "9.0.0-alpha.14",
   "description": "Generic and composable virtualizer framework built on browser intersection observer",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -20,20 +20,21 @@
     "test": "jest --passWithNoTests",
     "storybook": "start-storybook",
     "start": "yarn storybook",
-    "generate-api": "tsc -p ./tsconfig.lib.json --emitDeclarationOnly && just-scripts api-extractor",
+    "generate-api": "just-scripts generate-api",
     "type-check": "tsc -b tsconfig.json"
   },
   "devDependencies": {
     "@fluentui/eslint-plugin": "*",
     "@fluentui/react-conformance": "*",
-    "@fluentui/react-conformance-griffel": "9.0.0-beta.19",
+    "@fluentui/react-conformance-griffel": "9.0.0-beta.20",
     "@fluentui/scripts-api-extractor": "*",
     "@fluentui/scripts-tasks": "*"
   },
   "dependencies": {
-    "@fluentui/react-utilities": "^9.7.1",
+    "@fluentui/react-utilities": "^9.7.2",
+    "@fluentui/react": "^8.106.8",
     "@griffel/react": "^1.5.2",
-    "tslib": "^2.1.0"
+    "@swc/helpers": "^0.4.14"
   },
   "peerDependencies": {
     "@types/react": ">=16.8.0 <19.0.0",
@@ -51,6 +52,7 @@
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
+      "node": "./lib-commonjs/index.js",
       "import": "./lib/index.js",
       "require": "./lib-commonjs/index.js"
     },