@swan-io/lake 8.4.6 → 8.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@swan-io/lake",
-  "version": "8.4.6",
+  "version": "8.5.0",
   "engines": {
     "node": ">=20.9.0",
     "yarn": "^1.22.0"

package/src/components/FilterChooser.js

@@ -1,10 +1,11 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useRef } from "react";
-import { FlatList, Pressable, StyleSheet, View } from "react-native";
+import { Pressable, StyleSheet, View } from "react-native";
 import { colors } from "../constants/design";
 import { useDisclosure } from "../hooks/useDisclosure";
 import { isNotNullishOrEmpty } from "../utils/nullish";
 import { Box } from "./Box";
+import { FlatList } from "./FlatList";
 import { Icon } from "./Icon";
 import { LakeButton } from "./LakeButton";
 import { LakeText } from "./LakeText";

package/src/components/Filters.js

@@ -3,7 +3,7 @@ import { DatePickerModal, } from "@swan-io/shared-business/src/components/DatePi
 import { useForm } from "@swan-io/use-form";
 import dayjs from "dayjs";
 import { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { FlatList, Pressable, StyleSheet, Text, View } from "react-native";
+import { Pressable, StyleSheet, Text, View } from "react-native";
 import { P, match } from "ts-pattern";
 import { colors, shadows, spacings } from "../constants/design";
 import { useDisclosure } from "../hooks/useDisclosure";
@@ -11,6 +11,7 @@ import { useMergeRefs } from "../hooks/useMergeRefs";
 import { usePreviousValue } from "../hooks/usePreviousValue";
 import { isNotNullish } from "../utils/nullish";
 import { Box } from "./Box";
+import { FlatList } from "./FlatList";
 import { Icon } from "./Icon";
 import { LakeButton } from "./LakeButton";
 import { LakeCheckbox } from "./LakeCheckbox";

package/src/components/FlatList.d.ts

@@ -0,0 +1,31 @@
+import { ForwardedRef, ReactNode } from "react";
+import { ScrollView, ScrollViewProps, StyleProp, ViewStyle, WebRole } from "react-native";
+export type FlatListRef = ScrollView;
+export type ListRenderItemInfo<T> = {
+    item: T;
+    index: number;
+};
+type Props<T> = {
+    ItemSeparatorComponent?: ReactNode;
+    ListEmptyComponent?: ReactNode;
+    ListFooterComponent?: ReactNode;
+    ListHeaderComponent?: ReactNode;
+    contentContainerStyle?: StyleProp<ViewStyle>;
+    data: T[];
+    horizontal?: boolean;
+    keyExtractor: (item: T, index: number) => string;
+    onEndReached?: () => void;
+    onEndReachedThresholdPx?: number;
+    onKeyDown?: ScrollViewProps["onKeyDown"];
+    onScroll?: ScrollViewProps["onScroll"];
+    renderItem: (info: ListRenderItemInfo<T>) => ReactNode;
+    role?: WebRole;
+    scrollEventThrottle?: number;
+    showsScrollIndicators?: boolean;
+    style?: StyleProp<ViewStyle>;
+};
+declare const FlatListWithRef: <T>({ ItemSeparatorComponent, ListEmptyComponent, ListFooterComponent, ListHeaderComponent, contentContainerStyle, data, horizontal, keyExtractor, onEndReached, onEndReachedThresholdPx, onKeyDown, onScroll, renderItem, role, scrollEventThrottle, showsScrollIndicators, style, }: Props<T>, forwardedRef: ForwardedRef<FlatListRef>) => import("react/jsx-runtime").JSX.Element;
+export declare const FlatList: <T>(props: Props<T> & {
+    ref?: ForwardedRef<FlatListRef>;
+}) => ReturnType<typeof FlatListWithRef>;
+export {};

package/src/components/FlatList.js

@@ -0,0 +1,34 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { Fragment, forwardRef, useEffect, useRef } from "react";
+import { ScrollView, StyleSheet, View, } from "react-native";
+const styles = StyleSheet.create({
+    scrollTracker: {
+        position: "absolute",
+        pointerEvents: "none",
+        left: 0,
+        bottom: 0,
+        right: 0,
+    },
+});
+const FlatListWithRef = ({ ItemSeparatorComponent, ListEmptyComponent, ListFooterComponent, ListHeaderComponent, contentContainerStyle, data, horizontal = false, keyExtractor, onEndReached, onEndReachedThresholdPx = 200, onKeyDown, onScroll, renderItem, role, scrollEventThrottle = 0, showsScrollIndicators = true, style, }, forwardedRef) => {
+    const scrollTrackerRef = useRef(null);
+    useEffect(() => {
+        const element = scrollTrackerRef.current;
+        if (element != null) {
+            const observer = new IntersectionObserver(entries => {
+                entries.forEach(entry => {
+                    if (entry.isIntersecting) {
+                        onEndReached === null || onEndReached === void 0 ? void 0 : onEndReached();
+                    }
+                });
+            });
+            observer.observe(element);
+            return () => {
+                observer.unobserve(element);
+            };
+        }
+        // re-create an observer only on list length change
+    }, [data.length]); // eslint-disable-line react-hooks/exhaustive-deps
+    return (_jsxs(ScrollView, { contentContainerStyle: contentContainerStyle, horizontal: horizontal, onKeyDown: onKeyDown, onScroll: onScroll, ref: forwardedRef, role: role, scrollEventThrottle: scrollEventThrottle, showsHorizontalScrollIndicator: showsScrollIndicators, showsVerticalScrollIndicator: showsScrollIndicators, style: style, children: [ListHeaderComponent, data.length > 0 ? (_jsxs(View, { children: [data.map((item, index) => (_jsxs(Fragment, { children: [index !== 0 && ItemSeparatorComponent, renderItem({ item, index })] }, keyExtractor(item, index)))), _jsx(View, { ref: scrollTrackerRef, style: [styles.scrollTracker, { height: onEndReachedThresholdPx }] })] })) : (ListEmptyComponent), ListFooterComponent] }));
+};
+export const FlatList = forwardRef(FlatListWithRef);

package/src/components/LakeCombobox.js

@@ -1,11 +1,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 { Pressable, StyleSheet, Text, View, } from "react-native";
 import { backgroundColor, colors, spacings } from "../constants/design";
 import { useMergeRefs } from "../hooks/useMergeRefs";
 import { getFocusableElements } from "../utils/a11y";
 import { isNotEmpty } from "../utils/nullish";
 import { Box } from "./Box";
+import { FlatList } from "./FlatList";
 import { Icon } from "./Icon";
 import { LakeText } from "./LakeText";
 import { LakeTextInput } from "./LakeTextInput";
@@ -19,7 +20,9 @@ const styles = StyleSheet.create({
     list: {
         marginVertical: spacings[8],
     },
-    flatList: { scrollBehavior: "smooth" },
+    flatList: {
+        scrollBehavior: "smooth",
+    },
     item: {
         flexShrink: 1,
         flexGrow: 1,
@@ -71,15 +74,9 @@ const styles = StyleSheet.create({
         flexGrow: 1,
     },
 });
-const getItemLayout = (_data, index) => ({
-    length: DEFAULT_ELEMENT_HEIGHT,
-    offset: DEFAULT_ELEMENT_HEIGHT * index,
-    index,
-});
 const LakeComboboxWithRef = ({ inputRef, value, items, itemHeight = DEFAULT_ELEMENT_HEIGHT, nbItemsDisplayed = DEFAULT_NB_SUGGESTION_DISPLAYED, ListFooterComponent, onChange, onValueChange, onSelectItem, renderItem, keyExtractor, icon, placeholder, disabled = false, emptyResultText, readOnly, id, error, hideErrors, }, forwardedRef) => {
     const ref = useRef(null);
     const inputTextRef = useMergeRefs(ref, inputRef);
-    const listRef = useRef(null);
     const listContainerRef = useRef(null);
     const blurTimeoutId = useRef(undefined);
     const [isFetchingAdditionalInfo, setIsFetchingAdditionalInfo] = useState(false);
@@ -156,7 +153,7 @@ const LakeComboboxWithRef = ({ inputRef, value, items, itemHeight = DEFAULT_ELEM
                         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, ItemSeparatorComponent: Separator, 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, { keyExtractor: keyExtractor, role: "list", data: items, style: styles.flatList, ItemSeparatorComponent: _jsx(Separator, {}), renderItem: ({ item }) => {
                                             const rendered = renderItem(item);
                                             return (_jsx(Pressable, { onFocus: handleFocus, onBlur: handleBlur, role: "listitem", onKeyDown: handleListItemKeyPress, style: ({ hovered, pressed, focused }) => [
                                                     styles.item,

package/src/components/LakeSelect.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, useCallback, useRef, } from "react";
-import { FlatList, StyleSheet, View, } from "react-native";
+import { StyleSheet, View, } from "react-native";
 import { commonStyles } from "../constants/commonStyles";
 import { colors, invariantColors, radii, shadows, spacings, texts, } from "../constants/design";
 import { useDisclosure } from "../hooks/useDisclosure";
@@ -9,6 +9,7 @@ import { getFocusableElements } from "../utils/a11y";
 import { isNotNullish, isNullishOrEmpty } from "../utils/nullish";
 import { Box } from "./Box";
 import { Fill } from "./Fill";
+import { FlatList } from "./FlatList";
 import { Icon } from "./Icon";
 import { LakeText } from "./LakeText";
 import { LakeTooltip } from "./LakeTooltip";

package/src/components/MultiSelect.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Array, Dict, Option } from "@swan-io/boxed";
 import { memo, useEffect, useMemo, useRef, useState } from "react";
-import { FlatList, Pressable, SectionList, StyleSheet, Text, TextInput, View, } from "react-native";
+import { Pressable, StyleSheet, Text, TextInput, View, } from "react-native";
 import { backgroundColor, colors, radii, shadows, texts } from "../constants/design";
 import { useBoolean } from "../hooks/useBoolean";
 import { useDisclosure } from "../hooks/useDisclosure";
@@ -9,10 +9,12 @@ import { groupBy } from "../utils/array";
 import { isNotNullish, isNotNullishOrEmpty } from "../utils/nullish";
 import { safeSplitAround } from "../utils/string";
 import { Box } from "./Box";
+import { FlatList } from "./FlatList";
 import { Icon } from "./Icon";
 import { InputError } from "./InputError";
 import { Popover } from "./Popover";
 import { PressableText } from "./Pressable";
+import { SectionList } from "./SectionList";
 import { Space } from "./Space";
 import { Tag } from "./Tag";
 const MAX_INPUT_HEIGHT = 120;
@@ -141,7 +143,6 @@ export const MultiSelect = memo(({ color = "gray", disabled = false, emptyResult
     const shouldScrollToBottomRef = useRef(false);
     const selectedTagListRef = useRef(null);
     const inputRef = useRef(null);
-    const listRef = useRef(null);
     const [visible, { open, close }] = useDisclosure(false);
     const tint50 = colors[color][50];
     const tint100 = colors[color][100];
@@ -198,11 +199,11 @@ export const MultiSelect = memo(({ color = "gray", disabled = false, emptyResult
                     (focused || visible) && styles.focused,
                     disabled && styles.disabled,
                     isNotNullish(error) && styles.errored,
-                ], children: [_jsx(Box, { ref: selectedTagListRef, alignItems: "center", direction: "row", style: styles.tagsList, children: selectedTags.length > 0 ? (selectedTags.map(item => (_jsx(Tag, { color: color, onPressRemove: disabled ? undefined : () => handleRemoveItem(item), style: styles.tag, children: item.label }, item.value)))) : placeholder !== "" ? (_jsx(Text, { role: "label", numberOfLines: 1, style: styles.placeholder, children: placeholder })) : null }), _jsxs(Box, { direction: "row", alignItems: "center", style: styles.actions, children: [selectedTags.length >= 1 && !disabled && (_jsxs(_Fragment, { children: [_jsx(Pressable, { role: "button", onPress: handleClearAll, children: _jsx(Icon, { name: "dismiss-filled", color: colors.gray.primary, size: 15 }) }), _jsx(Space, { width: 8 })] })), _jsx(Icon, { color: colors.gray.primary, name: visible ? "chevron-up-filled" : "chevron-down-filled", size: 20 })] })] }), _jsx(Popover, { role: "listbox", matchReferenceWidth: true, onDismiss: close, referenceRef: inputRef, returnFocus: true, visible: visible, children: _jsx(View, { style: styles.list, children: enableGroups ? (_jsx(SectionList, { role: "listbox", "aria-multiselectable": true, keyExtractor: (item, index) => `group-field-${item.value}-${index}`, extraData: filter, ListHeaderComponent: ListHeaderComponent, ListEmptyComponent: ListEmptyComponent, ListFooterComponent: _jsx(Space, { height: 16 }), sections: sections, renderSectionHeader: ({ section: { title, data }, }) => (_jsxs(Pressable, { role: "listitem", onPress: () => handleSelectGroup(data), style: ({ hovered, pressed, focused }) => [
+                ], children: [_jsx(Box, { ref: selectedTagListRef, alignItems: "center", direction: "row", style: styles.tagsList, children: selectedTags.length > 0 ? (selectedTags.map(item => (_jsx(Tag, { color: color, onPressRemove: disabled ? undefined : () => handleRemoveItem(item), style: styles.tag, children: item.label }, item.value)))) : placeholder !== "" ? (_jsx(Text, { role: "label", numberOfLines: 1, style: styles.placeholder, children: placeholder })) : null }), _jsxs(Box, { direction: "row", alignItems: "center", style: styles.actions, children: [selectedTags.length >= 1 && !disabled && (_jsxs(_Fragment, { children: [_jsx(Pressable, { role: "button", onPress: handleClearAll, children: _jsx(Icon, { name: "dismiss-filled", color: colors.gray.primary, size: 15 }) }), _jsx(Space, { width: 8 })] })), _jsx(Icon, { color: colors.gray.primary, name: visible ? "chevron-up-filled" : "chevron-down-filled", size: 20 })] })] }), _jsx(Popover, { role: "listbox", matchReferenceWidth: true, onDismiss: close, referenceRef: inputRef, returnFocus: true, visible: visible, children: _jsx(View, { style: styles.list, children: enableGroups ? (_jsx(SectionList, { role: "listbox", "aria-multiselectable": true, keyExtractor: (item, index) => `group-field-${item.value}-${index}`, ListHeaderComponent: ListHeaderComponent, ListEmptyComponent: ListEmptyComponent, ListFooterComponent: _jsx(Space, { height: 16 }), sections: sections, renderSectionHeader: ({ title, data }) => (_jsxs(Pressable, { role: "listitem", onPress: () => handleSelectGroup(data), style: ({ hovered, pressed, focused }) => [
                                 styles.groupTitleBase,
                                 (hovered || focused) && { backgroundColor: tint50 },
                                 pressed && { backgroundColor: tint100 },
-                            ], children: [_jsx(Text, { numberOfLines: 1, style: styles.groupTitle, children: title }), isNotNullish(renderTagGroup) && (_jsx(Tag, { color: color, children: renderTagGroup(data) }))] })), renderItem: ({ item }) => (_jsx(LineItem, { color: color, filter: filter, item: item, handleSelectItem: handleSelectItem, style: styles.lineInGroup })) })) : (_jsx(FlatList, { ref: listRef, role: "list", data: filteredItems, extraData: filter, keyExtractor: item => `field-${item.value}`, ListHeaderComponent: ListHeaderComponent, ListEmptyComponent: ListEmptyComponent, ListFooterComponent: _jsx(Space, { height: 8 }), renderItem: ({ item }) => (_jsx(LineItem, { color: color, filter: filter, item: item, handleSelectItem: handleSelectItem })) })) }) }), _jsx(InputError, { message: error })] }));
+                            ], children: [_jsx(Text, { numberOfLines: 1, style: styles.groupTitle, children: title }), isNotNullish(renderTagGroup) && (_jsx(Tag, { color: color, children: renderTagGroup(data) }))] })), renderItem: ({ item }) => (_jsx(LineItem, { color: color, filter: filter, item: item, handleSelectItem: handleSelectItem, style: styles.lineInGroup })) })) : (_jsx(FlatList, { role: "list", data: filteredItems, keyExtractor: item => `field-${item.value}`, ListHeaderComponent: ListHeaderComponent, ListEmptyComponent: ListEmptyComponent, ListFooterComponent: _jsx(Space, { height: 8 }), renderItem: ({ item }) => (_jsx(LineItem, { color: color, filter: filter, item: item, handleSelectItem: handleSelectItem })) })) }) }), _jsx(InputError, { message: error })] }));
 });
 const LineItem = ({ item, color, filter, handleSelectItem, style }) => {
     const { label, disabled = false } = item;

package/src/components/SectionList.d.ts

@@ -0,0 +1,33 @@
+import { ForwardedRef, ReactNode } from "react";
+import { ScrollView, ScrollViewProps, StyleProp, ViewStyle, WebRole } from "react-native";
+import { ListRenderItemInfo } from "./FlatList";
+export type SectionListRef = ScrollView;
+type Section<T> = {
+    title: string;
+    data: T[];
+};
+type Props<T> = {
+    ItemSeparatorComponent?: ReactNode;
+    ListEmptyComponent?: ReactNode;
+    ListFooterComponent?: ReactNode;
+    ListHeaderComponent?: ReactNode;
+    contentContainerStyle?: StyleProp<ViewStyle>;
+    horizontal?: boolean;
+    keyExtractor: (item: T, index: number) => string;
+    onEndReached?: () => void;
+    onEndReachedThresholdPx?: number;
+    onKeyDown?: ScrollViewProps["onKeyDown"];
+    onScroll?: ScrollViewProps["onScroll"];
+    renderItem: (info: ListRenderItemInfo<T>) => ReactNode;
+    renderSectionHeader?: (section: Section<T>) => ReactNode;
+    role?: WebRole;
+    scrollEventThrottle?: number;
+    sections: Section<T>[];
+    showsScrollIndicators?: boolean;
+    style?: StyleProp<ViewStyle>;
+};
+declare const SectionListWithRef: <T>({ ItemSeparatorComponent, ListEmptyComponent, ListFooterComponent, ListHeaderComponent, contentContainerStyle, horizontal, keyExtractor, onEndReached, onEndReachedThresholdPx, onKeyDown, onScroll, renderItem, renderSectionHeader, role, scrollEventThrottle, sections, showsScrollIndicators, style, }: Props<T>, forwardedRef: ForwardedRef<SectionListRef>) => import("react/jsx-runtime").JSX.Element;
+export declare const SectionList: <T>(props: Props<T> & {
+    ref?: ForwardedRef<SectionListRef>;
+}) => ReturnType<typeof SectionListWithRef>;
+export {};

package/src/components/SectionList.js

@@ -0,0 +1,35 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { Fragment, forwardRef, useEffect, useId, useRef } from "react";
+import { ScrollView, StyleSheet, View, } from "react-native";
+const styles = StyleSheet.create({
+    scrollTracker: {
+        position: "absolute",
+        pointerEvents: "none",
+        bottom: 0,
+        left: 0,
+        right: 0,
+    },
+});
+const SectionListWithRef = ({ ItemSeparatorComponent, ListEmptyComponent, ListFooterComponent, ListHeaderComponent, contentContainerStyle, horizontal = false, keyExtractor, onEndReached, onEndReachedThresholdPx = 200, onKeyDown, onScroll, renderItem, renderSectionHeader, role, scrollEventThrottle = 0, sections, showsScrollIndicators = true, style, }, forwardedRef) => {
+    const groupId = useId();
+    const scrollTrackerRef = useRef(null);
+    useEffect(() => {
+        const element = scrollTrackerRef.current;
+        if (element != null) {
+            const observer = new IntersectionObserver(entries => {
+                entries.forEach(entry => {
+                    if (entry.isIntersecting) {
+                        onEndReached === null || onEndReached === void 0 ? void 0 : onEndReached();
+                    }
+                });
+            });
+            observer.observe(element);
+            return () => {
+                observer.unobserve(element);
+            };
+        }
+        // re-create an observer only on list length change
+    }, [sections.length]); // eslint-disable-line react-hooks/exhaustive-deps
+    return (_jsxs(ScrollView, { contentContainerStyle: contentContainerStyle, horizontal: horizontal, onKeyDown: onKeyDown, onScroll: onScroll, ref: forwardedRef, role: role, scrollEventThrottle: scrollEventThrottle, showsHorizontalScrollIndicator: showsScrollIndicators, showsVerticalScrollIndicator: showsScrollIndicators, style: style, children: [ListHeaderComponent, sections.length > 0 ? (_jsxs(View, { children: [sections.map(section => (_jsxs(Fragment, { children: [renderSectionHeader === null || renderSectionHeader === void 0 ? void 0 : renderSectionHeader(section), section.data.map((item, index) => (_jsxs(Fragment, { children: [index !== 0 && ItemSeparatorComponent, renderItem({ item, index })] }, keyExtractor(item, index))))] }, `group-${groupId}-${section.title}`))), _jsx(View, { ref: scrollTrackerRef, style: [styles.scrollTracker, { height: onEndReachedThresholdPx }] })] })) : (ListEmptyComponent), ListFooterComponent] }));
+};
+export const SectionList = forwardRef(SectionListWithRef);