@swan-io/lake 8.18.3 → 8.18.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@swan-io/lake",
-  "version": "8.18.3",
+  "version": "8.18.4",
   "engines": {
     "node": ">=20.9.0",
     "yarn": "^1.22.0"

package/src/components/VirtualizedList.js

@@ -3,7 +3,7 @@ import { Option } from "@swan-io/boxed";
 import { cloneElement, memo, useCallback, useEffect, useId, useLayoutEffect, useMemo, useRef, useState, } from "react";
 import { StyleSheet, View } from "react-native";
 import { commonStyles } from "../constants/commonStyles";
-import { backgroundColor as backgroundColorVariants, colors, negativeSpacings, spacings, } from "../constants/design";
+import { backgroundColor as backgroundColorVariants, colors, spacings } from "../constants/design";
 import { useHover } from "../hooks/useHover";
 import { ScrollView } from "./ScrollView";
 import { Space } from "./Space";
@@ -20,28 +20,27 @@ const styles = StyleSheet.create({
         flexDirection: "row",
         alignItems: "stretch",
         zIndex: 2,
-        paddingHorizontal: spacings[HORIZONTAL_ROW_PADDING],
     },
     cellsContainer: {
         flexDirection: "row",
         transform: "translateZ(0)",
-        marginHorizontal: negativeSpacings[HORIZONTAL_ROW_PADDING],
-        paddingHorizontal: spacings[HORIZONTAL_ROW_PADDING],
     },
     stickedToStartColumnGroup: {
         position: "sticky",
         left: 0,
-        marginLeft: negativeSpacings[HORIZONTAL_ROW_PADDING],
-        paddingLeft: spacings[HORIZONTAL_ROW_PADDING],
         zIndex: 1,
     },
+    stickedToStartColumnGroupLocked: {
+        position: "relative",
+    },
     stickedToEndColumnGroup: {
         position: "sticky",
         right: 0,
-        marginRight: negativeSpacings[HORIZONTAL_ROW_PADDING],
-        paddingRight: spacings[HORIZONTAL_ROW_PADDING],
         zIndex: 1,
     },
+    stickedToEndColumnGroupLocked: {
+        position: "relative",
+    },
     rowsContainer: {
         position: "relative",
     },
@@ -51,7 +50,10 @@ const styles = StyleSheet.create({
         right: 0,
         flexDirection: "row",
         alignItems: "stretch",
-        paddingHorizontal: spacings[HORIZONTAL_ROW_PADDING],
+        boxShadow: `0 -1px ${colors.gray[100]}`,
+        transitionProperty: "top",
+        transitionDuration: "300ms",
+        transitionTimingFunction: "ease-in-out",
     },
     headerCell: {
         display: "flex",
@@ -64,7 +66,6 @@ const styles = StyleSheet.create({
         flexDirection: "row",
         flexGrow: 1,
         alignItems: "stretch",
-        boxShadow: `inset 0 -1px ${colors.gray[100]}`,
     },
     shadowsLayerContainer: {
         position: "absolute",
@@ -162,17 +163,28 @@ export const VirtualizedList = ({ variant, data, stickedToStartColumns, columns,
         .flatMap(({ isLoading, count }) => (isLoading ? Option.Some(rowHeight * count) : Option.None()))
         .getOr(0);
     const containerContainerHeight = headerHeight + fullDataHeight + loadingDataPlaceholderHeight;
+    const stickedToStartFirstCellLeftPadding = Option.fromNullable(stickedToStartColumns)
+        .map(() => HORIZONTAL_ROW_PADDING)
+        .getOr(0);
+    const centerFirstCellLeftPadding = Option.fromNullable(stickedToStartColumns)
+        .map(() => 0)
+        .getOr(HORIZONTAL_ROW_PADDING);
+    const centerLastCellLeftPadding = Option.fromNullable(stickedToEndColumns)
+        .map(() => 0)
+        .getOr(HORIZONTAL_ROW_PADDING);
+    const stickedToEndLastCellRightPadding = Option.fromNullable(stickedToEndColumns)
+        .map(() => HORIZONTAL_ROW_PADDING)
+        .getOr(0);
     const stickedToStartColumnsWidth = useMemo(() => Option.fromNullable(stickedToStartColumns)
         .map(columns => columns.reduce((acc, column) => acc + column.width, 0))
-        .getOr(0), [stickedToStartColumns]);
-    const centerColumnsWidth = useMemo(() => columns.reduce((acc, column) => acc + column.width, 0), [columns]);
+        .getOr(0) + stickedToStartFirstCellLeftPadding, [stickedToStartColumns, stickedToStartFirstCellLeftPadding]);
+    const centerColumnsWidth = useMemo(() => columns.reduce((acc, column) => acc + column.width, 0) +
+        centerFirstCellLeftPadding +
+        centerLastCellLeftPadding, [columns, centerFirstCellLeftPadding, centerLastCellLeftPadding]);
     const stickedToEndColumnsWidth = useMemo(() => Option.fromNullable(stickedToEndColumns)
         .map(columns => columns.reduce((acc, column) => acc + column.width, 0))
-        .getOr(0), [stickedToEndColumns]);
-    const contentContainerWidth = stickedToStartColumnsWidth +
-        centerColumnsWidth +
-        stickedToEndColumnsWidth +
-        HORIZONTAL_ROW_PADDING * 2;
+        .getOr(0) + stickedToEndLastCellRightPadding, [stickedToEndColumns, stickedToEndLastCellRightPadding]);
+    const contentContainerWidth = stickedToStartColumnsWidth + centerColumnsWidth + stickedToEndColumnsWidth;
     const backgroundColor = backgroundColorVariants[variant];
     // We store the `startIndex` and `endIndex` rather than the scroll position
     // so that it triggers way less re-renders
@@ -180,18 +192,21 @@ export const VirtualizedList = ({ variant, data, stickedToStartColumns, columns,
     const [clientHeight, setClientHeight] = useState(undefined);
     const [horizontalScrollPosition, setHasHorizontalScrollPosition] = useState(undefined);
     const rowsToRender = useMemo(() => {
-        return Option.fromNullable(rangeToRender).map(({ startIndex, endIndex }) => ({
-            startIndex,
-            endIndex,
-            data: data.slice(startIndex, endIndex),
-        }));
+        return Option.fromNullable(rangeToRender).map(({ startIndex, endIndex }) => {
+            const clampedEndIndex = Math.min(data.length, endIndex);
+            return {
+                startIndex,
+                endIndex: clampedEndIndex,
+                data: data.slice(startIndex, clampedEndIndex),
+            };
+        });
     }, [data, rangeToRender]);
-    useLayoutEffect(() => {
+    const onLayoutUpdate = useCallback(() => {
         const element = Option.fromNullable(scrollViewRef.current).flatMap(ref => Option.fromNullable(ref.element));
         setRangeToRender(previousRangeToRender => element
             .map(scrollView => {
             const startIndex = Math.max(0, Math.floor((scrollView.scrollTop - renderThreshold) / rowHeight));
-            const endIndex = Math.min(data.length, startIndex + Math.ceil((scrollView.scrollHeight + renderThreshold * 2) / rowHeight));
+            const endIndex = startIndex + Math.ceil((scrollView.scrollHeight + renderThreshold * 2) / rowHeight);
             if ((previousRangeToRender === null || previousRangeToRender === void 0 ? void 0 : previousRangeToRender.startIndex) === startIndex &&
                 previousRangeToRender.endIndex === endIndex) {
                 return previousRangeToRender;
@@ -201,7 +216,8 @@ export const VirtualizedList = ({ variant, data, stickedToStartColumns, columns,
             .toUndefined());
         setClientHeight(element.map(scrollView => scrollView.clientHeight).toUndefined());
         setHasHorizontalScrollPosition(element
-            .map(scrollView => scrollView.scrollWidth === scrollView.clientWidth
+            .map(scrollView => scrollView.scrollWidth === scrollView.clientWidth ||
+            scrollView.clientWidth - (stickedToEndColumnsWidth + stickedToStartColumnsWidth) < 400
             ? "NoScroll"
             : scrollView.scrollLeft <= 0
                 ? "Start"
@@ -209,11 +225,13 @@ export const VirtualizedList = ({ variant, data, stickedToStartColumns, columns,
                     ? "End"
                     : "Middle")
             .toUndefined());
-    }, [data, renderThreshold, rowHeight]);
+    }, [data, renderThreshold, rowHeight, stickedToStartColumnsWidth, stickedToEndColumnsWidth]);
+    useLayoutEffect(() => {
+        onLayoutUpdate();
+    }, [onLayoutUpdate]);
     const scrollTimeoutRef = useRef(undefined);
     const rowsContainerRef = useRef(null);
     const onScroll = useCallback(() => {
-        const element = Option.fromNullable(scrollViewRef.current).flatMap(ref => Option.fromNullable(ref.element));
         // Disable interactions in cells during scroll, avoids useless
         // re-renders
         if (scrollTimeoutRef.current != null) {
@@ -227,27 +245,20 @@ export const VirtualizedList = ({ variant, data, stickedToStartColumns, columns,
                 rowsContainerRef.current.style.pointerEvents = "auto";
             }
         }, 100);
-        setRangeToRender(previousRangeToRender => element
-            .map(scrollView => {
-            const startIndex = Math.max(0, Math.floor((scrollView.scrollTop - renderThreshold) / rowHeight));
-            const endIndex = Math.min(data.length, startIndex + Math.ceil((scrollView.scrollHeight + renderThreshold * 2) / rowHeight));
-            if ((previousRangeToRender === null || previousRangeToRender === void 0 ? void 0 : previousRangeToRender.startIndex) === startIndex &&
-                previousRangeToRender.endIndex === endIndex) {
-                return previousRangeToRender;
-            }
-            return { startIndex, endIndex };
+        onLayoutUpdate();
+    }, [onLayoutUpdate]);
+    useEffect(() => {
+        const element = Option.fromNullable(scrollViewRef.current).flatMap(ref => Option.fromNullable(ref.element));
+        return element
+            .map(element => {
+            const resizeObserver = new ResizeObserver(() => {
+                onLayoutUpdate();
+            });
+            resizeObserver.observe(element);
+            return () => resizeObserver.unobserve(element);
         })
-            .toUndefined());
-        setHasHorizontalScrollPosition(element
-            .map(scrollView => scrollView.scrollWidth === scrollView.clientWidth
-            ? "NoScroll"
-            : scrollView.scrollLeft <= 0
-                ? "Start"
-                : scrollView.scrollLeft >= scrollView.scrollWidth - scrollView.clientWidth
-                    ? "End"
-                    : "Middle")
-            .toUndefined());
-    }, [data, renderThreshold, rowHeight]);
+            .toUndefined();
+    }, [onLayoutUpdate]);
     // tracks if the threshold to initiate the next data load is reached
     useEffect(() => {
         const scrollTracker = scrollTrackerRef.current;
@@ -271,22 +282,31 @@ export const VirtualizedList = ({ variant, data, stickedToStartColumns, columns,
                     .map(columns => (_jsx(View, { style: [
                         styles.cellsContainer,
                         styles.stickedToStartColumnGroup,
+                        horizontalScrollPosition === "NoScroll" && styles.stickedToStartColumnGroupLocked,
                         { width: stickedToStartColumnsWidth, backgroundColor },
-                    ], children: columns.map(({ id, width, title, renderTitle }) => {
+                    ], children: columns.map(({ id, width, title, renderTitle }, index) => {
                         const columnId = `${viewId}_${id}`;
-                        return (_jsx(View, { style: [styles.headerCell, { width }], id: columnId, children: renderTitle({ title, extraInfo, id }) }, columnId));
+                        const paddingLeft = index === 0 ? stickedToStartFirstCellLeftPadding : 0;
+                        return (_jsx(View, { style: [styles.headerCell, { width: width + paddingLeft, paddingLeft }], id: columnId, children: renderTitle({ title, extraInfo, id }) }, columnId));
                     }) })))
-                    .toNull(), _jsx(View, { style: [styles.cellsContainer, { width: centerColumnsWidth, backgroundColor }], children: columns.map(({ id, width, title, renderTitle }) => {
+                    .toNull(), _jsx(View, { style: [styles.cellsContainer, { width: centerColumnsWidth, backgroundColor }], children: columns.map(({ id, width, title, renderTitle }, index) => {
                         const columnId = `${viewId}_${id}`;
-                        return (_jsx(View, { style: [styles.headerCell, { width }], id: columnId, children: renderTitle({ title, extraInfo, id }) }, columnId));
+                        const paddingLeft = index === 0 ? centerFirstCellLeftPadding : 0;
+                        const paddingRight = index === columns.length - 1 ? centerLastCellLeftPadding : 0;
+                        return (_jsx(View, { style: [
+                                styles.headerCell,
+                                { width: width + paddingLeft + paddingRight, paddingLeft, paddingRight },
+                            ], id: columnId, children: renderTitle({ title, extraInfo, id }) }, columnId));
                     }) }), Option.fromNullable(stickedToEndColumns)
                     .map(columns => (_jsx(View, { style: [
                         styles.cellsContainer,
                         styles.stickedToEndColumnGroup,
+                        horizontalScrollPosition === "NoScroll" && styles.stickedToEndColumnGroupLocked,
                         { width: stickedToEndColumnsWidth, backgroundColor },
-                    ], children: columns.map(({ id, width, title, renderTitle }) => {
+                    ], children: columns.map(({ id, width, title, renderTitle }, index) => {
                         const columnId = `${viewId}_${id}`;
-                        return (_jsx(View, { style: [styles.headerCell, { width }], id: columnId, children: renderTitle({ title, extraInfo, id }) }, columnId));
+                        const paddingRight = index === columns.length - 1 ? stickedToEndLastCellRightPadding : 0;
+                        return (_jsx(View, { style: [styles.headerCell, { width: width + paddingRight, paddingRight }], id: columnId, children: renderTitle({ title, extraInfo, id }) }, columnId));
                     }) })))
                     .toNull()] }));
     }, [
@@ -300,6 +320,11 @@ export const VirtualizedList = ({ variant, data, stickedToStartColumns, columns,
         columns,
         stickedToEndColumns,
         viewId,
+        horizontalScrollPosition,
+        stickedToStartFirstCellLeftPadding,
+        centerFirstCellLeftPadding,
+        centerLastCellLeftPadding,
+        stickedToEndLastCellRightPadding,
     ]);
     const startColumnShadow = useMemo(() => {
         if (stickedToStartColumnsWidth === 0) {
@@ -333,7 +358,7 @@ export const VirtualizedList = ({ variant, data, stickedToStartColumns, columns,
             height: containerContainerHeight,
             width: contentContainerWidth,
         }, children: [header, rowsToRender
-                .map(({ startIndex, endIndex, data }) => (_jsxs(View, { style: styles.rowsContainer, ref: rowsContainerRef, children: [data.map((item, index) => (_jsx(VirtualizedRow, { viewId: viewId, item: item, rowHeight: rowHeight, absoluteIndex: startIndex + index, variant: variant, stickedToStartColumnsWidth: stickedToStartColumnsWidth, centerColumnsWidth: centerColumnsWidth, stickedToEndColumnsWidth: stickedToEndColumnsWidth, stickedToStartColumns: stickedToStartColumns, columns: columns, stickedToEndColumns: stickedToEndColumns, extraInfo: extraInfo }, keyExtractor(item, startIndex + index)))), Option.fromNullable(loading)
+                .map(({ startIndex, endIndex, data }) => (_jsxs(View, { style: styles.rowsContainer, ref: rowsContainerRef, children: [data.map((item, index) => (_jsx(VirtualizedRow, { viewId: viewId, item: item, rowHeight: rowHeight, absoluteIndex: startIndex + index, variant: variant, stickedToStartColumnsWidth: stickedToStartColumnsWidth, centerColumnsWidth: centerColumnsWidth, stickedToEndColumnsWidth: stickedToEndColumnsWidth, stickedToStartColumns: stickedToStartColumns, columns: columns, stickedToEndColumns: stickedToEndColumns, extraInfo: extraInfo, horizontalScrollPosition: horizontalScrollPosition !== null && horizontalScrollPosition !== void 0 ? horizontalScrollPosition : "NoScroll", stickedToStartFirstCellLeftPadding: stickedToStartFirstCellLeftPadding, centerFirstCellLeftPadding: centerFirstCellLeftPadding, centerLastCellLeftPadding: centerLastCellLeftPadding, stickedToEndLastCellRightPadding: stickedToEndLastCellRightPadding }, keyExtractor(item, startIndex + index)))), Option.fromNullable(loading)
                         .flatMap(({ isLoading, count }) => (isLoading ? Option.Some(count) : Option.None()))
                         .map(count => (_jsx(View, { "aria-busy": true, style: [
                             styles.loadingPlaceholder,
@@ -346,7 +371,7 @@ export const VirtualizedList = ({ variant, data, stickedToStartColumns, columns,
                 .map(clientHeight => (_jsx(View, { style: styles.shadowsLayerContainer, children: _jsxs(View, { style: [styles.shadowsLayer, { height: clientHeight - 12 }], children: [startColumnShadow.toNull(), _jsx(View, { style: { width: centerColumnsWidth } }), endColumnShadow.toNull()] }) })))
                 .toNull(), _jsx(View, { style: [styles.scrollTracker, { height: onEndReachedThreshold }], ref: scrollTrackerRef })] }));
 };
-const RawVirtualizedRow = ({ viewId, rowHeight, absoluteIndex, variant, stickedToStartColumnsWidth, centerColumnsWidth, stickedToEndColumnsWidth, stickedToStartColumns, columns, stickedToEndColumns, extraInfo, item, getRowLink, }) => {
+const RawVirtualizedRow = ({ viewId, rowHeight, absoluteIndex, variant, stickedToStartColumnsWidth, centerColumnsWidth, stickedToEndColumnsWidth, stickedToStartColumns, columns, stickedToEndColumns, extraInfo, item, horizontalScrollPosition, getRowLink, stickedToStartFirstCellLeftPadding, centerFirstCellLeftPadding, centerLastCellLeftPadding, stickedToEndLastCellRightPadding, }) => {
     var _a;
     const [isHovered, setIsHovered] = useState(false);
     const elementRef = useRef(null);
@@ -359,30 +384,32 @@ const RawVirtualizedRow = ({ viewId, rowHeight, absoluteIndex, variant, stickedT
         ref: elementRef,
         style: [
             styles.row,
-            isHovered && {
-                backgroundColor: variant === "accented"
-                    ? backgroundColorVariants.default
-                    : backgroundColorVariants.accented,
-            },
             {
                 backgroundColor: backgroundColorVariants[variant],
                 top: absoluteIndex * rowHeight,
                 height: rowHeight,
             },
+            isHovered && {
+                backgroundColor: variant === "accented"
+                    ? backgroundColorVariants.default
+                    : backgroundColorVariants.accented,
+            },
         ],
         children: (_jsxs(_Fragment, { children: [Option.fromNullable(stickedToStartColumns)
                     .map(columns => (_jsx(View, { style: [
                         styles.cellsContainer,
                         styles.stickedToStartColumnGroup,
+                        horizontalScrollPosition === "NoScroll" && styles.stickedToStartColumnGroupLocked,
                         {
                             width: stickedToStartColumnsWidth,
                             backgroundColor: isHovered
                                 ? backgroundColorVariants[variant === "accented" ? "default" : "accented"]
                                 : backgroundColorVariants[variant],
                         },
-                    ], children: columns.map(({ id, width, renderCell }) => {
+                    ], children: columns.map(({ id, width, renderCell }, index) => {
                         const columnId = `${viewId}_${id}`;
-                        return (_jsx(View, { style: [styles.cell, { width }], "aria-describedby": columnId, children: renderCell({
+                        const paddingLeft = index === 0 ? stickedToStartFirstCellLeftPadding : 0;
+                        return (_jsx(View, { style: [styles.cell, { width: width + paddingLeft, paddingLeft }], "aria-describedby": columnId, children: renderCell({
                                 columnId,
                                 item,
                                 index: absoluteIndex,
@@ -398,9 +425,14 @@ const RawVirtualizedRow = ({ viewId, rowHeight, absoluteIndex, variant, stickedT
                                 ? backgroundColorVariants[variant === "accented" ? "default" : "accented"]
                                 : backgroundColorVariants[variant],
                         },
-                    ], children: columns.map(({ id, width, renderCell }) => {
+                    ], children: columns.map(({ id, width, renderCell }, index) => {
                         const columnId = `${viewId}_${id}`;
-                        return (_jsx(View, { style: [styles.cell, { width }], "aria-describedby": columnId, children: renderCell({
+                        const paddingLeft = index === 0 ? centerFirstCellLeftPadding : 0;
+                        const paddingRight = index === columns.length - 1 ? centerLastCellLeftPadding : 0;
+                        return (_jsx(View, { style: [
+                                styles.cell,
+                                { width: width + paddingLeft + paddingRight, paddingLeft, paddingRight },
+                            ], "aria-describedby": columnId, children: renderCell({
                                 columnId,
                                 item,
                                 index: absoluteIndex,
@@ -411,15 +443,17 @@ const RawVirtualizedRow = ({ viewId, rowHeight, absoluteIndex, variant, stickedT
                     .map(columns => (_jsx(View, { style: [
                         styles.cellsContainer,
                         styles.stickedToEndColumnGroup,
+                        horizontalScrollPosition === "NoScroll" && styles.stickedToEndColumnGroupLocked,
                         {
                             width: stickedToEndColumnsWidth,
                             backgroundColor: isHovered
                                 ? backgroundColorVariants[variant === "accented" ? "default" : "accented"]
                                 : backgroundColorVariants[variant],
                         },
-                    ], children: columns.map(({ id, width, renderCell }) => {
+                    ], children: columns.map(({ id, width, renderCell }, index) => {
                         const columnId = `${viewId}_${id}`;
-                        return (_jsx(View, { style: [styles.cell, { width }], "aria-describedby": columnId, children: renderCell({
+                        const paddingRight = index === columns.length - 1 ? stickedToEndLastCellRightPadding : 0;
+                        return (_jsx(View, { style: [styles.cell, { width: width + paddingRight, paddingRight }], "aria-describedby": columnId, children: renderCell({
                                 columnId,
                                 item,
                                 index: absoluteIndex,