@fluentui/react-virtualizer 9.0.0-alpha.83 → 9.0.0-alpha.85

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

@@ -18,7 +18,7 @@ const _useStaticPagination = require("../../hooks/useStaticPagination");
 function useVirtualizerScrollView_unstable(props) {
     const { imperativeRef, itemSize, numItems, axis = 'vertical', reversed, enablePagination = false } = props;
     var _props_axis;
-    const { virtualizerLength, bufferItems, bufferSize, scrollRef } = (0, _Hooks.useStaticVirtualizerMeasure)({
+    const { virtualizerLength, bufferItems, bufferSize, scrollRef, containerSizeRef } = (0, _Hooks.useStaticVirtualizerMeasure)({
         defaultItemSize: props.itemSize,
         direction: (_props_axis = props.axis) !== null && _props_axis !== void 0 ? _props_axis : 'vertical'
     });
@@ -71,9 +71,9 @@ function useVirtualizerScrollView_unstable(props) {
         virtualizerLength,
         bufferItems,
         bufferSize,
-        scrollViewRef,
         onRenderedFlaggedIndex: handleRenderedIndex,
-        imperativeVirtualizerRef
+        imperativeVirtualizerRef,
+        containerSizeRef
     });
     return {
         ...virtualizerState,

package/lib-commonjs/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';\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":["useVirtualizerScrollView_unstable","props","imperativeRef","itemSize","numItems","axis","reversed","enablePagination","virtualizerLength","bufferItems","bufferSize","scrollRef","useStaticVirtualizerMeasure","defaultItemSize","direction","virtualizerLengthRef","React","useRef","current","paginationRef","useStaticVirtualizerPagination","scrollViewRef","useMergedRefs","imperativeVirtualizerRef","scrollCallbackRef","useImperativeHandle","scrollTo","index","behavior","callback","setFlaggedIndex","scrollToItemStatic","totalItems","currentIndex","handleRenderedIndex","virtualizerState","useVirtualizer_unstable","onRenderedFlaggedIndex","components","container","slot","always","defaultProps","ref","elementType"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAUgBA;;;eAAAA;;;;iEAVO;gCACa;gCACI;uBAEI;2BAET;qCAEY;AAExC,SAASA,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,GAAGC,IAAAA,kCAAAA,EAA4B;QAC5FC,iBAAiBZ,MAAME,QAAQ;QAC/BW,WAAWb,CAAAA,cAAAA,MAAMI,IAAI,AAAJA,MAAI,QAAVJ,gBAAAA,KAAAA,IAAAA,cAAc;IAC3B;IAEA,kEAAkE;IAClE,MAAMc,uBAAuBC,OAAMC,MAAM,CAAST;IAClD,IAAIO,qBAAqBG,OAAO,KAAKV,mBAAmB;QACtDO,qBAAqBG,OAAO,GAAGV;IACjC;IAEA,MAAMW,gBAAgBC,IAAAA,mDAAAA,EAA+B;QAAEf;QAAMF;IAAS,GAAGI;IACzE,MAAMc,gBAAgBC,IAAAA,6BAAAA,EAAcrB,MAAMoB,aAAa,EAAEV,WAAWQ;IACpE,MAAMI,2BAA2BP,OAAMC,MAAM,CAA4B;IACzE,MAAMO,oBAAoBR,OAAMC,MAAM,CAAmC;IAEzEQ,IAAAA,0BAAAA,EACEvB,eACA;YAekBqB;QAdhB,OAAO;YACLG,UAASC,KAAa,EAAEC,WAAW,MAAM,EAAEC,QAA+C;oBAExFN;gBADAC,kBAAkBN,OAAO,GAAGW,aAAAA,QAAAA,aAAAA,KAAAA,IAAAA,WAAY;gBACxCN,CAAAA,oCAAAA,yBAAyBL,OAAO,AAAPA,MAAO,QAAhCK,sCAAAA,KAAAA,IAAAA,KAAAA,IAAAA,kCAAkCO,eAAe,CAACH;gBAClDI,IAAAA,6BAAAA,EAAmB;oBACjBJ;oBACAxB;oBACA6B,YAAY5B;oBACZiB;oBACAhB;oBACAC;oBACAsB;gBACF;YACF;YACAK,cAAY,AAAEV,CAAAA,oCAAAA,yBAAyBL,OAAO,AAAPA,MAAO,QAAhCK,sCAAAA,KAAAA,IAAAA,KAAAA,IAAAA,kCAAkCU,YAAY;YAC5DzB,mBAAmBO;QACrB;IACF,GACA;QAACV;QAAMgB;QAAelB;QAAUC;QAAUE;KAAS;IAGrD,MAAM4B,sBAAsB,CAACP;QAC3B,IAAIH,kBAAkBN,OAAO,EAAE;YAC7BM,kBAAkBN,OAAO,CAACS;QAC5B;IACF;IAEA,MAAMQ,mBAAmBC,IAAAA,uCAAAA,EAAwB;QAC/C,GAAGnC,KAAK;QACRO;QACAC;QACAC;QACAW;QACAgB,wBAAwBH;QACxBX;IACF;IAEA,OAAO;QACL,GAAGY,gBAAgB;QACnBG,YAAY;YACV,GAAGH,iBAAiBG,UAAU;YAC9BC,WAAW;QACb;QACAA,WAAWC,oBAAAA,CAAKC,MAAM,CAACxC,MAAMsC,SAAS,EAAE;YACtCG,cAAc;gBACZC,KAAKtB;YACP;YACAuB,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, containerSizeRef } = 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    onRenderedFlaggedIndex: handleRenderedIndex,\n    imperativeVirtualizerRef,\n    containerSizeRef,\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":["useVirtualizerScrollView_unstable","props","imperativeRef","itemSize","numItems","axis","reversed","enablePagination","virtualizerLength","bufferItems","bufferSize","scrollRef","containerSizeRef","useStaticVirtualizerMeasure","defaultItemSize","direction","virtualizerLengthRef","React","useRef","current","paginationRef","useStaticVirtualizerPagination","scrollViewRef","useMergedRefs","imperativeVirtualizerRef","scrollCallbackRef","useImperativeHandle","scrollTo","index","behavior","callback","setFlaggedIndex","scrollToItemStatic","totalItems","currentIndex","handleRenderedIndex","virtualizerState","useVirtualizer_unstable","onRenderedFlaggedIndex","components","container","slot","always","defaultProps","ref","elementType"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAUgBA;;;eAAAA;;;;iEAVO;gCACa;gCACI;uBAEI;2BAET;qCAEY;AAExC,SAASA,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,EAAEC,gBAAgB,EAAE,GAAGC,IAAAA,kCAAAA,EAA4B;QAC9GC,iBAAiBb,MAAME,QAAQ;QAC/BY,WAAWd,CAAAA,cAAAA,MAAMI,IAAI,AAAJA,MAAI,QAAVJ,gBAAAA,KAAAA,IAAAA,cAAc;IAC3B;IAEA,kEAAkE;IAClE,MAAMe,uBAAuBC,OAAMC,MAAM,CAASV;IAClD,IAAIQ,qBAAqBG,OAAO,KAAKX,mBAAmB;QACtDQ,qBAAqBG,OAAO,GAAGX;IACjC;IAEA,MAAMY,gBAAgBC,IAAAA,mDAAAA,EAA+B;QAAEhB;QAAMF;IAAS,GAAGI;IACzE,MAAMe,gBAAgBC,IAAAA,6BAAAA,EAActB,MAAMqB,aAAa,EAAEX,WAAWS;IACpE,MAAMI,2BAA2BP,OAAMC,MAAM,CAA4B;IACzE,MAAMO,oBAAoBR,OAAMC,MAAM,CAAmC;IAEzEQ,IAAAA,0BAAAA,EACExB,eACA;YAekBsB;QAdhB,OAAO;YACLG,UAASC,KAAa,EAAEC,WAAW,MAAM,EAAEC,QAA+C;oBAExFN;gBADAC,kBAAkBN,OAAO,GAAGW,aAAAA,QAAAA,aAAAA,KAAAA,IAAAA,WAAY;gBACxCN,CAAAA,oCAAAA,yBAAyBL,OAAO,AAAPA,MAAO,QAAhCK,sCAAAA,KAAAA,IAAAA,KAAAA,IAAAA,kCAAkCO,eAAe,CAACH;gBAClDI,IAAAA,6BAAAA,EAAmB;oBACjBJ;oBACAzB;oBACA8B,YAAY7B;oBACZkB;oBACAjB;oBACAC;oBACAuB;gBACF;YACF;YACAK,cAAY,AAAEV,CAAAA,oCAAAA,yBAAyBL,OAAO,AAAPA,MAAO,QAAhCK,sCAAAA,KAAAA,IAAAA,KAAAA,IAAAA,kCAAkCU,YAAY;YAC5D1B,mBAAmBQ;QACrB;IACF,GACA;QAACX;QAAMiB;QAAenB;QAAUC;QAAUE;KAAS;IAGrD,MAAM6B,sBAAsB,CAACP;QAC3B,IAAIH,kBAAkBN,OAAO,EAAE;YAC7BM,kBAAkBN,OAAO,CAACS;QAC5B;IACF;IAEA,MAAMQ,mBAAmBC,IAAAA,uCAAAA,EAAwB;QAC/C,GAAGpC,KAAK;QACRO;QACAC;QACAC;QACA4B,wBAAwBH;QACxBX;QACAZ;IACF;IAEA,OAAO;QACL,GAAGwB,gBAAgB;QACnBG,YAAY;YACV,GAAGH,iBAAiBG,UAAU;YAC9BC,WAAW;QACb;QACAA,WAAWC,oBAAAA,CAAKC,MAAM,CAACzC,MAAMuC,SAAS,EAAE;YACtCG,cAAc;gBACZC,KAAKtB;YACP;YACAuB,aAAa;QACf;IACF;AACF"}

package/lib-commonjs/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     * 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":[],"rangeMappings":"","mappings":""}
+{"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 { DynamicVirtualizerContextProps, ScrollToInterface } from '../../Utilities';\n\nexport type VirtualizerScrollViewDynamicSlots = VirtualizerScrollViewSlots;\n\nexport type VirtualizerScrollViewDynamicProps = ComponentProps<Partial<VirtualizerScrollViewDynamicSlots>> &\n  Partial<\n    Omit<\n      VirtualizerConfigProps,\n      'itemSize' | 'numItems' | 'getItemSize' | 'children' | 'flagIndex' | 'virtualizerContext'\n    >\n  > & {\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     * Enables override of dynamic virtualizer context if required.\n     */\n    virtualizerContext?: DynamicVirtualizerContextProps;\n  };\n\nexport type VirtualizerScrollViewDynamicState = ComponentState<VirtualizerScrollViewDynamicSlots> &\n  VirtualizerConfigState;\n"],"names":[],"rangeMappings":"","mappings":""}

package/lib-commonjs/components/VirtualizerScrollViewDynamic/useVirtualizerScrollViewDynamic.js

@@ -20,7 +20,7 @@ function useVirtualizerScrollViewDynamic_unstable(props) {
     'use no memo';
     var _imperativeVirtualizerRef_current;
     const contextState = (0, _Utilities.useVirtualizerContextState_unstable)(props.virtualizerContext);
-    const { imperativeRef, axis = 'vertical', reversed, imperativeVirtualizerRef, enablePagination = false } = props;
+    const { imperativeRef, axis = 'vertical', reversed, imperativeVirtualizerRef, enablePagination = false, bufferItems: _bufferItems, bufferSize: _bufferSize } = 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] = (0, _react.useState)(0);
@@ -37,21 +37,23 @@ function useVirtualizerScrollViewDynamic_unstable(props) {
         props.itemSize,
         sizeUpdateCount
     ]);
-    var _props_axis, _props_getItemSize, _contextState_contextIndex;
-    const { virtualizerLength, bufferItems, bufferSize, scrollRef } = (0, _Hooks.useDynamicVirtualizerMeasure)({
+    var _props_axis, _props_getItemSize;
+    const { virtualizerLength, bufferItems, bufferSize, scrollRef, containerSizeRef } = (0, _Hooks.useDynamicVirtualizerMeasure)({
         defaultItemSize: props.itemSize,
         direction: (_props_axis = props.axis) !== null && _props_axis !== void 0 ? _props_axis : 'vertical',
         getItemSize: (_props_getItemSize = props.getItemSize) !== null && _props_getItemSize !== void 0 ? _props_getItemSize : getChildSizeAuto,
-        currentIndex: (_contextState_contextIndex = contextState === null || contextState === void 0 ? void 0 : contextState.contextIndex) !== null && _contextState_contextIndex !== void 0 ? _contextState_contextIndex : 0,
-        numItems: props.numItems
+        virtualizerContext: contextState,
+        numItems: props.numItems,
+        bufferItems: _bufferItems,
+        bufferSize: _bufferSize
     });
     const _imperativeVirtualizerRef = (0, _reactutilities.useMergedRefs)(_react.useRef(null), imperativeVirtualizerRef);
-    var _contextState_contextIndex1;
+    var _contextState_contextIndex;
     const paginationRef = (0, _useDynamicPagination.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
+        currentIndex: (_contextState_contextIndex = contextState === null || contextState === void 0 ? void 0 : contextState.contextIndex) !== null && _contextState_contextIndex !== void 0 ? _contextState_contextIndex : 0
     }, enablePagination);
     // Store the virtualizer length as a ref for imperative ref access
     const virtualizerLengthRef = _react.useRef(virtualizerLength);
@@ -102,10 +104,10 @@ function useVirtualizerScrollViewDynamic_unstable(props) {
         virtualizerLength,
         bufferItems,
         bufferSize,
-        scrollViewRef,
         virtualizerContext: contextState,
         imperativeVirtualizerRef: _imperativeVirtualizerRef,
-        onRenderedFlaggedIndex: handleRenderedIndex
+        onRenderedFlaggedIndex: handleRenderedIndex,
+        containerSizeRef
     });
     const measureObject = (0, _useMeasureList.useMeasureList)(virtualizerState.virtualizerStartIndex, virtualizerLength, props.numItems, props.itemSize);
     if (enablePagination && measureObject.sizeUpdateCount !== sizeUpdateCount) {

package/lib-commonjs/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, 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  'use no memo';\n\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":["useVirtualizerScrollViewDynamic_unstable","props","_imperativeVirtualizerRef","contextState","useVirtualizerContextState_unstable","virtualizerContext","imperativeRef","axis","reversed","imperativeVirtualizerRef","enablePagination","sizeTrackingArray","React","useRef","Array","numItems","fill","itemSize","sizeUpdateCount","setSizeUpdateCount","useState","getChildSizeAuto","useCallback","index","current","length","virtualizerLength","bufferItems","bufferSize","scrollRef","useDynamicVirtualizerMeasure","defaultItemSize","direction","getItemSize","currentIndex","contextIndex","useMergedRefs","paginationRef","useDynamicVirtualizerPagination","progressiveItemSizes","progressiveSizes","virtualizerLengthRef","scrollViewRef","scrollCallbackRef","useImperativeHandle","scrollTo","behavior","callback","totalSize","Math","max","setFlaggedIndex","scrollToItemDynamic","itemSizes","nodeSizes","handleRenderedIndex","virtualizerState","useVirtualizer_unstable","onRenderedFlaggedIndex","measureObject","useMeasureList","virtualizerStartIndex","widthArray","heightArray","Children","map","virtualizedChildren","child","isValidElement","createElement","type","key","ref","element","hasOwnProperty","localRef","createIndexedRef","components","container","slot","always","defaultProps","elementType"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","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  'use no memo';\n\n  const contextState = useVirtualizerContextState_unstable(props.virtualizerContext);\n  const {\n    imperativeRef,\n    axis = 'vertical',\n    reversed,\n    imperativeVirtualizerRef,\n    enablePagination = false,\n    bufferItems: _bufferItems,\n    bufferSize: _bufferSize,\n  } = 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, containerSizeRef } = useDynamicVirtualizerMeasure({\n    defaultItemSize: props.itemSize,\n    direction: props.axis ?? 'vertical',\n    getItemSize: props.getItemSize ?? getChildSizeAuto,\n    virtualizerContext: contextState,\n    numItems: props.numItems,\n    bufferItems: _bufferItems,\n    bufferSize: _bufferSize,\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    virtualizerContext: contextState,\n    imperativeVirtualizerRef: _imperativeVirtualizerRef,\n    onRenderedFlaggedIndex: handleRenderedIndex,\n    containerSizeRef,\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":["useVirtualizerScrollViewDynamic_unstable","props","_imperativeVirtualizerRef","contextState","useVirtualizerContextState_unstable","virtualizerContext","imperativeRef","axis","reversed","imperativeVirtualizerRef","enablePagination","bufferItems","_bufferItems","bufferSize","_bufferSize","sizeTrackingArray","React","useRef","Array","numItems","fill","itemSize","sizeUpdateCount","setSizeUpdateCount","useState","getChildSizeAuto","useCallback","index","current","length","virtualizerLength","scrollRef","containerSizeRef","useDynamicVirtualizerMeasure","defaultItemSize","direction","getItemSize","useMergedRefs","paginationRef","useDynamicVirtualizerPagination","progressiveItemSizes","progressiveSizes","currentIndex","contextIndex","virtualizerLengthRef","scrollViewRef","scrollCallbackRef","useImperativeHandle","scrollTo","behavior","callback","totalSize","Math","max","setFlaggedIndex","scrollToItemDynamic","itemSizes","nodeSizes","handleRenderedIndex","virtualizerState","useVirtualizer_unstable","onRenderedFlaggedIndex","measureObject","useMeasureList","virtualizerStartIndex","widthArray","heightArray","Children","map","virtualizedChildren","child","isValidElement","createElement","type","key","ref","element","hasOwnProperty","localRef","createIndexedRef","components","container","slot","always","defaultProps","elementType"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

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

@@ -1 +1 @@
-{"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  (\n    entries: ResizeObserverEntry[],\n    // TODO: exclude types from this lint rule: https://github.com/microsoft/fluentui/issues/31286\n    // eslint-disable-next-line no-restricted-globals\n    observer: ResizeObserver,\n    scrollRef?: MutableRefObject<HTMLElement | null>,\n  ): void;\n}\n"],"names":[],"rangeMappings":";;;","mappings":"AA2CA;;;CAGC"}
+{"version":3,"sources":["hooks.types.ts"],"sourcesContent":["import { MutableRefObject, RefObject } from 'react';\nimport { DynamicVirtualizerContextProps } from '../Utilities';\n\nexport type VirtualizerMeasureProps = {\n  defaultItemSize: number;\n  direction?: 'vertical' | 'horizontal';\n\n  /**\n   * Override recommended number of buffer items\n   */\n  bufferItems?: number;\n\n  /**\n   * Override recommended buffer size (px)\n   */\n  bufferSize?: number;\n};\n\nexport type VirtualizerMeasureDynamicProps = {\n  defaultItemSize: number;\n  virtualizerContext: DynamicVirtualizerContextProps;\n  numItems: number;\n  getItemSize: (index: number) => number;\n  direction?: 'vertical' | 'horizontal';\n\n  /**\n   * Override recommended number of buffer items\n   */\n  bufferItems?: number;\n\n  /**\n   * Override recommended buffer size (px)\n   */\n  bufferSize?: number;\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  (\n    entries: ResizeObserverEntry[],\n    // TODO: exclude types from this lint rule: https://github.com/microsoft/fluentui/issues/31286\n    // eslint-disable-next-line no-restricted-globals\n    observer: ResizeObserver,\n    scrollRef?: MutableRefObject<HTMLElement | null>,\n  ): void;\n}\n"],"names":[],"rangeMappings":";;;","mappings":"AAgEA;;;CAGC"}

package/lib-commonjs/hooks/index.js

@@ -8,3 +8,4 @@ _export_star._(require("./useVirtualizerMeasure"), exports);
 _export_star._(require("./useDynamicVirtualizerMeasure"), exports);
 _export_star._(require("./useResizeObserverRef"), exports);
 _export_star._(require("./hooks.types"), exports);
+_export_star._(require("./useMeasureList"), exports);

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

@@ -1 +1 @@
-{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './useIntersectionObserver';\nexport * from './useVirtualizerMeasure';\nexport * from './useDynamicVirtualizerMeasure';\nexport * from './useResizeObserverRef';\nexport * from './hooks.types';\n"],"names":[],"rangeMappings":";;;;;;;;;","mappings":";;;;;uBAAc;uBACA;uBACA;uBACA;uBACA"}
+{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './useIntersectionObserver';\nexport * from './useVirtualizerMeasure';\nexport * from './useDynamicVirtualizerMeasure';\nexport * from './useResizeObserverRef';\nexport * from './hooks.types';\nexport * from './useMeasureList';\n"],"names":[],"rangeMappings":";;;;;;;;;;","mappings":";;;;;uBAAc;uBACA;uBACA;uBACA;uBACA;uBACA"}

package/lib-commonjs/hooks/useDynamicVirtualizerMeasure.js

@@ -12,51 +12,89 @@ const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildc
 const _reactutilities = require("@fluentui/react-utilities");
 const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 const _useResizeObserverRef = require("./useResizeObserverRef");
+const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
 const useDynamicVirtualizerMeasure = (virtualizerProps)=>{
-    const { defaultItemSize, direction = 'vertical', numItems, getItemSize, currentIndex } = virtualizerProps;
-    const indexRef = (0, _react.useRef)(currentIndex);
-    indexRef.current = currentIndex;
+    const { defaultItemSize, direction = 'vertical', numItems, getItemSize, bufferItems, bufferSize, virtualizerContext } = virtualizerProps;
+    const indexRef = (0, _react.useRef)(virtualizerContext.contextIndex);
+    indexRef.current = virtualizerContext.contextIndex;
     const [state, setState] = _react.useState({
         virtualizerLength: 0,
         virtualizerBufferItems: 0,
         virtualizerBufferSize: 0
     });
+    const containerSizeRef = _react.useRef(0);
     const { virtualizerLength, virtualizerBufferItems, virtualizerBufferSize } = state;
+    const { targetDocument } = (0, _reactsharedcontexts.useFluent_unstable)();
     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;
+        if (scrollRef.current !== (targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.body)) {
+            // We have a local scroll container
+            containerSizeRef.current = direction === 'vertical' ? scrollRef === null || scrollRef === void 0 ? void 0 : scrollRef.current.getBoundingClientRect().height : scrollRef === null || scrollRef === void 0 ? void 0 : scrollRef.current.getBoundingClientRect().width;
+        } else if (targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.defaultView) {
+            var _targetDocument_defaultView, _targetDocument_defaultView1;
+            // If our scroll ref is the document body, we should check window height
+            containerSizeRef.current = direction === 'vertical' ? targetDocument === null || targetDocument === void 0 ? void 0 : (_targetDocument_defaultView = targetDocument.defaultView) === null || _targetDocument_defaultView === void 0 ? void 0 : _targetDocument_defaultView.innerHeight : targetDocument === null || targetDocument === void 0 ? void 0 : (_targetDocument_defaultView1 = targetDocument.defaultView) === null || _targetDocument_defaultView1 === void 0 ? void 0 : _targetDocument_defaultView1.innerWidth;
         }
-        const containerSize = direction === 'vertical' ? scrollRef.current.getBoundingClientRect().height : scrollRef.current.getBoundingClientRect().width;
         let indexSizer = 0;
+        let i = 0;
         let length = 0;
-        while(indexSizer <= containerSize && length < numItems){
-            const iItemSize = getItemSize(indexRef.current + length);
+        const sizeToBeat = containerSizeRef.current + virtualizerBufferSize * 2;
+        while(indexSizer <= sizeToBeat && i + virtualizerContext.contextIndex < numItems){
+            const iItemSize = getItemSize(indexRef.current + i);
+            if (virtualizerContext.childProgressiveSizes.current.length < numItems) {
+                /* We are in unknown territory, either an initial render or an update
+            in virtualizer item length has occurred.
+            We need to let the new items render first then we can accurately assess.*/ return virtualizerLength - virtualizerBufferSize * 2;
+            }
+            const currentScrollPos = virtualizerContext.contextPosition;
+            const currentItemPos = virtualizerContext.childProgressiveSizes.current[indexRef.current + i] - iItemSize;
+            if (currentScrollPos > currentItemPos + iItemSize) {
+                // The item isn't in view, ignore for now.
+                i++;
+                continue;
+            } else if (currentScrollPos > currentItemPos) {
+                // The item is partially out of view, ignore the out of bounds portion
+                const variance = currentItemPos + iItemSize - currentScrollPos;
+                indexSizer += variance;
+            } else {
+                // Item is in view
+                indexSizer += iItemSize;
+            }
             // Increment
-            indexSizer += iItemSize;
+            i++;
             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);
+       * Minimum: 2 - we give slightly more buffer for dynamic version.
+       */ const newBufferItems = bufferItems !== null && bufferItems !== void 0 ? bufferItems : Math.max(Math.ceil(length / 3), 1);
         /*
        * This is how far we deviate into the bufferItems to detect a redraw.
-       */ const bufferSize = Math.max(Math.floor(length / 8 * defaultItemSize), 1);
-        const totalLength = length + bufferItems * 2 + 1;
+       */ const newBufferSize = bufferSize !== null && bufferSize !== void 0 ? bufferSize : Math.max(defaultItemSize / 2.0, 1);
+        const totalLength = length + newBufferItems * 2;
         setState({
             virtualizerLength: totalLength,
-            virtualizerBufferSize: bufferSize,
-            virtualizerBufferItems: bufferItems
+            virtualizerBufferSize: newBufferSize,
+            virtualizerBufferItems: newBufferItems
         });
     }, [
+        bufferItems,
+        bufferSize,
         defaultItemSize,
         direction,
         getItemSize,
-        numItems
+        numItems,
+        targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.body,
+        targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.defaultView,
+        virtualizerBufferSize,
+        virtualizerContext.childProgressiveSizes,
+        virtualizerContext.contextIndex,
+        virtualizerContext.contextPosition,
+        virtualizerLength
     ]);
     const resizeCallback = _react.useCallback((_entries, // eslint-disable-next-line no-restricted-globals
     _observer, scrollRef)=>{
@@ -66,43 +104,23 @@ const useDynamicVirtualizerMeasure = (virtualizerProps)=>{
     }, [
         handleScrollResize
     ]);
-    const scrollRef = (0, _useResizeObserverRef.useResizeObserverRef_unstable)(resizeCallback);
+    const scrollRef = (0, _reactutilities.useMergedRefs)(container, (0, _useResizeObserverRef.useResizeObserverRef_unstable)(resizeCallback));
     (0, _reactutilities.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) {
+        if (virtualizerContext.contextIndex + virtualizerLength < numItems) {
+            // Avoid re-rendering/re-calculating when the end index has already been reached
             handleScrollResize(container);
         }
     }, [
-        getItemSize,
-        currentIndex,
-        direction,
-        virtualizerLength,
-        resizeCallback,
-        handleScrollResize
+        handleScrollResize,
+        numItems,
+        virtualizerContext.contextIndex,
+        virtualizerLength
     ]);
     return {
         virtualizerLength,
         bufferItems: virtualizerBufferItems,
         bufferSize: virtualizerBufferSize,
-        scrollRef
+        scrollRef,
+        containerSizeRef
     };
 };

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

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

package/lib-commonjs/hooks/useMeasureList.js

@@ -57,8 +57,20 @@ function useMeasureList(currentIndex, refLength, totalLength, defaultItemSize) {
         }
     };
     _react.useEffect(()=>{
-        widthArray.current = new Array(totalLength).fill(defaultItemSize);
-        heightArray.current = new Array(totalLength).fill(defaultItemSize);
+        const newHeightLength = totalLength - heightArray.current.length;
+        const newWidthLength = totalLength - widthArray.current.length;
+        /* Ensure we grow or truncate arrays with prior properties,
+    keeping the existing values is important for whitespace assumptions.
+    Even if items in the 'middle' are deleted, we will recalc the whitespace as it is explored.*/ if (newWidthLength > 0) {
+            widthArray.current = widthArray.current.concat(new Array(newWidthLength).fill(defaultItemSize));
+        } else if (newWidthLength < 0) {
+            widthArray.current = widthArray.current.slice(0, totalLength);
+        }
+        if (newHeightLength > 0) {
+            heightArray.current = heightArray.current.concat(new Array(newHeightLength).fill(defaultItemSize));
+        } else if (newHeightLength < 0) {
+            heightArray.current = heightArray.current.slice(0, totalLength);
+        }
     }, [
         defaultItemSize,
         totalLength

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

@@ -1 +1 @@
-{"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":["createResizeObserverFromDocument","useMeasureList","currentIndex","refLength","totalLength","defaultItemSize","widthArray","React","useRef","Array","fill","heightArray","refArray","targetDocument","useFluent","sizeUpdateCount","handleIndexUpdate","useCallback","index","isChanged","boundClientRect","current","getBoundingClientRect","containerWidth","width","containerHeight","height","handleElementResizeCallback","entries","entry","target","handleResize","useEffect","resizeObserver","createIndexedRef","measureElementRef","el","undefined","unobserve","observe","_resizeObserver","disconnect","callback","defaultView","ResizeObserver"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","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    const newHeightLength = totalLength - heightArray.current.length;\n    const newWidthLength = totalLength - widthArray.current.length;\n    /* Ensure we grow or truncate arrays with prior properties,\n    keeping the existing values is important for whitespace assumptions.\n    Even if items in the 'middle' are deleted, we will recalc the whitespace as it is explored.*/\n    if (newWidthLength > 0) {\n      widthArray.current = widthArray.current.concat(new Array(newWidthLength).fill(defaultItemSize));\n    } else if (newWidthLength < 0) {\n      widthArray.current = widthArray.current.slice(0, totalLength);\n    }\n    if (newHeightLength > 0) {\n      heightArray.current = heightArray.current.concat(new Array(newHeightLength).fill(defaultItemSize));\n    } else if (newHeightLength < 0) {\n      heightArray.current = heightArray.current.slice(0, totalLength);\n    }\n  }, [defaultItemSize, totalLength]);\n\n  // Keep the reference of ResizeObserver as a ref, as it should live through renders\n  const resizeObserver = React.useRef(createResizeObserverFromDocument(targetDocument, handleElementResizeCallback));\n\n  /* createIndexedRef provides a dynamic function to create an undefined number of refs at render time\n   * these refs then provide an indexed callback via attaching 'handleResize' to the element itself\n   * this function is then called on resize by handleElementResize and relies on indexing\n   * to track continuous sizes throughout renders while releasing all virtualized element refs each render cycle.\n   */\n  const createIndexedRef = React.useCallback(\n    (index: number) => {\n      const measureElementRef = (el: TElement) => {\n        if (!targetDocument || !resizeObserver.current) {\n          return;\n        }\n\n        if (el) {\n          el.handleResize = () => {\n            handleIndexUpdate(index);\n          };\n        }\n\n        // cleanup previous container\n        if (refArray.current[index] !== undefined && refArray.current[index] !== null) {\n          resizeObserver.current.unobserve(refArray.current[index]!);\n        }\n\n        refArray.current[index] = undefined;\n        if (el) {\n          refArray.current[index] = el;\n          resizeObserver.current.observe(el);\n          handleIndexUpdate(index);\n        }\n      };\n\n      return measureElementRef;\n    },\n    [handleIndexUpdate, resizeObserver, targetDocument],\n  );\n\n  React.useEffect(() => {\n    const _resizeObserver = resizeObserver;\n    return () => _resizeObserver.current?.disconnect();\n  }, [resizeObserver]);\n\n  return { widthArray, heightArray, createIndexedRef, refArray, sizeUpdateCount: sizeUpdateCount.current };\n}\n\n/**\n * FIXME - TS 3.8/3.9 don't have ResizeObserver types by default, move this to a shared utility once we bump the minbar\n * A utility method that creates a ResizeObserver from a target document\n * @param targetDocument - document to use to create the ResizeObserver\n * @param callback  - https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver/ResizeObserver#callback\n * @returns a ResizeObserver instance or null if the global does not exist on the document\n */\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":["createResizeObserverFromDocument","useMeasureList","currentIndex","refLength","totalLength","defaultItemSize","widthArray","React","useRef","Array","fill","heightArray","refArray","targetDocument","useFluent","sizeUpdateCount","handleIndexUpdate","useCallback","index","isChanged","boundClientRect","current","getBoundingClientRect","containerWidth","width","containerHeight","height","handleElementResizeCallback","entries","entry","target","handleResize","useEffect","newHeightLength","length","newWidthLength","concat","slice","resizeObserver","createIndexedRef","measureElementRef","el","undefined","unobserve","observe","_resizeObserver","disconnect","callback","defaultView","ResizeObserver"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

package/lib-commonjs/hooks/useResizeObserverRef.js

@@ -17,11 +17,21 @@ const useResizeObserverRef_unstable = (resizeCallback)=>{
     'use no memo';
     const { targetDocument } = (0, _reactsharedcontexts.useFluent_unstable)();
     const container = _react.useRef(null);
+    const containerHeightRef = _react.useRef(0);
+    const containerWidthRef = _react.useRef(0);
     // the handler for resize observer
     // TODO: exclude types from this lint rule: https://github.com/microsoft/fluentui/issues/31286
     // eslint-disable-next-line no-restricted-globals
     const handleResize = (0, _debounce.debounce)((entries, observer)=>{
-        resizeCallback(entries, observer, container);
+        var _container_current, _container_current1;
+        const containerHeight = (_container_current = container.current) === null || _container_current === void 0 ? void 0 : _container_current.clientHeight;
+        const containerWidth = (_container_current1 = container.current) === null || _container_current1 === void 0 ? void 0 : _container_current1.clientWidth;
+        // Our resize observer will fire on scroll resize, let index change handle that instead.
+        if (containerHeightRef.current !== containerHeight || containerWidth !== containerWidthRef.current) {
+            containerWidthRef.current = containerWidth !== null && containerWidth !== void 0 ? containerWidth : 0;
+            containerHeightRef.current = containerHeight !== null && containerHeight !== void 0 ? containerHeight : 0;
+            resizeCallback(entries, observer, container);
+        }
     });
     // Keep the reference of ResizeObserver in the state, as it should live through renders
     const [resizeObserver, setResizeObserver] = _react.useState(()=>(0, _createResizeObserverFromDocument.createResizeObserverFromDocument)(targetDocument, handleResize));

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

@@ -1 +1 @@
-{"version":3,"sources":["useResizeObserverRef.ts"],"sourcesContent":["import * as React from 'react';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { debounce } from '../utilities/debounce';\nimport { createResizeObserverFromDocument } from '../utilities/createResizeObserverFromDocument';\nimport { ResizeCallbackWithRef } from './hooks.types';\n\n/**\n * useResizeObserverRef_unstable simplifies resize observer connection and ensures debounce/cleanup\n */\nexport const useResizeObserverRef_unstable = (resizeCallback: ResizeCallbackWithRef) => {\n  'use no memo';\n\n  const { targetDocument } = useFluent();\n  const container = React.useRef<HTMLElement | null>(null);\n  // the handler for resize observer\n  // TODO: exclude types from this lint rule: https://github.com/microsoft/fluentui/issues/31286\n  // eslint-disable-next-line no-restricted-globals\n  const handleResize = debounce((entries: ResizeObserverEntry[], observer: ResizeObserver) => {\n    resizeCallback(entries, observer, container);\n  });\n\n  // Keep the reference of ResizeObserver in the state, as it should live through renders\n  const [resizeObserver, setResizeObserver] = React.useState(() =>\n    createResizeObserverFromDocument(targetDocument, handleResize),\n  );\n\n  React.useEffect(() => {\n    // Update our state when resizeCallback changes\n    container.current = null;\n    resizeObserver?.disconnect();\n    setResizeObserver(() => createResizeObserverFromDocument(targetDocument, handleResize));\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [resizeCallback, targetDocument]);\n\n  React.useEffect(() => {\n    return () => {\n      container.current = null;\n      resizeObserver?.disconnect();\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  const scrollRef = React.useCallback(\n    (instance: HTMLElement | HTMLDivElement | null) => {\n      if (container.current !== instance) {\n        if (container.current) {\n          resizeObserver?.unobserve(container.current);\n        }\n\n        container.current = instance;\n        if (container.current) {\n          resizeObserver?.observe(container.current);\n        }\n      }\n    },\n    [resizeObserver],\n  );\n\n  return scrollRef;\n};\n"],"names":["useResizeObserverRef_unstable","resizeCallback","targetDocument","useFluent","container","React","useRef","handleResize","debounce","entries","observer","resizeObserver","setResizeObserver","useState","createResizeObserverFromDocument","useEffect","current","disconnect","scrollRef","useCallback","instance","unobserve","observe"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BASaA;;;eAAAA;;;;iEATU;qCACyB;0BACvB;kDACwB;AAM1C,MAAMA,gCAAgC,CAACC;IAC5C;IAEA,MAAM,EAAEC,cAAc,EAAE,GAAGC,IAAAA,uCAAAA;IAC3B,MAAMC,YAAYC,OAAMC,MAAM,CAAqB;IACnD,kCAAkC;IAClC,8FAA8F;IAC9F,iDAAiD;IACjD,MAAMC,eAAeC,IAAAA,kBAAAA,EAAS,CAACC,SAAgCC;QAC7DT,eAAeQ,SAASC,UAAUN;IACpC;IAEA,uFAAuF;IACvF,MAAM,CAACO,gBAAgBC,kBAAkB,GAAGP,OAAMQ,QAAQ,CAAC,IACzDC,IAAAA,kEAAAA,EAAiCZ,gBAAgBK;IAGnDF,OAAMU,SAAS,CAAC;QACd,+CAA+C;QAC/CX,UAAUY,OAAO,GAAG;QACpBL,mBAAAA,QAAAA,mBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,eAAgBM,UAAU;QAC1BL,kBAAkB,IAAME,IAAAA,kEAAAA,EAAiCZ,gBAAgBK;IACzE,uDAAuD;IACzD,GAAG;QAACN;QAAgBC;KAAe;IAEnCG,OAAMU,SAAS,CAAC;QACd,OAAO;YACLX,UAAUY,OAAO,GAAG;YACpBL,mBAAAA,QAAAA,mBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,eAAgBM,UAAU;QAC5B;IACA,uDAAuD;IACzD,GAAG,EAAE;IAEL,MAAMC,YAAYb,OAAMc,WAAW,CACjC,CAACC;QACC,IAAIhB,UAAUY,OAAO,KAAKI,UAAU;YAClC,IAAIhB,UAAUY,OAAO,EAAE;gBACrBL,mBAAAA,QAAAA,mBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,eAAgBU,SAAS,CAACjB,UAAUY,OAAO;YAC7C;YAEAZ,UAAUY,OAAO,GAAGI;YACpB,IAAIhB,UAAUY,OAAO,EAAE;gBACrBL,mBAAAA,QAAAA,mBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,eAAgBW,OAAO,CAAClB,UAAUY,OAAO;YAC3C;QACF;IACF,GACA;QAACL;KAAe;IAGlB,OAAOO;AACT"}
+{"version":3,"sources":["useResizeObserverRef.ts"],"sourcesContent":["import * as React from 'react';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { debounce } from '../utilities/debounce';\nimport { createResizeObserverFromDocument } from '../utilities/createResizeObserverFromDocument';\nimport { ResizeCallbackWithRef } from './hooks.types';\n\n/**\n * useResizeObserverRef_unstable simplifies resize observer connection and ensures debounce/cleanup\n */\nexport const useResizeObserverRef_unstable = (resizeCallback: ResizeCallbackWithRef) => {\n  'use no memo';\n\n  const { targetDocument } = useFluent();\n  const container = React.useRef<HTMLElement | null>(null);\n  const containerHeightRef = React.useRef<number>(0);\n  const containerWidthRef = React.useRef<number>(0);\n  // the handler for resize observer\n  // TODO: exclude types from this lint rule: https://github.com/microsoft/fluentui/issues/31286\n  // eslint-disable-next-line no-restricted-globals\n  const handleResize = debounce((entries: ResizeObserverEntry[], observer: ResizeObserver) => {\n    const containerHeight = container.current?.clientHeight;\n    const containerWidth = container.current?.clientWidth;\n    // Our resize observer will fire on scroll resize, let index change handle that instead.\n    if (containerHeightRef.current !== containerHeight || containerWidth !== containerWidthRef.current) {\n      containerWidthRef.current = containerWidth ?? 0;\n      containerHeightRef.current = containerHeight ?? 0;\n      resizeCallback(entries, observer, container);\n    }\n  });\n\n  // Keep the reference of ResizeObserver in the state, as it should live through renders\n  const [resizeObserver, setResizeObserver] = React.useState(() =>\n    createResizeObserverFromDocument(targetDocument, handleResize),\n  );\n\n  React.useEffect(() => {\n    // Update our state when resizeCallback changes\n    container.current = null;\n    resizeObserver?.disconnect();\n    setResizeObserver(() => createResizeObserverFromDocument(targetDocument, handleResize));\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [resizeCallback, targetDocument]);\n\n  React.useEffect(() => {\n    return () => {\n      container.current = null;\n      resizeObserver?.disconnect();\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  const scrollRef = React.useCallback(\n    (instance: HTMLElement | HTMLDivElement | null) => {\n      if (container.current !== instance) {\n        if (container.current) {\n          resizeObserver?.unobserve(container.current);\n        }\n\n        container.current = instance;\n        if (container.current) {\n          resizeObserver?.observe(container.current);\n        }\n      }\n    },\n    [resizeObserver],\n  );\n\n  return scrollRef;\n};\n"],"names":["useResizeObserverRef_unstable","resizeCallback","targetDocument","useFluent","container","React","useRef","containerHeightRef","containerWidthRef","handleResize","debounce","entries","observer","containerHeight","current","clientHeight","containerWidth","clientWidth","resizeObserver","setResizeObserver","useState","createResizeObserverFromDocument","useEffect","disconnect","scrollRef","useCallback","instance","unobserve","observe"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BASaA;;;eAAAA;;;;iEATU;qCACyB;0BACvB;kDACwB;AAM1C,MAAMA,gCAAgC,CAACC;IAC5C;IAEA,MAAM,EAAEC,cAAc,EAAE,GAAGC,IAAAA,uCAAAA;IAC3B,MAAMC,YAAYC,OAAMC,MAAM,CAAqB;IACnD,MAAMC,qBAAqBF,OAAMC,MAAM,CAAS;IAChD,MAAME,oBAAoBH,OAAMC,MAAM,CAAS;IAC/C,kCAAkC;IAClC,8FAA8F;IAC9F,iDAAiD;IACjD,MAAMG,eAAeC,IAAAA,kBAAAA,EAAS,CAACC,SAAgCC;YACrCR,oBACDA;QADvB,MAAMS,kBAAAA,AAAkBT,CAAAA,qBAAAA,UAAUU,OAAO,AAAPA,MAAO,QAAjBV,uBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,mBAAmBW,YAAY;QACvD,MAAMC,iBAAAA,AAAiBZ,CAAAA,sBAAAA,UAAUU,OAAO,AAAPA,MAAO,QAAjBV,wBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,oBAAmBa,WAAW;QACrD,wFAAwF;QACxF,IAAIV,mBAAmBO,OAAO,KAAKD,mBAAmBG,mBAAmBR,kBAAkBM,OAAO,EAAE;YAClGN,kBAAkBM,OAAO,GAAGE,mBAAAA,QAAAA,mBAAAA,KAAAA,IAAAA,iBAAkB;YAC9CT,mBAAmBO,OAAO,GAAGD,oBAAAA,QAAAA,oBAAAA,KAAAA,IAAAA,kBAAmB;YAChDZ,eAAeU,SAASC,UAAUR;QACpC;IACF;IAEA,uFAAuF;IACvF,MAAM,CAACc,gBAAgBC,kBAAkB,GAAGd,OAAMe,QAAQ,CAAC,IACzDC,IAAAA,kEAAAA,EAAiCnB,gBAAgBO;IAGnDJ,OAAMiB,SAAS,CAAC;QACd,+CAA+C;QAC/ClB,UAAUU,OAAO,GAAG;QACpBI,mBAAAA,QAAAA,mBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,eAAgBK,UAAU;QAC1BJ,kBAAkB,IAAME,IAAAA,kEAAAA,EAAiCnB,gBAAgBO;IACzE,uDAAuD;IACzD,GAAG;QAACR;QAAgBC;KAAe;IAEnCG,OAAMiB,SAAS,CAAC;QACd,OAAO;YACLlB,UAAUU,OAAO,GAAG;YACpBI,mBAAAA,QAAAA,mBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,eAAgBK,UAAU;QAC5B;IACA,uDAAuD;IACzD,GAAG,EAAE;IAEL,MAAMC,YAAYnB,OAAMoB,WAAW,CACjC,CAACC;QACC,IAAItB,UAAUU,OAAO,KAAKY,UAAU;YAClC,IAAItB,UAAUU,OAAO,EAAE;gBACrBI,mBAAAA,QAAAA,mBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,eAAgBS,SAAS,CAACvB,UAAUU,OAAO;YAC7C;YAEAV,UAAUU,OAAO,GAAGY;YACpB,IAAItB,UAAUU,OAAO,EAAE;gBACrBI,mBAAAA,QAAAA,mBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,eAAgBU,OAAO,CAACxB,UAAUU,OAAO;YAC3C;QACF;IACF,GACA;QAACI;KAAe;IAGlB,OAAOM;AACT"}