@teaui/core 1.1.4

package/.dist/components/Scrollable.js

@@ -0,0 +1,226 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Scrollable = void 0;
+const Container_1 = require("../Container");
+const geometry_1 = require("../geometry");
+const events_1 = require("../events");
+const Style_1 = require("../Style");
+/**
+ * Scrollable is meant to scroll _a single view_, ie a Stack view. But all the
+ * container views are optimized to check their _visibleRect_, and won't render
+ * children that are not in view, saving some CPU cycles.
+ */
+class Scrollable extends Container_1.Container {
+    #showScrollbars = true;
+    #scrollHeight = 1;
+    #scrollWidth = 2;
+    #contentOffset;
+    #contentSize = geometry_1.Size.zero;
+    #visibleSize = geometry_1.Size.zero;
+    #prevMouseDown = undefined;
+    constructor(props) {
+        super(props);
+        this.#contentOffset = { x: 0, y: 0 };
+        this.#update(props);
+    }
+    update(props) {
+        this.#update(props);
+        super.update(props);
+    }
+    #update({ scrollHeight, scrollWidth, showScrollbars }) {
+        this.#showScrollbars = showScrollbars ?? true;
+        this.#scrollHeight = scrollHeight ?? 1;
+        this.#scrollWidth = scrollWidth ?? 2;
+    }
+    naturalSize(available) {
+        const size = super.naturalSize(available).mutableCopy();
+        size.width = Math.min(size.width, available.width);
+        size.height = Math.min(size.height, available.height);
+        return size;
+    }
+    #maxOffsetX() {
+        const tooTall = this.#contentSize.height > this.contentSize.height;
+        return this.#visibleSize.width - this.#contentSize.width + (tooTall ? 0 : 1);
+    }
+    #maxOffsetY() {
+        const tooWide = this.#contentSize.width > this.contentSize.width;
+        return (this.#visibleSize.height - this.#contentSize.height + (tooWide ? 0 : 1));
+    }
+    receiveMouse(event) {
+        if ((0, events_1.isMouseWheel)(event)) {
+            this.receiveWheel(event);
+            return;
+        }
+        if (event.name === 'mouse.button.up') {
+            this.#prevMouseDown = undefined;
+            return;
+        }
+        const tooWide = this.#contentSize.width > this.contentSize.width;
+        const tooTall = this.#contentSize.height > this.contentSize.height;
+        if (tooWide &&
+            tooTall &&
+            event.position.y === this.contentSize.height - 1 &&
+            event.position.x === this.contentSize.width - 1) {
+            // bottom-right corner click
+            return;
+        }
+        if (this.#prevMouseDown === undefined) {
+            if (tooWide && event.position.y === this.contentSize.height) {
+                this.#prevMouseDown = 'horizontal';
+            }
+            else if (tooTall && event.position.x === this.contentSize.width) {
+                this.#prevMouseDown = 'vertical';
+            }
+            else {
+                return;
+            }
+        }
+        this.receiveMouseDown(event);
+    }
+    receiveMouseDown(event) {
+        const tooWide = this.#contentSize.width > this.contentSize.width;
+        const tooTall = this.#contentSize.height > this.contentSize.height;
+        if (tooWide && this.#prevMouseDown === 'horizontal') {
+            const maxX = this.#maxOffsetX();
+            const offsetX = Math.round((0, geometry_1.interpolate)(event.position.x, [0, this.contentSize.width - (tooTall ? 1 : 0)], [0, maxX]));
+            this.#contentOffset = {
+                x: Math.max(maxX, Math.min(0, offsetX)),
+                y: this.#contentOffset.y,
+            };
+        }
+        else if (tooTall && this.#prevMouseDown === 'vertical') {
+            const maxY = this.#maxOffsetY();
+            const offsetY = Math.round((0, geometry_1.interpolate)(event.position.y, [0, this.contentSize.height - (tooWide ? 1 : 0)], [0, maxY]));
+            this.#contentOffset = {
+                x: this.#contentOffset.x,
+                y: Math.max(maxY, Math.min(0, offsetY)),
+            };
+        }
+    }
+    receiveWheel(event) {
+        let deltaY = 0, deltaX = 0;
+        if (event.name === 'mouse.wheel.up') {
+            deltaY = this.#scrollHeight * -1;
+        }
+        else if (event.name === 'mouse.wheel.down') {
+            deltaY = this.#scrollHeight;
+        }
+        else if (event.name === 'mouse.wheel.left') {
+            deltaX = this.#scrollWidth;
+        }
+        else if (event.name === 'mouse.wheel.right') {
+            deltaX = this.#scrollWidth * -1;
+        }
+        if (event.ctrl) {
+            deltaY *= 5;
+            deltaX *= 5;
+        }
+        const tooTall = (this.#contentSize?.height ?? 0) > this.contentSize.height;
+        if (!tooTall && deltaX === 0) {
+            deltaX = deltaY;
+        }
+        this.scrollBy(deltaX, deltaY);
+    }
+    /**
+     * Moves the visible region. The visible region is stored as a pointer to the
+     * top-most row and an offset from the top of that row (see `interface ContentOffset`)
+     *
+     * Positive offset scrolls *down* (currentOffset goes more negative)
+     *
+     * When current cell is entirely above the top, we set the `contentOffset` to the
+     * row that is at the top of the screen and still visible, similarly if the current
+     * cell is below the top, we fetch enough rows about and update the `contentOffset`
+     * to point to the top-most row.
+     */
+    scrollBy(offsetX, offsetY) {
+        if (offsetX === 0 && offsetY === 0) {
+            return;
+        }
+        const tooWide = this.#contentSize.width > this.contentSize.width;
+        const tooTall = this.#contentSize.height > this.contentSize.height;
+        let { x, y } = this.#contentOffset;
+        const maxX = this.#maxOffsetX();
+        const maxY = this.#maxOffsetY();
+        x = Math.min(0, Math.max(maxX, x - offsetX));
+        y = Math.min(0, Math.max(maxY, y - offsetY));
+        this.#contentOffset = { x, y };
+    }
+    get contentSize() {
+        const delta = this.#showScrollbars ? 1 : 0;
+        return super.contentSize.shrink(delta, delta);
+    }
+    render(viewport) {
+        if (viewport.isEmpty) {
+            return super.render(viewport);
+        }
+        viewport.registerMouse('mouse.wheel');
+        let contentSize = geometry_1.Size.zero.mutableCopy();
+        for (const child of this.children) {
+            const childSize = child.naturalSize(viewport.contentSize);
+            contentSize.width = Math.max(contentSize.width, childSize.width);
+            contentSize.height = Math.max(contentSize.height, childSize.height);
+        }
+        this.#contentSize = contentSize;
+        const tooWide = contentSize.width > viewport.contentSize.width;
+        const tooTall = contentSize.height > viewport.contentSize.height;
+        // #contentOffset is _negative_ (indicates the amount to move the view away
+        // from the origin, which will always be up/left of 0,0)
+        const outside = new geometry_1.Rect([this.#contentOffset.x, this.#contentOffset.y], viewport.contentSize
+            .shrink(this.#contentOffset.x, this.#contentOffset.y)
+            .shrink(this.#showScrollbars && tooTall ? 1 : 0, this.#showScrollbars && tooWide ? 1 : 0));
+        viewport.clipped(outside, inside => {
+            for (const child of this.children) {
+                child.render(inside);
+            }
+        });
+        this.#visibleSize = viewport.visibleRect.size.shrink(tooWide ? 1 : 0, tooTall ? 1 : 0);
+        if (this.#showScrollbars && (tooWide || tooTall)) {
+            const scrollBar = new Style_1.Style({
+                foreground: this.theme.darkenColor,
+                background: this.theme.darkenColor,
+            });
+            const scrollControl = new Style_1.Style({
+                foreground: this.theme.highlightColor,
+                background: this.theme.highlightColor,
+            });
+            // scrollMaxX: x of the last column of the view
+            // scrollMaxY: y of the last row of the view
+            // scrollMaxHorizX: horizontal scroll bar is drawn from 0 to scrollMaxHorizX
+            // scrollMaxHorizY: vertical scroll bar is drawn from 0 to scrollMaxHorizY
+            const scrollMaxX = viewport.contentSize.width - 1, scrollMaxY = viewport.contentSize.height - 1, scrollMaxHorizX = scrollMaxX - (tooTall ? 1 : 0), scrollMaxVertY = scrollMaxY - (tooWide ? 1 : 0);
+            if (tooWide && tooTall) {
+                viewport.write('█', new geometry_1.Point(scrollMaxX, scrollMaxY), scrollBar);
+            }
+            if (tooWide) {
+                viewport.registerMouse('mouse.button.left', new geometry_1.Rect(new geometry_1.Point(0, scrollMaxY), new geometry_1.Size(scrollMaxHorizX + 1, 1)));
+                const contentOffsetX = -this.#contentOffset.x;
+                const viewX = Math.round((0, geometry_1.interpolate)(contentOffsetX, [
+                    0,
+                    contentSize.width -
+                        viewport.contentSize.width +
+                        (tooTall ? 1 : 0),
+                ], [0, scrollMaxHorizX]));
+                for (let x = 0; x <= scrollMaxHorizX; x++) {
+                    const inRange = x === viewX;
+                    viewport.write(inRange ? '█' : ' ', new geometry_1.Point(x, scrollMaxY), inRange ? scrollControl : scrollBar);
+                }
+            }
+            if (tooTall) {
+                viewport.registerMouse('mouse.button.left', new geometry_1.Rect(new geometry_1.Point(scrollMaxX, 0), new geometry_1.Size(1, scrollMaxVertY + 1)));
+                const contentOffsetY = -this.#contentOffset.y;
+                const viewY = Math.round((0, geometry_1.interpolate)(contentOffsetY, [
+                    0,
+                    contentSize.height -
+                        viewport.contentSize.height +
+                        (tooWide ? 1 : 0),
+                ], [0, scrollMaxVertY]));
+                for (let y = 0; y <= scrollMaxVertY; y++) {
+                    const inRange = y === viewY;
+                    viewport.write(inRange ? '█' : ' ', new geometry_1.Point(scrollMaxX, y), inRange ? scrollControl : scrollBar);
+                }
+            }
+        }
+    }
+}
+exports.Scrollable = Scrollable;
+//# sourceMappingURL=Scrollable.js.map

package/.dist/components/Scrollable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Scrollable.js","sourceRoot":"","sources":["../../lib/components/Scrollable.ts"],"names":[],"mappings":"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"}

package/.dist/components/ScrollableList.d.ts

@@ -0,0 +1,70 @@
+import type { Viewport } from '../Viewport';
+import { type Props as ViewProps, View } from '../View';
+import { Container } from '../Container';
+import { Size } from '../geometry';
+import { type MouseEvent } from '../events';
+interface Props<T> extends ViewProps {
+    items: T[];
+    cellForItem: (item: T, row: number) => View;
+    /**
+     * Show/hide the scrollbars
+     * @default true
+     */
+    showScrollbars?: boolean;
+    /**
+     * How many rows to scroll by when using the mouse wheel.
+     * @default 1
+     */
+    scrollHeight?: number;
+    /**
+     * Useful for log views
+     */
+    keepAtBottom?: boolean;
+}
+interface ContentOffset {
+    row: number;
+    offset: number;
+}
+export declare class ScrollableList<T> extends Container {
+    #private;
+    constructor({ cellForItem, items, keepAtBottom, scrollHeight, showScrollbars, ...viewProps }: Props<T>);
+    update(props: Props<T>): void;
+    naturalSize(available: Size): Size;
+    /**
+     * Tells ScrollableList to re-fetch all rows.
+     */
+    invalidate(): void;
+    /**
+     * Tells ScrollableList to re-fetch the visible rows.
+     * @param forCache: 'size' | 'view' representing which cache to invalidate
+     */
+    invalidateAllRows(forCache: 'size' | 'view'): void;
+    /**
+     * Tells ScrollableList to refetch a specific row
+     * @param row: the row to invalidate
+     * @param forCache: 'size' | 'view'   representing which cache to invalidate
+     */
+    invalidateItem(item: T, forCache: 'size' | 'view'): void;
+    invalidateSize(): void;
+    receiveMouse(event: MouseEvent): void;
+    /**
+     * Moves the visible region. The visible region is stored as a pointer to the
+     * top-most row and an offset from the top of that row (see `interface ContentOffset`)
+     *
+     * Positive offset scrolls *down* (currentOffset goes more negative)
+     *
+     * When current cell is entirely above the top, we set the `contentOffset` to the
+     * row that is at the top of the screen and still visible, similarly if the current
+     * cell is below the top, we fetch enough rows about and update the `contentOffset`
+     * to point to the top-most row.
+     */
+    scrollBy(offset: number): void;
+    updateItems(items: T[]): void;
+    viewForRow(row: number): View | undefined;
+    sizeForRow(row: number, contentWidth: number, view: View): Size;
+    sizeForRow(row: number, contentWidth: number): Size | undefined;
+    get contentSize(): Size;
+    lastOffset(): ContentOffset;
+    render(viewport: Viewport): void;
+}
+export {};

package/.dist/components/ScrollableList.js

@@ -0,0 +1,354 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ScrollableList = void 0;
+const Container_1 = require("../Container");
+const Style_1 = require("../Style");
+const geometry_1 = require("../geometry");
+const events_1 = require("../events");
+class ScrollableList extends Container_1.Container {
+    /**
+     * Your function here need not return "stable" views; the views returned by this
+     * function will be cached until you call `scrollableList.invalidateCache()` or
+     * `scrollableList.invalidateRow(row)`.
+     */
+    #items;
+    #cellForItem;
+    #keepAtBottom;
+    #isAtBottom = true;
+    #showScrollbars;
+    #scrollHeight;
+    #contentOffset;
+    #maxWidth = 0;
+    #viewCache = new Map();
+    #sizeCache = new Map();
+    #totalHeight;
+    constructor({ cellForItem, items, keepAtBottom, scrollHeight, showScrollbars, ...viewProps }) {
+        super(viewProps);
+        this.#showScrollbars = showScrollbars ?? true;
+        this.#contentOffset = { row: 0, offset: 0 };
+        this.#cellForItem = cellForItem;
+        this.#scrollHeight = scrollHeight ?? 1;
+        this.#items = items;
+        this.#keepAtBottom = keepAtBottom ?? false;
+    }
+    update(props) {
+        this.#update(props);
+        super.update(props);
+    }
+    #update({}) { }
+    naturalSize(available) {
+        let { row, offset: y } = this.#contentOffset;
+        const scrollWidth = this.#showScrollbars ? 1 : 0;
+        while (y < available.height) {
+            const view = this.viewForRow(row);
+            if (!view) {
+                break;
+            }
+            const rowSize = this.sizeForRow(row, available.width - scrollWidth, view);
+            // persist #maxWidth so that the largest row _remains_ the largest row even
+            // after it scrolls out of the visible window
+            this.#maxWidth = Math.max(this.#maxWidth, rowSize.width);
+            y += rowSize.height;
+            row += 1;
+        }
+        return new geometry_1.Size(this.#maxWidth + scrollWidth, available.height);
+    }
+    /**
+     * Tells ScrollableList to re-fetch all rows.
+     */
+    invalidate() {
+        this.#maxWidth = 0;
+        this.invalidateAllRows('view');
+        super.invalidateSize();
+    }
+    /**
+     * Tells ScrollableList to re-fetch the visible rows.
+     * @param forCache: 'size' | 'view' representing which cache to invalidate
+     */
+    invalidateAllRows(forCache) {
+        if (forCache === 'view') {
+            this.#viewCache = new Map();
+        }
+        this.#sizeCache = new Map();
+    }
+    /**
+     * Tells ScrollableList to refetch a specific row
+     * @param row: the row to invalidate
+     * @param forCache: 'size' | 'view'   representing which cache to invalidate
+     */
+    invalidateItem(item, forCache) {
+        if (forCache === 'view') {
+            this.#viewCache.delete(item);
+        }
+        this.#sizeCache.delete(item);
+    }
+    invalidateSize() {
+        this.#maxWidth = 0;
+        this.invalidateAllRows('size');
+        super.invalidateSize();
+    }
+    receiveMouse(event) {
+        if (event.name === 'mouse.wheel.up') {
+            this.scrollBy(this.#scrollHeight * -1);
+        }
+        else if (event.name === 'mouse.wheel.down') {
+            this.scrollBy(this.#scrollHeight);
+        }
+        else if ((0, events_1.isMouseDragging)(event) && this.#totalHeight) {
+            if (this.#totalHeight <= this.contentSize.height) {
+                this.#contentOffset = { row: 0, offset: 0 };
+                return;
+            }
+            const maxY = this.#totalHeight - this.contentSize.height;
+            const heightY = Math.round((0, geometry_1.interpolate)(Math.max(0, Math.min(this.contentSize.height - 1, event.position.y)), [0, this.contentSize.height - 1], [0, maxY]));
+            this.#isAtBottom = heightY === maxY;
+            const cellWidth = this.contentSize.width;
+            for (let row = 0, y = 0; row < this.#items.length; row++) {
+                const rowHeight = this.sizeForRow(row, cellWidth)?.height;
+                if (rowHeight === undefined) {
+                    break;
+                }
+                if (y + rowHeight >= heightY) {
+                    this.#contentOffset = { row, offset: y - heightY };
+                    return;
+                }
+                y += rowHeight;
+            }
+        }
+    }
+    /**
+     * Moves the visible region. The visible region is stored as a pointer to the
+     * top-most row and an offset from the top of that row (see `interface ContentOffset`)
+     *
+     * Positive offset scrolls *down* (currentOffset goes more negative)
+     *
+     * When current cell is entirely above the top, we set the `contentOffset` to the
+     * row that is at the top of the screen and still visible, similarly if the current
+     * cell is below the top, we fetch enough rows about and update the `contentOffset`
+     * to point to the top-most row.
+     */
+    scrollBy(offset) {
+        if (offset === 0) {
+            return;
+        }
+        this.invalidateSize();
+        const { row, offset: currentOffset } = this.#contentOffset;
+        let height = this.sizeForRow(row, this.contentSize.width)?.height;
+        if (height === undefined) {
+            this.#contentOffset = { row: 0, offset: 0 };
+            return;
+        }
+        // prevent scrolling if there is no more content
+        if (offset > 0) {
+            const doScroll = this.#checkScrollDown(row, currentOffset, height);
+            if (!doScroll) {
+                this.#isAtBottom = true;
+                return;
+            }
+        }
+        else if (row === 0 && currentOffset >= 0) {
+            // no helper function necessary here - if offset < 0, do not scroll if we are
+            // already at the top
+            return;
+        }
+        this.#isAtBottom = false;
+        let nextOffset = currentOffset - offset;
+        if (nextOffset <= -height) {
+            this.#contentOffset = this.#scrollDownToNextRow(row, nextOffset, height);
+        }
+        else if (nextOffset > 0) {
+            this.#contentOffset = this.#scrollUpToPrevRow(row, nextOffset, height);
+        }
+        else {
+            this.#contentOffset = { row: row, offset: nextOffset };
+        }
+    }
+    updateItems(items) {
+        this.#items = items;
+        this.invalidateAllRows('view');
+        this.invalidateSize();
+    }
+    viewForRow(row) {
+        if (row < 0 || row >= this.#items.length) {
+            return;
+        }
+        const item = this.#items[row];
+        let view = this.#viewCache.get(item);
+        if (!view) {
+            view = this.#cellForItem(item, row);
+            if (view) {
+                this.#viewCache.set(item, view);
+            }
+        }
+        return view;
+    }
+    sizeForRow(row, contentWidth, view) {
+        const item = this.#items[row];
+        if (contentWidth === this.contentSize.width && item) {
+            const size = this.#sizeCache.get(item);
+            if (size !== undefined) {
+                return size;
+            }
+        }
+        view = view ?? this.viewForRow(row);
+        if (view === undefined) {
+            return undefined;
+        }
+        const size = view.naturalSize(new geometry_1.Size(contentWidth, 0));
+        if (contentWidth === this.contentSize.width && item) {
+            this.#sizeCache.set(item, size);
+        }
+        return size;
+    }
+    get contentSize() {
+        return super.contentSize.shrink(this.#showScrollbars ? 1 : 0, 0);
+    }
+    lastOffset() {
+        const cellCount = this.#items.length;
+        const cellWidth = this.contentSize.width;
+        let row = cellCount - 1;
+        let y = 0;
+        while (y < this.contentSize.height) {
+            const height = this.sizeForRow(row, cellWidth)?.height;
+            if (height === undefined) {
+                return { row: 0, offset: 0 };
+            }
+            y += height;
+            if (y >= this.contentSize.height) {
+                break;
+            }
+            row -= 1;
+        }
+        return { row, offset: this.contentSize.height - y };
+    }
+    render(viewport) {
+        if (viewport.isEmpty) {
+            return super.render(viewport);
+        }
+        viewport.registerMouse('mouse.wheel');
+        if (this.#contentOffset.row >= this.#items.length ||
+            (this.#keepAtBottom && this.#isAtBottom)) {
+            const offset = this.lastOffset();
+            this.#contentOffset = offset;
+        }
+        const cellWidth = this.contentSize.width;
+        const prevRows = new Set(this.children);
+        const visibleRows = new Set();
+        let { row, offset: y } = this.#contentOffset;
+        let heights = [0, 0, 0];
+        if (this.#showScrollbars) {
+            for (let i = 0; i < row; i++) {
+                heights[0] += this.sizeForRow(i, cellWidth)?.height ?? 0;
+            }
+            heights[1] = heights[0];
+        }
+        while (y < viewport.contentSize.height) {
+            const view = this.viewForRow(row);
+            if (!view) {
+                break;
+            }
+            const height = this.sizeForRow(row, cellWidth, view)?.height;
+            if (y === this.#contentOffset.offset && y + height <= 0) {
+                y = this.#contentOffset.offset = 0;
+            }
+            row += 1;
+            heights[1] += height;
+            if (view.parent !== this) {
+                this.add(view);
+            }
+            visibleRows.add(view);
+            if (y < viewport.visibleRect.maxY() &&
+                y + height >= viewport.visibleRect.minY()) {
+                const rect = new geometry_1.Rect(new geometry_1.Point(0, y), new geometry_1.Size(cellWidth, height));
+                viewport.clipped(rect, inside => {
+                    view.render(inside);
+                });
+            }
+            y += height;
+            if (y >= viewport.contentSize.height) {
+                break;
+            }
+        }
+        for (const prevRow of prevRows) {
+            if (!visibleRows.has(prevRow)) {
+                this.removeChild(prevRow);
+            }
+        }
+        if (this.#showScrollbars) {
+            viewport.registerMouse('mouse.button.left', new geometry_1.Rect(new geometry_1.Point(cellWidth, 0), new geometry_1.Size(1, viewport.contentSize.height)));
+            heights[2] = heights[1];
+            for (let i = row; i < this.#items.length; i++) {
+                const rowHeight = this.sizeForRow(i, cellWidth)?.height;
+                if (rowHeight === undefined) {
+                    break;
+                }
+                heights[2] += rowHeight;
+            }
+            this.#totalHeight = heights[2];
+            for (let y = 0; y < viewport.contentSize.height; y++) {
+                const h = (0, geometry_1.interpolate)(y, [0, viewport.contentSize.height - 1], [0, heights[2]]);
+                const inRange = ~~h >= heights[0] && ~~h <= heights[1] + 1;
+                viewport.write(inRange ? '█' : ' ', new geometry_1.Point(cellWidth, y), new Style_1.Style(inRange
+                    ? {
+                        foreground: this.theme.highlightColor,
+                        background: this.theme.highlightColor,
+                    }
+                    : {
+                        foreground: this.theme.darkenColor,
+                        background: this.theme.darkenColor,
+                    }));
+            }
+        }
+    }
+    /**
+     * Returns 'true' if the scroll should be allowed, returns 'false' if there
+     * is no more content to be shown (do not scroll down)
+     */
+    #checkScrollDown(row, currentOffset, height) {
+        // add heights of visible cells – if we run out of cells before
+        // y > this.contentSize, exit. Otherwise, scroll.
+        let y = currentOffset;
+        let nextRow = row;
+        let nextHeight = height;
+        while (nextHeight !== undefined) {
+            y += nextHeight;
+            if (y > this.contentSize.height) {
+                return true;
+            }
+            nextHeight = this.sizeForRow(++nextRow, this.contentSize.width)?.height;
+            if (nextHeight === undefined) {
+                return false;
+            }
+        }
+    }
+    #scrollDownToNextRow(row, nextOffset, height) {
+        let nextRow = row;
+        while (nextOffset <= -height) {
+            const nextHeight = this.sizeForRow(nextRow + 1, this.contentSize.width)?.height;
+            if (nextHeight === undefined) {
+                nextOffset = -height;
+                break;
+            }
+            nextOffset += height;
+            height = nextHeight;
+            nextRow += 1;
+        }
+        return { row: nextRow, offset: nextOffset };
+    }
+    #scrollUpToPrevRow(row, nextOffset, height) {
+        let nextRow = row;
+        while (nextOffset > 0) {
+            const nextHeight = this.sizeForRow(nextRow - 1, this.contentSize.width)?.height;
+            if (nextHeight === undefined) {
+                nextOffset = 0;
+                break;
+            }
+            height = nextHeight;
+            nextOffset -= height;
+            nextRow -= 1;
+        }
+        return { row: nextRow, offset: nextOffset };
+    }
+}
+exports.ScrollableList = ScrollableList;
+//# sourceMappingURL=ScrollableList.js.map