@onekeyfe/react-native-native-list 3.0.113 → 3.0.115

package/lib/module/web/NativeListWebEngine.js

@@ -8,7 +8,7 @@ import { acquireNativeListAvatar, canonicalNativeListAvatarUri } from "./NativeL
 const SECTION_INDEX_CONTENT_INSET = 16;
 const SECTION_INDEX_RAIL_WIDTH = 32;
 const SECTION_INDEX_EDGE_PADDING = 8;
-const SECTION_INDEX_MIN_LABEL_SPACING = 14;
+const SECTION_INDEX_LABEL_SPACING = 16;
 const SECTION_INDEX_MIN_HEIGHT = 120;
 const DEFAULT_VIEWPORT_WIDTH = 320;
 const DEFAULT_VIEWPORT_HEIGHT = 640;
@@ -394,6 +394,17 @@ export function visibleWebLayoutItems(layout, offset, viewportLength, overscan =
   }
   return visible;
 }
+export function resolveWebCollapsiblePagerScrollMetrics(rawOffset, rawViewportLength, headerInset, stickyInset) {
+  const header = Math.max(0, headerInset);
+  const sticky = Math.max(0, stickyInset);
+  return {
+    offset: Math.max(0, rawOffset - header),
+    viewportLength: Math.max(0, rawViewportLength - sticky)
+  };
+}
+export function resolveWebCollapsiblePagerRawOffset(logicalOffset, headerInset) {
+  return Math.max(0, logicalOffset) + Math.max(0, headerInset);
+}
 export function webLayoutItemsForMount(layout, offset, viewportLength, virtualizationEnabled, overscan = 0) {
   return virtualizationEnabled ? visibleWebLayoutItems(layout, offset, viewportLength, overscan) : layout.items;
 }
@@ -493,6 +504,11 @@ export const WEB_LIST_CSS = `
 .ok-native-list-subtitle-segments{display:flex;align-items:center;min-width:0;max-width:100%;height:20px}.ok-native-list-subtitle-segments>.ok-native-list-secondary{flex:0 1 auto;min-width:0}.ok-native-list-subtitle-dot{flex:0 0 4px;width:4px;height:4px;margin:0 6px;border-radius:50%;background:var(--nl-disabled)}.ok-native-list-wallet-row>.ok-native-list-flex{flex:0 1 auto;width:100%;align-items:center}.ok-native-list-wallet-badges{display:flex;gap:4px;justify-content:center;margin-top:4px;height:20px;max-width:100%}.ok-native-list-wallet-badges>.ok-native-list-badge{background:var(--nl-strong);color:var(--nl-secondary);font-size:12px;line-height:16px;height:20px;box-sizing:border-box;padding:2px 4px}.ok-native-list-visual-overlay{position:absolute;display:flex;align-items:center;justify-content:center;box-sizing:border-box;border-radius:50%;overflow:hidden;line-height:1;font-size:10px}.ok-native-list-visual-overlay img,.ok-native-list-visual-overlay svg{width:100%;height:100%;object-fit:contain}
 .ok-native-list-row.ok-native-list-market-skeleton{padding:12px 20px;gap:0}.ok-native-list-skeleton-left{display:flex;align-items:center;gap:12px;flex:1}.ok-native-list-skeleton-text{display:flex;flex-direction:column;gap:4px}.ok-native-list-skeleton-right{display:flex;align-items:center;gap:8px}.ok-native-list-skeleton-mark{display:block;flex-shrink:0;border-radius:8px;animation:ok-native-list-skeleton 1.5s linear infinite alternate}@keyframes ok-native-list-skeleton{from{background-color:var(--nl-skeleton-base)}to{background-color:var(--nl-skeleton-highlight)}}.ok-native-list-market-spinner{display:block;width:20px;height:20px;flex-shrink:0;color:var(--nl-icon);animation:ok-native-list-spin .75s linear infinite}
 @media (prefers-reduced-motion:reduce){.ok-native-list-index-preview,.ok-native-list-refresh{transition:none}.ok-native-list-spinner,.ok-native-list-market-spinner{animation:none}.ok-native-list-skeleton-mark{animation:none;background:var(--nl-skeleton-base)}}
+.ok-native-list-footer{flex:0 0 auto;min-height:0}.ok-native-list-sticky{position:absolute;z-index:4;left:0;right:0;top:0;pointer-events:auto;box-shadow:0 1px 0 var(--nl-separator)}.ok-native-list-viewport-frame:has(>.ok-native-list-index-rail:not([hidden]))>.ok-native-list-viewport{scrollbar-width:none}.ok-native-list-viewport-frame:has(>.ok-native-list-index-rail:not([hidden]))>.ok-native-list-viewport::-webkit-scrollbar{display:none}.ok-native-list-index-rail{position:absolute;z-index:6;top:0;right:0;bottom:0;width:${SECTION_INDEX_RAIL_WIDTH}px;touch-action:none;cursor:pointer}.ok-native-list-index-rail[hidden]{display:none}.ok-native-list-index-button{appearance:none;position:absolute;left:15px;display:flex;width:14px;height:14px;align-items:center;justify-content:center;padding:0;transform:translateY(-50%);border:0;border-radius:7px;background:transparent;color:var(--nl-disabled);font-family:inherit;font-size:10px;font-weight:400;line-height:1;cursor:pointer}.ok-native-list-index-button[data-active="true"]{background:var(--nl-positive);color:var(--nl-inverse-text);font-weight:500}.ok-native-list-index-button:focus-visible{outline:2px solid var(--nl-positive);outline-offset:1px}
+.ok-native-list-refresh{position:absolute;z-index:7;left:50%;top:8px;display:flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;background:var(--nl-inverse);color:var(--nl-inverse-text);font-size:12px;opacity:0;transform:translate(-50%,-16px);transition:opacity .15s ease,transform .15s ease;pointer-events:none}.ok-native-list-refresh[data-visible="true"]{opacity:1;transform:translate(-50%,0)}
+.ok-native-list-warning{height:auto;display:flex;flex-direction:column;align-items:stretch;gap:4px;padding:14px 12px;border-top:1px solid;border-bottom:1px solid;box-sizing:border-box;cursor:default}.ok-native-list-warning-title,.ok-native-list-warning-message{font-size:14px;line-height:20px;white-space:normal;overflow-wrap:anywhere}.ok-native-list-warning-title{font-weight:500;color:var(--nl-primary)}.ok-native-list-warning-message{font-weight:400;color:var(--nl-secondary)}
+.ok-native-list-subtitle-segments{display:flex;align-items:center;min-width:0;max-width:100%;height:20px}.ok-native-list-subtitle-segments>.ok-native-list-secondary{flex:0 1 auto;min-width:0}.ok-native-list-subtitle-dot{flex:0 0 4px;width:4px;height:4px;margin:0 6px;border-radius:50%;background:var(--nl-disabled)}.ok-native-list-wallet-row>.ok-native-list-flex{flex:0 1 auto;width:100%;align-items:center}.ok-native-list-wallet-badges{display:flex;gap:4px;justify-content:center;margin-top:4px;height:20px;max-width:100%}.ok-native-list-wallet-badges>.ok-native-list-badge{background:var(--nl-strong);color:var(--nl-secondary);font-size:12px;line-height:16px;height:20px;box-sizing:border-box;padding:2px 4px}.ok-native-list-visual-overlay{position:absolute;display:flex;align-items:center;justify-content:center;box-sizing:border-box;border-radius:50%;overflow:hidden;line-height:1;font-size:10px}.ok-native-list-visual-overlay img,.ok-native-list-visual-overlay svg{width:100%;height:100%;object-fit:contain}
+@media (prefers-reduced-motion:reduce){.ok-native-list-refresh{transition:none}.ok-native-list-spinner{animation:none}}
 /* OneKey patch: selector controls follow their original semantic colors and geometry. */
 .ok-native-list-checkbox[data-selector="networkSelector"]{padding:0;border-radius:4px;border-color:var(--nl-checkbox-border,var(--nl-separator));background:var(--nl-checkbox-icon,var(--nl-inverse-text))}
 .ok-native-list-checkbox[data-selector="networkSelector"]::after{display:none}
@@ -1900,8 +1916,6 @@ export class NativeListWebEngine {
     this.indexRail.setAttribute('role', 'navigation');
     this.indexRail.setAttribute('aria-label', 'Section index');
     this.indexRail.hidden = true;
-    this.indexPreview = createElement(this.document, 'div', 'ok-native-list-index-preview');
-    this.indexPreview.setAttribute('aria-live', 'polite');
     this.refreshIndicator = createElement(this.document, 'div', 'ok-native-list-refresh', 'Refreshing');
     this.refreshIndicator.setAttribute('role', 'status');
     this.reorderPreview = createElement(this.document, 'div', 'ok-native-list-reorder-preview');
@@ -1909,12 +1923,13 @@ export class NativeListWebEngine {
     this.reorderPreview.setAttribute('aria-hidden', 'true');
     this.document.body.appendChild(this.reorderPreview);
     this.viewport.append(this.content);
-    this.viewportFrame.append(this.viewport, this.sticky, this.indexRail, this.indexPreview, this.refreshIndicator);
+    this.viewportFrame.append(this.viewport, this.sticky, this.indexRail, this.refreshIndicator);
     this.root.append(style, this.viewportFrame, this.footer);
     host.appendChild(this.root);
     this.viewport.addEventListener('scroll', this.handleScroll, {
       passive: true
     });
+    this.viewport.addEventListener('ok-collapsible-pager-insets-changed', this.handleCollapsiblePagerInsetsChanged);
     this.root.addEventListener('click', this.handleClick);
     this.root.addEventListener('pointerdown', this.handleMarketPointerDown);
     this.root.addEventListener('pointermove', this.handleMarketPointerMove);
@@ -1941,6 +1956,8 @@ export class NativeListWebEngine {
     this.viewport.addEventListener('touchcancel', this.handleReorderTouchCancel);
     this.indexRail.addEventListener('pointerdown', this.handleIndexPointer);
     this.indexRail.addEventListener('pointermove', this.handleIndexPointer);
+    this.indexRail.addEventListener('pointerup', this.handleIndexPointerEnd);
+    this.indexRail.addEventListener('pointercancel', this.handleIndexPointerEnd);
     this.indexRail.addEventListener('click', this.handleIndexClick);
     this.viewport.addEventListener('pointerdown', this.handlePullStart, {
       passive: true
@@ -2117,11 +2134,11 @@ export class NativeListWebEngine {
     this.invalidateActionAnchor('destroy');
     this.destroyed = true;
     if (this.frameHandle !== undefined) this.cancelFrame(this.frameHandle);
-    if (this.previewTimer !== undefined) this.document.defaultView?.clearTimeout(this.previewTimer);
     if (this.reorderMovementTimer !== undefined) this.document.defaultView?.clearTimeout(this.reorderMovementTimer);
     this.resizeObserver?.disconnect();
     this.document.defaultView?.removeEventListener('resize', this.handleWindowResize);
     this.viewport.removeEventListener('scroll', this.handleScroll);
+    this.viewport.removeEventListener('ok-collapsible-pager-insets-changed', this.handleCollapsiblePagerInsetsChanged);
     this.root.removeEventListener('click', this.handleClick);
     this.cancelMarketPointer();
     this.root.removeEventListener('pointerdown', this.handleMarketPointerDown);
@@ -2141,6 +2158,8 @@ export class NativeListWebEngine {
     this.viewport.removeEventListener('touchcancel', this.handleReorderTouchCancel);
     this.indexRail.removeEventListener('pointerdown', this.handleIndexPointer);
     this.indexRail.removeEventListener('pointermove', this.handleIndexPointer);
+    this.indexRail.removeEventListener('pointerup', this.handleIndexPointerEnd);
+    this.indexRail.removeEventListener('pointercancel', this.handleIndexPointerEnd);
     this.indexRail.removeEventListener('click', this.handleIndexClick);
     this.viewport.removeEventListener('pointerdown', this.handlePullStart);
     this.viewport.removeEventListener('pointermove', this.handlePullMove);
@@ -2207,7 +2226,17 @@ export class NativeListWebEngine {
   recomputeLayout = () => {
     if (this.destroyed) return;
     const viewportWidth = this.viewport.clientWidth;
-    const viewportHeight = this.viewport.clientHeight;
+    const viewportHeight = this.snapshot.layout.orientation === 'horizontal' ? this.viewport.clientHeight : this.verticalScrollMetrics().viewportLength;
+    if (this.snapshot.layout.orientation !== 'horizontal') {
+      const stickyInset = this.collapsiblePagerInsets().sticky;
+      this.sticky.style.top = String(stickyInset) + 'px';
+      this.indexRail.style.top = String(stickyInset) + 'px';
+      this.refreshIndicator.style.top = String(stickyInset + 8) + 'px';
+    } else {
+      this.sticky.style.top = '0px';
+      this.indexRail.style.top = '0px';
+      this.refreshIndicator.style.top = '8px';
+    }
     if (this.lastViewportWidth >= 0 && (viewportWidth !== this.lastViewportWidth || viewportHeight !== this.lastViewportHeight)) {
       this.invalidateActionAnchor('layout');
       this.measuredWarningHeights.clear();
@@ -2225,7 +2254,7 @@ export class NativeListWebEngine {
     this.layout = computeWebListLayout(measuredSnapshot, viewportWidth, viewportHeight, this.reorderCompactKey);
     this.content.style.width = String(this.layout.contentWidth) + 'px';
     this.content.style.height = String(this.layout.contentHeight) + 'px';
-    this.renderSectionIndex(viewportHeight || DEFAULT_VIEWPORT_HEIGHT);
+    this.renderSectionIndex(this.viewport.clientHeight <= 0 ? DEFAULT_VIEWPORT_HEIGHT : Math.max(1, viewportHeight));
     if (previousHorizontal !== this.layout.horizontal) {
       this.viewport.scrollLeft = 0;
       this.viewport.scrollTop = 0;
@@ -2434,19 +2463,30 @@ export class NativeListWebEngine {
   sectionIndexVisibleEntryIndices(viewportHeight) {
     const entryCount = this.sectionIndexEntries.length;
     if (entryCount <= 1) return entryCount ? [0] : [];
-    const availableHeight = Math.max(0, viewportHeight - SECTION_INDEX_EDGE_PADDING * 2);
-    const maxVisible = Math.max(2, Math.floor(availableHeight / SECTION_INDEX_MIN_LABEL_SPACING) + 1);
+    const {
+      trackHeight
+    } = this.sectionIndexMetrics(viewportHeight);
+    const maxVisible = Math.max(1, Math.floor(trackHeight / SECTION_INDEX_LABEL_SPACING));
     if (entryCount <= maxVisible) {
       return Array.from({
         length: entryCount
       }, (_, index) => index);
     }
+    if (maxVisible === 1) return [0];
     const result = new Set();
     for (let slot = 0; slot < maxVisible; slot += 1) {
       result.add(Math.round(slot * (entryCount - 1) / (maxVisible - 1)));
     }
     return [...result].sort((left, right) => left - right);
   }
+  sectionIndexMetrics(viewportHeight) {
+    const availableHeight = Math.max(0, viewportHeight - SECTION_INDEX_EDGE_PADDING * 2);
+    const trackHeight = Math.min(availableHeight, SECTION_INDEX_LABEL_SPACING * this.sectionIndexEntries.length);
+    return {
+      originY: (viewportHeight - trackHeight) / 2,
+      trackHeight
+    };
+  }
   renderSectionIndex(viewportHeight) {
     this.indexRail.replaceChildren();
     if (!sectionIndexEnabled(this.snapshot)) {
@@ -2465,8 +2505,11 @@ export class NativeListWebEngine {
     }
     const visibleEntryIndices = this.sectionIndexVisibleEntryIndices(viewportHeight);
     setData(this.indexRail, 'compact', visibleEntryIndices.length < this.sectionIndexEntries.length);
+    const metrics = this.sectionIndexMetrics(viewportHeight);
+    const visibleTrackHeight = Math.min(metrics.trackHeight, SECTION_INDEX_LABEL_SPACING * visibleEntryIndices.length);
+    const visibleOriginY = metrics.originY + (metrics.trackHeight - visibleTrackHeight) / 2;
     const fragment = this.document.createDocumentFragment();
-    visibleEntryIndices.forEach(entryIndex => {
+    visibleEntryIndices.forEach((entryIndex, visibleIndex) => {
       const entry = this.sectionIndexEntries[entryIndex];
       if (!entry) return;
       const button = createElement(this.document, 'button', 'ok-native-list-index-button', entry.title);
@@ -2475,8 +2518,7 @@ export class NativeListWebEngine {
       setData(button, 'sectionEntryIndex', entryIndex);
       setData(button, 'sectionPosition', entry.position);
       setData(button, 'sectionKey', entry.key);
-      const progress = this.sectionIndexEntries.length === 1 ? 0.5 : entryIndex / (this.sectionIndexEntries.length - 1);
-      button.style.top = String(SECTION_INDEX_EDGE_PADDING + progress * (viewportHeight - SECTION_INDEX_EDGE_PADDING * 2)) + 'px';
+      button.style.top = String(visibleOriginY + visibleTrackHeight * (visibleIndex + 0.5) / visibleEntryIndices.length) + 'px';
       fragment.appendChild(button);
     });
     this.indexRail.appendChild(fragment);
@@ -2571,7 +2613,7 @@ export class NativeListWebEngine {
       }
     }
     const next = this.layout.items[nextIndex];
-    const translate = next ? Math.min(0, next.y - this.viewport.scrollTop - item.height) : 0;
+    const translate = next ? Math.min(0, next.y - this.currentOffset() - item.height) : 0;
     this.sticky.style.transform = 'translate3d(0,' + String(translate) + 'px,0)';
     this.updateVisibleSelection();
   }
@@ -2606,23 +2648,45 @@ export class NativeListWebEngine {
     return viewportLength > 0 && this.layout.items.length > 0;
   }
   viewportLength() {
-    return this.layout.horizontal ? this.viewport.clientWidth || DEFAULT_VIEWPORT_WIDTH : this.viewport.clientHeight || DEFAULT_VIEWPORT_HEIGHT;
+    if (this.layout.horizontal) {
+      return this.viewport.clientWidth || DEFAULT_VIEWPORT_WIDTH;
+    }
+    if (this.viewport.clientHeight <= 0) return DEFAULT_VIEWPORT_HEIGHT;
+    return Math.max(1, this.verticalScrollMetrics().viewportLength);
   }
   contentLength() {
     return this.layout.horizontal ? this.layout.contentWidth : this.layout.contentHeight;
   }
   currentOffset() {
-    return this.layout.horizontal ? this.viewport.scrollLeft : this.viewport.scrollTop;
+    return this.layout.horizontal ? this.viewport.scrollLeft : this.verticalScrollMetrics().offset;
+  }
+  collapsiblePagerInsets() {
+    const readInset = name => {
+      const parsed = Number.parseFloat(this.viewport.style.getPropertyValue(name));
+      return Number.isFinite(parsed) ? Math.max(0, parsed) : 0;
+    };
+    return {
+      header: readInset('--ok-collapsible-pager-header-inset'),
+      sticky: readInset('--ok-collapsible-pager-sticky-inset')
+    };
+  }
+  verticalScrollMetrics() {
+    const insets = this.collapsiblePagerInsets();
+    return resolveWebCollapsiblePagerScrollMetrics(this.viewport.scrollTop, this.viewport.clientHeight, insets.header, insets.sticky);
   }
+  handleCollapsiblePagerInsetsChanged = () => {
+    this.recomputeLayout();
+  };
   scrollToAbsoluteOffset(offset, animated) {
     const resolved = Math.min(Math.max(0, offset), Math.max(0, this.contentLength() - this.viewportLength()));
+    const rawOffset = this.layout.horizontal ? resolved : resolveWebCollapsiblePagerRawOffset(resolved, this.collapsiblePagerInsets().header);
     this.viewport.scrollTo(this.layout.horizontal ? {
-      left: resolved,
+      left: rawOffset,
       top: 0,
       behavior: animated ? 'smooth' : 'auto'
     } : {
       left: 0,
-      top: resolved,
+      top: rawOffset,
       behavior: animated ? 'smooth' : 'auto'
     });
     this.scheduleFrame();
@@ -2959,50 +3023,42 @@ export class NativeListWebEngine {
     const view = this.document.defaultView;
     if (view?.cancelAnimationFrame) view.cancelAnimationFrame(handle);else view?.clearTimeout(handle);
   }
-  selectIndexPosition(position, title, previewClientY) {
+  selectIndexPosition(position) {
+    const activeKey = this.sectionIndexEntries.find(entry => entry.position === position)?.key;
+    this.indexRail.querySelectorAll('[data-section-key]').forEach(button => setData(button, 'active', button.dataset.sectionKey === activeKey));
     this.scrollToIndex(position, {
       animated: false,
       alignment: 'start',
       viewPosition: 0,
       viewOffset: 0
     });
-    const frame = this.viewportFrame.getBoundingClientRect();
-    if (previewClientY !== undefined && frame.height > 0) {
-      const previewY = Math.min(frame.height - 24, Math.max(24, previewClientY - frame.top));
-      this.indexPreview.style.top = String(previewY) + 'px';
-    } else {
-      this.indexPreview.style.top = '50%';
-    }
-    this.indexPreview.textContent = title;
-    setData(this.indexPreview, 'visible', true);
-    if (this.previewTimer !== undefined) this.document.defaultView?.clearTimeout(this.previewTimer);
-    this.previewTimer = this.document.defaultView?.setTimeout(() => {
-      setData(this.indexPreview, 'visible', false);
-    }, 180);
   }
   sectionIndexEntryAtEvent(event) {
     const rail = this.indexRail.getBoundingClientRect();
     if (this.sectionIndexEntries.length === 0 || rail.height <= 0) {
       return undefined;
     }
-    const availableHeight = Math.max(1, rail.height - SECTION_INDEX_EDGE_PADDING * 2);
-    const progress = Math.min(1, Math.max(0, (event.clientY - rail.top - SECTION_INDEX_EDGE_PADDING) / availableHeight));
-    const entryIndex = Math.round(progress * (this.sectionIndexEntries.length - 1));
-    const entry = this.sectionIndexEntries[entryIndex];
-    return entry ? {
-      entry,
-      previewClientY: event.clientY
-    } : undefined;
+    const metrics = this.sectionIndexMetrics(rail.height);
+    if (metrics.trackHeight <= 0) return undefined;
+    const progress = Math.min(1, Math.max(0, (event.clientY - rail.top - metrics.originY) / metrics.trackHeight));
+    const entryIndex = Math.min(this.sectionIndexEntries.length - 1, Math.floor(progress * this.sectionIndexEntries.length));
+    return this.sectionIndexEntries[entryIndex];
   }
   handleIndexPointer = event => {
     if (event.type === 'pointermove' && event.buttons === 0) return;
-    const selection = this.sectionIndexEntryAtEvent(event);
-    if (!selection) return;
+    const entry = this.sectionIndexEntryAtEvent(event);
+    if (!entry) return;
     event.preventDefault();
     if (event.type === 'pointerdown') {
       this.indexRail.setPointerCapture?.(event.pointerId);
     }
-    this.selectIndexPosition(selection.entry.position, selection.entry.title, selection.previewClientY);
+    this.selectIndexPosition(entry.position);
+  };
+  handleIndexPointerEnd = event => {
+    if (event.type === 'pointerup') {
+      const entry = this.sectionIndexEntryAtEvent(event);
+      if (entry) this.selectIndexPosition(entry.position);
+    }
   };
   handleIndexClick = event => {
     if ('detail' in event && typeof event.detail === 'number' && event.detail > 0) return;
@@ -3012,8 +3068,7 @@ export class NativeListWebEngine {
     if (!button) return;
     const entry = this.sectionIndexEntries[Number(button.dataset.sectionEntryIndex)];
     if (!entry) return;
-    const rect = button.getBoundingClientRect();
-    this.selectIndexPosition(entry.position, entry.title, rect.top + rect.height / 2);
+    this.selectIndexPosition(entry.position);
   };
   handlePullStart = event => {
     if (this.pointerReorder?.pointerId === event.pointerId || !this.snapshot.capabilities?.pullToRefresh || this.viewport.scrollTop > 0 || event.pointerType !== 'touch' && event.pointerType !== 'pen') return;
@@ -3168,7 +3223,9 @@ export class NativeListWebEngine {
   setCurrentOffset(offset) {
     const maximum = Math.max(0, this.contentLength() - this.viewportLength());
     const next = Math.max(0, Math.min(maximum, offset));
-    if (this.layout.horizontal) this.viewport.scrollLeft = next;else this.viewport.scrollTop = next;
+    if (this.layout.horizontal) this.viewport.scrollLeft = next;else {
+      this.viewport.scrollTop = resolveWebCollapsiblePagerRawOffset(next, this.collapsiblePagerInsets().header);
+    }
     this.scheduleFrame();
   }
   showReorderPreview(state) {
@@ -3219,8 +3276,9 @@ export class NativeListWebEngine {
     }
     this.reorderSettlingKey = state.sourceKey;
     const viewportRect = this.viewport.getBoundingClientRect();
+    const insets = this.collapsiblePagerInsets();
     const left = viewportRect.left + destinationLayout.x - this.viewport.scrollLeft;
-    const top = viewportRect.top + destinationLayout.y - this.viewport.scrollTop;
+    const top = viewportRect.top + destinationLayout.y + insets.header + insets.sticky - this.viewport.scrollTop;
     this.reorderPreview.getBoundingClientRect();
     this.reorderPreview.style.transition = 'transform ' + String(REORDER_DROP_TRANSITION_MS) + 'ms ' + WEB_REORDER_ANIMATION.dropTimingFunction + ', box-shadow ' + String(REORDER_DROP_TRANSITION_MS) + 'ms ' + WEB_REORDER_ANIMATION.dropTimingFunction;
     this.reorderPreview.style.boxShadow = 'none';

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

@@ -66,6 +66,12 @@ export declare function estimateWebRowHeight(row: RowModel, snapshot: NativeList
 export declare function computeWebListLayout(snapshot: NativeListSnapshot, viewportWidth: number, viewportHeight: number, compactRowKey?: string): WebListLayout;
 export declare function webWalletGroupReorderBadge(row: RowModel): string | undefined;
 export declare function visibleWebLayoutItems(layout: WebListLayout, offset: number, viewportLength: number, overscan?: number): readonly WebLayoutItem[];
+export type WebCollapsiblePagerScrollMetrics = Readonly<{
+    offset: number;
+    viewportLength: number;
+}>;
+export declare function resolveWebCollapsiblePagerScrollMetrics(rawOffset: number, rawViewportLength: number, headerInset: number, stickyInset: number): WebCollapsiblePagerScrollMetrics;
+export declare function resolveWebCollapsiblePagerRawOffset(logicalOffset: number, headerInset: number): number;
 export declare function webLayoutItemsForMount(layout: WebListLayout, offset: number, viewportLength: number, virtualizationEnabled: boolean, overscan?: number): readonly WebLayoutItem[];
 export declare function webRowRenderSignature(row: RowModel): string;
 export declare function isWebMarketQuotePatch(patch: RowPatch): boolean;
@@ -81,7 +87,6 @@ export declare class NativeListWebEngine {
     private readonly footer;
     private readonly sticky;
     private readonly indexRail;
-    private readonly indexPreview;
     private readonly refreshIndicator;
     private readonly reorderPreview;
     private readonly previousHostPosition;
@@ -101,7 +106,6 @@ export declare class NativeListWebEngine {
     private avatarDirection;
     private reachedGeneration;
     private stickyKey;
-    private previewTimer;
     private sectionIndexEntries;
     private pointerReorder;
     private keyboardReorder;
@@ -149,6 +153,7 @@ export declare class NativeListWebEngine {
     private renderElement;
     private renderFooter;
     private sectionIndexVisibleEntryIndices;
+    private sectionIndexMetrics;
     private renderSectionIndex;
     private updateVisibleSelection;
     private updateVisibleState;
@@ -160,6 +165,9 @@ export declare class NativeListWebEngine {
     private viewportLength;
     private contentLength;
     private currentOffset;
+    private collapsiblePagerInsets;
+    private verticalScrollMetrics;
+    private handleCollapsiblePagerInsetsChanged;
     private scrollToAbsoluteOffset;
     private performPendingScroll;
     private rowAtElement;
@@ -193,6 +201,7 @@ export declare class NativeListWebEngine {
     private selectIndexPosition;
     private sectionIndexEntryAtEvent;
     private handleIndexPointer;
+    private handleIndexPointerEnd;
     private handleIndexClick;
     private handlePullStart;
     private handlePullMove;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onekeyfe/react-native-native-list",
-  "version": "3.0.113",
+  "version": "3.0.115",
   "description": "Template-driven native RecyclerView and UICollectionView for React Native",
   "source": "./src/index.ts",
   "main": "./lib/module/index.js",
@@ -73,6 +73,7 @@
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-prettier": "^5.5.4",
     "jest": "^29.7.0",
+    "jsdom": "26.1.0",
     "nitrogen": "0.37.0",
     "prettier": "^2.8.8",
     "react": "19.2.3",
@@ -82,7 +83,8 @@
     "typescript": "^5.9.2"
   },
   "peerDependencies": {
-    "@onekeyfe/react-native-image": "3.0.113",
+    "@onekeyfe/react-native-image": "3.0.115",
+    "@onekeyfe/react-native-native-logger": "3.0.115",
     "react": "*",
     "react-native": "*",
     "react-native-nitro-modules": "0.37.0"