@swan-io/lake 11.1.4 → 11.1.6

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@swan-io/lake",
-  "version": "11.1.4",
+  "version": "11.1.6",
   "engines": {
     "node": ">=20.9.0",
-    "pnpm": "9.9.0"
+    "pnpm": "^9.13.0"
   },
   "files": [
     "LICENSE",

package/src/components/Cells.d.ts

@@ -6,36 +6,25 @@ import { TextVariant } from "./LakeText";
 import { LakeTooltip } from "./LakeTooltip";
 declare const directionStyles: {
     column: {
-        flexShrink: number;
         flexDirection: "column";
-        justifyContent: "center";
-    };
-    columnReverse: {
-        flexShrink: number;
-        flexDirection: "column-reverse";
-        justifyContent: "center";
     };
     row: {
-        flexShrink: number;
         flexDirection: "row";
-        alignItems: "center";
-    };
-    rowReverse: {
-        flexShrink: number;
-        flexDirection: "row-reverse";
-        alignItems: "center";
     };
 };
 type Align = "left" | "center" | "right";
+type FadeOn = "left" | "right";
 type SortDirection = "Desc" | "Asc";
 type TooltipProp = Except<ComponentProps<typeof LakeTooltip>, "children">;
 type CellProps = {
     children: ReactNode;
     align?: Align;
     direction?: keyof typeof directionStyles;
+    fadeOn?: FadeOn;
     style?: StyleProp<ViewStyle>;
+    contentContainerStyle?: StyleProp<ViewStyle>;
 };
-export declare const Cell: ({ children, align, direction, style }: CellProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Cell: ({ children, align, direction, fadeOn, style, contentContainerStyle, }: CellProps) => import("react/jsx-runtime").JSX.Element;
 type HeaderCellProps = {
     align?: Align;
     sort?: SortDirection;
@@ -80,11 +69,12 @@ type LinkCellProps = {
     buttonPosition?: "start" | "end";
     children: ReactNode;
     external?: boolean;
+    fadeOn?: FadeOn;
     onPress: () => void;
     tooltip?: TooltipProp;
     variant?: TextVariant;
 };
-export declare const LinkCell: ({ buttonPosition, children, external, onPress, tooltip, variant, }: LinkCellProps) => import("react/jsx-runtime").JSX.Element;
+export declare const LinkCell: ({ buttonPosition, children, external, fadeOn, onPress, tooltip, variant, }: LinkCellProps) => import("react/jsx-runtime").JSX.Element;
 /**
  * @deprecated Avoid usage
  */

package/src/components/Cells.js

@@ -3,7 +3,7 @@ import { useCallback, useState } from "react";
 import { StyleSheet, View } from "react-native";
 import { match } from "ts-pattern";
 import { visuallyHiddenStyle } from "../constants/commonStyles";
-import { colors, negativeSpacings, spacings } from "../constants/design";
+import { colors, invariantColors, spacings } from "../constants/design";
 import { setClipboardText } from "../utils/clipboard";
 import { identity } from "../utils/function";
 import { isNotNullish, isNullish } from "../utils/nullish";
@@ -15,28 +15,22 @@ import { Pressable } from "./Pressable";
 import { Space } from "./Space";
 /* eslint-disable react-native/no-unused-styles */
 const directionStyles = StyleSheet.create({
-    column: {
-        flexShrink: 1,
-        flexDirection: "column",
-        justifyContent: "center",
-    },
-    columnReverse: {
-        flexShrink: 1,
-        flexDirection: "column-reverse",
-        justifyContent: "center",
-    },
-    row: {
-        flexShrink: 1,
-        flexDirection: "row",
-        alignItems: "center",
-    },
-    rowReverse: {
-        flexShrink: 1,
-        flexDirection: "row-reverse",
-        alignItems: "center",
-    },
+    column: { flexDirection: "column" },
+    row: { flexDirection: "row" },
+});
+const alignItemsStyles = StyleSheet.create({
+    left: { alignItems: "flex-start" },
+    center: { alignItems: "center" },
+    right: { alignItems: "flex-end" },
+});
+const justifyContentStyles = StyleSheet.create({
+    left: { justifyContent: "flex-start" },
+    center: { justifyContent: "center" },
+    right: { justifyContent: "flex-end" },
 });
 /* eslint-enable react-native/no-unused-styles */
+const fadeOnLeftMask = `linear-gradient(to right, ${invariantColors.transparent}, ${invariantColors.black} ${spacings[16]})`;
+const fadeOnRightMask = `linear-gradient(to left, ${invariantColors.transparent}, ${invariantColors.black} ${spacings[16]})`;
 const styles = StyleSheet.create({
     cell: {
         flexDirection: "row",
@@ -44,14 +38,21 @@ const styles = StyleSheet.create({
         flexShrink: 1,
         paddingHorizontal: spacings[16],
     },
-    noCursor: {
-        cursor: "text",
+    cellContentContainer: {
+        flexGrow: 1,
+        flexShrink: 1,
+        overflow: "hidden",
     },
-    marginLeftAuto: {
-        marginLeft: "auto",
+    fadeOnLeft: {
+        maskImage: fadeOnLeftMask,
+        WebkitMaskImage: fadeOnLeftMask,
     },
-    marginRightAuto: {
-        marginRight: "auto",
+    fadeOnRight: {
+        maskImage: fadeOnRightMask,
+        WebkitMaskImage: fadeOnRightMask,
+    },
+    noCursor: {
+        cursor: "text",
     },
     sortIcon: {
         transitionProperty: "transform",
@@ -72,34 +73,44 @@ const styles = StyleSheet.create({
     headerUnderlineActive: {
         backgroundColor: colors.current[500],
     },
+    // eslint-disable-next-line react-native/no-color-literals
     buttonUnderline: {
-        boxShadow: "inset 0 -2px currentColor",
+        position: "absolute",
+        bottom: 0,
+        left: 0,
+        right: spacings[8],
+        height: 2,
+        backgroundColor: "currentColor",
     },
-    copyButton: {
-        justifyContent: "center",
-        alignSelf: "stretch",
-        marginHorizontal: negativeSpacings[8],
+    buttonEndUnderline: {
+        right: 0,
+        left: spacings[8],
     },
-    copyButtonTooltip: {
-        justifyContent: "center",
+    fullHeight: {
         height: "100%",
-        paddingHorizontal: spacings[8],
     },
-    linkButton: {
+    button: {
         justifyContent: "center",
-        alignSelf: "stretch",
-        marginHorizontal: negativeSpacings[8],
-        paddingHorizontal: spacings[8],
+        height: "100%",
+        paddingRight: spacings[8],
+    },
+    buttonEnd: {
+        paddingRight: 0,
+        paddingLeft: spacings[8],
     },
     actionCell: {
         paddingVertical: spacings[16],
         paddingHorizontal: spacings[8],
     },
 });
-export const Cell = ({ children, align = "left", direction = "row", style }) => (_jsx(View, { style: [styles.cell, style], children: _jsx(View, { style: [
+export const Cell = ({ children, align = "left", direction = "row", fadeOn, style, contentContainerStyle, }) => (_jsx(View, { style: [styles.cell, style], children: _jsx(View, { style: [
+            styles.cellContentContainer,
             directionStyles[direction],
-            (align === "right" || align === "center") && styles.marginLeftAuto,
-            (align === "left" || align === "center") && styles.marginRightAuto,
+            alignItemsStyles[direction === "row" ? "center" : align],
+            justifyContentStyles[direction === "row" ? align : "center"],
+            fadeOn === "left" && styles.fadeOnLeft,
+            fadeOn === "right" && styles.fadeOnRight,
+            contentContainerStyle,
         ], children: children }) }));
 export const HeaderCell = ({ align = "left", sort, text, onPress }) => {
     const sortActive = isNotNullish(sort) && isNotNullish(onPress);
@@ -110,9 +121,10 @@ export const HeaderCell = ({ align = "left", sort, text, onPress }) => {
                 .with("Desc", () => "Asc")
                 .otherwise(() => "Desc"));
         }, children: ({ hovered }) => (_jsxs(View, { style: [
+                styles.cellContentContainer,
                 directionStyles["row"],
-                (align === "right" || align === "center") && styles.marginLeftAuto,
-                (align === "left" || align === "center") && styles.marginRightAuto,
+                alignItemsStyles["center"],
+                justifyContentStyles[align],
             ], children: [_jsx(LakeText, { numberOfLines: 1, align: align, color: sortActive ? colors.current[500] : colors.gray[900], variant: "medium", children: text }), isNotNullish(onPress) && (_jsxs(_Fragment, { children: [_jsx(Space, { width: 8 }), _jsx(Icon, { size: 15, color: sortActive ? colors.current[500] : colors.gray[500], name: sortActive ? "arrow-down-filled" : "chevron-up-down-regular", style: [styles.sortIcon, sort === "Asc" && styles.rotated] })] })), (hovered || sortActive) && (_jsx(View, { style: [styles.headerUnderline, sortActive && styles.headerUnderlineActive] }))] })) }));
 };
 export const TextCell = ({ align = "left", color = colors.gray[900], text, tooltip, variant = "regular", }) => (_jsx(Cell, { align: align, children: _jsx(LakeText, { numberOfLines: 1, align: align, color: color, tooltip: tooltip, variant: variant, children: text }) }));
@@ -124,7 +136,7 @@ export const CopyableTextCell = ({ copiedWording, copyWording, text, textToCopy,
         setClipboardText(clipboardText);
         setVisibleState("copied");
     }, [clipboardText]);
-    return (_jsxs(Cell, { children: [_jsx(Pressable, { "aria-label": copyWording, role: "button", onPress: onPress, style: ({ hovered }) => [styles.copyButton, hovered && styles.buttonUnderline], children: ({ hovered }) => (_jsx(LakeTooltip, { content: visibleState === "copy" ? copyWording : copiedWording, onHide: () => setVisibleState("copy"), placement: "center", togglableOnFocus: true, containerStyle: styles.copyButtonTooltip, children: _jsx(Icon, { name: hovered ? "copy-filled" : "copy-regular", color: "currentColor", size: 14 }) })) }), _jsx(Space, { width: 8 }), _jsx(LakeText, { numberOfLines: 1, color: colors.gray[900], tooltip: tooltip, variant: variant, children: text })] }));
+    return (_jsxs(Cell, { style: styles.fullHeight, children: [_jsx(LakeTooltip, { content: visibleState === "copy" ? copyWording : copiedWording, onHide: () => setVisibleState("copy"), placement: "left", togglableOnFocus: true, containerStyle: styles.fullHeight, children: _jsx(Pressable, { "aria-label": copyWording, role: "button", onPress: onPress, style: styles.button, children: ({ hovered }) => (_jsxs(_Fragment, { children: [_jsx(Icon, { name: hovered ? "copy-filled" : "copy-regular", color: "currentColor", size: 14 }), hovered && _jsx(View, { role: "none", style: styles.buttonUnderline })] })) }) }), _jsx(LakeText, { numberOfLines: 1, color: colors.gray[900], tooltip: tooltip, variant: variant, children: text })] }));
 };
 // TODO: handle `+` sign properly
 export const BalanceCell = ({ textAlign = "right", align = textAlign, currency, formatCurrency, originalValue, value, variant = "medium", }) => (_jsxs(Cell, { align: align, direction: "column", children: [_jsx(LakeText, { numberOfLines: 1, align: align, color: colors.gray[900], variant: variant, style: [
@@ -132,10 +144,20 @@ export const BalanceCell = ({ textAlign = "right", align = textAlign, currency,
                 value < 0 && { color: colors.negative.primary },
             ], children: (value > 0 ? "+" : "") + formatCurrency(value, currency) }), isNotNullish(originalValue) && originalValue.currency !== currency && (_jsx(LakeText, { numberOfLines: 1, align: align, color: colors.gray[500], variant: "smallRegular", children: (originalValue.value > 0 ? "+" : "") +
                 formatCurrency(originalValue.value, originalValue.currency) }))] }));
-export const LinkCell = ({ buttonPosition = "start", children, external = false, onPress, tooltip, variant = "medium", }) => (_jsxs(Cell, { direction: buttonPosition === "end" ? "rowReverse" : "row", children: [_jsx(Pressable, { style: ({ hovered }) => [styles.linkButton, hovered && styles.buttonUnderline], onPress: event => {
+export const LinkCell = ({ buttonPosition = "start", children, external = false, fadeOn, onPress, tooltip, variant = "medium", }) => {
+    const atEnd = buttonPosition === "end";
+    const elements = [
+        _jsx(Pressable, { style: [styles.button, atEnd && styles.buttonEnd], onPress: event => {
                 event.preventDefault();
                 onPress();
-            }, children: _jsx(Icon, { size: 14, name: external ? "open-regular" : "arrow-right-filled" }) }), _jsx(Space, { width: 8 }), _jsx(LakeText, { numberOfLines: 1, color: colors.gray[900], variant: variant, tooltip: tooltip, children: children })] }));
+            }, children: ({ hovered }) => (_jsxs(_Fragment, { children: [_jsx(Icon, { size: 14, name: external ? "open-regular" : "arrow-right-filled" }), hovered && (_jsx(View, { role: "none", style: [styles.buttonUnderline, atEnd && styles.buttonEndUnderline] }))] })) }),
+        _jsx(LakeText, { numberOfLines: 1, color: colors.gray[900], variant: variant, tooltip: tooltip, children: children }),
+    ];
+    if (atEnd) {
+        elements.reverse();
+    }
+    return _jsx(Cell, { fadeOn: fadeOn, children: elements });
+};
 /**
  * @deprecated Avoid usage
  */

package/src/components/VirtualizedList.d.ts

@@ -7,12 +7,12 @@ export type ColumnTitleConfig<ExtraInfo> = {
 export type ColumnCellConfig<T, ExtraInfo> = {
     columnId: string;
     item: T;
-    index: number;
-    extraInfo: ExtraInfo;
     /**
-     * @deprecated Always false in VirtualizedList
+     * isHovered is only set for PlainListView
      */
     isHovered: boolean;
+    index: number;
+    extraInfo: ExtraInfo;
 };
 export type ColumnConfig<T, ExtraInfo> = {
     id: string;

package/src/components/VirtualizedList.js

@@ -69,14 +69,12 @@ const styles = StyleSheet.create({
         transitionTimingFunction: "ease-in-out",
     },
     headerCell: {
-        display: "flex",
         flexDirection: "row",
         flexGrow: 1,
         alignItems: "center",
         boxShadow: `0 -1px ${colors.gray[100]}`,
     },
     cell: {
-        display: "flex",
         flexDirection: "row",
         flexGrow: 1,
         alignItems: "stretch",

package/src/hooks/useContextualLayer.js

@@ -36,7 +36,7 @@ export const useContextualLayer = ({ placement, visible, matchReferenceWidth = f
                 top: rect.top + height,
             };
         const horizontalPosition = match(inferedPlacement)
-            .with("left", () => ({ left: rect.left }))
+            .with("left", () => ({ left: rect.left - 12 }))
             .with("right", () => ({ right: window.innerWidth - rect.right }))
             .with("center", () => ({ left: rect.left + width / 2, transform: "translateX(-50%)" }))
             .exhaustive();