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

package/Microsoft.ReactNative/Views/FrameworkElementViewManager.cpp

@@ -130,6 +130,7 @@ void FrameworkElementViewManager::GetNativeProps(const winrt::Microsoft::ReactNa
   GetAccessibilityStateProps(writer);
   winrt::Microsoft::ReactNative::WriteProperty(writer, L"accessibilityHint", L"string");
   winrt::Microsoft::ReactNative::WriteProperty(writer, L"accessibilityLabel", L"string");
+  winrt::Microsoft::ReactNative::WriteProperty(writer, L"accessibilityLevel", L"number");
   winrt::Microsoft::ReactNative::WriteProperty(writer, L"accessibilityPosInSet", L"number");
   winrt::Microsoft::ReactNative::WriteProperty(writer, L"accessibilitySetSize", L"number");
   winrt::Microsoft::ReactNative::WriteProperty(writer, L"testID", L"string");
@@ -287,6 +288,15 @@ bool FrameworkElementViewManager::UpdateProperty(
       } else if (propertyValue.IsNull()) {
         element.ClearValue(xaml::Automation::AutomationProperties::AccessibilityViewProperty());
       }
+    } else if (propertyName == "accessibilityLevel") {
+      if (propertyValue.Type() == winrt::Microsoft::ReactNative::JSValueType::Double ||
+          propertyValue.Type() == winrt::Microsoft::ReactNative::JSValueType::Int64) {
+        auto value = static_cast<int>(propertyValue.AsDouble());
+        auto boxedValue = winrt::Windows::Foundation::PropertyValue::CreateInt32(value);
+        element.SetValue(xaml::Automation::AutomationProperties::LevelProperty(), boxedValue);
+      } else if (propertyValue.IsNull()) {
+        element.ClearValue(xaml::Automation::AutomationProperties::LevelProperty());
+      }
     } else if (propertyName == "accessibilityLiveRegion") {
       if (propertyValue.Type() == winrt::Microsoft::ReactNative::JSValueType::String) {
         auto value = propertyValue.AsString();
@@ -424,107 +434,138 @@ bool FrameworkElementViewManager::UpdateProperty(
         element.ClearValue(DynamicAutomationProperties::AccessibilityRoleProperty());
       }
     } else if (propertyName == "accessibilityState") {
-      bool states[static_cast<int32_t>(winrt::Microsoft::ReactNative::AccessibilityStates::CountStates)] = {};
-
       if (propertyValue.Type() == winrt::Microsoft::ReactNative::JSValueType::Object) {
         for (const auto &pair : propertyValue.AsObject()) {
+          // States are provided with the name and either a valid value if the state is supported or null if the state
+          // isn't
           const std::string &innerName = pair.first;
           const auto &innerValue = pair.second;
 
-          auto peer = xaml::Automation::Peers::FrameworkElementAutomationPeer::FromElement(element);
+          xaml::DependencyProperty targetDP = nullptr;
+          xaml::Automation::AutomationProperty targetAP = nullptr;
 
+          bool valueChanged = false;
+
+          winrt::IInspectable oldDPValue = xaml::DependencyProperty::UnsetValue();
+          winrt::IInspectable newDPValue = xaml::DependencyProperty::UnsetValue();
+
+          winrt::IInspectable oldAPValue = nullptr;
+          winrt::IInspectable newAPValue = nullptr;
+
+          // Determine which attached dependency property to update and which automation property to raise a changed
+          // event
           if (innerName == "selected") {
-            states[static_cast<int32_t>(winrt::Microsoft::ReactNative::AccessibilityStates::Selected)] =
-                innerValue.AsBoolean();
-            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()));
-            }
+            targetDP = DynamicAutomationProperties::AccessibilityStateSelectedProperty();
+            targetAP = winrt::SelectionItemPatternIdentifiers::IsSelectedProperty();
           } else if (innerName == "disabled") {
-            states[static_cast<int32_t>(winrt::Microsoft::ReactNative::AccessibilityStates::Disabled)] =
-                innerValue.AsBoolean();
-            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()));
-            }
+            targetDP = DynamicAutomationProperties::AccessibilityStateDisabledProperty();
+            targetAP = winrt::AutomationElementIdentifiers::IsEnabledProperty();
           } 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)] =
-                innerValue.Type() == winrt::Microsoft::ReactNative::JSValueType::Boolean && !innerValue.AsBoolean();
-            // 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));
-                }
+            targetDP = DynamicAutomationProperties::AccessibilityStateCheckedProperty();
+            targetAP = winrt::TogglePatternIdentifiers::ToggleStateProperty();
+          } else if (innerName == "busy") {
+            targetDP = DynamicAutomationProperties::AccessibilityStateBusyProperty();
+            targetAP = winrt::AutomationElementIdentifiers::ItemStatusProperty();
+          } else if (innerName == "expanded") {
+            targetDP = DynamicAutomationProperties::AccessibilityStateExpandedProperty();
+            targetAP = winrt::ExpandCollapsePatternIdentifiers::ExpandCollapseStateProperty();
+          }
+
+          if (targetDP != nullptr) {
+            // Determine values for DP and AP
+
+            oldDPValue = element.ReadLocalValue(targetDP);
+
+            const bool hasOldValue = oldDPValue != xaml::DependencyProperty::UnsetValue();
+
+            if (innerName == "checked") {
+              // Checked is special and can support null, boolean true, boolean false, or the string "mixed"
+
+              auto oldValue = hasOldValue
+                  ? winrt::unbox_value<winrt::Microsoft::ReactNative::AccessibilityStateCheckedValue>(oldDPValue)
+                  : winrt::Microsoft::ReactNative::AccessibilityStateCheckedValue::Unchecked;
+
+              winrt::Microsoft::ReactNative::AccessibilityStateCheckedValue newValue =
+                  winrt::Microsoft::ReactNative::AccessibilityStateCheckedValue::Unchecked;
+
+              const auto pRawBooleanNewValue = innerValue.TryGetBoolean();
+              const auto pRawStringNewValue = innerValue.TryGetString();
+
+              if (pRawBooleanNewValue != nullptr) {
+                // State value is a valid boolean
+                newValue = *pRawBooleanNewValue
+                    ? winrt::Microsoft::ReactNative::AccessibilityStateCheckedValue::Checked
+                    : winrt::Microsoft::ReactNative::AccessibilityStateCheckedValue::Unchecked;
+                newDPValue = winrt::box_value<winrt::Microsoft::ReactNative::AccessibilityStateCheckedValue>(newValue);
+                valueChanged = !hasOldValue || (oldValue != newValue); // Value was unset before or set but different
+              } else if (pRawStringNewValue != nullptr && *pRawStringNewValue == "mixed") {
+                // State value is the valid string "mixed"
+                newValue = winrt::Microsoft::ReactNative::AccessibilityStateCheckedValue::Mixed;
+                newDPValue = winrt::box_value<winrt::Microsoft::ReactNative::AccessibilityStateCheckedValue>(newValue);
+                valueChanged = !hasOldValue || (oldValue != newValue); // Value was unset before or set but different
+              } else {
+                // State value is null or not valid
+                valueChanged = hasOldValue; // Value was set before
+              }
+
+              oldAPValue =
+                  winrt::box_value(hasOldValue ? static_cast<winrt::ToggleState>(oldValue) : winrt::ToggleState::Off);
+              newAPValue = winrt::box_value(static_cast<winrt::ToggleState>(newValue));
+            } else {
+              // All other accessibility state values support null, boolean true or boolean false
+
+              auto oldValue = hasOldValue ? winrt::unbox_value<bool>(oldDPValue) : false;
+
+              const bool *pNewValue = innerValue.TryGetBoolean();
+
+              if (pNewValue != nullptr) {
+                // State value is a valid boolean
+                newDPValue = winrt::box_value<bool>(*pNewValue);
+                valueChanged = !hasOldValue || (oldValue != *pNewValue); // Value was unset before or set but different
+              } else {
+                // State value is null or not valid
+                valueChanged = hasOldValue; // Value was set before
+              }
+
+              if (innerName == "disabled") {
+                // Disabled maps to enabled, flip boolean
+                oldAPValue = winrt::box_value(!(hasOldValue ? oldValue : false));
+                newAPValue = winrt::box_value(!(pNewValue != nullptr ? *pNewValue : false));
+              } else if (innerName == "busy") {
+                oldAPValue = winrt::box_value(hasOldValue && oldValue ? L"Busy" : L"");
+                newAPValue = winrt::box_value(pNewValue != nullptr && *pNewValue ? L"Busy" : L"");
+              } else if (innerName == "expanded") {
+                oldAPValue = winrt::box_value(
+                    hasOldValue && oldValue ? winrt::ExpandCollapseState::Expanded
+                                            : winrt::ExpandCollapseState::Collapsed);
+                newAPValue = winrt::box_value(
+                    pNewValue != nullptr && *pNewValue ? winrt::ExpandCollapseState::Expanded
+                                                       : winrt::ExpandCollapseState::Collapsed);
+              } else {
+                // Direct mapping of boolean
+                oldAPValue = winrt::box_value(hasOldValue ? oldValue : false);
+                newAPValue = winrt::box_value(pNewValue != nullptr ? *pNewValue : false);
               }
             }
-          } else if (innerName == "busy")
-            states[static_cast<int32_t>(winrt::Microsoft::ReactNative::AccessibilityStates::Busy)] =
-                !innerValue.IsNull() && innerValue.AsBoolean();
-          else if (innerName == "expanded") {
-            states[static_cast<int32_t>(winrt::Microsoft::ReactNative::AccessibilityStates::Expanded)] =
-                !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));
+
+            // Update attached dependency property for element
+            if (newDPValue != xaml::DependencyProperty::UnsetValue()) {
+              // State value was valid, so set
+              element.SetValue(targetDP, newDPValue);
+            } else {
+              // State value is null or not valid, so clear
+              element.ClearValue(targetDP);
+            }
+
+            // Raise automation property changed event if the value changed
+            if (valueChanged && targetAP != nullptr && oldAPValue != nullptr && newAPValue != nullptr) {
+              if (auto peer = xaml::Automation::Peers::FrameworkElementAutomationPeer::FromElement(element)) {
+                peer.RaisePropertyChangedEvent(targetAP, oldAPValue, newAPValue);
+              }
             }
           }
         }
       }
-
-      DynamicAutomationProperties::SetAccessibilityStateSelected(
-          element, states[static_cast<int32_t>(winrt::Microsoft::ReactNative::AccessibilityStates::Selected)]);
-      DynamicAutomationProperties::SetAccessibilityStateDisabled(
-          element, states[static_cast<int32_t>(winrt::Microsoft::ReactNative::AccessibilityStates::Disabled)]);
-      DynamicAutomationProperties::SetAccessibilityStateChecked(
-          element, states[static_cast<int32_t>(winrt::Microsoft::ReactNative::AccessibilityStates::Checked)]);
-      DynamicAutomationProperties::SetAccessibilityStateUnchecked(
-          element, states[static_cast<int32_t>(winrt::Microsoft::ReactNative::AccessibilityStates::Unchecked)]);
-      DynamicAutomationProperties::SetAccessibilityStateBusy(
-          element, states[static_cast<int32_t>(winrt::Microsoft::ReactNative::AccessibilityStates::Busy)]);
-      DynamicAutomationProperties::SetAccessibilityStateExpanded(
-          element, states[static_cast<int32_t>(winrt::Microsoft::ReactNative::AccessibilityStates::Expanded)]);
-      DynamicAutomationProperties::SetAccessibilityStateCollapsed(
-          element, states[static_cast<int32_t>(winrt::Microsoft::ReactNative::AccessibilityStates::Collapsed)]);
     } else if (propertyName == "accessibilityValue") {
       winrt::hstring textValue;
       const int numericValuesCount = 3;

package/Microsoft.ReactNative/Views/ICompositionRootView.h

@@ -13,7 +13,7 @@ namespace Microsoft::ReactNative {
 
 struct ICompositionRootView : public facebook::react::IReactRootView {
   virtual winrt::Microsoft::ReactNative::Composition::IVisual GetVisual() const noexcept = 0;
-  virtual double ScaleFactor() noexcept = 0;
+  virtual float ScaleFactor() noexcept = 0;
 };
 
 } // namespace Microsoft::ReactNative

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

@@ -24,7 +24,7 @@ using namespace xaml::Controls;
 using namespace xaml::Automation::Peers;
 } // namespace winrt
 
-// Such code is better to move to a seperate parser layer
+// Such code is better to move to a separate parser layer
 template <>
 struct json_type_traits<Microsoft::ReactNative::ReactImageSource> {
   static Microsoft::ReactNative::ReactImageSource parseJson(const winrt::Microsoft::ReactNative::JSValue &json) {

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

@@ -95,7 +95,7 @@ class EffectBase : public winrt::implements<EffectBase, abi::IGraphicsEffectD2D1
     return winrt::PropertyValue::CreateSingleArray(reinterpret_cast<std::array<float, ComponentCount> &>(values));
   }
 
-  // Helpers to implement GetNamedPropertyMapping more succintly
+  // Helpers to implement GetNamedPropertyMapping more succinctly
   struct NamedProperty {
     const wchar_t *Name; // Compile-time constant
     UINT Index; // Property index
@@ -128,7 +128,7 @@ class EffectBase : public winrt::implements<EffectBase, abi::IGraphicsEffectD2D1
 };
 
 //-----------------------------------------------------------------------------------------------------------------
-// Helper macros to make implementation more succint
+// Helper macros to make implementation more succinct
 //-----------------------------------------------------------------------------------------------------------------
 
 #pragma push_macro("DECLARE_D2D_GUID")

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

@@ -34,7 +34,7 @@ namespace Microsoft::ReactNative {
 
 /*static*/ winrt::com_ptr<ReactImage> ReactImage::Create() {
   auto reactImage = winrt::make_self<ReactImage>();
-  // Grid inheirts the layout direction from parent and mirrors the background image in RTL mode.
+  // Grid inherits the layout direction from parent and mirrors the background image in RTL mode.
   // Forcing the container to LTR mode to avoid the unexpected mirroring behavior.
   reactImage->FlowDirection(xaml::FlowDirection::LeftToRight);
   return reactImage;

package/Microsoft.ReactNative/Views/SIPEventHandler.cpp

@@ -19,7 +19,7 @@ using namespace xaml::Media;
 namespace Microsoft::ReactNative {
 
 SIPEventHandler::SIPEventHandler(const Mso::React::IReactContext &context)
-    : m_context(&context), m_fireKeyboradEvents(false), m_finalRect(winrt::RectHelper::Empty()){};
+    : m_context(&context), m_fireKeyboardEvents(false), m_finalRect(winrt::RectHelper::Empty()){};
 
 SIPEventHandler::~SIPEventHandler() {
   m_occlusionsChanged_revoker = {};
@@ -29,7 +29,7 @@ SIPEventHandler::~SIPEventHandler() {
 // TryShow and TryHide works on >= RS5
 
 void SIPEventHandler::AttachView(XamlView xamlView, bool fireKeyboardEvents) {
-  m_fireKeyboradEvents = fireKeyboardEvents;
+  m_fireKeyboardEvents = fireKeyboardEvents;
   // hookup CoreInputView only after element is in the tree
   m_view = winrt::make_weak(xamlView);
   if (winrt::VisualTreeHelper::GetParent(xamlView)) {
@@ -66,7 +66,7 @@ void SIPEventHandler::InitializeCoreInputView() {
             if (!e.Handled()) {
               bool wasShowing = m_isShowing;
               m_isShowing = !IsOcclusionsEmpty(e.Occlusions());
-              if (wasShowing != m_isShowing && m_fireKeyboradEvents) {
+              if (wasShowing != m_isShowing && m_fireKeyboardEvents) {
                 if (!m_isShowing) {
                   folly::dynamic params = folly::dynamic::object("screenY", 0)("screenX", 0)("width", 0)("height", 0);
                   SendEvent("keyboardDidHide", std::move(params));
@@ -85,14 +85,14 @@ void SIPEventHandler::InitializeCoreInputView() {
 }
 /*
 void SIPEventHandler::TryShow() {
-if (IsRS5OrHigher() && m_coreInputView && !m_isShowing) { // CoreInputView.TryShow is only avaliable after RS5
+if (IsRS5OrHigher() && m_coreInputView && !m_isShowing) { // CoreInputView.TryShow is only available after RS5
   m_coreInputView.TryShow();
 }
 }
 */
 
 void SIPEventHandler::TryHide() {
-  if (IsRS5OrHigher() && m_coreInputView && m_isShowing) { // CoreInputView.TryHide is only avaliable after RS5
+  if (IsRS5OrHigher() && m_coreInputView && m_isShowing) { // CoreInputView.TryHide is only available after RS5
     m_coreInputView.TryHide();
   }
 }

package/Microsoft.ReactNative/Views/SIPEventHandler.h

@@ -37,7 +37,7 @@ class SIPEventHandler {
   winrt::weak_ref<XamlView> m_view{};
   xaml::FrameworkElement::Loaded_revoker m_loadedRevoker{};
   bool m_isShowing{false};
-  bool m_fireKeyboradEvents;
+  bool m_fireKeyboardEvents;
 
   void InitializeCoreInputView();
 };

package/Microsoft.ReactNative/Views/ShadowNodeBase.h

@@ -45,10 +45,10 @@ enum class ShadowCorners : uint8_t {
 };
 
 struct ShadowNodeLayout {
-  float Left;
-  float Top;
-  float Width;
-  float Height;
+  float Left{0.f};
+  float Top{0.f};
+  float Width{0.f};
+  float Height{0.f};
 };
 
 extern const DECLSPEC_SELECTANY double c_UndefinedEdge = -1;
@@ -146,11 +146,14 @@ struct REACTWINDOWS_EXPORT ShadowNodeBase : public ShadowNode {
   bool m_onMouseEnterRegistered = false;
   bool m_onMouseLeaveRegistered = false;
 
+  // Overflow
+  bool m_overflowHidden = false;
+
   // Pointer events
   PointerEventsKind m_pointerEvents = PointerEventsKind::Auto;
 
   // Layout
-  ShadowNodeLayout m_layout;
+  ShadowNodeLayout m_layout{};
 
   // Support Keyboard
  public:

package/Microsoft.ReactNative/Views/SwitchViewManager.cpp

@@ -46,7 +46,7 @@ class SwitchShadowNode : public ShadowNodeBase {
 // sets the resources to Empty SolidColorBrushes if the user sets the color before runtime, this lets the user change
 // the color of the SolidColorBrush at runtime and keeps the toggleswitches who did not change colors on the default
 // ThemeResource
-void setEmptyResouceBrushes(
+void setEmptyResourceBrushes(
     const winrt::Microsoft::ReactNative::JSValueObject &props,
     const xaml::Controls::ToggleSwitch toggleSwitch) {
   auto brush = xaml::Media::SolidColorBrush();
@@ -83,7 +83,7 @@ void SwitchShadowNode::createView(const winrt::Microsoft::ReactNative::JSValueOb
   Super::createView(props);
   auto toggleSwitch = GetView().as<winrt::ToggleSwitch>();
 
-  setEmptyResouceBrushes(props, toggleSwitch);
+  setEmptyResourceBrushes(props, toggleSwitch);
 
   m_toggleSwitchToggledRevoker = toggleSwitch.Toggled(winrt::auto_revoke, [=](auto &&, auto &&) {
     if (m_offTrackColor)

package/Microsoft.ReactNative/Views/Text/TextTransformVisitor.cpp

@@ -52,7 +52,7 @@ void TextTransformVisitor::VisitVirtualText(ShadowNodeBase *node) {
 }
 
 bool TextTransformVisitor::ShouldApplyTransform(TextTransform transform) {
-  // If the visitor is applied in the context of a textTransfrom prop value
+  // If the visitor is applied in the context of a textTransform prop value
   // change, the m_forceUpdate flag is set to true.
   if (m_forceUpdate) {
     // When the textTransform prop changes, only recurse if at the root node

package/Microsoft.ReactNative/Views/TextInputViewManager.cpp

@@ -41,7 +41,7 @@ struct Selection {
 };
 } // namespace Microsoft::ReactNative
 
-// Such code is better to move to a seperate parser layer
+// Such code is better to move to a separate parser layer
 template <>
 struct json_type_traits<Microsoft::ReactNative::Selection> {
   static Microsoft::ReactNative::Selection parseJson(const winrt::Microsoft::ReactNative::JSValue &json) {
@@ -127,7 +127,7 @@ class TextInputShadowNode : public ShadowNodeBase {
   void dispatchTextInputChangeEvent(winrt::hstring newText);
   void registerEvents();
   void registerPreviewKeyDown();
-  void HideCaretIfNeeded();
+  void UpdateCaretColorOrHideIfNeeded();
   void setPasswordBoxPlaceholderForeground(
       xaml::Controls::PasswordBox passwordBox,
       const winrt::Microsoft::ReactNative::JSValue &color);
@@ -144,6 +144,8 @@ class TextInputShadowNode : public ShadowNodeBase {
   bool m_hideCaret = false;
   bool m_shouldClearTextOnSubmit = false;
 
+  winrt::Microsoft::ReactNative::JSValue m_cursorColor;
+
   winrt::Microsoft::ReactNative::JSValue m_placeholderTextColor;
   std::vector<HandledKeyboardEvent> m_submitKeyEvents{};
 
@@ -260,7 +262,7 @@ void TextInputShadowNode::registerEvents() {
         control.as<xaml::Controls::PasswordBox>().SelectAll();
       }
     }
-    HideCaretIfNeeded();
+    UpdateCaretColorOrHideIfNeeded();
 
     folly::dynamic eventData = folly::dynamic::object("target", tag);
     if (!m_updating)
@@ -330,7 +332,7 @@ void TextInputShadowNode::registerEvents() {
             }
           });
     }
-    HideCaretIfNeeded();
+    UpdateCaretColorOrHideIfNeeded();
   });
 
   if (control.try_as<xaml::IUIElement7>()) {
@@ -448,14 +450,24 @@ bool TextInputShadowNode::IsTextBox() {
   return !!GetView().try_as<xaml::Controls::TextBox>();
 }
 
-// hacking solution to hide the caret
-void TextInputShadowNode::HideCaretIfNeeded() {
+// hacking solution to hide the caret or change its color
+void TextInputShadowNode::UpdateCaretColorOrHideIfNeeded() {
+  bool updateRequired = false;
+  xaml::Media::SolidColorBrush color;
+
   if (m_hideCaret) {
+    updateRequired = true;
+    color = xaml::Media::SolidColorBrush(winrt::Colors::Transparent());
+  } else if (!m_cursorColor.IsNull()) {
+    updateRequired = true;
+    color = SolidColorBrushFrom(m_cursorColor);
+  }
+
+  if (updateRequired) {
     auto control = GetView().as<xaml::Controls::Control>();
     if (auto caret = FindCaret(control)) {
       caret.CompositeMode(xaml::Media::ElementCompositeMode::Inherit);
-      xaml::Media::SolidColorBrush transparentColor(winrt::Colors::Transparent());
-      caret.Fill(transparentColor);
+      caret.Fill(color);
     }
   }
 }
@@ -520,7 +532,7 @@ void TextInputShadowNode::updateProperties(winrt::Microsoft::ReactNative::JSValu
     } else if (propertyName == "caretHidden") {
       if (propertyValue.Type() == winrt::Microsoft::ReactNative::JSValueType::Boolean) {
         m_hideCaret = propertyValue.AsBoolean();
-        HideCaretIfNeeded();
+        UpdateCaretColorOrHideIfNeeded();
       }
     } else if (propertyName == "focusable") {
       // parent class also sets isTabStop
@@ -581,6 +593,11 @@ void TextInputShadowNode::updateProperties(winrt::Microsoft::ReactNative::JSValu
             isTextBox ? xaml::Controls::TextBox::PlaceholderTextProperty()
                       : xaml::Controls::PasswordBox::PlaceholderTextProperty());
       }
+    } else if (propertyName == "cursorColor") {
+      m_cursorColor = nullptr;
+      if (IsValidColorValue(propertyValue)) {
+        m_cursorColor = propertyValue.Copy();
+      }
     } else if (propertyName == "selectionColor") {
       if (IsValidColorValue(propertyValue)) {
         control.SetValue(
@@ -593,9 +610,9 @@ void TextInputShadowNode::updateProperties(winrt::Microsoft::ReactNative::JSValu
                       : xaml::Controls::PasswordBox::SelectionHighlightColorProperty());
     } else if (propertyName == "keyboardType") {
       if (propertyValue.Type() == winrt::Microsoft::ReactNative::JSValueType::String) {
-        auto inputScopeNameVaue = parseKeyboardType(propertyValue, isTextBox);
+        auto inputScopeNameValue = parseKeyboardType(propertyValue, isTextBox);
         auto scope = xaml::Input::InputScope();
-        auto scopeName = xaml::Input::InputScopeName(inputScopeNameVaue);
+        auto scopeName = xaml::Input::InputScopeName(inputScopeNameValue);
         auto names = scope.Names();
         names.Append(scopeName);
         control.SetValue(
@@ -676,7 +693,7 @@ void TextInputShadowNode::updateProperties(winrt::Microsoft::ReactNative::JSValu
               if (propertyValue.AsString() == "characters") {
                 textBox.CharacterCasing(xaml::Controls::CharacterCasing::Upper);
               } else { // anything else turns off autoCap (should be "None" but
-                       // we don't support "words"/"senetences" yet)
+                       // we don't support "words"/"sentences" yet)
                 textBox.CharacterCasing(xaml::Controls::CharacterCasing::Normal);
               }
             } else if (propertyValue.IsNull())
@@ -822,6 +839,7 @@ void TextInputViewManager::GetNativeProps(const winrt::Microsoft::ReactNative::I
   React::WriteProperty(writer, L"placeholder", L"string");
   React::WriteProperty(writer, L"placeholderTextColor", L"Color");
   React::WriteProperty(writer, L"scrollEnabled", L"boolean");
+  React::WriteProperty(writer, L"cursorColor", L"Color");
   React::WriteProperty(writer, L"selection", L"Map");
   React::WriteProperty(writer, L"selectionColor", L"Color");
   React::WriteProperty(writer, L"selectTextOnFocus", L"boolean");
@@ -946,7 +964,7 @@ void TextInputViewManager::TransferProperties(const XamlView &oldView, const Xam
           xaml::Controls::TextBox::SelectionHighlightColorProperty(),
           xaml::Controls::PasswordBox::SelectionHighlightColorProperty());
       newView.as<xaml::Controls::PasswordBox>().Password(oldView.as<xaml::Controls::TextBox>().Text());
-      // Since both focasable/editable affect isEnabled for PasswordBox, if the oldView is enabled we still need to
+      // Since both focusable/editable affect isEnabled for PasswordBox, if the oldView is enabled we still need to
       // check isReadOnly
       if (oldView.as<xaml::Controls::TextBox>().IsEnabled()) {
         newView.as<xaml::Controls::PasswordBox>().IsEnabled(!oldView.as<xaml::Controls::TextBox>().IsReadOnly());
@@ -970,7 +988,7 @@ void TextInputViewManager::TransferProperties(const XamlView &oldView, const Xam
           xaml::Controls::PasswordBox::SelectionHighlightColorProperty(),
           xaml::Controls::TextBox::SelectionHighlightColorProperty());
       newView.as<xaml::Controls::TextBox>().Text(oldView.as<xaml::Controls::PasswordBox>().Password());
-      // Since both focasable/editable affect isEnabled for PasswordBox, if the oldView is enabled we still need to
+      // Since both focusable/editable affect isEnabled for PasswordBox, if the oldView is enabled we still need to
       // check isReadOnly
       if (oldView.as<xaml::Controls::PasswordBox>().IsEnabled()) {
         newView.as<xaml::Controls::TextBox>().IsReadOnly(!oldView.as<xaml::Controls::PasswordBox>().IsEnabled());

package/Microsoft.ReactNative/Views/TouchEventHandler.cpp

@@ -585,7 +585,7 @@ bool TouchEventHandler::PropagatePointerEventAndFindReactSourceBranch(
 }
 
 //
-// Retreives the path of nodes from an element to the root.
+// Retrieves the path of nodes from an element to the root.
 // The order of the returned list is from child to parent.
 //
 std::vector<int64_t> GetTagsForBranch(INativeUIManagerHost *host, int64_t tag, int64_t rootTag) {

package/Microsoft.ReactNative/Views/ViewManagerBase.cpp

@@ -46,7 +46,7 @@ float GetConstrainedResult(float constrainTo, float measuredSize, YGMeasureMode
 }
 
 YGSize DefaultYogaSelfMeasureFunc(
-    YGNodeRef node,
+    YGNodeConstRef node,
     float width,
     YGMeasureMode widthMode,
     float height,
@@ -221,7 +221,7 @@ XamlView ViewManagerBase::CreateView(int64_t tag, const winrt::Microsoft::ReactN
   // Set the tag if the element type supports it
   SetTag(view, tag);
 
-  // In Debug, set the element name to the tag for convienent
+  // In Debug, set the element name to the tag for convenient
   // searching within VisualStudio's Live Visual Tree pane
 #ifdef DEBUG
   auto element = view.try_as<xaml::FrameworkElement>();
@@ -295,6 +295,8 @@ bool ViewManagerBase::UpdateProperty(
       }
     }
   } else if (TryUpdateMouseEvents(nodeToUpdate, propertyName, propertyValue)) {
+  } else if (propertyName == "overflow") {
+    nodeToUpdate->m_overflowHidden = propertyValue.AsString() == "hidden";
   } else {
     return false;
   }
@@ -374,6 +376,16 @@ void ViewManagerBase::SetLayoutProps(
 
   fe.Width(width);
   fe.Height(height);
+
+  // Modifying the `overflow` prop will always result in the Yoga node setting
+  // `YGNodeHasNewLayout`, so we can reliably update the Clip from this method.
+  if (nodeToUpdate.m_overflowHidden) {
+    winrt::RectangleGeometry clipGeometry;
+    clipGeometry.Rect(winrt::Rect(0, 0, width, height));
+    fe.Clip(clipGeometry);
+  } else {
+    fe.ClearValue(xaml::UIElement::ClipProperty());
+  }
 }
 
 YGMeasureFunc ViewManagerBase::GetYogaCustomMeasureFunc() const {

package/Microsoft.ReactNative/Views/ViewManagerBase.h

@@ -25,7 +25,7 @@ struct YogaContext {
 };
 
 REACTWINDOWS_EXPORT YGSize DefaultYogaSelfMeasureFunc(
-    YGNodeRef node,
+    YGNodeConstRef node,
     float width,
     YGMeasureMode widthMode,
     float height,