@swan-io/lake 2.7.3 → 2.7.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@swan-io/lake",
-  "version": "2.7.3",
+  "version": "2.7.4",
   "engines": {
     "node": ">=18.0.0",
     "yarn": "^1.22.0"

package/src/components/FixedListView.d.ts

@@ -65,9 +65,11 @@ export type FixedListViewProps<T, ExtraInfo> = {
     data: T[];
     keyExtractor: (item: T, index: number) => string;
     highlightedRowId?: string;
+    headerBackgroundColor?: string;
     headerHeight: number;
     rowHeight: number;
     rowVerticalSpacing: number;
+    horizontalPadding?: number;
     extraInfo: ExtraInfo;
     stickedToStartColumns?: ColumnConfig<T, ExtraInfo>[];
     columns: ColumnConfig<T, ExtraInfo>[];
@@ -82,7 +84,8 @@ export type FixedListViewProps<T, ExtraInfo> = {
         count: number;
     };
 };
-export declare const FixedListView: <T, ExtraInfo>({ data: originalData, mode, keyExtractor, highlightedRowId, rowHeight, rowVerticalSpacing, headerHeight, renderThreshold, stickedToStartColumns: initialStickedToStartColumns, columns: initialColumns, stickedToEndColumns: initialStickedToEndColumns, extraInfo, onEndReached, onEndReachedThresholdPx, getRowLink, renderEmptyList, loading, }: FixedListViewProps<T, ExtraInfo>) => import("react/jsx-runtime").JSX.Element;
+export declare const SCROLLBAR_RESERVED_SPACE = 20;
+export declare const FixedListView: <T, ExtraInfo>({ data: originalData, mode, keyExtractor, highlightedRowId, rowHeight, rowVerticalSpacing, horizontalPadding, headerBackgroundColor, headerHeight, renderThreshold, stickedToStartColumns: initialStickedToStartColumns, columns: initialColumns, stickedToEndColumns: initialStickedToEndColumns, extraInfo, onEndReached, onEndReachedThresholdPx, getRowLink, renderEmptyList, loading, }: FixedListViewProps<T, ExtraInfo>) => import("react/jsx-runtime").JSX.Element;
 type PlaceholderProps = {
     count: number;
     rowHeight: number;

package/src/components/FixedListView.js

@@ -50,7 +50,7 @@ import { LakeHeading } from "./LakeHeading";
 import { LakeText } from "./LakeText";
 import { Space } from "./Space";
 const HORIZONTAL_SAFE_AREA = 10;
-const SCROLLBAR_RESERVED_SPACE = 20;
+export const SCROLLBAR_RESERVED_SPACE = 20;
 const styles = StyleSheet.create({
     root: {
         height: 1,
@@ -97,16 +97,12 @@ const styles = StyleSheet.create({
         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",
@@ -128,7 +124,6 @@ const styles = StyleSheet.create({
         flexDirection: "row",
         alignItems: "stretch",
         zIndex: 2,
-        backgroundColor: backgroundColor.default,
     },
     segment: {
         flexDirection: "row",
@@ -177,9 +172,6 @@ const styles = StyleSheet.create({
         flexDirection: "row",
         alignItems: "stretch",
     },
-    stickyRow: {
-    // overflow: "hidden",
-    },
     evenRow: {
         backgroundColor: backgroundColor.accented,
     },
@@ -226,7 +218,6 @@ const styles = StyleSheet.create({
         transitionTimingFunction: "ease-in-out",
     },
     rowBackgroundContainerPlain: {
-        backgroundColor: backgroundColor.default,
         left: -10,
         right: -10,
         boxShadow: `inset 0 -1px ${colors.gray[100]}`,
@@ -414,14 +405,15 @@ const findNextFocusableElement = (sortedCellIds, currentCellIndex, 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, }) => {
+export const FixedListView = ({ data: originalData, mode = "tile", keyExtractor, highlightedRowId, rowHeight, rowVerticalSpacing, horizontalPadding = HORIZONTAL_SAFE_AREA, headerBackgroundColor = backgroundColor.default, 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;
+    const rowsHeight = originalData.length * totalRowHeight;
+    const totalHeight = headerHeight + rowsHeight;
     // 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] });
@@ -560,7 +552,7 @@ export const FixedListView = ({ data: originalData, mode = "tile", keyExtractor,
                     now - lastHorizontalScroll.current.date > SCROLL_THRESHOLD_MS) {
                     const scrollLeft = centerColumns.scrollLeft;
                     setShouldShowStartGradient(scrollLeft > 0);
-                    setShouldShowEndGradient(centerColumns.scrollWidth - HORIZONTAL_SAFE_AREA * 2 >=
+                    setShouldShowEndGradient(centerColumns.scrollWidth - horizontalPadding * 2 >=
                         scrollLeft + centerColumns.clientWidth);
                     centerHeaders.scrollLeft = scrollLeft;
                     horizontalScrollbar.scrollLeft = scrollLeft;
@@ -573,7 +565,7 @@ export const FixedListView = ({ data: originalData, mode = "tile", keyExtractor,
                     now - lastHorizontalScroll.current.date > SCROLL_THRESHOLD_MS) {
                     const scrollLeft = centerHeaders.scrollLeft;
                     setShouldShowStartGradient(scrollLeft > 0);
-                    setShouldShowEndGradient(centerHeaders.scrollWidth - HORIZONTAL_SAFE_AREA * 2 >=
+                    setShouldShowEndGradient(centerHeaders.scrollWidth - horizontalPadding * 2 >=
                         scrollLeft + centerHeaders.clientWidth);
                     centerColumns.scrollLeft = scrollLeft;
                     horizontalScrollbar.scrollLeft = scrollLeft;
@@ -586,7 +578,7 @@ export const FixedListView = ({ data: originalData, mode = "tile", keyExtractor,
                     now - lastHorizontalScroll.current.date > SCROLL_THRESHOLD_MS) {
                     const scrollLeft = horizontalScrollbar.scrollLeft;
                     setShouldShowStartGradient(scrollLeft > 0);
-                    setShouldShowEndGradient(horizontalScrollbar.scrollWidth - HORIZONTAL_SAFE_AREA * 2 >=
+                    setShouldShowEndGradient(horizontalScrollbar.scrollWidth - horizontalPadding * 2 >=
                         scrollLeft + horizontalScrollbar.clientWidth);
                     centerHeaders.scrollLeft = scrollLeft;
                     centerColumns.scrollLeft = scrollLeft;
@@ -602,7 +594,7 @@ export const FixedListView = ({ data: originalData, mode = "tile", keyExtractor,
                 horizontalScrollbar.removeEventListener("scroll", onScrollbarScroll);
             };
         }
-    }, []);
+    }, [horizontalPadding]);
     const onKeyDown = useCallback((event) => {
         const target = event.nativeEvent.target;
         const currentTarget = event.nativeEvent.currentTarget;
@@ -743,9 +735,9 @@ export const FixedListView = ({ data: originalData, mode = "tile", keyExtractor,
                 ], children: [_jsx(View, { "aria-busy": isLoading, style: [
                             styles.loadingPlaceholder,
                             {
-                                top: totalHeight,
-                                marginLeft: HORIZONTAL_SAFE_AREA * 2,
-                                marginRight: HORIZONTAL_SAFE_AREA * 2,
+                                top: rowsHeight,
+                                marginLeft: horizontalPadding * 2,
+                                marginRight: horizontalPadding * 2,
                             },
                         ], children: isLoading
                             ? match(mode)
@@ -755,30 +747,39 @@ export const FixedListView = ({ data: originalData, mode = "tile", keyExtractor,
                             : 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,
+                                        width: stickedToStartColumnsWidth + horizontalPadding,
+                                        paddingLeft: horizontalPadding,
                                     },
-                                ], 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] })] }), _jsx(View, { style: [styles.stickyRow, { height: totalHeight }], children: startRows })] })) : null, _jsxs(View, { style: [
+                                ], children: [_jsxs(View, { style: [
+                                            styles.headingSegment,
+                                            { height: headerHeight, backgroundColor: headerBackgroundColor },
+                                        ], children: [_jsx(HeaderSegment, { columns: stickedToStartColumns, extraInfo: extraInfo, viewId: viewId, width: stickedToStartColumnsWidth }), _jsx(View, { style: [
+                                                    styles.stickyColumnStartOverflow,
+                                                    { width: horizontalPadding, backgroundColor: headerBackgroundColor },
+                                                ] }), _jsx(View, { style: [styles.topGradient, isScrolled && styles.visibleTopGradient] })] }), _jsx(View, { style: { height: rowsHeight }, children: startRows })] })) : null, _jsxs(View, { style: [
                                     styles.centerColumnsContainer,
                                     {
-                                        paddingLeft: stickedToStartColumns.length === 0 ? HORIZONTAL_SAFE_AREA : ZERO,
-                                        paddingRight: stickedToEndColumns.length === 0 ? HORIZONTAL_SAFE_AREA : ZERO,
+                                        paddingLeft: stickedToStartColumns.length === 0 ? horizontalPadding : ZERO,
+                                        paddingRight: stickedToEndColumns.length === 0 ? horizontalPadding : ZERO,
                                     },
-                                ], children: [_jsxs(View, { style: [styles.headingSegment, { height: headerHeight }], children: [_jsx(ScrollView, { ref: centerHeadersRef, horizontal: true, onLayout: onCenterTrackLayout, style: styles.centerColumns, contentContainerStyle: {
+                                ], children: [_jsxs(View, { style: [
+                                            styles.headingSegment,
+                                            { height: headerHeight, backgroundColor: headerBackgroundColor },
+                                        ], 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),
+                                                        (stickedToStartColumns.length === 0 ? horizontalPadding : 0) +
+                                                        (stickedToEndColumns.length === 0 ? horizontalPadding : 0),
                                                 }, children: _jsx(HeaderSegment, { columns: columns, extraInfo: extraInfo, viewId: viewId, width: centerColumnsWidth }) }), _jsx(View, { style: [styles.topGradient, isScrolled && styles.visibleTopGradient] })] }), _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),
+                                                    (stickedToStartColumns.length === 0 ? horizontalPadding : 0) +
+                                                    (stickedToEndColumns.length === 0 ? horizontalPadding : 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 ? horizontalPadding : 0) +
+                                                (stickedToEndColumns.length === 0 ? horizontalPadding : 0),
                                         } }), stickedToStartColumns.length > 0 && hasHorizontalScroll ? (_jsx(View, { style: [
                                             styles.leftToRightGradient,
                                             {
@@ -798,10 +799,16 @@ export const FixedListView = ({ data: originalData, mode = "tile", keyExtractor,
                                         ] })) : null] }), stickedToEndColumns.length > 0 ? (_jsxs(View, { style: [
                                     styles.stickyColumn,
                                     {
-                                        width: stickedToEndColumnsWidth + HORIZONTAL_SAFE_AREA,
-                                        paddingRight: HORIZONTAL_SAFE_AREA,
+                                        width: stickedToEndColumnsWidth + horizontalPadding,
+                                        paddingRight: horizontalPadding,
                                     },
-                                ], 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] })] }), _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, tabIndex: 0 })] }));
+                                ], children: [_jsxs(View, { style: [
+                                            styles.headingSegment,
+                                            { height: headerHeight, backgroundColor: headerBackgroundColor },
+                                        ], children: [_jsx(View, { style: [
+                                                    styles.stickyColumnEndOverflow,
+                                                    { width: horizontalPadding, backgroundColor: headerBackgroundColor },
+                                                ] }), _jsx(HeaderSegment, { columns: stickedToEndColumns, extraInfo: extraInfo, viewId: viewId, width: stickedToEndColumnsWidth }), _jsx(View, { style: [styles.topGradient, isScrolled && styles.visibleTopGradient] })] }), _jsx(View, { style: { height: rowsHeight }, children: endRows })] })) : null] })] }), data.length === 0 && isNotNullish(renderEmptyList) && !isLoading ? (_jsx(View, { style: styles.emptyListContainer, children: renderEmptyList() })) : null, _jsx(View, { ref: endFocusAnchorRef, tabIndex: 0 })] }));
 };
 export const FixedListViewPlaceholder = ({ count, rowHeight, rowVerticalSpacing, groupHeaderHeight, headerHeight, paddingHorizontal = HORIZONTAL_SAFE_AREA, }) => {
     const totalRowHeight = rowHeight + rowVerticalSpacing;

package/src/components/FixedListViewCells.d.ts

@@ -30,7 +30,7 @@ export declare const CopyableRegularTextCell: ({ variant, text, copyWording, cop
     copyWording: string;
     copiedWording: string;
 }) => import("react/jsx-runtime").JSX.Element;
-export declare const BalanceCell: ({ value, currency, originalValue, formatCurrency, textAlign, }: {
+export declare const BalanceCell: ({ value, currency, originalValue, formatCurrency, textAlign, variant, }: {
     value: number;
     currency: string;
     originalValue?: {
@@ -39,11 +39,13 @@ export declare const BalanceCell: ({ value, currency, originalValue, formatCurre
     } | undefined;
     formatCurrency: (value: number, currency: string) => string;
     textAlign?: "left" | "right" | "center" | undefined;
+    variant?: "light" | "semibold" | "medium" | "regular" | "smallSemibold" | "smallMedium" | "smallRegular" | undefined;
 }) => import("react/jsx-runtime").JSX.Element;
-export declare const LinkCell: ({ children, external, onPress, }: {
+export declare const LinkCell: ({ children, external, onPress, variant, }: {
     children: ReactNode;
     onPress: () => void;
     external?: boolean | undefined;
+    variant?: "light" | "semibold" | "medium" | "regular" | "smallSemibold" | "smallMedium" | "smallRegular" | undefined;
 }) => import("react/jsx-runtime").JSX.Element;
 export declare const StartAlignedCell: ({ children }: {
     children: ReactNode;

package/src/components/FixedListViewCells.js

@@ -123,8 +123,8 @@ export const CopyableRegularTextCell = ({ variant = "regular", text, copyWording
     return (_jsxs(View, { style: styles.cell, children: [_jsx(LakeTooltip, { placement: "top", onHide: () => setVisibleState("copy"), togglableOnFocus: true, content: visibleState === "copy" ? copyWording : copiedWording, containerStyle: styles.iconContainer, children: _jsx(Pressable, { role: "button", "aria-label": copyWording, onPress: onPress, style: ({ hovered }) => [styles.icon, hovered && styles.underline], children: ({ hovered }) => (_jsx(Icon, { name: hovered ? "copy-filled" : "copy-regular", color: "currentColor", size: 14 })) }) }), _jsx(Space, { width: 4 }), _jsx(LakeText, { color: colors.gray[900], style: styles.regularText, variant: variant, children: text })] }));
 };
 // TODO: handle `+` sign properly
-export const BalanceCell = ({ value, currency, originalValue, formatCurrency, textAlign = "right", }) => {
-    return (_jsxs(View, { style: styles.balanceCellContainer, children: [_jsx(View, { style: styles.cell, children: _jsxs(LakeText, { align: textAlign, color: colors.gray[900], variant: "medium", style: [
+export const BalanceCell = ({ value, currency, originalValue, formatCurrency, textAlign = "right", variant = "medium", }) => {
+    return (_jsxs(View, { style: styles.balanceCellContainer, children: [_jsx(View, { style: styles.cell, children: _jsxs(LakeText, { align: textAlign, color: colors.gray[900], variant: variant, style: [
                         styles.mediumText,
                         {
                             justifyContent: match(textAlign)
@@ -137,11 +137,11 @@ export const BalanceCell = ({ value, currency, originalValue, formatCurrency, te
                         value < 0 && { color: colors.negative.primary },
                     ], children: [value > 0 && "+", formatCurrency(value, currency)] }) }), isNotNullish(originalValue) && originalValue.currency !== currency && (_jsx(View, { style: styles.cell, children: _jsxs(LakeText, { style: styles.mediumText, align: textAlign, color: colors.gray[500], variant: "smallRegular", children: [originalValue.value > 0 && "+", formatCurrency(originalValue.value, originalValue.currency)] }) }))] }));
 };
-export const LinkCell = ({ children, external = false, onPress, }) => {
+export const LinkCell = ({ children, external = false, onPress, variant = "medium", }) => {
     return (_jsxs(View, { style: styles.cell, children: [_jsx(Pressable, { style: ({ hovered }) => [styles.icon, hovered && styles.underline], onPress: event => {
                     event.preventDefault();
                     onPress();
-                }, children: _jsx(Icon, { size: 14, name: external ? "open-regular" : "arrow-right-filled" }) }), _jsx(Space, { width: 8 }), _jsx(LakeText, { color: colors.gray[900], variant: "medium", style: styles.mediumText, children: children })] }));
+                }, children: _jsx(Icon, { size: 14, name: external ? "open-regular" : "arrow-right-filled" }) }), _jsx(Space, { width: 8 }), _jsx(LakeText, { color: colors.gray[900], variant: variant, style: styles.mediumText, children: children })] }));
 };
 export const StartAlignedCell = ({ children }) => {
     return _jsx(View, { style: styles.cell, children: children });

package/src/components/LakeTextInput.js

@@ -43,11 +43,11 @@ const styles = StyleSheet.create({
         placeholderTextColor: colors.gray[400],
         color: colors.gray[900],
         paddingHorizontal: spacings[8],
-        height: 40,
+        height: 38,
         minWidth: 0,
     },
     multilineInput: {
-        height: "auto",
+        height: "100%",
         padding: spacings[8],
     },
     inputWithUnit: {