react-native-platform-components 1.4.0 → 1.5.0

package/android/src/main/java/com/platformcomponents/PCSelectionMenuView.kt

@@ -1,30 +1,58 @@
 package com.platformcomponents
 
 import android.content.Context
+import android.content.res.ColorStateList
+import android.graphics.drawable.ColorDrawable
+import android.graphics.drawable.Drawable
+import android.graphics.drawable.RippleDrawable
 import android.text.InputType
+import android.text.TextUtils
 import android.util.Log
+import android.util.TypedValue
+import android.view.Gravity
 import android.view.View
 import android.view.ViewGroup
 import android.view.ViewTreeObserver
+import android.view.inputmethod.EditorInfo
+import android.view.inputmethod.InputMethodManager
 import android.widget.AdapterView
 import android.widget.ArrayAdapter
+import android.widget.BaseAdapter
+import android.widget.Filter
+import android.widget.Filterable
 import android.widget.FrameLayout
+import android.widget.ImageView
 import android.widget.LinearLayout
 import android.widget.Spinner
+import android.widget.TextView
 import androidx.appcompat.widget.PopupMenu
+import androidx.core.widget.TextViewCompat
 import com.facebook.react.bridge.WritableNativeMap
 import com.facebook.react.uimanager.PixelUtil
 import com.facebook.react.uimanager.StateWrapper
 import com.facebook.react.views.scroll.ReactScrollViewHelper
+import com.google.android.material.R as MaterialR
+import com.google.android.material.color.MaterialColors
 import com.google.android.material.textfield.MaterialAutoCompleteTextView
 import com.google.android.material.textfield.TextInputLayout
+import java.util.Locale
 
 class PCSelectionMenuView(context: Context) : FrameLayout(context), ReactScrollViewHelper.HasStateWrapper {
 
-  data class Option(val label: String, val data: String)
+  data class Option(
+    val label: String,
+    val data: String,
+    val subtitle: String = "",
+    val icon: PCButtonSupport.Icon = PCButtonSupport.NO_ICON,
+    val disabled: Boolean = false
+  ) {
+    /** Has content beyond a label, which needs the rich dropdown rows. */
+    val isRich: Boolean get() = subtitle.isNotEmpty() || icon.isPresent
+  }
 
   companion object {
     private const val TAG = "PCSelectionMenu"
+    private const val HEADLESS_GROUP_ID = 0
   }
 
   // --- State Wrapper for Fabric state updates ---
@@ -46,6 +74,12 @@ class PCSelectionMenuView(context: Context) : FrameLayout(context), ReactScrollV
   // Only used to choose inline rendering style.
   var androidMaterial: String? = "system" // "system" | "m3"
 
+  // Embedded M3 only: the field accepts typing and filters the options.
+  var androidSearchable: Boolean = false
+
+  /** The `haptics` prop; the manager plays it with the user's action (see PCHaptics). */
+  var haptics: String = ""
+
   // --- Events ---
   var onSelect: ((index: Int, label: String, data: String) -> Unit)? = null
   var onRequestClose: (() -> Unit)? = null
@@ -56,6 +90,8 @@ class PCSelectionMenuView(context: Context) : FrameLayout(context), ReactScrollV
   private var inlineSpinner: Spinner? = null
   private var inlineDropdownOverlay: View? = null
   private var inlineSpinnerSuppressCount = 0
+  private var inlineSpinnerPendingSelection: String? = null
+  private var inlineSpinnerHasPlaceholder = false
 
   // --- Headless UI (true picker) ---
   private var headlessMenu: PopupMenu? = null
@@ -232,7 +268,7 @@ class PCSelectionMenuView(context: Context) : FrameLayout(context), ReactScrollV
     val next = data ?: ""
     if (selectedData == next) return
     selectedData = next
-    Log.d(TAG, "applySelectedData selectedData=$selectedData")
+    Log.d(TAG, "applySelectedData")
     refreshSelections()
   }
 
@@ -257,7 +293,10 @@ class PCSelectionMenuView(context: Context) : FrameLayout(context), ReactScrollV
     if (placeholder == value) return
     placeholder = value
     inlineLayout?.hint = placeholder
-    // Spinner doesn't support placeholder
+    if (inlineSpinner != null) {
+      refreshAdapters()
+      refreshSelections()
+    }
 
     // Re-measure after placeholder change
     if (anchorMode == "inline") {
@@ -312,6 +351,16 @@ class PCSelectionMenuView(context: Context) : FrameLayout(context), ReactScrollV
     if (anchorMode == "inline") rebuildUI()
   }
 
+  fun applyAndroidSearchable(value: Boolean) {
+    if (androidSearchable == value) return
+    androidSearchable = value
+    if (anchorMode == "inline" && parseMaterial(androidMaterial) == MaterialMode.M3) rebuildUI()
+  }
+
+  /** The embedded M3 field takes typing to filter the options. */
+  private val isSearchable: Boolean
+    get() = androidSearchable && anchorMode == "inline" && parseMaterial(androidMaterial) == MaterialMode.M3
+
   // ---- UI building ----
 
   private fun rebuildUI() {
@@ -328,6 +377,8 @@ class PCSelectionMenuView(context: Context) : FrameLayout(context), ReactScrollV
     inlineText = null
     inlineSpinner = null
     inlineSpinnerSuppressCount = 0
+    inlineSpinnerPendingSelection = null
+    inlineSpinnerHasPlaceholder = false
     headlessMenu = null
     headlessMenuShowing = false
     headlessDismissProgrammatic = false
@@ -387,24 +438,58 @@ class PCSelectionMenuView(context: Context) : FrameLayout(context), ReactScrollV
           ViewGroup.LayoutParams.WRAP_CONTENT
         )
 
-        // Keep it a real text editor so the popup behaves modally
-        inputType = InputType.TYPE_CLASS_TEXT
+        if (isSearchable) {
+          // Typing filters the options (see OptionAdapter). The text is only a
+          // query: selection still comes from picking an option.
+          inputType = InputType.TYPE_CLASS_TEXT or InputType.TYPE_TEXT_FLAG_NO_SUGGESTIONS
+          imeOptions = EditorInfo.IME_ACTION_DONE
+          // The first tap selects the label, so typing replaces it
+          setSelectAllOnFocus(true)
+          setOnEditorActionListener { _, actionId, _ ->
+            if (actionId == EditorInfo.IME_ACTION_DONE) {
+              clearFocus()
+              true
+            } else {
+              false
+            }
+          }
+        } else {
+          // Keep it a real text editor so the popup behaves modally
+          inputType = InputType.TYPE_CLASS_TEXT
+
+          // Prevent keyboard
+          showSoftInputOnFocus = false
 
-        // Prevent keyboard
-        showSoftInputOnFocus = false
+          // Optional: keep it from being typed into
+          keyListener = null
+          isCursorVisible = false
+        }
 
-        // Optional: keep it from being typed into
-        keyListener = null
-        isCursorVisible = false
+        // Highlight the selected option in the dropdown, like the M3 exposed dropdown menu.
+        // The adapter from setSimpleItems() marks the item whose text matches the field.
+        simpleItemSelectedColor = MaterialColors.getColor(
+          til.context,
+          com.google.android.material.R.attr.colorSecondaryContainer,
+          0
+        )
 
         // Nice UX: click anywhere opens dropdown
         setOnClickListener { showDropDown() }
 
         setOnItemClickListener { _, _, position, _ ->
-          val opt = options.getOrNull(position) ?: return@setOnItemClickListener
-          selectedData = opt.data
-          onSelect?.invoke(position, opt.label, opt.data)
+          // A filtered list's positions differ from the options'
+          val opt = (adapter as? OptionAdapter)?.getItem(position)
+            ?: options.getOrNull(position)
+            ?: return@setOnItemClickListener
+          val index = options.indexOf(opt)
+          if (interactivity != "enabled" || opt.disabled) {
+            post { refreshSelections() }
+            return@setOnItemClickListener
+          }
+          onSelect?.invoke(index, opt.label, opt.data)
+          post { refreshSelections() }
           detachInlineDropdownOverlay()
+          if (isSearchable) clearFocus()
         }
 
         setOnTouchListener { _, e ->
@@ -416,6 +501,21 @@ class PCSelectionMenuView(context: Context) : FrameLayout(context), ReactScrollV
       }
 
       til.addView(actv)
+      if (isSearchable) {
+        // Set after the field joins the layout, whose dropdown icon installs its
+        // own focus listener; that one still runs first.
+        val materialFocusListener = actv.onFocusChangeListener
+        actv.setOnFocusChangeListener { view, hasFocus ->
+          materialFocusListener?.onFocusChange(view, hasFocus)
+          if (hasFocus) return@setOnFocusChangeListener
+          // Leaving the field: the query goes, and the field shows the
+          // selected option again (or the placeholder)
+          actv.dismissDropDown()
+          showSelectedText()
+          val imm = context.getSystemService(Context.INPUT_METHOD_SERVICE) as? InputMethodManager
+          imm?.hideSoftInputFromWindow(view.windowToken, 0)
+        }
+      }
       addView(til)
       inlineLayout = til
     } else {
@@ -423,6 +523,7 @@ class PCSelectionMenuView(context: Context) : FrameLayout(context), ReactScrollV
       val sp = object : Spinner(context, null, android.R.attr.spinnerStyle, Spinner.MODE_DROPDOWN) {
         override fun setSelection(position: Int, animate: Boolean) {
           val oldPos = selectedItemPosition
+          val selectionAdapter = adapter
           super.setSelection(position, animate)
 
           // Manually trigger onItemSelectedListener if selection changed
@@ -430,6 +531,7 @@ class PCSelectionMenuView(context: Context) : FrameLayout(context), ReactScrollV
           // the selection changes via user interaction with the dropdown
           if (position != oldPos && onItemSelectedListener != null) {
             post {
+              if (adapter !== selectionAdapter || selectedItemPosition != position) return@post
               onItemSelectedListener?.onItemSelected(
                 this,
                 selectedView,
@@ -442,11 +544,13 @@ class PCSelectionMenuView(context: Context) : FrameLayout(context), ReactScrollV
 
         override fun setSelection(position: Int) {
           val oldPos = selectedItemPosition
+          val selectionAdapter = adapter
           super.setSelection(position)
 
           // Manually trigger onItemSelectedListener if selection changed
           if (position != oldPos && onItemSelectedListener != null) {
             post {
+              if (adapter !== selectionAdapter || selectedItemPosition != position) return@post
               onItemSelectedListener?.onItemSelected(
                 this,
                 selectedView,
@@ -470,15 +574,31 @@ class PCSelectionMenuView(context: Context) : FrameLayout(context), ReactScrollV
           if (inlineSpinnerSuppressCount > 0) return
 
           if (interactivity != "enabled") return
-
-          val opt = options.getOrNull(position) ?: return
+          // Spinner can notify both synchronously and on its next layout; the
+          // fallback in setSelection must not duplicate a single user selection.
+          if (position != sp.selectedItemPosition) return
+
+          val index = position - if (inlineSpinnerHasPlaceholder) 1 else 0
+          val opt = options.getOrNull(index) ?: return
+          if (opt.disabled) {
+            post { refreshSelections() }
+            return
+          }
 
           // Only fire callback if selection actually changed
           if (opt.data == selectedData) return
+          if (inlineSpinnerPendingSelection == opt.data) return
+          inlineSpinnerPendingSelection = opt.data
 
           // Don't update selectedData here - let applySelectedData handle it
           // This ensures refreshSelections() is called to update the Spinner's display
-          onSelect?.invoke(position, opt.label, opt.data)
+          onSelect?.invoke(index, opt.label, opt.data)
+          post {
+            if (inlineSpinner === sp) {
+              refreshSelections()
+              inlineSpinnerPendingSelection = null
+            }
+          }
         }
 
         override fun onNothingSelected(parent: AdapterView<*>) {
@@ -503,11 +623,10 @@ class PCSelectionMenuView(context: Context) : FrameLayout(context), ReactScrollV
     val popup = PopupMenu(context, this@PCSelectionMenuView).apply {
       setOnMenuItemClickListener { item ->
         val index = item.itemId
-        val opt = options.getOrNull(index)
-        Log.d(
-          TAG,
-          "headless onMenuItemClick index=$index optData=${opt?.data} selectedData=$selectedData"
-        )
+        if (interactivity != "enabled" || options.getOrNull(index)?.disabled != false) {
+          return@setOnMenuItemClickListener false
+        }
+        Log.d(TAG, "headless onMenuItemClick index=$index")
         headlessDismissAfterSelect = true
         handleHeadlessSelection(index)
         true
@@ -540,15 +659,53 @@ class PCSelectionMenuView(context: Context) : FrameLayout(context), ReactScrollV
 
   private fun refreshAdapters() {
     val labels = options.map { it.label }
+    val rich = options.any { it.isRich }
 
     inlineText?.let { actv ->
-      val adapter = ArrayAdapter(actv.context, android.R.layout.simple_list_item_1, labels)
-      actv.setAdapter(adapter)
+      if (rich || isSearchable || options.any { it.disabled }) {
+        // Icon + label + subtitle rows, filtered by the typed query
+        actv.setAdapter(OptionAdapter(actv.context, options))
+      } else {
+        // Material's simple-item adapter highlights the selected option (simpleItemSelectedColor).
+        actv.setSimpleItems(labels.toTypedArray())
+      }
     }
 
     inlineSpinner?.let { sp ->
       suppressInlineSpinnerCallbacks(sp)
-      val adapter = ArrayAdapter(sp.context, android.R.layout.simple_spinner_item, labels)
+      // The platform Spinner keeps its own rows (labels only): its dropdown is
+      // sized to its widest row and anchored at the field's start, so rich
+      // rows would run off the screen's edge.
+      // Spinner needs a selected row even for null. Use a normal disabled
+      // placeholder until a value is selected, then show only real options.
+      // ListView measures zero-height rows with UNSPECIFIED height, so a GONE
+      // placeholder can leave a full-height row with unreliable touch bounds.
+      val hasPlaceholder = options.none { it.data == selectedData }
+      inlineSpinnerHasPlaceholder = hasPlaceholder
+      val adapter = object : ArrayAdapter<String>(
+        sp.context, android.R.layout.simple_spinner_item,
+        if (hasPlaceholder) listOf(placeholder.orEmpty()) + labels else labels
+      ) {
+        override fun areAllItemsEnabled() = !hasPlaceholder && options.none { it.disabled }
+
+        // https://developer.android.com/reference/android/widget/BaseAdapter#isEnabled(int)
+        override fun isEnabled(position: Int) =
+          options.getOrNull(position - if (hasPlaceholder) 1 else 0)?.disabled == false
+
+        override fun getDropDownView(position: Int, convertView: View?, parent: ViewGroup): View {
+          val enabled = isEnabled(position)
+          return super.getDropDownView(position, convertView, parent).apply {
+            isEnabled = enabled
+            alpha = if (enabled) 1f else 0.38f
+          }
+        }
+
+        override fun getView(position: Int, convertView: View?, parent: ViewGroup): View =
+          (super.getView(position, convertView, parent) as TextView).apply {
+            if (hasPlaceholder && position == 0) text = ""
+            hint = if (hasPlaceholder && position == 0) placeholder else null
+          }
+      }
       adapter.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item)
       sp.adapter = adapter
     }
@@ -564,19 +721,12 @@ class PCSelectionMenuView(context: Context) : FrameLayout(context), ReactScrollV
   private fun refreshSelections() {
     val idx = options.indexOfFirst { it.data == selectedData }
 
-    inlineText?.let { actv ->
-      if (idx >= 0) {
-        // Show selected value
-        actv.setText(options[idx].label, false)
-      } else {
-        // Clear text to show placeholder
-        actv.setText("", false)
-      }
-    }
+    // A searchable field keeps the user's query while it has focus
+    if (!(isSearchable && inlineText?.hasFocus() == true)) showSelectedText()
 
     inlineSpinner?.let { sp ->
-      if (options.isEmpty()) return
-      val target = if (idx >= 0) idx else 0
+      if (inlineSpinnerHasPlaceholder != (idx < 0)) refreshAdapters()
+      val target = if (inlineSpinnerHasPlaceholder) 0 else idx
       // Always call setSelection to ensure the view is refreshed
       // Even if the position hasn't changed, we need to update the displayed text
       suppressInlineSpinnerCallbacks(sp)
@@ -592,6 +742,176 @@ class PCSelectionMenuView(context: Context) : FrameLayout(context), ReactScrollV
     }
   }
 
+  /** The embedded M3 field shows the selected option's label, or empty for the placeholder. */
+  private fun showSelectedText() {
+    val actv = inlineText ?: return
+    val label = options.firstOrNull { it.data == selectedData }?.label ?: ""
+    actv.setText(label, false)
+    // The next open lists every option until the user types again
+    (actv.adapter as? OptionAdapter)?.resetFilter()
+  }
+
+  // ---- Rich dropdown rows ----
+
+  /**
+   * Rows for the M3 exposed dropdown when options have icons or subtitles, or
+   * the field is searchable: a leading icon, the label and a second line,
+   * laid out like a Material list item. The selected row is highlighted like
+   * Material's simple items, and the list filters by the typed query (a
+   * case-insensitive prefix of the label or of any word in it, as
+   * ArrayAdapter does).
+   */
+  private inner class OptionAdapter(
+    private val themed: Context,
+    private val all: List<Option>
+  ) : BaseAdapter(), Filterable {
+    private var shown: List<Option> = all
+    private val showsIcons = all.any { it.icon.isPresent }
+    private val icons = HashMap<Int, Drawable?>()
+    private val density = themed.resources.displayMetrics.density
+
+    init {
+      // Resolve icons up front; ones that load in the background redraw the list
+      all.forEachIndexed { index, option ->
+        if (!option.icon.isPresent) return@forEachIndexed
+        var sync = true
+        PCMenuSupport.loadIcon(themed, option.icon) { drawable ->
+          icons[index] = drawable
+          if (!sync) notifyDataSetChanged()
+        }
+        sync = false
+      }
+    }
+
+    fun resetFilter() {
+      if (shown === all) return
+      shown = all
+      notifyDataSetChanged()
+    }
+
+    override fun getCount(): Int = shown.size
+    override fun getItem(position: Int): Option? = shown.getOrNull(position)
+    override fun getItemId(position: Int): Long = position.toLong()
+    override fun areAllItemsEnabled(): Boolean = shown.none { it.disabled }
+    override fun isEnabled(position: Int): Boolean = shown.getOrNull(position)?.disabled == false
+
+    override fun getView(position: Int, convertView: View?, parent: ViewGroup): View {
+      val option = shown[position]
+      val holder = (convertView?.tag as? RowHolder) ?: RowHolder()
+      val selected = option.data == selectedData && selectedData.isNotEmpty()
+
+      holder.icon.visibility = if (showsIcons) View.VISIBLE else View.GONE
+      holder.icon.setImageDrawable(icons[all.indexOf(option)])
+      holder.label.text = option.label
+      holder.subtitle.text = option.subtitle
+      holder.subtitle.visibility = if (option.subtitle.isEmpty()) View.GONE else View.VISIBLE
+      holder.root.minimumHeight = dp(if (option.subtitle.isEmpty()) 48 else 64)
+      holder.root.background = if (selected) selectedBackground() else itemBackground()
+      holder.root.isSelected = selected
+      holder.root.isEnabled = !option.disabled
+      holder.label.isEnabled = !option.disabled
+      holder.subtitle.isEnabled = !option.disabled
+      holder.root.alpha = if (option.disabled) 0.38f else 1f
+      return holder.root
+    }
+
+    private fun dp(value: Int): Int = (value * density).toInt()
+
+    private fun selectedBackground(): Drawable {
+      val color = MaterialColors.getColor(themed, MaterialR.attr.colorSecondaryContainer, 0)
+      val ripple = MaterialColors.getColor(themed, MaterialR.attr.colorOnSecondaryContainer, 0)
+      return RippleDrawable(
+        ColorStateList.valueOf(ripple and 0x1FFFFFFF),
+        ColorDrawable(color),
+        null
+      )
+    }
+
+    private fun itemBackground(): Drawable? {
+      val value = TypedValue()
+      if (!themed.theme.resolveAttribute(android.R.attr.selectableItemBackground, value, true)) return null
+      return themed.getDrawable(value.resourceId)
+    }
+
+    private fun textAppearance(attr: Int, fallback: Int): Int {
+      val value = TypedValue()
+      return if (themed.theme.resolveAttribute(attr, value, true) && value.resourceId != 0) {
+        value.resourceId
+      } else {
+        fallback
+      }
+    }
+
+    private inner class RowHolder {
+      val icon = ImageView(themed).apply {
+        layoutParams = LinearLayout.LayoutParams(dp(24), dp(24)).apply { marginEnd = dp(16) }
+        scaleType = ImageView.ScaleType.FIT_CENTER
+        importantForAccessibility = View.IMPORTANT_FOR_ACCESSIBILITY_NO
+      }
+      val label = TextView(themed).apply {
+        TextViewCompat.setTextAppearance(
+          this,
+          textAppearance(MaterialR.attr.textAppearanceBodyLarge, android.R.style.TextAppearance_Material_Subhead)
+        )
+        maxLines = 1
+        ellipsize = TextUtils.TruncateAt.END
+      }
+      val subtitle = TextView(themed).apply {
+        TextViewCompat.setTextAppearance(
+          this,
+          textAppearance(MaterialR.attr.textAppearanceBodyMedium, android.R.style.TextAppearance_Material_Body1)
+        )
+        MaterialColors.getColor(themed, MaterialR.attr.colorOnSurfaceVariant, 0)
+          .takeIf { it != 0 }
+          ?.let { setTextColor(it) }
+        maxLines = 1
+        ellipsize = TextUtils.TruncateAt.END
+      }
+      val root = LinearLayout(themed).apply {
+        orientation = LinearLayout.HORIZONTAL
+        gravity = Gravity.CENTER_VERTICAL
+        setPaddingRelative(dp(16), dp(8), dp(16), dp(8))
+        layoutParams = ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT)
+        addView(icon)
+        addView(
+          LinearLayout(themed).apply {
+            orientation = LinearLayout.VERTICAL
+            layoutParams = LinearLayout.LayoutParams(0, ViewGroup.LayoutParams.WRAP_CONTENT, 1f)
+            addView(label)
+            addView(subtitle)
+          }
+        )
+        tag = this@RowHolder
+      }
+    }
+
+    override fun getFilter(): Filter = object : Filter() {
+      override fun performFiltering(constraint: CharSequence?): FilterResults {
+        val query = constraint?.toString()?.trim()?.lowercase(Locale.getDefault()).orEmpty()
+        val matches = if (!isSearchable || query.isEmpty()) all else all.filter { matches(it.label, query) }
+        return FilterResults().apply {
+          values = matches
+          count = matches.size
+        }
+      }
+
+      @Suppress("UNCHECKED_CAST")
+      override fun publishResults(constraint: CharSequence?, results: FilterResults?) {
+        shown = (results?.values as? List<Option>) ?: all
+        if (shown.isNotEmpty()) notifyDataSetChanged() else notifyDataSetInvalidated()
+      }
+
+      override fun convertResultToString(resultValue: Any?): CharSequence =
+        (resultValue as? Option)?.label ?: ""
+    }
+
+    /** ArrayAdapter's rule: the label, or one of its words, starts with the query. */
+    private fun matches(label: String, query: String): Boolean {
+      val lower = label.lowercase(Locale.getDefault())
+      return lower.startsWith(query) || lower.split(' ').any { it.startsWith(query) }
+    }
+  }
+
   // ---- Inline dropdown overlay ----
 
   private inner class InlineAutoCompleteTextView(context: Context) :
@@ -629,6 +949,8 @@ class PCSelectionMenuView(context: Context) : FrameLayout(context), ReactScrollV
           if (event.action == android.view.MotionEvent.ACTION_DOWN) {
             inlineText?.dismissDropDown()
             detachInlineDropdownOverlay()
+            // A tap outside also leaves a searchable field
+            if (isSearchable) inlineText?.clearFocus()
           }
           true
         }
@@ -695,8 +1017,8 @@ class PCSelectionMenuView(context: Context) : FrameLayout(context), ReactScrollV
 
   private fun handleHeadlessSelection(position: Int) {
     val opt = options.getOrNull(position) ?: return
-    Log.d(TAG, "handleHeadlessSelection pos=$position data=${opt.data}")
-    selectedData = opt.data
+    if (interactivity != "enabled" || opt.disabled) return
+    Log.d(TAG, "handleHeadlessSelection pos=$position")
     onSelect?.invoke(position, opt.label, opt.data)
   }
 
@@ -706,9 +1028,19 @@ class PCSelectionMenuView(context: Context) : FrameLayout(context), ReactScrollV
     menu.clear()
     val selectedIdx = options.indexOfFirst { it.data == selectedData }
     options.forEachIndexed { index, opt ->
-      val label = if (index == selectedIdx) "✓ ${opt.label}" else opt.label
-      menu.add(0, index, index, label)
+      val item = menu.add(HEADLESS_GROUP_ID, index, index, opt.label)
+      item.isEnabled = !opt.disabled
+      item.isChecked = index == selectedIdx
+      // PopupMenu rows have one line, so only the icon is shown (no subtitle)
+      if (opt.icon.isPresent) {
+        PCMenuSupport.loadIcon(context, opt.icon) { drawable ->
+          if (drawable != null && headlessMenu === popup) item.icon = drawable
+        }
+      }
     }
+    // Single-choice group: the menu draws a native radio indicator on each row.
+    menu.setGroupCheckable(HEADLESS_GROUP_ID, true, true)
+    popup.setForceShowIcon(options.any { it.icon.isPresent })
   }
 
   private fun suppressInlineSpinnerCallbacks(sp: Spinner) {

package/android/src/main/java/com/platformcomponents/PCSelectionMenuViewManager.kt

@@ -13,6 +13,7 @@ import com.facebook.react.uimanager.events.Event
 import com.facebook.react.uimanager.events.RCTEventEmitter
 import com.facebook.react.viewmanagers.PCSelectionMenuManagerDelegate
 import com.facebook.react.viewmanagers.PCSelectionMenuManagerInterface
+import com.platformcomponents.PCButtonSupport.stringOr
 
 class PCSelectionMenuViewManager :
   SimpleViewManager<PCSelectionMenuView>(),
@@ -49,6 +50,7 @@ class PCSelectionMenuViewManager :
     val dispatcher = UIManagerHelper.getEventDispatcherForReactTag(reactContext, view.id)
 
     view.onSelect = { index, label, data ->
+      PCHaptics.perform(view, view.haptics)
       dispatcher?.dispatchEvent(SelectEvent(view.id, index, label, data))
     }
 
@@ -57,15 +59,21 @@ class PCSelectionMenuViewManager :
     }
   }
 
-  // options: array of {label,data}
+  // options: array of {label, data, subtitle, iconType, iconName, iconUri, iconScale, iconTinted}
   override fun setOptions(view: PCSelectionMenuView, value: ReadableArray?) {
     val out = ArrayList<PCSelectionMenuView.Option>()
     if (value != null) {
       for (i in 0 until value.size()) {
         val m = value.getMap(i) ?: continue
-        val label = if (m.hasKey("label") && !m.isNull("label")) m.getString("label") ?: "" else ""
-        val data = if (m.hasKey("data") && !m.isNull("data")) m.getString("data") ?: "" else ""
-        out.add(PCSelectionMenuView.Option(label = label, data = data))
+        out.add(
+          PCSelectionMenuView.Option(
+            label = m.stringOr("label", ""),
+            data = m.stringOr("data", ""),
+            subtitle = m.stringOr("subtitle", ""),
+            disabled = m.stringOr("disabled", "false") == "true",
+            icon = PCButtonSupport.parseIcon(m)
+          )
+        )
       }
     }
     view.applyOptions(out)
@@ -92,10 +100,16 @@ class PCSelectionMenuViewManager :
     view.applyVisible(value)
   }
 
+  // "" (none added) | "none" | "selection" | "light" | "medium" | "heavy" | "success" | "warning" | "error"
+  override fun setHaptics(view: PCSelectionMenuView, value: String?) {
+    view.haptics = PCHaptics.configure(view, value)
+  }
+
   override fun setAndroid(view: PCSelectionMenuView, value: ReadableMap?) {
     val material =
       if (value != null && value.hasKey("material") && !value.isNull("material")) value.getString("material") else null
     view.applyAndroidMaterial(material)
+    view.applyAndroidSearchable(value?.stringOr("searchable", "false") == "true")
   }
 
   override fun setIos(view: PCSelectionMenuView, value: ReadableMap?) {