@fluentui/react-virtualizer 9.0.0-alpha.17 → 9.0.0-alpha.19

package/CHANGELOG.json

@@ -2,7 +2,75 @@
   "name": "@fluentui/react-virtualizer",
   "entries": [
     {
-      "date": "Mon, 17 Apr 2023 17:50:13 GMT",
+      "date": "Fri, 12 May 2023 20:22:35 GMT",
+      "tag": "@fluentui/react-virtualizer_v9.0.0-alpha.19",
+      "version": "9.0.0-alpha.19",
+      "comments": {
+        "none": [
+          {
+            "author": "martinhochel@microsoft.com",
+            "package": "@fluentui/react-virtualizer",
+            "commit": "dbda7fa69e3000aaf8dd4a061e254ebd35198b8e",
+            "comment": "fix: update npmignore files to fix npm8/node16 regression how npm publish works"
+          }
+        ],
+        "prerelease": [
+          {
+            "author": "olfedias@microsoft.com",
+            "package": "@fluentui/react-virtualizer",
+            "commit": "c28decb23d191a0daaaf6d5d1832429715102129",
+            "comment": "chore: exclude .swcrc from being published"
+          },
+          {
+            "author": "mifraser@microsoft.com",
+            "package": "@fluentui/react-virtualizer",
+            "commit": "0ffdc48b94a76bfd209015b1a9c49eb62aca1ba0",
+            "comment": "feature: Add dynamically sized virtualizer scroll view"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-virtualizer",
+            "comment": "Bump @fluentui/react-jsx-runtime to v9.0.0-alpha.3",
+            "commit": "79c08ce5bbf6387b2b18ba4c3d2d5681e0177d4b"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-virtualizer",
+            "comment": "Bump @fluentui/react-utilities to v9.8.1",
+            "commit": "79c08ce5bbf6387b2b18ba4c3d2d5681e0177d4b"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-virtualizer",
+            "comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.21",
+            "commit": "79c08ce5bbf6387b2b18ba4c3d2d5681e0177d4b"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Mon, 24 Apr 2023 08:12:46 GMT",
+      "tag": "@fluentui/react-virtualizer_v9.0.0-alpha.18",
+      "version": "9.0.0-alpha.18",
+      "comments": {
+        "prerelease": [
+          {
+            "author": "bernardo.sunderhus@gmail.com",
+            "package": "@fluentui/react-virtualizer",
+            "commit": "142c07abdeedea8f6b2e0cc15acf02795ce7f0fc",
+            "comment": "chore: adopt custom JSX pragma"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-virtualizer",
+            "comment": "Bump @fluentui/react-jsx-runtime to v9.0.0-alpha.2",
+            "commit": "505433ac64f144c9cca456097413d6af4582e5ee"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Mon, 17 Apr 2023 17:54:02 GMT",
       "tag": "@fluentui/react-virtualizer_v9.0.0-alpha.17",
       "version": "9.0.0-alpha.17",
       "comments": {

package/CHANGELOG.md

@@ -1,12 +1,35 @@
 # Change Log - @fluentui/react-virtualizer
 
-This log was last generated on Mon, 17 Apr 2023 17:50:13 GMT and should not be manually modified.
+This log was last generated on Fri, 12 May 2023 20:22:35 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.0.0-alpha.19](https://github.com/microsoft/fluentui/tree/@fluentui/react-virtualizer_v9.0.0-alpha.19)
+
+Fri, 12 May 2023 20:22:35 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-virtualizer_v9.0.0-alpha.18..@fluentui/react-virtualizer_v9.0.0-alpha.19)
+
+### Changes
+
+- chore: exclude .swcrc from being published ([PR #27740](https://github.com/microsoft/fluentui/pull/27740) by olfedias@microsoft.com)
+- feature: Add dynamically sized virtualizer scroll view ([PR #27298](https://github.com/microsoft/fluentui/pull/27298) by mifraser@microsoft.com)
+- Bump @fluentui/react-jsx-runtime to v9.0.0-alpha.3 ([PR #27827](https://github.com/microsoft/fluentui/pull/27827) by beachball)
+- Bump @fluentui/react-utilities to v9.8.1 ([PR #27827](https://github.com/microsoft/fluentui/pull/27827) by beachball)
+- Bump @fluentui/react-conformance-griffel to v9.0.0-beta.21 ([PR #27827](https://github.com/microsoft/fluentui/pull/27827) by beachball)
+
+## [9.0.0-alpha.18](https://github.com/microsoft/fluentui/tree/@fluentui/react-virtualizer_v9.0.0-alpha.18)
+
+Mon, 24 Apr 2023 08:12:46 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-virtualizer_v9.0.0-alpha.17..@fluentui/react-virtualizer_v9.0.0-alpha.18)
+
+### Changes
+
+- chore: adopt custom JSX pragma ([PR #27629](https://github.com/microsoft/fluentui/pull/27629) by bernardo.sunderhus@gmail.com)
+- Bump @fluentui/react-jsx-runtime to v9.0.0-alpha.2 ([commit](https://github.com/microsoft/fluentui/commit/505433ac64f144c9cca456097413d6af4582e5ee) by beachball)
+
 ## [9.0.0-alpha.17](https://github.com/microsoft/fluentui/tree/@fluentui/react-virtualizer_v9.0.0-alpha.17)
 
-Mon, 17 Apr 2023 17:50:13 GMT 
+Mon, 17 Apr 2023 17:54:02 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-virtualizer_v9.0.0-alpha.16..@fluentui/react-virtualizer_v9.0.0-alpha.17)
 
 ### Changes

package/dist/index.d.ts

@@ -2,7 +2,7 @@ import { ComponentProps } from '@fluentui/react-utilities';
 import { ComponentState } from '@fluentui/react-utilities';
 import type { Dispatch } from 'react';
 import type { FC } from 'react';
-import type { MutableRefObject } from 'react';
+import { MutableRefObject } from 'react';
 import * as React_2 from 'react';
 import type { SetStateAction } from 'react';
 import { Slot } from '@fluentui/react-utilities';
@@ -12,6 +12,26 @@ export declare const renderVirtualizer_unstable: (state: VirtualizerState) => JS
 
 export declare const renderVirtualizerScrollView_unstable: (state: VirtualizerScrollViewState) => JSX.Element;
 
+export declare const renderVirtualizerScrollViewDynamic_unstable: (state: VirtualizerScrollViewDynamicState) => JSX.Element;
+
+/**
+ * Additional direct Ref prevents reading old resize entry data
+ * Backwards compatible with ResizeObserverCallback if preferred
+ */
+export declare interface ResizeCallbackWithRef {
+    (entries: ResizeObserverEntry[], observer: ResizeObserver, scrollRef?: MutableRefObject<HTMLElement | null>): void;
+}
+
+/**
+ * React hook that measures virtualized space dynamically to ensure optimized virtualization length.
+ */
+export declare const useDynamicVirtualizerMeasure: <TElement extends HTMLElement>(virtualizerProps: VirtualizerMeasureDynamicProps) => {
+    virtualizerLength: number;
+    bufferItems: number;
+    bufferSize: number;
+    scrollRef: (instance: TElement | null) => void;
+};
+
 /**
  * React hook that allows easy usage of the browser API IntersectionObserver within React
  * @param callback - A function called when the percentage of the target element is visible crosses a threshold.
@@ -27,20 +47,34 @@ export declare const useIntersectionObserver: (callback: IntersectionObserverCal
     observer: MutableRefObject<IntersectionObserver | undefined>;
 };
 
+/**
+ * useResizeObserverRef_unstable simplifies resize observer connection and ensures debounce/cleanup
+ */
+export declare const useResizeObserverRef_unstable: (resizeCallback: ResizeCallbackWithRef) => (instance: HTMLElement | HTMLDivElement | null) => void;
+
 /**
  * React hook that measures virtualized space based on a static size to ensure optimized virtualization length.
  */
-export declare const useStaticVirtualizerMeasure: (virtualizerProps: VirtualizerMeasureProps) => {
+export declare const useStaticVirtualizerMeasure: <TElement extends HTMLElement>(virtualizerProps: VirtualizerMeasureProps) => {
     virtualizerLength: number;
     bufferItems: number;
     bufferSize: number;
-    scrollRef: (instance: HTMLElement | HTMLDivElement | null) => void;
+    scrollRef: (instance: TElement | null) => void;
 };
 
 export declare function useVirtualizer_unstable(props: VirtualizerProps): VirtualizerState;
 
+export declare const useVirtualizerContext_unstable: () => VirtualizerContextProps;
+
 export declare function useVirtualizerScrollView_unstable(props: VirtualizerScrollViewProps): VirtualizerScrollViewState;
 
+export declare function useVirtualizerScrollViewDynamic_unstable(props: VirtualizerScrollViewDynamicProps): VirtualizerScrollViewDynamicState;
+
+/**
+ * Apply styling to the Virtualizer states
+ */
+export declare const useVirtualizerScrollViewDynamicStyles_unstable: (state: VirtualizerScrollViewDynamicState) => VirtualizerScrollViewDynamicState;
+
 /**
  * Apply styling to the Virtualizer states
  */
@@ -124,13 +158,9 @@ declare type VirtualizerConfigProps = {
      */
     getItemSize?: (index: number) => number;
     /**
-     * Notify users of index changes
-     */
-    onUpdateIndex?: (index: number, prevIndex: number) => void;
-    /**
-     * Allow users to intervene in index calculation changes
+     * Virtualizer context can be passed as a prop for extended class use
      */
-    onCalculateIndex?: (newIndex: number) => number;
+    virtualizerContext?: VirtualizerContextProps;
 };
 
 declare type VirtualizerConfigState = {
@@ -170,7 +200,25 @@ declare type VirtualizerConfigState = {
     bufferSize: number;
 };
 
-declare type VirtualizerMeasureProps = {
+/**
+ * {@docCategory Virtualizer}
+ */
+export declare type VirtualizerContextProps = {
+    contextIndex: number;
+    setContextIndex: (index: number) => void;
+};
+
+export declare const VirtualizerContextProvider: React_2.Provider<VirtualizerContextProps>;
+
+export declare type VirtualizerMeasureDynamicProps = {
+    defaultItemSize: number;
+    currentIndex: number;
+    numItems: number;
+    getItemSize: (index: number) => number;
+    direction?: 'vertical' | 'horizontal';
+};
+
+export declare type VirtualizerMeasureProps = {
     defaultItemSize: number;
     direction?: 'vertical' | 'horizontal';
 };
@@ -184,6 +232,41 @@ export declare const VirtualizerScrollView: React_2.FC<VirtualizerScrollViewProp
 
 export declare const virtualizerScrollViewClassNames: SlotClassNames<VirtualizerScrollViewSlots>;
 
+/**
+ * Virtualizer ScrollView
+ */
+export declare const VirtualizerScrollViewDynamic: React_2.FC<VirtualizerScrollViewDynamicProps>;
+
+export declare const virtualizerScrollViewDynamicClassNames: SlotClassNames<VirtualizerScrollViewDynamicSlots>;
+
+export declare type VirtualizerScrollViewDynamicProps = ComponentProps<Partial<VirtualizerScrollViewDynamicSlots>> & Partial<Omit<VirtualizerConfigProps, 'itemSize' | 'numItems' | 'getItemSize' | 'children'>> & {
+    /**
+     * Set as the minimum item size.
+     * Axis: 'vertical' = Height
+     * Axis: 'horizontal' = Width
+     */
+    itemSize: number;
+    /**
+     * Callback for acquiring size of individual items
+     * @param index - the index of the requested size's child
+     */
+    getItemSize: (index: number) => number;
+    /**
+     * The total number of items to be virtualized.
+     */
+    numItems: number;
+    /**
+     * Child render function.
+     * Iteratively called to return current virtualizer DOM children.
+     * Will act as a row or column indexer depending on Virtualizer settings.
+     */
+    children: VirtualizerChildRenderFunction;
+};
+
+export declare type VirtualizerScrollViewDynamicSlots = VirtualizerScrollViewSlots;
+
+export declare type VirtualizerScrollViewDynamicState = ComponentState<VirtualizerScrollViewDynamicSlots> & VirtualizerConfigState;
+
 export declare type VirtualizerScrollViewProps = ComponentProps<Partial<VirtualizerScrollViewSlots>> & Partial<Omit<VirtualizerConfigProps, 'itemSize' | 'numItems' | 'getItemSize' | 'children'>> & {
     /**
      * Virtualizer item size in pixels - static.

package/lib/Utilities.js

@@ -0,0 +1,2 @@
+export * from './utilities/index';
+//# sourceMappingURL=Utilities.js.map

package/lib/Utilities.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["../src/Utilities.ts"],"sourcesContent":["export * from './utilities/index';\n"],"mappings":"AAAA,cAAc"}

package/lib/VirtualizerScrollViewDynamic.js

@@ -0,0 +1,2 @@
+export * from './components/VirtualizerScrollViewDynamic/index';
+//# sourceMappingURL=VirtualizerScrollViewDynamic.js.map

package/lib/VirtualizerScrollViewDynamic.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["../src/VirtualizerScrollViewDynamic.ts"],"sourcesContent":["export * from './components/VirtualizerScrollViewDynamic/index';\n"],"mappings":"AAAA,cAAc"}

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

@@ -1 +1 @@
-{"version":3,"names":["React"],"sources":["../../../src/components/Virtualizer/Virtualizer.types.ts"],"sourcesContent":["import * as React from 'react';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type VirtualizerSlots = {\n  /**\n   * The intersection observed 'before' element will detect when scrolling towards the beginning.\n   */\n  before: NonNullable<Slot<'div', 'td'>>;\n  /**\n   * A block place holding whitespace at the beginning of current DOM children.\n   */\n  beforeContainer: NonNullable<Slot<'div', 'tr'>>;\n  /**\n   * The intersection observed 'after' element will detect when scrolling towards the end.\n   */\n  after: NonNullable<Slot<'div', 'td'>>;\n  /**\n   * A block place holding whitespace after the end of current DOM children.\n   */\n  afterContainer: NonNullable<Slot<'div', 'tr'>>;\n};\n\nexport type VirtualizerConfigState = {\n  /**\n   * The current virtualized array of children to show in the DOM.\n   */\n  virtualizedChildren: React.ReactNode[];\n  /**\n   * The current start index for the virtualizer, all previous index's will be removed from DOM.\n   */\n  virtualizerStartIndex: number;\n  /**\n   * Current buffer height required at beginning of array.\n   */\n  afterBufferHeight: number;\n  /**\n   * Current buffer height required at end of array.\n   */\n  beforeBufferHeight: number;\n  /**\n   * The total current height of the scrollView/child content.\n   */\n  totalVirtualizerHeight: number;\n  /**\n   * The scroll direction\n   * @default vertical\n   */\n  axis?: 'vertical' | 'horizontal';\n  /**\n   * Tells the virtualizer to measure in the reverse direction (for column-reverse order etc.)\n   */\n  reversed?: boolean;\n  /**\n   * Pixel size of intersection observers and how much they 'cross over' into the bufferItems index.\n   * Minimum 1px.\n   */\n  bufferSize: number;\n};\n\nexport type VirtualizerState = ComponentState<VirtualizerSlots> & VirtualizerConfigState;\n\n// Virtualizer render function to procedurally generate children elements as rows or columns via index.\n// Q: Use generic typing and passing through object data or a simple index system?\nexport type VirtualizerChildRenderFunction = (index: number) => React.ReactNode;\n\nexport type VirtualizerConfigProps = {\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   * Can be used dynamically.\n   */\n  children: VirtualizerChildRenderFunction;\n\n  /**\n   * Default cell size to use if no custom callback provided.\n   * If implementing `getItemSize` this should be the initial and ideally minimum cell size.\n   */\n  itemSize: number;\n\n  /**\n   * The total number of items to be virtualized.\n   */\n  numItems: number;\n\n  /**\n   * Number of children to render in the DOM during virtualization.\n   * Constraints:\n   * - Large enough that the items rendered in DOM cover the viewport\n   *   and intersection observer buffers (buffersize) at both ends.\n   */\n  virtualizerLength: number;\n\n  /**\n   * Defaults to 1/4th of virtualizerLength.\n   * Controls the number of elements rendered before the current index entering the virtualized viewport.\n   * Constraints:\n   * - Large enough to cover bufferSize (prevents buffers intersecting into the viewport during rest state).\n   * - Small enough that the end buffer and end index (start index + virtualizerLength) is not within viewport at rest.\n   */\n  bufferItems?: number;\n\n  /**\n   * Defaults to half of bufferItems size (in pixels).\n   * The length (in pixels) before the end/start DOM index where the virtualizer recalculation will be triggered.\n   * Increasing this reduces whitespace on ultra-fast scroll, as additional elements\n   * are buffered to appear while virtualization recalculates.\n   * Constraints:\n   * - At least 1px - although this will only trigger the recalculation after bookends (whitespace) enter viewport.\n   * - BufferSize must be smaller than bufferItems pixel size, as it prevents bookends entering viewport at rest.\n   */\n  bufferSize?: number;\n\n  /**\n   * Enables users to override the intersectionObserverRoot.\n   */\n  scrollViewRef?: React.MutableRefObject<HTMLElement | null>;\n\n  /**\n   * The scroll direction\n   * @default vertical\n   */\n  axis?: 'vertical' | 'horizontal';\n\n  /**\n   * Tells the virtualizer to measure in the reverse direction (for column-reverse order etc.)\n   * This value should be flipped in RTL implementation (TBD whether automate RTL).\n   */\n  reversed?: boolean;\n\n  /**\n   * Callback for acquiring size of individual items\n   * @param index - the index of the requested size's child\n   */\n  getItemSize?: (index: number) => number;\n\n  /**\n   * Notify users of index changes\n   */\n  onUpdateIndex?: (index: number, prevIndex: number) => void;\n\n  /**\n   * Allow users to intervene in index calculation changes\n   */\n  onCalculateIndex?: (newIndex: number) => number;\n};\n\nexport type VirtualizerProps = ComponentProps<Partial<VirtualizerSlots>> & VirtualizerConfigProps;\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW"}
+{"version":3,"names":["React"],"sources":["../../../src/components/Virtualizer/Virtualizer.types.ts"],"sourcesContent":["import * as React from 'react';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { VirtualizerContextProps } from '../../Utilities';\n\nexport type VirtualizerSlots = {\n  /**\n   * The intersection observed 'before' element will detect when scrolling towards the beginning.\n   */\n  before: NonNullable<Slot<'div', 'td'>>;\n  /**\n   * A block place holding whitespace at the beginning of current DOM children.\n   */\n  beforeContainer: NonNullable<Slot<'div', 'tr'>>;\n  /**\n   * The intersection observed 'after' element will detect when scrolling towards the end.\n   */\n  after: NonNullable<Slot<'div', 'td'>>;\n  /**\n   * A block place holding whitespace after the end of current DOM children.\n   */\n  afterContainer: NonNullable<Slot<'div', 'tr'>>;\n};\n\nexport type VirtualizerConfigState = {\n  /**\n   * The current virtualized array of children to show in the DOM.\n   */\n  virtualizedChildren: React.ReactNode[];\n  /**\n   * The current start index for the virtualizer, all previous index's will be removed from DOM.\n   */\n  virtualizerStartIndex: number;\n  /**\n   * Current buffer height required at beginning of array.\n   */\n  afterBufferHeight: number;\n  /**\n   * Current buffer height required at end of array.\n   */\n  beforeBufferHeight: number;\n  /**\n   * The total current height of the scrollView/child content.\n   */\n  totalVirtualizerHeight: number;\n  /**\n   * The scroll direction\n   * @default vertical\n   */\n  axis?: 'vertical' | 'horizontal';\n  /**\n   * Tells the virtualizer to measure in the reverse direction (for column-reverse order etc.)\n   */\n  reversed?: boolean;\n  /**\n   * Pixel size of intersection observers and how much they 'cross over' into the bufferItems index.\n   * Minimum 1px.\n   */\n  bufferSize: number;\n};\n\nexport type VirtualizerState = ComponentState<VirtualizerSlots> & VirtualizerConfigState;\n\n// Virtualizer render function to procedurally generate children elements as rows or columns via index.\n// Q: Use generic typing and passing through object data or a simple index system?\nexport type VirtualizerChildRenderFunction = (index: number) => React.ReactNode;\n\nexport type VirtualizerConfigProps = {\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   * Can be used dynamically.\n   */\n  children: VirtualizerChildRenderFunction;\n\n  /**\n   * Default cell size to use if no custom callback provided.\n   * If implementing `getItemSize` this should be the initial and ideally minimum cell size.\n   */\n  itemSize: number;\n\n  /**\n   * The total number of items to be virtualized.\n   */\n  numItems: number;\n\n  /**\n   * Number of children to render in the DOM during virtualization.\n   * Constraints:\n   * - Large enough that the items rendered in DOM cover the viewport\n   *   and intersection observer buffers (buffersize) at both ends.\n   */\n  virtualizerLength: number;\n\n  /**\n   * Defaults to 1/4th of virtualizerLength.\n   * Controls the number of elements rendered before the current index entering the virtualized viewport.\n   * Constraints:\n   * - Large enough to cover bufferSize (prevents buffers intersecting into the viewport during rest state).\n   * - Small enough that the end buffer and end index (start index + virtualizerLength) is not within viewport at rest.\n   */\n  bufferItems?: number;\n\n  /**\n   * Defaults to half of bufferItems size (in pixels).\n   * The length (in pixels) before the end/start DOM index where the virtualizer recalculation will be triggered.\n   * Increasing this reduces whitespace on ultra-fast scroll, as additional elements\n   * are buffered to appear while virtualization recalculates.\n   * Constraints:\n   * - At least 1px - although this will only trigger the recalculation after bookends (whitespace) enter viewport.\n   * - BufferSize must be smaller than bufferItems pixel size, as it prevents bookends entering viewport at rest.\n   */\n  bufferSize?: number;\n\n  /**\n   * Enables users to override the intersectionObserverRoot.\n   */\n  scrollViewRef?: React.MutableRefObject<HTMLElement | null>;\n\n  /**\n   * The scroll direction\n   * @default vertical\n   */\n  axis?: 'vertical' | 'horizontal';\n\n  /**\n   * Tells the virtualizer to measure in the reverse direction (for column-reverse order etc.)\n   * This value should be flipped in RTL implementation (TBD whether automate RTL).\n   */\n  reversed?: boolean;\n\n  /**\n   * Callback for acquiring size of individual items\n   * @param index - the index of the requested size's child\n   */\n  getItemSize?: (index: number) => number;\n\n  /**\n   * Virtualizer context can be passed as a prop for extended class use\n   */\n  virtualizerContext?: VirtualizerContextProps;\n};\n\nexport type VirtualizerProps = ComponentProps<Partial<VirtualizerSlots>> & VirtualizerConfigProps;\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW"}

package/lib/components/Virtualizer/renderVirtualizer.js

@@ -1,10 +1,17 @@
-import * as React from 'react';
-import { getSlots } from '@fluentui/react-utilities';
+/** @jsxRuntime classic */ /** @jsx createElement */import * as React from 'react';
+import { createElement } from '@fluentui/react-jsx-runtime';
+import { getSlotsNext } from '@fluentui/react-utilities';
 export const renderVirtualizer_unstable = state => {
   const {
     slots,
     slotProps
-  } = getSlots(state);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(slots.beforeContainer, slotProps.beforeContainer, /*#__PURE__*/React.createElement(slots.before, slotProps.before)), state.virtualizedChildren, /*#__PURE__*/React.createElement(slots.afterContainer, slotProps.afterContainer, /*#__PURE__*/React.createElement(slots.after, slotProps.after)));
+  } = getSlotsNext(state);
+  return /*#__PURE__*/createElement(React.Fragment, null, /*#__PURE__*/createElement(slots.beforeContainer, slotProps.beforeContainer, /*#__PURE__*/createElement(slots.before, slotProps.before)), state.virtualizedChildren, /*#__PURE__*/createElement(slots.afterContainer, slotProps.afterContainer, /*#__PURE__*/createElement(slots.after, slotProps.after)));
+};
+export const renderVirtualizerChildPlaceholder = (child, index) => {
+  return /*#__PURE__*/createElement(React.Suspense, {
+    key: `fui-virtualizer-placeholder-${index}`,
+    fallback: null
+  }, child);
 };
 //# sourceMappingURL=renderVirtualizer.js.map

package/lib/components/Virtualizer/renderVirtualizer.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","getSlots","renderVirtualizer_unstable","state","slots","slotProps","createElement","Fragment","beforeContainer","before","virtualizedChildren","afterContainer","after"],"sources":["../../../src/components/Virtualizer/renderVirtualizer.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport { VirtualizerSlots, VirtualizerState } from './Virtualizer.types';\n\nexport const renderVirtualizer_unstable = (state: VirtualizerState) => {\n  const { slots, slotProps } = getSlots<VirtualizerSlots>(state);\n\n  return (\n    <React.Fragment>\n      {/* The 'before' bookend to hold items in place and detect scroll previous */}\n      <slots.beforeContainer {...slotProps.beforeContainer}>\n        <slots.before {...slotProps.before} />\n      </slots.beforeContainer>\n      {/* The reduced list of non-virtualized children to be rendered */}\n      {state.virtualizedChildren}\n      {/* The 'after' bookend to hold items in place and detect scroll next */}\n      <slots.afterContainer {...slotProps.afterContainer}>\n        <slots.after {...slotProps.after} />\n      </slots.afterContainer>\n    </React.Fragment>\n  );\n};\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,QAAQ,QAAQ;AAGzB,OAAO,MAAMC,0BAAA,GAA8BC,KAAA,IAA4B;EACrE,MAAM;IAAEC,KAAA;IAAOC;EAAS,CAAE,GAAGJ,QAAA,CAA2BE,KAAA;EAExD,oBACEH,KAAA,CAAAM,aAAA,CAACN,KAAA,CAAMO,QAAQ,qBAEbP,KAAA,CAAAM,aAAA,CAACF,KAAA,CAAMI,eAAe,EAAKH,SAAA,CAAUG,eAAe,eAClDR,KAAA,CAAAM,aAAA,CAACF,KAAA,CAAMK,MAAM,EAAKJ,SAAA,CAAUI,MAAM,IAGnCN,KAAA,CAAMO,mBAAmB,eAE1BV,KAAA,CAAAM,aAAA,CAACF,KAAA,CAAMO,cAAc,EAAKN,SAAA,CAAUM,cAAc,eAChDX,KAAA,CAAAM,aAAA,CAACF,KAAA,CAAMQ,KAAK,EAAKP,SAAA,CAAUO,KAAK;AAIxC"}
+{"version":3,"names":["React","createElement","getSlotsNext","renderVirtualizer_unstable","state","slots","slotProps","Fragment","beforeContainer","before","virtualizedChildren","afterContainer","after","renderVirtualizerChildPlaceholder","child","index","Suspense","key","fallback"],"sources":["../../../src/components/Virtualizer/renderVirtualizer.tsx"],"sourcesContent":["/** @jsxRuntime classic */\n/** @jsx createElement */\n\nimport * as React from 'react';\nimport { createElement } from '@fluentui/react-jsx-runtime';\nimport { getSlotsNext } from '@fluentui/react-utilities';\nimport { VirtualizerSlots, VirtualizerState } from './Virtualizer.types';\nimport { ReactNode } from 'react';\n\nexport const renderVirtualizer_unstable = (state: VirtualizerState) => {\n  const { slots, slotProps } = getSlotsNext<VirtualizerSlots>(state);\n\n  return (\n    <React.Fragment>\n      {/* The 'before' bookend to hold items in place and detect scroll previous */}\n      <slots.beforeContainer {...slotProps.beforeContainer}>\n        <slots.before {...slotProps.before} />\n      </slots.beforeContainer>\n      {/* The reduced list of non-virtualized children to be rendered */}\n      {state.virtualizedChildren}\n      {/* The 'after' bookend to hold items in place and detect scroll next */}\n      <slots.afterContainer {...slotProps.afterContainer}>\n        <slots.after {...slotProps.after} />\n      </slots.afterContainer>\n    </React.Fragment>\n  );\n};\n\nexport const renderVirtualizerChildPlaceholder = (child: ReactNode, index: number) => {\n  return (\n    <React.Suspense key={`fui-virtualizer-placeholder-${index}`} fallback={null}>\n      {child}\n    </React.Suspense>\n  );\n};\n"],"mappings":"AAAA,2BACA,yBAEA,YAAYA,KAAA,MAAW;AACvB,SAASC,aAAa,QAAQ;AAC9B,SAASC,YAAY,QAAQ;AAI7B,OAAO,MAAMC,0BAAA,GAA8BC,KAAA,IAA4B;EACrE,MAAM;IAAEC,KAAA;IAAOC;EAAS,CAAE,GAAGJ,YAAA,CAA+BE,KAAA;EAE5D,oBACEH,aAZJ,CAYKD,KAAA,CAAMO,QAAQ,qBAEbN,aAdN,CAcOI,KAAA,CAAMG,eAAe,EAAKF,SAAA,CAAUE,eAAe,eAClDP,aAfR,CAeSI,KAAA,CAAMI,MAAM,EAAKH,SAAA,CAAUG,MAAM,IAGnCL,KAAA,CAAMM,mBAAmB,eAE1BT,aApBN,CAoBOI,KAAA,CAAMM,cAAc,EAAKL,SAAA,CAAUK,cAAc,eAChDV,aArBR,CAqBSI,KAAA,CAAMO,KAAK,EAAKN,SAAA,CAAUM,KAAK;AAIxC;AAEA,OAAO,MAAMC,iCAAA,GAAoCA,CAACC,KAAA,EAAkBC,KAAA,KAAkB;EACpF,oBACEd,aA7BJ,CA6BKD,KAAA,CAAMgB,QAAQ;IAACC,GAAA,EAAM,+BAA8BF,KAAM,EAAC;IAAEG,QAAA,EAAU;KACpEJ,KAAA;AAGP"}

package/lib/components/Virtualizer/useVirtualizer.js

@@ -1,7 +1,9 @@
 import { useIntersectionObserver } from '../../hooks/useIntersectionObserver';
-import { useEffect, useRef, useState, useCallback, useReducer } from 'react';
+import { useEffect, useRef, useCallback, useReducer } from 'react';
 import { resolveShorthand } from '@fluentui/react-utilities';
 import { flushSync } from 'react-dom';
+import { useVirtualizerContextState_unstable } from '../../Utilities';
+import { renderVirtualizerChildPlaceholder } from './renderVirtualizer';
 export function useVirtualizer_unstable(props) {
   const {
     itemSize,
@@ -14,11 +16,12 @@ export function useVirtualizer_unstable(props) {
     scrollViewRef,
     axis = 'vertical',
     reversed = false,
-    onUpdateIndex,
-    onCalculateIndex
+    virtualizerContext
   } = props;
-  // Tracks the initial item to start virtualizer at, -1 implies first render cycle
-  const [virtualizerStartIndex, setVirtualizerStartIndex] = useState(-1);
+  /* The context is optional, it's useful for injecting additional index logic, or performing uniform state updates*/
+  const _virtualizerContext = useVirtualizerContextState_unstable(virtualizerContext);
+  const actualIndex = _virtualizerContext.contextIndex;
+  const setActualIndex = _virtualizerContext.setContextIndex;
   // Store ref to before padding element
   const beforeElementRef = useRef(null);
   // Store ref to before padding element
@@ -55,18 +58,17 @@ export function useVirtualizer_unstable(props) {
   };
   const batchUpdateNewIndex = index => {
     // Local updates
-    onUpdateIndex === null || onUpdateIndex === void 0 ? void 0 : onUpdateIndex(index, virtualizerStartIndex);
     updateChildRows(index);
     updateCurrentItemSizes(index);
     // State setters
-    setVirtualizerStartIndex(index);
+    setActualIndex(index);
   };
   // Observe intersections of virtualized components
   const {
     setObserverList
   } = useIntersectionObserver((entries, observer) => {
     /* Sanity check - do we even need virtualization? */if (virtualizerLength > numItems) {
-      if (virtualizerStartIndex !== 0) {
+      if (actualIndex !== 0) {
         batchUpdateNewIndex(0);
       }
       // No-op
@@ -128,18 +130,12 @@ export function useVirtualizer_unstable(props) {
     }
     // For now lets use hardcoded size to assess current element to paginate on
     const startIndex = getIndexFromScrollPosition(measurementPos);
-    let bufferedIndex = Math.max(startIndex - bufferCount, 0);
-    if (onCalculateIndex) {
-      // User has chance to intervene/customize prior to render
-      // They may want to normalize this value.
-      bufferedIndex = onCalculateIndex(bufferedIndex);
-    }
+    const bufferedIndex = Math.max(startIndex - bufferCount, 0);
     // Safety limits
     const maxIndex = Math.max(numItems - virtualizerLength, 0);
     const newStartIndex = Math.min(Math.max(bufferedIndex, 0), maxIndex);
-    if (virtualizerStartIndex !== newStartIndex) {
+    if (actualIndex !== newStartIndex) {
       // We flush sync this and perform an immediate state update
-      // due to virtualizerStartIndex invalidation.
       flushSync(() => {
         batchUpdateNewIndex(newStartIndex);
       });
@@ -152,7 +148,7 @@ export function useVirtualizer_unstable(props) {
   const findIndexRecursive = (scrollPos, lowIndex, highIndex) => {
     if (lowIndex > highIndex) {
       // We shouldn't get here - but no-op the index if we do.
-      return virtualizerStartIndex;
+      return actualIndex;
     }
     const midpoint = Math.floor((lowIndex + highIndex) / 2);
     const iBefore = Math.max(midpoint - 1, 0);
@@ -196,21 +192,22 @@ export function useVirtualizer_unstable(props) {
     return childProgressiveSizes.current[numItems - 1];
   };
   const calculateBefore = () => {
+    const currentIndex = Math.min(actualIndex, numItems);
     if (!getItemSize) {
       // The missing items from before virtualization starts height
-      return virtualizerStartIndex * itemSize;
+      return currentIndex * itemSize;
     }
-    if (virtualizerStartIndex <= 0) {
+    if (currentIndex <= 0) {
       return 0;
     }
     // Time for custom size calcs
-    return childProgressiveSizes.current[virtualizerStartIndex - 1];
+    return childProgressiveSizes.current[currentIndex - 1];
   };
   const calculateAfter = () => {
     if (numItems === 0) {
       return 0;
     }
-    const lastItemIndex = Math.min(virtualizerStartIndex + virtualizerLength, numItems - 1);
+    const lastItemIndex = Math.min(actualIndex + virtualizerLength, numItems - 1);
     if (!getItemSize) {
       // The missing items from after virtualization ends height
       const remainingItems = numItems - lastItemIndex - 1;
@@ -226,10 +223,10 @@ export function useVirtualizer_unstable(props) {
     if (childArray.current.length !== numItems) {
       childArray.current = new Array(virtualizerLength);
     }
-    const actualIndex = Math.max(newIndex, 0);
-    const end = Math.min(actualIndex + virtualizerLength, numItems);
-    for (let i = actualIndex; i < end; i++) {
-      childArray.current[i - actualIndex] = renderChild(i);
+    const _actualIndex = Math.max(newIndex, 0);
+    const end = Math.min(_actualIndex + virtualizerLength, numItems);
+    for (let i = _actualIndex; i < end; i++) {
+      childArray.current[i - _actualIndex] = renderVirtualizerChildPlaceholder(renderChild(i), i);
     }
   }, [numItems, renderChild, virtualizerLength]);
   const setBeforeRef = useCallback(element => {
@@ -294,19 +291,25 @@ export function useVirtualizer_unstable(props) {
   // Initialization on mount - update array index to 0 (ready state).
   // Only fire on mount (no deps).
   useEffect(() => {
-    if (virtualizerStartIndex < 0) {
+    if (actualIndex < 0) {
       batchUpdateNewIndex(0);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
   // If the user passes in an updated renderChild function - update current children
   useEffect(() => {
-    if (virtualizerStartIndex >= 0) {
-      updateChildRows(virtualizerStartIndex);
+    if (actualIndex >= 0) {
+      updateChildRows(actualIndex);
       forceUpdate();
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [renderChild, updateChildRows]);
+  useEffect(() => {
+    // Ensure we repopulate if getItemSize callback changes
+    populateSizeArrays();
+    // We only run this effect on getItemSize change (recalc dynamic sizes)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [getItemSize]);
   // Ensure we have run through and updated the whole size list array at least once.
   initializeSizeArray();
   if (getItemSize && (numItems !== childSizes.current.length || numItems !== childProgressiveSizes.current.length)) {
@@ -315,10 +318,10 @@ export function useVirtualizer_unstable(props) {
   }
   // Ensure we recalc if virtualizer length changes
   const maxCompare = Math.min(virtualizerLength, numItems);
-  if (childArray.current.length !== maxCompare && virtualizerStartIndex + childArray.current.length < numItems) {
-    updateChildRows(virtualizerStartIndex);
+  if (childArray.current.length !== maxCompare && actualIndex + childArray.current.length < numItems) {
+    updateChildRows(actualIndex);
   }
-  const isFullyInitialized = hasInitialized.current && virtualizerStartIndex >= 0;
+  const isFullyInitialized = hasInitialized.current && actualIndex >= 0;
   return {
     components: {
       before: 'div',
@@ -356,7 +359,7 @@ export function useVirtualizer_unstable(props) {
     beforeBufferHeight: isFullyInitialized ? calculateBefore() : 0,
     afterBufferHeight: isFullyInitialized ? calculateAfter() : 0,
     totalVirtualizerHeight: isFullyInitialized ? calculateTotalSize() : virtualizerLength * itemSize,
-    virtualizerStartIndex,
+    virtualizerStartIndex: actualIndex,
     axis,
     bufferSize,
     reversed