@swan-io/lake 8.6.0 → 8.7.0

package/package.json

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

package/src/components/BottomPanel.js

@@ -1,12 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from "react";
-import { Pressable, ScrollView, StyleSheet, View } from "react-native";
+import { Pressable, StyleSheet, View } from "react-native";
 import { commonStyles } from "../constants/commonStyles";
 import { backgroundColor, radii, shadows } from "../constants/design";
 import { useBodyClassName } from "../hooks/useBodyClassName";
 import { FocusTrap } from "./FocusTrap";
 import { LoadingView } from "./LoadingView";
 import { Portal } from "./Portal";
+import { ScrollView } from "./ScrollView";
 import { Suspendable } from "./Suspendable";
 import { TransitionView } from "./TransitionView";
 const BACKGROUND_COLOR = "rgba(0, 0, 0, 0.6)";

package/src/components/FixedListView.js

@@ -35,7 +35,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  *
  */
 import { cloneElement, Fragment, memo, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState, } from "react";
-import { ScrollView, StyleSheet, View, } from "react-native";
+import { StyleSheet, View, } from "react-native";
 import { match } from "ts-pattern";
 import { v4 as uuid } from "uuid";
 import { backgroundColor, colors, invariantColors, radii, shadows, spacings, } from "../constants/design";
@@ -48,6 +48,7 @@ import { BorderedIcon } from "./BorderedIcon";
 import { Icon } from "./Icon";
 import { LakeHeading } from "./LakeHeading";
 import { LakeText } from "./LakeText";
+import { ScrollView } from "./ScrollView";
 import { Space } from "./Space";
 const HORIZONTAL_SAFE_AREA = 10;
 export const SCROLLBAR_RESERVED_SPACE = 20;

package/src/components/FlatList.d.ts

@@ -1,6 +1,7 @@
 import { ForwardedRef, ReactNode } from "react";
-import { ScrollView, ScrollViewProps, StyleProp, ViewStyle, WebRole } from "react-native";
-export type FlatListRef = ScrollView;
+import { StyleProp, ViewStyle, WebRole } from "react-native";
+import { ScrollViewProps, ScrollViewRef } from "./ScrollView";
+export type FlatListRef = ScrollViewRef;
 export type ListRenderItemInfo<T> = {
     item: T;
     index: number;

package/src/components/FlatList.js

@@ -1,17 +1,20 @@
 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";
+import { StyleSheet, View } from "react-native";
+import { ScrollView } from "./ScrollView";
 const styles = StyleSheet.create({
     scrollTracker: {
         position: "absolute",
         pointerEvents: "none",
-        left: 0,
-        bottom: 0,
         right: 0,
+        bottom: 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 FlatListWithRef = ({ ItemSeparatorComponent, ListEmptyComponent, ListFooterComponent, ListHeaderComponent, contentContainerStyle, data, horizontal = false, keyExtractor, onEndReached, onEndReachedThresholdPx = 200, onKeyDown, onScroll, renderItem, role, scrollEventThrottle = 16, showsScrollIndicators = true, style, }, forwardedRef) => {
     const scrollTrackerRef = useRef(null);
+    const scrollTrackerStyle = horizontal
+        ? { top: 0, width: onEndReachedThresholdPx }
+        : { left: 0, height: onEndReachedThresholdPx };
     useEffect(() => {
         const element = scrollTrackerRef.current;
         if (element != null) {
@@ -29,6 +32,8 @@ const FlatListWithRef = ({ ItemSeparatorComponent, ListEmptyComponent, ListFoote
         }
         // 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] }));
+    return (_jsxs(ScrollView, { contentContainerStyle: contentContainerStyle, horizontal: horizontal, onKeyDown: onKeyDown, onScroll: onScroll, ref: forwardedRef, role: role, scrollEventThrottle: scrollEventThrottle, showsScrollIndicators: showsScrollIndicators, style: style, children: [ListHeaderComponent, data.length <= 0
+                ? ListEmptyComponent
+                : data.map((item, index) => (_jsxs(Fragment, { children: [index !== 0 && ItemSeparatorComponent, renderItem({ item, index })] }, keyExtractor(item, index)))), ListFooterComponent, _jsx(View, { role: "none", ref: scrollTrackerRef, style: [styles.scrollTracker, scrollTrackerStyle] })] }));
 };
 export const FlatList = forwardRef(FlatListWithRef);

package/src/components/Form.d.ts

@@ -14,6 +14,7 @@ export declare const Form: import("react").MemoExoticComponent<import("react").F
     onKeyDownCapture?: ((event: NativeSyntheticEvent<import("react").KeyboardEvent<Element>>) => void) | undefined;
     onKeyUp?: ((event: NativeSyntheticEvent<import("react").KeyboardEvent<Element>>) => void) | undefined;
     onKeyUpCapture?: ((event: NativeSyntheticEvent<import("react").KeyboardEvent<Element>>) => void) | undefined;
+    onScroll?: ((event: NativeSyntheticEvent<import("react").UIEvent<Element, UIEvent>>) => void) | undefined;
     collapsable?: boolean | undefined;
     needsOffscreenAlphaCompositing?: boolean | undefined;
     renderToHardwareTextureAndroid?: boolean | undefined;

package/src/components/LakeScrollView.js

@@ -1,7 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useState } from "react";
-import { ScrollView, StyleSheet, View, } from "react-native";
+import { StyleSheet, View } from "react-native";
 import { backgroundColor } from "../constants/design";
+import { ScrollView } from "./ScrollView";
 const HORIZONTAL_SAFE_AREA = 20;
 const styles = StyleSheet.create({
     root: {

package/src/components/PlainListView.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { cloneElement, Fragment, useCallback, useEffect, useId, useMemo, useRef, useState, } from "react";
-import { ScrollView, StyleSheet, View } from "react-native";
+import { StyleSheet, View } from "react-native";
 import { commonStyles } from "../constants/commonStyles";
 import { backgroundColor, breakpoints, colors, spacings } from "../constants/design";
 import { useHover } from "../hooks/useHover";
@@ -8,6 +8,7 @@ import { isNotNullish, isNullish } from "../utils/nullish";
 import { PlainListViewPlaceholder, } from "./FixedListView";
 import { LakeHeading } from "./LakeHeading";
 import { ResponsiveContainer } from "./ResponsiveContainer";
+import { ScrollView } from "./ScrollView";
 const INHERIT = "inherit";
 const styles = StyleSheet.create({
     root: {

package/src/components/Popover.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { memo, useCallback, useEffect, useRef, useState } from "react";
-import { Pressable, ScrollView, StyleSheet, View, } from "react-native";
+import { Pressable, StyleSheet, View, } from "react-native";
 import { match, P } from "ts-pattern";
 import { animations, backgroundColor, radii, shadows, spacings, } from "../constants/design";
 import { useContextualLayer } from "../hooks/useContextualLayer";
@@ -9,6 +9,7 @@ import { noop } from "../utils/function";
 import { BottomPanel } from "./BottomPanel";
 import { FocusTrap } from "./FocusTrap";
 import { Portal } from "./Portal";
+import { ScrollView } from "./ScrollView";
 import { TransitionView } from "./TransitionView";
 const styles = StyleSheet.create({
     container: {

package/src/components/ScrollView.d.ts

@@ -0,0 +1,23 @@
+/// <reference types="react" />
+import { NativeScrollEvent, NativeSyntheticEvent, StyleProp, ViewProps, ViewStyle } from "react-native";
+export type ScrollViewRef = {
+    scrollTo: (event: {
+        x?: number;
+        y?: number;
+        animated?: boolean;
+    }) => void;
+};
+export type ScrollViewProps = ViewProps & {
+    contentContainerStyle?: StyleProp<ViewStyle>;
+    horizontal?: boolean;
+    onScroll?: (event: NativeSyntheticEvent<NativeScrollEvent>) => void;
+    scrollEventThrottle?: number;
+    showsScrollIndicators?: boolean;
+};
+export declare const ScrollView: import("react").ForwardRefExoticComponent<ViewProps & {
+    contentContainerStyle?: StyleProp<ViewStyle>;
+    horizontal?: boolean | undefined;
+    onScroll?: ((event: NativeSyntheticEvent<NativeScrollEvent>) => void) | undefined;
+    scrollEventThrottle?: number | undefined;
+    showsScrollIndicators?: boolean | undefined;
+} & import("react").RefAttributes<ScrollViewRef>>;

package/src/components/ScrollView.js

@@ -0,0 +1,99 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useCallback, useImperativeHandle, useRef, } from "react";
+import { StyleSheet, View, } from "react-native";
+import { useMergeRefs } from "../hooks/useMergeRefs";
+const styles = StyleSheet.create({
+    base: {
+        WebkitOverflowScrolling: "touch",
+        flexDirection: "column",
+        flexGrow: 1,
+        flexShrink: 1,
+        overflowX: "hidden",
+        overflowY: "auto",
+        transform: "translateZ(0)",
+    },
+    horizontal: {
+        flexDirection: "row",
+        overflowX: "auto",
+        overflowY: "hidden",
+    },
+    contentHorizontal: {
+        flexDirection: "row",
+    },
+    hideScrollbars: {
+        scrollbarWidth: "none",
+    },
+});
+const normalizeScrollEvent = (event) => {
+    const target = event.target;
+    const contentOffset = {
+        get x() {
+            return target.scrollLeft;
+        },
+        get y() {
+            return target.scrollTop;
+        },
+    };
+    const contentSize = {
+        get height() {
+            return target.scrollHeight;
+        },
+        get width() {
+            return target.scrollWidth;
+        },
+    };
+    const layoutMeasurement = {
+        get height() {
+            return target.offsetHeight;
+        },
+        get width() {
+            return target.offsetWidth;
+        },
+    };
+    return {
+        nativeEvent: { contentOffset, contentSize, layoutMeasurement },
+        timeStamp: Date.now(),
+    };
+};
+const shouldEmitScrollEvent = (state, eventThrottle) => !state.scrolling || (eventThrottle > 0 && Date.now() - state.lastTick >= eventThrottle);
+export const ScrollView = forwardRef(({ children, contentContainerStyle, horizontal = false, onScroll, scrollEventThrottle = 16, showsScrollIndicators = true, style, ...viewProps }, forwardedRef) => {
+    const innerRef = useRef(null);
+    const stateRef = useRef({ lastTick: 0, scrolling: false });
+    const timeoutRef = useRef(null);
+    const mergedRef = useMergeRefs(innerRef, forwardedRef);
+    const handleOnScroll = useCallback((event) => {
+        event.stopPropagation();
+        // A scroll happened, so the scroll resets the scrollend timeout.
+        if (timeoutRef.current != null) {
+            clearTimeout(timeoutRef.current);
+        }
+        timeoutRef.current = setTimeout(() => {
+            stateRef.current.scrolling = false;
+            onScroll === null || onScroll === void 0 ? void 0 : onScroll(normalizeScrollEvent(event));
+        }, 100);
+        if (shouldEmitScrollEvent(stateRef.current, scrollEventThrottle)) {
+            stateRef.current.scrolling = true;
+            stateRef.current.lastTick = Date.now();
+            onScroll === null || onScroll === void 0 ? void 0 : onScroll(normalizeScrollEvent(event));
+        }
+    }, [onScroll, scrollEventThrottle]);
+    const scrollTo = useCallback(({ x = 0, y = 0, animated = true }) => {
+        const element = innerRef.current;
+        if (element != null) {
+            if (typeof element.scroll === "function") {
+                element.scroll({ top: y, left: x, behavior: !animated ? "auto" : "smooth" });
+            }
+            else {
+                element.scrollTop = y;
+                element.scrollLeft = x;
+            }
+        }
+    }, []);
+    useImperativeHandle(innerRef, () => ({ scrollTo }));
+    return (_jsx(View, { ...viewProps, ref: mergedRef, onScroll: handleOnScroll, style: [
+            styles.base,
+            style,
+            horizontal && styles.horizontal,
+            !showsScrollIndicators && styles.hideScrollbars,
+        ], children: _jsx(View, { style: [horizontal && styles.contentHorizontal, contentContainerStyle], children: children }) }));
+});

package/src/components/SectionList.d.ts

@@ -1,7 +1,8 @@
 import { ForwardedRef, ReactNode } from "react";
-import { ScrollView, ScrollViewProps, StyleProp, ViewStyle, WebRole } from "react-native";
+import { StyleProp, ViewStyle, WebRole } from "react-native";
 import { ListRenderItemInfo } from "./FlatList";
-export type SectionListRef = ScrollView;
+import { ScrollViewProps, ScrollViewRef } from "./ScrollView";
+export type SectionListRef = ScrollViewRef;
 type Section<T> = {
     title: string;
     data: T[];

package/src/components/SectionList.js

@@ -1,18 +1,21 @@
 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";
+import { StyleSheet, View } from "react-native";
+import { ScrollView } from "./ScrollView";
 const styles = StyleSheet.create({
     scrollTracker: {
         position: "absolute",
         pointerEvents: "none",
-        bottom: 0,
-        left: 0,
         right: 0,
+        bottom: 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 SectionListWithRef = ({ ItemSeparatorComponent, ListEmptyComponent, ListFooterComponent, ListHeaderComponent, contentContainerStyle, horizontal = false, keyExtractor, onEndReached, onEndReachedThresholdPx = 200, onKeyDown, onScroll, renderItem, renderSectionHeader, role, scrollEventThrottle = 16, sections, showsScrollIndicators = true, style, }, forwardedRef) => {
     const groupId = useId();
     const scrollTrackerRef = useRef(null);
+    const scrollTrackerStyle = horizontal
+        ? { top: 0, width: onEndReachedThresholdPx }
+        : { left: 0, height: onEndReachedThresholdPx };
     useEffect(() => {
         const element = scrollTrackerRef.current;
         if (element != null) {
@@ -30,6 +33,8 @@ const SectionListWithRef = ({ ItemSeparatorComponent, ListEmptyComponent, ListFo
         }
         // 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] }));
+    return (_jsxs(ScrollView, { contentContainerStyle: contentContainerStyle, horizontal: horizontal, onKeyDown: onKeyDown, onScroll: onScroll, ref: forwardedRef, role: role, scrollEventThrottle: scrollEventThrottle, showsScrollIndicators: showsScrollIndicators, style: style, children: [ListHeaderComponent, sections.length <= 0
+                ? ListEmptyComponent
+                : 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}`))), ListFooterComponent, _jsx(View, { role: "none", ref: scrollTrackerRef, style: [styles.scrollTracker, scrollTrackerStyle] })] }));
 };
 export const SectionList = forwardRef(SectionListWithRef);

package/src/components/SidebarNavigationTracker.d.ts

@@ -1,4 +1,4 @@
-import { ScrollViewProps } from "react-native";
+import { ScrollViewProps } from "./ScrollView";
 type Props = {
     style?: ScrollViewProps["style"];
     contentContainerStyle?: ScrollViewProps["style"];

package/src/components/SidebarNavigationTracker.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { createContext, useCallback, useContext, useEffect, useRef, useState } from "react";
-import { ScrollView, StyleSheet, View } from "react-native";
+import { StyleSheet, View } from "react-native";
+import { ScrollView } from "./ScrollView";
 const styles = StyleSheet.create({
     track: {
         position: "absolute",