@swan-io/lake 8.3.1 → 8.3.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@swan-io/lake",
-  "version": "8.3.1",
+  "version": "8.3.2",
   "engines": {
     "node": ">=18.0.0",
     "yarn": "^1.22.0"
@@ -30,7 +30,6 @@
     "@react-three/fiber": "^8.16.6",
     "@swan-io/boxed": "^2.3.0",
     "@swan-io/chicane": "^2.0.0",
-    "@swan-io/graphql-client": "^0.1.3",
     "@swan-io/use-form": "^2.0.4",
     "dayjs": "^1.11.11",
     "polished": "^4.3.1",

package/src/components/FilterChooser.d.ts

@@ -2,7 +2,7 @@ export declare function FilterChooser<FilterName extends string>({ filters, open
     filters: Partial<Record<FilterName, unknown>>;
     openFilters: FilterName[];
     label: string;
-    title: string;
+    title?: string;
     availableFilters: {
         label: string;
         name: FilterName;

package/src/components/FilterChooser.js

@@ -1,8 +1,9 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useRef } from "react";
 import { FlatList, Pressable, StyleSheet, View } from "react-native";
 import { colors } from "../constants/design";
 import { useDisclosure } from "../hooks/useDisclosure";
+import { isNotNullishOrEmpty } from "../utils/nullish";
 import { Box } from "./Box";
 import { Icon } from "./Icon";
 import { LakeButton } from "./LakeButton";
@@ -37,7 +38,7 @@ const styles = StyleSheet.create({
 export function FilterChooser({ filters, openFilters, label, title, availableFilters, large = true, onAddFilter, }) {
     const inputRef = useRef(null);
     const [visible, { close, toggle }] = useDisclosure(false);
-    return (_jsxs(_Fragment, { children: [_jsx(Box, { direction: "row", justifyContent: "start", alignItems: "center", children: _jsx(LakeButton, { size: "small", mode: "secondary", color: "gray", onPress: toggle, ref: inputRef, icon: large ? "chevron-down-filled" : "filter-filled", iconPosition: "end", ariaLabel: label, children: large ? label : null }) }), _jsx(Popover, { role: "listbox", matchReferenceMinWidth: true, onDismiss: close, referenceRef: inputRef, returnFocus: false, visible: visible, children: _jsxs(View, { style: styles.list, children: [_jsx(LakeText, { style: styles.availableFiltersTitle, children: title }), _jsx(Space, { height: 8 }), _jsx(FlatList, { role: "list", data: availableFilters, keyExtractor: (_, index) => `filter-item-${index}`, renderItem: ({ item }) => {
+    return (_jsxs(_Fragment, { children: [_jsx(Box, { direction: "row", justifyContent: "start", alignItems: "center", children: _jsx(LakeButton, { size: "small", mode: "secondary", color: "gray", onPress: toggle, ref: inputRef, icon: large ? "chevron-down-filled" : "filter-filled", iconPosition: "end", ariaLabel: label, children: large ? label : null }) }), _jsx(Popover, { role: "listbox", matchReferenceMinWidth: true, onDismiss: close, referenceRef: inputRef, returnFocus: false, visible: visible, children: _jsxs(View, { style: styles.list, children: [isNotNullishOrEmpty(title) ? (_jsxs(_Fragment, { children: [_jsx(LakeText, { style: styles.availableFiltersTitle, children: title }), _jsx(Space, { height: 8 })] })) : null, _jsx(FlatList, { role: "list", data: availableFilters, keyExtractor: (_, index) => `filter-item-${index}`, renderItem: ({ item }) => {
                                 const isSet = Boolean(filters[item.name]) || openFilters.includes(item.name);
                                 return (_jsxs(Pressable, { style: ({ hovered }) => [styles.item, hovered && styles.itemHovered], role: "button", disabled: isSet, onPress: () => {
                                         onAddFilter(item.name);

package/src/components/MultiSelect.js

@@ -1,8 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Array, Dict, Option } from "@swan-io/boxed";
 import { memo, useEffect, useMemo, useRef, useState } from "react";
-import { FlatList, Pressable, SectionList, StyleSheet, Text, View, } from "react-native";
+import { FlatList, Pressable, SectionList, StyleSheet, Text, TextInput, View, } from "react-native";
 import { backgroundColor, colors, radii, shadows, texts } from "../constants/design";
+import { useBoolean } from "../hooks/useBoolean";
 import { useDisclosure } from "../hooks/useDisclosure";
 import { groupBy } from "../utils/array";
 import { isNotNullish, isNotNullishOrEmpty } from "../utils/nullish";
@@ -11,7 +12,7 @@ import { Box } from "./Box";
 import { Icon } from "./Icon";
 import { InputError } from "./InputError";
 import { Popover } from "./Popover";
-import { PressableText, PressableTextInput } from "./Pressable";
+import { PressableText } from "./Pressable";
 import { Space } from "./Space";
 import { Tag } from "./Tag";
 const MAX_INPUT_HEIGHT = 120;
@@ -85,7 +86,7 @@ const styles = StyleSheet.create({
         paddingLeft: 40,
         placeholderTextColor: colors.gray[300],
     },
-    filterfocused: {
+    filterFocused: {
         borderColor: colors.gray[200],
     },
     searchIcon: {
@@ -136,6 +137,7 @@ const styles = StyleSheet.create({
 });
 export const MultiSelect = memo(({ color = "gray", disabled = false, emptyResultText, enableGroups = true, filterPlaceholder, items, onValueChange, placeholder, renderTagGroup, error, style, values, id, }) => {
     const [filter, setFilter] = useState("");
+    const [filterFocused, setFilterFocused] = useBoolean(false);
     const shouldScrollToBottomRef = useRef(false);
     const selectedTagListRef = useRef(null);
     const inputRef = useRef(null);
@@ -188,7 +190,7 @@ export const MultiSelect = memo(({ color = "gray", disabled = false, emptyResult
     const sections = useMemo(() => {
         return Array.filterMap(Dict.entries(groupBy(filteredItems, ({ group }) => group)), ([groupName, data]) => data === undefined ? Option.None() : Option.Some({ title: groupName, data }));
     }, [filteredItems]);
-    const ListHeaderComponent = useMemo(() => (_jsxs(Box, { direction: "row", alignItems: "center", style: styles.filterContainer, children: [_jsx(PressableTextInput, { autoComplete: "off", inputMode: "search", multiline: false, rows: 1, onChangeText: filterValue => setFilter(filterValue), placeholder: filterPlaceholder, value: filter, style: ({ focused }) => [styles.filterInput, focused && styles.filterfocused] }), _jsx(Icon, { name: "search-filled", color: colors[color].primary, size: 20, style: styles.searchIcon })] })), [filter, filterPlaceholder, color]);
+    const ListHeaderComponent = useMemo(() => (_jsxs(Box, { direction: "row", alignItems: "center", style: styles.filterContainer, children: [_jsx(TextInput, { autoComplete: "off", inputMode: "search", multiline: false, rows: 1, onChangeText: filterValue => setFilter(filterValue), placeholder: filterPlaceholder, value: filter, onFocus: setFilterFocused.on, onBlur: setFilterFocused.off, style: [styles.filterInput, filterFocused && styles.filterFocused] }), _jsx(Icon, { name: "search-filled", color: colors[color].primary, size: 20, style: styles.searchIcon })] })), [filter, filterFocused, setFilterFocused, filterPlaceholder, color]);
     const ListEmptyComponent = useMemo(() => (_jsxs(Box, { justifyContent: "center", alignItems: "center", style: styles.emptyList, children: [_jsx(Icon, { name: "clipboard-search-regular", size: 24, color: colors.gray.primary }), isNotNullishOrEmpty(emptyResultText) && (_jsxs(_Fragment, { children: [_jsx(Space, { height: 8 }), _jsx(Text, { style: styles.emptyListText, children: emptyResultText })] }))] })), [emptyResultText]);
     return (_jsxs(View, { style: style, children: [_jsxs(Pressable, { id: id, ref: inputRef, "aria-haspopup": "listbox", role: "button", "aria-expanded": visible, disabled: disabled, onPress: open, style: ({ hovered, focused }) => [
                     styles.base,

package/src/components/Pressable.d.ts

@@ -33,6 +33,9 @@ type ExtraProps = {
 };
 export type PressableViewProps = Except<Props<ViewProps>, "children">;
 export type PressableTextProps = Props<TextProps>;
+/**
+ * @deprecated
+ */
 export type PressableTextInputProps = Except<Props<TextInputProps>, "children" | "editable" | "keyboardType" | "numberOfLines">;
 export declare const Pressable: FC<PressableProps & ExtraProps & {
     ref?: Ref<View> | undefined;
@@ -151,6 +154,9 @@ export declare const PressableText: FC<{
 } & {
     ref?: Ref<Text> | undefined;
 }>;
+/**
+ * @deprecated
+ */
 export declare const PressableTextInput: FC<{
     allowFontScaling?: boolean | undefined;
     autoCapitalize?: "none" | "sentences" | "words" | "characters" | undefined;

package/src/components/Pressable.js

@@ -100,6 +100,9 @@ Component, config = {}) => {
 };
 export const Pressable = memo(getPressable(View, { applyPressStyle: true }));
 export const PressableText = memo(getPressable(Text, { applyPressStyle: true }));
+/**
+ * @deprecated
+ */
 export const PressableTextInput = memo(getPressable(TextInput, { applyPressStyle: false }));
 PressableText.displayName = "PressableText";
 PressableTextInput.displayName = "PressableTextInput";

package/src/components/Switch.js

@@ -1,9 +1,7 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, memo, useEffect, useRef } from "react";
-import { Animated, Pressable, StyleSheet, View } from "react-native";
+import { forwardRef, memo } from "react";
+import { Pressable, StyleSheet, View } from "react-native";
 import { backgroundColor, colors, shadows } from "../constants/design";
-import { useAnimatedValue } from "../hooks/useAnimatedValue";
-import { interpolate } from "../utils/math";
 import { Icon } from "./Icon";
 const WIDTH = 36;
 const BUTTON_SIZE = 16;
@@ -16,7 +14,7 @@ const styles = StyleSheet.create({
         width: WIDTH,
         boxSizing: "content-box",
         transitionProperty: "background-color",
-        transitionDuration: "300ms",
+        transitionDuration: "250ms",
         boxShadow: "inset 0 0 0 1px rgba(0, 0, 0, 0.2)",
     },
     active: {
@@ -39,11 +37,18 @@ const styles = StyleSheet.create({
         position: "absolute",
         top: PADDING,
         width: BUTTON_SIZE,
+        transform: `translateX(${PADDING}px)`,
+        transitionProperty: "transform",
+        transitionDuration: "250ms",
+        transitionTimingFunction: "ease",
+    },
+    buttonActive: {
+        transform: `translateX(${WIDTH - BUTTON_SIZE - PADDING}px)`,
     },
     icon: {
         opacity: 0,
         transitionProperty: "opacity",
-        transitionDuration: "300ms",
+        transitionDuration: "250ms",
     },
     shadow: {
         position: "absolute",
@@ -53,34 +58,9 @@ const styles = StyleSheet.create({
         boxShadow: shadows.tile,
         opacity: 0,
         transitionProperty: "opacity",
-        transitionDuration: "300ms",
+        transitionDuration: "250ms",
     },
 });
 export const Switch = memo(forwardRef(({ value, disabled = false, onValueChange }, ref) => {
-    const animatedValue = value ? 1 : 0;
-    const animation = useAnimatedValue(animatedValue);
-    const buttonRef = useRef(null);
-    useEffect(() => {
-        const interpolateValue = interpolate({
-            inputRange: [0, 1],
-            outputRange: [PADDING, WIDTH - BUTTON_SIZE - PADDING],
-        });
-        const id = animation.addListener(({ value }) => {
-            if (buttonRef.current instanceof HTMLElement) {
-                buttonRef.current.style.transform = `translateX(${interpolateValue(value)}px)`;
-            }
-        });
-        return () => {
-            animation.removeListener(id);
-        };
-    }, [animation]);
-    useEffect(() => {
-        Animated.spring(animation, {
-            bounciness: 6,
-            speed: 25,
-            toValue: animatedValue,
-            useNativeDriver: false,
-        }).start();
-    }, [animation, animatedValue]);
-    return (_jsx(Pressable, { ref: ref, role: "switch", "aria-checked": value, disabled: disabled, onPress: () => onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(!value), children: ({ hovered }) => (_jsxs(_Fragment, { children: [_jsx(View, { style: [styles.shadow, hovered && styles.opaque] }), _jsx(View, { style: [styles.base, value && styles.active, disabled && styles.disabled], children: _jsx(View, { ref: buttonRef, style: styles.button, children: _jsx(Icon, { color: colors.positive[400], name: "checkmark-filled", size: 10, style: [styles.icon, value && styles.opaque] }) }) })] })) }));
+    return (_jsx(Pressable, { ref: ref, role: "switch", "aria-checked": value, disabled: disabled, onPress: () => onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(!value), children: ({ hovered }) => (_jsxs(_Fragment, { children: [_jsx(View, { style: [styles.shadow, hovered && styles.opaque] }), _jsx(View, { style: [styles.base, value && styles.active, disabled && styles.disabled], children: _jsx(View, { style: [styles.button, value && styles.buttonActive], children: _jsx(Icon, { color: colors.positive[400], name: "checkmark-filled", size: 10, style: [styles.icon, value && styles.opaque] }) }) })] })) }));
 }));

package/src/components/ToastStack.js

@@ -1,12 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Array, Option } from "@swan-io/boxed";
-import { ClientError } from "@swan-io/graphql-client";
 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 { P, match } from "ts-pattern";
 import { animations, colors, shadows } from "../constants/design";
-import { getErrorToRequestId, hideToast, useToasts } from "../state/toasts";
+import { getErrorToRequestId, hideToast, useToasts, } from "../state/toasts";
 import { isNotNullishOrEmpty, isNullish } from "../utils/nullish";
 import { Box } from "./Box";
 import { Icon } from "./Icon";
@@ -66,6 +65,10 @@ const styles = StyleSheet.create({
         flexShrink: 1,
     },
 });
+const errorsToArray = (errors) => {
+    const asArray = Array.isArray(errors) ? errors : [errors];
+    return Array.filterMap(asArray, error => error instanceof Error ? Option.Some(error) : Option.None());
+};
 const Toast = memo(({ variant, uid, title, description, error, progress, onClose }) => {
     const progressBarRef = useRef(null);
     const [visibleState, setVisibleState] = useState("copy");
@@ -74,14 +77,7 @@ const Toast = memo(({ variant, uid, title, description, error, progress, onClose
         if (error == undefined) {
             return Option.None();
         }
-        return Array.findMap(ClientError.toArray(error), error => {
-            if (error instanceof Error) {
-                return Option.fromNullable(getErrorToRequestId().get(error));
-            }
-            else {
-                return Option.None();
-            }
-        });
+        return Array.findMap(errorsToArray(error), error => Option.fromNullable(getErrorToRequestId().get(error)));
     });
     const colorVariation = match(variant)
         .returnType()
@@ -94,12 +90,11 @@ const Toast = memo(({ variant, uid, title, description, error, progress, onClose
         if (isNullish(progress)) {
             return;
         }
-        const id = progress.addListener(({ value }) => {
+        return progress.subscribe(value => {
             if (progressBarRef.current instanceof HTMLElement) {
                 progressBarRef.current.style.transform = `scaleX(${value})`;
             }
         });
-        return () => progress.removeListener(id);
     }, [progress]);
     return (_jsx(View, { style: styles.toastWrapper, children: _jsxs(View, { style: [
                 styles.toast,

package/src/hooks/useAnimatedValue.d.ts

@@ -1,2 +1,5 @@
 import { Animated } from "react-native";
+/**
+ * @deprecated
+ */
 export declare const useAnimatedValue: (value: number) => Animated.Value;

package/src/hooks/useAnimatedValue.js

@@ -1,6 +1,9 @@
 import { useRef } from "react";
 import { Animated } from "react-native";
 const UNSET = Symbol("unset");
+/**
+ * @deprecated
+ */
 export const useAnimatedValue = (value) => {
     const ref = useRef(UNSET);
     if (ref.current === UNSET) {

package/src/state/toasts.d.ts

@@ -1,5 +1,12 @@
-import { Animated } from "react-native";
-import { ControllableTimeout } from "../utils/timer";
+declare const createProgress: ({ duration, onEnd }: {
+    duration: number;
+    onEnd: () => void;
+}) => {
+    clear: () => void;
+    reset: () => void;
+    subscribe: (callback: (value: number) => void) => () => void;
+};
+export type ToastProgress = ReturnType<typeof createProgress>;
 export type ToastVariant = "success" | "info" | "warning" | "error";
 type ToastContent = {
     variant: ToastVariant;
@@ -14,8 +21,7 @@ type Toast = {
     title: string;
     description?: string;
     error?: unknown;
-    progress?: Animated.Value;
-    timeout?: ControllableTimeout;
+    progress?: ToastProgress;
 };
 export declare const useToasts: () => Toast[];
 export declare const hideToast: (uid: string) => void;

package/src/state/toasts.js

@@ -1,17 +1,62 @@
 import { atom, useAtom } from "react-atomic-state";
-import { Animated, Easing } from "react-native";
-import { createControllableTimeout } from "../utils/timer";
+// based on https://gist.github.com/ncou/3a0a1f89c8e22416d0d607f621a948a9
+const createProgress = ({ duration, onEnd }) => {
+    const callbacks = new Set();
+    let endDate = 0;
+    let timerId = 0;
+    const step = () => {
+        const value = (endDate - Date.now()) / duration;
+        callbacks.forEach(callback => callback(value));
+        animationRequest = window.requestAnimationFrame(step);
+    };
+    let animationRequest = window.requestAnimationFrame(step);
+    const start = () => {
+        endDate = Date.now() + duration;
+        timerId = window.setTimeout(() => {
+            clear();
+            onEnd();
+        }, duration);
+    };
+    const reset = () => {
+        window.clearTimeout(timerId);
+        start();
+    };
+    const subscribe = (callback) => {
+        callbacks.add(callback);
+        return () => {
+            callbacks.delete(callback);
+        };
+    };
+    const clear = () => {
+        document.removeEventListener("visibilitychange", onDocumentVisible);
+        window.clearTimeout(timerId);
+        window.cancelAnimationFrame(animationRequest);
+    };
+    const onDocumentVisible = () => {
+        document.removeEventListener("visibilitychange", onDocumentVisible);
+        reset();
+    };
+    if (document.hidden) {
+        document.addEventListener("visibilitychange", onDocumentVisible);
+    }
+    else {
+        reset();
+    }
+    return {
+        clear,
+        reset,
+        subscribe,
+    };
+};
 const toasts = atom([]);
 export const useToasts = () => useAtom(toasts);
 export const hideToast = (uid) => {
-    var _a, _b;
+    var _a;
     const toast = toasts.get().find(toast => toast.uid === uid);
-    if (!toast) {
-        return;
+    if (toast != null) {
+        (_a = toast.progress) === null || _a === void 0 ? void 0 : _a.clear();
+        toasts.set(toasts => toasts.filter(toast => toast.uid !== uid));
     }
-    (_a = toast.timeout) === null || _a === void 0 ? void 0 : _a.clear();
-    (_b = toast.progress) === null || _b === void 0 ? void 0 : _b.stopAnimation();
-    toasts.set(toasts => toasts.filter(toast => toast.uid !== uid));
 };
 let errorToRequestId = new WeakMap();
 export const registerErrorToRequestId = (value) => {
@@ -21,50 +66,23 @@ export const getErrorToRequestId = () => {
     return errorToRequestId;
 };
 export const showToast = ({ variant, title, description, error, autoClose }) => {
+    var _a;
     const uid = `${variant} - ${title} - ${description !== null && description !== void 0 ? description : ""}`;
     const toast = toasts.get().find(toast => toast.uid === uid);
     if (toast != null) {
-        if (toast.timeout && toast.progress) {
-            toast.timeout.clear();
-            Animated.timing(toast.progress, {
-                duration: 100,
-                easing: Easing.linear,
-                toValue: 1,
-                useNativeDriver: false,
-            }).start(() => {
-                var _a;
-                (_a = toast.timeout) === null || _a === void 0 ? void 0 : _a.reset();
-            });
-        }
+        (_a = toast.progress) === null || _a === void 0 ? void 0 : _a.reset();
         return uid;
     }
     // by default, only info and success toasts are auto-closing
-    const isAutoClosingToast = autoClose !== null && autoClose !== void 0 ? autoClose : (variant === "info" || variant === "success");
-    const progress = isAutoClosingToast ? new Animated.Value(1) : undefined;
-    const timeout = progress
-        ? createControllableTimeout({
+    const shouldAutoClose = autoClose !== null && autoClose !== void 0 ? autoClose : (variant === "info" || variant === "success");
+    const progress = shouldAutoClose
+        ? createProgress({
             duration: 10000,
-            onStart: duration => {
-                Animated.timing(progress, {
-                    duration,
-                    easing: Easing.linear,
-                    toValue: 0,
-                    useNativeDriver: false,
-                }).start();
-            },
-            onReset: duration => {
-                Animated.timing(progress, {
-                    duration,
-                    easing: Easing.linear,
-                    toValue: 0,
-                    useNativeDriver: false,
-                }).start();
-            },
             onEnd: () => {
                 hideToast(uid);
             },
         })
         : undefined;
-    toasts.set(toasts => [{ uid, variant, title, description, error, progress, timeout }, ...toasts]);
+    toasts.set(toasts => [{ uid, variant, title, description, error, progress }, ...toasts]);
     return uid;
 };

package/src/utils/timer.d.ts

@@ -1,8 +1,14 @@
+/**
+ * @deprecated
+ */
 export type ControllableTimeout = {
     readonly duration: number;
     readonly clear: () => void;
     readonly reset: () => void;
 };
+/**
+ * @deprecated
+ */
 export declare const createControllableTimeout: (config: {
     duration: number;
     onStart: (duration: number) => void;

package/src/utils/timer.js

@@ -1,4 +1,7 @@
 // based on https://gist.github.com/ncou/3a0a1f89c8e22416d0d607f621a948a9
+/**
+ * @deprecated
+ */
 export const createControllableTimeout = (config) => {
     const { duration, onStart, onReset, onEnd } = config;
     let timerId = 0;