@swan-io/lake 8.3.2 → 8.4.0

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@swan-io/lake",
-  "version": "8.3.2",
+  "version": "8.4.0",
   "engines": {
-    "node": ">=18.0.0",
+    "node": ">=20.9.0",
     "yarn": "^1.22.0"
   },
   "files": [

package/src/components/BottomPanel.js

@@ -98,6 +98,7 @@ const styles = StyleSheet.create({
         outlineWidth: 0,
         // make focus indicator invisible on iOS (outline: none doesn't work)
         opacity: 0,
+        order: -1,
     },
     grabContainer: {
         paddingHorizontal: 128,
@@ -154,5 +155,9 @@ 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(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 }) })] }));
+    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 }) })] }));
 };

package/src/components/Toggle.js

@@ -42,7 +42,7 @@ export const Toggle = ({ onToggle, value, disabled = false, mode = "desktop", on
     const onItemRef = useRef(null);
     const offItemRef = useRef(null);
     const [handleStyle, setHandleStyle] = useState();
-    const isMobile = mode === "mobile";
+    const isMobileMode = mode === "mobile";
     const onColor = value ? colors.positive[500] : colors.gray[500];
     const offColor = !value ? colors.negative[500] : colors.gray[500];
     const reajustLayout = useCallback(() => {
@@ -55,7 +55,7 @@ export const Toggle = ({ onToggle, value, disabled = false, mode = "desktop", on
             }));
         }, () => { });
     }, [value]);
-    useEffect(reajustLayout, [reajustLayout, value, isMobile, onLabel, offLabel]);
+    useEffect(reajustLayout, [reajustLayout, value, isMobileMode, onLabel, offLabel]);
     return (_jsxs(Pressable, { style: [styles.switch, disabled && commonStyles.disabled], onPress: () => onToggle(!value), "aria-disabled": disabled, "aria-checked": value, disabled: disabled, ref: containerRef, role: "switch", onLayout: reajustLayout, children: [_jsx(View, { style: [
                     styles.handle,
                     handleStyle,
@@ -63,5 +63,5 @@ export const Toggle = ({ onToggle, value, disabled = false, mode = "desktop", on
                         borderColor: value ? colors.positive[500] : colors.negative[500],
                         backgroundColor: value ? colors.positive[50] : colors.negative[50],
                     },
-                ] }), _jsx(Box, { style: styles.switchItem, ref: onItemRef, children: isMobile ? (_jsx(Icon, { size: 16, name: "checkmark-circle-regular", color: onColor })) : (_jsx(LakeText, { variant: "smallMedium", color: onColor, children: onLabel })) }), _jsx(Box, { style: styles.switchItem, ref: offItemRef, children: isMobile ? (_jsx(Icon, { size: 16, name: "subtract-circle-regular", color: offColor })) : (_jsx(LakeText, { variant: "smallMedium", color: offColor, children: offLabel })) })] }));
+                ] }), _jsx(Box, { style: styles.switchItem, ref: onItemRef, children: isMobileMode ? (_jsx(Icon, { size: 16, name: "checkmark-circle-regular", color: onColor })) : (_jsx(LakeText, { variant: "smallMedium", color: onColor, children: onLabel })) }), _jsx(Box, { style: styles.switchItem, ref: offItemRef, children: isMobileMode ? (_jsx(Icon, { size: 16, name: "subtract-circle-regular", color: offColor })) : (_jsx(LakeText, { variant: "smallMedium", color: offColor, children: offLabel })) })] }));
 };

package/src/utils/userAgent.d.ts

@@ -1,4 +1,18 @@
+/**
+ * @deprecated
+ */
 export declare const isChrome: boolean;
+/**
+ * @deprecated
+ */
 export declare const isMobile: boolean;
+/**
+ * @deprecated
+ */
 export declare const isChromeMobile: boolean;
+/**
+ * @see https://github.com/jakearchibald/safari-14-idb-fix/blob/v3.0.0/src/index.ts#L7
+ * @deprecated
+ */
 export declare const isSafari: boolean;
+export declare const isDecentMobileDevice: boolean;

package/src/utils/userAgent.js

@@ -2,8 +2,35 @@ import { isNullish } from "./nullish";
 const CHROME_REGEXP = /Chrom(e|ium)\//;
 const MOBI_REGEXP = /Mobi/;
 const SAFARI_REGEXP = /Safari\//;
+/**
+ * @deprecated
+ */
 export const isChrome = CHROME_REGEXP.test(navigator.userAgent);
+/**
+ * @deprecated
+ */
 export const isMobile = MOBI_REGEXP.test(navigator.userAgent);
+/**
+ * @deprecated
+ */
 export const isChromeMobile = isChrome && isMobile;
-// https://github.com/jakearchibald/safari-14-idb-fix/blob/v3.0.0/src/index.ts#L7
+/**
+ * @see https://github.com/jakearchibald/safari-14-idb-fix/blob/v3.0.0/src/index.ts#L7
+ * @deprecated
+ */
 export const isSafari = isNullish(navigator.userAgentData) && SAFARI_REGEXP.test(navigator.userAgent) && !isChrome;
+// from https://stackoverflow.com/questions/21741841/detecting-ios-android-operating-system
+export const isDecentMobileDevice = (() => {
+    // Windows Phone must come first because its UA also contains "Android"
+    if (/windows phone/i.test(navigator.userAgent)) {
+        return false;
+    }
+    if (/android/i.test(navigator.userAgent)) {
+        return true;
+    }
+    // MSStream must be checked to avoid identify IE11 as iOS
+    if (/iPad|iPhone/.test(navigator.userAgent) && !("MSStream" in window)) {
+        return true;
+    }
+    return false;
+})();

package/src/utils/viewport.d.ts

@@ -1,3 +1,7 @@
 import { Future } from "@swan-io/boxed";
+/**
+ * Prevents Safari from zooming automatically on inputs, still allow user to zoom manually
+ * @deprecated
+ */
 export declare const preventSafariAutoZoomOnInputs: () => void;
 export declare const detectScrollAnimationEnd: (element: HTMLElement) => Future<void>;

package/src/utils/viewport.js

@@ -1,7 +1,10 @@
 import { Future } from "@swan-io/boxed";
 import { isNotNullish } from "./nullish";
 import { isSafari } from "./userAgent";
-// Prevents Safari from zooming automatically on inputs, still allow user to zoom manually
+/**
+ * Prevents Safari from zooming automatically on inputs, still allow user to zoom manually
+ * @deprecated
+ */
 export const preventSafariAutoZoomOnInputs = () => {
     if (isSafari) {
         const viewport = document.querySelector("meta[name=viewport]");