@fluentui/react-virtualizer 9.0.0-alpha.69 → 9.0.0-alpha.70

package/CHANGELOG.md

@@ -1,12 +1,24 @@
 # Change Log - @fluentui/react-virtualizer
 
-This log was last generated on Tue, 20 Feb 2024 14:15:33 GMT and should not be manually modified.
+This log was last generated on Wed, 28 Feb 2024 02:28:40 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.0.0-alpha.70](https://github.com/microsoft/fluentui/tree/@fluentui/react-virtualizer_v9.0.0-alpha.70)
+
+Wed, 28 Feb 2024 02:28:40 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-virtualizer_v9.0.0-alpha.69..@fluentui/react-virtualizer_v9.0.0-alpha.70)
+
+### Changes
+
+- feat: Add pagination for both static and dynamic virtualizers ([PR #30560](https://github.com/microsoft/fluentui/pull/30560) by mifraser@microsoft.com)
+- Bump @fluentui/react-jsx-runtime to v9.0.31 ([PR #30639](https://github.com/microsoft/fluentui/pull/30639) by beachball)
+- Bump @fluentui/react-utilities to v9.18.2 ([PR #30639](https://github.com/microsoft/fluentui/pull/30639) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.14.1 ([PR #30639](https://github.com/microsoft/fluentui/pull/30639) by beachball)
+
 ## [9.0.0-alpha.69](https://github.com/microsoft/fluentui/tree/@fluentui/react-virtualizer_v9.0.0-alpha.69)
 
-Tue, 20 Feb 2024 14:15:33 GMT 
+Tue, 20 Feb 2024 14:22:29 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-virtualizer_v9.0.0-alpha.68..@fluentui/react-virtualizer_v9.0.0-alpha.69)
 
 ### Changes

package/dist/index.d.ts

@@ -321,6 +321,10 @@ export declare type VirtualizerScrollViewDynamicProps = ComponentProps<Partial<V
      * Imperative ref contains our scrollTo index functionality for user control.
      */
     imperativeRef?: RefObject<ScrollToInterface>;
+    /**
+     * Imperative ref contains our scrollTo index functionality for user control.
+     */
+    enablePagination?: boolean;
 };
 
 export declare type VirtualizerScrollViewDynamicSlots = VirtualizerScrollViewSlots;
@@ -348,6 +352,10 @@ export declare type VirtualizerScrollViewProps = ComponentProps<Partial<Virtuali
      * Imperative ref contains our scrollTo index functionality for user control.
      */
     imperativeRef?: RefObject<ScrollToInterface>;
+    /**
+     * Imperative ref contains our scrollTo index functionality for user control.
+     */
+    enablePagination?: boolean;
 };
 
 export declare type VirtualizerScrollViewSlots = VirtualizerSlots & {

package/lib/components/VirtualizerScrollView/VirtualizerScrollView.types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["VirtualizerScrollView.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type {\n  VirtualizerSlots,\n  VirtualizerConfigProps,\n  VirtualizerConfigState,\n  VirtualizerChildRenderFunction,\n} from '../Virtualizer/Virtualizer.types';\nimport type { ScrollToInterface } from '../../Utilities';\nimport type { RefObject } from 'react';\n\nexport type VirtualizerScrollViewSlots = VirtualizerSlots & {\n  /**\n   * The root container that provides embedded scrolling.\n   */\n  container: NonNullable<Slot<'div'>>;\n};\n\nexport type VirtualizerScrollViewProps = ComponentProps<Partial<VirtualizerScrollViewSlots>> &\n  Partial<\n    Omit<\n      VirtualizerConfigProps,\n      'itemSize' | 'numItems' | 'getItemSize' | 'children' | 'flagIndex' | 'imperativeVirtualizerRef'\n    >\n  > & {\n    /**\n     * Virtualizer item size in pixels - static.\n     * Axis: 'vertical' = Height\n     * Axis: 'horizontal' = Width\n     */\n    itemSize: number;\n    /**\n     * The total number of items to be virtualized.\n     */\n    numItems: number;\n    /**\n     * Child render function.\n     * Iteratively called to return current virtualizer DOM children.\n     * Will act as a row or column indexer depending on Virtualizer settings.\n     */\n    children: VirtualizerChildRenderFunction;\n    /**\n     * Imperative ref contains our scrollTo index functionality for user control.\n     */\n    imperativeRef?: RefObject<ScrollToInterface>;\n  };\n\nexport type VirtualizerScrollViewState = ComponentState<VirtualizerScrollViewSlots> & VirtualizerConfigState;\n"],"names":[],"mappings":"AAAA,WA8C6G"}
+{"version":3,"sources":["VirtualizerScrollView.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type {\n  VirtualizerSlots,\n  VirtualizerConfigProps,\n  VirtualizerConfigState,\n  VirtualizerChildRenderFunction,\n} from '../Virtualizer/Virtualizer.types';\nimport type { ScrollToInterface } from '../../Utilities';\nimport type { RefObject } from 'react';\n\nexport type VirtualizerScrollViewSlots = VirtualizerSlots & {\n  /**\n   * The root container that provides embedded scrolling.\n   */\n  container: NonNullable<Slot<'div'>>;\n};\n\nexport type VirtualizerScrollViewProps = ComponentProps<Partial<VirtualizerScrollViewSlots>> &\n  Partial<\n    Omit<\n      VirtualizerConfigProps,\n      'itemSize' | 'numItems' | 'getItemSize' | 'children' | 'flagIndex' | 'imperativeVirtualizerRef'\n    >\n  > & {\n    /**\n     * Virtualizer item size in pixels - static.\n     * Axis: 'vertical' = Height\n     * Axis: 'horizontal' = Width\n     */\n    itemSize: number;\n    /**\n     * The total number of items to be virtualized.\n     */\n    numItems: number;\n    /**\n     * Child render function.\n     * Iteratively called to return current virtualizer DOM children.\n     * Will act as a row or column indexer depending on Virtualizer settings.\n     */\n    children: VirtualizerChildRenderFunction;\n    /**\n     * Imperative ref contains our scrollTo index functionality for user control.\n     */\n    imperativeRef?: RefObject<ScrollToInterface>;\n    /**\n     * Imperative ref contains our scrollTo index functionality for user control.\n     */\n    enablePagination?: boolean;\n  };\n\nexport type VirtualizerScrollViewState = ComponentState<VirtualizerScrollViewSlots> & VirtualizerConfigState;\n"],"names":[],"mappings":"AAAA,WAkD6G"}

package/lib/components/VirtualizerScrollView/useVirtualizerScrollView.js

@@ -4,8 +4,9 @@ import { useVirtualizer_unstable } from '../Virtualizer/useVirtualizer';
 import { useStaticVirtualizerMeasure } from '../../Hooks';
 import { useImperativeHandle } from 'react';
 import { scrollToItemStatic } from '../../Utilities';
+import { useStaticVirtualizerPagination } from '../../hooks/useStaticPagination';
 export function useVirtualizerScrollView_unstable(props) {
-    const { imperativeRef, itemSize, numItems, axis = 'vertical', reversed } = props;
+    const { imperativeRef, itemSize, numItems, axis = 'vertical', reversed, enablePagination = false } = props;
     var _props_axis;
     const { virtualizerLength, bufferItems, bufferSize, scrollRef } = useStaticVirtualizerMeasure({
         defaultItemSize: props.itemSize,
@@ -16,7 +17,11 @@ export function useVirtualizerScrollView_unstable(props) {
     if (virtualizerLengthRef.current !== virtualizerLength) {
         virtualizerLengthRef.current = virtualizerLength;
     }
-    const scrollViewRef = useMergedRefs(props.scrollViewRef, scrollRef);
+    const paginationRef = useStaticVirtualizerPagination({
+        axis,
+        itemSize
+    }, enablePagination);
+    const scrollViewRef = useMergedRefs(props.scrollViewRef, scrollRef, paginationRef);
     const imperativeVirtualizerRef = React.useRef(null);
     const scrollCallbackRef = React.useRef(null);
     useImperativeHandle(imperativeRef, ()=>{

package/lib/components/VirtualizerScrollView/useVirtualizerScrollView.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useVirtualizerScrollView.ts"],"sourcesContent":["import * as React from 'react';\nimport { slot, useMergedRefs } from '@fluentui/react-utilities';\nimport { useVirtualizer_unstable } from '../Virtualizer/useVirtualizer';\nimport type { VirtualizerScrollViewProps, VirtualizerScrollViewState } from './VirtualizerScrollView.types';\nimport { useStaticVirtualizerMeasure } from '../../Hooks';\nimport { useImperativeHandle } from 'react';\nimport { scrollToItemStatic } from '../../Utilities';\nimport type { VirtualizerDataRef } from '../Virtualizer/Virtualizer.types';\n\nexport function useVirtualizerScrollView_unstable(props: VirtualizerScrollViewProps): VirtualizerScrollViewState {\n  const { imperativeRef, itemSize, numItems, axis = 'vertical', reversed } = props;\n  const { virtualizerLength, bufferItems, bufferSize, scrollRef } = useStaticVirtualizerMeasure({\n    defaultItemSize: props.itemSize,\n    direction: props.axis ?? 'vertical',\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 imperativeVirtualizerRef = React.useRef<VirtualizerDataRef | null>(null);\n  const scrollCallbackRef = React.useRef<null | ((index: number) => void)>(null);\n\n  useImperativeHandle(\n    imperativeRef,\n    () => {\n      return {\n        scrollTo(index: number, behavior = 'auto', callback: ((index: number) => void) | undefined) {\n          scrollCallbackRef.current = callback ?? null;\n          imperativeVirtualizerRef.current?.setFlaggedIndex(index);\n          scrollToItemStatic({\n            index,\n            itemSize,\n            totalItems: numItems,\n            scrollViewRef,\n            axis,\n            reversed,\n            behavior,\n          });\n        },\n        currentIndex: imperativeVirtualizerRef.current?.currentIndex,\n        virtualizerLength: virtualizerLengthRef,\n      };\n    },\n    [axis, scrollViewRef, itemSize, numItems, reversed],\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    virtualizerLength,\n    bufferItems,\n    bufferSize,\n    scrollViewRef,\n    onRenderedFlaggedIndex: handleRenderedIndex,\n    imperativeVirtualizerRef,\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 as React.RefObject<HTMLDivElement>,\n      },\n      elementType: 'div',\n    }),\n  };\n}\n"],"names":["React","slot","useMergedRefs","useVirtualizer_unstable","useStaticVirtualizerMeasure","useImperativeHandle","scrollToItemStatic","useVirtualizerScrollView_unstable","props","imperativeRef","itemSize","numItems","axis","reversed","virtualizerLength","bufferItems","bufferSize","scrollRef","defaultItemSize","direction","virtualizerLengthRef","useRef","current","scrollViewRef","imperativeVirtualizerRef","scrollCallbackRef","scrollTo","index","behavior","callback","setFlaggedIndex","totalItems","currentIndex","handleRenderedIndex","virtualizerState","onRenderedFlaggedIndex","components","container","always","defaultProps","ref","elementType"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,IAAI,EAAEC,aAAa,QAAQ,4BAA4B;AAChE,SAASC,uBAAuB,QAAQ,gCAAgC;AAExE,SAASC,2BAA2B,QAAQ,cAAc;AAC1D,SAASC,mBAAmB,QAAQ,QAAQ;AAC5C,SAASC,kBAAkB,QAAQ,kBAAkB;AAGrD,OAAO,SAASC,kCAAkCC,KAAiC;IACjF,MAAM,EAAEC,aAAa,EAAEC,QAAQ,EAAEC,QAAQ,EAAEC,OAAO,UAAU,EAAEC,QAAQ,EAAE,GAAGL;QAG9DA;IAFb,MAAM,EAAEM,iBAAiB,EAAEC,WAAW,EAAEC,UAAU,EAAEC,SAAS,EAAE,GAAGb,4BAA4B;QAC5Fc,iBAAiBV,MAAME,QAAQ;QAC/BS,WAAWX,CAAAA,cAAAA,MAAMI,IAAI,cAAVJ,yBAAAA,cAAc;IAC3B;IAEA,kEAAkE;IAClE,MAAMY,uBAAuBpB,MAAMqB,MAAM,CAASP;IAClD,IAAIM,qBAAqBE,OAAO,KAAKR,mBAAmB;QACtDM,qBAAqBE,OAAO,GAAGR;IACjC;IACA,MAAMS,gBAAgBrB,cAAcM,MAAMe,aAAa,EAAEN;IACzD,MAAMO,2BAA2BxB,MAAMqB,MAAM,CAA4B;IACzE,MAAMI,oBAAoBzB,MAAMqB,MAAM,CAAmC;IAEzEhB,oBACEI,eACA;YAekBe;QAdhB,OAAO;YACLE,UAASC,KAAa,EAAEC,WAAW,MAAM,EAAEC,QAA+C;oBAExFL;gBADAC,kBAAkBH,OAAO,GAAGO,qBAAAA,sBAAAA,WAAY;iBACxCL,oCAAAA,yBAAyBF,OAAO,cAAhCE,wDAAAA,kCAAkCM,eAAe,CAACH;gBAClDrB,mBAAmB;oBACjBqB;oBACAjB;oBACAqB,YAAYpB;oBACZY;oBACAX;oBACAC;oBACAe;gBACF;YACF;YACAI,YAAY,GAAER,oCAAAA,yBAAyBF,OAAO,cAAhCE,wDAAAA,kCAAkCQ,YAAY;YAC5DlB,mBAAmBM;QACrB;IACF,GACA;QAACR;QAAMW;QAAeb;QAAUC;QAAUE;KAAS;IAGrD,MAAMoB,sBAAsB,CAACN;QAC3B,IAAIF,kBAAkBH,OAAO,EAAE;YAC7BG,kBAAkBH,OAAO,CAACK;QAC5B;IACF;IAEA,MAAMO,mBAAmB/B,wBAAwB;QAC/C,GAAGK,KAAK;QACRM;QACAC;QACAC;QACAO;QACAY,wBAAwBF;QACxBT;IACF;IAEA,OAAO;QACL,GAAGU,gBAAgB;QACnBE,YAAY;YACV,GAAGF,iBAAiBE,UAAU;YAC9BC,WAAW;QACb;QACAA,WAAWpC,KAAKqC,MAAM,CAAC9B,MAAM6B,SAAS,EAAE;YACtCE,cAAc;gBACZC,KAAKjB;YACP;YACAkB,aAAa;QACf;IACF;AACF"}
+{"version":3,"sources":["useVirtualizerScrollView.ts"],"sourcesContent":["import * as React from 'react';\nimport { slot, useMergedRefs } from '@fluentui/react-utilities';\nimport { useVirtualizer_unstable } from '../Virtualizer/useVirtualizer';\nimport type { VirtualizerScrollViewProps, VirtualizerScrollViewState } from './VirtualizerScrollView.types';\nimport { useStaticVirtualizerMeasure } from '../../Hooks';\nimport { useImperativeHandle } from 'react';\nimport { scrollToItemStatic } from '../../Utilities';\nimport type { VirtualizerDataRef } from '../Virtualizer/Virtualizer.types';\nimport { useStaticVirtualizerPagination } from '../../hooks/useStaticPagination';\n\nexport function useVirtualizerScrollView_unstable(props: VirtualizerScrollViewProps): VirtualizerScrollViewState {\n  const { imperativeRef, itemSize, numItems, axis = 'vertical', reversed, enablePagination = false } = props;\n  const { virtualizerLength, bufferItems, bufferSize, scrollRef } = useStaticVirtualizerMeasure({\n    defaultItemSize: props.itemSize,\n    direction: props.axis ?? 'vertical',\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\n  const paginationRef = useStaticVirtualizerPagination({ axis, itemSize }, enablePagination);\n  const scrollViewRef = useMergedRefs(props.scrollViewRef, scrollRef, paginationRef) as React.RefObject<HTMLDivElement>;\n  const imperativeVirtualizerRef = React.useRef<VirtualizerDataRef | null>(null);\n  const scrollCallbackRef = React.useRef<null | ((index: number) => void)>(null);\n\n  useImperativeHandle(\n    imperativeRef,\n    () => {\n      return {\n        scrollTo(index: number, behavior = 'auto', callback: ((index: number) => void) | undefined) {\n          scrollCallbackRef.current = callback ?? null;\n          imperativeVirtualizerRef.current?.setFlaggedIndex(index);\n          scrollToItemStatic({\n            index,\n            itemSize,\n            totalItems: numItems,\n            scrollViewRef,\n            axis,\n            reversed,\n            behavior,\n          });\n        },\n        currentIndex: imperativeVirtualizerRef.current?.currentIndex,\n        virtualizerLength: virtualizerLengthRef,\n      };\n    },\n    [axis, scrollViewRef, itemSize, numItems, reversed],\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    virtualizerLength,\n    bufferItems,\n    bufferSize,\n    scrollViewRef,\n    onRenderedFlaggedIndex: handleRenderedIndex,\n    imperativeVirtualizerRef,\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 as React.RefObject<HTMLDivElement>,\n      },\n      elementType: 'div',\n    }),\n  };\n}\n"],"names":["React","slot","useMergedRefs","useVirtualizer_unstable","useStaticVirtualizerMeasure","useImperativeHandle","scrollToItemStatic","useStaticVirtualizerPagination","useVirtualizerScrollView_unstable","props","imperativeRef","itemSize","numItems","axis","reversed","enablePagination","virtualizerLength","bufferItems","bufferSize","scrollRef","defaultItemSize","direction","virtualizerLengthRef","useRef","current","paginationRef","scrollViewRef","imperativeVirtualizerRef","scrollCallbackRef","scrollTo","index","behavior","callback","setFlaggedIndex","totalItems","currentIndex","handleRenderedIndex","virtualizerState","onRenderedFlaggedIndex","components","container","always","defaultProps","ref","elementType"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,IAAI,EAAEC,aAAa,QAAQ,4BAA4B;AAChE,SAASC,uBAAuB,QAAQ,gCAAgC;AAExE,SAASC,2BAA2B,QAAQ,cAAc;AAC1D,SAASC,mBAAmB,QAAQ,QAAQ;AAC5C,SAASC,kBAAkB,QAAQ,kBAAkB;AAErD,SAASC,8BAA8B,QAAQ,kCAAkC;AAEjF,OAAO,SAASC,kCAAkCC,KAAiC;IACjF,MAAM,EAAEC,aAAa,EAAEC,QAAQ,EAAEC,QAAQ,EAAEC,OAAO,UAAU,EAAEC,QAAQ,EAAEC,mBAAmB,KAAK,EAAE,GAAGN;QAGxFA;IAFb,MAAM,EAAEO,iBAAiB,EAAEC,WAAW,EAAEC,UAAU,EAAEC,SAAS,EAAE,GAAGf,4BAA4B;QAC5FgB,iBAAiBX,MAAME,QAAQ;QAC/BU,WAAWZ,CAAAA,cAAAA,MAAMI,IAAI,cAAVJ,yBAAAA,cAAc;IAC3B;IAEA,kEAAkE;IAClE,MAAMa,uBAAuBtB,MAAMuB,MAAM,CAASP;IAClD,IAAIM,qBAAqBE,OAAO,KAAKR,mBAAmB;QACtDM,qBAAqBE,OAAO,GAAGR;IACjC;IAEA,MAAMS,gBAAgBlB,+BAA+B;QAAEM;QAAMF;IAAS,GAAGI;IACzE,MAAMW,gBAAgBxB,cAAcO,MAAMiB,aAAa,EAAEP,WAAWM;IACpE,MAAME,2BAA2B3B,MAAMuB,MAAM,CAA4B;IACzE,MAAMK,oBAAoB5B,MAAMuB,MAAM,CAAmC;IAEzElB,oBACEK,eACA;YAekBiB;QAdhB,OAAO;YACLE,UAASC,KAAa,EAAEC,WAAW,MAAM,EAAEC,QAA+C;oBAExFL;gBADAC,kBAAkBJ,OAAO,GAAGQ,qBAAAA,sBAAAA,WAAY;iBACxCL,oCAAAA,yBAAyBH,OAAO,cAAhCG,wDAAAA,kCAAkCM,eAAe,CAACH;gBAClDxB,mBAAmB;oBACjBwB;oBACAnB;oBACAuB,YAAYtB;oBACZc;oBACAb;oBACAC;oBACAiB;gBACF;YACF;YACAI,YAAY,GAAER,oCAAAA,yBAAyBH,OAAO,cAAhCG,wDAAAA,kCAAkCQ,YAAY;YAC5DnB,mBAAmBM;QACrB;IACF,GACA;QAACT;QAAMa;QAAef;QAAUC;QAAUE;KAAS;IAGrD,MAAMsB,sBAAsB,CAACN;QAC3B,IAAIF,kBAAkBJ,OAAO,EAAE;YAC7BI,kBAAkBJ,OAAO,CAACM;QAC5B;IACF;IAEA,MAAMO,mBAAmBlC,wBAAwB;QAC/C,GAAGM,KAAK;QACRO;QACAC;QACAC;QACAQ;QACAY,wBAAwBF;QACxBT;IACF;IAEA,OAAO;QACL,GAAGU,gBAAgB;QACnBE,YAAY;YACV,GAAGF,iBAAiBE,UAAU;YAC9BC,WAAW;QACb;QACAA,WAAWvC,KAAKwC,MAAM,CAAChC,MAAM+B,SAAS,EAAE;YACtCE,cAAc;gBACZC,KAAKjB;YACP;YACAkB,aAAa;QACf;IACF;AACF"}

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

@@ -1 +1 @@
-{"version":3,"sources":["VirtualizerScrollViewDynamic.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState } from '@fluentui/react-utilities';\nimport type {\n  VirtualizerConfigProps,\n  VirtualizerConfigState,\n  VirtualizerChildRenderFunction,\n} from '../Virtualizer/Virtualizer.types';\n\nimport type { VirtualizerScrollViewSlots } from '../VirtualizerScrollView/VirtualizerScrollView.types';\nimport type { RefObject } from 'react';\nimport type { ScrollToInterface } from '../../Utilities';\n\nexport type VirtualizerScrollViewDynamicSlots = VirtualizerScrollViewSlots;\n\nexport type VirtualizerScrollViewDynamicProps = ComponentProps<Partial<VirtualizerScrollViewDynamicSlots>> &\n  Partial<Omit<VirtualizerConfigProps, 'itemSize' | 'numItems' | 'getItemSize' | 'children' | 'flagIndex'>> & {\n    /**\n     * Set as the minimum item size.\n     * Axis: 'vertical' = Height\n     * Axis: 'horizontal' = Width\n     */\n    itemSize: number;\n    /**\n     * Callback for acquiring size of individual items\n     * @param index - the index of the requested size's child\n     * If undefined, Virtualizer will auto-measure by default (performance tradeoff)\n     */\n    getItemSize?: (index: number) => number;\n    /**\n     * The total number of items to be virtualized.\n     */\n    numItems: number;\n    /**\n     * Child render function.\n     * Iteratively called to return current virtualizer DOM children.\n     * Will act as a row or column indexer depending on Virtualizer settings.\n     */\n    children: VirtualizerChildRenderFunction;\n    /**\n     * Imperative ref contains our scrollTo index functionality for user control.\n     */\n    imperativeRef?: RefObject<ScrollToInterface>;\n  };\n\nexport type VirtualizerScrollViewDynamicState = ComponentState<VirtualizerScrollViewDynamicSlots> &\n  VirtualizerConfigState;\n"],"names":[],"mappings":"AAAA,WA4CyB"}
+{"version":3,"sources":["VirtualizerScrollViewDynamic.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState } from '@fluentui/react-utilities';\nimport type {\n  VirtualizerConfigProps,\n  VirtualizerConfigState,\n  VirtualizerChildRenderFunction,\n} from '../Virtualizer/Virtualizer.types';\n\nimport type { VirtualizerScrollViewSlots } from '../VirtualizerScrollView/VirtualizerScrollView.types';\nimport type { RefObject } from 'react';\nimport type { ScrollToInterface } from '../../Utilities';\n\nexport type VirtualizerScrollViewDynamicSlots = VirtualizerScrollViewSlots;\n\nexport type VirtualizerScrollViewDynamicProps = ComponentProps<Partial<VirtualizerScrollViewDynamicSlots>> &\n  Partial<Omit<VirtualizerConfigProps, 'itemSize' | 'numItems' | 'getItemSize' | 'children' | 'flagIndex'>> & {\n    /**\n     * Set as the minimum item size.\n     * Axis: 'vertical' = Height\n     * Axis: 'horizontal' = Width\n     */\n    itemSize: number;\n    /**\n     * Callback for acquiring size of individual items\n     * @param index - the index of the requested size's child\n     * If undefined, Virtualizer will auto-measure by default (performance tradeoff)\n     */\n    getItemSize?: (index: number) => number;\n    /**\n     * The total number of items to be virtualized.\n     */\n    numItems: number;\n    /**\n     * Child render function.\n     * Iteratively called to return current virtualizer DOM children.\n     * Will act as a row or column indexer depending on Virtualizer settings.\n     */\n    children: VirtualizerChildRenderFunction;\n    /**\n     * Imperative ref contains our scrollTo index functionality for user control.\n     */\n    imperativeRef?: RefObject<ScrollToInterface>;\n    /**\n     * Imperative ref contains our scrollTo index functionality for user control.\n     */\n    enablePagination?: boolean;\n  };\n\nexport type VirtualizerScrollViewDynamicState = ComponentState<VirtualizerScrollViewDynamicSlots> &\n  VirtualizerConfigState;\n"],"names":[],"mappings":"AAAA,WAgDyB"}

package/lib/components/VirtualizerScrollViewDynamic/useVirtualizerScrollViewDynamic.js

@@ -3,12 +3,16 @@ import { slot, useMergedRefs } from '@fluentui/react-utilities';
 import { useVirtualizer_unstable } from '../Virtualizer/useVirtualizer';
 import { useDynamicVirtualizerMeasure } from '../../Hooks';
 import { useVirtualizerContextState_unstable, scrollToItemDynamic } from '../../Utilities';
-import { useImperativeHandle } from 'react';
+import { useImperativeHandle, useState } from 'react';
 import { useMeasureList } from '../../hooks/useMeasureList';
+import { useDynamicVirtualizerPagination } from '../../hooks/useDynamicPagination';
 export function useVirtualizerScrollViewDynamic_unstable(props) {
+    var _imperativeVirtualizerRef_current;
     const contextState = useVirtualizerContextState_unstable(props.virtualizerContext);
-    const { imperativeRef, axis = 'vertical', reversed, imperativeVirtualizerRef } = props;
+    const { imperativeRef, axis = 'vertical', reversed, imperativeVirtualizerRef, enablePagination = false } = props;
     let sizeTrackingArray = React.useRef(new Array(props.numItems).fill(props.itemSize));
+    // This lets us trigger updates when a size change occurs.
+    const [sizeUpdateCount, setSizeUpdateCount] = useState(0);
     const getChildSizeAuto = React.useCallback((index)=>{
         if (sizeTrackingArray.current.length <= index || sizeTrackingArray.current[index] <= 0) {
             // Default size for initial state or untracked
@@ -17,9 +21,11 @@ export function useVirtualizerScrollViewDynamic_unstable(props) {
         /* Required to be defined prior to our measure function
        * we use a sizing array ref that we will update post-render
        */ return sizeTrackingArray.current[index];
-    }, [
+    }, // eslint-disable-next-line react-hooks/exhaustive-deps
+    [
         sizeTrackingArray,
-        props.itemSize
+        props.itemSize,
+        sizeUpdateCount
     ]);
     var _props_axis, _props_getItemSize, _contextState_contextIndex;
     const { virtualizerLength, bufferItems, bufferSize, scrollRef } = useDynamicVirtualizerMeasure({
@@ -29,14 +35,21 @@ export function useVirtualizerScrollViewDynamic_unstable(props) {
         currentIndex: (_contextState_contextIndex = contextState === null || contextState === void 0 ? void 0 : contextState.contextIndex) !== null && _contextState_contextIndex !== void 0 ? _contextState_contextIndex : 0,
         numItems: props.numItems
     });
+    const _imperativeVirtualizerRef = useMergedRefs(React.useRef(null), imperativeVirtualizerRef);
+    var _contextState_contextIndex1;
+    const paginationRef = useDynamicVirtualizerPagination({
+        axis,
+        progressiveItemSizes: (_imperativeVirtualizerRef_current = _imperativeVirtualizerRef.current) === null || _imperativeVirtualizerRef_current === void 0 ? void 0 : _imperativeVirtualizerRef_current.progressiveSizes,
+        virtualizerLength,
+        currentIndex: (_contextState_contextIndex1 = contextState === null || contextState === void 0 ? void 0 : contextState.contextIndex) !== null && _contextState_contextIndex1 !== void 0 ? _contextState_contextIndex1 : 0
+    }, enablePagination);
     // Store the virtualizer length as a ref for imperative ref access
     const virtualizerLengthRef = React.useRef(virtualizerLength);
     if (virtualizerLengthRef.current !== virtualizerLength) {
         virtualizerLengthRef.current = virtualizerLength;
     }
-    const scrollViewRef = useMergedRefs(props.scrollViewRef, scrollRef);
+    const scrollViewRef = useMergedRefs(props.scrollViewRef, scrollRef, paginationRef);
     const scrollCallbackRef = React.useRef(null);
-    const _imperativeVirtualizerRef = useMergedRefs(React.useRef(null), imperativeVirtualizerRef);
     useImperativeHandle(imperativeRef, ()=>{
         var _imperativeVirtualizerRef_current;
         return {
@@ -85,6 +98,10 @@ export function useVirtualizerScrollViewDynamic_unstable(props) {
         onRenderedFlaggedIndex: handleRenderedIndex
     });
     const measureObject = useMeasureList(virtualizerState.virtualizerStartIndex, virtualizerLength, props.numItems, props.itemSize);
+    if (enablePagination && measureObject.sizeUpdateCount !== sizeUpdateCount) {
+        /* This enables us to let callback know that the sizes have been updated
+    triggers a re-render but is only required on pagination (else index change handles) */ setSizeUpdateCount(measureObject.sizeUpdateCount);
+    }
     if (axis === 'horizontal') {
         sizeTrackingArray = measureObject.widthArray;
     } else {
@@ -98,12 +115,6 @@ export function useVirtualizerScrollViewDynamic_unstable(props) {
                     ...child.props,
                     key: child.key,
                     ref: (element)=>{
-                        // If a ref exists in props, call it
-                        if (typeof child.props.ref === 'function') {
-                            child.props.ref(element);
-                        } else if (child.props.ref) {
-                            child.props.ref.current = element;
-                        }
                         if (child.hasOwnProperty('ref')) {
                             // We must access this from the child directly, not props (forward ref).
                             // eslint-disable-next-line  @typescript-eslint/no-explicit-any

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

@@ -1 +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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"}
+{"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, useState } from 'react';\nimport { useMeasureList } from '../../hooks/useMeasureList';\nimport type { IndexedResizeCallbackElement } from '../../hooks/useMeasureList';\nimport { useDynamicVirtualizerPagination } from '../../hooks/useDynamicPagination';\n\nexport function useVirtualizerScrollViewDynamic_unstable(\n  props: VirtualizerScrollViewDynamicProps,\n): VirtualizerScrollViewDynamicState {\n  const contextState = useVirtualizerContextState_unstable(props.virtualizerContext);\n  const { imperativeRef, axis = 'vertical', reversed, imperativeVirtualizerRef, enablePagination = false } = props;\n\n  let sizeTrackingArray = React.useRef<number[]>(new Array(props.numItems).fill(props.itemSize));\n\n  // This lets us trigger updates when a size change occurs.\n  const [sizeUpdateCount, setSizeUpdateCount] = useState(0);\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    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [sizeTrackingArray, props.itemSize, sizeUpdateCount],\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  const _imperativeVirtualizerRef = useMergedRefs(React.useRef<VirtualizerDataRef>(null), imperativeVirtualizerRef);\n\n  const paginationRef = useDynamicVirtualizerPagination(\n    {\n      axis,\n      progressiveItemSizes: _imperativeVirtualizerRef.current?.progressiveSizes,\n      virtualizerLength,\n      currentIndex: contextState?.contextIndex ?? 0,\n    },\n    enablePagination,\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, paginationRef) as React.RefObject<HTMLDivElement>;\n  const scrollCallbackRef = React.useRef<null | ((index: number) => void)>(null);\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 (enablePagination && measureObject.sizeUpdateCount !== sizeUpdateCount) {\n    /* This enables us to let callback know that the sizes have been updated\n    triggers a re-render but is only required on pagination (else index change handles) */\n    setSizeUpdateCount(measureObject.sizeUpdateCount);\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 (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","useState","useMeasureList","useDynamicVirtualizerPagination","useVirtualizerScrollViewDynamic_unstable","props","_imperativeVirtualizerRef","contextState","virtualizerContext","imperativeRef","axis","reversed","imperativeVirtualizerRef","enablePagination","sizeTrackingArray","useRef","Array","numItems","fill","itemSize","sizeUpdateCount","setSizeUpdateCount","getChildSizeAuto","useCallback","index","current","length","virtualizerLength","bufferItems","bufferSize","scrollRef","defaultItemSize","direction","getItemSize","currentIndex","contextIndex","paginationRef","progressiveItemSizes","progressiveSizes","virtualizerLengthRef","scrollViewRef","scrollCallbackRef","scrollTo","behavior","callback","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/hooks/hooks.types.js.map

@@ -1 +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"}
+{"version":3,"sources":["hooks.types.ts"],"sourcesContent":["import { MutableRefObject, RefObject } 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\nexport type VirtualizerStaticPaginationProps = {\n  itemSize: number;\n  axis?: 'vertical' | 'horizontal';\n};\n\n/**\n * Props to be passed into dynamic virtualization hooks\n * All props can be acquired from useVirtualizer hooks themselves and passed in\n */\nexport type VirtualizerDynamicPaginationProps = {\n  /**\n   * An array that tracks the sizing of each item in virtualizer cumulatively\n   */\n  progressiveItemSizes: RefObject<number[]> | undefined;\n  /**\n   * The current starting index of the virtualizer's DOM elements\n   */\n  currentIndex: number;\n  /**\n   * The axis we should paginate on (should match virtualizer's axis)\n   */\n  axis?: 'vertical' | 'horizontal';\n  /**\n   * The current length of Virtualizer's actual DOM elements\n   */\n  virtualizerLength: number;\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,WAiDC"}

package/lib/hooks/useDynamicPagination.js

@@ -0,0 +1,127 @@
+import * as React from 'react';
+import { useRef } from 'react';
+/**
+ * Optional hook that will enable pagination on the virtualizer so that it 'autoscrolls' to an items exact position
+ * Sizes are dynamic so we require a progressive sizing array (passed in from Dynamic virtualizer hooks)
+ * On short scrolls, we will go at minimum to the next/previous item so that arrow pagination works
+ * All VirtualizerDynamicPaginationProps can be grabbed from dynamic Virtualizer hooks externally and passed in
+ */ export const useDynamicVirtualizerPagination = (virtualizerProps, paginationEnabled = true)=>{
+    const { axis = 'vertical', currentIndex, progressiveItemSizes, virtualizerLength } = virtualizerProps;
+    const timeoutRef = useRef(null);
+    const lastScrollPos = useRef(-1);
+    const lastIndexScrolled = useRef(-1);
+    const scrollContainer = React.useRef(null);
+    const clearListeners = ()=>{
+        if (scrollContainer.current) {
+            scrollContainer.current.removeEventListener('scroll', onScroll);
+            scrollContainer.current = null;
+            if (timeoutRef.current) {
+                clearTimeout(timeoutRef.current);
+            }
+        }
+    };
+    React.useEffect(()=>{
+        return ()=>{
+            clearListeners();
+        };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    /**
+   * Handle scroll stop event and paginate to the closest item
+   * If the closest item is the same as the previous scroll end
+   * we paginate to the next/previous one based on direction
+   *
+   * Users/Virtualizer-Hooks must pass in a cumulative array of sizes
+   * This prevents the need to recalculate and ensures size arrays are synced externally
+   */ const onScrollEnd = React.useCallback(()=>{
+        if (!scrollContainer.current || !paginationEnabled || !(progressiveItemSizes === null || progressiveItemSizes === void 0 ? void 0 : progressiveItemSizes.current)) {
+            // No container found
+            return;
+        }
+        const currentScrollPos = Math.round(axis === 'vertical' ? scrollContainer.current.scrollTop : scrollContainer.current.scrollLeft);
+        let closestItemPos = 0;
+        let closestItem = 0;
+        const endItem = Math.min(currentIndex + virtualizerLength, progressiveItemSizes.current.length);
+        for(let i = currentIndex; i < endItem - 1; i++){
+            if (currentScrollPos <= progressiveItemSizes.current[i + 1] && currentScrollPos >= progressiveItemSizes.current[i]) {
+                // Found our in between position
+                const distanceToPrev = Math.abs(currentScrollPos - progressiveItemSizes.current[i]);
+                const distanceToNext = Math.abs(progressiveItemSizes.current[i + 1] - currentScrollPos);
+                if (distanceToPrev < distanceToNext) {
+                    closestItem = i;
+                } else {
+                    closestItem = i + 1;
+                }
+                break;
+            }
+        }
+        let nextItem;
+        if (Math.round(closestItem - lastIndexScrolled.current) === 0) {
+            // Special case for go to next/previous with minimum amount of scroll needed
+            const nextTarget = lastScrollPos.current < currentScrollPos ? 1 : -1;
+            // This will also handle a case where we scrolled to the exact correct position (noop)
+            const isSecondaryScroll = Math.round(lastScrollPos.current - currentScrollPos) === 0;
+            const posMod = isSecondaryScroll ? 0 : nextTarget;
+            nextItem = closestItem + posMod;
+        } else {
+            // Pagination for anything else can just jump to the closest!
+            nextItem = closestItem;
+        }
+        // Safeguard nextItem
+        nextItem = Math.min(Math.max(0, nextItem), progressiveItemSizes.current.length);
+        closestItemPos = progressiveItemSizes.current[nextItem];
+        if (axis === 'vertical') {
+            scrollContainer.current.scrollTo({
+                top: closestItemPos,
+                behavior: 'smooth'
+            });
+        } else {
+            scrollContainer.current.scrollTo({
+                left: closestItemPos,
+                behavior: 'smooth'
+            });
+        }
+        lastScrollPos.current = progressiveItemSizes.current[nextItem];
+        lastIndexScrolled.current = nextItem;
+    }, [
+        paginationEnabled,
+        currentIndex,
+        scrollContainer,
+        virtualizerLength,
+        axis,
+        progressiveItemSizes
+    ]);
+    /**
+   * On scroll timer that will continuously delay callback until scrolling stops
+   */ const onScroll = React.useCallback((event)=>{
+        if (timeoutRef.current) {
+            clearTimeout(timeoutRef.current);
+        }
+        timeoutRef.current = setTimeout(onScrollEnd, 100);
+    }, [
+        onScrollEnd
+    ]);
+    /**
+   * Pagination ref will ensure we attach listeners to containers on change
+   * It is returned from hook and merged into the scroll container externally
+   */ const paginationRef = React.useCallback((instance)=>{
+        if (!paginationEnabled) {
+            clearListeners();
+            scrollContainer.current = null;
+            return;
+        }
+        if (scrollContainer.current !== instance) {
+            clearListeners();
+            scrollContainer.current = instance;
+            if (scrollContainer.current) {
+                scrollContainer.current.addEventListener('scroll', onScroll);
+            }
+        }
+    }, // eslint-disable-next-line react-hooks/exhaustive-deps
+    [
+        onScroll,
+        onScrollEnd,
+        paginationEnabled
+    ]);
+    return paginationRef;
+};

package/lib/hooks/useDynamicPagination.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["useDynamicPagination.ts"],"sourcesContent":["import * as React from 'react';\nimport { VirtualizerDynamicPaginationProps } from './hooks.types';\nimport { useRef } from 'react';\n\n/**\n * Optional hook that will enable pagination on the virtualizer so that it 'autoscrolls' to an items exact position\n * Sizes are dynamic so we require a progressive sizing array (passed in from Dynamic virtualizer hooks)\n * On short scrolls, we will go at minimum to the next/previous item so that arrow pagination works\n * All VirtualizerDynamicPaginationProps can be grabbed from dynamic Virtualizer hooks externally and passed in\n */\nexport const useDynamicVirtualizerPagination = (\n  virtualizerProps: VirtualizerDynamicPaginationProps,\n  paginationEnabled: Boolean = true,\n) => {\n  const { axis = 'vertical', currentIndex, progressiveItemSizes, virtualizerLength } = virtualizerProps;\n\n  const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n  const lastScrollPos = useRef<number>(-1);\n  const lastIndexScrolled = useRef<number>(-1);\n\n  const scrollContainer = React.useRef<HTMLElement | null>(null);\n\n  const clearListeners = () => {\n    if (scrollContainer.current) {\n      scrollContainer.current.removeEventListener('scroll', onScroll);\n      scrollContainer.current = null;\n      if (timeoutRef.current) {\n        clearTimeout(timeoutRef.current);\n      }\n    }\n  };\n\n  React.useEffect(() => {\n    return () => {\n      clearListeners();\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  /**\n   * Handle scroll stop event and paginate to the closest item\n   * If the closest item is the same as the previous scroll end\n   * we paginate to the next/previous one based on direction\n   *\n   * Users/Virtualizer-Hooks must pass in a cumulative array of sizes\n   * This prevents the need to recalculate and ensures size arrays are synced externally\n   */\n  const onScrollEnd = React.useCallback(() => {\n    if (!scrollContainer.current || !paginationEnabled || !progressiveItemSizes?.current) {\n      // No container found\n      return;\n    }\n\n    const currentScrollPos = Math.round(\n      axis === 'vertical' ? scrollContainer.current.scrollTop : scrollContainer.current.scrollLeft,\n    );\n    let closestItemPos = 0;\n    let closestItem = 0;\n    const endItem = Math.min(currentIndex + virtualizerLength, progressiveItemSizes.current.length);\n\n    for (let i = currentIndex; i < endItem - 1; i++) {\n      if (\n        currentScrollPos <= progressiveItemSizes.current[i + 1] &&\n        currentScrollPos >= progressiveItemSizes.current[i]\n      ) {\n        // Found our in between position\n        const distanceToPrev = Math.abs(currentScrollPos - progressiveItemSizes.current[i]);\n        const distanceToNext = Math.abs(progressiveItemSizes.current[i + 1] - currentScrollPos);\n        if (distanceToPrev < distanceToNext) {\n          closestItem = i;\n        } else {\n          closestItem = i + 1;\n        }\n        break;\n      }\n    }\n\n    let nextItem;\n    if (Math.round(closestItem - lastIndexScrolled.current) === 0) {\n      // Special case for go to next/previous with minimum amount of scroll needed\n      const nextTarget = lastScrollPos.current < currentScrollPos ? 1 : -1;\n      // This will also handle a case where we scrolled to the exact correct position (noop)\n      const isSecondaryScroll = Math.round(lastScrollPos.current - currentScrollPos) === 0;\n      const posMod = isSecondaryScroll ? 0 : nextTarget;\n      nextItem = closestItem + posMod;\n    } else {\n      // Pagination for anything else can just jump to the closest!\n      nextItem = closestItem;\n    }\n\n    // Safeguard nextItem\n    nextItem = Math.min(Math.max(0, nextItem), progressiveItemSizes.current.length);\n    closestItemPos = progressiveItemSizes.current[nextItem];\n\n    if (axis === 'vertical') {\n      scrollContainer.current.scrollTo({ top: closestItemPos, behavior: 'smooth' });\n    } else {\n      scrollContainer.current.scrollTo({ left: closestItemPos, behavior: 'smooth' });\n    }\n    lastScrollPos.current = progressiveItemSizes.current[nextItem];\n    lastIndexScrolled.current = nextItem;\n  }, [paginationEnabled, currentIndex, scrollContainer, virtualizerLength, axis, progressiveItemSizes]);\n\n  /**\n   * On scroll timer that will continuously delay callback until scrolling stops\n   */\n  const onScroll = React.useCallback(\n    event => {\n      if (timeoutRef.current) {\n        clearTimeout(timeoutRef.current);\n      }\n      timeoutRef.current = setTimeout(onScrollEnd, 100);\n    },\n    [onScrollEnd],\n  );\n\n  /**\n   * Pagination ref will ensure we attach listeners to containers on change\n   * It is returned from hook and merged into the scroll container externally\n   */\n  const paginationRef = React.useCallback(\n    (instance: HTMLElement | HTMLDivElement | null) => {\n      if (!paginationEnabled) {\n        clearListeners();\n        scrollContainer.current = null;\n        return;\n      }\n      if (scrollContainer.current !== instance) {\n        clearListeners();\n\n        scrollContainer.current = instance;\n        if (scrollContainer.current) {\n          scrollContainer.current.addEventListener('scroll', onScroll);\n        }\n      }\n    },\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [onScroll, onScrollEnd, paginationEnabled],\n  );\n\n  return paginationRef;\n};\n"],"names":["React","useRef","useDynamicVirtualizerPagination","virtualizerProps","paginationEnabled","axis","currentIndex","progressiveItemSizes","virtualizerLength","timeoutRef","lastScrollPos","lastIndexScrolled","scrollContainer","clearListeners","current","removeEventListener","onScroll","clearTimeout","useEffect","onScrollEnd","useCallback","currentScrollPos","Math","round","scrollTop","scrollLeft","closestItemPos","closestItem","endItem","min","length","i","distanceToPrev","abs","distanceToNext","nextItem","nextTarget","isSecondaryScroll","posMod","max","scrollTo","top","behavior","left","event","setTimeout","paginationRef","instance","addEventListener"],"mappings":"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"}

package/lib/hooks/useMeasureList.js

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { useRef } from 'react';
 import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
 /**
  * Provides a way of automating size in the virtualizer
@@ -11,17 +12,30 @@ import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts
     const heightArray = React.useRef(new Array(totalLength).fill(defaultItemSize));
     const refArray = React.useRef([]);
     const { targetDocument } = useFluent();
+    // This lets us trigger updates when a size change occurs.
+    const sizeUpdateCount = useRef(0);
     // the handler for resize observer
     const handleIndexUpdate = React.useCallback((index)=>{
         var _refArray_current_index;
+        let isChanged = false;
         const boundClientRect = (_refArray_current_index = refArray.current[index]) === null || _refArray_current_index === void 0 ? void 0 : _refArray_current_index.getBoundingClientRect();
         const containerWidth = boundClientRect === null || boundClientRect === void 0 ? void 0 : boundClientRect.width;
+        if (containerWidth !== widthArray.current[currentIndex + index]) {
+            isChanged = true;
+        }
         widthArray.current[currentIndex + index] = containerWidth || defaultItemSize;
         const containerHeight = boundClientRect === null || boundClientRect === void 0 ? void 0 : boundClientRect.height;
+        if (containerHeight !== heightArray.current[currentIndex + index]) {
+            isChanged = true;
+        }
         heightArray.current[currentIndex + index] = containerHeight || defaultItemSize;
+        if (isChanged) {
+            sizeUpdateCount.current = sizeUpdateCount.current + 1;
+        }
     }, [
         currentIndex,
-        defaultItemSize
+        defaultItemSize,
+        sizeUpdateCount
     ]);
     const handleElementResizeCallback = (entries)=>{
         for (const entry of entries){
@@ -83,7 +97,8 @@ import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts
         widthArray,
         heightArray,
         createIndexedRef,
-        refArray
+        refArray,
+        sizeUpdateCount: sizeUpdateCount.current
     };
 }
 /**

package/lib/hooks/useMeasureList.js.map

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