@fluentui/react-virtualizer 9.0.0-alpha.87 → 9.0.0-alpha.88

package/CHANGELOG.md

@@ -1,21 +1,33 @@
 # Change Log - @fluentui/react-virtualizer
 
-This log was last generated on Mon, 11 Nov 2024 09:55:03 GMT and should not be manually modified.
+This log was last generated on Fri, 06 Dec 2024 12:49:19 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.0.0-alpha.88](https://github.com/microsoft/fluentui/tree/@fluentui/react-virtualizer_v9.0.0-alpha.88)
+
+Fri, 06 Dec 2024 12:49:19 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-virtualizer_v9.0.0-alpha.87..@fluentui/react-virtualizer_v9.0.0-alpha.88)
+
+### Changes
+
+- feat: Add gap property to simplify gap css virtualization ([PR #33275](https://github.com/microsoft/fluentui/pull/33275) by mifraser@microsoft.com)
+- Bump @fluentui/react-jsx-runtime to v9.0.47 ([PR #33414](https://github.com/microsoft/fluentui/pull/33414) by beachball)
+- Bump @fluentui/react-utilities to v9.18.18 ([PR #33414](https://github.com/microsoft/fluentui/pull/33414) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.21.1 ([PR #33414](https://github.com/microsoft/fluentui/pull/33414) by beachball)
+
 ## [9.0.0-alpha.87](https://github.com/microsoft/fluentui/tree/@fluentui/react-virtualizer_v9.0.0-alpha.87)
 
-Mon, 11 Nov 2024 09:55:03 GMT 
+Mon, 11 Nov 2024 10:00:38 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-virtualizer_v9.0.0-alpha.86..@fluentui/react-virtualizer_v9.0.0-alpha.87)
 
 ### Changes
 
 - fix: Enable virtualizer to fall back to most recent IO event if none intersecting ([PR #33125](https://github.com/microsoft/fluentui/pull/33125) by mifraser@microsoft.com)
 - chore: replace npm-scripts and just-scrtips with nx inferred tasks ([PR #33074](https://github.com/microsoft/fluentui/pull/33074) by martinhochel@microsoft.com)
-- Bump @fluentui/react-jsx-runtime to v9.0.46 ([PR #31887](https://github.com/microsoft/fluentui/pull/31887) by beachball)
-- Bump @fluentui/react-utilities to v9.18.17 ([PR #31887](https://github.com/microsoft/fluentui/pull/31887) by beachball)
-- Bump @fluentui/react-shared-contexts to v9.21.0 ([PR #31887](https://github.com/microsoft/fluentui/pull/31887) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.0.46 ([PR #33238](https://github.com/microsoft/fluentui/pull/33238) by beachball)
+- Bump @fluentui/react-utilities to v9.18.17 ([PR #33238](https://github.com/microsoft/fluentui/pull/33238) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.21.0 ([PR #33238](https://github.com/microsoft/fluentui/pull/33238) by beachball)
 
 ## [9.0.0-alpha.86](https://github.com/microsoft/fluentui/tree/@fluentui/react-virtualizer_v9.0.0-alpha.86)
 

package/dist/index.d.ts

@@ -1,11 +1,6 @@
 import type { ComponentProps } from '@fluentui/react-utilities';
 import type { ComponentState } from '@fluentui/react-utilities';
-import type { Dispatch } from 'react';
-import type { FC } from 'react';
-import { MutableRefObject } from 'react';
 import * as React_2 from 'react';
-import type { RefObject } from 'react';
-import type { SetStateAction } from 'react';
 import type { Slot } from '@fluentui/react-utilities';
 import type { SlotClassNames } from '@fluentui/react-utilities';
 
@@ -29,22 +24,22 @@ export declare const renderVirtualizerScrollViewDynamic_unstable: (state: Virtua
  * Backwards compatible with ResizeObserverCallback if preferred
  */
 export declare interface ResizeCallbackWithRef {
-    (entries: ResizeObserverEntry[], observer: ResizeObserver, scrollRef?: MutableRefObject<HTMLElement | null>): void;
+    (entries: ResizeObserverEntry[], observer: ResizeObserver, scrollRef?: React_2.MutableRefObject<HTMLElement | null>): void;
 }
 
 export declare type ScrollToInterface = {
     scrollTo: (index: number, behavior?: ScrollBehavior, callback?: (index: number) => void) => void;
-    virtualizerLength: RefObject<number>;
-    currentIndex: RefObject<number> | undefined;
+    virtualizerLength: React_2.RefObject<number>;
+    currentIndex: React_2.RefObject<number> | undefined;
 };
 
 export declare const scrollToItemDynamic: (params: ScrollToItemDynamicParams) => void;
 
 export declare type ScrollToItemDynamicParams = {
     index: number;
-    itemSizes: RefObject<number[]>;
+    itemSizes: React_2.RefObject<number[]>;
     totalSize: number;
-    scrollViewRef: RefObject<HTMLDivElement>;
+    scrollViewRef: React_2.RefObject<HTMLDivElement>;
     axis?: 'horizontal' | 'vertical';
     reversed?: boolean;
     behavior?: ScrollBehavior;
@@ -56,7 +51,7 @@ export declare type ScrollToItemStaticParams = {
     index: number;
     itemSize: number;
     totalItems: number;
-    scrollViewRef: RefObject<HTMLDivElement>;
+    scrollViewRef: React_2.RefObject<HTMLDivElement>;
     axis?: 'horizontal' | 'vertical';
     reversed?: boolean;
     behavior?: ScrollBehavior;
@@ -84,9 +79,9 @@ export declare const useDynamicVirtualizerMeasure: <TElement extends HTMLElement
  * update the init options of the IntersectionObserver and a ref to the IntersectionObserver instance itself.
  */
 export declare const useIntersectionObserver: (callback: IntersectionObserverCallback, options?: IntersectionObserverInit) => {
-    setObserverList: Dispatch<SetStateAction<Element[] | undefined>>;
+    setObserverList: React_2.Dispatch<React_2.SetStateAction<Element[] | undefined>>;
     setObserverInit: (newInit: IntersectionObserverInit | undefined) => void;
-    observer: MutableRefObject<IntersectionObserver | undefined>;
+    observer: React_2.MutableRefObject<IntersectionObserver | undefined>;
 };
 
 /**
@@ -148,7 +143,7 @@ export declare const useVirtualizerStyles_unstable: (state: VirtualizerState) =>
  * provides a simple interface for reducing the total number
  * of elements rendered at one time in large lists.
  */
-export declare const Virtualizer: FC<VirtualizerProps>;
+export declare const Virtualizer: React_2.FC<VirtualizerProps>;
 
 /**
  * The main child render method of Virtualization
@@ -236,21 +231,25 @@ declare type VirtualizerConfigProps = {
      * Callback for notifying when a flagged index has been rendered
      */
     onRenderedFlaggedIndex?: (index: number) => void;
-    flaggedIndex?: MutableRefObject<number | null>;
+    flaggedIndex?: React_2.MutableRefObject<number | null>;
     /**
      * Imperative ref contains our scrollTo index functionality for user control.
      */
-    imperativeVirtualizerRef?: RefObject<VirtualizerDataRef>;
+    imperativeVirtualizerRef?: React_2.RefObject<VirtualizerDataRef>;
     /**
      * A ref that provides the size of container (vertical - height, horizontal - width), set by a resize observer.
      * Virtualizer Measure hooks provide a suitable reference.
      */
-    containerSizeRef: RefObject<number>;
+    containerSizeRef: React_2.RefObject<number>;
     /**
      * A callback that enables updating scroll position for calculating required dynamic lengths,
      * this should be passed in from useDynamicVirtualizerMeasure
      */
     updateScrollPosition?: (position: number) => void;
+    /**
+     * Spacing between rendered children for calculation, should match the container's gap CSS value.
+     */
+    gap?: number;
 };
 
 declare type VirtualizerConfigState = {
@@ -315,10 +314,10 @@ export declare type VirtualizerContextProps = {
 export declare const VirtualizerContextProvider: React_2.Provider<VirtualizerContextProps>;
 
 export declare type VirtualizerDataRef = {
-    progressiveSizes: RefObject<number[]>;
-    nodeSizes: RefObject<number[]>;
+    progressiveSizes: React_2.RefObject<number[]>;
+    nodeSizes: React_2.RefObject<number[]>;
     setFlaggedIndex: (index: number | null) => void;
-    currentIndex: RefObject<number>;
+    currentIndex: React_2.RefObject<number>;
 };
 
 export declare type VirtualizerMeasureDynamicProps = {
@@ -392,7 +391,7 @@ export declare type VirtualizerScrollViewDynamicProps = ComponentProps<Partial<V
     /**
      * Imperative ref contains our scrollTo index functionality for user control.
      */
-    imperativeRef?: RefObject<ScrollToInterface>;
+    imperativeRef?: React_2.RefObject<ScrollToInterface>;
     /**
      * Imperative ref contains our scrollTo index functionality for user control.
      */
@@ -427,7 +426,7 @@ export declare type VirtualizerScrollViewProps = ComponentProps<Partial<Virtuali
     /**
      * Imperative ref contains our scrollTo index functionality for user control.
      */
-    imperativeRef?: RefObject<ScrollToInterface>;
+    imperativeRef?: React_2.RefObject<ScrollToInterface>;
     /**
      * Imperative ref contains our scrollTo index functionality for user control.
      */

package/lib/components/Virtualizer/Virtualizer.js

@@ -1,3 +1,4 @@
+import * as React from 'react';
 import { useVirtualizerStyles_unstable } from './useVirtualizerStyles.styles';
 import { useVirtualizer_unstable } from './useVirtualizer';
 import { renderVirtualizer_unstable } from './renderVirtualizer';

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Virtualizer/Virtualizer.ts"],"sourcesContent":["import type { VirtualizerProps } from './Virtualizer.types';\nimport { useVirtualizerStyles_unstable } from './useVirtualizerStyles.styles';\nimport { useVirtualizer_unstable } from './useVirtualizer';\nimport { renderVirtualizer_unstable } from './renderVirtualizer';\nimport type { FC } from 'react';\n\n/**\n * Virtualizer pseudo-component, this functional wrapper\n * provides a simple interface for reducing the total number\n * of elements rendered at one time in large lists.\n */\nexport const Virtualizer: FC<VirtualizerProps> = (props: VirtualizerProps) => {\n  const state = useVirtualizer_unstable(props);\n  useVirtualizerStyles_unstable(state);\n\n  return renderVirtualizer_unstable(state);\n};\n\nVirtualizer.displayName = 'Virtualizer';\n"],"names":["useVirtualizerStyles_unstable","useVirtualizer_unstable","renderVirtualizer_unstable","Virtualizer","props","state","displayName"],"rangeMappings":";;;;;;;;;;;;","mappings":"AACA,SAASA,6BAA6B,QAAQ,gCAAgC;AAC9E,SAASC,uBAAuB,QAAQ,mBAAmB;AAC3D,SAASC,0BAA0B,QAAQ,sBAAsB;AAGjE;;;;CAIC,GACD,OAAO,MAAMC,cAAoC,CAACC;IAChD,MAAMC,QAAQJ,wBAAwBG;IACtCJ,8BAA8BK;IAE9B,OAAOH,2BAA2BG;AACpC,EAAE;AAEFF,YAAYG,WAAW,GAAG"}
+{"version":3,"sources":["../src/components/Virtualizer/Virtualizer.ts"],"sourcesContent":["import * as React from 'react';\nimport type { VirtualizerProps } from './Virtualizer.types';\nimport { useVirtualizerStyles_unstable } from './useVirtualizerStyles.styles';\nimport { useVirtualizer_unstable } from './useVirtualizer';\nimport { renderVirtualizer_unstable } from './renderVirtualizer';\n\n/**\n * Virtualizer pseudo-component, this functional wrapper\n * provides a simple interface for reducing the total number\n * of elements rendered at one time in large lists.\n */\nexport const Virtualizer: React.FC<VirtualizerProps> = (props: VirtualizerProps) => {\n  const state = useVirtualizer_unstable(props);\n  useVirtualizerStyles_unstable(state);\n\n  return renderVirtualizer_unstable(state);\n};\n\nVirtualizer.displayName = 'Virtualizer';\n"],"names":["React","useVirtualizerStyles_unstable","useVirtualizer_unstable","renderVirtualizer_unstable","Virtualizer","props","state","displayName"],"rangeMappings":";;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,6BAA6B,QAAQ,gCAAgC;AAC9E,SAASC,uBAAuB,QAAQ,mBAAmB;AAC3D,SAASC,0BAA0B,QAAQ,sBAAsB;AAEjE;;;;CAIC,GACD,OAAO,MAAMC,cAA0C,CAACC;IACtD,MAAMC,QAAQJ,wBAAwBG;IACtCJ,8BAA8BK;IAE9B,OAAOH,2BAA2BG;AACpC,EAAE;AAEFF,YAAYG,WAAW,GAAG"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Virtualizer/Virtualizer.types.ts"],"sourcesContent":["import * as React from 'react';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { VirtualizerContextProps } from '../../Utilities';\nimport type { RefObject, MutableRefObject } from 'react';\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   * Enables the isScrolling property in the child render function\n   * Default: false - to prevent nessecary render function calls\n   */\n  enableScrollLoad?: 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   * Ref for access to internal size knowledge, can be used to measure updates\n   */\n  childSizes: React.MutableRefObject<number[]>;\n  /**\n   * Ref for access to internal progressive size knowledge, can be used to measure updates\n   */\n  childProgressiveSizes: React.MutableRefObject<number[]>;\n};\n\nexport type VirtualizerState = ComponentState<VirtualizerSlots> & VirtualizerConfigState;\n\n/**\n * The main child render method of Virtualization\n * isScrolling will only be enabled when enableScrollLoad is set to true.\n */\nexport type VirtualizerChildRenderFunction = (index: number, isScrolling: boolean) => React.ReactNode;\n\nexport type VirtualizerDataRef = {\n  progressiveSizes: RefObject<number[]>;\n  nodeSizes: RefObject<number[]>;\n  setFlaggedIndex: (index: number | null) => void;\n  currentIndex: RefObject<number>;\n};\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 (or 1/3rd for dynamic items) of virtualizerLength.\n   * RECOMMEND: Override this with a consistent value if using a dynamic virtualizer.\n   *\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 virtualizer only renders a few items outside of view.\n   */\n  bufferItems?: number;\n\n  /**\n   * Defaults to half of bufferItems * itemSize size (in pixels).\n   * RECOMMEND: Override this with a consistent minimum item size value if using a dynamic virtualizer.\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   * We recommend passing this in for accurate distance assessment in IO\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   * Enables the isScrolling property in the child render function\n   * Default: false - to prevent nessecary render function calls\n   */\n  enableScrollLoad?: 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  /**\n   * Callback for notifying when a flagged index has been rendered\n   */\n  // eslint-disable-next-line @nx/workspace-consistent-callback-type -- can't change type of existing callback\n  onRenderedFlaggedIndex?: (index: number) => void;\n\n  /*\n   * Callback for notifying when a flagged index has been rendered\n   */\n  flaggedIndex?: MutableRefObject<number | null>;\n\n  /**\n   * Imperative ref contains our scrollTo index functionality for user control.\n   */\n  imperativeVirtualizerRef?: RefObject<VirtualizerDataRef>;\n\n  /**\n   * A ref that provides the size of container (vertical - height, horizontal - width), set by a resize observer.\n   * Virtualizer Measure hooks provide a suitable reference.\n   */\n  containerSizeRef: RefObject<number>;\n\n  /**\n   * A callback that enables updating scroll position for calculating required dynamic lengths,\n   * this should be passed in from useDynamicVirtualizerMeasure\n   */\n  updateScrollPosition?: (position: number) => void;\n};\n\nexport type VirtualizerProps = ComponentProps<Partial<VirtualizerSlots>> & VirtualizerConfigProps;\n"],"names":["React"],"rangeMappings":"","mappings":"AAAA,YAAYA,WAAW,QAAQ"}
+{"version":3,"sources":["../src/components/Virtualizer/Virtualizer.types.ts"],"sourcesContent":["import * as React from 'react';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { 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   * Enables the isScrolling property in the child render function\n   * Default: false - to prevent nessecary render function calls\n   */\n  enableScrollLoad?: 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   * Ref for access to internal size knowledge, can be used to measure updates\n   */\n  childSizes: React.MutableRefObject<number[]>;\n  /**\n   * Ref for access to internal progressive size knowledge, can be used to measure updates\n   */\n  childProgressiveSizes: React.MutableRefObject<number[]>;\n};\n\nexport type VirtualizerState = ComponentState<VirtualizerSlots> & VirtualizerConfigState;\n\n/**\n * The main child render method of Virtualization\n * isScrolling will only be enabled when enableScrollLoad is set to true.\n */\nexport type VirtualizerChildRenderFunction = (index: number, isScrolling: boolean) => React.ReactNode;\n\nexport type VirtualizerDataRef = {\n  progressiveSizes: React.RefObject<number[]>;\n  nodeSizes: React.RefObject<number[]>;\n  setFlaggedIndex: (index: number | null) => void;\n  currentIndex: React.RefObject<number>;\n};\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 (or 1/3rd for dynamic items) of virtualizerLength.\n   * RECOMMEND: Override this with a consistent value if using a dynamic virtualizer.\n   *\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 virtualizer only renders a few items outside of view.\n   */\n  bufferItems?: number;\n\n  /**\n   * Defaults to half of bufferItems * itemSize size (in pixels).\n   * RECOMMEND: Override this with a consistent minimum item size value if using a dynamic virtualizer.\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   * We recommend passing this in for accurate distance assessment in IO\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   * Enables the isScrolling property in the child render function\n   * Default: false - to prevent nessecary render function calls\n   */\n  enableScrollLoad?: 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  /**\n   * Callback for notifying when a flagged index has been rendered\n   */\n  // eslint-disable-next-line @nx/workspace-consistent-callback-type -- can't change type of existing callback\n  onRenderedFlaggedIndex?: (index: number) => void;\n\n  /*\n   * Callback for notifying when a flagged index has been rendered\n   */\n  flaggedIndex?: React.MutableRefObject<number | null>;\n\n  /**\n   * Imperative ref contains our scrollTo index functionality for user control.\n   */\n  imperativeVirtualizerRef?: React.RefObject<VirtualizerDataRef>;\n\n  /**\n   * A ref that provides the size of container (vertical - height, horizontal - width), set by a resize observer.\n   * Virtualizer Measure hooks provide a suitable reference.\n   */\n  containerSizeRef: React.RefObject<number>;\n\n  /**\n   * A callback that enables updating scroll position for calculating required dynamic lengths,\n   * this should be passed in from useDynamicVirtualizerMeasure\n   */\n  updateScrollPosition?: (position: number) => void;\n\n  /**\n   * Spacing between rendered children for calculation, should match the container's gap CSS value.\n   */\n  gap?: number;\n};\n\nexport type VirtualizerProps = ComponentProps<Partial<VirtualizerSlots>> & VirtualizerConfigProps;\n"],"names":["React"],"rangeMappings":"","mappings":"AAAA,YAAYA,WAAW,QAAQ"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Virtualizer/renderVirtualizer.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport * as React from 'react';\nimport type { VirtualizerSlots, VirtualizerState } from './Virtualizer.types';\nimport type { ReactNode } from 'react';\n\nimport { assertSlots } from '@fluentui/react-utilities';\n\nexport const renderVirtualizer_unstable = (state: VirtualizerState) => {\n  assertSlots<VirtualizerSlots>(state);\n  return (\n    <React.Fragment>\n      {/* The 'before' bookend to hold items in place and detect scroll previous */}\n      <state.beforeContainer>\n        <state.before />\n      </state.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      <state.afterContainer>\n        <state.after />\n      </state.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"],"names":["React","assertSlots","renderVirtualizer_unstable","state","Fragment","beforeContainer","before","virtualizedChildren","afterContainer","after","renderVirtualizerChildPlaceholder","child","index","Suspense","fallback"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,YAAYA,WAAW,QAAQ;AAI/B,SAASC,WAAW,QAAQ,4BAA4B;AAExD,OAAO,MAAMC,6BAA6B,CAACC;IACzCF,YAA8BE;IAC9B,qBACE,MAACH,MAAMI,QAAQ;;0BAEb,KAACD,MAAME,eAAe;0BACpB,cAAA,KAACF,MAAMG,MAAM;;YAGdH,MAAMI,mBAAmB;0BAE1B,KAACJ,MAAMK,cAAc;0BACnB,cAAA,KAACL,MAAMM,KAAK;;;;AAIpB,EAAE;AAEF,OAAO,MAAMC,oCAAoC,CAACC,OAAkBC;IAClE,qBACE,KAACZ,MAAMa,QAAQ;QAA8CC,UAAU;kBACpEH;OADkB,CAAC,4BAA4B,EAAEC,MAAM,CAAC;AAI/D,EAAE"}
+{"version":3,"sources":["../src/components/Virtualizer/renderVirtualizer.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport * as React from 'react';\nimport type { VirtualizerSlots, VirtualizerState } from './Virtualizer.types';\n\nimport { assertSlots } from '@fluentui/react-utilities';\n\nexport const renderVirtualizer_unstable = (state: VirtualizerState) => {\n  assertSlots<VirtualizerSlots>(state);\n  return (\n    <React.Fragment>\n      {/* The 'before' bookend to hold items in place and detect scroll previous */}\n      <state.beforeContainer>\n        <state.before />\n      </state.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      <state.afterContainer>\n        <state.after />\n      </state.afterContainer>\n    </React.Fragment>\n  );\n};\n\nexport const renderVirtualizerChildPlaceholder = (child: React.ReactNode, index: number) => {\n  return (\n    <React.Suspense key={`fui-virtualizer-placeholder-${index}`} fallback={null}>\n      {child}\n    </React.Suspense>\n  );\n};\n"],"names":["React","assertSlots","renderVirtualizer_unstable","state","Fragment","beforeContainer","before","virtualizedChildren","afterContainer","after","renderVirtualizerChildPlaceholder","child","index","Suspense","fallback"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,YAAYA,WAAW,QAAQ;AAG/B,SAASC,WAAW,QAAQ,4BAA4B;AAExD,OAAO,MAAMC,6BAA6B,CAACC;IACzCF,YAA8BE;IAC9B,qBACE,MAACH,MAAMI,QAAQ;;0BAEb,KAACD,MAAME,eAAe;0BACpB,cAAA,KAACF,MAAMG,MAAM;;YAGdH,MAAMI,mBAAmB;0BAE1B,KAACJ,MAAMK,cAAc;0BACnB,cAAA,KAACL,MAAMM,KAAK;;;;AAIpB,EAAE;AAEF,OAAO,MAAMC,oCAAoC,CAACC,OAAwBC;IACxE,qBACE,KAACZ,MAAMa,QAAQ;QAA8CC,UAAU;kBACpEH;OADkB,CAAC,4BAA4B,EAAEC,MAAM,CAAC;AAI/D,EAAE"}

package/lib/components/Virtualizer/useVirtualizer.js

@@ -1,39 +1,39 @@
-import { useEffect, useRef, useCallback, useImperativeHandle, useState, useReducer } from 'react';
+import * as React from 'react';
 import { useIntersectionObserver } from '../../hooks/useIntersectionObserver';
 import { useVirtualizerContextState_unstable } from '../../Utilities';
 import { slot, useTimeout } from '@fluentui/react-utilities';
 import { flushSync } from 'react-dom';
 export function useVirtualizer_unstable(props) {
     'use no memo';
-    const { itemSize, numItems, virtualizerLength, children: renderChild, getItemSize, bufferItems = Math.round(virtualizerLength / 4.0), bufferSize = Math.floor(bufferItems / 2.0) * itemSize, axis = 'vertical', reversed = false, virtualizerContext, onRenderedFlaggedIndex, imperativeVirtualizerRef, containerSizeRef, scrollViewRef, enableScrollLoad, updateScrollPosition } = props;
+    const { itemSize, numItems, virtualizerLength, children: renderChild, getItemSize, bufferItems = Math.round(virtualizerLength / 4.0), bufferSize = Math.floor(bufferItems / 2.0) * itemSize, axis = 'vertical', reversed = false, virtualizerContext, onRenderedFlaggedIndex, imperativeVirtualizerRef, containerSizeRef, scrollViewRef, enableScrollLoad, updateScrollPosition, gap = 0 } = props;
     /* The context is optional, it's useful for injecting additional index logic, or performing uniform state updates*/ const _virtualizerContext = useVirtualizerContextState_unstable(virtualizerContext);
     // We use this ref as a constant source to access the virtualizer's state imperatively
-    const actualIndexRef = useRef(_virtualizerContext.contextIndex);
-    const flaggedIndex = useRef(null);
+    const actualIndexRef = React.useRef(_virtualizerContext.contextIndex);
+    const flaggedIndex = React.useRef(null);
     const actualIndex = _virtualizerContext.contextIndex;
     // Just in case our ref gets out of date vs the context during a re-render
     if (_virtualizerContext.contextIndex !== actualIndexRef.current) {
         actualIndexRef.current = _virtualizerContext.contextIndex;
     }
-    const setActualIndex = useCallback((index)=>{
+    const setActualIndex = React.useCallback((index)=>{
         actualIndexRef.current = index;
         _virtualizerContext.setContextIndex(index);
     }, [
         _virtualizerContext
     ]);
     // Store ref to before padding element
-    const beforeElementRef = useRef(null);
+    const beforeElementRef = React.useRef(null);
     // Store ref to before padding element
-    const afterElementRef = useRef(null);
+    const afterElementRef = React.useRef(null);
     // We need to store an array to track dynamic sizes, we can use this to incrementally update changes
-    const childSizes = useRef(new Array(getItemSize ? numItems : 0));
+    const childSizes = React.useRef(new Array(getItemSize ? numItems : 0));
     /* We keep track of the progressive sizing/placement down the list,
-  this helps us skip re-calculations unless children/size changes */ const childProgressiveSizes = useRef(new Array(getItemSize ? numItems : 0));
+  this helps us skip re-calculations unless children/size changes */ const childProgressiveSizes = React.useRef(new Array(getItemSize ? numItems : 0));
     if (virtualizerContext === null || virtualizerContext === void 0 ? void 0 : virtualizerContext.childProgressiveSizes) {
         virtualizerContext.childProgressiveSizes.current = childProgressiveSizes.current;
     }
     // The internal tracking REF for child array (updates often).
-    const childArray = useRef(new Array(virtualizerLength));
+    const childArray = React.useRef(new Array(virtualizerLength));
     const populateSizeArrays = ()=>{
         if (!getItemSize) {
             // Static sizes, never mind!
@@ -49,7 +49,8 @@ export function useVirtualizer_unstable(props) {
             }
         }
         for(let index = 0; index < numItems; index++){
-            childSizes.current[index] = getItemSize(index);
+            const _gap = index < numItems - 1 ? gap : 0;
+            childSizes.current[index] = getItemSize(index) + _gap;
             if (index === 0) {
                 childProgressiveSizes.current[index] = childSizes.current[index];
             } else {
@@ -57,10 +58,10 @@ export function useVirtualizer_unstable(props) {
             }
         }
     };
-    const [isScrolling, setIsScrolling] = useState(false);
+    const [isScrolling, setIsScrolling] = React.useState(false);
     const [setScrollTimer, clearScrollTimer] = useTimeout();
-    const scrollCounter = useRef(0);
-    const initializeScrollingTimer = useCallback(()=>{
+    const scrollCounter = React.useRef(0);
+    const initializeScrollingTimer = React.useCallback(()=>{
         if (!enableScrollLoad) {
             // Disabled by default for reduction of render callbacks
             return;
@@ -86,13 +87,13 @@ export function useVirtualizer_unstable(props) {
         setScrollTimer,
         enableScrollLoad
     ]);
-    useEffect(()=>{
+    React.useEffect(()=>{
         initializeScrollingTimer();
     }, [
         actualIndex,
         initializeScrollingTimer
     ]);
-    const updateChildRows = useCallback((newIndex)=>{
+    const updateChildRows = React.useCallback((newIndex)=>{
         if (numItems === 0) {
             /* Nothing to virtualize */ return;
         }
@@ -111,7 +112,7 @@ export function useVirtualizer_unstable(props) {
         renderChild,
         virtualizerLength
     ]);
-    const updateCurrentItemSizes = useCallback((newIndex)=>{
+    const updateCurrentItemSizes = React.useCallback((newIndex)=>{
         if (!getItemSize) {
             // Static sizes, not required.
             return;
@@ -122,7 +123,8 @@ export function useVirtualizer_unstable(props) {
         const startIndex = Math.max(newIndex, 0);
         let didUpdate = false;
         for(let i = startIndex; i < endIndex; i++){
-            const newSize = getItemSize(i);
+            const _gap = i < numItems - 1 ? gap : 0;
+            const newSize = getItemSize(i) + _gap;
             if (newSize !== childSizes.current[i]) {
                 childSizes.current[i] = newSize;
                 didUpdate = true;
@@ -138,9 +140,10 @@ export function useVirtualizer_unstable(props) {
     }, [
         getItemSize,
         numItems,
-        virtualizerLength
+        virtualizerLength,
+        gap
     ]);
-    const batchUpdateNewIndex = useCallback((index)=>{
+    const batchUpdateNewIndex = React.useCallback((index)=>{
         // Local updates
         updateChildRows(index);
         updateCurrentItemSizes(index);
@@ -151,7 +154,7 @@ export function useVirtualizer_unstable(props) {
         updateChildRows,
         updateCurrentItemSizes
     ]);
-    const findIndexRecursive = useCallback((scrollPos, lowIndex, highIndex)=>{
+    const findIndexRecursive = React.useCallback((scrollPos, lowIndex, highIndex)=>{
         if (lowIndex > highIndex) {
             // We shouldn't get here - but no-op the index if we do.
             return actualIndex;
@@ -174,7 +177,7 @@ export function useVirtualizer_unstable(props) {
     }, [
         actualIndex
     ]);
-    const getIndexFromSizeArray = useCallback((scrollPos)=>{
+    const getIndexFromSizeArray = React.useCallback((scrollPos)=>{
         /* Quick searches our progressive height array */ if (scrollPos === 0 || childProgressiveSizes.current.length === 0 || scrollPos <= childProgressiveSizes.current[0]) {
             // Check start
             return 0;
@@ -187,32 +190,34 @@ export function useVirtualizer_unstable(props) {
     }, [
         findIndexRecursive
     ]);
-    const getIndexFromScrollPosition = useCallback((scrollPos)=>{
+    const getIndexFromScrollPosition = React.useCallback((scrollPos)=>{
         if (!getItemSize) {
-            return Math.round(scrollPos / itemSize);
+            return Math.round(scrollPos / (itemSize + gap));
         }
         return getIndexFromSizeArray(scrollPos);
     }, [
         getIndexFromSizeArray,
         getItemSize,
-        itemSize
+        itemSize,
+        gap
     ]);
-    const calculateTotalSize = useCallback(()=>{
+    const calculateTotalSize = React.useCallback(()=>{
         if (!getItemSize) {
-            return itemSize * numItems;
+            return (itemSize + gap) * numItems;
         }
         // Time for custom size calcs
         return childProgressiveSizes.current[numItems - 1];
     }, [
         getItemSize,
         itemSize,
-        numItems
+        numItems,
+        gap
     ]);
-    const calculateBefore = useCallback(()=>{
+    const calculateBefore = React.useCallback(()=>{
         const currentIndex = Math.min(actualIndex, numItems - 1);
         if (!getItemSize) {
             // The missing items from before virtualization starts height
-            return currentIndex * itemSize;
+            return currentIndex * (itemSize + gap);
         }
         if (currentIndex <= 0) {
             return 0;
@@ -223,9 +228,10 @@ export function useVirtualizer_unstable(props) {
         actualIndex,
         getItemSize,
         itemSize,
-        numItems
+        numItems,
+        gap
     ]);
-    const calculateAfter = useCallback(()=>{
+    const calculateAfter = React.useCallback(()=>{
         if (numItems === 0 || actualIndex + virtualizerLength >= numItems) {
             return 0;
         }
@@ -233,7 +239,7 @@ export function useVirtualizer_unstable(props) {
         if (!getItemSize) {
             // The missing items from after virtualization ends height
             const remainingItems = numItems - lastItemIndex;
-            return remainingItems * itemSize;
+            return remainingItems * (itemSize + gap) - gap;
         }
         // Time for custom size calcs
         return childProgressiveSizes.current[numItems - 1] - childProgressiveSizes.current[lastItemIndex - 1];
@@ -242,10 +248,11 @@ export function useVirtualizer_unstable(props) {
         getItemSize,
         itemSize,
         numItems,
-        virtualizerLength
+        virtualizerLength,
+        gap
     ]);
     // Observe intersections of virtualized components
-    const { setObserverList } = useIntersectionObserver(useCallback(// TODO: exclude types from this lint rule: https://github.com/microsoft/fluentui/issues/31286
+    const { setObserverList } = useIntersectionObserver(React.useCallback(// TODO: exclude types from this lint rule: https://github.com/microsoft/fluentui/issues/31286
     // eslint-disable-next-line no-restricted-globals
     (entries, observer)=>{
         /* Sanity check - do we even need virtualization? */ if (virtualizerLength > numItems) {
@@ -365,7 +372,7 @@ export function useVirtualizer_unstable(props) {
         rootMargin: '0px',
         threshold: 0
     });
-    const setBeforeRef = useCallback((element)=>{
+    const setBeforeRef = React.useCallback((element)=>{
         if (!element || beforeElementRef.current === element) {
             return;
         }
@@ -380,7 +387,7 @@ export function useVirtualizer_unstable(props) {
     }, [
         setObserverList
     ]);
-    const setAfterRef = useCallback((element)=>{
+    const setAfterRef = React.useCallback((element)=>{
         if (!element || afterElementRef.current === element) {
             return;
         }
@@ -396,14 +403,14 @@ export function useVirtualizer_unstable(props) {
         setObserverList
     ]);
     // Initialize the size array before first render.
-    const hasInitialized = useRef(false);
+    const hasInitialized = React.useRef(false);
     const initializeSizeArray = ()=>{
         if (hasInitialized.current === false) {
             hasInitialized.current = true;
             populateSizeArrays();
         }
     };
-    useImperativeHandle(imperativeVirtualizerRef, ()=>{
+    React.useImperativeHandle(imperativeVirtualizerRef, ()=>{
         return {
             progressiveSizes: childProgressiveSizes,
             nodeSizes: childSizes,
@@ -416,7 +423,7 @@ export function useVirtualizer_unstable(props) {
     ]);
     // Initialization on mount - update array index to 0 (ready state).
     // Only fire on mount (no deps).
-    useEffect(()=>{
+    React.useEffect(()=>{
         if (actualIndex < 0) {
             batchUpdateNewIndex(0);
         }
@@ -426,9 +433,9 @@ export function useVirtualizer_unstable(props) {
    * forceUpdate:
    * We only want to trigger this when scrollLoading is enabled and set to false,
    * it will force re-render all children elements
-   */ const forceUpdate = useReducer(()=>({}), {})[1];
+   */ const forceUpdate = React.useReducer(()=>({}), {})[1];
     // If the user passes in an updated renderChild function - update current children
-    useEffect(()=>{
+    React.useEffect(()=>{
         if (actualIndex >= 0) {
             updateChildRows(actualIndex);
             if (enableScrollLoad && !isScrolling) {
@@ -440,16 +447,17 @@ export function useVirtualizer_unstable(props) {
         renderChild,
         isScrolling
     ]);
-    useEffect(()=>{
+    React.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
+        getItemSize,
+        gap
     ]);
     // Effect to check flag index on updates
-    useEffect(()=>{
+    React.useEffect(()=>{
         if (!onRenderedFlaggedIndex || flaggedIndex.current === null) {
             return;
         }