react-native-platform-components 1.3.0 → 1.5.0

package/ios/PCSelectionMenu.mm

@@ -31,9 +31,20 @@ static inline bool OptionsEqual(
   for (size_t i = 0; i < a.size(); i++) {
     if (a[i].label != b[i].label) return false;
     if (a[i].data != b[i].data) return false;
+    if (a[i].disabled != b[i].disabled) return false;
+    if (a[i].subtitle != b[i].subtitle) return false;
+    if (a[i].iconType != b[i].iconType) return false;
+    if (a[i].iconName != b[i].iconName) return false;
+    if (a[i].iconRequest != b[i].iconRequest || a[i].iconUri != b[i].iconUri) return false;
+    if (a[i].iconScale != b[i].iconScale) return false;
+    if (a[i].iconTinted != b[i].iconTinted) return false;
   }
   return true;
 }
+
+static inline NSString *ToNSString(const std::string &value) {
+  return value.empty() ? @"" : [NSString stringWithUTF8String:value.c_str()];
+}
 } // namespace
 
 @interface PCSelectionMenu ()
@@ -54,6 +65,12 @@ static inline bool OptionsEqual(
 
 - (instancetype)initWithFrame:(CGRect)frame {
   if (self = [super initWithFrame:frame]) {
+    // Fabric views seed _props with their own defaults: RCTViewComponentView
+    // asserts on it in debug builds of React Native core, and the first
+    // updateProps would otherwise read the base ViewProps as PCSelectionMenuProps.
+    static const auto defaultProps = std::make_shared<const PCSelectionMenuProps>();
+    _props = defaultProps;
+
     _view = [PCSelectionMenuView new];
     self.contentView = _view;
 
@@ -63,6 +80,8 @@ static inline bool OptionsEqual(
       __typeof(self) strongSelf = weakSelf;
       if (!strongSelf) return;
 
+      [strongSelf->_view.haptics performIn:strongSelf->_view];
+
       // The Swift view has already updated its content (selectedData + sync()).
       // Trigger measurement now so Yoga gets the new size before the React
       // round-trip, preventing a frame of clipped text.
@@ -104,17 +123,22 @@ static inline bool OptionsEqual(
   const auto prevProps =
       std::static_pointer_cast<const PCSelectionMenuProps>(oldProps);
 
-  // options: [{label,data}]
+  // options: [{label, data, subtitle, icon fields}]
   if (!prevProps || !OptionsEqual(newProps.options, prevProps->options)) {
     NSMutableArray *arr = [NSMutableArray new];
     for (const auto &opt : newProps.options) {
-      NSString *label = opt.label.empty()
-                            ? @""
-                            : [NSString stringWithUTF8String:opt.label.c_str()];
-      NSString *data = opt.data.empty()
-                           ? @""
-                           : [NSString stringWithUTF8String:opt.data.c_str()];
-      [arr addObject:@{@"label" : label, @"data" : data}];
+      [arr addObject:@{
+        @"label" : ToNSString(opt.label),
+        @"data" : ToNSString(opt.data),
+        @"disabled" : ToNSString(opt.disabled),
+        @"subtitle" : ToNSString(opt.subtitle),
+        @"iconType" : ToNSString(opt.iconType),
+        @"iconName" : ToNSString(opt.iconName),
+        @"iconRequest" : ToNSString(opt.iconRequest),
+        @"iconUri" : ToNSString(opt.iconUri),
+        @"iconScale" : @(opt.iconScale),
+        @"iconTinted" : ToNSString(opt.iconTinted),
+      }];
     }
     _view.options = arr;
   }
@@ -168,6 +192,10 @@ static inline bool OptionsEqual(
     }
   }
 
+  if (!prevProps || newProps.haptics != prevProps->haptics) {
+    _view.haptics.kind = [NSString stringWithUTF8String:newProps.haptics.c_str()];
+  }
+
   // android.material (plumbed through; iOS can ignore)
   const auto &newAndroid = newProps.android;
   const auto &oldAndroid =

package/ios/PCSelectionMenu.swift

@@ -8,14 +8,33 @@ private let logger = Logger(subsystem: "com.platformcomponents", category: "Sele
 struct PCSelectionMenuOption {
     let label: String
     let data: String
+    let disabled: Bool
+    let subtitle: String
+    let icon: PCButtonSupport.Icon
 }
 
 @objcMembers
 public final class PCSelectionMenuView: UIControl {
     // MARK: - Props (set from ObjC++)
 
-    /// ObjC++ sets this as an array of dictionaries: [{label,data}]
-    public var options: [Any] = [] { didSet { sync() } }
+    /// ObjC++ sets this as an array of dictionaries:
+    /// [{label, data, subtitle, iconType, iconName, iconUri, iconScale, iconTinted}]
+    public var options: [Any] = [] {
+        didSet {
+            parsedOptions = options.compactMap { any in
+                guard let dict = any as? [String: Any] else { return nil }
+                return PCSelectionMenuOption(
+                    label: (dict["label"] as? String) ?? "",
+                    data: (dict["data"] as? String) ?? "",
+                    disabled: (dict["disabled"] as? String) == "true",
+                    subtitle: (dict["subtitle"] as? String) ?? "",
+                    icon: PCButtonSupport.Icon(dictionary: dict)
+                )
+            }
+            menuImages.retain(icons: parsedOptions.map(\.icon))
+            sync()
+        }
+    }
 
     /// Controlled selection by data. "" = no selection.
     public var selectedData: String = "" { didSet { sync() } }
@@ -39,6 +58,9 @@ public final class PCSelectionMenuView: UIControl {
     /// Android material preference (ignored on iOS; retained for debugging/log parity)
     public var androidMaterial: String? = nil
 
+    /// The `haptics` prop; PCSelectionMenu.mm plays it on a pick
+    public let haptics = PCHaptics()
+
     // MARK: - Events back to ObjC++
 
     public var onSelect: ((Int, String, String) -> Void)?  // (index,label,data)
@@ -50,18 +72,17 @@ public final class PCSelectionMenuView: UIControl {
 
     // MARK: - Internal (headless)
 
-    private var headlessMenuView: UIView?
+    /// Invisible anchor of the headless menu. On iOS 17.4+ it presents the
+    /// system menu (`performPrimaryAction()`); before that it only marks the
+    /// spot for the popover fallback.
+    private var headlessMenuButton: PCMenuButton?
     private var headlessMenuVC: UIViewController?
     private var headlessPresentationToken: Int = 0
+    /// An option was picked while the headless system menu was open.
+    private var headlessSelectedWhileOpen = false
 
-    private var parsedOptions: [PCSelectionMenuOption] {
-        options.compactMap { any in
-            guard let dict = any as? [String: Any] else { return nil }
-            let label = (dict["label"] as? String) ?? ""
-            let data = (dict["data"] as? String) ?? ""
-            return PCSelectionMenuOption(label: label, data: data)
-        }
-    }
+    private var parsedOptions: [PCSelectionMenuOption] = []
+    private let menuImages = PCMenuImageState()
 
     private var displayTitle: String {
         let opts = parsedOptions
@@ -86,7 +107,9 @@ public final class PCSelectionMenuView: UIControl {
     private func setup() {
         backgroundColor = .clear
         updateEnabled()
-        updateAnchorMode()
+        // The anchor (inline button or headless menu button) is installed when
+        // the anchorMode prop arrives, so an embedded menu never creates the
+        // headless button.
         sync()
     }
 
@@ -119,10 +142,8 @@ public final class PCSelectionMenuView: UIControl {
         // Update the button title
         menuButton?.setTitle(displayTitle, for: .normal)
 
-        // Rebuild the UIMenu with current options
-        if anchorMode == "inline" {
-            rebuildMenu()
-        }
+        // Rebuild the UIMenu with current options (and update it if it's open)
+        rebuildMenu()
 
         invalidateIntrinsicContentSize()
         setNeedsLayout()
@@ -159,16 +180,51 @@ public final class PCSelectionMenuView: UIControl {
     }
 
     private func rebuildMenu() {
+        guard menuButton != nil || headlessMenuButton != nil else { return }
+        let menu = (interactivity == "disabled" || parsedOptions.isEmpty) ? nil : buildMenu()
+        menuButton?.menu = menu
+        // The headless menu shows the options as they were when it opened. A
+        // pick rebuilds it (selectedData) while it is closing, and a closing
+        // menu is left alone.
+        headlessMenuButton?.setMenu(menu, updatingVisibleMenu: false)
+    }
+
+    /// A single-selection system menu of the options, with their subtitles and
+    /// icons. The system draws its checkmark on the selected option. Selection
+    /// stays controlled by the `selected` prop: the menu is rebuilt when it
+    /// changes, so the button's changesSelectionAsPrimaryAction stays off.
+    private func buildMenu() -> UIMenu {
         let opts = parsedOptions
-        let disabled = (interactivity == "disabled") || opts.isEmpty
-        let actions = opts.enumerated().map { (idx, opt) in
-            UIAction(title: opt.label) { [weak self] _ in
-                guard let self else { return }
-                self.selectedData = opt.data
-                self.onSelect?(idx, opt.label, opt.data)
-            }
+        let items = opts.enumerated().map { idx, opt in
+            PCMenuItem(
+                index: idx,
+                id: String(idx),
+                title: opt.label,
+                subtitle: opt.subtitle,
+                icon: opt.icon,
+                disabled: opt.disabled,
+                state: (!selectedData.isEmpty && opt.data == selectedData) ? "on" : "off"
+            )
         }
-        menuButton?.menu = disabled ? nil : UIMenu(children: actions)
+        return PCMenuSupport.menu(
+            title: "",
+            options: .singleSelection,
+            items: items,
+            imageState: menuImages,
+            onImageLoaded: { [weak self] in self?.rebuildMenu() },
+            handler: { [weak self] item in
+                guard let self, item.index < opts.count else { return }
+                let opt = opts[item.index]
+                guard self.interactivity != "disabled",
+                      self.parsedOptions.contains(where: { $0.data == opt.data && !$0.disabled }) else { return }
+                // A pick from the headless system menu isn't a dismissal to report
+                if self.anchorMode != "inline" { self.headlessSelectedWhileOpen = true }
+                self.onSelect?(item.index, opt.label, opt.data)
+                // UIKit may check the picked action itself. Rebuild from
+                // the controlled value once the action has finished.
+                DispatchQueue.main.async { [weak self] in self?.sync() }
+            }
+        )
     }
 
     override public func layoutSubviews() {
@@ -186,29 +242,59 @@ public final class PCSelectionMenuView: UIControl {
     // MARK: - Headless
 
     private func installHeadlessIfNeeded() {
-        guard headlessMenuView == nil else { return }
-
-        // Create an invisible anchor view
-        let view = UIView()
-        view.translatesAutoresizingMaskIntoConstraints = false
-        view.backgroundColor = .clear
-        view.isHidden = true
+        guard headlessMenuButton == nil else { return }
+
+        // An invisible button over the view's bounds anchors the system menu.
+        // Touches pass through the headless view (see hitTest), so only the
+        // `visible` prop opens it.
+        let button = PCMenuButton(type: .custom)
+        button.translatesAutoresizingMaskIntoConstraints = false
+        button.backgroundColor = .clear
+        button.isAccessibilityElement = false
+        button.onMenuOpen = { [weak self] in
+            self?.headlessSelectedWhileOpen = false
+        }
+        button.onMenuClose = { [weak self] in
+            guard let self else { return }
+            let selected = self.headlessSelectedWhileOpen
+            self.headlessSelectedWhileOpen = false
+            // Dismissed without a pick while still meant to be open: ask to close.
+            // A close requested through `visible` isn't reported back.
+            if !selected && self.visible == "open" {
+                logger.debug("headless system menu dismissed -> requestClose")
+                self.onRequestClose?()
+            }
+        }
 
-        addSubview(view)
+        addSubview(button)
         NSLayoutConstraint.activate([
-            view.topAnchor.constraint(equalTo: topAnchor),
-            view.bottomAnchor.constraint(equalTo: bottomAnchor),
-            view.leadingAnchor.constraint(equalTo: leadingAnchor),
-            view.trailingAnchor.constraint(equalTo: trailingAnchor),
+            button.topAnchor.constraint(equalTo: topAnchor),
+            button.bottomAnchor.constraint(equalTo: bottomAnchor),
+            button.leadingAnchor.constraint(equalTo: leadingAnchor),
+            button.trailingAnchor.constraint(equalTo: trailingAnchor),
         ])
 
-        headlessMenuView = view
+        headlessMenuButton = button
+        rebuildMenu()
     }
 
     private func uninstallHeadlessIfNeeded() {
-        guard let view = headlessMenuView else { return }
-        headlessMenuView = nil
-        view.removeFromSuperview()
+        guard let button = headlessMenuButton else { return }
+        headlessMenuButton = nil
+        button.dismissMenu()
+        button.removeFromSuperview()
+    }
+
+    public override func hitTest(_ point: CGPoint, with event: UIEvent?) -> UIView? {
+        // Headless: the view is only an anchor, never a touch target.
+        guard anchorMode == "inline" else { return nil }
+        return super.hitTest(point, with: event)
+    }
+
+    public override func didMoveToWindow() {
+        super.didMoveToWindow()
+        // A menu asked for before the view was on screen opens now.
+        if window != nil, visible == "open" { updatePresentation() }
     }
 
     private func nearestViewController() -> UIViewController? {
@@ -227,20 +313,49 @@ public final class PCSelectionMenuView: UIControl {
         headlessPresentationToken += 1
 
         if visible == "open" && interactivity != "disabled" {
-            presentHeadlessMenuIfNeeded(token: headlessPresentationToken)
+            if PCMenuButton.canPresentMenuProgrammatically {
+                presentSystemMenuIfNeeded(token: headlessPresentationToken)
+            } else {
+                presentHeadlessMenuIfNeeded(token: headlessPresentationToken)
+            }
         } else {
             dismissHeadlessIfNeeded()
         }
     }
 
     private func dismissHeadlessIfNeeded() {
+        if let button = headlessMenuButton, button.isMenuVisible {
+            button.dismissMenu()
+        }
         guard let vc = headlessMenuVC else { return }
         headlessMenuVC = nil
         vc.dismiss(animated: true)
     }
 
+    /// iOS 17.4+: the system menu, opened from the invisible anchor button with
+    /// `UIControl.performPrimaryAction()`.
+    private func presentSystemMenuIfNeeded(token: Int) {
+        guard let button = headlessMenuButton, !parsedOptions.isEmpty else { return }
+
+        // Next run loop turn, so the anchor has its final frame.
+        DispatchQueue.main.async { [weak self] in
+            guard let self else { return }
+            guard self.headlessPresentationToken == token else { return }
+            guard self.visible == "open", self.anchorMode != "inline" else { return }
+            guard self.interactivity != "disabled" else { return }
+            guard self.window != nil, !button.isMenuVisible else { return }
+
+            logger.debug("presentSystemMenuIfNeeded: presenting \(self.parsedOptions.count) options")
+            self.layoutIfNeeded()
+            self.rebuildMenu()
+            button.presentMenu()
+        }
+    }
+
+    /// Before iOS 17.4 UIKit has no public way to open a menu without a touch,
+    /// so modal mode shows a popover styled like a system menu.
     private func presentHeadlessMenuIfNeeded(token: Int) {
-        guard headlessMenuView != nil else { return }
+        guard headlessMenuButton != nil else { return }
         guard let vc = nearestViewController() else { return }
 
         let opts = parsedOptions
@@ -256,13 +371,21 @@ public final class PCSelectionMenuView: UIControl {
             guard self.headlessMenuVC == nil else { return }
             guard self.window != nil else { return }
 
+            let selectedIndex = self.selectedData.isEmpty
+                ? nil
+                : opts.firstIndex(where: { $0.data == self.selectedData })
+            // Like a system menu, every row reserves the checkmark column when one is shown.
+            let reservesCheckmark = selectedIndex != nil
+
             let menuVC = PCMenuViewController(
                 options: opts,
+                selectedIndex: selectedIndex,
                 onSelect: { [weak self] idx in
                     guard let self else { return }
                     let opt = opts[idx]
-                    logger.debug("headless menu selected: index=\(idx), data=\(opt.data)")
-                    self.selectedData = opt.data
+                    guard self.interactivity != "disabled",
+                          self.parsedOptions.contains(where: { $0.data == opt.data && !$0.disabled }) else { return }
+                    logger.debug("headless menu selected: index=\(idx)")
                     self.onSelect?(idx, opt.label, opt.data)
                 },
                 onCancel: { [weak self] in
@@ -289,7 +412,11 @@ public final class PCSelectionMenuView: UIControl {
             // Measure the real (possibly multi-line) content height so the
             // container fits its rows instead of clipping or leaving gaps.
             let contentHeight = opts.reduce(PCConstants.popoverVerticalPadding) { partial, opt in
-                partial + PCConstants.popoverRowHeight(forLabel: opt.label, width: menuWidth)
+                partial + PCConstants.popoverRowHeight(
+                    forLabel: opt.label,
+                    width: menuWidth,
+                    reservesCheckmark: reservesCheckmark
+                )
             }
             // Allow taller menus at accessibility sizes; otherwise keep them compact.
             let maxHeight = category.isAccessibilityCategory
@@ -298,7 +425,11 @@ public final class PCSelectionMenuView: UIControl {
             let popoverHeight = min(contentHeight, maxHeight)
 
             // Check if menu fits below the source view
-            let firstRowHeight = PCConstants.popoverRowHeight(forLabel: opts[0].label, width: menuWidth)
+            let firstRowHeight = PCConstants.popoverRowHeight(
+                forLabel: opts[0].label,
+                width: menuWidth,
+                reservesCheckmark: reservesCheckmark
+            )
             let wouldExtendBeyondBottom = sourceFrame.maxY + spacing + popoverHeight > screenBounds.maxY - 20
 
             var menuY: CGFloat
@@ -333,6 +464,7 @@ public final class PCSelectionMenuView: UIControl {
 
             self.headlessMenuVC = menuVC
             vc.present(menuVC, animated: true)
+            self.haptics.prepare(in: self)
         }
     }
 
@@ -390,6 +522,11 @@ private class PCGlassMenuCell: UITableViewCell {
     /// caused rows to overlap at large Dynamic Type sizes.
     let menuLabel = UILabel()
 
+    /// Leading checkmark on the selected row, as in a system single-selection menu.
+    private let checkmarkView = UIImageView()
+    private var labelLeadingToContent: NSLayoutConstraint!
+    private var labelLeadingToCheckmark: NSLayoutConstraint!
+
     override init(style: UITableViewCell.CellStyle, reuseIdentifier: String?) {
         super.init(style: style, reuseIdentifier: reuseIdentifier)
         setupCell()
@@ -411,8 +548,23 @@ private class PCGlassMenuCell: UITableViewCell {
         menuLabel.translatesAutoresizingMaskIntoConstraints = false
         contentView.addSubview(menuLabel)
 
+        checkmarkView.image = UIImage(
+            systemName: "checkmark",
+            withConfiguration: PCConstants.popoverCheckmarkConfiguration
+        )
+        checkmarkView.tintColor = .label
+        checkmarkView.contentMode = .center
+        checkmarkView.translatesAutoresizingMaskIntoConstraints = false
+        checkmarkView.setContentHuggingPriority(.required, for: .horizontal)
+        checkmarkView.setContentCompressionResistancePriority(.required, for: .horizontal)
+        contentView.addSubview(checkmarkView)
+
         let v = PCConstants.popoverRowVerticalPadding / 2
         let h = PCConstants.popoverRowHorizontalInset
+        labelLeadingToContent = menuLabel.leadingAnchor.constraint(
+            equalTo: contentView.leadingAnchor, constant: h)
+        labelLeadingToCheckmark = menuLabel.leadingAnchor.constraint(
+            equalTo: checkmarkView.trailingAnchor, constant: PCConstants.popoverCheckmarkSpacing)
         // Center the label and let it grow the row vertically. The min-height
         // constraint guarantees the 44pt touch target for short labels, while
         // the >= top / <= bottom pair lets tall (wrapped) labels expand the row.
@@ -420,17 +572,33 @@ private class PCGlassMenuCell: UITableViewCell {
             menuLabel.topAnchor.constraint(greaterThanOrEqualTo: contentView.topAnchor, constant: v),
             menuLabel.bottomAnchor.constraint(lessThanOrEqualTo: contentView.bottomAnchor, constant: -v),
             menuLabel.centerYAnchor.constraint(equalTo: contentView.centerYAnchor),
-            menuLabel.leadingAnchor.constraint(equalTo: contentView.leadingAnchor, constant: h),
+            labelLeadingToContent,
+            checkmarkView.leadingAnchor.constraint(equalTo: contentView.leadingAnchor, constant: h),
+            checkmarkView.firstBaselineAnchor.constraint(equalTo: menuLabel.firstBaselineAnchor),
             menuLabel.trailingAnchor.constraint(equalTo: contentView.trailingAnchor, constant: -h),
             contentView.heightAnchor.constraint(greaterThanOrEqualToConstant: PCConstants.popoverRowHeightMin),
         ])
     }
+
+    /// `reservesCheckmark` indents every row when the menu has a selection, so labels
+    /// stay aligned; only the selected row shows the checkmark.
+    func configure(label: String, selected: Bool, disabled: Bool, reservesCheckmark: Bool) {
+        menuLabel.text = label
+        checkmarkView.isHidden = !selected
+        labelLeadingToContent.isActive = !reservesCheckmark
+        labelLeadingToCheckmark.isActive = reservesCheckmark
+        accessibilityTraits = selected ? [.button, .selected] : [.button]
+        if disabled { accessibilityTraits.insert(.notEnabled) }
+        isUserInteractionEnabled = !disabled
+        contentView.alpha = disabled ? 0.5 : 1
+    }
 }
 
 // MARK: - Custom Menu View Controller (matches SwiftUI Menu appearance)
 
 private class PCMenuViewController: UIViewController, UITableViewDelegate, UITableViewDataSource {
     private let options: [PCSelectionMenuOption]
+    private let selectedIndex: Int?
     private let onSelect: (Int) -> Void
     private let onCancel: () -> Void
     private let onDismiss: () -> Void
@@ -441,11 +609,13 @@ private class PCMenuViewController: UIViewController, UITableViewDelegate, UITab
 
     init(
         options: [PCSelectionMenuOption],
+        selectedIndex: Int?,
         onSelect: @escaping (Int) -> Void,
         onCancel: @escaping () -> Void,
         onDismiss: @escaping () -> Void
     ) {
         self.options = options
+        self.selectedIndex = selectedIndex
         self.onSelect = onSelect
         self.onCancel = onCancel
         self.onDismiss = onDismiss
@@ -533,11 +703,17 @@ private class PCMenuViewController: UIViewController, UITableViewDelegate, UITab
 
     func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
         let cell = tableView.dequeueReusableCell(withIdentifier: PCGlassMenuCell.reuseIdentifier, for: indexPath)
-        (cell as? PCGlassMenuCell)?.menuLabel.text = options[indexPath.row].label
+        (cell as? PCGlassMenuCell)?.configure(
+            label: options[indexPath.row].label,
+            selected: indexPath.row == selectedIndex,
+            disabled: options[indexPath.row].disabled,
+            reservesCheckmark: selectedIndex != nil
+        )
         return cell
     }
 
     func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
+        guard !options[indexPath.row].disabled else { return }
         tableView.deselectRow(at: indexPath, animated: true)
         dismiss(animated: true) { [weak self] in
             self?.onSelect(indexPath.row)

package/ios/PCTabBar.h

@@ -0,0 +1,10 @@
+// PCTabBar.h
+
+#import <React/RCTViewComponentView.h>
+
+NS_ASSUME_NONNULL_BEGIN
+
+@interface PCTabBar : RCTViewComponentView
+@end
+
+NS_ASSUME_NONNULL_END