@candidstartup/react-virtual-scroll 0.1.1

package/LICENSE

@@ -0,0 +1,29 @@
+BSD 3-Clause License
+
+Copyright (c) 2022, Tim Wiegand
+All rights reserved.
+
+Redistribution and use in source and binary forms, with or without
+modification, are permitted provided that the following conditions are met:
+
+1. Redistributions of source code must retain the above copyright notice, this
+   list of conditions and the following disclaimer.
+
+2. Redistributions in binary form must reproduce the above copyright notice,
+   this list of conditions and the following disclaimer in the documentation
+   and/or other materials provided with the distribution.
+
+3. Neither the name of the copyright holder nor the names of its
+   contributors may be used to endorse or promote products derived from
+   this software without specific prior written permission.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
+AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
+IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE
+FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
+DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
+SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
+CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
+OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

package/README.md

@@ -0,0 +1,64 @@
+# @candidstartup/react-virtual-scroll
+
+React virtual scrolling components for lists and grids following the same philosophy as [react-window](https://github.com/bvaughn/react-window). Written in TypeScript using modern React. Scalable to trillions of rows and columns. 
+
+## Interface
+
+The interface is similar to `react-window` with two main changes. First, the components are functional rather than class based. Second, rather than having fixed and variable size variants of each component, the components are passed an `ItemOffsetMapping` object as a prop. This is an interface that the components query to determine the size and position of each item. 
+
+The interface is [designed](https://www.thecandidstartup.org/2024/02/12/modern-react-virtual-scroll-grid-3.html) to ensure that the components have no scaling issues even with trillions of rows or columns. The package includes basic fixed and variable size item mappings. 
+
+## Implementation
+
+Most of the logic is implemented by custom hooks that are used by both `VirtualList` and `VirtualGrid` controls. The logic that manages scrolling in a single dimension is implemented in `useVirtualScroll`. It's based on an [improved version](https://www.thecandidstartup.org/2024/04/29/modern-react-virtual-scroll-grid-9.html) of [SlickGrid's](https://github.com/6pac/SlickGrid) paged scrolling algorithm. One instance of the hook is used by `VirtualList` and two instances by `VirtualGrid`. 
+
+## VirtualList Example
+
+```jsx
+import { VirtualList, useVariableSizeItemOffsetMapping } from '@candidstartup/react-virtual-scroll';
+
+const mapping = useVariableSizeItemOffsetMapping(30, [50]);
+
+const Row = ({ index, isScrolling, style }) => (
+  <div className={ index == 0 ? "header" : ( isScrolling ? "cellScroll" : "cell") } style={style}>
+    { (index == 0) ? "Header" : "Item " + index }
+  </div>
+);
+
+<VirtualList
+  height={240}
+  itemCount={1000000000000}
+  itemOffsetMapping={mapping}
+  useIsScrolling={true}
+  width={600}>
+  {Row}
+</VirtualList>
+```
+
+## VirtualGrid Example
+
+```jsx
+import { VirtualList, useVariableSizeItemOffsetMapping, useFixedSizeItemOffsetMapping } from '@candidstartup/react-virtual-scroll';
+
+const rowMapping = useVariableSizeItemOffsetMapping(30, [50]);
+const columnMapping = useFixedSizeItemOffsetMapping(280);
+
+const Cell = ({ rowIndex, columnIndex, style }) => (
+  <div className={ rowIndex == 0 ? "header" : "cell" } style={style}>
+    { (rowIndex == 0) ? `${columnIndex}` : `${rowIndex}:${columnIndex}` }
+  </div>
+
+<VirtualGrid
+  height={240}
+  rowCount={1000000000000}
+  rowOffsetMapping={rowMapping}
+  columnCount={1000000000000}
+  columnOffsetMapping={columnMapping}
+  width={600}>
+  {Cell}
+</VirtualGrid> 
+```
+
+# More
+
+Want to know more? Check out my [blog](https://www.thecandidstartup.org/topics/frontend.html)

package/dist/index.d.ts

@@ -0,0 +1,74 @@
+import React from 'react';
+
+interface VirtualBaseItemProps {
+    data: any;
+    isScrolling?: boolean;
+    style: Object;
+}
+interface VirtualBaseProps {
+    height: number;
+    width: number;
+    itemData?: any;
+    useIsScrolling?: boolean;
+}
+interface ItemOffsetMapping {
+    itemSize(itemIndex: number): number;
+    itemOffset(itemIndex: number): number;
+    offsetToItem(offset: number): [itemIndex: number, startOffset: number];
+}
+
+interface VirtualGridItemProps extends VirtualBaseItemProps {
+    rowIndex: number;
+    columnIndex: number;
+}
+type VirtualGridItem = React.ComponentType<VirtualGridItemProps>;
+interface VirtualGridProps extends VirtualBaseProps {
+    children: VirtualGridItem;
+    rowCount: number;
+    rowOffsetMapping: ItemOffsetMapping;
+    columnCount: number;
+    columnOffsetMapping: ItemOffsetMapping;
+    itemKey?: (rowIndex: number, columnIndex: number, data: any) => any;
+}
+interface VirtualGridProxy {
+    scrollTo(rowOffset: number, columnOffset: number): void;
+    scrollToItem(rowIndex: number, columnIndex: number): void;
+}
+declare const VirtualGrid: React.ForwardRefExoticComponent<VirtualGridProps & React.RefAttributes<VirtualGridProxy>>;
+
+interface VirtualListItemProps extends VirtualBaseItemProps {
+    index: number;
+}
+type VirtualListItem = React.ComponentType<VirtualListItemProps>;
+interface VirtualListProps extends VirtualBaseProps {
+    children: VirtualListItem;
+    itemCount: number;
+    itemOffsetMapping: ItemOffsetMapping;
+    itemKey?: (index: number, data: any) => any;
+}
+interface VirtualListProxy {
+    scrollTo(offset: number): void;
+    scrollToItem(index: number): void;
+}
+declare const VirtualList: React.ForwardRefExoticComponent<VirtualListProps & React.RefAttributes<VirtualListProxy>>;
+
+declare class FixedSizeItemOffsetMapping implements ItemOffsetMapping {
+    constructor(itemSize: number);
+    itemSize(_itemIndex: number): number;
+    itemOffset(itemIndex: number): number;
+    offsetToItem(offset: number): [itemIndex: number, startOffset: number];
+    fixedItemSize: number;
+}
+declare function useFixedSizeItemOffsetMapping(itemSize: number): FixedSizeItemOffsetMapping;
+
+declare class VariableSizeItemOffsetMapping implements ItemOffsetMapping {
+    constructor(defaultItemSize: number, sizes: number[]);
+    itemSize(itemIndex: number): number;
+    itemOffset(itemIndex: number): number;
+    offsetToItem(offset: number): [itemIndex: number, startOffset: number];
+    defaultItemSize: number;
+    sizes: number[];
+}
+declare function useVariableSizeItemOffsetMapping(defaultItemSize: number, sizes?: number[]): VariableSizeItemOffsetMapping;
+
+export { VirtualGrid, type VirtualGridItemProps, type VirtualGridProps, type VirtualGridProxy, VirtualList, type VirtualListItemProps, type VirtualListProps, type VirtualListProxy, useFixedSizeItemOffsetMapping, useVariableSizeItemOffsetMapping };

package/dist/index.js

@@ -0,0 +1,384 @@
+import { jsx } 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, []];
+    }
+    var [itemIndex, startOffset] = itemOffsetMapping.offsetToItem(scrollOffset);
+    itemIndex = Math.max(0, Math.min(itemCount - 1, itemIndex));
+    var 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;
+    var 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];
+}
+
+// Max size that is safe across all browsers (Firefox is the limiting factor)
+// SlickGrid tries to dynamically determine limit on other browsers (Chrome will do 30M) but
+// I prefer simplicity of same behavior across all browsers.
+const MAX_SUPPORTED_CSS_SIZE = 6000000;
+const MIN_NUMBER_PAGES = 100;
+function useVirtualScroll(totalSize) {
+    let renderSize = 0, pageSize = 0, numPages = 0;
+    if (totalSize < MAX_SUPPORTED_CSS_SIZE) {
+        // No paging needed
+        renderSize = pageSize = totalSize;
+        numPages = 1;
+    }
+    else {
+        // Break into pages
+        renderSize = MAX_SUPPORTED_CSS_SIZE;
+        pageSize = renderSize / MIN_NUMBER_PAGES;
+        numPages = Math.floor(totalSize / pageSize);
+    }
+    function pageToRenderOffset(page) {
+        if (page <= 0)
+            return 0;
+        if (page >= numPages - 1)
+            return totalSize - renderSize;
+        return Math.round((page - 1) * (totalSize - renderSize) / (numPages - 3));
+    }
+    const initValue = {
+        scrollOffset: 0,
+        renderOffset: 0,
+        page: 0,
+        scrollDirection: "forward",
+    };
+    const [scrollState, setScrollState] = useState(initValue);
+    function onScroll(clientExtent, scrollExtent, scrollOffset) {
+        if (scrollState.scrollOffset == scrollOffset) {
+            // No need to change state if scroll position unchanged
+            return scrollOffset;
+        }
+        // Prevent Safari's elastic scrolling from causing visual shaking when scrolling past bounds.
+        let newOffset = Math.max(0, Math.min(scrollOffset, scrollExtent - clientExtent));
+        const newScrollDirection = scrollState.scrollOffset <= newOffset ? 'forward' : 'backward';
+        // Switch pages if needed
+        let newPage, newRenderOffset;
+        let retScrollOffset = scrollOffset;
+        const scrollDist = Math.abs(newOffset - scrollState.scrollOffset);
+        if (scrollDist < clientExtent) {
+            // Scrolling part of visible window, don't want to skip items, so can't scale up movement
+            // If we cross page boundary we need to reset scroll bar position back to where it should be at start of page
+            newPage = Math.min(numPages - 1, Math.floor((scrollOffset + scrollState.renderOffset) / pageSize));
+            newRenderOffset = pageToRenderOffset(newPage);
+            if (newPage != scrollState.page) {
+                // Be very intentional about when we ask caller to reset scroll bar
+                // Don't want to trigger event loops
+                newOffset = scrollOffset + scrollState.renderOffset - newRenderOffset;
+                retScrollOffset = newOffset;
+            }
+        }
+        else {
+            // Large scale scrolling, choosing page from a rolodex
+            // First and last page are mapped 1:1 between grid and container
+            if (newOffset < pageSize) {
+                newPage = 0;
+            }
+            else if (newOffset >= renderSize - pageSize) {
+                newPage = numPages - 1;
+            }
+            else {
+                const scaleFactor = (totalSize - pageSize * 2) / (renderSize - pageSize * 2);
+                newPage = Math.min(numPages - 3, Math.floor((newOffset - pageSize) * scaleFactor / pageSize)) + 1;
+            }
+            newRenderOffset = pageToRenderOffset(newPage);
+        }
+        setScrollState({ scrollOffset: newOffset, renderOffset: newRenderOffset, page: newPage, scrollDirection: newScrollDirection });
+        return retScrollOffset;
+    }
+    function doScrollTo(offset, clientExtent) {
+        const safeOffset = Math.min(totalSize - clientExtent, Math.max(offset, 0));
+        const scrollDirection = (scrollState.scrollOffset + scrollState.renderOffset) <= safeOffset ? 'forward' : 'backward';
+        const page = Math.min(numPages - 1, Math.floor(safeOffset / pageSize));
+        const renderOffset = pageToRenderOffset(page);
+        const scrollOffset = safeOffset - renderOffset;
+        setScrollState({ scrollOffset, renderOffset, page, scrollDirection });
+        return scrollOffset;
+    }
+    return { ...scrollState, renderSize, onScroll, doScrollTo };
+}
+
+// Based on https://github.com/realwugang/use-event-listener
+// and https://github.com/donavon/use-event-listener/blob/develop/src/index.js
+function isListener(element) {
+    return element.addEventListener !== undefined;
+}
+function useEventListener(eventName, handler, element = window, options = {}) {
+    const savedHandler = useRef();
+    const { capture, passive, once } = options;
+    useEffect(() => {
+        savedHandler.current = handler;
+    }, [handler]);
+    useEffect(() => {
+        if (!element)
+            return;
+        const el = isListener(element) ? element : element.current;
+        if (!el)
+            return;
+        const eventListener = (event) => savedHandler.current(event);
+        const opts = { capture, passive, once };
+        el.addEventListener(eventName, eventListener, opts);
+        return () => {
+            el.removeEventListener(eventName, eventListener, opts);
+        };
+    }, [eventName, element, capture, passive, once]);
+}
+// In-source testing for private helper functions
+if (import.meta.vitest) {
+    const { it, expect } = import.meta.vitest;
+    it('isListener', () => {
+        expect(isListener(window)).toBe(true);
+        expect(isListener(document)).toBe(true);
+        expect(isListener(document.createElement("div"))).toBe(true);
+        expect(isListener(createRef())).toBe(false);
+    });
+}
+
+// Based on https://overreacted.io/making-setinterval-declarative-with-react-hooks/
+// and https://www.joshwcomeau.com/snippets/react-hooks/use-timeout/
+// and https://github.com/bvaughn/react-window/blob/master/src/timer.js
+//
+// Equivalent functionality to a useTimeout hook but based on requestAnimationFrame instead of setTimeout. Use
+// when making frequent requests for short duration timeouts where browser may throttle setTimeout.
+function useAnimationTimeout(callback, delay, key) {
+    const requestRef = useRef();
+    const savedCallback = useRef(callback);
+    // Remember the latest callback
+    useEffect(() => {
+        savedCallback.current = callback;
+    }, [callback]);
+    const start = performance.now();
+    useEffect(() => {
+        function tick() {
+            requestRef.current = undefined;
+            if (delay === null)
+                return;
+            if (performance.now() - start >= delay) {
+                savedCallback.current();
+            }
+            else {
+                requestRef.current = requestAnimationFrame(tick);
+            }
+        }
+        tick();
+        return () => {
+            if (typeof requestRef.current === 'number') {
+                cancelAnimationFrame(requestRef.current);
+                requestRef.current = undefined;
+            }
+        };
+    }, [delay, key]);
+}
+
+const DEBOUNCE_INTERVAL = 150;
+const FALLBACK_INTERVAL = 500;
+function useIsScrolling(element = window) {
+    const [scrollCount, setScrollCount] = useState(0);
+    // scrollend implementations in both Chrome and Firefox are buggy with missing scrollend events
+    // in some circumstances (using keyboard to scroll past end in Chrome, intermittently when using mouse wheel in Firefox)
+    // Use a timeout even when scrollend is supported to handle missing events. In this case we use a longer interval as
+    // don't want it to be over sensitive. 
+    const supportsScrollEnd = ('onscrollend' in window);
+    const delay = supportsScrollEnd ? FALLBACK_INTERVAL : DEBOUNCE_INTERVAL;
+    useEventListener("scroll", () => setScrollCount(c => c + 1), element);
+    useEventListener("scrollend", () => setScrollCount(0), supportsScrollEnd ? element : null);
+    useAnimationTimeout(() => setScrollCount(0), (scrollCount == 0) ? null : delay, scrollCount);
+    return scrollCount > 0;
+}
+
+const defaultItemKey$1 = (rowIndex, columnIndex, _data) => `${rowIndex}:${columnIndex}`;
+// Using a named function rather than => so that the name shows up in React Developer Tools
+const VirtualGrid = React.forwardRef(function VirtualGrid(props, ref) {
+    const { width, height, rowCount, rowOffsetMapping, columnCount, columnOffsetMapping, children, itemData = undefined, itemKey = defaultItemKey$1, 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 outerRef = React.useRef(null);
+    const { scrollOffset: scrollRowOffset, renderOffset: renderRowOffset, renderSize: renderRowSize, onScroll: onScrollRow, doScrollTo: doScrollToRow } = useVirtualScroll(totalRowSize);
+    const { scrollOffset: scrollColumnOffset, renderOffset: renderColumnOffset, renderSize: renderColumnSize, onScroll: onScrollColumn, doScrollTo: doScrollToColumn } = useVirtualScroll(totalColumnSize);
+    const isScrolling = useIsScrolling(outerRef);
+    React.useImperativeHandle(ref, () => {
+        return {
+            scrollTo(rowOffset, columnOffset) {
+                const outer = outerRef.current;
+                /* istanbul ignore else */
+                if (outer)
+                    outer.scrollTo(doScrollToColumn(columnOffset, outer.clientWidth), doScrollToRow(rowOffset, outer.clientHeight));
+            },
+            scrollToItem(rowIndex, columnIndex) {
+                this.scrollTo(rowOffsetMapping.itemOffset(rowIndex), columnOffsetMapping.itemOffset(columnIndex));
+            }
+        };
+    }, [rowOffsetMapping, columnOffsetMapping]);
+    function onScroll(event) {
+        const { clientWidth, clientHeight, scrollWidth, scrollHeight, scrollLeft, scrollTop } = event.currentTarget;
+        const newScrollTop = onScrollRow(clientHeight, scrollHeight, scrollTop);
+        const newScrollLeft = onScrollColumn(clientWidth, scrollWidth, scrollLeft);
+        if (outerRef.current && (newScrollTop != scrollTop || newScrollLeft != scrollLeft))
+            outerRef.current.scrollTo(newScrollLeft, newScrollTop);
+    }
+    const [startRowIndex, startRowOffset, rowSizes] = getRangeToRender(rowCount, rowOffsetMapping, height, scrollRowOffset + renderRowOffset);
+    const [startColumnIndex, startColumnOffset, columnSizes] = getRangeToRender(columnCount, columnOffsetMapping, width, scrollColumnOffset + renderColumnOffset);
+    // 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;
+    // 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("div", { onScroll: onScroll, ref: outerRef, style: { position: "relative", height, width, overflow: "auto", willChange: "transform" }, children: jsx("div", { 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)))) }) }));
+});
+
+const defaultItemKey = (index, _data) => index;
+// Using a named function rather than => so that the name shows up in React Developer Tools
+const VirtualList = React.forwardRef(function VirtualList(props, ref) {
+    const { width, height, itemCount, itemOffsetMapping, children, itemData = undefined, itemKey = defaultItemKey, useIsScrolling: useIsScrolling$1 = false } = 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);
+    const isScrolling = useIsScrolling(outerRef);
+    React.useImperativeHandle(ref, () => {
+        return {
+            scrollTo(offset) {
+                const outer = outerRef.current;
+                /* istanbul ignore else */
+                if (outer)
+                    outer.scrollTo(0, doScrollTo(offset, outer.clientHeight));
+            },
+            scrollToItem(index) {
+                this.scrollTo(itemOffsetMapping.itemOffset(index));
+            }
+        };
+    }, [itemOffsetMapping]);
+    function onScroll(event) {
+        const { clientHeight, scrollHeight, scrollTop, scrollLeft } = event.currentTarget;
+        const newScrollTop = onScrollExtent(clientHeight, scrollHeight, scrollTop);
+        if (newScrollTop != scrollTop && outerRef.current)
+            outerRef.current.scrollTo(scrollLeft, newScrollTop);
+    }
+    const [startIndex, startOffset, sizes] = getRangeToRender(itemCount, itemOffsetMapping, height, scrollOffset + 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. 
+    const ChildVar = children;
+    // 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("div", { onScroll: onScroll, ref: outerRef, style: { position: "relative", height, width, overflow: "auto", willChange: "transform" }, children: jsx("div", { style: { height: renderSize, width: "100%" }, 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: offset, height: size, width: "100%" } }, itemKey(index, itemData)))) }) }));
+});
+
+class FixedSizeItemOffsetMapping {
+    constructor(itemSize) {
+        Object.defineProperty(this, "fixedItemSize", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        this.fixedItemSize = itemSize;
+    }
+    itemSize(_itemIndex) {
+        return this.fixedItemSize;
+    }
+    itemOffset(itemIndex) {
+        return itemIndex * this.fixedItemSize;
+    }
+    offsetToItem(offset) {
+        const itemIndex = Math.floor(offset / this.fixedItemSize);
+        const startOffset = itemIndex * this.fixedItemSize;
+        return [itemIndex, startOffset];
+    }
+}
+function useFixedSizeItemOffsetMapping(itemSize) {
+    return new FixedSizeItemOffsetMapping(itemSize);
+}
+
+class VariableSizeItemOffsetMapping {
+    constructor(defaultItemSize, sizes) {
+        Object.defineProperty(this, "defaultItemSize", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "sizes", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        this.defaultItemSize = defaultItemSize;
+        this.sizes = sizes;
+    }
+    itemSize(itemIndex) {
+        return (itemIndex < this.sizes.length) ? this.sizes[itemIndex] : this.defaultItemSize;
+    }
+    itemOffset(itemIndex) {
+        var offset = 0;
+        let length = this.sizes.length;
+        if (itemIndex > length) {
+            const numDefaultSize = itemIndex - length;
+            offset = numDefaultSize * this.defaultItemSize;
+        }
+        else {
+            length = itemIndex;
+        }
+        for (let i = 0; i < length; i++) {
+            offset += this.sizes[i];
+        }
+        return offset;
+    }
+    offsetToItem(offset) {
+        var startOffset = 0;
+        const length = this.sizes.length;
+        for (let i = 0; i < length; i++) {
+            const size = this.sizes[i];
+            if (startOffset + size > offset) {
+                return [i, startOffset];
+            }
+            startOffset += size;
+        }
+        const itemIndex = Math.floor((offset - startOffset) / this.defaultItemSize);
+        startOffset += itemIndex * this.defaultItemSize;
+        return [itemIndex + length, startOffset];
+    }
+}
+function useVariableSizeItemOffsetMapping(defaultItemSize, sizes) {
+    return new VariableSizeItemOffsetMapping(defaultItemSize, sizes || []);
+}
+
+export { VirtualGrid, VirtualList, useFixedSizeItemOffsetMapping, useVariableSizeItemOffsetMapping };
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../src/VirtualBase.ts","../src/useVirtualScroll.ts","../src/useEventListener.ts","../src/useAnimationTimeout.ts","../src/useIsScrolling.ts","../src/VirtualGrid.tsx","../src/VirtualList.tsx","../src/useFixedSizeItemOffsetMapping.ts","../src/useVariableSizeItemOffsetMapping.ts"],"sourcesContent":["\nexport interface VirtualBaseItemProps {\n  data: any,\n  isScrolling?: boolean,\n  style: Object,\n};\n\nexport interface VirtualBaseProps {\n  height: number,\n  width: number,\n  itemData?: any,\n  useIsScrolling?: boolean,\n};\n\nexport interface ItemOffsetMapping {\n  itemSize(itemIndex: number): number;\n  itemOffset(itemIndex: number): number;\n  offsetToItem(offset: number): [itemIndex: number, startOffset: number];\n};\n\nexport type ScrollEvent = React.SyntheticEvent<HTMLDivElement>;\n\ntype RangeToRender = [\n  startIndex: number,\n  startOffset: number,\n  sizes: number[]\n];\n\nexport function getRangeToRender(itemCount: number, itemOffsetMapping: ItemOffsetMapping, clientExtent: number, scrollOffset: number): RangeToRender {\n  if (itemCount == 0) {\n    return [0, 0, []];\n  }\n\n  var [itemIndex, startOffset] = itemOffsetMapping.offsetToItem(scrollOffset);\n  itemIndex = Math.max(0, Math.min(itemCount - 1, itemIndex));\n  var endOffset = scrollOffset + clientExtent;\n\n  const overscanBackward = 1;\n  const overscanForward = 1;\n\n  for (let step = 0; step < overscanBackward && itemIndex > 0; step ++) {\n    itemIndex --;\n    startOffset -= itemOffsetMapping.itemSize(itemIndex);\n  }\n\n  const startIndex = itemIndex;\n  var offset = startOffset;\n  const sizes: number[] = [];\n\n  while (offset < endOffset && itemIndex < itemCount) {\n    const size = itemOffsetMapping.itemSize(itemIndex);\n    sizes.push(size);\n    offset += size;\n    itemIndex ++;\n  }\n\n  for (let step = 0; step < overscanForward && itemIndex < itemCount; step ++) {\n    const size = itemOffsetMapping.itemSize(itemIndex);\n    sizes.push(size);\n    itemIndex ++;\n  }\n\n  return [startIndex, startOffset, sizes];\n}\n","import { useState } from \"react\";\n\nexport type ScrollLayout = \"horizontal\" | \"vertical\";\nexport type ScrollDirection = \"forward\" | \"backward\";\nexport interface ScrollState { \n  scrollOffset: number, \n  renderOffset: number,\n  page: number, \n  scrollDirection: ScrollDirection, \n};\n\nexport interface VirtualScroll extends ScrollState {\n  renderSize: number;\n\n  // Returns updated scrollOffset. Caller should update scroll bar position if different from value passed in. \n  onScroll(clientExtent: number, scrollExtent: number, scrollOffset: number): number;\n\n  // Scroll to offset in logical space returning offset to update scroll bar position to\n  doScrollTo(offset: number, clientExtent: number): number;\n};\n\n// Max size that is safe across all browsers (Firefox is the limiting factor)\n// SlickGrid tries to dynamically determine limit on other browsers (Chrome will do 30M) but\n// I prefer simplicity of same behavior across all browsers.\nconst MAX_SUPPORTED_CSS_SIZE = 6000000;\nconst MIN_NUMBER_PAGES = 100;\n\nexport function useVirtualScroll(totalSize: number): VirtualScroll {\n  let renderSize=0, pageSize=0, numPages=0;\n  if (totalSize < MAX_SUPPORTED_CSS_SIZE) {\n    // No paging needed\n    renderSize = pageSize = totalSize;\n    numPages = 1;\n  } else {\n    // Break into pages\n    renderSize = MAX_SUPPORTED_CSS_SIZE;\n    pageSize = renderSize / MIN_NUMBER_PAGES;\n    numPages = Math.floor(totalSize / pageSize);\n  }\n\n  function pageToRenderOffset(page: number): number {\n    if (page <= 0)\n      return 0;\n\n    if (page >= numPages-1)\n      return totalSize - renderSize;\n\n    return Math.round((page-1) * (totalSize - renderSize) / (numPages - 3));\n  }\n\n  const initValue: ScrollState = { \n    scrollOffset: 0, \n    renderOffset: 0,\n    page: 0,\n    scrollDirection: \"forward\",\n  };\n  const [scrollState, setScrollState] = useState(initValue);\n\n  function onScroll(clientExtent: number, scrollExtent: number, scrollOffset: number) {\n    if (scrollState.scrollOffset == scrollOffset) {\n      // No need to change state if scroll position unchanged\n      return scrollOffset;\n    }\n\n    // Prevent Safari's elastic scrolling from causing visual shaking when scrolling past bounds.\n    let newOffset = Math.max(0, Math.min(scrollOffset, scrollExtent - clientExtent));\n    const newScrollDirection = scrollState.scrollOffset <= newOffset ? 'forward' : 'backward';\n\n    // Switch pages if needed\n    let newPage, newRenderOffset;\n    let retScrollOffset = scrollOffset;\n    const scrollDist = Math.abs(newOffset - scrollState.scrollOffset);\n    if (scrollDist < clientExtent) {\n      // Scrolling part of visible window, don't want to skip items, so can't scale up movement\n      // If we cross page boundary we need to reset scroll bar position back to where it should be at start of page\n      newPage = Math.min(numPages - 1, Math.floor((scrollOffset + scrollState.renderOffset) / pageSize));\n      newRenderOffset = pageToRenderOffset(newPage);\n      if (newPage != scrollState.page) {\n        // Be very intentional about when we ask caller to reset scroll bar\n        // Don't want to trigger event loops\n        newOffset = scrollOffset + scrollState.renderOffset - newRenderOffset;\n        retScrollOffset = newOffset;\n      }\n    } else {\n      // Large scale scrolling, choosing page from a rolodex\n      // First and last page are mapped 1:1 between grid and container\n      if (newOffset < pageSize) {\n        newPage = 0;\n      } else if (newOffset >= renderSize - pageSize) {\n        newPage = numPages - 1;\n      } else {\n        const scaleFactor = (totalSize - pageSize*2) / (renderSize - pageSize*2);\n        newPage = Math.min(numPages - 3, Math.floor((newOffset - pageSize) * scaleFactor / pageSize)) + 1;\n      }\n      newRenderOffset = pageToRenderOffset(newPage);\n    }\n\n    setScrollState({ scrollOffset: newOffset, renderOffset: newRenderOffset, page: newPage, scrollDirection: newScrollDirection });\n    return retScrollOffset;\n  }\n\n  function doScrollTo(offset: number, clientExtent: number) {\n    const safeOffset = Math.min(totalSize - clientExtent, Math.max(offset, 0));\n    const scrollDirection = (scrollState.scrollOffset + scrollState.renderOffset) <= safeOffset ? 'forward' : 'backward';\n    const page = Math.min(numPages - 1, Math.floor(safeOffset / pageSize));\n    const renderOffset = pageToRenderOffset(page);\n    const scrollOffset = safeOffset - renderOffset;\n\n    setScrollState({ scrollOffset, renderOffset, page, scrollDirection });\n    return scrollOffset;\n  }\n\n  return {...scrollState, renderSize, onScroll, doScrollTo} as const;\n}\n\nexport default useVirtualScroll;\n","// Based on https://github.com/realwugang/use-event-listener\n// and https://github.com/donavon/use-event-listener/blob/develop/src/index.js\n\nimport { useRef, useEffect, RefObject, createRef } from 'react';\n\ninterface Options {\n  capture?: boolean\n  once?: boolean\n  passive?: boolean\n};\n\ntype Listener = Window | Document | HTMLElement;\n\nfunction isListener(element: Listener | RefObject<HTMLElement>): element is Listener {\n  return (element as Listener).addEventListener !== undefined;\n}\n\nexport function useEventListener (eventName: string, \n                                  handler: (event: Event) => void, \n                                  element: Listener | RefObject<HTMLElement> | null = window, \n                                  options: Options = {}) {\n  const savedHandler = useRef<any>();\n  const { capture, passive, once } = options;\n\n  useEffect(() => {\n    savedHandler.current = handler\n  }, [handler])\n\n  useEffect(() => {\n    if (!element)\n      return;\n\n    const el =  isListener(element) ? element : element.current;\n    if (!el)\n      return;\n\n    const eventListener = (event: Event) => savedHandler.current(event);\n    const opts = { capture, passive, once };\n    el.addEventListener(eventName, eventListener, opts);\n    return () => {\n      el.removeEventListener(eventName, eventListener, opts);\n    };\n  }, [eventName, element, capture, passive, once]);\n}\n\nexport default useEventListener;\n\n// In-source testing for private helper functions\nif (import.meta.vitest) {\n  const { it, expect } = import.meta.vitest\n  it('isListener', () => {\n    expect(isListener(window)).toBe(true)\n    expect(isListener(document)).toBe(true)\n    expect(isListener(document.createElement(\"div\"))).toBe(true)\n    expect(isListener(createRef())).toBe(false)\n  })\n}","// Based on https://overreacted.io/making-setinterval-declarative-with-react-hooks/\n// and https://www.joshwcomeau.com/snippets/react-hooks/use-timeout/\n// and https://github.com/bvaughn/react-window/blob/master/src/timer.js\n//\n// Equivalent functionality to a useTimeout hook but based on requestAnimationFrame instead of setTimeout. Use\n// when making frequent requests for short duration timeouts where browser may throttle setTimeout.\nimport { useEffect, useRef } from 'react';\n\ntype Callback = () => void;\n\nexport function useAnimationTimeout(callback: Callback, delay: number | null, key?: unknown) {\n  const requestRef = useRef<number>();\n  const savedCallback = useRef<Callback>(callback);\n\n  // Remember the latest callback\n  useEffect(() => {\n    savedCallback.current = callback;\n  }, [callback]);\n \n  const start = performance.now();\n  \n  useEffect(() => {\n    function tick() {\n      requestRef.current = undefined;\n      if (delay === null)\n        return;\n\n      if (performance.now() - start >= delay) {\n        savedCallback.current();\n      } else {\n        requestRef.current = requestAnimationFrame(tick);\n      }\n    }\n\n    tick();\n\n    return () => {\n      if (typeof requestRef.current === 'number') {\n        cancelAnimationFrame(requestRef.current);\n        requestRef.current = undefined;\n      }\n    }\n  }, [delay, key]);\n}\n\nexport default useAnimationTimeout;","import { useState, RefObject } from \"react\";\nimport { useEventListener } from './useEventListener';\nimport { useAnimationTimeout } from './useAnimationTimeout';\n\nconst DEBOUNCE_INTERVAL = 150;\nconst FALLBACK_INTERVAL = 500;\n\nexport function useIsScrolling(element: Window | HTMLElement | RefObject<HTMLElement> | null = window): boolean {\n  const [scrollCount, setScrollCount] = useState(0);\n\n  // scrollend implementations in both Chrome and Firefox are buggy with missing scrollend events\n  // in some circumstances (using keyboard to scroll past end in Chrome, intermittently when using mouse wheel in Firefox)\n  // Use a timeout even when scrollend is supported to handle missing events. In this case we use a longer interval as\n  // don't want it to be over sensitive. \n  const supportsScrollEnd = ('onscrollend' in window);\n  const delay = supportsScrollEnd ? FALLBACK_INTERVAL : DEBOUNCE_INTERVAL;\n\n  useEventListener(\"scroll\", () => setScrollCount(c => c + 1), element);\n  useEventListener(\"scrollend\", () => setScrollCount(0), supportsScrollEnd ? element : null);\n  useAnimationTimeout(() => setScrollCount(0), (scrollCount == 0) ? null : delay, scrollCount);\n\n  return scrollCount > 0;\n}\n\nexport default useIsScrolling;","import React from \"react\";\nimport { Fragment } from \"react\";\nimport { ItemOffsetMapping, getRangeToRender, VirtualBaseItemProps, VirtualBaseProps, ScrollEvent } from './VirtualBase';\nimport { useVirtualScroll } from './useVirtualScroll';\nimport { useIsScrolling as useIsScrollingHook} from './useIsScrolling';\n\nexport interface VirtualGridItemProps extends VirtualBaseItemProps {\n  rowIndex: number,\n  columnIndex: number,\n};\n\ntype VirtualGridItem = React.ComponentType<VirtualGridItemProps>;\n\nexport interface VirtualGridProps extends VirtualBaseProps {\n  children: VirtualGridItem,\n  rowCount: number,\n  rowOffsetMapping: ItemOffsetMapping,\n  columnCount: number,\n  columnOffsetMapping: ItemOffsetMapping,\n  itemKey?: (rowIndex: number, columnIndex: number, data: any) => any,\n};\n\nexport interface VirtualGridProxy {\n  scrollTo(rowOffset: number, columnOffset: number): void;\n  scrollToItem(rowIndex: number, columnIndex: number): void;\n};\n\nconst defaultItemKey = (rowIndex: number, columnIndex: number, _data: any) => `${rowIndex}:${columnIndex}`;\n\n// Using a named function rather than => so that the name shows up in React Developer Tools\nexport const VirtualGrid = React.forwardRef<VirtualGridProxy, VirtualGridProps>(function VirtualGrid(props, ref) {\n  const { width, height, rowCount, rowOffsetMapping, columnCount, columnOffsetMapping, children, \n    itemData = undefined, itemKey = defaultItemKey, useIsScrolling = false } = props;\n\n  // Total size is same as offset to item one off the end\n  const totalRowSize = rowOffsetMapping.itemOffset(rowCount);\n  const totalColumnSize = columnOffsetMapping.itemOffset(columnCount);\n\n  const outerRef = React.useRef<HTMLDivElement>(null);\n  const { scrollOffset: scrollRowOffset, renderOffset: renderRowOffset, renderSize: renderRowSize,\n    onScroll: onScrollRow, doScrollTo: doScrollToRow } = useVirtualScroll(totalRowSize);\n  const { scrollOffset: scrollColumnOffset, renderOffset: renderColumnOffset, renderSize: renderColumnSize,\n    onScroll: onScrollColumn, doScrollTo: doScrollToColumn} = useVirtualScroll(totalColumnSize);\n  const isScrolling = useIsScrollingHook(outerRef); \n\n  React.useImperativeHandle(ref, () => {\n    return {\n      scrollTo(rowOffset: number, columnOffset: number): void {\n        const outer = outerRef.current;\n        /* istanbul ignore else */\n        if (outer)\n          outer.scrollTo(doScrollToColumn(columnOffset, outer.clientWidth), doScrollToRow(rowOffset, outer.clientHeight));\n      },\n\n      scrollToItem(rowIndex: number, columnIndex: number): void {\n        this.scrollTo(rowOffsetMapping.itemOffset(rowIndex), columnOffsetMapping.itemOffset(columnIndex));\n      }\n    }\n  }, [ rowOffsetMapping, columnOffsetMapping ]);\n\n\n  function onScroll(event: ScrollEvent) {\n    const { clientWidth, clientHeight, scrollWidth, scrollHeight, scrollLeft, scrollTop } = event.currentTarget;\n    const newScrollTop = onScrollRow(clientHeight, scrollHeight, scrollTop);\n    const newScrollLeft = onScrollColumn(clientWidth, scrollWidth, scrollLeft);\n    if (outerRef.current && (newScrollTop != scrollTop || newScrollLeft != scrollLeft ))\n      outerRef.current.scrollTo(newScrollLeft, newScrollTop);\n  }\n\n  const [startRowIndex, startRowOffset, rowSizes] = \n    getRangeToRender(rowCount, rowOffsetMapping, height, scrollRowOffset + renderRowOffset);\n  const [startColumnIndex, startColumnOffset, columnSizes] = \n    getRangeToRender(columnCount, columnOffsetMapping, width, scrollColumnOffset + renderColumnOffset);\n\n  // We can decide the JSX child type at runtime as long as we use a variable that uses the same capitalized\n  // naming convention as components do. \n  const ChildVar = children;\n\n  // Being far too clever. Implementing a complex iteration in JSX in a map expression by abusing the comma operator. \n  // You can't declare local variables in an expression so they need to be hoisted out of the JSX. The comma operator\n  // returns the result of the final statement which makes the iteration a little clumsier.\n  let nextRowOffset = startRowOffset - renderRowOffset;\n  let rowIndex=0, rowOffset=0;\n  let nextColumnOffset=0, columnIndex=0, columnOffset=0;\n\n  return (\n    <div onScroll={onScroll} ref={outerRef} style={{ position: \"relative\", height, width, overflow: \"auto\", willChange: \"transform\" }}>\n      <div style={{ height: renderRowSize, width: renderColumnSize }}>\n        {rowSizes.map((rowSize, rowArrayIndex) => (\n          rowOffset = nextRowOffset,\n          nextRowOffset += rowSize,\n          rowIndex = startRowIndex + rowArrayIndex,\n          nextColumnOffset = startColumnOffset - renderColumnOffset,\n          <Fragment key={itemKey(rowIndex, 0, itemData)}>\n          {columnSizes.map((columnSize, columnArrayIndex) => (\n            columnOffset = nextColumnOffset,\n            nextColumnOffset += columnSize,\n            columnIndex = startColumnIndex + columnArrayIndex,\n            <ChildVar data={itemData} key={itemKey(rowIndex, columnIndex, itemData)}\n                      rowIndex={rowIndex} columnIndex={columnIndex}\n                      isScrolling={useIsScrolling ? isScrolling : undefined}\n                      style={{ position: \"absolute\", top: rowOffset, height: rowSize, left: columnOffset, width: columnSize }}/>\n          ))}\n          </Fragment>\n        ))}\n      </div>\n    </div>\n  );\n});\n\nexport default VirtualGrid;\n","import React from \"react\";\nimport { ItemOffsetMapping, getRangeToRender, VirtualBaseItemProps, VirtualBaseProps, ScrollEvent } from './VirtualBase';\nimport { useVirtualScroll } from './useVirtualScroll';\nimport { useIsScrolling as useIsScrollingHook} from './useIsScrolling';\n\nexport interface VirtualListItemProps extends VirtualBaseItemProps {\n  index: number,\n};\n\ntype VirtualListItem = React.ComponentType<VirtualListItemProps>;\n\nexport interface VirtualListProps extends VirtualBaseProps {\n  children: VirtualListItem,\n  itemCount: number,\n  itemOffsetMapping: ItemOffsetMapping,\n  itemKey?: (index: number, data: any) => any,\n};\n\nexport interface VirtualListProxy {\n  scrollTo(offset: number): void;\n  scrollToItem(index: number): void;\n};\n\nconst defaultItemKey = (index: number, _data: any) => index;\n\n// Using a named function rather than => so that the name shows up in React Developer Tools\nexport const VirtualList = React.forwardRef<VirtualListProxy, VirtualListProps>(function VirtualList(props, ref) {\n  const { width, height, itemCount, itemOffsetMapping, children, \n    itemData = undefined, itemKey = defaultItemKey, useIsScrolling = false } = props;\n\n  // Total size is same as offset to item one off the end\n  const totalSize = itemOffsetMapping.itemOffset(itemCount);\n\n  const outerRef = React.useRef<HTMLDivElement>(null);\n  const { scrollOffset, renderOffset, renderSize, onScroll: onScrollExtent, doScrollTo } = useVirtualScroll(totalSize);\n  const isScrolling = useIsScrollingHook(outerRef); \n\n  React.useImperativeHandle(ref, () => {\n    return {\n      scrollTo(offset: number): void {\n        const outer = outerRef.current;\n        /* istanbul ignore else */\n        if (outer)\n          outer.scrollTo(0, doScrollTo(offset, outer.clientHeight));\n      },\n\n      scrollToItem(index: number): void {\n        this.scrollTo(itemOffsetMapping.itemOffset(index));\n      }\n    }\n  }, [ itemOffsetMapping ]);\n\n  function onScroll(event: ScrollEvent) {\n    const { clientHeight, scrollHeight, scrollTop, scrollLeft } = event.currentTarget;\n    const newScrollTop = onScrollExtent(clientHeight, scrollHeight, scrollTop);\n    if (newScrollTop != scrollTop && outerRef.current)\n      outerRef.current.scrollTo(scrollLeft, newScrollTop);\n  }\n\n  const [startIndex, startOffset, sizes] = getRangeToRender(itemCount, itemOffsetMapping, height, scrollOffset+renderOffset);\n\n  // We can decide the JSX child type at runtime as long as we use a variable that uses the same capitalized\n  // naming convention as components do. \n  const ChildVar = children;\n\n  // Being far too clever. Implementing a complex iteration in JSX in a map expression by abusing the comma operator. \n  // You can't declare local variables in an expression so they need to be hoisted out of the JSX. The comma operator\n  // returns the result of the final statement which makes the iteration a little clumsier.\n  let nextOffset = startOffset - renderOffset;\n  let index, offset;\n\n  return (\n    <div onScroll={onScroll} ref={outerRef} style={{ position: \"relative\", height, width, overflow: \"auto\", willChange: \"transform\" }}>\n      <div style={{ height: renderSize, width: \"100%\" }}>\n        {sizes.map((size, arrayIndex) => (\n          offset = nextOffset,\n          nextOffset += size,\n          index = startIndex + arrayIndex,\n          <ChildVar data={itemData} key={itemKey(index, itemData)} index={index}\n                    isScrolling={useIsScrolling ? isScrolling : undefined}\n                    style={{ position: \"absolute\", top: offset, height: size, width: \"100%\" }}/>\n        ))}\n      </div>\n    </div>\n  );\n});\n\nexport default VirtualList;\n","import { ItemOffsetMapping } from './VirtualBase';\n\nclass FixedSizeItemOffsetMapping implements ItemOffsetMapping {\n  constructor (itemSize: number) {\n    this.fixedItemSize = itemSize;\n  }\n\n  itemSize(_itemIndex: number): number {\n    return this.fixedItemSize;\n  }\n\n  itemOffset(itemIndex: number): number {\n    return itemIndex * this.fixedItemSize;\n  }\n\n  offsetToItem(offset: number): [itemIndex: number, startOffset: number] {\n    const itemIndex = Math.floor(offset / this.fixedItemSize);\n    const startOffset = itemIndex * this.fixedItemSize;\n\n    return [itemIndex, startOffset];\n  }\n\n  fixedItemSize: number;\n};\n\nexport function useFixedSizeItemOffsetMapping(itemSize: number) {\n  return new FixedSizeItemOffsetMapping(itemSize);\n};\n\nexport default useFixedSizeItemOffsetMapping;\n","import { ItemOffsetMapping } from './VirtualBase';\n\nclass VariableSizeItemOffsetMapping implements ItemOffsetMapping {\n  constructor (defaultItemSize: number, sizes: number[]) {\n    this.defaultItemSize = defaultItemSize;\n    this.sizes = sizes;\n  }\n\n  itemSize(itemIndex: number): number {\n    return (itemIndex < this.sizes.length) ? this.sizes[itemIndex] : this.defaultItemSize;\n  }\n\n  itemOffset(itemIndex: number): number {\n    var offset = 0;\n    let length = this.sizes.length;\n    if (itemIndex > length) {\n      const numDefaultSize = itemIndex - length;\n      offset = numDefaultSize * this.defaultItemSize;\n    } else {\n      length = itemIndex;\n    }\n    \n    for (let i = 0; i < length; i ++)\n    {\n      offset += this.sizes[i];\n    }\n\n    return offset;\n  }\n\n  offsetToItem(offset: number): [itemIndex: number, startOffset: number] {\n    var startOffset = 0;\n    const length = this.sizes.length;\n    for (let i = 0; i < length; i ++) {\n      const size = this.sizes[i];\n      if (startOffset + size > offset) {\n        return [i, startOffset];\n      }\n      startOffset += size;\n    }\n\n    const itemIndex = Math.floor((offset - startOffset) / this.defaultItemSize);\n    startOffset += itemIndex * this.defaultItemSize;\n\n    return [itemIndex+length, startOffset];\n  }\n\n  defaultItemSize: number;\n  sizes: number[];\n};\n\nexport function useVariableSizeItemOffsetMapping(defaultItemSize: number, sizes?: number[]) {\n  return new VariableSizeItemOffsetMapping(defaultItemSize, sizes || []);\n};\n\nexport default useVariableSizeItemOffsetMapping;"],"names":["defaultItemKey","useIsScrolling","useIsScrollingHook","_jsx"],"mappings":"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"}

package/package.json

@@ -0,0 +1,58 @@
+{
+  "name": "@candidstartup/react-virtual-scroll",
+  "private": false,
+  "version": "0.1.1",
+  "description": "Modern React components for lists and grids that scale to trillions of rows and columns",
+  "author": "Tim Wiegand <tim.wiegand@thecandidstartup.org>",
+  "license": "BSD-3-Clause",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/TheCandidStartup/infinisheet.git",
+    "directory": "packages/react-virtual-scroll"
+  },
+  "bugs": "https://github.com/TheCandidStartup/infinisheet/issues",
+  "homepage": "https://github.com/TheCandidStartup/infinisheet/blob/main/packages/react-virtual-scroll/README.md",
+  "keywords": [
+    "react",
+    "reactjs",
+    "virtual",
+    "window",
+    "windowed",
+    "list",
+    "scroll",
+    "scrolling",
+    "infinite",
+    "virtualized",
+    "table",
+    "grid",
+    "modern",
+    "scalable"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "type": "module",
+  "files": [
+    "dist"
+  ],
+  "module": "./dist/index.js",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js"
+    }
+  },
+  "scripts": {
+    "dev": "vite",
+    "clean": "rimraf dist",
+    "prebuild": "npm run clean",
+    "build-tsc": "tsc -p tsconfig.build.json",
+    "build-rollup": "rollup -c ../rollup.config.mjs",
+    "build": "npm run build-rollup",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "test": "vitest"
+  },
+  "peerDependencies": {
+    "react": "^18.2.0"
+  },
+  "gitHead": "0d944ff1084e8815da6f7dd5e8f35993f0ccd443"
+}