@fluentui/react-virtualizer 9.0.0-alpha.56 → 9.0.0-alpha.57

package/CHANGELOG.md

@@ -1,12 +1,21 @@
 # Change Log - @fluentui/react-virtualizer
 
-This log was last generated on Thu, 09 Nov 2023 17:23:18 GMT and should not be manually modified.
+This log was last generated on Fri, 10 Nov 2023 13:45:57 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.0.0-alpha.57](https://github.com/microsoft/fluentui/tree/@fluentui/react-virtualizer_v9.0.0-alpha.57)
+
+Fri, 10 Nov 2023 13:45:57 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-virtualizer_v9.0.0-alpha.56..@fluentui/react-virtualizer_v9.0.0-alpha.57)
+
+### Changes
+
+- feat: Ensure IO handles RTL margin and mutations ([PR #29501](https://github.com/microsoft/fluentui/pull/29501) by mifraser@microsoft.com)
+
 ## [9.0.0-alpha.56](https://github.com/microsoft/fluentui/tree/@fluentui/react-virtualizer_v9.0.0-alpha.56)
 
-Thu, 09 Nov 2023 17:23:18 GMT 
+Thu, 09 Nov 2023 17:29:48 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-virtualizer_v9.0.0-alpha.55..@fluentui/react-virtualizer_v9.0.0-alpha.56)
 
 ### Changes

package/dist/index.d.ts

@@ -74,7 +74,7 @@ export declare const useDynamicVirtualizerMeasure: <TElement extends HTMLElement
  */
 export declare const useIntersectionObserver: (callback: IntersectionObserverCallback, options?: IntersectionObserverInit) => {
     setObserverList: Dispatch<SetStateAction<Element[] | undefined>>;
-    setObserverInit: Dispatch<SetStateAction<IntersectionObserverInit | undefined>>;
+    setObserverInit: (newInit: IntersectionObserverInit | undefined) => void;
     observer: MutableRefObject<IntersectionObserver | undefined>;
 };
 

package/lib/hooks/useIntersectionObserver.js

@@ -1,6 +1,32 @@
 import * as React from 'react';
 import { useIsomorphicLayoutEffect } from '@fluentui/react-utilities';
-const { useState, useRef } = React;
+import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
+const { useCallback, useState, useRef } = React;
+import { useMutationObserver } from './useMutationObserver';
+/**
+ * This function will take the rootMargin and flip the sides if we are in RTL based on the computed reading direction of the target element.
+ * @param ltrRootMargin the margin to be processed and flipped if required
+ * @param target target element that will have its current reading direction determined
+ * @returns the corrected rootMargin (if it was necessary to correct)
+ */ export const getRTLRootMargin = (ltrRootMargin, target)=>{
+    if (target) {
+        // get the computed dir for the target element
+        const newDir = 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,10 +38,47 @@ const { useState, useRef } = React;
  */ export const useIntersectionObserver = (callback, options)=>{
     const observer = useRef();
     const [observerList, setObserverList] = useState();
-    const [observerInit, setObserverInit] = useState(options);
+    const { targetDocument } = useFluent();
+    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)
+    });
+    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)
+                });
+            }
+        }
+    }, [
+        ltrRootMargin,
+        observerInit,
+        options === null || options === void 0 ? void 0 : options.root
+    ]);
+    // 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(()=>{
+        observer.current = new IntersectionObserver(callback, {
+            ...observerInit,
+            rootMargin: getRTLRootMargin(ltrRootMargin.current, observerInit === null || observerInit === void 0 ? void 0 : observerInit.root)
+        });
         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) {
@@ -35,9 +98,23 @@ const { useState, useRef } = React;
         observerInit,
         callback
     ]);
+    // 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)
+        });
+    }, [
+        ltrRootMargin,
+        setObserverInit
+    ]);
     return {
         setObserverList,
-        setObserverInit,
+        setObserverInit: setObserverInitExternal,
         observer
     };
 };

package/lib/hooks/useIntersectionObserver.js.map

@@ -1 +1 @@
-{"version":3,"sources":["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  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"],"names":["React","useIsomorphicLayoutEffect","useState","useRef","useIntersectionObserver","callback","options","observer","observerList","setObserverList","observerInit","setObserverInit","current","IntersectionObserver","length","forEach","element","observe","disconnect"],"mappings":"AACA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,yBAAyB,QAAQ,4BAA4B;AAEtE,MAAM,EAAEC,QAAQ,EAAEC,MAAM,EAAE,GAAGH;AAE7B;;;;;;;;CAQC,GAED,OAAO,MAAMI,0BAA0B,CACrCC,UACAC;IAMA,MAAMC,WAAWJ;IACjB,MAAM,CAACK,cAAcC,gBAAgB,GAAGP;IACxC,MAAM,CAACQ,cAAcC,gBAAgB,GAAGT,SAA+CI;IAEvF,iEAAiE;IACjE,6DAA6D;IAC7DL,0BAA0B;QACxBM,SAASK,OAAO,GAAG,IAAIC,qBAAqBR,UAAUK;QAEtD,+EAA+E;QAC/E,IAAIH,SAASK,OAAO,IAAIJ,gBAAgBA,aAAaM,MAAM,GAAG,GAAG;YAC/DN,aAAaO,OAAO,CAACC,CAAAA;oBACnBT;iBAAAA,oBAAAA,SAASK,OAAO,cAAhBL,wCAAAA,kBAAkBU,OAAO,CAACD;YAC5B;QACF;QAEA,+CAA+C;QAC/C,OAAO;YACL,IAAIT,SAASK,OAAO,EAAE;gBACpBL,SAASK,OAAO,CAACM,UAAU;YAC7B;QACF;IACF,GAAG;QAACV;QAAcE;QAAcL;KAAS;IAEzC,OAAO;QAAEI;QAAiBE;QAAiBJ;IAAS;AACtD,EAAE"}
+{"version":3,"sources":["useIntersectionObserver.ts"],"sourcesContent":["import type { Dispatch, MutableRefObject, SetStateAction } from 'react';\nimport * as React from 'react';\nimport { useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\n\nconst { useCallback, useState, useRef } = React;\nimport { useMutationObserver } from './useMutationObserver';\n\n/**\n * This function will take the rootMargin and flip the sides if we are in RTL based on the computed reading direction of the target element.\n * @param ltrRootMargin the margin to be processed and flipped if required\n * @param target target element that will have its current reading direction determined\n * @returns the corrected rootMargin (if it was necessary to correct)\n */\nexport const getRTLRootMargin = (ltrRootMargin: string, target?: Element | Document | null | undefined): string => {\n  if (target) {\n    // get the computed dir for the target element\n    const newDir = getComputedStyle(target as Element).direction;\n\n    // If we're in rtl reading direction, we might need to flip the margins on the left/right sides\n    if (newDir === 'rtl') {\n      let newMargin = ltrRootMargin;\n      const splitMargins = ltrRootMargin.split(' ');\n\n      // We only need to do this if we get four values, otherwise the sides are equal and don't require flipping.\n      if (splitMargins.length === 4) {\n        newMargin = `${splitMargins[0]} ${splitMargins[3]} ${splitMargins[2]} ${splitMargins[1]}`;\n      }\n\n      return newMargin;\n    } else {\n      return ltrRootMargin;\n    }\n  }\n\n  return ltrRootMargin;\n};\n\n/**\n * React hook that allows easy usage of the browser API IntersectionObserver within React\n * @param callback - A function called when the percentage of the target element is visible crosses a threshold.\n * @param options - An optional object which customizes the observer. If options isn't specified, the observer uses the\n * document's viewport as the root, with no margin, and a 0% threshold (meaning that even a one-pixel change is\n * enough to trigger a callback).\n * @returns An array containing a callback to update the list of Elements the observer should listen to, a callback to\n * update the init options of the IntersectionObserver and a ref to the IntersectionObserver instance itself.\n */\n\nexport const useIntersectionObserver = (\n  callback: IntersectionObserverCallback,\n  options?: IntersectionObserverInit,\n): {\n  setObserverList: Dispatch<SetStateAction<Element[] | undefined>>;\n  setObserverInit: (newInit: IntersectionObserverInit | undefined) => void;\n  observer: MutableRefObject<IntersectionObserver | undefined>;\n} => {\n  const observer = useRef<IntersectionObserver>();\n  const [observerList, setObserverList] = useState<Element[]>();\n  const { targetDocument } = useFluent();\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),\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),\n          });\n        }\n      }\n    },\n    [ltrRootMargin, observerInit, options?.root],\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    observer.current = new IntersectionObserver(callback, {\n      ...observerInit,\n      rootMargin: getRTLRootMargin(ltrRootMargin.current, observerInit?.root),\n    });\n\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  // 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),\n      });\n    },\n    [ltrRootMargin, setObserverInit],\n  );\n\n  return { setObserverList, setObserverInit: setObserverInitExternal, observer };\n};\n"],"names":["React","useIsomorphicLayoutEffect","useFluent_unstable","useFluent","useCallback","useState","useRef","useMutationObserver","getRTLRootMargin","ltrRootMargin","target","newDir","getComputedStyle","direction","newMargin","splitMargins","split","length","useIntersectionObserver","callback","options","observer","observerList","setObserverList","targetDocument","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/useMutationObserver.js

@@ -0,0 +1,28 @@
+import * as React from 'react';
+const { useRef, useEffect } = React;
+export const useMutationObserver = (target, callback, options)=>{
+    const observer = useRef();
+    useEffect(()=>{
+        // Create an observer instance linked to the callback function
+        observer.current = new MutationObserver(callback);
+    }, [
+        callback
+    ]);
+    useEffect(()=>{
+        if (target) {
+            var // Start observing the target node for configured mutations
+            _observer_current;
+            (_observer_current = observer.current) === null || _observer_current === void 0 ? void 0 : _observer_current.observe(target, options);
+        }
+        return ()=>{
+            var _observer_current;
+            (_observer_current = observer.current) === null || _observer_current === void 0 ? void 0 : _observer_current.disconnect();
+        };
+    }, [
+        target,
+        options
+    ]);
+    return {
+        observer
+    };
+};

package/lib/hooks/useMutationObserver.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["useMutationObserver.ts"],"sourcesContent":["import type { MutableRefObject } from 'react';\nimport * as React from 'react';\n\nconst { useRef, useEffect } = React;\n\nexport const useMutationObserver = (\n  target: Element | Document | undefined,\n  callback: MutationCallback,\n  options?: MutationObserverInit,\n): {\n  observer: MutableRefObject<MutationObserver | undefined>;\n} => {\n  const observer = useRef<MutationObserver>();\n\n  useEffect(() => {\n    // Create an observer instance linked to the callback function\n    observer.current = new MutationObserver(callback);\n  }, [callback]);\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","useRef","useEffect","useMutationObserver","target","callback","options","observer","current","MutationObserver","observe","disconnect"],"mappings":"AACA,YAAYA,WAAW,QAAQ;AAE/B,MAAM,EAAEC,MAAM,EAAEC,SAAS,EAAE,GAAGF;AAE9B,OAAO,MAAMG,sBAAsB,CACjCC,QACAC,UACAC;IAIA,MAAMC,WAAWN;IAEjBC,UAAU;QACR,8DAA8D;QAC9DK,SAASC,OAAO,GAAG,IAAIC,iBAAiBJ;IAC1C,GAAG;QAACA;KAAS;IAEbH,UAAU;QACR,IAAIE,QAAQ;gBACV,2DAA2D;YAC3DG;aAAAA,oBAAAA,SAASC,OAAO,cAAhBD,wCAAAA,kBAAkBG,OAAO,CAACN,QAAQE;QACpC;QAEA,OAAO;gBACLC;aAAAA,oBAAAA,SAASC,OAAO,cAAhBD,wCAAAA,kBAAkBI,UAAU;QAC9B;IACF,GAAG;QAACP;QAAQE;KAAQ;IAEpB,OAAO;QAAEC;IAAS;AACpB,EAAE"}

package/lib-commonjs/hooks/useIntersectionObserver.js

@@ -2,23 +2,89 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-Object.defineProperty(exports, "useIntersectionObserver", {
-    enumerable: true,
-    get: function() {
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    getRTLRootMargin: function() {
+        return getRTLRootMargin;
+    },
+    useIntersectionObserver: function() {
         return useIntersectionObserver;
     }
 });
 const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
 const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 const _reactutilities = require("@fluentui/react-utilities");
-const { useState, useRef } = _react;
+const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
+const _useMutationObserver = require("./useMutationObserver");
+const { useCallback, useState, useRef } = _react;
+const getRTLRootMargin = (ltrRootMargin, target)=>{
+    if (target) {
+        // get the computed dir for the target element
+        const newDir = 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;
+};
 const useIntersectionObserver = (callback, options)=>{
     const observer = useRef();
     const [observerList, setObserverList] = useState();
-    const [observerInit, setObserverInit] = useState(options);
+    const { targetDocument } = (0, _reactsharedcontexts.useFluent_unstable)();
+    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)
+    });
+    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)
+                });
+            }
+        }
+    }, [
+        ltrRootMargin,
+        observerInit,
+        options === null || options === void 0 ? void 0 : options.root
+    ]);
+    // Mutation observer for dir attribute changes in the document
+    (0, _useMutationObserver.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
     (0, _reactutilities.useIsomorphicLayoutEffect)(()=>{
+        observer.current = new IntersectionObserver(callback, {
+            ...observerInit,
+            rootMargin: getRTLRootMargin(ltrRootMargin.current, observerInit === null || observerInit === void 0 ? void 0 : observerInit.root)
+        });
         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) {
@@ -38,9 +104,23 @@ const useIntersectionObserver = (callback, options)=>{
         observerInit,
         callback
     ]);
+    // 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)
+        });
+    }, [
+        ltrRootMargin,
+        setObserverInit
+    ]);
     return {
         setObserverList,
-        setObserverInit,
+        setObserverInit: setObserverInitExternal,
         observer
     };
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["useIntersectionObserver.js"],"sourcesContent":["import * as React from 'react';\nimport { useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nconst { useState, useRef } = 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 */ export 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    }, [\n        observerList,\n        observerInit,\n        callback\n    ]);\n    return {\n        setObserverList,\n        setObserverInit,\n        observer\n    };\n};\n"],"names":["useIntersectionObserver","useState","useRef","React","callback","options","observer","observerList","setObserverList","observerInit","setObserverInit","useIsomorphicLayoutEffect","current","IntersectionObserver","length","forEach","element","_observer_current","observe","disconnect"],"mappings":";;;;+BAWiBA;;;eAAAA;;;;iEAXM;gCACmB;AAC1C,MAAM,EAAEC,QAAQ,EAAEC,MAAM,EAAE,GAAGC;AASlB,MAAMH,0BAA0B,CAACI,UAAUC;IAClD,MAAMC,WAAWJ;IACjB,MAAM,CAACK,cAAcC,gBAAgB,GAAGP;IACxC,MAAM,CAACQ,cAAcC,gBAAgB,GAAGT,SAASI;IACjD,iEAAiE;IACjE,6DAA6D;IAC7DM,IAAAA,yCAAyB,EAAC;QACtBL,SAASM,OAAO,GAAG,IAAIC,qBAAqBT,UAAUK;QACtD,+EAA+E;QAC/E,IAAIH,SAASM,OAAO,IAAIL,gBAAgBA,aAAaO,MAAM,GAAG,GAAG;YAC7DP,aAAaQ,OAAO,CAAC,CAACC;gBAClB,IAAIC;gBACHA,CAAAA,oBAAoBX,SAASM,OAAO,AAAD,MAAO,QAAQK,sBAAsB,KAAK,IAAI,KAAK,IAAIA,kBAAkBC,OAAO,CAACF;YACzH;QACJ;QACA,+CAA+C;QAC/C,OAAO;YACH,IAAIV,SAASM,OAAO,EAAE;gBAClBN,SAASM,OAAO,CAACO,UAAU;YAC/B;QACJ;IACJ,GAAG;QACCZ;QACAE;QACAL;KACH;IACD,OAAO;QACHI;QACAE;QACAJ;IACJ;AACJ"}
+{"version":3,"sources":["useIntersectionObserver.js"],"sourcesContent":["import * as React from 'react';\nimport { useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nconst { useCallback, useState, useRef } = React;\nimport { useMutationObserver } from './useMutationObserver';\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 */ export const getRTLRootMargin = (ltrRootMargin, target)=>{\n    if (target) {\n        // get the computed dir for the target element\n        const newDir = getComputedStyle(target).direction;\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            // 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            return newMargin;\n        } else {\n            return ltrRootMargin;\n        }\n    }\n    return ltrRootMargin;\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 */ export const useIntersectionObserver = (callback, options)=>{\n    const observer = useRef();\n    const [observerList, setObserverList] = useState();\n    const { targetDocument } = useFluent();\n    var _options_rootMargin;\n    // set the initial init with corrected margins based on the observed root's calculated reading direction.\n    const [observerInit, setObserverInit] = useState(options && {\n        ...options,\n        rootMargin: getRTLRootMargin((_options_rootMargin = options.rootMargin) !== null && _options_rootMargin !== void 0 ? _options_rootMargin : '0px', options.root)\n    });\n    var _options_rootMargin1;\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((_options_rootMargin1 = options === null || options === void 0 ? void 0 : options.rootMargin) !== null && _options_rootMargin1 !== void 0 ? _options_rootMargin1 : '0px');\n    // Callback function to execute when mutations are observed\n    const mutationObserverCallback = useCallback((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 (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)) {\n                setObserverInit({\n                    ...observerInit,\n                    rootMargin: getRTLRootMargin(ltrRootMargin.current, observerInit === null || observerInit === void 0 ? void 0 : observerInit.root)\n                });\n            }\n        }\n    }, [\n        ltrRootMargin,\n        observerInit,\n        options === null || options === void 0 ? void 0 : options.root\n    ]);\n    // Mutation observer for dir attribute changes in the document\n    useMutationObserver(targetDocument, mutationObserverCallback, {\n        attributes: true,\n        subtree: true,\n        attributeFilter: [\n            '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        observer.current = new IntersectionObserver(callback, {\n            ...observerInit,\n            rootMargin: getRTLRootMargin(ltrRootMargin.current, observerInit === null || observerInit === void 0 ? void 0 : observerInit.root)\n        });\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    }, [\n        observerList,\n        observerInit,\n        callback\n    ]);\n    // Do not use internally, we need to track external settings only here\n    const setObserverInitExternal = useCallback((newInit)=>{\n        var _newInit_rootMargin;\n        // Since we know this is coming from consumers, we can store this value as LTR somewhat safely.\n        ltrRootMargin.current = (_newInit_rootMargin = newInit === null || newInit === void 0 ? void 0 : newInit.rootMargin) !== null && _newInit_rootMargin !== void 0 ? _newInit_rootMargin : '0px';\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 === null || newInit === void 0 ? void 0 : newInit.root)\n        });\n    }, [\n        ltrRootMargin,\n        setObserverInit\n    ]);\n    return {\n        setObserverList,\n        setObserverInit: setObserverInitExternal,\n        observer\n    };\n};\n"],"names":["getRTLRootMargin","useIntersectionObserver","useCallback","useState","useRef","React","ltrRootMargin","target","newDir","getComputedStyle","direction","newMargin","splitMargins","split","length","callback","options","observer","observerList","setObserverList","targetDocument","useFluent","_options_rootMargin","observerInit","setObserverInit","rootMargin","root","_options_rootMargin1","mutationObserverCallback","mutationList","mutation","type","attributeName","contains","current","useMutationObserver","attributes","subtree","attributeFilter","useIsomorphicLayoutEffect","IntersectionObserver","forEach","element","_observer_current","observe","disconnect","setObserverInitExternal","newInit","_newInit_rootMargin"],"mappings":"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"}

package/lib-commonjs/hooks/useMutationObserver.js

@@ -0,0 +1,38 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "useMutationObserver", {
+    enumerable: true,
+    get: function() {
+        return useMutationObserver;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const { useRef, useEffect } = _react;
+const useMutationObserver = (target, callback, options)=>{
+    const observer = useRef();
+    useEffect(()=>{
+        // Create an observer instance linked to the callback function
+        observer.current = new MutationObserver(callback);
+    }, [
+        callback
+    ]);
+    useEffect(()=>{
+        if (target) {
+            var _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-commonjs/hooks/useMutationObserver.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["useMutationObserver.js"],"sourcesContent":["import * as React from 'react';\nconst { useRef, useEffect } = React;\nexport const useMutationObserver = (target, callback, options)=>{\n    const observer = useRef();\n    useEffect(()=>{\n        // Create an observer instance linked to the callback function\n        observer.current = new MutationObserver(callback);\n    }, [\n        callback\n    ]);\n    useEffect(()=>{\n        if (target) {\n            var // Start observing the target node for configured mutations\n            _observer_current;\n            (_observer_current = observer.current) === null || _observer_current === void 0 ? void 0 : _observer_current.observe(target, options);\n        }\n        return ()=>{\n            var _observer_current;\n            (_observer_current = observer.current) === null || _observer_current === void 0 ? void 0 : _observer_current.disconnect();\n        };\n    }, [\n        target,\n        options\n    ]);\n    return {\n        observer\n    };\n};\n"],"names":["useMutationObserver","useRef","useEffect","React","target","callback","options","observer","current","MutationObserver","_observer_current","observe","disconnect"],"mappings":";;;;+BAEaA;;;eAAAA;;;;iEAFU;AACvB,MAAM,EAAEC,MAAM,EAAEC,SAAS,EAAE,GAAGC;AACvB,MAAMH,sBAAsB,CAACI,QAAQC,UAAUC;IAClD,MAAMC,WAAWN;IACjBC,UAAU;QACN,8DAA8D;QAC9DK,SAASC,OAAO,GAAG,IAAIC,iBAAiBJ;IAC5C,GAAG;QACCA;KACH;IACDH,UAAU;QACN,IAAIE,QAAQ;YACR,IACAM;YACCA,CAAAA,oBAAoBH,SAASC,OAAO,AAAD,MAAO,QAAQE,sBAAsB,KAAK,IAAI,KAAK,IAAIA,kBAAkBC,OAAO,CAACP,QAAQE;QACjI;QACA,OAAO;YACH,IAAII;YACHA,CAAAA,oBAAoBH,SAASC,OAAO,AAAD,MAAO,QAAQE,sBAAsB,KAAK,IAAI,KAAK,IAAIA,kBAAkBE,UAAU;QAC3H;IACJ,GAAG;QACCR;QACAE;KACH;IACD,OAAO;QACHC;IACJ;AACJ"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-virtualizer",
-  "version": "9.0.0-alpha.56",
+  "version": "9.0.0-alpha.57",
   "description": "Generic and composable virtualizer framework built on browser intersection observer",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",