@swan-io/lake 8.4.3 → 8.4.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@swan-io/lake",
-  "version": "8.4.3",
+  "version": "8.4.5",
   "engines": {
     "node": ">=20.9.0",
     "yarn": "^1.22.0"

package/src/components/AutocompleteSearchInput.js

@@ -1,11 +1,17 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { AsyncData, Result } from "@swan-io/boxed";
 import { useRef, useState } from "react";
+import { StyleSheet } from "react-native";
 import { P, match } from "ts-pattern";
 import { colors } from "../constants/design";
 import { LakeCombobox } from "./LakeCombobox";
 import { LakeText } from "./LakeText";
 import { Separator } from "./Separator";
+const styles = StyleSheet.create({
+    unselectable: {
+        userSelect: "none",
+    },
+});
 export const AutocompleteSearchInput = ({ inputRef, value, onValueChange, disabled, id, placeholder, error, emptyResultText, ListFooterComponent, shouldDisplaySuggestions = true, loadSuggestions, onSuggestion, onLoadError, }) => {
     const [state, setState] = useState(AsyncData.NotAsked());
     const lastRequest = useRef();
@@ -30,5 +36,5 @@ export const AutocompleteSearchInput = ({ inputRef, value, onValueChange, disabl
                 }
                 request.onResolve(value => setState(AsyncData.Done(value)));
             }
-        }, keyExtractor: item => `${item.title} ${item.subtitle}`, emptyResultText: emptyResultText, renderItem: item => (_jsxs(_Fragment, { children: [_jsx(LakeText, { numberOfLines: 1, selectable: false, color: colors.gray[900], children: item.title }), _jsx(LakeText, { numberOfLines: 1, selectable: false, variant: "smallRegular", children: item.subtitle })] })) }));
+        }, keyExtractor: item => `${item.title} ${item.subtitle}`, emptyResultText: emptyResultText, renderItem: item => (_jsxs(_Fragment, { children: [_jsx(LakeText, { numberOfLines: 1, style: styles.unselectable, color: colors.gray[900], children: item.title }), _jsx(LakeText, { numberOfLines: 1, style: styles.unselectable, variant: "smallRegular", children: item.subtitle })] })) }));
 };

package/src/components/BottomPanel.js

@@ -1,28 +1,19 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useMemo, useRef, useState } from "react";
-import { PanResponder, Pressable, ScrollView, StyleSheet, View } from "react-native";
+import { useEffect, useRef, useState } from "react";
+import { Pressable, ScrollView, StyleSheet, View } from "react-native";
 import { commonStyles } from "../constants/commonStyles";
-import { backgroundColor, colors, radii, shadows, spacings } from "../constants/design";
+import { backgroundColor, radii, shadows } from "../constants/design";
 import { useBodyClassName } from "../hooks/useBodyClassName";
-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
-const limitGrab = limitElastic({
-    elasticLength: ELASTIC_LENGTH,
-    elasticStrength: ELASTIC_STRENGTH,
-});
-const DELTA_Y_CLOSE_THRESHOLD = 100;
-const SWIPE_CLOSE_VELOCITY = 0.5;
 const BACKGROUND_COLOR = "rgba(0, 0, 0, 0.6)";
 const styles = StyleSheet.create({
     fill: {
         ...StyleSheet.absoluteFillObject,
-        position: "fixed",
+        position: "absolute",
         animationFillMode: "forwards",
         visibility: "visible",
     },
@@ -69,13 +60,6 @@ const styles = StyleSheet.create({
         transitionDuration: "300ms",
         transitionProperty: "transform",
     },
-    bottomCache: {
-        position: "absolute",
-        bottom: -ELASTIC_LENGTH + 1,
-        width: "100%",
-        height: ELASTIC_LENGTH,
-        backgroundColor: backgroundColor.accented,
-    },
     modalContainer: {
         ...StyleSheet.absoluteFillObject,
     },
@@ -100,15 +84,6 @@ const styles = StyleSheet.create({
         opacity: 0,
         order: -1,
     },
-    grabContainer: {
-        paddingHorizontal: 128,
-        paddingVertical: spacings[12],
-    },
-    grabLine: {
-        backgroundColor: colors.gray[100],
-        height: 5,
-        borderRadius: radii[4],
-    },
 });
 export const BottomPanel = ({ visible, onPressClose, children, returnFocus = true }) => {
     const [rootElement, setRootElement] = useState(() => undefined);
@@ -122,42 +97,13 @@ export const BottomPanel = ({ visible, onPressClose, children, returnFocus = tru
             setRootElement(undefined);
         };
     }, []);
-    const panResponder = useMemo(() => PanResponder.create({
-        onMoveShouldSetPanResponder: () => true,
-        onPanResponderGrant: () => {
-            if (container.current instanceof HTMLElement) {
-                container.current.style.transitionDuration = "0ms";
-            }
-        },
-        onPanResponderMove: (_event, { dy }) => {
-            const translateY = dy > 0 ? dy : -limitGrab(-dy);
-            if (container.current instanceof HTMLElement) {
-                container.current.style.transform = `translateY(${translateY}px)`;
-            }
-        },
-        onPanResponderRelease: (_event, gestureState) => {
-            if (container.current instanceof HTMLElement) {
-                // @ts-expect-error
-                container.current.style.transitionDuration = null;
-            }
-            const shouldClose = gestureState.dy > DELTA_Y_CLOSE_THRESHOLD || gestureState.vy > SWIPE_CLOSE_VELOCITY;
-            if (shouldClose) {
-                onPressClose();
-            }
-            else {
-                if (container.current instanceof HTMLElement) {
-                    container.current.style.transform = `translateY(0px)`;
-                }
-            }
-        },
-    }), [onPressClose]);
     useBodyClassName("BottomPanelOpen", { enabled: visible });
     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(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, onEscapeKey: () => {
-                                        if (onPressClose != null) {
-                                            onPressClose();
-                                        }
-                                    }, style: styles.trap, children: [_jsxs(View, { style: styles.modal, children: [_jsx(View, { style: styles.grabContainer, ...panResponder.panHandlers, children: _jsx(View, { style: styles.grabLine }) }), children] }), onPressClose != null ? (_jsx(Pressable, { onPress: onPressClose, style: styles.pressableOverlay })) : null] }) }), _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 ? (_jsx(View, { ref: container, style: styles.container, children: _jsx(ScrollView, { style: styles.modalContainer, contentContainerStyle: styles.modalContentContainer, children: _jsxs(FocusTrap, { autoFocus: true, focusLock: true, returnFocus: returnFocus, onEscapeKey: () => {
+                                    if (onPressClose != null) {
+                                        onPressClose();
+                                    }
+                                }, style: styles.trap, children: [_jsx(View, { style: styles.modal, children: children }), onPressClose != null ? (_jsx(Pressable, { onPress: onPressClose, style: styles.pressableOverlay })) : null] }) }) })) : null }) })] }));
 };