react-native-windows 0.73.10 → 0.74.0-preview.1

package/Microsoft.ReactNative/Fabric/Composition/TextInput/WindowsTextInputComponentView.cpp

@@ -5,7 +5,9 @@
 
 #include "WindowsTextInputComponentView.h"
 
+#include <AutoDraw.h>
 #include <Fabric/Composition/CompositionDynamicAutomationProvider.h>
+#include <Fabric/Composition/UiaHelpers.h>
 #include <Utils/ValueUtils.h>
 #include <tom.h>
 #include <unicode.h>
@@ -13,11 +15,13 @@
 #include <winrt/Windows.UI.h>
 #include "../CompositionHelpers.h"
 #include "../RootComponentView.h"
-#include "Composition/AutoDraw.h"
+#include "JSValueReader.h"
 #include "WindowsTextInputShadowNode.h"
 #include "WindowsTextInputState.h"
 #include "guid/msoGuid.h"
 
+#include <unicode.h>
+
 // convert a BSTR to a std::string.
 std::string &BstrToStdString(const BSTR bstr, std::string &dst, int cp = CP_UTF8) {
   if (!bstr) {
@@ -50,7 +54,7 @@ MSO_CLASS_GUID(ITextHost, "13E670F4-1A5A-11cf-ABEB-00AA00B65EA1") // IID_ITextHo
 MSO_CLASS_GUID(ITextServices, "8D33F740-CF58-11CE-A89D-00AA006CADC5") // IID_ITextServices
 MSO_CLASS_GUID(ITextServices2, "8D33F741-CF58-11CE-A89D-00AA006CADC5") // IID_ITextServices2
 
-namespace Microsoft::ReactNative {
+namespace winrt::Microsoft::ReactNative::Composition::implementation {
 
 // RichEdit doesn't handle us calling Draw during the middle of a TxTranslateMessage call.
 WindowsTextInputComponentView::DrawBlock::DrawBlock(WindowsTextInputComponentView &view) : m_view(view) {
@@ -160,7 +164,7 @@ struct CompTextHost : public winrt::implements<CompTextHost, ITextHost> {
 
   //@cmember Show the caret
   BOOL TxShowCaret(BOOL fShow) override {
-    m_outer->ShowCaret(fShow);
+    m_outer->ShowCaret(m_outer->m_props->caretHidden ? false : fShow);
     return true;
   }
 
@@ -217,7 +221,10 @@ struct CompTextHost : public winrt::implements<CompTextHost, ITextHost> {
 
   //@cmember Set the focus to the text window
   void TxSetFocus() override {
-    m_outer->rootComponentView()->SetFocusedComponent(m_outer);
+    winrt::Microsoft::ReactNative::ComponentView view{nullptr};
+    winrt::check_hresult(
+        m_outer->QueryInterface(winrt::guid_of<winrt::Microsoft::ReactNative::ComponentView>(), winrt::put_abi(view)));
+    m_outer->rootComponentView()->SetFocusedComponent(view);
     // assert(false);
     // TODO focus
   }
@@ -298,13 +305,13 @@ struct CompTextHost : public winrt::implements<CompTextHost, ITextHost> {
     switch (nIndex) {
       case COLOR_WINDOWTEXT:
         if (m_outer->m_props->textAttributes.foregroundColor)
-          return m_outer->m_props->textAttributes.foregroundColor.AsColorRefNoAlpha();
+          return (*m_outer->m_props->textAttributes.foregroundColor).AsColorRefNoAlpha();
         // cr = 0x000000FF;
         break;
 
       case COLOR_WINDOW:
         if (m_outer->m_props->backgroundColor)
-          return m_outer->m_props->backgroundColor.AsColorRefNoAlpha();
+          return (*m_outer->m_props->backgroundColor).AsColorRefNoAlpha();
         break;
         // case COLOR_HIGHLIGHT:
         // cr = RGB(0, 0, 255);
@@ -478,7 +485,12 @@ WindowsTextInputComponentView::WindowsTextInputComponentView(
     const winrt::Microsoft::ReactNative::Composition::ICompositionContext &compContext,
     facebook::react::Tag tag,
     winrt::Microsoft::ReactNative::ReactContext const &reactContext)
-    : Super(compContext, tag), m_context(reactContext) {
+    : Super(
+          compContext,
+          tag,
+          reactContext,
+          ComponentViewFeatures::Default & ~ComponentViewFeatures::Background,
+          false) {
   static auto const defaultProps = std::make_shared<facebook::react::WindowsTextInputProps const>();
   m_props = defaultProps;
 
@@ -511,16 +523,17 @@ WindowsTextInputComponentView::WindowsTextInputComponentView(
   */
 }
 
-void WindowsTextInputComponentView::handleCommand(std::string const &commandName, folly::dynamic const &arg) noexcept {
-  if (commandName == "setTextAndSelection") {
-    auto eventCount = arg[0].asInt();
+void WindowsTextInputComponentView::HandleCommand(
+    winrt::hstring commandName,
+    const winrt::Microsoft::ReactNative::IJSValueReader &args) noexcept {
+  if (commandName == L"setTextAndSelection") {
+    int eventCount, begin, end;
+    winrt::hstring text;
 
+    winrt::Microsoft::ReactNative::ReadArgs(args, eventCount, text, begin, end);
     if (eventCount >= m_nativeEventCount) {
-      auto text = arg[1].asString();
-      auto begin = arg[2].asInt();
-      auto end = arg[3].asInt();
       m_comingFromJS = true;
-      UpdateText(text);
+      UpdateText(winrt::to_string(text));
 
       SELCHANGE sc;
       memset(&sc, 0, sizeof(sc));
@@ -539,32 +552,8 @@ void WindowsTextInputComponentView::handleCommand(std::string const &commandName
       m_comingFromJS = false;
     }
   } else {
-    Super::handleCommand(commandName, arg);
-  }
-}
-
-int64_t WindowsTextInputComponentView::sendMessage(uint32_t msg, uint64_t wParam, int64_t lParam) noexcept {
-  // Do not forward tab keys into the TextInput, since we want that to do the tab loop instead.  This aligns with WinUI
-  // behavior We do forward Ctrl+Tab to the textinput.
-  if ((msg == WM_CHAR && wParam == '\t')) {
-    BYTE bKeys[256];
-    if (GetKeyboardState(bKeys)) {
-      bool fCtrl = false;
-      if (!(bKeys[VK_LCONTROL] & 0x80 || bKeys[VK_RCONTROL] & 0x80)) {
-        return 0;
-      }
-    }
+    Super::HandleCommand(commandName, args);
   }
-
-  if (m_textServices) {
-    LRESULT lresult;
-    DrawBlock db(*this);
-    auto hr = m_textServices->TxSendMessage(msg, static_cast<WPARAM>(wParam), static_cast<LPARAM>(lParam), &lresult);
-    if (hr >= 0 && lresult) {
-      return lresult;
-    }
-  }
-  return Super::sendMessage(msg, wParam, lParam);
 }
 
 WPARAM PointerPointToPointerWParam(const winrt::Microsoft::ReactNative::Composition::Input::PointerPoint &pp) noexcept {
@@ -638,7 +627,7 @@ WPARAM PointerRoutedEventArgsToMouseWParam(
   return wParam;
 }
 
-void WindowsTextInputComponentView::onPointerPressed(
+void WindowsTextInputComponentView::OnPointerPressed(
     const winrt::Microsoft::ReactNative::Composition::Input::PointerRoutedEventArgs &args) noexcept {
   UINT msg = 0;
   LPARAM lParam = 0;
@@ -683,7 +672,7 @@ void WindowsTextInputComponentView::onPointerPressed(
   }
 }
 
-void WindowsTextInputComponentView::onPointerReleased(
+void WindowsTextInputComponentView::OnPointerReleased(
     const winrt::Microsoft::ReactNative::Composition::Input::PointerRoutedEventArgs &args) noexcept {
   UINT msg = 0;
   LPARAM lParam = 0;
@@ -728,7 +717,7 @@ void WindowsTextInputComponentView::onPointerReleased(
   }
 }
 
-void WindowsTextInputComponentView::onPointerMoved(
+void WindowsTextInputComponentView::OnPointerMoved(
     const winrt::Microsoft::ReactNative::Composition::Input::PointerRoutedEventArgs &args) noexcept {
   UINT msg = 0;
   LPARAM lParam = 0;
@@ -755,7 +744,7 @@ void WindowsTextInputComponentView::onPointerMoved(
   }
 }
 
-void WindowsTextInputComponentView::onKeyDown(
+void WindowsTextInputComponentView::OnKeyDown(
     const winrt::Microsoft::ReactNative::Composition::Input::KeyboardSource &source,
     const winrt::Microsoft::ReactNative::Composition::Input::KeyRoutedEventArgs &args) noexcept {
   // Do not forward tab keys into the TextInput, since we want that to do the tab loop instead.  This aligns with WinUI
@@ -782,10 +771,10 @@ void WindowsTextInputComponentView::onKeyDown(
     }
   }
 
-  Super::onKeyDown(source, args);
+  Super::OnKeyDown(source, args);
 }
 
-void WindowsTextInputComponentView::onKeyUp(
+void WindowsTextInputComponentView::OnKeyUp(
     const winrt::Microsoft::ReactNative::Composition::Input::KeyboardSource &source,
     const winrt::Microsoft::ReactNative::Composition::Input::KeyRoutedEventArgs &args) noexcept {
   // Do not forward tab keys into the TextInput, since we want that to do the tab loop instead.  This aligns with WinUI
@@ -813,32 +802,146 @@ void WindowsTextInputComponentView::onKeyUp(
     }
   }
 
-  Super::onKeyDown(source, args);
+  Super::OnKeyDown(source, args);
 }
 
-void WindowsTextInputComponentView::mountChildComponentView(
-    IComponentView &childComponentView,
+bool WindowsTextInputComponentView::ShouldSubmit(
+    const winrt::Microsoft::ReactNative::Composition::Input::KeyboardSource &source,
+    const winrt::Microsoft::ReactNative::Composition::Input::CharacterReceivedRoutedEventArgs &args) noexcept {
+  bool shouldSubmit = true;
+
+  if (shouldSubmit) {
+    if (!m_multiline && m_submitKeyEvents.size() == 0) {
+      // If no 'submitKeyEvents' are supplied, use the default behavior for single-line TextInput
+      shouldSubmit = args.KeyCode() == '\r';
+    } else if (m_submitKeyEvents.size() > 0) {
+      auto submitKeyEvent = m_submitKeyEvents.at(0);
+      // If 'submitKeyEvents' are supplied, use them to determine whether to emit onSubmitEditing' for either
+      // single-line or multi-line TextInput
+      if (args.KeyCode() == '\r') {
+        bool shiftDown = source.GetKeyState(winrt::Windows::System::VirtualKey::Shift) ==
+            winrt::Windows::UI::Core::CoreVirtualKeyStates::Down;
+        bool ctrlDown = source.GetKeyState(winrt::Windows::System::VirtualKey::Control) ==
+            winrt::Windows::UI::Core::CoreVirtualKeyStates::Down;
+        bool altDown = source.GetKeyState(winrt::Windows::System::VirtualKey::Control) ==
+            winrt::Windows::UI::Core::CoreVirtualKeyStates::Down;
+        bool metaDown = source.GetKeyState(winrt::Windows::System::VirtualKey::LeftWindows) ==
+                winrt::Windows::UI::Core::CoreVirtualKeyStates::Down ||
+            source.GetKeyState(winrt::Windows::System::VirtualKey::RightWindows) ==
+                winrt::Windows::UI::Core::CoreVirtualKeyStates::Down;
+        return (submitKeyEvent.shiftKey && shiftDown) || (submitKeyEvent.ctrlKey && ctrlDown) ||
+            (submitKeyEvent.altKey && altDown) || (submitKeyEvent.metaKey && metaDown) ||
+            (!submitKeyEvent.shiftKey && !submitKeyEvent.altKey && !submitKeyEvent.metaKey && !submitKeyEvent.altKey &&
+             !shiftDown && !ctrlDown && !altDown && !metaDown);
+      } else {
+        shouldSubmit = false;
+      }
+    } else {
+      shouldSubmit = false;
+    }
+  }
+  return shouldSubmit;
+}
+
+void WindowsTextInputComponentView::OnCharacterReceived(
+    const winrt::Microsoft::ReactNative::Composition::Input::KeyboardSource &source,
+    const winrt::Microsoft::ReactNative::Composition::Input::CharacterReceivedRoutedEventArgs &args) noexcept {
+  // Do not forward tab keys into the TextInput, since we want that to do the tab loop instead.  This aligns with WinUI
+  // behavior We do forward Ctrl+Tab to the textinput.
+  if ((args.KeyCode() == '\t') &&
+      (source.GetKeyState(winrt::Windows::System::VirtualKey::Control) !=
+       winrt::Windows::UI::Core::CoreVirtualKeyStates::Down)) {
+    return;
+  }
+
+  // Logic for submit events
+  if (ShouldSubmit(source, args)) {
+    // call onSubmitEditing event
+    if (m_eventEmitter && !m_comingFromJS) {
+      auto emitter = std::static_pointer_cast<const facebook::react::WindowsTextInputEventEmitter>(m_eventEmitter);
+      facebook::react::WindowsTextInputEventEmitter::OnSubmitEditing onSubmitEditingArgs;
+      onSubmitEditingArgs.text = GetTextFromRichEdit();
+      onSubmitEditingArgs.eventCount = ++m_nativeEventCount;
+      emitter->onSubmitEditing(onSubmitEditingArgs);
+    }
+
+    if (m_clearTextOnSubmit) {
+      // clear text from RichEdit
+      m_textServices->TxSetText(L"");
+    }
+    return;
+  }
+
+  // convert keyCode to std::string
+  wchar_t key[2] = L" ";
+  key[0] = static_cast<wchar_t>(args.KeyCode());
+  std::string keyString = ::Microsoft::Common::Unicode::Utf16ToUtf8(key, 1);
+  // Call onKeyPress event
+  auto emitter = std::static_pointer_cast<const facebook::react::WindowsTextInputEventEmitter>(m_eventEmitter);
+  facebook::react::WindowsTextInputEventEmitter::OnKeyPress onKeyPressArgs;
+  if (keyString.compare("\r") == 0) {
+    onKeyPressArgs.key = "Enter";
+  } else if (keyString.compare("\b") == 0) {
+    onKeyPressArgs.key = "Backspace";
+  } else {
+    onKeyPressArgs.key = keyString;
+  }
+  emitter->onKeyPress(onKeyPressArgs);
+
+  WPARAM wParam = static_cast<WPARAM>(args.KeyCode());
+  LPARAM lParam = 0;
+  lParam = args.KeyStatus().RepeatCount; // bits 0-15
+  lParam |= args.KeyStatus().ScanCode << 16; // bits 16-23
+  if (args.KeyStatus().IsExtendedKey)
+    lParam |= 0x01000000; // bit 24
+  // bit 25-28 reserved.
+  if (args.KeyStatus().IsMenuKeyDown)
+    lParam |= 0x20000000; // bit 29
+  // if sysKey - bit 29 = 1, otherwise 0
+  if (args.KeyStatus().WasKeyDown)
+    lParam |= 0x40000000; // bit 30
+  if (args.KeyStatus().IsKeyReleased)
+    lParam |= 0x80000000; // bit 31
+
+  LRESULT lresult;
+  DrawBlock db(*this);
+  auto hr = m_textServices->TxSendMessage(WM_CHAR, wParam, lParam, &lresult);
+  if (hr >= 0 && lresult) {
+    args.Handled(true);
+  }
+}
+
+void WindowsTextInputComponentView::MountChildComponentView(
+    const winrt::Microsoft::ReactNative::ComponentView &childComponentView,
     uint32_t index) noexcept {
   assert(false);
-  // m_element.Children().InsertAt(index, v.Element());
+  base_type::MountChildComponentView(childComponentView, index);
 }
 
-void WindowsTextInputComponentView::unmountChildComponentView(
-    IComponentView &childComponentView,
+void WindowsTextInputComponentView::UnmountChildComponentView(
+    const winrt::Microsoft::ReactNative::ComponentView &childComponentView,
     uint32_t index) noexcept {
   assert(false);
-  // m_element.Children().RemoveAt(index);
+  base_type::UnmountChildComponentView(childComponentView, index);
 }
 
 void WindowsTextInputComponentView::onFocusLost() noexcept {
   Super::onFocusLost();
-  sendMessage(WM_KILLFOCUS, 0, 0);
+  if (m_textServices) {
+    LRESULT lresult;
+    DrawBlock db(*this);
+    m_textServices->TxSendMessage(WM_KILLFOCUS, 0, 0, &lresult);
+  }
   m_caretVisual.IsVisible(false);
 }
 
 void WindowsTextInputComponentView::onFocusGained() noexcept {
   Super::onFocusGained();
-  sendMessage(WM_SETFOCUS, 0, 0);
+  if (m_textServices) {
+    LRESULT lresult;
+    DrawBlock db(*this);
+    m_textServices->TxSendMessage(WM_SETFOCUS, 0, 0, &lresult);
+  }
 }
 
 bool WindowsTextInputComponentView::focusable() const noexcept {
@@ -857,6 +960,18 @@ std::string WindowsTextInputComponentView::DefaultHelpText() const noexcept {
   return m_props->placeholder;
 }
 
+void WindowsTextInputComponentView::updateCursorColor(
+    const facebook::react::SharedColor &cursorColor,
+    const facebook::react::SharedColor &foregroundColor) noexcept {
+  if (cursorColor) {
+    m_caretVisual.Brush(theme()->Brush(*cursorColor));
+  } else if (foregroundColor) {
+    m_caretVisual.Brush(theme()->Brush(*foregroundColor));
+  } else {
+    m_caretVisual.Brush(theme()->PlatformBrush("TextControlForeground"));
+  }
+}
+
 void WindowsTextInputComponentView::updateProps(
     facebook::react::Props::Shared const &props,
     facebook::react::Props::Shared const &oldProps) noexcept {
@@ -868,10 +983,12 @@ void WindowsTextInputComponentView::updateProps(
 
   ensureVisual();
 
+  if (oldTextInputProps.testId != newTextInputProps.testId) {
+    m_visual.Comment(winrt::to_hstring(newTextInputProps.testId));
+  }
   // update BaseComponentView props
-  updateShadowProps(oldTextInputProps, newTextInputProps, m_visual);
   updateTransformProps(oldTextInputProps, newTextInputProps, m_visual);
-  updateBorderProps(oldTextInputProps, newTextInputProps);
+  Super::updateProps(props, oldProps);
 
   if (!facebook::react::floatEquality(
           oldTextInputProps.textAttributes.fontSize, newTextInputProps.textAttributes.fontSize) ||
@@ -888,6 +1005,7 @@ void WindowsTextInputComponentView::updateProps(
   }
 
   if (oldTextInputProps.multiline != newTextInputProps.multiline) {
+    m_multiline = newTextInputProps.multiline;
     propBitsMask |= TXTBIT_MULTILINE | TXTBIT_WORDWRAP;
     if (newTextInputProps.multiline) {
       propBits |= TXTBIT_MULTILINE | TXTBIT_WORDWRAP;
@@ -911,7 +1029,17 @@ void WindowsTextInputComponentView::updateProps(
   }
 
   if (oldTextInputProps.cursorColor != newTextInputProps.cursorColor) {
-    m_caretVisual.Color(newTextInputProps.cursorColor.AsWindowsColor());
+    updateCursorColor(newTextInputProps.cursorColor, newTextInputProps.textAttributes.foregroundColor);
+  }
+
+  if (oldTextInputProps.clearTextOnSubmit != newTextInputProps.clearTextOnSubmit) {
+    m_clearTextOnSubmit = newTextInputProps.clearTextOnSubmit;
+  }
+
+  if ((!newTextInputProps.submitKeyEvents.empty())) {
+    m_submitKeyEvents = newTextInputProps.submitKeyEvents;
+  } else {
+    m_submitKeyEvents.clear();
   }
 
   /*
@@ -1051,9 +1179,7 @@ void WindowsTextInputComponentView::updateLayoutMetrics(
         &res));
   }
 
-  updateBorderLayoutMetrics(layoutMetrics, *m_props);
-
-  m_layoutMetrics = layoutMetrics;
+  Super::updateLayoutMetrics(layoutMetrics, oldLayoutMetrics);
 
   // TODO should ceil?
   unsigned int newWidth = static_cast<unsigned int>(layoutMetrics.frame.size.width * layoutMetrics.pointScaleFactor);
@@ -1066,7 +1192,6 @@ void WindowsTextInputComponentView::updateLayoutMetrics(
   m_imgWidth = newWidth;
   m_imgHeight = newHeight;
 
-  UpdateCenterPropertySet();
   m_visual.Size(
       {layoutMetrics.frame.size.width * layoutMetrics.pointScaleFactor,
        layoutMetrics.frame.size.height * layoutMetrics.pointScaleFactor});
@@ -1084,12 +1209,19 @@ void WindowsTextInputComponentView::OnTextUpdated() noexcept {
   m_state->updateState(std::move(data));
 
   if (m_eventEmitter && !m_comingFromJS) {
+    // call onChange event
     auto emitter = std::static_pointer_cast<const facebook::react::WindowsTextInputEventEmitter>(m_eventEmitter);
     facebook::react::WindowsTextInputEventEmitter::OnChange onChangeArgs;
     onChangeArgs.text = GetTextFromRichEdit();
     onChangeArgs.eventCount = ++m_nativeEventCount;
     emitter->onChange(onChangeArgs);
   }
+
+  if (m_uiaProvider) {
+    auto text = GetTextFromRichEdit();
+    winrt::Microsoft::ReactNative::implementation::UpdateUiaProperty(
+        m_uiaProvider, UIA_ValueValuePropertyId, text, text);
+  }
 }
 
 void WindowsTextInputComponentView::OnSelectionChanged(LONG start, LONG end) noexcept {
@@ -1121,19 +1253,30 @@ std::string WindowsTextInputComponentView::GetTextFromRichEdit() const noexcept
   return str;
 }
 
-void WindowsTextInputComponentView::finalizeUpdates(RNComponentViewUpdateMask updateMask) noexcept {
-  if (m_needsBorderUpdate) {
-    m_needsBorderUpdate = false;
-    UpdateSpecialBorderLayers(m_layoutMetrics, *m_props);
-  }
+void WindowsTextInputComponentView::FinalizeUpdates(
+    winrt::Microsoft::ReactNative::ComponentViewUpdateMask updateMask) noexcept {
+  Super::FinalizeUpdates(updateMask);
   ensureDrawingSurface();
   if (m_needsRedraw) {
     DrawText();
   }
 }
 
+std::optional<std::string> WindowsTextInputComponentView::getAcccessiblityValue() noexcept {
+  return GetTextFromRichEdit();
+}
+
+void WindowsTextInputComponentView::setAcccessiblityValue(std::string &&value) noexcept {
+  UpdateText(value);
+}
+
+bool WindowsTextInputComponentView::getAcccessiblityIsReadOnly() noexcept {
+  return !m_props->editable;
+}
+
 void WindowsTextInputComponentView::prepareForRecycle() noexcept {}
-facebook::react::Props::Shared WindowsTextInputComponentView::props() noexcept {
+
+facebook::react::SharedViewProps WindowsTextInputComponentView::viewProps() noexcept {
   return m_props;
 }
 
@@ -1218,7 +1361,7 @@ void WindowsTextInputComponentView::OnRenderingDeviceLost() noexcept {
 }
 
 void WindowsTextInputComponentView::ensureDrawingSurface() noexcept {
-  assert(m_context.UIDispatcher().HasThreadAccess());
+  assert(m_reactContext.UIDispatcher().HasThreadAccess());
 
   if (!m_drawingSurface) {
     m_drawingSurface = m_compContext.CreateDrawingSurfaceBrush(
@@ -1272,7 +1415,7 @@ winrt::com_ptr<::IDWriteTextLayout> WindowsTextInputComponentView::CreatePlaceho
 
 void WindowsTextInputComponentView::DrawText() noexcept {
   m_needsRedraw = true;
-  if (m_cDrawBlock) {
+  if (m_cDrawBlock || theme()->IsEmpty()) {
     return;
   }
 
@@ -1283,7 +1426,7 @@ void WindowsTextInputComponentView::DrawText() noexcept {
 
   POINT offset;
 
-  assert(m_context.UIDispatcher().HasThreadAccess());
+  assert(m_reactContext.UIDispatcher().HasThreadAccess());
 
   m_drawing = true;
   {
@@ -1311,7 +1454,7 @@ void WindowsTextInputComponentView::DrawText() noexcept {
       winrt::check_hresult(m_textServices->OnTxInPlaceActivate(&rcClient));
 
       if (facebook::react::isColorMeaningful(m_props->backgroundColor)) {
-        auto backgroundColor = m_props->backgroundColor.AsD2DColor();
+        auto backgroundColor = theme()->D2DColor(*m_props->backgroundColor);
         winrt::com_ptr<ID2D1SolidColorBrush> backgroundBrush;
         winrt::check_hresult(d2dDeviceContext->CreateSolidColorBrush(backgroundColor, backgroundBrush.put()));
         const D2D1_RECT_F fillRect = {
@@ -1331,7 +1474,7 @@ void WindowsTextInputComponentView::DrawText() noexcept {
         // set brush color
         winrt::com_ptr<ID2D1SolidColorBrush> brush;
         if (m_props->placeholderTextColor) {
-          auto color = m_props->placeholderTextColor.AsD2DColor();
+          auto color = theme()->D2DColor(*m_props->placeholderTextColor);
           winrt::check_hresult(d2dDeviceContext->CreateSolidColorBrush(color, brush.put()));
         } else {
           winrt::check_hresult(
@@ -1371,7 +1514,7 @@ facebook::react::Tag WindowsTextInputComponentView::hitTest(
     if ((m_props.pointerEvents == facebook::react::PointerEventsMode::Auto ||
         m_props.pointerEvents == facebook::react::PointerEventsMode::BoxNone) && std::any_of(m_children.rbegin(),
     m_children.rend(), [&targetTag, &ptLocal, &localPt](auto child) { targetTag = static_cast<const
-    CompositionBaseComponentView
+    ComponentView
     *>(child)->hitTest(ptLocal, localPt); return targetTag != -1;
         }))
       return targetTag;
@@ -1382,7 +1525,7 @@ facebook::react::Tag WindowsTextInputComponentView::hitTest(
       ptLocal.x >= 0 && ptLocal.x <= m_layoutMetrics.frame.size.width && ptLocal.y >= 0 &&
       ptLocal.y <= m_layoutMetrics.frame.size.height) {
     localPt = ptLocal;
-    return tag();
+    return Tag();
   }
 
   return -1;
@@ -1393,7 +1536,7 @@ void WindowsTextInputComponentView::ensureVisual() noexcept {
     HrEnsureRichEd20Loaded();
     m_visual = m_compContext.CreateSpriteVisual();
     m_textHost = winrt::make<CompTextHost>(this);
-    winrt::com_ptr<IUnknown> spUnk;
+    winrt::com_ptr<::IUnknown> spUnk;
     winrt::check_hresult(g_pfnCreateTextServices(nullptr, m_textHost.get(), spUnk.put()));
     spUnk.as(m_textServices);
     OuterVisual().InsertAt(m_visual, 0);
@@ -1406,16 +1549,22 @@ void WindowsTextInputComponentView::ensureVisual() noexcept {
   }
 }
 
+void WindowsTextInputComponentView::onThemeChanged() noexcept {
+  auto props = std::static_pointer_cast<const facebook::react::WindowsTextInputProps>(m_props);
+  updateCursorColor(props->cursorColor, props->textAttributes.foregroundColor);
+  DrawText();
+  base_type::onThemeChanged();
+}
+
 winrt::Microsoft::ReactNative::Composition::IVisual WindowsTextInputComponentView::Visual() const noexcept {
   return m_visual;
 }
 
-std::shared_ptr<WindowsTextInputComponentView> WindowsTextInputComponentView::Create(
+winrt::Microsoft::ReactNative::ComponentView WindowsTextInputComponentView::Create(
     const winrt::Microsoft::ReactNative::Composition::ICompositionContext &compContext,
     facebook::react::Tag tag,
     winrt::Microsoft::ReactNative::ReactContext const &reactContext) noexcept {
-  return std::shared_ptr<WindowsTextInputComponentView>(
-      new WindowsTextInputComponentView(compContext, tag, reactContext));
+  return winrt::make<WindowsTextInputComponentView>(compContext, tag, reactContext);
 }
 
-} // namespace Microsoft::ReactNative
+} // namespace winrt::Microsoft::ReactNative::Composition::implementation