@pega/lists-react 9.0.0-build.6.9 → 9.0.0-build.7.1

package/lib/Core/Components/Virtualise/VariableHeightVirtualizer/VariableHeightVirtualizer.d.ts

@@ -0,0 +1,97 @@
+import type { ReactNode } from 'react';
+export interface ItemsHeight {
+    [index: number]: number;
+}
+export interface LoadedDataRange {
+    startIndex?: number;
+    endIndex?: number;
+}
+export interface VariableHeightVirtualizerProps {
+    /** Unique identifier for the virtualizer instance. */
+    id: string;
+    /** The React children elements to render inside the virtualizer. */
+    children: ReactNode;
+    /** Callback to fetch paginated data. */
+    apiCallback: (params: {
+        startIndex: number;
+        endIndex: number;
+        id: string;
+    }, options: {
+        takeLatestAction: boolean;
+    }) => void;
+    /** Indicates if data is currently being fetched. */
+    isDataFetching: boolean;
+    /** Range of data that is already loaded. */
+    loadedDataRange: LoadedDataRange;
+    /** Default height for items if not measured. */
+    defaultItemHeight?: number;
+    /** Total number of items in the list. */
+    totalItemCount?: number | null;
+    /** Number of items to buffer before/after the visible range. */
+    buffer?: number;
+    /** Maximum number of items to render at once. */
+    maxItemsToPaint?: number;
+    /** Function to render the header. */
+    headerRenderer?: (() => ReactNode) | null;
+    /** Function to render the footer. */
+    footerRenderer?: (() => ReactNode) | null;
+    /** Function to render the no-result state. */
+    noResultRenderer?: (() => ReactNode) | null;
+    /** CSS class for the item container. */
+    itemContainerClass?: string;
+    /** Maximum height for the view container. */
+    viewMaxHeight?: string | number | null;
+    /** Minimum height for the view container. */
+    minHeight?: string | number;
+    /** Minimum height when no items are rendered. */
+    minHeightWhenNoItemsRendered?: string;
+}
+interface VirtualizerRef {
+    /** Scrolls the parent container to the top. */
+    scrollToTop: () => void;
+    /** Returns the parent container element. */
+    getParentContainer: () => HTMLElement | null;
+    /** Returns the buffer container element. */
+    getBufferContainer: () => HTMLElement | null;
+    /** Triggers a count change notification. */
+    notifyCountChange: () => void;
+}
+/**
+ * Flow:
+ * 1. First load/user scrolls/screen size change/column resize
+ * 2. Calculate new pagination range based on scroll position or if view not filled
+ * 3. Consumer executes API call to fetch new data
+ * 4. New items are prepared and rendered
+ * 5. Update cache of item heights
+ * 6. Update buffer height
+ * 7. Adjust itemContainer top
+ * 8. Adjust scrollTop (if needed) to keep the items at same position visually
+ */
+/**
+ * VariableHeightVirtualizer is a React component that efficiently renders large lists with items of variable heights,
+ * using virtualization techniques to minimize DOM nodes and improve performance.
+ *
+ * @param props - {@link VariableHeightVirtualizerProps}
+ * @param ref - Forwarded ref exposing imperative APIs: scrollToTop, getParentContainer, getBufferContainer, notifyCountChange.
+ *
+ * @example
+ * ```tsx
+ * <VariableHeightVirtualizer
+ *   id="my-list"
+ *   totalItemCount={10000}
+ *   loadedDataRange={{ startIndex: 0, endIndex: 49 }}
+ *   isDataFetching={isLoading}
+ *   apiCallback={fetchData}
+ *   defaultItemHeight={40}
+ *   buffer={10}
+ *   headerRenderer={() => <Header />}
+ *   footerRenderer={() => <Footer />}
+ *   noResultRenderer={() => <NoResults />}
+ * >
+ *   {items.map(item => <ListItem key={item.id} {...item} />)}
+ * </VariableHeightVirtualizer>
+ * ```
+ */
+declare const VariableHeightVirtualizer: import("react").ForwardRefExoticComponent<VariableHeightVirtualizerProps & import("react").RefAttributes<VirtualizerRef>>;
+export default VariableHeightVirtualizer;
+//# sourceMappingURL=VariableHeightVirtualizer.d.ts.map

package/lib/Core/Components/Virtualise/VariableHeightVirtualizer/VariableHeightVirtualizer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"VariableHeightVirtualizer.d.ts","sourceRoot":"","sources":["../../../../../Core/Components/Virtualise/VariableHeightVirtualizer/VariableHeightVirtualizer.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,SAAS,EAAgB,MAAM,OAAO,CAAC;AAsBrD,MAAM,WAAW,WAAW;IAC1B,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;CACzB;AAED,MAAM,WAAW,eAAe;IAC9B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AASD,MAAM,WAAW,8BAA8B;IAC7C,sDAAsD;IACtD,EAAE,EAAE,MAAM,CAAC;IACX,oEAAoE;IACpE,QAAQ,EAAE,SAAS,CAAC;IACpB,wCAAwC;IACxC,WAAW,EAAE,CACX,MAAM,EAAE;QAAE,UAAU,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,MAAM,CAAC;QAAC,EAAE,EAAE,MAAM,CAAA;KAAE,EAC5D,OAAO,EAAE;QAAE,gBAAgB,EAAE,OAAO,CAAA;KAAE,KACnC,IAAI,CAAC;IACV,oDAAoD;IACpD,cAAc,EAAE,OAAO,CAAC;IACxB,4CAA4C;IAC5C,eAAe,EAAE,eAAe,CAAC;IACjC,gDAAgD;IAChD,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,yCAAyC;IACzC,cAAc,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B,gEAAgE;IAChE,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,iDAAiD;IACjD,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,qCAAqC;IACrC,cAAc,CAAC,EAAE,CAAC,MAAM,SAAS,CAAC,GAAG,IAAI,CAAC;IAC1C,qCAAqC;IACrC,cAAc,CAAC,EAAE,CAAC,MAAM,SAAS,CAAC,GAAG,IAAI,CAAC;IAC1C,8CAA8C;IAC9C,gBAAgB,CAAC,EAAE,CAAC,MAAM,SAAS,CAAC,GAAG,IAAI,CAAC;IAC5C,wCAAwC;IACxC,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,6CAA6C;IAC7C,aAAa,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAAC;IACvC,6CAA6C;IAC7C,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC5B,iDAAiD;IACjD,4BAA4B,CAAC,EAAE,MAAM,CAAC;CACvC;AAED,UAAU,cAAc;IACtB,+CAA+C;IAC/C,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,4CAA4C;IAC5C,kBAAkB,EAAE,MAAM,WAAW,GAAG,IAAI,CAAC;IAC7C,4CAA4C;IAC5C,kBAAkB,EAAE,MAAM,WAAW,GAAG,IAAI,CAAC;IAC7C,4CAA4C;IAC5C,iBAAiB,EAAE,MAAM,IAAI,CAAC;CAC/B;AAaD;;;;;;;;;;GAUG;AAEH;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,QAAA,MAAM,yBAAyB,2HA0T9B,CAAC;AAIF,eAAe,yBAAyB,CAAC"}

package/lib/Core/Components/Virtualise/VariableHeightVirtualizer/VariableHeightVirtualizer.js

@@ -0,0 +1,249 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef, useEffect, useState, useCallback, useLayoutEffect, forwardRef, useImperativeHandle, useMemo } from 'react';
+import Styled from 'styled-components';
+import { Progress } from '@pega/cosmos-react-core';
+import useResizeObserver from '../UseResizeObserver';
+import useTranslate from '../../../Hooks/useTranslate';
+import useChildrenHeightResizeObserver from './useChildrenHeightResizeObserver';
+import useLoaderPositioning from './useLoaderPositioning';
+import usePagination from './usePagination';
+import useScroll from './useScroll';
+import useVirtualizerItemCount from './useVirtualizerItemCount';
+import { calculateCumulativeItemSizeChange, getMaxHeight, isViewNotFilled, calculateTotalBufferHeight, getChangedItemsHeight, updateItemPositionStyles } from './utils';
+const StyledLoader = Styled.div `
+  display: flex;
+  justify-content: center;
+  padding: 0.5rem;
+  position: absolute;
+  width: var(--container-width);
+  left: ${props => `var(${props.$style.left})`};
+  top: ${props => `var(${props.$style.top})`};
+  width: 100%;
+`;
+/**
+ * Flow:
+ * 1. First load/user scrolls/screen size change/column resize
+ * 2. Calculate new pagination range based on scroll position or if view not filled
+ * 3. Consumer executes API call to fetch new data
+ * 4. New items are prepared and rendered
+ * 5. Update cache of item heights
+ * 6. Update buffer height
+ * 7. Adjust itemContainer top
+ * 8. Adjust scrollTop (if needed) to keep the items at same position visually
+ */
+/**
+ * VariableHeightVirtualizer is a React component that efficiently renders large lists with items of variable heights,
+ * using virtualization techniques to minimize DOM nodes and improve performance.
+ *
+ * @param props - {@link VariableHeightVirtualizerProps}
+ * @param ref - Forwarded ref exposing imperative APIs: scrollToTop, getParentContainer, getBufferContainer, notifyCountChange.
+ *
+ * @example
+ * ```tsx
+ * <VariableHeightVirtualizer
+ *   id="my-list"
+ *   totalItemCount={10000}
+ *   loadedDataRange={{ startIndex: 0, endIndex: 49 }}
+ *   isDataFetching={isLoading}
+ *   apiCallback={fetchData}
+ *   defaultItemHeight={40}
+ *   buffer={10}
+ *   headerRenderer={() => <Header />}
+ *   footerRenderer={() => <Footer />}
+ *   noResultRenderer={() => <NoResults />}
+ * >
+ *   {items.map(item => <ListItem key={item.id} {...item} />)}
+ * </VariableHeightVirtualizer>
+ * ```
+ */
+const VariableHeightVirtualizer = forwardRef(({ id, children, buffer = 15, apiCallback, loadedDataRange = {}, defaultItemHeight = 30, totalItemCount, maxItemsToPaint = 5000, headerRenderer = null, footerRenderer = null, noResultRenderer = null, itemContainerClass = '', viewMaxHeight = null, minHeight = 'auto', isDataFetching = false, minHeightWhenNoItemsRendered = 'auto' }, ref) => {
+    const [startIndex, setStartIndex] = useState(0);
+    const [endIndex, setEndIndex] = useState(0);
+    const [scrollTop, setScrollTop] = useState(0);
+    const [totalBufferHeight, setTotalBufferHeight] = useState(0);
+    const [itemsHeight, setItemsHeight] = useState({});
+    const [itemContainerHeight, setItemContainerHeight] = useState(0);
+    const [countChangeTrigger, setCountChangeTrigger] = useState(0);
+    const [itemHeightChangeTrigger, setItemHeightChangeTrigger] = useState(0);
+    const [parentContainerDimensionChangeTrigger, setParentContainerDimensionChangeTrigger] = useState(0);
+    const parentContainerRef = useRef(null);
+    const bufferContainerRef = useRef(null);
+    const itemContainerRef = useRef(null);
+    const previousItemsHeightRef = useRef({});
+    const previousFirstItemDataIndexRef = useRef(null);
+    const [translate] = useTranslate();
+    const onParentContainerDimensionUpdate = useCallback(() => {
+        const { height: parentContainerHeight, width: parentContainerWidth } = parentContainerRef.current?.getBoundingClientRect() ?? {};
+        // trigger virtualizer operations only when the container has some height and width
+        if (parentContainerHeight && parentContainerWidth) {
+            setParentContainerDimensionChangeTrigger(value => value + 1);
+        }
+    }, []);
+    const getParentContainer = useCallback(() => parentContainerRef.current, []);
+    useResizeObserver(getParentContainer, onParentContainerDimensionUpdate);
+    const { isInfiniteMode, virtualizedCount } = useVirtualizerItemCount({
+        totalItemCount,
+        startIndex,
+        endIndex,
+        loadedDataRange,
+        isDataFetching,
+        itemContainerRef,
+        children,
+        buffer,
+        countResetSignal: countChangeTrigger
+    });
+    const { triggerPagination, isForceRefreshedPagination } = usePagination({
+        apiCallback,
+        id,
+        buffer,
+        maxItemsToPaint,
+        startIndex,
+        endIndex,
+        virtualizedCount,
+        isInfiniteMode,
+        itemsHeight,
+        defaultItemHeight,
+        parentContainerRef,
+        itemContainerRef,
+        setStartIndex,
+        setEndIndex,
+        previousFirstItemDataIndexRef
+    });
+    // Listens to the scroll events and trigger pagination when more records are needed to enable smooth scrolling
+    useScroll({
+        parentContainerRef,
+        itemContainerRef,
+        onThresholdBreach: (sTop) => {
+            setScrollTop(sTop);
+            triggerPagination(sTop);
+        },
+        delay: 150
+    });
+    // Expose APIs to the consumer
+    useImperativeHandle(ref, () => ({
+        scrollToTop: () => {
+            if (parentContainerRef.current) {
+                parentContainerRef.current.scrollTop = 0;
+                setScrollTop(0);
+                triggerPagination(0, true);
+            }
+        },
+        getParentContainer: () => parentContainerRef.current,
+        getBufferContainer: () => itemContainerRef.current,
+        notifyCountChange: () => setCountChangeTrigger(value => value + 1)
+    }));
+    // Measure height of rendered items and cache the heights
+    useLayoutEffect(() => {
+        if (!itemContainerRef.current)
+            return;
+        const newHeights = getChangedItemsHeight(itemContainerRef.current, itemsHeight, defaultItemHeight);
+        if (Object.keys(newHeights).length > 0) {
+            setItemsHeight((prev) => ({ ...prev, ...newHeights }));
+        }
+    }, [
+        startIndex,
+        itemsHeight,
+        children,
+        isDataFetching,
+        defaultItemHeight,
+        itemHeightChangeTrigger
+    ]);
+    // buffer height calculation
+    useLayoutEffect(() => {
+        const newBufferHeight = calculateTotalBufferHeight(virtualizedCount, itemsHeight, defaultItemHeight);
+        if (newBufferHeight !== totalBufferHeight) {
+            setTotalBufferHeight(newBufferHeight);
+        }
+    }, [itemsHeight, virtualizedCount, defaultItemHeight, totalBufferHeight]);
+    // itemContainer size and position adjustments
+    useLayoutEffect(() => {
+        if (!itemContainerRef.current)
+            return;
+        setItemContainerHeight(updateItemPositionStyles(itemContainerRef.current, itemsHeight, defaultItemHeight));
+    }, [children, itemsHeight, defaultItemHeight]);
+    // scroll position adjustment if rendered height is different than estimated height
+    useLayoutEffect(() => {
+        if (!parentContainerRef.current)
+            return;
+        const atTop = parentContainerRef.current.scrollTop === 0;
+        if (!atTop) {
+            const delta = calculateCumulativeItemSizeChange(startIndex, previousFirstItemDataIndexRef.current, itemsHeight, previousItemsHeightRef.current, defaultItemHeight);
+            if (delta !== 0) {
+                parentContainerRef.current.scrollTop += delta;
+            }
+        }
+        previousItemsHeightRef.current = { ...itemsHeight };
+    }, [startIndex, itemsHeight, defaultItemHeight]);
+    // Adjust loader positions
+    useLoaderPositioning({
+        isDataFetching,
+        parentContainerRef,
+        itemContainerRef,
+        children,
+        itemsHeight,
+        defaultItemHeight
+    });
+    // Initial pagination trigger and subsequent triggers if the view is not completely filled
+    useEffect(() => {
+        // If consumer already has data for initial items, then no need to trigger pagination. Just hydrate the internal state in sync with existing data.
+        if (!endIndex &&
+            loadedDataRange.startIndex !== undefined &&
+            loadedDataRange.startIndex >= 0 &&
+            loadedDataRange.endIndex !== undefined &&
+            loadedDataRange.endIndex >= 0) {
+            setStartIndex(loadedDataRange.startIndex);
+            setEndIndex(loadedDataRange.endIndex);
+            return;
+        }
+        // If the consumer doesn't have data or view not filled then trigger pagination
+        if (!isDataFetching &&
+            (!endIndex ||
+                (itemContainerRef.current &&
+                    parentContainerRef.current &&
+                    isViewNotFilled(virtualizedCount, itemContainerRef.current, parentContainerRef.current, !!headerRenderer)))) {
+            triggerPagination(scrollTop);
+        }
+    }, [
+        loadedDataRange,
+        scrollTop,
+        virtualizedCount,
+        endIndex,
+        triggerPagination,
+        parentContainerDimensionChangeTrigger,
+        isDataFetching,
+        headerRenderer
+    ]);
+    // Resize observer on items to track height changes
+    const onItemsHeightUpdate = useCallback(() => {
+        setItemHeightChangeTrigger(value => value + 1);
+    }, []);
+    useChildrenHeightResizeObserver({
+        childrenContainerRef: itemContainerRef,
+        children,
+        itemsHeight,
+        defaultItemHeight,
+        onItemsHeightUpdate
+    });
+    const maxHeight = useMemo(() => getMaxHeight(viewMaxHeight), [viewMaxHeight]);
+    return (_jsxs("div", { ref: parentContainerRef, style: {
+            maxHeight,
+            minHeight: virtualizedCount === 0 ? minHeightWhenNoItemsRendered : minHeight,
+            overflowY: 'auto',
+            position: 'relative',
+            width: '100%'
+        }, className: 'pContainer variableHeightVirtualizer', children: [headerRenderer && headerRenderer(), _jsxs("div", { className: 'bContainer', ref: bufferContainerRef, style: { height: totalBufferHeight, position: 'relative' }, children: [isDataFetching && !isForceRefreshedPagination && (_jsx(StyledLoader, { "$style": {
+                            top: '--above-loader-top',
+                            left: '--loader-left'
+                        }, children: _jsx(Progress, { className: 'above-loader', placement: 'block', tabIndex: 0, "aria-label": translate('Loading more results') }) })), _jsx("div", { ref: itemContainerRef, style: {
+                            position: 'absolute',
+                            left: 0,
+                            width: '100%',
+                            height: `${itemContainerHeight}px`
+                        }, className: `${itemContainerClass} row-container`, children: children }), isDataFetching && !isForceRefreshedPagination && (_jsx(StyledLoader, { "$style": {
+                            top: '--below-loader-top',
+                            left: '--loader-left'
+                        }, children: _jsx(Progress, { className: 'below-loader', placement: 'block', tabIndex: 0, "aria-label": translate('Loading more results') }) }))] }), virtualizedCount === 0 && !isDataFetching && noResultRenderer ? noResultRenderer() : null, footerRenderer && footerRenderer()] }));
+});
+VariableHeightVirtualizer.displayName = 'VariableHeightVirtualizer';
+export default VariableHeightVirtualizer;
+//# sourceMappingURL=VariableHeightVirtualizer.js.map

package/lib/Core/Components/Virtualise/VariableHeightVirtualizer/VariableHeightVirtualizer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VariableHeightVirtualizer.js","sourceRoot":"","sources":["../../../../../Core/Components/Virtualise/VariableHeightVirtualizer/VariableHeightVirtualizer.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  useRef,\n  useEffect,\n  useState,\n  useCallback,\n  useLayoutEffect,\n  forwardRef,\n  useImperativeHandle,\n  useMemo\n} from 'react';\nimport type { ReactNode, ForwardedRef } from 'react';\nimport Styled from 'styled-components';\n\nimport { Progress } from '@pega/cosmos-react-core';\n\nimport useResizeObserver from '../UseResizeObserver';\nimport useTranslate from '../../../Hooks/useTranslate';\n\nimport useChildrenHeightResizeObserver from './useChildrenHeightResizeObserver';\nimport useLoaderPositioning from './useLoaderPositioning';\nimport usePagination from './usePagination';\nimport useScroll from './useScroll';\nimport useVirtualizerItemCount from './useVirtualizerItemCount';\nimport {\n  calculateCumulativeItemSizeChange,\n  getMaxHeight,\n  isViewNotFilled,\n  calculateTotalBufferHeight,\n  getChangedItemsHeight,\n  updateItemPositionStyles\n} from './utils';\n\nexport interface ItemsHeight {\n  [index: number]: number;\n}\n\nexport interface LoadedDataRange {\n  startIndex?: number;\n  endIndex?: number;\n}\n\ninterface StyledLoaderProps {\n  $style: {\n    top: string;\n    left: string;\n  };\n}\n\nexport interface VariableHeightVirtualizerProps {\n  /** Unique identifier for the virtualizer instance. */\n  id: string;\n  /** The React children elements to render inside the virtualizer. */\n  children: ReactNode;\n  /** Callback to fetch paginated data. */\n  apiCallback: (\n    params: { startIndex: number; endIndex: number; id: string },\n    options: { takeLatestAction: boolean }\n  ) => void;\n  /** Indicates if data is currently being fetched. */\n  isDataFetching: boolean;\n  /** Range of data that is already loaded. */\n  loadedDataRange: LoadedDataRange;\n  /** Default height for items if not measured. */\n  defaultItemHeight?: number;\n  /** Total number of items in the list. */\n  totalItemCount?: number | null;\n  /** Number of items to buffer before/after the visible range. */\n  buffer?: number;\n  /** Maximum number of items to render at once. */\n  maxItemsToPaint?: number;\n  /** Function to render the header. */\n  headerRenderer?: (() => ReactNode) | null;\n  /** Function to render the footer. */\n  footerRenderer?: (() => ReactNode) | null;\n  /** Function to render the no-result state. */\n  noResultRenderer?: (() => ReactNode) | null;\n  /** CSS class for the item container. */\n  itemContainerClass?: string;\n  /** Maximum height for the view container. */\n  viewMaxHeight?: string | number | null;\n  /** Minimum height for the view container. */\n  minHeight?: string | number;\n  /** Minimum height when no items are rendered. */\n  minHeightWhenNoItemsRendered?: string;\n}\n\ninterface VirtualizerRef {\n  /** Scrolls the parent container to the top. */\n  scrollToTop: () => void;\n  /** Returns the parent container element. */\n  getParentContainer: () => HTMLElement | null;\n  /** Returns the buffer container element. */\n  getBufferContainer: () => HTMLElement | null;\n  /** Triggers a count change notification. */\n  notifyCountChange: () => void;\n}\n\nconst StyledLoader = Styled.div<StyledLoaderProps>`\n  display: flex;\n  justify-content: center;\n  padding: 0.5rem;\n  position: absolute;\n  width: var(--container-width);\n  left: ${props => `var(${props.$style.left})`};\n  top: ${props => `var(${props.$style.top})`};\n  width: 100%;\n`;\n\n/**\n * Flow:\n * 1. First load/user scrolls/screen size change/column resize\n * 2. Calculate new pagination range based on scroll position or if view not filled\n * 3. Consumer executes API call to fetch new data\n * 4. New items are prepared and rendered\n * 5. Update cache of item heights\n * 6. Update buffer height\n * 7. Adjust itemContainer top\n * 8. Adjust scrollTop (if needed) to keep the items at same position visually\n */\n\n/**\n * VariableHeightVirtualizer is a React component that efficiently renders large lists with items of variable heights,\n * using virtualization techniques to minimize DOM nodes and improve performance.\n *\n * @param props - {@link VariableHeightVirtualizerProps}\n * @param ref - Forwarded ref exposing imperative APIs: scrollToTop, getParentContainer, getBufferContainer, notifyCountChange.\n *\n * @example\n * ```tsx\n * <VariableHeightVirtualizer\n *   id=\"my-list\"\n *   totalItemCount={10000}\n *   loadedDataRange={{ startIndex: 0, endIndex: 49 }}\n *   isDataFetching={isLoading}\n *   apiCallback={fetchData}\n *   defaultItemHeight={40}\n *   buffer={10}\n *   headerRenderer={() => <Header />}\n *   footerRenderer={() => <Footer />}\n *   noResultRenderer={() => <NoResults />}\n * >\n *   {items.map(item => <ListItem key={item.id} {...item} />)}\n * </VariableHeightVirtualizer>\n * ```\n */\nconst VariableHeightVirtualizer = forwardRef<VirtualizerRef, VariableHeightVirtualizerProps>(\n  (\n    {\n      id,\n      children,\n      buffer = 15,\n      apiCallback,\n      loadedDataRange = {},\n      defaultItemHeight = 30,\n      totalItemCount,\n      maxItemsToPaint = 5000,\n      headerRenderer = null,\n      footerRenderer = null,\n      noResultRenderer = null,\n      itemContainerClass = '',\n      viewMaxHeight = null,\n      minHeight = 'auto',\n      isDataFetching = false,\n      minHeightWhenNoItemsRendered = 'auto'\n    },\n    ref: ForwardedRef<VirtualizerRef>\n  ) => {\n    const [startIndex, setStartIndex] = useState<number>(0);\n    const [endIndex, setEndIndex] = useState<number>(0);\n    const [scrollTop, setScrollTop] = useState<number>(0);\n    const [totalBufferHeight, setTotalBufferHeight] = useState<number>(0);\n    const [itemsHeight, setItemsHeight] = useState<ItemsHeight>({});\n    const [itemContainerHeight, setItemContainerHeight] = useState<number>(0);\n\n    const [countChangeTrigger, setCountChangeTrigger] = useState<number>(0);\n    const [itemHeightChangeTrigger, setItemHeightChangeTrigger] = useState<number>(0);\n    const [parentContainerDimensionChangeTrigger, setParentContainerDimensionChangeTrigger] =\n      useState<number>(0);\n\n    const parentContainerRef = useRef<HTMLDivElement>(null);\n    const bufferContainerRef = useRef<HTMLDivElement>(null);\n    const itemContainerRef = useRef<HTMLDivElement>(null);\n    const previousItemsHeightRef = useRef<ItemsHeight>({});\n    const previousFirstItemDataIndexRef = useRef<number | null>(null);\n\n    const [translate] = useTranslate();\n\n    const onParentContainerDimensionUpdate = useCallback(() => {\n      const { height: parentContainerHeight, width: parentContainerWidth } =\n        parentContainerRef.current?.getBoundingClientRect() ?? {};\n      // trigger virtualizer operations only when the container has some height and width\n      if (parentContainerHeight && parentContainerWidth) {\n        setParentContainerDimensionChangeTrigger(value => value + 1);\n      }\n    }, []);\n\n    const getParentContainer = useCallback(\n      (): HTMLDivElement | null => parentContainerRef.current,\n      []\n    );\n    useResizeObserver(getParentContainer, onParentContainerDimensionUpdate);\n\n    const { isInfiniteMode, virtualizedCount } = useVirtualizerItemCount({\n      totalItemCount,\n      startIndex,\n      endIndex,\n      loadedDataRange,\n      isDataFetching,\n      itemContainerRef,\n      children,\n      buffer,\n      countResetSignal: countChangeTrigger\n    });\n\n    const { triggerPagination, isForceRefreshedPagination } = usePagination({\n      apiCallback,\n      id,\n      buffer,\n      maxItemsToPaint,\n      startIndex,\n      endIndex,\n      virtualizedCount,\n      isInfiniteMode,\n      itemsHeight,\n      defaultItemHeight,\n      parentContainerRef,\n      itemContainerRef,\n      setStartIndex,\n      setEndIndex,\n      previousFirstItemDataIndexRef\n    });\n\n    // Listens to the scroll events and trigger pagination when more records are needed to enable smooth scrolling\n    useScroll({\n      parentContainerRef,\n      itemContainerRef,\n      onThresholdBreach: (sTop: number) => {\n        setScrollTop(sTop);\n        triggerPagination(sTop);\n      },\n      delay: 150\n    });\n\n    // Expose APIs to the consumer\n    useImperativeHandle(\n      ref,\n      (): VirtualizerRef => ({\n        scrollToTop: () => {\n          if (parentContainerRef.current) {\n            parentContainerRef.current.scrollTop = 0;\n            setScrollTop(0);\n\n            triggerPagination(0, true);\n          }\n        },\n        getParentContainer: () => parentContainerRef.current,\n        getBufferContainer: () => itemContainerRef.current,\n        notifyCountChange: () => setCountChangeTrigger(value => value + 1)\n      })\n    );\n\n    // Measure height of rendered items and cache the heights\n    useLayoutEffect(() => {\n      if (!itemContainerRef.current) return;\n\n      const newHeights = getChangedItemsHeight(\n        itemContainerRef.current,\n        itemsHeight,\n        defaultItemHeight\n      );\n      if (Object.keys(newHeights).length > 0) {\n        setItemsHeight((prev: ItemsHeight) => ({ ...prev, ...newHeights }));\n      }\n    }, [\n      startIndex,\n      itemsHeight,\n      children,\n      isDataFetching,\n      defaultItemHeight,\n      itemHeightChangeTrigger\n    ]);\n\n    // buffer height calculation\n    useLayoutEffect(() => {\n      const newBufferHeight = calculateTotalBufferHeight(\n        virtualizedCount,\n        itemsHeight,\n        defaultItemHeight\n      );\n\n      if (newBufferHeight !== totalBufferHeight) {\n        setTotalBufferHeight(newBufferHeight);\n      }\n    }, [itemsHeight, virtualizedCount, defaultItemHeight, totalBufferHeight]);\n\n    // itemContainer size and position adjustments\n    useLayoutEffect(() => {\n      if (!itemContainerRef.current) return;\n\n      setItemContainerHeight(\n        updateItemPositionStyles(itemContainerRef.current, itemsHeight, defaultItemHeight)\n      );\n    }, [children, itemsHeight, defaultItemHeight]);\n\n    // scroll position adjustment if rendered height is different than estimated height\n    useLayoutEffect(() => {\n      if (!parentContainerRef.current) return;\n\n      const atTop = parentContainerRef.current.scrollTop === 0;\n      if (!atTop) {\n        const delta = calculateCumulativeItemSizeChange(\n          startIndex,\n          previousFirstItemDataIndexRef.current,\n          itemsHeight,\n          previousItemsHeightRef.current,\n          defaultItemHeight\n        );\n\n        if (delta !== 0) {\n          parentContainerRef.current.scrollTop += delta;\n        }\n      }\n\n      previousItemsHeightRef.current = { ...itemsHeight };\n    }, [startIndex, itemsHeight, defaultItemHeight]);\n\n    // Adjust loader positions\n    useLoaderPositioning({\n      isDataFetching,\n      parentContainerRef,\n      itemContainerRef,\n      children,\n      itemsHeight,\n      defaultItemHeight\n    });\n\n    // Initial pagination trigger and subsequent triggers if the view is not completely filled\n    useEffect(() => {\n      // If consumer already has data for initial items, then no need to trigger pagination. Just hydrate the internal state in sync with existing data.\n      if (\n        !endIndex &&\n        loadedDataRange.startIndex !== undefined &&\n        loadedDataRange.startIndex >= 0 &&\n        loadedDataRange.endIndex !== undefined &&\n        loadedDataRange.endIndex >= 0\n      ) {\n        setStartIndex(loadedDataRange.startIndex);\n        setEndIndex(loadedDataRange.endIndex);\n        return;\n      }\n\n      // If the consumer doesn't have data or view not filled then trigger pagination\n      if (\n        !isDataFetching &&\n        (!endIndex ||\n          (itemContainerRef.current &&\n            parentContainerRef.current &&\n            isViewNotFilled(\n              virtualizedCount,\n              itemContainerRef.current,\n              parentContainerRef.current,\n              !!headerRenderer\n            )))\n      ) {\n        triggerPagination(scrollTop);\n      }\n    }, [\n      loadedDataRange,\n      scrollTop,\n      virtualizedCount,\n      endIndex,\n      triggerPagination,\n      parentContainerDimensionChangeTrigger,\n      isDataFetching,\n      headerRenderer\n    ]);\n\n    // Resize observer on items to track height changes\n    const onItemsHeightUpdate = useCallback(() => {\n      setItemHeightChangeTrigger(value => value + 1);\n    }, []);\n    useChildrenHeightResizeObserver({\n      childrenContainerRef: itemContainerRef,\n      children,\n      itemsHeight,\n      defaultItemHeight,\n      onItemsHeightUpdate\n    });\n\n    const maxHeight = useMemo((): string => getMaxHeight(viewMaxHeight), [viewMaxHeight]);\n\n    return (\n      <div\n        ref={parentContainerRef}\n        style={{\n          maxHeight,\n          minHeight: virtualizedCount === 0 ? minHeightWhenNoItemsRendered : minHeight,\n          overflowY: 'auto',\n          position: 'relative',\n          width: '100%'\n        }}\n        className='pContainer variableHeightVirtualizer'\n      >\n        {headerRenderer && headerRenderer()}\n        <div\n          className='bContainer'\n          ref={bufferContainerRef}\n          style={{ height: totalBufferHeight, position: 'relative' }}\n        >\n          {isDataFetching && !isForceRefreshedPagination && (\n            <StyledLoader\n              $style={{\n                top: '--above-loader-top',\n                left: '--loader-left'\n              }}\n            >\n              <Progress\n                className='above-loader'\n                placement='block'\n                tabIndex={0}\n                aria-label={translate('Loading more results')}\n              />\n            </StyledLoader>\n          )}\n\n          <div\n            ref={itemContainerRef}\n            style={{\n              position: 'absolute',\n              left: 0,\n              width: '100%',\n              height: `${itemContainerHeight}px`\n            }}\n            className={`${itemContainerClass} row-container`}\n          >\n            {children}\n          </div>\n\n          {isDataFetching && !isForceRefreshedPagination && (\n            <StyledLoader\n              $style={{\n                top: '--below-loader-top',\n                left: '--loader-left'\n              }}\n            >\n              <Progress\n                className='below-loader'\n                placement='block'\n                tabIndex={0}\n                aria-label={translate('Loading more results')}\n              />\n            </StyledLoader>\n          )}\n        </div>\n        {virtualizedCount === 0 && !isDataFetching && noResultRenderer ? noResultRenderer() : null}\n        {footerRenderer && footerRenderer()}\n      </div>\n    );\n  }\n);\n\nVariableHeightVirtualizer.displayName = 'VariableHeightVirtualizer';\n\nexport default VariableHeightVirtualizer;\n"]}

package/lib/Core/Components/Virtualise/VariableHeightVirtualizer/useChildrenHeightResizeObserver.d.ts

@@ -0,0 +1,22 @@
+import type { ReactNode, RefObject } from 'react';
+import type { ItemsHeight } from './VariableHeightVirtualizer';
+interface ChildrenHeightResizeObserverProps {
+    /** A ref to the container DOM element whose children will be observed. */
+    childrenContainerRef: RefObject<HTMLElement>;
+    /** The React children elements rendered inside the container. */
+    children: ReactNode;
+    /** Mapping of item indices and their actual height. */
+    itemsHeight: ItemsHeight;
+    /** The default height to use for items if not measured. */
+    defaultItemHeight: number;
+    /** Callback function invoked when any child's height changes. */
+    onItemsHeightUpdate: () => void;
+}
+/**
+ * Observes the height of child elements within a container and triggers a callback when any child's height changes.
+ *
+ * NOTE: Ensure that each child element has correct data attribute 'data-index'.
+ */
+export default function useChildrenHeightResizeObserver({ childrenContainerRef, children, itemsHeight, defaultItemHeight, onItemsHeightUpdate }: ChildrenHeightResizeObserverProps): void;
+export {};
+//# sourceMappingURL=useChildrenHeightResizeObserver.d.ts.map

package/lib/Core/Components/Virtualise/VariableHeightVirtualizer/useChildrenHeightResizeObserver.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useChildrenHeightResizeObserver.d.ts","sourceRoot":"","sources":["../../../../../Core/Components/Virtualise/VariableHeightVirtualizer/useChildrenHeightResizeObserver.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGlD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,6BAA6B,CAAC;AAE/D,UAAU,iCAAiC;IACzC,0EAA0E;IAC1E,oBAAoB,EAAE,SAAS,CAAC,WAAW,CAAC,CAAC;IAC7C,iEAAiE;IACjE,QAAQ,EAAE,SAAS,CAAC;IACpB,uDAAuD;IACvD,WAAW,EAAE,WAAW,CAAC;IACzB,2DAA2D;IAC3D,iBAAiB,EAAE,MAAM,CAAC;IAC1B,iEAAiE;IACjE,mBAAmB,EAAE,MAAM,IAAI,CAAC;CACjC;AAED;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,+BAA+B,CAAC,EACtD,oBAAoB,EACpB,QAAQ,EACR,WAAW,EACX,iBAAiB,EACjB,mBAAmB,EACpB,EAAE,iCAAiC,GAAG,IAAI,CAiC1C"}

package/lib/Core/Components/Virtualise/VariableHeightVirtualizer/useChildrenHeightResizeObserver.js

@@ -0,0 +1,38 @@
+import { useEffect } from 'react';
+import { getDataIndex } from './utils';
+/**
+ * Observes the height of child elements within a container and triggers a callback when any child's height changes.
+ *
+ * NOTE: Ensure that each child element has correct data attribute 'data-index'.
+ */
+export default function useChildrenHeightResizeObserver({ childrenContainerRef, children, itemsHeight, defaultItemHeight, onItemsHeightUpdate }) {
+    useEffect(() => {
+        if (!childrenContainerRef.current)
+            return;
+        const items = childrenContainerRef.current.children;
+        if (!items?.length)
+            return;
+        const resizeObserver = new ResizeObserver((entries) => {
+            let anyChildHeightChanged = false;
+            for (const entry of entries) {
+                const itemDataIndex = getDataIndex(entry.target);
+                if (itemDataIndex !== null) {
+                    const newHeight = entry.contentRect.height;
+                    if (itemsHeight[itemDataIndex] !== newHeight) {
+                        anyChildHeightChanged = true;
+                    }
+                }
+            }
+            if (anyChildHeightChanged) {
+                onItemsHeightUpdate();
+            }
+        });
+        Array.from(items).forEach((item) => {
+            resizeObserver.observe(item);
+        });
+        return () => {
+            resizeObserver.disconnect();
+        };
+    }, [children, itemsHeight, defaultItemHeight]);
+}
+//# sourceMappingURL=useChildrenHeightResizeObserver.js.map

package/lib/Core/Components/Virtualise/VariableHeightVirtualizer/useChildrenHeightResizeObserver.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useChildrenHeightResizeObserver.js","sourceRoot":"","sources":["../../../../../Core/Components/Virtualise/VariableHeightVirtualizer/useChildrenHeightResizeObserver.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGlC,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAgBvC;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,+BAA+B,CAAC,EACtD,oBAAoB,EACpB,QAAQ,EACR,WAAW,EACX,iBAAiB,EACjB,mBAAmB,EACe;IAClC,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,oBAAoB,CAAC,OAAO;YAAE,OAAO;QAE1C,MAAM,KAAK,GAAG,oBAAoB,CAAC,OAAO,CAAC,QAAQ,CAAC;QACpD,IAAI,CAAC,KAAK,EAAE,MAAM;YAAE,OAAO;QAE3B,MAAM,cAAc,GAAG,IAAI,cAAc,CAAC,CAAC,OAA8B,EAAE,EAAE;YAC3E,IAAI,qBAAqB,GAAG,KAAK,CAAC;YAElC,KAAK,MAAM,KAAK,IAAI,OAAO,EAAE,CAAC;gBAC5B,MAAM,aAAa,GAAG,YAAY,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;gBACjD,IAAI,aAAa,KAAK,IAAI,EAAE,CAAC;oBAC3B,MAAM,SAAS,GAAG,KAAK,CAAC,WAAW,CAAC,MAAM,CAAC;oBAC3C,IAAI,WAAW,CAAC,aAAa,CAAC,KAAK,SAAS,EAAE,CAAC;wBAC7C,qBAAqB,GAAG,IAAI,CAAC;oBAC/B,CAAC;gBACH,CAAC;YACH,CAAC;YAED,IAAI,qBAAqB,EAAE,CAAC;gBAC1B,mBAAmB,EAAE,CAAC;YACxB,CAAC;QACH,CAAC,CAAC,CAAC;QAEH,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,OAAO,CAAC,CAAC,IAAa,EAAE,EAAE;YAC1C,cAAc,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;QAC/B,CAAC,CAAC,CAAC;QAEH,OAAO,GAAG,EAAE;YACV,cAAc,CAAC,UAAU,EAAE,CAAC;QAC9B,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,QAAQ,EAAE,WAAW,EAAE,iBAAiB,CAAC,CAAC,CAAC;AACjD,CAAC","sourcesContent":["import { useEffect } from 'react';\nimport type { ReactNode, RefObject } from 'react';\n\nimport { getDataIndex } from './utils';\nimport type { ItemsHeight } from './VariableHeightVirtualizer';\n\ninterface ChildrenHeightResizeObserverProps {\n  /** A ref to the container DOM element whose children will be observed. */\n  childrenContainerRef: RefObject<HTMLElement>;\n  /** The React children elements rendered inside the container. */\n  children: ReactNode;\n  /** Mapping of item indices and their actual height. */\n  itemsHeight: ItemsHeight;\n  /** The default height to use for items if not measured. */\n  defaultItemHeight: number;\n  /** Callback function invoked when any child's height changes. */\n  onItemsHeightUpdate: () => void;\n}\n\n/**\n * Observes the height of child elements within a container and triggers a callback when any child's height changes.\n *\n * NOTE: Ensure that each child element has correct data attribute 'data-index'.\n */\nexport default function useChildrenHeightResizeObserver({\n  childrenContainerRef,\n  children,\n  itemsHeight,\n  defaultItemHeight,\n  onItemsHeightUpdate\n}: ChildrenHeightResizeObserverProps): void {\n  useEffect(() => {\n    if (!childrenContainerRef.current) return;\n\n    const items = childrenContainerRef.current.children;\n    if (!items?.length) return;\n\n    const resizeObserver = new ResizeObserver((entries: ResizeObserverEntry[]) => {\n      let anyChildHeightChanged = false;\n\n      for (const entry of entries) {\n        const itemDataIndex = getDataIndex(entry.target);\n        if (itemDataIndex !== null) {\n          const newHeight = entry.contentRect.height;\n          if (itemsHeight[itemDataIndex] !== newHeight) {\n            anyChildHeightChanged = true;\n          }\n        }\n      }\n\n      if (anyChildHeightChanged) {\n        onItemsHeightUpdate();\n      }\n    });\n\n    Array.from(items).forEach((item: Element) => {\n      resizeObserver.observe(item);\n    });\n\n    return () => {\n      resizeObserver.disconnect();\n    };\n  }, [children, itemsHeight, defaultItemHeight]);\n}\n"]}

package/lib/Core/Components/Virtualise/VariableHeightVirtualizer/useLoaderPositioning.d.ts

@@ -0,0 +1,22 @@
+import type { RefObject, ReactNode } from 'react';
+import type { ItemsHeight } from './VariableHeightVirtualizer';
+interface LoaderPositioningProps {
+    /** Ref to the parent scrollable container element. */
+    parentContainerRef: RefObject<HTMLElement>;
+    /** Ref to the container holding the rendered items. */
+    itemContainerRef: RefObject<HTMLElement>;
+    /** Indicates if data is currently being fetched. */
+    isDataFetching: boolean;
+    /** The React children elements rendered inside the container. */
+    children: ReactNode;
+    /** Mapping of item indices and their actual height. */
+    itemsHeight: ItemsHeight;
+    /** The default height to use for items if not measured. */
+    defaultItemHeight: number;
+}
+/**
+ * Calculates the positioning of loading indicators.
+ */
+export default function useLoaderPositioning({ parentContainerRef, itemContainerRef, isDataFetching, children, itemsHeight, defaultItemHeight }: LoaderPositioningProps): void;
+export {};
+//# sourceMappingURL=useLoaderPositioning.d.ts.map

package/lib/Core/Components/Virtualise/VariableHeightVirtualizer/useLoaderPositioning.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useLoaderPositioning.d.ts","sourceRoot":"","sources":["../../../../../Core/Components/Virtualise/VariableHeightVirtualizer/useLoaderPositioning.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAKlD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,6BAA6B,CAAC;AAE/D,UAAU,sBAAsB;IAC9B,sDAAsD;IACtD,kBAAkB,EAAE,SAAS,CAAC,WAAW,CAAC,CAAC;IAC3C,uDAAuD;IACvD,gBAAgB,EAAE,SAAS,CAAC,WAAW,CAAC,CAAC;IACzC,oDAAoD;IACpD,cAAc,EAAE,OAAO,CAAC;IACxB,iEAAiE;IACjE,QAAQ,EAAE,SAAS,CAAC;IACpB,uDAAuD;IACvD,WAAW,EAAE,WAAW,CAAC;IACzB,2DAA2D;IAC3D,iBAAiB,EAAE,MAAM,CAAC;CAC3B;AAED;;GAEG;AACH,MAAM,CAAC,OAAO,UAAU,oBAAoB,CAAC,EAC3C,kBAAkB,EAClB,gBAAgB,EAChB,cAAc,EACd,QAAQ,EACR,WAAW,EACX,iBAAiB,EAClB,EAAE,sBAAsB,QA2CxB"}

package/lib/Core/Components/Virtualise/VariableHeightVirtualizer/useLoaderPositioning.js

@@ -0,0 +1,45 @@
+import { useEffect, useLayoutEffect, useState } from 'react';
+import useThrottle from '../../../Hooks/useThrottle';
+import { getDataIndex } from './utils';
+/**
+ * Calculates the positioning of loading indicators.
+ */
+export default function useLoaderPositioning({ parentContainerRef, itemContainerRef, isDataFetching, children, itemsHeight, defaultItemHeight }) {
+    const [scrollLeft, setScrollLeft] = useState(0);
+    useLayoutEffect(() => {
+        if (!isDataFetching || !itemContainerRef.current || !parentContainerRef.current)
+            return;
+        const containerEl = parentContainerRef.current;
+        const items = itemContainerRef.current.children;
+        if (!items?.length)
+            return;
+        const topLoaderHeight = 80;
+        const topOffset = itemContainerRef.current.offsetTop || 0;
+        const firstItemDataIndex = getDataIndex(items[0]);
+        if (firstItemDataIndex === null)
+            return;
+        let itemContainerBottomPosition = topOffset;
+        for (let i = 0; i < items.length; i += 1) {
+            itemContainerBottomPosition += itemsHeight[firstItemDataIndex + i] ?? defaultItemHeight;
+        }
+        containerEl.style.setProperty('--above-loader-top', `${topOffset - topLoaderHeight}px`);
+        containerEl.style.setProperty('--below-loader-top', `${itemContainerBottomPosition}px`);
+    }, [isDataFetching, children, itemsHeight, defaultItemHeight, getDataIndex]);
+    useThrottle(scrollLeft, () => {
+        const containerEl = parentContainerRef.current;
+        if (!containerEl)
+            return;
+        containerEl.style.setProperty('--loader-left', `${containerEl.scrollLeft}px`);
+    });
+    useEffect(() => {
+        const containerEl = parentContainerRef.current;
+        if (!containerEl)
+            return;
+        const scrollHandler = () => setScrollLeft(containerEl.scrollLeft);
+        containerEl.addEventListener('scroll', scrollHandler, { passive: true });
+        return () => {
+            containerEl.removeEventListener('scroll', scrollHandler);
+        };
+    }, [parentContainerRef]);
+}
+//# sourceMappingURL=useLoaderPositioning.js.map

package/lib/Core/Components/Virtualise/VariableHeightVirtualizer/useLoaderPositioning.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useLoaderPositioning.js","sourceRoot":"","sources":["../../../../../Core/Components/Virtualise/VariableHeightVirtualizer/useLoaderPositioning.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,eAAe,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAG7D,OAAO,WAAW,MAAM,4BAA4B,CAAC;AAErD,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAkBvC;;GAEG;AACH,MAAM,CAAC,OAAO,UAAU,oBAAoB,CAAC,EAC3C,kBAAkB,EAClB,gBAAgB,EAChB,cAAc,EACd,QAAQ,EACR,WAAW,EACX,iBAAiB,EACM;IACvB,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;IAEhD,eAAe,CAAC,GAAG,EAAE;QACnB,IAAI,CAAC,cAAc,IAAI,CAAC,gBAAgB,CAAC,OAAO,IAAI,CAAC,kBAAkB,CAAC,OAAO;YAAE,OAAO;QAExF,MAAM,WAAW,GAAG,kBAAkB,CAAC,OAAO,CAAC;QAC/C,MAAM,KAAK,GAAG,gBAAgB,CAAC,OAAO,CAAC,QAAQ,CAAC;QAChD,IAAI,CAAC,KAAK,EAAE,MAAM;YAAE,OAAO;QAE3B,MAAM,eAAe,GAAG,EAAE,CAAC;QAC3B,MAAM,SAAS,GAAG,gBAAgB,CAAC,OAAO,CAAC,SAAS,IAAI,CAAC,CAAC;QAE1D,MAAM,kBAAkB,GAAG,YAAY,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC;QAClD,IAAI,kBAAkB,KAAK,IAAI;YAAE,OAAO;QAExC,IAAI,2BAA2B,GAAG,SAAS,CAAC;QAC5C,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,KAAK,CAAC,MAAM,EAAE,CAAC,IAAI,CAAC,EAAE,CAAC;YACzC,2BAA2B,IAAI,WAAW,CAAC,kBAAkB,GAAG,CAAC,CAAC,IAAI,iBAAiB,CAAC;QAC1F,CAAC;QAED,WAAW,CAAC,KAAK,CAAC,WAAW,CAAC,oBAAoB,EAAE,GAAG,SAAS,GAAG,eAAe,IAAI,CAAC,CAAC;QACxF,WAAW,CAAC,KAAK,CAAC,WAAW,CAAC,oBAAoB,EAAE,GAAG,2BAA2B,IAAI,CAAC,CAAC;IAC1F,CAAC,EAAE,CAAC,cAAc,EAAE,QAAQ,EAAE,WAAW,EAAE,iBAAiB,EAAE,YAAY,CAAC,CAAC,CAAC;IAE7E,WAAW,CAAC,UAAU,EAAE,GAAG,EAAE;QAC3B,MAAM,WAAW,GAAG,kBAAkB,CAAC,OAAO,CAAC;QAC/C,IAAI,CAAC,WAAW;YAAE,OAAO;QAEzB,WAAW,CAAC,KAAK,CAAC,WAAW,CAAC,eAAe,EAAE,GAAG,WAAW,CAAC,UAAU,IAAI,CAAC,CAAC;IAChF,CAAC,CAAC,CAAC;IAEH,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,WAAW,GAAG,kBAAkB,CAAC,OAAO,CAAC;QAC/C,IAAI,CAAC,WAAW;YAAE,OAAO;QAEzB,MAAM,aAAa,GAAG,GAAG,EAAE,CAAC,aAAa,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;QAClE,WAAW,CAAC,gBAAgB,CAAC,QAAQ,EAAE,aAAa,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;QAEzE,OAAO,GAAG,EAAE;YACV,WAAW,CAAC,mBAAmB,CAAC,QAAQ,EAAE,aAAa,CAAC,CAAC;QAC3D,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,kBAAkB,CAAC,CAAC,CAAC;AAC3B,CAAC","sourcesContent":["import { useEffect, useLayoutEffect, useState } from 'react';\nimport type { RefObject, ReactNode } from 'react';\n\nimport useThrottle from '../../../Hooks/useThrottle';\n\nimport { getDataIndex } from './utils';\nimport type { ItemsHeight } from './VariableHeightVirtualizer';\n\ninterface LoaderPositioningProps {\n  /** Ref to the parent scrollable container element. */\n  parentContainerRef: RefObject<HTMLElement>;\n  /** Ref to the container holding the rendered items. */\n  itemContainerRef: RefObject<HTMLElement>;\n  /** Indicates if data is currently being fetched. */\n  isDataFetching: boolean;\n  /** The React children elements rendered inside the container. */\n  children: ReactNode;\n  /** Mapping of item indices and their actual height. */\n  itemsHeight: ItemsHeight;\n  /** The default height to use for items if not measured. */\n  defaultItemHeight: number;\n}\n\n/**\n * Calculates the positioning of loading indicators.\n */\nexport default function useLoaderPositioning({\n  parentContainerRef,\n  itemContainerRef,\n  isDataFetching,\n  children,\n  itemsHeight,\n  defaultItemHeight\n}: LoaderPositioningProps) {\n  const [scrollLeft, setScrollLeft] = useState(0);\n\n  useLayoutEffect(() => {\n    if (!isDataFetching || !itemContainerRef.current || !parentContainerRef.current) return;\n\n    const containerEl = parentContainerRef.current;\n    const items = itemContainerRef.current.children;\n    if (!items?.length) return;\n\n    const topLoaderHeight = 80;\n    const topOffset = itemContainerRef.current.offsetTop || 0;\n\n    const firstItemDataIndex = getDataIndex(items[0]);\n    if (firstItemDataIndex === null) return;\n\n    let itemContainerBottomPosition = topOffset;\n    for (let i = 0; i < items.length; i += 1) {\n      itemContainerBottomPosition += itemsHeight[firstItemDataIndex + i] ?? defaultItemHeight;\n    }\n\n    containerEl.style.setProperty('--above-loader-top', `${topOffset - topLoaderHeight}px`);\n    containerEl.style.setProperty('--below-loader-top', `${itemContainerBottomPosition}px`);\n  }, [isDataFetching, children, itemsHeight, defaultItemHeight, getDataIndex]);\n\n  useThrottle(scrollLeft, () => {\n    const containerEl = parentContainerRef.current;\n    if (!containerEl) return;\n\n    containerEl.style.setProperty('--loader-left', `${containerEl.scrollLeft}px`);\n  });\n\n  useEffect(() => {\n    const containerEl = parentContainerRef.current;\n    if (!containerEl) return;\n\n    const scrollHandler = () => setScrollLeft(containerEl.scrollLeft);\n    containerEl.addEventListener('scroll', scrollHandler, { passive: true });\n\n    return () => {\n      containerEl.removeEventListener('scroll', scrollHandler);\n    };\n  }, [parentContainerRef]);\n}\n"]}

package/lib/Core/Components/Virtualise/VariableHeightVirtualizer/usePagination.d.ts

@@ -0,0 +1,49 @@
+import type { MutableRefObject, RefObject } from 'react';
+import type { ItemsHeight, VariableHeightVirtualizerProps } from './VariableHeightVirtualizer';
+interface PaginationParams {
+    /** Callback to fetch paginated data. */
+    apiCallback: VariableHeightVirtualizerProps['apiCallback'];
+    /** Unique identifier for the virtualizer instance. */
+    id: string;
+    /** Number of items to buffer before/after the visible range. */
+    buffer: number;
+    /** Maximum number of items to render at once. */
+    maxItemsToPaint: number;
+    /** Current start index of the visible items. */
+    startIndex: number;
+    /** Current end index of the visible items. */
+    endIndex: number;
+    /** Total number of items in the virtualized list. */
+    virtualizedCount: number;
+    /** Whether infinite scrolling mode is enabled. */
+    isInfiniteMode: boolean;
+    /** Mapping of item indices and their actual height. */
+    itemsHeight: ItemsHeight;
+    /** Default height for items if not measured. */
+    defaultItemHeight: number;
+    /** Ref to the parent scrollable container element. */
+    parentContainerRef: RefObject<HTMLElement>;
+    /** Ref to the container holding the rendered items. */
+    itemContainerRef: RefObject<HTMLElement>;
+    /** Setter for the start index. */
+    setStartIndex: (v: number) => void;
+    /** Setter for the end index. */
+    setEndIndex: (v: number) => void;
+    /** Ref to track the previous first item's data index. */
+    previousFirstItemDataIndexRef: MutableRefObject<number | null>;
+}
+/**
+ * Calculates the indices of items to render based on the current scroll position,
+ * buffer, and virtualization settings. It triggers data fetching via the provided `apiCallback`
+ * when pagination boundaries change or a force refresh is requested.
+ *
+ * @returns An object containing:
+ * - `triggerPagination`: Function to recalculate pagination indices and trigger data fetching.
+ * - `isForceRefreshedPagination`: Boolean indicating if the last pagination was force-refreshed.
+ */
+export default function usePagination({ apiCallback, id, buffer, maxItemsToPaint, startIndex, endIndex, virtualizedCount, isInfiniteMode, itemsHeight, defaultItemHeight, parentContainerRef, itemContainerRef, setStartIndex, setEndIndex, previousFirstItemDataIndexRef }: PaginationParams): {
+    triggerPagination: (currentScrollTop: number, forceRefresh?: boolean) => void;
+    isForceRefreshedPagination: boolean;
+};
+export {};
+//# sourceMappingURL=usePagination.d.ts.map

package/lib/Core/Components/Virtualise/VariableHeightVirtualizer/usePagination.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePagination.d.ts","sourceRoot":"","sources":["../../../../../Core/Components/Virtualise/VariableHeightVirtualizer/usePagination.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,gBAAgB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEzD,OAAO,KAAK,EAAE,WAAW,EAAE,8BAA8B,EAAE,MAAM,6BAA6B,CAAC;AAG/F,UAAU,gBAAgB;IACxB,wCAAwC;IACxC,WAAW,EAAE,8BAA8B,CAAC,aAAa,CAAC,CAAC;IAC3D,sDAAsD;IACtD,EAAE,EAAE,MAAM,CAAC;IACX,gEAAgE;IAChE,MAAM,EAAE,MAAM,CAAC;IACf,iDAAiD;IACjD,eAAe,EAAE,MAAM,CAAC;IACxB,gDAAgD;IAChD,UAAU,EAAE,MAAM,CAAC;IACnB,8CAA8C;IAC9C,QAAQ,EAAE,MAAM,CAAC;IACjB,qDAAqD;IACrD,gBAAgB,EAAE,MAAM,CAAC;IACzB,kDAAkD;IAClD,cAAc,EAAE,OAAO,CAAC;IACxB,uDAAuD;IACvD,WAAW,EAAE,WAAW,CAAC;IACzB,gDAAgD;IAChD,iBAAiB,EAAE,MAAM,CAAC;IAC1B,sDAAsD;IACtD,kBAAkB,EAAE,SAAS,CAAC,WAAW,CAAC,CAAC;IAC3C,uDAAuD;IACvD,gBAAgB,EAAE,SAAS,CAAC,WAAW,CAAC,CAAC;IACzC,kCAAkC;IAClC,aAAa,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,gCAAgC;IAChC,WAAW,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,yDAAyD;IACzD,6BAA6B,EAAE,gBAAgB,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC;CAChE;AAED;;;;;;;;GAQG;AACH,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EACpC,WAAW,EACX,EAAE,EACF,MAAM,EACN,eAAe,EACf,UAAU,EACV,QAAQ,EACR,gBAAgB,EAChB,cAAc,EACd,WAAW,EACX,iBAAiB,EACjB,kBAAkB,EAClB,gBAAgB,EAChB,aAAa,EACb,WAAW,EACX,6BAA6B,EAC9B,EAAE,gBAAgB;0CAII,MAAM,iBAAiB,OAAO;;EAgDpD"}