@swan-io/lake 2.7.6 → 2.7.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@swan-io/lake",
-  "version": "2.7.6",
+  "version": "2.7.8",
   "engines": {
     "node": ">=18.0.0",
     "yarn": "^1.22.0"
@@ -27,9 +27,9 @@
   "license": "MIT",
   "dependencies": {
     "@popperjs/core": "^2.11.8",
-    "@react-three/drei": "^9.79.3",
-    "@react-three/fiber": "^8.13.5",
-    "@swan-io/boxed": "^1.0.2",
+    "@react-three/drei": "^9.80.1",
+    "@react-three/fiber": "^8.13.6",
+    "@swan-io/boxed": "^1.1.0",
     "@swan-io/chicane": "^1.4.1",
     "dayjs": "^1.11.9",
     "polished": "^4.2.2",
@@ -39,21 +39,21 @@
     "react-dom": "^18.2.0",
     "react-native-web": "^0.19.7",
     "react-popper": "^2.3.0",
-    "react-ux-form": "^1.4.0",
+    "react-ux-form": "^1.5.0",
     "rifm": "^0.12.1",
-    "three": "^0.154.0",
+    "three": "^0.155.0",
     "ts-dedent": "^2.2.0",
-    "ts-pattern": "^5.0.4",
-    "urql": "^4.0.4",
+    "ts-pattern": "^5.0.5",
+    "urql": "^4.0.5",
     "uuid": "^9.0.0"
   },
   "devDependencies": {
-    "@types/react": "^18.2.15",
+    "@types/react": "^18.2.19",
     "@types/react-dom": "^18.2.7",
     "@types/react-native": "^0.72.2",
-    "@types/three": "^0.154.0",
+    "@types/three": "^0.155.0",
     "@types/uuid": "^9.0.2",
     "jsdom": "^22.1.0",
-    "type-fest": "^4.0.0"
+    "type-fest": "^4.2.0"
   }
 }

package/src/components/FixedListViewCells.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode, ComponentProps } from "react";
+import { ComponentProps, ReactNode } from "react";
 import { ColorVariants } from "../constants/design";
 import { TextVariant } from "./LakeText";
 import { LakeTooltip } from "./LakeTooltip";

package/src/components/FixedListViewCells.js

@@ -115,11 +115,12 @@ export const SimpleRegularTextCell = ({ variant = "regular", text, textAlign = "
 };
 export const CopyableRegularTextCell = ({ variant = "regular", text, textToCopy, copyWording, copiedWording, tooltip, }) => {
     const [visibleState, setVisibleState] = useState("copy");
+    const clipboardText = textToCopy ?? text;
     const onPress = useCallback((event) => {
         event.preventDefault();
-        Clipboard.setString(textToCopy ?? text);
+        Clipboard.setString(clipboardText);
         setVisibleState("copied");
-    }, [text]);
+    }, [clipboardText]);
     return (_jsxs(View, { style: styles.cell, children: [_jsx(LakeTooltip, { placement: "top", 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 })] }));
 };
 // TODO: handle `+` sign properly

package/src/components/LakeCombobox.js

@@ -3,14 +3,15 @@ import { forwardRef, useCallback, useId, useImperativeHandle, useRef, useState,
 import { FlatList, Pressable, StyleSheet, Text, View, } from "react-native";
 import { backgroundColor, colors, spacings } from "../constants/design";
 import { typography } from "../constants/typography";
-import { useDisclosure } from "../hooks/useDisclosure";
 import { useMergeRefs } from "../hooks/useMergeRefs";
 import { getFocusableElements } from "../utils/a11y";
+import { isNotEmpty } from "../utils/nullish";
 import { Box } from "./Box";
 import { Icon } from "./Icon";
 import { LakeTextInput } from "./LakeTextInput";
 import { LoadingView } from "./LoadingView";
 import { Popover } from "./Popover";
+import { Separator } from "./Separator";
 import { Space } from "./Space";
 const DEFAULT_ELEMENT_HEIGHT = 64;
 const DEFAULT_NB_SUGGESTION_DISPLAYED = 3.5;
@@ -28,9 +29,6 @@ const styles = StyleSheet.create({
         transitionProperty: "background-color",
         transitionDuration: "200ms",
         outlineStyle: "none",
-        borderColor: colors.gray[100],
-        borderStyle: "solid",
-        borderBottomWidth: 1,
         justifyContents: "center",
     },
     hoveredItem: {
@@ -86,9 +84,14 @@ const LakeComboboxWithRef = ({ inputRef, value, items, itemHeight = DEFAULT_ELEM
     const listRef = useRef(null);
     const listContainerRef = useRef(null);
     const blurTimeoutId = useRef(undefined);
-    const [isFocused, { open, close }] = useDisclosure(false, () => setHasChanged(false));
     const [isFetchingAdditionalInfo, setIsFetchingAdditionalInfo] = useState(false);
-    const [hasChanged, setHasChanged] = useState(false);
+    // The Combobox has two distinct closed states: "closed" and "dismissed"
+    // When it's "closed", it will open on input focus or text change
+    // When it's "dismissed", it will NOT open on input focus, but will on text change
+    const [state, setState] = useState("closed");
+    const open = useCallback(() => setState("opened"), []);
+    const close = useCallback(() => setState("closed"), []);
+    const dismiss = useCallback(() => setState("dismissed"), []);
     useImperativeHandle(externalRef, () => {
         return {
             open,
@@ -130,27 +133,30 @@ const LakeComboboxWithRef = ({ inputRef, value, items, itemHeight = DEFAULT_ELEM
             }
         }
     }, []);
+    const handleChangeText = useCallback((value) => {
+        onValueChange(value);
+        setState(isNotEmpty(value) ? "opened" : "closed");
+    }, [onValueChange]);
     const handleFocus = useCallback(() => {
-        window.clearTimeout(blurTimeoutId.current);
-        blurTimeoutId.current = window.setTimeout(() => {
-            open();
-        }, 100);
-    }, [open]);
+        if (isNotEmpty(value)) {
+            window.clearTimeout(blurTimeoutId.current);
+            blurTimeoutId.current = window.setTimeout(() => {
+                setState(prevState => (prevState === "closed" ? "opened" : prevState));
+            }, 100);
+        }
+    }, [value]);
     const handleBlur = useCallback(() => {
         window.clearTimeout(blurTimeoutId.current);
         blurTimeoutId.current = window.setTimeout(() => {
-            close();
+            setState("dismissed");
         }, 100);
-    }, [close]);
-    return (_jsxs(View, { children: [_jsx(LakeTextInput, { containerRef: inputTextRef, style: styles.input, ariaExpanded: isFocused, ariaControls: isFocused ? suggestionsId : "", enterKeyHint: "search", icon: icon, role: "combobox", placeholder: placeholder, value: value, disabled: disabled, error: error, hideErrors: hideErrors, onChangeText: onValueChange, onChange: event => {
-                    setHasChanged(true);
-                    onChange?.(event);
-                }, onFocus: handleFocus, onBlur: handleBlur, onKeyPress: handleKeyPress, id: id, readOnly: readOnly }), _jsx(Popover, { id: suggestionsId, role: "listbox", matchReferenceWidth: true, onDismiss: close, referenceRef: ref, autoFocus: false, returnFocus: true, visible: isFocused && !items.isNotAsked() && hasChanged, underlay: false, forcedMode: "Dropdown", children: _jsx(View, { style: [styles.list, { maxHeight: itemHeight * nbItemsDisplayed }], children: items.match({
+    }, []);
+    return (_jsxs(View, { children: [_jsx(LakeTextInput, { containerRef: inputTextRef, style: styles.input, ariaExpanded: state === "opened", ariaControls: state === "opened" ? suggestionsId : "", enterKeyHint: "search", icon: icon, role: "combobox", placeholder: placeholder, value: value, disabled: disabled, error: error, hideErrors: hideErrors, onChangeText: handleChangeText, onChange: onChange, onFocus: handleFocus, onBlur: handleBlur, onKeyPress: handleKeyPress, id: id, readOnly: readOnly }), _jsx(Popover, { id: suggestionsId, role: "listbox", matchReferenceWidth: true, onEscapeKey: dismiss, referenceRef: ref, autoFocus: false, returnFocus: true, visible: state === "opened" && !items.isNotAsked(), underlay: false, forcedMode: "Dropdown", children: _jsx(View, { style: [styles.list, { maxHeight: itemHeight * nbItemsDisplayed }], children: items.match({
                         NotAsked: () => null,
                         Loading: () => _jsx(LoadingView, { style: styles.loader }),
                         Done: items => items.match({
                             Error: _ => (_jsx(Icon, { name: "error-circle-regular", size: 22, color: colors.negative[500] })),
-                            Ok: items => (_jsxs(View, { ref: listContainerRef, style: styles.listContainer, children: [items.length === 0 ? (_jsxs(Box, { justifyContent: "center", alignItems: "center", style: styles.emptyList, children: [_jsx(Icon, { name: "clipboard-search-regular", size: 24, color: colors.gray.primary }), _jsx(Space, { height: 8 }), _jsx(Text, { style: styles.emptyListText, children: emptyResultText })] })) : (_jsx(FlatList, { ref: listRef, keyExtractor: keyExtractor, getItemLayout: getItemLayout, role: "list", data: items, style: styles.flatList, renderItem: ({ item }) => {
+                            Ok: items => (_jsxs(View, { ref: listContainerRef, style: styles.listContainer, children: [items.length === 0 ? (_jsxs(Box, { justifyContent: "center", alignItems: "center", style: styles.emptyList, children: [_jsx(Icon, { name: "clipboard-search-regular", size: 24, color: colors.gray.primary }), _jsx(Space, { height: 8 }), _jsx(Text, { style: styles.emptyListText, children: emptyResultText })] })) : (_jsx(FlatList, { ref: listRef, keyExtractor: keyExtractor, getItemLayout: getItemLayout, role: "list", data: items, style: styles.flatList, ItemSeparatorComponent: Separator, renderItem: ({ item }) => {
                                             const rendered = renderItem(item);
                                             return (_jsx(Pressable, { onFocus: handleFocus, onBlur: handleBlur, role: "listitem", onKeyDown: handleListItemKeyPress, style: ({ hovered, pressed, focused }) => [
                                                     styles.item,
@@ -163,7 +169,7 @@ const LakeComboboxWithRef = ({ inputRef, value, items, itemHeight = DEFAULT_ELEM
                                                     setIsFetchingAdditionalInfo(true);
                                                     void Promise.resolve(onSelectItem(item)).finally(() => {
                                                         setIsFetchingAdditionalInfo(false);
-                                                        close();
+                                                        dismiss();
                                                     });
                                                 }, children: isReactText(rendered) ? (_jsx(Text, { 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/LakeText.js

@@ -18,10 +18,19 @@ const variants = StyleSheet.create({
     smallMedium: texts.smallMedium,
     smallRegular: texts.smallRegular,
 });
+const styles = StyleSheet.create({
+    tooltip: {
+        width: "100%",
+    },
+    ellipsis: {
+        overflow: "hidden",
+        textOverflow: "ellipsis",
+    },
+});
 export const LakeText = forwardRef(({ align = "left", children, color, style, userSelect, variant = "regular", tooltip, ...props }, forwardedRef) => (_jsx(Text, { ref: forwardedRef, style: [
         variants[variant],
         alignments[align],
         isNotNullish(color) && { color },
         isNotNullish(userSelect) && { userSelect },
         style,
-    ], ...props, children: tooltip ? (_jsx(LakeTooltip, { ...tooltip, children: _jsx(Text, { children: children }) })) : (children) })));
+    ], ...props, children: tooltip ? (_jsx(LakeTooltip, { containerStyle: styles.tooltip, ...tooltip, children: _jsx(Text, { style: styles.ellipsis, children: children }) })) : (children) })));

package/src/components/Popover.d.ts

@@ -9,7 +9,8 @@ type Props = {
     describedBy?: string;
     matchReferenceWidth?: boolean;
     matchReferenceMinWidth?: boolean;
-    onDismiss: () => void;
+    onDismiss?: () => void;
+    onEscapeKey?: () => void;
     referenceRef: RefObject<unknown>;
     returnFocus?: boolean;
     autoFocus?: boolean;

package/src/components/Popover.js

@@ -4,6 +4,7 @@ import { Pressable, ScrollView, StyleSheet, View, } from "react-native";
 import { match, P } from "ts-pattern";
 import { animations, backgroundColor, radii, shadows } from "../constants/design";
 import { useResponsive } from "../hooks/useResponsive";
+import { noop } from "../utils/function";
 import { BottomPanel } from "./BottomPanel";
 import { FocusTrap } from "./FocusTrap";
 import { Portal } from "./Portal";
@@ -65,7 +66,7 @@ const animation = {
     ],
 };
 export const VIEWPORT_WIDTH_THRESHOLD = 600;
-export const Popover = memo(({ children, id, label, role = "dialog", describedBy, matchReferenceWidth = false, matchReferenceMinWidth = false, onDismiss, referenceRef, returnFocus = true, autoFocus = true, visible, underlay = true, safetyMargin = 8, forcedMode, }) => {
+export const Popover = memo(({ children, id, label, role = "dialog", describedBy, matchReferenceWidth = false, matchReferenceMinWidth = false, onDismiss = noop, onEscapeKey = onDismiss, referenceRef, returnFocus = true, autoFocus = true, visible, underlay = true, safetyMargin = 8, forcedMode, }) => {
     const [rootElement, setRootElement] = useState(null);
     const underlayRef = useRef(null);
     const { desktop } = useResponsive(VIEWPORT_WIDTH_THRESHOLD);
@@ -147,5 +148,5 @@ export const Popover = memo(({ children, id, label, role = "dialog", describedBy
                             {
                                 justifyContent: availableSpaceAbove > availableSpaceBelow ? FLEX_END : FLEX_START,
                             },
-                        ], id: id, role: role, "aria-describedby": describedBy, "aria-label": label, children: _jsx(FocusTrap, { focusLock: true, returnFocus: returnFocus, autoFocus: autoFocus, onEscapeKey: onDismiss, onClickOutside: underlay ? undefined : onClickOutside, children: _jsx(Pressable, { tabIndex: -1, onPress: onPress, style: styles.defaultCursor, children: typeof children == "function" ? children({ mode: "dropdown" }) : children }) }) })) : null] })) : null }) }));
+                        ], id: id, role: role, "aria-describedby": describedBy, "aria-label": label, children: _jsx(FocusTrap, { focusLock: true, returnFocus: returnFocus, autoFocus: autoFocus, onEscapeKey: onEscapeKey, onClickOutside: underlay ? undefined : onClickOutside, children: _jsx(Pressable, { tabIndex: -1, onPress: onPress, style: styles.defaultCursor, children: typeof children == "function" ? children({ mode: "dropdown" }) : children }) }) })) : null] })) : null }) }));
 });

package/src/hooks/useDisclosure.d.ts

@@ -1,4 +1,4 @@
-export declare const useDisclosure: (initialValue: boolean, onClose?: () => void) => [
+export declare const useDisclosure: (initialValue: boolean) => [
     visible: boolean,
     fns: {
         open: () => void;

package/src/hooks/useDisclosure.js

@@ -1,14 +1,11 @@
 import { useMemo, useState } from "react";
-export const useDisclosure = (initialValue, onClose) => {
+export const useDisclosure = (initialValue) => {
     const [value, setValue] = useState(initialValue);
     return [
         value,
         useMemo(() => ({
             open: () => setValue(true),
-            close: () => {
-                setValue(false);
-                onClose?.();
-            },
+            close: () => setValue(false),
             toggle: () => setValue(prevValue => !prevValue),
         }), []),
     ];