@swan-io/lake 8.18.4 → 8.18.6

package/package.json

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

package/src/components/VirtualizedList.d.ts

@@ -38,14 +38,14 @@ export type VirtualizedListProps<T, ExtraInfo> = {
     onEndReached?: () => void;
     onEndReachedThreshold?: number;
     getRowLink?: (config: LinkConfig<T, ExtraInfo>) => ReactElement | undefined;
-    renderEmptyList?: () => ReactNode;
+    renderEmptyList: () => ReactNode;
     marginHorizontal?: string;
     loading?: {
         isLoading: boolean;
         count: number;
     };
 };
-export declare const VirtualizedList: <T, ExtraInfo>({ variant, data, stickedToStartColumns, columns, stickedToEndColumns, headerHeight, rowHeight, renderThreshold, onEndReached, onEndReachedThreshold, loading, extraInfo, keyExtractor, marginHorizontal, }: VirtualizedListProps<T, ExtraInfo>) => import("react/jsx-runtime").JSX.Element;
+export declare const VirtualizedList: <T, ExtraInfo>({ variant, data, stickedToStartColumns, columns, stickedToEndColumns, headerHeight, rowHeight, renderThreshold, onEndReached, onEndReachedThreshold, loading, extraInfo, keyExtractor, marginHorizontal, renderEmptyList, }: VirtualizedListProps<T, ExtraInfo>) => import("react/jsx-runtime").JSX.Element;
 type VirtualizedListPlaceholderProps = {
     count: number;
     rowHeight: number;

package/src/components/VirtualizedList.js

@@ -14,6 +14,13 @@ const styles = StyleSheet.create({
         height: 1,
         alignSelf: "stretch",
     },
+    emptyListContentContainer: {
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+        padding: spacings[48],
+        minHeight: "100%",
+    },
     headerRow: {
         position: "sticky",
         top: 0,
@@ -127,7 +134,7 @@ const styles = StyleSheet.create({
         alignItems: "center",
         justifyContent: "flex-start",
         flexGrow: 1,
-        paddingHorizontal: spacings[20],
+        paddingHorizontal: spacings[24],
     },
     loadingPlaceholder: {
         position: "absolute",
@@ -152,7 +159,7 @@ const styles = StyleSheet.create({
         width: "10%",
     },
 });
-export const VirtualizedList = ({ variant, data, stickedToStartColumns, columns, stickedToEndColumns, headerHeight, rowHeight, renderThreshold = 1000, onEndReached, onEndReachedThreshold = 200, loading, extraInfo, keyExtractor, marginHorizontal, }) => {
+export const VirtualizedList = ({ variant, data, stickedToStartColumns, columns, stickedToEndColumns, headerHeight, rowHeight, renderThreshold = 1000, onEndReached, onEndReachedThreshold = 200, loading, extraInfo, keyExtractor, marginHorizontal, renderEmptyList, }) => {
     // Used for unique IDs generation (usefull for header IDs and cells aria-describedBy pointing to them)
     const viewId = useId();
     const scrollViewRef = useRef(null);
@@ -225,7 +232,7 @@ export const VirtualizedList = ({ variant, data, stickedToStartColumns, columns,
                     ? "End"
                     : "Middle")
             .toUndefined());
-    }, [data, renderThreshold, rowHeight, stickedToStartColumnsWidth, stickedToEndColumnsWidth]);
+    }, [renderThreshold, rowHeight, stickedToStartColumnsWidth, stickedToEndColumnsWidth]);
     useLayoutEffect(() => {
         onLayoutUpdate();
     }, [onLayoutUpdate]);
@@ -354,6 +361,12 @@ export const VirtualizedList = ({ variant, data, stickedToStartColumns, columns,
                 },
             ] }));
     }, [stickedToEndColumnsWidth, horizontalScrollPosition]);
+    if (data.length === 0 &&
+        !Option.fromNullable(loading)
+            .map(({ isLoading }) => isLoading)
+            .getOr(false)) {
+        return (_jsx(ScrollView, { style: styles.container, contentContainerStyle: styles.emptyListContentContainer, children: renderEmptyList() }));
+    }
     return (_jsxs(ScrollView, { ref: scrollViewRef, both: true, style: [styles.container, { marginHorizontal }], onScroll: onScroll, scrollEventThrottle: 32, contentContainerStyle: {
             height: containerContainerHeight,
             width: contentContainerWidth,