@candidstartup/react-virtual-scroll 0.5.0 → 0.6.0

package/dist/index.js

@@ -1,34 +1,72 @@
-import { jsx } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import React, { useState, createRef, useRef, useEffect, Fragment } from 'react';
 
-function getRangeToRender(itemCount, itemOffsetMapping, clientExtent, scrollOffset) {
-    if (itemCount == 0) {
-        return [0, 0, []];
-    }
-    let [itemIndex, startOffset] = itemOffsetMapping.offsetToItem(scrollOffset);
-    itemIndex = Math.max(0, Math.min(itemCount - 1, itemIndex));
-    const endOffset = scrollOffset + clientExtent;
-    const overscanBackward = 1;
-    const overscanForward = 1;
-    for (let step = 0; step < overscanBackward && itemIndex > 0; step++) {
-        itemIndex--;
-        startOffset -= itemOffsetMapping.itemSize(itemIndex);
-    }
-    const startIndex = itemIndex;
-    let offset = startOffset;
-    const sizes = [];
-    while (offset < endOffset && itemIndex < itemCount) {
-        const size = itemOffsetMapping.itemSize(itemIndex);
-        sizes.push(size);
-        offset += size;
-        itemIndex++;
-    }
-    for (let step = 0; step < overscanForward && itemIndex < itemCount; step++) {
-        const size = itemOffsetMapping.itemSize(itemIndex);
-        sizes.push(size);
-        itemIndex++;
-    }
-    return [startIndex, startOffset, sizes];
+const defaultContainerRender = ({ ...rest }, ref) => (jsx("div", { ref: ref, ...rest }));
+/**
+ * Wrapper around a div used by other components in {@link @candidstartup/react-virtual-scroll!}. Most props are passed through to the div. Use the
+ * {@link VirtualContainerComponentProps.render} prop to override the default behavior.
+ *
+ * @group Components
+ */
+const VirtualContainer = React.forwardRef(function VirtualContainer({ render = defaultContainerRender, ...rest }, ref) {
+    return render(rest, ref);
+});
+
+/**
+ * HOC that calculates the size available to it and makes the computed size available to children.
+ * The size available depends on DOM layout and style applied wherever the AutoSizer finds itself.
+ * You will probably want to pass something appropriate via the `className` or `style` props.
+ *
+ * Accepts props defined by {@link AutoSizerProps}.
+ * You must pass a single instance of {@link AutoSizerRender} as a child.
+ * @group Components
+ */
+function AutoSizer(props) {
+    const { children, className, style } = props;
+    // Using separate primitive states rather than one composite so that React
+    // can detect duplicates values and bail out of redundant renders.
+    const [width, setWidth] = React.useState(0);
+    const [height, setHeight] = React.useState(0);
+    const ref = React.useRef(null);
+    // Make sure resize callback is a stable value so we're not constantly
+    // creating and disconnecting resize observers.
+    const resizeCallback = React.useCallback((entries) => {
+        entries.forEach(entry => {
+            // Context box sizes can contain fractional values while clientWidth
+            // and clientHeight properties are always rounded to nearest integer.
+            // Always use integer values to avoid confusion.
+            const newWidth = Math.round(entry.contentBoxSize[0].inlineSize);
+            setWidth(newWidth);
+            const newHeight = Math.round(entry.borderBoxSize[0].blockSize);
+            setHeight(newHeight);
+        });
+    }, []);
+    // Expect effect to run only on initial mount
+    React.useLayoutEffect(() => {
+        const div = ref.current;
+        /* istanbul ignore if*/
+        if (!div)
+            return;
+        // Size on initial mount
+        setHeight(div.clientHeight);
+        setWidth(div.clientWidth);
+        // Updates size on any subsequent resize. Only available in browser
+        // environment so avoid crashing out when server side rendering, or
+        // running unit test without ResizeObserver being mocked. 
+        if (typeof ResizeObserver !== 'undefined') {
+            const resizeObserver = new ResizeObserver(resizeCallback);
+            resizeObserver.observe(div);
+            return () => { resizeObserver.disconnect(); };
+        }
+    }, [resizeCallback]);
+    // No point rendering children until we've measured size and found a usable area
+    const renderChildren = height > 0 && width > 0;
+    // Ensure that size is driven only by parent. Wrapping child in a zero sized inner div
+    // which it can overflow stops child's size having any impact on size of outer div. 
+    // Otherwise can end up in infinite loop if child makes itself bigger than the 
+    // actual width and height we pass to it. That could be because child has 
+    // padding/borders/margins or because child renders itself bigger than size it's given.
+    return (jsx("div", { ref: ref, className: className, style: style, children: jsx("div", { style: { overflow: 'visible', width: 0, height: 0 }, children: renderChildren && children({ height, width }) }) }));
 }
 
 // Max size that is safe across all browsers (Firefox is the limiting factor)
@@ -206,40 +244,58 @@ function useIsScrolling(element = window) {
     return scrollCount > 0;
 }
 
-const defaultItemKey$1 = (rowIndex, columnIndex, _data) => `${rowIndex}:${columnIndex}`;
-const Inner$1 = React.forwardRef(function VirtualGridInner({ render, ...rest }, ref) {
-    return render(rest, ref);
-});
-function defaultInnerRender$1({ ...rest }, ref) {
-    return jsx("div", { ref: ref, ...rest });
-}
-const Outer$1 = React.forwardRef(function VirtualGridOuter({ render, ...rest }, ref) {
-    return render(rest, ref);
-});
-function defaultOuterRender$1({ ...rest }, ref) {
-    return jsx("div", { ref: ref, ...rest });
+/**
+ * Returns the offset needed to scroll in one dimension for a specified range
+ *
+ * Used internally to implement {@link VirtualScrollProxy.scrollToArea}. Can be used directly for
+ * advanced customization scenarios.
+ */
+function getOffsetToScrollRange(offset, size, clientExtent, scrollOffset, option) {
+    if (offset === undefined)
+        return undefined;
+    if (option != 'visible')
+        return offset;
+    // Start of item offscreen before start of viewport?
+    if (offset < scrollOffset)
+        return offset;
+    size = size || 0;
+    // Already completely visible?
+    const endOffset = offset + size;
+    const endViewport = scrollOffset + clientExtent;
+    if (endOffset <= endViewport)
+        return undefined;
+    // Item offscreen past end of viewport
+    // Item bigger than viewport? Make sure start is in view
+    if (size > clientExtent)
+        return offset;
+    // Scroll so end of item aligns with end of viewport
+    return offset - clientExtent + size;
 }
+
 // Using a named function rather than => so that the name shows up in React Developer Tools
 /**
- * Virtual Scrolling Grid
+ * Customizable Virtual Scrolling Component
  *
- * Accepts props defined by {@link VirtualGridProps}.
- * Refs are forwarded to {@link VirtualGridProxy}.
- * You must pass a single instance of {@link VirtualGridItem} as a child.
+ * Allows user to scroll over a virtual area `scrollHeight` x `scrollWidth` pixels.
+ * Use `onScroll` to track scroll state and `innerRender` to render scroll state specific content into the viewport
+ *
+ * Accepts props defined by {@link VirtualScrollProps}.
+ * Refs are forwarded to {@link VirtualScrollProxy}.
  * @group Components
  */
-const VirtualGrid = React.forwardRef(function VirtualGrid(props, ref) {
-    const { width, height, rowCount, rowOffsetMapping, columnCount, columnOffsetMapping, children, className, innerClassName, itemData = undefined, itemKey = defaultItemKey$1, onScroll: onScrollCallback, useIsScrolling: useIsScrolling$1 = false } = props;
-    // Total size is same as offset to item one off the end
-    const totalRowSize = rowOffsetMapping.itemOffset(rowCount);
-    const totalColumnSize = columnOffsetMapping.itemOffset(columnCount);
+const VirtualScroll = React.forwardRef(function VirtualScroll(props, ref) {
+    const { width, height, scrollWidth = 0, scrollHeight = 0, className, innerClassName, children, onScroll: onScrollCallback, useIsScrolling: useIsScrolling$1 = false, innerRender, outerRender } = props;
     const outerRef = React.useRef(null);
-    const { scrollOffset: scrollRowOffset, renderOffset: renderRowOffset, renderSize: renderRowSize, onScroll: onScrollRow, doScrollTo: doScrollToRow } = useVirtualScroll(totalRowSize, props.maxCssSize, props.minNumPages);
-    const { scrollOffset: scrollColumnOffset, renderOffset: renderColumnOffset, renderSize: renderColumnSize, onScroll: onScrollColumn, doScrollTo: doScrollToColumn } = useVirtualScroll(totalColumnSize, props.maxCssSize, props.minNumPages);
-    const isScrolling = useIsScrolling(outerRef);
+    const { scrollOffset: scrollRowOffset, renderOffset: renderRowOffset, renderSize: renderRowSize, onScroll: onScrollRow, doScrollTo: doScrollToRow } = useVirtualScroll(scrollHeight, props.maxCssSize, props.minNumPages);
+    const currentVerticalOffset = scrollRowOffset + renderRowOffset;
+    const { scrollOffset: scrollColOffset, renderOffset: renderColOffset, renderSize: renderColumnSize, onScroll: onScrollColumn, doScrollTo: doScrollToColumn } = useVirtualScroll(scrollWidth, props.maxCssSize, props.minNumPages);
+    const currentHorizontalOffset = scrollColOffset + renderColOffset;
+    const isActuallyScrolling = useIsScrolling(outerRef);
     React.useImperativeHandle(ref, () => {
         return {
             scrollTo(rowOffset, columnOffset) {
+                if (rowOffset === undefined && columnOffset === undefined)
+                    return;
                 const outer = outerRef.current;
                 /* istanbul ignore else */
                 if (outer) {
@@ -251,10 +307,14 @@ const VirtualGrid = React.forwardRef(function VirtualGrid(props, ref) {
                     outer.scrollTo(options);
                 }
             },
-            scrollToItem(rowIndex, columnIndex) {
-                const rowOffset = (rowIndex != undefined) ? rowOffsetMapping.itemOffset(rowIndex) : undefined;
-                const columnOffset = (columnIndex != undefined) ? columnOffsetMapping.itemOffset(columnIndex) : undefined;
-                this.scrollTo(rowOffset, columnOffset);
+            scrollToArea(verticalOffset, verticalSize, horizontalOffset, horizontalSize, option) {
+                const outer = outerRef.current;
+                /* istanbul ignore if*/
+                if (!outer)
+                    return;
+                const rowOffset = getOffsetToScrollRange(verticalOffset, verticalSize, outer.clientHeight, currentVerticalOffset, option);
+                const colOffset = getOffsetToScrollRange(horizontalOffset, horizontalSize, outer.clientWidth, currentHorizontalOffset, option);
+                this.scrollTo(rowOffset, colOffset);
             },
             get clientWidth() {
                 return outerRef.current ? outerRef.current.clientWidth : /* istanbul ignore next */ 0;
@@ -263,7 +323,7 @@ const VirtualGrid = React.forwardRef(function VirtualGrid(props, ref) {
                 return outerRef.current ? outerRef.current.clientHeight : /* istanbul ignore next */ 0;
             }
         };
-    }, [rowOffsetMapping, columnOffsetMapping, doScrollToRow, doScrollToColumn]);
+    }, [doScrollToRow, doScrollToColumn, currentVerticalOffset, currentHorizontalOffset]);
     function onScroll(event) {
         const { clientWidth, clientHeight, scrollWidth, scrollHeight, scrollLeft, scrollTop } = event.currentTarget;
         const [newScrollTop, newRowScrollState] = onScrollRow(clientHeight, scrollHeight, scrollTop);
@@ -272,113 +332,263 @@ const VirtualGrid = React.forwardRef(function VirtualGrid(props, ref) {
             outerRef.current.scrollTo(newScrollLeft, newScrollTop);
         onScrollCallback?.(newRowScrollState.scrollOffset + newRowScrollState.renderOffset, newColumnScrollState.scrollOffset + newColumnScrollState.renderOffset, newRowScrollState, newColumnScrollState);
     }
-    const [startRowIndex, startRowOffset, rowSizes] = getRangeToRender(rowCount, rowOffsetMapping, height, scrollRowOffset + renderRowOffset);
-    const [startColumnIndex, startColumnOffset, columnSizes] = getRangeToRender(columnCount, columnOffsetMapping, width, scrollColumnOffset + renderColumnOffset);
+    const isScrolling = useIsScrolling$1 ? isActuallyScrolling : undefined;
+    return (jsxs(VirtualContainer, { className: className, render: outerRender, onScroll: onScroll, ref: outerRef, style: { position: "relative", height, width, overflow: "auto", willChange: "transform" }, children: [jsx(VirtualContainer, { className: innerClassName, render: innerRender, style: { zIndex: 1, position: 'sticky', top: 0, left: 0, width: '100%', height: '100%' }, children: children({ isScrolling }) }), jsx("div", { style: { position: 'absolute', top: 0, left: 0,
+                    height: scrollHeight ? renderRowSize : '100%',
+                    width: scrollWidth ? renderColumnSize : '100%' } })] }));
+});
+
+function getRangeToRender(itemCount, itemOffsetMapping, clientExtent, scrollOffset) {
+    if (itemCount == 0) {
+        return [0, 0, 0, []];
+    }
+    // Negative offset equivalent to reducing the size of the window (possibly down to nothing)
+    if (scrollOffset < 0) {
+        clientExtent += scrollOffset;
+        scrollOffset = 0;
+    }
+    if (clientExtent <= 0) {
+        return [0, 0, 0, []];
+    }
+    const [baseIndex, startOffset] = itemOffsetMapping.offsetToItem(scrollOffset);
+    if (baseIndex >= itemCount) {
+        return [0, 0, 0, []];
+    }
+    let itemIndex = Math.max(0, Math.min(itemCount - 1, baseIndex));
+    const endOffset = scrollOffset + clientExtent;
+    const startIndex = itemIndex;
+    let offset = startOffset;
+    const sizes = [];
+    let totalSize = 0;
+    while (offset < endOffset && itemIndex < itemCount) {
+        const size = itemOffsetMapping.itemSize(itemIndex);
+        sizes.push(size);
+        totalSize += size;
+        offset += size;
+        itemIndex++;
+    }
+    return [startIndex, startOffset, totalSize, sizes];
+}
+function formatRepeat(repeat, size) {
+    return (repeat == 1) ? `${size}px` : `repeat(${repeat},${size}px)`;
+}
+function join(a, s) {
+    return a ? a + ' ' + s : s;
+}
+function getGridTemplate(sizes) {
+    const count = sizes.length;
+    if (count == 0)
+        return undefined;
+    let ret = undefined;
+    let lastSize = sizes[0];
+    let repeat = 1;
+    for (let i = 1; i < count; i++) {
+        const size = sizes[i];
+        if (size == lastSize) {
+            repeat++;
+        }
+        else {
+            const s = formatRepeat(repeat, lastSize);
+            ret = join(ret, s);
+            lastSize = size;
+            repeat = 1;
+        }
+    }
+    const s = formatRepeat(repeat, lastSize);
+    return join(ret, s);
+}
+
+const defaultItemKey$1 = (index, _data) => index;
+const boxStyle$1 = { boxSizing: 'border-box' };
+/**
+ * Displays a window onto the contents of a virtualized list starting from `offset`.
+ *
+ * Accepts props defined by {@link DisplayListProps}.
+ * You must pass a single instance of {@link DisplayListItem} as a child.
+ * @group Components
+ */
+function DisplayList(props) {
+    const { width, height, itemCount, itemOffsetMapping, className, innerClassName, offset: renderOffset, children, itemData, itemKey = defaultItemKey$1, layout = 'vertical', outerRender, innerRender, isScrolling } = props;
+    const isVertical = layout === 'vertical';
+    const [startIndex, startOffset, renderSize, sizes] = getRangeToRender(itemCount, itemOffsetMapping, isVertical ? height : width, renderOffset);
+    const template = getGridTemplate(sizes);
+    const offset = startOffset - renderOffset;
     // We can decide the JSX child type at runtime as long as we use a variable that uses the same capitalized
-    // naming convention as components do. 
+    // naming convention as components do.
     const ChildVar = children;
-    const outerRender = props.outerRender || defaultOuterRender$1;
-    const innerRender = props.innerRender || defaultInnerRender$1;
-    // Being far too clever. Implementing a complex iteration in JSX in a map expression by abusing the comma operator. 
-    // You can't declare local variables in an expression so they need to be hoisted out of the JSX. The comma operator
-    // returns the result of the final statement which makes the iteration a little clumsier.
-    let nextRowOffset = startRowOffset - renderRowOffset;
-    let rowIndex = 0, rowOffset = 0;
-    let nextColumnOffset = 0, columnIndex = 0, columnOffset = 0;
-    return (jsx(Outer$1, { className: className, render: outerRender, onScroll: onScroll, ref: outerRef, style: { position: "relative", height, width, overflow: "auto", willChange: "transform" }, children: jsx(Inner$1, { className: innerClassName, render: innerRender, style: { height: renderRowSize, width: renderColumnSize }, children: rowSizes.map((rowSize, rowArrayIndex) => (rowOffset = nextRowOffset,
-                nextRowOffset += rowSize,
-                rowIndex = startRowIndex + rowArrayIndex,
-                nextColumnOffset = startColumnOffset - renderColumnOffset,
-                jsx(Fragment, { children: columnSizes.map((columnSize, columnArrayIndex) => (columnOffset = nextColumnOffset,
-                        nextColumnOffset += columnSize,
-                        columnIndex = startColumnIndex + columnArrayIndex,
-                        jsx(ChildVar, { data: itemData, rowIndex: rowIndex, columnIndex: columnIndex, isScrolling: useIsScrolling$1 ? isScrolling : undefined, style: { position: "absolute", top: rowOffset, height: rowSize, left: columnOffset, width: columnSize } }, itemKey(rowIndex, columnIndex, itemData)))) }, itemKey(rowIndex, 0, itemData)))) }) }));
-});
+    return (jsx(VirtualContainer, { className: className, render: outerRender, style: { position: "relative", height, width, overflow: "hidden", willChange: "transform" }, children: jsx(VirtualContainer, { className: innerClassName, render: innerRender, style: { position: 'absolute',
+                display: 'grid',
+                gridTemplateColumns: isVertical ? undefined : template,
+                gridTemplateRows: isVertical ? template : undefined,
+                top: isVertical ? offset : 0,
+                left: isVertical ? 0 : offset,
+                height: isVertical ? renderSize : "100%",
+                width: isVertical ? "100%" : renderSize }, children: sizes.map((_size, arrayIndex) => (jsx(ChildVar, { data: itemData, isScrolling: isScrolling, index: startIndex + arrayIndex, style: boxStyle$1 }, itemKey(startIndex + arrayIndex, itemData)))) }) }));
+}
 
-const defaultItemKey = (index, _data) => index;
-const Inner = React.forwardRef(function VirtualListInner({ render, ...rest }, ref) {
-    return render(rest, ref);
-});
-function defaultInnerRender({ ...rest }, ref) {
-    return jsx("div", { ref: ref, ...rest });
+const defaultItemKey = (rowIndex, columnIndex, _data) => `${rowIndex}:${columnIndex}`;
+const boxStyle = { boxSizing: 'border-box' };
+/**
+ * Displays a window onto the contents of a virtualized grid starting from `rowOffset`, `columnOffset`.
+ *
+ * Accepts props defined by {@link DisplayGridProps}.
+ * You must pass a single instance of {@link DisplayGridItem} as a child.
+ * @group Components
+ */
+function DisplayGrid(props) {
+    const { width, height, rowCount, rowOffsetMapping, columnCount, columnOffsetMapping, className, innerClassName, rowOffset: rowRenderOffset, columnOffset: colRenderOffset, children, itemData, itemKey = defaultItemKey, outerRender, innerRender, isScrolling } = props;
+    const [rowStartIndex, rowStartOffset, rowRenderSize, rowSizes] = getRangeToRender(rowCount, rowOffsetMapping, height, rowRenderOffset);
+    const rowTemplate = getGridTemplate(rowSizes);
+    const [colStartIndex, colStartOffset, colRenderSize, colSizes] = getRangeToRender(columnCount, columnOffsetMapping, width, colRenderOffset);
+    const colTemplate = getGridTemplate(colSizes);
+    const rowOffset = rowStartOffset - rowRenderOffset;
+    const colOffset = colStartOffset - colRenderOffset;
+    // We can decide the JSX child type at runtime as long as we use a variable that uses the same capitalized
+    // naming convention as components do.
+    const ChildVar = children;
+    return (jsx(VirtualContainer, { className: className, render: outerRender, style: { position: "relative", height, width, overflow: "hidden", willChange: "transform" }, children: jsx(VirtualContainer, { className: innerClassName, render: innerRender, style: { position: 'absolute',
+                display: 'grid',
+                gridTemplateColumns: colTemplate,
+                gridTemplateRows: rowTemplate,
+                top: rowOffset,
+                left: colOffset,
+                height: rowRenderSize,
+                width: colRenderSize }, children: rowSizes.map((_rowSize, rowIndex) => (jsx(Fragment, { children: colSizes.map((_size, colIndex) => (jsx(ChildVar, { data: itemData, isScrolling: isScrolling, rowIndex: rowStartIndex + rowIndex, columnIndex: colStartIndex + colIndex, style: boxStyle }, itemKey(rowStartIndex + rowIndex, colStartIndex + colIndex, itemData)))) }, itemKey(rowStartIndex + rowIndex, 0, itemData)))) }) }));
 }
-const Outer = React.forwardRef(function VirtualListOuter({ render, ...rest }, ref) {
-    return render(rest, ref);
+
+/**
+ * Returns the {@link ScrollRange} corresponding to a specified item.
+ *
+ * Used internally to implement {@link VirtualGridProxy.scrollToItem}. Can be used directly for
+ * advanced customization scenarios.
+ */
+function getRangeToScroll(index, mapping) {
+    if (index === undefined)
+        return [undefined, undefined];
+    return [mapping.itemOffset(index), mapping.itemSize(index)];
+}
+/**
+ * Same logic as {@link VirtualGridProxy.scrollToItem} usable with your own {@link VirtualScroll}
+ *
+ * You're encouraged to put together your own combination of {@link VirtualScroll} and {@link DisplayGrid} for
+ * advanced customization scenarios. This function provides `ScrollToItem` functionality for use with your own {@link VirtualScroll}.
+ */
+function virtualGridScrollToItem(scrollRef, rowOffsetMapping, columnOffsetMapping, rowIndex, columnIndex, option) {
+    const scroll = scrollRef.current;
+    /* istanbul ignore if */
+    if (!scroll)
+        return;
+    const [rowOffset, rowSize] = getRangeToScroll(rowIndex, rowOffsetMapping);
+    const [colOffset, colSize] = getRangeToScroll(columnIndex, columnOffsetMapping);
+    scroll.scrollToArea(rowOffset, rowSize, colOffset, colSize, option);
+}
+
+// Using a named function rather than => so that the name shows up in React Developer Tools
+/**
+ * Virtual Scrolling Grid
+ *
+ * Accepts props defined by {@link VirtualGridProps}.
+ * Refs are forwarded to {@link VirtualGridProxy}.
+ * You must pass a single instance of {@link DisplayGridItem} as a child.
+ * @group Components
+ */
+const VirtualGrid = React.forwardRef(function VirtualGrid(props, ref) {
+    const { rowCount, rowOffsetMapping, columnCount, columnOffsetMapping, children, innerClassName, innerRender, itemData, itemKey, onScroll: onScrollCallback, ...scrollProps } = props;
+    // Total size is same as offset to item one off the end
+    const totalRowSize = rowOffsetMapping.itemOffset(rowCount);
+    const totalColumnSize = columnOffsetMapping.itemOffset(columnCount);
+    const [state, setState] = React.useState([0, 0]);
+    const scrollRef = React.useRef(null);
+    React.useImperativeHandle(ref, () => {
+        return {
+            scrollTo(rowOffset, columnOffset) {
+                const scroll = scrollRef.current;
+                /* istanbul ignore else */
+                if (scroll)
+                    scroll.scrollTo(rowOffset, columnOffset);
+            },
+            scrollToItem(rowIndex, columnIndex, option) {
+                virtualGridScrollToItem(scrollRef, rowOffsetMapping, columnOffsetMapping, rowIndex, columnIndex, option);
+            },
+            get clientWidth() {
+                return scrollRef.current ? scrollRef.current.clientWidth : /* istanbul ignore next */ 0;
+            },
+            get clientHeight() {
+                return scrollRef.current ? scrollRef.current.clientHeight : /* istanbul ignore next */ 0;
+            }
+        };
+    }, [rowOffsetMapping, columnOffsetMapping]);
+    // We can decide the JSX child type at runtime as long as we use a variable that uses the same capitalized
+    // naming convention as components do. 
+    const ChildVar = children;
+    return (jsx(VirtualScroll, { ref: scrollRef, ...scrollProps, scrollHeight: totalRowSize, scrollWidth: totalColumnSize, onScroll: (verticalOffset, horizontalOffset, verticalScrollState, horizontalScrollState) => {
+            setState([verticalOffset, horizontalOffset]);
+            if (onScrollCallback)
+                onScrollCallback(verticalOffset, horizontalOffset, verticalScrollState, horizontalScrollState);
+        }, children: ({ isScrolling }) => (jsx(AutoSizer, { style: { height: '100%', width: '100%' }, children: ({ height, width }) => (jsx(DisplayGrid, { innerClassName: innerClassName, innerRender: innerRender, rowOffset: state[0], columnOffset: state[1], height: height, rowCount: rowCount, columnCount: columnCount, itemData: itemData, itemKey: itemKey, isScrolling: isScrolling, rowOffsetMapping: rowOffsetMapping, columnOffsetMapping: columnOffsetMapping, width: width, children: ChildVar })) })) }));
 });
-function defaultOuterRender({ ...rest }, ref) {
-    return jsx("div", { ref: ref, ...rest });
+
+/**
+ * Same logic as {@link VirtualListProxy.scrollToItem} usable with your own {@link VirtualScroll}
+ *
+ * You're encouraged to put together your own combination of {@link VirtualScroll} and {@link DisplayList} for
+ * advanced customization scenarios. This function provides `ScrollToItem` functionality for use with your own {@link VirtualScroll}.
+ */
+function virtualListScrollToItem(scrollRef, itemOffsetMapping, isVertical, index, option) {
+    const scroll = scrollRef.current;
+    /* istanbul ignore if */
+    if (!scroll)
+        return;
+    const itemOffset = itemOffsetMapping.itemOffset(index);
+    const itemSize = itemOffsetMapping.itemSize(index);
+    if (isVertical)
+        scroll.scrollToArea(itemOffset, itemSize, undefined, undefined, option);
+    else
+        scroll.scrollToArea(undefined, undefined, itemOffset, itemSize, option);
 }
+
 // Using a named function rather than => so that the name shows up in React Developer Tools
 /**
  * Virtual Scrolling List
  *
  * Accepts props defined by {@link VirtualListProps}.
  * Refs are forwarded to {@link VirtualListProxy}.
- * You must pass a single instance of {@link VirtualListItem} as a child.
+ * You must pass a single instance of {@link DisplayListItem} as a child.
  * @group Components
  */
 const VirtualList = React.forwardRef(function VirtualList(props, ref) {
-    const { width, height, itemCount, itemOffsetMapping, children, className, innerClassName, itemData = undefined, itemKey = defaultItemKey, layout = 'vertical', onScroll: onScrollCallback, useIsScrolling: useIsScrolling$1 = false } = props;
+    const { itemCount, itemOffsetMapping, children, layout = 'vertical', onScroll: onScrollCallback, innerClassName, innerRender, itemData, itemKey, ...scrollProps } = props;
     // Total size is same as offset to item one off the end
-    const totalSize = itemOffsetMapping.itemOffset(itemCount);
-    const outerRef = React.useRef(null);
-    const { scrollOffset, renderOffset, renderSize, onScroll: onScrollExtent, doScrollTo } = useVirtualScroll(totalSize, props.maxCssSize, props.minNumPages);
-    const isScrolling = useIsScrolling(outerRef);
+    const renderSize = itemOffsetMapping.itemOffset(itemCount);
+    const [offset, setOffset] = React.useState(0);
+    const scrollRef = React.useRef(null);
     const isVertical = layout === 'vertical';
     React.useImperativeHandle(ref, () => {
         return {
             scrollTo(offset) {
-                const outer = outerRef.current;
-                /* istanbul ignore else */
-                if (outer) {
-                    if (isVertical)
-                        outer.scrollTo(0, doScrollTo(offset, outer.clientHeight));
-                    else
-                        outer.scrollTo(doScrollTo(offset, outer.clientWidth), 0);
-                }
+                const scroll = scrollRef.current;
+                /* istanbul ignore if */
+                if (!scroll)
+                    return;
+                if (isVertical)
+                    scroll.scrollTo(offset, undefined);
+                else
+                    scroll.scrollTo(undefined, offset);
             },
-            scrollToItem(index) {
-                this.scrollTo(itemOffsetMapping.itemOffset(index));
+            scrollToItem(index, option) {
+                virtualListScrollToItem(scrollRef, itemOffsetMapping, isVertical, index, option);
             }
         };
-    }, [itemOffsetMapping, isVertical, doScrollTo]);
-    function onScroll(event) {
-        if (isVertical) {
-            const { clientHeight, scrollHeight, scrollTop, scrollLeft } = event.currentTarget;
-            const [newScrollTop, newScrollState] = onScrollExtent(clientHeight, scrollHeight, scrollTop);
-            if (newScrollTop != scrollTop && outerRef.current)
-                outerRef.current.scrollTo(scrollLeft, newScrollTop);
-            onScrollCallback?.(newScrollState.scrollOffset + newScrollState.renderOffset, newScrollState);
-        }
-        else {
-            const { clientWidth, scrollWidth, scrollTop, scrollLeft } = event.currentTarget;
-            const [newScrollLeft, newScrollState] = onScrollExtent(clientWidth, scrollWidth, scrollLeft);
-            if (newScrollLeft != scrollLeft && outerRef.current)
-                outerRef.current.scrollTo(newScrollLeft, scrollTop);
-            onScrollCallback?.(newScrollState.scrollOffset + newScrollState.renderOffset, newScrollState);
-        }
-    }
-    const [startIndex, startOffset, sizes] = getRangeToRender(itemCount, itemOffsetMapping, isVertical ? height : width, scrollOffset + renderOffset);
+    }, [itemOffsetMapping, isVertical]);
     // We can decide the JSX child type at runtime as long as we use a variable that uses the same capitalized
     // naming convention as components do.
     const ChildVar = children;
-    const outerRender = props.outerRender || defaultOuterRender;
-    const innerRender = props.innerRender || defaultInnerRender;
-    // Being far too clever. Implementing a complex iteration in JSX in a map expression by abusing the comma operator. 
-    // You can't declare local variables in an expression so they need to be hoisted out of the JSX. The comma operator
-    // returns the result of the final statement which makes the iteration a little clumsier.
-    let nextOffset = startOffset - renderOffset;
-    let index, offset;
-    return (jsx(Outer, { className: className, render: outerRender, onScroll: onScroll, ref: outerRef, style: { position: "relative", height, width, overflow: "auto", willChange: "transform" }, children: jsx(Inner, { className: innerClassName, render: innerRender, style: { height: isVertical ? renderSize : "100%", width: isVertical ? "100%" : renderSize }, children: sizes.map((size, arrayIndex) => (offset = nextOffset,
-                nextOffset += size,
-                index = startIndex + arrayIndex,
-                jsx(ChildVar, { data: itemData, index: index, isScrolling: useIsScrolling$1 ? isScrolling : undefined, style: {
-                        position: "absolute",
-                        top: isVertical ? offset : undefined,
-                        left: isVertical ? undefined : offset,
-                        height: isVertical ? size : "100%",
-                        width: isVertical ? "100%" : size,
-                    } }, itemKey(index, itemData)))) }) }));
+    return (jsx(VirtualScroll, { ref: scrollRef, ...scrollProps, scrollHeight: isVertical ? renderSize : undefined, scrollWidth: isVertical ? undefined : renderSize, onScroll: (verticalOffset, horizontalOffset, verticalScrollState, horizontalScrollState) => {
+            const newOffset = isVertical ? verticalOffset : horizontalOffset;
+            setOffset(newOffset);
+            if (onScrollCallback)
+                onScrollCallback(newOffset, isVertical ? verticalScrollState : horizontalScrollState);
+        }, children: ({ isScrolling }) => (jsx(AutoSizer, { style: { height: '100%', width: '100%' }, children: ({ height, width }) => (jsx(DisplayList, { innerClassName: innerClassName, innerRender: innerRender, layout: layout, offset: offset, height: height, itemCount: itemCount, itemData: itemData, itemKey: itemKey, isScrolling: isScrolling, itemOffsetMapping: itemOffsetMapping, width: width, children: ChildVar })) })) }));
 });
 
 class FixedSizeItemOffsetMapping {
@@ -472,5 +682,5 @@ function useVariableSizeItemOffsetMapping(defaultItemSize, sizes) {
     return new VariableSizeItemOffsetMapping(defaultItemSize, sizes || []);
 }
 
-export { VirtualGrid, VirtualList, useFixedSizeItemOffsetMapping, useVariableSizeItemOffsetMapping };
+export { AutoSizer, DisplayGrid, DisplayList, VirtualContainer, VirtualGrid, VirtualList, VirtualScroll, getOffsetToScrollRange, getRangeToScroll, useFixedSizeItemOffsetMapping, useVariableSizeItemOffsetMapping, virtualGridScrollToItem, virtualListScrollToItem };
 //# sourceMappingURL=index.js.map