@onekeyfe/react-native-native-list 6.7.0-alpha.430 → 6.7.0-alpha.435

package/lib/module/validation.js

@@ -702,66 +702,6 @@ function assertButtonGroup(row, path) {
     }
   });
 }
-const MAX_TITLE_SEGMENTS = 4;
-const HEX_COLOR_PATTERN = /^#[0-9a-f]{6}([0-9a-f]{2})?$/i;
-function assertTitleSegments(value, path) {
-  if (!Array.isArray(value) || value.length === 0 || value.length > MAX_TITLE_SEGMENTS) fail(path, `must hold 1...${MAX_TITLE_SEGMENTS} segments`);
-  let shrinking = 0;
-  value.forEach((item, index) => {
-    const segmentPath = `${path}[${index}]`;
-    const segment = protocolObject(item, segmentPath);
-    assertUnknownKeys(segment, ['text', 'tone', 'fontWeight', 'shrink', 'maxWidthRatio'], segmentPath, 'title segment key');
-    const {
-      text,
-      tone,
-      fontWeight,
-      shrink,
-      maxWidthRatio
-    } = segment;
-    if (typeof text !== 'string' || !text.trim()) fail(`${segmentPath}.text`, 'must be non-blank');
-    assertText(text, `${segmentPath}.text`);
-    if (tone !== undefined && tone !== 'primary' && tone !== 'secondary') fail(`${segmentPath}.tone`, 'must be primary or secondary');
-    if (fontWeight !== undefined && fontWeight !== 'regular' && fontWeight !== 'medium') fail(`${segmentPath}.fontWeight`, 'must be regular or medium');
-    if (shrink !== undefined && typeof shrink !== 'boolean') fail(`${segmentPath}.shrink`, 'must be a boolean');
-    if (shrink) shrinking += 1;
-    if (maxWidthRatio !== undefined && (typeof maxWidthRatio !== 'number' || !Number.isFinite(maxWidthRatio) || maxWidthRatio <= 0 || maxWidthRatio > 1)) fail(`${segmentPath}.maxWidthRatio`, 'must be finite within (0, 1]');
-  });
-  if (shrinking > 1) fail(path, 'allows at most one shrinking segment');
-}
-function assertTitleLeadingIcon(value, path) {
-  const icon = protocolObject(value, path);
-  assertUnknownKeys(icon, ['name', 'tintColor', 'accessibilityLabel'], path, 'title leading icon key');
-  const {
-    name,
-    tintColor,
-    accessibilityLabel
-  } = icon;
-  if (typeof name !== 'string' || !name.trim()) fail(`${path}.name`, 'must be non-blank');
-  if (tintColor !== undefined && (typeof tintColor !== 'string' || !HEX_COLOR_PATTERN.test(tintColor))) fail(`${path}.tintColor`, 'must be #RRGGBB or #RRGGBBAA');
-  if (accessibilityLabel !== undefined && typeof accessibilityLabel !== 'string') fail(`${path}.accessibilityLabel`, 'must be a string');
-}
-function assertIdentityTitleRuns(row, path) {
-  if (row.titleSegments !== undefined) {
-    assertTitleSegments(row.titleSegments, `${path}.titleSegments`);
-    // titleMatch ranges index `title`, which the runs replace on screen.
-    if (row.titleMatch?.length) fail(`${path}.titleMatch`, 'cannot be combined with titleSegments');
-    if (row.presentation === 'walletSidebar') fail(`${path}.titleSegments`, 'is not supported with walletSidebar');
-  }
-  if (row.titleLeadingIcon !== undefined) {
-    assertTitleLeadingIcon(row.titleLeadingIcon, `${path}.titleLeadingIcon`);
-    if (row.presentation === 'walletSidebar') fail(`${path}.titleLeadingIcon`, 'is not supported with walletSidebar');
-  }
-}
-
-/** Production keeps decorative title runs only when they pass the rules. */
-function passesTitleRunRules(check) {
-  try {
-    check();
-    return true;
-  } catch {
-    return false;
-  }
-}
 function assertIdentityExtras(row, path) {
   for (const field of ['titleIcon', 'secondaryTitleIcon']) {
     const titleIcon = row[field];
@@ -993,7 +933,6 @@ function assertRow(row, index, path = `rows[${index}]`) {
         if (suffix.maxWidth !== undefined && (!Number.isFinite(suffix.maxWidth) || suffix.maxWidth < 0 || suffix.maxWidth > 4096)) fail(`${path}.titleSuffixes[${index}].maxWidth`, 'must be finite within 0...4096');
       });
       assertIdentityExtras(row, path);
-      assertIdentityTitleRuns(row, path);
       assertText(row.subtitle, `${path}.subtitle`);
       // OneKey patch: selector text segments truncate independently.
       row.subtitleSegments?.forEach((segment, segmentIndex) => {
@@ -1287,7 +1226,7 @@ function assertSnapshotContract(snapshot) {
 }
 const COMMON_ROW_FIELDS = ['height', 'heightRounding', 'testID', 'opacity', 'backgroundColor', 'backgroundFullWidth', 'pressDisabled', 'key', 'revision', 'sectionKey', 'groupId', 'groupPosition', 'size', 'density', 'disabled', 'selected', 'accessibilityLabel', 'separator', 'type', 'style'];
 const ROW_FIELDS = {
-  identity: [...COMMON_ROW_FIELDS, 'contentHeight', 'longPressActionKey', 'titleMatch', 'titleActionKey', 'titleActionOnHover', 'subtitleSegments', 'presentation', 'leading', 'leadingAction', 'title', 'titleSuffixes', 'titleIcon', 'secondaryTitleIcon', 'titleImage', 'titleSegments', 'titleLeadingIcon', 'subtitle', 'tertiary', 'tertiaryTone', 'titleLines', 'subtitleLines', 'badges', 'trailing', 'draggable'],
+  identity: [...COMMON_ROW_FIELDS, 'contentHeight', 'longPressActionKey', 'titleMatch', 'titleActionKey', 'titleActionOnHover', 'subtitleSegments', 'presentation', 'leading', 'leadingAction', 'title', 'titleSuffixes', 'titleIcon', 'secondaryTitleIcon', 'titleImage', 'subtitle', 'tertiary', 'tertiaryTone', 'titleLines', 'subtitleLines', 'badges', 'trailing', 'draggable'],
   walletGroup: [...COMMON_ROW_FIELDS, 'parent', 'children', 'draggable'],
   rail: [...COMMON_ROW_FIELDS, 'visual', 'title', 'status', 'badge', 'draggable'],
   activity: [...COMMON_ROW_FIELDS, 'leading', 'hideLeading', 'secondaryLeading', 'title', 'description', 'status', 'primaryAmount', 'secondaryAmount', 'amounts', 'badges', 'presentation', 'fee', 'descriptionActionKey', 'footerActions'],
@@ -1303,7 +1242,7 @@ const ROW_FIELDS = {
 };
 const COMMON_PATCH_FIELDS = ['height', 'heightRounding', 'opacity', 'pressDisabled', 'revision', 'disabled', 'selected', 'accessibilityLabel', 'separator', 'style'];
 const PATCH_FIELDS = {
-  identity: [...COMMON_PATCH_FIELDS, 'contentHeight', 'longPressActionKey', 'titleMatch', 'titleActionKey', 'titleActionOnHover', 'subtitleSegments', 'leading', 'leadingAction', 'title', 'titleSuffixes', 'titleIcon', 'secondaryTitleIcon', 'titleImage', 'titleSegments', 'titleLeadingIcon', 'subtitle', 'tertiary', 'tertiaryTone', 'subtitleLines', 'badges', 'trailing'],
+  identity: [...COMMON_PATCH_FIELDS, 'contentHeight', 'longPressActionKey', 'titleMatch', 'titleActionKey', 'titleActionOnHover', 'subtitleSegments', 'leading', 'leadingAction', 'title', 'titleSuffixes', 'titleIcon', 'secondaryTitleIcon', 'titleImage', 'subtitle', 'tertiary', 'tertiaryTone', 'subtitleLines', 'badges', 'trailing'],
   rail: [...COMMON_PATCH_FIELDS, 'title', 'visual', 'status', 'badge'],
   activity: [...COMMON_PATCH_FIELDS, 'presentation', 'leading', 'title', 'badges', 'status', 'hideLeading', 'secondaryLeading', 'description', 'primaryAmount', 'secondaryAmount', 'amounts', 'fee', 'descriptionActionKey', 'footerActions'],
   message: [...COMMON_PATCH_FIELDS, 'presentation', 'title', 'unread', 'body', 'bodyLines', 'time', 'thumbnail'],
@@ -1323,7 +1262,7 @@ function protocolObject(value, path) {
 function protocolKey(value, path) {
   if (typeof value !== 'string' || value.trim().length === 0) fail(path, 'must be a non-blank string');
 }
-const PROTOCOL_ARRAY_FIELDS = new Set(['columns', 'titleSuffixes', 'titleSegments', 'cells', 'points', 'images', 'overlays', 'badges', 'trailing', 'footerActions', 'buttons', 'amounts', 'metrics', 'children', 'subtitleSegments', 'titleMatch', 'selectedKeys', 'segments', 'hoverSecondary', 'hoverImages', 'secondaryBadges', 'fallbackUris', 'probeOrder', 'priceSegments', 'textSegments', 'secondaryTextSegments', 'primaryTextSegments']);
+const PROTOCOL_ARRAY_FIELDS = new Set(['columns', 'titleSuffixes', 'cells', 'points', 'images', 'overlays', 'badges', 'trailing', 'footerActions', 'buttons', 'amounts', 'metrics', 'children', 'subtitleSegments', 'titleMatch', 'selectedKeys', 'segments', 'hoverSecondary', 'hoverImages', 'secondaryBadges', 'fallbackUris', 'probeOrder', 'priceSegments', 'textSegments', 'secondaryTextSegments', 'primaryTextSegments']);
 const PROTOCOL_NUMBER_FIELDS = new Set(['leadingContentMaxWidthRatio', 'height', 'width', 'fontSize', 'lineHeight', 'opacity', 'offsetY', 'offsetX', 'cornerRadius', 'borderWidth', 'horizontalPadding', 'verticalPadding', 'leadingGap', 'lineGap', 'titleBadgeGap', 'trailingGap', 'start', 'end', 'padding', 'offset', 'overscan', 'minWidth', 'flex', 'paddingStart', 'paddingEnd', 'changeWidth', 'changeHeight', 'changeCornerRadius', 'contentTrailingGap', 'subtitleTrailingPadding', 'partGap', 'contentPadding', 'contentPaddingHorizontal', 'contentPaddingTop', 'contentPaddingBottom', 'itemSpacing', 'gridColumns']);
 
 /** Validate only shapes that renderers dereference, not display budgets. */
@@ -1394,10 +1333,7 @@ function assertRowProtocol(row, path) {
   }
   if (row.height !== undefined && row.height < 0) fail(`${path}.height`, 'must be non-negative');
   if (row.type === 'identity') {
-    if (isDevelopment()) {
-      assertIdentityExtras(row, path);
-      assertIdentityTitleRuns(row, path);
-    }
+    if (isDevelopment()) assertIdentityExtras(row, path);
     if (row.titleSuffixes !== undefined && !Array.isArray(row.titleSuffixes)) fail(`${path}.titleSuffixes`, 'must be an array');
     row.titleSuffixes?.forEach((suffix, index) => {
       protocolObject(suffix, `${path}.titleSuffixes[${index}]`);
@@ -1647,8 +1583,6 @@ const NESTED_DECORATION_FIELDS = {
 };
 function sanitizeDecoration(value, field) {
   if (value === undefined || value === null) return undefined;
-  if (field === 'titleSegments') return passesTitleRunRules(() => assertTitleSegments(value, field)) ? value : undefined;
-  if (field === 'titleLeadingIcon') return passesTitleRunRules(() => assertTitleLeadingIcon(value, field)) ? value : undefined;
   if (!Array.isArray(value) && ['image', 'networkImage', 'thumbnail', 'source', 'images', 'hoverImages'].includes(field)) return sanitizeImage(value);
   if (['titleImage', 'titleIcon', 'secondaryTitleIcon', 'fallbackIcon', 'cornerIcon', 'media'].includes(field) && !isRecord(value)) return undefined;
   if (field === 'style' && typeof value !== 'string' && !isRecord(value)) return undefined;

package/lib/module/web/NativeListWebEngine.js

@@ -467,7 +467,7 @@ export const WEB_LIST_CSS = `
 .ok-native-list-trailing-button{appearance:none;box-sizing:border-box;flex:0 0 auto;padding:4px 10px;border:1px solid transparent;border-radius:9999px;background:var(--nl-button-bg,var(--nl-strong));color:var(--nl-button-text,var(--nl-primary));font:500 14px/20px var(--nl-font-medium);white-space:nowrap;cursor:pointer}.ok-native-list-trailing-button:hover:not(:disabled){background:var(--nl-button-hover,var(--nl-strong))}.ok-native-list-trailing-button:active:not(:disabled){background:var(--nl-button-pressed,var(--nl-pressed))}.ok-native-list-trailing-button:focus-visible{outline:2px solid var(--nl-button-focus,var(--nl-accent))}.ok-native-list-trailing-button:disabled{opacity:.4;cursor:default}
 .ok-native-list-icon-button.ok-native-list-tertiary-icon{box-sizing:border-box;flex:0 0 38px;width:38px;height:38px;margin:-7px;padding:6px;border:1px solid transparent;border-radius:9999px;color:var(--nl-icon-subdued);background:transparent}.ok-native-list-icon-button.ok-native-list-tertiary-icon:hover:not(:disabled){background:var(--nl-hover)}.ok-native-list-icon-button.ok-native-list-tertiary-icon:active:not(:disabled){background:var(--nl-pressed)}.ok-native-list-icon-button.ok-native-list-tertiary-icon:disabled{opacity:.4;cursor:default}
 .ok-native-list-icon-button.ok-native-list-tertiary-icon:focus-visible:not(:disabled){outline:2px solid var(--nl-accent)}
-.ok-native-list-identity-title-icon{flex:0 0 20px;width:20px;height:20px;display:inline-flex;align-items:center;justify-content:center;color:var(--nl-icon);font-size:20px}.ok-native-list-identity-title-leading-icon{flex:0 0 16px;width:16px;height:16px;display:inline-flex;align-items:center;justify-content:center;color:var(--nl-icon-subdued);font-size:16px}.ok-native-list-identity-title-text{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.ok-native-list-identity-title-icon{flex:0 0 20px;width:20px;height:20px;display:inline-flex;align-items:center;justify-content:center;color:var(--nl-icon);font-size:20px}.ok-native-list-identity-title-text{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .ok-native-list-account-row .ok-native-list-visual,.ok-native-list-account-action-row .ok-native-list-visual{width:32px;height:32px;flex-basis:32px}.ok-native-list-account-row .ok-native-list-visual>img,.ok-native-list-account-row .ok-native-list-visual-main,.ok-native-list-account-action-row .ok-native-list-visual>img,.ok-native-list-account-action-row .ok-native-list-visual-main{width:32px;height:32px}.ok-native-list-account-row .ok-native-list-visual>.ok-native-list-visual-corner{width:20px;height:20px;padding:2px}.ok-native-list-account-action-row .ok-native-list-visual{border-radius:8px!important}.ok-native-list-wallet-row .ok-native-list-title{color:var(--nl-secondary);font-size:12px;line-height:16px;font-weight:400;font-family:var(--nl-font-regular)}.ok-native-list-item[data-native-list-selected="true"]>.ok-native-list-wallet-row .ok-native-list-title{color:var(--nl-primary)}.ok-native-list-account-row .ok-native-list-title{font-size:16px;line-height:20px;font-weight:400;font-family:var(--nl-font-regular)}.ok-native-list-account-row .ok-native-list-secondary{font-size:14px;line-height:20px;font-weight:400;font-family:var(--nl-font-regular)}
 .ok-native-list-flex{display:flex;flex:1;min-width:0;flex-direction:column;justify-content:center}.ok-native-list-title{font-size:15px;line-height:20px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:var(--nl-font-semibold)}.ok-native-list-secondary{font-size:13px;line-height:18px;color:var(--nl-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ok-native-list-tertiary{color:var(--nl-secondary)}.ok-native-list-info{color:var(--nl-info)}
 .ok-native-list-identity-row .ok-native-list-title,.ok-native-list-identity-row .ok-native-list-amounts>span:first-child{font-size:16px;line-height:20px}.ok-native-list-identity-row .ok-native-list-secondary{font-size:14px;line-height:20px}

package/lib/module/web/templates/IdentityRowRenderer.js

@@ -11,54 +11,6 @@ function toneColor(tone, fallback) {
   if (tone === 'secondary') return 'var(--nl-secondary)';
   return fallback === 'secondary' ? 'var(--nl-secondary)' : 'var(--nl-primary)';
 }
-// Hidden from sight, still read: the runs themselves are hidden from
-// assistive technology in favor of `title`.
-const VISUALLY_HIDDEN = {
-  position: 'absolute',
-  width: '1px',
-  height: '1px',
-  overflow: 'hidden',
-  clip: 'rect(0 0 0 0)',
-  whiteSpace: 'nowrap'
-};
-function appendTitleRuns(document, target, row) {
-  const runs = createElement(document, 'span', 'ok-native-list-identity-title-runs');
-  runs.setAttribute('aria-hidden', 'true');
-  Object.assign(runs.style, {
-    display: 'flex',
-    flex: '1 1 auto',
-    minWidth: '0',
-    maxWidth: '100%',
-    overflow: 'hidden'
-  });
-  row.titleSegments?.forEach(segment => {
-    const run = createElement(document, 'span', 'ok-native-list-identity-title-run', segment.text);
-    // Only the shrinking run gives up width; a cap is a share of the line.
-    Object.assign(run.style, {
-      flex: segment.shrink ? '0 1 auto' : '0 0 auto',
-      minWidth: segment.shrink ? '0' : '',
-      maxWidth: segment.maxWidthRatio === undefined ? '' : `${segment.maxWidthRatio * 100}%`,
-      overflow: 'hidden',
-      textOverflow: 'ellipsis',
-      whiteSpace: 'pre'
-    });
-    if (segment.tone) run.style.color = segment.tone === 'secondary' ? 'var(--nl-secondary)' : 'var(--nl-primary)';
-    if (segment.fontWeight === 'medium') {
-      run.style.fontWeight = '500';
-      run.style.fontFamily = 'var(--nl-font-medium)';
-    } else if (segment.fontWeight === 'regular') {
-      run.style.fontWeight = '400';
-      run.style.fontFamily = 'var(--nl-font-regular)';
-    }
-    setData(run, 'tone', segment.tone);
-    runs.appendChild(run);
-  });
-  const spoken = createElement(document, 'span', 'ok-native-list-identity-title-spoken', row.title);
-  Object.assign(spoken.style, VISUALLY_HIDDEN);
-  target.replaceChildren(runs, spoken);
-  target.style.display = 'flex';
-  target.style.minWidth = '0';
-}
 function appendAccessories(parent, document, primitives, row, accessories) {
   if (!accessories?.length) return;
   const container = createElement(document, 'span', 'ok-native-list-accessories');
@@ -134,13 +86,6 @@ function createIdentityRow(document, primitives, row) {
       fragment.appendChild(document.createTextNode(row.title.slice(offset)));
       textTarget.prepend(fragment);
     }
-    // The runs replace the plain title, except where `title` itself is
-    // highlighted or shown in the wallet sidebar.
-    const hasTitleRuns = !!row.titleSegments?.length && presentation !== 'walletSidebar' && !row.titleMatch?.length;
-    if (hasTitleRuns) {
-      const textTarget = titleElement.querySelector('[data-nl-slot="title"]') ?? titleElement;
-      appendTitleRuns(document, textTarget, row);
-    }
     if (row.subtitleSegments?.length) {
       column.querySelector('.ok-native-list-secondary')?.remove();
       const segments = createElement(document, 'span', 'ok-native-list-subtitle-segments');
@@ -266,48 +211,12 @@ function createIdentityRow(document, primitives, row) {
         badges.style.minWidth = '0';
       }
     }
-    if (hasTitleRuns) {
-      // The runs fill what the title line leaves, so a ratio is a share of
-      // that width and title accessories sit at the line's end.
-      const runs = titleElement.querySelector('.ok-native-list-identity-title-runs');
-      for (let node = runs?.parentElement; node && node !== titleElement; node = node.parentElement) {
-        node.style.display = 'flex';
-        node.style.flex = '1 1 auto';
-        node.style.minWidth = '0';
-      }
-      titleElement.style.display = 'flex';
-      titleElement.style.alignItems = 'center';
-    }
-    if (row.titleLeadingIcon && presentation !== 'walletSidebar') {
-      const descriptor = row.titleLeadingIcon;
-      if (titleElement.hasAttribute('data-nl-slot')) {
-        // Keep the glyph out of the title slot that text styles apply to.
-        const titleText = tagSlot(createElement(document, 'span', 'ok-native-list-identity-title-text'), 'title');
-        while (titleElement.firstChild) titleText.appendChild(titleElement.firstChild);
-        if (hasTitleRuns) {
-          titleText.style.display = 'flex';
-          titleText.style.minWidth = '0';
-        }
-        titleElement.removeAttribute('data-nl-slot');
-        titleElement.appendChild(titleText);
-      }
-      const icon = primitives.iconAction(descriptor.name, undefined, undefined, descriptor.tintColor);
-      icon.className = 'ok-native-list-identity-title-leading-icon';
-      if (descriptor.accessibilityLabel) icon.setAttribute('aria-label', descriptor.accessibilityLabel);else icon.setAttribute('aria-hidden', 'true');
-      titleElement.style.display = 'flex';
-      titleElement.style.alignItems = 'center';
-      // 6px to the title, whatever gap the title line already has.
-      const lineGap = Number.parseFloat(titleElement.style.gap || '0') || 0;
-      icon.style.marginInlineEnd = `${Math.max(0, 6 - lineGap)}px`;
-      titleElement.prepend(icon);
-    }
     if (presentation === 'walletSidebar' && row.badges?.length) {
       const badges = createElement(document, 'span', 'ok-native-list-wallet-badges');
       row.badges.forEach(badge => badges.appendChild(createBadge(document, badge)));
       column.appendChild(badges);
     }
     for (const key of ['title', 'subtitle']) {
-      if (key === 'title' && hasTitleRuns) continue;
       const lines = row.style?.[key]?.lines ?? row[`${key}Lines`];
       if (lines !== undefined) column.querySelectorAll(`[data-nl-slot="${key}"]`).forEach(text => applyTextLayout(text, lines === 0 ? {} : {
         lines

package/lib/typescript/src/NativeList.types.d.ts

@@ -1,6 +1,6 @@
 import type { ScrollEdgeEffect } from './ScrollEdgeEffect';
 import type { ReactNode, RefObject } from 'react';
-import type { View, ViewProps } from 'react-native';
+import type { ViewInstance, ViewProps } from 'react-native';
 import type { ActionAnchorInvalidatedEvent, EndReachedEvent, NativeListSnapshot, ReorderEvent, RowActionEvent, RowModel, RowPatch, SelectionDeltaEvent, VisibleRangeChangedEvent } from './models';
 export type ActionAnchorState = Readonly<{
     token: string;
@@ -114,7 +114,7 @@ export type NativeListProps = Omit<ViewProps, 'children'> & Readonly<{
     /** Web only: visible sticky chrome above the parent's list viewport. */
     webStickyInset?: number;
     /** Web only. Hosts the section index inside this container. */
-    webSectionIndexContainerRef?: RefObject<View | null>;
+    webSectionIndexContainerRef?: RefObject<ViewInstance | null>;
     /** Defaults to `none`. `interactive` behaves as `none` on Android. */
     keyboardDismissMode?: NativeListKeyboardDismissMode;
     /**

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

@@ -394,18 +394,6 @@ export type RowBase = Readonly<{
     accessibilityLabel?: string;
     separator?: boolean;
 }>;
-/** One run of an identity title line; see docs/SPEC.md. */
-export type IdentityTitleSegment = Readonly<{
-    text: string;
-    /** Omitted: the title color. */
-    tone?: 'primary' | 'secondary';
-    /** Omitted: the title weight. */
-    fontWeight?: 'regular' | 'medium';
-    /** The one run that gives up width when the line is too narrow. */
-    shrink?: boolean;
-    /** Caps the run at this fraction of the title line, within (0, 1]. */
-    maxWidthRatio?: number;
-}>;
 export type IdentityRow = RowBase & Readonly<{
     type: 'identity';
     /** Opt in to content-based height; explicit row/container height still wins. */
@@ -440,14 +428,6 @@ export type IdentityRow = RowBase & Readonly<{
     }>;
     /** Web-only additional help icon after titleIcon. */
     secondaryTitleIcon?: IdentityRow['titleIcon'];
-    /** Runs drawn in place of `title`, which stays the spoken label. */
-    titleSegments?: readonly IdentityTitleSegment[];
-    /** 16-point glyph before the title; decorative unless labelled. */
-    titleLeadingIcon?: Readonly<{
-        name: string;
-        tintColor?: string;
-        accessibilityLabel?: string;
-    }>;
     /** Circular image after title icons; image dimensions must be square, 1...40. */
     titleImage?: Readonly<{
         image: ImageSource;
@@ -900,7 +880,7 @@ export type PatchClearableChanges<Row, Keys extends keyof Row> = Readonly<{
 export type RowPatch = Readonly<{
     type: 'identity';
     key: string;
-    changes: PatchClearableChanges<IdentityRow, CommonPatchFields | 'title' | 'titleSuffixes' | 'titleIcon' | 'secondaryTitleIcon' | 'titleImage' | 'titleSegments' | 'titleLeadingIcon' | 'subtitle' | 'subtitleLines' | 'contentHeight' | 'longPressActionKey' | 'tertiary' | 'tertiaryTone' | 'badges' | 'trailing' | 'leading' | 'leadingAction' | 'titleMatch' | 'titleActionKey' | 'titleActionOnHover' | 'subtitleSegments'>;
+    changes: PatchClearableChanges<IdentityRow, CommonPatchFields | 'title' | 'titleSuffixes' | 'titleIcon' | 'secondaryTitleIcon' | 'titleImage' | 'subtitle' | 'subtitleLines' | 'contentHeight' | 'longPressActionKey' | 'tertiary' | 'tertiaryTone' | 'badges' | 'trailing' | 'leading' | 'leadingAction' | 'titleMatch' | 'titleActionKey' | 'titleActionOnHover' | 'subtitleSegments'>;
 }> | Readonly<{
     type: 'rail';
     key: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onekeyfe/react-native-native-list",
-  "version": "6.7.0-alpha.430",
+  "version": "6.7.0-alpha.435",
   "description": "Template-driven native RecyclerView and UICollectionView for React Native",
   "source": "./src/index.ts",
   "main": "./lib/module/index.js",
@@ -70,10 +70,10 @@
     "@eslint/compat": "^1.3.2",
     "@eslint/eslintrc": "^3.3.1",
     "@eslint/js": "^9.35.0",
-    "@react-native/babel-preset": "0.86.2",
-    "@react-native/eslint-config": "0.86.2",
+    "@react-native/babel-preset": "0.88.0",
+    "@react-native/eslint-config": "0.88.0",
     "@types/jest": "^29.5.14",
-    "@types/react": "^19.2.0",
+    "@types/react": "^19.3.0",
     "del-cli": "^6.0.0",
     "eslint": "^9.35.0",
     "eslint-config-prettier": "^10.1.8",
@@ -82,15 +82,15 @@
     "jsdom": "26.1.0",
     "nitrogen": "0.37.0",
     "prettier": "^2.8.8",
-    "react": "19.2.3",
-    "react-native": "patch:react-native@npm%3A0.86.2#~/.yarn/patches/react-native-npm-0.86.2-c9d546616f.patch",
+    "react": "19.3.0",
+    "react-native": "patch:react-native@npm%3A0.88.0#~/.yarn/patches/react-native-npm-0.88.0-60c6201dd2.patch",
     "react-native-builder-bob": "^0.40.13",
     "react-native-nitro-modules": "0.37.0",
     "typescript": "^5.9.2"
   },
   "peerDependencies": {
-    "@onekeyfe/react-native-image": "6.7.0-alpha.430",
-    "@onekeyfe/react-native-native-logger": "6.7.0-alpha.430",
+    "@onekeyfe/react-native-image": "6.7.0-alpha.435",
+    "@onekeyfe/react-native-native-logger": "6.7.0-alpha.435",
     "react": "*",
     "react-native": "*",
     "react-native-nitro-modules": "0.37.0"
@@ -121,7 +121,7 @@
     ]
   },
   "jest": {
-    "preset": "react-native",
+    "preset": "@react-native/jest-preset",
     "modulePathIgnorePatterns": [
       "<rootDir>/lib/"
     ],

package/src/NativeList.types.ts

@@ -1,6 +1,6 @@
 import type { ScrollEdgeEffect } from './ScrollEdgeEffect';
 import type { ReactNode, RefObject } from 'react';
-import type { View, ViewProps } from 'react-native';
+import type { ViewInstance, ViewProps } from 'react-native';
 import type {
   ActionAnchorInvalidatedEvent,
   EndReachedEvent,
@@ -161,7 +161,7 @@ export type NativeListProps = Omit<ViewProps, 'children'> &
     /** Web only: visible sticky chrome above the parent's list viewport. */
     webStickyInset?: number;
     /** Web only. Hosts the section index inside this container. */
-    webSectionIndexContainerRef?: RefObject<View | null>;
+    webSectionIndexContainerRef?: RefObject<ViewInstance | null>;
     /** Defaults to `none`. `interactive` behaves as `none` on Android. */
     keyboardDismissMode?: NativeListKeyboardDismissMode;
     /**

package/src/models.ts

@@ -513,19 +513,6 @@ export type RowBase = Readonly<{
   separator?: boolean;
 }>;
 
-/** One run of an identity title line; see docs/SPEC.md. */
-export type IdentityTitleSegment = Readonly<{
-  text: string;
-  /** Omitted: the title color. */
-  tone?: 'primary' | 'secondary';
-  /** Omitted: the title weight. */
-  fontWeight?: 'regular' | 'medium';
-  /** The one run that gives up width when the line is too narrow. */
-  shrink?: boolean;
-  /** Caps the run at this fraction of the title line, within (0, 1]. */
-  maxWidthRatio?: number;
-}>;
-
 export type IdentityRow = RowBase &
   Readonly<{
     type: 'identity';
@@ -557,14 +544,6 @@ export type IdentityRow = RowBase &
     }>;
     /** Web-only additional help icon after titleIcon. */
     secondaryTitleIcon?: IdentityRow['titleIcon'];
-    /** Runs drawn in place of `title`, which stays the spoken label. */
-    titleSegments?: readonly IdentityTitleSegment[];
-    /** 16-point glyph before the title; decorative unless labelled. */
-    titleLeadingIcon?: Readonly<{
-      name: string;
-      tintColor?: string;
-      accessibilityLabel?: string;
-    }>;
     /** Circular image after title icons; image dimensions must be square, 1...40. */
     titleImage?: Readonly<{
       image: ImageSource;
@@ -1114,8 +1093,6 @@ export type RowPatch =
         | 'titleIcon'
         | 'secondaryTitleIcon'
         | 'titleImage'
-        | 'titleSegments'
-        | 'titleLeadingIcon'
         | 'subtitle'
         | 'subtitleLines'
         | 'contentHeight'

package/src/validation.ts

@@ -1344,108 +1344,6 @@ function assertButtonGroup(
   });
 }
 
-const MAX_TITLE_SEGMENTS = 4;
-const HEX_COLOR_PATTERN = /^#[0-9a-f]{6}([0-9a-f]{2})?$/i;
-
-function assertTitleSegments(value: unknown, path: string): void {
-  if (
-    !Array.isArray(value) ||
-    value.length === 0 ||
-    value.length > MAX_TITLE_SEGMENTS
-  )
-    fail(path, `must hold 1...${MAX_TITLE_SEGMENTS} segments`);
-  let shrinking = 0;
-  value.forEach((item: unknown, index) => {
-    const segmentPath = `${path}[${index}]`;
-    const segment = protocolObject(item, segmentPath);
-    assertUnknownKeys(
-      segment,
-      ['text', 'tone', 'fontWeight', 'shrink', 'maxWidthRatio'],
-      segmentPath,
-      'title segment key'
-    );
-    const { text, tone, fontWeight, shrink, maxWidthRatio } = segment;
-    if (typeof text !== 'string' || !text.trim())
-      fail(`${segmentPath}.text`, 'must be non-blank');
-    assertText(text, `${segmentPath}.text`);
-    if (tone !== undefined && tone !== 'primary' && tone !== 'secondary')
-      fail(`${segmentPath}.tone`, 'must be primary or secondary');
-    if (
-      fontWeight !== undefined &&
-      fontWeight !== 'regular' &&
-      fontWeight !== 'medium'
-    )
-      fail(`${segmentPath}.fontWeight`, 'must be regular or medium');
-    if (shrink !== undefined && typeof shrink !== 'boolean')
-      fail(`${segmentPath}.shrink`, 'must be a boolean');
-    if (shrink) shrinking += 1;
-    if (
-      maxWidthRatio !== undefined &&
-      (typeof maxWidthRatio !== 'number' ||
-        !Number.isFinite(maxWidthRatio) ||
-        maxWidthRatio <= 0 ||
-        maxWidthRatio > 1)
-    )
-      fail(`${segmentPath}.maxWidthRatio`, 'must be finite within (0, 1]');
-  });
-  if (shrinking > 1) fail(path, 'allows at most one shrinking segment');
-}
-
-function assertTitleLeadingIcon(value: unknown, path: string): void {
-  const icon = protocolObject(value, path);
-  assertUnknownKeys(
-    icon,
-    ['name', 'tintColor', 'accessibilityLabel'],
-    path,
-    'title leading icon key'
-  );
-  const { name, tintColor, accessibilityLabel } = icon;
-  if (typeof name !== 'string' || !name.trim())
-    fail(`${path}.name`, 'must be non-blank');
-  if (
-    tintColor !== undefined &&
-    (typeof tintColor !== 'string' || !HEX_COLOR_PATTERN.test(tintColor))
-  )
-    fail(`${path}.tintColor`, 'must be #RRGGBB or #RRGGBBAA');
-  if (
-    accessibilityLabel !== undefined &&
-    typeof accessibilityLabel !== 'string'
-  )
-    fail(`${path}.accessibilityLabel`, 'must be a string');
-}
-
-function assertIdentityTitleRuns(
-  row: Pick<
-    IdentityRow,
-    'titleSegments' | 'titleLeadingIcon' | 'titleMatch' | 'presentation'
-  >,
-  path: string
-): void {
-  if (row.titleSegments !== undefined) {
-    assertTitleSegments(row.titleSegments, `${path}.titleSegments`);
-    // titleMatch ranges index `title`, which the runs replace on screen.
-    if (row.titleMatch?.length)
-      fail(`${path}.titleMatch`, 'cannot be combined with titleSegments');
-    if (row.presentation === 'walletSidebar')
-      fail(`${path}.titleSegments`, 'is not supported with walletSidebar');
-  }
-  if (row.titleLeadingIcon !== undefined) {
-    assertTitleLeadingIcon(row.titleLeadingIcon, `${path}.titleLeadingIcon`);
-    if (row.presentation === 'walletSidebar')
-      fail(`${path}.titleLeadingIcon`, 'is not supported with walletSidebar');
-  }
-}
-
-/** Production keeps decorative title runs only when they pass the rules. */
-function passesTitleRunRules(check: () => void): boolean {
-  try {
-    check();
-    return true;
-  } catch {
-    return false;
-  }
-}
-
 function assertIdentityExtras(
   row: Pick<
     IdentityRow,
@@ -1936,7 +1834,6 @@ function assertRow(
           );
       });
       assertIdentityExtras(row, path);
-      assertIdentityTitleRuns(row, path);
       assertText(row.subtitle, `${path}.subtitle`);
       // OneKey patch: selector text segments truncate independently.
       row.subtitleSegments?.forEach((segment, segmentIndex) => {
@@ -2519,8 +2416,6 @@ const ROW_FIELDS: Readonly<Record<string, readonly string[]>> = {
     'titleIcon',
     'secondaryTitleIcon',
     'titleImage',
-    'titleSegments',
-    'titleLeadingIcon',
     'subtitle',
     'tertiary',
     'tertiaryTone',
@@ -2698,8 +2593,6 @@ const PATCH_FIELDS: Readonly<Record<string, readonly string[]>> = {
     'titleIcon',
     'secondaryTitleIcon',
     'titleImage',
-    'titleSegments',
-    'titleLeadingIcon',
     'subtitle',
     'tertiary',
     'tertiaryTone',
@@ -2831,7 +2724,6 @@ function protocolKey(value: unknown, path: string): void {
 const PROTOCOL_ARRAY_FIELDS = new Set([
   'columns',
   'titleSuffixes',
-  'titleSegments',
   'cells',
   'points',
   'images',
@@ -3073,10 +2965,7 @@ function assertRowProtocol(row: RowModel, path: string): void {
   if (row.height !== undefined && row.height < 0)
     fail(`${path}.height`, 'must be non-negative');
   if (row.type === 'identity') {
-    if (isDevelopment()) {
-      assertIdentityExtras(row, path);
-      assertIdentityTitleRuns(row, path);
-    }
+    if (isDevelopment()) assertIdentityExtras(row, path);
     if (row.titleSuffixes !== undefined && !Array.isArray(row.titleSuffixes))
       fail(`${path}.titleSuffixes`, 'must be an array');
     row.titleSuffixes?.forEach((suffix, index) => {
@@ -3671,14 +3560,6 @@ const NESTED_DECORATION_FIELDS: Readonly<Record<string, readonly string[]>> = {
 
 function sanitizeDecoration(value: unknown, field: string): unknown {
   if (value === undefined || value === null) return undefined;
-  if (field === 'titleSegments')
-    return passesTitleRunRules(() => assertTitleSegments(value, field))
-      ? value
-      : undefined;
-  if (field === 'titleLeadingIcon')
-    return passesTitleRunRules(() => assertTitleLeadingIcon(value, field))
-      ? value
-      : undefined;
   if (
     !Array.isArray(value) &&
     [

package/src/web/NativeListWebEngine.ts

@@ -845,7 +845,7 @@ export const WEB_LIST_CSS = `
 .ok-native-list-trailing-button{appearance:none;box-sizing:border-box;flex:0 0 auto;padding:4px 10px;border:1px solid transparent;border-radius:9999px;background:var(--nl-button-bg,var(--nl-strong));color:var(--nl-button-text,var(--nl-primary));font:500 14px/20px var(--nl-font-medium);white-space:nowrap;cursor:pointer}.ok-native-list-trailing-button:hover:not(:disabled){background:var(--nl-button-hover,var(--nl-strong))}.ok-native-list-trailing-button:active:not(:disabled){background:var(--nl-button-pressed,var(--nl-pressed))}.ok-native-list-trailing-button:focus-visible{outline:2px solid var(--nl-button-focus,var(--nl-accent))}.ok-native-list-trailing-button:disabled{opacity:.4;cursor:default}
 .ok-native-list-icon-button.ok-native-list-tertiary-icon{box-sizing:border-box;flex:0 0 38px;width:38px;height:38px;margin:-7px;padding:6px;border:1px solid transparent;border-radius:9999px;color:var(--nl-icon-subdued);background:transparent}.ok-native-list-icon-button.ok-native-list-tertiary-icon:hover:not(:disabled){background:var(--nl-hover)}.ok-native-list-icon-button.ok-native-list-tertiary-icon:active:not(:disabled){background:var(--nl-pressed)}.ok-native-list-icon-button.ok-native-list-tertiary-icon:disabled{opacity:.4;cursor:default}
 .ok-native-list-icon-button.ok-native-list-tertiary-icon:focus-visible:not(:disabled){outline:2px solid var(--nl-accent)}
-.ok-native-list-identity-title-icon{flex:0 0 20px;width:20px;height:20px;display:inline-flex;align-items:center;justify-content:center;color:var(--nl-icon);font-size:20px}.ok-native-list-identity-title-leading-icon{flex:0 0 16px;width:16px;height:16px;display:inline-flex;align-items:center;justify-content:center;color:var(--nl-icon-subdued);font-size:16px}.ok-native-list-identity-title-text{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.ok-native-list-identity-title-icon{flex:0 0 20px;width:20px;height:20px;display:inline-flex;align-items:center;justify-content:center;color:var(--nl-icon);font-size:20px}.ok-native-list-identity-title-text{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .ok-native-list-account-row .ok-native-list-visual,.ok-native-list-account-action-row .ok-native-list-visual{width:32px;height:32px;flex-basis:32px}.ok-native-list-account-row .ok-native-list-visual>img,.ok-native-list-account-row .ok-native-list-visual-main,.ok-native-list-account-action-row .ok-native-list-visual>img,.ok-native-list-account-action-row .ok-native-list-visual-main{width:32px;height:32px}.ok-native-list-account-row .ok-native-list-visual>.ok-native-list-visual-corner{width:20px;height:20px;padding:2px}.ok-native-list-account-action-row .ok-native-list-visual{border-radius:8px!important}.ok-native-list-wallet-row .ok-native-list-title{color:var(--nl-secondary);font-size:12px;line-height:16px;font-weight:400;font-family:var(--nl-font-regular)}.ok-native-list-item[data-native-list-selected="true"]>.ok-native-list-wallet-row .ok-native-list-title{color:var(--nl-primary)}.ok-native-list-account-row .ok-native-list-title{font-size:16px;line-height:20px;font-weight:400;font-family:var(--nl-font-regular)}.ok-native-list-account-row .ok-native-list-secondary{font-size:14px;line-height:20px;font-weight:400;font-family:var(--nl-font-regular)}
 .ok-native-list-flex{display:flex;flex:1;min-width:0;flex-direction:column;justify-content:center}.ok-native-list-title{font-size:15px;line-height:20px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:var(--nl-font-semibold)}.ok-native-list-secondary{font-size:13px;line-height:18px;color:var(--nl-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ok-native-list-tertiary{color:var(--nl-secondary)}.ok-native-list-info{color:var(--nl-info)}
 .ok-native-list-identity-row .ok-native-list-title,.ok-native-list-identity-row .ok-native-list-amounts>span:first-child{font-size:16px;line-height:20px}.ok-native-list-identity-row .ok-native-list-secondary{font-size:14px;line-height:20px}