@swan-io/lake 11.1.5 → 11.1.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@swan-io/lake",
-  "version": "11.1.5",
+  "version": "11.1.6",
   "engines": {
     "node": ">=20.9.0",
     "pnpm": "^9.13.0"

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, invariantColors, 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";
@@ -73,24 +73,30 @@ 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],
@@ -130,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: [
@@ -139,15 +145,15 @@ export const BalanceCell = ({ textAlign = "right", align = textAlign, currency,
             ], 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, fadeOn, onPress, tooltip, variant = "medium", }) => {
+    const atEnd = buttonPosition === "end";
     const elements = [
-        _jsx(Pressable, { style: ({ hovered }) => [styles.linkButton, hovered && styles.buttonUnderline], onPress: event => {
+        _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 }),
+            }, 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 (buttonPosition === "end") {
+    if (atEnd) {
         elements.reverse();
     }
     return _jsx(Cell, { fadeOn: fadeOn, children: elements });

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();