@fluentui/react-virtualizer 9.0.0-alpha.6 → 9.0.0-alpha.61

package/lib/components/VirtualizerScrollViewDynamic/useVirtualizerScrollViewDynamic.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["useVirtualizerScrollViewDynamic.tsx"],"sourcesContent":["import * as React from 'react';\nimport { slot, useMergedRefs } from '@fluentui/react-utilities';\nimport { useVirtualizer_unstable } from '../Virtualizer/useVirtualizer';\nimport type {\n  VirtualizerScrollViewDynamicProps,\n  VirtualizerScrollViewDynamicState,\n} from './VirtualizerScrollViewDynamic.types';\nimport { useDynamicVirtualizerMeasure } from '../../Hooks';\nimport { useVirtualizerContextState_unstable, scrollToItemDynamic } from '../../Utilities';\nimport type { VirtualizerDataRef } from '../Virtualizer/Virtualizer.types';\nimport { useImperativeHandle } from 'react';\nimport { useMeasureList } from '../../hooks/useMeasureList';\nimport type { IndexedResizeCallbackElement } from '../../hooks/useMeasureList';\n\nexport function useVirtualizerScrollViewDynamic_unstable(\n  props: VirtualizerScrollViewDynamicProps,\n): VirtualizerScrollViewDynamicState {\n  const contextState = useVirtualizerContextState_unstable(props.virtualizerContext);\n  const { imperativeRef, axis = 'vertical', reversed, imperativeVirtualizerRef } = props;\n\n  let sizeTrackingArray = React.useRef<number[]>(new Array(props.numItems).fill(props.itemSize));\n\n  const getChildSizeAuto = React.useCallback(\n    (index: number) => {\n      if (sizeTrackingArray.current.length <= index || sizeTrackingArray.current[index] <= 0) {\n        // Default size for initial state or untracked\n        return props.itemSize;\n      }\n      /* Required to be defined prior to our measure function\n       * we use a sizing array ref that we will update post-render\n       */\n      return sizeTrackingArray.current[index];\n    },\n    [sizeTrackingArray, props.itemSize],\n  );\n\n  const { virtualizerLength, bufferItems, bufferSize, scrollRef } = useDynamicVirtualizerMeasure({\n    defaultItemSize: props.itemSize,\n    direction: props.axis ?? 'vertical',\n    getItemSize: props.getItemSize ?? getChildSizeAuto,\n    currentIndex: contextState?.contextIndex ?? 0,\n    numItems: props.numItems,\n  });\n\n  // Store the virtualizer length as a ref for imperative ref access\n  const virtualizerLengthRef = React.useRef<number>(virtualizerLength);\n  if (virtualizerLengthRef.current !== virtualizerLength) {\n    virtualizerLengthRef.current = virtualizerLength;\n  }\n  const scrollViewRef = useMergedRefs(props.scrollViewRef, scrollRef) as React.RefObject<HTMLDivElement>;\n  const scrollCallbackRef = React.useRef<null | ((index: number) => void)>(null);\n\n  const _imperativeVirtualizerRef = useMergedRefs(React.useRef<VirtualizerDataRef>(null), imperativeVirtualizerRef);\n\n  useImperativeHandle(\n    imperativeRef,\n    () => {\n      return {\n        scrollTo(index: number, behavior = 'auto', callback: undefined | ((index: number) => void)) {\n          scrollCallbackRef.current = callback ?? null;\n          if (_imperativeVirtualizerRef.current) {\n            const progressiveSizes = _imperativeVirtualizerRef.current.progressiveSizes.current;\n            const totalSize =\n              progressiveSizes && progressiveSizes?.length > 0\n                ? progressiveSizes[Math.max(progressiveSizes.length - 1, 0)]\n                : 0;\n\n            _imperativeVirtualizerRef.current.setFlaggedIndex(index);\n            scrollToItemDynamic({\n              index,\n              itemSizes: _imperativeVirtualizerRef.current?.nodeSizes,\n              totalSize,\n              scrollViewRef,\n              axis,\n              reversed,\n              behavior,\n            });\n          }\n        },\n        currentIndex: _imperativeVirtualizerRef.current?.currentIndex,\n        virtualizerLength: virtualizerLengthRef,\n      };\n    },\n    [axis, scrollViewRef, reversed, _imperativeVirtualizerRef],\n  );\n\n  const handleRenderedIndex = (index: number) => {\n    if (scrollCallbackRef.current) {\n      scrollCallbackRef.current(index);\n    }\n  };\n\n  const virtualizerState = useVirtualizer_unstable({\n    ...props,\n    getItemSize: props.getItemSize ?? getChildSizeAuto,\n    virtualizerLength,\n    bufferItems,\n    bufferSize,\n    scrollViewRef,\n    virtualizerContext: contextState,\n    imperativeVirtualizerRef: _imperativeVirtualizerRef,\n    onRenderedFlaggedIndex: handleRenderedIndex,\n  });\n\n  const measureObject = useMeasureList(\n    virtualizerState.virtualizerStartIndex,\n    virtualizerLength,\n    props.numItems,\n    props.itemSize,\n  );\n\n  if (axis === 'horizontal') {\n    sizeTrackingArray = measureObject.widthArray;\n  } else {\n    sizeTrackingArray = measureObject.heightArray;\n  }\n\n  if (!props.getItemSize) {\n    // Auto-measuring is required\n    React.Children.map(virtualizerState.virtualizedChildren, (child, index) => {\n      if (React.isValidElement(child)) {\n        virtualizerState.virtualizedChildren[index] = (\n          <child.type\n            {...child.props}\n            key={child.key}\n            ref={(element: HTMLElement & IndexedResizeCallbackElement) => {\n              // If a ref exists in props, call it\n              if (typeof child.props.ref === 'function') {\n                child.props.ref(element);\n              } else if (child.props.ref) {\n                child.props.ref.current = element;\n              }\n\n              if (child.hasOwnProperty('ref')) {\n                // We must access this from the child directly, not props (forward ref).\n                // eslint-disable-next-line  @typescript-eslint/no-explicit-any\n                const localRef = (child as any)?.ref;\n\n                if (typeof localRef === 'function') {\n                  localRef(element);\n                } else if (localRef) {\n                  localRef.current = element;\n                }\n              }\n\n              // Call the auto-measure ref attachment.\n              measureObject.createIndexedRef(index)(element);\n            }}\n          />\n        );\n      }\n    });\n  }\n\n  return {\n    ...virtualizerState,\n    components: {\n      ...virtualizerState.components,\n      container: 'div',\n    },\n    container: slot.always(props.container, {\n      defaultProps: {\n        ref: scrollViewRef,\n      },\n      elementType: 'div',\n    }),\n  };\n}\n"],"names":["React","slot","useMergedRefs","useVirtualizer_unstable","useDynamicVirtualizerMeasure","useVirtualizerContextState_unstable","scrollToItemDynamic","useImperativeHandle","useMeasureList","useVirtualizerScrollViewDynamic_unstable","props","contextState","virtualizerContext","imperativeRef","axis","reversed","imperativeVirtualizerRef","sizeTrackingArray","useRef","Array","numItems","fill","itemSize","getChildSizeAuto","useCallback","index","current","length","virtualizerLength","bufferItems","bufferSize","scrollRef","defaultItemSize","direction","getItemSize","currentIndex","contextIndex","virtualizerLengthRef","scrollViewRef","scrollCallbackRef","_imperativeVirtualizerRef","scrollTo","behavior","callback","progressiveSizes","totalSize","Math","max","setFlaggedIndex","itemSizes","nodeSizes","handleRenderedIndex","virtualizerState","onRenderedFlaggedIndex","measureObject","virtualizerStartIndex","widthArray","heightArray","Children","map","virtualizedChildren","child","isValidElement","type","key","ref","element","hasOwnProperty","localRef","createIndexedRef","components","container","always","defaultProps","elementType"],"mappings":"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"}

package/lib/components/VirtualizerScrollViewDynamic/useVirtualizerScrollViewDynamicStyles.styles.js

@@ -0,0 +1,45 @@
+import { useVirtualizerStyles_unstable, virtualizerClassNames } from '../Virtualizer/useVirtualizerStyles.styles';
+import { __styles, mergeClasses } from '@griffel/react';
+const virtualizerScrollViewDynamicClassName = 'fui-Virtualizer-Scroll-View-Dynamic';
+export const virtualizerScrollViewDynamicClassNames = {
+  ...virtualizerClassNames,
+  container: `${virtualizerScrollViewDynamicClassName}__container`
+};
+const useStyles = /*#__PURE__*/__styles({
+  base: {
+    mc9l5x: "f22iagw",
+    a9b677: "fly5x3f",
+    Bqenvij: "f1l02sjl"
+  },
+  vertical: {
+    Beiy3e4: "f1vx9l62",
+    Bmxbyg5: "f5zp4f"
+  },
+  horizontal: {
+    Beiy3e4: "f1063pyq",
+    B68tc82: "f1oy3dpc"
+  },
+  verticalReversed: {
+    Beiy3e4: "f1gkdon0",
+    Bmxbyg5: "f5zp4f"
+  },
+  horizontalReversed: {
+    Beiy3e4: "f1oztnx0",
+    B68tc82: "f1oy3dpc"
+  }
+}, {
+  d: [".f22iagw{display:flex;}", ".fly5x3f{width:100%;}", ".f1l02sjl{height:100%;}", ".f1vx9l62{flex-direction:column;}", ".f5zp4f{overflow-y:auto;}", ".f1063pyq{flex-direction:row;}", ".f1oy3dpc{overflow-x:auto;}", ".f1gkdon0{flex-direction:column-reverse;}", ".f1oztnx0{flex-direction:row-reverse;}"]
+});
+/**
+ * Apply styling to the Virtualizer states
+ */
+export const useVirtualizerScrollViewDynamicStyles_unstable = state => {
+  const styles = useStyles();
+  // Default virtualizer styles base
+  useVirtualizerStyles_unstable(state);
+  const containerStyle = state.axis === 'horizontal' ? state.reversed ? styles.horizontalReversed : styles.horizontal : state.reversed ? styles.verticalReversed : styles.vertical;
+  // Add container styles
+  state.container.className = mergeClasses(virtualizerScrollViewDynamicClassNames.container, styles.base, containerStyle, state.container.className);
+  return state;
+};
+//# sourceMappingURL=useVirtualizerScrollViewDynamicStyles.styles.js.map

package/lib/components/VirtualizerScrollViewDynamic/useVirtualizerScrollViewDynamicStyles.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useVirtualizerStyles_unstable","virtualizerClassNames","__styles","mergeClasses","virtualizerScrollViewDynamicClassName","virtualizerScrollViewDynamicClassNames","container","useStyles","base","mc9l5x","a9b677","Bqenvij","vertical","Beiy3e4","Bmxbyg5","horizontal","B68tc82","verticalReversed","horizontalReversed","d","useVirtualizerScrollViewDynamicStyles_unstable","state","styles","containerStyle","axis","reversed","className"],"sources":["useVirtualizerScrollViewDynamicStyles.styles.js"],"sourcesContent":["import { useVirtualizerStyles_unstable, virtualizerClassNames } from '../Virtualizer/useVirtualizerStyles.styles';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nconst virtualizerScrollViewDynamicClassName = 'fui-Virtualizer-Scroll-View-Dynamic';\nexport const virtualizerScrollViewDynamicClassNames = {\n    ...virtualizerClassNames,\n    container: `${virtualizerScrollViewDynamicClassName}__container`\n};\nconst useStyles = makeStyles({\n    base: {\n        display: 'flex',\n        width: '100%',\n        height: '100%'\n    },\n    vertical: {\n        flexDirection: 'column',\n        overflowY: 'auto'\n    },\n    horizontal: {\n        flexDirection: 'row',\n        overflowX: 'auto'\n    },\n    verticalReversed: {\n        flexDirection: 'column-reverse',\n        overflowY: 'auto'\n    },\n    horizontalReversed: {\n        flexDirection: 'row-reverse',\n        overflowX: 'auto'\n    }\n});\n/**\n * Apply styling to the Virtualizer states\n */ export const useVirtualizerScrollViewDynamicStyles_unstable = (state)=>{\n    const styles = useStyles();\n    // Default virtualizer styles base\n    useVirtualizerStyles_unstable(state);\n    const containerStyle = state.axis === 'horizontal' ? state.reversed ? styles.horizontalReversed : styles.horizontal : state.reversed ? styles.verticalReversed : styles.vertical;\n    // Add container styles\n    state.container.className = mergeClasses(virtualizerScrollViewDynamicClassNames.container, styles.base, containerStyle, state.container.className);\n    return state;\n};\n"],"mappings":"AAAA,SAASA,6BAA6B,EAAEC,qBAAqB,QAAQ,4CAA4C;AACjH,SAAAC,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,MAAMC,qCAAqC,GAAG,qCAAqC;AACnF,OAAO,MAAMC,sCAAsC,GAAG;EAClD,GAAGJ,qBAAqB;EACxBK,SAAS,EAAG,GAAEF,qCAAsC;AACxD,CAAC;AACD,MAAMG,SAAS,gBAAGL,QAAA;EAAAM,IAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAAC,QAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;EAAAC,UAAA;IAAAF,OAAA;IAAAG,OAAA;EAAA;EAAAC,gBAAA;IAAAJ,OAAA;IAAAC,OAAA;EAAA;EAAAI,kBAAA;IAAAL,OAAA;IAAAG,OAAA;EAAA;AAAA;EAAAG,CAAA;AAAA,CAsBjB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,8CAA8C,GAAIC,KAAK,IAAG;EACvE,MAAMC,MAAM,GAAGf,SAAS,CAAC,CAAC;EAC1B;EACAP,6BAA6B,CAACqB,KAAK,CAAC;EACpC,MAAME,cAAc,GAAGF,KAAK,CAACG,IAAI,KAAK,YAAY,GAAGH,KAAK,CAACI,QAAQ,GAAGH,MAAM,CAACJ,kBAAkB,GAAGI,MAAM,CAACP,UAAU,GAAGM,KAAK,CAACI,QAAQ,GAAGH,MAAM,CAACL,gBAAgB,GAAGK,MAAM,CAACV,QAAQ;EAChL;EACAS,KAAK,CAACf,SAAS,CAACoB,SAAS,GAAGvB,YAAY,CAACE,sCAAsC,CAACC,SAAS,EAAEgB,MAAM,CAACd,IAAI,EAAEe,cAAc,EAAEF,KAAK,CAACf,SAAS,CAACoB,SAAS,CAAC;EAClJ,OAAOL,KAAK;AAChB,CAAC"}

package/lib/hooks/hooks.types.js

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

package/lib/hooks/hooks.types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["hooks.types.ts"],"sourcesContent":["import { MutableRefObject } from 'react';\n\nexport type VirtualizerMeasureProps = {\n  defaultItemSize: number;\n  direction?: 'vertical' | 'horizontal';\n};\n\nexport type VirtualizerMeasureDynamicProps = {\n  defaultItemSize: number;\n  currentIndex: number;\n  numItems: number;\n  getItemSize: (index: number) => number;\n  direction?: 'vertical' | 'horizontal';\n};\n\n/**\n * Additional direct Ref prevents reading old resize entry data\n * Backwards compatible with ResizeObserverCallback if preferred\n */\nexport interface ResizeCallbackWithRef {\n  (entries: ResizeObserverEntry[], observer: ResizeObserver, scrollRef?: MutableRefObject<HTMLElement | null>): void;\n}\n"],"names":[],"mappings":"AAAA,WAqBC"}

package/lib/hooks/index.js

@@ -1,2 +1,5 @@
 export * from './useIntersectionObserver';
-//# sourceMappingURL=index.js.map
+export * from './useVirtualizerMeasure';
+export * from './useDynamicVirtualizerMeasure';
+export * from './useResizeObserverRef';
+export * from './hooks.types';

package/lib/hooks/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["packages/react-components/react-virtualizer/src/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,2BAA2B,CAAC","sourcesContent":["export * from './useIntersectionObserver';\n"]}
+{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './useIntersectionObserver';\nexport * from './useVirtualizerMeasure';\nexport * from './useDynamicVirtualizerMeasure';\nexport * from './useResizeObserverRef';\nexport * from './hooks.types';\n"],"names":[],"mappings":"AAAA,cAAc,4BAA4B;AAC1C,cAAc,0BAA0B;AACxC,cAAc,iCAAiC;AAC/C,cAAc,yBAAyB;AACvC,cAAc,gBAAgB"}

package/lib/hooks/useDynamicVirtualizerMeasure.js

@@ -0,0 +1,99 @@
+import { useIsomorphicLayoutEffect } from '@fluentui/react-utilities';
+import * as React from 'react';
+import { useResizeObserverRef_unstable } from './useResizeObserverRef';
+import { useRef } from 'react';
+/**
+ * React hook that measures virtualized space dynamically to ensure optimized virtualization length.
+ */ export const useDynamicVirtualizerMeasure = (virtualizerProps)=>{
+    const { defaultItemSize, direction = 'vertical', numItems, getItemSize, currentIndex } = virtualizerProps;
+    const indexRef = useRef(currentIndex);
+    indexRef.current = currentIndex;
+    const [state, setState] = React.useState({
+        virtualizerLength: 0,
+        virtualizerBufferItems: 0,
+        virtualizerBufferSize: 0
+    });
+    const { virtualizerLength, virtualizerBufferItems, virtualizerBufferSize } = state;
+    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 !== container.current) {
+            container.current = scrollRef.current;
+        }
+        const containerSize = direction === 'vertical' ? scrollRef.current.getBoundingClientRect().height : scrollRef.current.getBoundingClientRect().width;
+        let indexSizer = 0;
+        let length = 0;
+        while(indexSizer <= containerSize && length < numItems){
+            const iItemSize = getItemSize(indexRef.current + length);
+            // Increment
+            indexSizer += iItemSize;
+            length++;
+        }
+        /*
+       * Number of items to append at each end, i.e. 'preload' each side before entering view.
+       */ const bufferItems = Math.max(Math.floor(length / 4), 4);
+        /*
+       * This is how far we deviate into the bufferItems to detect a redraw.
+       */ const bufferSize = Math.max(Math.floor(length / 8 * defaultItemSize), 1);
+        const totalLength = length + bufferItems * 2 + 1;
+        setState({
+            virtualizerLength: totalLength,
+            virtualizerBufferSize: bufferSize,
+            virtualizerBufferItems: bufferItems
+        });
+    }, [
+        defaultItemSize,
+        direction,
+        getItemSize,
+        numItems
+    ]);
+    const resizeCallback = React.useCallback((_entries, _observer, scrollRef)=>{
+        if (scrollRef) {
+            handleScrollResize(scrollRef);
+        }
+    }, [
+        handleScrollResize
+    ]);
+    const scrollRef = useResizeObserverRef_unstable(resizeCallback);
+    useIsomorphicLayoutEffect(()=>{
+        var _container_current, _container_current1;
+        if (!container.current) {
+            return;
+        }
+        const containerSize = direction === 'vertical' ? ((_container_current = container.current) === null || _container_current === void 0 ? void 0 : _container_current.getBoundingClientRect().height) * 1.5 : ((_container_current1 = container.current) === null || _container_current1 === void 0 ? void 0 : _container_current1.getBoundingClientRect().width) * 1.5;
+        let couldBeSmaller = false;
+        let recheckTotal = 0;
+        for(let i = currentIndex; i < currentIndex + virtualizerLength; i++){
+            const newItemSize = getItemSize(i);
+            recheckTotal += newItemSize;
+            const newLength = i - currentIndex;
+            const bufferItems = Math.max(Math.floor(newLength / 4), 2);
+            const totalNewLength = newLength + bufferItems * 2 + 4;
+            const compareLengths = totalNewLength < virtualizerLength;
+            if (recheckTotal > containerSize && compareLengths) {
+                couldBeSmaller = true;
+                break;
+            }
+        }
+        // Check if the render has caused us to need a re-calc of virtualizer length
+        if (recheckTotal < containerSize || couldBeSmaller) {
+            handleScrollResize(container);
+        }
+    }, [
+        getItemSize,
+        currentIndex,
+        direction,
+        virtualizerLength,
+        resizeCallback,
+        handleScrollResize
+    ]);
+    return {
+        virtualizerLength,
+        bufferItems: virtualizerBufferItems,
+        bufferSize: virtualizerBufferSize,
+        scrollRef
+    };
+};

package/lib/hooks/useDynamicVirtualizerMeasure.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["useDynamicVirtualizerMeasure.ts"],"sourcesContent":["import { useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport * as React from 'react';\nimport { VirtualizerMeasureDynamicProps } from './hooks.types';\nimport { useResizeObserverRef_unstable } from './useResizeObserverRef';\nimport { useRef } from 'react';\n\n/**\n * React hook that measures virtualized space dynamically to ensure optimized virtualization length.\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} => {\n  const { defaultItemSize, direction = 'vertical', numItems, getItemSize, currentIndex } = virtualizerProps;\n  const indexRef = useRef<number>(currentIndex);\n  indexRef.current = currentIndex;\n\n  const [state, setState] = React.useState({\n    virtualizerLength: 0,\n    virtualizerBufferItems: 0,\n    virtualizerBufferSize: 0,\n  });\n\n  const { virtualizerLength, virtualizerBufferItems, virtualizerBufferSize } = state;\n\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 !== container.current) {\n        container.current = scrollRef.current;\n      }\n\n      const containerSize =\n        direction === 'vertical'\n          ? scrollRef.current.getBoundingClientRect().height\n          : scrollRef.current.getBoundingClientRect().width;\n\n      let indexSizer = 0;\n      let length = 0;\n\n      while (indexSizer <= containerSize && length < numItems) {\n        const iItemSize = getItemSize(indexRef.current + length);\n\n        // Increment\n        indexSizer += iItemSize;\n        length++;\n      }\n\n      /*\n       * Number of items to append at each end, i.e. 'preload' each side before entering view.\n       */\n      const bufferItems = Math.max(Math.floor(length / 4), 4);\n\n      /*\n       * This is how far we deviate into the bufferItems to detect a redraw.\n       */\n      const bufferSize = Math.max(Math.floor((length / 8) * defaultItemSize), 1);\n\n      const totalLength = length + bufferItems * 2 + 1;\n      setState({\n        virtualizerLength: totalLength,\n        virtualizerBufferSize: bufferSize,\n        virtualizerBufferItems: bufferItems,\n      });\n    },\n    [defaultItemSize, direction, getItemSize, numItems],\n  );\n\n  const resizeCallback = React.useCallback(\n    (\n      _entries: ResizeObserverEntry[],\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 = useResizeObserverRef_unstable(resizeCallback);\n\n  useIsomorphicLayoutEffect(() => {\n    if (!container.current) {\n      return;\n    }\n\n    const containerSize =\n      direction === 'vertical'\n        ? container.current?.getBoundingClientRect().height * 1.5\n        : container.current?.getBoundingClientRect().width * 1.5;\n\n    let couldBeSmaller = false;\n    let recheckTotal = 0;\n    for (let i = currentIndex; i < currentIndex + virtualizerLength; i++) {\n      const newItemSize = getItemSize(i);\n      recheckTotal += newItemSize;\n\n      const newLength = i - currentIndex;\n\n      const bufferItems = Math.max(Math.floor(newLength / 4), 2);\n      const totalNewLength = newLength + bufferItems * 2 + 4;\n      const compareLengths = totalNewLength < virtualizerLength;\n\n      if (recheckTotal > containerSize && compareLengths) {\n        couldBeSmaller = true;\n        break;\n      }\n    }\n\n    // Check if the render has caused us to need a re-calc of virtualizer length\n    if (recheckTotal < containerSize || couldBeSmaller) {\n      handleScrollResize(container);\n    }\n  }, [getItemSize, currentIndex, direction, virtualizerLength, resizeCallback, handleScrollResize]);\n\n  return {\n    virtualizerLength,\n    bufferItems: virtualizerBufferItems,\n    bufferSize: virtualizerBufferSize,\n    scrollRef,\n  };\n};\n"],"names":["useIsomorphicLayoutEffect","React","useResizeObserverRef_unstable","useRef","useDynamicVirtualizerMeasure","virtualizerProps","defaultItemSize","direction","numItems","getItemSize","currentIndex","indexRef","current","state","setState","useState","virtualizerLength","virtualizerBufferItems","virtualizerBufferSize","container","handleScrollResize","useCallback","scrollRef","containerSize","getBoundingClientRect","height","width","indexSizer","length","iItemSize","bufferItems","Math","max","floor","bufferSize","totalLength","resizeCallback","_entries","_observer","couldBeSmaller","recheckTotal","i","newItemSize","newLength","totalNewLength","compareLengths"],"mappings":"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"}

package/lib/hooks/useIntersectionObserver.js

@@ -1,9 +1,32 @@
 import * as React from 'react';
 import { useIsomorphicLayoutEffect } from '@fluentui/react-utilities';
-const {
-  useState,
-  useRef
-} = React;
+import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
+const { useCallback, useState, useRef } = React;
+import { useMutationObserver } from './useMutationObserver';
+/**
+ * This function will take the rootMargin and flip the sides if we are in RTL based on the computed reading direction of the target element.
+ * @param ltrRootMargin the margin to be processed and flipped if required
+ * @param target target element that will have its current reading direction determined
+ * @returns the corrected rootMargin (if it was necessary to correct)
+ */ export const getRTLRootMargin = (ltrRootMargin, target)=>{
+    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,41 +35,86 @@ const {
  * enough to trigger a callback).
  * @returns An array containing a callback to update the list of Elements the observer should listen to, a callback to
  * update the init options of the IntersectionObserver and a ref to the IntersectionObserver instance itself.
- */
-export const useIntersectionObserver = (callback, options) => {
-  // export const useIntersectionObserver = (
-  //   callback: IntersectionObserverCallback,
-  //   options?: IntersectionObserverInit,
-  // ): [
-  //   Dispatch<SetStateAction<Element[] | undefined>>,
-  //   Dispatch<SetStateAction<IntersectionObserverInit | undefined>>,
-  //   MutableRefObject<IntersectionObserver | undefined>,
-  // ] => {
-  const observer = useRef();
-  const [observerList, setObserverList] = useState();
-  const [observerInit, setObserverInit] = useState(options);
-  // Observer elements in passed in list and clean up previous list
-  // This effect is only triggered when observerList is updated
-  useIsomorphicLayoutEffect(() => {
-    observer.current = new IntersectionObserver(callback, observerInit);
-    // If we have an instance of IO and a list with elements, observer the elements
-    if (observer.current && observerList && observerList.length > 0) {
-      observerList.forEach(element => {
-        var _a;
-        (_a = observer.current) === null || _a === void 0 ? void 0 : _a.observe(element);
-      });
-    }
-    // clean up previous elements being listened to
-    return () => {
-      if (observer.current) {
-        observer.current.disconnect();
-      }
+ */ export const useIntersectionObserver = (callback, options)=>{
+    const observer = useRef();
+    const [observerList, setObserverList] = useState();
+    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) {
+            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
+    ]);
+    // 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: setObserverInitExternal,
+        observer
     };
-  }, [observerList, observerInit, callback]);
-  return {
-    setObserverList,
-    setObserverInit,
-    observer
-  };
 };
-//# sourceMappingURL=useIntersectionObserver.js.map

package/lib/hooks/useIntersectionObserver.js.map

@@ -1 +1 @@
-{"version":3,"mappings":"AACA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,yBAAyB,QAAQ,2BAA2B;AAErE,MAAM;EAAEC,QAAQ;EAAEC;AAAM,CAAE,GAAGH,KAAK;AAElC;;;;;;;;;AAUA,OAAO,MAAMI,uBAAuB,GAAG,CACrCC,QAAsC,EACtCC,OAAkC,KAKhC;EACF;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,MAAMC,QAAQ,GAAGJ,MAAM,EAAwB;EAC/C,MAAM,CAACK,YAAY,EAAEC,eAAe,CAAC,GAAGP,QAAQ,EAAa;EAC7D,MAAM,CAACQ,YAAY,EAAEC,eAAe,CAAC,GAAGT,QAAQ,CAAuCI,OAAO,CAAC;EAE/F;EACA;EACAL,yBAAyB,CAAC,MAAK;IAC7BM,QAAQ,CAACK,OAAO,GAAG,IAAIC,oBAAoB,CAACR,QAAQ,EAAEK,YAAY,CAAC;IAEnE;IACA,IAAIH,QAAQ,CAACK,OAAO,IAAIJ,YAAY,IAAIA,YAAY,CAACM,MAAM,GAAG,CAAC,EAAE;MAC/DN,YAAY,CAACO,OAAO,CAACC,OAAO,IAAG;;QAC7B,cAAQ,CAACJ,OAAO,0CAAEK,OAAO,CAACD,OAAO,CAAC;MACpC,CAAC,CAAC;;IAGJ;IACA,OAAO,MAAK;MACV,IAAIT,QAAQ,CAACK,OAAO,EAAE;QACpBL,QAAQ,CAACK,OAAO,CAACM,UAAU,EAAE;;IAEjC,CAAC;EACH,CAAC,EAAE,CAACV,YAAY,EAAEE,YAAY,EAAEL,QAAQ,CAAC,CAAC;EAE1C,OAAO;IAAEI,eAAe;IAAEE,eAAe;IAAEJ;EAAQ,CAAE;AACvD,CAAC","names":["React","useIsomorphicLayoutEffect","useState","useRef","useIntersectionObserver","callback","options","observer","observerList","setObserverList","observerInit","setObserverInit","current","IntersectionObserver","length","forEach","element","observe","disconnect"],"sourceRoot":"../src/","sources":["packages/react-components/react-virtualizer/src/hooks/useIntersectionObserver.ts"],"sourcesContent":["import type { Dispatch, MutableRefObject, SetStateAction } from 'react';\nimport * as React from 'react';\nimport { useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\n\nconst { useState, useRef } = React;\n\n/**\n * React hook that allows easy usage of the browser API IntersectionObserver within React\n * @param callback - A function called when the percentage of the target element is visible crosses a threshold.\n * @param options - An optional object which customizes the observer. If options isn't specified, the observer uses the\n * document's viewport as the root, with no margin, and a 0% threshold (meaning that even a one-pixel change is\n * enough to trigger a callback).\n * @returns An array containing a callback to update the list of Elements the observer should listen to, a callback to\n * update the init options of the IntersectionObserver and a ref to the IntersectionObserver instance itself.\n */\n\nexport const useIntersectionObserver = (\n  callback: IntersectionObserverCallback,\n  options?: IntersectionObserverInit,\n): {\n  setObserverList: Dispatch<SetStateAction<Element[] | undefined>>;\n  setObserverInit: Dispatch<SetStateAction<IntersectionObserverInit | undefined>>;\n  observer: MutableRefObject<IntersectionObserver | undefined>;\n} => {\n  // export const useIntersectionObserver = (\n  //   callback: IntersectionObserverCallback,\n  //   options?: IntersectionObserverInit,\n  // ): [\n  //   Dispatch<SetStateAction<Element[] | undefined>>,\n  //   Dispatch<SetStateAction<IntersectionObserverInit | undefined>>,\n  //   MutableRefObject<IntersectionObserver | undefined>,\n  // ] => {\n  const observer = useRef<IntersectionObserver>();\n  const [observerList, setObserverList] = useState<Element[]>();\n  const [observerInit, setObserverInit] = useState<IntersectionObserverInit | undefined>(options);\n\n  // Observer elements in passed in list and clean up previous list\n  // This effect is only triggered when observerList is updated\n  useIsomorphicLayoutEffect(() => {\n    observer.current = new IntersectionObserver(callback, observerInit);\n\n    // If we have an instance of IO and a list with elements, observer the elements\n    if (observer.current && observerList && observerList.length > 0) {\n      observerList.forEach(element => {\n        observer.current?.observe(element);\n      });\n    }\n\n    // clean up previous elements being listened to\n    return () => {\n      if (observer.current) {\n        observer.current.disconnect();\n      }\n    };\n  }, [observerList, observerInit, callback]);\n\n  return { setObserverList, setObserverInit, observer };\n};\n"]}
+{"version":3,"sources":["useIntersectionObserver.ts"],"sourcesContent":["import type { Dispatch, MutableRefObject, SetStateAction } from 'react';\nimport * as React from 'react';\nimport { useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\n\nconst { useCallback, useState, useRef } = React;\nimport { useMutationObserver } from './useMutationObserver';\n\n/**\n * This function will take the rootMargin and flip the sides if we are in RTL based on the computed reading direction of the target element.\n * @param ltrRootMargin the margin to be processed and flipped if required\n * @param target target element that will have its current reading direction determined\n * @returns the corrected rootMargin (if it was necessary to correct)\n */\nexport const getRTLRootMargin = (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/useMeasureList.js

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

package/lib/hooks/useMeasureList.js.map

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

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