@swan-io/lake 2.7.7 → 2.7.8

package/package.json

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

package/src/components/LakeCombobox.js

@@ -5,11 +5,13 @@ 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 { 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;
@@ -27,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: {
@@ -85,10 +84,14 @@ const LakeComboboxWithRef = ({ inputRef, value, items, itemHeight = DEFAULT_ELEM
     const listRef = useRef(null);
     const listContainerRef = useRef(null);
     const blurTimeoutId = useRef(undefined);
-    const [isFocused, setIsFocused] = useState(false);
     const [isFetchingAdditionalInfo, setIsFetchingAdditionalInfo] = useState(false);
-    const open = useCallback(() => ref.current?.focus(), []);
-    const close = useCallback(() => ref.current?.blur(), []);
+    // 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,24 +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(() => {
-            setIsFocused(true);
-        }, 100);
-    }, []);
+        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(() => {
-            setIsFocused(false);
+            setState("dismissed");
         }, 100);
     }, []);
-    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: onChange, 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: false, visible: isFocused && !items.isNotAsked(), 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,
@@ -160,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 }) }));
 });