@swan-io/lake 1.0.0

package/src/components/FixedListView.js

@@ -0,0 +1,821 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * ## FixedListView
+ *
+ * The FixedListView is a component designed to render big amounts of tabular data.
+ *
+ * For usability, the data can be display in three types of columns:
+ *
+ * - Sticked to start columns (usually the main identifier, always visible)
+ * - Center columns (scrollable columns, with additional information)
+ * - Sticked to end columns (so that some actions are always accesible at the end of each line)
+ *
+ * ┌────────────────────────────────────────────────────────────────────────────────────────┐
+ * │ ┌────────────────┐ ┌────────────────────────────────────────┐ ┌────────────────┐       │
+ * │ │ ╔════════════╗ │ │ ╔════════════════════════════════════╗ │ │ ╔════════════╗ │       │
+ * │ │ ║   Header   ║ │ │ ║               Header               ║ │ │ ║   Header   ║ │ ▲     │
+ * │ │ ║            ║ │ │ ║◀──────────────────────────────────▶║ │ │ ║            ║ │ │     │
+ * │ │ ╚════════════╝ │ │ ╚════════════════════════════════════╝ │ │ ╚════════════╝ │ │     │
+ * │ │                │ │                                        │ │                │ │     │
+ * │ │ ┌───────────┐  │ │ ┌────────────────────────────────────┐ │ │ ┌────────────┐ │ │     │
+ * │ │ │  Cell A1  │──┼─┼▷│              Cell B1               ├─┼─┼─▷  Cell C1   │ │ │     │
+ * │ │ └───────────┘  │ │ └────────────────────────────────────┘ │ │ └────────────┘ │ │     │
+ * │ │ ┌───────────┐  │ │ ┌────────────────────────────────────┐ │ │ ┌────────────┐ │ │     │
+ * │ │ │  Cell A2  │──┼─┼▷│              Cell B2               │─┼─┼─▷  Cell C2   │ │ │     │
+ * │ │ └───────────┘  │ │ └────────────────────────────────────┘ │ │ └────────────┘ │ │     │
+ * │ │                │ │                                        │ │                │ │     │
+ * │ │                │ │ ◀────────────────────────────────────▶ │ │                │ ▼     │
+ * └─┴────────────────┴─┴────────────────────────────────────────┴─┴────────────────┴───────┘
+ *
+ * ╔════╗
+ * ║    ║   Sticky
+ * ╚════╝
+ * ◀────▶   Scrollable
+ * ─────▷   Emulated tab order
+ *
+ */
+import { cloneElement, Fragment, memo, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState, } from "react";
+import { ScrollView, StyleSheet, View, } from "react-native";
+import { match } from "ts-pattern";
+import { v4 as uuid } from "uuid";
+import { backgroundColor, colors, invariantColors, radii, shadows, spacings, } from "../constants/design";
+import { useHover } from "../hooks/useHover";
+import { getFocusableElements } from "../utils/a11y";
+import { first, last, sortedIndexOf } from "../utils/array";
+import { noop } from "../utils/function";
+import { isNotNullish, isNullish } from "../utils/nullish";
+import { BorderedIcon } from "./BorderedIcon";
+import { Icon } from "./Icon";
+import { LakeHeading } from "./LakeHeading";
+import { LakeText } from "./LakeText";
+import { Space } from "./Space";
+const HORIZONTAL_SAFE_AREA = 10;
+const SCROLLBAR_RESERVED_SPACE = 20;
+const styles = StyleSheet.create({
+    root: {
+        height: 1,
+        alignSelf: "stretch",
+        flexGrow: 1,
+    },
+    container: {
+        height: 1,
+        alignSelf: "stretch",
+        flexGrow: 1,
+    },
+    containerTile: {
+        marginHorizontal: -HORIZONTAL_SAFE_AREA,
+    },
+    contentContainer: {
+        flexDirection: "row",
+        alignItems: "stretch",
+        flexGrow: 1,
+    },
+    scrollContentContainer: {
+        flexGrow: 1,
+        flexDirection: "row",
+        alignItems: "stretch",
+    },
+    centerColumnsContainer: {
+        width: 1,
+        flexGrow: 1,
+        flexDirection: "column",
+        alignItems: "stretch",
+    },
+    centerColumns: {
+        flexGrow: 1,
+    },
+    centerColumnsContentContainer: {
+        flexDirection: "column",
+        flexGrow: 1,
+    },
+    stickyColumn: {
+        flexGrow: 0,
+        zIndex: 1,
+    },
+    stickyColumnStartOverflow: {
+        position: "absolute",
+        top: 0,
+        bottom: 0,
+        right: "100%",
+        width: HORIZONTAL_SAFE_AREA,
+        backgroundColor: backgroundColor.default,
+    },
+    stickyColumnEndOverflow: {
+        position: "absolute",
+        top: 0,
+        bottom: 0,
+        left: "100%",
+        width: HORIZONTAL_SAFE_AREA,
+        backgroundColor: backgroundColor.default,
+    },
+    rowSegment: {
+        position: "absolute",
+        left: 0,
+        right: 0,
+        display: "flex",
+        flexGrow: 1,
+        alignSelf: "stretch",
+        flexDirection: "row",
+        alignItems: "stretch",
+        transitionProperty: "top",
+        transitionDuration: "300ms",
+        transitionTimingFunction: "ease-in-out",
+        overflow: "hidden",
+    },
+    headingSegment: {
+        position: "sticky",
+        top: 0,
+        flexDirection: "row",
+        alignItems: "stretch",
+        zIndex: 2,
+        backgroundColor: backgroundColor.default,
+    },
+    segment: {
+        flexDirection: "row",
+        alignItems: "stretch",
+        overflow: "hidden",
+    },
+    segmentOverflow: {
+        overflow: "hidden",
+        flexDirection: "row",
+        alignItems: "stretch",
+    },
+    visibleGradient: {
+        opacity: 1,
+    },
+    leftToRightGradient: {
+        position: "absolute",
+        left: 0,
+        top: 0,
+        height: "100%",
+        width: 10,
+        backgroundImage: "linear-gradient(to right, rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0))",
+        opacity: 0,
+        transition: "150ms ease-in-out opacity",
+    },
+    rightToLeftGradient: {
+        position: "absolute",
+        right: 0,
+        top: 0,
+        height: "100%",
+        width: 10,
+        backgroundImage: "linear-gradient(to left, rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0))",
+        opacity: 0,
+        transition: "150ms ease-in-out opacity",
+    },
+    horizontalScrollbar: {
+        position: "sticky",
+        bottom: 0,
+        borderBottomWidth: 5,
+        borderBottomColor: invariantColors.transparent,
+        flexGrow: 0,
+        height: SCROLLBAR_RESERVED_SPACE,
+    },
+    cell: {
+        flexDirection: "row",
+        alignItems: "stretch",
+    },
+    stickyRow: {
+    // overflow: "hidden",
+    },
+    evenRow: {
+        backgroundColor: backgroundColor.accented,
+    },
+    oddRow: {
+        backgroundColor: backgroundColor.default,
+    },
+    rowShadow: {
+        boxShadow: shadows.tile,
+    },
+    hoveredRowShadow: {
+        boxShadow: shadows.tileHover,
+    },
+    highlightedRow: {
+        borderColor: colors.current.primary,
+        borderWidth: 1,
+    },
+    segmentHeaderCell: {
+        display: "flex",
+        flexDirection: "row",
+        flexGrow: 1,
+        alignItems: "center",
+    },
+    rowBackground: {
+        borderRadius: radii[4],
+        transitionProperty: "top",
+        transitionDuration: "300ms",
+        transitionTimingFunction: "ease-in-out",
+    },
+    rowPlainBackground: {
+        transitionProperty: "top",
+        transitionDuration: "300ms",
+        transitionTimingFunction: "ease-in-out",
+    },
+    rowBackgroundContainer: {
+        position: "absolute",
+        left: 0,
+        right: 0,
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "stretch",
+        justifyContent: "center",
+        transitionProperty: "top",
+        transitionDuration: "300ms",
+        transitionTimingFunction: "ease-in-out",
+    },
+    rowBackgroundContainerPlain: {
+        backgroundColor: backgroundColor.default,
+        left: -10,
+        right: -10,
+        boxShadow: `inset 0 -1px ${colors.gray[100]}`,
+    },
+    backgroundRows: {
+        position: "absolute",
+        left: HORIZONTAL_SAFE_AREA,
+        right: HORIZONTAL_SAFE_AREA,
+        top: 0,
+        bottom: 0,
+    },
+    placeholderRowContainer: {
+        flexDirection: "row",
+        alignItems: "center",
+        position: "absolute",
+        top: 0,
+        left: 20,
+        right: 20,
+        animationKeyframes: {
+            "50%": {
+                opacity: 0.6,
+            },
+        },
+        animationDuration: "2000ms",
+        animationTimingFunction: "linear",
+        animationIterationCount: "infinite",
+    },
+    placeholderRowContainerPlain: {
+        left: 10,
+    },
+    placeholderRow: {
+        height: 14,
+        width: "30%",
+        backgroundColor: colors.gray[200],
+        borderRadius: radii[6],
+    },
+    placeholderRowEnd: {
+        flexGrow: 1,
+        flexDirection: "row",
+        alignItems: "center",
+        justifyContent: "flex-end",
+    },
+    smallPlaceholderRow: {
+        width: "10%",
+    },
+    centerSegmentContainer: {
+        flexGrow: 1,
+    },
+    rowLeftRadii: {
+        borderTopLeftRadius: radii[4],
+        borderBottomLeftRadius: radii[4],
+    },
+    rowRightRadii: {
+        borderTopRightRadius: radii[4],
+        borderBottomRightRadius: radii[4],
+    },
+    emptyListContainer: {
+        position: "absolute",
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+        padding: spacings[48],
+        backgroundColor: backgroundColor.default,
+    },
+    emptyList: {
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+    },
+    loadingPlaceholder: {
+        position: "absolute",
+        left: 0,
+        right: 0,
+    },
+    topGradient: {
+        height: 30,
+        position: "absolute",
+        left: 0,
+        right: 0,
+        top: "100%",
+        backgroundImage: `linear-gradient(to bottom, ${backgroundColor.default}, ${backgroundColor.defaultTransparent})`,
+        opacity: 0,
+        transition: "200ms ease-in-out opacity",
+    },
+    visibleTopGradient: {
+        opacity: 1,
+    },
+});
+const RowBackground = ({ absoluteIndex, id, isHovered, isHighlighted, top, rowHeight, rowVerticalSpacing, onMouseEnter, onMouseLeave, mode, }) => {
+    const containerRef = useRef(null);
+    useHover(containerRef, {
+        onHoverStart: () => onMouseEnter(id),
+        onHoverEnd: () => onMouseLeave(),
+    });
+    return (_jsx(View, { style: [
+            styles.rowBackgroundContainer,
+            mode === "plain" && styles.rowBackgroundContainerPlain,
+            { top, paddingVertical: rowVerticalSpacing / 2 },
+        ], ref: containerRef, children: mode === "tile" ? (_jsx(View, { style: [
+                styles.rowBackground,
+                isHovered ? styles.hoveredRowShadow : styles.rowShadow,
+                isHighlighted && styles.highlightedRow,
+                absoluteIndex % 2 === 0 ? styles.evenRow : styles.oddRow,
+                { height: rowHeight },
+            ] })) : (_jsx(View, { style: [styles.rowPlainBackground, { height: rowHeight }] })) }));
+};
+const MemoizedRowBackground = memo(RowBackground);
+const SEGMENTS_MAP = {
+    start: "0",
+    center: "1",
+    end: "2",
+};
+const RowSegment = ({ columns, item, style, absoluteIndex, viewId, segmentColumn, rowVerticalSpacing, width, id, isHovered, extraInfo, onMouseEnter, onMouseLeave, createRowWrapper, focusId, top, totalRowHeight, minWidth, }) => {
+    const containerRef = useRef(null);
+    useHover(containerRef, {
+        onHoverStart: () => onMouseEnter(id),
+        onHoverEnd: () => onMouseLeave(),
+    });
+    const wrapper = createRowWrapper({ item, absoluteIndex, extraInfo });
+    return cloneElement(wrapper, {
+        focusable: true,
+        nativeID: focusId,
+        style: [
+            styles.rowSegment,
+            {
+                top,
+                height: totalRowHeight,
+                width: isNullish(minWidth) ? width : undefined,
+                minWidth,
+            },
+        ],
+    }, _jsx(View, { style: [
+            styles.segment,
+            { width, paddingVertical: rowVerticalSpacing / 2 },
+            segmentColumn === "center" && styles.centerSegmentContainer,
+            segmentColumn === "start" && {
+                borderTopLeftRadius: radii[4],
+                borderBottomLeftRadius: radii[4],
+            },
+            segmentColumn === "end" && {
+                borderTopRightRadius: radii[4],
+                borderBottomRightRadius: radii[4],
+            },
+        ], ref: containerRef, accessibilityHidden: false, children: _jsx(View, { style: [styles.segmentOverflow, style], children: columns.map(({ id, width, renderCell }, index) => {
+                const columnId = `${viewId}_${id}`;
+                const paddedIndex = String(absoluteIndex).padStart(10, "0");
+                const paddedCellIndex = String(index).padStart(10, "0");
+                // The reason we use this shape is so that the IDs alphabetical order matches the semantical one:
+                // 1. Row index
+                // 2. Column index
+                // 3. Cell index
+                // -> See the `onKeyDown` handler
+                const focusId = `${viewId}__Row_${paddedIndex}_Segment_${SEGMENTS_MAP[segmentColumn]}_Cell_${paddedCellIndex}`;
+                return (_jsx(View, { style: [styles.cell, { width }], accessibilityDescribedBy: columnId, nativeID: focusId, children: renderCell({ columnId, item, index: absoluteIndex, extraInfo, isHovered }) }, columnId));
+            }) }) }));
+};
+const MemoizedRowSegment = memo(RowSegment);
+const HeaderSegment = ({ columns, viewId, extraInfo, width, }) => {
+    return (_jsx(View, { style: [styles.segment, { width }], children: columns.map(({ id, width, title, renderTitle }) => {
+            const columnId = `${viewId}_${id}`;
+            return (_jsx(View, { style: [styles.segmentHeaderCell, { width }], nativeID: columnId, children: renderTitle({ title, extraInfo, id }) }, columnId));
+        }) }));
+};
+const findNextFocusableElement = (sortedCellIds, currentCellIndex, direction) => {
+    let index = currentCellIndex + direction;
+    while (index >= 0 && index < sortedCellIds.length) {
+        const nextCellId = sortedCellIds[index];
+        if (isNotNullish(nextCellId)) {
+            const previousCell = document.getElementById(nextCellId);
+            if (isNotNullish(previousCell)) {
+                const focusableElements = getFocusableElements(previousCell, false);
+                const nextFocusableElement = direction === -1 ? last(focusableElements) : first(focusableElements);
+                if (isNotNullish(nextFocusableElement)) {
+                    return nextFocusableElement;
+                }
+            }
+        }
+        index = index + direction;
+    }
+};
+const EMPTY_COLUMNS = [];
+const ZERO = 0;
+export const FixedListView = ({ data: originalData, mode = "tile", keyExtractor, highlightedRowId, rowHeight, rowVerticalSpacing, headerHeight, renderThreshold = 1000, stickedToStartColumns: initialStickedToStartColumns = EMPTY_COLUMNS, columns: initialColumns, stickedToEndColumns: initialStickedToEndColumns = EMPTY_COLUMNS, extraInfo, onEndReached, onEndReachedThresholdPx = 200, getRowLink, renderEmptyList, loading, }) => {
+    const [viewId] = useState(() => uuid());
+    // Those three refs are used to synchronize the horizontal scroll in the center columns
+    const centerHeadersRef = useRef(null);
+    const centerColumnsRef = useRef(null);
+    const horizontalScrollbarRef = useRef(null);
+    const totalRowHeight = rowHeight + rowVerticalSpacing;
+    const totalHeight = originalData.length * totalRowHeight + headerHeight;
+    // It might seem off to use the range in state instead of storing scroll/layout and deriving it,
+    // but it saves a lot of render phases by allowing to bail out from rendering when the range doesn't change
+    const [{ data, range: [renderedRangeStartIndex, renderedRangeEndIndex], }, setDataAndRenderRange,] = useState({ data: originalData, range: [0, 20] });
+    const startFocusAnchorRef = useRef(null);
+    const endFocusAnchorRef = useRef(null);
+    const [hasHorizontalScroll, setHasHorizontalScroll] = useState(false);
+    const [shouldAvoidStickyColumns, setShouldAvoidStickyColumns] = useState(false);
+    const [shouldShowStartGradient, setShouldShowStartGradient] = useState(false);
+    const [shouldShowEndGradient, setShouldShowEndGradient] = useState(true);
+    const [hoveredRow, setHoveredRow] = useState(undefined);
+    const currentScrollY = useRef(0);
+    const lastKnownHeight = useRef(0);
+    const { stickedToStartColumns, columns, stickedToEndColumns } = useMemo(() => {
+        if (shouldAvoidStickyColumns) {
+            return {
+                stickedToStartColumns: [],
+                columns: [
+                    ...initialStickedToStartColumns,
+                    ...initialColumns,
+                    ...initialStickedToEndColumns,
+                ],
+                stickedToEndColumns: [],
+            };
+        }
+        else {
+            return {
+                stickedToStartColumns: initialStickedToStartColumns,
+                columns: initialColumns,
+                stickedToEndColumns: initialStickedToEndColumns,
+            };
+        }
+    }, [
+        initialStickedToStartColumns,
+        initialColumns,
+        initialStickedToEndColumns,
+        shouldAvoidStickyColumns,
+    ]);
+    const [isScrolled, setIsScrolled] = useState(false);
+    const removeHoveredRow = useCallback(() => {
+        setHoveredRow(undefined);
+    }, []);
+    const initialStickedToStartColumnsWidth = useMemo(() => initialStickedToStartColumns.reduce((total, { width }) => total + width, 0), [initialStickedToStartColumns]);
+    const initialStickedToEndColumnsWidth = useMemo(() => initialStickedToEndColumns.reduce((total, { width }) => total + width, 0), [initialStickedToEndColumns]);
+    const stickedToStartColumnsWidth = useMemo(() => stickedToStartColumns.reduce((total, { width }) => total + width, 0), [stickedToStartColumns]);
+    const stickedToEndColumnsWidth = useMemo(() => stickedToEndColumns.reduce((total, { width }) => total + width, 0), [stickedToEndColumns]);
+    const centerColumnsWidth = useMemo(() => columns.reduce((total, { width }) => total + width, 0), [columns]);
+    const centerSegmentStyle = useMemo(() => [
+        stickedToStartColumns.length === 0 && styles.rowLeftRadii,
+        stickedToEndColumns.length === 0 && styles.rowRightRadii,
+    ], [stickedToStartColumns, stickedToEndColumns]);
+    const createRowWrapper = useCallback(({ item, absoluteIndex, extraInfo, }) => {
+        const customLinkElement = getRowLink?.({ item, index: absoluteIndex, extraInfo });
+        return isNullish(customLinkElement) ? _jsx(View, {}) : customLinkElement;
+    }, [getRowLink]);
+    const [backgroundRows, startRows, centerRows, endRows] = useMemo(() => {
+        const length = Math.max(0, renderedRangeEndIndex - renderedRangeStartIndex);
+        const backgroundRows = Array(length);
+        const startRows = Array(length);
+        const centerRows = Array(length);
+        const endRows = Array(length);
+        let index = -1;
+        while (++index < length) {
+            const absoluteIndex = renderedRangeStartIndex + index;
+            const item = data[absoluteIndex];
+            if (isNullish(item)) {
+                continue;
+            }
+            const key = keyExtractor(item, absoluteIndex);
+            const top = absoluteIndex * totalRowHeight;
+            const isHoveredRow = hoveredRow === key;
+            const isHighlightedRow = highlightedRowId === key;
+            const paddedIndex = String(absoluteIndex).padStart(10, "0");
+            const focusId = `${viewId}__Row_${paddedIndex}`;
+            backgroundRows[index] = (_jsx(MemoizedRowBackground, { mode: mode, isHovered: isHoveredRow, isHighlighted: isHighlightedRow, absoluteIndex: absoluteIndex, top: top, id: key, rowHeight: rowHeight, rowVerticalSpacing: rowVerticalSpacing, onMouseEnter: setHoveredRow, onMouseLeave: removeHoveredRow }, key));
+            if (stickedToStartColumns.length > 0) {
+                startRows[index] = (_jsx(MemoizedRowSegment, { createRowWrapper: createRowWrapper, focusId: focusId, top: top, totalRowHeight: totalRowHeight, id: key, style: styles.rowLeftRadii, onMouseEnter: setHoveredRow, onMouseLeave: removeHoveredRow, segmentColumn: "start", columns: stickedToStartColumns, width: stickedToStartColumnsWidth, item: item, absoluteIndex: absoluteIndex, rowVerticalSpacing: rowVerticalSpacing, viewId: viewId, isHovered: isHoveredRow, extraInfo: extraInfo }, key));
+            }
+            centerRows[index] = (_jsx(MemoizedRowSegment, { mode: mode, createRowWrapper: createRowWrapper, focusId: focusId, top: top, totalRowHeight: totalRowHeight, minWidth: centerColumnsWidth, id: key, style: centerSegmentStyle, onMouseEnter: setHoveredRow, onMouseLeave: removeHoveredRow, segmentColumn: "center", columns: columns, width: centerColumnsWidth, item: item, absoluteIndex: absoluteIndex, rowVerticalSpacing: rowVerticalSpacing, viewId: viewId, isHovered: isHoveredRow, extraInfo: extraInfo }, key));
+            if (stickedToEndColumns.length > 0) {
+                endRows[index] = (_jsx(MemoizedRowSegment, { createRowWrapper: createRowWrapper, focusId: focusId, top: top, totalRowHeight: totalRowHeight, id: key, style: styles.rowLeftRadii, onMouseEnter: setHoveredRow, onMouseLeave: removeHoveredRow, segmentColumn: "end", columns: stickedToEndColumns, width: stickedToEndColumnsWidth, item: item, absoluteIndex: absoluteIndex, rowVerticalSpacing: rowVerticalSpacing, viewId: viewId, isHovered: isHoveredRow, extraInfo: extraInfo }, key));
+            }
+        }
+        return [backgroundRows, startRows, centerRows, endRows];
+    }, [
+        data,
+        renderedRangeStartIndex,
+        renderedRangeEndIndex,
+        keyExtractor,
+        highlightedRowId,
+        rowHeight,
+        totalRowHeight,
+        columns,
+        stickedToEndColumns,
+        stickedToStartColumns,
+        viewId,
+        stickedToStartColumnsWidth,
+        centerColumnsWidth,
+        stickedToEndColumnsWidth,
+        hoveredRow,
+        rowVerticalSpacing,
+        extraInfo,
+        removeHoveredRow,
+        centerSegmentStyle,
+        createRowWrapper,
+        mode,
+    ]);
+    // Used to fix some scrollbar behavior. See `main.css`.
+    useLayoutEffect(() => {
+        if (centerHeadersRef.current instanceof Element) {
+            centerHeadersRef.current.setAttribute("data-hide-scrollbar", String(true));
+        }
+        if (centerColumnsRef.current instanceof Element) {
+            centerColumnsRef.current.setAttribute("data-hide-scrollbar", String(true));
+        }
+        if (horizontalScrollbarRef.current instanceof Element) {
+            horizontalScrollbarRef.current.setAttribute("data-force-scrollbar", String(true));
+        }
+    }, []);
+    // To synchronize scrolls, we keep track of the initiator in order to ignore the scroll events
+    // we provoke ourselves with the sync.
+    const lastHorizontalScroll = useRef({
+        initiator: "columns",
+        date: 0,
+    });
+    useEffect(() => {
+        if (isNotNullish(centerHeadersRef.current) &&
+            isNotNullish(centerColumnsRef.current) &&
+            isNotNullish(horizontalScrollbarRef.current)) {
+            const SCROLL_THRESHOLD_MS = 500;
+            const centerColumns = centerColumnsRef.current;
+            const centerHeaders = centerHeadersRef.current;
+            const horizontalScrollbar = horizontalScrollbarRef.current;
+            const onColumnsScroll = () => {
+                const now = Date.now();
+                if (lastHorizontalScroll.current.initiator === "columns" ||
+                    now - lastHorizontalScroll.current.date > SCROLL_THRESHOLD_MS) {
+                    const scrollLeft = centerColumns.scrollLeft;
+                    setShouldShowStartGradient(scrollLeft > 0);
+                    setShouldShowEndGradient(centerColumns.scrollWidth - HORIZONTAL_SAFE_AREA * 2 >=
+                        scrollLeft + centerColumns.clientWidth);
+                    centerHeaders.scrollLeft = scrollLeft;
+                    horizontalScrollbar.scrollLeft = scrollLeft;
+                    lastHorizontalScroll.current = { initiator: "columns", date: now };
+                }
+            };
+            const onHeadersScroll = () => {
+                const now = Date.now();
+                if (lastHorizontalScroll.current.initiator === "headers" ||
+                    now - lastHorizontalScroll.current.date > SCROLL_THRESHOLD_MS) {
+                    const scrollLeft = centerHeaders.scrollLeft;
+                    setShouldShowStartGradient(scrollLeft > 0);
+                    setShouldShowEndGradient(centerHeaders.scrollWidth - HORIZONTAL_SAFE_AREA * 2 >=
+                        scrollLeft + centerHeaders.clientWidth);
+                    centerColumns.scrollLeft = scrollLeft;
+                    horizontalScrollbar.scrollLeft = scrollLeft;
+                    lastHorizontalScroll.current = { initiator: "headers", date: now };
+                }
+            };
+            const onScrollbarScroll = () => {
+                const now = Date.now();
+                if (lastHorizontalScroll.current.initiator === "scrollbar" ||
+                    now - lastHorizontalScroll.current.date > SCROLL_THRESHOLD_MS) {
+                    const scrollLeft = horizontalScrollbar.scrollLeft;
+                    setShouldShowStartGradient(scrollLeft > 0);
+                    setShouldShowEndGradient(horizontalScrollbar.scrollWidth - HORIZONTAL_SAFE_AREA * 2 >=
+                        scrollLeft + horizontalScrollbar.clientWidth);
+                    centerHeaders.scrollLeft = scrollLeft;
+                    centerColumns.scrollLeft = scrollLeft;
+                    lastHorizontalScroll.current = { initiator: "scrollbar", date: now };
+                }
+            };
+            centerColumns.addEventListener("scroll", onColumnsScroll, { passive: true });
+            centerHeaders.addEventListener("scroll", onHeadersScroll, { passive: true });
+            horizontalScrollbar.addEventListener("scroll", onScrollbarScroll, { passive: true });
+            return () => {
+                centerColumns.removeEventListener("scroll", onColumnsScroll);
+                centerHeaders.removeEventListener("scroll", onHeadersScroll);
+                horizontalScrollbar.removeEventListener("scroll", onScrollbarScroll);
+            };
+        }
+    }, []);
+    const onKeyDown = useCallback((event) => {
+        const target = event.nativeEvent.target;
+        const currentTarget = event.nativeEvent.currentTarget;
+        const currentCell = target.closest(`[id^="${viewId}__Row"]`);
+        const currentCellId = currentCell?.id;
+        if (event.nativeEvent.key === "Tab" && isNotNullish(currentCell)) {
+            const focusableElements = getFocusableElements(currentCell, false);
+            const firstFocusableElement = first(focusableElements);
+            const lastFocusableElement = last(focusableElements);
+            const sortedCellIds = Array.from(currentTarget.querySelectorAll(`[id^="${viewId}__Row"]`), item => item.id).sort();
+            const currentCellIndex = sortedIndexOf(sortedCellIds, currentCellId);
+            const isTargetFirst = isNullish(firstFocusableElement) || firstFocusableElement === target;
+            const isTargetLast = isNullish(lastFocusableElement) || lastFocusableElement === target;
+            if (isTargetFirst && event.nativeEvent.shiftKey && first(sortedCellIds) !== currentCellId) {
+                const lastFocusableElement = findNextFocusableElement(sortedCellIds, currentCellIndex, -1);
+                if (isNotNullish(lastFocusableElement)) {
+                    event.preventDefault();
+                    lastFocusableElement.focus();
+                }
+                else {
+                    event.preventDefault();
+                    startFocusAnchorRef.current?.focus();
+                }
+            }
+            if (isTargetLast && !event.nativeEvent.shiftKey && last(sortedCellIds) !== currentCellId) {
+                const firstFocusableElement = findNextFocusableElement(sortedCellIds, currentCellIndex, 1);
+                if (isNotNullish(firstFocusableElement)) {
+                    event.preventDefault();
+                    firstFocusableElement.focus();
+                }
+                else {
+                    event.preventDefault();
+                    endFocusAnchorRef.current?.focus();
+                }
+            }
+        }
+    }, [viewId]);
+    useEffect(() => {
+        const renderedRangeStartIndex = Math.max(0, Math.floor((currentScrollY.current - renderThreshold) / totalRowHeight));
+        const renderedRangeEndIndex = Math.min(originalData.length, renderedRangeStartIndex +
+            Math.ceil((lastKnownHeight.current + renderThreshold * 2) / totalRowHeight));
+        setDataAndRenderRange(prevRenderRange => {
+            const { data, range: [prevRenderedRangeStartIndex, prevRenderedRangeEndIndex], } = prevRenderRange;
+            if (prevRenderedRangeStartIndex === renderedRangeStartIndex &&
+                prevRenderedRangeEndIndex === renderedRangeEndIndex &&
+                data === originalData) {
+                return prevRenderRange;
+            }
+            return { data: originalData, range: [renderedRangeStartIndex, renderedRangeEndIndex] };
+        });
+    }, [originalData, renderThreshold, totalRowHeight]);
+    const onLayout = useCallback(({ nativeEvent: { layout: { height, width }, }, }) => {
+        lastKnownHeight.current = height;
+        const renderedRangeStartIndex = Math.max(0, Math.floor((currentScrollY.current - renderThreshold) / totalRowHeight));
+        const renderedRangeEndIndex = Math.min(originalData.length, renderedRangeStartIndex + Math.ceil((height + renderThreshold * 2) / totalRowHeight));
+        setDataAndRenderRange(prevRenderRange => {
+            const { data, range: [prevRenderedRangeStartIndex, prevRenderedRangeEndIndex], } = prevRenderRange;
+            if (prevRenderedRangeStartIndex === renderedRangeStartIndex &&
+                prevRenderedRangeEndIndex === renderedRangeEndIndex &&
+                data === originalData) {
+                return prevRenderRange;
+            }
+            return { data: originalData, range: [renderedRangeStartIndex, renderedRangeEndIndex] };
+        });
+        if (isNotNullish(onEndReached) &&
+            !hasEndReachedBeenCalled.current &&
+            height >= totalHeight - onEndReachedThresholdPx) {
+            hasEndReachedBeenCalled.current = true;
+            onEndReached();
+        }
+        setShouldAvoidStickyColumns(width - (initialStickedToStartColumnsWidth + initialStickedToEndColumnsWidth) < 300);
+    }, [
+        originalData,
+        renderThreshold,
+        totalRowHeight,
+        onEndReached,
+        onEndReachedThresholdPx,
+        totalHeight,
+        initialStickedToStartColumnsWidth,
+        initialStickedToEndColumnsWidth,
+    ]);
+    const scrollTimeoutRef = useRef(undefined);
+    const scrollContentsRef = useRef(null);
+    const hasEndReachedBeenCalled = useRef(false);
+    useEffect(() => {
+        if (isNotNullish(onEndReached) &&
+            !hasEndReachedBeenCalled.current &&
+            lastKnownHeight.current >= totalHeight - onEndReachedThresholdPx) {
+            hasEndReachedBeenCalled.current = true;
+            onEndReached();
+            return;
+        }
+        hasEndReachedBeenCalled.current = false;
+    }, [data, onEndReached, onEndReachedThresholdPx, totalHeight]);
+    const onScroll = useCallback(({ nativeEvent: { contentOffset: { y }, layoutMeasurement: { height }, contentSize: { height: contentHeight }, }, }) => {
+        setIsScrolled(y > 0);
+        lastKnownHeight.current = height;
+        currentScrollY.current = y;
+        if (isNotNullish(scrollTimeoutRef.current)) {
+            clearTimeout(scrollTimeoutRef.current);
+        }
+        if (scrollContentsRef.current instanceof HTMLElement) {
+            scrollContentsRef.current.style.pointerEvents = "none";
+        }
+        scrollTimeoutRef.current = window.setTimeout(() => {
+            if (scrollContentsRef.current instanceof HTMLElement) {
+                scrollContentsRef.current.style.pointerEvents = "auto";
+            }
+        }, 100);
+        const renderedRangeStartIndex = Math.max(0, Math.floor((currentScrollY.current - renderThreshold) / totalRowHeight));
+        const renderedRangeEndIndex = Math.min(data.length, renderedRangeStartIndex + Math.ceil((height + renderThreshold * 2) / totalRowHeight));
+        setDataAndRenderRange(prevRenderRange => {
+            const { data, range: [prevRenderedRangeStartIndex, prevRenderedRangeEndIndex], } = prevRenderRange;
+            return prevRenderedRangeStartIndex === renderedRangeStartIndex &&
+                prevRenderedRangeEndIndex === renderedRangeEndIndex &&
+                data === data
+                ? prevRenderRange
+                : { data, range: [renderedRangeStartIndex, renderedRangeEndIndex] };
+        });
+        if (isNotNullish(onEndReached) &&
+            !hasEndReachedBeenCalled.current &&
+            y + height >= contentHeight - onEndReachedThresholdPx) {
+            hasEndReachedBeenCalled.current = true;
+            onEndReached();
+        }
+    }, [data.length, renderThreshold, totalRowHeight, onEndReached, onEndReachedThresholdPx]);
+    const onCenterTrackLayout = useCallback(({ nativeEvent: { layout: { width }, }, }) => {
+        setHasHorizontalScroll(centerColumnsWidth > width);
+    }, [centerColumnsWidth]);
+    const isLoading = isNotNullish(loading) && loading.isLoading;
+    return (_jsxs(View, { style: styles.root, children: [_jsx(View, { ref: startFocusAnchorRef, focusable: true }), _jsxs(ScrollView, { onKeyDown: onKeyDown, onLayout: onLayout, onScroll: onScroll, scrollEventThrottle: 32, style: [styles.container, mode === "tile" && styles.containerTile], contentContainerStyle: [
+                    styles.contentContainer,
+                    {
+                        height: totalHeight +
+                            SCROLLBAR_RESERVED_SPACE +
+                            (isLoading ? loading.count * (rowHeight + rowVerticalSpacing) : 0),
+                    },
+                ], children: [_jsx(View, { accessibilityBusy: isLoading, style: [
+                            styles.loadingPlaceholder,
+                            {
+                                top: totalHeight,
+                                marginLeft: HORIZONTAL_SAFE_AREA * 2,
+                                marginRight: HORIZONTAL_SAFE_AREA * 2,
+                            },
+                        ], children: isLoading
+                            ? match(mode)
+                                .with("tile", () => (_jsx(FixedListViewPlaceholder, { count: loading.count, rowHeight: rowHeight, rowVerticalSpacing: rowVerticalSpacing, paddingHorizontal: 0 })))
+                                .with("plain", () => (_jsx(PlainListViewPlaceholder, { count: loading.count, rowHeight: rowHeight, rowVerticalSpacing: rowVerticalSpacing, paddingHorizontal: 0 })))
+                                .exhaustive()
+                            : null }), _jsx(View, { style: [styles.backgroundRows, { top: headerHeight }], children: backgroundRows }), _jsxs(View, { style: styles.scrollContentContainer, ref: scrollContentsRef, children: [stickedToStartColumns.length > 0 ? (_jsxs(View, { style: [
+                                    styles.stickyColumn,
+                                    {
+                                        width: stickedToStartColumnsWidth + HORIZONTAL_SAFE_AREA,
+                                        paddingLeft: HORIZONTAL_SAFE_AREA,
+                                    },
+                                ], children: [_jsxs(View, { style: [styles.headingSegment, { height: headerHeight }], children: [_jsx(HeaderSegment, { columns: stickedToStartColumns, extraInfo: extraInfo, viewId: viewId, width: stickedToStartColumnsWidth }), _jsx(View, { style: styles.stickyColumnStartOverflow }), _jsx(View, { style: [styles.topGradient, isScrolled && styles.visibleTopGradient], pointerEvents: "none" })] }), _jsx(View, { style: [styles.stickyRow, { height: totalHeight }], children: startRows })] })) : null, _jsxs(View, { style: [
+                                    styles.centerColumnsContainer,
+                                    {
+                                        paddingLeft: stickedToStartColumns.length === 0 ? HORIZONTAL_SAFE_AREA : ZERO,
+                                        paddingRight: stickedToEndColumns.length === 0 ? HORIZONTAL_SAFE_AREA : ZERO,
+                                    },
+                                ], children: [_jsxs(View, { style: [styles.headingSegment, { height: headerHeight }], children: [_jsx(ScrollView, { ref: centerHeadersRef, horizontal: true, onLayout: onCenterTrackLayout, style: styles.centerColumns, contentContainerStyle: {
+                                                    minWidth: centerColumnsWidth +
+                                                        (stickedToStartColumns.length === 0 ? HORIZONTAL_SAFE_AREA : 0) +
+                                                        (stickedToEndColumns.length === 0 ? HORIZONTAL_SAFE_AREA : 0),
+                                                }, children: _jsx(HeaderSegment, { columns: columns, extraInfo: extraInfo, viewId: viewId, width: centerColumnsWidth }) }), _jsx(View, { style: [styles.topGradient, isScrolled && styles.visibleTopGradient], pointerEvents: "none" })] }), _jsx(ScrollView, { horizontal: true, ref: centerColumnsRef, style: styles.centerColumns, contentContainerStyle: [
+                                            styles.centerColumnsContentContainer,
+                                            {
+                                                minWidth: centerColumnsWidth +
+                                                    (stickedToStartColumns.length === 0 ? HORIZONTAL_SAFE_AREA : 0) +
+                                                    (stickedToEndColumns.length === 0 ? HORIZONTAL_SAFE_AREA : 0),
+                                            },
+                                        ], children: centerRows }), _jsx(ScrollView, { ref: horizontalScrollbarRef, horizontal: true, style: styles.horizontalScrollbar, contentContainerStyle: {
+                                            minWidth: centerColumnsWidth +
+                                                (stickedToStartColumns.length === 0 ? HORIZONTAL_SAFE_AREA : 0) +
+                                                (stickedToEndColumns.length === 0 ? HORIZONTAL_SAFE_AREA : 0),
+                                        } }), stickedToStartColumns.length > 0 && hasHorizontalScroll ? (_jsx(View, { pointerEvents: "none", style: [
+                                            styles.leftToRightGradient,
+                                            {
+                                                maxHeight: data.length * totalRowHeight,
+                                                top: headerHeight,
+                                                bottom: SCROLLBAR_RESERVED_SPACE + rowVerticalSpacing / 2,
+                                            },
+                                            shouldShowStartGradient && styles.visibleGradient,
+                                        ] })) : null, stickedToEndColumns.length > 0 && hasHorizontalScroll ? (_jsx(View, { pointerEvents: "none", style: [
+                                            styles.rightToLeftGradient,
+                                            {
+                                                maxHeight: data.length * totalRowHeight,
+                                                top: headerHeight,
+                                                bottom: SCROLLBAR_RESERVED_SPACE + rowVerticalSpacing / 2,
+                                            },
+                                            shouldShowEndGradient && styles.visibleGradient,
+                                        ] })) : null] }), stickedToEndColumns.length > 0 ? (_jsxs(View, { style: [
+                                    styles.stickyColumn,
+                                    {
+                                        width: stickedToEndColumnsWidth + HORIZONTAL_SAFE_AREA,
+                                        paddingRight: HORIZONTAL_SAFE_AREA,
+                                    },
+                                ], children: [_jsxs(View, { style: [styles.headingSegment, { height: headerHeight }], children: [_jsx(View, { style: styles.stickyColumnEndOverflow }), _jsx(HeaderSegment, { columns: stickedToEndColumns, extraInfo: extraInfo, viewId: viewId, width: stickedToEndColumnsWidth }), _jsx(View, { style: [styles.topGradient, isScrolled && styles.visibleTopGradient], pointerEvents: "none" })] }), _jsx(View, { style: [styles.stickyRow, { height: totalHeight }], children: endRows })] })) : null] })] }), data.length === 0 && isNotNullish(renderEmptyList) && !isLoading ? (_jsx(View, { style: styles.emptyListContainer, children: renderEmptyList() })) : null, _jsx(View, { ref: endFocusAnchorRef, focusable: true })] }));
+};
+export const FixedListViewPlaceholder = ({ count, rowHeight, rowVerticalSpacing, groupHeaderHeight, headerHeight, paddingHorizontal = HORIZONTAL_SAFE_AREA, }) => {
+    const totalRowHeight = rowHeight + rowVerticalSpacing;
+    return (_jsxs(View, { style: [styles.container, styles.containerTile, { paddingHorizontal }], children: [isNotNullish(headerHeight) ? _jsx(View, { style: { height: headerHeight } }) : null, isNotNullish(groupHeaderHeight) ? _jsx(View, { style: { height: headerHeight } }) : null, _jsx(View, { children: Array.from({ length: count }, (_, index) => {
+                    const top = index * totalRowHeight + rowVerticalSpacing / 2;
+                    return (_jsxs(Fragment, { children: [_jsx(MemoizedRowBackground, { isHovered: false, isHighlighted: false, absoluteIndex: index, top: top, rowVerticalSpacing: rowVerticalSpacing, id: String(index), rowHeight: rowHeight, onMouseEnter: noop, onMouseLeave: noop, mode: "tile" }), _jsxs(View, { style: [styles.placeholderRowContainer, { top, height: totalRowHeight }], children: [_jsx(View, { style: styles.placeholderRow }), _jsx(Space, { width: 32 }), _jsx(View, { style: [styles.placeholderRow, styles.smallPlaceholderRow] }), _jsx(Space, { width: 32 }), _jsx(View, { style: styles.placeholderRowEnd, children: _jsx(View, { style: [styles.placeholderRow, styles.smallPlaceholderRow] }) })] }, String(index))] }, String(index)));
+                }) })] }));
+};
+export const PlainListViewPlaceholder = ({ count, rowHeight, rowVerticalSpacing, groupHeaderHeight, headerHeight, paddingHorizontal = HORIZONTAL_SAFE_AREA, }) => {
+    const totalRowHeight = rowHeight + rowVerticalSpacing;
+    return (_jsxs(View, { style: [styles.container, { paddingHorizontal }], children: [isNotNullish(headerHeight) ? _jsx(View, { style: { height: headerHeight } }) : null, isNotNullish(groupHeaderHeight) ? _jsx(View, { style: { height: headerHeight } }) : null, _jsx(View, { children: Array.from({ length: count }, (_, index) => {
+                    const top = index * totalRowHeight + rowVerticalSpacing / 2;
+                    return (_jsxs(Fragment, { children: [_jsx(MemoizedRowBackground, { isHovered: false, isHighlighted: false, absoluteIndex: index, top: top, rowVerticalSpacing: rowVerticalSpacing, id: String(index), rowHeight: rowHeight, onMouseEnter: noop, onMouseLeave: noop, mode: "plain" }), _jsxs(View, { style: [
+                                    styles.placeholderRowContainer,
+                                    styles.placeholderRowContainerPlain,
+                                    { top, height: totalRowHeight },
+                                ], children: [_jsx(View, { style: styles.placeholderRow }), _jsx(Space, { width: 32 }), _jsx(View, { style: [styles.placeholderRow, styles.smallPlaceholderRow] }), _jsx(Space, { width: 32 }), _jsx(View, { style: styles.placeholderRowEnd, children: _jsx(View, { style: [styles.placeholderRow, styles.smallPlaceholderRow] }) })] }, String(index))] }, String(index)));
+                }) })] }));
+};
+export const FixedListViewEmpty = ({ icon, borderedIcon = false, title, subtitle, children, }) => (_jsxs(View, { style: styles.emptyList, children: [borderedIcon ? (_jsx(BorderedIcon, { name: icon })) : (_jsx(Icon, { name: icon, size: 96, color: colors.current.primary })), _jsx(Space, { height: 32 }), isNotNullish(title) && (_jsx(LakeHeading, { level: 3, variant: "h3", color: colors.gray[700], align: "center", children: title })), _jsx(Space, { height: 8 }), isNotNullish(subtitle) && _jsx(LakeText, { align: "center", children: subtitle }), _jsx(Space, { height: 8 }), children] }));