@swan-io/lake 7.3.0 → 7.3.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@swan-io/lake",
-  "version": "7.3.0",
+  "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/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);
+};