@onekeyfe/react-native-pager-view 6.7.0-1 → 6.7.0-3

package/lib/module/CollapsiblePagerViewNativeComponent.ts

@@ -59,7 +59,7 @@ export interface NativeProps extends ViewProps {
   nativeSmoothHeaderScrollEnabled?: WithDefault<boolean, false>;
   headerHeight?: Int32;
   stickyHeaderHeight?: Int32;
-  topScrollEdgeHard?: WithDefault<boolean, false>;
+  topScrollEdgeEffect?: WithDefault<"none" | "hard" | "soft", "none">;
   topOverlayColorScheme?: string;
   topOverlayHeight?: WithDefault<Double, 0>;
   externalTopOverlayTag?: WithDefault<Int32, 0>;

package/lib/module/NativeScroller.js

@@ -59,7 +59,7 @@ export const NativeScroller = /*#__PURE__*/React.forwardRef(function NativeScrol
     height: 0
   });
   const [topOverlayHeight, setTopOverlayHeight] = React.useState(0);
-  const hasTopOverlay = Platform.OS === "ios" && parseInt(String(Platform.Version), 10) >= 26 && topScrollEdgeEffect === "hard" && topOverlay != null;
+  const hasTopOverlay = Platform.OS === "ios" && parseInt(String(Platform.Version), 10) >= 26 && (topScrollEdgeEffect === "hard" || topScrollEdgeEffect === "soft") && topOverlay != null;
   const [refreshEpoch, requestRefreshSync] = React.useReducer(value => value + 1, 0);
   const contentSizeRef = React.useRef(contentSize);
   const scrolledSinceGrant = React.useRef(false);
@@ -114,7 +114,7 @@ export const NativeScroller = /*#__PURE__*/React.forwardRef(function NativeScrol
       contentInsetRight: contentInset?.right ?? 0,
       contentInsetBottom: contentInset?.bottom ?? 0,
       contentInsetLeft: contentInset?.left ?? 0,
-      topScrollEdgeHard: hasTopOverlay,
+      topScrollEdgeEffect: hasTopOverlay ? topScrollEdgeEffect : "none",
       topOverlayHeight: hasTopOverlay ? topOverlayHeight : 0,
       decelerationRate: rate,
       keyboardShouldPersistTaps: persistTaps,

package/lib/module/NativeScroller.web.js

@@ -6,20 +6,33 @@ import { jsx as _jsx } from "react/jsx-runtime";
 export const NativeScroller = /*#__PURE__*/React.forwardRef(function NativeScroller(inputProps, ref) {
   const {
     dataSet,
-    pagerScrollKey: _pagerScrollKey,
+    pagerScrollKey,
     topOverlay: _topOverlay,
     topScrollEdgeEffect: _topScrollEdgeEffect,
     ...props
   } = inputProps;
+  const scrollRef = React.useRef(null);
+  const setRef = React.useCallback(node => {
+    scrollRef.current = node;
+    if (typeof ref === "function") ref(node);else if (ref) ref.current = node;
+  }, [ref]);
+  React.useLayoutEffect(() => {
+    const element = scrollRef.current?.getScrollableNode();
+    const EventConstructor = element?.ownerDocument?.defaultView?.Event;
+    if (EventConstructor) element.dispatchEvent(new EventConstructor("ok-collapsible-pager-scroll-key-changed", {
+      bubbles: true
+    }));
+  }, [pagerScrollKey]);
   const webDataProps = {
     dataSet: {
       ...dataSet,
-      collapsiblePagerScroll: "true"
+      collapsiblePagerScroll: "true",
+      collapsiblePagerScrollKey: pagerScrollKey ?? ""
     }
   };
   return /*#__PURE__*/_jsx(ScrollView, {
     ...props,
-    ref: ref,
+    ref: setRef,
     ...webDataProps
   });
 });

package/lib/module/NativeScrollerNativeComponent.ts

@@ -47,7 +47,7 @@ export interface NativeProps extends ViewProps {
   contentInsetRight?: WithDefault<Double, 0>;
   contentInsetBottom?: WithDefault<Double, 0>;
   contentInsetLeft?: WithDefault<Double, 0>;
-  topScrollEdgeHard?: WithDefault<boolean, false>;
+  topScrollEdgeEffect?: WithDefault<"none" | "hard" | "soft", "none">;
   topOverlayHeight?: WithDefault<Double, 0>;
   refreshEnabled?: WithDefault<boolean, false>;
   refreshing?: WithDefault<boolean, false>;

package/lib/module/ScrollEdgeEffect.js

@@ -0,0 +1,8 @@
+"use strict";
+
+export let ScrollEdgeEffect = /*#__PURE__*/function (ScrollEdgeEffect) {
+  ScrollEdgeEffect["Hard"] = "hard";
+  ScrollEdgeEffect["Soft"] = "soft";
+  return ScrollEdgeEffect;
+}({});
+//# sourceMappingURL=ScrollEdgeEffect.js.map

package/lib/module/WebCollapsiblePagerPage.js

@@ -0,0 +1,182 @@
+"use strict";
+
+import React from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
+const PageContext = /*#__PURE__*/React.createContext(null);
+export function useWebCollapsiblePagerPage() {
+  return React.useContext(PageContext);
+}
+export function WebCollapsiblePagerPage({
+  children,
+  pageKey,
+  isFocused,
+  isRouteActive,
+  headerHeight,
+  stickyHeaderHeight,
+  onBridge,
+  onGeometryChange,
+  onScroll,
+  onUserInput
+}) {
+  const [owner, setOwner] = React.useState(null);
+  const ownerRef = React.useRef(null);
+  const [registered, setRegistered] = React.useState(null);
+  const registeredRef = React.useRef(registered);
+  const observerRef = React.useRef(null);
+  const observedContentRef = React.useRef(null);
+  const frameRef = React.useRef(null);
+  const disposedRef = React.useRef(false);
+  const [pendingRouteScrollTop, setPendingRouteScrollTop] = React.useState(null);
+  const [metrics, setMetrics] = React.useState({
+    width: 0,
+    height: 0,
+    scrollTop: 0
+  });
+  const inputsRef = React.useRef({
+    pageKey,
+    headerHeight,
+    stickyHeaderHeight,
+    onGeometryChange,
+    onScroll,
+    onUserInput
+  });
+  inputsRef.current = {
+    pageKey,
+    headerHeight,
+    stickyHeaderHeight,
+    onGeometryChange,
+    onScroll,
+    onUserInput
+  };
+  const measure = React.useCallback(() => {
+    frameRef.current = null;
+    if (disposedRef.current) return;
+    const current = ownerRef.current;
+    if (!current?.isConnected) return;
+    const ownerRect = current.getBoundingClientRect();
+    const candidate = registeredRef.current?.element;
+    const content = candidate?.isConnected && current.contains(candidate) ? candidate : null;
+    const contentRect = (content ?? current.firstElementChild)?.getBoundingClientRect();
+    const inputs = inputsRef.current;
+    const pinnedBottom = ownerRect.top + Math.max(0, inputs.headerHeight - current.scrollTop) + inputs.stickyHeaderHeight;
+    const visibleTop = Math.max(ownerRect.top, pinnedBottom, contentRect?.top ?? 0);
+    const next = {
+      width: current.clientWidth,
+      height: Math.max(0, ownerRect.bottom - visibleTop),
+      scrollTop: Math.max(0, pinnedBottom - (contentRect?.top ?? pinnedBottom))
+    };
+    setMetrics(previous => previous.width === next.width && previous.height === next.height && previous.scrollTop === next.scrollTop ? previous : next);
+    inputs.onGeometryChange(inputs.pageKey);
+  }, []);
+  const requestMeasure = React.useCallback(() => {
+    if (!disposedRef.current && frameRef.current === null) frameRef.current = requestAnimationFrame(measure);
+  }, [measure]);
+  const syncContentObservation = React.useCallback(() => {
+    const observer = observerRef.current;
+    const current = ownerRef.current;
+    if (!observer || !current) return;
+    const candidate = registeredRef.current?.element;
+    const content = candidate?.isConnected && current.contains(candidate) ? candidate : current.firstElementChild;
+    const next = typeof HTMLElement !== "undefined" && content instanceof HTMLElement ? content : null;
+    if (observedContentRef.current === next) return;
+    if (observedContentRef.current) observer.unobserve(observedContentRef.current);
+    observedContentRef.current = next;
+    if (next) observer.observe(next);
+  }, []);
+  const registerContent = React.useCallback((element, height) => {
+    const entry = {
+      element,
+      height: height !== undefined && Number.isFinite(height) && height >= 0 ? height : undefined
+    };
+    registeredRef.current = entry;
+    setRegistered(entry);
+    syncContentObservation();
+    requestMeasure();
+    return () => {
+      if (registeredRef.current !== entry) return;
+      registeredRef.current = null;
+      setRegistered(null);
+      syncContentObservation();
+      requestMeasure();
+    };
+  }, [requestMeasure, syncContentObservation]);
+  const bridge = React.useMemo(() => ({
+    setOwner: next => {
+      if (ownerRef.current === next) return;
+      ownerRef.current = next;
+      setOwner(next);
+      requestMeasure();
+    },
+    requestMeasure,
+    setPendingRouteScrollTop
+  }), [requestMeasure]);
+  React.useLayoutEffect(() => {
+    disposedRef.current = false;
+    return () => {
+      disposedRef.current = true;
+      if (frameRef.current !== null) cancelAnimationFrame(frameRef.current);
+      frameRef.current = null;
+    };
+  }, []);
+  React.useLayoutEffect(() => {
+    onBridge(pageKey, bridge);
+    return () => onBridge(pageKey, null);
+  }, [bridge, onBridge, pageKey]);
+  React.useLayoutEffect(() => {
+    if (!owner) return undefined;
+    const observer = new ResizeObserver(requestMeasure);
+    observerRef.current = observer;
+    observer.observe(owner);
+    syncContentObservation();
+    const handleScroll = () => {
+      if (ownerRef.current !== owner) return;
+      const inputs = inputsRef.current;
+      inputs.onScroll(inputs.pageKey, owner.scrollTop);
+      requestMeasure();
+    };
+    const handleKey = event => {
+      if (["ArrowUp", "ArrowDown", "PageUp", "PageDown", "Home", "End", " "].includes(event.key)) inputsRef.current.onUserInput(inputsRef.current.pageKey);
+    };
+    const handleUserInput = () => inputsRef.current.onUserInput(inputsRef.current.pageKey);
+    owner.addEventListener("scroll", handleScroll, {
+      passive: true
+    });
+    owner.addEventListener("touchstart", handleUserInput, {
+      passive: true
+    });
+    owner.addEventListener("pointerdown", handleUserInput);
+    owner.addEventListener("keydown", handleKey);
+    owner.addEventListener("ok-collapsible-pager-user-scroll", handleUserInput);
+    owner.addEventListener("ok-collapsible-pager-insets-changed", requestMeasure);
+    requestMeasure();
+    return () => {
+      observer.disconnect();
+      observerRef.current = null;
+      observedContentRef.current = null;
+      owner.removeEventListener("scroll", handleScroll);
+      owner.removeEventListener("touchstart", handleUserInput);
+      owner.removeEventListener("pointerdown", handleUserInput);
+      owner.removeEventListener("keydown", handleKey);
+      owner.removeEventListener("ok-collapsible-pager-user-scroll", handleUserInput);
+      owner.removeEventListener("ok-collapsible-pager-insets-changed", requestMeasure);
+      if (frameRef.current !== null) cancelAnimationFrame(frameRef.current);
+      frameRef.current = null;
+    };
+  }, [owner, requestMeasure, syncContentObservation]);
+  React.useLayoutEffect(requestMeasure, [isFocused, isRouteActive, headerHeight, stickyHeaderHeight, requestMeasure]);
+  const value = React.useMemo(() => ({
+    isFocused,
+    isRouteActive,
+    owner,
+    content: registered?.element.isConnected && owner?.contains(registered.element) ? registered.element : null,
+    contentHeight: registered?.height,
+    ...metrics,
+    pendingRouteScrollTop,
+    registerContent
+  }), [isFocused, isRouteActive, owner, registered, metrics, pendingRouteScrollTop, registerContent]);
+  return /*#__PURE__*/_jsx(PageContext.Provider, {
+    value: value,
+    children: children
+  });
+}
+//# sourceMappingURL=WebCollapsiblePagerPage.js.map

package/lib/module/index.js

@@ -5,4 +5,7 @@ export default PagerView;
 export * from "./usePagerView.js";
 export * from './CollapsiblePagerView';
 export * from './NativeScroller';
+export { CollapsiblePagerView as WebCollapsiblePagerView } from "./CollapsiblePagerView.web.js";
+export { useWebCollapsiblePagerPage } from "./WebCollapsiblePagerPage.js";
+export { ScrollEdgeEffect } from "./ScrollEdgeEffect.js";
 //# sourceMappingURL=index.js.map

package/lib/module/index.web.js

@@ -4,4 +4,7 @@ export { PagerView as default, PagerView } from "./PagerView.web.js";
 export * from "./usePagerView.js";
 export * from "./CollapsiblePagerView.web.js";
 export * from "./NativeScroller.web.js";
+export { CollapsiblePagerView as WebCollapsiblePagerView } from "./CollapsiblePagerView.web.js";
+export { useWebCollapsiblePagerPage } from "./WebCollapsiblePagerPage.js";
+export { ScrollEdgeEffect } from "./ScrollEdgeEffect.js";
 //# sourceMappingURL=index.web.js.map

package/lib/typescript/src/CollapsiblePagerView.d.ts

@@ -1,3 +1,4 @@
+import type { ScrollEdgeEffect } from "./ScrollEdgeEffect";
 import React from "react";
 import type * as ReactNative from "react-native";
 import { type NativeProps, type OnCollapsibleStateChangedEventData, type OnNativeTabPressEventData } from "./CollapsiblePagerViewNativeComponent";
@@ -55,7 +56,7 @@ export type CollapsiblePagerNativeSubHeaderConfig = Readonly<{
 }>;
 export type CollapsiblePagerViewOnNativeTabPressEvent = ReactNative.NativeSyntheticEvent<OnNativeTabPressEventData>;
 export type CollapsiblePagerViewOnNativeSubHeaderPressEvent = ReactNative.NativeSyntheticEvent<OnNativeTabPressEventData>;
-export interface CollapsiblePagerViewProps extends Omit<NativeProps, "children" | "headerHeight" | "stickyHeaderHeight" | "topScrollEdgeHard" | "topOverlayHeight" | "externalTopOverlayTag" | "pageKeys" | "retainedPages" | "nativeTabBarItems" | "nativeTabBarHeight" | "nativeTabBarContentPaddingHorizontal" | "nativeTabBarItemSpacing" | "nativeTabBarFontSize" | "nativeTabBarFontFamily" | "nativeTabBarBackgroundColor" | "nativeTabBarActiveTextColor" | "nativeTabBarInactiveTextColor" | "nativeTabBarIndicatorColor" | "nativeTabBarIndicatorHeight" | "nativeTabBarIndicatorBottom" | "nativeSubHeaderConfig" | "nativeSubHeaderSelectedBackgroundColor" | "onNativeTabPress" | "onNativeSubHeaderPress" | "layoutDirection"> {
+export interface CollapsiblePagerViewProps extends Omit<NativeProps, "children" | "headerHeight" | "stickyHeaderHeight" | "topScrollEdgeEffect" | "topOverlayHeight" | "externalTopOverlayTag" | "pageKeys" | "retainedPages" | "nativeTabBarItems" | "nativeTabBarHeight" | "nativeTabBarContentPaddingHorizontal" | "nativeTabBarItemSpacing" | "nativeTabBarFontSize" | "nativeTabBarFontFamily" | "nativeTabBarBackgroundColor" | "nativeTabBarActiveTextColor" | "nativeTabBarInactiveTextColor" | "nativeTabBarIndicatorColor" | "nativeTabBarIndicatorHeight" | "nativeTabBarIndicatorBottom" | "nativeSubHeaderConfig" | "nativeSubHeaderSelectedBackgroundColor" | "onNativeTabPress" | "onNativeSubHeaderPress" | "layoutDirection"> {
     /** Collapsible content rendered above the sticky bar. */
     header: React.ReactNode;
     /** Bar which remains pinned after the header has collapsed. */
@@ -68,8 +69,8 @@ export interface CollapsiblePagerViewProps extends Omit<NativeProps, "children"
     topOverlay?: React.ReactNode;
     /** Existing fixed header shared with a parent pager on iOS 26 and newer. */
     externalTopOverlayTag?: number;
-    /** Enables UIKit's hard top scroll-edge effect on iOS 26 and newer. */
-    topScrollEdgeEffect?: "hard";
+    /** Selects UIKit's top scroll-edge effect on iOS 26 and newer. */
+    topScrollEdgeEffect?: `${ScrollEdgeEffect}`;
     /** Effective appearance of the fixed overlay or pinned sticky bar. */
     topOverlayColorScheme?: "light" | "dark";
     /**

package/lib/typescript/src/CollapsiblePagerView.web.d.ts

@@ -1,3 +1,4 @@
+import type { ScrollEdgeEffect } from "./ScrollEdgeEffect";
 import React from "react";
 import type * as ReactNative from "react-native";
 export type OnPageScrollEventData = Readonly<{
@@ -37,10 +38,11 @@ export type CollapsiblePagerMountState = Readonly<{
 export interface CollapsiblePagerViewProps extends Omit<WebCollapsiblePagerNativeProps, "children" | "headerHeight" | "stickyHeaderHeight" | "pageKeys" | "retainedPages" | "layoutDirection"> {
     header: React.ReactNode;
     stickyHeader: React.ReactNode;
-    headerHeight: number;
-    stickyHeaderHeight: number;
+    headerHeight?: number;
+    stickyHeaderHeight?: number;
+    isActive?: boolean;
     topOverlay?: React.ReactNode;
-    topScrollEdgeEffect?: "hard";
+    topScrollEdgeEffect?: `${ScrollEdgeEffect}`;
     topOverlayColorScheme?: "light" | "dark";
     externalTopOverlayTag?: number;
     pageRetentionDistance?: number;
@@ -52,16 +54,42 @@ type State = {
     selectedPage: number;
     animateTransition: boolean;
 };
+type WebRouteTarget = Readonly<{
+    key: string;
+    identity: string;
+    owner: HTMLElement;
+    generation: number;
+    top: number;
+}>;
 /** Web counterpart of the native collapsible pager contract. */
 export declare class CollapsiblePagerView extends React.PureComponent<CollapsiblePagerViewProps, State> {
     state: State;
     private root;
     private track;
+    private headerSlot;
+    private stickySlot;
+    private cssTimelineSupported;
+    private overlayTouch;
     private touchStartX;
     private touchStartY;
     private horizontalTouch;
     private pageOffsets;
     private pageHosts;
+    private pageScrollIdentities;
+    private pageBridges;
+    private ownerRecords;
+    private ownerGeneration;
+    private lastRawTops;
+    private routeTarget;
+    private measuredHeaderHeight;
+    private measuredStickyHeight;
+    private headerMeasured;
+    private stickyMeasured;
+    private headerContent;
+    private stickyContent;
+    private chromeObserver;
+    private chromeMeasureFrame;
+    private disposed;
     private sharedHeaderOffset;
     private selectionRestoreToken;
     private bodyAlignment;
@@ -73,9 +101,32 @@ export declare class CollapsiblePagerView extends React.PureComponent<Collapsibl
     private pageScrollState;
     private configuredScrollElement;
     private readonly timelineName;
+    private get headerHeight();
+    private get hasExplicitHeaderHeight();
+    private get stickyHeaderHeight();
+    private get hasExplicitStickyHeaderHeight();
+    getSnapshotBeforeUpdate(previousProps: CollapsiblePagerViewProps): Readonly<{
+        key: string;
+        identity: string;
+        owner: HTMLElement;
+        generation: number;
+        top: number;
+    }> | null;
     componentDidMount(): void;
-    componentDidUpdate(previousProps: CollapsiblePagerViewProps): void;
+    componentDidUpdate(previousProps: CollapsiblePagerViewProps, _previousState: State, routeSnapshot: WebRouteTarget | null): void;
     componentWillUnmount(): void;
+    private setHeaderContent;
+    private setStickyContent;
+    private observeChrome;
+    private scheduleChromeMeasurement;
+    private onPageBridge;
+    private setRouteTarget;
+    private syncPageOwner;
+    private captureRouteTarget;
+    restoreScrollPosition: () => boolean;
+    private onPageScroll;
+    private onPageGeometryChange;
+    private onPageUserInput;
     setPage: (selectedPage: number) => void;
     setPageWithoutAnimation: (selectedPage: number) => void;
     scrollToPageTop: (options?: Readonly<{
@@ -100,9 +151,20 @@ export declare class CollapsiblePagerView extends React.PureComponent<Collapsibl
     private onTrackTransitionEnd;
     private setTrack;
     private pageScrollElement;
+    private setRoot;
+    private overlayTarget;
+    private nestedScrollConsumes;
+    private scrollOverlayOwner;
+    private onOverlayWheel;
+    private onOverlayTouchStart;
+    private onOverlayTouchMove;
+    private onOverlayTouchEnd;
+    private synchronizeScrollOwnerIdentity;
+    private onScrollOwnerIdentityChanged;
     private notifyInsetsChanged;
     private restoreConfiguredScrollElement;
     private configureActiveScrollElement;
+    private syncFallbackHeader;
     private scheduleScrollConfiguration;
     private takeOverVerticalScroll;
     private onListScrollCommandAccepted;

package/lib/typescript/src/CollapsiblePagerViewNativeComponent.d.ts

@@ -42,7 +42,7 @@ export interface NativeProps extends ViewProps {
     nativeSmoothHeaderScrollEnabled?: WithDefault<boolean, false>;
     headerHeight?: Int32;
     stickyHeaderHeight?: Int32;
-    topScrollEdgeHard?: WithDefault<boolean, false>;
+    topScrollEdgeEffect?: WithDefault<"none" | "hard" | "soft", "none">;
     topOverlayColorScheme?: string;
     topOverlayHeight?: WithDefault<Double, 0>;
     externalTopOverlayTag?: WithDefault<Int32, 0>;

package/lib/typescript/src/NativeScroller.d.ts

@@ -1,14 +1,15 @@
 import * as React from "react";
 import { type NativeMethods, type RefreshControlProps, type ScrollView, type ScrollViewProps, type ViewProps } from "react-native";
 import NativeScrollerHost from "./NativeScrollerNativeComponent";
+import type { ScrollEdgeEffect } from "./ScrollEdgeEffect";
 export declare const NATIVE_SCROLLER_NATIVE_ID_PREFIX = "rnc-collapsible-pager-native-scroller";
 /** Supported vertical subset; horizontal, snapping, zoom and sticky rows are not supported. */
 export interface NativeScrollerProps extends ViewProps, Pick<ScrollViewProps, "contentContainerStyle" | "onContentSizeChange" | "scrollEnabled" | "nestedScrollEnabled" | "showsVerticalScrollIndicator" | "showsHorizontalScrollIndicator" | "bounces" | "alwaysBounceVertical" | "contentInset" | "keyboardDismissMode" | "keyboardShouldPersistTaps" | "scrollEventThrottle" | "decelerationRate" | "onScroll" | "onScrollBeginDrag" | "onScrollEndDrag" | "onMomentumScrollBegin" | "onMomentumScrollEnd"> {
     pagerScrollKey?: string;
     /** Fixed overlay above scrolling content on iOS 26 and newer. */
     topOverlay?: React.ReactNode;
-    /** Enables UIKit's hard top scroll-edge effect on iOS 26 and newer. */
-    topScrollEdgeEffect?: "hard";
+    /** Selects UIKit's top scroll-edge effect on iOS 26 and newer. */
+    topScrollEdgeEffect?: `${ScrollEdgeEffect}`;
     /** iOS only. Android retains AndroidX's native fling physics. */
     decelerationRate?: ScrollViewProps["decelerationRate"];
     /** Standard RefreshControl props are mapped to the independently owned native controller. */

package/lib/typescript/src/NativeScrollerNativeComponent.d.ts

@@ -47,7 +47,7 @@ export interface NativeProps extends ViewProps {
     contentInsetRight?: WithDefault<Double, 0>;
     contentInsetBottom?: WithDefault<Double, 0>;
     contentInsetLeft?: WithDefault<Double, 0>;
-    topScrollEdgeHard?: WithDefault<boolean, false>;
+    topScrollEdgeEffect?: WithDefault<"none" | "hard" | "soft", "none">;
     topOverlayHeight?: WithDefault<Double, 0>;
     refreshEnabled?: WithDefault<boolean, false>;
     refreshing?: WithDefault<boolean, false>;

package/lib/typescript/src/ScrollEdgeEffect.d.ts

@@ -0,0 +1,5 @@
+export declare enum ScrollEdgeEffect {
+    Hard = "hard",
+    Soft = "soft"
+}
+//# sourceMappingURL=ScrollEdgeEffect.d.ts.map

package/lib/typescript/src/WebCollapsiblePagerPage.d.ts

@@ -0,0 +1,42 @@
+import React from "react";
+export type WebCollapsiblePagerPageState = Readonly<{
+    isFocused: boolean;
+    isRouteActive: boolean;
+    owner: HTMLElement | null;
+    content: HTMLElement | null;
+    contentHeight?: number;
+    width: number;
+    height: number;
+    scrollTop: number;
+    pendingRouteScrollTop: number | null;
+    registerContent: (element: HTMLElement, explicitHeight?: number) => () => void;
+}>;
+export type WebCollapsiblePagerPageBridge = Readonly<{
+    setOwner: (owner: HTMLElement | null) => void;
+    requestMeasure: () => void;
+    setPendingRouteScrollTop: (top: number | null) => void;
+}>;
+export declare function useWebCollapsiblePagerPage(): Readonly<{
+    isFocused: boolean;
+    isRouteActive: boolean;
+    owner: HTMLElement | null;
+    content: HTMLElement | null;
+    contentHeight?: number;
+    width: number;
+    height: number;
+    scrollTop: number;
+    pendingRouteScrollTop: number | null;
+    registerContent: (element: HTMLElement, explicitHeight?: number) => () => void;
+}> | null;
+export declare function WebCollapsiblePagerPage({ children, pageKey, isFocused, isRouteActive, headerHeight, stickyHeaderHeight, onBridge, onGeometryChange, onScroll, onUserInput, }: React.PropsWithChildren<{
+    pageKey: string;
+    isFocused: boolean;
+    isRouteActive: boolean;
+    headerHeight: number;
+    stickyHeaderHeight: number;
+    onBridge: (key: string, bridge: WebCollapsiblePagerPageBridge | null) => void;
+    onGeometryChange: (key: string) => void;
+    onScroll: (key: string, top: number) => void;
+    onUserInput: (key: string) => void;
+}>): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=WebCollapsiblePagerPage.d.ts.map

package/lib/typescript/src/index.d.ts

@@ -4,9 +4,14 @@ export default PagerView;
 export * from './usePagerView';
 export * from './CollapsiblePagerView';
 export * from './NativeScroller';
+export { CollapsiblePagerView as WebCollapsiblePagerView } from './CollapsiblePagerView.web';
+export type { CollapsiblePagerViewProps as WebCollapsiblePagerViewProps } from './CollapsiblePagerView.web';
+export { useWebCollapsiblePagerPage } from './WebCollapsiblePagerPage';
+export type { WebCollapsiblePagerPageState } from './WebCollapsiblePagerPage';
 import type { OnPageScrollEventData as PagerViewOnPageScrollEventData, OnPageSelectedEventData as PagerViewOnPageSelectedEventData, OnPageScrollStateChangedEventData as PageScrollStateChangedNativeEventData, NativeProps } from './PagerViewNativeComponent';
 export type { PagerViewOnPageScrollEventData, PagerViewOnPageSelectedEventData, PageScrollStateChangedNativeEventData, NativeProps as PagerViewProps, };
 export type PagerViewOnPageScrollEvent = ReactNative.NativeSyntheticEvent<PagerViewOnPageScrollEventData>;
 export type PagerViewOnPageSelectedEvent = ReactNative.NativeSyntheticEvent<PagerViewOnPageSelectedEventData>;
 export type PageScrollStateChangedNativeEvent = ReactNative.NativeSyntheticEvent<PageScrollStateChangedNativeEventData>;
+export { ScrollEdgeEffect } from './ScrollEdgeEffect';
 //# sourceMappingURL=index.d.ts.map

package/lib/typescript/src/index.web.d.ts

@@ -3,4 +3,9 @@ export type { PagerViewProps, PagerViewOnPageScrollEvent, PagerViewOnPageScrollE
 export * from "./usePagerView";
 export * from "./CollapsiblePagerView.web";
 export * from "./NativeScroller.web";
+export { CollapsiblePagerView as WebCollapsiblePagerView } from "./CollapsiblePagerView.web";
+export type { CollapsiblePagerViewProps as WebCollapsiblePagerViewProps } from "./CollapsiblePagerView.web";
+export { useWebCollapsiblePagerPage } from "./WebCollapsiblePagerPage";
+export type { WebCollapsiblePagerPageState } from "./WebCollapsiblePagerPage";
+export { ScrollEdgeEffect } from "./ScrollEdgeEffect";
 //# sourceMappingURL=index.web.d.ts.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onekeyfe/react-native-pager-view",
-  "version": "6.7.0-1",
+  "version": "6.7.0-3",
   "description": "React Native wrapper for Android and iOS ViewPager",
   "source": "./src/index.tsx",
   "main": "./lib/module/index.js",
@@ -72,7 +72,7 @@
     "typescript": "^5.9.2"
   },
   "peerDependencies": {
-    "@onekeyfe/react-native-native-logger": "6.7.0-1",
+    "@onekeyfe/react-native-native-logger": "6.7.0-3",
     "react": "*",
     "react-native": "*"
   },

package/src/CollapsiblePagerView.tsx

@@ -1,3 +1,4 @@
+import type { ScrollEdgeEffect } from "./ScrollEdgeEffect";
 import React from "react";
 import { I18nManager, Platform, StyleSheet, View } from "react-native";
 import type * as ReactNative from "react-native";
@@ -86,7 +87,7 @@ export interface CollapsiblePagerViewProps
     | "children"
     | "headerHeight"
     | "stickyHeaderHeight"
-    | "topScrollEdgeHard"
+    | "topScrollEdgeEffect"
     | "topOverlayHeight"
     | "externalTopOverlayTag"
     | "pageKeys"
@@ -121,8 +122,8 @@ export interface CollapsiblePagerViewProps
   topOverlay?: React.ReactNode;
   /** Existing fixed header shared with a parent pager on iOS 26 and newer. */
   externalTopOverlayTag?: number;
-  /** Enables UIKit's hard top scroll-edge effect on iOS 26 and newer. */
-  topScrollEdgeEffect?: "hard";
+  /** Selects UIKit's top scroll-edge effect on iOS 26 and newer. */
+  topScrollEdgeEffect?: `${ScrollEdgeEffect}`;
   /** Effective appearance of the fixed overlay or pinned sticky bar. */
   topOverlayColorScheme?: "light" | "dark";
   /**
@@ -493,8 +494,10 @@ export class CollapsiblePagerView extends React.PureComponent<
     const pages = this.pages();
     const supportsTopScrollEdge =
       Platform.OS === "ios" && parseInt(String(Platform.Version), 10) >= 26;
-    const hardScrollEdge = supportsTopScrollEdge && topScrollEdgeEffect === "hard";
-    const hasTopOverlay = hardScrollEdge && topOverlay != null;
+    const scrollEdgeEnabled =
+      supportsTopScrollEdge &&
+      (topScrollEdgeEffect === "hard" || topScrollEdgeEffect === "soft");
+    const hasTopOverlay = scrollEdgeEnabled && topOverlay != null;
     const pageKeys = pages.map(pageKey);
     const retained = new Set(this.mountedPages(pages.length));
     const deducedLayoutDirection =
@@ -535,8 +538,10 @@ export class CollapsiblePagerView extends React.PureComponent<
         offscreenPageLimit={Math.max(1, offscreenPageLimit ?? 1)}
         headerHeight={Math.max(0, Math.round(headerHeight))}
         stickyHeaderHeight={Math.max(0, Math.round(stickyHeaderHeight))}
-        topScrollEdgeHard={hardScrollEdge}
-        topOverlayColorScheme={hardScrollEdge ? topOverlayColorScheme : undefined}
+        topScrollEdgeEffect={scrollEdgeEnabled ? topScrollEdgeEffect : "none"}
+        topOverlayColorScheme={
+          scrollEdgeEnabled ? topOverlayColorScheme : undefined
+        }
         topOverlayHeight={hasTopOverlay ? this.state.topOverlayHeight : 0}
         externalTopOverlayTag={
           supportsTopScrollEdge && !hasTopOverlay