@swan-io/lake 2.6.1 → 2.7.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@swan-io/lake",
-  "version": "2.6.1",
+  "version": "2.7.1",
   "engines": {
     "node": ">=18.0.0",
     "yarn": "^1.22.0"
@@ -27,8 +27,8 @@
   "license": "MIT",
   "dependencies": {
     "@popperjs/core": "^2.11.8",
-    "@react-three/drei": "^9.77.10",
-    "@react-three/fiber": "^8.13.4",
+    "@react-three/drei": "^9.79.3",
+    "@react-three/fiber": "^8.13.5",
     "@swan-io/boxed": "^1.0.2",
     "@swan-io/chicane": "^1.4.1",
     "dayjs": "^1.11.9",
@@ -37,23 +37,23 @@
     "react": "^18.2.0",
     "react-atomic-state": "^1.2.7",
     "react-dom": "^18.2.0",
-    "react-native-web": "^0.19.6",
+    "react-native-web": "^0.19.7",
     "react-popper": "^2.3.0",
-    "react-ux-form": "^1.3.0",
+    "react-ux-form": "^1.4.0",
     "rifm": "^0.12.1",
     "three": "^0.154.0",
     "ts-dedent": "^2.2.0",
-    "ts-pattern": "^5.0.1",
+    "ts-pattern": "^5.0.4",
     "urql": "^4.0.4",
     "uuid": "^9.0.0"
   },
   "devDependencies": {
-    "@types/react": "^18.2.14",
-    "@types/react-dom": "^18.2.6",
+    "@types/react": "^18.2.15",
+    "@types/react-dom": "^18.2.7",
     "@types/react-native": "^0.72.2",
-    "@types/three": "^0.152.1",
+    "@types/three": "^0.154.0",
     "@types/uuid": "^9.0.2",
     "jsdom": "^22.1.0",
-    "type-fest": "^3.12.0"
+    "type-fest": "^4.0.0"
   }
 }

package/src/components/LakeCombobox.js

@@ -157,7 +157,7 @@ const LakeComboboxWithRef = ({ inputRef, value, items, itemHeight = DEFAULT_ELEM
                                                 ], onPress: () => {
                                                     window.clearTimeout(blurTimeoutId.current);
                                                     setIsFetchingAdditionalInfo(true);
-                                                    Promise.resolve(onSelectItem(item)).finally(() => {
+                                                    void Promise.resolve(onSelectItem(item)).finally(() => {
                                                         setIsFetchingAdditionalInfo(false);
                                                         close();
                                                     });

package/src/components/LakeSearchField.d.ts

@@ -1,9 +1,11 @@
+import { ReactNode } from "react";
 type Props = {
     initialValue: string;
     placeholder: string;
     onChangeText: (text: string) => void;
     debounceDuration?: number;
     maxWidth?: number;
+    renderEnd?: () => ReactNode;
 };
-export declare const LakeSearchField: ({ initialValue, placeholder, onChangeText, debounceDuration, maxWidth, }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const LakeSearchField: ({ initialValue, placeholder, onChangeText, debounceDuration, maxWidth, renderEnd, }: Props) => import("react/jsx-runtime").JSX.Element;
 export {};

package/src/components/LakeSearchField.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useCallback, useRef, useState } from "react";
 import { Pressable, StyleSheet, View } from "react-native";
-import { animations, backgroundColor, colors, radii } from "../constants/design";
+import { animations, backgroundColor, colors, radii, spacings } from "../constants/design";
 import { useBoolean } from "../hooks/useBoolean";
 import { useDebounce } from "../hooks/useDebounce";
 import { LakeButton } from "./LakeButton";
@@ -10,44 +10,24 @@ import { ResponsiveContainer } from "./ResponsiveContainer";
 import { Line, Svg } from "./Svg";
 import { TransitionView } from "./TransitionView";
 const styles = StyleSheet.create({
-    root: {
-        flexGrow: 1,
-        flexShrink: 1,
+    input: {
+        transition: "300ms ease-in-out border-color",
         // ResponsiveContainer uses a 200 breaking,
         // we give the opportunity to the component to grow 2px more
         // to trigger the change
         maxWidth: 202,
         minWidth: 38,
     },
-    container: {
-        width: "100%",
-        flexGrow: 1,
-        flexShrink: 0,
-        alignSelf: "flex-end",
-    },
-    input: {
-        paddingRight: 50,
-        minWidth: 200,
-        // fixes a responsiveness bug where the default input width is too large
-        width: 1,
-        flexGrow: 1,
-        transition: "300ms ease-in-out border-color",
-    },
     focus: {
         outlineStyle: "none",
         borderColor: colors.current.primary,
     },
     clearButton: {
-        position: "absolute",
-        right: 0,
-        top: "50%",
-        transform: "translateY(-50%)",
-        padding: 16,
+        marginRight: spacings[8],
     },
     clear: {
         width: 8,
         height: 8,
-        display: "flex",
     },
     smallButtonContainer: {
         flexDirection: "row",
@@ -68,30 +48,30 @@ const styles = StyleSheet.create({
         borderRadius: radii[6],
     },
 });
-const CollapsibleSeachField = ({ inputRef, placeholder, initialValue, onChange, setFocused, hasFocus, clear, currentValue, }) => {
-    return (_jsxs(View, { children: [_jsx(LakeButton, { mode: "secondary", size: "small", ariaLabel: placeholder, icon: "search-filled", onPress: () => {
+const CollapsibleSeachField = ({ inputRef, placeholder, initialValue, onChange, setFocused, hasFocus, clear, currentValue, renderEnd, }) => {
+    return (_jsxs(View, { style: styles.smallButtonContainer, children: [_jsx(LakeButton, { mode: "secondary", size: "small", ariaLabel: placeholder, icon: "search-filled", onPress: () => {
                     setFocused.on();
-                }, pill: currentValue !== "" }), _jsx(TransitionView, { style: styles.openSearchFieldContainer, ...animations.fadeAndSlideInFromRight, children: hasFocus ? (_jsx(View, { style: styles.openSearchField, children: _jsx(ExpandedSearchField, { inputRef: inputRef, placeholder: placeholder, initialValue: initialValue, onChange: onChange, setFocused: setFocused, hasFocus: hasFocus, clear: clear, currentValue: currentValue }) })) : null })] }));
+                }, pill: currentValue !== "" }), _jsx(TransitionView, { style: styles.openSearchFieldContainer, ...animations.fadeAndSlideInFromRight, children: hasFocus ? (_jsx(View, { style: styles.openSearchField, children: _jsx(ExpandedSearchField, { inputRef: inputRef, placeholder: placeholder, initialValue: initialValue, onChange: onChange, setFocused: setFocused, hasFocus: hasFocus, clear: clear, currentValue: currentValue, renderEnd: renderEnd }) })) : null })] }));
 };
-const ExpandedSearchField = ({ inputRef, placeholder, initialValue, onChange, setFocused, hasFocus, clear, }) => {
+const ExpandedSearchField = ({ inputRef, placeholder, initialValue, onChange, setFocused, hasFocus, clear, renderEnd, }) => {
     const timeoutRef = useRef(null);
-    return (_jsxs(View, { style: styles.container, children: [_jsx(LakeTextInput, { ref: inputRef, autoFocus: hasFocus, icon: "search-filled", placeholder: placeholder, defaultValue: initialValue, inputMode: "search", onChangeText: onChange, hideErrors: true, onFocus: () => {
-                    if (timeoutRef.current != null) {
-                        clearTimeout(timeoutRef.current);
-                    }
-                    setFocused.on();
-                }, onBlur: () => {
-                    timeoutRef.current = window.setTimeout(() => {
-                        setFocused.off();
-                    }, 300);
-                }, style: [styles.input, hasFocus ? styles.focus : null] }), _jsx(Pressable, { onPress: () => {
-                    if (timeoutRef.current != null) {
-                        clearTimeout(timeoutRef.current);
-                    }
-                    clear();
-                }, style: styles.clearButton, children: _jsx(Svg, { viewBox: "0 0 16 16", style: styles.clear, children: _jsxs(_Fragment, { children: [_jsx(Line, { x1: "0", x2: "16", y1: "0", y2: "16", strokeLinecap: "round", stroke: colors.gray[500], strokeWidth: 2 }), _jsx(Line, { x1: "0", x2: "16", y1: "16", y2: "0", strokeLinecap: "round", stroke: colors.gray[500], strokeWidth: 2 })] }) }) })] }));
+    return (_jsx(LakeTextInput, { ref: inputRef, autoFocus: hasFocus, icon: "search-filled", placeholder: placeholder, defaultValue: initialValue, inputMode: "search", onChangeText: onChange, hideErrors: true, renderEnd: () => (_jsxs(_Fragment, { children: [_jsx(Pressable, { onPress: () => {
+                        if (timeoutRef.current != null) {
+                            clearTimeout(timeoutRef.current);
+                        }
+                        clear();
+                    }, style: styles.clearButton, children: _jsx(Svg, { viewBox: "0 0 16 16", style: styles.clear, children: _jsxs(_Fragment, { children: [_jsx(Line, { x1: "0", x2: "16", y1: "0", y2: "16", strokeLinecap: "round", stroke: colors.gray[500], strokeWidth: 2 }), _jsx(Line, { x1: "0", x2: "16", y1: "16", y2: "0", strokeLinecap: "round", stroke: colors.gray[500], strokeWidth: 2 })] }) }) }), renderEnd?.()] })), onFocus: () => {
+            if (timeoutRef.current != null) {
+                clearTimeout(timeoutRef.current);
+            }
+            setFocused.on();
+        }, onBlur: () => {
+            timeoutRef.current = window.setTimeout(() => {
+                setFocused.off();
+            }, 300);
+        }, style: [styles.input, hasFocus ? styles.focus : null] }));
 };
-export const LakeSearchField = ({ initialValue, placeholder, onChangeText, debounceDuration = 500, maxWidth, }) => {
+export const LakeSearchField = ({ initialValue, placeholder, onChangeText, debounceDuration = 500, maxWidth, renderEnd, }) => {
     const [hasFocus, setFocused] = useBoolean(false);
     const inputRef = useRef(null);
     const [currentValue, setCurrentValue] = useState(initialValue);
@@ -107,5 +87,19 @@ export const LakeSearchField = ({ initialValue, placeholder, onChangeText, debou
             setCurrentValue("");
         }
     }, [onChangeText]);
-    return (_jsx(ResponsiveContainer, { breakpoint: 200, style: [styles.root, maxWidth != null && { maxWidth }], children: ({ large }) => large ? (_jsx(ExpandedSearchField, { inputRef: inputRef, placeholder: placeholder, initialValue: initialValue, onChange: onChange, setFocused: setFocused, hasFocus: hasFocus, clear: clear, currentValue: currentValue })) : (_jsx(View, { style: styles.smallButtonContainer, children: _jsx(CollapsibleSeachField, { inputRef: inputRef, placeholder: placeholder, initialValue: initialValue, onChange: onChange, setFocused: setFocused, hasFocus: hasFocus, clear: clear, currentValue: currentValue }) })) }));
+    const props = {
+        inputRef,
+        placeholder,
+        initialValue,
+        onChange,
+        setFocused,
+        hasFocus,
+        clear,
+        currentValue,
+        renderEnd,
+    };
+    return (_jsx(ResponsiveContainer, { breakpoint: 200, style: maxWidth != null && { maxWidth }, children: ({ large }) => {
+            const Component = large ? ExpandedSearchField : CollapsibleSeachField;
+            return _jsx(Component, { ...props });
+        } }));
 };

package/src/components/LakeTextInput.d.ts

@@ -23,6 +23,7 @@ export type LakeTextInputProps = Except<TextInputProps, "editable" | "keyboardTy
     onChange?: ChangeEventHandler<HTMLInputElement>;
     maxCharCount?: number;
     help?: string;
+    renderEnd?: () => ReactNode;
 };
 export declare const LakeTextInput: import("react").ForwardRefExoticComponent<{
     allowFontScaling?: boolean | undefined;
@@ -234,4 +235,5 @@ export declare const LakeTextInput: import("react").ForwardRefExoticComponent<{
     onChange?: ChangeEventHandler<HTMLInputElement> | undefined;
     maxCharCount?: number | undefined;
     help?: string | undefined;
+    renderEnd?: (() => ReactNode) | undefined;
 } & import("react").RefAttributes<TextInput | null>>;

package/src/components/LakeTextInput.js

@@ -19,7 +19,6 @@ const styles = StyleSheet.create({
     },
     container: {
         flexGrow: 1,
-        flexShrink: 1,
         flexDirection: "row",
         alignItems: "stretch",
     },
@@ -27,21 +26,25 @@ const styles = StyleSheet.create({
         flexGrow: 1,
         flexShrink: 1,
         flexDirection: "row",
-        alignItems: "stretch",
+        width: "100%",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        borderRadius: radii[6],
+        backgroundColor: backgroundColor.accented,
+        borderColor: colors.gray[100],
+        borderWidth: 1,
+        paddingHorizontal: spacings[8],
     },
     input: {
         ...texts.regular,
-        paddingHorizontal: spacings[16],
+        flexGrow: 1,
         outlineStyle: "none",
-        height: 40,
-        borderColor: colors.gray[100],
         placeholderTextColor: colors.gray[400],
-        borderWidth: 1,
-        borderRadius: radii[6],
-        backgroundColor: backgroundColor.accented,
         color: colors.gray[900],
-        width: "100%",
-        flexShrink: 1,
+        paddingHorizontal: spacings[8],
+        height: 40,
+        minWidth: 0,
     },
     multilineInput: {
         height: "auto",
@@ -65,32 +68,29 @@ const styles = StyleSheet.create({
         borderColor: colors.gray[50],
         color: colors.gray[900],
     },
-    withIcon: {
-        paddingLeft: spacings[48],
-    },
     error: {
         borderColor: colors.negative[400],
-        paddingRight: spacings[48],
     },
     valid: {
         borderColor: colors.positive[500],
-        paddingRight: spacings[48],
     },
     readOnlyError: {
         borderColor: TRANSPARENT,
         paddingRight: spacings[32],
     },
     endIcon: {
-        position: "absolute",
-        right: spacings[16],
-        top: "50%",
-        transform: "translateY(-50%)",
+        marginHorizontal: spacings[8],
+    },
+    endComponents: {
+        flexDirection: "row",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        marginLeft: spacings[8],
     },
     icon: {
-        position: "absolute",
-        left: spacings[16],
-        top: "50%",
-        transform: "translateY(-50%)",
+        marginLeft: spacings[8],
+        margiRight: spacings[4],
     },
     readOnlyEndIcon: {
         right: 0,
@@ -122,9 +122,10 @@ const styles = StyleSheet.create({
     },
 });
 export const LakeTextInput = forwardRef(({ ariaExpanded, ariaControls, error, disabled = false, validating = false, valid = false, readOnly = false, icon, children, unit, color = "gray", inputMode = "text", hideErrors = false, onChange, pattern, style: stylesFromProps, onFocus: originalOnFocus, onBlur: originalOnBlur, value, defaultValue, multiline = false, 
-//maxCharCount is different from maxLength(props inherited of TextInput), maxLength truncates the text in the limitation asked,
+//maxCharCount is different from maxLength(props inherited of TextInput)
+//maxLength truncates the text in the limitation asked,
 //maxCharCount doesn't have limitation but displays a counter of characters
-maxCharCount, help, ...props }, forwardRef) => {
+maxCharCount, help, renderEnd, ...props }, forwardRef) => {
     const inputRef = useRef(null);
     const [isHovered, setIsHovered] = useState(false);
     const [isFocused, setIsFocused] = useState(false);
@@ -145,19 +146,23 @@ maxCharCount, help, ...props }, forwardRef) => {
     const isInteractive = !disabled && !readOnly;
     const hasError = isNotNullishOrEmpty(error);
     const charCount = isNullish(value) ? 0 : value.length;
-    return (_jsxs(View, { style: commonStyles.fill, children: [_jsxs(View, { style: styles.root, "aria-errormessage": error, children: [_jsxs(View, { style: styles.container, children: [_jsxs(View, { style: styles.contents, children: [_jsx(TextInput, { "aria-expanded": ariaExpanded, "aria-controls": ariaControls, inputMode: inputMode, ref: mergedRef, ...props, defaultValue: defaultValue, value: isNullish(defaultValue) ? value ?? "" : value, onFocus: onFocus, onBlur: onBlur, readOnly: !isInteractive, onChange: onChange, multiline: multiline, style: [
+    return (_jsxs(View, { style: commonStyles.fill, children: [_jsxs(View, { style: styles.root, "aria-errormessage": error, children: [_jsxs(View, { style: styles.container, children: [_jsxs(View, { style: [
+                                    styles.contents,
+                                    isHovered && isInteractive && styles.hovered,
+                                    isFocused && { borderColor: colors[color][500] },
+                                    readOnly && hasError && styles.readOnlyError,
+                                    disabled && styles.disabled,
+                                    readOnly && styles.readOnly,
+                                    isFocused && styles.focused,
+                                    isNotNullish(unit) && styles.inputWithUnit,
+                                    hasError && styles.error,
+                                    valid && styles.valid,
+                                    stylesFromProps,
+                                ], children: [isNotNullish(icon) && (_jsx(Icon, { name: icon, size: 20, color: colors.current.primary, style: styles.icon })), _jsx(TextInput, { "aria-expanded": ariaExpanded, "aria-controls": ariaControls, inputMode: inputMode, ref: mergedRef, ...props, defaultValue: defaultValue, value: isNullish(defaultValue) ? value ?? "" : value, onFocus: onFocus, onBlur: onBlur, readOnly: !isInteractive, onChange: onChange, multiline: multiline, style: [
                                             styles.input,
                                             multiline && styles.multilineInput,
-                                            hasError && styles.error,
-                                            valid && styles.valid,
-                                            isNotNullish(icon) && styles.withIcon,
                                             readOnly && hasError && styles.readOnlyError,
                                             disabled && styles.disabled,
                                             readOnly && styles.readOnly,
-                                            isHovered && isInteractive && styles.hovered,
-                                            isNotNullish(unit) && styles.inputWithUnit,
-                                            isFocused && styles.focused,
-                                            isFocused && { borderColor: colors[color][500] },
-                                            stylesFromProps,
-                                        ] }), validating && (_jsx(ActivityIndicator, { size: "small", style: styles.endIcon, color: colors.current[500] })), !validating && hasError && (_jsx(Icon, { name: "warning-regular", size: 20, color: colors.negative[400], style: [styles.endIcon, readOnly && styles.readOnlyEndIcon] })), !validating && !hasError && valid && (_jsx(Icon, { name: "checkmark-filled", size: 20, color: colors.positive[400], style: [styles.endIcon, readOnly && styles.readOnlyEndIcon] })), isNotNullish(icon) && (_jsx(Icon, { name: icon, size: 20, color: colors.current.primary, style: styles.icon }))] }), isNotNullish(unit) && (_jsx(LakeText, { color: colors.gray[900], style: [styles.unit, (disabled || readOnly) && styles.unitDisabled], children: unit }))] }), children] }), !hideErrors && (_jsxs(Box, { direction: "row", style: styles.errorContainer, children: [isNotNullish(help) ? (_jsx(LakeText, { variant: "smallRegular", color: isNotNullish(error) ? colors.negative[500] : colors.gray[500], children: help })) : (_jsx(LakeText, { variant: "smallRegular", color: colors.negative[500], children: error ?? " " })), isNotNullish(maxCharCount) && (_jsxs(_Fragment, { children: [_jsx(Fill, { minWidth: 4 }), _jsxs(LakeText, { variant: "smallRegular", color: charCount > maxCharCount ? colors.negative[500] : colors.gray[400], style: styles.descriptionLimitation, children: [charCount, " / ", maxCharCount] })] }))] }))] }));
+                                        ] }), isNotNullish(renderEnd) && _jsx(View, { style: styles.endComponents, children: renderEnd() }), validating && (_jsx(ActivityIndicator, { size: "small", style: styles.endIcon, color: colors.current[500] })), !validating && hasError && (_jsx(Icon, { name: "warning-regular", size: 20, color: colors.negative[400], style: [styles.endIcon, readOnly && styles.readOnlyEndIcon] })), !validating && !hasError && valid && (_jsx(Icon, { name: "checkmark-filled", size: 20, color: colors.positive[400], style: [styles.endIcon, readOnly && styles.readOnlyEndIcon] }))] }), isNotNullish(unit) && (_jsx(LakeText, { color: colors.gray[900], style: [styles.unit, (disabled || readOnly) && styles.unitDisabled], children: unit }))] }), children] }), !hideErrors && (_jsxs(Box, { direction: "row", style: styles.errorContainer, children: [isNotNullish(error) ? (_jsx(LakeText, { variant: "smallRegular", color: colors.negative[500], children: error })) : (_jsx(LakeText, { variant: "smallRegular", color: colors.gray[500], children: help ?? " " })), isNotNullish(maxCharCount) && (_jsxs(_Fragment, { children: [_jsx(Fill, { minWidth: 4 }), _jsxs(LakeText, { variant: "smallRegular", color: charCount > maxCharCount ? colors.negative[500] : colors.gray[400], style: styles.descriptionLimitation, children: [charCount, " / ", maxCharCount] })] }))] }))] }));
 });

package/src/state/toasts.js

@@ -30,7 +30,7 @@ export const showToast = ({ variant, title, description, autoClose }) => {
         return uid;
     }
     // by default, only info and success toasts are auto-closing
-    const isAutoClosingToast = autoClose != null ? autoClose : variant === "info" || variant === "success";
+    const isAutoClosingToast = autoClose ?? (variant === "info" || variant === "success");
     const progress = isAutoClosingToast ? new Animated.Value(1) : undefined;
     const timeout = progress
         ? createControllableTimeout({