@swan-io/lake 8.5.1 → 8.6.0

package/package.json

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

package/src/components/FixedListViewCells.js

@@ -1,9 +1,10 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useState } from "react";
-import { Clipboard, StyleSheet, View } from "react-native";
+import { StyleSheet, View } from "react-native";
 import { match } from "ts-pattern";
 import { visuallyHiddenStyle } from "../constants/commonStyles";
 import { colors, spacings } from "../constants/design";
+import { setClipboardText } from "../utils/clipboard";
 import { isNotNullish, isNullish } from "../utils/nullish";
 import { Box } from "./Box";
 import { Icon } from "./Icon";
@@ -122,7 +123,7 @@ export const CopyableRegularTextCell = ({ variant = "regular", text, textToCopy,
     const clipboardText = textToCopy !== null && textToCopy !== void 0 ? textToCopy : text;
     const onPress = useCallback((event) => {
         event.preventDefault();
-        Clipboard.setString(clipboardText);
+        setClipboardText(clipboardText);
         setVisibleState("copied");
     }, [clipboardText]);
     return (_jsxs(View, { style: styles.cell, children: [_jsx(LakeTooltip, { placement: "right", onHide: () => setVisibleState("copy"), togglableOnFocus: true, content: visibleState === "copy" ? copyWording : copiedWording, containerStyle: styles.iconContainer, children: _jsx(Pressable, { role: "button", "aria-label": copyWording, onPress: onPress, style: ({ hovered }) => [styles.icon, hovered && styles.underline], children: ({ hovered }) => (_jsx(Icon, { name: hovered ? "copy-filled" : "copy-regular", color: "currentColor", size: 14 })) }) }), _jsx(Space, { width: 4 }), _jsx(LakeText, { tooltip: tooltip, color: colors.gray[900], style: styles.regularText, variant: variant, children: text })] }));

package/src/components/LakeCopyButton.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useState } from "react";
-import { Clipboard } from "react-native";
+import { setClipboardText } from "../utils/clipboard";
 import { Icon } from "./Icon";
 import { LakeTooltip } from "./LakeTooltip";
 import { Pressable } from "./Pressable";
@@ -10,7 +10,7 @@ export const LakeCopyButton = ({ color, copiedText, copyText, size = copyButtond
     return (_jsx(LakeTooltip, { describedBy: "copy", onHide: () => setVisibleState("copy"), togglableOnFocus: true, content: visibleState === "copy" ? copyText : copiedText, children: _jsx(Pressable, { onPress: event => {
                 event.stopPropagation();
                 event.preventDefault();
-                Clipboard.setString(valueToCopy);
+                setClipboardText(valueToCopy);
                 setVisibleState("copied");
             }, children: _jsx(Icon, { color: color, size: size, name: "copy-regular" }) }) }));
 };

package/src/components/SegmentedControl.d.ts

@@ -9,6 +9,7 @@ type Props<T extends string> = {
     selected: T;
     items: ReadonlyArray<Item<T>>;
     onValueChange: (value: T) => void;
+    minItemWidth?: number;
 };
-export declare const SegmentedControl: <T extends string>({ selected, items, onValueChange, }: Props<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const SegmentedControl: <T extends string>({ selected, items, onValueChange, minItemWidth, }: Props<T>) => import("react/jsx-runtime").JSX.Element;
 export {};

package/src/components/SegmentedControl.js

@@ -80,11 +80,11 @@ const styles = StyleSheet.create({
         bottom: 0,
     },
 });
-export const SegmentedControl = ({ selected, items, onValueChange, }) => {
+export const SegmentedControl = ({ selected, items, onValueChange, minItemWidth = 250, }) => {
     const selectedItemIndex = items.findIndex(item => item.id === selected);
-    const selectedItem = items.find(item => item.id === selected);
+    const selectedItem = items[selectedItemIndex];
     const [pressed, setPressed] = useState(false);
-    return (_jsx(ResponsiveContainer, { style: styles.container, children: ({ small }) => small ? (_jsxs(Box, { direction: "row", alignItems: "center", justifyContent: "spaceBetween", children: [_jsxs(Pressable, { style: styles.itemMobile, onPress: () => {
+    return (_jsx(ResponsiveContainer, { breakpoint: items.length * minItemWidth, style: styles.container, children: ({ small }) => small ? (_jsxs(Box, { direction: "row", alignItems: "center", justifyContent: "spaceBetween", children: [_jsxs(Pressable, { style: styles.itemMobile, onPress: () => {
                         setPressed(true);
                     }, children: [isNotNullish(selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.icon) &&
                             match(selectedItem)
@@ -101,7 +101,7 @@ export const SegmentedControl = ({ selected, items, onValueChange, }) => {
                                         match(item)
                                             .with({ icon: P.nonNullable, activeIcon: P.nonNullable }, () => (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.id) === item.id ? selectedItem.activeIcon : item.icon)
                                             .with({ icon: P.nonNullable }, () => item.icon)
-                                            .otherwise(() => null), _jsx(Space, { height: 8, width: 12 }), _jsx(LakeText, { color: colors.gray[900], numberOfLines: 1, variant: "regular", style: styles.itemText, children: item.name })] }, item.id), (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.id) === item.id && (_jsx(Box, { justifyContent: "center", style: { paddingHorizontal: spacings[24], backgroundColor: colors.gray[50] }, children: _jsx(Icon, { size: 16, name: "lake-check", color: colors.positive[500] }) }))] }))) }), _jsx(LakeButton, { mode: "tertiary", style: styles.button, size: "small", icon: "more-horizontal-filled", onPress: () => setPressed(true), ariaLabel: "Previous" })] })) : (_jsxs(Box, { direction: "row", children: [_jsx(View, { role: "none", style: [
+                                            .otherwise(() => null), _jsx(Space, { height: 8, width: 12 }), _jsx(LakeText, { color: colors.gray[900], numberOfLines: 1, variant: "regular", style: styles.itemText, children: item.name })] }), (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.id) === item.id && (_jsx(Box, { justifyContent: "center", style: { paddingHorizontal: spacings[24], backgroundColor: colors.gray[50] }, children: _jsx(Icon, { size: 16, name: "lake-check", color: colors.positive[500] }) }))] }, item.id))) }), _jsx(Space, { width: 4 }), _jsx(LakeButton, { mode: "tertiary", style: styles.button, size: "small", icon: "more-horizontal-filled", onPress: () => setPressed(true), ariaLabel: "Previous" })] })) : (_jsxs(Box, { direction: "row", children: [_jsx(View, { role: "none", style: [
                         styles.selectedItemIndicator,
                         styles.selectedItemDesktop,
                         {

package/src/components/ToastStack.js

@@ -2,10 +2,11 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { Array, Option } from "@swan-io/boxed";
 import { t } from "@swan-io/shared-business/src/utils/i18n";
 import { memo, useEffect, useRef, useState } from "react";
-import { Clipboard, StyleSheet, View } from "react-native";
+import { StyleSheet, View } from "react-native";
 import { P, match } from "ts-pattern";
 import { animations, colors, shadows } from "../constants/design";
 import { getErrorToRequestId, hideToast, useToasts, } from "../state/toasts";
+import { setClipboardText } from "../utils/clipboard";
 import { isNotNullishOrEmpty, isNullish } from "../utils/nullish";
 import { Box } from "./Box";
 import { Icon } from "./Icon";
@@ -115,7 +116,7 @@ const Toast = memo(({ variant, uid, title, description, error, progress, onClose
                                         : t("copyButton.copiedTooltip"), children: _jsxs(Pressable, { style: styles.copyButton, onPress: event => {
                                             event.stopPropagation();
                                             event.preventDefault();
-                                            Clipboard.setString(requestId !== null && requestId !== void 0 ? requestId : "");
+                                            setClipboardText(requestId !== null && requestId !== void 0 ? requestId : "");
                                             setVisibleState("copied");
                                         }, children: [_jsx(Icon, { color: colors.gray[700], size: 14, name: "copy-regular" }), _jsx(Space, { width: 4 }), _jsxs(LakeText, { numberOfLines: 1, variant: "smallRegular", color: colors.gray[700], children: ["ID: ", requestId] })] }) })] })))
                             .exhaustive()] }), _jsx(Pressable, { onPress: () => onClose(uid), style: styles.closeButton, children: _jsx(Icon, { name: "lake-close", size: 24, color: colors.gray[500] }) }), progress != null && (_jsxs(_Fragment, { children: [_jsx(Space, { height: 24 }), _jsx(View, { ref: progressBarRef, role: "progressbar", style: [styles.progressBar, { backgroundColor: colors[colorVariation][500] }] })] }))] }) }));

package/src/hooks/useBreakpoint.js

@@ -1,13 +1,9 @@
-// Based on https://github.com/necolas/react-native-web/blob/0.19.10/packages/react-native-web/src/exports/useWindowDimensions/index.js
+// Based on https://github.com/necolas/react-native-web/blob/0.19.12/packages/react-native-web/src/exports/useWindowDimensions/index.js
 import { useCallback, useSyncExternalStore } from "react";
-import { Dimensions } from "react-native";
+import { windowSize } from "../utils/windowSize";
 export const useBreakpoint = (breakpoint) => useSyncExternalStore(useCallback(onStoreChange => {
-    const subscription = Dimensions.addEventListener("change", ({ window }) => {
-        if (window != null) {
-            onStoreChange();
-        }
-    });
-    return subscription.remove;
+    const unsubscribe = windowSize.subscribe(onStoreChange);
+    return unsubscribe;
 }, []), useCallback(() => {
-    return Dimensions.get("window").width >= breakpoint;
+    return windowSize.get().width >= breakpoint;
 }, [breakpoint]));

package/src/utils/clipboard.d.ts

@@ -0,0 +1 @@
+export declare const setClipboardText: (text: string) => boolean;

package/src/utils/clipboard.js

@@ -0,0 +1,30 @@
+// Based on https://github.com/necolas/react-native-web/blob/0.19.12/packages/react-native-web/src/exports/Clipboard/index.js
+export const setClipboardText = (text) => {
+    // add the text to a hidden node
+    const node = document.createElement("span");
+    node.textContent = text;
+    node.style.opacity = "0";
+    node.style.position = "absolute";
+    node.style.userSelect = "auto";
+    node.style.whiteSpace = "pre-wrap";
+    document.body.appendChild(node);
+    // select the text
+    const selection = window.getSelection();
+    if (selection == null) {
+        return false;
+    }
+    selection.removeAllRanges();
+    const range = document.createRange();
+    range.selectNodeContents(node);
+    selection.addRange(range);
+    try {
+        document.execCommand("copy");
+    }
+    catch {
+        return false;
+    }
+    // remove selection and node
+    selection.removeAllRanges();
+    document.body.removeChild(node);
+    return true;
+};

package/src/utils/windowSize.d.ts

@@ -0,0 +1,8 @@
+export type WindowSize = {
+    width: number;
+    height: number;
+};
+export declare const windowSize: {
+    get: () => WindowSize;
+    subscribe: (callback: (size: WindowSize) => void) => () => void;
+};

package/src/utils/windowSize.js

@@ -0,0 +1,47 @@
+// Based on https://github.com/necolas/react-native-web/blob/0.19.12/packages/react-native-web/src/exports/Dimensions/index.js
+const get = () => {
+    const viewport = window.visualViewport;
+    /**
+     * iOS does not update viewport dimensions on keyboard open/close.
+     * window.visualViewport(https://developer.mozilla.org/en-US/docs/Web/API/VisualViewport)
+     * is used instead of document.documentElement.clientHeight (which remains as a fallback)
+     */
+    if (viewport != null) {
+        /**
+         * We are multiplying by scale because height and width from visual viewport
+         * also react to pinch zoom, and become smaller when zoomed. But it is not desired
+         * behaviour, since originally documentElement client height and width were used,
+         * and they do not react to pinch zoom.
+         */
+        return {
+            width: Math.round(viewport.width * viewport.scale),
+            height: Math.round(viewport.height * viewport.scale),
+        };
+    }
+    const documentElement = window.document.documentElement;
+    return {
+        width: documentElement.clientWidth,
+        height: documentElement.clientHeight,
+    };
+};
+const callbacks = new Set();
+let currentSize = get();
+const onResize = () => {
+    currentSize = get();
+    callbacks.forEach(callback => callback(currentSize));
+};
+export const windowSize = {
+    get: () => currentSize,
+    subscribe: (callback) => {
+        callbacks.add(callback);
+        return () => {
+            callbacks.delete(callback);
+        };
+    },
+};
+if (window.visualViewport != null) {
+    window.visualViewport.addEventListener("resize", onResize, false);
+}
+else {
+    window.addEventListener("resize", onResize, false);
+}