@swan-io/lake 4.5.1 → 4.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@swan-io/lake",
-  "version": "4.5.1",
+  "version": "4.6.0",
   "engines": {
     "node": ">=18.0.0",
     "yarn": "^1.22.0"

package/src/components/Avatar.js

@@ -1,15 +1,12 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { memo } from "react";
-import { StyleSheet, Text, View } from "react-native";
+import { StyleSheet, View } from "react-native";
 import { commonStyles } from "../constants/commonStyles";
 import { colors } from "../constants/design";
-import { typography } from "../constants/typography";
 import { Icon } from "./Icon";
+import { LakeText } from "./LakeText";
 const styles = StyleSheet.create({
     text: {
-        ...typography.bodyLarge,
-        fontWeight: typography.fontWeights.demi,
-        textAlign: "center",
         userSelect: "none",
     },
     container: {
@@ -39,5 +36,5 @@ export const Avatar = memo(({ initials = "", size }) => {
                 width: size,
                 borderRadius: size / 2,
             },
-        ], children: initials !== "" ? (_jsx(Text, { style: [styles.text, { color: colors[variant][500], fontSize: size * 0.4 }], children: initials })) : (_jsx(Icon, { name: "person-filled", size: size - 8, color: colors[variant][50] })) }));
+        ], children: initials !== "" ? (_jsx(LakeText, { variant: "semibold", align: "center", style: [styles.text, { color: colors[variant][500], fontSize: size * 0.4 }], children: initials })) : (_jsx(Icon, { name: "person-filled", size: size - 8, color: colors[variant][50] })) }));
 });

package/src/components/FilterChooser.js

@@ -1,12 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useRef } from "react";
-import { FlatList, Pressable, StyleSheet, Text, View } from "react-native";
+import { FlatList, Pressable, StyleSheet, View } from "react-native";
 import { colors } from "../constants/design";
-import { typography } from "../constants/typography";
 import { useDisclosure } from "../hooks/useDisclosure";
 import { Box } from "./Box";
 import { Icon } from "./Icon";
 import { LakeButton } from "./LakeButton";
+import { LakeText } from "./LakeText";
 import { Popover } from "./Popover";
 import { Space } from "./Space";
 const styles = StyleSheet.create({
@@ -31,22 +31,17 @@ const styles = StyleSheet.create({
         backgroundColor: colors.gray[50],
     },
     availableFiltersTitle: {
-        ...typography.bodyLarge,
-        color: colors.current[500],
         paddingHorizontal: 24,
     },
-    filterName: {
-        ...typography.bodySmall,
-    },
 });
 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(Text, { 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: [_jsx(LakeText, { style: styles.availableFiltersTitle, children: title }), _jsx(Space, { height: 8 }), _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);
                                         close();
-                                    }, children: [_jsx(Text, { style: [styles.filterName, isSet && styles.selected], children: item.label }), isSet && _jsx(Icon, { color: colors.positive[500], name: "checkmark-filled", size: 14 })] }));
+                                    }, children: [_jsx(LakeText, { variant: "smallRegular", style: isSet && styles.selected, children: item.label }), isSet && _jsx(Icon, { color: colors.positive[500], name: "checkmark-filled", size: 14 })] }));
                             } })] }) })] }));
 }

package/src/components/FixedListView.js

@@ -275,12 +275,19 @@ const styles = StyleSheet.create({
         borderBottomRightRadius: radii[4],
     },
     emptyListContainer: {
-        flexGrow: 1,
+        position: "absolute",
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        backgroundColor: backgroundColor.default,
+    },
+    emptyListContentContainer: {
         flexDirection: "column",
         alignItems: "center",
         justifyContent: "center",
         padding: spacings[48],
-        backgroundColor: backgroundColor.default,
+        minHeight: "100%",
     },
     emptyList: {
         flexDirection: "column",
@@ -721,7 +728,7 @@ export const FixedListView = ({ data: originalData, mode = "tile", keyExtractor,
         setHasHorizontalScroll(centerColumnsWidth > width);
     }, [centerColumnsWidth]);
     const isLoading = isNotNullish(loading) && loading.isLoading;
-    return (_jsxs(View, { style: styles.root, children: [_jsx(View, { ref: startFocusAnchorRef, tabIndex: 0 }), data.length === 0 && isNotNullish(renderEmptyList) && !isLoading ? (_jsx(View, { style: styles.emptyListContainer, children: renderEmptyList() })) : (_jsxs(ScrollView, { onKeyDown: onKeyDown, onLayout: onLayout, onScroll: onScroll, scrollEventThrottle: 32, style: [styles.container, mode === "tile" && styles.containerTile], contentContainerStyle: [
+    return (_jsxs(View, { style: styles.root, children: [_jsx(View, { ref: startFocusAnchorRef, tabIndex: 0 }), _jsxs(ScrollView, { onKeyDown: onKeyDown, onLayout: onLayout, onScroll: onScroll, scrollEventThrottle: 32, style: [styles.container, mode === "tile" && styles.containerTile], contentContainerStyle: [
                     styles.contentContainer,
                     {
                         height: totalHeight +
@@ -804,7 +811,7 @@ export const FixedListView = ({ data: originalData, mode = "tile", keyExtractor,
                                         ], children: [_jsx(View, { style: [
                                                     styles.stickyColumnEndOverflow,
                                                     { width: horizontalPadding, backgroundColor: headerBackgroundColor },
-                                                ] }), _jsx(HeaderSegment, { columns: stickedToEndColumns, extraInfo: extraInfo, viewId: viewId, width: stickedToEndColumnsWidth }), _jsx(View, { style: [styles.topGradient, isScrolled && styles.visibleTopGradient] })] }), _jsx(View, { style: { height: rowsHeight }, children: endRows })] })) : null] })] })), _jsx(View, { ref: endFocusAnchorRef, tabIndex: 0 })] }));
+                                                ] }), _jsx(HeaderSegment, { columns: stickedToEndColumns, extraInfo: extraInfo, viewId: viewId, width: stickedToEndColumnsWidth }), _jsx(View, { style: [styles.topGradient, isScrolled && styles.visibleTopGradient] })] }), _jsx(View, { style: { height: rowsHeight }, children: endRows })] })) : null] })] }), data.length === 0 && isNotNullish(renderEmptyList) && !isLoading ? (_jsx(ScrollView, { style: styles.emptyListContainer, contentContainerStyle: styles.emptyListContentContainer, children: renderEmptyList() })) : null, _jsx(View, { ref: endFocusAnchorRef, tabIndex: 0 })] }));
 };
 export const FixedListViewPlaceholder = ({ count, rowHeight, rowVerticalSpacing, groupHeaderHeight, headerHeight, paddingHorizontal = HORIZONTAL_SAFE_AREA, }) => {
     const totalRowHeight = rowHeight + rowVerticalSpacing;

package/src/components/InputError.js

@@ -1,16 +1,15 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { StyleSheet, Text } from "react-native";
-import { colors } from "../constants/colors";
-import { typography } from "../constants/typography";
+import { StyleSheet } from "react-native";
+import { colors, texts } from "../constants/design";
+import { LakeText } from "./LakeText";
 import { Space } from "./Space";
 const styles = StyleSheet.create({
     base: {
-        ...typography.bodySmall,
-        color: colors.red[100],
-        lineHeight: typography.lineHeights.input,
+        color: colors.negative[500],
+        lineHeight: texts.h1.lineHeight,
         minHeight: 32,
         paddingHorizontal: 3, // borderRadius / 2
         paddingVertical: 4,
     },
 });
-export const InputError = ({ message = "", style }) => message !== "" ? _jsx(Text, { style: [styles.base, style], children: message }) : _jsx(Space, { height: 32 });
+export const InputError = ({ message = "", style }) => message !== "" ? (_jsx(LakeText, { variant: "smallRegular", style: [styles.base, style], children: message })) : (_jsx(Space, { height: 32 }));

package/src/components/LakeCombobox.js

@@ -2,12 +2,12 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, useCallback, useId, useImperativeHandle, useRef, useState, } from "react";
 import { FlatList, Pressable, StyleSheet, Text, View, } from "react-native";
 import { backgroundColor, colors, spacings } from "../constants/design";
-import { typography } from "../constants/typography";
 import { useMergeRefs } from "../hooks/useMergeRefs";
 import { getFocusableElements } from "../utils/a11y";
 import { isNotEmpty } from "../utils/nullish";
 import { Box } from "./Box";
 import { Icon } from "./Icon";
+import { LakeText } from "./LakeText";
 import { LakeTextInput } from "./LakeTextInput";
 import { LoadingView } from "./LoadingView";
 import { Popover } from "./Popover";
@@ -41,7 +41,6 @@ const styles = StyleSheet.create({
         backgroundColor: colors.gray[100],
     },
     itemText: {
-        ...typography.bodyLarge,
         userSelect: "none",
     },
     loader: {
@@ -171,7 +170,7 @@ const LakeComboboxWithRef = ({ inputRef, value, items, itemHeight = DEFAULT_ELEM
                                                         setIsFetchingAdditionalInfo(false);
                                                         dismiss();
                                                     });
-                                                }, children: isReactText(rendered) ? (_jsx(Text, { numberOfLines: 1, style: styles.itemText, children: rendered })) : (rendered) }));
+                                                }, children: isReactText(rendered) ? (_jsx(LakeText, { numberOfLines: 1, style: styles.itemText, children: rendered })) : (rendered) }));
                                         } })), ListFooterComponent, isFetchingAdditionalInfo ? (_jsxs(View, { style: styles.loaderAdditional, children: [_jsx(View, { style: styles.loaderAdditionalUnderlay }), _jsx(LoadingView, {})] })) : null] })),
                         }),
                     }) }) })] }));

package/src/components/LakeTagInput.d.ts

@@ -7,6 +7,7 @@ export type LakeTagInputProps = Merge<TextInputProps, {
     disabled?: boolean;
     valid?: boolean;
     hideErrors?: boolean;
+    validateOnBlur?: boolean;
     help?: string;
     validator?: (value: string) => boolean;
     values: string[];
@@ -211,6 +212,7 @@ export declare const LakeTagInput: import("react").ForwardRefExoticComponent<{
     disabled?: boolean | undefined;
     valid?: boolean | undefined;
     hideErrors?: boolean | undefined;
+    validateOnBlur?: boolean | undefined;
     help?: string | undefined;
     validator?: ((value: string) => boolean) | undefined;
     placeholder?: string | undefined;

package/src/components/LakeTagInput.js

@@ -77,7 +77,7 @@ const styles = StyleSheet.create({
     },
 });
 const SEPARATORS_REGEX = /,| /;
-export const LakeTagInput = forwardRef(({ validator = () => true, onFocus: originalOnFocus, onBlur: originalOnBlur, values, onValuesChanged, readOnly = false, disabled = false, valid = false, hideErrors = false, placeholder, help, error, }, forwardRef) => {
+export const LakeTagInput = forwardRef(({ validator = () => true, onFocus: originalOnFocus, onBlur: originalOnBlur, validateOnBlur = true, values, onValuesChanged, readOnly = false, disabled = false, valid = false, hideErrors = false, placeholder, help, error, }, forwardRef) => {
     const inputRef = useRef(null);
     const containerRef = useRef(null);
     const [isFocused, setIsFocused] = useState(false);
@@ -97,6 +97,9 @@ export const LakeTagInput = forwardRef(({ validator = () => true, onFocus: origi
         }
     }, [pushNewValues]);
     const onTextInputKeyPress = useCallback(({ nativeEvent }) => {
+        if (disabled || readOnly) {
+            return;
+        }
         match({ key: nativeEvent.key, input: inputRef.current })
             .with({ key: "Backspace", input: P.instanceOf(HTMLInputElement) }, ({ input }) => {
             if (isNullishOrEmpty(input.value)) {
@@ -108,7 +111,7 @@ export const LakeTagInput = forwardRef(({ validator = () => true, onFocus: origi
                 pushNewValues([input.value]);
             }
         });
-    }, [onValuesChanged, pushNewValues, values]);
+    }, [onValuesChanged, pushNewValues, values, disabled, readOnly]);
     const autoFocus = useCallback(() => {
         inputRef.current?.focus();
     }, []);
@@ -117,9 +120,15 @@ export const LakeTagInput = forwardRef(({ validator = () => true, onFocus: origi
         originalOnFocus?.(event);
     }, [originalOnFocus]);
     const onBlur = useCallback((event) => {
+        const input = inputRef.current;
+        if (input instanceof HTMLInputElement &&
+            isNotNullishOrEmpty(input.value) &&
+            validateOnBlur) {
+            pushNewValues([input.value]);
+        }
         setIsFocused(false);
         originalOnBlur?.(event);
-    }, [originalOnBlur]);
+    }, [pushNewValues, originalOnBlur, validateOnBlur]);
     const mergedRef = useMergeRefs(inputRef, forwardRef);
     const hasError = isNotNullishOrEmpty(error);
     return (_jsxs(View, { children: [_jsxs(Pressable, { style: [

package/src/components/LoadingView.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { ActivityIndicator, StyleSheet, View } from "react-native";
-import { colors } from "../constants/colors";
+import { colors } from "../constants/design";
 const styles = StyleSheet.create({
     base: {
         alignItems: "center",
@@ -21,4 +21,4 @@ const styles = StyleSheet.create({
     },
 });
 const isDev = process.env.NODE_ENV === "development";
-export const LoadingView = forwardRef(({ color = colors.gray[100], delay = isDev ? 0 : 1000, style }, forwardedRef) => (_jsx(View, { ref: forwardedRef, style: [styles.base, style], children: _jsx(ActivityIndicator, { size: "small", color: color, style: [styles.indicator, delay > 0 && { animationDelay: delay.toString() + "ms" }] }) })));
+export const LoadingView = forwardRef(({ color = colors.gray[400], delay = isDev ? 0 : 1000, style }, forwardedRef) => (_jsx(View, { ref: forwardedRef, style: [styles.base, style], children: _jsx(ActivityIndicator, { size: "small", color: color, style: [styles.indicator, delay > 0 && { animationDelay: delay.toString() + "ms" }] }) })));

package/src/components/SwanLogo.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { StyleSheet } from "react-native";
-import { colors } from "../constants/colors";
+import { invariantColors } from "../constants/design";
 import { Path, Svg } from "./Svg";
 const styles = StyleSheet.create({
     base: {
@@ -8,4 +8,4 @@ const styles = StyleSheet.create({
         width: 45,
     },
 });
-export const SwanLogo = ({ color = colors.gray[100], style }) => (_jsxs(Svg, { viewBox: "0 0 45 10", style: [styles.base, style], children: [_jsx("title", { children: "Swan" }), _jsx(Path, { d: "M41.01 0c2.2 0 3.66 1.6 3.66 3.82v5.95H42.9V3.9c0-1.28-1-2.19-2.23-2.19a2.33 2.33 0 00-2.37 2.4v5.65h-1.83V.27h1.83v.92A3.4 3.4 0 0141 0zM30.77 9.73H29.2c-2.65 0-4.53-2.27-4.53-4.86A4.81 4.81 0 0129.44 0c2.92 0 4.93 1.74 4.93 4.45v5.32h-1.71V4.45c0-1.72-1.2-2.76-3.22-2.76a3.11 3.11 0 00-3.06 3.18c0 1.72 1.2 3.17 2.82 3.17h1.57v1.7zm-14.37-7l-2.25 7.04h-2.1L9.07.27h1.96l2.11 7.16L15.45.27h1.9l2.3 7.16L21.76.27h1.96l-3 9.5h-2.1zM4.14 10C1.94 10 .54 8.82.36 6.93L.33 6.7h1.79l.02.18c.15.98.84 1.48 2.07 1.48s1.93-.54 1.93-1.38c0-.82-.5-1.1-2.15-1.42l-.43-.09C1.54 5.05.64 4.41.64 2.76.64 1.1 2.1 0 4.18 0 6.06 0 7.5 1.12 7.65 2.83l.02.23H5.9l-.02-.19c-.12-.79-.72-1.25-1.79-1.25-1.03 0-1.68.47-1.68 1.14 0 .68.47.92 1.99 1.2l.6.12c2 .4 2.93 1.1 2.93 2.83C7.93 8.76 6.4 10 4.14 10z", fill: color })] }));
+export const SwanLogo = ({ color = invariantColors.gray, style }) => (_jsxs(Svg, { viewBox: "0 0 45 10", style: [styles.base, style], children: [_jsx("title", { children: "Swan" }), _jsx(Path, { d: "M41.01 0c2.2 0 3.66 1.6 3.66 3.82v5.95H42.9V3.9c0-1.28-1-2.19-2.23-2.19a2.33 2.33 0 00-2.37 2.4v5.65h-1.83V.27h1.83v.92A3.4 3.4 0 0141 0zM30.77 9.73H29.2c-2.65 0-4.53-2.27-4.53-4.86A4.81 4.81 0 0129.44 0c2.92 0 4.93 1.74 4.93 4.45v5.32h-1.71V4.45c0-1.72-1.2-2.76-3.22-2.76a3.11 3.11 0 00-3.06 3.18c0 1.72 1.2 3.17 2.82 3.17h1.57v1.7zm-14.37-7l-2.25 7.04h-2.1L9.07.27h1.96l2.11 7.16L15.45.27h1.9l2.3 7.16L21.76.27h1.96l-3 9.5h-2.1zM4.14 10C1.94 10 .54 8.82.36 6.93L.33 6.7h1.79l.02.18c.15.98.84 1.48 2.07 1.48s1.93-.54 1.93-1.38c0-.82-.5-1.1-2.15-1.42l-.43-.09C1.54 5.05.64 4.41.64 2.76.64 1.1 2.1 0 4.18 0 6.06 0 7.5 1.12 7.65 2.83l.02.23H5.9l-.02-.19c-.12-.79-.72-1.25-1.79-1.25-1.03 0-1.68.47-1.68 1.14 0 .68.47.92 1.99 1.2l.6.12c2 .4 2.93 1.1 2.93 2.83C7.93 8.76 6.4 10 4.14 10z", fill: color })] }));

package/src/constants/design.d.ts

@@ -36,6 +36,7 @@ export declare const invariantColors: {
     white: string;
     transparent: string;
     gray: string;
+    defaultAccentColor: string;
 };
 export type ColorVariants = keyof typeof colors;
 export type BackgroundColorVariant = {

package/src/constants/design.js

@@ -230,6 +230,7 @@ export const invariantColors = {
     white: "#fff",
     transparent: "transparent",
     gray: "#16141a",
+    defaultAccentColor: "#6240b5",
 };
 export const backgroundColor = {
     default: "var(--color-background-default)",

package/src/hooks/useUrqlMutation.d.ts

@@ -1,3 +1,3 @@
 import { AsyncData, Future, Result } from "@swan-io/boxed";
-import { AnyVariables, CombinedError, TypedDocumentNode } from "urql";
-export declare const useUrqlMutation: <Data, Variables extends AnyVariables>(query: TypedDocumentNode<Data, Variables>) => readonly [AsyncData<Result<Data, Error>>, (input: Variables) => Future<Result<Data, Error | CombinedError>>];
+import { AnyVariables, CombinedError, OperationContext, TypedDocumentNode } from "urql";
+export declare const useUrqlMutation: <Data, Variables extends AnyVariables>(query: TypedDocumentNode<Data, Variables>) => readonly [AsyncData<Result<Data, Error>>, (input: Variables, context?: Partial<OperationContext>) => Future<Result<Data, Error | CombinedError>>];

package/src/hooks/useUrqlMutation.js

@@ -1,6 +1,6 @@
 import { AsyncData, Future, Result } from "@swan-io/boxed";
 import { useCallback, useMemo } from "react";
-import { CombinedError, useMutation } from "urql";
+import { CombinedError, useMutation, } from "urql";
 import { isNotNullish, isNullish } from "../utils/nullish";
 const toResult = ({ data, error, }) => {
     if (isNotNullish(error)) {
@@ -23,7 +23,7 @@ export const useUrqlMutation = (query) => {
             }
             return AsyncData.Done(toResult({ data, error }));
         }, [fetching, data, error]),
-        useCallback((input) => Future.fromPromise(execute(input))
+        useCallback((input, context) => Future.fromPromise(execute(input, context))
             .mapError(error => error) // Only used to cast error
             .mapOkToResult(toResult), [execute]),
     ];