react-native-windows 0.68.3 → 0.69.0-preview.1

package/Microsoft.ReactNative/Views/FrameworkElementViewManager.cpp

@@ -17,6 +17,7 @@
 #include <WindowsNumerics.h>
 #include <winrt/Windows.Foundation.h>
 
+#include <UI.Xaml.Automation.Peers.h>
 #include <UI.Xaml.Automation.h>
 #include <UI.Xaml.Controls.h>
 #include "Utils/PropertyHandlerUtils.h"
@@ -99,6 +100,21 @@ static void GetAccessibilityValueProps(const winrt::Microsoft::ReactNative::IJSV
   writer.WriteObjectEnd();
 }
 
+inline float ToRadians(const winrt::Microsoft::ReactNative::JSValue &value) {
+  if ((value.Type() == winrt::Microsoft::ReactNative::JSValueType::Double)) {
+    return value.AsSingle();
+  }
+  assert(value.Type() == winrt::Microsoft::ReactNative::JSValueType::String);
+
+  auto stringValue = value.AsString();
+  char *suffixStart;
+  double num = strtod(stringValue.c_str(), &suffixStart);
+  if (0 == strncmp(suffixStart, "deg", 3)) {
+    return static_cast<float>(num * M_PI / 180.0f);
+  }
+  return static_cast<float>(num); // assume suffix is "rad"
+}
+
 void FrameworkElementViewManager::GetNativeProps(const winrt::Microsoft::ReactNative::IJSValueWriter &writer) const {
   Super::GetNativeProps(writer);
 
@@ -139,27 +155,84 @@ bool FrameworkElementViewManager::UpdateProperty(
       if (element.try_as<xaml::IUIElement10>()) // Works on 19H1+
       {
         if (propertyValue.Type() == winrt::Microsoft::ReactNative::JSValueType::Array) {
-          assert(propertyValue.AsArray().size() == 16);
-          winrt::Windows::Foundation::Numerics::float4x4 transformMatrix;
-          transformMatrix.m11 = static_cast<float>(propertyValue[0].AsDouble());
-          transformMatrix.m12 = static_cast<float>(propertyValue[1].AsDouble());
-          transformMatrix.m13 = static_cast<float>(propertyValue[2].AsDouble());
-          transformMatrix.m14 = static_cast<float>(propertyValue[3].AsDouble());
-          transformMatrix.m21 = static_cast<float>(propertyValue[4].AsDouble());
-          transformMatrix.m22 = static_cast<float>(propertyValue[5].AsDouble());
-          transformMatrix.m23 = static_cast<float>(propertyValue[6].AsDouble());
-          transformMatrix.m24 = static_cast<float>(propertyValue[7].AsDouble());
-          transformMatrix.m31 = static_cast<float>(propertyValue[8].AsDouble());
-          transformMatrix.m32 = static_cast<float>(propertyValue[9].AsDouble());
-          transformMatrix.m33 = static_cast<float>(propertyValue[10].AsDouble());
-          transformMatrix.m34 = static_cast<float>(propertyValue[11].AsDouble());
-          transformMatrix.m41 = static_cast<float>(propertyValue[12].AsDouble());
-          transformMatrix.m42 = static_cast<float>(propertyValue[13].AsDouble());
-          transformMatrix.m43 = static_cast<float>(propertyValue[14].AsDouble());
-          transformMatrix.m44 = static_cast<float>(propertyValue[15].AsDouble());
+          winrt::Windows::Foundation::Numerics::float4x4 transformMatrix{
+              winrt::Windows::Foundation::Numerics::float4x4::identity()};
+          for (const auto &transform : propertyValue.AsArray()) {
+            for (const auto &operation : transform.AsObject()) {
+              const std::string &transformType = operation.first;
+              const auto &innerValue = operation.second;
+
+              if (transformType == "matrix") {
+                assert(innerValue.AsArray().size() == 16);
+                winrt::Windows::Foundation::Numerics::float4x4 innerMatrix;
+                innerMatrix.m11 = static_cast<float>(innerValue[0].AsDouble());
+                innerMatrix.m12 = static_cast<float>(innerValue[1].AsDouble());
+                innerMatrix.m13 = static_cast<float>(innerValue[2].AsDouble());
+                innerMatrix.m14 = static_cast<float>(innerValue[3].AsDouble());
+                innerMatrix.m21 = static_cast<float>(innerValue[4].AsDouble());
+                innerMatrix.m22 = static_cast<float>(innerValue[5].AsDouble());
+                innerMatrix.m23 = static_cast<float>(innerValue[6].AsDouble());
+                innerMatrix.m24 = static_cast<float>(innerValue[7].AsDouble());
+                innerMatrix.m31 = static_cast<float>(innerValue[8].AsDouble());
+                innerMatrix.m32 = static_cast<float>(innerValue[9].AsDouble());
+                innerMatrix.m33 = static_cast<float>(innerValue[10].AsDouble());
+                innerMatrix.m34 = static_cast<float>(innerValue[11].AsDouble());
+                innerMatrix.m41 = static_cast<float>(innerValue[12].AsDouble());
+                innerMatrix.m42 = static_cast<float>(innerValue[13].AsDouble());
+                innerMatrix.m43 = static_cast<float>(innerValue[14].AsDouble());
+                innerMatrix.m44 = static_cast<float>(innerValue[15].AsDouble());
+                transformMatrix = transformMatrix * innerMatrix;
+              } else if (transformType == "perspective") {
+                auto innerMatrix = winrt::Windows::Foundation::Numerics::float4x4::identity();
+                innerMatrix.m34 = -1 / innerValue.AsSingle();
+                transformMatrix = transformMatrix * innerMatrix;
+              } else if (transformType == "rotateX") {
+                transformMatrix = transformMatrix *
+                    winrt::Windows::Foundation::Numerics::make_float4x4_rotation_x(ToRadians(innerValue));
+              } else if (transformType == "rotateY") {
+                transformMatrix = transformMatrix *
+                    winrt::Windows::Foundation::Numerics::make_float4x4_rotation_y(ToRadians(innerValue));
+              } else if (transformType == "rotate" || transformType == "rotateZ") {
+                transformMatrix = transformMatrix *
+                    winrt::Windows::Foundation::Numerics::make_float4x4_rotation_z(ToRadians(innerValue));
+              } else if (transformType == "scale") {
+                transformMatrix = transformMatrix *
+                    winrt::Windows::Foundation::Numerics::make_float4x4_scale(
+                                      innerValue.AsSingle(), innerValue.AsSingle(), 1);
+              } else if (transformType == "scaleX") {
+                transformMatrix = transformMatrix *
+                    winrt::Windows::Foundation::Numerics::make_float4x4_scale(innerValue.AsSingle(), 1, 1);
+              } else if (transformType == "scaleY") {
+                transformMatrix = transformMatrix *
+                    winrt::Windows::Foundation::Numerics::make_float4x4_scale(1, innerValue.AsSingle(), 1);
+              } else if (transformType == "translate") {
+                auto &params = innerValue.AsArray();
+                transformMatrix =
+                    transformMatrix *
+                    winrt::Windows::Foundation::Numerics::make_float4x4_translation(
+                        params[0].AsSingle(), params[1].AsSingle(), params.size() > 2 ? params[2].AsSingle() : 0.f);
+              } else if (transformType == "translateX") {
+                transformMatrix = transformMatrix *
+                    winrt::Windows::Foundation::Numerics::make_float4x4_translation(innerValue.AsSingle(), 0.f, 0.f);
+              } else if (transformType == "translateY") {
+                transformMatrix = transformMatrix *
+                    winrt::Windows::Foundation::Numerics::make_float4x4_translation(0.f, innerValue.AsSingle(), 0.f);
+              } else if (transformType == "skewX") {
+                transformMatrix =
+                    transformMatrix *
+                    winrt::Windows::Foundation::Numerics::float4x4(
+                        winrt::Windows::Foundation::Numerics::make_float3x2_skew(innerValue.AsSingle(), 0.f));
+              } else if (transformType == "skewY") {
+                transformMatrix =
+                    transformMatrix *
+                    winrt::Windows::Foundation::Numerics::float4x4(
+                        winrt::Windows::Foundation::Numerics::make_float3x2_skew(0.f, innerValue.AsSingle()));
+              }
+            }
+          }
 
           if (!element.IsLoaded()) {
-            element.Loaded([=](auto sender, auto &&) -> auto {
+            element.Loaded([=](auto sender, auto &&) -> auto{
               ApplyTransformMatrix(sender.as<xaml::UIElement>(), nodeToUpdate, transformMatrix);
             });
           } else {
@@ -344,13 +417,30 @@ bool FrameworkElementViewManager::UpdateProperty(
           const std::string &innerName = pair.first;
           const auto &innerValue = pair.second;
 
-          if (innerName == "selected")
+          auto peer = xaml::Automation::Peers::FrameworkElementAutomationPeer::FromElement(element);
+
+          if (innerName == "selected") {
             states[static_cast<int32_t>(winrt::Microsoft::ReactNative::AccessibilityStates::Selected)] =
                 innerValue.AsBoolean();
-          else if (innerName == "disabled")
+            const auto prevSelectedState = DynamicAutomationProperties::GetAccessibilityStateSelected(element);
+            if (peer != nullptr && prevSelectedState != innerValue.AsBoolean()) {
+              peer.RaisePropertyChangedEvent(
+                  winrt::SelectionItemPatternIdentifiers::IsSelectedProperty(),
+                  winrt::box_value(prevSelectedState),
+                  winrt::box_value(innerValue.AsBoolean()));
+            }
+          } else if (innerName == "disabled") {
             states[static_cast<int32_t>(winrt::Microsoft::ReactNative::AccessibilityStates::Disabled)] =
                 innerValue.AsBoolean();
-          else if (innerName == "checked") {
+            const auto prevDisabledState = DynamicAutomationProperties::GetAccessibilityStateDisabled(element);
+
+            if (peer != nullptr && prevDisabledState != innerValue.AsBoolean()) {
+              peer.RaisePropertyChangedEvent(
+                  winrt::AutomationElementIdentifiers::IsEnabledProperty(),
+                  winrt::box_value(!prevDisabledState),
+                  winrt::box_value(!innerValue.AsBoolean()));
+            }
+          } else if (innerName == "checked") {
             states[static_cast<int32_t>(winrt::Microsoft::ReactNative::AccessibilityStates::Checked)] =
                 innerValue.Type() == winrt::Microsoft::ReactNative::JSValueType::Boolean && innerValue.AsBoolean();
             states[static_cast<int32_t>(winrt::Microsoft::ReactNative::AccessibilityStates::Unchecked)] =
@@ -358,6 +448,30 @@ bool FrameworkElementViewManager::UpdateProperty(
             // If the state is "mixed" we'll just set both Checked and Unchecked to false,
             // then later in the IToggleProvider implementation it will return the Intermediate state
             // due to both being set to false (see  DynamicAutomationPeer::ToggleState()).
+            const auto prevCheckedState = DynamicAutomationProperties::GetAccessibilityStateChecked(element);
+            const auto prevUncheckedState = DynamicAutomationProperties::GetAccessibilityStateUnchecked(element);
+
+            if (peer != nullptr) {
+              if (prevCheckedState !=
+                      states[static_cast<int32_t>(winrt::Microsoft::ReactNative::AccessibilityStates::Checked)] ||
+                  prevUncheckedState !=
+                      states[static_cast<int32_t>(winrt::Microsoft::ReactNative::AccessibilityStates::Unchecked)]) {
+                // Checking if either state has changed here to catch changes involving "mixed" state.
+                const auto oldValue = prevCheckedState ? winrt::ToggleState::On : winrt::ToggleState::Off;
+                if (innerValue.Type() != winrt::Microsoft::ReactNative::JSValueType::Boolean) {
+                  peer.RaisePropertyChangedEvent(
+                      winrt::TogglePatternIdentifiers::ToggleStateProperty(),
+                      winrt::box_value(oldValue),
+                      winrt::box_value(winrt::ToggleState::Indeterminate));
+                } else {
+                  const auto newValue = innerValue.AsBoolean() ? winrt::ToggleState::On : winrt::ToggleState::Off;
+                  peer.RaisePropertyChangedEvent(
+                      winrt::TogglePatternIdentifiers::ToggleStateProperty(),
+                      winrt::box_value(oldValue),
+                      winrt::box_value(newValue));
+                }
+              }
+            }
           } else if (innerName == "busy")
             states[static_cast<int32_t>(winrt::Microsoft::ReactNative::AccessibilityStates::Busy)] =
                 !innerValue.IsNull() && innerValue.AsBoolean();
@@ -366,6 +480,19 @@ bool FrameworkElementViewManager::UpdateProperty(
                 !innerValue.IsNull() && innerValue.AsBoolean();
             states[static_cast<int32_t>(winrt::Microsoft::ReactNative::AccessibilityStates::Collapsed)] =
                 innerValue.IsNull() || !innerValue.AsBoolean();
+
+            const auto prevExpandedState = DynamicAutomationProperties::GetAccessibilityStateExpanded(element);
+
+            if (peer != nullptr && prevExpandedState != innerValue.AsBoolean()) {
+              const auto newValue =
+                  innerValue.AsBoolean() ? winrt::ExpandCollapseState::Expanded : winrt::ExpandCollapseState::Collapsed;
+              const auto oldValue =
+                  prevExpandedState ? winrt::ExpandCollapseState::Expanded : winrt::ExpandCollapseState::Collapsed;
+              peer.RaisePropertyChangedEvent(
+                  winrt::ExpandCollapsePatternIdentifiers::ExpandCollapseStateProperty(),
+                  winrt::box_value(oldValue),
+                  winrt::box_value(newValue));
+            }
           }
         }
       }

package/Microsoft.ReactNative/Views/Image/ImageViewManager.cpp

@@ -167,7 +167,7 @@ bool ImageViewManager::UpdateProperty(
 }
 
 void ImageViewManager::EmitImageEvent(winrt::Grid grid, const char *eventName, ReactImageSource &source) {
-  int64_t tag = grid.Tag().as<winrt::IPropertyValue>().GetInt64();
+  int64_t tag = GetTag(grid);
   folly::dynamic imageSource =
       folly::dynamic::object()("uri", source.uri)("width", source.width)("height", source.height);
 

package/Microsoft.ReactNative/Views/Image/Microsoft.UI.Composition.Effects_Impl.h

@@ -141,14 +141,10 @@ class EffectBase : public winrt::implements<EffectBase, abi::IGraphicsEffectD2D1
 
 #pragma push_macro("DECLARE_SOURCE")
 #undef DECLARE_SOURCE
-#define DECLARE_SOURCE(Name)                             \
-  winrt::IGraphicsEffectSource m_##Name;                 \
-  winrt::IGraphicsEffectSource Name() {                  \
-    return m_##Name;                                     \
-  }                                                      \
-  void Name(winrt::IGraphicsEffectSource const &value) { \
-    m_##Name = value;                                    \
-  }
+#define DECLARE_SOURCE(Name)                               \
+  winrt::IGraphicsEffectSource m_##Name;                   \
+  winrt::IGraphicsEffectSource Name() { return m_##Name; } \
+  void Name(winrt::IGraphicsEffectSource const &value) { m_##Name = value; }
 
 #pragma push_macro("DECLARE_SINGLE_SOURCE")
 #undef DECLARE_SINGLE_SOURCE
@@ -192,9 +188,7 @@ class EffectBase : public winrt::implements<EffectBase, abi::IGraphicsEffectD2D1
   Type m_##Name = InitialValue;                                   \
                                                                   \
  public:                                                          \
-  Type Name() {                                                   \
-    return m_##Name;                                              \
-  }                                                               \
+  Type Name() { return m_##Name; }                                \
   void Name(Type const &value) {                                  \
     if (!(0, Condition)) {                                        \
       throw winrt::hresult_invalid_argument();                    \

package/Microsoft.ReactNative/Views/Image/ReactImage.cpp

@@ -259,7 +259,8 @@ winrt::fire_and_forget ReactImage::SetBackground(bool fireLoadEndEvent) {
       compositionBrush->TintColor(strong_this->m_tintColor);
 
       const auto surface = fromStream ? winrt::LoadedImageSurface::StartLoadFromStream(memoryStream)
-                                      : uri ? winrt::LoadedImageSurface::StartLoadFromUri(uri) : nullptr;
+          : uri                       ? winrt::LoadedImageSurface::StartLoadFromUri(uri)
+                                      : nullptr;
 
       m_sizeChangedRevoker = strong_this->SizeChanged(
           winrt::auto_revoke, [compositionBrush](const auto &, const winrt::SizeChangedEventArgs &args) {

package/Microsoft.ReactNative/Views/SliderViewManager.cpp

@@ -14,10 +14,6 @@
 #include <UI.Xaml.Controls.Primitives.h>
 #include <UI.Xaml.Controls.h>
 
-namespace winrt {
-using ToggleButton = xaml::Controls::Primitives::ToggleButton;
-}
-
 namespace Microsoft::ReactNative {
 
 class SliderShadowNode : public ShadowNodeBase {
@@ -80,6 +76,18 @@ bool SliderViewManager::UpdateProperty(
       slider.Value(propertyValue.AsDouble());
     else if (propertyValue.IsNull())
       slider.Value(0);
+  } else if (propertyName == "maximumValue") {
+    if (propertyValue.Type() == winrt::Microsoft::ReactNative::JSValueType::Double ||
+        propertyValue.Type() == winrt::Microsoft::ReactNative::JSValueType::Int64)
+      slider.Maximum(propertyValue.AsDouble());
+    else if (propertyValue.IsNull())
+      slider.Maximum(100);
+  } else if (propertyName == "minimumValue") {
+    if (propertyValue.Type() == winrt::Microsoft::ReactNative::JSValueType::Double ||
+        propertyValue.Type() == winrt::Microsoft::ReactNative::JSValueType::Int64)
+      slider.Minimum(propertyValue.AsDouble());
+    else if (propertyValue.IsNull())
+      slider.Minimum(0);
   } else {
     return Super::UpdateProperty(nodeToUpdate, propertyName, propertyValue);
   }

package/Microsoft.ReactNative/Views/TextInputViewManager.cpp

@@ -760,7 +760,7 @@ void TextInputShadowNode::dispatchCommand(
 TextInputViewManager::TextInputViewManager(const Mso::React::IReactContext &context) : Super(context) {}
 
 const wchar_t *TextInputViewManager::GetName() const {
-  return L"RCTTextInput";
+  return L"WindowsTextInput";
 }
 
 void TextInputViewManager::GetNativeProps(const winrt::Microsoft::ReactNative::IJSValueWriter &writer) const {

package/Microsoft.ReactNative/Views/TextViewManager.cpp

@@ -23,7 +23,7 @@
 #include <Utils/ValueUtils.h>
 
 #ifdef USE_WINUI3
-#include <winrt/Microsoft.UI.Input.Experimental.h>
+#include <winrt/Microsoft.UI.Input.h>
 #endif
 
 namespace winrt {
@@ -357,7 +357,7 @@ void TextViewManager::OnPointerEvent(
     args.Target(nullptr);
 
     // Get the pointer point and hit test
-    const auto point = args.Args().GetCurrentPoint(textBlock).RawPosition();
+    const auto point = args.Args().GetCurrentPoint(textBlock).Position();
     HitTest(node, args, point);
 
     // Set the target back to the current view if hit test failed

package/Microsoft.ReactNative/Views/TouchEventHandler.cpp

@@ -26,7 +26,10 @@
 #include <winrt/Windows.UI.Input.h>
 
 #ifdef USE_WINUI3
-#include <winrt/Microsoft.UI.Input.Experimental.h>
+#include <winrt/Microsoft.UI.Input.h>
+namespace input = winrt::Microsoft::UI::Input;
+#else
+namespace input = winrt::Windows::UI::Input;
 #endif
 
 namespace Microsoft::ReactNative {
@@ -46,7 +49,7 @@ TouchEventHandler::~TouchEventHandler() {
 }
 
 void TouchEventHandler::AddTouchHandlers(XamlView xamlView, XamlView rootView, bool handledEventsToo) {
-  auto uiElement(xamlView.as<xaml::UIElement>());
+  auto uiElement(xamlView.try_as<xaml::UIElement>());
   if (uiElement == nullptr) {
     assert(false);
     return;
@@ -118,7 +121,7 @@ void TouchEventHandler::OnPointerPressed(
 
   // If this was caused by the user pressing the "back" hardware button, fire that event instead
   if (args.GetCurrentPoint(sourceElement).Properties().PointerUpdateKind() ==
-      winrt::Windows::UI::Input::PointerUpdateKind::XButton1Pressed) {
+      input::PointerUpdateKind::XButton1Pressed) {
     args.Handled(DispatchBackEvent());
     return;
   }
@@ -127,16 +130,9 @@ void TouchEventHandler::OnPointerPressed(
     assert(!tagsForBranch.empty());
     const auto tag = tagsForBranch.front();
 
-    // Pointer pressing updates the enter/leave state
-    UpdatePointersInViews(args, sourceElement, std::move(tagsForBranch));
-
     size_t pointerIndex = AddReactPointer(args, tag, sourceElement);
 
-    // For now, when using the mouse we only want to send click events for the left button.
-    // Finger and pen taps will also set isLeftButton.
-    if (m_pointers[pointerIndex].isLeftButton) {
-      DispatchTouchEvent(eventType, pointerIndex);
-    }
+    DispatchTouchEvent(eventType, pointerIndex);
   }
 }
 
@@ -189,10 +185,11 @@ void TouchEventHandler::OnPointerMoved(
   if (optPointerIndex) {
     UpdateReactPointer(m_pointers[*optPointerIndex], args, sourceElement);
     DispatchTouchEvent(eventType, *optPointerIndex);
-  } else {
-    // Move with no buttons pressed
-    UpdatePointersInViews(args, sourceElement, std::move(tagsForBranch));
   }
+
+  // If we re-introduce onMouseMove to react-native-windows, we should add an
+  // argument to ensure we do not emit these events while the pointer is down.
+  UpdatePointersInViews(args, sourceElement, std::move(tagsForBranch));
 }
 
 void TouchEventHandler::OnPointerConcluded(TouchEventType eventType, const winrt::PointerRoutedEventArgs &args) {
@@ -213,23 +210,18 @@ void TouchEventHandler::OnPointerConcluded(TouchEventType eventType, const winrt
   if (PropagatePointerEventAndFindReactSourceBranch(reactArgs, &tagsForBranch, &sourceElement))
     UpdateReactPointer(m_pointers[*optPointerIndex], args, sourceElement);
 
-  if (m_pointers[*optPointerIndex].isLeftButton) {
-    // In case a PointerCaptureLost event should be treated as an "end" event,
-    // check the ReactPointerEventArgs Kind property before emitting the event.
-    const auto adjustedEventType = reactArgs.Kind() == winrt::Microsoft::ReactNative::PointerEventKind::End
-        ? TouchEventType::End
-        : TouchEventType::Cancel;
-    DispatchTouchEvent(adjustedEventType, *optPointerIndex);
-  }
+  // In case a PointerCaptureLost event should be treated as an "end" event,
+  // check the ReactPointerEventArgs Kind property before emitting the event.
+  const auto adjustedEventType = reactArgs.Kind() == winrt::Microsoft::ReactNative::PointerEventKind::End
+      ? TouchEventType::End
+      : TouchEventType::Cancel;
+  DispatchTouchEvent(adjustedEventType, *optPointerIndex);
 
   m_pointers.erase(cbegin(m_pointers) + *optPointerIndex);
   if (m_pointers.size() == 0)
     m_touchId = 0;
 
   m_xamlView.as<xaml::FrameworkElement>().ReleasePointerCapture(args.Pointer());
-
-  // Updates the enter/leave state when pointer was being tracked
-  UpdatePointersInViews(args, sourceElement, std::move(tagsForBranch));
 }
 
 size_t TouchEventHandler::AddReactPointer(
@@ -334,7 +326,7 @@ void TouchEventHandler::UpdatePointersInViews(
     } else {
       // newViews is empty when UpdatePointersInViews is called from outside
       // the root view, in this case use -1 for the JS event pointer target
-      const auto tag = !newViews.empty() ? newViews.front() : -1;
+      const auto tag = !newViews.empty() ? newViews.front() : InvalidTag;
       pointer = CreateReactPointer(args, tag, sourceElement);
     }
 
@@ -373,7 +365,21 @@ void TouchEventHandler::UpdatePointersInViews(
   }
 }
 
+// defines button payload, follows https://developer.mozilla.org/docs/Web/API/MouseEvent/button
+enum class MouseEventButtonKind { None = -1, Main = 0, Auxiliary = 1, Secondary = 2, Eraser = 5 };
+
 winrt::Microsoft::ReactNative::JSValue TouchEventHandler::GetPointerJson(const ReactPointer &pointer, int64_t target) {
+  MouseEventButtonKind button = MouseEventButtonKind::None;
+  if (pointer.isLeftButton) {
+    button = MouseEventButtonKind::Main;
+  } else if (pointer.isMiddleButton) {
+    button = MouseEventButtonKind::Auxiliary;
+  } else if (pointer.isRightButton || pointer.isBarrelButton) {
+    button = MouseEventButtonKind::Secondary;
+  } else if (pointer.isEraser) {
+    button = MouseEventButtonKind::Eraser;
+  }
+
   return winrt::Microsoft::ReactNative::JSValueObject{
       {"target", target},
       {"identifier", pointer.identifier},
@@ -395,6 +401,7 @@ winrt::Microsoft::ReactNative::JSValue TouchEventHandler::GetPointerJson(const R
       {"isEraser", pointer.isEraser},
       {"shiftKey", pointer.shiftKey},
       {"ctrlKey", pointer.ctrlKey},
+      {"button", static_cast<int>(button)},
       {"altKey", pointer.altKey}};
 }
 
@@ -414,9 +421,9 @@ facebook::react::SharedEventEmitter EventEmitterForElement(
   auto element = view->Element();
   while (auto parent = element.Parent()) {
     if (element = parent.try_as<xaml::FrameworkElement>()) {
-      auto boxedTag = element.Tag();
-      if (boxedTag) {
-        if (tag = winrt::unbox_value<facebook::react::Tag>(element.Tag()))
+      auto elementTag = GetTag(element);
+      if (elementTag != InvalidTag) {
+        if ((tag = static_cast<facebook::react::Tag>(elementTag)) != InvalidTag)
           return EventEmitterForElement(uimanager, tag);
       }
     }
@@ -438,6 +445,109 @@ facebook::react::Touch TouchEventHandler::TouchForPointer(const ReactPointer &po
   t.timestamp = static_cast<facebook::react::Float>(pointer.timestamp);
   return t;
 }
+
+winrt::IPropertyValue TestHit(
+    const winrt::Collections::IVectorView<xaml::Documents::Inline> &inlines,
+    const winrt::Point &pointerPos,
+    bool &isHit) {
+  winrt::IPropertyValue tag(nullptr);
+
+  for (const auto &el : inlines) {
+    if (const auto span = el.try_as<xaml::Documents::Span>()) {
+      auto resTag = TestHit(span.Inlines().GetView(), pointerPos, isHit);
+
+      if (resTag)
+        return resTag;
+
+      if (isHit) {
+        tag = el.GetValue(xaml::FrameworkElement::TagProperty()).try_as<winrt::IPropertyValue>();
+        if (tag) {
+          return tag;
+        }
+      }
+    } else if (const auto run = el.try_as<xaml::Documents::Run>()) {
+      const auto start = el.ContentStart();
+      const auto end = el.ContentEnd();
+
+      auto startRect = start.GetCharacterRect(xaml::Documents::LogicalDirection::Forward);
+      auto endRect = end.GetCharacterRect(xaml::Documents::LogicalDirection::Forward);
+
+      // Swap rectangles in RTL scenarios.
+      if (startRect.X > endRect.X) {
+        const auto tempRect = startRect;
+        startRect = endRect;
+        endRect = tempRect;
+      }
+
+      // Approximate the bounding rect (for now, don't account for text wrapping).
+      if ((startRect.X <= pointerPos.X) && (endRect.X + endRect.Width >= pointerPos.X) &&
+          (startRect.Y <= pointerPos.Y) && (endRect.Y + endRect.Height >= pointerPos.Y)) {
+        isHit = true;
+        return nullptr;
+      }
+    }
+  }
+
+  return tag;
+}
+
+bool TagFromOriginalSource(const winrt::PointerRoutedEventArgs &args, int64_t *pTag, xaml::UIElement *pSourceElement) {
+  assert(pTag != nullptr);
+  assert(pSourceElement != nullptr);
+
+  // Find the React element that triggered the input event
+  xaml::UIElement sourceElement = args.OriginalSource().try_as<xaml::UIElement>();
+  winrt::IPropertyValue tag(nullptr);
+
+  while (sourceElement) {
+    auto tagValue = sourceElement.ReadLocalValue(xaml::FrameworkElement::TagProperty());
+    if (tagValue != xaml::DependencyProperty::UnsetValue()) {
+      tag = tagValue.try_as<winrt::IPropertyValue>();
+      // If a TextBlock was the UIElement event source, perform a more accurate hit test,
+      // searching for the tag of the nested Run/Span XAML elements that the user actually clicked.
+      // This is to support nested <Text> elements in React.
+      // Nested React <Text> elements get translated into nested XAML <Span> elements,
+      // while the content of the <Text> becomes a list of XAML <Run> elements.
+      // However, we should report the Text element as the target, not the contexts of the text.
+      if (const auto textBlock = sourceElement.try_as<xaml::Controls::TextBlock>()) {
+        const auto pointerPos = args.GetCurrentPoint(textBlock).RawPosition();
+        const auto inlines = textBlock.Inlines().GetView();
+
+        bool isHit = false;
+        const auto finerTag = TestHit(inlines, pointerPos, isHit);
+        if (finerTag) {
+          tag = finerTag;
+        }
+      }
+
+      break;
+    }
+
+    sourceElement = winrt::VisualTreeHelper::GetParent(sourceElement).try_as<xaml::UIElement>();
+  }
+
+  if (tag == nullptr) {
+    // If the root view fails to be fully created, then the Tag property will
+    // never be set. This can happen,
+    //  for example, when the red box error box is shown.
+    return false;
+  }
+
+  *pTag = tag.GetInt64();
+  *pSourceElement = sourceElement;
+  return true;
+}
+
+bool TouchEventHandler::IsEndishEventType(TouchEventType eventType) noexcept {
+  switch (eventType) {
+    case TouchEventType::End:
+    case TouchEventType::Cancel:
+    case TouchEventType::CaptureLost:
+      return true;
+    default:
+      return false;
+  }
+}
 #endif
 
 void TouchEventHandler::DispatchTouchEvent(TouchEventType eventType, size_t pointerIndex) {
@@ -456,8 +566,13 @@ void TouchEventHandler::DispatchTouchEvent(TouchEventType eventType, size_t poin
 
     size_t index = 0;
     for (const auto &pointer : m_pointers) {
-      te.touches.insert(TouchForPointer(pointer));
-      if (pointerIndex == index++)
+      bool isChangedPointer = pointerIndex == index++;
+
+      if (!isChangedPointer || !IsEndishEventType(eventType)) {
+        te.touches.insert(TouchForPointer(pointer));
+      }
+
+      if (isChangedPointer)
         te.changedTouches.insert(TouchForPointer(pointer));
 
       auto emitter = std::static_pointer_cast<facebook::react::TouchEventEmitter>(
@@ -530,17 +645,16 @@ bool TouchEventHandler::DispatchBackEvent() {
   return true;
 }
 
-const char *TouchEventHandler::GetPointerDeviceTypeName(
-    winrt::Windows::Devices::Input::PointerDeviceType deviceType) noexcept {
+const char *TouchEventHandler::GetPointerDeviceTypeName(PointerDeviceType deviceType) noexcept {
   const char *deviceTypeName = "unknown";
   switch (deviceType) {
-    case winrt::Windows::Devices::Input::PointerDeviceType::Mouse:
+    case PointerDeviceType::Mouse:
       deviceTypeName = "mouse";
       break;
-    case winrt::Windows::Devices::Input::PointerDeviceType::Pen:
+    case PointerDeviceType::Pen:
       deviceTypeName = "pen";
       break;
-    case winrt::Windows::Devices::Input::PointerDeviceType::Touch:
+    case PointerDeviceType::Touch:
       deviceTypeName = "touch";
       break;
     default:
@@ -605,6 +719,18 @@ bool TouchEventHandler::PropagatePointerEventAndFindReactSourceBranch(
   assert(pTagsForBranch != nullptr);
   assert(pSourceElement != nullptr);
 
+#ifdef USE_FABRIC
+  if (m_fabric) {
+    int64_t tag;
+    if (TagFromOriginalSource(args.Args(), &tag, pSourceElement)) {
+      std::vector<int64_t> tagsForBranch;
+      tagsForBranch.push_back(tag);
+      *pTagsForBranch = std::move(tagsForBranch);
+    }
+    return pSourceElement != nullptr;
+  }
+#endif
+
   if (const auto uiManager = GetNativeUIManager(*m_context).lock()) {
     xaml::UIElement sourceElement = args.Args().OriginalSource().try_as<xaml::UIElement>();
     ShadowNodeBase *node = nullptr;
@@ -691,7 +817,7 @@ std::vector<int64_t> GetTagsForBranch(INativeUIManagerHost *host, int64_t tag, i
   std::vector<int64_t> tags;
 
   auto *shadowNode = host->FindShadowNodeForTag(tag);
-  while (shadowNode != nullptr && tag != -1) {
+  while (shadowNode != nullptr && tag != InvalidTag) {
     if (tag == rootTag) {
       break;
     }