@onekeyfe/react-native-pager-view 6.7.0-alpha.435 → 6.7.0-alpha.445

package/lib/module/CollapsiblePagerView.web.js

@@ -1,9 +1,10 @@
 "use strict";
 
 import React from "react";
-import { I18nManager, Platform, StyleSheet, View } from "react-native";
+import { createNamedIcon } from "@onekeyfe/react-native-image/icon/dom";
+import { I18nManager, Platform, processColor, StyleSheet, View } from "react-native";
 import { WebCollapsiblePagerPage } from "./WebCollapsiblePagerPage.js";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 const COLLAPSE_ANIMATION_NAME = "ok-collapsible-pager-collapse";
 const COLLAPSE_STYLE_ID = "ok-collapsible-pager-styles";
 const PAGER_HEADER_INSET = "--ok-collapsible-pager-header-inset";
@@ -48,6 +49,10 @@ export class CollapsiblePagerView extends React.PureComponent {
   };
   root = null;
   track = null;
+  tabProgress = null;
+  tabProgressFrame = null;
+  tabProgressGeneration = 0;
+  tabButtons = new Map();
   headerSlot = null;
   stickySlot = null;
   cssTimelineSupported = false;
@@ -80,6 +85,7 @@ export class CollapsiblePagerView extends React.PureComponent {
   configureFrame = null;
   pendingTopFrame = null;
   transitionTimer = null;
+  transitionGeneration = 0;
   pageScrollState = "idle";
   configuredScrollElement = null;
   timelineName = `--ok-collapsible-pager-${++collapsiblePagerWebInstance}`;
@@ -115,6 +121,9 @@ export class CollapsiblePagerView extends React.PureComponent {
     this.scheduleScrollConfiguration();
     this.syncFallbackHeader();
     this.notifyMountedPagesChanged();
+    this.syncToolbar();
+    this.tabProgress = this.state.selectedPage;
+    this.syncTabColors();
     this.emitDiagnostics("mounted");
   }
   componentDidUpdate(previousProps, _previousState, routeSnapshot) {
@@ -166,12 +175,17 @@ export class CollapsiblePagerView extends React.PureComponent {
     this.scheduleScrollConfiguration();
     this.syncFallbackHeader();
     this.notifyMountedPagesChanged();
+    this.syncToolbar();
+    if (previousProps.isActive === false && this.props.isActive !== false) this.readTabProgress();
+    if (this.props.isActive === false || !this.tabColorWeights()) this.cancelTabProgressFrame();
+    this.syncTabColors();
   }
   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.setToolbarSlot(null);
     this.selectionRestoreToken += 1;
     this.cancelPendingTopFrame();
     this.savePageOffset(this.state.selectedPage);
@@ -214,6 +228,7 @@ export class CollapsiblePagerView extends React.PureComponent {
   };
   observeChrome() {
     this.chromeObserver = new ResizeObserver(this.scheduleChromeMeasurement);
+    if (this.root) this.chromeObserver.observe(this.root);
     if (this.headerContent) this.chromeObserver.observe(this.headerContent);
     if (this.stickyContent) this.chromeObserver.observe(this.stickyContent);
     this.scheduleChromeMeasurement();
@@ -232,6 +247,8 @@ export class CollapsiblePagerView extends React.PureComponent {
       this.measuredStickyHeight = nextSticky;
       this.headerMeasured = Boolean(header?.isConnected);
       this.stickyMeasured = Boolean(sticky?.isConnected);
+      this.syncToolbar();
+      this.syncTabColors();
       if (headerChanged || stickyChanged) {
         this.forceUpdate();
         this.scheduleScrollConfiguration();
@@ -442,29 +459,138 @@ export class CollapsiblePagerView extends React.PureComponent {
     }));
   }
   finishPageTransition = () => {
+    this.transitionGeneration += 1;
     if (this.transitionTimer !== null) {
       clearTimeout(this.transitionTimer);
       this.transitionTimer = null;
     }
+    this.readTabProgress();
+    this.cancelTabProgressFrame();
+    this.syncTabColors();
     this.emitPageScrollState("idle");
+    this.syncToolbar();
   };
   beginPageTransition() {
+    this.suspendToolbar();
     if (this.transitionTimer !== null) clearTimeout(this.transitionTimer);
+    const generation = ++this.transitionGeneration;
     this.emitPageScrollState("settling");
-    this.transitionTimer = setTimeout(this.finishPageTransition, 320);
+    this.transitionTimer = setTimeout(() => {
+      if (generation === this.transitionGeneration) this.finishPageTransition();
+    }, 320);
   }
   onTrackTransitionEnd = event => {
     if (event.target === this.track && event.propertyName === "transform") {
+      this.readTabProgress();
+      if (this.tabColorWeights() && this.tabProgress !== null && Math.abs(this.tabProgress - this.state.selectedPage) > 0.001) return;
       this.finishPageTransition();
     }
   };
   setTrack = node => {
     const track = webElement(node);
     if (track === this.track) return;
+    this.cancelTabProgressFrame();
     this.track?.removeEventListener("transitionend", this.onTrackTransitionEnd);
     this.track = track;
     this.track?.addEventListener("transitionend", this.onTrackTransitionEnd);
   };
+  cancelTabProgressFrame() {
+    this.tabProgressGeneration += 1;
+    if (this.tabProgressFrame !== null) cancelAnimationFrame(this.tabProgressFrame);
+    this.tabProgressFrame = null;
+  }
+  readTabProgress() {
+    const track = this.track;
+    const width = this.root?.getBoundingClientRect().width ?? 0;
+    if (!track?.isConnected || width <= 0) return null;
+    const transform = track.ownerDocument.defaultView?.getComputedStyle(track).transform;
+    const matrix = transform?.match(/^matrix(3d)?\(([^)]+)\)$/);
+    const offset = matrix ? Number(matrix[2].split(",")[matrix[1] ? 12 : 4]) : transform === "none" ? 0 : NaN;
+    if (!Number.isFinite(offset)) return null;
+    this.tabProgress = Math.min(Math.max(0, -offset / width), Math.max(0, this.pages().length - 1));
+    return this.tabProgress;
+  }
+  startTabProgressFrames() {
+    this.cancelTabProgressFrame();
+    if (!this.tabColorWeights() || typeof requestAnimationFrame !== "function") return;
+    const track = this.track;
+    const root = this.root;
+    const width = root?.getBoundingClientRect().width ?? 0;
+    if (!track?.isConnected || !root?.isConnected || width <= 0 || this.props.isActive === false) return;
+    const generation = this.tabProgressGeneration;
+    const selection = this.selectionRestoreToken;
+    const keys = JSON.stringify(this.pages().map(pageKey));
+    const owner = this.pageScrollElement(this.state.selectedPage);
+    const sample = () => {
+      if (generation !== this.tabProgressGeneration || this.disposed) return;
+      this.tabProgressFrame = null;
+      if (this.track !== track || this.root !== root || !track.isConnected || !root.isConnected || this.props.isActive === false || selection !== this.selectionRestoreToken || keys !== JSON.stringify(this.pages().map(pageKey)) || owner !== this.pageScrollElement(this.state.selectedPage) || width !== root.getBoundingClientRect().width || !this.tabColorWeights()) {
+        this.cancelTabProgressFrame();
+        this.readTabProgress();
+        this.syncTabColors();
+        if (this.transitionTimer !== null) this.startTabProgressFrames();
+        return;
+      }
+      this.readTabProgress();
+      this.syncTabColors();
+      if (this.transitionTimer !== null) this.tabProgressFrame = requestAnimationFrame(sample);
+    };
+    sample();
+  }
+  tabColorWeights() {
+    const config = this.props.nativeTabBar;
+    if (!config?.controlled || config.style?.variant !== "text" || this.tabProgress === null) return null;
+    const keys = [];
+    React.Children.forEach(this.props.children, child => {
+      if (child !== null && child !== undefined && typeof child !== "boolean") keys.push(pageKey(child, keys.length));
+    });
+    const itemKeys = config.items.map(item => item.key);
+    if (!keys.length || !keys.includes(config.selectedKey ?? "") || new Set(keys).size !== keys.length || new Set(itemKeys).size !== itemKeys.length || keys.some(key => !itemKeys.includes(key))) return null;
+    const progress = Math.min(Math.max(0, this.tabProgress), keys.length - 1);
+    const source = Math.floor(progress);
+    const destination = Math.min(source + 1, keys.length - 1);
+    const fraction = progress - source;
+    return new Map(keys.map((key, index) => [key, index === source ? 1 - fraction : index === destination ? fraction : 0]));
+  }
+  tabFontOwnerKey(weights) {
+    const config = this.props.nativeTabBar;
+    const semantic = config?.controlled ? config.selectedKey : config?.items[this.state.selectedPage]?.key;
+    if (!weights || this.tabProgress === null) return semantic;
+    const keys = Array.from(weights.keys());
+    const progress = Math.min(Math.max(0, this.tabProgress), keys.length - 1);
+    return keys[Math.floor(progress + 0.5)];
+  }
+  tabColor(selected, weight) {
+    const style = this.props.nativeTabBar?.style;
+    const active = style?.activeTextColor ?? "#000000";
+    const inactive = style?.inactiveTextColor ?? "#666666";
+    if (weight === undefined) return String(selected ? active : inactive);
+    if (weight <= 0) return String(inactive);
+    if (weight >= 1) return String(active);
+    const first = processColor(inactive);
+    const last = processColor(active);
+    if (typeof first !== "number" || typeof last !== "number") return String(selected ? active : inactive);
+    const channel = shift => (first >>> shift & 255) * (1 - weight) + (last >>> shift & 255) * weight;
+    return `rgba(${Math.round(channel(16))}, ${Math.round(channel(8))}, ${Math.round(channel(0))}, ${(channel(24) / 255).toFixed(4)})`;
+  }
+  syncTabColors() {
+    const weights = this.tabColorWeights();
+    const config = this.props.nativeTabBar;
+    if (!config) return;
+    const selectedKey = config.controlled ? config.selectedKey : config.items[this.state.selectedPage]?.key;
+    const fontOwnerKey = this.tabFontOwnerKey(weights);
+    for (const [key, button] of this.tabButtons) {
+      const fontSelected = key === fontOwnerKey;
+      button.style.color = this.tabColor(key === selectedKey, weights ? weights.get(key) ?? 0 : undefined);
+      button.style.fontWeight = config.style?.variant === "text" && fontSelected ? "600" : "500";
+      const fontFamily = (fontSelected ? config.style?.activeFontFamily ?? config.style?.fontFamily : config.style?.fontFamily) ?? "";
+      if (config.controlled && config.style?.variant === "text") {
+        button.style.fontFamily = config.style?.fontFamily ?? "";
+        const label = button.querySelector(".ok-pager-tab-label");
+        if (label) label.style.fontFamily = fontFamily;
+      } else button.style.fontFamily = fontFamily;
+    }
+  }
   pageScrollElement(index) {
     const pageHost = this.pageHosts.get(index);
     return pageHost?.querySelector("[data-collapsible-pager-scroll]") ?? pageHost?.querySelector(".ok-native-list-viewport") ?? pageHost;
@@ -479,7 +605,9 @@ export class CollapsiblePagerView extends React.PureComponent {
     this.root?.removeEventListener("touchend", this.onOverlayTouchEnd);
     this.root?.removeEventListener("touchcancel", this.onOverlayTouchEnd);
     this.overlayTouch = null;
+    if (this.root) this.chromeObserver?.unobserve(this.root);
     this.root = root;
+    if (root) this.chromeObserver?.observe(root);else this.suspendToolbar();
     root?.addEventListener("ok-collapsible-pager-scroll-key-changed", this.onScrollOwnerIdentityChanged);
     root?.addEventListener("wheel", this.onOverlayWheel, {
       passive: false
@@ -749,11 +877,15 @@ export class CollapsiblePagerView extends React.PureComponent {
     if (this.routeTarget && this.routeTarget.key !== expectedKey) this.setRouteTarget(null);
     this.cancelPendingTopFrame();
     this.savePageOffset(this.state.selectedPage);
-    if (animated) this.beginPageTransition();else this.finishPageTransition();
+    if (animated) this.beginPageTransition();else {
+      this.finishPageTransition();
+      this.tabProgress = position;
+    }
     this.setState({
       selectedPage: position,
       animateTransition: animated
     }, () => {
+      if (animated) this.startTabProgressFrames();
       this.scheduleScrollConfiguration();
       const restore = () => {
         if (this.selectionRestoreToken !== selectionToken || this.state.selectedPage !== position || this.pages().map(pageKey)[position] !== expectedKey || !this.pageScrollElement(position)?.isConnected) return;
@@ -824,6 +956,7 @@ export class CollapsiblePagerView extends React.PureComponent {
       this.cancelPendingTopFrame();
       this.horizontalTouch = true;
       this.emitPageScrollState("dragging");
+      this.suspendToolbar();
     }
   };
   onTouchEnd = event => {
@@ -856,9 +989,387 @@ export class CollapsiblePagerView extends React.PureComponent {
     this.horizontalTouch = false;
     if (wasHorizontal) this.finishPageTransition();
   };
+  toolbarSlot = null;
+  toolbarButton = null;
+  toolbarIconIdentity = "";
+  toolbarLoadedIcon = null;
+  toolbarPendingIdentity = "";
+  toolbarReadyIcon = null;
+  toolbarFailedIdentity = "";
+  toolbarAnimation = null;
+  toolbarPresence = false;
+  toolbarPresenceInterrupted = false;
+  toolbarImage = null;
+  toolbarGeneration = 0;
+  ownsSettledToolbar() {
+    return this.props.nativeTabBar?.controlled === true && this.props.nativeTabBar.toolbar !== undefined;
+  }
+  toolbarCanCommit() {
+    if (!this.ownsSettledToolbar()) return true;
+    if (this.disposed || this.props.isActive === false || this.horizontalTouch || this.transitionTimer !== null || this.pageScrollState !== "idle" || !this.root?.isConnected) return false;
+    const actual = this.readTabProgress();
+    if (actual === null || Math.abs(actual - this.state.selectedPage) > 0.001) return false;
+    const config = this.props.nativeTabBar;
+    const keys = [];
+    React.Children.forEach(this.props.children, child => {
+      if (child !== null && child !== undefined && typeof child !== "boolean") keys.push(pageKey(child, keys.length));
+    });
+    const itemKeys = config.items.map(item => item.key);
+    const valid = keys.length > 0 && new Set(keys).size === keys.length && new Set(itemKeys).size === itemKeys.length && keys.every(key => itemKeys.includes(key));
+    return !valid || !keys.includes(config.selectedKey ?? "") || keys[this.state.selectedPage] === config.selectedKey;
+  }
+  cancelToolbarPending() {
+    if (this.toolbarPendingIdentity || this.toolbarImage || this.toolbarReadyIcon) this.toolbarGeneration += 1;
+    if (this.toolbarImage) this.toolbarImage.onload = this.toolbarImage.onerror = null;
+    this.toolbarImage = null;
+    this.toolbarPendingIdentity = "";
+    this.toolbarReadyIcon = null;
+  }
+  setToolbarInteractive(enabled) {
+    const button = this.toolbarButton;
+    if (!button) return;
+    if (!enabled) {
+      if (button.ownerDocument.activeElement === button) button.blur();
+      if (this.toolbarTouchKey !== undefined) this.toolbarTouchKey = null;
+    }
+    button.disabled = !enabled;
+    button.style.pointerEvents = enabled ? "auto" : "none";
+    button.tabIndex = enabled ? 0 : -1;
+    button.setAttribute("aria-hidden", String(!enabled));
+  }
+  suspendToolbar() {
+    if (!this.ownsSettledToolbar()) return;
+    this.setToolbarInteractive(false);
+    this.cancelToolbarPending();
+    if (this.toolbarAnimation && this.toolbarButton) {
+      const opacity = this.toolbarButton.ownerDocument.defaultView?.getComputedStyle(this.toolbarButton).opacity;
+      this.toolbarAnimation.cancel();
+      this.toolbarAnimation = null;
+      this.toolbarButton.style.opacity = opacity || this.toolbarButton.style.opacity;
+      this.toolbarPresenceInterrupted = true;
+    }
+  }
+  setToolbarSlot = slot => {
+    if (this.toolbarSlot === slot) return;
+    this.toolbarAnimation?.cancel();
+    this.toolbarAnimation = null;
+    this.cancelToolbarPending();
+    this.toolbarGeneration += 1;
+    this.toolbarButton?.remove();
+    this.toolbarButton = null;
+    this.toolbarOwnerKey = undefined;
+    this.toolbarOwnerEntry = undefined;
+    this.toolbarIconIdentity = "";
+    this.toolbarLoadedIcon = null;
+    this.toolbarFailedIdentity = "";
+    this.toolbarPresence = false;
+    this.toolbarPresenceInterrupted = false;
+    this.toolbarTouchKey = null;
+    this.toolbarSlot = slot;
+    if (slot) this.syncToolbar();
+  };
+  animateToolbar(visible) {
+    const button = this.toolbarButton;
+    if (!button || this.toolbarPresence === visible && !this.toolbarPresenceInterrupted) return;
+    this.toolbarPresenceInterrupted = false;
+    this.toolbarPresence = visible;
+    const current = button.ownerDocument.defaultView?.getComputedStyle(button).opacity ?? button.style.opacity;
+    this.toolbarAnimation?.cancel();
+    this.toolbarAnimation = null;
+    button.style.opacity = visible ? "1" : "0";
+    const finish = () => {
+      button.hidden = !visible;
+      if (!visible && !this.toolbarOwnerKey && this.toolbarButton === button) {
+        button.remove();
+        this.toolbarButton = null;
+      }
+    };
+    if (typeof button.animate !== "function") {
+      finish();
+      return;
+    }
+    button.hidden = false;
+    const animation = button.animate([{
+      opacity: current || "0"
+    }, {
+      opacity: visible ? "1" : "0"
+    }], {
+      duration: 100,
+      fill: "forwards"
+    });
+    this.toolbarAnimation = animation;
+    animation.onfinish = () => {
+      if (this.toolbarAnimation !== animation || this.toolbarButton !== button || this.toolbarPresence !== visible) return;
+      animation.cancel();
+      this.toolbarAnimation = null;
+      finish();
+    };
+  }
+  hideToolbar(failed) {
+    this.setToolbarInteractive(false);
+    this.toolbarOwnerKey = undefined;
+    this.toolbarOwnerEntry = undefined;
+    this.toolbarButton?.removeAttribute("data-testid");
+    this.toolbarButton?.removeAttribute("aria-label");
+    if (failed) this.toolbarButton?.replaceChildren();
+    this.animateToolbar(false);
+  }
+  commitToolbar(key, entry, icon, identity) {
+    const button = this.toolbarButton;
+    if (!button || !this.toolbarCanCommit()) return;
+    if (this.toolbarOwnerKey !== key && this.toolbarTouchKey !== undefined) this.toolbarTouchKey = null;
+    const size = Math.min(128, Math.max(1, entry.size ?? 38));
+    const iconSize = Math.min(size, Math.max(1, entry.iconSize ?? 24));
+    const contentWidth = Math.min(size, Math.max(0, entry.contentWidth ?? 24));
+    const trailingInset = Math.min(128, Math.max(0, entry.trailingInset ?? 20));
+    if (button.firstChild !== icon) button.replaceChildren(icon);
+    Object.assign(button.style, {
+      position: "absolute",
+      width: `${size}px`,
+      height: `${size}px`,
+      borderRadius: "50%",
+      top: "50%",
+      transform: "translateY(-50%)",
+      insetInlineEnd: `${trailingInset - (size - contentWidth) / 2}px`,
+      padding: `${(size - iconSize) / 2}px`,
+      color: entry.iconColor ?? "#000000"
+    });
+    button.style.setProperty("--pager-toolbar-base", entry.selected ? entry.selectedBackgroundColor ?? "transparent" : "transparent");
+    button.style.setProperty("--pager-toolbar-hover", entry.hoverBackgroundColor ?? "transparent");
+    button.style.setProperty("--pager-toolbar-pressed", entry.pressedBackgroundColor ?? "transparent");
+    button.setAttribute("aria-label", entry.accessibilityLabel ?? "");
+    if (entry.testID) button.setAttribute("data-testid", entry.testID);else button.removeAttribute("data-testid");
+    this.toolbarOwnerKey = key;
+    this.toolbarOwnerEntry = {
+      ...entry
+    };
+    this.toolbarIconIdentity = identity;
+    this.toolbarLoadedIcon = icon;
+    this.toolbarPendingIdentity = "";
+    this.toolbarReadyIcon = null;
+    this.toolbarImage = null;
+    this.animateToolbar(true);
+    this.setToolbarInteractive(true);
+  }
+  syncToolbar() {
+    const slot = this.toolbarSlot;
+    if (!slot) return;
+    if (!this.toolbarCanCommit()) {
+      this.suspendToolbar();
+      return;
+    }
+    const config = this.props.nativeTabBar;
+    const key = config?.controlled ? config.selectedKey : config?.items[this.state.selectedPage]?.key;
+    const entry = key ? config?.toolbar?.[key] : undefined;
+    if (!entry?.iconName || !key) {
+      this.cancelToolbarPending();
+      this.hideToolbar(false);
+      return;
+    }
+    let button = this.toolbarButton;
+    if (!button) {
+      button = slot.ownerDocument.createElement("button");
+      button.type = "button";
+      button.className = "ok-pager-toolbar";
+      button.style.opacity = "0";
+      button.hidden = true;
+      button.disabled = true;
+      button.addEventListener("pointerdown", () => {
+        this.toolbarTouchKey = button.disabled ? null : this.toolbarOwnerKey ?? null;
+      });
+      button.addEventListener("pointercancel", () => {
+        this.toolbarTouchKey = null;
+      });
+      button.onclick = event => {
+        if (this.toolbarButton !== event.currentTarget) return;
+        const pointer = event.detail !== 0;
+        const touched = this.toolbarTouchKey;
+        if (pointer) this.toolbarTouchKey = undefined;
+        const current = this.props.nativeTabBar;
+        const semantic = current?.controlled ? current.selectedKey : current?.items[this.state.selectedPage]?.key;
+        const owner = this.toolbarOwnerKey;
+        if (button.disabled || !this.toolbarCanCommit() || !owner || owner !== semantic || !this.toolbarOwnerEntry || pointer && touched !== owner) return;
+        const rect = button.getBoundingClientRect();
+        this.props.onNativeToolbarPress?.({
+          nativeEvent: {
+            key: owner,
+            anchorRect: {
+              x: rect.x,
+              y: rect.y,
+              width: rect.width,
+              height: rect.height
+            }
+          }
+        });
+      };
+      slot.appendChild(button);
+      this.toolbarButton = button;
+      this.toolbarPresence = false;
+    }
+    const size = Math.min(128, Math.max(1, entry.size ?? 38));
+    const iconSize = Math.min(size, Math.max(1, entry.iconSize ?? 24));
+    const identity = `${entry.iconName}|${entry.iconColor ?? "#000000"}|${iconSize}`;
+    if (identity === this.toolbarIconIdentity && this.toolbarLoadedIcon) {
+      this.cancelToolbarPending();
+      this.commitToolbar(key, entry, this.toolbarLoadedIcon, identity);
+      return;
+    }
+    if (identity === this.toolbarPendingIdentity) {
+      if (this.toolbarReadyIcon) this.commitToolbar(key, entry, this.toolbarReadyIcon, identity);
+      return;
+    }
+    this.cancelToolbarPending();
+    this.setToolbarInteractive(false);
+    this.toolbarPendingIdentity = identity;
+    if (identity === this.toolbarFailedIdentity) {
+      this.hideToolbar(true);
+      return;
+    }
+    const generation = ++this.toolbarGeneration;
+    const icon = createNamedIcon(button.ownerDocument, entry.iconName);
+    icon.setAttribute("width", String(iconSize));
+    icon.setAttribute("height", String(iconSize));
+    const use = icon.querySelector("use");
+    const fail = () => {
+      if (this.toolbarGeneration !== generation || this.toolbarPendingIdentity !== identity) return;
+      this.toolbarImage = null;
+      this.toolbarFailedIdentity = identity;
+      this.hideToolbar(true);
+    };
+    if (!use) {
+      fail();
+      return;
+    }
+    const ready = () => {
+      if (this.disposed || this.toolbarGeneration !== generation || this.toolbarPendingIdentity !== identity) return;
+      this.toolbarImage = null;
+      this.toolbarReadyIcon = icon;
+      this.syncToolbar();
+    };
+    const href = use.getAttribute("href") ?? use.getAttribute("xlink:href") ?? "";
+    const view = button.ownerDocument.defaultView;
+    if (view?.Image && href.split("#")[0]) {
+      const image = new view.Image();
+      this.toolbarImage = image;
+      image.onload = ready;
+      image.onerror = fail;
+      image.src = href.split("#")[0];
+    } else ready();
+  }
+  renderNativeTabBar() {
+    const config = this.props.nativeTabBar;
+    if (!config?.items.length || config.style?.variant !== "text" && config.controlled !== true && config.toolbar === undefined) return null;
+    const style = config.style;
+    const variant = style?.variant ?? "underline";
+    const selectedKey = config.controlled ? config.selectedKey : config.items[this.state.selectedPage]?.key;
+    const toolbarEntries = config.toolbar === undefined ? undefined : Object.values(config.toolbar);
+    const reservedWidth = toolbarEntries === undefined ? 0 : toolbarEntries.length === 0 ? 44 : Math.max(...toolbarEntries.map(entry => {
+      const size = Math.min(128, Math.max(1, entry.size ?? 38));
+      return Math.min(size, Math.max(0, entry.contentWidth ?? 24)) + Math.min(128, Math.max(0, entry.trailingInset ?? 20));
+    }));
+    const segmented = variant === "segmented";
+    const reserveTextFaces = config.controlled && variant === "text";
+    const colorWeights = this.tabColorWeights();
+    const fontOwnerKey = this.tabFontOwnerKey(colorWeights);
+    return /*#__PURE__*/React.createElement("div", {
+      className: "ok-pager-tab-bar",
+      dir: this.props.layoutDirection === "rtl" || (this.props.layoutDirection ?? "locale") === "locale" && I18nManager.isRTL ? "rtl" : "ltr",
+      style: {
+        display: "flex",
+        alignItems: "center",
+        position: "relative",
+        height: style?.height ?? 44,
+        backgroundColor: String(style?.backgroundColor ?? "transparent"),
+        minWidth: 0
+      }
+    }, /*#__PURE__*/React.createElement("style", null, `.ok-pager-tab{box-sizing:border-box;appearance:none;border:0;background:transparent;cursor:default;white-space:nowrap;flex-shrink:0;line-height:normal}.ok-pager-toolbar{box-sizing:border-box;appearance:none;border:1px solid transparent;cursor:default;display:flex;align-items:center;justify-content:center;background:var(--pager-toolbar-base)}.ok-pager-toolbar:hover:enabled{background:var(--pager-toolbar-hover)}.ok-pager-toolbar:active:enabled{background:var(--pager-toolbar-pressed)}`), /*#__PURE__*/React.createElement("div", {
+      role: "tablist",
+      style: {
+        display: "flex",
+        overflowX: segmented ? "hidden" : "auto",
+        flex: 1,
+        padding: `${style?.contentPaddingVertical ?? 0}px ${style?.contentPaddingHorizontal ?? 20}px`,
+        gap: style?.itemSpacing ?? 8
+      }
+    }, ...config.items.map((item, position) => {
+      const selected = item.key === selectedKey;
+      const fontSelected = item.key === fontOwnerKey;
+      return /*#__PURE__*/React.createElement("button", {
+        key: item.key,
+        role: "tab",
+        type: "button",
+        className: "ok-pager-tab",
+        "aria-selected": selected,
+        ref: button => {
+          if (button) this.tabButtons.set(item.key, button);else this.tabButtons.delete(item.key);
+        },
+        "aria-label": item.accessibilityLabel ?? item.title,
+        "data-testid": item.testID,
+        style: {
+          padding: variant === "text" ? "6px 10px" : "6px 8px",
+          minWidth: 44,
+          height: (style?.height ?? 44) - 2 * (style?.contentPaddingVertical ?? 0),
+          fontSize: style?.fontSize ?? (variant === "text" ? 18 : 16),
+          fontWeight: variant === "text" && fontSelected ? 600 : 500,
+          fontFamily: reserveTextFaces ? style?.fontFamily : fontSelected ? style?.activeFontFamily ?? style?.fontFamily : style?.fontFamily,
+          display: reserveTextFaces ? "inline-grid" : undefined,
+          gridTemplateAreas: reserveTextFaces ? '"label"' : undefined,
+          alignItems: reserveTextFaces ? "center" : undefined,
+          color: this.tabColor(selected, colorWeights ? colorWeights.get(item.key) ?? 0 : undefined),
+          flex: segmented ? 1 : undefined,
+          borderRadius: segmented ? 999 : 0,
+          backgroundColor: segmented && selected ? String(style?.indicatorColor ?? "transparent") : "transparent",
+          borderBottom: variant === "underline" && selected ? `${style?.indicatorHeight ?? 2}px solid ${String(style?.indicatorColor ?? "#000000")}` : undefined
+        },
+        onClick: () => {
+          if (!config.controlled) {
+            const animated = this.props.nativeTabPressAnimationEnabled ?? Math.abs(position - this.state.selectedPage) <= 1;
+            if (animated) this.setPage(position);else this.setPageWithoutAnimation(position);
+          }
+          this.props.onNativeTabPress?.({
+            nativeEvent: {
+              position,
+              key: item.key
+            }
+          });
+        }
+      }, reserveTextFaces ? [/*#__PURE__*/React.createElement("span", {
+        key: "label",
+        className: "ok-pager-tab-label",
+        style: {
+          gridArea: "label",
+          fontFamily: fontSelected ? style?.activeFontFamily ?? style?.fontFamily : style?.fontFamily
+        }
+      }, item.title), ...[false, true].map(active => /*#__PURE__*/React.createElement("span", {
+        key: active ? "active-width" : "normal-width",
+        "aria-hidden": true,
+        style: {
+          gridArea: "label",
+          visibility: "hidden",
+          pointerEvents: "none",
+          userSelect: "none",
+          fontWeight: active ? 600 : 500,
+          fontFamily: active ? style?.activeFontFamily ?? style?.fontFamily : style?.fontFamily
+        }
+      }, item.title))] : item.title);
+    })), config.toolbar !== undefined ? /*#__PURE__*/React.createElement("div", {
+      ref: this.setToolbarSlot,
+      className: "ok-pager-toolbar-slot",
+      style: {
+        flexShrink: 0,
+        width: reservedWidth,
+        height: "100%",
+        position: "relative"
+      }
+    }) : null);
+  }
   render() {
     const {
       children: _children,
+      nativeTabBar: _nativeTabBar,
+      nativeTabPressAnimationEnabled: _nativeTabPressAnimationEnabled,
+      onNativeTabPress: _onNativeTabPress,
+      onNativeToolbarPress: _onNativeToolbarPress,
       header,
       stickyHeader,
       topOverlay: _topOverlay,
@@ -927,9 +1438,11 @@ export class CollapsiblePagerView extends React.PureComponent {
           top: this.headerHeight,
           height: this.stickyHeaderHeight
         }, collapseAnimation],
-        children: this.hasExplicitStickyHeaderHeight ? stickyHeader : /*#__PURE__*/_jsx(View, {
+        children: this.hasExplicitStickyHeaderHeight ? /*#__PURE__*/_jsxs(_Fragment, {
+          children: [this.renderNativeTabBar(), stickyHeader]
+        }) : /*#__PURE__*/_jsxs(View, {
           ref: this.setStickyContent,
-          children: stickyHeader
+          children: [this.renderNativeTabBar(), stickyHeader]
         })
       }), /*#__PURE__*/_jsx(View, {
         ref: this.setTrack,

package/lib/module/CollapsiblePagerViewNativeComponent.ts

@@ -38,6 +38,10 @@ export type OnNativeTabPressEventData = Readonly<{
   position: CodegenTypes.Int32;
   key: string;
 }>;
+export type OnNativeToolbarPressEventData = Readonly<{
+  key: string;
+  anchorRect: Readonly<{ x: CodegenTypes.Double; y: CodegenTypes.Double; width: CodegenTypes.Double; height: CodegenTypes.Double }>;
+}>;
 export type OnScrollEdgeCapabilityEventData = Readonly<{ available: boolean }>;
 
 /**
@@ -60,6 +64,7 @@ export interface NativeProps extends ViewProps {
   externalTopOverlayTag?: CodegenTypes.WithDefault<CodegenTypes.Int32, 0>;
   pageKeys?: string;
   retainedPages?: string;
+  nativeTabBarConfig?: string;
   nativeTabBarItems?: string;
   nativeTabBarHeight?: CodegenTypes.Double;
   nativeTabBarVariant?: string;
@@ -81,6 +86,7 @@ export interface NativeProps extends ViewProps {
   onPageSelected?: CodegenTypes.DirectEventHandler<OnPageSelectedEventData>;
   onPageScrollStateChanged?: CodegenTypes.DirectEventHandler<OnPageScrollStateChangedEventData>;
   onCollapsibleStateChanged?: CodegenTypes.DirectEventHandler<OnCollapsibleStateChangedEventData>;
+  onNativeToolbarPress?: CodegenTypes.DirectEventHandler<OnNativeToolbarPressEventData>;
   onNativeTabPress?: CodegenTypes.DirectEventHandler<OnNativeTabPressEventData>;
   onNativeSubHeaderPress?: CodegenTypes.DirectEventHandler<OnNativeTabPressEventData>;
   onScrollEdgeCapability?: CodegenTypes.DirectEventHandler<OnScrollEdgeCapabilityEventData>;

package/lib/module/NativeScrollerNativeComponent.ts

@@ -8,7 +8,6 @@ import {
   type ViewProps,
 } from "react-native";
 
-
 export type NativeScrollerScrollEvent = Readonly<{
   contentInset: Readonly<{
     top: CodegenTypes.Double;