@onekeyfe/react-native-native-list 6.7.0-alpha.375 → 6.7.0-alpha.382

package/ios/NativeListLeadingVisual.swift

@@ -21,6 +21,7 @@ final class NativeListLeadingVisual: UIView {
   private let cornerBackdrop = UIView()
   private var slots: [NativeListImageSlot] = []
   private var overlaySlots: [NativeListImageSlot] = []
+  private var overlayFallbackIcons: [UIImageView] = []
   private var overlays: [(UIView, [String: Any])] = []
   private let dashedBorder = CAShapeLayer()
   private var visual: [String: Any] = [:]
@@ -87,6 +88,7 @@ final class NativeListLeadingVisual: UIView {
     }
     let placeholder = theme?.string("strongBackground", default: "#0000000F") ?? "#0000000F"
     let fallbackIcon = visual.dictionary("fallbackIcon")
+    let fallbackBackground = fallbackIcon?.string("backgroundColor", default: placeholder) ?? placeholder
     let sourceFallback =
       kind != "icon" && !sources.isEmpty
       && sources[0].0.string("loadingStrategy", default: "none") != "none"
@@ -95,7 +97,8 @@ final class NativeListLeadingVisual: UIView {
     let restored = fallbackKey.map(NativeListSourceFallbackState.has) ?? false
     let fallbackData = kind == "icon" ? visual : fallbackIcon
     fallback.text = String(visual.string("fallbackText").prefix(2))
-    fallback.textColor = UIColor(nativeListHex: "#8D8D8D", fallback: .gray)
+    fallback.textColor = UIColor(
+      nativeListHex: visual.string("fallbackTextColor", default: "#8D8D8D"), fallback: .gray)
     icon.image = fallbackData.map { nativeListIcon(named: $0.string("name")) } ?? nil
     icon.tintColor = UIColor(
       nativeListHex: fallbackData?.string("tintColor", default: "#646464") ?? "#646464",
@@ -106,7 +109,9 @@ final class NativeListLeadingVisual: UIView {
       nativeListHex: visual.string(
         "backgroundColor", default: sources.isEmpty ? placeholder : "#00000000"), fallback: .clear)
     backgroundColor =
-      sourceFallback ? UIColor(nativeListHex: placeholder, fallback: .clear) : visualBackground
+      sources.isEmpty && fallbackIcon?["backgroundColor"] != nil || restored
+      ? UIColor(nativeListHex: fallbackBackground, fallback: .clear)
+      : sourceFallback ? UIColor(nativeListHex: placeholder, fallback: .clear) : visualBackground
     layer.borderWidth = kind == "icon" ? 1 / UIScreen.main.scale : 0
     layer.borderColor = UIColor(nativeListHex: "#0000001F", fallback: .clear).cgColor
     if bitmapBorderWidth > 0 {
@@ -121,7 +126,7 @@ final class NativeListLeadingVisual: UIView {
         continue
       }
       let source = sources[index]
-      slot.view.isHidden = index > 0 || sourceFallback
+      slot.view.isHidden = index > 0 || restored
       slot.bind(
         source.0, key: "\(key):leading:\(index)", variant: source.1,
         fit: index == 0 ? style["contentFit"] as? String : nil, placeholder: placeholder
@@ -136,7 +141,7 @@ final class NativeListLeadingVisual: UIView {
           }
         }
         self.backgroundColor =
-          loaded ? visualBackground : UIColor(nativeListHex: placeholder, fallback: .clear)
+          loaded ? visualBackground : UIColor(nativeListHex: fallbackBackground, fallback: .clear)
         self.fallback.isHidden = loaded || fallbackIcon != nil
         self.icon.isHidden = loaded || fallbackIcon == nil
       }
@@ -158,8 +163,17 @@ final class NativeListLeadingVisual: UIView {
     overlays.removeAll(keepingCapacity: true)
     let descriptors = Array(visual.dictionaries("overlays").prefix(2))
     while overlaySlots.count < descriptors.count { overlaySlots.append(NativeListImageSlot()) }
+    while overlayFallbackIcons.count < descriptors.count { overlayFallbackIcons.append(UIImageView()) }
     for (index, data) in descriptors.enumerated() {
       let frame = index < previousOverlays.count ? previousOverlays[index].0 : UIView()
+      let fallbackData = data.dictionary("fallbackIcon")
+      let fallbackGlyph = overlayFallbackIcons[index]
+      fallbackGlyph.image = fallbackData.flatMap { nativeListIcon(named: $0.string("name")) }
+      fallbackGlyph.tintColor = UIColor(
+        nativeListHex: fallbackData?.string("tintColor", default: "#646464") ?? "#646464",
+        fallback: .darkGray)
+      fallbackGlyph.contentMode = .scaleAspectFit
+      fallbackGlyph.isHidden = true
       frame.clipsToBounds = true
       frame.backgroundColor = UIColor(
         nativeListHex: data.string(
@@ -172,7 +186,9 @@ final class NativeListLeadingVisual: UIView {
         child = slot.view
         child.isHidden = true
         slot.bind(image, key: "\(key):overlay:\(index)", placeholder: placeholder) {
-          [weak child] loaded in child?.isHidden = !loaded
+          [weak child, weak fallbackGlyph] loaded in
+          child?.isHidden = !loaded
+          fallbackGlyph?.isHidden = loaded || fallbackData == nil
         }
       } else if !data.string("text").isEmpty {
         overlaySlots[index].recycle()
@@ -181,7 +197,10 @@ final class NativeListLeadingVisual: UIView {
         label.textAlignment = .center
         // A line-height box is the legacy wallet text badge: regular weight, centered metrics.
         label.font = nativeListFont(
-          ofSize: overlayTextFontSize, weight: overlayTextLineHeight == nil ? .medium : .regular,
+          ofSize: overlayTextFontSize,
+          weight: NativeListTextStyles.marketFontWeight(
+            data.string("fontWeight"),
+            fallback: overlayTextLineHeight == nil ? .medium : .regular),
           fonts: fonts)
         if let line = overlayTextLineHeight {
           let paragraph = NSMutableParagraphStyle()
@@ -207,10 +226,9 @@ final class NativeListLeadingVisual: UIView {
           nativeListHex: data.string("tintColor", default: "#646464"), fallback: .darkGray)
         child = glyph
       }
-      if child.superview !== frame {
-        frame.subviews.forEach { $0.removeFromSuperview() }
-        frame.addSubview(child)
-      }
+      frame.subviews.forEach { $0.removeFromSuperview() }
+      frame.addSubview(child)
+      if data.dictionary("image") != nil && fallbackData != nil { frame.addSubview(fallbackGlyph) }
       if frame.superview == nil { addSubview(frame) }
       overlays.append((frame, data))
     }
@@ -253,10 +271,16 @@ final class NativeListLeadingVisual: UIView {
     }
     fallback.frame = bounds
     let fallbackIcon = visual.dictionary("fallbackIcon")
+    let explicitFallbackSize: CGFloat? = fallbackIcon.flatMap { data in
+      guard data["size"] != nil else { return nil }
+      let size = data.double("size")
+      return size > 0 ? CGFloat(size) : nil
+    }
     let iconSize: CGFloat =
-      !sources.isEmpty && fallbackIcon != nil
+      explicitFallbackSize
+      ?? (!sources.isEmpty && fallbackIcon != nil
       ? min(bounds.width, bounds.height)
-        * (fallbackIcon?.string("name") == "GlobusOutline" ? 1.2 : 1) : glyphSize
+        * (fallbackIcon?.string("name") == "GlobusOutline" ? 1.2 : 1) : glyphSize)
     icon.frame = CGRect(
       x: (bounds.width - iconSize) / 2, y: (bounds.height - iconSize) / 2, width: iconSize,
       height: iconSize)
@@ -306,7 +330,8 @@ final class NativeListLeadingVisual: UIView {
     cornerBackdrop.frame = networkBackdrop.frame
     corner.frame = cornerBackdrop.frame.insetBy(dx: 1, dy: 1)
     unread.frame = logical(CGRect(x: bounds.width - 8, y: 0, width: 8, height: 8))
-    for (frame, data) in overlays {
+    for (index, overlay) in overlays.enumerated() {
+      let (frame, data) = overlay
       let size = CGFloat(data.double("size", default: 20))
       // Legacy wallet text badges size to their text (tabular 12pt + 4) at the line height.
       let textBadgeLine =
@@ -331,9 +356,19 @@ final class NativeListLeadingVisual: UIView {
           height: height))
       frame.layer.cornerRadius = min(width, height) / 2
       let inset = CGFloat(data.double("padding", default: 0))
-      frame.subviews.first?.frame = frame.bounds.insetBy(
+      let contentFrame = frame.bounds.insetBy(
         dx: data["text"] != nil ? overlayTextHorizontalInset ?? inset : inset,
         dy: data["text"] != nil && overlayTextHorizontalInset != nil ? 0 : inset)
+      frame.subviews.forEach { $0.frame = contentFrame }
+      let slot = overlaySlots[index].view
+      if data.dictionary("image") != nil {
+        let circularImage = inset > 0 && width == height
+        slot.layer.cornerRadius = circularImage ? min(contentFrame.width, contentFrame.height) / 2 : 0
+        slot.clipsToBounds = circularImage
+      } else {
+        slot.layer.cornerRadius = 0
+        slot.clipsToBounds = false
+      }
     }
     dashedBorder.isHidden = visual.string("borderStyle") != "dashed"
     dashedBorder.strokeColor =

package/ios/NativeListMessageRenderer.swift

@@ -29,7 +29,9 @@ enum NativeListMessageRenderer {
       body = NativeListResolvedText(
         item.data.string("body"), style: style.dictionary("body"), size: 14,
         color: nativeListColor(theme, "secondaryText", "#646464"), lineHeight: 20,
-        lines: item.data.int("bodyLines", default: 3), fonts: fonts)
+        lines: item.data.int("bodyLines", default: 3),
+        breakMode: item.data.int("bodyLines", default: 3) == 0 ? .byWordWrapping : .byTruncatingTail,
+        fonts: fonts)
       time = NativeListResolvedText(
         item.data.string("time"), style: style.dictionary("time"), size: 12,
         color: nativeListColor(theme, "disabledText", "#8D8D8D"), lineHeight: 16, lines: 1,
@@ -150,6 +152,11 @@ enum NativeListMessageRenderer {
 }
 
 final class NativeListMessageCell: NativeListRendererCell {
+  private let topWarningBorder = CALayer()
+  private let bottomWarningBorder = CALayer()
+  private var warningBorderWidth: CGFloat = 0
+  private var warningBorderColor = UIColor.clear
+  private var isInlineWarning = false
   override class func measure(
     _ item: NativeListItem, width: CGFloat, theme: [String: Any]?, layout: String,
     fonts: NativeListFontFamilies
@@ -167,6 +174,10 @@ final class NativeListMessageCell: NativeListRendererCell {
     _ item: NativeListItem, theme: [String: Any]?, layout: String,
     checkboxState: (NativeListItem, NativeSelectionTarget?, String) -> String
   ) {
+    let container = item.data.dictionary("style")?.dictionary("container") ?? [:]
+    isInlineWarning = item.data.string("presentation") == "inlineWarning"
+    warningBorderWidth = isInlineWarning ? CGFloat(container.double("borderWidth")) : 0
+    warningBorderColor = UIColor(nativeListHex: container.string("borderColor"), fallback: .clear)
     let resolved = NativeListMessageRenderer.Resolved(
       item, theme: theme, layout: layout, fonts: fonts)
     views.bind(resolved, item: item, theme: theme, fonts: fonts)
@@ -174,5 +185,27 @@ final class NativeListMessageCell: NativeListRendererCell {
       top: resolved.verticalPadding, left: resolved.horizontalPadding,
       bottom: resolved.verticalPadding, right: resolved.horizontalPadding)
   }
+  override func applyAppearance() {
+    super.applyAppearance()
+    if isInlineWarning {
+      layer.cornerRadius = 0
+      contentView.layer.cornerRadius = 0
+      contentView.layer.borderWidth = 0
+      topWarningBorder.backgroundColor = warningBorderColor.cgColor
+      bottomWarningBorder.backgroundColor = warningBorderColor.cgColor
+      if topWarningBorder.superlayer == nil { contentView.layer.addSublayer(topWarningBorder) }
+      if bottomWarningBorder.superlayer == nil { contentView.layer.addSublayer(bottomWarningBorder) }
+    } else {
+      topWarningBorder.removeFromSuperlayer()
+      bottomWarningBorder.removeFromSuperlayer()
+    }
+  }
+  override func layoutSubviews() {
+    super.layoutSubviews()
+    let height = max(0, warningBorderWidth)
+    topWarningBorder.frame = CGRect(x: 0, y: 0, width: contentView.bounds.width, height: height)
+    bottomWarningBorder.frame = CGRect(
+      x: 0, y: contentView.bounds.height - height, width: contentView.bounds.width, height: height)
+  }
   override func recycleContent() { views.recycle() }
 }

package/ios/NativeListModels.swift

@@ -1,9 +1,10 @@
 import Foundation
+import CoreFoundation
 import UIKit
 
 // Template type alone partitions reuse; data keys and styles never select a renderer.
 enum NativeListRendererKey: String, CaseIterable {
-  case message, rail, mediaTile, action, system, activity, dataRow, metricCard, market, identity, sectionHeader, walletGroup
+  case message, rail, mediaTile, action, buttonGroup, system, activity, dataRow, metricCard, market, identity, sectionHeader, walletGroup
   /// Not a template: legacy accepted any non-empty type and drew an empty row with the
   /// shared chrome. Unknown types keep that placeholder instead of failing the snapshot.
   case unsupported = "__nativeListUnsupported"
@@ -35,7 +36,7 @@ struct NativeListItem {
   }
 
   var isRowPressEnabled: Bool {
-    !data.bool("disabled") &&
+    type != "buttonGroup" && !data.bool("disabled") &&
       !data.bool("pressDisabled") &&
       (type != "system" || data.string("variant") == "retry")
   }
@@ -78,7 +79,18 @@ struct NativeListItem {
 }
 
 struct NativeListConfig {
+  struct StructuralTransition {
+    let id: String
+    let duration: TimeInterval
+    let anchorKey: String?
+  }
+  struct Disclosure {
+    let expanded: Bool
+    let expandedTrailingInset: CGFloat
+  }
   let generation: Int
+  let structuralTransition: StructuralTransition?
+  let disclosure: Disclosure?
   let layout: String
   let orientation: String
   let gridColumns: Int
@@ -129,6 +141,32 @@ struct NativeListConfig {
     let capabilities = root["capabilities"] as? [String: Any]
     let sectionIndex = capabilities?["sectionIndex"] as? [String: Any]
     let footer = try (root["fixedFooter"] as? [String: Any]).map(NativeListItem.init)
+    let transition = root["structuralTransition"] as? [String: Any]
+    let structuralTransition = (transition?["id"] as? String).map { id in
+      StructuralTransition(
+        id: id,
+        duration: min(2, max(0, (transition?["durationMs"] as? Double ?? 220) / 1000)),
+        anchorKey: transition?["anchorKey"] as? String)
+    }
+    let disclosure: Disclosure?
+    if let value = root["disclosure"] {
+      guard let data = value as? [String: Any],
+            let expandedNumber = data["expanded"] as? NSNumber,
+            CFGetTypeID(expandedNumber) == CFBooleanGetTypeID() else {
+        throw NativeListModelError.invalidSnapshot
+      }
+      let insetNumber = data["expandedTrailingInset"] as? NSNumber
+      guard data["expandedTrailingInset"] == nil || insetNumber != nil,
+            insetNumber.map({ CFGetTypeID($0) != CFBooleanGetTypeID() }) ?? true else {
+        throw NativeListModelError.invalidSnapshot
+      }
+      let inset = insetNumber?.doubleValue ?? 0
+      guard inset.isFinite, inset >= 0 else { throw NativeListModelError.invalidSnapshot }
+      disclosure = Disclosure(expanded: expandedNumber.boolValue,
+        expandedTrailingInset: CGFloat(inset))
+    } else {
+      disclosure = nil
+    }
 
     let contentPadding = max(0, CGFloat(layoutData.double("contentPadding")))
     let contentPaddingHorizontal = layoutData["contentPaddingHorizontal"] == nil
@@ -143,6 +181,8 @@ struct NativeListConfig {
 
     return NativeListConfig(
       generation: generation,
+      structuralTransition: structuralTransition,
+      disclosure: disclosure,
       layout: layout,
       orientation: layoutData["orientation"] as? String ?? "vertical",
       gridColumns: min(7, max(1, layoutData["gridColumns"] as? Int ?? 1)),

package/ios/NativeListRendererRegistry.swift

@@ -18,6 +18,7 @@ enum NativeListRendererRegistry {
       .activity: (NativeListActivityCell.self, { NativeListActivityCell(frame: .zero) }),
       .system: (NativeListSystemCell.self, { NativeListSystemCell(frame: .zero) }),
       .action: (NativeListActionCell.self, { NativeListActionCell(frame: .zero) }),
+      .buttonGroup: (NativeListButtonGroupCell.self, { NativeListButtonGroupCell(frame: .zero) }),
       .unsupported: (
         NativeListUnsupportedCell.self, { NativeListUnsupportedCell(frame: .zero) }
       ),

package/ios/NativeListResolvedText.swift

@@ -26,7 +26,8 @@ struct NativeListResolvedText {
     let style = style ?? [:]
     self.tabular = tabular
     self.preservesBreakMode = preservesBreakMode
-    self.lines = min(3, max(1, style.int("lines", default: lines)))
+    let requestedLines = style.int("lines", default: lines)
+    self.lines = requestedLines == 0 ? 0 : min(3, max(1, requestedLines))
     explicitTruncation = style["lines"] != nil || style["truncate"] != nil
     text =
       self.lines == 1 && explicitTruncation

package/ios/NativeListRowHost.swift

@@ -42,6 +42,20 @@ class NativeListRowHost: UICollectionViewCell {
   var listStyle: [String: Any]?
   var onAction: ((NativeListItem, String, NativeSelectionTarget?, NativeListActionOrigin?) -> Void)?
   var onBindingInvalidated: ((NativeListRowHost, Int) -> Void)?
+  var structuralContentHeight: CGFloat?
+
+  override func layoutSubviews() {
+    super.layoutSubviews()
+    // UIKit relays out cells again when the collection's offset changes.
+    if let structuralContentHeight {
+      contentView.frame = CGRect(x: 0, y: 0, width: bounds.width, height: structuralContentHeight)
+    }
+  }
+
+  override func prepareForReuse() {
+    super.prepareForReuse()
+    structuralContentHeight = nil
+  }
 
   func bind(
     item: NativeListItem, theme: [String: Any]?, layout: String, itemIndex: Int? = nil,

package/ios/NativeListSectionHeaderRenderer.swift

@@ -1,6 +1,13 @@
 import UIKit
 
 final class NativeListDottedUnderlineLabel: NativeListTextLabel {
+  var usesDashedUnderline = false {
+    didSet {
+      dottedUnderlineLayer.lineDashPattern = usesDashedUnderline ? [3, 2] : [0, 4]
+      dottedUnderlineLayer.lineCap = usesDashedUnderline ? .butt : .round
+      setNeedsLayout()
+    }
+  }
   var showsDottedUnderline = false {
     didSet { setNeedsLayout() }
   }
@@ -111,6 +118,7 @@ final class NativeListSectionHeaderCell: NativeListRendererCell {
   private let mainStack = UIStackView()
   private let titleRowStack = UIStackView()
   private let titleLabel = NativeListDottedUnderlineLabel()
+  private let leadingBadge = NativeListInsetLabel()
   private let titleSpinner = UIActivityIndicatorView(style: .medium)
   private let subtitleLabel = NativeListTextLabel()
   private let trailingStack = UIStackView()
@@ -148,6 +156,7 @@ final class NativeListSectionHeaderCell: NativeListRendererCell {
     titleRowStack.axis = .horizontal
     titleRowStack.alignment = .center
     titleRowStack.spacing = 8
+    leadingBadge.heightAnchor.constraint(equalToConstant: 20).isActive = true
     titleRowStack.addArrangedSubview(titleLabel)
     mainStack.addArrangedSubview(titleRowStack)
     mainStack.addArrangedSubview(subtitleLabel)
@@ -182,6 +191,15 @@ final class NativeListSectionHeaderCell: NativeListRendererCell {
     selectorTypographyRestorers = []
     currentItem = item
     currentTheme = theme
+    if accessoryButtons[0].superview === titleRowStack {
+      titleRowStack.removeArrangedSubview(accessoryButtons[0])
+      accessoryButtons[0].removeFromSuperview()
+      trailingStack.insertArrangedSubview(accessoryButtons[0], at: 0)
+    }
+    titleRowStack.removeArrangedSubview(leadingBadge)
+    leadingBadge.removeFromSuperview()
+    leadingBadge.text = nil
+    leadingBadge.accessibilityLabel = nil
     titleSpinner.stopAnimating()
     NSLayoutConstraint.deactivate(selectorConstraints)
     selectorConstraints = []
@@ -198,6 +216,7 @@ final class NativeListSectionHeaderCell: NativeListRendererCell {
     titleLabel.removeGestureRecognizer(selectorTitleTap)
     titleLabel.isUserInteractionEnabled = false
     titleLabel.showsDottedUnderline = false
+    titleLabel.usesDashedUnderline = false
     titleLabel.reservesDottedUnderlineSpace = false
     titleLabel.dottedUnderlineVerticalOffset = 0
     for label in [titleLabel, subtitleLabel] {
@@ -211,6 +230,7 @@ final class NativeListSectionHeaderCell: NativeListRendererCell {
       label.rowVerticalAlignment = nil
     }
     titleLabel.setContentHuggingPriority(.defaultLow, for: .horizontal)
+    titleLabel.setContentCompressionResistancePriority(.required, for: .horizontal)
     subtitleLabel.font = nativeListFont(ofSize: 14, fonts: fonts)
     subtitleLabel.textColor = nativeListColor(theme, "secondaryText", "#646464")
     mainStack.alignment = .fill
@@ -228,6 +248,10 @@ final class NativeListSectionHeaderCell: NativeListRendererCell {
     value.contentHorizontalAlignment = .center
     value.contentVerticalAlignment = .center
     value.rowTextOffsetY = 0
+    value.helpBindingGeneration += 1
+    value.helpPrimaryLineOnly = false
+    value.showsHelpUnderline = false
+    value.isUserInteractionEnabled = true
     value.marketLineHeight = nil
     value.selectorSummaryLineHeight = nil
     value.isHidden = true
@@ -253,6 +277,7 @@ final class NativeListSectionHeaderCell: NativeListRendererCell {
     if style["lineGap"] != nil { mainStack.spacing = CGFloat(style.double("lineGap")) }
     if style["trailingGap"] != nil { trailingStack.spacing = CGFloat(style.double("trailingGap")) }
     applyTextStyle(item)
+    bindPositionHeaderFields(item, theme: theme)
     titleSpinner.color = titleLabel.textColor
     updateTitleSpinner()
     contentInsets = UIEdgeInsets(
@@ -273,6 +298,63 @@ final class NativeListSectionHeaderCell: NativeListRendererCell {
       selectorConstraints.append(width)
     }
   }
+  private func bindPositionHeaderFields(_ item: NativeListItem, theme: [String: Any]?) {
+    let style = item.data.dictionary("style") ?? [:]
+    if let badge = item.data.dictionary("leadingBadge") {
+      leadingBadge.text = badge.string("text")
+      leadingBadge.font = nativeListFont(ofSize: 12, weight: .medium, fonts: fonts)
+      let tones = ["info": ("info", "#0F69F6"), "success": ("positive", "#008F5A"), "warning": ("caution", "#A35E00"), "danger": ("negative", "#CE2C31")]
+      if let tone = tones[badge.string("tone")] {
+        let color = nativeListColor(theme, tone.0, tone.1)
+        leadingBadge.textColor = color
+        leadingBadge.backgroundColor = color.withAlphaComponent(0.12)
+        if badge.string("tone") == "success", let background = theme?["successBackground"] as? String {
+          leadingBadge.backgroundColor = UIColor(nativeListHex: background, fallback: color.withAlphaComponent(0.12))
+        }
+      } else {
+        leadingBadge.textColor = nativeListColor(theme, "secondaryText", "#646464")
+        leadingBadge.backgroundColor = nativeListColor(theme, "strongBackground", "#F0F0F0")
+      }
+      let paragraph = NSMutableParagraphStyle()
+      paragraph.minimumLineHeight = 16
+      paragraph.maximumLineHeight = 16
+      leadingBadge.attributedText = NSAttributedString(
+        string: badge.string("text"), attributes: [
+          .font: leadingBadge.font as Any,
+          .foregroundColor: leadingBadge.textColor as Any,
+          .paragraphStyle: paragraph,
+        ])
+      leadingBadge.horizontalInset = 8
+      leadingBadge.topInset = 2
+      leadingBadge.bottomInset = 2
+      leadingBadge.layer.cornerRadius = 4
+      leadingBadge.clipsToBounds = true
+      leadingBadge.accessibilityLabel = badge["accessibilityLabel"] as? String
+      leadingBadge.setContentHuggingPriority(.required, for: .horizontal)
+      leadingBadge.setContentCompressionResistancePriority(.required, for: .horizontal)
+      titleLabel.setContentCompressionResistancePriority(.defaultLow, for: .horizontal)
+      titleRowStack.insertArrangedSubview(leadingBadge, at: 0)
+    }
+    if style["titleDecoration"] != nil {
+      titleLabel.showsDottedUnderline = style.string("titleDecoration") == "dashed"
+      titleLabel.usesDashedUnderline = true
+      titleLabel.dottedUnderlineColor = titleLabel.textColor
+    }
+    let value = accessoryButtons[0]
+    if style.string("valuePlacement") == "afterTitle" {
+      trailingStack.removeArrangedSubview(value)
+      value.removeFromSuperview()
+      titleLabel.setContentHuggingPriority(.required, for: .horizontal)
+      mainStack.alignment = .leading
+      titleRowStack.addArrangedSubview(value)
+    }
+    if let help = item.data.dictionary("valueHelp") {
+      value.showsHelpUnderline = help.string("underline") == "dashed"
+      value.isUserInteractionEnabled = help.string("presentation") == "popover"
+      accessoryActions = [(help.string("presentation") == "popover" ? help.string("actionKey") : "", nil)]
+      value.setNeedsLayout()
+    }
+  }
   private func applyTextStyle(_ item: NativeListItem) {
     let style = item.data.dictionary("style") ?? [:]
     if let title = style.dictionary("title") {
@@ -312,6 +394,12 @@ final class NativeListSectionHeaderCell: NativeListRendererCell {
   override func recycleContent() {
     checkboxControl.reset()
     currentItem = nil
+    accessoryActions = []
+    titleLabel.removeGestureRecognizer(selectorTitleTap)
+    titleLabel.isUserInteractionEnabled = false
+    accessoryButtons[0].helpBindingGeneration += 1
+    accessoryButtons[0].isUserInteractionEnabled = false
+    accessoryButtons[0].showsHelpUnderline = false
     titleSpinner.stopAnimating()
   }
   override func didMoveToWindow() {