react-native-windows 0.72.13 → 0.73.0-preview.1

package/Microsoft.ReactNative/Fabric/Composition/ParagraphComponentView.cpp

@@ -11,6 +11,7 @@
 #include <react/renderer/components/text/ParagraphState.h>
 #include <unicode.h>
 #include <winrt/Microsoft.ReactNative.Composition.h>
+#include "Composition/AutoDraw.h"
 #include "CompositionDynamicAutomationProvider.h"
 #include "CompositionHelpers.h"
 
@@ -54,6 +55,10 @@ void ParagraphComponentView::updateProps(
     updateTextAlignment(newViewProps.textAttributes.alignment);
   }
 
+  // update BaseComponentView props
+  updateAccessibilityProps(oldViewProps, newViewProps);
+  updateShadowProps(oldViewProps, newViewProps, m_visual);
+  updateTransformProps(oldViewProps, newViewProps, m_visual);
   updateBorderProps(oldViewProps, newViewProps);
 
   m_props = std::static_pointer_cast<facebook::react::ParagraphProps const>(props);
@@ -99,8 +104,10 @@ facebook::react::Props::Shared ParagraphComponentView::props() noexcept {
   return m_props;
 }
 
-facebook::react::Tag ParagraphComponentView::hitTest(facebook::react::Point pt, facebook::react::Point &localPt)
-    const noexcept {
+facebook::react::Tag ParagraphComponentView::hitTest(
+    facebook::react::Point pt,
+    facebook::react::Point &localPt,
+    bool ignorePointerEvents) const noexcept {
   facebook::react::Point ptLocal{pt.x - m_layoutMetrics.frame.origin.x, pt.y - m_layoutMetrics.frame.origin.y};
 
   facebook::react::Tag targetTag;
@@ -115,7 +122,7 @@ facebook::react::Tag ParagraphComponentView::hitTest(facebook::react::Point pt,
       return targetTag;
       */
 
-  if ((m_props->pointerEvents == facebook::react::PointerEventsMode::Auto ||
+  if ((ignorePointerEvents || m_props->pointerEvents == facebook::react::PointerEventsMode::Auto ||
        m_props->pointerEvents == facebook::react::PointerEventsMode::BoxOnly) &&
       ptLocal.x >= 0 && ptLocal.x <= m_layoutMetrics.frame.size.width && ptLocal.y >= 0 &&
       ptLocal.y <= m_layoutMetrics.frame.size.height) {
@@ -126,7 +133,7 @@ facebook::react::Tag ParagraphComponentView::hitTest(facebook::react::Point pt,
   return -1;
 }
 
-facebook::react::SharedTouchEventEmitter ParagraphComponentView::touchEventEmitterAtPoint(
+facebook::react::SharedViewEventEmitter ParagraphComponentView::eventEmitterAtPoint(
     facebook::react::Point pt) noexcept {
   if (m_attributedStringBox.getValue().getFragments().size()) {
     BOOL isTrailingHit = false;
@@ -138,7 +145,7 @@ facebook::react::SharedTouchEventEmitter ParagraphComponentView::touchEventEmitt
 
       for (auto fragment : m_attributedStringBox.getValue().getFragments()) {
         if (textPosition < fragment.string.length()) {
-          return std::static_pointer_cast<const facebook::react::TouchEventEmitter>(
+          return std::static_pointer_cast<const facebook::react::ViewEventEmitter>(
               fragment.parentShadowView.eventEmitter);
         }
         textPosition -= static_cast<uint32_t>(fragment.string.length());
@@ -200,13 +207,13 @@ void ParagraphComponentView::updateVisualBrush() noexcept {
   // updateTextAlignment(paragraphProps.textAttributes.alignment);
 
   if (!m_textLayout) {
-    facebook::react::LayoutConstraints contraints;
-    contraints.maximumSize.width =
+    facebook::react::LayoutConstraints constraints;
+    constraints.maximumSize.width =
         m_layoutMetrics.frame.size.width - m_layoutMetrics.contentInsets.left - m_layoutMetrics.contentInsets.right;
-    contraints.maximumSize.height =
+    constraints.maximumSize.height =
         m_layoutMetrics.frame.size.height - m_layoutMetrics.contentInsets.top - m_layoutMetrics.contentInsets.bottom;
 
-    facebook::react::TextLayoutManager::GetTextLayout(m_attributedStringBox, {} /*TODO*/, contraints, m_textLayout);
+    facebook::react::TextLayoutManager::GetTextLayout(m_attributedStringBox, {} /*TODO*/, constraints, m_textLayout);
     requireNewBrush = true;
   }
 
@@ -226,7 +233,7 @@ void ParagraphComponentView::updateVisualBrush() noexcept {
       winrt::Windows::Foundation::Size surfaceSize = {
           m_layoutMetrics.frame.size.width * m_layoutMetrics.pointScaleFactor,
           m_layoutMetrics.frame.size.height * m_layoutMetrics.pointScaleFactor};
-      m_drawingSurface = m_compContext.CreateDrawingSurface(
+      m_drawingSurface = m_compContext.CreateDrawingSurfaceBrush(
           surfaceSize,
           winrt::Windows::Graphics::DirectX::DirectXPixelFormat::B8G8R8A8UIntNormalized,
           winrt::Windows::Graphics::DirectX::DirectXAlphaMode::Premultiplied);
@@ -234,8 +241,6 @@ void ParagraphComponentView::updateVisualBrush() noexcept {
 
     DrawText();
 
-    auto surfaceBrush = m_compContext.CreateSurfaceBrush(m_drawingSurface);
-
     // The surfaceBrush's size is based on the size the text takes up, which maybe smaller than the total visual
     // So we need to align the brush within the visual to match the text alignment.
     const auto &paragraphProps = *std::static_pointer_cast<const facebook::react::ParagraphProps>(m_props);
@@ -264,11 +269,13 @@ void ParagraphComponentView::updateVisualBrush() noexcept {
       }
     }
     */
-    // TODO Using brush alignment to align the text makes it blury...
-    surfaceBrush.HorizontalAlignmentRatio(horizAlignment);
-    surfaceBrush.VerticalAlignmentRatio(0.f);
-    surfaceBrush.Stretch(winrt::Microsoft::ReactNative::Composition::CompositionStretch::None);
-    m_visual.Brush(surfaceBrush);
+    // TODO Using brush alignment to align the text makes it blurry...
+    if (m_drawingSurface) {
+      m_drawingSurface.HorizontalAlignmentRatio(horizAlignment);
+      m_drawingSurface.VerticalAlignmentRatio(0.f);
+      m_drawingSurface.Stretch(winrt::Microsoft::ReactNative::Composition::CompositionStretch::None);
+    }
+    m_visual.Brush(m_drawingSurface);
   }
 
   if (m_requireRedraw) {
@@ -286,192 +293,193 @@ void ParagraphComponentView::DrawText() noexcept {
     return;
   }
 
-  // Begin our update of the surface pixels. If this is our first update, we are required
-  // to specify the entire surface, which nullptr is shorthand for (but, as it works out,
-  // any time we make an update we touch the entire surface, so we always pass nullptr).
-  winrt::com_ptr<ID2D1DeviceContext> d2dDeviceContext;
   POINT offset;
-
-  winrt::com_ptr<Composition::ICompositionDrawingSurfaceInterop> drawingSurfaceInterop;
-  m_drawingSurface.as(drawingSurfaceInterop);
-
-  if (CheckForDeviceRemoved(drawingSurfaceInterop->BeginDraw(d2dDeviceContext.put(), &offset))) {
-    d2dDeviceContext->Clear(
-        m_props->backgroundColor ? m_props->backgroundColor.AsD2DColor() : D2D1::ColorF(D2D1::ColorF::Black, 0.0f));
-    assert(d2dDeviceContext->GetUnitMode() == D2D1_UNIT_MODE_DIPS);
-    const auto dpi = m_layoutMetrics.pointScaleFactor * 96.0f;
-    float oldDpiX, oldDpiY;
-    d2dDeviceContext->GetDpi(&oldDpiX, &oldDpiY);
-    d2dDeviceContext->SetDpi(dpi, dpi);
-
-    float offsetX = static_cast<float>(offset.x / m_layoutMetrics.pointScaleFactor);
-    float offsetY = static_cast<float>(offset.y / m_layoutMetrics.pointScaleFactor);
-
-    const auto &paragraphProps = *std::static_pointer_cast<const facebook::react::ParagraphProps>(m_props);
-
-    // Create a solid color brush for the text. A more sophisticated application might want
-    // to cache and reuse a brush across all text elements instead, taking care to recreate
-    // it in the event of device removed.
-    winrt::com_ptr<ID2D1SolidColorBrush> brush;
-    if (paragraphProps.textAttributes.foregroundColor) {
-      auto color = paragraphProps.textAttributes.foregroundColor.AsD2DColor();
-      winrt::check_hresult(d2dDeviceContext->CreateSolidColorBrush(color, brush.put()));
-    } else {
-      winrt::check_hresult(
-          d2dDeviceContext->CreateSolidColorBrush(D2D1::ColorF(D2D1::ColorF::Black, 1.0f), brush.put()));
-    }
-
-    if (paragraphProps.textAttributes.textDecorationLineType) {
-      DWRITE_TEXT_RANGE range = {0, std::numeric_limits<uint32_t>::max()};
-      if (*(paragraphProps.textAttributes.textDecorationLineType) ==
-              facebook::react::TextDecorationLineType::Underline ||
-          *(paragraphProps.textAttributes.textDecorationLineType) ==
-              facebook::react::TextDecorationLineType::UnderlineStrikethrough) {
-        m_textLayout->SetUnderline(true, range);
+  {
+    ::Microsoft::ReactNative::Composition::AutoDrawDrawingSurface autoDraw(m_drawingSurface, &offset);
+    if (auto d2dDeviceContext = autoDraw.GetRenderTarget()) {
+      d2dDeviceContext->Clear(
+          m_props->backgroundColor ? m_props->backgroundColor.AsD2DColor() : D2D1::ColorF(D2D1::ColorF::Black, 0.0f));
+      assert(d2dDeviceContext->GetUnitMode() == D2D1_UNIT_MODE_DIPS);
+      const auto dpi = m_layoutMetrics.pointScaleFactor * 96.0f;
+      float oldDpiX, oldDpiY;
+      d2dDeviceContext->GetDpi(&oldDpiX, &oldDpiY);
+      d2dDeviceContext->SetDpi(dpi, dpi);
+
+      float offsetX = static_cast<float>(offset.x / m_layoutMetrics.pointScaleFactor);
+      float offsetY = static_cast<float>(offset.y / m_layoutMetrics.pointScaleFactor);
+
+      const auto &paragraphProps = *std::static_pointer_cast<const facebook::react::ParagraphProps>(m_props);
+
+      // Create a solid color brush for the text. A more sophisticated application might want
+      // to cache and reuse a brush across all text elements instead, taking care to recreate
+      // it in the event of device removed.
+      winrt::com_ptr<ID2D1SolidColorBrush> brush;
+      if (paragraphProps.textAttributes.foregroundColor) {
+        auto color = paragraphProps.textAttributes.foregroundColor.AsD2DColor();
+        winrt::check_hresult(d2dDeviceContext->CreateSolidColorBrush(color, brush.put()));
       } else {
-        m_textLayout->SetUnderline(false, range);
+        winrt::check_hresult(
+            d2dDeviceContext->CreateSolidColorBrush(D2D1::ColorF(D2D1::ColorF::Black, 1.0f), brush.put()));
       }
-    }
 
-    if (paragraphProps.textAttributes.textDecorationLineType) {
-      DWRITE_TEXT_RANGE range = {0, std::numeric_limits<uint32_t>::max()};
-      if (*(paragraphProps.textAttributes.textDecorationLineType) ==
-              facebook::react::TextDecorationLineType::Strikethrough ||
-          *(paragraphProps.textAttributes.textDecorationLineType) ==
-              facebook::react::TextDecorationLineType::UnderlineStrikethrough) {
-        m_textLayout->SetStrikethrough(true, range);
-      } else {
-        m_textLayout->SetStrikethrough(false, range);
+      if (paragraphProps.textAttributes.textDecorationLineType) {
+        DWRITE_TEXT_RANGE range = {0, std::numeric_limits<uint32_t>::max()};
+        if (*(paragraphProps.textAttributes.textDecorationLineType) ==
+                facebook::react::TextDecorationLineType::Underline ||
+            *(paragraphProps.textAttributes.textDecorationLineType) ==
+                facebook::react::TextDecorationLineType::UnderlineStrikethrough) {
+          m_textLayout->SetUnderline(true, range);
+        } else {
+          m_textLayout->SetUnderline(false, range);
+        }
       }
-    }
-
-    if (!isnan(paragraphProps.opacity)) {
-      m_visual.Opacity(paragraphProps.opacity);
-    }
 
-    // Create color effects for individual text fragments.
-    unsigned int position = 0;
-    unsigned int length = 0;
-    for (auto fragment : m_attributedStringBox.getValue().getFragments()) {
-      length = static_cast<UINT32>(fragment.string.length());
-      DWRITE_TEXT_RANGE range = {position, length};
-      if (fragment.textAttributes.foregroundColor &&
-              (fragment.textAttributes.foregroundColor != paragraphProps.textAttributes.foregroundColor) ||
-          !isnan(fragment.textAttributes.opacity)) {
-        winrt::com_ptr<ID2D1SolidColorBrush> fragmentBrush;
-        if (fragment.textAttributes.foregroundColor) {
-          auto color = fragment.textAttributes.foregroundColor.AsD2DColor();
-          winrt::check_hresult(d2dDeviceContext->CreateSolidColorBrush(color, fragmentBrush.put()));
+      if (paragraphProps.textAttributes.textDecorationLineType) {
+        DWRITE_TEXT_RANGE range = {0, std::numeric_limits<uint32_t>::max()};
+        if (*(paragraphProps.textAttributes.textDecorationLineType) ==
+                facebook::react::TextDecorationLineType::Strikethrough ||
+            *(paragraphProps.textAttributes.textDecorationLineType) ==
+                facebook::react::TextDecorationLineType::UnderlineStrikethrough) {
+          m_textLayout->SetStrikethrough(true, range);
         } else {
-          winrt::check_hresult(
-              d2dDeviceContext->CreateSolidColorBrush(D2D1::ColorF(D2D1::ColorF::Black, 1.0f), fragmentBrush.put()));
+          m_textLayout->SetStrikethrough(false, range);
         }
+      }
 
-        if (fragment.textAttributes.textDecorationLineType) {
-          if (*(fragment.textAttributes.textDecorationLineType) == facebook::react::TextDecorationLineType::Underline ||
-              *(fragment.textAttributes.textDecorationLineType) ==
-                  facebook::react::TextDecorationLineType::UnderlineStrikethrough) {
-            m_textLayout->SetUnderline(true, range);
+      if (!isnan(paragraphProps.opacity)) {
+        m_visual.Opacity(paragraphProps.opacity);
+      }
+
+      // Create color effects for individual text fragments.
+      unsigned int position = 0;
+      unsigned int length = 0;
+      for (auto fragment : m_attributedStringBox.getValue().getFragments()) {
+        length = static_cast<UINT32>(fragment.string.length());
+        DWRITE_TEXT_RANGE range = {position, length};
+        if (fragment.textAttributes.foregroundColor &&
+                (fragment.textAttributes.foregroundColor != paragraphProps.textAttributes.foregroundColor) ||
+            !isnan(fragment.textAttributes.opacity)) {
+          winrt::com_ptr<ID2D1SolidColorBrush> fragmentBrush;
+          if (fragment.textAttributes.foregroundColor) {
+            auto color = fragment.textAttributes.foregroundColor.AsD2DColor();
+            winrt::check_hresult(d2dDeviceContext->CreateSolidColorBrush(color, fragmentBrush.put()));
           } else {
-            m_textLayout->SetUnderline(false, range);
+            winrt::check_hresult(
+                d2dDeviceContext->CreateSolidColorBrush(D2D1::ColorF(D2D1::ColorF::Black, 1.0f), fragmentBrush.put()));
           }
-        }
 
-        if (fragment.textAttributes.textDecorationLineType) {
-          if (*(fragment.textAttributes.textDecorationLineType) ==
-                  facebook::react::TextDecorationLineType::Strikethrough ||
-              *(fragment.textAttributes.textDecorationLineType) ==
-                  facebook::react::TextDecorationLineType::UnderlineStrikethrough) {
-            m_textLayout->SetStrikethrough(true, range);
-          } else {
-            m_textLayout->SetStrikethrough(false, range);
+          if (fragment.textAttributes.textDecorationLineType) {
+            if (*(fragment.textAttributes.textDecorationLineType) ==
+                    facebook::react::TextDecorationLineType::Underline ||
+                *(fragment.textAttributes.textDecorationLineType) ==
+                    facebook::react::TextDecorationLineType::UnderlineStrikethrough) {
+              m_textLayout->SetUnderline(true, range);
+            } else {
+              m_textLayout->SetUnderline(false, range);
+            }
           }
-        }
 
-        if (!isnan(fragment.textAttributes.opacity)) {
-          fragmentBrush->SetOpacity(fragment.textAttributes.opacity);
-        }
-        m_textLayout->SetDrawingEffect(fragmentBrush.get(), range);
-
-        // DWrite doesn't handle background hightlight colors, so we manually draw the background color for ranges
-        if (facebook::react::isColorMeaningful(fragment.textAttributes.backgroundColor)) {
-          UINT32 actualHitTestCount = 0;
-          if (range.length > 0) {
-            m_textLayout->HitTestTextRange(
-                range.startPosition,
-                range.length,
-                0, // x
-                0, // y
-                NULL,
-                0, // metrics count
-                &actualHitTestCount);
+          if (fragment.textAttributes.textDecorationLineType) {
+            if (*(fragment.textAttributes.textDecorationLineType) ==
+                    facebook::react::TextDecorationLineType::Strikethrough ||
+                *(fragment.textAttributes.textDecorationLineType) ==
+                    facebook::react::TextDecorationLineType::UnderlineStrikethrough) {
+              m_textLayout->SetStrikethrough(true, range);
+            } else {
+              m_textLayout->SetStrikethrough(false, range);
+            }
           }
 
-          // Allocate enough room to return all hit-test metrics.
-          std::vector<DWRITE_HIT_TEST_METRICS> hitTestMetrics(actualHitTestCount);
-          if (range.length > 0) {
-            m_textLayout->HitTestTextRange(
-                range.startPosition,
-                range.length,
-                0, // x
-                0, // y
-                &hitTestMetrics[0],
-                static_cast<UINT32>(hitTestMetrics.size()),
-                &actualHitTestCount);
+          if (!isnan(fragment.textAttributes.opacity)) {
+            fragmentBrush->SetOpacity(fragment.textAttributes.opacity);
           }
+          m_textLayout->SetDrawingEffect(fragmentBrush.get(), range);
+
+          // DWrite doesn't handle background highlight colors, so we manually draw the background color for ranges
+          if (facebook::react::isColorMeaningful(fragment.textAttributes.backgroundColor)) {
+            UINT32 actualHitTestCount = 0;
+            if (range.length > 0) {
+              m_textLayout->HitTestTextRange(
+                  range.startPosition,
+                  range.length,
+                  0, // x
+                  0, // y
+                  NULL,
+                  0, // metrics count
+                  &actualHitTestCount);
+            }
+
+            // Allocate enough room to return all hit-test metrics.
+            std::vector<DWRITE_HIT_TEST_METRICS> hitTestMetrics(actualHitTestCount);
+            if (range.length > 0) {
+              m_textLayout->HitTestTextRange(
+                  range.startPosition,
+                  range.length,
+                  0, // x
+                  0, // y
+                  &hitTestMetrics[0],
+                  static_cast<UINT32>(hitTestMetrics.size()),
+                  &actualHitTestCount);
+            }
 
-          // Draw the selection ranges behind the text.
-          if (actualHitTestCount > 0) {
-            // Note that an ideal layout will return fractional values,
-            // so you may see slivers between the selection ranges due
-            // to the per-primitive antialiasing of the edges unless
-            // it is disabled (better for performance anyway).
-            auto oldAliasMode = d2dDeviceContext->GetAntialiasMode();
-            d2dDeviceContext->SetAntialiasMode(D2D1_ANTIALIAS_MODE_ALIASED);
-
-            winrt::com_ptr<ID2D1SolidColorBrush> textHighlightBrush;
-            winrt::check_hresult(d2dDeviceContext->CreateSolidColorBrush(
-                fragment.textAttributes.backgroundColor.AsD2DColor(), textHighlightBrush.put()));
-
-            for (size_t i = 0; i < actualHitTestCount; ++i) {
-              const DWRITE_HIT_TEST_METRICS &htm = hitTestMetrics[i];
-
-              const D2D1_RECT_F rect = {
-                  std::round(htm.left + offsetX),
-                  std::round(htm.top + offsetY),
-                  std::round(htm.left + htm.width + offsetX),
-                  std::round(htm.top + htm.height + offsetY)};
-
-              d2dDeviceContext->FillRectangle(rect, textHighlightBrush.get());
+            // Draw the selection ranges behind the text.
+            if (actualHitTestCount > 0) {
+              // Note that an ideal layout will return fractional values,
+              // so you may see slivers between the selection ranges due
+              // to the per-primitive anti-aliasing of the edges unless
+              // it is disabled (better for performance anyway).
+              auto oldAliasMode = d2dDeviceContext->GetAntialiasMode();
+              d2dDeviceContext->SetAntialiasMode(D2D1_ANTIALIAS_MODE_ALIASED);
+
+              winrt::com_ptr<ID2D1SolidColorBrush> textHighlightBrush;
+              winrt::check_hresult(d2dDeviceContext->CreateSolidColorBrush(
+                  fragment.textAttributes.backgroundColor.AsD2DColor(), textHighlightBrush.put()));
+
+              for (size_t i = 0; i < actualHitTestCount; ++i) {
+                const DWRITE_HIT_TEST_METRICS &htm = hitTestMetrics[i];
+
+                const D2D1_RECT_F rect = {
+                    std::round(htm.left + offsetX),
+                    std::round(htm.top + offsetY),
+                    std::round(htm.left + htm.width + offsetX),
+                    std::round(htm.top + htm.height + offsetY)};
+
+                d2dDeviceContext->FillRectangle(rect, textHighlightBrush.get());
+              }
+              d2dDeviceContext->SetAntialiasMode(oldAliasMode);
             }
-            d2dDeviceContext->SetAntialiasMode(oldAliasMode);
           }
         }
+
+        position += length;
       }
 
-      position += length;
+      // Draw the line of text at the specified offset, which corresponds to the top-left
+      // corner of our drawing surface. Notice we don't call BeginDraw on the D2D device
+      // context; this has already been done for us by the composition API.
+      d2dDeviceContext->DrawTextLayout(
+          D2D1::Point2F(
+              static_cast<FLOAT>((offset.x + m_layoutMetrics.contentInsets.left) / m_layoutMetrics.pointScaleFactor),
+              static_cast<FLOAT>((offset.y + m_layoutMetrics.contentInsets.top) / m_layoutMetrics.pointScaleFactor)),
+          m_textLayout.get(),
+          brush.get(),
+          D2D1_DRAW_TEXT_OPTIONS_ENABLE_COLOR_FONT);
+
+      // restore dpi to old state
+      d2dDeviceContext->SetDpi(oldDpiX, oldDpiY);
     }
-
-    // Draw the line of text at the specified offset, which corresponds to the top-left
-    // corner of our drawing surface. Notice we don't call BeginDraw on the D2D device
-    // context; this has already been done for us by the composition API.
-    d2dDeviceContext->DrawTextLayout(
-        D2D1::Point2F(
-            static_cast<FLOAT>((offset.x + m_layoutMetrics.contentInsets.left) / m_layoutMetrics.pointScaleFactor),
-            static_cast<FLOAT>((offset.y + m_layoutMetrics.contentInsets.top) / m_layoutMetrics.pointScaleFactor)),
-        m_textLayout.get(),
-        brush.get());
-
-    // restore dpi to old state
-    d2dDeviceContext->SetDpi(oldDpiX, oldDpiY);
-
-    // Our update is done. EndDraw never indicates rendering device removed, so any
-    // failure here is unexpected and, therefore, fatal.
-    winrt::check_hresult(drawingSurfaceInterop->EndDraw());
     m_requireRedraw = false;
   }
 }
 
+std::string ParagraphComponentView::DefaultControlType() const noexcept {
+  return "text";
+}
+
+std::string ParagraphComponentView::DefaultAccessibleName() const noexcept {
+  return m_attributedStringBox.getValue().getString();
+}
+
 winrt::Microsoft::ReactNative::Composition::IVisual ParagraphComponentView::Visual() const noexcept {
   return m_visual;
 }

package/Microsoft.ReactNative/Fabric/Composition/ParagraphComponentView.h

@@ -36,11 +36,14 @@ struct ParagraphComponentView : CompositionBaseComponentView {
   void finalizeUpdates(RNComponentViewUpdateMask updateMask) noexcept override;
   void prepareForRecycle() noexcept override;
   facebook::react::Props::Shared props() noexcept override;
-  facebook::react::Tag hitTest(facebook::react::Point pt, facebook::react::Point &localPt) const noexcept override;
+  facebook::react::Tag hitTest(facebook::react::Point pt, facebook::react::Point &localPt, bool ignorePointerEvents)
+      const noexcept override;
   void OnRenderingDeviceLost() noexcept override;
-  facebook::react::SharedTouchEventEmitter touchEventEmitterAtPoint(facebook::react::Point pt) noexcept override;
+  facebook::react::SharedViewEventEmitter eventEmitterAtPoint(facebook::react::Point pt) noexcept override;
 
   winrt::Microsoft::ReactNative::Composition::IVisual Visual() const noexcept override;
+  virtual std::string DefaultControlType() const noexcept override;
+  virtual std::string DefaultAccessibleName() const noexcept override;
 
  private:
   ParagraphComponentView(
@@ -53,13 +56,13 @@ struct ParagraphComponentView : CompositionBaseComponentView {
   void updateTextAlignment(const std::optional<facebook::react::TextAlignment> &fbAlignment) noexcept;
 
   std::shared_ptr<facebook::react::ParagraphProps const> m_props;
-  winrt::Microsoft::ReactNative::Composition::SpriteVisual m_visual{nullptr};
+  winrt::Microsoft::ReactNative::Composition::ISpriteVisual m_visual{nullptr};
   winrt::com_ptr<::IDWriteTextLayout> m_textLayout;
   facebook::react::AttributedStringBox m_attributedStringBox;
   facebook::react::ParagraphAttributes m_paragraphAttributes;
 
   bool m_requireRedraw{true};
-  winrt::Microsoft::ReactNative::Composition::ICompositionDrawingSurface m_drawingSurface;
+  winrt::Microsoft::ReactNative::Composition::IDrawingSurfaceBrush m_drawingSurface;
 };
 
 } // namespace Microsoft::ReactNative

package/Microsoft.ReactNative/Fabric/Composition/ReactCompositionViewComponentBuilder.cpp

@@ -51,12 +51,45 @@ void ReactCompositionViewComponentBuilder::SetMessageHandler(MessageHandler impl
   m_messageHandler = impl;
 }
 
+void ReactCompositionViewComponentBuilder::SetKeyDownHandler(KeyHandler impl) noexcept {
+  m_keyDown = impl;
+}
+
+void ReactCompositionViewComponentBuilder::SetKeyUpHandler(KeyHandler impl) noexcept {
+  m_keyUp = impl;
+}
+
+void ReactCompositionViewComponentBuilder::SetPointerEnteredHandler(PointerHandler impl) noexcept {
+  m_pointerEntered = impl;
+}
+
+void ReactCompositionViewComponentBuilder::SetPointerExitedHandler(PointerHandler impl) noexcept {
+  m_pointerExited = impl;
+}
+
+void ReactCompositionViewComponentBuilder::SetPointerReleasedHandler(PointerHandler impl) noexcept {
+  m_pointerReleased = impl;
+}
+
+void ReactCompositionViewComponentBuilder::SetPointerPressedHandler(PointerHandler impl) noexcept {
+  m_pointerPressed = impl;
+}
+
+void ReactCompositionViewComponentBuilder::SetPointerMovedHandler(PointerHandler impl) noexcept {
+  m_pointerMoved = impl;
+}
+
+void ReactCompositionViewComponentBuilder::SetPointerWheelChangedHandler(PointerHandler impl) noexcept {
+  m_pointerWheelChanged = impl;
+}
+
 winrt::Windows::Foundation::IInspectable ReactCompositionViewComponentBuilder::CreateView(
+    IReactContext reactContext,
     ICompositionContext context) noexcept {
-  return m_createView(context);
+  return m_createView(reactContext, context);
 }
 
-bool ReactCompositionViewComponentBuilder::HandeCommand(
+bool ReactCompositionViewComponentBuilder::HandleCommand(
     winrt::Windows::Foundation::IInspectable handle,
     winrt::hstring commandName,
     IJSValueReader args) noexcept {
@@ -103,4 +136,70 @@ int64_t ReactCompositionViewComponentBuilder::SendMessage(
   return m_messageHandler(handle, msg, wparam, lparam);
 }
 
+void ReactCompositionViewComponentBuilder::OnKeyDown(
+    winrt::Windows::Foundation::IInspectable handle,
+    const winrt::Microsoft::ReactNative::Composition::Input::KeyboardSource &source,
+    const winrt::Microsoft::ReactNative::Composition::Input::KeyRoutedEventArgs &args) noexcept {
+  if (m_keyDown) {
+    m_keyDown(handle, source, args);
+  }
+}
+
+void ReactCompositionViewComponentBuilder::OnKeyUp(
+    winrt::Windows::Foundation::IInspectable handle,
+    const winrt::Microsoft::ReactNative::Composition::Input::KeyboardSource &source,
+    const winrt::Microsoft::ReactNative::Composition::Input::KeyRoutedEventArgs &args) noexcept {
+  if (m_keyUp) {
+    m_keyUp(handle, source, args);
+  }
+}
+
+void ReactCompositionViewComponentBuilder::OnPointerEntered(
+    winrt::Windows::Foundation::IInspectable handle,
+    const winrt::Microsoft::ReactNative::Composition::Input::PointerRoutedEventArgs &args) noexcept {
+  if (m_pointerEntered) {
+    m_pointerEntered(handle, args);
+  }
+}
+
+void ReactCompositionViewComponentBuilder::OnPointerExited(
+    winrt::Windows::Foundation::IInspectable handle,
+    const winrt::Microsoft::ReactNative::Composition::Input::PointerRoutedEventArgs &args) noexcept {
+  if (m_pointerExited) {
+    m_pointerExited(handle, args);
+  }
+}
+
+void ReactCompositionViewComponentBuilder::OnPointerPressed(
+    winrt::Windows::Foundation::IInspectable handle,
+    const winrt::Microsoft::ReactNative::Composition::Input::PointerRoutedEventArgs &args) noexcept {
+  if (m_pointerPressed) {
+    m_pointerPressed(handle, args);
+  }
+}
+
+void ReactCompositionViewComponentBuilder::OnPointerReleased(
+    winrt::Windows::Foundation::IInspectable handle,
+    const winrt::Microsoft::ReactNative::Composition::Input::PointerRoutedEventArgs &args) noexcept {
+  if (m_pointerReleased) {
+    m_pointerReleased(handle, args);
+  }
+}
+
+void ReactCompositionViewComponentBuilder::OnPointerMoved(
+    winrt::Windows::Foundation::IInspectable handle,
+    const winrt::Microsoft::ReactNative::Composition::Input::PointerRoutedEventArgs &args) noexcept {
+  if (m_pointerMoved) {
+    m_pointerMoved(handle, args);
+  }
+}
+
+void ReactCompositionViewComponentBuilder::OnPointerWheelChanged(
+    winrt::Windows::Foundation::IInspectable handle,
+    const winrt::Microsoft::ReactNative::Composition::Input::PointerRoutedEventArgs &args) noexcept {
+  if (m_pointerWheelChanged) {
+    m_pointerWheelChanged(handle, args);
+  }
+}
+
 } // namespace winrt::Microsoft::ReactNative::Composition