@swan-io/lake 7.2.5 → 7.3.1

package/package.json

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

package/src/components/BottomPanel.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Suspense, useEffect, useMemo, useRef, useState } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 import { PanResponder, Pressable, ScrollView, StyleSheet, View } from "react-native";
 import { commonStyles } from "../constants/commonStyles";
 import { backgroundColor, colors, radii, shadows, spacings } from "../constants/design";
@@ -8,6 +8,7 @@ import { limitElastic } from "../utils/math";
 import { FocusTrap } from "./FocusTrap";
 import { LoadingView } from "./LoadingView";
 import { Portal } from "./Portal";
+import { Suspendable } from "./Suspendable";
 import { TransitionView } from "./TransitionView";
 const ELASTIC_LENGTH = 100; // the maximum value you can reach
 const ELASTIC_STRENGTH = 0.008; // higher value, maximum value reached faster
@@ -153,5 +154,5 @@ export const BottomPanel = ({ visible, onPressClose, children, returnFocus = tru
     if (rootElement == null) {
         return null;
     }
-    return (_jsxs(Portal, { container: rootElement, children: [_jsx(TransitionView, { style: styles.fill, enter: styles.overlayEnter, leave: styles.overlayLeave, children: visible ? _jsx(View, { style: styles.overlay }) : null }), _jsx(Suspense, { fallback: _jsx(LoadingView, { color: backgroundColor.accented, delay: 0 }), children: _jsx(TransitionView, { style: styles.fill, enter: styles.modalEnter, leave: styles.modalLeave, children: visible ? (_jsxs(View, { ref: container, style: styles.container, children: [_jsx(ScrollView, { style: styles.modalContainer, contentContainerStyle: styles.modalContentContainer, children: _jsxs(FocusTrap, { autoFocus: true, focusLock: true, returnFocus: returnFocus, style: styles.trap, children: [onPressClose != null ? (_jsx(Pressable, { onPress: onPressClose, style: styles.pressableOverlay })) : null, _jsxs(View, { style: styles.modal, children: [_jsx(View, { style: styles.grabContainer, ...panResponder.panHandlers, children: _jsx(View, { style: styles.grabLine }) }), children] })] }) }), _jsx(View, { style: styles.bottomCache })] })) : null }) })] }));
+    return (_jsxs(Portal, { container: rootElement, children: [_jsx(TransitionView, { style: styles.fill, enter: styles.overlayEnter, leave: styles.overlayLeave, children: visible ? _jsx(View, { style: styles.overlay }) : null }), _jsx(Suspendable, { fallback: _jsx(LoadingView, { color: backgroundColor.accented, delay: 0 }), children: _jsx(TransitionView, { style: styles.fill, enter: styles.modalEnter, leave: styles.modalLeave, children: visible ? (_jsxs(View, { ref: container, style: styles.container, children: [_jsx(ScrollView, { style: styles.modalContainer, contentContainerStyle: styles.modalContentContainer, children: _jsxs(FocusTrap, { autoFocus: true, focusLock: true, returnFocus: returnFocus, style: styles.trap, children: [onPressClose != null ? (_jsx(Pressable, { onPress: onPressClose, style: styles.pressableOverlay })) : null, _jsxs(View, { style: styles.modal, children: [_jsx(View, { style: styles.grabContainer, ...panResponder.panHandlers, children: _jsx(View, { style: styles.grabLine }) }), children] })] }) }), _jsx(View, { style: styles.bottomCache })] })) : null }) })] }));
 };

package/src/components/FixedListViewCells.d.ts

@@ -71,7 +71,7 @@ export declare const BalanceCell: ({ value, currency, originalValue, formatCurre
     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, variant, tooltip, }: {
+export declare const LinkCell: ({ children, external, onPress, variant, tooltip, buttonPosition, }: {
     children: ReactNode;
     onPress: () => void;
     external?: boolean | undefined;
@@ -90,6 +90,7 @@ export declare const LinkCell: ({ children, external, onPress, variant, tooltip,
         containerStyle?: import("react-native").StyleProp<import("react-native").ViewStyle>;
         disabled?: boolean | undefined;
     } & import("react").RefAttributes<import("./LakeTooltip").TooltipRef>, "children"> | undefined;
+    buttonPosition?: "end" | "start" | undefined;
 }) => import("react/jsx-runtime").JSX.Element;
 export declare const StartAlignedCell: ({ children }: {
     children: ReactNode;

package/src/components/FixedListViewCells.js

@@ -142,11 +142,12 @@ 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, variant = "medium", tooltip, }) => {
-    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: variant, style: styles.mediumText, tooltip: tooltip, children: children })] }));
+export const LinkCell = ({ children, external = false, onPress, variant = "medium", tooltip, buttonPosition = "start", }) => {
+    const ArrowButton = () => (_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" }) }));
+    return (_jsxs(View, { style: styles.cell, children: [buttonPosition === "start" && (_jsxs(_Fragment, { children: [_jsx(ArrowButton, {}), _jsx(Space, { width: 8 })] })), _jsx(LakeText, { color: colors.gray[900], variant: variant, style: styles.mediumText, tooltip: tooltip, children: children }), buttonPosition === "end" && (_jsxs(_Fragment, { children: [_jsx(Space, { width: 8 }), _jsx(ArrowButton, {})] }))] }));
 };
 export const StartAlignedCell = ({ children }) => {
     return _jsx(View, { style: styles.cell, children: children });

package/src/components/FullViewportLayer.js

@@ -1,16 +1,17 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Suspense, useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import { StyleSheet, View } from "react-native";
 import { backgroundColor } from "../constants/design";
 import { FocusTrap } from "./FocusTrap";
 import { LoadingView } from "./LoadingView";
 import { Portal } from "./Portal";
+import { Suspendable } from "./Suspendable";
 import { TransitionView } from "./TransitionView";
 const BACKGROUND_COLOR = "rgba(0, 0, 0, 0.6)";
 const styles = StyleSheet.create({
     root: {
         ...StyleSheet.absoluteFillObject,
-        overflow: "hidden",
+        position: "fixed",
     },
     inert: {
         pointerEvents: "none",
@@ -36,14 +37,14 @@ const styles = StyleSheet.create({
     },
     containerEnter: {
         animationKeyframes: {
-            "0%": { opacity: 0, transform: "translateZ(0px) translateX(200px)" },
+            "0%": { opacity: 0, transform: "translateX(200px)" },
         },
         animationDuration: "500ms",
         animationTimingFunction: "ease-in-out",
     },
     containerLeave: {
         animationKeyframes: {
-            "100%": { opacity: 0, transform: "translateZ(0px) translateX(200px)" },
+            "100%": { opacity: 0, transform: "translateX(200px)" },
         },
         animationDuration: "500ms",
         animationTimingFunction: "ease-in-out",
@@ -54,21 +55,20 @@ const styles = StyleSheet.create({
     },
     container: {
         ...StyleSheet.absoluteFillObject,
-        transform: "translateZ(0px)",
         flexDirection: "row",
         alignItems: "stretch",
         backgroundColor: backgroundColor.default,
     },
     contentsEnter: {
         animationKeyframes: {
-            "0%": { transform: "translateZ(0px) translateX(50px)" },
+            "0%": { transform: "translateX(50px)" },
         },
         animationDuration: "500ms",
         animationTimingFunction: "ease-in-out",
     },
     contentsLeave: {
         animationKeyframes: {
-            "100%": { transform: "translateZ(0px) translateX(50px)" },
+            "100%": { transform: "translateX(50px)" },
         },
         animationDuration: "500ms",
         animationTimingFunction: "ease-in-out",
@@ -76,7 +76,6 @@ const styles = StyleSheet.create({
     contentsContainer: {
         ...StyleSheet.absoluteFillObject,
         zIndex: 2,
-        transform: "translateZ(0px)",
         maxWidth: "100%",
     },
     contents: {
@@ -90,5 +89,5 @@ export const FullViewportLayer = ({ visible, children }) => {
     useEffect(() => {
         setDelayedVisible(visible);
     }, [visible]);
-    return (_jsx(Portal, { container: rootNode, children: _jsxs(View, { style: [styles.root, !visible && styles.inert], children: [_jsx(TransitionView, { style: styles.fill, enter: styles.overlayEnter, leave: styles.overlayLeave, children: visible ? _jsx(View, { style: styles.overlay }) : null }), _jsx(Suspense, { fallback: _jsx(LoadingView, { color: backgroundColor.accented, delay: 0 }), children: _jsx(TransitionView, { style: styles.fill, enter: styles.containerEnter, leave: styles.containerLeave, children: delayedVisible ? (_jsx(FocusTrap, { focusLock: true, autoFocus: true, returnFocus: true, style: styles.container, children: _jsx(TransitionView, { style: styles.contentsContainer, enter: styles.contentsEnter, leave: styles.contentsLeave, children: _jsx(View, { style: styles.contents, children: _jsx(View, { style: styles.contentsContainer, children: children }) }) }) })) : null }) })] }) }));
+    return (_jsx(Portal, { container: rootNode, children: _jsxs(View, { style: [styles.root, !visible && styles.inert], children: [_jsx(TransitionView, { style: styles.fill, enter: styles.overlayEnter, leave: styles.overlayLeave, children: visible ? _jsx(View, { style: styles.overlay }) : null }), _jsx(Suspendable, { fallback: _jsx(LoadingView, { color: backgroundColor.accented, delay: 0 }), children: _jsx(TransitionView, { style: styles.fill, enter: styles.containerEnter, leave: styles.containerLeave, children: delayedVisible ? (_jsx(FocusTrap, { focusLock: true, autoFocus: true, returnFocus: true, style: styles.container, children: _jsx(TransitionView, { style: styles.contentsContainer, enter: styles.contentsEnter, leave: styles.contentsLeave, children: _jsx(View, { style: styles.contents, children: _jsx(View, { style: styles.contentsContainer, children: children }) }) }) })) : null }) })] }) }));
 };

package/src/components/RightPanel.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { Suspense, forwardRef, useEffect, useState } from "react";
+import { forwardRef, useEffect, useState } from "react";
 import { StyleSheet, View } from "react-native";
 import { backgroundColor, breakpoints } from "../constants/design";
 import { useBodyClassName } from "../hooks/useBodyClassName";
@@ -8,6 +8,7 @@ import { LoadingView } from "./LoadingView";
 import { Portal } from "./Portal";
 import { Pressable } from "./Pressable";
 import { ResponsiveContainer } from "./ResponsiveContainer";
+import { Suspendable } from "./Suspendable";
 import { TransitionView } from "./TransitionView";
 const BACKGROUND_COLOR = "rgba(0, 0, 0, 0.6)";
 const styles = StyleSheet.create({
@@ -102,5 +103,5 @@ export const RightPanel = forwardRef(({ visible, children, onPressClose }, ref)
         setDelayedVisible(visible);
     }, [visible]);
     useBodyClassName("RightPanelOpen", { enabled: visible });
-    return (_jsx(Portal, { container: rootNode, children: _jsx(View, { style: [styles.root, !visible && styles.inert], children: _jsx(ResponsiveContainer, { style: styles.root, breakpoint: breakpoints.small, children: ({ large }) => (_jsxs(_Fragment, { children: [_jsx(TransitionView, { style: styles.fill, enter: styles.overlayEnter, leave: styles.overlayLeave, children: visible ? (onPressClose != null ? (_jsx(Pressable, { style: styles.overlay, onPress: onPressClose })) : (_jsx(View, { style: styles.overlay }))) : null }), _jsx(Suspense, { fallback: _jsx(LoadingView, { color: backgroundColor.accented, delay: 0 }), children: _jsx(TransitionView, { style: [styles.fillMax, large && styles.fillMaxLarge], enter: styles.containerEnter, leave: styles.containerLeave, children: delayedVisible ? (_jsx(FocusTrap, { onEscapeKey: onPressClose, focusLock: true, autoFocus: true, returnFocus: true, ref: ref, style: styles.container, children: _jsx(TransitionView, { style: styles.contentsContainer, enter: styles.contentsEnter, leave: styles.contentsLeave, children: _jsx(View, { style: styles.contents, children: _jsx(View, { style: styles.contentsContainer, children: typeof children == "function" ? (_jsx(ResponsiveContainer, { style: styles.root, breakpoint: breakpoints.small, children: children })) : (children) }) }) }) })) : null }) })] })) }) }) }));
+    return (_jsx(Portal, { container: rootNode, children: _jsx(View, { style: [styles.root, !visible && styles.inert], children: _jsx(ResponsiveContainer, { style: styles.root, breakpoint: breakpoints.small, children: ({ large }) => (_jsxs(_Fragment, { children: [_jsx(TransitionView, { style: styles.fill, enter: styles.overlayEnter, leave: styles.overlayLeave, children: visible ? (onPressClose != null ? (_jsx(Pressable, { style: styles.overlay, onPress: onPressClose })) : (_jsx(View, { style: styles.overlay }))) : null }), _jsx(Suspendable, { fallback: _jsx(LoadingView, { color: backgroundColor.accented, delay: 0 }), children: _jsx(TransitionView, { style: [styles.fillMax, large && styles.fillMaxLarge], enter: styles.containerEnter, leave: styles.containerLeave, children: delayedVisible ? (_jsx(FocusTrap, { onEscapeKey: onPressClose, focusLock: true, autoFocus: true, returnFocus: true, ref: ref, style: styles.container, children: _jsx(TransitionView, { style: styles.contentsContainer, enter: styles.contentsEnter, leave: styles.contentsLeave, children: _jsx(View, { style: styles.contents, children: _jsx(View, { style: styles.contentsContainer, children: typeof children == "function" ? (_jsx(ResponsiveContainer, { style: styles.root, breakpoint: breakpoints.small, children: children })) : (children) }) }) }) })) : null }) })] })) }) }) }));
 });

package/src/components/Suspendable.d.ts

@@ -0,0 +1,3 @@
+import { SuspenseProps } from "react";
+export declare const Suspendable: (props: SuspenseProps) => import("react/jsx-runtime").JSX.Element;
+export declare const useIsSuspendable: () => boolean;

package/src/components/Suspendable.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Suspense, createContext, useContext } from "react";
+const SuspendableContext = createContext(false);
+export const Suspendable = (props) => {
+    return (_jsx(SuspendableContext.Provider, { value: true, children: _jsx(Suspense, { ...props }) }));
+};
+export const useIsSuspendable = () => {
+    return useContext(SuspendableContext);
+};