react-native-windows 0.83.0-preview.0 → 0.83.0-preview.2

package/Microsoft.ReactNative/ComponentView.idl

@@ -43,6 +43,14 @@ namespace Microsoft.ReactNative
     Last,
   };
 
+  enum FocusState
+  {
+    Unfocused = 0,
+    Pointer,
+    Keyboard,
+    Programmatic,
+  };
+
   [webhosthidden]
   [experimental]
   interface IComponentState 
@@ -99,7 +107,7 @@ namespace Microsoft.ReactNative
     LayoutMetrics LayoutMetrics { get; };
     IInspectable UserData;
 
-    Boolean TryFocus();
+    Boolean TryFocus(FocusState focusState);
 
     DOC_STRING("Used to handle key down events when this component is focused, or if a child component did not handle the key down")
     event Windows.Foundation.EventHandler<Microsoft.ReactNative.Composition.Input.KeyRoutedEventArgs> KeyDown;

package/Microsoft.ReactNative/Fabric/ComponentView.cpp

@@ -283,6 +283,7 @@ void ComponentView::parent(const winrt::Microsoft::ReactNative::ComponentView &p
         oldRootView->TrySetFocusedComponent(
             oldParent,
             winrt::Microsoft::ReactNative::FocusNavigationDirection::None,
+            winrt::Microsoft::ReactNative::FocusState::Programmatic,
             true /*forceNoSelectionIfCannotMove*/);
       }
     }
@@ -431,9 +432,10 @@ void ComponentView::GotFocus(winrt::event_token const &token) noexcept {
   m_gotFocusEvent.remove(token);
 }
 
-bool ComponentView::TryFocus() noexcept {
+bool ComponentView::TryFocus(winrt::Microsoft::ReactNative::FocusState focusState) noexcept {
   if (auto root = rootComponentView()) {
-    return root->TrySetFocusedComponent(*get_strong(), winrt::Microsoft::ReactNative::FocusNavigationDirection::None);
+    return root->TrySetFocusedComponent(
+        *get_strong(), winrt::Microsoft::ReactNative::FocusNavigationDirection::None, focusState);
   }
 
   return false;

package/Microsoft.ReactNative/Fabric/ComponentView.h

@@ -201,7 +201,7 @@ struct ComponentView
 
   LayoutMetrics LayoutMetrics() const noexcept;
 
-  bool TryFocus() noexcept;
+  bool TryFocus(winrt::Microsoft::ReactNative::FocusState focusState) noexcept;
 
   virtual bool focusable() const noexcept;
   virtual facebook::react::SharedViewEventEmitter eventEmitterAtPoint(facebook::react::Point pt) noexcept;

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

@@ -608,6 +608,8 @@ int64_t CompositionEventHandler::SendMessage(HWND hwnd, uint32_t msg, uint64_t w
 
 void CompositionEventHandler::onKeyDown(
     const winrt::Microsoft::ReactNative::Composition::Input::KeyRoutedEventArgs &args) noexcept {
+  RootComponentView().UseKeyboardForProgrammaticFocus(true);
+
   if (auto focusedComponent = RootComponentView().GetFocusedComponent()) {
     winrt::get_self<winrt::Microsoft::ReactNative::implementation::ComponentView>(focusedComponent)->OnKeyDown(args);
 
@@ -631,7 +633,7 @@ void CompositionEventHandler::onKeyDown(
   }
 
   if (!fCtrl && args.Key() == winrt::Windows::System::VirtualKey::Tab) {
-    if (RootComponentView().TryMoveFocus(!fShift)) {
+    if (RootComponentView().TryMoveFocus(!fShift, winrt::Microsoft::ReactNative::FocusState::Keyboard)) {
       args.Handled(true);
     }
 
@@ -641,6 +643,8 @@ void CompositionEventHandler::onKeyDown(
 
 void CompositionEventHandler::onKeyUp(
     const winrt::Microsoft::ReactNative::Composition::Input::KeyRoutedEventArgs &args) noexcept {
+  RootComponentView().UseKeyboardForProgrammaticFocus(true);
+
   if (auto focusedComponent = RootComponentView().GetFocusedComponent()) {
     winrt::get_self<winrt::Microsoft::ReactNative::implementation::ComponentView>(focusedComponent)->OnKeyUp(args);
 
@@ -1173,6 +1177,8 @@ void CompositionEventHandler::onPointerPressed(
     winrt::Windows::System::VirtualKeyModifiers keyModifiers) noexcept {
   namespace Composition = winrt::Microsoft::ReactNative::Composition;
 
+  RootComponentView().UseKeyboardForProgrammaticFocus(false);
+
   // Clears any active text selection when left pointer is pressed
   if (pointerPoint.Properties().PointerUpdateKind() != Composition::Input::PointerUpdateKind::RightButtonPressed) {
     RootComponentView().ClearCurrentTextSelection();
@@ -1210,6 +1216,30 @@ void CompositionEventHandler::onPointerPressed(
     ActiveTouch activeTouch{0};
     activeTouch.touchType = UITouchType::Mouse;
 
+    // Map PointerUpdateKind to W3C button value
+    // https://developer.mozilla.org/docs/Web/API/MouseEvent/button
+    auto updateKind = pointerPoint.Properties().PointerUpdateKind();
+    switch (updateKind) {
+      case Composition::Input::PointerUpdateKind::LeftButtonPressed:
+        activeTouch.button = 0;
+        break;
+      case Composition::Input::PointerUpdateKind::MiddleButtonPressed:
+        activeTouch.button = 1;
+        break;
+      case Composition::Input::PointerUpdateKind::RightButtonPressed:
+        activeTouch.button = 2;
+        break;
+      case Composition::Input::PointerUpdateKind::XButton1Pressed:
+        activeTouch.button = 3;
+        break;
+      case Composition::Input::PointerUpdateKind::XButton2Pressed:
+        activeTouch.button = 4;
+        break;
+      default:
+        activeTouch.button = -1;
+        break;
+    }
+
     while (targetComponentView) {
       if (auto eventEmitter =
               winrt::get_self<winrt::Microsoft::ReactNative::implementation::ComponentView>(targetComponentView)
@@ -1245,6 +1275,8 @@ void CompositionEventHandler::onPointerReleased(
     winrt::Windows::System::VirtualKeyModifiers keyModifiers) noexcept {
   int pointerId = pointerPoint.PointerId();
 
+  RootComponentView().UseKeyboardForProgrammaticFocus(false);
+
   auto activeTouch = std::find_if(m_activeTouches.begin(), m_activeTouches.end(), [pointerId](const auto &pair) {
     return pair.second.touch.identifier == pointerId;
   });
@@ -1394,8 +1426,34 @@ facebook::react::PointerEvent CompositionEventHandler::CreatePointerEventFromAct
 
   event.detail = 0;
 
-  // event.button = activeTouch.button;
-  // event.buttons = ButtonMaskToButtons(activeTouch.buttonMask);
+  event.button = activeTouch.button;
+
+  // Build W3C buttons bitmask from the active button
+  // https://developer.mozilla.org/docs/Web/API/MouseEvent/buttons
+  if (IsEndishEventType(eventType)) {
+    event.buttons = 0;
+  } else {
+    switch (activeTouch.button) {
+      case 0:
+        event.buttons = 1;
+        break; // primary
+      case 1:
+        event.buttons = 4;
+        break; // auxiliary (middle)
+      case 2:
+        event.buttons = 2;
+        break; // secondary (right)
+      case 3:
+        event.buttons = 8;
+        break; // X1
+      case 4:
+        event.buttons = 16;
+        break; // X2
+      default:
+        event.buttons = 0;
+        break;
+    }
+  }
 
   // UpdatePointerEventModifierFlags(event, activeTouch.modifierFlags);
 

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

@@ -373,7 +373,8 @@ void ComponentView::onGotFocus(
     const winrt::Microsoft::ReactNative::Composition::Input::RoutedEventArgs &args) noexcept {
   if (args.OriginalSource() == Tag()) {
     m_eventEmitter->onFocus();
-    if (viewProps()->enableFocusRing) {
+    if (viewProps()->enableFocusRing &&
+        rootComponentView()->focusState() == winrt::Microsoft::ReactNative::FocusState::Keyboard) {
       facebook::react::Rect focusRect = m_layoutMetrics.frame;
       focusRect.origin.x -= (FOCUS_VISUAL_WIDTH * 2);
       focusRect.origin.y -= (FOCUS_VISUAL_WIDTH * 2);
@@ -426,15 +427,20 @@ void ComponentView::HandleCommand(const winrt::Microsoft::ReactNative::HandleCom
   auto commandName = args.CommandName();
   if (commandName == L"focus") {
     if (auto root = rootComponentView()) {
-      root->TrySetFocusedComponent(*get_strong(), winrt::Microsoft::ReactNative::FocusNavigationDirection::None);
+      root->TrySetFocusedComponent(
+          *get_strong(),
+          winrt::Microsoft::ReactNative::FocusNavigationDirection::None,
+          winrt::Microsoft::ReactNative::FocusState::Programmatic);
     }
     return;
   }
   if (commandName == L"blur") {
     if (auto root = rootComponentView()) {
       root->TrySetFocusedComponent(
-          nullptr, winrt::Microsoft::ReactNative::FocusNavigationDirection::None); // Todo store this component as
-                                                                                   // previously focused element
+          nullptr,
+          winrt::Microsoft::ReactNative::FocusNavigationDirection::None,
+          winrt::Microsoft::ReactNative::FocusState::Programmatic); // Todo store this component as
+                                                                    // previously focused element
     }
     return;
   }

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

@@ -82,7 +82,7 @@ void ContentIslandComponentView::ConnectInternal() noexcept {
       m_navigationHost.DepartFocusRequested([wkThis = get_weak()](const auto &, const auto &args) {
         if (auto strongThis = wkThis.get()) {
           const bool next = (args.Request().Reason() != winrt::Microsoft::UI::Input::FocusNavigationReason::Last);
-          strongThis->rootComponentView()->TryMoveFocus(next);
+          strongThis->rootComponentView()->TryMoveFocus(next, winrt::Microsoft::ReactNative::FocusState::Programmatic);
           args.Result(winrt::Microsoft::UI::Input::FocusNavigationResult::Moved);
         }
       });

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

@@ -622,7 +622,10 @@ void ParagraphComponentView::OnPointerPressed(
 
     // Focuses so we receive onLostFocus when clicking elsewhere
     if (auto root = rootComponentView()) {
-      root->TrySetFocusedComponent(*get_strong(), winrt::Microsoft::ReactNative::FocusNavigationDirection::None);
+      root->TrySetFocusedComponent(
+          *get_strong(),
+          winrt::Microsoft::ReactNative::FocusNavigationDirection::None,
+          winrt::Microsoft::ReactNative::FocusState::Pointer);
     }
 
     args.Handled(true);

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

@@ -82,7 +82,8 @@ winrt::Microsoft::ReactNative::ComponentView RootComponentView::GetFocusedCompon
 
 void RootComponentView::SetFocusedComponent(
     const winrt::Microsoft::ReactNative::ComponentView &value,
-    winrt::Microsoft::ReactNative::FocusNavigationDirection direction) noexcept {
+    winrt::Microsoft::ReactNative::FocusNavigationDirection direction,
+    winrt::Microsoft::ReactNative::FocusState focusState) noexcept {
   if (m_focusedComponent == value)
     return;
 
@@ -97,11 +98,26 @@ void RootComponentView::SetFocusedComponent(
       winrt::get_self<winrt::Microsoft::ReactNative::implementation::ReactNativeIsland>(rootView)->TrySetFocus();
     }
     m_focusedComponent = value;
+    if (focusState == winrt::Microsoft::ReactNative::FocusState::Programmatic) {
+      focusState =
+          (!m_useKeyboardForProgrammaticFocus || m_focusState == winrt::Microsoft::ReactNative::FocusState::Pointer)
+          ? winrt::Microsoft::ReactNative::FocusState::Pointer
+          : winrt::Microsoft::ReactNative::FocusState::Keyboard;
+    }
+    m_focusState = focusState;
     auto args = winrt::make<winrt::Microsoft::ReactNative::implementation::GotFocusEventArgs>(value, direction);
     winrt::get_self<winrt::Microsoft::ReactNative::implementation::ComponentView>(value)->onGotFocus(args);
   }
 }
 
+winrt::Microsoft::ReactNative::FocusState RootComponentView::focusState() const noexcept {
+  return m_focusState;
+}
+
+void RootComponentView::UseKeyboardForProgrammaticFocus(bool value) noexcept {
+  m_useKeyboardForProgrammaticFocus = value;
+}
+
 bool RootComponentView::NavigateFocus(const winrt::Microsoft::ReactNative::FocusNavigationRequest &request) noexcept {
   if (request.Reason() == winrt::Microsoft::ReactNative::FocusNavigationReason::Restore) {
     if (m_focusedComponent)
@@ -116,7 +132,8 @@ bool RootComponentView::NavigateFocus(const winrt::Microsoft::ReactNative::Focus
         view,
         request.Reason() == winrt::Microsoft::ReactNative::FocusNavigationReason::First
             ? winrt::Microsoft::ReactNative::FocusNavigationDirection::First
-            : winrt::Microsoft::ReactNative::FocusNavigationDirection::Last);
+            : winrt::Microsoft::ReactNative::FocusNavigationDirection::Last,
+        winrt::Microsoft::ReactNative::FocusState::Programmatic);
   }
   return view != nullptr;
 }
@@ -124,6 +141,7 @@ bool RootComponentView::NavigateFocus(const winrt::Microsoft::ReactNative::Focus
 bool RootComponentView::TrySetFocusedComponent(
     const winrt::Microsoft::ReactNative::ComponentView &view,
     winrt::Microsoft::ReactNative::FocusNavigationDirection direction,
+    winrt::Microsoft::ReactNative::FocusState focusState,
     bool forceNoSelectionIfCannotMove /*= false*/) noexcept {
   auto target = view;
   auto selfView = winrt::get_self<winrt::Microsoft::ReactNative::implementation::ComponentView>(target);
@@ -157,15 +175,15 @@ bool RootComponentView::TrySetFocusedComponent(
 
     winrt::get_self<winrt::Microsoft::ReactNative::implementation::ComponentView>(losingFocusArgs.NewFocusedComponent())
         ->rootComponentView()
-        ->SetFocusedComponent(gettingFocusArgs.NewFocusedComponent(), direction);
+        ->SetFocusedComponent(gettingFocusArgs.NewFocusedComponent(), direction, focusState);
   } else {
-    SetFocusedComponent(nullptr, direction);
+    SetFocusedComponent(nullptr, direction, focusState);
   }
 
   return true;
 }
 
-bool RootComponentView::TryMoveFocus(bool next) noexcept {
+bool RootComponentView::TryMoveFocus(bool next, winrt::Microsoft::ReactNative::FocusState focusState) noexcept {
   if (!m_focusedComponent) {
     return NavigateFocus(winrt::Microsoft::ReactNative::FocusNavigationRequest(
         next ? winrt::Microsoft::ReactNative::FocusNavigationReason::First
@@ -173,7 +191,8 @@ bool RootComponentView::TryMoveFocus(bool next) noexcept {
   }
 
   Mso::Functor<bool(const winrt::Microsoft::ReactNative::ComponentView &)> fn =
-      [currentlyFocused = m_focusedComponent, next](const winrt::Microsoft::ReactNative::ComponentView &view) noexcept {
+      [currentlyFocused = m_focusedComponent, next, focusState](
+          const winrt::Microsoft::ReactNative::ComponentView &view) noexcept {
         if (view == currentlyFocused)
           return false;
         auto selfView = winrt::get_self<winrt::Microsoft::ReactNative::implementation::ComponentView>(view);
@@ -185,7 +204,8 @@ bool RootComponentView::TryMoveFocus(bool next) noexcept {
             ->TrySetFocusedComponent(
                 view,
                 next ? winrt::Microsoft::ReactNative::FocusNavigationDirection::Next
-                     : winrt::Microsoft::ReactNative::FocusNavigationDirection::Previous);
+                     : winrt::Microsoft::ReactNative::FocusNavigationDirection::Previous,
+                focusState);
       };
 
   if (winrt::Microsoft::ReactNative::implementation::walkTree(m_focusedComponent, next, fn)) {
@@ -249,7 +269,10 @@ void RootComponentView::start(const winrt::Microsoft::ReactNative::ReactNativeIs
 }
 
 void RootComponentView::stop() noexcept {
-  SetFocusedComponent(nullptr, winrt::Microsoft::ReactNative::FocusNavigationDirection::None);
+  SetFocusedComponent(
+      nullptr,
+      winrt::Microsoft::ReactNative::FocusNavigationDirection::None,
+      winrt::Microsoft::ReactNative::FocusState::Programmatic);
   if (m_visualAddedToIsland) {
     if (auto rootView = m_wkRootView.get()) {
       winrt::get_self<winrt::Microsoft::ReactNative::implementation::ReactNativeIsland>(rootView)->RemoveRenderedVisual(

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

@@ -30,15 +30,17 @@ struct RootComponentView : RootComponentViewT<RootComponentView, ViewComponentVi
   winrt::Microsoft::ReactNative::ComponentView GetFocusedComponent() noexcept;
   void SetFocusedComponent(
       const winrt::Microsoft::ReactNative::ComponentView &value,
-      winrt::Microsoft::ReactNative::FocusNavigationDirection direction) noexcept;
+      winrt::Microsoft::ReactNative::FocusNavigationDirection direction,
+      winrt::Microsoft::ReactNative::FocusState focusState) noexcept;
   bool TrySetFocusedComponent(
       const winrt::Microsoft::ReactNative::ComponentView &view,
       winrt::Microsoft::ReactNative::FocusNavigationDirection direction,
+      winrt::Microsoft::ReactNative::FocusState focusState,
       bool forceNoSelectionIfCannotMove = false) noexcept;
 
   bool NavigateFocus(const winrt::Microsoft::ReactNative::FocusNavigationRequest &request) noexcept;
 
-  bool TryMoveFocus(bool next) noexcept;
+  bool TryMoveFocus(bool next, winrt::Microsoft::ReactNative::FocusState focusState) noexcept;
 
   RootComponentView *rootComponentView() const noexcept override;
 
@@ -90,14 +92,20 @@ struct RootComponentView : RootComponentViewT<RootComponentView, ViewComponentVi
   void ClearCurrentTextSelection() noexcept;
   void SetViewWithTextSelection(const winrt::Microsoft::ReactNative::ComponentView &view) noexcept;
 
+  winrt::Microsoft::ReactNative::FocusState focusState() const noexcept;
+
+  void UseKeyboardForProgrammaticFocus(bool value) noexcept;
+
  private:
   // should this be a ReactTaggedView? - It shouldn't actually matter since if the view is going away it should always
   // be clearing its focus But being a reactTaggedView might make it easier to identify cases where that isn't
   // happening.
   winrt::Microsoft::ReactNative::ComponentView m_focusedComponent{nullptr};
+  winrt::Microsoft::ReactNative::FocusState m_focusState{winrt::Microsoft::ReactNative::FocusState::Unfocused};
   winrt::weak_ref<winrt::Microsoft::ReactNative::ReactNativeIsland> m_wkRootView{nullptr};
   winrt::weak_ref<winrt::Microsoft::ReactNative::Composition::PortalComponentView> m_wkPortal{nullptr};
   bool m_visualAddedToIsland{false};
+  bool m_useKeyboardForProgrammaticFocus{true};
 
   ::Microsoft::ReactNative::ReactTaggedView m_viewWithTextSelection{
       winrt::Microsoft::ReactNative::ComponentView{nullptr}};

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

@@ -271,7 +271,10 @@ void SwitchComponentView::OnPointerPressed(
     m_supressAnimationForNextFrame = true;
 
     if (auto root = rootComponentView()) {
-      root->TrySetFocusedComponent(*get_strong(), winrt::Microsoft::ReactNative::FocusNavigationDirection::None);
+      root->TrySetFocusedComponent(
+          *get_strong(),
+          winrt::Microsoft::ReactNative::FocusNavigationDirection::None,
+          winrt::Microsoft::ReactNative::FocusState::Pointer);
     }
 
     updateVisuals();

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

@@ -233,7 +233,9 @@ struct CompTextHost : public winrt::implements<CompTextHost, ITextHost> {
     winrt::check_hresult(
         m_outer->QueryInterface(winrt::guid_of<winrt::Microsoft::ReactNative::ComponentView>(), winrt::put_abi(view)));
     m_outer->rootComponentView()->TrySetFocusedComponent(
-        view, winrt::Microsoft::ReactNative::FocusNavigationDirection::None);
+        view,
+        winrt::Microsoft::ReactNative::FocusNavigationDirection::None,
+        winrt::Microsoft::ReactNative::FocusState::Programmatic);
     // assert(false);
     // TODO focus
   }
@@ -1469,7 +1471,10 @@ void WindowsTextInputComponentView::onMounted() noexcept {
   // Handle autoFocus property - focus the component when mounted if autoFocus is true
   if (windowsTextInputProps().autoFocus) {
     if (auto root = rootComponentView()) {
-      root->TrySetFocusedComponent(*get_strong(), winrt::Microsoft::ReactNative::FocusNavigationDirection::None);
+      root->TrySetFocusedComponent(
+          *get_strong(),
+          winrt::Microsoft::ReactNative::FocusNavigationDirection::None,
+          winrt::Microsoft::ReactNative::FocusState::Programmatic);
     }
   }
 }

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

@@ -141,7 +141,10 @@ HRESULT UiaSetFocusHelper(::Microsoft::ReactNative::ReactTaggedView &view) noexc
   if (rootCV == nullptr)
     return UIA_E_ELEMENTNOTAVAILABLE;
 
-  return rootCV->TrySetFocusedComponent(strongView, winrt::Microsoft::ReactNative::FocusNavigationDirection::None)
+  return rootCV->TrySetFocusedComponent(
+             strongView,
+             winrt::Microsoft::ReactNative::FocusNavigationDirection::None,
+             winrt::Microsoft::ReactNative::FocusState::Programmatic)
       ? S_OK
       : E_FAIL;
 }

package/Microsoft.ReactNative/ReactHost/ReactHost.cpp

@@ -266,6 +266,10 @@ class ReactNativeWindowsFeatureFlags : public facebook::react::ReactNativeFeatur
     return true;
   }
 
+  bool enableImperativeFocus() override {
+    return true;
+  }
+
   bool fuseboxEnabledRelease() override {
     return true; // Enable Fusebox (modern CDP backend) by default for React Native Windows
   }

package/PropertySheets/Generated/PackageVersion.g.props

@@ -10,11 +10,11 @@
 -->
 <Project xmlns="http://schemas.microsoft.com/developer/msbuild/2003">
   <PropertyGroup>
-    <ReactNativeWindowsVersion>0.0.0-canary.1037</ReactNativeWindowsVersion>
+    <ReactNativeWindowsVersion>0.83.0-preview.2</ReactNativeWindowsVersion>
     <ReactNativeWindowsMajor>0</ReactNativeWindowsMajor>
-    <ReactNativeWindowsMinor>0</ReactNativeWindowsMinor>
+    <ReactNativeWindowsMinor>83</ReactNativeWindowsMinor>
     <ReactNativeWindowsPatch>0</ReactNativeWindowsPatch>
-    <ReactNativeWindowsCanary>true</ReactNativeWindowsCanary>
-    <ReactNativeWindowsCommitId>d02a7c64b3d3528e4a0f622702921ba63bbeeb01</ReactNativeWindowsCommitId>
+    <ReactNativeWindowsCanary>false</ReactNativeWindowsCanary>
+    <ReactNativeWindowsCommitId>d89154d68c6b2f5f1a2355042d166f9dac8f1ba3</ReactNativeWindowsCommitId>
   </PropertyGroup>
 </Project>

package/ReactCommon/TEMP_UntilReactCommonUpdate/react/renderer/components/view/BaseViewProps.cpp

@@ -0,0 +1,664 @@
+/*
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+#include "BaseViewProps.h"
+
+#include <algorithm>
+
+#include <react/featureflags/ReactNativeFeatureFlags.h>
+#include <react/renderer/components/view/BackgroundImagePropsConversions.h>
+#include <react/renderer/components/view/BoxShadowPropsConversions.h>
+#include <react/renderer/components/view/FilterPropsConversions.h>
+#include <react/renderer/components/view/conversions.h>
+#include <react/renderer/components/view/primitives.h>
+#include <react/renderer/components/view/propsConversions.h>
+#include <react/renderer/core/graphicsConversions.h>
+#include <react/renderer/core/propsConversions.h>
+#include <react/renderer/debug/debugStringConvertibleUtils.h>
+#include <react/renderer/graphics/ValueUnit.h>
+
+namespace facebook::react {
+
+namespace {
+
+std::array<float, 3> getTranslateForTransformOrigin(
+    float viewWidth,
+    float viewHeight,
+    TransformOrigin transformOrigin) {
+  float viewCenterX = viewWidth / 2;
+  float viewCenterY = viewHeight / 2;
+
+  std::array<float, 3> origin = {viewCenterX, viewCenterY, transformOrigin.z};
+
+  for (size_t i = 0; i < transformOrigin.xy.size(); ++i) {
+    auto& currentOrigin = transformOrigin.xy[i];
+    if (currentOrigin.unit == UnitType::Point) {
+      origin[i] = currentOrigin.value;
+    } else if (currentOrigin.unit == UnitType::Percent) {
+      origin[i] =
+          ((i == 0) ? viewWidth : viewHeight) * currentOrigin.value / 100.0f;
+    }
+  }
+
+  float newTranslateX = -viewCenterX + origin[0];
+  float newTranslateY = -viewCenterY + origin[1];
+  float newTranslateZ = origin[2];
+
+  return std::array{newTranslateX, newTranslateY, newTranslateZ};
+}
+
+} // namespace
+
+BaseViewProps::BaseViewProps(
+    const PropsParserContext& context,
+    const BaseViewProps& sourceProps,
+    const RawProps& rawProps,
+    const std::function<bool(const std::string&)>& filterObjectKeys)
+    : YogaStylableProps(context, sourceProps, rawProps, filterObjectKeys),
+      AccessibilityProps(context, sourceProps, rawProps),
+      opacity(
+          ReactNativeFeatureFlags::enableCppPropsIteratorSetter()
+              ? sourceProps.opacity
+              : convertRawProp(
+                    context,
+                    rawProps,
+                    "opacity",
+                    sourceProps.opacity,
+                    (Float)1.0)),
+      backgroundColor(
+          ReactNativeFeatureFlags::enableCppPropsIteratorSetter()
+              ? sourceProps.backgroundColor
+              : convertRawProp(
+                    context,
+                    rawProps,
+                    "backgroundColor",
+                    sourceProps.backgroundColor,
+                    {})),
+      borderRadii(
+          ReactNativeFeatureFlags::enableCppPropsIteratorSetter()
+              ? sourceProps.borderRadii
+              : convertRawProp(
+                    context,
+                    rawProps,
+                    "border",
+                    "Radius",
+                    sourceProps.borderRadii,
+                    {})),
+      borderColors(
+          ReactNativeFeatureFlags::enableCppPropsIteratorSetter()
+              ? sourceProps.borderColors
+              : convertRawProp(
+                    context,
+                    rawProps,
+                    "border",
+                    "Color",
+                    sourceProps.borderColors,
+                    {})),
+      borderCurves(
+          ReactNativeFeatureFlags::enableCppPropsIteratorSetter()
+              ? sourceProps.borderCurves
+              : convertRawProp(
+                    context,
+                    rawProps,
+                    "border",
+                    "Curve",
+                    sourceProps.borderCurves,
+                    {})),
+      borderStyles(
+          ReactNativeFeatureFlags::enableCppPropsIteratorSetter()
+              ? sourceProps.borderStyles
+              : convertRawProp(
+                    context,
+                    rawProps,
+                    "border",
+                    "Style",
+                    sourceProps.borderStyles,
+                    {})),
+      outlineColor(
+          ReactNativeFeatureFlags::enableCppPropsIteratorSetter()
+              ? sourceProps.outlineColor
+              : convertRawProp(
+                    context,
+                    rawProps,
+                    "outlineColor",
+                    sourceProps.outlineColor,
+                    {})),
+      outlineOffset(
+          ReactNativeFeatureFlags::enableCppPropsIteratorSetter()
+              ? sourceProps.outlineOffset
+              : convertRawProp(
+                    context,
+                    rawProps,
+                    "outlineOffset",
+                    sourceProps.outlineOffset,
+                    {})),
+      outlineStyle(
+          ReactNativeFeatureFlags::enableCppPropsIteratorSetter()
+              ? sourceProps.outlineStyle
+              : convertRawProp(
+                    context,
+                    rawProps,
+                    "outlineStyle",
+                    sourceProps.outlineStyle,
+                    {})),
+      outlineWidth(
+          ReactNativeFeatureFlags::enableCppPropsIteratorSetter()
+              ? sourceProps.outlineWidth
+              : convertRawProp(
+                    context,
+                    rawProps,
+                    "outlineWidth",
+                    sourceProps.outlineWidth,
+                    {})),
+      shadowColor(
+          ReactNativeFeatureFlags::enableCppPropsIteratorSetter()
+              ? sourceProps.shadowColor
+              : convertRawProp(
+                    context,
+                    rawProps,
+                    "shadowColor",
+                    sourceProps.shadowColor,
+                    {})),
+      shadowOffset(
+          ReactNativeFeatureFlags::enableCppPropsIteratorSetter()
+              ? sourceProps.shadowOffset
+              : convertRawProp(
+                    context,
+                    rawProps,
+                    "shadowOffset",
+                    sourceProps.shadowOffset,
+                    {})),
+      shadowOpacity(
+          ReactNativeFeatureFlags::enableCppPropsIteratorSetter()
+              ? sourceProps.shadowOpacity
+              : convertRawProp(
+                    context,
+                    rawProps,
+                    "shadowOpacity",
+                    sourceProps.shadowOpacity,
+                    {})),
+      shadowRadius(
+          ReactNativeFeatureFlags::enableCppPropsIteratorSetter()
+              ? sourceProps.shadowRadius
+              : convertRawProp(
+                    context,
+                    rawProps,
+                    "shadowRadius",
+                    sourceProps.shadowRadius,
+                    {})),
+      cursor(
+          ReactNativeFeatureFlags::enableCppPropsIteratorSetter()
+              ? sourceProps.cursor
+              : convertRawProp(
+                    context,
+                    rawProps,
+                    "cursor",
+                    sourceProps.cursor,
+                    {})),
+      boxShadow(
+          ReactNativeFeatureFlags::enableCppPropsIteratorSetter()
+              ? sourceProps.boxShadow
+              : convertRawProp(
+                    context,
+                    rawProps,
+                    "boxShadow",
+                    sourceProps.boxShadow,
+                    {})),
+      filter(
+          ReactNativeFeatureFlags::enableCppPropsIteratorSetter()
+              ? sourceProps.filter
+              : convertRawProp(
+                    context,
+                    rawProps,
+                    "filter",
+                    sourceProps.filter,
+                    {})),
+      backgroundImage(
+          ReactNativeFeatureFlags::enableCppPropsIteratorSetter()
+              ? sourceProps.backgroundImage
+              : convertRawProp(
+                    context,
+                    rawProps,
+                    "experimental_backgroundImage",
+                    sourceProps.backgroundImage,
+                    {})),
+      backgroundSize(
+          ReactNativeFeatureFlags::enableCppPropsIteratorSetter()
+              ? sourceProps.backgroundSize
+              : convertRawProp(
+                    context,
+                    rawProps,
+                    "experimental_backgroundSize",
+                    sourceProps.backgroundSize,
+                    {})),
+      backgroundPosition(
+          ReactNativeFeatureFlags::enableCppPropsIteratorSetter()
+              ? sourceProps.backgroundPosition
+              : convertRawProp(
+                    context,
+                    rawProps,
+                    "experimental_backgroundPosition",
+                    sourceProps.backgroundPosition,
+                    {})),
+      backgroundRepeat(
+          ReactNativeFeatureFlags::enableCppPropsIteratorSetter()
+              ? sourceProps.backgroundRepeat
+              : convertRawProp(
+                    context,
+                    rawProps,
+                    "experimental_backgroundRepeat",
+                    sourceProps.backgroundRepeat,
+                    {})),
+      mixBlendMode(
+          ReactNativeFeatureFlags::enableCppPropsIteratorSetter()
+              ? sourceProps.mixBlendMode
+              : convertRawProp(
+                    context,
+                    rawProps,
+                    "mixBlendMode",
+                    sourceProps.mixBlendMode,
+                    {})),
+      isolation(
+          ReactNativeFeatureFlags::enableCppPropsIteratorSetter()
+              ? sourceProps.isolation
+              : convertRawProp(
+                    context,
+                    rawProps,
+                    "isolation",
+                    sourceProps.isolation,
+                    {})),
+      transform(
+          ReactNativeFeatureFlags::enableCppPropsIteratorSetter()
+              ? sourceProps.transform
+              : convertRawProp(
+                    context,
+                    rawProps,
+                    "transform",
+                    sourceProps.transform,
+                    {})),
+      transformOrigin(
+          ReactNativeFeatureFlags::enableCppPropsIteratorSetter()
+              ? sourceProps.transformOrigin
+              : convertRawProp(
+                    context,
+                    rawProps,
+                    "transformOrigin",
+                    sourceProps.transformOrigin,
+                    {})),
+      backfaceVisibility(
+          ReactNativeFeatureFlags::enableCppPropsIteratorSetter()
+              ? sourceProps.backfaceVisibility
+              : convertRawProp(
+                    context,
+                    rawProps,
+                    "backfaceVisibility",
+                    sourceProps.backfaceVisibility,
+                    {})),
+      shouldRasterize(
+          ReactNativeFeatureFlags::enableCppPropsIteratorSetter()
+              ? sourceProps.shouldRasterize
+              : convertRawProp(
+                    context,
+                    rawProps,
+                    "shouldRasterizeIOS",
+                    sourceProps.shouldRasterize,
+                    {})),
+      zIndex(
+          ReactNativeFeatureFlags::enableCppPropsIteratorSetter()
+              ? sourceProps.zIndex
+              : convertRawProp(
+                    context,
+                    rawProps,
+                    "zIndex",
+                    sourceProps.zIndex,
+                    {})),
+      pointerEvents(
+          ReactNativeFeatureFlags::enableCppPropsIteratorSetter()
+              ? sourceProps.pointerEvents
+              : convertRawProp(
+                    context,
+                    rawProps,
+                    "pointerEvents",
+                    sourceProps.pointerEvents,
+                    {})),
+      hitSlop(
+          ReactNativeFeatureFlags::enableCppPropsIteratorSetter()
+              ? sourceProps.hitSlop
+              : convertRawProp(
+                    context,
+                    rawProps,
+                    "hitSlop",
+                    sourceProps.hitSlop,
+                    {})),
+      onLayout(
+          ReactNativeFeatureFlags::enableCppPropsIteratorSetter()
+              ? sourceProps.onLayout
+              : convertRawProp(
+                    context,
+                    rawProps,
+                    "onLayout",
+                    sourceProps.onLayout,
+                    {})),
+      events(
+          ReactNativeFeatureFlags::enableCppPropsIteratorSetter()
+              ? sourceProps.events
+              : convertRawProp(context, rawProps, sourceProps.events, {})),
+      collapsable(
+          ReactNativeFeatureFlags::enableCppPropsIteratorSetter()
+              ? sourceProps.collapsable
+              : convertRawProp(
+                    context,
+                    rawProps,
+                    "collapsable",
+                    sourceProps.collapsable,
+                    true)),
+      collapsableChildren(
+          ReactNativeFeatureFlags::enableCppPropsIteratorSetter()
+              ? sourceProps.collapsableChildren
+              : convertRawProp(
+                    context,
+                    rawProps,
+                    "collapsableChildren",
+                    sourceProps.collapsableChildren,
+                    true)),
+      removeClippedSubviews(
+          ReactNativeFeatureFlags::enableCppPropsIteratorSetter()
+              ? sourceProps.removeClippedSubviews
+              : convertRawProp(
+                    context,
+                    rawProps,
+                    "removeClippedSubviews",
+                    sourceProps.removeClippedSubviews,
+                    false)) {}
+
+#define VIEW_EVENT_CASE(eventType)                      \
+  case CONSTEXPR_RAW_PROPS_KEY_HASH("on" #eventType): { \
+    const auto offset = ViewEvents::Offset::eventType;  \
+    ViewEvents defaultViewEvents{};                     \
+    bool res = defaultViewEvents[offset];               \
+    if (value.hasValue()) {                             \
+      fromRawValue(context, value, res);                \
+    }                                                   \
+    events[offset] = res;                               \
+    return;                                             \
+  }
+
+void BaseViewProps::setProp(
+    const PropsParserContext& context,
+    RawPropsPropNameHash hash,
+    const char* propName,
+    const RawValue& value) {
+  // All Props structs setProp methods must always, unconditionally,
+  // call all super::setProp methods, since multiple structs may
+  // reuse the same values.
+  YogaStylableProps::setProp(context, hash, propName, value);
+  AccessibilityProps::setProp(context, hash, propName, value);
+
+  static auto defaults = BaseViewProps{};
+
+  switch (hash) {
+    RAW_SET_PROP_SWITCH_CASE_BASIC(opacity);
+    RAW_SET_PROP_SWITCH_CASE_BASIC(backgroundColor);
+    RAW_SET_PROP_SWITCH_CASE(backgroundImage, "experimental_backgroundImage");
+    RAW_SET_PROP_SWITCH_CASE(backgroundSize, "experimental_backgroundSize");
+    RAW_SET_PROP_SWITCH_CASE(
+        backgroundPosition, "experimental_backgroundPosition");
+    RAW_SET_PROP_SWITCH_CASE(backgroundRepeat, "experimental_backgroundRepeat");
+    RAW_SET_PROP_SWITCH_CASE_BASIC(shadowColor);
+    RAW_SET_PROP_SWITCH_CASE_BASIC(shadowOffset);
+    RAW_SET_PROP_SWITCH_CASE_BASIC(shadowOpacity);
+    RAW_SET_PROP_SWITCH_CASE_BASIC(shadowRadius);
+    RAW_SET_PROP_SWITCH_CASE_BASIC(transform);
+    RAW_SET_PROP_SWITCH_CASE_BASIC(backfaceVisibility);
+    RAW_SET_PROP_SWITCH_CASE_BASIC(shouldRasterize);
+    RAW_SET_PROP_SWITCH_CASE_BASIC(zIndex);
+    RAW_SET_PROP_SWITCH_CASE_BASIC(pointerEvents);
+    RAW_SET_PROP_SWITCH_CASE_BASIC(isolation);
+    RAW_SET_PROP_SWITCH_CASE_BASIC(hitSlop);
+    RAW_SET_PROP_SWITCH_CASE_BASIC(onLayout);
+    RAW_SET_PROP_SWITCH_CASE_BASIC(collapsable);
+    RAW_SET_PROP_SWITCH_CASE_BASIC(collapsableChildren);
+    RAW_SET_PROP_SWITCH_CASE_BASIC(removeClippedSubviews);
+    RAW_SET_PROP_SWITCH_CASE_BASIC(cursor);
+    RAW_SET_PROP_SWITCH_CASE_BASIC(outlineColor);
+    RAW_SET_PROP_SWITCH_CASE_BASIC(outlineOffset);
+    RAW_SET_PROP_SWITCH_CASE_BASIC(outlineStyle);
+    RAW_SET_PROP_SWITCH_CASE_BASIC(outlineWidth);
+    RAW_SET_PROP_SWITCH_CASE_BASIC(filter);
+    RAW_SET_PROP_SWITCH_CASE_BASIC(boxShadow);
+    RAW_SET_PROP_SWITCH_CASE_BASIC(mixBlendMode);
+    // events field
+    VIEW_EVENT_CASE(PointerEnter);
+    VIEW_EVENT_CASE(PointerEnterCapture);
+    VIEW_EVENT_CASE(PointerMove);
+    VIEW_EVENT_CASE(PointerMoveCapture);
+    VIEW_EVENT_CASE(PointerLeave);
+    VIEW_EVENT_CASE(PointerLeaveCapture);
+    VIEW_EVENT_CASE(PointerOver);
+    VIEW_EVENT_CASE(PointerOverCapture);
+    VIEW_EVENT_CASE(PointerOut);
+    VIEW_EVENT_CASE(PointerOutCapture);
+    // [Windows
+    VIEW_EVENT_CASE(Click);
+    VIEW_EVENT_CASE(ClickCapture);
+    VIEW_EVENT_CASE(PointerDown);
+    VIEW_EVENT_CASE(PointerDownCapture);
+    VIEW_EVENT_CASE(PointerUp);
+    VIEW_EVENT_CASE(PointerUpCapture);
+    VIEW_EVENT_CASE(GotPointerCapture);
+    VIEW_EVENT_CASE(LostPointerCapture);
+    // Windows]
+    VIEW_EVENT_CASE(MoveShouldSetResponder);
+    VIEW_EVENT_CASE(MoveShouldSetResponderCapture);
+    VIEW_EVENT_CASE(StartShouldSetResponder);
+    VIEW_EVENT_CASE(StartShouldSetResponderCapture);
+    VIEW_EVENT_CASE(ResponderGrant);
+    VIEW_EVENT_CASE(ResponderReject);
+    VIEW_EVENT_CASE(ResponderStart);
+    VIEW_EVENT_CASE(ResponderEnd);
+    VIEW_EVENT_CASE(ResponderRelease);
+    VIEW_EVENT_CASE(ResponderMove);
+    VIEW_EVENT_CASE(ResponderTerminate);
+    VIEW_EVENT_CASE(ResponderTerminationRequest);
+    VIEW_EVENT_CASE(ShouldBlockNativeResponder);
+    VIEW_EVENT_CASE(TouchStart);
+    VIEW_EVENT_CASE(TouchMove);
+    VIEW_EVENT_CASE(TouchEnd);
+    VIEW_EVENT_CASE(TouchCancel);
+    // BorderRadii
+    SET_CASCADED_RECTANGLE_CORNERS(borderRadii, "border", "Radius", value);
+    SET_CASCADED_RECTANGLE_EDGES(borderColors, "border", "Color", value);
+    SET_CASCADED_RECTANGLE_EDGES(borderStyles, "border", "Style", value);
+  }
+}
+
+#pragma mark - Convenience Methods
+
+static BorderRadii ensureNoOverlap(const BorderRadii& radii, const Size& size) {
+  // "Corner curves must not overlap: When the sum of any two adjacent border
+  // radii exceeds the size of the border box, UAs must proportionally reduce
+  // the used values of all border radii until none of them overlap."
+  // Source: https://www.w3.org/TR/css-backgrounds-3/#corner-overlap
+
+  float leftEdgeRadii = radii.topLeft.vertical + radii.bottomLeft.vertical;
+  float topEdgeRadii = radii.topLeft.horizontal + radii.topRight.horizontal;
+  float rightEdgeRadii = radii.topRight.vertical + radii.bottomRight.vertical;
+  float bottomEdgeRadii =
+      radii.bottomLeft.horizontal + radii.bottomRight.horizontal;
+
+  float leftEdgeRadiiScale =
+      (leftEdgeRadii > 0) ? std::min(size.height / leftEdgeRadii, (Float)1) : 0;
+  float topEdgeRadiiScale =
+      (topEdgeRadii > 0) ? std::min(size.width / topEdgeRadii, (Float)1) : 0;
+  float rightEdgeRadiiScale = (rightEdgeRadii > 0)
+      ? std::min(size.height / rightEdgeRadii, (Float)1)
+      : 0;
+  float bottomEdgeRadiiScale = (bottomEdgeRadii > 0)
+      ? std::min(size.width / bottomEdgeRadii, (Float)1)
+      : 0;
+
+  return BorderRadii{
+      .topLeft =
+          {static_cast<float>(
+               radii.topLeft.vertical *
+               std::min(topEdgeRadiiScale, leftEdgeRadiiScale)),
+           static_cast<float>(
+               radii.topLeft.horizontal *
+               std::min(topEdgeRadiiScale, leftEdgeRadiiScale))},
+      .topRight =
+          {static_cast<float>(
+               radii.topRight.vertical *
+               std::min(topEdgeRadiiScale, rightEdgeRadiiScale)),
+           static_cast<float>(
+               radii.topRight.horizontal *
+               std::min(topEdgeRadiiScale, rightEdgeRadiiScale))},
+      .bottomLeft =
+          {static_cast<float>(
+               radii.bottomLeft.vertical *
+               std::min(bottomEdgeRadiiScale, leftEdgeRadiiScale)),
+           static_cast<float>(
+               radii.bottomLeft.horizontal *
+               std::min(bottomEdgeRadiiScale, leftEdgeRadiiScale))},
+      .bottomRight =
+          {static_cast<float>(
+               radii.bottomRight.vertical *
+               std::min(bottomEdgeRadiiScale, rightEdgeRadiiScale)),
+           static_cast<float>(
+               radii.bottomRight.horizontal *
+               std::min(bottomEdgeRadiiScale, rightEdgeRadiiScale))},
+  };
+}
+
+static BorderRadii radiiPercentToPoint(
+    const RectangleCorners<ValueUnit>& radii,
+    const Size& size) {
+  return BorderRadii{
+      .topLeft =
+          {radii.topLeft.resolve(size.height),
+           radii.topLeft.resolve(size.width)},
+      .topRight =
+          {radii.topRight.resolve(size.height),
+           radii.topRight.resolve(size.width)},
+      .bottomLeft =
+          {radii.bottomLeft.resolve(size.height),
+           radii.bottomLeft.resolve(size.width)},
+      .bottomRight =
+          {radii.bottomRight.resolve(size.height),
+           radii.bottomRight.resolve(size.width)},
+  };
+}
+
+CascadedBorderWidths BaseViewProps::getBorderWidths() const {
+  return CascadedBorderWidths{
+      .left = optionalFloatFromYogaValue(yogaStyle.border(yoga::Edge::Left)),
+      .top = optionalFloatFromYogaValue(yogaStyle.border(yoga::Edge::Top)),
+      .right = optionalFloatFromYogaValue(yogaStyle.border(yoga::Edge::Right)),
+      .bottom =
+          optionalFloatFromYogaValue(yogaStyle.border(yoga::Edge::Bottom)),
+      .start = optionalFloatFromYogaValue(yogaStyle.border(yoga::Edge::Start)),
+      .end = optionalFloatFromYogaValue(yogaStyle.border(yoga::Edge::End)),
+      .horizontal =
+          optionalFloatFromYogaValue(yogaStyle.border(yoga::Edge::Horizontal)),
+      .vertical =
+          optionalFloatFromYogaValue(yogaStyle.border(yoga::Edge::Vertical)),
+      .all = optionalFloatFromYogaValue(yogaStyle.border(yoga::Edge::All)),
+  };
+}
+
+BorderMetrics BaseViewProps::resolveBorderMetrics(
+    const LayoutMetrics& layoutMetrics) const {
+  auto isRTL =
+      bool{layoutMetrics.layoutDirection == LayoutDirection::RightToLeft};
+
+  auto borderWidths = getBorderWidths();
+
+  BorderRadii radii = radiiPercentToPoint(
+      borderRadii.resolve(isRTL, ValueUnit{0.0f, UnitType::Point}),
+      layoutMetrics.frame.size);
+
+  return {
+      .borderColors = borderColors.resolve(isRTL, {}),
+      .borderWidths = borderWidths.resolve(isRTL, 0),
+      .borderRadii = ensureNoOverlap(radii, layoutMetrics.frame.size),
+      .borderCurves = borderCurves.resolve(isRTL, BorderCurve::Circular),
+      .borderStyles = borderStyles.resolve(isRTL, BorderStyle::Solid),
+  };
+}
+
+Transform BaseViewProps::resolveTransform(
+    const LayoutMetrics& layoutMetrics) const {
+  const auto& frameSize = layoutMetrics.frame.size;
+  return resolveTransform(frameSize, transform, transformOrigin);
+}
+
+Transform BaseViewProps::resolveTransform(
+    const Size& frameSize,
+    const Transform& transform,
+    const TransformOrigin& transformOrigin) {
+  auto transformMatrix = Transform{};
+
+  // transform is matrix
+  if (transform.operations.size() == 1 &&
+      transform.operations[0].type == TransformOperationType::Arbitrary) {
+    transformMatrix = transform;
+  } else {
+    for (const auto& operation : transform.operations) {
+      transformMatrix = transformMatrix *
+          Transform::FromTransformOperation(operation, frameSize, transform);
+    }
+  }
+
+  if (transformOrigin.isSet()) {
+    std::array<float, 3> translateOffsets = getTranslateForTransformOrigin(
+        frameSize.width, frameSize.height, transformOrigin);
+    transformMatrix =
+        Transform::Translate(
+            translateOffsets[0], translateOffsets[1], translateOffsets[2]) *
+        transformMatrix *
+        Transform::Translate(
+            -translateOffsets[0], -translateOffsets[1], -translateOffsets[2]);
+  }
+
+  return transformMatrix;
+}
+
+bool BaseViewProps::getClipsContentToBounds() const {
+  return yogaStyle.overflow() != yoga::Overflow::Visible;
+}
+
+#pragma mark - DebugStringConvertible
+
+#if RN_DEBUG_STRING_CONVERTIBLE
+SharedDebugStringConvertibleList BaseViewProps::getDebugProps() const {
+  const auto& defaultBaseViewProps = BaseViewProps();
+
+  return AccessibilityProps::getDebugProps() +
+      YogaStylableProps::getDebugProps() +
+      SharedDebugStringConvertibleList{
+          debugStringConvertibleItem(
+              "opacity", opacity, defaultBaseViewProps.opacity),
+          debugStringConvertibleItem(
+              "backgroundColor",
+              backgroundColor,
+              defaultBaseViewProps.backgroundColor),
+          debugStringConvertibleItem(
+              "zIndex", zIndex, defaultBaseViewProps.zIndex.value_or(0)),
+          debugStringConvertibleItem(
+              "pointerEvents",
+              pointerEvents,
+              defaultBaseViewProps.pointerEvents),
+          debugStringConvertibleItem(
+              "transform", transform, defaultBaseViewProps.transform),
+          debugStringConvertibleItem(
+              "backgroundImage",
+              backgroundImage,
+              defaultBaseViewProps.backgroundImage),
+      };
+}
+#endif
+
+} // namespace facebook::react

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-windows",
-  "version": "0.83.0-preview.0",
+  "version": "0.83.0-preview.2",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -26,7 +26,7 @@
     "@react-native-community/cli": "20.0.0",
     "@react-native-community/cli-platform-android": "20.0.0",
     "@react-native-community/cli-platform-ios": "20.0.0",
-    "@react-native-windows/cli": "0.83.0-preview.0",
+    "@react-native-windows/cli": "0.83.0-preview.1",
     "@react-native/assets": "1.0.0",
     "@react-native/assets-registry": "0.83.0-rc.5",
     "@react-native/codegen": "0.83.0-rc.5",
@@ -69,7 +69,7 @@
     "yargs": "^17.6.2"
   },
   "devDependencies": {
-    "@react-native-windows/codegen": "0.83.0-preview.0",
+    "@react-native-windows/codegen": "0.83.0-preview.1",
     "@react-native/metro-config": "0.83.0-rc.5",
     "@rnw-scripts/babel-react-native-config": "0.0.0",
     "@rnw-scripts/eslint-config": "1.2.38",
@@ -86,7 +86,7 @@
     "prettier": "2.8.8",
     "react": "19.2.0",
     "react-native": "0.83.0-rc.5",
-    "react-native-platform-override": "0.83.0-preview.0",
+    "react-native-platform-override": "0.83.0-preview.1",
     "react-refresh": "^0.14.0",
     "typescript": "5.0.4"
   },