@swan-io/lake 8.18.1 → 8.18.3

package/package.json

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

package/src/components/VirtualizedList.d.ts

@@ -39,17 +39,19 @@ export type VirtualizedListProps<T, ExtraInfo> = {
     onEndReachedThreshold?: number;
     getRowLink?: (config: LinkConfig<T, ExtraInfo>) => ReactElement | undefined;
     renderEmptyList?: () => ReactNode;
+    marginHorizontal?: string;
     loading?: {
         isLoading: boolean;
         count: number;
     };
 };
-export declare const VirtualizedList: <T, ExtraInfo>({ variant, data, stickedToStartColumns, columns, stickedToEndColumns, headerHeight, rowHeight, renderThreshold, onEndReached, onEndReachedThreshold, loading, extraInfo, keyExtractor, }: VirtualizedListProps<T, ExtraInfo>) => import("react/jsx-runtime").JSX.Element;
+export declare const VirtualizedList: <T, ExtraInfo>({ variant, data, stickedToStartColumns, columns, stickedToEndColumns, headerHeight, rowHeight, renderThreshold, onEndReached, onEndReachedThreshold, loading, extraInfo, keyExtractor, marginHorizontal, }: VirtualizedListProps<T, ExtraInfo>) => import("react/jsx-runtime").JSX.Element;
 type VirtualizedListPlaceholderProps = {
     count: number;
     rowHeight: number;
     groupHeaderHeight?: number;
     headerHeight?: number;
+    marginHorizontal?: string;
 };
-export declare const VirtualizedListPlaceholder: ({ count, rowHeight, groupHeaderHeight, headerHeight, }: VirtualizedListPlaceholderProps) => import("react/jsx-runtime").JSX.Element;
+export declare const VirtualizedListPlaceholder: ({ count, rowHeight, groupHeaderHeight, headerHeight, marginHorizontal, }: VirtualizedListPlaceholderProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/src/components/VirtualizedList.js

@@ -3,10 +3,11 @@ 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, spacings } from "../constants/design";
+import { backgroundColor as backgroundColorVariants, colors, negativeSpacings, spacings, } from "../constants/design";
 import { useHover } from "../hooks/useHover";
 import { ScrollView } from "./ScrollView";
 import { Space } from "./Space";
+const HORIZONTAL_ROW_PADDING = 8;
 const styles = StyleSheet.create({
     container: {
         ...commonStyles.fill,
@@ -19,19 +20,26 @@ 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,
     },
     stickedToEndColumnGroup: {
         position: "sticky",
         right: 0,
+        marginRight: negativeSpacings[HORIZONTAL_ROW_PADDING],
+        paddingRight: spacings[HORIZONTAL_ROW_PADDING],
         zIndex: 1,
     },
     rowsContainer: {
@@ -43,6 +51,7 @@ const styles = StyleSheet.create({
         right: 0,
         flexDirection: "row",
         alignItems: "stretch",
+        paddingHorizontal: spacings[HORIZONTAL_ROW_PADDING],
     },
     headerCell: {
         display: "flex",
@@ -142,7 +151,7 @@ const styles = StyleSheet.create({
         width: "10%",
     },
 });
-export const VirtualizedList = ({ variant, data, stickedToStartColumns, columns, stickedToEndColumns, headerHeight, rowHeight, renderThreshold = 1000, onEndReached, onEndReachedThreshold = 200, loading, extraInfo, keyExtractor, }) => {
+export const VirtualizedList = ({ variant, data, stickedToStartColumns, columns, stickedToEndColumns, headerHeight, rowHeight, renderThreshold = 1000, onEndReached, onEndReachedThreshold = 200, loading, extraInfo, keyExtractor, marginHorizontal, }) => {
     // Used for unique IDs generation (usefull for header IDs and cells aria-describedBy pointing to them)
     const viewId = useId();
     const scrollViewRef = useRef(null);
@@ -160,7 +169,10 @@ export const VirtualizedList = ({ variant, data, stickedToStartColumns, columns,
     const stickedToEndColumnsWidth = useMemo(() => Option.fromNullable(stickedToEndColumns)
         .map(columns => columns.reduce((acc, column) => acc + column.width, 0))
         .getOr(0), [stickedToEndColumns]);
-    const contentContainerWidth = stickedToStartColumnsWidth + centerColumnsWidth + stickedToEndColumnsWidth;
+    const contentContainerWidth = stickedToStartColumnsWidth +
+        centerColumnsWidth +
+        stickedToEndColumnsWidth +
+        HORIZONTAL_ROW_PADDING * 2;
     const backgroundColor = backgroundColorVariants[variant];
     // We store the `startIndex` and `endIndex` rather than the scroll position
     // so that it triggers way less re-renders
@@ -317,7 +329,7 @@ export const VirtualizedList = ({ variant, data, stickedToStartColumns, columns,
                 },
             ] }));
     }, [stickedToEndColumnsWidth, horizontalScrollPosition]);
-    return (_jsxs(ScrollView, { ref: scrollViewRef, both: true, style: styles.container, onScroll: onScroll, scrollEventThrottle: 32, contentContainerStyle: {
+    return (_jsxs(ScrollView, { ref: scrollViewRef, both: true, style: [styles.container, { marginHorizontal }], onScroll: onScroll, scrollEventThrottle: 32, contentContainerStyle: {
             height: containerContainerHeight,
             width: contentContainerWidth,
         }, children: [header, rowsToRender
@@ -419,8 +431,8 @@ const RawVirtualizedRow = ({ viewId, rowHeight, absoluteIndex, variant, stickedT
     });
 };
 const VirtualizedRow = memo(RawVirtualizedRow);
-export const VirtualizedListPlaceholder = ({ count, rowHeight, groupHeaderHeight, headerHeight, }) => {
-    return (_jsxs(View, { style: styles.container, children: [headerHeight != null ? _jsx(View, { style: { height: headerHeight } }) : null, groupHeaderHeight != groupHeaderHeight ? _jsx(View, { style: { height: headerHeight } }) : null, _jsx(View, { children: Array.from({ length: count }, (_, index) => {
+export const VirtualizedListPlaceholder = ({ count, rowHeight, groupHeaderHeight, headerHeight, marginHorizontal, }) => {
+    return (_jsxs(View, { style: [styles.container, { marginHorizontal }], children: [headerHeight != null ? _jsx(View, { style: { height: headerHeight } }) : null, groupHeaderHeight != groupHeaderHeight ? _jsx(View, { style: { height: headerHeight } }) : null, _jsx(View, { children: Array.from({ length: count }, (_, index) => {
                     const top = index * rowHeight;
                     return (_jsx(View, { style: [styles.placeholderRowContainer, { height: rowHeight, top }], children: _jsxs(View, { style: styles.placeholderRowContents, 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)));
                 }) })] }));