@onekeyfe/react-native-pager-view 6.7.0-2 → 6.7.0-21

package/lib/module/CollapsiblePagerView.web.js

@@ -1,7 +1,8 @@
 "use strict";
 
 import React from "react";
-import { I18nManager, StyleSheet, View } from "react-native";
+import { I18nManager, Platform, StyleSheet, View } from "react-native";
+import { WebCollapsiblePagerPage } from "./WebCollapsiblePagerPage.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const COLLAPSE_ANIMATION_NAME = "ok-collapsible-pager-collapse";
 const COLLAPSE_STYLE_ID = "ok-collapsible-pager-styles";
@@ -18,6 +19,11 @@ const webElement = node => {
   return element && typeof element.querySelector === "function" && typeof element.addEventListener === "function" ? element : null;
 };
 const timelineStyle = element => element.style;
+function scrollElementTo(element, options) {
+  // RN Web decorates ScrollView nodes with a React Native scrollTo signature.
+  const scrollTo = element.ownerDocument.defaultView?.Element.prototype.scrollTo ?? element.scrollTo;
+  scrollTo.call(element, options);
+}
 function ensureCollapseAnimation(document) {
   if (document.getElementById(COLLAPSE_STYLE_ID)) return;
   const style = document.createElement("style");
@@ -25,6 +31,10 @@ function ensureCollapseAnimation(document) {
   style.textContent = `@keyframes ${COLLAPSE_ANIMATION_NAME}{from{transform:translateY(0)}to{transform:translateY(calc(-1 * var(--ok-collapsible-header-height)))}}`;
   document.head.appendChild(style);
 }
+function supportsScrollTimeline(document) {
+  const css = document.defaultView?.CSS;
+  return !!(typeof css?.supports === "function" && css.supports("animation-timeline", "--ok-test") && css.supports("timeline-scope", "--ok-test") && css.supports("scroll-timeline-name", "--ok-test") && css.supports("scroll-timeline-axis", "block") && css.supports("animation-range", "0px 1px") && css.supports("animation-duration", "auto"));
+}
 const pageKey = (child, index) => {
   if (/*#__PURE__*/React.isValidElement(child) && child.key != null) return String(child.key);
   return `page-${index}`;
@@ -38,11 +48,30 @@ export class CollapsiblePagerView extends React.PureComponent {
   };
   root = null;
   track = null;
+  headerSlot = null;
+  stickySlot = null;
+  cssTimelineSupported = false;
+  overlayTouch = null;
   touchStartX = null;
   touchStartY = null;
   horizontalTouch = false;
   pageOffsets = new Map();
   pageHosts = new Map();
+  pageScrollIdentities = new Map();
+  pageBridges = new Map();
+  ownerRecords = new Map();
+  ownerGeneration = 0;
+  lastRawTops = new Map();
+  routeTarget = null;
+  measuredHeaderHeight = 0;
+  measuredStickyHeight = 0;
+  headerMeasured = false;
+  stickyMeasured = false;
+  headerContent = null;
+  stickyContent = null;
+  chromeObserver = null;
+  chromeMeasureFrame = null;
+  disposed = false;
   sharedHeaderOffset = 0;
   selectionRestoreToken = 0;
   bodyAlignment = null;
@@ -54,13 +83,51 @@ export class CollapsiblePagerView extends React.PureComponent {
   pageScrollState = "idle";
   configuredScrollElement = null;
   timelineName = `--ok-collapsible-pager-${++collapsiblePagerWebInstance}`;
+  get headerHeight() {
+    return this.hasExplicitHeaderHeight ? this.props.headerHeight ?? this.measuredHeaderHeight : this.measuredHeaderHeight;
+  }
+  get hasExplicitHeaderHeight() {
+    return this.props.headerHeight !== undefined && Number.isFinite(this.props.headerHeight) && this.props.headerHeight >= 0;
+  }
+  get stickyHeaderHeight() {
+    return this.hasExplicitStickyHeaderHeight ? this.props.stickyHeaderHeight ?? this.measuredStickyHeight : this.measuredStickyHeight;
+  }
+  get hasExplicitStickyHeaderHeight() {
+    return this.props.stickyHeaderHeight !== undefined && Number.isFinite(this.props.stickyHeaderHeight) && this.props.stickyHeaderHeight >= 0;
+  }
+  getSnapshotBeforeUpdate(previousProps) {
+    if (previousProps.isActive !== false && this.props.isActive === false) return this.captureRouteTarget(previousProps);
+    return null;
+  }
   componentDidMount() {
-    if (this.root) ensureCollapseAnimation(this.root.ownerDocument);
+    this.disposed = false;
+    if (Platform.OS !== "web" || typeof document === "undefined") throw new Error("WebCollapsiblePagerView requires a Web DOM runtime");
+    if (!this.hasExplicitHeaderHeight) this.headerMeasured = false;
+    if (!this.hasExplicitStickyHeaderHeight) this.stickyMeasured = false;
+    this.observeChrome();
+    if (this.root) {
+      this.cssTimelineSupported = supportsScrollTimeline(this.root.ownerDocument);
+      if (this.cssTimelineSupported) {
+        ensureCollapseAnimation(this.root.ownerDocument);
+        this.forceUpdate();
+      }
+    }
     this.scheduleScrollConfiguration();
+    this.syncFallbackHeader();
     this.notifyMountedPagesChanged();
     this.emitDiagnostics("mounted");
   }
-  componentDidUpdate(previousProps) {
+  componentDidUpdate(previousProps, _previousState, routeSnapshot) {
+    if (routeSnapshot) {
+      const record = this.ownerRecords.get(routeSnapshot.key);
+      if (this.pages().map(pageKey).includes(routeSnapshot.key) && record?.element === routeSnapshot.owner && record.identity === routeSnapshot.identity && record.generation === routeSnapshot.generation) this.setRouteTarget(routeSnapshot);
+    }
+    if (previousProps.isActive === false && this.props.isActive !== false) {
+      if (!this.hasExplicitHeaderHeight) this.headerMeasured = false;
+      if (!this.hasExplicitStickyHeaderHeight) this.stickyMeasured = false;
+      this.scheduleChromeMeasurement();
+      this.restoreScrollPosition();
+    }
     if (previousProps.scrollEnabled !== this.props.scrollEnabled) {
       this.scrollEnabled = this.props.scrollEnabled ?? true;
       if (!this.scrollEnabled) {
@@ -82,10 +149,29 @@ export class CollapsiblePagerView extends React.PureComponent {
       });
       return;
     }
+    // Child layout effects can run before page-host refs are reattached.
+    // Recheck identities in the same commit, before a new user command runs.
+    this.mountedPages().forEach(index => this.synchronizeScrollOwnerIdentity(index));
+    const currentKeys = new Set(this.pages().map(pageKey));
+    const ownedKeys = new Set([...this.pageScrollIdentities.keys(), ...this.pageOffsets.keys(), ...this.lastRawTops.keys(), ...this.ownerRecords.keys()]);
+    for (const key of ownedKeys) {
+      if (!currentKeys.has(key)) {
+        this.pageScrollIdentities.delete(key);
+        this.pageOffsets.delete(key);
+        this.lastRawTops.delete(key);
+        this.ownerRecords.delete(key);
+        if (this.routeTarget?.key === key) this.setRouteTarget(null);
+      }
+    }
     this.scheduleScrollConfiguration();
+    this.syncFallbackHeader();
     this.notifyMountedPagesChanged();
   }
   componentWillUnmount() {
+    // Activity can disconnect effects before the inactive update commits.
+    const routeTarget = this.captureRouteTarget(this.props);
+    if (routeTarget) this.setRouteTarget(routeTarget);
+    this.disposed = true;
     this.selectionRestoreToken += 1;
     this.cancelPendingTopFrame();
     this.savePageOffset(this.state.selectedPage);
@@ -98,8 +184,148 @@ export class CollapsiblePagerView extends React.PureComponent {
       this.transitionTimer = null;
     }
     this.setTrack(null);
+    this.setRoot(null);
+    this.chromeObserver?.disconnect();
+    this.chromeObserver = null;
+    if (this.chromeMeasureFrame !== null) {
+      cancelAnimationFrame(this.chromeMeasureFrame);
+      this.chromeMeasureFrame = null;
+    }
+    this.pageBridges.clear();
     this.restoreConfiguredScrollElement();
   }
+  setHeaderContent = node => {
+    const element = webElement(node);
+    if (element === this.headerContent) return;
+    if (this.headerContent) this.chromeObserver?.unobserve(this.headerContent);
+    this.headerContent = element;
+    this.headerMeasured = false;
+    if (element) this.chromeObserver?.observe(element);
+    this.scheduleChromeMeasurement();
+  };
+  setStickyContent = node => {
+    const element = webElement(node);
+    if (element === this.stickyContent) return;
+    if (this.stickyContent) this.chromeObserver?.unobserve(this.stickyContent);
+    this.stickyContent = element;
+    this.stickyMeasured = false;
+    if (element) this.chromeObserver?.observe(element);
+    this.scheduleChromeMeasurement();
+  };
+  observeChrome() {
+    this.chromeObserver = new ResizeObserver(this.scheduleChromeMeasurement);
+    if (this.headerContent) this.chromeObserver.observe(this.headerContent);
+    if (this.stickyContent) this.chromeObserver.observe(this.stickyContent);
+    this.scheduleChromeMeasurement();
+  }
+  scheduleChromeMeasurement = () => {
+    if (this.disposed || this.chromeMeasureFrame !== null || typeof requestAnimationFrame !== "function") return;
+    this.chromeMeasureFrame = requestAnimationFrame(() => {
+      this.chromeMeasureFrame = null;
+      const header = this.headerContent;
+      const sticky = this.stickyContent;
+      const nextHeader = header?.isConnected ? Math.max(0, header.getBoundingClientRect().height) : 0;
+      const nextSticky = sticky?.isConnected ? Math.max(0, sticky.getBoundingClientRect().height) : 0;
+      const headerChanged = this.measuredHeaderHeight !== nextHeader || this.headerMeasured !== Boolean(header?.isConnected);
+      const stickyChanged = this.measuredStickyHeight !== nextSticky || this.stickyMeasured !== Boolean(sticky?.isConnected);
+      this.measuredHeaderHeight = nextHeader;
+      this.measuredStickyHeight = nextSticky;
+      this.headerMeasured = Boolean(header?.isConnected);
+      this.stickyMeasured = Boolean(sticky?.isConnected);
+      if (headerChanged || stickyChanged) {
+        this.forceUpdate();
+        this.scheduleScrollConfiguration();
+      }
+    });
+  };
+  onPageBridge = (key, bridge) => {
+    if (bridge) {
+      this.pageBridges.set(key, bridge);
+      bridge.setPendingRouteScrollTop(this.routeTarget?.key === key ? this.routeTarget.top : null);
+      const index = this.pages().map(pageKey).indexOf(key);
+      if (index >= 0) this.syncPageOwner(index);
+    } else {
+      this.pageBridges.delete(key);
+    }
+  };
+  setRouteTarget(target) {
+    const oldKey = this.routeTarget?.key;
+    this.routeTarget = target;
+    if (oldKey) this.pageBridges.get(oldKey)?.setPendingRouteScrollTop(null);
+    if (target) this.pageBridges.get(target.key)?.setPendingRouteScrollTop(target.top);
+  }
+  syncPageOwner(index) {
+    const key = this.pages().map(pageKey)[index];
+    const element = this.pageScrollElement(index);
+    if (!key || !element) return;
+    const identity = element.getAttribute("data-collapsible-pager-scroll-key") ?? key;
+    const previous = this.ownerRecords.get(key);
+    if (previous?.element !== element || previous.identity !== identity) {
+      if (this.routeTarget?.key === key) this.setRouteTarget(null);
+      this.ownerRecords.set(key, {
+        element,
+        identity,
+        generation: ++this.ownerGeneration
+      });
+      this.lastRawTops.delete(key);
+    }
+    this.pageBridges.get(key)?.setOwner(element);
+  }
+  captureRouteTarget(previousProps) {
+    const index = this.state.selectedPage;
+    const oldKey = React.Children.toArray(previousProps.children).map(pageKey)[index];
+    const key = this.configuredScrollElement?.key ?? oldKey;
+    const record = key ? this.ownerRecords.get(key) : null;
+    if (!record?.element.isConnected) return null;
+    if (this.routeTarget?.key === key && this.routeTarget.identity === record.identity && this.routeTarget.owner === record.element && this.routeTarget.generation === record.generation) return this.routeTarget;
+    const top = record.element.clientHeight > 0 ? record.element.scrollTop : this.lastRawTops.get(key) ?? record.element.scrollTop;
+    return {
+      key,
+      identity: record.identity,
+      owner: record.element,
+      generation: record.generation,
+      top: Math.max(0, top)
+    };
+  }
+  restoreScrollPosition = () => {
+    if (this.disposed || this.props.isActive === false) return false;
+    const pending = this.routeTarget;
+    if (!pending) return true;
+    const key = this.pages().map(pageKey)[this.state.selectedPage];
+    if (key !== pending.key) return false;
+    this.syncPageOwner(this.state.selectedPage);
+    const record = this.ownerRecords.get(key);
+    if (!record || record.element !== pending.owner || record.identity !== pending.identity || record.generation !== pending.generation) return false;
+    const element = record.element;
+    const configured = this.configuredScrollElement;
+    if (!element.isConnected || element.clientHeight <= 0 || configured?.element !== element || configured.key !== key || !this.hasExplicitHeaderHeight && !this.headerMeasured || !this.hasExplicitStickyHeaderHeight && !this.stickyMeasured || element.getAttribute("data-collapsible-pager-active") !== "true" || element.style.getPropertyValue(PAGER_HEADER_INSET).trim() !== `${this.headerHeight}px` || element.style.getPropertyValue(PAGER_STICKY_INSET).trim() !== `${this.stickyHeaderHeight}px` || element.scrollHeight - element.clientHeight < pending.top) return false;
+    this.selectionRestoreToken += 1;
+    this.cancelPendingTopFrame();
+    this.setRouteTarget(null);
+    this.lastRawTops.set(key, pending.top);
+    const D = this.headerHeight;
+    this.sharedHeaderOffset = Math.min(pending.top, D);
+    this.pageOffsets.set(key, Math.max(0, pending.top - D));
+    this.bodyAlignment = {
+      element,
+      key
+    };
+    scrollElementTo(element, {
+      top: pending.top,
+      behavior: "instant"
+    });
+    this.syncFallbackHeader();
+    return true;
+  };
+  onPageScroll = (key, top) => {
+    if (this.props.isActive !== false) this.lastRawTops.set(key, top);
+  };
+  onPageGeometryChange = key => {
+    if (this.routeTarget?.key === key) this.restoreScrollPosition();
+  };
+  onPageUserInput = key => {
+    if (this.routeTarget?.key === key) this.setRouteTarget(null);
+  };
   setPage = selectedPage => {
     this.selectPage(selectedPage, true);
   };
@@ -109,8 +335,17 @@ export class CollapsiblePagerView extends React.PureComponent {
   scrollToPageTop = options => {
     this.scrollCurrentPageToTop(0, options?.animated ?? true);
   };
+  scrollHeaderBy = delta => {
+    if (!Number.isFinite(delta)) return;
+    const offset = Math.min(this.headerHeight, Math.max(0, this.sharedHeaderOffset + delta));
+    this.scrollCurrentPageToTop(offset, false);
+  };
+  scrollHeaderToOffset = offset => {
+    if (!Number.isFinite(offset)) return;
+    this.scrollCurrentPageToTop(Math.min(this.headerHeight, Math.max(0, offset)), false);
+  };
   scrollToStickyTop = options => {
-    this.scrollCurrentPageToTop(Math.max(0, this.props.headerHeight), options?.animated ?? true);
+    this.scrollCurrentPageToTop(this.headerHeight, options?.animated ?? true);
   };
   cancelPendingTopFrame = () => {
     if (!this.pendingTopFrame) return;
@@ -145,11 +380,12 @@ export class CollapsiblePagerView extends React.PureComponent {
     const element = this.pageScrollElement(this.state.selectedPage);
     const key = this.pages().map(pageKey)[this.state.selectedPage];
     if (!element?.isConnected || !key) return;
+    this.setRouteTarget(null);
     this.selectionRestoreToken += 1;
     this.cancelPendingTopFrame();
     const EventConstructor = element.ownerDocument.defaultView?.Event;
     if (EventConstructor) element.dispatchEvent(new EventConstructor("ok-collapsible-pager-cancel-scroll-command"));
-    element.scrollTo({
+    scrollElementTo(element, {
       left: element.scrollLeft,
       top: element.scrollTop,
       behavior: "instant"
@@ -159,15 +395,16 @@ export class CollapsiblePagerView extends React.PureComponent {
       this.pendingTopFrame = null;
       if (!element.isConnected || this.horizontalTouch || this.transitionTimer !== null || this.pageScrollElement(this.state.selectedPage) !== element || this.pages().map(pageKey)[this.state.selectedPage] !== key) return;
       this.pageOffsets.set(key, 0);
-      this.sharedHeaderOffset = offset;
+      this.sharedHeaderOffset = Math.min(this.headerHeight, Math.max(0, offset));
       this.bodyAlignment = {
         element,
         key
       };
-      element.scrollTo({
-        top: offset,
+      scrollElementTo(element, {
+        top: this.sharedHeaderOffset,
         behavior: animated ? "smooth" : "instant"
       });
+      this.syncFallbackHeader();
     });
     this.pendingTopFrame = {
       frame,
@@ -230,8 +467,119 @@ export class CollapsiblePagerView extends React.PureComponent {
   };
   pageScrollElement(index) {
     const pageHost = this.pageHosts.get(index);
-    return pageHost?.querySelector(".ok-native-list-viewport, [data-collapsible-pager-scroll]") ?? pageHost;
+    return pageHost?.querySelector("[data-collapsible-pager-scroll]") ?? pageHost?.querySelector(".ok-native-list-viewport") ?? pageHost;
+  }
+  setRoot = node => {
+    const root = webElement(node);
+    if (root === this.root) return;
+    this.root?.removeEventListener("ok-collapsible-pager-scroll-key-changed", this.onScrollOwnerIdentityChanged);
+    this.root?.removeEventListener("wheel", this.onOverlayWheel);
+    this.root?.removeEventListener("touchstart", this.onOverlayTouchStart);
+    this.root?.removeEventListener("touchmove", this.onOverlayTouchMove);
+    this.root?.removeEventListener("touchend", this.onOverlayTouchEnd);
+    this.root?.removeEventListener("touchcancel", this.onOverlayTouchEnd);
+    this.overlayTouch = null;
+    this.root = root;
+    root?.addEventListener("ok-collapsible-pager-scroll-key-changed", this.onScrollOwnerIdentityChanged);
+    root?.addEventListener("wheel", this.onOverlayWheel, {
+      passive: false
+    });
+    root?.addEventListener("touchstart", this.onOverlayTouchStart, {
+      passive: true
+    });
+    root?.addEventListener("touchmove", this.onOverlayTouchMove, {
+      passive: false
+    });
+    root?.addEventListener("touchend", this.onOverlayTouchEnd);
+    root?.addEventListener("touchcancel", this.onOverlayTouchEnd);
+  };
+  overlayTarget(event) {
+    const target = event.target;
+    if (!target || !this.headerSlot?.contains(target) && !this.stickySlot?.contains(target) || target.closest("input,textarea,select,[contenteditable=true]")) return null;
+    return target;
+  }
+  nestedScrollConsumes(target, delta) {
+    for (let node = target; node && node !== this.root; node = node.parentElement) {
+      const style = node.ownerDocument.defaultView?.getComputedStyle(node);
+      if (/auto|scroll/.test(style?.overflowY ?? "") && node.scrollHeight > node.clientHeight && (delta < 0 ? node.scrollTop > 0 : node.scrollTop < node.scrollHeight - node.clientHeight)) return true;
+    }
+    return false;
   }
+  scrollOverlayOwner(owner, delta, event) {
+    if (!event.cancelable) return;
+    const EventConstructor = owner.ownerDocument.defaultView?.Event;
+    if (EventConstructor) owner.dispatchEvent(new EventConstructor("ok-collapsible-pager-user-scroll"));
+    const top = Math.min(Math.max(0, owner.scrollTop + delta), owner.scrollHeight - owner.clientHeight);
+    if (top === owner.scrollTop) return;
+    this.takeOverVerticalScroll();
+    scrollElementTo(owner, {
+      top,
+      behavior: "instant"
+    });
+    event.preventDefault();
+  }
+  onOverlayWheel = event => {
+    const target = this.overlayTarget(event);
+    const owner = this.pageScrollElement(this.state.selectedPage);
+    if (!target || !owner || event.defaultPrevented || event.ctrlKey || Math.abs(event.deltaX) > Math.abs(event.deltaY)) return;
+    const lineHeight = Number.parseFloat(target.ownerDocument.defaultView?.getComputedStyle(target).lineHeight ?? "") || 16;
+    const delta = event.deltaY * (event.deltaMode === 1 ? lineHeight : event.deltaMode === 2 ? owner.clientHeight : 1);
+    if (!this.nestedScrollConsumes(target, delta)) this.scrollOverlayOwner(owner, delta, event);
+  };
+  onOverlayTouchStart = event => {
+    const target = this.overlayTarget(event);
+    const owner = this.pageScrollElement(this.state.selectedPage);
+    const touch = event.touches.length === 1 ? event.touches[0] : null;
+    this.overlayTouch = target && owner && touch ? {
+      owner,
+      target,
+      x: touch.clientX,
+      y: touch.clientY,
+      lastY: touch.clientY
+    } : null;
+  };
+  onOverlayTouchMove = event => {
+    if (event.defaultPrevented) return;
+    const pending = this.overlayTouch;
+    const touch = event.touches.length === 1 ? event.touches[0] : null;
+    if (!pending || !touch || pending.owner !== this.pageScrollElement(this.state.selectedPage)) {
+      this.overlayTouch = null;
+      return;
+    }
+    const delta = pending.lastY - touch.clientY;
+    pending.lastY = touch.clientY;
+    if (Math.abs(touch.clientY - pending.y) < 8 || Math.abs(touch.clientX - pending.x) >= Math.abs(touch.clientY - pending.y)) return;
+    if (!this.nestedScrollConsumes(pending.target, delta)) this.scrollOverlayOwner(pending.owner, delta, event);
+  };
+  onOverlayTouchEnd = () => {
+    this.overlayTouch = null;
+  };
+  synchronizeScrollOwnerIdentity(index) {
+    const key = this.pages().map(pageKey)[index];
+    const element = this.pageScrollElement(index);
+    if (!key || !element) return;
+    const identity = element.getAttribute("data-collapsible-pager-scroll-key") ?? key;
+    const previous = this.pageScrollIdentities.get(key);
+    this.pageScrollIdentities.set(key, identity);
+    this.syncPageOwner(index);
+    if (previous === undefined || previous === identity) return;
+    if (index === this.state.selectedPage) {
+      this.selectionRestoreToken += 1;
+      this.cancelPendingTopFrame();
+      this.sharedHeaderOffset = 0;
+      this.bodyAlignment = null;
+      scrollElementTo(element, {
+        top: 0,
+        behavior: "instant"
+      });
+    }
+    this.pageOffsets.delete(key);
+  }
+  onScrollOwnerIdentityChanged = event => {
+    this.pages().forEach((_, index) => {
+      if (event.target === this.pageScrollElement(index)) this.synchronizeScrollOwnerIdentity(index);
+    });
+  };
   notifyInsetsChanged(element) {
     const EventConstructor = element.ownerDocument.defaultView?.Event;
     if (EventConstructor) {
@@ -247,10 +595,11 @@ export class CollapsiblePagerView extends React.PureComponent {
     configured.element.removeEventListener("pointerdown", this.onScrollbarPointerDown);
     configured.element.removeEventListener("keydown", this.onQueuedTopKey);
     configured.element.removeEventListener("scrollend", this.onVerticalScrollSettled);
+    configured.element.removeEventListener("scroll", this.syncFallbackHeader);
     const style = timelineStyle(configured.element);
     configured.rangeSpacer.remove();
     style.position = configured.position;
-    style.paddingTop = configured.paddingTop;
+    configured.paddingTarget.style.paddingTop = configured.paddingTop;
     style.boxSizing = configured.boxSizing;
     style.scrollTimelineName = configured.scrollTimelineName;
     style.scrollTimelineAxis = configured.scrollTimelineAxis;
@@ -259,16 +608,19 @@ export class CollapsiblePagerView extends React.PureComponent {
     configured.element.removeAttribute("data-collapsible-pager-active");
     this.notifyInsetsChanged(configured.element);
     this.configuredScrollElement = null;
+    this.syncFallbackHeader();
     if (this.bodyAlignment?.element === configured.element) this.bodyAlignment = null;
   }
   configureActiveScrollElement = () => {
     this.configureFrame = null;
     const element = this.pageScrollElement(this.state.selectedPage);
     if (!element) return;
+    this.synchronizeScrollOwnerIdentity(this.state.selectedPage);
     if (this.configuredScrollElement?.element !== element) {
       this.restoreConfiguredScrollElement();
       const style = timelineStyle(element);
-      const computedPaddingTop = element.ownerDocument.defaultView?.getComputedStyle(element).paddingTop || style.paddingTop || "0px";
+      const paddingTarget = element.hasAttribute("data-collapsible-pager-scroll") ? webElement(element.firstElementChild) ?? element : element;
+      const computedPaddingTop = element.ownerDocument.defaultView?.getComputedStyle(paddingTarget).paddingTop || paddingTarget.style.paddingTop || "0px";
       const rangeSpacer = element.ownerDocument.createElement("div");
       Object.assign(rangeSpacer.style, {
         position: "absolute",
@@ -283,10 +635,12 @@ export class CollapsiblePagerView extends React.PureComponent {
       if (element.ownerDocument.defaultView?.getComputedStyle(element).position === "static") style.position = "relative";
       element.appendChild(rangeSpacer);
       this.configuredScrollElement = {
+        key: this.pages().map(pageKey)[this.state.selectedPage],
         element,
+        paddingTarget,
         rangeSpacer,
         position,
-        paddingTop: style.paddingTop,
+        paddingTop: paddingTarget.style.paddingTop,
         basePaddingTop: computedPaddingTop,
         boxSizing: style.boxSizing,
         scrollTimelineName: style.scrollTimelineName,
@@ -299,17 +653,21 @@ export class CollapsiblePagerView extends React.PureComponent {
       element.addEventListener("wheel", this.onQueuedTopWheel);
       element.addEventListener("pointerdown", this.onScrollbarPointerDown);
       element.addEventListener("keydown", this.onQueuedTopKey);
+      if (!this.cssTimelineSupported) element.addEventListener("scroll", this.syncFallbackHeader, {
+        passive: true
+      });
     }
     const style = timelineStyle(element);
-    const headerInset = Math.max(0, this.props.headerHeight);
-    const stickyInset = Math.max(0, this.props.stickyHeaderHeight);
+    const paddingStyle = this.configuredScrollElement?.paddingTarget.style ?? style;
+    const headerInset = this.headerHeight;
+    const stickyInset = this.stickyHeaderHeight;
     if (this.configuredScrollElement) this.configuredScrollElement.rangeSpacer.style.height = `calc(100% + ${headerInset}px)`;
     const basePaddingTop = this.configuredScrollElement?.basePaddingTop ?? "0px";
     const paddingTop = `calc(${basePaddingTop} + ${headerInset + stickyInset}px)`;
     const headerInsetValue = `${headerInset}px`;
     const stickyInsetValue = `${stickyInset}px`;
-    const insetsChanged = style.paddingTop !== paddingTop || style.getPropertyValue(PAGER_HEADER_INSET) !== headerInsetValue || style.getPropertyValue(PAGER_STICKY_INSET) !== stickyInsetValue;
-    style.paddingTop = paddingTop;
+    const insetsChanged = paddingStyle.paddingTop !== paddingTop || style.getPropertyValue(PAGER_HEADER_INSET) !== headerInsetValue || style.getPropertyValue(PAGER_STICKY_INSET) !== stickyInsetValue;
+    paddingStyle.paddingTop = paddingTop;
     style.boxSizing = "border-box";
     style.scrollTimelineName = this.timelineName;
     style.scrollTimelineAxis = "block";
@@ -317,9 +675,20 @@ export class CollapsiblePagerView extends React.PureComponent {
     style.setProperty(PAGER_STICKY_INSET, stickyInsetValue);
     element.setAttribute("data-collapsible-pager-active", "true");
     if (insetsChanged) this.notifyInsetsChanged(element);
+    this.syncFallbackHeader();
+    this.pageBridges.get(this.pages().map(pageKey)[this.state.selectedPage])?.requestMeasure();
+    this.restoreScrollPosition();
+  };
+  syncFallbackHeader = () => {
+    if (this.cssTimelineSupported) return;
+    const top = this.configuredScrollElement?.element.scrollTop ?? 0;
+    const collapse = Math.min(Math.max(top, 0), this.headerHeight);
+    const transform = `translateY(${-collapse}px)`;
+    if (this.headerSlot) this.headerSlot.style.transform = transform;
+    if (this.stickySlot) this.stickySlot.style.transform = transform;
   };
   scheduleScrollConfiguration() {
-    if (this.configureFrame !== null) return;
+    if (this.disposed || this.configureFrame !== null) return;
     if (typeof requestAnimationFrame === "function") {
       this.configureFrame = requestAnimationFrame(this.configureActiveScrollElement);
     } else {
@@ -327,6 +696,7 @@ export class CollapsiblePagerView extends React.PureComponent {
     }
   }
   takeOverVerticalScroll = () => {
+    this.setRouteTarget(null);
     this.selectionRestoreToken += 1;
     this.bodyAlignment = null;
     this.cancelPendingTopFrame();
@@ -342,11 +712,13 @@ export class CollapsiblePagerView extends React.PureComponent {
     this.emitDiagnostics("scroll-settled");
   };
   savePageOffset(index) {
-    const key = this.pages().map(pageKey)[index];
-    const scrollElement = this.pageScrollElement(index);
+    const configured = index === this.state.selectedPage ? this.configuredScrollElement : null;
+    const key = configured?.key ?? this.pages().map(pageKey)[index];
+    const scrollElement = configured?.element ?? this.pageScrollElement(index);
+    if (configured && !scrollElement?.isConnected) return;
     if (key && scrollElement) {
       if (this.bodyAlignment?.key === key && this.bodyAlignment.element === scrollElement) return;
-      const D = Math.max(0, this.props.headerHeight);
+      const D = this.headerHeight;
       this.pageOffsets.set(key, Math.max(0, scrollElement.scrollTop - D));
       this.sharedHeaderOffset = Math.min(Math.max(scrollElement.scrollTop, 0), D);
     }
@@ -355,7 +727,7 @@ export class CollapsiblePagerView extends React.PureComponent {
     const key = this.pages().map(pageKey)[index];
     const scrollElement = this.pageScrollElement(index);
     if (!key || !scrollElement) return;
-    const D = Math.max(0, this.props.headerHeight);
+    const D = this.headerHeight;
     const C = Math.min(Math.max(0, this.sharedHeaderOffset), D);
     const expectedQ = C + (C === D ? this.pageOffsets.get(key) ?? 0 : 0);
     this.bodyAlignment = {
@@ -363,6 +735,7 @@ export class CollapsiblePagerView extends React.PureComponent {
       key
     };
     scrollElement.scrollTop = expectedQ;
+    this.syncFallbackHeader();
   }
   selectPage(selectedPage, animated) {
     const pages = this.pages();
@@ -370,8 +743,10 @@ export class CollapsiblePagerView extends React.PureComponent {
     if (position === null || position < 0 || position >= pages.length || position === this.state.selectedPage) {
       return;
     }
+    this.synchronizeScrollOwnerIdentity(this.state.selectedPage);
     const selectionToken = ++this.selectionRestoreToken;
     const expectedKey = this.pages().map(pageKey)[position];
+    if (this.routeTarget && this.routeTarget.key !== expectedKey) this.setRouteTarget(null);
     this.cancelPendingTopFrame();
     this.savePageOffset(this.state.selectedPage);
     if (animated) this.beginPageTransition();else this.finishPageTransition();
@@ -383,6 +758,9 @@ export class CollapsiblePagerView extends React.PureComponent {
       const restore = () => {
         if (this.selectionRestoreToken !== selectionToken || this.state.selectedPage !== position || this.pages().map(pageKey)[position] !== expectedKey || !this.pageScrollElement(position)?.isConnected) return;
         this.configureActiveScrollElement();
+        if (this.selectionRestoreToken !== selectionToken || this.routeTarget?.key === expectedKey) {
+          return;
+        }
         this.restorePageOffset(position);
       };
       if (typeof requestAnimationFrame === "function") {
@@ -419,7 +797,7 @@ export class CollapsiblePagerView extends React.PureComponent {
     const retainedPages = this.mountedPages(pages.length);
     this.props.onCollapsibleStateChanged?.(this.nativeEvent({
       position: this.state.selectedPage,
-      headerOffset: Math.min(Math.max(this.pageScrollElement(this.state.selectedPage)?.scrollTop ?? 0, 0), Math.max(0, this.props.headerHeight)),
+      headerOffset: Math.min(Math.max(this.pageScrollElement(this.state.selectedPage)?.scrollTop ?? 0, 0), this.headerHeight),
       nativePageCount: pages.length,
       attachedPageCount: retainedPages.length,
       observedScrollableCount: retainedPages.reduce((count, index) => count + (this.pageScrollElement(index) ? 1 : 0), 0),
@@ -489,6 +867,7 @@ export class CollapsiblePagerView extends React.PureComponent {
       externalTopOverlayTag: _externalTopOverlayTag,
       headerHeight: _headerHeight,
       stickyHeaderHeight: _stickyHeaderHeight,
+      isActive: _isActive,
       pageRetentionDistance: _pageRetentionDistance,
       layoutDirection: _layoutDirection,
       scrollEnabled: _scrollEnabled,
@@ -506,15 +885,15 @@ export class CollapsiblePagerView extends React.PureComponent {
     const keys = pages.map(pageKey);
     const retained = new Set(this.mountedPages(pages.length));
     const pageWidth = pages.length > 0 ? `${100 / pages.length}%` : "100%";
-    const collapseAnimation = {
-      "--ok-collapsible-header-height": `${Math.max(0, this.props.headerHeight)}px`,
+    const collapseAnimation = this.cssTimelineSupported ? {
+      "--ok-collapsible-header-height": `${Math.max(0, this.headerHeight)}px`,
       animationName: COLLAPSE_ANIMATION_NAME,
       animationDuration: "auto",
       animationFillMode: "both",
       animationTimingFunction: "linear",
       animationTimeline: this.timelineName,
-      animationRange: `0px ${Math.max(1, this.props.headerHeight)}px`
-    };
+      animationRange: `0px ${Math.max(1, this.headerHeight)}px`
+    } : undefined;
     const trackStyle = [styles.track, {
       width: `${Math.max(1, pages.length) * 100}%`,
       transform: [{
@@ -525,23 +904,33 @@ export class CollapsiblePagerView extends React.PureComponent {
     }];
     return /*#__PURE__*/_jsxs(View, {
       ...viewProps,
-      ref: node => {
-        this.root = webElement(node);
-      },
-      style: [styles.root, {
+      ref: this.setRoot,
+      style: [styles.root, this.cssTimelineSupported ? {
         timelineScope: this.timelineName
-      }, style],
+      } : undefined, style],
       children: [/*#__PURE__*/_jsx(View, {
+        ref: node => {
+          this.headerSlot = webElement(node);
+        },
         style: [styles.header, {
-          height: Math.max(0, this.props.headerHeight)
+          height: this.headerHeight
         }, collapseAnimation],
-        children: header
+        children: this.hasExplicitHeaderHeight ? header : /*#__PURE__*/_jsx(View, {
+          ref: this.setHeaderContent,
+          children: header
+        })
       }), /*#__PURE__*/_jsx(View, {
+        ref: node => {
+          this.stickySlot = webElement(node);
+        },
         style: [styles.sticky, {
-          top: Math.max(0, this.props.headerHeight),
-          height: Math.max(0, this.props.stickyHeaderHeight)
+          top: this.headerHeight,
+          height: this.stickyHeaderHeight
         }, collapseAnimation],
-        children: stickyHeader
+        children: this.hasExplicitStickyHeaderHeight ? stickyHeader : /*#__PURE__*/_jsx(View, {
+          ref: this.setStickyContent,
+          children: stickyHeader
+        })
       }), /*#__PURE__*/_jsx(View, {
         ref: this.setTrack,
         style: trackStyle,
@@ -563,7 +952,18 @@ export class CollapsiblePagerView extends React.PureComponent {
             width: pageWidth
           }],
           "aria-hidden": index !== this.state.selectedPage,
-          children: retained.has(index) ? page : null
+          children: retained.has(index) ? /*#__PURE__*/_jsx(WebCollapsiblePagerPage, {
+            pageKey: keys[index],
+            isFocused: index === this.state.selectedPage,
+            isRouteActive: this.props.isActive !== false,
+            headerHeight: this.headerHeight,
+            stickyHeaderHeight: this.stickyHeaderHeight,
+            onBridge: this.onPageBridge,
+            onGeometryChange: this.onPageGeometryChange,
+            onScroll: this.onPageScroll,
+            onUserInput: this.onPageUserInput,
+            children: page
+          }) : null
         }, keys[index]))
       })]
     });
@@ -572,7 +972,7 @@ export class CollapsiblePagerView extends React.PureComponent {
 const styles = StyleSheet.create({
   root: {
     flex: 1,
-    overflow: "hidden",
+    overflow: "clip",
     position: "relative"
   },
   header: {
@@ -588,7 +988,7 @@ const styles = StyleSheet.create({
     left: 0,
     right: 0,
     zIndex: 4,
-    overflow: "hidden"
+    overflow: "visible"
   },
   track: {
     position: "absolute",