react-native-platform-components 1.4.0 → 1.6.0

package/ios/PCButtonGroupView.swift

@@ -2,6 +2,9 @@ import UIKit
 
 /// A row of native buttons (`UIButton` with configurations), with optional
 /// single / multiple selection shown through the buttons' selected state.
+/// Buttons that don't fit can fold into a "…" button with a `UIMenu`
+/// (overflow "menu"). In split mode the row is one button joined to a
+/// chevron button that opens a `UIMenu` (SplitButton).
 @objcMembers
 public final class PCButtonGroupView: UIView {
     private struct Item {
@@ -78,10 +81,46 @@ public final class PCButtonGroupView: UIView {
         didSet { applyConfigurations() }
     }
 
+    /// "none" | "menu" | "wrap" (Android only; the same as "none" here)
+    public var overflow: String = "none" {
+        didSet {
+            guard oldValue != overflow else { return }
+            overflowDirty = true
+            invalidateIntrinsicContentSize()
+            setNeedsLayout()
+        }
+    }
+
+    /// Split mode: the first button joined to a chevron button with `menu`.
+    public var split: Bool = false {
+        didSet { if oldValue != split { rebuild() } }
+    }
+
+    /// ObjC++ sets this as an array of dictionaries: the split button's
+    /// flattened menu items
+    public var menuItems: [Any] = [] {
+        didSet {
+            splitItems = PCMenuSupport.items(from: menuItems)
+            updateSplitMenu()
+        }
+    }
+
+    /// What VoiceOver announces for the split button's chevron.
+    public var menuAccessibilityLabel: String = "" {
+        didSet { chevronButton?.accessibilityLabel = menuAccessibilityLabel.isEmpty ? nil : menuAccessibilityLabel }
+    }
+
+    /// The `haptics` prop: PCButtonGroup.mm plays it on a press (an overflow
+    /// pick included), the split menu handler on a pick
+    public let haptics = PCHaptics()
+
     // MARK: - Events back to ObjC++
 
     public var onPress: ((Int, String) -> Void)? // (index, value)
     public var onSelectionChange: (([String]) -> Void)?
+    public var onMenuSelect: ((String, String) -> Void)? // (id, title)
+    public var onMenuOpen: (() -> Void)?
+    public var onMenuClose: (() -> Void)?
 
     /// Called when content changed after layout (an icon finished loading),
     /// so the Fabric measurement can be refreshed.
@@ -94,6 +133,20 @@ public final class PCButtonGroupView: UIView {
     private var uiButtons: [UIButton] = []
     private var iconImages: [UIImage?] = []
 
+    /// Split mode: the chevron button after the button, and its menu items.
+    private var chevronButton: PCMenuButton?
+    private var splitItems: [PCMenuItem] = []
+    private let splitMenuImages = PCMenuImageState()
+    private let overflowMenuImages = PCMenuImageState()
+
+    /// Overflow "menu": the "…" button that holds the buttons that don't
+    /// fit (made the first time it is needed), and how many buttons are
+    /// showing (all of them when nil).
+    private var overflowButton: PCMenuButton?
+    private var visibleCount: Int?
+    /// Set when the buttons changed, so the next layout folds them again.
+    private var overflowDirty = true
+
     /// Bumped on every rebuild so late image loads can't touch stale buttons.
     private var rebuildGeneration = 0
 
@@ -144,13 +197,23 @@ public final class PCButtonGroupView: UIView {
 
         uiButtons.forEach { $0.removeFromSuperview() }
         uiButtons = []
+        chevronButton?.removeFromSuperview()
+        chevronButton = nil
+        visibleCount = nil
+        overflowButton?.isHidden = true
+        overflowDirty = true
+        // A split button is one button and its chevron
+        if split && items.count > 1 { items = Array(items.prefix(1)) }
+        overflowMenuImages.retain(icons: items.map(\.icon))
         iconImages = Array(repeating: nil, count: items.count)
 
         for (index, item) in items.enumerated() {
             let button = UIButton(type: .system)
             button.tag = index
             button.addTarget(self, action: #selector(tapped(_:)), for: .touchUpInside)
-            stack.addArrangedSubview(button)
+            button.addTarget(self, action: #selector(touchedDown), for: .touchDown)
+            // Before the overflow button, which stays last
+            stack.insertArrangedSubview(button, at: index)
             uiButtons.append(button)
 
             iconImages[index] = PCButtonSupport.image(for: item.icon) { [weak self] image in
@@ -161,8 +224,19 @@ public final class PCButtonGroupView: UIView {
             }
         }
 
+        if split {
+            let chevron = PCMenuButton(type: .system)
+            chevron.accessibilityLabel = menuAccessibilityLabel.isEmpty ? nil : menuAccessibilityLabel
+            chevron.onMenuOpen = { [weak self] in self?.onMenuOpen?() }
+            chevron.onMenuClose = { [weak self] in self?.onMenuClose?() }
+            stack.insertArrangedSubview(chevron, at: items.count)
+            chevronButton = chevron
+            updateSplitMenu()
+        }
+
         applyConfigurations()
         updateEnabled()
+        setNeedsLayout()
     }
 
     private func applyLayout() {
@@ -191,7 +265,11 @@ public final class PCButtonGroupView: UIView {
             )
             button.accessibilityLabel = item.spokenLabel.isEmpty ? nil : item.spokenLabel
         }
+        if let chevron = chevronButton { configureSymbolButton(chevron, symbol: "chevron.down") }
+        if let more = overflowButton { configureSymbolButton(more, symbol: "ellipsis") }
+        overflowDirty = true
         invalidateIntrinsicContentSize()
+        setNeedsLayout()
     }
 
     private func updateEnabled() {
@@ -200,18 +278,148 @@ public final class PCButtonGroupView: UIView {
         for (index, button) in uiButtons.enumerated() where index < items.count {
             button.isEnabled = enabled && !items[index].disabled
         }
+        chevronButton?.isEnabled = enabled
+        overflowButton?.isEnabled = enabled
+        updateOverflowMenu()
+    }
+
+    /// The chevron and "…" buttons take the variant of the buttons.
+    private func configureSymbolButton(_ button: UIButton, symbol: String) {
+        button.configuration = PCButtonSupport.makeConfiguration(
+            variant: variant,
+            selected: false,
+            size: size,
+            shape: shape,
+            label: "",
+            image: UIImage(systemName: symbol),
+            containerColor: containerColor,
+            foregroundColor: foregroundColor,
+            font: labelFont
+        )
+    }
+
+    // MARK: - Split menu
+
+    private func updateSplitMenu() {
+        splitMenuImages.retain(icons: splitItems.map(\.icon))
+        guard let chevron = chevronButton else { return }
+        chevron.setMenu(splitItems.isEmpty ? nil : PCMenuSupport.menu(
+            title: "",
+            items: splitItems,
+            imageState: splitMenuImages,
+            onImageLoaded: { [weak self] in self?.updateSplitMenu() },
+            handler: { [weak self] item in
+                guard let self else { return }
+                self.haptics.perform(in: self, override: item.haptics)
+                self.onMenuSelect?(item.id, item.title)
+            }
+        ))
+    }
+
+    // MARK: - Overflow
+
+    /// Folds the trailing buttons that don't fit into the "…" button, which
+    /// takes their place at the end of the row.
+    public override func layoutSubviews() {
+        updateOverflow()
+        super.layoutSubviews()
+    }
+
+    private func updateOverflow() {
+        let count: Int? = overflow == "menu" && !split && bounds.width > 0 ? fittingCount() : nil
+        guard overflowDirty || count != visibleCount else { return }
+        overflowDirty = false
+        visibleCount = count
+        for (index, button) in uiButtons.enumerated() {
+            button.isHidden = count.map { index >= $0 } ?? false
+        }
+        if count != nil {
+            makeOverflowButton().isHidden = false
+        } else {
+            overflowButton?.isHidden = true
+        }
+        updateOverflowMenu()
+    }
+
+    /// The "…" button, at the end of the row. The ellipsis symbol reads as
+    /// "More" in VoiceOver.
+    private func makeOverflowButton() -> PCMenuButton {
+        if let button = overflowButton { return button }
+        let button = PCMenuButton(type: .system)
+        button.isHidden = true
+        button.isEnabled = interactivity != "disabled"
+        configureSymbolButton(button, symbol: "ellipsis")
+        stack.addArrangedSubview(button)
+        overflowButton = button
+        return button
+    }
+
+    /// How many buttons fit before the "…" button, or nil when all of them
+    /// fit.
+    private func fittingCount() -> Int? {
+        let widths = uiButtons.map { $0.systemLayoutSizeFitting(UIView.layoutFittingCompressedSize).width }
+        let gap = stack.spacing
+        let all = widths.reduce(0, +) + gap * CGFloat(max(widths.count - 1, 0))
+        guard all > bounds.width + 0.5 else { return nil }
+        var used = makeOverflowButton().systemLayoutSizeFitting(UIView.layoutFittingCompressedSize).width
+        var count = 0
+        for width in widths {
+            guard used + gap + width <= bounds.width + 0.5 else { break }
+            used += gap + width
+            count += 1
+        }
+        return count
+    }
+
+    /// The "…" button's menu: the hidden buttons, with their icons, disabled
+    /// state and selection checkmark. A pick acts like a press.
+    private func updateOverflowMenu() {
+        guard let overflowButton else { return }
+        guard let count = visibleCount else {
+            overflowMenuImages.retain(icons: [])
+            overflowButton.setMenu(nil)
+            return
+        }
+        let enabled = interactivity != "disabled"
+        let hidden = items.enumerated().dropFirst(count).map { index, item in
+            PCMenuItem(
+                index: index,
+                id: item.value,
+                title: item.label.isEmpty ? item.accessibilityLabel : item.label,
+                icon: item.icon,
+                disabled: !enabled || item.disabled,
+                state: selection != "none" && selectedValues.contains(item.value) ? "on" : ""
+            )
+        }
+        overflowButton.setMenu(PCMenuSupport.menu(
+            title: "",
+            items: hidden,
+            imageState: overflowMenuImages,
+            onImageLoaded: { [weak self] in self?.updateOverflowMenu() },
+            handler: { [weak self] item in self?.press(at: item.index) }
+        ))
     }
 
     // MARK: - Selection
 
+    /// Readies the haptic for the press that is likely to follow.
+    @objc private func touchedDown() {
+        haptics.prepare(in: self)
+    }
+
     @objc private func tapped(_ sender: UIButton) {
-        let index = sender.tag
+        press(at: sender.tag)
+    }
+
+    /// A press on a button, or a pick of its overflow menu item.
+    private func press(at index: Int) {
         guard index >= 0, index < items.count else { return }
         let item = items[index]
         onPress?(index, item.value)
 
         guard selection != "none", let next = nextSelection(tapping: item.value) else { return }
-        selectedValues = next
+        // The parent owns selection. A rejected change must leave the
+        // existing buttons (and overflow checkmarks) selected.
         onSelectionChange?(next)
     }
 
@@ -238,17 +446,28 @@ public final class PCButtonGroupView: UIView {
 
     // MARK: - Sizing
 
+    /// The row with every button showing: an overflowing group reports its
+    /// full width, and Yoga clamps it to the space there is.
+    private func naturalSize() -> CGSize {
+        guard visibleCount != nil else {
+            return stack.systemLayoutSizeFitting(UIView.layoutFittingCompressedSize)
+        }
+        let sizes = uiButtons.map { $0.systemLayoutSizeFitting(UIView.layoutFittingCompressedSize) }
+        let width = sizes.map(\.width).reduce(0, +) + stack.spacing * CGFloat(max(sizes.count - 1, 0))
+        return CGSize(width: width, height: sizes.map(\.height).max() ?? 0)
+    }
+
     public override var intrinsicContentSize: CGSize {
-        stack.systemLayoutSizeFitting(UIView.layoutFittingCompressedSize)
+        naturalSize()
     }
 
     public override func sizeThatFits(_ size: CGSize) -> CGSize {
-        stack.systemLayoutSizeFitting(UIView.layoutFittingCompressedSize)
+        naturalSize()
     }
 
     /// Called by the measuring pipeline to get the size for Yoga layout.
     @objc public func sizeForLayout(withConstrainedTo constrainedSize: CGSize) -> CGSize {
-        let fitted = stack.systemLayoutSizeFitting(UIView.layoutFittingCompressedSize)
+        let fitted = naturalSize()
         return CGSize(width: ceil(fitted.width), height: ceil(fitted.height))
     }
 }

package/ios/PCButtonSupport.swift

@@ -1,15 +1,17 @@
+import Symbols
 import UIKit
 
 /// UIButton configuration and icon handling shared by PCButtonView and
 /// PCButtonGroupView.
 enum PCButtonSupport {
-    struct Icon: Equatable {
+    struct Icon: Hashable {
         /// "", "sfSymbol", "drawable" (ignored on iOS) or "image"
         var type: String = ""
         var name: String = ""
         var uri: String = ""
         var scale: CGFloat = 1
         var tinted: Bool = true
+        var request: String = ""
 
         var isPresent: Bool { type == "sfSymbol" || type == "image" }
 
@@ -17,12 +19,13 @@ enum PCButtonSupport {
 
         init() {}
 
-        init(type: String, name: String, uri: String, scale: CGFloat, tinted: Bool) {
+        init(type: String, name: String, uri: String, scale: CGFloat, tinted: Bool, request: String = "") {
             self.type = type
             self.name = name
             self.uri = uri
             self.scale = scale > 0 ? scale : 1
             self.tinted = tinted
+            self.request = request
         }
 
         /// Reads the flat icon fields (iconType, iconName, ...) bridged as a dictionary.
@@ -33,7 +36,8 @@ enum PCButtonSupport {
                 name: (dictionary["iconName"] as? String) ?? "",
                 uri: (dictionary["iconUri"] as? String) ?? "",
                 scale: scale,
-                tinted: (dictionary["iconTinted"] as? String) != "false"
+                tinted: (dictionary["iconTinted"] as? String) != "false",
+                request: (dictionary["iconRequest"] as? String) ?? ""
             )
         }
     }
@@ -48,17 +52,81 @@ enum PCButtonSupport {
     /// | outlined | .bordered()   |
     /// | text     | .plain()      |
     /// | elevated | .gray()       |
+    /// | glass          | .glass() on iOS 26+, .gray() before          |
+    /// | prominentGlass | .prominentGlass() on iOS 26+, .filled() before |
+    /// | clearGlass          | .clearGlass() on iOS 26+, .gray() before          |
+    /// | prominentClearGlass | .prominentClearGlass() on iOS 26+, .filled() before |
+    ///
+    /// Selected glass buttons, clear or not, use the prominent glass style.
     static func configuration(variant: String, selected: Bool) -> UIButton.Configuration {
-        if selected { return .filled() }
+        if selected {
+            switch variant {
+            // Prominent clear glass has no tint unless given a color, so a
+            // selected clear glass button takes the prominent glass too
+            case "glass", "prominentGlass", "clearGlass", "prominentClearGlass": return prominentGlass()
+            default: return .filled()
+            }
+        }
         switch variant {
         case "tonal": return .tinted()
         case "outlined": return .bordered()
         case "text": return .plain()
         case "elevated": return .gray()
+        case "glass": return glassConfiguration()
+        case "prominentGlass": return prominentGlass()
+        case "clearGlass": return clearGlass()
+        case "prominentClearGlass": return prominentClearGlass()
         default: return .filled()
         }
     }
 
+    /// The variant a toggle button shows. UIKit gives most configurations a
+    /// selected look of their own (tinted becomes filled; bordered, plain,
+    /// gray and glass become tinted), but none for the prominent styles and
+    /// clear glass. Those toggles show a quieter style while off (filled is
+    /// gray, prominent glass is glass), and clear glass takes the prominent
+    /// glass while on.
+    static func toggleVariant(_ variant: String, selected: Bool) -> String {
+        switch variant {
+        case "filled": return selected ? "filled" : "elevated"
+        case "prominentGlass": return selected ? "prominentGlass" : "glass"
+        case "clearGlass", "prominentClearGlass": return selected ? "prominentGlass" : "clearGlass"
+        default: return variant
+        }
+    }
+
+    /// `.glass()` needs the iOS 26 SDK and runtime; `.gray()` otherwise.
+    private static func glassConfiguration() -> UIButton.Configuration {
+        #if compiler(>=6.2)
+        if #available(iOS 26.0, *) { return .glass() }
+        #endif
+        return .gray()
+    }
+
+    /// `.prominentGlass()` needs the iOS 26 SDK and runtime; `.filled()` otherwise.
+    private static func prominentGlass() -> UIButton.Configuration {
+        #if compiler(>=6.2)
+        if #available(iOS 26.0, *) { return .prominentGlass() }
+        #endif
+        return .filled()
+    }
+
+    /// `.clearGlass()` needs the iOS 26 SDK and runtime; `.gray()` otherwise.
+    private static func clearGlass() -> UIButton.Configuration {
+        #if compiler(>=6.2)
+        if #available(iOS 26.0, *) { return .clearGlass() }
+        #endif
+        return .gray()
+    }
+
+    /// `.prominentClearGlass()` needs the iOS 26 SDK and runtime; `.filled()` otherwise.
+    private static func prominentClearGlass() -> UIButton.Configuration {
+        #if compiler(>=6.2)
+        if #available(iOS 26.0, *) { return .prominentClearGlass() }
+        #endif
+        return .filled()
+    }
+
     /// Material's five sizes onto UIKit's four.
     static func buttonSize(_ size: String) -> UIButton.Configuration.Size {
         switch size {
@@ -87,15 +155,24 @@ enum PCButtonSupport {
         image: UIImage?,
         containerColor: UIColor?,
         foregroundColor: UIColor?,
-        font: UIFont?
+        font: UIFont?,
+        imagePlacement: NSDirectionalRectEdge = .leading,
+        cornerRadius: CGFloat? = nil,
+        maxFontSizeMultiplier: CGFloat = 0,
+        traits: UITraitCollection? = nil
     ) -> UIButton.Configuration {
         var config = configuration(variant: variant, selected: selected)
         config.title = label.isEmpty ? nil : label
         config.image = image
         config.imagePadding = (image != nil && !label.isEmpty) ? 8 : 0
+        config.imagePlacement = imagePlacement
         config.buttonSize = buttonSize(size)
         config.titleLineBreakMode = .byTruncatingTail
-        if let corner = cornerStyle(shape) {
+        if let cornerRadius {
+            // A numeric radius overrides the shape
+            config.cornerStyle = .fixed
+            config.background.cornerRadius = cornerRadius
+        } else if let corner = cornerStyle(shape) {
             config.cornerStyle = corner
         }
         if let containerColor {
@@ -104,26 +181,62 @@ enum PCButtonSupport {
         if let foregroundColor {
             config.baseForegroundColor = foregroundColor
         }
-        if let font {
+        var titleFont = font
+        if titleFont == nil, maxFontSizeMultiplier >= 1, !label.isEmpty, let traits,
+           let systemFont = defaultTitleFont(for: config) {
+            titleFont = cappedFont(systemFont, maxFontSizeMultiplier: maxFontSizeMultiplier, traits: traits)
+        }
+        if let titleFont {
             config.titleTextAttributesTransformer = UIConfigurationTextAttributesTransformer { incoming in
                 var outgoing = incoming
-                outgoing.font = font
+                outgoing.font = titleFont
                 return outgoing
             }
         }
         return config
     }
 
+    /// The title font UIKit picks for a configuration, read from a throwaway
+    /// button.
+    private static func defaultTitleFont(for config: UIButton.Configuration) -> UIFont? {
+        let probe = UIButton(configuration: config)
+        probe.updateConfiguration()
+        probe.layoutIfNeeded()
+        return probe.titleLabel?.font
+    }
+
+    /// Caps a Dynamic Type font at `maxFontSizeMultiplier` times its size at
+    /// the default content size category, as React Native's `Text` does. The
+    /// size is read for `traits`, so the probe's own traits don't matter.
+    /// nil when the cap doesn't bind, or the font has no text style (it
+    /// doesn't scale), so UIKit keeps its own font.
+    static func cappedFont(_ font: UIFont, maxFontSizeMultiplier: CGFloat, traits: UITraitCollection) -> UIFont? {
+        guard maxFontSizeMultiplier >= 1,
+              let style = font.fontDescriptor.object(forKey: .textStyle) as? String
+        else { return nil }
+        let textStyle = UIFont.TextStyle(rawValue: style)
+        let defaultTraits = UITraitCollection(preferredContentSizeCategory: .large)
+        let base = UIFont.preferredFont(forTextStyle: textStyle, compatibleWith: defaultTraits).pointSize
+        let current = UIFont.preferredFont(forTextStyle: textStyle, compatibleWith: traits).pointSize
+        let cap = base * maxFontSizeMultiplier
+        guard current > cap else { return nil }
+        // A plain system font at the capped size: a font that keeps its text
+        // style could be scaled again by the label.
+        let fontTraits = font.fontDescriptor.object(forKey: .traits) as? [UIFontDescriptor.TraitKey: Any]
+        let weight = (fontTraits?[.weight] as? CGFloat).map { UIFont.Weight($0) } ?? .regular
+        return UIFont.systemFont(ofSize: cap, weight: weight)
+    }
+
     /// Resolves the icon's image. SF Symbols resolve synchronously; images
     /// that are still loading return nil and call `completion` on the main
     /// thread once they arrive.
     static func image(for icon: Icon, completion: @escaping (UIImage?) -> Void) -> UIImage? {
         switch icon.type {
         case "sfSymbol":
-            return UIImage(systemName: icon.name).map { decorate($0, tinted: icon.tinted) }
+            return PCImageLoader.symbol(named: icon.name).map { decorate($0, tinted: icon.tinted) }
 
         case "image":
-            let cached = PCImageLoader.shared.image(uri: icon.uri, scale: icon.scale) { image in
+            let cached = PCImageLoader.shared.image(uri: icon.uri, scale: icon.scale, request: icon.request) { image in
                 completion(image.map { decorate($0, tinted: icon.tinted) })
             }
             return cached.map { decorate($0, tinted: icon.tinted) }
@@ -139,3 +252,61 @@ enum PCButtonSupport {
         image.withRenderingMode(tinted ? .alwaysTemplate : .alwaysOriginal)
     }
 }
+
+/// SF Symbol effects for Button's `ios.symbolEffect`, through
+/// `UIImageView.addSymbolEffect`. `bounce`, `pulse` and `variableColor` need
+/// iOS 17; `wiggle`, `rotate` and `breathe` iOS 18. Unknown names and effects
+/// the running iOS doesn't have do nothing.
+@available(iOS 17.0, *)
+enum PCSymbolEffects {
+    /// Adds the effect: repeating until the image view's effects are
+    /// removed, or played once.
+    static func add(_ name: String, to view: UIImageView, repeating: Bool) {
+        switch name {
+        case "bounce":
+            if repeating {
+                if #available(iOS 18.0, *) {
+                    indefinite(.bounce, view)
+                } else {
+                    // Bounce is a one-shot effect on iOS 17; repeat it
+                    discrete(.bounce, view, options: .repeating)
+                }
+            } else {
+                discrete(.bounce, view)
+            }
+        case "pulse":
+            repeating ? indefinite(.pulse, view) : discrete(.pulse, view)
+        case "variableColor":
+            repeating ? indefinite(.variableColor, view) : discrete(.variableColor, view)
+        case "wiggle":
+            if #available(iOS 18.0, *) {
+                repeating ? indefinite(.wiggle, view) : discrete(.wiggle, view)
+            }
+        case "rotate":
+            if #available(iOS 18.0, *) {
+                repeating ? indefinite(.rotate, view) : discrete(.rotate, view)
+            }
+        case "breathe":
+            if #available(iOS 18.0, *) {
+                repeating ? indefinite(.breathe, view) : discrete(.breathe, view)
+            }
+        default:
+            break
+        }
+    }
+
+    // Typed entry points, so an effect that is both discrete and indefinite
+    // takes the overload that matches the mode.
+
+    private static func discrete(
+        _ effect: some DiscreteSymbolEffect & SymbolEffect,
+        _ view: UIImageView,
+        options: SymbolEffectOptions = .default
+    ) {
+        view.addSymbolEffect(effect, options: options)
+    }
+
+    private static func indefinite(_ effect: some IndefiniteSymbolEffect & SymbolEffect, _ view: UIImageView) {
+        view.addSymbolEffect(effect)
+    }
+}