@fluentui/react-virtualizer 9.0.0-alpha.10 → 9.0.0-alpha.101

package/lib/hooks/useDynamicVirtualizerMeasure.js

@@ -0,0 +1,127 @@
+import { useIsomorphicLayoutEffect, useMergedRefs } from '@fluentui/react-utilities';
+import * as React from 'react';
+import { useResizeObserverRef_unstable } from './useResizeObserverRef';
+import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
+/**
+ * React hook that measures virtualized space dynamically to ensure optimized virtualization length.
+ * @deprecated migrated to \@fluentui\-contrib/react\-virtualizer for stable release.
+ */ export const useDynamicVirtualizerMeasure = (virtualizerProps)=>{
+    const { defaultItemSize, direction = 'vertical', numItems, getItemSize, bufferItems, bufferSize, virtualizerContext } = virtualizerProps;
+    const [state, setState] = React.useState({
+        virtualizerLength: 0,
+        virtualizerBufferItems: 0,
+        virtualizerBufferSize: 0
+    });
+    const containerSizeRef = React.useRef(0);
+    const scrollPosition = React.useRef(0);
+    const { virtualizerLength, virtualizerBufferItems, virtualizerBufferSize } = state;
+    const { targetDocument } = useFluent();
+    const container = React.useRef(null);
+    const handleScrollResize = React.useCallback((scrollRef)=>{
+        if (!(scrollRef === null || scrollRef === void 0 ? void 0 : scrollRef.current)) {
+            // Error? ignore?
+            return;
+        }
+        if (scrollRef.current !== (targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.body)) {
+            // We have a local scroll container
+            containerSizeRef.current = direction === 'vertical' ? scrollRef === null || scrollRef === void 0 ? void 0 : scrollRef.current.getBoundingClientRect().height : scrollRef === null || scrollRef === void 0 ? void 0 : scrollRef.current.getBoundingClientRect().width;
+        } else if (targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.defaultView) {
+            var _targetDocument_defaultView, _targetDocument_defaultView1;
+            // If our scroll ref is the document body, we should check window height
+            containerSizeRef.current = direction === 'vertical' ? targetDocument === null || targetDocument === void 0 ? void 0 : (_targetDocument_defaultView = targetDocument.defaultView) === null || _targetDocument_defaultView === void 0 ? void 0 : _targetDocument_defaultView.innerHeight : targetDocument === null || targetDocument === void 0 ? void 0 : (_targetDocument_defaultView1 = targetDocument.defaultView) === null || _targetDocument_defaultView1 === void 0 ? void 0 : _targetDocument_defaultView1.innerWidth;
+        }
+        let indexSizer = 0;
+        let i = 0;
+        let length = 0;
+        const startIndex = virtualizerContext.contextIndex;
+        const sizeToBeat = containerSizeRef.current + virtualizerBufferSize * 2;
+        while(indexSizer <= sizeToBeat && i + startIndex < numItems){
+            const iItemSize = getItemSize(startIndex + i);
+            if (virtualizerContext.childProgressiveSizes.current.length < numItems) {
+                /* We are in unknown territory, either an initial render or an update
+            in virtualizer item length has occurred.
+            We need to let the new items render first then we can accurately assess.*/ return virtualizerLength - virtualizerBufferSize * 2;
+            }
+            const currentScrollPos = scrollPosition.current;
+            const currentItemPos = virtualizerContext.childProgressiveSizes.current[startIndex + i] - iItemSize;
+            if (currentScrollPos > currentItemPos + iItemSize) {
+                // The item isn't in view, ignore for now.
+                i++;
+                continue;
+            } else if (currentScrollPos > currentItemPos) {
+                // The item is partially out of view, ignore the out of bounds portion
+                const variance = currentItemPos + iItemSize - currentScrollPos;
+                indexSizer += variance;
+            } else {
+                // Item is in view
+                indexSizer += iItemSize;
+            }
+            // Increment
+            i++;
+            length++;
+        }
+        /*
+       * Number of items to append at each end, i.e. 'preload' each side before entering view.
+       * Minimum: 2 - we give slightly more buffer for dynamic version.
+       */ const newBufferItems = bufferItems !== null && bufferItems !== void 0 ? bufferItems : Math.max(Math.ceil(length / 3), 1);
+        /*
+       * This is how far we deviate into the bufferItems to detect a redraw.
+       */ const newBufferSize = bufferSize !== null && bufferSize !== void 0 ? bufferSize : Math.max(defaultItemSize / 2, 1);
+        const totalLength = length + newBufferItems * 2;
+        setState({
+            virtualizerLength: totalLength,
+            virtualizerBufferSize: newBufferSize,
+            virtualizerBufferItems: newBufferItems
+        });
+    }, [
+        bufferItems,
+        bufferSize,
+        defaultItemSize,
+        direction,
+        getItemSize,
+        numItems,
+        targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.body,
+        targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.defaultView,
+        virtualizerBufferSize,
+        virtualizerContext.childProgressiveSizes,
+        virtualizerContext.contextIndex,
+        virtualizerLength
+    ]);
+    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) {
+            handleScrollResize(scrollRef);
+        }
+    }, [
+        handleScrollResize
+    ]);
+    const scrollRef = useMergedRefs(container, useResizeObserverRef_unstable(resizeCallback));
+    useIsomorphicLayoutEffect(()=>{
+        if (virtualizerContext.contextIndex + virtualizerLength < numItems) {
+            // Avoid re-rendering/re-calculating when the end index has already been reached
+            handleScrollResize(container);
+        }
+    }, [
+        handleScrollResize,
+        numItems,
+        virtualizerContext.contextIndex,
+        virtualizerLength
+    ]);
+    const updateScrollPosition = React.useCallback((_scrollPosition)=>{
+        scrollPosition.current = _scrollPosition;
+        // Check if our vLength's need recalculating
+        handleScrollResize(scrollRef);
+    }, [
+        handleScrollResize,
+        scrollRef
+    ]);
+    return {
+        virtualizerLength,
+        bufferItems: virtualizerBufferItems,
+        bufferSize: virtualizerBufferSize,
+        scrollRef,
+        containerSizeRef,
+        updateScrollPosition
+    };
+};

package/lib/hooks/useDynamicVirtualizerMeasure.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/hooks/useDynamicVirtualizerMeasure.ts"],"sourcesContent":["import { useIsomorphicLayoutEffect, useMergedRefs } from '@fluentui/react-utilities';\nimport * as React from 'react';\nimport { VirtualizerMeasureDynamicProps } from './hooks.types';\nimport { useResizeObserverRef_unstable } from './useResizeObserverRef';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\n\n/**\n * React hook that measures virtualized space dynamically to ensure optimized virtualization length.\n * @deprecated migrated to \\@fluentui\\-contrib/react\\-virtualizer for stable release.\n */\nexport const useDynamicVirtualizerMeasure = <TElement extends HTMLElement>(\n  virtualizerProps: VirtualizerMeasureDynamicProps,\n): {\n  virtualizerLength: number;\n  bufferItems: number;\n  bufferSize: number;\n  scrollRef: (instance: TElement | null) => void;\n  containerSizeRef: React.RefObject<number>;\n  updateScrollPosition: (scrollPosition: number) => void;\n} => {\n  const {\n    defaultItemSize,\n    direction = 'vertical',\n    numItems,\n    getItemSize,\n    bufferItems,\n    bufferSize,\n    virtualizerContext,\n  } = virtualizerProps;\n\n  const [state, setState] = React.useState({\n    virtualizerLength: 0,\n    virtualizerBufferItems: 0,\n    virtualizerBufferSize: 0,\n  });\n\n  const containerSizeRef = React.useRef<number>(0);\n  const scrollPosition = React.useRef<number>(0);\n  const { virtualizerLength, virtualizerBufferItems, virtualizerBufferSize } = state;\n\n  const { targetDocument } = useFluent();\n  const container = React.useRef<HTMLElement | null>(null);\n  const handleScrollResize = React.useCallback(\n    (scrollRef: React.MutableRefObject<HTMLElement | null>) => {\n      if (!scrollRef?.current) {\n        // Error? ignore?\n        return;\n      }\n\n      if (scrollRef.current !== targetDocument?.body) {\n        // We have a local scroll container\n        containerSizeRef.current =\n          direction === 'vertical'\n            ? scrollRef?.current.getBoundingClientRect().height\n            : scrollRef?.current.getBoundingClientRect().width;\n      } else if (targetDocument?.defaultView) {\n        // If our scroll ref is the document body, we should check window height\n        containerSizeRef.current =\n          direction === 'vertical' ? targetDocument?.defaultView?.innerHeight : targetDocument?.defaultView?.innerWidth;\n      }\n\n      let indexSizer = 0;\n      let i = 0;\n      let length = 0;\n\n      const startIndex = virtualizerContext.contextIndex;\n      const sizeToBeat = containerSizeRef.current + virtualizerBufferSize * 2;\n\n      while (indexSizer <= sizeToBeat && i + startIndex < numItems) {\n        const iItemSize = getItemSize(startIndex + i);\n        if (virtualizerContext.childProgressiveSizes.current.length < numItems) {\n          /* We are in unknown territory, either an initial render or an update\n            in virtualizer item length has occurred.\n            We need to let the new items render first then we can accurately assess.*/\n          return virtualizerLength - virtualizerBufferSize * 2;\n        }\n\n        const currentScrollPos = scrollPosition.current;\n        const currentItemPos = virtualizerContext.childProgressiveSizes.current[startIndex + i] - iItemSize;\n\n        if (currentScrollPos > currentItemPos + iItemSize) {\n          // The item isn't in view, ignore for now.\n          i++;\n          continue;\n        } else if (currentScrollPos > currentItemPos) {\n          // The item is partially out of view, ignore the out of bounds portion\n          const variance = currentItemPos + iItemSize - currentScrollPos;\n          indexSizer += variance;\n        } else {\n          // Item is in view\n          indexSizer += iItemSize;\n        }\n        // Increment\n        i++;\n        length++;\n      }\n\n      /*\n       * Number of items to append at each end, i.e. 'preload' each side before entering view.\n       * Minimum: 2 - we give slightly more buffer for dynamic version.\n       */\n      const newBufferItems = bufferItems ?? Math.max(Math.ceil(length / 3), 1);\n\n      /*\n       * This is how far we deviate into the bufferItems to detect a redraw.\n       */\n      const newBufferSize = bufferSize ?? Math.max(defaultItemSize / 2, 1);\n      const totalLength = length + newBufferItems * 2;\n\n      setState({\n        virtualizerLength: totalLength,\n        virtualizerBufferSize: newBufferSize,\n        virtualizerBufferItems: newBufferItems,\n      });\n    },\n    [\n      bufferItems,\n      bufferSize,\n      defaultItemSize,\n      direction,\n      getItemSize,\n      numItems,\n      targetDocument?.body,\n      targetDocument?.defaultView,\n      virtualizerBufferSize,\n      virtualizerContext.childProgressiveSizes,\n      virtualizerContext.contextIndex,\n      virtualizerLength,\n    ],\n  );\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) {\n        handleScrollResize(scrollRef);\n      }\n    },\n    [handleScrollResize],\n  );\n\n  const scrollRef = useMergedRefs(container, useResizeObserverRef_unstable(resizeCallback));\n\n  useIsomorphicLayoutEffect(() => {\n    if (virtualizerContext.contextIndex + virtualizerLength < numItems) {\n      // Avoid re-rendering/re-calculating when the end index has already been reached\n      handleScrollResize(container);\n    }\n  }, [handleScrollResize, numItems, virtualizerContext.contextIndex, virtualizerLength]);\n\n  const updateScrollPosition = React.useCallback(\n    (_scrollPosition: number) => {\n      scrollPosition.current = _scrollPosition;\n      // Check if our vLength's need recalculating\n      handleScrollResize(scrollRef);\n    },\n    [handleScrollResize, scrollRef],\n  );\n\n  return {\n    virtualizerLength,\n    bufferItems: virtualizerBufferItems,\n    bufferSize: virtualizerBufferSize,\n    scrollRef,\n    containerSizeRef,\n    updateScrollPosition,\n  };\n};\n"],"names":["useIsomorphicLayoutEffect","useMergedRefs","React","useResizeObserverRef_unstable","useFluent_unstable","useFluent","useDynamicVirtualizerMeasure","virtualizerProps","defaultItemSize","direction","numItems","getItemSize","bufferItems","bufferSize","virtualizerContext","state","setState","useState","virtualizerLength","virtualizerBufferItems","virtualizerBufferSize","containerSizeRef","useRef","scrollPosition","targetDocument","container","handleScrollResize","useCallback","scrollRef","current","body","getBoundingClientRect","height","width","defaultView","innerHeight","innerWidth","indexSizer","i","length","startIndex","contextIndex","sizeToBeat","iItemSize","childProgressiveSizes","currentScrollPos","currentItemPos","variance","newBufferItems","Math","max","ceil","newBufferSize","totalLength","resizeCallback","_entries","_observer","updateScrollPosition","_scrollPosition"],"mappings":"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"}

package/lib/hooks/useIntersectionObserver.js

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

package/lib/hooks/useIntersectionObserver.js.map

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

package/lib/hooks/useMeasureList.js

@@ -0,0 +1,129 @@
+import * as React 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
+ * @deprecated migrated to \@fluentui\-contrib/react\-virtualizer for stable release.
+ */ 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 = React.useRef(0);
+    // the handler for resize observer
+    const handleIndexUpdate = React.useCallback((index)=>{
+        var _refArray_current_index;
+        let isChanged = false;
+        const boundClientRect = (_refArray_current_index = refArray.current[index]) === null || _refArray_current_index === void 0 ? void 0 : _refArray_current_index.getBoundingClientRect();
+        const containerWidth = boundClientRect === null || boundClientRect === void 0 ? void 0 : boundClientRect.width;
+        if (containerWidth !== widthArray.current[currentIndex + index]) {
+            isChanged = true;
+        }
+        widthArray.current[currentIndex + index] = containerWidth || defaultItemSize;
+        const containerHeight = boundClientRect === null || boundClientRect === void 0 ? void 0 : boundClientRect.height;
+        if (containerHeight !== heightArray.current[currentIndex + index]) {
+            isChanged = true;
+        }
+        heightArray.current[currentIndex + index] = containerHeight || defaultItemSize;
+        if (isChanged) {
+            sizeUpdateCount.current = sizeUpdateCount.current + 1;
+        }
+    }, [
+        currentIndex,
+        defaultItemSize,
+        sizeUpdateCount
+    ]);
+    const handleElementResizeCallback = (entries)=>{
+        for (const entry of entries){
+            const target = entry.target;
+            // Call the elements own resize handler (indexed)
+            target.handleResize();
+        }
+    };
+    React.useEffect(()=>{
+        const newHeightLength = totalLength - heightArray.current.length;
+        const newWidthLength = totalLength - widthArray.current.length;
+        /* Ensure we grow or truncate arrays with prior properties,
+    keeping the existing values is important for whitespace assumptions.
+    Even if items in the 'middle' are deleted, we will recalc the whitespace as it is explored.*/ if (newWidthLength > 0) {
+            widthArray.current = widthArray.current.concat(new Array(newWidthLength).fill(defaultItemSize));
+        } else if (newWidthLength < 0) {
+            widthArray.current = widthArray.current.slice(0, totalLength);
+        }
+        if (newHeightLength > 0) {
+            heightArray.current = heightArray.current.concat(new Array(newHeightLength).fill(defaultItemSize));
+        } else if (newHeightLength < 0) {
+            heightArray.current = heightArray.current.slice(0, totalLength);
+        }
+    }, [
+        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
+ * @deprecated migrated to \@fluentui\-contrib/react\-virtualizer for stable release.
+ */ 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":["../src/hooks/useMeasureList.ts"],"sourcesContent":["import * as React from 'react';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\n\n/**\n * @deprecated migrated to \\@fluentui\\-contrib/react\\-virtualizer for stable release.\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 * @deprecated migrated to \\@fluentui\\-contrib/react\\-virtualizer for stable release.\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 = React.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    const newHeightLength = totalLength - heightArray.current.length;\n    const newWidthLength = totalLength - widthArray.current.length;\n    /* Ensure we grow or truncate arrays with prior properties,\n    keeping the existing values is important for whitespace assumptions.\n    Even if items in the 'middle' are deleted, we will recalc the whitespace as it is explored.*/\n    if (newWidthLength > 0) {\n      widthArray.current = widthArray.current.concat(new Array(newWidthLength).fill(defaultItemSize));\n    } else if (newWidthLength < 0) {\n      widthArray.current = widthArray.current.slice(0, totalLength);\n    }\n    if (newHeightLength > 0) {\n      heightArray.current = heightArray.current.concat(new Array(newHeightLength).fill(defaultItemSize));\n    } else if (newHeightLength < 0) {\n      heightArray.current = heightArray.current.slice(0, totalLength);\n    }\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 * @deprecated migrated to \\@fluentui\\-contrib/react\\-virtualizer for stable release.\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","useFluent_unstable","useFluent","useMeasureList","currentIndex","refLength","totalLength","defaultItemSize","widthArray","useRef","Array","fill","heightArray","refArray","targetDocument","sizeUpdateCount","handleIndexUpdate","useCallback","index","isChanged","boundClientRect","current","getBoundingClientRect","containerWidth","width","containerHeight","height","handleElementResizeCallback","entries","entry","target","handleResize","useEffect","newHeightLength","length","newWidthLength","concat","slice","resizeObserver","createResizeObserverFromDocument","createIndexedRef","measureElementRef","el","undefined","unobserve","observe","_resizeObserver","disconnect","callback","defaultView","ResizeObserver"],"mappings":"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"}

package/lib/hooks/useMutationObserver.js

@@ -0,0 +1,40 @@
+import * as React from 'react';
+import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
+const { useRef, useEffect } = React;
+/**
+ * @deprecated migrated to \@fluentui\-contrib/react\-virtualizer for stable release.
+ */ 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":["../src/hooks/useMutationObserver.ts"],"sourcesContent":["import * as React from 'react';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\n\nconst { useRef, useEffect } = React;\n\n/**\n * @deprecated migrated to \\@fluentui\\-contrib/react\\-virtualizer for stable release.\n */\nexport const useMutationObserver = (\n  target: Element | Document | undefined,\n  callback: MutationCallback,\n  options?: MutationObserverInit,\n): {\n  observer: React.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":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,sBAAsBC,SAAS,QAAQ,kCAAkC;AAElF,MAAM,EAAEC,MAAM,EAAEC,SAAS,EAAE,GAAGJ;AAE9B;;CAEC,GACD,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,61 @@
+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
+ * @deprecated migrated to \@fluentui\-contrib/react\-virtualizer for stable release.
+ */ export const useResizeObserverRef_unstable = (resizeCallback)=>{
+    'use no memo';
+    const { targetDocument } = useFluent();
+    const container = React.useRef(null);
+    const containerHeightRef = React.useRef(0);
+    const containerWidthRef = React.useRef(0);
+    // 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)=>{
+        var _container_current, _container_current1;
+        const containerHeight = (_container_current = container.current) === null || _container_current === void 0 ? void 0 : _container_current.clientHeight;
+        const containerWidth = (_container_current1 = container.current) === null || _container_current1 === void 0 ? void 0 : _container_current1.clientWidth;
+        // Our resize observer will fire on scroll resize, let index change handle that instead.
+        if (containerHeightRef.current !== containerHeight || containerWidth !== containerWidthRef.current) {
+            containerWidthRef.current = containerWidth !== null && containerWidth !== void 0 ? containerWidth : 0;
+            containerHeightRef.current = containerHeight !== null && containerHeight !== void 0 ? containerHeight : 0;
+            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;
+};