@swan-io/lake 2.7.3 → 2.7.5

package/package.json

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

package/src/components/FixedListView.d.ts

@@ -65,9 +65,11 @@ export type FixedListViewProps<T, ExtraInfo> = {
     data: T[];
     keyExtractor: (item: T, index: number) => string;
     highlightedRowId?: string;
+    headerBackgroundColor?: string;
     headerHeight: number;
     rowHeight: number;
     rowVerticalSpacing: number;
+    horizontalPadding?: number;
     extraInfo: ExtraInfo;
     stickedToStartColumns?: ColumnConfig<T, ExtraInfo>[];
     columns: ColumnConfig<T, ExtraInfo>[];
@@ -82,7 +84,8 @@ export type FixedListViewProps<T, ExtraInfo> = {
         count: number;
     };
 };
-export declare const FixedListView: <T, ExtraInfo>({ data: originalData, mode, keyExtractor, highlightedRowId, rowHeight, rowVerticalSpacing, headerHeight, renderThreshold, stickedToStartColumns: initialStickedToStartColumns, columns: initialColumns, stickedToEndColumns: initialStickedToEndColumns, extraInfo, onEndReached, onEndReachedThresholdPx, getRowLink, renderEmptyList, loading, }: FixedListViewProps<T, ExtraInfo>) => import("react/jsx-runtime").JSX.Element;
+export declare const SCROLLBAR_RESERVED_SPACE = 20;
+export declare const FixedListView: <T, ExtraInfo>({ data: originalData, mode, keyExtractor, highlightedRowId, rowHeight, rowVerticalSpacing, horizontalPadding, headerBackgroundColor, headerHeight, renderThreshold, stickedToStartColumns: initialStickedToStartColumns, columns: initialColumns, stickedToEndColumns: initialStickedToEndColumns, extraInfo, onEndReached, onEndReachedThresholdPx, getRowLink, renderEmptyList, loading, }: FixedListViewProps<T, ExtraInfo>) => import("react/jsx-runtime").JSX.Element;
 type PlaceholderProps = {
     count: number;
     rowHeight: number;

package/src/components/FixedListView.js

@@ -50,7 +50,7 @@ import { LakeHeading } from "./LakeHeading";
 import { LakeText } from "./LakeText";
 import { Space } from "./Space";
 const HORIZONTAL_SAFE_AREA = 10;
-const SCROLLBAR_RESERVED_SPACE = 20;
+export const SCROLLBAR_RESERVED_SPACE = 20;
 const styles = StyleSheet.create({
     root: {
         height: 1,
@@ -97,16 +97,12 @@ const styles = StyleSheet.create({
         top: 0,
         bottom: 0,
         right: "100%",
-        width: HORIZONTAL_SAFE_AREA,
-        backgroundColor: backgroundColor.default,
     },
     stickyColumnEndOverflow: {
         position: "absolute",
         top: 0,
         bottom: 0,
         left: "100%",
-        width: HORIZONTAL_SAFE_AREA,
-        backgroundColor: backgroundColor.default,
     },
     rowSegment: {
         position: "absolute",
@@ -128,7 +124,6 @@ const styles = StyleSheet.create({
         flexDirection: "row",
         alignItems: "stretch",
         zIndex: 2,
-        backgroundColor: backgroundColor.default,
     },
     segment: {
         flexDirection: "row",
@@ -177,9 +172,6 @@ const styles = StyleSheet.create({
         flexDirection: "row",
         alignItems: "stretch",
     },
-    stickyRow: {
-    // overflow: "hidden",
-    },
     evenRow: {
         backgroundColor: backgroundColor.accented,
     },
@@ -226,7 +218,6 @@ const styles = StyleSheet.create({
         transitionTimingFunction: "ease-in-out",
     },
     rowBackgroundContainerPlain: {
-        backgroundColor: backgroundColor.default,
         left: -10,
         right: -10,
         boxShadow: `inset 0 -1px ${colors.gray[100]}`,
@@ -414,14 +405,15 @@ const findNextFocusableElement = (sortedCellIds, currentCellIndex, direction) =>
 };
 const EMPTY_COLUMNS = [];
 const ZERO = 0;
-export const FixedListView = ({ data: originalData, mode = "tile", keyExtractor, highlightedRowId, rowHeight, rowVerticalSpacing, headerHeight, renderThreshold = 1000, stickedToStartColumns: initialStickedToStartColumns = EMPTY_COLUMNS, columns: initialColumns, stickedToEndColumns: initialStickedToEndColumns = EMPTY_COLUMNS, extraInfo, onEndReached, onEndReachedThresholdPx = 200, getRowLink, renderEmptyList, loading, }) => {
+export const FixedListView = ({ data: originalData, mode = "tile", keyExtractor, highlightedRowId, rowHeight, rowVerticalSpacing, horizontalPadding = HORIZONTAL_SAFE_AREA, headerBackgroundColor = backgroundColor.default, headerHeight, renderThreshold = 1000, stickedToStartColumns: initialStickedToStartColumns = EMPTY_COLUMNS, columns: initialColumns, stickedToEndColumns: initialStickedToEndColumns = EMPTY_COLUMNS, extraInfo, onEndReached, onEndReachedThresholdPx = 200, getRowLink, renderEmptyList, loading, }) => {
     const [viewId] = useState(() => uuid());
     // Those three refs are used to synchronize the horizontal scroll in the center columns
     const centerHeadersRef = useRef(null);
     const centerColumnsRef = useRef(null);
     const horizontalScrollbarRef = useRef(null);
     const totalRowHeight = rowHeight + rowVerticalSpacing;
-    const totalHeight = originalData.length * totalRowHeight + headerHeight;
+    const rowsHeight = originalData.length * totalRowHeight;
+    const totalHeight = headerHeight + rowsHeight;
     // It might seem off to use the range in state instead of storing scroll/layout and deriving it,
     // but it saves a lot of render phases by allowing to bail out from rendering when the range doesn't change
     const [{ data, range: [renderedRangeStartIndex, renderedRangeEndIndex], }, setDataAndRenderRange,] = useState({ data: originalData, range: [0, 20] });
@@ -560,7 +552,7 @@ export const FixedListView = ({ data: originalData, mode = "tile", keyExtractor,
                     now - lastHorizontalScroll.current.date > SCROLL_THRESHOLD_MS) {
                     const scrollLeft = centerColumns.scrollLeft;
                     setShouldShowStartGradient(scrollLeft > 0);
-                    setShouldShowEndGradient(centerColumns.scrollWidth - HORIZONTAL_SAFE_AREA * 2 >=
+                    setShouldShowEndGradient(centerColumns.scrollWidth - horizontalPadding * 2 >=
                         scrollLeft + centerColumns.clientWidth);
                     centerHeaders.scrollLeft = scrollLeft;
                     horizontalScrollbar.scrollLeft = scrollLeft;
@@ -573,7 +565,7 @@ export const FixedListView = ({ data: originalData, mode = "tile", keyExtractor,
                     now - lastHorizontalScroll.current.date > SCROLL_THRESHOLD_MS) {
                     const scrollLeft = centerHeaders.scrollLeft;
                     setShouldShowStartGradient(scrollLeft > 0);
-                    setShouldShowEndGradient(centerHeaders.scrollWidth - HORIZONTAL_SAFE_AREA * 2 >=
+                    setShouldShowEndGradient(centerHeaders.scrollWidth - horizontalPadding * 2 >=
                         scrollLeft + centerHeaders.clientWidth);
                     centerColumns.scrollLeft = scrollLeft;
                     horizontalScrollbar.scrollLeft = scrollLeft;
@@ -586,7 +578,7 @@ export const FixedListView = ({ data: originalData, mode = "tile", keyExtractor,
                     now - lastHorizontalScroll.current.date > SCROLL_THRESHOLD_MS) {
                     const scrollLeft = horizontalScrollbar.scrollLeft;
                     setShouldShowStartGradient(scrollLeft > 0);
-                    setShouldShowEndGradient(horizontalScrollbar.scrollWidth - HORIZONTAL_SAFE_AREA * 2 >=
+                    setShouldShowEndGradient(horizontalScrollbar.scrollWidth - horizontalPadding * 2 >=
                         scrollLeft + horizontalScrollbar.clientWidth);
                     centerHeaders.scrollLeft = scrollLeft;
                     centerColumns.scrollLeft = scrollLeft;
@@ -602,7 +594,7 @@ export const FixedListView = ({ data: originalData, mode = "tile", keyExtractor,
                 horizontalScrollbar.removeEventListener("scroll", onScrollbarScroll);
             };
         }
-    }, []);
+    }, [horizontalPadding]);
     const onKeyDown = useCallback((event) => {
         const target = event.nativeEvent.target;
         const currentTarget = event.nativeEvent.currentTarget;
@@ -743,9 +735,9 @@ export const FixedListView = ({ data: originalData, mode = "tile", keyExtractor,
                 ], children: [_jsx(View, { "aria-busy": isLoading, style: [
                             styles.loadingPlaceholder,
                             {
-                                top: totalHeight,
-                                marginLeft: HORIZONTAL_SAFE_AREA * 2,
-                                marginRight: HORIZONTAL_SAFE_AREA * 2,
+                                top: rowsHeight,
+                                marginLeft: horizontalPadding * 2,
+                                marginRight: horizontalPadding * 2,
                             },
                         ], children: isLoading
                             ? match(mode)
@@ -755,30 +747,39 @@ export const FixedListView = ({ data: originalData, mode = "tile", keyExtractor,
                             : null }), _jsx(View, { style: [styles.backgroundRows, { top: headerHeight }], children: backgroundRows }), _jsxs(View, { style: styles.scrollContentContainer, ref: scrollContentsRef, children: [stickedToStartColumns.length > 0 ? (_jsxs(View, { style: [
                                     styles.stickyColumn,
                                     {
-                                        width: stickedToStartColumnsWidth + HORIZONTAL_SAFE_AREA,
-                                        paddingLeft: HORIZONTAL_SAFE_AREA,
+                                        width: stickedToStartColumnsWidth + horizontalPadding,
+                                        paddingLeft: horizontalPadding,
                                     },
-                                ], children: [_jsxs(View, { style: [styles.headingSegment, { height: headerHeight }], children: [_jsx(HeaderSegment, { columns: stickedToStartColumns, extraInfo: extraInfo, viewId: viewId, width: stickedToStartColumnsWidth }), _jsx(View, { style: styles.stickyColumnStartOverflow }), _jsx(View, { style: [styles.topGradient, isScrolled && styles.visibleTopGradient] })] }), _jsx(View, { style: [styles.stickyRow, { height: totalHeight }], children: startRows })] })) : null, _jsxs(View, { style: [
+                                ], children: [_jsxs(View, { style: [
+                                            styles.headingSegment,
+                                            { height: headerHeight, backgroundColor: headerBackgroundColor },
+                                        ], children: [_jsx(HeaderSegment, { columns: stickedToStartColumns, extraInfo: extraInfo, viewId: viewId, width: stickedToStartColumnsWidth }), _jsx(View, { style: [
+                                                    styles.stickyColumnStartOverflow,
+                                                    { width: horizontalPadding, backgroundColor: headerBackgroundColor },
+                                                ] }), _jsx(View, { style: [styles.topGradient, isScrolled && styles.visibleTopGradient] })] }), _jsx(View, { style: { height: rowsHeight }, children: startRows })] })) : null, _jsxs(View, { style: [
                                     styles.centerColumnsContainer,
                                     {
-                                        paddingLeft: stickedToStartColumns.length === 0 ? HORIZONTAL_SAFE_AREA : ZERO,
-                                        paddingRight: stickedToEndColumns.length === 0 ? HORIZONTAL_SAFE_AREA : ZERO,
+                                        paddingLeft: stickedToStartColumns.length === 0 ? horizontalPadding : ZERO,
+                                        paddingRight: stickedToEndColumns.length === 0 ? horizontalPadding : ZERO,
                                     },
-                                ], children: [_jsxs(View, { style: [styles.headingSegment, { height: headerHeight }], children: [_jsx(ScrollView, { ref: centerHeadersRef, horizontal: true, onLayout: onCenterTrackLayout, style: styles.centerColumns, contentContainerStyle: {
+                                ], children: [_jsxs(View, { style: [
+                                            styles.headingSegment,
+                                            { height: headerHeight, backgroundColor: headerBackgroundColor },
+                                        ], children: [_jsx(ScrollView, { ref: centerHeadersRef, horizontal: true, onLayout: onCenterTrackLayout, style: styles.centerColumns, contentContainerStyle: {
                                                     minWidth: centerColumnsWidth +
-                                                        (stickedToStartColumns.length === 0 ? HORIZONTAL_SAFE_AREA : 0) +
-                                                        (stickedToEndColumns.length === 0 ? HORIZONTAL_SAFE_AREA : 0),
+                                                        (stickedToStartColumns.length === 0 ? horizontalPadding : 0) +
+                                                        (stickedToEndColumns.length === 0 ? horizontalPadding : 0),
                                                 }, children: _jsx(HeaderSegment, { columns: columns, extraInfo: extraInfo, viewId: viewId, width: centerColumnsWidth }) }), _jsx(View, { style: [styles.topGradient, isScrolled && styles.visibleTopGradient] })] }), _jsx(ScrollView, { horizontal: true, ref: centerColumnsRef, style: styles.centerColumns, contentContainerStyle: [
                                             styles.centerColumnsContentContainer,
                                             {
                                                 minWidth: centerColumnsWidth +
-                                                    (stickedToStartColumns.length === 0 ? HORIZONTAL_SAFE_AREA : 0) +
-                                                    (stickedToEndColumns.length === 0 ? HORIZONTAL_SAFE_AREA : 0),
+                                                    (stickedToStartColumns.length === 0 ? horizontalPadding : 0) +
+                                                    (stickedToEndColumns.length === 0 ? horizontalPadding : 0),
                                             },
                                         ], children: centerRows }), _jsx(ScrollView, { ref: horizontalScrollbarRef, horizontal: true, style: styles.horizontalScrollbar, contentContainerStyle: {
                                             minWidth: centerColumnsWidth +
-                                                (stickedToStartColumns.length === 0 ? HORIZONTAL_SAFE_AREA : 0) +
-                                                (stickedToEndColumns.length === 0 ? HORIZONTAL_SAFE_AREA : 0),
+                                                (stickedToStartColumns.length === 0 ? horizontalPadding : 0) +
+                                                (stickedToEndColumns.length === 0 ? horizontalPadding : 0),
                                         } }), stickedToStartColumns.length > 0 && hasHorizontalScroll ? (_jsx(View, { style: [
                                             styles.leftToRightGradient,
                                             {
@@ -798,10 +799,16 @@ export const FixedListView = ({ data: originalData, mode = "tile", keyExtractor,
                                         ] })) : null] }), stickedToEndColumns.length > 0 ? (_jsxs(View, { style: [
                                     styles.stickyColumn,
                                     {
-                                        width: stickedToEndColumnsWidth + HORIZONTAL_SAFE_AREA,
-                                        paddingRight: HORIZONTAL_SAFE_AREA,
+                                        width: stickedToEndColumnsWidth + horizontalPadding,
+                                        paddingRight: horizontalPadding,
                                     },
-                                ], children: [_jsxs(View, { style: [styles.headingSegment, { height: headerHeight }], children: [_jsx(View, { style: styles.stickyColumnEndOverflow }), _jsx(HeaderSegment, { columns: stickedToEndColumns, extraInfo: extraInfo, viewId: viewId, width: stickedToEndColumnsWidth }), _jsx(View, { style: [styles.topGradient, isScrolled && styles.visibleTopGradient] })] }), _jsx(View, { style: [styles.stickyRow, { height: totalHeight }], children: endRows })] })) : null] })] }), data.length === 0 && isNotNullish(renderEmptyList) && !isLoading ? (_jsx(View, { style: styles.emptyListContainer, children: renderEmptyList() })) : null, _jsx(View, { ref: endFocusAnchorRef, tabIndex: 0 })] }));
+                                ], children: [_jsxs(View, { style: [
+                                            styles.headingSegment,
+                                            { height: headerHeight, backgroundColor: headerBackgroundColor },
+                                        ], 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] })] }), data.length === 0 && isNotNullish(renderEmptyList) && !isLoading ? (_jsx(View, { style: styles.emptyListContainer, 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/FixedListViewCells.d.ts

@@ -30,7 +30,7 @@ export declare const CopyableRegularTextCell: ({ variant, text, copyWording, cop
     copyWording: string;
     copiedWording: string;
 }) => import("react/jsx-runtime").JSX.Element;
-export declare const BalanceCell: ({ value, currency, originalValue, formatCurrency, textAlign, }: {
+export declare const BalanceCell: ({ value, currency, originalValue, formatCurrency, textAlign, variant, }: {
     value: number;
     currency: string;
     originalValue?: {
@@ -39,11 +39,13 @@ export declare const BalanceCell: ({ value, currency, originalValue, formatCurre
     } | undefined;
     formatCurrency: (value: number, currency: string) => string;
     textAlign?: "left" | "right" | "center" | undefined;
+    variant?: "light" | "semibold" | "medium" | "regular" | "smallSemibold" | "smallMedium" | "smallRegular" | undefined;
 }) => import("react/jsx-runtime").JSX.Element;
-export declare const LinkCell: ({ children, external, onPress, }: {
+export declare const LinkCell: ({ children, external, onPress, variant, }: {
     children: ReactNode;
     onPress: () => void;
     external?: boolean | undefined;
+    variant?: "light" | "semibold" | "medium" | "regular" | "smallSemibold" | "smallMedium" | "smallRegular" | undefined;
 }) => import("react/jsx-runtime").JSX.Element;
 export declare const StartAlignedCell: ({ children }: {
     children: ReactNode;

package/src/components/FixedListViewCells.js

@@ -123,8 +123,8 @@ export const CopyableRegularTextCell = ({ variant = "regular", text, copyWording
     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, { color: colors.gray[900], style: styles.regularText, variant: variant, children: text })] }));
 };
 // TODO: handle `+` sign properly
-export const BalanceCell = ({ value, currency, originalValue, formatCurrency, textAlign = "right", }) => {
-    return (_jsxs(View, { style: styles.balanceCellContainer, children: [_jsx(View, { style: styles.cell, children: _jsxs(LakeText, { align: textAlign, color: colors.gray[900], variant: "medium", style: [
+export const BalanceCell = ({ value, currency, originalValue, formatCurrency, textAlign = "right", variant = "medium", }) => {
+    return (_jsxs(View, { style: styles.balanceCellContainer, children: [_jsx(View, { style: styles.cell, children: _jsxs(LakeText, { align: textAlign, color: colors.gray[900], variant: variant, style: [
                         styles.mediumText,
                         {
                             justifyContent: match(textAlign)
@@ -137,11 +137,11 @@ export const BalanceCell = ({ value, currency, originalValue, formatCurrency, te
                         value < 0 && { color: colors.negative.primary },
                     ], children: [value > 0 && "+", formatCurrency(value, currency)] }) }), isNotNullish(originalValue) && originalValue.currency !== currency && (_jsx(View, { style: styles.cell, children: _jsxs(LakeText, { style: styles.mediumText, align: textAlign, color: colors.gray[500], variant: "smallRegular", children: [originalValue.value > 0 && "+", formatCurrency(originalValue.value, originalValue.currency)] }) }))] }));
 };
-export const LinkCell = ({ children, external = false, onPress, }) => {
+export const LinkCell = ({ children, external = false, onPress, variant = "medium", }) => {
     return (_jsxs(View, { style: styles.cell, children: [_jsx(Pressable, { style: ({ hovered }) => [styles.icon, hovered && styles.underline], onPress: event => {
                     event.preventDefault();
                     onPress();
-                }, children: _jsx(Icon, { size: 14, name: external ? "open-regular" : "arrow-right-filled" }) }), _jsx(Space, { width: 8 }), _jsx(LakeText, { color: colors.gray[900], variant: "medium", style: styles.mediumText, children: children })] }));
+                }, children: _jsx(Icon, { size: 14, name: external ? "open-regular" : "arrow-right-filled" }) }), _jsx(Space, { width: 8 }), _jsx(LakeText, { color: colors.gray[900], variant: variant, style: styles.mediumText, children: children })] }));
 };
 export const StartAlignedCell = ({ children }) => {
     return _jsx(View, { style: styles.cell, children: children });

package/src/components/LakeAlert.d.ts

@@ -1,6 +1,6 @@
 import { ReactNode } from "react";
 import { StyleProp, ViewStyle } from "react-native";
-type AlertVariant = "info" | "warning" | "error" | "success";
+type AlertVariant = "info" | "warning" | "error" | "success" | "neutral";
 type Props = {
     anchored?: boolean;
     variant: AlertVariant;

package/src/components/LakeAlert.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { StyleSheet, View } from "react-native";
 import { commonStyles } from "../constants/commonStyles";
 import { colors, shadows } from "../constants/design";
@@ -38,38 +38,44 @@ const alertIcon = {
     warning: "warning-regular",
     error: "dismiss-circle-regular",
     success: "checkmark-circle-regular",
+    neutral: undefined,
 };
 const alertColor = {
     info: colors.shakespear[700],
     warning: colors.warning[700],
     error: colors.negative[700],
     success: colors.positive[700],
+    neutral: colors.gray[700],
 };
 const alertBackground = {
     info: colors.shakespear[0],
     warning: colors.warning[0],
     error: colors.negative[0],
     success: colors.positive[0],
+    neutral: colors.gray[0],
 };
 const alertBorder = {
     info: colors.shakespear[200],
     warning: colors.warning[200],
     error: colors.negative[200],
     success: colors.positive[200],
+    neutral: colors.gray[200],
 };
 const alertLeftBorder = {
     info: colors.shakespear[500],
     warning: colors.warning[500],
     error: colors.negative[500],
     success: colors.positive[500],
+    neutral: colors.gray[500],
 };
 const isText = (node) => typeof node === "string" || typeof node === "number";
 export const LakeAlert = ({ anchored = false, variant, title, subtitle, children, style, callToAction, }) => {
     const color = alertColor[variant];
+    const icon = alertIcon[variant];
     return (_jsxs(View, { style: [
             styles.base,
             { backgroundColor: alertBackground[variant], borderColor: alertBorder[variant] },
             anchored ? styles.anchored : { borderLeftColor: alertLeftBorder[variant] },
             style,
-        ], children: [_jsxs(Box, { direction: "row", alignItems: "center", children: [_jsx(Icon, { name: alertIcon[variant], color: color, size: 20 }), _jsx(Space, { width: 20 }), _jsxs(View, { style: commonStyles.fill, children: [_jsx(LakeText, { color: color, children: title }), isNotNullishOrEmpty(subtitle) && _jsx(LakeText, { color: color, children: subtitle })] }), isNotNullish(callToAction) && _jsx(View, { style: styles.callToAction, children: callToAction })] }), isNotNullish(children) && (_jsxs(View, { style: styles.content, children: [_jsx(Space, { height: 12 }), isText(children) ? _jsx(LakeText, { children: children }) : children] }))] }));
+        ], children: [_jsxs(Box, { direction: "row", alignItems: "center", children: [icon != null ? (_jsxs(_Fragment, { children: [_jsx(Icon, { name: icon, color: color, size: 20 }), _jsx(Space, { width: 20 })] })) : null, _jsxs(View, { style: commonStyles.fill, children: [_jsx(LakeText, { color: color, variant: icon != null ? "regular" : "medium", children: title }), isNotNullishOrEmpty(subtitle) && _jsx(LakeText, { color: color, children: subtitle })] }), isNotNullish(callToAction) && _jsx(View, { style: styles.callToAction, children: callToAction })] }), isNotNullish(children) && (_jsxs(View, { style: icon != null ? styles.content : null, children: [_jsx(Space, { height: 12 }), isText(children) ? _jsx(LakeText, { children: children }) : children] }))] }));
 };

package/src/components/LakeCombobox.js

@@ -86,8 +86,9 @@ 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);
+    const [isFocused, { open, close }] = useDisclosure(false, () => setHasChanged(false));
     const [isFetchingAdditionalInfo, setIsFetchingAdditionalInfo] = useState(false);
+    const [hasChanged, setHasChanged] = useState(false);
     useImperativeHandle(externalRef, () => {
         return {
             open,
@@ -141,7 +142,10 @@ const LakeComboboxWithRef = ({ inputRef, value, items, itemHeight = DEFAULT_ELEM
             close();
         }, 100);
     }, [close]);
-    return (_jsxs(View, { children: [_jsx(LakeTextInput, { ref: 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: true, 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: 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({
                         NotAsked: () => null,
                         Loading: () => _jsx(LoadingView, { style: styles.loader }),
                         Done: items => items.match({

package/src/components/LakeTextInput.d.ts

@@ -1,5 +1,5 @@
-import { ChangeEventHandler, ReactNode } from "react";
-import { NativeSyntheticEvent, TextInput, TextInputFocusEventData, TextInputProps } from "react-native";
+import { ChangeEventHandler, ReactNode, Ref } from "react";
+import { NativeSyntheticEvent, TextInput, TextInputFocusEventData, TextInputProps, View } from "react-native";
 import { Except } from "type-fest";
 import { ColorVariants } from "../constants/design";
 import { IconName } from "./Icon";
@@ -24,6 +24,7 @@ export type LakeTextInputProps = Except<TextInputProps, "editable" | "keyboardTy
     maxCharCount?: number;
     help?: string;
     renderEnd?: () => ReactNode;
+    containerRef?: Ref<View>;
 };
 export declare const LakeTextInput: import("react").ForwardRefExoticComponent<{
     allowFontScaling?: boolean | undefined;
@@ -236,4 +237,5 @@ export declare const LakeTextInput: import("react").ForwardRefExoticComponent<{
     maxCharCount?: number | undefined;
     help?: string | undefined;
     renderEnd?: (() => ReactNode) | undefined;
+    containerRef?: Ref<View> | undefined;
 } & import("react").RefAttributes<TextInput | null>>;

package/src/components/LakeTextInput.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { forwardRef, useCallback, useRef, useState } from "react";
+import { forwardRef, useCallback, useRef, useState, } from "react";
 import { ActivityIndicator, StyleSheet, TextInput, View, } from "react-native";
 import { commonStyles } from "../constants/commonStyles";
 import { backgroundColor, colors, radii, shadows, spacings, texts, } from "../constants/design";
@@ -43,11 +43,11 @@ const styles = StyleSheet.create({
         placeholderTextColor: colors.gray[400],
         color: colors.gray[900],
         paddingHorizontal: spacings[8],
-        height: 40,
+        height: 38,
         minWidth: 0,
     },
     multilineInput: {
-        height: "auto",
+        height: "100%",
         padding: spacings[8],
     },
     inputWithUnit: {
@@ -121,7 +121,7 @@ const styles = StyleSheet.create({
         paddingTop: spacings[4],
     },
 });
-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, 
+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, containerRef, 
 //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
@@ -158,7 +158,7 @@ maxCharCount, help, renderEnd, ...props }, forwardRef) => {
                                     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: [
+                                ], ref: containerRef, 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, ...props, defaultValue: defaultValue, value: isNullish(defaultValue) ? value ?? "" : value, onFocus: onFocus, onBlur: onBlur, readOnly: !isInteractive, onChange: onChange, multiline: multiline, ref: mergedRef, style: [
                                             styles.input,
                                             multiline && styles.multilineInput,
                                             readOnly && hasError && styles.readOnlyError,

package/src/hooks/useDisclosure.d.ts

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

package/src/hooks/useDisclosure.js

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